/* ===================================================================
   SNR MOTO GEAR — Sporty Theme
   Design layer: angular shapes, racing typography, speed accents
   Color layer:  fully driven by CSS variables (admin-configurable)
   Theme layer:  light mode default, dark-mode class overrides
   =================================================================== */

/* ===== CSS VARIABLE DEFAULTS (overridden by header.php inline :root) ===== */
:root{
  --c-primary:       #e8220a;
  --c-primary-dk:    #9a1507;
  --c-primary-lt:    #ff4d35;
  --c-primary-bg:    #fdf3f2;
  --c-primary-muted: #fce8e6;
  --c-primary-border:#f0b8b2;
  --c-dark:          #1a1a1a;
  --c-accent:        #ff7c00;
  --lm-surface:      #ffffff;
  --lm-footer:       #1a0a08;
  --dm-primary:      #ff4d35;
  --dm-bg:           #111111;
  --dm-surface:      #1a1a1a;
  --dm-text:         #f0f0f0;
}

/* ===== BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Rajdhani','Poppins','Segoe UI',sans-serif;
  background: var(--c-primary-bg);
  color: var(--c-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
@media(min-width:768px){ body{ padding-bottom:0; } }
body.adm-page { padding-bottom:0; }
body.adm-page .bottom-nav { display:none; }
body.adm-page nav { display:block; }
body.adm-page .nav-menu { display:flex; gap:1.5rem; list-style:none; }
body.adm-page .nav-menu a { color:var(--c-primary); font-weight:700; font-size:.9rem; letter-spacing:.5px; text-transform:uppercase; }
body.adm-page .header-content { width:100%; }
body.adm-page .adm-wrap { max-width:1200px; width:100%; }

a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ===== SPEED STRIPE — thin accent bar at page very top ===== */
body::before {
  content:'';
  display:block;
  height:3px;
  background: linear-gradient(90deg, var(--c-primary-dk) 0%, var(--c-primary) 40%, var(--c-accent,#ff7c00) 70%, var(--c-primary) 100%);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
}

/* ===== TOP INFO BAR ===== */
.topbar {
  background: var(--c-primary);  /* follows Light Mode → Accent / Primary Color */
  border-bottom: 1px solid rgba(0,0,0,.15);
  position: sticky;
  top: 3px; /* sit below the speed stripe */
  z-index: 101; /* above header so it stacks correctly */
  width: 100%;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 16px;
  gap: 12px;
}
@media(min-width:768px) { .topbar-inner { padding: 6px 24px; } }
@media(min-width:1200px) { .topbar-inner { padding: 6px 32px; } }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  font-weight: 600;
  font-family: 'Barlow Condensed','Rajdhani',sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: color .2s;
  white-space: nowrap;
}
.topbar-item i {
  font-size: .8rem;
  opacity: .8;
}
.topbar-item:hover { color: #fff; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  transition: color .2s, transform .2s;
}
.topbar-social:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* Hide topbar on very small screens to save space */
@media(max-width:400px) {
  .topbar-item span { display: none; }
  .topbar-item i    { font-size: .95rem; }
}

/* Dark mode topbar */
body.dark-mode .topbar {
  background: var(--dm-primary);
  border-bottom-color: rgba(0,0,0,.2);
}

/* Adjust header sticky position to sit below topbar */
.header {
  top: calc(3px + 37px); /* speed stripe (3px) + topbar height (~37px) */
}

/* ===== CONTAINER ===== */
.container { width:100%; max-width:480px; margin:0 auto; padding:0 16px; }
@media(min-width:768px)  { .container { max-width:900px; } }
@media(min-width:1200px) { .container { max-width:1200px; } }

/* ===================================================================
   HEADER
   =================================================================== */
.header {
  background: var(--lm-surface, #fff);
  padding: 0 16px;
  position: sticky;
  z-index: 100;
  border-bottom: 2px solid var(--c-primary-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: background .3s, border-color .3s;
}
.header-content {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 0;
}
@media(min-width:768px)  { .header-content { padding:10px 8px; } }
@media(min-width:1200px) { .header-content { padding:10px 16px; } }

/* Logo */
.logo a { display:flex; align-items:center; gap:10px; }
.logo img { max-height:44px; object-fit:contain; }
.logo h1 {
  font-size:1.4rem;
  font-weight:700;
  color: var(--c-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Rajdhani','Poppins',sans-serif;
}
.logo h1 span { color: var(--c-primary-dk); }

/* Nav */
.header-icons { display:flex; gap:6px; }
.header-icons a,
.header-icons button {
  width: 38px; height: 38px;
  border-radius: 4px;
  background: var(--c-primary-muted);
  border: 1px solid var(--c-primary-border);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  color: var(--c-primary);
  font-size: 1rem;
  transition: background .2s, color .2s, border-color .2s;
}
.header-icons a:hover,
.header-icons button:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.mobile-menu-btn { display:none; }
nav { display:none; }
@media(min-width:768px) {
  .mobile-menu-btn { display:none; }
  nav { display:block; }
  .nav-menu { display:flex; gap:2rem; list-style:none; }
  .nav-menu a {
    color: var(--c-dark);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: .4rem 0;
    border-bottom: 2px solid transparent;
    opacity: .7;
    transition: opacity .2s, border-color .2s, color .2s;
  }
  .nav-menu a:hover {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    opacity: 1;
  }
}

/* ===================================================================
   HERO SLIDER
   =================================================================== */
.hero-wrap { padding:12px 16px 0; }
@media(min-width:768px)  { .hero-wrap { padding:16px 24px 0; } }
@media(min-width:1200px) { .hero-wrap { padding:20px 32px 0; } }

.hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-primary-muted);
  height: 230px;
  width: 100%;
  border: 1px solid var(--c-primary-border);
}
@media(min-width:768px)  { .hero { height:370px; } }
@media(min-width:1200px) { .hero { height:430px; } }

.hero-slideshow { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slide.active { opacity:1; }

/* diagonal bottom-up overlay so text always readable */
.hero-content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 28px; z-index:2;
  background:linear-gradient(
    8deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.45) 45%,
    transparent 100%
  );
}
.hero-content h2 {
  font-size:1.7rem; font-weight:700; color:#fff;
  line-height:1.1; margin-bottom:6px;
  font-family:'Rajdhani','Poppins',sans-serif;
  letter-spacing:1px; text-transform:uppercase;
  transition: opacity .7s ease;
}
.hero-content h2 span { color: var(--c-accent, #ff7c00); }
@media(min-width:768px)  { .hero-content h2 { font-size:2.6rem; } }
@media(min-width:1200px) { .hero-content h2 { font-size:3.2rem; } }
.hero-text-fade { opacity:0 !important; }
.hero-content p {
  font-size:.85rem; color:rgba(255,255,255,.8);
  margin-bottom:16px; max-width:480px;
  transition: opacity .7s ease;
}
@media(min-width:768px) { .hero-content p { font-size:.95rem; } }

/* CTA button — angled motorsport shape */
.hero-btn {
  display: inline-flex; align-items:center; gap:8px;
  background: var(--c-primary);
  color: #fff;
  padding: 10px 26px;
  border-radius: 2px;
  font-weight: 700; font-size:.85rem;
  letter-spacing: 1px; text-transform:uppercase;
  width: fit-content;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  transition: background .2s, transform .1s, box-shadow .2s;
}
@media(min-width:768px) { .hero-btn { font-size:.95rem; padding:12px 36px; } }
.hero-btn:hover {
  background: var(--c-primary-lt);
  transform: scale(1.02);
}

/* Hero dots */
.hero-dots { display:flex; justify-content:center; gap:8px; padding:10px 0 4px; }
.hero-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--c-primary-border);
  border:none; cursor:pointer;
  transition: background .2s, width .25s, border-radius .25s;
}
.hero-dot.active {
  background: var(--c-primary);
  width: 28px;
  border-radius: 4px;
}

/* ===================================================================
   SECTION HEADER
   =================================================================== */
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 16px 14px; width:100%;
}
@media(min-width:768px)  { .section-header { padding:24px 24px 14px; } }
@media(min-width:1200px) { .section-header { padding:24px 32px 14px; } }

.section-header h2 {
  font-size:1.1rem; font-weight:700; color:var(--c-dark);
  text-transform:uppercase; letter-spacing:2px;
  font-family:'Rajdhani','Poppins',sans-serif;
  flex:1;
  display:flex; align-items:center; gap:10px;
}
/* red accent bar before each section title */
.section-header h2::before {
  content:'';
  display:inline-block;
  width:4px; height:18px;
  background: var(--c-primary);
  border-radius:2px; flex-shrink:0;
}
@media(min-width:768px) { .section-header h2 { font-size:1.25rem; } }

.view-all-link {
  font-size:.78rem; color:var(--c-primary);
  font-weight:700; display:flex; align-items:center; gap:4px;
  text-transform:uppercase; letter-spacing:1px;
  white-space:nowrap; flex-shrink:0;
  transition: color .2s;
}
.view-all-link:hover { color:var(--c-primary-lt); }

/* ===================================================================
   CATEGORIES
   =================================================================== */
.categories-scroll {
  display:flex; gap:14px; overflow-x:auto;
  padding:0 16px 12px; scrollbar-width:none; width:100%;
  justify-content:flex-start;
}
@media(min-width:768px) {
  .categories-scroll { flex-wrap:wrap; overflow-x:visible; padding:0 24px 12px; justify-content:center; }
}
@media(min-width:1200px) { .categories-scroll { padding:0 32px 12px; } }
.categories-scroll::-webkit-scrollbar { display:none; }

.cat-item {
  display:flex; flex-direction:column;
  align-items:center; gap:8px; flex-shrink:0; cursor:pointer;
}
/* square-ish tiles instead of plain circles — motorsport feel */
.cat-circle {
  width:78px; height:78px;
  border-radius:8px;
  background: var(--c-primary-muted);
  border: 2px solid var(--c-primary-border);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  overflow:hidden;
}
.cat-circle img { width:100%; height:100%; object-fit:cover; }
.cat-circle i { font-size:2rem; color:var(--c-primary); }
.cat-item:hover .cat-circle {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted), 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.cat-item span {
  font-size:.72rem; font-weight:700; color:var(--c-dark);
  text-align:center; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.5px;
  opacity:.7; transition: opacity .2s, color .2s;
}
.cat-item:hover span { opacity:1; color:var(--c-primary); }

/* ===================================================================
   FILTER PILLS
   =================================================================== */
.filter-pills {
  display:flex; gap:8px; overflow-x:auto;
  padding:8px 16px; scrollbar-width:none; width:100%;
}
@media(min-width:768px)  { .filter-pills { flex-wrap:wrap; overflow-x:visible; padding:8px 24px; } }
@media(min-width:1200px) { .filter-pills { padding:8px 32px; } }
.filter-pills::-webkit-scrollbar { display:none; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  border-radius:3px;
  background: var(--lm-surface, #fff);
  border: 1.5px solid var(--c-primary-border);
  font-size:.78rem; font-weight:700; color:var(--c-dark);
  white-space:nowrap; cursor:pointer;
  text-transform:uppercase; letter-spacing:.5px;
  /* subtle diagonal cut on trailing edge */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.pill:hover,
.pill.active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.pill i { font-size:.85rem; }

/* ===================================================================
   PRODUCTS GRID
   =================================================================== */
.products-section { padding:0 0 16px; }
.products-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; padding:0 16px; width:100%;
}
@media(min-width:768px)  { .products-grid { grid-template-columns:repeat(3,1fr); gap:16px; padding:0 24px; } }
@media(min-width:1200px) { .products-grid { grid-template-columns:repeat(4,1fr); padding:0 32px; } }

/* ===================================================================
   PRODUCT CARD
   =================================================================== */
.product-card {
  background: var(--lm-surface, #fff);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-primary-border);
  display:flex; flex-direction:column;
  position:relative;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
/* red top stripe appears on hover */
.product-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent,#ff7c00));
  opacity:0; transition:opacity .25s; z-index:1;
}
.product-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-3px);
  border-color: var(--c-primary-border);
}
.product-card:hover::before { opacity:1; }

.product-image {
  position:relative; aspect-ratio:1/1;
  overflow:hidden; background:var(--c-primary-muted);
}
.product-image img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.product-card:hover .product-image img { transform:scale(1.06); }
.product-image-link { display:block; height:100%; }

.badge-rating {
  position:absolute; top:8px; left:8px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border-radius:3px;
  padding:3px 8px;
  font-size:.72rem; font-weight:700;
  display:flex; align-items:center; gap:4px;
  color:var(--c-dark);
  border:1px solid rgba(0,0,0,.06);
}
.badge-rating i { color:#f5a623; }

.btn-wishlist {
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border-radius:4px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border:1px solid rgba(0,0,0,.06);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#999; font-size:.9rem; transition:color .2s;
}
.btn-wishlist:hover,
.btn-wishlist.active { color:var(--c-primary); }

.product-info {
  padding:10px 10px 12px;
  display:flex; flex-direction:column; flex:1;
}
.product-info h3 {
  font-size:.84rem; font-weight:700; color:var(--c-dark);
  line-height:1.3; margin-bottom:2px;
  font-family:'Rajdhani','Poppins',sans-serif;
}
.product-info h3 a:hover { color:var(--c-primary); }
.product-subtitle {
  font-size:.7rem; color:var(--c-dark); opacity:.55;
  margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.5px;
}
.price-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto;
}
.product-price {
  font-size:.92rem; font-weight:700; color:var(--c-primary);
  font-family:'Rajdhani',sans-serif;
}
.product-price-old {
  font-size:.72rem; color:var(--c-dark); opacity:.4;
  text-decoration:line-through; display:block;
}

/* cart button — angled like the hero CTA */
.btn-cart {
  width:32px; height:32px; border-radius:3px;
  background: var(--c-primary-muted);
  border: 1.5px solid var(--c-primary-border);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-primary); font-size:.9rem;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 5px 100%);
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink:0;
}
.btn-cart:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ===================================================================
   BOTTOM NAV (mobile)
   =================================================================== */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background: var(--lm-surface, #fff);
  border-top: 2px solid var(--c-primary-border);
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0 10px; z-index:200;
  box-shadow: 0 -2px 14px rgba(0,0,0,.1);
  transition: background .3s;
}
@media(min-width:768px) { .bottom-nav { display:none; } }
.bottom-nav a,
.bottom-nav button {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.62rem; font-weight:700; color:var(--c-dark); opacity:.45;
  background:none; border:none; cursor:pointer; padding:0 8px;
  text-transform:uppercase; letter-spacing:.5px;
  transition: color .2s, opacity .2s;
}
.bottom-nav a:hover,
.bottom-nav a.active,
.bottom-nav button:hover {
  color: var(--c-primary);
  opacity: 1;
}
.bottom-nav i { font-size:1.2rem; }
.bottom-nav .nav-fab {
  width:50px; height:50px;
  border-radius:4px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
  background: var(--c-primary);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-top:-16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  border:none; cursor:pointer;
}

/* ===================================================================
   FOOTER (desktop)
   =================================================================== */
.footer {
  background: var(--lm-footer, #1a0a08);
  padding:2.5rem 0 1rem;
  margin-top:auto; display:none;
}
@media(min-width:768px) { .footer { display:block; } }
.footer-content {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem; margin-bottom:1.5rem;
}
.footer-section h3 {
  color:#fff; margin-bottom:1rem;
  font-size:.85rem; font-weight:700;
  font-family:'Rajdhani',sans-serif;
  text-transform:uppercase; letter-spacing:2px;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-section p,
.footer-section li { color:rgba(255,255,255,.6); font-size:.88rem; line-height:2; }
.footer-section ul { list-style:none; }
.footer-section ul a { color:rgba(255,255,255,.6); transition:color .2s; }
.footer-section ul a:hover { color:#fff; }
.social-links { display:flex; gap:.7rem; margin-top:1rem; }
.social-links a {
  width:36px; height:36px; border-radius:4px;
  background: var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background .2s;
}
.social-links a:hover { background: var(--c-primary-lt); }
.footer-bottom {
  text-align:center; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4); font-size:.82rem;
}

/* ===================================================================
   SHOP PAGE
   =================================================================== */
.shop-filters {
  padding:16px; display:flex; gap:10px;
  flex-wrap:wrap; max-width:480px; margin:0 auto;
}
@media(min-width:768px)  { .shop-filters { max-width:900px; } }
@media(min-width:1200px) { .shop-filters { max-width:1200px; } }
.shop-filters select,
.shop-filters input {
  padding:9px 14px; border-radius:4px;
  border:1.5px solid var(--c-primary-border);
  background: var(--lm-surface, #fff);
  color:var(--c-dark); font-size:.85rem; outline:none;
  transition: border-color .2s;
}
.shop-filters input:focus,
.shop-filters select:focus { border-color:var(--c-primary); }
.shop-filters input { flex:1; }

/* ===================================================================
   PRODUCT DETAIL PAGE (.pd-*)
   =================================================================== */
.pd-wrap {
  display:grid; grid-template-columns:1fr;
  gap:24px; padding:16px;
  max-width:480px; margin:0 auto;
}
@media(min-width:768px)  { .pd-wrap { max-width:900px; grid-template-columns:1fr 1fr; gap:48px; padding:32px 24px; } }
@media(min-width:1200px) { .pd-wrap { max-width:1200px; } }

.pd-title {
  font-size:1.5rem; font-weight:700; color:var(--c-dark);
  margin-bottom:12px; text-transform:uppercase;
  letter-spacing:1px; font-family:'Rajdhani',sans-serif; line-height:1.2;
}
@media(min-width:768px) { .pd-title { font-size:2rem; } }

.pd-price-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pd-price {
  font-size:1.8rem; font-weight:700; color:var(--c-primary);
  font-family:'Rajdhani',sans-serif;
}
.pd-badge {
  padding:4px 14px; border-radius:3px;
  font-size:.75rem; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:1px;
}
.pd-badge-stock { background:var(--c-primary); }
.pd-badge-out   { background:#999; }

.pd-meta { margin-bottom:20px; }
.pd-meta p {
  font-size:.86rem; color:var(--c-dark); opacity:.7;
  margin-bottom:5px;
  padding-bottom:5px;
  border-bottom:1px solid var(--c-primary-border);
}
.pd-meta strong { color:var(--c-dark); opacity:1; }

.pd-desc-box {
  background: var(--c-primary-muted);
  border-left:3px solid var(--c-primary);
  border-radius:4px; padding:16px; margin-bottom:20px;
}
.pd-desc-box h3 {
  font-size:.85rem; font-weight:700; color:var(--c-primary);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:1px;
}
.pd-desc-box p { font-size:.88rem; color:var(--c-dark); opacity:.7; line-height:1.8; }

.pd-actions { display:flex; gap:10px; flex-wrap:wrap; }
.pd-btn-whatsapp {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#fff;
  padding:13px 20px; border-radius:3px;
  font-weight:700; font-size:.95rem; min-width:160px;
  text-transform:uppercase; letter-spacing:1px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  transition:background .2s;
}
.pd-btn-whatsapp:hover { background:#1da851; }
.pd-btn-back {
  display:flex; align-items:center; gap:6px;
  background: var(--c-primary-muted);
  color:var(--c-dark);
  padding:13px 20px; border-radius:3px;
  font-weight:600; font-size:.9rem;
  border:1.5px solid var(--c-primary-border);
  text-transform:uppercase; letter-spacing:.5px;
  transition:background .2s;
}
.pd-btn-back:hover { background:var(--c-primary-border); }

/* ===================================================================
   PRODUCT DETAIL — IMAGE SLIDESHOW
   =================================================================== */
.snr-slideshow { user-select:none; }
.snr-slide-track {
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:1/1; background:var(--c-primary-muted);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  border:1px solid var(--c-primary-border);
}
.snr-belt {
  display:flex; height:100%;
  transition:transform .55s cubic-bezier(.77,0,.175,1);
  will-change:transform;
}
.snr-slide { min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--c-primary-muted); }
.snr-slide img { width:100%; height:100%; object-fit:contain; }
.snr-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:rgba(255,255,255,.9); color:var(--c-dark);
  border:1px solid rgba(0,0,0,.1);
  width:36px; height:36px; border-radius:4px;
  font-size:.85rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.snr-arrow:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); transform:translateY(-50%) scale(1.06); }
.snr-prev { left:10px; }
.snr-next { right:10px; }
.snr-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:10;
}
.snr-dot {
  width:7px; height:7px; background:rgba(255,255,255,.35);
  cursor:pointer; transition:all .3s; border-radius:3px; border:none;
}
.snr-dot.active { background:var(--c-primary); width:22px; }
.snr-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.snr-thumb {
  width:70px; height:70px; object-fit:cover;
  border-radius:6px; cursor:pointer;
  border:2px solid var(--c-primary-border);
  opacity:.6; transition:opacity .2s, border-color .2s, transform .2s;
  flex-shrink:0; background:var(--c-primary-muted);
}
.snr-thumb:hover { opacity:.9; transform:translateY(-2px); }
.snr-thumb.active { border-color:var(--c-primary); opacity:1; transform:translateY(-2px); }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact-wrap {
  display:grid; grid-template-columns:1fr;
  gap:24px; padding:0 16px 24px;
  max-width:480px; margin:0 auto;
}
@media(min-width:768px)  { .contact-wrap { max-width:900px; grid-template-columns:1fr 1fr; gap:32px; } }
@media(min-width:1200px) { .contact-wrap { max-width:1200px; } }

/* column wrappers — no visual style, just flow */
.contact-info-col,
.contact-form-col { display:flex; flex-direction:column; gap:0; }

.contact-col-title {
  font-size:1.1rem; font-weight:700; color:var(--c-dark);
  margin-bottom:16px; text-transform:uppercase; letter-spacing:2px;
  font-family:'Rajdhani',sans-serif;
}
.contact-card {
  display:flex; align-items:flex-start; gap:14px;
  background:var(--lm-surface,#fff);
  border:1px solid var(--c-primary-border);
  border-radius:8px; padding:16px; margin-bottom:10px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  transition:border-color .2s, box-shadow .2s;
}
.contact-card:hover { border-color:var(--c-primary); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.contact-icon-wrap {
  width:44px; height:44px; border-radius:6px;
  background:var(--c-primary-muted);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-primary); font-size:1.1rem; flex-shrink:0;
}
.contact-card h4 { font-size:.9rem; font-weight:700; color:var(--c-dark); margin-bottom:2px; text-transform:uppercase; letter-spacing:.5px; }
.contact-card p  { font-size:.85rem; color:var(--c-dark); opacity:.65; }
.contact-wa-link { font-size:.85rem; font-weight:700; color:#25D366; }
.contact-why {
  background:var(--lm-surface,#fff);
  border:1px solid var(--c-primary-border);
  border-left:3px solid var(--c-primary);
  border-radius:6px; padding:16px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.contact-why h4 { font-size:.88rem; font-weight:700; color:var(--c-dark); margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
.contact-why ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.contact-why li { font-size:.85rem; color:var(--c-dark); opacity:.65; display:flex; align-items:center; gap:8px; }
.contact-why li i { color:var(--c-primary); font-size:.85rem; }

.contact-form-box {
  background:var(--lm-surface,#fff);
  border:1px solid var(--c-primary-border);
  border-radius:8px; padding:20px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.contact-form .form-group { margin-bottom:12px; }
.contact-form .form-group label {
  display:block; font-size:.78rem; font-weight:700; color:var(--c-dark);
  opacity:.6; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;
}
.contact-form .form-group input,
.contact-form .form-group textarea {
  width:100%; padding:10px 14px; border-radius:4px;
  border:1.5px solid var(--c-primary-border);
  background:var(--c-primary-muted);
  color:var(--c-dark); font-size:.9rem; outline:none; font-family:inherit;
  transition:border-color .2s;
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus { border-color:var(--c-primary); }
.contact-form .form-group textarea { min-height:110px; resize:vertical; }
.contact-form button {
  width:100%; padding:12px;
  background:var(--c-primary); color:#fff;
  border:none; border-radius:3px;
  font-weight:700; font-size:.95rem; cursor:pointer;
  text-transform:uppercase; letter-spacing:1px;
  font-family:'Rajdhani',sans-serif;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  transition:background .2s;
}
.contact-form button:hover { background:var(--c-primary-lt); }
.contact-note { font-size:.75rem; color:var(--c-dark); opacity:.4; text-align:center; margin-top:10px; }

/* ===================================================================
   ADMIN LOGIN
   =================================================================== */
.login-page {
  background:linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-dark) 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-container {
  background:var(--lm-surface,#fff);
  border-top:3px solid var(--c-primary);
  border-radius:8px; padding:40px; width:100%; max-width:400px;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
}
.login-header { text-align:center; margin-bottom:28px; }
.login-header h1 {
  color:var(--c-dark); margin-bottom:6px;
  font-size:1.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  font-family:'Rajdhani',sans-serif;
}
.login-header p { color:#888; font-size:.88rem; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; color:var(--c-dark); opacity:.6; margin-bottom:6px; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.form-group input {
  width:100%; padding:11px 14px; border-radius:4px;
  border:1.5px solid var(--c-primary-border);
  background:var(--c-primary-muted); color:var(--c-dark);
  font-size:.95rem; outline:none; transition:border-color .2s;
}
.form-group input:focus { border-color:var(--c-primary); }
.error-message {
  background:var(--c-primary-muted); border:1px solid var(--c-primary-border);
  color:var(--c-primary); padding:10px 14px; border-radius:4px;
  margin-bottom:18px; text-align:center; font-size:.88rem;
}
.login-btn {
  width:100%; padding:12px; background:var(--c-primary); color:#fff;
  border:none; border-radius:4px; font-size:1rem; font-weight:700;
  cursor:pointer; transition:background .2s;
  text-transform:uppercase; letter-spacing:1px; font-family:'Rajdhani',sans-serif;
}
.login-btn:hover { background:var(--c-primary-lt); }
.back-link { text-align:center; margin-top:18px; }
.back-link a { color:var(--c-primary); font-size:.88rem; font-weight:700; }

/* ===================================================================
   ADMIN PANEL SHARED (reuses CSS variables so color palette applies)
   =================================================================== */
.admin-section { min-height:80vh; padding:2rem 0; background:var(--c-primary-bg); }
.admin-card { background:var(--lm-surface,#fff); padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:1.5rem; }
.admin-table { width:100%; border-collapse:collapse; min-width:700px; }
.admin-table th { padding:.9rem 1rem; text-align:left; background:var(--c-primary); color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }
.admin-table td { padding:.85rem 1rem; border-bottom:1px solid var(--c-primary-muted); color:var(--c-dark); font-size:.85rem; vertical-align:middle; }
.admin-table tr:hover td { background:var(--c-primary-bg); }
.badge-active   { background:var(--c-primary-muted); color:var(--c-primary); padding:3px 10px; border-radius:3px; font-size:.75rem; font-weight:700; }
.badge-inactive { background:#f0f0f0; color:#888; padding:3px 10px; border-radius:3px; font-size:.75rem; font-weight:700; }
.badge-featured { background:var(--c-primary); color:#fff; padding:2px 8px; border-radius:3px; font-size:.75rem; margin-left:6px; }
.admin-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:4px; font-size:.8rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:opacity .2s; }
.admin-btn:hover { opacity:.85; }
.admin-btn-blue   { background:var(--c-primary); color:#fff; }
.admin-btn-edit   { background:#2196f3; color:#fff; }
.admin-btn-delete { background:#e53935; color:#fff; }
.admin-btn-view   { background:#555; color:#fff; }
.admin-alert-success { background:var(--c-primary-muted); border:1px solid var(--c-primary-border); color:var(--c-primary); padding:12px 16px; border-radius:6px; margin-bottom:1.2rem; font-size:.88rem; }
.admin-alert-error   { background:#fde8e8; border:1px solid #e53935; color:#c00; padding:12px 16px; border-radius:6px; margin-bottom:1.2rem; font-size:.88rem; }
.admin-form-label   { color:var(--c-dark); display:block; margin-bottom:6px; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; opacity:.7; }
.admin-form-input,.admin-form-select,.admin-form-textarea {
  width:100%; padding:10px 14px; border-radius:4px;
  border:1.5px solid var(--c-primary-border);
  background:var(--c-primary-bg); color:var(--c-dark);
  font-size:.9rem; outline:none; font-family:inherit; transition:border-color .2s;
}
.admin-form-input:focus,.admin-form-select:focus,.admin-form-textarea:focus { border-color:var(--c-primary); }
.admin-form-textarea { resize:vertical; }
.admin-stat-card { padding:1.5rem; border-radius:8px; text-align:center; color:#fff; }
.admin-stat-card h3 { font-size:2rem; margin-bottom:4px; }
.admin-stat-card p { font-size:.88rem; opacity:.8; }

/* ===================================================================
   ADMIN SHARED LAYOUT (.adm-*)
   =================================================================== */
.adm-wrap { padding:24px 16px; max-width:1200px; width:100%; margin:0 auto; }
.adm-title { font-size:1.4rem; font-weight:700; color:var(--c-dark); margin-bottom:20px; text-transform:uppercase; letter-spacing:1px; font-family:'Rajdhani',sans-serif; }
.adm-top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.adm-top-bar .adm-title { margin-bottom:0; }
.adm-card { background:var(--lm-surface,#fff); border-radius:8px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:20px; }
.adm-card-title { font-size:.95rem; font-weight:700; color:var(--c-dark); margin-bottom:16px; text-transform:uppercase; letter-spacing:1px; }
.adm-table-wrap { overflow-x:auto; }
.adm-table { width:100%; border-collapse:collapse; min-width:600px; }
.adm-table th { padding:10px 14px; text-align:left; background:var(--c-primary); color:#fff; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.adm-table td { padding:10px 14px; border-bottom:1px solid var(--c-primary-muted); color:var(--c-dark); font-size:.85rem; vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr:hover td { background:var(--c-primary-bg); }
.adm-price { color:var(--c-primary); font-weight:700; font-family:'Rajdhani',sans-serif; }
.adm-thumb { width:52px; height:52px; object-fit:cover; border-radius:4px; display:block; }
.adm-badge-featured { background:var(--c-primary); color:#fff; padding:2px 8px; border-radius:3px; font-size:.72rem; margin-left:6px; vertical-align:middle; }

.adm-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:4px; font-size:.8rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:opacity .2s; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; }
.adm-btn:hover { opacity:.82; }
.adm-btn-primary { background:var(--c-primary); color:#fff; }
.adm-btn-edit   { background:#2196f3; color:#fff; }
.adm-btn-delete { background:#e53935; color:#fff; }
.adm-btn-view   { background:var(--c-primary-muted); color:var(--c-dark); border:1.5px solid var(--c-primary-border); }
.adm-btn-group  { display:flex; gap:6px; flex-wrap:wrap; }

.adm-alert { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:.88rem; display:flex; align-items:center; gap:8px; }
.adm-alert-success { background:var(--c-primary-muted); border:1px solid var(--c-primary-border); color:var(--c-primary); }
.adm-alert-error   { background:#fde8e8; border:1px solid #e53935; color:#c00; }

.adm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.adm-stat {
  background:var(--c-primary);
  border-top:3px solid var(--c-primary-dk);
  color:#fff; border-radius:8px; padding:20px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.adm-stat i { font-size:1.8rem; opacity:.85; }
.adm-stat-num { font-size:2rem; font-weight:700; line-height:1; font-family:'Rajdhani',sans-serif; }
.adm-stat-lbl { font-size:.75rem; opacity:.8; text-transform:uppercase; letter-spacing:.5px; }

.adm-actions { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
.adm-action {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 12px; border-radius:8px;
  background:var(--c-primary-bg); color:var(--c-dark);
  font-size:.78rem; font-weight:700; text-align:center;
  border:1.5px solid var(--c-primary-border);
  text-transform:uppercase; letter-spacing:.5px;
  transition:all .2s;
}
.adm-action i { font-size:1.5rem; color:var(--c-primary); }
.adm-action:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.adm-action:hover i { color:#fff; }
.adm-action-danger { border-color:#fca5a5; }
.adm-action-danger i { color:#e53935; }
.adm-action-danger:hover { background:#e53935; border-color:#e53935; }

.adm-empty { text-align:center; padding:40px 20px; }
.adm-empty i { font-size:3rem; color:var(--c-primary-border); display:block; margin-bottom:12px; }
.adm-empty p { color:#888; margin-bottom:16px; }

.adm-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:16px; }
.adm-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.adm-field-check { justify-content:flex-end; }
.adm-label { font-size:.78rem; font-weight:700; color:var(--c-dark); opacity:.6; text-transform:uppercase; letter-spacing:.5px; }
.adm-input,.adm-select,.adm-textarea {
  width:100%; padding:10px 14px; border-radius:4px;
  border:1.5px solid var(--c-primary-border);
  background:var(--c-primary-bg); color:var(--c-dark);
  font-size:.9rem; outline:none; font-family:inherit; transition:border-color .2s;
}
.adm-input:focus,.adm-select:focus,.adm-textarea:focus { border-color:var(--c-primary); }
.adm-textarea { resize:vertical; min-height:100px; }
.adm-check { width:18px; height:18px; accent-color:var(--c-primary); }

/* ===================================================================
   UTILITIES
   =================================================================== */
.text-center { text-align:center; }
.mt-2 { margin-top:.5rem; }
.mt-4 { margin-top:1rem; }
.no-products { text-align:center; padding:40px 16px; color:#888; grid-column:1/-1; }

/* ===================================================================
   DARK MODE — overrides ONLY, light mode is the default
   --c-primary is remapped to --dm-primary so ALL buttons, accents,
   borders and icons that use var(--c-primary) automatically switch.
   =================================================================== */
body.dark-mode {
  background: var(--dm-bg);
  color: var(--dm-text);
  /* Remap ALL primary color slots to dark-mode values */
  --c-primary:        var(--dm-primary);
  --c-primary-lt:     var(--dm-primary);
  --c-primary-dk:     var(--dm-primary);
  --c-primary-bg:     var(--dm-bg);
  --c-primary-muted:  var(--dm-surface);
  --c-primary-border: rgba(255,255,255,.1);
  --c-dark:           var(--dm-text);
  --lm-surface:       var(--dm-surface);
  --lm-footer:        var(--dm-bg);
}

body.dark-mode .header {
  background:var(--dm-surface);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 2px 16px rgba(0,0,0,.4);
}
body.dark-mode .logo h1 { color:var(--dm-primary); }
body.dark-mode .logo h1 span { color:var(--dm-text); }
body.dark-mode .nav-menu a { color:rgba(255,255,255,.55); }
body.dark-mode .nav-menu a:hover { color:#fff; border-bottom-color:var(--dm-primary); }
body.dark-mode .header-icons a,
body.dark-mode .header-icons button { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-text); }
body.dark-mode .header-icons a:hover,
body.dark-mode .header-icons button:hover { background:var(--dm-primary); border-color:var(--dm-primary); color:#fff; }

body.dark-mode .hero-content {
  background:linear-gradient(8deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 45%, transparent 100%);
}
body.dark-mode .hero-content h2 { color:#fff; }
body.dark-mode .hero-content p  { color:rgba(255,255,255,.7); }
body.dark-mode .hero-btn { background:var(--dm-primary); }
body.dark-mode .hero-dot { background:rgba(255,255,255,.2); }
body.dark-mode .hero-dot.active { background:var(--dm-primary); }

body.dark-mode .section-header h2 { color:var(--dm-text); }
body.dark-mode .section-header h2::before { background:var(--dm-primary); }
body.dark-mode .view-all-link { color:var(--dm-primary); }

body.dark-mode .cat-circle { background:var(--dm-surface); border-color:rgba(255,255,255,.1); }
body.dark-mode .cat-circle i { color:var(--dm-primary); }
body.dark-mode .cat-item span { color:rgba(255,255,255,.5); }
body.dark-mode .cat-item:hover span { color:var(--dm-primary); }
body.dark-mode .cat-item:hover .cat-circle { border-color:var(--dm-primary); box-shadow:0 0 0 3px rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.3); }

body.dark-mode .pill { background:var(--dm-surface); border-color:rgba(255,255,255,.1); color:var(--dm-text); }
body.dark-mode .pill:hover,
body.dark-mode .pill.active { background:var(--dm-primary); border-color:var(--dm-primary); color:#fff; }

body.dark-mode .product-card { background:var(--dm-surface); border-color:rgba(255,255,255,.07); box-shadow:0 2px 8px rgba(0,0,0,.3); }
body.dark-mode .product-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.45); }
body.dark-mode .product-image { background:var(--dm-bg); }
body.dark-mode .badge-rating { background:rgba(0,0,0,.7); color:var(--dm-text); border-color:rgba(255,255,255,.08); }
body.dark-mode .btn-wishlist { background:rgba(0,0,0,.6); border-color:rgba(255,255,255,.08); color:#aaa; }
body.dark-mode .btn-wishlist:hover { color:var(--dm-primary); }
body.dark-mode .product-info h3 { color:var(--dm-text); }
body.dark-mode .product-subtitle { color:rgba(255,255,255,.35); }
body.dark-mode .product-price { color:var(--dm-primary); }
body.dark-mode .product-price-old { color:rgba(255,255,255,.3); }
body.dark-mode .btn-cart { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-primary); }
body.dark-mode .btn-cart:hover { background:var(--dm-primary); color:#fff; border-color:var(--dm-primary); }

body.dark-mode .bottom-nav { background:var(--dm-surface); border-top-color:rgba(255,255,255,.08); }
body.dark-mode .bottom-nav a,
body.dark-mode .bottom-nav button { color:var(--dm-text); }
body.dark-mode .bottom-nav a:hover,
body.dark-mode .bottom-nav a.active,
body.dark-mode .bottom-nav button:hover { color:var(--dm-primary); }

body.dark-mode .footer { background:var(--dm-bg); }
body.dark-mode .footer-section p,
body.dark-mode .footer-section li,
body.dark-mode .footer-section ul a { color:rgba(255,255,255,.45); }
body.dark-mode .footer-section ul a:hover { color:#fff; }
body.dark-mode .footer-bottom { color:rgba(255,255,255,.3); border-top-color:rgba(255,255,255,.08); }

body.dark-mode .shop-filters input,
body.dark-mode .shop-filters select { background:var(--dm-surface); border-color:rgba(255,255,255,.1); color:var(--dm-text); }

/* Product detail dark */
body.dark-mode .pd-title { color:var(--dm-text); }
body.dark-mode .pd-price { color:var(--dm-primary); }
body.dark-mode .pd-badge-stock { background:var(--dm-primary); }
body.dark-mode .pd-meta p { color:rgba(255,255,255,.55); border-bottom-color:rgba(255,255,255,.08); }
body.dark-mode .pd-meta strong { color:var(--dm-text); }
body.dark-mode .pd-desc-box { background:var(--dm-surface); border-left-color:var(--dm-primary); }
body.dark-mode .pd-desc-box h3 { color:var(--dm-primary); }
body.dark-mode .pd-desc-box p { color:rgba(255,255,255,.6); }
body.dark-mode .pd-btn-back { background:var(--dm-surface); color:var(--dm-text); border-color:rgba(255,255,255,.1); }
body.dark-mode .pd-btn-back:hover { background:var(--dm-bg); }

/* Slideshow dark */
body.dark-mode .snr-slide-track { background:var(--dm-surface); border-color:rgba(255,255,255,.08); }
body.dark-mode .snr-slide { background:var(--dm-surface); }
body.dark-mode .snr-thumb { background:var(--dm-surface); border-color:rgba(255,255,255,.1); }
body.dark-mode .snr-thumb.active { border-color:var(--dm-primary); }
body.dark-mode .snr-arrow { background:var(--dm-surface); color:var(--dm-text); border-color:rgba(255,255,255,.1); }
body.dark-mode .snr-arrow:hover { background:var(--dm-primary); border-color:var(--dm-primary); color:#fff; }
body.dark-mode .snr-dot { background:rgba(255,255,255,.2); }
body.dark-mode .snr-dot.active { background:var(--dm-primary); }

/* Contact dark */
body.dark-mode .contact-card { background:var(--dm-surface); border-color:rgba(255,255,255,.08); }
body.dark-mode .contact-card:hover { border-color:var(--dm-primary); }
body.dark-mode .contact-card h4 { color:var(--dm-text); }
body.dark-mode .contact-card p { color:rgba(255,255,255,.5); }
body.dark-mode .contact-icon-wrap { background:var(--dm-bg); color:var(--dm-primary); }
body.dark-mode .contact-col-title { color:var(--dm-text); }
body.dark-mode .contact-why { background:var(--dm-surface); border-color:rgba(255,255,255,.08); border-left-color:var(--dm-primary); }
body.dark-mode .contact-why h4 { color:var(--dm-text); }
body.dark-mode .contact-why li { color:rgba(255,255,255,.5); }
body.dark-mode .contact-why li i { color:var(--dm-primary); }
body.dark-mode .contact-form-box { background:var(--dm-surface); border-color:rgba(255,255,255,.08); }
body.dark-mode .contact-form .form-group label { color:rgba(255,255,255,.45); }
body.dark-mode .contact-form .form-group input,
body.dark-mode .contact-form .form-group textarea { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-text); }
body.dark-mode .contact-form .form-group input:focus,
body.dark-mode .contact-form .form-group textarea:focus { border-color:var(--dm-primary); }
body.dark-mode .contact-form button { background:var(--dm-primary); }
body.dark-mode .contact-note { color:rgba(255,255,255,.3); }

/* Admin dark */
body.dark-mode .admin-card { background:var(--dm-surface); }
body.dark-mode .adm-card { background:var(--dm-surface); }
body.dark-mode .adm-table td { color:var(--dm-text); border-bottom-color:rgba(255,255,255,.06); }
body.dark-mode .adm-table tr:hover td { background:var(--dm-bg); }
body.dark-mode .admin-table td { color:var(--dm-text); border-bottom-color:rgba(255,255,255,.06); }
body.dark-mode .admin-table tr:hover td { background:var(--dm-bg); }
body.dark-mode .adm-title { color:var(--dm-text); }
body.dark-mode .adm-card-title { color:var(--dm-text); }
body.dark-mode .adm-label { color:rgba(255,255,255,.5); }
body.dark-mode .adm-input,
body.dark-mode .adm-select,
body.dark-mode .adm-textarea { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-text); }
body.dark-mode .adm-input:focus,
body.dark-mode .adm-select:focus,
body.dark-mode .adm-textarea:focus { border-color:var(--dm-primary); }
body.dark-mode .adm-btn-view { background:var(--dm-bg); color:var(--dm-text); border-color:rgba(255,255,255,.1); }
body.dark-mode .adm-action { background:var(--dm-bg); color:var(--dm-text); border-color:rgba(255,255,255,.08); }
body.dark-mode .adm-action i { color:var(--dm-primary); }
body.dark-mode .adm-empty i { color:rgba(255,255,255,.15); }
body.dark-mode .badge-inactive { background:var(--dm-bg); color:#666; }
body.dark-mode .login-container { background:var(--dm-surface); }
body.dark-mode .form-group input { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-text); }
body.dark-mode .admin-form-input,
body.dark-mode .admin-form-select,
body.dark-mode .admin-form-textarea { background:var(--dm-bg); border-color:rgba(255,255,255,.1); color:var(--dm-text); }

/* ===================================================================
   CARD STAGGER ANIMATION — handled by scroll reveal (.reveal-child)
   =================================================================== */

/* ===================================================================
   PAGINATION
   =================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px 32px;
  flex-wrap: wrap;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1.5px solid var(--c-primary-border);
  background: var(--lm-surface, #fff);
  color: var(--c-dark);
  font-size: .85rem;
  font-weight: 700;
  font-family: 'Rajdhani', 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none;
}
.pg-btn:hover {
  background: var(--c-primary-muted);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.pg-btn.pg-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 6px 100%);
  cursor: default;
}
.pg-btn.pg-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.pg-prev, .pg-next {
  min-width: 38px;
}
.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 38px;
  color: var(--c-dark);
  opacity: .4;
  font-weight: 700;
  font-size: .9rem;
}

/* Result count label next to section header */
.shop-count {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-dark);
  opacity: .45;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}

/* Dark mode */
body.dark-mode .pg-btn {
  background: var(--dm-surface);
  border-color: rgba(255,255,255,.1);
  color: var(--dm-text);
}
body.dark-mode .pg-btn:hover {
  background: var(--dm-bg);
  border-color: var(--dm-primary);
  color: var(--dm-primary);
}
body.dark-mode .pg-btn.pg-active {
  background: var(--dm-primary);
  border-color: var(--dm-primary);
  color: #fff;
}
body.dark-mode .pg-ellipsis { color: var(--dm-text); }
body.dark-mode .shop-count  { color: var(--dm-text); }

/* ===================================================================
   SCROLL REVEAL ANIMATIONS
   Elements start invisible/offset; .revealed triggers the transition.
   =================================================================== */

/* ── Base reveal state (hidden) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}

/* Variant: slide in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}

/* Variant: slide in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}

/* Variant: scale up (for cards, badges) */
.reveal-scale {
  opacity: 0;
  transform: scale(.94) translateY(16px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}

/* ── Visible state ── */
.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* ── Stagger group: children start hidden ── */
.reveal-group .reveal-child {
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transition: opacity .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1);
}
.reveal-group .reveal-child.revealed {
  opacity: 1;
  transform: none;
}

/* ── Header slide-up on scroll down ── */
.header {
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              background .3s, border-color .3s;
}
.header.header-hidden {
  transform: translateY(-110%);
}

/* ── Reduced motion: show everything immediately ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-group .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .header { transition: none !important; }
}

/* ===================================================================
   BREADCRUMBS
   =================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 0;
  max-width: 1200px;
  margin: 0 auto;
  font-size: .78rem;
  font-family: 'Barlow Condensed','Rajdhani',sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
@media(min-width:768px)  { .breadcrumb { padding: 14px 24px 0; } }
@media(min-width:1200px) { .breadcrumb { padding: 14px 32px 0; } }

.breadcrumb a {
  color: var(--c-primary);
  opacity: .8;
  transition: opacity .2s;
}
.breadcrumb a:hover { opacity: 1; }
.breadcrumb-sep {
  color: var(--c-dark);
  opacity: .3;
  font-size: .65rem;
}
.breadcrumb-current {
  color: var(--c-dark);
  opacity: .55;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark-mode .breadcrumb a     { color: var(--dm-primary); }
body.dark-mode .breadcrumb-current { color: var(--dm-text); }

/* ===================================================================
   POLICY PAGES (delivery, returns, privacy, terms, about)
   =================================================================== */
.policy-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
@media(min-width:768px)  { .policy-wrap { padding: 32px 24px 64px; } }
@media(min-width:1200px) { .policy-wrap { padding: 40px 32px 80px; } }

.policy-title {
  font-family: 'Bebas Neue','Barlow Condensed',sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-dark);
  margin-bottom: 14px;
}
@media(min-width:768px) { .policy-title { font-size: 2.6rem; } }

.policy-intro {
  font-size: 1rem;
  color: var(--c-dark);
  opacity: .7;
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 640px;
}
.policy-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-primary-border);
}
.policy-section:last-of-type { border-bottom: none; }
.policy-section h2 {
  font-family: 'Barlow Condensed','Rajdhani',sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-primary);
  margin-bottom: 10px;
}
.policy-section p,
.policy-section li {
  font-size: .95rem;
  color: var(--c-dark);
  opacity: .75;
  line-height: 1.85;
}
.policy-section ul {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.policy-section a { color: var(--c-primary); font-weight: 600; }
.policy-section a:hover { text-decoration: underline; }
.policy-note {
  font-size: .78rem;
  color: var(--c-dark);
  opacity: .35;
  margin-top: 32px;
}
/* Dark mode */
body.dark-mode .policy-title   { color: var(--dm-text); }
body.dark-mode .policy-section h2 { color: var(--dm-primary); }
body.dark-mode .policy-section p,
body.dark-mode .policy-section li { color: var(--dm-text); }