/*
 * hqt-tokens.css — Hill Queen Tea design tokens + global primitives.
 *
 * Purpose : the ONE source of design values (Palette A, founder-locked 2026-07-25) and the
 *           shared component primitives every template uses. Matches mockups/design-system.html
 *           (the approved binding contract).
 * Sections: 1 tokens · 2 base/type · 3 buttons · 4 badges · 5 product card · 6 pills/checks ·
 *           7 offer bar/nav/rail shell · 8 footer shell · 9 utilities.
 * Feeds   : every hqt-* template + rebuilt header.php/footer.php.
 * Consumes: assets/css/hqt-fonts.css (self-hosted Lora/Raleway, loaded first).
 * Refs    : docs/plan/REVAMP_PLAN.md §Design-tokens · mockups/design-system.html.
 */

/* 1 · TOKENS ------------------------------------------------------------ */
:root {
  --hqt-forest: #2d5016;
  --hqt-deep: #1f3a0e;
  --hqt-mid: #6ba62f;
  --hqt-leaf: #8bc34a;
  --hqt-cream: #f6f8f2;
  --hqt-pink: #d81b60;          /* RARE: sale badges + Buy Now only (AA: 4.95:1 both ways) */
  --hqt-gold: #c9a24b;          /* gifting accents only */
  --hqt-ink: #1e2417;
  --hqt-soft: #55613f;
  --hqt-btn: #3f7d14;           /* green fill that carries WHITE text - 5.05:1 */
  --hqt-gold-tx: #8a6a1f;       /* gold as TEXT (the #c9a24b token stays for borders) */
  --hqt-mut: #6b7360;           /* struck-through prices + muted meta - 4.95:1 on white */
  --hqt-line: #e3e8db;
  --hqt-white: #ffffff;

  --hqt-ff-display: 'Lora', Georgia, serif;
  --hqt-ff-body: 'Raleway', Arial, sans-serif;

  --hqt-r: 8px;
  --hqt-r-lg: 12px;
  --hqt-shadow: 0 3px 18px rgba(45, 80, 22, .08);
  --hqt-shadow-hover: 0 12px 30px rgba(45, 80, 22, .14);
  --hqt-space: 8px; /* 4/8 rhythm: use multiples */
}

/* 2 · BASE / TYPE -------------------------------------------------------- */
body.hqt {
  font-family: var(--hqt-ff-body);
  background: var(--hqt-cream);
  color: var(--hqt-ink);
  line-height: 1.65;
}
body.hqt h1, body.hqt h2, body.hqt h3 {
  font-family: var(--hqt-ff-display);
  font-weight: 600;
  color: var(--hqt-forest);
}
.hqt-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hqt-tagline { color: var(--hqt-forest); font-size: 12.5px; font-weight: 600; }

/* 3 · BUTTONS ------------------------------------------------------------ */
.hqt-btn {
  display: inline-block; padding: 13px 28px; border-radius: 6px;
  font-weight: 700; font-size: 14.5px; cursor: pointer; border: none;
  font-family: var(--hqt-ff-body); transition: all .25s ease; text-decoration: none;
  min-height: 44px;
}
.hqt-btn--primary { background: var(--hqt-forest); color: #fff; }
.hqt-btn--primary:hover { background: #3a6420; color: #fff; }
.hqt-btn--secondary { background: transparent; color: var(--hqt-forest); border: 1.5px solid var(--hqt-forest); }
.hqt-btn--add { background: var(--hqt-btn); color: #fff; }
.hqt-btn--add:hover { background: #578e25; color: #fff; }
.hqt-btn--buy { background: var(--hqt-pink); color: #fff; }
.hqt-btn--buy:hover { background: #c9114f; color: #fff; }

/* 4 · BADGES ------------------------------------------------------------- */
.hqt-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
}
.hqt-badge--best { background: var(--hqt-forest); color: #fff; }
.hqt-badge--new { background: var(--hqt-leaf); color: var(--hqt-deep); }
.hqt-badge--sale { background: var(--hqt-pink); color: #fff; }
.hqt-badge--lot { background: var(--hqt-gold); color: #241c07; }

/* 5 · PRODUCT CARD (aligned buttons: flex column, CTA pinned to base) ----- */
.hqt-card {
  background: #fff; border-radius: 10px; box-shadow: var(--hqt-shadow);
  overflow: hidden; transition: all .25s; position: relative;
  display: flex; flex-direction: column;
}
.hqt-card:hover { transform: translateY(-4px); box-shadow: var(--hqt-shadow-hover); }
.hqt-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.hqt-card__name { font-weight: 700; font-size: 15px; }
.hqt-card__price { font-size: 14.5px; margin: 7px 0 10px; font-weight: 600; }
.hqt-card__price del { color: var(--hqt-mut); font-size: 12.5px; font-weight: 400; }
.hqt-card__off { color: var(--hqt-pink); font-size: 11px; font-weight: 800; }
.hqt-card .hqt-btn--add { margin-top: auto; width: 100%; padding: 11px; font-size: 13px; text-align: center; }

/* 6 · PILLS + PURITY CHECKS ---------------------------------------------- */
.hqt-pill {
  display: inline-block; background: var(--hqt-cream); border: 1px solid var(--hqt-line);
  border-radius: 99px; padding: 6px 14px; font-size: 12.5px; color: var(--hqt-soft);
  margin: 0 6px 8px 0;
}
.hqt-check { color: var(--hqt-forest); font-weight: 700; margin-right: 6px; }

/* 7 · SHELL: OFFER BAR · NAV · RAIL -------------------------------------- */
.hqt-offer {
  background: var(--hqt-deep); color: #e9f2dd; text-align: center; padding: 10px;
  font-size: 13px; position: sticky; top: 0; z-index: 60;
}
/* Marquee variant: one continuous belt of messages; pauses on hover; falls back
   to a static scrollable bar for reduced-motion users. */
.hqt-offer--marquee { padding: 10px 0; overflow: hidden; }
.hqt-offer__track { display: flex; width: max-content; animation: hqt-offer-roll 62s linear infinite; }
.hqt-offer--marquee:hover .hqt-offer__track,
.hqt-offer--marquee:active .hqt-offer__track,
.hqt-offer--marquee:focus-within .hqt-offer__track { animation-play-state: paused; }
.hqt-offer__set { display: flex; flex: 0 0 auto; }
.hqt-offer__msg { flex: 0 0 auto; white-space: nowrap; padding: 0 34px; position: relative; }
.hqt-offer__msg::after { content: '✦'; position: absolute; right: -6px; color: var(--hqt-leaf); opacity: 0.7; }
@keyframes hqt-offer-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hqt-offer__track { animation: none; overflow-x: auto; width: auto; }
  .hqt-offer__set[aria-hidden] { display: none; }
}
/* ---- star rating (SHARED widget) --------------------------------------------
   Rendered by hqt_stars_html() and used by card.php on the home + shop grids AND
   by the PDP rating chip / score cards. It therefore has to live in this global
   sheet: it previously sat in hqt-pdp.css, which is enqueued on the PDP only, so
   every card rating outside a product page fell back to inheriting its
   container's colour — track and fill identical, no readable proportion.

   A star rating carries its information in the BOUNDARY between filled and
   unfilled, so the contrast has to land there, not merely against the page.
   Only the FILL is darkened; the track stays light because that is what "empty"
   should look like. Darkening both to clear 3:1 against white was measured at
   1.19:1 fill-vs-track — worse than leaving it alone.
   fill vs ground 2.40 -> 5.05:1 · fill vs track 1.74 -> 3.65:1.

   BOTH colours are restated at (0,2,0) rather than left to inherit, because a
   container that colours its own text WILL flatten the widget: `.hqt-rchip span`
   is (0,1,1) and outranked plain `.hqt-stars` / `.hqt-stars__fill` at (0,1,0),
   so inside the rating chip track and fill were painted the SAME colour. */
.hqt-stars { position: relative; display: inline-block; line-height: 1; font-size: 14px; letter-spacing: 1px; }
.hqt-stars__bg { display: inline-block; }
.hqt-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.hqt-stars .hqt-stars__bg { color: #d9ddd0; }
.hqt-stars .hqt-stars__fill { color: var(--hqt-gold-tx, #8a6a1f); }

.hqt-offer__code {
  background: rgba(255,255,255,.14); border: 1px dashed rgba(255,255,255,.35);
  padding: 2px 12px; border-radius: 4px; font-family: monospace; cursor: pointer;
  /* The ONE contrast fix that goes the other way: this sits on the DARK offer
     band, where leaf measured 3.88:1. Everything else on light grounds was
     darkened to forest; this one has to be LIGHTENED. 8.14:1. */
  color: #fff;
}
.hqt-nav {
  background: rgba(246,248,242,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hqt-line); position: sticky; top: 38px; z-index: 55;
}
.hqt-nav__in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.hqt-logo { font-family: var(--hqt-ff-display); font-size: 23px; font-weight: 700; color: var(--hqt-forest); text-decoration: none; }
.hqt-logo em { font-style: normal; color: var(--hqt-forest); }
.hqt-logo--img img { height: 48px; width: auto; display: block; }
.hqt-footer .hqt-logo--img img { height: 56px; filter: brightness(0) invert(1); }
.hqt-nav__menu { display: flex; gap: 26px; list-style: none; font-size: 14px; font-weight: 600; margin: 0; }
.hqt-nav__menu a { color: var(--hqt-ink); padding-bottom: 4px; border-bottom: 2px solid transparent; text-decoration: none; }
.hqt-nav__menu a:hover { color: var(--hqt-forest); border-color: var(--hqt-leaf); }
/* Native dropdowns (Max Mega Menu retired at Unit-2 polish — plugin-diet):
   plain nested ULs, white card on hover/keyboard focus. */
.hqt-nav__menu li { position: relative; list-style: none; }
.hqt-nav__menu .sub-menu {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 80;
  background: var(--hqt-white); border: 1px solid var(--hqt-line); border-radius: var(--hqt-r);
  box-shadow: var(--hqt-shadow-hover); padding: 8px 0; min-width: 210px; list-style: none; margin: 0;
}
.hqt-nav__menu li:hover > .sub-menu, .hqt-nav__menu li:focus-within > .sub-menu { display: block; }
.hqt-nav__menu .sub-menu a { display: block; padding: 8px 16px; border-bottom: none; font-weight: 500; font-size: 13.5px; }
.hqt-nav__menu .sub-menu a:hover { background: var(--hqt-cream); color: var(--hqt-forest); }
.hqt-nav__menu .menu-item-has-children > a::after { content: " \2304"; font-size: 10px; color: var(--hqt-soft); }
.hqt-nav__icons { display: flex; gap: 4px; font-size: 13px; color: var(--hqt-soft); font-weight: 600; align-items: center; }
/* Uniform 44px boxes for all three icon controls (FiboSearch widget + account + cart) —
   mixed internal paddings made gaps ragged; the box, not the flex gap, now provides spacing.
   FiboSearch selectors verified against live markup 2026-07-25. */
.hqt-nav__icons .dgwt-wcas-search-wrapp { margin: 0; }
.hqt-nav__icons .dgwt-wcas-search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
}
.hqt-nav__icons .dgwt-wcas-ico-magnifier-handler { width: 21px; height: 21px; }
.hqt-nav__icons a { color: var(--hqt-soft); text-decoration: none; }
.hqt-cartdot { background: var(--hqt-pink); color: #fff; border-radius: 99px; font-size: 10px; padding: 1px 6px; }
.hqt-nav__icobtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; color: var(--hqt-forest);
}
.hqt-nav__icobtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hqt-nav__icobtn:hover { color: var(--hqt-forest); }
.hqt-nav__icobtn .hqt-cartdot { position: absolute; top: 2px; right: 0; }
/* Mega-menu panels (desktop; CSS hover/focus-within, no JS). */
.hqt-nav__menu li.hqt-meganav__item { position: static; }
.hqt-meganav__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--hqt-white); border-top: 1px solid var(--hqt-line); box-shadow: 0 24px 40px rgba(20,30,10,0.12); padding: 26px 6vw 30px; z-index: 60; grid-template-columns: repeat(3, minmax(150px, 1fr)) 240px; gap: 30px; }
/* Hover bridge (re-measured 2026-07-27 after the rail removal + the orphaned-CSS
   repair): with li position:static the panel anchors to the sticky nav and the
   link-to-panel gap is +20px — this invisible strip keeps li:hover alive across
   it. NOTE: re-measure this gap whenever header/nav height changes. */
.hqt-meganav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.hqt-meganav__panel--wide { grid-template-columns: repeat(3, 1fr); }
.hqt-meganav__item:hover .hqt-meganav__panel,
.hqt-meganav__item:focus-within .hqt-meganav__panel { display: grid; }
.hqt-meganav__col b { display: block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hqt-forest); margin-bottom: 10px; }
.hqt-meganav__col a { display: block; padding: 5px 0; font-weight: 500; font-size: 13.5px; border-bottom: none !important; }
.hqt-meganav__all { color: var(--hqt-forest); font-weight: 700 !important; margin-top: 6px; }
.hqt-meganav__tile { border-radius: 12px; overflow: hidden; background: var(--hqt-cream); border: 1px solid var(--hqt-line); display: block; }
.hqt-meganav__tile img { width: 100%; height: 150px; object-fit: contain; background: #fff; }
.hqt-meganav__tile span { display: block; padding: 10px 12px; font-weight: 700; font-size: 13.5px; color: var(--hqt-forest); }
.hqt-meganav__tile em { display: block; font-style: normal; font-size: 11.5px; color: var(--hqt-forest); margin-top: 2px; }
/* NOTE: .hqt-nav is already position:sticky (a containing block) — never re-declare
   its position here; a blanket `relative` override once shifted the nav 38px into
   the benefit rail (top:38px stayed applied). Mega panels anchor to sticky fine. */
@media (max-width: 900px) { .hqt-meganav { display: none; } }

/* Founder-supplied banner slots (home hero, lander tops, gifting hero). */
.hqt-bannerimg { display: block; width: 100%; height: auto; }
.hqt-lander__banner, .hqt-gift__bannerhero { line-height: 0; }
/* Woo notices, brand skin (shared: PDP + home + any hqt page). */
body.hqt .woocommerce-message, body.hqt .woocommerce-info, body.hqt .wc-block-components-notice-banner.is-success {
  background: var(--hqt-cream); border-left: 3px solid var(--hqt-mid); color: var(--hqt-ink);
  border-radius: var(--hqt-r); padding: 12px 16px; margin: 14px 0; font-size: 13.5px; list-style: none;
}
body.hqt .woocommerce-error, body.hqt .wc-block-components-notice-banner.is-error {
  background: #fdf0f3; border-left: 3px solid var(--hqt-pink); color: var(--hqt-ink);
  border-radius: var(--hqt-r); padding: 12px 16px; margin: 14px 0; font-size: 13.5px; list-style: none;
}
body.hqt .woocommerce-error li, body.hqt .woocommerce-message li { list-style: none; }

.hqt-wa {
  position: fixed; bottom: 18px; left: 18px; background: #25d366; color: #fff;
  border-radius: 99px; padding: 12px 18px; font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; z-index: 70; text-decoration: none;
}

/* 8 · FOOTER SHELL -------------------------------------------------------- */
.hqt-footer { background: var(--hqt-deep); color: #b9cf9f; padding: 44px 0; font-size: 13px; }
.hqt-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.hqt-footer h4 { color: #fff; font-size: 13px; margin-bottom: 10px; font-weight: 700; font-family: var(--hqt-ff-body); }
.hqt-footer a { color: #b9cf9f; display: block; padding: 2.5px 0; text-decoration: none; }
.hqt-footer a:hover { color: var(--hqt-leaf); }
.hqt-seofoot { background: #fff; border-top: 1px solid var(--hqt-line); padding: 36px 0; font-size: 12.5px; color: var(--hqt-soft); }
.hqt-seofoot h3 { font-family: var(--hqt-ff-body); font-size: 12.5px; color: var(--hqt-forest); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .8px; }
.hqt-seofoot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hqt-seofoot a { color: var(--hqt-soft); display: block; padding: 3px 0; text-decoration: none; }
.hqt-seofoot a:hover { color: var(--hqt-forest); }

/* 9 · UTILITIES + RESPONSIVE --------------------------------------------- */
.hqt-hide { display: none !important; }
.hqt-burger {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--hqt-forest); padding: 10px; min-width: 44px; min-height: 44px;
}
.hqt-mobile-menu {
  background: #fff; border-bottom: 1px solid var(--hqt-line);
  padding: 8px 24px 16px;
}
.hqt-mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.hqt-mobile-menu__list a {
  display: block; padding: 12px 4px; font-size: 15px; font-weight: 600;
  color: var(--hqt-ink); text-decoration: none; border-bottom: 1px solid var(--hqt-line);
}
.hqt-mobile-menu__list .sub-menu { list-style: none; padding-left: 16px; }
@media (max-width: 900px) {
  .hqt-nav__menu { display: none; }
  .hqt-burger { display: inline-flex; align-items: center; justify-content: center; }
  .hqt-footer__cols, .hqt-seofoot__cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 901px) {
  .hqt-mobile-menu { display: none !important; }
}
@media (max-width: 580px) {
  .hqt-footer__cols, .hqt-seofoot__cols { grid-template-columns: 1fr; }
}

/* ---- video slots (hqt_video_slot — loop = silent ambience, tap = poster + play) ---- */
.hqt-vid { position: relative; display: block; width: 100%; height: 100%; }
video.hqt-vid, .hqt-vid video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.hqt-vid--tap { cursor: pointer; overflow: hidden; line-height: 0; }
.hqt-vid--tap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hqt-vid__play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(20, 28, 14, 0.55); backdrop-filter: blur(3px); transition: transform 0.2s ease, background 0.2s ease; }
/* triangle centered by absolute math (founder 2026-07-27) — immune to button
   padding/line-height/grid quirks; -42% x = optical centroid of the triangle */
.hqt-vid__play span { position: absolute; left: 50%; top: 50%; transform: translate(-42%, -50%); width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.hqt-vid--tap:hover .hqt-vid__play { transform: scale(1.08); background: rgba(45, 80, 22, 0.85); }

/* ---- footer v2 (competitor-grade: policies col · socials · both addresses · bottom bar) ---- */
.hqt-footer__cols--main { grid-template-columns: 2.2fr 0.9fr 1.1fr 1fr 1.2fr; }
.hqt-footer__mail { margin-top: 4px; font-weight: 600; }
.hqt-footer__soc { display: flex; gap: 12px; margin: 12px 0 14px; }
.hqt-footer__soc a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #dfe9d2; padding: 0; transition: background 0.2s ease, color 0.2s ease; }
.hqt-footer__soc a:hover { background: var(--hqt-leaf); color: #16220e; }
.hqt-footer__addr { font-size: 12px; line-height: 1.55; color: #9db184; }
.hqt-footer__addr p { margin: 0 0 8px; }
.hqt-footer__addr b { color: #c7d8b1; font-weight: 700; }
.hqt-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 34px; padding-top: 18px; font-size: 12px; color: #9db184; }
@media (max-width: 900px) { .hqt-footer__cols--main { grid-template-columns: 1fr 1fr; } .hqt-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 580px) { .hqt-footer__cols--main { grid-template-columns: 1fr; } }

/* footer about band (Blue Tea reference) + logo sizing */
.hqt-footer__about { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 34px; padding-top: 28px; }
.hqt-footer__about h4 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.hqt-footer__about p { max-width: 900px; font-size: 13px; line-height: 1.7; color: #b9cf9f; }
/* .hqt-footer a is display:block (0,1,1) — repeat the class so the CTA stays a chip */
.hqt-footer .hqt-footer__aboutbtn { display: inline-block; width: auto; margin-top: 14px; padding: 9px 18px; font-size: 13px; color: #dfe9d2; border: 1.5px solid #dfe9d2; border-radius: 999px; }
.hqt-footer__aboutbtn:hover { color: var(--hqt-leaf); border-color: var(--hqt-leaf); }
.hqt-footer .hqt-footer__bar { margin-top: 24px; }

/* footer white logo (founder file — no filter needed, it IS white).
   130px: founder called 74px too small; negative offsets absorb the file's
   transparent padding so the mark aligns with the column edge. */
.hqt-footer__wlogo img { height: 96px; width: auto; margin: 0 0 6px; }

/* WhatsApp chip -> round icon button (founder 2026-07-26) */
.hqt-wa--icon { width: 56px; height: 56px; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 0; }

/* Skip link — off-screen until it takes keyboard focus, then pinned top-left.
   Not display:none: a hidden element cannot receive focus, which would defeat it. */
.hqt-skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--hqt-deep); color: #fff; padding: 12px 20px;
  font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 0 0 6px 0;
}
.hqt-skip:focus { left: 0; outline: 3px solid var(--hqt-leaf); outline-offset: 2px; }
/* The skip target takes focus programmatically only - it is never tabbed to, so a
   focus ring around the whole page would be noise rather than a useful cue. */
.hqt-main:focus { outline: none; }