/* ==========================================================================
   Beehave Honey — main stylesheet
   --------------------------------------------------------------------------
   One stylesheet for the whole site. Mobile-first; each component keeps its
   breakpoint overrides right next to its base rules.

   TABLE OF CONTENTS
     1.  Fonts
     2.  Design tokens
     3.  Fluid design unit (--px)
     4.  Reset & base
     5.  Utilities
     6.  Button
     7.  Social icons
     8.  Site header
     9.  Menu toggle (hamburger ⇄ X)
     10. Site menu (hamburger overlay)
     11. Hero
     12. Flavors (product grid / carousel)
     13. Site footer
     14. Product page
     15. About page
     16. Text pages (Contact, Shipping, Privacy Policy)
     17. Reduced motion

   BREAKPOINTS (mirror the three design files)
     Mobile   0 – 767px     design: 400px   (…_400x768.pdf)
     Tablet   768 – 1023px  design: 768px   (…_768x768.pdf)
     Desktop  ≥ 1024px      design: 1366px  (…_1366x768.pdf)

   Keep these in sync with BREAKPOINT_DESKTOP in js/main.js.
   ========================================================================== */


/* ==========================================================================
   1. Fonts
   Latin subsets generated by scripts/build-assets.py.
   ⚠ Licensing: see README.md → "Fonts" before going to production.
   ========================================================================== */

@font-face {
  font-family: "WildKind";
  src: url("../assets/fonts/wildkind-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mermaid";
  src: url("../assets/fonts/mermaid-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Variable Concept";
  src: url("../assets/fonts/myriad-variable-concept.woff2") format("woff2-variations"),
       url("../assets/fonts/myriad-variable-concept.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 70% 110%;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
  /* Colours (from the design PDFs) */
  --color-ink: #363125;           /* dark brown — header, footer, body text */
  --color-honey: #fdbd1f;         /* brand yellow — buttons, rollovers */
  --color-white: #fff;

  /* Type families
     WildKind  — display: headings, nav, buttons
     Mermaid   — product descriptions, footer links
     Myriad    — small print ("12oz bottle") */
  --font-display: "WildKind", "Georgia", serif;
  --font-serif: "Mermaid", "Georgia", serif;
  --font-sans: "Myriad Variable Concept", "Myriad Pro", "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --z-carousel-controls: 2;
  --z-header: 100;
}


/* ==========================================================================
   3. Fluid design unit
   --------------------------------------------------------------------------
   `--px` is "one pixel of the design file for the current breakpoint".
   Every measurement from the PDFs is written as `calc(<value> * var(--px))`,
   so the layout is pixel-perfect at 400 / 768 / 1366px and scales
   proportionally in between. Above 1366px it stops growing (1px).
   ========================================================================== */

:root {
  --px: calc(100vw / 400);
}

@media (min-width: 768px) {
  :root {
    --px: calc(100vw / 768);
  }
}

@media (min-width: 1024px) {
  :root {
    --px: min(calc(100vw / 1366), 1px);
  }
}


/* ==========================================================================
   4. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Short pages (e.g. Contact): the footer still sits at the bottom of the window. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-serif);
  line-height: 1.2;
  /* The design was set without pair kerning (PDF text widths match the
     unkerned advances), so kerning is disabled to keep the same line lengths. */
  font-kerning: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll lock while the hamburger menu is open (class set by JS). */
html.is-menu-open {
  overflow: hidden;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* ==========================================================================
   5. Utilities
   ========================================================================== */

/* Hidden visually, still announced by screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite {
  display: none;
}

/* Line break that only applies to the mobile layout (designer's manual breaks). */
@media (min-width: 768px) {
  .br-mobile {
    display: none;
  }
}

/* Keyboard users can jump over the header. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: calc(var(--z-header) + 1);
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-honey);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}


/* ==========================================================================
   6. Button — "Learn More"
   Yellow pill; colours invert on hover (LearnMore_RollOver_*.svg).
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(129.25 * var(--px));
  height: calc(35.83 * var(--px));
  /* Shifts the optical centre of the label onto the design baseline. */
  padding-top: calc(3.18 * var(--px));
  border-radius: calc(6.29 * var(--px));
  background: var(--color-honey);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: calc(22.75 * var(--px));
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.button:hover {
  background: var(--color-ink);
  color: var(--color-honey);
}

.button:focus-visible {
  outline-color: var(--color-ink);
}

@media (min-width: 768px) {
  .button {
    width: calc(246.03 * var(--px));
    height: calc(68.21 * var(--px));
    padding-top: calc(6.08 * var(--px));
    border-radius: calc(11.97 * var(--px));
    font-size: calc(43.31 * var(--px));
  }
}

@media (min-width: 1024px) {
  .button {
    width: calc(215.04 * var(--px));
    height: calc(59.62 * var(--px));
    padding-top: calc(5.3 * var(--px));
    border-radius: calc(10.47 * var(--px));
    font-size: calc(37.86 * var(--px));
  }
}


/* ==========================================================================
   7. Social icons (footer + menu)
   `--icon-scale` = icon size relative to the desktop footer icons.
   Hit area is enlarged with padding that is cancelled by a negative margin,
   so the visual position stays exactly as designed.
   ========================================================================== */

.social {
  display: flex;
  align-items: flex-end;
}

.social__link {
  display: block;
  padding: 8px;
  margin: -8px;
  transition: color var(--duration-fast) ease;
}

.icon {
  display: block;
  fill: currentColor;
}

.icon--facebook {
  width: calc(13.27 * var(--icon-scale) * var(--px));
  height: calc(24.97 * var(--icon-scale) * var(--px));
}

.icon--instagram {
  width: calc(25.47 * var(--icon-scale) * var(--px));
  height: calc(25.47 * var(--icon-scale) * var(--px));
}

.icon--tiktok {
  width: calc(21.55 * var(--icon-scale) * var(--px));
  height: calc(25.18 * var(--icon-scale) * var(--px));
}

/* Footer: white → yellow on hover */
.social--footer {
  --icon-scale: 0.424;
  gap: calc(15.5 * var(--px));
  color: var(--color-white);
}

.social--footer .social__link:hover {
  color: var(--color-honey);
}

@media (min-width: 768px) {
  .social--footer {
    --icon-scale: 0.565;
    gap: calc(20.6 * var(--px));
  }
}

@media (min-width: 1024px) {
  .social--footer {
    --icon-scale: 1;
    gap: calc(36.6 * var(--px));
  }
}

/* Menu: yellow → white on hover */
.social--menu {
  --icon-scale: 0.918;
  justify-content: center;
  gap: calc(33.5 * var(--px));
  color: var(--color-honey);
}

.social--menu .social__link:hover {
  color: var(--color-white);
}

@media (min-width: 768px) {
  .social--menu {
    --icon-scale: 1.477;
    gap: calc(54.1 * var(--px));
  }
}


/* ==========================================================================
   8. Site header
   Heights are 60% of the design files (header reduced by 40% on request),
   the logo is 75% of its design size (also on request); navigation and
   toggle keep their design size. Everything is centred vertically.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-ink);
}

/* Mobile & tablet: inline logo left, hamburger right */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(52.14 * var(--px));
  padding-left: calc(27.76 * var(--px));
  padding-right: calc(24.11 * var(--px));
}

.site-header__logo img {
  width: calc(162.1 * var(--px));
  height: auto;
}

/* Desktop navigation is not part of the mobile/tablet header */
.site-nav {
  display: none;
}

@media (min-width: 768px) {
  .site-header__bar {
    height: calc(74.22 * var(--px));
    padding-left: calc(39.62 * var(--px));
    padding-right: calc(33.75 * var(--px));
  }

  .site-header__logo img {
    width: calc(286.7 * var(--px));
  }
}

/* Desktop: nav left, stacked logo centred, no hamburger */
@media (min-width: 1024px) {
  .site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: calc(140.52 * var(--px));
    padding-inline: 0;
  }

  .site-header__logo img {
    width: calc(224.51 * var(--px));
  }

  .site-nav {
    display: block;
    padding-left: calc(58.8 * var(--px));
  }

  .site-nav__list {
    display: flex;
    gap: calc(25.5 * var(--px));
  }

  .site-nav__link {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: calc(27 * var(--px));
    line-height: 1.2;
    transition: color var(--duration-fast) ease;
  }

  .site-nav__link:hover {
    color: var(--color-honey);
  }
}


/* ==========================================================================
   9. Menu toggle — hamburger that morphs into an "X"
   The three bars have different lengths, as drawn in HamburgerMenu_*.svg.
   ========================================================================== */

.menu-toggle {
  --bar-height: calc(2.22 * var(--px));
  --x-length: calc(26.4 * var(--px));

  position: relative;
  z-index: 1; /* above the open menu overlay */
  flex-shrink: 0;
  width: calc(32.75 * var(--px));
  height: calc(24.47 * var(--px));
  color: var(--color-white);
}

.menu-toggle__bar {
  position: absolute;
  left: 50%;
  height: var(--bar-height);
  border-radius: var(--bar-height);
  background: currentColor;
  transform: translateX(-50%);
  transition:
    width var(--duration-base) var(--ease-out),
    top var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-fast) ease;
}

.menu-toggle__bar:nth-of-type(1) { top: calc(3.97 * var(--px));  width: calc(18.38 * var(--px)); }
.menu-toggle__bar:nth-of-type(2) { top: calc(11.11 * var(--px)); width: calc(24.49 * var(--px)); }
.menu-toggle__bar:nth-of-type(3) { top: calc(18.26 * var(--px)); width: calc(17.23 * var(--px)); }

/* Open state → "X" */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
  top: calc(50% - var(--bar-height) / 2);
  width: var(--x-length);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(1) {
  transform: translateX(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(3) {
  transform: translateX(-50%) rotate(-45deg);
}

@media (min-width: 768px) {
  .menu-toggle {
    --bar-height: calc(3.98 * var(--px));
    --x-length: calc(44.6 * var(--px));

    width: calc(54.59 * var(--px));
    height: calc(45.93 * var(--px));
  }

  .menu-toggle__bar:nth-of-type(1) { top: calc(7.73 * var(--px));  width: calc(32.95 * var(--px)); }
  .menu-toggle__bar:nth-of-type(2) { top: calc(20.54 * var(--px)); width: calc(43.9 * var(--px)); }
  .menu-toggle__bar:nth-of-type(3) { top: calc(33.35 * var(--px)); width: calc(30.88 * var(--px)); }
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}


/* ==========================================================================
   10. Site menu — full-screen hamburger overlay (mobile & tablet)
   Visibility is driven by `aria-expanded` on the toggle → `.is-open` here.
   ========================================================================== */

.site-menu {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

.site-menu:focus {
  outline: none; /* receives focus programmatically when opened, see initMenu() */
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s;
}

.site-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(68.3 * var(--px));
  padding-bottom: calc(36.3 * var(--px));
  text-align: center;
}

.site-menu__logo {
  width: calc(185.8 * var(--px));
  height: auto;
}

.site-menu__list {
  margin-top: calc(32.55 * var(--px));
}

.site-menu__link {
  display: block;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: calc(38.74 * var(--px));
  line-height: calc(59.6 * var(--px));
  transition: color var(--duration-fast) ease;
}

.site-menu__link:hover {
  color: var(--color-honey);
}

.site-menu .social {
  margin-top: calc(78.55 * var(--px));
}

@media (min-width: 768px) {
  .site-menu__inner {
    padding-top: calc(99.06 * var(--px));
    padding-bottom: calc(57.7 * var(--px));
  }

  .site-menu__logo {
    width: calc(299.35 * var(--px));
  }

  .site-menu__list {
    margin-top: calc(52.56 * var(--px));
  }

  .site-menu__link {
    font-size: calc(62.41 * var(--px));
    line-height: calc(96 * var(--px));
  }

  .site-menu .social {
    margin-top: calc(126.57 * var(--px));
  }
}

@media (min-width: 1024px) {
  .site-menu {
    display: none;
  }
}


/* ==========================================================================
   11. Hero — full-bleed looping video
   Aspect ratios are the visible hero area of each design file.
   ========================================================================== */

.hero {
  position: relative;
  aspect-ratio: 400 / 228.1;
  overflow: hidden;
  background: #c8992f; /* average poster colour while the poster/video loads */
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero {
    aspect-ratio: 768 / 435;
  }
}

@media (min-width: 1024px) {
  .hero {
    aspect-ratio: 1366 / 769;
  }
}


/* ==========================================================================
   12. Flavors — "What's your honey flavor?"
   --------------------------------------------------------------------------
   <1024px  Carousel. All slides share one grid cell (equal heights for free)
            and are moved with `translateX(var(--offset) * 100%)`.
            JS writes --offset: 0 = centre, -1/1 = peeking neighbours,
            ±2 = parked off-screen. Slide width = 52% of the viewport.
   ≥1024px  Static 4-column grid, --offset is ignored.

   Cards = bottle cut-outs; the floor is ONE layer behind all cards
   (.flavors__floor), so cards can slide and bottles can scale freely.

   Scene geometry comes from the 1920×1080 product renders the design used.
   It is expressed in "render units": one card is 373 units wide, and
   --r = one unit (card width / 373; the viewport is a size container, so
   it is computed from cqw). --media-h is the bottle area height in units,
   which differs slightly per breakpoint to match each design.
   ========================================================================== */

.flavors {
  padding-bottom: calc(114.23 * var(--px));
}

.flavors__title {
  margin-top: calc(26.92 * var(--px));
  font-family: var(--font-display);
  font-size: calc(31.94 * var(--px));
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* Space between the title and the bottles: larger than in the designs
   (client request), so an enlarged bottle keeps clear of the title. */
.flavors__viewport {
  --card-w: 52cqw;
  --r: calc(var(--card-w) / 373);
  --media-h: 792.7; /* design 765.8 + extra floor under the bottles (client request) */

  position: relative;
  container-type: inline-size;
  margin-top: calc(20.35 * var(--px)); /* design: −4.65 */
  overflow: hidden;
}

/* Floor (Floor.webp): full-bleed band from the floor line to the bottom of
   the bottle area; cards slide over it. */
.flavors__floor {
  position: absolute;
  inset-inline: 0;
  top: calc(578 * var(--r));
  height: calc((var(--media-h) - 578) * var(--r));
  background: #8a6408 url("../assets/images/flavors-floor.webp") center top / cover no-repeat;
}

.flavors__track {
  position: relative; /* above the floor */
  display: grid;
  width: 52%;
  margin-inline: auto;
  touch-action: pan-y; /* horizontal swipes are handled in JS */
}

/* ---- Card ---------------------------------------------------------------- */

.flavor-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(calc(var(--offset, 0) * 100%));
  transition: transform var(--duration-base) var(--ease-out);
}

/* JS adds this for one frame when a slide wraps around from one side to the other. */
.flavor-card.is-instant {
  transition: none;
}

/* <a>: the bottle area links to the product page (see initFlavorCarousel). */
.flavor-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--media-h) * var(--r));
}

/* Bottle standing on the floor line, centred in its card. */
.flavor-card__bottle {
  position: absolute;
  top: calc(91.2 * var(--r));
  left: 50%;
  width: calc(219.7 * var(--r));
  max-width: none;
  height: auto;
  translate: -50% 0;
  transform-origin: 50% 98%;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Contact shadow, so the cut-out sits on the floor. */
.flavor-card__media::after {
  content: "";
  position: absolute;
  top: calc(714 * var(--r));
  left: 50%;
  width: calc(230 * var(--r));
  height: calc(28 * var(--r));
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(40 24 0 / 0.55), rgb(40 24 0 / 0));
  transition: transform var(--duration-base) var(--ease-out);
}

/* "Enlarges": the bottle grows 8% from its base, so it keeps clear of the
   title above and of the bottom edge of the floor. Carousel: the centred
   slide after a move; desktop: hover / keyboard focus (desktop block below). */
.flavor-card.is-featured .flavor-card__bottle {
  transform: scale(1.08);
}

.flavor-card.is-featured .flavor-card__media::after {
  transform: scale(1.08);
}

.flavor-card__name {
  margin-top: calc(22.86 * var(--px));
  font-family: var(--font-display);
  font-size: calc(25.48 * var(--px));
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.flavor-card__description {
  margin-top: calc(4.66 * var(--px));
  font-family: var(--font-serif);
  font-size: calc(13.22 * var(--px));
  font-weight: 700;
  line-height: calc(15.6 * var(--px));
  white-space: nowrap;
}

.flavor-card__size {
  margin-top: calc(0.45 * var(--px));
  /* Minimum gap to the button; the button is pushed down (margin-top: auto)
     so all buttons line up even when a description wraps onto two lines. */
  margin-bottom: calc(6.85 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(11.42 * var(--px));
  font-weight: 400;
  font-stretch: 100%;
  line-height: calc(15.6 * var(--px));
}

.flavor-card__cta {
  margin-top: auto;
}

/* ---- Carousel arrows (LeftArrow_*.svg / RightArrow_*.svg) ---------------- */

.flavors__arrow {
  position: absolute;
  top: calc(204 * var(--px));
  z-index: var(--z-carousel-controls);
  display: grid;
  place-items: center;
  width: calc(50.8 * var(--px));
  height: calc(50.8 * var(--px));
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: calc(3.9 * var(--px)) calc(3.9 * var(--px)) calc(6.6 * var(--px)) rgb(0 0 0 / 0.35);
  color: #fabb1e;
  transition: transform var(--duration-fast) ease;
}

.flavors__arrow:active {
  transform: scale(0.94);
}

.flavors__arrow:focus-visible {
  outline-color: var(--color-ink);
}

.flavors__arrow--prev {
  left: calc(23.7 * var(--px));
}

.flavors__arrow--next {
  right: calc(24.1 * var(--px));
}

.flavors__arrow-icon {
  width: 100%;
  height: 100%;
}

.flavors__arrow--next .flavors__arrow-icon {
  transform: scaleX(-1);
}

/* ---- Tablet -------------------------------------------------------------- */

@media (min-width: 768px) {
  .flavors {
    padding-bottom: calc(57.71 * var(--px));
  }

  .flavors__title {
    margin-top: calc(51.34 * var(--px));
    font-size: calc(60.8 * var(--px));
  }

  /* Design: media 759.8 units, margin −9.7px. Extra room above and below the
     bottles (client request), so the enlarged bottle clears the title and the
     edge of the floor. */
  .flavors__viewport {
    --media-h: 776.6;

    margin-top: calc(20.3 * var(--px)); /* design: −9.7 */
  }

  .flavor-card__name {
    margin-top: calc(43.79 * var(--px));
    font-size: calc(48.49 * var(--px));
  }

  .flavor-card__description {
    margin-top: calc(8.77 * var(--px));
    font-size: calc(25.17 * var(--px));
    line-height: calc(29.7 * var(--px));
  }

  .flavor-card__size {
    margin-top: calc(0.86 * var(--px));
    margin-bottom: calc(13.08 * var(--px));
    font-size: calc(21.74 * var(--px));
    line-height: calc(29.7 * var(--px));
  }

  .flavors__arrow {
    top: calc(420.6 * var(--px));
    width: calc(91.66 * var(--px));
    height: calc(91.66 * var(--px));
    box-shadow: calc(7 * var(--px)) calc(7 * var(--px)) calc(12 * var(--px)) rgb(0 0 0 / 0.35);
  }

  .flavors__arrow--prev {
    left: calc(46.3 * var(--px));
  }

  .flavors__arrow--next {
    right: calc(47.4 * var(--px));
  }
}

/* ---- Desktop: static grid ------------------------------------------------ */

@media (min-width: 1024px) {
  .flavors {
    padding-bottom: calc(129.21 * var(--px));
  }

  .flavors__title {
    margin-top: calc(77 * var(--px));
    font-size: calc(79.14 * var(--px));
  }

  .flavors__viewport {
    --card-w: 25cqw;
    --media-h: 774.6;

    margin-top: calc(16.33 * var(--px)); /* design: −18.67 */
  }

  .flavors__track {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    touch-action: auto;
  }

  .flavor-card {
    grid-area: auto;
    transform: none;
    transition: none;
  }

  .flavor-card__name {
    margin-top: calc(38.13 * var(--px));
    font-size: calc(42.39 * var(--px));
  }

  .flavor-card__description {
    margin-top: calc(7.7 * var(--px));
    font-size: calc(22 * var(--px));
    line-height: calc(26 * var(--px));
  }

  .flavor-card__size {
    margin-top: calc(0.75 * var(--px));
    margin-bottom: calc(11.35 * var(--px));
    font-size: calc(19 * var(--px));
    line-height: calc(26 * var(--px));
  }

  .flavors__arrow {
    display: none;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .flavor-card:is(:hover, :focus-within) .flavor-card__bottle {
    transform: scale(1.08);
  }

  .flavor-card:is(:hover, :focus-within) .flavor-card__media::after {
    transform: scale(1.08);
  }
}


/* ==========================================================================
   13. Site footer
   Height follows the illustration's aspect ratio; the bar is laid out
   from the bottom edge so it stays put however tall the artwork gets.
   ========================================================================== */

.site-footer {
  position: relative;
  aspect-ratio: 400 / 158.46;
  background: var(--color-ink) url("../assets/images/footer-mobile.svg") center top / 100% auto no-repeat;
  color: var(--color-white);
}

.site-footer__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "social    links"
    "copyright copyright";
  align-items: end;
  padding-left: calc(18 * var(--px));
  padding-right: calc(16.6 * var(--px));
  padding-bottom: calc(8.4 * var(--px));
}

.site-footer .social {
  grid-area: social;
  margin-bottom: calc(1.77 * var(--px));
}

.footer-nav {
  grid-area: links;
  justify-self: end;
}

.footer-nav__list {
  display: flex;
  gap: calc(13.2 * var(--px));
}

.footer-nav__link {
  display: block;
  font-family: var(--font-serif);
  font-size: calc(8.69 * var(--px));
  font-weight: 700;
  line-height: 1;
  transition: color var(--duration-fast) ease;
}

.footer-nav__link:hover {
  color: var(--color-honey);
}

.site-footer__copyright {
  grid-area: copyright;
  margin-top: calc(10.83 * var(--px));
  font-family: var(--font-serif);
  font-size: calc(8 * var(--px));
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .site-footer {
    aspect-ratio: 768 / 304.56;
    background-image: url("../assets/images/footer-tablet.svg");
  }

  .site-footer__bar {
    padding-left: calc(33.1 * var(--px));
    padding-right: calc(31.9 * var(--px));
    padding-bottom: calc(16.06 * var(--px));
  }

  .site-footer .social {
    margin-bottom: calc(3.7 * var(--px));
  }

  .footer-nav__list {
    gap: calc(22.8 * var(--px));
  }

  .footer-nav__link {
    font-size: calc(15.22 * var(--px));
  }

  .site-footer__copyright {
    margin-top: calc(24.29 * var(--px));
    font-size: calc(10.15 * var(--px));
  }
}

@media (min-width: 1024px) {
  .site-footer {
    aspect-ratio: 1366 / 534.67;
    background-image: url("../assets/images/footer-desktop.svg");
  }

  .site-footer__bar {
    padding-left: calc(62.2 * var(--px));
    padding-right: calc(57.6 * var(--px));
    padding-bottom: calc(25.6 * var(--px));
  }

  .site-footer .social {
    margin-bottom: calc(7.25 * var(--px));
  }

  .footer-nav__list {
    gap: calc(40.5 * var(--px));
  }

  .footer-nav__link {
    font-size: calc(27 * var(--px));
  }

  .site-footer__copyright {
    margin-top: calc(43.15 * var(--px));
    font-size: calc(18 * var(--px));
  }
}


/* ==========================================================================
   14. Product page (sweet-bee.html, sweet-cinna-bee.html, spicy-bee.html,
       spicy-cinna-bee.html)
   --------------------------------------------------------------------------
   One template for all products.

   The tablet design is the desktop design scaled by 0.5675, and the mobile
   design re-uses the tablet type sizes. So every measurement below is the
   DESKTOP value (…_ProductPage_1366x768.pdf) multiplied by --u:
       --u = --k × --px      --k: 1 on desktop, 0.5675 on tablet & mobile
   Only the outer spacing and the mobile stacking order have
   breakpoint-specific values (written in that breakpoint's design px).

   Per-page custom properties (set inline in the HTML):
       --copy-width   on .product           paragraph text frame, desktop px
       --w            on .product__pairings icon strip width, desktop px
   ========================================================================== */

.product {
  --k: 0.5675;
  --u: calc(var(--k) * var(--px));
  --gutter: calc(47.2 * var(--px)); /* mobile: left edge of the text column */

  padding-bottom: calc(63.55 * var(--px));
}

/* Mobile: one column. The two column wrappers are dissolved with
   `display: contents`, so their children can be re-ordered (see below). */
.product__layout {
  display: flex;
  flex-direction: column;
  padding-top: calc(32.8 * var(--px));
}

.product__media,
.product__details {
  display: contents;
}

/* ---- Photos ---------------------------------------------------------------- */

.product__photo {
  width: calc(344.2 * var(--px));
  height: auto;
  align-self: center;
}

/* ---- Add to Cart (AddToCart_*.svg; colours invert on hover like .button) -- */

.button--cart {
  width: calc(270.19 * var(--px));
  height: calc(61.22 * var(--px));
  padding-top: calc(3.32 * var(--px));
  border-radius: calc(10.75 * var(--px));
  font-size: calc(38.88 * var(--px));
}

.product__cart {
  align-self: flex-start;
  margin-top: calc(16.67 * var(--px));
  margin-left: var(--gutter);
}

/* ---- Summary: name, flavor, size, price ------------------------------------ */

.product__summary,
.product__description,
.product__uses,
.product-facts,
.product__note {
  margin-left: var(--gutter);
  margin-right: calc(16 * var(--px));
}

.product__summary {
  margin-top: calc(23.07 * var(--px));
}

.product__title {
  font-family: var(--font-display);
  font-size: calc(79.41 * var(--u));
  font-weight: 400;
  line-height: 1.2;
}

.product__subtitle {
  margin-top: calc(10.83 * var(--u));
  font-family: var(--font-serif);
  font-size: calc(41.21 * var(--u));
  font-weight: 700;
  line-height: calc(49 * var(--u));
}

.product__size {
  margin-top: calc(9.85 * var(--u));
  font-family: var(--font-sans);
  font-size: calc(29 * var(--u));
  font-weight: 400;
  font-stretch: 100%;
  line-height: calc(34.8 * var(--u));
}

.product__price {
  margin-top: calc(15.27 * var(--u));
  font-family: var(--font-display);
  font-size: calc(70.92 * var(--u));
  line-height: 1.2;
}

/* "$ is smaller and aligned with the top of the numbers" (design note):
   the WildKind "$" is already small, it only needs to sit higher. */
.product__currency {
  position: relative;
  top: -0.0564em;
}

/* ---- Copy ------------------------------------------------------------------ */

.product__description,
.product__uses p {
  max-width: calc(var(--copy-width) * var(--u));
  font-family: var(--font-serif);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(45 * var(--u));
}

.product__description {
  margin-top: calc(30.09 * var(--px));
}

/* ---- "Drizzle [icon] on your faves" ---------------------------------------- */

.product__uses {
  margin-top: calc(49.25 * var(--px));
}

.product__uses-title {
  font-family: var(--font-display);
  font-size: calc(55.6 * var(--u));
  font-weight: 400;
  line-height: 1.2;
}

/* Fixed gap between "Drizzle" and "on"; the icon hangs in it, positioned
   from the gap's left edge and the text baseline (the box has no height,
   so its top edge is the baseline). */
.drizzle-icon {
  position: relative;
  display: inline-block;
  width: calc(53.8 * var(--u));
  height: 0;
}

.drizzle-icon img {
  position: absolute;
  left: calc(var(--icon-x) * var(--u));
  top: calc(var(--icon-y) * var(--u));
  width: calc(var(--icon-w) * var(--u));
  max-width: none;
  height: auto;
}

/* Icon boxes include the outline width (the artwork itself is where the
   design puts it): x / y = box offset, w = box width, in desktop px. */
.drizzle-icon--honey-dipper  { --icon-x: -28.51; --icon-y: -57.63; --icon-w: 79.59; }
.drizzle-icon--cinnamon      { --icon-x: 4;      --icon-y: -63;    --icon-w: 98; }
.drizzle-icon--banana-pepper { --icon-x: 2.68;   --icon-y: -52.82; --icon-w: 65.75; }

.product__uses p {
  margin-top: calc(44.9 * var(--u)); /* one empty line between paragraphs */
}

.product__uses-title + p {
  margin-top: calc(23.27 * var(--u));
}

.product__pairings {
  display: block;
  width: calc(var(--w) * var(--u));
  height: auto;
  margin-top: calc(16.9 * var(--u));
}

/* ---- Ingredients | Nutrition ------------------------------------------------ */

.product-facts {
  display: grid;
  grid-template-columns: calc(274.2 * var(--u)) calc(2 * var(--u)) calc(41.6 * var(--u)) calc(205 * var(--u));
  align-items: start;
  margin-top: calc(67.03 * var(--u));
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ingredients {
  grid-column: 1;
  grid-row: 1;
}

.product-facts__divider {
  grid-column: 2;
  grid-row: 1;
  height: calc(385.5 * var(--u));
  margin-top: calc(11.99 * var(--u));
  background: var(--color-honey);
}

.nutrition {
  grid-column: 4;
  grid-row: 1;
}

.product-facts__title {
  font-family: var(--font-display);
  font-size: calc(55.6 * var(--u));
  font-weight: 400;
  line-height: 1.2;
}

.ingredients__text {
  margin-top: calc(4.89 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: calc(23 * var(--u));
}

.badges {
  display: flex;
  gap: calc(20.2 * var(--u));
  margin-top: calc(37.48 * var(--u));
  margin-left: calc(3.3 * var(--u));
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.badge__icon {
  width: calc(45.5 * var(--u));
  height: calc(45.5 * var(--u));
}

.badge__label {
  margin-top: calc(6.03 * var(--u));
  font-family: var(--font-serif);
  font-size: calc(12.59 * var(--u));
  font-weight: 700;
  line-height: calc(13.85 * var(--u));
  white-space: nowrap;
}

.ingredients__warning {
  margin-top: calc(10.07 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: calc(15 * var(--u));
  text-transform: uppercase;
}

.ingredients__storage {
  margin-top: calc(21.13 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: calc(23 * var(--u));
}

.ingredients__storage strong {
  display: block;
  margin-bottom: calc(1.4 * var(--u));
  color: #c52127;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(18 * var(--u));
  text-transform: uppercase;
}

/* Nutrition label: rules and bars as in NutritionLabel_desktop.svg */
.nutrition {
  --rule: calc(0.432 * var(--u)) solid #000;
}

.nutrition__servings {
  margin-top: calc(5.68 * var(--u));
  font-size: calc(17.3 * var(--u));
  line-height: calc(21 * var(--u));
}

.nutrition__serving-size {
  display: flex;
  justify-content: space-between;
  margin-top: calc(1.27 * var(--u));
  padding-bottom: calc(3.98 * var(--u));
  border-bottom: calc(12.11 * var(--u)) solid var(--color-ink);
  font-size: calc(16.31 * var(--u));
  font-weight: 700;
  line-height: calc(21 * var(--u));
}

.nutrition__calories {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "amount value"
    "label  value";
  align-items: end;
  margin-top: calc(3.6 * var(--u));
  padding-bottom: calc(2.94 * var(--u));
  border-bottom: calc(5.19 * var(--u)) solid var(--color-ink);
  font-weight: 700;
}

.nutrition__amount {
  grid-area: amount;
  font-size: calc(10.38 * var(--u));
  line-height: calc(12 * var(--u));
}

.nutrition__calories-label {
  grid-area: label;
  font-size: calc(23.05 * var(--u));
  line-height: calc(26 * var(--u));
}

/* Line height chosen so its baseline matches the "Calories" label. */
.nutrition__calories-value {
  grid-area: value;
  font-size: calc(36.24 * var(--u));
  line-height: calc(35.78 * var(--u));
}

.nutrition__daily-value {
  margin-top: calc(3.97 * var(--u));
  font-size: calc(10.38 * var(--u));
  line-height: calc(14 * var(--u));
  text-align: right;
}

.nutrition__list {
  margin: calc(3.54 * var(--u)) 0 0;
  border-bottom: calc(5.19 * var(--u)) solid var(--color-ink);
  font-size: calc(13.84 * var(--u));
  line-height: calc(19.89 * var(--u));
}

/* Fixed row heights (the rule spacing in the design): the bold run uses a
   taller font and would otherwise grow the line box. */
.nutrition__row {
  display: flex;
  justify-content: space-between;
  height: calc(20.75 * var(--u));
  border-top: var(--rule);
}

.nutrition__row:last-child {
  height: calc(23.3 * var(--u));
}

.nutrition__row dt {
  font-weight: 400;
}

.nutrition__row dd {
  margin: 0;
  font-weight: 700;
}

/* "Total Sugars" is indented; the rule under it starts at the indent too. */
.nutrition__row--sub dt {
  padding-left: calc(11.3 * var(--u));
}

.nutrition__row--sub-rule {
  height: calc(18.6 * var(--u));
  margin-left: calc(11.3 * var(--u));
}

.nutrition__row sup {
  font-size: 0.75em;
  font-weight: 400;
  line-height: 0;
  vertical-align: 0.18em;
}

/* Revised label artwork (nutrition-label*.svg, includes the "Nutrition"
   heading). Its heading baseline lines up with "Ingredients": the artwork
   starts 11.52 units below the column top (heading line box − glyph height).
   Below 1024px the *-mobile.svg drawing (same artwork, tuned for that size)
   is used via <picture>. */
.nutrition__artwork {
  display: block;
  width: calc(206.17 * var(--u));
  max-width: none;
  height: auto;
  margin-top: calc(11.52 * var(--u));
}

.nutrition__footnote {
  margin-top: calc(5.82 * var(--u));
  font-size: calc(10.6 * var(--u));
  line-height: calc(12.75 * var(--u));
}

/* ---- Footnote under the facts ---------------------------------------------- */

.product__note {
  margin-top: calc(54.12 * var(--u));
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: calc(23 * var(--u));
}

/* ---- Mobile stacking order (…_400x768_mobile.pdf) -------------------------- */

@media (max-width: 767.98px) {
  .product__photo--bottle  { order: 1; }
  .product__summary        { order: 2; }
  .product__cart           { order: 3; }
  .product__description    { order: 4; }
  .product__photo--serving { order: 5; margin-top: calc(33.87 * var(--px)); }
  .product__uses           { order: 6; }
  .product-facts           { order: 7; }
  .product__note           { order: 8; margin-top: calc(37.61 * var(--px)); }
}

/* ---- Tablet: two columns, desktop layout × 0.5675 ---------------------------- */

@media (min-width: 768px) {
  .product {
    padding-bottom: calc(111.8 * var(--px));
  }

  .product__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(59.4 * var(--u));
    padding: calc(38.9 * var(--px)) 0 0 calc(39 * var(--px));
  }

  .product__media,
  .product__details {
    display: flex;
    flex-direction: column;
  }

  .product__media {
    flex: none;
    width: calc(627.8 * var(--u));
  }

  .product__details {
    flex: 1;
    min-width: 0;
  }

  .product__photo {
    width: 100%;
  }

  .product__photo--serving {
    margin-top: calc(9.1 * var(--u));
  }

  .button--cart {
    width: calc(492.92 * var(--u));
    height: calc(111.68 * var(--u));
    padding-top: calc(6.06 * var(--u));
    border-radius: calc(19.61 * var(--u));
    font-size: calc(70.92 * var(--u));
  }

  .product__cart {
    align-self: center;
    margin: calc(53.9 * var(--u)) 0 0;
  }

  .product__summary,
  .product__description,
  .product__uses,
  .product-facts,
  .product__note {
    margin-left: 0;
    margin-right: 0;
  }

  .product__summary {
    margin-top: calc(-12.02 * var(--u)); /* title baseline 54.8px below the photo's top edge */
  }

  .product__description {
    margin-top: calc(21.38 * var(--u));
  }

  .product__uses {
    margin-top: calc(34.61 * var(--u));
  }
}

/* ---- Desktop ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .product {
    --k: 1;

    padding-bottom: calc(199.4 * var(--px));
  }

  .product__layout {
    max-width: calc(1366 * var(--px));
    margin-inline: auto;
    padding: calc(82.8 * var(--px)) 0 0 calc(52.4 * var(--px));
  }
}


/* ==========================================================================
   15. About page (about.html)
   --------------------------------------------------------------------------
   Values per breakpoint in that breakpoint's design px
   (BeehaveHoney_AboutPage_*.pdf; desktop from the INSTRUCTIONS file —
   the desktop layout PDF was exported 1432px wide).
   ========================================================================== */

.about {
  padding-bottom: calc(113.9 * var(--px));
  text-align: center;
}

.about__title {
  max-width: calc(300 * var(--px)); /* wraps after "with" on mobile, as designed */
  margin: calc(30.24 * var(--px)) auto 0;
  font-family: var(--font-display);
  font-size: calc(40 * var(--px));
  font-weight: 400;
  line-height: calc(37 * var(--px));
}

/* Width of the design's text frame: reproduces its line breaks. */
.about__story {
  max-width: calc(320 * var(--px));
  margin: calc(19.17 * var(--px)) auto 0;
  font-family: var(--font-serif);
  font-size: calc(18.16 * var(--px));
  font-weight: 700;
  line-height: calc(25.5 * var(--px));
}

.about__story p + p {
  margin-top: calc(25.5 * var(--px)); /* one empty line between paragraphs */
}

.about__photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6.3 * var(--px));
  margin-top: calc(34.79 * var(--px));
}

.about__photo {
  width: calc(343 * var(--px));
  height: auto;
}

@media (min-width: 768px) {
  .about {
    padding-bottom: calc(69.9 * var(--px));
  }

  .about__title {
    max-width: none;
    margin-top: calc(56.23 * var(--px));
    font-size: calc(42.03 * var(--px));
    line-height: 1.2;
  }

  .about__story {
    max-width: calc(579.3 * var(--px));
    margin-top: calc(15.63 * var(--px));
    font-size: calc(19.21 * var(--px));
    line-height: calc(27 * var(--px));
  }

  .about__story p + p {
    margin-top: calc(27 * var(--px));
  }

  .about__photos {
    gap: calc(10.7 * var(--px));
    margin-top: calc(49.8 * var(--px));
  }

  .about__photo {
    width: calc(577.3 * var(--px));
  }
}

@media (min-width: 1024px) {
  .about {
    padding-bottom: calc(121.9 * var(--px));
  }

  .about__title {
    margin-top: calc(78.7 * var(--px));
    font-size: calc(70 * var(--px));
  }

  .about__story {
    max-width: calc(965 * var(--px));
    margin-top: calc(26.1 * var(--px));
    font-size: calc(32 * var(--px));
    line-height: calc(45 * var(--px));
  }

  .about__story p + p {
    margin-top: calc(45 * var(--px));
  }

  .about__photos {
    gap: calc(17.7 * var(--px));
    margin-top: calc(83 * var(--px));
  }

  .about__photo {
    width: calc(961.5 * var(--px));
  }
}


/* ==========================================================================
   16. Text pages (contact.html, shipping.html, privacy-policy.html)
   --------------------------------------------------------------------------
   Centred title + copy. In all three designs the tablet and mobile type is
   the desktop type × 0.5203, so sizes are desktop px × --u
   (--u = --k × --px, --k: 1 on desktop, 0.5203 below).

   Per-page settings (on .text-page):
     --copy-width    text frame width in the desktop design (px); with the
                     designer's soft hyphens (&shy;) it reproduces the line
                     breaks on desktop and tablet. Mobile uses a 320px frame.
     --end-desktop   space between the copy and the footer on desktop (the
                     designs differ per page), in px
   ========================================================================== */

.text-page {
  --k: 0.5203;
  --u: calc(var(--k) * var(--px));

  padding-bottom: calc(var(--end-mobile, 62) * var(--px));
  text-align: center;
}

.text-page__title {
  margin-top: calc(24.35 * var(--px));
  font-family: var(--font-display);
  font-size: calc(70 * var(--u));
  font-weight: 400;
  line-height: 1.2;
}

.text-page__body {
  max-width: calc(320 * var(--px));
  margin: calc(20.9 * var(--u)) auto 0;
  font-family: var(--font-serif);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(45 * var(--u));
  hyphens: manual; /* only the designer's &shy; break points */
}

.text-page__body p + p {
  margin-top: calc(45 * var(--u)); /* one empty line between paragraphs */
}

.text-page__body h2 {
  margin-top: calc(42.12 * var(--u));
  font-family: var(--font-display);
  font-size: calc(47 * var(--u));
  font-weight: 400;
  line-height: 0.98;
}

.text-page__body h2 + p {
  margin-top: calc(8.82 * var(--u));
}

/* Links in the copy (Contact: "Email address is a link", colour #003e99). */
.text-page__body a {
  color: #003e99;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  transition: color var(--duration-fast) ease;
}

.text-page__body a:hover {
  color: var(--color-ink);
}

.text-page--privacy {
  --end-mobile: 52.7;
}

@media (min-width: 768px) {
  .text-page {
    padding-bottom: calc(106 * var(--px));
  }

  .text-page__title {
    margin-top: calc(61.25 * var(--px));
  }

  .text-page__body {
    max-width: calc(var(--copy-width) * var(--u));
  }
}

@media (min-width: 1024px) {
  .text-page {
    --k: 1;

    padding-bottom: calc(var(--end-desktop) * var(--px));
  }

  .text-page__title {
    margin-top: calc(91.3 * var(--px));
  }
}


/* ==========================================================================
   17. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}