/* Aysha's Luxury Finds — storefront styles
   Palette and metrics taken from almadalabel.com: pure white page, #17140f ink, #88847c secondary text,
   #f3f2f2 behind product photos, #f8f8f8 behind the hero, #231f20 buttons. 12px sans body, small italic serif titles. */

@font-face { font-family: "Serif"; src: url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "Serif"; src: url(/assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif"; src: url(/assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Serif"; src: url(/assets/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Sans"; src: url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sans"; src: url(/assets/fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }

:root {
  --ink: #17140f;
  --ink-2: #231f20;
  --muted: #88847c;
  --text-2: #55534e;
  --line: #e7e7e7;
  --soft: #f3f2f2;
  --hero-bg: #f8f8f8;
  --paper: #ffffff;
  --btn-text: #fdfcfb;
  --error: #b3261e;
  --serif: "Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Sans", "Inter", Helvetica, Arial, sans-serif;
  --gutter: 32px;
  --hdr: 66px;
  --ann: 24px;
  --max: 1600px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (max-width: 899px) { :root { --gutter: 20px; --hdr: 52px; --ann: 20px; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 12px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
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; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 .9em; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.h-italic { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 18px; line-height: 1.3; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.block { display: block; }
.small-h { font: 500 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { color: var(--muted); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.t-mob { display: none !important; }
@media (max-width: 899px) { .t-desk { display: none !important; } .t-mob { display: inline-flex !important; } }

/* ---------- Buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; font-size: 12px; font-weight: 500; letter-spacing: 0; border: 1px solid var(--ink-2); transition: background .2s, color .2s; text-align: center; }
.btn--dark { background: var(--ink-2); color: var(--btn-text); }
.btn--dark:hover { background: #fff; color: var(--ink-2); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink-2); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 50px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.is-loading { opacity: .6; pointer-events: none; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea, .coupon input, .inline-field input, .search-inline input, .price-range input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 0; border-radius: 0; outline: none; transition: border-color .2s;
}
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317140f'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 22px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field.is-error input, .field.is-error select { border-color: var(--error); }
.field.is-error > span { color: var(--error); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: 10px; }
.notice { background: var(--soft); padding: 14px 16px; font-size: 12px; margin: 0 0 18px; }
.notice--error { background: #fbeceb; color: var(--error); }
.form-msg { font-size: 12px; color: var(--error); min-height: 1em; margin: 8px 0 0; }
.form-msg.is-ok { color: var(--ink); }
.hp { position: absolute; left: -9999px; }
.x { font-size: 26px; line-height: 1; width: 32px; height: 32px; display: inline-grid; place-items: center; font-weight: 300; }

/* ---------- Announcement + header ---------- */
.announce { height: var(--ann); display: grid; place-items: center; font-size: 10px; line-height: 14px; color: var(--ink); text-align: center; padding: 0 12px; background: #fff; position: relative; z-index: 41; }
.hdr { position: sticky; top: 0; z-index: 40; background: #fff; transition: background .3s, color .3s; }
.hdr__bar { height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); border-bottom: 1px solid transparent; }
.hdr.is-scrolled .hdr__bar, .is-minimal .hdr__bar { border-bottom-color: var(--line); }
.hdr__left, .hdr__right { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.hdr__right { justify-content: flex-end; }
.hdr__link { position: relative; padding: 6px 0; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.hdr__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.hdr__link:hover::after, .hdr__link.is-on::after { transform: scaleX(1); }
.hdr__link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.hdr__locale { color: inherit; display: inline-flex; align-items: center; gap: 0; }
.hdr__locale::after { display: none; }
.hdr__locale:hover .hdr__loc-txt { text-decoration: underline; text-underline-offset: 3px; }
.hdr__flag { width: 18px; height: 13.5px; margin-right: 7px; vertical-align: middle; }
.hdr__burger { display: none; width: 22px; height: 22px; flex-direction: column; justify-content: center; gap: 6px; }
.hdr__burger span { display: block; height: 1px; background: currentColor; width: 22px; }
.wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; text-align: center; }
.wordmark__main { font-family: var(--serif); font-weight: 300; font-size: 28px; letter-spacing: .2em; margin-right: -.2em; }
.wordmark__sub { font-size: 7.5px; letter-spacing: .5em; margin-right: -.5em; margin-top: 4px; font-weight: 400; }
.wordmark img { max-height: 40px; width: auto; }
.count:empty { display: none; }

/* Transparent header over home hero */
.has-hero .hdr:not(.is-scrolled):not(.is-open) { background: transparent; position: fixed; left: 0; right: 0; top: var(--ann); }
.hero-light .hdr:not(.is-scrolled):not(.is-open) { color: #fff; }
.has-hero .hdr.is-scrolled { position: fixed; left: 0; right: 0; top: 0; }
.has-hero main { padding-top: 0; }
@media (max-width: 899px) {
  .hdr__burger { display: inline-flex; }
  .hdr__left .hdr__link { display: none; }
  .hdr__loc-txt { display: none; }
  .hdr__flag { width: 21px; height: 15.75px; margin-right: 0; }
  .hdr__left, .hdr__right { gap: 14px; }
  .wordmark { align-items: flex-start; }
  .wordmark__main { font-size: 22px; letter-spacing: .16em; margin-right: 0; }
  .wordmark__sub { font-size: 6px; letter-spacing: .58em; margin-right: 0; padding-left: 1px; }
  .hdr__bar { grid-template-columns: auto 1fr auto; gap: 22px; }
  .hdr__right { gap: 18px; }
  .hdr__right .count { font-size: 11px; }
}

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: fade .2s var(--ease); }
.mega__inner { max-width: var(--max); margin: 0 auto; padding: 26px var(--gutter) 34px; display: grid; grid-template-columns: 220px 260px 1fr; gap: 24px; min-height: 260px; }
.mega__col { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.mega__col li { margin-bottom: 7px; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col a:hover, .mega__col a.is-on { text-decoration: underline; text-underline-offset: 3px; }
.mega__gap { height: 14px; }
.mega__feature { justify-self: end; width: 240px; font-size: 12px; }
.mega__feature img { aspect-ratio: 3/4; object-fit: contain; width: 100%; background: var(--soft); margin-bottom: 8px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); vertical-align: -1px; margin-right: 8px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Drawers, modal, scrim, toast ---------- */
.scrim { position: fixed; inset: 0; background: rgba(23,20,15,.35); z-index: 60; animation: fade .2s; }
.drawer { position: fixed; top: 0; bottom: 0; width: min(440px, 100vw); background: #fff; z-index: 70; display: flex; flex-direction: column; animation: slideR .3s var(--ease); }
.drawer--right { right: 0; }
.drawer--left { left: 0; animation-name: slideL; }
.drawer--wide { width: min(520px, 100vw); }
@keyframes slideR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slideL { from { transform: translateX(-100%); } to { transform: none; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 18px; min-height: var(--hdr); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px 22px; -webkit-overflow-scrolling: touch; }
.drawer__foot { padding: 16px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer__foot--split { grid-template-columns: 1fr 1fr; }
.modal { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.modal__box { pointer-events: auto; position: relative; background: #fff; width: min(420px, 100%); padding: 28px 26px 26px; animation: fade .2s; }
.modal__box h2 { font-size: 22px; margin-bottom: 18px; }
.modal__box .x { position: absolute; right: 10px; top: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink-2); color: #fff; padding: 12px 18px; font-size: 12px; z-index: 90; opacity: 0; transition: .25s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Accordions */
.acc { border-bottom: 1px solid var(--line); }
.acc > summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc > div, .acc > .swatch-list, .acc > .size-list, .acc > .radio-list, .acc > .price-range { padding-bottom: 18px; }

/* Mobile nav */
.mnav { display: flex; flex-direction: column; padding: 8px 22px 30px; overflow-y: auto; font-size: 15px; }
.mnav > a, .mnav summary, .mnav__locale { padding: 13px 0; border-bottom: 1px solid var(--line); display: block; text-align: left; }
.mnav details a { display: block; padding: 9px 0 9px 14px; font-size: 14px; color: var(--muted); }
.mnav summary { list-style: none; cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; float: right; font-weight: 300; }
.mnav details[open] summary::after { content: "–"; }
.mnav__locale { font-size: 12px; color: var(--muted); }

/* Search panel */
.search { position: fixed; left: 0; right: 0; top: 0; z-index: 70; background: #fff; max-height: 100vh; overflow-y: auto; animation: fade .2s; border-bottom: 1px solid var(--line); }
.search__inner { max-width: 1200px; margin: 0 auto; padding: 56px var(--gutter) 36px; position: relative; }
.search__x { position: absolute; right: var(--gutter); top: 14px; }
.search__form { display: flex; border-bottom: 1px solid var(--ink); }
.search__form input { flex: 1; border: 0; outline: none; padding: 12px 0; font-size: 16px; background: transparent; }
.search__form svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.search__results { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-top: 28px; }
.search__results h3 { font-size: 16px; margin-bottom: 12px; }
.search__sugg ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.search__sugg li { margin-bottom: 8px; }
.search__tophead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.search__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 760px) { .search__results { grid-template-columns: 1fr; } .search__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Home (almadalabel.com layout) ---------- */
/* 1 · Split hero: two 3:4 portraits edge to edge, caption on the left half only */
.hero { display: grid; grid-template-columns: 1fr 1fr; }
.hero__half { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--hero-bg); }
.hero__img { position: absolute; left: 0; right: 0; bottom: 0; top: var(--hdr); width: 100%; height: calc(100% - var(--hdr)); object-fit: cover; object-position: center top; }
.hero__cap { position: absolute; left: var(--gutter); top: 50%; color: var(--ink); z-index: 1; display: grid; justify-items: start; gap: 8px; }
.hero-light .hero__cap { color: #fff; }
/* Real editorial photos (white text) run edge to edge under the transparent header, as on Almada */
.hero-light .hero__img { top: 0; height: 100%; }
.hero-light .hero__half::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; background: linear-gradient(rgba(0,0,0,.14), transparent); z-index: 1; pointer-events: none; }
.hero__title { font: italic 400 18px/24px var(--serif); font-weight: 500; }
.hero__cta { font-size: 12px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 759px) { .hero { grid-template-columns: 1fr; } .hero__half--2 { display: none; } }

/* 2 · Text left, two stacked 4:3 images right */
.story { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #1b1713; color: #fff; isolation: isolate; }
.story__half { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.story__img, .story__img.is-photo { position: absolute; max-width: none; height: auto; object-fit: fill; transform-origin: 50% 40%; transition: transform 2.2s var(--ease); }
@media (hover: hover) { .story__half:hover .story__img { transform: scale(1.03); } }
/* soft darkening where the words sit, a little more at the foot for the collection names */
.story::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 45%, rgba(18,14,10,.52), rgba(18,14,10,0) 100%), linear-gradient(0deg, rgba(18,14,10,.55), rgba(18,14,10,0) 24%), rgba(18,14,10,.10); }
.story__over { position: absolute; inset: 0 0 96px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); pointer-events: none; }
.story__over > * { pointer-events: auto; }
.story__eyebrow { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 18px; opacity: .9; }
.story__title { font: italic 400 76px/1 var(--serif); letter-spacing: -.01em; margin-bottom: 22px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.story__lede { font-size: 14px; line-height: 22px; max-width: 440px; margin-bottom: 30px; opacity: .92; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.story__cta { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 14px 34px; border: 1px solid rgba(255,255,255,.75); transition: background .4s var(--ease), color .4s var(--ease); }
.story__cta:hover { background: #fff; color: var(--ink); }
.story__index { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; z-index: 2; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.35); padding-top: 18px; }
.story__index a { display: flex; align-items: baseline; gap: 10px; position: relative; padding-bottom: 4px; }
.story__no { font-size: 10px; letter-spacing: .14em; opacity: .7; }
.story__name { font: italic 500 18px/22px var(--serif); }
.story__index a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: #fff; transition: width .5s var(--ease); }
.story__index a:hover::after { width: 100%; }
@media (max-width: 1100px) { .story__name { font-size: 15px; } .story__index { gap: 10px; } .story__title { font-size: 60px; } }
@media (max-width: 759px) {
  .story { grid-template-columns: 1fr; }
  .story__over { inset: 0; }
  .story::after { background: radial-gradient(ellipse 95% 28% at 50% 50%, rgba(18,14,10,.62), rgba(18,14,10,0) 100%), rgba(18,14,10,.12); }
  .story__title { font-size: 46px; margin-bottom: 16px; }
  .story__lede { font-size: 13px; line-height: 20px; max-width: 320px; margin-bottom: 24px; }
  .story__index { display: none; }
}

/* One dark photo beside a light one: words on the empty side of the dark photo, collection names in a slim bar below */
.story--mixed::after { background: none; }
.story--mixed .story__over { bottom: 58px; padding: 0 28px; }
.story--mixed.story--on-1.story--side-r .story__over { left: 22%; right: 50%; }
.story--mixed.story--on-1.story--side-l .story__over { left: 0; right: 72%; }
.story--mixed.story--on-2.story--side-l .story__over { left: 50%; right: 22%; }
.story--mixed.story--on-2.story--side-r .story__over { left: 72%; right: 0; }
.story--mixed .story__title { font-size: clamp(40px, 4.8vw, 76px); line-height: .98; }
.story--mixed .story__lede { max-width: 100%; }
.story--mixed .story__index { position: relative; grid-column: 1 / -1; left: auto; right: auto; bottom: auto; height: 58px; align-items: center; padding: 0 var(--gutter); border-top: 0; }
@media (max-width: 759px) {
  .story--mixed .story__over { padding: 0 18px; }
  .story--mixed.story--on-1.story--side-r .story__over { top: 0; bottom: 50%; left: 42%; right: 0; }
  .story--mixed.story--on-1.story--side-l .story__over { top: 0; bottom: 50%; left: 0; right: 42%; }
  .story--mixed.story--on-2.story--side-r .story__over { top: 50%; bottom: 0; left: 42%; right: 0; }
  .story--mixed.story--on-2.story--side-l .story__over { top: 50%; bottom: 0; left: 0; right: 42%; }
  .story--mixed .story__eyebrow { font-size: 9px; letter-spacing: .2em; margin-bottom: 10px; }
  .story--mixed .story__title { font-size: 34px; margin-bottom: 10px; }
  .story--mixed .story__lede { font-size: 12px; line-height: 17px; margin-bottom: 16px; }
  .story--mixed .story__cta { padding: 11px 22px; }
}

/* 3 · Product carousel, no heading, arrows top right */
.carousel { padding: 64px var(--gutter) 84px; }
.carousel__ctrl { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.carousel__ctrl button { width: 18px; height: 18px; color: rgba(16,16,16,.3); transition: color .2s; }
.carousel__ctrl button:hover { color: var(--ink); }
.carousel__ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (max-width: 899px) {
  .carousel { padding: 40px 0 60px; }
  .carousel__ctrl { display: none; }
  .carousel__track { grid-auto-columns: 322px; gap: 16px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
}

/* Rails */
.rail { padding: 40px 0 30px; }
.rail__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 14px; }
.rail__head h2 { font-size: 16px; }
.rail__ctrl { display: flex; gap: 16px; align-items: baseline; font-size: 12px; }
.rail__ctrl button { font-size: 18px; width: 22px; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px - 2 * var(--gutter)) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); scrollbar-width: none; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
@media (max-width: 899px) { .rail__track { grid-auto-columns: 62%; } .rail__ctrl button { display: none; } }

/* ---------- Product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 32px 24px; padding: 0 var(--gutter) 60px; }
.grid[data-cols="2"] { --cols: 2; } .grid[data-cols="3"] { --cols: 3; } .grid[data-cols="4"] { --cols: 4; }
@media (max-width: 899px) { .grid, .grid[data-cols] { --cols: 2; gap: 24px 10px; padding: 0 var(--gutter) 40px; } .grid[data-cols][data-cols-m="1"] { --cols: 1; } }
.grid__empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--muted); }
.card { position: relative; min-width: 0; }
.card__media { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--soft); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: opacity .4s var(--ease); }
.card__img--alt { opacity: 0; }
@media (hover: hover) { .card:hover .card__img--alt { opacity: 1; } .card:hover .card__img:not(.card__img--alt) { opacity: 0; } }
.card__badge { position: absolute; right: 20px; top: 18px; font-size: 10px; line-height: 14px; color: var(--muted); }
.card__dots { position: absolute; left: 20px; top: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.card__dots .dot { margin: 0; width: 10px; height: 10px; border-color: rgba(0,0,0,.1); }
.dot-more { font-size: 10px; color: var(--muted); }
.card__arrows { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: space-between; padding: 0 6px; opacity: 0; transition: opacity .25s; transform: translateY(-50%); }
.card__arrows span { width: 26px; height: 26px; display: grid; place-items: center; font-size: 18px; color: var(--ink); }
@media (hover: hover) { .card:hover .card__arrows { opacity: 1; } }
.card .card__wish { position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.card .card__wish svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.card .card__wish.is-on svg, .pdp__wish.is-on svg { fill: var(--ink); }
@media (hover: hover) { .card:hover .card__wish { opacity: 1; } }
@media (hover: none) { .card .card__wish { opacity: 1; } }
.card .card__wish.is-on { opacity: 1; }
.card__info { padding: 10px 0 0; font-size: 12px; line-height: 18px; }
.card__row { display: flex; justify-content: space-between; gap: 10px; }
.card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.price--was { color: var(--muted); }
.price--sale { color: var(--ink); }
.price--request { color: var(--muted); }
.card__sub { color: var(--muted); min-height: 18px; position: relative; }
.card__sizes { position: absolute; inset: 0; opacity: 0; background: #fff; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .card:hover .card__sizes { opacity: 1; } }
@media (max-width: 899px) { .card__row { flex-direction: column; gap: 0; } .card__sub { display: none; } .card__dots { left: 10px; top: 10px; gap: 6px; } .card__badge { right: 10px; top: 8px; } }

/* ---------- Collection ---------- */
.coll { max-width: var(--max); margin: 0 auto; }
.coll__head { padding: 34px var(--gutter) 22px; }
.coll__title { font-size: 16px; }
.coll__desc { max-width: 560px; color: var(--muted); margin-top: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip { border: 1px solid var(--line); padding: 6px 12px; font-size: 12px; }
.chip.is-on, .chip:hover { border-color: var(--ink); }
.toolbar { position: sticky; top: var(--hdr); z-index: 20; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); font-size: 12px; margin-bottom: 8px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.crumbs a:hover { text-decoration: underline; }
.toolbar__right { display: flex; gap: 22px; align-items: center; }
.view-switch { display: inline-flex; gap: 10px; align-items: baseline; }
.view-switch button { padding: 2px; }
.view-switch .is-on { text-decoration: underline; text-underline-offset: 3px; }
.swatch-list, .radio-list { display: grid; gap: 10px; font-size: 12px; }
.swatch-opt, .radio-list label { display: flex; align-items: center; gap: 2px; cursor: pointer; }
.swatch-opt input, .size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-opt input:checked + .dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.size-list { display: flex; flex-wrap: wrap; gap: 6px; }
.size-opt span { display: inline-block; min-width: 40px; text-align: center; border: 1px solid var(--line); padding: 7px 8px; font-size: 12px; cursor: pointer; }
.size-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.price-range { display: flex; align-items: center; gap: 12px; }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 70px); max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 40px; }
.pdp__gallery { min-width: 0; }
.pdp__track { display: grid; gap: 14px; justify-items: center; }
.pdp__shot { display: block; width: 100%; max-width: 640px; background: var(--soft); cursor: zoom-in; }
.pdp__shot img { width: 100%; aspect-ratio: 3/4; object-fit: contain; }
.pdp__progress { display: none; }
.pdp__info { min-width: 0; }
.pdp__sticky { position: sticky; top: calc(var(--hdr) + 18px); max-width: 440px; }
.crumbs--pdp { color: var(--muted); margin-bottom: 26px; }
.pdp__titlerow { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.pdp__title { font-size: 24px; line-height: 1.15; }
.pdp__wish svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pdp__price { margin: 8px 0 22px; font-variant-numeric: tabular-nums; }
.pdp__form { margin: 0 0 22px; }
.opt { border: 0; padding: 0; margin: 0 0 18px; }
.opt__legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 10px; }
.opt__chosen { color: var(--ink); }
.opt__values { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.opt__values--swatch { gap: 10px; }
.sw, .pill { position: relative; cursor: pointer; }
.sw input, .pill input { position: absolute; opacity: 0; pointer-events: none; }
.sw__dot { display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); }
.sw input:checked + .sw__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
.pill span { display: inline-block; font-size: 12px; padding: 4px 1px; border-bottom: 1px solid transparent; }
.opt__values--swatch .pill span { border: 1px solid var(--line); padding: 6px 10px; font-size: 12px; }
.pill input:checked + span { border-bottom-color: var(--ink); }
.opt__values--swatch .pill input:checked + span { border-color: var(--ink); }
.sw.is-na .sw__dot, .pill.is-na span { opacity: .3; }
.pill.is-na span { text-decoration: line-through; }
.pdp__meta { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; min-height: 18px; }
.pdp__form .btn + .btn, .pdp__form .pdp__notify + .btn { margin-top: 8px; }
.pdp__notify { margin: 8px 0; }
.inline-field { display: flex; gap: 10px; align-items: flex-end; }
.pdp__desc { color: var(--ink); }
.pdp__links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; font-size: 12px; }
.pdp__links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.stylewith { margin-top: 40px; }
.stylewith__row { display: flex; gap: 8px; }
.stylewith__row a { width: 96px; background: var(--soft); }
.stylewith__row img { aspect-ratio: 3/4; object-fit: contain; width: 100%; }
.zoom { position: fixed; inset: 0; background: #fff; z-index: 95; overflow: auto; cursor: zoom-out; }
.zoom img { width: 100%; max-width: 1400px; margin: 0 auto; }
.zoom .x { position: fixed; right: 16px; top: 12px; z-index: 2; background: #fff; }
@media (max-width: 899px) {
  .pdp { grid-template-columns: 1fr; padding: 0 0 30px; }
  .pdp__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .pdp__track::-webkit-scrollbar { display: none; }
  .pdp__shot { flex: 0 0 100%; scroll-snap-align: start; max-width: none; }
  .pdp__progress { display: block; height: 2px; background: var(--line); margin: 0 var(--gutter); }
  .pdp__progress span { display: block; height: 100%; background: var(--ink); transition: transform .2s; }
  .pdp__info { padding: 18px var(--gutter) 0; }
  .pdp__sticky { position: static; max-width: none; }
  .crumbs--pdp { display: none; }
}

/* ---------- Cart ---------- */
.cartpage { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 6vw, 100px); max-width: 1300px; margin: 0 auto; padding: 34px var(--gutter) 70px; }
.cartpage h1 { font-size: 22px; margin-bottom: 22px; }
.line { display: grid; grid-template-columns: 120px 1fr auto; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.line__img { background: var(--soft); }
.line__img img { aspect-ratio: 3/4; object-fit: contain; width: 100%; }
.line__info { display: flex; flex-direction: column; gap: 4px; }
.line__name { font-weight: 500; }
.line__opt, .line__unit { color: var(--muted); font-size: 12px; }
.line__actions { display: flex; gap: 18px; margin-top: auto; }
.line__total { text-align: right; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0; }
.qty button { width: 24px; height: 24px; border: 1px solid var(--line); line-height: 1; }
.cartpage__sum { position: sticky; top: calc(var(--hdr) + 20px); align-self: start; display: grid; gap: 12px; }
.sum-total { font-size: 20px; padding: 8px 0; }
.info-block { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 899px) { .cartpage { grid-template-columns: 1fr; } .line { grid-template-columns: 90px 1fr; } .line__total { grid-column: 2; text-align: left; } }

/* Cart drawer lines */
.dline { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.dline img { aspect-ratio: 3/4; object-fit: contain; width: 100%; background: var(--soft); }
.dline__top { display: flex; justify-content: space-between; gap: 10px; }
.dline__opt { color: var(--muted); font-size: 12px; margin: 3px 0 6px; }
.dline__row { display: flex; justify-content: space-between; align-items: center; }
.cart-empty { padding: 50px 0; text-align: center; display: grid; gap: 16px; justify-items: center; }

/* ---------- Checkout ---------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 6vw, 90px); max-width: 1200px; margin: 0 auto; padding: 30px var(--gutter) 60px; }
.checkout h1 { font-size: 24px; margin-bottom: 20px; }
.fs { border: 0; padding: 0; margin: 0 0 26px; }
.fs legend { padding: 0; }
.methods { display: grid; gap: 8px; }
.method { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); padding: 14px; cursor: pointer; font-size: 12px; }
.method:has(input:checked) { border-color: var(--ink); }
.methods.is-error .method { border-color: var(--error); }
.checkout__sum { background: var(--hero-bg); padding: 24px; align-self: start; position: sticky; top: calc(var(--hdr) + 16px); }
.mini-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 12px; padding: 8px 0; }
.mini-line__img { position: relative; background: var(--soft); }
.mini-line__img img { aspect-ratio: 3/4; object-fit: contain; width: 100%; }
.mini-line__qty { position: absolute; top: -6px; right: -6px; background: var(--ink); color: #fff; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; }
.coupon { display: flex; gap: 10px; margin: 16px 0 0; align-items: flex-end; }
.coupon .btn { min-height: 38px; }
.sum-rows { display: grid; gap: 8px; margin-top: 14px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 899px) { .checkout { grid-template-columns: 1fr; } .checkout__sum { order: -1; position: static; } }

/* ---------- Orders / pages ---------- */
.orderpage { max-width: 1000px; margin: 0 auto; padding: 36px var(--gutter) 70px; }
.orderpage h1 { font-size: 26px; margin: 4px 0 24px; }
.orderpage__grid { display: grid; grid-template-columns: 1fr 280px; gap: 50px; }
@media (max-width: 760px) { .orderpage__grid { grid-template-columns: 1fr; } }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; margin: 0 0 32px; font-size: 11px; color: var(--muted); counter-reset: s; }
.steps li { position: relative; padding-top: 18px; }
.steps li span { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.steps li.is-done { color: var(--ink); }
.steps li.is-done span { background: var(--ink); }
.bank { white-space: pre-wrap; font: 12px/1.5 var(--sans); margin: 8px 0; }
.page-narrow { max-width: 480px; margin: 0 auto; padding: 50px var(--gutter) 80px; }
.page-narrow h1 { font-size: 24px; margin-bottom: 20px; }
.page { max-width: 760px; margin: 0 auto; padding: 46px var(--gutter) 80px; }
.page__title { font-size: 26px; margin-bottom: 26px; }
.page__toc { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; margin-bottom: 30px; }
.page__toc a { text-decoration: underline; text-underline-offset: 3px; }
.prose { font-size: 12px; line-height: 1.75; color: var(--ink); }
.prose h2 { font-family: var(--serif); font-style: italic; font-size: 21px; margin: 34px 0 10px; scroll-margin-top: 90px; }
.prose h3 { font: 500 13px var(--sans); letter-spacing: .04em; text-transform: uppercase; margin: 26px 0 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.1em; }
.prose blockquote { font-family: var(--serif); font-style: italic; font-size: 24px; margin: 30px 0; padding: 0; }
.prose .lead { font-size: 17px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 18px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.prose details { border-bottom: 1px solid var(--line); }
.prose details summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; }
.prose details summary::after { content: "+"; font-weight: 300; }
.prose details[open] summary::after { content: "–"; }
.prose details p { padding-bottom: 8px; }
.contact-form { margin: 26px 0; }
.explore-more { margin-top: 60px; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 24px; }
.explore-more h2 { width: 100%; }
.search-inline { display: flex; gap: 12px; margin-top: 16px; max-width: 520px; }
.journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 8px; padding: 0 var(--gutter) 70px; }
.jcard { display: grid; gap: 6px; font-size: 12px; }
.jcard__img { aspect-ratio: 3/4; object-fit: contain; width: 100%; background: var(--soft); }
@media (max-width: 760px) { .journal { grid-template-columns: 1fr 1fr; } }
.post { max-width: 820px; margin: 0 auto; padding: 46px var(--gutter); }
.post h1 { font-size: 30px; margin: 8px 0 26px; }
.post__hero { margin: 0 0 30px; }

/* ---------- Footer (almadalabel.com) ---------- */
.ftr { padding: 96px var(--gutter) 10px; }
.ftr__grid { display: grid; grid-template-columns: 578px 269px 269px 1fr; font-size: 12px; line-height: 18px; }
.ftr__news { max-width: 432px; }
.ftr__h { font: 500 12px/18px var(--sans); letter-spacing: 0; margin-bottom: 8px; }
.ftr__news p { color: var(--ink); margin: 0; }
.news { display: flex; border-bottom: 1px solid var(--ink); margin-top: 22px; width: 386px; max-width: 100%; height: 42px; position: relative; flex-wrap: nowrap; align-items: center; }
.news input { flex: 1; border: 0; padding: 0; outline: none; background: transparent; font-size: 12px; height: 100%; }
.news input::placeholder { color: var(--muted); }
.news button { font-size: 18px; padding: 0 2px; line-height: 1; }
.news__msg { position: absolute; top: 100%; left: 0; margin-top: 6px; font-size: 12px; }
.ftr__locale { display: grid; gap: 16px; align-content: start; }
.ftr__pick { text-align: left; font-size: 12px; color: var(--ink); margin-left: 4px; }
.ftr__pick:hover { text-decoration: underline; }
.ftr__links { list-style: none; padding: 0; margin: 0; display: grid; row-gap: 16px; align-content: start; }
.ftr__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__mark { font-family: var(--serif); font-weight: 300; font-size: 21vw; line-height: .78; letter-spacing: .1em; text-align: center; margin: 100px 0 14px; white-space: nowrap; overflow: hidden; color: var(--ink); margin-right: -.1em; }
.ftr__copy { font-size: 7px; line-height: 10px; color: var(--ink); letter-spacing: .02em; }
.ftr--min { padding: 30px var(--gutter); border-top: 1px solid var(--line); }
.ftr--min .ftr__copy { font-size: 10px; color: var(--muted); }
@media (max-width: 1299px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; column-gap: 32px; } }
@media (max-width: 899px) { .ftr { padding-top: 56px; } .ftr__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } .ftr__news { grid-column: 1 / -1; } .ftr__locale { grid-column: 1 / -1; gap: 12px; } .ftr__links { row-gap: 12px; } .ftr__mark { margin-top: 56px; } }

/* WhatsApp */
.wa { position: fixed; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; background: var(--ink-2); display: grid; place-items: center; z-index: 30; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.wa svg { width: 22px; height: 22px; fill: #fff; }
.is-minimal .wa { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 899px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } }

/* ---------- Country & currency picker (flags) ---------- */
.flag { display: inline-block; width: 20px; height: 15px; object-fit: cover; vertical-align: -2px; margin-right: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); border-radius: 1px; background: var(--soft); }
.ftr__pick .flag, .mnav__locale .flag { width: 18px; height: 13.5px; margin-right: 6px; }
.locale.modal__box { width: min(440px, 100%); max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column; padding-bottom: 20px; }
.locale__langs { display: flex; gap: 8px; margin-bottom: 14px; }
.locale__langs label { flex: 1; cursor: pointer; }
.locale__langs input { position: absolute; opacity: 0; pointer-events: none; }
.locale__langs span { display: block; text-align: center; border: 1px solid var(--line); padding: 9px 0; font-size: 12px; }
.locale__langs input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.locale__langs input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.locale__search { width: 100%; border: 0; border-bottom: 1px solid var(--ink); padding: 10px 0; outline: none; background: transparent; margin-bottom: 6px; }
.locale__list { list-style: none; margin: 0 0 14px; padding: 0; overflow-y: auto; flex: 1; min-height: 160px; border-bottom: 1px solid var(--line); }
.locale__row { display: flex; align-items: center; width: 100%; text-align: left; padding: 9px 4px; font-size: 12px; border-bottom: 1px solid #f1f1f1; }
.locale__row:hover { background: #fafafa; }
.locale__row.is-on { font-weight: 500; }
.locale__row.is-on .locale__cur::after { content: " ✓"; }
.locale__name { flex: 1; }
.locale__cur { color: var(--muted); white-space: nowrap; }
.locale__curpick { margin-bottom: 14px; }

/* Lifestyle photographs fill the frame like the hero; cut-outs stay whole on grey */
.card__img.is-photo, .pdp__shot img.is-photo, .dline img.is-photo, .line__img img.is-photo, .mini-line__img img.is-photo, .stylewith__row img.is-photo { object-fit: cover; object-position: center top; }

/* ---------- WhatsApp order form ---------- */
.btn--wa { gap: 9px; }
.btn--wa svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.wao { display: block; }
.wao__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; font-size: 12px; }
.wao__img { background: var(--soft); aspect-ratio: 3/4; display: block; overflow: hidden; }
.wao__img img { width: 100%; height: 100%; object-fit: contain; }
.wao__img img.is-photo, .wao__img img[src*="-ph"] { object-fit: cover; }
.wao__what { display: grid; gap: 3px; }
.wao__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wao__intro { color: var(--text-2); margin: 0 0 16px; }
.wao__sum { border-top: 1px solid var(--line); padding: 14px 0 6px; margin: 6px 0 16px; display: grid; gap: 7px; font-size: 12px; }
.wao__sum p { margin: 2px 0 0; }
.wao__total { font-size: 14px; font-weight: 500; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 3px; }
.wao__pay { margin-bottom: 16px; }
.wao .fs.is-error .method { border-color: var(--error); }
.wao [data-wao-after] { margin-top: 10px; }
.wao__done { padding: 26px 0; display: grid; gap: 14px; }
.wao__done h3 { font-size: 22px; }
.wa-confirm { border: 1px solid var(--line); padding: 14px; margin: 0 0 22px; display: grid; gap: 10px; }
.wa-confirm p { margin: 0; }

/* ---------- Category panels (hero-sized, two to a row) ---------- */
.cats { padding: 0; }
.cats__head { display: flex; justify-content: space-between; align-items: baseline; padding: 40px var(--gutter) 18px; }
.cats__h { font: italic 500 16px/21px var(--serif); }
.cats__all { font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cats__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cat { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--hero-bg); color: var(--ink); isolation: isolate; }
.cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(1.001); transition: transform 1.6s var(--ease); }
.cat--photo .cat__img { object-fit: cover; object-position: center top; }
.cat:not(.cat--photo) .cat__img { padding: 10% 8% 24%; box-sizing: border-box; }
.cat:not(.cat--photo) .cat__cap { top: auto; bottom: 40px; transform: none; }
/* studio shots on plain white: shown whole on a white panel, caption beneath */
.cat--studio { background: #fff; }
.cat.cat--studio .cat__img { padding: 5% 8% 21%; mix-blend-mode: multiply; }
.cat.cat--studio .cat__cap { bottom: 32px; }
.cat--photo { color: #fff; }
/* photos on a white or pale background keep a dark caption and no shading */
.cat--photo.cat--light { color: var(--ink); }
.cat--photo.cat--light::after { display: none; }
.cat--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,0) 46%), linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,0) 30%); z-index: 1; pointer-events: none; }
.cat__cap { position: absolute; left: var(--gutter); top: 50%; z-index: 2; display: grid; justify-items: start; gap: 6px; transform: translateY(-50%); }
.cat__no { font-size: 10px; letter-spacing: .14em; opacity: .85; }
.cat__title { font: italic 500 22px/28px var(--serif); }
.cat__meta { font-size: 12px; opacity: .85; }
.cat__cta { font-size: 12px; font-weight: 500; line-height: 18px; margin-top: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease); }
@media (hover: hover) {
  .cat:hover .cat__img { transform: scale(1.035); }
  .cat:hover .cat__cta { background-size: 40% 1px; }
}
.cat:focus-visible { outline-offset: -4px; }
@media (max-width: 759px) {
  .cats { padding-bottom: 8px; }
  .cats__head { padding-top: 32px; }
  .cats__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .cats__grid::-webkit-scrollbar { display: none; }
  .cat { scroll-snap-align: start; }
  .cat__cap { left: 20px; top: auto; bottom: 28px; transform: none; }
  .cat__title { font-size: 20px; line-height: 26px; }
  .cat--photo::after { background: linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0) 45%); }
}

/* Cookie banner (only shown when a tracking ID is set and the visitor is asked) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 16px 18px; background: #fff; color: var(--ink); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 40px rgba(0,0,0,.12); font-size: 13px; line-height: 19px; }
.consent__text { flex: 1; margin: 0; }
.consent__text a { text-decoration: underline; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: 8px; flex: none; }
.consent__btn { font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.consent__btn--yes { background: var(--ink); color: #fff; }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; gap: 12px; } .consent__btns > * { flex: 1; } }