/*
Theme Name: Hakumei
Description: Shop theme for a small range of printed lampshades. Classic, not block-based: the product page is a bespoke layout and WooCommerce block templates would fight it for every part of that.
Version: 1.28.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: tracery
*/

/* The design is ported from the static prototype in lampshade/site/. Where a
   rule refers to markup WooCommerce generates rather than markup we wrote, it
   says so. */

/* The design follows sonos.com: one neo-grotesk at weight 500, very large
   headings, near-black body text, pure white and pure black sections,
   charcoal (#2e2e2e) bars and footer, #f4f4f4 panels, and outlined pill
   buttons with a 2px border. Sonos sets it in Aktiv Grotesk, which is a
   licensed Adobe font; Inter at 500 with slightly tightened tracking is the
   closest free match and was already loaded.

   Monochrome on purpose. The theme's old brass accent is gone; --brass now
   resolves to ink so every rule that used it reads as Sonos does. */

:root{
  --page:#fff;
  --page-2:#f4f4f4;
  --ink:#000;
  --ink-2:#2e2e2e;
  --ink-3:#6b6b6b;          /* 5.3:1 on white */
  --line:#cdcdcd;
  --line-2:#e0e0e0;
  --brass:var(--ink);
  --charcoal:#2e2e2e;
  --dark:#000;
  --dark-ink:#fff;
  --dark-ink-2:#bfbfbf;
  --shell:1228px;           /* Sonos's content width at 1440 */
  --text:760px;
  --pad:clamp(20px,5vw,64px);
  --nav-h:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font:400 16px/1.5 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ink)}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:100;width:auto;height:auto;
  clip:auto;clip-path:none;background:#fff;padding:12px 18px;border-radius:80px}
#main{display:block;height:0;outline:0}

/* ---- header ---------------------------------------------------------------
   Charcoal announcement bar, then a white bar: spaced-capitals wordmark on
   the left, the menu centred, account and bag on the right. Below 1100px the
   menu folds behind a button, as Sonos's does. */
.sx-announce{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:8px;
  min-height:52px;padding:6px var(--pad);background:var(--charcoal);color:#fff;font-size:16px}
.sx-announce[hidden]{display:none}
.sx-announce p{margin:0;text-align:center;line-height:1.35}
.sx-announce a{color:#fff;text-underline-offset:3px;white-space:nowrap;justify-self:end}
.sx-announce-close{display:flex;padding:6px;margin-left:-6px;border:0;background:none;
  color:#fff;cursor:pointer;border-radius:50%}
/* On a phone the message needs the whole width; the store is one tap away in
   the menu, so the link gives way rather than running into the text. */
@media(max-width:759px){.sx-announce a{display:none}.sx-announce p{font-size:14px}}
@media(min-width:760px){.sx-announce{grid-template-columns:120px 1fr 120px;gap:12px}}

.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:#fff}
.nav-inner{max-width:calc(var(--shell) + 2 * var(--pad));margin:0 auto;height:100%;
  padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{justify-self:start;font-size:18px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
/* The name in its own script: lighter, untracked, never uppercased (kanji
   have no case, and letter-spacing meant for capitals pulls them apart). */
.brand-name{display:inline}
/* The text logo (tracery_brand_sub): the name in bold capitals, tight, then
   the second word in the regular weight, as Gantri sets its own. */
.brand.brand-word{font-size:21px;font-weight:700;letter-spacing:.04em;line-height:1}
.brand-sub{margin-left:.28em;font-weight:400;letter-spacing:0;text-transform:none}
.brand-mark{margin-left:.7em;font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;font-size:1.05em;letter-spacing:.12em;text-transform:none;color:var(--ink-2,#555)}
.nav-icons{justify-self:end;display:flex;align-items:center;gap:20px}
.nav-icon{position:relative;display:inline-flex;color:var(--ink);padding:4px}
.cart-count{position:absolute;top:-4px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.cart-count[hidden]{display:none}
.nav-burger{display:none;padding:6px;margin-left:-6px;border:0;background:none;
  color:var(--ink);cursor:pointer}
.nav-burger .ts-ico+.ts-ico{display:none}

/* ---- stages and type ---------------------------------------------------- */
.stage{padding:clamp(72px,9vw,128px) var(--pad);text-align:center}
.stage.tight{padding-top:clamp(56px,6vw,88px)}
.stage.light{background:var(--page)}
.stage.dark{background:var(--dark);color:var(--dark-ink)}
.stage.dark .deck{color:#d6d6d6}
.stage.dark figcaption{color:var(--dark-ink-2)}

.eyebrow{margin:0 0 16px;font-size:16px;font-weight:500;color:var(--ink-2)}

h1,h2{margin:0 auto;font-weight:500;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(40px,6vw,88px);max-width:16ch}
h2{font-size:clamp(32px,4.4vw,64px);max-width:18ch}
h2.huge{font-size:clamp(40px,6vw,88px);max-width:16ch}
h2.small{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.01em}

.deck{max-width:var(--text);margin:24px auto 0;font-size:clamp(18px,1.5vw,21px);
  line-height:1.35;color:var(--ink-2)}
.deck.spaced{margin-top:14px}
.statement{margin:40px auto 0;font-size:clamp(24px,3vw,36px);font-weight:500;
  letter-spacing:-.015em}

.links{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:center;margin:32px 0 0;font-size:16px}
.links a{color:var(--ink);text-underline-offset:4px}
/* ---- the object, isolated and large ------------------------------------ */
.showpiece{margin:clamp(46px,6vw,74px) auto 0;max-width:600px}
.showpiece.wide{max-width:860px}
.showpiece img{border-radius:20px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.28))}
.showpiece.wide img{filter:drop-shadow(0 30px 70px rgba(0,0,0,.5))}
figcaption{margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.08em;color:var(--ink-3)}

/* ---- big figures ------------------------------------------------------- */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  max-width:880px;margin:clamp(48px,6vw,76px) auto 0}
.figures b{display:block;font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:600;
  letter-spacing:-.03em;line-height:1}
.figures i{font-style:normal;font-size:.42em;font-weight:500;margin-left:.08em}
.figures span{display:block;margin-top:12px;font-size:.92rem;color:var(--ink-2)}

/* ---- the collection --------------------------------------------------- */
.season-note{margin:18px auto 0;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:44px 34px;max-width:var(--shell);margin:clamp(44px,5vw,68px) auto 0;
  text-align:left}
.loading{grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:.92rem}

.piece{margin:0;display:flex;flex-direction:column}
.piece-shot{position:relative;border-radius:16px;overflow:hidden;background:#0d0c10;
  box-shadow:0 18px 36px rgba(0,0,0,.16)}
.piece-shot .shot{width:100%;display:block;transition:opacity .28s ease}
.piece-shot .off{position:absolute;inset:0;opacity:0}
.piece-shot[data-lit="false"] .on{opacity:0}
.piece-shot[data-lit="false"] .off{opacity:1}

.lamp{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;
  gap:7px;padding:6px 12px;border:0;border-radius:980px;cursor:pointer;
  background:rgba(255,255,255,.9);color:#1d1d1f;
  font:500 .74rem 'Inter',sans-serif;backdrop-filter:blur(8px)}
.lamp .dot{width:8px;height:8px;border-radius:50%;background:#ffca6a;
  box-shadow:0 0 10px 2px rgba(255,202,106,.85);transition:all .2s}
.lamp.is-off .dot{background:#b9b9be;box-shadow:none}

.piece-body{padding-top:18px}
.piece-body h3{margin:0;font-size:1.12rem;font-weight:600;letter-spacing:-.018em}
.piece-blurb{margin:7px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.piece-meta{margin:12px 0 0;display:flex;flex-direction:column;gap:3px;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.05em;
  color:var(--ink-3)}
.piece-buy{margin:16px 0 0;display:flex;align-items:center;gap:12px}
.piece-buy .from{font-size:.84rem;color:var(--ink-2)}
.piece-shot{cursor:pointer}

/* ---- steps ------------------------------------------------------------- */
.steps{list-style:none;padding:0;max-width:var(--shell);
  margin:clamp(44px,5vw,68px) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:44px;text-align:left}
.steps h3{margin:0 0 10px;font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
.steps p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.55}

/* ---- range ------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;
  max-width:var(--shell);margin:clamp(44px,5vw,68px) auto 0;text-align:left}
.grid figure{margin:0;cursor:pointer}
.grid img{border-radius:16px;background:#0d0c10;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.16))}
.grid figure:hover img{transform:scale(1.03)}
.grid figcaption{margin-top:16px;font-family:'Inter',sans-serif;letter-spacing:normal}
.grid figcaption strong{display:block;font-size:1.06rem;font-weight:600;color:var(--ink)}
.grid figcaption span{display:block;margin-top:5px;font-size:.86rem;line-height:1.45;
  color:var(--ink-2)}

/* ---- specs ------------------------------------------------------------- */
.specs{max-width:var(--shell);margin:38px auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;text-align:left;
  border-top:1px solid var(--line)}
.specs>div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.specs dt{font-size:.86rem;color:var(--ink-3)}
.specs dd{margin:0;font-size:.9rem;color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media(max-width:900px){
  .figures{grid-template-columns:1fr;gap:36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---- product page ------------------------------------------------------
   The object holds still on the left while the choices scroll past it on the
   right. That is the whole layout: a customer comparing two sizes should be
   comparing them against the thing, not against their memory of it. */
.product{max-width:var(--shell);margin:0 auto;padding:0 22px 90px}
.product-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;
  align-items:start}

.stage-col{position:sticky;top:78px;padding-top:38px}
.hero-shot{position:relative;border-radius:22px;overflow:hidden;background:#0d0c10;
  box-shadow:0 30px 70px rgba(0,0,0,.22)}
.hero-shot[data-lit="false"]{background:var(--page-2)}
.hero-shot img{width:100%;display:block}
.shot-note{text-align:center;margin-top:18px;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.07em;color:var(--ink-3)}

.options-col{padding-top:38px}
.crumb{margin:0 0 20px;font-size:.82rem}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.product-title{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600;
  letter-spacing:-.026em;margin:0;text-align:left;max-width:none}
.product-blurb{margin:10px 0 0;font-size:1.02rem;line-height:1.5;color:var(--ink-2)}
.product-from{margin:14px 0 0;font-size:.9rem;color:var(--ink-3)}

.group{margin-top:48px}
.group h2{text-align:left;margin:0 0 18px;max-width:none;
  font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-.02em;
  color:var(--ink-3)}
.group h2 b{color:var(--ink);font-weight:600}

/* One option. The whole card is the hit area, the radio is only there for
   assistive tech and keyboards. */
.opt{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  margin-bottom:10px;cursor:pointer;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.opt:hover{border-color:#b8b8bf}
.opt.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.opt-title{font-size:.98rem;font-weight:600;letter-spacing:-.012em}
.opt-title .tag{font-style:normal;font-size:.66rem;font-weight:500;
  letter-spacing:.04em;color:var(--brass);border:1px solid currentColor;
  border-radius:980px;padding:1px 7px;margin-left:7px;vertical-align:2px}
.opt-note{font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.opt-detail{font-size:.78rem;line-height:1.4;color:var(--ink-3)}
.opt-right{flex:none;font-size:.86rem;color:var(--ink-2);white-space:nowrap;
  padding-top:1px}

/* The guide. Folded up, in place, and never a modal - it answers a question
   asked at the moment of choosing, so it belongs next to the choice. */
.guide{margin-top:4px;border-radius:12px;background:var(--page-2)}
.guide summary{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:15px 18px;cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:500}
.guide summary::-webkit-details-marker{display:none}
.guide-mark{position:relative;flex:none;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--ink-3)}
.guide-mark::before,.guide-mark::after{content:"";position:absolute;
  background:var(--ink-2);left:50%;top:50%;transform:translate(-50%,-50%)}
.guide-mark::before{width:9px;height:1px}
.guide-mark::after{width:1px;height:9px;transition:opacity .18s}
.guide[open] .guide-mark::after{opacity:0}
.guide-body{padding:0 18px 16px}
.guide-body p{margin:0 0 10px;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.guide-body p:last-child{margin-bottom:0}

/* Summary. The Apple move: restate the object by name before the price. */
.summary-block{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.mine{text-align:left;max-width:none;margin:0;font-size:clamp(1.5rem,2.4vw,1.9rem);
  font-weight:600;letter-spacing:-.022em}
.mine span{color:var(--ink-3)}
.summary-lines{display:grid;grid-template-columns:1fr auto;gap:8px 20px;
  margin:24px 0 0;padding:0 0 20px;border-bottom:1px solid var(--line);
  font-size:.9rem}
.summary-lines dt{color:var(--ink-2)}
.summary-lines dd{margin:0;text-align:right}
.ship{display:flex;flex-direction:column;gap:7px;margin:18px 0 0;font-size:.85rem;
  color:var(--ink-2)}
.ship b{color:var(--ink);font-weight:600}
.grand{margin:22px 0 18px;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;
  letter-spacing:-.028em}

@media(max-width:900px){
  .product-grid{grid-template-columns:1fr;gap:30px}
  .stage-col{position:static;padding-top:22px}
  .options-col{padding-top:0}
}

/* A link to a shade that has rotated out. Not an error page: the range moved
   on, so show what actually replaced it. */
.rotated{max-width:var(--text);margin:0 auto;padding:90px 0 40px;text-align:center}
.rotated h1{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;letter-spacing:-.024em;
  margin:0 auto;max-width:20ch}
.rotated p{color:var(--ink-2);font-size:1rem;line-height:1.5;margin:16px auto 0;
  max-width:46ch}
.rotated-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:18px;margin:38px 0}
.rotated-item{text-decoration:none;color:var(--ink)}
.rotated-item img{border-radius:12px;background:#0d0c10}
.rotated-item span{display:block;margin-top:9px;font-size:.86rem}


/* ---- WooCommerce's own markup ------------------------------------------
   Cart, checkout and account keep WooCommerce's structure; these rules give
   them the same type and spacing as the rest of the shop rather than
   restyling them element by element. */
.woo-page{text-align:left}
.woo-inner{max-width:var(--shell);margin:0 auto}
.woo-inner h1,.woo-inner h2{text-align:left;max-width:none;
  font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 18px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 22px;padding:14px 18px;border-radius:12px;
  background:var(--page-2);border:1px solid var(--line);font-size:.9rem}
.woocommerce-error{border-color:#e0b4b4;background:#fdf3f3}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.92rem}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.woocommerce table.shop_table th{font-weight:600;color:var(--ink-2);
  font-size:.82rem;letter-spacing:.02em}
.woocommerce .quantity input[type=number],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font:400 1rem 'Inter',sans-serif;width:100%}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--ink);color:#fff;border:0;border-radius:980px;
  padding:12px 24px;font:500 .9rem 'Inter',sans-serif;cursor:pointer;
  text-decoration:none;display:inline-block;transition:opacity .18s}
.woocommerce .button:hover{opacity:.85;background:var(--ink);color:#fff}
.woocommerce .button:disabled,.woocommerce button.button:disabled[disabled]{
  opacity:.35;cursor:not-allowed}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{border:1px solid var(--line);
  border-radius:16px;padding:22px;background:#fff}
.woocommerce ul.products{list-style:none;padding:0;margin:0}

/* The variation selects are real and functional; the cards are their face.
   Hidden the accessible way, so keyboard and screen-reader users still get a
   working control. */
.tracery-selects{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.opt.is-unavailable{opacity:.4;cursor:not-allowed}
.opt.is-unavailable:hover{border-color:var(--line)}

/* WooCommerce drops the live price and stock line in here. */
.single_variation_wrap{margin-top:20px}
.woocommerce-variation-price{margin-bottom:16px}
.woocommerce-variation-price .price,.woocommerce-variation-price .amount{
  font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;letter-spacing:-.028em;
  color:var(--ink)}
.woocommerce-variation-availability{font-size:.86rem;color:var(--ink-2);
  margin-bottom:12px}
.tracery-form .woocommerce-variation-add-to-cart{display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.tracery-form .quantity input{width:86px;text-align:center}
.tracery-form .single_add_to_cart_button{flex:1;min-width:200px;
  padding:15px 24px;font-size:1rem}
.tracery-form .reset_variations{display:none}
.product-detail{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);
  font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.product-detail p{margin:0 0 12px}

.piece-link{display:block;text-decoration:none}
.piece-body h3 a{color:var(--ink);text-decoration:none}

/* ---- merchandising -----------------------------------------------------
   Borrowed conventions, not decoration: a delivery threshold people can act
   on, a despatch date instead of a vague promise, and the colours visible
   before anyone clicks into a product. */

.made-note{margin:20px 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.made-note strong{color:var(--ink);font-weight:600}
.made-note .ship-by{color:var(--ink);font-weight:600;white-space:nowrap}
.made-note.quiet{font-size:.82rem;color:var(--ink-3);margin-top:10px}

.trust{list-style:none;display:grid;gap:14px;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.trust b{display:block;font-size:.86rem;font-weight:600}
.trust span{display:block;margin-top:3px;font-size:.78rem;color:var(--ink-3);
  line-height:1.45}

.swatches{display:flex;align-items:center;gap:6px;margin-top:12px}
.swatch{width:14px;height:14px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.swatch-count{margin-left:4px;font-size:.72rem;color:var(--ink-3)}

/* The kit choice is the first and biggest decision, so its cards sit a little
   heavier than the two that follow. */
.group[data-attribute="pa_kit"] .opt-title{font-size:1.04rem}

/* WooCommerce's own accent colour, beaten on its own specificity.
   Its primary buttons carry `.alt` as well as `.button`, and the default
   stylesheet targets `.woocommerce button.button.alt` — one class more than
   the plain-button rules above, so the shop's purple wins and the Add to cart
   button ends up the only coloured thing on the page. Matching the class
   count here rather than reaching for !important keeps it overridable. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button,
.wc-block-components-button:not([disabled]),
.wp-element-button{
  background-color:var(--ink);background:var(--ink);color:#fff;border:0;
  border-radius:980px}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.wc-block-components-button:not([disabled]):hover{
  background-color:var(--ink);background:var(--ink);color:#fff;opacity:.85}
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.single_add_to_cart_button:disabled{
  background-color:var(--ink);background:var(--ink);color:#fff;opacity:.3}

/* The block cart's checkout button. This rule used to name
   .wc-block-components-totals-item__value as well, which painted every
   figure in the totals table - subtotal, delivery, total - as white text on a
   black box. Totals are text, not buttons. */
.wc-block-cart__submit-button{background:var(--ink);color:#fff}
a{color:var(--brass)}
.woo-inner a:not(.button):not(.pill):not(.wc-block-components-button){color:var(--brass)}

/* ---- buttons ---------------------------------------------------------------
   Sonos's pill: 2px border, 80px radius, 18px/500. Outlined by default,
   solid black for the one action that buys something, white-outlined on
   black. `.pill` and `.ghost` are the class names the older templates use;
   they map onto the same two buttons so nothing has to be renamed. */
.btn,.pill,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:clamp(12px,1.1vw,16px) clamp(28px,3.3vw,48px);border:2px solid var(--ink);border-radius:80px;
  background:transparent;color:var(--ink);font:500 clamp(16px,1.25vw,18px)/1.3 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover,.ghost:hover{background:var(--ink);color:#fff}
.btn.solid,.pill{background:var(--ink);color:#fff}
.btn.solid:hover,.pill:hover,.pill:focus{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.btn.on-dark{border-color:#fff;color:#fff}
.btn.on-dark:hover{background:#fff;color:#000}
.btn.small,.pill,.ghost{padding:10px 26px;font-size:16px}
.pill.wide{width:100%;padding:14px}

.fineprint{font-size:14px;color:var(--ink-3);margin:14px 0 0;line-height:1.5}
.fineprint.centred{text-align:center;max-width:var(--text);margin:28px auto 0}

/* ---- reviews, specifications and the maker's note ----------------------- */
.product-rating{margin:10px 0 0}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;
  color:var(--ink-2)}
.rating-none{color:var(--ink-3);font-size:.8rem}
.rating-count{color:var(--ink-3)}
.piece-rating{margin:10px 0 0;min-height:1.1em}

/* WooCommerce draws stars with a font glyph and a width percentage. */
.star-rating{position:relative;overflow:hidden;height:1em;line-height:1;
  width:5.4em;font-family:star;font-size:.9em;flex:none;color:var(--ink)}
.star-rating::before{content:"\73\73\73\73\73";opacity:.25;float:left;top:0;left:0;
  position:absolute}
.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;
  padding-top:1.5em}
.star-rating span::before{content:"\53\53\53\53\53";top:0;position:absolute;left:0}
.woocommerce-product-rating{display:flex;align-items:center;gap:10px;
  margin-bottom:14px}

.spec-panel{margin-top:8px}
.spec-list{margin:0;display:grid;gap:10px 20px}
.spec-list>div{display:grid;grid-template-columns:110px 1fr;gap:16px}
.spec-list dt{font-size:.82rem;color:var(--ink-3)}
.spec-list dd{margin:0;font-size:.86rem;line-height:1.5;color:var(--ink-2)}

.makers-note{max-width:var(--text);margin:clamp(56px,7vw,96px) auto 0;
  padding:0 22px;text-align:center}
.makers-note h2{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:20ch}
.makers-note p{margin:16px auto 0;font-size:1rem;line-height:1.6;
  color:var(--ink-2)}

.reviews-block{max-width:var(--shell);margin:clamp(52px,6vw,84px) auto 0;
  padding:36px 22px 0;border-top:1px solid var(--line)}
.reviews-block h2,.reviews-block h3{text-align:left;max-width:none;
  font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 18px}
.reviews-block .commentlist{list-style:none;padding:0;margin:0 0 28px}
.reviews-block .comment_container{display:flex;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.reviews-block .comment-text{flex:1}
.reviews-block .meta{font-size:.82rem;color:var(--ink-3);margin:0 0 6px}
.reviews-block .description p{font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.reviews-block .comment-form label{display:block;font-size:.8rem;
  color:var(--ink-2);margin-bottom:8px}
.reviews-block .comment-form input[type=text],
.reviews-block .comment-form input[type=email],
.reviews-block .comment-form textarea{width:100%;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font:400 1rem 'Inter',sans-serif;margin-bottom:16px}
.reviews-block .stars a{color:var(--ink);text-decoration:none;margin-right:2px}
.reviews-block .woocommerce-noreviews{color:var(--ink-3);font-size:.92rem}

/* ---- About page --------------------------------------------------------- */
.about-hero h1{max-width:20ch}
.about-belief,.about-note{padding-top:clamp(56px,7vw,90px)}
.about-copy{max-width:var(--text);margin:20px auto 0;font-size:1.05rem;
  line-height:1.65;color:var(--ink-2)}
.about-copy p{margin:0 0 14px}
.signature{margin:26px auto 0;font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* An unwritten block announces itself. A tasteful placeholder is how a shop
   ends up shipping filler to real customers. */
.about-prompt{max-width:var(--text);margin:22px auto 0;padding:26px 28px;
  border:1px dashed var(--line);border-radius:16px;background:var(--page-2);
  text-align:left}
.about-prompt p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.about-prompt-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  margin-bottom:10px!important}
.about-prompt-link{margin-top:14px!important;font-size:.86rem}
.about-prompt-link a{color:var(--brass);text-decoration:none}
.about-prompt-link a:hover{text-decoration:underline}

.about-photo{max-width:var(--shell);margin:clamp(44px,5vw,72px) auto 0;
  padding:0 22px}
.about-photo img{width:100%;border-radius:18px;display:block}
.about-photo.is-empty .about-photo-brief{display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;
  aspect-ratio:var(--ratio,4/3);border:1px dashed var(--line);border-radius:18px;
  background:var(--page-2);padding:28px}
.about-photo-brief p{margin:0;max-width:34ch;font-size:.9rem;color:var(--ink-2)}

/* The measured facts, four across. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:34px 30px;max-width:var(--shell);margin:clamp(44px,5vw,68px) auto 0;
  text-align:left}
.fact{margin:0}
.fact-figure{margin:0;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:600;
  letter-spacing:-.028em;line-height:1}
.fact h3{margin:10px 0 8px;font-size:.95rem;font-weight:600;
  letter-spacing:-.012em}
.fact p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}

@media(max-width:700px){
  .facts{grid-template-columns:1fr}
}

/* ---- policy and contact pages ------------------------------------------- */
.policy h1{font-size:clamp(2rem,4vw,2.9rem)}
/* Six terms, so two columns read as three tidy rows. The shared auto-fit
   grid would make four columns and leave a ragged 4 + 2 on a wide screen. */
.policy .specs{margin-top:38px;grid-template-columns:repeat(2,1fr);
  column-gap:56px}
@media(max-width:720px){.policy .specs{grid-template-columns:1fr}}
.contact-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px 30px;max-width:var(--shell);margin:clamp(40px,5vw,64px) auto 0;
  text-align:left}
.contact-way h2{text-align:left;max-width:none;margin:0;font-size:.82rem;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.contact-value{margin:8px 0 10px;font-size:1.15rem;font-weight:600;
  letter-spacing:-.018em;word-break:break-word}
.contact-value a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.contact-value a:hover{border-color:var(--ink)}
.contact-way p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.policy .guide{max-width:var(--text);margin-left:auto;margin-right:auto;text-align:left}
.policy .links{margin-top:34px}

/* ---- menu and mega menu --------------------------------------------------
   The panel is a sibling of the bar and drops below it, so opening one never
   resizes the header. The bar is position:sticky, which is already a
   containing block for the panel - do not add position:relative to .nav, it
   overrides the sticky and the bar scrolls away (that happened once). */
.nav-main{display:flex;gap:clamp(18px,2.2vw,32px)}
.nav-item{display:flex;align-items:center;height:var(--nav-h)}
.nav-item>a{position:relative;color:var(--ink);text-decoration:none;font-size:16px;white-space:nowrap}
.nav-item>a:hover{text-decoration:underline;text-underline-offset:6px}
.nav-item>a.current::after{content:"";position:absolute;left:0;right:0;
  bottom:calc((var(--nav-h) - 21px) / -2);height:2px;background:var(--ink)}

/* Opaque: a tall panel over body copy has to be, or the two sets of text sit
   on top of each other and neither is readable. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:59;background:#fff;
  border-top:1px solid var(--line-2);text-align:left;box-shadow:0 24px 48px rgba(0,0,0,.08);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;animation:mega-in .22s ease}
@keyframes mega-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-inner{max-width:calc(var(--shell) + 2 * var(--pad));margin:0 auto;padding:40px var(--pad) 48px}
.mega-head h2{margin:0;font-size:clamp(32px,3.6vw,48px);text-align:left;max-width:none}
.mega-head p{margin:6px 0 0;font-size:18px;color:var(--ink-2)}
.mega-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:32px;
  padding-top:32px;border-top:1px solid var(--line-2)}
.mega-col-centred{text-align:center;display:flex;flex-direction:column;align-items:center}
.mega-more{border-left:1px solid var(--line-2);padding-left:40px}
.mega-mark{display:flex;align-items:center;justify-content:center;width:80px;height:80px;
  margin-bottom:16px;border-radius:50%;background:var(--page-2);font-size:12px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.mega-mark.has-img{overflow:hidden;padding:8px}
.mega-mark img{width:100%;height:100%;object-fit:contain}
.mega-thumb{display:block;width:120px;height:80px;margin-bottom:16px;border-radius:12px;
  overflow:hidden;background:var(--page-2)}
.mega-thumb img{width:100%;height:100%;object-fit:cover}
.mega-thumb-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.mega-col h3{margin:0;font-size:21px;font-weight:500}
.mega-col>p{margin:6px 0 16px;font-size:16px;color:var(--ink-2)}
.mega-more ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.mega-more a{font-size:16px;color:var(--ink-2);text-decoration:none}
.mega-more a:hover{color:var(--ink);text-decoration:underline}
.mega-soon{margin:0;font-size:16px;color:var(--ink-3)}
.mega-popular{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-2)}
.mega-popular h3{margin:0 0 16px;font-size:16px;font-weight:500;color:var(--ink-2)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mega-card{text-decoration:none;color:var(--ink)}
.mega-shot{display:block;border-radius:16px;overflow:hidden;background:var(--page-2);aspect-ratio:1/1}
.mega-shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mega-card:hover .mega-shot img{transform:scale(1.04)}
.mega-shot-empty{display:block;width:100%;height:100%}
.mega-name{display:block;margin-top:10px;font-size:16px;font-weight:500}
.mega-name-soon{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}

/* A group's panel (theme 1.27.19): its families down the left, the hovered
   one's panel beside them. The bar's group link and the phone menu's heading
   and list are two faces of one item; the wide bar shows only the link. */
.nav-group-head,.nav-subs{display:none}
.mega-split{display:grid;grid-template-columns:minmax(200px,248px) minmax(0,1fr);
  gap:clamp(32px,4vw,56px);align-items:start}
.mega-subs{list-style:none;margin:0;padding:0 clamp(20px,2.4vw,32px) 0 0;
  border-right:1px solid var(--line-2);display:grid;gap:4px}
.mega-sub{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;
  color:var(--ink);text-decoration:none;transition:background-color .15s}
a.mega-sub:hover,.mega-sub.is-on{background:var(--page-2)}
.mega-sub:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mega-sub-mark{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--page-2);color:var(--ink-2);overflow:hidden}
.mega-sub-mark.has-img{padding:5px}
.mega-sub-mark img{width:100%;height:100%;object-fit:contain}
.mega-sub.is-on .mega-sub-mark,a.mega-sub:hover .mega-sub-mark{background:#fff}
.mega-sub-name{display:block;font-size:17px;font-weight:500;line-height:1.25}
.mega-sub-price{display:block;margin-top:2px;font-size:14px;color:var(--ink-3)}
.mega-sub.is-soon{color:var(--ink-3);cursor:default}
.mega-sub.is-soon .mega-sub-mark{color:var(--ink-3);opacity:.7}
.mega-subpanel{animation:mega-in .18s ease}
.mega-subpanel .mega-head h2{font-size:clamp(28px,3vw,40px)}
.mega-subpanel .mega-cols{gap:32px}
.mega-subpanel .mega-more{padding-left:32px}
@media(prefers-reduced-motion:reduce){.mega,.mega-subpanel{animation:none}}

/* Below 1100px seven menu items no longer fit beside the wordmark, so the
   menu folds behind a button: burger left, wordmark centred, icons right, as
   Sonos's phone layout. The panels are dropped - there is nothing to hover
   on a touch screen, and each item was always a real link to the same page. */
@media(max-width:1099px){
  .nav-inner{grid-template-columns:1fr auto 1fr}
  .nav-burger{display:flex;justify-self:start}
  .brand{justify-self:center;font-size:16px}
  .brand.brand-word{font-size:19px}
  .mega{display:none!important}
  .nav-main{position:fixed;left:0;right:0;bottom:0;top:var(--menu-top,var(--nav-h));z-index:59;
    flex-direction:column;gap:0;padding:8px var(--pad) 48px;background:#fff;overflow-y:auto;
    border-top:1px solid var(--line-2);visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility 0s linear .2s}
  .nav.is-open .nav-main{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .nav.is-open .nav-burger .ts-ico:first-child{display:none}
  .nav.is-open .nav-burger .ts-ico+.ts-ico{display:block}
  .nav-item{height:auto;border-bottom:1px solid var(--line-2)}
  .nav-item>a{display:block;width:100%;padding:18px 0;font-size:24px;font-weight:500}
  .nav-item>a.current::after{display:none}
  body.menu-open{overflow:hidden}
  /* Groups: the name as a small heading, its families as the big links. */
  .nav-item.nav-group{display:block;padding:22px 0 10px}
  .nav-item>a.nav-group-link{display:none}
  .nav-group-head{display:block;margin-bottom:2px;font-size:14px;font-weight:500;color:var(--ink-3)}
  .nav-subs{display:block;list-style:none;margin:0;padding:0}
  .nav-subs a,.nav-subs .is-soon{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:10px 0;font-size:22px;font-weight:500;color:var(--ink);text-decoration:none}
  .nav-subs a.current{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
  .nav-subs .is-soon{color:var(--ink-3)}
  .nav-subs .is-soon small{font-size:13px;font-weight:500;white-space:nowrap}
}
@media(max-width:420px){.brand{letter-spacing:.22em}.brand.brand-word{letter-spacing:.03em;font-size:18px}.brand-mark{margin-left:.45em}.nav-icons{gap:12px}}

/* ---- family landing pages ----------------------------------------------- */
.family-hero h1{max-width:18ch}
.family-buy{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  justify-content:center;margin:30px 0 0}
.family-from{font-size:16px;color:var(--ink-2)}
.family-soon{font-size:16px;font-weight:500}
.family-shot{margin:clamp(44px,6vw,72px) auto 0;max-width:var(--shell)}
.family-shot img{border-radius:20px;width:100%}
.family-shot-empty{border:1px dashed var(--line);border-radius:20px;
  padding:60px 30px;background:var(--page-2)}
.family-shot-empty p{margin:0;font-size:.88rem;color:var(--ink-3);max-width:44ch;
  margin-inline:auto}

.family-features{max-width:var(--shell);margin:0 auto;display:grid;
  grid-template-columns:repeat(2,1fr);gap:34px;text-align:left}
.family-feature{background:var(--page-2);border-radius:20px;
  padding:clamp(28px,3.4vw,42px)}
.family-feature h2{margin:12px 0 10px;font-size:24px;letter-spacing:-.01em;
  text-align:left;max-width:none}
.family-feature p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.family-feature .fact-figure{color:var(--brass)}
@media(max-width:820px){.family-features{grid-template-columns:1fr;gap:22px}}

/* ---- the shop, scoped to one family -------------------------------------- */
.shop-scope{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  align-items:baseline;margin:22px 0 0;font-size:.88rem;color:var(--ink-2)}
.shop-scope strong{color:var(--ink);font-weight:600}
.shop-scope a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.shop-scope a:hover{color:var(--ink);border-color:var(--ink)}
/* A family that carries a caution — today only the pendant, which is the one
   lamp in the range that meets the building's own wiring. */
.family-note{max-width:var(--text);margin:30px auto 0;padding:18px 22px;
  border-left:2px solid var(--brass);background:var(--page-2);border-radius:0 12px 12px 0;
  text-align:left;font-size:.92rem;line-height:1.6;color:var(--ink-2)}

/* ==========================================================================
   Sonos components: the home page, product cards, the why-buy band and the
   footer. Prefixed sx- (site) and ts- (store) so they cannot reach the older
   rules above by accident.
   ========================================================================== */
.sx-shell{width:min(var(--shell),100% - 2 * var(--pad));margin-inline:auto}
.sx-h{margin:0;max-width:none;text-align:left;font-size:clamp(32px,4.4vw,64px);
  font-weight:500;line-height:1.2;letter-spacing:-.02em}
.sx-center{text-align:center;margin-inline:auto}
.sx-giant{margin:0 auto;max-width:14ch;font-size:clamp(40px,6.6vw,96px);line-height:1.15}
.sx-lead{margin:24px 0 0;max-width:46ch;font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--ink-2)}
.sx-actions{margin:48px 0 0;text-align:center}

/* A photograph slot. Empty ones are only ever drawn for the owner. */
.sx-media{margin:0;overflow:hidden;border-radius:20px;background:var(--page-2)}
.sx-media img{width:100%;height:100%;object-fit:cover}
.sx-media-empty{display:flex;align-items:center;justify-content:center;min-height:280px;
  padding:32px;border:2px dashed var(--line);background:transparent;text-align:left}
.sx-media-empty span{display:flex;flex-direction:column;gap:8px;max-width:40ch;font-size:15px;color:var(--ink-2)}
.sx-media-empty b{color:var(--ink);font-weight:600}
.sx-media-empty em{font-style:normal;font-size:13px;color:var(--ink-3)}
/* The link inherits the panel's text colour, so it reads on the black hero
   and the black sections as well as on white. */
.sx-media-empty a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sx-hero>.sx-media-empty a,.sx-dark .sx-media-empty a,.sx-promo>.sx-media-empty a{color:#fff}

/* ---- hero ---------------------------------------------------------------- */
.sx-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(520px,calc(100svh - 128px),900px);background:#000;color:#fff;
  text-align:center;overflow:hidden}
.sx-hero>.sx-media{position:absolute;inset:0;border-radius:0;background:#000}
.sx-hero>.sx-media-empty{border-color:#555;align-items:flex-start;justify-content:flex-start}
.sx-hero>.sx-media-empty span{color:#bfbfbf}
.sx-hero>.sx-media-empty b{color:#fff}
.sx-hero.has-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%)}
.sx-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:32px;padding:0 var(--pad) clamp(56px,8vw,104px)}
/* Each line of the headline is one sentence; sized so the longer one fits on
   a single line at desktop widths instead of leaving a word on its own. */
.sx-hero h1{max-width:none;color:#fff;font-size:clamp(36px,4.3vw,68px);line-height:1.12}

/* ---- the charcoal promotion card -------------------------------------------- */
.sx-promo{display:grid;grid-template-columns:1fr;min-height:345px;margin:48px 0 0;
  border-radius:50px;overflow:hidden;background:var(--charcoal);color:#fff}
.sx-promo.has-media{grid-template-columns:1fr 1fr}
.sx-promo-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:16px;padding:clamp(32px,4.4vw,64px)}
.sx-promo .sx-promo-title{margin:0;max-width:none;text-align:left;color:#fff;
  font-size:clamp(28px,2.8vw,40px);font-weight:400;line-height:1.2;letter-spacing:-.01em}
.sx-promo p{margin:0;max-width:52ch;font-size:16px;line-height:1.5;color:#e6e6e6}
.sx-promo .btn{margin-top:8px}
.sx-promo>.sx-media{border-radius:0;min-height:100%;background:#1f1f1f}
.sx-promo>.sx-media-empty{border-color:#555;border-radius:0 50px 50px 0}
.sx-promo>.sx-media-empty span{color:#bfbfbf}
.sx-promo>.sx-media-empty b{color:#fff}

/* ---- statement and splits ---------------------------------------------------- */
.sx-statement{padding:clamp(96px,11vw,160px) 0 clamp(24px,3vw,48px);text-align:center}
.sx-statement .sx-lead{margin-inline:auto}
.sx-split{display:grid;grid-template-columns:5fr 7fr;align-items:center;
  gap:clamp(32px,6vw,96px);padding:clamp(48px,6vw,96px) 0}
.sx-split-rev{grid-template-columns:7fr 5fr}
.sx-split-rev .sx-split-copy{order:2}
/* Without its photograph a split becomes an editorial row - heading on the
   left, copy on the right - rather than a column of text with half the page
   empty beside it. Uploading the photograph turns it back into a split. */
.sx-split.no-media{grid-template-columns:5fr 7fr;align-items:start;row-gap:0}
.sx-split.no-media .sx-split-copy{display:contents}
.sx-split.no-media .sx-h{grid-column:1;grid-row:1 / span 4}
.sx-split.no-media .sx-split-copy>:not(.sx-h){grid-column:2;justify-self:start}
.sx-split.no-media .sx-lead{margin-top:10px;max-width:52ch}
.sx-split>.sx-media{aspect-ratio:4/5}
.sx-split .btn{margin-top:32px}
.sx-chips{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.sx-chip{display:inline-flex;align-items:baseline;gap:12px;padding:14px 20px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px;color:var(--ink-2)}
.sx-chip b{font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}

/* ---- black sections ------------------------------------------------------- */
.sx-dark{background:#000;color:#fff;padding:clamp(24px,3vw,48px) 0}
.sx-dark .sx-h{color:#fff}
.sx-dark .sx-lead{color:#d6d6d6}
.sx-dark .sx-media{background:#1a1a1a}
.sx-dark .sx-media-empty{border-color:#555}
.sx-dark .sx-media-empty span{color:#bfbfbf}
.sx-dark .sx-media-empty b{color:#fff}

/* ---- carousel ("Play your way") ---------------------------------------------- */
.sx-carousel{padding:clamp(48px,6vw,96px) 0}
.sx-carousel-head{margin-bottom:8px}
.sx-rail-wrap{position:relative;
  --rail-pad:calc((100% - min(var(--shell),100% - 2 * var(--pad))) / 2)}
.sx-rail-nav{display:flex;justify-content:flex-end;gap:10px;padding:0 var(--rail-pad) 20px;min-height:60px}
.sx-round{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0 0 3px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  font-size:24px;line-height:1;cursor:pointer;transition:border-color .2s}
.sx-round:hover{border-color:var(--ink)}
.sx-round[hidden]{display:inline-flex;visibility:hidden}
.sx-rail-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:0 var(--rail-pad) 8px;
  scroll-padding-inline:var(--rail-pad)}
.sx-rail-track::-webkit-scrollbar{display:none}
.sx-rail-track:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sx-slide{flex:0 0 clamp(280px,32vw,456px);scroll-snap-align:start;display:flex;flex-direction:column;
  color:var(--ink);text-decoration:none}
.sx-slide-media{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;
  border-radius:20px;overflow:hidden;background:var(--page-2);color:var(--ink)}
.sx-slide-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sx-slide:hover .sx-slide-media img{transform:scale(1.03)}
.sx-slide-title{margin-top:20px;font-size:21px;font-weight:500;line-height:1.3}
.sx-slide-text{margin-top:4px;font-size:16px;line-height:1.4;color:var(--ink-2)}
.sx-slide-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px}
.sx-slide:hover .sx-slide-link{text-decoration:underline;text-underline-offset:3px}

/* ---- this season ---------------------------------------------------------------- */
.sx-season{padding:clamp(48px,6vw,96px) 0}
.sx-row-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:40px}

/* ---- shop by kind of lamp ("Start your system") ------------------------------------ */
.sx-start{padding:clamp(72px,8vw,120px) 0}
.sx-start-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:48px}
.sx-start-card{display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:40px 16px 32px;border:1px solid var(--line-2);border-radius:20px;
  color:var(--ink);text-decoration:none;text-align:center;font-size:16px;transition:border-color .2s}
.sx-start-card:hover{border-color:var(--ink)}
.sx-start-media{display:flex;align-items:center;justify-content:center;height:160px}
.sx-start-media img{max-height:160px;width:auto;object-fit:contain}

/* ---- product cards (store, home, family pages, "you may also like") ------------- */
.ts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,3vw,48px) clamp(16px,2vw,24px)}
.ts-grid-3{grid-template-columns:repeat(3,1fr)}
.ts-card{margin:0}
.ts-card-link{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.ts-card-media{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:5/4;border-radius:20px;overflow:hidden;background:var(--page-2);color:var(--ink)}
.ts-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ts-card-link:hover .ts-card-media img{transform:scale(1.03)}
/* A lamp's still is the whole lamp on transparent: fit it, never crop it.
   Here, not in store.css, because home and family pages show these cards
   without loading the store layer. */
.ts-card-media img.tl-card-still{object-fit:contain;padding:20px;box-sizing:border-box}
.ts-card-empty{display:flex;opacity:.55}
.ts-badge{display:inline-block;padding:4px 10px;border-radius:80px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap}
.ts-card-media .ts-badge{position:absolute;top:16px;right:16px;z-index:1}
.ts-card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:20px}
.ts-card-foot{margin-top:8px;align-items:flex-end}
.ts-card-name{font-size:clamp(21px,1.8vw,24px);font-weight:500;line-height:1.25}
.ts-card-link:hover .ts-card-name{text-decoration:underline;text-underline-offset:4px}
.ts-card-desc{max-width:34ch;font-size:16px;line-height:1.4;color:var(--ink-2)}
.ts-card-buy{display:flex;flex:none;align-items:center;gap:14px}
.ts-swatches{display:flex;gap:6px}
.ts-swatch{width:20px;height:20px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ts-card-price{font-size:16px;white-space:nowrap}
.ts-stars{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.ts-stars .ts-ico{color:#e0a12b}
.ts-grid-3 .ts-card-foot{flex-direction:column;align-items:flex-start;gap:12px}

/* ---- why buy here ------------------------------------------------------------------- */
.sx-why{background:var(--page-2);padding:clamp(56px,6vw,80px) 0}
.sx-why-title{margin:0 0 48px;max-width:none;text-align:center;font-size:clamp(24px,2.2vw,32px)}
.sx-why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.sx-why-list li{display:flex;flex-direction:column;gap:6px}
.sx-why-list b{margin-top:12px;font-size:21px;font-weight:500;line-height:1.4}
.sx-why-list span{font-size:18px;line-height:1.4;color:var(--ink-2)}
.sx-why-list a{color:var(--ink);text-underline-offset:3px}

/* ---- footer --------------------------------------------------------------------- */
.sx-foot{background:var(--charcoal);color:#f5f5f5;padding:clamp(56px,6vw,96px) 0 40px}
.sx-foot a{color:#bfbfbf;text-decoration:none}
.sx-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sx-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid #4a4a4a}
.sx-foot-top h2{margin:0;max-width:none;text-align:left;color:#fff;font-size:clamp(28px,3vw,42px)}
.sx-foot-top p{margin:12px 0 0;max-width:56ch;font-size:16px;color:#bfbfbf}
.sx-foot .btn.on-dark{color:#fff}
.sx-foot .btn.on-dark:hover{color:#000;text-decoration:none}
.sx-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:48px 0}
.sx-foot-cols h3{margin:0 0 16px;font-size:16px;font-weight:700;color:#f5f5f5}
.sx-foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sx-foot-cols li{font-size:16px}
.sx-foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:24px;border-top:1px solid #4a4a4a;font-size:14px;color:#bfbfbf}
.sx-foot-legal p{margin:0}

/* ---- narrow screens ------------------------------------------------------------- */
/* ---- contact (Sonos's contact page) ---------------------------------------
   Title left at full size, grey cards for each way in, then the common
   questions as a ruled list. */
.sx-contact{padding:0 0 clamp(72px,8vw,120px)}
.sx-page-head{padding:clamp(56px,7vw,112px) 0 clamp(40px,4vw,64px)}
.sx-page-head .sx-giant{margin:0;max-width:14ch;text-align:left}
.sx-owner-note{margin:0 0 32px;max-width:none;text-align:left}
.sx-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.sx-way{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(28px,3vw,40px);border-radius:20px;background:var(--page-2)}
.sx-way svg{color:var(--ink)}
.sx-way h2{margin:12px 0 0;max-width:none;font-size:16px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.sx-way-value{margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:500;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink)}
.sx-way p:not(.sx-way-value):not(.sx-way-figure){margin:0;max-width:40ch;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sx-way .btn{margin-top:auto}
.sx-way p+.btn{margin-top:20px}
.sx-faq{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);
  margin-top:clamp(72px,9vw,144px)}
.sx-faq-head .sx-lead{margin-top:16px}
.sx-faq-list{border-top:1px solid var(--line)}
.sx-faq-item{border-bottom:1px solid var(--line)}
.sx-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:28px 0;cursor:pointer;list-style:none;font-size:21px;font-weight:500;line-height:1.3}
.sx-faq-item summary::-webkit-details-marker{display:none}
.sx-faq-item summary svg{flex:none;transition:transform .3s ease}
.sx-faq-item[open] summary svg{transform:rotate(180deg)}
.sx-faq-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.sx-faq-item p{margin:0 0 16px;max-width:60ch;font-size:18px;line-height:1.5;color:var(--ink-2)}
.sx-faq-item summary+p{margin-top:-8px}
.sx-faq-item p:last-child{margin-bottom:28px}
.sx-faq-more{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0}
@media(max-width:959px){.sx-faq{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sx-faq-item summary svg{transition:none}}

/* ---- Delivery and About (Sonos's policy and story pages) -------------------
   Same parts as Contact: the big left title, grey cards, a statement on black,
   editorial rows and the ruled question list. */
.sx-policy,.sx-about{padding:0 0 clamp(72px,8vw,120px)}
.sx-eyebrow{margin:0 0 16px;font-size:16px;font-weight:500;color:var(--ink-2)}
.sx-about .sx-page-head .sx-giant{max-width:18ch}
.sx-ways-3{grid-template-columns:repeat(3,1fr)}
.sx-ways-2{grid-template-columns:repeat(2,1fr)}
.sx-way h3{margin:4px 0 0;max-width:none;font-size:21px;font-weight:500;line-height:1.3;color:var(--ink)}
.sx-way-figure{margin:0;font-size:clamp(36px,3.6vw,56px);font-weight:500;line-height:1.05;
  letter-spacing:-.03em;color:var(--ink)}
.sx-band{margin-top:clamp(72px,9vw,144px);padding:clamp(80px,10vw,160px) 0}
.sx-statement-dark{text-align:center}
.sx-statement-dark .sx-giant{max-width:16ch;color:#fff}
.sx-statement-dark .sx-lead{margin:24px auto 0;max-width:56ch}
.sx-about-facts{margin-top:clamp(72px,9vw,144px)}
.sx-about-facts .sx-ways{margin-top:48px}
.sx-body{margin:20px 0 0;max-width:60ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
.sx-about .sx-split.no-media{margin-top:clamp(24px,3vw,48px)}
.sx-about .sx-promo{margin-top:clamp(72px,9vw,144px)}
.sx-about .about-photo{max-width:none;margin:0;padding:0;aspect-ratio:var(--ratio,16/9)}
.sx-about .sx-split.no-media+.about-photo,.sx-about .sx-about-facts~.about-photo{margin-top:clamp(48px,6vw,96px)}
.sx-about .about-photo img{height:100%;object-fit:cover;border-radius:0}
.sx-about .about-photo.is-empty{border-radius:20px}
.sx-about .about-photo.is-empty .about-photo-brief{height:100%;aspect-ratio:auto;border-radius:20px}
.sx-split.no-media .about-copy{grid-column:2;margin:10px 0 0;max-width:60ch;font-size:18px;line-height:1.55}
.sx-split.no-media .about-prompt{grid-column:2;margin:10px 0 0}
.sx-split.no-media .signature{grid-column:2;margin:16px 0 0}
@media(max-width:959px){
  .sx-ways-3{grid-template-columns:repeat(2,1fr)}
  .sx-split.no-media .about-copy,.sx-split.no-media .about-prompt,.sx-split.no-media .signature{grid-column:1}
}
@media(max-width:639px){
  .sx-ways-3,.sx-ways-2{grid-template-columns:1fr}
}

/* ---- family pages (Sonos's category intro) ---------------------------------- */
.sx-family{padding:0 0 clamp(72px,8vw,120px)}
.sx-family .sx-page-head .sx-giant{max-width:18ch}
.sx-family-buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin:32px 0 0}
.sx-family-price{font-size:16px;color:var(--ink-2)}
.sx-family-price b{font-weight:500;color:var(--ink)}
.sx-family-soon{display:inline-flex;align-items:center;padding:10px 22px;border:2px solid var(--line);
  border-radius:80px;font-size:16px;font-weight:500;color:var(--ink-2)}
.sx-family-shot{aspect-ratio:16/9}
.sx-family-shot img{height:100%}
.sx-family-features{margin-top:clamp(48px,6vw,96px)}
.sx-way h2.sx-way-title{margin:4px 0 0;font-size:21px;font-weight:500;line-height:1.3;color:var(--ink)}
.sx-box{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);margin-top:clamp(72px,9vw,144px)}
.sx-box-head .sx-lead{margin-top:16px}
.sx-specs{margin:0;border-top:1px solid var(--line)}
.sx-specs div{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.sx-specs dt{font-size:18px;font-weight:500;color:var(--ink)}
.sx-specs dd{margin:0;font-size:18px;line-height:1.5;color:var(--ink-2)}
.sx-caution{margin:24px 0 0;padding:24px 28px;border-radius:20px;background:var(--page-2);
  font-size:16px;line-height:1.55;color:var(--ink-2)}
.sx-caution b{display:block;margin-bottom:6px;font-weight:500;color:var(--ink)}
.sx-family .sx-season{padding-top:clamp(72px,9vw,144px)}
.sx-family .sx-row-head .sx-lead{margin-top:12px}
.sx-family .sx-promo{margin-top:clamp(72px,9vw,144px)}
@media(max-width:959px){.sx-box{grid-template-columns:1fr}}
@media(max-width:639px){.sx-specs div{grid-template-columns:1fr;gap:6px}}

@media(max-width:959px){
  .sx-split,.sx-split-rev,.sx-split.no-media{grid-template-columns:1fr;gap:32px}
  .sx-split.no-media .sx-split-copy{display:block}
  .sx-split-rev .sx-split-copy{order:0}
  .sx-split>.sx-media{aspect-ratio:4/3}
  .sx-promo.has-media{grid-template-columns:1fr}
  .sx-promo>.sx-media{aspect-ratio:16/9}
  .sx-promo>.sx-media-empty{border-radius:0 0 50px 50px}
  .ts-grid-3{grid-template-columns:repeat(2,1fr)}
  .sx-start-grid{grid-template-columns:repeat(3,1fr)}
  .sx-why-list{grid-template-columns:repeat(2,1fr)}
  .sx-foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:639px){
  .ts-grid,.ts-grid-3{grid-template-columns:1fr}
  .ts-card-foot{flex-direction:column;align-items:flex-start;gap:12px}
  .sx-promo{border-radius:28px;min-height:0}
  .sx-promo>.sx-media-empty{border-radius:0 0 28px 28px}
  .sx-start-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sx-start-card{padding:28px 12px 24px}
  .sx-why-list{grid-template-columns:1fr;gap:28px}
  .sx-row-head{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .sx-rail-track{scroll-behavior:auto}
  .sx-slide-media img,.ts-card-media img{transition:none}
}

/* ---- scroll to take it apart (home) --------------------------------------
   After sonos.com's exploded speaker: a very large centred headline, the
   copy and its chip on the left, the product on the right on plain white.
   Tall section, sticky frame: scroll drives assets/explode.js. Until the
   script is running the section is ordinary height, so a failed load leaves
   a short text section rather than two screens of empty white. */
.sx-explode{position:relative;background:#fff;color:var(--ink)}
.sx-explode.is-live{height:280vh}
.sx-explode-pin{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,2vh,24px);
  padding-block:clamp(32px,6vh,72px) clamp(16px,3vh,32px)}
.sx-explode.is-live .sx-explode-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  height:calc(100svh - var(--nav-h));overflow:hidden}
.sx-explode-title{justify-self:center;max-width:none;margin:0 auto;padding:0 var(--pad);text-align:center;font-size:clamp(44px,6.4vw,96px);
  font-weight:500;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.sx-explode-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;
  gap:clamp(24px,4vw,64px);min-height:0}
.sx-explode-copy{max-width:440px}
.sx-explode-copy .sx-h{font-size:clamp(30px,3.4vw,48px);line-height:1.05;margin:0 0 16px}
.sx-explode-copy .sx-lead{margin:0 0 24px}
.sx-explode-stage{position:relative;display:none;height:100%;min-height:0}
.sx-explode.is-live .sx-explode-stage{display:block}
.sx-explode-stage canvas{display:block;width:100%;height:100%}
.sx-explode-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;margin-top:-.6em;
  font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0}
.sx-explode-tag::before{content:"";width:28px;border-top:1px solid currentColor;opacity:.45}
.sx-explode-hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:13px;
  color:var(--ink-2);opacity:calc(1 - var(--explode,0) * 3);white-space:nowrap}
@media(max-width:899px){
  .sx-explode-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:12px}
  .sx-explode-stage{order:-1}
  .sx-explode-copy{max-width:none}
  .sx-explode-copy .eyebrow{margin-bottom:6px}
  .sx-explode-copy .sx-h{font-size:28px;margin-bottom:8px}
  .sx-explode-copy .sx-lead{font-size:16px;margin-bottom:12px}
  .sx-explode-tag{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .sx-explode.is-live{height:auto}
  .sx-explode.is-live .sx-explode-pin{position:static;height:auto}
  .sx-explode-stage{height:70vh}
  .sx-explode-hint{display:none}
}

/* ---- family intro, after apple.com/homepod-mini (inc/family-page.php) -------------
   A sticky bar under the nav, the range lined up, one headline, then the
   claims in very large type, each fading in as it scrolls into view - in a
   gradient of the lamps' own colours (deepened from the translucent brown,
   pink and grey so the words stay legible on white). */
.ap-bar{position:sticky;top:var(--nav-h);z-index:50;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border-bottom:1px solid rgba(0,0,0,.08)}
.ap-bar-in{max-width:var(--shell);margin:0 auto;padding:0 clamp(16px,4vw,40px);height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.ap-bar-name{font-size:21px;font-weight:600;color:#1d1d1f;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.ap-bar-links{display:flex;align-items:center;gap:22px;font-size:12px}
.ap-bar-links a{color:#1d1d1f;text-decoration:none}
.ap-bar-links a:hover{color:#0071e3}
.ap-bar-links .ap-bar-buy{background:#0071e3;color:#fff;border-radius:980px;padding:5px 12px}
.ap-bar-links .ap-bar-buy:hover{background:#0077ed;color:#fff}
.ap-bar-soon{color:#6e6e73}
@media (max-width:560px){.ap-bar-links a:not(.ap-bar-buy){display:none}}

.ap-intro{text-align:center;padding:clamp(40px,6vw,84px) 0 clamp(56px,8vw,120px);background:#fff}
.ap-title{margin:0 auto;font-size:clamp(40px,6.5vw,80px);font-weight:600;letter-spacing:-.025em;line-height:1.05;color:#1d1d1f}
.ap-hero{margin:clamp(20px,3vw,40px) auto 0;max-width:1400px;padding:0 clamp(0px,2vw,24px)}
.ap-hero img{display:block;width:100%;height:auto;border-radius:clamp(0px,1.4vw,24px)}
.ap-claims{max-width:980px;margin:clamp(56px,9vw,140px) auto 0;padding:0 20px;display:flex;flex-direction:column;
  gap:clamp(20px,3vw,40px)}
.ap-headline{margin:0 0 clamp(16px,3vw,48px);font-size:clamp(34px,5.6vw,80px);font-weight:600;line-height:1.05;
  letter-spacing:-.025em;color:#1d1d1f;text-wrap:balance}
.ap-claim{margin:0;font-size:clamp(34px,5.6vw,80px);font-weight:600;line-height:1.05;letter-spacing:-.025em;
  text-wrap:balance;background:linear-gradient(90deg,#a8724a 0%,#d8665d 45%,#c76f8e 70%,#6f6c75 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ap-close{margin:clamp(64px,9vw,140px) auto 0;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:20px}
.ap-swatches{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ap-swatch{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ap-swatch.is-glow{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 10px 1px color-mix(in srgb,var(--c) 70%,transparent)}
.ap-swatch.is-glow + .ap-swatch:not(.is-glow){margin-left:12px}
.ap-close-line{margin:0;font-size:clamp(21px,2.4vw,28px);font-weight:600;color:#1d1d1f;letter-spacing:-.01em;text-wrap:balance}
.ap-buy{display:inline-flex;align-items:center;min-height:44px;padding:11px 22px;border-radius:980px;background:#0071e3;
  color:#fff;font-size:17px;text-decoration:none}
.ap-buy:hover{background:#0077ed;color:#fff}
/* revealed on scroll, only once the script is running: no script, no hiding */
.ap-claims.is-live .ap-headline,.ap-intro.is-run .ap-tile{opacity:0;transform:translateY(32px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ap-claims.is-live .is-in,.ap-intro.is-run .ap-tile.is-in{opacity:1;transform:none}

/* ---- the marketing intro, scroll-driven (theme 1.10.0) ---------------------
   site.js marks .ap-intro live and feeds it scroll progress as custom
   properties: --p on the hero run, --fill on each claim, --lit on the
   day/night run. Nothing below the "live" selectors applies without it. */
.ap-intro.is-live .ap-hero-run{height:175vh}
.ap-intro.is-live .ap-hero-pin{position:sticky;top:calc(var(--nav-h) + 52px);height:calc(100vh - var(--nav-h) - 52px);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.ap-intro.is-live .ap-title{opacity:calc(1 - var(--p,0) * 1.8);transform:translateY(calc(var(--p,0) * -48px))}
.ap-intro.is-live .ap-hero{width:calc(84% + 16% * var(--p,0));max-width:none;padding:0;margin-top:clamp(16px,2.4vw,32px);
  transform:scale(calc(1 + .06 * var(--p,0)))}
.ap-intro.is-live .ap-hero img{max-height:calc(100vh - var(--nav-h) - 52px - 120px);object-fit:cover;
  border-radius:calc(24px * (1 - var(--p,0)))}
/* each claim fills with the shades' colours as it passes, grey until then */
.ap-intro.is-live .ap-claim{background:linear-gradient(#d2d2d7,#d2d2d7) right / calc((1 - var(--fill,0)) * 100%) 100% no-repeat,
  linear-gradient(90deg,#a8724a 0%,#d8665d 45%,#c76f8e 70%,#6f6c75 100%);-webkit-background-clip:text;background-clip:text}

.ap-sec-title{margin:0 auto clamp(24px,3vw,40px);font-size:clamp(32px,4.4vw,56px);font-weight:600;letter-spacing:-.02em;
  line-height:1.05;color:#1d1d1f;text-align:left;text-wrap:balance}
/* "Get the highlights": a rail of tall photographs, the line on top */
.ap-high{margin-top:clamp(96px,12vw,180px);text-align:left}
.ap-high-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:4px max(20px,calc((100vw - var(--shell)) / 2 + 20px));scroll-padding:0 max(20px,calc((100vw - var(--shell)) / 2 + 20px))}
.ap-high-track::-webkit-scrollbar{display:none}
.ap-high-card{position:relative;flex:0 0 min(78vw,400px);margin:0;scroll-snap-align:start;border-radius:28px;overflow:hidden;background:#1d1d1f}
.ap-high-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ap-high-card figcaption{position:absolute;inset:0 0 auto;margin:0;padding:28px 28px 64px;color:#fff;font-family:"Inter",sans-serif;text-transform:none;font-size:clamp(19px,1.6vw,22px);
  font-weight:600;line-height:1.2;letter-spacing:-.01em;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}
.ap-high-nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:20px}
.ap-note{margin:0;font-size:12px;color:#6e6e73}
.ap-high-btns{display:flex;gap:12px}
.ap-high-btns button{width:36px;height:36px;border:0;border-radius:50%;background:#e8e8ed;color:#1d1d1f;font-size:22px;
  line-height:1;cursor:pointer}
.ap-high-btns button:hover{background:#dcdce1}
/* Day and night: the same lamp, fading from daylight to lit as it scrolls */
.ap-dn{margin-top:clamp(96px,12vw,180px);text-align:left}
.ap-dn-pin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;
  max-width:var(--shell);margin:0 auto;padding:0 20px}
.ap-dn-lead{margin:0 0 28px;font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:#6e6e73;max-width:30em}
.ap-dn-state{display:inline-flex;gap:4px;margin:0;padding:4px;border-radius:980px;background:#f0f0f3;font-size:14px;font-weight:600}
.ap-dn-state span{padding:6px 16px;border-radius:980px}
.ap-dn-state .is-day{background:rgba(255,255,255,calc(1 - var(--lit,0)));color:#1d1d1f}
.ap-dn-state .is-lit{background:rgba(29,29,31,var(--lit,0));color:color-mix(in srgb,#fff calc(var(--lit,0) * 100%),#1d1d1f)}
.ap-dn-frame{position:relative;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap-dn-frame img{display:block;width:100%;height:auto;border-radius:24px}
.ap-intro.is-live .ap-dn{height:240vh}
.ap-intro.is-live .ap-dn-pin{position:sticky;top:calc(var(--nav-h) + 52px);height:calc(100vh - var(--nav-h) - 52px)}
.ap-intro.is-live .ap-dn-frame{display:block;height:calc(100vh - var(--nav-h) - 52px - 64px);aspect-ratio:4/5;max-width:100%;
  justify-self:center;border-radius:28px;overflow:hidden;background:#111}
.ap-intro.is-live .ap-dn-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.ap-intro.is-live .ap-dn-lit{opacity:var(--lit,0)}
.ap-dn.is-wide .ap-dn-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start}
.ap-intro.is-live .ap-dn.is-wide .ap-dn-frame{aspect-ratio:16/9;height:auto;max-height:100%;width:100%}
/* the take-apart, inside the intro: below the family bar, left-aligned */
.ap-explode{margin-top:clamp(64px,8vw,120px);text-align:left}
.ap-explode.is-live .sx-explode-pin{top:calc(var(--nav-h) + 52px);height:calc(100vh - var(--nav-h) - 52px)}
.sx-explode-paint{display:flex;align-items:center;gap:14px;margin-top:22px}
.sx-explode-colour{min-width:6em;font-size:14px;color:#6e6e73}
.sx-explode-swatches{display:flex;flex-wrap:wrap;gap:10px}
.sx-explode-swatch{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.sx-explode-swatch.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px #1d1d1f}
/* the figures, on grey tiles */
.ap-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin-top:clamp(80px,10vw,160px)}
.ap-tile{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:clamp(180px,18vw,260px);
  padding:clamp(22px,2.6vw,36px);border-radius:28px;background:#f5f5f7;text-align:left}
.ap-tile b{font-size:clamp(40px,4.6vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(90deg,#a8724a,#d8665d 55%,#c76f8e);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-tile span{font-size:17px;line-height:1.3;color:#6e6e73}
@media (max-width:900px){
  .ap-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-dn-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:16px}
  .ap-dn-lead{margin-bottom:14px;font-size:17px}
  .ap-intro.is-live .ap-dn-frame{height:auto;max-height:100%;width:100%}
}
@media (max-width:560px){
  .ap-intro.is-live .ap-hero-run{height:140vh}
  .ap-intro.is-live .ap-hero-pin{justify-content:flex-start;padding-top:28px}
  .ap-intro.is-live .ap-hero img{aspect-ratio:4/3}
}
.ap-range{margin-top:clamp(48px,6vw,88px);text-align:left}

/* ---- sub-category strip under the nav (theme 1.13.0, after dji.com) ------- */
.ap-sub{background:#f5f5f7;border-bottom:1px solid #e8e8ed}
.ap-sub-in{display:flex;justify-content:center;gap:clamp(8px,2.4vw,36px);list-style:none;margin:0 auto;
  padding:16px clamp(16px,4vw,40px) 14px;max-width:var(--shell);overflow-x:auto;scrollbar-width:none}
.ap-sub-in::-webkit-scrollbar{display:none}
.ap-sub-in li{flex:0 0 auto}
.ap-sub-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:88px;padding:4px 6px;
  color:#1d1d1f;text-decoration:none;text-align:center}
.ap-sub-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;color:#1d1d1f}
.ap-sub-icon img{width:56px;height:56px;object-fit:contain}
.ap-sub-name{font-size:13px;line-height:1.25;max-width:110px}
.ap-sub-new{font-size:12px;color:#b64400}
.ap-sub-item:hover .ap-sub-name{color:#0071e3}
@media (max-width:760px){.ap-sub-in{justify-content:flex-start}}

/* Classic, Compare, Accessories and Materials Guide: the strip's targets */
.ap-classic-title{margin-top:clamp(56px,7vw,96px)}
.ap-classic-title span{color:#6e6e73}
.ap-compare,.ap-acc,.ap-mat{margin-top:clamp(80px,10vw,140px);text-align:left;scroll-margin-top:calc(var(--nav-h) + 72px)}
#classic,#range{scroll-margin-top:calc(var(--nav-h) + 72px)}
.ap-compare-scroll{overflow-x:auto}
.ap-compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.ap-compare-table th,.ap-compare-table td{padding:16px 12px;border-top:1px solid #e8e8ed;text-align:left;vertical-align:top}
.ap-compare-table thead th{border-top:0;font-size:21px;font-weight:600;color:#1d1d1f}
.ap-compare-table tbody th{width:16%;font-weight:600;color:#6e6e73;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.ap-compare-table td{color:#1d1d1f;line-height:1.4}
.ap-acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.ap-acc-card{padding:28px;border-radius:24px;background:#f5f5f7}
.ap-acc-card h3{margin:0 0 10px;font-size:21px;font-weight:600;letter-spacing:-.01em;color:#1d1d1f}
.ap-acc-card p{margin:0;font-size:15px;line-height:1.45;color:#424245}
.ap-acc-card .ap-acc-state{margin:0 0 10px;font-size:12px;font-weight:600;color:#b64400;text-transform:uppercase;letter-spacing:.06em}
.ap-mat-intro{max-width:44em;margin:0 0 32px;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#6e6e73}
.ap-mat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 40px;margin:0}
.ap-mat-list div{padding:20px 0;border-top:1px solid #e8e8ed}
.ap-mat-list dt{margin:0 0 6px;font-size:17px;font-weight:600;color:#1d1d1f}
.ap-mat-list dd{margin:0;font-size:15px;line-height:1.5;color:#424245}

/* ---- Smart light: the smart-bulb advert in the intro (theme 1.14.0) -------- */
.ap-smart{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center;
  margin-top:clamp(96px,12vw,180px);text-align:left}
.ap-smart-badge{display:inline-block;margin:0 0 14px;padding:4px 12px;border-radius:980px;background:#fbe9dc;color:#b64400;
  font-size:13px;font-weight:600}
.ap-smart-lead{margin:0 0 28px;font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:#6e6e73;max-width:30em}
.ap-smart-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;list-style:none;margin:0;padding:0}
.ap-smart-points b{display:block;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(90deg,#d9893f,#8fb7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-smart-points span{font-size:15px;color:#6e6e73}
.ap-smart-frame{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#111;aspect-ratio:4/5}
.ap-smart-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(calc(.35 + .65 * var(--dim,1)))}
/* warm to cool: a colour wash over the photograph, from amber to a pale blue */
.ap-smart-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:color-mix(in srgb,#9cc4ff calc(var(--warm,0) * 100%),#ffb36b);opacity:.55}
.ap-smart-controls{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:10px;padding:14px 18px;border-radius:18px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ap-smart-controls[hidden]{display:none}
.ap-smart-controls label{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;font:500 12px/1.2 Inter,system-ui,sans-serif;color:#424245}
.ap-smart-controls label span:last-child{text-align:right}
.ap-smart-controls input{width:100%;accent-color:#0071e3}
@media (max-width:900px){.ap-smart{grid-template-columns:1fr}}

/* ---- Accessories page: every part on its own (theme 1.15.0) ---------------- */
.ap-sub-item.is-here .ap-sub-name{color:#1d1d1f;font-weight:600}
.ap-acc-link{color:#0066cc;font-weight:500;text-decoration:none}
.ap-acc-link:hover{text-decoration:underline}
.ap-parts-page{background:#f5f5f7;padding-bottom:clamp(64px,8vw,120px)}
.ap-parts-notices:empty{display:none}
.ap-parts-notices{margin-top:24px}
.ap-parts-head{padding:clamp(40px,6vw,88px) 0 clamp(20px,3vw,36px);max-width:46em}
.ap-parts-head .sx-eyebrow a{color:inherit;text-decoration:none}
.ap-parts-title{margin:0 0 16px;font-size:clamp(48px,7vw,96px);font-weight:600;letter-spacing:-.03em;line-height:1}
.ap-parts-lead{margin:0 0 10px;font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:#1d1d1f;text-wrap:balance}
.ap-parts-note{margin:0;font-size:15px;color:#6e6e73}
.ap-parts-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 28px}
.ap-parts-chips[hidden]{display:none}
.ap-parts-chips button{font:500 14px/1 Inter,system-ui,sans-serif;padding:10px 16px;border-radius:980px;border:1px solid #d2d2d7;
  background:#fff;color:#1d1d1f;cursor:pointer}
.ap-parts-chips button.is-on{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.ap-parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:20px}
.ap-part{background:#fff;border-radius:22px;overflow:hidden;display:flex}
.ap-part[hidden]{display:none}
.ap-part-form{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;width:100%;margin:0}
.ap-part-img{aspect-ratio:1;margin:-8px -8px 0;display:grid;place-items:center}
.ap-part-img img{width:100%;height:100%;object-fit:contain}
.ap-part-kind{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#bf4800}
.ap-part-name{margin:-6px 0 0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.ap-part-name a{color:#1d1d1f;text-decoration:none}
.ap-part-note{margin:0;font-size:14px;line-height:1.4;color:#6e6e73}
.ap-part-sizes,.ap-part-colours{border:0;margin:0;padding:0;min-width:0}
.ap-part-sizes legend,.ap-part-colours legend{padding:0;margin-bottom:8px;font-size:13px;color:#6e6e73}
.ap-part-colours legend b{color:#1d1d1f;font-weight:600}
.ap-part-sizes{display:flex;flex-wrap:wrap;gap:6px}
.ap-part-sizes label{position:relative}
.ap-part-sizes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ap-part-sizes span{display:block;padding:8px 14px;border:1px solid #d2d2d7;border-radius:12px;font-size:14px}
.ap-part-sizes input:checked + span{border-color:#0071e3;box-shadow:inset 0 0 0 1px #0071e3}
.ap-part-sizes input:focus-visible + span{outline:2px solid #0071e3;outline-offset:2px}
.ap-part-colours{display:flex;flex-wrap:wrap;gap:8px}
.ap-part-colours legend{width:100%}
.ap-part-colours .tl-swatch em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ap-part-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
.ap-part-price{margin:0;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.ap-part-add{font:500 15px/1 Inter,system-ui,sans-serif;padding:11px 18px;border-radius:980px;border:0;background:#0071e3;color:#fff;cursor:pointer}
.ap-part-add:hover{background:#0077ed}
.ap-part-add[disabled]{background:#e8e8ed;color:#6e6e73;cursor:default}
/* the product page's swatches (store.css, not loaded here), scoped to the cards */
.ap-part-colours .tl-swatch{position:relative;display:inline-flex;cursor:pointer}
.ap-part-colours .tl-swatch input{position:absolute;opacity:0;width:1px;height:1px}
.ap-part-colours .tl-swatch span{width:28px;height:28px;border-radius:50%;background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.ap-part-colours .tl-swatch input:checked+span{outline-color:#0071e3}
.ap-part-colours .tl-swatch input:focus-visible+span{outline-color:#1d1d1f}
.ap-part-colours:has(.tl-swatch:nth-of-type(13)) .tl-swatch span{width:24px;height:24px}

/* compatibility: which designs a part fits (theme 1.16.0) */
.ap-part-kind span{margin-left:6px;color:#6e6e73;font-weight:500;letter-spacing:0;text-transform:none}
.ap-part-fits{padding:12px 14px;border-radius:14px;background:#f5f5f7}
.ap-part-fits-h{margin:0 0 4px;font-size:12px;font-weight:600;color:#1d1d1f}
.ap-part-fits-list{margin:0;font-size:13px;line-height:1.45;color:#424245}

/* "See accessories" under the family page's Accessories cards (theme 1.16.1) */
.ap-acc-more{margin:32px 0 0;text-align:center}
.ap-acc-btn{display:inline-block;padding:12px 24px;border-radius:980px;background:#0071e3;color:#fff;
  font:500 17px/1.2 Inter,system-ui,sans-serif;text-decoration:none}
.ap-acc-btn:hover{background:#0077ed;color:#fff}

/* ---- guides (inc/guides.php, tpl-guide.php) --------------------------------- */
.hk-guide .sx-page-head .sx-giant{max-width:20ch}
.hk-guide-crumb{margin:0 0 14px;font-size:14px}
.hk-guide-crumb a{color:var(--ink-2);text-decoration:none}
.hk-guide-body{max-width:72ch;display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.hk-guide-sec h2{margin:0 0 14px;font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.01em}
.hk-guide-sec p{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--ink)}
.hk-guide-table{overflow-x:auto;margin-top:8px}
.hk-guide-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.hk-guide-table th,.hk-guide-table td{text-align:left;padding:11px 16px 11px 0;border-top:1px solid var(--line-2);vertical-align:top}
.hk-guide-table thead th{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-top:0}
.hk-guide-table tbody{border-bottom:1.5px solid var(--ink)}
.hk-guide-more{margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--line-2)}
.hk-guide-more h2{margin:0 0 16px;font-size:21px;font-weight:500}
.hk-guide-more ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.hk-guide-more a:not(.btn){color:var(--ink);font-size:17px}
.sx-way h2 a{color:inherit;text-decoration:none}
.sx-way h2 a:hover{text-decoration:underline}

/* ---- Materials page (inc/materials.php, tpl-materials.php, theme 1.27.3) -----
   The family intro's parts (.ap-*) on one page; only what they lack is here:
   the matte split, the colour gallery and a few lines of copy. */
.hk-mat [id]{scroll-margin-top:calc(var(--nav-h) + 96px)}
.hk-mat .ap-sec-title{margin-left:0;margin-right:0}
.hk-mat .ap-tile b{font-size:clamp(36px,4vw,56px);white-space:nowrap}
.hk-mat-eyebrow{margin:0 0 8px;font-size:clamp(17px,1.6vw,21px);font-weight:600;color:#6e6e73}
.hk-mat .ap-intro.is-live .hk-mat-eyebrow{opacity:calc(1 - var(--p,0) * 1.8)}
.hk-mat .ap-intro.is-live .ap-hero img{max-height:calc(100vh - var(--nav-h) - 52px - 160px)}
.hk-mat-fine{margin:clamp(8px,2vw,24px) auto 0;max-width:36em;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#6e6e73;text-wrap:balance}
.hk-mat-lead{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.35;color:#6e6e73;max-width:32em}
/* light through the wall without its two pictures: the copy alone, not a 240vh run */
.ap-dn.is-bare .ap-dn-pin{grid-template-columns:1fr}
.ap-intro.is-live .ap-dn.is-bare{height:auto}
.ap-intro.is-live .ap-dn.is-bare .ap-dn-pin{position:static;height:auto}
/* matte where you touch it: copy left, the parts (or a photograph) right */
.hk-mat-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(96px,12vw,180px);text-align:left}
.hk-mat-split.is-bare{grid-template-columns:1fr}
.hk-mat-photo{margin:0}
.hk-mat-photo img{display:block;width:100%;height:auto;border-radius:28px}
.hk-mat-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hk-mat-parts li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(14px,2vw,24px);border-radius:28px;background:#f5f5f7}
.hk-mat-parts img{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1;object-fit:contain}
.hk-mat-parts span{font-size:15px;font-weight:600;color:#1d1d1f}
/* every colour by name: hover, focus or a tap (site.js) shows it where the hint was */
.hk-mat-colours,.hk-mat-layers{margin-top:clamp(96px,12vw,180px);text-align:left}
.hk-sw-group{position:relative;margin-top:16px;padding:28px;border-radius:28px;background:#f5f5f7}
.hk-sw-title{margin:0 0 22px;font-size:21px;font-weight:600;letter-spacing:-.01em;color:#1d1d1f}
.hk-sw-title span{display:block;margin-top:4px;font-size:17px;font-weight:400;letter-spacing:0;color:#6e6e73}
.hk-sw-list{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
.hk-sw{display:block;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;
  font:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .2s ease}
.hk-sw-list.is-glow .hk-sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 12px 1px color-mix(in srgb,var(--c) 70%,transparent)}
.hk-sw:hover,.hk-sw:focus-visible,.hk-sw.is-on,.hk-sw-list.is-glow .hk-sw:hover,.hk-sw-list.is-glow .hk-sw:focus-visible,.hk-sw-list.is-glow .hk-sw.is-on{
  outline:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px #f5f5f7,0 0 0 4px #1d1d1f}
.hk-sw-hint,.hk-sw-name{margin:22px 0 0;font-size:17px;line-height:1.4;color:#6e6e73}
.hk-sw-name{display:none;position:absolute;left:28px;right:28px;bottom:28px;margin:0;background:#f5f5f7;font-weight:600;color:#1d1d1f;text-align:left}
.hk-sw:hover .hk-sw-name,.hk-sw:focus-visible .hk-sw-name,.hk-sw.is-on .hk-sw-name{display:block}
.hk-sw-list:hover .hk-sw.is-on:not(:hover) .hk-sw-name{display:none}
.hk-mat-note{margin:20px 0 0;font-size:14px;line-height:1.45;color:#6e6e73}
.hk-mat-layers .ap-high{margin-top:clamp(32px,4vw,56px)}
.hk-mat-guides{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 0;font-size:17px}
.hk-mat-guides a,.hk-mat-families a{color:#0071e3;text-decoration:none}
.hk-mat-guides a:hover,.hk-mat-families a:hover{text-decoration:underline}
/* one lamp, one tree: only with the owner's Tree-Nation switch on (theme 1.27.5) */
.hk-mat-trees{margin-top:clamp(96px,12vw,180px);text-align:left}
.hk-mat-families{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;list-style:none;margin:4px 0 0;padding:0;font-size:17px}
@media (min-width:901px){
  .hk-sw-list:not(.is-glow){display:grid;grid-template-columns:repeat(13,48px)}
}
@media (max-width:900px){
  .hk-mat-split{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* even rows on a phone: five across, so 10 is two rows and 25 is five */
  .hk-mat .ap-tile b{font-size:clamp(22px,7vw,36px)}
  .hk-sw-group{padding:20px}
  .hk-sw-name{left:20px;right:20px;bottom:20px}
  .hk-sw-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .hk-sw{width:100%;max-width:52px;height:auto;aspect-ratio:1;justify-self:center}
}

/* Stripe Climate badge in the footer's legal row (theme 1.27.6): Stripe's own iframe, kept to its size and never wider than the screen */
.sx-foot-climate{display:block;border:0;width:380px;max-width:100%;height:38px;color-scheme:normal}

/* Guide sheets (inc/guides.php, site.js): a guide opened over the page as an
   Apple-style sheet - a rounded white panel, centred on a wide screen, the
   full height of a phone and scrolled inside. */
html.hk-gsheet-open{overflow:hidden}
.hk-gsheet{padding:0;border:0;background:transparent;color:var(--ink);max-width:none;max-height:none;width:100%;height:100%;
  margin:0;inset:0;overflow:hidden}
.hk-gsheet[open]{display:flex;align-items:center;justify-content:center}
.hk-gsheet::backdrop{background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hk-gsheet-panel{position:relative;display:flex;flex-direction:column;width:min(760px,calc(100% - 48px));max-height:calc(100% - 64px);
  background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.28);overflow:hidden}
.hk-gsheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 28px 12px 40px;flex:none}
.hk-gsheet-title{margin:8px 0 0;font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:#1d1d1f;outline:none}
.hk-gsheet-close{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#e8e8ed;color:#1d1d1f;cursor:pointer}
.hk-gsheet-close:hover{background:#dcdce1}
.hk-gsheet-close:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.hk-gsheet-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 40px 40px;gap:28px;max-width:none}
.hk-gsheet-lead{margin:0;font-size:19px;line-height:1.45;color:#6e6e73}
.hk-gsheet .hk-guide-sec h2{font-size:21px;font-weight:600;color:#1d1d1f;max-width:none;text-wrap:pretty}
.hk-gsheet-title{max-width:none;text-wrap:pretty}
.hk-gsheet .hk-guide-sec p{font-size:16px;color:#1d1d1f}
.hk-gsheet-page{margin:0;font-size:17px}
.hk-gsheet-page a{color:#0071e3;text-decoration:none}
.hk-gsheet-page a:hover{text-decoration:underline}
.hk-gsheet[open] .hk-gsheet-panel{animation:hk-gsheet-in .28s cubic-bezier(.32,.72,0,1)}
.hk-gsheet[open]::backdrop{animation:hk-gsheet-fade .28s ease}
.hk-gsheet.is-closing .hk-gsheet-panel{animation:hk-gsheet-out .18s ease forwards}
.hk-gsheet.is-closing::backdrop{animation:hk-gsheet-fade .18s ease reverse forwards}
@keyframes hk-gsheet-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hk-gsheet-out{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes hk-gsheet-fade{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .hk-gsheet[open]{align-items:flex-end}
  .hk-gsheet-panel{width:100%;height:calc(100% - 12px);max-height:none;border-radius:14px 14px 0 0}
  .hk-gsheet-head{padding:20px 16px 8px 20px}
  .hk-gsheet-body{padding:4px 20px calc(32px + env(safe-area-inset-bottom))}
  @keyframes hk-gsheet-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes hk-gsheet-out{to{transform:translateY(100%)}}
}
@media(prefers-reduced-motion:reduce){.hk-gsheet[open] .hk-gsheet-panel,.hk-gsheet[open]::backdrop{animation:none}}

/* The lamp page's accessories rail (15 Oct 2026): the Accessories page's part
   cards, in the store's rail, then a link to the family's Accessories page. */
.tl-acc-rail .ap-part{flex:0 0 clamp(280px,26vw,340px);scroll-snap-align:start}
.tl-acc-more{margin:20px auto 0;font-size:17px}
.tl-acc-more a{color:#0071e3;text-decoration:none}
.tl-acc-more a:hover{text-decoration:underline}

/* ---- Inspire (inc/inspire.php, tpl-inspire.php) ----------------------------------------------------
   Redesigned 18 Oct 2026 after apple.com/pixelmator-pro's structure, on black: a hero with the four lamps
   in a row and one huge headline; a rounded "Get to know" gallery with dots and pause (site.js); a
   chapter per lamp - label, huge headline, story and figures - over a rail of step cards captioned
   "Bold lead. Grey text."; questions; one line and the shop. The theme's tokens are redefined inside
   .hk-insp so the shared rail and question list turn dark with it. */
.hk-insp{--ink:#f5f5f7;--ink-2:#a1a1a6;--line:#424245;--page-2:#1d1d1f;background:#000;color:#f5f5f7;
  padding-bottom:clamp(40px,6vw,80px)}
.hk-insp [id]{scroll-margin-top:calc(var(--nav-h) + 72px)}
.hk-insp .ap-bar{background:rgba(22,22,23,.8);border-bottom-color:rgba(255,255,255,.12)}
.hk-insp .ap-bar-name,.hk-insp .ap-bar-links a{color:#f5f5f7}
.hk-insp .ap-bar-links a:hover{color:#2997ff}
.hk-insp .ap-bar-links .ap-bar-buy{color:#fff}
/* hero */
.hk-insp-hero{padding-block:clamp(40px,5vw,72px) 0;text-align:center}
.hk-insp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,16px);
  max-width:min(1400px,100% - 2 * var(--pad));margin:0 auto}
.hk-insp-heropic{margin:0 auto;max-width:min(1400px,100% - 2 * var(--pad))}
.hk-insp-heropic img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:72vh;object-fit:cover;border-radius:clamp(16px,2vw,32px);background:#1d1d1f}
.hk-insp-row figure{margin:0}
.hk-insp-row img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:62vh;object-fit:cover;border-radius:clamp(14px,1.8vw,28px);background:#1d1d1f}
.hk-insp-hero-text{padding-top:clamp(40px,5vw,72px)}
.hk-insp-eyebrow{margin:0 0 16px;font-size:clamp(21px,2vw,28px);font-weight:600;color:#f5f5f7}
.hk-insp-title{margin:0 auto;font-size:clamp(60px,10.5vw,168px);line-height:1.02;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.hk-insp-lead{margin:clamp(24px,2.8vw,40px) auto 0;max-width:36em;font-size:clamp(19px,1.9vw,28px);line-height:1.42;color:#a1a1a6;text-wrap:pretty}
/* "Get to know" gallery */
.hk-insp-know{padding-top:clamp(96px,12vw,180px)}
.hk-insp-h2{margin:0 auto clamp(28px,3.4vw,48px);font-size:clamp(36px,4.6vw,64px);line-height:1.06;font-weight:600;letter-spacing:-.02em}
.hk-insp-gallery{--g-pad:calc((100% - min(var(--shell),100% - 2 * var(--pad))) / 2)}
.hk-insp-gallery-track{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:0 var(--g-pad);scroll-padding-inline:var(--g-pad)}
.hk-insp-gallery-track::-webkit-scrollbar{display:none}
.hk-insp-gallery-track:focus-visible{outline:2px solid #2997ff;outline-offset:-2px}
.hk-insp-card{flex:0 0 min(var(--shell),100% - 2 * var(--pad));scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  align-items:center;gap:clamp(20px,4vw,64px);min-height:clamp(420px,46vw,640px);padding:clamp(28px,4vw,64px);
  border-radius:clamp(20px,2.4vw,32px);background:#1d1d1f;color:#f5f5f7;text-decoration:none;overflow:hidden}
.hk-insp-card p{margin:0}
.hk-insp-card-num{font-size:15px;font-weight:600;color:#86868b;font-variant-numeric:tabular-nums}
.hk-insp-card-name{margin-top:10px!important;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:600;letter-spacing:-.025em}
.hk-insp-card-name span,.hk-insp-label span{font-size:.4em;font-weight:500;color:#86868b;letter-spacing:0;vertical-align:.5em}
.hk-insp-card-head{margin-top:clamp(14px,1.6vw,22px)!important;font-size:clamp(21px,2vw,28px);line-height:1.2;color:#a1a1a6}
.hk-insp-card-more{margin-top:clamp(20px,2.4vw,32px)!important;font-size:17px;color:#2997ff}
.hk-insp-card:hover .hk-insp-card-more{text-decoration:underline}
.hk-insp-card-pic{margin:0;align-self:stretch;display:flex;align-items:center;justify-content:center}
.hk-insp-card-pic img{display:block;width:auto;max-width:100%;max-height:clamp(360px,40vw,560px);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:clamp(14px,1.6vw,22px)}
.hk-insp-gallery-ctl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,32px)}
.hk-insp-gallery-ctl[hidden]{display:none}
.hk-insp-dots{display:flex;gap:10px;padding:14px 20px;border-radius:999px;background:#1d1d1f}
.hk-insp-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#6e6e73;cursor:pointer;transition:width .3s ease,background .3s ease}
.hk-insp-dots button[aria-current="true"]{width:40px;background:#f5f5f7}
.hk-insp-play{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#1d1d1f;color:#f5f5f7;cursor:pointer;position:relative}
.hk-insp-play::before,.hk-insp-play::after{content:"";position:absolute;top:12px;width:3px;height:12px;border-radius:1px;background:currentColor}
.hk-insp-play::before{left:13px}.hk-insp-play::after{left:20px}
.hk-insp-play.is-paused::before{left:14px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.hk-insp-play.is-paused::after{display:none}
.hk-insp-dots button:focus-visible,.hk-insp-play:focus-visible{outline:2px solid #2997ff;outline-offset:3px}
/* Japanese touches: a vermilion seal for each number, and the kanji written top to bottom on a faint
   shōji lattice beside the chapter's headline */
.hk-insp-seal{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;height:2.1em;padding:0 .3em;
  margin-right:.6em;border-radius:4px;background:#b8332a;color:#fff;font-size:.82em;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;vertical-align:.1em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.hk-insp-card-num .hk-insp-seal{font-size:14px;margin-right:0}
.hk-insp-chead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:stretch}
.hk-insp-tate{margin:0;writing-mode:vertical-rl;text-orientation:upright;align-self:start;
  padding:clamp(16px,1.6vw,24px) clamp(14px,1.4vw,22px);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:.12em;color:#e8e4dc;border:1px solid #2c2c2e;border-radius:6px;
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.06) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.06) 23px 24px),#0b0b0c}
/* a chapter per lamp */
.hk-insp-lamp{padding-top:clamp(120px,14vw,220px)}
.hk-insp-label{margin:0;display:flex;align-items:center;font-size:clamp(17px,1.5vw,21px);font-weight:600;color:#86868b}
.hk-insp-label span{font-size:1em;vertical-align:0}
.hk-insp-big{margin:clamp(12px,1.4vw,20px) 0 0;font-size:clamp(48px,7.4vw,112px);line-height:1.02;font-weight:600;letter-spacing:-.03em;text-wrap:balance;
  background:linear-gradient(90deg,#f5f5f7 40%,#a1a1a6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hk-insp-story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,96px);margin-top:clamp(28px,3.4vw,48px);align-items:start}
.hk-insp-copy{margin:0;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:#a1a1a6;max-width:32em}
.hk-insp-facts{display:flex;flex-wrap:wrap;gap:24px clamp(32px,4vw,56px);margin:0}
.hk-insp-facts dt{font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.015em;color:#f5f5f7;font-variant-numeric:tabular-nums;white-space:nowrap}
.hk-insp-facts dd{margin:6px 0 0;font-size:15px;line-height:1.35;color:#86868b}
.hk-insp .sx-rail-wrap{margin-top:clamp(40px,5vw,72px)}
.hk-insp .sx-round{background:#1d1d1f;border-color:#424245;color:#f5f5f7}
.hk-insp .sx-round:hover{border-color:#f5f5f7}
.hk-insp-step{flex:0 0 clamp(280px,30vw,400px);scroll-snap-align:start;min-width:0}
.hk-insp-pic{margin:0}
.hk-insp-pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:clamp(16px,1.8vw,24px);background:#1d1d1f}
.hk-insp-cap{margin:20px 0 0;max-width:24em;font-size:17px;line-height:1.45;color:#86868b}
.hk-insp-cap b{color:#f5f5f7;font-weight:600}
.hk-insp-more{margin:12px 0 0;font-size:17px}
.hk-insp-more a{color:#2997ff;text-decoration:none}
.hk-insp-more a:hover{text-decoration:underline}
/* questions and the close */
.hk-insp-faq{padding-top:clamp(120px,14vw,220px)}
.hk-insp-faq .sx-h{color:#f5f5f7}
.hk-insp-faq .sx-faq-item summary{color:#f5f5f7}
.hk-insp-end{padding-block:clamp(120px,14vw,200px) clamp(40px,5vw,80px);text-align:center}
.hk-insp-end .hk-insp-big{margin:0 auto 32px;max-width:14em;background:none;color:#f5f5f7}
.hk-insp-btn{display:inline-block;padding:12px 24px;border-radius:980px;background:#0071e3;color:#fff;font-size:17px;text-decoration:none}
.hk-insp-btn:hover{background:#0077ed;color:#fff}
@media (max-width:860px){
  .hk-insp-tate{font-size:36px;padding:12px 10px}
  .hk-insp-card{grid-template-columns:1fr;min-height:0;align-content:start}
  .hk-insp-card-pic img{max-height:none;width:100%}
  .hk-insp-story{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hk-insp-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(300px,100% - 2 * var(--pad))}
  .hk-insp-step{flex-basis:80%}
}