/*
Theme Name: Blankslate Child Aroma
Theme URI: https://aromaplant.ro
Description: Child theme for BlankSlate carrying the AromaPlant Bonchis design system (colors, typography, layout, components).
Author: AromaPlant
Template: blankslate
Version: 1.0
Text Domain: blankslate-child
*/

/* Self-host the brand fonts to remove a third-party stylesheet round trip.
   Optional display prevents a late font swap from shifting the mobile hero. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: optional;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: optional;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  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: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/young-serif-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/young-serif-latin.woff2") format("woff2");
  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;
}

:root {
  /* Brand */
  --green-900: #17332e; /* footer background */
  --green-700: #214842; /* primary */
  --green-500: #2d5c54;
  --green-300: #71a098; /* footer icon chips */
  --green-100: #ddebca; /* "Fără zahăr" badge */
  --gold-500: #efc368; /* primary CTA */
  --gold-300: #ffe9bb; /* top bar / soft badge */
  --gold-100: #fff9ed;
  --gold-ink: #8d640f; /* text on gold-300 */
  --red-500: #f30f0f; /* discount bubble */

  /* Neutrals */
  --white: #fff;
  --paper: #f1f2f2;
  --paper-2: #f4f6f6;
  --paper-3: #f8f9fa;
  --line: #e6e8ec;

  /* Text (design uses black at opacity steps) */
  --ink-900: rgba(0, 0, 0, 0.87);
  --ink-800: rgba(0, 0, 0, 0.8);
  --ink-600: rgba(0, 0, 0, 0.6);
  --ink-400: rgba(0, 0, 0, 0.4);

  /* Typography */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-ui:
    "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;

  /* Layout */
  --container: 1160px;
  --gutter: 24px;
  --header-h: 175px; /* site-header__main (132px) + mainnav (~43px), both sticky together */

  /* Radii */
  --r-card: 24px;
  --r-md: 16px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 16px 48px rgba(33, 72, 66, 0.18);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer !important;
  background: none;
  border: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Material Symbols (loaded from Google Fonts in <head>) */
.mi {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  user-select: none;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  flex: none;
}
.mi.fill {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
.mi-20 {
  font-size: 20px;
}
.mi-16 {
  font-size: 16px;
}
.mi-32 {
  font-size: 32px;
}
.mi-40 {
  font-size: 40px;
}

/* ---------- typography ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.25;
  color: var(--ink-800);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  color: var(--ink-800);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink-800);
}
.h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-800);
}
.h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-800);
}
.lead {
  font-size: 18px;
  color: var(--ink-600);
}
.body {
  font-size: 16px;
  color: var(--ink-600);
}
.small {
  font-size: 14px;
  color: var(--ink-400);
}
.tiny {
  font-size: 12px;
  color: var(--ink-400);
}

@media (max-width: 900px) {
  .h-display {
    font-size: 34px;
  }
  .h1 {
    font-size: 28px;
  }
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 20px;
  }
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: 40px;
}
.section-sm {
  padding-block: 24px;
}
.stack {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  align-items: center;
}
.gap-8 {
  gap: 10px;
}
.gap-16 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.grow {
  flex: 1 1 auto;
  min-width: 0;
}
.center {
  text-align: center;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 572px;
}
.section-head.center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--gold-500);
  color: var(--green-700);
}
.btn--primary:hover {
  background: #e6b451;
}
.btn--green {
  background: var(--green-700);
  color: var(--white);
}
.btn--green:hover {
  background: var(--green-500);
}
.btn--ghost {
  background: transparent;
  color: var(--green-700);
  border-color: rgba(33, 72, 66, 0.3);
}
.btn--ghost:hover {
  background: rgba(33, 72, 66, 0.07);
}
.btn--white {
  background: var(--white);
  color: var(--green-700);
}
.btn--white:hover {
  background: var(--gold-100);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  min-height: 33px;
  padding: 6px 12px;
  font-size: 14px;
}
.btn--lg {
  min-height: 48px;
  padding: 12px 24px;
}
.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--green-700);
  padding: 6px 8px;
  border-radius: var(--r-pill);
}
.link-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.icon-btn {
  width: 40px;
  height: 56px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--green-700);
  background: transparent;
  position: relative;
  transition: background-color 0.18s ease;
}
.icon-btn:hover {
  background: rgba(33, 72, 66, 0.1);
}
.icon-btn--solid {
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.icon-btn--sm {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}
.icon-btn[aria-pressed="true"] {
  color: var(--red-500);
}

/* Account dropdown: matches the compact profile card in the Figma header. */
.account-menu {
  position: relative;
}
.account-menu__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 110;
  width: 270px;
  height: 355px;
  padding: 24px;
  background: var(--white);
  display: none;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
}
.account-menu.is-open .account-menu__dropdown {
  display: flex;
}
.account-menu__dropdown[hidden] {
  display: none !important;
}
.account-menu__dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.account-menu__content {
  width: 100%;
  padding: 0;
}
.account-menu__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 16px;
}
.account-menu__identity strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-800);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu__identity span {
  overflow-wrap: anywhere;
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.account-menu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.account-menu__dropdown a {
  display: block;
  padding: 6px 14px;
  color: var(--ink-800);
  font-size: 16px;
  line-height: 22px;
  border-radius: 8px;
}
.account-menu__dropdown a:hover,
.account-menu__dropdown a:focus-visible {
  background: var(--paper-3);
  color: var(--green-700);
}
.account-menu__logout {
  border-top: 1px solid var(--line);
  border-radius: 0 !important;
  padding: 16px 14px 6px !important;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .account-menu__dropdown {
    right: -8px;
    width: min(270px, calc(100vw - 32px));
  }
}

/* Homepage product controls match the full-size arrows in the design. */
.home-product-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.home-product-nav .home-product-nav__button {
  width: 32px;
  height: 32px;
  padding: 2px;
  border-radius: 0;
  color: #383838;
}
.home-product-nav .home-product-nav__button:hover {
  background: transparent;
  color: #214842;
}
.home-product-nav__icon {
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.home-packages-all-link {
  gap: 0;
}

.count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gold-500);
  color: var(--green-700);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* ---------- badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--green {
  background: var(--green-700);
  color: var(--white);
}
.badge--gold {
  background: var(--gold-300);
  color: var(--gold-ink);
}
.badge--leaf {
  background: var(--green-100);
  color: var(--green-700);
}
.badge--count {
  background: var(--paper);
  color: var(--ink-600);
  font-size: 10px;
  padding: 4px 8px;
}
.badge--discount {
  background: var(--red-500);
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- forms ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field > label {
  font-size: 16px;
  color: var(--ink-600);
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px;
  padding: 7px 16px;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--green-700);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}
.textarea {
  border-radius: var(--r-md);
  min-height: 104px;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: rgba(33, 72, 66, 0.55);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--green-700);
  background: var(--white);
}
.input-icon {
  position: relative;
}
.input-icon .mi {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green-700);
  pointer-events: none;
}
.input-icon .input {
  padding-left: 46px;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23214842'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-800);
}
.check input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--green-700);
  flex: none;
}
.field-error {
  color: #b3261e;
  font-size: 12px;
  display: none;
}
.field.is-invalid .field-error {
  display: block;
}
.field.is-invalid .input,
.field.is-invalid .textarea {
  border-color: #b3261e;
}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  color: var(--green-700);
  font-size: 16px;
}
/* Figma's Header-topside is a 1160px "island" bar with rounded bottom corners,
   not a full-bleed stripe — background/radius belong on the constrained inner
   row (.container), not the full-width .topbar wrapper. */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(1160px, calc(100% - 48px));
  max-width: 1160px;
  min-height: 36px;
  padding-inline: var(--gutter);
  background: var(--gold-300);
  border-radius: 0 0 16px 16px;
}
.topbar-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  background: var(--gold-300);
  border-radius: 0 0 16px 16px;
}
/* The Figma "Badges" component stacks the three facts and cycles through them,
   so only one is visible at a time. */
.topbar__facts {
  position: relative;
  height: 36px;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar__fact {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  font-weight: 600;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}
.topbar__fact.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__nav a {
  padding: 6px 8px;
  border-radius: var(--r-pill);
  color: var(--green-700);
}
.topbar__nav a:hover {
  background: rgba(33, 72, 66, 0.1);
}

/* z-index must clear .nav-scrim (70): .site-header's own stacking context
   (from position:sticky + z-index) otherwise traps the nested mobile
   .mainnav.is-open drawer behind the scrim despite its own z-index:80. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__main {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 92px;
  padding-block: 20px;
}
.site-header.is-stuck {
  box-shadow: var(--shadow-1);
}

/* WordPress' logged-in admin bar is fixed at the true viewport top with a very
   high z-index, so the sticky header must offset by its height or it slides
   underneath (and appears "overlapped") once the page scrolls. */
body.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.logo {
  display: inline-flex;
  flex: none;
}
.logo img {
  width: 164px;
  height: auto;
}
/* The mark is black artwork; the footer needs it knocked out to white. */
.logo--light img {
  width: 130px;
  filter: brightness(0) invert(1);
}

.search {
  flex: 1 1 auto;
  max-width: 764px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.mainnav {
  background: var(--paper-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mainnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
}
.mainnav__group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-pill);
  color: var(--ink-800);
  border-bottom: 2px solid transparent;
}
.mainnav a:hover {
  background: rgba(33, 72, 66, 0.1);
}
/* Figma's active-nav indicator is a 2px underline in the accent green, not a
   filled pill — the transparent border above keeps the height identical so
   switching states doesn't shift layout. */
.mainnav a[aria-current="page"] {
  background: none;
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}

/* Match the Produse mega-menu hover treatment on Afecțiuni submenu links. */
.mainnav .afflictions-menu__item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  transition: none !important;
  box-sizing: border-box;
}
.mainnav .afflictions-menu__item:hover,
.mainnav .afflictions-menu__item:focus-visible {
  background: #dee4e3 !important;
  background-color: #dee4e3 !important;
  background-image: none !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  color: #214842 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-radius: 8px !important;
}

.burger {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --header-h: 96px;
  } /* topbar hidden, mainnav becomes an overlay instead of sticky in-flow */
  .topbar {
    display: none;
  }
  .site-header__main {
    gap: 16px;
    min-height: 72px;
    padding-block: 12px;
  }
  .search {
    order: 4;
    flex-basis: 100%;
    max-width: none;
  }
  .burger {
    display: inline-flex;
  }
  .mainnav {
    display: none;
  }
  .mainnav.is-open {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    z-index: 80;
    background: var(--white);
    box-shadow: var(--shadow-3);
    overflow-y: auto;
    padding: 24px;
  }
  .mainnav.is-open .mainnav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .mainnav.is-open .mainnav__group {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .mainnav.is-open a {
    padding: 12px;
    font-size: 18px;
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 70;
  }
}

/* ==========================================================================
   Generic page pieces
   ========================================================================== */
.promo-banner {
  position: relative;
  display: block;
  width: min(1160px, calc(100% - 48px));
  margin: 24px auto 0;
  overflow: hidden;
  border-radius: 16px;
  line-height: 0;
  box-shadow: none !important;
}
.promo-banner:hover,
.promo-banner:focus-visible {
  box-shadow: none !important;
}
.promo-banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 220ms ease, filter 220ms ease;
}

@media (hover: hover) {
  .promo-banner:hover img {
    transform: scale(1.012);
    filter: brightness(0.96);
  }
  .promo-banner:hover .promo-banner__cta {
    background: var(--green-500);
  }
}

.promo-banner:focus-within img {
  filter: brightness(0.96);
}

.promo-banner__cta {
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 149px;
  height: 40px;
  padding: 8px 16px;
  transform: translateY(-50%);
  border-radius: 20px;
  background: var(--green-700);
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.promo-banner__cta:focus-visible {
  background: var(--green-500);
  outline: 2px solid var(--white);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .promo-banner img,
  .promo-banner__cta {
    transition: none;
  }
}
@media (max-width: 600px) {
  .promo-banner__cta {
    right: 8px;
    min-width: 0;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
  }
}

@media (max-width: 530px) {
  .promo-banner__cta {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    display: flex;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    transform: none;
    box-sizing: border-box;
    border-radius: 0 0 16px 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .promo-banner__cta {
    margin-right: 24px;
  }
}

/* Compact sitewide breadcrumb treatment from the Figma design. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  line-height: 1.2;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  border-radius: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  border-bottom: 0 !important;
  background: transparent !important;
  color: #214842;
  text-decoration: none !important;
}
.breadcrumb > .mi,
.breadcrumb > a > .mi,
.breadcrumb svg {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  color: #879391;
  font-size: 20px !important;
  line-height: 20px;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.breadcrumb > a:first-child {
  border-bottom: 0 !important;
}
.breadcrumb > a:first-child > .mi {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 0 !important;
  color: transparent !important;
  background: url("./assets/img/home-svg.svg") center / 12.5px 14.08px no-repeat !important;
  font-variation-settings: normal;
}
.breadcrumb > .mi {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 0 !important;
  color: transparent !important;
  background: url("./assets/img/chevron_forward.svg") center / 6px 10px
    no-repeat !important;
  font-variation-settings: normal;
}
.breadcrumb > [aria-current="page"] {
  color: rgba(0, 0, 0, 0.4);
}

.page-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 24px 8px;
}
.page-head p {
  max-width: 760px;
}

/* Hero — 1160x453 carousel with edge arrows and a dot pill (bottom left) */
.hero {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* The homepage pagination is attached flush to the hero's bottom-left edge.
   A rounded outer hero corner clips that white tab and creates a thin,
   image-coloured anti-alias line around it. Keep the other hero corners
   rounded, but make this covered corner square so the join is seamless. */
.home-hero-section .hero {
  border-bottom-left-radius: 0 !important;
}
.hero__track {
  position: relative;
}
.hero__track img {
  width: 100%;
  height: clamp(240px, 30vw, 453px);
  object-fit: cover;
  display: none;
}
.hero__track img.is-active {
  display: block;
}
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-700);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
  z-index: 2;
}
.hero__arrow:hover {
  background: var(--gold-100);
}
.hero__arrow--prev {
  left: 16px;
}
.hero__arrow--next {
  right: 16px;
}
.hero__dots {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4.5px;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 8px 16px;
}
.hero__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d9d9d9;
}
.hero__dot[aria-selected="true"] {
  background: var(--gold-500);
}

/* Shortcut row sits 40px under the hero; the tall quote card is bottom-aligned
   with the two small ones, so it overlaps the hero by 135px (per the Figma). */
.shortcuts {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 309px 309px 317px;
  justify-content: center;
  align-items: end;
  gap: 18px;
  margin-top: -135px;
}
/* same cards, but in normal flow (About page) */
.shortcuts--flat {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  margin-top: 24px;
}
.shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--paper);
  min-height: 85px;
}
.shortcut--gold {
  background: linear-gradient(
    180deg,
    rgba(239, 195, 104, 0.25),
    rgba(239, 195, 104, 0.06)
  );
}
.shortcut--blue {
  background: linear-gradient(
    180deg,
    rgba(3, 98, 252, 0.25),
    rgba(3, 98, 252, 0.03)
  );
}
.shortcut--gold,
.shortcut--blue {
  font-family: var(--font-ui);
}
.shortcut--gold .shortcut__title,
.shortcut--blue .shortcut__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15px;
  line-height: 1.75;
}
.shortcut--gold .shortcut__meta,
.shortcut--blue .shortcut__meta {
  font-size: 14px;
  letter-spacing: 0.17px;
  line-height: 1.43;
}
.shortcut--quote {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  min-height: 260px;
  background: linear-gradient(135deg, #fffdf8 0%, #fff8eb 52%, #fcebc4 100%);
}
.shortcut__icon {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: var(--r-sm);
  color: var(--green-700);
}
.shortcut__icon--gold {
  width: 50px;
  height: 50px;
  background: var(--gold-500);
  color: var(--white);
}
.shortcut__title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-800);
}
.shortcut__meta {
  font-size: 16px;
  color: var(--ink-600);
}
.shortcut__body {
  display: flex;
  flex-direction: column;
}
.shortcut__quote {
  font-size: 16px;
  color: #212121;
}
.shortcut--quote .link-btn {
  padding-left: 0;
}

/* Countdown / newsletter strip */
.strip {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  color: var(--white);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 144px;
}
.strip__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 72, 66, 0.85);
  z-index: 1;
}
.strip > * {
  position: relative;
  z-index: 2;
}
/* The text block and the form are each a fixed 540px per Figma — together
   they exactly fill the card's 1080px content width (1160px - 40px*2 padding). */
.strip > div {
  width: 540px;
}
.strip__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.35;
}
.strip__sub {
  font-size: 16px;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 8px;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.countdown__num {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 12px;
}
.countdown__sep {
  font-family: var(--font-display);
  font-size: 28px;
  padding-bottom: 18px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
  width: 540px;
}
.newsletter-form .input, .klaviyo-form input {
  flex: 1 1 auto;
}
.klaviyo-form input:not([type="button"]):not([type="submit"]), .klaviyo-form textarea, .klaviyo-form .elementor-field-textual {

    color: #556260;
    background-color: #fff !important;
    border-style: solid;
    border-radius: 24px 24px 24px 24px;
    transition: 300ms;
    padding: 12px 0px 12px 20px;
}

@media (max-width: 1000px) {
  .shortcuts {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .shortcut--quote {
    min-height: 0;
  }
}
@media (max-width: 900px) {
  .strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .strip > div {
    width: 100%;
  }
  .newsletter-form {
    flex-direction: column;
    width: 100%;
  }
}

/* ==========================================================================
   Product card
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.product-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .product-grid,
  .product-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .product-grid,
  .product-grid--3 {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 16px;
  transition: background-color 0.2s ease;
}
.card:hover {
  background: #f7f7f7;
}
.card__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 240px;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Badges stack top-right, right-aligned; the discount bubble is the last item. */
.card__badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  z-index: 2;
}
.card__fav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}
.card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  flex: 1 1 auto;
}
.card__kicker {
  font-size: 14px;
  color: var(--ink-400);
}
.card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1.4;
  min-height: 50px;
}
.card__title a:hover {
  text-decoration: underline;
}
/* Figma draws these as 165x0 LINE nodes, so they must not add layout height. */
.card__rule {
  width: 165px;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(33, 72, 66, 0.15);
  margin: -0.5px 0;
}
.card__meta {
  font-size: 14px;
  color: var(--ink-400);
}
.card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  line-height: 1.4;
}
.card__price-from {
  font-size: 12px;
  color: var(--ink-800);
}
.card__price-now {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-800);
}
.card__price-old {
  font-size: 12px;
  color: var(--ink-400);
  text-decoration: line-through;
}
.card .btn {
  align-self: center;
}

/* horizontal scroller (carousels in the design) */
.scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.scroller > * {
  scroll-snap-align: start;
  flex: 0 0 276px;
}
.scroller::-webkit-scrollbar {
  height: 6px;
}
.scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.scroller-nav {
  display: flex;
  gap: 8px;
}

/* Product-page cross-sells: the design places this carousel between the
   purchase block and the content tabs, with spacious, borderless cards. */
.product-complementary {
  padding-top: 28px;
  padding-bottom: 28px;
  min-width: 0;
  overflow: hidden;
}
.product-complementary .section-bar {
  align-items: center;
  margin-bottom: 18px;
}
.product-complementary .section-head {
  margin: 0;
}
.product-complementary .section-head .h1 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
}
.product-complementary .scroller {
  gap: 28px;
  padding: 0 2px 8px;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.product-complementary .scroller > .card {
  flex-basis: min(276px, calc((100vw - 96px) / 2));
  padding: 10px;
  background: transparent;
}
.product-complementary .card__media {
  height: 250px;
}
.product-complementary .card__body {
  gap: 12px;
}
.product-complementary .card__title {
  min-height: auto;
  margin: 0;
}
.product-complementary .card__kicker {
  margin: 0;
}
.product-complementary .card__price {
  min-height: 28px;
}
.product-complementary .card:hover {
  background: transparent;
}
/* On desktop this belongs beneath the right-hand .pdp__info column, not
   beneath the gallery. On mobile the PDP becomes one column and this rule
   naturally falls back to the full-width layout below. */
@media (min-width: 1001px) {
  .pdp__info > .product-complementary {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 20px;
  }
  .product-complementary {
    width: calc(50% - 20px);
    margin-left: auto;
    margin-right: 0;
  }
  .product-complementary > .container {
    max-width: none;
    padding-inline: 0;
  }
  .product-complementary .scroller > .card {
    flex: 0 0 276px;
  }
  .product-complementary .scroller {
    justify-content: flex-start;
  }
}
@media (max-width: 1000px) {
  .pdp__info > .product-complementary {
    width: 100%;
    margin-inline: 0;
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .product-complementary .scroller > .card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media (max-width: 600px) {
  .product-complementary .section-bar {
    margin-bottom: 12px;
  }
  .product-complementary .scroller {
    gap: 16px;
  }
  .product-complementary .scroller > .card {
    flex-basis: min(276px, calc(82vw - 12px));
  }
  .product-complementary .card__media {
    height: 230px;
  }
}

/* ==========================================================================
   Home — promo tiles, categories, afflictions, testimonials
   ========================================================================== */
.promo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.promo-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-card);
  min-height: 218px;
}
.promo-tile--blue {
  background: linear-gradient(
    180deg,
    rgba(3, 98, 252, 0.25),
    rgba(3, 98, 252, 0.06)
  );
}
.promo-tile--gold {
  background: linear-gradient(
    180deg,
    rgba(239, 195, 104, 0.25),
    rgba(239, 195, 104, 0.06)
  );
}
.promo-tile__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
}
.promo-tile img {
  width: 200px;
  height: 170px;
  object-fit: contain;
  flex: none;
}
.promo-tile .badge {
  position: absolute;
  top: 16px;
  right: 16px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 230px;
  gap: 18px;
}
.cat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--paper);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}
.cat-card img {
  width: 151px;
  height: 198px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
}
.cat-card--tall {
  grid-row: span 2;
  flex-direction: column;
  align-items: stretch;
}

.cat-card--wide {
  grid-column: span 2;
}
.cat-card--wide img {
  width: 151px;
}

/* Small bento cards: reserve 60% for copy and 40% for the product image. */
.cat-card:not(.cat-card--tall):not(.cat-card--wide) {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.cat-card:not(.cat-card--tall):not(.cat-card--wide) .cat-card__body {
  min-width: 0;
}
.cat-card:not(.cat-card--tall):not(.cat-card--wide) img {
  width: 100%;
  height: 198px;
}

.aff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.aff-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(180deg, #faedd2, #fefaf1);
  border-radius: var(--r-card);
}
.aff-card__icon {
  width: 64px;
  height: 64px;
  background: var(--gold-300);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.aff-card__icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(239, 195, 104, 0.1), rgba(239, 195, 104, 0.1)),
    var(--white);
}
.split img {
  border-radius: var(--r-sm);
  width: 100%;
  height: 426px;
  object-fit: cover;
}
.split__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.feature__icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: var(--r-sm);
  color: var(--green-700);
}
.feature__title {
  font-weight: 600;
  color: var(--ink-800);
}

.media-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
  align-items: center;
  border-radius: var(--r-card);
  overflow: hidden;
}
.media-cta__text {
  padding: 40px;
  color: var(--white);
  border-radius: var(--r-card);
  background: linear-gradient(
    180deg,
    rgba(0, 50, 42, 0.95),
    rgba(33, 72, 66, 0.75)
  );
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 302px;
  justify-content: center;
}
.media-cta img {
  width: 100%;
  height: 100%;
  min-height: 302px;
  object-fit: cover;
  border-radius: var(--r-card);
}

.testimonials {
  background: var(--paper);
  padding-block: 80px;
}
.tcard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 24px;
}
.tcard__stars {
  display: flex;
  gap: 5px;
  color: var(--gold-500);
}
.tcard__quote {
  color: var(--ink-400);
  flex: 1 1 auto;
  margin: 0;
}
.tcard__quote-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.tcard__rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid rgba(33, 72, 66, .15);
}
.tcard__mark {
  flex: 0 0 auto;
  color: #d9e1e0;
  transform: none;
}
.tcard figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.tcard__mark {
  color: #d9e1e0;
}
.tcard__name {
  font-weight: 600;
  color: var(--green-700);
}
.tcard__product {
  font-size: 14px;
  color: var(--ink-400);
  text-decoration: underline;
}
.scroller--t > * {
  flex: 0 0 375px;
}

@media (max-width: 900px) {
  .promo-duo,
  .cat-grid,
  .aff-grid,
  .split,
  .media-cta {
    grid-template-columns: 1fr;
  }
  .cat-grid {
    grid-auto-rows: auto;
  }
  .cat-card--tall,
  .cat-card--wide {
    grid-row: auto;
    grid-column: auto;
  }
  .split {
    padding: 24px;
    gap: 24px;
  }
  .split img {
    height: 260px;
  }
  .scroller--t > * {
    flex: 0 0 300px;
  }
  .promo-tile {
    flex-direction: column;
    align-items: flex-start;
  }
  .promo-tile img {
    width: 100%;
  }
}

/* ==========================================================================
   Shop listing — filters + toolbar
   ========================================================================== */
.shop {
  display: grid;
  grid-template-columns: 277px 1fr;
  gap: 24px;
  align-items: start;
}
.filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filter-group {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
  padding-block: 8px;
}
.filter-group__head .mi {
  transition: transform 0.2s ease;
}
.filter-group[aria-expanded="false"] .filter-group__head .mi {
  transform: rotate(180deg);
}
.filter-group[aria-expanded="false"] .filter-group__body {
  display: none;
}
.filter-group__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filter-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-row .input {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--r-sm);
}
.range {
  position: relative;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  margin: 14px 0 4px;
}
.range__fill {
  position: absolute;
  height: 100%;
  background: var(--green-700);
  border-radius: 3px;
}
.range input[type="range"] {
  position: absolute;
  left: 0;
  top: -8px;
  width: 100%;
  height: 20px;
  appearance: none;
  background: none;
  pointer-events: none;
  margin: 0;
}
.range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green-700);
  cursor: grab;
}
.range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green-700);
  cursor: grab;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-block: 1px solid var(--line);
  margin-bottom: 24px;
}
.shop-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-800);
}
.shop-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-800);
}
.shop-toolbar .select {
  min-height: 36px;
  padding-block: 6px;
  font-weight: 400;
}
.filters-toggle {
  display: none;
}
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-600);
  background: var(--paper);
  border-radius: var(--r-card);
}

@media (max-width: 900px) {
  .shop {
    grid-template-columns: 1fr;
  }
  .filters-toggle {
    display: inline-flex;
  }
  .filters {
    display: none;
  }
  .filters.is-open {
    display: flex;
  }
}

/* ==========================================================================
   Product detail
   ========================================================================== */
.pdp {
  display: grid;
  grid-template-columns: 571px 1fr;
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Keep the product gallery in view while the information column scrolls.
   Because .pdp is the containing block, sticky positioning stops exactly
   when the complete product area ends, before the tabs begin. */
@media (min-width: 1001px) {
  .pdp > .gallery {
    position: sticky;
    top: 176px;
    align-self: start;
    z-index: 2;
  }
}
@media (max-width: 1000px) {
  .pdp > .gallery {
    position: static;
  }
}
.gallery__main {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 1;
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
.gallery__main img.is-active {
  display: block;
}
.pdp__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.gallery__counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 16px;
}
.gallery__thumbs {
  display: flex;
  gap: 12px;
  align-items: center;
}
.thumb {
  width: 104px;
  height: 104px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--paper);
  flex: none;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.thumb[aria-selected="true"] {
  border-color: var(--green-700);
}

.pdp__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.pdp__info > * {
  min-width: 0;
  max-width: 100%;
}
.pdp__info .body {
  overflow-wrap: anywhere;
}
.pdp__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.pdp__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 53px;
}
.pdp__price-now {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: #ef1b23;
}
.pdp__price-now .woocommerce-Price-amount,
.pdp__price-now .woocommerce-Price-currencySymbol {
  color: inherit;
}
.pdp__price--dark .pdp__price-now,
.pdp__price--dark .pdp__price-now .woocommerce-Price-amount,
.pdp__price--dark .pdp__price-now .woocommerce-Price-currencySymbol {
  color: var(--ink-900);
}
.pdp__price-old {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-400);
  text-decoration: line-through;
}
.pdp__trust {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.pdp__trust img {
  width: 40px;
  height: 40px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.rating__stars {
  display: flex;
  color: var(--gold-500);
}
.rating > .link-btn:last-child {
  margin-left: auto;
}
.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.variants {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.variant {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(33, 72, 66, 0.3);
  color: var(--green-700);
}
.variant[aria-pressed="true"] {
  background: var(--green-700);
  color: var(--white);
  border-color: var(--green-700);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--green-700);
}
.qty button:hover {
  background: var(--paper);
}
.qty input {
  width: 48px;
  text-align: center;
  border: 0;
  background: none;
  font-size: 20px;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.buy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.phone-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 250px);
  min-height: 56px;
  padding: 8px 16px;
  background: var(--gold-100);
  border-radius: 20px;
  margin-left: auto;
}
.phone-order > .mi {
  order: 2;
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  color: #202124;
}
.phone-order > div {
  order: 1;
  min-width: 0;
}
.phone-order__label {
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink-600);
}
.phone-order__num {
  display: block;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  color: #2c2c2c;
  white-space: nowrap;
}
@media (min-width: 1101px) {
  .buy-row {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .qty {
    border: 0;
    overflow: visible;
    gap: 8px;
    flex: 0 0 auto;
  }
  .qty button {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--paper-2);
    font-size: 26px;
  }
  .qty input {
    width: 38px;
    font-size: 28px;
  }
  .buy-row > .btn {
    min-height: 72px;
    padding-inline: 28px;
    font-size: 22px;
    white-space: nowrap;
  }
  .buy-row > .icon-btn {
    flex: 0 0 48px;
  }
  .phone-order {
    flex: 1 1 230px;
    width: auto;
    min-width: 210px;
    min-height: 72px;
    padding: 10px 14px;
    border-radius: 24px;
  }
  .phone-order__label {
    font-size: 12px;
  }
  .phone-order__num {
    font-size: 25px;
  }
  .phone-order > .mi {
    font-size: 38px;
  }
}
/* Keep the purchase controls on one baseline when the information column has
   enough room, as in the approved desktop design. */
@media (min-width: 1400px) {
  .buy-row {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .buy-row > .btn {
    white-space: nowrap;
  }
  .phone-order {
    flex: 0 0 310px;
    min-height: 88px;
    padding: 12px 18px;
    border-radius: 26px;
  }
  .phone-order__label {
    font-size: 14px;
  }
  .phone-order__num {
    font-size: 28px;
  }
  .phone-order > .mi {
    font-size: 42px;
  }
}
@media (max-width: 600px) {
  .phone-order {
    width: min(100%, 250px);
    padding-inline: 14px;
    border-radius: 18px;
  }
  .phone-order__label {
    font-size: 10px;
  }
  .phone-order__num {
    font-size: 20px;
  }
  .phone-order > .mi {
    font-size: 32px;
  }
}

.aff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--gold-100);
}
.aff-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Editorial product tabs and preparation steps from the Figma single-page layout. */
.product-tab-panel {
  width: min(770px, 100%);
  margin-inline: auto;
}
.product-preparation {
  margin-top: 24px;
}
.product-preparation__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.product-preparation__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.product-preparation__image {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-preparation__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-preparation__step h3 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-800);
}
.product-preparation__step p {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-800);
}

@media (max-width: 1000px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp__price-row {
    align-items: flex-start;
  }
}

/* Keep the price and five certification marks inside the two-column product
   panel at medium desktop widths; the Figma layout stacks them before the
   info column becomes too narrow. */
@media (max-width: 1200px) and (min-width: 1001px) {
  .pdp__price-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }
}

@media (max-width: 620px) {
  .pdp__price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pdp__trust {
    order: -1;
  }
  .product-preparation__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-info-table > div {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* The product info panel is about 470px wide at this desktop viewport. Keep
   the five fixed-size certification badges on their own line there. */
@media (max-width: 1200px) {
  .pdp__price-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }
}

/* Product reviews: match the Aroma Plant form instead of browser defaults. */
#recenzii {
  padding-block: 48px 72px;
}
#recenzii .woocommerce-Reviews {
  max-width: 920px;
  margin-inline: auto;
}
#recenzii #review_form_wrapper {
  margin-top: 48px;
}
#recenzii .woocommerce-Reviews-title,
#recenzii .comment-reply-title {
  margin: 0 0 18px;
  color: var(--ink-900);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}
#recenzii .woocommerce-noreviews,
#recenzii .comment-notes {
  color: var(--ink-600);
}
#recenzii .comment-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
#recenzii .comment-form p {
  margin: 0;
}
#recenzii .comment-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-700);
  font-weight: 600;
}
#recenzii .comment-form textarea,
#recenzii .comment-form input[type="text"],
#recenzii .comment-form input[type="email"],
#recenzii .comment-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-900);
  font: inherit;
  box-shadow: 0 0 0 1px rgba(32, 83, 76, 0.04);
}
#recenzii .comment-form textarea:focus,
#recenzii .comment-form input[type="text"]:focus,
#recenzii .comment-form input[type="email"]:focus,
#recenzii .comment-form select:focus {
  outline: 2px solid rgba(32, 83, 76, 0.2);
  outline-offset: 2px;
}
#recenzii .comment-form textarea {
  min-height: 150px;
  resize: vertical;
}
#recenzii .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#recenzii .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
}
#recenzii .form-submit .submit {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--green-700);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.tabs {
  display: flex;
  width: 100%;
  margin-inline: auto;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tab {
  padding: 8px 12px 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-600);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}
.tabpanel {
  padding-top: 24px;
  max-width: 770px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tabpanel[hidden] {
  display: none;
}
.prose {
  color: var(--ink-600);
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink-800);
}
.prose h4 {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-800);
}
.prose ul {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prose a {
  color: var(--green-700);
  text-decoration: underline;
}

.prose hr {
  width: 100%;
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.prose h5 {
  margin: 0;
  color: var(--ink-800);
  font-size: 18px;
  font-weight: 600;
}
.product-info-table {
  width: 100%;
  color: var(--ink-800);
  font-size: 16px;
}
.product-info-table > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.product-signature {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
}
.product-signature img {
  display: block;
  width: 249px;
  max-width: 70vw;
  height: auto;
}

/* Keep the complete Single page / 03 tab system centered inside the site
   container, even when the theme's generic section rules are loaded later. */
.section > .container > .tabs {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
}
.section > .container > .product-tab-panel {
  width: min(770px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.product-tab-panel .product-signature {
  width: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
  justify-content: center;
}

.signature {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signature__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-800);
}
.signature__role {
  font-size: 9px;
  color: var(--ink-400);
}

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

/* ==========================================================================
   Cart / checkout
   ========================================================================== */
.checkout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
}
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel--flat {
  background: var(--paper);
  border-color: transparent;
}
.summary {
  position: sticky;
  top: 150px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .span-2 {
  grid-column: span 2;
}
.form-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.form-grid--4 {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.line-item {
  display: flex;
  gap: 16px;
  align-items: center;
}
.line-item__img {
  width: 88px;
  height: 88px;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--paper);
  flex: none;
}
.line-item__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-800);
}
.line-item__price {
  font-weight: 600;
}
.line-item .qty {
  transform: scale(0.85);
  transform-origin: left center;
}

.totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.totals__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-600);
}
.totals__row--grand {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-800);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ship-hint {
  font-size: 12px;
  color: var(--gold-ink);
  background: var(--gold-100);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.eta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
}
.eta strong {
  color: var(--green-700);
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}
.option:has(input:checked) {
  border-color: var(--green-700);
  background: var(--gold-100);
}
.option input {
  accent-color: var(--green-700);
  width: 18px;
  height: 18px;
  flex: none;
}
.option__title {
  font-weight: 600;
  color: var(--ink-800);
}
.option__meta {
  font-size: 14px;
  color: var(--ink-600);
}
.option__price {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

.stepper {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-400);
  flex-wrap: wrap;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stepper__step[aria-current="step"] {
  color: var(--green-700);
  font-weight: 600;
}
.stepper__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-size: 12px;
}
.stepper__step[aria-current="step"] .stepper__num {
  background: var(--green-700);
  color: var(--white);
}

.success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 40px;
}
.success img {
  width: min(332px, 70vw);
  height: auto;
}

@media (max-width: 1000px) {
  .checkout {
    grid-template-columns: 1fr;
  }
  .summary {
    position: static;
  }
  .form-grid,
  .form-grid--3,
  .form-grid--4 {
    grid-template-columns: 1fr;
  }
  .form-grid .span-2 {
    grid-column: auto;
  }
}

/* ==========================================================================
   Accordion (FAQ + afflictions)
   ========================================================================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-800);
}
.acc-head .mi {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--green-700);
}
.acc-item.is-open .acc-head .mi {
  transform: rotate(180deg);
}
.acc-body {
  padding: 0 24px 20px;
  color: var(--ink-600);
  display: none;
}
.acc-item.is-open .acc-body {
  display: block;
}
.acc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: contain;
  flex: none;
}

.aff-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.aff-section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 473px;
}

/* ==========================================================================
   Editorial pages (about / story / events / research / shows / stores)
   ========================================================================== */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-mosaic img {
  width: 100%;
  height: 254px;
  object-fit: cover;
  border-radius: var(--r-md);
}
.gallery-mosaic img.tall {
  grid-row: span 2;
  height: 526px;
}
.gallery-mosaic img.wide {
  grid-column: span 2;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.value-card {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.process-card {
  background: var(--paper);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.process-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.process-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.process-card__num {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-ink);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card img {
  width: 100%;
  height: 217px;
  object-fit: cover;
}
.post-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}
.post-card__meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-400);
  flex-wrap: wrap;
}
.post-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.person-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.person-card {
  background: linear-gradient(180deg, #faedd2, #fefaf1);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.person-card img {
  height: 325px;
  width: auto;
  object-fit: contain;
}

.store-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.store-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 4px;
}
.store-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.store-item__name {
  font-weight: 600;
  color: var(--ink-800);
}
.store-item__addr {
  font-size: 14px;
  color: var(--ink-600);
}
.store-item__detail {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.store-item .stack {
  margin-left: auto;
  align-items: flex-end;
}
.map-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
}
.map-frame img {
  width: 100%;
  height: 603px;
  object-fit: cover;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-row {
  display: flex;
  gap: 12px;
}
.info-row dt {
  min-width: 140px;
  font-weight: 600;
  color: var(--ink-800);
}
.info-row dd {
  margin: 0;
  color: var(--ink-600);
}

.legal {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.legal h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-800);
}
.legal p {
  color: var(--ink-600);
}

@media (max-width: 900px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-mosaic img.tall {
    grid-row: auto;
    height: 254px;
  }
  .value-grid,
  .process-grid,
  .post-grid,
  .person-grid,
  .store-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--green-900);
  color: var(--white);
  margin-top: 40px;
}
/* Figma's actual technique: a plain white 113px wrapper with 40px top padding.
   The 144px-tall card inside it naturally overflows the wrapper's bottom edge
   by 71px (40+144 > 113) — no absolute positioning needed, it just spills
   into the green footer below via normal CSS overflow. */
.footer-newsletter {
  background: var(--white);
  padding-top: 40px;
  height: 113px;
}
.footer-top {
  display: grid;
  grid-template-columns: 442px 1fr auto;
  gap: 71px;
  padding-top: 64px;
}

/* Homepage afflictions grid: keep the compact row layout in the main stylesheet
   so it remains reliable even when template inline styles are cached separately. */
.home-afflictions-section .aff-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: stretch;
}
.home-afflictions-section .aff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 100%;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: #fdf4e3;
  color: #17332e;
  text-decoration: none;
}
.home-afflictions-section .aff-row__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.home-afflictions-section .aff-row__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-afflictions-section .aff-row__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.home-afflictions-section .aff-row__chevron {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efc368;
  color: #17332e;
}
@media (max-width: 1208px) {
  .home-afflictions-section .aff-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .home-afflictions-section .aff-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .homepage-tv__image {
    transform: translateY(18px) !important;
  }
}

/* Final course selector: match the original continuous segmented control. */
#main .pdp__info .field[data-variant-form] .variants,
#main .pdp__info .variants {
  display: inline-flex !important;
  align-self: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#main .pdp__info .field[data-variant-form] .variants .variant,
#main .pdp__info .variants .variant {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--green-700) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  color: var(--green-700) !important;
  background: var(--white) !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  /* Force each segment onto its own compositing layer so the browser
     rasterizes its rounded corner on a pixel-snapped layer instead of
     blending it with the page during the normal paint pass — reduces (does
     not eliminate — that's inherent to anti-aliasing) the visible softness
     at extreme zoom. */
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

#main .pdp__info .field[data-variant-form] .variants .variant + .variant,
#main .pdp__info .variants .variant + .variant {
  border-left: 1px solid var(--green-700) !important;
}

/* Each end segment paints its own outer curve AND its own border in one
   unified shape (not a separate ring layered on top) so the curve and the
   stroke can never sub-pixel-diverge at the tip — the cause of the stray
   hairline/notch seen with a container-level box-shadow ring. */
#main .pdp__info .field[data-variant-form] .variants .variant:first-child,
#main .pdp__info .variants .variant:first-child {
  border-left: 1px solid var(--green-700) !important;
  border-top-left-radius: var(--r-pill) !important;
  border-bottom-left-radius: var(--r-pill) !important;
}
#main .pdp__info .field[data-variant-form] .variants .variant:last-child,
#main .pdp__info .variants .variant:last-child {
  border-right: 1px solid var(--green-700) !important;
  border-top-right-radius: var(--r-pill) !important;
  border-bottom-right-radius: var(--r-pill) !important;
}

#main .pdp__info .field[data-variant-form] .variants .variant[aria-pressed="true"],
#main .pdp__info .variants .variant[aria-pressed="true"] {
  position: relative !important;
  isolation: isolate !important;
  color: var(--white) !important;
  background: var(--green-700) !important;
  background-image: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Paint over the browser's faint inset highlight on the active segment. */
#main .pdp__info .field[data-variant-form] .variants .variant[aria-pressed="true"]::before,
#main .pdp__info .variants .variant[aria-pressed="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: var(--green-700) !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Remove the browser/WebKit focus stroke from the cure controls. */
#main .pdp__info .field[data-variant-form] .variants .variant:focus,
#main .pdp__info .field[data-variant-form] .variants .variant:focus-visible,
#main .pdp__info .variants .variant:focus,
#main .pdp__info .variants .variant:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-offset: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 600px) {
  #main .pdp__info .field[data-variant-form] .variants .variant,
  #main .pdp__info .variants .variant {
    flex-basis: 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 8px !important;
    font-size: 15px !important;
  }
}

/* Phone-order reference fade: subtly lighter on the left and warmer on the
   right, matching the original cream panel. */
#main .pdp__info .buy-row .phone-order,
#main .phone-order {
  background: linear-gradient(90deg, #fffaf1 0%, #fff4df 100%) !important;
}

/* Final PDP responsive guard. Narrow desktop windows must use the same
   single-column flow as tablet, otherwise the fixed gallery competes with
   .pdp__info and creates horizontal overflow. */
@media (max-width: 1100px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp > .gallery {
    position: static;
  }
  .pdp__info > .product-complementary,
  .product-complementary {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .product-complementary > .container {
    max-width: 100%;
    padding-inline: 0;
  }
}

/* Stable purchase controls: quantity buttons must remain circular and the
   phone panel must never be clipped by the information column. */
@media (min-width: 901px) {
  .buy-row {
    display: grid;
    grid-template-columns: max-content minmax(220px, 1fr) 48px minmax(220px, 1fr);
    align-items: center;
    min-width: 0;
    width: 100%;
    gap: 12px;
  }
  .buy-row .qty {
    display: inline-flex;
    flex: none;
    min-width: max-content;
    overflow: visible;
  }
  .buy-row .qty button {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }
  .buy-row .qty input {
    flex: 0 0 38px;
    width: 38px;
  }
  .buy-row .phone-order {
    grid-column: 4;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
  }
  .buy-row .phone-order > div {
    min-width: 0;
    flex: 1 1 auto;
  }
  .buy-row .phone-order__label {
    white-space: nowrap;
  }
  .buy-row .phone-order__num {
    font-size: clamp(19px, 2vw, 28px);
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-width: 1399px) {
  .buy-row {
    grid-template-columns: max-content minmax(220px, 1fr) 48px minmax(220px, 1fr);
  }
  .buy-row .qty button {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  .buy-row .qty input {
    flex-basis: 30px;
    width: 30px;
    font-size: 24px;
  }
  .buy-row > .btn {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    font-size: 18px;
  }
  .buy-row > .icon-btn {
    grid-column: 3;
    width: 48px;
  }
  .buy-row .phone-order {
    grid-column: 4;
    width: 100%;
    min-height: 64px;
  }
}

@media (min-width: 1400px) {
  .buy-row {
    grid-template-columns: max-content minmax(260px, 353px) 56px minmax(300px, 450px);
  }
  .buy-row .qty button {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
  .buy-row .qty input {
    flex-basis: 48px;
    width: 48px;
    font-size: 32px;
  }
  .buy-row > .btn {
    grid-column: 2;
    width: 100%;
    min-height: 96px;
    font-size: 32px;
  }
  .buy-row > .icon-btn {
    grid-column: 3;
    width: 56px;
  }
  .buy-row .phone-order {
    grid-column: 4;
    width: 100%;
    min-height: 114px;
    padding: 14px 28px;
    border-radius: 30px;
  }
  .buy-row .phone-order__label {
    font-size: 16px;
  }
  .buy-row .phone-order__num {
    font-size: 32px;
  }
  .buy-row .phone-order > .mi {
    font-size: 48px;
  }
}

html,
body,
#main {
  max-width: 100%;
  overflow-x: clip;
}


/* Medium desktop: the right PDP column cannot fit the full reference row.
   Let the contact panel wrap as a complete unit instead of clipping it at
   the edge of .pdp__info. */
@media (min-width: 1101px) and (max-width: 1399px) {
  .buy-row {
    flex-wrap: wrap;
  }
  .buy-row > .btn {
    min-height: 56px;
    padding-inline: 20px;
    font-size: 18px;
  }
  .qty button {
    width: 56px;
    height: 56px;
  }
  .qty input {
    width: 32px;
    font-size: 24px;
  }
  .phone-order {
    flex: 0 1 250px;
    min-width: 0;
    min-height: 64px;
  }
}
@media (max-width: 560px) {
  .home-afflictions-section .aff-compact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-afflictions-section .aff-row__title {
    font-size: 14px;
  }
}

/* Do not use the four-column desktop grid when the PDP information column is
   narrower than the Figma canvas. Flex wrapping keeps every control visible
   instead of placing the favorite/phone controls beyond the clipping edge. */
@media (min-width: 901px) and (max-width: 1599px) {
  .buy-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 12px;
  }
  .buy-row .qty {
    flex: 0 0 auto !important;
    min-width: max-content;
  }
  .buy-row .qty button {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
  }
  .buy-row .qty input {
    flex: 0 0 30px !important;
    width: 30px !important;
    font-size: 24px;
  }
  .buy-row > .btn {
    flex: 0 1 260px !important;
    width: auto !important;
    min-width: 220px;
    min-height: 56px;
    font-size: 18px;
  }
  .buy-row > .icon-btn {
    flex: 0 0 48px !important;
    width: 48px;
  }
  .buy-row .phone-order {
    flex: 0 1 280px !important;
    width: 280px !important;
    min-width: 220px;
    min-height: 64px;
    margin-left: auto;
  }
}

/* Desktop reference scale: the controls must use the compact Figma sizing,
   not the oversized 96px/353px variant used only on the wide canvas. */
@media (min-width: 1400px) {
  .buy-row .qty button {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .buy-row .qty input {
    flex-basis: 30px !important;
    width: 30px !important;
    font-size: 22px !important;
  }
  .buy-row > .btn {
    flex: 0 1 260px !important;
    width: 260px !important;
    min-width: 220px;
    min-height: 56px !important;
    padding-inline: 20px !important;
    font-size: 18px !important;
  }
  .buy-row > .icon-btn {
    flex: 0 0 48px !important;
    width: 48px !important;
  }
  .buy-row .phone-order {
    flex: 0 1 280px !important;
    width: 280px !important;
    min-width: 220px;
    min-height: 64px !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
  }
  .buy-row .phone-order__label {
    font-size: 12px !important;
  }
  .buy-row .phone-order__num {
    font-size: 21px !important;
  }
  .buy-row .phone-order > .mi {
    flex-basis: 32px;
    font-size: 32px !important;
  }
}

/* Compact desktop breakpoint shown in the supplied reference. Keep the
   complete row visible at this width instead of using the large canvas sizes. */
@media (min-width: 901px) and (max-width: 1599px) {
  .buy-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .buy-row .qty {
    flex: 0 0 auto !important;
    gap: 4px;
  }
  .buy-row .qty button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px;
  }
  .buy-row .qty input {
    flex: 0 0 28px !important;
    width: 28px !important;
    font-size: 20px !important;
  }
  .buy-row > .btn {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
  }
  .buy-row > .icon-btn {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .buy-row .phone-order {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    gap: 8px;
  }
  .buy-row .phone-order__label {
    font-size: 8px !important;
  }
  .buy-row .phone-order__num {
    font-size: 16px !important;
  }
  .buy-row .phone-order > .mi {
    flex: 0 0 24px !important;
    font-size: 24px !important;
  }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-certs {
  display: flex;
  gap: 12px;
  align-items: center;
}
.footer-certs img {
  height: 57px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 4px;
}
.footer-col__title {
  font-weight: 600;
  margin-bottom: 32px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
.footer-links--single {
  grid-template-columns: 1fr;
}
.footer-links a {
  font-size: 18px;
  color: var(--white);
  opacity: 0.92;
}
.footer-links a:hover {
  color: var(--gold-500);
}
.footer-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-block: 40px;
}
.footer-contact .shortcut {
  background: none;
  padding: 0;
}
.footer-contact .shortcut__icon {
  background: var(--green-300);
  color: var(--white);
  width: 50px;
  height: 50px;
}
.footer-contact .shortcut__title,
.footer-contact .shortcut__meta {
  color: var(--white);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-bottom__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 18px;
}
.footer-legal a:hover {
  color: var(--gold-500);
}
.footer-legal span {
  opacity: 0.5;
}
.socials {
  display: flex;
  gap: 21px;
  align-items: center;
}
.socials__label {
  font-size: 14px;
  line-height: 1.3;
  opacity: 0.85;
}
.socials a {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: var(--green-300);
  display: grid;
  place-items: center;
  color: var(--white);
}
.socials a:hover {
  background: var(--gold-500);
  color: var(--green-700);
}
.footer-copy {
  text-align: center;
  font-size: 16px;
  opacity: 0.85;
}

@media (max-width: 1000px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-contact {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Floating chat + toast
   ========================================================================== */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-3);
}
.chat-fab:hover {
  background: var(--green-500);
}

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--green-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .topbar,
  .mainnav,
  .site-footer,
  .chat-fab,
  .toast-wrap {
    display: none !important;
  }
}

/* Homepage category bento: keep the desktop composition through tablet,
   while ensuring artwork and card gutters stay inside their grid tracks. */
.home-categories-section .cat-grid,
.home-categories-section .cat-card {
  box-sizing: border-box;
  min-width: 0;
}

.home-categories-section .cat-card img {
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) and (max-width: 900px) {
  #main .home-categories-section .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 230px !important;
    gap: 18px !important;
  }

  #main .home-categories-section .cat-card {
    padding: 16px 24px !important;
  }

  #main .home-categories-section .cat-card:not(.cat-card--tall):not(.cat-card--wide) {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #main .home-categories-section .cat-card--wide {
    grid-column: span 2 !important;
    grid-row: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #main .home-categories-section .cat-card--tall {
    grid-column: auto !important;
    grid-row: span 2 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #main .home-categories-section .cat-card img {
    height: 198px !important;
  }

  #main .home-categories-section .cat-card:not(.cat-card--tall):not(.cat-card--wide) img {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  #main .home-categories-section .cat-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }

  #main .home-categories-section .cat-card,
  #main .home-categories-section .cat-card--tall,
  #main .home-categories-section .cat-card--wide {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 24px !important;
  }

  #main .home-categories-section .cat-card img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
  }
}

/* This must remain after the max-width:900px rule so the mobile offset wins. */
@media (max-width: 560px) {
  .homepage-tv__image {
    transform: translateY(18px) !important;
  }
}

/* Promo cards: horizontal inside each card until the cards stack at 600px. */
@media (min-width: 601px) and (max-width: 900px) {
  #main .home-promo-section .promo-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #main .home-promo-section .promo-tile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    min-height: 218px;
  }

  #main .home-promo-section .promo-tile__body {
    min-width: 0;
    flex: 1 1 60%;
  }

  #main .home-promo-section .promo-tile img {
    width: 38% !important;
    height: 150px !important;
    flex: 0 0 38%;
    object-fit: contain;
  }
}

@media (max-width: 600px) {
  #main .home-promo-section .promo-duo {
    grid-template-columns: 1fr !important;
  }

  #main .home-promo-section .promo-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  #main .home-promo-section .promo-tile img {
    order: -1;
    width: 100% !important;
    height: 180px !important;
    object-fit: contain;
  }

  #main .home-promo-section .promo-tile__body {
    width: 100%;
  }
}

@media (max-width: 900px) {
  #main .home-promo-section .promo-tile .badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    align-self: auto !important;
    margin: 0 !important;
    z-index: 2;
  }
}

/* Keep the TV image anchored to the bottom of its section on responsive
   layouts instead of translating it into the following section. */
@media (max-width: 900px) {
  .homepage-tv-section {
    overflow: visible;
  }

  .homepage-tv__image {
    display: block;
    margin-top: auto;
    transform: translateY(clamp(24px, 5.8vw, 52px)) !important;
    object-position: center bottom;
  }
}

/* Category cards: two-column tablet layout, stacked mobile layout. */
@media (min-width: 768px) and (max-width: 1100px) {
  #main .home-categories-section .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(230px, auto) !important;
    align-items: stretch;
  }

  #main .home-categories-section .cat-card,
  #main .home-categories-section .cat-card--tall,
  #main .home-categories-section .cat-card--wide,
  #main .home-categories-section .cat-card:not(.cat-card--tall):not(.cat-card--wide) {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(120px, 2fr) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 230px;
    height: auto !important;
  }

  #main .home-categories-section .cat-card__body {
    min-width: 0;
    height: 100%;
  }

  #main .home-categories-section .cat-card__body .btn {
    margin-top: auto;
  }

  #main .home-categories-section .cat-card img,
  #main .home-categories-section .cat-card:not(.cat-card--tall):not(.cat-card--wide) img {
    width: 100% !important;
    height: 198px !important;
  }
}

@media (max-width: 767px) {
  #main .home-categories-section .cat-card,
  #main .home-categories-section .cat-card--tall,
  #main .home-categories-section .cat-card--wide,
  #main .home-categories-section .cat-card:not(.cat-card--tall):not(.cat-card--wide) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0;
    height: auto !important;
  }

  #main .home-categories-section .cat-card__body {
    width: 100%;
    height: auto;
  }

  #main .home-categories-section .cat-card__body .btn {
    margin-top: 0;
  }
}

/* Final mobile override: placed after the responsive clamp rule. */
@media (max-width: 560px) {
  .homepage-tv__image {
    transform: translateY(18px) !important;
  }
}