/* ============================================================
   KASA — THE REACTIVE LAYER
   Loaded after kasa-theme.css. Everything here is about how the
   site RESPONDS: light that moves, elements that acknowledge the
   pointer, a menu that arrives rather than appears.

   Rules it follows, so "alive" never becomes "busy":
   - Nothing animates until you interact with it. No ambient loops.
   - One warm light source. It is the product's own heat, not decor.
   - Every effect is off under prefers-reduced-motion and on touch,
     where hover is not a real state.
   ============================================================ */

/* The angle the border light travels around. Registering it as a real
   typed custom property is what lets a conic gradient be animated at
   all — an unregistered custom property can only ever jump. */
@property --k-ang{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* ---------- 1. LIGHT BUTTONS ----------
   A single bright segment of white light that runs around the outside
   line of the button, continuously, while you are on it.

   This started as a rotating conic gradient masked to the border. That
   works, but on a wide rectangle a conic gradient sweeps by ANGLE, so
   the segment crawls along the long edges and snaps through the
   corners — it reads as a gradient turning, not as a light travelling.

   An SVG outline with a dashed stroke moves by DISTANCE instead: one
   short dash, the rest of the perimeter as gap, and the dash offset
   animated by exactly one perimeter. Constant speed the whole way
   round, on any button size. Two strokes are drawn — a blurred one for
   the light's spill and a crisp one for the filament itself. */
.k-lit{position:relative;isolation:isolate;overflow:visible !important;}

.k-rim-svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:3;
  /* The light runs all the time, not only on hover — quiet at rest,
     full brightness when you are on it. Off-screen buttons are paused
     by script, so a page of buttons is not a page of animations. */
  opacity:.42;transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.k-lit:hover .k-rim-svg,.k-lit:focus-visible .k-rim-svg{opacity:1;}
.k-lit.k-offscreen .k-rim-svg rect{animation-play-state:paused;}
.k-rim-svg rect{
  fill:none;
  stroke-dasharray:var(--seg,60) var(--gap,300);
  stroke-dashoffset:0;
  stroke-linecap:round;
}
.k-rim-svg rect{animation:k-travel var(--dur,2.6s) linear infinite;}
@keyframes k-travel{to{stroke-dashoffset:var(--loop,-360);}}
.k-rim-svg .k-spill{stroke:#FFFFFF;stroke-width:4;opacity:.45;filter:blur(3.5px);}
.k-rim-svg .k-core{stroke:#FFFFFF;stroke-width:1.4;}

/* A specular highlight under the pointer — colourless, so the button
   reads as a surface catching light rather than a tinted panel. */
.k-lit .k-spec{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(150px 150px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.16),rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.k-lit:hover .k-spec{opacity:1;}
/* On the filled bone button white-on-white does nothing, so there the
   highlight is a soft shadow moving under the surface instead. */
.btn-gold.k-lit .k-spec,.pdp-cta.k-lit .k-spec,
.email-form button[type="submit"].k-lit .k-spec{
  background:radial-gradient(170px 170px at var(--mx,50%) var(--my,50%),
             rgba(10,8,16,.12),rgba(10,8,16,0) 62%);
}
.k-lit > *:not(.k-rim-svg):not(.k-spec){position:relative;z-index:2;}

@media(hover:none),(prefers-reduced-motion:reduce){
  .k-rim-svg,.k-lit .k-spec{display:none !important;}
}


/* ---------- 2. THE HEAT BLOOM ----------
   A warm pool of light that follows the pointer with a lag, as though
   the page itself were being warmed. It is the one ambient effect on
   the site and it exists because the product is a mug that heats — an
   abstract glow would be decoration; this one is the brand argument. */
#kHeat{
  position:fixed;top:0;left:0;width:620px;height:620px;
  margin:-310px 0 0 -310px;
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,
    rgba(217,169,74,.16) 0%,
    rgba(201,86,43,.09) 34%,
    rgba(201,86,43,0) 68%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity .8s ease;
  will-change:transform;
}
#kHeat.k-on{opacity:1;}
@media(hover:none),(prefers-reduced-motion:reduce){#kHeat{display:none !important;}}


/* ---------- 3. THE NAV THAT OPENS ----------
   The bar carried five links, a wordmark, three controls and a menu
   button — most of it never used. It now shows two, and the rest arrive
   when you go near it, staggered so it reads as one movement.

   The links are still real anchors in the HTML at all times, so this
   costs nothing in search or accessibility: keyboard focus opens the
   same set that hover does. */
.nav-links{
  --k-stagger:0ms;
  align-items:center;
}
.nav-links a.k-sec{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  pointer-events:none;
  transition:max-width .55s cubic-bezier(.16,1,.3,1) var(--k-stagger),
             opacity .4s ease var(--k-stagger),
             margin .55s cubic-bezier(.16,1,.3,1) var(--k-stagger);
  margin-right:-18px;
}
.nav-bar:hover .nav-links a.k-sec,
.nav-bar:focus-within .nav-links a.k-sec,
.k-nav-open .nav-links a.k-sec{
  max-width:190px;opacity:1;pointer-events:auto;margin-right:0;
}
/* A hairline that grows under the bar as it opens — the cue that the
   bar is a thing that opens, not a thing that glitched. */
.nav-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  transform:scaleX(0);opacity:.5;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.nav-bar:hover::after,.nav-bar:focus-within::after{transform:scaleX(1);}
@media(max-width:860px){
  .nav-links a.k-sec{display:none !important;}
  .nav-bar::after{display:none;}
}


/* ---------- 4. THE MENU ----------
   Was a 320px grey drawer with a stack of 20px links — a utility panel.
   Now it takes the whole screen, because on a brand site the menu is a
   page, and the items arrive one after another rather than all at once. */
.side-menu{
  width:100vw !important;max-width:100vw !important;
  background:rgba(7,6,11,.96) !important;
  backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px) saturate(1.1);
  border-left:none !important;
  padding:clamp(78px,10vh,120px) clamp(24px,7vw,110px) 40px !important;
  overflow-y:auto;
  transform:translateX(100%) !important;
  transition:transform .8s cubic-bezier(.16,1,.3,1) !important;
  justify-content:flex-start !important;
}
.side-menu.open{transform:translateX(0) !important;}
.side-menu-links{
  gap:0 !important;counter-reset:kmenu;max-width:1180px;width:100%;margin:0 auto;
}
.side-menu-links a{
  font-family:var(--k-display) !important;
  /* Nine items have to fit one screen without scrolling, or a menu
     that opens full-bleed is worse than the drawer it replaced. */
  font-size:clamp(24px,3.6vw,48px) !important;
  line-height:1.05 !important;letter-spacing:-0.02em !important;
  color:var(--ink) !important;
  padding:clamp(8px,1.25vh,15px) 0 !important;
  border-bottom:1px solid rgba(242,237,228,.09);
  display:flex !important;align-items:center;gap:0;
  position:relative;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             transform .7s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             color .35s ease,padding-left .5s cubic-bezier(.16,1,.3,1);
}
.side-menu.open .side-menu-links a{opacity:1;transform:translateY(0);}
.side-menu-links a::before{
  counter-increment:kmenu;content:"0" counter(kmenu);
  font-family:var(--k-ui);font-weight:300;font-size:11px;letter-spacing:.24em;
  color:var(--ink-soft);opacity:.55;flex:none;
  width:44px;align-self:center;
  transition:color .35s ease,opacity .35s ease;
}
.side-menu-links a:hover{
  color:var(--gold-sheen) !important;transform:translateY(0) !important;
  padding-left:18px !important;
}
.side-menu-links a:hover::before{color:var(--gold-bright);opacity:1;}
.side-menu-footer{
  margin-top:auto;padding-top:40px;
  font-family:var(--k-ui);font-weight:300;
  letter-spacing:.2em !important;text-transform:uppercase;font-size:10px !important;
}
.side-menu .search-close{
  font-size:34px !important;line-height:1;color:var(--ink-soft);
  top:clamp(26px,4vh,46px) !important;right:clamp(24px,5vw,64px) !important;
  transition:color .3s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.side-menu .search-close:hover{color:var(--ink);transform:rotate(90deg);}

/* A quiet line of brand at the top of the menu, so the screen isn't
   just a list floating in black. */
.k-menu-mark{
  position:absolute;top:clamp(30px,4.4vh,50px);left:clamp(24px,7vw,110px);
  font-family:var(--k-ui);font-weight:300;font-size:10px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
}


/* ---------- 5. THE SEND-OFF ----------
   Joining a waiting list is the single most important thing anyone
   does on this site before launch, and it used to be answered by a div
   changing to display:block. Now the message physically leaves. */
#kSendoff{
  position:fixed;inset:0;z-index:9995;pointer-events:none;
  display:none;
}
#kSendoff.k-run{display:block;}
#kSendoff .k-plane{
  position:absolute;width:46px;height:46px;
  color:var(--gold-sheen);
  filter:drop-shadow(0 0 14px rgba(217,169,74,.65));
  animation:k-fly 1.5s cubic-bezier(.5,0,.35,1) forwards;
}
@keyframes k-fly{
  0%{transform:translate(-50%,-50%) scale(.4) rotate(-14deg);opacity:0;}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg);}
  100%{
    transform:translate(calc(-50% + var(--dx,40vw)),calc(-50% + var(--dy,-52vh)))
              scale(.34) rotate(16deg);
    opacity:0;
  }
}
#kSendoff .k-ring{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:1px solid rgba(217,169,74,.85);
  animation:k-ring 1.15s cubic-bezier(.16,1,.3,1) forwards;
}
#kSendoff .k-ring.k-r2{animation-delay:.14s;}
#kSendoff .k-ring.k-r3{animation-delay:.28s;}
@keyframes k-ring{
  0%{transform:scale(.3);opacity:.9;}
  100%{transform:scale(24);opacity:0;}
}
/* The success panel itself arrives instead of appearing. */
.k-arrive{animation:k-arrive .9s cubic-bezier(.16,1,.3,1) both;}
@keyframes k-arrive{
  0%{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px);}
  100%{opacity:1;transform:none;filter:blur(0);}
}
@media(prefers-reduced-motion:reduce){
  #kSendoff{display:none !important;}
  .k-arrive{animation:none !important;}
}


/* ---------- 6. THE COLOUR SWITCH, FOUND AGAIN ----------
   The previous pass stripped its border and dropped it to 50% opacity
   to quieten the corner, and the result was a control nobody could
   see. Quiet is not the same as invisible. It reads as a label now —
   hairline box, its own word, and it lights on hover like everything
   else on the page. */
#kasaSettingsBtn{
  opacity:1 !important;
  background:rgba(7,6,11,.72) !important;
  border:1px solid rgba(242,237,228,.22) !important;
  color:var(--ink-soft) !important;
  border-radius:2px !important;
  padding:9px 14px !important;
  font-family:var(--k-ui) !important;font-weight:300 !important;
  font-size:10px !important;letter-spacing:.24em !important;text-transform:uppercase;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:color .3s ease,border-color .3s ease,box-shadow .4s ease;
}
#kasaSettingsBtn:hover{
  color:var(--ink) !important;
  border-color:rgba(217,169,74,.65) !important;
  box-shadow:0 0 22px -6px rgba(217,169,74,.5) !important;
}
#kasa-visitor-badge{opacity:.75;}
/* Clear of the currency pill, which shares the bottom-left corner. */
@media(min-width:761px){
  #kasaSettingsBtn{bottom:112px !important;top:auto !important;left:14px !important;right:auto !important;}
}


/* ---------- 7. REACTIVE EVERYWHERE ELSE ----------
   The same idea applied at lower volume to the things you scroll past,
   so the page keeps answering you after the hero. */
.product-card,.trust-item,.tile,.card{
  transition:transform .6s cubic-bezier(.16,1,.3,1),
             border-color .5s ease,box-shadow .6s cubic-bezier(.16,1,.3,1),
             background .5s ease;
}
.product-card:hover{transform:translateY(-6px);}

/* Links draw their own underline rather than changing colour. */
.footer-col a,.side-menu-footer a{position:relative;}
.footer-col a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;opacity:.5;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.footer-col a:hover::after{transform:scaleX(1);transform-origin:left;}

/* Images lift their own veil as they come into view. */
.k-veil{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);}
.k-veil.k-seen{clip-path:inset(0 0 0 0);}
@media(prefers-reduced-motion:reduce){
  .k-veil{clip-path:none !important;transition:none !important;}
}


/* Floating controls stand down while the menu is open — they were
   sitting on top of it, which is the one place they must not be. */
body:has(#sideMenu.open) #kasaSettingsBtn,
body:has(#sideMenu.open) #kasaCurrencyBtn,
body:has(#sideMenu.open) #kasaChatBtn,
body:has(#sideMenu.open) #kasa-visitor-badge{
  opacity:0 !important;pointer-events:none !important;
  transition:opacity .3s ease;
}

/* Short laptop screens: the list shrinks rather than the footer falling
   off the bottom edge. */
@media(max-height:820px) and (min-width:861px){
  .side-menu{padding-top:72px !important;padding-bottom:28px !important;}
  .side-menu-links a{font-size:clamp(22px,2.9vw,38px) !important;padding:9px 0 !important;}
  .side-menu-footer{padding-top:22px !important;}
}


/* ---------- 8. THE HIGHLIGHT ----------
   You liked how Search was picked out in the bar: a lit hairline with a
   faint halo, so the control reads as a lens rather than a box. That
   treatment is now the site's standard "this is interactive" state, on
   the nav controls, the outline buttons and the floating chips.

   It is a resting state, not a hover state — the page looks lit before
   you touch it, which is the difference between a site that feels alive
   and one that only responds. */
.k-glowline,
.search-btn,.cart-btn,.nav-btn,.btn-outline,
#kasaSettingsBtn,#kasaCurrencyBtn,#kasaChatBtn,.menu-btn{
  box-shadow:
    0 0 0 1px rgba(242,237,228,.05),
    0 0 18px -6px rgba(242,237,228,.22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:box-shadow .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,color .3s ease,background .3s ease;
}
.k-glowline:hover,
.search-btn:hover,.cart-btn:hover,.nav-btn:hover,.btn-outline:hover,
#kasaSettingsBtn:hover,#kasaCurrencyBtn:hover,#kasaChatBtn:hover,.menu-btn:hover{
  box-shadow:
    0 0 0 1px rgba(242,237,228,.14),
    0 0 26px -4px rgba(242,237,228,.42),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}


/* ---------- 9. NAV CONTROLS THAT OPEN ----------
   The three controls on the right sit as icons and open to show their
   word when you go near them — the same idea as the links folding away
   on the left, applied to the other end of the bar. Icon first, name on
   demand, so the bar is quiet until you need it.

   The label is never removed from the DOM; it is width-collapsed, so
   screen readers and search still read "Account", "Cart", "Search". */
@media(min-width:861px){
  /* Scoped to the bar rather than to .nav-right: two pages wrap their
     controls in a plain styled div instead, and those were left with the
     labels showing while every other page had icons. */
  .nav-bar .k-lbl,.search-btn .search-label{
    display:inline-block;
    max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
    transition:max-width .5s cubic-bezier(.16,1,.3,1),
               opacity .35s ease,margin .5s cubic-bezier(.16,1,.3,1);
  }
  .nav-bar .search-btn .search-label{margin-right:-6px;}
  .nav-bar .cart-btn .k-lbl,.nav-bar .nav-btn .k-lbl{margin-left:-6px;}

  .search-btn:hover .search-label,.search-btn:focus-within .search-label,
  .cart-btn:hover .k-lbl,.cart-btn:focus-within .k-lbl,
  .nav-btn:hover .k-lbl,.nav-btn:focus-within .k-lbl{
    max-width:130px;opacity:1;margin-left:0;margin-right:0;
  }

  .nav-bar .search-btn,.nav-bar .cart-btn,.nav-bar .nav-btn{
    padding:0 16px !important;height:42px;
    display:inline-flex;align-items:center;gap:9px;
    transition:padding .5s cubic-bezier(.16,1,.3,1),
               box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .35s ease;
  }
  .nav-bar .search-btn:hover,.nav-bar .cart-btn:hover,.nav-bar .nav-btn:hover{
    padding:0 20px !important;
  }
}


/* ---------- 10. THREE THINGS THAT WERE STILL WRONG ----------

   The bar at 88% opacity let the hero's own buttons show through it
   while they scrolled underneath. A bar that is "part of the video"
   only at the very top has to be genuinely opaque everywhere else.

   The scroll progress bar was a 4px rainbow — gold into TEAL into
   orange — with a permanent glow and a gradient animating forever. It
   was the single most colourful object on the site and it sat above
   everything. Now it is a 2px hairline in the warm gold you liked. */
.k-nav-solid .nav-bar{background:rgba(7,6,11,.975) !important;}
.k-nav-solid .announce{background:rgba(7,6,11,.975) !important;}

#kasaScrollProgress{
  height:2px !important;
  background:linear-gradient(90deg,#B8862B,#E8C766 45%,#D97A3D) !important;
  background-size:100% 100% !important;
  animation:none !important;
  box-shadow:none !important;
  opacity:.9;
}

/* ---------- 11. THE SLOW FADE ----------
   The reveals were there but you could not feel them: the pages' own
   `.reveal` class moved 24px over 0.9s and my layer deliberately left
   those alone, so most of the homepage was using the old, quick one.
   Everything is on the same slow curve now — further, longer, and with
   a touch of blur clearing as it settles, which is what reads as
   expensive rather than merely animated. */
.reveal{
  opacity:0;
  transform:translateY(38px) !important;
  filter:blur(7px);
  transition:opacity 1.35s cubic-bezier(.16,1,.3,1),
             transform 1.35s cubic-bezier(.16,1,.3,1),
             filter 1.35s cubic-bezier(.16,1,.3,1) !important;
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none !important;filter:blur(0);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;}
}


/* ---------- 12. THE MOVING BAND ----------
   Was a huge serif headline sliding past, which competed with the real
   headlines either side of it. It is a ticker now: small, tracked
   all-caps facts about the product, in the same voice as the labels.

   And it behaves like a surface with water under it — the letters lift
   and settle around the pointer as it passes, strongest where you are
   and easing away with distance. That is the whole interaction; it does
   not need a click to be worth having. */
.k-marquee{
  display:block;position:relative;overflow:hidden;
  padding:20px 0;margin:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(217,169,74,.045),transparent 60%);
  text-decoration:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.k-marquee-track{display:flex;width:max-content;animation:k-march 42s linear infinite;}
.k-marquee:hover .k-marquee-track{animation-play-state:paused;}
@keyframes k-march{to{transform:translateX(-50%);}}
.k-marquee-run{
  display:flex;align-items:center;white-space:nowrap;
  font-family:var(--k-ui);font-weight:300;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);
}
.k-fact{
  display:inline-block;padding:0 30px;
  transform:translateY(var(--w,0px));
  transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s ease;
  will-change:transform;
}
.k-fact.k-near{color:var(--ink);}
.k-fact::after{
  content:"";display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;
  background:var(--gold-bright);opacity:.5;margin-left:30px;
}
html.theme-light .k-fact::after{background:#A6572E;}
@media(prefers-reduced-motion:reduce){
  .k-marquee-track{animation:none;}
  .k-fact{transform:none !important;}
}
@media(max-width:760px){
  .k-marquee{padding:15px 0;}
  .k-marquee-run{font-size:10px;letter-spacing:.26em;}
  .k-fact{padding:0 18px;}
  .k-fact::after{margin-left:18px;}
}

/* ---------- 13. WHAT A BUTTON SAYS BACK ----------
   Every action gets its own answer, and the answer is about the thing
   that just happened rather than a generic tick.

   The restraint that keeps this from turning the site into a toy: one
   object, one move, under two seconds, and it never blocks anything.
   The order still submits while the van is driving. */
#kActs{position:fixed;inset:0;z-index:9996;pointer-events:none;}

/* --- the van: an order is a thing that gets driven to you --- */
.k-van{
  position:absolute;left:0;right:0;bottom:14vh;height:96px;
  display:flex;align-items:flex-end;
  opacity:0;animation:k-vanfade 2.6s ease forwards;
}
@keyframes k-vanfade{0%{opacity:0;}8%{opacity:1;}82%{opacity:1;}100%{opacity:0;}}
.k-van-road{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,237,228,.30) 12%,rgba(242,237,228,.30) 88%,transparent);
}
.k-van-road::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,#E8C766 0 22px,transparent 22px 52px);
  box-shadow:0 0 10px rgba(217,169,74,.5);
  animation:k-roadrun 2.6s linear;
}
@keyframes k-roadrun{to{transform:translateX(-520px);}}
.k-van-body{
  position:absolute;bottom:2px;width:132px;color:var(--gold-sheen);
  animation:k-vandrive 2.6s cubic-bezier(.32,.02,.34,1) forwards;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(217,169,74,.45));
}
@keyframes k-vandrive{
  0%{transform:translateX(-190px);}
  100%{transform:translateX(calc(100vw + 60px));}
}
.k-van-body .k-wheel{transform-origin:center;animation:k-spin .5s linear infinite;}
@keyframes k-spin{to{transform:rotate(360deg);}}
.k-van-word{
  position:absolute;left:50%;bottom:118px;transform:translateX(-50%);
  font-family:var(--k-ui);font-weight:300;font-size:11px;
  letter-spacing:.36em;text-transform:uppercase;
  background-image:linear-gradient(96deg,#B8862B,#F5DC9B 45%,#D97A3D);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:0;animation:k-word 2.6s ease forwards;animation-delay:.5s;
}
@keyframes k-word{
  0%{opacity:0;transform:translate(-50%,8px);}
  18%{opacity:1;transform:translate(-50%,0);}
  76%{opacity:1;}
  100%{opacity:0;}
}

/* --- into the cart: the thing you added goes where it went --- */
.k-fly{
  position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:3px;overflow:hidden;
  background:var(--surface);border:1px solid rgba(217,169,74,.55);
  box-shadow:0 16px 30px -14px rgba(0,0,0,.9),0 0 22px -6px rgba(217,169,74,.55);
  animation:k-fly 1.05s cubic-bezier(.5,0,.5,1) forwards;
}
.k-fly img{width:100%;height:100%;object-fit:cover;}
@keyframes k-fly{
  0%{transform:translate(0,0) scale(1);opacity:0;}
  12%{opacity:1;}
  70%{opacity:1;}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.14);opacity:0;}
}
.k-cart-pop{animation:k-cartpop .5s cubic-bezier(.16,1,.3,1);}
@keyframes k-cartpop{
  0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}
}

/* --- the envelope: an enquiry is a letter --- */
.k-letter{
  position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;
  color:var(--gold-sheen);
  filter:drop-shadow(0 0 16px rgba(217,169,74,.6));
  animation:k-seal 1.5s cubic-bezier(.5,0,.35,1) forwards;
}
@keyframes k-seal{
  0%{transform:scale(.5) rotate(-6deg);opacity:0;}
  16%{transform:scale(1) rotate(0);opacity:1;}
  46%{transform:scale(1) rotate(0);opacity:1;}
  100%{transform:translate(var(--dx,30vw),-58vh) scale(.3) rotate(12deg);opacity:0;}
}
.k-letter .k-flap{
  transform-origin:12px 8px;
  animation:k-flap .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.2s;
}
@keyframes k-flap{0%{transform:rotateX(-160deg);}100%{transform:rotateX(0deg);}}

@media(prefers-reduced-motion:reduce){
  #kActs{display:none !important;}
}


/* ---------- 14. THE PEEPING LIGHT ----------
   The thing you spotted on Search in light mode was light escaping from
   BEHIND the control — a bright hairline along the top edge and a soft
   bleed underneath, as though the button were sitting slightly proud of
   the page with a light source behind it.

   It was an accident of two shadows stacking. It is deliberate now, and
   it goes on every control that does NOT carry the travelling filament,
   so nothing on the site is unlit: nav icons, the menu button, the
   Display and currency chips, quantity steppers, gallery arrows, the
   chat launcher. */
.search-btn,.cart-btn,.nav-btn,.menu-btn,
#kasaSettingsBtn,#kasaCurrencyBtn,#kasaChatBtn,
.qty-btn,.kasa-opt,.k-peek{
  position:relative;
  isolation:isolate;
}
.search-btn::before,.cart-btn::before,.nav-btn::before,.menu-btn::before,
#kasaSettingsBtn::before,#kasaCurrencyBtn::before,#kasaChatBtn::before,
.qty-btn::before,.kasa-opt::before,.k-peek::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;z-index:-1;
  /* The bleed: light escaping around the edge, strongest at the top. */
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,0) 62%);
  opacity:.30;
  filter:blur(2.5px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.search-btn:hover::before,.cart-btn:hover::before,.nav-btn:hover::before,
.menu-btn:hover::before,#kasaSettingsBtn:hover::before,#kasaCurrencyBtn:hover::before,
#kasaChatBtn:hover::before,.qty-btn:hover::before,
.kasa-opt:hover::before,.k-peek:hover::before{opacity:.85;}

/* In light mode the same light is INK, not gold. A warm fade on a beige
   button is the yellow-on-beige problem in miniature — two warm tones a
   few degrees apart, which reads as a stain rather than a highlight. */
html.theme-light .search-btn::before,html.theme-light .cart-btn::before,
html.theme-light .nav-btn::before,html.theme-light .menu-btn::before,
html.theme-light #kasaSettingsBtn::before,html.theme-light #kasaCurrencyBtn::before,
html.theme-light #kasaChatBtn::before,html.theme-light .qty-btn::before,
html.theme-light .kasa-opt::before,html.theme-light .k-peek::before,
html.theme-light .btn-outline::before,html.theme-light .btn-gold::before{
  background:linear-gradient(180deg,
    rgba(43,33,24,.55) 0%,
    rgba(43,33,24,.14) 28%,
    rgba(43,33,24,0) 64%);
  opacity:.34;
}

/* ---------- 15. LIGHT MODE, LEGIBLE ----------
   Panels were pure white on an off-white page, so the page glared and
   the cards vanished into it. Everything steps down a shade and the
   dividing lines get their contrast from warmth, not from black. */
html.theme-light{color-scheme:light;}
html.theme-light .nav-bar,html.theme-light .announce{
  background:rgba(239,233,220,.94) !important;
  border-bottom:1px solid rgba(184,134,43,.22) !important;
}
html.theme-light .k-nav-solid .nav-bar,html.theme-light .k-nav-solid .announce{
  background:rgba(239,233,220,.97) !important;
}
html.theme-light .nav-links a,html.theme-light .logo-mark span,
html.theme-light .search-btn,html.theme-light .cart-btn,html.theme-light .nav-btn{
  color:#191510 !important;
}
html.theme-light .menu-btn span{background:#191510 !important;}
html.theme-light .side-menu{background:rgba(239,233,220,.97) !important;}
html.theme-light .side-menu-links a{color:#191510 !important;}
html.theme-light .side-menu-links a{border-bottom-color:rgba(25,21,16,.12) !important;}
html.theme-light #kasaSettingsBtn,html.theme-light #kasaCurrencyBtn{
  background:rgba(246,241,230,.92) !important;
  border-color:rgba(184,134,43,.45) !important;
  color:#4A4034 !important;
}
html.theme-light #kasaChatBtn{
  background:rgba(246,241,230,.94) !important;
  border-color:rgba(184,134,43,.45) !important;color:#191510 !important;
}
html.theme-light .k-booksec{background:var(--bg) !important;}


/* ---------- 16. SKIPPING THE BOOK ----------
   A scroll-driven section three screens long is a lovely thing the first
   time and an obstacle the fifth. There is a way past it. */
.k-book-skip{
  position:absolute;right:clamp(20px,4vw,54px);top:clamp(20px,4vh,48px);
  font-family:var(--k-ui);font-weight:300;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);background:transparent;
  border:1px solid rgba(242,237,228,.2);border-radius:2px;
  padding:9px 14px;cursor:pointer;z-index:6;
  transition:color .3s ease,border-color .3s ease;
}
.k-book-skip:hover{color:var(--ink);border-color:rgba(242,237,228,.5);}
html.theme-light .k-book-skip{color:#5A5044;border-color:rgba(184,134,43,.4);}


/* ---------- 17. THE PROMPT, AND A LIGHT-MODE NAV ----------

   The close control on the first-visit prompt was inheriting the panel's
   button styling — a gold pill floating at the top LEFT of the card,
   which reads as an action rather than a dismissal. It is a small × in
   the corner, where a close control belongs.

   And the nav: over the hero the bar is transparent by design, which is
   right in the dark theme and wrong in the light one — dark ink on dark
   footage is invisible, which is why Shop and Support disappeared. While
   the bar is transparent the links stay light in BOTH themes; they only
   take the theme's ink once the bar goes solid. */
#kasaIntroClose{
  position:absolute !important;top:8px;right:10px;
  width:26px;height:26px;padding:0 !important;
  background:transparent !important;border:none !important;
  color:var(--ink-soft) !important;font-size:19px;line-height:1;
  cursor:pointer;border-radius:2px !important;
  transition:color .25s ease;
}
#kasaIntroClose:hover{color:var(--ink) !important;}
#kasaSettingsIntro h4{padding-right:26px;}

html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-links a,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .logo-mark span,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .search-btn,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .cart-btn,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-btn,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .announce{
  color:#F6F1E6 !important;
  text-shadow:0 1px 18px rgba(0,0,0,.85);
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .menu-btn span{
  background:#F6F1E6 !important;
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-bar,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .announce{
  border-bottom-color:transparent !important;
}


/* ---------- 18. ONE LIGHT, EVERY BUTTON ----------
   The peeping light and the travelling filament now go on the same set:
   every control on the site, nav icons included. Nothing is unlit and
   nothing has a different idea of what "interactive" looks like. */
.search-btn::before,.cart-btn::before,.nav-btn::before,.menu-btn::before,
.btn-outline::before,.btn-gold::before,.pdp-cta::before,.offer-cta::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 26%,rgba(255,255,255,0) 62%);
  opacity:.30;filter:blur(2.5px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.btn-outline:hover::before,.btn-gold:hover::before{opacity:.85;}

/* ---------- 19. THE BUTTON SHAPE ----------
   A slight, uneven curve rather than the same radius on all four
   corners. Equal radii read as a default; a larger sweep on one
   diagonal reads as drawn. Small enough that you feel it before you
   notice it. */
.btn-gold,.btn-outline,.pdp-cta,.offer-cta,
.email-form button[type="submit"],button.btn,a.btn{
  border-radius:12px 4px 12px 4px !important;
}
.search-btn,.cart-btn,.nav-btn{border-radius:10px 3px 10px 3px !important;}
.btn-gold:active,.btn-outline:active{border-radius:6px 10px 6px 10px !important;}

/* ---------- 20. LIGHT MODE: THE PIECES THAT VANISHED ----------
   The announce strip was ink-on-video colours over a beige bar, the
   menu bars were near-white on near-white, and the whole top of the
   page went unreadable. Everything above the fold is dark brown on
   paper now — the same contrast the body copy already had. */
html.theme-light .announce{
  background:#E1D8C6 !important;color:#4A3D2E !important;
  border-bottom:1px solid rgba(43,33,24,.14) !important;
}
html.theme-light .announce b{color:#A6572E !important;}
html.theme-light #kasa-visitor-badge{color:#6E6153 !important;opacity:.9;}
html.theme-light .menu-btn{
  background:rgba(43,33,24,.05) !important;
  border:1px solid rgba(43,33,24,.30) !important;
}
html.theme-light .menu-btn span{background:#2B2118 !important;height:1.8px !important;}
html.theme-light .search-btn,html.theme-light .cart-btn,html.theme-light .nav-btn{
  border-color:rgba(43,33,24,.26) !important;color:#2B2118 !important;
}
html.theme-light .nav-links a,html.theme-light .logo-mark span{color:#2B2118 !important;}
html.theme-light .k-marquee{
  border-color:rgba(43,33,24,.16) !important;
  background:linear-gradient(180deg,rgba(166,87,46,.05),transparent 60%) !important;
}
html.theme-light .trust-item h3::before{background:#A6572E !important;}
html.theme-light .nav-bar::after{
  background:linear-gradient(90deg,transparent,#A6572E,transparent) !important;
}
html.theme-light #kHeat{
  background:radial-gradient(circle,rgba(166,87,46,.10) 0%,rgba(166,87,46,.05) 34%,rgba(166,87,46,0) 68%) !important;
  mix-blend-mode:multiply;
}

/* ---------- 21. BIGGER WHERE IT COUNTS ----------
   Section headings and product names were sitting a size below where
   the hero set the expectation. */
h2{font-size:clamp(36px,4.6vw,72px) !important;}
h3{font-size:clamp(17px,1.35vw,21px) !important;}
.hero p:not(.hero-meta){font-size:clamp(17px,1.3vw,19.5px) !important;}
.trust-item h3{font-size:19px !important;}
.side-menu-links a{font-size:clamp(26px,4vw,54px) !important;}

/* ---------- 22. OVER THE FOOTAGE, STILL LIGHT ----------
   Section 20 sets the bar's contents to dark brown for light mode, which
   is right once the bar is solid and wrong while it is transparent over
   the hero video — that is how the wordmark went dark-on-dark. This has
   to come last so it wins over that block. */
html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-links a,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .logo-mark span,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .logo-mark span b,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .search-btn,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .cart-btn,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-btn{
  color:#F3EDE1 !important;
  border-color:rgba(243,237,225,.30) !important;
  text-shadow:0 1px 18px rgba(0,0,0,.85);
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .menu-btn{
  background:rgba(243,237,225,.06) !important;
  border-color:rgba(243,237,225,.32) !important;
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .menu-btn span{
  background:#F3EDE1 !important;
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .search-btn::before,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .cart-btn::before,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .nav-btn::before,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .menu-btn::before{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 26%,rgba(255,255,255,0) 62%);
}
html.theme-light body:has(.hero-video):not(.k-nav-solid) .k-rim-svg .k-core,
html.theme-light body:has(.hero-video):not(.k-nav-solid) .k-rim-svg .k-spill{
  stroke:#FFFFFF !important;
}

/* The prompt's action button was inheriting the old gold pill — the one
   yellow object left on a beige page. */
#kasaIntroDismiss{
  background:var(--bone) !important;
  color:var(--bg) !important;
  border:1px solid var(--bone) !important;
  border-radius:10px 3px 10px 3px !important;
  font-family:var(--k-ui) !important;font-weight:400 !important;
  font-size:10.5px !important;letter-spacing:.18em !important;text-transform:uppercase;
  padding:10px 16px !important;
}
#kasaSettingsIntro{
  background:var(--surface) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:14px 4px 14px 4px !important;
  color:var(--ink) !important;
}
#kasaSettingsIntro h4{color:var(--ink) !important;font-family:var(--k-ui) !important;}
#kasaSettingsIntro p{color:var(--ink-soft) !important;}
#kasaSettingsPanel{
  background:var(--surface) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:14px 4px 14px 4px !important;
}
#kasaSettingsPanel h4{color:var(--ink) !important;font-family:var(--k-ui) !important;}
.kasa-setting-label{color:var(--ink-soft) !important;}
.kasa-opt{
  background:transparent !important;color:var(--ink-soft) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:8px 3px 8px 3px !important;
  font-family:var(--k-ui) !important;letter-spacing:.14em;text-transform:uppercase;
}
.kasa-opt.active{background:var(--bone) !important;color:var(--bg) !important;border-color:var(--bone) !important;}

/* ---------- 23. ONE HALO, LITERALLY THE SAME ONE ----------
   Search still looked different from everything else because its own
   page-level rule carried a wider, warmer box-shadow than the shared
   one — the effect you liked was that halo, and only Search had it.

   Declared once here as --k-halo and applied to every control with the
   same value, so there is no longer such a thing as "the search glow";
   it is just how buttons look. */
:root{
  /* Slightly warmer than the pure bone it was — the glow now carries a
     little amber, which is what stops it reading as a grey blur. */
  --k-halo:
    0 0 0 1px rgba(242,237,228,.07),
    0 6px 22px -6px rgba(245,225,182,.38),
    0 0 30px -8px rgba(226,186,110,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
  --k-halo-hover:
    0 0 0 1px rgba(242,237,228,.16),
    0 8px 28px -6px rgba(245,225,182,.56),
    0 0 42px -8px rgba(226,186,110,.52),
    inset 0 1px 0 rgba(255,255,255,.13);
}
html.theme-light{
  /* On beige a brown-only halo just reads as a drop shadow — there was
     nothing GLOWING about it, which is why it looked absent. A warm
     amber core does the glowing and the brown does the seating, so the
     control sits on the paper AND emits a little light. */
  --k-halo:
    0 0 0 1px rgba(43,33,24,.08),
    0 0 20px -4px rgba(214,167,79,.55),
    0 6px 22px -6px rgba(43,33,24,.24),
    inset 0 1px 0 rgba(255,255,255,.6);
  --k-halo-hover:
    0 0 0 1px rgba(43,33,24,.15),
    0 0 34px -4px rgba(214,167,79,.85),
    0 8px 28px -6px rgba(43,33,24,.34),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.search-btn,.cart-btn,.nav-btn,.menu-btn,.btn-outline,.btn-gold,
.pdp-cta,.offer-cta,.email-form button[type="submit"],
button.btn,a.btn,.submit-btn,.qty-btn,
#kasaSettingsBtn,#kasaCurrencyBtn,#kasaChatBtn,.kasa-opt,#kasaIntroDismiss{
  box-shadow:var(--k-halo) !important;
  transition:box-shadow .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,color .3s ease,
             background .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.search-btn:hover,.cart-btn:hover,.nav-btn:hover,.menu-btn:hover,.btn-outline:hover,
.btn-gold:hover,.pdp-cta:hover,.offer-cta:hover,
.email-form button[type="submit"]:hover,button.btn:hover,a.btn:hover,.submit-btn:hover,
.qty-btn:hover,#kasaSettingsBtn:hover,#kasaCurrencyBtn:hover,#kasaChatBtn:hover,
.kasa-opt:hover,#kasaIntroDismiss:hover{
  box-shadow:var(--k-halo-hover) !important;
}


/* ---------- 24. THE LIGHT-MODE HERO ----------
   In light mode the hero shows photography instead of the film: stills
   of the mug, cross-fading on a slow cycle. The video is dark footage
   shot for a dark page — on paper it fought the theme no matter how the
   veil was tuned.

   Two layers only, swapping which one is on top, so a fade never has to
   wait for an image to decode: the incoming frame is already loaded and
   sitting underneath before it is revealed. */
.k-slides{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--bg-alt);
}
.k-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.5s ease, transform 8s linear;
}
.k-slide.k-show{opacity:1;transform:scale(1.0);}
html.theme-light .hero-video{display:none !important;}
/* The veil over stills is lighter than over the film — photographs are
   already brighter and do not need holding down as hard. */
html.theme-light .hero-overlay{
  background:linear-gradient(180deg,
    rgba(20,14,9,.44) 0%, rgba(20,14,9,.50) 44%,
    rgba(234,227,213,.90) 88%, var(--bg) 100%) !important;
}
@media(prefers-reduced-motion:reduce){
  .k-slide{transition:opacity .4s linear;transform:none !important;}
}

/* ---------- 25. DARK MODE: PREMIUM, WITHOUT THE DULL ----------

   The read was right. "Premium but dull" is a specific, diagnosable
   thing and it was three faults, none of them about the layout:

   1. THE NEUTRALS WERE PURPLE. --bg-alt #0E0C16 and --surface #14111E
      both carry a violet cast. A violet-grey next to a warm off-white
      text colour is the exact recipe for "murky" — the eye reads the
      mismatch as dirt on the screen rather than as a colour. They are
      warm charcoals now, in the same family as the ink.

   2. THE MID-TONES WERE TOO CLOSE TOGETHER. Body text at #8E8698 on
      #07060B is a low-contrast grey on near-black, and a page where
      everything sits in a narrow band of value has nothing for the eye
      to travel between. The text steps up and warms; the surfaces step
      apart so sections have layers.

   3. IT WAS PERFECTLY FLAT. Real black on a screen is inert. Every
      dark interface that reads as expensive has some texture in it —
      film grain, a vignette, a gradient. There is a very fine grain
      over the page now at 3% and a soft vignette at the edges. You
      should not be able to SEE either one; you should only notice that
      the black stopped looking like a switched-off monitor. */
:root{
  --bg-alt:#0C0B0D;
  --surface:#151317;
  --ink-soft:#A79E92;         /* warmer and lighter than the old violet-grey */
  --border:rgba(226,186,110,0.17);
  --border-strong:rgba(226,186,110,0.34);
}
html:not(.theme-light) body{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(226,186,110,.055), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(201,86,43,.045), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* Grain. An SVG turbulence tile, so it costs one small data URI and no
   image request, and it scales to any screen without tiling artefacts. */
html:not(.theme-light) body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.030;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* A vignette, barely. It gives the page edges instead of letting the
   black run off the screen in every direction. */
html:not(.theme-light) body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 92% 78% at 50% 46%,transparent 52%,rgba(0,0,0,.42) 100%);
}
/* The grain sits at z-index 1 and the vignette at 0, so the page chrome
   has to be above them. This rule used to list .side-menu, #kActs and
   #kSendoff here too and set the lot to 50 — which did not RAISE the
   menu, it DROPPED it, from 110 to below its own click-blocking overlay
   at 100. The menu still rendered and still animated, so it looked
   fine; every click just landed on the overlay instead, which closed
   it. Dark mode only, which is why light mode was unaffected.

   Each layer is now named at its real height, and nothing here can
   lower anything. */
html:not(.theme-light) .announce{z-index:51;}
html:not(.theme-light) .nav-bar{z-index:50;}
html:not(.theme-light) .side-menu{z-index:110;}
html:not(.theme-light) #kSendoff{z-index:9995;}
html:not(.theme-light) #kActs{z-index:9996;}

/* Sections get a ground of their own rather than all sitting on one
   flat black, so scrolling has a cadence. */
html:not(.theme-light) section:nth-of-type(even){
  background:linear-gradient(180deg,var(--bg-alt),rgba(12,11,13,0)) !important;
}
html:not(.theme-light) .trust{
  background:linear-gradient(180deg,rgba(226,186,110,.03),transparent 70%) !important;
}

/* Copy that can actually be read at a glance. Dull is very often just
   grey text nobody bothers to finish. */
html:not(.theme-light) p,
html:not(.theme-light) .hero p:not(.hero-meta),
html:not(.theme-light) .trust-item p{color:#A79E92 !important;}
html:not(.theme-light) .eyebrow,html:not(.theme-light) .kicker,
html:not(.theme-light) .section-label{color:#B5AB9C !important;}

/* One warm mark per block. The gold was so sparse it had stopped
   registering as a brand colour at all. */
html:not(.theme-light) .trust-item h3::before{
  background:linear-gradient(90deg,var(--gold-bright),var(--copper)) !important;
  width:26px !important;
}
html:not(.theme-light) .section-head .eyebrow{color:var(--gold-bright) !important;opacity:.85;}
html:not(.theme-light) .price,html:not(.theme-light) .pdp-price,
html:not(.theme-light) .spotlight-price{color:var(--gold-sheen) !important;}

/* The footage was dimmed and desaturated for legibility and went past
   the point where it still looked like film. */
html:not(.theme-light) .hero-video{
  filter:brightness(.62) saturate(.92) contrast(1.06) !important;
}
html:not(.theme-light) .hero-overlay{
  background:linear-gradient(180deg,
    rgba(7,6,11,.26) 0%,rgba(7,6,11,.38) 42%,
    rgba(7,6,11,.94) 88%,var(--bg) 100%) !important;
}

/* Cards stop being flat rectangles: a hairline of light along the top
   edge, which is how a physical surface catches a room. */
html:not(.theme-light) .product-card,html:not(.theme-light) .tile,
html:not(.theme-light) .card,html:not(.theme-light) .feature-card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)) !important;
  border-color:rgba(226,186,110,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 50px -34px rgba(0,0,0,.95) !important;
}
@media(prefers-reduced-motion:reduce){
  html:not(.theme-light) body::after{opacity:.02;}
}