/*
Theme Name: The Light
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.0.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}
.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-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:block;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}

/* 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}
  .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}
}
@media(max-width:420px){.brand{letter-spacing:.22em}.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:120px}
.sx-start-media img{max-height:120px;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)}
.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){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:-8px 0 28px;max-width:60ch;font-size:18px;line-height:1.5;color:var(--ink-2)}
.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}}

@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}
}