/* ============================================================
   KASA — THEME LAYER
   Loaded last on every page, so it can correct the pages'
   own styles without any of them being rewritten.

   What this changes and why:
   - The palette had a teal (#3FE0F0) running through the hero
     headline, the background orbs and the tile links. Teal and
     gold fight; the result read as neither. Everything warm now.
   - Space Grotesk / Inter is the default "modern startup" pairing.
     Fraunces + Instrument Sans has a point of view.
   - Buttons were flat rectangles with a colour change on hover.
     They now have weight, a light sweep, and a real pressed state.
   ============================================================ */

/* ---------- 1. PALETTE ----------
   --cyan is deliberately redefined rather than hunted down. It was
   used in five places across three files; pointing it at the ember
   warms all of them at once and keeps future uses on-brand. */
:root{
  --bg:#07060B;
  --bg-alt:#0E0C16;
  --surface:#14111E;

  --ink:#EDE7DA;              /* warm off-white — richer than pure white */
  --ink-soft:#8E8698;

  --gold:#C9922E;
  --gold-bright:#D9A94A;
  --gold-sheen:#F5DC9B;
  --cyan:#C8562B;             /* was teal. now ember — the mug heats. */
  --copper:#C8562B;

  --border:rgba(217,169,74,0.14);
  --border-strong:rgba(217,169,74,0.30);
  --on-gold:#0A0810;

  --bone:#F2EDE4;             /* the primary action — paper, not metal */

  --k-display:'Instrument Serif','Times New Roman',Georgia,serif;
  --k-ui:'Geist','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --k-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --k-mono:'Geist Mono',ui-monospace,'SFMono-Regular',monospace;
  --k-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. TYPE ----------
   Fourth pass, and this one is built from what actually landed rather
   than from theory. The composition you didn't hate was the centred,
   quiet one with a serif headline — what was wrong with it was the
   colour floating around it, not the letterforms.

   So: an editorial pairing, which is what the 2026 award shelf is full
   of. A high-contrast display serif carries the headlines; everything
   functional — nav, buttons, body, labels — stays in the neutral
   grotesque. Instrument Serif rather than the earlier Fraunces: Fraunces
   is soft and warm and reads as heritage craft, where this is tight and
   high-contrast and reads as fashion editorial.

   The other luxury signal, straight off the 2026 type trend lists, is
   wide all-caps at LIGHT weight with generous tracking. That is what the
   labels do now — the previous mono labels read as developer tooling. */
body{
  font-family:var(--k-body);
  font-weight:400;
  letter-spacing:-0.006em;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Headlines only. Never buttons, never labels, never body. */
h1,h2,.hero h1,.wn-title,.section-head h2{
  font-family:var(--k-display) !important;
  font-weight:400 !important;
  text-wrap:balance;
}
h1,.hero h1{letter-spacing:-0.018em !important;line-height:1.02 !important;}
h2{letter-spacing:-0.014em !important;line-height:1.06 !important;}
.hero h1{font-size:clamp(46px,7vw,116px) !important;}
h2{font-size:clamp(32px,4vw,62px) !important;}

/* Sub-headings stay in the sans. A serif everywhere is costume; a serif
   for the voice and a grotesque for the furniture is editorial. */
h3,h4{font-family:var(--k-ui) !important;font-weight:500 !important;letter-spacing:-0.012em !important;}

/* One accent, and it is the italic. Static — no gradient, no shimmer. */
.hero h1{color:var(--ink) !important;}
.hero h1 em{
  font-style:italic !important;
  background:none !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
  -webkit-text-fill-color:var(--gold-bright) !important;
  color:var(--gold-bright) !important;
  opacity:1;
  animation:none !important;
}

/* Body copy: quiet, roomy, never competing with the headline. */
p,.hero p,.hero .lede,.section-head p{line-height:1.62;}
.hero p:not(.hero-meta){
  font-size:17px !important;color:var(--ink-soft) !important;
  letter-spacing:-0.004em;font-weight:400;
}

.logo-mark span{
  font-family:var(--k-ui) !important;
  font-size:12.5px !important;font-weight:300 !important;
  letter-spacing:0.28em !important;text-transform:uppercase;
  white-space:nowrap;color:var(--ink) !important;
}
.logo-mark span b{color:var(--ink) !important;font-weight:300 !important;}
.logo-mark img{box-shadow:0 0 0 1px var(--border-strong) !important;}

/* Wide, light, generously tracked all-caps. The single clearest
   "expensive" cue in current luxury type, and it costs nothing. */
.eyebrow,.kicker,.tile .tlink,.section-label{
  font-family:var(--k-ui) !important;
  font-weight:300 !important;
  letter-spacing:0.34em !important;
  font-size:10px !important;text-transform:uppercase;
  color:var(--ink-soft) !important;
}
.nav-links a{
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:12px !important;letter-spacing:0.2em !important;text-transform:uppercase;
}

/* ---------- 3. BUTTONS ----------
   A matched pair, which is what the layout you liked actually had: same
   height, same shape, same tracked all-caps label — one filled, one a
   hairline. What made the earlier pair look wrong was that they were
   different objects wearing different decoration (a glowing gold
   gradient pill beside a grey ghost), not that there were two of them.

   Sharp 2px corners, because a rounded pill under a high-contrast serif
   is the giveaway that a page was assembled rather than designed. */
.btn-gold,.search-btn,.cart-btn,.nav-btn,.btn-outline,
.email-form button[type="submit"],
.pdp-cta,.offer-cta,button.btn,a.btn{
  position:relative;overflow:hidden;
  font-family:var(--k-ui) !important;
  font-weight:400 !important;
  font-size:12px !important;
  letter-spacing:0.2em !important;
  text-transform:uppercase !important;
  border-radius:2px !important;
  animation:none !important;
  transition:transform .4s var(--k-out),box-shadow .4s var(--k-out),
             background .35s var(--k-out),border-color .35s var(--k-out),color .35s var(--k-out);
}
/* No light sweep. It is the most template-looking effect on the web. */
.btn-gold::after,.search-btn::after,
.email-form button[type="submit"]::after{display:none !important;}

.btn-gold,.email-form button[type="submit"],.pdp-cta,.offer-cta{
  background:var(--bone) !important;
  color:#0A0810 !important;border:1px solid var(--bone) !important;
  padding:18px 40px !important;
  box-shadow:none !important;
}
.btn-gold:hover,.email-form button[type="submit"]:hover,
.pdp-cta:hover,.offer-cta:hover{
  background:#FFFFFF !important;border-color:#FFFFFF !important;
  transform:translateY(-1px);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.95) !important;
}
.btn-gold:active,.email-form button[type="submit"]:active{transform:translateY(0) scale(.99);}

.btn-outline{
  background:transparent !important;
  border:1px solid rgba(242,237,228,.26) !important;
  color:var(--ink) !important;
  padding:18px 40px !important;
}
.btn-outline:hover{
  border-color:rgba(242,237,228,.62) !important;color:var(--ink) !important;
  background:rgba(242,237,228,.04) !important;transform:translateY(-1px);
}

/* Nav controls are furniture, not calls to action — smaller and quieter
   than the two real buttons, or the hero stops having a focal point.
   Search was a gold pill with a gold glow, which made the busiest thing
   in the bar the one nobody came for. */
.nav-btn,.cart-btn,.search-btn{
  background:transparent !important;
  border:1px solid rgba(242,237,228,.18) !important;
  color:var(--ink) !important;
  font-size:11px !important;letter-spacing:0.16em !important;
  box-shadow:none !important;
}
.nav-btn:hover,.cart-btn:hover,.search-btn:hover{
  border-color:rgba(242,237,228,.42) !important;
  background:rgba(242,237,228,.05) !important;
  transform:none !important;box-shadow:none !important;
}

/* Equal-width, stacked, centred on a phone — as in the layout you liked. */
.hero-ctas{gap:14px !important;justify-content:center !important;}
@media(max-width:640px){
  .hero-ctas{flex-direction:column;align-items:center;width:100%;}
  .hero-ctas .btn-gold,.hero-ctas .btn-outline{
    width:100%;max-width:320px;text-align:center;
  }
}

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

/* ---------- 4. NAV: part of the video, then its own bar ----------
   At the top of the homepage the bar sits ON the hero footage with
   nothing behind it, so the video reads full-bleed to the top edge.
   Scroll past the hero and it becomes a solid bar, which is the
   behaviour that was already there. Only pages that actually have a
   hero video get the overlay — every other page keeps a solid bar
   from the first pixel, because there's nothing to sit on. */
.announce,.nav-bar{
  transition:background .5s var(--k-out),backdrop-filter .5s var(--k-out),
             border-color .5s var(--k-out),box-shadow .5s var(--k-out);
}

body:has(.hero-video) .announce{
  position:fixed;top:0;left:0;right:0;z-index:51;
  background:rgba(7,6,11,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
body:has(.hero-video) .nav-bar{
  position:fixed;top:var(--k-announce-h,42px);left:0;right:0;z-index:50;
}
/* The hero pads its content clear of the two fixed bars.

   There used to be a negative margin-top here too, compensating for the
   announce strip's height — but the strip is position:fixed on this page,
   so it never occupied that space to begin with. The margin pulled the
   hero up under the viewport edge by exactly the announce height, eating
   that much of the padding below, which is why the eyebrow ended up
   sitting behind the nav icons on a phone. */
body:has(.hero-video) .hero{
  margin-top:0 !important;
  padding-top:calc(var(--k-announce-h,44px) + var(--k-nav-h,86px) + 34px);
}

/* Transparent while you're still on the footage… */
body:has(.hero-video):not(.k-nav-solid) .nav-bar{
  background:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
/* …solid once you've left it. */
.k-nav-solid .nav-bar{
  background:rgba(7,6,11,.88) !important;
  backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 16px 44px -32px rgba(0,0,0,.95);
}
.k-nav-solid .announce{background:rgba(7,6,11,.88) !important;}

/* Over the footage the links need their own contrast — the video is
   busy and mid-toned in places. */
body:has(.hero-video):not(.k-nav-solid) .nav-links a,
body:has(.hero-video):not(.k-nav-solid) .logo-mark span,
body:has(.hero-video):not(.k-nav-solid) .announce{
  text-shadow:0 1px 16px rgba(0,0,0,.8);
}

/* Nav links: a rule that draws in from the left, not a colour flip. */
.nav-links a{
  position:relative;font-family:var(--k-body);font-weight:500;
  transition:color .3s var(--k-out);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--gold-bright);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--k-out);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a:hover{color:var(--gold-sheen);}

/* ---------- 5. THE SHOP HOVER PANEL ----------
   Built by kasa-ui.js. Hovering Shop shows the actual product with
   its price, rather than dropping you on a page to find out. */
#kShopPanel{
  position:fixed;z-index:9995;
  width:min(420px,calc(100vw - 32px));
  background:rgba(14,12,22,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--border-strong);border-radius:3px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  padding:20px;display:grid;grid-template-columns:104px 1fr;gap:18px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--k-out),transform .3s var(--k-out),visibility .3s;
}
#kShopPanel.k-open{opacity:1;visibility:visible;transform:translateY(0);}
#kShopPanel img{width:104px;height:118px;object-fit:cover;border-radius:2px;border:1px solid var(--border);}
#kShopPanel .kp-label{font-family:var(--k-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 7px;}
#kShopPanel h4{font-family:var(--k-display);font-size:20px;font-weight:400;margin:0 0 5px;color:var(--ink);line-height:1.15;}
#kShopPanel p{margin:0 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.55;}
#kShopPanel .kp-price{font-family:var(--k-display);font-size:22px;color:var(--gold-sheen);}
#kShopPanel .kp-price s{font-size:14px;color:var(--ink-soft);margin-left:7px;}
#kShopPanel .kp-go{
  display:inline-block;margin-top:12px;font-family:var(--k-body);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-gold);
  background:var(--gold-bright);padding:9px 16px;border-radius:2px;text-decoration:none;
  transition:background .3s var(--k-out);
}
#kShopPanel .kp-go:hover{background:var(--gold-sheen);}
@media(max-width:860px){#kShopPanel{display:none !important;}}

/* ---------- 6. SURFACES + RHYTHM ----------
   Every section sat on the same flat value, so scrolling had no
   cadence. Alternating grounds give it a pulse. */
section:nth-of-type(even){background:var(--bg-alt);}
.card,.tile,.feature-card,.panel,.accordion,.spec-card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  transition:border-color .45s var(--k-out),transform .45s var(--k-out),box-shadow .45s var(--k-out);
}
.card:hover,.tile:hover,.feature-card:hover{
  border-color:var(--border-strong) !important;
  transform:translateY(-3px);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.9);
}

/* Corner radius lives in section 3 now — this block used to re-sharpen
   every control to 2px AFTER the button rules ran, which silently undid
   them. Inputs only, and matched to the buttons. */
input,select,textarea,.email-form input[type="email"]{border-radius:7px !important;}
@media(max-width:560px){
  .email-form input[type="email"],.email-form button[type="submit"]{border-radius:7px !important;}
}

/* ---------- 7. PRODUCT GALLERY ----------
   The arrows were absolutely positioned against whichever ancestor
   happened to be relative, which is how they ended up stacked on
   top of each other. Pinned to the frame itself, with a counter. */
.product-visual{position:relative !important;}
.visual-nav-arrow{
  position:absolute !important;top:50% !important;
  width:44px !important;height:44px !important;
  border-radius:50% !important;
  background:rgba(7,6,11,.72) !important;
  border:1px solid var(--border-strong) !important;
  color:var(--ink) !important;font-size:0 !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .35s var(--k-out),border-color .35s var(--k-out),transform .35s var(--k-out);
}
/* Drawn rather than typed — the ‹ › glyphs sat off-centre in the circle. */
.visual-nav-arrow::before{
  content:"";display:block;width:9px;height:9px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
}
.visual-nav-arrow.prev{left:16px !important;right:auto !important;transform:translateY(-50%) !important;}
.visual-nav-arrow.next{right:16px !important;left:auto !important;transform:translateY(-50%) !important;}
.visual-nav-arrow.prev::before{transform:rotate(45deg) translate(1px,-1px);}
.visual-nav-arrow.next::before{transform:rotate(-135deg) translate(1px,-1px);}
.visual-nav-arrow:hover{
  background:var(--gold-bright) !important;color:var(--on-gold) !important;
  border-color:var(--gold-bright) !important;
}
.visual-nav-arrow.prev:hover{transform:translateY(-50%) translateX(-2px) !important;}
.visual-nav-arrow.next:hover{transform:translateY(-50%) translateX(2px) !important;}

/* ---------- 8. THE FLOATING FURNITURE ----------
   The visitor badge and Display pill were two loud outlined chips in
   the top-right, both louder than the nav they sat beside. */
#kasa-visitor-badge{
  background:rgba(7,6,11,.72) !important;
  border:1px solid var(--border) !important;
  color:var(--ink-soft) !important;
  font-family:var(--k-mono) !important;font-size:10.5px !important;
  letter-spacing:.14em !important;text-transform:uppercase;
  border-radius:2px !important;padding:7px 12px !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#kasaSettingsBtn{
  background:rgba(7,6,11,.72) !important;
  border:1px solid var(--border) !important;
  color:var(--ink-soft) !important;
  font-family:var(--k-mono) !important;font-size:10.5px !important;
  letter-spacing:.14em !important;text-transform:uppercase;
  border-radius:2px !important;
}
#kasaSettingsBtn:hover{border-color:var(--border-strong) !important;color:var(--gold-bright) !important;}
#kasaCurrencyBtn{
  border-radius:2px !important;font-family:var(--k-mono) !important;
  letter-spacing:.1em;background:rgba(7,6,11,.72) !important;
}
#kasaChatBtn{border-radius:2px !important;}
@media(max-width:760px){#kasaChatBtn{border-radius:50% !important;}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}


/* ---------- 9. NAV FITTING ----------
   The bar carries a logo, a wordmark, five links, Search, Account,
   Cart, a menu button, a Display pill and a visitor badge. At 1440px
   that overflowed and the wordmark ran into the first link. Rather
   than shrink everything into illegibility, items drop out in order
   of how little they're needed as the bar narrows. */
nav{gap:20px;}
.nav-links{gap:26px !important;}
.nav-right{gap:10px !important;}

@media(max-width:1380px){
  .nav-links{gap:20px !important;}
  .logo-mark span{font-size:13px !important;letter-spacing:0.07em !important;}
}
@media(max-width:1240px){
  /* The mark alone carries the brand here — it's the same logo, and the
     wordmark was the piece colliding with the first nav link. */
  .logo-mark span{display:none !important;}
}
@media(max-width:1120px){
  .search-btn .search-label,.search-btn span:not(.k-lbl){display:none !important;}
  .search-btn{width:42px;padding:0 !important;justify-content:center;}
}

/* The Display pill and visitor badge were two floating chips in the
   same corner, both louder than the nav beside them. One row, aligned,
   at label scale. */
@media(max-width:900px){
  #kasa-visitor-badge{display:none !important;}
}

/* The "Make it yours" intro popped up over the hero on a first visit —
   an interruption before anyone has read a word. */
/* The first-visit prompt is back — it was hidden because it popped over
   the hero before anyone had read a word. It now lives beside the Display
   button in the bottom-left corner, well clear of the headline. */
#kasaSettingsIntro{display:block;}


/* ---------- 10. THE FOUR-CARD ROW ----------
   Four identical rounded cards side by side is the most templated
   pattern on the web — it's the thing that makes a page read as
   assembled rather than designed. Same content, restructured as a
   ruled row: no boxes, a hairline between each, a gold rule as the
   marker, and the headings carrying the weight. */
.trust-grid{
  border-top:1px solid var(--border);
  gap:0 !important;
}
.trust-item{
  background:none !important;
  border:none !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  padding:30px 26px 30px 0 !important;
  transform:none !important;box-shadow:none !important;
  position:relative;
  transition:background .4s var(--k-out);
}
.trust-item:hover{background:rgba(217,169,74,.035) !important;transform:none !important;}
.trust-item h3{
  font-size:17px !important;font-weight:700 !important;
  color:var(--ink) !important;margin:0 0 8px !important;
  display:flex;align-items:center;gap:12px;letter-spacing:-0.01em !important;
}
.trust-item h3::before{
  content:"";width:18px;height:2px;background:var(--gold-bright);flex:none;
}
.trust-item p{color:var(--ink-soft) !important;font-size:14.5px !important;margin:0 !important;}
@media(min-width:861px){
  /* Vertical rules between columns instead of four separate boxes. */
  .trust-grid{border-bottom:1px solid var(--border);}
  .trust-item{border-bottom:none !important;padding-left:26px !important;}
  .trust-item + .trust-item{border-left:1px solid var(--border) !important;}
  .trust-item:first-child{padding-left:0 !important;}
}

/* ---------- 11. HERO PROPORTION ----------
   Back to centred. The bottom-left film-title arrangement was the more
   fashionable choice and the wrong one here — the layout that read as
   calm and expensive was the symmetrical one, and symmetry is also what
   holds up when the footage behind it changes.

   Height stays near-viewport: the earlier 2.3:1 letterbox was cropping a
   third of the 16:9 frame away, which is what made the video look
   stretched. */
body:has(.hero-video) .hero{
  min-height:min(92vh,900px) !important;
  height:auto !important;
  padding-bottom:clamp(56px,7vh,96px) !important;
  align-items:center !important;
  text-align:center !important;
}
body:has(.hero-video) .hero-inner{
  margin:0 auto !important;max-width:880px !important;width:100%;
}
body:has(.hero-video) .hero-ctas{justify-content:center !important;}
body:has(.hero-video) .hero p:not(.hero-meta){
  margin-left:auto !important;margin-right:auto !important;max-width:52ch !important;
}
/* Air above and below the headline. Space is the cheapest luxury there
   is and the page had none of it. */
.hero .eyebrow{display:inline-block;margin-bottom:30px;}
.hero h1{margin:0 0 30px !important;}
.hero p:not(.hero-meta){margin-bottom:46px !important;}

/* Less colour in the footage itself, and a gentler wash over it. */
.hero-video{filter:brightness(.52) saturate(.72) contrast(1.03) !important;}
.hero-overlay{
  background:linear-gradient(180deg,rgba(7,6,11,.34) 0%,rgba(7,6,11,.44) 42%,rgba(7,6,11,.97) 100%) !important;
}

/* One quiet line naming what is actually for sale — the page was asking
   people to press a button without ever saying what the product is. */
.hero-meta{
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:10px !important;letter-spacing:.3em !important;line-height:2 !important;
  text-transform:uppercase;color:var(--ink-soft) !important;
  margin:48px auto 0 !important;display:block !important;max-width:none !important;
}
.hero-meta b{color:var(--ink);font-weight:400;}
.hero-meta i{font-style:normal;opacity:.3;margin:0 12px;}

/* The greeting bubble opened itself over the fourth card on desktop
   too, not just on phones. */
#kasaChatGreet{display:none !important;}

/* The Display pill sits directly under the visitor badge, top right —
   one quiet stack, clear of the chat launcher bottom-right and the
   currency pill bottom-left. */
#kasa-visitor-badge{top:9px !important;right:14px !important;}
#kasaSettingsBtn{
  top:46px !important;bottom:auto !important;
  right:14px !important;left:auto !important;
}
@media(max-width:760px){#kasaSettingsBtn{display:none !important;}}


/* ---------- 12. THE OLD DISPLAY FACE ----------
   Space Grotesk used to drive prices, taglines, accordion questions and
   the nav, so the page ran two display faces at once. This block moved
   them all onto --k-display — which was correct when --k-display was a
   grotesque, and wrong the moment it became a serif: it put the NAV in
   Instrument Serif. Functional text belongs to the sans; only the
   editorial voice gets the serif. */
.spotlight-price,.price,.amt,.n,
.r-title,.accordion-q,.pdp-faq-q,.nav-links a,
.stat-value,.spec-value,.pdp-price{
  font-family:var(--k-ui) !important;
}
/* A product tagline is voice, not furniture — it keeps the serif. */
.tagline,.spotlight-tagline{
  font-family:var(--k-display) !important;
  font-weight:400 !important;letter-spacing:0 !important;
  font-size:1.15em;color:var(--ink) !important;
}
/* Prices are a number people scan — tight and tabular. */
.price,.spotlight-price,.amt,.pdp-price{
  font-weight:500 !important;letter-spacing:-0.02em !important;
  font-variant-numeric:tabular-nums;
}
.accordion-q,.pdp-faq-q,.r-title{font-weight:500 !important;letter-spacing:-0.012em !important;}


/* ---------- 13. LESS ON SCREEN ----------
   "To have a premium and luxury look you can't have too much going on."
   That is correct, and the hero had: three animated blur orbs, thirty
   twinkling particles, a shimmering gradient headline, rotated text
   pinned down both page edges, a glowing button and four floating chips.
   All of it decoration that nothing depended on. */
.orb,.orb-1,.orb-2,.orb-3{display:none !important;}
.edge-text{display:none !important;}
.spine{display:none !important;}

/* Cards stop glowing gold on hover — a neutral lift is enough. */
.product-card:hover{
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9) !important;
  border-color:rgba(242,237,228,.22) !important;
}

/* The visitor count stays, but as a note rather than a badge. */
#kasa-visitor-badge{
  border-color:transparent !important;
  background:transparent !important;
  opacity:.5;padding:7px 4px !important;
}
#kasaSettingsBtn{border-color:transparent !important;background:transparent !important;opacity:.5;}
#kasaSettingsBtn:hover,#kasa-visitor-badge:hover{opacity:1;}
#kasaCurrencyBtn{border-radius:2px !important;}

/* Reveals: slower and gentler. Award-shelf pages all share this —
   motion that serves the content instead of announcing itself. */
.reveal{
  transform:translateY(18px) !important;
  transition:opacity 1.1s var(--k-out),transform 1.1s var(--k-out) !important;
}

/* On a phone the hero is a portrait box holding landscape footage, so
   cover has to crop hard whatever we do. A shorter hero crops less and
   gets the product line above the fold. */
@media(max-width:760px){
  body:has(.hero-video) .hero{
    min-height:76vh !important;height:auto !important;
    padding-left:22px !important;padding-right:22px !important;
  }
  .hero .eyebrow{margin-bottom:22px;letter-spacing:.26em !important;}
  .hero h1{margin-bottom:24px !important;}
  .hero p{margin-bottom:36px !important;}
  .hero-meta{font-size:9px !important;letter-spacing:.24em !important;margin-top:34px !important;}
}


/* The announce strip was the last thing still set in the mono, which
   read as a system message rather than part of the brand. */
.announce{
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:10.5px !important;letter-spacing:.2em !important;text-transform:uppercase;
}
.announce b{font-weight:400 !important;}


/* ---------- 14. THE LAST OF THE GOLD ----------
   With the buttons, labels and headline all off gold, the pieces still
   wearing it stood out as leftovers rather than accents: four gold
   circles in the phone nav, a gold-filled Search, a gold "current page"
   link. Gold is now down to the announce strip, the rule beside each
   trust heading and the chat launcher — three marks, not thirty. */
@media(max-width:860px){
  a.nav-btn.k-icon-btn,
  button.cart-btn.k-icon-btn,
  a.cart-btn.k-icon-btn,
  .menu-btn{
    background:rgba(242,237,228,.04) !important;
    border:1px solid rgba(242,237,228,.20) !important;
    color:var(--ink) !important;
  }
  .menu-btn span{background:var(--ink) !important;}
  .search-btn.k-icon-btn{
    background:rgba(242,237,228,.04) !important;color:var(--ink) !important;
    border:1px solid rgba(242,237,228,.20) !important;
  }
  .k-icon-btn .cart-count{background:var(--bone) !important;color:#0A0810 !important;}
}
.nav-links a[aria-current="page"]{color:var(--ink) !important;}

/* The hero product line reads as a sentence, not as flex items — the
   separators were breaking to the end of a line on their own. */
/* (hero-meta styling lives in section 11) */

/* The Display pill was floating loose beside the nav in the top-right.
   Moved down beside the currency pill, where the page's two small
   controls sit together and neither is near the headline. */
@media(min-width:761px){
  #kasaSettingsBtn{
    top:auto !important;bottom:76px !important;
    right:auto !important;left:14px !important;
  }
}


/* ---------- 15. THE ANNOUNCE STRIP AND THE LAUNCHER ----------
   Two last pieces of furniture that were louder than the page.

   The strip ran to three lines on a phone at 0.2em tracking, so the
   first thing anyone saw was a paragraph of small caps. And the chat
   launcher was a saturated gold lozenge in the corner — the most
   colour-forward object on a page whose whole argument is restraint. */
@media(max-width:760px){
  .announce{
    font-size:9.5px !important;letter-spacing:.1em !important;
    padding:9px 16px !important;line-height:1.5;
  }
}
#kasaChatBtn{
  background:rgba(7,6,11,.82) !important;
  border:1px solid rgba(242,237,228,.22) !important;
  color:var(--ink) !important;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase;
}
#kasaChatBtn:hover{border-color:rgba(242,237,228,.45) !important;transform:none !important;}
/* The launcher also carried a gold pulse animation, which is a glow that
   never stops moving in the corner of every page. */
#kasaChatBtn{animation:none !important;}
#kasaChatBtn svg{color:var(--ink) !important;stroke:currentColor;}


/* The currency pill was picking up the filled primary-button styling and
   sitting in the corner as a small white block. */
#kasaCurrencyBtn{
  background:rgba(7,6,11,.72) !important;
  border:1px solid rgba(242,237,228,.18) !important;
  color:var(--ink-soft) !important;
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:10px !important;letter-spacing:.2em !important;
  box-shadow:none !important;
}
#kasaCurrencyBtn:hover{color:var(--ink) !important;border-color:rgba(242,237,228,.4) !important;}


/* ---------- 16. TWO COLLISIONS AND A WRAPPED NAV ----------

   The launcher is a circle now. As a labelled lozenge it was ~170px
   wide and sat on top of the product page's own Join Waitlist button —
   the one thing on that page that has to be pressable. A round icon
   also stops the corner competing with the page's real call to action.

   And the nav links, once they went uppercase and tracked, grew wide
   enough that "Future Plans" wrapped to two lines at 1440px. */
#kasaChatBtn{
  width:54px !important;height:54px !important;
  padding:0 !important;border-radius:50% !important;
  justify-content:center !important;gap:0 !important;
}
#kasaChatBtn span{display:none !important;}
#kasaChatBtn svg{stroke:currentColor !important;width:21px;height:21px;}
@media(max-width:760px){#kasaChatBtn{width:50px !important;height:50px !important;}}

.nav-links a{white-space:nowrap;}
@media(max-width:1500px){.nav-links a{letter-spacing:0.14em !important;}}
@media(max-width:1340px){
  .nav-links{gap:18px !important;}
  .nav-links a{letter-spacing:0.1em !important;font-size:11.5px !important;}
}