.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   EMERALD GARDENS — MERCHANDISE STORE
   Global site-wide stylesheet  ·  v0.1  ·  Phase 1: Foundation
   --------------------------------------------------------------------------
   Architecture (sections fill in as the build progresses):
     1.  Design tokens              [BUILT]
     2.  Base + typography          [BUILT]
     3.  Global layout & helpers    [BUILT]
     4.  Buttons & links            [BUILT]
     4b. Image treatments           [BUILT]
     4c. Forms (base)               [BUILT]
     5.  Header & navigation        [Phase 2]
     6.  Homepage sections          [Phase 3]
     7.  Product cards              [Phase 4]
     8.  WooCommerce archives       [Phase 4]
     9.  Single product            [Phase 5]
     10. Cart                       [Phase 6]
     11. Checkout                   [Phase 6]
     12. My Account                 [Phase 6]
     13. Forms (extended)           [Phase 7]
     14. Notices & messages         [Phase 2/6]
     15. Footer                     [Phase 2]
     16. Responsive rules           [progressive]
     17. Reduced motion             [BUILT]
   --------------------------------------------------------------------------
   HOW TO INSTALL:
     Elementor Pro → Site Settings → Custom CSS  (loads site-wide),
     OR a child theme style.css / a code-snippet plugin.
     Do NOT paste this into a single HTML widget.
   NAMING: all custom classes are prefixed .eg-  ·  all tokens --eg-
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   PLACEHOLDER VALUES: every color/font below is a labeled stand-in chosen to
   preview well. Replace the flagged values with the real Emerald Gardens and
   Tickled Pink brand assets — you only edit this :root block, nothing else.
   ========================================================================== */
:root {

  /* --- Brand: Emerald Gardens (permanent store shell) --- */
  --eg-primary:        #16291F;  /* EG forest green — matched to the main site */
  --eg-primary-deep:   #0E1A14;  /* darker green (hovers, footer) */
  --eg-primary-tint:   #E7ECE8;  /* pale green wash */
  --eg-secondary:      #14140F;  /* ink / near-black */

  /* Emerald Gardens GOLD accent (brand pop — used in chrome, never in drops) */
  --eg-gold:           #C19A49;  /* EG gold — matched to the main site */
  --eg-gold-deep:      #A47F35;  /* darker gold */

  /* --- Drop accent: swapped per collection. Currently Tickled Pink --- */
  --eg-accent:         #E8548A;  /* PLACEHOLDER · Tickled Pink */
  --eg-accent-deep:    #C43C6E;  /* PLACEHOLDER · pressed/hover pink */
  --eg-accent-tint:    #FBE9F1;  /* PLACEHOLDER · pale pink wash */

  /* --- Neutrals / surfaces --- */
  --eg-background:     #F6F4EE;  /* PLACEHOLDER · warm paper (not pure white) */
  --eg-surface:        #FFFFFF;  /* PLACEHOLDER · cards, panels */
  --eg-surface-alt:    #EFEBE1;  /* PLACEHOLDER · alternating band */
  --eg-ink:            #14140F;  /* body text on light */
  --eg-inverse:        #FBFAF6;  /* text on dark */

  /* --- Text --- */
  --eg-text:           var(--eg-ink);
  --eg-text-muted:     #6B6B60;  /* PLACEHOLDER · muted copy */
  --eg-text-faint:     #9A9A8E;  /* captions, meta */

  /* --- Lines --- */
  --eg-border:         #E4E0D6;  /* thin hairlines */
  --eg-border-strong:  #14140F;

  /* --- Status --- */
  --eg-sale:           var(--eg-accent);
  --eg-success:        #2E7D52;
  --eg-error:          #C0392B;

  /* --- Typography --- */
  --eg-font-display:   "Archivo", "Helvetica Neue", Arial, sans-serif; /* PLACEHOLDER · bold/condensed display */
  --eg-font-body:      "Inter", "Helvetica Neue", Arial, sans-serif;   /* PLACEHOLDER · clean UI/body */

  --eg-fw-regular: 400;
  --eg-fw-medium:  500;
  --eg-fw-semibold:600;
  --eg-fw-bold:    700;
  --eg-fw-black:   900;

  /* Fluid type scale (min → max across viewport) */
  --eg-fs-hero:    clamp(2.75rem, 1.6rem + 6vw, 7rem);     /* oversized editorial headline */
  --eg-fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --eg-fs-h2:      clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  --eg-fs-h3:      clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --eg-fs-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --eg-fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --eg-fs-body:    1rem;         /* 16px base */
  --eg-fs-sm:      0.875rem;
  --eg-fs-xs:      0.75rem;

  --eg-lh-tight:   1.02;   /* display headlines */
  --eg-lh-snug:    1.15;
  --eg-lh-body:    1.6;

  --eg-tracking-tight:  -0.02em;
  --eg-tracking-normal: 0;
  --eg-tracking-wide:   0.02em;
  --eg-tracking-label:  0.14em;  /* uppercase eyebrows/labels */

  /* --- Layout --- */
  --eg-container:      1440px;
  --eg-container-wide: 1720px;
  --eg-container-text: 720px;   /* readable prose measure */
  --eg-page-padding:   clamp(20px, 4vw, 72px);
  --eg-section-spacing:clamp(72px, 10vw, 160px);
  --eg-gap:            clamp(16px, 2vw, 32px);
  --eg-gap-lg:         clamp(28px, 4vw, 64px);

  /* --- Radius: deliberately minimal (editorial, not bubbly) --- */
  --eg-radius:     2px;
  --eg-radius-md:  4px;
  --eg-radius-pill:999px;   /* reserved for a FEW intentional pill labels only */

  /* --- Borders --- */
  --eg-border-hair: 1px;
  --eg-border-med:  1.5px;

  /* --- Elevation: used sparingly; brand avoids heavy shadows --- */
  --eg-shadow-sm:  0 1px 2px rgba(20,20,15,.06);
  --eg-shadow-md:  0 8px 30px rgba(20,20,15,.10);

  /* --- Motion --- */
  --eg-transition:      220ms ease;
  --eg-transition-slow: 420ms cubic-bezier(.2,.7,.2,1);
  --eg-ease-out:        cubic-bezier(.2,.7,.2,1);

  /* --- Z-index scale --- */
  --eg-z-header:   100;
  --eg-z-announce: 90;
  --eg-z-overlay:  200;
  --eg-z-drawer:   300;
  --eg-z-modal:    400;
}

/* Per-drop accent scope: the STORE is Emerald Gardens (emerald/ink) everywhere.
   Only a collection zone wrapped in a .eg-drop--* class turns its accent color.
   To add a brand later, copy the pattern and swap 3 values — nothing else changes. */
.eg-drop--tickled-pink {
  --eg-accent:      #E8548A;  /* PLACEHOLDER · Tickled Pink */
  --eg-accent-deep: #C43C6E;  /* PLACEHOLDER */
  --eg-accent-tint: #FBE9F1;  /* PLACEHOLDER */
}
/* Future brand drops — fill in real colors when each launches:
.eg-drop--korner-boys    { --eg-accent:#PLACEHOLDER; --eg-accent-deep:#PLACEHOLDER; --eg-accent-tint:#PLACEHOLDER; }
.eg-drop--blues-brothers { --eg-accent:#PLACEHOLDER; --eg-accent-deep:#PLACEHOLDER; --eg-accent-tint:#PLACEHOLDER; }
.eg-drop--belushis-farm  { --eg-accent:#PLACEHOLDER; --eg-accent-deep:#PLACEHOLDER; --eg-accent-tint:#PLACEHOLDER; } */


/* ==========================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Scoped to the front-end body so we never touch wp-admin or the Elementor editor. */
body.eg-store {
  margin: 0;
  background: var(--eg-background);
  color: var(--eg-text);
  font-family: var(--eg-font-body);
  font-size: var(--eg-fs-body);
  line-height: var(--eg-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.eg-store img,
.eg-store picture,
.eg-store video { max-width: 100%; height: auto; display: block; }

/* Headings — display face, tight, confident */
.eg-store h1, .eg-store h2, .eg-store h3, .eg-store h4,
.eg-h1, .eg-h2, .eg-h3, .eg-h4 {
  font-family: var(--eg-font-display);
  font-weight: var(--eg-fw-black);
  line-height: var(--eg-lh-tight);
  letter-spacing: var(--eg-tracking-tight);
  /* no forced color: headings inherit ink on light, white on dark heroes/sections */
  margin: 0 0 0.4em;
  text-wrap: balance;
}

.eg-hero-title { font-size: var(--eg-fs-hero); text-transform: uppercase; }
.eg-h1, .eg-store h1 { font-size: var(--eg-fs-h1); }
.eg-h2, .eg-store h2 { font-size: var(--eg-fs-h2); }
.eg-h3, .eg-store h3 { font-size: var(--eg-fs-h3); line-height: var(--eg-lh-snug); }
.eg-h4, .eg-store h4 { font-size: var(--eg-fs-h4); font-weight: var(--eg-fw-bold); line-height: var(--eg-lh-snug); }

.eg-store p { margin: 0 0 1em; max-width: var(--eg-container-text); }
.eg-lead { font-size: var(--eg-fs-lead); color: var(--eg-text-muted); line-height: 1.5; }

/* Eyebrow / label — the small uppercase tag used above section titles */
.eg-eyebrow {
  font-family: var(--eg-font-body);
  font-size: var(--eg-fs-xs);
  font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-label);
  text-transform: uppercase;
  color: var(--eg-text-muted);
  margin: 0 0 0.75em;
  display: inline-block;
}
.eg-eyebrow--accent { color: var(--eg-accent-deep); }

.eg-store a { color: inherit; text-decoration: none; transition: color var(--eg-transition); }
.eg-store a:hover { color: var(--eg-primary); }
/* Chrome links (header/footer nav) just underline — no color shift */
.eg-header a:hover, .eg-nav a:hover, .eg-utils a:hover,
.eg-mobile__nav a:hover, .eg-footer a:hover { color: inherit; }

.eg-store ::selection { background: var(--eg-primary); color: #fff; }


/* ==========================================================================
   3. GLOBAL LAYOUT & HELPERS
   ========================================================================== */
.eg-container {
  width: 100%;
  max-width: var(--eg-container);
  margin-inline: auto;
  padding-inline: var(--eg-page-padding);
}
.eg-container--wide { max-width: var(--eg-container-wide); }
.eg-container--text { max-width: var(--eg-container-text); }
.eg-bleed { width: 100%; }  /* full-bleed campaign sections */

.eg-section { padding-block: var(--eg-section-spacing); }
.eg-section--tight { padding-block: clamp(48px, 6vw, 90px); }
.eg-section--surface { background: var(--eg-surface); }
.eg-section--alt { background: var(--eg-surface-alt); }
.eg-section--ink { background: var(--eg-ink); color: var(--eg-inverse); }
.eg-section--emerald { background: var(--eg-primary); color: var(--eg-inverse); }
.eg-section--ink .eg-store h1,.eg-section--ink h2,.eg-section--ink h3,
.eg-section--emerald h2,.eg-section--emerald h3 { color: var(--eg-inverse); }

/* Section header block (eyebrow + title + optional link) */
.eg-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--eg-gap);
  margin-bottom: var(--eg-gap-lg);
  flex-wrap: wrap;
}

/* Simple, dependency-free grid utility */
.eg-grid { display: grid; gap: var(--eg-gap); }
.eg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.eg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.eg-grid--4 { grid-template-columns: repeat(4, 1fr); }

.eg-hairline { border: 0; border-top: var(--eg-border-hair) solid var(--eg-border); margin: 0; }

/* Accessibility: visually hidden but screen-reader accessible */
.eg-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.eg-skip-link {
  position: absolute; left: 8px; top: -60px; z-index: var(--eg-z-modal);
  background: var(--eg-ink); color: #fff; padding: 10px 16px; border-radius: var(--eg-radius);
  transition: top var(--eg-transition);
}
.eg-skip-link:focus { top: 8px; }


/* ==========================================================================
   4. BUTTONS & LINKS
   --------------------------------------------------------------------------
   .eg-btn is the shared shape. Modifiers set color. These also target native
   WooCommerce buttons later so add-to-cart etc. inherit the same language.
   ========================================================================== */
.eg-btn {
  --_bg: var(--eg-ink);
  --_fg: var(--eg-inverse);
  --_bd: var(--eg-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--eg-font-body);
  font-size: var(--eg-fs-sm);
  font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  padding: 1.05em 1.9em;
  min-height: 48px;                 /* touch target */
  color: var(--_fg);
  background: var(--_bg);
  border: var(--eg-border-med) solid var(--_bd);
  border-radius: var(--eg-radius);
  cursor: pointer;
  transition: background var(--eg-transition), color var(--eg-transition),
              border-color var(--eg-transition), transform var(--eg-transition);
}
.eg-btn:hover { transform: translateY(-1px); color: var(--_fg); }
.eg-btn:active { transform: translateY(0); }

/* Variants */
.eg-btn--primary  { --_bg: var(--eg-ink); --_fg: #fff; --_bd: var(--eg-ink); }
.eg-btn--primary:hover { --_bg: var(--eg-primary); --_bd: var(--eg-primary); }
.eg-btn--accent   { --_bg: var(--eg-accent); --_fg: #fff; --_bd: var(--eg-accent); }
.eg-btn--accent:hover { --_bg: var(--eg-accent-deep); --_bd: var(--eg-accent-deep); }
.eg-btn--emerald  { --_bg: var(--eg-primary); --_fg: #fff; --_bd: var(--eg-primary); }
.eg-btn--emerald:hover { --_bg: var(--eg-primary-deep); --_bd: var(--eg-primary-deep); }
.eg-btn--gold     { --_bg: var(--eg-gold); --_fg: var(--eg-ink); --_bd: var(--eg-gold); }
.eg-btn--gold:hover { --_bg: var(--eg-gold-deep); --_bd: var(--eg-gold-deep); }
.eg-btn--outline  { --_bg: transparent; --_fg: var(--eg-ink); --_bd: var(--eg-ink); }
.eg-btn--outline:hover { --_bg: var(--eg-ink); --_fg: #fff; }
.eg-btn--ghost-inverse { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.6); }
.eg-btn--ghost-inverse:hover { --_bg: #fff; --_fg: var(--eg-ink); --_bd:#fff; }

.eg-btn--sm { padding: 0.7em 1.2em; min-height: 40px; font-size: var(--eg-fs-xs); }
.eg-btn--block { display: flex; width: 100%; }

.eg-btn[disabled], .eg-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Text link with animated underline */
.eg-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-sm);
  letter-spacing: var(--eg-tracking-wide); text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% var(--eg-border-med); background-position: 0 100%;
  background-repeat: no-repeat; transition: background-size var(--eg-transition), color var(--eg-transition);
}
.eg-link:hover { background-size: 100% var(--eg-border-med); }


/* ==========================================================================
   4b. IMAGE TREATMENTS
   --------------------------------------------------------------------------
   Consistent, art-directed ratios. Photography carries the design, so image
   containers are locked to ratios to prevent layout shift (CLS).
   ========================================================================== */
.eg-media { position: relative; overflow: hidden; background: var(--eg-surface-alt); }
.eg-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.eg-ratio-portrait  { aspect-ratio: 4 / 5; }   /* product & apparel default */
.eg-ratio-square    { aspect-ratio: 1 / 1; }
.eg-ratio-landscape { aspect-ratio: 3 / 2; }
.eg-ratio-wide      { aspect-ratio: 16 / 9; }
.eg-ratio-campaign  { aspect-ratio: 21 / 9; }   /* full-bleed campaign bands */

/* Subtle zoom on hover — used on cards/campaign tiles (motion honored below) */
.eg-media--zoom > img { transition: transform var(--eg-transition-slow); will-change: transform; }
.eg-media--zoom:hover > img { transform: scale(1.04); }

/* Dark scrim for text-over-image legibility */
.eg-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}


/* ==========================================================================
   4c. FORMS (base) — extended for Woo checkout/account in later phases
   ========================================================================== */
.eg-store input[type=text], .eg-store input[type=email], .eg-store input[type=tel],
.eg-store input[type=password], .eg-store input[type=search], .eg-store input[type=number],
.eg-store select, .eg-store textarea, .eg-field {
  width: 100%;
  font-family: var(--eg-font-body); font-size: var(--eg-fs-body);
  color: var(--eg-ink); background: var(--eg-surface);
  border: var(--eg-border-hair) solid var(--eg-border);
  border-radius: var(--eg-radius);
  padding: 0.85em 1em; min-height: 48px;
  transition: border-color var(--eg-transition), box-shadow var(--eg-transition);
}
.eg-store input:focus, .eg-store select:focus, .eg-store textarea:focus, .eg-field:focus {
  outline: none; border-color: var(--eg-ink);
  box-shadow: 0 0 0 3px var(--eg-accent-tint);
}
.eg-store label, .eg-label {
  display: inline-block; font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-medium);
  letter-spacing: var(--eg-tracking-wide); margin-bottom: 0.4em; color: var(--eg-ink);
}
.eg-store input::placeholder, .eg-store textarea::placeholder { color: var(--eg-text-faint); }


/* ==========================================================================
   GLOBAL FOCUS — accessible, brand-styled (never removed without replacement)
   ========================================================================== */
.eg-store a:focus-visible, .eg-store button:focus-visible,
.eg-btn:focus-visible, .eg-store input:focus-visible,
.eg-store select:focus-visible, .eg-store [tabindex]:focus-visible {
  outline: 3px solid var(--eg-primary);   /* Emerald Gardens by default */
  outline-offset: 2px;
  border-radius: var(--eg-radius);
}
/* Inside a branded drop zone, focus picks up that collection's accent */
.eg-drop--tickled-pink a:focus-visible,
.eg-drop--tickled-pink button:focus-visible,
.eg-drop--tickled-pink .eg-btn:focus-visible,
.eg-drop--tickled-pink input:focus-visible {
  outline-color: var(--eg-accent);
}


/* ==========================================================================
   5. HEADER, ANNOUNCEMENT BAR & NAVIGATION
   --------------------------------------------------------------------------
   Header is Emerald Gardens chrome: transparent over a hero, solid after
   scroll and on pages with no hero. JS toggles .is-solid / .is-scrolled and
   sets body padding on no-hero pages. Cart count is live via Woo fragments.
   ========================================================================== */
.eg-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--eg-z-header); }
.eg-store.eg-noscroll { overflow: hidden; }              /* scroll lock when overlay open */

/* --- Announcement bar --- */
.eg-announce { background: var(--eg-primary); color: #fff; }
.eg-announce__inner {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: .6em; min-height: 38px; padding: 7px 44px; text-align: center;
  font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-medium); letter-spacing: var(--eg-tracking-wide);
}
.eg-announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.eg-announce__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: grid; place-items: center;
}
.eg-announce.is-dismissed { display: none; }

/* --- Header shell --- */
.eg-header { color: var(--eg-ink); background: var(--eg-background); box-shadow: 0 1px 0 var(--eg-border);
  transition: background var(--eg-transition), color var(--eg-transition), box-shadow var(--eg-transition); }
/* transparent only over a hero at the top of the page (JS adds this) */
.eg-header.is-transparent { color: #fff; background: transparent; box-shadow: none; }
.eg-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--eg-gap);
  min-height: 70px; max-width: var(--eg-container-wide); margin-inline: auto; padding-inline: var(--eg-page-padding);
}

/* Logo / wordmark (swap the text for an <img> logo) */
.eg-logo {
  justify-self: center; font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; color: inherit; line-height: 1;
}
.eg-logo img { max-height: 34px; width: auto; }

/* Primary nav (desktop, left cell) */
.eg-nav { display: flex; align-items: center; gap: 1.7em; justify-self: start; }
.eg-nav a {
  font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold); letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase; color: inherit; position: relative; padding: .5em 0;
}
.eg-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .1em; height: 2px;
  background: currentColor; transition: right var(--eg-transition);
}
.eg-nav a:hover::after, .eg-nav a[aria-current="page"]::after { right: 0; }
/* Golf Outing nav link — gold so it stands out */
.eg-nav a.eg-nav__golf, .eg-mobile__nav a.eg-nav__golf { color: var(--eg-gold) !important; }

/* Utilities (right cell) */
.eg-utils { justify-self: end; display: flex; align-items: center; gap: 1em; }
.eg-utils__link {
  font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-semibold); letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase; color: inherit; display: inline-flex; align-items: center; gap: .4em;
}
.eg-iconbtn {
  position: relative; background: none; border: 0; color: inherit; cursor: pointer;
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
}
.eg-iconbtn svg { width: 22px; height: 22px; display: block; }
.eg-cart__count {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--eg-radius-pill); background: var(--eg-gold); color: var(--eg-ink);
  font: var(--eg-fw-bold) 11px/18px var(--eg-font-body); text-align: center;
}
.eg-cart__count[data-count="0"] { display: none; }

/* Hamburger (mobile only) */
.eg-burger { display: none; justify-self: start; }

/* --- Search overlay (slides down from top) --- */
.eg-search {
  position: fixed; inset: 0 0 auto 0; z-index: var(--eg-z-overlay);
  background: var(--eg-background); color: var(--eg-ink);
  transform: translateY(-100%); transition: transform var(--eg-transition-slow);
  padding: var(--eg-page-padding); box-shadow: var(--eg-shadow-md);
}
.eg-search.is-open { transform: none; }
.eg-search__inner { max-width: var(--eg-container); margin: 64px auto 8px; }
.eg-search form { display: flex; align-items: center; gap: 14px; border-bottom: var(--eg-border-med) solid var(--eg-ink); }
.eg-search input[type="search"] {
  flex: 1; border: 0; background: none; border-radius: 0; padding: .5em 0; min-height: auto;
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-bold); font-size: var(--eg-fs-h2); text-transform: uppercase;
}
.eg-search input[type="search"]:focus { outline: none; box-shadow: none; border: 0; border-bottom: 0; }
.eg-search__close { position: absolute; top: 18px; right: 18px; background: none; border: 0; cursor: pointer; color: var(--eg-ink); padding: 8px; }

/* --- Mobile off-canvas menu --- */
.eg-mobile { position: fixed; inset: 0; z-index: var(--eg-z-drawer); visibility: hidden; }
.eg-mobile__scrim { position: absolute; inset: 0; background: rgba(8,48,31,.55); opacity: 0; transition: opacity var(--eg-transition); }
.eg-mobile__panel {
  position: absolute; top: 0; left: 0; height: 100%; width: min(88%, 420px);
  background: var(--eg-primary); color: #fff; transform: translateX(-100%);
  transition: transform var(--eg-transition-slow); display: flex; flex-direction: column;
  padding: clamp(20px,5vw,32px); overflow-y: auto;
}
.eg-mobile.is-open { visibility: visible; }
.eg-mobile.is-open .eg-mobile__scrim { opacity: 1; }
.eg-mobile.is-open .eg-mobile__panel { transform: none; }
.eg-mobile__close { align-self: flex-end; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; margin: -4px -4px 0 0; }
.eg-mobile__nav { display: flex; flex-direction: column; margin-top: 1.4em; }
.eg-mobile__nav a {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black); font-size: clamp(1.7rem, 8vw, 2.4rem);
  text-transform: uppercase; color: #fff; padding: .3em 0; border-bottom: 1px solid rgba(255,255,255,.16); line-height: 1.1;
}
.eg-mobile__foot { margin-top: auto; padding-top: 1.8em; display: flex; flex-direction: column; gap: 1.1em; }
.eg-mobile__foot a { color: rgba(255,255,255,.9); font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-wide); text-transform: uppercase; display: inline-flex; align-items: center; gap: .5em; }

/* --- Header responsive --- */
@media (max-width: 900px) {
  .eg-nav { display: none; }
  .eg-burger { display: grid; }
  .eg-header__bar { grid-template-columns: auto 1fr auto; }
  .eg-logo { justify-self: center; }
  .eg-utils__link, .eg-utils .eg-acct { display: none; }   /* moved into mobile menu */
}
@media (min-width: 901px) { .eg-mobile { display: none; } }


/* ==========================================================================
   6. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- 6.1 Hero ------------------------------------------------------------- */
.eg-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;   /* text panel | photo */
  min-height: min(84vh, 800px);
  overflow: hidden;
  background: var(--eg-primary);
  color: #fff;
  isolation: isolate;
}
.eg-hero__media { position: relative; min-height: 100%; }
.eg-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* subtle top scrim so the transparent header stays legible over the photo */
.eg-hero__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,22,15,.35) 0%, rgba(4,22,15,0) 22%);
}
.eg-hero__inner {                       /* the solid emerald text panel */
  display: flex; flex-direction: column; justify-content: center;
  background: var(--eg-primary);
  padding-block: clamp(48px, 6vw, 96px);
  padding-right: clamp(28px, 4vw, 64px);
  /* align text to the same left edge as .eg-container used everywhere else */
  padding-left: max(var(--eg-page-padding), calc((100vw - var(--eg-container)) / 2 + var(--eg-page-padding)));
}
.eg-hero__eyebrow { color: var(--eg-gold); }
.eg-hero__title {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); text-transform: uppercase; color: #fff;
  max-width: 16ch; margin: 0 0 .4em;
}
.eg-hero__sub {
  font-size: var(--eg-fs-lead); color: rgba(255,255,255,.85);
  max-width: 40ch; margin: 0 0 1.6em;
}
.eg-hero__actions { display: flex; gap: var(--eg-gap); flex-wrap: wrap; align-items: center; }
.eg-hero__actions .eg-link { color: #fff; }
.eg-hero__actions .eg-link:hover { color: var(--eg-gold); }

/* --- 6.1b Branded collection block ----------------------------------------
   A self-contained drop zone inside the Emerald Gardens store. Pair with a
   .eg-drop--<brand> scope class so the whole block takes that brand's color.
   Duplicate the block + swap the scope class to launch another brand later. */
.eg-collection-block { background: var(--eg-accent-tint); }
.eg-collection-tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--eg-font-body); font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-bold);
  letter-spacing: var(--eg-tracking-label); text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--eg-accent);
  padding: .55em .8em; border-radius: var(--eg-radius);
}
.eg-collection-note { font-size: var(--eg-fs-sm); color: var(--eg-text-muted); margin-top: .7em; max-width: 46ch; }

/* --- 6.2 Editorial (asymmetric image + text) ------------------------------ */
.eg-editorial {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 84px); align-items: center;
}
.eg-editorial--flip .eg-editorial__media { order: 2; }
.eg-editorial__media { aspect-ratio: 4 / 5; }
.eg-editorial__body { max-width: 46ch; }
.eg-editorial__title { margin-bottom: .5em; }
.eg-editorial__text { color: var(--eg-text-muted); margin-bottom: 1.5em; }
.eg-section--emerald .eg-editorial__text,
.eg-section--ink .eg-editorial__text { color: rgba(255,255,255,.82); }

/* --- 6.3 Shop by category (large visual tiles) ---------------------------- */
.eg-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--eg-gap); }
.eg-cat-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--eg-surface-alt); color: #fff;
}
.eg-cat-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--eg-transition-slow); will-change: transform;
}
.eg-cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
.eg-cat-tile:hover img { transform: scale(1.05); }
.eg-cat-tile__label {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: clamp(20px, 3vw, 40px);
  display: flex; align-items: baseline; gap: .6em;
}
.eg-cat-tile__name {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: var(--eg-fs-h2); text-transform: uppercase; line-height: 1; color: #fff;
}
.eg-cat-tile__count { font-size: var(--eg-fs-sm); color: rgba(255,255,255,.8); }
.eg-cat-tile__arrow {
  position: absolute; top: clamp(18px,3vw,32px); right: clamp(18px,3vw,32px); z-index: 2;
  width: 44px; height: 44px; border: var(--eg-border-med) solid rgba(255,255,255,.7);
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  transition: background var(--eg-transition), color var(--eg-transition), transform var(--eg-transition);
}
.eg-cat-tile:hover .eg-cat-tile__arrow { background: #fff; color: var(--eg-ink); transform: translate(2px,-2px); }

/* --- 6.4 Full-width campaign band ----------------------------------------- */
.eg-campaign {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(72vh, 760px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; background: var(--eg-ink);
}
.eg-campaign__media { position: absolute; inset: 0; z-index: 0; }
.eg-campaign__media img { width: 100%; height: 100%; object-fit: cover; }
.eg-campaign::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.42);
}
.eg-campaign__inner {
  position: relative; z-index: 2;
  padding: var(--eg-page-padding); max-width: 900px;
}
.eg-campaign__title { color: #fff; font-size: clamp(2.5rem,1.4rem+5vw,6rem); text-transform: uppercase; }
.eg-campaign__inner .eg-eyebrow { color: rgba(255,255,255,.8); }

/* --- 6.5 Official store / brand band (uses .eg-section--emerald) ---------- */
.eg-brandband { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px,5vw,72px); align-items: center; }
.eg-brandband__note {
  font-size: var(--eg-fs-sm); color: rgba(255,255,255,.72);
  border-left: var(--eg-border-med) solid rgba(255,255,255,.4);
  padding-left: 1em; max-width: 40ch;
}
.eg-brandband__actions { display: flex; gap: var(--eg-gap); flex-wrap: wrap; }

/* --- 6.6 Email signup ----------------------------------------------------- */
.eg-signup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,72px); align-items: center; }
.eg-signup__form { display: flex; gap: 12px; max-width: 540px; margin-top: 1.25em; }
.eg-signup__form input[type=email] { flex: 1; }
.eg-signup__fine { font-size: var(--eg-fs-xs); color: var(--eg-text-faint); margin-top: 1em; }


/* ==========================================================================
   7. PRODUCT CARDS  (native WooCommerce Products widget)
   Assign the CSS class .eg-product-grid to the Elementor "Products" widget.
   Styling targets Woo's own markup so add-to-cart/variations stay functional.
   ========================================================================== */
.eg-product-grid ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--eg-gap-lg) var(--eg-gap);
  grid-template-columns: repeat(4, 1fr);
}
.eg-product-grid ul.products li.product {
  position: relative; margin: 0 !important; width: auto !important;
  padding: 0 !important; text-align: left; float: none !important;
}
.eg-product-grid li.product a { color: inherit; }
.eg-product-grid li.product img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--eg-surface-alt); margin: 0 0 0 !important; border-radius: var(--eg-radius);
  transition: transform var(--eg-transition-slow); will-change: transform;
}
.eg-product-grid li.product:hover img { transform: scale(1.03); }
.eg-product-grid .woocommerce-loop-product__title,
.eg-product-grid li.product h2, .eg-product-grid li.product h3 {
  font-family: var(--eg-font-body) !important; font-size: var(--eg-fs-sm) !important;
  font-weight: var(--eg-fw-semibold); letter-spacing: 0; text-transform: none;
  color: var(--eg-ink); line-height: 1.3; margin: .95em 0 .25em !important; padding: 0;
}
.eg-product-grid .price {
  font-family: var(--eg-font-body); font-weight: var(--eg-fw-semibold);
  font-size: var(--eg-fs-sm); color: var(--eg-ink); display: block;
}
.eg-product-grid .price del { color: var(--eg-text-faint); font-weight: 400; margin-right: .45em; opacity: 1; }
.eg-product-grid .price ins { text-decoration: none; color: var(--eg-accent-deep); }

/* Loop add-to-cart / select-options: our button language, revealed on hover
   (opacity only, so the card never shifts). Forced visible on touch devices. */
.eg-product-grid li.product a.button,
.eg-product-grid li.product a.added_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .7em !important; padding: .7em 1.2em; min-height: 40px;
  font-family: var(--eg-font-body); font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-wide); text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--eg-ink); border: var(--eg-border-med) solid var(--eg-ink);
  border-radius: var(--eg-radius); transition: background var(--eg-transition), border-color var(--eg-transition), opacity var(--eg-transition);
}
.eg-product-grid li.product a.button:hover { background: var(--eg-accent); border-color: var(--eg-accent); }
@media (hover: hover) {
  .eg-product-grid li.product a.button { opacity: 0; }
  .eg-product-grid li.product:hover a.button,
  .eg-product-grid li.product:focus-within a.button { opacity: 1; }
}

/* ==========================================================================
   8. WOOCOMMERCE (shared bits used on homepage; full archive in Phase 4)
   ========================================================================== */
body.eg-store span.onsale {
  position: absolute; top: 10px; left: 10px; z-index: 3; margin: 0;
  min-height: 0; line-height: 1; border-radius: 0;
  background: var(--eg-accent); color: #fff;
  font-family: var(--eg-font-body); font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-bold);
  letter-spacing: .08em; text-transform: uppercase; padding: .45em .7em;
}

/* --- Shop / category archive header --- */
.eg-archive-head {
  padding-block: clamp(28px,4vw,52px) clamp(18px,2.5vw,28px);
  border-bottom: var(--eg-border-hair) solid var(--eg-border);
  margin-bottom: var(--eg-gap-lg);
}
.eg-archive-title {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: var(--eg-fs-h1); text-transform: uppercase; letter-spacing: var(--eg-tracking-tight);
  line-height: 1.02; margin: .15em 0 .25em; color: var(--eg-ink);
}
.eg-archive-desc { color: var(--eg-text-muted); max-width: 62ch; font-size: var(--eg-fs-lead); }

/* --- Shop hero band (custom HTML widget at top of the archive) --- */
.eg-shop-hero { background: var(--eg-primary); color: #fff; }
.eg-shop-hero .eg-container { padding-block: clamp(48px, 7vw, 104px); }
.eg-shop-hero .eg-eyebrow { color: var(--eg-gold); }
.eg-shop-hero__title {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); text-transform: uppercase;
  color: #fff; line-height: 1.02; letter-spacing: var(--eg-tracking-tight); margin: .08em 0 .35em;
}
.eg-shop-hero__desc { color: rgba(255,255,255,.82); max-width: 56ch; font-size: var(--eg-fs-lead); }

/* Wrapper for the toolbar + Archive Products widget.
   Container must be set to FULL WIDTH in Elementor; this handles all four
   sides: full-bleed background, content aligned to the same column as the
   rest of the site (left/right), breathing room top/bottom. */
.eg-shop-body {
  padding-block: clamp(48px, 7vw, 104px);
  padding-inline: max(var(--eg-page-padding), calc((100vw - var(--eg-container)) / 2 + var(--eg-page-padding)));
}
/* .eg-shop-body { background: var(--eg-background); } */   /* warm paper (recommended) */
/* .eg-shop-body { background: #ffffff; } */                /* pure white  */
/* .eg-shop-body { background: var(--eg-primary-tint); } */ /* pale emerald */

body.eg-store .woocommerce-breadcrumb {
  font-size: var(--eg-fs-xs); letter-spacing: var(--eg-tracking-wide); text-transform: uppercase;
  color: var(--eg-text-muted); margin-bottom: 1.2em;
}
body.eg-store .woocommerce-breadcrumb a { color: var(--eg-text-muted); }
body.eg-store .woocommerce-breadcrumb a:hover { color: var(--eg-primary); }

/* --- Toolbar: result count + ordering --- */
.eg-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--eg-gap); flex-wrap: wrap; margin-bottom: var(--eg-gap-lg);
}
body.eg-store .woocommerce-result-count { margin: 0; color: var(--eg-text-muted); font-size: var(--eg-fs-sm); }
body.eg-store .woocommerce-ordering { margin: 0; }
body.eg-store select.orderby, body.eg-store .woocommerce-ordering select {
  font-family: var(--eg-font-body); font-size: var(--eg-fs-sm); color: var(--eg-ink);
  padding: .65em 1em; min-height: 44px; background: var(--eg-surface);
  border: var(--eg-border-hair) solid var(--eg-border); border-radius: var(--eg-radius);
}

/* --- Native archive grid (assign class eg-product-grid to the Archive
   Products widget too; these rules style Woo's own loop either way) --- */
body.eg-store .woocommerce ul.products {
  list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--eg-gap-lg) var(--eg-gap); grid-template-columns: repeat(4, 1fr);
}
body.eg-store .woocommerce ul.products li.product {
  position: relative; margin: 0 !important; width: auto !important; float: none !important;
}
body.eg-store .woocommerce ul.products li.product img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--eg-surface-alt);
  border-radius: var(--eg-radius); margin: 0 0 0 !important;
}
body.eg-store .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--eg-font-body) !important; font-size: var(--eg-fs-sm) !important;
  font-weight: var(--eg-fw-semibold); text-transform: none; color: var(--eg-ink);
  line-height: 1.3; margin: .95em 0 .25em !important; padding: 0;
}
body.eg-store .woocommerce ul.products li.product .price {
  font-family: var(--eg-font-body); font-weight: var(--eg-fw-semibold);
  font-size: var(--eg-fs-sm); color: var(--eg-ink); display: block;
}
body.eg-store .woocommerce ul.products li.product .price del { color: var(--eg-text-faint); font-weight: 400; margin-right: .45em; }
body.eg-store .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--eg-accent-deep); }

/* Override Elementor/theme link colors on archive cards (titles + prices) */
body.eg-store .woocommerce ul.products li.product a.woocommerce-loop-product__link,
body.eg-store .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.eg-store .woocommerce ul.products li.product h2,
body.eg-store .woocommerce ul.products li.product h3 { color: var(--eg-ink) !important; }
body.eg-store .woocommerce ul.products li.product .price,
body.eg-store .woocommerce ul.products li.product .price .amount,
body.eg-store .woocommerce ul.products li.product .price bdi { color: var(--eg-ink) !important; }
body.eg-store .woocommerce ul.products li.product .price ins,
body.eg-store .woocommerce ul.products li.product .price ins .amount { color: var(--eg-accent-deep) !important; }


/* ==========================================================================
   9. SINGLE PRODUCT
   Scoped to body.single-product so it never clashes with archive cards.
   Elementor container classes to assign:
     .eg-product           → the 2-col wrapper (gallery | summary)
     .eg-product__gallery  → left container (Product Images widget)
     .eg-product__summary  → right container (Title, Price, Add to Cart, tabs)
   ========================================================================== */
body.eg-store.single-product .eg-product {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 72px); align-items: start;
}
body.eg-store.single-product .eg-product__summary { position: sticky; top: 110px; align-self: start; }

/* Gallery */
body.eg-store.single-product .woocommerce-product-gallery { margin: 0; }
body.eg-store.single-product .woocommerce-product-gallery img { border-radius: var(--eg-radius); background: var(--eg-surface-alt); }
body.eg-store.single-product .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
body.eg-store.single-product .flex-control-thumbs li { width: 72px; margin: 0; }
body.eg-store.single-product .flex-control-thumbs img { border-radius: var(--eg-radius); cursor: pointer; opacity: .55; transition: opacity var(--eg-transition); }
body.eg-store.single-product .flex-control-thumbs img.flex-active,
body.eg-store.single-product .flex-control-thumbs img:hover { opacity: 1; }

/* Title / price / short description */
body.eg-store.single-product .product_title,
body.eg-store.single-product h1.product_title {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: var(--eg-fs-h2); text-transform: uppercase; letter-spacing: var(--eg-tracking-tight);
  line-height: 1.05; margin: 0 0 .35em; color: var(--eg-ink) !important;
}
body.eg-store.single-product p.price,
body.eg-store.single-product .summary .price,
body.eg-store.single-product .price .woocommerce-Price-amount {
  font-family: var(--eg-font-body); font-weight: var(--eg-fw-semibold);
  font-size: var(--eg-fs-h4); color: var(--eg-ink) !important;
}
body.eg-store.single-product .price { margin: 0 0 1em; }
body.eg-store.single-product .woocommerce-product-details__short-description {
  color: var(--eg-text-muted); font-size: var(--eg-fs-lead); margin: 0 0 1.5em; max-width: 46ch;
}

/* Variations (native Size dropdown) + quantity + add to cart */
body.eg-store.single-product table.variations { width: 100%; border: 0; margin: 0 0 1em; }
body.eg-store.single-product table.variations tr { display: block; margin-bottom: .8em; }
body.eg-store.single-product table.variations th,
body.eg-store.single-product table.variations td { display: block; padding: 0; border: 0; text-align: left; }
body.eg-store.single-product table.variations th {
  font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold); letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase; margin-bottom: .5em;
}
body.eg-store.single-product .variations select {
  width: 100%; font-family: var(--eg-font-body); font-size: var(--eg-fs-body); color: var(--eg-ink);
  padding: .8em 1em; min-height: 50px; background: var(--eg-surface);
  border: var(--eg-border-hair) solid var(--eg-border); border-radius: var(--eg-radius);
}
body.eg-store.single-product .reset_variations {
  display: inline-block; margin-top: .5em; font-size: var(--eg-fs-xs); text-transform: uppercase;
  letter-spacing: var(--eg-tracking-wide); color: var(--eg-text-muted);
}
body.eg-store.single-product .woocommerce-variation-price .price { font-size: var(--eg-fs-h4); margin: .5em 0; }
body.eg-store.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1.2em 0 1.4em; }
body.eg-store.single-product .quantity { display: inline-flex; }
body.eg-store.single-product .quantity input.qty {
  width: 76px; text-align: center; min-height: 52px; padding: .5em;
  border: var(--eg-border-hair) solid var(--eg-border); border-radius: var(--eg-radius); background: var(--eg-surface);
  font-family: var(--eg-font-body); font-size: var(--eg-fs-body);
}
body.eg-store.single-product .single_add_to_cart_button,
body.eg-store.single-product button.single_add_to_cart_button {
  flex: 1 1 auto; min-width: 220px; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--eg-font-body); font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-wide); text-transform: uppercase; line-height: 1;
  color: #fff !important; background: var(--eg-primary) !important;
  border: var(--eg-border-med) solid var(--eg-primary) !important; border-radius: var(--eg-radius);
  padding: 1em 1.8em; cursor: pointer; transition: background var(--eg-transition), border-color var(--eg-transition);
}
body.eg-store.single-product .single_add_to_cart_button:hover {
  background: var(--eg-primary-deep) !important; border-color: var(--eg-primary-deep) !important;
}
body.eg-store.single-product .single_add_to_cart_button.disabled { opacity: .5; }

/* Stock, meta, detail links */
body.eg-store.single-product .stock { font-size: var(--eg-fs-sm); color: var(--eg-text-muted); margin: 0 0 1em; }
body.eg-store.single-product .stock.out-of-stock { color: var(--eg-error); }
body.eg-store.single-product .product_meta {
  font-size: var(--eg-fs-xs); color: var(--eg-text-faint); letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase; border-top: var(--eg-border-hair) solid var(--eg-border); padding-top: 1em; margin-top: 1em;
}
body.eg-store.single-product .product_meta a { color: var(--eg-text-muted); }
.eg-product__meta-links { display: flex; gap: 1.3em; flex-wrap: wrap; margin: 0 0 1.2em; }
.eg-product__meta-links a {
  font-size: var(--eg-fs-xs); text-transform: uppercase; letter-spacing: var(--eg-tracking-wide); color: var(--eg-text-muted);
}
.eg-product__meta-links a:hover { color: var(--eg-primary); }

/* Tabs (native Woo Product Data Tabs) */
body.eg-store.single-product .woocommerce-tabs { margin-top: clamp(40px, 6vw, 80px); }
body.eg-store.single-product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 1.5em; list-style: none; margin: 0 0 1.5em; padding: 0 0 .5em;
  border-bottom: var(--eg-border-hair) solid var(--eg-border);
}
body.eg-store.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
body.eg-store.single-product .woocommerce-tabs ul.tabs a {
  font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold); letter-spacing: var(--eg-tracking-wide);
  text-transform: uppercase; color: var(--eg-text-muted); padding-bottom: .6em;
}
body.eg-store.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--eg-ink); }
body.eg-store.single-product .woocommerce-tabs .panel h2 { font-size: var(--eg-fs-h3); }

/* Related products (assign class eg-product-grid to the Related widget) */
body.eg-store.single-product .related, body.eg-store.single-product .up-sells { margin-top: clamp(48px, 7vw, 100px); }
body.eg-store.single-product .related > h2, body.eg-store.single-product .up-sells > h2 {
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black); text-transform: uppercase;
  font-size: var(--eg-fs-h2); margin: 0 0 1em;
}

@media (max-width: 900px) {
  body.eg-store.single-product .eg-product { grid-template-columns: 1fr; }
  body.eg-store.single-product .eg-product__summary { position: static; }
}


/* ==========================================================================
   10-11. CART & CHECKOUT — primary buttons emerald + white, never pink
   ========================================================================== */
body.eg-store a.checkout-button,
body.eg-store .wc-proceed-to-checkout .checkout-button,
body.eg-store #place_order,
body.eg-store .woocommerce button.button.alt {
  background: var(--eg-primary) !important; border: var(--eg-border-med) solid var(--eg-primary) !important;
  color: #fff !important; text-transform: uppercase; letter-spacing: var(--eg-tracking-wide);
  font-weight: var(--eg-fw-semibold); border-radius: var(--eg-radius); min-height: 52px;
}
body.eg-store a.checkout-button:hover,
body.eg-store .wc-proceed-to-checkout .checkout-button:hover,
body.eg-store #place_order:hover,
body.eg-store .woocommerce button.button.alt:hover {
  background: var(--eg-primary-deep) !important; border-color: var(--eg-primary-deep) !important; color: #fff !important;
}

/* Shop hero when built with DYNAMIC Archive Title / Description widgets
   (so Apparel / Bags pages show the category name, styled white) */
.eg-shop-hero .elementor-heading-title,
.eg-shop-hero h1, .eg-shop-hero h2 {
  color: #fff !important; font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  text-transform: uppercase; line-height: 1.02;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
}
.eg-shop-hero p,
.eg-shop-hero .elementor-widget-woocommerce-archive-description,
.eg-shop-hero .elementor-widget-woocommerce-archive-description * { color: rgba(255,255,255,.85) !important; }

/* Search overlay submit button */
.eg-search__submit { background: none; border: 0; padding: 0; cursor: pointer; color: var(--eg-ink); display: grid; place-items: center; }
.eg-search__submit:hover { color: var(--eg-primary); }

/* FiboSearch (Ajax Search for WooCommerce) inside the search overlay */
.eg-search #eg-search-mount { max-width: var(--eg-container); margin: 64px auto 8px; width: 100%; }
.eg-search .dgwt-wcas-search-wrapp { width: 100%; max-width: 100%; }
.eg-search .dgwt-wcas-search-form { background: transparent; border-bottom: var(--eg-border-med) solid var(--eg-ink); }
.eg-search .dgwt-wcas-search-input[type="search"] {
  font-family: var(--eg-font-display) !important; font-weight: 700 !important;
  font-size: var(--eg-fs-h2) !important; text-transform: uppercase;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  height: auto !important; padding: .4em 0 !important; color: var(--eg-ink) !important;
}
.eg-search .dgwt-wcas-search-submit,
.eg-search .dgwt-wcas-ico-magnifier { fill: var(--eg-ink) !important; }
/* live results dropdown */
body.eg-store .dgwt-wcas-suggestions-wrapp { border: 1px solid var(--eg-border) !important; border-radius: var(--eg-radius); box-shadow: var(--eg-shadow-md); }
body.eg-store .dgwt-wcas-suggestion .dgwt-wcas-st-title { color: var(--eg-ink) !important; font-weight: 600; }
body.eg-store .dgwt-wcas-suggestion:hover,
body.eg-store .dgwt-wcas-suggestion.dgwt-wcas-suggestion-focus { background: var(--eg-primary-tint) !important; }
body.eg-store .dgwt-wcas-sug-price,
body.eg-store .dgwt-wcas-sug-product-price ins { color: var(--eg-ink) !important; }


/* ==========================================================================
   12. MY ACCOUNT  (native WooCommerce /my-account page)
   ========================================================================== */
body.eg-store .woocommerce-account .woocommerce {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start;
}
body.eg-store .woocommerce-MyAccount-navigation { flex: 0 0 220px; }
body.eg-store .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
body.eg-store .woocommerce-MyAccount-navigation li { margin: 0; }
body.eg-store .woocommerce-MyAccount-navigation li a {
  display: block; padding: .85em 0; font-size: var(--eg-fs-sm); font-weight: var(--eg-fw-semibold);
  letter-spacing: var(--eg-tracking-wide); text-transform: uppercase; color: var(--eg-text-muted);
  border-bottom: var(--eg-border-hair) solid var(--eg-border);
}
body.eg-store .woocommerce-MyAccount-navigation li a:hover,
body.eg-store .woocommerce-MyAccount-navigation li.is-active a { color: var(--eg-ink); }
body.eg-store .woocommerce-MyAccount-content { flex: 1 1 340px; min-width: 0; }
body.eg-store .woocommerce-MyAccount-content h2,
body.eg-store .woocommerce-MyAccount-content h3 { font-family: var(--eg-font-display); text-transform: uppercase; }

/* Account tables (orders / addresses) */
body.eg-store .woocommerce-account table.shop_table,
body.eg-store .woocommerce-account table.account-orders-table { width: 100%; border-collapse: collapse; border: 0; }
body.eg-store .woocommerce-account table.shop_table th,
body.eg-store .woocommerce-account table.shop_table td {
  text-align: left; padding: .9em 1em; border-bottom: var(--eg-border-hair) solid var(--eg-border); font-size: var(--eg-fs-sm);
}
body.eg-store .woocommerce-account table.shop_table th {
  text-transform: uppercase; letter-spacing: var(--eg-tracking-wide); color: var(--eg-text-muted); font-weight: var(--eg-fw-semibold);
}

/* Login / register / edit forms */
body.eg-store .woocommerce-account form.woocommerce-form-login,
body.eg-store .woocommerce-account form.woocommerce-form-register,
body.eg-store .woocommerce-account .woocommerce-EditAccountForm,
body.eg-store .woocommerce-account .woocommerce-address-fields { max-width: 460px; }
body.eg-store .woocommerce-account form button.button,
body.eg-store .woocommerce-account .woocommerce-Button.button {
  background: var(--eg-primary) !important; border: var(--eg-border-med) solid var(--eg-primary) !important;
  color: #fff !important; text-transform: uppercase; letter-spacing: var(--eg-tracking-wide);
  font-weight: var(--eg-fw-semibold); border-radius: var(--eg-radius); min-height: 50px; padding: .8em 1.6em;
}
body.eg-store .woocommerce-account form button.button:hover,
body.eg-store .woocommerce-account .woocommerce-Button.button:hover {
  background: var(--eg-primary-deep) !important; border-color: var(--eg-primary-deep) !important;
}

@media (max-width: 768px) {
  body.eg-store .woocommerce-account .woocommerce { flex-direction: column; }
  body.eg-store .woocommerce-MyAccount-navigation { flex-basis: auto; width: 100%; }
}
/* account polish: active tab accent, welcome line, in-content links */
body.eg-store .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--eg-primary); box-shadow: inset 3px 0 0 var(--eg-primary); padding-left: 12px;
}
body.eg-store .woocommerce-MyAccount-content > p:first-of-type { font-size: var(--eg-fs-lead); color: var(--eg-text-muted); }
body.eg-store .woocommerce-account .woocommerce-MyAccount-content mark { background: var(--eg-primary-tint); color: var(--eg-ink); }
body.eg-store .woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--eg-primary); }


/* ==========================================================================
   SEARCH RESULTS  (Theme Builder → Search Results → Archive Posts widget,
   CSS class: eg-search-grid). Reuses .eg-shop-hero for the header band.
   ========================================================================== */
.eg-search-grid .elementor-posts {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--eg-gap-lg) var(--eg-gap);
}
.eg-search-grid .elementor-post {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
.eg-search-grid .elementor-post__thumbnail {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--eg-radius); background: var(--eg-surface-alt);
}
.eg-search-grid .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.eg-search-grid .elementor-post__title { font-family: var(--eg-font-body); font-size: var(--eg-fs-sm); font-weight: 600; text-transform: none; margin: .8em 0 0; line-height: 1.3; }
.eg-search-grid .elementor-post__title a { color: var(--eg-ink) !important; }
.eg-search-grid .elementor-post__excerpt,
.eg-search-grid .elementor-post__read-more,
.eg-search-grid .elementor-post__meta-data { display: none !important; }
body.eg-store.search .woocommerce-info,
body.eg-store.search-no-results .eg-search-grid { color: var(--eg-text-muted); }
@media (max-width: 1024px) { .eg-search-grid .elementor-posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .eg-search-grid .elementor-posts { grid-template-columns: repeat(2, 1fr); } }
body.eg-store .woocommerce ul.products li.product a.button,
body.eg-store .woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex; align-items: center; justify-content: center; margin-top: .7em !important;
  padding: .7em 1.2em; min-height: 40px; font-family: var(--eg-font-body); font-size: var(--eg-fs-xs);
  font-weight: var(--eg-fw-semibold); letter-spacing: var(--eg-tracking-wide); text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--eg-ink); border: var(--eg-border-med) solid var(--eg-ink); border-radius: var(--eg-radius);
}
body.eg-store .woocommerce ul.products li.product a.button:hover { background: var(--eg-primary); border-color: var(--eg-primary); }

/* --- Pagination --- */
body.eg-store .woocommerce-pagination { margin-top: var(--eg-gap-lg); }
body.eg-store .woocommerce-pagination ul {
  display: flex; justify-content: center; gap: .4em; list-style: none; margin: 0; padding: 0; border: 0;
}
body.eg-store .woocommerce-pagination ul li { margin: 0; border: 0; }
body.eg-store .woocommerce-pagination a.page-numbers,
body.eg-store .woocommerce-pagination span.page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6em;
  border: var(--eg-border-hair) solid var(--eg-border); border-radius: var(--eg-radius);
  font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-sm); color: var(--eg-ink); background: var(--eg-surface);
}
body.eg-store .woocommerce-pagination span.current { background: var(--eg-primary); color: #fff; border-color: var(--eg-primary); }
body.eg-store .woocommerce-pagination a.page-numbers:hover { border-color: var(--eg-ink); }

@media (max-width: 1024px) { body.eg-store .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { body.eg-store .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.eg-footer { background: var(--eg-ink); color: var(--eg-inverse); }
.eg-footer__inner { max-width: var(--eg-container-wide); margin-inline: auto; padding-inline: var(--eg-page-padding); }
.eg-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--eg-gap-lg);
  padding-block: clamp(52px, 7vw, 92px);
}
.eg-footer__brandmark { font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .6em; color: var(--eg-gold); }
.eg-footer__brand p { color: rgba(255,255,255,.6); font-size: var(--eg-fs-sm); max-width: 34ch; }
.eg-footer h4 {
  font-family: var(--eg-font-body); font-weight: var(--eg-fw-semibold); font-size: var(--eg-fs-xs);
  letter-spacing: var(--eg-tracking-label); text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 1.2em;
}
.eg-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7em; }
.eg-footer__col a { color: rgba(255,255,255,.85); font-size: var(--eg-fs-sm); }
.eg-footer__col a:hover { color: #fff; }
.eg-footer__news p { color: rgba(255,255,255,.6); font-size: var(--eg-fs-sm); margin-bottom: 1em; }
.eg-footer__news .eg-signup__form { max-width: none; margin-top: 0; }
.eg-footer__news input[type=email] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.eg-footer__news input[type=email]::placeholder { color: rgba(255,255,255,.5); }
.eg-footer__socials { display: flex; gap: .7em; margin-top: 1.3em; }
.eg-footer__socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; transition: background var(--eg-transition), color var(--eg-transition); }
.eg-footer__socials a:hover { background: #fff; color: var(--eg-ink); }
.eg-footer__socials svg { width: 18px; height: 18px; }
.eg-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between;
  align-items: center; gap: 1em 1.4em; flex-wrap: wrap; padding-block: 1.4em;
  font-size: var(--eg-fs-xs); color: rgba(255,255,255,.55);
}
.eg-footer__legal { display: flex; gap: 1.3em; flex-wrap: wrap; }
.eg-footer__legal a { color: rgba(255,255,255,.7); }
.eg-footer__legal a:hover { color: #fff; }
.eg-footer__disclaimer { color: rgba(255,255,255,.45); max-width: 60ch; }

@media (max-width: 900px) { .eg-footer__top { grid-template-columns: 1fr 1fr; gap: var(--eg-gap-lg); } }
@media (max-width: 480px) {
  .eg-footer__top { grid-template-columns: 1fr; }
  .eg-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   6c. MARQUEE BAND + SCROLL-REVEAL MOTION
   Marquee = pure CSS (pauses on hover). Reveal = enabled by JS (body.eg-motion).
   Both quiet down under prefers-reduced-motion.
   ========================================================================== */
.eg-marquee { background: var(--eg-primary); color: #fff; overflow: hidden; }
.eg-marquee__track { display: flex; width: max-content; animation: eg-marquee-scroll 32s linear infinite; }
.eg-marquee:hover .eg-marquee__track { animation-play-state: paused; }
.eg-marquee__group { display: flex; align-items: center; flex: none; }
.eg-marquee__item {
  display: inline-flex; align-items: center; gap: .55em;
  padding-block: clamp(14px, 2vw, 24px); padding-inline: .5em;
  font-family: var(--eg-font-display); font-weight: var(--eg-fw-black);
  font-size: clamp(1.05rem, .9rem + 1.3vw, 1.9rem); text-transform: uppercase;
  letter-spacing: .02em; white-space: nowrap;
}
.eg-marquee__star { color: var(--eg-gold); font-size: .7em; }
@keyframes eg-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eg-marquee--ink  { background: var(--eg-ink); }
.eg-marquee--gold { background: var(--eg-gold); color: var(--eg-ink); }
.eg-marquee--gold .eg-marquee__star { color: var(--eg-primary); }

/* Scroll-reveal — JS adds body.eg-motion, then .eg-reveal + a direction class */
.eg-motion .eg-reveal {
  opacity: 0;
  transition: opacity .7s var(--eg-ease-out), transform .7s var(--eg-ease-out);
  will-change: opacity, transform;
}
.eg-motion .eg-reveal--up    { transform: translateY(30px); }
.eg-motion .eg-reveal--left  { transform: translateX(-44px); }
.eg-motion .eg-reveal--right { transform: translateX(44px); }
.eg-motion .eg-reveal--scale { transform: scale(.94); }
.eg-motion .eg-reveal.is-in  { opacity: 1; transform: none; }


/* ==========================================================================
   HOMEPAGE RESPONSIVE (kept beside their sections for maintainability)
   ========================================================================== */
@media (max-width: 1024px) {
  .eg-product-grid ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .eg-editorial { grid-template-columns: 1fr; }
  .eg-editorial__media { order: -1; aspect-ratio: 3 / 2; }   /* image first on mobile */
  .eg-editorial--flip .eg-editorial__media { order: -1; }
  .eg-brandband, .eg-signup__grid { grid-template-columns: 1fr; }
  .eg-product-grid ul.products { grid-template-columns: repeat(2, 1fr); }  /* 2-up on mobile */
  .eg-hero { grid-template-columns: 1fr; min-height: auto; }   /* stack: photo on top, text below */
  .eg-hero__media { order: -1; min-height: 44vh; }
}
@media (max-width: 600px) {
  .eg-cats { grid-template-columns: 1fr; }
  .eg-cat-tile { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) {
  .eg-signup__form { flex-direction: column; }
  .eg-signup__form .eg-btn { width: 100%; }
  .eg-hero__actions { flex-direction: column; align-items: stretch; }
  .eg-hero__actions .eg-btn { width: 100%; }
}
/* On touch devices, never hide the add-to-cart behind hover */
@media (hover: none) {
  .eg-product-grid li.product a.button { opacity: 1 !important; }
}


/* ==========================================================================
   16. RESPONSIVE RULES (foundation — sections add their own as built)
   Breakpoints used across the project: 1200 / 1024 / 768 / 480 / 390-360
   ========================================================================== */
@media (max-width: 1024px) {
  .eg-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .eg-grid--3, .eg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .eg-section-head { align-items: flex-start; }
}
@media (max-width: 480px) {
  .eg-grid--2 { grid-template-columns: 1fr; }
  .eg-ratio-campaign { aspect-ratio: 4 / 5; }  /* re-crop wide campaigns for phones */
}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .eg-store *, .eg-store *::before, .eg-store *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .eg-media--zoom:hover > img { transform: none; }
}


/* ==========================================================================
   18. CART & CHECKOUT — WooCommerce BLOCKS (Cart/Checkout block editor)
   These override the newer block-based Cart & Checkout, which the classic
   .elementor-kit-5s in section 10-11 (.checkout-button / #place_order) do NOT reach.
   Cart primary button  = emerald + white (readable).
   Checkout Place Order = GOLD + ink text.
   ========================================================================== */

/* --- CART: "Proceed to Checkout" (block) — emerald, white text, readable --- */
body.eg-store .wp-block-woocommerce-cart .wc-block-cart__submit-button,
body.eg-store .wc-block-cart__submit-container .wc-block-cart__submit-button,
body.eg-store .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-button,
body.eg-store .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--eg-primary) !important;
  border: var(--eg-border-med) solid var(--eg-primary) !important;
  color: #fff !important;
  text-transform: uppercase; letter-spacing: var(--eg-tracking-wide);
  font-weight: var(--eg-fw-semibold); border-radius: var(--eg-radius);
  min-height: 52px; opacity: 1 !important;
}
body.eg-store .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
body.eg-store .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-button:hover,
body.eg-store .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--eg-primary-deep) !important;
  border-color: var(--eg-primary-deep) !important; color: #fff !important;
}
/* kill the block button's inner text/label inheriting a dark color */
body.eg-store .wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text,
body.eg-store .wp-block-woocommerce-cart .wc-block-components-button .wc-block-components-button__text {
  color: #fff !important;
}

/* --- CHECKOUT: "Place Order" (block) — GOLD, ink text, no pink --- */
body.eg-store .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.eg-store .wc-block-checkout__actions_row .wc-block-components-button,
body.eg-store .wp-block-woocommerce-checkout .wc-block-components-button.contained,
body.eg-store .woocommerce-checkout #place_order {
  background: var(--eg-gold) !important;
  border: var(--eg-border-med) solid var(--eg-gold) !important;
  color: var(--eg-ink) !important;
  text-transform: uppercase; letter-spacing: var(--eg-tracking-wide);
  font-weight: var(--eg-fw-semibold); border-radius: var(--eg-radius);
  min-height: 52px; opacity: 1 !important;
}
body.eg-store .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.eg-store .wc-block-checkout__actions_row .wc-block-components-button:hover,
body.eg-store .woocommerce-checkout #place_order:hover {
  background: var(--eg-gold-deep) !important;
  border-color: var(--eg-gold-deep) !important; color: var(--eg-ink) !important;
}
body.eg-store .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
body.eg-store .wc-block-checkout__actions_row .wc-block-components-button .wc-block-components-button__text {
  color: var(--eg-ink) !important;
}
/* block cart/checkout links (edit cart, etc.) stay on-brand, never pink */
body.eg-store .wp-block-woocommerce-cart a,
body.eg-store .wp-block-woocommerce-checkout a { color: var(--eg-primary); }


/* ==========================================================================
   14b. ADDED-TO-CART / VIEW CART NOTICE — match the brand
   Covers classic (.woocommerce-message) AND block (.wc-block-components-
   notice-banner) success banners, plus the "View cart" button inside them.
   ========================================================================== */
body.eg-store .woocommerce-message,
body.eg-store .wc-block-components-notice-banner.is-success,
body.eg-store .woocommerce-notices-wrapper .wc-block-components-notice-banner {
  background: var(--eg-primary-tint) !important;
  border: 0 !important;
  border-left: 4px solid var(--eg-primary) !important;
  border-radius: var(--eg-radius) !important;
  color: var(--eg-ink) !important;
  box-shadow: var(--eg-shadow-md, 0 6px 24px rgba(0,0,0,.08)) !important;
  font-family: var(--eg-font-body);
  padding: 1em 1.2em !important;
  display: flex; align-items: center; gap: 1em; flex-wrap: wrap;
}
/* the left status/check icon → emerald (not default green/gray) */
body.eg-store .wc-block-components-notice-banner.is-success > svg,
body.eg-store .woocommerce-message::before {
  color: var(--eg-primary) !important; fill: var(--eg-primary) !important;
  border-color: var(--eg-primary) !important;
}
body.eg-store .wc-block-components-notice-banner .wc-block-components-notice-banner__content { color: var(--eg-ink) !important; }

/* the "View cart" button inside the notice → emerald pill, readable */
body.eg-store .woocommerce-message a.button.wc-forward,
body.eg-store .woocommerce-message a.wc-forward,
body.eg-store .wc-block-components-notice-banner a.wc-forward,
body.eg-store .wc-block-components-notice-banner a.button {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; padding: .6em 1.2em; min-height: 40px;
  background: var(--eg-primary) !important;
  border: var(--eg-border-med) solid var(--eg-primary) !important;
  color: #fff !important; text-decoration: none !important;
  text-transform: uppercase; letter-spacing: var(--eg-tracking-wide);
  font-size: var(--eg-fs-xs); font-weight: var(--eg-fw-semibold);
  border-radius: var(--eg-radius); line-height: 1;
}
body.eg-store .woocommerce-message a.wc-forward:hover,
body.eg-store .wc-block-components-notice-banner a.wc-forward:hover,
body.eg-store .wc-block-components-notice-banner a.button:hover {
  background: var(--eg-primary-deep) !important; border-color: var(--eg-primary-deep) !important; color: #fff !important;
}/* End custom CSS */