/* ===== Store header ===== */
.store-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.store-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}


/* logo */
.store-logo{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  min-width: 0;
}


.store-logo img{
  height: 42px;
  width: auto;
  display:block;
}

.store-logo-text{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
}

.store-logo-text .logo-title{
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.95);
}

.store-logo-text .logo-tagline{
  font-size: .72rem;
  color: rgba(255,255,255,0.65);
}

/* ===== Order pill ===== */
 .store-orderbar{
   position: relative;              /* anchor drawer */
   display:inline-flex;
   align-items:center;
   gap: 6px;
   padding: 6px;
   border-radius: 999px;
   background: rgba(0,0,0,0.35);
   border: 1px solid rgba(255,255,255,0.16);
   box-shadow: 0 10px 30px rgba(0,0,0,0.35);
   max-width: 100%;
 }

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

 .account-btn{
   height: 40px;
   padding: 0 16px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.14);
   background: rgba(255,255,255,0.05);
   color: rgba(255,255,255,0.92);
   font-weight: 700;
   cursor:pointer;
 }

 .account-meta{
   display:none;
   align-items:center;
   gap: 10px;
   font-size: 0.85rem;
   color: rgba(255,255,255,0.75);
 }

 .account-meta.is-visible{ display:flex; }

 .account-logout{
   background: transparent;
   border: 1px solid rgba(255,255,255,0.2);
   color: rgba(255,255,255,0.9);
   border-radius: 999px;
   padding: 4px 10px;
   cursor:pointer;
   font-size: 0.75rem;
 }

 .account-modal{
   position: fixed;
   inset: 0;
   display:flex;
   align-items:center;
   justify-content:center;
   background: rgba(4,8,16,0.68);
   backdrop-filter: blur(10px);
   z-index: 9999;
 }

 .account-modal.hidden{ display:none; }

 .account-modal-panel{
   width: min(420px, 90vw);
   background: rgba(10,14,22,0.95);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 20px;
   padding: 24px;
   box-shadow: 0 24px 60px rgba(0,0,0,0.55);
   color: rgba(255,255,255,0.9);
 }

 .account-modal-panel h3{
   margin: 0 0 8px 0;
 }

 .account-modal-sub{
   margin: 0 0 16px 0;
   color: rgba(255,255,255,0.7);
 }

 .account-modal-close{
   position:absolute;
   right: 22px;
   top: 18px;
   background: transparent;
   border: none;
   color: rgba(255,255,255,0.8);
   font-size: 1.2rem;
   cursor:pointer;
 }

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

 .account-form input{
   width: 100%;
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,0.12);
   background: rgba(0,0,0,0.35);
   color: #fff;
 }

 .account-divider{
   text-align:center;
   margin: 16px 0;
   font-size: 0.85rem;
   color: rgba(255,255,255,0.6);
 }

 .account-form-status{
   font-size: 0.8rem;
   color: rgba(57,255,20,0.85);
 }

 @media (max-width: 720px){
   .store-header-inner{
     flex-direction: column;
     align-items: flex-start;
   }
   .store-account{
     width: 100%;
     justify-content: space-between;
     flex-wrap: wrap;
   }
   .store-orderbar{
     width: 100%;
   }
 }


.orderbar-left{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.95);
  font-weight: 650;
  cursor:pointer;
  transition: all .15s ease;
}

.orderbar-left:hover{
  border-color: rgba(57,255,20,0.45);
  box-shadow: 0 0 0 4px rgba(57,255,20,0.12);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#39ff14;
  box-shadow: 0 0 14px rgba(57,255,20,0.6);
}

.orderbar-count{
  min-width: 44px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-weight: 900;
  background:#39ff14;
  color:#000;
  user-select:none;
}

.orderbar-right{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #39ff14, #00dcff);
  color: #061018;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid transparent;
  transition: all .15s ease;
}

.orderbar-right:hover{
  box-shadow: 0 0 0 4px rgba(0,220,255,0.15), 0 0 30px rgba(57,255,20,0.25);
}

.orderbar-right.is-disabled{
  opacity:.55;
  pointer-events:none;
  filter:saturate(.6);
}

/* ===== Drawer dropdown under pill ===== */
.orderbar-drawer{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(420px, calc(100vw - 40px));
  padding: 14px;
  border-radius: 18px;
  background: rgba(10,16,28,0.96);
  border: 1px solid rgba(57,255,20,0.22);
  box-shadow: 0 18px 55px rgba(0,0,0,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  z-index: 9999;
}

.orderbar-drawer.is-open{ display:block; }

/* pointer arrow */
.orderbar-drawer::before{
  content:"";
  position:absolute;
  top:-8px;
  right: 40px;
  width:14px;
  height:14px;
  background: rgba(10,16,28,0.96);
  border-left: 1px solid rgba(57,255,20,0.18);
  border-top: 1px solid rgba(57,255,20,0.18);
  transform: rotate(45deg);
}

/* drawer header */
.wa-dock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.92);
}

.wa-close{
  height: 34px;
  width: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  cursor:pointer;
}
.wa-close:hover{ border-color: rgba(57,255,20,0.35); }

.wa-items{
  max-height: 260px;
  overflow:auto;
  padding-right: 6px;
}

/* item rows */
.wa-item{
  display:grid;
  grid-template-columns: 1fr 76px 36px;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  margin-bottom: 10px;
}

.wa-item small{
  display:block;
  opacity:.7;
  margin-top: 4px;
}

.wa-qty{
  width:100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  padding: 0 10px;
}

.wa-remove{
  height: 36px;
  width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  cursor:pointer;
}
.wa-remove:hover{ border-color: rgba(255,80,80,0.55); }

.wa-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

/* ===== Store badge ===== */
.store-badge{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 12px;
}

/* ===== Filter bar layout: NEVER overlap ===== */
.store-filter-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:end;
}

.store-filter-brand{ min-width: 0; }
.brand-select{
  width: 100%;
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  padding: 12px 40px 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand-select:focus{ outline: none; border-color: rgba(57,255,20,0.35); }
.brand-select option{ color:#0b1020; }
.brand-select-wrap{
  position: relative;
}
.brand-select-wrap::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
}

.store-filter{ min-width: 0; }
.store-filter-search{ min-width: 0; }

.store-input{ width:100%; }
.store-filter-search{ grid-column: 1 / -1; }
.store-filter-mega,
.store-filter-brand{ width: 100%; }

/* mobile */
@media (max-width: 900px){
  .store-filter-row{ grid-template-columns: 1fr; }
  .store-logo-text{ display:none; }
}


/* =========================
   CATEGORY MEGA MENU (glass)
   ========================= */
.store-filter-mega{ position:relative; z-index:30; }

.catmega{ position:relative; }

.catmega-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 14px;
  border-radius:999px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,0.92);
  cursor:pointer;
}
.catmega-btn:hover{
  border-color: rgba(57,255,20,0.35);
}
.catmega-caret{ opacity:.75; }

/* dropdown panel */
.catmega-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(980px, calc(100vw - 40px));
  padding: 12px;

  border-radius: 18px;
  background: rgba(10,14,22,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  display:none;
  z-index:999;
}
.catmega-panel.is-open{ display:block; }

.catmega-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:12px;
}
@media (max-width: 720px){
  .catmega-panel{ width: calc(100vw - 24px); }
  .catmega-grid{ grid-template-columns: 1fr; }
}

/* columns */
.catmega-left,
.catmega-right{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow:hidden;

  max-height: 320px;
  overflow-y:auto;
}

/* items (no wrap, no cut) */
.catmega-cat,
.catmega-sub{
  appearance: none;
  background: transparent;
  border: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width: 100%;
  padding: 12px 14px;

  color: rgba(255,255,255,0.90);
  font-size: 0.95rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor:pointer;
}

.catmega-cat:focus,
.catmega-sub:focus{
  outline: none;
  background: rgba(57,255,20,0.12);
}

.catmega-cat:hover,
.catmega-sub:hover{
  background: rgba(57,255,20,0.08);
}

.catmega-cat.is-active{
  background: rgba(57,255,20,0.12);
  border-left: 3px solid rgba(57,255,20,0.65);
  padding-left: 11px;
}

.catmega-hint{
  padding: 12px;
  opacity: .7;
  color: rgba(147,167,197,0.95);
}

.catmega-actions{
  display:flex;
  justify-content:center;
  padding-top:10px;
}
/* =========================
   FIX: Category mega menu text cut-off
   (paste at the END of store.css)
   ========================= */

/* make the whole dropdown wider */
.catmega-panel{
  width: min(1180px, calc(100vw - 40px)) !important;
}

/* give LEFT column more width */
.catmega-grid{
  grid-template-columns: 2.2fr 1fr !important; /* left wider */
  gap: 14px !important;
}

/* make the left column not cramped */
.catmega-left{
  min-width: 520px;  /* ensures long category names fit */
}

/* keep one line, but show more before clipping */
.catmega-cat,
.catmega-sub{
  padding: 12px 16px !important;
  font-size: 0.98rem !important;
}

/* optional: slightly smaller on small screens */
@media (max-width: 720px){
  .catmega-left{ min-width: 0; }
  .catmega-panel{ width: calc(100vw - 24px) !important; }
  .catmega-grid{ grid-template-columns: 1fr !important; }
}
/* =========================
   CATEGORY MEGA MENU – CLEAN FIX (paste at END of store.css)
   ========================= */

.store-filter-row{
  display:grid !important;
  grid-template-columns: 1fr 1fr; /* Category + Brand */
  gap: 16px;
  align-items: end;
}


.store-filter-mega{ position: relative; z-index: 50; }
.catmega{ position: relative; }

.catmega-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:999px;
  padding: 12px 14px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.catmega-btn:hover{ border-color: rgba(57,255,20,0.35); }

.catmega-panel{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;

  width: 860px;                 /* ✅ stable desktop width */
  max-width: calc(100vw - 40px);

  padding: 12px;
  border-radius: 18px;

  background: rgba(10,14,22,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  display:none;
  z-index: 9999;
}

.catmega-panel.is-open{ display:block; }

.catmega-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;  /* ✅ left wider but not insane */
  gap: 12px;
}

.catmega-subhead{
  padding: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: .85;
  color: rgba(147,167,197,0.95);
}

.catmega-sublist{
  display: grid;
}


.catmega-left,
.catmega-right{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.catmega-cat,
.catmega-sub{
  appearance: none;
  background: transparent;
  border: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width: 100%;
  padding: 12px 14px;
  cursor:pointer;

  color: rgba(255,255,255,0.90);
  font-size: 0.95rem;

  white-space: nowrap;         /* ✅ no wrap */
  overflow: hidden;            /* ✅ keep neat */
  text-overflow: ellipsis;     /* ✅ … only if needed */
}

.catmega-cat:focus,
.catmega-sub:focus{
  outline: none;
  background: rgba(57,255,20,0.12);
}


.catmega-cat:hover,
.catmega-sub:hover{ background: rgba(57,255,20,0.08); }

.catmega-cat.is-active{
  background: rgba(57,255,20,0.12);
  border-left: 3px solid rgba(57,255,20,0.65);
  padding-left: 11px;
}

.catmega-text{
  min-width:0;                 /* ✅ allow ellipsis to work properly */
}

.catmega-hint{
  padding: 12px;
  opacity:.75;
}

/* ✅ Custom tooltip (ONLY if you need full text) */
.catmega-cat:hover::after,
.catmega-sub:hover::after{
  content: attr(data-full);
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20000;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(10,14,22,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  pointer-events:none;
}

/* Mobile: stack columns */
@media (max-width: 720px){
  .catmega-panel{
    width: calc(100vw - 24px);
    left: 0;
  }
  .catmega-grid{
    grid-template-columns: 1fr;
  }
  .store-filter-row{
    grid-template-columns: 1fr;
  }
}
/* =========================
   PRODUCT PAGE LAYOUT + TABS
   ========================= */

.product-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: start;
}

.product-image-box{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.product-image-box img{
  width:100%;
  height: auto;
  display:block;
}

.product-kicker{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.product-title{
  margin: 0 0 10px;
}

.product-meta{
  display:grid;
  gap: 8px;
  margin: 10px 0 14px;
  color: rgba(255, 255, 255, 0.86);
}

.product-meta span{
  opacity:.75;
  margin-right: 8px;
}

.product-qty-row{
  margin: 10px 0 14px;
  display:grid;
  gap: 8px;
  max-width: 220px;
}

.product-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.product-note{
  margin: 12px 0 0;
  opacity:.75;
  font-size: .95rem;
}

.tabs-head{
  display:flex;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.tab-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.86);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 600;
}

.tab-btn.is-active{
  border-color: rgba(57,255,20,0.35);
  box-shadow: 0 0 0 4px rgba(57,255,20,0.10);
}

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.download-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  margin-bottom: 10px;
}

.download-name{
  font-weight: 600;
  opacity: .95;
}

.download-actions{
  display:flex;
  gap: 10px;
}

@media (max-width: 900px){
  .product-grid{ grid-template-columns: 1fr; }
}
.product-link{
  display:block;
  text-decoration:none;
  color: inherit;
}
.product-link:hover{
  text-decoration:none;
}
/* =========================
   Store card title – Tusk green (NOT neon)
   ========================= */

.store-card-link,
.store-card-link:visited,
.store-card-link:hover,
.store-card-link:active {
  text-decoration: none;
  color: inherit;
}

/* Product title */
.store-card-link h3 {
  color: rgba(235, 245, 240, 0.95); /* clean white */
  font-weight: 600;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

/* Subtle Tusk-green hover (matches buttons & tags) */
.store-card-link:hover h3 {
  color: #7CFF6B; /* softer Tusk green */
  text-shadow: 0 0 12px rgba(79, 220, 106, 0.25);
}

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

  .product-image img {
    max-width: 240px;
  }
}
/* ===== Product page hero sizing ===== */
.product-hero{
  display: grid;
  grid-template-columns: 420px 1fr; /* BIGGER image column */
  gap: 28px;
  align-items: center;
}

.product-image{
  padding: 18px;
  background: rgba(255,255,255,0.04);
}

.product-hero-img{
  width: 100%;
  height: auto;
  max-width: 380px;          /* BIGGER image */
  display: block;
  margin: 0 auto;
  border-radius: 14px;
}

/* mobile */
@media (max-width: 820px){
  .product-hero{
    grid-template-columns: 1fr;
  }
  .product-hero-img{
    max-width: 260px;
  }
}
/* ===== PRODUCT PAGE: BIGGER IMAGE HERO ===== */
.product-page .product-hero{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: center;
}

.product-page .product-image{
  padding: 18px;
}

.product-page .product-hero-img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;

  /* this is what makes it look BIGGER */
  max-width: 380px;
  margin: 0 auto;
}

@media (max-width: 900px){
  .product-page .product-hero{
    grid-template-columns: 1fr;
  }
  .product-page .product-hero-img{
    max-width: 320px;
  }
}
/* ===== FORCE PRODUCT PAGE HERO IMAGE SIZE ===== */
#productPage .product-hero{
  display: grid !important;
  grid-template-columns: 520px 1fr !important;
  gap: 28px !important;
  align-items: center !important;
}

#productPage .product-image.card{
  padding: 18px !important;
  max-width: none !important;
  width: 100% !important;
}

#productPage .product-image.card img.product-hero-img{
  width: 100% !important;
  height: auto !important;
  max-width: 480px !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  object-fit: contain !important;
}

/* mobile */
@media (max-width: 2500px){
  #productPage .product-hero{
    grid-template-columns: 1fr !important;
  }
  #productPage .product-image.card img.product-hero-img{
    max-width: 2500px !important;
  }
}
/* =========================
   PRODUCT PAGE – PREMIUM UI
   ========================= */

/* Hero card layout */
#productPage .product-hero{
  display: grid !important;
  grid-template-columns: 520px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
}

/* Image card */
#productPage .product-image.card{
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(14px) !important;
}

/* Image itself */
#productPage .product-image.card img.product-hero-img{
  width: 100% !important;
  height: auto !important;
  max-width: 480px !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,0.22) !important;
  padding: 10px !important;
  object-fit: contain !important;
}

/* Info side */
#productPage .product-info h1{
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 10px !important;
}

#productPage .product-info p{
  margin: .35rem 0 !important;
  color: rgba(255,255,255,0.80);
}

/* Make the “labels” pop */
#productPage .product-info strong{
  color: rgba(255,255,255,0.92);
}

/* Add a nice “meta row” look using pills */
#productPage .product-info p{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
#productPage .product-info p strong{
  font-weight: 700;
}

/* Make SKU look like a badge */
#productPage .product-info p:nth-of-type(1) strong{
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* CTA button spacing */
#productPage #addToListBtn{
  margin-top: 16px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
}

/* Tabs card polish */
.product-tabs.card{
  border-radius: 22px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
}

/* Tabs head */
.product-tabs .tabs-head{
  display: flex;
  gap: 10px;
  padding: 14px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.product-tabs .tab-btn{
  border-radius: 999px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-weight: 650;
}

.product-tabs .tab-btn.is-active{
  border-color: rgba(57,255,20,0.35);
  box-shadow: 0 0 0 4px rgba(57,255,20,0.10);
  color: rgba(255,255,255,0.95);
}

/* Tab body padding */
.product-tabs .tabs-body{
  padding: 16px;
}

/* Downloads rows */
.download-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  margin-bottom: 10px;
}

.download-row span{
  color: rgba(255,255,255,0.90);
  font-weight: 600;
}

/* Make “View” button subtle, Download primary */
.download-row .btn{
  border-radius: 999px !important;
  padding: 10px 14px !important;
}

/* Mobile */
@media (max-width: 900px){
  #productPage .product-hero{
    grid-template-columns: 1fr !important;
  }
  #productPage .product-image.card img.product-hero-img{
    max-width: 420px !important;
  }
  .download-row{
    grid-template-columns: 1fr;
  }
}
/* =========================
   PRODUCT PAGE – FULLER WIDTH
   ========================= */

/* Make product page wider than store grid */
.product-page.card,
.product-tabs.card{
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Let the hero breathe */
#productPage .product-hero{
  grid-template-columns: minmax(520px, 620px) 1fr !important;
  align-items: center;
}

/* Improve visual balance */
#productPage{
  padding: 26px !important;
}

/* Increase image presence slightly */
#productPage .product-image.card img.product-hero-img{
  max-width: 520px !important;
}

/* Desktop only: stretch content a bit more */
@media (min-width: 1200px){
  .product-page.card{
    padding: 32px !important;
  }
}
/* =========================
   PRODUCT PAGE: WIDER CONTAINER
   ========================= */

.container.container-wide{
  max-width: 1400px !important;
}

/* Make the hero fill the wider space nicely */
#productPage .product-hero{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 28px;
  align-items: center;
}

/* Make the image box properly big */
#productPage .product-image{
  padding: 18px !important;
}

#productPage .product-hero-img{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 14px;
}

/* Mobile stack */
@media (max-width: 900px){
  #productPage .product-hero{
    grid-template-columns: 1fr;
  }
}
.download-row.disabled {
  opacity: 0.4;
}

.download-row.disabled button {
  cursor: not-allowed;
}

.download-row button:disabled {
  pointer-events: none;
  opacity: 0.6;
}
.product-hero-img.zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox.hidden { display: none; }

/* the clickable dark area */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
  pointer-events: auto;
}

/* the image sits above the backdrop */
#lightboxImg {
  position: relative;
  z-index: 2;
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* close button */
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  border: 0;
  background: rgba(255,255,255,0.12);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
}
.price-vat-note {
  margin-left: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
  font-weight: 500;
}

.price-original{
  margin-left: 8px;
  font-size: 0.85rem;
  text-decoration: line-through;
  opacity: 0.65;
}

.price-current{
  font-weight: 800;
}

.price-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(57,255,20,0.18);
  border: 1px solid rgba(57,255,20,0.4);
  color: rgba(210,255,210,0.95);
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 6px;
}

.product-price .price-original{
  margin-left: 12px;
}

.wa-price{
  display:block;
  opacity: 0.7;
  font-size: 0.8rem;
  margin-top: 4px;
}

.admin-shell{
  padding: 24px;
}

.admin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-sub{
  margin-top: 8px;
  opacity: 0.7;
}

.admin-table{
  display:grid;
  gap: 10px;
}

.admin-row{
  display:grid;
  grid-template-columns: minmax(220px, 1.4fr) 160px 140px minmax(200px, 1fr);
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
}

.admin-row-head{
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  border: none;
  background: transparent;
}

.admin-empty{
  padding: 16px;
  opacity: 0.7;
}

.admin-discount{
  display:flex;
  align-items:center;
  gap: 8px;
}

.admin-discount input{
  width: 80px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
}

.admin-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 0.85rem;
}

.admin-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(4,8,16,0.68);
  backdrop-filter: blur(10px);
  z-index: 10000;
}

.admin-modal.hidden{ display: none; }

.admin-modal-panel{
  width: min(520px, 92vw);
  background: rgba(10,14,22,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  position: relative;
}

.admin-modal-panel h3{
  margin: 0 0 8px 0;
}

.admin-category-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-height: 320px;
  overflow: auto;
  margin-top: 12px;
}

.admin-category-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  font-size: 0.9rem;
}

.admin-category-item input{
  width: 16px;
  height: 16px;
}

.admin-modal-actions{
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  margin-top: 16px;
}

.admin-products{
  margin-top: 18px;
  padding: 22px;
}

.admin-form{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.admin-form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.admin-form label{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}

.admin-form input,
.admin-form select,
.admin-form textarea{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.9);
  padding: 10px 12px;
}

.admin-form textarea{
  resize: vertical;
}

.admin-checkbox{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 0.9rem;
}

.admin-form-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.admin-form-status{
  font-size: 0.85rem;
}

.admin-category-custom.is-hidden{
  display: none;
}

.admin-lookup{
  display:flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.admin-lookup input{
  flex: 1;
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.9);
  padding: 10px 12px;
}

.admin-form input[type="file"]{
  padding: 8px 10px;
}

.admin-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}

.admin-email{
  font-weight: 600;
}

@media (max-width: 900px){
  .admin-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-row-head{
    display:none;
  }
  .admin-actions{
    justify-content:flex-start;
  }
}

.spec-table{
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.spec-row{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  padding: 12px 14px;
  font-size: 0.92rem;
}

.spec-row:nth-child(odd){
  background: rgba(255,255,255,0.04);
}

.spec-key{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

.spec-val{
  text-align: right;
  color: rgba(255,255,255,0.88);
}
.spec-bullets{
  margin: 0 0 14px 20px;
  color: rgba(255,255,255,0.78);
}

.spec-bullets li{
  margin: 6px 0;
}
#productDetails a[href*="stores"],
#productDetails a[href*="locator"],
#productDetails .storelocator,
#productDetails li:has(a[href*="stores"]) {
  display: none !important;
}

#productDetails h3 {
  margin: 12px 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
}

#productDetails ul {
  margin: 10px 0 18px 18px;
}

#productDetails li {
  margin: 6px 0;
  list-style: disc;
}

#productDetails table {
  margin-top: 14px;
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

#productDetails td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#productDetails tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}
/* Hide the Category/Subcategory block inside Details */
#productDetails .detail-meta {
  display: none !important;
}

/* ===============================
   TUSK STORE – CLEAN CARD SYSTEM
   Paste this at the END of store.css
   =============================== */

/* Grid */
#productGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  padding: 18px 0;
}

/* Card shell */
.product-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 46px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(57,255,20,0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}

/* Kill global link underline styles inside cards */
.product-card a,
.product-card a:visited,
.product-card a:hover{
  text-decoration: none !important;
  color: inherit !important;
}

/* Image area */
.product-card-img{
  position: relative;
  aspect-ratio: 4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: radial-gradient(circle at 30% 20%,
    rgba(57,255,20,0.10),
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.35) 100%
  );
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.product-card-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.45));
}

/* Category pill (MATCH button vibe) */
.product-tag{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;

  padding: 7px 12px;
  border-radius: 999px;

  background: linear-gradient(90deg, #39ff14, #00dcff);
  color: #061018;

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,220,255,0.18), 0 10px 26px rgba(57,255,20,0.18);
}

/* Body */
.product-card-body{
  padding: 14px 16px 12px;
}

.product-card-title{
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.product-card-sku{
  font-size: 12px;
  opacity: .70;
  margin-bottom: 10px;
}

.product-card-price{
  font-size: 14.5px;
  font-weight: 800;
  color: rgba(235,255,245,0.92);
}

/* Button area */
.product-card .add-to-list{
  width: calc(100% - 26px);
  margin: 0 13px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, #39ff14, #00dcff);
  border: 1px solid rgba(255,255,255,0.14);
  color: #061018;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(57,255,20,0.20);
}

.product-card .add-to-list:hover{
  filter: brightness(1.06);
}

/* Slightly brighter page feel (optional but helps) */
.store-page,
.store-wrap,
main{
  background: radial-gradient(circle at 20% 10%, rgba(57,255,20,0.06), rgba(0,0,0,0) 45%) !important;
}
#catMegaPanel { display: none; }
#catMegaPanel.is-open { display: block; }