/* ============================================================================
   Claire Organics — Footer  ("Botanical Apothecary", editorial)
   Deep-forest anchor + balanced brand-led columns.
   Refs: L'Occitane (brand/story + services columns, warm, classical) +
         Cuura (calm balanced Shop/Learn/Support columns, brand intro, region).
   Loaded AFTER theme.css — these rules win. CSS-first, additive.
   ========================================================================== */

/* ---- shell ---------------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--rd-forest);
  color: var(--rd-footer-ink);
  border-top: 0;
  margin-top: 0;
  padding-bottom: 30px;
}
.site-footer.small--text-center { padding-top: 0; padding-bottom: 30px; text-align: left; }
.site-footer .wrapper {
  max-width: var(--rd-page);
  padding-top: clamp(56px, 6.5vw, 96px) !important;
  padding-bottom: 6px !important;
}

/* ---- "as seen in" logo strip ---------------------------------------------
   Visible by default, hidden only when it has no logos. Using :not(:has())
   means engines WITHOUT :has() fail OPEN (real logos still show) instead of
   hiding merchant content. The Liquid include is already gated on
   logo_list_on_footer and only emits .logo-list-item for populated slots. */
.site-footer .logo-list-section {
  background: transparent;
  padding: 0 0 clamp(32px, 4vw, 52px);
  margin-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid color-mix(in srgb, var(--rd-footer-ink) 14%, transparent);
}
.site-footer .logo-list-section:not(:has(.logo-list-item)) { display: none; }
.site-footer .logo-list-section .section-header__title {
  color: var(--rd-footer-ink);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* press / certification marks are usually coloured — present them on a soft
   light chip (never invert; that flattens them, same call as the payment row) */
.site-footer .logo-list-section img {
  opacity: .95;
  background: color-mix(in srgb, var(--rd-bg) 92%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
}

/* ---- main grid: balanced editorial columns -------------------------------- */
.site-footer .grid-uniform {
  display: grid;
  /* Fixed 4-track layout: brand (wide) + Shop + Quick Links + Follow. Assumes
     all three link columns are present (always true in preview and for the
     live store's enabled settings). A leading fr track can't be mixed with
     repeat(auto-fit,…) — it makes the template invalid and collapses to one
     column — so resilience to a merchant disabling a column is intentionally
     not attempted here. */
  grid-template-columns: 1.7fr 1fr 1fr 1.05fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  text-align: left;
  margin: 0;
}
.site-footer .grid-uniform > .grid__item {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}
/* kill timber's clearfix pseudo-elements — as a grid they become phantom
   grid items that add a stray empty row (~60px void above the divider) */
.site-footer .grid-uniform::before,
.site-footer .grid-uniform::after { content: none; display: none; }

/* ---- column headings ------------------------------------------------------ */
.site-footer h4 {
  position: relative;
  font-family: var(--rd-sans);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-footer-ink);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--rd-footer-ink) 16%, transparent);
}
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--rd-clay);
  opacity: .9;
}

/* ---- text + link lists ---------------------------------------------------- */
.site-footer p,
.site-footer li,
.site-footer .rte { color: color-mix(in srgb, var(--rd-footer-ink) 74%, transparent); }

.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { line-height: 1.2; margin-bottom: 13px; }
.site-footer__links a {
  display: inline-block;
  color: color-mix(in srgb, var(--rd-footer-ink) 76%, transparent);
  font-family: var(--rd-sans);
  font-size: .92rem;
  letter-spacing: .005em;
  padding: 4px 0;                 /* larger vertical tap target */
  overflow-wrap: anywhere;
  transition: color var(--rd-dur) var(--rd-ease), transform var(--rd-dur) var(--rd-ease);
}
.site-footer__links a:hover,
.site-footer__links a:focus { color: var(--rd-footer-ink); transform: translateX(3px); }

/* ---- brand column --------------------------------------------------------- */
.site-footer .logo-wrapper { display: inline-block; }
.site-footer .logo-wrapper img {
  max-width: 128px !important;
  width: 128px;
}
.rd-footer-tagline {
  margin: 24px 0 0;
  max-width: 26ch;
  font-family: var(--rd-serif);
  /* !important: a theme .site-footer p { font-size:.85em } rule outranks a
     single-class selector, so force the serif lead voice to real scale */
  font-size: clamp(1.4rem, 1.7vw, 1.75rem) !important;
  line-height: 1.4;
  color: var(--rd-footer-ink) !important;
  letter-spacing: .005em;
}
.rd-footer-values {
  margin: 20px 0 0;
  font-family: var(--rd-sans);
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* saturated sage that reads as sage on forest (≈6:1); the footer section's
     "Values line color" (--rd-s-values, set inline) replaces it when picked */
  color: var(--rd-s-values, var(--rd-footer-accent)) !important;
}

/* ---- follow column -------------------------------------------------------- */
.rd-footer-follow .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rd-footer-follow .social-icons li { margin: 0; }
.site-footer .social-icons a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--rd-footer-ink) 36%, transparent);
  color: var(--rd-footer-ink);
  transition: background-color var(--rd-dur) var(--rd-ease),
              border-color var(--rd-dur) var(--rd-ease),
              color var(--rd-dur) var(--rd-ease),
              transform var(--rd-dur) var(--rd-ease);
}
.site-footer .social-icons a:hover,
.site-footer .social-icons a:focus {
  background: var(--rd-sage);
  border-color: var(--rd-sage);
  color: var(--rd-btn-ink);
  transform: translateY(-2px);
}
.site-footer .social-icons svg,
.site-footer .social-icons svg path { fill: currentColor; }
.site-footer .social-icons svg { width: 17px; height: 17px; }
.site-footer .social-icons .fallback-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.rd-footer-follow-note {
  margin: 18px 0 0;
  max-width: 26ch;
  font-size: .86rem !important;
  line-height: 1.55;
  color: color-mix(in srgb, var(--rd-footer-ink) 72%, transparent) !important;
}

/* ---- divider -------------------------------------------------------------- */
.site-footer hr,
.site-footer .hr--clear,
.site-footer .hr--small {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--rd-footer-ink) 14%, transparent);
  margin: clamp(36px, 4vw, 54px) 0 26px;
  height: 0;
  background: none;
}

/* ---- payment / trust row -------------------------------------------------- */
.site-footer .wrapper > .grid { margin: 0; }
/* Keep the card icons, payment-type logos and SSL badge on one centered strip.
   They arrive as three separate <ul>s (credit-card icons / payment types / SSL),
   each its own .grid__item, so the strip's gap must match the gap INSIDE a list
   or the seams between the groups read wider than the spacing within them.
   timber's 30px .grid__item gutter is zeroed here for the same reason — it was
   adding 30px on top of this gap at each seam (16 within vs 52 between). */
.site-footer .wrapper > .grid:not(:last-child) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}
.site-footer .wrapper > .grid:not(:last-child) .grid__item { width: auto; padding: 0; }
.site-footer .payment-icons {
  --rd-pay-box: 82px;                /* one chip size for every mark in the strip */
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .payment-icons li { margin: 0; flex: none; }
/* One chip under every mark, so the strip reads as a single set and every gap is
   chip-edge to chip-edge. The card icons are font glyphs, so the chip is drawn on
   their wrapper; the payment-type and SSL marks are artwork, so it is drawn on
   the <img> itself. Both take the merchant's chip colour; only the glyphs take
   the icon colour, because CSS can't recolour artwork — and the chip is what
   lets a dark-ink mark (Bank Transfer is #444 line art) read at all against the
   forest footer. Never invert instead: that destroys both the SSL badge and the
   real payment logos on the live store. The merchant's colour is painted exactly
   as picked — the editor's picker carries its own alpha, so softening it here
   again would quietly render something other than the swatch they chose. The 92%
   survives only as the fallback, which is the tone the chip shipped with before
   the setting existed. */
.site-footer .payment-icons .icon-fallback-text,
.site-footer .payment-icons img {
  width: var(--rd-pay-box);
  height: 30px;
  border-radius: 6px;
  opacity: .95;
  background: var(--rd-pay-chip, color-mix(in srgb, var(--rd-bg) 92%, transparent));
}
/* the glyph is centred in its chip; the artwork is contained in its own, so a
   mark that does not share the platform's 3:1 artboard is fitted, not stretched */
.site-footer .payment-icons .icon-fallback-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer .payment-icons img { padding: 4px 8px; object-fit: contain; }
.site-footer .payment-icons .icon {
  color: var(--rd-pay-ink, var(--rd-ink));
  font-size: 1.5rem;
  line-height: 1;
}
/* drop broken / empty preview images (no payment_type_image_url) and the
   slivers their <li> would otherwise leave in the centered row */
.site-footer .payment-icons img[src=""],
.site-footer .payment-icons img:not([src]),
.site-footer .payment-icons li:empty,
.site-footer .payment-icons li:has(img[src=""]),
.site-footer .payment-icons li:has(img:not([src])) { display: none; }

/* ---- bottom bar: copyright (left) + legal links (right) ------------------- */
.rd-footer-copyright { display: none; }            /* the duplicate under the logo */

.site-footer .wrapper > .grid:last-child { margin-top: 22px; }
.site-footer .wrapper > .grid:last-child .grid__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  text-align: left;
}
.rd-footer-copy {
  font-size: .8rem;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--rd-footer-ink) 72%, transparent);
}
.site-footer .wrapper > .grid:last-child .site-footer__links {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--rd-footer-ink) 70%, transparent);
}
.site-footer .wrapper > .grid:last-child .site-footer__links a {
  font-size: .8rem;
  color: color-mix(in srgb, var(--rd-footer-ink) 78%, transparent);
  padding: 0 2px;
}
.site-footer .wrapper > .grid:last-child .site-footer__links a:hover { color: var(--rd-footer-ink); transform: none; }

/* ---- focus ring: the global sage ring is only ~2.5:1 on forest; use a cream
   ring inside the footer so keyboard focus is visible (≈8.9:1) ------------- */
.site-footer a:focus-visible,
.site-footer .social-icons a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--rd-footer-ink);
  outline-offset: 2px;
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
  .site-footer .grid-uniform {
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 40px;
  }
  .site-footer .rd-footer-brand { grid-column: 1 / -1; }
  .rd-footer-tagline { max-width: 52ch; }
}

@media (max-width: 767px) {
  .site-footer.small--text-center { text-align: center; }
  .site-footer .wrapper { text-align: center; }
  .site-footer .grid-uniform {
    grid-template-columns: 1fr;
    gap: 38px;
    text-align: center;
  }
  .site-footer h4 { margin-bottom: 18px; }
  .site-footer h4::after { left: 50%; transform: translateX(-50%); }
  .site-footer__links a:hover { transform: none; }
  .site-footer .logo-wrapper img { margin: 0 auto; }
  .rd-footer-tagline,
  .rd-footer-values,
  .rd-footer-follow-note { margin-left: auto; margin-right: auto; }
  .rd-footer-follow .social-icons { justify-content: center; }
  .site-footer .wrapper > .grid:last-child .grid__item {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
}

/* ============================================================================
   Mobile sticky footer bar (Home / Products / Promotions / Account)
   ========================================================================== */
.footer-bar {
  background: var(--rd-surface);
  border-top: 1px solid var(--rd-line);
  box-shadow: 0 -6px 24px -18px rgba(44, 52, 42, .5);
}
.footer-bar > div { display: flex; }
.footer-bar a {
  flex: 1;
  text-align: center;
  color: var(--rd-ink);
  font-family: var(--rd-sans);
  font-size: .66rem;
  letter-spacing: .04em;
  padding: 8px 4px;
  transition: color var(--rd-dur) var(--rd-ease);
}
.footer-bar a:hover,
.footer-bar a:active { color: var(--rd-sage); }
.footer-bar a img { width: 22px; height: 22px; object-fit: contain; margin: 0 auto 3px; }

/* Currency picker — relocated here from the header; sits centred directly above
   the payment-method row.
   theme.css scopes its picker treatment to `.desktop-header-nav`, so that styling
   no longer reaches it; these rules restate the SAME presentation (transparent
   pill, currentColor, arrow absolutely positioned inside the control) so it looks
   exactly as it did in the header. inline-flex (not flex) so it centres. */
.rd-footer-currency { text-align: center; margin: 0 0 14px; }
.rd-footer-currency .currency-picker__wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
}
.rd-footer-currency .currency-picker__wrapper .svg-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
  z-index: 1;
  width: 13px;
  height: 13px;
  fill: currentColor;
  /* the shared .svg-icon class carries margin-top: -3.6px (it is tuned for
     inline use next to text); with top:50% + translateY(-50%) that offset shows
     up as the arrow sitting ~4px above the control's centre line. */
  margin: 0;
}
.rd-footer-currency .currency-picker__wrapper select.currency-picker {
  background: transparent !important;
  color: currentColor !important;
  border: 1px solid color-mix(in srgb, var(--rd-footer-ink) 38%, transparent);
  border-radius: 1.5rem;
  padding-right: 2.1em;
  box-sizing: border-box;
}
.rd-footer-currency .currency-picker__wrapper select.currency-picker:hover,
.rd-footer-currency .currency-picker__wrapper select.currency-picker:focus {
  border-color: color-mix(in srgb, var(--rd-footer-ink) 70%, transparent);
  outline: none;
}