:root{
  --r:18px;

  --cyan:#00E7FF;
  --pink:#050305;
  --orange:#FF8A00;
  --lime:#A6FF00;
  --gold:#FFD84D;
  --green:#A6FF00;
  --purple:#9f00ff;
  --blue:#60a5fa;
  --red:#ef4444;
  --bg: linear-gradient(180deg, var(--bgTop), var(--bgMid), var(--bgBot));

  --bgTop:#141a33;
  --bgMid:#0f142a;
  --bgBot:#0b0f22;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);

  --card:rgba(255,255,255,.075);
  --stroke:rgba(255,255,255,.18);
  --shadow: 0 26px 90px rgba(0,0,0,.55);

  --space-xxl: 140px;
  --space-lg: 70px;
  --space-md: 40px;
  --space-sm: 20px;

  --radius-xl: 22px;
  --radius-lg: 18px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-deep: 0 40px 90px rgba(0,0,0,.65);

  --text-strong: rgba(255,255,255,.95);
  --text-medium: rgba(255,255,255,.75);
  --text-light: rgba(255,255,255,.55);
}

*{
  box-sizing:border-box;
  scroll-behavior: smooth;
}

html{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(159,0,255,.25), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(245,196,0,.18), transparent 55%),
    radial-gradient(1200px 800px at 50% 100%, rgba(34,197,94,.12), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100%;
}

@supports (-webkit-touch-callout: none) {
  html{ background-attachment: scroll; }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(1200px 600px at 20% 0%, rgba(159,0,255,.25), transparent 55%),
      radial-gradient(900px 500px at 80% 20%, rgba(245,196,0,.18), transparent 55%),
      radial-gradient(1200px 800px at 50% 100%, rgba(34,197,94,.12), transparent 60%),
      var(--bg);
    background-repeat:no-repeat;
    background-size:cover;
  }
}

section{
  padding: var(--space-xl) 0;
}

p{
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.wrap{width:min(1120px, 100%); margin-inline:auto; padding:22px;}
.brand{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.logo{
  display:flex; gap:10px; align-items:center;
  font-weight:900; letter-spacing:.6px;
}
.dot{
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple), var(--gold));
  box-shadow:0 0 18px rgba(159,0,255,.35);
}
.badge{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}

.card{
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
  position: relative;
  min-height: 100%;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(0,231,255,.12), transparent 65%),
    radial-gradient(520px 220px at 88% 40%, rgba(255,43,234,.10), transparent 65%);
  opacity:.9;
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,231,255,.22);
  box-shadow: 0 26px 78px rgba(0,0,0,.48);
}
.cardMedia{
  position:relative;
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(0,0,0,.18);
}
.cardMedia img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  filter: contrast(1.06) saturate(1.05);
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  opacity:.95;
}
.card:hover .cardMedia img{
  transform: scale(1.07);
  filter: contrast(1.08) saturate(1.12);
}
.cardBody{ padding: 14px 14px 12px; }
.cardDesc{
  opacity:.86;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.cardActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 12px;
  flex-wrap:wrap;
}

.content{padding:18px 18px 16px}
h1{margin:0; font-size:22px; line-height:1.2}
p{margin:6px 0 0; color:var(--muted); line-height:1.5}

.btn.secondary{
  background: rgba(255,255,255,.08);
  color: #f5d96b;
  border: 1px solid rgba(212,175,55,.45);
  font-weight:600;
  backdrop-filter: blur(6px);
  transition: all .3s ease;
}

.btn.secondary:hover{
  background: rgba(212,175,55,.12);
  border-color: #d4af37;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212,175,55,.25);
}

.btn.secondary:active{
  transform: scale(.97);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.4);
}


.btn.primary{
  background: linear-gradient(135deg,#d4af37,#f5d96b);
  color:#111;
  font-weight:600;
}
.btn.gold{
  border-color:rgba(245,196,0,.45);
  background:rgba(245,196,0,.12);
}
.btn.danger{
  border-color:rgba(239,68,68,.45);
  background:rgba(239,68,68,.12);
}
.btn.ghost{
  padding:8px 10px;
  font-weight:900;
  font-size:14px;
  border-radius:12px;
}
.btn:disabled{opacity:.55; cursor:not-allowed}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 12px;
}
.chip{
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.16);
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--text);
}
.chip:hover{filter:brightness(1.08)}
.chip.active{
  border-color: rgba(245,196,0,.45);
  background: rgba(245,196,0,.10);
}
.chip .count{color: rgba(245,196,0,.95)}

.views{margin-top:10px}
.view{display:none}

.view{
  opacity:0;
  transform: translateY(8px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.view.active{
  opacity:1;
  transform: translateY(0);
  display:block;
}


.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:12px 0 14px;
}
.field{
  flex:1;
  min-width:220px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.16);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.field textarea{min-height:92px; resize:vertical}


.field select option{
  color:#111 !important;
  background:#fff !important;
}


.cats{
  display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 14px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

.product{
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
  transition: all .35s ease;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

@keyframes badgeShimmer{
  0% { left:-120%; }
  100% { left:140%; }
}

.productBadge.elite{
  background:linear-gradient(135deg,#f5c400,#d49b00);
  box-shadow:0 0 18px rgba(245,196,0,.4);
  color:#111;
}

.productBadge.premium{
  background:linear-gradient(135deg,#cfd3da,#9aa3af);
  box-shadow:0 0 14px rgba(200,200,255,.35);
  color:#111;
}

.productBadge.certified{
  background:linear-gradient(135deg,#b87333,#8b5a2b);
  color:#fff;
}

.productBadge.limited{
  background:linear-gradient(135deg,#ff2bea,#a800ff);
  color:#fff;
}

.productBadge.new{
  background:linear-gradient(135deg,#00e7ff,#00aaff);
  color:#001018;
}

.productBadge.trending{
  background: linear-gradient(135deg,#ff416c,#ff4b2b);
  color:white;
  box-shadow: 0 0 12px rgba(255,65,108,.5);
}

.productBadge.top_sales{
  background:linear-gradient(135deg,#ff7a00,#ff0033);
  color:#fff;
  box-shadow:0 0 18px rgba(255,50,0,.4);
}

.productBadge.promo{
  background:linear-gradient(135deg,#ff8a00,#ff4d00);
  color:white;
  font-weight:700;
  font-size:11px;
  padding:3px 8px;
  border-radius:6px;
  box-shadow:
    0 0 8px rgba(255,120,0,0.5),
    inset 0 0 6px rgba(255,255,255,0.15);
}

.productBadge.clearance{
  background:linear-gradient(135deg,#ff4d4d,#c40000);
  color:white;
  font-weight:700;
  font-size:11px;
  padding:3px 8px;
  border-radius:6px;
  box-shadow:
    0 0 8px rgba(255,0,0,0.4),
    inset 0 0 6px rgba(255,255,255,0.1);
}

.productBadge.popular{
  background: linear-gradient(135deg,#ffb400,#ff8800);
  color:#fff;
  box-shadow:0 0 12px rgba(255,150,0,.5);
}

.priceOld{
  text-decoration:line-through;
  opacity:0.6;
  font-size:12px;
  margin-right:6px;
}

.pricePromo{
  color:#ff8a00;
  font-weight:700;
}

.product:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}

.product::before{
  content:"";
  position:absolute;
  inset:0px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(0,231,255,.12), transparent 65%),
    radial-gradient(520px 220px at 88% 40%, rgba(255,43,234,.10), transparent 65%);
  opacity:.9;
  pointer-events:none;
}
.product > *{ position:relative; z-index:1; }
.product:hover{
  border-color: rgba(0,231,255,.22);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
.prodTop{display:flex; align-items:center; justify-content:space-between; gap:10px}

.prodTop .left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.emoji{
  width:42px;
  height:42px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  flex:0 0 auto;
}
.prodIcon{
  width:46px;
  height:46px;
  border-radius:16px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.prodIcon img{ width:100%; height:100%; object-fit:cover; display:block; }


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

@media (max-width:520px){
  .emoji{ width:36px; height:36px; border-radius:12px; }
}

.name{
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desc{
  color:var(--muted);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
  display:-webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.price{
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .02em;
  font-size: 1.05rem;
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  font-weight:900;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.pill.ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(225,255,235,.92);
}
.pill.bad{
  border-color: rgba(239,68,68,.40);
  background: rgba(239,68,68,.12);
  color: rgba(255,230,230,.92);
}

.pill.stock.ok{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); color:rgba(255,255,255,.86)}
.pill.stock.no{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); color:rgba(255,255,255,.86)}

.prodBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
}
.qty .n{
  min-width:22px;
  text-align:center;
  font-weight:900;
}

.box{
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
}
.cartLine{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.cartLine:first-child{border-top:0}
.cartLeft{display:flex; gap:10px; min-width:0; flex:1}
.cartEmoji{width:38px;height:38px;border-radius:14px;font-size:18px}
.cartInfo{min-width:0}
.cartName{font-weight:900}
.cartRight{display:flex; gap:12px; align-items:center; justify-content:flex-end}
.priceCol{min-width:84px; text-align:right; font-weight:900; color:rgba(245,196,0,.95)}
.muted{color:var(--muted)}
.totalRow{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}

@media (max-width: 520px){
  .cartLine{flex-direction:column; align-items:stretch;}
  .cartRight{width:100%; justify-content:space-between;}
  .priceCol{min-width:auto;}
}

.orderCard{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-top:10px;
}
.orderMain{min-width:0; flex:1}
.orderTopLine{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.orderCode{font-weight:900}
.orderMeta{margin-top:6px; font-size:12px; color:var(--muted); line-height:1.35}
.orderRight{display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right}
.orderBtns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

@media (max-width: 520px){
  .orderCard{flex-direction:column; align-items:stretch;}
  .orderRight{align-items:flex-start; text-align:left}
  .orderBtns{justify-content:flex-start}
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  transition: 180ms ease;
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width: min(520px, calc(100vw - 28px));
  max-width: 720px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
  z-index: 9999;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}
.toast .tIcon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  flex:0 0 auto;
}
.toast .tTitle{font-weight:900; font-size:13px; line-height:1.2;}
.toast .tMsg{color:var(--muted); font-size:12px; margin-top:2px; line-height:1.35;}
.toast.ok{ border-color: rgba(34,197,94,.35); }
.toast.ok .tIcon{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.toast.err{ border-color: rgba(239,68,68,.35); }
.toast.err .tIcon{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.toast .tClose{
  margin-left:auto;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.20);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 900;
  cursor: pointer;
  font-size: 12px;
}
.toast .tClose:hover{filter:brightness(1.08)}

.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index: 9998;
}
.overlay.show{display:flex;}
.appModal{
  width:min(920px, 100%);
  max-height: calc(100vh - 28px);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.modalTop{
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modalClose{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 11px;
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.modalBody{
  flex: 1 1 auto;
  padding:14px;
  overflow:auto;
}
@media (max-width: 520px){
  .overlay{padding:10px;}
.appModal{border-radius:16px;}
  .modalClose{width:100%; justify-content:center;}
}

.section-title{
  font-size: 34px;
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.infoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 768px){
  .infoGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


.infoCard{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:13px;
}
.infoCard .k{color:var(--muted);}
.infoCard .v{font-weight:900; text-align:right;}
.bullet{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding:10px 12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.status .dotS{
  width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 18px rgba(245,196,0,.25);
  background: var(--gold);
}
.status.paywait{
border-color: rgba(245,196,0,.35);
background: rgba(245,196,0,.10);
}
.status.paywait .dotS{background: var(--gold);}


.status.cancel{
border-color: rgba(245,0,82,.35);
background: rgba(245,0,0,.10);
}
.status.cancel .dotS{background: var(--red);}


.status.pending{
border-color: rgba(245,196,0,.35);
background: rgba(245,196,0,.10);
}
.status.pending .dotS{background: var(--gold);}


.status.handled{
border-color: rgba(96,165,250,.35);
background: rgba(96,165,250,.10);
}
.status.handled .dotS{background: var(--blue);}


.status.preparing{
border-color: rgba(159,0,255,.35);
background: rgba(159,0,255,.10);
}
.status.preparing .dotS{background: var(--purple);}


.status.shipped{
border-color: rgba(34,197,94,.35);
background: rgba(34,197,94,.10);
}
.status.shipped .dotS{background: var(--green);}


.status.done{
border-color: rgba(34,197,94,.35);
background: rgba(34,197,94,.10);
}
.status.done .dotS{background: var(--green);}

.view#view-home {
  background: linear-gradient(180deg, #1e130c, #9a8478);
  color: #f4ede8;
  padding: 30px 20px;
}

.view#view-home .homeCard {
  background: #fff8ee;
  color: #2d1b10;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  max-width: 800px;
  margin: auto;
}

.homeCard h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #3c2415;
}

.homeCard p {
  font-size: 15px;
  line-height: 1.6;
}

.homeHighlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.homeHighlight {
  background: #fbe8c8;
  padding: 14px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #3a210e;
}

.bg-hero {
  background: url("/assets/img/home-hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 40px 20px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.75);
}

.homeStats {
  display: flex;
  gap: 20px;
  justify-content: space-around;
  margin-top: 20px;
}

.statCard {
  text-align: center;
  background: rgba(0,0,0,0.45);
  padding: 15px;
  border-radius: 8px;
  min-width: 100px;
}

.statNum {
  font-size: 22px;
  font-weight: 900;
  color: #ffe100;
}

.statLabel {
  font-size: 12px;
  opacity: .85;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status .dotS {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pagination {
  margin-top:12px;
  text-align:center;
  display:flex;
  justify-content:center;
  gap:8px;
}

.homeStats {
  display: flex;
  justify-content: space-around;
  gap:14px;
  margin:22px 0;
}
.statCard {
  background:rgba(0,0,0,0.45);
  padding:16px;
  border-radius:10px;
  text-align:center;
  color:#fff;
  width:120px;
}
.statNum {
  font-size:26px;
  font-weight:900;
  color:#ffe100;
}

.qtyInput {
  width:40px;
  text-align:center;
}

#view-home{ background: transparent !important; padding:0 !important; color: var(--text); }

#view-home .homeHero{
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(245,196,0,.22), transparent 55%),
    radial-gradient(900px 360px at 90% 10%, rgba(159,0,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.40));
}

#view-home .homeHero.bg-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.70)),
    url("/assets/img/banner-drinks.jpg") center/cover no-repeat;
}
#view-home .homeHero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.28));
  pointer-events:none;
}

#view-home .homeHeroInner{
  position:relative;
  z-index:1;
  padding:18px;
  display:grid;
  grid-template-columns: 1.35fr .95fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 920px){
  #view-home .homeHeroInner{ grid-template-columns:1fr; }
}

.homePills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.homePill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.86);
  font-weight:900;
  font-size:12px;
  backdrop-filter: blur(10px);
}

#view-home h2{ margin:0; font-size:26px; line-height:1.15; }
.homeLead{ margin-top:10px; font-size:14px; color: rgba(255,255,255,.78); max-width: 52ch; }

.homeCtas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.homeTrust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.homeTrustItem{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  color: rgba(255,255,255,.76);
  font-weight:800;
}

.homeHeroSide{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  border-radius:14px;
  padding:12px;
  backdrop-filter: blur(10px);
}

#view-home .homeStats{ margin:0 0 12px !important; gap:10px !important; justify-content:space-between !important; }
#view-home .statCard{
  width:auto !important;
  flex:1;
  background: rgba(0,0,0,.26) !important;
  border:1px solid rgba(255,255,255,.10);
}
#view-home .statNum{ font-size:22px !important; }

.homeMiniTitle{
  margin-top:8px;
  font-weight:900;
  font-size:12px;
  color: rgba(255,255,255,.78);
  letter-spacing:.2px;
}

.homePicks{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:16px;
}
@media (min-width: 992px){
  .homePicks{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 560px) and (max-width: 920px){
  .homePicks{ grid-template-columns: repeat(2, 1fr); }
}

.homePickCard{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  margin-top: 16px;
}
.homePickCard::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(0,231,255,.14), transparent 65%),
    radial-gradient(520px 220px at 88% 40%, rgba(255,43,234,.12), transparent 65%);
  opacity:.95;
  pointer-events:none;
}
.homePickCard > *{ position:relative; z-index:1; }
.homePickCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,231,255,.24);
  box-shadow: 0 26px 78px rgba(0,0,0,.45);
}
.homePickEmoji{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.35);
  font-size: 22px;
}
.homePickEmoji::after{
  content:"";
  position:absolute; inset:-12px;
  background: linear-gradient(90deg, rgba(0,231,255,.85), rgba(255,138,0,.80), rgba(255,43,234,.85));
  opacity:.20;
  filter: blur(12px);
  pointer-events:none;
}
.homePickEmoji img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.homePickEmoji img{ width:100%; height:100%; object-fit:cover; display:block; }
.homePickName{
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.1;
}
.homePickMeta{
  opacity:.78;
  font-size:.86rem;
  line-height:1.25;
}
.homePickBtns{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
  align-items:center;
}
.homePickBtns .btn,
.prodBottom .btn{
  border-radius: 999px;
  padding: 10px 14px;
  line-height: 1;
}

.homePickSkeleton{ color: rgba(255,255,255,.70); font-size:13px; }

#view-home .homeCard{
  margin-top:12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
  box-shadow:none !important;
  max-width: none !important;
  color: var(--text) !important;
}
#view-home .homeHow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 820px){
  #view-home .homeHow{ grid-template-columns:1fr; }
}
.homeStep{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  line-height:1.45;
  font-size:13px;
}
.homeStep b{ color: var(--text); }
.homeStepN{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  font-weight:900;
  color: rgba(0,0,0,.85);
  background: linear-gradient(135deg, var(--gold), rgba(245,196,0,.55));
  flex:0 0 auto;
}

.testimonials{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-top:16px;
}
@media (max-width: 720px){
  .testimonials{ grid-template-columns: 1fr; }
}

.testiCard{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
  margin-top: 16px;
}

.testiTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.testiName{
  font-weight:900;
  color: rgba(255,255,255,.92);
}
.testiDate{
  font-size:12px;
  color: var(--muted);
}

.stars{ display:inline-flex; gap:2px; align-items:center; }
.star{
  font-size:14px;
  opacity:.25;
  transform: translateY(-1px);
}
.star.on{
  opacity:1;
  color: rgba(245,196,0,.95);
  text-shadow: 0 0 16px rgba(245,196,0,.18);
}

.testiComment{
  color: rgba(255,255,255,.82);
  line-height:1.45;
  font-size:13px;
}

.fbWrap{display:flex; flex-direction:column; gap:12px;}
.fbRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.fbHint{font-size:12px; color:var(--muted); line-height:1.4;}


.fbStars{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.fbStarBtn{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.35);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.fbStarBtn:hover{transform: translateY(-1px);}
.fbStarBtn:active{transform: translateY(0);}

.fbStarBtn.on{
  color: rgba(245,196,0,.95);       
  border-color: rgba(245,196,0,.35);
  background: rgba(245,196,0,.08);        
  box-shadow: 0 0 16px rgba(245,196,0,.10);
}

.fbStarIcon{
  width:20px; height:20px;
  fill: currentColor;                         
  display:block;
}

.fbActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}


.qty input.n.qtyInput{
  width:46px;
  min-width:46px;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color: rgba(255,255,255,.92);
  text-align:center;
  font-weight:900;
  font-size:14px;
}


.qty input[type=number]::-webkit-outer-spin-button,
.qty input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.qty input[type=number]{ -moz-appearance:textfield; }


.qty input.n.qtyInput{
  width:46px;
  min-width:46px; 
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color: rgba(255,255,255,.92);
  text-align:center;
  font-weight:900;
  font-size:14px;
}

.qty input[type=number]::-webkit-outer-spin-button,
.qty input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.qty input[type=number]{ -moz-appearance:textfield; }

#view-home .homeCard{
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(14px);
}

#view-home .homeCard .sectionTitle{
  color: rgba(255,255,255,.90) !important;
}

#view-home .homeCard .muted{
  color: rgba(255,255,255,.65) !important;
}

#view-home .homeCard .homeStep{
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
}
#view-home .homeCard .homeStep b{
  color: rgba(255,255,255,.92) !important;
}

#view-home .homeCard .bullet{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
}

.chatWrap{display:flex; flex-direction:column; gap:12px;}
.chatMsgs{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
  height: min(52vh, 520px);
  overflow:auto;
}
.chatMsg{display:flex; margin:8px 0;}
.chatMsg.me{justify-content:flex-end;}
.chatMsg.staff{justify-content:flex-start;}
.chatMsg.other{justify-content:flex-start;}

.chatBubble{
  max-width: min(78%, 560px);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.chatMsg.me .chatBubble{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.25);
}
.chatMsg.staff .chatBubble{
  background: rgba(245,196,0,.10);
  border-color: rgba(245,196,0,.25);
}

.chatMeta{font-weight:900; font-size:12px; color: rgba(255,255,255,.85);}
.chatTime{font-weight:700; color: var(--muted);}
.chatText{margin-top:6px; color: rgba(255,255,255,.88); line-height:1.45; font-size:13px;}

.chatComposer{
  display:flex; gap:10px; align-items:flex-end;
}
.chatInput{
  flex:1;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}

.chatDelivery{
  border:1px dashed rgba(255,255,255,14);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.10);
}

.chatShell{display:flex; flex-direction:column; gap:12px;}
.chatMsgs{
  height: 460px;
  overflow:auto;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  border-radius:18px;
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.chatRow{display:flex; margin:10px 0;}
.chatRow.mine{justify-content:flex-end;}
.chatRow.staff{justify-content:flex-start;}

.chatBubble{
  max-width:min(78%, 680px);
  border-radius:18px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chatBubble.staff{
  background: rgba(245,196,0,.10);
  border-color: rgba(245,196,0,.30);
}
.chatBubble.mine{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.32);
}

.chatMeta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color: var(--muted);
  margin-bottom:6px;
}
.chatName{font-weight:900; color: var(--text);}
.chatName.staff{color: rgba(245,196,0,.95);}
.chatName.mine{color: rgba(34,197,94,.95);}
.chatText{white-space:pre-wrap; word-break:break-word; line-height:1.45;}

.chatComposer{display:flex; gap:10px; align-items:center;}
.chatComposer .field input{font-weight:800;}

.chatDot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-left:8px;
  background: rgba(245,196,0,.95);
  box-shadow: 0 0 14px rgba(245,196,0,.35);
  border: 1px solid rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.view#view-home h2,
.view#view-home p{
  overflow-wrap:anywhere;
  word-break:break-word;
}


.modalBody{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cefSelectOverlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#overlay.show .cefSelectOverlay{
  position: absolute;
}

.cefSelectCard{
  width: min(720px, 100%);
  max-height: calc(100vh - 28px);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.cefSelectTop{
  padding: 12px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cefSelectTitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

.cefSelectSearchWrap{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cefSelectSearch{
  width: 100%;
}

.cefSelectList{
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
}

.cefSelectOpt{
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.cefSelectOpt.isSelected{
  border-color: rgba(245,196,0,.35);
  background: rgba(245,196,0,.12);
}


.miniCart{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(760px, calc(100vw - 24px));
  z-index: 6500;
}

.miniCartBtn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  cursor: pointer;
  font-weight: 900;
}

.miniCartBtn:active{ transform: translateY(1px); }

.miniCartBtn .mcLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mcIcon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(159,0,255,.18);
  border: 1px solid rgba(159,0,255,.35);
  box-shadow: 0 0 18px rgba(159,0,255,.18);
  flex: 0 0 auto;
}

.mcText{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
  text-align:left;
}

.mcTitle{
  font-size: 13px;
  opacity: .92;
}

.mcMeta{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcRight{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(245,196,0,.28);
  background: rgba(245,196,0,.10);
  color: rgba(245,196,0,.95);
  font-weight: 1000;
  flex: 0 0 auto;
}

body.hasMiniCart .toast{
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
body.hasMiniCart .views{
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

body.hasMiniCart{
  
  padding-bottom: calc(22px + var(--miniCartH) + env(safe-area-inset-bottom));
}

.drink-carousel{ position: relative; padding: 10px 48px; }
.drink-nav{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.40);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    opacity:.92;
}
.drink-nav:hover{ opacity:1; box-shadow: 0 0 18px rgba(0,231,255,.10); }
.drink-nav.prev{ left: 10px; }
.drink-nav.next{ right: 10px; }

.drink-card{
    border-radius: 12px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.12);
    overflow:hidden;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.drink-card:hover{
    transform: translateY(-2px);
    border-color: rgba(0,231,255,.26);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.drink-card img{
    width:100%;
    height: 160px;
    object-fit: cover;
    filter: contrast(1.08) saturate(1.08);
    opacity:.92;
}
.drink-card .name{
    padding: 10px 10px 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    color: rgba(255,255,255,.88);
    text-align:center;
}

.mini-card{
    border-radius: calc(var(--r) + 2px);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    height: 100%;
    overflow:hidden;
    position: relative;
}
.mini-card::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(520px 200px at 25% 0%, rgba(255,43,234,.10), transparent 62%);
    pointer-events:none;
    opacity:.85;
}
.mini-title{
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    color: rgba(255,255,255,.90);
}
.mini-text{
    color: rgba(255,255,255,.70);
    font-size: .92rem;
}
.mini-media{
    border-top: 1px solid rgba(255,255,255,.10);
    background:
    radial-gradient(520px 200px at 20% 0%, rgba(0,231,255,.12), transparent 62%),
    radial-gradient(520px 200px at 80% 40%, rgba(255,138,0,.10), transparent 62%);
}
.mini-img{
    width:100%;
    height: 150px;
    object-fit: cover;
    opacity: .92;
    filter: contrast(1.08) saturate(1.06);
}

.miniCartWrap{
  position:fixed;
  left:0; right:0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index:35;
  display:flex;
  justify-content:center;

  pointer-events:none;
}

.miniCart{
  pointer-events:auto;
  width:min(520px, calc(100% - 24px));
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:18px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);

  touch-action: pan-y;
}

.miniCartInfo{ flex:1; min-width:0; }
.miniCartTitle{
  font-weight:1000;
  font-size:14px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.miniCartSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.miniCartBtns{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.miniCartBtns .btn{ padding:10px 12px; }

@media (max-width:520px){
  :root{ --miniCartH: 96px; }
  .miniCart{ flex-wrap:wrap; }
  .miniCartBtns{ width:100%; }
  .miniCartBtns .btn{
    flex:1;
    justify-content:center;
  }
}

html.inFrame{ background-attachment: scroll; }
html.inFrame body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(159,0,255,.25), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(245,196,0,.18), transparent 55%),
    radial-gradient(1200px 800px at 50% 100%, rgba(34,197,94,.12), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
  background-size:cover;
}

html.inFrame, html.inFrame body{
  overscroll-behavior: none;
}

html.inFrame .modalBody{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modalBody{
  -webkit-overflow-scrolling: touch;
}

.onCartPage #miniCartWrap {
  display: none !important;
}

.homeCraft{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
}
@media (max-width:820px){
  .homeCraft{ grid-template-columns:1fr; }
}

.craftItem{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color: var(--muted);
}
.craftItem b{ color: var(--text); }

.section-title{
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 44px;
    margin: 0;
    text-shadow: 0 0 22px rgba(0,231,255,.10);
}
.section-underline{
    height: 2px;
    width: 150px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--orange), var(--pink), transparent);
    opacity:.95;
    margin-top: 8px;
}

.sectionTitle::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:6px;
  background: linear-gradient(90deg,var(--gold),transparent);
  border-radius:2px;
}

.craftSteps{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
@media (max-width:820px){
  .craftSteps{ grid-template-columns:1fr; }
}

.craftStep{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
}

.craftStepN{
  width:26px;
  height:26px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: linear-gradient(135deg,var(--gold),rgba(245,196,0,.55));
  color:#1a1208;
  flex:0 0 auto;
}

.product,
.orderCard,
.homeCard{
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.product:hover,
.orderCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

@keyframes amberGlow{
  0%,100%{ opacity:.25; }
  50%{ opacity:.45; }
}

.homeHero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 220px at 20% 0%,
      rgba(207,163,90,.35),
      transparent 65%);
  animation: amberGlow 8s ease-in-out infinite;
  pointer-events:none;
}

.btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-medium);
}


.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn:active{
  transform: scale(.96);
  box-shadow: 0 4px 10px rgba(0,0,0,.45) inset;
  filter: brightness(.95);
}

.statNum{
  animation: statBreath 6s ease-in-out infinite;
}

@keyframes statBreath{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}

.modalBody,
.chatMsgs{
  overscroll-behavior: contain;
}

.sectionTitle {
    letter-spacing: .6px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.sectionTitle::after{
  transition: width .4s ease;
}

.sectionTitle:hover::after{
  width:64px;
}

.siteFooter{
  margin-top:40px;
  border-top:1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25));
}

footer ul{
  list-style: none;
  padding: 0;
}

footer li{
  margin-bottom: 8px;
  color: var(--text-light);
}


.footerWrap{
  max-width:1120px;
  margin:0 auto;
  padding:28px 22px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:24px;
}

@media (max-width: 900px){
  .footerWrap{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 520px){
  .footerWrap{
    grid-template-columns:1fr;
  }
}

.footerCol h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.4px;
}

.footerCol ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footerCol li,
.footerCol a{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}

.footerCol a:hover{
  color:var(--text);
  text-decoration:underline;
}

.brandCol .footerLogo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
  letter-spacing:.6px;
  margin-bottom:10px;
}

.footerDesc{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
  max-width:38ch;
}

.footerBottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.footerBadge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  font-weight:900;
  font-size:11px;
}

.legalFooter .footerDesc{
  font-size:13px;
  line-height:1.5;
}

.legalFooter h4{
  text-transform: uppercase;
  font-size:12px;
  letter-spacing:.6px;
  opacity:.9;
}

.legalFooter ul li{
  position:relative;
  padding-left:14px;
}

.legalFooter ul li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: var(--gold);
  opacity:.8;
}

.legalFooter .footerBadge{
  font-size:11px;
  letter-spacing:.4px;
}


html{ scroll-behavior:smooth; }
body{
  color: var(--text);
  background:
    radial-gradient(980px 700px at 12% 0%, rgba(0,231,255,.20), transparent 60%),
    radial-gradient(980px 700px at 88% 10%, rgba(255,43,234,.17), transparent 58%),
    radial-gradient(980px 760px at 55% 120%, rgba(255,138,0,.14), transparent 64%),
    linear-gradient(180deg, var(--bgTop), var(--bgMid), var(--bgBot));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 7px),
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 12px 12px, 26px 26px;
  opacity:.12;
  mix-blend-mode: overlay;
  filter: blur(.12px);
  z-index:0;
}

.wrap, main, footer, .miniCartWrap{ position:relative; z-index:1; }

.overlay{ position:fixed !important; inset:0 !important; z-index:9998 !important; }
.toast{ position:fixed !important; z-index:9999 !important; }
.offcanvas{ position:fixed; }


.container-legend{ max-width: 1120px; }

.topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(16px);
  background: rgba(14,18,40,.55);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.topbar .nav-link,
.topbar .chip{
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .78rem;
  padding: .65rem .85rem;
  opacity: .92;
  white-space:nowrap;
  text-decoration:none;
  border: 0;
  background: transparent;
}
.topbar .nav-link:hover,
.topbar .chip:hover{ opacity:1; color: rgba(255,255,255,.96); }
.topbar .chip.active{
  color: rgba(255,255,255,.98);
  position: relative;
  text-shadow: 0 0 18px rgba(0,231,255,.12);
}
.topbar .chip.active::after{
  content:"";
  position:absolute;
  left:.85rem; right:.85rem; bottom:.25rem;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--pink));
  box-shadow: 0 0 18px rgba(0,231,255,.22);
  opacity:.98;
}
.nav-line{ height:1px; background: rgba(255,255,255,.18); flex:1; opacity:.9; }

.brand-badge{
    display:flex; align-items:center; justify-content:center;
    width: 78px; height: 78px;
    border-radius: 999px;
    position: relative;
}
.brand-badge::after{
    content:"";
    position:absolute; inset:-7px;
    border-radius:999px;
    opacity:.65;
}
.logo-mark{
    width: 90px; height: 100px;
    border-radius: 10px;
    position: relative;
    overflow:hidden;
}
.logo-mark::before{
    content:"D";
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    color: rgba(0,0,0,.78);
    letter-spacing: .02em;
    transform: translateY(1px);
}
.logo-mark .logo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.logo-mark.has-img .logo-img{ opacity:1; transform:scale(1); }
.logo-mark.has-img::before{ opacity:0; }
.brand-text{
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: rgba(255,255,255,.78);
    margin-top: .35rem;
    text-align:center;
}

.hairline {
    height: 1px;
    background: rgba(255, 255, 255, .14);
}

.panel{
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(780px 280px at 18% 0%, rgba(0,231,255,.12), transparent 64%),
    radial-gradient(780px 280px at 88% 20%, rgba(255,43,234,.10), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

.hero{
  padding: var(--space-xxl) 0 var(--space-xl);
}
.hero-headline{
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-strong);
}
.hero-sub{
  font-size: 18px;
  color: var(--text-medium);
  line-height: 1.7;
  max-width: 60ch;
}
.hero-sub,
.mini-text{
  max-width: 65ch;
}
.ribbon{
  display:inline-flex; align-items:center; gap:.55rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding: .36rem .78rem;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: .86rem;
}
.ribbon .dot{
  width:9px; height:9px; border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--pink));
  box-shadow: 0 0 22px rgba(0,231,255,.22);
}

.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-neon{
  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--pink));
  border: none;
  color: rgba(0,0,0,.86);
  box-shadow: 0 20px 55px rgba(0,231,255,.12);
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.98);
}

.btn.primary:hover,
.btn-neon:hover{ filter: brightness(1.04); }

.btn.sm{ padding:.45rem .7rem; border-radius: 12px; font-size:.88rem; }

.input, textarea, .form-control{
  background-color: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

select, .form-select{
  color: rgba(255,255,255,.92) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.6rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.78)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 6l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 14px 10px !important;
  color-scheme: dark;
}
select option, .form-select option,
select optgroup, .form-select optgroup{
  background-color: #0b1020;
  color: rgba(255,255,255,.92);
}

.input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus{
  border-color: rgba(0,231,255,.45) !important;
  box-shadow: 0 0 0 .25rem rgba(0,231,255,.14) !important;
}

#view-conception .panel.allow-overflow{ position: relative; z-index: 5; }


.item{
  grid-column: span 4;
  border-radius: 16px;
  background: rgba(12,14,32,.35);
  border: 1px solid rgba(255,255,255,.14);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position:relative;
}
.item:hover{ border-color: rgba(0,231,255,.24); box-shadow: 0 28px 80px rgba(0,0,0,.52); }
.itemImg{ width:100%; height: 176px; object-fit: cover; opacity:.94; filter: contrast(1.06) saturate(1.06); border-bottom: 1px solid rgba(255,255,255,.10); cursor:pointer; }
.itemBody{ padding: 14px; }
.itemTitle{ font-weight: 900; }
.itemMeta{ color: rgba(255,255,255,.72); font-size:.9rem; }
.itemDesc{ color: rgba(255,255,255,.74); font-size:.92rem; line-height:1.35; margin-top:8px; }

@media (max-width: 991.98px){
  .item{ grid-column: span 6; }
}
@media (max-width: 575.98px){
  .item{ grid-column: span 12; }
}

.overlay{
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.55);
}
.appModal{
  border-radius: 22px;
  overflow:hidden;
  background: rgba(14,18,40,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
}
.modalTop{ border-bottom: 1px solid rgba(255,255,255,.12); }
.modalClose{ border-radius: 12px; }

.toast{
  background: rgba(12,14,32,.70) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.offcanvas{
  background: rgba(14,18,40,.92);
  color: rgba(255,255,255,.92);
  border-left: 1px solid rgba(255,255,255,.16);
}
.offcanvas .btn-close{ filter: invert(1); opacity:.85; }

.topbar{
  height:auto !important;
  min-height:72px;
}
.topbar .d-flex{ flex-wrap:nowrap; }

.product{
  min-height: 420px;
}
.product .desc{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow:hidden;
}
@media (max-width: 991.98px){
  .product{ min-height: 0; }
  .product .desc{ -webkit-line-clamp: 6; }
  .drink-carousel{ padding: 10px 40px; }
}

.shopPager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.shopPager .pagerBtns{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.shopPager .pagerInfo{
  color: rgba(255,255,255,.70);
  font-size:.9rem;
}

.homePickCard{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.homePickCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,231,255,.26);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.homePickCard .muted{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow:hidden;
}

.topbarRow{ align-items:center; }
.topbar-nav{ min-width: 0; }
.topbar-nav .nav-link{ white-space: nowrap; }

@media (max-width: 991.98px){
  .topbarRow{
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  .topbar-brand{ margin: 0 !important; }
  .nav-line{ display:none !important; }

  .topbar-nav{
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    max-width: 100%;
  }
  .topbar-nav::-webkit-scrollbar{ height: 8px; }
  .topbar-nav::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.14);
    border-radius: 999px;
  }

  .topbar-auth{
    justify-content: center;
    flex-wrap: wrap;
  }
}

#view-home .homeHero{ position:relative; padding: 26px 0 14px; }
#view-home .homeHero::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height: 360px;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 28% 50%, rgba(255,216,77,.22), transparent 65%),
    radial-gradient(closest-side at 78% 40%, rgba(255,138,0,.18), transparent 70%),
    radial-gradient(closest-side at 55% 65%, rgba(0,231,255,.10), transparent 70%);
  filter: blur(18px);
  opacity:.95;
  animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  from{ transform: translate3d(-10px,-6px,0) scale(1); }
  to{ transform: translate3d(10px,6px,0) scale(1.06); }
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
#view-home #heroImg{ animation: floatY 6s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce){
  #view-home .homeHero::before{ animation:none; }
  #view-home #heroImg{ animation:none; }
}

#view-home .heroBadges{ display:flex; flex-wrap:wrap; gap:10px; }
.badgeSoft{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: .85rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.form-select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem !important;
}

.qtyInput{
  width: 88px;
  max-width: 40vw;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  outline: none;
  text-align: center;
  font-weight: 800;
}
.qtyInput:focus{
  border-color: rgba(0,231,255,.45);
  box-shadow: 0 0 0 .25rem rgba(0,231,255,.14);
}

@media (max-width: 640px){
  .wrap{ padding:14px; }

  .topbar{
    position: sticky;
    top: 0;
    padding: .55rem 0;
  }

  .topbar .container{
    padding-left:12px;
    padding-right:12px;
  }

  .topbar .d-flex.align-items-center.gap-3.flex-wrap{
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .topbar .nav-line{ display:none !important; }

  .topbar .mx-auto.text-center{
    order: 1;
    width: 100%;
    margin: 0 !important;
  }

  .topbar #nav{
    order: 2;
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
  }
  .topbar #nav::-webkit-scrollbar{ display:none; }
  .topbar #nav .chip{ flex: 0 0 auto; }

  .topbar .d-flex.align-items-center.gap-2.ms-auto{
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
  }

  #connText{
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr !important; }

  .product{ padding:12px; }

  .prodTop{ align-items:flex-start; gap:10px; }
  .prodTop > div:nth-child(2){ min-width:0; }
  .prodTop h5{ font-size:1rem; margin:0 0 2px; }

  .prodBottom{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .prodBottom .btnRow{ justify-content: space-between; }

  .qty{
    width: 100%;
    justify-content: space-between;
  }

  .qtyInput{ width: 90px; }
}

.inFrame #nav{
  flex-wrap: nowrap !important;
  overflow-x: auto;
}

.brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.nav {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

@media (max-width: 768px){

  .brand{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .nav{
    width:100%;
    justify-content:flex-start;
  }

  .chip{
    flex:1 1 auto;
    justify-content:center;
    text-align:center;
  }

  #btnLogout,
  #btnLogin{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 520px){

  .product{
    padding:12px;
  }

  .prodBottom{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .prodBottom .btn{
    width:100%;
    justify-content:center;
  }

  .qty{
    width:100%;
    justify-content:space-between;
  }

}

.pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:18px;
}

.pagination button{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:12px;
}

@media (max-width:520px){

  .pagination{
    gap:6px;
  }

  .pagination button{
    min-width:34px;
    height:34px;
    font-size:13px;
  }

}

.profileCard {
  position: relative;
  padding: 26px;
  border-radius: 22px;
  margin-bottom: 20px;
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, rgba(20,20,25,.75), rgba(12,12,16,.85));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: all .35s ease;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 25px 60px rgba(0,0,0,.65);
}

.profileCard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(245,196,0,.35),
    0 0 35px rgba(245,196,0,.15),
    0 35px 80px rgba(0,0,0,.8);
}

.profileGlow {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,196,0,.15), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,43,234,.12), transparent 60%);
  animation: profilePulse 6s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes profilePulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.15); opacity: .9; }
}

.profileHeader {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.profileAvatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,196,0,.25), rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: rgba(245,196,0,.95);
  border: 1px solid rgba(245,196,0,.4);
  box-shadow: 0 0 25px rgba(245,196,0,.25);
}

.profileName {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}

.profileRole {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: 6px;
}

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #22c55e);
  box-shadow: 0 0 10px rgba(34,197,94,.6);
}

.profileDivider {
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(to right,
    transparent,
    rgba(245,196,0,.4),
    transparent);
}

.profileStats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.profileStat {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .25s ease;
}

.profileStat:hover {
  background: rgba(245,196,0,.08);
  border-color: rgba(245,196,0,.4);
  box-shadow: 0 0 20px rgba(245,196,0,.2);
}

.statNum {
  font-size: 20px;
  font-weight: 800;
  color: rgba(245,196,0,.95);
}

.statLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}

.profil-none{
 display: none !important;
}

.profileParticles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.profileParticles::before,
.profileParticles::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(circle, rgba(245,196,0,.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,200,120,.8) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
  animation: floatParticles 18s linear infinite;
  opacity: .25;
}

.profileParticles::after {
  animation-duration: 26s;
  opacity: .18;
  transform: rotate(12deg);
}

@keyframes floatParticles {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-120px);
  }
}

.profileCard:hover .profileParticles::before {
  opacity: .35;
}

.profileCard:hover .profileParticles::after {
  opacity: .25;
}

.view:focus,
.view:focus-visible{
  outline: none !important;
}

.footerLink{
    border: hidden;
    background: unset;
}

.traceGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px){
  .traceGrid{
    grid-template-columns: 1fr;
  }
}

.traceTimeline{
  position:relative;
  padding-left:24px;
  border-left:1px solid rgba(255,255,255,.15);
}

.traceStep{
  position:relative;
  margin-bottom:28px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.traceDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(90deg,var(--cyan),var(--gold));
  box-shadow:0 0 14px rgba(0,231,255,.35);
  position:absolute;
  left:-15px;
  top:7px;
}

.traceTitle{
  font-weight:900;
  letter-spacing:.05em;
}

.traceText{
  font-size:13px;
  color:var(--text-medium);
  margin-top:4px;
  line-height:1.5;
}

.traceCard{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  border-radius:18px;
  padding:20px;
  backdrop-filter:blur(14px);
}

.traceCardHeader{
  font-weight:900;
  margin-bottom:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  color:rgba(255,255,255,.75);
}

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

.traceRow{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.traceRow span:first-child{
  color:var(--text-light);
}

.traceStatus{
  color:var(--gold);
  font-weight:900;
}

.immersiveHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
}

.immersiveBadge{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(0,231,255,.35);
  background:rgba(0,231,255,.08);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.immersiveGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
}

@media (max-width: 900px){
  .immersiveGrid{
    grid-template-columns:1fr;
  }
}

.immersiveCard{
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  transition:all .3s ease;
}

.immersiveCard:hover{
  transform:translateY(-4px);
  border-color:rgba(0,231,255,.35);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.immersiveIcon{
  font-size:28px;
  margin-bottom:12px;
}

.immersiveCard h4{
  margin:0 0 8px;
  font-weight:900;
}

.immersiveCard p{
  font-size:13px;
  line-height:1.5;
  color:var(--text-medium);
}

.immersiveDisclaimer{
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(245,196,0,.35);
  background:rgba(245,196,0,.08);
}

.immersiveDisclaimer h5{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.05em;
}

.fictionHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
}

.fictionStamp{
  padding:14px 18px;
  border-radius:16px;
  font-weight:1000;
  letter-spacing:.15em;
  font-size:12px;
  border:1px solid rgba(239,68,68,.45);
  background:rgba(239,68,68,.10);
  color:rgba(239,68,68,.95);
  text-transform:uppercase;
}

.fictionBlock{
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.fictionBlock h4{
  margin:0 0 12px;
  font-weight:900;
}

.fictionList{
  margin-top:12px;
  padding-left:18px;
  line-height:1.6;
  font-size:13px;
  color:var(--text-medium);
  list-style-type: disclosure-closed;
}

.fictionLegal{
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(0,231,255,.35);
  background:rgba(0,231,255,.08);
}

.fictionLegal h5{
  margin:0 0 8px;
  font-weight:900;
}

.fictionImmersion{
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(245,196,0,.35);
  background:rgba(245,196,0,.08);
}

.fictionImmersion h4{
  margin:0 0 8px;
  font-weight:900;
}

.legalHero{
  margin-bottom:40px;
}

.legalLine{
  width:80px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  margin-bottom:18px;
}

.legalTitle{
  font-size:38px;
  font-weight:900;
  letter-spacing:.04em;
  margin:0 0 12px;
}

.legalIntro{
  max-width:65ch;
  color:var(--text-medium);
  line-height:1.7;
}

.legalSection{
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  margin-bottom:20px;
  transition:all .25s ease;
}

.legalSection:hover{
  border-color: rgba(0,231,255,.35);
  box-shadow: 0 15px 40px rgba(0,0,0,.45);
}

.legalSection.alt{
  background:rgba(0,231,255,.06);
  border-color:rgba(0,231,255,.18);
}

.legalSection h4{
  margin:0 0 10px;
  font-weight:900;
}

.legalDisclaimer{
  margin-top:30px;
  padding:18px 22px;
  border-radius:16px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
  font-size:14px;
  line-height:1.6;
}

.announcementBar{
  width:100%;
  background:
    linear-gradient(90deg,
      rgba(245,196,0,.18),
      rgba(255,138,0,.15),
      rgba(159,0,255,.15)
    );
  border-bottom:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  position:relative;
  overflow:hidden;
  animation: announcementGlow 6s ease-in-out infinite alternate;
  z-index: 2000;
}

@keyframes announcementGlow{
  0%{ filter:brightness(1); }
  100%{ filter:brightness(1.08); }
}

.announcementContent{
  max-width:1120px;
  margin:auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.announcementLeft{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.announcementTag{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  background:rgba(245,196,0,.18);
  border:1px solid rgba(245,196,0,.45);
  color:#f5c400;
  text-transform:uppercase;
}

.announcementText{
  font-weight:700;
  font-size:14px;
  color:rgba(255,255,255,.92);
}

.announcementRight{
  display:flex;
  align-items:center;
  gap:12px;
}

.announcementClose{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
  width:32px;
  height:32px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
}

.announcementClose:hover{
  background:rgba(255,255,255,.08);
  transform:rotate(90deg);
}

@media(max-width:640px){
  .announcementContent{
    flex-direction:column;
    align-items:flex-start;
  }
}

.urgentBar{
  width:100%;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(139,0,0,.92),
      rgba(180,20,20,.92),
      rgba(120,0,0,.92)
    );
  border-bottom:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  animation: urgentBreath 4s ease-in-out infinite alternate;
  z-index:3000;
}

@keyframes urgentBreath{
  0%{ filter:brightness(1); }
  100%{ filter:brightness(1.08); }
}

.urgentInner{
  max-width:1120px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.urgentLeft{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.urgentLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.25);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
}

.urgentText{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.95);
}

.urgentPulse{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff4d4d;
  box-shadow:0 0 14px rgba(255,80,80,.8);
  position:relative;
}

.urgentPulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,80,80,.6);
  animation: pulseRing 1.8s infinite;
}

@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.9; }
  100%{ transform:scale(2.2); opacity:0; }
}

.urgentRight{
  display:flex;
  align-items:center;
  gap:12px;
}

.urgentClose{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  transition:.2s ease;
}

.urgentClose:hover{
  background:rgba(255,255,255,.15);
  transform:rotate(90deg);
}

@media(max-width:640px){
  .urgentInner{
    flex-direction:column;
    align-items:flex-start;
  }
}

.recruitFile{
  margin:0 auto;
  padding:40px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(20,20,25,.92), rgba(15,15,20,.95));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 100px rgba(0,0,0,.75);
  position:relative;
}

.fileHeader{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:20px;
  margin-bottom:30px;
}

.fileRef{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.6;
}

.fileTitle{
  font-size:32px;
  font-weight:900;
  margin:8px 0;
}

.fileMeta{
  font-size:12px;
  opacity:.6;
}

.fileStamp{
  display:flex;
  align-items:center;
  justify-content:center;
}

.stampCircle{
  width:110px;
  height:110px;
  border-radius:50%;
  border:2px solid rgba(245,196,0,.6);
  color:rgba(245,196,0,.9);
  font-weight:900;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(-18deg);
  letter-spacing:.15em;
  text-align:center;
  box-shadow:0 0 30px rgba(245,196,0,.2);
}

.fileSection{
  margin-bottom:30px;
}

.fileSection h3{
  font-size:16px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.fileList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.fileCard{
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.fileBullets{
  padding-left:18px;
  opacity:.8;
  font-size:14px;
}

.fileForm{
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:25px;
}

.fileFormRow{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}

.fileFormRow label{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.6;
}

.fileForm input,
.fileForm select,
.fileForm textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}

.fileForm textarea{
  min-height:120px;
  resize:vertical;
}

.fileSubmit{
  margin-top:10px;
}

.fileFooter{
  margin-top:40px;
  font-size:12px;
  opacity:.5;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:20px;
}

.infoBox{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 55px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}

.infoBox::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:.85;
  background:
    radial-gradient(520px 180px at 15% 0%, rgba(0,231,255,.10), transparent 65%),
    radial-gradient(520px 180px at 85% 30%, rgba(255,43,234,.10), transparent 65%);
}

.infoBox__icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 22px rgba(0,0,0,.25);
  position:relative;
  z-index:1;
}

.infoBox__content{ min-width:0; position:relative; z-index:1; }
.infoBox__title{
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  color: rgba(255,255,255,.92);
}
.infoBox__text{
  margin-top:4px;
  color: rgba(255,255,255,.72);
  font-size:.9rem;
  line-height:1.35;
}

.infoBox--info{
  border-color: rgba(96,165,250,.25);
}
.infoBox--info .infoBox__icon{
  background: rgba(96,165,250,.10);
  border-color: rgba(96,165,250,.25);
  box-shadow: 0 0 18px rgba(96,165,250,.18);
}

.infoBox--warn{
  border-color: rgba(245,196,0,.28);
}
.infoBox--warn .infoBox__icon{
  background: rgba(245,196,0,.10);
  border-color: rgba(245,196,0,.30);
  box-shadow: 0 0 18px rgba(245,196,0,.18);
}

.infoBox--danger{
  border-color: rgba(239,68,68,.28);
}
.infoBox--danger .infoBox__icon{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  box-shadow: 0 0 18px rgba(239,68,68,.16);
}

.activeOrderAlert{
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 6000;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  cursor:pointer;

  backdrop-filter: blur(18px);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 35px rgba(245,196,0,.15);

  transition: all .25s ease;
}

.activeOrderAlert:hover{
  transform: translateY(-3px);
  border-color: rgba(245,196,0,.45);
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    0 0 45px rgba(245,196,0,.25);
}

.activeOrderIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:18px;

  background: rgba(245,196,0,.12);
  border: 1px solid rgba(245,196,0,.35);
  box-shadow: 0 0 20px rgba(245,196,0,.25);
}

.activeOrderText{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.activeOrderTitle{
  font-size:13px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,.92);
}

.activeOrderSub{
  font-size:12px;
  color: rgba(255,255,255,.70);
}

.activeOrderBadge{
  margin-left:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background: rgba(245,196,0,.18);
  border:1px solid rgba(245,196,0,.35);
  color: rgba(245,196,0,.95);
}

@keyframes alertPulse{
  0%,100%{ box-shadow: 0 0 0 rgba(245,196,0,0); }
  50%{ box-shadow: 0 0 25px rgba(245,196,0,.35); }
}

.activeOrderAlert.pulse{
  animation: alertPulse 3s ease-in-out infinite;
}

@media(max-width:520px){
  .activeOrderAlert{
    right:12px;
    left:12px;
    bottom:16px;
  }
}


.actionDockWrap{
  position: fixed;
  left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 6500;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
}

.actionDock{
  pointer-events: auto;
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
  padding: 10px;
}

.dockBtn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.dockBtn:hover{
  border-color: rgba(0,231,255,.22);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 35px rgba(0,0,0,.45);
  transform: translateY(-1px);
}

.dockBtn:active{
  transform: translateY(0);
}

.dockIcon{
  font-size: 18px;
  line-height: 1;
}

.dockLabel{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .92;
}

.dockBadge{
  position: absolute;
  top: -7px;
  right: -7px;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 1000;
  color: rgba(0,0,0,.88);

  background: linear-gradient(135deg, var(--gold), rgba(245,196,0,.65));
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 0 18px rgba(245,196,0,.25);
}

@media (max-width: 520px){
  .actionDock{
    width: min(520px, 100%);
    gap: 8px;
    padding: 8px;
  }
  .dockBtn{
    padding: 10px 8px;
    border-radius: 14px;
  }
  .dockLabel{
    display:none;
  }
  .dockIcon{
    font-size: 20px;
  }
}

body.hasActionDock .toast{
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.dockBtn.is-alert{
  border-color: rgba(245,196,0,.45);
  background: rgba(245,196,0,.12);
  box-shadow:
    0 0 18px rgba(245,196,0,.25),
    0 0 40px rgba(245,196,0,.18);
  animation: dockPulse 1.2s ease-in-out infinite;
}

@keyframes dockPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

.dockBadge.alert{
  background: linear-gradient(135deg, #ff3b3b, #ff8a00);
  color: #fff;
  box-shadow: 0 0 18px rgba(255,80,0,.45);
}

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

.mobile-auth {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-auth-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.appLoading{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.appLoadingCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(20,20,20,.78);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.appSpinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(245,196,0,.95);
  animation: spin .75s linear infinite;
}

.appLoadingTxt{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}

@keyframes spin { to { transform: rotate(360deg); } }

body.scroll-locked {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

body.cart-open .miniCartWrap,
body.cart-open #actionDockWrap{
  display:none !important;
}

#cartCanvas .offcanvas-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.checkoutView{
  padding: 40px 20px 120px;
  animation: fadeIn .4s ease;
}

.checkoutShell{
  max-width: 900px;
  margin: auto;
}

.checkoutHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}

.checkoutTitle{
  font-size:22px;
  font-weight:800;
  letter-spacing:.5px;
}

.checkoutSubtitle{
  font-size:13px;
  opacity:.6;
  margin-top:4px;
}

.checkoutTotal{
  font-size:20px;
  font-weight:900;
  color:var(--gold);
}

.checkoutCard{
  background: linear-gradient(145deg,#0f172a,#111827);
  border-radius:20px;
  padding:30px;
  box-shadow:
    0 10px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
}

.checkoutSectionTitle{
  font-weight:700;
  margin-bottom:20px;
  border-left:3px solid var(--gold);
  padding-left:10px;
}

.checkoutGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.checkoutGrid .field{
  display:flex;
  flex-direction:column;
}

.checkoutGrid textarea{
  min-height:120px;
  resize:none;
}

.checkoutFooter{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:30px;
}

@media(max-width:768px){
  .checkoutGrid{
    grid-template-columns:1fr;
  }
}

.checkoutActions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.checkoutActions .btn{
  flex:1;
  justify-content:center;
}

@media (max-width:600px){
  .checkoutActions{
    flex-direction:column;
  }
}

.checkoutHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.checkoutHeader .left{
  flex:1;
  min-width:180px;
}

.checkoutHeader .title{
  font-weight:900;
  font-size:18px;
}

.checkoutHeader .subtitle{
  font-size:12px;
  opacity:.7;
  margin-top:4px;
}

.checkoutHeader .right{
  text-align:right;
  flex-shrink:0;
}

.checkoutHeader .price{
  font-size:20px;
  font-weight:900;
  color:rgba(245,196,0,0.95);
}

.checkoutHeader .pill{
  margin-top:6px;
}

@media (max-width:520px){

  .checkoutHeader{
    flex-direction:column;
    align-items:flex-start;
  }

  .checkoutHeader .right{
    text-align:left;
    margin-top:8px;
  }

  .checkoutHeader .price{
    font-size:22px;
  }
}


.modalBody{
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-bottom: 24px;
}

.secTitle{
  font-weight:900;
  margin-bottom:8px;
}

.chkRow{
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  user-select:none;
}

.deadlineWrap{
  margin-top:12px;
}

.deadlineRow{
  display:grid;
  grid-template-columns:1fr 215px;
  gap:10px;
}

@media (max-width:520px){
  .deadlineRow{
    grid-template-columns:1fr;
  }
}

.deadlinePreview{
  font-size:12px;
  margin-top:8px;
  opacity:.85;
}

.cefSelectOverlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#overlay.show .cefSelectOverlay{
  position: absolute;
}

.cefSelectCard{
  width: min(720px, 100%);
  max-height: calc(100vh - 28px);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.cefSelectTop{
  padding: 12px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cefSelectTitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

.cefSelectSearchWrap{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cefSelectSearch{
  width: 100%;
}

.cefSelectList{
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
}

.cefSelectOpt{
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.cefSelectOpt.isSelected{
  border-color: rgba(245,196,0,.35);
  background: rgba(245,196,0,.12);
}

.gtaDateOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20000;
}

.gtaDateCard{
  width:min(760px,100%);
  background:linear-gradient(180deg,#0e1116,#141821);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px rgba(0,0,0,.7);
  display:flex;
  flex-direction:column;
}

.gtaDateHeader{
  padding:16px;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.gtaDateBody{
  display:flex;
  gap:8px;
  padding:20px;
}

.gtaWheel{
  flex:1;
  height:160px;
  overflow-y:hidden;
  scrollbar-width:none;
}

.gtaWheel::-webkit-scrollbar{
  display:none;
}

.gtaWheelItem{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.4;
  font-weight:700;
}

.gtaDateActions{
  padding:16px;
  display:flex;
  gap:10px;
}

.gtaWheel.activeWheel{
  border:1px solid rgba(245,196,0,.35);
  border-radius:10px;
}

.gtaWheelItem{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.3;
  transition:.15s;
}

.gtaWheelItem.isActive{
  opacity:1;
  font-weight:900;
  font-size:18px;
  color:#f5c400;
}

.actionDock{
  overflow: visible !important;
}

.dockBtn{
  overflow: visible !important;
}

.dockBadge{
  z-index: 10;
}

.actionDockWrap{
  isolation: isolate;
}

.mobileAppHeader{
  position:sticky;
  top:0;
  z-index:500;
  backdrop-filter:blur(14px);
  background:rgba(15,17,21,.85);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:10px 12px 6px;
}

.mobileTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

.mobileBrand img{
  height:28px;
}

.mobileActions{
  display:flex;
  gap:8px;
}

.iconBtn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

#cartCountMobileBadge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:#f5c400;
  color:#111;
  font-size:10px;
  padding:2px 5px;
  border-radius:999px;
}

@media (max-width: 991px){
  .topbar{
    display:none !important;
  }
}

.mobileAppHeader{
  position:sticky;
  top:0;
  z-index:600;
  padding:14px 14px 10px;
  background:linear-gradient(180deg,#121a2b,#0f1522);
  border-bottom:1px solid rgba(212,175,55,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.mobileTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.mobileBrand img{
  height:34px;
}

.mobileActions{
  display:flex;
  gap:8px;
}

.iconBtn{
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,175,55,.25);
  color:#f5d96b;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.iconBtn:hover{
  background:rgba(212,175,55,.12);
}

#cartCountMobileBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  background:linear-gradient(135deg,#d4af37,#f5d96b);
  color:#111;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
}

.mobileNavRow{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
}

.mobileNavBtn{
  flex:0 0 auto;
  padding:7px 14px;
  border-radius:999px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#e8edf5;
  white-space:nowrap;
  transition:.2s;
}

.mobileNavBtn.active{
  background:linear-gradient(135deg,#d4af37,#f5d96b);
  color:#111;
  border:none;
  font-weight:700;
}


html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after{
  box-sizing: border-box;
}

.topbar{
  width: 100%;
  max-width: 100vw;
  background: linear-gradient(180deg, rgba(10,18,34,.98), rgba(10,18,34,.88));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar .container,
.topbar .container-legend{
  width: 100%;
  max-width: 100%;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.topbar .d-flex{
  min-width: 0; 
}

.mobile-nav-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding: 10px 0;
  min-width: 0;
  max-width: 100%;
}

.mobile-nav-inline::-webkit-scrollbar{ display:none; }
.mobile-nav-inline{ scrollbar-width:none; -ms-overflow-style:none; }

.mobile-nav-inline .chip{
  flex: 0 0 auto;
}

.mobile-right-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

.brand-badge, .logo-mark{
  max-width: 100%;
}
.logo-img{
  max-width: 100%;
  height: auto;
}

.mobile-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.mobile-header-row > *{
  min-width:0;
}

.mobileMenuWrap{
  display:flex;
  justify-content:center;
}

.mobileMenuInner{
  display:flex;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;

  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.mobileMenuInner .chip{
  border-radius:999px;
  padding:7px 16px;
  font-weight:600;
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:#dbe7ff;
  transition:.2s;
}

.mobileMenuInner .chip:hover{
  background:rgba(255,255,255,.08);
}

.mobileMenuInner .chip.active{
  background:linear-gradient(135deg,#d4af37,#f5d96b);
  color:#111;
  border:none;
  box-shadow:0 4px 12px rgba(212,175,55,.4);
}

.mobileMenuWrap::before{
  content:"";
  position:absolute;
  width:260px;
  height:80px;
  background:radial-gradient(circle, rgba(212,175,55,.25), transparent 70%);
  filter:blur(40px);
  z-index:-1;
}

.mobileHeaderTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
}

.mobileLogo img{
  height:140px;
}

.mobileUserArea{
  display:flex;
  align-items:center;
  gap: 5px;
}

.userBtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.userBtn:hover{
  background:rgba(255,255,255,.08);
}

.userDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80;
}

.sectionHeader h2{
  font-weight:900;
  font-size:28px;
}

.sectionLine{
  width:80px;
  height:3px;
  margin:14px auto;
  background:linear-gradient(90deg,#d4af37,#f5d96b);
  border-radius:2px;
}

.partnersSection{
  position:relative;
  padding:30px 0 20px;
  overflow:hidden;
}

.partnersContainer{
  position:relative;
  z-index:2;
}

.partnersGrid{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px;
  perspective:1200px;
}

.partnersCard{
  position:relative;
  text-align:center;
  padding:28px 18px;
  border-radius:22px;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  transition:.35s ease;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.partnersCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:radial-gradient(
    circle at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.25),
    transparent 40%
  );
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.partnersCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at 50% 0%,
    rgba(245,196,0,.15),
    transparent 60%
  );
  opacity:0;
  transition:.35s ease;
}

.partnersCard:hover{
  transform:translateY(-8px);
  border-color:rgba(245,196,0,.4);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}

.partnersCard:hover::before{
  opacity:1;
}

.partnersCard:hover::after{
  opacity:.35;
}

.partnersLogo{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.partnersLogo img{
  max-height:60px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));
  border-radius: 20px;
}


.partnersName{
  font-weight:700;
  font-size:14px;
  letter-spacing:.4px;
}

.form-control {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  height: 46px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .2s ease;
}

.form-control:focus {
  border-color: rgba(245,196,0,.6);
  box-shadow: 0 0 0 3px rgba(245,196,0,.15);
}


.form-select {
  appearance: none;
  -webkit-appearance: none;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  height: 46px;

  padding: 0 42px 0 14px;
  color: #fff;
  font-weight: 500;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: all .2s ease;
}

.form-select:focus {
  border-color: rgba(245,196,0,.6);
  box-shadow: 0 0 0 3px rgba(245,196,0,.15);
  outline: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F5C400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.sfItem{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:140px;
}

.sfLabel{
  font-size:12px;
  opacity:.7;
}

.sfItem input,
.sfItem select{
  height:42px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:#fff;
  backdrop-filter: blur(6px);
  transition:.2s ease;
}

.sfItem input:focus,
.sfItem select:focus{
  border-color: rgba(245,196,0,.5);
  box-shadow: 0 0 0 3px rgba(245,196,0,.12);
  outline:none;
}

.sfCheck{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.25);
  height:42px;
}

.shopFilters{
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(6px);
}

.shopFiltersGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.filterItem label{
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.shopInput,
.shopSelect{
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  transition: all .2s ease;
}

.shopInput:focus,
.shopSelect:focus{
  border-color: rgba(255,215,0,.6);
  box-shadow: 0 0 0 2px rgba(255,215,0,.15);
  outline: none;
}

.shopFiltersBottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.shopCheckbox{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}

.shopCheckbox input{
  width: 16px;
  height: 16px;
  accent-color: gold;
}

.shopResetBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,0,80,.4);
  background: rgba(255,0,80,.08);
  color: rgba(255,120,150,.9);
  font-weight: 700;
  transition: .2s;
}

.shopResetBtn:hover{
  background: rgba(255,0,80,.18);
  transform: scale(1.05);
}

#view-catalogue .panel { background-image: none !important; }
#view-catalogue .panel::before,
#view-catalogue .panel::after { content: none !important; }

.productHero{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:30px;
  padding:30px 0;
}

.productHeroGlow{
  position:absolute;
  width:380px;
  height:380px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,231,255,.25), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,43,234,.20), transparent 65%);
  filter:blur(20px);
  opacity:.85;
}

.productHeroImg{
  position:relative;
  max-width:320px;
  max-height:380px;
  object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
  transition:transform .4s ease;
}

.productHeroImg:hover{
  transform:scale(1.05) rotate(-1deg);
}

.productHero.watermark::after{
  content:"DISTYA";
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;

  font-family:"Bebas Neue", sans-serif;
  font-size:80px;
  letter-spacing:12px;
  font-weight:900;

  color:rgba(255,255,255,.05);
  transform:rotate(-25deg);
  pointer-events:none;
  user-select:none;
}

.trackWrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.trackStep{
  display:flex;
  gap:12px;
  align-items:flex-start;
  position:relative;
}

.trackStep::before{
  content:"";
  position:absolute;
  left:9px;
  top:18px;
  bottom:-12px;
  width:2px;
  background:rgba(255,255,255,.10);
}

.trackStep:last-child::before{ display:none; }

.trackDot{
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  margin-top:2px;
  flex:0 0 18px;
}

.trackStep.done .trackDot{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.18);
  box-shadow: 0 0 0 4px rgba(34,197,94,.08);
}

.trackStep.active .trackDot{
  border-color: rgba(245,196,0,.8);
  background: rgba(245,196,0,.20);
  box-shadow: 0 0 0 4px rgba(245,196,0,.10);
}

.trackStep.future .trackDot{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.trackTitle{
  font-weight:900;
  line-height:1.2;
}

.trackBody{ min-width:0; }

.invoiceWrap{
  background:#fff;
  color:#000;
  padding:30px;
  border-radius:12px;
}

.invoiceHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.invoiceLeft,
.invoiceRight{
  min-width:220px;
}

.invoiceLogo{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:120px;  
}

.invoiceLogo img{
  width:110px;    
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

@media (max-width: 720px){
  .invoiceHeader{ flex-direction:column; align-items:stretch; }
  .invoiceLogo{ width:auto; justify-content:flex-start; }
}

.invoiceBrand{
  font-size:28px;
  font-weight:900;
}

.invoiceMeta{
  font-size:12px;
}

.invoiceTable{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

.invoiceTable th,
.invoiceTable td{
  padding:8px;
  border-bottom:1px solid #ddd;
  text-align:left;
}

.invoiceTotal{
  text-align:right;
  font-size:18px;
  font-weight:900;
  margin-top:20px;
}

.invoiceFooter{
  margin-top:30px;
  font-size:12px;
  opacity:.6;
}

.invoiceSectionTitle{
  font-weight: bold;
}

.relatedGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
@media (min-width: 520px){
  .relatedGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.relatedCard{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.relatedCard:hover{
  transform: translateY(-2px);
  border-color: rgba(245,196,0,.35);
}
.relatedImg{
  width:100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.relatedImg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.relatedName{
  margin-top:8px;
  font-weight:800;
  font-size: 13px;
  line-height:1.2;
}
.relatedPrice{
  margin-top:4px;
  font-weight:900;
  color: rgba(245,196,0,.95);
}

.adminGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap:18px;
}

.adminCard{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
  text-align:center;
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}

.adminCard:hover{
  transform:translateY(-4px);
  border-color:rgba(255,200,0,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.profileAdmin, .profilePartner{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

#btnAdminPanel{
  background:linear-gradient(135deg,#f5c400,#ff9a00);
  border:none;
  font-weight:800;
}
#btnAdminPanel:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,170,0,.4);
}

.adminTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}

.adminTable thead th{
  text-align:left;
  font-size:13px;
  font-weight:800;
  opacity:.7;
  padding:0 16px 6px 16px;
}

.adminTable tbody tr{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border-radius:14px;
  transition:.2s ease;
}

.adminTable tbody tr:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.4);
  border-color:rgba(159,0,255,.4);
}

.adminTable tbody td{
  padding:14px 16px;
  font-weight:600;
}

.priority-high{
  border-left:4px solid #ef4444;
}

.priority-medium{
  border-left:4px solid #f5c400;
}

.adminStats{
  display:flex;
  gap:16px;
  margin-bottom:20px;
}

.statBox{
  flex:1;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
}

.statValue{
  font-size:22px;
  font-weight:900;
}
.statLabel{
  opacity:.7;
  font-size:13px;
}

.adminModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:99999;
}

.adminModal.show{
  opacity:1;
  pointer-events:auto;
}

.adminModalContent{
  width:min(1000px,95%);
  max-height:92vh;
  overflow:auto;

  background:
    radial-gradient(600px 300px at 20% 0%, rgba(159,0,255,.15), transparent 70%),
    radial-gradient(500px 300px at 90% 80%, rgba(245,196,0,.12), transparent 70%),
    linear-gradient(180deg,#0f172a,#111827);

  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:40px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 40px rgba(255,255,255,.02);
}

.orderHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:30px;
}

.orderDate{
  opacity:.6;
  font-size:13px;
  margin-top:6px;
}

.modalCloseBtn{
  background:transparent;
  border:1px solid rgba(245,196,0,.5);
  color:#f5c400;
  width:40px;
  height:40px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
}

.orderInfoGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
  margin-bottom:30px;
}

.infoCard{
  position:relative;
  padding:20px 22px;
  border-radius:18px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter: blur(6px);
  transition:.25s ease;
}

.infoCard:hover{
  border-color:rgba(245,196,0,.4);
  box-shadow:0 0 25px rgba(245,196,0,.08);
}

.infoCard input,
.infoCard textarea,
.statusSelect{
  width:100%;
  margin-top:8px;

  padding:12px 14px;

  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;

  color:#fff;
  font-weight:600;

  transition:.2s;
}

.infoCard input:focus,
.infoCard textarea:focus,
.statusSelect:focus{
  outline:none;
  border-color:#f5c400;
  box-shadow:0 0 12px rgba(245,196,0,.4);
}

.infoCard textarea{
  resize:none;
  min-height:70px;
}

.infoLabel{
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-weight:700;
  opacity:.55;
}

.infoValue{
  font-weight:800;
}

.infoValue.big{
  font-size:20px;
  color:#f5c400;
}

.orderSectionTitle{
  font-size:18px;
  font-weight:800;
  margin-bottom:15px;
}

.orderItemsBox{
  border-radius:20px;
  padding:18px 24px;

  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));

  border:1px solid rgba(255,255,255,.08);
}

.orderItemLine{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 0;

  border-bottom:1px solid rgba(255,255,255,.06);
}

.orderItemLine:last-child{
  border-bottom:none;
}

.orderItemName{
  font-weight:800;
  font-size:15px;
}

.orderItemMeta{
  font-size:12px;
  opacity:.6;
  margin-top:6px;
}

.orderItemRight{
  display:flex;
  align-items:center;
  gap:18px;
}

.orderItemQty{
  font-weight:700;
  opacity:.7;
}

.orderItemPrice{
  font-size:16px;
  font-weight:900;
  color:#f5c400;
}

.orderFooter{
  text-align:right;
}

.orderHeader{
  margin-bottom:35px;
}

.orderDate{
  font-size:13px;
  opacity:.6;
}

@keyframes modalPop{
  from{
    transform:translateY(20px) scale(.98);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

.statusWrapper{
  position:relative;
}

.statusSelect{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.4);
  color:white;
  transition:.2s;
}

.statusSelect.paywait{
  border-color:#f5c400;
  box-shadow:0 0 12px rgba(245,196,0,.4);
}

.statusSelect.pending{
  border-color:#f5c400;
  box-shadow:0 0 12px rgba(245,196,0,.4);
}

.statusSelect.handled{
  border-color:#60a5fa;
  box-shadow:0 0 12px rgba(96,165,250,.4);
}

.statusSelect.prep{
  border-color:#3b82f6;
  box-shadow:0 0 12px rgba(59,130,246,.4);
}

.statusSelect.preparing{
  border-color:#9f00ff;
  box-shadow:0 0 12px rgba(159,0,255,.35);
}

.statusSelect.shipped{
  border-color:#22d3ee;
  box-shadow:0 0 12px rgba(34,211,238,.35);
}

.statusSelect.delivered{
  border-color:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,.4);
}

.statusSelect.done{
  border-color:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,.4);
}

.statusSelect.cancelled{
  border-color:#ef4444;
  box-shadow:0 0 12px rgba(239,68,68,.4);
}

.statusSelect.cancel{
  border-color:#ef4444;
  box-shadow:0 0 12px rgba(239,68,68,.4);
}

.catalogueTopBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}

.catalogueTitle{
  font-size:22px;
  font-weight:900;
}

.catalogueGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px;
}

.adminProductCard{
  border-radius:22px;
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.08);

  transition:.25s;
}

.adminProductCard:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  border-color:rgba(245,196,0,.4);
}

.adminProductImage{
  height:180px;
  background-size:cover;
  background-position:center;
}

.adminProductBody{
  padding:20px;
}

.adminProductName{
  font-weight:900;
  font-size:16px;
}

.adminProductPrice{
  margin-top:8px;
  font-weight:800;
  color:#f5c400;
}

.adminProductMeta{
  margin-top:8px;
  font-size:12px;
  opacity:.6;
}

.adminProductActions{
  margin-top:15px;
  display:flex;
  gap:10px;
}

.adminModalOpen{ overflow:hidden; }

.adminModalOverlay{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index:9999;
}

.adminModalOverlay.show{ display:flex; }

.adminModalCard{
  width:min(980px, 100%);
  max-height:min(86vh, 860px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(159,0,255,.18), transparent 55%),
    radial-gradient(900px 420px at 85% 50%, rgba(245,196,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 24px 80px rgba(0,0,0,.60);
  position:relative;
  padding:18px 18px 16px;
}

.adminModalClose{
  position:absolute;
  top:16px; right:16px;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(245,196,0,.35);
  background:rgba(0,0,0,.22);
  color:rgba(245,196,0,.95);
  font-weight:1000;
  cursor:pointer;
}
.adminModalClose:hover{ filter:brightness(1.12); }

.adminModalHeader{ padding:8px 56px 10px 6px; }
.adminModalTitle{ font-size:26px; font-weight:1000; letter-spacing:.4px; }
.adminModalSubtitle{ margin-top:4px; color:rgba(255,255,255,.65); font-size:12px; font-weight:800; }

.adminModalBody{ padding:8px 6px 6px; }

@media (max-width:560px){
  .adminModalCard{ padding:14px 14px 12px; border-radius:18px; }
  .adminModalTitle{ font-size:20px; }
}

.rankItem{
  display:flex;
  justify-content:space-between;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  margin-bottom:10px;
}

.ecoStats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin-bottom:30px;
}

.ecoCard{
padding:18px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);

background:
radial-gradient(500px 220px at 20% 0%, rgba(0,231,255,.08), transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}

.ecoValue{
font-size:26px;
font-weight:900;
}

.ecoLabel{
opacity:.6;
font-size:13px;
margin-top:4px;
}

.ecoSection{
margin-top:30px;
}

.ecoTitle{
font-weight:900;
margin-bottom:10px;
}

.ecoClient{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.ecoRank{
font-weight:900;
width:30px;
}

.ecoName{
font-weight:700;
flex:1;
}

.ecoRanking{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.ecoRankBlock{
padding:18px;
border-radius:16px;

background:
radial-gradient(500px 220px at 20% 0%, rgba(255,215,0,.12), transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);
}

.ecoRankTitle{
font-weight:900;
margin-bottom:12px;
font-size:16px;
}

.ecoRankItem{
display:unset;
justify-content:space-between;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.05);
}

.ecoStats{
opacity:.7;
font-size:13px;
}

.ecoRanking{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:30px;
}

.ecoRankBlock{
padding:18px;
border-radius:14px;

background:
radial-gradient(600px 220px at 20% 0%, rgba(255,215,0,.12), transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);
}

.ecoWarn{
  margin-left:8px;
  padding:2px 6px;
  font-size:11px;
  border-radius:6px;
  background:#ffcc00;
  color:#000;
  font-weight:700;
}

.homePickBadge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:6px;
}

.homePickPrice{
  font-weight:700;
  margin-top:4px;
}

.oldPrice{
  text-decoration:line-through;
  opacity:.5;
  margin-right:6px;
}

.testiBadge{
  background:linear-gradient(135deg,#ffd700,#ff9d00);
  color:#000;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
}

.testiCard{
  position:relative;
  transition:all .25s ease;
}

.testiCard:hover{
  transform:translateY(-3px);
}

.catalogueHeader{
display:flex;
gap:12px;
margin-bottom:20px;
}

.catalogueHeader input{
flex:1;
padding:10px;
border-radius:8px;
border:1px solid #333;
background:#0f0f12;
color:#fff;
}

.adminForm{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.adminForm input{
padding:10px;
border-radius:8px;
border:1px solid #333;
background:#0f0f12;
color:white;
}

.catalogueStatsGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:22px;
margin-bottom:32px;
justify-items: center;
}

.statCard{

background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255, 255, 255, .1);
border-radius:14px;

padding:20px;

display:flex;
flex-direction:column;
gap:6px;

box-shadow:0 10px 30px rgba(0,0,0,0.35);

transition:all .25s;
}

.statCard:hover{
transform:translateY(-4px);
box-shadow:0 18px 50px rgba(0,0,0,0.45);
}

.statValue{
font-size:30px;
font-weight:700;
letter-spacing:.5px;
}

.statLabel{
font-size:12px;
text-transform:uppercase;
opacity:.6;
letter-spacing:.12em;
}

.catalogueSection{

background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255, 255, 255, .1);
border-radius:16px;

padding:26px;
margin-top:26px;

box-shadow:0 30px 60px rgba(0,0,0,0.45);

}

.sectionHeader{

font-size:18px;
font-weight:600;

align-items:center;
gap:10px;

margin-bottom:18px;

color:#e7ebf5;

}

.leaderRow{

display:grid;
grid-template-columns:50px 1fr 260px 80px;

align-items:center;
gap:16px;

padding:14px 6px;

border-bottom:1px solid rgba(255,255,255,0.05);

transition:all .2s;

}

.leaderRow:hover{
background:rgba(255,255,255,0.02);
}

.leaderTop{

background:linear-gradient(
90deg,
rgba(255,140,0,0.08),
transparent
);

border-radius:8px;

}

.leaderRank{

font-weight:700;
opacity:.6;

}

.leaderName{

font-weight:500;

}

.leaderValue{

text-align:right;
font-weight:600;

opacity:.85;

}

.leaderBar{

height:7px;
background:#1a2136;

border-radius:8px;

overflow:hidden;

}

.leaderBarFill{

height:100%;

background:linear-gradient(
90deg,
#ff7b00,
#ff3c3c
);

border-radius:8px;

transition:width .6s ease;

}

.deadRow{

display:flex;
justify-content:space-between;

padding:12px 6px;

border-bottom:1px solid rgba(255,255,255,0.05);

}

.deadName{
font-weight:500;
}

.deadStock{

font-size:12px;

padding:4px 8px;

border-radius:6px;

background:rgba(255,255,255,0.06);

}

.deadStock.critical{

background:rgba(255,70,70,0.15);
color:#ff6b6b;

}

.emptyState{

opacity:.6;
padding:14px;

font-style:italic;

}

.adminOrderModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.adminOrderModal.show{
  display: flex;
}

.adminOrderModalContent{
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 18px;
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 20px;
}

.partnerCard {
  position: relative;
  cursor: pointer;
}

.partnerLinkOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  border-radius: inherit;
}

.productBadgeIcon{
  font-size:12px;
  line-height:1;
}

.badge--elite{
  background:linear-gradient(135deg, rgba(245,196,0,.22), rgba(245,196,0,.10));
  color:rgba(245,196,0,.98);
  border-color:rgba(245,196,0,.28);
}

.badge--premium{
  background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.10));
  color:#d8b4fe;
  border-color:rgba(216,180,254,.24);
}

.badge--certified{
  background:linear-gradient(135deg, rgba(34,197,94,.20), rgba(34,197,94,.10));
  color:#86efac;
  border-color:rgba(134,239,172,.24);
}

.badge--limited{
  background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.08));
  color:#fde68a;
  border-color:rgba(253,230,138,.24);
}

.badge--top-sales{
  background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(249,115,22,.14));
  color:#fecaca;
  border-color:rgba(248,113,113,.28);
}

.badge--trending{
  background:linear-gradient(135deg, rgba(59,130,246,.20), rgba(96,165,250,.10));
  color:#bfdbfe;
  border-color:rgba(147,197,253,.24);
}

.badge--promo{
  background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.12));
  color:#a7f3d0;
  border-color:rgba(110,231,183,.24);
}

.badge--popular{
  background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(244,114,182,.10));
  color:#fbcfe8;
  border-color:rgba(251,207,232,.24);
}

.badge--clearance{
  background:linear-gradient(135deg, rgba(107,114,128,.22), rgba(75,85,99,.10));
  color:#d1d5db;
  border-color:rgba(209,213,219,.18);
}

.badge--new{
  background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(34,211,238,.10));
  color:#bae6fd;
  border-color:rgba(125,211,252,.24);
}

.product{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:420px;
  padding:22px 18px 18px;
  border-radius:22px;
  overflow:hidden;
}

.productBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  margin-bottom:14px;
  min-height:34px;
}

.productBadges--compact{
  gap:6px;
  min-height:30px;
}

.productBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  backdrop-filter:blur(6px);
}

.productBadges--compact .productBadge{
  padding:5px 9px;
  font-size:12px;
}

.productBadgeIcon{
  flex:0 0 auto;
  font-size:11px;
  line-height:1;
}

.productBadgeText{
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge--elite{
  background:linear-gradient(135deg, rgba(245,196,0,.24), rgba(245,196,0,.11));
  color:rgba(245,196,0,.98);
  border-color:rgba(245,196,0,.30);
}

.badge--premium{
  background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(168,85,247,.10));
  color:#d8b4fe;
  border-color:rgba(216,180,254,.24);
}

.badge--certified{
  background:linear-gradient(135deg, rgba(34,197,94,.20), rgba(34,197,94,.10));
  color:#86efac;
  border-color:rgba(134,239,172,.24);
}

.badge--limited{
  background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.08));
  color:#fde68a;
  border-color:rgba(253,230,138,.24);
}

.badge--top-sales{
  background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(249,115,22,.14));
  color:#fecaca;
  border-color:rgba(248,113,113,.28);
}

.badge--trending{
  background:linear-gradient(135deg, rgba(59,130,246,.20), rgba(96,165,250,.10));
  color:#bfdbfe;
  border-color:rgba(147,197,253,.24);
}

.badge--promo{
  background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.12));
  color:#a7f3d0;
  border-color:rgba(110,231,183,.24);
}

.badge--popular{
  background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(244,114,182,.10));
  color:#fbcfe8;
  border-color:rgba(251,207,232,.24);
}

.badge--clearance{
  background:linear-gradient(135deg, rgba(107,114,128,.22), rgba(75,85,99,.10));
  color:#d1d5db;
  border-color:rgba(209,213,219,.18);
}

.badge--new{
  background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(34,211,238,.10));
  color:#bae6fd;
  border-color:rgba(125,211,252,.24);
}

.badge--surge{
  background:linear-gradient(135deg, rgba(244,114,182,.20), rgba(251,146,60,.12));
  color:#fecdd3;
  border-color:rgba(251,146,60,.24);
}

#grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
}

.prodTop{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.prodBottom{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.prodIcon{
  width:76px;
  height:76px;
  min-width:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  overflow:hidden;
}

.prodIcon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.qtyInput{
  width:64px;
  text-align:center;
}

@media (max-width: 900px){
  .product{
    min-height:390px;
  }
}

@media (max-width: 640px){
  #grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .product{
    min-height:auto;
    padding:18px 16px 16px;
  }

  .productBadges{
    margin-bottom:10px;
  }

  .prodBottom{
    gap:12px;
  }

  .prodBottom > div:last-child{
    flex-direction:column;
    align-items:stretch !important;
  }

  .qty{
    justify-content:space-between;
    width:100%;
  }

  .qtyInput{
    flex:1;
    max-width:90px;
  }

  .btn.primary,
  .btn.secondary{
    width:100%;
    justify-content:center;
  }
}

.priceBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.priceBlock--compact{
  gap:2px;
}

.priceNow{
  font-size:18px;
  font-weight:900;
  color:rgba(245,196,0,.95);
  line-height:1.1;
}

.priceBlock--compact .priceNow{
  font-size:16px;
}

.priceMeta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
}

.priceOld{
  text-decoration:line-through;
  opacity:.6;
}

.priceBase{
  opacity:.7;
}

.priceHint{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.priceBlock--promo .priceHint{
  color:#86efac;
  border-color:rgba(134,239,172,.2);
  background:rgba(34,197,94,.12);
}

.priceBlock--dynamic .priceHint{
  color:#fecdd3;
  border-color:rgba(251,146,60,.24);
  background:rgba(244,114,182,.12);
}

.cataloguePriceRow{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.priceLabel{
  font-size:12px;
  opacity:.7;
}

.infoCard--price .priceBlock{
  margin-top:6px;
}

.partnerApplyPage{
  width:min(1280px, calc(100% - 32px));
  margin:0 auto;
  padding:8px 0 28px;
  display:grid;
  gap:22px;
}

.partnerHero,
.partnerApplyCard,
.partnerApplyStatusCard{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    radial-gradient(circle at top right, rgba(245,196,0,.08), transparent 34%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 14px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
}

.partnerHero{
  padding:28px;
}

.partnerApplyCard{
  padding:24px;
}

.partnerApplyStatusCard{
  padding:18px 20px;
}

.partnerHero::before,
.partnerApplyCard::before,
.partnerApplyStatusCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 30%, transparent 70%, rgba(245,196,0,.03));
}

.partnerHeroBody,
.partnerStatusHead,
.partnerStatusMeta,
.partnerFormGrid,
.partnerBenefits,
.partnerContractBox,
.partnerChatBox,
.partnerChatComposer{
  position:relative;
  z-index:1;
}

.partnerEyebrow,
.partnerSectionEyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f5c400;
}

.partnerTitle,
.partnerSectionTitle{
  margin:4px 0 10px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  color:#f3f4f6;
}

.partnerTitle{
  font-size:clamp(30px, 4vw, 46px);
}

.partnerSectionTitle{
  font-size:clamp(24px, 2.2vw, 34px);
}

.partnerLead,
.partnerSectionText,
.partnerBenefitText,
.partnerStatusMeta,
.partnerChatEmpty,
.partnerMsgDate{
  color:rgba(255,255,255,.74);
}

.partnerGrid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(360px, .88fr);
  gap:22px;
  align-items:start;
}

.partnerFormGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.field{
  display:grid;
  gap:8px;
}

.field--full{
  grid-column:1 / -1;
}

.field span{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.84);
}

.field input,
.field select,
.field textarea,
.partnerChatComposer textarea{
  width:100%;
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:#f3f4f6;
  padding:13px 15px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field textarea,
.partnerChatComposer textarea{
  min-height:auto;
  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{
  color:rgba(255,255,255,.34);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.partnerChatComposer textarea:focus{
  border-color:rgba(245,196,0,.28);
  box-shadow:0 0 0 3px rgba(245,196,0,.08);
  background:rgba(255,255,255,.06);
}

.checkLine{
  margin-top:16px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(255,255,255,.8);
}

.checkLine input{
  margin-top:3px;
}

.partnerHeroActions,
.partnerActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.partnerStatusHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.partnerStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:9px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(245,196,0,.2);
  background:rgba(245,196,0,.08);
  color:#f5c400;
}

.partnerStatusBadge.is-ok{
  border-color:rgba(134,239,172,.22);
  background:rgba(34,197,94,.12);
  color:#86efac;
}

.partnerStatusBadge.is-no{
  border-color:rgba(252,165,165,.2);
  background:rgba(239,68,68,.12);
  color:#fca5a5;
}

.partnerStatusBadge.is-warn{
  border-color:rgba(245,196,0,.2);
  background:rgba(245,196,0,.08);
  color:#f5c400;
}

.partnerBenefits{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.partnerBenefit{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:start;
}

.partnerBenefitIcon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:rgba(245,196,0,.08);
  border:1px solid rgba(245,196,0,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.partnerBenefitTitle{
  margin-bottom:4px;
  font-size:15px;
  font-weight:900;
  color:#f3f4f6;
}

.partnerContractBox,
.partnerChatBox{
  margin-top:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.partnerContractBox{
  padding:18px;
}

.partnerChatBox{
  min-height:240px;
  max-height:460px;
  overflow:auto;
  display:grid;
  gap:12px;
  padding:14px;
}

.partnerMsg{
  max-width:min(86%, 760px);
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}

.partnerMsg.is-mine{
  margin-left:auto;
  background:rgba(245,196,0,.08);
}

.partnerMsg.is-them{
  margin-right:auto;
  background:rgba(255,255,255,.045);
}

.partnerMsgAuthor{
  font-weight:900;
  color:#fff;
}

#partnerApplicationSelect{
  font-weight:700;
}

@media (max-width: 980px){
  .partnerGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .partnerApplyPage{
    width:min(100%, calc(100% - 20px));
    gap:16px;
  }

  .partnerHero,
  .partnerApplyCard,
  .partnerApplyStatusCard{
    padding:18px;
    border-radius:20px;
  }

  .partnerFormGrid{
    grid-template-columns:1fr;
  }

  .partnerHeroActions,
  .partnerActions{
    flex-direction:column;
  }

  .partnerHeroActions .btn,
  .partnerActions .btn{
    width:100%;
  }
}

.partnerChatHeader{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.partnerChatHeaderActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.partnerChatCaseBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#f3f4f6;
}

.partnerChatCaseBadge.is-ok{
  background:rgba(34,197,94,.12);
  color:#86efac;
  border-color:rgba(134,239,172,.22);
}

.partnerChatCaseBadge.is-no{
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  border-color:rgba(252,165,165,.2);
}

.partnerChatCaseBadge.is-warn{
  background:rgba(245,196,0,.08);
  color:#f5c400;
  border-color:rgba(245,196,0,.18);
}

.partnerChatShell{
  margin-top:18px;
  display:grid;
  gap:14px;
}

.partnerChatBox{
  min-height:280px;
  max-height:520px;
  overflow:auto;
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.partnerChatDay{
  display:flex;
  justify-content:center;
  margin:2px 0;
}

.partnerChatDay span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}

.partnerMsgGroup{
  display:grid;
  gap:8px;
}

.partnerMsgGroup.is-mine{
  justify-items:end;
}

.partnerMsgGroup.is-them{
  justify-items:start;
}

.partnerMsg{
  max-width:min(84%, 760px);
  display:grid;
  gap:6px;
  padding:12px 14px 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.partnerMsg.is-mine{
  background:linear-gradient(180deg, rgba(245,196,0,.11), rgba(245,196,0,.06));
  border-color:rgba(245,196,0,.16);
}

.partnerMsg.is-them{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.partnerMsgMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
  color:rgba(255,255,255,.58);
}

.partnerMsgAuthor{
  font-weight:900;
  color:#fff;
}

.partnerMsgBody{
  line-height:1.58;
  color:rgba(255,255,255,.92);
  word-break:break-word;
}

.partnerMsgTimeInline{
  justify-self:end;
  font-size:11px;
  color:rgba(255,255,255,.42);
  margin-top:2px;
}

.partnerChatEmpty{
  color:rgba(255,255,255,.58);
  align-self:center;
}

.partnerChatComposer{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.partnerChatComposer textarea{
  min-height:96px;
}

.partnerChatComposerFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.partnerChatComposerHint{
  font-size:12px;
  color:rgba(255,255,255,.52);
}

@media (max-width: 720px){
  .partnerChatHeader{
    flex-direction:column;
    align-items:stretch;
  }

  .partnerChatHeaderActions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .partnerChatCaseBadge,
  #partnerChatRefresh{
    width:100%;
  }

  .partnerMsg{
    max-width:100%;
  }

  .partnerChatComposerFooter{
    flex-direction:column;
    align-items:stretch;
  }
}

.partnerAdminChatBox{
  margin-top:14px;
  min-height:220px;
  max-height:420px;
  overflow:auto;
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.partnerAdminChatEmpty{
  color:rgba(255,255,255,.58);
}

.partnerAdminMsg{
  max-width:min(84%, 760px);
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}

.partnerAdminMsg.is-team{
  margin-left:auto;
  background:rgba(245,196,0,.08);
  border-color:rgba(245,196,0,.16);
}

.partnerAdminMsg.is-partner{
  margin-right:auto;
  background:rgba(255,255,255,.04);
}

.partnerAdminMsgMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:rgba(255,255,255,.58);
}

.partnerAdminMsgAuthor{
  font-weight:900;
  color:#fff;
}

.partnerAdminMsgBody{
  line-height:1.58;
  color:rgba(255,255,255,.92);
  word-break:break-word;
}

.partnerAdminChatComposer{
  margin-top:14px;
}

.partnerAdminChatComposer textarea{
  width:100%;
  border:none;
  outline:none;
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  resize:vertical;
}

.partnerApplicationStats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.partnerMiniStat{
  min-width:110px;
  display:grid;
  gap:2px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.partnerMiniStatValue{
  font-size:22px;
  font-weight:900;
  line-height:1;
  color:#f3f4f6;
}

.partnerMiniStatLabel{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.58);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.partnerApplicationList{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.partnerApplicationEmpty{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.6);
}

.partnerApplicationCard{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:14px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.partnerApplicationCard.is-selected{
  border-color:rgba(245,196,0,.22);
  background:rgba(245,196,0,.05);
}

.partnerApplicationCardHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.partnerApplicationName{
  font-size:17px;
  font-weight:900;
  color:#f3f4f6;
  line-height:1.15;
}

.partnerApplicationMeta{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,.6);
}

.partnerApplicationActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.partnerApplicationActions .btn{
  min-width:120px;
}

@media (max-width: 720px){
  .partnerApplicationActions{
    flex-direction:column;
  }

  .partnerApplicationActions .btn{
    width:100%;
  }

  .partnerApplicationCardHead{
    flex-direction:column;
    align-items:stretch;
  }
}

.partnerInlineState{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.08);
}

.partnerInlineState.is-ok{
  color:#86efac;
  background:rgba(34,197,94,.12);
  border-color:rgba(134,239,172,.22);
}

.partnerInlineState.is-off{
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.04);
}

.scrollTopFab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border:none;
  outline:none;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  z-index:1200;

  color:#111;
  background:linear-gradient(180deg, rgba(245,196,0,.98), rgba(220,170,0,.96));
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);

  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.96);
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.scrollTopFab.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.scrollTopFab:hover{
  filter:brightness(1.03);
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.scrollTopFab:active{
  transform:translateY(1px) scale(.98);
}

.scrollTopFab:focus-visible{
  box-shadow:
    0 0 0 4px rgba(245,196,0,.18),
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
}

@media (max-width: 640px){
  .scrollTopFab{
    right:14px;
    bottom:14px;
    width:50px;
    height:50px;
    font-size:22px;
  }
}

@media (max-width: 640px){
  .scrollTopFab{
    bottom:76px;
  }
}

.partnerModalBody{
  display:grid;
  gap:16px;
}

.partnerModalTop{
  display:grid;
  gap:6px;
}

.partnerModalBody .partnerFormGrid{
  margin-top:0;
}

.partnerModalBody .partnerContractBox{
  margin-top:0;
}

.partnerModalBody .field input,
.partnerModalBody .field select,
.partnerModalBody .field textarea{
  background:rgba(255,255,255,.05);
}

.notifBellBtn{
  position:relative;
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.notifBellBtn:hover{
  background:rgba(255,255,255,.08);
}

.notifBellBtn:active{
  transform:translateY(1px);
}

.notifBellBtn.is-active{
  border-color:rgba(245,196,0,.22);
  background:rgba(245,196,0,.08);
  box-shadow:0 0 0 3px rgba(245,196,0,.08);
}

.notifBellIcon{
  font-size:20px;
  line-height:1;
}

.notifBellBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background:#ef4444;
  color:#fff;
  border:2px solid #111;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

.notifPanel{
  position:fixed;
  top:76px;
  right:18px;
  width:min(420px, calc(100vw - 24px));
  max-height:min(70vh, 720px);
  display:grid;
  grid-template-rows:auto 1fr;
  border-radius:20px;
  background:rgba(18,18,18,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  z-index:99999;
  overflow:hidden;
  backdrop-filter:blur(12px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.985);
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;
}

.notifPanel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.notifPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.notifPanelTitle{
  font-size:17px;
  font-weight:900;
  color:#fff;
}

.notifList{
  overflow:auto;
  display:grid;
  gap:10px;
  padding:12px;
  overscroll-behavior:contain;
}

.notifEmpty{
  color:rgba(255,255,255,.58);
  padding:12px 6px;
}

.notifItem{
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  text-align:left;
  padding:12px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.notifItem:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
}

.notifItem:active{
  transform:translateY(1px);
}

.notifItem.is-unread{
  background:rgba(245,196,0,.06);
  border-color:rgba(245,196,0,.16);
}

.notifItem.is-read{
  opacity:.9;
}

.notifItemIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
}

.notifItemBody{
  display:grid;
  gap:4px;
  min-width:0;
}

.notifItemTitle{
  font-size:14px;
  font-weight:900;
  color:#fff;
  line-height:1.25;
}

.notifItemMsg{
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
  overflow-wrap:anywhere;
}

.notifItemDate{
  font-size:12px;
  color:rgba(255,255,255,.48);
}

.notifList::-webkit-scrollbar{
  width:10px;
}

.notifList::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

.notifList::-webkit-scrollbar-track{
  background:transparent;
}

@media (max-width: 640px){
  .notifBellBtn{
    width:42px;
    height:35px;
    border-radius:13px;
    overflow: visible !important;
  }

  .notifPanel{
    top:auto;
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    max-height:72dvh;
    border-radius:18px;
    transform:translateY(22px);
    box-shadow:0 18px 50px rgba(0,0,0,.42);
  }

  .notifPanel.is-open{
    transform:translateY(0);
  }

  .notifPanelHead{
    padding:12px 14px;
    position:relative;
  }

  .notifPanelHead::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:42px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
  }

  .notifPanelTitle{
    font-size:16px;
    padding-top:8px;
  }

  .notifList{
    padding:10px;
    gap:9px;
  }

  .notifItem{
    grid-template-columns:38px 1fr;
    gap:10px;
    padding:11px;
    border-radius:15px;
  }

  .notifItemIcon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:18px;
  }

  .notifItemTitle{
    font-size:13px;
  }

  .notifItemMsg{
    font-size:12px;
  }

  .notifItemDate{
    font-size:11px;
  }

  .notifBellBadge{
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
    border-width: 2px;
  }
}

.notFoundBox{
  max-width:720px;
  margin:40px auto;
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  text-align:center;
}

.notFoundCode{
  font-size:56px;
  font-weight:900;
  line-height:1;
  color:#f5c400;
}

.notFoundTitle{
  margin-top:10px;
  font-size:28px;
  font-weight:900;
  color:#fff;
}

.notFoundText{
  margin-top:12px;
  color:rgba(255,255,255,.72);
  line-height:1.6;
}

.notFoundActions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

.profileNameRow{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.profileSwitchBtn{
  width:34px;
  height:34px;
  min-width:34px;
  border:none;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.profileSwitchBtn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(245,196,0,.2);
}

.profileSwitchBtn:active{
  transform:translateY(1px);
}

.profileSwitchBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.characterSwitchList{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.characterSwitchItem{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px;
  text-align:left;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
}

.characterSwitchItem:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(245,196,0,.18);
}

.characterSwitchItem.is-current{
  border-color:rgba(34,197,94,.3);
  background:rgba(34,197,94,.08);
}

.characterSwitchName{
  font-weight:900;
  font-size:15px;
}

.characterSwitchMeta{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.orderCard--clean{
  position:relative;
  cursor:pointer;
}

.orderCard--clean:hover{
  border-color:rgba(245,196,0,.18);
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.orderCardMain{
  display:grid;
  gap:14px;
}

.orderCardHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.orderCardIdentity{
  min-width:0;
  display:grid;
  gap:6px;
}

.orderCardAside{
  display:grid;
  justify-items:end;
  gap:10px;
  margin-left:auto;
}

.orderCardPrice{
  font-size:18px;
}

.orderMiniSummary{
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.45;
}

.orderMiniBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

.orderMiniBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.82);
}

.orderCardActions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.orderPrimaryActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.orderSecondaryWrap{
  position:relative;
  margin-left:auto;
}

.orderMoreBtn{
  min-width:110px;
  justify-content:center;
}

.orderMoreMenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  display:grid;
  gap:6px;
  padding:8px;
  border-radius:16px;
  background:rgba(10,14,34,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  z-index:30;
}

.orderMoreItem{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-weight:800;
}

.orderMoreItem:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(245,196,0,.18);
}

.reorderModal{
  display:grid;
  gap:16px;
}

.reorderIntroCard{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.reorderIntroTitle{
  font-weight:900;
  font-size:16px;
  color:#fff;
}

.reorderIntroText{
  margin-top:6px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}

.reorderStatsGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.reorderStatCard{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.reorderStatCard--highlight{
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.18);
}

.reorderStatLabel{
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.reorderStatValue{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#fff;
  line-height:1.15;
}

.reorderStatHint{
  margin-top:4px;
  font-size:12px;
  color:#86efac;
}

.reorderSection{
  display:grid;
  gap:8px;
}

.reorderSectionTitle{
  font-weight:900;
  color:#fff;
}

.reorderSectionTitle--danger{
  color:#fca5a5;
}

.reorderSectionTitle--warn{
  color:#fcd34d;
}

.reorderEntries{
  display:grid;
  gap:10px;
}

.reorderEntryCard{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.reorderActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:4px;
}

#overlay .modalCard{
  width:min(920px,96vw);
  max-height:min(90vh,900px);
  overflow:auto;
}

@media (max-width: 900px){
  .orderCardActions{
    align-items:stretch;
  }

  .orderPrimaryActions{
    width:100%;
  }

  .orderSecondaryWrap{
    margin-left:0;
  }

  .reorderStatsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .orderCardHead{
    gap:12px;
  }

  .orderCardAside{
    width:100%;
    justify-items:start;
    margin-left:0;
  }

  .orderPrimaryActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .orderPrimaryActions .btn{
    width:100%;
    justify-content:center;
  }

  .orderSecondaryWrap{
    width:100%;
  }

  .orderMoreBtn{
    width:100%;
  }

  .orderMoreMenu{
    position:static;
    width:100%;
    margin-top:8px;
  }

  #overlay .modalCard{
    width:min(96vw,96vw);
    max-height:92vh;
    padding:14px;
    border-radius:18px;
  }

  .reorderModal{
    gap:14px;
  }

  .reorderStatsGrid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .reorderStatCard{
    padding:12px;
  }

  .reorderStatValue{
    font-size:20px;
  }

  .reorderActions{
    flex-direction:column;
  }

  .reorderActions .btn{
    width:100%;
    justify-content:center;
  }

  .reorderEntryCard{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
}

.orderCard--clean{
  position:relative;
  cursor:pointer;
  overflow:visible;
  z-index:1;
  display: block;
}

.orderCard--clean:hover{
  border-color:rgba(245,196,0,.18);
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.orderCard--clean.is-menu-open{
  z-index:40;
}

.orderCardMain{
  display:grid;
  gap:14px;
  overflow:visible;
}

.orderCardActions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  overflow:visible;
}

.orderPrimaryActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.orderSecondaryWrap{
  position:relative;
  margin-left:auto;
  z-index:5;
  overflow:visible;
}

.orderSecondaryWrap.is-open{
  z-index:60;
}

.orderMoreBtn{
  min-width:110px;
  justify-content:center;
  position:relative;
  z-index:2;
}

.orderMoreMenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  display:grid;
  gap:6px;
  padding:8px;
  border-radius:16px;
  background:rgba(10,14,34,.98);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  z-index:100;
  pointer-events:auto;
}

.orderMoreItem{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-weight:800;
  position:relative;
  z-index:1;
}

.orderMoreItem:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(245,196,0,.18);
}

#ordersBox,
.ordersToolbar,
.pagination{
  overflow:visible;
}

@media (max-width: 900px){
  .orderCardActions{
    align-items:stretch;
  }

  .orderPrimaryActions{
    width:100%;
  }

  .orderSecondaryWrap{
    margin-left:0;
  }
}

@media (max-width: 640px){
  .orderPrimaryActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .orderPrimaryActions .btn{
    width:100%;
    justify-content:center;
  }

  .orderSecondaryWrap{
    width:100%;
  }

  .orderMoreBtn{
    width:100%;
  }

  .orderMoreMenu{
    position:static;
    width:100%;
    margin-top:8px;
    min-width:0;
  }
}

.homeCollectionsWrap{
  margin-top:26px;
  display:grid;
  gap:18px;
}

.homeCollectionsHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.homeCollectionsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.homeCollectionCard{
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.homeCollectionCover{
  position:relative;
  min-height:240px;
  display:flex;
  align-items:flex-end;
  padding:18px;
}

.homeCollectionOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,7,17,.08), rgba(7,7,17,.72)),
    linear-gradient(135deg, rgba(159,0,255,.14), rgba(245,196,0,.08));
}

.homeCollectionBadge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#fff;
  background:rgba(10,14,34,.88);
  border:1px solid rgba(255,255,255,.12);
}

.homeCollectionHero{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
}

.homeCollectionIcon{
  font-size:24px;
}

.homeCollectionTitle{
  font-size:24px;
  font-weight:1000;
  color:#fff;
  line-height:1.15;
}

.homeCollectionSubtitle{
  color:rgba(255,255,255,.82);
  line-height:1.45;
  max-width:90%;
}

.homeCollectionBody{
  display:grid;
  gap:14px;
  padding:16px;
}

.homeCollectionMeta{
  display:grid;
  gap:4px;
}

.homeCollectionMetaValue{
  font-size:15px;
  font-weight:900;
  color:#fff;
}

.homeCollectionMetaHint{
  font-size:13px;
  color:rgba(255,255,255,.62);
}

.homeCollectionProducts{
  display:grid;
  gap:10px;
}

.homeCollectionProductChip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.homeCollectionProductChipMedia{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}

.homeCollectionProductChipImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.homeCollectionProductChipPlaceholder{
  font-size:16px;
  color:#fff;
  line-height:1;
}

.homeCollectionProductChipName{
  font-size:13px;
  font-weight:800;
  color:#fff;
  line-height:1.3;
}

.homeCollectionActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
}

.homeCollectionBtn{
  width:100%;
  justify-content:center;
}

.homeCollectionsLoading,
.homeCollectionsEmpty{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
}


.homeCollectionModal{
  display:grid;
  gap:16px;
}

.homeCollectionModalHero{
  position:relative;
  min-height:220px;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:18px;
}

.homeCollectionModalHeroOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,7,17,.10), rgba(7,7,17,.78)),
    linear-gradient(135deg, rgba(159,0,255,.14), rgba(245,196,0,.08));
}

.homeCollectionModalHeroContent{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
}

.homeCollectionModalBadge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#fff;
  background:rgba(10,14,34,.88);
  border:1px solid rgba(255,255,255,.12);
}

.homeCollectionModalHeroTitle{
  font-size:24px;
  font-weight:1000;
  color:#fff;
  line-height:1.15;
}

.homeCollectionModalHeroText{
  color:rgba(255,255,255,.84);
  line-height:1.45;
  max-width:760px;
}

.homeCollectionModalStats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.homeCollectionModalStat{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.homeCollectionModalStatLabel{
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.homeCollectionModalStatValue{
  margin-top:4px;
  font-size:22px;
  font-weight:1000;
  color:#fff;
}

.homeCollectionModalList{
  display:grid;
  gap:12px;
}

.homeCollectionModalItem{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.homeCollectionModalItemMedia{
  width:90px;
  height:90px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

.homeCollectionModalItemImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.homeCollectionModalItemPlaceholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
}

.homeCollectionModalItemBody{
  display:grid;
  gap:8px;
  min-width:0;
}

.homeCollectionModalItemName{
  font-size:16px;
  font-weight:1000;
  color:#fff;
  line-height:1.25;
}

.homeCollectionModalItemMeta{
  font-size:12px;
  color:rgba(255,255,255,.64);
  line-height:1.4;
}

.homeCollectionModalItemBottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:auto;
}

.homeCollectionModalPriceWrap{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.homeCollectionModalPrice{
  font-size:20px;
  font-weight:1000;
  color:#ffd95e;
  line-height:1;
}

.homeCollectionModalPriceOld{
  font-size:13px;
  color:rgba(255,255,255,.48);
  text-decoration:line-through;
}

.homeCollectionModalActions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:2px;
}

.homeCollectionModalActions .btn{
  width:100%;
  justify-content:center;
}

@media (max-width: 1100px){
  .homeCollectionsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .homeCollectionModalActions{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .homeCollectionsGrid{
    grid-template-columns:1fr;
  }

  .homeCollectionActions{
    grid-template-columns:1fr;
  }

  .homeCollectionCover{
    min-height:210px;
  }

  .homeCollectionTitle{
    font-size:22px;
  }

  .homeCollectionSubtitle{
    max-width:100%;
  }

  .homeCollectionModalStats{
    grid-template-columns:1fr;
  }

  .homeCollectionModalItem{
    grid-template-columns:1fr;
  }

  .homeCollectionModalItemMedia{
    width:100%;
    height:180px;
  }

  .homeCollectionModalActions{
    grid-template-columns:1fr;
  }

  .homeCollectionModalActions .btn{
    width:100%;
    justify-content:center;
  }
}

.adminGeneratorControls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}

.adminGeneratorActions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.adminCatalogPreview{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.adminPreviewCard{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.adminPreviewHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.adminPreviewTitle{
  font-size:18px;
  font-weight:1000;
  color:#fff;
}

.adminPreviewActionsTop{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.adminPreviewImage{
  width:100%;
  max-width:260px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.adminPreviewImage--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  color:rgba(255,255,255,.56);
}

.adminPreviewForm{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.adminCatalogDrafts{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.adminDraftCard{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.adminDraftHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.adminDraftName{
  font-size:18px;
  font-weight:1000;
  color:#fff;
}

.adminDraftMeta{
  margin-top:6px;
  color:rgba(255,255,255,.62);
  font-size:13px;
}

.adminDraftPrice{
  font-size:20px;
  font-weight:1000;
  color:#ffd95e;
}

.adminDraftImage{
  width:100%;
  max-width:220px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.adminDraftTags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.adminDraftTag{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  text-transform:uppercase;
}

.adminDraftText{
  color:rgba(255,255,255,.76);
  line-height:1.5;
}

.adminDraftActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .adminGeneratorControls{
    grid-template-columns:1fr;
  }

  .adminPreviewForm{
    grid-template-columns:1fr;
  }
}

.orderSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.orderSectionActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.orderItemLine.has-image{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.orderItemThumbWrap{
  width:72px;
  height:72px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.orderItemThumb{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent;
}

.orderItemThumbPlaceholder{
  padding:8px;
  text-align:center;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.62);
  line-height:1.3;
}

.orderItemRenderStatus{
  margin-top:6px;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.62);
}

.orderItemRenderStatus.status-ready{
  color:#22c55e;
}

.orderItemRenderStatus.status-pending{
  color:#f5c400;
}

.orderItemRenderStatus.status-failed{
  color:#ef4444;
}

@media (max-width: 700px){
  .orderItemLine.has-image{
    grid-template-columns:56px 1fr;
    align-items:flex-start;
  }

  .orderItemRight{
    grid-column:2;
    justify-self:end;
    margin-top:4px;
  }

  .orderItemThumbWrap{
    width:56px;
    height:56px;
  }
}

.orderItemRegenBtn{
  margin-top:8px;
  min-width:42px;
  align-self:flex-end;
}

#profileBox{
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(245,196,0,.10), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(159,0,255,.10), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(245,196,0,.24);
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

#profileBox.profil-none{
  display: none;
}

.profileHero{
  display: grid;
  gap: 18px;
}

.profileHeroTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.profileIdentity{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.profileAvatar,
#profileInitial{
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 1000;
  color: var(--gold, #f5c400);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(circle at 30% 30%, rgba(245,196,0,.18), transparent 45%);
  border: 1px solid rgba(245,196,0,.28);
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 0 24px rgba(245,196,0,.10);
}

.profileMain{
  min-width: 0;
}

.profileNameRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profileName,
#profileName{
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.04em;
  color: var(--text, rgba(255,255,255,.92));
}

.profileMeta{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted, rgba(255,255,255,.72));
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.liveDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7dff1f;
  box-shadow: 0 0 12px rgba(166,255,0,.65);
}

.profileSep{
  opacity: .45;
}

#profileWelcome{
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, rgba(255,255,255,.72));
  line-height: 1.55;
}

#profileRole{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  width: fit-content;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profileStatsGrid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

.profileStatCard{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.profileStatValue{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.05em;
  color: var(--gold, #f5c400);
}

.profileStatLabel{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, rgba(255,255,255,.72));
  font-weight: 800;
}

#statOrders,
#statSpent,
#statAvgBasket,
#statLoyalty,
#statPending{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.05em;
  color: var(--gold, #f5c400);
}

.profileInfoGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.profileInfoCard{
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.profileInfoTitle{
  font-size: 12px;
  color: var(--muted, rgba(255,255,255,.72));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.profileInfoValue{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--text, rgba(255,255,255,.92));
  line-height: 1.35;
}

#profileLastOrderCode,
#profileLastOrderDate,
#profileLastOrderStatus,
#profilePartnerBadge,
#profileLoyaltyBadge{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, rgba(255,255,255,.92));
  font-size: 14px;
  font-weight: 900;
}

#profileLoyaltyBadge[data-loyalty="bronze"]{
  color: #ffd5a6;
  border-color: rgba(255,166,77,.22);
  background: rgba(255,166,77,.08);
}

#profileLoyaltyBadge[data-loyalty="silver"]{
  color: #d8e2f0;
  border-color: rgba(180,195,215,.24);
  background: rgba(180,195,215,.08);
}

#profileLoyaltyBadge[data-loyalty="gold"]{
  color: #ffe486;
  border-color: rgba(245,196,0,.28);
  background: rgba(245,196,0,.10);
}

#profileLoyaltyBadge[data-loyalty="vip"]{
  color: #f1d1ff;
  border-color: rgba(159,0,255,.28);
  background: rgba(159,0,255,.10);
  box-shadow: 0 0 18px rgba(159,0,255,.10);
}

#profilePartnerBadge{
  color: #b8ffd7;
  border-color: rgba(90,255,160,.20);
  background: rgba(90,255,160,.08);
}

.profileActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.profileActions .btn{
  min-height: 44px;
}

#profileAdminBtn{
  display: none;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 980px){
  .profileStatsGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .profileInfoGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  #profileBox{
    padding: 18px;
    border-radius: 22px;
  }

  .profileIdentity{
    align-items: flex-start;
  }

  .profileAvatar,
  #profileInitial{
    width: 54px;
    height: 54px;
    min-width: 54px;
    font-size: 28px;
  }

  .profileStatsGrid{
    grid-template-columns: 1fr;
  }

  .profileName,
  #profileName{
    font-size: 28px;
  }
}

.promoSpecialBox{
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(245,196,0,.18), transparent 58%),
    radial-gradient(640px 260px at 92% 24%, rgba(159,0,255,.14), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.promoSpecialGlow{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,138,0,.12), transparent 22%),
    radial-gradient(circle at 85% 22%, rgba(245,196,0,.10), transparent 18%),
    radial-gradient(circle at 62% 80%, rgba(159,0,255,.10), transparent 20%);
  filter: blur(20px);
  opacity:.9;
}

.promoSpecialTop{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 16px;
}

.promoSpecialBadge{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.24);
  color: rgba(255,245,245,.96);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.promoSpecialStock{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(245,196,0,.12);
  border: 1px solid rgba(245,196,0,.24);
  color: rgba(255,240,180,.96);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .05em;
}

.promoSpecialContent{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 18px;
  align-items:center;
}

.promoSpecialEyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.promoSpecialTitle{
  margin: 10px 0 8px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: .95;
  font-weight: 1000;
  letter-spacing: -.05em;
  color: var(--text);
}

.promoSpecialText{
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.promoSpecialText b{
  color: var(--text);
}

.promoSpecialRules{
  display:grid;
  gap:10px;
  margin-top: 16px;
}

.promoRuleItem{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.promoSpecialActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.promoSpecialRight{
  display:grid;
  gap:12px;
  justify-items:center;
}

.promoSpecialDiscountRing{
  width: 220px;
  height: 220px;
  border-radius: 999px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(245,196,0,.90), rgba(255,138,0,.85), rgba(159,0,255,.75));
  box-shadow:
    0 16px 50px rgba(0,0,0,.24),
    0 0 30px rgba(245,196,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}

.promoSpecialDiscountInner{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(20,14,10,.88), rgba(12,9,18,.92));
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 16px;
}

.promoSpecialDiscountValue{
  display:block;
  font-size: 56px;
  line-height: .9;
  font-weight: 1000;
  letter-spacing: -.06em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(245,196,0,.15);
}

.promoSpecialDiscountLabel{
  display:block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}

.promoSpecialMiniCard{
  width: min(240px, 100%);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px 14px;
  text-align:center;
}

.promoSpecialMiniCard--warn{
  border-color: rgba(245,196,0,.24);
  background: rgba(245,196,0,.08);
}

.promoSpecialMiniLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.promoSpecialMiniValue{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 1000;
  color: var(--text);
}

html.theme-light .promoSpecialBox{
  border-color: rgba(132,96,58,.12);
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(184,132,24,.14), transparent 58%),
    radial-gradient(640px 260px at 92% 24%, rgba(124,58,237,.08), transparent 58%),
    linear-gradient(135deg, rgba(255,249,242,.94), rgba(240,229,209,.96));
  box-shadow: 0 18px 40px rgba(92,60,29,.10);
}

html.theme-light .promoSpecialBadge{
  background: rgba(194,65,12,.10);
  border-color: rgba(194,65,12,.18);
  color: #9a3412;
}

html.theme-light .promoSpecialStock{
  background: rgba(184,132,24,.10);
  border-color: rgba(184,132,24,.18);
  color: #8a6100;
}

html.theme-light .promoRuleItem{
  background: rgba(248,241,230,.92);
  border-color: rgba(132,96,58,.08);
  color: var(--text);
}

html.theme-light .promoSpecialDiscountInner{
  background: linear-gradient(180deg, rgba(44,28,18,.94), rgba(28,18,12,.96));
}

html.theme-light .promoSpecialMiniCard{
  background: rgba(248,241,230,.92);
  border-color: rgba(132,96,58,.08);
}

html.theme-light .promoSpecialMiniCard--warn{
  background: rgba(184,132,24,.10);
  border-color: rgba(184,132,24,.16);
}

@media (max-width: 920px){
  .promoSpecialContent{
    grid-template-columns: 1fr;
  }

  .promoSpecialRight{
    justify-items:stretch;
  }

  .promoSpecialDiscountRing{
    margin-inline:auto;
  }

  .promoSpecialMiniCard{
    width: 100%;
  }
}

@media (max-width: 560px){
  .promoSpecialBox{
    padding: 16px;
    border-radius: 18px;
  }

  .promoSpecialTitle{
    font-size: 34px;
  }

  .promoSpecialDiscountRing{
    width: 180px;
    height: 180px;
  }

  .promoSpecialDiscountValue{
    font-size: 42px;
  }

  .promoSpecialActions{
    flex-direction: column;
  }

  .promoSpecialActions .btn{
    width: 100%;
    justify-content: center;
  }
}

.promoSpecialBox{
  position: relative;
  isolation: isolate;
}

.promoSpecialBox::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:28px;
  background:
    conic-gradient(
      from 0deg,
      rgba(245,196,0,0) 0deg,
      rgba(245,196,0,.14) 40deg,
      rgba(255,138,0,.18) 95deg,
      rgba(159,0,255,.16) 170deg,
      rgba(0,231,255,.14) 245deg,
      rgba(245,196,0,.16) 320deg,
      rgba(245,196,0,0) 360deg
    );
  filter: blur(18px);
  animation: promoBorderSpin 7s linear infinite;
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}

.promoSpecialBox::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:28px;
  background:
    conic-gradient(
      from 0deg,
      rgba(245,196,0,0) 0deg,
      rgba(245,196,0,.14) 40deg,
      rgba(255,138,0,.18) 95deg,
      rgba(159,0,255,.16) 170deg,
      rgba(0,231,255,.14) 245deg,
      rgba(245,196,0,.16) 320deg,
      rgba(245,196,0,0) 360deg
    );
  filter: blur(18px);
  animation: promoBorderSpin 7s linear infinite reverse;
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}

.promoSpecialBox > *{
  position:relative;
  z-index:1;
}

@keyframes promoBorderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}


@media (max-width: 560px){
  .promoSpecialBox::after{
    opacity:.48;
    filter: blur(14px);
  }
}

.promoSpecialBox{
  min-height: 404px;
  padding: 22px 22px 20px;
}

.promoSpecialContent{
  grid-template-columns: 1.2fr .82fr;
  gap: 22px;
  align-items: center;
}

.promoSpecialLeft{
  max-width: 760px;
  padding-right: 8px;
}

.promoSpecialEyebrow{
  font-size: 13px;
  letter-spacing: .16em;
  opacity: .9;
}

.promoSpecialTitle{
  margin: 14px 0 14px;
  font-size: clamp(44px, 6vw, 62px);
  line-height: .94;
  letter-spacing: -.055em;
  max-width: 11ch;
}

.promoSpecialText{
  font-size: 15px;
  line-height: 1.7;
  max-width: 54ch;
}

.promoSpecialActions{
  margin-top: 22px;
}

.promoSpecialActions .btn{
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 12px;
}

.promoSpecialRight{
  gap: 16px;
  justify-items: center;
}

.promoSpecialDiscountRing{
  width: 214px;
  height: 214px;
  padding: 12px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.22),
    0 0 40px rgba(245,196,0,.08);
}

.promoSpecialDiscountInner{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -20px 28px rgba(0,0,0,.16);
}

.promoSpecialDiscountValue{
  font-size: 58px;
  line-height: .88;
}

.promoSpecialDiscountLabel{
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .22em;
}

.promoSpecialMiniCard{
  width: min(250px, 100%);
  padding: 12px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.promoSpecialMiniLabel{
  font-size: 11px;
  letter-spacing: .18em;
}

.promoSpecialMiniValue{
  margin-top: 8px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.promoSpecialStock{
  min-height: 36px;
  padding-inline: 15px;
  font-size: 11px;
  letter-spacing: .10em;
}

.promoSpecialBadge{
  min-height: 36px;
  padding-inline: 15px;
  font-size: 11px;
  letter-spacing: .10em;
}

@media (max-width: 920px){
  .promoSpecialBox{
    min-height: auto;
  }

  .promoSpecialContent{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .promoSpecialLeft{
    max-width: none;
    padding-right: 0;
  }

  .promoSpecialTitle{
    max-width: none;
  }
}

.promoSpecialBox{
  min-height: 402px;
  padding: 26px 28px;
  border-radius: 22px;
  overflow: hidden;
}

.promoSpecialContent{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 26px;
  align-items: center;
}

.promoSpecialLeft{
  max-width: 640px;
  position: relative;
  z-index: 2;
}

.promoSpecialEyebrow{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}

.promoSpecialTitle{
  margin: 0 0 16px;
  font-size: clamp(54px, 7vw, 72px);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 1000;
  max-width: 8.5ch;
  text-wrap: balance;
}

.promoSpecialText{
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}

.promoSpecialText b{
  color: rgba(255,255,255,.96);
}

.promoSpecialActions{
  margin-top: 24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.promoSpecialActions .btn{
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
}

.promoSpecialRight{
  display:grid;
  justify-items:center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.promoSpecialDiscountRing{
  width: 228px;
  height: 228px;
  padding: 12px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 180deg,
      #f4b000,
      #f08a14,
      #d84d7f,
      #b833d6,
      #f4b000
    );
  box-shadow:
    0 18px 60px rgba(0,0,0,.26),
    0 0 30px rgba(240,138,20,.14);
  position: relative;
}

.promoSpecialDiscountRing::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(244,176,0,.18), transparent 62%);
  filter: blur(18px);
  opacity: .9;
  pointer-events:none;
  z-index: -1;
}

.promoSpecialDiscountInner{
  width:100%;
  height:100%;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,180,0,.06), transparent 40%),
    linear-gradient(180deg, rgba(26,15,10,.96), rgba(16,10,18,.98));
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -14px 28px rgba(0,0,0,.28);
}

.promoSpecialDiscountValue{
  display:block;
  font-size: 58px;
  line-height: .86;
  font-weight: 1000;
  letter-spacing: -.06em;
  color: #ffd84d;
  text-shadow:
    0 0 18px rgba(245,196,0,.16),
    0 0 40px rgba(245,196,0,.08);
}

.promoSpecialDiscountLabel{
  display:block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.promoSpecialMiniCard{
  width: min(260px, 100%);
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(245,196,0,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.16);
  text-align:center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.promoSpecialMiniLabel{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

.promoSpecialMiniValue{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.96);
}

.promoSpecialBox .promoSpecialAmbient{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.promoSpecialBox::before{
  opacity:.82;
}

.promoSpecialBox::after{
  opacity:.58;
}


.promoSpecialLeft::before{
  content:"";
  position:absolute;
  inset:-18px -14px -18px -18px;
  background:
    radial-gradient(circle at 20% 40%, rgba(0,0,0,.18), transparent 58%);
  filter: blur(26px);
  pointer-events:none;
  z-index:-1;
  opacity:.55;
}

.promoSpecialDiscountRing{
  animation: promoRingFloat 4.6s ease-in-out infinite;
}

@keyframes promoRingFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}


@media (max-width: 980px){
  .promoSpecialBox{
    min-height: auto;
    padding: 22px;
  }

  .promoSpecialContent{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .promoSpecialLeft{
    max-width: none;
  }

  .promoSpecialTitle{
    max-width: none;
    font-size: clamp(42px, 10vw, 60px);
  }

  .promoSpecialText{
    max-width: none;
  }
}

@media (max-width: 560px){
  .promoSpecialBox{
    padding: 18px;
    border-radius: 18px;
  }

  .promoSpecialDiscountRing{
    width: 190px;
    height: 190px;
  }

  .promoSpecialDiscountValue{
    font-size: 46px;
  }

  .promoSpecialActions{
    flex-direction: column;
  }

  .promoSpecialActions .btn{
    width: 100%;
    justify-content: center;
  }

  .promoSpecialMiniCard{
    width: 100%;
  }
}