:root{
  --bg:#070808;
  --bg2:#0b0c0d;
  --text:#f2f3f5;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --glass:rgba(22,22,22,.58);
  --border:rgba(255,255,255,.14);
  --shadow:0 16px 50px rgba(0,0,0,.55);
  --radius:18px;
  --gold:#B8860B;
  --gold2:#9c7209;
  --post-title-font: inherit;
  --post-title-size: 22px;
  --post-title-weight: 800;
  --post-title-letter-spacing: 0.3px;

  --z-ui-top: 30000;

}

*{box-sizing:border-box}
html,body{height:100%; background:var(--bg);}
body{
  margin:0;
  background:radial-gradient(900px 600px at 50% 0%, rgba(217,178,76,.10), transparent 55%),
             radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,.06), transparent 55%),
             linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

body.modal-open{ overflow:hidden; }

/* Messages/Group Thread converted from a fixed-position floating card to a full-page layout in
   normal document flow -- position:fixed combined with the iOS virtual keyboard was the root of
   the repeated push-down/spacing bugs fought all session; letting the browser's own real page
   scroll bring a focused input into view sidesteps that whole class of bug instead of patching
   it with more JS viewport math. Real page scroll needs the body to actually be scrollable
   (overridden here, specifically, while one of these two is open -- every other modal keeps the
   normal body.modal-open{overflow:hidden} locked-background behavior untouched), and the
   underlying active view hidden so it doesn't occupy flow space above the now-static modal. */
body.messages-modal-open.modal-open,
body.group-thread-modal-open.modal-open{
  overflow-y:auto;
  overflow-x:hidden;
}
body.messages-modal-open .view.is-active,
body.group-thread-modal-open .view.is-active{
  display:none;
}

.view{display:none; height:100dvh; width:100vw; position:relative;}
.view.is-active{display:block;}

a{color:inherit}
.subtle{color:var(--muted2)}
.h1{margin:0; font-size:16px; letter-spacing:.2px;}
.h2{margin:0 0 10px 0; font-size:16px; letter-spacing:.2px;}
.link{display:block; text-align:center; margin-top:10px; text-decoration:none; opacity:.8}
.link:hover{opacity:1}

.bg-brand{
  position:absolute; left:14px; top:10px;
  opacity:.65; font-size:14px;
}

.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.card{padding:18px}

.btn{
  border:1px solid rgba(212,175,55,.45);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px); box-shadow:0 0 14px 2px rgba(212,175,55,.65); border-color:#D4AF37;}
#btn-club:active, #btn-pay:active{box-shadow:0 0 14px 2px rgba(170,120,255,.65); border-color:rgb(170,120,255);}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

.btn-small{padding:10px 12px; border-radius:14px; font-size:13px}
.btn-pill{border-radius:999px; padding:10px 16px; font-size:13px}
#btn-live{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:999px;
  border:1px solid #B8860B;
  background:transparent;
  color:#B8860B;
  font-weight:800;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
  /* Disable double-tap-to-zoom on this button so a real double-tap reliably registers
     as two fast taps instead of being intercepted as a zoom gesture on mobile browsers. */
  touch-action:manipulation;
}
#btn-live:hover{
  box-shadow:0 0 12px rgba(184,134,11,.28);
}

/* #btn-video: a separate button next to #btn-live -- dark pill with amber text, matching
   the existing "Stop Live" / live-toggle pill treatment, not the round live-gold button. */
#btn-video{
  border:1px solid rgba(184,134,11,.55);
  background:rgba(0,0,0,.55);
  color:#B8860B;
  border-radius:999px;
  padding:10px 18px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  text-shadow:0 0 10px rgba(184,134,11,.55);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
  touch-action:manipulation;
  align-self:center;
  cursor:pointer;
}
#btn-video:hover{
  box-shadow:0 0 10px rgba(184,134,11,.28);
}
#btn-video:active{
  transform:scale(.98);
}
#btn-video.is-on,
#btn-video:active{
  background:#B8860B;
  color:#2A1F00;
  box-shadow:0 0 14px rgba(184,134,11,.5), inset 0 0 0 1px rgba(42,31,0,.18);
  text-shadow:0 0 8px rgba(184,134,11,.7);
}
#btn-video.is-countdown .video-gold-text{
  color:#C00000;
}
#btn-video.is-countdown.blink-off .video-gold-text{
  opacity:.25;
}

/* Live must stay dead-center of the frame regardless of Video's presence -- flex centering
   the pair as a group would shift Live off-center, so each button is positioned
   independently instead: Live pinned to the true 50% center, Video anchored to its right
   with a fixed gap. Height matches the original flex wrap's footprint (14px top padding +
   72px button + 6px bottom padding) so nothing shifts vertically either. */
.modal-post .live-gold-wrap{
  position:relative;
  height:92px;
}

.modal-post #btn-live{
  width:72px;
  height:72px;
  min-width:72px;
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
}

.modal-post #btn-live .live-gold-text{
  display:block;
  line-height:1;
}

.modal-post #btn-video{
  position:absolute;
  /* half of Live's 72px width + a clean 16px gap */
  left:calc(50% + 36px + 16px);
  top:50px;
  transform:translateY(-50%);
}

.modal-post #btn-video .video-gold-text{
  display:block;
  line-height:1;
}

/* #btn-live is absolutely centered via left:50%+translateX(-50%) in both of its homes (the
   composer and the live modal). CSS transforms don't merge -- a bare `scale()` here would
   silently replace that translateX and the button would visibly jump ~36px right (toward
   #btn-video) for the entire duration it's pressed, then spring back on release. Combining
   both in one value keeps it centered while still shrinking on press. */
#btn-live:active{
  transform:translateX(-50%) scale(.98);
}
#btn-live.is-on,
#btn-live:active{
  background:#B8860B;
  color:#2A1F00;
  box-shadow:0 0 18px rgba(184,134,11,.55), inset 0 0 0 1px rgba(42,31,0,.18);
  text-shadow:0 0 10px rgba(184,134,11,.75);
}

#btn-live.is-countdown .live-gold-text{
  color:#C00000;
}
#btn-live.is-countdown.blink-off .live-gold-text{
  opacity:.25;
}

#btn-live.is-stop .live-gold-text{
  color:#C00000;
}

.btn-outline{background:transparent}

.btn-gold{
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  border-color:rgba(0,0,0,.35);
  color:#121212;
  font-weight:800;
}
.btn-gold:hover{filter:brightness(1.03)}
.btn-ghost{background:rgba(255,255,255,.06)}

#btn-products{
  background: transparent;
  border: 0;
  padding: 6px 10px;
  color: #B8860B;
  font-weight: 800;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: #B8860B;
  text-underline-offset: 4px;
  position:fixed;
  top:196px;
  right:14px;
  z-index:70;
}
#btn-products:hover{ opacity: .95; }

@media (max-width: 520px){
  #btn-products{
    margin-bottom: -15px;
  }
}

.input{
  width:100%;
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  color:var(--text);
  border-radius:12px;
  padding:12px 12px;
  outline:none;
}
.input:focus{border-color:rgba(217,178,76,.55)}

/* iOS Safari auto-zooms the whole page on focus for any text input/textarea/select whose
   computed font-size is under 16px -- this is what read as "the screen jumps/floats" when
   tapping into a field. Most inputs across the app never set an explicit font-size at all,
   so they fell back to the browser's own ~13.3px default control font, well under that
   threshold. One low-specificity floor here covers every input/textarea/select site-wide;
   author styles always beat the user-agent default regardless of specificity, so this fixes
   the ones with no existing rule without needing !important, while anything with its own
   more specific font-size rule (badges, chips, non-form text) is completely unaffected. */
input, textarea, select{
  font-size:16px;
}

.field{display:flex; flex-direction:column; gap:6px}
.field > span{color:var(--muted); font-size:12px}

.stack{display:flex; flex-direction:column; gap:10px}

.filewrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.filewrap input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  margin:0;
}
.filebtn{
  border:1px solid rgba(212,175,55,.45);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  font-size:13px;
  white-space:nowrap;
}
.filehint{
  color:var(--muted2);
  font-size:12px;
}

.box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.25);
  margin:10px 0 12px;
}

#view-auth .bg-brand{
  display:none;
}

.auth-wrap{
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-wrap{
  width:min(380px, 100%);
  margin:0 auto;
}

.auth-masthead{
  text-align:center;
  margin-bottom:36px;
}
.auth-monogram-tag{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.auth-rule{
  width:56px;
  height:1px;
  margin:0 auto 18px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.65), transparent);
}
.auth-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:34px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--text);
}

/* Desktop split-screen rebuild of the auth/login page. Below this breakpoint, nothing here
   applies at all -- the mobile card above is completely untouched, same markup, same CSS path,
   zero regression risk. Above it, the single fixed-380px card (which is what read as "a mobile
   layout placed in a large window") is replaced with an actual two-panel desktop composition:
   a brand panel using the exact same monogram/hairline/serif-wordmark language already
   established (just at real desktop scale), and a form panel with breathing room proportional
   to the screen instead of a hardcoded mobile width. No new colors, no new typefaces, no
   invented copy -- same tokens (--bg/--gold/--text/--muted), same Georgia/system-ui pairing,
   same LNF/"Lust & Found" content, just actually composed for the space it has. */
.auth-brand-panel{
  display:none;
}

@media (min-width:900px){
  #view-auth{
    display:flex;
    align-items:stretch;
  }
  .auth-brand-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 58%;
    height:100dvh;
    position:relative;
    background:
      radial-gradient(700px 500px at 50% 38%, rgba(217,178,76,.12), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg2));
    border-right:1px solid rgba(212,175,55,.16);
  }
  .auth-brand-inner{
    text-align:center;
    padding:0 48px;
  }
  .auth-brand-panel .auth-monogram-tag{
    font-size:13px;
  }
  .auth-brand-panel .auth-rule{
    width:72px;
    margin:0 auto 26px;
  }
  .auth-brand-title{
    font-family: Georgia, "Times New Roman", serif;
    font-weight:400;
    letter-spacing:.03em;
    color:var(--text);
    font-size:clamp(48px, 5vw, 76px);
    line-height:1.05;
    text-wrap:balance;
  }

  .auth-wrap{
    flex:1 1 42%;
    width:100%;
    max-width:440px;
    height:100dvh;
    margin:0;
    padding:48px;
  }
  .auth-wrap .auth-masthead{
    display:none;
  }
  .auth-fields{
    margin-top:8px;
  }
}

.auth-fields{
  width:100%;
  display:flex;
  flex-direction:column;
}
#view-auth .auth-field{
  gap:8px;
  padding:16px 0;
  border-bottom:1px solid rgba(212,175,55,.22);
}
#view-auth .auth-field > span{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted2);
  font-family: system-ui, -apple-system, sans-serif;
}
#view-auth .auth-field input.input{
  width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--text);
  font-size:16px;
  font-family: Georgia, "Times New Roman", serif;
  padding:2px 0 4px;
  outline:none;
}
#view-auth .auth-field input.input::placeholder{
  color:var(--muted2);
  font-family: system-ui, -apple-system, sans-serif;
}
#view-auth .auth-field input.input:focus{
  border-color:transparent;
  box-shadow:none;
}

.auth-actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:30px;
}
#view-auth .btn-primary{
  background:transparent;
  border:1px solid rgba(212,175,55,.6);
  color:var(--text);
  border-radius:999px;
  padding:11px 30px;
  font-size:13px;
  letter-spacing:.08em;
  cursor:pointer;
  font-weight:600;
}
#view-auth .btn-link{
  background:none;
  border:0;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.05em;
  text-decoration:underline;
  text-decoration-color:rgba(212,175,55,.5);
  text-underline-offset:4px;
  cursor:pointer;
  padding:0;
}

/* #modal-signup: Variant B branding applied to the full registration form.
   All rules scoped to #modal-signup -- .field/.modal-card/.modal-actions/.btn-*
   are shared classes used by other modals, must not leak. */
#modal-signup .modal-card{
  border-color: rgba(212,175,55,.28);
  background: rgba(10,9,7,.92);
  overflow:auto;
}

.su-masthead{
  text-align:center;
  margin-bottom:28px;
}
.su-monogram-tag{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.su-rule{
  width:56px;
  height:1px;
  margin:0 auto 18px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.65), transparent);
}
.su-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:30px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--text);
}
.su-subtitle{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted2);
}

#modal-signup .field{
  gap:8px;
  padding:14px 0;
  border-bottom:1px solid rgba(212,175,55,.22);
}
#modal-signup .field:empty{
  border-bottom:none;
  padding:0;
}
#modal-signup .field > span{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted2);
}
#modal-signup .field input.input,
#modal-signup .field select.input{
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--text);
  font-size:16px;
  padding:2px 0 4px;
  outline:none;
}
#modal-signup .field input.input::placeholder{
  color:var(--muted2);
}
#modal-signup .field input.input:focus,
#modal-signup .field select.input:focus{
  border-color:transparent;
  box-shadow:none;
}

#modal-signup .modal-actions{
  margin-top:26px;
  align-items:center;
}
#modal-signup .btn-primary{
  background:transparent;
  border:1px solid rgba(212,175,55,.6);
  color:var(--text);
  border-radius:999px;
  padding:11px 30px;
  font-size:13px;
  letter-spacing:.08em;
  cursor:pointer;
  font-weight:600;
  min-width:0;
}
#modal-signup .btn-link{
  background:none;
  border:0;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.05em;
  text-decoration:underline;
  text-decoration-color:rgba(212,175,55,.5);
  text-underline-offset:4px;
  cursor:pointer;
  padding:0;
  min-width:0;
}

/* #modal-post: same thin-gold-hairline / minimalist language as #modal-signup and
   #modal-messages. Visual only -- every input/button here keeps its existing id, so none
   of the upload/publish/audience JS wiring is touched. */
#modal-post .modal-card{
  width:min(440px, calc(100vw - 36px));
  border-color: rgba(212,175,55,.28);
  background: rgba(10,9,7,.92);
  border-radius: 20px;
  padding: 22px 22px 20px;
  max-height: calc(100dvh - 40px);
  overflow:auto;
}
#modal-post .h2{
  font-family: Georgia, "Times New Roman", serif;
  font-size:22px;
  font-weight:400;
  letter-spacing:.02em;
  margin:0 0 18px;
  padding-right:28px;
}
#modal-post .h2::after{
  content:"";
  display:block;
  width:40px;
  height:1px;
  margin-top:12px;
  background:linear-gradient(90deg, rgba(212,175,55,.65), transparent);
}
#modal-post .modal-close{
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:0;
  background:transparent;
  color:#d4af37;
  font-size:20px;
  line-height:1;
}
#modal-post .modal-close:hover{
  background:transparent;
  opacity:.8;
}
#modal-post .stack{
  gap:14px;
}
#modal-post input.input,
#modal-post textarea.input{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(212,175,55,.22);
  border-radius:0;
  padding:10px 2px;
  font-size:16px;
}
#modal-post textarea.input{
  resize:vertical;
  min-height:60px;
}
#modal-post input.input::placeholder,
#modal-post textarea.input::placeholder{
  color:var(--muted2);
}
#modal-post input.input:focus,
#modal-post textarea.input:focus{
  border-color:rgba(212,175,55,.55);
  box-shadow:none;
}
#modal-post summary.input{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(212,175,55,.22);
  border-radius:0;
  padding:10px 2px;
  font-size:14px;
  color:var(--muted);
}
#modal-post .post-audience-wrap label.row-between{
  padding:5px 2px;
  font-size:14px;
}
#modal-post #post-audience-dropdown.stack{
  gap:2px;
}
#modal-post .filebtn{
  border-color: rgba(212,175,55,.45);
}
#modal-post .row-between{
  margin-top:4px;
  align-items:center;
}
#modal-post #btn-post-publish{
  border:1px solid rgba(212,175,55,.6);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:11px 26px;
  font-size:13px;
  letter-spacing:.06em;
  font-weight:600;
}
#modal-post #btn-post-publish:hover{
  background:rgba(212,175,55,.08);
}
/* Both children (img/video) are display:none until a file is actually selected -- with no
   chrome of its own, this wrapper collapses to zero height when empty instead of drawing an
   empty bordered box. Once media IS selected, it shows with no extra frame around it, matching
   the app's full-bleed media convention rather than boxing it in a second time. */
#modal-post .post-preview{
  padding:0;
  border:none;
  background:transparent;
  border-radius:0;
}
/* Store-name link and room avatar must not appear at all while Create Post is open -- same
   rule already applied for Club/PAY/Store/Friends. Not scoped to the mobile media query
   (unlike those) since the regression showed on desktop too: the centered, variable-height
   card can sit close enough to the top-right corner that a repositioned avatar isn't a
   reliable fix, so both are hidden outright, on every breakpoint. .room-avatar's visibility
   is toggled via inline style (roomAvatar.style.display) in ui.js, which beats a plain CSS
   rule regardless of specificity -- needs !important to actually win here. */
body.post-modal-open #btn-products{
  display:none;
}
body.post-modal-open .room-avatar{
  display:none !important;
}

.topbar{
  position:sticky; top:0;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  z-index: var(--z-ui-top);
}
.index-wrap{
  height:calc(100dvh - 56px);
  overflow:auto;

  padding:14px;
  padding-left: clamp(14px, 12vw, 180px);
  padding-right: clamp(14px, 12vw, 200px);
}
.index-grid{

  --tile: 240px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap:14px;
  padding-bottom:40px;
}
.room-card{
  height:220px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.room-card:hover{background:rgba(255,255,255,.07)}
.room-card .thumb{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:800;
  color:rgba(255,255,255,.85);
}
.room-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb-play-badge{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.95);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
}
.room-card .label{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 10px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));
  display:flex; justify-content:center;
  color:rgba(255,255,255,.9);
  font-weight:800;
}
.room-card .sub{
  position:absolute; left:0; right:0; bottom:8px;
  transform:translateY(26px);
  padding:0 10px;
  text-align:center;
  font-size:12px;
  opacity:.9;
}
.zoom{
  display:flex; align-items:center; gap:10px;
}
.zoom input{width:160px}

.btn-back{
  position:fixed;
  left:14px; top:14px;
  background:rgba(0,0,0,.35);
  z-index: var(--z-ui-top);
}
.room-center{
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:18px;
  position:relative;
  z-index:70;
}

#view-store{
  overflow-y:auto;
  background:#0b0b0b;
}
.store-page-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 18px 14px;
  background:rgba(11,11,11,.85);
  backdrop-filter:blur(8px);
}
.cart-icon-btn{
  position:relative;
  margin-left:auto;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.store-cart-count{
  position:absolute;
  top:-2px;
  right:-4px;
  background:#D4AF37;
  color:#0b0b0b;
  font-size:10px;
  font-weight:700;
  line-height:1;
  padding:2px 5px;
  border-radius:999px;
}
.store-cart-count.is-hidden{
  display:none;
}
.cart-item-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.cart-item-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;}
.cart-item-img--ph{background:rgba(255,255,255,.08);}
.cart-item-info{flex:1;min-width:0;}
.cart-item-title{font-size:13px;}
.cart-item-variant{font-size:11px;opacity:.6;}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;}
.cart-qty-btn{width:20px;height:20px;border:1px solid rgba(255,255,255,.2);background:none;border-radius:4px;cursor:pointer;}
.cart-item-price{font-size:12px;white-space:nowrap;}
.cart-item-remove{background:none;border:none;opacity:.5;cursor:pointer;font-size:14px;}
.cart-footer{margin-top:12px;}
.cart-footer.is-hidden{display:none;}
.cart-total-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;}
.store-page-title{
  font-weight:700;
  font-size:18px;
  color:#f5f0e0;
}
.store-page-content{
  min-height:60dvh;
  padding-bottom:40px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:hidden;
}

.room-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
  position: relative;
  z-index: 70;
}
.room-avatar{
  --avatar-size:72px;
  width:var(--avatar-size);
  height:var(--avatar-size);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);
  overflow:visible;
  position:fixed;
  top:108px;
  right:14px;
  z-index:70;
  display:none;
}

@media (max-width:767px){
  body.friends-modal-open .room-avatar{
    top:0;
    right:14px;
  }
  /* Messages is now a full-page layout (see the top of this file) -- repositioning these to
     float above the old fixed-size floating card (with a z-index higher than the modal's own)
     made sense when there was a modal to float above. Now the "modal" IS the whole page, so
     there's nothing left for them to float above; they'd just sit on top of real message
     content instead. Hidden outright, matching the exact same fix already applied to Group
     Thread below for the same underlying reason. */
  body.messages-modal-open #btn-products{
    display:none;
  }
  body.messages-modal-open .room-avatar{
    display:none !important;
  }
  #modal-messages.modal{
    align-items:flex-start;
    padding-bottom:18px;
  }
  #modal-messages .modal-card.modal-messages{
    margin-top:130px !important;
    height:calc(100dvh - 130px - 18px - clamp(18px, 4dvh, 40px));
    max-height:none;
  }
  #modal-messages .inbox-search{
    margin-top:0;
  }
  body.post-modal-open .bottom-tab,
  body.post-modal-open #bottom-bar,
  body.post-modal-open #room-post-actions,
  body.messages-modal-open .bottom-tab,
  body.messages-modal-open #bottom-bar,
  body.messages-modal-open #room-post-actions,
  body.friends-modal-open #room-post-actions,
  body.group-thread-modal-open #room-post-actions{
    display:none;
  }
  /* #modal-group-thread never got a body class at all before, so none of the avatar-safety
     rules above ever applied to it -- the avatar sat at its base top:108px position the whole
     time a group thread was open, which is what was colliding with the modal's own close X.
     Same fix as Post: hide outright rather than trying to reposition around a modal whose own
     height changes with keyboard state. */
  body.group-thread-modal-open #btn-products{
    display:none;
  }
  body.group-thread-modal-open .room-avatar{
    display:none !important;
  }
  body.post-modal-open #room-comment-compose{
    position:fixed;
    left:18px;
    right:18px;
    bottom:18px;
  }
  body.club-modal-open #btn-products,
  body.pay-modal-open #btn-products,
  body.view-is-store #btn-products,
  body.friends-modal-open #btn-products{
    display:none;
  }
  body.modal-open #btn-club,
  body.view-is-index #btn-club,
  body.view-is-store #btn-club,
  body.modal-open #btn-pay,
  body.view-is-index #btn-pay,
  body.view-is-store #btn-pay{
    display:none !important;
  }
}

.room-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.room-avatar-inner{
  width:100%;
  height:100%;
  border-radius:999px;
  overflow:hidden;
}
.room-avatar-badge{
  position:absolute;
  top:0;
  left:0;
  transform:translate(-40%,-40%);
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.65);
  color:rgba(255,255,255,.95);
  font-weight:800;
  font-size:14px;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  z-index:71;
  pointer-events:auto;
}
.room-avatar-badge.is-bell{
  /* .room-avatar is a fixed 72px circle, itself pinned close to the right edge of the
     viewport (right:14px) -- anchoring the badge to the top-RIGHT corner pushes part of it
     past the actual screen edge on real device widths (confirmed: badge box extended past
     x=390 on a 390px viewport). Top-left corner sits fully on-screen with the same
     proportional, geometry-based anchoring (no hand-picked pixel offsets). */
  width:auto;
  min-width:0;
  height:auto;
  top:0;
  left:0;
  transform:translate(-25%,-25%);
  padding:0;
  gap:calc(var(--avatar-size) * 0.07);
  font-size:calc(var(--avatar-size) * 0.25);
  border:none;
  background:transparent;
  color:#D4AF37;
  box-shadow:none;
}
.room-avatar-badge.is-bell svg{
  width:1.2em;
  height:1.2em;
  flex-shrink:0;
  filter:drop-shadow(0 0 4px rgba(184,134,11,.65));
}
.room-avatar-badge-count{
  font-weight:800;
  font-size:1em;
  line-height:1;
  color:#D4AF37;
  text-shadow:0 0 6px rgba(184,134,11,.65);
}
.room-avatar.is-requested{
  border-color: rgba(80, 220, 140, .95);
}
.room-avatar.is-close-friend-pending{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(95, 220, 255, .85),
    0 0 0 6px rgba(95, 220, 255, .22);
}
.room-avatar.is-close-friend{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(217,178,76,.95),
    0 0 0 6px rgba(202,160,58,.72);
}
.avatar-mini.is-close-friend{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(217,178,76,.95),
    0 0 0 6px rgba(202,160,58,.72);
}
.room-avatar.is-vip,
.avatar-mini.is-vip{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(212,128,255,.92),
    0 0 0 6px rgba(118,62,196,.62);
}
.room-avatar.is-member,
.avatar-mini.is-member{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(70,208,120,.92),
    0 0 0 6px rgba(52,130,82,.52);
}
.room-avatar.is-follower,
.avatar-mini.is-follower{
  border-color: rgba(255,255,255,.98);
  box-shadow:
    0 0 0 2px rgba(88,168,255,.94),
    0 0 0 6px rgba(46,94,176,.52);
}

.pill{
  padding:6px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
}
.media-frame{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  border-radius:0;
  background:rgba(255,255,255,.03);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:1;
  /* Without this, a horizontal drag near the screen edge can be claimed by the browser's own
     native swipe-back-in-history gesture (confirmed: this is what was navigating away to
     #auth) instead of our own pointer-based swipe handling -- pan-y keeps vertical scroll
     native while telling the browser we own horizontal gestures here. */
  touch-action:pan-y;
}

/* Sliding preview of the adjacent post shown during a swipe drag, so the gap left by
   .media-frame moving away reveals real incoming content instead of blank background --
   same fixed full-screen footprint and z-index (a sibling representing "the next screen"),
   positioned off to one side via transform and only ever visible mid-drag. */
#swipe-incoming-frame{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  z-index:1;
  pointer-events:none;
}
#swipe-incoming-frame img{
  width:100%; height:100%;
  object-fit:cover;
}

.media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--media-url);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: blur(22px);
  transform: scale(1.12);
  opacity:.28;
  z-index:0;
  pointer-events:none;
}

.media-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:none;
  /* Without this, a drag that starts unclaimed (e.g. our own edge-zone exclusion for the
     swipe gesture) can be picked up by the browser's native image drag-out instead, which
     was confirmed to disrupt the pointer event sequence for the NEXT gesture on the same
     element. */
  -webkit-user-drag:none;
  user-select:none;
}
.media-frame video{
  width:100%; height:100%;
  object-fit:cover;
  display:none;
  user-select:none;
}

#room-post-overlay{
  position:absolute;
  inset:0;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
  z-index:2;
}

#room-live-banner{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(42,31,0,.55);
  border: 1px solid rgba(184,134,11,.55);
  pointer-events:auto;
  z-index: 65;
}
#room-live-banner[hidden]{ display:none; }
#room-live-banner .room-live-badge{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  color:#DAA520;
}
#room-live-banner .room-live-watch{
  font-size:12px;
  font-weight:700;
  color:#B8860B;
  background:transparent;
  border:1px solid rgba(184,134,11,.65);
  border-radius:999px;
  padding:6px 10px;
}
#room-live-banner .room-live-watch:active,
#room-live-banner .room-live-watch:focus-visible{
  box-shadow: 0 0 0 2px rgba(184,134,11,.25), 0 0 10px rgba(184,134,11,.18);
}

@media (max-width: 767px){
  #room-live-banner{
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 12px;
  }
}

/* Post actions (Like / Comment / Share)
   Place inside the media area while avoiding overlap with the fixed right dock. */
#room-post-actions{
  position:absolute;
  display:flex;
  gap:10px;
  pointer-events:auto;
  z-index: 60;
  right: calc(14px + 160px + 14px);
  bottom: 86px;
}

@media (max-width: 767px){
  #room-post-actions{
    right: 12px;
    bottom: 130px;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}

/* Custom play/progress control for video posts, replacing the native <video controls> bar
   entirely -- the video element itself is never resized/repositioned (its full-frame,
   original-aspect-ratio display is untouched), so this is the only way to give the control
   its own exact position without cropping or resizing the video.
   Positioned 12px above the Menu bar (.bottom-tab), NOT relative to #room-post-actions --
   position:fixed so it shares .bottom-tab's own viewport-relative coordinate system
   (.bottom-tab is bottom:14px, fixed, 37px tall -- measured, not guessed), making the 12px gap exact and independent
   of the media-frame's own height. Nothing else (Like/Comment/Share, Club, Products, Menu
   bar itself) is touched. */
.room-video-controls{
  position:fixed;
  left:14px;
  right: calc(14px + 160px + 14px);
  bottom: calc(14px + 37px + 12px);
  z-index:61;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
}
.room-video-controls[hidden]{ display:none; }
@media (max-width: 767px){
  .room-video-controls{
    left:12px;
    right:12px;
    bottom: calc(14px + 37px + 12px);
  }
}
#room-video-playpause{
  width:34px; height:34px; min-width:34px;
  border-radius:999px;
  border:1px solid rgba(184,134,11,.55);
  background:rgba(0,0,0,.55);
  color:#B8860B;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}
.room-video-progress{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.room-video-progress-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:#B8860B;
}
.room-video-time{
  color:#B8860B;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#room-video-mute{
  width:34px; height:34px; min-width:34px;
  border-radius:999px;
  border:1px solid rgba(184,134,11,.55);
  background:rgba(0,0,0,.55);
  color:#B8860B;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}

#room-post-actions button{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 800;
  color: inherit;
  cursor: pointer;
}

#room-post-actions button .act-label{
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

#room-post-actions button .act-count{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  min-height: 12px;
}

#room-post-actions button:hover{
  opacity: 0.9;
}

#room-post-actions button:active{
  opacity: 0.85;
}

#room-comment-compose{
  position: absolute;
  right: calc(14px + 160px + 14px);
  bottom: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 60;
}

@media (max-width: 767px){
  #room-comment-compose{
    right: 12px;
    bottom: 8px;
    gap: 6px;
  }
}

#room-comment-compose.is-hidden{ display: none; }

#room-comments-panel{
  position: absolute;
  right: calc(14px + 160px + 14px);
  bottom: 150px;
  max-width: 360px;
  max-height: 180px;
  overflow: auto;
  pointer-events: auto;
  z-index: 60;
}

@media (max-width: 767px){
  #room-comments-panel{
    right: 12px;
    bottom: 120px;
    max-width: calc(100vw - 24px);
    max-height: 160px;
  }
}

#room-comments-panel.is-hidden{ display: none; }

#room-comments-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.room-comment-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.room-comment-name{
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.room-comment-text{
  font-weight: 600;
  font-size: 12px;
}

#post-comment-input{
  width: 220px;
  max-width: 54vw;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.85);
  border-radius: 0;
  padding: 2px 6px;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
}

#post-comment-input::placeholder{ color: rgba(255,255,255,0.7); }

#post-comment-send{
  background: transparent;
  border: 0;
  padding: 0 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#room-post-title{
  align-self:center;
  text-align:center;
  width:100%;
  font-family: var(--post-title-font, inherit);
  font-size: var(--post-title-size, 22px);
  font-weight: var(--post-title-weight, 800);
  letter-spacing: var(--post-title-letter-spacing, 0.3px);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  max-width:100%;
  font-family: var(--post-title-font, inherit);
  color:#fff;
  -webkit-text-stroke: 0.35px rgba(0,0,0,.6);
  background:transparent;
  border:0;
}

#room-post-caption{
  align-self:flex-start;
  max-width:min(2in, 45vw);
  font-size:14px;
  line-height:1.35;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  color:#fff;
  -webkit-text-stroke: 0.25px rgba(0,0,0,.55);
  background:transparent;
  border:0;
}
.media-fallback{
  color:rgba(255,255,255,.55);
  font-weight:600;
  display:none;
}
.room-footer-label{display:none}

.dock{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:160px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: var(--z-ui-top);
}
.dock-left{left:14px}
.dock-title{font-size:12px; padding:0 4px}
.dock-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.commandbar{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  padding:0;
  z-index: var(--z-ui-top);
  transition: opacity .18s ease, transform .18s ease;
}

.commandbar.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}

.bottom-tab{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index: var(--z-ui-top);
  padding:10px 18px;
}

body.live-recording .bottom-tab {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
}

body.live-recording #bottom-bar {
	opacity: 0;
	pointer-events: none;
}

.bottom-tab.is-hidden{
  opacity: 0;
  pointer-events:none;
}
.bottom-tab, #btn-club, #btn-pay, .commandbar .btn-pill{
  padding:8px 13px;
  font-size:12px;
}
@media (max-width:767px){
  .commandbar .btn-pill{
    white-space:nowrap;
  }
  #bottom-bar:not(.is-hidden) ~ .corner-actions #btn-club,
  #bottom-bar:not(.is-hidden) ~ .corner-actions #btn-pay{
    position:fixed;
    bottom:54px;
    right:14px;
    z-index: var(--z-ui-top);
  }
  body.view-is-index #btn-products{
    display:none;
  }
}
.corner-actions{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  gap:10px;
  z-index: var(--z-ui-top);
}

.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  z-index:500;
}
.modal.is-open{display:flex}
.modal-card{
  width:min(420px, calc(100vw - 36px));
  padding:16px;
  position:relative;
}

#modal-voice-time .modal-card{
  border:1px solid #D4AF37;
  border-radius:8px;
}
.client-card{
  width:min(480px, calc(100vw - 36px));
  background:rgba(10,10,10,.85);
  color:#f5f0e0;
  border:1px solid #D4AF37;
  border-radius:16px;
  box-shadow:0 0 24px rgba(212,128,255,.55), 0 16px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  text-align:center;
}
.client-card-avatar-wrap{ display:flex; justify-content:center; margin-top:8px; }
.client-card-avatar{ width:110px; height:110px; border-radius:50%; }
.client-card-name{ font-weight:800; font-size:20px; margin-top:12px; color:#f5f0e0; }
.client-card-desc{ font-size:13px; margin-top:4px; color:#cfc7b0; }
.client-card-actions{ display:flex; justify-content:center; gap:20px; margin-top:18px; }
/* These three buttons never had their own rule before -- they were rendering with the
   browser's default UA button chrome (border/background), which is what read as an
   unintended "frame" around each icon. Voice and video get their own text label (in
   addition to their already-distinct icon shapes) so they're unambiguous at a glance,
   not just on close inspection. */
.client-card-actions button{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:transparent;
  border:0;
  padding:6px 4px;
  cursor:pointer;
  color:#D4AF37;
}
.client-card-actions button:hover{ opacity:.85; }
.client-card-action-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:#D4AF37;
}
.client-card-block-btn{
  display:block;
  width:100%;
  margin-top:20px;
  padding:10px;
  background:transparent;
  color:#f5f0e0;
  border:1px solid rgba(144,105,9,.35);
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
.client-card-block-btn:hover{ border-color:#906909; color:#a8654a; }
#modal-voice-time #voice-time-send{
  border:1px solid #D4AF37;
  box-shadow:0 0 8px rgba(212,175,55,.6);
}
.voice-wheels{
  display:flex;
  gap:10px;
  justify-content:center;
  position:relative;
  margin:14px 0;
}
.voice-wheel{
  height:108px;
  width:72px;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.voice-wheel::-webkit-scrollbar{ display:none; }
.voice-wheel-amount{ width:84px; }
.voice-wheel-pad{ height:36px; flex:none; }
.voice-wheel-item{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  opacity:.4;
  font-size:15px;
  color:#fff;
  transition:opacity .15s;
}
.voice-wheel-item.is-center{
  opacity:1;
  font-weight:700;
  color:#D4AF37;
}
.voice-wheels::before, .voice-wheels::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height:1px;
  background:rgba(217,178,76,.4);
  pointer-events:none;
}
.voice-wheels::before{ top:36px; }
.voice-wheels::after{ top:72px; }

#modal-products.modal{
  background:#1a1a1a;
  z-index:20000;
  overflow:hidden;
}

.store-design-panel{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:16px;
  margin:8px 12px 12px;
  max-height:70dvh;
  overflow-y:auto;
}

.store-design-panel.is-hidden{
  display:none;
}

.store-owner-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

#modal-products .modal-card{
  position:relative;
  z-index:1;
  background:#ffffff;
  color:#2A1F00;
  border:4px solid #DAA520;
  border-radius:16px;
  box-shadow: 0 0 0 1px rgba(184,134,11,.35), 0 16px 48px rgba(0,0,0,.18);
  backdrop-filter: none;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}

#modal-products .h2{
  display:inline-block;
  font-weight:800;
  color:#D4AF37;
  font-size:22px;
  text-decoration: underline;
  text-decoration-color:#DAA520;
  font-size:22px;
  text-underline-offset: 4px;
}

#modal-products .prod-create-title{
  font-size:17px;
  font-weight:700;
  color:#2A1F00;
  text-decoration: underline;
}

.store-theme-sections{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.store-theme-section-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
}
.store-theme-section-label{
  flex:1 1 auto;
}
.store-theme-section-row .btn{
  padding:2px 10px;
  min-width:0;
}
.store-theme-section-visible{
  flex:0 0 auto;
  width:16px;
  height:16px;
  accent-color:#B8860B;
}
.store-theme-section-always{
  flex:0 0 auto;
  width:16px;
  display:inline-block;
}
.store-theme-tabs-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  padding:4px 2px;
  cursor:pointer;
}
.store-theme-tabs-toggle input{
  accent-color:#B8860B;
}

#modal-products .box.subtle{
  max-height: var(--prod-list-max-h);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border:0;
  background:transparent;
  padding:0;
  margin:8px 0 12px;
  font-size:15px;
  color:#D4AF37;
}

#modal-products{
  --prod-divider-width: 92%;
  --prod-divider-main: #DAA520;
  --prod-divider-accent: #B8860B;
  --prod-divider-strong-h: 0.5px;
  --prod-divider-soft-h: 0.1px;
  --prod-list-max-h: 260px;
}

#modal-products .box.subtle{
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
#modal-products .box.subtle::after{
  content: '';
  display: block;
  width: var(--prod-divider-width);
  height: var(--prod-divider-strong-h);
  margin: 12px auto 0;
  background: var(--prod-divider-main);
  box-shadow: 0 var(--prod-divider-strong-h) 0 var(--prod-divider-accent);
  border-radius: 999px;
}

#modal-products .product-row{
  position: relative;
  border-bottom: 0 !important;
}
#modal-products .product-row::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: var(--prod-divider-width);
  height: var(--prod-divider-soft-h);
  background: var(--prod-divider-main);
  box-shadow: 0 var(--prod-divider-soft-h) 0 var(--prod-divider-accent);
  border-radius: 999px;
}

#modal-products .product-row .li-content,
#modal-products .product-row .li-content .li-title,
#modal-products .product-row .li-content .li-titleline,
#modal-products .product-row .li-content .li-sub{
  color:#D4AF37;
}

#modal-products .product-row .li-content,
#modal-products .product-row .li-content .li-title,
#modal-products .product-row .li-content .li-titleline,
#modal-products .product-row .li-content .li-sub{
  font-size:18px;
  line-height:1.25;
}
#modal-products .product-row .prod-actions .li-remove{
  color:#2A1F00;
  text-decoration:none;
  font-size:14px;
}

#modal-products .product-row:last-child::after{
  content: none;
}

#modal-products .stack{ gap:12px; font-size:14px; }

#modal-products .input{
  background: transparent;
  border: 0;
  border-bottom: 1px solid #DAA520;
  border-radius: 0;
  padding: 2px 6px;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

#modal-products .input:focus{ border-bottom-color:#DAA520; }

#modal-products .input::placeholder{ color:#B8860B; }

#modal-products .stack{ color:#2A1F00; }
#modal-products .stack .label{ color:#2A1F00; }
#modal-products .stack .input{ border-bottom-color:#2A1F00; color:#2A1F00; }
#modal-products .stack .input:focus{ border-bottom-color:#2A1F00; }
#modal-products .stack .input::placeholder{ color:#2A1F00; }
#modal-products .stack #prod-images::file-selector-button{ color:#2A1F00; border:1px solid #2A1F00; background:transparent; }
#modal-products .stack #prod-images::-webkit-file-upload-button{ color:#2A1F00; border:1px solid #2A1F00; background:transparent; }
#modal-products .stack #btn-add-product{ color:#B8860B; }
#modal-products .stack #btn-cancel-product{ color:#2A1F00; border-color:#2A1F00; font-weight:600; }
#modal-products .stack #btn-cancel-product:active,
#modal-products .stack #btn-cancel-product:focus-visible{ color:#D4AF37; box-shadow:0 0 0 2px rgba(212,175,55,.35), 0 0 12px rgba(212,175,55,.25); }

#modal-products #btn-add-product{
  background: transparent;
  border: 0;
  padding: 0 6px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 800;
  color:#2A1F00;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color:#DAA520;
  text-underline-offset: 3px;
}

#modal-products .modal-close{
  background: transparent;
  border: 0;
  color:#DAA520;
  width:44px;
  height:44px;
  font-size: clamp(24px, 5vw, 34px);
  line-height:1;

  box-shadow:none;
  border-radius:0;
}
#modal-products .modal-close:hover,
#modal-products .modal-close:active,
#modal-products .modal-close:focus-visible{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  opacity: 1;
  color:#B8860B;
}

.friends-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.friends-col{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  min-height: 220px;
}

#modal-friends{
  z-index: 21000;
  padding: 18px 18px 18px 246px;
}

#modal-friends .modal-card.friends-nobox{
  width: min(420px, calc(100vw - 300px));
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

@media (max-width: 980px){
  #modal-friends{
    padding: 18px;
  }

  #modal-friends .modal-card.friends-nobox{
    width: min(420px, calc(100vw - 36px));
  }
}

#modal-friends .friends-col{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
}

#modal-friends .modal-head{padding: 10px 18px 0 18px; position:relative; min-height:44px;}
#modal-friends .modal-body{padding: 0 18px 18px 18px;}

/* Friends screen polish pass -- refined spacing + a bit more of the app's gold language.
   All scoped to #modal-friends; .li-contact/.li-contact-mini are exclusive to this screen so
   restyling them directly is safe, but kept scoped anyway for clarity. */
#modal-friends .modal-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:20px;
  letter-spacing:.02em;
}

/* Replace the generic grey-box close button with the app's refined X (transparent, gold glyph --
   same treatment as #modal-messages/#modal-group-thread's .modal-x). */
#modal-friends .modal-close{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:none;
  border-radius:0;
  background:transparent;
  color:#d4af37;
  font-size:22px;
  line-height:1;
}
#modal-friends .modal-close:hover{
  opacity:.8;
  background:transparent;
}

.friends-search{
  padding:26px 0 10px;
}
.friends-search-input{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(212,175,55,.2);
  border-radius:0;
  padding:6px 2px;
  font-size:16px;
}
.friends-search-input:focus{
  border-bottom-color: rgba(212,175,55,.5);
  box-shadow:none;
}
.friends-search-input::placeholder{
  color:var(--muted2);
}

#modal-friends .friends-tabs{
  gap:10px;
  padding-top:14px;
}
#modal-friends .friends-tab{
  border-color: rgba(212,175,55,.25);
  background: rgba(255,255,255,.03);
  padding:9px 16px;
  font-size:13px;
  letter-spacing:.02em;
  transition: border-color .15s ease, background .15s ease;
}
#modal-friends .friends-tab.is-active{
  background: rgba(212,175,55,.1);
  border-color: rgba(212,175,55,.6);
  color: #D4AF37;
}

#modal-friends .dock-title{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted2);
  padding:0 2px;
  margin-bottom:4px;
}

#modal-friends .list{
  margin:16px 0 4px;
  gap:2px;
}
#modal-friends .list-item{
  padding:16px 4px;
  border-bottom:1px solid rgba(212,175,55,.16);
}
#modal-friends .li-left{
  gap:14px;
}
#modal-friends .avatar-mini{
  border-color: rgba(212,175,55,.3);
}
#modal-friends .li-titleline{
  gap:12px;
}
#modal-friends .li-contact{
  margin-left:10px;
  padding:5px 13px;
  font-size:12.5px;
}
#modal-friends .li-contact-actions{
  gap:10px;
  margin-top:10px;
}
#modal-friends .li-contact-mini{
  padding:8px 16px;
  font-size:13px;
  letter-spacing:.02em;
  transition: background .15s ease, border-color .15s ease;
}
#modal-friends .li-contact-mini:hover{
  border-color: rgba(212,175,55,.9);
}

.list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:8px 0;
  padding:0;
}

.list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 6px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  border-radius:0;
  background:transparent;
  /* .list-item never set its own text color, relying on inheriting it from an ambient
     container. That's fine for a <div>, but the new-message "To:" suggestions render these as
     real <button> elements (so they're properly tappable/focusable) -- and buttons get the
     browser's own default (dark) button text color instead of inheriting, which is invisible
     against this app's dark theme. Forcing inherit fixes it regardless of which tag renders it. */
  color:inherit;
  text-align:left;
  font:inherit;
  width:100%;
}
.list-item:last-child{border-bottom:0;}

.notif-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.notif-row + .notif-row{ margin-top:2px; }

.notif-text{
  font-weight:600;
  line-height: 1.2;
  min-width: 0;
}
.notif-name{
  font-weight:800;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.notif-rest{
  font-weight:600;
}

.notif-mark{
  display:inline-block;
  border:0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-weight: 800;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}

.notif-mark:hover{ opacity: 0.9; }
.notif-mark:active{ opacity: 0.85; }

.list-item .li-left{ display:flex; align-items:center; gap:10px; min-width: 0; }
.list-item .li-content{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.list-item .li-title{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .li-sub{ font-size: 12px; opacity: .75; }
.list-item .li-sub a{ color: inherit; text-decoration: underline; }

.product-row{
  cursor: pointer;
}
.product-row:hover{
  background: rgba(255,255,255,.04);
}
.product-row .prod-thumb{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.30);
  background: rgba(255,255,255,.06);
}
.product-row .prod-thumb--ph{
  border-style: dashed;
  opacity: .55;
}
.product-row .li-sub{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-item .li-titleline{ display:flex; align-items:baseline; gap:10px; }
.list-item .li-remove{
  border:0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 12px;
  opacity: .65;
  cursor: pointer;
  color: inherit;
}

.li-contact{
  margin-left: 8px;
  border: 1px solid rgba(212,175,55,.55);
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #D4AF37;
  cursor: pointer;
  opacity: .92;
}
.li-contact:hover{
  background: rgba(212,175,55,.12);
  border-color: rgba(212,175,55,.75);
}
.list-item .li-remove:hover{ opacity: .95; text-decoration: underline; }

.li-contact-actions{
  display:none;
  gap:8px;
  margin-top:6px;
}
.li-contact-actions.is-open{
  display:flex;
}
.li-contact-mini{
  appearance:none;
  border:1px solid rgba(200,160,70,.9);
  background: rgba(0,0,0,.35);
  color: var(--text);
  padding:4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.li-contact-mini:hover{
  background: rgba(0,0,0,.5);
}

.list-item .li-actions{ display:flex; align-items:center; gap:8px; }

.avatar-mini{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  overflow: hidden;
  position: relative;
}
.avatar-fallback{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 980px){
  .friends-grid{ grid-template-columns: 1fr; }
  .modal-wide{ max-width: 720px; }
}
.modal-wide{width:min(980px, calc(100vw - 36px))}
.modal-close{
  position:absolute; right:12px; top:10px;
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.85);
  cursor:pointer;
}
.modal-close:hover{background:rgba(255,255,255,.08)}

.form-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.span2{grid-column: 1 / -1}
.modal-actions{
  display:flex; justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.modal-actions .btn{min-width:160px}

.pay-list{
  display:flex; flex-direction:column; gap:10px; margin:10px 0 12px;
}
.pay-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
}
.pay-footer{
  display:flex; gap:10px;
}

.toast{
  position:fixed;
  left:50%;
  bottom:90px;
  transform:translateX(-50%);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color:rgba(255,255,255,.9);
  display:none;
  max-width:min(520px, calc(100vw - 40px));
  text-align:center;
}
.toast.is-on{display:block}

#room-hero, #room-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.post-preview img,
.post-preview video {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 14px;
  display: none;
}

.post-upload-progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
  margin: 8px 0;
}
.post-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: #D4AF37;
  transition: width .15s ease;
}

.post-preview {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
}

.statebar{
  position: sticky;
  top: 10px;
  z-index: 50;
  margin: 10px auto 0;
  max-width: 720px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.statebar.is-loading::before{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -1px;
  animation: spin 1s linear infinite;
}
.statebar.is-empty{ opacity: .85; }
.statebar.is-error{
  background: rgba(140,0,0,.35);
  border-color: rgba(255,80,80,.25);
}
@keyframes spin{ to{ transform: rotate(360deg);} }

.index-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 0 28px;
}
.index-more-label{
  font-size:12px;
}
.index-more-btn{
  min-width:132px;
}

.requests-popover{
  position:fixed;
  z-index:12000;
  display:none;
  min-width:220px;
  width:300px;
  max-width:calc(100vw - 24px);
  max-height:320px;
  overflow:hidden;
  padding:0;
  border-radius:0;
  background:rgba(9,9,9,.86);
  border:0;
  box-shadow:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.requests-popover.is-open{ display:block; }

#modal-friends[data-view="friends"] .friends-grid{ grid-template-columns:1fr; }
#modal-friends[data-view="friends"] .friends-grid > section:nth-child(1),
#modal-friends[data-view="friends"] .friends-grid > section:nth-child(3){ display:none; }

.list-item-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.list-item-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  flex:0 0 auto;
}
.list-item-text{min-width:0;}
.list-item-title{
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.list-item-sub{
  font-size:11px;
  opacity:.7;
  line-height:1.2;
}

#modal-messages.modal{
  z-index:31010;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4dvh, 40px) 18px max(96px, calc(env(safe-area-inset-bottom) + 96px));
}

#modal-messages .modal-card.modal-messages{
  width:min(760px, calc(100vw - 36px));
  max-height:min(78dvh, calc(100dvh - 160px));
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#modal-group-thread.modal{
  z-index:31010;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4dvh, 40px) 18px max(96px, calc(env(safe-area-inset-bottom) + 96px));
}
#modal-group-thread .modal-card.modal-messages{
  width:min(760px, calc(100vw - 36px));
  max-height:min(78dvh, calc(100dvh - 160px));
  margin:auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Full-page conversion: everything above this point is the OLD fixed-overlay sizing, still
   used as a fallback for the brief instant before .is-open is present. The instant it opens,
   these higher-specificity (ID + .is-open) overrides take over and switch the whole thing from
   a fixed-position floating card centered in a viewport-sized box to a plain, static, in-flow
   full-page block -- the body itself (see body.messages-modal-open above) becomes the real
   scroll container, so there's no fixed-size box left for the keyboard to fight with. */
#modal-messages.modal.is-open,
#modal-group-thread.modal.is-open{
  position:static;
  display:block;
  width:100%;
  min-height:100dvh;
  padding:0;
  background:var(--bg);
}
#modal-messages .modal-card.modal-messages,
#modal-group-thread .modal-card.modal-messages{
  position:static;
  width:100%;
  max-width:760px;
  margin:0 auto !important;
  height:auto !important;
  max-height:none !important;
  min-height:100dvh;
  overflow:visible;
}
#modal-group-thread .messages-body{
  flex:1 1 auto;
  min-height:0;
}

/* Shared by #modal-messages and #modal-group-thread -- both use the same modal-messages card
   and the same header shape (an optional button on the left, a centered title, and an optional
   button plus the close X on the right). Flex-centering the title (instead of the old
   position:relative;top:20px offset hack) keeps .modal-head's own box sized to actually contain
   its visible content, so it no longer visually bleeds into the section below it -- that offset
   hack was the root cause of the back-button/title/close-X overlap in the group thread header. */
/* Every modal on the site snaps open/closed instantly (base .modal/.modal.is-open rule has no
   transition at all) -- scoped here to just the two Messages modals rather than changed
   site-wide, since the base rule is shared by every other modal and a global change is a much
   bigger blast radius than what was actually asked for. display:none -> flex plus opacity/
   transform animating from 0/.97 to 1/1 gives a real fade+scale-in the moment is-open is added;
   the reverse (fade-out on close) isn't achievable through CSS alone here since removing
   is-open drops display to none instantly, cutting the transition off -- a JS-timed close would
   fix that too, but that means touching the shared closeModal() every other modal also calls,
   which is out of scope for a Messages-only fix. */
#modal-messages,
#modal-group-thread{
  transition:opacity .16s ease;
  opacity:0;
}
#modal-messages.is-open,
#modal-group-thread.is-open{
  opacity:1;
}
#modal-messages .modal-card,
#modal-group-thread .modal-card{
  transition:transform .16s ease;
  transform:scale(.97);
}
#modal-messages.is-open .modal-card,
#modal-group-thread.is-open .modal-card{
  transform:scale(1);
}

#modal-messages .modal-head,
#modal-group-thread .modal-head{
  flex:0 0 auto;
  position:relative;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 78px;
}
/* Full-page layout: pinned to the top of the real page scroll via position:sticky (not fixed --
   sticky elements are still normal-flow participants and are handled correctly by the browser
   as the visual viewport changes, which is exactly why fixed positioning kept causing trouble). */
#modal-messages .modal-head,
#modal-group-thread .modal-head{
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:5;
}

#modal-messages .modal-title,
#modal-group-thread .modal-title{
  width:100%;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#modal-messages .modal-x,
#modal-group-thread .modal-x{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:#d4af37;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
#modal-messages .modal-x:hover,
#modal-group-thread .modal-x:hover{
  opacity:.8;
}
#btn-new-message{
  position:absolute;
  right:46px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
}
/* .btn.btn-icon sets its own explicit display:inline-flex, which -- being an author-stylesheet
   rule -- overrides the browser's native [hidden]{display:none} regardless of specificity math
   (author rules beat the UA stylesheet). That silently made every previous JS-side
   `.hidden = true/false` toggle on this button a no-op visually: the DOM property was correct,
   the button never actually disappeared. Same fix already exists elsewhere in this file for
   other elements with their own explicit display (#room-live-banner, .call-remote-video, etc.)
   -- this button just never got it. */
#btn-new-message[hidden]{
  display:none;
}
#btn-group-thread-back{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
}

.group-thread-members-line{
  color:#D4AF37;
  font-size:12px;
  padding:8px 10px 4px;
}

#modal-group-thread .group-thread-title-editable{
  cursor:pointer;
}
#modal-group-thread .group-thread-title-editable:hover{
  opacity:.8;
}
.group-thread-title-input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(217,178,76,.5);
  outline:none;
  color:inherit;
  font:inherit;
  text-align:center;
  padding:0 0 2px;
}

.new-message-to-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 6px;
  margin-top:36px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.new-message-to-label{
  flex:0 0 auto;
}
.compose-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(212,175,55,.16);
  color:#D4AF37;
  border-radius:999px;
  padding:4px 6px 4px 10px;
  font-size:13px;
}
.compose-chip-remove{
  background:transparent;
  border:none;
  color:inherit;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:2px;
}
.new-message-to-input{
  flex:1 1 80px;
  min-width:80px;
  background:transparent;
  border:none;
  outline:none;
  color:inherit;
  font-size:16px;
  padding:4px 2px;
}
.new-message-suggestions{
  max-height:220px;
  overflow:auto;
}

/* Group thread modal reuses the .modal-messages card class, and now shares the exact same
   header rules as #modal-messages too (see the unified #modal-messages .modal-head block
   above) -- no more separate mirrored copy here. */

#modal-messages .messages-body{
  flex:1 1 auto;
  min-height:0;
}
.modal-messages .messages-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height: 320px;
}

.modal-messages .messages-thread{
  flex:1;
  min-height: 220px;
  padding: 12px;
  border: 1px solid rgba(217,178,76,.35);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  /* Full-page layout: no longer its own internal overflow:auto scroller -- the real page
     (body) is the scroll container now, so old history grows the page's own natural height
     instead of being clipped into a small internally-scrolling box. */
  overflow:visible;
  scrollbar-width:none;
}
.modal-messages .messages-thread::-webkit-scrollbar{ display:none; }

.modal-messages .msg-row{
  display:flex;
  margin: 6px 0;
}

.modal-messages .msg-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217,178,76,.35);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  line-height: 1.3;
}

.msg-attlist{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-att{
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}
.msg-att.is-locked{
  border-color: rgba(217,178,76,.35);
  color: rgba(217,178,76,.95);
}
.msg-att.is-missing{
  opacity: .8;
}
.msg-att-link,
.msg-att-file{
  color: #d9b24c;
  text-decoration: underline;
  word-break: break-word;
}
.msg-att-img{
  display: block;
  max-width: 240px;
  max-height: 180px;
  border-radius: 12px;
  border: 1px solid rgba(217,178,76,.35);
}
.msg-att-cap{
  margin-top: 4px;
  font-size: 11px;
  opacity: .9;
}

.modal-messages .msg-row.me{ justify-content:flex-end; }
.modal-messages .msg-row.me .msg-bubble{
  background: rgba(255,255,255,.10);
}

.modal-messages .messages-compose{
  display:flex;
  gap:10px;
  align-items:center;
  /* Full-page layout: sticky, not fixed. Sticky elements are still normal-flow participants,
     so the browser correctly keeps this pinned to the bottom of the real visible area as the
     visual viewport changes (keyboard opening/closing) -- fixed positioning was the actual
     mechanism behind the repeated push-down bugs, and this is the standard, well-tested pattern
     production messaging web apps use specifically to avoid that combination. Safari's own
     native input-accessory bar (the ▲▼✓ row) will still render above the keyboard, on top of
     this -- that's OS chrome no page can touch, and is expected. */
  position:sticky;
  bottom:0;
  background:var(--bg);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  z-index:5;
}
.modal-messages .messages-compose .input{
  flex:1;
  border-radius:999px;
}
.modal-messages .messages-compose .btn-icon{
  border-radius:50%;
}
.modal-messages .messages-compose .btn-send{
  color:#D4AF37;
  opacity:.4;
  pointer-events:none;
}
.modal-messages .messages-compose .btn-send.is-active{
  opacity:1;
  pointer-events:auto;
}
.btn.btn-icon{
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}

#messages-attach.has-pending{position:relative;}
#messages-attach.has-pending::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#d9b24c;
}

button[data-nav="messages"].has-unread-dot{position:relative;}
button[data-nav="messages"].has-unread-dot::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:999px;background:#e11d48;}

.modal-messages .messages-thread.is-inbox{
  padding: 8px;
}

.inbox-search{
  /* The modal's own close (x) sits inset into this same top-right corner (an earlier, separate
     fix) -- without clearance here this row's own + button renders directly on top of it. */
  margin-top:40px;
  padding:4px 0 8px;
  display:flex;
  gap:8px;
  align-items:center;
}
.inbox-search .inbox-search-input{
  flex:1;
}
.inbox-list{
  display:flex;
  flex-direction:column;
  padding:4px 0;
}

.inbox-row{
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 10px;
  border:0;
  border-bottom: 1px solid rgba(217,178,76,0.40);
  border-radius:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.inbox-row:last-child{
  border-bottom:0;
}

.inbox-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,0.06);
}

.inbox-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.inbox-avatar-fallback{
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.08);
}

.inbox-meta{
  flex:1 1 auto;
  min-width:0;
}

.inbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.inbox-name{
  font-weight:600;
  font-size:14px;
  color:rgba(255,255,255,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.inbox-preview{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,0.65);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.inbox-unread-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff3b30;
  flex:0 0 auto;
}

.messages-pending{
  margin-top: 8px;
  min-height: 16px;
  font-size: 12px;
  opacity: 0.85;
}
.messages-pending .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.35);
  background: rgba(255,215,0,0.08);
}
.messages-link{
  margin-top: 8px;
  display: none;
}
.messages-link.is-open{
  display: block;
}
.messages-link-row{
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-small{
  padding: 8px 10px;
  font-size: 12px;
}
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
}

.msg-atts{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.msg-att{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.22);
  background: rgba(0,0,0,0.22);
}
.msg-att-label{
  font-size:12px;
  opacity:0.9;
  margin-bottom:6px;
  word-break:break-word;
}
.msg-att-locked{
  font-size:12px;
  color: rgba(255,215,0,0.9);
}
.msg-att-link,.msg-att-file{
  font-size:12px;
  color: rgba(255,215,0,0.95);
  text-decoration: underline;
  word-break:break-word;
}
.msg-att-img{
  width: 100%;
  max-width: 240px;
  border-radius: 12px;
  display:block;
  border:1px solid rgba(255,215,0,0.22);
}
.msg-att-miss{
  opacity:0.8;
}

#messages-pending {
  margin-top: 8px;
}

.msg-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  max-width: 100%;
}

.msg-pending-text {
  font-size: 12px;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.msg-pending-x {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  line-height: 18px;
  padding: 0;
}

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.msg-attachments-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.msg-attach-meta {
  font-size: 12px;
  opacity: 0.85;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-attach-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 180px;
}

.msg-attach-thumbBtn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
}

.msg-attach-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.msg-attach-cap {
  font-size: 12px;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-attach-link,
.msg-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 12px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-pending-links {
  margin-top: 10px;
}

#room-post-overlay.is-hidden { display: none; }
#room-post-title.is-hidden { display: none; }
#room-post-caption.is-hidden { display: none; }

.share-popover{
  position:fixed;
  z-index:13000;
  display:none;
  left:50%;
  transform:translateX(-50%);
  bottom:120px;
  min-width:240px;
  max-width:calc(100vw - 24px);
  padding:0;
  border-radius:10px;
  background:rgba(12,12,12,.28);
  border:0;
  box-shadow:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.share-popover.is-open{ display:block; }

.share-popover .share-row{
  display:flex;
  gap:14px;
  justify-content:center;
  padding:10px 12px;
}

.share-popover .share-opt{
  font-weight:800;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  cursor:pointer;
  user-select:none;
}

.share-popover .share-other{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:0 12px 10px;
}
.share-popover .share-other.is-hidden{ display:none; }

#share-other-input{
  width:170px;
  max-width:calc(100vw - 140px);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding:6px 2px;
  outline:none;
  color:inherit;
  font-size:14px;
}

.prod-images-preview{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
.prod-images-preview img{width:44px;height:44px;object-fit:cover;border-radius:10px;border:1px solid rgba(184,134,11,.35);}

.prod-options-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.prod-option-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px 4px 6px;
  border-radius:999px;
  border:1px solid rgba(184,134,11,.35);
  background:rgba(184,134,11,.08);
  font-size:12px;
}
.prod-option-chip-swatch{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(0,0,0,.2);
}
.prod-option-chip-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  border-radius:3px;
}
.prod-option-chip-remove{
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  color:inherit;
  opacity:.6;
  padding:0 0 0 2px;
}
.prod-option-chip-remove:hover{opacity:1;}
.prod-options-add-row{
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:8px;
}
.prod-options-add-row .input{flex:1 1 auto;}
.prod-options-add-row input[type="color"]{flex:0 0 44px; padding:2px; height:36px;}
.prod-options-add-row .btn{flex:0 0 auto; white-space:nowrap; color:#8a6d1a; border-color:rgba(184,134,11,.5); background:rgba(184,134,11,.08);}
.prod-size-fixed-row{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0;}
.prod-size-fixed-check{display:flex; align-items:center; gap:4px; font-size:13px; color:#2A1F00; cursor:pointer;}
.prod-size-fixed-check input[type="checkbox"]{width:16px; height:16px; cursor:pointer;}

.prod-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.prod-thumbs img{width:36px;height:36px;object-fit:cover;border-radius:10px;border:1px solid rgba(184,134,11,.35);}


.product-font--1,
.product-font--1 input,
.product-font--1 textarea,
.product-font--1 select,
.product-font--1 button{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.product-font--2,
.product-font--2 input,
.product-font--2 textarea,
.product-font--2 select,
.product-font--2 button{
  font-family: Georgia, "Times New Roman", Times, serif;
}

.product-font--3,
.product-font--3 input,
.product-font--3 textarea,
.product-font--3 select,
.product-font--3 button{
  font-family: "American Typewriter", Rockwell, "Courier New", Courier, serif;
}

.product-font--4,
.product-font--4 input,
.product-font--4 textarea,
.product-font--4 select,
.product-font--4 button{
  font-family: "Avenir Next", Avenir, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.product-font--5,
.product-font--5 input,
.product-font--5 textarea,
.product-font--5 select,
.product-font--5 button{
  font-family: "SF Pro Rounded", "Arial Rounded MT Bold", "Avenir Next Rounded", "Segoe UI", system-ui, sans-serif;
}

.product-font--6,
.product-font--6 input,
.product-font--6 textarea,
.product-font--6 select,
.product-font--6 button{
  font-family: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
}

.product-font--7,
.product-font--7 input,
.product-font--7 textarea,
.product-font--7 select,
.product-font--7 button{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.product-font--8,
.product-font--8 input,
.product-font--8 textarea,
.product-font--8 select,
.product-font--8 button{
  font-family: Impact, Haettenschweiler, "Franklin Gothic Medium", "Arial Narrow", "Arial Narrow Bold", sans-serif;
}

.product-font--9,
.product-font--9 input,
.product-font--9 textarea,
.product-font--9 select,
.product-font--9 button{
  font-family: Didot, "Bodoni 72", "Bodoni MT", serif;
}

.product-font--10,
.product-font--10 input,
.product-font--10 textarea,
.product-font--10 select,
.product-font--10 button{
  font-family: Copperplate, "Copperplate Gothic Light", "Copperplate Gothic Bold", serif;
}

.product-font--11,
.product-font--11 input,
.product-font--11 textarea,
.product-font--11 select,
.product-font--11 button{
  font-family: "Helvetica Neue Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

.product-font--12,
.product-font--12 input,
.product-font--12 textarea,
.product-font--12 select,
.product-font--12 button{
  font-family: Garamond, "Adobe Garamond Pro", "EB Garamond", serif;
}

.product-font--13,
.product-font--13 input,
.product-font--13 textarea,
.product-font--13 select,
.product-font--13 button{
  font-family: Optima, Candara, "Segoe UI", sans-serif;
}

.product-font--14,
.product-font--14 input,
.product-font--14 textarea,
.product-font--14 select,
.product-font--14 button{
  font-family: "Chalkduster", "Chalkboard SE", "Marker Felt", cursive;
}

#modal-live.modal{
  background:#000;
  padding:0;
  /* Must outrank #bottom-bar (z-index: var(--z-ui-top) = 30000) -- the bottom nav bar
     has its own independent show/hide timer unrelated to modal state, so if it's still
     visible when this modal opens, a lower z-index here lets it visually AND
     functionally sit on top, silently intercepting clicks meant for this modal's own
     buttons (confirmed via automated testing: the "Stop" button's click was being
     swallowed by the Post nav button underneath). */
  z-index:35000;
}

#modal-live .modal-card{
  width:100vw;
  height:100dvh;
  padding:0;
  background:#000;
  color:#fff;
  border-radius:0;
  overflow:hidden;
}

#modal-live .modal-close{
  position:absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index:2;
}

#modal-live .live-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

#modal-live .live-badge{
  position:absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(184,134,11,.55);
  color:#DAA520;
  font-weight:900;
  letter-spacing:.4px;
}

/* Below the close button (34px tall, top:6px -> bottom edge 40px), same 20px-gap pattern
   used for the video-capture and video-review mute buttons, so it never overlaps the X. */
#modal-live .live-mute{
  position:absolute;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index:4;
}

#modal-live .live-video{
  z-index:0;
  pointer-events:none;
}
#modal-live .modal-close,
#modal-live .live-badge,
#modal-live .live-mute{
  z-index:5;
  pointer-events:auto;
}
#modal-live .live-mute{
  background: rgba(0,0,0,.55);
  border-color: rgba(184,134,11,.55);
  color:#B8860B;
  text-shadow:0 0 10px rgba(184,134,11,.55);
}

/* #btn-live physically relocates into this modal while broadcasting (see moveBtnLiveIntoLiveModal
   in ui.js) so the same single center button remains the sole start/stop control -- no separate
   toggle or floating stop button. Centered near the bottom, clear of the mute/badge/close row. */
#modal-live #btn-live{
  /* Without an explicit size here, the button falls back to the base #btn-live rule
     (44px) instead of matching its composer size (72px, from .modal-post #btn-live) --
     it would visibly shrink the moment it relocates into this modal to broadcast. */
  width:72px;
  height:72px;
  min-width:72px;
  position:absolute;
  left:50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:6;
}
/* #modal-live #btn-live (2 ID selectors) outranks the plain #btn-live:active rule (1 ID +
   1 pseudo-class) by specificity, so without this the press-shrink scale would be silently
   dropped while broadcasting -- restated here with the pseudo-class to win back. */
#modal-live #btn-live:active{
  transform:translateX(-50%) scale(.98);
}

/* --- #modal-call: 1-on-1 voice/video calls. Deliberately its own classes throughout
   (.call-*, not .live-*) -- visually similar conventions to #modal-live (fullscreen, close
   button top-right, badge top-left, action row bottom) but no shared rules, per the
   no-regression commitment for this feature. */
#modal-call.modal{
  background:#000;
  padding:0;
  z-index:35000;
}
#modal-call .modal-card{
  width:100vw;
  height:100dvh;
  padding:0;
  background:#000;
  color:#fff;
  border-radius:0;
  overflow:hidden;
  position:relative;
}
#modal-call .modal-close{
  position:absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index:5;
}
/* #modal-call has an explicit z-index:35000 stacking context. Any modal meant to be
   opened WHILE a call is still active (Add Call picker, incoming-group-call prompt)
   has no z-index of its own, so with no override it renders BEHIND the still-open call
   screen -- its is-open class toggles fine, but real clicks on its contents land on the
   call modal on top of it instead. Same bug class as #modal-live vs #bottom-bar above;
   fix is the same: outrank it explicitly. */
#modal-add-call-participant.modal,
#modal-group-call-incoming.modal{
  z-index:35100;
}

.call-status-badge{
  position:absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  z-index:5;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(184,134,11,.55);
  color:#DAA520;
  font-weight:900;
  letter-spacing:.4px;
  font-size:12px;
}
.call-remote-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  z-index:0;
}
.call-remote-video[hidden]{ display:none; }
.call-peer-avatar{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:120px; height:120px;
  border-radius:999px;
  background-size:cover;
  background-position:center;
  background-color:#1a1a1a;
  border:2px solid rgba(184,134,11,.55);
  z-index:1;
}
.call-peer-name{
  position:absolute;
  top:calc(50% + 76px); left:50%;
  transform:translateX(-50%);
  z-index:1;
  color:#fff;
  font-weight:800;
  font-size:16px;
  text-align:center;
  white-space:nowrap;
}
.call-local-video{
  position:absolute;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width:96px;
  height:128px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(184,134,11,.55);
  background:#000;
  z-index:5;
}
.call-local-video[hidden]{ display:none; }
.call-actions{
  position:absolute;
  left:0; right:0;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  z-index:5;
  padding:0 20px;
}
.call-actions .btn-call-hangup{
  width:64px; height:64px;
  border-radius:999px;
  border:0;
  font-weight:800;
  font-size:12px;
  letter-spacing:.4px;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:#B3261E;
  color:#fff;
}
/* Incoming-call screen: bare icon, no circle/frame -- same treatment as
   .client-card-actions button elsewhere in the app (transparent, border:0, just the colored
   glyph). Gold/amber to answer, red (rotated to the standard hang-up orientation) to decline.
   Same icon glyph reused for both, not a different icon. */
.call-actions .btn-call-accept,
.call-actions .btn-call-decline{
  width:64px; height:64px;
  background:transparent;
  border:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.call-actions .btn-call-accept{
  color:#B8860B;
}
.call-actions .btn-call-decline{
  color:#B3261E;
  transform:rotate(135deg);
}
.call-actions .call-mute,
.call-actions .call-camera{
  background: rgba(0,0,0,.55);
  border-color: rgba(184,134,11,.55);
  color:#B8860B;
}

/* Group call -- new modal, own tables/routes server-side. Reuses .call-status-badge and
   .call-actions (pure layout classes) unchanged; deliberately does NOT reuse .btn-call-accept/
   .btn-call-decline/.call-mute/.call-camera for its own Mute/Leave buttons even though those
   exist -- those are shared classes 1:1's dynamically-rendered call-action buttons use, and this
   modal's buttons are static markup always present in the DOM, so reusing those exact class
   names created a real selector collision with 1:1's own tests/behavior. Own classes instead,
   same colors. The tile grid is the one genuinely new layout piece -- 1:1 has one fixed local +
   one fixed remote video element, which doesn't generalize to N participants. */
.group-call-btn-mute,
.group-call-btn-leave{
  width:64px; height:64px;
  border-radius:999px;
  border:0;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.group-call-btn-mute{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(184,134,11,.55);
  color:#B8860B;
}
.group-call-btn-leave{
  background:#B3261E;
  color:#fff;
}
#modal-group-call.modal{
  background:#000;
  padding:0;
  z-index:35000;
}
#modal-group-call .modal-card{
  width:100vw;
  height:100dvh;
  padding:0;
  background:#000;
  color:#fff;
  border-radius:0;
  overflow:hidden;
  position:relative;
}
#modal-group-call .modal-close{
  position:absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index:5;
}
.group-call-tiles{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows:1fr;
  gap:2px;
  background:#000;
}
.group-call-tile{
  position:relative;
  background:#111;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.group-call-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.group-call-tile-label{
  position:absolute;
  bottom:6px;
  left:8px;
  font-size:12px;
  color:#f5f0e0;
  background:rgba(0,0,0,.45);
  padding:2px 8px;
  border-radius:999px;
}

#modal-video-capture.modal{
  background:#000;
  padding:0;
  /* See #modal-live.modal's comment -- same fix, same reason. */
  z-index:35000;
}
#modal-video-review.modal{
  background:#000;
  padding:0;
  z-index:35000;
}
#modal-video-review .modal-card{
  width:100vw;
  height:100dvh;
  padding:0;
  position:relative;
  background:#000;
}
#modal-video-capture .modal-card{
  width:100vw;
  height:100dvh;
  padding:0;
  background:#000;
  color:#fff;
  border-radius:0;
  overflow:hidden;
}
#modal-video-capture .modal-close{
  position:absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index:5;
}
.capture-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
/* Mute must be visible for the entire recording, not just the post-capture review screen --
   20px below the close button (34px tall, top:6px -> bottom edge 40px), same gap used for
   the review screen's mute button, so the two never overlap. */
.capture-mute{
  position:absolute;
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index:5;
}
.capture-timer{
  position:absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(184,134,11,.55);
  color:#DAA520;
  font-weight:900;
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
}
.btn-capture-stop{
  position:absolute;
  left:50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  width:72px;
  height:72px;
  border-radius:999px;
  background:#B8860B;
  color:#2A1F00;
  border:4px solid #fff;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.6px;
  z-index:5;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.btn-capture-stop:active{
  transform:translateX(-50%) scale(.96);
}

#modal-video-review .modal-close{
  position:absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index:5;
}
#modal-video-review .capture-preview{
  object-fit:contain;
}
/* No native <video controls> here -- its own progress/scrubber bar rendered directly on
   top of .video-review-actions at the bottom of the screen (confirmed via screenshot).
   Autoplay+loop means no play control is needed, and mute has its own dedicated button. */
.video-review-mute{
  position:absolute;
  /* Close button is 34px tall starting at top:6px -> bottom edge at 40px. 20px gap below
     that puts this at 60px. */
  top: calc(60px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index:5;
}
.video-review-actions{
  position:absolute;
  left:0;
  right:0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display:flex;
  gap:12px;
  justify-content:center;
  z-index:5;
  padding:0 20px;
}
.video-review-actions .btn{
  flex:1;
  max-width:180px;
}

.live-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:99999;
}
.live-overlay video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.live-overlay #btn-live{
  position:absolute;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:100000;
  width:72px;
  height:72px;
  min-width:72px;
  font-size:12px;
}

#modal-friends .friends-tabs{
  display:flex;
  gap:8px;
  padding: 8px 18px 0 18px;
}

#modal-friends .friends-tab{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}

#modal-friends .friends-tab.is-active{
  background:rgba(255,255,255,.14);
}

#modal-friends .friends-panel{
  display:none;
}

#modal-friends[data-view="friends"] [data-friends-panel="friends"],
#modal-friends[data-view="followers"] [data-friends-panel="followers"]{
  display:block;
}

#requests-popover .notifications-header{
  padding:10px 14px 9px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d4af37;
  border-bottom:1px solid rgba(212,175,55,.72);
}

#requests-popover .notifications-body{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:280px;
  overflow-y:auto;
  overflow-x:hidden;
}

#requests-popover .notifications-body::-webkit-scrollbar{
  width:6px;
}

#requests-popover .notifications-body::-webkit-scrollbar-thumb{
  background:rgba(212,175,55,.42);
}

#requests-popover .requests-section,
#requests-popover .bell-messages-section,
#requests-popover .bell-messages-list{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
}

#requests-popover .requests-section,
#requests-popover .bell-messages-section{
  flex-shrink:0;
}

#requests-popover .bell-messages-section{
  border-top:1px solid rgba(212,175,55,.5);
}

#requests-popover .bell-section-title,
#requests-popover .bell-messages-title{
  padding:8px 14px 7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(212,175,55,.92);
}

#requests-popover .notif-row,
#requests-popover .request-item,
#requests-popover .bell-messages-item,
#requests-popover .bell-empty,
#requests-popover .bell-messages-list .bell-empty,
#requests-popover .request-top,
#requests-popover .request-main,
#requests-popover .request-copy,
#requests-popover .request-actions,
#requests-popover .li-left,
#requests-popover .li-actions{
  border:0 !important;
  border-bottom:1px solid rgba(212,175,55,.42);
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}

#requests-popover .pending-alert-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e53935;
  box-shadow:0 0 6px rgba(229,57,53,.85);
  flex:none;
  margin-right:8px;
  align-self:center;
}

#requests-popover .notif-row,
#requests-popover .bell-messages-item,
#requests-popover .bell-empty,
#requests-popover .bell-messages-list .bell-empty{
  padding:10px 14px;
  font-size:14px;
  line-height:1.4;
  color:#d4af37;
}

#requests-popover .bell-messages-item{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

#requests-popover .notif-row:last-child,
#requests-popover .request-item:last-child,
#requests-popover .bell-messages-item:last-child,
#requests-popover .bell-empty:last-child,
#requests-popover .bell-messages-list .bell-empty:last-child,
#requests-popover .request-item:last-child .request-top,
#requests-popover .request-item:last-child .request-main,
#requests-popover .request-item:last-child .request-copy,
#requests-popover .request-item:last-child .request-actions{
  border-bottom:0 !important;
}

#requests-popover .request-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
  padding:10px 14px 12px !important;
}

#requests-popover .request-top{
  display:flex;
  align-items:flex-start;
  min-width:0;
}

#requests-popover .request-main{
  width:100%;
  min-width:0;
  align-items:flex-start;
  gap:10px;
}

#requests-popover .request-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#requests-popover .request-item .li-title,
#requests-popover .request-item .li-sub,
#requests-popover .notif-text,
#requests-popover .notif-name,
#requests-popover .notif-rest,
#requests-popover .bell-empty,
#requests-popover .bell-messages-item,
#requests-popover .request-actions .btn,
#requests-popover .request-actions .btn.btn-small,
#requests-popover .request-actions .btn.btn-outline,
#requests-popover .notif-mark{
  white-space:normal;
  color:#d4af37 !important;
}

#requests-popover .request-item .li-title,
#requests-popover .notif-text,
#requests-popover .bell-messages-item{
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}

#requests-popover .request-item .li-sub,
#requests-popover .notif-rest{
  font-size:13px;
  line-height:1.35;
  opacity:.84;
}

#requests-popover .notif-name{
  font-weight:700;
  border-bottom:0 !important;
  padding-bottom:0;
  color:#f2d675 !important;
}

#requests-popover .request-avatar{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  flex:0 0 auto;
}

#requests-popover .request-avatar-fallback{
  font-size:11px;
  font-weight:700;
  line-height:1;
  color:#f2d675;
}

#requests-popover .request-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  padding-left:40px;
  gap:6px 12px !important;
}

#requests-popover .request-actions .btn,
#requests-popover .request-actions .btn.btn-small,
#requests-popover .notif-mark{
  padding:0 !important;
  min-height:0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  color:#f2d675 !important;
  opacity:.96;
}

#requests-popover .request-actions .btn:hover,
#requests-popover .notif-mark:hover{
  background:transparent !important;
  opacity:1;
  text-decoration:underline;
}

#requests-popover .request-actions .btn.btn-outline{
  opacity:.78;
}

#requests-popover *,
#requests-popover *::before,
#requests-popover *::after{
  box-shadow:none !important;
}

#requests-popover .request-item *,
#requests-popover .notif-row *,
#requests-popover .bell-messages-item *,
#requests-popover .bell-empty *{
  border-color:rgba(212,175,55,.42) !important;
}

#requests-popover .request-item .li-sub,
#requests-popover .notif-rest,
#requests-popover .bell-empty{
  color:rgba(212,175,55,.88) !important;
  opacity:1 !important;
}

#btn-club, #btn-pay{
  border-color: rgba(170,120,255,.45);
}

#modal-club.modal{
  z-index: 21000;
}

#modal-club .club-modal-card{
  width:min(780px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:20px 20px 0;
  background:rgba(18,14,8,.93);
  color:#f5f0e0;
  border:1.5px solid #906909;
  border-radius:22px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}

#modal-club .modal-close{
  border:none;background:transparent;color:#906909;font-size:28px;width:40px;height:40px;top:4px;right:4px;
}

#modal-club .modal-close:hover,
#modal-club .modal-close:focus-visible{
  opacity:.8;
}

#modal-club .field > span,
#modal-club .subtle,
#modal-club .club-check span{
  color:rgba(245,240,224,.9);
}

#modal-club .h2{
  color:#906909;
}

#club-save, #club-save-btn{
  background:transparent;
  border:1px solid rgba(212,175,55,.3);
  color:#f5f0e0;
}
#club-save:hover, #club-save:focus-visible,
#club-save-btn:hover, #club-save-btn:focus-visible{
  border-color: var(--gold);
  color: rgb(170,120,255);
  box-shadow:none;
}

#modal-club .field{
  margin:0;
}

#modal-club .input{
  background:transparent;
  color:#f5f0e0;
  border:0;
  border-bottom:1px solid rgba(212,175,55,.3);
  border-radius:0;
  padding:10px 0 8px;
  min-height:auto;
}

#modal-club .input:focus{
  border-bottom-color:var(--gold);
  box-shadow:none;
}

#modal-club .input::placeholder{
  color:rgba(245,240,224,.35);
}

#modal-club select.input{
  padding-right:20px;
}

#modal-club .btn-outline{
  color:#f5f0e0;
  border-color:rgba(212,175,55,.3);
  background:transparent;
}

#modal-club .btn-outline:hover,
#modal-club .btn-outline:focus-visible{
  border-color:var(--gold);
  color:#f5f0e0;
  box-shadow:none;
}

#club-builder{
  max-width:640px;
  margin:0 auto;
}

.club-head{
  display:block;
  padding:4px 28px 14px 0;
  margin-bottom:8px;
  border-bottom:1px solid rgba(212,175,55,.25);
}

.club-head .h2{
  margin-bottom:4px;
}

.club-subhead{
  font-size:13px;
}

.club-layout{
  display:flex;
  flex-direction:column;
  gap:0;
}

.club-form{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:112px;
}

.club-section,
.section-row{
  border:0;
  border-bottom:1px solid rgba(212,175,55,.15);
  border-radius:0;
  padding:14px 0;
  margin:0;
  background:transparent;
}

.club-section:last-child{
  margin-bottom:0;
}

.club-section-title,
.section-title{
  font-size:15px;
  font-weight:800;
  margin:0 0 10px;
  color:#906909;
}

.section-control,
.section-expand{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section-expand{
  margin-top:10px;
}

.club-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.club-check input[type="checkbox"],
.club-check input[type="radio"]{
  accent-color:#9a63ff;
}

.club-types{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 16px;
}

.club-inline{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:10px;
}

.club-textarea{
  min-height:88px;
  resize:vertical;
}

.club-services-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:28px;
}

.club-service-card{
  border:0;
  border-top:1px solid rgba(212,175,55,.12);
  border-bottom:1px solid rgba(212,175,55,.12);
  border-radius:0;
  padding:10px 0;
  background:transparent;
}

.club-service-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

.club-duration-field{
  display:flex;
  gap:8px;
  align-items:center;
}
.club-duration-field input{
  flex:0 0 60px;
  min-width:0;
}
.club-duration-field select{
  flex:1 1 auto;
  min-width:0;
}

.club-summary{
  margin:0 -20px;
  padding:14px 20px 20px;
  background:rgba(18,14,8,.93);
  border-top:1px solid rgba(217,178,76,.3);
  backdrop-filter:blur(8px);
}

.club-summary-lines{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:8px;
}

.club-summary-line,
.club-summary-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(212,175,55,.15);
}

.club-summary-total:first-of-type{
  border-top:1px solid rgba(212,175,55,.15);
}

.club-summary-total strong,
.club-summary-line strong{
  color:#f5f0e0;
}

@media (max-width: 860px){
  #modal-club .club-modal-card{
    width:min(100vw - 20px, 780px);
    max-height:calc(100dvh - 160px) !important;
    padding:18px 16px 0;
  }

  .club-form{
    padding-bottom:104px;
  }

  .club-summary{
    margin:0 -16px;
    padding:12px 16px 16px;
  }

  .club-types{
    grid-template-columns:1fr;
  }
}

#modal-club .section-control.club-row-main{
  gap:0;
}

#modal-club .club-check-main{
  min-height:28px;
}

#modal-club .club-expand-tight{
  margin-top:6px;
}

#modal-club .club-inline-field{
  gap:4px;
  max-width:320px;
}

#modal-club .club-inline-field-select{
  max-width:220px;
}

#modal-club .club-input-compact{
  min-height:36px;
  padding:7px 0 6px;
}

#modal-club .club-input-short{
  max-width:140px;
}

.club-price-field{
  position:relative;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:100%;
}
.club-price-field .input{
  width:auto;
  flex:1 1 auto;
}
.club-price-field .input::-webkit-outer-spin-button,
.club-price-field .input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.club-price-field .input[type="number"]{
  -moz-appearance:textfield;
}
.club-price-field .input,
#modal-club .club-price-field .input{
  padding-left:20px;
}
.club-price-stepper{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.club-price-step{
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  width:18px;
  height:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(212,175,55,.5);
  transition:color .15s;
}
.club-price-step:hover,
.club-price-step:focus-visible{
  color:#D4AF37;
}
.club-price-step::before{
  content:'';
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
}
.club-price-step-up::before{
  border-bottom:7px solid currentColor;
}
.club-price-step-down::before{
  border-top:7px solid currentColor;
}

#modal-club .club-select-compact{
  max-width:180px;
}

#modal-club .club-types-compact{
  grid-template-columns:repeat(2, minmax(0, max-content));
  gap:8px;
  align-items:start;
  justify-content:start;
}

#modal-club .club-check-chip{
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(42,31,0,.12);
  border-radius:999px;
  width:max-content;
}

#modal-club .club-form-grid-compact{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, max-content));
  gap:12px 18px;
  align-items:end;
}

#modal-club .club-renewal-group{
  gap:8px;
  margin-top:12px;
}

#modal-club .club-stack-compact{
  gap:8px;
}

#modal-club .club-textarea.club-input-compact{
  min-height:64px;
  max-width:420px;
}

@media (max-width: 860px){
  #modal-club .club-form-grid-compact,
  #modal-club .club-types-compact{
    grid-template-columns:1fr;
  }

  #modal-club .club-inline-field,
  #modal-club .club-inline-field-select,
  #modal-club .club-input-short,
  #modal-club .club-select-compact,
  #modal-club .club-textarea.club-input-compact{
    max-width:none;
  }
}

#modal-club-offer.modal{z-index:21050;}
#modal-club-offer .club-offer-modal{max-width:640px;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 130px);overflow:auto;padding-bottom:16px;background:rgba(18,14,8,.93);color:#f5f0e0;border:1.5px solid #906909;box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#modal-club-offer .modal-close{border:none;background:transparent;color:#906909;font-size:28px;width:40px;height:40px;top:4px;right:4px;}
#modal-club-offer .modal-close:hover{opacity:.8;}
.club-offer-modal{max-width:640px;width:min(640px,calc(100vw - 24px));}
.club-offer-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.club-offer-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,240,224,.55);}
.club-offer-body{min-height:120px;}
#modal-club-offer .club-offer-body{padding-bottom:24px;}
.club-offer-card{background:rgba(18,14,8,.93);color:#f5f0e0;border:1.5px solid #906909;box-shadow:0 10px 28px rgba(0,0,0,.45);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;}
.club-offer-card::before{display:none;}
.club-offer-title{font-size:16px;font-weight:800;color:#f5f0e0;}
.club-offer-copy,.club-offer-empty{font-size:14px;line-height:1.5;color:rgba(245,240,224,.65);}
.club-offer-empty{padding:18px;border:1px dashed rgba(217,178,76,.35);border-radius:16px;background:rgba(255,255,255,.04);}
.club-offer-sections{display:flex;flex-direction:column;gap:12px;}
.club-offer-section{border-top:1px solid rgba(217,178,76,.15);padding-top:12px;display:flex;flex-direction:column;gap:10px;}
.club-offer-section:first-child{border-top:0;padding-top:0;}
.club-offer-section-title{font-size:15px;font-weight:800;color:#906909;}
.club-offer-section-body{display:flex;flex-direction:column;gap:8px;}
.club-offer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:rgba(245,240,224,.65);}
.club-offer-row strong{color:#e7c9ff;font-size:14px;font-weight:700;text-align:right;}
.club-offer-chips{display:flex;flex-wrap:wrap;gap:8px;}
.club-offer-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(170,120,255,.12);border:1px solid rgba(170,120,255,.3);font-size:12px;font-weight:700;color:#e7c9ff;text-transform:capitalize;}
.club-offer-service{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(144,105,9,.5);border-radius:14px;background:rgba(255,255,255,.03);}
.club-offer-service.is-selected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(170,120,255,.3) inset;background:rgba(255,255,255,.02);}
.club-offer-service-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;}
.club-offer-service-title{font-size:14px;font-weight:700;color:#f5f0e0;}
.club-offer-contract-view .club-offer-row strong{color:var(--muted);}
.club-offer-contract-view .club-offer-row strong[data-club-offer-final="1"]{font-weight:900;}
.club-offer-contract-view .club-offer-service-title{color:#906909;}
.club-offer-service-copy{font-size:13px;line-height:1.45;color:rgba(245,240,224,.6);}
.club-offer-service-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;font-weight:700;color:rgba(245,240,224,.5);text-transform:capitalize;}
.club-offer-service-toggle{
  border:1px solid rgba(144,105,9,.35);
  background:transparent;
  color:#f5f0e0;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  flex:0 0 auto;
  min-width:68px;
}
.club-offer-service-toggle:hover,
.club-offer-service-toggle:focus-visible{
  border-color:#906909;
  color:rgb(170,120,255);
  box-shadow:none;
}
.club-offer-service-toggle.is-selected{background:transparent;border-color:#906909;color:rgb(170,120,255);}
.club-offer-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding-top:20px;}
.club-offer-actions .btn[disabled]{opacity:1;cursor:default;}
.club-offer-primary{
  background:transparent;
  border:1px solid rgba(144,105,9,.35);
  color:#f5f0e0;
  font-weight:800;
  font-size:13px;
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
}
.club-offer-primary:hover, .club-offer-primary:focus-visible{
  border-color:#906909;
  color: rgb(170,120,255);
  box-shadow:none;
}
.club-offer-primary[data-club-offer-action="cancel-subscription"]:hover,
.club-offer-primary[data-club-offer-action="cancel-subscription"]:focus-visible{color:#a8654a;}
.club-offer-cancel{
  background:linear-gradient(180deg, #b8500b, #8a3a08);
  border:1px solid rgba(0,0,0,.35);
  color:#fff;
  font-weight:800;
  font-size:13px;
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
}
.club-offer-cancel:hover{filter:brightness(1.05);}
@media (max-width: 560px){.club-offer-actions{flex-direction:column;align-items:stretch;}.club-offer-row{flex-direction:column;align-items:flex-start;}.club-offer-row strong{text-align:left;}.club-offer-service{flex-direction:column;}.club-offer-service-toggle{width:100%;}}

/* ============================================================
   TEMPLATE 3 — Editorial Luxe
   Dark header · editorial asymmetric grid · gold accents
   ============================================================ */
.storefront--tpl3{
  display:flex;
  flex-direction:column;
  background:#fff;
  color:#0a0a0a;
}

/* Topbar */
.storefront--tpl3 .sf-topbar-wrap{
  position:sticky;
  top:0;
  z-index:10;
}
.storefront--tpl3 .sf-topbar{
  background:var(--sf-topbar-bg,#0a0a0a);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  height:56px;
  border-bottom:none;
  position:relative;
}
.storefront--tpl3 .sf-topbar-logo{
  font-family:Georgia,serif;
  font-size:21px;
  font-weight:400;
  color:#fff;
  letter-spacing:4px;
  text-transform:uppercase;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.storefront--tpl3 .sf-topbar-menu{
  background:none;
  border:none;
  color:rgba(255,255,255,.5);
  font-size:18px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.storefront--tpl3 .sf-topbar-icons{
  display:flex;
  gap:14px;
  font-size:16px;
  color:rgba(255,255,255,.65);
}
.storefront--tpl3 .sf-tabs--topbar{
  background:var(--sf-topbar-bg,#0a0a0a);
  display:flex;
  gap:0;
  padding:0 20px;
  overflow-x:auto;
}
.storefront--tpl3 .sf-tabs--topbar .sf-tab{
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:12px 16px;
  color:rgba(255,255,255,.4);
  background:none;
  border:none;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
}
.storefront--tpl3 .sf-tabs--topbar .sf-tab--active,
.storefront--tpl3 .sf-tabs--topbar .sf-tab:hover{
  color:#fff;
  border-bottom-color:var(--sf-primary,#D4AF37);
}

/* Hero */
.storefront--tpl3 .sf-hero{
  background:#0a0a0a;
  padding:36px 20px 28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  background-size:cover;
  background-position:center;
}
.storefront--tpl3 .sf-hero--img{
  align-items:center;
  justify-content:center;
}
.sf-hero-cta{
  display:inline-block;
  padding:12px 32px;
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(4px);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:4px;
  cursor:pointer;
}
.storefront--tpl3 .sf-hero-avatar{display:none;}
.storefront--tpl3 .sf-hero-title{
  font-family:Georgia,serif;
  font-size:32px;
  font-weight:400;
  color:#fff;
  line-height:1.1;
  margin:0;
  flex:1;
}
.storefront--tpl3 .sf-hero-bio{
  font-size:12px;
  color:rgba(255,255,255,.45);
  line-height:1.7;
  max-width:160px;
  margin:0;
  flex:0 0 auto;
}

/* Banner */
.storefront--tpl3 .sf-banner{
  background:#0a0a0a;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.06);
  background-size:cover;
  background-position:center;
}
.storefront--tpl3 .sf-banner-title{
  font-family:Georgia,serif;
  font-size:16px;
  color:#fff;
  margin:0;
}
.storefront--tpl3 .sf-banner-text{
  font-size:12px;
  color:rgba(255,255,255,.45);
  margin:0;
}

/* Standalone tabs section */
.storefront--tpl3 .sf-tabs{
  display:flex;
  gap:0;
  padding:0 20px;
  border-bottom:1px solid #ebebeb;
  overflow-x:auto;
}
.storefront--tpl3 .sf-tab{
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:11px 14px;
  color:#aaa;
  background:none;
  border:none;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
}
.storefront--tpl3 .sf-tab--active,
.storefront--tpl3 .sf-tab:hover{
  color:#0a0a0a;
  border-bottom-color:#0a0a0a;
}

/* Product grid — Editorial Luxe */
.storefront--tpl3 .sf-products{
  display:grid;
  gap:2px;
  background:#e8e8e8;
  padding:2px;
}
.storefront--tpl3 .sf-products--grid{
  grid-template-columns:repeat(5,1fr);
}
.storefront--tpl3 .sf-products--list{
  grid-template-columns:1fr;
}
.storefront--tpl3 .sf-card{
  background:#fff;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}
.storefront--tpl3 .sf-products--list .sf-card{
  flex-direction:row;
}
.storefront--tpl3 .sf-card-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#f4f4f4;
  transition:transform .4s ease;
}
.storefront--tpl3 .sf-card:hover{
  transform:scale(1.03);
  z-index:2;
}
.storefront--tpl3 .sf-card:hover .sf-card-img{
  transform:none;
}
.storefront--tpl3 .sf-card-body{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:16px 8px 8px;
  opacity:0;
  transition:opacity .25s;
}
.storefront--tpl3 .sf-card:hover .sf-card-body{ opacity:1; }
.storefront--tpl3 .sf-card-title{ color:#fff; }
.storefront--tpl3 .sf-card-price{ color:#fff; }
.storefront--tpl3 .sf-products--list .sf-card-img{
  width:90px;
  height:90px;
  flex:0 0 90px;
  aspect-ratio:1;
}
.storefront--tpl3 .sf-card-img--ph{
  background:#f4f4f4;
}
.storefront--tpl3 .sf-card-body{
  padding:10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.storefront--tpl3 .sf-card-title{
  font-size:11px;
  font-weight:500;
  color:#0a0a0a;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.storefront--tpl3 .sf-card-price{
  font-size:12px;
  color:#555;
  font-weight:400;
}
.storefront--tpl3 .sf-card-desc{
  font-size:11px;
  color:#aaa;
  line-height:1.4;
}
.storefront--tpl3 .sf-empty{
  padding:32px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  grid-column:1/-1;
}

/* Carousel */
.storefront--tpl3 .sf-carousel{
  display:flex;
  gap:2px;
  overflow-x:auto;
  background:#0a0a0a;
  padding:2px;
}
.storefront--tpl3 .sf-carousel-img{
  height:120px;
  width:auto;
  flex:0 0 auto;
  object-fit:cover;
  display:block;
}

/* Footer */
.storefront--tpl3 .sf-footer{
  background:var(--sf-footer-bg,#0a0a0a);
  padding:28px 20px 0;
  margin-top:1px;
  position:relative;
}
.storefront--tpl3 .sf-footer-top{
  display:flex;
  gap:24px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-bottom:20px;
}
.storefront--tpl3 .sf-footer-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 140px;
}
.storefront--tpl3 .sf-footer-title{
  font-size:11px;
  color:rgba(255,255,255,.45);
  letter-spacing:3px;
  text-transform:uppercase;
}
.storefront--tpl3 .sf-footer-about{
  font-size:10px;
  color:rgba(255,255,255,.25);
  line-height:1.5;
  margin:0;
  max-width:220px;
}
.storefront--tpl3 .sf-footer-info{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1 1 120px;
}
.storefront--tpl3 .sf-footer-detail{
  font-size:10px;
  color:rgba(255,255,255,.3);
  text-decoration:none;
}
.storefront--tpl3 .sf-footer-contact{
  background:none;
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.5);
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:7px 16px;
  cursor:pointer;
  margin-top:4px;
  align-self:flex-start;
}
.storefront--tpl3 .sf-footer-contact:hover{
  border-color:rgba(255,255,255,.6);
  color:#fff;
}
.storefront--tpl3 .sf-footer-social{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:0 0 auto;
}
.storefront--tpl3 .sf-footer-social-link{
  font-size:10px;
  color:rgba(255,255,255,.35);
  text-decoration:none;
  letter-spacing:1px;
  text-transform:uppercase;
}
.storefront--tpl3 .sf-footer-social-link:hover{
  color:rgba(255,255,255,.7);
}
.storefront--tpl3 .sf-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.storefront--tpl3 .sf-footer-copy{
  font-size:9px;
  color:rgba(255,255,255,.2);
  letter-spacing:1px;
}
.storefront--tpl3 .sf-footer-totop{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.75);
  font-size:13px;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  flex-shrink:0;
  position:absolute;
  top:6px;
  right:20px;
}
.storefront--tpl3 .sf-footer-totop:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.7);
  color:#fff;
}

/* PDP — tpl3 */
.storefront--tpl3 .sf-pdp{
  background:#fff;
  padding:0;
}
.storefront--tpl3 .sf-pdp-back{
  display:inline-block;
  padding:12px 20px;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aaa;
  cursor:pointer;
  background:none;
  border:none;
  border-bottom:1px solid #ebebeb;
  width:100%;
  text-align:right;
}
.storefront--tpl3 .sf-pdp-back:hover{color:#0a0a0a;}
.storefront--tpl3 .sf-pdp-shell{
  display:grid;
  grid-template-columns:65fr 35fr;
}
.storefront--tpl3 .sf-pdp-gallery{
  background:#f5f5f5;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
  padding:20px;
  border-left:1px solid #ebebeb;
}
.storefront--tpl3 .sf-pdp-main-img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  grid-column:2;
  grid-row:1;
}
.storefront--tpl3 .sf-pdp-main-img--ph{
  width:100%;
  aspect-ratio:4/5;
  background:#ebebeb;
  grid-column:2;
  grid-row:1;
}
.storefront--tpl3 .sf-pdp-thumbs{
  display:flex;
  flex-direction:column;
  gap:6px;
  grid-column:1;
  grid-row:1;
}
.storefront--tpl3 .sf-pdp-thumb{
  width:52px;
  height:52px;
  border:1px solid #ddd;
  padding:0;
  cursor:pointer;
  background:#f5f5f5;
  overflow:hidden;
}
.storefront--tpl3 .sf-pdp-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.storefront--tpl3 .sf-pdp-thumb.is-active{
  outline:2px solid #0a0a0a;
  outline-offset:1px;
}
.storefront--tpl3 .sf-pdp-info{
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.storefront--tpl3 .sf-pdp-title{
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:400;
  color:#0a0a0a;
  line-height:1.2;
  margin:0;
}
.storefront--tpl3 .sf-pdp-price{
  font-size:18px;
  font-weight:500;
  color:var(--sf-primary,#D4AF37);
  padding:10px 0;
  border-top:1px solid #ebebeb;
  border-bottom:1px solid #ebebeb;
}
.storefront--tpl3 .sf-pdp-badges{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin:10px 0 6px;
}
.storefront--tpl3 .sf-pdp-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:64px;
}
.storefront--tpl3 .sf-pdp-badge-icon{
  width:32px;
  height:32px;
  object-fit:contain;
}
.storefront--tpl3 .sf-pdp-badge-icon--empty{
  visibility:hidden;
  display:inline-block;
}
.storefront--tpl3 .sf-pdp-badge-label{
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:center;
  color:#888;
  line-height:1.3;
}
.storefront--tpl3 .sf-pdp-variant-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.storefront--tpl3 .sf-pdp-variant-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#888;
}
.storefront--tpl3 .sf-pdp-options{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.storefront--tpl3 .sf-pdp-swatch{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1.5px solid #ddd;
  cursor:pointer;
  transition:transform .12s;
  overflow:hidden;
  padding:0;
  background:#fff;
}
.storefront--tpl3 .sf-pdp-swatch--text{
  font-size:10px;
  font-weight:600;
  color:#333;
  display:flex;
  align-items:center;
  justify-content:center;
}
.storefront--tpl3 .sf-pdp-swatch--img{
  display:flex;
  align-items:center;
  justify-content:center;
}
.storefront--tpl3 .sf-pdp-swatch--img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.storefront--tpl3 .sf-pdp-swatch:hover{transform:scale(1.1);}
.storefront--tpl3 .sf-pdp-swatch.is-active{
  outline:2px solid #0a0a0a;
  outline-offset:2px;
}
.storefront--tpl3 .sf-pdp-buy{
  width:100%;
  padding:13px;
  background:#0a0a0a;
  color:#fff;
  font-size:10px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  text-decoration:none;
  display:block;
  text-align:center;
}
.storefront--tpl3 .sf-pdp-buy:hover{background:#333;}
.storefront--tpl3 .sf-pdp-buy:disabled{opacity:.4;cursor:default;}
.storefront--tpl3 .sf-pdp-shipping{
  font-size:12px;
  color:#888;
  text-align:center;
  margin-top:8px;
}
.storefront--tpl3 .sf-pdp-banner{
  width:100%;
  display:block;
  border-radius:4px;
  margin:20px 0 0;
}
.storefront--tpl3 .sf-pdp-desc{
  font-size:13px;
  color:#666;
  line-height:1.65;
  border-top:1px solid #ebebeb;
  padding-top:14px;
}
.storefront--tpl3 .sf-pdp-desc-title{
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aaa;
  margin-bottom:6px;
}
.storefront--tpl3 .sf-pdp-related{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #ebebeb;
}
.storefront--tpl3 .sf-pdp-related-title{
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aaa;
  margin-bottom:12px;
}
.storefront--tpl3 .sf-pdp-related-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
}
.storefront--tpl3 .sf-pdp-related-row .sf-card{
  flex:0 0 140px;
}
.storefront--tpl3 .sf-pdp-rating-summary{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 2px;
}
.storefront--tpl3 .sf-pdp-rating-stars{
  color:#D4AF37;
  font-size:13px;
  letter-spacing:1px;
}
.storefront--tpl3 .sf-pdp-rating-meta{
  font-size:11px;
  color:#999;
}
.storefront--tpl3 .sf-pdp-reviews{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #ebebeb;
}
.storefront--tpl3 .sf-pdp-reviews-title{
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aaa;
  margin-bottom:12px;
}
.storefront--tpl3 .sf-pdp-review-item{
  padding:10px 0;
  border-bottom:1px solid #f0f0f0;
}
.storefront--tpl3 .sf-pdp-review-stars{
  color:#D4AF37;
  font-size:12px;
  display:block;
  margin-bottom:4px;
}
.storefront--tpl3 .sf-pdp-review-text{
  font-size:13px;
  color:#444;
  line-height:1.5;
}
.storefront--tpl3 .sf-pdp-review-empty{
  font-size:13px;
  color:#999;
  margin-bottom:12px;
}
.storefront--tpl3 .sf-pdp-review-form{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.storefront--tpl3 .sf-pdp-review-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#666;
}
.storefront--tpl3 .sf-pdp-review-form textarea{
  width:100%;
  font-size:13px;
  padding:8px;
  border:1px solid #ddd;
  resize:vertical;
  font-family:inherit;
}
.storefront--tpl3 .sf-pdp-review-submit{
  align-self:flex-start;
  padding:8px 18px;
  background:#0a0a0a;
  color:#fff;
  border:none;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
}

/* ============================================================
   TEMPLATE 4 — Warm Boutique
   Cream background · rounded cards · terracotta accents · RTL
   ============================================================ */
.storefront--tpl4{
  display:flex;
  flex-direction:column;
  background:#FAF8F5;
  color:#3D2B1F;
}

/* Topbar */
.storefront--tpl4 .sf-topbar-wrap{
  position:sticky;
  top:0;
  z-index:10;
}
.storefront--tpl4 .sf-topbar{
  background:var(--sf-topbar-bg,#fff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  height:62px;
  border-bottom:none;
  position:relative;
}
.storefront--tpl4 .sf-topbar-logo{
  font-family:Georgia,serif;
  font-size:25px;
  color:#3D2B1F;
  letter-spacing:1px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.storefront--tpl4 .sf-topbar-menu{
  background:none;
  border:none;
  color:#7A6858;
  font-size:20px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.storefront--tpl4 .sf-topbar-icons{
  display:flex;
  gap:14px;
  font-size:17px;
  color:#7A6858;
}
.storefront--tpl4 .sf-tabs--topbar.sf-tabs{
  background:var(--sf-topbar-bg,#fff);
  display:flex;
  gap:26px;
  padding:10px 18px;
  overflow-x:auto;
}
.storefront--tpl4 .sf-tabs--topbar .sf-tab{
  padding:6px 0;
  font-size:14px;
  letter-spacing:.5px;
  color:rgba(255,255,255,.75);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.storefront--tpl4 .sf-tabs--topbar .sf-tab--active,
.storefront--tpl4 .sf-tabs--topbar .sf-tab:hover{
  color:#fff;
  border-bottom-color:#fff;
}

/* Hero */
.storefront--tpl4 .sf-hero{
  background:#EDE8E0;
  padding:28px 18px;
  display:flex;
  gap:16px;
  align-items:center;
  background-size:cover;
  background-position:center;
}
.storefront--tpl4 .sf-hero--img{
  align-items:center;
  justify-content:center;
}
.storefront--tpl4 .sf-hero-avatar{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--sf-primary,#C4874A);
  flex:0 0 60px;
}
.storefront--tpl4 .sf-hero-title{
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:400;
  color:#3D2B1F;
  margin:0 0 4px;
  line-height:1.2;
}
.storefront--tpl4 .sf-hero-bio{
  font-size:12px;
  color:#7A6858;
  margin:0;
  line-height:1.6;
}

/* Banner */
.storefront--tpl4 .sf-banner{
  background:var(--sf-primary,#C4874A);
  padding:14px 18px;
  background-size:cover;
  background-position:center;
}
.storefront--tpl4 .sf-banner-title{
  font-family:Georgia,serif;
  font-size:16px;
  color:#fff;
  margin:0 0 4px;
}
.storefront--tpl4 .sf-banner-text{
  font-size:12px;
  color:rgba(255,255,255,.8);
  margin:0;
}

/* Standalone tabs */
.storefront--tpl4 .sf-tabs{
  display:flex;
  gap:6px;
  padding:12px 14px;
  flex-wrap:wrap;
  border-bottom:1px solid #EDE8E0;
  background:#fff;
}
.storefront--tpl4 .sf-tab{
  padding:5px 14px;
  border-radius:99px;
  border:1px solid #D9CFC5;
  font-size:11px;
  color:#7A6858;
  background:#FAF8F5;
  cursor:pointer;
}
.storefront--tpl4 .sf-tab--active,
.storefront--tpl4 .sf-tab:hover{
  background:#3D2B1F;
  color:#FAF8F5;
  border-color:#3D2B1F;
}

/* Product grid — Warm Boutique */
.storefront--tpl4 .sf-products{
  display:grid;
  gap:12px;
  padding:16px;
}
.storefront--tpl4 .sf-products--grid{
  grid-template-columns:repeat(5,1fr);
}
.storefront--tpl4 .sf-products--list{
  grid-template-columns:1fr;
}
.storefront--tpl4 .sf-card{
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.storefront--tpl4 .sf-card:hover{
  transform:scale(1.04);
  z-index:2;
  box-shadow:0 8px 28px rgba(61,43,31,.18);
}
.storefront--tpl4 .sf-card-body{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  padding:16px 8px 8px;
  opacity:0;
  transition:opacity .25s;
}
.storefront--tpl4 .sf-card:hover .sf-card-body{ opacity:1; }
.storefront--tpl4 .sf-card-title{ color:#fff; }
.storefront--tpl4 .sf-card-price{ color:#fff; }
.storefront--tpl4 .sf-products--list .sf-card{
  flex-direction:row;
}
.storefront--tpl4 .sf-card-img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  background:#F0EBE3;
  border-radius:6px;
}
.storefront--tpl4 .sf-products--list .sf-card-img{
  width:88px;
  height:88px;
  flex:0 0 88px;
  aspect-ratio:1;
  border-radius:6px;
}
.storefront--tpl4 .sf-card-img--ph{
  background:#F0EBE3;
}
.storefront--tpl4 .sf-card-body{
  padding:10px 4px 4px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.storefront--tpl4 .sf-card-title{
  font-size:13px;
  font-weight:500;
  color:#3D2B1F;
  line-height:1.3;
}
.storefront--tpl4 .sf-card-price{
  font-size:13px;
  color:var(--sf-primary,#C4874A);
  font-weight:600;
}
.storefront--tpl4 .sf-card-desc{
  font-size:11px;
  color:#9C8A7C;
  line-height:1.4;
}
.storefront--tpl4 .sf-empty{
  padding:32px;
  text-align:center;
  font-size:13px;
  color:#9C8A7C;
  grid-column:1/-1;
}

/* Carousel */
.storefront--tpl4 .sf-carousel{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px 14px;
  background:#EDE8E0;
}
.storefront--tpl4 .sf-carousel-img{
  height:110px;
  width:auto;
  flex:0 0 auto;
  object-fit:cover;
  display:block;
  border-radius:6px;
}

/* Footer */
.storefront--tpl4 .sf-footer{
  background:var(--sf-footer-bg,#3D2B1F);
  padding:28px 18px 0;
  margin-top:4px;
  position:relative;
}
.storefront--tpl4 .sf-footer-top{
  display:flex;
  gap:24px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-bottom:20px;
}
.storefront--tpl4 .sf-footer-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 140px;
}
.storefront--tpl4 .sf-footer-title{
  font-size:13px;
  color:rgba(255,255,255,.55);
  letter-spacing:1px;
}
.storefront--tpl4 .sf-footer-about{
  font-size:11px;
  color:rgba(255,255,255,.3);
  line-height:1.6;
  margin:0;
  max-width:220px;
}
.storefront--tpl4 .sf-footer-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 120px;
}
.storefront--tpl4 .sf-footer-detail{
  font-size:11px;
  color:rgba(255,255,255,.35);
  text-decoration:none;
}
.storefront--tpl4 .sf-footer-contact{
  background:none;
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.55);
  font-size:11px;
  padding:7px 16px;
  border-radius:99px;
  cursor:pointer;
  margin-top:4px;
  align-self:flex-start;
}
.storefront--tpl4 .sf-footer-contact:hover{
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
.storefront--tpl4 .sf-footer-social{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
}
.storefront--tpl4 .sf-footer-social-link{
  font-size:11px;
  color:rgba(255,255,255,.4);
  text-decoration:none;
}
.storefront--tpl4 .sf-footer-social-link:hover{
  color:rgba(255,255,255,.75);
}
.storefront--tpl4 .sf-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.storefront--tpl4 .sf-footer-copy{
  font-size:10px;
  color:rgba(255,255,255,.25);
}
.storefront--tpl4 .sf-footer-totop{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.75);
  font-size:13px;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  flex-shrink:0;
  position:absolute;
  top:6px;
  right:20px;
}
.storefront--tpl4 .sf-footer-totop:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.7);
  color:#fff;
}

/* PDP — tpl4 */
.storefront--tpl4 .sf-pdp{
  background:#FAF8F5;
}
.storefront--tpl4 .sf-pdp-back{
  display:inline-block;
  padding:11px 18px;
  font-size:11px;
  color:#7A6858;
  cursor:pointer;
  background:none;
  border:none;
  border-bottom:1px solid #EDE8E0;
  width:100%;
  text-align:right;
}
.storefront--tpl4 .sf-pdp-back:hover{color:#3D2B1F;}
.storefront--tpl4 .sf-pdp-shell{
  display:grid;
  grid-template-columns:65fr 35fr;
}
.storefront--tpl4 .sf-pdp-gallery{
  background:#F0EBE3;
  padding:16px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
}
.storefront--tpl4 .sf-pdp-main-img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border-radius:8px;
  grid-column:2;
  grid-row:1;
}
.storefront--tpl4 .sf-pdp-main-img--ph{
  width:100%;
  aspect-ratio:4/5;
  background:#D9CFC5;
  border-radius:8px;
  grid-column:2;
  grid-row:1;
}
.storefront--tpl4 .sf-pdp-thumbs{
  display:flex;
  flex-direction:column;
  gap:6px;
  grid-column:1;
  grid-row:1;
}
.storefront--tpl4 .sf-pdp-thumb{
  width:50px;
  height:50px;
  border:1px solid #D9CFC5;
  border-radius:6px;
  padding:0;
  cursor:pointer;
  background:#EDE8E0;
  overflow:hidden;
}
.storefront--tpl4 .sf-pdp-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.storefront--tpl4 .sf-pdp-thumb.is-active{
  outline:2px solid var(--sf-primary,#C4874A);
  outline-offset:1px;
}
.storefront--tpl4 .sf-pdp-info{
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-right:1px solid #EDE8E0;
}
.storefront--tpl4 .sf-pdp-title{
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:400;
  color:#3D2B1F;
  line-height:1.25;
  margin:0;
}
.storefront--tpl4 .sf-pdp-price{
  font-size:20px;
  font-weight:600;
  color:var(--sf-primary,#C4874A);
  padding:10px 0;
  border-top:1px solid #EDE8E0;
  border-bottom:1px solid #EDE8E0;
}
.storefront--tpl4 .sf-pdp-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 6px;
}
.storefront--tpl4 .sf-pdp-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:32px;
}
.storefront--tpl4 .sf-pdp-badge-icon{
  width:24px;
  height:24px;
  object-fit:contain;
}
.storefront--tpl4 .sf-pdp-badge-icon--empty{
  visibility:hidden;
  display:inline-block;
}
.storefront--tpl4 .sf-pdp-badge-label{
  font-size:9px;
  letter-spacing:.3px;
  text-transform:uppercase;
  text-align:center;
  color:#7A6858;
  line-height:1.3;
}
.storefront--tpl4 .sf-pdp-variant-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.storefront--tpl4 .sf-pdp-variant-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#7A6858;
}
.storefront--tpl4 .sf-pdp-options{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.storefront--tpl4 .sf-pdp-swatch{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1.5px solid #D9CFC5;
  cursor:pointer;
  transition:transform .12s;
  overflow:hidden;
  padding:0;
  background:#fff;
}
.storefront--tpl4 .sf-pdp-swatch--text{
  font-size:10px;
  font-weight:600;
  color:#5C4A3D;
  display:flex;
  align-items:center;
  justify-content:center;
}
.storefront--tpl4 .sf-pdp-swatch--img{
  display:flex;
  align-items:center;
  justify-content:center;
}
.storefront--tpl4 .sf-pdp-swatch--img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.storefront--tpl4 .sf-pdp-swatch:hover{transform:scale(1.1);}
.storefront--tpl4 .sf-pdp-swatch.is-active{
  outline:2px solid var(--sf-primary,#C4874A);
  outline-offset:2px;
}
.storefront--tpl4 .sf-pdp-buy{
  width:100%;
  padding:12px;
  background:#3D2B1F;
  color:#FAF8F5;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  border-radius:6px;
  text-decoration:none;
  display:block;
  text-align:center;
}
.storefront--tpl4 .sf-pdp-buy:hover{background:#5a3e2b;}
.storefront--tpl4 .sf-pdp-buy:disabled{opacity:.4;cursor:default;}
.storefront--tpl4 .sf-pdp-shipping{
  font-size:12px;
  color:#9C8A7C;
  text-align:center;
  margin-top:8px;
}
.storefront--tpl4 .sf-pdp-banner{
  width:100%;
  display:block;
  border-radius:10px;
  margin:20px 0 0;
}
.storefront--tpl4 .sf-pdp-desc{
  font-size:13px;
  color:#7A6858;
  line-height:1.65;
  border-top:1px solid #EDE8E0;
  padding-top:12px;
}
.storefront--tpl4 .sf-pdp-desc-title{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#9C8A7C;
  margin-bottom:6px;
}
.storefront--tpl4 .sf-pdp-related{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #EDE8E0;
}
.storefront--tpl4 .sf-pdp-related-title{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#9C8A7C;
  margin-bottom:12px;
}
.storefront--tpl4 .sf-pdp-related-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
}
.storefront--tpl4 .sf-pdp-related-row .sf-card{
  flex:0 0 140px;
}
.storefront--tpl4 .sf-pdp-rating-summary{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 2px;
}
.storefront--tpl4 .sf-pdp-rating-stars{
  color:#C4874A;
  font-size:13px;
  letter-spacing:1px;
}
.storefront--tpl4 .sf-pdp-rating-meta{
  font-size:11px;
  color:#9C8A7C;
}
.storefront--tpl4 .sf-pdp-reviews{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #EDE8E0;
}
.storefront--tpl4 .sf-pdp-reviews-title{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#9C8A7C;
  margin-bottom:12px;
}
.storefront--tpl4 .sf-pdp-review-item{
  padding:10px 0;
  border-bottom:1px solid #F0EBE3;
}
.storefront--tpl4 .sf-pdp-review-stars{
  color:#C4874A;
  font-size:12px;
  display:block;
  margin-bottom:4px;
}
.storefront--tpl4 .sf-pdp-review-text{
  font-size:13px;
  color:#5C4A3D;
  line-height:1.5;
}
.storefront--tpl4 .sf-pdp-review-empty{
  font-size:13px;
  color:#9C8A7C;
  margin-bottom:12px;
}
.storefront--tpl4 .sf-pdp-review-form{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.storefront--tpl4 .sf-pdp-review-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#7A6858;
}
.storefront--tpl4 .sf-pdp-review-form textarea{
  width:100%;
  font-size:13px;
  padding:8px;
  border:1px solid #D9CFC5;
  border-radius:4px;
  resize:vertical;
  font-family:inherit;
}
.storefront--tpl4 .sf-pdp-review-submit{
  align-self:flex-start;
  padding:8px 18px;
  background:#3D2B1F;
  color:#FAF8F5;
  border:none;
  border-radius:4px;
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
}
/* Topbar height */
.sf-topbar-width--narrow .sf-topbar{ height:36px; }
.sf-topbar-width--medium .sf-topbar{ height:50px; }
.sf-topbar-width--full .sf-topbar{ height:68px; }
/* Hero height */
.sf-hero--img{ min-height:320px; }
.sf-hero--img.sf-hero--h-small{ min-height:180px; }
.sf-hero--img.sf-hero--h-medium{ min-height:320px; }
.sf-hero--img.sf-hero--h-large{ min-height:500px; }
/* Hero width */
.sf-hero--w-contained{ max-width:1100px; margin:0 auto; }
.store-design-panel .label{ color:#111; font-weight:600; font-size:12px; }
.store-theme-section-label{ color:#111; font-weight:500; }
.store-theme-tabs-toggle{ color:#111; font-weight:500; }
/* Banner height */
.sf-banner--h-small{ min-height:80px; }
.sf-banner--h-medium{ min-height:160px; }
.sf-banner--h-large{ min-height:280px; }
.storefront[class*="product-font--"] * { font-family: inherit !important; }