/* ===========================================================================
   Yazhini Boutique — storefront styles
   Tokens, type scale and colour taken directly from the Claude Design file.
   =========================================================================== */

:root {
  --ink:        #2A1F1C;
  --ink-2:      #3A2B26;
  --body:       #5B4A44;
  --muted:      #8A7770;
  --muted-2:    #A9958C;
  --muted-3:    #BBA99F;

  --maroon-900: #3A0E12;
  --maroon-850: #4E1015;
  --maroon-800: #5C1217;
  --maroon-700: #7A1A20;
  --maroon-500: #B9424C;

  --gold:       #C9A227;
  --gold-2:     #E0BC4F;
  --gold-3:     #D9AE4A;
  --sand:       #E8D4B4;

  --cream:      #FAF6F1;
  --cream-2:    #F7F3EE;
  --cream-3:    #EFE5D6;
  --cream-4:    #FCFAF6;

  --line:       #E7DCCB;
  --line-2:     #E0D3BE;
  --line-3:     #EADFCF;
  --line-4:     #D8BFA8;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1400px;
  --shadow: 0 14px 44px rgba(58, 14, 18, .18);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat any display rule. Without this, .btn's
   `display: inline-flex` (and .otp__row's flex children) keep hidden elements
   on screen — the same trap that bit the admin's modal. Keep it above
   everything else so no later rule can win by source order. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main { flex: 1; outline: none; }

a { color: var(--maroon-700); text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
::selection { background: var(--gold); color: #fff; }

:focus-visible {
  outline: 2px solid var(--maroon-700);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--maroon-800); color: #F7EFE2; padding: 12px 20px;
}
.skip:focus { left: 0; color: #F7EFE2; }

/* ------------------------------------------------------------- animations */
@keyframes yzFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes yzToast {
  0% { opacity: 0; transform: translate(-50%, 16px); }
  10%, 88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}
@keyframes yzScroll {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(6px); opacity: .4; }
}
@keyframes yzSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ announcement */
.announce { background: var(--maroon-800); color: #F2E3CB; font-size: 12px; letter-spacing: .06em; }
.announce__in {
  max-width: var(--wrap); margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.announce__list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.announce__list span { display: flex; align-items: center; gap: 7px; }
.announce .g { color: var(--gold-3); font-style: normal; }
.announce .sep { color: #8C4A4E; }
.announce__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.announce__cur { border-left: 1px solid #8C4A4E; padding-left: 20px; }

/* ================================================================= header */
.hdr {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250, 246, 241, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-3);
}
.hdr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 26px;
}
.hdr__logo { flex: 0 0 auto; display: flex; }
.hdr__logo img { height: 44px; width: auto; display: block; mix-blend-mode: multiply; }

.hdr__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.hdr__burger span { display: block; height: 1.5px; background: var(--maroon-800); transition: .2s; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-left: 12px; }
.nav a {
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  border-bottom: 1.5px solid transparent; padding-bottom: 4px;
}
.nav a:hover { color: var(--maroon-700); }
.nav a.is-active { color: var(--maroon-700); border-bottom-color: var(--gold); }

.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.search {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid #E5D8C4; border-radius: 999px; padding: 7px 14px; background: #fff;
}
.search input {
  border: 0; outline: 0; background: transparent; font-size: 13px; width: 110px; color: var(--ink);
}
.ico { position: relative; display: flex; }
.badge {
  position: absolute; top: -6px; right: -8px; background: var(--gold); color: var(--maroon-900);
  font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-weight: 500; padding: 0 4px;
}

/* ============================================================== utilities */
.wrap { max-width: 1180px; margin: 0 auto; }
.wrap-lg { max-width: 1240px; margin: 0 auto; }
.wrap-xl { max-width: 1300px; margin: 0 auto; }
.wrap-md { max-width: 1060px; margin: 0 auto; }
.wrap-sm { max-width: 980px; margin: 0 auto; }
.pad { padding-left: 24px; padding-right: 24px; }

.h-display {
  font-family: var(--display); font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--maroon-800); margin: 0;
  font-size: clamp(28px, 4vw, 40px);
}
.h-page {
  font-family: var(--display); font-weight: 500; margin: 0; color: var(--maroon-800);
  font-size: clamp(34px, 5.5vw, 48px); line-height: 1.08;
}
.fleuron { color: var(--gold); font-size: 15px; margin: 8px 0 6px; }
.lede { font-size: 14.5px; color: var(--muted); margin: 0; }
.crumbs {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px;
}
.center { text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; cursor: pointer; font-size: 12.5px; letter-spacing: .18em;
  text-transform: uppercase; padding: 16px 32px; transition: background .18s, color .18s, border-color .18s;
}
.btn--primary { background: var(--maroon-700); color: #F7EFE2; }
.btn--primary:hover { background: var(--maroon-800); color: #F7EFE2; }
.btn--gold { background: var(--gold); color: var(--maroon-900); }
.btn--gold:hover { background: var(--gold-2); color: var(--maroon-900); }
.btn--ghost { background: transparent; border: 1px solid var(--maroon-500); color: var(--maroon-700); }
.btn--ghost:hover { background: var(--maroon-700); color: #F7EFE2; border-color: var(--maroon-700); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.link-more { font-size: 13px; letter-spacing: .08em; }

/* =================================================================== hero */
.hero { position: relative; height: min(760px, 86vh); background: #2C1310; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(44,19,16,.72) 0%, rgba(44,19,16,.30) 46%, rgba(44,19,16,.62) 100%);
}
.hero__mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 24px; pointer-events: none;
}
.hero__anim { animation: yzFade .8s ease both; }
.hero__kicker {
  font-size: 13px; letter-spacing: .44em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 18px;
}
.hero__brand {
  font-family: var(--display); font-size: clamp(48px, 8vw, 82px); line-height: 1;
  font-weight: 600; letter-spacing: .06em; color: #F7EFE2;
  text-shadow: 0 2px 26px rgba(44,19,16,.6);
}
.hero__brand span { color: var(--gold-2); }
.hero__sub { font-size: 13px; letter-spacing: .52em; text-transform: uppercase; color: var(--sand); margin-top: 6px; }
.hero__line {
  font-family: var(--display); font-size: clamp(24px, 3.6vw, 38px); line-height: 1.28;
  color: #F7EFE2; margin-top: 24px; font-weight: 500; text-shadow: 0 2px 18px rgba(44,19,16,.55);
}
.hero__cta { margin-top: 30px; pointer-events: auto; display: flex; justify-content: center; }
.hero__rule {
  position: absolute; left: 0; right: 0; bottom: 86px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero__rule-line {
  width: min(560px, 70%); height: 1px; position: relative;
  background: linear-gradient(90deg, transparent, rgba(232,212,180,.6), transparent);
}
.hero__rule-line span {
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  background: #F0DDBC; color: var(--maroon-700); font-size: 13px; padding: 0 10px;
}
.hero__rule-text { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #EFE0C6; }
.hero__count { position: absolute; left: 34px; bottom: 34px; font-size: 13px; letter-spacing: .22em; color: #EFE0C6; }
.hero__scrolldown {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none;
}
.hero__mouse {
  width: 20px; height: 32px; border: 1px solid var(--sand); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 6px;
}
.hero__mouse i { width: 3px; height: 7px; border-radius: 2px; background: var(--sand); animation: yzScroll 1.8s ease-in-out infinite; }
.hero__scrolldown span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
.hero__aside { position: absolute; right: 46px; text-align: right; pointer-events: none; color: #F7EFE2; font-family: var(--display); }
.hero__aside--top { top: 23%; font-size: 28px; line-height: 1.15; }
.hero__aside--bot { bottom: 88px; font-size: 22px; line-height: 1.25; }
.hero__aside i { display: block; width: 34px; height: 2px; background: var(--gold); margin-left: auto; margin-top: 12px; }
.hero__next {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247,239,226,.5);
  background: rgba(44,19,16,.3); color: #F7EFE2; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hero__next:hover { background: var(--maroon-700); }

/* ============================================================== trust bar */
.trust { background: var(--cream-2); padding: 40px 24px 0; }
.trust__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.trust__cell {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 9px; padding: 12px 18px; border-left: 1px solid var(--line-2);
}
.trust__cell:first-child { border-left-color: transparent; }
.trust__cell svg { color: var(--maroon-700); }
.trust__t { font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.trust__s { font-size: 12.5px; color: var(--muted); }
.divider-orn {
  max-width: 1180px; margin: 34px auto 0; position: relative; height: 1px; background: #E3D6C2;
}
.divider-orn span {
  position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
  background: var(--cream-2); color: var(--gold); font-size: 17px; padding: 0 14px;
}

/* ============================================================ collections */
.collections { background: var(--cream-2); padding: 48px 24px 72px; }
.collections__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; margin-top: 44px;
}
.coll { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.coll__ring {
  width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--cream-3); border: 3px solid #EDE0CC; display: block;
}
.coll__ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll__label { font-size: 15px; color: var(--ink); }
.coll__go { font-size: 12.5px; color: var(--maroon-700); letter-spacing: .06em; }
.coll:hover .coll__ring { border-color: var(--gold); }

/* =================================================================== split */
.split { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(320px, 1.28fr); min-height: 420px; }
.split__text {
  background: var(--maroon-850); color: #F7EFE2; padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.split__kicker { font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.split__title { font-family: var(--display); font-style: italic; font-size: clamp(40px, 6vw, 62px); font-weight: 500; line-height: 1; margin-bottom: 18px; }
.split__rule { width: 56px; height: 2px; background: var(--gold); margin-bottom: 24px; }
.split__body { font-size: 15.5px; line-height: 1.8; color: #E3CFB4; margin: 0 0 32px; max-width: 340px; }
.split__media { position: relative; min-height: 420px; background: var(--maroon-700); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.play span {
  width: 74px; height: 74px; border-radius: 50%; border: 1.5px solid rgba(247,239,226,.85);
  display: flex; align-items: center; justify-content: center;
  color: #F7EFE2; font-size: 20px; background: rgba(44,19,16,.22); padding-left: 5px;
}
.split__caption { position: absolute; right: 40px; bottom: 52px; text-align: right; pointer-events: none; }
.split__caption div { font-family: var(--display); font-size: 26px; line-height: 1.2; color: #F7EFE2; }
.split__caption i { display: block; width: 34px; height: 2px; background: var(--gold); margin-left: auto; margin-top: 12px; }

/* ============================================================ product grid */
.section { padding: 76px 24px; }
.section--cream { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }
.section__head { text-align: center; margin-bottom: 40px; position: relative; }
.section__head .link-more { position: absolute; right: 0; top: 14px; }

.pgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pgrid--shop { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 24px; }

.card { display: flex; flex-direction: column; }
.card__media {
  position: relative; display: block; aspect-ratio: 3 / 4;
  background: var(--cream-3); overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.045); }
.card__heart {
  position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #C7B3A8; border: 0; cursor: pointer; padding: 0; line-height: 1;
}
.card__heart.on { color: var(--maroon-700); }
.card__tag {
  position: absolute; top: 11px; left: 0; background: var(--maroon-700); color: #F7EFE2;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; pointer-events: none;
}
.card__sold {
  position: absolute; inset: 0; background: rgba(250,246,241,.72); display: flex;
  align-items: center; justify-content: center; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--maroon-800);
}
.card__body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card__name { font-size: 14.5px; color: var(--ink); }
.card__fabric { font-size: 12px; color: var(--muted); }
.card__price { font-size: 15px; color: var(--maroon-700); font-weight: 500; }
.card__mrp { font-size: 12.5px; color: var(--muted-2); text-decoration: line-through; }
.card__rate { display: flex; align-items: center; gap: 7px; }
.card__stars { color: var(--gold-3); font-size: 12px; letter-spacing: .08em; }
.card__count { font-size: 11.5px; color: var(--muted-2); }
.card__add {
  margin-top: 11px; border: 1px solid var(--line-4); background: transparent; color: var(--maroon-700);
  padding: 11px 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: .18s;
}
.card__add:hover { background: var(--maroon-700); color: #F7EFE2; border-color: var(--maroon-700); }
.card__add[disabled] { opacity: .5; cursor: not-allowed; }

.carousel-btn {
  position: absolute; top: 58%; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #E0D3BE; background: #fff; color: var(--maroon-700); cursor: pointer; font-size: 15px;
}
.carousel-btn:hover { background: var(--maroon-700); color: #F7EFE2; border-color: var(--maroon-700); }
.carousel-btn--prev { left: -22px; }
.carousel-btn--next { right: -22px; }

/* ================================================================= story */
.story { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.3fr) minmax(220px, .75fr); background: var(--cream-2); min-height: 330px; }
.story__media { position: relative; min-height: 330px; background: var(--maroon-800); }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__media .play span { width: 62px; height: 62px; font-size: 17px; }
.story__text { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.story__text h2 { font-family: var(--display); font-size: clamp(30px, 4vw, 40px); font-weight: 500; color: var(--maroon-700); margin: 0; }
.story__text p { font-size: 15.5px; line-height: 1.85; color: var(--body); margin: 0 0 28px; max-width: 440px; }
.promises { padding: 56px 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; border-left: 1px solid #E3D6C2; }
.promises div { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #4A3A34; }
.promises i { color: var(--maroon-500); font-size: 15px; width: 20px; display: flex; justify-content: center; font-style: normal; }

/* ============================================================ testimonial */
.quote { background: var(--cream-2); padding: 72px 24px; position: relative; overflow: hidden; }
.quote__orn { position: absolute; top: 34px; font-size: 82px; color: #EBD9BC; line-height: 1; pointer-events: none; }
.quote__orn--l { left: 36px; }
.quote__orn--r { right: 36px; }
.quote__in { max-width: 720px; margin: 0 auto; text-align: center; position: relative; }
.quote__row { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.quote__mark { font-family: var(--display); font-size: 52px; color: var(--gold); line-height: .7; }
.quote__text { font-size: 18.5px; line-height: 1.75; color: #4A3A34; margin: 0; text-wrap: pretty; }
.quote__who { font-size: 14px; color: var(--maroon-700); margin-top: 20px; }
.quote__dots { display: flex; gap: 9px; justify-content: center; margin-top: 24px; }
.quote__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #DCC9B4; }
.quote__dots button.on { background: var(--maroon-700); }

/* ============================================================= newsletter */
.news { background: var(--maroon-800); color: #F7EFE2; position: relative; overflow: hidden; }
.news__orn { position: absolute; font-size: 180px; color: rgba(201,162,39,.16); line-height: 1; pointer-events: none; }
.news__orn--a { left: -30px; top: -20px; }
.news__orn--b { right: -30px; bottom: -60px; }
.news__in {
  max-width: 1180px; margin: 0 auto; padding: 52px 24px;
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap; position: relative;
}
.news__copy { flex: 1; min-width: 260px; }
.news__h { font-family: var(--display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; margin-bottom: 6px; }
.news__p { font-size: 14.5px; color: #DCC5A6; }
.news__form { display: flex; flex: 0 1 460px; min-width: 260px; }
.news__form input {
  flex: 1; min-width: 0; border: 0; padding: 15px 18px; font-size: 14px; outline: 0;
  background: var(--cream); color: var(--ink);
}
.news__form button {
  border: 0; background: var(--gold); color: var(--maroon-900); padding: 0 30px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.news__form button:hover { background: var(--gold-2); }

/* =================================================================== shop */
.shop { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
.filters { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 30px; }
.filters__h {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon-800);
  margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px;
}
.filters__list { display: flex; flex-direction: column; }
.filters__list button {
  text-align: left; border: 0; background: transparent; padding: 8px 0; font-size: 14px;
  cursor: pointer; color: #4A3A34; display: flex; justify-content: space-between;
}
.filters__list button:hover { color: var(--maroon-700); }
.filters__list button.on { color: var(--maroon-700); font-weight: 500; }
.filters__list button i { color: var(--muted-3); font-size: 12px; font-style: normal; }
.filters input[type="range"] { width: 100%; accent-color: var(--maroon-700); }
.filters__val { font-size: 13px; color: #6F5C55; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  border: 1px solid var(--line-2); background: transparent; color: var(--body);
  border-radius: 999px; padding: 7px 14px; font-size: 12px; cursor: pointer;
}
.chips button.on { border-color: var(--maroon-700); background: var(--maroon-700); color: #F7EFE2; }
.filters__clear {
  border: 0; background: transparent; color: var(--muted-2); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer; padding: 0;
}
.filters__clear:hover { color: var(--maroon-700); }
.sortbar { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.sortbar select {
  border: 1px solid var(--line-2); background: #fff; padding: 10px 14px;
  font-size: 13px; color: var(--ink); outline: 0; cursor: pointer;
}
.filters__toggle { display: none; }

.empty { padding: 80px 0; text-align: center; color: var(--muted); }
.empty__h { font-family: var(--display); font-size: 28px; color: var(--maroon-800); margin-bottom: 8px; }

/* ================================================================ product */
.pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 60px; align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 13px; }
.pdp__thumbs { display: flex; flex-direction: column; gap: 11px; }
.pdp__thumb { width: 70px; height: 93px; background: var(--cream-3); border: 1px solid transparent; padding: 0; cursor: pointer; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb.on { border-color: var(--maroon-700); }
.pdp__main { aspect-ratio: 3 / 4; background: var(--cream-3); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__cat { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.pdp h1 { font-family: var(--display); font-size: clamp(32px, 4.6vw, 44px); font-weight: 500; margin: 12px 0 8px; color: var(--maroon-800); line-height: 1.1; }
.pdp__rate { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.pdp__prices { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.pdp__price { font-size: 26px; color: var(--maroon-700); }
.pdp__mrp { font-size: 16px; color: var(--muted-2); text-decoration: line-through; }
.pdp__off { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #2E6B4F; }
/* pre-line keeps the paragraph breaks that come from imported descriptions;
   the text is escaped, so newlines are the only formatting that survives. */
.pdp__desc { font-size: 15.5px; line-height: 1.8; color: var(--body); margin: 0 0 26px; max-width: 520px; white-space: pre-line; }
.pdp__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon-800); margin-bottom: 11px; }
.sizes { display: flex; gap: 9px; flex-wrap: wrap; }
.sizes button {
  min-width: 50px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  padding: 11px 13px; font-size: 13px; cursor: pointer;
}
.sizes button.on { border-color: var(--maroon-700); background: var(--maroon-700); color: #F7EFE2; }
.sizes button[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.stitch-opt {
  display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--line-2);
  background: var(--cream-2); padding: 17px; margin: 22px 0; cursor: pointer;
}
.stitch-opt input { margin-top: 3px; accent-color: var(--maroon-700); width: 17px; height: 17px; }
.stitch-opt b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; font-weight: 400; }
.stitch-opt small { display: block; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pdp__buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 26px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--line-4); }
.qty button { border: 0; background: transparent; padding: 0 15px; height: 52px; font-size: 18px; cursor: pointer; color: var(--maroon-800); }
.qty span { min-width: 34px; text-align: center; font-size: 15px; }
.pdp__addbtn { flex: 1; min-width: 210px; height: 52px; padding: 0 24px; }
.pdp__wishbtn {
  width: 52px; height: 52px; border: 1px solid var(--line-4); background: transparent;
  color: #C7B3A8; font-size: 17px; cursor: pointer;
}
.pdp__wishbtn.on { color: var(--maroon-700); }
.facts { border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt, .facts .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts .v { font-size: 14px; color: var(--ink-2); }
.stock-note { font-size: 13px; margin-bottom: 18px; }
.stock-note.low { color: #A8560F; }
.stock-note.out { color: var(--maroon-700); }
.stock-note.ok { color: #2E6B4F; }

.related-h {
  font-family: var(--display); font-size: 34px; font-weight: 500; color: var(--maroon-800);
  margin: 84px 0 26px; border-bottom: 1px solid var(--line); padding-bottom: 16px;
}

/* =================================================================== cart */
.cart { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .9fr); gap: 44px; align-items: start; }
.line {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.line__img { width: 104px; height: 139px; background: var(--cream-3); }
.line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.line__name { font-family: var(--display); font-size: 22px; color: var(--ink); }
.line__meta { font-size: 12px; color: var(--muted); }
.line__price { font-size: 15px; color: var(--maroon-700); margin-top: 2px; }
.line__ctrl { display: flex; align-items: center; gap: 18px; margin-top: 11px; flex-wrap: wrap; }
.qty--sm { border-color: #D8C8B0; }
.qty--sm button { height: 36px; padding: 0 13px; font-size: 16px; }
.qty--sm span { min-width: 26px; font-size: 14px; }
.line__rm {
  border: 0; background: transparent; color: var(--muted-2); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 0;
}
.line__rm:hover { color: var(--maroon-700); }
.line__total { font-size: 17px; color: var(--ink); white-space: nowrap; }

.summary { background: #fff; border: 1px solid var(--line); padding: 28px; position: sticky; top: 92px; }
.summary--flat { background: var(--cream-2); border: 0; }
.summary__h { font-family: var(--display); font-size: 25px; color: var(--maroon-800); margin-bottom: 20px; }
.summary__rows { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #6F5C55; }
.summary__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.summary__rows b { color: var(--ink); font-weight: 400; }
.summary__rows .free { color: #2E6B4F; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px;
}
.summary__total span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--maroon-800); }
.summary__total b { font-family: var(--display); font-size: 31px; color: var(--maroon-700); font-weight: 500; }
.coupon { display: flex; gap: 8px; margin-top: 20px; }
.coupon input { flex: 1; min-width: 0; border: 1px solid var(--line-2); padding: 12px 14px; font-size: 13px; outline: 0; }
.coupon button {
  border: 1px solid var(--line-4); background: transparent; color: var(--maroon-800);
  padding: 0 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.summary__note { font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 13px; line-height: 1.7; }

.hollow { border: 1px solid var(--line); background: #fff; padding: 72px 24px; text-align: center; }
.hollow__h { font-family: var(--display); font-size: 29px; color: var(--maroon-800); margin-bottom: 10px; }
.hollow p { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; }

/* =============================================================== checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 44px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); padding: 26px; }
.panel__h { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line-2); padding: 13px 14px; font-size: 14px; outline: 0;
  background: var(--cream-4); color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--maroon-700); }
.field textarea { resize: vertical; font-family: var(--sans); }
.field--wide { grid-column: 1 / -1; }
.pays { display: flex; flex-direction: column; gap: 10px; }
.pays button {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--line); background: #fff; padding: 16px 18px; cursor: pointer; width: 100%;
}
.pays button.on { border-color: var(--maroon-700); background: #FBF4EC; }
.pays i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #C7B3A8; flex: 0 0 auto; }
.pays button.on i { border-color: var(--maroon-700); background: var(--maroon-700); }
.pays b { font-size: 15px; color: var(--ink); font-weight: 400; display: block; }
.pays small { font-size: 12px; color: var(--muted); }

/* ================================================================= bridal */
.banner { background: var(--maroon-800); color: #F7EFE2; padding: 78px 24px; position: relative; overflow: hidden; }
.banner__orn { position: absolute; left: -30px; top: -30px; font-size: 190px; color: rgba(201,162,39,.14); line-height: 1; pointer-events: none; }
.banner__in { max-width: 800px; margin: 0 auto; text-align: center; position: relative; }
.banner__kicker { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.banner h1 { font-family: var(--display); font-size: clamp(36px, 6vw, 56px); font-weight: 500; margin: 16px 0; line-height: 1.05; }
.banner p { font-size: 16.5px; line-height: 1.8; color: #E3CFB4; margin: 0; }
.bridal { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 52px; align-items: start; }
.works { display: grid; gap: 11px; }
.works button {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: left;
  border: 1px solid var(--line); background: #fff; padding: 19px 21px; cursor: pointer; width: 100%;
}
.works button.on { border-color: var(--maroon-700); background: #FBF4EC; }
.works b { font-family: var(--display); font-size: 22px; color: var(--ink); font-weight: 500; display: block; }
.works small { font-size: 13px; color: var(--muted); line-height: 1.6; }
.works span.price { font-size: 16px; color: var(--maroon-700); white-space: nowrap; }
.bring { background: var(--cream-2); padding: 24px; }
.bring div { display: flex; gap: 12px; font-size: 14px; color: #4A3A34; line-height: 1.6; margin-bottom: 10px; }
.bring i { color: var(--gold); font-style: normal; }
.formcard { background: #fff; border: 1px solid var(--line); padding: 32px; }
.formcard__h { font-family: var(--display); font-size: 29px; color: var(--maroon-800); margin-bottom: 22px; }
.est {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px;
}
.est span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon-800); }
.est b { font-family: var(--display); font-size: 29px; color: var(--maroon-700); font-weight: 500; }

/* ============================================================ size guide */
.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; align-items: start; }
.measures { border-top: 1px solid var(--line); }
.measures div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.measures b { font-family: var(--display); font-size: 21px; color: var(--ink); margin-bottom: 5px; display: block; font-weight: 500; }
.measures p { font-size: 14px; line-height: 1.7; color: #6F5C55; margin: 0; }
.guide__side { position: sticky; top: 92px; }
.guide__img { aspect-ratio: 3 / 4; background: var(--cream-3); }
.guide__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide__note { background: var(--cream-2); padding: 22px; margin-top: 16px; font-size: 14px; line-height: 1.7; color: #4A3A34; }

/* ================================================================== about */
.about-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); min-height: 500px; }
.about-hero__text { padding: 80px 52px; display: flex; flex-direction: column; justify-content: center; background: var(--cream-2); }
.about-hero__text h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 54px); font-weight: 500; margin: 0 0 20px; color: var(--maroon-800); line-height: 1.05; }
.about-hero__text p { font-size: 16.5px; line-height: 1.85; color: var(--body); max-width: 480px; margin: 0; }
.about-hero__media { min-height: 320px; position: relative; }
.about-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 38px; }
.values div { border-top: 2px solid var(--gold); padding-top: 20px; }
.values b { font-family: var(--display); font-size: 26px; color: var(--maroon-800); margin-bottom: 9px; display: block; font-weight: 500; }
.values p { font-size: 14.5px; line-height: 1.8; color: #6F5C55; margin: 0; }

/* ================================================================ contact */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 44px; align-items: start; }
.cblocks { display: flex; flex-direction: column; gap: 26px; }
.cblock { border-top: 1px solid var(--line); padding-top: 17px; }
.cblock__k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.cblock__v { font-size: 16.5px; line-height: 1.8; color: var(--ink-2); white-space: pre-line; }

/* ============================================================== tracking */
.track { max-width: 520px; margin: 0 auto; padding: 72px 24px 110px; }
.timeline { border-left: 2px solid var(--line); margin-top: 24px; padding-left: 22px; }
.timeline div { position: relative; padding-bottom: 22px; }
.timeline div::before {
  content: ''; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--cream);
}
.timeline b { display: block; font-size: 14px; color: var(--maroon-800); text-transform: capitalize; }
.timeline small { font-size: 12.5px; color: var(--muted); }

.status-pill {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: var(--cream-3); color: var(--maroon-800);
}

/* ============================================================= thank-you */
.thanks { max-width: 640px; margin: 0 auto; padding: 90px 24px 120px; text-align: center; }
.thanks__mark {
  width: 74px; height: 74px; border-radius: 50%; border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;
  color: var(--maroon-700); font-size: 30px;
}
.thanks__no {
  font-family: var(--display); font-size: 30px; color: var(--maroon-700);
  letter-spacing: .08em; margin: 16px 0;
}

/* ================================================================= toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px);
  background: var(--maroon-900); color: #F7EFE2; padding: 15px 28px; font-size: 14px;
  letter-spacing: .05em; z-index: 200; box-shadow: var(--shadow); opacity: 0;
  pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { animation: yzToast 2.8s ease forwards; }
.toast.err { background: #6B1116; }

/* =============================================================== loading */
.loading { padding: 120px 24px; text-align: center; color: var(--muted); }
.spinner {
  width: 26px; height: 26px; border: 2px solid var(--line-2); border-top-color: var(--maroon-700);
  border-radius: 50%; margin: 0 auto 14px; animation: yzSpin .8s linear infinite;
}
.formerr {
  background: #FBEAEA; border: 1px solid #E8BFBF; color: #8C1C24;
  padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.6;
}
.formok {
  background: #EAF4EE; border: 1px solid #BEDCC9; color: #1F5B3C;
  padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.6;
}

/* ========================================================== breakpoints */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .split__text { padding: 48px 32px; }
  .story { grid-template-columns: 1fr; }
  .promises { border-left: 0; border-top: 1px solid #E3D6C2; padding: 32px 40px; }
  .hero__aside { display: none; }
  .carousel-btn--prev { left: -8px; }
  .carousel-btn--next { right: -8px; }
}

@media (max-width: 900px) {
  .hdr__in { flex-wrap: wrap; gap: 14px; }
  .hdr__burger { display: flex; order: 3; margin-left: auto; }
  .hdr__tools { order: 2; margin-left: auto; gap: 14px; }
  .nav {
    order: 4; flex-basis: 100%; margin-left: 0; display: none;
    flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 8px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--line-3); }
  .nav a.is-active { border-bottom-color: var(--gold); }
  .search input { width: 84px; }

  .shop { grid-template-columns: 1fr; gap: 24px; }
  .filters { position: static; display: none; }
  .filters.open { display: flex; }
  .filters__toggle {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2);
    background: #fff; padding: 11px 18px; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; cursor: pointer; color: var(--maroon-800); margin-bottom: 16px;
  }
  .cart, .checkout { grid-template-columns: 1fr; gap: 28px; }
  .summary { position: static; }
  .guide__side { position: static; }
  .pdp { gap: 34px; }
  .about-hero__text { padding: 52px 28px; }
  .story__text { padding: 40px 28px; }
  .section__head .link-more { position: static; display: inline-block; margin-top: 12px; }
}

@media (max-width: 640px) {
  .announce__right { display: none; }
  .announce__in { justify-content: center; padding: 8px 16px; }
  .announce__list { gap: 12px; font-size: 11.5px; }
  .announce__list span:nth-child(n + 4) { display: none; }
  .hdr__in { padding: 10px 16px; }
  .pad { padding-left: 16px; padding-right: 16px; }
  .section { padding: 52px 16px; }
  .trust, .collections { padding-left: 16px; padding-right: 16px; }
  .hero__count, .hero__rule { display: none; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .pgrid--shop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; order: 2; }
  .line { grid-template-columns: 78px minmax(0, 1fr); }
  .line__img { width: 78px; height: 104px; }
  .line__total { grid-column: 2; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .quote__orn { display: none; }
  .news__form { flex-direction: column; }
  .news__form button { padding: 15px 30px; }
  .trust__cell { border-left: 0; }
  .carousel-btn { display: none; }
  .formcard, .panel { padding: 20px; }
  .toast { bottom: 16px; }
}

/* ===========================================================================
   Motion layer
   ---------------------------------------------------------------------------
   House style: slow, small, gold. Nothing bounces and nothing flies in from
   off screen. Distance stays under ~24px and every curve decelerates, so the
   page reads like cloth settling rather than a UI animating.

   Everything here switches off wholesale under prefers-reduced-motion at the
   foot of this file. Keep additions inside that contract: never put a state
   change (visibility, layout, or colour that carries meaning) behind an
   animation alone, or the reduced-motion path loses it.
   =========================================================================== */

:root {
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-back: cubic-bezier(.34, 1.3, .64, 1);
}

/* ------------------------------------------------------------ scroll reveal */
/* JS adds .reveal, then .in once the element enters the viewport. Without JS
   nothing is ever given .reveal, so the page stays visible — this is additive
   decoration, never the thing that makes content appear. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease-soft), transform .75s var(--ease-soft);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* Drop the hint once played, so later hover transforms stay cheap. */
.reveal.done { will-change: auto; transition-delay: 0ms; }

@keyframes yzRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes yzKen  { from { transform: scale(1); } to { transform: scale(1.085); } }
@keyframes yzPop  { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes yzShimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }

/* -------------------------------------------------------------------- hero */
/* A slow push on the hero photograph — 14s, so it reads as depth not motion. */
.hero__img { animation: yzKen 14s ease-out both; transform-origin: 58% 42%; }

/* The existing .hero__anim fade stays; these stagger the lines within it. */
.hero__anim .hero__kicker { animation: yzRise .9s var(--ease-soft) .10s both; }
.hero__anim .hero__brand  { animation: yzRise .9s var(--ease-soft) .18s both; }
.hero__anim .hero__sub    { animation: yzRise .9s var(--ease-soft) .26s both; }
.hero__anim .hero__line   { animation: yzRise .9s var(--ease-soft) .36s both; }
.hero__anim .hero__cta    { animation: yzRise .9s var(--ease-soft) .48s both; }

.hero__next { transition: background .25s, transform .25s var(--ease-soft), border-color .25s; }
.hero__next:hover { transform: translateY(-50%) scale(1.09); }

/* ------------------------------------------------------------ section heads */
/* A gold rule that draws itself beneath each section title on arrival. */
.section__head::after {
  content: ''; display: block; width: 54px; height: 2px; margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .8s var(--ease-soft) .15s;
}
.section__head.in::after { transform: scaleX(1); }

/* ------------------------------------------------------------- product card */
.card { transition: transform .45s var(--ease-soft); }
.card:hover { transform: translateY(-6px); }

.card__media { box-shadow: 0 0 0 rgba(58, 14, 18, 0); transition: box-shadow .45s var(--ease-soft); }
.card:hover .card__media { box-shadow: 0 18px 38px rgba(58, 14, 18, .17); }

/* Deepen and slow the existing zoom, so it reads as a considered look. */
.card__media img { transition: transform .9s var(--ease-soft); }
.card:hover .card__media img { transform: scale(1.075); }

/* A warm wash lifting off the photograph on hover. Decorative only. */
.card__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(58,14,18,.26), transparent 52%);
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.card:hover .card__media::after { opacity: 1; }
/* Keep the sold-out veil and its label above the wash. */
.card__sold { z-index: 2; }
.card__tag, .card__heart { z-index: 3; }

/* Gold underline growing beneath the product name. */
.card__name { position: relative; display: inline-block; }
.card__name::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-soft);
}
.card:hover .card__name::after { transform: scaleX(1); }

.card__heart { transition: transform .3s var(--ease-back), color .25s, background .25s; }
.card__heart:hover { transform: scale(1.14); background: #fff; }
.card__heart.pulse { animation: yzPop .45s var(--ease-back); }

/* Add to cart: the fill sweeps in from the left rather than snapping on. */
.card__add { position: relative; overflow: hidden; z-index: 0; }
.card__add::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--maroon-700);
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease-soft);
}
.card__add:hover:not([disabled])::before { transform: scaleX(1); }
.card__add:hover:not([disabled]) { border-color: var(--maroon-700); }

/* --------------------------------------------------------- collection tiles */
.coll__ring { transition: border-color .4s, transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft); }
.coll__ring img { transition: transform .9s var(--ease-soft); }
.coll:hover .coll__ring { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(58,14,18,.16); }
.coll:hover .coll__ring img { transform: scale(1.09); }
.coll__go { opacity: .72; transform: translateY(-2px); transition: opacity .35s, transform .35s var(--ease-soft); }
.coll:hover .coll__go { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- nav links */
/* .nav a already reserves a 1.5px transparent bottom border and marks the
   active link in gold. This only animates the hover state into that reserved
   space, so nothing shifts and the active link keeps its own styling. */
.nav a { position: relative; }
.nav a:not(.is-active)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px;
  background: var(--maroon-700); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-soft);
}
.nav a:not(.is-active):hover::after { transform: scaleX(1); transform-origin: left; }

/* ------------------------------------------------------------------ buttons */
.btn--primary {
  position: relative; overflow: hidden;
  transition: background .25s, color .25s, border-color .25s,
              transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(58,14,18,.22); }
/* A single gold pass, like light catching zari. */
.btn--primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(232,212,180,.42), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.btn--primary:hover::after { transition: transform .75s var(--ease-soft); transform: translateX(320%) skewX(-18deg); }

/* ---------------------------------------------------------- loading shimmer */
.skel {
  background: linear-gradient(90deg, var(--cream-3) 8%, var(--cream-4) 22%, var(--cream-3) 36%);
  background-size: 620px 100%;
  animation: yzShimmer 1.5s linear infinite;
}

/* ------------------------------------------------------------- product page */
.pdp__thumbs img { transition: transform .5s var(--ease-soft), border-color .3s; }
.pdp__thumbs img:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ reduced motion */
/* One switch. Everything above degrades to the static, fully visible page. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section__head::after { transform: scaleX(1) !important; transition: none !important; }
  .hero__img,
  .hero__anim .hero__kicker, .hero__anim .hero__brand, .hero__anim .hero__sub,
  .hero__anim .hero__line, .hero__anim .hero__cta,
  .card__heart.pulse, .skel { animation: none !important; }
  .card:hover, .btn--primary:hover, .hero__next:hover,
  .coll:hover .coll__ring, .pdp__thumbs img:hover { transform: none !important; }
  .card:hover .card__media img, .coll:hover .coll__ring img { transform: none !important; }
  .btn--primary::after { display: none; }
}

/* ===========================================================================
   Home page interaction
   Hero slideshow, arrivals rail, condensing header, back-to-top.
   Paired with the handlers in app.js, which update these in place rather than
   re-rendering the view.
   =========================================================================== */

/* ------------------------------------------------------------ hero slides */
/* Every slide is in the DOM, stacked; only .is-on is opaque. Crossfading two
   layers avoids the white flash of swapping one <img> src. */
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Product photography is portrait; in a wide banner the interesting part
     (face, blouse, upper drape) sits in the top third, so bias the crop up. */
  object-position: center 12%;
  opacity: 0; transition: opacity 1.1s var(--ease-soft);
  animation: none;
}
.hero__img.is-on { opacity: 1; animation: yzKen 9s ease-out both; }

.hero__dots {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 4;
}
.hero__dots button {
  width: 28px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(247,239,226,.38); transition: background .35s, transform .35s var(--ease-soft);
}
.hero__dots button:hover { transform: scaleY(2); }
.hero__dots button.on { background: var(--gold-2); transform: scaleY(2); }

.hero__prev {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247,239,226,.5);
  background: rgba(44,19,16,.3); color: #F7EFE2; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 4;
  transition: background .25s, transform .25s var(--ease-soft);
}
.hero__prev:hover { background: var(--maroon-700); transform: translateY(-50%) scale(1.09); }

/* Re-running this on the text wrapper replays the staggered entrance. */
.hero__anim.replay { animation: none; }

/* ------------------------------------------------------------ arrivals rail */
/* A real horizontal rail: scroll-snapped, touch-swipeable, arrow driven.
   Five across on desktop, fewer as the viewport narrows. */
.arr-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 22px) / 5);
  gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.arr-rail::-webkit-scrollbar { display: none; }
.arr-rail > * { scroll-snap-align: start; }
@media (max-width: 1080px) { .arr-rail { grid-auto-columns: calc((100% - 3 * 22px) / 4); } }
@media (max-width: 860px)  { .arr-rail { grid-auto-columns: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 640px)  { .arr-rail { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 420px)  { .arr-rail { grid-auto-columns: 78%; } }

/* Arrows fade out at the ends rather than dead-clicking. */
.carousel-btn { transition: opacity .3s, background .25s, color .25s, transform .25s var(--ease-soft); z-index: 3; }
.carousel-btn:hover { transform: scale(1.08); }
.carousel-btn[data-end="1"] { opacity: .28; pointer-events: none; }

/* ------------------------------------------------------- condensing header */
.hdr { transition: padding .3s var(--ease-soft), box-shadow .3s, background .3s; }
.hdr.is-stuck { box-shadow: 0 6px 22px rgba(58,14,18,.09); background: rgba(250,246,241,.99); }
.hdr.is-stuck .hdr__in { padding-top: 6px; padding-bottom: 6px; }
.hdr__in { transition: padding .3s var(--ease-soft); }
.hdr.is-stuck .hdr__logo img { height: 34px; }
.hdr__logo img { transition: height .3s var(--ease-soft); }

/* --------------------------------------------------------------- back to top */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-4); background: var(--maroon-700); color: #F7EFE2;
  font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft), background .25s;
  box-shadow: 0 10px 26px rgba(58,14,18,.26);
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--maroon-800); transform: translateY(-3px); }

/* ------------------------------------------------------------ testimonials */
.quote__body { transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft); }
.quote__body.swap { opacity: 0; transform: translateY(8px); }
.quote__dots button { transition: background .3s, transform .3s var(--ease-soft); }
.quote__dots button:hover { transform: scale(1.35); }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__img { transition: none !important; }
  .hero__img.is-on { animation: none !important; }
  .arr-rail { scroll-behavior: auto !important; }
  .totop { transition: none !important; }
  .hero__dots button, .hero__dots button.on { transform: none !important; }
  .carousel-btn:hover, .hero__prev:hover, .quote__dots button:hover { transform: translateY(-50%) !important; }
  .quote__body { transition: none !important; }
}

/* ===========================================================================
   Footer
   The markup in index.html had no rules at all, so the 4287px-wide logo was
   filling the page width and the link groups stacked as plain text. Four
   columns on desktop, collapsing to two and then one.
   =========================================================================== */
.ftr {
  background: var(--cream-2);
  border-top: 1px solid var(--line-3);
  margin-top: 8px;
}
.ftr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 44px;
  display: grid; gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
  align-items: start;
}

/* The source image is 4287x1288. Constrain by height and let width follow. */
.ftr__logo {
  height: 52px; width: auto; max-width: 220px; object-fit: contain;
  display: block; mix-blend-mode: multiply;
}
.ftr__tag { font-size: 13.5px; color: var(--body); margin-top: 14px; }

.ftr__social { display: flex; gap: 12px; margin-top: 18px; }
.ftr__social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--maroon-700);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-soft);
}
.ftr__social a:hover {
  background: var(--maroon-700); color: #F7EFE2;
  border-color: var(--maroon-700); transform: translateY(-3px);
}

.ftr__h {
  font-family: var(--display); font-size: 17px; font-weight: 500;
  color: var(--maroon-800); margin-bottom: 16px; letter-spacing: .03em;
}
.ftr__links { display: flex; flex-direction: column; gap: 10px; }
.ftr__links a {
  font-size: 13.5px; color: var(--body); width: fit-content; position: relative;
  transition: color .25s, transform .25s var(--ease-soft);
}
.ftr__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-soft);
}
.ftr__links a:hover { color: var(--maroon-700); transform: translateX(3px); }
.ftr__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.ftr__contact { display: flex; flex-direction: column; gap: 12px; }
.ftr__contact > span {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--body);
}
.ftr__contact svg { flex: 0 0 auto; }

.wa {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 11px 18px; border: 1px solid var(--line-4); background: #fff;
  color: var(--maroon-700); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-soft);
}
.wa:hover {
  background: var(--maroon-700); color: #F7EFE2;
  border-color: var(--maroon-700); transform: translateY(-2px);
}

.ftr__bar { background: var(--maroon-800); color: #E7D3B4; }
.ftr__bar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 12.5px; letter-spacing: .04em;
}

@media (max-width: 1000px) {
  .ftr__in { grid-template-columns: 1fr 1fr; gap: 34px; padding: 44px 20px 36px; }
}
@media (max-width: 560px) {
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__bar-in { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ftr__social a:hover, .ftr__links a:hover, .wa:hover { transform: none !important; }
}

/* ===========================================================================
   3D layer
   ---------------------------------------------------------------------------
   Real perspective transforms, no WebGL and no library — the CSP here is
   script-src 'self', and this codebase deliberately has no build step, so a
   vendored Three.js would be a large dependency for decoration.

   The card tilts toward the cursor on a 1100px perspective, its photo sits
   forward of the text on the Z axis, and a specular sheen tracks the pointer.
   Angles stay under 7 degrees: enough to read as depth, not enough to make a
   saree look like it is falling over.
   =========================================================================== */

/* The perspective lives on the grid, so neighbouring cards share one vanishing
   point and the row tilts like a single surface rather than 20 separate ones. */
.pgrid, .arr-rail, .collections__grid { perspective: 1100px; }

.card {
  transform-style: preserve-3d;
  will-change: auto;
}
/* While the pointer is moving the transform is written inline by JS; this
   short transition keeps that from looking stepped without lagging the
   cursor. The longer curve on release lets the card settle back. */
.card.is-tilting { transition: transform .1s linear; will-change: transform; }
.card.is-resting { transition: transform .65s var(--ease-soft); }

/* Depth inside the card. The photo sits forward, the text further forward
   still, so the layers separate as the card turns. */
.card.is-tilting .card__media,
.card.is-resting .card__media { transform: translateZ(26px); }
.card.is-tilting .card__body,
.card.is-resting .card__body { transform: translateZ(38px); }
.card__media, .card__body { transition: transform .5s var(--ease-soft); }

/* Specular sheen: a soft highlight that follows the pointer across the photo,
   like light moving over silk. --mx/--my are set by JS in percent. */
.card__media::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 248, 232, .30), rgba(255, 248, 232, .06) 42%, transparent 68%);
  opacity: 0; transition: opacity .35s var(--ease-soft);
  mix-blend-mode: soft-light;
}
.card.is-tilting .card__media::before { opacity: 1; }

/* A deeper, offset shadow while tilted sells the lift off the page. */
.card.is-tilting .card__media { box-shadow: 0 26px 50px rgba(58, 14, 18, .26); }

/* ---------------------------------------------------- collection tiles in 3D */
.coll { transform-style: preserve-3d; }
.coll__ring { transform-style: preserve-3d; }
.coll.is-tilting { transition: transform .1s linear; }
.coll.is-resting { transition: transform .6s var(--ease-soft); }
.coll.is-tilting .coll__label,
.coll.is-tilting .coll__go { transform: translateZ(30px); }
.coll__label, .coll__go { transition: transform .5s var(--ease-soft); }

/* ------------------------------------------------------------- hero parallax */
/* Three planes at different depths. JS writes --px/--py (-1..1) from the
   pointer; each layer multiplies them differently, so the banner gains
   parallax depth as the cursor crosses it. */
.hero { perspective: 900px; }
.hero__img.is-on {
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) scale(1.06);
  transition: transform .5s cubic-bezier(.16, .8, .3, 1);
}
.hero__mid {
  transform: translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 11px), 0);
  transition: transform .45s cubic-bezier(.16, .8, .3, 1);
}
.hero__aside {
  transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px), 0);
  transition: transform .4s cubic-bezier(.16, .8, .3, 1);
}
/* The Ken Burns keyframes and this parallax both drive transform on the same
   element, so the slide push is disabled while parallax is active. */
.hero.has-parallax .hero__img.is-on { animation: none; }

/* --------------------------------------------------------- reduced motion /
   coarse pointers. Tilt is opt-in from JS, which never arms it on touch or
   under reduced motion; these rules make the CSS side inert as well. */
@media (prefers-reduced-motion: reduce) {
  .card.is-tilting, .card.is-resting, .coll.is-tilting, .coll.is-resting {
    transform: none !important; transition: none !important;
  }
  .card__media, .card__body, .coll__label, .coll__go { transform: none !important; }
  .card__media::before { display: none; }
  .hero__img.is-on, .hero__mid, .hero__aside { transform: none !important; }
}
@media (hover: none) {
  .card__media::before { display: none; }
  .hero__img.is-on, .hero__mid, .hero__aside { transform: none; }
}

/* -------------------------------------------------------------- checkout OTP */
.otp__lede { font-size: 13.5px; color: var(--body); margin: 0 0 14px; }
.otp__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.otp__row input {
  border: 1px solid var(--line-2); background: #fff; padding: 13px 16px;
  font-size: 16px; letter-spacing: .34em; width: 170px; color: var(--ink);
  font-family: 'Courier New', monospace;
}
.otp__row input:focus-visible { outline: 2px solid var(--maroon-700); outline-offset: 1px; }
.otp__msg { font-size: 13px; margin-top: 12px; min-height: 18px; }
.otp__msg--ok  { color: #2E7D32; }
.otp__msg--err { color: var(--maroon-700); }
.otp.is-verified .otp__lede { color: #2E7D32; }
.otp.is-verified::before {
  content: '✓'; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #2E7D32; color: #fff;
  font-size: 14px; margin-bottom: 10px;
}

/* ------------------------------------------------------------ account / auth */
.authcard {
  max-width: 460px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); padding: 40px 36px;
}
.formok { color: #2E7D32; font-size: 13.5px; }

.acct__grid { display: grid; grid-template-columns: 320px 1fr; gap: 26px; margin-top: 30px; }
.acct__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 14px;
}
.acct__row:last-of-type { border-bottom: 0; }
.acct__row span { color: var(--muted); }
.acct__row b { font-weight: 500; color: var(--ink); text-align: right; word-break: break-word; }

.acct__orders { display: flex; flex-direction: column; }
.acct__order {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line-3); color: inherit;
  transition: padding-left .25s var(--ease-soft);
}
.acct__order:last-child { border-bottom: 0; }
.acct__order:hover { padding-left: 6px; }
.acct__no { font-size: 14px; letter-spacing: .06em; color: var(--maroon-700); }
.acct__when { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.acct__total { font-size: 14.5px; font-weight: 500; }
.acct__status {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}
.acct__status--delivered { color: #2E7D32; }
.acct__status--cancelled, .acct__status--returned { color: var(--maroon-700); }

/* A filled icon marks a signed-in visitor. */
#acctLink.is-on svg { fill: rgba(122, 26, 32, .12); }

@media (max-width: 760px) {
  .acct__grid { grid-template-columns: 1fr; }
  .authcard { padding: 30px 22px; }
}

/* ---------------------------------------------------------------- policies */
.policy__lede {
  font-size: 15.5px; line-height: 1.8; color: var(--body);
  max-width: 620px; margin: 14px 0 6px;
}
.policy { max-width: 680px; margin-top: 30px; }
.policy__s { margin-bottom: 30px; }
.policy__s h2 {
  font-family: var(--display); font-size: 21px; font-weight: 500;
  color: var(--maroon-800); margin: 0 0 10px;
}
.policy__s p { font-size: 15px; line-height: 1.85; color: var(--body); margin: 0 0 12px; }
.policy__s ul { margin: 0 0 12px; padding-left: 20px; }
.policy__s li { font-size: 15px; line-height: 1.85; color: var(--body); margin-bottom: 5px; }
.policy__foot {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-3);
  font-size: 13px; color: var(--muted); max-width: 680px;
}