/* DermaTouch storefront replica — the environment Touch AI is developed against.
 *
 * NOT the production theme. The real store is Shopify + Liquid and its templates
 * live server-side; this reproduces the LAYOUT and the DOM SHAPE the widget has
 * to coexist with, using the real catalogue and the real CDN images.
 *
 * The DOM shape is the point. Class names and URL patterns follow Shopify's
 * conventions (/products/<handle>, /collections/<handle>, .product-card,
 * .product__info) so that anything the widget does here -- positioning, the PDP
 * ask strip, z-index against a sticky header -- behaves the same once the same
 * markup is generated by Liquid.
 */

:root {
  --ink: #15181b;
  --ink-soft: #4a5258;
  --line: #e4e7e9;
  --bg: #ffffff;
  --bg-soft: #f6f7f8;
  --brand: #0d7d6c;          /* DermaTouch teal, as used by the widget */
  --brand-dark: #0a6153;
  --accent: #e11d2e;         /* the red callout boxes on the hero */
  --sun: #e8720c;            /* the suncare slide; 4.51:1 on white */
  /* The announcement bar. A token rather than the raw #101314 it used to be,
     because it is the one strip of brand colour above the fold and somebody
     will want to change it again. White on this teal is 5.1:1 -- AA at the
     12.5px this bar uses, which near-black passed by accident rather than by
     anyone checking. */
  --announce-bg: var(--brand);
  --announce-ink: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --wrap: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Assistant, "Just Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* --- demo banner ---------------------------------------------------------
   Says what this is, on every page. A replica that does not announce itself
   is one screenshot away from being mistaken for the live store. */
.demo-note {
  background: #fdf6e3;
  border-bottom: 1px solid #efe2bd;
  color: #6b5a13;
  font-size: 12.5px;
  padding: 7px 20px;
  text-align: center;
}
.demo-note strong { color: #4a3c06; }

/* Console links live in the demo strip and nowhere else on this page. The
   strip is already the reviewer's bar rather than storefront chrome, so the
   replica still reads as the shop it is imitating -- and anyone reviewing a
   conversation can reach the record of it without typing a URL. */
.demo-note__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}
.demo-note__links a {
  background: #fffdf6;
  border: 1px solid #e3d5a8;
  border-radius: 5px;
  color: #6b5a13;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  padding: 2px 9px;
  text-decoration: none;
  white-space: nowrap;
}
.demo-note__links a:hover,
.demo-note__links a:focus-visible { background: #4a3c06; border-color: #4a3c06; color: #fff; }
/* 44px targets on a phone, where the strip wraps to its own line anyway. */
@media (max-width: 640px) {
  .demo-note { text-align: left; }
  .demo-note__links { display: flex; margin: 8px 0 2px; }
  .demo-note__links a { line-height: 2.6; padding: 0 12px; }
}

/* --- announcement bar ---------------------------------------------------- */
.announce {
  background: var(--announce-bg);
  color: var(--announce-ink);
  font-size: 12.5px;
  letter-spacing: .02em;
  overflow: hidden;
  padding: 9px 0;
  white-space: nowrap;
}
.announce__track {
  display: inline-flex;
  gap: 64px;
  padding-left: 64px;
  animation: marquee 38s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; }
}

/* --- header -------------------------------------------------------------- */
.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;              /* below the widget (2147483000), above the page */
}
.header__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  height: 66px;
}
.logo { align-items: center; display: flex; flex: 0 0 auto; }
.logo img { height: 38px; width: auto; }

/* --- nav / mega menu ----------------------------------------------------- */
.nav { display: flex; flex: 1 1 auto; gap: 4px; }
.nav__group { position: static; }      /* panel spans the viewport, as on the live site */
.nav__top {
  align-items: center; background: none; border: 0; color: inherit;
  cursor: pointer; display: flex; font: inherit; font-size: 14.5px;
  font-weight: 600; gap: 6px; padding: 22px 14px;
}
.nav__caret {
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; display: inline-block;
  height: 5px; transform: rotate(45deg) translateY(-2px); width: 5px;
  transition: transform .18s ease;
}
.nav__group:hover .nav__top,
.nav__top[aria-expanded="true"] { color: var(--brand); }
.nav__group:hover .nav__caret,
.nav__top[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translateY(-2px); }

.mega {
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
  left: 0;
  opacity: 0;
  padding: 22px 0 26px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 39;
}
.nav__group:hover .mega,
.nav__group:focus-within .mega {
  opacity: 1; pointer-events: auto; transform: none;
}
.mega__grid {
  display: grid; gap: 4px 26px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mega__item { border-radius: 8px; display: block; padding: 10px 12px; }
.mega__item:hover { background: var(--bg-soft); }
.mega__name { display: block; font-size: 14.5px; font-weight: 700; }
.mega__note { color: var(--ink-soft); display: block; font-size: 12.5px; }

.header__actions { align-items: center; display: flex; gap: 10px; margin-left: auto; }
.nav-toggle { display: none; }
.icon-btn {
  background: none; border: 0; cursor: pointer; font-size: 19px;
  line-height: 1; padding: 6px; position: relative; color: var(--ink);
}
.cart-count {
  background: var(--accent); border-radius: 10px; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 5px; position: absolute; right: -2px; top: -1px;
}
.cart-count[hidden] { display: none !important; }

/* --- hero ---------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, #fbfbfb, #f2f4f4);
  padding: 44px 0 48px;
}
/* The grid lives on an INNER element, not on .hero itself. An earlier version
   put the grid on .hero and used <div class="wrap" style="display:contents">
   to pass the children through -- but display:contents removes the element's
   box, so the wrap's max-width AND its side padding vanished with it, and the
   headline sat flush against the left edge of the viewport at every width. */
.hero__inner {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.05fr .95fr;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .98;
  margin: 0 0 22px;
}
.hero__art {
  align-items: center; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; justify-content: center;
  min-height: 320px; overflow: hidden; padding: 16px;
}
.hero__art img { max-height: 300px; max-width: 100%; object-fit: contain; }

/* --- hero slideshow ------------------------------------------------------
   Three slides, built as markup rather than as flat banner images: text in a
   picture does not reflow, and at 390px a 1920-wide banner is either unreadable
   or cropped past the point of saying anything.

   Slides are STACKED rather than laid out in a track. A track needs a fixed
   slide width to translate by, and these slides are different heights at
   different widths -- the acne one has two callouts, the suncare one has a
   paragraph. Stacking lets the tallest set the height and costs one opacity
   transition, which is compositor-only. */
.hero { position: relative; }
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
/* The first slide is visible at rest, before any script runs: a hero that
   waits for JS to become visible is a blank page to anything that screenshots
   it, and a flash of nothing to everyone else. */
.hero__slide:first-child, .hero__slide.is-on {
  opacity: 1;
  pointer-events: auto;
}
.hero__slide:not(.is-on):not(:first-child) { visibility: hidden; }
.hero__slide.is-on { visibility: visible; }
.hero__slides.is-ready .hero__slide:first-child:not(.is-on) {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* Per-slide accent, so one rule set serves all three and the colour is data. */
.hero__slide { --slide: var(--accent); }
.hero__slide[data-accent="brand"] { --slide: var(--brand); }
.hero__slide[data-accent="sun"]   { --slide: var(--sun); }

.hero__eyebrow {
  /* Solid first: a browser without color-mix drops that declaration entirely,
     and the pill would otherwise sit transparent on the hero gradient. */
  background: #fff;
  align-items: center; background: color-mix(in srgb, var(--slide) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--slide) 26%, #fff);
  border-radius: 999px; color: var(--slide); display: inline-flex;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  margin-bottom: 16px; padding: 7px 14px; text-transform: uppercase;
}
/* Two lines: the first plain, the second in the slide's accent -- the way
   the storefront banners set them (YOUR DAILY / ACNE CARE ROUTINE). */
.hero h1 .hero__lead { display: block; }
.hero h1 .hero__accent { color: var(--slide); display: block; }
.hero__sub {
  color: var(--ink-soft); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; margin: 0 0 24px; max-width: 46ch;
}
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hero__tag {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 13px; text-transform: uppercase;
}
.hero__tag::before {
  background: var(--slide); border-radius: 50%; content: '';
  display: inline-block; height: 6px; margin-right: 7px; width: 6px;
}
.hero .btn { background: var(--slide); }

/* Dots. Real buttons at 44px -- the visible dot is 10px but the tap target is
   not, which is the whole reason the padding is on the button. */
.hero__dots {
  display: flex; gap: 2px; justify-content: center; margin-top: 8px;
}
.hero__dot {
  background: none; border: 0; cursor: pointer;
  height: 44px; min-width: 44px; padding: 0;
}
.hero__dot::after {
  background: var(--line); border-radius: 999px; content: '';
  display: block; height: 8px; margin: 0 auto; transition: all .25s ease;
  width: 8px;
}
.hero__dot[aria-current="true"]::after { background: var(--brand); width: 26px; }
.hero__dot:focus-visible { outline: 2px solid var(--brand); outline-offset: -8px; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__dot::after { transition: none; }
}

.btn {
  background: var(--accent); border: 0; border-radius: 3px; color: #fff;
  cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; padding: 14px 30px; text-transform: uppercase;
}
.btn:hover { filter: brightness(.94); }
.btn--brand { background: var(--brand); }
.btn--ghost {
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink);
}
.btn[disabled] { cursor: not-allowed; opacity: .5; }

/* --- sections ------------------------------------------------------------ */
.section { padding: 46px 0; }
.section__head {
  align-items: baseline; display: flex; gap: 26px; justify-content: center;
  margin-bottom: 26px;
}
.section__head h2 {
  font-size: 15px; font-weight: 800; letter-spacing: .14em; margin: 0;
  text-transform: uppercase;
}
.section__head .muted { color: #9aa2a7; }

/* --- product grid -------------------------------------------------------- */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card__media {
  aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden;
}
.product-card__media img { height: 100%; object-fit: cover; width: 100%; }
.product-card__body {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 13px;
}
.product-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden;
}
.price { align-items: baseline; display: flex; gap: 8px; margin-top: auto; }
.price__now { font-size: 16px; font-weight: 800; }
.price__was { color: #9aa2a7; font-size: 13px; text-decoration: line-through; }
.price__off { color: var(--accent); font-size: 12px; font-weight: 700; }
.product-card .btn { font-size: 12.5px; padding: 10px 0; text-align: center; width: 100%; }

/* --- product detail page ------------------------------------------------- */
.pdp { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; padding: 32px 0 8px; }
.pdp__gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp__main {
  background: var(--bg-soft); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 1 / 1;
}
.pdp__main img { height: 100%; object-fit: cover; width: 100%; }
.pdp__thumbs { display: flex; gap: 9px; }
.pdp__thumbs button {
  background: var(--bg-soft); border: 1.5px solid transparent;
  border-radius: 7px; cursor: pointer; height: 66px; overflow: hidden;
  padding: 0; width: 66px;
}
.pdp__thumbs button[aria-selected="true"] { border-color: var(--brand); }
.pdp__thumbs img { height: 100%; object-fit: cover; width: 100%; }

.pdp h1 { font-size: 25px; font-weight: 700; line-height: 1.28; margin: 0 0 12px; }
.pdp__rating { align-items: center; color: var(--ink-soft); display: flex; gap: 7px;
               font-size: 13.5px; margin-bottom: 16px; }
.pdp__rating .star { color: #f5a524; }
.pdp__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge {
  align-items: center; border: 1px solid var(--line); border-radius: 6px;
  display: inline-flex; font-size: 13px; font-weight: 600; gap: 7px;
  padding: 8px 13px;
}
.badge::before { color: var(--brand); content: "✓"; font-weight: 800; }
.pdp__price { align-items: baseline; display: flex; gap: 10px; margin-bottom: 6px; }
.pdp__price .price__now { font-size: 25px; }
.pdp__unit { color: var(--ink-soft); font-size: 13px; margin-bottom: 20px; }

.variants { margin-bottom: 22px; }
.variants__label { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.variants__list { display: flex; flex-wrap: wrap; gap: 10px; }
.variant {
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  cursor: pointer; min-width: 118px; padding: 11px 13px; position: relative;
  text-align: left;
}
.variant[aria-pressed="true"] { border-color: var(--brand); }
.variant[aria-pressed="true"]::after {
  background: var(--brand); border-radius: 50%; color: #fff; content: "✓";
  font-size: 11px; height: 18px; line-height: 18px; position: absolute;
  right: -7px; text-align: center; top: -7px; width: 18px;
}
.variant__size { color: var(--ink-soft); font-size: 12px; margin-bottom: 3px; }
.variant__price { font-size: 15px; font-weight: 800; }
.variant[disabled] { cursor: not-allowed; opacity: .45; }

.pdp__buy { display: flex; gap: 12px; margin-bottom: 26px; }
.pdp__buy .btn { flex: 1 1 auto; }

.pdp__desc { border-top: 1px solid var(--line); color: var(--ink-soft);
             font-size: 14px; padding-top: 20px; }

/* --- cart ---------------------------------------------------------------- */
.cart-line {
  align-items: center; border-bottom: 1px solid var(--line); display: grid;
  gap: 16px; grid-template-columns: 78px 1fr auto auto; padding: 16px 0;
}
.cart-line img { border-radius: 8px; height: 78px; object-fit: cover; width: 78px; }
.cart-total { display: flex; font-size: 18px; font-weight: 800;
              justify-content: space-between; padding: 20px 0; }
.empty { color: var(--ink-soft); padding: 60px 0; text-align: center; }

/* --- footer -------------------------------------------------------------- */
.footer {
  background: #101314; color: #cfd4d6; margin-top: 50px; padding: 40px 0 30px;
}
.footer__cols {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.footer h3 {
  color: #fff; font-size: 12px; letter-spacing: .12em; margin: 0 0 13px;
  text-transform: uppercase;
}
.footer a { color: #cfd4d6; display: block; font-size: 13.5px; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer__base {
  border-top: 1px solid #262b2d; font-size: 12px; margin-top: 28px;
  padding-top: 18px; text-align: center;
}

/* --- toast --------------------------------------------------------------- */
.toast {
  background: var(--ink); border-radius: 8px; bottom: 26px; color: #fff;
  font-size: 14px; left: 26px; opacity: 0; padding: 13px 18px;
  pointer-events: none; position: fixed; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.toast.show { opacity: 1; transform: none; }

/* --- PDP ask strip -------------------------------------------------------
   Kept ABOVE the responsive section on purpose. These rules were appended to
   the end of this file once and then silently deleted by a later rewrite of
   the responsive block, which truncated everything below its marker. The strip
   then rendered with browser-default input and buttons at every width -- and
   because the mobile OVERRIDES further down survived, nothing looked obviously
   missing in the source. Base rules live before the media queries now. */
.ask {
  background: linear-gradient(180deg, #f7fbfa, #f2f7f6);
  border: 1px solid #d8e8e4;
  border-radius: var(--radius);
  margin: 0 0 24px;
  padding: 16px;
}
.ask__head {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 11px;
  text-align: center;
  text-transform: uppercase;
}
.ask__form {
  align-items: center;
  background: #fff;
  border: 1.5px solid #cfe2dd;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  padding: 5px 5px 5px 16px;
}
.ask__form:focus-within { border-color: var(--brand); }
.ask__input {
  background: none; border: 0; color: var(--ink); flex: 1 1 auto;
  font: inherit; min-width: 0; outline: none; padding: 9px 0;
}
.ask__btn {
  background: var(--ink); border: 0; border-radius: 999px; color: #fff;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 20px; white-space: nowrap;
}
.ask__btn:hover { background: var(--brand-dark); }
.ask__btn:focus-visible,
.ask__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask__chip {
  background: #fff; border: 1px solid #d8e8e4; border-radius: 999px;
  color: var(--ink); cursor: pointer; font-family: inherit; font-size: 13px;
  padding: 8px 14px;
}
.ask__chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- cart ----------------------------------------------------------------
   Quantity and remove were missing entirely: the page rendered "x 2" as text,
   so a customer could add to the cart and then had no way to change their
   mind. Remove is implemented as quantity 0 -- the adapter's own removal
   path -- rather than a second operation that could disagree with it. */
.cart-line {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 78px 1fr auto auto;
  padding: 16px 0;
}
.cart-line img { border-radius: 8px; height: 78px; object-fit: cover; width: 78px; }
.cart-line__info { min-width: 0; }
.cart-line__variant { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.cart-line__remove {
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 12.5px; margin-top: 6px; padding: 0;
  text-decoration: underline;
}
.cart-line__remove:hover { color: var(--accent); }
.cart-line__price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.qty {
  align-items: center; border: 1px solid var(--line); border-radius: 999px;
  display: inline-flex; gap: 2px; padding: 2px;
}
.qty__btn {
  background: none; border: 0; border-radius: 50%; color: var(--ink);
  cursor: pointer; font: inherit; font-size: 16px; height: 30px; line-height: 1;
  width: 30px;
}
.qty__btn:hover:not(:disabled) { background: var(--bg-soft); }
.qty__btn:disabled { cursor: not-allowed; opacity: .4; }
.qty__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qty__n { font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; }

.cart-total {
  display: flex; justify-content: space-between; padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.cart-total--good { color: var(--brand-dark); }
.cart-total--grand {
  border-top: 1px solid var(--line); font-size: 18px; font-weight: 800;
  margin-top: 6px; padding-top: 14px;
}
.cart-total__remove {
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: 12px; margin-left: 8px; text-decoration: underline;
}

.cart-coupon {
  background: var(--bg-soft); border-radius: var(--radius);
  margin-top: 18px; padding: 14px;
}
.cart-coupon__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.cart-coupon__row { display: flex; gap: 8px; }
.cart-coupon__input {
  border: 1px solid var(--line); border-radius: 8px; flex: 1 1 auto;
  font: inherit; min-width: 0; padding: 11px 13px;
}
.cart-coupon__input:focus { border-color: var(--brand); outline: none; }
.cart-coupon__row .btn { border-radius: 8px; padding: 11px 20px; }
.cart-coupon__msg { font-size: 12.5px; margin: 8px 0 0; min-height: 1em; }
.cart-coupon__msg.is-err { color: var(--accent); }

.checkout-btn { margin-top: 18px; width: 100%; }
.cart-note { color: var(--ink-soft); font-size: 12.5px; margin-top: 10px; text-align: center; }
.empty { color: var(--ink-soft); padding: 50px 0; text-align: center; }
.empty .btn { margin-top: 16px; }

/* --- PDP detail blocks ---------------------------------------------------
   The live product page carries offers, benefits, key actives, directions and
   a caution note; this replica had none of them, which is most of why it did
   not read like the real thing. Content is joined in from the product corpus,
   so a kit with no workbook entry renders fewer blocks rather than filler. */
.pdp-more { display: grid; gap: 14px; padding-top: 26px; }
.pdp-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdp-block__h {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
}
.pdp-block__b { padding: 16px; }

.offers { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.offer {
  align-items: center; background: #fff7f7; border: 1px dashed #f0c2c2;
  border-radius: 8px; display: flex; gap: 12px; padding: 12px 14px;
}
.offer__amt { color: var(--accent); font-size: 17px; font-weight: 800; white-space: nowrap; }
.offer__txt { font-size: 13px; line-height: 1.35; }

.pdp-list { margin: 0; padding-left: 20px; }
.pdp-list li { margin-bottom: 7px; }
.pdp-list--tick { list-style: none; padding-left: 0; }
.pdp-list--tick li { padding-left: 26px; position: relative; }
.pdp-list--tick li::before {
  color: var(--brand); content: "\2713"; font-weight: 800;
  left: 4px; position: absolute;
}

.actives { display: flex; flex-wrap: wrap; gap: 8px; }
.active-chip {
  background: #f2f8f7; border: 1px solid #d5e7e3; border-radius: 999px;
  color: var(--brand-dark); font-size: 13px; font-weight: 600; padding: 7px 14px;
}

.pdp-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.pdp-steps li {
  counter-increment: s; margin-bottom: 12px; padding-left: 38px; position: relative;
}
.pdp-steps li::before {
  background: var(--brand); border-radius: 50%; color: #fff;
  content: counter(s); font-size: 12px; font-weight: 800; height: 24px;
  left: 0; line-height: 24px; position: absolute; text-align: center;
  top: -1px; width: 24px;
}
.pdp-meta { color: var(--ink-soft); font-size: 13px; margin: 10px 0 0; }
.pdp-caution { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; margin: 0; }

.pdp__qty { align-items: center; display: flex; gap: 12px; margin-bottom: 16px; }
.pdp__qty-label { font-size: 14px; font-weight: 700; }

/* --- responsive ----------------------------------------------------------
   Checked at 1440, 1024, 768 and 375. The rules that matter on a phone are the
   header (a hover mega menu is unusable without a pointer), the product grid
   (two-up beats one-up at 375 -- customers scan, they do not read), and the ask
   strip, whose input and button must not squeeze each other into ellipses. */

@media (max-width: 1080px) {
  .nav__top { padding: 20px 10px; font-size: 14px; }
  .hero { gap: 22px; }
}

@media (max-width: 900px) {
  .header__inner { gap: 12px; height: 58px; }
  .logo img { height: 32px; }

  /* Hover cannot open a menu on a touch screen, so the whole bar becomes a
     disclosure drawer driven by a button. */
  .nav-toggle {
    background: none; border: 0; cursor: pointer; display: block;
    font-size: 22px; line-height: 1; padding: 6px;
  }
  .nav {
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    padding: 6px 0 14px;
  }
  .nav.is-open { display: flex; }
  .nav__top { justify-content: space-between; padding: 14px 20px; width: 100%; }

  /* In the drawer the panel is an accordion: in flow, not floating. */
  .mega {
    border: 0; box-shadow: none; display: none; opacity: 1; padding: 0 10px 10px;
    pointer-events: auto; position: static; transform: none;
  }
  .nav__group.is-open .mega { display: block; }
  .nav__group:hover .mega { display: none; }          /* no hover on touch */
  .nav__group.is-open:hover .mega { display: block; }
  .mega__grid { gap: 0; grid-template-columns: 1fr; padding: 0; }
  .mega__item { padding: 9px 12px; }

  .hero__inner, .pdp { grid-template-columns: 1fr; }
  .hero { padding: 28px 0 32px; }
  .hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero__art { min-height: 0; }
  .hero__art img { max-height: 220px; }
  .hero__sub { font-size: 14px; margin-bottom: 18px; }
  .section { padding: 30px 0; }
}

@media (max-width: 640px) {
  .grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card__body { gap: 6px; padding: 10px; }
  .product-card__title { font-size: 12.5px; }
  .price__now { font-size: 14.5px; }
  .product-card .btn { font-size: 11.5px; letter-spacing: 0; padding: 9px 0; }

  .pdp { gap: 22px; padding: 18px 0 0; }
  .pdp h1 { font-size: 20px; }
  .pdp__buy { flex-direction: column; }
  .offers { grid-template-columns: 1fr; }
  .pdp-block__b { padding: 13px; }
  .variants__list { gap: 8px; }
  .variant { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* The button keeps its own line rather than crushing the input. */
  .ask__form { border-radius: 14px; flex-wrap: wrap; padding: 8px; }
  .ask__input { flex: 1 0 100%; padding: 8px 6px; }
  .ask__btn { width: 100%; }
  .ask__chip { font-size: 12.5px; padding: 7px 12px; }

  /* Image + details on the first row; quantity and price beneath, so the
     title is never squeezed to two characters. */
  .cart-line { grid-template-columns: 56px 1fr; row-gap: 10px; }
  .cart-line img { height: 56px; width: 56px; }
  .cart-line .qty { grid-column: 1 / 2; }
  .cart-line__price { grid-column: 2 / 3; text-align: right; }
  .cart-coupon__row { flex-wrap: wrap; }
  .cart-coupon__row .btn { width: 100%; }

  .demo-note { font-size: 11.5px; padding: 6px 12px; }
  .announce { font-size: 11.5px; }
  .footer__cols { gap: 18px; }
}

/* Respect the setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  .mega, .nav__caret, .product-card { transition: none; }
}