/**
 * Impulse-style design system for high conversion (CRO).
 * Mobile-first; primary/secondary CTAs; page-width, index-section.
 * CSS vars can be overridden via SiteSettings (inline in base template if needed).
 */
:root {
  /* Brand, taken from the logo artwork: the mark's orange gradient and the
     navy the wordmark is set in. */
  --brandOrange: #F15A24;
  --brandOrangeLight: #F7931E;
  --brandGradient: linear-gradient(135deg, #F15A24 0%, #F7931E 100%);
  --brandNavy: #040361;
  --brandNavySoft: #1B1A6E;

  /* Orange on white is only ~3.1:1, so text and small UI use the navy and the
     orange is kept for fills, accents and focus rings. */
  --brandInk: #1A1A2E;
  --brandMuted: #5A5A72;
  --brandLine: #E6E6EF;
  --brandSurface: #F7F7FB;

  --colorBtnPrimary: #040361;
  --colorBtnSecondary: #5A5A72;
  /* Catalog photography is 1414x2000. Boxes match that ratio and every
     garment is fitted rather than cropped — the product is what we sell, so it
     is never allowed to run off the edge of its frame. */
  --productAspect: 1414 / 2000;
  --productMat: #F2F2F5;

  --pageWidth: 1180px;
  --sectionSpacing: 2rem;
  --tapMinHeight: 44px;
}

* {
  box-sizing: border-box;
}

/* Belt-and-braces: nothing on the site should ever force a horizontal
   scrollbar on a phone. This goes on the root rather than body — overflow-x
   on body alone would compute body's overflow-y to auto (per spec, when one
   axis is non-visible the other becomes auto), turning body into a
   scroll container and breaking the sticky header/sticky buy bar. */
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: #333;
}

.page-width {
  max-width: var(--pageWidth);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

/* Header */
.site-header {
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
}
.site-header .page-width {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: inherit;
  text-decoration: none;
}
.site-logo img {
  max-height: 40px;
  width: auto;
}
/* The packaged lockup is a fixed 3.07:1 SVG, so pin the height and let the
   width follow rather than letting the intrinsic 200x65 box win. Keep this
   under the .site-logo img max-height above, which outranks it on specificity. */
.site-logo__img {
  height: 38px;
  width: auto;
  display: block;
}
.site-nav a {
  margin-left: 1rem;
  color: inherit;
  text-decoration: none;
}
.site-nav .nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-count {
  background: var(--colorBtnPrimary);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

/* Buttons – primary/secondary, full-width on mobile */
.btn {
  display: inline-block;
  min-height: var(--tapMinHeight);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.btn--primary {
  background: var(--colorBtnPrimary);
  color: #fff;
}
.btn--secondary {
  background: var(--colorBtnSecondary);
  color: #fff;
}
@media (max-width: 768px) {
  .btn--full {
    width: 100%;
    display: block;
  }
}

/* Hero */
.hero-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f5f5f5;
  color: #333;
}
.hero-banner__bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: #000;
}
.hero-banner__inner {
  position: relative;
  z-index: 1;
  padding: 2rem;
  max-width: 600px;
}
.hero-banner h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}
.hero-banner .btn {
  margin-top: 1rem;
  margin-right: 0.5rem;
}

/* Promo grid – Impulse promo-grid__container */
.promo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.promo-grid__container {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background-color: var(--productMat);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #333;
}
.promo-grid__overlay {
  position: absolute;
  inset: 0;
  background: #000;
}
.promo-grid__inner {
  position: relative;
  z-index: 1;
}
.promo-grid__inner h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

/* Trust badges bar */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.trust-badge {
  font-size: 0.9rem;
  color: #555;
}

/* Sales points (PDP-style) */
.sales-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}
.sales-point {
  text-align: center;
}
.sales-point__title {
  font-weight: 600;
  margin: 0.25rem 0;
}

/* Product grid */
.product-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.product-card {
  text-align: center;
  position: relative;
}
.product-card__image-wrap {
  display: block;
  margin-bottom: 0.5rem;
}
.product-card__image {
  display: block;
  aspect-ratio: var(--productAspect);
  background-color: var(--productMat);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product-card__image--placeholder { background: #eee; }
.product-card__title {
  font-weight: 600;
  margin: 0.25rem 0;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__price {
  margin: 0.25rem 0;
}
.product-card__add { margin-top: 0.5rem; }
.product-card .btn {
  margin-top: 0.5rem;
  min-width: 120px;
}
.product-card__wishlist { margin-top: 0.25rem; }
.product-card__wishlist-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
}

/* CTA block */
.cta-block {
  text-align: center;
  padding: 2rem;
  background: #f8f8f8;
  border-radius: 8px;
}
.cta-block h2 { margin: 0 0 0.5rem; }
.cta-block p { margin: 0 0 1rem; }

/* Collection list (Shop index) */
.collection-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.collection-card {
  display: block;
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eee;
}
.collection-card:hover {
  background: #eee;
}
.collection-card__image {
  display: block;
  height: 120px;
  background: #eee center/cover;
  border-radius: 6px 6px 0 0;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
}
.collection-card__title {
  font-weight: 600;
  display: block;
}
.collection-card__count {
  font-size: 0.9rem;
  color: #666;
}

/* PDP */
.pdp-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #666;
  padding-top: 0.5rem;
}
.pdp-crumb a { color: inherit; }
.pdp {
  display: grid;
  gap: 0.75rem 2rem;
  /* minmax(0, 1fr), not bare 1fr: a bare fr track has an implicit minimum
     equal to the largest min-content width among its items (buy-box rows,
     the pincode/button row, etc.), so a single wide non-wrapping child can
     stretch the whole track past the container's own box — every item in
     that column then renders flush to the raw viewport edge, past the
     page's own right padding, looking like clipped text. minmax(0, 1fr)
     makes the track respect the container's actual available width and
     forces content to wrap/shrink instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "gallery heading" "gallery info";
  align-items: start;
}
.pdp__heading { grid-area: heading; min-width: 0; }
.pdp__heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.pdp__heading-text { min-width: 0; flex: 1 1 auto; }
.pdp__gallery { grid-area: gallery; position: relative; min-width: 0; }
.pdp__info { grid-area: info; min-width: 0; }
@media (max-width: 768px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "gallery" "info";
    gap: 0.6rem;
  }
  /* Reference (dring.in) runs a noticeably smaller, tighter type scale on
     phones than a desktop-first PDP usually does — this matches that scale
     across the whole heading/price cluster, not just the narrowest devices.
     Scoped under .pdp (not bare classes) so these reliably outrank the
     later unconditional base rules regardless of where they sit in this
     file — the same equal-specificity/source-order trap already bit the
     thumbnail visibility rule once. */
  .pdp .pdp__collection { font-size: 0.68rem; margin-bottom: 0.2rem; }
  .pdp .pdp__title { font-size: 1.05rem; line-height: 1.25; margin-bottom: 0.3rem; }
  .pdp .pdp__rating-link { font-size: 0.68rem; gap: 0.1rem; }
  .pdp .pdp__rating-link .pdp-stars { font-size: 0.8rem; }
  .pdp .pdp__current-price { font-size: 1.3rem; }
  .pdp .pdp__compare-price { font-size: 0.82rem; }
  .pdp .pdp__save-chip, .pdp .pdp__discount-badge { font-size: 0.65rem; padding: 0.2rem 0.4rem; }
  .pdp .pdp__tax-note, .pdp .pdp__fit-note, .pdp .pdp__short-desc { font-size: 0.75rem; }
  .pdp .pdp__social-proof { font-size: 0.72rem; }
  .pdp .pdp__price { gap: 0.4rem; margin: 0.35rem 0; }
}

/* Bestseller ribbon + discount badge sit on the image, dring-style. */
.pdp__ribbon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--brandGradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.pdp__discount-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: var(--brandNavy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}

/* Stage becomes a horizontal snap-scroller so mobile gets a native swipe
   gallery instead of only the desktop thumbnail strip. Each slide is a touch
   narrower than the track so the next photo peeks in from the right edge —
   a visual cue that there's more to swipe through, without needing dots. */
.pdp__stage-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: #f3f1ee;
}
.pdp__stage-track::-webkit-scrollbar { display: none; }
.pdp__stage {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
}
@media (max-width: 768px) {
  .pdp__stage { flex-basis: 88%; margin-right: 3%; }
  .pdp__stage-track { padding-right: 9%; }
}
.pdp__stage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--productAspect);
  object-fit: contain;
}
.pdp__stage--placeholder {
  aspect-ratio: 3 / 4;
  background: #eee;
}
.pdp__dots {
  display: none;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.pdp__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brandLine);
  cursor: pointer;
}
.pdp__dot.is-active { background: var(--brandOrange); width: 18px; border-radius: 4px; }
@media (max-width: 768px) {
  .pdp__dots { display: flex; }
  /* Scoped under .pdp__gallery so this outranks the unconditional
     `.pdp__thumbs { display: flex }` rule below regardless of source
     order — two single-class selectors of equal specificity would
     otherwise let whichever is declared last win the cascade, silently
     dropping this override. */
  .pdp__gallery .pdp__thumbs { display: none; }
}
/* Compact phones (SE-class widths and below): one notch smaller again than
   the general mobile scale above, so a longer product name plus the rating
   badge never crowd each other. */
@media (max-width: 400px) {
  .pdp .pdp__heading-row { gap: 0.4rem; }
  .pdp .pdp__title { font-size: 0.95rem; }
  .pdp .pdp__rating-link { font-size: 0.62rem; gap: 0.08rem; }
  .pdp .pdp__rating-link .pdp-stars { font-size: 0.74rem; }
  .pdp .pdp__current-price { font-size: 1.15rem; }
  .pdp .pdp__compare-price { font-size: 0.74rem; }
  .pdp .pdp__price { gap: 0.3rem; }
  .pdp .pdp__save-chip, .pdp .pdp__discount-badge { font-size: 0.6rem; padding: 0.18rem 0.35rem; }
}
.pdp__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.pdp__thumb {
  width: 72px;
  height: 96px;
  padding: 0;
  border: 2px solid transparent;
  background: #f3f1ee;
  cursor: pointer;
  overflow: hidden;
}
.pdp__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pdp__thumb.is-active,
.pdp__thumb:focus-visible {
  border-color: var(--colorBtnPrimary);
}
.pdp__collection {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
}
.pdp__title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; font-weight: 800; }
.pdp__price { margin: 0.5rem 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pdp__current-price { font-size: 1.7rem; font-weight: 800; color: var(--brandInk); }
.pdp__compare-price { color: #666; font-size: 1rem; }
.pdp__save {
  font-size: 0.8rem;
  font-weight: 600;
  background: #111;
  color: #fff;
  padding: 0.15rem 0.45rem;
}
.pdp__save-chip {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--brandNavy);
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
.pdp__tax-note { margin: 0 0 0.35rem; font-size: 0.85rem; color: #555; }
.pdp__social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1b8a3e;
}
.pdp__fit-note { margin: 0 0 0.75rem; font-size: 0.85rem; color: #555; }
.pdp__pincode { margin: 0.75rem 0; }
.pdp__pincode-row { display: flex; gap: 0.5rem; }
.pdp__pincode-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--brandLine);
  border-radius: 999px;
  font: inherit;
}
.pdp__pincode-row input:focus { outline: 2px solid var(--brandOrange); outline-offset: 1px; }
.pdp__pincode-row .btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.pdp__pincode-result { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--brandInk); }
.pdp__pincode-result.is-error { color: #b00020; }
.pdp-legal-meta { padding-left: 1.1rem; }
.pdp-legal-meta li { margin: 0.35rem 0; }
.pdp__form label { display: block; margin-top: 0.5rem; font-weight: 600; }
.pdp__size, .pdp__qty { margin: 1rem 0; }
.pdp__size-head { display: flex; justify-content: space-between; align-items: center; }
.pdp__size-chart { font-size: 0.9rem; }
.pdp__size-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.pdp__size-pill {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid #111;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.pdp__size-pill.is-active {
  background: var(--colorBtnPrimary);
  color: #fff;
}
.pdp__qty input {
  min-height: 44px;
  width: 88px;
  padding: 0.5rem;
  font: inherit;
}
.pdp__actions { margin-top: 0.75rem; }
.pdp__trust {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid #eee;
}
.pdp__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.pdp__share { margin-top: 1.15rem; }
.pdp__share-native {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pdp__share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin-top: 0.65rem;
  font-size: 0.85rem;
}
.pdp__share-links a,
.pdp__share-copy {
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pdp__share-copy.is-copied { color: #1b7a3a; }
.pdp__description { margin-top: 0.75rem; }
.pdp-section h2 { margin: 0 0 0.75rem; }
.pdp-lookbook__sub { margin: 0 0 1.25rem; color: #666; }
.pdp-lookbook__grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .pdp-lookbook__grid { grid-template-columns: repeat(4, 1fr); }
}
.pdp-lookbook__cell {
  min-height: 0;
  overflow: hidden;
}
.pdp-lookbook__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: var(--productAspect);
  background-color: var(--productMat);
}
.pdp-lookbook__cell .background-media-text__inner {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  color: #fff;
  font-size: 0.75rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pdp-accordion {
  border-bottom: 1px solid #eee;
  padding: 0.75rem 0;
}
.pdp-accordion summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.pdp-reviews h2 { margin: 0 0 0.35rem; }
.pdp-reviews__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pdp-reviews__summary {
  margin: 0;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pdp-stars { letter-spacing: 0.08em; color: #111; }
.pdp-reviews__list { display: grid; gap: 1rem; }
.pdp-review {
  margin: 0;
  padding: 1.25rem;
  background: #f6f4f1;
  border-radius: 8px;
}
.pdp-review__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pdp-review__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.pdp-review__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pdp-review__badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #111;
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}
.pdp-review__meta {
  margin: 0.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: #555;
  font-size: 0.9rem;
}
.pdp-review__body { margin: 0.85rem 0 0; }
.pdp-reviews__empty { color: #555; }
.pdp-review-form {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
  max-width: 640px;
}
.pdp-review-form h3 { margin: 0 0 0.35rem; }
.pdp-review-form__hint { margin: 0 0 1.25rem; color: #555; font-size: 0.95rem; }
.pdp-review-form__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .pdp-review-form__grid { grid-template-columns: 1fr 1fr; }
}
.pdp-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.pdp-field label,
.pdp-field legend {
  font-weight: 600;
  font-size: 0.9rem;
}
.pdp-field input:not([type="radio"]),
.pdp-field textarea {
  width: 100%;
  min-height: var(--tapMinHeight);
  padding: 0.7rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.pdp-field textarea { min-height: 132px; resize: vertical; }
.pdp-field input:not([type="radio"]):focus,
.pdp-field textarea:focus {
  outline: 2px solid var(--colorBtnPrimary);
  outline-offset: 1px;
  border-color: var(--colorBtnPrimary);
}
.pdp-stars-field {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.pdp-star-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
}
.pdp-star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pdp-star-input label {
  font-size: 1.75rem;
  line-height: 1;
  color: #d0d0d0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdp-star-input input:checked ~ label,
.pdp-star-input input:checked + label {
  color: #111;
}
.pdp-star-input:hover label { color: #d0d0d0; }
.pdp-star-input:hover label:hover,
.pdp-star-input:hover label:hover ~ label {
  color: #111;
}
.pdp-star-input input:focus-visible + label {
  outline: 2px solid var(--colorBtnPrimary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Cart */
.cart-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cart-table th, .cart-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #eee; }
.cart-remove { color: #c00; font-size: 0.9rem; }
.cart-total { margin-top: 1rem; }
.cart-note { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }

/* Footer */
.site-footer {
  background: var(--brandNavy);
  color: #C9C9DE;
  font-size: 0.9rem;
  margin-top: var(--sectionSpacing);
}
.site-footer a { color: #E4E4F0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Brand block sits beside the link columns and collapses above them on narrow
   screens, so the columns keep their own grid independent of the brand copy. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.1fr);
  gap: 2.5rem;
  padding-top: 2.75rem;
  padding-bottom: 2rem;
}
.footer-brand__logo { display: inline-block; }
.footer-brand__logo img { height: 40px; width: auto; display: block; }
.footer-about {
  margin: 1rem 0 0;
  max-width: 34ch;
  line-height: 1.6;
  color: #A8A8C4;
}
.footer-contact {
  margin: 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #E4E4F0;
}
.footer-social a:hover {
  background: var(--brandGradient);
  border-color: transparent;
  color: #fff;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.75rem;
}
.footer-col h4 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}
.footer-col a { display: block; margin: 0.4rem 0; }

.footer-compliance {
  font-size: 0.8rem;
  color: #9494B2;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.65;
}
.footer-compliance strong { color: #E4E4F0; font-weight: 600; }
.footer-compliance p { margin: 0.25rem 0; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9494B2;
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }
.footer-credit a { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-credit a:hover { opacity: 0.85; text-decoration: none; }
/* The credit mark is a dark-on-transparent PNG, so it needs lifting on navy. */
.footer-credit-logo {
  height: 22px;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.footer-credit a:hover .footer-credit-logo { opacity: 1; }

/* Blog */
.blog-list { list-style: none; padding: 0; }
.blog-list__item { margin: 1rem 0; }
.blog-list__item a { color: inherit; text-decoration: none; }
.blog-list__date { display: block; font-size: 0.9rem; color: #666; }
.size-chart__content { margin-top: 1rem; }

/* Announcement + flash (CRO) */
.announce-bar {
  background: #111;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.announce-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  padding: 0.55rem 1rem;
}
.announce-bar__group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
}
.announce-bar__sep { opacity: 0.5; }
.flash-messages { padding-top: 0.75rem; }
.flash { margin: 0.35rem 0; padding: 0.65rem 0.85rem; background: #f3f1ee; }
.flash--success { background: #e8f5e9; }
.flash--error { background: #fdecea; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.site-header { padding: 0.75rem 0; }

/* Homepage CRO */
.home-main { padding: 0; }
.home-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #1a1210;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
}

/* Hero carousel. Slides are stacked and cross-faded rather than translated, so
   the hero keeps its height whatever the image aspect ratios are. */
.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-carousel__track { position: absolute; inset: 0; }
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-carousel__slide.is-active { opacity: 1; }
.hero-carousel__slide a { display: block; height: 100%; }
/* The hero is an art-directed lifestyle banner, not a product shot. Fitting it
   with contain left 58% of the mobile hero as empty black bars around a 16:9
   image in a portrait box. The never-crop rule exists so a garment being sold
   is never cut off — it belongs on product surfaces, not here. */
.hero-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.hero-carousel__nav:hover { background: var(--brandOrange); border-color: transparent; }
.hero-carousel__nav:focus-visible { outline: 3px solid var(--brandOrangeLight); outline-offset: 2px; }
.hero-carousel__nav--prev { left: 0.75rem; }
.hero-carousel__nav--next { right: 0.75rem; }
.hero-carousel__dots {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}
.hero-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.hero-carousel__dot.is-active { background: var(--brandOrange); width: 26px; }
.hero-carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide { transition: none; }
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--pageWidth);
  margin: 0 auto;
  padding: 3rem 1rem 2.5rem;
}
.home-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.home-hero__sub {
  margin: 0 0 1.25rem;
  max-width: 34rem;
  font-size: 1.05rem;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 420px;
}
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.home-hero__micro {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}
.home-trust {
  background: #111;
  color: #fff;
  padding: 1rem 0;
}
.home-trust__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .home-trust__row { grid-template-columns: repeat(4, 1fr); }
}
.home-trust__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.home-section-head { margin-bottom: 1.25rem; }
.home-section-head h2 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.home-section-head p { margin: 0; color: #555; }
.home-drop__grid {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .home-drop__grid { grid-template-columns: repeat(6, 1fr); }
  .home-drop__cell:nth-child(1) { grid-column: span 3; min-height: 420px; }
  .home-drop__cell:nth-child(2) { grid-column: span 3; min-height: 420px; }
  .home-drop__cell:nth-child(n+3) { grid-column: span 2; }
}
/* Drop cell: photo on top, copy underneath. Previously the copy sat over the
   garment and needed a 35% black scrim to stay readable, which dulled the very
   colour a customer is trying to judge. No scrim, no overlap, true colour. */
.home-drop__cell {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--brandLine);
  background-color: #fff;
  color: var(--brandInk);
  text-decoration: none;
  overflow: hidden;
}
.home-drop__cell img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: var(--productAspect);
  object-fit: contain;
  background-color: var(--productMat);
}
/* The scrim stays for the CMS promo block, which is a banner with text over a
   background image by design; it has no place over a product photo. */
.home-drop__cell .promo-grid__overlay { display: none; }
.home-drop__cell .home-drop__copy {
  position: static;
  align-self: stretch;
  padding: 0.85rem 1rem 1.1rem;
}
.home-drop__cell .home-drop__copy h3,
.home-drop__cell .home-drop__copy p { color: var(--brandInk); }
.home-drop__cell .home-sale-chip { background: var(--brandOrange); color: #fff; }
.home-drop__copy {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
  align-self: flex-end;
}
.home-drop__copy h3 {
  margin: 0.35rem 0;
  font-size: 1.05rem;
  color: #fff;
}
.home-drop__copy p { margin: 0 0 0.75rem; color: #fff; }
.home-drop__copy s { opacity: 0.7; margin-right: 0.35rem; }
.home-sale-chip {
  display: inline-block;
  background: #fff;
  color: #111;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
}
.home-lookbook__grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .home-lookbook__grid { grid-template-columns: repeat(3, 1fr); }
}
.home-lookbook__cell {
  min-height: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
}
.home-lookbook__cell img {
  display: block;
  width: 100%;
  aspect-ratio: var(--productAspect);
  object-fit: contain;
  background-color: var(--productMat);
}
.home-lookbook__cell .background-media-text__inner {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  font-size: 0.8rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.home-reviews__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .home-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}
.home-review {
  margin: 0;
  padding: 1.25rem;
  background: #f6f4f1;
}
.home-review__stars { letter-spacing: 0.08em; margin: 0 0 0.5rem; }
.home-review footer { margin-top: 0.75rem; font-size: 0.85rem; color: #555; }
.home-faq__list { display: grid; gap: 0.75rem; max-width: 46rem; }
.home-faq__item {
  border: 1px solid #e6e2dc;
  background: #fff;
  padding: 0.15rem 1rem 0.15rem;
}
.home-faq__item summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  list-style: none;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item p { margin: 0 0 1rem; color: #444; max-width: 62ch; }
.home-capture {
  background: #111;
  color: #fff;
  padding: 2.5rem 0;
}
.home-capture__inner {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .home-capture__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
.home-capture h2 { margin: 0 0 0.4rem; }
.home-capture p { margin: 0; opacity: 0.9; }
.home-capture__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.home-capture__form input {
  flex: 1 1 180px;
  min-height: 44px;
  padding: 0.75rem;
  border: none;
  font: inherit;
}
.home-final-cta { background: #f3f1ee; border-radius: 0; }
.home-final-cta .btn { max-width: 360px; }

.product-card__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  background: #111;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
}
.product-card__ribbon {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  background: var(--brandGradient);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.product-card__image-wrap { position: relative; }
.product-card__tax { margin: 0; font-size: 0.75rem; color: #666; }

.cart-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #111;
  padding: 0.85rem 1rem;
  max-width: calc(100% - 2rem);
  box-shadow: 6px 6px 0 #111;
}
.cart-toast[hidden] { display: none; }
.cart-toast p { margin: 0 0.5rem 0 0; font-weight: 600; }
.cart-toast__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.page-hero--compact {
  background: #111;
  color: #fff;
  padding: 2rem 0 1.75rem;
}
.page-hero--compact h1 { margin: 0 0 0.4rem; }
.page-hero--compact p { margin: 0; color: #ddd; max-width: 40rem; }
.page-hero--compact .home-eyebrow { color: #bbb; }
.page-hero--compact a { color: inherit; }
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.search-form input[type="search"] {
  flex: 1 1 220px;
  min-height: var(--tapMinHeight);
  padding: 0.7rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}
.search-meta { color: #555; }
.search-pages { padding-left: 1.2rem; }
.account-card {
  max-width: 480px;
  padding: 1.5rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
}
.account-card input,
.account-card select,
.account-card textarea {
  width: 100%;
  min-height: var(--tapMinHeight);
  padding: 0.7rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}
.account-card__links { margin: 0.85rem 0 0; }
.field-help { margin: 0; font-size: 0.8rem; color: #666; }
.form-errors { color: #b00020; margin-bottom: 0.75rem; }
.errorlist { color: #b00020; margin: 0.25rem 0 0; padding-left: 1.1rem; }
.blog-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
.blog-card {
  margin: 0;
  background: #f6f4f1;
  border-radius: 8px;
  overflow: hidden;
}
.blog-card a { color: inherit; text-decoration: none; display: block; padding: 0 0 1.1rem; }
.blog-card img { display: block; width: 100%; height: auto; }
.blog-card time { display: block; padding: 1rem 1rem 0; font-size: 0.8rem; color: #666; }
.blog-card h2 { margin: 0.35rem 1rem 0.4rem; font-size: 1.15rem; }
.blog-card__intro { padding: 0 1rem; color: #555; }
.blog-card__cta { display: inline-block; margin: 0.5rem 1rem 0; font-weight: 600; }
.blog-article { max-width: 760px; }
.blog-article__image { width: 100%; height: auto; margin: 1rem 0; }
.blog-article__cta { margin-top: 2rem; }
.blog-article img { max-width: 100%; height: auto; margin: 1.25rem 0; }
.blog-article blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: #f6f4f1;
  border-left: 3px solid var(--colorBtnPrimary, #111);
}
.blog-article blockquote p { margin: 0 0 0.5rem; }
.blog-article blockquote ul { margin: 0; padding-left: 1.15rem; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.blog-article th, .blog-article td { text-align: left; padding: 0.55rem 0.4rem; border-bottom: 1px solid #e6e2dc; vertical-align: top; }
.blog-article th { font-weight: 600; }

.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
.blog-breadcrumb a { color: inherit; }

.blog-article__products, .blog-article__related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--brandLine, #e6e6ef); }
.blog-article__products h2, .blog-article__related h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.blog-article__cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.blog-article__related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.blog-article__related-list a {
  display: block; padding: 0.75rem 1rem; background: var(--brandSurface, #f7f7fb);
  border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600;
}
.blog-article__related-list a:hover { background: var(--brandLine, #e6e6ef); }
.service-layout {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .service-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.service-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.service-points li {
  padding: 1rem 1.1rem;
  background: #f6f4f1;
  border-radius: 8px;
}
.service-points strong { display: block; }
.inquiry-form { max-width: none; }
.inquiry-form h2 { margin: 0 0 1rem; }

/* Mobile chrome — Bewakoof-style compact landing, desktop unchanged */
.announce-bar__clone { display: none; }
.announce-bar__track { overflow: hidden; }
.home-chips {
  background: #fff;
  padding: 0.85rem 0 0.35rem;
}
.home-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem;
  max-width: var(--pageWidth);
  margin: 0 auto;
}
.home-chips a {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border: 1px solid #e6e2dc;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.home-chips a:hover { background: #f6f4f1; }
.home-iconnav,
.home-banners,
.home-seg,
.home-cats,
.home-coupon,
.home-rail { display: none; }
.home-section-head__link {
  font-size: 0.8rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.product-card__off {
  color: #1b7a3a;
  font-size: 0.75rem;
  font-weight: 700;
}
.product-card__price strong { font-weight: 700; }
.product-card__price s { color: #888; margin: 0 0.25rem; }

@media (max-width: 768px) {
  html, body {
    overflow-x: clip;
    max-width: 100%;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .page-width {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .index-section {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
  }
  .announce-bar {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }
  .announce-bar__inner {
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    justify-content: flex-start;
    padding: 0.45rem 0;
    gap: 1.25rem;
    animation: announce-marquee 22s linear infinite;
  }
  .announce-bar__group {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .announce-bar__clone { display: inline-flex; }
  @keyframes announce-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .announce-bar__inner { animation: none; }
    .announce-bar__clone { display: none; }
  }
  .site-header { padding: 0.35rem 0; }
  .site-header .page-width.site-header__inner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    justify-content: stretch;
    align-items: center;
    gap: 0.2rem;
  }
  .site-logo {
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-logo img { max-height: 28px; }
  .site-logo__img { height: 26px; }
  .site-nav a { margin-left: 0; }
  .site-header { min-height: 54px; }

  /* The text-only hero stays hidden on mobile (it pushed products below the
     fold), but an editor-configured image carousel is worth the space. */
  .home-hero { display: none; }
  .home-hero--carousel {
    display: flex;
    min-height: 62vh;
  }
  .home-hero--carousel .home-hero__inner { padding: 2rem 1rem 2rem; }
  .home-hero--carousel h1 { font-size: 1.85rem; }
  /* Arrows sat on top of the hero copy at this width; swipe and the dots
     already cover navigation on touch. */
  .hero-carousel__nav { display: none; }
  .home-chips { display: none; }

  .home-iconnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.35rem;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-iconnav::-webkit-scrollbar { display: none; }
  .home-iconnav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    border: 1px solid #e6e2dc;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .home-iconnav a:hover { background: #f6f4f1; }

  .home-banners { display: block; padding: 0.65rem 0 0.25rem; }
  .home-banners__track {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-banners__track::-webkit-scrollbar { display: none; }
  .home-banners__slide {
    flex: 0 0 86%;
    scroll-snap-align: start;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--brandLine);
    background: #fff;
    color: var(--brandInk);
    text-decoration: none;
  }
  .home-banners__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--productAspect);
    object-fit: contain;
    background-color: var(--productMat);
  }
  /* Copy sits under the photo rather than over it: the garment is the product,
     so nothing is allowed to sit on top of it or crop it. */
  .home-banners__copy {
    position: static;
    padding: 0.7rem 0.85rem 0.85rem;
    background: #fff;
  }
  .home-banners__copy h2 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-banners__copy p { margin: 0; font-size: 0.85rem; }
  .home-banners__copy s { opacity: 0.7; margin-right: 0.3rem; }

  .home-seg {
    display: flex;
    gap: 1.25rem;
    padding: 0.65rem 0.9rem 0.35rem;
    border-bottom: 1px solid #eee;
  }
  .home-seg a {
    color: #888;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid transparent;
  }
  .home-seg a:first-child {
    color: #111;
    border-bottom-color: #111;
  }

  .home-cats {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.85rem 0.75rem 0.45rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-cats::-webkit-scrollbar { display: none; }
  .home-cats a {
    flex: 0 0 auto;
    width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
  }
  .home-cats__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f3f1ee;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-coupon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.35rem 0.75rem 0.5rem;
    padding: 0.7rem 0.85rem;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
  }
  .home-coupon strong {
    flex: 0 0 auto;
    background: #fff;
    color: #111;
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }
  .home-coupon span { font-size: 0.75rem; line-height: 1.3; }

  .home-trust { padding: 0.7rem 0; }
  .home-trust__row {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-trust__row::-webkit-scrollbar { display: none; }
  .home-trust__item {
    flex: 0 0 auto;
    background: #1c1c1c;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .home-trust__item svg { width: 16px; height: 16px; flex: 0 0 auto; }

  .home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .home-section-head h2 { font-size: 1.15rem; }
  .home-section-head p { display: none; }

  .home-drop .page-width,
  .home-grid-section .page-width,
  .home-lookbook .page-width,
  .home-reviews .page-width {
    padding-left: 0;
    padding-right: 0;
  }
  .home-drop .home-section-head,
  .home-grid-section .home-section-head,
  .home-lookbook .home-section-head,
  .home-reviews .home-section-head {
    padding: 0 0.75rem;
  }
  .home-drop__grid { display: none; }
  .home-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.55rem;
    padding: 0 0.75rem 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-rail::-webkit-scrollbar { display: none; }
  .home-rail .product-card {
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }
  .home-grid-section .product-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.55rem;
    padding: 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-grid-section .product-grid::-webkit-scrollbar { display: none; }
  .home-grid-section .product-card {
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }
  .home-reviews__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.65rem;
    padding: 0 0.75rem 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-reviews__grid::-webkit-scrollbar { display: none; }
  .home-lookbook__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding: 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-lookbook__grid::-webkit-scrollbar { display: none; }
  .home-lookbook__cell {
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }
  .home-lookbook__cell img {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .home-review {
    flex: 0 0 78vw;
    scroll-snap-align: start;
    padding: 1rem;
  }

  .product-grid { gap: 0.55rem; }
  .product-card { text-align: left; }
  .product-card__title {
    font-size: 0.72rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.9em;
    font-weight: 500;
  }
  .product-card__price { font-size: 0.78rem; font-weight: 700; }
  .product-card__tax { display: none; }
  .product-card .btn {
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.35rem;
    font-size: 0.72rem;
    margin-top: 0.3rem;
    min-height: 44px;
  }

  .home-sales .sales-points {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .sales-point { text-align: left; }
  .sales-point__title { font-size: 0.9rem; }
  .home-capture { padding: 1.5rem 0; }
  .home-capture__form { flex-wrap: nowrap; }
  .home-capture__form input { flex: 1 1 auto; min-width: 0; }
  .home-final-cta { padding: 1.5rem 0.75rem; }
  .home-final-cta .btn { max-width: none; }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: 2rem;
    padding-bottom: 1.25rem;
  }
  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 0.85rem;
  }
  .footer-about { max-width: none; }
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .cart-toast {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .shop-main { padding: 0; }
  .shop-listing__head {
    padding-top: 0.85rem;
    padding-bottom: 0.25rem;
  }
  .shop-listing__head h1 {
    font-size: 1.35rem;
    margin: 0 0 0.2rem;
  }
  .shop-listing__head p,
  .shop-listing__intro {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
  }
  .shop-filters {
    position: sticky;
    top: 54px;
    z-index: 45;
    background: #fff;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem 0.65rem;
    border-bottom: 1px solid #f0eeea;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shop-filters::-webkit-scrollbar { display: none; }
  .shop-listing__body { padding-top: 0.75rem; padding-bottom: 1.25rem; }
  .shop-listing__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 0.55rem;
  }
}

.shop-main { padding-top: 0; }
.shop-listing__head h1 { margin: 0 0 0.25rem; }
.shop-listing__head p { margin: 0; color: #666; }
.shop-filters a {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border: 1px solid #e6e2dc;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.shop-filters a.is-active {
  background: var(--colorBtnPrimary);
  color: #fff;
  border-color: var(--colorBtnPrimary);
}
@media (min-width: 769px) {
  .shop-listing__head { padding-top: 1.5rem; }
  .shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
    max-width: var(--pageWidth);
    margin: 0 auto;
  }
  .shop-listing__body { padding-top: 1rem; padding-bottom: 2rem; }
  .shop-listing__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   CRO pass — buy-box hierarchy, cart, checkout, browse-stage proof
   ===================================================================== */

/* Tertiary button: for secondary actions that must not compete with the
   primary CTA (wishlist, share). Previously these were solid grey, reading
   as a second primary next to Add to Cart. */
.btn--tertiary {
  background: none;
  border: 1px solid #d8d3cb;
  color: inherit;
  font-weight: 600;
  padding: 0.6rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tapMinHeight);
}
.btn--tertiary:hover { background: #f6f4f1; }

/* ---- Service pages: WhatsApp bulk/B2B CTA ---- */
.btn--whatsapp {
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--tapMinHeight);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}
.btn--whatsapp:hover { background: #1ebe5a; }
.service-whatsapp-cta { margin: 1.25rem 0 0.5rem; }
.service-whatsapp-note { margin: 0 0 1.5rem; font-size: 0.85rem; color: var(--brandMuted); text-align: center; }

/* ---- PDP: rating, size, buy row ---- */
.pdp__rating-link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: inherit;
  text-decoration: none;
  text-align: right;
  white-space: nowrap;
}
.pdp__rating-link .pdp-stars { color: var(--brandOrangeLight); font-size: 0.95rem; }
.pdp__rating-link:hover span:last-child { text-decoration: underline; }

/* Real radios, visually hidden, so the group stays keyboard- and
   screen-reader-navigable while looking like pills. */
.pdp__size-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1px solid #111;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  user-select: none;
}
.pdp__size-pill input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.pdp__size-pill:has(input:focus-visible) { outline: 2px solid #111; outline-offset: 2px; }
.pdp__size-pills.has-error .pdp__size-pill { border-color: #b00020; }
.pdp__size-error {
  margin: 0.5rem 0 0;
  color: #b00020;
  font-size: 0.875rem;
  font-weight: 600;
}
.pdp__size-error[hidden] { display: none; }

.pdp__buy-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pdp__qty { margin: 0; flex: 0 0 auto; }
.pdp__qty label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.85rem; }
.pdp__stepper { display: inline-flex; align-items: stretch; border: 1px solid #d8d3cb; }
.pdp__stepper-btn {
  width: 40px;
  min-height: 48px;
  border: none;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.pdp__stepper-btn:hover { background: #f6f4f1; }
.pdp__stepper input {
  width: 48px;
  min-height: 48px;
  border: none;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  text-align: center;
  font: inherit;
  font-weight: 600;
  -moz-appearance: textfield;
}
.pdp__stepper input::-webkit-outer-spin-button,
.pdp__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__atc { flex: 1 1 auto; min-height: 52px; font-size: 1.05rem; }
.pdp__atc-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: #555; }
.pdp__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pdp__secondary form { margin: 0; }
.pdp__share { margin-top: 0.85rem; }
.pdp__share[hidden] { display: none; }
/* ---- Product cards: left-aligned, rating, non-competing CTA ---- */
.product-card { text-align: left; display: flex; flex-direction: column; }
.product-card__title { font-weight: 600; }
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
}
.product-card__rating .pdp-stars { font-size: 0.8rem; }
.product-card__rating-count { color: #777; }
.product-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
.product-card__price .product-card__tax { font-size: 0.72rem; color: #777; margin: 0; }
.product-card__add { margin-top: auto; padding-top: 0.6rem; }
.shop-listing__count { margin: 0 0 1rem; color: #666; font-size: 0.875rem; }
.shop-filters__aside { margin-left: auto; }

/* ---- Free shipping meter ---- */
.ship-meter { margin: 0 0 1.5rem; }
.ship-meter__text { margin: 0 0 0.45rem; font-size: 0.9rem; }
.ship-meter__track { height: 6px; background: #eae6df; border-radius: 999px; overflow: hidden; }
.ship-meter__fill { display: block; height: 100%; background: var(--colorBtnPrimary); }
.ship-meter--won .ship-meter__text { color: #1b7a3a; font-weight: 600; }

/* ---- Cart ---- */
.cart-title { margin: 0 0 1.25rem; }
.cart-title__count { font-size: 1rem; font-weight: 400; color: #666; }
.cart-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 340px; } }
.cart-lines { display: grid; gap: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid #eee;
}
.cart-line__thumb { display: block; background: #f3f1ee; }
.cart-line__thumb img { display: block; width: 100%; height: auto; object-fit: contain; background-color: var(--productMat); }
.cart-line__name { font-weight: 600; color: inherit; text-decoration: none; }
.cart-line__name:hover { text-decoration: underline; }
.cart-line__meta { margin: 0.25rem 0 0.65rem; font-size: 0.85rem; color: #666; }
.cart-line__qty { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.cart-line__qty input {
  width: 64px;
  min-height: 40px;
  padding: 0.35rem;
  text-align: center;
  border: 1px solid #d8d3cb;
  font: inherit;
}
.cart-line__update {
  min-height: 40px;
  padding: 0 0.75rem;
  border: 1px solid #d8d3cb;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.cart-line__update:hover { background: #f6f4f1; }
.cart-line__right { text-align: right; }
.cart-line__total { margin: 0 0 0.5rem; font-weight: 700; }
/* De-emphasised: removing an item should never be the loudest thing on the page. */
.cart-remove { color: #777; font-size: 0.8rem; }
.cart-continue { display: inline-block; margin-top: 1.25rem; font-weight: 600; color: inherit; }
.cart-summary { border: 1px solid #e6e2dc; padding: 1.25rem; position: sticky; top: 1rem; }
.cart-summary h2 { margin: 0 0 0.85rem; font-size: 1.05rem; }
.cart-summary__rows { margin: 0; }
.cart-summary__rows div { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9rem; }
.cart-summary__rows dt, .cart-summary__rows dd { margin: 0; }
.cart-summary__free { color: #1b7a3a; font-weight: 600; }
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.75rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
  font-size: 1.1rem;
}
.cart-checkout { min-height: 52px; font-size: 1.05rem; }
.cart-summary__trust { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.82rem; color: #555; }
.cart-summary__trust li { padding: 0.22rem 0 0.22rem 1.1rem; position: relative; }
.cart-summary__trust li::before { content: "✓"; position: absolute; left: 0; color: #1b7a3a; }
.cart-summary__code { margin: 0.85rem 0 0; font-size: 0.82rem; color: #555; }
.cart-recommend h2 { font-size: 1.15rem; }
.cart-empty { max-width: 34rem; padding: 2rem 0; }
.cart-empty p { color: #555; margin: 0 0 1.25rem; }
.cart-empty .btn { margin-right: 0.5rem; }
@media (max-width: 600px) {
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line__right { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 1rem; }
  .cart-line__total { margin: 0; }
}

/* ---- Checkout: reduced-distraction shell ---- */
.checkout-header { border-bottom: 1px solid #eee; padding: 1rem 0; }
.checkout-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkout-header__secure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1b7a3a;
}
.checkout-page .checkout-hint { margin: 0 0 0.75rem; font-size: 0.82rem; color: #666; }
.checkout-optional { font-weight: 400; color: #888; font-size: 0.85em; }
.checkout-row--split { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .checkout-row--split { grid-template-columns: 1fr 1fr; } }
.checkout-form label { display: block; margin-top: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.checkout-input:focus { outline: 2px solid #111; outline-offset: 1px; }
.checkout-back { margin-top: 1.5rem; }
.checkout-back a { color: #555; font-size: 0.9rem; }
.checkout-items li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.65rem;
  align-items: center;
}
.checkout-item__thumb { background: #f3f1ee; display: block; }
.checkout-item__thumb img { display: block; width: 100%; height: auto; object-fit: contain; background-color: var(--productMat); }
.checkout-item__body { display: flex; flex-direction: column; min-width: 0; }
.checkout-item__name { font-weight: 600; font-size: 0.88rem; }
.checkout-item__meta { font-size: 0.78rem; color: #666; }
.checkout-item__price { font-weight: 600; font-size: 0.88rem; }
.checkout-discount__row { display: flex; gap: 0.5rem; align-items: stretch; }
.checkout-discount__row .checkout-input { margin-bottom: 0; }
.checkout-discount__row .btn { flex: 0 0 auto; padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.checkout-rows { margin: 1rem 0 0; }
.checkout-rows div { display: flex; justify-content: space-between; padding: 0.28rem 0; font-size: 0.9rem; }
.checkout-rows dt, .checkout-rows dd { margin: 0; }
.checkout-rows__save dd { color: #1b7a3a; font-weight: 600; }
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.6rem 0 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid #eee;
  font-size: 1.05rem;
}
.checkout-nudge { margin: 0 0 0.75rem; font-size: 0.82rem; color: #8a6d1f; }
.checkout-place { min-height: 54px; font-size: 1.05rem; }
.checkout-staff-note {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: #fff8e1;
  border-left: 3px solid #e0a800;
  font-size: 0.78rem;
  color: #6b5200;
}
.checkout-trust { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid #eee; }
.checkout-trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.45rem 0;
  font-size: 0.8rem;
  color: #555;
}
.checkout-trust svg { flex: 0 0 auto; margin-top: 0.1rem; }
.checkout-methods {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  color: #777;
  letter-spacing: 0.02em;
}

/* Checkout layout — previously inline in the template, now part of the system
   so the reduced-distraction shell and the form share one source of truth. */
.checkout-gst-banner { font-size: 0.9rem; color: #444; margin-bottom: 1.5rem; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1fr 360px; } }
.checkout-section { margin-bottom: 2rem; }
.checkout-section h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.checkout-input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.75rem;
  min-height: 48px;
  border: 1px solid #d8d3cb;
  background: #fff;
  font: inherit;
}
.checkout-new-addr { margin: 0.5rem 0 1rem; color: #666; font-size: 0.9rem; }
.checkout-order-summary { border: 1px solid #e6e2dc; padding: 1.25rem; position: sticky; top: 1rem; }
.checkout-order-summary h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.checkout-items { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.75rem; }
.required { color: #c00; }

/* The header inline styles order the logo to the right on desktop; checkout
   keeps the wordmark on the left where shoppers expect the brand anchor. */
.checkout-header .site-logo { order: 0; }
.checkout-header__secure { order: 1; }

/* Card CTA: consistent full-width outline on every card so eight identical
   solid blocks stop competing with the product photography. */
.product-card__add form { margin: 0; }
.product-card__add-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 0.9rem;
}

/* ============ Conversion: buy box reachability and assurances ============ */

/* Delivery, COD and fabric spec sit directly under the CTA where the decision
   is actually made, rather than in a generic trust strip further down. */
.pdp__assurances {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.85rem 0.5rem;
  border-top: 1px solid var(--brandLine);
  border-bottom: 1px solid var(--brandLine);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.pdp__assurance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--brandInk);
}
.pdp__assurance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brandOrangeLight);
  color: var(--brandNavy);
  flex: 0 0 auto;
}
.pdp__assurance--cod span:last-child { font-weight: 600; }

@media (max-width: 768px) {
  /* The gallery ran the full 0.707 product ratio, which pushed price, size and
     Add to Cart past 1200px on a 844px screen. Capping the stage keeps the whole
     garment visible (object-fit stays contain) while lifting the buy box. */
  /* 54vh keeps the garment large with only mild letterboxing. Chasing price
     above the fold needed 46vh, which shrank the tee to a narrow strip for
     ~7px — and the sticky bar already surfaces price and size on scroll. */
  .pdp__stage img { max-height: 54vh; }
  /* Breadcrumb above the gallery costs a line of the first screen, and the
     collection eyebrow right below the title already says where you are. */
  .pdp-crumb { display: none; }
  body.product-page .main-content { padding-top: 0.4rem; }
  /* Thumbnails wrapped onto a second row; one scrollable row costs less height. */
  .pdp__thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb { flex: 0 0 68px; }
  .pdp__assurances { padding: 0.75rem 0.85rem; }
}

/* ============ Hero conversion hierarchy ============ */

/* Real, already-configured offer surfaced in the hero instead of only in the
   scrolling announce bar, where it is off-screen most of the time. */
.home-hero__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.82rem;
  backdrop-filter: blur(3px);
}
.home-hero__code {
  background: var(--brandGradient);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}
.home-hero__actions { align-items: center; }
.home-hero__cta { min-width: 260px; }
/* Secondary action reads as a link so a single button owns the primary tap. */
.home-hero__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.9rem;
  opacity: 0.92;
}
.home-hero__link:hover { opacity: 1; }

@media (max-width: 768px) {
  .home-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .home-hero__cta { width: 100%; min-width: 0; }
  .home-hero__link { text-align: center; padding: 0.2rem 0; }
  /* The SEO-weighted subtitle ran four lines on a phone and pushed the CTA
     down; clamped here rather than rewritten so the copy stays the editor's. */
  .home-hero__sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
  }
  .home-hero__offer { font-size: 0.78rem; margin-bottom: 0.7rem; }
}

/* ============ Hero: image-led, single action ============ */

/* Copy removed from the hero so the photography carries it and one button owns
   the screen. The H1 stays in the markup under .visually-hidden — the page
   needs an H1 for search and for screen-reader navigation. */
.home-hero .home-eyebrow,
.home-hero .home-hero__sub,
.home-hero .home-hero__micro,
.home-hero .home-hero__offer,
.home-hero .home-hero__link {
  display: none;
}
.home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.home-hero__actions { width: auto; }
/* No text left to keep legible, so the scrim lifts and the photograph shows.
   Enough remains at the base to seat the button. */
.home-hero__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.45) 100%);
}

@media (max-width: 768px) {
  .home-hero__inner { align-items: stretch; }
  .home-hero__actions { width: 100%; }
}

/* ============ Lookbook rail ============ */

/* Replaces a rigid 3-column grid whose cells were 372x960: portrait shots sat
   in tall grey bands and six images ran 2098px down the page. A horizontal rail
   shows the run of photography at a glance and costs one card's height. */
.lookbook-rail {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bleeds past page-width so the rail reads as continuous rather than boxed. */
  padding: 0.25rem max(1rem, calc((100vw - var(--pageWidth)) / 2 + 1rem)) 0.5rem;
  scroll-padding-left: max(1rem, calc((100vw - var(--pageWidth)) / 2 + 1rem));
}
.lookbook-rail::-webkit-scrollbar { display: none; }

.lookbook-card {
  flex: 0 0 clamp(210px, 30%, 300px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
.lookbook-card__frame {
  /* Frame matches the photography ratio, so cover crops nothing. */
  aspect-ratio: var(--productAspect);
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--productMat);
}
.lookbook-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}
.lookbook-card:hover .lookbook-card__frame img { transform: scale(1.04); }

.lookbook-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.lookbook-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brandInk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lookbook-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brandOrange);
}
.lookbook-card:hover .lookbook-card__cta { text-decoration: underline; }

@media (max-width: 768px) {
  .lookbook-card { flex: 0 0 68vw; }
  .lookbook-rail { gap: 0.7rem; padding-left: 1rem; padding-right: 1rem; scroll-padding-left: 1rem; }
}

/* ============ Product card: hover through the other shots ============ */

.product-card__image { position: relative; }
/* Second layer holds the incoming shot so each change cross-fades instead of
   snapping. Inherits the parent's sizing so nothing crops. */
.product-card__image-layer {
  position: absolute;
  inset: 0;
  background-size: inherit;
  background-repeat: no-repeat;
  background-position: inherit;
  opacity: 0;
  transition: opacity 850ms ease;
  pointer-events: none;
}
.product-card__image-layer.is-shown { opacity: 1; }

/* Tells the shopper there is more to see before they hover. */
.product-card__shots {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brandInk);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.product-card:hover .product-card__shots,
.product-card:focus-within .product-card__shots { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .product-card__image-layer { transition: none; }
}

/* No hover on touch, so the count sits visible as the only affordance. */
@media (hover: none) {
  .product-card__shots { opacity: 1; }
}


/* Drop cells carry the same hover cycle as product cards. The frame is the
   positioning context so the fading layer covers only the photo, not the copy
   block that now sits underneath it. */
.home-drop__frame {
  position: relative;
  aspect-ratio: var(--productAspect);
  overflow: hidden;
  background-color: var(--productMat);
}
.home-drop__frame img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.home-drop__frame .product-card__image-layer {
  background-size: contain;
  background-position: center;
}

/* ============ Phone (OTP) sign-in ============ */

.otp-card { max-width: 420px; }
.otp-phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--brandLine);
  border-radius: 8px;
  overflow: hidden;
}
.otp-phone-row:focus-within { border-color: var(--brandOrange); }
.otp-phone-cc {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  background: var(--brandSurface);
  border-right: 1px solid var(--brandLine);
  color: var(--brandMuted);
  font-weight: 600;
}
.otp-phone-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  padding: 0.7rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.otp-phone-row input:focus { outline: none; }

#otp-code {
  width: 100%;
  padding: 0.7rem;
  font-size: 1.35rem;
  letter-spacing: 0.5em;
  text-align: center;
  border: 1px solid var(--brandLine);
  border-radius: 8px;
}
#otp-code:focus { outline: none; border-color: var(--brandOrange); }

/* Reads as a link but is a button, so it stays keyboard reachable. */
.otp-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brandOrange);
  cursor: pointer;
  text-decoration: underline;
}
.otp-linkbtn[disabled] { color: var(--brandMuted); cursor: default; text-decoration: none; }
.otp-resend-wrap { margin-top: 0.75rem; text-align: center; }

/* Purchase controls: one size/quantity selection, reachable throughout a PDP. */
.pdp__buy-now { margin-top: 0.65rem; min-height: 48px; width: 100%; }
.pdp__buy-now, .pdp-sticky__actions .btn--secondary { background: #fff; color: var(--brandInk); border: 1px solid var(--brandInk); }
.pdp__buy-now:hover, .pdp-sticky__actions .btn--secondary:hover { background: var(--brandSurface); }
.pdp__delivery-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--brandInk); }
.pdp__purchase-status { margin: 0.75rem 0; color: #1b7a3a; font-weight: 600; }
.pdp__purchase-status.is-error { color: #b00020; }
.pdp__size { scroll-margin-top: 90px; }
[data-purchase-action]:disabled, [data-place-order]:disabled { opacity: 0.65; cursor: wait; }
.pdp-sticky {
  position: fixed;
  inset: auto 0 0;
  z-index: 65;
  background: #fff;
  border-top: 1px solid var(--brandLine);
  box-shadow: 0 -4px 20px rgb(26 26 46 / 6%);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.pdp-sticky[hidden] { display: none; }
.pdp-sticky__inner { display: flex; align-items: center; gap: 1rem; }
.pdp-sticky__meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.pdp-sticky__product { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32rem; }
.pdp-sticky__price { font-size: 1.15rem; font-weight: 700; color: var(--brandInk); }
.pdp-sticky__compare { font-size: 0.8rem; color: var(--brandMuted); margin-left: 0.3rem; }
.pdp-sticky__discount { font-size: 0.72rem; font-weight: 700; color: var(--brandOrange); margin-left: 0.3rem; }
.pdp-sticky__tax { display: block; font-size: 0.72rem; color: var(--brandMuted); }
.pdp-sticky__size { flex: 0 0 auto; min-height: 44px; border: 0; background: none; color: var(--brandInk); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdp-sticky__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.pdp-sticky__actions .btn { min-height: 48px; min-width: 150px; padding: 0.75rem 1rem; }
.product-page { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
.product-page .cart-toast { bottom: calc(var(--purchase-bar-height, 112px) + 0.75rem + env(safe-area-inset-bottom, 0px)); }
.cart-toast { max-height: 50vh; overflow-y: auto; }
.cart-toast p { flex: 1 1 100%; }
.cart-sticky { display: none; }
.cart-guest-note { text-align: center; margin: 0.6rem 0 0; font-size: 0.85rem; }
.cart-summary { top: 5rem; }

/* Checkout drafts survive discount and validation submissions. */
.checkout-summary-link { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.85rem 1rem; margin-bottom: 1.5rem; background: var(--brandSurface); border: 1px solid var(--brandLine); color: var(--brandInk); text-decoration: none; font-size: 0.9rem; }
.checkout-summary-link span { text-decoration: underline; text-underline-offset: 3px; }
.checkout-errors { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid #b00020; background: #fff8f8; }
.checkout-errors p { margin-top: 0; }
.checkout-errors ul { margin-bottom: 0; padding-left: 1.25rem; }
.checkout-errors a, .checkout-field__errors { color: #b00020; }
.checkout-field__errors { font-size: 0.85rem; margin: -0.4rem 0 0.8rem; }
.checkout-field__errors .errorlist { margin: 0; padding: 0; list-style: none; }
.checkout-field--invalid .checkout-input { border-color: #b00020; }
.checkout-address-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkout-page .main-content { padding-top: 0; }
.checkout-saved-address { padding: 1rem; background: var(--brandSurface); border: 1px solid var(--brandLine); }
.checkout-saved-address p { margin: 0.4rem 0; }
.checkout-optional-fields { margin: 0 0 0.75rem; }
.checkout-optional-fields summary, .checkout-discount summary { min-height: 44px; padding: 0.6rem 0; cursor: pointer; font-size: 0.9rem; }
.checkout-discount__row .checkout-input { min-width: 0; }
.checkout-discount-applied { color: #1b7a3a; font-size: 0.85rem; }
.checkout-input { scroll-margin-top: 1rem; }
#checkout-summary { scroll-margin-top: 1rem; }
@media (max-width: 768px) {
  .pdp-sticky { padding-top: 0.35rem; padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)); }
  .pdp-sticky__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
  .pdp-sticky__product { display: none; }
  .pdp-sticky__meta { min-height: 36px; justify-content: center; }
  .pdp-sticky__size { min-height: 44px; padding: 0 0.25rem; }
  /* Add to cart carries the primary decision, so it gets most of the row;
     Buy now stays reachable but visibly secondary, matching how the
     reference layout gives its single CTA nearly the full width. */
  .pdp-sticky__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; }
  .pdp-sticky__actions .btn { min-width: 0; font-size: 0.95rem; }
  .pdp-sticky__actions .btn--primary { font-size: 1rem; font-weight: 700; }
  .cart-page { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .cart-sticky { display: block; position: fixed; inset: auto 0 0; z-index: 65; border-top: 1px solid var(--brandLine); background: #fff; padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .cart-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .cart-sticky__inner span { display: flex; flex-direction: column; }
  .cart-sticky__inner small { font-size: 0.7rem; color: var(--brandMuted); }
  .cart-sticky__inner strong { font-size: 1.1rem; }
  .cart-sticky__inner .btn { min-height: 48px; padding: 0.75rem 1rem; font-size: 0.9rem; }
  .cart-page .cart-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .checkout-input { font-size: 16px; }
  .checkout-form { min-width: 0; }
}