/* Studio — a magazine that happens to sell things.
   ---------------------------------------------------------------------------------------------
   The archetype is an editorial fashion front: a grey chrome bar with a solid accent tile where
   the logo goes, then a full-bleed photograph carrying a tiny eyebrow over thin capitals at
   display size, an outline button with a rule running out of it — and promo tiles that *overlap*
   the picture instead of queueing beneath it.

   The overlap is the whole signature, so it is done with a negative margin and a stacking
   context rather than a hero that merely happens to be tall.

   Scoping: every selector is `body.theme-studio`. See vault's stylesheet for why. */

/* --------------------------------------------------------------------------------- tokens */
body.theme-studio {
  --c-bg: var(--color-surface);
  --c-text: var(--color-ink);
  --c-primary: var(--color-ink);
  --c-accent: var(--color-accent);
  --c-muted: var(--color-ink-muted);
  --c-line: var(--color-border);
  --c-line-strong: color-mix(in srgb, var(--color-border) 55%, var(--color-ink));
  --c-soft: var(--color-surface-raised);
  --c-accent-soft: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  --c-shadow: 0 18px 50px color-mix(in srgb, var(--color-ink) 14%, transparent);
  --c-radius: 0px;
  --c-radius-sm: 0px;

  --st-shell: 86rem;
  --st-gap: clamp(3rem, 6vw, 5.5rem);

  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  line-height: 1.6; margin: 0;
}
body.theme-studio, body.theme-studio *, body.theme-studio *::before, body.theme-studio *::after {
  box-sizing: border-box;
}
body.theme-studio :where(a) { color: inherit; text-decoration: none; }
body.theme-studio :where(img) { max-width: 100%; display: block; }
body.theme-studio h1, body.theme-studio h2, body.theme-studio h3, body.theme-studio h4 {
  font-family: var(--font-heading, Manrope, system-ui, sans-serif);
  margin: 0; font-weight: 300; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
}
body.theme-studio h3, body.theme-studio h4 { font-weight: 600; letter-spacing: 0.06em; }
body.theme-studio p { margin: 0; }
body.theme-studio .container { width: min(var(--st-shell), calc(100% - 2.5rem)); margin-inline: auto; }
body.theme-studio .section { padding: var(--st-gap) 0; }
body.theme-studio .eyebrow {
  font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--color-ink-muted); font-weight: 600; margin-bottom: 1.1rem;
}
body.theme-studio .lead { color: var(--color-ink-muted); max-width: 52ch; }
body.theme-studio .muted, body.theme-studio .c-muted { color: var(--color-ink-muted); }
/* The rule that runs out of a link is the archetype's other tell. */
body.theme-studio .text-link {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: var(--color-ink);
}
body.theme-studio .text-link::after {
  content: ""; width: 2.25rem; height: 1px; background: var(--color-ink); transition: width 0.18s ease;
}
body.theme-studio .text-link:hover { color: var(--color-accent); }
body.theme-studio .text-link:hover::after { width: 3.25rem; background: var(--color-accent); }

/* --------------------------------------------------------------------------- announcement */
body.theme-studio .announcement {
  background: var(--color-accent); color: var(--color-accent-ink);
  text-align: center; padding: 0.5rem 1rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------------- header */
body.theme-studio .site-header { background: var(--color-surface-raised); --hr-ground: var(--color-surface-raised); }
body.theme-studio[data-header-style="clear"] .site-header {
  background: transparent; position: absolute; inset: auto 0 auto 0; z-index: 6;
}
body.theme-studio .header-inner {
  display: flex; align-items: stretch; gap: 1.75rem; flex-wrap: wrap; min-height: 4.25rem;
}
/* The solid tile: the archetype puts the wordmark in a filled accent block, not on the ground. */
body.theme-studio .site-brand {
  display: inline-flex; align-items: center; padding: 0 1.25rem; margin-right: auto;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-heading, Manrope, system-ui, sans-serif);
  font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; text-transform: lowercase;
}
body.theme-studio .site-brand img { max-height: calc(1.9rem * var(--logo-scale, 1)); width: auto; }
body.theme-studio .site-nav { display: flex; gap: 1.7rem; align-items: center; }
body.theme-studio .site-nav a {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-ink);
}
body.theme-studio .site-nav a:hover {
  color: var(--color-ink); text-decoration: underline;
  text-decoration-color: var(--color-accent); text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body.theme-studio .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-ink); }
/* The drop-down. Studio is an editorial front — full-bleed pictures, tiles overlapping the
   hero, a lot of white space — so its panel is a **drawer**, not a card: no border at all, deep
   shadow, square corners, and far more room around the words than any other theme gives. The
   hover is the accent underline the bar above already uses, so the panel and the nav are one
   gesture. */
body.theme-studio .site-nav .nav-submenu {
  top: 100%;
  padding: 1.6rem 1.9rem 1.8rem;
  gap: 0.5rem;
  min-width: 15rem;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--c-shadow);
}
body.theme-studio .site-nav .nav-submenu a {
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--color-ink);
  padding: 0.15rem 0; border-radius: 0;
}
body.theme-studio .site-nav .nav-submenu a:hover,
body.theme-studio .site-nav .nav-submenu a:focus-visible {
  background: transparent; color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
body.theme-studio .site-nav .nav-submenu-mega {
  padding: 2rem 2.25rem 2.25rem;
  gap: 0.5rem 3.5rem;
}
/* The one place studio keeps the micro-label: it is the theme's section-eyebrow, set against
   copy that is deliberately much larger than everybody else's. */
body.theme-studio .site-nav .nav-submenu-mega .nav-column-head {
  font-size: 0.68rem; letter-spacing: 0.2em; color: var(--color-ink-muted);
  margin-bottom: 0.75rem;
}
body.theme-studio .header-actions { display: flex; align-items: center; gap: 0.9rem; }
body.theme-studio .header-switchers { display: flex; gap: 0.35rem; }
/* An underline carried by the form, so commerce's rectangle is not drawn around it. */
body.theme-studio .site-search {
  max-width: 12rem; align-self: center; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--color-ink-muted); background: transparent;
}
body.theme-studio .site-search-input {
  padding: 0.4rem 0.1rem; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink);
}
body.theme-studio .site-search-input::placeholder { color: var(--color-ink-muted); }
body.theme-studio .site-search:focus-within { border-bottom-color: var(--color-accent); }
body.theme-studio .site-search-button { padding-inline: 0.3rem 0.1rem; }
body.theme-studio .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 2.1rem; height: 2.1rem; color: var(--color-ink);
}
body.theme-studio .icon-btn:hover { color: var(--color-ink); background: var(--color-surface-raised); }
body.theme-studio .icon-btn .icon { width: 1.15rem; height: 1.15rem; }
body.theme-studio .saved-link {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--color-ink);
}
body.theme-studio .saved-link:hover {
  color: var(--color-ink); text-decoration: underline;
  text-decoration-color: var(--color-accent); text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body.theme-studio .cart-count {
  position: absolute; top: 0; right: -0.3rem; min-width: 1.1rem; height: 1.1rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: 0.64rem; font-weight: 700;
}
body.theme-studio .nav-toggle-input { display: none; }
body.theme-studio .nav-toggle { display: none; align-items: center; cursor: pointer; color: var(--color-ink); }
/* No width/height on the svg itself (just a viewBox), so with nothing sizing it here it
   rendered at 0x0 — invisible and untappable on every phone. */
body.theme-studio .nav-toggle .icon { width: 1.5rem; height: 1.5rem; }

/* -------------------------------------------------------------------------------- buttons */
body.theme-studio .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem;
  padding: 0.9rem 1.9rem; border-radius: 0;
  border: 1px solid var(--color-ink); background: transparent; color: var(--color-ink);
  font: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.theme-studio .btn:hover { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
body.theme-studio .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
body.theme-studio .btn:disabled, body.theme-studio .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
body.theme-studio .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.66rem; letter-spacing: 0.14em; }
/* The filled variant is the accent, and it is used sparingly — the buy button and little else. */
body.theme-studio .btn-buy, body.theme-studio .btn-accent, body.theme-studio .btn-enquire {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
}
body.theme-studio .btn-buy:hover, body.theme-studio .btn-accent:hover, body.theme-studio .btn-enquire:hover {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-surface);
}
body.theme-studio .btn-outline, body.theme-studio .btn-secondary {
  border-color: var(--color-ink-muted); color: var(--color-ink); background: transparent;
}
body.theme-studio .btn-full { width: 100%; }

/* ----------------------------------------------------------------------------------- hero */
body.theme-studio .st-hero { position: relative; background: var(--color-surface-raised); }
/* The plate under the photograph is the ink, not the raised surface: the scrim is a
   pseudo-element and the image is a merchant upload, so a shop with neither had white
   display type on a near-white ground. Same fix as voyage's masthead. */
body.theme-studio .st-hero-media {
  position: relative; min-height: clamp(26rem, 62vh, 40rem); overflow: hidden;
  background: var(--color-ink);
}
body.theme-studio .st-hero-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* A scrim, not an accident. Merchant photography is unpredictable and the headline sits on it —
   without this the type is white-on-white the first time somebody uploads a pale studio shot. */
body.theme-studio .st-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-ink) 74%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 46%, transparent) 48%,
    color-mix(in srgb, var(--color-ink) 16%, transparent) 100%);
}
body.theme-studio .st-hero-copy {
  position: absolute; inset: 0; display: grid; align-content: center;
  z-index: 2; pointer-events: none;
}
body.theme-studio .st-hero-copy > .container { pointer-events: auto; }
body.theme-studio .st-hero .eyebrow { color: color-mix(in srgb, var(--color-surface) 88%, var(--color-ink)); }
body.theme-studio .st-hero h1 {
  font-size: clamp(2.6rem, 9vw, 6.5rem); color: var(--color-surface); letter-spacing: 0.01em;
}
body.theme-studio .st-hero p { color: var(--color-surface); margin-top: 1.25rem; max-width: 40ch; }
body.theme-studio .st-hero-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; align-items: center; }
body.theme-studio .st-hero .btn { border-color: var(--color-surface); color: var(--color-surface); }
body.theme-studio .st-hero .btn:hover { background: var(--color-surface); color: var(--color-ink); }
body.theme-studio .st-hero .text-link { color: var(--color-surface); }
body.theme-studio .st-hero .text-link::after { background: var(--color-surface); }

/* The overlapping tiles. */
body.theme-studio .st-tiles {
  position: relative; z-index: 3; margin-top: clamp(-7rem, -8vw, -3.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: end;
}
body.theme-studio .st-tile {
  position: relative; min-height: 13rem; overflow: hidden; display: flex;
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
}
body.theme-studio .st-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.theme-studio .st-tile-body {
  position: relative; z-index: 2; margin-top: auto; padding: 1.25rem;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); width: 100%;
}
body.theme-studio .st-tile h3 { font-size: 0.95rem; letter-spacing: 0.1em; }
body.theme-studio .st-tile p { font-size: 0.82rem; color: var(--color-ink-muted); margin-top: 0.25rem; }
/* The inverted tile: a solid slab of ink among the photographs. */
body.theme-studio .st-tile-solid { background: var(--color-ink); border-color: var(--color-ink); align-items: end; }
body.theme-studio .st-tile-solid .st-tile-body { background: transparent; }
body.theme-studio .st-tile-solid h3, body.theme-studio .st-tile-solid p { color: var(--color-surface); }
body.theme-studio .st-tile-accent { background: var(--color-accent); border-color: var(--color-accent); align-items: end; }
body.theme-studio .st-tile-accent .st-tile-body { background: transparent; }
body.theme-studio .st-tile-accent h3, body.theme-studio .st-tile-accent p { color: var(--color-accent-ink); }

body.theme-studio .section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 2.5rem;
}
body.theme-studio .section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }

/* The editorial pair: an outsized image beside a narrow column of type. */
body.theme-studio .st-editorial {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
body.theme-studio .st-editorial-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface-raised); }
body.theme-studio .st-editorial-media img { width: 100%; height: 100%; object-fit: cover; }
body.theme-studio .st-editorial h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin-bottom: 1.25rem; }
body.theme-studio .st-editorial p { color: var(--color-ink-muted); }
body.theme-studio .st-editorial p + p { margin-top: 0.9rem; }
body.theme-studio .st-editorial .text-link { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------------- newsletter */
body.theme-studio .newsletter {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  padding: clamp(2rem, 4vw, 3rem); background: var(--color-ink); color: var(--color-surface);
}
body.theme-studio .newsletter h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--color-surface); }
body.theme-studio .newsletter p { color: color-mix(in srgb, var(--color-surface) 86%, var(--color-ink)); font-size: 0.9rem; }
body.theme-studio .newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
body.theme-studio .newsletter-form input {
  padding: 0.85rem 1rem; min-width: 15rem; border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--color-surface) 45%, transparent);
  background: transparent; color: var(--color-surface); font: inherit;
}
body.theme-studio .newsletter-form input::placeholder { color: color-mix(in srgb, var(--color-surface) 70%, transparent); }
body.theme-studio .newsletter .btn { border-color: var(--color-surface); color: var(--color-surface); }
body.theme-studio .newsletter .btn:hover { background: var(--color-surface); color: var(--color-ink); }

/* -------------------------------------------------------------------------------- listing */
body.theme-studio .listing-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
body.theme-studio .listing-hero h1 { font-size: clamp(2rem, 6vw, 4rem); }
body.theme-studio .listing-hero .lead { margin-top: 1rem; }
body.theme-studio .listing-hero.has-image {
  position: relative; min-height: 22rem; display: grid; align-items: end; padding-bottom: 2.5rem;
  background-image: var(--hero-image); background-size: cover; background-position: center;
}
body.theme-studio .listing-hero.has-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 72%, transparent), transparent 70%);
}
body.theme-studio .listing-hero.has-image > .container { position: relative; z-index: 2; }
body.theme-studio .listing-hero.has-image h1,
body.theme-studio .listing-hero.has-image .lead,
body.theme-studio .listing-hero.has-image .breadcrumbs { color: var(--color-surface); }
body.theme-studio .breadcrumbs {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-studio .breadcrumbs a:hover { color: var(--color-accent); }
body.theme-studio .breadcrumbs [aria-current="page"] { color: var(--color-ink); }
body.theme-studio .listing { padding-top: 2.5rem; }
body.theme-studio .filter-chips { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
body.theme-studio .filter-chips a {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--color-ink-muted); padding-bottom: 0.3rem;
}
body.theme-studio .filter-chips a:hover { color: var(--color-ink); }
body.theme-studio .filter-chips a[aria-current="true"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
body.theme-studio .listing-toolbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border);
}
body.theme-studio .listing-count {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-studio .sort-links {
  display: flex; gap: 1.1rem; align-items: baseline;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
}
body.theme-studio .sort-links span { color: var(--color-ink-muted); }
body.theme-studio .sort-links a { color: var(--color-ink-muted); }
body.theme-studio .sort-links a:hover { color: var(--color-ink); }
body.theme-studio .sort-links a[aria-current="true"] { color: var(--color-accent); }

/* Four across on a desktop, two on a phone, so the page can be scanned. It used to be two across at
   40rem a card, "full plate size": a listing of eighty products was a column of pictures each taller
   than the window. Every picture in a listing is the same height: every third card once ran taller
   "so it did not read like a spreadsheet", and on a live shop that read as a mistake. */
body.theme-studio .product-grid {
  display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
@media (max-width: 700px) {
  body.theme-studio .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.75rem; }
}
body.theme-studio .product-card { position: relative; display: flex; flex-direction: column; }
body.theme-studio .product-media {
  display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--color-surface-raised);
}
body.theme-studio .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
body.theme-studio .product-card:hover .product-media img { transform: scale(1.04); }
body.theme-studio .product-media.pattern-a { background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface)); }
body.theme-studio .product-media.pattern-b { background: linear-gradient(20deg, var(--color-surface-raised), var(--color-surface)); }
body.theme-studio .product-media.pattern-c { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-raised)); }
body.theme-studio .product-media.pattern-d { background: var(--color-surface-raised); }
body.theme-studio .product-badge {
  position: absolute; top: 0; left: 0; z-index: 2; padding: 0.25rem 0.7rem;
  background: var(--color-ink); color: var(--color-surface);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
body.theme-studio .product-badge-kind { background: var(--color-accent); color: var(--color-accent-ink); }
body.theme-studio .product-body { padding: 0.9rem 0 0; display: grid; gap: 0.25rem; }
body.theme-studio .product-body h3 { font-size: 0.8rem; letter-spacing: 0.1em; font-weight: 600; }
body.theme-studio .product-body h3 a:hover { color: var(--color-accent); }
body.theme-studio .product-meta { font-size: 0.78rem; color: var(--color-ink-muted); }
body.theme-studio .price {
  font-size: 0.85rem; font-weight: 600; color: var(--color-ink); letter-spacing: 0.04em;
  display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
}
body.theme-studio .price-from, body.theme-studio .price-approx { font-size: 0.72rem; font-weight: 400; color: var(--color-ink-muted); letter-spacing: 0; }
body.theme-studio .price-compare { color: var(--color-ink-muted); font-weight: 400; }
body.theme-studio .price-lg { font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: 0.02em; }
body.theme-studio .wishlist-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer; border-radius: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-ink);
}
body.theme-studio .wishlist-btn:hover { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
body.theme-studio .wishlist-btn .icon { width: 0.95rem; height: 0.95rem; }

body.theme-studio .pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border);
}
body.theme-studio .pagination-status {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-studio .listing-empty, body.theme-studio .empty {
  text-align: center; padding: clamp(3rem, 7vw, 5rem) 1rem; display: grid; gap: 0.9rem;
  justify-items: center; border: 1px solid var(--color-border);
}
body.theme-studio .listing-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--color-ink-muted); }
body.theme-studio .listing-empty h2, body.theme-studio .empty h3 { font-size: 1.2rem; }
body.theme-studio .listing-empty p, body.theme-studio .empty p { color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------- product page */
/* The contact sheet. A product page used to open on one photograph the width of the window, cropped
   to a banner, with the type and the buy form a screen and a half below it — so you could see a
   slice of the thing and not what it costs. Now the caption is a narrow column on the left that
   stays put, and every photograph of the product is on the right at once: the first one large, the
   rest as a sheet of tiles, none of them cropped. Choosing a tile puts it in the large frame and
   the page follows it up. Nothing is hidden behind a click, which is the point of an editorial
   front: you look at all of it, then you decide. */
body.theme-studio .product-page { padding: 0 0 clamp(2rem, 5vw, 4rem); }
body.theme-studio .st-product-top { padding-top: clamp(1.25rem, 3vw, 2rem); }
body.theme-studio .product-layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: start; margin: 1.25rem auto 0; width: min(var(--st-shell), calc(100% - 2.5rem));
}
body.theme-studio .product-gallery { order: 2; display: grid; gap: 0.75rem; }
body.theme-studio .gallery-main {
  position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden;
  background: var(--color-surface-raised);
}
body.theme-studio .gallery-main img { width: 100%; height: 100%; object-fit: contain; }
body.theme-studio .gallery-placeholder { width: 100%; height: 100%; }
/* The sheet: every photograph, two across, uncropped on the same mat as the large one. */
body.theme-studio .gallery-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
body.theme-studio .gallery-thumb {
  width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer; border-radius: 0;
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
}
body.theme-studio .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
body.theme-studio .gallery-thumb[aria-pressed="true"] { border-color: var(--color-ink); border-width: 2px; }
/* The caption column: the buy column and the description, brand and SKU under it, pinned together
   so all of it follows the reader down the sheet of photographs. It is one sticky box, never a
   sticky caption with text scrolling up beneath it. Taller than the window it scrolls inside
   itself, or its foot would be out of reach until the sheet ended. */
body.theme-studio .st-product-side {
  order: 1; display: grid; gap: 1.5rem; width: 100%; align-self: start; position: sticky;
  top: calc(var(--hr-h, 0px) + 1.5rem); max-height: calc(100svh - 3rem); overflow-y: auto;
  scrollbar-width: thin;
}
/* A booking panel can be longer than the window, and a pinned box cannot scroll beside a row that is
   shorter than it: those pages let the column run its own length. */
body.theme-studio .product-layout.has-booking .st-product-side {
  position: static; max-height: none; overflow: visible;
}
body.theme-studio .st-product-side > .product-sections { margin-top: 0; min-width: 0; }
body.theme-studio .product-info { display: grid; gap: 1.15rem; width: 100%; padding: 0; }
/* Room scenes, the datasheet and reviews: below the whole row, at the width of the shell. */
body.theme-studio .st-product-below { width: min(var(--st-shell), calc(100% - 2.5rem)); margin: 0 auto; }
/* Both columns span the whole row. Every child is placed explicitly: a grid child with no
   placement of its own is auto-placed into whatever is left, and depot once put its sections
   above the picture that way. */
body.theme-studio .st-product-side { grid-column: 1; grid-row: 1 / span 2; }
body.theme-studio .product-gallery { grid-column: 2; grid-row: 1 / span 2; }
body.theme-studio .product-info h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: 0.05em; }
body.theme-studio .product-lead { color: var(--color-ink-muted); }
body.theme-studio .availability {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--color-ink);
}
body.theme-studio .availability::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px;
  background: var(--color-success); flex: none;
}
body.theme-studio .availability.is-out { color: var(--color-ink-muted); }
body.theme-studio .availability.is-out::before { background: var(--color-danger); }
body.theme-studio .availability.is-low::before { background: var(--color-warning); }
body.theme-studio .option-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
body.theme-studio .option-group legend {
  padding: 0; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-ink-muted); font-weight: 600; margin-bottom: 0.55rem;
}
body.theme-studio .option-values { display: flex; gap: 0.4rem; flex-wrap: wrap; }
body.theme-studio button.option-pill {
  min-width: 2.75rem; padding: 0.5rem 0.85rem; border-radius: 0; cursor: pointer; font: inherit;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--color-border); background: transparent; color: var(--color-ink);
}
body.theme-studio button.option-pill:hover { border-color: var(--color-ink); }
body.theme-studio button.option-pill[aria-pressed="true"] { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
body.theme-studio button.option-pill.unavailable { opacity: 0.35; text-decoration: line-through; }
body.theme-studio .buy-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; margin-top: 0.4rem; }
body.theme-studio .buy-form-booking { display: block; }
body.theme-studio .qty { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border); }
body.theme-studio .qty button {
  width: 2.5rem; border: 0; background: transparent; color: var(--color-ink); font-size: 1rem; cursor: pointer;
}
body.theme-studio .qty button:hover { background: var(--color-surface-raised); }
body.theme-studio .qty input {
  width: 2.75rem; border: 0; text-align: center; font: inherit; font-weight: 600;
  background: transparent; color: var(--color-ink); -moz-appearance: textfield;
}
body.theme-studio .qty input::-webkit-outer-spin-button,
body.theme-studio .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.theme-studio .btn-buy { flex: 1 1 12rem; }
body.theme-studio .product-rating a { color: var(--color-ink-muted); }
body.theme-studio .product-rating a:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------------- footer */
body.theme-studio .site-footer {
  margin-top: var(--st-gap); background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border); padding: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem;
}
body.theme-studio .footer-grid {
  display: grid; gap: 2.25rem; grid-template-columns: 1.6fr repeat(3, 1fr); margin-bottom: 2.5rem;
}
body.theme-studio .footer-brand .site-brand { margin-bottom: 0.9rem; }
body.theme-studio .footer-brand p { color: var(--color-ink-muted); font-size: 0.88rem; max-width: 30ch; }
body.theme-studio .footer-col { display: grid; gap: 0.5rem; align-content: start; }
body.theme-studio .footer-col h3 {
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-ink); margin-bottom: 0.4rem;
}
body.theme-studio .footer-col a, body.theme-studio .footer-col span { font-size: 0.86rem; color: var(--color-ink-muted); }
body.theme-studio .footer-col a:hover { color: var(--color-accent); }
body.theme-studio .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
body.theme-studio .footer-nav a { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-muted); }
body.theme-studio .footer-nav a:hover { color: var(--color-ink); }
body.theme-studio .footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid var(--color-border);
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-ink-muted);
}
body.theme-studio .powered-by a { text-decoration: underline; }
body.theme-studio .powered-by a:hover { color: var(--color-ink); }

/* ------------------------------------------------------------------------- shared pages */
/* Cart, checkout, account, courses and the contact form are `themes/base/` templates that no
   theme overrides, and `commerce.css` owns them for everybody. It is linked *after* this file,
   so these tweaks are scoped to win — and they exist because a shop whose front page is an
   editorial spread and whose basket is a neutral grey table is two designs, not one. */
body.theme-studio .commerce-page { padding: clamp(2.5rem, 5vw, 4rem) 0; }
body.theme-studio .page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; }
body.theme-studio .page-head h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
body.theme-studio .card, body.theme-studio .auth-card, body.theme-studio .summary-card,
body.theme-studio .order-panel, body.theme-studio .address-card, body.theme-studio .checkout-section {
  border-radius: 0; border: 1px solid var(--color-border); background: var(--color-surface);
}
body.theme-studio .input, body.theme-studio .form input, body.theme-studio .form textarea,
body.theme-studio .form select {
  border-radius: 0; border: 1px solid var(--color-border); background: var(--color-surface);
}
body.theme-studio .input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; }
body.theme-studio .field label, body.theme-studio .qty-label {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-studio .cart-line { border-bottom: 1px solid var(--color-border); }
body.theme-studio .cart-thumb { border-radius: 0; }
body.theme-studio .checkout-steps { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; }
body.theme-studio .account-nav a {
  border-radius: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
body.theme-studio .account-nav a[aria-current="page"] {
  background: var(--color-ink); color: var(--color-surface);
}
body.theme-studio .course-card, body.theme-studio .evt-list-card { border-radius: 0; }
body.theme-studio .pill { border-radius: 0; letter-spacing: 0.1em; text-transform: uppercase; }
body.theme-studio .empty-state { border-radius: 0; }
body.theme-studio .product-section-title {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ----------------------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  body.theme-studio .st-tiles { grid-template-columns: 1fr 1fr; margin-top: -2.5rem; }
  body.theme-studio .st-editorial { grid-template-columns: 1fr; }
  body.theme-studio .product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  body.theme-studio .product-gallery { order: 0; }
  body.theme-studio .st-product-side { order: 1; position: static; max-height: none; overflow: visible; }
  body.theme-studio .product-layout { grid-template-rows: none; }
  body.theme-studio .st-product-side,
  body.theme-studio .product-gallery { grid-column: auto; grid-row: auto; }
  body.theme-studio .gallery-thumbs { display: flex; }
  body.theme-studio .gallery-thumb { width: 4.25rem; aspect-ratio: 3 / 4; }
  body.theme-studio .footer-grid { grid-template-columns: 1fr 1fr; }
  body.theme-studio .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.theme-studio .nav-toggle { display: inline-flex; order: -1; }
  /* `align-items: flex-start` overrides the desktop rule's `center` — see vault's copy of this
     comment for the misalignment it otherwise causes in the open drawer. */
  body.theme-studio .site-nav {
    order: 10; width: 100%; display: none; flex-direction: column; align-items: flex-start;
    gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--color-border);
  }
  body.theme-studio .nav-toggle-input:checked ~ .site-nav { display: flex; }
  /* The search drops onto a row of its own at the foot of the header, and that row is the header's
     last edge — with no margin its underline rested on the hero photograph directly beneath. */
  body.theme-studio .site-search { order: 11; max-width: none; margin-block: 0.6rem 1.1rem; }
  /* A clear header is laid over the picture on the room the hero reserved for a one-row bar. On a
     phone it wraps to three rows and covers the hero's own heading, so it is a bar above the
     picture here. */
  body.theme-studio[data-header-style="clear"] .site-header {
    position: relative; background: var(--color-surface-raised);
  }
  body.theme-studio .st-tiles { grid-template-columns: 1fr; margin-top: -1.5rem; }
  body.theme-studio .footer-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------- the built front page */
/* A new shop's `/` is a **page in the builder**, seeded from `layouts/home.json` — not this
   theme's `home.html`, which is only the fallback for a shop that hands `/` back. Those blocks
   are shared templates (`apps/builder/templates/builder/blocks/`) styled by `builder.css`, so a
   theme that styles none of them ships a front page identical to every other theme's with the
   palette swapped. That is exactly what happened: seven distinct `home.html` files, and the
   admin's theme gallery — which renders each card as a live iframe of this page — showed seven
   copies of one design.

   `body.theme-studio .builder-page …` is (0,3,x) and beats `builder.css`'s (0,2,0). */
/* Oversized, but not the whole window: it used to run past the fold, so the first screen of a shop
   was a photograph and nothing to say what was sold. About four fifths of the window leaves the
   next section's edge showing under it. */
body.theme-studio .builder-page .pb-hero { border-radius: 0; }
body.theme-studio .builder-page .pb-hero-body {
  padding: clamp(5rem, 12vw, 9rem) 0; display: grid; align-content: center; min-height: 78vh;
}
body.theme-studio .builder-page .pb-hero-heading {
  font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.02em;
}
body.theme-studio .builder-page .pb-cols-3,
body.theme-studio .builder-page .pb-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }


/* ------------------------------------------------------------------------------- motion */
/* A slow settle from slightly oversize — the editorial equivalent of a plate being placed.
   The mechanism is `commerce.css`'s — hidden only behind `html.js-reveal`, honouring
   `prefers-reduced-motion` — and a theme sets only its character. */
body.theme-studio {
  /* editorial: the crop shifts the way a lookbook page turns */
  --hover-zoom: 1.07;
  --reveal-shift: 0px;
  --reveal-scale: 1.04;
  --reveal-duration: 700ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}