/* ordinary.room — storefront styles, design A ("ตามแบบ Canva").
   Everything comes from the Canva "Website_ORDR" and the shop's palette (source/ord.room website):
   off-white ground #fcfbf6, green #397044, cream #f4f3e1, italic serif titles, the logo, the typewriter
   October card, polaroids, cream circles, oval labels, stamp frames and the green footer. */

:root {
  --ground: #fcfbf6;
  --paper: #f4f3e1;
  --paper-2: #e4e2c9;
  --cream: #f4f3e1;
  --circle: #f4f3e1;
  --ink: #1e1e1e;
  --muted: #53544f;
  --green: #397044;
  --green-dark: #2b5534;
  --leaf: #e9ecb4;
  --teal: #3dbd9f;
  --danger: #9a2f20;
  --shopee: #b2321b;

  --serif: 'EB Garamond', 'Google Sans', serif;
  --sans: 'Google Sans', sans-serif;
  --script: 'Allura', cursive;
  --thanks: 'Thank You', 'Allura', cursive;
  --hand: 'Caveat Brush', cursive;
  --type: 'Courier Prime', 'Google Sans', monospace;

  --t-s: 1rem;
  --t-m: 1.375rem;
  --t-l: clamp(2.5rem, 5vw, 4.5rem);
  --t-xl: clamp(3.4rem, 8.5vw, 8.5rem);

  --gutter: 5vw;
  --section: clamp(80px, 11vh, 140px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 84px;
}

/* The shop's own fonts (source/หน้า Home/Font ที่ใช้), subset to WOFF2 by scripts/build-home-assets.py.
   EB Garamond (SIL OFL) for the italic titles; Google Sans (Latin + Thai) for all running text. */
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/ebgaramond-italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/ebgaramond.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/google-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/google-sans-thai.woff2') format('woff2'); unicode-range: U+0E00-0E7F; }
/* "font Thank you หน้าโฮมส่วนสุดท้าย.ttf", subset to the letters of "Thank you" by build-catalog-assets.py. */
@font-face { font-family: 'Thank You'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/thankyou.woff2') format('woff2'); }
/* The OCTOBER card's script in Canva: Beautifully Delicious Script (BDScript-Regular, in the same Font folder),
   subset to lowercase and punctuation with no GSUB. Its contextual alternates blank o, r, s and f in browsers. */
@font-face { font-family: 'Card Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/bdscript-card.woff2') format('woff2'); }
/* The collection page (source/หน้า collection_somewhere slowly), subset by scripts/build-collection-assets.py:
   Newsreader 60pt ExtraLight Italic (SIL OFL) for the title, Swirly Kids (free for commercial use) for the
   hand-drawn place names. */
@font-face { font-family: 'Newsreader Title'; font-style: italic; font-weight: 200; font-display: swap; src: url('/assets/fonts/newsreader-title.woff2') format('woff2'); }
@font-face { font-family: 'Swirly'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/swirly.woff2') format('woff2'); }

/* Two languages: pages carry both, <html lang> (set by /js/lang.js before paint) picks one. */
html:not([lang='en']) [data-lang='en'], html[lang='en'] [data-lang='th'] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-s) / 1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
/* a word or phrase kept on one line (/js/linebreak.js wraps them) */
.nw { white-space: nowrap; }
/* except a name in a big English title or a product name on a phone, which may be wider than the screen:
   it wraps at its spaces (only names: "Set ·" and "17 cards" stay together) */
@media (max-width: 600px) { :is(.display, .title, .thin, .h-xl, .h-l, .shelf h3, .entry__bar h3):lang(en) .nw--name { white-space: normal; } }
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.muted { color: var(--muted); }
/* no single-word last lines, on every page */
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, .notice, .products__note, .center { text-wrap: balance; }
.small { font-size: 0.875rem; line-height: 1.55; }

/* ---------- type */
.display, .title { font: italic 400 var(--t-l) / 1.02 var(--serif); letter-spacing: -0.005em; }
.title--green, .display { color: var(--green); }
.title--ink { color: var(--ink); }
.thin { font: italic 300 var(--t-xl) / 0.95 var(--serif); letter-spacing: 0.01em; }
:is(h1, h2, h3, h4, .price, legend):lang(th) { line-height: 1.45; }
.h-xl { font-size: var(--t-xl); }
.h-l { font-size: var(--t-l); }
.h-m { font: 500 var(--t-m) / 1.35 var(--sans); }
.green-line { color: var(--green); }
.script { font-family: var(--script); }
.thanks { font: 400 clamp(4rem, 7vw, 6.5rem) / 1 var(--thanks); }
/* Thai text never goes italic: Thai has no italic form and the serif has no Thai glyphs. The taller line
   leaves room for vowels and tone marks above and below, so they neither float nor collide. */
:is(.display, .title, .thin):lang(th), :is(.display, .title, .thin) .th {
  font-family: var(--sans); font-style: normal; font-weight: 400; letter-spacing: -0.01em; line-height: 1.35;
}

/* ---------- links and buttons */
.shopnow { display: inline-block; font: italic 400 1.6rem / 1.2 var(--serif); color: var(--green); text-decoration: none; transition: transform 250ms var(--ease), color 200ms; }
.shopnow:hover { transform: translateX(4px); color: var(--green-dark); }
.shopnow:lang(th), .shopnow .th { font: 400 1.05rem var(--sans); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.6em; border: 1px solid var(--green); border-radius: 999px;
  background: var(--green); color: #fff; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms, transform 200ms var(--ease);
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--paper { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--paper:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--green); border-color: var(--green); }
.btn--shopee { background: transparent; color: var(--shopee); border-color: var(--shopee); }
.btn--shopee:hover { background: var(--shopee); color: #fff; border-color: var(--shopee); }
.btn--block { width: 100%; }
.btn .icon--go { transition: transform 220ms var(--ease); }
.btn:hover .icon--go { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 160ms, color 160ms; }
.link:hover { color: var(--green); text-decoration-color: currentColor; }

/* ---------- logo + header */
.logo { display: inline-flex; flex: none; }
.logo img { height: 60px; width: auto; }
.site-head {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  display: flex; align-items: center; gap: 32px; padding-inline: var(--gutter);
  background: var(--ground); transition: background-color 200ms, box-shadow 200ms;
}
.site-head.is-scrolled { box-shadow: 0 1px 0 var(--paper-2), 0 8px 24px rgb(0 0 0 / 0.04); }
.site-nav { display: flex; gap: 28px; margin-left: auto; font-size: 0.95rem; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 0.875rem; color: var(--muted); }
.lang-switch button { min-width: 36px; min-height: 40px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--muted); letter-spacing: 0.04em; transition: color 160ms; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed='true'] { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; }
.site-nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 200ms, color 200ms; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--green); border-color: var(--green); }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: 0.95rem; transition: background-color 200ms, color 200ms; }
.cart-btn:hover { background: var(--ink); color: #fff; }
.cart-btn .count { font-variant-numeric: tabular-nums; }
.cart-btn.bump { animation: bump 420ms var(--ease); }
@keyframes bump { 35% { transform: scale(1.08); } }
.menu-btn { display: none; }
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .site-head { gap: 8px; }
  .logo img { height: 48px; }
  .lang-switch { margin-left: auto; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; flex-direction: column; gap: 0; position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--paper); padding: 8px var(--gutter) 24px; box-shadow: 0 16px 30px rgb(0 0 0 / 0.08); max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav.is-open a { padding-block: 14px; font-size: 1.1rem; border: 0; }
  html.menu-open { overflow: hidden; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
  .cart-btn span:not(.count) { display: none; }
}

/* ---------- Canva objects */
.rule { height: 1px; border: 0; background: #c9c9c4; margin: 0 var(--gutter); }
.polaroid { background: #fafafa; padding: 14px 14px 48px; box-shadow: 0 12px 28px rgb(0 0 0 / 0.14); position: relative; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.mark { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font: 400 1.1rem var(--hand); color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / 0.35); pointer-events: none; }
.polaroid .mark { bottom: 58px; }
.october { container-type: inline-size; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 22px; text-align: center; box-shadow: 0 10px 26px rgb(0 0 0 / 0.1); }
.october small { font: 400 0.85rem / 1.25 var(--type); letter-spacing: 0.08em; }
.october p { font: 400 19cqi / 1.1 'Card Script', var(--script); font-variant-ligatures: none; font-feature-settings: 'calt' 0; white-space: nowrap; transform: rotate(4deg); }
.frame { display: block; background: #fff; padding: 7px; position: relative; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.circle {
  aspect-ratio: 1; border-radius: 50%; background: var(--circle); border: 1px solid var(--ink); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 20%; text-align: center;
  transition: transform 350ms var(--ease), background-color 250ms;
}
.circle:hover { transform: translateY(-6px); background: #fbf8e8; }
.circle b { font: 400 1.5rem var(--sans); }
.circle .shopnow { font-size: 1.2rem; color: var(--ink); }
.circle small { color: var(--muted); font-size: 0.9rem; }
.oval { display: inline-block; border: 1px solid var(--ink); background: #f3f0cc; border-radius: 50%; padding: 10px 30px; font-size: 1.05rem; }
.stamp { --hole: var(--ground); padding: 7px; background: radial-gradient(circle at 5px 5px, var(--hole) 3.5px, #d8e0e6 4px) -5px -5px / 10px 10px; flex: none; }
.stamp img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #fff; }

/* ---------- motion: parts of each section rise in, once */
.reveal-ready .rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal-ready .rv.in { opacity: 1; transform: none; }

/* ---------- home */
.intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6vw; padding: 5vh var(--gutter) 9vh; align-items: start; }
.intro h1 { max-width: 20ch; }
.intro p { margin-top: 18px; max-width: 54ch; text-align: justify; }
.intro .shopnow { margin-top: 24px; }
.intro__photo { position: relative; aspect-ratio: 780 / 1100; overflow: hidden; background: var(--paper-2);
  /* Whole photo in view on any screen: never taller than the window below the menu (with the section's padding). */
  width: min(100%, calc((100svh - var(--nav-h) - 14vh) * 780 / 1100)); justify-self: end; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; animation: drift 9s var(--ease) both; }
@keyframes drift { from { transform: scale(1.06); } }

.keepsake { position: relative; height: 640px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.keepsake__photo { width: min(520px, 62vw); aspect-ratio: 4 / 3.25; transform: rotate(-9deg) translateX(-14%); }
.keepsake__card { position: absolute; left: 54%; width: min(250px, 36vw); height: 350px; transform: rotate(9deg); }

.featured { padding: var(--section) 0; }
.featured > .title { padding-inline: var(--gutter); }
/* Prints keep their own shape: postcards stand portrait, the two landscape ones lie wide. */
.featured { --row-h: clamp(300px, 34vw, 460px); }
.featured__row { display: flex; gap: 18px; }
.featured__row .frame { flex: none; height: var(--row-h); aspect-ratio: 709 / 1000; scroll-snap-align: start; transition: transform 300ms var(--ease); }
.featured__row .frame--wide { aspect-ratio: 1000 / 709; }
.featured__row .frame:hover { transform: translateY(-6px); }
.featured__row .frame { cursor: zoom-in; }
.featured__cap { text-align: center; margin-top: 18px; font-size: 1.4rem; }
.featured__cap em { font: italic 300 1.75rem var(--serif); }
.center { text-align: center; }

.products { padding: 2vh var(--gutter) var(--section); }
.products > .title { text-align: right; }
.products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; margin-top: 48px; }
.products__note { text-align: center; margin: 40px auto 0; max-width: 64ch; color: var(--muted); }
/* each idea of the note on a line of its own while it fits; on a phone each wraps within itself */
.products__line { display: inline-block; }

.howto { padding: var(--section) var(--gutter); display: grid; grid-template-columns: 1fr 2.4fr; gap: 5vw; align-items: start; }
.howto ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.howto li b { display: block; font: italic 400 1.9rem / 1.1 var(--serif); color: var(--green); }
.howto li p { margin-top: 10px; }
.howto li .icon { width: 28px; height: 28px; color: var(--green); margin-bottom: 14px; }

.story { padding: var(--section) var(--gutter); }
.story__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin: 120px auto 0; align-items: center; max-width: 1100px; }
.story__photo { position: relative; aspect-ratio: 4 / 5; width: min(100%, 480px); justify-self: center; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* Larger and further onto the photo; a soft paper-coloured halo keeps the ink readable over it. */
.story__photo .thanks { position: absolute; z-index: 1; left: -22%; top: -6%; font-size: clamp(5.5rem, 10vw, 9.5rem); transform: rotate(-12deg); text-shadow: 0 0 14px rgb(252 251 246 / 0.95), 0 0 30px rgb(252 251 246 / 0.7); pointer-events: none; }
.story__text p { text-align: justify; }
.story__text p + p { margin-top: 16px; }
.story__links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }

@media (max-width: 900px) {
  .intro, .story__body, .howto { grid-template-columns: minmax(0, 1fr); }
  .intro__photo { justify-self: center; }
  /* The photo keeps its own shape on phones: a 4:5 crop cut off the ord.r mark at its foot. */
  .story__body { margin-top: 48px; }
  .keepsake { height: 470px; }
  .keepsake__card { height: 260px; left: 50%; }
  .keepsake__photo { transform: rotate(-9deg) translateX(-18%); }
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .circle b { font-size: 1.15rem; }
  .circle .shopnow { font-size: 1rem; }
  .howto ol { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .story__photo .thanks { left: -4%; top: -5%; font-size: clamp(4.5rem, 19vw, 7rem); }
}

/* ---------- footer (Canva green) */
.site-foot { background: var(--green); color: #fff; padding: clamp(56px, 7vw, 88px) var(--gutter) 28px; }
/* Brand on the left (logo and tagline), three link columns on the right, all on one 12-column measure. */
.foot__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 6vw, 96px); max-width: 1240px; margin: 0 auto; }
.foot__home { display: inline-block; }
.foot__logo { display: block; width: clamp(150px, 14vw, 200px); height: auto; }
.foot__brand p { margin-top: 22px; max-width: 26ch; font-size: 1.125rem; line-height: 1.5; color: var(--leaf); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.35fr); gap: 32px; }
.foot__cols h3 { margin-bottom: 14px; font: 600 0.8125rem var(--sans); letter-spacing: 0.14em; color: var(--leaf); }
.foot__cols ul { display: grid; gap: 2px; }
.foot__cols a, .foot__cols li { display: flex; gap: 10px; align-items: center; padding: 3px 0; color: #fff; text-decoration: none; overflow-wrap: break-word; transition: color 200ms; }
.foot__cols .icon { flex: none; width: 18px; height: 18px; opacity: 0.9; }
.foot__cols a:hover { color: var(--leaf); text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 1240px; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.22); font-size: 0.875rem; color: #e3ece3; }
.foot__legal p:last-child { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) {
  .foot__main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot__logo { width: 150px; }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .foot__cols > div:last-child { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; }
}

/* ---------- inner pages */
.page-head { padding: clamp(36px, 7vh, 80px) var(--gutter) clamp(28px, 4vh, 48px); max-width: 1440px; margin-inline: auto; }
.page-head p { margin-top: 18px; max-width: 60ch; }
.panel { background: var(--paper); padding: clamp(20px, 3vw, 40px); }
.panel + .panel { margin-top: 14px; }
.panel h2 { font: 400 1.35rem / 1.35 var(--sans); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.prose { max-width: 70ch; }
.prose p + p, .prose p + ul, .prose ul + p, .prose ol + p, .prose h3 + p, .prose h3 + ul { margin-top: 0.9em; }
.prose h3 { font: 500 1.05rem var(--sans); margin-top: 1.8em; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.page-main { padding-top: 8px; }

/* collection page: Canva page "3) Somewhere slowly". A black-and-white contact sheet on light grey,
   then every postcard in colour on the shop's green, one at a time, then the busker and the sign-off. */
.ss { --ss-ground: #edece8; --teal: #3ec0a5; }
.ss-word { font: 400 clamp(2.2rem, 4.4vw, 3.6rem) / 1 'Swirly', var(--hand); color: var(--ink); }
.ss-word--teal { color: var(--teal); }
.ss-title { font: italic 200 clamp(3rem, 8.4vw, 8.6rem) / 1.05 'Newsreader Title', var(--serif); letter-spacing: 0.01em; text-align: center; text-wrap: balance; }
.ss-open { padding: clamp(28px, 5vh, 48px) var(--gutter) var(--section); background: var(--ss-ground); }
.ss-open > * { max-width: 1180px; margin-inline: auto; }
.ss-copy { text-align: center; font: 500 1.25rem var(--sans); }
.ss img { display: block; width: 100%; height: auto; }

.ss-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.35fr) minmax(0, 1.45fr); column-gap: clamp(8px, 1.4vw, 18px); margin-top: clamp(32px, 6vh, 64px); }
.ss-collage .c1 { grid-column: 1; grid-row: 1; }
.ss-collage .c2 { grid-column: 2; grid-row: 1; }
.ss-collage .c3 { grid-column: 3; grid-row: 1; }
.ss-collage .c4 { grid-column: 5; grid-row: 2; }
.ss-word--europe { grid-column: 3 / 6; grid-row: 1; z-index: 1; align-self: center; justify-self: center; translate: 12% -18%; font-size: clamp(3.6rem, 9vw, 8rem); color: var(--teal); }
.ss-open .ss-title { margin-top: clamp(40px, 9vh, 110px); }

.ss-row { display: grid; gap: clamp(18px, 5vw, 72px); margin-top: clamp(56px, 11vh, 130px); }
.ss-row--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
.ss-row--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr) minmax(0, 1fr); align-items: end; }
.ss-row--split > :last-child { grid-column: 3; }
.ss-set { display: grid; gap: clamp(8px, 1.3vw, 16px); align-content: start; }
.ss-set--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-set--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-set .ss-word { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
.ss-tagline { font: 400 clamp(1.15rem, 1.7vw, 1.45rem) / 1.45 var(--sans); color: #1f7363; }
.ss-lead .ss-word { margin-top: 14px; }
.ss-story { margin-top: clamp(40px, 7vh, 72px); max-width: 1180px; }
.ss-story p { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6; max-width: 68ch; }
.ss-story p + p { margin-top: 1.1em; }
.ss-solo { position: relative; width: min(64%, 300px); }
.ss-solo > .ss-word:first-child { position: absolute; z-index: 1; top: 0.7em; left: -0.12em; }
.ss-word--year { position: absolute; left: 32%; bottom: -0.42em; font-size: clamp(3rem, 6.4vw, 5.4rem); }
.ss-wide { display: grid; justify-items: end; }
.ss-date { margin-top: 14px; font: 400 1.15rem var(--sans); }
.ss-wide .ss-word { margin-top: 4px; }

/* the colour run: postcards on green, two staggered columns (one on a phone), landscapes full width */
.ss-run { padding: var(--section) var(--gutter); background: var(--green); color: #fff; overflow: hidden; }
.ss-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8vw; row-gap: clamp(56px, 9vh, 110px); max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.ss-cards > li { display: grid; justify-items: center; }
.ss-cards > li.is-late { padding-top: clamp(80px, 18vh, 200px); }
.ss-card { width: min(100%, 360px); }
.ss-card__photo { display: block; position: relative; border: 5px solid #fff; background: #fff; }
.ss-card__photo img { aspect-ratio: 638 / 900; object-fit: cover; }
.ss-card figcaption { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 14px; font: 500 0.95rem / 1.35 var(--sans); }
.ss-card__no { margin-left: auto; font: italic 400 1.05rem var(--sans); }
.ss-cards > .ss-card--wide { grid-column: 1 / -1; width: 100vw; justify-self: center; }
.ss-card--wide .ss-card { position: relative; width: 100%; }
.ss-card--wide .ss-card__photo { border: 0; }
.ss-card--wide .ss-card__photo img { aspect-ratio: 16 / 8; }
.ss-card--wide .ss-word--card { position: absolute; left: var(--gutter); bottom: clamp(70px, 9vw, 120px); font-size: clamp(3.4rem, 9vw, 8rem); color: var(--teal); text-shadow: 0 2px 18px rgb(0 0 0 / 0.25); }
.ss-card--wide figcaption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 3vw, 40px); margin: 0; text-shadow: 0 1px 8px rgb(0 0 0 / 0.55); }

.ss-end { max-width: 1180px; margin: clamp(96px, 16vh, 180px) auto 0; }
.ss-title--light { color: #fff; }
.ss-end__art { display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 8px; }
.ss-end__art .ss-word { font-size: clamp(3.4rem, 8vw, 7rem); margin: 0.2em -0.6em 0 0; position: relative; z-index: 1; }
.ss-end__art img { width: min(320px, 46vw); }
.ss-story--light { margin-top: 24px; }
.ss-end__kind { margin-top: clamp(16px, 3vh, 28px); font-size: clamp(2.4rem, 4.6vw, 4rem); }
.ss-end__sign { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.55); text-align: center; font: 500 1.05rem var(--sans); }

.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; padding-inline: var(--gutter); }
.shelf a { display: block; text-decoration: none; }
.shelf .frame { aspect-ratio: 1; transition: transform 300ms var(--ease); }
/* Bookmarks are tall and narrow: shown whole on the white mat rather than cropped to a square. */
:is(.shelf, [data-shelf]) .frame--bookmark img { object-fit: contain; }
.shelf a:hover .frame { transform: translateY(-6px); }
.shelf h3 { margin-top: 14px; font: 500 1.05rem var(--sans); }
.shelf p { color: var(--muted); font-size: 0.95rem; }
.shelf .price { display: block; margin-top: 6px; }
.shelf-title { margin-bottom: 36px; }
@media (max-width: 900px) {
  .ss-row--lead, .ss-row--split { grid-template-columns: minmax(0, 1fr); }
  .ss-row--split > :last-child { grid-column: auto; }
  .ss-solo { width: min(58%, 260px); }
  .ss-row--helsinki { row-gap: 56px; }
  .ss-cards { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .ss-cards > li.is-late { padding-top: 0; }
  .ss-card { width: min(100%, 340px); }
  .ss-card--wide .ss-card__photo img { aspect-ratio: 4 / 3.2; }
  /* On a phone the caption would sit on the ord.r mark, so it moves under the photo. */
  .ss-card--wide figcaption { position: static; margin-top: 14px; padding-inline: var(--gutter); text-shadow: none; }
  .ss-card--wide .ss-word--card { bottom: 18px; }
}
@media (max-width: 600px) {
  /* Three portraits across the full width, the landscape and "europe" on the line below. */
  .ss-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .ss-collage .c4 { grid-column: 2 / 4; grid-row: 2; }
  .ss-word--europe { grid-column: 1 / 3; grid-row: 2; justify-self: start; translate: 0 0; font-size: clamp(3rem, 15vw, 4rem); }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}

/* Our Products (Canva page 2): oval category labels, cream product bars with a green badge,
   a strip of every design, and (show more) folding out the details */
.kind-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.kind-nav a { text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; transition: border-color 160ms, color 160ms; }
.kind-nav a:hover, .kind-nav a[aria-current='true'] { color: var(--green); border-color: var(--green); }
.kind { padding: 28px var(--gutter) 56px; max-width: 1440px; margin-inline: auto; scroll-margin-top: var(--nav-h); }
.kind .oval { font: 400 1.25rem var(--sans); background: var(--cream); margin-bottom: 28px; }
.entry + .entry { margin-top: 40px; }
.entry__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--cream); padding: 14px 20px; }
.entry__bar h3 { font: 400 clamp(1.15rem, 2vw, 1.5rem) / 1.3 var(--sans); }
.entry__bar h3 a { text-decoration: none; }
.entry__bar h3 a:hover { color: var(--green); }
.entry__bar .badge { flex: none; padding: 6px 16px; font-size: 0.875rem; }
.rail { position: relative; margin: 18px 0 6px; }
.rail__track { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 16px; margin: 0; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
/* the edges fade only on the side with more to see */
.rail.fade-start .rail__track { mask-image: linear-gradient(to right, transparent, #000 56px); }
.rail.fade-end .rail__track { mask-image: linear-gradient(to left, transparent, #000 56px); }
.rail.fade-start.fade-end .rail__track { mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.rail__track li { flex: none; scroll-snap-align: start; }
.rail__item { position: relative; display: grid; gap: 8px; justify-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rail__item img { height: clamp(150px, 17vw, 210px); width: auto; min-width: 40px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.rail__item:hover img { transform: translateY(-4px); box-shadow: 0 12px 24px rgb(0 0 0 / 0.16); }
.rail__no { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail__zoom { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(252 251 246 / 0.92); color: var(--ink); opacity: 0; transform: scale(0.9); transition: opacity 200ms, transform 200ms var(--ease); }
.rail__zoom .icon { width: 16px; height: 16px; }
.rail__item:hover .rail__zoom, .rail__item:focus-visible .rail__zoom { opacity: 1; transform: none; }
.rail__btn { position: absolute; top: calc(6px + clamp(150px, 17vw, 210px) / 2); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--paper-2); border-radius: 50%; background: var(--ground); color: var(--ink); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms; }
.rail__btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.rail__btn--prev { left: -6px; }
.rail__btn--next { right: -6px; }
.rail__btn[hidden] { display: none; }
@media (hover: none) { .rail__btn { display: none; } }
.entry__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: italic 400 1.2rem var(--serif); color: var(--green); padding: 4px 0; }
.entry__more summary:lang(th) { font: 500 0.9375rem / 1.45 var(--sans); }
.entry__more summary:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.entry__more .more-icon { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.entry__more[open] .more-icon { transform: rotate(180deg); }
.entry__more summary::-webkit-details-marker { display: none; }
.entry__more .more-close, .entry__more[open] .more-open { display: none; }
.entry__more[open] .more-close { display: inline; }
.entry__detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding: 18px 0 8px; }
.entry__detail .price { margin-bottom: 12px; }
.entry__detail .notice { margin-top: 16px; }
.entry__detail .btn { margin-top: 18px; }
.entry__specs { display: grid; gap: 8px; margin-bottom: 14px; }
.entry__specs div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--paper-2); }
.entry__specs dt { color: var(--muted); }
@media (max-width: 760px) {
  .entry__detail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .entry__bar { flex-wrap: wrap; padding: 12px 16px; }
}

/* product page */
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5vw; padding: 0 var(--gutter); align-items: start; }
.product__media { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; place-items: center; min-height: 320px; }
.product__media .flip { width: auto; max-width: 100%; }
.product__media .flip img { width: auto; max-height: min(74vh, 760px); }
.product__viewer { display: grid; place-items: center; max-width: 100%; }
.media-zoom { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgb(252 251 246 / 0.94); color: var(--ink); font-size: 0.8125rem; box-shadow: 0 2px 10px rgb(0 0 0 / 0.1); cursor: zoom-in; transition: transform 220ms var(--ease), background-color 160ms; }
.media-zoom .icon { width: 16px; height: 16px; }
.media-zoom:hover { transform: translateY(-2px); background: #fff; }
/* previous / next design, either side of the large picture */
.media-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: rgb(252 251 246 / 0.94); color: var(--ink); box-shadow: 0 2px 12px rgb(0 0 0 / 0.12); cursor: pointer; transition: transform 220ms var(--ease), background-color 160ms, box-shadow 160ms; }
.media-nav .icon { width: 22px; height: 22px; }
.media-nav--prev { left: 0; }
.media-nav--next { right: 0; }
.media-nav:hover { background: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / 0.16); }
.media-nav--prev:hover { transform: translateX(-2px); }
.media-nav--next:hover { transform: translateX(2px); }
.media-nav:active { transform: scale(0.94); }
.media-nav:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.product__media:has(.media-count) { padding-bottom: 40px; }
/* inside the 40px kept for it below the picture: hanging lower, it sat on the category line on phones */
.media-count { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* full-screen viewer (zoom.js) */
/* the page behind keeps its width when the scrollbar goes (--zoom-gutter is the scrollbar's width, set by zoom.js) */
html.zoom-open { overflow: hidden; padding-right: var(--zoom-gutter, 0px); }
html.zoom-open .to-top { margin-right: var(--zoom-gutter, 0px); }
.zoom { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #f4f3e1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.zoom > * { min-width: 0; }
.zoom:not([open]) { display: none; }
/* The page stays in view behind the picture, dimmed and blurred, so the viewer floats above it. */
.zoom::backdrop { background: rgb(18 19 16 / 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: zoom-in-fade 320ms ease-out; }
.zoom.is-closing::backdrop { animation: zoom-out-fade 260ms ease-in forwards; }
@keyframes zoom-in-fade { from { opacity: 0; } }
@keyframes zoom-out-fade { to { opacity: 0; } }
.zoom__img { box-shadow: 0 30px 80px rgb(0 0 0 / 0.45), 0 8px 24px rgb(0 0 0 / 0.25); border-radius: 2px; }
.zoom__stage { cursor: zoom-out; }
@media (prefers-reduced-motion: reduce) { .zoom::backdrop, .zoom.is-closing::backdrop { animation: none; } }
.zoom__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 24px; }
.zoom__count { flex: 1; min-width: 0; margin: 0; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zoom__sides { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.zoom__sides[hidden] { display: none; }
.zoom__sides button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 0.875rem; cursor: pointer; }
.zoom__sides button[aria-pressed='true'] { background: #f4f3e1; color: #151613; }
.zoom__close, .zoom__nav { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: inherit; cursor: pointer; transition: background-color 160ms; }
.zoom__close:hover, .zoom__nav:hover { background: rgb(255 255 255 / 0.22); }
.zoom__close:focus-visible, .zoom__nav:focus-visible, .zoom__sides button:focus-visible, .zoom__thumbs button:focus-visible { outline: 2px solid #f4f3e1; outline-offset: 2px; }
.zoom__stage { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; touch-action: none; user-select: none; }
/* absolute + auto margins: the picture fits the stage whatever its shape (a % max-height inside a grid row would not resolve) */
.zoom__img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 32px); max-height: calc(100% - 8px); object-fit: contain; cursor: zoom-in; transform-origin: center; will-change: transform; }
.zoom__img.is-animated { transition: transform 280ms var(--ease); }
.zoom.is-zoomed .zoom__img { cursor: grab; }
.zoom.is-zoomed .zoom__nav { opacity: 0; pointer-events: none; }
.zoom__nav { position: absolute; top: 50%; margin-top: -22px; }
.zoom__nav--prev { left: 16px; }
.zoom__nav--next { right: 16px; }
.zoom__nav[hidden] { display: none; }
.zoom__hint { margin: 0; padding: 8px 16px 0; text-align: center; font-size: 0.8125rem; color: rgb(244 243 225 / 0.7); }
.zoom__thumbs { display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; margin: 0; padding: 12px 16px 16px; list-style: none; scrollbar-width: none; }
.zoom__thumbs:empty { display: none; }
.zoom__thumbs button { display: block; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; opacity: 0.55; cursor: pointer; transition: opacity 160ms, border-color 160ms; }
.zoom__thumbs button:hover { opacity: 0.9; }
.zoom__thumbs button[aria-current='true'] { opacity: 1; border-color: #f4f3e1; }
.zoom__thumbs li { flex: none; }
.zoom__thumbs img { display: block; height: 56px; width: auto; max-width: none; border-radius: 4px; }
@media (max-width: 700px) {
  .zoom__nav { display: none; }
  .zoom__bar { padding-left: 16px; }
  .zoom__thumbs img { height: 44px; }
}
/* A narrow phone has no room for the label beside the side switch and "buy this design": the label keeps
   the first line with ×, and the two move to a second line, instead of the label shrinking to nothing and
   the bar running past the screen. */
@media (max-width: 480px) {
  .zoom__bar:has(.zoom__sides:not([hidden]), .zoom__buy:not([hidden])) { flex-wrap: wrap; gap: 6px 8px; }
  .zoom__bar:has(.zoom__sides:not([hidden]), .zoom__buy:not([hidden])) .zoom__count { flex: 1 1 calc(100% - 52px); }
  .zoom__bar:has(.zoom__sides:not([hidden]), .zoom__buy:not([hidden])) :is(.zoom__sides, .zoom__buy) { order: 2; }
  .zoom__bar:has(.zoom__sides:not([hidden]), .zoom__buy:not([hidden])) .zoom__buy { margin-left: auto; padding-inline: 14px; }
}
@media (max-height: 500px) {
  .zoom__bar { padding-block: 4px; }
  .zoom__hint { display: none; }
  .zoom__thumbs { padding-block: 4px 6px; }
  .zoom__thumbs img { height: 36px; }
}
/* The page's copy of the picture while the viewer shows it (zoom.js). No transition: under reduced motion
   every property otherwise takes 1ms, and visibility then lags a frame (both copies shown, or neither). */
.zoom-lifted { visibility: hidden; transition: none !important; }
/* The same 1ms would also hold the picture's box, its visibility and the page's padding a frame behind. */
@media (prefers-reduced-motion: reduce) { html, .zoom__img { transition: none !important; } }
.product__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--green); color: #fff; font-size: 0.8125rem; letter-spacing: 0.02em; }
.product__info h1 { margin-top: 10px; }
.product__price, .price { font: 400 1.4rem var(--sans); font-variant-numeric: tabular-nums; }
.product__price { margin-top: 18px; display: block; }
.product__desc { margin-top: 18px; max-width: 56ch; }
.product__desc p + p { margin-top: 0.8em; }

/* designs: every print of the product, picked one by one or as a whole set */
.designs { margin-top: 32px; }
.designs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.designs legend { padding: 0; }
.designs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 16px; list-style: none; padding: 0; }
/* a design card: picture and number on top, one fixed-height control row below, so choosing never moves anything */
.design { position: relative; display: grid; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--paper-2); border-radius: 14px; background: var(--ground); transition: border-color 160ms, box-shadow 160ms, background-color 160ms; }
.design:hover { border-color: #cfccb0; }
.design.is-on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--paper); }
.design__pick { display: grid; gap: 6px; justify-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 8px; }
.design__img { display: block; width: 100%; aspect-ratio: 1; }
.design__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.14)); transition: transform 220ms var(--ease); }
.design__pick:hover .design__img img { transform: scale(1.03); }
.design__no { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.design.is-on .design__no { color: var(--green); font-weight: 600; }
.design.is-viewing:not(.is-on) { border-color: #b9b593; }
.design.is-viewing .design__no { color: var(--ink); }
.design.is-viewing .design__img::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; color: var(--ink); }
.design.is-on .design__pick::after { content: ''; position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ground); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.design.is-out .design__pick { cursor: zoom-in; }
.design.is-out .design__img img { filter: grayscale(1); opacity: 0.45; }
.design.is-out .design__no { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.design__img { position: relative; }
/* Sold out: the picture turns grey and a small tag sits on it, the same on every page. */
:is(.rail__item, .frame, .lines li).is-out img, .is-out > a img { filter: grayscale(1); opacity: 0.5; }
.out-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: 999px; background: rgb(28 28 26 / 0.82); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; }
.rail__item .out-tag { top: calc(clamp(150px, 17vw, 210px) / 2); }
.rail__item.is-out:hover img { transform: none; }
/* No "Save image" sheet on a long press over product pictures (iPhone); see guardPictures() in common.js. */
:is(.rail__item, .design, .product__media, .zoom, .frame, .lines, .featured__row, [data-shelf], .ss, .intro__photo, .keepsake__photo, .story__photo) img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.badge--out { background: var(--paper-2); color: var(--ink); border-color: transparent; }
.design__ctl { height: 34px; display: grid; }
.design__ctl [hidden] { display: none !important; }
.design__choose { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 34px; padding: 0; border: 1px solid var(--paper-2); border-radius: 999px; background: none; color: var(--green); font-size: 0.875rem; cursor: pointer; transition: border-color 160ms, background-color 160ms; }
.design__choose .icon { width: 14px; height: 14px; }
.design__choose:hover { border-color: var(--green); background: var(--paper); }
.design__out { align-self: center; text-align: center; font-size: 0.8125rem; color: var(--danger); }
.design .qty--s { display: grid; grid-template-columns: 32px 1fr 32px; width: 100%; height: 34px; border-color: var(--green); background: var(--ground); }
.design .qty--s button { width: auto; min-width: 0; min-height: 0; color: var(--green); }
.design .qty--s button .icon { width: 14px; height: 14px; }
.design .qty--s input { width: 100%; min-width: 0; padding: 0; font-size: 1rem; font-weight: 600; color: var(--green); }
.designs__sum { margin-top: 18px; font-variant-numeric: tabular-nums; }
.designs .buy { margin-top: 12px; }
.set-note { margin-top: 14px; }
.product__note { margin-top: 18px; }
.specs { width: 100%; border-collapse: collapse; margin-top: 28px; }
.specs th, .specs td { text-align: left; padding: 11px 0; border-bottom: 1px solid #d3d3ce; vertical-align: top; }
.specs th { width: 34%; font-weight: 400; color: var(--muted); }
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.qty button { width: 44px; min-height: 46px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: background-color 160ms; }
@media (hover: hover) { .qty button:not(:disabled):hover { background: var(--paper-2); } }
.qty button:disabled { color: #b5b5ae; cursor: not-allowed; }
.qty input { width: 46px; text-align: center; border: 0; background: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* One action per row, full width, so each label stays on one line and the three read as a set. */
.buy { display: grid; gap: 12px; margin-top: 28px; }
.buy .btn { width: 100%; padding: 10px 1.4em; text-align: center; }
.btn--shopee .brand { display: inline-flex; }
.stock { margin-top: 12px; color: var(--muted); }
.stock.low { color: var(--danger); }
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .product__media { position: relative; top: auto; } /* still the anchor for the zoom button */
  .media-nav { width: 44px; height: 44px; margin-top: -22px; }
  .media-nav--prev { left: 8px; }
  .media-nav--next { right: 8px; }
}

/* the flippable card (product page): the design on the front, its printed back behind it */
.flip { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; perspective: 1800px; }
button.flip { cursor: pointer; }
.flip img { display: block; max-width: 100%; height: auto; }
.flip__inner { display: grid; transform-style: preserve-3d; transition: transform 900ms var(--ease); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { grid-area: 1 / 1; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__face img, .flip--plain img { box-shadow: 0 14px 30px rgb(0 0 0 / 0.13); background: #fff; }
.flip__front { transform: rotateY(0deg); }
.flip__back { transform: rotateY(180deg); }
/* Not left to backface-visibility alone, which some WebKit builds ignore (the back then shows mirrored
   through the front): the hidden face is switched off at the half-way point of the turn. */
.flip__face { transition: visibility 0s linear 450ms; }
.flip:not(.is-flipped) .flip__back, .flip.is-flipped .flip__front { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .flip__face { transition-delay: 0s !important; } }
.flip__hint { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--ground); padding: 7px 12px; border-radius: 999px; font-size: 0.8125rem; box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); transition: transform 220ms var(--ease); }
.flip:hover .flip__hint { transform: translateY(-2px); }
.postmark { width: 92px; height: 92px; color: var(--green); }

/* ---------- cart / checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 0 var(--gutter) var(--section); align-items: start; }
.checkout aside { position: sticky; top: calc(var(--nav-h) + 14px); }
.lines li { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center; padding-block: 14px; }
.lines li + li { border-top: 1px solid #dcdcd6; }
.lines img { width: 88px; height: 88px; object-fit: contain; }
.lines h3 { font: 500 1rem var(--sans); }
.lines .remove { background: none; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 8px 0; font-size: 0.875rem; }
.lines .remove:hover { color: var(--danger); }
.lines .qty button { width: 38px; min-height: 38px; }
.lines .qty input { width: 38px; }
.lines.is-empty li { display: block; }
.line-end { display: grid; justify-items: end; gap: 8px; }
.line-total { font-size: 1.05rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 0.95rem; }
.field .hint { color: var(--muted); font-size: 0.8125rem; }
.field label .opt { color: var(--muted); font-size: 0.875em; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #c6c6c0; border-radius: 10px; background: #fff; transition: border-color 160ms, box-shadow 160ms; }
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233d3d38' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; cursor: pointer; text-overflow: ellipsis; }
.field select:disabled { background-color: var(--paper-2); color: var(--muted); cursor: default; }
/* Subdistrict, district and province side by side; they fill in from the postcode. */
.field-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.field input:hover, .field textarea:hover { border-color: #9a9a94; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(57 112 68 / 0.18); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field input::placeholder, .field textarea::placeholder { color: #75766f; }
.choice { display: grid; gap: 10px; }
.choice label { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; cursor: pointer; padding: 16px 18px; border: 1px solid #d0d0ca; border-radius: 14px; background: #fff; transition: border-color 160ms, background-color 160ms; }
.choice label:hover { border-color: var(--ink); }
.choice input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; }
.choice label:has(input:checked) { border-color: var(--green); background: #f1f5ef; }
.choice small { display: block; color: var(--muted); font-size: 0.8125rem; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 0.95rem; }
.consent input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--green); flex: none; }
.row { display: flex; align-items: baseline; gap: 10px; padding-block: 6px; }
.row span:first-child { flex: 0 1 auto; }
.row .dots { flex: 1; min-width: 16px; border-bottom: 1px dotted #9a9a94; transform: translateY(-4px); }
.row span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.summary .grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid #cfcfc9; }
.summary .grand b { font: 400 1.6rem var(--sans); font-variant-numeric: tabular-nums; }
.summary .submit { margin-top: 20px; }
.summary .notice { margin-top: 10px; }
.notice { padding: 12px 14px; background: var(--ground); border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; }
.notice .icon { color: var(--green); margin-top: 3px; }
.error-msg { color: var(--danger); margin-top: 12px; min-height: 1.6em; }
.empty { text-align: center; padding: 56px 24px; }
.empty p { margin-top: 10px; color: var(--muted); }
.empty .btn { margin-top: 24px; }
.ship-note { margin-top: 14px; }
.line-design { color: var(--muted); font-variant-numeric: tabular-nums; }
.set-done { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; color: var(--green); }
.set-done .icon { margin-top: 3px; }
.item-row { align-items: center; }
.item-row img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.free-gap { margin-top: 8px; }
@media (max-width: 960px) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout aside { position: static; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lines li { grid-template-columns: 64px minmax(0, 1fr); }
  .lines img { width: 64px; height: 64px; }
  .line-end { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .line-end .price { justify-self: end; }
}

/* ---------- order page */
.order-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; padding: 0 var(--gutter) var(--section); align-items: start; }
.order-id { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.order-id b { font: 400 1.4rem var(--sans); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 0.875rem; min-height: 38px; transition: background-color 160ms, color 160ms; }
.copy-btn:hover { background: var(--ink); color: #fff; }
.status-now { margin-top: 22px; font: italic 400 clamp(2rem, 3.6vw, 3rem) / 1.1 var(--serif); color: var(--green); }
.status-now:lang(th) { font: 400 clamp(1.7rem, 3vw, 2.4rem) / 1.25 var(--sans); }
.postmarks { margin-top: 24px; display: grid; gap: 2px; }
.pm { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding-block: 8px; }
.pm svg { width: 56px; height: 56px; color: var(--green); }
.pm b { display: block; font-weight: 500; }
.pm small { display: block; color: var(--muted); font-size: 0.875rem; }
.pay { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.pay img.qr { width: 200px; height: 200px; background: #fff; padding: 8px; image-rendering: pixelated; }
/* the shop's QR card (public/js/qrcard.js) replaces the plain QR once drawn */
.pay img.qr--card { width: 240px; height: auto; padding: 0; background: none; image-rendering: auto; border-radius: 10px; box-shadow: 0 6px 24px rgb(30 30 30 / 0.12); -webkit-touch-callout: default; }
.pay .save-qr { margin-top: 12px; width: 100%; }
.pay figcaption { margin-top: 8px; max-width: 240px; }
.pay dl { display: grid; gap: 12px; }
.pay dt { font-size: 0.875rem; color: var(--muted); }
.pay dd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.amount { font: 400 clamp(2.2rem, 4vw, 3rem) / 1 var(--sans); font-variant-numeric: tabular-nums; margin: 6px 0 24px; }
.upload { margin-top: 24px; display: grid; gap: 12px; }
.upload input[type='file'] { padding: 12px; background: #fff; border-radius: 10px; border: 1px dashed #9a9a94; }
.slip-preview { max-width: 220px; max-height: 280px; object-fit: contain; background: var(--paper-2); }
.track-events { display: grid; margin-top: 12px; }
.track-events li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding-bottom: 18px; position: relative; }
.track-events li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--green); margin-top: 7px; }
.track-events li::after { content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 2px; background: #d6d6d0; }
.track-events li:last-child::after { display: none; }
.track-events small { display: block; color: var(--muted); font-size: 0.875rem; }
.cancel-note, .track-wait { margin-top: 16px; }
.ship-to { margin-top: 16px; }
@media (max-width: 960px) {
  .order-grid { grid-template-columns: minmax(0, 1fr); }
  .pay { grid-template-columns: minmax(0, 1fr); }
  .pay figure { width: min(100%, 300px); margin-inline: auto; }
  .pay img.qr--card { width: 100%; }
  .pay figcaption { max-width: none; }
}

/* ---------- track page */
.track-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding: 0 var(--gutter) var(--section); align-items: start; }
.track-form { display: grid; gap: 20px; align-content: start; }
.track-form .btn { justify-self: start; }
.track-form .swap-mode { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.order-picks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.order-picks a { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 12px 14px; border: 1px solid var(--paper-2); border-radius: 12px; background: var(--paper); transition: border-color 160ms; }
.order-picks a:hover { border-color: var(--green); }
.order-picks span { justify-self: end; color: var(--green); }
.order-picks small { grid-column: 1 / -1; color: var(--muted); }
/* Pinned to the top of its column: results growing under the form must not drag the photo down the page. */
.track-photo { position: sticky; top: calc(var(--nav-h) + 24px); height: 440px; }
.track-photo .polaroid { position: absolute; width: 74%; aspect-ratio: 4 / 3.3; left: 0; top: 4%; transform: rotate(-6deg); }
.track-photo .october { position: absolute; width: 42%; height: 300px; right: 2%; top: 14%; transform: rotate(7deg); }
@media (max-width: 900px) {
  .track-layout { grid-template-columns: minmax(0, 1fr); }
  .track-photo { position: relative; top: auto; height: 340px; }
  .track-photo .october { height: 230px; }
}

/* ---------- help + policies */
.help { display: grid; grid-template-columns: 260px 1fr; gap: 14px; padding: 0 var(--gutter) var(--section); align-items: start; }
.help nav { position: sticky; top: calc(var(--nav-h) + 14px); background: var(--paper); padding: 22px 24px; display: grid; gap: 2px; }
.help nav a { text-decoration: none; padding: 7px 0; color: var(--muted); transition: color 160ms; }
.help nav a:hover { color: var(--green); }
.help section { scroll-margin-top: calc(var(--nav-h) + 16px); }
.help table { border-collapse: collapse; width: 100%; max-width: 560px; margin-top: 12px; }
.help th, .help td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid #d3d3ce; font-variant-numeric: tabular-nums; }
.help th { font-weight: 500; }
.help .rates th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85em; }
.help .rates td + td, .help .rates th + th { text-align: right; }
.rates-more { max-width: 560px; margin-top: 14px; }
.rates-more summary { cursor: pointer; color: var(--green); }
/* on a phone the three columns fit without parting "3–5 business days" or a price from its ฿ */
@media (max-width: 480px) {
  .help .rates { font-size: 0.875rem; }
  .help .rates th, .help .rates td { padding-right: 8px; }
  .help .rates th small { font-size: 0.8em; }
}
@media (max-width: 900px) {
  .help { grid-template-columns: minmax(0, 1fr); }
  .help nav { position: static; }
}

/* ---------- toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 160%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; display: flex; gap: 12px; align-items: center; box-shadow: 0 12px 32px rgb(0 0 0 / 0.2); transition: transform 360ms var(--ease); width: max-content; max-width: calc(100vw - 32px); }
.toast.is-on { transform: translate(-50%, 0); }
.toast a { color: var(--leaf); }

/* ---------- moving between pages (common.js smoothLeave): the content fades in on arrival and out,
   briefly, on leaving; the header stays still. Opacity only, so nothing inside gains a containing block. */
body > main, body > .site-foot { animation: page-in 300ms var(--ease) backwards; } /* backwards: nothing lingers once done */
@keyframes page-in { from { opacity: 0; } }
html.is-leaving body > main, html.is-leaving body > .site-foot { opacity: 0; transition: opacity 140ms ease-in; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .reveal-ready .rv { opacity: 1; transform: none; }
}

.postmark svg { width: 100%; height: 100%; }

.section { padding-block: var(--section); }
@media (max-width: 900px) {
  .october { padding: 18px 12px; }
  .october small { font-size: 0.7rem; }
}

.checkout:has(.lines.is-empty) { grid-template-columns: minmax(0, 760px); }

/* Justified Thai opens wide gaps on a phone (Thai breaks only at spaces): keep it for wide screens only. */
@media (max-width: 700px) {
  .intro p, .story__text p { text-align: start; }
}

/* Our Products: how buying works, in three steps */
.buy-steps { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 24px 0 0; padding: 0; list-style: none; }
.buy-steps li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; }
.buy-steps b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.875rem; font-weight: 600; }
.buy-steps strong { font-weight: 600; color: var(--green); }
/* each product bar: name, price, designs and free shipping on the left; badge and the way in on the right */
.entry__title { min-width: 0; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 0.9375rem; color: var(--muted); }
.entry__meta .price { font: 600 1rem / 1.45 var(--sans); color: var(--ink); }
.entry__free { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.entry__free .icon { width: 16px; height: 16px; }
.entry__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.btn--s { min-height: 42px; padding: 0 1.2em; font-size: 0.9375rem; }
.rail__hint { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.8125rem; color: var(--muted); }
.rail__hint .icon { width: 14px; height: 14px; }
.zoom__buy { flex: none; }
.zoom__buy[hidden] { display: none; }
@media (max-width: 700px) {
  .entry__bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .entry__actions { flex-wrap: wrap; justify-content: space-between; }
  .entry__actions .btn { flex: 1; justify-content: center; white-space: nowrap; }
  .entry__actions .badge { order: 2; }
  .zoom__buy span, .zoom__count { font-size: 0.8125rem; }
}

/* Featured Collections on the home page uses the same rail as Our Products: no scrollbar,
   round arrows over the photos, faded edges, and the zoom hint underneath. */
.rail--feature { margin: 0; }
.rail--feature .rail__track { gap: 18px; padding: 32px var(--gutter) 16px; scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.rail--feature .rail__btn { top: calc(32px + var(--row-h) / 2); }
.rail--feature .rail__btn--prev { left: max(8px, calc(var(--gutter) - 22px)); }
.rail--feature .rail__btn--next { right: max(8px, calc(var(--gutter) - 22px)); }
.featured__hint { display: flex; justify-content: center; margin-top: 4px; }
.featured__cap [data-lang] + em { margin-left: 0.3em; }
.zoom__buy [data-buy-icon] { display: contents; }

/* "the address is on Ko Lan": only for postcodes shared by an island and the mainland */
.island[hidden] { display: none; }
.island { grid-column: 1 / -1; margin-top: 0; padding: 12px 14px; border: 1px solid var(--paper-2); border-radius: 10px; background: var(--paper, #fff); }
.remote-codes { line-height: 1.8; word-spacing: 2px; }
.rates-more ul.small { margin: 6px 0 0; }

/* Thai has spaces only between phrases, so justifying it stretches those few spaces into gaps.
   Thai paragraphs stay ragged-right; English keeps the justified Canva look. */
:is(.intro p, .story__text p):lang(th) { text-align: start; }

/* ---------- touch screens (every phone and tablet, any brand)
   Fingers need 44px targets; mouse layouts above stay as they are. The zoom badge shows without hover,
   since a phone has none, and hover lifts are skipped so they don't stick after a tap. */
@media (pointer: coarse) {
  .lang-switch button { min-width: 44px; min-height: 44px; }
  .cart-btn { min-height: 44px; }
  .foot__cols a, .foot__cols li { min-height: 44px; padding-block: 0; }
  .foot__cols ul { gap: 0; }
  .foot__cols li > a { flex: 1; } /* the whole row, not just a short word like FAQ */
  .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__legal p:last-child { gap: 0 24px; }
  .kind-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .product__kind .link, .help .link, li > .link { min-height: 44px; }
  .entry__title h3 a, .shopnow { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .rail__zoom { opacity: 1; transform: none; }
}
@media (hover: none) {
  .rail__item:hover img { transform: none; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
  .shopnow:hover { transform: none; }
}

/* Back to top: a quiet round button bottom-right, clear of the iPhone home bar and under the toast. */
.to-top { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ground); color: var(--ink); box-shadow: 0 6px 18px rgb(0 0 0 / 0.14); cursor: pointer; animation: to-top-in 260ms var(--ease); transition: background-color 180ms, color 180ms; }
.to-top[hidden] { display: none; }
.to-top .icon { width: 20px; height: 20px; }
.to-top:hover { background: var(--ink); color: #fff; }
@keyframes to-top-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .to-top { animation: none; } }
@media print { .to-top { display: none; } }
@media (pointer: coarse) {
  .menu-btn { flex: none; min-width: 44px; }
  .qty button, .lines .qty button, .qty input { min-width: 44px; min-height: 44px; }
  .lines .remove, .media-zoom, .copy-btn { min-height: 44px; min-width: 44px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .error-msg .link, .consent .link, .swap-mode, p > .link, .story__links .link { min-height: 44px; }
  .btn--s { min-height: 44px; }
  .help nav a { padding-block: 9px; }
  .design__ctl, .design__choose, .design .qty--s { height: 44px; }
  .design .qty--s { grid-template-columns: 40px 1fr 40px; }
}