/* ==========================================================================
   Hens Paradise — styles.css
   Ported from the Hens Paradise design system (Claude Design project
   38b281f0-a4af-49b0-a638-9d4bc45ea83f). Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Plus Jakarta Sans is a variable font: one file covers weights 200–800,
   so every weight the design uses comes from a single 27 KB request.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand ramp — one accent only (Vitality Red). Never introduce a second hue. */
  --red-60: #e31e24;
  --red-40: #ba0013;

  /* Warm neutral scale */
  --neutral-99: #fbf9f8;
  --neutral-95: #f5f3f3;
  --neutral-92: #efeded;
  --neutral-40: #5f5e5e;
  --neutral-10: #1b1c1c;
  --rose-70: #e7bdb8;

  /* Semantic roles */
  --primary: var(--red-40);
  --accent: var(--red-60);
  --on-primary: #ffffff;
  --background: var(--neutral-99);
  --on-surface: var(--neutral-10);
  --secondary: var(--neutral-40);
  --surface-lowest: #ffffff;
  --surface-low: var(--neutral-95);
  --surface: var(--neutral-92);
  --outline-variant: var(--rose-70);
  --hairline: rgba(231, 189, 184, 0.35);
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --field-border: #b9b6b6;
  --prose-text: #3d3c3c;

  --success: #15803d;
  --error: #ba1a1a;

  /* Type */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* Spacing */
  --container-max: 1280px;
  --gutter: 1rem;
  --section-gap: 3.5rem;
  /* Must clear the fixed header: logo height + vertical padding */
  --header-height: 4.5rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation — card / glass / glow (glow is the one shadow carrying brand colour) */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 8px 16px rgba(227, 30, 36, 0.3);
  --blur-glass: 20px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --section-gap: 5rem;
    --header-height: 5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 4rem;
  }
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps in-page anchor targets clear of the fixed header */
  scroll-padding-top: 5.5rem;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

button {
  font: inherit;
}

/* Visible focus ring — restyled, never removed */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-default) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section--tinted {
  background: var(--surface-low);
}

.section--panel {
  background: var(--surface-lowest);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section__title {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.section__lead {
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 2rem;
}

.section--center {
  text-align: center;
}

.section--center .section__lead {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Grid items default to min-width:auto, so a wide child (the temperature
   table) would size the track past the viewport instead of scrolling inside
   its own wrapper */
.split > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .section__title {
    font-size: 2.25rem;
  }

  .section__lead {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Flips column order on desktop only, so source order stays logical */
  .split--flip > *:first-child {
    order: 2;
  }
}

/* Rounded frame used for hero and feature imagery */
.media-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-lowest);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Portrait variant — the phone photography is mostly 3:4, which letterboxes
   badly in the default 3:2 frame */
.media-frame--tall {
  aspect-ratio: 4 / 5;
}

/* Cut-out variant for the hero. The chick PNG carries its own alpha, so the
   card treatment only boxes it in — dropping the frame and the padding also
   lets the subject render larger in the same column. */
.media-frame--bare {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Mobile default: full-width, edge to edge. Reset to auto at tablet+
     below, so buttons only shrink to their content on larger screens. */
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

@media (min-width: 768px) {
  .btn {
    width: auto;
  }
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background: linear-gradient(to right, var(--accent), var(--primary));
  color: var(--on-primary);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  color: var(--on-primary);
}

.btn--secondary {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--on-surface);
}

.btn--secondary:hover {
  color: var(--on-surface);
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 0.8125rem;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. ICONS
   -------------------------------------------------------------------------- */

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: currentColor;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

.icon--accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

/* The frosted bar is drawn by a pseudo-element rather than on .site-header
   itself, because backdrop-filter would make the header the containing block
   for the position:fixed mobile drawer inside it — the drawer would then size
   against the 4.5rem header bar instead of the viewport */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 249, 248, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Pins the bar to exactly --header-height, so the drawer and backdrop below
     can offset by that token and sit flush against it with no seam */
  min-height: var(--header-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 2.75rem;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 3.25rem;
  }
}

/* Three bars that morph into an X — the top and bottom slide to the centre
   and rotate, the middle one fades out under them */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: var(--surface-lowest);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  color: var(--on-surface);
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.nav-open .nav-toggle {
  border-color: var(--outline-variant);
  box-shadow: var(--shadow-glow);
}

.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}

.nav-toggle__bar:nth-child(1) {
  top: 0;
}

.nav-toggle__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle__bar:nth-child(3) {
  bottom: 0;
}

.site-header.nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(0.3125rem) rotate(45deg);
}

.site-header.nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.4);
}

.site-header.nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-0.3125rem) rotate(-45deg);
}

/* Dim layer behind the drawer. Kept out of the flow with visibility rather
   than display so it can fade */
.nav-backdrop {
  position: fixed;
  inset: var(--header-height) 0 0;
  background: rgba(27, 28, 28, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile drawer — slides in from the right, under the fixed header so the
   logo and close button stay put */
.site-nav {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: min(20rem, 84vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0.35s;
}

.site-header.nav-open .site-nav {
  transform: translateX(0);
  visibility: visible;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Hairline between rows, but not under the last one */
.site-nav__list li + li .nav-link {
  border-top: 1px solid var(--hairline);
}

/* Each row eases up into place a beat after the one above it, so the menu
   resolves rather than appearing all at once */
.site-nav__list li {
  opacity: 0;
  transform: translateX(1.25rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-header.nav-open .site-nav__list li {
  opacity: 1;
  transform: translateX(0);
}

.site-header.nav-open .site-nav__list li:nth-child(1) {
  transition-delay: 0.08s;
}
.site-header.nav-open .site-nav__list li:nth-child(2) {
  transition-delay: 0.12s;
}
.site-header.nav-open .site-nav__list li:nth-child(3) {
  transition-delay: 0.16s;
}
.site-header.nav-open .site-nav__list li:nth-child(4) {
  transition-delay: 0.2s;
}
.site-header.nav-open .site-nav__list li:nth-child(5) {
  transition-delay: 0.24s;
}
.site-header.nav-open .site-nav__list li:nth-child(6) {
  transition-delay: 0.28s;
}
.site-header.nav-open .site-nav__list li:nth-child(7) {
  transition-delay: 0.32s;
}
.site-header.nav-open .site-nav__list li:nth-child(8) {
  transition-delay: 0.36s;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #474746;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link__chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--outline-variant);
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover .nav-link__chevron {
  color: var(--accent);
  transform: translateX(0.1875rem);
}

.nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.nav-link[aria-current="page"] .nav-link__chevron {
  color: var(--accent);
}

/* Drawer footer — order CTA plus a tap-to-call line */
.site-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--outline-variant);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-header.nav-open .site-nav__foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.34s;
}

/* Call / email / WhatsApp — each one fires its action directly */
.site-nav__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  color: var(--primary);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.nav-action:hover {
  background: linear-gradient(to right, var(--accent), var(--primary));
  border-color: transparent;
  color: var(--on-primary);
  text-decoration: none;
  transform: translateY(-2px);
}

.nav-action:active {
  transform: scale(0.94);
}

.nav-action .icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 1024px) {
  .nav-toggle,
  .nav-backdrop,
  .nav-link__chevron,
  .site-nav__foot {
    display: none;
  }

  /* Back to a plain inline row — none of the drawer treatment applies */
  .site-nav {
    position: static;
    width: auto;
    display: block;
    padding: 0;
    margin-left: auto;
    overflow: visible;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-left: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .site-nav__list li,
  .site-header.nav-open .site-nav__list li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  .site-nav__list li + li .nav-link {
    border-top: none;
  }

  .nav-link {
    display: block;
    padding: 0 0 0.25rem;
    font-size: 0.875rem;
    /* Reserved here rather than on the base rule so it does not add dead
       space under each row of the mobile drawer */
    border-bottom: 2px solid transparent;
  }

  .nav-link[aria-current="page"] {
    border-bottom-color: var(--primary);
  }
}

/* Clears the fixed header */
#main-content {
  padding-top: var(--header-height);
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-top: 3rem;
  padding-bottom: var(--section-gap);
}

.hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero__lead {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 1.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 4.5rem;
  }

  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .hero__title {
    font-size: 3rem;
  }

  .hero__grid--form {
    grid-template-columns: 1fr 1.05fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   10. STATS BAR
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat__value {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat__label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--secondary);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .stat__value {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   11. ABOUT — credential grid
   -------------------------------------------------------------------------- */

.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}

.credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.credential img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.credential span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .credentials {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .credentials {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. SAPA CERTIFICATE
   -------------------------------------------------------------------------- */

.certificate {
  background: var(--surface-lowest);
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-card);
  max-width: 24rem;
  margin: 0 auto;
}

.certificate__caption {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
}

.badge-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   13. FEATURE LIST
   -------------------------------------------------------------------------- */

.feature-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.feature-list .icon {
  color: var(--accent);
  margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   14. PRODUCT CARDS
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card__media {
  height: 12.5rem;
  background: var(--surface-lowest);
  border-bottom: 1px solid var(--hairline);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem;
}

.product-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product-card .feature-list {
  margin-bottom: 1.25rem;
}

.product-card .feature-list li {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary);
}

.product-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Single-product variant: the card is the only item in its grid row, so the
   media sits beside the copy from tablet up rather than leaving a half-empty
   row. Stays stacked on mobile via the base .product-card rules. */
@media (min-width: 768px) {
  .product-card--wide {
    flex-direction: row;
  }

  .product-card--wide .product-card__media {
    flex: 0 0 40%;
    height: auto;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
  }

  .product-card--wide .product-card__body {
    padding: 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   15. INFO CARDS (delivery options, breeds)
   -------------------------------------------------------------------------- */

.info-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

.info-card__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.info-card p {
  font-size: 0.9375rem;
  color: var(--secondary);
}

/* Age range / feed rate line that sits between the card title and its copy.
   Left in sentence case because it runs to two lines when it wraps, and
   uppercase breaks badly mid-phrase at that length. */
.info-card__meta {
  margin: -0.25rem 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   15b. DATA TABLES
   -------------------------------------------------------------------------- */

/* The wrapper carries the border and radius so the corners actually clip, and
   lets a wide table scroll on its own rather than widening the page */
.table-wrap {
  overflow-x: auto;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  /* Temperature ranges must not break across lines */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .data-table {
    font-size: 0.9375rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 1rem;
  }
}

.data-table thead th {
  /* Column headings may wrap; only the data must stay on one line. Without
     this the table needs sideways scrolling on a phone. */
  white-space: normal;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table tbody th {
  font-weight: 700;
}

.data-table tbody td {
  font-weight: 500;
  color: var(--secondary);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--secondary);
}

/* Heading one level below .section__title, used inside a split column */
.subsection__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   15c. FINAL CTA BANNER
   -------------------------------------------------------------------------- */

.cta-banner {
  padding: var(--section-gap) 0;
  background: linear-gradient(to right, var(--accent), var(--primary));
  text-align: center;
}

.cta-banner__title {
  color: var(--on-primary);
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.cta-banner__lead {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--on-primary);
  opacity: 0.92;
  font-weight: 500;
}

/* Inverted so the button reads against the banner's own red gradient
   background rather than disappearing into it */
.cta-banner__btn {
  background: var(--on-primary);
  color: var(--primary);
  box-shadow: none;
}

.cta-banner__btn:hover {
  color: var(--primary);
}

@media (min-width: 768px) {
  .cta-banner__title {
    font-size: 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   16. RESOURCE TILES & GUIDES
   -------------------------------------------------------------------------- */

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

@media (min-width: 768px) {
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.625rem;
  padding: 1.25rem 1rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tile:hover {
  border-color: var(--accent);
  color: var(--on-surface);
  transform: translateY(-2px);
}

.tile .icon {
  color: var(--accent);
  width: 1.875rem;
  height: 1.875rem;
  transition: transform 0.2s ease;
}

.tile:hover .icon {
  transform: scale(1.1);
}

.tile__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* File-type hint, so it is clear what a tile opens before you click it */
.tile__meta {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* --------------------------------------------------------------------------
   16b. GALLERY
   One horizontally scrolling row on every screen size, so 14 photos cost the
   visitor one section of vertical scroll instead of four rows of it. Square
   tiles keep the mixed portrait/landscape phone photography lined up.
   -------------------------------------------------------------------------- */

.gallery {
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Room for the scrollbar so it never sits on top of the last row of image */
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;
}

.gallery-track::-webkit-scrollbar {
  height: 6px;
}

.gallery-track::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-track::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: var(--radius-full);
}

.gallery-item {
  position: relative; /* contains the absolutely-positioned .visually-hidden
                         label, which would otherwise escape the track's
                         clipping and stretch the page horizontally */
  flex: 0 0 auto;
  width: 13rem;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  scroll-snap-align: start;
  cursor: pointer;
  appearance: none;
}

@media (min-width: 768px) {
  .gallery-track {
    gap: 1rem;
  }

  .gallery-item {
    width: 15rem;
  }
}

@media (min-width: 1024px) {
  .gallery-item {
    width: 17rem;
  }
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* Arrow buttons: a mouse cannot scroll a horizontal track without holding
   Shift, so they only appear where a pointer is the likely input. */
.gallery-nav {
  display: none;
}

@media (min-width: 768px) {
  .gallery-nav {
    position: absolute;
    top: calc(50% - 0.375rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    background: var(--surface-lowest);
    color: var(--primary);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .gallery-nav:hover {
    background: var(--surface);
  }

  .gallery-nav--prev {
    left: -0.75rem;
  }

  .gallery-nav--next {
    right: -0.75rem;
  }

  /* Set by script.js once the track hits either end */
  .gallery-nav[disabled] {
    opacity: 0;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   16c. LIGHTBOX
   -------------------------------------------------------------------------- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Fixed to the viewport, not the image, so it stays put whatever the photo's
   aspect ratio. The dark disc keeps the X legible over pale images too. */
.lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

.lightbox__close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Stops the page behind the lightbox scrolling on touch devices */
.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */

.form-panel {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  padding: 1.5rem;
}

.form-panel--solid {
  background: var(--surface-lowest);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--outline-variant);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .form-panel {
    padding: 2rem;
  }
}

.form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.form-legend {
  width: 100%;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 0 0 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--outline-variant);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field-border);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface);
  transition: border-color 0.2s ease;
}

.form-group textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #8a8888;
}

/* Block of fields revealed by a checkbox — indented so the dependency reads */
.form-conditional {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--outline-variant);
}

/* Needed because the display above would otherwise beat the [hidden] default */
.form-conditional[hidden] {
  display: none;
}

/* Inline notice under a field, e.g. the Hy-Line lead-time message */
.field-note {
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-low);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--prose-text);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.form-check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.form-check label {
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--secondary);
  line-height: 1.5;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.form-status {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-status.success {
  color: var(--success);
}

.form-status.error {
  color: var(--error);
}

/* --------------------------------------------------------------------------
   18. CONTACT
   -------------------------------------------------------------------------- */

.contact-panel {
  display: grid;
  gap: 2rem;
  max-width: 60rem;
  margin: 0 auto;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .contact-panel {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .contact-panel {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
  }

  .contact-panel__aside {
    border-left: 1px solid var(--outline-variant);
    padding-left: 2.5rem;
  }
}

.contact-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-block h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.contact-block p,
.contact-block a {
  font-size: 0.9375rem;
  color: var(--secondary);
  margin: 0 0 0.25rem;
  text-decoration: none;
  display: block;
}

.contact-block a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.social-row {
  display: flex;
  gap: 0.75rem;
}

/* Scoped to .contact-block so it outranks the `.contact-block a` rule above,
   which would otherwise paint the icon the same grey as the button itself. */
.contact-block .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: var(--radius-full);
  /* Facebook's own brand blue — a deliberate exception to the single-accent
     rule, the same way the WhatsApp FAB carries WhatsApp green */
  background: #3a73ea;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.contact-block .social-link:hover {
  background: #2c5cc5;
  color: #fff;
  text-decoration: none;
}

.social-link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-lowest);
  border-top: 1px solid var(--hairline);
  padding: 2rem 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.site-footer__logo img {
  height: 3rem;
  width: auto;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

.site-footer__links a {
  font-size: 0.8125rem;
  color: var(--secondary);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.site-footer__legal {
  font-size: 0.8125rem;
  color: var(--secondary);
}

.site-footer__legal p {
  margin: 0 0 0.25rem;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__legal {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   19b. WHATSAPP FAB
   Fixed to the viewport rather than the footer's own DOM position, so it
   stays put — and reachable — no matter how far down the page you've
   scrolled. Uses the brand ramp rather than WhatsApp's own green, matching
   the existing .social-link WhatsApp icon in the Contact section.
   -------------------------------------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, #4cc759, #29af3e);
  color: var(--on-primary);
  box-shadow: var(--shadow-glow);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.whatsapp-fab:hover {
  color: var(--on-primary);
  opacity: 0.92;
  transform: translateY(-2px);
}

.whatsapp-fab .icon {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 768px) {
  .whatsapp-fab {
    right: 2rem;
    bottom: 2rem;
  }
}

/* --------------------------------------------------------------------------
   20. PROSE (legal pages)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 48rem;
  margin: 0 auto;
}

.prose h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
}

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
}

.prose p,
.prose li {
  font-size: 1rem;
  color: var(--prose-text);
  line-height: 1.7;
}

.prose ul {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  color: var(--on-surface);
  font-weight: 700;
}

.prose__meta {
  font-size: 0.875rem;
  color: var(--secondary);
  margin-bottom: 2rem;
}

.page-header {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .page-header h1 {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   21. 404
   -------------------------------------------------------------------------- */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--gutter);
  gap: 1rem;
}

.error-page__logo {
  height: 3.25rem;
  width: auto;
  margin-bottom: 1rem;
}

/* Scoped so it outranks the `.error-page p` colour rule below */
.error-page .error-page__code {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
}

.error-page h1 {
  font-size: 1.75rem;
}

.error-page p {
  color: var(--secondary);
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   22. FAQ ACCORDION
   -------------------------------------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

/* Plus icon built from two bars — the vertical one flattens onto the
   horizontal one on open, turning + into − */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.faq-item__icon::before {
  width: 100%;
  height: 2px;
}

.faq-item__icon::after {
  width: 2px;
  height: 100%;
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* Author styles win over the UA rule that hides non-summary children when
   closed, so the grid-rows trick below can animate the reveal instead of
   the content just snapping open */
.faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item[open] .faq-item__answer-wrap {
  grid-template-rows: 1fr;
}

.faq-item__answer {
  min-height: 0;
  overflow: hidden;
}

.faq-item__answer p {
  padding: 0 1.5rem 1.25rem;
  color: var(--prose-text);
}