/* EnnyCrochet — pure luxury theme. Palette sampled from the brand flyer. */
:root {
  --maroon: #4D0918;
  --plum: #8E0843;
  --orchid: #8C0468;
  --magenta: #B00854;
  --blush: #F8A8D8;
  --blush-soft: #FCE4F2;
  --stone: #E7E3E4;
  --ivory: #FBF7F5;
  --paper: #FFFFFF;
  --ink: #2A1A21;
  --muted: #7A6670;
  --hair: rgba(77, 9, 24, .14);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --wrap: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--magenta); display: block; margin-bottom: 18px;
}
.script { font-family: var(--script); font-weight: 400; color: var(--magenta); font-size: 1.6em; line-height: 1; }
.rule { width: 56px; height: 1px; background: var(--magenta); border: 0; margin: 22px 0; }
.rule.center { margin-inline: auto; }

/* ---------- announcement + header ---------- */
.announce { background: var(--maroon); color: var(--blush); text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; padding: 10px 16px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 245, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.nav { display: flex; gap: 34px; }
.nav a, .header-actions a { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; position: relative; padding: 6px 0; }
.nav a::after, .header-actions a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--magenta); transition: width .35s var(--ease); }
.nav a:hover::after, .header-actions a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.logo { text-align: center; line-height: 1; }
.logo .mark { font-family: var(--serif); font-size: 30px; letter-spacing: .34em; font-weight: 500; color: var(--maroon); padding-left: .34em; }
.logo .mark b { color: var(--magenta); font-weight: 500; }
.logo small { display: block; font-size: 8px; letter-spacing: .5em; text-transform: uppercase; color: var(--muted); margin-top: 6px; padding-left: .5em; }
.header-actions { display: flex; justify-content: flex-end; gap: 28px; align-items: center; }
.bag-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--plum); color: #fff; font-size: 10px; letter-spacing: 0; margin-left: 6px; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; justify-self: start; }
.menu-toggle span { display: block; width: 22px; height: 1px; background: var(--maroon); margin: 6px 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; padding: 18px 34px; border: 1px solid var(--plum); background: var(--plum); color: #fff; cursor: pointer; transition: all .35s var(--ease); border-radius: 0; }
.btn:hover { background: var(--maroon); border-color: var(--maroon); }
.btn.ghost { background: transparent; color: var(--plum); }
.btn.ghost:hover { background: var(--plum); color: #fff; }
.btn.light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn.light:hover { background: #fff; color: var(--maroon); border-color: #fff; }
.btn.blush { background: var(--blush); border-color: var(--blush); color: var(--maroon); }
.btn.blush:hover { background: #fff; border-color: #fff; }
.btn.block { width: 100%; }
.link-arrow { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 4px; color: var(--plum); }
.link-arrow:hover { color: var(--magenta); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--maroon); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 600px at 82% 40%, rgba(176, 8, 84, .55), transparent 70%), radial-gradient(600px 400px at 8% 100%, rgba(248, 168, 216, .16), transparent 70%); }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; min-height: min(86vh, 820px); padding: 80px 0; }
.hero h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 400; letter-spacing: -.015em; margin-bottom: 28px; }
.hero h1 em { font-style: italic; color: var(--blush); font-weight: 400; }
.hero p.lead { font-size: 15px; max-width: 460px; color: rgba(255, 255, 255, .78); margin-bottom: 40px; }
.hero .eyebrow { color: var(--blush); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-art { position: relative; aspect-ratio: 4 / 5; max-height: 640px; justify-self: end; width: min(100%, 520px); }
.hero-art .frame { position: absolute; inset: 0; overflow: hidden; padding: 14px; }
.hero-art .frame > div { width: 100%; height: 100%; overflow: hidden; }
.hero-art svg { width: 100%; height: 100%; }
.hero-art .tag { position: absolute; left: -28px; bottom: 44px; background: var(--ivory); color: var(--maroon); padding: 18px 26px; font-family: var(--script); font-size: 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }

/* ---------- sections ---------- */
.section { padding: 120px 0; }
.section.tight { padding: 80px 0; }
.section.stone { background: var(--stone); }
.section.blush { background: var(--blush-soft); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.section-head h2 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 400; }
.section-head p { color: var(--muted); }
.statement { text-align: center; }
.statement blockquote { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.18; font-weight: 400; max-width: 940px; margin: 0 auto; color: var(--maroon); }
.statement blockquote em { color: var(--magenta); }

/* ---------- product grid ---------- */
.grid { display: grid; gap: 44px 28px; grid-template-columns: repeat(4, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { display: block; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.card-media > svg, .card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card-media > svg, .card:hover .card-media > img { transform: scale(1.06); }
.card-media .badge { position: absolute; top: 14px; left: 14px; background: var(--ivory); color: var(--maroon); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; padding: 7px 12px; z-index: 2; }
.card-meta { padding-top: 20px; text-align: center; }
.card-meta h3 { font-size: 24px; font-weight: 500; margin-bottom: 4px; }
.card-meta .sub { font-size: 12px; color: var(--muted); letter-spacing: .02em; margin-bottom: 8px; }
.price { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; font-weight: 500; color: var(--plum); }

/* ---------- collections tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile { position: relative; min-height: 560px; display: flex; align-items: flex-end; padding: 36px; color: #fff; overflow: hidden; background: var(--maroon); }
.tile > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; transition: transform 1.2s var(--ease), opacity .6s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(77, 9, 24, .92), rgba(77, 9, 24, .1) 65%); }
.tile:hover > svg { transform: scale(1.07); opacity: .7; }
.tile .copy { position: relative; z-index: 2; }
.tile h3 { font-size: 38px; font-weight: 400; margin-bottom: 8px; }
.tile p { color: rgba(255, 255, 255, .78); margin-bottom: 18px; font-size: 14px; }
.tile .link-arrow { color: var(--blush); }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.pillar { padding: 48px 40px 48px 0; border-right: 1px solid var(--hair); }
.pillar:last-child { border-right: 0; }
.pillar + .pillar { padding-left: 40px; }
.pillar .num { font-family: var(--serif); font-size: 54px; color: var(--blush); line-height: 1; display: block; margin-bottom: 14px; }
.pillar h3 { font-size: 28px; }
.pillar p { color: var(--muted); margin: 0; }

/* ---------- shop ---------- */
.page-head { text-align: center; padding: 88px 0 56px; }
.page-head h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 400; margin-bottom: 12px; }
.page-head p { color: var(--muted); max-width: 560px; margin: 0 auto; }
.filters { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 0; border-block: 1px solid var(--hair); margin-bottom: 56px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding: 10px 18px; border: 1px solid var(--hair); transition: all .3s; }
.pill:hover { border-color: var(--plum); color: var(--plum); }
.pill.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.filter-selects { display: flex; gap: 12px; }
select, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea {
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--hair); padding: 14px 16px; width: 100%; border-radius: 0; transition: border-color .25s;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--plum); }
.filter-selects select { width: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 11px 14px; }
.empty { text-align: center; padding: 80px 0; color: var(--muted); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; padding: 56px 0 100px; align-items: start; }
.gallery { display: grid; gap: 16px; }
.gallery .main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.gallery .main > * { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery .thumbs button { padding: 0; border: 1px solid transparent; background: var(--stone); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.gallery .thumbs button.on { border-color: var(--plum); }
.gallery .thumbs img, .gallery .thumbs svg { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { position: sticky; top: 120px; }
.crumbs { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.crumbs a:hover { color: var(--magenta); }
.pdp-info h1 { font-size: clamp(38px, 4vw, 58px); font-weight: 400; margin-bottom: 8px; }
.pdp-info .sub { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.pdp-price { font-family: var(--serif); font-size: 34px; color: var(--plum); margin-bottom: 28px; }
.pdp-actions { display: grid; gap: 12px; margin: 28px 0; }
.assure { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 10px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.assure li::before { content: "\2726"; color: var(--magenta); margin-right: 12px; font-size: 10px; }
details.acc { border-top: 1px solid var(--hair); padding: 18px 0; }
details.acc:last-of-type { border-bottom: 1px solid var(--hair); }
details.acc summary { cursor: pointer; list-style: none; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; display: flex; justify-content: space-between; }
details.acc summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--magenta); }
details.acc[open] summary::after { content: "\2212"; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc .acc-body { padding-top: 16px; color: var(--muted); }
details.acc .acc-body p { margin-bottom: .6em; }

/* ---------- bag / checkout ---------- */
.bag-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; padding-bottom: 110px; align-items: start; }
.line { display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hair); align-items: center; }
.line .thumb { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.line .thumb > * { width: 100%; height: 100%; object-fit: cover; }
.line h3 { font-size: 24px; margin-bottom: 2px; }
.line .sub { font-size: 12px; color: var(--muted); }
.line form { display: inline; }
.qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; }
.qty select { width: 70px; padding: 8px 10px; }
.text-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: underline; cursor: pointer; font-family: var(--sans); }
.text-btn:hover { color: var(--magenta); }
.summary { background: var(--paper); border: 1px solid var(--hair); padding: 36px; position: sticky; top: 120px; }
.summary h2 { font-size: 30px; }
.sum-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.sum-row.total { border-top: 1px solid var(--hair); margin-top: 10px; padding-top: 18px; font-family: var(--serif); font-size: 26px; color: var(--plum); }
.note { font-size: 12px; color: var(--muted); line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label.f { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
fieldset { border: 0; padding: 0; margin: 0 0 36px; }
legend { font-family: var(--serif); font-size: 28px; margin-bottom: 20px; padding: 0; }

.flashes { position: fixed; top: 104px; right: 24px; z-index: 80; display: grid; gap: 10px; max-width: 380px; }
.flash { background: var(--maroon); color: #fff; padding: 16px 22px; font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); border-left: 3px solid var(--blush); animation: slide .5s var(--ease); }
.flash.error { background: #5b0a1e; border-left-color: #ff6b8a; }
@keyframes slide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- house / story ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split .art { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--hair); padding: 14px; background: var(--paper); }
.split .art > div { width: 100%; height: 100%; overflow: hidden; }
.split .art svg { width: 100%; height: 100%; }
.prose p { color: var(--muted); font-size: 16px; }
.prose h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 400; }

/* ---------- cta band + footer ---------- */
.cta-band { background: var(--plum); color: #fff; text-align: center; padding: 110px 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% 120%, rgba(248, 168, 216, .35), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 400; }
.cta-band h2 em { color: var(--blush); }
.cta-band p { color: rgba(255, 255, 255, .8); max-width: 520px; margin: 0 auto 36px; }
.site-footer { background: var(--maroon); color: rgba(255, 255, 255, .72); padding: 84px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 64px; }
.site-footer h4 { font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--blush); margin-bottom: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-brand .mark { font-family: var(--serif); font-size: 30px; letter-spacing: .34em; color: #fff; display: block; margin-bottom: 18px; }
.footer-brand p { font-size: 14px; max-width: 320px; }
.legal { border-top: 1px solid rgba(255, 255, 255, .12); padding: 26px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner, .pdp, .bag-grid, .split { grid-template-columns: 1fr; }
  .hero-art { justify-self: center; max-height: 520px; }
  .hero-art .tag { left: 12px; }
  .pdp-info, .summary { position: static; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 420px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .header-inner { grid-template-columns: auto 1fr auto; height: 72px; }
  .menu-toggle { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--ivory); flex-direction: column; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--hair); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .header-actions .hide-sm { display: none; }
  .logo .mark { font-size: 22px; }
  .section { padding: 80px 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .form-grid { grid-template-columns: 1fr; }
  .line { grid-template-columns: 1fr 1fr; }
  .line .line-price { grid-column: 2; }
  .grid { gap: 32px 14px; }
  .card-meta h3 { font-size: 20px; }
  .flashes { left: 16px; right: 16px; top: 88px; max-width: none; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } }

/* ---- Stage 2: tiers, sizing, bespoke ---- */
.lead-line{font-size:13px;color:var(--ink-soft,#5b4a52);margin:6px 0 22px}
.tier-tag{display:inline-block;font:600 10px/1 var(--sans,Montserrat,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--plum,#8E0843);border:1px solid var(--plum,#8E0843);padding:5px 9px;margin-right:8px}
.sizes{border:0;padding:0;margin:0 0 18px}
.sizes legend{display:flex;justify-content:space-between;width:100%;font:600 11px/1 var(--sans,Montserrat,sans-serif);letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;padding:0}
.size-row{display:flex;flex-wrap:wrap;gap:8px}
.size input{position:absolute;opacity:0}
.size span{display:inline-flex;min-width:48px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(77,9,24,.3);font-size:13px;cursor:pointer;transition:all .2s}
.size input:checked+span{background:var(--maroon,#4D0918);color:#fff;border-color:var(--maroon,#4D0918)}
.size input:focus-visible+span{outline:2px solid var(--magenta,#B00854);outline-offset:2px}
.fit-toggle{display:block;margin:6px 0 14px;font-size:13px;cursor:pointer}
.fit-toggle em{color:var(--plum,#8E0843);font-style:normal}
.measure-box{border:1px solid rgba(77,9,24,.18);padding:18px;margin-bottom:18px;background:var(--blush-soft,#FCE4F2)}
.measure-box[hidden]{display:none}
.measure-box .hint{font-size:11px;opacity:.7;margin-top:4px}
.size-table{width:100%;border-collapse:collapse;margin:14px 0 36px}
.size-table th,.size-table td{padding:12px 14px;border-bottom:1px solid rgba(77,9,24,.15);text-align:left;font-size:14px}
.size-table thead th{font:600 11px var(--sans,Montserrat,sans-serif);letter-spacing:.16em;text-transform:uppercase}
.h-sm{font-size:28px;margin:28px 0 6px}
.narrow{max-width:760px}.form-narrow{max-width:820px}
.spec{font-size:12px;opacity:.75}

/* ---- Stage 3: region switcher ---- */
.region{display:flex;gap:22px;justify-content:flex-end;padding:22px 0 0;margin-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.region label{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px;opacity:.85}
.region select{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.3);padding:8px 10px;font:500 12px var(--sans)}
.region select option{color:#2A1A21}

/* ---- Stage 4: payment + tracking ---- */
.pay-opt{display:flex;gap:14px;align-items:flex-start;border:1px solid rgba(77,9,24,.2);padding:16px 18px;margin-bottom:10px;cursor:pointer}
.pay-opt small{color:var(--muted)}
.pay-state.ok{color:var(--plum);font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.timeline{list-style:none;padding:0;margin:34px 0 0;border-left:1px solid rgba(77,9,24,.25)}
.timeline li{padding:0 0 18px 20px;position:relative;font-size:14px}
.timeline li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;background:var(--magenta);border-radius:50%}
.timeline li span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- Stage 6 ---- */
.scarce{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin:0 0 14px}
.inline-form input[type=email]{width:100%;margin-bottom:10px}
.review{border-top:1px solid var(--hair);padding:22px 0}.review h3{margin:6px 0;font-size:22px}.stars{color:var(--magenta);letter-spacing:.2em}
.newsletter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.newsletter label{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-right:auto}
.newsletter input[type=email]{background:transparent;border:1px solid rgba(255,255,255,.3);color:inherit;padding:11px 14px;min-width:240px}

/* ---- Loved by our community: a scattered wall of cards ---- */
.wall-section{background:radial-gradient(1200px 500px at 50% 0,var(--blush-soft),transparent 70%),var(--stone,#E7E3E4);overflow:hidden}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:56px 34px;padding:30px 12px 40px;align-items:start}
.note.home{transition-property:opacity,transform,rotate,translate,box-shadow;position:relative;margin:0;padding:30px 26px 24px;background:#fff;border-radius:3px;
  box-shadow:0 1px 1px rgba(77,9,24,.08),0 10px 18px -6px rgba(77,9,24,.22),0 28px 44px -18px rgba(77,9,24,.28);
  }
.note.home::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(77,9,24,.06)}
.note blockquote{margin:0;font:italic 500 21px/1.45 var(--serif);color:var(--maroon)}
.note .qm{display:block;font:400 64px/0.5 var(--script);color:var(--magenta);margin:10px 0 6px}
.note .stars{color:var(--magenta);letter-spacing:.22em;margin:14px 0 0;font-size:14px}
.note figcaption{margin-top:12px;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.note figcaption b{color:var(--plum);font-weight:600}
.note img{display:block;width:100%;height:auto;border-radius:2px;margin-bottom:16px;box-shadow:0 2px 8px rgba(77,9,24,.18)}
.note.has-img{padding:14px 14px 22px}.note.has-img blockquote,.note.has-img figcaption,.note.has-img .stars{padding:0 8px}
.tape{position:absolute;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;transform:rotate(-3deg);
  background:linear-gradient(90deg,rgba(248,168,216,.78),rgba(252,228,242,.88));box-shadow:0 2px 4px rgba(77,9,24,.15);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 7px);mask:linear-gradient(#000,#000)}
.n0{rotate:-2.6deg}.n1{rotate:1.8deg;translate:0 26px}.n2{rotate:-1.1deg;translate:0 -8px}
.n3{rotate:2.9deg;translate:0 18px}.n4{rotate:-3.2deg;translate:0 4px}.n5{rotate:1.2deg;translate:0 30px}
.n1 .tape,.n4 .tape{transform:rotate(4deg);margin-left:-70px}.n2 .tape,.n5 .tape{left:auto;right:22px;margin:0;transform:rotate(6deg)}
.n1,.n3,.n5{background:var(--blush-soft)}
.note.home:hover{rotate:0deg;translate:0 -10px;transform:scale(1.025);z-index:3;
  box-shadow:0 2px 2px rgba(77,9,24,.1),0 18px 30px -8px rgba(77,9,24,.3),0 44px 70px -20px rgba(77,9,24,.4)}
@media (max-width:640px){.wall{grid-template-columns:1fr;gap:44px;padding:24px 4px}.n1,.n3,.n5{rotate:1.4deg;translate:0 0}.n0,.n2,.n4{rotate:-1.4deg;translate:0 0}.note blockquote{font-size:19px}}
@media (prefers-reduced-motion:reduce){.note,.note:hover{transition:none}.note:hover{transform:none;translate:0 0}}

/* ---- 360 viewer ---- */
.gallery { position: relative; }
.spin { position: relative; aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 3px; }
.spin[hidden], .gallery [hidden] { display: none; }
.spin.drag { cursor: grabbing; }
.spin img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.spin-ui { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; align-items: center; gap: 14px; pointer-events: none; }
.spin-ui button { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(77, 9, 24, .25); background: rgba(251, 247, 245, .92); color: var(--maroon); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(77, 9, 24, .18); }
.spin-ui button:hover { background: #fff; }
.spin-ui .spin-play { font-size: 12px; letter-spacing: -1px; }
.spin-hint { background: rgba(251, 247, 245, .92); color: var(--maroon); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; padding: 10px 16px; border-radius: 20px; transition: opacity .6s; }
.spin-hint.gone { opacity: 0; }
.spin-load { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(77, 9, 24, .1); transition: opacity .5s .3s; }
.spin-load span { display: block; height: 100%; width: 0; background: var(--magenta); transition: width .2s; }
.spin.ready .spin-load { opacity: 0; }
.spin-toggle { display: inline-flex; align-items: center; gap: 12px; justify-self: start; background: none; border: 1px solid var(--plum); color: var(--plum); padding: 8px 18px 8px 8px; border-radius: 40px; cursor: pointer; font: 600 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .3s, color .3s; }
.spin-toggle .ring { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 10px; letter-spacing: .02em; }
.spin-toggle:hover, .spin-toggle[aria-pressed="true"] { background: var(--blush-soft); }

/* ---- depth: tilting cards ---- */
@media (hover: hover) and (pointer: fine) {
  .card-media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease), box-shadow .5s var(--ease); will-change: transform; }
  .card:hover .card-media { box-shadow: 0 30px 50px -22px rgba(77, 9, 24, .45), 0 12px 20px -12px rgba(77, 9, 24, .25); }
  .card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%); }
  .card:hover .card-media::after { opacity: 1; }
  .hero-art .frame { transition: translate .4s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .card-media, .hero-art .frame { transform: none !important; translate: none !important; } }

/* collection tiles: product photograph as the banner */
.tile > .tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 1.4s var(--ease); }
.tile:hover > .tile-photo { transform: scale(1.06); }
.tile:has(.tile-photo)::after { background: linear-gradient(to top, rgba(77, 9, 24, .88), rgba(77, 9, 24, .05) 62%); }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- image skeletons ---- */
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.js .card-media:has(> img):not(.media-ready),
.js .gallery .main:has(> img):not(.media-ready),
.js .gallery .thumbs button:has(> img):not(.media-ready) {
  background: linear-gradient(100deg, var(--stone) 30%, #f4eef0 50%, var(--stone) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.js .tile:has(> .tile-photo):not(.media-ready) {
  background: linear-gradient(100deg, var(--maroon) 30%, #6a1230 50%, var(--maroon) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.js .card-media > img:not(.img-ready), .js .tile > .tile-photo:not(.img-ready),
.js .gallery .main > img:not(.img-ready), .js .gallery .thumbs img:not(.img-ready) { opacity: 0; }
.js .card-media > img.img-ready, .js .tile > .tile-photo.img-ready,
.js .gallery .main > img.img-ready, .js .gallery .thumbs img.img-ready { opacity: 1; transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .card-media, .js .tile, .js .gallery .main, .js .gallery .thumbs button { animation: none !important; } }

/* ---- colour choice ---- */
.colors { border: 0; padding: 0; margin: 0 0 18px; }
.colors legend { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; padding: 0; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch .nm { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid rgba(77, 9, 24, .25); border-radius: 40px; font-size: 12px; letter-spacing: .06em; transition: all .2s; }
.swatch .dot { display: none; }
.swatch .dot[style] { display: inline-block; position: absolute; left: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); z-index: 1; }
.swatch .dot[style] + .nm { padding-left: 38px; }
.swatch .nm { padding-left: 14px; }
.swatch input:checked ~ .nm { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.swatch input:focus-visible ~ .nm { outline: 2px solid var(--magenta); outline-offset: 2px; }
.custom-link { display: inline-block; margin: 10px 0 6px; }

/* ---- checkout: no-delivery switch, shop custom-order banner ---- */
.skip-ship { margin-bottom: 14px; border-style: dashed; }
.custom-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin: 0 0 120px; padding: 44px 48px; background: var(--blush-soft); box-shadow: 0 18px 40px -24px rgba(77, 9, 24, .35); }
.custom-cta h2 { font-size: 34px; margin: 6px 0 8px; }
.custom-cta p { max-width: 520px; margin: 0; }
.grid + .custom-cta { margin-top: 90px; }

/* ---- order confirmation: payment fallback and account offer ---- */
.pay-fallback, .account-offer { border-top: 3px solid var(--magenta); }
.account-offer .form-grid { margin-top: 8px; }

/* coupons */
.coupon-row{color:var(--magenta)}
.coupon-box{margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--blush)}
.coupon-line{display:flex;gap:8px}
.coupon-line input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em}

/* ---------- Preloader: a yarn ball unspools a thread and stitches a crochet chain ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, #fff 0%, var(--blush-soft) 55%, #f6d3e8 100%), var(--ivory);
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
  animation: pl-failsafe .01s linear 6s forwards;            /* never trap a visitor, even if scripts fail */
}
.preloader::before {                                          /* a faint knit texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(60deg, rgba(142, 8, 67, .035) 0 2px, transparent 2px 9px),
              repeating-linear-gradient(-60deg, rgba(142, 8, 67, .035) 0 2px, transparent 2px 9px);
}
.preloader.done { opacity: 0; visibility: hidden; }
.pl-inner { position: relative; text-align: center; padding: 0 20px; transition: transform .8s var(--ease); }
.preloader.done .pl-inner { transform: translateY(-14px) scale(1.03); }
.pl-art { width: min(300px, 76vw); height: auto; overflow: visible; display: block; margin: 0 auto 6px; }
.pl-art * { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.pl-ball { transform-box: fill-box; transform-origin: 50% 50%; animation: pl-drop .9s var(--ease) both, pl-bob 2.4s ease-in-out .9s infinite; }
.pl-ball circle { fill: var(--magenta); stroke: none; }
.pl-ball path { stroke: var(--blush); stroke-width: 2.2; opacity: .9; }
.pl-thread { stroke: var(--magenta); stroke-width: 2.6; stroke-dasharray: 150; stroke-dashoffset: 150; animation: pl-draw .7s ease-out .35s forwards; }
.pl-chain ellipse { stroke: var(--plum); stroke-width: 2.8; stroke-dasharray: 96; stroke-dashoffset: 96; animation: pl-draw .5s ease-out forwards; animation-delay: calc(.8s + var(--i) * .1s); }
.pl-chain ellipse:nth-child(even) { stroke: var(--magenta); }
.pl-heart { fill: var(--magenta) !important; stroke: none; transform-box: fill-box; transform-origin: 50% 80%; opacity: 0; animation: pl-pop .6s var(--ease) 2.05s forwards, pl-beat 1.6s ease-in-out 2.7s infinite; }

.pl-word { font-family: var(--serif); font-size: clamp(26px, 7.2vw, 38px); letter-spacing: .34em; padding-left: .34em; color: var(--maroon); font-weight: 500; line-height: 1; margin-top: 10px; }
.pl-word span, .pl-word b { display: inline-block; opacity: 0; transform: translateY(14px); animation: pl-rise .8s var(--ease) forwards; }
.pl-word b { color: var(--magenta); font-weight: 500; animation-delay: .25s; }
.pl-a { animation-delay: .1s; }
.pl-tag { display: block; margin-top: 14px; font-size: 9px; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: pl-rise .8s var(--ease) 1s forwards; }

@keyframes pl-drop { from { transform: translateY(-26px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pl-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-rise { to { opacity: 1; transform: none; } }
@keyframes pl-pop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pl-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .pl-ball, .pl-heart { animation: none; opacity: 1; }
  .pl-thread, .pl-chain ellipse { animation: none; stroke-dashoffset: 0; }
  .pl-word span, .pl-word b, .pl-tag { animation: pl-rise .4s ease forwards; }
}

/* policy pages */
.prose h2.pol-h { font-size: clamp(22px, 2.4vw, 30px); margin: 1.8em 0 .5em; color: var(--maroon); }
.prose ul { color: var(--muted); font-size: 16px; padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .45em 0; }

/* ================= Phone-first layer ================= */
.contact-grid { grid-template-columns: 1.4fr 1fr; }
.m-dock { display: none; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }

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

@media (max-width: 760px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  .wrap { padding-inline: 18px; }

  /* slimmer header; the bag moves to the dock, so the top bar keeps just brand, language and menu */
  .announce { font-size: 10px; letter-spacing: .14em; padding: 8px 14px; line-height: 1.5; }
  .header-inner { height: 60px; }
  .logo .mark { font-size: 19px; letter-spacing: .2em; }
  .menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; margin-left: -10px; }
  .nav { max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 18px 30px rgba(77, 9, 24, .12); }
  .nav a { min-height: 52px; display: flex; align-items: center; }
  .header-actions a[href*="/bag"] { display: none; }

  /* calmer rhythm on a small screen */
  .page-head { padding: 44px 0 28px; }
  .page-head h1 { font-size: clamp(36px, 11vw, 52px); }
  .section { padding: 56px 0; }
  .hero-inner { gap: 28px; }
  .hero-actions { display: grid; gap: 10px; }

  /* thumb-friendly controls (16px type stops iOS from zooming into fields) */
  .btn { min-height: 52px; padding: 16px 22px; }
  .btn.sm { min-height: 44px; }
  select, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea { font-size: 16px; min-height: 50px; }
  .form-grid { gap: 14px; }

  /* shop filters: one swipeable row of chips, selects side by side */
  .filters { display: grid; gap: 12px; padding: 14px 0; margin-bottom: 28px; }
  .pills { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -18px; padding: 2px 18px; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { white-space: nowrap; scroll-snap-align: start; padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; }
  .filter-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter-selects select { min-width: 0; letter-spacing: .06em; padding-inline: 12px; text-overflow: ellipsis; }

  /* product page: the buy button follows the thumb */
  .pdp-info form button[type=submit].btn.block {
    position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 20;
    box-shadow: 0 -14px 18px -6px rgba(251, 247, 245, .95), 0 10px 24px rgba(77, 9, 24, .22);
  }
  .size-row { gap: 8px; }
  .size span { min-width: 48px; min-height: 48px; display: inline-grid; place-items: center; }

  /* bag and checkout */
  .summary { padding: 20px; }
  .line { gap: 12px; }
  .flashes { top: 72px; }

  /* the bottom dock: the four places a shopper goes, within thumb reach */
  .m-dock {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(251, 247, 245, .96); backdrop-filter: blur(14px); border-top: 1px solid var(--hair);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(77, 9, 24, .07);
  }
  .m-dock a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 0 5px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; border-radius: 14px; transition: color .2s, background .2s; }
  .m-dock svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .m-dock a.on { color: var(--plum); background: var(--blush-soft); }
  .m-dock a:active { transform: scale(.96); }
  .dock-count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--magenta); color: #fff; font: 600 10px/17px var(--sans); text-align: center; font-style: normal; letter-spacing: 0; }
  .site-footer { padding: 56px 0 24px; }
}
@media (max-width: 380px) { .m-dock a { font-size: 9px; letter-spacing: .06em; } .logo .mark { font-size: 17px; } }
@media (max-width: 520px) {
  .footer-grid > * { min-width: 0; }
  .footer-brand .mark { font-size: clamp(22px, 8vw, 30px); letter-spacing: .18em; }
}