/* ==========================================================================
   HomeoCentre storefront — hc.css (the only stylesheet)
   Every class is prefixed hc-. Element styles are scoped to body.hc so the
   file can sit next to Bootstrap 4 during migration without fighting it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — change brand colours here (one line each)
   -------------------------------------------------------------------------- */
:root {
  --hc-primary: #0E5A43;
  --hc-primary-700: #0B4A37;
  --hc-primary-800: #093F2F;
  --hc-primary-900: #072F23;
  --hc-tint: #E6F0EB;
  --hc-tint-2: #D3E5DC;
  --hc-accent: #F2A900;
  --hc-accent-600: #D99700;
  --hc-accent-ink: #1C1400;
  --hc-bg: #F7F8F6;
  --hc-canvas: #F2F5F3;          /* product image canvas (photos + placeholder) */
  --hc-surface: #FFFFFF;
  --hc-ink: #16201C;
  --hc-ink-2: #34423C;
  --hc-muted: #5B6A63;
  --hc-line: #DDE3DF;
  --hc-line-2: #C6CFCA;
  --hc-field-border: #84918B;   /* 3.3:1 on white: form control boundaries */
  --hc-focus: var(--hc-primary); /* focus ring on light surfaces */
  --hc-success: #0F7A3D;
  --hc-success-bg: #E5F4EA;
  --hc-danger: #B42318;
  --hc-danger-bg: #FDECEA;
  --hc-confirm-bg: #FFF1B8;
  --hc-confirm-ink: #5C4300;

  --hc-font-ui: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --hc-font-display: "Young Serif", Georgia, "Times New Roman", serif;

  --hc-s1: 0.25rem;  --hc-s2: 0.5rem;  --hc-s3: 0.75rem; --hc-s4: 1rem;
  --hc-s5: 1.5rem; --hc-s6: 2rem; --hc-s7: 3rem; --hc-s8: 4rem;

  --hc-r-sm: 0.5rem;
  --hc-r: 0.625rem;
  --hc-r-lg: 0.875rem;
  --hc-r-pill: 62.4375rem;

  --hc-shadow-1: 0 1px 2px rgba(22, 32, 28, .06), 0 1px 1px rgba(22, 32, 28, .04);
  --hc-shadow-2: 0 0.375rem 1.125rem -0.375rem rgba(14, 40, 30, .18), 0 2px 0.25rem rgba(14, 40, 30, .06);
  --hc-shadow-3: 0 1.125rem 2.5rem -0.75rem rgba(8, 40, 28, .28);

  --hc-ease: cubic-bezier(.2, .7, .2, 1);
  --hc-fast: 160ms;
  --hc-med: 220ms;

  /* Layout: content capped at 1440px and centred; gutters grow fluidly */
  --hc-container: 90rem;
  --hc-gutter: clamp(1rem, 0.55rem + 1.9vw, 1.5rem);

  /* Breakpoints (mobile-first). Media queries cannot read custom properties,
     so these are the canonical values used literally throughout this file
     and mirrored in HC.config.BREAKPOINTS:
       320  floor        360  standard phones      480  large phones
       600  small tablets / foldables open          768  tablets portrait
       1024 tablets landscape / small laptops       1280 laptops     1440 desktops */
  --hc-bp-sm: 360px; --hc-bp-md: 480px; --hc-bp-lg: 600px; --hc-bp-xl: 768px;
  --hc-bp-2xl: 1024px; --hc-bp-3xl: 1280px; --hc-bp-4xl: 1440px;

  /* Safe areas (notched phones) */
  --hc-safe-t: env(safe-area-inset-top, 0px);
  --hc-safe-r: env(safe-area-inset-right, 0px);
  --hc-safe-b: env(safe-area-inset-bottom, 0px);
  --hc-safe-l: env(safe-area-inset-left, 0px);

  /* Sticky offsets — keep these when converting to PHP:
     --hc-tabbar-h      bottom tab bar height (phones only, else 0)
     --hc-buybar-h      sticky bottom bar height on pages that have one (below 1024, else 0)
     --hc-header-offset visible height of the sticky header; written by hc.js
     --hc-bottom-ui     tab bar + bottom bar + safe area (declared on body.hc) */
  --hc-tabbar-h: 0px;
  --hc-buybar-h: 0px;
  --hc-header-offset: 0px;
}
@media (max-width: 767px) { :root { --hc-tabbar-h: 3.75rem; } }
@media (orientation: landscape) and (max-height: 500px) { :root { --hc-tabbar-h: 0px; } }

/* --------------------------------------------------------------------------
   2. SCOPED RESET (inside body.hc only)
   -------------------------------------------------------------------------- */
body.hc {
  margin: 0;
  background: var(--hc-bg);
  color: var(--hc-ink);
  font-family: var(--hc-font-ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:where(body.hc) *, :where(body.hc) *::before, :where(body.hc) *::after { box-sizing: border-box; }
:where(body.hc) img, :where(body.hc) svg { display: block; max-width: 100%; }
:where(body.hc) img { height: auto; }
:where(body.hc) a { color: var(--hc-primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { :where(body.hc) a:hover { text-decoration: underline; text-underline-offset: 3px; } }
:where(body.hc) h1, :where(body.hc) h2, :where(body.hc) h3, :where(body.hc) h4, :where(body.hc) p, :where(body.hc) ul, :where(body.hc) ol, :where(body.hc) figure, :where(body.hc) dl, :where(body.hc) dd { margin: 0; }
:where(body.hc) ul, :where(body.hc) ol { padding: 0; list-style: none; }
:where(body.hc) button, :where(body.hc) input, :where(body.hc) select, :where(body.hc) textarea { font: inherit; color: inherit; }
:where(body.hc) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(body.hc) :focus-visible { outline: 3px solid var(--hc-focus); outline-offset: 2px; border-radius: 0.25rem; }
:where(body.hc) [hidden] { display: none !important; }
:where(body.hc) ::selection { background: var(--hc-tint-2); }
/* The last section never hides behind the tab bar / sticky bar */
body.hc { --hc-bottom-ui: calc(var(--hc-tabbar-h) + var(--hc-buybar-h) + var(--hc-safe-b)); padding-bottom: var(--hc-bottom-ui); }
@media (max-width: 1023px) { body.hc.hc-has-buybar { --hc-buybar-h: 4.5rem; } }
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) { body.hc.hc-has-buybar { --hc-buybar-h: 3.5rem; } }

.hc-num, .hc-price, .hc-money { font-variant-numeric: tabular-nums lining-nums; }
.hc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc-skip { position: absolute; left: 0.5rem; top: -3.75rem; z-index: 1000; background: var(--hc-surface); color: var(--hc-ink); padding: 0.625rem 0.875rem; border-radius: var(--hc-r-sm); box-shadow: var(--hc-shadow-2); }
.hc-skip:focus { top: 0.5rem; }
.hc-container { width: 100%; max-width: var(--hc-container); margin: 0 auto; padding-inline: max(var(--hc-gutter), var(--hc-safe-l)) max(var(--hc-gutter), var(--hc-safe-r)); }

/* Dark surfaces switch the focus ring to saffron (5.9:1 on the header green) */
.hc-util, .hc-mainbar, .hc-nav, .hc-footer, .hc-drawer__head, .hc-cattile--promo, .hc-fab, .hc-carousel { --hc-focus: var(--hc-accent); }
.hc-mega { --hc-focus: var(--hc-primary); }

/* Client-to-confirm highlight: must be caught in review */
.hc-confirm { background: var(--hc-confirm-bg); color: var(--hc-confirm-ink); border-radius: 0.25rem; padding: 0 .3em; font-weight: 600; font-size: .92em; box-decoration-break: clone; -webkit-box-decoration-break: clone; outline: 1px dashed #C99700; }
.hc-proto-note { background: #FFF8DB; border: 1px dashed #C99700; color: var(--hc-confirm-ink); border-radius: var(--hc-r-sm); padding: 0.625rem 0.875rem; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
.hc-display { font-family: var(--hc-font-display); font-weight: 400; letter-spacing: -.005em; line-height: 1.12; }
.hc-h1 { font-family: var(--hc-font-display); font-weight: 400; font-size: clamp(1.625rem, 2.2vw + 1rem, 2.375rem); line-height: 1.15; }
.hc-h2 { font-family: var(--hc-font-display); font-weight: 400; font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem); line-height: 1.2; }
.hc-h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.hc-lead { font-size: 1.0625rem; color: var(--hc-ink-2); max-width: 62ch; }
.hc-muted { color: var(--hc-muted); }
.hc-small { font-size: 0.875rem; }
.hc-xs { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   4. ICONS
   -------------------------------------------------------------------------- */
.hc-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-icon--sm { width: 1rem; height: 1rem; }
.hc-icon--lg { width: 1.75rem; height: 1.75rem; }
.hc-icon--fill { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.625rem 1.125rem; border-radius: var(--hc-r); border: 1.5px solid transparent; font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-align: center; white-space: nowrap; transition: background var(--hc-fast) var(--hc-ease), border-color var(--hc-fast), color var(--hc-fast), box-shadow var(--hc-fast); }
@media (hover: hover) and (pointer: fine) { body.hc .hc-btn:hover { text-decoration: none; } }
.hc-btn--accent { background: var(--hc-accent); color: var(--hc-accent-ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
body.hc .hc-btn--accent { color: var(--hc-accent-ink); }
@media (hover: hover) and (pointer: fine) { .hc-btn--accent:hover { background: var(--hc-accent-600); } }
.hc-btn--primary { background: var(--hc-primary); color: #fff; }
body.hc .hc-btn--primary { color: #fff; }
@media (hover: hover) and (pointer: fine) { .hc-btn--primary:hover { background: var(--hc-primary-800); } }
.hc-btn--outline { background: var(--hc-surface); border-color: var(--hc-primary); color: var(--hc-primary); }
@media (hover: hover) and (pointer: fine) { .hc-btn--outline:hover { background: var(--hc-tint); } }
.hc-btn--ghost { color: var(--hc-primary); padding-left: 0.625rem; padding-right: 0.625rem; }
@media (hover: hover) and (pointer: fine) { .hc-btn--ghost:hover { background: var(--hc-tint); } }
.hc-btn--block { display: flex; width: 100%; }
.hc-btn--lg { min-height: 3.25rem; font-size: 1rem; padding: 0.875rem 1.375rem; }
.hc-btn--sm { min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.hc-btn[disabled], .hc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.hc-iconbtn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--hc-r-pill); color: inherit; transition: background var(--hc-fast); }
@media (hover: hover) and (pointer: fine) { .hc-iconbtn:hover { background: rgba(14, 90, 67, .08); } }

/* --------------------------------------------------------------------------
   6. BADGES
   -------------------------------------------------------------------------- */
.hc-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 0.5rem; border-radius: 0.375rem; font-size: 0.7812rem; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.hc-badge--off { background: var(--hc-success-bg); color: var(--hc-success); }
.hc-badge--rx { background: var(--hc-primary); color: #fff; font-family: var(--hc-font-display); font-weight: 400; letter-spacing: .02em; }
.hc-badge--oos { background: var(--hc-danger-bg); color: var(--hc-danger); }
.hc-badge--new { background: var(--hc-tint); color: var(--hc-primary-800); }
.hc-badge--stock { background: var(--hc-success-bg); color: var(--hc-success); }

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.hc-field { display: grid; gap: 0.375rem; align-content: start; }
.hc-label { font-size: 0.9062rem; font-weight: 600; color: var(--hc-ink-2); }
.hc-label .hc-req { color: var(--hc-danger); margin-left: 2px; }
.hc-label .hc-opt { font-weight: 400; color: var(--hc-muted); }
.hc-input, .hc-select, .hc-textarea { width: 100%; min-height: 2.875rem; padding: 0.625rem 0.875rem; background: var(--hc-surface); border: 1.5px solid var(--hc-field-border); border-radius: var(--hc-r); font-size: 1rem; line-height: 1.4; transition: border-color var(--hc-fast), box-shadow var(--hc-fast); appearance: none; -webkit-appearance: none; }
.hc-textarea { min-height: 6rem; resize: vertical; }
.hc-select { padding-right: 2.375rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2334423C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; }
@media (hover: hover) and (pointer: fine) { .hc-input:hover, .hc-select:hover, .hc-textarea:hover { border-color: var(--hc-muted); } }
body.hc .hc-input:focus, body.hc .hc-select:focus, body.hc .hc-textarea:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 3px rgba(14, 90, 67, .18); }
.hc-input::placeholder, .hc-textarea::placeholder { color: #68756F; }
.hc-field.hc-is-invalid .hc-input, .hc-field.hc-is-invalid .hc-select, .hc-field.hc-is-invalid .hc-textarea, .hc-input.hc-is-invalid { border-color: var(--hc-danger); background: #FFFBFA; }
.hc-error { display: none; align-items: flex-start; gap: 0.375rem; color: var(--hc-danger); font-size: 0.875rem; }
.hc-field.hc-is-invalid .hc-error, .hc-error.hc-is-shown { display: flex; }
.hc-hint { font-size: 0.8438rem; color: var(--hc-muted); }
.hc-form-grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .hc-form-grid--2 { grid-template-columns: 1fr 1fr; } .hc-form-grid .hc-span-2 { grid-column: 1 / -1; } }
.hc-check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.hc-check input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--hc-primary); flex: none; }
.hc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hc-legend { padding: 0; font-weight: 650; font-size: 1rem; margin-bottom: 0.75rem; }

/* Quantity stepper */
.hc-qty { flex: none; display: inline-flex; align-items: stretch; border: 1.5px solid var(--hc-field-border); border-radius: var(--hc-r); background: var(--hc-surface); overflow: hidden; height: calc(2.75rem + 3px); }
.hc-qty button { width: 2.75rem; flex: none; display: grid; place-items: center; color: var(--hc-primary); font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .hc-qty button:hover { background: var(--hc-tint); } }
.hc-qty button[disabled] { color: var(--hc-line-2); cursor: not-allowed; background: none; }
.hc-qty input { width: 2.75rem; border: 0; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; background: transparent; -moz-appearance: textfield; }
.hc-qty input::-webkit-outer-spin-button, .hc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.hc .hc-qty input:focus { outline: none; background: var(--hc-tint); }

/* Radio cards (used by configurator, mode switch, filters, checkout) */
.hc-rcards { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(var(--hc-rcard-min, 5.5rem), 1fr)); }
.hc-rcard { position: relative; display: block; cursor: pointer; }
.hc-rcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hc-rcard__box { display: grid; gap: 2px; align-content: center; min-height: 3rem; height: 100%; padding: 0.625rem 0.75rem; border: 1.5px solid var(--hc-field-border); border-radius: var(--hc-r); background: var(--hc-surface); transition: border-color var(--hc-fast), background var(--hc-fast), box-shadow var(--hc-fast); }
.hc-rcard__title { font-weight: 650; font-size: 0.9688rem; line-height: 1.25; }
.hc-rcard__meta { font-size: 0.8125rem; color: var(--hc-muted); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .hc-rcard:hover .hc-rcard__box { border-color: var(--hc-primary); } }
.hc-rcard input:checked + .hc-rcard__box { border-color: var(--hc-primary); background: var(--hc-tint); box-shadow: inset 0 0 0 1px var(--hc-primary); }
.hc-rcard input:checked + .hc-rcard__box .hc-rcard__title { color: var(--hc-primary-800); }
.hc-rcard input:focus-visible + .hc-rcard__box { outline: 3px solid var(--hc-focus); outline-offset: 2px; }
.hc-rcard input:disabled { cursor: not-allowed; }
.hc-rcard input:disabled + .hc-rcard__box { background: #F1F3F2; border-style: dashed; border-color: var(--hc-line-2); color: #8C9792; box-shadow: none; }
.hc-rcard input:disabled + .hc-rcard__box .hc-rcard__title { text-decoration: line-through; text-decoration-thickness: 1px; color: #8C9792; }
.hc-rcard input:disabled + .hc-rcard__box .hc-rcard__meta { color: #8C9792; }
.hc-rcard--center .hc-rcard__box { text-align: center; justify-items: center; }

/* File drop-zone */
.hc-drop { position: relative; display: grid; place-items: center; gap: 0.5rem; text-align: center; padding: 1.75rem 1rem; border: 2px dashed var(--hc-line-2); border-radius: var(--hc-r-lg); background: var(--hc-surface); transition: border-color var(--hc-fast), background var(--hc-fast); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hc-drop:hover, .hc-drop.hc-is-dragover { border-color: var(--hc-primary); background: var(--hc-tint); } }
.hc-drop:focus-within { outline: 3px solid var(--hc-focus); outline-offset: 2px; }
.hc-drop.hc-is-invalid { border-color: var(--hc-danger); background: #FFFBFA; }
.hc-drop__icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--hc-tint); color: var(--hc-primary); }
.hc-drop__title { font-weight: 650; }
.hc-drop__browse { color: var(--hc-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hc-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.hc-file { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1.5px solid var(--hc-primary); border-radius: var(--hc-r-lg); background: var(--hc-tint); }
.hc-file__thumb { width: 3.5rem; height: 3.5rem; border-radius: var(--hc-r-sm); object-fit: cover; background: var(--hc-surface); border: 1px solid var(--hc-line); display: grid; place-items: center; color: var(--hc-primary); flex: none; overflow: hidden; }
.hc-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hc-file__name { font-weight: 600; word-break: break-all; line-height: 1.3; }
.hc-file__body { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   8. ANNOUNCEMENT + HEADER
   Below 768: burger · logo · cart / full-width search / slim "Deliver to" bar.
   768–1023: condensed header (logo · deliver · actions / search) + scrolling nav strip.
   1024+: one row + utility bar + nav strip.
   The header is sticky, slides away while scrolling down and comes back on
   scroll up. hc.js writes its visible height to --hc-header-offset.
   -------------------------------------------------------------------------- */
.hc-announce { background: var(--hc-tint); color: var(--hc-primary-900); font-size: 0.875rem; }
.hc-announce__inner { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.25rem; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: center; }
.hc-announce svg { color: var(--hc-primary); flex: none; }

.hc-header { position: sticky; top: 0; z-index: 50; transition: transform var(--hc-med) var(--hc-ease); }
.hc-header.hc-is-hidden { transform: translateY(-100%); }
.hc-util { background: var(--hc-primary-900); color: #CFE2D8; font-size: 0.8438rem; display: none; }
.hc-util__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 2.125rem; }
.hc-util a { color: #fff; display: inline-flex; align-items: center; gap: 0.375rem; }
.hc-util__offer { margin-left: auto; color: #E8F1EC; }
@media (min-width: 1024px) { .hc-util { display: block; } }

.hc-mainbar { background: var(--hc-primary-800); color: #fff; padding-top: var(--hc-safe-t); }
.hc-mainbar__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "burger logo actions" "search search search" "deliver deliver deliver"; align-items: center; column-gap: 0.25rem; row-gap: 0.25rem; padding-top: 0.25rem; padding-bottom: 0.125rem; }
.hc-burger { grid-area: burger; color: #fff; margin-left: -0.5rem; }
.hc-logo { grid-area: logo; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: #fff; min-width: 0; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-logo:hover { text-decoration: none; } }
.hc-logo img { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; flex: none; }
.hc-logo__word { display: grid; line-height: 1.05; min-width: 0; }
.hc-logo__name { font-family: var(--hc-font-display); font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-logo__tag { font-size: 0.75rem; color: #B9D3C6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .hc-logo__tag { display: none; } }
.hc-deliver { grid-area: deliver; display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; color: #DCEBE3; font-size: 0.8438rem; border-radius: var(--hc-r-sm); padding: 0.125rem 0.375rem; margin-left: -0.375rem; text-align: left; justify-self: start; max-width: 100%; }
@media (hover: hover) and (pointer: fine) { .hc-deliver:hover { background: rgba(255, 255, 255, .08); } }
.hc-deliver strong { color: #fff; font-weight: 650; }
.hc-deliver__lines { display: flex; gap: 0.25rem; align-items: baseline; min-width: 0; white-space: nowrap; }
.hc-search { grid-area: search; display: flex; align-items: stretch; height: 2.875rem; border-radius: var(--hc-r); background: #fff; overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--hc-fast); min-width: 0; }
.hc-search:focus-within { box-shadow: 0 0 0 3px var(--hc-accent); }
.hc-search__cat { display: none; color: var(--hc-ink-2); border: 0; border-right: 1px solid var(--hc-line); background: #F1F4F2; font-size: 0.875rem; padding: 0 1.875rem 0 0.75rem; max-width: 10.625rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2334423C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; }
body.hc .hc-search__cat:focus { outline: none; background-color: var(--hc-tint); }
.hc-search__input { flex: 1; min-width: 0; border: 0; padding: 0 0.875rem; font-size: 1rem; color: var(--hc-ink); background: #fff; }
body.hc .hc-search__input:focus { outline: none; }
.hc-search__btn { width: 3.25rem; flex: none; background: var(--hc-accent); color: var(--hc-accent-ink); display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .hc-search__btn:hover { background: var(--hc-accent-600); } }
.hc-actions { grid-area: actions; display: flex; align-items: center; gap: 2px; }
.hc-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; color: #fff; padding: 0.375rem 0.5rem; border-radius: var(--hc-r-sm); min-height: 2.75rem; min-width: 2.75rem; }
body.hc .hc-action { color: #fff; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-action:hover { text-decoration: none; background: rgba(255, 255, 255, .08); } }
.hc-action__text { display: none; line-height: 1.15; font-size: 0.8125rem; color: #CFE2D8; white-space: nowrap; }
.hc-action__text strong { display: block; color: #fff; font-size: 0.9062rem; font-weight: 650; }
.hc-action--wish, .hc-action--account { display: none; }
.hc-count { position: absolute; top: 2px; left: 1.375rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; border-radius: 0.625rem; background: var(--hc-accent); color: var(--hc-accent-ink); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.hc-count.hc-is-bump { animation: hc-bump var(--hc-med) var(--hc-ease); }
@keyframes hc-bump { 50% { transform: scale(1.25); } }

@media (min-width: 768px) {
  .hc-burger { display: none; }
  .hc-mainbar__inner { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo deliver . actions" "search search search search"; column-gap: 0.75rem; row-gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.625rem; }
  .hc-deliver { display: grid; gap: 0; line-height: 1.2; margin-left: 0.25rem; min-height: 2.75rem; }
  .hc-deliver__lines { display: grid; gap: 0; }
  .hc-action--wish, .hc-action--account { display: inline-flex; }
  .hc-logo img { width: 2.875rem; height: 2.875rem; }
}
@media (min-width: 1024px) {
  .hc-mainbar__inner { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo deliver search actions"; column-gap: clamp(0.75rem, 0.2rem + 1.2vw, 1.125rem); padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .hc-logo img { width: 3.25rem; height: 3.25rem; }
  .hc-search__cat { display: block; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .hc-logo__tag { display: none; } .hc-search__cat { max-width: 8rem; } }
@media (min-width: 1280px) {
  .hc-action__text { display: block; }
  .hc-count { position: static; margin-left: -0.25rem; }
  .hc-action--cart .hc-count { position: absolute; top: 0; left: 1.25rem; }
}

/* Nav strip: tablets and up. Scrolls sideways if it does not fit. */
.hc-nav { position: relative; background: var(--hc-primary); color: #fff; display: none; }
.hc-nav > .hc-container { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.hc-nav > .hc-container::-webkit-scrollbar { display: none; }
.hc-nav__inner { display: flex; align-items: stretch; gap: 2px; min-height: 2.75rem; }
.hc-nav__item { position: static; display: flex; flex: none; }
.hc-nav__link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.875rem; color: #fff; font-weight: 600; font-size: 0.9375rem; border-radius: 0; position: relative; white-space: nowrap; min-height: 2.75rem; }
body.hc .hc-nav__link { color: #fff; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-nav__link:hover { text-decoration: none; background: rgba(255, 255, 255, .1); } }
.hc-nav__link .hc-icon { width: 0.875rem; height: 0.875rem; transition: transform var(--hc-fast); }
.hc-nav__link[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.hc-nav__link[aria-expanded="true"] .hc-icon { transform: rotate(180deg); }
.hc-nav__link--active::after { content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--hc-accent); }
.hc-nav__quick { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 0.875rem; flex: none; }
.hc-nav__quick a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #DCEBE3; padding: 0 0.625rem; border-radius: var(--hc-r-sm); white-space: nowrap; }
body.hc .hc-nav__quick a { color: #DCEBE3; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-nav__quick a:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; } }
@media (min-width: 768px) { .hc-nav { display: block; } }
@media (max-width: 1179px) { .hc-nav__quick { display: none; } }

/* Mega menus */
.hc-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--hc-surface); color: var(--hc-ink); border-top: 1px solid var(--hc-line); box-shadow: var(--hc-shadow-3); max-height: calc(100dvh - var(--hc-header-offset, 0px)); overflow-y: auto; }
.hc-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.75rem; }
@media (min-width: 1024px) { .hc-mega__inner { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; padding-top: 1.75rem; padding-bottom: 2rem; } }
.hc-mega__title { font-family: var(--hc-font-display); font-size: 1.25rem; margin-bottom: 0.875rem; }
.hc-mega__list { columns: 3 12.5rem; column-gap: 1.5rem; }
.hc-mega__list li { break-inside: avoid; }
.hc-mega__list a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.375rem 0.625rem; margin: 0 -0.625rem; border-radius: var(--hc-r-sm); color: var(--hc-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-mega__list a:hover { background: var(--hc-tint); text-decoration: none; color: var(--hc-primary-800); } }
.hc-mega__list small { display: block; font-weight: 400; color: var(--hc-muted); font-size: 0.8125rem; }
.hc-mega__mark { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--hc-tint); color: var(--hc-primary); display: grid; place-items: center; flex: none; font-family: var(--hc-font-display); font-size: 1.0625rem; }
.hc-mega__group { break-inside: avoid; margin-bottom: 0.5rem; color: var(--hc-muted); font-size: 0.8125rem; font-weight: 600; }
.hc-mega__aside { background: var(--hc-tint); border-radius: var(--hc-r-lg); padding: 1.25rem; display: grid; gap: 0.625rem; align-content: start; }
.hc-mega__aside p { color: var(--hc-ink-2); font-size: 0.9375rem; }
.hc-mega__all { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; margin-top: 0.5rem; font-weight: 650; }

/* Deliver-to popover */
.hc-pop { position: absolute; z-index: 80; width: min(21.25rem, calc(100vw - 2rem)); background: var(--hc-surface); color: var(--hc-ink); border-radius: var(--hc-r-lg); box-shadow: var(--hc-shadow-3); padding: 1.125rem; border: 1px solid var(--hc-line); }
.hc-pop__title { font-weight: 650; margin-bottom: 0.25rem; }
.hc-pop__row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.hc-pop__row .hc-input { flex: 1; min-width: 0; }

/* Mobile drawer (below 768) */
.hc-drawer { position: fixed; inset: 0; z-index: 200; display: flex; visibility: hidden; }
.hc-drawer.hc-is-open { visibility: visible; }
.hc-drawer__scrim { position: absolute; inset: 0; background: rgba(7, 30, 22, .5); opacity: 0; transition: opacity var(--hc-med) var(--hc-ease); }
.hc-drawer.hc-is-open .hc-drawer__scrim { opacity: 1; }
.hc-drawer__panel { position: relative; width: min(21.25rem, 88vw); height: 100dvh; background: var(--hc-surface); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform var(--hc-med) var(--hc-ease); display: flex; flex-direction: column; padding-left: var(--hc-safe-l); padding-bottom: var(--hc-safe-b); }
.hc-drawer.hc-is-open .hc-drawer__panel { transform: none; }
.hc-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: calc(0.75rem + var(--hc-safe-t)) 0.5rem 0.75rem 1rem; background: var(--hc-primary-800); color: #fff; }
.hc-drawer__hello { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-weight: 650; color: #fff; }
body.hc .hc-drawer__hello { color: #fff; }
.hc-drawer__nav { padding: 0.5rem 0; }
.hc-drawer__nav > li > a, .hc-drawer__nav summary { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; font-weight: 600; color: var(--hc-ink); cursor: pointer; list-style: none; min-height: 3rem; }
.hc-drawer__nav summary::-webkit-details-marker { display: none; }
.hc-drawer__nav details summary .hc-icon { transition: transform var(--hc-fast); }
.hc-drawer__nav details[open] summary .hc-icon { transform: rotate(180deg); }
.hc-drawer__nav details ul { padding: 0 0 0.5rem; }
.hc-drawer__nav details a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.375rem 1.25rem 0.375rem 2.25rem; color: var(--hc-ink-2); }
.hc-drawer__nav [aria-current="page"] { color: var(--hc-primary); box-shadow: inset 4px 0 0 var(--hc-primary); }
.hc-drawer__foot { margin-top: auto; padding: 0.75rem 1.25rem 1.25rem; border-top: 1px solid var(--hc-line); display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.hc-drawer__foot a { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }

/* Bottom tab bar (below 768) */
.hc-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: calc(var(--hc-tabbar-h) + var(--hc-safe-b)); background: var(--hc-surface); border-top: 1px solid var(--hc-line); display: none; grid-template-columns: repeat(5, 1fr); padding: 0 var(--hc-safe-r) var(--hc-safe-b) var(--hc-safe-l); }
@media (max-width: 767px) { .hc-tabbar { display: grid; } }
.hc-tabbar a, .hc-tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 2.75rem; font-size: 0.7188rem; font-weight: 600; color: var(--hc-muted); }
body.hc .hc-tabbar a { color: var(--hc-muted); }
@media (hover: hover) and (pointer: fine) { body.hc .hc-tabbar a:hover { text-decoration: none; } }
body.hc .hc-tabbar [aria-current="page"] { color: var(--hc-primary); }
.hc-tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--hc-primary); }
.hc-tabbar .hc-count { top: 0.25rem; left: calc(50% + 0.25rem); }

/* Floating call button.
   Phones: 44px, sits above the tab bar / sticky bar using the safe-area offset.
   Hidden while a sticky buy bar is showing, while any drawer/sheet/modal is
   open, while the keyboard is up, while a toast is showing, and whenever
   hc.js detects it would sit on top of a button or field (hc-is-avoiding). */
.hc-fab { position: fixed; right: max(1rem, var(--hc-safe-r)); bottom: calc(var(--hc-bottom-ui) + 1rem); z-index: 85; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3.25rem; padding: 0 1.125rem 0 1rem; border-radius: var(--hc-r-pill); background: var(--hc-primary); color: #fff; font-weight: 650; box-shadow: var(--hc-shadow-3); transition: opacity var(--hc-fast), transform var(--hc-fast), visibility 0s linear 0s; }
body.hc .hc-fab { color: #fff; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-fab:hover { background: var(--hc-primary-800); text-decoration: none; } }
.hc-fab__text { display: none; }
@media (min-width: 768px) { .hc-fab__text { display: inline; } }
@media (max-width: 767px) {
  .hc-fab { width: 2.75rem; height: 2.75rem; padding: 0; right: max(0.75rem, var(--hc-safe-r)); bottom: calc(var(--hc-bottom-ui) + 0.75rem); }
  .hc-fab .hc-icon { width: 1.125rem; height: 1.125rem; }
}
.hc-fab.hc-is-avoiding, .hc-is-locked .hc-fab, body.hc-is-typing .hc-fab, body.hc-bar-on .hc-fab, body.hc-has-toast .hc-fab { opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none; transition: opacity 90ms, transform 90ms, visibility 0s linear 90ms; }

/* --------------------------------------------------------------------------
   9. LAYOUT HELPERS / SECTIONS
   -------------------------------------------------------------------------- */
.hc-main { display: block; min-height: 50vh; }
.hc-section { padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); padding-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.hc-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.125rem; }
.hc-sechead > div { min-width: 0; }
.hc-sechead p { color: var(--hc-muted); margin-top: 0.25rem; font-size: 0.9375rem; }
.hc-seeall { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; font-weight: 650; white-space: nowrap; font-size: 0.9375rem; }
.hc-panel { background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); }
.hc-panel--pad { padding: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); }
.hc-stack > * + * { margin-top: 1rem; }
.hc-row { display: flex; align-items: center; gap: 0.75rem; }
.hc-row--between { justify-content: space-between; }
.hc-divider { border: 0; border-top: 1px solid var(--hc-line); margin: 1rem 0; }

/* Breadcrumb */
.hc-crumbs { padding-top: 0.5rem; padding-bottom: 0.125rem; font-size: 0.875rem; color: var(--hc-muted); }
.hc-crumbs ol { display: flex; flex-wrap: wrap; column-gap: 0.25rem; align-items: center; }
.hc-crumbs li { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.hc-crumbs li + li::before { content: ""; width: 0.375rem; height: 0.375rem; border-right: 1.5px solid var(--hc-line-2); border-top: 1.5px solid var(--hc-line-2); transform: rotate(45deg); margin: 0 0.375rem 0 2px; flex: none; }
.hc-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; color: var(--hc-ink-2); }
.hc-crumbs [aria-current] { color: var(--hc-ink); font-weight: 600; overflow-wrap: anywhere; }

/* Page title */
.hc-pagehead { padding-top: 0.25rem; padding-bottom: 1rem; }
.hc-pagehead p { margin-top: 0.375rem; color: var(--hc-muted); }

/* --------------------------------------------------------------------------
   10. HERO CAROUSEL + CATEGORY TILES
   Slide type 1 (.hc-slide--text): <picture> art slot + live HTML headline,
   sub-line and CTA, so the copy reflows at every width.
   Slide type 2 (.hc-slide--image): image-only <picture> (desktop 1920×600,
   mobile 900×675). See the commented example in index.html.
   -------------------------------------------------------------------------- */
.hc-hero { position: relative; background: var(--hc-bg); }
.hc-carousel { position: relative; overflow: hidden; }
.hc-carousel__track { display: flex; transition: transform 450ms var(--hc-ease); will-change: transform; }
.hc-carousel__slide { flex: 0 0 100%; position: relative; min-width: 0; }

.hc-slide--text { display: grid; grid-template-rows: auto 1fr; background: var(--hc-slide-bg, var(--hc-tint)); }
.hc-slide__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.hc-slide__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hc-art-pos, 65% 50%); }
.hc-slide__content { position: relative; z-index: 1; display: grid; gap: 0.75rem; align-content: center; justify-items: start; padding-top: 1.25rem; padding-bottom: 3.5rem; }
.hc-slide__title { font-family: var(--hc-font-display); font-weight: 400; font-size: clamp(1.625rem, 1.05rem + 2.6vw, 3.125rem); line-height: 1.08; color: var(--hc-ink); max-width: 17ch; text-wrap: balance; overflow-wrap: anywhere; }
.hc-slide__text { font-size: clamp(0.9375rem, 0.86rem + 0.35vw, 1.125rem); color: var(--hc-ink-2); max-width: 44ch; }
.hc-slide__ctas { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.25rem; }
.hc-slide__supply { position: absolute; top: 0.625rem; right: max(0.625rem, var(--hc-safe-r)); z-index: 2; font-size: 0.75rem; }
@media (max-width: 359px) { .hc-slide__ctas .hc-btn { flex: 1 1 100%; } }
@media (min-width: 768px) {
  .hc-slide--text { display: block; height: clamp(22rem, 31.25vw, 37.5rem); }
  .hc-slide__art { position: absolute; inset: 0; aspect-ratio: auto; }
  /* Legibility scrim for real photography; harmless on the placeholder art */
  .hc-slide__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hc-slide-bg, var(--hc-tint)) 0%, var(--hc-slide-bg, var(--hc-tint)) 30%, transparent 64%); }
  .hc-slide__content { height: 100%; padding-top: 2rem; padding-bottom: 3rem; }
  .hc-slide__content > * { max-width: min(34rem, 55%); }
}
@media (min-width: 1024px) {
  .hc-slide__content { padding-bottom: 7.5rem; padding-inline: max(var(--hc-gutter), 5rem); } /* room for the overlapping tiles and the arrows */
}

.hc-slide--image picture, .hc-slide--image img { display: block; width: 100%; }
.hc-slide--image img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--hc-pos-m, 50% 50%); }
@media (min-width: 768px) { .hc-slide--image img { aspect-ratio: 1920 / 600; object-position: var(--hc-pos, 50% 50%); } }

.hc-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 3rem; height: 4.5rem; display: none; place-items: center; background: rgba(255, 255, 255, .9); color: var(--hc-ink); border-radius: var(--hc-r); box-shadow: var(--hc-shadow-2); }
@media (hover: hover) and (pointer: fine) { .hc-carousel__arrow:hover { background: #fff; } }
.hc-carousel__arrow--prev { left: max(1rem, var(--hc-safe-l)); }
.hc-carousel__arrow--next { right: max(1rem, var(--hc-safe-r)); }
@media (min-width: 1024px) { .hc-carousel__arrow { display: grid; top: 40%; } }
.hc-carousel__dots { position: absolute; left: 0; right: 0; bottom: 0.25rem; z-index: 3; display: flex; justify-content: center; gap: 0; }
.hc-carousel__dot { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.hc-carousel__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(14, 90, 67, .35); transition: width var(--hc-fast), background var(--hc-fast); }
.hc-carousel__dot[aria-current="true"]::before { width: 1.375rem; border-radius: 0.25rem; background: var(--hc-primary); }
@media (min-width: 1024px) { .hc-carousel__dots { bottom: 6rem; } }
.hc-carousel__pause { position: absolute; z-index: 3; right: max(0.5rem, var(--hc-safe-r)); bottom: 0.25rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--hc-primary-900); }
.hc-carousel__pause::before { content: ""; position: absolute; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: var(--hc-shadow-1); }
.hc-carousel__pause .hc-icon { position: relative; }
@media (min-width: 1024px) { .hc-carousel__pause { bottom: 6rem; right: max(1.25rem, var(--hc-safe-r)); } }

/* Category tiles: swipe row below 600, grid from 600, cards overlapping the hero from 1024.
   Each tile is a container: it switches to the card layout once it is 11rem wide. */
.hc-cattiles { position: relative; z-index: 4; margin-top: 1rem; }
@media (min-width: 1024px) { .hc-cattiles { margin-top: -5.5rem; } }
.hc-cattiles__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 5.75rem; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 0.25rem; }
.hc-cattiles__grid::-webkit-scrollbar { display: none; }
.hc-cattiles__grid > li { container: hc-tile / inline-size; scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .hc-cattiles__grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; overflow: visible; } }
@media (min-width: 1024px) { .hc-cattiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 1rem; } }
.hc-cattile { display: grid; justify-items: center; align-content: start; gap: 0.5rem; height: 100%; padding-block: 0.25rem; text-align: center; color: var(--hc-ink); }
@media (hover: hover) and (pointer: fine) { body.hc .hc-cattile:hover { text-decoration: none; } }
.hc-cattile__icon { width: 4rem; height: 4rem; border-radius: 50%; background: var(--hc-surface); border: 1px solid var(--hc-line); display: grid; place-items: center; color: var(--hc-primary); box-shadow: var(--hc-shadow-1); }
.hc-cattile__icon .hc-icon { width: 1.875rem; height: 1.875rem; stroke-width: 1.5; }
.hc-cattile__name { font-weight: 650; font-size: 0.8438rem; line-height: 1.25; overflow-wrap: anywhere; }
.hc-cattile__meta, .hc-cattile__go { display: none; }
.hc-cattile--promo, .hc-cattile--promo-wrap { display: none; }
@container hc-tile (min-width: 11rem) {
  .hc-cattile { justify-items: start; text-align: left; background: var(--hc-surface); border-radius: var(--hc-r-lg); padding: 1.25rem; box-shadow: var(--hc-shadow-2); min-height: 11.5rem; border: 1px solid var(--hc-line); }
  .hc-cattile__icon { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; background: var(--hc-tint); border: 0; box-shadow: none; }
  .hc-cattile__name { font-family: var(--hc-font-display); font-weight: 400; font-size: 1.25rem; margin-top: 0.5rem; }
  .hc-cattile__meta { display: block; color: var(--hc-muted); font-size: 0.875rem; }
  .hc-cattile__go { margin-top: auto; font-weight: 650; color: var(--hc-primary); font-size: 0.9062rem; display: inline-flex; align-items: center; gap: 0.25rem; }
  @media (hover: hover) and (pointer: fine) { .hc-cattile:hover { border-color: var(--hc-primary); } .hc-cattile:hover .hc-cattile__go { text-decoration: underline; text-underline-offset: 3px; } }
  .hc-cattile--promo { display: grid; background: var(--hc-primary); color: #fff; border-color: var(--hc-primary); }
  .hc-cattile--promo .hc-cattile__name { color: #fff; }
  .hc-cattile--promo .hc-cattile__meta { color: #CFE2D8; }
  .hc-cattile--promo .hc-cattile__icon { background: rgba(255,255,255,.12); color: #fff; }
  .hc-cattile--promo .hc-cattile__go { color: var(--hc-accent); }
}
@media (min-width: 1024px) { .hc-cattile--promo-wrap { display: block; } }

/* --------------------------------------------------------------------------
   11. ORDER YOUR WAY band (the one place the dispensing-label motif lives)
   1 column on phones, intro + 2 cards on tablets, full row on desktop.
   -------------------------------------------------------------------------- */
.hc-ways { display: grid; gap: 1rem; }
@media (min-width: 600px) { .hc-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-ways__intro { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .hc-ways { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; } .hc-ways__intro { grid-column: auto; } }
.hc-ways__intro { padding: 0.25rem 0; display: grid; align-content: center; gap: 0.625rem; }
.hc-ways__intro p { color: var(--hc-ink-2); max-width: 44ch; }
.hc-label-card { position: relative; background: var(--hc-surface); border: 1.5px solid var(--hc-primary); border-radius: var(--hc-r-lg); padding: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem); display: grid; gap: 0.875rem; align-content: start; min-width: 0; }
.hc-label-card::before { content: ""; position: absolute; inset: 0.3125rem; border: 1px solid var(--hc-tint-2); border-radius: 0.625rem; pointer-events: none; }
.hc-label-card__head { display: flex; align-items: center; gap: 0.75rem; }
.hc-label-card__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--hc-primary); color: #fff; display: grid; place-items: center; font-family: var(--hc-font-display); font-size: 1.25rem; flex: none; }
.hc-label-card__title { font-family: var(--hc-font-display); font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.375rem); line-height: 1.2; }
.hc-label-card__steps { display: grid; gap: 0; counter-reset: hcstep; border-top: 1px dashed var(--hc-line-2); }
.hc-label-card__steps li { counter-increment: hcstep; display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); gap: 0.625rem; padding: 0.5625rem 0; border-bottom: 1px dashed var(--hc-line-2); font-size: 0.9375rem; color: var(--hc-ink-2); }
.hc-label-card__steps li::before { content: counter(hcstep); width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--hc-primary); color: var(--hc-primary); font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.hc-label-card .hc-btn { justify-self: start; margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   12. PRODUCT CARD
   -------------------------------------------------------------------------- */
/* The card is its own container: everything inside sizes to the card width
   (2-up phone grid about 140px, rail 160-260px, 5-up desktop grid about 250px). */
.hc-card { container: hc-card / inline-size; position: relative; display: flex; flex-direction: column; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); overflow: hidden; min-width: 0; height: 100%; transition: box-shadow var(--hc-med) var(--hc-ease), transform var(--hc-med) var(--hc-ease), border-color var(--hc-med); }
@media (hover: hover) and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { .hc-card:hover { box-shadow: var(--hc-shadow-2); transform: translateY(-2px); border-color: var(--hc-line-2); } }
}
/* One canvas for real photos and the fallback placeholder */
.hc-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--hc-canvas); border-bottom: 1px solid var(--hc-line); }
.hc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; background: var(--hc-canvas); }
.hc-card__badges { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 2; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; pointer-events: none; }
.hc-card__badges .hc-badge { font-size: clamp(0.6875rem, 0.55rem + 2.2cqi, 0.78rem); padding: 0.0625rem 0.4rem; }
/* 44px hit area, smaller visual circle that scales with the card */
.hc-card__wish { position: absolute; right: 0.125rem; top: 0.125rem; z-index: 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--hc-ink-2); transition: color var(--hc-fast); }
.hc-card__wish::before { content: ""; position: absolute; width: clamp(1.875rem, 1.2rem + 7cqi, 2.375rem); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: var(--hc-shadow-1); }
.hc-card__wish .hc-icon { position: relative; width: clamp(1rem, 0.7rem + 3cqi, 1.25rem); height: clamp(1rem, 0.7rem + 3cqi, 1.25rem); }
@media (hover: hover) and (pointer: fine) { .hc-card__wish:hover { color: var(--hc-danger); } }
.hc-card__wish[aria-pressed="true"] { color: var(--hc-danger); }
.hc-card__wish[aria-pressed="true"] .hc-icon { fill: currentColor; }

.hc-card__body { display: flex; flex-direction: column; gap: 0.25rem; padding: clamp(0.625rem, 0.3rem + 4cqi, 1rem) clamp(0.625rem, 0.3rem + 4cqi, 1rem) clamp(0.75rem, 0.4rem + 4cqi, 1rem); flex: 1; min-width: 0; }
.hc-card__cat { font-size: clamp(0.75rem, 0.65rem + 1.4cqi, 0.8125rem); color: var(--hc-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Name always reserves two lines so prices and buttons line up across a row */
.hc-card__name { font-size: clamp(0.875rem, 0.75rem + 2cqi, 1rem); font-weight: 600; line-height: 1.3; color: var(--hc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.6em; overflow-wrap: anywhere; hyphens: auto; }
body.hc .hc-card__name a { color: inherit; }
.hc-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.hc-card__mfr { font-size: clamp(0.78rem, 0.68rem + 1.4cqi, 0.875rem); color: var(--hc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-card__price { margin-top: 0.375rem; }
.hc-card__price .hc-price__now { font-size: clamp(1.125rem, 0.75rem + 6cqi, 1.5rem); }
.hc-card__price .hc-price__was { font-size: clamp(0.72rem, 0.6rem + 1.6cqi, 0.8125rem); }
.hc-card__ship { font-size: clamp(0.75rem, 0.66rem + 1.2cqi, 0.8125rem); color: var(--hc-muted); display: flex; gap: 0.3rem; align-items: center; white-space: nowrap; min-width: 0; margin-top: 0.125rem; }
.hc-card__ship .hc-icon { flex: none; }
.hc-card__ship-text { overflow: hidden; text-overflow: ellipsis; }
.hc-card__cta { margin-top: auto; padding-top: 0.625rem; position: relative; z-index: 1; }
/* Label size follows the card width (fits a 2-up 320px grid and a 130% system font without wrapping) */
.hc-card__cta .hc-btn { width: 100%; min-height: 2.75rem; white-space: nowrap; font-size: min(0.9375rem, calc(10.4cqi - 0.1rem)); padding-inline: clamp(0.375rem, 0.1rem + 3.5cqi, 1rem); gap: 0.375rem; }
.hc-card .hc-card__cta-add { display: none; }
.hc-card--quickadd .hc-card__cta-choose { display: none; }
.hc-card--quickadd .hc-card__cta-add { display: flex; }
.hc-card__rating { display: none; } /* reserved: ratings slot (no reviews system yet) */

/* Narrow cards (2-up phone grid, up to about 200px) */
@container hc-card (max-width: 12.5rem) {
  .hc-card__ship { display: none; }  /* would not fit on one line */
  .hc-price__mrp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* "M.R.P:" kept for screen readers */
  .hc-card__cta-add .hc-icon { display: none; }
}

/* Price block (shared by cards, product page, cart) */
.hc-price { display: grid; gap: 0.125rem; min-width: 0; }
.hc-price__now { display: flex; align-items: flex-start; gap: 0.125rem; font-size: 1.5rem; font-weight: 650; line-height: 1; color: var(--hc-ink); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.hc-price__from { font-size: 0.75rem; font-weight: 500; color: var(--hc-muted); align-self: center; margin-right: 0.25rem; letter-spacing: 0; }
.hc-price__cur { font-size: .55em; margin-top: .14em; font-weight: 600; }
/* MRP and % off share one line; a very long price breaks between the two parts, never inside them */
.hc-price__was { display: flex; flex-wrap: wrap; column-gap: 0.3em; font-size: 0.8125rem; color: var(--hc-muted); line-height: 1.35; }
.hc-price__mrp, .hc-price__off { white-space: nowrap; }
.hc-price__was s { text-decoration-thickness: 1px; }
.hc-price__off { color: var(--hc-success); font-weight: 650; }
.hc-price--lg .hc-price__now { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.125rem); }
.hc-price--lg .hc-price__was { font-size: 0.9rem; }

/* Image fallback: same canvas and framing as a real photo */
.hc-img--fallback { background: var(--hc-canvas); }

/* --------------------------------------------------------------------------
   13. RAIL + GRID
   -------------------------------------------------------------------------- */
.hc-rail { position: relative; }
/* Cards per view: about 2.2 phones, 3.3 small tablets, 4.3 laptops, 5.3 desktops; the partial card is the scroll hint */
.hc-rail__track { --hc-rail-gap: 0.75rem; --hc-rail-n: 2.2; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--hc-rail-n) - 1) * var(--hc-rail-gap)) / var(--hc-rail-n)); gap: var(--hc-rail-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 0.75rem; margin: 0 -2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hc-rail__track::-webkit-scrollbar { display: none; }
.hc-rail__track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .hc-rail__track { --hc-rail-n: 3.3; --hc-rail-gap: 0.875rem; } }
@media (min-width: 1024px) { .hc-rail__track { --hc-rail-n: 4.3; --hc-rail-gap: 1rem; } }
@media (min-width: 1440px) { .hc-rail__track { --hc-rail-n: 5.3; } }
.hc-rail__btn { position: absolute; top: 38%; z-index: 5; width: 2.75rem; height: 4rem; border-radius: var(--hc-r); background: var(--hc-surface); border: 1px solid var(--hc-line); box-shadow: var(--hc-shadow-2); display: none; place-items: center; color: var(--hc-ink); }
@media (hover: hover) and (pointer: fine) { .hc-rail__btn:hover { border-color: var(--hc-primary); color: var(--hc-primary); } }
.hc-rail__btn[disabled] { opacity: 0; pointer-events: none; }
.hc-rail__btn--prev { left: -0.875rem; }
.hc-rail__btn--next { right: -0.875rem; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .hc-rail__btn { display: grid; } }

.hc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.hc-grid > li { min-width: 0; }
@media (min-width: 360px) { .hc-grid { gap: 0.75rem; } }
@media (min-width: 600px) { .hc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; } }
@media (min-width: 1024px) { .hc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1440px) { .hc-grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   14. MANUFACTURER TILES, TRUST, TESTIMONIALS
   Brand and trust tiles are containers (they adapt to their own width).
   -------------------------------------------------------------------------- */
.hc-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 600px) { .hc-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.hc-brands > li { container: hc-brand / inline-size; min-width: 0; }
.hc-brand { display: grid; align-content: center; justify-items: start; gap: 0.375rem; height: 100%; min-height: 6.5rem; padding: clamp(0.875rem, 0.4rem + 6cqi, 1.25rem); background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); color: var(--hc-ink); transition: border-color var(--hc-fast); }
@media (hover: hover) and (pointer: fine) { body.hc .hc-brand:hover { text-decoration: none; border-color: var(--hc-primary); } }
.hc-brand__logo { max-height: 2.75rem; width: auto; }
.hc-brand__word { font-family: var(--hc-font-display); font-size: clamp(1.0625rem, 0.75rem + 5cqi, 1.3125rem); line-height: 1.15; color: var(--hc-primary-800); overflow-wrap: anywhere; }
.hc-brand__meta { font-size: 0.8438rem; color: var(--hc-muted); display: inline-flex; gap: 0.25rem; align-items: center; }

.hc-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--hc-line); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); overflow: hidden; }
@media (min-width: 600px) { .hc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hc-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-trust > li { container: hc-trust / inline-size; background: var(--hc-surface); min-width: 0; }
.hc-trust__item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; height: 100%; }
@container hc-trust (max-width: 13rem) { .hc-trust__item { flex-direction: column; gap: 0.5rem; } }
.hc-trust__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--hc-tint); color: var(--hc-primary); display: grid; place-items: center; flex: none; }
.hc-trust__title { font-weight: 650; font-size: 0.9375rem; line-height: 1.3; }
.hc-trust__text { font-size: 0.8438rem; color: var(--hc-muted); margin-top: 2px; }

.hc-quote { display: flex; flex-direction: column; gap: 0.875rem; height: 100%; margin: 0; padding: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem); background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); }
.hc-quote__mark { font-family: var(--hc-font-display); font-size: 2.75rem; line-height: .6; color: var(--hc-primary); height: 1.125rem; }
.hc-quote blockquote { margin: 0; font-size: 0.9688rem; color: var(--hc-ink-2); line-height: 1.55; }
.hc-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 0.625rem; }
.hc-quote__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--hc-tint); color: var(--hc-primary-800); display: grid; place-items: center; font-weight: 700; font-size: 0.9375rem; flex: none; }
.hc-quote__name { font-weight: 650; font-size: 0.9375rem; }
.hc-quote__place { font-size: 0.8438rem; color: var(--hc-muted); }

/* --------------------------------------------------------------------------
   14b. MARQUEE — shared auto-scrolling strip (brand logos, testimonials)
   Markup: .hc-marquee[data-hc="marquee"] > .hc-marquee__track > ul.hc-marquee__list
   hc.js clones the list once (aria-hidden) inside the track; the track
   moves by exactly -50% (one list + its trailing gap), so the loop is
   seamless. Duration = list width ÷ --hc-marquee-speed (px per second),
   so the pace feels the same on every screen. Paused unless hc.js adds
   .hc-is-running (in view, tab visible, not hovered/focused/touched,
   not paused with the button).
   -------------------------------------------------------------------------- */
.hc-band { background: var(--hc-surface); border-block: 1px solid var(--hc-line); }
.hc-marquee { --hc-marquee-speed: 60; --hc-mq-gap: 1rem; --hc-mq-fade: clamp(1.5rem, 6vw, 5rem); position: relative; overflow: hidden; margin-inline: calc(-1 * var(--hc-gutter)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hc-mq-fade), #000 calc(100% - var(--hc-mq-fade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--hc-mq-fade), #000 calc(100% - var(--hc-mq-fade)), transparent 100%); }
@media (min-width: 1024px) { .hc-marquee { margin-inline: 0; } }
.hc-marquee__track { display: flex; align-items: stretch; width: max-content; animation: hc-marquee var(--hc-mq-duration, 40s) linear infinite; animation-play-state: paused; will-change: transform; }
.hc-marquee.hc-is-running .hc-marquee__track { animation-play-state: running; }
.hc-marquee[data-direction="ltr"] .hc-marquee__track { animation-direction: reverse; }
@keyframes hc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Each copy carries its trailing gap as padding, so both copies are exactly the same width */
.hc-marquee__list { display: flex; align-items: stretch; flex: none; gap: var(--hc-mq-gap); padding-inline-end: var(--hc-mq-gap); margin: 0; }
.hc-marquee__item { flex: none; display: flex; }
.hc-marquee__arrow { display: none; }
.hc-mq-toggle { flex: none; align-self: flex-end; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--hc-field-border); background: var(--hc-surface); color: var(--hc-primary); }
@media (hover: hover) and (pointer: fine) { .hc-mq-toggle:hover { border-color: var(--hc-primary); background: var(--hc-tint); } }
.hc-mq-toggle__play { display: none; }
.hc-mq-toggle[aria-pressed="true"] .hc-mq-toggle__pause { display: none; }
.hc-mq-toggle[aria-pressed="true"] .hc-mq-toggle__play { display: block; }

/* Logo strip: identical white tiles so mixed artwork looks uniform; logos keep their own colours */
.hc-marquee--logos { --hc-tile-h: 3.5rem; --hc-mq-gap: 0.75rem; padding-block: 0.25rem; }
@media (min-width: 768px) { .hc-marquee--logos { --hc-tile-h: 4.5rem; --hc-mq-gap: 1rem; } }
@media (min-width: 1024px) { .hc-marquee--logos { --hc-tile-h: 5.5rem; --hc-mq-gap: 1.25rem; } }
.hc-logo-tile { display: grid; place-items: center; height: var(--hc-tile-h); width: calc(var(--hc-tile-h) * 2.15); padding: calc(var(--hc-tile-h) * 0.1) calc(var(--hc-tile-h) * 0.16); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r); }
.hc-logo-tile img { width: 100%; height: 100%; object-fit: contain; }
a.hc-logo-tile { transition: border-color var(--hc-fast); }
@media (hover: hover) and (pointer: fine) { a.hc-logo-tile:hover { border-color: var(--hc-primary); } }
.hc-logo-tile:focus-visible { outline-offset: -3px; }

/* Testimonial cards: one height for all (the tallest), text never clipped */
.hc-marquee--quotes { --hc-marquee-speed: 45; --hc-mq-gap: 0.875rem; padding-block: 0.25rem; }
.hc-marquee--quotes .hc-marquee__item { width: min(85vw, 26rem); }
@media (min-width: 600px) { .hc-marquee--quotes .hc-marquee__item { width: 45vw; } }
@media (min-width: 1024px) { .hc-marquee--quotes { --hc-mq-gap: 1.25rem; } .hc-marquee--quotes .hc-marquee__item { width: 25rem; } }
.hc-marquee--quotes .hc-quote { width: 100%; }
.hc-marquee .hc-quote:focus-within, .hc-marquee .hc-quote:focus-visible { outline: 3px solid var(--hc-focus); outline-offset: 2px; }

/* Reduced motion: no animation. Logos become a static wrapping grid; testimonials a
   normal scroll row with snap and arrow buttons. The pause button is not needed. */
@media (prefers-reduced-motion: reduce) {
  .hc-marquee { -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
  .hc-marquee__track { animation: none !important; width: auto; transform: none; }
  .hc-marquee__list[aria-hidden="true"] { display: none; }
  .hc-mq-toggle { display: none; }
  .hc-marquee[data-static="wrap"] .hc-marquee__list { flex-wrap: wrap; justify-content: center; padding-inline-end: 0; width: 100%; }
  .hc-marquee[data-static="scroll"] { display: flex; align-items: center; gap: 0.5rem; }
  .hc-marquee[data-static="scroll"] .hc-marquee__track { flex: 1; min-width: 0; }
  .hc-marquee[data-static="scroll"] .hc-marquee__list { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.125rem 0.125rem 0.25rem; overscroll-behavior-x: contain; }
  .hc-marquee[data-static="scroll"] .hc-marquee__list::-webkit-scrollbar { display: none; }
  .hc-marquee[data-static="scroll"] .hc-marquee__item { scroll-snap-align: start; }
  .hc-marquee[data-static="scroll"] .hc-marquee__arrow { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--hc-line); background: var(--hc-surface); color: var(--hc-ink); box-shadow: var(--hc-shadow-1); }
  .hc-marquee[data-static="scroll"] .hc-marquee__arrow[disabled] { opacity: .35; }
}
/* No JS (or before hc.js runs): same static fallbacks, nothing hidden */
.hc-marquee:not([data-hc-ready]) .hc-marquee__track { animation: none; }

/* --------------------------------------------------------------------------
   15. FOOTER — link columns are accordions on phones, 2 columns on tablets
   -------------------------------------------------------------------------- */
.hc-footer { margin-top: 2rem; background: var(--hc-primary-900); color: #C5DACF; font-size: 0.9375rem; }
.hc-totop { display: block; width: 100%; min-height: 2.75rem; padding: 0.875rem; background: var(--hc-primary-800); color: #fff; font-weight: 600; font-size: 0.875rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .hc-totop:hover { background: var(--hc-primary-700); } }
.hc-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 2rem; padding-bottom: 1rem; }
.hc-footer__about { padding-bottom: 1.25rem; }
.hc-footer h2 { font-family: var(--hc-font-display); font-weight: 400; color: #fff; font-size: 1.125rem; margin: 0; }
.hc-footer__sec { border-top: 1px solid rgba(255, 255, 255, .12); }
.hc-footer__sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; cursor: pointer; color: #fff; }
.hc-footer__sec > summary::-webkit-details-marker { display: none; }
.hc-footer__sec > summary .hc-icon { transition: transform var(--hc-fast); color: #CFE2D8; }
.hc-footer__sec[open] > summary .hc-icon { transform: rotate(180deg); }
.hc-footer__sec > ul { padding-bottom: 1rem; }
@media (min-width: 600px) {
  .hc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; padding-bottom: 1.75rem; }
  .hc-footer__about { grid-column: 1 / -1; padding-bottom: 0; }
  .hc-footer__sec { border-top: 0; }
  .hc-footer__sec > summary { pointer-events: none; min-height: 0; margin-bottom: 0.75rem; }
  .hc-footer__sec > summary .hc-icon { display: none; }
  .hc-footer__sec > ul { padding-bottom: 0; }
}
@media (min-width: 1024px) { .hc-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; } .hc-footer__about { grid-column: auto; } }
.hc-footer a { color: #DCEBE3; }
body.hc .hc-footer a { color: #DCEBE3; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-footer a:hover { color: #fff; } }
.hc-footer__links li + li { margin-top: 0.125rem; }
.hc-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
@media (min-width: 1024px) and (pointer: fine) { .hc-footer__links a { min-height: 2rem; } }
.hc-footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: #fff; }
.hc-footer__brand img { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #fff; }
.hc-footer__brand span { font-family: var(--hc-font-display); font-size: 1.3125rem; }
.hc-footer__about p { max-width: 46ch; }
.hc-footer__contact li { display: flex; gap: 0.625rem; align-items: center; min-height: 2.75rem; }
.hc-footer__contact li > span, .hc-footer__contact li > a { overflow-wrap: anywhere; min-width: 0; }
.hc-footer__contact li > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.hc-footer__contact .hc-icon { color: var(--hc-accent); flex: none; }
.hc-footer__disclaimer { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; padding-bottom: 1rem; font-size: 0.875rem; color: #B5CCC0; }
.hc-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 0.75rem; padding-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; justify-content: space-between; font-size: 0.8438rem; color: #A7C0B3; }
.hc-footer__legal { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.hc-footer__legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }

/* --------------------------------------------------------------------------
   16. SHOP
   Filters: bottom sheet below 1024 (sticky Apply/Clear bar with a live
   result count), left sidebar from 1024. Sort + Filter sit in a sticky bar
   under the header on phones; active-filter chips scroll sideways.
   -------------------------------------------------------------------------- */
.hc-shop { display: grid; gap: 1rem; padding-bottom: 2rem; }
@media (min-width: 1024px) { .hc-shop { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; } }
.hc-shop > section { min-width: 0; }
.hc-filter { border-bottom: 1px solid var(--hc-line); }
.hc-filter:last-child { border-bottom: 0; }
.hc-filter summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0.375rem 1.125rem; font-weight: 650; cursor: pointer; }
.hc-filter summary::-webkit-details-marker { display: none; }
.hc-filter summary .hc-icon { transition: transform var(--hc-fast); }
.hc-filter[open] summary .hc-icon { transform: rotate(180deg); }
.hc-filter__body { padding: 0 1.125rem 1rem; display: grid; gap: 0.125rem; }
.hc-filter__count { margin-left: auto; color: var(--hc-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.hc-filter .hc-check { align-items: center; min-height: 2.75rem; }
.hc-filter__price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.hc-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "filter sort" "chips chips"; align-items: center; gap: 0.5rem 0.625rem; margin-bottom: 1rem; }
.hc-filterbtn { grid-area: filter; display: inline-flex; }
.hc-toolbar .hc-chips { grid-area: chips; }
.hc-toolbar__sort { grid-area: sort; justify-self: end; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hc-toolbar__sort .hc-select { min-height: 2.75rem; width: auto; max-width: 100%; font-size: 1rem; }
.hc-toolbar__sort label { white-space: nowrap; }
@media (max-width: 1023px) {
  .hc-toolbar { position: sticky; top: var(--hc-header-offset, 0px); z-index: 20; background: var(--hc-bg); margin-inline: calc(-1 * var(--hc-gutter)); padding: 0.5rem var(--hc-gutter); border-bottom: 1px solid var(--hc-line); transition: top var(--hc-med) var(--hc-ease); }
  .hc-toolbar .hc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--hc-gutter)); padding-inline: var(--hc-gutter); }
  .hc-toolbar .hc-chips::-webkit-scrollbar { display: none; }
  .hc-toolbar .hc-chips:empty, .hc-toolbar .hc-chips:not(:has(li:not([hidden]))) { display: none; }
  .hc-toolbar__sort { justify-self: stretch; }
  .hc-toolbar__sort .hc-select { width: 100%; }
}
@media (max-width: 479px) { .hc-toolbar__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 1024px) { .hc-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chips sort"; } .hc-filterbtn { display: none; } }
.hc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hc-chips > li { flex: none; }
.hc-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.25rem 0.75rem; border-radius: var(--hc-r-pill); background: var(--hc-tint); color: var(--hc-primary-800); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.hc-chip button { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .hc-chip button:hover { background: rgba(14, 90, 67, .14); } }
.hc-chip--clear { background: none; color: var(--hc-primary); text-decoration: underline; text-underline-offset: 3px; padding: 0.25rem 0.5rem; }

.hc-sheet { position: fixed; inset: 0; z-index: 210; visibility: hidden; }
.hc-sheet.hc-is-open { visibility: visible; }
.hc-sheet__scrim { position: absolute; inset: 0; background: rgba(7, 30, 22, .5); opacity: 0; transition: opacity var(--hc-med); }
.hc-sheet.hc-is-open .hc-sheet__scrim { opacity: 1; }
.hc-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; display: flex; flex-direction: column; background: var(--hc-surface); border-radius: 1.125rem 1.125rem 0 0; transform: translateY(100%); transition: transform var(--hc-med) var(--hc-ease); padding-left: var(--hc-safe-l); padding-right: var(--hc-safe-r); }
.hc-sheet.hc-is-open .hc-sheet__panel { transform: none; }
.hc-sheet__grip { width: 2.75rem; height: 0.3125rem; border-radius: 3px; background: var(--hc-line-2); margin: 0.625rem auto 0; flex: none; }
.hc-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem 0.25rem 1.125rem; border-bottom: 1px solid var(--hc-line); flex: none; }
.hc-sheet__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.hc-sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.625rem; padding: 0.75rem 1rem calc(0.75rem + var(--hc-safe-b)); border-top: 1px solid var(--hc-line); background: var(--hc-surface); flex: none; }
.hc-sheet__foot .hc-btn { white-space: nowrap; padding-inline: 0.75rem; }

@media (min-width: 1024px) {
  .hc-sheet--filters { position: sticky; top: calc(var(--hc-header-offset, 0px) + 1rem); inset: auto; z-index: auto; visibility: visible; transition: top var(--hc-med) var(--hc-ease); }
  .hc-sheet--filters .hc-sheet__scrim, .hc-sheet--filters .hc-sheet__grip, .hc-sheet--filters [data-hc-close] { display: none; }
  .hc-sheet--filters .hc-sheet__panel { position: static; transform: none; transition: none; max-height: calc(100dvh - var(--hc-header-h, 0px) - 2rem); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: 0; }
  .hc-sheet--filters .hc-sheet__head { padding: 0.75rem 1.125rem; }
  .hc-sheet--filters .hc-sheet__foot { grid-template-columns: 1fr; padding: 0.75rem 1.125rem; }
}
.hc-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.hc-pager a, .hc-pager span { min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem; display: inline-grid; place-items: center; border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: var(--hc-surface); color: var(--hc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-pager a:hover { border-color: var(--hc-primary); text-decoration: none; } }
.hc-pager [aria-current="page"] { background: var(--hc-primary); border-color: var(--hc-primary); color: #fff; }
.hc-pager .hc-is-gap { border: 0; background: none; min-width: 1.25rem; padding: 0; }
.hc-pager .hc-is-disabled { color: var(--hc-line-2); }

.hc-empty { display: grid; justify-items: center; text-align: center; gap: 0.625rem; padding: clamp(2rem, 1.4rem + 3vw, 3rem) 1.25rem; }
.hc-empty__art { width: 6rem; height: 6rem; border-radius: 50%; background: var(--hc-tint); color: var(--hc-primary); display: grid; place-items: center; margin-bottom: 0.375rem; }
.hc-empty__art .hc-icon { width: 2.625rem; height: 2.625rem; stroke-width: 1.4; }
.hc-empty p { color: var(--hc-muted); max-width: 46ch; }
.hc-empty .hc-row { margin-top: 0.5rem; flex-wrap: wrap; justify-content: center; }

.hc-protobar { background: #FFF8DB; border-bottom: 1px dashed #C99700; font-size: 0.875rem; color: var(--hc-confirm-ink); }
.hc-protobar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.hc-protobar a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--hc-confirm-ink); font-weight: 650; padding: 0 0.625rem; border-radius: 0.375rem; border: 1px solid #E3C45C; background: #fff; }
.hc-protobar a[aria-current="true"] { background: var(--hc-confirm-ink); color: #fff; }

/* --------------------------------------------------------------------------
   17. PRODUCT PAGE
   < 768      : gallery (swipe + dots) / details + ordering / summary; sticky bottom bar
   768–1023   : gallery | details, summary under the gallery; sticky bottom bar
   1024–1279  : gallery + details on the left, sticky summary column on the right
   1280+      : gallery | details | sticky summary (three columns)
   -------------------------------------------------------------------------- */
.hc-pdp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "info" "buy"; gap: 1.25rem; padding-bottom: 1.5rem; }
.hc-gallery { grid-area: gallery; }
.hc-pinfo { grid-area: info; }
.hc-buyslot { grid-area: buy; min-width: 0; }
@media (min-width: 768px) { .hc-pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "gallery info" "buy info"; grid-template-rows: auto 1fr; column-gap: 1.75rem; align-items: start; } }
@media (min-width: 1024px) {
  .hc-pdp { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "gallery buy" "info buy"; }
  .hc-gallery { max-width: 22rem; }
  .hc-buyslot { align-self: stretch; }
  .hc-buybox { position: sticky; top: calc(var(--hc-header-offset, 0px) + 1rem); transition: top var(--hc-med) var(--hc-ease); }
}
@media (min-width: 1280px) {
  .hc-pdp { grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.4fr) minmax(18.75rem, 3.4fr); grid-template-areas: "gallery info buy"; grid-template-rows: auto; }
  .hc-gallery { max-width: none; position: sticky; top: calc(var(--hc-header-offset, 0px) + 1rem); transition: top var(--hc-med) var(--hc-ease); }
}
.hc-gallery { display: grid; gap: 0.625rem; min-width: 0; }
.hc-gallery__main { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--hc-canvas); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); overflow: hidden; cursor: zoom-in; touch-action: pan-y; }
.hc-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; background: var(--hc-canvas); }
.hc-gallery__zoomhint { position: absolute; right: 0.625rem; bottom: 0.625rem; display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.375rem 0.625rem; border-radius: var(--hc-r-pill); background: rgba(255, 255, 255, .92); font-size: 0.8125rem; color: var(--hc-ink-2); box-shadow: var(--hc-shadow-1); }
.hc-gallery__thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.hc-gallery__thumb { width: 4.25rem; height: 4.25rem; flex: none; border-radius: var(--hc-r); border: 1.5px solid var(--hc-line); background: var(--hc-canvas); overflow: hidden; }
.hc-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
.hc-gallery__thumb[aria-current="true"] { border-color: var(--hc-primary); box-shadow: inset 0 0 0 1px var(--hc-primary); }
.hc-gallery__dots { display: none; justify-content: center; gap: 0; }
.hc-gallery__dot { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.hc-gallery__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hc-line-2); transition: width var(--hc-fast), background var(--hc-fast); }
.hc-gallery__dot[aria-current="true"]::before { width: 1.25rem; border-radius: 0.25rem; background: var(--hc-primary); }
@media (max-width: 767px) {
  .hc-gallery { margin-inline: calc(-1 * var(--hc-gutter)); }
  .hc-gallery__main { border-radius: 0; border-inline: 0; }
  .hc-gallery__thumbs { display: none; }
  .hc-gallery__dots { display: flex; margin-top: -0.375rem; }
}
.hc-zoom { position: fixed; inset: 0; z-index: 300; background: rgba(255, 255, 255, .98); display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; }
.hc-zoom img { width: auto; max-width: none; height: auto; min-width: 100vw; cursor: zoom-out; }
@media (min-width: 768px) { .hc-zoom img { min-width: 0; width: min(90vw, 62.5rem); } }
.hc-zoom__close { position: fixed; top: max(0.75rem, var(--hc-safe-t)); right: max(0.75rem, var(--hc-safe-r)); background: var(--hc-surface); box-shadow: var(--hc-shadow-2); }

.hc-pinfo { display: grid; gap: 0.875rem; min-width: 0; }
.hc-pinfo__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: 0.9062rem; }
.hc-pinfo__meta a { font-weight: 600; }
.hc-pinfo__title { font-family: var(--hc-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.hc-pinfo__desc { color: var(--hc-ink-2); max-width: 64ch; }
.hc-pinfo__pricebox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; padding: 0.875rem 0; border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.hc-pinfo__note { font-size: 0.875rem; color: var(--hc-muted); }

/* Order switch: a full-width two-tab control at every size */
.hc-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.hc-mode .hc-rcard__box { padding: clamp(0.625rem, 0.4rem + 1vw, 0.875rem); gap: 0.25rem; align-content: start; }
.hc-mode .hc-rcard__title { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); }
.hc-mode .hc-rcard__title .hc-icon { flex: none; }
.hc-mode .hc-rcard__meta { font-size: 0.8438rem; }
.hc-mode__tag { justify-self: start; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 650; color: var(--hc-primary-800); background: var(--hc-tint-2); border-radius: 0.375rem; padding: 1px 0.5rem; }
@media (max-width: 420px) { .hc-mode .hc-rcard__meta { display: none; } }

/* Configurator steps — dispensing-label style */
.hc-cfg { display: grid; gap: 0; background: var(--hc-surface); border: 1.5px solid var(--hc-primary); border-radius: var(--hc-r-lg); position: relative; min-width: 0; }
.hc-cfg::before { content: ""; position: absolute; inset: 0.3125rem; border: 1px solid var(--hc-tint-2); border-radius: 0.625rem; pointer-events: none; }
.hc-cfg__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.875rem clamp(0.875rem, 0.6rem + 1vw, 1.125rem) 0.5rem; }
.hc-cfg__head h2 { font-family: var(--hc-font-display); font-weight: 400; font-size: 1.25rem; }
.hc-cfg__reset { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; font-weight: 600; color: var(--hc-primary); text-decoration: underline; text-underline-offset: 3px; }
.hc-step { position: relative; padding: 0.875rem clamp(0.875rem, 0.6rem + 1vw, 1.125rem) 1.125rem; border-top: 1px dashed var(--hc-line-2); min-width: 0; }
.hc-step__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; min-width: 0; }
.hc-step__head > div { min-width: 0; }
.hc-step__num { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1.5px solid var(--hc-primary); color: var(--hc-primary); display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; flex: none; font-variant-numeric: tabular-nums; background: var(--hc-surface); transition: background var(--hc-fast), color var(--hc-fast); }
.hc-step.hc-is-done .hc-step__num { background: var(--hc-primary); color: #fff; }
.hc-step__title { font-weight: 650; font-size: 1.0312rem; line-height: 1.25; }
.hc-step__prompt { font-size: 0.875rem; color: var(--hc-muted); }
.hc-step__chosen { margin-left: auto; font-size: 0.875rem; font-weight: 650; color: var(--hc-primary-800); background: var(--hc-tint); padding: 2px 0.625rem; border-radius: var(--hc-r-pill); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; flex: none; }
.hc-step.hc-is-enter { animation: hc-step-in var(--hc-med) var(--hc-ease); }
@keyframes hc-step-in { from { opacity: 0; transform: translateY(-0.25rem); } }
.hc-step[data-step="potency"] { --hc-rcard-min: 4.875rem; }
.hc-step[data-step="lm_range"], .hc-step[data-step="lm_sub"] { --hc-rcard-min: 5.75rem; }
.hc-step[data-step="mfr"] { --hc-rcard-min: 9.375rem; }
.hc-step[data-step="medium"] { --hc-rcard-min: 9.375rem; }
.hc-step[data-step="bottle"] { --hc-rcard-min: 7.5rem; }
.hc-step[data-step="dose"] { --hc-rcard-min: 5.75rem; }
.hc-step .hc-rcard__title { overflow-wrap: anywhere; }
/* Small phones: 2 options per row (3 for the short potency / LM potency / dose tokens) */
@media (max-width: 479px) {
  .hc-step .hc-rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hc-step[data-step="potency"] .hc-rcards, .hc-step[data-step="lm_sub"] .hc-rcards, .hc-step[data-step="dose"] .hc-rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-rcard__box { padding: 0.5rem 0.625rem; }
}
.hc-step--patient .hc-form-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 359px) { .hc-step--patient .hc-form-grid { grid-template-columns: minmax(0, 1fr); } }
.hc-cfg__alert { margin: 0 1.125rem 1rem; }

.hc-alert { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: var(--hc-r); font-size: 0.9062rem; }
.hc-alert .hc-icon { flex: none; }
.hc-alert--info { background: var(--hc-tint); color: var(--hc-primary-900); }
.hc-alert--error { background: var(--hc-danger-bg); color: var(--hc-danger); }
.hc-alert--success { background: var(--hc-success-bg); color: var(--hc-success); }

/* Buy box (full summary) */
.hc-buybox { display: grid; gap: 0.875rem; padding: clamp(1rem, 0.8rem + 0.6vw, 1.125rem); background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); box-shadow: var(--hc-shadow-1); min-width: 0; }
.hc-buybox__title { font-weight: 650; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; }
.hc-sum { display: grid; gap: 0; font-size: 0.9062rem; }
.hc-sum__row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px dotted var(--hc-line-2); }
.hc-sum__row dt { color: var(--hc-muted); flex: none; }
.hc-sum__row dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.hc-sum__row.hc-is-empty dd { color: #6B7872; font-weight: 400; }
.hc-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-top: 0.625rem; }
.hc-sum__total dt { font-weight: 650; }
.hc-sum__total dd { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-buybox__stock { font-size: 0.9062rem; font-weight: 600; color: var(--hc-success); display: flex; gap: 0.375rem; align-items: center; }
.hc-buybox__stock.hc-is-out { color: var(--hc-danger); }
.hc-buybox__qty { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hc-buybox__need { font-size: 0.8438rem; color: var(--hc-muted); }
.hc-buybox__trust { display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--hc-ink-2); padding-top: 0.75rem; border-top: 1px solid var(--hc-line); }
.hc-buybox__trust li { display: flex; gap: 0.5rem; align-items: flex-start; }
.hc-buybox__trust .hc-icon { color: var(--hc-primary); margin-top: 1px; flex: none; }

/* Sticky bottom bar (product summary, cart total) — phones and tablets only.
   Shown by hc.js once the full summary it mirrors scrolls out of view.
   Its height is reserved with --hc-buybar-h so page content is never hidden. */
.hc-buybar { position: fixed; left: 0; right: 0; bottom: calc(var(--hc-tabbar-h) + var(--hc-safe-b)); z-index: 88; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; min-height: var(--hc-buybar-h); padding: 0.5rem max(var(--hc-gutter), var(--hc-safe-r)) 0.5rem max(var(--hc-gutter), var(--hc-safe-l)); background: var(--hc-surface); border-top: 1px solid var(--hc-line); box-shadow: 0 -6px 16px -8px rgba(8, 40, 28, .25); transform: translateY(calc(100% + var(--hc-tabbar-h) + var(--hc-safe-b))); visibility: hidden; transition: transform var(--hc-med) var(--hc-ease), visibility 0s linear var(--hc-med); }
.hc-buybar.hc-is-shown { transform: none; visibility: visible; transition: transform var(--hc-med) var(--hc-ease); }
.hc-buybar__toggle { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; min-width: 0; flex: 1; text-align: left; }
.hc-buybar__toggle .hc-icon { flex: none; color: var(--hc-primary); transform: rotate(180deg); transition: transform var(--hc-fast); }
.hc-buybar__toggle[aria-expanded="true"] .hc-icon { transform: none; }
.hc-buybar__price { display: grid; line-height: 1.15; min-width: 0; }
.hc-buybar__price small { color: var(--hc-muted); font-size: 0.7812rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-buybar__price strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-buybar > .hc-btn { flex: none; white-space: nowrap; }
.hc-buybar > .hc-buybar__price { flex: 1 1 0; }
.hc-buybar__detail { flex-basis: 100%; order: -1; max-height: min(50dvh, 22rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0.5rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--hc-line); }
@media (min-width: 1024px) { .hc-buybar { display: none; } }

/* Prescription */
.hc-rx { display: grid; gap: 1.125rem; min-width: 0; }
.hc-rx__block { background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: clamp(0.875rem, 0.6rem + 1vw, 1.125rem); min-width: 0; }
.hc-rx__block > h3 { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; font-size: 1.0312rem; font-weight: 650; }
.hc-rx__trust { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .hc-rx__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hc-rx__trust li { display: flex; gap: 0.5rem; align-items: center; padding: 0.625rem 0.75rem; border-radius: var(--hc-r); background: var(--hc-tint); font-size: 0.875rem; font-weight: 600; color: var(--hc-primary-900); }
.hc-rx__trust .hc-icon { flex: none; }
.hc-rx__sub { font-size: 0.875rem; font-weight: 650; color: var(--hc-muted); margin: 0.25rem 0 0.625rem; }
/* Touch devices: dragging files is not possible, so the zone becomes two big buttons */
.hc-drop__touch { display: none; width: 100%; gap: 0.625rem; }
@media (pointer: coarse) {
  .hc-drop { padding: 1rem; cursor: default; border-style: solid; }
  .hc-drop__desk { display: none !important; }
  .hc-drop__touch { display: grid; }
  .hc-drop > input[type=file] { position: absolute; inset: auto; width: 1px; height: 1px; opacity: 0; }
  .hc-drop__touch .hc-btn { white-space: normal; }
}

/* PIN check */
.hc-pin { display: grid; gap: 0.625rem; min-width: 0; }
.hc-pin__row { display: flex; gap: 0.5rem; max-width: 26.25rem; }
.hc-pin__row .hc-input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hc-pin__row .hc-btn { flex: none; }
.hc-pin__result { font-size: 0.9062rem; }
.hc-pin__result.hc-is-ok { color: var(--hc-success); }
.hc-pin__result.hc-is-bad { color: var(--hc-danger); }
.hc-pin__result .hc-icon { display: inline-block; vertical-align: -0.125rem; }

/* Tabs; product description tabs become an accordion on phones */
.hc-tabs__list { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--hc-line); overflow-x: auto; scrollbar-width: none; }
.hc-tabs__tab { position: relative; min-height: 2.75rem; padding: 0.625rem 1rem; font-weight: 650; color: var(--hc-muted); white-space: nowrap; }
.hc-tabs__tab[aria-selected="true"] { color: var(--hc-primary-800); }
.hc-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--hc-primary); }
.hc-tabs__panel { padding: 1.25rem 0 0.25rem; }
.hc-acc__btn { display: none; }
.hc-is-acc .hc-tabs__list { display: none; }
.hc-is-acc .hc-acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hc-line); font-weight: 650; text-align: left; }
.hc-is-acc .hc-acc__btn .hc-icon { transition: transform var(--hc-fast); flex: none; }
.hc-is-acc .hc-acc__btn[aria-expanded="true"] .hc-icon { transform: rotate(180deg); }
.hc-is-acc .hc-tabs__panel { padding: 0.875rem 0 1rem; }
.hc-prose { max-width: 72ch; color: var(--hc-ink-2); overflow-wrap: break-word; }
.hc-prose > * + * { margin-top: 0.875rem; }
.hc-prose h2 { font-family: var(--hc-font-display); font-weight: 400; color: var(--hc-ink); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); margin-top: 2.25rem; scroll-margin-top: calc(var(--hc-header-offset, 0px) + 1rem); }
.hc-prose h3 { color: var(--hc-ink); font-size: 1.125rem; font-weight: 650; margin-top: 1.5rem; }
body.hc .hc-prose ul { list-style: disc; padding-left: 1.3em; }
body.hc .hc-prose ol { list-style: decimal; padding-left: 1.3em; }
.hc-prose li + li { margin-top: 0.375rem; }
.hc-spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; border: 1px solid var(--hc-line); border-radius: var(--hc-r); overflow: hidden; max-width: 40rem; }
.hc-spec dt, .hc-spec dd { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--hc-line); overflow-wrap: anywhere; }
.hc-spec dt { background: #F3F6F4; font-weight: 600; color: var(--hc-ink-2); }
.hc-spec dt:last-of-type, .hc-spec dd:last-of-type { border-bottom: 0; }
@media (max-width: 359px) { .hc-spec { grid-template-columns: minmax(0, 1fr); } .hc-spec dt { border-bottom: 0; padding-bottom: 0.25rem; } }

/* --------------------------------------------------------------------------
   18. MODAL + TOAST
   Modal: centred dialog from 600; full-screen sheet on phones.
   Toasts: above the tab bar / sticky bar on phones, top-right on desktop.
   -------------------------------------------------------------------------- */
.hc-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; visibility: hidden; }
.hc-modal.hc-is-open { visibility: visible; }
.hc-modal__scrim { position: absolute; inset: 0; background: rgba(7, 30, 22, .55); opacity: 0; transition: opacity var(--hc-med); }
.hc-modal.hc-is-open .hc-modal__scrim { opacity: 1; }
.hc-modal__dialog { position: relative; width: min(32.5rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; background: var(--hc-surface); border-radius: 1.125rem; box-shadow: var(--hc-shadow-3); padding: 1.75rem 1.5rem 1.5rem; transform: translateY(0.75rem) scale(.98); opacity: 0; transition: transform var(--hc-med) var(--hc-ease), opacity var(--hc-med); }
.hc-modal.hc-is-open .hc-modal__dialog { transform: none; opacity: 1; }
.hc-modal__close { position: absolute; right: 0.5rem; top: 0.5rem; }
.hc-modal__icon { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--hc-success-bg); color: var(--hc-success); display: grid; place-items: center; margin-bottom: 0.875rem; }
.hc-modal__title { font-family: var(--hc-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.5rem; padding-right: 2.5rem; }
.hc-ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; margin: 1rem 0; padding: 0.75rem 1rem; border: 1.5px dashed var(--hc-primary); border-radius: var(--hc-r); background: var(--hc-tint); }
.hc-ref strong { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--hc-primary-900); overflow-wrap: anywhere; }
.hc-modal__actions { display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.125rem; }
@media (max-width: 599px) {
  .hc-modal { padding: 0; place-items: stretch; }
  .hc-modal__dialog { width: 100%; max-height: none; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; padding: calc(1.5rem + var(--hc-safe-t)) max(1.25rem, var(--hc-safe-r)) calc(1rem + var(--hc-safe-b)) max(1.25rem, var(--hc-safe-l)); transform: translateY(100%); opacity: 1; }
  .hc-modal__close { top: calc(0.5rem + var(--hc-safe-t)); }
  .hc-modal__actions { grid-template-columns: minmax(0, 1fr); margin-top: auto; padding-top: 1rem; }
}

.hc-toasts { position: fixed; z-index: 500; left: 50%; transform: translateX(-50%); bottom: calc(var(--hc-bottom-ui) + 0.75rem); display: grid; gap: 0.5rem; width: min(26.25rem, calc(100vw - 2rem)); pointer-events: none; }
@media (min-width: 1024px) { .hc-toasts { left: auto; right: max(1.5rem, var(--hc-safe-r)); transform: none; top: calc(var(--hc-header-offset, 0px) + 1rem); bottom: auto; } }
.hc-toast { display: flex; gap: 0.625rem; align-items: center; padding: 0.75rem 0.875rem; border-radius: var(--hc-r); background: var(--hc-ink); color: #fff; box-shadow: var(--hc-shadow-3); font-size: 0.9375rem; pointer-events: auto; animation: hc-toast-in var(--hc-med) var(--hc-ease); }
.hc-toast > span { min-width: 0; overflow-wrap: anywhere; }
.hc-toast .hc-icon { color: #7FD4A4; flex: none; }
.hc-toast--error .hc-icon { color: #FF9B91; }
.hc-toast a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--hc-accent); margin-left: auto; font-weight: 650; white-space: nowrap; }
@keyframes hc-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }

/* --------------------------------------------------------------------------
   19. CART / WISHLIST
   Cart lines adapt to the width of the cart list (container query):
   narrow — image beside name + variant, quantity / remove / price underneath;
   wide   — image | details + controls | price.
   -------------------------------------------------------------------------- */
.hc-cart { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
@media (min-width: 1024px) { .hc-cart { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 1.75rem; align-items: start; } }
.hc-cartlist { container: hc-cart / inline-size; min-width: 0; }
.hc-line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "img info info" "ctrl ctrl total"; gap: 0.75rem; padding: clamp(0.875rem, 0.6rem + 1vw, 1.125rem); border-bottom: 1px solid var(--hc-line); }
.hc-line:last-of-type { border-bottom: 0; }
.hc-line__img { grid-area: img; position: relative; width: 4.5rem; height: 4.5rem; border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: var(--hc-canvas); overflow: hidden; }
.hc-line__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; background: var(--hc-canvas); }
.hc-line__info { grid-area: info; min-width: 0; }
.hc-line__name { font-weight: 650; font-size: 1.0312rem; line-height: 1.3; overflow-wrap: anywhere; }
body.hc .hc-line__name a { color: var(--hc-ink); display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; } /* 44px tall target, no layout shift */
.hc-line__variant { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.hc-line__variant span { font-size: 0.8125rem; padding: 2px 0.5rem; border-radius: 0.375rem; background: #F1F4F2; color: var(--hc-ink-2); max-width: 100%; overflow-wrap: anywhere; }
.hc-line__variant b { font-weight: 650; color: var(--hc-ink); }
.hc-line__ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; }
.hc-line__actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.hc-line__total { grid-area: total; display: grid; justify-items: end; align-content: start; gap: 2px; text-align: right; min-width: 0; }
.hc-line__total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-line__total small { color: var(--hc-muted); font-size: 0.8125rem; }
@container hc-cart (min-width: 36rem) {
  .hc-line { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "img info total" "img ctrl total"; column-gap: 1rem; }
  .hc-line__img { width: 6.5rem; height: 6.5rem; }
}
.hc-line--rx { background: linear-gradient(90deg, var(--hc-tint) 0, var(--hc-tint) 0.25rem, transparent 0.25rem); }
.hc-line__rxref { margin-top: 0.5rem; font-size: 0.875rem; color: var(--hc-ink-2); overflow-wrap: anywhere; }
.hc-line__rxref strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.hc-line__pending { font-size: 0.9062rem; font-weight: 600; color: var(--hc-primary-800); }
.hc-line--rx { grid-template-areas: "img info info" "total total total" "ctrl ctrl ctrl"; }
.hc-line--rx .hc-line__total { justify-items: start; text-align: left; }
@container hc-cart (min-width: 36rem) {
  .hc-line--rx { grid-template-areas: "img info total" "img ctrl total"; }
  .hc-line--rx .hc-line__total { justify-items: end; text-align: right; max-width: 11rem; }
}
.hc-cartfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem clamp(0.875rem, 0.6rem + 1vw, 1.125rem); border-top: 1px solid var(--hc-line); }
.hc-summary { display: grid; gap: 0.75rem; }
@media (min-width: 1024px) { .hc-summary { position: sticky; top: calc(var(--hc-header-offset, 0px) + 1rem); transition: top var(--hc-med) var(--hc-ease); } }
.hc-summary__rows { display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.hc-summary__rows div { display: flex; justify-content: space-between; gap: 0.75rem; }
.hc-summary__rows dd { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 0; }
.hc-summary__total { padding-top: 0.75rem; border-top: 1px solid var(--hc-line); display: flex; justify-content: space-between; align-items: baseline; }
.hc-summary__total strong { font-size: 1.625rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   20. ACCOUNT / CONTACT / POLICY / 404 / CHECKOUT / REVIEW
   -------------------------------------------------------------------------- */
.hc-auth { display: grid; gap: 1.5rem; padding: 0.5rem 0 2.5rem; }
@media (min-width: 900px) { .hc-auth { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.hc-auth > * { min-width: 0; }
.hc-auth__aside { display: grid; gap: 1rem; align-content: start; padding: clamp(1.125rem, 0.8rem + 1.2vw, 1.5rem); border-radius: var(--hc-r-lg); background: var(--hc-tint); }
.hc-auth__aside li { display: flex; gap: 0.625rem; align-items: flex-start; }
.hc-auth__aside .hc-icon { color: var(--hc-primary); margin-top: 2px; flex: none; }

.hc-contact { display: grid; gap: 1.25rem; padding-bottom: 2.5rem; }
@media (min-width: 900px) { .hc-contact { grid-template-columns: 23.75rem minmax(0, 1fr); gap: 1.75rem; align-items: start; } }
.hc-contact > * { min-width: 0; }
.hc-contact__card { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--hc-line); }
.hc-contact__card:last-child { border-bottom: 0; }
.hc-contact__card > div { min-width: 0; overflow-wrap: anywhere; }
.hc-contact__card .hc-trust__icon { width: 2.5rem; height: 2.5rem; }
.hc-contact__card a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.hc-policy { display: grid; gap: 1.25rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .hc-policy { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.hc-policy > * { min-width: 0; }
.hc-toc { position: relative; }
.hc-toc__details { border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); background: var(--hc-surface); }
.hc-toc__details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.25rem 1rem; font-weight: 650; cursor: pointer; }
.hc-toc__details > summary::-webkit-details-marker { display: none; }
.hc-toc__details > summary .hc-icon { transition: transform var(--hc-fast); }
.hc-toc__details[open] > summary .hc-icon { transform: rotate(180deg); }
.hc-toc__links { padding: 0 0.5rem 0.75rem; }
.hc-toc a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0.75rem; border-left: 2px solid var(--hc-line); color: var(--hc-ink-2); font-size: 0.9062rem; }
@media (hover: hover) and (pointer: fine) { body.hc .hc-toc a:hover { color: var(--hc-primary); text-decoration: none; border-left-color: var(--hc-primary-700); } }
.hc-toc a[aria-current="true"] { color: var(--hc-primary-800); border-left-color: var(--hc-primary); font-weight: 650; }
@media (min-width: 1024px) {
  .hc-toc { position: sticky; top: calc(var(--hc-header-offset, 0px) + 1.25rem); transition: top var(--hc-med) var(--hc-ease); }
  .hc-toc__details { border: 0; background: none; }
  .hc-toc__details > summary { pointer-events: none; padding: 0 0 0.625rem; min-height: 0; }
  .hc-toc__details > summary .hc-icon { display: none; }
  .hc-toc__links { padding: 0; }
  .hc-toc a { min-height: 2.25rem; }
}
.hc-policy__body { max-width: 72ch; }
.hc-policy__body .hc-prose { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.7; }
.hc-policy__meta { color: var(--hc-muted); font-size: 0.9062rem; margin-top: 0.5rem; }

.hc-404 { display: grid; justify-items: center; text-align: center; gap: 0.875rem; padding: clamp(2.5rem, 1.8rem + 3vw, 3.5rem) 0 2.5rem; }
.hc-404__code { font-family: var(--hc-font-display); font-size: clamp(4.5rem, 12vw, 8.25rem); line-height: 1; color: var(--hc-primary); }
.hc-404 .hc-search { width: min(35rem, 100%); border: 1.5px solid var(--hc-line-2); }
.hc-404 .hc-chips { justify-content: center; }

.hc-steps-bar { display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.25rem; counter-reset: hcck; }
.hc-steps-bar li { counter-increment: hcck; flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.875rem 0.375rem 0.5rem; border-radius: var(--hc-r-pill); background: var(--hc-surface); border: 1px solid var(--hc-line); font-weight: 600; font-size: 0.9062rem; white-space: nowrap; color: var(--hc-muted); }
.hc-steps-bar li::before { content: counter(hcck); width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--hc-tint); color: var(--hc-primary); font-size: 0.8125rem; }
.hc-steps-bar li[aria-current="step"] { border-color: var(--hc-primary); color: var(--hc-primary-900); }
.hc-steps-bar li[aria-current="step"]::before { background: var(--hc-primary); color: #fff; }
.hc-steps-bar li.hc-is-done::before { background: var(--hc-primary); color: #fff; }
.hc-concept { background: repeating-linear-gradient(-45deg, #FFF1B8 0 0.75rem, #FFF8DB 0.75rem 1.5rem); border-bottom: 1px solid #E3C45C; color: var(--hc-confirm-ink); font-weight: 650; text-align: center; padding: 0.625rem 1rem; }

.hc-review { padding: 2.5rem 0 4rem; }
.hc-review__grid { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr)); margin-top: 1.5rem; }
.hc-review__card { display: grid; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); overflow: hidden; color: var(--hc-ink); }
@media (hover: hover) and (pointer: fine) { body.hc .hc-review__card:hover { text-decoration: none; border-color: var(--hc-primary); box-shadow: var(--hc-shadow-2); } }
.hc-review__thumb { aspect-ratio: 16 / 10; background: var(--hc-tint); border-bottom: 1px solid var(--hc-line); overflow: hidden; }
.hc-review__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hc-review__body { padding: 0.875rem 1rem 1rem; display: grid; gap: 2px; }
.hc-review__body strong { font-size: 1rem; }
.hc-review__body span { font-size: 0.875rem; color: var(--hc-muted); }
.hc-review__body .hc-review__note { margin-top: 0.375rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; background: var(--hc-confirm-bg); color: var(--hc-confirm-ink); font-weight: 600; font-size: 0.8125rem; }
.hc-proto-note + .hc-prose { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   21. TOUCH, KEYBOARD AND SHORT-SCREEN BEHAVIOUR
   -------------------------------------------------------------------------- */
/* Touch: every control at least 44 × 44 */
@media (pointer: coarse) {
  .hc-btn--sm { min-height: 2.75rem; }
  .hc-check { min-height: 2.75rem; align-items: center; }
  .hc-mega__list a, .hc-toc a { min-height: 2.75rem; }
}
/* On-screen keyboard open (hc.js sets body.hc-is-typing on touch devices):
   nothing sticky may sit on top of the field being typed into */
body.hc-is-typing .hc-tabbar, body.hc-is-typing .hc-buybar { display: none !important; }
body.hc-is-typing { --hc-tabbar-h: 0px; --hc-buybar-h: 0px; }
:where(body.hc) .hc-input, :where(body.hc) .hc-select, :where(body.hc) .hc-textarea { scroll-margin-top: calc(var(--hc-header-offset, 0px) + 1rem); scroll-margin-bottom: 6rem; }

/* Landscape phones: sticky chrome must stay under a quarter of the screen.
   The header stops being sticky, the tab bar goes (the header menu remains)
   and the sticky bar slims down. */
@media (orientation: landscape) and (max-height: 500px) {
  .hc-header { position: relative; }
  .hc-tabbar { display: none !important; }
  .hc-buybar { padding-block: 0.25rem; }
  .hc-buybar__price small { display: none; }
  .hc-sheet__panel { max-height: 100dvh; border-radius: 0; }
  .hc-slide--text { height: auto; min-height: 15rem; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) { .hc-burger { display: inline-grid; } }

.hc-tlink { display: inline-flex; align-items: center; min-height: 2.75rem; } /* standalone text link with a 44px target */

/* Dev-only overflow check (?debug=1 in the URL) */
.hc-debug-overflow { outline: 2px solid #E11D48 !important; outline-offset: -2px; }

/* --------------------------------------------------------------------------
   22. MOTION PREFERENCES / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.hc *, body.hc *::before, body.hc *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print {
  .hc-header, .hc-footer, .hc-tabbar, .hc-fab, .hc-buybar, .hc-announce { display: none !important; }
}