:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f1f2ef;
  /* Section-scoped alt surfaces. Each defaults to its current
     upstream literal so fresh-install renders byte-identically.
     Wired to the brand-level "Surface alt 2 / 3" pickers in the
     Page surfaces card. */
  --color-surface-3: #f7fee7;  /* .section-content-tabs (lime today) */
  --color-surface-4: #eff6ff;  /* .faq-section (light blue today) */
  --color-surface-5: #ecf6df;  /* .config-group--date (pale lime today, was rgba) */
  --color-surface-grey: #f1f2ef;  /* Media frame: .product-gallery__main + .basket-item__media */
    --color-hero: #d9f99d;
  /* Defaults to --color-heading so existing rendering is unchanged
     when no operator override is saved. The operator can pin a
     specific hero-text colour via the Site CSS form's Hero card
     without dragging --color-heading along. */
  --color-hero-text: var(--color-heading);

  --color-heading: #171717;
  --color-text: #2f3334;
  --color-text-muted: #687174;
  --color-muted: var(--color-text-muted);
  --color-border: #ddddda;

  --color-primary: #2fc37a;
  --color-primary-hover: #27ad6c;
  --color-primary-soft: #dff5ea;

  --color-accent: #ec5bb5;
  --color-accent-soft: #f8d4ea;

  --icon-muted: #bfc4c7;

  --shadow-soft: 0 6px 18px rgba(31, 38, 40, 0.04);

 --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Urbanist", system-ui, sans-serif;


  --text-xs: clamp(0.82rem, 0.8rem + 0.06vw, 0.88rem);
  --text-sm: clamp(0.96rem, 0.93rem + 0.1vw, 1.03rem);
  --text-base: clamp(1.05rem, 1.01rem + 0.12vw, 1.12rem);
  --text-lg: clamp(1.18rem, 1.11rem + 0.28vw, 1.35rem);
  --text-xl: clamp(1.45rem, 1.3rem + 0.58vw, 1.82rem);
  --text-2xl: clamp(1.85rem, 1.55rem + 1.1vw, 2.5rem);
  --text-hero: clamp(2.45rem, 1.95rem + 1.7vw, 3.75rem);

  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1280px;

  --space-1: clamp(0.25rem, 0.24rem + 0.03vw, 0.28rem);
  --space-2: clamp(0.5rem, 0.48rem + 0.05vw, 0.56rem);
  --space-3: clamp(0.75rem, 0.72rem + 0.08vw, 0.82rem);
  --space-4: clamp(1rem, 0.96rem + 0.12vw, 1.1rem);
  --space-5: clamp(1.4rem, 1.3rem + 0.24vw, 1.6rem);
  --space-6: clamp(1.9rem, 1.7rem + 0.45vw, 2.3rem);
  --space-7: clamp(2.75rem, 2.45rem + 0.8vw, 3.4rem);
  --space-8: clamp(3.5rem, 3rem + 1.2vw, 4.5rem);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --link-color: var(--color-primary);
  --muted-text: var(--color-text-muted);
  --section-alt: var(--color-surface-2);
  --surface-soft: var(--color-surface-2);
  --border: var(--color-border);

  /* ─── Per-section colour variables ─────────────────────────────────
     Each default is the CURRENT UPSTREAM VALUE, verbatim (literal or
     token, whichever is there in ~/Sites/printvine/assets/css/ today),
     so a fresh-install or unset-everything site renders byte-identically.
     The operator overrides one of these via the Site CSS form's
     Sections tab when they want a section coloured independently
     from the rest of the site. See docs/Site-CSS-Section-Vars-Brief.md. */
  --topbar-bg: #2f302d;                       /* .topbar (= announcement bar) */
  --topbar-text: #f5f3ef;                     /* .topbar + .topbar-copy */
  --header-bg: #ffffff;                       /* .site-header + .nav-wrapper */
  --nav-text: var(--color-text);              /* .nav-menu > li > a — cascade from Body text (links are body-level UI, not headings) */
  --nav-text-hover: var(--color-primary);     /* hover/focus state — cascade */
  --megamenu-bg: #ffffff;                     /* .mega-dropdown-inner */
  --megamenu-title: var(--color-heading);     /* .mega-category-title — cascade */
  --megamenu-link: var(--color-text);         /* .mega-link — cascade */
  --megamenu-link-hover: var(--color-primary); /* .mega-link:hover + title hover — cascade */
  --megamenu-price: var(--color-text-muted);  /* .mega-link__price — cascade */
  --footer-bg: #f7f7f5;                       /* .site-footer — independent pale grey, NOT tracking page bg */
  --footer-text: var(--color-text);           /* .footer-column a — cascade */
  --footer-text-hover: var(--color-primary);  /* .footer-column a:hover — cascade */
  --pageshero-bg: var(--color-hero);          /* .page-hero / .feature-card--hero / .blog-newsletter-strip / .service-hero — cascade */
  --pageshero-text: var(--color-heading);     /* heading text on those heroes — cascade */
  --service-pill-bg: #ffffff;                 /* .service-hero__tag (display:none today; vars set up for when it ships) */
  --service-pill-text: var(--color-heading);  /* service pill text — cascade */
  /* Option chips on product / config pages — Selected vs default. */
  --option-chip-bg: #f3f3f1;                  /* default unselected pill */
  --option-chip-selected-bg: #d9f99d;         /* selected pill (lime) */
  --option-chip-selected-text: var(--color-heading); /* selected text — cascade */
  /* Cart icon button + count badge. */
  --cart-icon-bg: #ffffff;                    /* .icon-link + .btn.btn-secondary.portal-btn bg */
  --cart-icon-hover-bg: rgba(15, 23, 42, 0.05); /* .icon-link + portal-btn hover */
  --cart-icon-text: var(--color-heading);     /* .icon-link + portal-btn SVG/text colour — cascade */
  --cart-count-bg: var(--color-heading);      /* .icon-badge + .cart-count — cascade */
  --cart-count-text: #ffffff;                 /* badge text — literal white */
  /* Home-hero benefit pills + product-page USP pills. */
  --hero-benefit-bg: rgba(255, 255, 255, 0.75); /* .hero-benefits > div */
  --hero-benefit-text: var(--color-heading);   /* .hero-benefits strong — cascade */
  --product-usp-bg: #f3f3f1;                  /* .product-usps li */
  --product-usp-text: var(--color-heading);   /* .product-usps text + icon — cascade */
  /* Basket + checkout pages. */
  --basket-item-bg: #ffffff;                  /* .basket-item card */
  --basket-summary-bg: #ffffff;               /* .basket-summary / .checkout-summary sidebar panel */
}

.section-link a:not(.btn) {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--link-color) 55%, transparent);
}

.section-link a:not(.btn):hover,
.section-link a:not(.btn):focus-visible {
  color: color-mix(in srgb, var(--link-color) 85%, black);
  text-decoration-color: var(--link-color);
}

.section {
  padding-block: var(--space-7);
}

.section-tight {
  padding-block: var(--space-6);
}

.section-loose,
.section-break {
  padding-block: var(--space-7);
}

.section-soft {
  background: var(--color-bg);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-5);
  }

  .section-loose,
  .section-break {
    padding-block: var(--space-4);
  }
}

.small,
.meta,
.helper-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.breadcrumbs {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

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

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: var(--space-5) 0;
  color: currentColor;
}

.page-numbers {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-numbers button {
  all: unset;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: currentColor;
  padding: 4px 2px;
  transition: color 0.2s ease;
}

.page-numbers button:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-numbers button.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.arrow-button {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  border: 1px solid color-mix(in srgb, currentColor 85%, transparent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.arrow-button:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  color: #fff;
}

.arrow-button:active:not(:disabled) {
  transform: scale(0.98);
}

.arrow-button:disabled {
  opacity: 0.25;
  background: transparent;
  cursor: not-allowed;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}

.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--solid { fill: currentColor; stroke: none; }
.icon-menu,
.icon-cart { width: 24px; height: 24px; }



.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-count-bg, var(--color-heading));
  color: var(--cart-count-text, #fff);
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
  box-sizing: border-box;
}

.feature-title {
  margin-bottom: var(--space-6);
}

@media (max-width: 1024px) {
  .feature-title {
    text-align: left !important;
    margin-bottom: var(--space-4);
  }
}

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

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

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-card,
.product-image,
.product-overlay,
.product-title,
.product-price,
.load-more-wrapper,
.reveal,
.delay-1,
.delay-2,
.badges,
.usp-list,
.feature-box,
.review-carousel,
.review-track,
.review-slide,
.stars,
.review-text,
.review-author,
.review-dots,
.peak-bar,
.peak-inner,
.peak-text,
.footer-badge,
.footer-divider {
  /* keep only if those components are genuinely used elsewhere */
}

.footer-grid {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 48px 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 20px;
}

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

.footer-logo {
  max-width: 100px;
  height: auto;
}

.footer-heading {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-heading);
}

.footer-links li {
  list-style: none;
}

.footer-links a,
.footer-link {
  display: inline-block;
  padding: 4px 0;
  color: var(--color-text);
  opacity: 1;
}

.footer-links a:hover,
.footer-link:hover {
  color: var(--color-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 24px 0 0;
  flex-wrap: wrap;
}

.copy-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.payment-icons {
  max-width: 360px;
  color: var(--color-text-muted);
}

.payment-icons svg {
  max-width: 100%;
  height: auto;
}

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

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 0;
  }

  .footer-column {
    align-items: flex-start;
    text-align: left;
  }

  .footer-logo {
    margin-inline: 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }

  .payment-icons {
    max-width: 300px;
    margin-inline: 0;
  }
}

.
.hero-section {
  background: var(--color-hero);
  padding: 2rem 0 1.75rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: center;
}

.hero-copy {
  max-width: 52rem;
}

.hero-copy h1 {
  margin: 0 0 0.85rem;
  font-size: var(--text-hero, clamp(2.7rem, 4.2vw, 4rem));
  line-height: 0.96;
  letter-spacing: 0.008em;
  color: var(--color-hero-text, var(--color-heading));
}

.intro-copy {
  max-width: 27rem;
  margin: 0 0 1.2rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--color-hero-text, var(--color-heading));
}
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  width: 100%;
}

.hero-card img {
  display: block;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  object-fit: contain;
}