/* ─────────────────────────────────────────────────────────────────────────
   MONOLITH — editorial brutalist-minimal design system (PHP edition)
   Raw 1px ink rules · zero shadows · bone paper · one signal accent
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --bone: #ece8df; --paper: #f5f2eb; --ink: #0e0e0e; --smoke: #6b6862; --ash: #c9c4b8; --signal: #ff3b00;
  --display: "Helvetica Neue", "Neue Haas Grotesk Display", "Inter Tight", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mega: clamp(4.5rem, 17vw, 17rem); --giga: clamp(3rem, 9vw, 9rem); --tera: clamp(2.25rem, 5vw, 4.5rem);
  --snap: cubic-bezier(.7, 0, .2, 1); --rule: 1px solid var(--ink); --gut: clamp(1rem, 2vw, 1.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bone); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--display); min-height: 100dvh; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
::selection { background: var(--ink); color: var(--bone); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type ── */
.label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -.055em; line-height: .82; text-transform: uppercase; }
.text-mega { font-size: var(--mega); } .text-giga { font-size: var(--giga); } .text-tera { font-size: var(--tera); }
.mono { font-family: var(--mono); } .big { font-size: 2rem; }
.muted { color: var(--smoke); } .signal { color: var(--signal); } .strike { text-decoration: line-through; }
.nowrap { white-space: nowrap; } .right-text { text-align: right; } .center-text { text-align: center; display: block; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maxw { max-width: 28rem; }
.link { transition: color .18s; } .link:hover { color: var(--signal); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.push-right { margin-left: auto; }
.prose p + p { margin-top: 1rem; } .prose { font-size: .95rem; }

/* ── Controls ── */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; border: var(--rule); padding: .9rem 1.1rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; transition: background-color .18s var(--snap), color .18s var(--snap), border-color .18s; }
.btn:hover:not(:disabled) { background: var(--ink); color: var(--bone); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn--solid { background: var(--ink); color: var(--bone); }
.btn--solid:hover:not(:disabled) { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn--block { width: 100%; } .btn--sm { padding: .45rem .6rem; }
.btn--inv { border-color: var(--bone); color: var(--bone); } .btn--inv:hover:not(:disabled) { background: var(--bone); color: var(--ink); }
.field { width: 100%; border: var(--rule); background: var(--paper); padding: .6rem .7rem; font: .8125rem var(--mono); color: var(--ink); border-radius: 0; appearance: none; }
select.field { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.8rem; }
.field:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.field--sm { padding: .4rem .5rem; width: auto; min-width: 4.5rem; }
textarea.field { resize: vertical; }
.fld { display: flex; flex-direction: column; gap: .3rem; }
.fld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.fld--full { grid-column: 1 / -1; }
.field-error { font: .6875rem var(--mono); color: var(--signal); text-transform: uppercase; letter-spacing: .06em; }
.check { display: flex; gap: .6rem; align-items: center; }
.check input { accent-color: var(--ink); width: 1rem; height: 1rem; }
.flash { border: var(--rule); padding: .7rem .9rem; margin: 1rem var(--gut); background: var(--paper); }
.flash--ok { background: var(--ink); color: var(--bone); } .flash--err { border-color: var(--signal); background: rgba(255,59,0,.08); }
.pill { border: var(--rule); padding: 0 .35rem; } .pill--signal { background: var(--signal); border-color: var(--signal); }
.boxed { border: var(--rule); padding: 1.5rem; }
.tag { position: absolute; background: var(--bone); padding: .15rem .4rem; z-index: 2; }
.tag--tl { top: .5rem; left: .5rem; } .tag--tr { top: .5rem; right: .5rem; } .tag--br { right: .75rem; bottom: .75rem; } .tag--bl { left: .75rem; bottom: .75rem; }
.tag--ink { background: var(--ink); color: var(--bone); }
.swatch { display: inline-block; width: .75rem; height: .75rem; border: var(--rule); vertical-align: -1px; }
.swatches { display: flex; gap: .25rem; margin-top: .4rem; }

/* ── Grain ── */
.grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ── Header module ── */
.site-header { position: sticky; top: 0; z-index: 40; }
.marquee { overflow: hidden; background: var(--ink); color: var(--bone); border-bottom: var(--rule); }
.marquee__track { display: flex; width: max-content; padding: .35rem 0; animation: marquee 38s linear infinite; }
.marquee__item { padding: 0 2rem; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .75rem var(--gut); border-bottom: var(--rule); background: rgba(236,232,223,.92); backdrop-filter: blur(4px); }
.site-header__nav { display: flex; gap: 1.5rem; }
.site-header__controls { display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; }
.logo { display: inline-flex; align-items: center; }
.logo__word { font-size: 1.65rem; line-height: 1; letter-spacing: -.08em; transition: letter-spacing .3s var(--snap); }
.logo:hover .logo__word { letter-spacing: .02em; }
.logo__word sup { font-size: .5rem; letter-spacing: 0; margin-left: .1rem; }
.logo__img { height: 1.75rem; width: auto; max-width: 180px; object-fit: contain; }
.bag-btn { display: inline-flex; align-items: center; gap: .4rem; }
.bag-btn__count { background: var(--ink); color: var(--bone); min-width: 1.25rem; text-align: center; padding: 0 .25rem; transition: background .3s; }
.bag-btn__count.is-bump { animation: bump .5s var(--snap); }
@keyframes bump { 0% { transform: scale(1.7); background: var(--signal); } 100% { transform: scale(1); } }
.mobile-nav { border-bottom: var(--rule); background: var(--bone); animation: wipe-down .5s var(--snap); }
.mobile-nav__row { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem var(--gut); border-top: var(--rule); }
.mobile-nav__row .display { font-size: var(--tera); }
@keyframes wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.show-sm { display: none; }

/* ── Footer module ── */
.site-footer { margin-top: 6rem; border-top: var(--rule); }
.site-footer__grid { display: grid; grid-template-columns: 7fr 2fr 3fr; border-bottom: var(--rule); }
.site-footer__grid > div { padding: var(--gut); }
.site-footer__brand { border-right: var(--rule); } .site-footer__brand .display { margin-top: 1.5rem; }
.site-footer__col { display: flex; flex-direction: column; gap: 1rem; } .site-footer__col + .site-footer__col { border-left: var(--rule); }
.site-footer__col ul { display: grid; gap: .5rem; }
.site-footer__base { display: flex; justify-content: space-between; gap: .5rem; padding: .75rem var(--gut); flex-wrap: wrap; }

/* ── Hero / home ── */
.hero { display: grid; grid-template-columns: 7fr 5fr; border-bottom: var(--rule); }
.hero__copy { display: flex; flex-direction: column; justify-content: space-between; padding: var(--gut); }
.hero__title { position: relative; z-index: 3; margin: 8rem -30% 0 0; }
.hero__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 32rem; margin-top: 2.5rem; align-items: end; font-size: .9rem; }
.hero__media { position: relative; min-height: 70vh; border-left: var(--rule); overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); animation: settle 1.6s var(--snap) both; }
@keyframes settle { from { transform: scale(1.12); clip-path: inset(0 0 100% 0); } to { transform: scale(1); clip-path: inset(0); } }
.cat-index { border-bottom: var(--rule); }
.cat-index__row { display: grid; grid-template-columns: 1fr 9fr 2fr; align-items: baseline; padding: .75rem var(--gut); border-bottom: var(--rule); }
.cat-index__row:last-child { border-bottom: 0; }
.cat-index__name { transition: transform .5s var(--snap), color .3s; }
.cat-index__row:hover .cat-index__name { transform: translateX(1.5rem); color: var(--signal); }
.section { padding: clamp(3rem, 7vw, 6rem) var(--gut); }
.section__head { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 1rem; margin-bottom: 3rem; }
.section__head h2 { grid-column: 1 / 7; } .section__aside { grid-column: 10 / 13; max-width: 20rem; }
.manifesto { display: grid; grid-template-columns: 3fr 9fr; border-top: var(--rule); border-bottom: var(--rule); }
.manifesto__label { padding: var(--gut); border-right: var(--rule); }
.manifesto__text { padding: var(--gut); font-size: clamp(1.5rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; text-transform: uppercase; }

/* ── Editorial asymmetric grid ── */
.egrid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 3.5rem; }
.egrid__s1 { grid-column: 1 / span 6; } .egrid__s1 .card__frame { aspect-ratio: 4/5; }
.egrid__s2 { grid-column: 8 / span 4; margin-top: 10rem; } .egrid__s2 .card__frame { aspect-ratio: 3/4; }
.egrid__s3 { grid-column: 2 / span 3; margin-top: -2.5rem; } .egrid__s3 .card__frame { aspect-ratio: 1; }
.egrid__s4 { grid-column: 6 / span 5; margin-top: 6rem; } .egrid__s4 .card__frame { aspect-ratio: 4/5; }
.egrid__s5 { grid-column: 9 / span 4; margin-top: -1.5rem; } .egrid__s5 .card__frame { aspect-ratio: 2/3; }
.egrid__s6 { grid-column: 1 / span 7; margin-top: 2rem; } .egrid__s6 .card__frame { aspect-ratio: 16/11; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--snap) var(--delay, 0ms), transform .7s var(--snap) var(--delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.card__frame { position: relative; display: block; width: 100%; overflow: hidden; border: var(--rule); background: var(--paper); text-align: left; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--snap); }
.card__img--alt { clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--snap); }
.card:hover .card__img { transform: scale(1.04); } .card:hover .card__img--alt { clip-path: inset(0); }
.card__cta { position: absolute; right: .5rem; bottom: .5rem; background: var(--ink); color: var(--bone); padding: .25rem .5rem; opacity: 0; transform: translateY(.5rem); transition: .3s var(--snap); z-index: 2; }
.card:hover .card__cta { opacity: 1; transform: none; }
.card__meta { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; margin-top: .5rem; padding-top: .5rem; border-top: var(--rule); }
.card__name { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.card__name a:hover { color: var(--signal); }

/* ── Quick view ── */
.qv { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2.5rem); }
.qv__scrim { position: absolute; inset: 0; background: rgba(236,232,223,.82); backdrop-filter: blur(2px); animation: fade .3s both; }
.qv__panel { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; width: 100%; max-width: 72rem; max-height: 100%; overflow: auto; border: var(--rule); background: var(--bone); }
.qv__media { position: relative; aspect-ratio: 4/5; border-right: var(--rule); overflow: hidden; background: var(--paper); }
.qv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qv__body { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); animation: slide-in .5s var(--snap) .15s both; }
.qv__desc { font-size: .9rem; max-width: 28rem; }
.qv__body .btn { margin-top: auto; }
@keyframes fade { from { opacity: 0; } } @keyframes slide-in { from { opacity: 0; transform: translateX(30px); } }
.spec { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem 0; border-top: var(--rule); padding-top: 1rem; }
.spec dd { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ── Drawer ── */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(14,14,14,.4); animation: fade .3s both; }
.drawer__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: 100%; max-width: 28rem; height: 100dvh; background: var(--bone); border-left: var(--rule); animation: drawer-in .45s var(--snap) both; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer.is-closing .drawer__panel { animation: drawer-in .35s var(--snap) reverse both; } .drawer.is-closing .drawer__scrim { animation: fade .35s reverse both; }
.drawer__head { display: flex; justify-content: space-between; padding: 1rem; border-bottom: var(--rule); }
.drawer__body { flex: 1; overflow-y: auto; }
.drawer__foot { display: grid; gap: .75rem; padding: 1rem; border-top: var(--rule); }
.dline { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem; border-bottom: var(--rule); }
.dline__img { aspect-ratio: 3/4; border: var(--rule); background: var(--paper); overflow: hidden; } .dline__img img { width: 100%; height: 100%; object-fit: cover; }
.dline__name { font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; }
.dline__row { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.stepper { display: flex; border: var(--rule); } .stepper button { padding: .2rem .6rem; } .stepper button:hover:not(:disabled) { background: var(--ink); color: var(--bone); }
.stepper button:disabled { opacity: .3; } .stepper span { border-left: var(--rule); border-right: var(--rule); padding: .2rem .7rem; }
.empty { padding: 1.5rem var(--gut); display: grid; gap: 2rem; justify-items: start; }
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--ink); color: var(--bone); padding: .6rem 1rem; z-index: 95; animation: fade .2s both; }

/* ── PDP ── */
.crumbs { display: flex; gap: .5rem; padding: .5rem var(--gut); border-bottom: var(--rule); }
.pdp { display: grid; grid-template-columns: 7fr 5fr; }
.pdp__gallery { border-right: var(--rule); }
.pdp__stage { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); }
.pdp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path .7s var(--snap); }
.pdp__img.is-active { clip-path: inset(0); z-index: 1; }
.pdp__thumbs { display: flex; border-top: var(--rule); }
.pdp__thumb { position: relative; width: 5rem; height: 6rem; border-right: var(--rule); opacity: .5; } .pdp__thumb.is-active, .pdp__thumb:hover { opacity: 1; }
.pdp__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp__sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 2rem); }
.pdp__title { margin-top: 1rem; }
.pdp__price { display: flex; align-items: baseline; gap: .75rem; margin-top: 1.5rem; padding: .75rem 0; border-top: var(--rule); border-bottom: var(--rule); }
.pdp__amount { font-size: 1.5rem; }
.pdp__amount.is-flip { animation: flip .35s var(--snap); } @keyframes flip { from { opacity: 0; transform: translateY(-8px); } }
.pdp__field { margin-top: 1.5rem; } .pdp__field legend { margin-bottom: .5rem; }
.pdp__stock { min-height: 1.1rem; margin-top: .5rem; } .pdp__stock.is-low { color: var(--signal); }
.pdp__desc { margin-top: 2rem; font-size: .9rem; }
.pdp .spec { margin-top: 2rem; }
.swatch-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch-btn { width: 2.5rem; height: 2.5rem; border: var(--rule); transition: transform .2s; }
.swatch-btn:hover { transform: scale(1.06); } .swatch-btn.is-active { transform: scale(1.1); outline: 2px solid var(--ink); outline-offset: 2px; }
.size-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: var(--rule); border-left: var(--rule); }
.size-btn { padding: .8rem 0; border-right: var(--rule); border-bottom: var(--rule); transition: background .15s; text-align: center; }
.size-btn:hover:not(:disabled) { background: var(--paper); }
.size-btn.is-active { background: var(--ink); color: var(--bone); }
.size-btn:disabled { color: var(--ash); text-decoration: line-through; cursor: not-allowed; }
#main .pdp .btn--solid { margin-top: 1rem; }

/* ── Index / heads ── */
.split-head { display: grid; grid-template-columns: 8fr 4fr; border-bottom: var(--rule); }
.split-head__main { padding: var(--gut); border-right: var(--rule); } .split-head__main .display { margin-top: 2rem; }
.split-head__nav { display: flex; flex-direction: column; } .split-head__nav.prose { padding: var(--gut); }
.navrow { display: flex; justify-content: space-between; padding: .75rem 1rem; border-bottom: var(--rule); } .navrow:hover { background: var(--paper); }
.navrow.is-active { background: var(--ink); color: var(--bone); }
.page-head { padding: var(--gut); border-bottom: var(--rule); } .page-head .display { margin-top: 1.5rem; }
.page-head--split { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.page-head__actions { display: flex; gap: .5rem; }
.status { display: inline-block; margin-top: 1rem; border: var(--rule); padding: .15rem .45rem; }
.status--paid, .status--processing { background: var(--ink); color: var(--bone); }
.status--shipped, .status--delivered { background: var(--bone); }
.status--pending_payment { border-color: var(--signal); color: var(--signal); }
.status--cancelled, .status--expired, .status--refunded { color: var(--smoke); border-color: var(--ash); }
td .status { margin-top: 0; }

/* ── Cart / checkout ── */
.checkout-grid { display: grid; grid-template-columns: 1fr 24rem; gap: var(--gut); padding: var(--gut); align-items: start; }
.checkout-steps { display: grid; gap: var(--gut); }
.checkout-side { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.checkout-cta { display: flex; justify-content: flex-end; padding: 0 var(--gut); }
.panel { border: var(--rule); background: var(--bone); padding: var(--gut); display: grid; gap: 1rem; }
.panel__legend { padding: 0 .25rem; } fieldset.panel > legend { float: left; width: 100%; margin-bottom: 1rem; }
.panel--ink { background: var(--ink); color: var(--bone); } .muted-inv { color: var(--ash); }
.summary { border: var(--rule); padding: var(--gut); display: grid; gap: .6rem; background: var(--paper); }
.summary__line { padding-bottom: .5rem; border-bottom: 1px dashed var(--ash); }
.summary__total { border-top: var(--rule); padding-top: .6rem; } .summary__total .mono { font-size: 1.35rem; }
.pay-option { display: flex; gap: .9rem; align-items: flex-start; border: var(--rule); padding: 1rem; cursor: pointer; transition: background .15s; }
.pay-option input { accent-color: var(--ink); margin-top: .15rem; } .pay-option span { display: grid; gap: .25rem; }
.pay-option.is-checked, .pay-option:has(input:checked) { background: var(--paper); box-shadow: inset 4px 0 0 var(--ink); }
.lines { border-top: var(--rule); } .lines--compact { border: 0; display: grid; gap: .6rem; }
.line { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: var(--rule); }
.line__img { aspect-ratio: 3/4; border: var(--rule); background: var(--paper); overflow: hidden; } .line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__info { display: grid; gap: .3rem; align-content: start; }
.line__name { font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; } .line__name:hover { color: var(--signal); }
.line__actions { display: grid; gap: .5rem; justify-items: end; align-content: start; }
.inline-form { display: flex; gap: .5rem; align-items: center; }

/* ── Auth ── */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; border-bottom: var(--rule); }
.auth__aside { padding: var(--gut); border-right: var(--rule); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.auth__form { padding: var(--gut); display: grid; gap: 1rem; align-content: center; max-width: 30rem; width: 100%; justify-self: center; }

/* ── Tables (account + admin) ── */
.table-wrap { overflow-x: auto; border: var(--rule); background: var(--bone); margin-bottom: var(--gut); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th { font: .6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); text-align: left; padding: .7rem; border-bottom: var(--rule); font-weight: 400; }
.table td { padding: .55rem .7rem; border-bottom: var(--rule); vertical-align: middle; }
.table tbody tr:hover { background: var(--paper); }
.table tfoot td { border-bottom: 0; padding: .35rem .7rem; }
.row-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; } a.row-title:hover { color: var(--signal); }
.thumb-cell { width: 3.5rem; } .thumb-cell img { width: 2.5rem; height: 3rem; object-fit: cover; border: var(--rule); }
.error-page { display: grid; grid-template-rows: 1fr auto; min-height: 100dvh; padding: var(--gut); }
.error-page__main { display: flex; flex-direction: column; justify-content: center; }
.error-page__foot { display: flex; justify-content: space-between; align-items: center; border-top: var(--rule); padding-top: .75rem; gap: 1rem; }

/* ── Admin ── */
.admin { display: grid; grid-template-columns: 15rem 1fr; min-height: 100dvh; background: var(--paper); }
.admin__side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--bone); border-right: var(--rule); }
.admin__brand { padding: 1rem; border-bottom: var(--rule); } .admin__brand .display { font-size: 1.5rem; }
.admin__nav { display: flex; flex-direction: column; } .admin__nav a { padding: .8rem 1rem; border-bottom: var(--rule); }
.admin__nav a:hover, .admin__nav a.is-active { background: var(--ink); color: var(--bone); }
.admin__me { margin-top: auto; padding: 1rem; border-top: var(--rule); display: grid; gap: .5rem; }
.admin__main { padding: clamp(1rem, 3vw, 2rem); padding-bottom: 7rem; min-width: 0; }
.admin__main .flash { margin: 0 0 1rem; }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-head .display { margin-top: .4rem; } .admin-head__actions { display: flex; gap: .5rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--rule); border-left: var(--rule); margin-bottom: 1.5rem; }
.stat { padding: 1rem; border-right: var(--rule); border-bottom: var(--rule); background: var(--bone); } .stat--link:hover { background: var(--paper); }
.stat__v { font-size: 1.5rem; margin-top: .5rem; }
.panel--grid { grid-template-columns: repeat(12, 1fr); } .panel--grid .panel__legend { grid-column: 1 / -1; }
.fld--2 { grid-column: span 2; } .fld--4 { grid-column: span 4; } .fld--6 { grid-column: span 6; } .fld--8 { grid-column: span 8; } .fld--12 { grid-column: 1 / -1; }
.fld--end { justify-content: flex-end; }
.panel--two { grid-template-columns: 1fr 1fr; gap: 2rem; } .panel--flush { padding: 0; gap: 0; } .panel__pad { padding: 1rem; }
.editor, .globals form { display: grid; gap: 1.25rem; } .editor .panel { margin: 0; }
.img-row, .color-row, .link-row { display: grid; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.img-row { grid-template-columns: 3rem 1fr auto auto auto; } .img-row__thumb { width: 3rem; height: 3rem; border: var(--rule); background: var(--paper) center/cover no-repeat; }
.color-row { grid-template-columns: 2.75rem 1fr 7rem auto; }
.color-row input[type=color] { width: 2.75rem; height: 2.5rem; border: var(--rule); padding: 2px; background: transparent; cursor: pointer; }
.link-row { grid-template-columns: 1fr 2fr auto auto; }
.preset-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.preset { border: var(--rule); padding: .25rem .5rem; display: inline-flex; gap: .4rem; align-items: center; } .preset:hover { background: var(--ink); color: var(--bone); }
.bulk { grid-template-columns: repeat(4, 1fr); } .bulk .panel__legend { grid-column: 1 / -1; color: var(--ash); }
.bulk__row { display: flex; gap: .5rem; } .bulk .field { color: var(--ink); }
.table--matrix tr.is-off { opacity: .4; } .table--matrix tr.group-start td { border-top: 2px solid var(--ink); }
.table--matrix .field { padding: .35rem .5rem; } .table--matrix .is-invalid { border-color: var(--signal); background: rgba(255,59,0,.08); }
.actionbar { position: fixed; left: 15rem; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem 2rem; border-top: var(--rule); background: rgba(236,232,223,.96); backdrop-filter: blur(4px); }
.actionbar__btns { margin-left: auto; display: flex; gap: .5rem; }
.danger-zone { margin-top: 1.5rem; }
.filters { grid-template-columns: 1fr 9rem 11rem 1fr; margin-bottom: 1rem; align-items: center; }
form.filters:has(> .btn) { grid-template-columns: 1fr auto; }
tr.is-dirty { background: rgba(255,59,0,.08); }
.tabs { display: flex; flex-wrap: wrap; border-top: var(--rule); border-left: var(--rule); margin-bottom: 1rem; }
.tabs a { padding: .55rem .8rem; border-right: var(--rule); border-bottom: var(--rule); background: var(--bone); } .tabs a.is-active, .tabs a:hover { background: var(--ink); color: var(--bone); }
.split { display: grid; grid-template-columns: 1fr 22rem; gap: 1.5rem; align-items: start; } .stack { display: grid; gap: 1rem; }
.globals { display: grid; grid-template-columns: 1fr 24rem; gap: 1.5rem; align-items: start; } .globals > div { display: grid; gap: 1.25rem; }
.gpreview { border: var(--rule); background: var(--bone); margin-top: .5rem; }
.gpreview__bar { background: var(--ink); color: var(--bone); padding: .35rem .75rem; } .gpreview__bar:empty { display: none; }
.gpreview__logo { display: flex; justify-content: center; padding: .9rem; border-bottom: var(--rule); } .gpreview__logo .display { font-size: 1.5rem; } .gpreview__logo img { height: 1.75rem; }
.gpreview__body { height: 6rem; background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ash) 8px, var(--ash) 9px); }
.gpreview__foot { border-top: var(--rule); padding: .75rem; display: grid; gap: .5rem; } .gpreview__links { display: flex; flex-wrap: wrap; gap: .75rem; }
.admin-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.admin-login__aside { background: var(--ink); color: var(--bone); padding: var(--gut); display: flex; flex-direction: column; justify-content: space-between; }
.admin-login__aside ul { color: var(--ash); display: grid; gap: .25rem; }
.admin-login__form { display: grid; gap: 1rem; align-content: center; width: 100%; max-width: 24rem; justify-self: center; padding: var(--gut); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hide-sm { display: none; } .show-sm { display: inline-flex; }
  .site-header__nav { display: none; }
  .site-header__bar { grid-template-columns: auto 1fr; } .logo { order: -1; }
  .hero, .split-head, .manifesto, .pdp, .auth, .checkout-grid, .admin-login, .split, .globals { grid-template-columns: 1fr; }
  .hero__media { border-left: 0; border-top: var(--rule); } .hero__title { margin: 4rem 0 0; }
  .split-head__main, .manifesto__label, .auth__aside, .pdp__gallery { border-right: 0; border-bottom: var(--rule); }
  .egrid { grid-template-columns: 1fr; row-gap: 2.5rem; } .egrid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .section__head h2, .section__aside { grid-column: 1 / -1; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; border-right: 0; border-bottom: var(--rule); }
  .site-footer__col:first-of-type { border-left: 0; }
  .qv__panel { grid-template-columns: 1fr; } .qv__media { border-right: 0; border-bottom: var(--rule); }
  .checkout-side, .pdp__sticky { position: static; }
  .admin { grid-template-columns: 1fr; } .admin__side { position: static; height: auto; } .admin__nav { flex-direction: row; flex-wrap: wrap; }
  .actionbar { left: 0; padding: .75rem 1rem; } .stats, .bulk, .filters, .panel--two { grid-template-columns: 1fr 1fr; }
  .panel--grid > .fld { grid-column: 1 / -1; } .fld-grid { grid-template-columns: 1fr; }
  .line { grid-template-columns: 4.5rem 1fr; } .line__actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; } .marquee__track { animation: none; }
}