/* ============================================
   SOLOZORA E-COMMERCE — CUSTOM STYLESHEET
   Brand gradient: teal -> blue -> violet -> purple
   ============================================ */

:root{
  --brand-teal:#14c4c4;
  --brand-blue:#2f8fe0;
  --brand-indigo:#5b63e0;
  --brand-violet:#8a3fe0;
  --brand-purple:#a52adb;

  /* Light Theme Tokens */
  --bg:#ffffff;
  --bg-body:#ffffff;
  --bg-soft:#f8fafc;
  --bg-surface-soft:#f8fafc;
  --bg-card:#ffffff;
  --text:#0f172a;
  --text-main:#0f172a;
  --text-soft:#64748b;
  --border:#e2e8f0;
  --header-bg:rgba(255, 255, 255, 0.92);
  --header-nav-text:#1e293b;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --accent:#3b82f6;
  --shadow:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-lg:0 10px 25px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
}

.dark{
  /* Dark Theme Tokens */
  --bg:#0b0f19;
  --bg-body:#0b0f19;
  --bg-soft:#111728;
  --bg-surface-soft:#111728;
  --bg-card:#151d32;
  --text:#f8fafc;
  --text-main:#f8fafc;
  --text-soft:#94a3b8;
  --border:#222f49;
  --header-bg:rgba(11, 15, 25, 0.92);
  --header-nav-text:#f1f5f9;
  --shadow:0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,.5);
}

/* Toast Notifications */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px) scale(0.95);
  z-index: 9999;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 9999px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#toast.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
}

*{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  transition:background .25s ease, color .25s ease;
}

.brand-gradient-text{
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-blue),var(--brand-indigo),var(--brand-violet),var(--brand-purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-gradient-bg{
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-blue),var(--brand-indigo),var(--brand-violet),var(--brand-purple));
}

.brand-gradient-border{
  border-image:linear-gradient(90deg,var(--brand-teal),var(--brand-purple)) 1;
}

.bg-surface{background:var(--bg);}
.bg-surface-soft{background:var(--bg-soft);}
.bg-card{background:var(--bg-card);}
.text-main{color:var(--text);}
.text-soft{color:var(--text-soft);}
.border-app{border-color:var(--border);}

/* ---------- Header ---------- */
#site-header{
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  color:var(--text);
}

/* ---------- Mega menu ---------- */
/* IMPORTANT: the positioned ancestor must be the full-width nav bar,
   not the small trigger button — otherwise the panel shrinks to the
   button's width and all columns overlap. */
#mega-nav{ position:relative; }
.mega-panel{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.relative.h-full.max-w-\[1400px\].mx-auto.px-6.lg\:px-10.flex.flex-col.justify-center.text-white.max-w-xl {
    width: 100%;
    background: #00000033;
    margin: 0 !important;
    max-width: 100%;
    text-align: center;
    align-items: center;
}
.mega-group:hover .mega-panel{
      height: 72vh;
    border-radius: 0px 0px 10px 10px;
}
.mega-group:hover .mega-panel,
.mega-group:focus-within .mega-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mega-link{
  transition:color .15s ease, transform .15s ease;
}
.mega-link:hover{
  color:var(--brand-blue);
  transform:translateX(3px);
}

/* ---------- Per-category nav dropdown (mega-menu style panel) ---------- */
.nav-drop-group{
  position:relative;
}
.nav-drop-panel{
  position:absolute;
  top:100%;
  left:0;
  width:auto;
  max-width:640px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:.85rem;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
  padding:1.5rem;
  display:flex;
  gap:1.5rem;
}
.nav-drop-group:hover .nav-drop-panel,
.nav-drop-group:focus-within .nav-drop-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-drop-items{
  display:grid;
  grid-template-columns:max-content max-content;
  gap:.25rem 2.25rem;
  align-content:start;
}
.nav-drop-items .mega-link{
  white-space:nowrap;
}
.nav-drop-banner{
  width:150px;
  flex-shrink:0;
  border-radius:.65rem;
  overflow:hidden;
  position:relative;
  display:block;
}
.nav-drop-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.nav-drop-banner:hover img{
  transform:scale(1.08);
}
.nav-drop-banner-label{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  padding:.5rem .6rem;
}
.nav-chevron{
  transition:transform .2s ease;
}
.nav-drop-group:hover .nav-chevron{
  transform:rotate(180deg);
}

/* ---------- "All Categories" image-card mega menu ---------- */
.cat-mega-card{
  border-radius:.85rem;
  overflow:hidden;
  border:1px solid var(--border);
  transition:box-shadow .2s ease, transform .2s ease;
}
.cat-mega-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.cat-mega-card img{
  transition:transform .35s ease;
}
.cat-mega-card:hover img{
  transform:scale(1.08);
}

/* ---------- Hero slider ---------- */
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
  pointer-events:none;
}
.hero-slide.active{
  opacity:1;
  pointer-events:auto;
}
.hero-dot{
  width:8px;height:8px;border-radius:9999px;
  background:rgba(255,255,255,.5);
  transition:all .25s ease;
}
.hero-dot.active{
  width:26px;
  background:#fff;
}

/* ---------- Carousels ---------- */
.carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar,
.slider-track::-webkit-scrollbar{display:none;}
.carousel-track > *{scroll-snap-align:start;flex:0 0 auto;}

.carousel-btn{
  width:40px;height:40px;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease;
}
.carousel-btn:hover{
  transform:scale(1.07);
  background:var(--brand-blue);
  color:#fff;
  border-color:transparent;
}

/* ---------- Product card ---------- */
.product-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:transparent;
}
.product-img-wrap{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg-soft);
}
.product-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.product-card:hover .product-img-wrap img{
  transform:scale(1.08);
}
.badge-discount{
  background:linear-gradient(90deg,#ff5f6d,#a52adb);
  color:#fff;
  font-weight:700;
}
.price-old{
  text-decoration:line-through;
  color:var(--text-soft);
}
.price-new{
  color:var(--brand-violet);
  font-weight:800;
}
.icon-btn{
  width:36px;height:36px;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text);
  transition:all .15s ease;
}
.icon-btn svg{
  color:currentColor;
}
.icon-btn:hover{
  background:var(--brand-purple);
  color:#fff !important;
  border-color:transparent;
}
.icon-btn:hover svg{
  color:#fff !important;
}
.icon-btn.active{
  background:var(--brand-purple);
  color:#fff !important;
  border-color:transparent;
}
.icon-btn.active svg{
  color:#fff !important;
}
.quick-actions{
  position:absolute;
  right:.6rem; top:.6rem;
  display:flex; flex-direction:column; gap:.5rem;
  opacity:0; transform:translateX(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.product-card:hover .quick-actions{
  opacity:1; transform:translateX(0);
}
.add-cart-btn{
  background:var(--bg-surface-soft);
  color:var(--text-main);
  border:1px solid var(--border);
  font-weight:600;
  transition:all .2s ease;
}
.add-cart-btn:hover{
  background:var(--brand-purple);
  color:#fff;
  border-color:transparent;
}
.dark .add-cart-btn{
  background:#eef1f8;
  color:#0f172a;
}
.add-cart-btn:hover{
  background:#ffffff;
  color:#000000;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transform:translateY(-1px);
}

/* ---------- Category tiles ---------- */
.cat-tile{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

/* ---------- Offer / banner cards ---------- */
.offer-card{
  border-radius:1.5rem;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.offer-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.offer-card > *{position:relative; z-index:2;}

/* ---------- Countdown ---------- */
.count-box{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  border-radius:.6rem;
  min-width:52px;
}

/* ---------- Section eyebrow ---------- */
.eyebrow{
  letter-spacing:.18em;
  font-weight:700;
  font-size:.72rem;
}

/* ---------- Toggle switch (theme) ---------- */
.theme-toggle{
  width:52px;height:28px;border-radius:9999px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  position:relative;
  cursor:pointer;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px;
  width:22px;height:22px;border-radius:9999px;
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-purple));
  transition:transform .25s ease;
}
.dark .theme-toggle .knob{
  transform:translateX(24px);
}

/* ---------- Search overlay ---------- */
#search-overlay{
  backdrop-filter:blur(6px);
}

/* ---------- Toast ---------- */
#toast{
  transform:translateY(120%);
  transition:transform .3s ease;
}
#toast.show{
  transform:translateY(0);
}

/* ---------- Marquee (trust strip) ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 22s linear infinite;
  gap:3rem;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{
  opacity:1; transform:translateY(0);
}

/* Scrollbar (light touch) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:9999px;}

/* ---------- Product page tabs ---------- */
.tab-btn{
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tab-btn.tab-active{
  color: var(--text);
  border-bottom-color: var(--brand-blue);
  font-weight: 600;
}

/* ---------- Auth pages (signup / login / forgot password) ---------- */
.auth-panel{
  position:relative;
  overflow:hidden;
}
.auth-panel::before,
.auth-panel::after{
  content:"";
  position:absolute;
  border-radius:9999px;
  background:rgba(255,255,255,.12);
}
.auth-panel::before{
  width:340px;height:340px;
  top:-120px; right:-100px;
}
.auth-panel::after{
  width:220px;height:220px;
  bottom:-80px; left:-60px;
  background:rgba(255,255,255,.08);
}
.auth-input{
  width:100%;
  padding:.7rem 1rem;
  border-radius:.65rem;
  border:1px solid var(--border);
  background:transparent;
  font-size:.9rem;
  outline:none;
  transition:border-color .15s ease;
}
.auth-input:focus{
  border-color:var(--brand-blue);
}
.auth-input.border-red-400{
  border-color:#f87171;
}
.auth-label{
  font-size:.8rem;
  font-weight:600;
  margin-bottom:.4rem;
  display:block;
}
.login-tabs{
  display:flex;
  background:var(--bg-soft);
  border-radius:.75rem;
  padding:.25rem;
  gap:.25rem;
  margin-bottom:1.25rem;
}
.login-tab{
  flex:1;
  text-align:center;
  padding:.55rem .5rem;
  border-radius:.55rem;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-soft);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  border:none;
  background:transparent;
}
.login-tab-active{
  background:var(--bg-card);
  color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* Mobile menu drawer / bottom sheet */
#mobile-menu {
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 639px) {
  #mobile-menu {
    transform: translateY(100%);
  }
  #mobile-menu.open {
    transform: translateY(0) !important;
  }
}
@media (min-width: 640px) {
  #mobile-menu {
    transform: translateX(-100%);
  }
  #mobile-menu.open {
    transform: translateX(0) !important;
  }
}

/* Fractional Utilities & Typography Fallbacks */
.p-0\.5 { padding: 0.125rem; }
.px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.p-1\.5 { padding: 0.375rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.p-2\.5 { padding: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.p-3\.5 { padding: 0.875rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }

.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }

.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }

.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }

.shadow-2xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03); }
.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ---------- Mobile Responsive Enhancements ---------- */
@media (max-width: 768px) {
  .product-card .quick-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .product-card .quick-actions .icon-btn {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }
  
  .dark .product-card .quick-actions .icon-btn {
    background: rgba(15,23,42,0.85);
  }

  .cat-mega-card {
    padding: 0.5rem;
  }

  span.inline-flex.items-center.h-9.sm\:h-11.w-\[185px\].sm\:w-\[226px\].shrink-0 {
    width: 65px;
}
.icon-btn {
    width: 30px;
    height: 30px;
}
}

/* ============================================
   CMS CONTENT & MODERN PAGE STYLES (Semantic HTML)
   ============================================ */
.cms-content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-soft);
}
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
  color: var(--text);
  font-weight: 800;
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  line-height: 1.35;
}
.cms-content h1:first-child,
.cms-content h2:first-child,
.cms-content h3:first-child {
  margin-top: 0;
}
.cms-content h2 {
  font-size: 1.45rem;
  position: relative;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--border);
}
.cms-content h2::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue));
  border-radius: 2px;
}
.cms-content h3 {
  font-size: 1.2rem;
}
.cms-content h4 {
  font-size: 1.05rem;
}
.cms-content p {
  margin-bottom: 1.35rem;
}
.cms-content strong,
.cms-content b {
  color: var(--text);
  font-weight: 700;
}
.cms-content a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.cms-content a:hover {
  text-decoration: underline;
}
.cms-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cms-content ul > li {
  position: relative;
  padding-left: 1.75rem;
}
.cms-content ul > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--brand-teal);
  font-weight: 800;
  font-size: 0.95rem;
}
.cms-content ol {
  counter-reset: cms-counter;
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cms-content ol > li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: cms-counter;
}
.cms-content ol > li::before {
  content: counter(cms-counter);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-indigo));
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-blue);
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.cms-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.cms-content th {
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  text-align: left;
  padding: 0.9rem 1.25rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.cms-content td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.925rem;
}
.cms-content tr:last-child td {
  border-bottom: none;
}
.cms-content tr:hover td {
  background: rgba(47, 143, 224, 0.04);
}
.cms-content hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2.5rem 0;
}

/* Page Navigation Sidebar Links */
.page-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: all 0.2s ease;
  text-decoration: none;
}
.page-nav-link:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.page-nav-link.active {
  background: linear-gradient(135deg, rgba(47, 143, 224, 0.12), rgba(91, 99, 224, 0.12));
  color: var(--brand-blue);
  font-weight: 700;
  border-left: 3px solid var(--brand-blue);
}