/* ============================================================
   Kasa Essentials — shared UI layer
   One source of truth for: the Home button, footer social row,
   and interactive states on every button across the site.
   Loaded by every page. Uses each page's own CSS variables where
   they exist, with sensible fallbacks for the older pages.
   ============================================================ */

:root{
  --k-gold: #C9A227;
  --k-gold-bright: #E8C766;
  --k-on-gold: #0B0912;
  --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Home button (nav) ---------- */
a.k-home{
  display:inline-flex !important;align-items:center;gap:7px;
  font-family:'Geist',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.02em;
  color:var(--gold-bright,var(--k-gold-bright));
  border:1px solid rgba(201,162,39,0.38);
  border-radius:999px;padding:8px 16px;line-height:1;
  background:rgba(201,162,39,0.05);
  transition:background .3s var(--k-ease),border-color .3s var(--k-ease),
             transform .25s var(--k-ease),box-shadow .3s var(--k-ease),color .3s var(--k-ease);
  white-space:nowrap;text-decoration:none;
}
.k-home svg{width:14px;height:14px;flex:none;transition:transform .3s var(--k-ease);}
.k-home:hover{
  background:var(--gold-bright,var(--k-gold-bright));
  color:var(--on-gold,var(--k-on-gold));
  border-color:var(--gold-bright,var(--k-gold-bright));
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(232,199,102,0.65);
}
.k-home:hover svg{transform:translateX(-2px) scale(1.05);}
.k-home:active{transform:translateY(0) scale(0.97);}
.k-home:focus-visible{outline:2px solid var(--gold-bright,var(--k-gold-bright));outline-offset:3px;}

/* Home button in a page footer — slightly larger, centred */
.k-home-footer{margin-top:22px;}

/* Floating Home button — shown on pages whose nav scrolls away.
   Sits above the chat widget, below modals. */
.k-home-float{
  position:fixed;left:22px;bottom:22px;z-index:60;
  width:48px;height:48px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:rgba(11,9,18,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(201,162,39,0.4);
  color:var(--gold-bright,var(--k-gold-bright));
  box-shadow:0 14px 34px -14px rgba(0,0,0,0.8);
  transition:transform .3s var(--k-ease),background .3s var(--k-ease),box-shadow .3s var(--k-ease);
}
.k-home-float.k-visible{display:flex;animation:kFadeUp .45s var(--k-ease) both;}
.k-home-float:hover{
  background:var(--gold-bright,var(--k-gold-bright));
  color:var(--on-gold,var(--k-on-gold));
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 20px 40px -14px rgba(232,199,102,0.55);
}
.k-home-float:active{transform:translateY(0) scale(0.94);}
.k-home-float svg{width:19px;height:19px;}
@keyframes kFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Footer social row ---------- */
.k-socials{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.k-socials.k-center{justify-content:center;}
/* Specificity is deliberate — several pages style `.footer-col a` / `footer a`,
   which would otherwise override the icon colour and force display:block. */
.k-socials a.k-social{
  position:relative;
  width:42px;height:42px;border-radius:50%;
  display:inline-flex !important;align-items:center;justify-content:center;
  margin:0;padding:0;font-size:0;
  border:1px solid rgba(201,162,39,0.32);
  color:var(--gold-bright,var(--k-gold-bright));
  background:rgba(201,162,39,0.05);
  transition:transform .35s var(--k-ease),background .35s var(--k-ease),
             color .35s var(--k-ease),border-color .35s var(--k-ease),box-shadow .35s var(--k-ease);
}
.k-socials a.k-social svg{width:19px;height:19px;display:block;}
/* Linktree's glyph is tall and narrow — keep its aspect instead of squashing it */
.k-socials a.k-social svg[viewBox="0 0 22 38"]{width:12px;height:21px;}
.k-socials a.k-social:hover{color:var(--on-gold,var(--k-on-gold));}
.k-social:hover{
  transform:translateY(-4px) rotate(-4deg);
  background:var(--gold-bright,var(--k-gold-bright));
  color:var(--on-gold,var(--k-on-gold));
  border-color:var(--gold-bright,var(--k-gold-bright));
  box-shadow:0 16px 30px -12px rgba(232,199,102,0.6);
}
.k-social:active{transform:translateY(-1px) scale(0.93);}
.k-social:focus-visible{outline:2px solid var(--gold-bright,var(--k-gold-bright));outline-offset:3px;}
/* label on hover */
.k-social::after{
  content:attr(data-label);
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-bright,var(--k-gold-bright));background:rgba(11,9,18,0.94);
  border:1px solid rgba(201,162,39,0.3);border-radius:6px;
  padding:5px 9px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .25s var(--k-ease),transform .25s var(--k-ease);
}
.k-social:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
@media(hover:none){ .k-social::after{display:none;} }

.k-social-note{
  font-size:12px;color:var(--ink-soft,var(--soft-grey,#A8A39A));
  margin-top:12px;line-height:1.7;
}
.k-social-note a{color:var(--gold-bright,var(--k-gold-bright));}
.k-social-note a:hover{text-decoration:underline;}

/* ============================================================
   NAV ICONS — words on desktop, icons on mobile
   The label stays in the DOM (hidden) so screen readers and search
   engines still see it; each control also carries an aria-label.
   ============================================================ */
.k-ico{width:18px;height:18px;flex:none;display:block;}
.k-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;}
/* An empty cart shouldn't wear a badge saying "0" — on any screen */
.k-icon-btn .cart-count.k-zero{display:none !important;}

@media(max-width:760px){
  /* index.html used to hide the Account link on small screens because the
     word didn't fit. As a 42px icon it does, so bring it back. */
  a.cart-btn[href="account.html"].k-icon-btn,
  a.nav-btn[href="account.html"].k-icon-btn{display:inline-flex !important;}
  /* Collapse to a circular icon: quiet, evenly spaced, more jewellery
     than toolbar. */
  .nav-right,
  nav > div:last-child{gap:10px !important;}

  .k-icon-btn{
    width:42px !important;height:42px !important;
    min-width:42px;min-height:42px;
    padding:0 !important;border-radius:50% !important;
    gap:0 !important;
  }
  .k-icon-btn .k-lbl{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .k-icon-btn .k-ico{width:19px;height:19px;}

  /* Account and Cart: outlined, so the gold Search button stays the
     single point of emphasis. */
  a.nav-btn.k-icon-btn,
  button.cart-btn.k-icon-btn,
  a.cart-btn.k-icon-btn{
    background:rgba(201,162,39,0.05) !important;
    border:1px solid rgba(201,162,39,0.34) !important;
    color:var(--gold-bright,var(--k-gold-bright)) !important;
    box-shadow:none !important;
  }
  .search-btn.k-icon-btn{
    background:var(--gold-bright,var(--k-gold-bright)) !important;
    color:var(--on-gold,var(--k-on-gold)) !important;
    border:none !important;
  }

  /* Cart count becomes a small badge on the rim rather than inline text */
  .k-icon-btn .cart-count{
    position:absolute;top:-3px;right:-3px;
    min-width:19px;height:19px;padding:0 5px;
    border-radius:999px;
    background:var(--gold-bright,var(--k-gold-bright));
    color:var(--on-gold,var(--k-on-gold));
    font-family:'Geist Mono',monospace;
    font-size:10.5px;font-weight:600;line-height:19px;
    text-align:center;
    box-shadow:0 0 0 2px rgba(11,9,18,0.9);
  }
  /* An empty cart shouldn't wear a badge saying "0" */
  .k-icon-btn .cart-count.k-zero{display:none;}

  .k-icon-btn:active{transform:scale(0.93);}

  /* The wordmark was wrapping onto two lines and forcing the whole bar taller.
     The round emblem already reads "Kasa Essentials", so on a phone the mark
     carries the brand alone and the bar stays one clean line. */
  .logo-mark span{display:none !important;}
  .logo-mark img{height:38px !important;width:38px !important;}
  .logo-mark{gap:0 !important;}

  /* Menu joins the same family: gold hairline circle, gold strokes — instead
     of a lone purple-filled button sitting next to three gold ones. */
  .menu-btn{
    width:42px !important;height:42px !important;border-radius:50%;
    background:rgba(201,162,39,0.05) !important;
    border:1px solid rgba(201,162,39,0.34) !important;
    gap:4.5px !important;
  }
  .menu-btn span{
    background:var(--gold-bright,var(--k-gold-bright)) !important;
    width:15px !important;height:1.5px !important;border-radius:2px;
  }
  .menu-btn:active{transform:scale(0.93);}

  /* One filled button is emphasis; a glow around it is noise next to three
     outlined neighbours. */
  .search-btn.k-icon-btn{box-shadow:none !important;}

  nav{padding-top:10px !important;padding-bottom:10px !important;}
}

/* Tiny phones — trim the gaps a little further */
@media(max-width:380px){
  .nav-right,nav > div:last-child{gap:8px !important;}
  .k-icon-btn{width:40px !important;height:40px !important;min-width:40px;min-height:40px;}
  .menu-btn{width:40px !important;height:40px !important;}
}

/* ---------- Limited Release shipping offer band ---------- */
.offer-band{
  border:1px solid rgba(201,162,39,0.34);
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(232,199,102,0.09), transparent 55%),
    rgba(23,20,31,0.55);
  padding:22px 22px 18px;
  margin:0 0 18px;
}
.offer-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 0;
}
.offer-row + .offer-row{border-top:1px solid rgba(201,162,39,0.16);}
.offer-flag{font-size:26px;line-height:1.1;flex:none;}
.offer-row b{
  display:block;
  font-family:'Geist','Inter',sans-serif;
  font-size:15.5px;font-weight:600;letter-spacing:0.01em;
  color:var(--gold-bright,var(--k-gold-bright));
  margin-bottom:3px;
}
.offer-row span{
  display:block;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft,var(--soft-grey,#A8A39A));
}
.offer-note{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(201,162,39,0.16);
  font-size:12px;line-height:1.75;
  color:var(--ink-soft,var(--soft-grey,#A8A39A));
}
.offer-note a{color:var(--gold-bright,var(--k-gold-bright));text-decoration:underline;}

/* Compact inline version used under the price */
.spotlight-shipping-note b,.shipping-note b{color:var(--gold-bright,var(--k-gold-bright));font-weight:600;}
.spotlight-shipping-note a,.shipping-note a{color:var(--gold-bright,var(--k-gold-bright));text-decoration:underline;}

/* ---------- Community offer groups ---------- */
.community-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.community-item{
  display:flex;align-items:center;gap:11px;
  border:1px solid rgba(201,162,39,0.22);
  border-radius:12px;padding:13px 15px;
  background:rgba(201,162,39,0.045);
  font-size:13.5px;line-height:1.4;
  color:var(--ink,#F5F2EA);
  transition:border-color .3s var(--k-ease),background .3s var(--k-ease),transform .3s var(--k-ease);
}
.community-item span{font-size:19px;line-height:1;flex:none;}
.community-item:hover{
  border-color:rgba(232,199,102,0.55);
  background:rgba(201,162,39,0.09);
  transform:translateY(-2px);
}

@media(max-width:640px){
  .offer-band{padding:18px 16px 16px;border-radius:14px;}
  .offer-row{gap:12px;padding:11px 0;}
  .offer-flag{font-size:23px;}
  .offer-row b{font-size:14.5px;}
  .offer-row span{font-size:13px;}
  .offer-note{font-size:11.5px;}
  .community-grid{grid-template-columns:1fr;gap:8px;}
  .community-item{padding:12px 14px;font-size:13px;}
}

/* ---------- Interactive buttons, site-wide ---------- */
/* Applies to real <button>s and anything opted in with .k-btn.
   Deliberately does NOT change colours — only motion, depth and focus,
   so each page keeps its own look. */
button,
.k-btn,
.submit-btn,
.btn-gold,
.nav-btn{
  transition:transform .25s var(--k-ease),
             box-shadow .3s var(--k-ease),
             background .3s var(--k-ease),
             border-color .3s var(--k-ease),
             color .3s var(--k-ease),
             filter .3s var(--k-ease);
}
button:hover:not(:disabled),
.k-btn:hover,
.submit-btn:hover,
.btn-gold:hover,
.nav-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
button:active:not(:disabled),
.k-btn:active,
.submit-btn:active,
.btn-gold:active,
.nav-btn:active{
  transform:translateY(0) scale(0.975);
  filter:brightness(0.97);
}
button:disabled{cursor:not-allowed;opacity:0.55;transform:none;filter:none;}

/* Keyboard focus is always visible and on-brand */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold-bright,var(--k-gold-bright));
  outline-offset:2px;
  border-radius:4px;
}

/* Gold CTAs get a soft lift shadow on hover */
.submit-btn:hover,
.btn-gold:hover{
  box-shadow:0 18px 38px -16px rgba(232,199,102,0.7);
}

/* Ripple, injected by kasa-ui.js */
.k-ripple-host{position:relative;overflow:hidden;}
.k-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:0.28;
  transform:scale(0);animation:kRipple .62s var(--k-ease) forwards;
}
@keyframes kRipple{to{transform:scale(2.6);opacity:0;}}

/* Some controls shouldn't lift on hover — close ×, quantity steppers, tab
   bars, gallery thumbnails and arrows. They get their own feedback instead:
   a colour/scale change in place. Opt anything else out with .k-static. */
.k-static:hover,.k-static:active{transform:none !important;filter:none !important;}

.close-x, .search-close, .drawer-close, .discount-close,
.tab-btn, .thumb-btn, .visual-nav-arrow, .accordion-q, .menu-btn,
.qty-control button{
  transform:none !important;
}
.close-x:hover, .search-close:hover, .drawer-close:hover, .discount-close:hover{
  color:var(--gold-bright,var(--k-gold-bright)) !important;
  filter:none;
}
.qty-control button:hover:not(:disabled){
  color:var(--gold-bright,var(--k-gold-bright));
  filter:none;
}
.qty-control button:active:not(:disabled){filter:brightness(1.25);}
.thumb-btn{transition:border-color .3s var(--k-ease),opacity .3s var(--k-ease),box-shadow .3s var(--k-ease) !important;}
.thumb-btn:hover{box-shadow:0 0 0 1px var(--gold-bright,var(--k-gold-bright));opacity:1;filter:none;}
.visual-nav-arrow:hover{
  background:var(--gold-bright,var(--k-gold-bright)) !important;
  color:var(--on-gold,var(--k-on-gold)) !important;
  filter:none;
}
.menu-btn:hover span{background:var(--gold-bright,var(--k-gold-bright));}
.menu-btn span{transition:background .3s var(--k-ease),transform .3s var(--k-ease);}
.accordion-q:hover{color:var(--gold-bright,var(--k-gold-bright));filter:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .k-home:hover,.k-social:hover,button:hover,.k-btn:hover{transform:none;}
}

@media(max-width:700px){
  .k-home{padding:9px 15px;font-size:12.5px;}
  .k-socials{gap:10px;}
  .k-socials a.k-social{width:44px;height:44px;}
}

/* The product page's sticky "Join Waitlist" bar was sitting right on top of
   the bottom-left currency picker. Lift the picker (and its dropdown) clear
   whenever that bar is showing. Inline styles set these, hence !important. */
body:has(#stickyBar.show) #kasaBottomLeftBar{bottom:88px !important;}
body:has(#stickyBar.show) #kasaCurrencyPanel{bottom:152px !important;}
@media(max-width:700px){
  body:has(#stickyBar.show) #kasaBottomLeftBar{bottom:84px !important;}
  body:has(#stickyBar.show) #kasaCurrencyPanel{bottom:148px !important;}
}

/* The currency picker lives at bottom-left (bottom:24px). Sit the floating
   Home button directly above it rather than on top of it, and lift both clear
   of the product page's sticky Join Waitlist bar when that's showing. */
.k-home-float{bottom:86px;left:24px;}
body:has(#stickyBar.show) .k-home-float{bottom:150px;}
@media(max-width:700px){
  .k-home-float{left:18px;bottom:80px;width:46px;height:46px;}
  body:has(#stickyBar.show) .k-home-float{bottom:144px;}
}

/* The one-time "Make it yours" theme tip covered the whole top of the screen
   on a phone. Keep it, but sized for a small screen. */
@media(max-width:700px){
  #kasaSettingsIntro,#kasaSettingsPanel{
    width:auto !important;left:12px !important;right:12px !important;
    max-width:none !important;padding:16px !important;font-size:13px !important;
  }
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */

/* The slide-out side menu sits off-screen to the right when closed. On pages
   whose <body> didn't set overflow-x, that pushed the document out to ~989px
   wide on a 390px phone — the whole page scrolled sideways. `clip` rather than
   `hidden` because `hidden` would break the sticky nav bar. */
html{overflow-x:clip;}
body{overflow-x:clip;}

/* Comfortable tap targets. Apple and Google both put the minimum around 44px;
   the nav and footer links were 12–34px, which is a lot of mis-taps. */
@media(hover:none),(max-width:760px){
  .nav-links a,
  .side-menu-links a,
  .side-menu-footer a,
  .footer-col a,
  footer a{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  /* Footer columns and the side menu are vertical LISTS — they need to be
     block-level, not inline-flex, or every link runs together on one line
     ("New ReleasesAll ProductsWork & CommuteGifts"). Only the top nav is
     genuinely horizontal. */
  .footer-col a,
  .side-menu-links a{display:flex !important;width:100%;}
  .footer-col a{min-height:40px;margin-bottom:2px;}
  /* Footers that are a single run of text shouldn't have every link forced
     onto its own line — keep those inline but pad the hit area instead. */
  footer p a, .footer-bottom a, .k-social-note a{
    display:inline;min-height:0;
    padding:6px 2px;
  }
  .side-menu-footer{gap:24px;}
  .menu-btn{min-width:44px;min-height:44px;justify-content:center;align-items:center;}
  .close-x,.search-close{min-width:44px;min-height:44px;}
}

/* Stop iOS zooming the page when a field is focused — it does that whenever
   the font-size is under 16px. */
@media(max-width:760px){
  input,select,textarea{font-size:16px !important;}
}

/* ---------- Signup form: stack it on phones ----------
   As a single pill, the email input takes the width it needs and the button
   gets whatever's left — about 108px on a 390px phone, which forced "Join
   Kasa" onto two lines. Side by side simply doesn't fit. Stacked, both get
   full width and the button reads as a proper call to action. */
@media(max-width:560px){
  .email-form{
    flex-direction:column;
    gap:10px;
    border:none !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:none !important;
  }
  .email-form input[type="email"]{
    flex:none;
    width:100%;
    text-align:center;
    background:var(--surface,#12101B) !important;
    border:1px solid var(--border-strong,rgba(201,162,39,0.34)) !important;
    border-radius:999px !important;
    padding:14px 18px !important;
  }
  .email-form button[type="submit"]{
    flex:none;
    width:100%;
    border-radius:999px !important;
    padding:15px 20px !important;
    white-space:nowrap;
  }
}

/* Long unbroken strings (emails, URLs) were pushing layouts wide */
@media(max-width:640px){
  body{word-break:break-word;overflow-wrap:anywhere;}
  h1,h2,h3{overflow-wrap:break-word;}
  /* ...but not inside tables — a horizontally scrolling table should keep
     emails and names on one line rather than shredding them one letter wide. */
  table,th,td{word-break:normal;overflow-wrap:normal;}

  /* ...and never inside a button or a label. "anywhere" was splitting short
     letter-spaced labels mid-word — "Join Kasa" breaking after "Jo". Button
     text is short by definition and should never be hyphen-less-wrapped.
     Deliberately NOT using white-space:nowrap here — a long CTA on a 360px
     phone needs to be able to wrap at a space, and forcing one line is how
     you get sideways scroll back. */
  button,.btn,.btn-gold,.cart-btn,.nav-btn,.search-btn,
  input[type="submit"],input[type="button"],
  a.btn,a.btn-gold,a.cta,label,.k-lbl{
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
}

/* ============================================================
   MOBILE: the floating furniture
   On a wide screen the chat launcher, currency pill and Home
   button sit in empty margin. On a 390px phone the text runs
   nearly edge to edge, so all of it lands on top of words —
   a scroll test found it covering body copy on eight pages.
   Everything below shrinks that footprint or removes it.
   These use `body #id` and !important deliberately: chat-widget.js
   and currency-convert.js inject their styles at runtime, which
   puts them after this file in the cascade.
   ============================================================ */
@media(max-width:760px){

  /* The greeting bubble popped itself open over whatever you were
     reading, 180x64px of it. The launcher is still right there. */
  body #kasaChatGreet{display:none !important;}

  /* Launcher: 136px pill with a label -> 50px circle with the icon.
     Also drops the pulse animation, which drew the eye away from
     the page on every screen. */
  body #kasaChatBtn{
    width:50px !important;height:50px !important;
    min-width:50px;padding:0 !important;
    border-radius:50% !important;
    justify-content:center !important;gap:0 !important;
    right:14px !important;
    box-shadow:0 6px 18px -8px rgba(232,199,102,0.55) !important;
    animation:none !important;
  }
  body #kasaChatBtn span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }

  /* The currency pill goes. Two floating controls in two bottom corners is
     one too many on a 390px screen, and this was the one sitting on body
     copy across six pages. Prices already auto-detect from the visitor's
     location, so a phone visitor in NZ still sees NZD — the picker only
     mattered for someone deliberately choosing a currency that isn't
     theirs. Chat keeps the corner, the way it does on most sites.
     (Moving this into the side menu instead would be the better answer —
     that needs a change to currency-convert.js, not CSS.) */
  body #kasaBottomLeftBar,
  body #kasaCurrencyPanel{display:none !important;}

  /* The floating Home button earns its place on desktop. On a phone
     the logo and the menu both already go home, so it was a third
     tap target covering text for no new capability. */
  .k-home-float{display:none !important;}

  /* Whatever floats at the bottom, the last of the footer text must
     still be readable. This gives it somewhere to sit. */
  footer{padding-bottom:92px !important;}
  body:has(#stickyBar) footer{padding-bottom:150px !important;}
}

/* The Kasa Lab reel is a 500px-tall black rectangle until the video
   decodes its first frame — a long time on mobile data. Painting the
   poster as a background fills that hole; the video covers it. */
.reel-video{
  background-image:url("reel-poster.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}