/* ==========================================================================
   Nahl Foods Theme
   Map :root tokens → settings_schema.json when converting to Liquid
   ========================================================================== */

:root {
  /* Colors — NAHL palette. The weighting is deliberate, not equal: roughly
     55% cream/ivory ground, 25% forest, 10% terracotta, 5% gold, 5% charcoal.
     Gold is the scarcest: borders, icons, premium marks — never small text on
     a light ground, where it only reaches 2.3:1. Use --color-honey-deep there. */
  --color-primary: #183a2a;      /* Forest Green — nav, buttons, footer */
  --color-primary-hover: #10281d;
  --color-accent: #a85b43;       /* Terracotta — fills and badges; white text on it is 4.95:1 */
  --color-accent-deep: #8f4a34;  /* Terracotta as text on cream — 5.7:1 */
  --color-accent-soft: #be7259;
  --color-honey: #c49a52;        /* Antique Gold — borders, icons, dark-ground accents */
  --color-honey-deep: #7c6224;   /* Gold when it has to carry text on cream — 5.1:1 */
  --color-bg: #f5efe2;           /* Warm Cream — page ground */
  --color-bg-muted: #ede5d4;
  --color-bg-card: #fcfaf5;      /* Soft Ivory — cards, clean sections */
  --color-text: #24251f;         /* Deep Charcoal — body copy */
  --color-text-muted: #565851;
  --color-text-light: #63655c;
  --color-border: #e4dac6;
  --color-white: #ffffff;
  --color-star: #c49a52;
  --color-footer: #10281d;
  --color-focus: #183a2a;
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;

  /* Typography — three jobs. Display + Urdu come from Google Fonts; Manrope is
     self-hosted in fonts.css.

       Outfit              = brand personality   (English headlines, product names)
       Manrope             = shopping experience (everything you read or press)
       Gulzar              = Urdu expression     (Arabic-script display)
       Noto Nastaliq Urdu  = Urdu fallback        (broader Nastaliq coverage)

     Nastaliq sits inside both Latin stacks as a per-glyph fallback: neither
     Latin face has Arabic glyphs, so Urdu typed into any field renders in
     Nastaliq without markup. Mark a passage lang="ur" (or .urdu) to also get
     rtl and the taller leading. */
  /* Latin faces come second on purpose: the Nastaliq file carries no Latin, so
     a brand name or a number inside an Urdu passage lands on Manrope (or on
     Outfit in a heading) rather than on whatever serif the device has. */
  --font-urdu: "Gulzar", "Noto Nastaliq Urdu", "Manrope", "Jameel Noori Nastaleeq", "Urdu Typesetting", system-ui, sans-serif;
  --font-urdu-display: "Gulzar", "Noto Nastaliq Urdu", "Outfit", "Jameel Noori Nastaleeq", Georgia, serif;
  --font-display: "Outfit", "Gulzar", "Noto Nastaliq Urdu", system-ui, sans-serif;
  --font-ui: "Manrope", "Gulzar", "Noto Nastaliq Urdu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-ui);
  --font-heading: var(--font-display); /* legacy alias */

  /* Weights. The serif stays light — 400 for headlines, 500 where it is set
     small (product names, panel titles), 600 only for the wordmark-sized bits.
     Manrope: 400 reads, 500 navigates, 600 presses, 700 is for totals. */
  --fw-display: 400;
  --fw-display-medium: 500;
  --fw-display-strong: 600;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* UI scale (Manrope) */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 16px;  /* body copy */
  --fs-lg: 18px;  /* lead paragraphs */
  --fs-nav: 15px;
  --fs-price: 17px;
  --fs-price-lg: 24px;

  /* Display scale (Outfit). Fluid between a compact phone size and the
     editorial desktop size; the floor matters as much as the ceiling — a phone
     homepage has to stay short enough to shop. */
  --fs-hero: clamp(44px, 6.4vw, 92px);
  --fs-h1: clamp(38px, 5.2vw, 64px);
  --fs-h2: clamp(32px, 4.2vw, 54px);
  --fs-h3: clamp(26px, 2.8vw, 36px);
  --fs-xl: 24px;  /* small serif titles: panels, cards, mottos */
  --fs-product: clamp(22px, 2.2vw, 30px);       /* product name on a card */
  --fs-product-title: clamp(32px, 3.8vw, 46px); /* product name on its own page */
  --fs-2xl: var(--fs-h2); /* legacy aliases */
  --fs-3xl: var(--fs-h1);

  /* Leading */
  --lh-display: 0.98; /* hero and h1 */
  --lh-heading: 1.04; /* h2 */
  --lh-tight: 1.12;   /* h3 and smaller serif, where lines wrap more often */
  --lh-ui: 1.2;       /* buttons, labels */
  --lh-body: 1.65;
  --lh-urdu: 2.3;     /* Nastaliq stacks its letters diagonally and needs the room */

  /* Tracking. The serif runs natural-to-tight; only small Manrope caps open up. */
  --ls-display: -0.015em;
  --ls-display-tight: -0.025em;
  --ls-ui: 0.04em;     /* navigation, buttons */
  --ls-label: 0.12em;  /* eyebrows and other small uppercase labels */

  /* Layout — breakpoints remain 480 / 700 / 900 / 1100 */
  --page-width: 1100px;
  --page-gutter: 24px;
  --grid-gap: 16px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  /* Every photographic surface and every pressable control rounds the same,
     so a hero frame, a product thumbnail and an add-to-cart button read as one
     family. Change these two and the whole site follows. */
  --radius-image: 7px;
  --radius-btn: 7px;
  --shadow-soft: 0 8px 28px rgba(24, 58, 42, 0.08);
  --shadow-card: 0 4px 18px rgba(24, 58, 42, 0.06);
  --header-height: 72px;

  /* Heroicon shopping-bag, matching the header cart mark. Used as a CSS mask so
     the glyph survives the JS label swap on add-to-cart buttons. */
  --icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");

  /* Motion — custom curves. The CSS built-in easings are too weak to feel
     intentional; these are the strong variants. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 140ms;   /* button press feedback */
  --dur-hover: 200ms;   /* hover + colour changes */
  --dur-menu: 240ms;    /* dropdowns, mobile nav */
  --dur-reveal: 560ms;  /* scroll reveal entrance */

  /* Legacy alias: existing rules inherit the stronger curve for free. */
  --transition: var(--dur-hover) var(--ease-out);

  /* Buttons — one set of metrics for every button on the site. Each template
     used to declare its own height, padding and type size (44/48/auto, 16/20/
     22/28, 12/13px), and WooCommerce ships a sixth. Everything reads these. */
  --btn-min-height: 46px;
  --btn-padding-y: 14px;
  --btn-padding-x: 28px;
  --btn-font-size: var(--fs-sm);
  --btn-font-weight: var(--fw-medium);
  --btn-letter-spacing: 0.05em;

  /* Section spacing */
  --section-space: 72px;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  border-radius: var(--radius-image);
}

/* Photographs round by default. Where an image is clipped by a wrapper —
   overflow: hidden, a border, a background — the wrapper carries the same
   radius, or its square corner would sit outside the one the image just cut. */
.product-card__media,
.video-card__trigger,
.video-card__player,
.home-hero__fallback,
.home-origin__visual,
.home-honey-story__media,
.home-brand__visual,
.nahl-product__gallery {
  border-radius: var(--radius-image);
}

/* Exceptions. The logo is artwork with its own silhouette and the full-bleed
   hero art runs to the section edge — neither wants a rounded box. The rest are
   images their wrapper already clips: a second radius inside the clip only
   leaves a hairline of wrapper showing at each corner, and it drifts out of
   register the moment the image scales on hover. */
.custom-logo,
.hero__media img,
.nahl-shop-hero__media img,
.product-card__media img,
.video-card__poster,
.home-origin__visual img,
.home-honey-story__media img,
.home-brand__visual img,
.nahl-product__gallery .woocommerce-product-gallery__image img {
  border-radius: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--color-primary);
  letter-spacing: var(--ls-display);
  /* Even out ragged headline lines instead of leaving one word behind. */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display-tight);
}

h3 {
  font-size: var(--fs-h3);
}

/* Below h3 a heading is a label, not a headline: it belongs to Manrope. */
h4,
h5,
h6 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: 0;
}

h4 {
  font-size: var(--fs-lg);
}

h5,
h6 {
  font-size: var(--fs-md);
}

/* Emphasis inside a serif headline is the italic, never a heavier cut. */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: inherit;
}

/* Urdu. Arabic-script glyphs already fall through to Nastaliq anywhere on the
   site (see --font-display / --font-ui); marking the passage adds what a glyph
   fallback cannot: right-to-left flow and the leading Nastaliq needs.
   Tracking and capitals are Latin ideas — both are switched off, since letter-
   spacing breaks the joins between Urdu letters. */
:lang(ur),
.urdu {
  font-family: var(--font-urdu);
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
  line-height: var(--lh-urdu);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  word-spacing: 0.06em;
}

/* Nastaliq reads a size smaller than Latin at the same px; headings keep a
   little less leading than running text so a two-line title still holds. */
h1:lang(ur),
h2:lang(ur),
h3:lang(ur),
h1.urdu,
h2.urdu,
h3.urdu,
:lang(ur) :is(h1, h2, h3),
.urdu :is(h1, h2, h3) {
  font-family: var(--font-urdu-display);
  font-weight: var(--fw-regular);
  line-height: 1.9;
  letter-spacing: 0;
  text-wrap: wrap;
}

p {
  margin: 0;
}

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--page-width));
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

/* A section heading is a brand headline — Outfit at h3 scale, natural case.
   Shared by homepage sections, product story, reviews, and related products. */
.section-header__title,
.nahl-product__reviews .woocommerce-Reviews-title,
.nahl-product__reviews .comment-reply-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

.section-header__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Long-form copy — pages and journal entries                                 */
/* -------------------------------------------------------------------------- */

/* Editor content arrives as bare tags. Headings step down one size from the
   page's own h1/h2 so an article never out-shouts the page title above it. */
.entry-content {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.entry-content > * + * {
  margin-top: 1.1em;
}

.entry-content h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin-top: 1.6em;
}

.entry-content h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-display-medium);
  margin-top: 1.4em;
}

/* Prose links only — scoped to text containers so the buttons and tables
   WooCommerce prints into a page (My Account) keep their own styling. */
.entry-content :where(p, li, blockquote, figcaption) > a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content strong {
  font-weight: var(--fw-semibold);
}

.entry-content > ul,
.entry-content > ol {
  padding-left: 1.3em;
}

.entry-content > ul {
  list-style: disc;
}

.entry-content > ol {
  list-style: decimal;
}

/* The one place body copy turns serif: a pulled quote is an editorial statement. */
.entry-content blockquote {
  margin-inline: 0;
  padding-left: 20px;
  border-left: 2px solid var(--color-honey);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-primary);
}

.entry-content figcaption,
.entry-content small {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.section-header__link:hover {
  color: var(--color-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-min-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: capitalize;
  line-height: var(--lh-ui);
  /* Transform runs on the fast press clock; everything else on the hover clock. */
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), opacity var(--transition),
    transform var(--dur-press) var(--ease-out);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Colour-only hover, and only where a real pointer exists. On touch, :hover
   latches after the tap and the button stays stuck in its hovered state. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
  }

  .btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }
}

/* Press feedback — the button confirms it heard you. Subtle on purpose. */
.btn:active {
  transform: scale(0.97);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background: transparent;
  color: var(--color-accent-deep);
}

.btn--honey {
  background: var(--color-honey);
  color: var(--color-primary);
}

.btn--honey:hover {
  background: #a8823f;
  color: var(--color-primary);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--page-gutter);
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.badge--honey {
  background: var(--color-honey);
  color: var(--color-primary);
}

.badge--muted {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-breadcrumb,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-breadcrumb a,
.breadcrumb a {
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-breadcrumb a:hover,
.breadcrumb a:hover {
  color: var(--color-primary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]),
textarea,
select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]):focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 58, 42, 0.12);
}

label {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}

/* -------------------------------------------------------------------------- */
/* Section: Announcement bar                                                  */
/* -------------------------------------------------------------------------- */

.announcement-bar {
  background: var(--color-primary);
  color: var(--color-bg);
  border-bottom: 1px solid rgba(245, 239, 226, 0.12);
}

.announcement-bar__inner {
  margin: 0;
  padding: 8px var(--page-gutter);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* Section: Header                                                            */
/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 18px rgba(24, 58, 42, 0.04);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  gap: 32px;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: min(220px, 52vw);
}

.logo__mark {
  display: inline-flex;
  gap: 8px;
}

.logo__leaf {
  width: 25px;
  height: 25px;
  color: var(--color-primary);
  margin: 0;
}

.logo__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-display-strong);
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--color-primary);
  white-space: nowrap;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-main__link {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  color: var(--color-primary);
  padding-block: 10px;
  transition: color var(--transition);
}

.nav-main__link:hover,
.nav-main__link.is-active {
  color: var(--color-primary);
}

.nav-main__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--color-primary);
}

.nav-main__link:not(.is-active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--color-honey);
  /* scaleX, not `right`. Animating `right` relayouts the link every frame;
     transform is GPU-composited and skips layout and paint entirely. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .nav-main__link:not(.is-active):hover::after {
    transform: scaleX(1);
  }
}

.nav-main__link--has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-main__link--has-dropdown svg {
  width: 12px;
  height: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.header-actions__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  transition: background var(--transition),
    border-color var(--transition),
    transform var(--dur-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .header-actions__btn:hover {
    background: transparent;
    border-color: var(--color-honey);
  }
}

/* Cart and account are pressable too — same feedback as .btn. */
.header-actions__btn:active,
.menu-toggle:active {
  transform: scale(0.94);
}

.header-actions__btn .icon {
  width: 20px;
  height: 20px;
}

.cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--color-bg);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  color: var(--color-primary);
  transition: transform var(--dur-press) var(--ease-out);
}

.menu-toggle .icon {
  width: 22px;
  height: 22px;
}

.menu-toggle .icon--close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon--close {
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Section: Hero                                                              */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg-muted);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(245, 239, 226, 0.92) 0%,
    rgba(245, 239, 226, 0.72) 38%,
    rgba(245, 239, 226, 0.15) 68%,
    transparent 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding-block: 72px 96px;
}

.hero__eyebrow {
  margin-bottom: 14px;
  animation: fadeUp var(--dur-reveal) var(--ease-out) both;
}

.hero__title {
  font-size: var(--fs-h1);
  margin-bottom: 16px;
  animation: fadeUp var(--dur-reveal) 0.08s var(--ease-out) both;
}

.hero__text {
  max-width: 420px;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  margin-bottom: 28px;
  animation: fadeUp var(--dur-reveal) 0.16s var(--ease-out) both;
}

.hero__cta {
  margin-bottom: 28px;
  animation: fadeUp var(--dur-reveal) 0.24s var(--ease-out) both;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  animation: fadeUp var(--dur-reveal) 0.32s var(--ease-out) both;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.hero__trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal                                                              */
/* -------------------------------------------------------------------------- */

/* Uses `translate`, not `transform`, so cards are free to use `transform` on hover. */
[data-reveal] {
  opacity: 0;
  translate: 0 24px;
  /* One curve for both properties. Two different easings on the same entrance
     make opacity and position drift apart — obvious in slow motion. */
  transition: opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-revealed {
  opacity: 1;
  translate: none;
}

/* No JS: never leave content hidden. */
html:not(.js) [data-reveal] {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__text,
  .hero__cta,
  .hero__trust,
  .video-card__poster {
    animation: none;
    transition: none;
  }

  .video-card__trigger:hover .video-card__poster,
  .video-card__trigger:focus-visible .video-card__poster,
  .video-card__trigger:hover .video-card__play,
  .video-card__trigger:focus-visible .video-card__play {
    transform: none;
  }

  .video-card__trigger:hover .video-card__play,
  .video-card__trigger:focus-visible .video-card__play {
    transform: translate(-50%, -50%);
  }

  /* The ring still appears — it is the affordance. Only its growth drops. */
  .video-card__play::before {
    transform: none;
    transition: opacity var(--dur-hover) linear;
  }

  .video-card__trigger:hover .video-card__play::before,
  .video-card__trigger:focus-visible .video-card__play::before {
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  /* Reduced motion means gentler, not none. Colour and opacity still carry
     meaning — it's movement and position that get dropped. */
  .btn,
  .header-actions__btn,
  .menu-toggle {
    transition: background var(--dur-hover) linear,
      color var(--dur-hover) linear,
      border-color var(--dur-hover) linear,
      opacity var(--dur-hover) linear;
  }

  .btn:active,
  .header-actions__btn:active,
  .menu-toggle:active {
    transform: none;
  }

  .nav-main__link:not(.is-active)::after,
  .nav-main__link:not(.is-active):hover::after {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Section: Features bar                                                      */
/* -------------------------------------------------------------------------- */

.features-bar {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  margin-bottom: 24px;
}

.features-bar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 28px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px 12px;
}

.feature-item__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
}

.feature-item__icon svg {
  width: 28px;
  height: 28px;
}

.feature-item__title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.feature-item__text {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* Section: How we get our honey                                              */
/* -------------------------------------------------------------------------- */

/* Ivory, not cream: the hero above this is cream, and two identical grounds
   read as one endless section. Ivory also suits the video block — it is the
   palette's "cards and clean sections" tone. */
.honey-journey {
  padding-block: var(--section-space);
  background: var(--color-bg-card);
}

.honey-journey__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.honey-journey__video {
  min-width: 0;
  position: relative;
}

/* The frame the poster and the player both sit in. Declared once on the
   wrapper so the shadow survives the swap and is not clipped by either
   child's own overflow: hidden. */
.honey-journey__video::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

.honey-journey__video.is-playing .video-card__trigger {
  display: none;
}

.video-card__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  overflow: hidden;
  background: var(--color-primary);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.video-card__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.video-card__trigger:hover .video-card__poster,
.video-card__trigger:focus-visible .video-card__poster {
  transform: scale(1.04);
}

/* Bottom-weighted, not a flat wash. A uniform 28% scrim across the whole
   frame greys out honey — the one thing the photograph is selling. This
   darkens only where the label sits and leaves the top of the image bright. */
.video-card__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 40, 29, 0.72) 0%,
    rgba(16, 40, 29, 0.28) 38%,
    rgba(16, 40, 29, 0.06) 68%,
    rgba(16, 40, 29, 0.14) 100%
  );
  pointer-events: none;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(24, 58, 42, 0.25);
  transition: transform var(--transition), background var(--transition);
}

/* A gold ring that grows out of the disc on hover, so the target reads as
   pressable before the cursor lands rather than only after. It is drawn
   outside the disc, which keeps the play glyph itself perfectly still. */
.video-card__play::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(196, 154, 82, 0.9);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.video-card__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

.video-card__trigger:hover .video-card__play,
.video-card__trigger:focus-visible .video-card__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--color-white);
}

.video-card__trigger:hover .video-card__play::before,
.video-card__trigger:focus-visible .video-card__play::before {
  opacity: 1;
  transform: scale(1);
}

/* The global focus ring is forest green, which all but disappears against a
   dark photograph. This control is the one place a ring has to sit on an
   image, so it gets a white ring with a green outer edge — legible over
   either a bright or a shadowed part of the poster. */
.video-card__trigger:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Names the cost of the click. A bare play disc says "something happens";
   the label says what, so the decision is made before the tap. */
.video-card__label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(16, 40, 29, 0.5);
  pointer-events: none;
}

.video-card__player {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-card__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.honey-journey__content .eyebrow {
  margin-bottom: 12px;
}

.honey-journey__title {
  font-size: var(--fs-2xl);
  margin-bottom: 18px;
}

.honey-journey__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  max-width: 52ch;
}

/* Hive → Harvest → Jar. The steps are an ordered list because they are one,
   and the hairline running down the left of the numbers is what makes the
   three read as a single path instead of three unrelated claims. */
.honey-journey__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.honey-journey__steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--color-border),
    var(--color-honey),
    var(--color-border)
  );
}

.honey-journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.honey-journey__step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--color-honey-deep);
}

.honey-journey__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}

.honey-journey__step-stage {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.honey-journey__step-text {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.45;
}

.honey-journey__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------------------------------------------------------------- */
/* Section: Best sellers                                                      */
/* -------------------------------------------------------------------------- */

.best-sellers {
  padding-block: 24px var(--section-space);
  background: var(--color-bg-muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* -------------------------------------------------------------------------- */
/* Shop groups: individual jars, then collections                             */
/* -------------------------------------------------------------------------- */

/* The two groups are told apart by space and a hairline, not by a coloured
   panel — the shop is one catalogue with a seam, not two storefronts. */
.nahl-shop__group + .nahl-shop__group {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

.nahl-shop__group-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--fw-display-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  margin-bottom: 6px;
}

.nahl-shop__group-note {
  max-width: 52ch;
  margin-bottom: 28px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--color-text-muted);
}

@media (max-width: 700px) {
  .nahl-shop__group + .nahl-shop__group {
    margin-top: 44px;
    padding-top: 32px;
  }

  .nahl-shop__group-note {
    margin-bottom: 20px;
  }
}

.product-card {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  min-width: 0;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  /* Centred card: the title keeps align-self:stretch so its ellipsis still
     has a width to truncate against. */
  text-align: center;
  /* The name below sizes itself from this box (cqi), so the same card sets a
     large name three-up on the homepage and a smaller one four-up under a
     product, without each grid needing its own font-size override. */
  container-type: inline-size;
}

.product-card__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 0.4em;
  color: inherit;
  text-decoration: none;
}

.product-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-card);
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Terracotta is the default badge, so sale keeps gold to stay distinguishable.
   Forest on gold is 4.8:1 — white on gold would only be 2.6:1. */
.product-card__badge--sale {
  background: var(--color-honey);
  color: var(--color-primary);
}

.product-card__badge--soldout {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Sold out reads before the eye reaches the badge: the image goes quiet and
   stops inviting a click. */
.product-card.is-out-of-stock .product-card__media img {
  opacity: 0.55;
  filter: saturate(0.6);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card:hover .product-card__media {
  border-color: var(--color-honey);
  box-shadow: 0 10px 24px rgba(24, 58, 42, 0.1);
}

.product-card__title {
  /* The one brand line on the card: the name is the brand moment, everything
     under it — rating, price, button — is Manrope and built to be scanned. */
  font-family: var(--font-display);
  font-size: var(--fs-product);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: var(--ls-display);
  margin-bottom: 6px;
  color: var(--color-primary);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__title-en {
  /* One line preferred — long English + Urdu can wrap as a unit. */
  min-width: 0;
}

.product-card__title-urdu {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Two-up on a phone, keep the title readable without eating the honey name. */
@media (max-width: 700px) {
  .product-card__title {
    min-height: calc(2.2em * var(--lh-tight));
  }
}

/* The descriptor line: the one sentence that tells the honeys apart, or on a
   collection the jars it holds. Clamped to two lines so a longer short
   description cannot push the price and button out of line with its neighbour. */
.product-card__desc {
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A collection's descriptor is two or three words, not a sentence — it is the
   contents line, so it is set to read as a label rather than as prose. */
.product-card--bundle .product-card__desc {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: var(--fs-xs, 12px);
  color: var(--color-honey-deep);
  -webkit-line-clamp: 1;
}

/* The saving, stated once and quietly. No badge, no strike-through, no colour
   that competes with the price above it — the figure is real and does not need
   to shout to be believed. */
.product-card__saving {
  margin-top: 2px;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs, 12px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  color: var(--color-text-muted);
}

.product-card__saving .woocommerce-Price-amount {
  font-weight: var(--fw-medium);
  color: inherit;
}

/* Pack size and the like: quiet Manrope between the serif name and the price. */
.product-card__meta {
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-muted);
}

.product-card__rating {
  --star-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* Two rows of real <svg> icons stacked on top of each other: the track sets the
   width, the fill is clipped to the rating percentage. No dependency on
   WooCommerce's stylesheet or its `star` webfont. */
.product-card__stars {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.product-card__stars-track,
.product-card__stars-fill {
  display: flex;
  gap: 2px;
}

.product-card__stars-track {
  color: var(--color-border);
}

.product-card__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--color-star);
}

/* The shared .icon rule draws stroked outlines; a rating star is solid. */
.product-card__star {
  flex-shrink: 0;
  width: var(--star-size);
  height: var(--star-size);
  fill: currentColor;
  stroke: none;
}

.product-card__rating-count {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-light);
}

/* An unrated jar still shows the row, so it has to sit back: the empty track
   fades and the label is the quietest text on the card, or five grey stars
   would read as a bad score rather than as no score. */
.product-card__rating.is-unrated .product-card__stars-track {
  opacity: 0.6;
}

.product-card__rating.is-unrated .product-card__rating-count {
  font-size: 11px;
  letter-spacing: var(--ls-ui);
  opacity: 0.85;
}

.product-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* WooCommerce prints the old price in <del> and the new one in <ins>. Left
   unstyled the <ins> underline reads as a link and the two prices weigh the
   same, so the discount does not land. */
.product-card__price-row del {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-light);
  text-decoration: line-through;
}

.product-card__price-row ins {
  text-decoration: none;
  background: none;
  color: var(--color-accent-deep);
}

.product-card__price-row .woocommerce-Price-currencySymbol {
  font-size: 0.85em;
}

.product-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: var(--btn-min-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: capitalize;
}

.product-card__view {
  width: 100%;
  margin-top: 0;
  transition: background var(--transition), color var(--transition);
}

.product-card__view:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.product-card__view--soldout {
  border-color: var(--color-border);
  color: var(--color-text-light);
}

.product-card__view--soldout:hover {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.product-card__price {
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.product-card__compare {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
}

.product-card__actions {
  margin-top: 12px;
}

.product-card__cart-btn,
.product-card a.add_to_cart_button,
.product-card a.button,
.product-card a.added_to_cart,
.nahl-product__cart .single_add_to_cart_button,
.nahl-product__cart button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce #respond input#submit.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--btn-min-height);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: capitalize;
  text-decoration: none;
  text-align: center;
  box-shadow: none !important;
  transition: background var(--transition), opacity var(--transition);
}

/* Card actions sit centred at their natural width. The shared rule above keeps
   width:100% for the single product page and WooCommerce's own alt buttons,
   which do want to fill their container. */
.product-card__cart-btn,
.product-card a.add_to_cart_button,
.product-card a.button,
.product-card__view {
  width: auto;
}

/* Add to cart carries the cart mark. It is a masked pseudo-element rather than
   an inline <svg>: the confirmation swap in theme.js assigns button.textContent,
   which would wipe a child element the moment the label became "Added". */
.product-card__cart-btn,
.product-card a.add_to_cart_button,
.nahl-product__cart .single_add_to_cart_button,
.nahl-product__cart button.button {
  gap: 8px;
}

.product-card__cart-btn::before,
.product-card a.add_to_cart_button::before,
.nahl-product__cart .single_add_to_cart_button::before,
.nahl-product__cart button.button::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-cart) center / contain no-repeat;
  mask: var(--icon-cart) center / contain no-repeat;
}

.product-card a.added_to_cart {
  display: none !important;
}

/* Label swap masked by a short blur — see swapLabel() in theme.js. The single
   product page carries the same rule in product.css, which does not load here. */
.product-card .button.is-swapping {
  filter: blur(3px);
  opacity: 0.65;
}

.product-card a.add_to_cart_button.loading {
  opacity: 0.65;
  pointer-events: none;
}

.product-card__cart-btn:hover,
.product-card a.add_to_cart_button:hover,
.product-card a.button:hover,
.nahl-product__cart .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-primary-hover) !important;
  color: var(--color-white) !important;
}

.product-card a.add_to_cart_button.loading,
.nahl-product__cart .single_add_to_cart_button.loading {
  opacity: 0.65;
  pointer-events: none;
}

.nahl-product__cart .single_add_to_cart_button,
.nahl-product__cart button.button {
  width: auto;
  min-width: 180px;
}

.cart-count.is-empty {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Section: Footer                                                            */
/* -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-footer);
  color: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(196, 154, 82, 0.45);
}

.site-footer a:hover {
  color: var(--color-white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 36px;
  padding-block: 100px;
}

.site-footer .logo__name,
.site-footer .logo__leaf {
  color: var(--color-white);
}

.site-footer .custom-logo {
  max-height: 48px;
}

.footer-brand__text {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.7;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.7);
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition);
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Solid brand marks (Facebook, TikTok) paint with fill, not the outline stroke. */
.social-links .icon--fill {
  fill: currentColor;
  stroke: none;
}

.footer-col__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 18px;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col__list a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-social__text {
  font-size: 16px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer .social-links {
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.footer-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.footer-trust__item svg {
  width: 16px;
  height: 16px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 18px;
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__credit a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Closing CTA — the band above the footer                                    */
/* -------------------------------------------------------------------------- */

/* One quiet closing section for the whole site: a hairline, a line of serif and
   a single button. Deliberately not a sales banner — by the time a visitor
   reaches it they have already read the page, and all they need is somewhere to
   go. The homepage, cart and checkout opt out in nahlfoods_show_site_cta().

   The muted ground rather than --color-bg: the page ground already is
   --color-bg, so on a template whose last section sits on it the band would
   have nothing but its border to separate it. One step deeper reads as a band
   against both the cream ground and an ivory section above it. */
.site-cta {
  padding-block: clamp(64px, 8vw, 116px);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
}

.site-cta__inner {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.site-cta__inner::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 auto 30px;
  background: var(--color-honey);
}

/* The editorial serif, self-hosted in fonts.css. It is the one place Cormorant
   appears outside the Our Story page, and it is below the fold on every
   template — so the file is fetched lazily and only preloaded where a Cormorant
   headline is the LCP element. See nahlfoods_preload_fonts(). */
.site-cta__title {
  font-family: "Cormorant Garamond", var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: var(--fw-display-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

/* The vision runs to two or three lines in this measure; balancing keeps the
   last one from trailing off as a two-word orphan under a centred heading. */
.site-cta__text {
  margin: 16px 0 30px;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  text-wrap: balance;
}
/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 64px;
  }

  .announcement-bar__inner {
    padding: 7px var(--page-gutter);
    letter-spacing: 0.04em;
  }

  /* Menu toggle, logo, actions. Equal 1fr side tracks so the logo sits in the
     true centre even though the left holds one button and the right two.
     .nav-main is absolutely positioned below, so it claims no track here. */
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
  }

  .logo {
    align-items: center;
  }

  .logo .custom-logo {
    max-height: 40px;
    max-width: min(180px, 48vw);
  }

  .menu-toggle {
    display: inline-flex;
    justify-self: start;
  }

  .nav-main {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 8px var(--page-gutter) 12px;

    /* clip-path rather than display/height: composited, no layout cost, and it
       reveals the panel edge-first so the links cascade in on their own — no
       stagger needed on top. `visibility` is delayed by the full duration on
       close so the panel stays on screen while it animates out. */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    transition: clip-path var(--dur-menu) var(--ease-drawer),
      opacity var(--dur-menu) var(--ease-out),
      visibility 0s linear var(--dur-menu);
  }

  .nav-main.is-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    transition: clip-path var(--dur-menu) var(--ease-drawer),
      opacity var(--dur-menu) var(--ease-out),
      visibility 0s;
  }

  /* No JS: never leave the menu unreachable. */
  html:not(.js) .nav-main {
    clip-path: none;
    opacity: 1;
    visibility: visible;
  }

  .nav-main__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-main__link.is-active::after {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  .features-bar__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .hero__content {
    max-width: 460px;
    padding-block: 56px 88px;
  }

  .honey-journey__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stacked, the copy is the only thing setting the measure, so it can
     run the full column without the 52ch cap fighting the gutters. */
  .honey-journey__copy {
    max-width: none;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  :root {
    --section-space: 48px;
    --page-gutter: 16px;
  }

  .site-cta__text {
    font-size: var(--fs-md);
  }

  .features-bar {
    margin-top: -28px;
  }

  .features-bar__inner {
    grid-template-columns: 1fr 1fr;
  }

  .feature-item:last-child {
    grid-column: 1 / -1;
  }

  /* Two up, not one: a single card per screen turns browsing into scrolling. */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-brand,
  .footer-col--social {
    grid-column: 1 / -1;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(245, 239, 226, 0.9) 0%,
      rgba(245, 239, 226, 0.78) 55%,
      rgba(245, 239, 226, 0.35) 100%
    );
  }

  .logo__name {
    font-size: 22px;
  }

  /* 76px of disc on a 360px frame is a third of the poster. Shrink it and
     the photograph gets its subject back; 60px is still well past the
     44px touch minimum. */
  .video-card__play {
    width: 60px;
    height: 60px;
  }

  .video-card__play svg {
    width: 22px;
    height: 22px;
  }

  .video-card__label {
    left: 14px;
    bottom: 12px;
    letter-spacing: 0.1em;
  }

  .honey-journey__steps {
    gap: 16px;
  }

  .honey-journey__cta .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero__trust {
    gap: 12px 16px;
  }
}

/* -------------------------------------------------------------------------- */
/* Reduced motion — mobile drawer                                             */
/* -------------------------------------------------------------------------- */

/* The drawer still fades (opacity aids comprehension of the state change);
   the clip-path reveal, which is pure movement, is dropped. */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .nav-main {
    clip-path: none;
    transition: opacity var(--dur-menu) linear,
      visibility 0s linear var(--dur-menu);
  }

  .nav-main.is-open {
    clip-path: none;
    transition: opacity var(--dur-menu) linear, visibility 0s;
  }
}

/* -------------------------------------------------------------------------- */
/* Touch — neutralise latched hover states                                    */
/* -------------------------------------------------------------------------- */

/* A tap on a touch screen fires :hover and leaves it stuck until you tap
   elsewhere. Reset the transform-driven ones to rest. Colour and shadow
   shifts are harmless and stay. */
@media (hover: none), (pointer: coarse) {
  .video-card__trigger:hover .video-card__poster {
    transform: none;
  }

  .video-card__trigger:hover .video-card__play {
    transform: translate(-50%, -50%);
  }

  /* On touch the ring is permanent rather than latched: there is no
     hover to reveal it, so it simply reads as part of the disc. */
  .video-card__play::before {
    opacity: 1;
    transform: scale(1);
  }
}