/* ==========================================================================
   Balloons Limassol — navy & gold "midnight luxe"
   Palette lives here. Change these 20 lines and the whole site rebrands.
   ========================================================================== */
:root{
  /* base — near-black with a warm undertone. Expensive brands sit on
     near-black or off-white and let the product carry the colour; a
     saturated background competes with the photographs. */
  --navy-950:#05080F;
  --navy-900:#0B1020;
  --navy-850:#121A33;
  --navy-800:#17203C;
  --navy-700:#1E2A4A;
  --surface:#121A33;
  --surface-2:#17203C;
  --line:#1F2742;
  --line-gold:rgba(201,162,39,.24);

  /* type */
  --ink:#F5F3ED;
  --ink-soft:#C9CEDC;
  --muted:#8A93A8;

  /* metals & jewels — a deeper, less yellow gold. #F0C75E reads as
     "sale badge"; this reads as leaf. */
  --gold:#C9A227;
  /* rgba() cannot take a hex variable, so the channels live here as well.
     Every translucent gold and navy in this file reads from these. */
  --gold-rgb:201,162,39;
  --navy-rgb:11,16,32;
  --navy-800-rgb:23,32,60;
  --gold-bright:#E3C97A;
  --gold-deep:#9A7A1C;
  --champagne:#FBEBC0;
  --emerald:#2FD5AA;
  --rose:#FF6FA5;
  --sapphire:#5C9BFF;
  --amethyst:#A97BFF;

  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(3,8,24,.45);
  --shadow-lift:0 6px 16px rgba(0,0,0,.35), 0 24px 60px rgba(3,8,24,.55);
  --glow-gold:0 0 0 1px rgba(var(--gold-rgb),.35), 0 8px 30px rgba(var(--gold-rgb),.20);
  --radius:18px;
  --radius-sm:12px;
  --serif:"Cormorant Garamond","Didot","Playfair Display",Georgia,serif;
  --sans:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:975px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  /* Three coloured washes (blue, gold, violet) used to sit over the navy.
     They were the main reason the page read as busy rather than expensive:
     a tinted light show behind product photography fights the product. One
     almost-invisible warm lift remains, so the page is not flat black. */
  background:
    radial-gradient(1200px 700px at 50% -15%, rgba(201,162,39,.07) 0%, rgba(201,162,39,0) 60%),
    linear-gradient(180deg,var(--navy-900) 0%,var(--navy-950) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.01em;margin:0}
::selection{background:var(--gold);color:var(--navy-950)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* gold hairline used under the header and around cards */
.gold-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(var(--navy-rgb),.78);
  backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--line-gold);
}
.topbar__in{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
/* Smaller and more letterspaced: a confident mark, not a signpost. */
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:18px;letter-spacing:.2em;text-transform:uppercase}
.brand__mark{width:24px;height:24px;flex:none;filter:none}
.topbar__spacer{flex:1}
.search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;min-width:220px;
}
.search input{border:0;outline:0;background:none;width:100%;font-size:13.5px;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid transparent;
  background:none;cursor:pointer;color:var(--ink-soft);transition:.18s ease;
}
.iconbtn:hover{background:rgba(var(--gold-rgb),.12);color:var(--gold-bright);border-color:var(--line-gold)}
.badge{
  position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  color:var(--navy-950);font-size:10.5px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(var(--gold-rgb),.5);
}
.lang{display:flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{
  border:0;background:none;cursor:pointer;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;padding:5px 10px;border-radius:999px;color:var(--muted);
}
.lang button.is-active{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--navy-950)}

/* ---------- profile header ---------- */
.profile{display:flex;gap:48px;padding:64px 0 40px;align-items:flex-start}
.avatar{
  width:142px;height:142px;flex:none;border-radius:50%;padding:1px;
  /* The circle is the Instagram cue and stays. The rainbow conic ring was
     the cheap part of it; a single fine gold ring says the same thing. */
  background:linear-gradient(150deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  box-shadow:none;
}
.avatar > *{width:100%;height:100%;border-radius:50%;border:4px solid var(--navy-900);background:var(--surface);object-fit:cover}
.profile__body{flex:1;min-width:0}
.profile__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.handle{font-size:21px;font-weight:400;font-family:var(--sans);letter-spacing:.01em}
.verified{width:16px;height:16px;color:var(--gold)}
.stats{display:flex;gap:40px;margin:22px 0 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stats b{font-weight:700;color:var(--ink)}
.profile__name{
  font-family:var(--serif);font-size:31px;line-height:1.22;font-weight:400;
  letter-spacing:.005em;color:var(--ink);
}
.profile__bio{max-width:46ch;color:var(--muted);font-size:14px;font-weight:300;line-height:1.85;margin-top:10px}
.profile__link{color:var(--gold-bright);font-weight:400;font-size:12px;letter-spacing:.14em;display:inline-block;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);
  border-radius:999px;padding:9px 20px;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:transform .16s ease,box-shadow .22s ease,background .22s ease,border-color .22s;
}
.btn:hover{transform:none;border-color:var(--line-gold);background:rgba(201,162,39,.08)}
.btn--primary{
  /* Still a solid, obvious button: this is what people tap to buy, and a
     hairline outline would cost sales for the sake of taste. What goes is
     the three-stop gradient and the glow, which is what made it shout. */
  background:var(--gold);border-color:transparent;color:#1A1405;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;
  box-shadow:none;
}
.btn--primary:hover{background:var(--gold-bright);box-shadow:none}
.btn--ghost{background:transparent}
.btn--wide{width:100%;padding:14px 20px;font-size:15px}
.btn--lg{padding:13px 26px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- highlights (categories) ---------- */
.highlights{display:flex;gap:26px;overflow-x:auto;padding:22px 0 26px;scrollbar-width:none}
.highlights::-webkit-scrollbar{display:none}
.hl{width:88px;flex:none;text-align:center}
.hl__ring{
  width:84px;height:84px;border-radius:50%;padding:3px;margin:0 auto 8px;
  background:linear-gradient(150deg,var(--gold-bright),var(--gold-deep) 55%,var(--sapphire));
  transition:transform .22s ease,box-shadow .22s ease;
}
.hl:hover .hl__ring{transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--gold-rgb),.16)}
.hl__img{
  width:100%;height:100%;border-radius:50%;border:3px solid var(--navy-900);
  object-fit:cover;background:var(--surface-2);
}
.hl__label{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl.is-active .hl__label{color:var(--gold-bright);font-weight:600}

/* ---------- tabs ---------- */
.tabs{display:flex;justify-content:center;gap:56px;border-top:1px solid var(--line);margin-top:6px}
.tab{
  display:flex;align-items:center;gap:7px;padding:16px 0;margin-top:-1px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid transparent;transition:color .2s;
}
.tab:hover{color:var(--ink-soft)}
.tab.is-active{color:var(--gold-bright);border-top-color:var(--gold)}

/* ---------- feed grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 0 40px}
.tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface);display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s}
.tile:hover img{transform:scale(1.06);filter:saturate(1.15) brightness(1.05)}
.tile__veil{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:2px;padding:14px;opacity:0;transition:opacity .22s ease;
  background:linear-gradient(to top,rgba(6,13,34,.88) 0%,rgba(6,13,34,.35) 45%,rgba(6,13,34,0) 78%);
  color:var(--ink);
}
.tile:hover .tile__veil,
.tile:focus-visible .tile__veil{opacity:1}

/* A touch screen has no hover, so name and price would never appear at all.
   Most of this shop's customers are on a phone. */
@media (hover:none){
  .tile__veil{
    opacity:1;
    /* Start the scrim below the badge row so text never sits under a flag. */
    padding-top:46px;
    background:linear-gradient(to top,rgba(6,13,34,.92) 0%,rgba(6,13,34,.55) 38%,rgba(6,13,34,0) 72%);
  }
  .tile__name{font-size:15px;-webkit-line-clamp:2}
  .tile__price{font-size:12.5px}
}

/* Keyboard users need to see where they are. */
.tile:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* Shown when a product has no photograph yet, instead of an empty frame. */
.tile__placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--surface),var(--navy-950));
  color:var(--line);
}
.tile__placeholder svg{width:34%;height:34%;opacity:.5}

.tile__name{
  font-family:var(--serif);font-size:18px;line-height:1.2;
  /* Long names such as "Midnight & Gold Aisle Arch" wrapped to three lines and
     ran into the discount badge. Two lines, then ellipsis. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.tile__price{font-size:12px;letter-spacing:.16em;color:var(--gold-bright);font-weight:400}
.tile__flag{
  position:absolute;top:12px;left:12px;
  background:rgba(11,16,32,.72);border:1px solid var(--line-gold);
  color:var(--gold-bright);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;font-weight:500;
  backdrop-filter:blur(6px);box-shadow:none;
}
.tile__flag--sale{background:rgba(11,16,32,.72);border-color:rgba(255,111,165,.5);color:#FF9BC2;box-shadow:none}
.tile__multi{position:absolute;top:10px;right:10px;color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}

/* ---------- cards / panels ---------- */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;position:relative;overflow:hidden;
}
.panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;
}
.panel + .panel{margin-top:18px}
.panel__title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding:32px 0 60px}
.gallery{border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lift);border:1px solid var(--line)}
.gallery__main{aspect-ratio:1/1}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__strip{display:flex;gap:8px;padding:10px;background:rgba(0,0,0,.2)}
.gallery__strip img{width:64px;height:64px;object-fit:cover;border-radius:10px;cursor:pointer;opacity:.5;border:1px solid transparent;transition:.2s}
.gallery__strip img:hover,.gallery__strip img.is-active{opacity:1;border-color:var(--gold)}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.pdp h1{font-size:40px;line-height:1.12;margin:10px 0 6px}
.price{font-size:28px;font-family:var(--serif);display:flex;align-items:baseline;gap:12px;margin:16px 0;color:var(--gold-bright)}
.price s{font-size:17px;color:var(--muted)}
.pill{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink-soft);
}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05)}
.qty button{width:38px;height:44px;border:0;background:none;cursor:pointer;font-size:18px;color:var(--gold)}
.qty input{width:46px;height:44px;border:0;text-align:center;outline:0;background:none;color:var(--ink)}
.buyrow{display:flex;gap:10px;margin-top:20px}
.buyrow .btn--primary{flex:1}

/* ---------- tables / cart ---------- */
.line{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line img{width:82px;height:82px;object-fit:cover;border-radius:var(--radius-sm);flex:none}
.line__body{flex:1;min-width:0}
.totals{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--ink-soft)}
.totals--grand{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:19px;font-family:var(--serif);color:var(--gold-bright)}
.cartgrid{display:grid;grid-template-columns:1.6fr .9fr;gap:24px;padding:28px 0 60px;align-items:start}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);color:var(--ink);outline:0;transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field select option{background:var(--navy-850);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.20);
}
.field textarea{min-height:92px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- studio ---------- */
.studio-head{padding:34px 0 8px}
.studio-head h1{
  font-size:42px;
  background:linear-gradient(100deg,var(--champagne),var(--gold-bright) 35%,var(--sapphire));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dropzone{
  border:1.5px dashed var(--gold);border-radius:var(--radius);
  background:radial-gradient(600px 200px at 50% 0%, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),0) 70%), rgba(255,255,255,.03);
  padding:34px 24px;text-align:center;
}
.dropzone__icon{width:44px;height:44px;margin:0 auto 10px;color:var(--gold-bright)}
.capture-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.mediagrid label{position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:var(--surface-2)}
.mediagrid img,.mediagrid video{width:100%;height:100%;object-fit:cover}
.mediagrid input{position:absolute;inset:auto auto 8px 8px;width:20px;height:20px;accent-color:var(--gold);z-index:2}
.mediagrid label::after{
  content:"";position:absolute;inset:0;border:3px solid transparent;
  border-radius:var(--radius-sm);transition:border-color .18s,box-shadow .18s;pointer-events:none;
}
.mediagrid label:has(input:checked)::after{border-color:var(--gold);box-shadow:inset 0 0 30px rgba(var(--gold-rgb),.25)}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;font-weight:700;
}
.chip--draft{background:rgba(255,255,255,.10);color:var(--ink-soft)}
.chip--approved{background:rgba(47,213,170,.16);color:var(--emerald)}
.chip--published{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--navy-950)}
.chip--video{background:rgba(6,13,34,.8);color:var(--gold-bright);position:absolute;top:8px;right:8px}
.draftcard{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.035);transition:.2s}
.draftcard:hover{border-color:var(--line-gold);background:rgba(var(--gold-rgb),.07)}
.draftcard img,.draftcard video{width:78px;height:78px;object-fit:cover;border-radius:10px;flex:none}
.caption-box{
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;white-space:pre-wrap;font-size:14px;line-height:1.7;color:var(--ink-soft);
}
.tagline-tags{color:var(--sapphire);font-size:13px;line-height:1.9;word-break:break-word}
.studio-cols{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;padding-bottom:60px}

/* ---------- messages, empty, footer ---------- */
.flash{
  background:rgba(var(--gold-rgb),.10);border:1px solid var(--line-gold);
  border-radius:var(--radius-sm);padding:12px 16px;margin:14px 0;font-size:14px;color:var(--champagne);
}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty h3{font-size:28px;color:var(--gold-bright);margin-bottom:6px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 90px;color:var(--muted);font-size:12.5px}
.footer__in{display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--gold)}

/* ---------- mobile tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(var(--navy-rgb),.92);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-gold);padding:9px 0 max(9px,env(safe-area-inset-bottom));
}
.tabbar nav{display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto}
.tabbar a{padding:6px 14px;color:var(--muted);position:relative}
.tabbar a.is-active{color:var(--gold-bright)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .pdp,.cartgrid,.studio-cols{grid-template-columns:1fr;gap:24px}
  .pdp h1{font-size:31px}
}
@media(max-width:720px){
  .wrap{padding:0 12px}
  .topbar__in{padding:10px 12px}
  .search{display:none}
  .profile{gap:18px;padding:20px 0 10px}
  .avatar{width:84px;height:84px}
  .stats{gap:22px;font-size:13px;justify-content:space-around;margin:14px 0}
  .grid{gap:2px}
  .tabs{gap:34px}
  .tabbar{display:block}
  .highlights{gap:16px}
  .hl{width:70px}
  .hl__ring{width:68px;height:68px}
  .row2{grid-template-columns:1fr}
  .studio-head h1{font-size:32px}
  body{padding-bottom:64px}
}

/* ---------- studio: chosen-file preview strip ---------- */
.picked{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.picked__item{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
}
.picked__item img,.picked__item video{width:100%;height:100%;object-fit:cover}
/* HEIC cannot be previewed by any browser; show its identity, not a broken icon. */
.picked__heic{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:linear-gradient(135deg,#16224a,#0d1636);
  color:var(--gold-bright);text-align:center;padding:4px;
}
.picked__heic strong{font-size:13px;letter-spacing:.08em}
/* Shown while a phone video is still being converted for the browser. */
.media-pending{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:linear-gradient(135deg,#16224a,#0d1636);
  color:var(--gold-bright);text-align:center;padding:4px;
}
.media-pending strong{font-size:12px;letter-spacing:.08em}
.media-pending span{font-size:9px;color:var(--ink-soft)}
.picked__heic span{font-size:9px;color:var(--ink-soft);line-height:1.2}
.picked__item.is-oversized{border-color:var(--rose)}
.picked__item.is-oversized::after{
  content:"";position:absolute;inset:0;background:rgba(255,111,165,.25);
}
.picked__size{
  position:absolute;left:6px;bottom:6px;z-index:2;
  background:rgba(6,13,34,.78);color:var(--champagne);
  font-size:10.5px;padding:3px 7px;border-radius:999px;
}
.picked__remove{
  position:absolute;top:5px;right:5px;z-index:3;
  width:22px;height:22px;line-height:1;border:0;border-radius:50%;cursor:pointer;
  background:rgba(6,13,34,.8);color:var(--ink);font-size:15px;
  display:grid;place-items:center;transition:background .18s,color .18s;
}
.picked__remove:hover{background:var(--rose);color:#fff}
.picked__warn{color:var(--rose)}
.picked .chip--video{top:5px;right:32px}

/* ==========================================================================
   Customer assistant widget
   ========================================================================== */
#assistant{position:fixed;right:22px;bottom:22px;z-index:120}
#assistant.is-open{z-index:130}

.ai-launcher{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--line-gold);border-radius:999px;padding:8px 18px 8px 8px;
  background:linear-gradient(135deg,rgba(var(--navy-800-rgb),.96),rgba(var(--navy-rgb),.96));
  color:var(--ink);box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 0 1px rgba(var(--gold-rgb),.15);
  backdrop-filter:blur(12px);transition:transform .2s ease,box-shadow .25s ease;
}
.ai-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(var(--gold-rgb),.25)}
.ai-launcher img{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold)}
.ai-launcher__text{font-size:13.5px;font-weight:500;white-space:nowrap}
.ai-launcher__dot{
  width:8px;height:8px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 0 rgba(47,213,170,.7);animation:aiPulse 2.4s infinite;
}
@keyframes aiPulse{
  0%{box-shadow:0 0 0 0 rgba(47,213,170,.6)}
  70%{box-shadow:0 0 0 9px rgba(47,213,170,0)}
  100%{box-shadow:0 0 0 0 rgba(47,213,170,0)}
}
#assistant.is-open .ai-launcher{display:none !important}

.ai-panel{
  width:378px;max-width:calc(100vw - 28px);height:min(620px,calc(100vh - 110px));
  display:none;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,var(--navy-850),var(--navy-900) 55%,var(--navy-950));
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(var(--gold-rgb),.14);
}
#assistant.is-open .ai-panel{
  display:flex !important;
  animation:aiIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes aiIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.ai-panel__head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:relative;z-index:3;flex:none;
}
.ai-panel__avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);flex:none}
.ai-panel__name{font-family:var(--serif);font-size:19px;color:var(--gold-bright);line-height:1.2}
.ai-panel__role{font-size:11.5px;color:var(--muted)}
.ai-panel__close{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#E2E8F0;
  font-size:22px;line-height:1;cursor:pointer;
  width:40px;height:40px;min-width:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;position:relative;z-index:5;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
.ai-panel__close:hover,.ai-panel__close:focus{
  color:var(--navy-950);background:var(--gold-bright);border-color:var(--gold-bright);outline:0;
}

.ai-disclosure{
  margin:0;padding:8px 16px;font-size:11px;line-height:1.5;color:var(--muted);
  background:rgba(var(--gold-rgb),.07);border-bottom:1px solid var(--line);
}

.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.ai-log::-webkit-scrollbar{width:6px}
.ai-log::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.ai-msg{display:flex}
.ai-msg--user{justify-content:flex-end}
.ai-bubble{
  max-width:82%;padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;
}
.ai-msg--assistant .ai-bubble{
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-bottom-left-radius:6px;color:var(--ink);
}
.ai-msg--user .ai-bubble{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  color:var(--navy-950);border-bottom-right-radius:6px;font-weight:500;
}

.ai-typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:aiDot 1.3s infinite}
.ai-typing span:nth-child(2){animation-delay:.18s}
.ai-typing span:nth-child(3){animation-delay:.36s}
@keyframes aiDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ai-products{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}
.ai-products::-webkit-scrollbar{display:none}
.ai-product{
  width:142px;flex:none;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.05);
}
.ai-product img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ai-product__body{padding:9px 10px 11px}
.ai-product__name{display:block;font-family:var(--serif);font-size:14px;line-height:1.25;color:var(--ink)}
.ai-product__price{font-size:13px;color:var(--gold-bright);font-weight:600;margin:3px 0 8px}
.ai-product__add{width:100%;padding:7px 8px;font-size:11.5px}

.ai-openers{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.ai-chip{
  border:1px solid var(--line-gold);background:rgba(var(--gold-rgb),.08);color:var(--champagne);
  border-radius:999px;padding:7px 13px;font-size:12.5px;cursor:pointer;transition:.18s;
}
.ai-chip:hover{background:rgba(var(--gold-rgb),.18);color:var(--gold-bright)}

.ai-compose{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.ai-compose input{
  flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;
  background:rgba(255,255,255,.06);color:var(--ink);outline:0;font-size:14px;
}
.ai-compose input::placeholder{color:var(--muted)}
.ai-compose input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
.ai-send{
  width:42px;height:42px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--navy-950);
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(var(--gold-rgb),.35);
}
.ai-send:hover{filter:brightness(1.08)}

@media(max-width:720px){
  #assistant{right:12px;bottom:74px}
  .ai-launcher__text{display:none}
  .ai-launcher{padding:6px}
  .ai-panel{width:calc(100vw - 24px);height:min(72vh,560px)}
}

/* ---------- Instagram pre-publish preview ---------- */
.ig-preview-panel{
  background:#060C1F;border:1px solid rgba(var(--gold-rgb),.4);border-radius:24px;
  padding:16px;box-shadow:0 15px 35px rgba(0,0,0,.55);
}
.ig-preview-panel .panel__title{color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ig-format-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ig-format-tabs button{
  flex:1;min-width:72px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink-soft);border-radius:999px;padding:8px 10px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;cursor:pointer;
}
.ig-format-tabs button.is-active{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  color:var(--navy-950);border-color:transparent;
}
.ig-phone{
  background:#000;border-radius:18px;border:2px solid #2D3748;overflow:hidden;
  color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.ig-phone__header,.ig-phone__actions,.ig-phone__caption{padding:10px 12px}
.ig-phone__header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #1A202C;
}
.ig-phone__user{display:flex;align-items:center;gap:8px}
.ig-phone__avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px;
}
.ig-phone__avatar span{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:#000;color:var(--gold);font-size:11px;font-weight:700;
}
.ig-phone__handle{font-weight:600;font-size:13px;line-height:1.2}
.ig-phone__place{font-size:10px;color:#A0AEC0}
.ig-stage{
  position:relative;width:100%;background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ig-stage-wrap{position:relative;background:#000}
.ig-stage[data-mode="post"],
.ig-stage[data-mode="carousel"]{aspect-ratio:1/1}
.ig-stage[data-mode="reel"],
.ig-stage[data-mode="story"]{aspect-ratio:9/16;max-height:420px}
.ig-stage__media,.ig-stage video,.ig-stage img,.ig-stage canvas{
  width:100%;height:100%;object-fit:cover;display:block;background:#000;
}
.ig-stage__empty{padding:40px 20px;color:#718096;font-size:12px;text-align:center}
.ig-progress{position:absolute;top:8px;left:8px;right:8px;z-index:5;display:flex;gap:4px}
.ig-progress span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.ig-progress i{display:block;height:100%;width:0;background:#fff}
.ig-progress span.is-done i{width:100%}
.ig-progress span.is-active i{width:var(--p,0%)}
.ig-stage__badge{
  position:absolute;top:14px;left:12px;z-index:6;
  background:rgba(0,0,0,.55);border:1px solid rgba(var(--gold-rgb),.45);
  color:var(--gold-bright);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;font-weight:700;
}
.ig-stage[data-mode="story"] ~ .ig-stage__badge,
.ig-stage-wrap:has(.ig-stage[data-mode="story"]) .ig-stage__badge,
.ig-stage-wrap:has(.ig-stage[data-mode="reel"]) .ig-stage__badge{top:22px}
.ig-hook{
  position:absolute;left:16px;right:16px;top:42%;z-index:6;text-align:center;
  font-family:var(--serif);font-size:22px;color:var(--gold-bright);
  text-shadow:0 4px 18px rgba(0,0,0,.85);pointer-events:none;
}
.ig-controls{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:7;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(var(--navy-rgb),.85);backdrop-filter:blur(6px);
  border:1px solid rgba(var(--gold-rgb),.35);border-radius:12px;padding:6px 10px;
}
.ig-controls button{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  color:var(--navy-950);border:0;border-radius:8px;padding:5px 12px;
  font-weight:700;font-size:11px;cursor:pointer;
}
.ig-controls button.ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);
}
.ig-controls__label{font-size:11px;color:#fff;font-weight:600;white-space:nowrap}
.ig-dots{display:flex;justify-content:center;gap:5px;padding:8px 0 0}
.ig-dots button{
  width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);
}
.ig-dots button.is-active{background:var(--gold-bright);width:14px;border-radius:999px}
.ig-phone__actions{display:flex;justify-content:space-between;font-size:18px}
.ig-phone__actions div{display:flex;gap:12px}
.ig-lang{display:flex;gap:6px;padding:0 12px 6px}
.ig-lang button{
  background:#1A202C;color:#A0AEC0;border:0;padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:700;cursor:pointer;
}
.ig-lang button.is-active{background:var(--gold);color:var(--navy-950)}
.ig-phone__caption{font-size:12px;line-height:1.45;padding-bottom:14px}
.ig-phone__caption strong{margin-right:4px}
.ig-phone__hashtags{margin-top:6px;color:#5C9BFF;font-size:11px}
.ig-phone__music{margin-top:6px;font-size:10px;color:#A0AEC0}
.ig-publish-note{
  font-size:12.5px;color:var(--ink-soft);background:rgba(var(--gold-rgb),.08);
  border:1px solid var(--line-gold);border-radius:12px;padding:10px 12px;margin-bottom:12px;
}
.ig-publish-note.is-ready{
  background:rgba(47,213,170,.12);border-color:rgba(47,213,170,.35);color:var(--emerald);
}
.btn[disabled],.btn.is-disabled{
  opacity:.45;pointer-events:none;cursor:not-allowed;filter:grayscale(.3);
}

/* Fullscreen preview modal */
.ig-modal[open]{
  border:0;padding:0;background:transparent;max-width:none;width:100%;height:100%;
}
.ig-modal::backdrop{background:rgba(4,8,22,.88);backdrop-filter:blur(8px)}
.ig-modal__shell{
  min-height:100vh;display:grid;place-items:center;padding:24px 16px;
}
.ig-modal__card{
  width:min(420px,100%);background:#060C1F;border:1px solid rgba(var(--gold-rgb),.4);
  border-radius:24px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.ig-modal__top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;
}
.ig-modal__top h2{font-size:18px;color:var(--gold);margin:0}
.ig-modal__close{
  border:0;background:rgba(255,255,255,.08);color:var(--ink);width:34px;height:34px;
  border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
}

/* ---------- consent banner ----------
   Fixed to the bottom, above the mobile tab bar (z-index 70) so it never
   hides navigation. Both buttons are equally reachable and equally styled in
   weight: a "decline" that is harder to find than "accept" is a dark pattern
   and, under EU guidance, means the consent collected is not valid. */
.consent{
  position:fixed;z-index:80;left:12px;right:12px;bottom:12px;margin:0 auto;
  max-width:680px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;
  background:rgba(var(--navy-800-rgb),.97);backdrop-filter:blur(18px);
  border:1px solid var(--line-gold);box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.consent[hidden]{display:none}
/* The Elena launcher is fixed at z-index 120 and would sit on top of the
   "Allow" button. Lift it by the banner's real height — measured in JS,
   because the copy wraps to a different number of lines in EL and RU. */
body.consent-open #assistant{bottom:calc(22px + var(--consent-h, 0px) + 14px)}
.consent__text{margin:0;flex:1 1 280px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.consent__text a{color:var(--gold)}
.consent__actions{display:flex;gap:10px;flex:0 0 auto}
.consent__actions .btn{padding:9px 18px;font-size:13.5px}

@media(max-width:720px){
  /* Clear the tab bar and the iPhone home indicator. */
  .consent{bottom:calc(64px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}
  /* The banner is now a COLUMN, so flex-basis applies to height. Left at
     "1 1 280px" the paragraph claims a 280px-tall box and the banner eats
     half the phone screen. */
  .consent__text{flex:0 0 auto}
  body.consent-open #assistant{bottom:calc(74px + var(--consent-h, 0px) + 12px)}
  .consent__actions{justify-content:stretch}
  .consent__actions .btn{flex:1}
}