/* Qualia Store: warm paper ground, ink type, the logo's orange as the one accent, and the logo's crop marks as the
   signature motif (they frame products on hover). Fraunces for display, Schibsted Grotesk for everything else, both
   served from the shop itself. Product images are multiplied onto tinted tiles, so white mock-up backgrounds vanish.
   Motion is small and respects prefers-reduced-motion. */
@font-face { font-family: Fraunces; src: url(/assets/fonts/fraunces-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(/assets/fonts/schibsted-grotesk-italic-latin.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --paper: #F8F4ED; --paper-2: #F1EBE0; --tile: #ECE5D7; --tile-hover: #E6DECD;
  --ink: #15130F; --ink-2: #3A362E; --muted: #6F6957; --line: #E3DBCB; --line-2: #CBC2AE;
  --accent: #F08A1E; --accent-ink: #B4560A; --accent-soft: #FBE7CF;
  --night: #15130F; --night-2: #221F18; --night-text: #E9E3D6; --night-muted: #A8A08F;
  --ok: #1E7F4F; --ok-soft: #E3F1E8; --bad: #B3261E; --bad-soft: #FBE9E7;
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: Fraunces, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r: 16px; --r-sm: 10px; --wrap: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
/* Paper grain: a tiled noise over everything, faint enough to feel rather than see. */
body::before { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
@media (min-width: 760px) { .wrap { padding-left: 40px; padding-right: 40px; } }

/* Type */
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-variation-settings: "SOFT" 30, "WONK" 1; }
h1, h2, h3 { text-wrap: balance; }
h1.serif { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -.03em; margin: 0; }
h2.serif { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; margin: 0 0 20px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
p { margin: 0 0 1em; }

/* Scroll progress: a thin orange line that grows with the page, where the browser can drive it from scroll. */
.progress { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Announcement and banners */
.announce { background: var(--night); color: var(--night-text); text-align: center; font-size: 13px; letter-spacing: .01em; padding: 9px 16px; }
.announce a { color: #fff; }
.code-banner { background: var(--ok-soft); color: var(--ok); font-size: 14px; padding: 10px 0; } .code-banner.bad { background: var(--bad-soft); color: var(--bad); }
.code-banner a { color: inherit; font-weight: 600; margin-left: 8px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent; transition: border-color .35s, background-color .35s; }
.top.is-scrolled { border-bottom-color: var(--line); }
@supports not (backdrop-filter: blur(1px)) { .top { background: var(--paper); } }
.bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 24px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; height: 44px; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); }
.brand:hover img { transform: rotate(-4deg) scale(1.05); }
.brand span { font: italic 500 27px/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 60; margin-top: 2px; }
/* Categories: an index number, crop marks drawn into the corners on hover (kept on the current page), and on wide
   screens with a mouse a small print of the category that drops in below the link. */
.nav { justify-self: center; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.nav a { --c: var(--accent); --w: 2px; --l: 0px; position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 4px;
  font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink-2); white-space: nowrap; transition: color .25s, --l .3s var(--ease-out);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat; }
.nav a:hover, .nav a:focus-visible, .nav a.on { --l: 9px; color: var(--ink); }
.nav a:focus-visible { outline: none; }
.nav .n { font: 600 10px/1 var(--sans); letter-spacing: .06em; color: var(--accent-ink); font-variant-numeric: tabular-nums; transform: translateY(-5px); transition: transform .3s var(--ease-out); }
.nav a:hover .n, .nav a.on .n { transform: translateY(-7px); }
.nav .t { transition: transform .3s var(--ease-out); }
.nav .dot { display: none; }
.nav .peek { display: none; }
@property --l { syntax: '<length>'; inherits: true; initial-value: 0px; }
@media (min-width: 860px) and (hover: hover) {
  .nav .peek { display: block; position: absolute; left: 50%; top: calc(100% + 10px); width: 148px; padding: 7px 7px 26px; background: #fff; border-radius: 3px; pointer-events: none;
    box-shadow: 0 1px 2px rgb(21 19 15 / .08), 0 14px 30px -10px rgb(21 19 15 / .35); opacity: 0; transform: translate(-50%, -8px) rotate(-4deg) scale(.94); transform-origin: 50% 0;
    transition: opacity .2s, transform .35s var(--ease-out); z-index: 30; }
  .nav .peek img { display: block; width: 134px; height: 134px; object-fit: cover; border-radius: 1px; }
  .nav a:nth-child(even) .peek { transform: translate(-50%, -8px) rotate(3deg) scale(.94); }
  .nav a:hover .peek { opacity: 1; transform: translate(-50%, 0) rotate(-2deg) scale(1); }
  .nav a:nth-child(even):hover .peek { transform: translate(-50%, 0) rotate(2deg) scale(1); }
}
.basket { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); background: transparent; transition: background-color .25s, color .25s, transform .25s; }
.basket:hover { background: var(--ink); color: #fff; }
.basket svg { flex: none; }
.basket .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--ink); font: 700 12px/1 var(--sans); }
@media (max-width: 859px) {
  .announce { font-size: 12px; padding: 8px 14px; }
  .bar { grid-template-columns: 1fr auto; gap: 0; min-height: 0; padding-top: 10px; }
  .brand { grid-row: 1; grid-column: 1; } .brand img { width: 38px; height: 38px; } .brand span { font-size: 24px; }
  .basket { grid-row: 1; grid-column: 2; justify-self: end; height: 40px; padding: 0 12px; } .basket .label { display: none; }
  /* The category row scrolls sideways, and tucks away once the page has scrolled under the header. */
  .nav { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -18px; padding: 10px 18px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    max-height: 70px; transition: max-height .35s var(--ease), opacity .25s, padding .35s var(--ease); }
  .nav::-webkit-scrollbar { display: none; }
  .nav { min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .nav a { align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; padding: 4px 13px 4px 5px; min-height: 32px; flex: none; }
  .nav a:not(:has(.dot)) { padding-left: 13px; }
  .nav a:hover, .nav a:focus-visible { --l: 0px; border-color: var(--line-2); }
  .nav a.on { --l: 0px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .nav .n { display: none; }
  .nav .dot { display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
  .nav a.on .dot { box-shadow: 0 0 0 1.5px var(--accent); }
  .top.is-scrolled .nav { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 6px; overflow: hidden; pointer-events: none; }
}

/* Hero (front page): the tagline set large, with the last word in orange italic, and three featured pieces
   stacked like prints on a table. */
.hero { padding: clamp(36px, 6vw, 88px) 0 clamp(16px, 3vw, 40px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font: 500 clamp(44px, 7.2vw, 96px)/.98 var(--serif); letter-spacing: -.04em; margin: 0 0 24px; font-variation-settings: "SOFT" 30, "WONK" 1; text-wrap: balance; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent-ink); font-variation-settings: "SOFT" 70, "WONK" 1; }
.hero-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; margin: 0 0 28px; }
.hero-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 18px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 500; font-size: 14px; text-decoration: none; color: var(--ink); transition: border-color .25s, transform .3s var(--ease-out), background-color .25s; }
.chip-link small { color: var(--muted); font-weight: 500; }
.chip-link:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.collage { position: relative; aspect-ratio: 1; max-width: 560px; margin-left: auto; width: 100%; }
.collage::before, .collage::after { content: ''; position: absolute; width: 36px; height: 36px; border: 3px solid var(--accent); pointer-events: none; }
.collage::before { left: -6px; top: 10px; border-right: 0; border-bottom: 0; }
.collage::after { right: -6px; bottom: 10px; border-left: 0; border-top: 0; }
.collage a { position: absolute; width: 56%; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--tile); overflow: hidden; isolation: isolate; box-shadow: 0 40px 70px -36px rgba(21, 19, 15, .5), 0 2px 0 rgba(255,255,255,.6) inset; transition: transform .9s var(--ease-out), box-shadow .6s; will-change: transform; }
.collage a img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.collage a:nth-child(1) { left: 2%; top: 10%; transform: rotate(-7deg); z-index: 1; animation: float 7s ease-in-out infinite alternate; }
.collage a:nth-child(2) { left: 28%; top: 0; transform: rotate(2.5deg); z-index: 3; width: 54%; animation: float 8s ease-in-out -2s infinite alternate; }
.collage a:nth-child(3) { left: 50%; top: 36%; transform: rotate(8deg); z-index: 2; width: 48%; animation: float 9s ease-in-out -4s infinite alternate; }
.collage a:hover { transform: rotate(0) scale(1.05); z-index: 5; box-shadow: 0 50px 80px -30px rgba(21, 19, 15, .55); }
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (max-width: 859px) {
  .hero-grid { grid-template-columns: 1fr; }
  .collage { max-width: 420px; margin: 8px auto 0; }
}

/* Sections */
.section { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 72px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 36px); }
.sec-head h2 { margin: 0; }
.sec-head .eyebrow { margin-bottom: 10px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); padding-bottom: 6px; }
.more::after { content: '→'; transition: transform .3s var(--ease-out); }
.more:hover::after { transform: translateX(4px); }

/* Category tiles: a staggered gallery wall. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; color: #fff; background: var(--night-2); text-decoration: none; isolation: isolate; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.3s var(--ease-out); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(21, 19, 15, .8), rgba(21, 19, 15, .05) 55%); transition: opacity .5s; }
.tile:hover img { transform: scale(1.06); }
.tile-text { position: absolute; left: 20px; right: 16px; bottom: 18px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tile-text strong { display: block; font: 500 clamp(24px, 2.4vw, 34px)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 30; }
.tile-text small { display: block; margin-top: 7px; font-size: 13px; opacity: .85; }
.tile-arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: translate(6px, 6px) scale(.9); transition: opacity .35s, transform .5s var(--ease-out); }
.tile:hover .tile-arrow { opacity: 1; transform: none; }
.tile:hover { color: #fff; }
@media (min-width: 760px) { .tile:nth-child(even) { margin-top: 44px; } .tile:nth-child(odd) { margin-bottom: 44px; } }
@media (max-width: 759px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Crop marks, drawn in the corners of a frame with eight tiny gradients; shown when the frame is hovered. */
.marks { position: absolute; inset: 10px; z-index: 3; pointer-events: none; --c: var(--accent); --w: 2.5px; --l: 20px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat;
  opacity: 0; transform: scale(1.05); transition: opacity .35s, transform .55s var(--ease-out); }
:is(.card, .tile, .main-frame):hover .marks { opacity: 1; transform: scale(1); }

/* Product cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(14px, 1.8vw, 24px); }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
.card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.card:hover { color: var(--ink); }
.media { position: relative; aspect-ratio: 5 / 6; border-radius: var(--r); background: var(--tile); overflow: hidden; isolation: isolate; transition: background-color .5s; }
.card:hover .media { background: var(--tile-hover); }
.media img, .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; transition: transform 1.1s var(--ease-out), opacity .5s var(--ease); }
.noimg { background: transparent; }
.media .alt { opacity: 0; }
.card:hover .media img { transform: scale(1.045); }
.card:hover .media .alt { opacity: 1; }
.card:hover .media:has(.alt) .main { opacity: 0; }
.tag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-block; padding: 7px 10px 6px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tag.quiet { background: #fff; color: var(--ink-2); }
.card .name { font-size: 15px; font-weight: 500; line-height: 1.35; }
.card .name, .card .price { display: block; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.price .was { font-weight: 400; color: var(--muted); text-decoration: line-through; margin-left: 8px; }
.price.sale { color: var(--accent-ink); }
.price.big { font-size: 28px; margin: 0; letter-spacing: -.01em; }
.price.big .was { font-size: 18px; }
.card .body { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }

/* Scroll reveal for cards and tiles, driven by the browser where it can; otherwise everything is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid > .card, .tiles > .tile { animation: rise .7s var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
    @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  }
}

/* Category page */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs span + span::before, .crumbs a + span::before, .crumbs a + a::before { content: '/'; color: var(--line-2); margin-right: 6px; }
.cat-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.cat-head h1 { font-size: clamp(44px, 7vw, 92px); letter-spacing: -.04em; line-height: .96; }
.cat-head .prose { font-size: 17px; color: var(--ink-2); max-width: 48ch; }
.cat-head .prose p:last-child { margin: 0; }
@media (max-width: 759px) { .cat-head { grid-template-columns: 1fr; } }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; font-size: 14px; }
.toolbar label { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; }
select { height: 42px; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0 40px 0 16px; background-color: #fff; color: var(--ink); font-weight: 500; cursor: pointer; transition: border-color .25s; }
select:hover { border-color: var(--ink); }
/* Selects draw their own caret 14px in from the right edge, with room for it in the padding: the browser's arrow
   ignores padding and sits against the border. */
select, select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315130F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: right 14px center; background-size: 12px 8px; padding-right: 40px; }
select::-ms-expand { display: none; }
.empty { padding: 48px 0; text-align: center; color: var(--muted); }

/* Prose */
.prose { max-width: 66ch; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose p { margin: 0 0 1.1em; } .prose img { border-radius: var(--r-sm); }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin: 1.6em 0 .5em; line-height: 1.15; font-variation-settings: "SOFT" 30; }
.prose h2 { font-size: 30px; } .prose h3 { font-size: 23px; } .prose h4 { font-size: 19px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; } .prose li { margin: .3em 0; }
.prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); font-variation-settings: "SOFT" 50; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); } .prose a:hover { color: var(--accent-ink); }
.prose u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose code, .prose .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; }
.prose code { background: var(--paper-2); border-radius: 5px; padding: .1em .35em; }
.prose pre { background: var(--paper-2); border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 1.1em; overflow-x: auto; font: 14px/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose mark { color: inherit; border-radius: 3px; padding: 0 .15em; }
.prose mark.hl-yellow { background: #FFE786; } .prose mark.hl-green { background: #CDEBC3; } .prose mark.hl-blue { background: #CBE3F7; }
.prose mark.hl-pink { background: #F7D0E1; } .prose mark.hl-orange { background: #FBD5A8; }
/* Tables scroll sideways inside their own box on a phone instead of widening the page. */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 16px 10px 0; text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line-2); }
.prose tr:last-child td { border-bottom: 0; }
/* The admin editor's preview (templates/admin/rich_preview.php): the page's prose alone, on the shop's paper. */
.rich-preview { margin: 0; min-height: 0; display: block; padding: 24px clamp(16px, 4vw, 32px); background: var(--paper); }

/* Product page */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gallery { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; position: sticky; top: 98px; }
.gallery.single { grid-template-columns: 1fr; }
.main-frame { position: relative; aspect-ratio: 1; border-radius: 20px; background: var(--tile); overflow: hidden; isolation: isolate; cursor: zoom-in; order: 2; }
.main-image, .noimg.big { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; transition: transform .9s var(--ease-out); }
.main-frame:hover .main-image { transform: scale(1.03); }
.main-frame .marks { inset: 14px; --l: 26px; --w: 3px; }
.thumbs { display: flex; flex-direction: column; gap: 10px; order: 1; }
.thumbs button { position: relative; width: 72px; height: 72px; flex: none; padding: 0; border: 1.5px solid transparent; border-radius: 12px; background: var(--tile); overflow: hidden; cursor: pointer; opacity: .65; transition: opacity .25s, border-color .25s, transform .3s var(--ease-out); isolation: isolate; }
.thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: 28px; }
  .gallery { position: static; grid-template-columns: 1fr; }
  .thumbs { order: 2; flex-direction: row; overflow-x: auto; padding: 2px; scrollbar-width: none; } .thumbs::-webkit-scrollbar { display: none; }
  .thumbs button { width: 64px; height: 64px; }
}
.buy { display: flex; flex-direction: column; gap: 22px; }
.buy h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -.035em; }
.buy .eyebrow { margin-bottom: 0; }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.option { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.option legend { font-size: 14px; padding: 0; margin-bottom: 10px; color: var(--muted); } .option legend strong { color: var(--ink); font-weight: 600; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span:not(.sr) { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 500; font-size: 14px; transition: border-color .2s, background-color .2s, color .2s, transform .3s var(--ease-out); }
.choice:hover span:not(.sr) { border-color: var(--ink); }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice.swatch .dot { min-width: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px rgba(21, 19, 15, .18) inset; background: var(--tile); }
.choice.swatch:hover .dot { transform: scale(1.08); }
.choice.swatch input:checked + .dot { background: inherit; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink), 0 0 0 1px rgba(21, 19, 15, .18) inset; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease-out), box-shadow .3s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(21, 19, 15, .7); }
.btn-primary:hover { background: #000; color: #fff; box-shadow: 0 16px 30px -14px rgba(21, 19, 15, .8); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary svg { transition: transform .3s var(--ease-out); } .btn-primary:hover svg { transform: translateX(3px); }
.btn-outline { background: #fff; border-color: var(--ink); color: var(--ink); } .btn-outline:hover { background: var(--ink); color: #fff; }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn.add { min-height: 58px; font-size: 17px; }
.facts { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-2); }
.facts li { display: flex; gap: 12px; align-items: flex-start; }
.facts li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--accent-ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.facts .f-ship { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.facts .f-print { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4M5 8h14a2 2 0 0 1 2 2v6h-4v4H7v-4H3v-6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E"); }
.facts .f-dl { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 19h16'/%3E%3C/svg%3E"); }
.facts .f-undo { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11a5 5 0 0 1 0 10H9'/%3E%3Cpath d='M8 6l-4 4 4 4'/%3E%3C/svg%3E"); }
.facts .f-made { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 5 5.6.8-4 3.9.9 5.6-4.9-2.6-4.9 2.6.9-5.6-4-3.9 5.6-.8z'/%3E%3C/svg%3E"); }
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font: 500 13px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color .2s, transform .3s var(--ease-out); }
.chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.description { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px 64px; margin-top: clamp(40px, 6vw, 88px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.description > h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); position: sticky; top: 100px; }
@media (max-width: 900px) { .description { grid-template-columns: 1fr; } .description > h2 { position: static; } }

/* Lightbox for the main product image. */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(21, 19, 15, .94); }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: min(92vw, 1400px); max-height: 90vh; width: auto; height: auto; border-radius: 12px; cursor: zoom-out; }
.lightbox .close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }

/* Footer */
.foot { position: relative; overflow: hidden; background: var(--night); color: var(--night-text); margin-top: clamp(48px, 8vw, 112px); padding: clamp(44px, 6vw, 80px) 0 28px; font-size: 14px; }
.foot::before, .foot::after { content: ''; position: absolute; width: 44px; height: 44px; border: 3px solid var(--accent); pointer-events: none; opacity: .9; }
.foot::before { left: 20px; top: 20px; border-right: 0; border-bottom: 0; }
.foot::after { right: 20px; bottom: 20px; border-left: 0; border-top: 0; }
.foot-mark { font: 500 clamp(56px, 11.5vw, 170px)/.9 var(--serif); letter-spacing: -.045em; margin: 0 0 clamp(28px, 5vw, 56px); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(233, 227, 214, .28); user-select: none; font-variation-settings: "SOFT" 30; }
.foot-mark em { font-style: italic; color: rgba(240, 138, 30, .85); -webkit-text-stroke: 0; }
.cols4 { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px 24px; }
@media (max-width: 759px) { .cols4 { grid-template-columns: repeat(2, 1fr); } }
.foot .stack { gap: 8px; }
.foot .stack > strong { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 6px; }
.foot .stack > strong.serif { font: 500 24px/1.1 var(--serif); letter-spacing: -.02em; text-transform: none; color: #fff; }
.foot a { color: var(--night-muted); text-decoration: none; transition: color .2s; } .foot a:hover { color: #fff; }
.foot .muted { color: var(--night-muted); }
.legal { margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 1px solid rgba(233, 227, 214, .14); font-size: 12px; color: var(--night-muted); }

/* Pages, FAQ, contact */
.page h1 { margin-bottom: 28px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 18px 44px 18px 0; list-style: none; position: relative; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-weight: 400; font-size: 20px; transition: transform .4s var(--ease-out), background-color .25s, color .25s; }
.qa[open] summary::after { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.qa div { padding: 0 0 20px; color: var(--ink-2); }
.prose .qa { max-width: none; }
.narrow-page { max-width: 680px; } .narrow-page .summary { position: static; margin: 16px 0; }
.contact-form { display: flex; flex-direction: column; gap: 18px; } .contact-form p { margin: 0; }
.notice { background: var(--ok-soft); color: var(--ok); border-radius: var(--r-sm); padding: 14px 16px; }
.error { color: var(--bad); font-weight: 500; }

/* Basket and checkout */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; margin-top: 28px; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.summary { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; box-shadow: 0 30px 60px -48px rgba(21, 19, 15, .5); }
.summary h2 { margin: 0 0 4px; font-size: 26px; }
.row { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.row.big { font-size: 22px; font-weight: 600; border-top: 1px dashed var(--line-2); padding-top: 14px; margin-top: 4px; font-family: var(--serif); letter-spacing: -.01em; }
.row.discount { color: var(--ok); }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line img, .line .noimg { position: static; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--tile); mix-blend-mode: multiply; }
.line-info { display: flex; flex-direction: column; gap: 4px; } .line-info a { text-decoration: none; }
.qty { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 14px; }
.qty input { width: 68px; min-height: 40px; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 0 12px; text-align: center; margin-left: 8px; background: #fff; }
.basket-lines { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .basket-lines .line { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.link:hover { color: var(--accent-ink); }
.step { border: 0; border-top: 1px solid var(--line); padding: 26px 0 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.step legend { font: 500 24px/1.2 var(--serif); letter-spacing: -.02em; padding: 0 0 14px; font-variation-settings: "SOFT" 30; }
.step legend .muted { font: 400 14px var(--sans); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } .fields .span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.fields label, .step > label:not(.opt):not(.check) { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input { min-height: 50px; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 0 16px; font: 15px var(--sans); background: #fff; color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
select.input { border-radius: 12px; }
textarea.input { padding: 12px 16px; line-height: 1.5; min-height: 100px; resize: vertical; }
.opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; cursor: pointer; margin: 0; transition: border-color .2s, box-shadow .2s; }
.opt:hover { border-color: var(--ink); }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .opt input { accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.opt.fixed { cursor: default; background: var(--paper-2); } .opt-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); } .check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 1px 0 0; flex: none; }
.notice-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid #F0D9B5; border-radius: 14px; padding: 16px 18px; background: #FFF6E8; font-size: 14px; }
.pickup { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .pickup p { margin: 0; }
.pickup-list { display: flex; flex-direction: column; gap: 8px; }
.voucher { display: flex; flex-direction: column; gap: 8px; } .voucher p { margin: 0; }
.voucher-form { display: flex; gap: 8px; } .voucher-form .input { flex: 1; min-width: 0; text-transform: uppercase; min-height: 44px; }

/* Order and thank-you pages */
.order-lines .row { padding: 10px 0; border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .progress { display: none; }
}
@media print { body::before, .progress, .top, .announce, .foot { display: none; } }