/* ==========================================================================
   Gul & Gift — brand palette over Liore
   Loaded site-wide. Maps Liore's own colour tokens to Forest & Rose, so the
   whole theme changes at the source rather than through per-selector patches.

   Measured contrast (WCAG 2.1), not estimated:
     white  on forest  12.98  AAA   header, nav, buttons on dark
     mist   on forest   7.20  AAA   secondary text on dark
     petal  on forest   8.39  AAA   accent word on dark
     rose   on forest   4.95  AA    eyebrows on dark
     forest on amber    5.63  AA    the primary button
     white  on amber    2.30  FAIL  — never do this
     forest on white   12.98  AAA   body copy
     slate  on white    5.60  AA    muted body
     stem   on white    4.86  AA    eyebrows and links on light

   The amber row is why secondary-foreground is forest and not white: Liore
   ships white there, which would fail outright against our accent.
   ========================================================================== */

:root{
  /* Liore expresses colours as bare "r, g, b" triplets and wraps them in
     rgb() at the point of use, so these must stay unwrapped. */
  --colors-primary-background:   10, 56, 46;    /* #0A382E forest */
  --colors-primary-foreground:   255, 255, 255; /* 12.98 AAA */

  --colors-secondary-background: 232, 154, 58;  /* #E89A3A amber */
  --colors-secondary-foreground: 10, 56, 46;    /* 5.63 AA — white here is 2.30 */

  --colors-sub-menu-accent:      10, 56, 46;
  --colors-sub-menu-background:  255, 255, 255;
  --colors-sub-menu-foreground:  10, 56, 46;

  --colors-drawer-background:    255, 255, 255;
  --colors-drawer-color:         10, 56, 46;

  /* Semantic colours stay separate from the brand accent. */
  --colors-green:      74, 124, 89;   /* stem — in stock, success */
  --colors-green-dark: 10, 56, 46;
  --colors-green-light: 240, 250, 246;

  /* Our own tokens, so brand components can be styled anywhere on the site. */
  --gg-forest:#0A382E; --gg-forest-s:#1D5C47; --gg-forest-l:#2A6B55; --gg-forest-d:#061F18;
  --gg-amber:#E89A3A;  --gg-amber-d:#C07820;
  --gg-pink:#F37A92;   --gg-petal:#FFBED4;
  --gg-mint:#F0FAF6;   --gg-stem:#4A7C59;
  --gg-mist:#A8C8BB;   --gg-slate:#5C6B66;  --gg-line:#E3EDE8;
}

/* --------------------------------------------------------------------------
   Header — brand and tools were overflowing the bottom of their own row and
   landing on the page content below. The row carried a fixed height while its
   contents needed more, so let it size to content and keep everything centred.
   -------------------------------------------------------------------------- */
.header .header-row{ height:auto; }
.header .header-row .header-inner{
  height:auto;
  min-height:64px;
  align-items:center;
  row-gap:0;
}
.header .header-row .header-inner > .column{ align-self:center; }
/* The logo box is declared at a fixed size; keep it proportional instead. */
.header .brand img{ height:auto; max-height:44px; width:auto; }

/* --------------------------------------------------------------------------
   Amber is the CTA colour on every ground, and it always carries forest text.
   Liore paints button text from --colors-secondary-foreground, which the token
   block above already corrects; these cover the places it hard-codes white.
   -------------------------------------------------------------------------- */
.button.variant-secondary,
.button.variant-secondary:hover,
.badge.color-secondary{
  background-color:var(--gg-amber);
  color:var(--gg-forest);
  border-color:var(--gg-amber);
}
.button.variant-secondary:hover{ background-color:var(--gg-amber-d); }

/* Sale badges read as information, not as the brand accent. */
.product-badge .badge.color-primary{
  background-color:var(--gg-amber);
  color:var(--gg-forest);
}

/* --------------------------------------------------------------------------
   Legacy pages built before the widget system inline their own stylesheet, and
   that copy set the category card's title and description as unstyled spans —
   so they ran together as "FlowersBouquets, boxes and vases". Spans are inline
   by default; these belong on their own lines.
   -------------------------------------------------------------------------- */
.gg-cat__body,
.gg-cat__t,
.gg-cat__d,
.gg-cat__n{ display:block; }
.gg-cat__t{ margin:0 0 6px; line-height:1.3; }
.gg-cat__d{ margin:0; line-height:1.5; }
.gg-cat__n{ margin-top:10px; }
.gg-cat__body{ padding:16px 18px 20px; }

/* Same class of bug on the other legacy card parts. */
.gg-prod__t,.gg-prod__d,.gg-prod__price,.gg-prod__free,
.gg-tier__n,.gg-tier__t,.gg-tier__d,.gg-tier__go,
.gg-trust__t,.gg-trust__d,
.gg-stat__n,.gg-stat__l,
.gg-quote__n,.gg-quote__m{ display:block; }

/* --------------------------------------------------------------------------
   Announcement and top bars sit on forest, so their text must be light.
   -------------------------------------------------------------------------- */
.header-topbar,
.header-topbar a,
.announcement-bar,
.announcement-text,
.announcement-text a{ color:#fff; }
.announcement-text a{ text-decoration:underline; text-underline-offset:3px; }

/* Focus is visible on every ground. */
.header a:focus-visible,
.button:focus-visible{ outline:2px solid var(--gg-amber); outline-offset:2px; }


/* --------------------------------------------------------------------------
   Page-level header colours.

   The imported Homepage 03 carries its own header overrides, emitted as
   .page-id-942 rules with !important — which is why changing the theme's
   colour settings had no visible effect. These beat them on specificity
   (an element + attribute selector outranks the bare class chain) and apply
   to every page, so no single page can reintroduce the demo pink.

   forest ground + white text = 12.98 AAA
   amber ground + forest text = 5.63 AA   (white here would be 2.30, FAIL)
   -------------------------------------------------------------------------- */
body[class*="page-id-"] .header .header-topbar,
body[class*="page-id-"] .header.is-transparent:not(:hover):not(.is-sticky) .header-topbar{
  --topbar-background:#061F18 !important;
  --topbar-foreground:#FFFFFF !important;
  --topbar-border:#2A6B55 !important;
  background-color:#061F18 !important;
  border-color:#2A6B55 !important;
  color:#FFFFFF !important;
}
body[class*="page-id-"] .header .header-main,
body[class*="page-id-"] .header.is-transparent:not(:hover):not(.is-sticky) .header-main{
  --main-background:#0A382E !important;
  --main-foreground:#FFFFFF !important;
  --main-border:#2A6B55 !important;
  background-color:#0A382E !important;
  color:#FFFFFF !important;
}
body[class*="page-id-"] .header .header-main a,
body[class*="page-id-"] .header .header-topbar a{ color:#FFFFFF; }
body[class*="page-id-"] .header .header-main a:hover,
body[class*="page-id-"] .header .header-topbar a:hover{ color:#FFBED4; }

/* The cart / wishlist counters sit on amber, so their digits must be forest. */
body[class*="page-id-"] .header .action-count,
.header .action-count{ background-color:#E89A3A !important; color:#0A382E !important; }

/* --------------------------------------------------------------------------
   Trust strip — a horizontal slider on mobile.

   Elementor lays this container out as a 4-up CSS grid. On a phone that
   collapses to a tall stack that pushes the products below the fold, so
   below the tablet breakpoint it becomes a snap-scrolling rail instead:
   cards sit at 82% width so the next one always peeks in, which is what
   tells the reader there is more to swipe to.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){

  .gg-trust-strip{
    display:flex !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:16px;
    padding-inline:16px !important;
    /* The rail is scrolled, not read as a list of bars — hide the bar itself. */
    scrollbar-width:none;
  }
  .gg-trust-strip::-webkit-scrollbar{ display:none; }

  .gg-trust-strip > .elementor-element{
    flex:0 0 82%;
    max-width:82%;
    scroll-snap-align:center;
    /* Each slide has to read as its own card once it is no longer in a grid. */
    background:#fff;
    border:1px solid var(--gg-line);
    border-radius:var(--theme-radius, 8px);
    padding:16px 18px;
  }

  /* Give the copy room now that there is more of it than the demo carried. */
  .gg-trust-strip .iconbox-detail p{
    font-size:13px;
    line-height:1.55;
    color:var(--gg-slate);
  }
  .gg-trust-strip .iconbox-detail .entry-title,
  .gg-trust-strip .iconbox-detail h4{
    font-size:15px;
    line-height:1.3;
    color:var(--gg-forest);
  }
}

/* Reduced motion: never smooth-scroll the rail out from under someone. */
@media (prefers-reduced-motion: reduce){
  .gg-trust-strip{ scroll-behavior:auto; }
}