/* Marisol storefront. Placeholder wordmark in Bodoni Moda; interface in Jost.
   One type scale, one spacing scale, two easing curves. */
:root {
  --ink:#141413; --ink-soft:#3a3936; --muted:#77746e; --line:#e7e4de; --paper:#fff; --ivory:#f6f4ef;
  --accent:#8d2925;
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Jost','Futura','Century Gothic',Arial,sans-serif;
  --edge:48px; --gap:10px; --header:76px;
  /* Panels: slow start, fast through the middle, slow settle (and the reverse on close). */
  --ease-panel:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-panel:.78s;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 24px); scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); background:var(--paper); font:300 14px/1.6 var(--sans); letter-spacing:.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:var(--ink); color:#fff; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; border-radius:0; }
button,a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; font-weight:inherit; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
svg { flex:none; }
:focus-visible { outline:1px solid var(--ink); outline-offset:4px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:var(--edge); z-index:200; padding:12px 16px; background:#fff; transform:translateY(-200%); }
.skip-link:focus { transform:none; }

/* Header: menu and search left, centered wordmark, account and bag right. */
.site-header {
  position:fixed; inset:0 0 auto; height:var(--header); z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--edge);
  background:transparent; transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .6s var(--ease-out);
}
.site-header.is-solid,.site-header:focus-within,body:not(.home-page) .site-header { background:#fff; box-shadow:0 1px 0 var(--line); }
.site-header.is-hidden { transform:translateY(-100%); }
@media(hover:hover) { .site-header:hover { background:#fff; box-shadow:0 1px 0 var(--line); } }
.header-side { display:flex; align-items:center; gap:22px; }
.header-right { justify-content:flex-end; gap:6px; }
.brand { font:400 26px/1 var(--serif); letter-spacing:.32em; margin-right:-.32em; white-space:nowrap; }
.header-tool,.menu-toggle { position:relative; display:inline-flex; align-items:center; gap:12px; min-width:44px; height:44px; padding:0; border:0; background:none; font-size:13px; font-weight:400; }
.header-right .header-tool { justify-content:center; }
.header-label { position:relative; }
.header-label::after,.underline-link::after,.menu-secondary>*::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out); }
@media(hover:hover) {
  .header-tool:hover .header-label::after,.menu-toggle:hover .header-label::after,.menu-secondary>*:hover::after { transform:scaleX(1); transform-origin:left; }
}
.count-dot { position:absolute; top:6px; right:4px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--ink); color:#fff; font-size:9px; font-weight:500; line-height:15px; text-align:center; letter-spacing:0; }
.burger { position:relative; display:block; width:20px; height:10px; }
.burger i { position:absolute; left:0; right:0; height:1.2px; background:currentColor; transition:transform .55s var(--ease-panel); }
.burger i:first-child { top:0; }
.burger i:last-child { bottom:0; }
/* The close control inside the menu starts as two lines and folds into a cross as the panel lands. */
.menu-panel.is-open .burger.is-x i:first-child { transform:translateY(4.4px) rotate(45deg); transition-delay:.32s; }
.menu-panel.is-open .burger.is-x i:last-child { transform:translateY(-4.4px) rotate(-45deg); transition-delay:.32s; }
.menu-toggle:hover .burger:not(.is-x) i:last-child { transform:scaleX(.6); transform-origin:left; }

/* Typographic building blocks. */
.section { padding:96px var(--edge); max-width:1680px; margin-inline:auto; }
.section-title { font:400 clamp(26px,2.4vw,34px)/1.2 var(--serif); text-align:center; margin-bottom:48px; letter-spacing:-.005em; }
.underline-link { position:relative; display:inline-block; font-size:13px; font-weight:400; letter-spacing:.04em; padding-block:6px; }
.underline-link::after { transform:scaleX(1); transform-origin:left; bottom:2px; }
@media(hover:hover) { a:hover .underline-link::after,.underline-link:hover::after { animation:underline-sweep .9s var(--ease-panel); } }
@keyframes underline-sweep { 0% { transform:scaleX(1); transform-origin:right; } 45% { transform:scaleX(0); transform-origin:right; } 46% { transform-origin:left; } 100% { transform:scaleX(1); transform-origin:left; } }
.text-button { padding:6px 0; border:0; background:none; font-size:12px; color:var(--muted); letter-spacing:.04em; transition:color .3s; }
.text-button:hover,.text-button[aria-pressed=true] { color:var(--ink); }
.text-button[aria-pressed=true] { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:14px 28px; font-size:13px; font-weight:400; letter-spacing:.06em; border:1px solid var(--ink); overflow:hidden; isolation:isolate; transition:color .5s var(--ease-out),border-color .5s; }
.button-dark { background:var(--ink); color:#fff; }
.button-dark::before { content:''; position:absolute; inset:0; z-index:-1; background:#3a3936; transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease-panel); }
@media(hover:hover) { .button-dark:hover::before { transform:scaleY(1); } }
.button-outline { background:#fff; color:var(--ink); }
.button-outline:hover { background:var(--ivory); }
.button-block { width:100%; }
.button:disabled { opacity:.5; cursor:default; }

/* Campaign */
.campaign { position:relative; isolation:isolate; overflow:hidden; background:#dfd9cd; height:100svh; min-height:560px; max-height:1100px; }
/* The photo is pinned to its top edge: wide or short screens trim only the bottom, never the top. */
.campaign-image { position:absolute; inset:0 0 auto; width:100%; max-width:none; height:100%; object-fit:cover; object-position:58% top; transform-origin:50% 0; z-index:-2; will-change:transform; animation:hero-settle 1.8s var(--ease-out) both; }
@keyframes hero-settle { from { scale:1.05; } to { scale:1; } }
.campaign::after { content:''; position:absolute; inset:auto 0 0; height:50%; z-index:-1; background:linear-gradient(0deg,#00000052,#0000001a 55%,transparent); pointer-events:none; }
.campaign-copy { position:absolute; left:0; right:0; bottom:64px; display:flex; flex-direction:column; align-items:center; gap:14px; color:#fff; text-align:center; }
.campaign-copy h1 { font:400 clamp(34px,4vw,60px)/1.05 var(--serif); letter-spacing:-.01em; }
.campaign-copy>* { animation:rise 1.4s var(--ease-out) both; }
.campaign-copy>*:nth-child(1) { animation-delay:.5s; }
.campaign-copy>*:nth-child(2) { animation-delay:.68s; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

/* Categories */
.categories-section { padding-bottom:40px; }
.category-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--gap); }
.category-card { display:block; min-width:0; text-align:center; }
.category-media { aspect-ratio:3/4; overflow:hidden; background:var(--ivory); margin-bottom:16px; }
.category-media svg { width:100%; height:100%; display:block; transition:transform 1.1s var(--ease-out); }
@media(hover:hover) { .category-card:hover svg { transform:scale(1.04); } }
.category-card h3 { font-size:13px; font-weight:400; letter-spacing:.03em; }

/* Product grid */
.featured-section { padding-top:56px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gap); row-gap:56px; }
.product-card { position:relative; min-width:0; }
.product-media { position:relative; display:block; aspect-ratio:3/4; background:var(--ivory); overflow:hidden; }
.product-media svg { display:block; width:100%; height:100%; transition:transform 1.2s var(--ease-out); }
@media(hover:hover) { .product-card:hover .product-media svg { transform:scale(1.03); } }
.product-media image,.category-media image,.gallery-photo image,.bag-thumb image,.menu-preview image { opacity:0; transition:opacity .9s var(--ease-out); }
svg.is-loaded image { opacity:1; }
.card-fav { position:absolute; top:6px; right:6px; z-index:2; }
.product-info { display:block; padding:16px 2px 0; }
.product-info h3 { font-size:13px; font-weight:400; letter-spacing:.02em; line-height:1.45; margin-bottom:4px; }
.product-price { font-size:13px; font-weight:400; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.card-controls { display:flex; align-items:center; margin:8px -6px 0; min-height:32px; }
.media-reference-note { position:absolute; left:10px; bottom:10px; font-size:10px; letter-spacing:.04em; color:var(--muted); background:#ffffffd9; padding:3px 8px; }
.section-more { margin-top:64px; text-align:center; }

/* Swatches and favorites */
.color-picker { display:flex; align-items:center; }
.card-swatches { overflow-x:auto; scrollbar-width:none; }
.card-swatches::-webkit-scrollbar { display:none; }
.color-swatch { flex:0 0 32px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:none; }
.swatch-chip { display:block; width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px #00000026; background:var(--swatch); transition:box-shadow .3s var(--ease-out); }
.swatch-chip.swatch-assorted { background:conic-gradient(from 30deg,#d1c4af,#746354,#c9899a,#73929e,#d1c4af); }
.color-swatch[aria-pressed=true] .swatch-chip { box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px #fff,0 0 0 3px var(--ink); }
.favorite-button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; background:none; }
.favorite-button svg { width:18px; height:18px; fill:transparent; transition:fill .35s var(--ease-out),transform .45s var(--ease-out); }
.favorite-button[aria-pressed=true] svg { fill:var(--ink); }
.favorite-button:active svg { transform:scale(.86); }

/* Line split */
.line-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); padding:0 0 var(--gap); }
.line-tile { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--ivory); color:#fff; isolation:isolate; }
.line-tile img { width:100%; height:100%; object-fit:cover; object-position:center top; transform-origin:50% 0; transition:transform 1.4s var(--ease-out); }
@media(hover:hover) { .line-tile:hover img { transform:scale(1.03); } }
.line-tile::after { content:''; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(0deg,#00000038,transparent); }
.line-copy { position:absolute; inset:auto 0 48px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; }
.line-name { font:400 clamp(28px,2.6vw,40px)/1.1 var(--serif); }

/* Footer */
.site-footer { padding:80px var(--edge) 28px; border-top:1px solid var(--line); }
.footer-grid { max-width:1600px; margin:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h2 { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; }
.footer-grid p,.footer-grid a:not(.brand) { display:block; font-size:13px; line-height:1.7; color:var(--ink-soft); margin-bottom:10px; }
.footer-grid a:not(.brand):hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.footer-brand .brand { font-size:22px; }
.footer-bottom { max-width:1600px; margin:64px auto 0; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* Panels share one motion system: slide from their edge with the panel easing. */
body:has(dialog[open]) { overflow:hidden; }
dialog { color:var(--ink); border:0; background:#fff; padding:0; max-width:none; max-height:none; }
dialog::backdrop { background:#14141300; transition:background-color var(--t-panel) var(--ease-panel); }
dialog.is-open::backdrop { background:#1414134d; }
.panel { position:fixed; margin:0; height:100dvh; overflow-y:auto; overscroll-behavior:contain; transition:transform var(--t-panel) var(--ease-panel); }
.panel-left { inset:0 auto 0 0; width:min(460px,100vw); transform:translateX(-100%); }
.panel-right { inset:0 0 0 auto; width:min(460px,100vw); transform:translateX(100%); padding:0 40px 40px; }
.panel-top { inset:0 0 auto; width:100vw; height:auto; max-height:90dvh; transform:translateY(-100%); }
.panel.is-open { transform:none; }
.panel[open] { display:flex; flex-direction:column; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header); }
.panel-heading h2 { font:400 22px/1.2 var(--serif); }
.close-button { display:grid; place-items:center; width:44px; height:44px; margin-right:-12px; padding:0; border:0; background:none; transition:transform .5s var(--ease-out); }
.close-button:hover { transform:rotate(90deg); }
/* Panel contents arrive just behind the panel edge. */
.panel .stagger,.menu-primary a,.menu-secondary { opacity:0; transform:translateX(-18px); transition:opacity .5s var(--ease-out),transform .7s var(--ease-out); }
.panel.is-open .stagger,.menu-panel.is-open .menu-primary a,.menu-panel.is-open .menu-secondary { opacity:1; transform:none; transition-delay:calc(.28s + var(--i,0) * 45ms); }

/* Menu */
.menu-panel { width:min(900px,100vw); display:none; }
.menu-panel[open] { display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); }
.menu-column { display:flex; flex-direction:column; padding:0 var(--edge) 40px; min-height:100%; overflow-y:auto; }
.menu-panel .panel-top { position:static; transform:none; width:auto; display:flex; align-items:center; height:var(--header); max-height:none; }
.menu-primary { display:flex; flex-direction:column; padding:40px 0 32px; }
.menu-primary a { display:block; padding:9px 0; font-size:22px; font-weight:300; letter-spacing:.01em; transition-property:opacity,transform,color; }
@media(hover:hover) {
  .menu-primary:hover a { color:#14141359; }
  .menu-primary a:hover { color:var(--ink); }
}
.menu-secondary { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:auto; padding-top:28px; border-top:1px solid var(--line); }
.menu-secondary>* { position:relative; padding:6px 0; border:0; background:none; font-size:13px; color:var(--ink-soft); }
.menu-preview { position:relative; background:var(--ivory); overflow:hidden; }
.menu-preview svg { position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(1.04); transition:opacity .7s var(--ease-out),transform 1.4s var(--ease-out); }
.menu-preview svg.is-active { opacity:1; transform:none; }

/* Search */
.search-panel .panel-inner { width:100%; max-width:1100px; margin:0 auto; padding:0 var(--edge) 48px; }
.search-form { flex:1; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--ink); }
.search-form input { flex:1; min-width:0; border:0; padding:14px 0; background:none; font-size:20px; font-weight:300; outline:none; }
.search-form input::placeholder { color:#14141366; }
.search-panel .panel-heading { gap:28px; padding-top:12px; }
.search-results-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:28px 0 8px; }
.search-result { display:flex; align-items:center; justify-content:space-between; min-height:52px; gap:20px; border-bottom:1px solid var(--line); font-size:14px; transition:padding .45s var(--ease-out); }
.search-result:hover { padding-left:8px; }
.search-result span:last-child { white-space:nowrap; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* Bag */
.bag-body { flex:1; display:flex; flex-direction:column; min-height:0; }
.bag-empty { padding-top:32px; color:var(--ink-soft); }
.bag-empty .underline-link { margin-top:16px; }
.bag-list { list-style:none; margin:0; padding:0; flex:1; }
.bag-item { display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.bag-thumb { display:block; aspect-ratio:3/4; background:var(--ivory); overflow:hidden; }
.bag-thumb svg { width:100%; height:100%; display:block; }
.bag-item h3 { font-size:13px; font-weight:400; margin-bottom:4px; }
.bag-item h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.bag-meta { font-size:12px; color:var(--muted); line-height:1.6; }
.bag-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.bag-line { font-size:13px; font-variant-numeric:tabular-nums; }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); height:34px; }
.stepper button { width:32px; height:32px; padding:0; border:0; background:none; font-size:16px; font-weight:300; }
.stepper button:disabled { opacity:.3; cursor:default; }
.stepper output { min-width:24px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.bag-remove { margin-top:6px; }
.bag-summary { position:sticky; bottom:-40px; background:#fff; padding:22px 0 0; border-top:1px solid var(--ink); }
.bag-total { display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.bag-note { font-size:11px; color:var(--muted); line-height:1.6; margin-bottom:18px; }
.bag-item.is-leaving { animation:item-out .45s var(--ease-out) forwards; }
@keyframes item-out { to { opacity:0; transform:translateX(24px); } }

/* Account: email first; the password row unfolds only for a known account. */
.login-form { padding-top:24px; }
.login-intro { color:var(--ink-soft); margin-bottom:28px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input { width:100%; min-height:46px; border:0; border-bottom:1px solid #c9c5bd; padding:10px 0; background:none; font-size:15px; font-weight:300; border-radius:0; outline:none; transition:border-color .35s; }
.field input:focus { border-bottom-color:var(--ink); }
.field input:read-only { color:var(--ink-soft); }
.field-row { display:flex; align-items:center; gap:12px; }
.field-edit { border:0; background:none; padding:6px 0; font-size:12px; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.password-step { display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-6px); transition:grid-template-rows .6s var(--ease-panel),opacity .45s var(--ease-out),transform .6s var(--ease-out); }
.password-step>div { overflow:hidden; }
.password-step.is-open { grid-template-rows:1fr; opacity:1; transform:none; }
.form-message { min-height:20px; font-size:12px; line-height:1.6; color:var(--ink-soft); margin:2px 0 14px; }
.form-message.is-error { color:var(--accent); }
.button.is-busy span { opacity:.4; }
.invite-note { margin-top:auto; padding-top:28px; border-top:1px solid var(--line); }
.invite-note h3 { font:400 17px/1.3 var(--serif); margin-bottom:8px; }
.invite-note p { font-size:13px; color:var(--ink-soft); }
.panel-right .login-form,.panel-right .invite-note { opacity:0; transform:translateX(18px); transition:opacity .5s var(--ease-out),transform .7s var(--ease-out); }
.panel-right.is-open .login-form,.panel-right.is-open .invite-note { opacity:1; transform:none; transition-delay:.3s; }

/* Catalogue */
.catalog-main,.product-main { padding:calc(var(--header) + 56px) var(--edge) 96px; max-width:1680px; margin:0 auto; min-height:70svh; }
.catalog-heading { text-align:center; margin-bottom:40px; }
.catalog-heading h1 { font:400 clamp(30px,3vw,42px)/1.15 var(--serif); margin-bottom:8px; }
.catalog-heading p { font-size:12px; letter-spacing:.06em; color:var(--muted); }
.catalog-filters { display:flex; align-items:center; gap:28px; padding-block:14px; margin-bottom:32px; border-block:1px solid var(--line); }
.catalog-query { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.catalog-query input { flex:1; min-width:0; min-height:40px; border:0; background:none; font-size:13px; outline:none; }
.select-wrap select { appearance:none; min-height:40px; padding:0 22px 0 0; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23141413' stroke-width='1.2'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right center; font-size:13px; cursor:pointer; }
.filter-links { display:flex; gap:20px; padding-left:28px; border-left:1px solid var(--line); }
.empty-state { text-align:center; padding:96px 20px; }
.empty-state h2 { font:400 26px/1.2 var(--serif); margin-bottom:14px; }
.empty-state p { color:var(--muted); margin-bottom:28px; }

/* Product detail */
.breadcrumbs { display:flex; gap:10px; font-size:11px; letter-spacing:.06em; color:var(--muted); margin-bottom:28px; }
.breadcrumbs a:hover { color:var(--ink); }
.product-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr); gap:6%; align-items:start; }
.detail-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); min-width:0; }
.gallery-item { margin:0; min-width:0; }
.gallery-item:only-child { grid-column:1/-1; max-width:720px; }
.gallery-photo { display:block; width:100%; aspect-ratio:3/4; overflow:hidden; border:0; background:var(--ivory); padding:0; cursor:zoom-in; }
.gallery-photo svg { display:block; width:100%; height:100%; }
.gallery-item figcaption { font-size:11px; color:var(--muted); padding:10px 2px 0; }
.detail-copy { position:sticky; top:calc(var(--header) + 32px); min-width:0; }
.detail-copy h1 { font:400 30px/1.2 var(--serif); margin-bottom:10px; }
.detail-ref { font-size:11px; letter-spacing:.08em; color:var(--muted); }
.detail-price { font-size:16px; font-weight:400; margin-top:18px; font-variant-numeric:tabular-nums; }
.selection-label { font-size:12px; letter-spacing:.04em; color:var(--ink-soft); margin:32px 0 8px; }
.detail-swatches { flex-wrap:wrap; margin-left:-8px; }
.detail-swatches .color-swatch { width:40px; height:40px; flex-basis:40px; }
.detail-swatches .swatch-chip { width:20px; height:20px; }
.availability-note { font-size:11px; color:var(--muted); line-height:1.7; margin-top:8px; }
.variant-photo-note { font-size:12px; line-height:1.7; color:var(--ink-soft); background:var(--ivory); padding:10px 12px; margin-top:12px; }
.size-picker { display:flex; flex-wrap:wrap; gap:8px; }
.size-picker.is-invalid { animation:nudge .5s var(--ease-out); }
@keyframes nudge { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }
.size-button { display:grid; place-items:center; min-width:52px; height:44px; padding:0 12px; background:#fff; border:1px solid var(--line); font-size:13px; transition:border-color .3s,background-color .3s,color .3s; }
.size-button:hover { border-color:var(--ink); }
.size-button[aria-pressed=true] { color:#fff; background:var(--ink); border-color:var(--ink); }
.selection-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:32px 0 8px; }
.selection-row .selection-label { margin:0; }
.size-guide-link { color:var(--ink-soft); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:var(--line); transition:color .3s,text-decoration-color .3s; }
.size-guide-link:hover { text-decoration-color:currentColor; }
.size-guide-product { font-size:11px; letter-spacing:.08em; color:var(--muted); margin:4px 0 28px; }
.size-table-wrap { overflow-x:auto; margin:0 -4px; }
.size-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.size-table th,.size-table td { padding:14px 8px; border-bottom:1px solid var(--line); text-align:center; font-weight:400; white-space:nowrap; }
.size-table thead th { font-size:11px; letter-spacing:.06em; color:var(--muted); border-bottom-color:var(--ink); }
.size-table tbody th { text-align:left; font-weight:500; }
.size-table thead th:first-child { text-align:left; }
.size-table tbody tr { transition:background-color .3s; }
.size-table tbody tr[aria-current=true] { background:var(--ivory); }
.size-guide-notes { margin-top:24px; font-size:12px; line-height:1.7; color:var(--muted); }
.size-guide-notes p + p { margin-top:8px; }
.size-guide-panel #size-guide-body { opacity:0; transform:translateX(18px); transition:opacity .5s var(--ease-out),transform .7s var(--ease-out); }
.size-guide-panel.is-open #size-guide-body { opacity:1; transform:none; transition-delay:.3s; }
.purchase-actions { display:flex; gap:10px; margin-top:32px; }
.quantity-picker { display:flex; align-items:center; justify-content:space-between; width:124px; flex:none; height:52px; border:1px solid var(--line); }
.quantity-picker button { width:38px; height:50px; padding:0; background:none; border:0; font-size:18px; font-weight:300; }
.quantity-picker button:disabled { opacity:.3; cursor:default; }
.quantity-picker input { min-width:0; width:40px; border:0; background:none; text-align:center; font-size:13px; -moz-appearance:textfield; }
.quantity-picker input::-webkit-inner-spin-button { -webkit-appearance:none; }
.add-button { flex:1; }
.add-button .add-done { position:absolute; inset:0; display:grid; place-items:center; transform:translateY(100%); transition:transform .55s var(--ease-panel); }
.add-button .add-label { transition:transform .55s var(--ease-panel); }
.add-button.is-added .add-label { transform:translateY(-200%); }
.add-button.is-added .add-done { transform:none; }
.form-hint { min-height:18px; font-size:12px; color:var(--accent); margin-top:10px; }
.secondary-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.secondary-actions .favorite-button { width:auto; gap:8px; display:flex; font-size:12px; color:var(--ink-soft); }
.secondary-actions .text-button { color:var(--ink-soft); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.product-more { margin-top:32px; border-top:1px solid var(--line); font-size:13px; }
.product-more details { border-bottom:1px solid var(--line); }
.product-more summary { list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:54px; cursor:pointer; }
.product-more summary::-webkit-details-marker { display:none; }
.product-more summary::after { content:'+'; font-size:18px; font-weight:300; transition:transform .45s var(--ease-out); }
.product-more details[open] summary::after { transform:rotate(45deg); }
.product-more p { padding-bottom:20px; line-height:1.8; color:var(--ink-soft); }
.photo-viewer { width:min(1000px,94vw); height:94dvh; padding:0 24px 24px; margin:auto; }
.photo-viewer[open] { display:flex; flex-direction:column; animation:fade-in .45s var(--ease-out); }
.photo-viewer::backdrop { background:#1414134d; }
.photo-viewer #viewer-media { flex:1; min-height:0; background:var(--ivory); }
#viewer-media svg { width:100%; height:100%; display:block; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.no-script { padding:24px var(--edge); background:var(--ivory); }

/* Page entrance and scroll reveals */
main { animation:fade-in .6s var(--ease-out) both; }
.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out); transition-delay:var(--delay,0ms); }
.motion-ready .reveal.is-visible { opacity:1; transform:none; }

@media(min-width:1800px) { :root { --edge:72px; } }
@media(max-width:1100px) {
  :root { --edge:32px; }
  .menu-panel { width:min(460px,100vw); }
  .menu-panel[open] { grid-template-columns:1fr; }
  .menu-preview { display:none; }
  .catalog-filters { flex-wrap:wrap; gap:8px 24px; }
  .catalog-query { flex-basis:100%; border-bottom:1px solid var(--line); }
  .filter-links { margin-left:auto; }
}
@media(max-width:900px) {
  .product-layout { grid-template-columns:1fr; gap:32px; }
  .detail-copy { position:static; max-width:620px; width:100%; margin-inline:auto; }
}
@media(max-width:760px) {
  :root { --edge:18px; --header:60px; --gap:4px; }
  .header-label,.header-favorites { display:none; }
  .header-left { gap:4px; }
  .header-right { gap:0; }
  .brand { font-size:20px; letter-spacing:.26em; margin-right:-.26em; }
  .section { padding-block:64px; }
  .section-title { margin-bottom:32px; }
  .campaign-copy { bottom:48px; }
  .category-grid { grid-template-columns:repeat(6,42%); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--edge) * -1); padding-inline:var(--edge); scroll-padding-inline:var(--edge); }
  .category-grid::-webkit-scrollbar { display:none; }
  .category-card { scroll-snap-align:start; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
  .product-info { padding-top:12px; }
  .product-info h3,.product-price { font-size:12px; }
  .line-split { grid-template-columns:1fr; }
  .line-copy { bottom:32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; gap:6px; margin-top:44px; }
  .panel-right { padding:0 24px 32px; }
  .menu-column { padding-inline:var(--edge); }
  .menu-primary a { font-size:20px; padding:8px 0; }
  .catalog-main,.product-main { padding-top:calc(var(--header) + 32px); }
  .filter-links { padding-left:0; border-left:0; width:100%; justify-content:space-between; margin-left:0; }
  .detail-gallery { grid-template-columns:1fr; margin-inline:calc(var(--edge) * -1); }
  .gallery-item figcaption { padding-inline:var(--edge); }
  .detail-copy h1 { font-size:26px; }
  .bag-item { grid-template-columns:80px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .motion-ready .reveal { opacity:1; transform:none; }
  .campaign-image { will-change:auto; }
}
.panel:focus { outline:none; }
/* Phone gallery: one photo per swipe, as a horizontal snap strip. */
@media(max-width:760px) {
  .detail-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:2px; }
  .detail-gallery::-webkit-scrollbar { display:none; }
  .gallery-item { flex:0 0 100%; scroll-snap-align:start; }
  .gallery-item:only-child { max-width:none; }
}
/* Phones: the campaign photo starts under a solid header so the wordmark never sits on the model's face,
   inputs stay at 16px so iOS does not zoom on focus, and the stacked sections sit closer together. */
@media(max-width:760px) {
  .home-page .site-header { background:#fff; box-shadow:0 1px 0 var(--line); }
  .campaign { margin-top:var(--header); height:calc(100svh - var(--header)); min-height:480px; }
  .campaign-copy { bottom:40px; }
  .categories-section { padding-bottom:16px; }
  .featured-section { padding-top:40px; }
  .catalog-heading { margin-bottom:24px; }
  .catalog-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px; padding-block:4px; margin-bottom:24px; }
  .catalog-query,.filter-links { grid-column:1/-1; }
  .select-wrap select { width:100%; }
  .filter-links { border-top:1px solid var(--line); }
  .catalog-query input,.search-form input,.field input,.quantity-picker input { font-size:16px; }
  .search-form input { padding-block:10px; }
  .color-swatch { flex-basis:36px; width:36px; height:36px; }
  .breadcrumbs { margin-bottom:20px; }
  .purchase-actions { margin-top:24px; }
}
/* Hover and entrance zooms grow downward from the photo's top edge. */
.product-media svg,.category-media svg,.menu-preview svg,.gallery-photo svg { transform-origin:50% 0; }
/* Listing pages, second pass: quieter tiles, a hover view, category chips, photo colour picker. */
.product-media,.gallery-photo,.bag-thumb { background:#f3f1ec; }
.media-alt { position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease-out); }
@media(hover:hover) {
  .product-card:hover .has-alt .media-alt { opacity:1; }
  .product-card:hover .has-alt svg:first-child { transform:none; }
}
.product-info h3 { font-size:13px; letter-spacing:.03em; margin-bottom:2px; }
.product-color { font-size:12px; color:var(--muted); line-height:1.5; }
.product-price { margin-top:6px; font-size:12.5px; letter-spacing:.02em; }
.card-controls { opacity:.85; }
.catalog-heading { margin-bottom:28px; }
.category-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.category-chips button { min-height:38px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:12px; letter-spacing:.04em; white-space:nowrap; transition:border-color .35s,background-color .35s,color .35s; }
.category-chips button:hover { border-color:var(--ink); }
.category-chips button[aria-current=true] { background:var(--ink); border-color:var(--ink); color:#fff; }
.catalog-filters { border-top:0; padding-top:0; }
.catalog-page .product-grid { row-gap:64px; }
/* Product page */
.product-main { padding-top:calc(var(--header) + 40px); }
.gallery-photo { position:relative; }
.gallery-count { display:none; }
.detail-copy h1 { font-size:32px; letter-spacing:-.005em; margin-bottom:12px; }
.detail-price { font-size:15px; letter-spacing:.02em; margin-top:22px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.detail-swatches.has-thumbs { gap:8px; margin-left:0; }
.detail-swatches.has-thumbs .color-swatch { position:relative; flex:0 0 58px; width:58px; height:auto; aspect-ratio:3/4; background:#f3f1ec; overflow:hidden; }
.detail-swatches.has-thumbs .color-swatch svg { width:100%; height:100%; display:block; }
.detail-swatches.has-thumbs .color-thumb .swatch-chip { display:none; }
.detail-swatches.has-thumbs .color-swatch::after { content:''; position:absolute; inset:auto 0 0; height:2px; background:var(--ink); transform:scaleX(0); transition:transform .45s var(--ease-out); }
.detail-swatches.has-thumbs .color-swatch[aria-pressed=true]::after { transform:none; }
.detail-swatches.has-thumbs .color-swatch:not([aria-pressed=true]) svg { opacity:.82; transition:opacity .3s; }
.detail-swatches.has-thumbs .color-swatch:hover svg { opacity:1; }
.related-section { margin-top:112px; padding-top:72px; border-top:1px solid var(--line); }
.related-section .section-title { margin-bottom:40px; }
@media(max-width:760px) {
  .category-chips { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--edge) * -1) 20px; padding-inline:var(--edge); }
  .category-chips::-webkit-scrollbar { display:none; }
  .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-page .product-grid { row-gap:40px; }
  .gallery-count { display:block; position:absolute; right:12px; bottom:12px; padding:2px 10px; border-radius:999px; background:#ffffffd9; font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
  .detail-copy h1 { font-size:26px; }
  .related-section { margin-top:64px; padding-top:48px; }
}

/* Stock: sold-out colours keep their swatch with a fine diagonal; sold-out sizes are struck through. */
.color-swatch.is-sold-out { position:relative; }
.color-swatch.is-sold-out .swatch-chip { opacity:.45; }
.color-swatch.is-sold-out::before { content:''; position:absolute; z-index:1; left:50%; top:50%; width:1px; height:70%; background:var(--ink); transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; }
.detail-swatches.has-thumbs .color-swatch.is-sold-out svg { opacity:.45; }
.detail-swatches.has-thumbs .color-swatch.is-sold-out::before { height:120%; background:#ffffffcc; }
.size-button.is-sold-out { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; cursor:default; }
.size-button.is-sold-out:hover { border-color:var(--line); }
.stock-note { margin-top:12px; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }
.stock-note.is-sold-out { color:var(--ink); }
.add-button:disabled { cursor:default; background:var(--muted); border-color:var(--muted); }
.bag-stock { font-size:12px; color:var(--ink); margin-top:2px; }
/* Not-found page */
.not-found { min-height:70svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:calc(var(--header) + 64px) var(--edge) 96px; text-align:center; }
.not-found h1 { font:400 clamp(30px,3vw,42px)/1.15 var(--serif); }
.not-found p { max-width:420px; color:var(--ink-soft); }
.not-found-links { display:flex; gap:32px; margin-top:12px; }