/* ==========================================================================
   Skincare Hub Rwanda — Page & section styles
   Loaded after styles.css. Mobile-first.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── Page header */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 6vw, 76px);
  background: linear-gradient(180deg, var(--cream), var(--white));
  border-bottom: 1px solid var(--line);
}

.page-hero--navy {
  background: radial-gradient(
      120% 140% at 12% 0%,
      rgba(198, 166, 100, 0.16),
      transparent 55%
    ),
    var(--navy);
  border-bottom: 0;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.page-hero--center .page-hero__inner {
  margin-inline: auto;
  text-align: center;
}

.page-hero p {
  margin-bottom: 0;
  max-width: 62ch;
  color: var(--body);
  font-size: 1.05rem;
}

.page-hero--navy p {
  color: rgba(255, 255, 255, 0.78);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.breadcrumbs a {
  color: var(--muted);
}

.breadcrumbs a:hover {
  color: var(--gold-700);
}

.breadcrumbs span[aria-current] {
  color: var(--navy);
}

.page-hero--navy .breadcrumbs,
.page-hero--navy .breadcrumbs a {
  color: rgba(255, 255, 255, 0.62);
}

.page-hero--navy .breadcrumbs span[aria-current] {
  color: var(--gold-400);
}

/* ────────────────────────────────────────────────────────────────── Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 7vw, 96px) clamp(48px, 8vw, 104px);
  background: linear-gradient(175deg, #f8f5f0 0%, var(--white) 62%);
}

.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__deco svg {
  width: 100%;
  height: 100%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(34px, 5vw, 60px);
  align-items: center;
}

.hero h1 {
  margin-bottom: 0.5em;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--gold-700);
}

.hero__lead {
  max-width: 52ch;
  margin-bottom: 1.9rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__trust {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.hero__trust .trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.hero__art {
  position: relative;
  margin-inline: auto;
  width: min(100%, 520px);
}

.hero__art svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 50px rgba(10, 30, 60, 0.14));
}

.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--sh-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.hero__badge svg {
  width: 16px;
  height: 16px;
  color: var(--gold-700);
  filter: none;
}

.hero__badge--top {
  top: 6%;
  left: -4%;
}

.hero__badge--bottom {
  bottom: 4%;
  right: -4%;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Value bar under hero */
.value-bar {
  border-block: 1px solid var(--line);
  background: var(--white);
}

.value-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.value-bar__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 26px);
  background: var(--white);
}

.value-bar__item svg {
  width: 22px;
  height: 22px;
  color: var(--gold-700);
  flex: none;
  margin-top: 2px;
}

.value-bar__item strong {
  display: block;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.value-bar__item span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (min-width: 780px) {
  .value-bar__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ───────────────────────────────────────────────────────── Category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
}

@media (min-width: 700px) {
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-300);
  box-shadow: var(--sh-md);
}

.cat-card__art {
  position: absolute;
  top: -6%;
  right: -8%;
  width: 62%;
  opacity: 0.95;
  transition: transform 0.5s var(--ease);
}

.cat-card:hover .cat-card__art {
  transform: rotate(-3deg) scale(1.05);
}

.cat-card__art svg {
  width: 100%;
  height: auto;
}

.cat-card__label {
  position: relative;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.2;
}

.cat-card__count {
  position: relative;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────── Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 24px);
}

@media (min-width: 760px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (min-width: 1100px) {
  .product-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--gold-300);
  box-shadow: var(--sh-md);
}

.pcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--cream);
}

.pcard__media .visual {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.visual {
  display: block;
  width: 100%;
  height: auto;
}

.visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* -- real product photography, when a product carries photos[] -- */
.visual__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cream);
}

.search-result__thumb .visual,
.line-item__thumb .visual {
  height: 100%;
}

.gallery__thumb .visual__photo,
.gallery__main .visual__photo {
  height: auto;
}

.visual--tile {
  aspect-ratio: 3 / 2;
}

.pcard__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  gap: 5px;
  justify-items: start;
}

.pcard__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  box-shadow: var(--sh-xs);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.pcard__wish:hover {
  transform: scale(1.08);
  color: var(--gold-700);
}

.pcard__wish svg {
  width: 18px;
  height: 18px;
}

.pcard__wish.is-on {
  background: var(--gold);
  color: var(--white);
}

.pcard__wish.is-on svg {
  fill: currentColor;
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  padding: clamp(13px, 1.6vw, 18px);
}

.pcard__brand {
  color: var(--gold-700);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pcard__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.pcard__name a {
  color: var(--navy);
}

.pcard__name a:hover {
  color: var(--gold-700);
}

.pcard__size {
  color: var(--muted);
  font-size: 0.72rem;
}

.pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.pcard__tags span {
  padding: 0.16rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.price__now {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.price__was {
  color: var(--muted);
  font-size: 0.74rem;
  text-decoration: line-through;
}

.price--lg .price__now {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
}

.price--lg .price__was {
  font-size: 0.9rem;
}

.save-pill {
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.68rem;
  font-weight: 700;
}

.pcard__add {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pcard__add svg {
  width: 15px;
  height: 15px;
}

.pcard--out .pcard__media .visual {
  opacity: 0.65;
}

@media (max-width: 420px) {
  .pcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ──────────────────────────────────────────────────────────── Shop page */
.shop-layout {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr means minmax(auto, 1fr), and that
     auto minimum is the content's min-content width, so the product cards and the
     sort select were forcing this column wider than a phone screen. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .shop-layout {
    grid-template-columns: 262px 1fr;
  }
}

.shop-sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  max-height: 86vh;
  overflow-y: auto;
  padding: 0 var(--gutter) 26px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--white);
  box-shadow: var(--sh-lg);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}

.shop-sidebar.is-open {
  transform: none;
}

.shop-sidebar__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.shop-sidebar__head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.shop-sidebar__grab {
  width: 44px;
  height: 4px;
  margin: 10px auto;
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.shop-scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(9, 22, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.shop-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1000px) {
  .shop-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    max-height: none;
    overflow: visible;
    padding: 0 22px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: none;
    transform: none;
  }
  .shop-sidebar__grab {
    display: none;
  }
  .shop-sidebar__head {
    margin-inline: 0;
    padding: 20px 0 14px;
  }
  .shop-scrim {
    display: none;
  }
  .filters-toggle {
    display: none !important;
  }
}

.filter-group {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.filter-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.filter-group > h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.9rem;
  cursor: pointer;
}

.filter-group__head svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform var(--dur) var(--ease);
}

.filter-group[data-collapsed="true"] .filter-group__head svg {
  transform: rotate(-90deg);
}

.filter-group[data-collapsed="true"] .filter-group__body {
  display: none;
}

.filter-list {
  display: grid;
  gap: 4px;
}

.filter-list--scroll {
  max-height: 236px;
  overflow-y: auto;
  padding-right: 4px;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.36rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--body);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.filter-check:hover {
  background: var(--cream);
  color: var(--navy);
}

.filter-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  flex: none;
}

.filter-check span.count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.74rem;
}

.price-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.price-inputs .input {
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

.range {
  width: 100%;
  margin: 0.9rem 0 0.2rem;
  accent-color: var(--gold);
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(16px, 2vw, 24px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.results-count {
  color: var(--muted);
  font-size: 0.85rem;
}

.results-count strong {
  color: var(--navy);
}

.toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sort-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.sort-field .select {
  min-height: 44px;
  width: auto;
  min-width: 172px;
  font-size: 0.85rem;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.active-filters:empty {
  display: none;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--gold-300);
  border-radius: var(--r-pill);
  background: var(--gold-100);
  color: var(--gold-700);
  font-size: 0.76rem;
  font-weight: 500;
}

.filter-tag button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: inherit;
  opacity: 0.7;
}

.filter-tag button:hover {
  opacity: 1;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

.pagination button,
.pagination a {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 500;
}

.pagination [aria-current="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.pagination button:hover:not([aria-current="true"]) {
  border-color: var(--gold);
  color: var(--gold-700);
}

.pagination [disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────── Product detail */
.pdp {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}

@media (min-width: 940px) {
  .pdp {
    grid-template-columns: 1.02fr 0.98fr;
  }
}

.gallery {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: 88px 1fr;
    align-items: start;
  }
}

.gallery__thumbs {
  display: flex;
  gap: 10px;
  order: 2;
}

@media (min-width: 640px) {
  .gallery__thumbs {
    flex-direction: column;
    order: 0;
  }
}

.gallery__thumb {
  overflow: hidden;
  width: 88px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  transition: border-color var(--dur) var(--ease);
}

.gallery__thumb svg {
  width: 100%;
  height: auto;
}

.gallery__thumb[aria-selected="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-100);
}

.gallery__main {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

.gallery__main svg {
  width: 100%;
  height: auto;
}

.gallery__caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.pdp__head {
  display: grid;
  gap: 0.6rem;
}

.pdp__brand {
  color: var(--gold-700);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pdp__title {
  margin: 0;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
}

.pdp__rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.pdp__rating a {
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.2rem;
}

.pdp__brief {
  color: var(--body);
  font-size: 0.98rem;
}

.pdp__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block: 1.2rem;
}

.fact {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-size: 0.8rem;
  color: var(--body);
}

.fact svg {
  width: 17px;
  height: 17px;
  color: var(--gold-700);
  flex: none;
}

.pdp__buy {
  display: grid;
  gap: 12px;
  margin-block: 1.2rem;
}

.buy-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.buy-row .qty {
  min-height: 52px;
  border-radius: var(--r-pill);
}

.buy-row .qty button {
  width: 44px;
  height: 100%;
}

.pdp__meta {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}

.pdp__meta-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--body);
}

.pdp__meta-row svg {
  width: 17px;
  height: 17px;
  color: var(--gold-700);
  flex: none;
  margin-top: 3px;
}

.pdp__meta-row strong {
  color: var(--navy);
}

.swatch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.84rem;
}

.swatch-row .label {
  min-width: 84px;
}

/* Accordion */
.accordion {
  border-top: 1px solid var(--line);
}

.acc {
  border-bottom: 1px solid var(--line);
}

.acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1.05rem 0;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.acc > summary::-webkit-details-marker {
  display: none;
}

.acc > summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  /* rotated 45deg, so its box reaches ~2.2px past each edge: the margin keeps
     that inside the summary, where before it made every accordion report a few
     pixels of overflow on a 280px screen */
  margin-right: 3px;
  border-right: 1.6px solid var(--gold-700);
  border-bottom: 1.6px solid var(--gold-700);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}

.acc[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.acc__body {
  padding-bottom: 1.2rem;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.75;
}

.acc__body > *:last-child {
  margin-bottom: 0;
}

.check-list {
  display: grid;
  gap: 0.55rem;
}

.check-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.6;
}

.check-list svg {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--gold-700);
  flex: none;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pill-list a,
.pill-list span {
  display: inline-flex;
  padding: 0.36rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--body);
  font-size: 0.8rem;
}

.pill-list a:hover {
  border-color: var(--gold);
  color: var(--gold-700);
}

.ingredient-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 620px) {
  .ingredient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ingredient {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
}

.ingredient strong {
  display: block;
  font-size: 0.88rem;
}

.ingredient span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Reviews */
.reviews-summary {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

@media (min-width: 700px) {
  .reviews-summary {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

.score {
  text-align: center;
}

.score__num {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
}

.score__of {
  color: var(--muted);
  font-size: 0.8rem;
}

.bars {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  gap: 10px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--muted);
}

.bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--gold);
}

.review {
  display: grid;
  gap: 0.7rem;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.review__top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  flex: none;
}

.avatar--navy {
  background: var(--navy);
  color: var(--gold-400);
}

.avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
}

.review__who {
  display: grid;
  line-height: 1.3;
}

.review__who strong {
  font-size: 0.9rem;
}

.review__who span {
  color: var(--muted);
  font-size: 0.76rem;
}

.review__body {
  margin: 0;
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.7;
}

.review__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--success);
  font-weight: 500;
}

.verified svg {
  width: 14px;
  height: 14px;
}

/* ──────────────────────────────────────────────── Carousel (testimonials) */
.carousel {
  position: relative;
}

.carousel__viewport {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 min(340px, 84vw);
  scroll-snap-align: start;
}

.carousel__nav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.carousel__btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.carousel__btn svg {
  width: 18px;
  height: 18px;
}

.carousel__dots {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
}

.carousel__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.carousel__dots button[aria-current="true"] {
  width: 24px;
  border-radius: var(--r-pill);
  background: var(--gold);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.review-card__quote {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
}

.review-card__foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ──────────────────────────────────────────────────────────────── Quiz */
.quiz {
  max-width: 780px;
  margin-inline: auto;
}

.quiz__progress {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.quiz__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

.quiz__progress-top strong {
  color: var(--navy);
}

.quiz__card {
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.quiz__stepnum {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.7rem;
  color: var(--gold-700);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quiz__question {
  margin-bottom: 0.4em;
  font-size: clamp(1.35rem, 3.2vw, 1.95rem);
}

.quiz__hint {
  margin-bottom: 1.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.quiz__options {
  display: grid;
  gap: 11px;
}

@media (min-width: 640px) {
  .quiz__options--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}

.quiz__result {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
}

.routine-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line-2);
}

.routine-step:last-child {
  border-bottom: 0;
}

.routine-step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.routine-step h4 {
  margin: 0 0 0.2em;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
}

.routine-step p {
  margin: 0;
  color: var(--body);
  font-size: 0.87rem;
}

.result-panel {
  padding: clamp(22px, 3.4vw, 36px);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--gold-100), var(--white));
}

/* ──────────────────────────────────────────────────────────────── Blog */
.post-grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-300);
  box-shadow: var(--sh-md);
}

.post-card__cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.post-card__cover svg,
.post-card__photo {
  width: 100%;
  height: 100%;
}

/* The photograph lies over the generated art, which stays underneath as the
   fallback: when a file is missing the class below uncovers it instead of
   leaving an empty plate. It carries no z-index, so the category badge that
   follows it in the markup still paints on top. */
.post-card__photo {
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
}

.post-card__cover.is-no-photo .post-card__photo {
  display: none;
}

.post-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: clamp(18px, 2.4vw, 24px);
}

.post-card__body h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
}

.post-card__body h3 a {
  color: var(--navy);
}

.post-card__body h3 a:hover {
  color: var(--gold-700);
}

.post-card__excerpt {
  margin: 0;
  color: var(--body);
  font-size: 0.89rem;
  line-height: 1.65;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.74rem;
}

.post-card--feature .post-card__cover {
  aspect-ratio: 16 / 9;
}

/* Article */
.article-layout {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
  /* the delivery table has min-width: 460px and scrolls inside .table-wrap;
     without a zero minimum that 460 made the whole column 460 wide */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1020px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.prose {
  min-width: 0;
  max-width: 72ch;
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.85;
}

.prose h2 {
  margin-top: clamp(34px, 5vw, 52px);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.prose h3 {
  margin-top: clamp(24px, 3vw, 34px);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 1.15em;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
  list-style: revert;
}

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

.prose li::marker {
  color: var(--gold);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-400);
}

.prose blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.prose img {
  border-radius: var(--r-md);
}

.callout {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 1.7rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--gold-200);
  border-radius: var(--r-md);
  background: var(--gold-100);
}

.callout svg {
  width: 20px;
  height: 20px;
  color: var(--gold-700);
  flex: none;
  margin-top: 3px;
}

.callout p {
  margin: 0;
  color: var(--navy);
  font-size: 0.92rem;
}

.callout--navy {
  background: var(--navy-50);
  border-color: var(--navy-100);
}

.callout--navy svg {
  color: var(--navy-600);
}

.callout--navy p {
  color: var(--body);
}

.article-side {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}

@media (min-width: 1020px) {
  .article-side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

.side-card {
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.side-card h3 {
  margin-bottom: 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.toc {
  display: grid;
  gap: 2px;
}

.toc a {
  padding: 0.4rem 0;
  color: var(--body);
  font-size: 0.87rem;
  border-bottom: 1px solid var(--line);
}

.toc a:last-child {
  border-bottom: 0;
}

.toc a:hover,
.toc a.is-active {
  color: var(--gold-700);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ────────────────────────────────────────────────────────── Consultation */
.consult-layout {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  /* a <select> is as wide as its longest option; without a zero minimum that
     option set the width of the whole page at 320px */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 980px) {
  .consult-layout {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.consult-aside {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.steps-list {
  display: grid;
  gap: 0;
}

.step-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-bottom: 1.4rem;
}

.step-item:last-child {
  padding-bottom: 0;
}

.step-item__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.step-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 4px;
  width: 1px;
  background: var(--gold-200);
}

.step-item h4 {
  margin: 0.35rem 0 0.2em;
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

.step-item p {
  margin: 0;
  color: var(--body);
  font-size: 0.86rem;
}

/* ────────────────────────────────────────────────────────────── Contact */
.contact-layout {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-cards {
  display: grid;
  gap: 12px;
}

.contact-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.contact-card:hover {
  border-color: var(--gold-300);
  box-shadow: var(--sh-sm);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-700);
  flex: none;
}

.contact-card__icon svg {
  width: 20px;
  height: 20px;
}

.contact-card h3 {
  margin: 0 0 0.25em;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-card p,
.contact-card a {
  margin: 0;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

.contact-card a:hover {
  color: var(--gold-700);
}

.map-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 440px);
  border: 0;
  filter: grayscale(0.25) contrast(1.02);
}

.hours-list {
  display: grid;
  gap: 0.55rem;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--body);
}

.hours-list li:last-child {
  border-bottom: 0;
}

.hours-list strong {
  color: var(--navy);
  font-weight: 600;
}

.now-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.78rem;
  font-weight: 600;
}

.now-badge--open {
  color: var(--success);
}

.now-badge--closed {
  color: var(--muted);
}

.now-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ──────────────────────────────────────────────────────── Cart & checkout */
.cart-layout {
  display: grid;
  gap: clamp(24px, 3.4vw, 44px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
  }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
}

/* A long badge label wraps onto a second line instead of pushing the panel, and
   with it the page, wider than a phone screen. */
.panel__head .badge {
  white-space: normal;
}

.panel__head h2,
.panel__head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.panel__body {
  padding: clamp(18px, 2.4vw, 26px);
}

.panel__body--flush {
  padding: 0 clamp(18px, 2.4vw, 26px);
}

.panel__foot {
  padding: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  background: var(--cream);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.summary {
  display: grid;
  gap: 0.7rem;
}

.summary .summary-row {
  font-size: 0.9rem;
}

.summary .summary-row--total {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.promo-row {
  display: flex;
  gap: 8px;
}

.promo-row .input {
  min-height: 46px;
}

.cart-table-head {
  display: none;
}

@media (min-width: 700px) {
  .cart-table-head {
    display: grid;
    grid-template-columns: 88px 1fr 120px 130px;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .cart-table-head span:last-child {
    text-align: right;
  }
}

.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: clamp(22px, 3vw, 34px);
  color: var(--muted);
  font-size: 0.8rem;
}

.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkout-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

.checkout-steps li.is-done::before {
  background: var(--success);
}

.checkout-steps li.is-current {
  color: var(--navy);
  font-weight: 600;
}

.checkout-steps li.is-current::before {
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-200);
}

.fieldset {
  display: grid;
  gap: clamp(16px, 2vw, 20px);
  padding: 0;
  margin: 0;
  border: 0;
}

.fieldset > legend {
  padding: 0 0 0.9rem;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.form-grid {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.order-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--gold);
  border-radius: var(--r-md);
  background: var(--gold-100);
}

.order-ref strong {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.06em;
  color: var(--navy);
}

/* ─────────────────────────────────────────────────────────────── Account */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 0.8rem 1rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.tab:hover {
  color: var(--navy);
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--gold);
  color: var(--navy);
  font-weight: 600;
}

.order-line {
  display: grid;
  gap: 6px;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.order-line:last-child {
  border-bottom: 0;
}

.order-line__top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

.order-line__items {
  color: var(--muted);
  font-size: 0.82rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.status--pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.status--confirmed {
  background: var(--navy-50);
  color: var(--navy-600);
}

.status--delivered {
  background: var(--success-bg);
  color: var(--success);
}

.auth-card {
  max-width: 480px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

/* ──────────────────────────────────────────────────────── CTA bands etc. */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 78px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: radial-gradient(
      110% 130% at 88% 6%,
      rgba(198, 166, 100, 0.22),
      transparent 58%
    ),
    var(--navy);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.cta-band h2,
.cta-band h3 {
  color: var(--white);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 1.6rem;
}

.cta-band__ring {
  position: absolute;
  border: 1px solid rgba(198, 166, 100, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

.cta-band__ring--a {
  width: 320px;
  height: 320px;
  top: -140px;
  left: -90px;
}

.cta-band__ring--b {
  width: 220px;
  height: 220px;
  bottom: -110px;
  right: -60px;
}

.quote-band {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .quote-band {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.quote-band__art {
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--gold-200);
  background: var(--gold-100);
}

.quote-band__art svg {
  width: 100%;
  height: auto;
}

.newsletter {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.newsletter form {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.newsletter .input {
  flex: 1;
  min-width: 200px;
}

/* ────────────────────────────────────────────────────────────── 404 */
.error-page {
  display: grid;
  gap: 1rem;
  place-items: center;
  padding-block: clamp(56px, 12vw, 130px);
  text-align: center;
}

.error-page__code {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.suggest-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  margin-inline: auto;
}

@media (min-width: 620px) {
  .suggest-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ────────────────────────────────────────────────── Small screen tuning */
@media (max-width: 560px) {
  .hero__badge--top {
    left: 0;
    top: 2%;
  }
  .hero__badge--bottom {
    right: 0;
    bottom: 0;
  }
  .hero__trust .trust-strip {
    grid-template-columns: 1fr;
  }
  .pdp__facts {
    grid-template-columns: 1fr;
  }
  .hero__actions .btn,
  .hero__actions a.btn {
    width: 100%;
  }
  .stats {
    padding: 22px 16px;
  }
}

/* ==========================================================================
   Redesign additions
   Home, shop, product, quiz and the mobile chrome. Appended rather than
   woven into the rules above, so the original design system stays readable.
   ========================================================================== */

/* 1 ── Home hero with real product photography ──────────────────────────── */
.hero__brands {
  margin: 0.4rem 0 0.9rem;
  color: var(--navy-600);
  font-size: clamp(0.78rem, 2.3vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.8rem;
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__proof li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.hero__photos {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero__photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

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

.hero__photo-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.7rem 0.6rem;
  background: linear-gradient(to top, rgba(10, 30, 60, 0.74), rgba(10, 30, 60, 0));
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__photo-label em {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.86;
}

@media (min-width: 700px) {
  .hero__photos {
    gap: 14px;
  }
  .hero__photos .hero__photo:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* 2 ── Shop by concern ──────────────────────────────────────────────────── */
.concern-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) {
  .concern-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .concern-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.concern-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--navy);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.concern-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-300);
  box-shadow: var(--sh-md);
  color: var(--navy);
}

.concern-card__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
}

.concern-card__art svg,
.concern-card__photo {
  width: 100%;
  height: 100%;
}

/* The photograph lies over the generated art, which stays underneath as the
   fallback: when a file is missing the class below uncovers it instead of
   leaving an empty plate. */
.concern-card__photo {
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
}

.concern-card__art.is-no-photo .concern-card__photo {
  display: none;
}

.concern-card__label {
  padding: 0.75rem 0.85rem 0;
  font-size: 0.98rem;
  font-weight: 600;
}

.concern-card__note {
  padding: 0.2rem 0.85rem 0;
  color: var(--body);
  font-size: 0.76rem;
  line-height: 1.5;
}

.concern-card__count {
  padding: 0.55rem 0.85rem 0.85rem;
  margin-top: auto;
  color: var(--gold-700);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* 3 ── Shop by brand ────────────────────────────────────────────────────── */
.brand-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.brand-card:hover {
  border-color: var(--gold-300);
  box-shadow: var(--sh-sm);
  color: var(--navy);
}

.brand-card__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy-600);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* A brand with a real logo gets a plate instead of the monogram circle: the
   marks are wide wordmarks as often as they are square icons, so the plate
   gives them the width to stay legible and keeps every card the same height. */
.brand-card__mark--logo {
  width: 100%;
  height: 64px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}

.brand-card__mark--logo .brand-card__logo {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

.brand-card__mark--logo .brand-card__initials {
  display: none;
}

/* the logo did not load: the same plate shows the monogram instead */
.brand-card__mark--logo.is-no-logo .brand-card__logo {
  display: none;
}

.brand-card__mark--logo.is-no-logo .brand-card__initials {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-600);
}

.brand-card__name {
  font-size: 0.95rem;
  font-weight: 600;
}

.brand-card__meta {
  color: var(--gold-700);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.brand-card__note {
  color: var(--body);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* 4 ── Four-up card rows on wide screens ─────────────────────────────── */
@media (min-width: 1020px) {
  .grid--4-lg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 5 ── Not sure what to buy? ────────────────────────────────────────── */
.quiz-cta {
  display: grid;
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--gold-100), var(--white) 62%);
}

@media (min-width: 880px) {
  .quiz-cta {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

.quiz-cta__list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz-cta__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--body);
  font-size: 0.88rem;
  line-height: 1.55;
}

.quiz-cta__list li::before {
  content: "\2713";
  color: var(--gold-700);
  font-weight: 700;
}

/* 6 ── "Customer reviews coming soon" ───────────────────────────────── */
.review-gate {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--cream);
  text-align: left;
}

.review-gate > svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--gold-700);
}

.review-gate p {
  margin: 0 0 0.7rem;
  color: var(--body);
  font-size: 0.88rem;
  line-height: 1.65;
}

.review-gate strong {
  color: var(--navy);
}

/* ==========================================================================
   Home page balance - added after measuring the rendered page instead of
   guessing at it. At 1400px wide the home page was 11,280px tall and most of
   that height was empty: the hero alone carried 1,242px of blank above the
   copy, the customer-reviews row held a 173px block inside a 586px section,
   and the Instagram row was a heading and one button in 460px. These rules
   fill those rows with real content rather than deleting the space, which
   would only make the page read as cramped. Everything here is scoped to the
   home page or to classes only the home page uses, so no other page moves.
   ========================================================================== */

/* Four photographs in the hero, two by two. The .hero__photos rule above spans
   the first photo over two rows - written for a three-photo mosaic - which
   with four photos leaves the bottom-right cell of the grid empty. */
.hero__photos .hero__photo:first-child {
  grid-row: auto;
  aspect-ratio: 3 / 4;
}

/* Nine home sections at 108px of padding for every side is a lot of air
   between bands that already alternate colour. Home page only. */
body[data-page="home"] .section {
  padding-block: clamp(52px, 6vw, 86px);
}

/* --- Skincare tips ------------------------------------------------------- */
.tip-grid {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1020px) {
  .tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tip-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tip-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-200);
  box-shadow: var(--sh-md);
}

.tip-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
}

.tip-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.tip-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.tip-card__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--gold);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.tip-card__link:hover { color: var(--gold-700); }

/* --- Customer reviews and Instagram, side by side ------------------------ */
.social-band {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  align-items: stretch;
}

@media (min-width: 900px) {
  .social-band { grid-template-columns: 1.2fr 0.8fr; }
}

.social-band__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.social-band__col h2 {
  margin: 0.25rem 0 0.9rem;
  font-size: clamp(1.25rem, 2.6vw, 1.72rem);
}

.social-band__col [data-home-reviews] { width: 100%; }

/* the reviews link drops to the bottom so both columns finish level */
.social-band__col .mt-3 { margin-top: auto; }

.social-band .review-gate {
  width: 100%;
  background: var(--white);
}

.social-band__insta {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--gold-100), var(--white) 72%);
}

.social-band__insta p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.social-band__insta .mb-0 { margin-top: auto; }

/* 7 ── Search field at the top of the shop ──────────────────────────── */
.shop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 660px;
  margin-top: 1.3rem;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.shop-search > svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--muted);
}

.shop-search__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
}

.shop-search__input:focus {
  outline: none;
}

.shop-search .btn {
  min-height: 46px;
  padding-inline: 1.15rem;
  border-radius: var(--r-pill);
}

@media (max-width: 520px) {
  .shop-search {
    border-radius: var(--r-lg);
  }
  .shop-search .btn {
    padding-inline: 0.95rem;
  }
}

/* 8 ── Product card: availability, tap targets and quick view ───────── */
.pcard__stock {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pcard__stock--in {
  color: var(--success);
}

.pcard__stock--low {
  color: var(--warning);
}

.pcard__stock--out {
  color: var(--danger);
}

.pcard__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0.75rem;
}

.pcard__actions .pcard__add,
.pcard__actions .pcard__quick {
  width: 100%;
  min-height: 44px;
  padding-inline: 0.5rem;
}

.pcard__quick {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

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

/* 9 ── Footer: six columns of links, contact and newsletter ─────────── */
@media (min-width: 760px) {
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .footer__top {
    grid-template-columns: 1.6fr 0.8fr 0.9fr 0.9fr 0.8fr 1.2fr;
  }
}

/* 10 ── The bar that sits at the bottom of a phone screen ─────────────── */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
}

.bottom-nav__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.bottom-nav__item svg {
  width: 21px;
  height: 21px;
}

.bottom-nav__item[aria-current="page"] {
  color: var(--navy);
}

.bottom-nav__item--wa {
  color: var(--whatsapp-dark);
}

.bottom-nav__item .count {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(14px);
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}

.bottom-nav__item .count[data-empty="true"] {
  display: none;
}

@media (min-width: 700px) {
  .bottom-nav {
    display: none;
  }
}

@media (max-width: 699px) {
  body {
    padding-bottom: 66px;
  }
  /* the bar carries WhatsApp on a phone, so the floating copy would only
     cover the content underneath it */
  .fab--whatsapp {
    display: none;
  }
  .floaters,
  .toasts,
  .notice-bar {
    bottom: 78px;
  }
}

/* 11 ── Quick view ───────────────────────────────────────────────────── */
.quickview {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(12px, 3vw, 30px);
  visibility: hidden;
}

.quickview[hidden] {
  display: none;
}

.quickview.is-open {
  visibility: visible;
}

.quickview__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 22, 42, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.quickview.is-open .quickview__scrim {
  opacity: 1;
}

.quickview__panel {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-lg);
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.quickview.is-open .quickview__panel {
  transform: none;
  opacity: 1;
}

.quickview__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.quickview__grid {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
}

@media (min-width: 720px) {
  .quickview__grid {
    grid-template-columns: 0.85fr 1fr;
    align-items: start;
  }
}

.quickview__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

.quickview__media .visual {
  aspect-ratio: 4 / 5;
}

.quickview__body h2 {
  margin: 0.35rem 0 0.3rem;
  color: var(--navy);
}

/* 12 ── Complete Your Routine (product page) and the quiz result ─────── */
.routine-grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 620px) {
  .routine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .routine-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .routine-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.routine-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  text-align: left;
}

.routine-card__num {
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.routine-card h3 {
  margin: 0.3rem 0 0.2rem;
  font-size: 1.05rem;
}

.routine-card p {
  margin: 0;
  color: var(--body);
  font-size: 0.85rem;
  line-height: 1.6;
}

.routine-card__step {
  color: var(--gold-700);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.routine-card__media {
  display: block;
  overflow: hidden;
  margin: 0.2rem 0 0.5rem;
  border-radius: var(--r-md);
  background: var(--cream);
}

.routine-card__media .visual {
  aspect-ratio: 4 / 5;
}

.routine-card__brand {
  color: var(--gold-700);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.routine-card__name {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.routine-card__meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.routine-card__why {
  margin-top: 0.2rem;
  color: var(--body);
  font-size: 0.78rem;
  line-height: 1.55;
}

.routine-card--here {
  border-color: var(--gold-300);
  background: var(--gold-100);
}

.routine-card .badge {
  align-self: flex-start;
  margin-top: auto;
}

.routine-card .btn {
  margin-top: auto;
  min-height: 44px;
}

.routine-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(16px, 2.6vw, 26px);
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-lg);
  background: var(--white);
}

.routine-total p {
  color: var(--body);
}

.routine-total strong {
  color: var(--navy);
}

/* 13 ── The product page's own additions ────────────────────────────── */
.pdp__whatsapp {
  margin-bottom: 1.2rem;
}

.detail-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.detail-list__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.detail-list__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.detail-list dt {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
  color: var(--navy);
  font-size: 0.85rem;
}

.routine-order {
  display: grid;
  gap: 14px;
  margin-top: 0.8rem;
}

@media (min-width: 560px) {
  .routine-order {
    grid-template-columns: 1fr 1fr;
  }
}

.routine-order .label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gold-700);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.routine-order ol {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--body);
  font-size: 0.85rem;
}

.routine-order li {
  margin-bottom: 0.2rem;
}

/* 14 ── Quiz result: numbered routine rows and recommendation cards ──── */
.routine-steps--numbered {
  display: grid;
  gap: 0.7rem;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
  list-style: none;
}

.routine-steps--numbered li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.routine-steps--numbered li div {
  display: grid;
  gap: 0.1rem;
}

.routine-steps--numbered strong {
  color: var(--navy);
  font-size: 0.88rem;
}

.routine-steps--numbered span:last-child {
  color: var(--muted);
  font-size: 0.76rem;
}

.result-panel__title {
  margin: 0.4rem 0 0.6rem;
}

.rec-grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 660px) {
  .rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rec-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(12px, 1.8vw, 18px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.rec-card__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
}

.rec-card__media .visual {
  aspect-ratio: 4 / 5;
}

.rec-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.rec-card__step {
  color: var(--gold-700);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rec-card__why {
  margin: 0.35rem 0 0.7rem;
  color: var(--body);
  font-size: 0.8rem;
  line-height: 1.6;
}

.rec-card__why strong {
  color: var(--navy);
}

.rec-card .cluster {
  margin-top: auto;
}

.rec-card .btn {
  min-height: 42px;
}

@media (max-width: 460px) {
  .rec-card {
    grid-template-columns: 1fr;
  }
  .rec-card__media .visual {
    aspect-ratio: 16 / 10;
  }
}

/* ──────────────────────────────────── the narrowest screens (folding phones) */
/* Two product cards fit across 280px, which leaves each one about 113px wide.
   The price is the one line in a card that cannot wrap, so at this width the
   card gives back its padding and the numbers their size rather than clipping
   the figure inside a card that clips its overflow. */
@media (max-width: 360px) {
  .pcard__body {
    padding: 10px;
  }

  .price__now {
    font-size: 0.95rem;
  }

  .pcard__actions {
    flex-wrap: wrap;
  }

  /* "Add to cart" plus its icon needs about 127px and the card has 91: the
     button sheds the icon and closes its padding rather than running out of
     the card, which clips its overflow. */
  .pcard__actions .btn {
    padding-inline: 6px;
    font-size: 0.76rem;
    gap: 4px;
  }

  .pcard__actions .btn svg {
    display: none;
  }

  /* Last pixels: a contact card, a grid card and an accordion are each a few
     pixels wider than the box they sit in at 280px, because a flex or grid child
     keeps its content width. Letting those children shrink is what stops the
     content being clipped inside its own card. */
  .contact-card {
    flex-wrap: wrap;
  }

  .contact-card > *,
  .grid > *,
  .pcard__media,
  .acc > summary,
  .acc > summary > * {
    min-width: 0;
  }

  .acc > summary {
    gap: 10px;
  }

  /* A long word ("recommended", "authenticity") sets the minimum width of its
     box: at 280px that minimum is wider than the column, so the text overflows
     the card it is in. `anywhere` lets the browser break the word, which is the
     only thing that changes that minimum. */
  .feature,
  .feature h3,
  .feature p,
  .acc > summary,
  .acc__body,
  .acc__body p {
    overflow-wrap: anywhere;
  }

  /* The quiz's Back/Next pair and the Instagram band's two columns are the last
     two blocks wider than a 280px screen. The buttons wrap onto their own line,
     and the band's columns are allowed to be narrower than their content. */
  .quiz__nav {
    flex-wrap: wrap;
  }

  .quiz__nav .btn {
    padding-inline: 10px;
    font-size: 0.85rem;
  }

  .quiz__card,
  .quiz__card > *,
  .social-band > * {
    min-width: 0;
  }

  .social-band {
    grid-template-columns: 1fr;
  }
}

/* 12 ── Touch screens: 44 × 44 controls, 16px body copy ─────────────────
   The desktop layout is deliberately untouched by this block: it applies only
   at the widths where the site is being read with a thumb, where 44px is the
   smallest target a finger hits reliably (Apple and Google both say so) and
   16px is the smallest body copy that is comfortable at arm's length. 16px is
   also the size below which iOS zooms the page in when a field is focused. */
@media (max-width: 1023px) {
  /* The header's search, cart and account buttons, the wishlist heart on a
     product card, the chat's close button and the phone's bottom bar: 42px and
     36px until now. */
  .icon-btn,
  .pcard__wish,
  .chat__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Buttons and the phone bar keep their look but get the height a thumb
     needs; the wishlist heart is the one that grew in both directions. */
  .btn--sm,
  .chip,
  .bottom-nav__item {
    min-height: 44px;
  }

  .bottom-nav__item {
    min-width: 44px;
  }

  /* The quantity stepper beside a product and the page numbers under the grid:
     32px and 42px until now, both too small for a thumb in a hurry. min-*
     rather than width/height so a page number that needs 55px for "Prev" still
     gets it. */
  .qty button,
  .pagination button,
  .pagination a {
    min-width: 44px;
    min-height: 44px;
  }

  .btn--sm {
    height: auto;
  }

  /* Body copy — paragraphs and list items — is never smaller than 16px. The
     components set their own sizes with class selectors that would win against
     a bare element rule, so this one is marked important; being inside a
     max-width query, it cannot reach the desktop layout. */
  p,
  li {
    font-size: max(16px, 1em) !important;
  }
}

/* On a phone the article's "Recommended products" card leaves about 150px of
   text beside the thumbnail, so the single-line ellipsis rule cut product names
   to their first word or two. In a stacked card list a name should wrap: where
   it already fits nothing changes, and where it does not it takes a second line
   instead of being truncated. The search overlay keeps its one-line rows. */
.side-card .search-result__name {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}