/*
Theme Name: Tracery
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. */

:root{
  --page:#fbfbfd;
  --page-2:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --brass:#9a7b4f;
  --dark:#000;
  --dark-ink:#f5f5f7;
  --dark-ink-2:#a1a1a6;
  --shell:1200px;
  --text:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font:400 17px/1.5 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
img{max-width:100%;display:block}

/* ---- nav --------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;height:48px;
  background:rgba(251,251,253,.82);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--shell);margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;gap:26px}
.brand{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  color:var(--ink)}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:.78rem;font-weight:400}
.nav nav a{color:var(--ink);text-decoration:none;opacity:.85;transition:opacity .2s}
.nav nav a:hover{opacity:1}

/* ---- stages ------------------------------------------------------------ */
.stage{padding:clamp(80px,11vw,150px) 22px;text-align:center}
.stage.tight{padding-top:clamp(56px,7vw,96px)}
.stage.light{background:var(--page)}
.stage.dark{background:var(--dark);color:var(--dark-ink)}
.stage.dark .deck{color:var(--dark-ink-2)}
.stage.dark figcaption{color:var(--dark-ink-2)}

.eyebrow{margin:0 0 14px;font-size:.8rem;font-weight:500;color:var(--brass);
  letter-spacing:.02em}

h1,h2{margin:0 auto;font-weight:600;line-height:1.05;
  letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.8vw,4.3rem);max-width:24ch}
h2{font-size:clamp(2.1rem,4.6vw,3.35rem);max-width:22ch}
h2.huge{font-size:clamp(2.4rem,5.6vw,4.1rem);max-width:24ch}
h2.small{font-size:clamp(1.4rem,2.4vw,1.7rem);letter-spacing:-.018em}

.deck{max-width:var(--text);margin:22px auto 0;font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.48;color:var(--ink-2);font-weight:400}
.deck.spaced{margin-top:14px}
.statement{margin:38px auto 0;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;
  letter-spacing:-.022em}

.links{display:flex;gap:30px;justify-content:center;margin:26px 0 0;font-size:1.02rem}
.links a{color:var(--brass);text-decoration:none}
.links a:hover{text-decoration:underline}

/* ---- 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)}

/* ---- footer ------------------------------------------------------------ */
.foot{background:var(--page-2);border-top:1px solid var(--line);padding:30px 22px;
  font-size:.75rem;color:var(--ink-3);text-align:center}
.foot p{margin:0 0 6px}
.attrib{opacity:.8}

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

@media(max-width:900px){
  .figures{grid-template-columns:1fr;gap:36px}
  .nav nav{display:none}
}
@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}
.cart-link{display:inline-flex;gap:7px;align-items:center}
.cart-count{background:rgba(255,255,255,.22);border-radius:980px;
  min-width:19px;padding:0 6px;text-align:center;font-size:.72rem}
.nav nav a{margin:0}

/* ---- 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. */
.announce{margin:0;padding:9px 22px;text-align:center;background:var(--ink);
  color:#fff;font-size:.76rem;letter-spacing:.01em}
.nav{top:0}

.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 and checkout use their own link colour too. */
.wc-block-components-totals-item__value,
.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 and fine print --------------------------------------------
   These went missing when the configurator's CSS block was replaced: the
   button rules lived inside it and went out with it. Nothing threw an error
   — "Choose options" simply rendered as an underlined brass link on every
   tile, and the nav pill with it. Restored, and kept in their own section so
   the next edit to a layout block cannot take them again. */
.pill{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  padding:11px 22px;border:0;border-radius:980px;
  font:500 .88rem 'Inter',sans-serif;cursor:pointer;transition:opacity .18s}
.pill:hover,.pill:focus{opacity:.85;color:#fff;background:var(--ink)}
.pill.wide{width:100%;text-align:center;padding:14px;font-size:1rem;margin-top:4px}
.nav .pill{margin-left:4px;padding:6px 15px;font-size:.78rem}

.ghost{display:inline-block;background:none;border:1px solid var(--line);
  color:var(--ink);padding:10px 18px;border-radius:980px;
  font:400 .85rem 'Inter',sans-serif;cursor:pointer;text-decoration:none;
  transition:background .18s}
.ghost:hover{background:var(--page-2)}

.fineprint{font-size:.82rem;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}

/* ---- footer navigation --------------------------------------------------- */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin:0 0 18px;font-size:.8rem}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ---- mega menu ----------------------------------------------------------
   The bar keeps its own 48px height and the panel is a sibling that drops
   below it, so opening one never resizes the header or shifts the page. */
.nav{position:relative}
.nav-main{display:flex;gap:26px;margin-left:auto;font-size:.78rem}
.nav-item{display:flex;align-items:center;height:48px}
.nav-item>a{color:var(--ink);text-decoration:none;opacity:.85;transition:opacity .2s;
  white-space:nowrap}
.nav-item>a:hover,.nav-item>a.current{opacity:1}
.nav-item>a.current{position:relative}
.nav-item>a.current::after{content:"";position:absolute;left:0;right:0;bottom:-15px;
  height:2px;background:var(--ink)}

/* Solid, not translucent. The bar can be frosted because only a strip of
   page shows through it; a 700px panel over body copy has to be opaque 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:var(--page);border-bottom:1px solid var(--line);text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.07);
  max-height:calc(100vh - 48px);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:var(--shell);margin:0 auto;padding:32px 22px 38px}
.mega-head h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);font-weight:600;
  letter-spacing:-.03em;text-align:left;max-width:none}
.mega-head p{margin:2px 0 0;font-size:1rem;color:var(--ink-3);letter-spacing:-.01em}

.mega-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;
  margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
/* The first two columns are calls to action and read as blocks; the third is
   a link list and stays left, with a rule to say it is a different kind of
   thing rather than a third button. */
.mega-col-centred{text-align:center;display:flex;flex-direction:column;
  align-items:center}
.mega-more{border-left:1px solid var(--line);padding-left:40px}
.mega-mark{display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;margin-bottom:14px;border-radius:50%;
  background:var(--page-2);font-size:.74rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.mega-thumb{display:block;width:110px;height:74px;margin-bottom:14px;
  border-radius:10px;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:1.15rem;font-weight:600;letter-spacing:-.02em}
.mega-col>p{margin:5px 0 14px;font-size:.84rem;color:var(--ink-3)}
/* The third column is a link list, not a call to action. */
.mega-more ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.mega-more a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.mega-more a:hover{color:var(--ink)}
.mega-soon{margin:0;font-size:.82rem;color:var(--ink-3)}

.mega-popular{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.mega-popular h3{margin:0 0 16px;font-size:.78rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.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:12px;overflow:hidden;background:var(--page-2);
  aspect-ratio:1/1}
.mega-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .3s 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:9px;font-size:.86rem;font-weight:500}

@media(max-width:900px){
  /* Below this the bar scrolls sideways and the panels are dropped entirely:
     a full-bleed hover panel has nothing to hover on a touch screen, and the
     top-level item was always a real link to the same page. */
  .mega{display:none!important}
  .nav-main{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .nav-main::-webkit-scrollbar{display:none}
}

/* ---- family landing pages ----------------------------------------------- */
.family-hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);max-width:19ch}
.family-buy{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  justify-content:center;margin:30px 0 0}
.family-from{font-size:.92rem;color:var(--ink-2)}
.family-soon{font-size:.92rem;font-weight:500;color:var(--brass)}
.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:10px 0 10px;font-size:1.3rem;letter-spacing:-.022em;
  text-align:left;max-width:none}
.family-feature p{margin:0;font-size:.94rem;line-height:1.6;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)}