/* Studio Covers — PDP + Projects concept
   Visual language: Dedar Milano (white, one grotesk, small type, square edges, imagery edge to edge).
   Functionality: IKEA (series, colours, complete-with, measurements, what's included, get the look).
   Global layer first (web-craft §1); components reference these tokens only. */

:root {
  --paper: #FFFFFF;
  --paper-2: #F5F3EF;
  --ink: #111111;
  --ink-2: #8A8A8A;
  --ink-3: #A9A9A9;
  --line: #E7E5E1;
  --accent: #111111;

  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* Display face for contrast, close to the Didone in the Studio Covers logo. Used sparingly. */
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --gutter: 16px;
  --maxw: 1600px;

  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 18px;
  --fs-l: 26px;
  --fs-xl: clamp(30px, 3.4vw, 44px);

  --lift: 0 6px 24px rgb(0 0 0 / 0.12);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-ui: 240ms;
  --t-panel: 420ms;

  --header-h: 64px;
  --ribbon-h: 30px;
}
@media (min-width: 750px) { :root { --gutter: 24px; --header-h: 76px; --fs-s: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.45; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 750px) { body { font-size: var(--fs-s); } }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 1.5px 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; }
.no-transitions * { transition: none !important; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-2); }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.price { font-variant-numeric: tabular-nums; }
.label { font-size: var(--fs-xs); color: var(--ink-2); }

/* Buttons — square, sentence case (Dedar) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 48px; padding: 0 22px; font-size: var(--fs-s); border: 1px solid var(--ink); transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); white-space: nowrap; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #333; border-color: #333; }
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }

/* ─── Concept ribbon ─────────────────────────────────────────── */
.ribbon { height: var(--ribbon-h); background: var(--ink); color: #DADADA; display: flex; align-items: center; justify-content: center; gap: var(--s3); font-size: 11.5px; padding: 0 var(--s4); text-align: center; white-space: nowrap; overflow: hidden; }
.ribbon a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 749px) { .ribbon__long { display: none; } }

/* ─── Header ─────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--paper); }
.hdr__in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); max-width: none; }
.hdr__left, .hdr__right { display: flex; align-items: center; gap: 4px 20px; font-size: 15px; }
.hdr__right { justify-self: end; }
.hdr__nav { display: none; gap: 20px; }
.hdr a, .hdr button { position: relative; transition: color var(--t-ui) var(--ease); }
.hdr__left a:hover, .hdr__right a:hover, .hdr__right button:hover, .hdr__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hdr__tap { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (max-width: 749px) { .hdr__wish { display: none; } .hdr__left, .hdr__right { font-size: 15px; } }
.hdr__logo { justify-self: center; display: block; }
.hdr__logo img { height: 30px; width: auto; filter: brightness(0); }
@media (min-width: 750px) { .hdr__logo img { height: 38px; } }
.hdr__search { display: none; }
.hdr__search input { border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; font-size: 16px; width: 170px; padding: 4px 0; outline: none; }
.hdr__search input::placeholder { color: var(--ink-2); }
@media (min-width: 750px) { .hdr__search input { font-size: 14px; } }
.count { font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .hdr__nav { display: flex; }
  .hdr__menu-btn, .m-only { display: none; }
  .hdr__search { display: block; }
}

/* Mobile menu */
.sheet { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); opacity: 0; transition: opacity var(--t-panel) var(--ease); }
.sheet__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 380px); background: var(--paper); transform: translateX(-102%); transition: transform var(--t-panel) var(--ease); padding: var(--s4) var(--gutter); display: flex; flex-direction: column; gap: var(--s1); }
.sheet.is-open { pointer-events: auto; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__panel a { font-size: var(--fs-l); line-height: 1.4; }
.sheet__close { align-self: flex-start; min-height: 44px; margin-bottom: var(--s5); }

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ─── Sections ───────────────────────────────────────────────── */
.sec { padding-block: var(--s8); }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s4); }
.sec__title { font-size: var(--fs-s); font-weight: 400; margin: 0; }
.sec__title--big { font-family: var(--display); font-size: var(--fs-xl); line-height: 1.06; letter-spacing: -0.01em; }
.disp { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }

/* Card grid — Dedar "You may also like" */
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.tile { display: block; }
.tile__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms var(--ease), transform 1200ms var(--ease); }
.tile__img img + img { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) { .tile:hover .tile__img img + img { opacity: 1; } .tile:hover .tile__img img { transform: scale(1.015); } }
.tile__cap { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 10px; font-size: var(--fs-s); }
.tile__cap span:first-child b { font-weight: 400; color: var(--ink-2); margin-right: 8px; }
.tile__sub { font-size: var(--fs-s); }
.tile:hover .tile__name { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Footer ─────────────────────────────────────────────────── */
.ftr { padding: var(--s8) 0 var(--s6); font-size: var(--fs-s); }
.ftr__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .ftr__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.ftr h4 { font-size: var(--fs-s); font-weight: 400; color: var(--ink-2); margin: 0 0 var(--s3); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__brand img { height: 40px; width: auto; filter: brightness(0); margin-bottom: var(--s4); }
.ftr__brand p { max-width: 36ch; color: var(--ink-2); }
.ftr__base { margin-top: var(--s7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); color: var(--ink-2); font-size: var(--fs-xs); }

/* ─── Drawer (bag) ───────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); opacity: 0; transition: opacity var(--t-panel) var(--ease); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 460px); background: var(--paper); transform: translateX(102%); transition: transform var(--t-panel) var(--ease); display: flex; flex-direction: column; }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); height: var(--header-h); font-size: 15px; }
.drawer__body { flex: 1; overflow: auto; padding: var(--s2) var(--gutter) var(--s5); display: grid; align-content: start; gap: var(--s5); }
.drawer__foot { border-top: 1px solid var(--line); padding: var(--s4) var(--gutter) var(--s5); display: grid; gap: var(--s3); }
.drawer__row { display: flex; justify-content: space-between; font-size: 15px; }
.drawer__note { font-size: var(--fs-xs); color: var(--ink-2); }
.line-item { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s4); align-items: start; }
.line-item img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-2); }
.line-item__meta { color: var(--ink-2); }
.line-item__x { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; margin-top: var(--s2); font-size: var(--fs-xs); min-height: 32px; }
.empty { color: var(--ink-2); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s linear var(--t-ui); background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: 13px; white-space: nowrap; }
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* Dialog house defaults (web-craft §15) */
dialog.dlg { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100svh; margin: 0; color: var(--ink); overflow: hidden; }
dialog.dlg:not([open]) { display: none; }
dialog.dlg::backdrop { background: #fff; }
dialog.dlg { background: #fff; }
dialog.dlg--dark::backdrop { background: rgb(12 12 12 / 0.96); }
dialog.dlg--dark { color: #fff; background: #0c0c0c; }
.dlg__close { position: absolute; top: 10px; right: 10px; z-index: 5; height: 44px; padding: 0 12px; font-size: 15px; }
.dlg__close:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}