/* =====================================================================
   No Limits Telecoms — Product Store · HOLO dark skin
   Loads LAST: styles.css → shop.css → home.css → products-dark.css
   Restyles only — every id/class shop.js touches is left untouched.
   ===================================================================== */

/* ---------- Page frame ---------- */
body.shop-body{background:var(--navy-0,#04122e);color:var(--ink)}
main{display:block;position:relative;z-index:1}
h1,h3,h4{font-family:var(--font-display);letter-spacing:-.02em}
h1,h2,h3,h4,h5{color:#fff}

/* Kill the light theme's nav underline bars (styles.css leftovers) */
.nav a::after,.drop-trigger::after{display:none}
.nav a.active{color:#fff}

/* ---------- Store rolling-out banner (dark glass, orange accents) ---------- */
.store-notice{
  position:relative;z-index:5;
  background:linear-gradient(120deg,rgba(242,115,47,.16),rgba(8,26,58,.78) 42%,rgba(8,26,58,.78) 70%,rgba(86,224,255,.08));
  border-bottom:1px solid rgba(248,155,62,.3);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
}
.store-notice-badge{
  background:linear-gradient(160deg,rgba(242,115,47,.2),rgba(86,224,255,.08));
  border:1px solid rgba(248,155,62,.45);
  color:var(--o2);box-shadow:0 0 22px -6px rgba(242,115,47,.5);
}
.store-notice-text{color:var(--ink-dim)}
.store-notice-text strong{color:#fff;font-family:var(--font-alt)}
.store-notice-tag{
  background:linear-gradient(120deg,#f2732f,#f89b3e);color:#fff;
  box-shadow:0 6px 16px -6px rgba(242,115,47,.7);
}
.store-notice-cta{
  background:linear-gradient(135deg,#f2732f,#f89b3e);color:#fff;
  box-shadow:0 12px 30px -10px rgba(242,115,47,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.store-notice-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(242,115,47,.85),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- Shop hero — re-lit on the holo backdrop ---------- */
.shop-hero{background:transparent;padding:clamp(3rem,6.5vw,5.2rem) 0 clamp(2rem,4vw,3rem)}
.shop-hero .grid-lines{display:none}
.shop-hero .glow{opacity:.22}
.shop-hero h1{
  font-weight:700;letter-spacing:-.025em;
  font-size:clamp(2.1rem,5vw,3.5rem);
}
.shop-hero p{color:var(--ink-dim)}
.shop-hero-stats{gap:0}
.shop-hero-stats div{
  padding:0 1.9rem;border-left:1px solid rgba(120,160,255,.18);
}
.shop-hero-stats div:first-child{padding-left:0;border-left:0}
.shop-hero-stats strong{
  font-family:var(--font-display);
  background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(242,115,47,.35));
}
.shop-hero-stats span{color:var(--ink-faint)}

/* ---------- Shop section rhythm ---------- */
.shop-section{background:transparent;padding:34px 0 88px}

/* ---------- Toolbar: dark glass search + sort ---------- */
.search-wrap svg{color:var(--ink-faint)}
.search-wrap input{
  background:rgba(6,20,44,.65);border:1px solid rgba(120,160,255,.22);color:#fff;
  backdrop-filter:blur(8px);
}
.search-wrap input::placeholder{color:var(--ink-faint)}
.search-wrap input:focus{
  border-color:rgba(248,155,62,.6);
  box-shadow:0 0 0 3px rgba(242,115,47,.16),0 0 24px -8px rgba(242,115,47,.4);
}
.search-wrap input::-webkit-search-cancel-button{filter:invert(1) brightness(1.6)}
.sort-wrap label{color:var(--ink-dim)}
.sort-wrap select{
  background:rgba(6,20,44,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9bbdd' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border:1px solid rgba(120,160,255,.22);color:#fff;
}
.sort-wrap select:focus{outline:none;border-color:rgba(248,155,62,.6);box-shadow:0 0 0 3px rgba(242,115,47,.16)}
.sort-wrap select option{background:#071c40;color:#fff}

/* ---------- Category chips: holo pills ---------- */
.chips{gap:.55rem;margin-bottom:1.2rem}
.chip{
  border:1px solid transparent;
  background:
    linear-gradient(160deg,rgba(10,36,80,.88),rgba(5,20,48,.88)) padding-box,
    var(--holo-border) border-box;
  color:var(--ink-dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.chip:hover{color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 20px -6px rgba(86,224,255,.45)}
.chip:focus-visible{outline:2px solid rgba(248,155,62,.7);outline-offset:2px}
.chip-count{background:rgba(255,255,255,.08);color:var(--ink-faint)}
.chip:hover .chip-count{color:var(--ink-dim)}
.chip.active{
  background:linear-gradient(135deg,#f2732f,#f89b3e);
  border-color:transparent;color:#fff;
  box-shadow:0 10px 26px -10px rgba(242,115,47,.8),inset 0 1px 0 rgba(255,255,255,.4);
}
.chip.active .chip-count{background:rgba(255,255,255,.25);color:#fff}

.result-count{color:var(--ink-faint)}

/* ---------- Product cards: dark glass, white image well ---------- */
.p-card{
  border:1px solid transparent;border-radius:18px;
  background:
    linear-gradient(160deg,#0a2450 0%,#061a3c 55%,#04122e 100%) padding-box,
    var(--holo-border) border-box;
  box-shadow:0 20px 50px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
}
.p-card:hover{
  transform:translateY(-5px);border-color:transparent;
  box-shadow:0 30px 64px -26px rgba(0,0,0,.9),0 0 34px -10px rgba(242,115,47,.4),inset 0 1px 0 rgba(255,255,255,.1);
}
.p-img{
  margin:10px 10px 0;border-radius:12px;border-bottom:0;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(4,18,46,.06),inset 0 -14px 24px -18px rgba(4,18,46,.25);
}
.p-ph{color:#cbd5e1}
.brand-badge{box-shadow:0 4px 12px rgba(4,18,46,.28)} /* stays a white chip over the white well */
.p-cat{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.64rem;letter-spacing:.12em;
  color:rgba(86,224,255,.8);
}
.p-name{color:var(--ink)}
.p-foot{border-top:1px solid rgba(120,160,255,.14)}
.price{
  white-space:nowrap;
  background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f89b3e;
  filter:drop-shadow(0 0 10px rgba(242,115,47,.45));
}
.price.poa{background:linear-gradient(120deg,#56e0ff,#a9d9ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 10px rgba(86,224,255,.35))}
.price-sub{color:var(--ink-faint)}

/* qty stepper (cards + cart drawer) */
.qty-ctl{border:1px solid rgba(120,160,255,.25);background:rgba(4,18,46,.4)}
.qty-btn{background:rgba(255,255,255,.08);color:#fff}
.qty-btn:hover{background:rgba(255,255,255,.18)}
.qty-num{color:#fff}

/* ---------- Load more / empty states / VAT note ---------- */
.btn-lg{padding:16px 30px;font-size:16px}
.empty-state p{color:var(--ink-dim)}
.vat-note{color:var(--ink-faint)}

/* ---------- CTA band: dark glass ---------- */
.cta-band{
  background:linear-gradient(160deg,rgba(10,36,80,.82),rgba(5,20,48,.82));
  border-top:1px solid rgba(120,160,255,.14);border-bottom:1px solid rgba(120,160,255,.14);
}
.cta-band::after{
  background:
    radial-gradient(circle at 16% 18%,rgba(242,115,47,.16),transparent 42%),
    radial-gradient(circle at 88% 82%,rgba(86,224,255,.1),transparent 45%);
}
.cta-inner{text-align:left;padding:clamp(2.6rem,5vw,3.6rem) 24px}
.cta-inner h2{color:#fff}
.cta-inner p{color:var(--ink-dim)}
.cta-band .btn-primary{
  background:linear-gradient(135deg,#f2732f,#f89b3e);color:#fff;
  box-shadow:0 12px 30px -10px rgba(242,115,47,.7),inset 0 1px 0 rgba(255,255,255,.45);
}
.cta-band .btn-primary:hover{background:linear-gradient(135deg,#f2732f,#f89b3e);box-shadow:0 16px 40px -10px rgba(242,115,47,.85)}
.cta-band .btn-ghost{
  color:var(--ink);border:1px solid transparent;
  background:
    linear-gradient(160deg,#0a2450,#061a3c) padding-box,
    var(--holo-border) border-box;
}
.cta-band .btn-ghost:hover{color:#fff;background:linear-gradient(160deg,#0a2450,#061a3c) padding-box,var(--holo-border) border-box;border-color:transparent;box-shadow:0 0 24px -6px rgba(86,224,255,.4)}

/* ---------- Cart FAB (sits above the WhatsApp float) ---------- */
.cart-fab{
  bottom:148px;right:18px;z-index:1500;
  background:linear-gradient(135deg,#f2732f,#f89b3e);
  box-shadow:0 14px 34px -8px rgba(242,115,47,.65),inset 0 1px 0 rgba(255,255,255,.35);
}
.cart-count{border-color:#04122e}

/* ---------- Cart drawer: dark glass panel ---------- */
.cart-overlay{z-index:2400;background:rgba(2,8,22,.68);backdrop-filter:blur(4px)}
.cart-drawer{
  z-index:2500;color:var(--ink);
  background:linear-gradient(170deg,#0a2450 0%,#061a3c 55%,#04122e 100%);
  border-left:1px solid rgba(120,160,255,.22);
  box-shadow:-26px 0 70px -18px rgba(0,0,0,.85);
}
.cart-head h3{color:#fff}
/* shop.css pins these headings to --font-head with higher specificity —
   re-pin the drawer/checkout headings to the display face */
.cart-head h3,.checkout-form h4,.order-done h4{font-family:var(--font-display);letter-spacing:-.02em}
.cart-close{background:rgba(255,255,255,.08);color:var(--ink)}
.cart-close:hover{background:rgba(255,255,255,.16);color:#fff}
.cart-empty{color:var(--ink-faint)}
.cart-item{border-bottom:1px solid rgba(120,160,255,.12)}
.ci-img{background:#fff;border:1px solid rgba(255,255,255,.14)}
.ci-ph{background:rgba(255,255,255,.08);border-color:transparent}
.ci-name{color:var(--ink)}
.ci-price{color:var(--ink-faint)}
.ci-price strong{color:#fff}
.cart-foot{border-top:2px solid rgba(120,160,255,.16)}
.cart-total-row{color:var(--ink-dim)}
.cart-total-row strong{
  background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f89b3e;
  filter:drop-shadow(0 0 10px rgba(242,115,47,.4));
}

/* checkout form */
.checkout-form h4{color:#fff}
.checkout-form input,.checkout-form textarea{
  background:rgba(3,11,28,.6);border:1px solid rgba(120,160,255,.22);color:#fff;
}
.checkout-form input::placeholder,.checkout-form textarea::placeholder{color:var(--ink-faint)}
.checkout-form input:focus,.checkout-form textarea:focus{
  outline:none;border-color:rgba(248,155,62,.6);box-shadow:0 0 0 3px rgba(242,115,47,.16);
}
.co-status{color:var(--ink-faint)}
.co-status.err{color:#ff9c8a}
.order-done h4{color:#fff}
.order-done p{color:var(--ink-dim)}
.done-sub{color:var(--ink-faint)}
.done-icon{box-shadow:0 0 30px -6px rgba(45,212,167,.6)}

/* ---------- Mobile polish ---------- */
@media (max-width:760px){
  .shop-section{padding:26px 0 64px}
  .cart-fab{bottom:144px;right:16px}
}
@media (max-width:560px){
  .store-notice-inner{justify-content:flex-start}
  /* shop.css makes the toolbar a column at this width; flex-basis 320px then
     becomes HEIGHT and strands the search icon mid-air — pin it back down */
  .search-wrap{flex:0 0 auto;max-width:none}
  .chips{gap:.42rem}
  .chip{padding:.42rem .8rem;font-size:.8rem}
  .chip-count{font-size:.66rem}
  .shop-hero-stats div{padding:0 1.1rem}
  .shop-hero-stats div:first-child{padding-left:0}
  .cta-inner{flex-direction:column;align-items:flex-start}
  /* 2-col grid leaves ~165px cards: stack the card footer — price on top,
     full-width action below — so the price never wraps and the Add to Cart
     label stays inside its pill */
  .p-foot{flex-direction:column;align-items:stretch;gap:.55rem}
  .p-foot .btn{width:100%;padding:.5rem .55rem;font-size:.84rem}
  .p-foot .qty-ctl{width:100%;justify-content:center}
}