/**
 * main.css — component & section styles (uses only tokens.css variables).
 * Section: SHARED CHROME (header, overlays, mini-cart, mobile menu, footer).
 */

/* ---------- Header ---------- */
.gfo-header-wrap { position: sticky; top: 0; z-index: 60; }
.gfo-header { background: var(--gfo-ink-deep); border-bottom: 1px solid rgba(255,255,255,.08); }
.gfo-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 13px;
}

/* brand */
.gfo-brand { display: flex; align-items: center; gap: 10px; }
.gfo-brand__wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.gfo-brand__wordmark, .gfo-brand__wordmark:hover { color: #fff; font-family: var(--gfo-font-display); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-decoration: none; }
.gfo-brand__diamond { width: 9px; height: 9px; background: var(--gfo-clay-light); transform: rotate(45deg); display: inline-block; }
.gfo-brand__accent { color: var(--gfo-clay-light); }
/* per-country badge next to the wordmark (mirrors the hub's GLOBAL badge) */
.gfo-store-badge { font-family: var(--gfo-font-mono); font-size: 9px; letter-spacing: .16em; color: var(--gfo-on-dark-faint); border: 1px solid rgba(255,255,255,.22); padding: 3px 7px; border-radius: 20px; white-space: nowrap; }

/* nav */
.gfo-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.gfo-nav__menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.gfo-nav__link, .gfo-nav__menu a {
  display: inline-block; padding: 8px 12px; background: none; border: 0; cursor: pointer;
  font-family: var(--gfo-font-body); font-size: 12.5px; font-weight: 500;
  color: var(--gfo-on-dark); text-decoration: none;
}
.gfo-nav__link:hover, .gfo-nav__menu a:hover { color: #fff; }
.gfo-shop-toggle[aria-expanded="true"] { color: #fff; }

/* actions */
.gfo-header__actions { display: flex; align-items: center; gap: 13px; flex: none; }
.gfo-icon-btn { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.85); font-size: 19px; line-height: 1; padding: 0; }
.gfo-icon-person { display: block; color: rgba(255,255,255,.85); }
.gfo-icon-btn:hover .gfo-icon-person { color: #fff; }

.gfo-switcher { position: relative; }
.gfo-switcher__toggle {
  background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer;
  font-family: var(--gfo-font-body); font-size: 11px; font-weight: 600; padding: 7px 11px; border-radius: 6px;
}
.gfo-switcher__menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 238px; z-index: 65;
  background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.16); border-radius: 12px;
  box-shadow: var(--gfo-shadow-popover); padding: 6px;
}
.gfo-switcher__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--gfo-ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.gfo-switcher__item:hover { background: var(--gfo-soft); text-decoration: none; }
.gfo-switcher__label { flex: 1; }
.gfo-switcher__cur { font-family: var(--gfo-font-mono); font-size: 11px; color: var(--gfo-text-muted); }

.gfo-cart-btn { border: 0; background: var(--gfo-terracotta); color: #fff; cursor: pointer; font-family: var(--gfo-font-body); font-size: 12px; font-weight: 600; padding: 9px 17px; border-radius: var(--gfo-radius-btn); }
.gfo-cart-btn:hover { background: #a95930; }

.gfo-burger { display: none; background: none; border: 0; cursor: pointer; width: 26px; height: 20px; position: relative; }
.gfo-burger span[aria-hidden], .gfo-burger::before, .gfo-burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff; }
.gfo-burger::before { top: 0; } .gfo-burger span[aria-hidden] { top: 9px; } .gfo-burger::after { bottom: 0; }

/* ---------- Dropdown panels (mega / search / account) ---------- */
.gfo-panel[hidden] { display: none; }
.gfo-mega, .gfo-search {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 62;
  background: var(--gfo-surface); border-bottom: 1px solid rgba(58,40,32,.14);
  box-shadow: 0 20px 40px rgba(42,28,21,.16);
}
.gfo-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 28px; padding-block: 28px; }
.gfo-mega__links { display: flex; flex-direction: column; gap: 9px; }
.gfo-mega__links a { font-size: 14px; font-weight: 500; color: var(--gfo-ink); text-decoration: none; }
.gfo-mega__links a:hover { color: var(--gfo-terracotta); }
.gfo-mega__all { color: var(--gfo-terracotta) !important; }
.gfo-mega__feature { background: var(--gfo-ink-deep); border-radius: 12px; padding: 20px; color: #fff; }
.gfo-mega__feature-img { height: 90px; border-radius: 8px; margin-bottom: 12px; background: repeating-linear-gradient(135deg, rgba(224,160,121,.3), rgba(224,160,121,.3) 7px, rgba(224,160,121,.12) 7px, rgba(224,160,121,.12) 14px); }
.gfo-mega__feature-title { font-family: var(--gfo-font-display); font-weight: 700; font-size: 17px; margin: 4px 0 6px; }
.gfo-mega__feature-link { color: var(--gfo-clay-light); font-weight: 600; font-size: 12px; text-decoration: none; }
.gfo-eyebrow--light { color: var(--gfo-clay-light); margin-bottom: 12px; }
.gfo-eyebrow--muted { color: var(--gfo-text-muted); margin: 18px 0 10px; }

.gfo-search__inner { max-width: 760px; margin-inline: auto; padding: 28px var(--gfo-gutter); }
.gfo-search__form { display: flex; gap: 9px; }
.gfo-in { width: 100%; background: #fff; border: 1px solid rgba(58,40,32,.22); color: var(--gfo-ink); border-radius: 9px; padding: 13px 14px; font: 500 15px var(--gfo-font-body); outline: none; }
.gfo-in::placeholder { color: rgba(58,40,32,.42); }
.gfo-search__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.gfo-chip { font-size: 12px; font-weight: 500; border: 1px solid rgba(58,40,32,.2); border-radius: var(--gfo-radius-pill); padding: 7px 13px; color: var(--gfo-ink); text-decoration: none; }
.gfo-chip:hover { border-color: var(--gfo-terracotta); color: var(--gfo-terracotta); }

.gfo-account {
  position: absolute; top: 100%; right: var(--gfo-gutter); width: 280px; z-index: 65;
  background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.16); border-radius: 12px;
  box-shadow: var(--gfo-shadow-popover); padding: 18px;
}
.gfo-account__title { font-family: var(--gfo-font-display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.gfo-account__sub { font-size: 12px; color: var(--gfo-text-muted); margin: 0 0 14px; }
.gfo-account__cta { display: block; width: 100%; margin-top: 8px; }
.gfo-account__links { display: flex; flex-direction: column; gap: 9px; }
.gfo-account__links a { color: var(--gfo-ink); text-decoration: none; font-weight: 500; font-size: 13px; }

/* ---------- Backdrop ---------- */
.gfo-backdrop { position: fixed; inset: 0; background: rgba(31,20,15,.4); z-index: 55; }
.gfo-backdrop[hidden] { display: none; }

/* ---------- Mini-cart drawer ---------- */
.gfo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 390px; max-width: 90vw; z-index: 70;
  background: var(--gfo-sand); box-shadow: -12px 0 40px rgba(31,20,15,.3);
  display: flex; flex-direction: column;
}
.gfo-drawer[hidden] { display: none; }
.gfo-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--gfo-ink-deep); color: #fff; }
.gfo-drawer__title { font-family: var(--gfo-font-display); font-weight: 700; font-size: 16px; }
.gfo-drawer__close { background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.gfo-drawer__ship { padding: 14px 18px; background: var(--gfo-surface); border-bottom: 1px solid rgba(58,40,32,.12); font-size: 12px; font-weight: 500; color: var(--gfo-ink); }
.gfo-drawer__body { flex: 1; overflow-y: auto; padding: 8px 18px; }
/* WooCommerce mini-cart internals inherit; buttons get themed */
.gfo-drawer__body .buttons a { display: block; text-align: center; margin-top: 8px; border-radius: 9px; padding: 12px; text-decoration: none; font-weight: 700; }
.gfo-drawer__body .buttons a.checkout { background: var(--gfo-terracotta); color: #fff; }

/* ---------- Mobile menu (right slide-in drawer) ---------- */
.gfo-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: 87%; max-width: 420px; z-index: 70;
  background: var(--gfo-sand); display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(31,20,15,.28);
  transform: translateX(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
}
.gfo-mobile-menu:not([hidden]) {
  transform: translateX(0); visibility: visible;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.gfo-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; background: var(--gfo-ink-deep); color: #fff; }
.gfo-mobile-menu__head .gfo-brand__accent-wrap { font-family: var(--gfo-font-display); font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.gfo-mobile-menu__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* free-shipping offer strip */
.gfo-mm__offer { display: flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--gfo-soft); color: #8a3f1f; font-size: 12px; font-weight: 600; border-bottom: 1px solid rgba(58,40,32,.1); }
.gfo-mm__offer svg { color: var(--gfo-terracotta); flex-shrink: 0; }

/* bestseller CTA */
.gfo-mm__cta { display: flex; align-items: center; gap: 12px; margin: 15px 16px 6px; padding: 11px 14px; background: var(--gfo-terracotta); border-radius: var(--gfo-radius-card); text-decoration: none; }
.gfo-mm__cta-ic { width: 44px; height: 44px; border-radius: 8px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.gfo-mm__cta-tx { flex: 1; }
.gfo-mm__cta-eyebrow { display: block; font-family: var(--gfo-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,.85); }
.gfo-mm__cta-title { display: block; font-family: var(--gfo-font-display); font-weight: 700; font-size: 16px; color: #fff; }
.gfo-mm__cta > svg { color: #fff; flex-shrink: 0; }

/* section eyebrow */
.gfo-mm__eyebrow { font-family: var(--gfo-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: var(--gfo-text-hint); text-transform: uppercase; padding: 14px 16px 4px; }

/* shop-by category rows */
.gfo-mm__cat { display: flex; align-items: center; gap: 13px; padding: 11px 16px; text-decoration: none; border-bottom: 1px solid rgba(58,40,32,.1); }
.gfo-mm__cat-img { width: 46px; height: 46px; border-radius: 8px; background: var(--gfo-stripe-a) center/cover no-repeat; flex-shrink: 0; }
.gfo-mm__cat-img--tex { background-image: repeating-linear-gradient(135deg, var(--gfo-stripe-a) 0 8px, var(--gfo-stripe-b) 8px 16px); }
.gfo-mm__cat-name { flex: 1; font-family: var(--gfo-font-display); font-weight: 700; font-size: 15px; color: var(--gfo-ink); }
.gfo-mm__cat svg { color: #b08a72; flex-shrink: 0; }

/* trust card */
.gfo-mm__trust { margin: 8px 16px 18px; background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.1); border-radius: var(--gfo-radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.gfo-mm__trust-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gfo-ink); }
.gfo-mm__trust-row b { font-weight: 700; }
.gfo-mm__trust-row svg { flex-shrink: 0; }
.gfo-mm__trust-row:nth-child(1) svg { color: var(--gfo-amber); }
.gfo-mm__trust-row:nth-child(2) svg,
.gfo-mm__trust-row:nth-child(3) svg { color: var(--gfo-success); }

/* curated nav list */
.gfo-mobile-menu__list { list-style: none; margin: 0; padding: 0 16px; }
.gfo-mobile-menu__list a { display: block; padding: 13px 0; border-bottom: 1px solid rgba(58,40,32,.12); font-family: var(--gfo-font-display); font-weight: 700; font-size: 15px; color: var(--gfo-ink); text-decoration: none; }

/* ---------- Footer ---------- */
.gfo-footer { background: var(--gfo-ink-deep); color: var(--gfo-on-dark); margin-top: var(--gfo-space-section); }
.gfo-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; padding-top: 48px; padding-bottom: 28px; }
.gfo-footer__brand .gfo-brand__wordmark { color: #fff; font-family: var(--gfo-font-display); font-weight: 700; font-size: 18px; }
.gfo-footer__tagline { color: var(--gfo-on-dark-muted); font-size: 13px; margin-top: 10px; max-width: 34ch; }
.gfo-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gfo-footer__list a { color: var(--gfo-on-dark-muted); text-decoration: none; font-size: 13px; }
.gfo-footer__list a:hover { color: #fff; }
.gfo-footer__regions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; }
.gfo-region-chip { border: 1px solid rgba(255,255,255,.2); border-radius: var(--gfo-radius-pill); padding: 6px 12px; font-size: 12px; color: var(--gfo-on-dark); text-decoration: none; }
.gfo-region-chip:hover { border-color: var(--gfo-clay-light); color: #fff; }
/* accepted payment marks (replaces the currency pill row) */
.gfo-footer__payments { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; }
.gfo-footer__payments-label { font-family: var(--gfo-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gfo-on-dark-faint); margin-right: 4px; }
.gfo-footer__legal { padding-bottom: 40px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }
.gfo-footer__disclaimer { color: var(--gfo-on-dark-faint); font-size: 11px; max-width: 80ch; }
.gfo-footer__copy { color: var(--gfo-on-dark-faint); font-size: 12px; margin: 8px 0 0; }

/* Footer directory disclosure — sitewide product + guide links (see inc/brand-mesh.php).
   One collapsed line by default: as an always-open block it outweighed the real footer
   navigation 26 links to 11 and read as clutter. Links inside a closed <details> are still
   in the HTML and are crawled and followed, so nothing is lost by hiding them. */
.gfo-footer__disc { padding-top: 14px; padding-bottom: 2px; }
.gfo-footer__disc summary { cursor: pointer; color: var(--gfo-on-dark-faint); font-size: 12.5px; list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.gfo-footer__disc summary::-webkit-details-marker { display: none; }
.gfo-footer__disc summary::before { content: "+"; font-family: var(--gfo-font-mono); font-size: 13px; line-height: 1; color: var(--gfo-clay-light); }
.gfo-footer__disc details[open] summary::before { content: "\2013"; }
.gfo-footer__disc summary:hover { color: #fff; }
.gfo-footer__disc summary:focus-visible { outline: 2px solid var(--gfo-clay-light); outline-offset: 3px; }
.gfo-footer__disc-body { padding-top: 18px; }
.gfo-footer__disc-body .gfo-eyebrow--light { margin-bottom: 10px; }
.gfo-footer__disc-body ul + .gfo-eyebrow--light { margin-top: 20px; }
.gfo-footer__disc-list { list-style: none; margin: 0; padding: 0; columns: 200px; column-gap: 28px; }
.gfo-footer__disc-list--wide { columns: 270px; }
.gfo-footer__disc-list li { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 8px; }
.gfo-footer__disc-list a { color: var(--gfo-on-dark-faint); text-decoration: none; font-size: 12.5px; line-height: 1.45; display: inline-block; }
.gfo-footer__disc-list a:hover { color: #fff; }
@media (max-width: 640px) {
  .gfo-footer__disc-list { columns: 2; column-gap: 16px; }
  .gfo-footer__disc-list--wide { columns: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .gfo-nav { display: none; }
  .gfo-burger { display: inline-block; }
  .gfo-switcher, .gfo-icon-btn--account { display: none; }
  .gfo-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gfo-mega__grid { grid-template-columns: 1fr; }
  .gfo-footer__grid { grid-template-columns: 1fr; }
}

/* ================= Shared components (used across templates) ================= */

.gfo-section-head { text-align: center; margin-bottom: 36px; }
.gfo-section-head--left { text-align: left; margin-bottom: 0; }
.gfo-section-head h2 { margin: 10px 0 0; }
.gfo-section-sub { max-width: 620px; margin: 12px auto 0; color: var(--gfo-text-muted); font-size: 15px; line-height: 1.6; }

/* Experts / advisory cards — shared chrome (used on Store Home AND product landings) */
.gfo-experts { padding: var(--gfo-space-section) 0; background: var(--gfo-surface); border-top: 1px solid rgba(58,40,32,.1); }
.gfo-experts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gfo-experts__more { text-align: center; margin-top: 26px; }
/* IM8-style horizontal card: large portrait left, name/credentials right */
.gfo-expert { background: var(--gfo-sand); border: 1px solid rgba(58,40,32,.12); border-radius: var(--gfo-radius-card); padding: 18px; display: grid; grid-template-columns: 108px 1fr; column-gap: 16px; align-items: start; text-align: left; }
.gfo-expert__avatar { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 108px; height: 128px; border-radius: 12px; background: var(--gfo-soft); color: var(--gfo-terracotta); font-family: var(--gfo-font-display); font-weight: 700; font-size: 26px; object-fit: cover; object-position: top; }
.gfo-expert__name { font-family: var(--gfo-font-display); font-weight: 700; font-size: 16px; color: var(--gfo-ink); margin-top: 6px; }
.gfo-expert__cred { font-family: var(--gfo-font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gfo-terracotta); margin-top: 5px; line-height: 1.5; }
.gfo-expert__bio { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; color: var(--gfo-text); margin-top: 12px; }
.gfo-experts__grid--about { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .gfo-experts__grid, .gfo-experts__grid--about { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gfo-experts__grid, .gfo-experts__grid--about { grid-template-columns: 1fr; } }

/* certification marks band (shared: home + about) */
.gfo-certs__row { display: flex; align-items: center; justify-content: center; gap: 14px 34px; flex-wrap: wrap; margin-top: 16px; }
.gfo-certs__mark { font-family: var(--gfo-font-mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gfo-ink); opacity: .75; }
.gfo-certs__mark::before { content: "✓ "; color: var(--gfo-green, #3d7a4f); }

/* ---------------- About page ---------------- */
.gfo-about-hero { background: var(--gfo-ink); padding: 76px 0 70px; text-align: center; }
.gfo-about-hero h1 { font-family: var(--gfo-font-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; color: var(--gfo-on-dark); max-width: 22ch; margin: 14px auto 0; }
.gfo-about-hero__lead { color: var(--gfo-on-dark-muted); font-size: 16.5px; line-height: 1.65; max-width: 62ch; margin: 20px auto 0; }
.gfo-about-pillars { padding: var(--gfo-space-section) 0; background: var(--gfo-surface); border-bottom: 1px solid rgba(58,40,32,.1); }
.gfo-about-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gfo-about-pillar { background: var(--gfo-sand); border: 1px solid rgba(58,40,32,.12); border-radius: var(--gfo-radius-card); padding: 26px; }
.gfo-about-pillar__num { font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--gfo-terracotta); }
.gfo-about-pillar h3 { font-family: var(--gfo-font-display); font-size: 19px; color: var(--gfo-ink); margin: 10px 0 8px; }
.gfo-about-pillar p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gfo-text); }
.gfo-about-standfor { padding: var(--gfo-space-section) 0; }
.gfo-about-standfor__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gfo-about-tick { display: flex; gap: 12px; align-items: flex-start; background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.12); border-radius: var(--gfo-radius-card); padding: 18px 20px; }
.gfo-about-tick b { font-family: var(--gfo-font-display); font-size: 15px; color: var(--gfo-ink); }
.gfo-about-tick p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gfo-text); }
.gfo-about-marks { padding: 34px var(--gfo-gutter); text-align: center; background: var(--gfo-sand); border-top: 1px solid rgba(58,40,32,.1); }
.gfo-about-cta { background: var(--gfo-terracotta); text-align: center; padding: 64px 0; }
.gfo-about-cta h2 { font-family: var(--gfo-font-display); font-size: clamp(24px, 3vw, 34px); color: #fff; margin: 0; }
.gfo-about-cta p { color: rgba(255,255,255,.85); margin: 12px auto 24px; max-width: 52ch; }
.gfo-about-cta .gfo-btn--primary { background: var(--gfo-ink); }
@media (max-width: 900px) { .gfo-about-pillars__grid { grid-template-columns: 1fr; } .gfo-about-standfor__grid { grid-template-columns: 1fr; } }

.gfo-stars { color: var(--gfo-amber); letter-spacing: 2px; }

.gfo-placeholder { background: repeating-linear-gradient(135deg, var(--gfo-stripe-a), var(--gfo-stripe-a) 12px, var(--gfo-stripe-b) 12px, var(--gfo-stripe-b) 24px); display: flex; align-items: center; justify-content: center; }
.gfo-placeholder span { font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--gfo-text-faint); }

.gfo-chip--light { color: var(--gfo-on-dark); border-color: rgba(255,255,255,.25); }
.gfo-btn--ghost-light { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }

/* Product card (Range + Shop) */
.gfo-pcard { display: flex; flex-direction: column; background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.14); border-radius: var(--gfo-radius-card); overflow: hidden; }
.gfo-pcard__bar { height: 5px; background: var(--gfo-terracotta); }
.gfo-pcard__img { display: block; border-bottom: 1px solid rgba(58,40,32,.08); aspect-ratio: 4 / 3; overflow: hidden; }
.gfo-pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gfo-pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gfo-pcard__title { font-size: 21px; margin: 0; }
.gfo-pcard__title a { color: var(--gfo-ink); text-decoration: none; }
.gfo-pcard__blurb { font-size: 13px; color: var(--gfo-text); margin: 0; flex: 1; }
.gfo-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(58,40,32,.1); }
.gfo-pcard__price { font-family: var(--gfo-font-display); font-weight: 700; font-size: 18px; color: var(--gfo-ink); }
.gfo-pcard .button { background: var(--gfo-ink); color: #fff; border: 0; border-radius: var(--gfo-radius-btn); font-family: var(--gfo-font-body); font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 10px 17px; text-decoration: none; cursor: pointer; display: inline-block; }
.gfo-pcard .button:hover { background: var(--gfo-terracotta); }

/* Accordion (FAQ, product tabs helper) */
.gfo-accordion { background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.13); border-radius: 8px; overflow: hidden; }
.gfo-accordion + .gfo-accordion { margin-top: 10px; }
.gfo-accordion__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; cursor: pointer; padding: 18px 20px; text-align: left; font-family: var(--gfo-font-body); font-size: 15px; font-weight: 600; color: var(--gfo-ink); }
.gfo-accordion__sign { font-family: var(--gfo-font-display); font-size: 22px; color: var(--gfo-terracotta); flex: none; }
.gfo-accordion__a { padding: 0 20px 20px; }
.gfo-accordion__a p { font-size: 14px; line-height: 1.65; color: var(--gfo-text); margin: 0; max-width: 64ch; }

/* Generic content (index/page/404, editorial + WooCommerce cart/checkout/account pages) */
.gfo-content { padding: var(--gfo-space-section) 0; background: var(--gfo-sand); min-height: 50vh; }
.gfo-content__head { margin-bottom: 28px; }
.gfo-page-title { font-size: var(--gfo-fs-h1); letter-spacing: -.02em; margin: 0 0 24px; }
.entry-content { max-width: 72ch; }
.entry-content > * { margin-bottom: 1em; }
.entry-content h2 { font-size: var(--gfo-fs-h2); margin-top: 1.4em; }
.entry-content h3 { font-size: var(--gfo-fs-h3); margin-top: 1.2em; }
.entry-content p.has-lead { font-size: 18px; line-height: 1.65; color: var(--gfo-ink); }
.entry-content a { color: var(--gfo-terracotta); }
/* generic content tables + the science synergy table */
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 12px; border: 1px solid rgba(58,40,32,.14); vertical-align: top; }
.entry-content thead th { background: var(--gfo-soft); font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gfo-science-table { max-width: none; overflow-x: auto; }
.gfo-science-table td:last-child { font-family: var(--gfo-font-mono); font-size: 11px; color: var(--gfo-text-muted); word-break: break-word; }
.gfo-science-table tbody tr:nth-child(even) { background: rgba(58,40,32,.03); }
.gfo-science-note { font-size: 12.5px; color: var(--gfo-text-muted); }
.gfo-content__empty { color: var(--gfo-text-muted); }
.gfo-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gfo-post-card { background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.12); border-radius: var(--gfo-radius-card); overflow: hidden; padding-bottom: 20px; }
.gfo-post-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gfo-post-card__title { font-size: var(--gfo-fs-h3); margin: 16px 20px 8px; }
.gfo-post-card__title a { color: var(--gfo-ink); text-decoration: none; }
.gfo-post-card__excerpt { padding: 0 20px; color: var(--gfo-text); font-size: 14px; }
.gfo-post-card__more { display: inline-block; margin: 12px 20px 0; color: var(--gfo-terracotta); font-weight: 600; font-size: 13px; text-decoration: none; }
.gfo-404 { text-align: center; }
.gfo-404__text { color: var(--gfo-text-muted); margin-bottom: 24px; }
@media (max-width: 900px) { .gfo-post-list { grid-template-columns: 1fr; } }

/* Journal article (single.php) */
.gfo-article__header { background: var(--gfo-ink-deep); color: #fff; padding: 56px 0; }
.gfo-article__header-inner { max-width: 760px; }
.gfo-article__title { color: #fff; font-size: var(--gfo-fs-h1); letter-spacing: -.02em; margin: 12px 0 0; }
.gfo-article__meta { color: var(--gfo-on-dark-muted); font-family: var(--gfo-font-mono); font-size: 12px; margin-top: 14px; }
.gfo-article__body { max-width: 760px; padding-top: 40px; padding-bottom: 20px; }
.gfo-article__hero img { width: 100%; border-radius: var(--gfo-radius-feature); margin-bottom: 28px; }
.gfo-article__content { max-width: none; font-size: 17px; line-height: 1.75; }
.gfo-article__content blockquote { font-family: var(--gfo-font-editorial); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--gfo-terracotta); border: 0; margin: 1.4em 0; padding: 0; }
.gfo-article__author { display: flex; gap: 16px; align-items: flex-start; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(58,40,32,.14); }
.gfo-article__author img { border-radius: 50%; }
.gfo-article__author-name { font-family: var(--gfo-font-display); font-weight: 700; font-size: 15px; }
.gfo-article__author-bio { font-size: 13px; color: var(--gfo-text-muted); margin: 4px 0 0; }
.gfo-related { background: var(--gfo-surface); border-top: 1px solid rgba(58,40,32,.1); padding: 48px 0; margin-top: 40px; }
.gfo-related__title { text-align: center; margin-bottom: 28px; }

/* WooCommerce buttons → brand (override WC/block default purple; needs !important to beat
   WooCommerce's high-specificity .button.alt rules and block styles). */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce a.checkout-button, .woocommerce #place_order,
.gfo-pdp__buy .single_add_to_cart_button {
  background-color: var(--gfo-terracotta) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--gfo-radius-btn);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover {
  background-color: #a95930 !important;
}
/* Secondary WooCommerce buttons (Update cart, Apply coupon) → ink */
.woocommerce a.button:not(.alt), .woocommerce button.button:not(.alt), .woocommerce input.button:not(.alt) {
  background-color: var(--gfo-ink); color: #fff;
}

/* Mini-cart drawer buttons: Checkout = terracotta primary (on top), View cart = ghost link */
.gfo-drawer .widget_shopping_cart_content .buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.gfo-drawer .widget_shopping_cart_content .buttons a { display: block; width: 100%; text-align: center; border-radius: 9px; padding: 13px; font-weight: 700; text-decoration: none; }
.gfo-drawer .widget_shopping_cart_content .buttons a.checkout { background-color: var(--gfo-terracotta) !important; color: #fff !important; order: -1; }
.gfo-drawer .widget_shopping_cart_content .buttons a:not(.checkout) { background: transparent; color: var(--gfo-ink); box-shadow: inset 0 0 0 1px rgba(58,40,32,.25); }

/* ============ Offer bar (landing PDPs) ============ */
.gfo-offerbar { background: var(--gfo-ink); color: #fff; padding: 10px 16px; }
.gfo-offerbar__inner { max-width: var(--gfo-maxw, 1200px); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.gfo-offerbar__label { font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--gfo-clay-light); font-weight: 600; }
.gfo-offerbar__text { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }
.gfo-offerbar__count { display: inline-flex; align-items: center; gap: 6px; }
.gfo-offerbar__unit { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; }
.gfo-offerbar__unit b { font-family: var(--gfo-font-display); font-weight: 700; font-size: 16px; line-height: 1; color: #fff; }
.gfo-offerbar__unit i { font-style: normal; font-family: var(--gfo-font-mono); font-size: 8px; letter-spacing: .14em; color: rgba(255,255,255,.6); margin-top: 3px; }
.gfo-offerbar__sep { color: rgba(255,255,255,.5); font-weight: 700; margin-top: -8px; }

/* compact sticky offer bar (appears on scroll, ABOVE the sticky header) */
.gfo-offer-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 64; min-height: 41px; background: var(--gfo-ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 9px 16px; box-shadow: 0 2px 14px rgba(0,0,0,.25); }
.gfo-offer-sticky[hidden] { display: none; }
/* scrolled state: ONLY the promotion bar stays — the header hides entirely (IM8 behaviour) */
body.gfo-offer-stuck .gfo-header-wrap { visibility: hidden; pointer-events: none; }
.gfo-offer-sticky__brand { font-family: var(--gfo-font-display); font-weight: 700; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.gfo-offer-sticky__text { font-size: 12.5px; font-weight: 600; color: var(--gfo-clay-light); }
.gfo-offer-sticky__cta { background: #fff; color: var(--gfo-ink); font-family: var(--gfo-font-body); font-weight: 700; font-size: 12px; padding: 8px 18px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
.gfo-offer-sticky__cta:hover { background: var(--gfo-clay-light); text-decoration: none; }

/* ============ Footer payment logos ============ */
.gfo-paylogo { display: inline-flex; line-height: 0; }
/* No border-radius here: each official mark carries its own rounded tile (rx 2–3.8px
   at render size), and a larger outer radius clipped the corners of the coloured
   tiles — Amex, Atome, Touch'n Go, Klarna. */
.gfo-paylogo svg { display: block; }

/* Sticky add-to-cart bar must never bury the footer copyright (all viewports) */
.single-product .gfo-footer { padding-bottom: 92px; }

/* ============ Mobile header (IM8-style: burger | centered logo | cart) ============ */
@media (max-width: 768px) {
  /* bar is the positioning context; burger anchors to the BAR (not the actions box) */
  .gfo-header__bar { position: relative; justify-content: flex-end; }
  .gfo-header__actions { position: static; } /* must stay unpositioned or the burger anchors to it */
  .gfo-burger { display: block; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; }
  .gfo-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; }
  .gfo-store-badge { font-size: 8px; padding: 2px 6px; } /* keep the country badge on mobile, just smaller */
  .gfo-header__actions .gfo-icon-btn,
  .gfo-header__actions .gfo-switcher { display: none; } /* search/account/switcher hidden on mobile (IM8-minimal) */
  .gfo-cart-btn { font-size: 0; padding: 7px 12px; border-radius: 50%; position: relative; }
  /* The visible badge stays 31px so the header bar keeps its 57px height (sizing the button
     itself to 44px pushed the bar to 70px and ate above-the-fold space). This transparent
     inset overlay is part of the button's own hit area, so the TOUCH target clears the 44px
     minimum while the layout is unchanged. */
  .gfo-cart-btn::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .gfo-cart-btn .gfo-cart-btn__count { font-size: 13px; font-weight: 700; }
  /* offer bar mobile */
  .gfo-offerbar__inner { gap: 10px; }
  .gfo-offerbar__text { font-size: 11.5px; }
  .gfo-offer-sticky { gap: 10px; }
  .gfo-offer-sticky__brand { display: none; }
  .gfo-offer-sticky__text { font-size: 11px; }
}

/* Phones: the country badge sits under the wordmark instead of beside it. Side by side, the
   centred brand (wordmark + badge, up to ~260px) ran under the currency label at every phone
   width ("HONG[HK$]KONG", "MALAYSI[RM]"), and on checkout it pushed "Secure checkout" off the
   screen. Stacked, the brand is only as wide as the wordmark. The store bar stays 57px tall
   because the brand is absolutely positioned there; the checkout bar grows to match it. */
@media (max-width: 480px) {
  .gfo-header .gfo-brand { flex-direction: column; gap: 3px; }
  .gfo-header .gfo-brand__wordmark { line-height: 1.15; }
  .gfo-header .gfo-store-badge { line-height: 1.3; }
  .gfo-header .gfo-header__bar--minimal .gfo-brand { align-items: flex-start; }
}
/* Below 360px even the wordmark alone reaches the currency label. */
@media (max-width: 359px) {
  .gfo-header__bar:not(.gfo-header__bar--minimal) .gfo-brand__wordmark { font-size: 14px; }
  .gfo-header__actions { gap: 8px; }
}

/* drawer mini-cart items: constrain images, tidy rows */
.gfo-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.gfo-drawer .woocommerce-mini-cart li.mini_cart_item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(58,40,32,.1); position: relative; }
.gfo-drawer .woocommerce-mini-cart li.mini_cart_item a { color: var(--gfo-ink); text-decoration: none; font-weight: 600; font-size: 13.5px; line-height: 1.4; }
.gfo-drawer .woocommerce-mini-cart li.mini_cart_item img { width: 56px !important; height: 56px !important; max-width: 56px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(58,40,32,.12); float: none; margin: 0; order: -1; flex: none; }
.gfo-drawer .woocommerce-mini-cart li.mini_cart_item a.remove { position: absolute; top: 10px; right: 12px; font-size: 17px; color: var(--gfo-text-hint) !important; font-weight: 400; }
.gfo-drawer .woocommerce-mini-cart .quantity { display: block; font-size: 12.5px; color: var(--gfo-text-muted); margin-top: 3px; font-weight: 500; }

/* ============ minimal (funnel) checkout chrome ============ */
.gfo-header__bar--minimal { justify-content: space-between; }
.gfo-minimal-secure { font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.gfo-footer--minimal { background: var(--gfo-ink-deep); color: #fff; padding: 22px 0 26px; margin-top: 40px; }
.gfo-footer--minimal .gfo-footer__payments { justify-content: center; padding-bottom: 12px; }
.gfo-footer--minimal .gfo-footer__legal { text-align: center; }
.gfo-footer--minimal .gfo-footer__copy { font-size: 12px; color: rgba(255,255,255,.6); margin: 0; }
.gfo-footer--minimal .gfo-footer__copy a { color: rgba(255,255,255,.75); }

/* header currency label (static, all pages/viewports beside the cart) */
.gfo-cur-label { display: inline-block; font-family: var(--gfo-font-mono); font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 4px 8px; white-space: nowrap; }

/* ============ cart value stack (drawer + cart page) ============ */
.gfo-cart-stack { margin: 12px 0 4px; }
.gfo-cart-stack__delivery { background: var(--gfo-ink); color: #fff; border-radius: 10px; padding: 10px 14px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.gfo-cart-stack__rows { list-style: none; margin: 10px 0 0; padding: 10px 14px; border: 1px solid rgba(58,40,32,.12); border-radius: 10px; background: var(--gfo-surface); }
.gfo-cart-stack__rows li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gfo-text); padding: 4px 0; }
.gfo-cart-stack__rows li b { margin-left: auto; color: var(--gfo-success); font-size: 11.5px; letter-spacing: .05em; }
.gfo-drawer .gfo-cart-stack { margin: 12px 0 2px; }

/* Drawer ship-bar internals + upsell card. These MUST live in main.css, not commerce.css:
   the drawer is global chrome rendered by header.php on every page, but commerce.css is only
   enqueued on cart/checkout/account — so on shop and product pages (where customers actually
   add to cart) the progress bar and upsell card rendered completely unstyled. */
.gfo-drawer__ship-bar { height: 6px; border-radius: 4px; background: rgba(58,40,32,.12); overflow: hidden; margin-bottom: 8px; }
.gfo-drawer__ship-bar span { display: block; height: 100%; border-radius: 4px; background: var(--gfo-terracotta); transition: width .4s ease; }
.gfo-drawer__ship.is-unlocked .gfo-drawer__ship-bar span { background: #3a7d44; }
.gfo-drawer__ship-msg { font-size: 13px; font-weight: 600; }
.gfo-drawer__ship.is-unlocked .gfo-drawer__ship-msg { color: #3a7d44; }
.gfo-drawer__upsell { margin: 16px 14px; }
.gfo-drawer__upsell-label { font-family: var(--gfo-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gfo-text-muted); text-align: center; margin-bottom: 10px; }
.gfo-drawer__upsell-card { display: flex; align-items: center; gap: 12px; background: var(--gfo-surface); border: 1px solid rgba(58,40,32,.14); border-radius: 14px; padding: 12px; }
.gfo-drawer__upsell-thumb img { width: 56px; height: 56px; max-width: none; object-fit: cover; border-radius: 10px; display: block; }
.gfo-drawer__upsell-info { flex: 1; min-width: 0; }
.gfo-drawer__upsell-name { display: block; font-family: var(--gfo-font-display); font-weight: 700; font-size: 13.5px; color: var(--gfo-ink); text-decoration: none; }
.gfo-drawer__upsell-price { font-size: 13px; color: var(--gfo-text); }
.gfo-drawer__upsell-add { padding: 9px 18px; font-size: 12.5px; white-space: nowrap; color: #fff; }

/* ---------- WooCommerce sale flash ---------- */
/* WooCommerce's .onsale badge is position:absolute, but the loop-product link it sits inside is
   position:static — so it escapes its card, anchors to a distant ancestor and lands ~7px past the
   right edge of the document. The result is a badge nobody can see that still forces horizontal
   scroll on any page listing an on-sale product (measured live on S-GLOW, skinned network-wide,
   and on ZENSO once it went on sale). This design uses its own SAVE badges and never styled
   .onsale; commerce.css already hides it on the cart for the same reason. */
.gfo-main span.onsale { display: none; }