/* InDims Studio — WordPress-only additions. site.css is a copy of the static site's
   site/assets/css/site.css; everything WordPress needs on top of it lives here, including
   the fixes from the 2026-10-17 home page review (section "Review" below). */

/* Logged-in admin bar (32px, 46px under 783px, scrolls away under 601px):
   keep the sticky / floating header below it. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar.v2 .site-header { top: calc(38px + 32px); }
body.admin-bar.v2.scrolled .site-header { top: 32px; }
@media (max-width: 900px) { body.admin-bar.v2 .site-header, body.admin-bar.v2.scrolled .site-header { top: 32px; } }
@media (max-width: 782px) { body.admin-bar .site-header, body.admin-bar.v2 .site-header, body.admin-bar.v2.scrolled .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header, body.admin-bar.v2 .site-header, body.admin-bar.v2.scrolled .site-header { top: 0; } }

/* Product page FAQ (inc/product-faq.php) reuses the home page FAQ section; a hairline and
   tighter spacing keep it from merging with "You may also like" on the same paper ground. */
.pdp-faq { padding-bottom: clamp(56px, 7vw, 96px); }
.pdp-faq + .library { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); }


/* ===================== Review 2026-10-17 (web, brand, mobile) ===================== */

/* Images keep their own proportions unless a rule sets a height on purpose. */
img { height: auto; }
html.scroll-lock { overflow: hidden; }

/* Focus rings stay visible on the dark sections. */
:is(.is-dark, .site-footer, .announce, body.header-dark .site-header, body.v2.at-top .site-header) :focus-visible { outline-color: var(--on-dark); }

/* Header takes the colour of the section under it (site.js sets body.header-dark). */
body.header-dark .site-header { background: rgba(15, 13, 11, .86); border-color: rgba(241, 236, 230, .08); color: var(--on-dark); }
body.header-dark .site-header .nav a { color: rgba(241, 236, 230, .72); }
body.header-dark .site-header .nav a::after { background: var(--on-dark); }
body.header-dark .site-header .nav a:hover, body.header-dark .site-header .nav a[aria-current="page"] { color: var(--on-dark); }
body.header-dark .site-header .brand img { filter: invert(1) brightness(1.7); }
body.header-dark .icon-btn:hover { background: rgba(241, 236, 230, .1); }
:is(body.header-dark, body.v2.at-top) .icon-btn .count { background: var(--on-dark); color: var(--walnut); }

/* Menu button turns into × while the menu is open. */
.menu-btn svg + svg, .menu-btn[aria-expanded="true"] svg:first-child { display: none; }
.menu-btn[aria-expanded="true"] svg + svg { display: block; }

/* One × in the search field (hide the browser's own clear button). */
.search-panel input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Light studio: feather the lamp photo's left and right edges into the night. */
.lamp img {
  -webkit-mask-image: radial-gradient(70% 62% at 55% 58%, #000 50%, transparent 100%), linear-gradient(90deg, transparent 0, #000 24%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(70% 62% at 55% 58%, #000 50%, transparent 100%), linear-gradient(90deg, transparent 0, #000 24%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* Scenes: 69 : 31 so the big tile and the two small ones all show whole (each tile has
   its image ratio in --ar); a darker veil behind the captions. */
.mosaic { grid-template-columns: minmax(0, 69fr) minmax(0, 31fr); grid-auto-rows: auto; }
.mosaic .tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.mosaic .tile:nth-child(2) { grid-column: 2; grid-row: 1; aspect-ratio: var(--ar, 2 / 1); }
.mosaic .tile:nth-child(3) { grid-column: 2; grid-row: 2; aspect-ratio: var(--ar, 3 / 2); }
.mosaic .note { grid-column: 1 / -1; grid-row: 3; }
.tile::after { background: linear-gradient(180deg, rgba(15, 13, 11, .78) 0%, rgba(15, 13, 11, .42) 26%, rgba(15, 13, 11, 0) 56%); }
.tile-copy h2, .tile-copy p { text-shadow: 0 1px 14px rgba(15, 13, 11, .45); }
.tile .go { background: rgba(15, 13, 11, .55); color: var(--on-dark); } /* readable on bright photos (dining room) */

/* Natural Radiance photos are 614px wide: cap the pair so they are not blown up. */
.radiance-v2 { max-width: calc(2 * 614px + clamp(16px, 3vw, 48px)); margin-inline: auto; }

/* Natural Radiance: a 44px hotspot on the tray; the card has an "Add to enquiry" button. */
.hotspot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.hotspot::before { width: 10px; height: 10px; }
.hot-card .hot-add { margin-top: 14px; min-height: 44px; padding: 0 16px; font-size: 11px; width: 100%; }

/* Natural Stone & Solid Wood: the tray shows whole on the paper colour; the card sits on
   the stone photo so it never covers the tray; square halves keep the stone photo whole. */
@media (min-width: 901px) { .duo { height: clamp(420px, 50vw, 720px); } }
.duo figure:first-child { background: var(--paper); }
.duo figure:first-child img { object-fit: contain; }
/* Centred with `translate`, which the reveal effect's `transform` does not reset. */
.duo-card { left: 75%; transform: none; translate: -50% -50%; }
.duo-card.reveal:not(.in) { transform: translateY(28px); }

/* Craft: every image whole at its own ratio; 03–05 are the original site's white cards. */
.craft .eyebrow, .craft-copy .num { color: #4b3832; } /* 5.5:1 on the clay, 6.1:1 on travertine */
.craft-copy.on-dark .num, .craft-copy.on-dark .eyebrow { color: rgba(241, 236, 230, .78); }
.craft-media img { height: auto; max-height: none; object-fit: contain; }
.cf-back img { aspect-ratio: 1.8; min-height: 380px; object-fit: cover; object-position: 70% 60%; }
.cf-front img { aspect-ratio: var(--ar, 16 / 9); height: auto; }
.craft-row.is-card { background: var(--card); padding: clamp(24px, 3.4vw, 48px); margin-top: clamp(24px, 3vw, 40px); border-top: 0; gap: clamp(28px, 4vw, 64px); box-shadow: 0 18px 50px rgba(58, 42, 36, .12); }
/* 03: text 40 / image 60. 04: the 21:9 laser plate as a full-width strip above its text.
   05: the square battery photo left, text right. */
.craft-row--03 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.craft-row--04 { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.craft-row--04 .craft-copy { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: clamp(28px, 4vw, 64px); align-items: end; }
.craft-row--04 .craft-copy > :is(.num, .eyebrow, h3) { grid-column: 1; }
.craft-row--04 .craft-copy > p:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.craft-row--05 { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); }
@media (min-width: 901px) { .craft-row:not(.is-card) .craft-media { width: min(100%, 560px); justify-self: center; } }
.craft-row.is-card .craft-copy h3 { font-size: clamp(30px, 3vw, 44px); }
/* Travertine background, the default (owner, 2026-10-17); 网站设置 → 首页 → 工艺区底色 can
   switch back to the original clay of site.css. */
.craft--travertine { background: #cdbfae; }

/* Film: the original film inline with Pause / Sound / Watch the film (fullscreen).
   The whole 16:9 frame shows at every width (owner, 2026-10-18: the inline film was
   cropped by site.css's 88vh cap + cover), and the controls sit under the picture. */
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: none; object-fit: contain; background: #000; }
.film-bar { position: static; padding: 16px var(--gutter); background: var(--night); }
.film-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.film-toggle, .film-sound { min-height: 44px; }
.film-sound { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 12px 16px; border: 1px solid rgba(241, 236, 230, .45); }
.film-sound:hover, .film-sound.is-on { border-color: var(--on-dark); }
.film-sound .wave, .film-sound.is-on .mute { display: none; }
.film-sound.is-on .wave { display: inline; }
.film-watch { min-height: 44px; }

/* Stone library: "+" always shown, 44px; hint text for hover screens vs touch screens. */
.stone .quick { width: 44px; height: 44px; opacity: 1; transform: none; }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }

/* Enquiry list: a scrolling body with the form under the list; 44px quantity buttons. */
.drawer-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; }
.drawer .drawer-body { flex: none; overflow: visible; }
.bag-item .qty button { width: 44px; height: 44px; }
.bag-item .qty span { width: 28px; }
.enquiry-form { gap: 14px; margin-top: 6px; }
.enquiry-form label { color: var(--ink-2); }
.enquiry-form input, .enquiry-form textarea { padding: 12px 14px; }
.enquiry-form .btn { justify-self: stretch; }
.enquiry-form .form-note { margin: 0; color: var(--ink-2); }
.enquiry-form.is-empty > :not(.form-note) { display: none; }
.enquiry-intro { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.drawer-foot small a { text-decoration: underline; text-underline-offset: 3px; }

/* "Added to your enquiry list" toast. */
.toast { position: fixed; z-index: 95; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; background: var(--walnut); color: var(--on-dark); font-size: 13px; line-height: 1.4; box-shadow: 0 18px 50px rgba(15, 13, 11, .3); opacity: 0; transform: translate(-50%, 16px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; }
.toast-open { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid rgba(241, 236, 230, .4); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); }
.toast-open:hover { border-color: var(--on-dark); }

@media (max-width: 900px) {
  /* Header: solid dark at the top of the home page and over dark sections. */
  body.v2.at-top .site-header, body.header-dark .site-header { background: var(--night); backdrop-filter: none; }
  /* Open menu: readable in both header colours, 48px rows. */
  .nav.open a { min-height: 48px; display: flex; align-items: center; color: var(--ink); }
  :is(body.v2.at-top, body.header-dark) .nav.open { background: var(--night); border-bottom-color: rgba(241, 236, 230, .12); }
  :is(body.v2.at-top, body.header-dark) .nav.open a { color: var(--on-dark); border-bottom-color: rgba(241, 236, 230, .12); }

  /* Light studio on phones: title, a shorter lamp (4:3), the switch and dimmer right
     under it, then two equal buttons — all in the first screen. */
  .studio { padding: 24px 0 44px; }
  .studio-grid { gap: 0; }
  .studio-grid > div:first-child { display: contents; }
  .studio .eyebrow { order: 1; }
  .studio h1 { order: 2; font-size: clamp(38px, 11vw, 48px); margin: 10px 0 16px; }
  .lamp { order: 3; aspect-ratio: 4 / 3; max-width: none; margin: 0; }
  .lamp img { -webkit-mask-image: radial-gradient(78% 74% at 52% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(78% 74% at 52% 55%, #000 55%, transparent 100%); }
  .switch { order: 4; margin-top: 16px; gap: 14px; max-width: none; }
  .studio-actions { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .studio-actions .btn { padding: 0 10px; font-size: 11px; letter-spacing: .1em; text-align: center; }
  .studio .lede { order: 6; margin-top: 26px; font-size: 15px; }

  /* Scenes: one column, each image whole, captions under the images. */
  .mosaic { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mosaic .tile, .mosaic .tile:nth-child(n) { grid-column: 1; grid-row: auto; aspect-ratio: auto; display: flex; flex-direction: column; background: none; overflow: visible; }
  .mosaic .tile img { aspect-ratio: var(--ar, 16 / 10); height: auto; }
  .mosaic .note { grid-column: 1; grid-row: auto; }
  .tile::after, .tile .go { display: none; }
  .tile-copy { position: static; padding: 14px 0 0; }
  .tile-copy h2, .tile-copy p { text-shadow: none; }

  /* Natural Stone & Solid Wood: tray 16:9 and stones 1:1, both whole. */
  .duo figure { aspect-ratio: auto; }
  .duo figure img { height: auto; }
  .duo figure:first-child img { aspect-ratio: var(--ar, 16 / 9); }
  .duo figure:last-child img { aspect-ratio: var(--ar, 1); }
  .duo-card { left: auto; translate: none; }

  /* Craft on phones: text under each image; cards stack. */
  .cf-back img { min-height: 0; aspect-ratio: var(--ar, 1.8); }
  .cf-back::after { display: none; }
  .cf-back .craft-copy { position: relative; left: auto; top: auto; right: auto; padding: 24px 20px 28px; }
  .cf-front { margin: -24px 0 0 14% !important; }
  .craft-row.is-card { grid-template-columns: minmax(0, 1fr); }
  .craft-row--04 .craft-copy { display: block; }
  .craft-row.is-card .craft-media { order: 0; }

  /* Film controls under the video on phones. */
  .film-bar { padding: 14px var(--gutter); }
  .film-controls { justify-content: flex-start; }

  /* Footer: 44px tap rows. */
  .site-footer ul { gap: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Stone library: "+" sits on the image's bottom-right corner. */
  .stone .quick { width: 44px; height: 44px; top: calc((100vw - 2 * var(--gutter) - 14px) / 2 * 1.25 - 54px); }
}
/* Header brand and announcement stay on one line on small phones. */
.brand span { white-space: nowrap; }
@media (max-width: 380px) {
  .announce .wrap { gap: 10px; font-size: 9px; letter-spacing: .08em; }
  .announce span { white-space: nowrap; }
  .studio-actions .btn { white-space: nowrap; padding: 0 6px; font-size: 10.5px; letter-spacing: .05em; }
}
@media (max-width: 560px) {
  /* Product card from the hotspot stays on screen: along the image's bottom edge. */
  .hot-card { left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px; width: auto; }
}

/* Collections overview: covers are 2:1 close-ups of lit stones (owner, 2026-10-17), shown whole. */
.col-tile .ph { aspect-ratio: 2 / 1; }

/* In fullscreen the film is shown whole, not cropped to the band. */
.film video:fullscreen { object-fit: contain; max-height: none; background: #000; }
.film video:-webkit-full-screen { object-fit: contain; max-height: none; background: #000; }