/* Mundri, black and alabaster. Shared by the store theme. Built by src/build.py: edit src/parts, not this file. */
/* Basic resets. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }
@font-face { font-family: "EB Garamond"; src: url(../fonts/garamond.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../fonts/garamond-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

/* Two colours: alabaster and black. Paper is a lighter alabaster for product wells; warm grey for
   quiet text and the logo letters. */
:root {
  --alabaster: #E8EAEC; --paper: #F4F5F6; --black: #000; --grey: #5A5652; --logo-grey: #7A7672;
  --line: rgba(0,0,0,.14);
  /* Surfaces the admin can recolour under Mundri › Design; each follows the two main colours by default. */
  --ribbon-bg: var(--black); --ribbon-fg: var(--alabaster); --foot-bg: var(--black); --foot-fg: var(--alabaster);
  --btn-bg: var(--black); --btn-fg: var(--alabaster); --radius: 0px;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif; --sans: "Figtree", system-ui, sans-serif;
  --g: 20px; --hh: 60px; --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 1024px) { :root { --g: 48px; --hh: 76px; } }
body { background: var(--alabaster); color: var(--black); font: 400 15px/1.6 var(--sans); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.caps { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.ul { display: inline-flex; align-items: center; min-height: 44px; }
.ul span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.mi { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- Ribbon and header ---------- */
.ribbon { background: var(--ribbon-bg); color: var(--ribbon-fg); text-align: center; padding: 9px var(--g); font-size: 12.5px; letter-spacing: .04em; }
.ribbon a { text-decoration: underline; text-underline-offset: 3px; }
header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--hh); padding: 0 calc(var(--g) - 10px) 0 var(--g); background: var(--alabaster); border-bottom: 1px solid var(--line); transition: background .35s, color .35s, border-color .35s; --lg: var(--logo-grey); --lr: var(--black); }
/* At the top of the page the header sits on the photo: no fill, light logo and icons. Hover or scroll brings the fill back. */
header.over { background: transparent; color: var(--alabaster); border-bottom-color: transparent; --lg: color-mix(in srgb, var(--alabaster) 78%, transparent); --lr: var(--alabaster); }
@media (hover: hover) { header.over:hover, header.over:focus-within { background: var(--alabaster); color: var(--black); border-bottom-color: var(--line); --lg: var(--logo-grey); --lr: var(--black); } }
header .lgo use, header .lgo { transition: none; }
.lgo { display: block; width: 150px; height: auto; aspect-ratio: 5961 / 740; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
header nav { display: none; justify-content: center; gap: 30px; }
header nav a { display: inline-flex; align-items: center; min-height: 44px; position: relative; }
header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
header nav a:hover::after { transform: scaleX(1); }
.hdr-end { display: flex; justify-content: flex-end; grid-column: 3; }
.ib { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; }
.ib svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ib .n { position: absolute; top: 7px; right: 5px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--black); color: var(--alabaster); font: 600 10px/16px var(--sans); text-align: center; }
.desk-only { display: none; }
@media (min-width: 1024px) {
  header nav { display: flex; } .menu-btn { display: none; } .desk-only { display: inline-grid; }
  .logo .lgo { width: 180px; }
}

/* Phone menu */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer__bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(86vw, 380px); background: var(--alabaster); padding: 12px var(--g) 32px; transform: translateX(-100%); transition: transform .4s var(--ease); display: flex; flex-direction: column; }
.drawer.open { visibility: visible; } .drawer.open .drawer__bg { opacity: 1; } .drawer.open .drawer__panel { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: 48px; margin-bottom: 16px; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font: 400 24px/1 var(--serif); }
.drawer nav a .mi { font-size: 22px; color: var(--grey); }

/* ---------- Hero: one full-bleed photo, words in the dark corner ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--hh)); height: min(88svh, 800px); overflow: hidden; background: #3b3530; color: var(--alabaster); }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hh) + 60px); z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0)); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 45%); pointer-events: none; }
.hero__text { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: 32px; display: grid; gap: 10px; justify-items: start; }
.hero h1 { font: 400 19px/1.15 var(--serif); text-transform: uppercase; letter-spacing: .08em; }
.hero p { font-size: 13px; max-width: 34ch; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 180px; padding: 0 24px; border: 1px solid currentColor; border-radius: var(--radius); transition: background .3s, color .3s; }
.hero .btn-line:hover { background: var(--alabaster); color: var(--black); }
@media (min-width: 1024px) {
  .hero { height: min(calc(100svh - 37px), 900px); }
  .hero::after { background: linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,0) 50%); }
  .hero img { object-position: 50% 50%; }
  .hero__text { left: var(--g); bottom: 64px; gap: 12px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 14px; }
  .btn-line { min-width: 220px; }
}

/* ---------- Four photos edge to edge ---------- */
.strip { --sg: calc(var(--g) * .24); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg); margin-top: var(--sg); }
.strip a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip__mark { display: grid; place-items: center; width: 100%; height: 100%; background: var(--black); color: var(--alabaster); font-size: 34vw; }
.strip__mark .mi { stroke-width: .7; }
@media (min-width: 1024px) { .strip { grid-template-columns: repeat(4, 1fr); } .strip__mark { font-size: 9vw; } }

/* Display photo first; on hover (or keyboard focus) the worn photo fades in over it. Phones show the display photo. */
.worn { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .55s var(--ease); background: #DDD6CD; }
.worn img { width: 100%; height: 100%; object-fit: cover; }
.worn .ph .mi { font-size: 64px; }
@media (hover: hover) { a:hover > .worn, a:focus-visible > .worn { opacity: 1; } }
.dw { position: relative; overflow: hidden; }
.disp { position: relative; display: block; width: 100%; height: 100%; }
.strip li { position: relative; }
.dots { display: none; }
/* Phones and tablets: no hover, so the display and worn photos sit side by side and swipe. */
@media (hover: none) {
  .strip a.dw, .card__img.dw { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dw::-webkit-scrollbar { display: none; }
  .dw > .disp, .dw > .worn { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .dw > .worn { position: relative; inset: auto; opacity: 1; }
  .dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--alabaster) 60%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,.3); transition: background .3s; }
  .dots i.on { background: var(--black); box-shadow: 0 0 0 1px color-mix(in srgb, var(--alabaster) 80%, transparent); }
}

/* ---------- One portrait, set narrow, words beneath ---------- */
.portrait { position: relative; padding: 72px var(--g); overflow: clip; }
.portrait__inner { width: min(100%, 420px); margin: 0 auto; }
.portrait__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.portrait__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.portrait__cap { display: grid; gap: 8px; padding-top: 22px; }
.portrait h2 { font: 400 30px/1.1 var(--serif); }
.portrait p { color: var(--grey); max-width: 36ch; }
.portrait .ul { justify-self: start; }
@media (min-width: 1024px) {
  .portrait { padding: 120px var(--g); }
  .portrait__inner { width: 520px; }
  .portrait__cap { grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; }
  .portrait h2, .portrait p { grid-column: 1; } .portrait .ul { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .portrait h2 { font-size: 36px; }
}

/* Marks that draw themselves once, when they come into view. */
.draw .mi * { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.6s var(--ease); }
.draw .mi *:nth-child(2) { transition-delay: .2s; } .draw .mi *:nth-child(3) { transition-delay: .4s; }
.draw.is-in .mi * { stroke-dashoffset: 0; }

/* ---------- Two panels: black field and photo ---------- */
.duo { display: grid; gap: 2px; }
.duo__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.duo__tile img { width: 100%; height: 100%; object-fit: cover; }
.duo__tile--black { background: var(--black); color: var(--alabaster); }
.duo__mark { position: absolute; left: 50%; top: 40%; margin: -0.5em 0 0 -0.5em; font-size: 150px; color: var(--alabaster); opacity: .9; }
.duo__mark .mi { stroke-width: .5; }
.duo__text { position: absolute; z-index: 1; left: var(--g); right: var(--g); bottom: 28px; display: grid; gap: 6px; justify-items: start; }
.duo__text h2 { font: 400 30px/1.1 var(--serif); }
.duo__text p { max-width: 36ch; }
.duo__photo .duo__text { color: var(--black); }
.duo__photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--alabaster) 96%, transparent) 30%, color-mix(in srgb, var(--alabaster) 0%, transparent)); }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } .duo__tile { aspect-ratio: 1 / 1.04; } }
@media (min-width: 1024px) { .duo__text { left: 40px; bottom: 44px; } .duo__text h2 { font-size: 36px; } .duo__mark { font-size: 220px; } }

/* ---------- Most loved: product wells, swatches under each ---------- */
.loved { padding: 72px 0 64px; }
.loved h2 { font: 400 30px/1.1 var(--serif); text-align: center; margin-bottom: 28px; }
.rail { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 10px; padding: 0 var(--g); }
.card { text-align: center; }
.card__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.card__img .disp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.card__img .disp > img.on { opacity: 1; }
.card__media { position: relative; }
.ph { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; color: var(--black); }
.ph .mi { font-size: 76px; stroke-width: .9; }
.ph span { font-size: 12px; color: var(--grey); letter-spacing: .04em; }
.card h3 { margin-top: 14px; }
.card h3 a { display: inline-block; padding: 4px 0; }
.card__price { color: var(--grey); font-size: 13px; letter-spacing: .06em; }
.sw { display: flex; justify-content: center; margin-top: 2px; }
.sw button { display: grid; place-items: center; width: 34px; height: 44px; }
.sw i { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .25s; }
.sw button[aria-pressed="true"] i { outline-color: var(--black); }
.sw__name { min-height: 20px; font-size: 12px; color: var(--grey); }
.m-gold { background: radial-gradient(circle at 35% 30%, #F3DFAE, #C9A45C 60%, #9C7A3C); }
.m-rose { background: radial-gradient(circle at 35% 30%, #F6D5C6, #C98E76 60%, #9E6551); }
.m-silver { background: radial-gradient(circle at 35% 30%, #FFFFFF, #C6C6C6 60%, #8F8F8F); }
.m-onyx { background: radial-gradient(circle at 35% 30%, #555, #111 60%, #000); }
.m-midnight { background: radial-gradient(circle at 35% 30%, #5A6B8C, #1D2A44 60%, #0D1422); }
.loved__all { text-align: center; margin-top: 30px; }
@media (min-width: 1024px) { .loved { padding: 112px 0 96px; } .loved h2 { font-size: 36px; margin-bottom: 40px; } .rail { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- Promises: hairline cells, a mark each ---------- */
.promise { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 var(--g) 72px; }
.promise li { display: grid; justify-items: center; gap: 4px; padding: 28px 12px; text-align: center; }
.promise li:nth-child(odd) { border-right: 1px solid var(--line); }
.promise li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.promise h3 { font: 400 19px/1.2 var(--serif); }
.promise p { font-size: 13px; color: var(--grey); }
@media (min-width: 1024px) {
  .promise { grid-template-columns: repeat(4, 1fr); border: 0; }
  .promise li { padding: 18px 24px; border: 0 !important; }
  .promise li + li { border-left: 1px solid var(--line) !important; }
}

/* ---------- Footer ---------- */
footer { padding: 64px var(--g) 28px; display: grid; gap: 40px; background: var(--foot-bg); color: var(--foot-fg); --lg: color-mix(in srgb, var(--foot-fg) 60%, var(--foot-bg)); --lr: var(--foot-fg); }
footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__brand .lgo { width: 200px; }
.foot__brand p { margin-top: 18px; color: color-mix(in srgb, var(--foot-fg) 68%, var(--foot-bg)); max-width: 30ch; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot__cols h2 { font: 400 18px/1.2 var(--serif); margin-bottom: 8px; }
.foot__cols a { display: flex; align-items: center; min-height: 36px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--foot-fg) 18%, transparent); font-size: 12px; color: color-mix(in srgb, var(--foot-fg) 68%, var(--foot-bg)); }
@media (min-width: 1024px) {
  footer { grid-template-columns: 1.2fr 2fr; padding-top: 96px; }
  .foot__cols { grid-template-columns: repeat(3, 1fr); }
  .foot__base { grid-column: 1 / -1; }
}

/* ---------- Opening screen: the marks draw, the logo appears, the screen lifts ---------- */
.intro { display: none; }
.intro-on .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 26px; background: var(--alabaster); transition: opacity .8s var(--ease), visibility .8s; }
.intro-on.intro-lock { overflow: hidden; }
.intro__marks { display: flex; gap: 22px; font-size: 40px; }
.intro__marks .mi * { stroke-dasharray: 160; stroke-dashoffset: 160; animation: ink 1.3s var(--ease) forwards; }
.intro__marks .mi:nth-child(2) * { animation-delay: .18s; } .intro__marks .mi:nth-child(3) * { animation-delay: .36s; }
.intro .lgo { width: 220px; opacity: 0; animation: fadein .8s .9s var(--ease) forwards; }
.intro.is-gone { opacity: 0; visibility: hidden; }
@keyframes ink { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .draw .mi * { stroke-dashoffset: 0; }
}

/* ================= Product page ================= */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 12px var(--g); font-size: 12.5px; color: var(--grey); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--black); }

/* Phone: photos edge to edge, swipe between them. */
.gallery-wrap { position: relative; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: var(--paper); margin: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide .ph { background: #DDD6CD; }
.slide .ph .mi { font-size: 88px; }
.gdots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.gdots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--alabaster) 60%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,.3); transition: background .3s; }
.gdots i.on { background: var(--black); box-shadow: 0 0 0 1px color-mix(in srgb, var(--alabaster) 80%, transparent); }
.thumbs { display: none; }

.info { padding: 26px var(--g) 0; }
.info h1 { font: 400 30px/1.1 var(--serif); }
.price { margin-top: 8px; font-size: 16px; letter-spacing: .04em; }
.price span { font-size: 12px; color: var(--grey); }
.tax { font-size: 12.5px; color: var(--grey); padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.opt { border: 0; margin: 20px 0 0; padding: 0; }
.opt legend { padding: 0; color: var(--grey); }
.opt legend b { font-weight: 500; color: var(--black); }
.swatches { display: flex; gap: 6px; margin-top: 8px; }
.swatches label { position: relative; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches i { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); outline: 1px solid transparent; outline-offset: 4px; transition: outline-color .25s; }
.swatches label:hover i { outline-color: rgba(0,0,0,.3); }
.swatches input:checked + i { outline-color: var(--black); }
.swatches input:focus-visible + i { outline: 2px solid var(--black); }

.btn-bag { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 22px; background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--radius); font-size: 12.5px; transition: opacity .25s, background .3s; }
.btn-bag:hover { opacity: .86; }
.btn-bag:active { transform: translateY(1px); }
.btn-bag.is-added { background: color-mix(in srgb, var(--btn-bg) 84%, #fff); }
.wish { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 6px; }
.wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; transition: fill .2s; }
.wish[aria-pressed="true"] svg { fill: currentColor; }

.perks { display: grid; gap: 10px; margin: 18px 0 26px; padding: 16px 18px; background: var(--paper); font-size: 13.5px; }
.perks li { display: flex; align-items: center; gap: 12px; }
.perks .ic { width: 22px; height: 22px; margin: 0; flex: none; }

.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .3s var(--ease); }
.acc[open] summary svg { transform: rotate(180deg); }
.acc__body { padding: 0 0 20px; color: var(--grey); font-size: 14px; }
.acc__body p + p { margin-top: 8px; }
.spec { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0; }
.spec dt { color: var(--black); } .spec dd { margin: 0; }
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pairs a { display: grid; gap: 6px; text-align: center; color: var(--black); }
.pairs__img { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--paper); }
.pairs__img .mi { font-size: 40px; stroke-width: 1; }
.pairs b { font-size: 10px; font-weight: 500; line-height: 1.4; }
.pairs span:last-child { font-size: 12px; color: var(--grey); }

.also { padding: 72px 0 80px; }
.also h2 { font: 400 30px/1.1 var(--serif); text-align: center; margin-bottom: 28px; }

/* Buy bar: appears when the main Add to bag button leaves the screen. Phone: bottom. Computer: under the header. */
.buybar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; background: var(--alabaster); border-top: 1px solid var(--line); padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .4s var(--ease); }
.buybar.show { transform: none; }
.buybar__in { display: flex; align-items: center; gap: 12px; }
.buybar img { display: none; width: 48px; height: 60px; object-fit: cover; }
.buybar__txt { display: grid; flex: 1; min-width: 0; font-size: 12.5px; color: var(--grey); }
.buybar__txt b { font: 400 17px/1.2 var(--serif); color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__txt span { display: flex; gap: 8px; }
.buybar .btn-bag { width: auto; min-width: 150px; min-height: 48px; margin: 0; padding: 0 20px; }

@media (min-width: 1024px) {
  .crumbs { padding: 18px var(--g) 22px; }
  .pdp__grid { display: grid; grid-template-columns: 64px minmax(0, 7fr) minmax(340px, 4.4fr); gap: 0 36px; padding: 0 var(--g); align-items: start; }
  .thumbs { position: sticky; top: calc(var(--hh) + 24px); display: grid; gap: 10px; }
  .thumbs button { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .25s, opacity .25s; opacity: .7; }
  .thumbs button img { width: 100%; height: 100%; object-fit: cover; }
  .thumbs button .mi { width: 100%; height: 100%; padding: 14px; stroke-width: 1.4; background: #DDD6CD; }
  .thumbs button.on { outline-color: var(--black); opacity: 1; }
  .thumbs button:hover { opacity: 1; }
  .gallery { display: grid; gap: 12px; overflow: visible; }
  .slide { flex: none; }
  .gdots { display: none; }
  .info { position: sticky; top: calc(var(--hh) + 24px); padding: 0 0 0 8px; }
  .info h1 { font-size: 38px; }
  .also { padding: 112px 0 96px; }
  .also h2 { font-size: 36px; margin-bottom: 40px; }
  .also .rail { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin: 0 auto; }
  .buybar { top: var(--hh); bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); padding: 10px var(--g); transform: translateY(-110%); z-index: 35; }
  .buybar.show { transform: none; }
  .buybar img { display: block; }
  .buybar__txt b { font-size: 19px; }
  .buybar .btn-bag { min-width: 220px; }
}

/* ================= Shared by the inner pages ================= */
.wrap { padding-left: var(--g); padding-right: var(--g); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: var(--radius); transition: opacity .25s, background .3s, color .3s; }
.btn:hover { opacity: .86; }
.btn:active { transform: translateY(1px); }
.btn--line { background: transparent; color: var(--black); border-color: var(--black); }
.btn--line:hover { background: var(--black); color: var(--alabaster); opacity: 1; }
.btn--full { width: 100%; }
.muted { color: var(--grey); }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Page titles: one line of serif, centred, like the shop's collection pages. */
.phead { padding: 40px var(--g) 28px; text-align: center; }
.phead h1 { font: 400 34px/1.1 var(--serif); }
.phead p { margin-top: 10px; color: var(--grey); }
@media (min-width: 1024px) { .phead { padding: 64px var(--g) 40px; } .phead h1 { font-size: 46px; } }

/* Heart on product cards and the product page. */
.heart { position: absolute; z-index: 3; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--black); }
.heart svg, .wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; transition: fill .2s, transform .2s; }
.heart[aria-pressed="true"] svg, .wish[aria-pressed="true"] svg { fill: currentColor; }
.heart:active svg { transform: scale(.88); }

/* Side panels: the bag and the filters. Right side on every screen. */
.panel { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.panel__bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
.panel__box { position: absolute; inset: 0 0 0 auto; width: min(92vw, 440px); display: flex; flex-direction: column; background: var(--alabaster); transform: translateX(100%); transition: transform .4s var(--ease); }
.panel.open { visibility: visible; } .panel.open .panel__bg { opacity: 1; } .panel.open .panel__box { transform: none; }
.panel__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--hh); padding: 0 calc(var(--g) - 10px) 0 var(--g); border-bottom: 1px solid var(--line); }
.panel__top h2 { font: 400 22px/1.2 var(--serif); }
.panel__body { flex: 1; overflow-y: auto; padding: 0 var(--g); overscroll-behavior: contain; }
.panel__foot { padding: 16px var(--g) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
@media (min-width: 1024px) { .panel__top, .panel__body, .panel__foot { padding-left: 32px; padding-right: 32px; } .panel__top { padding-right: 22px; } }

/* Free shipping line */
.ship { padding: 16px 0 4px; font-size: 13px; }
.ship__bar { height: 2px; margin-top: 10px; background: rgba(0,0,0,.12); }
.ship__bar i { display: block; height: 100%; background: var(--black); transition: width .5s var(--ease); }

/* A line in the bag */
.line { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__img .ph .mi { font-size: 34px; }
.line__top { display: flex; justify-content: space-between; gap: 12px; }
.line__name { font: 400 18px/1.2 var(--serif); }
.line__opts { font-size: 13px; color: var(--grey); margin-top: 2px; }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.line__rm { min-height: 44px; font-size: 12.5px; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.line__rm:hover { color: var(--black); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.qty button { display: grid; place-items: center; width: 40px; height: 40px; }
.qty button:disabled { opacity: .3; cursor: default; }
.qty svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.qty output { min-width: 26px; text-align: center; font-size: 14px; }
.sum { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sum--total { font: 400 20px/1.2 var(--serif); }
.empty { display: grid; justify-items: center; gap: 14px; padding: 56px 0; text-align: center; }
.empty .mi { font-size: 56px; stroke-width: .9; }
.empty h2, .empty h3 { font: 400 24px/1.2 var(--serif); }
.empty p { color: var(--grey); max-width: 34ch; }

/* Forms: visible labels, boxed fields, errors under the field. */
:root { --line-strong: rgba(0,0,0,.3); }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-size: 13px; }
.field label .opt-t { color: var(--grey); }
.inp { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0; color: var(--black); font: 400 16px/1.4 var(--sans); }
.inp:focus { outline: 2px solid var(--black); outline-offset: 0; border-color: var(--black); }
textarea.inp { min-height: 120px; resize: vertical; }
select.inp { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field.bad .inp { border-color: #9B1C1C; }
.err { display: none; font-size: 13px; color: #9B1C1C; }
.field.bad .err { display: block; }
.alert { padding: 14px 16px; border: 1px solid #9B1C1C; color: #9B1C1C; font-size: 14px; }
.alert:focus { outline: 2px solid #9B1C1C; outline-offset: 2px; }
.alert ul { margin-top: 6px; list-style: disc; padding-left: 20px; }
.alert a { text-decoration: underline; }
.form { display: grid; gap: 18px; }
.row2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--black); flex: none; }

/* Small message that confirms an action */
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 12px 20px; background: var(--black); color: var(--alabaster); font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= Shop ================= */
.cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 var(--g) 24px; }
.cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 13px; }
.cats a[aria-current] { background: var(--black); border-color: var(--black); color: var(--alabaster); }
.cats a:not([aria-current]):hover { border-color: var(--black); }
.tools { position: sticky; top: var(--hh); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 var(--g); background: var(--alabaster); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tools__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.tools__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.tools__count { font-size: 13px; color: var(--grey); }
.sort { position: relative; display: inline-flex; align-items: center; }
.sort select { appearance: none; min-height: 44px; padding: 0 24px 0 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; border: 0; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--black); cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--g) 0; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: var(--paper); font-size: 13px; }
.chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.chip--clear { background: none; text-decoration: underline; text-underline-offset: 3px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 10px; padding: 24px var(--g) 0; }
.grid .feature { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #3b3530; color: var(--alabaster); }
.feature img { width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.feature__text { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 6px; justify-items: start; }
.feature__text h2 { font: 400 26px/1.1 var(--serif); }
.grid .empty { grid-column: 1 / -1; }
.shop { padding-bottom: 96px; }
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: 48px 16px; padding-top: 32px; }
  .grid .feature { grid-column: span 2; aspect-ratio: auto; min-height: 100%; }
  .feature__text { left: 32px; bottom: 32px; } .feature__text h2 { font-size: 32px; }
  .tools__count { position: absolute; left: 50%; transform: translateX(-50%); }
}
.fgroup { border: 0; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.fgroup legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.fgroup legend + * { clear: both; }
.fgroup .check { padding-top: 0; align-items: center; }
.fgroup .check i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: none; }
.fgroup .check span { flex: 1; }
.fgroup .check small { color: var(--grey); font-size: 12.5px; }
.panel__foot .row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.panel__foot .row .link { min-height: 44px; padding: 0 12px; }

/* ================= Bag page ================= */
.bag { padding: 0 var(--g) 96px; }
.bag__lines .line { grid-template-columns: 110px 1fr; gap: 18px; padding: 24px 0; }
.bag__lines { border-top: 1px solid var(--line); }
.bag__sum { margin-top: 32px; padding: 24px; background: var(--paper); display: grid; gap: 12px; align-self: start; }
.bag__sum h2 { font: 400 24px/1.2 var(--serif); margin-bottom: 4px; }
.bag__sum hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.bag__sum .small { font-size: 12.5px; color: var(--grey); }
.bag__sum .ship { padding-top: 0; }
.line__save { min-height: 44px; font-size: 12.5px; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; margin-right: 14px; }
.line__save:hover { color: var(--black); }
.line__price { font-size: 14px; white-space: nowrap; }
@media (min-width: 1024px) {
  .bag { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 64px; max-width: 1240px; margin: 0 auto; }
  .bag .empty { grid-column: 1 / -1; }
  .bag__lines .line { grid-template-columns: 140px 1fr; gap: 24px; }
  .bag__sum { margin-top: 0; position: sticky; top: calc(var(--hh) + 24px); padding: 32px; }
}

/* ================= Checkout ================= */
.co-hdr { position: static; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); }
.co-hdr .secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey); }
.co-hdr .secure svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.co { display: grid; }
.co__main { padding: 28px var(--g) 64px; display: grid; gap: 36px; align-content: start; }
.co__main h2 { font: 400 24px/1.2 var(--serif); margin-bottom: 14px; }
.co__main h2 small { float: right; font: 400 13px/2 var(--sans); }
.express { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.express button { min-height: 48px; background: var(--black); color: var(--alabaster); font: 600 14px/1 var(--sans); letter-spacing: .02em; }
.express button:hover { opacity: .86; }
.or { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 12.5px; color: var(--grey); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.opts { display: grid; border: 1px solid var(--line-strong); }
.opts label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; font-size: 14px; }
.opts label + label { border-top: 1px solid var(--line-strong); }
.opts input { width: 18px; height: 18px; margin: 0; accent-color: var(--black); }
.opts label span { flex: 1; }
.opts label:has(input:checked) { background: var(--paper); }
.opts .note { padding: 0 16px 16px 46px; font-size: 13px; color: var(--grey); background: var(--paper); }
.co__side { background: var(--paper); border-bottom: 1px solid var(--line); }
.co__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 var(--g); font-size: 14px; }
.co__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .3s; margin-left: 6px; vertical-align: -3px; }
.co__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.co__toggle b { font: 400 18px/1 var(--serif); }
.co__sum { display: none; padding: 0 var(--g) 24px; }
.co__sum.open { display: grid; gap: 12px; }
.co__sum .line { grid-template-columns: 64px 1fr; border-bottom: 1px solid var(--line); padding: 14px 0; }
.co__sum .line:last-of-type { border-bottom: 0; }
.co__sum .line__name { font-size: 16px; }
.co__sum hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 2px 0; }
.co__sum .line__img { position: relative; overflow: visible; }
.co__sum .line__img .qn { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--grey); color: var(--alabaster); font: 600 11px/20px var(--sans); text-align: center; }
.co__fine { font-size: 12.5px; color: var(--grey); }
.co-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 20px var(--g); border-top: 1px solid var(--line); font-size: 12.5px; }
.co-foot a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }
.done { display: grid; gap: 16px; justify-items: start; }
.done .mi { font-size: 48px; stroke-width: .9; }
.done h1 { font: 400 34px/1.1 var(--serif); }
.done dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.done dt { color: var(--grey); } .done dd { margin: 0; }
.pv-note { padding: 12px 14px; background: var(--paper); font-size: 13px; color: var(--grey); }
@media (min-width: 1024px) {
  .co { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr); min-height: calc(100svh - var(--hh)); }
  .co__main { padding: 48px 64px 80px max(var(--g), calc(50vw - 640px)); max-width: none; }
  .co__main > * { max-width: 600px; margin-left: auto; width: 100%; }
  .co__side { order: 2; border-bottom: 0; border-left: 1px solid var(--line); }
  .co__toggle { display: none; }
  .co__sum, .co__sum.open { display: grid; gap: 14px; position: sticky; top: 0; padding: 48px 48px; max-width: 520px; }
}

/* ================= Our Story ================= */
.st-hero { position: relative; height: min(78svh, 720px); overflow: hidden; background: #3b3530; color: var(--alabaster); margin-top: calc(-1 * var(--hh)); }
.st-hero img { width: 100%; height: 100%; object-fit: cover; }
.st-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hh) + 60px); z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0)); }
.st-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.st-hero__text { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: 36px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.st-hero h1 { font: 400 40px/1.05 var(--serif); }
.st-hero p { max-width: 40ch; font-size: 14px; }
.st-intro { padding: 72px var(--g); text-align: center; }
.st-intro p { max-width: 34ch; margin: 0 auto; font: 400 24px/1.35 var(--serif); }
.st-block { display: grid; gap: 24px; padding: 0 0 72px; }
.st-block__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.st-block__img img { width: 100%; height: 100%; object-fit: cover; }
.st-block__img--black { display: grid; place-items: center; background: var(--black); color: var(--alabaster); font-size: 160px; }
.st-block__img--black .mi { stroke-width: .5; }
.st-block__text { padding: 0 var(--g); display: grid; gap: 12px; align-content: center; }
.st-block__text h2 { font: 400 30px/1.1 var(--serif); }
.todo { padding: 14px 16px; border: 1px dashed var(--line-strong); color: var(--grey); font-size: 14px; }
.st-marks { display: flex; justify-content: center; gap: 28px; padding: 24px 0 72px; font-size: 44px; }
.st-quote { padding: 88px var(--g); background: var(--black); color: var(--alabaster); text-align: center; display: grid; gap: 24px; justify-items: center; }
.st-quote .todo { color: #A39E98; border-color: color-mix(in srgb, var(--alabaster) 30%, transparent); max-width: 46ch; }
.st-quote .btn { background: var(--alabaster); color: var(--black); border-color: var(--alabaster); }
@media (min-width: 1024px) {
  .st-hero { height: min(calc(100svh - 37px), 860px); }
  .st-hero h1 { font-size: 64px; }
  .st-intro { padding: 120px var(--g); } .st-intro p { font-size: 32px; }
  .st-block { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .st-block:nth-of-type(even) .st-block__img { order: 2; }
  .st-block__img { aspect-ratio: 1 / 1.1; }
  .st-block__text { padding: 64px max(64px, 8vw); }
  .st-block__text h2 { font-size: 40px; }
  .st-block__img--black { font-size: 260px; }
  .st-marks { padding: 112px 0; }
  .st-quote { padding: 140px var(--g); }
}

/* ================= Help pages ================= */
.help { padding: 0 var(--g) 96px; }
.help__nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--g)) 32px; padding: 0 var(--g) 4px; scrollbar-width: none; }
.help__nav::-webkit-scrollbar { display: none; }
.help__nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 13px; }
.help__nav a[aria-current] { background: var(--black); border-color: var(--black); color: var(--alabaster); }
.prose { max-width: 680px; }
.prose h2 { font: 400 26px/1.2 var(--serif); margin: 40px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 500 15px/1.4 var(--sans); margin: 20px 0 4px; }
.prose p, .prose li { color: #2E2B28; }
.prose p + p { margin-top: 10px; }
.prose ul, .prose ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose strong { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 500; }
.table-scroll { overflow-x: auto; }
.faq h2 { margin-bottom: 4px; }
.faq .acc summary { font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; gap: 16px; padding: 10px 0; }
.faq .acc:last-of-type { border-bottom: 1px solid var(--line); }
.faq .acc__body { color: #2E2B28; }
.contact { display: grid; gap: 40px; }
.contact__aside { display: grid; gap: 12px; align-content: start; }
.contact__aside h2 { margin: 0; }
.sent { display: grid; gap: 12px; justify-items: start; padding: 24px; background: var(--paper); }
.sent h2 { font: 400 24px/1.2 var(--serif); margin: 0; }
@media (min-width: 1024px) {
  .help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 80px; max-width: 1200px; margin: 0 auto; }
  .help__nav { flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: visible; position: sticky; top: calc(var(--hh) + 24px); align-self: start; }
  .help__nav a { border: 0; border-left: 1px solid var(--line); padding: 0 18px; min-height: 44px; font-size: 14px; }
  .help__nav a[aria-current] { background: none; color: var(--black); border-left: 2px solid var(--black); padding-left: 17px; }
  .help__nav a:not([aria-current]) { color: var(--grey); } .help__nav a:not([aria-current]):hover { color: var(--black); }
  .contact { grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; }
  .contact__aside { order: 2; }
}

/* ================= Account ================= */
.acct { padding: 0 var(--g) 96px; display: grid; gap: 48px; max-width: 1080px; margin: 0 auto; }
.acct h2 { font: 400 26px/1.2 var(--serif); margin-bottom: 16px; }
.acct__new { padding: 28px 24px; background: var(--paper); display: grid; gap: 14px; align-content: start; }
.acct__new ul { display: grid; gap: 10px; }
.acct__new li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.acct__new .ic { width: 22px; height: 22px; margin: 0; flex: none; }
.pw { position: relative; }
.pw .inp { padding-right: 64px; }
.pw button { position: absolute; right: 0; top: 0; height: 50px; min-width: 60px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.dash { display: grid; gap: 32px; }
.dash__nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.dash__nav a, .dash__nav button { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 13px; }
.dash__nav [aria-current] { background: var(--black); border-color: var(--black); color: var(--alabaster); }
.dash__cards { display: grid; gap: 12px; }
.dash__card { padding: 24px; background: var(--paper); display: grid; gap: 8px; align-content: start; }
.dash__card h3 { font: 400 20px/1.2 var(--serif); }
.dash__card p { font-size: 14px; color: var(--grey); }
.dash__card .link { justify-self: start; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
@media (min-width: 1024px) {
  .acct { grid-template-columns: 1fr 1fr; gap: 80px; }
  .acct__new { padding: 40px; }
  .acct .dash { grid-column: 1 / -1; }
  .dash__cards { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Search ================= */
.srch { padding: 32px var(--g) 0; max-width: 820px; margin: 0 auto; }
.srch form { position: relative; }
.srch .inp { min-height: 60px; padding: 0 56px 0 0; background: transparent; border: 0; border-bottom: 1px solid var(--black); font: 400 28px/1.2 var(--serif); }
.srch .inp:focus { outline: none; border-bottom-width: 2px; }
.srch .inp::placeholder { color: #8A857F; }
.srch form button { position: absolute; right: 0; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; }
.srch form button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.sugg span { font-size: 13px; color: var(--grey); margin-right: 4px; }
.sugg button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 13px; }
.sugg button:hover { border-color: var(--black); }
.srch__count { padding: 32px var(--g) 0; text-align: center; color: var(--grey); font-size: 13px; }
@media (min-width: 1024px) { .srch { padding-top: 56px; } .srch .inp { font-size: 40px; min-height: 76px; } .srch form button { top: 16px; } }

/* Product page: material and size boxes, error under the options */
.boxes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.boxes label { position: relative; cursor: pointer; }
.boxes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.boxes span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); font-size: 14px; transition: border-color .2s, background .2s, color .2s; }
.boxes label:hover span { border-color: var(--black); }
.boxes input:checked + span { background: var(--black); border-color: var(--black); color: var(--alabaster); }
.boxes input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.boxes small { font-size: 12.5px; opacity: .75; }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.opt__head a { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.opt.bad .boxes span { border-color: #9B1C1C; }
.opt .err { margin-top: 8px; }
.opt.bad .err { display: block; }
.card__add { margin-top: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); font-size: 11px; }
.card__add:hover { border-color: var(--black); }
.opt { position: relative; }
.sg { position: absolute; right: 0; top: -31px; display: inline-flex; align-items: center; min-height: 36px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.buybar #bb-img { display: none; width: 48px; height: 60px; }
@media (min-width: 1024px) { .buybar #bb-img { display: block; } }

.buybar { visibility: hidden; transition: transform .4s var(--ease), visibility 0s .4s; }
.buybar.show { visibility: visible; transition: transform .4s var(--ease); }
.line__row { flex-wrap: wrap; }
.line__row > span { display: inline-flex; flex-wrap: wrap; gap: 0 14px; }
.line__save { margin-right: 0; }

.drawer__small { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: auto; padding-top: 24px; }
.drawer__small a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--grey); border: 0; font-family: var(--sans); }

/* ---------- Store-only additions (src/parts/store.css) ---------- */
/* Styles the WooCommerce store needs on top of the preview's. Same tokens, same look. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--black); color: var(--alabaster); }
.skip:focus { top: 12px; }
.ribbon span { display: inline-block; }
.empty--page { min-height: 50vh; align-content: center; padding: 80px var(--g); }
.empty--page h1 { font: 400 28px/1.2 var(--serif); max-width: 22ch; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--g) 72px; }
.card__flag { position: absolute; z-index: 3; top: 14px; left: 12px; padding: 4px 8px; background: var(--alabaster); font-size: 10px; pointer-events: none; }
.card__price del { margin-right: 4px; opacity: .7; }
.card__low { margin-top: 2px; font-size: 12px; color: var(--grey); }
[hidden] { display: none !important; }
.boxes label.is-out span { color: var(--grey); text-decoration: line-through; }
.swatches label.is-out i { opacity: .45; }
.pdp__stock { min-height: 0; margin-top: 14px; font-size: 13px; color: var(--grey); }
.pdp__stock:empty { display: none; }
.pdp__short { margin-top: 14px; color: var(--grey); font-size: 14px; }
.price del { margin-right: 6px; color: var(--grey); }
.btn-bag:disabled { opacity: .45; cursor: not-allowed; }
#sizeguide .panel__body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#sizeguide .panel__body th, #sizeguide .panel__body td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.prose-sm p + p { margin-top: 8px; }
@font-face { font-family: "Amiri"; src: url(../fonts/amiri.woff2) format("woff2"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
.hero picture { display: block; width: 100%; height: 100%; }
.hero__ph { position: absolute; inset: 0; background: #3b3530; color: var(--alabaster); font-size: 120px; }

/* Verse band: black, centred, the Arabic large. */
.verse { display: grid; justify-items: center; gap: 14px; padding: 88px var(--g); background: var(--black); color: var(--alabaster); text-align: center; }
.verse__mark { font-size: 44px; }
.verse__mark .mi { stroke-width: .8; }
.verse__ar { font: 400 34px/1.6 "Amiri", var(--serif); }
.verse__en { max-width: 30ch; font: 400 italic 24px/1.3 var(--serif); }
.verse__ref { color: #A39E98; }
.verse .ul { margin-top: 6px; }
@media (min-width: 1024px) { .verse { padding: 128px var(--g); gap: 18px; } .verse__ar { font-size: 52px; } .verse__en { font-size: 32px; } }

/* Instagram photos */
.insta { padding: 72px 0 0; }
.insta__head { display: grid; justify-items: center; gap: 4px; padding: 0 var(--g) 28px; text-align: center; }
.insta__head h2 { font: 400 30px/1.1 var(--serif); }
.insta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.insta__grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .insta { padding-top: 112px; } .insta__head h2 { font-size: 36px; } .insta__grid { grid-template-columns: repeat(6, 1fr); } }
.st-quote__text { max-width: 46ch; margin: 0 auto 28px; font: 400 26px/1.35 var(--serif); }
.st-quote__text footer { margin-top: 18px; font-size: 11.5px; color: #A39E98; }
@media (min-width: 1024px) { .st-quote__text { font-size: 34px; } }

/* Account area (WooCommerce pages in the preview's style) */
.acct-wrap { padding: 0 var(--g) 96px; max-width: 1080px; margin: 0 auto; }
.acct-wrap .acct { padding: 0; max-width: none; }
.acct-wrap .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--grey); }
.acct-wrap .woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: 3px; }
.acct-wrap .dash__body { display: grid; gap: 20px; font-size: 14.5px; }
.acct-wrap .dash__body > p b { font-weight: 500; }
.acct-wrap .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; margin: 0 0 20px; padding: 14px 16px; background: var(--paper); border-left: 2px solid var(--black); font-size: 14px; }
.woocommerce-error { border-left-color: #9B1C1C; color: #9B1C1C; }
.woocommerce-message .button, .woocommerce-info .button { float: right; text-decoration: underline; text-underline-offset: 3px; }
.acct-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acct-wrap th, .acct-wrap td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.acct-wrap th { font-weight: 500; }
.acct-wrap .button, .acct-wrap button[type="submit"]:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--black); color: var(--alabaster); font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.acct-wrap .woocommerce-orders-table .button { min-height: 36px; padding: 0 12px; margin: 2px; }
.acct-wrap .form-row { display: grid; gap: 6px; margin: 0 0 16px; }
.acct-wrap .form-row label { font-size: 13px; }
.acct-wrap input.input-text, .acct-wrap select, .acct-wrap textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0; font: inherit; }
.acct-wrap .woocommerce-Addresses { display: grid; gap: 16px; }
.acct-wrap .woocommerce-Address { padding: 24px; background: var(--paper); }
.acct-wrap .woocommerce-Address-title h2, .acct-wrap h2 { font: 400 22px/1.2 var(--serif); margin-bottom: 8px; }
@media (min-width: 1024px) { .acct-wrap .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } .acct-wrap .acct { grid-template-columns: 1fr 1fr; gap: 80px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Checkout (WooCommerce classic checkout in the preview's layout) */
.is-checkout #hdr { position: static; }
.co__main .woocommerce-NoticeGroup, .co__main > .woocommerce-error { margin: 0; }
.co__main .woocommerce-error li { margin: 2px 0 2px 18px; list-style: disc; }
.co__main .woocommerce-invalid .inp { border-color: #9B1C1C; }
.co__main .create-account { display: grid; gap: 18px; }
/* Collapsed (not display:none, so Stripe can still lay out and size its button) until a wallet button shows. */
.co__express:not(.on) { height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; }
.co__pay ul.payment_methods { display: grid; gap: 0; border: 1px solid var(--line-strong); margin: 0 0 8px; }
.co__pay ul.payment_methods > li { padding: 14px 16px; list-style: none; }
.co__pay ul.payment_methods > li + li { border-top: 1px solid var(--line-strong); }
.co__pay ul.payment_methods > li > label { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 14px; cursor: pointer; }
.co__pay ul.payment_methods > li > input { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--black); vertical-align: middle; }
.co__pay ul.is-single > li > input, .co__pay ul.is-single > li > label { display: none; }
.co__pay ul.is-single > li { padding: 16px; }
.co__pay .payment_box { padding-top: 12px; font-size: 13.5px; color: var(--grey); }
.co__pay .payment_box p:last-child { margin-bottom: 0; }
.co__pay .wc-stripe-upe-element, .co__pay .wc-upe-form { margin-top: 4px; }
.co__coupon { margin-top: 4px; font-size: 13.5px; }
.co__coupon summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; display: flex; align-items: center; }
.co__coupon-row { display: flex; gap: 8px; margin-top: 8px; }
.co__coupon-row .btn { min-height: 50px; padding: 0 16px; }
.blockUI.blockOverlay { background: color-mix(in srgb, var(--alabaster) 60%, transparent) !important; }
.co__sum .line__price .woocommerce-Price-amount { font-weight: inherit; }
.woocommerce-order { display: grid; gap: 24px; max-width: 760px; margin: 0 auto; padding: 48px var(--g) 96px; }
.woocommerce-order h2, .woocommerce-order .woocommerce-thankyou-order-received { font: 400 26px/1.2 var(--serif); }
.woocommerce-order ul.order_details { display: grid; gap: 8px; padding: 20px 24px; background: var(--paper); font-size: 14px; }
.woocommerce-order table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-order th, .woocommerce-order td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.co__notice { padding: 14px 16px; border: 1px solid #9B1C1C; color: #9B1C1C; font-size: 14px; background: transparent; }
.co__notice ul { margin: 0; padding: 0; } .co__notice li { list-style: none; }
.co__notice .wc-block-components-notice-banner__content { padding: 0; }
.co__notice svg { display: none; }
.co__sum .line__img .ph { background: var(--alabaster); }
.co__sum .line__img .ph .mi { font-size: 30px; }

/* Mundri › Design: "second photo" switched off shows only the first photo of each piece. */
.no-worn .dw > .worn, .no-worn .dots { display: none !important; }
/* Shipping notice (Mundri › Site details), on product pages, in the bag and at checkout. */
.notice-line { margin: 14px 0 0; padding: 10px 14px; background: var(--paper); border-left: 2px solid var(--black); font-size: 13px; line-height: 1.5; }
/* Social links under the footer's brand line. */
.foot__social { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 18px; }
.foot__social a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Email and WhatsApp (Mundri › Site details › Email and WhatsApp) ---------- */
.foot__mail { margin-top: 10px; }
.foot__mail a { text-decoration: underline; text-underline-offset: 3px; }
.reach { display: grid; gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
.reach li { display: grid; gap: 2px; }
.reach .caps { color: var(--grey); font-size: 11px; }
.reach a { font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.wa-btn { position: fixed; z-index: 34; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 52px; height: 52px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .4s var(--ease), opacity .3s; }
.wa-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.wa-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
body:has(.buybar.show) .wa-btn { transform: translateY(calc(-1 * (72px + env(safe-area-inset-bottom)))); }
body:has(.panel.open, .drawer.open) .wa-btn { opacity: 0; pointer-events: none; }
@media (min-width: 1024px) {
  .wa-btn { right: 24px; bottom: 24px; width: auto; height: 48px; padding: 0 20px 0 16px; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .wa-btn span { position: static; width: auto; height: auto; clip: auto; }
  .wa-btn svg { width: 20px; height: 20px; }
}
@media (hover: hover) { .wa-btn:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .wa-btn { transition: none; } }
.co__express .sr-only { margin: 0; }
.co__express #wc-stripe-express-checkout-element { margin-top: 0 !important; }
.co__express #wc-stripe-express-checkout-button-separator { display: none !important; } /* our own "Or pay by card" line is used */