/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ann-h) + 100px);
}

body {
  font-family: var(--font-body);
  background: #F6F2EB;
  color: #2E2A28;
  line-height: 1.5;
  overflow-x: hidden;
}

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

img {
  display: block;
  width: 100%;
}

/* Inputs keep the body font (so typed text reads like the rest of the
   page); buttons get their own font below regardless of whether they're
   a real <button> or an <a class="btn">. */
input {
  font-family: inherit;
}

button {
  font-family: var(--font-buttons);
}

/* VARIABLES */
:root {
  --background: #F6F2EB;
  --surface: #E8E1D6;
  --primary: #3D5A4B;
  --muted: #5E4635;
  --border: #B5965C;
  --white: #ffffff;
  --forest: #3D5A4B;
  --moss: #708A63;
  --gold: #B5965C;
  --walnut: #5E4635;
  --charcoal: #2E2A28;
  --deep: #23271E;
  --cream: #F6F2EB;
  --container: 1440px;
  --desktop: 64px;
  --mobile: 20px;
  --section: 120px;
  --ann-h: 40px;

  /* Titles: Cormorant Garamond. Body copy: Optima (a licensed Linotype
     font, not on Google Fonts — this stack uses it where the visitor's
     device already has it, typically macOS/iOS, and falls back to
     similar humanist sans-serifs everywhere else). Buttons: Public Sans. */
  --font-title: 'Cormorant Garamond', serif;
  --font-body: Optima, 'Optima Nova', Candara, 'Noto Sans', sans-serif;
  --font-buttons: 'Public Sans', sans-serif;
}

/* `--desktop` is the side gutter every section, the header and the footer
   share. It was never swapped for `--mobile` on small screens, so a 375px
   phone spent 128px — a third of the screen — on empty margin and left just
   247px for the content. Redefining the variable here fixes all of them at
   once, rather than chasing each rule individually. */
@media (max-width: 720px) {
  :root {
    --desktop: var(--mobile);
  }
}

/* GLOBAL */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section) var(--desktop);
}

.section-title {
  text-align: center;
  margin-bottom: 90px;
}

.section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  color: var(--primary);
}

/* "From The Wardrobe" only — scoped to this section so the product-page
   heading (which reuses .section-title) isn't affected. */
.home-collage .section-title h2 {
  font-size: clamp(26px, 3vw, 38px);
}

.title-line {
  width: 54px;
  height: 1px;
  background: var(--primary);
  margin: 22px auto 0;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 17px 40px;
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: .3s ease;
}

.btn:hover {
  background: #5E4635;
}

.btn:focus-visible,
.icon-btn:focus-visible,

body.modal-open {
  overflow: hidden;
}

/* ANNOUNCEMENT BAR */
.announce-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--ann-h);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
  white-space: nowrap;
}

/* Two messages share one slot. Stacking them in the same grid cell keeps the
   bar's height fixed and sizes it to the longer message, so nothing jumps
   when they swap. */
.announce-track {
  display: grid;
  min-width: 0;
  /* The two messages share one grid cell, so the cell is as wide as the
     longer of them. Without this the shorter message sat left-aligned in
     that cell and looked off-centre in the bar. */
  justify-items: center;
  text-align: center;
}

.announce-item {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.announce-track .announce-item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .5s ease;
}

.announce-track .announce-item.active {
  opacity: 1;
}

.announce-sep {
  color: var(--border);
  font-size: 9px;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: var(--ann-h);
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 18px var(--desktop);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(246, 242, 235, .92);
  backdrop-filter: blur(14px);
  transition: padding .3s ease, box-shadow .3s ease, background .3s ease, transform .4s ease, opacity .4s ease;
}

/* Homepage overlay navbar: slides away past the hero instead of turning solid */
.nav-hidden {
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
}

.announce-bar {
  transition: transform .4s ease, opacity .4s ease;
}

.announce-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.navbar.scrolled {
  padding-top: 18px;
  padding-bottom: 18px;
  background: rgba(246, 242, 235, .96);
  box-shadow: 0 1px 0 rgba(46, 42, 40, .1);
}

/* Transparent navbar overlaying the hero (homepage). Turns solid on scroll. */
.navbar-overlay:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
}

.navbar-overlay:not(.scrolled) .nav-links a,
.navbar-overlay:not(.scrolled) .nav-action-link,
.navbar-overlay:not(.scrolled) .logo-word {
  color: var(--cream);
}


.nav-links {
  display: flex;
  gap: 22px;
  margin-left: -18px;
}

.nav-links a {
  white-space: nowrap;
}

.nav-links a,

.nav-links a::after,

.nav-links a:hover,

.nav-links a:hover::after,

.logo {
  display: inline-flex;
  align-items: center;
  width: clamp(190px, 22vw, 320px);
  transition: width .3s ease, opacity .25s ease;
}

.navbar.scrolled .logo {
  width: clamp(178px, 19vw, 280px);
}

.logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-word {
  width: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

.logo-word .logo-emblem {
  width: auto;
  height: 2.1em;
  flex-shrink: 0;
}

.nav-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}

.icon-btn,

.icon-btn:hover,

.cart-icon {
  position: relative;
  font-size: 20px;
}

.cart-icon.cart-bump {
  animation: cartBump .45s ease;
}

/* The word "Bag" is gone; the count now sits as a badge on top of the
   icon (top-right corner) instead of as text beside it. */
.cart-count-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--deep);
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
}



/* HERO */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--white);
}

.hero-slideshow,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-slideshow {
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 6s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  background: rgba(46, 42, 40, .28);
  background: linear-gradient(180deg, rgba(46, 42, 40, .32) 0%, rgba(46, 42, 40, .4) 55%, rgba(46, 42, 40, .5) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 0 var(--mobile);
}

.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 6vw, 78px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 24px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.hero p {
  max-width: 620px;
  margin: 0 auto 42px;
  font-size: 18px;
  line-height: 1.65;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* PRODUCTS */
.collection-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 64px;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.5vw, 36px);
}

@media (min-width: 981px) {
  #bestsellerGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.collection-empty {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding-top: 34px;
  text-align: center;
}

.view-all-wrap {
  text-align: center;
  margin-top: 56px;
}

.product-card {
  cursor: pointer;
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  margin-bottom: 24px;
  transition: box-shadow .35s ease, transform .35s ease;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .7s ease;
}

.product-card:hover .product-image {
  box-shadow: 0 18px 44px rgba(46, 42, 40, .12);
  transform: translateY(-2px);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.add-cart {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--primary);
  color: var(--white);
  border: 0;
  padding: 15px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: .3s ease;
}

.product-card:hover .add-cart {
  opacity: 1;
  transform: translateY(0);
}

.add-cart:disabled {
  cursor: wait;
}

.add-cart.is-adding {
  background: #5E4635;
  opacity: .92;
}

.add-cart.is-added {
  background: #708A63;
}

.cart-fly-image {
  position: fixed;
  z-index: 2000;
  object-fit: cover;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  box-shadow: 0 18px 44px rgba(46, 42, 40, .2);
}

.product-info {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.product-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
}

.product-info span {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 7px;
}

/* Buy Now on each card: straight to checkout with that one piece.
   Always visible — a hover-only button would be invisible on a phone,
   which is where most of the shop gets browsed. Outlined rather than
   solid so it reads as secondary to Add to Cart on the photo. */
.card-buy {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 8px;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.card-buy:hover {
  background: var(--primary);
  color: var(--white);
}

.card-buy:disabled {
  cursor: wait;
  opacity: .65;
}

.card-buy.is-error {
  border-color: #A32D2D;
  color: #A32D2D;
}

.product-modal[hidden] {
  display: none;
}

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 32px;
}

.product-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 42, 40, .42);
  backdrop-filter: blur(10px);
}

.product-modal-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px);
  width: min(980px, 100%);
  max-height: calc(100vh - 64px);
  background: var(--background);
  box-shadow: 0 28px 80px rgba(46, 42, 40, .2);
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  background: rgba(246, 242, 235, .88);
  border: 1px solid rgba(181, 150, 92, .55);
  color: var(--primary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 10px 13px;
  text-transform: uppercase;
}

.modal-image {
  background: var(--surface);
  min-height: 560px;
}

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

.modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 54px;
}

.modal-info h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 20px;
}

.modal-price {
  color: var(--primary);
  font-size: 18px;
  margin-bottom: 28px;
}

.modal-description {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 36px;
}

.modal-add-cart {
  border: 0;
  cursor: pointer;
  text-align: center;
}

.modal-add-cart:disabled {
  cursor: wait;
}

.modal-add-cart.is-adding {
  background: #5E4635;
}

.modal-add-cart.is-added {
  background: #708A63;
}

/* ABOUT */
.about {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: 70px;
  align-items: start;
  border-top: 1px solid var(--border);
}

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 18px;
}

.about h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
}

.about>p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

/* LOOKBOOK */
.lookbook {
  background: var(--surface);
}

.lookbook-soon {
  display: grid;
  min-height: 620px;
  place-items: center;
  padding: 110px var(--desktop);
  text-align: center;
}

.lookbook-soon-content {
  max-width: 760px;
}

.lookbook-soon h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 24px;
}

.lookbook-soon p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  margin: 0 auto 38px;
  max-width: 620px;
}

/* TESTIMONIALS */
.testimonials {
  border-bottom: 1px solid var(--border);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}

.testimonial {
  border-top: 1px solid var(--border);
  padding-top: 30px;
}

.testimonial blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.28;
  color: var(--primary);
  margin-bottom: 28px;
}

.testimonial p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.testimonial span {
  color: var(--muted);
  font-size: 14px;
}

/* FAQ */
.faq-grid {
  display: grid;
  max-width: 920px;
  margin: 0 auto;
}

.faq-item {
  border-top: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  padding: 28px 0;
  text-align: left;
}

.faq-question span:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
}

.faq-question span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transition: transform .25s ease;
}

.faq-question[aria-expanded="true"] span:last-child {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 30px;
}

.faq-answer p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 680px;
}

/* CART */
.cart-page {
  padding-top: calc(170px + var(--ann-h));
}

.cart-heading {
  margin-bottom: 70px;
}

.cart-heading h1,
.cart-summary h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--primary);
}

.cart-heading h1 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.05;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 70px;
  align-items: start;
}

/* The 360px summary column is a fixed track, so on a narrow screen it took
   its full width and squeezed the items column down to nothing — the item
   name, quantity buttons and Remove all collapsed on top of the summary.
   Below this width the two halves stack instead. */
@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  /* Sticky only makes sense while the summary sits beside the items. */
  .cart-summary {
    position: static;
    top: auto;
  }
}

.cart-items {
  border-top: 1px solid var(--border);
}

.cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
}

.cart-item img {
  aspect-ratio: 3 / 4;
  height: 160px;
  object-fit: cover;
  background: var(--surface);
}

.cart-item h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 8px;
}

.cart-item-price,
.cart-line-total,
.cart-summary p,
.empty-cart p {
  color: var(--muted);
}

.quantity-control {
  display: inline-grid;
  grid-template-columns: 36px 42px 36px;
  align-items: center;
  border: 1px solid var(--border);
  margin-top: 18px;
}

.quantity-control button,
.remove-item {
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
}

.quantity-control button {
  height: 38px;
  font-size: 18px;
}

.quantity-control span {
  text-align: center;
  font-size: 13px;
}

.quantity-control button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ============================================
   FIND MY ORDER
   ============================================ */
.find-order-panel {
  max-width: 520px;
  margin: 0 auto;
}

.find-order-lede {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.find-order-form label {
  display: block;
  margin-bottom: 22px;
}

.find-order-form label span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.find-order-form input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--primary);
  padding: 13px 2px;
  outline: none;
}

.find-order-form input:focus {
  border-color: var(--primary);
}

#orderRef {
  letter-spacing: .22em;
  text-transform: uppercase;
}

.find-order-form .btn {
  width: 100%;
  margin-top: 6px;
}

.find-order-error {
  color: #A32D2D;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.find-order-result {
  margin-top: 36px;
}

.find-order-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.find-order-help {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* ============================================
   SOLD PIECES
   Everything here is one of a kind, so a sold piece stays on show — it is
   part of the story — but cannot be bought.
   ============================================ */
.product-card.is-sold {
  cursor: default;
}

.product-card.is-sold .product-image img {
  filter: grayscale(.55);
  opacity: .75;
}

.product-card.is-sold:hover .product-image {
  box-shadow: none;
  transform: none;
}

.product-card.is-sold:hover .product-image img {
  transform: none;
}

.sold-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--deep);
  color: var(--cream);
  padding: 9px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Says why the + stopped working, so it doesn't just look broken. */
.stock-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cart-line-total {
  text-align: right;
  font-size: 15px;
  white-space: nowrap;
}

.remove-item {
  display: block;
  margin-top: 16px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cart-summary {
  position: sticky;
  top: 120px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}

.cart-summary h2 {
  font-size: 30px;
  margin-bottom: 18px;
}

.cart-summary-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(181, 150, 92, .55);
  padding: 16px 0;
}

.summary-row strong {
  font-size: 18px;
}

.muted-row {
  color: var(--muted);
  font-size: 14px;
}

.total-row {
  border-bottom: 1px solid rgba(181, 150, 92, .55);
  margin-bottom: 18px;
}

.total-row strong {
  color: var(--primary);
  font-size: 22px;
}

.cart-summary p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.checkout-btn,
.stripe-pay-btn {
  width: 100%;
  border: 0;
  margin-bottom: 18px;
}

.checkout-btn:disabled,
.stripe-pay-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.clear-cart {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 18px;
  text-align: center;
  text-transform: uppercase;
}

.clear-cart:hover {
  color: var(--primary);
}

.continue-link {
  display: block;
  color: var(--muted);
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.empty-cart {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 56px 0 0;
  text-align: center;
}

.empty-cart h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 auto 20px;
  max-width: 680px;
}

.empty-cart>p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 auto 30px;
  max-width: 520px;
}

.empty-cart-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 34px;
  text-transform: uppercase;
}

.empty-cart-notes span {
  border-top: 1px solid rgba(181, 150, 92, .7);
  padding-top: 12px;
}

/* CHECKOUT (Stripe) */
.checkout-order-items {
  border-top: 1px solid var(--border);
}

.checkout-line-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.checkout-line-item img {
  aspect-ratio: 3 / 4;
  height: 110px;
  object-fit: cover;
  background: var(--surface);
}

.checkout-line-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 6px;
}

.checkout-line-item p {
  color: var(--muted);
  font-size: 13px;
}

.checkout-line-item strong {
  white-space: nowrap;
  font-size: 15px;
}

/* Price and Remove share the third column so the grid stays three across. */
.checkout-line-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.checkout-line-end .remove-item {
  margin: 0;
}

/* Remove is 11px type, which is a 14px-tall tap target — too small for a
   thumb. Give it real height on touch, without moving anything on desktop. */
@media (hover: none) {
  .remove-item {
    padding: 9px 2px;
  }
}

.secure-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.checkout-error {
  color: #a13d3d;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Both class names sit on the same element, so this must out-specify
   `.checkout-soon` rather than merely follow it — it doesn't, it is written
   earlier in the file. With a single class it lost, the 420px second column
   survived, the content column collapsed to 0 and the centred text was
   dragged off the left edge of every phone. */
.checkout-soon.checkout-success-page {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.checkout-success-page .checkout-soon-content {
  max-width: 620px;
}

.checkout-success-page .checkout-soon-actions {
  justify-content: center;
}

/* ============================================
   ORDER RECEIPT on the success page
   ============================================ */
.order-receipt {
  width: 100%;
  max-width: 420px;
  margin: 38px auto 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  text-align: left;
  font-size: 14px;
}

.order-receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.order-receipt-head strong {
  color: var(--primary);
  letter-spacing: .1em;
}

.order-receipt-items {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.order-receipt-items li,
.order-receipt-totals div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 0;
}

.order-receipt-totals {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  color: var(--muted);
}

.order-receipt-totals .order-receipt-total {
  color: var(--primary);
  font-weight: 600;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}

.order-receipt-email {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.cart-confirm[hidden] {
  display: none;
}

.cart-confirm {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: grid;
  place-items: center;
  padding: 24px;
}

.cart-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 42, 40, .38);
  backdrop-filter: blur(8px);
}

.cart-confirm-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: var(--background);
  box-shadow: 0 28px 80px rgba(46, 42, 40, .2);
  padding: 42px;
  text-align: center;
}

.cart-confirm-dialog h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 18px;
}

.cart-confirm-dialog>p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 30px;
}

.cart-confirm-actions {
  display: grid;
  gap: 14px;
}

.confirm-clear-cart {
  border: 0;
  cursor: pointer;
}

.cancel-clear-cart {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 10px;
  text-transform: uppercase;
}

.cancel-clear-cart:hover {
  color: var(--primary);
}

/* SEARCH SOON */
.search-soon-modal[hidden] {
  display: none;
}

.search-soon-modal {
  position: fixed;
  inset: 0;
  z-index: 1950;
  display: grid;
  place-items: center;
  padding: 24px;
}

.search-soon-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 42, 40, .38);
  backdrop-filter: blur(8px);
}

.search-soon-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  background: var(--background);
  box-shadow: 0 28px 80px rgba(46, 42, 40, .2);
  padding: 54px 46px 46px;
  text-align: center;
}

.search-soon-dialog h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 18px;
}

.search-soon-dialog>p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 auto 30px;
  max-width: 420px;
}

/* CHECKOUT SOON */
.checkout-soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: center;
  min-height: 78vh;
  padding-top: calc(190px + var(--ann-h));
}

/* A fixed 420px track cannot fit beside anything on a phone. Same trap as
   the cart layout: the flexible column gets squeezed to nothing. */
@media (max-width: 900px) {
  .checkout-soon {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

.checkout-soon-content {
  max-width: 760px;
}

.checkout-soon-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 400;
  line-height: 1.04;
  margin-bottom: 28px;
}

.checkout-soon-content>p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  max-width: 620px;
}

.checkout-soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  margin-top: 42px;
}

.checkout-soon-actions .continue-link {
  text-align: left;
}

.checkout-soon-panel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 34px 0;
}

.checkout-soon-panel h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
}

.checkout-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid rgba(181, 150, 92, .55);
  padding: 20px 0;
}

.checkout-step span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.checkout-step p {
  color: var(--muted);
  line-height: 1.7;
}

/* PRODUCTS PAGE */
.products-page {
  padding-top: calc(170px + var(--ann-h));
}

/* LEGAL */
.legal-page {
  padding-top: calc(170px + var(--ann-h));
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 70px;
  border-top: 1px solid var(--border);
  padding-top: 42px;
}

.legal-item {
  border-top: 1px solid rgba(181, 150, 92, .65);
  padding-top: 26px;
}

.legal-item h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  margin-bottom: 16px;
}

.legal-item p {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal-item h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--primary);
  margin: 26px 0 10px;
}

.legal-item h3:first-of-type {
  margin-top: 0;
}

.legal-item ul {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 16px;
  padding-left: 20px;
}

.legal-item li {
  margin-bottom: 4px;
}

.legal-item strong {
  color: var(--primary);
}

/* CHATBOT */
.chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1700;
}

.chatbot-toggle {
  background: var(--primary);
  border: 0;
  color: var(--white);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 15px 20px;
  text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(46, 42, 40, .18);
}

.chatbot-panel {
  position: absolute;
  right: 0;
  bottom: 58px;
  width: min(360px, calc(100vw - 40px));
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: 0 28px 80px rgba(46, 42, 40, .2);
  overflow: hidden;
}

.chatbot-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(181, 150, 92, .65);
  padding: 22px;
}

.chatbot-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
}

.chatbot-close {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.chatbot-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding: 20px 22px;
}

.chatbot-message {
  line-height: 1.55;
  max-width: 88%;
  padding: 12px 14px;
}

.chatbot-message.bot {
  align-self: flex-start;
  background: var(--surface);
  color: var(--muted);
}

.chatbot-message.user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--white);
}

.chatbot-message-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}

.chatbot-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 18px;
}

.chatbot-prompts button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 9px 10px;
  text-transform: uppercase;
}

.chatbot-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-top: 1px solid rgba(181, 150, 92, .65);
}

.chatbot-form input {
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--primary);
  outline: none;
  padding: 16px;
}

.chatbot-form button {
  background: var(--primary);
  border: 0;
  color: var(--white);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 0 16px;
  text-transform: uppercase;
}

/* FOOTER */
.footer {
  border-top: 1px solid var(--border);
  padding: 76px var(--desktop) 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 60px;
}

.footer-logo {
  display: inline-flex;
  flex-direction: column;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .18em;
  margin-bottom: 26px;
}

.footer-logo small {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: .55em;
  margin-left: .55em;
}

.footer p,
.footer a {
  color: var(--muted);
  line-height: 1.8;
}

.footer h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 22px;
}

.footer a {
  display: block;
  margin-bottom: 12px;
}

.newsletter {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.newsletter input {
  background: transparent;
  border: 1px solid var(--border);
  padding: 15px;
  outline: none;
}

.newsletter button {
  background: var(--primary);
  color: var(--white);
  border: 0;
  padding: 15px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
}

.footer-tagline {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--forest);
  margin-top: 30px;
}

.copyright {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(181, 150, 92, .55);
  text-align: center;
  padding-top: 34px;
  margin-top: 28px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: .8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: .18s;
}

.delay-2 {
  transition-delay: .34s;
}

@keyframes cartBump {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/* RESPONSIVE */
@media (max-width: 980px) {
  /* Mobile header: no burger menu. The Wardrobe and The Cabinet stay visible
     as links so both shops are always one tap away. */
  .nav-links {
    display: flex;
    gap: 16px;
    margin-left: 0;
  }


  .nav-links a {
    font-size: 11px;
    letter-spacing: .12em;
  }

}

@media (max-width: 560px) {
  .hero {
    min-height: 650px;
  }

  .section-title {
    margin-bottom: 56px;
  }

  .nav-actions {
    gap: 14px;
  }

  .logo {
    width: min(48vw, 210px);
  }

  .icon-btn:first-child {
    display: none;
  }

  .product-info {
    flex-direction: column;
    gap: 4px;
  }

  .collection-filters {
    justify-content: flex-start;
    margin-bottom: 42px;
  }

  .filter-btn {
    padding: 14px 16px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .product-image {
    margin-bottom: 12px;
  }

  .product-info h3 {
    font-size: 14px;
    line-height: 1.3;
  }

  .product-info span {
    font-size: 12px;
  }

  .card-buy {
    margin-top: 10px;
    padding: 11px 4px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .add-cart {
    opacity: 1;
    transform: none;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 13px 4px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .cart-page {
    padding-top: calc(132px + var(--ann-h));
  }

  .products-page {
    padding-top: calc(132px + var(--ann-h));
  }

  .legal-page {
    padding-top: calc(132px + var(--ann-h));
  }

  .chatbot {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .chatbot-toggle {
    margin-left: auto;
    display: block;
  }

  .chatbot-panel {
    right: 0;
    bottom: 58px;
    width: 100%;
  }

  .chatbot-messages {
    max-height: 230px;
  }

  .checkout-soon {
    padding-top: calc(132px + var(--ann-h));
  }

  .checkout-soon-content>p:not(.eyebrow) {
    font-size: 16px;
  }

  .checkout-soon-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-soon-actions .btn,
  .checkout-soon-actions .continue-link {
    text-align: center;
  }

  .cart-heading {
    margin-bottom: 38px;
  }

  .cart-layout {
    gap: 46px;
  }

  .cart-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 0;
  }

  .cart-item img {
    width: 96px;
    height: 128px;
  }

  .cart-item h2 {
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 6px;
  }

  .cart-item-price {
    font-size: 14px;
  }

  .quantity-control {
    grid-template-columns: 34px 38px 34px;
    margin-top: 14px;
  }

  .quantity-control button {
    height: 36px;
  }

  .cart-line-total {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(181, 150, 92, .45);
    margin-top: 2px;
    padding-top: 16px;
    text-align: left;
  }

  .remove-item {
    margin: 0;
  }

  .checkout-line-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 0;
  }

  .checkout-line-item img {
    width: 72px;
    height: 96px;
  }

  /* On a phone the price and Remove drop onto their own full-width row,
     sitting apart from each other rather than stacked in a corner. */
  .checkout-line-end {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(181, 150, 92, .45);
    margin-top: 4px;
    padding-top: 14px;
  }

  .cart-summary {
    padding-top: 24px;
  }

  .cart-summary h2 {
    font-size: 28px;
  }

  .empty-cart {
    margin-top: 42px;
    padding-top: 42px;
  }

  .empty-cart-notes {
    align-items: center;
    flex-direction: column;
    gap: 14px;
  }

  .empty-cart-notes span {
    width: 100%;
  }

  .summary-row,
  .cart-summary-meta {
    gap: 16px;
  }
}

/* INCENSE SUBSCRIPTION */













/* ============================================
   HOMEPAGE REDESIGN — matches client reference
   ============================================ */

.eyebrow-light {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 18px;
}

/* Generic placeholder used anywhere a real photo is missing.
   Deliberately looks like a placeholder (hatched pattern + caption),
   never like a real photo, so it's obvious what still needs replacing. */


/* HERO v2 */
.hero-v2 {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--cream);
  padding-top: 130px;
}


.hero-v2-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 39, 30, .35) 0%, rgba(35, 39, 30, .55) 60%, rgba(35, 39, 30, .72) 100%);
}

.hero-v2-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 var(--mobile);
}

.hero-v2-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(46px, 6.5vw, 84px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.hero-v2-divider {
  width: 54px;
  height: 1px;
  background: var(--gold);
  margin: 26px auto;
}

.hero-v2-content p {
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.8;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

@media (max-width: 640px) {
  /* On phones the crop puts the model's headdress right behind the
     heading, which is too busy/light for the desktop gradient to keep
     the text readable. Darken more evenly and give the text its own
     stronger shadow rather than relying on the image gradient alone. */
  .hero-v2::after {
    background: linear-gradient(180deg, rgba(35, 39, 30, .55) 0%, rgba(35, 39, 30, .6) 45%, rgba(35, 39, 30, .78) 100%);
  }

  .hero-v2-content h1 {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .7), 0 4px 24px rgba(0, 0, 0, .55);
  }
}

.btn-outline-light {
  display: inline-block;
  /* "Outline" in the name, but this used to render as a solid cream block —
     now it's a real translucent ghost button over the hero image. */
  background: rgba(246, 242, 235, .18);
  border: 1px solid rgba(246, 242, 235, .7);
  backdrop-filter: blur(4px);
  color: var(--cream);
  padding: 17px 40px;
  font-family: var(--font-buttons);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: .3s ease;
}

.btn-outline-light:hover {
  background: var(--gold);
  color: var(--white);
}

/* ABOUT SPLIT ("More than a shop") */






.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--forest);
  border-bottom: 1px solid var(--forest);
  padding-bottom: 3px;
  transition: gap .25s ease;
}

.link-arrow:hover {
  gap: 14px;
}


/* CATEGORIES ("Step Into Our World") */







/* JOURNAL BAND */







/* TRUST ROW + NEWSLETTER */
.trust-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  align-items: center;
  border-top: 1px solid var(--border);
}

.trust-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.trust-icon {
  text-align: center;
}

.trust-icon svg {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  color: var(--forest);
}

.trust-icon h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--forest);
  margin-bottom: 8px;
}

.trust-icon p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.newsletter-block {
  border-left: 1px solid var(--border);
  padding-left: 50px;
}

.newsletter-block h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 10px;
}

.newsletter-block p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.newsletter-inline {
  display: flex;
  gap: 0;
}

.newsletter-inline input {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-right: 0;
  padding: 14px 16px;
  outline: none;
  font-size: 13px;
}

.newsletter-inline button {
  background: var(--deep);
  color: var(--cream);
  border: 0;
  padding: 14px 22px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter-inline button:hover {
  background: var(--forest);
}

/* FOOTER v2 */
.footer-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--deep);
  color: var(--cream);
  padding: 60px var(--desktop) 28px;
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-bottom: 0;
}

.footer-nav a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream);
  opacity: .85;
  transition: opacity .25s ease;
}

.footer-nav a:hover {
  opacity: 1;
}

.footer-v2 .logo-word {
  order: -1;
  display: inline-flex;
  justify-content: center;
  color: var(--cream);
  margin-bottom: 0;
}

.footer-v2 .logo-word .logo-emblem {
  opacity: .95;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 0;
}

.footer-social a {
  display: inline-flex;
  color: var(--gold);
  transition: color .25s ease;
}

.footer-social a:hover {
  color: var(--cream);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-v2 .footer-tagline {
  color: var(--cream);
  opacity: .9;
  margin-top: 0;
}

.footer-v2 .copyright {
  width: 100%;
  border-top: 1px solid rgba(246, 242, 235, .18);
  color: var(--cream);
  opacity: .7;
  padding-top: 24px;
  margin-top: 6px;
}

/* NAV ACTION LINKS (Search / Account / Bag) */
.nav-action-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .25s ease;
}

.nav-action-link:hover {
  color: var(--muted);
}

.nav-action-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {



  .trust-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .newsletter-block {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 30px;
  }
}

@media (max-width: 860px) {



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

  /* Hide the wordy labels, but keep the bag count visible */
  .nav-action-link:not(.cart-icon) span {
    display: none;
  }
}


/* ============================================
   PRODUCT DETAIL PAGE (PDP)
   ============================================ */

#pdp {
  padding-top: calc(var(--ann-h) + 118px);
  padding-left: var(--desktop);
  padding-right: var(--desktop);
  padding-bottom: 90px;
  max-width: var(--container);
  margin: 0 auto;
}

.pdp-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 26px;
}

.pdp-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-crumbs a { color: var(--muted); transition: color .2s ease; }
.pdp-crumbs a:hover { color: var(--forest); }
.pdp-crumbs .current { color: var(--forest); }

.pdp-prevnext { display: flex; gap: 22px; }

.pdp-nav-link {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.pdp-nav-link:hover { color: var(--forest); }

.pdp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Gallery */
.pdp-main-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
}

.pdp-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.pdp-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { border-color: var(--gold); }

/* Info column */
.pdp-info h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--forest);
  line-height: 1.1;
}

.pdp-price {
  font-size: 18px;
  color: var(--walnut);
  margin-top: 14px;
}

.pdp-divider {
  margin: 22px 0;
  height: 1px;
  background: var(--border);
  position: relative;
  max-width: 120px;
}
.pdp-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
}

.pdp-description {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  max-width: 460px;
}

.pdp-option { margin-top: 26px; }

.pdp-option-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 12px;
}

.pdp-colours { display: flex; gap: 12px; }
.pdp-colour {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(46, 42, 40, .2);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .2s ease;
}
.pdp-colour.active { box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--gold); }
.pdp-colour:hover { transform: scale(1.08); }

.pdp-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-size {
  min-width: 46px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--forest);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s ease;
}
.pdp-size:hover { border-color: var(--forest); }
.pdp-size.active { background: var(--forest); color: var(--cream); border-color: var(--forest); }

.pdp-size-guide {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
}
.pdp-size-guide:hover { color: var(--forest); border-color: var(--forest); }

.pdp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
}
.pdp-qty button {
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--forest);
  cursor: pointer;
}
.pdp-qty button:hover { background: var(--surface); }
.pdp-qty span {
  min-width: 46px;
  text-align: center;
  font-size: 14px;
}

.pdp-add-bag {
  margin-top: 28px;
  width: 100%;
  max-width: 380px;
  display: block;
}

.pdp-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
}
.pdp-wishlist:hover { color: var(--forest); border-color: var(--forest); }
.pdp-wishlist svg { width: 15px; height: 15px; }

/* Lower: accordions + assurances */
.pdp-lower {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 44px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}

.pdp-acc-item { border-bottom: 1px solid var(--border); }
.pdp-acc-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: 0;
  padding: 16px 0;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--forest);
}
.pdp-acc-a { padding: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.pdp-assurances { display: flex; flex-direction: column; gap: 24px; }
.pdp-assurance { display: flex; gap: 14px; align-items: flex-start; }
.pdp-assurance h4 {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 5px;
}
.pdp-assurance p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Related */
.pdp-related { margin-top: 80px; }
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.pdp-related-card { text-align: center; }
.pdp-related-card a { display: block; color: inherit; }
.pdp-related-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 16px;
}
.pdp-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pdp-related-card a:hover .pdp-related-image img { transform: scale(1.05); }
.pdp-related-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 6px;
}
.pdp-related-card p { font-size: 13px; color: var(--walnut); }

@media (max-width: 900px) {
  .pdp-layout { grid-template-columns: 1fr; gap: 34px; }
  .pdp-lower { grid-template-columns: 1fr; gap: 34px; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
  #pdp { padding-top: calc(var(--ann-h) + 100px); }
}

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

/* Colourway shown as descriptive text (each piece is a single colourway) */
.pdp-colour-text {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 420px;
  text-transform: none;
  letter-spacing: 0;
}

/* CONTACT FORM */
.contact-form {
  margin-top: 26px;
  max-width: 560px;
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.contact-row label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
}

.contact-row input,
.contact-row select,
.contact-row textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  outline: none;
  transition: border-color .2s ease;
}

.contact-row input:focus,
.contact-row select:focus,
.contact-row textarea:focus {
  border-color: var(--forest);
}

.contact-row textarea { resize: vertical; }

.contact-form .btn {
  border: 0;
  cursor: pointer;
  margin-top: 4px;
}

/* Honeypot field — hidden from people, visible to bots */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-success {
  margin: 24px 0 8px;
  padding: 26px 28px;
  background: var(--surface);
  border-left: 2px solid var(--gold);
}

.contact-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 10px;
}

/* Nav items for categories that have no products yet — look like links,
   behave like buttons (they open the "coming soon" notice). */





/* ============================================
   GALLERIES — card hover/swipe + PDP arrows
   ============================================ */

/* Product card: stacked views that cross-fade */
.card-gallery { touch-action: pan-y; }

.card-gallery .card-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease, transform .7s ease;
  pointer-events: none;
}

.card-gallery .card-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.card-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(246, 242, 235, .55);
  transition: background .25s ease, transform .25s ease;
}

.card-dot.active {
  background: var(--cream);
  transform: scale(1.35);
}

/* PDP stage: arrows, dots, swipe */
.pdp-main-image { touch-action: pan-y; }

/* Bare chevron, no button behind it. Without a background it needs its own
   contrast, so the stroke carries a pale drop shadow that reads against a
   dark jacket and a cream embroidery alike. */
.pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--deep);
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, transform .2s ease;
}

.pdp-arrow svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 3px rgba(246, 242, 235, .95));
}

.pdp-main-image:hover .pdp-arrow { opacity: 1; }
.pdp-arrow:hover { transform: translateY(-50%) scale(1.14); }
.pdp-arrow:focus-visible { opacity: 1; outline: 2px solid var(--forest); outline-offset: 2px; }
.pdp-arrow-prev { left: 6px; }
.pdp-arrow-next { right: 6px; }

.pdp-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
  pointer-events: none;
}

.pdp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(246, 242, 235, .6);
  transition: background .25s ease, transform .25s ease;
}

.pdp-dot.active {
  background: var(--cream);
  transform: scale(1.35);
}

.pdp-main-image.single-image .pdp-arrow,
.pdp-main-image.single-image .pdp-dots { display: none; }

/* Touch devices: no hover to reveal the arrows, so show them outright.
   They used to be hidden here and switched back on in the 700px block below;
   that split meant one careless edit to the phone rules made them vanish
   entirely on touch. Keep the decision in one place. */
@media (hover: none) {
  .pdp-arrow { opacity: 1; }
  .card-dots { bottom: 14px; }
}

/* ============================================
   HOMEPAGE MOSAIC — uncropped photos around a centre CTA
   ============================================ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
}

.mosaic-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Offset the outer columns so the rows never line up */
.mosaic-col-a { margin-top: 52px; }
.mosaic-col-c { margin-top: 26px; }

.mosaic-tile {
  display: block;
  overflow: hidden;
  background: var(--surface);
}

/* Whole photo, never cropped — the tile takes the image's own height */
.mosaic-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s ease;
}

.mosaic-tile:hover img { transform: scale(1.04); }

.mosaic-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 44px 24px;
  background: var(--surface);
}

.mosaic-cta .eyebrow { margin-bottom: 0; }

.mosaic-tile.reveal,
.mosaic-cta.reveal { transition: opacity .8s ease, transform .8s ease; }

@media (max-width: 900px) {
  /* Mobile mosaic: interlocking tiles of different sizes on a four column
     grid, with the CTA as one of the blocks. Tiles are cropped here (unlike
     desktop) because that is what lets the blocks lock together. */
  .mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 3.2vh;
    gap: 8px;
    padding-bottom: 10px;
  }

  .mosaic-col { display: contents; }
  .mosaic-col-a, .mosaic-col-c { margin-top: 0; }

  .mosaic-tile {
    width: auto;
    margin: 0;
    height: 100%;
  }

  .mosaic-tile img {
    height: 100%;
    object-fit: cover;
  }

  /* Tile placement — reads top to bottom, left and right interlocking */
  .mosaic-col-a .mosaic-tile:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 1 / span 5; }
  .mosaic-col-c .mosaic-tile:nth-of-type(1) { grid-column: 3 / span 2; grid-row: 1 / span 4; }
  .mosaic-col-c .mosaic-tile:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 5 / span 5; }
  .mosaic-cta                                { grid-column: 1 / span 2; grid-row: 6 / span 3; }
  .mosaic-col-a .mosaic-tile:nth-of-type(2) { grid-column: 1 / span 2; grid-row: 9 / span 5; }
  .mosaic-col-b .mosaic-tile:nth-of-type(1) { grid-column: 3 / span 2; grid-row: 10 / span 4; }
  .mosaic-col-b .mosaic-tile:nth-of-type(2) { grid-column: 1 / span 4; grid-row: 14 / span 4; }

  .mosaic-cta {
    padding: 16px 12px;
    margin: 0;
  }
}

@media (max-width: 520px) {
  .mosaic { grid-auto-rows: 2.9vh; gap: 6px; }
  .mosaic-cta { padding: 12px 10px; }
  .mosaic-cta .btn { padding: 12px 18px; font-size: 11px; }
}

/* Homepage banner linking to the wrap-skirt category. */
.skirt-banner {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.skirt-banner-link {
  display: block;
  position: relative;
  height: 100%;
}

.skirt-banner-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(35, 39, 30, .55), rgba(35, 39, 30, .12));
}

.skirt-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.skirt-banner-text {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .skirt-banner { height: 240px; }
  .skirt-banner-text { white-space: normal; padding: 0 24px; bottom: 28px; }
}

.cabinet-banner {
  position: relative;
  height: 420px;
  overflow: hidden;
}

.cabinet-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(35, 39, 30, .6), rgba(35, 39, 30, .1) 55%);
}

.cabinet-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cabinet-banner-content {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
  padding: 0 24px;
}

.cabinet-banner-text {
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: .02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  max-width: 520px;
}

@media (max-width: 640px) {
  .cabinet-banner { height: 340px; }
  .cabinet-banner-content { bottom: 28px; gap: 18px; }
}




/* ============================================
   BRAND LOCKUP (client's supplied logo)
   ============================================ */
.logo-word .logo-lockup {
  display: block;
  width: auto;
  height: 66px;
  object-fit: contain;
}

.navbar.scrolled .logo-word .logo-lockup { height: 54px; }

.footer-v2 .logo-word .logo-lockup { height: 74px; }

@media (max-width: 900px) {
  .logo-word .logo-lockup { height: 54px; }
  .footer-v2 .logo-word .logo-lockup { height: 64px; }
}

@media (max-width: 520px) {
  .logo-word .logo-lockup { height: 46px; }
}

/* ============================================
   PDP RELATED — horizontal scroller on mobile
   ============================================ */
@media (max-width: 700px) {
  .pdp-related {
    margin-top: 30px;
    padding-bottom: 6px;
  }

  /* The accordions now follow the related row, so give them their own gap */
  .pdp-lower {
    margin-top: 26px;
    padding-top: 26px;
  }

  .pdp-related .section-title {
    margin-bottom: 18px;
  }

  /* One swipeable row instead of a stack */
  .pdp-related-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    /* let the row bleed to the screen edges so it reads as a scroller */
    margin-inline: calc(var(--mobile) * -1);
    padding-inline: var(--mobile);
    scrollbar-width: none;
  }

  .pdp-related-grid::-webkit-scrollbar { display: none; }

  .pdp-related-card {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }

  .pdp-related-image { margin-bottom: 10px; }
  .pdp-related-card h3 { font-size: 15px; }
  .pdp-related-card p { font-size: 12px; }
}

/* Newsletter confirmation after a successful sign-up */
.newsletter-done {
  background: var(--surface);
  border-left: 2px solid var(--gold);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--forest);
}

/* ============================================
   MOBILE FIXES — cart count, bigger product
   photos, visible arrows, no iOS zoom on Help
   ============================================ */

@media (max-width: 700px) {
  /* Product photos take the full width of the screen */
  #pdp {
    padding-left: 0;
    padding-right: 0;
  }

  .pdp-breadcrumb,
  .pdp-info,
  .pdp-related,
  .pdp-lower {
    padding-left: var(--mobile);
    padding-right: var(--mobile);
  }

  .pdp-main-image { aspect-ratio: 3 / 4; }

  .pdp-thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px var(--mobile) 0;
  }

  /* Bigger tap target on a phone; visibility is handled by the
     `@media (hover: none)` rule above. */
  .pdp-arrow {
    display: inline-flex;
    opacity: 1;
    width: 40px;
    height: 40px;
  }

  .pdp-arrow-prev { left: 2px; }
  .pdp-arrow-next { right: 2px; }
}

/* iOS zooms the page when a focused input is under 16px — keep chat and
   search inputs at 16px on touch devices to stop the jump. */
@media (max-width: 860px) {
  .chatbot-form input,
  .contact-row input,
  .contact-row select,
  .contact-row textarea,
  .newsletter-inline input {
    font-size: 16px;
  }
}

/* Buy Now sits under Add to Bag as the darker, decisive action */
.pdp-buy-now {
  margin-top: 10px;
  width: 100%;
  max-width: 380px;
  display: block;
  background: var(--deep);
  color: var(--cream);
  border: 0;
  cursor: pointer;
}

.pdp-buy-now:hover { background: var(--forest); }
.pdp-buy-now:disabled { opacity: .75; cursor: wait; }

.pdp-buy-error {
  margin-top: 10px;
  max-width: 380px;
  color: var(--text-danger, #A32D2D);
  font-size: 13px;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-page {
  max-width: 1100px;
  margin: 0 auto;
}

.about-lede {
  max-width: 640px;
  margin: 0 auto 60px;
  text-align: center;
}

.about-lede p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.7;
  color: var(--walnut);
  margin-bottom: 16px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 20px;
}

.about-block h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 18px;
}

.about-block p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-lede { margin-bottom: 42px; }
  .about-lede p { font-size: 18px; }
}

@media (max-width: 700px) {
}

/* ============================================
   HORIZONTAL OVERFLOW FIX
   An <input> has a default min-width based on its
   size attribute, so inside a flex row it refuses to
   shrink and pushes the whole page wider than the
   screen — which made full-bleed sections stop short
   of the right edge on phones.
   ============================================ */
.newsletter-inline { flex-wrap: wrap; }

.newsletter-inline input {
  min-width: 0;
  flex: 1 1 160px;
}

.newsletter-inline button { flex: 0 0 auto; }

@media (max-width: 560px) {
  /* Stack them so neither is squashed */
  .newsletter-inline { flex-direction: column; gap: 10px; }

  .newsletter-inline input {
    width: 100%;
    flex: none;
    border-right: 1px solid var(--border);
  }

  .newsletter-inline button { width: 100%; }
}

/* Belt and braces: nothing should scroll the page sideways.
   `clip` — not `hidden` — because `hidden` turns the body into its own
   scroll container, which freezes window.scrollY at 0 and silently breaks
   scroll-driven behaviour (reveal animations, the disappearing navbar).

   WARNING: this rule hides sideways overflow rather than fixing it, so
   `documentElement.scrollWidth` will read clean even when content is off
   screen. To test for real overflow, compare each element's
   getBoundingClientRect().right against documentElement.clientWidth —
   see tools/mobile-overflow-audit.js. */
html, body { overflow-x: clip; }

/* ============================================
   HIDDEN ELEMENTS — global safeguard
   The browser hides [hidden] with `display: none`,
   but any class rule that sets `display` overrides it,
   leaving modals and buttons permanently on screen and
   swallowing every tap. This makes `hidden` win, always.
   ============================================ */
[hidden] { display: none !important; }

.newsletter button:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* ============================================
   MOBILE HEADER FIT
   The header kept the 64px desktop side padding and reserved a fixed
   ~190px column for the logo even though the lockup is only ~36px wide.
   On a 375px screen that pushed the whole right-hand column — Account
   and Bag — past the edge of the viewport, where `overflow-x: clip`
   quietly cropped it instead of showing a scrollbar.
   Give the phone real padding and let the logo take only the room it needs.
   ============================================ */
@media (max-width: 720px) {
  /* Phone header: no nav link, and the logo moves out of the middle to sit
     on the left where the link used to be, with the actions on the right.
     The link stays on desktop, which keeps its three-column centred logo.
     The side padding comes from `--desktop`, which drops to `--mobile` at
     this same breakpoint (see the :root override near the top). */
  .navbar {
    grid-template-columns: auto 1fr;
    column-gap: 8px;
  }

  .nav-links { display: none; }

  /* Beats the fixed widths on `.logo` and its 560px override. */
  .navbar .logo { width: auto; }

  .nav-actions { gap: 14px; }
}

/* The banner carries the offer message, which is much longer than the
   shipping note it replaced. At the desktop size it needs 403px — more than
   a phone screen — and the bar's own overflow would slice it in half rather
   than wrap. Tighten the tracking and size until it fits: measured at 288px
   on the narrowest phone we support, against 305px of room. */
@media (max-width: 720px) {
  .announce-item { font-size: 10px; letter-spacing: .1em; }
}

@media (max-width: 420px) {
  /* The ✦ flourishes no longer fit either side of the message. */
  .announce-sep { display: none; }
}

@media (max-width: 400px) {
  .announce-item { letter-spacing: .04em; }
}

@media (max-width: 380px) {
  .navbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .nav-actions { gap: 10px; }
  .nav-links a { font-size: 10px; letter-spacing: .08em; }
}