/* ======================================================
   DESIGN TOKENS
====================================================== */
:root {
  --primary:     #05CFAB;
  --primary-dk:  #04b090;
  --secondary:   #2C365B;
  --secondary-lt:#3d4d7a;
  --dark:        #1a2035;
  --white:  #fff;
  --off:    #F7F8FA;
  --g50:    #FAFBFC;
  --g100:   #F0F2F5;
  --g150:   #E8ECF1;
  --g200:   #E2E6EC;
  --g300:   #C8CDD8;
  --g400:   #9AA3B2;
  --g500:   #6B7485;
  --g600:   #5A6478;
  --g800:   #2D3344;
  --danger: #ef4444;
  --heading:'Poppins',sans-serif;
  --body:   'Manrope',sans-serif;
  --hh:     68px;
  --max:    1260px;
  --px:     24px;
  --radius: 14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--white);color:var(--g800);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6;max-width:100vw}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
/* ======================================================
   PRODUCT CARD — MOBILE PRICE ROW FIX
   Add at the bottom of assets/css/index.css
   ====================================================== */

/* Base: ensure price-stack and actions don't fight for space */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.price-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.price-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cart-btn,
.wish-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── On mobile: stack price ABOVE actions ── */
@media (max-width: 860px) {
  .price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .price-stack {
    width: 100%;
  }

  .prod-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .cart-btn,
  .wish-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* ── Very small screens: slightly bigger tap targets ── */
@media (max-width: 480px) {
  .cart-btn,
  .wish-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}
/* =====================================================
   MOBILE RESPONSIVENESS FIXES
   Add these rules at the bottom of assets/css/index.css
   ===================================================== */

/* ── Product grid: proper column scaling ───────────── */
.prod-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Product card: prevent internal overflow ────────── */
.prod-card {
  min-width: 0;
}

.prod-body {
  min-width: 0;
}

/* Price row: let price shrink, keep buttons visible */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.price-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Actions row: always reserve space for both buttons */
.prod-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cart-btn,
.wish-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;   /* never shrink below tap target */
  flex-shrink: 0;
}

/* Product name: clip long names gracefully */
.prod-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* ── Testimonial cards: prevent overflow ────────────── */
.testi-card {
  min-width: 0;
  overflow: hidden;
}

.testi-footer {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.testi-name,
.testi-product {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge: never squash — push it to its own line if needed */
.testi-badge {
  flex-shrink: 0;
}

/* ── Trending card: clip long product names ─────────── */
.trend-info {
  min-width: 0;
  overflow: hidden;
}

.trend-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* trend cart button: always visible */
.trend-cart {
  flex-shrink: 0;
  width: 32px;
  min-width: 32px;
}

/* ── RESPONSIVE BREAKPOINTS ─────────────────────────── */

/* ── 1100px: 3 columns ──────────────────────────────── */
@media (max-width: 1100px) {
  .prod-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 860px: 2 columns ───────────────────────────────── */
@media (max-width: 860px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Testimonial grid: 2 → 1 at this size */
  .testi-grid {
    grid-template-columns: 1fr;
  }

  /* Trend grid 2 cols */
  .trending-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 560px: still 2 columns but tighter cards ───────── */
@media (max-width: 560px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Smaller card body padding on very small screens */
  .prod-body {
    padding: 10px 12px;
  }

  /* Scale down font sizes inside card so buttons still fit */
  .price-main {
    font-size: .875rem;
  }

  .prod-name {
    font-size: .82rem;
  }

  /* Wishlist + cart: keep 32px to save space but still tappable */
  .cart-btn,
  .wish-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 7px;
  }

  /* Testi footer: allow badge to wrap below if needed */
  .testi-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .testi-badge {
    margin-left: 0;
  }

  /* Trending: 1 column on small phones */
  .trending-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 420px: single-column product grid ──────────────── */
@media (max-width: 420px) {
  .prod-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Full-width card: bigger image, more breathing room */
  .prod-img {
    aspect-ratio: 16 / 9;
  }

  .price-main {
    font-size: .95rem;
  }

  .cart-btn,
  .wish-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}
  /* ═══════════════════════════════════════════════════════════════
   COOL ENTERPRISES — Industry-Grade Skeleton Loading System
   ═══════════════════════════════════════════════════════════════ */

/* ── Core shimmer animation ──────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes skel-wave {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}

/* ── Base skeleton element ───────────────────────────────────── */
.skel {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--skel-base, #e8eaed);
  isolation: isolate;
}

.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skel-shine, rgba(255,255,255,0.7)) 40%,
    var(--skel-shine, rgba(255,255,255,0.7)) 60%,
    transparent 100%
  );
  background-size: 600px 100%;
  animation: skel-wave 1.6s ease-in-out infinite;
  border-radius: inherit;
}

/* Dark mode skeleton */
@media (prefers-color-scheme: dark) {
  .skel {
    --skel-base:  #2a2d35;
    --skel-shine: rgba(255,255,255,0.06);
  }
}

/* Rounded variants */
.skel--circle  { border-radius: 50%; }
.skel--pill    { border-radius: 999px; }
.skel--sharp   { border-radius: 0; }

/* ── Page-level loading overlay ──────────────────────────────── */
/* Core #page-skeleton styles are in the inline <head> <style> block
   so they apply before any external CSS loads (critical path).
   Only non-critical scroll styles go here.                       */
#page-skeleton {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════
   HERO SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-hero {
  min-height: 500px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.skeleton-hero__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.skeleton-hero__content { display: flex; flex-direction: column; gap: 16px; }

.skeleton-hero__tag   { height: 28px; width: 120px; border-radius: 999px; }
.skeleton-hero__h1    { height: 52px; width: 90%; border-radius: 8px; }
.skeleton-hero__h1b   { height: 52px; width: 65%; border-radius: 8px; }
.skeleton-hero__desc  { height: 16px; width: 100%; border-radius: 4px; margin-top: 4px; }
.skeleton-hero__desc2 { height: 16px; width: 80%;  border-radius: 4px; }

.skeleton-hero__btns  { display: flex; gap: 12px; margin-top: 8px; }
.skeleton-hero__btn   { height: 44px; border-radius: 8px; }
.skeleton-hero__btn:first-child { width: 140px; }
.skeleton-hero__btn:last-child  { width: 120px; }

.skeleton-hero__specs { display: flex; gap: 20px; margin-top: 16px; }
.skeleton-hero__spec  { display: flex; flex-direction: column; gap: 6px; }
.skeleton-hero__spec-v { height: 20px; width: 56px; border-radius: 4px; }
.skeleton-hero__spec-l { height: 12px; width: 48px; border-radius: 4px; }

.skeleton-hero__img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-hero__img-bg {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #f0f1f3;
}

.skeleton-hero__img {
  width: 100%;
  max-width: 460px;
  height: 340px;
  border-radius: 16px;
  position: relative;
}

.skeleton-hero__badge {
  position: absolute;
  height: 52px;
  width: 180px;
  border-radius: 12px;
}

.skeleton-hero__badge--bl { bottom: 20px; left: 0; }
.skeleton-hero__badge--tr { top: 20px; right: 0; }

/* Hero nav dots */
.skeleton-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.skeleton-hero__dot {
  height: 8px;
  border-radius: 999px;
}

.skeleton-hero__dot:first-child { width: 24px; }
.skeleton-hero__dot:not(:first-child) { width: 8px; }

/* ═══════════════════════════════════════════════════════════════
   ACTIVITY TICKER SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-ticker {
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e8eaed);
  border-bottom: 1px solid var(--border, #e8eaed);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.skeleton-ticker__label { height: 20px; width: 100px; border-radius: 999px; flex-shrink: 0; }
.skeleton-ticker__items { display: flex; gap: 32px; flex: 1; overflow: hidden; }
.skeleton-ticker__item  { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.skeleton-ticker__dot   { height: 28px; width: 28px; border-radius: 50%; }
.skeleton-ticker__text  { height: 14px; width: 200px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   BRANDS BAR SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-brands {
  padding: 20px 0;
  background: var(--surface, #fff);
  overflow: hidden;
}

.skeleton-brands__track {
  display: flex;
  gap: 32px;
  padding: 0 24px;
  align-items: center;
}

.skeleton-brands__item {
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-section-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.skeleton-section-hd__left { display: flex; flex-direction: column; gap: 10px; }
.skeleton-section-hd__label { height: 14px; width: 80px; border-radius: 999px; }
.skeleton-section-hd__h2    { height: 32px; width: 240px; border-radius: 6px; }
.skeleton-section-hd__sub   { height: 14px; width: 320px; border-radius: 4px; }
.skeleton-section-hd__link  { height: 36px; width: 100px; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-cats {
  padding: 60px 0;
}

.skeleton-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 16px;
}

.skeleton-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: 16px;
  background: var(--skel-card-bg, #f5f6f8);
}

.skeleton-cat__icon { height: 52px; width: 52px; border-radius: 14px; }
.skeleton-cat__name { height: 14px; width: 70%;  border-radius: 4px; }
.skeleton-cat__count{ height: 11px; width: 50%;  border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.skeleton-prod-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #e8eaed);
}

.skeleton-prod-card__img   { height: 220px; border-radius: 0; }
.skeleton-prod-card__body  { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-prod-card__badge { height: 20px; width: 60px; border-radius: 999px; }
.skeleton-prod-card__name  { height: 16px; width: 90%; border-radius: 4px; }
.skeleton-prod-card__name2 { height: 16px; width: 65%; border-radius: 4px; }
.skeleton-prod-card__stars { height: 14px; width: 80px; border-radius: 4px; }
.skeleton-prod-card__price { height: 22px; width: 110px; border-radius: 4px; margin-top: 4px; }
.skeleton-prod-card__old   { height: 14px; width: 70px;  border-radius: 4px; }
.skeleton-prod-card__btns  { display: flex; gap: 8px; margin-top: 8px; }
.skeleton-prod-card__btn   { height: 38px; border-radius: 8px; flex: 1; }
.skeleton-prod-card__wish  { height: 38px; width: 38px; border-radius: 8px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT TABS SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.skeleton-tab {
  height: 36px;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════
   DEAL OF THE DAY SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-deal {
  padding: 64px 0;
  background: #f5f6f9;
}

.skeleton-deal__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.skeleton-deal__left  { display: flex; flex-direction: column; gap: 14px; }
.skeleton-deal__badge { height: 28px; width: 160px; border-radius: 999px; }
.skeleton-deal__h2    { height: 40px; width: 85%; border-radius: 8px; }
.skeleton-deal__h2b   { height: 40px; width: 60%; border-radius: 8px; }
.skeleton-deal__desc  { height: 14px; width: 100%; border-radius: 4px; }
.skeleton-deal__desc2 { height: 14px; width: 75%;  border-radius: 4px; }

.skeleton-deal__disc  { display: flex; gap: 16px; align-items: center; margin: 4px 0; }
.skeleton-deal__pct   { height: 48px; width: 80px; border-radius: 10px; }
.skeleton-deal__save  { display: flex; flex-direction: column; gap: 6px; }
.skeleton-deal__save-v { height: 18px; width: 120px; border-radius: 4px; }
.skeleton-deal__save-l { height: 13px; width: 90px;  border-radius: 4px; }

.skeleton-deal__countdown { display: flex; gap: 12px; align-items: center; margin: 4px 0; }
.skeleton-deal__cd-block  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.skeleton-deal__cd-num    { height: 44px; width: 56px; border-radius: 8px; }
.skeleton-deal__cd-lbl    { height: 11px; width: 36px; border-radius: 4px; }
.skeleton-deal__cd-sep    { height: 20px; width: 8px; border-radius: 4px; margin-top: -8px; }

.skeleton-deal__btns  { display: flex; gap: 12px; }
.skeleton-deal__btn   { height: 44px; width: 140px; border-radius: 8px; }
.skeleton-deal__btn2  { height: 44px; width: 120px; border-radius: 8px; }

.skeleton-deal__stock { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.skeleton-deal__stock-row { display: flex; justify-content: space-between; }
.skeleton-deal__stock-l   { height: 13px; width: 120px; border-radius: 4px; }
.skeleton-deal__stock-r   { height: 13px; width: 80px;  border-radius: 4px; }
.skeleton-deal__stock-bar { height: 8px; width: 100%; border-radius: 999px; }

.skeleton-deal__img   { height: 340px; border-radius: 16px; }

/* ═══════════════════════════════════════════════════════════════
   STATS SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-stats {
  padding: 48px 0;
}

.skeleton-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.skeleton-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e8eaed);
}

.skeleton-stat__icon { height: 48px; width: 48px; border-radius: 12px; }
.skeleton-stat__num  { height: 28px; width: 80px; border-radius: 6px; }
.skeleton-stat__lbl  { height: 13px; width: 90px; border-radius: 4px; }
.skeleton-stat__lbl2 { height: 13px; width: 70px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   TRENDING GRID SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-trending__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.skeleton-trend-card {
  background: var(--surface, #fff);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, #e8eaed);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.skeleton-trend-card__rank  { height: 20px; width: 28px; border-radius: 4px; }
.skeleton-trend-card__img   { height: 140px; border-radius: 10px; }
.skeleton-trend-card__brand { height: 12px; width: 60px; border-radius: 4px; }
.skeleton-trend-card__name  { height: 15px; width: 90%; border-radius: 4px; }
.skeleton-trend-card__price { height: 18px; width: 80px; border-radius: 4px; }
.skeleton-trend-card__rating{ height: 12px; width: 70px; border-radius: 4px; }
.skeleton-trend-card__btn   { position: absolute; top: 14px; right: 14px; height: 30px; width: 30px; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════
   PROMO BANNERS SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-promo__grid {
  display: grid;
  grid-template-columns: 1fr 0.45fr;
  gap: 20px;
}

.skeleton-promo-big {
  background: var(--surface, #fff);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--border, #e8eaed);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.skeleton-promo-big__lbl  { height: 14px; width: 100px; border-radius: 999px; }
.skeleton-promo-big__h2   { height: 38px; width: 75%; border-radius: 8px; }
.skeleton-promo-big__h2b  { height: 38px; width: 50%; border-radius: 8px; }
.skeleton-promo-big__desc { height: 14px; width: 100%; border-radius: 4px; }
.skeleton-promo-big__desc2{ height: 14px; width: 80%;  border-radius: 4px; }
.skeleton-promo-big__cd   { display: flex; gap: 8px; }
.skeleton-promo-big__cb   { height: 52px; width: 56px; border-radius: 10px; }
.skeleton-promo-big__btn  { height: 40px; width: 140px; border-radius: 8px; margin-top: 4px; }

.skeleton-promo-sm-col { display: flex; flex-direction: column; gap: 16px; }

.skeleton-promo-sm {
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e8eaed);
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-promo-sm__lbl  { height: 12px; width: 70px; border-radius: 999px; }
.skeleton-promo-sm__h3   { height: 22px; width: 80%;  border-radius: 6px; }
.skeleton-promo-sm__desc { height: 12px; width: 100%; border-radius: 4px; }
.skeleton-promo-sm__link { height: 28px; width: 90px;  border-radius: 6px; margin-top: 4px; }
/* ── Blog card fixes ── */
.blog-card {
    display: flex;
    flex-direction: column;
}
.blog-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-meta {
    margin-top: auto;
    padding-top: .75rem;
}
/* Non-featured (small) cards: cap image height */
.blog-card:not(.blog-lg) .blog-img {
    height: 180px;
    object-fit: cover;
    width: 100%;
}
/* Featured (large) card: taller image */
.blog-card.blog-lg .blog-img {
    height: 260px;
    object-fit: cover;
    width: 100%;
}
/* Prevent excerpt from overflowing */
.blog-exc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Ensure Read button never gets clipped */
.blog-meta {
    flex-wrap: wrap;
    gap: .5rem;
    overflow: visible;
}
/* ═══════════════════════════════════════════════════════════════
   FEATURES BAR SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-feat {
  padding: 32px 0;
  border-top: 1px solid var(--border, #e8eaed);
  border-bottom: 1px solid var(--border, #e8eaed);
  background: var(--surface, #fff);
}

.skeleton-feat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.skeleton-feat-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.skeleton-feat-item__icon { height: 44px; width: 44px; border-radius: 12px; flex-shrink: 0; }
.skeleton-feat-item__text { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.skeleton-feat-item__h4   { height: 15px; width: 80%; border-radius: 4px; }
.skeleton-feat-item__p    { height: 12px; width: 100%;border-radius: 4px; }
.skeleton-feat-item__p2   { height: 12px; width: 70%; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-testi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.skeleton-testi-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e8eaed);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-testi-card__top    { display: flex; justify-content: space-between; align-items: center; }
.skeleton-testi-card__stars  { height: 16px; width: 90px;  border-radius: 4px; }
.skeleton-testi-card__badge  { height: 20px; width: 70px;  border-radius: 999px; }
.skeleton-testi-card__title  { height: 18px; width: 75%;   border-radius: 4px; }
.skeleton-testi-card__body   { height: 14px; width: 100%;  border-radius: 4px; }
.skeleton-testi-card__body2  { height: 14px; width: 90%;   border-radius: 4px; }
.skeleton-testi-card__body3  { height: 14px; width: 70%;   border-radius: 4px; }
.skeleton-testi-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.skeleton-testi-card__av     { height: 42px; width: 42px; border-radius: 50%; flex-shrink: 0; }
.skeleton-testi-card__info   { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.skeleton-testi-card__name   { height: 14px; width: 120px; border-radius: 4px; }
.skeleton-testi-card__prod   { height: 12px; width: 90px;  border-radius: 4px; }
.skeleton-testi-card__date   { height: 20px; width: 60px;  border-radius: 999px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   BLOG SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-blog__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 20px;
}

.skeleton-blog-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #e8eaed);
}

.skeleton-blog-card__img   { width: 100%; }
.skeleton-blog-card__body  { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-blog-card__cat   { height: 20px; width: 70px;  border-radius: 999px; }
.skeleton-blog-card__h3    { height: 20px; width: 95%;   border-radius: 5px; }
.skeleton-blog-card__h3b   { height: 20px; width: 70%;   border-radius: 5px; }
.skeleton-blog-card__exc   { height: 14px; width: 100%;  border-radius: 4px; }
.skeleton-blog-card__exc2  { height: 14px; width: 80%;   border-radius: 4px; }
.skeleton-blog-card__meta  { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.skeleton-blog-card__auth  { display: flex; gap: 10px; align-items: center; }
.skeleton-blog-card__av    { height: 36px; width: 36px; border-radius: 50%; }
.skeleton-blog-card__auth-info { display: flex; flex-direction: column; gap: 5px; }
.skeleton-blog-card__auth-name { height: 12px; width: 90px;  border-radius: 4px; }
.skeleton-blog-card__auth-date { height: 11px; width: 70px;  border-radius: 4px; }
.skeleton-blog-card__link  { height: 28px; width: 60px; border-radius: 6px; }

.skeleton-blog-card--lg .skeleton-blog-card__img { height: 280px; }
.skeleton-blog-card:not(.skeleton-blog-card--lg) .skeleton-blog-card__img { height: 180px; }

/* ═══════════════════════════════════════════════════════════════
   RECENTLY VIEWED SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-rv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.skeleton-rv-card {
  background: var(--surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e8eaed);
}

.skeleton-rv-card__img  { height: 130px; border-radius: 0; }
.skeleton-rv-card__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.skeleton-rv-card__name { height: 13px; width: 90%; border-radius: 4px; }
.skeleton-rv-card__name2{ height: 13px; width: 65%; border-radius: 4px; }
.skeleton-rv-card__price{ height: 16px; width: 80px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   NEW ARRIVALS SWIPER SKELETON
   ═══════════════════════════════════════════════════════════════ */
.skeleton-new-arrivals {
  position: relative;
}

.skeleton-new-arrivals__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE PRODUCT GRID LOADING (tab switching)
   ═══════════════════════════════════════════════════════════════ */
.prod-grid--loading {
  position: relative;
  min-height: 300px;
  pointer-events: none;
}

.prod-grid--loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  z-index: 10;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

.prod-grid--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: 3px solid var(--primary, #05CFAB);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  z-index: 11;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Inline skeleton cards inside prod-grid ──────────────────── */
.prod-grid .skeleton-prod-card {
  min-height: 360px;
}

/* ═══════════════════════════════════════════════════════════════
   STAGGER ANIMATION DELAYS
   ═══════════════════════════════════════════════════════════════ */
.skeleton-prod-card:nth-child(1)  { animation-delay: 0s; }
.skeleton-prod-card:nth-child(2)  { animation-delay: 0.05s; }
.skeleton-prod-card:nth-child(3)  { animation-delay: 0.10s; }
.skeleton-prod-card:nth-child(4)  { animation-delay: 0.15s; }
.skeleton-prod-card:nth-child(5)  { animation-delay: 0.20s; }
.skeleton-prod-card:nth-child(6)  { animation-delay: 0.25s; }
.skeleton-prod-card:nth-child(7)  { animation-delay: 0.30s; }
.skeleton-prod-card:nth-child(8)  { animation-delay: 0.35s; }

.skeleton-testi-card:nth-child(1) { animation-delay: 0s; }
.skeleton-testi-card:nth-child(2) { animation-delay: 0.06s; }
.skeleton-testi-card:nth-child(3) { animation-delay: 0.12s; }
.skeleton-testi-card:nth-child(4) { animation-delay: 0.18s; }
.skeleton-testi-card:nth-child(5) { animation-delay: 0.24s; }
.skeleton-testi-card:nth-child(6) { animation-delay: 0.30s; }

/* ═══════════════════════════════════════════════════════════════
   WRAP / SECTION SKELETONS (full sections)
   ═══════════════════════════════════════════════════════════════ */
.skeleton-section {
  padding: 60px 0;
}

.skeleton-section--alt {
  background: var(--section-alt, #f5f6f9);
}

.skeleton-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .skeleton-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .skeleton-feat__grid  { grid-template-columns: repeat(2, 1fr); }
  .skeleton-promo__grid { grid-template-columns: 1fr; }
  .skeleton-promo-sm-col { flex-direction: row; }
  .skeleton-blog__grid  { grid-template-columns: 1fr 1fr; }
  .skeleton-blog-card--lg { grid-column: 1 / -1; }
  .skeleton-hero__wrap  { grid-template-columns: 1fr; }
  .skeleton-hero__img-wrap { display: none; }
  .skeleton-deal__inner { grid-template-columns: 1fr; }
  .skeleton-deal__img   { display: none; }
  .skeleton-new-arrivals__track { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .skeleton-stats__grid  { grid-template-columns: repeat(2, 1fr); }
  .skeleton-feat__grid   { grid-template-columns: 1fr 1fr; }
  .skeleton-blog__grid   { grid-template-columns: 1fr; }
  .skeleton-trending__grid { grid-template-columns: repeat(2, 1fr); }
  .skeleton-testi__grid  { grid-template-columns: 1fr; }
  .skeleton-new-arrivals__track { grid-template-columns: repeat(2, 1fr); }
  .skeleton-promo-sm-col { flex-direction: column; }
  .skeleton-section-hd__sub { width: 100%; }
  .skeleton-prod-grid    { grid-template-columns: repeat(2, 1fr); }
  .skeleton-rv__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .skeleton-stats__grid  { grid-template-columns: 1fr 1fr; }
  .skeleton-feat__grid   { grid-template-columns: 1fr; }
  .skeleton-trending__grid { grid-template-columns: 1fr 1fr; }
  .skeleton-new-arrivals__track { grid-template-columns: repeat(1, 1fr); }
  .skeleton-hero__h1   { height: 36px; }
  .skeleton-hero__h1b  { height: 36px; }
}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,button,select,textarea{font-family:inherit}

/* ── Layout ── */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.section{padding:72px 0}
.section--alt{background:var(--off)}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{font-family:var(--heading);line-height:1.15;letter-spacing:-.01em;color:var(--secondary)}
h1{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700}
h3{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600}
h4{font-size:1rem;font-weight:600}
p{font-family:var(--body);font-size:.9375rem;line-height:1.7;color:var(--g600)}
.label{display:inline-block;font-family:var(--heading);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.section-hd{margin-bottom:48px}
.section-hd--row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.section-hd--row h2{margin-bottom:0}
.section-hd p{margin-top:6px;max-width:560px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--heading);font-weight:600;font-size:.875rem;padding:12px 24px;border-radius:8px;transition:background .2s,color .2s,transform .15s;white-space:nowrap;border:2px solid transparent;cursor:pointer;letter-spacing:.01em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--secondary);color:var(--white);border-color:var(--secondary)}
.btn-primary:hover{background:var(--primary);border-color:var(--primary)}
.btn-outline{background:transparent;color:var(--secondary);border-color:var(--secondary)}
.btn-outline:hover{background:var(--secondary);color:var(--white)}
.btn-primary-sm{background:var(--primary);color:var(--white);border-color:var(--primary);padding:9px 18px;font-size:.8rem}
.btn-primary-sm:hover{background:var(--primary-dk);border-color:var(--primary-dk)}
.btn-ghost{color:var(--primary);font-family:var(--heading);font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:5px;border-bottom:1.5px solid var(--primary);padding-bottom:1px;transition:color .2s,border-color .2s}
.btn-ghost:hover{color:var(--secondary);border-color:var(--secondary)}
.icon-btn{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--g600);transition:color .2s,background .2s;position:relative;flex-shrink:0}
.icon-btn:hover{color:var(--secondary);background:var(--g100)}
.icon-btn .badge{position:absolute;top:4px;right:4px;background:var(--primary);color:var(--white);font-size:.6rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:transform .2s}

/* ── Announcement ── */
#ann-bar{background:var(--secondary);color:var(--white);text-align:center;padding:9px var(--px);font-family:var(--body);font-size:.8125rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;letter-spacing:.01em}
#ann-bar strong{color:var(--primary);font-weight:700}
#ann-bar .ann-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5);transition:color .2s;padding:4px}
#ann-bar .ann-close:hover{color:var(--white)}

/* ── Header ── */
#hdr{position:sticky;top:0;z-index:900;background:var(--white);border-bottom:1px solid var(--g200);height:var(--hh)}
.hdr-inner{display:flex;align-items:center;gap:20px;height:100%}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{height:34px;width:auto}
.logo-txt{font-family:var(--heading);font-weight:700;font-size:1.125rem;color:var(--secondary);letter-spacing:-.01em;white-space:nowrap}
.logo-txt span{color:var(--primary)}
.nav-desk{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;margin:0 20px}
.nav-desk a{font-family:var(--heading);font-weight:500;font-size:.8375rem;color:var(--g600);padding:7px 12px;border-radius:6px;transition:color .2s,background .2s;white-space:nowrap}
.nav-desk a:hover,.nav-desk a.active{color:var(--secondary);background:var(--g100)}
.hdr-search{flex:1;max-width:300px;position:relative}
.hdr-search input{width:100%;height:38px;background:var(--g100);border:1.5px solid var(--g200);border-radius:8px;padding:0 38px 0 14px;font-family:var(--body);font-size:.8375rem;color:var(--g800);outline:none;transition:border-color .2s}
.hdr-search input:focus{border-color:var(--primary)}
.hdr-search input::placeholder{color:var(--g400)}
.hdr-search .si{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1.5px solid var(--g200);border-radius:10px;box-shadow:0 8px 32px rgba(44,54,91,.12);max-height:360px;overflow-y:auto;display:none;z-index:999}
.search-results.show{display:block}
.sr-item{display:flex;align-items:center;gap:12px;padding:10px 14px;transition:background .15s}
.sr-item:hover{background:var(--g100)}
.sr-item img{width:42px;height:42px;object-fit:contain;border-radius:6px;background:var(--g100);flex-shrink:0}
.sr-item-name{font-family:var(--heading);font-weight:600;font-size:.825rem;color:var(--secondary)}
.sr-item-price{font-family:var(--body);font-size:.72rem;color:var(--primary);font-weight:600}
.sr-empty{padding:16px;font-size:.85rem;color:var(--g400);text-align:center}
.sr-all{display:block;padding:10px;text-align:center;font-family:var(--heading);font-size:.78rem;font-weight:600;color:var(--primary);border-top:1px solid var(--g200)}
.sr-all:hover{background:var(--g100)}
.hdr-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ham{display:none;width:40px;height:40px;border-radius:8px;align-items:center;justify-content:center;color:var(--g600);transition:background .2s}
.ham:hover{background:var(--g100)}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--secondary);color:var(--white);padding:12px 22px;border-radius:10px;font-family:var(--heading);font-weight:600;font-size:.85rem;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;pointer-events:none;display:flex;align-items:center;gap:10px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success .ti{color:var(--primary)}
.toast.error .ti{color:#f97316}

/* ── Mobile drawer ── */
.mob-nav{display:none;position:fixed;inset:0;z-index:9999}
.mob-nav.open{display:block}
.mob-overlay{position:absolute;inset:0;background:rgba(44,54,91,.5)}
.mob-drawer{position:absolute;top:0;left:0;bottom:0;width:min(300px,88vw);background:var(--white);padding:20px;display:flex;flex-direction:column;gap:4px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.mob-nav.open .mob-drawer{transform:translateX(0)}
.mob-hd{display:flex;align-items:center;justify-content:flex-end;padding-bottom:16px;border-bottom:1px solid var(--g200);margin-bottom:8px}
.mob-close{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--g600);transition:background .2s}
.mob-close:hover{background:var(--g100)}
.mob-search{position:relative;margin-bottom:12px}
.mob-search input{width:100%;height:40px;background:var(--g100);border:1.5px solid var(--g200);border-radius:8px;padding:0 38px 0 14px;font-family:var(--body);font-size:.85rem;outline:none;color:var(--g800)}
.mob-search .si{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none}
.mob-nav-links a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;font-family:var(--heading);font-weight:500;font-size:.875rem;color:var(--g600);transition:color .2s,background .2s}
.mob-nav-links a:hover,.mob-nav-links a.active{color:var(--secondary);background:var(--g100)}

/* ── Hero ── */
.hero{background:var(--off);overflow:hidden}
.hero-swiper{width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:72px 0;width:100%}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(5,207,171,.1);border:1px solid rgba(5,207,171,.25);color:var(--primary);font-family:var(--heading);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:20px}
.hero-tag .pulse{width:6px;height:6px;background:var(--primary);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.hero-title{font-family:var(--heading);font-weight:700;font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1.1;letter-spacing:-.025em;color:var(--secondary);margin-bottom:18px}
.hero-title .ac{color:var(--primary)}
.hero-desc{font-family:var(--body);font-size:1rem;color:var(--g600);line-height:1.7;max-width:480px;margin-bottom:32px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hero-specs{display:flex;align-items:center;flex-wrap:wrap}
.hero-spec{padding-right:24px;margin-right:24px;border-right:1px solid var(--g200)}
.hero-spec:last-child{border-right:none;padding-right:0;margin-right:0}
.hero-spec-v{font-family:var(--heading);font-weight:700;font-size:1.3rem;color:var(--secondary);line-height:1;margin-bottom:3px}
.hero-spec-l{font-family:var(--body);font-size:.72rem;color:var(--g400);font-weight:500}
.hero-img-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.hero-img-bg{position:absolute;inset:-16px;background:var(--g100);border-radius:20px}
.hero-img-wrap img{position:relative;z-index:1;width:100%;max-height:460px;object-fit:contain;border-radius:12px;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hero-img-wrap:hover img{transform:scale(1.025)}
.hero-badge{position:absolute;z-index:2;background:var(--white);border:1px solid var(--g200);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;animation:float 3.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-badge .bi{width:34px;height:34px;background:rgba(5,207,171,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary)}
.hero-badge .bt strong{display:block;font-family:var(--heading);font-weight:700;font-size:.825rem;color:var(--secondary)}
.hero-badge .bt span{font-family:var(--body);font-size:.72rem;color:var(--g400)}
.badge-bl{bottom:-18px;left:-18px}
.badge-tr{top:20px;right:-18px}
.swiper-button-next,.swiper-button-prev{color:var(--secondary)!important;width:42px!important;height:42px!important;background:var(--white);border:1px solid var(--g200);border-radius:50%;transition:background .2s,color .2s}
.swiper-button-next:hover,.swiper-button-prev:hover{background:var(--secondary)!important;color:var(--white)!important}
.swiper-button-next::after,.swiper-button-prev::after{font-size:13px!important;font-weight:700!important}
.swiper-pagination-bullet{background:var(--g300)!important;opacity:1!important}
.swiper-pagination-bullet-active{background:var(--primary)!important}

/* ── Activity Ticker ── */
.activity-ticker-wrap{background:var(--white);border-bottom:1.5px solid var(--g100);padding:10px 0;overflow:hidden}
.activity-ticker-inner{max-width:var(--max);margin:0 auto;padding:0 var(--px);display:flex;align-items:center;gap:16px}
.at-label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:.78rem;color:var(--g500);flex-shrink:0;font-family:var(--body)}
.at-label strong{color:var(--secondary)}
.at-pulse{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 1.5s infinite;display:inline-block;flex-shrink:0}
.at-track-wrap{overflow:hidden;flex:1;min-width:0}
.at-track{display:flex;gap:40px;animation:atScroll 32s linear infinite;width:max-content}
.at-track:hover{animation-play-state:paused}
.at-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--g600);white-space:nowrap;font-family:var(--body)}
.at-img{width:26px;height:26px;border-radius:6px;object-fit:cover;border:1px solid var(--g100);flex-shrink:0}
.at-item strong{color:var(--secondary)}
.at-item a{color:var(--secondary);font-weight:600}
.at-item a:hover{color:var(--primary)}
.at-item em{color:var(--g400);font-style:normal;font-size:.72rem;margin-left:2px}
@keyframes atScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Brands ── */
.brands-bar{border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);padding:28px 0;overflow:hidden}
.brands-track-wrap{overflow:hidden}
.brands-track{display:flex;align-items:center;gap:60px;animation:marquee 26s linear infinite;width:max-content}
.brands-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-item{opacity:.4;transition:opacity .2s;flex-shrink:0;display:flex;align-items:center}
.brand-item:hover{opacity:.9}
.brand-item img{height:26px;width:auto;object-fit:contain;filter:grayscale(1)}
.brand-item .brand-txt{font-family:var(--heading);font-weight:700;font-size:1.1rem;color:var(--g600);letter-spacing:-.02em;white-space:nowrap}

/* ── Categories ── */
.cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 12px;border:1.5px solid var(--g200);border-radius:var(--radius);background:var(--white);transition:border-color .2s,transform .2s;cursor:pointer}
.cat-card:hover{border-color:var(--primary);transform:translateY(-4px)}
.cat-card:hover .cat-ic{background:rgba(5,207,171,.1)}
.cat-card:hover .cat-ic svg{color:var(--primary)}
.cat-card:hover .cat-nm{color:var(--primary)}
.cat-ic{width:58px;height:58px;background:var(--g100);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:background .2s;overflow:hidden}
.cat-ic svg{width:26px;height:26px;color:var(--secondary);transition:color .2s}
.cat-ic img{width:100%;height:100%;object-fit:cover}
.cat-nm{font-family:var(--heading);font-weight:600;font-size:.825rem;color:var(--secondary);transition:color .2s;line-height:1.3}
.cat-ct{font-family:var(--body);font-size:.72rem;color:var(--g400)}

/* ── Product tabs ── */
.p-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:32px}
.p-tab{font-family:var(--heading);font-weight:600;font-size:.775rem;letter-spacing:.02em;padding:7px 16px;border-radius:100px;border:1.5px solid var(--g200);color:var(--g600);background:var(--white);transition:all .2s;cursor:pointer}
.p-tab:hover{border-color:var(--secondary);color:var(--secondary)}
.p-tab.active{background:var(--secondary);border-color:var(--secondary);color:var(--white)}

/* ── Product grid ── */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod-grid--loading{opacity:.5;pointer-events:none}

/* ── Product card ── */
.prod-card{background:var(--white);border:1.5px solid var(--g200);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s}
.prod-card:hover{border-color:var(--primary);transform:translateY(-5px)}
.prod-img{position:relative;background:var(--g100);aspect-ratio:4/3;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .4s}
.prod-card:hover .prod-img img{transform:scale(1.04)}
.prod-badge{position:absolute;top:10px;left:10px;font-family:var(--heading);font-weight:700;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.b-new{background:var(--primary);color:var(--white)}
.b-sale{background:var(--secondary);color:var(--white)}
.b-hot{background:#f97316;color:var(--white)}
.b-oos{background:var(--g400);color:var(--white)}
.qadd{position:absolute;bottom:0;left:0;right:0;background:var(--secondary);color:var(--white);font-family:var(--heading);font-weight:600;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:11px;text-align:center;transform:translateY(100%);transition:transform .22s;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.prod-card:hover .qadd{transform:translateY(0)}
.qadd:hover{background:var(--primary)}
.prod-body{padding:14px 16px}
.prod-brand{font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g400);margin-bottom:4px}
.prod-name{font-family:var(--heading);font-weight:600;font-size:.9rem;color:var(--secondary);margin-bottom:8px;line-height:1.35}
.prod-name a{color:inherit}
.prod-card:hover .prod-name a{color:var(--primary)}
.stars{display:flex;gap:2px;color:var(--primary)}
.stars svg{width:11px;height:11px;fill:currentColor;flex-shrink:0}
.stars svg.emp{color:var(--g200)}
.rat-row{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.rat-ct{font-family:var(--body);font-size:.72rem;color:var(--g400)}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price-main{font-family:var(--heading);font-weight:700;font-size:1rem;color:var(--secondary)}
.price-old{font-family:var(--body);font-size:.75rem;color:var(--g400);text-decoration:line-through;margin-top:1px}
.price-sale{color:var(--primary)}
.cart-btn{width:34px;height:34px;background:var(--g100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--secondary);transition:background .2s,color .2s;flex-shrink:0}
.cart-btn:hover{background:var(--primary);color:var(--white)}
.prod-actions{display:flex;align-items:center;gap:6px}
.wish-btn{width:34px;height:34px;background:var(--g100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--secondary);transition:background .2s,color .2s;flex-shrink:0}
.wish-btn:hover,.wish-btn.active{background:rgba(239,68,68,.1);color:#ef4444}
.wish-btn.active svg{fill:#ef4444;stroke:#ef4444}

/* ── Deal of the Day ── */
.deal-section{background:linear-gradient(135deg,var(--secondary) 0%,#1e2845 100%);padding:72px 0;position:relative;overflow:hidden}
.deal-section::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:rgba(5,207,171,.06);border-radius:50%;pointer-events:none}
.deal-section::after{content:'';position:absolute;bottom:-80px;left:-60px;width:300px;height:300px;background:rgba(255,255,255,.03);border-radius:50%;pointer-events:none}
.deal-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.deal-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(5,207,171,.15);border:1px solid rgba(5,207,171,.3);color:var(--primary);font-family:var(--heading);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:16px}
.deal-fire{font-size:1rem}
.deal-h{font-family:var(--heading);font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);color:var(--white);line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.deal-h .ac{color:var(--primary)}
.deal-p{font-family:var(--body);font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.65;margin-bottom:20px;max-width:380px}
.deal-disc{display:inline-flex;align-items:center;gap:12px;background:rgba(5,207,171,.12);border:1px solid rgba(5,207,171,.25);padding:10px 18px;border-radius:10px;margin-bottom:24px}
.deal-disc-pct{font-family:var(--heading);font-weight:800;font-size:2rem;color:var(--primary);line-height:1}
.deal-disc-info strong{display:block;font-family:var(--heading);font-weight:700;font-size:.9rem;color:var(--white)}
.deal-disc-info span{font-family:var(--body);font-size:.75rem;color:rgba(255,255,255,.5)}
.deal-countdown{display:flex;align-items:center;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.deal-cd-label{font-family:var(--body);font-size:.8rem;color:rgba(255,255,255,.5);margin-right:4px}
.deal-cblock{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 14px;text-align:center;min-width:56px}
.deal-cn{font-family:var(--heading);font-weight:700;font-size:1.5rem;color:var(--white);line-height:1}
.deal-cl{font-family:var(--body);font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.deal-csep{font-family:var(--heading);font-weight:700;font-size:1.2rem;color:rgba(255,255,255,.2);margin-bottom:4px}
.deal-cart-btn{width:auto;padding:0 20px;height:46px;border-radius:8px;font-family:var(--heading);font-weight:600;font-size:.85rem;color:var(--white);background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.deal-cart-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.deal-img-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.deal-img-glow{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(5,207,171,.2) 0%,transparent 70%);border-radius:50%}
.deal-img-wrap img{position:relative;z-index:1;width:100%;max-height:380px;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));transition:transform .5s}
.deal-img-wrap:hover img{transform:scale(1.04) translateY(-6px)}
.deal-stock-bar{margin-top:20px;max-width:360px}
.deal-stock-label{display:flex;justify-content:space-between;font-family:var(--body);font-size:.75rem;color:rgba(255,255,255,.5);margin-bottom:6px}
.deal-stock-label strong{color:var(--primary)}
.deal-progress{height:6px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden}
.deal-progress-fill{height:100%;background:var(--primary);border-radius:100px;transition:width 1s}

/* ── Stats ── */
.stats-section{background:var(--secondary);padding:64px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{text-align:center;padding:32px 24px;border-right:1px solid rgba(255,255,255,.08)}
.stat-item:last-child{border-right:none}
.stat-ic{width:52px;height:52px;background:rgba(5,207,171,.12);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--primary);margin:0 auto 14px}
.stat-ic svg{width:22px;height:22px}
.stat-num{font-family:var(--heading);font-weight:800;font-size:clamp(1.75rem,3vw,2.5rem);color:var(--white);line-height:1;margin-bottom:6px}
.stat-num .ac{color:var(--primary)}
.stat-lbl{font-family:var(--body);font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.4}

/* ── New Arrivals ── */
.new-arrivals-section{padding:72px 0;overflow:hidden}
.new-swiper-wrapper{position:relative}
.new-swiper-wrapper .swiper-button-next,
.new-swiper-wrapper .swiper-button-prev{color:var(--secondary)!important;width:44px!important;height:44px!important;background:var(--white);border:1.5px solid var(--g200);border-radius:50%;box-shadow:0 2px 12px rgba(44,54,91,.12);transition:background .2s,color .2s,border-color .2s;top:50%;margin-top:0;transform:translateY(-50%)}
.new-swiper-wrapper .swiper-button-next{right:-4px}
.new-swiper-wrapper .swiper-button-prev{left:-4px}
.new-swiper-wrapper .swiper-button-next:hover,
.new-swiper-wrapper .swiper-button-prev:hover{background:var(--secondary)!important;color:var(--white)!important;border-color:var(--secondary)!important}
.new-swiper-wrapper .swiper-button-next::after,
.new-swiper-wrapper .swiper-button-prev::after{font-size:14px!important;font-weight:800!important}
.new-swiper{padding:8px 4px 52px!important;overflow:visible!important;clip-path:inset(-20px 0px -60px 0px)}
.new-swiper .swiper-slide{height:auto}
.new-swiper .swiper-pagination{bottom:0!important}
.new-swiper .swiper-pagination-bullet{background:var(--g300)!important;opacity:1!important;width:8px;height:8px}
.new-swiper .swiper-pagination-bullet-active{background:var(--primary)!important;width:24px;border-radius:4px}

/* ── Trending Now ── */
.trending-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trend-card{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--g200);border-radius:14px;text-decoration:none;background:var(--white);transition:border-color .2s,box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.trend-card:hover{border-color:var(--primary);box-shadow:0 6px 24px rgba(5,207,171,.12);transform:translateY(-2px)}
.trend-rank{font-size:1.5rem;font-weight:800;color:var(--g150);font-family:var(--heading);line-height:1;min-width:32px;text-align:center;flex-shrink:0}
.trend-card:nth-child(1) .trend-rank,
.trend-card:nth-child(2) .trend-rank,
.trend-card:nth-child(3) .trend-rank{color:var(--primary)}
.trend-img{width:58px;height:58px;border-radius:10px;overflow:hidden;flex-shrink:0;position:relative;background:var(--g100)}
.trend-img img{width:100%;height:100%;object-fit:cover}
.trend-badge{position:absolute;top:3px;right:3px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:4px}
.trend-info{flex:1;min-width:0}
.trend-brand{font-size:.68rem;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.trend-name{font-size:.82rem;font-weight:600;color:var(--secondary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-price{font-size:.88rem;font-weight:700;color:var(--secondary);margin-top:3px;font-family:var(--heading)}
.trend-rating{display:flex;align-items:center;gap:3px;font-size:.7rem;color:var(--g500);margin-top:2px}
.trend-rating span{color:var(--g400)}
.trend-cart-btn{width:32px;height:32px;border-radius:8px;background:var(--g100);border:1.5px solid var(--g200);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--secondary);transition:background .2s,border-color .2s,color .2s}
.trend-cart-btn:hover{background:var(--primary);border-color:var(--primary);color:var(--white)}

/* ── Promo banners ── */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.promo-big{background:var(--secondary);border-radius:18px;overflow:hidden;padding:44px;position:relative;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.promo-deco{position:absolute;top:-50px;right:-50px;width:220px;height:220px;border:2px solid rgba(255,255,255,.06);border-radius:50%;pointer-events:none}
.promo-deco2{position:absolute;bottom:-60px;left:-30px;width:170px;height:170px;border:2px solid rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.promo-lbl{display:inline-block;background:rgba(5,207,171,.15);border:1px solid rgba(5,207,171,.3);color:var(--primary);font-family:var(--heading);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:14px}
.promo-h{font-family:var(--heading);font-weight:700;font-size:clamp(1.35rem,2.5vw,1.9rem);color:var(--white);line-height:1.2;letter-spacing:-.015em;margin-bottom:10px}
.promo-h .ac{color:var(--primary)}
.promo-p{font-family:var(--body);font-size:.875rem;color:rgba(255,255,255,.6);line-height:1.65;max-width:340px;margin-bottom:24px}
.cdown{display:flex;align-items:center;gap:3px;margin-bottom:28px;flex-wrap:wrap}
.cblock{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 14px;text-align:center;min-width:52px}
.cn{font-family:var(--heading);font-weight:700;font-size:1.4rem;color:var(--primary);line-height:1}
.cl{font-family:var(--body);font-size:.62rem;color:rgba(255,255,255,.45);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.csep{font-family:var(--heading);font-weight:700;font-size:1.1rem;color:rgba(255,255,255,.25);margin-top:-6px}
.promo-img{position:absolute;bottom:0;right:0;width:42%;height:100%;object-fit:cover;object-position:left top}
.promo-sm-col{display:flex;flex-direction:column;gap:20px}
.promo-sm{background:var(--g100);border:1.5px solid var(--g200);border-radius:18px;padding:28px;position:relative;overflow:hidden;flex:1;transition:border-color .2s,transform .2s}
.promo-sm:hover{border-color:var(--primary);transform:translateY(-3px)}
.promo-sm-lbl{display:inline-block;background:rgba(44,54,91,.08);border:1px solid rgba(44,54,91,.15);color:var(--secondary);font-family:var(--heading);font-weight:600;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:12px}
.promo-sm h3{font-family:var(--heading);font-weight:700;font-size:1.125rem;color:var(--secondary);line-height:1.25;margin-bottom:7px}
.promo-sm p{font-family:var(--body);font-size:.8375rem;color:var(--g600);margin-bottom:14px;max-width:220px}

/* ── Features bar ── */
.feat-bar{border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feat-item{display:flex;align-items:center;gap:14px;padding:32px 28px;border-right:1px solid var(--g200)}
.feat-item:last-child{border-right:none}
.feat-ic{width:46px;height:46px;background:rgba(5,207,171,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.feat-ic svg{width:20px;height:20px}
.feat-item h4{font-family:var(--heading);font-weight:600;font-size:.875rem;color:var(--secondary);margin-bottom:3px}
.feat-item p{font-family:var(--body);font-size:.775rem;color:var(--g400);line-height:1.5;margin:0}

/* ── Trust Bar ── */
.trust-bar{background:var(--g50);border-top:1.5px solid var(--g100);border-bottom:1.5px solid var(--g100);padding:28px 0}
.trust-grid{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.trust-divider{width:1.5px;height:48px;background:var(--g200);flex-shrink:0}
.trust-block{flex:1;min-width:180px}
.trust-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--g400);margin-bottom:8px;font-family:var(--heading)}
.trust-logos{display:flex;flex-wrap:wrap;gap:6px}
.trust-logo{padding:4px 10px;border:1.5px solid var(--g200);border-radius:6px;font-size:.72rem;font-weight:700;color:var(--g600);background:var(--white);font-family:var(--heading)}
.trust-badges{display:flex;flex-wrap:wrap;gap:10px}
.trust-badge-item{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--g600);font-family:var(--heading)}
.trust-badge-item svg{color:var(--primary);flex-shrink:0}
.trust-coverage{display:flex;flex-direction:column;gap:5px}
.trust-cov-item{font-size:.8rem;color:var(--g600);font-family:var(--body)}
.trust-cov-item strong{color:var(--secondary)}

/* ── Testimonials ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:var(--white);border:1.5px solid var(--g200);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s;display:flex;flex-direction:column;gap:14px}
.testi-card:hover{border-color:var(--primary);transform:translateY(-4px)}
.testi-top{display:flex;align-items:center;justify-content:space-between}
.testi-stars{display:flex;gap:3px;color:var(--primary)}
.testi-stars svg{width:13px;height:13px;fill:currentColor}
.testi-verified{font-family:var(--body);font-size:.68rem;color:var(--primary);font-weight:600;display:flex;align-items:center;gap:4px}
.testi-title{font-family:var(--heading);font-weight:600;font-size:.9rem;color:var(--secondary);line-height:1.35}
.testi-content{font-family:var(--body);font-size:.85rem;color:var(--g600);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.testi-footer{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--g100)}
.testi-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--g200);flex-shrink:0}
.testi-av img{width:100%;height:100%;object-fit:cover}
.testi-name{font-family:var(--heading);font-weight:600;font-size:.825rem;color:var(--secondary)}
.testi-product{font-family:var(--body);font-size:.72rem;color:var(--g400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testi-badge{margin-left:auto;background:var(--g100);border-radius:6px;padding:3px 8px;font-family:var(--heading);font-size:.68rem;font-weight:600;color:var(--g600);white-space:nowrap}

/* ── Loyalty CTA ── */
.loyalty-section{background:var(--white);padding:72px 0;border-top:1.5px solid var(--g100)}
.loyalty-inner{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
.loyalty-text h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;color:var(--secondary);margin:8px 0 12px;font-family:var(--heading)}
.loyalty-text p{color:var(--g500);font-size:.9rem;line-height:1.65;max-width:480px}
.loyalty-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:20px}
.lp-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;color:var(--g600);font-family:var(--body)}
.lp-item svg{color:var(--primary);flex-shrink:0}
.loyalty-visual{display:flex;justify-content:center;align-items:center}
/* The mock card has a dark bg — all text inside must be explicitly white */
.loyalty-card-mock{
  width:100%;
  max-width:320px;
  background:linear-gradient(135deg,var(--secondary) 0%,#1e2a5e 100%);
  border-radius:20px;
  padding:28px;
  color:#ffffff;
  box-shadow:0 24px 56px rgba(44,54,91,.22);
}
.lcm-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.lcm-avatar{width:50px;height:50px;border-radius:50%;background:rgba(5,207,171,.18);border:2px solid rgba(5,207,171,.4);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.lcm-name{font-size:1rem;font-weight:700;color:#ffffff;font-family:var(--heading)}
.lcm-since{font-size:.73rem;color:rgba(255,255,255,.55);margin-top:3px;font-family:var(--body)}
.lcm-perks{display:flex;flex-direction:column;gap:10px}
.lcm-perk-row{display:flex;align-items:center;gap:10px;font-size:.83rem;color:rgba(255,255,255,.9);padding:11px 14px;background:rgba(255,255,255,.08);border-radius:10px;font-family:var(--body)}

/* ── Newsletter Section ── */
.nl-section{background:var(--secondary);padding:72px 0;position:relative;overflow:hidden}
.nl-section::before{content:'';position:absolute;top:-80px;right:-80px;width:380px;height:380px;border:2px solid rgba(255,255,255,.04);border-radius:50%}
.nl-section::after{content:'';position:absolute;bottom:-100px;left:-60px;width:280px;height:280px;border:2px solid rgba(255,255,255,.04);border-radius:50%}
.nl-inner{max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:1}
.nl-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(5,207,171,.15);border:1px solid rgba(5,207,171,.3);color:var(--primary);font-family:var(--heading);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:18px}
.nl-inner h2{color:var(--white);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px}
.nl-inner h2 .ac{color:var(--primary)}
.nl-inner p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:28px;max-width:440px;margin-left:auto;margin-right:auto}
.nl-form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.nl-form input{flex:1;height:52px;line-height:52px;padding:0 18px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);border-radius:9px;font-family:var(--body);font-size:.9rem;color:var(--white);outline:none;transition:border-color .2s;min-width:0;box-sizing:border-box}
.nl-form input::placeholder{color:rgba(255,255,255,.45)}
.nl-form input:focus{border-color:var(--primary);background:rgba(255,255,255,.15)}
.nl-form button{height:52px;padding:0 28px;background:var(--primary);color:var(--white);font-family:var(--heading);font-weight:600;font-size:.9rem;border-radius:9px;white-space:nowrap;cursor:pointer;border:none;transition:background .2s;flex-shrink:0;display:flex;align-items:center}
.nl-form button:hover{background:var(--primary-dk)}
.nl-note{font-family:var(--body);font-size:.72rem;color:rgba(255,255,255,.35);margin-top:12px}

/* ── Recently Viewed ── */
.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rv-card{border:1.5px solid var(--g200);border-radius:12px;overflow:hidden;text-decoration:none;background:var(--white);transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.rv-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(5,207,171,.1)}
.rv-img{aspect-ratio:4/3;overflow:hidden;background:var(--g100)}
.rv-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.rv-card:hover .rv-img img{transform:scale(1.04)}
.rv-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--g300)}
.rv-info{padding:10px 12px 14px;flex:1}
.rv-name{font-size:.8rem;font-weight:600;color:var(--secondary);line-height:1.3;font-family:var(--heading)}
.rv-price{font-size:.82rem;font-weight:700;color:var(--primary);margin-top:4px;font-family:var(--heading)}

/* ── Blog ── */
.blog-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.blog-card{background:var(--white);border:1.5px solid var(--g200);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s;display:flex;flex-direction:column}
.blog-card:hover{border-color:var(--primary);transform:translateY(-4px)}
.blog-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-body{padding:20px;flex:1;display:flex;flex-direction:column}
.blog-cat{display:inline-block;background:rgba(5,207,171,.1);color:var(--primary);font-family:var(--heading);font-weight:600;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:10px;width:fit-content}
.blog-card h3{font-family:var(--heading);font-weight:600;font-size:.9375rem;color:var(--secondary);line-height:1.4;margin-bottom:8px}
.blog-lg h3{font-size:1.175rem}
.blog-card h3 a{color:inherit}
.blog-card:hover h3 a{color:var(--primary)}
.blog-exc{font-family:var(--body);font-size:.8375rem;color:var(--g600);line-height:1.65;margin-bottom:14px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.blog-auth{display:flex;align-items:center;gap:8px}
.blog-av{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--g200);flex-shrink:0}
.blog-av img{width:100%;height:100%;object-fit:cover}
.blog-auth-info{font-family:var(--body);font-size:.72rem;color:var(--g400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blog-auth-info strong{color:var(--g600);font-weight:600}

/* ── Back to top ── */
#btt{position:fixed;bottom:24px;right:24px;width:42px;height:42px;background:var(--secondary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:800;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s,background .2s;pointer-events:none}
#btt.show{opacity:1;transform:translateY(0);pointer-events:all}
#btt:hover{background:var(--primary)}

/* ── Skeleton ── */
.skel{background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);background-size:200% 100%;animation:skel 1.5s infinite;border-radius:6px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-content>*{animation:fadeUp .55s both}
.hero-content>*:nth-child(1){animation-delay:.08s}
.hero-content>*:nth-child(2){animation-delay:.18s}
.hero-content>*:nth-child(3){animation-delay:.28s}
.hero-content>*:nth-child(4){animation-delay:.38s}
.hero-content>*:nth-child(5){animation-delay:.46s}

/* ── Empty state ── */
.empty-state{padding:48px 24px;text-align:center;color:var(--g400);grid-column:1/-1}
.empty-state svg{width:48px;height:48px;margin:0 auto 16px;opacity:.4}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1100px){
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-lg{grid-column:1/-1}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-bottom:none}
  .deal-inner{gap:36px}
  .badge-tr{display:none}
  .loyalty-inner{grid-template-columns:1fr 320px;gap:36px}
  /* Trending: 2 cols at 1100px */
  .trending-grid{grid-template-columns:repeat(2,1fr)}
  /* Trust bar: wrap */
  .trust-divider{display:none}
  .trust-grid{gap:20px 32px}
  .nl-inner{gap:36px}
}

@media(max-width:900px){
  .loyalty-inner{grid-template-columns:1fr}
  .loyalty-visual{justify-content:flex-start}
  .loyalty-card-mock{max-width:100%}
  .rv-grid{grid-template-columns:repeat(3,1fr)}
  /* Trending: keep 2 cols */
  .trending-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:860px){
  :root{--hh:60px;--px:18px}
  .nav-desk{display:none}
  .hdr-search{display:none}
  .ham{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding:48px 0 40px}
  .hero-content{order:2;text-align:center}
  .hero-img-wrap{order:1}
  .hero-desc{max-width:100%;margin-left:auto;margin-right:auto}
  .hero-btns{justify-content:center}
  .hero-specs{justify-content:center}
  .badge-bl,.badge-tr{display:none}
  .deal-inner{grid-template-columns:1fr}
  .deal-img-wrap{order:-1;max-height:260px;overflow:hidden}
  .promo-grid{grid-template-columns:1fr}
  .promo-img{display:none}
  .promo-big{min-height:auto;padding:32px}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-item:nth-child(2){border-right:none}
  .feat-item:nth-child(3){border-right:1px solid var(--g200)}
  .feat-item:nth-child(4){border-right:none}
  .blog-grid{grid-template-columns:1fr}
  .section-hd--row{flex-direction:column;align-items:flex-start}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .cats-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-bottom:none}
  .new-swiper-wrapper .swiper-button-next,
  .new-swiper-wrapper .swiper-button-prev{width:36px!important;height:36px!important}
  .new-swiper-wrapper .swiper-button-next{right:-2px}
  .new-swiper-wrapper .swiper-button-prev{left:-2px}
  .nl-form{flex-direction:column;padding:0 4px}
  .nl-form input,.nl-form button{width:100%;height:52px;justify-content:center}
  .trending-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Trust bar */
  .trust-block{min-width:calc(50% - 10px)}
  /* Activity ticker: hide label on small */
  .at-label strong{display:none}
}

@media(max-width:600px){
  .rv-grid{grid-template-columns:repeat(2,1fr)}
  /* Trending: 1 col on small mobile */
  .trending-grid{grid-template-columns:1fr}
  /* Trust: stack */
  .trust-block{min-width:100%}
  /* Activity ticker label */
  .at-label{display:none}
}

@media(max-width:560px){
  .cats-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cat-card{padding:16px 8px;gap:7px}
  .cat-ic{width:46px;height:46px}
  .cat-nm{font-size:.75rem}
  .cat-ct{font-size:.65rem}
  .feat-grid{grid-template-columns:1fr}
  .feat-item{border-right:none!important;border-bottom:1px solid var(--g200)}
  .feat-item:last-child{border-bottom:none}
  .hero-specs{gap:12px 0}
  .hero-spec{padding-right:16px;margin-right:16px}
  .cdown{gap:6px}
  .cblock{min-width:46px;padding:8px 10px}
  .cn{font-size:1.2rem}
  .promo-big{padding:24px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item{padding:24px 16px}
  .deal-countdown{gap:6px}
  .deal-cblock{min-width:50px;padding:8px 10px}
  .deal-cn{font-size:1.2rem}
  .new-swiper-wrapper .swiper-button-next,
  .new-swiper-wrapper .swiper-button-prev{display:none!important}
  .loyalty-perks{grid-template-columns:1fr}
}
/* ======================================================
   DESIGN TOKENS — identical to index.php
====================================================== */
:root {
  --primary: #05CFAB;
  --primary-dk: #04b090;
  --secondary: #2C365B;
  --secondary-lt: #3d4d7a;
  --white: #fff;
  --off: #F7F8FA;
  --g100: #F0F2F5;
  --g200: #E2E6EC;
  --g300: #C8CDD8;
  --g400: #9AA3B2;
  --g600: #5A6478;
  --g800: #2D3344;
  --heading: 'Poppins', sans-serif;
  --body: 'Manrope', sans-serif;
  --hh: 68px;
  --max: 1260px;
  --px: 24px;
  --radius: 14px;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); background: var(--white); color: var(--g800); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; max-width: 100vw; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, button, select, textarea { font-family: inherit; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }
.section { padding: 72px 0; }
.section--alt { background: var(--off); }
h1,h2,h3,h4,h5,h6 { font-family: var(--heading); line-height: 1.15; letter-spacing: -0.01em; color: var(--secondary); }
h1 { font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.05rem,2vw,1.3rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { font-family: var(--body); font-size: .9375rem; line-height: 1.7; color: var(--g600); }
.label { display: inline-block; font-family: var(--heading); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.section-hd { margin-bottom: 48px; }
.section-hd p { margin-top: 6px; max-width: 560px; }
/* ── Buttons ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--heading); font-weight: 600; font-size: .875rem; padding: 12px 24px; border-radius: 8px; transition: background .2s, color .2s, transform .15s; white-space: nowrap; border: 2px solid transparent; cursor: pointer; letter-spacing: .01em; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.btn-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-outline { background: transparent; color: var(--secondary); border-color: var(--secondary); }
.btn-outline:hover { background: var(--secondary); color: var(--white); }
.btn-ghost { color: var(--primary); font-family: var(--heading); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: 5px; border-bottom: 1.5px solid var(--primary); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.btn-ghost:hover { color: var(--secondary); border-color: var(--secondary); }
.icon-btn { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--g600); transition: color .2s, background .2s; position: relative; flex-shrink: 0; }
.icon-btn:hover { color: var(--secondary); background: var(--g100); }
.icon-btn .badge { position: absolute; top: 4px; right: 4px; background: var(--primary); color: var(--white); font-size: .6rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform .2s; }
/* ── Announcement bar ───────────────────────────────── */
#ann-bar { background: var(--secondary); color: var(--white); text-align: center; padding: 9px var(--px); font-family: var(--body); font-size: .8125rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; letter-spacing: .01em; }
#ann-bar strong { color: var(--primary); font-weight: 700; }
#ann-bar .ann-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); transition: color .2s; padding: 4px; }
#ann-bar .ann-close:hover { color: var(--white); }
/* ── Header ─────────────────────────────────────────── */
#hdr { position: sticky; top: 0; z-index: 900; background: var(--white); border-bottom: 1px solid var(--g200); height: var(--hh); }
.hdr-inner { display: flex; align-items: center; gap: 20px; height: 100%; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { height: 34px; width: auto; }
.logo-txt { font-family: var(--heading); font-weight: 700; font-size: 1.125rem; color: var(--secondary); letter-spacing: -.01em; white-space: nowrap; }
.logo-txt span { color: var(--primary); }
.nav-desk { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.nav-desk a { font-family: var(--heading); font-weight: 500; font-size: .8375rem; color: var(--g600); padding: 7px 12px; border-radius: 6px; transition: color .2s, background .2s; white-space: nowrap; }
.nav-desk a:hover, .nav-desk a.active { color: var(--secondary); background: var(--g100); }
.hdr-search { flex: 1; max-width: 300px; position: relative; }
.hdr-search input { width: 100%; height: 38px; background: var(--g100); border: 1.5px solid var(--g200); border-radius: 8px; padding: 0 38px 0 14px; font-family: var(--body); font-size: .8375rem; color: var(--g800); outline: none; transition: border-color .2s; }
.hdr-search input:focus { border-color: var(--primary); }
.hdr-search input::placeholder { color: var(--g400); }
.hdr-search .si { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--g400); pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); border: 1.5px solid var(--g200); border-radius: 10px; box-shadow: 0 8px 32px rgba(44,54,91,.12); max-height: 360px; overflow-y: auto; display: none; z-index: 999; }
.search-results.show { display: block; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; transition: background .15s; }
.sr-item:hover { background: var(--g100); }
.sr-item img { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: var(--g100); flex-shrink: 0; }
.sr-item-name { font-family: var(--heading); font-weight: 600; font-size: .825rem; color: var(--secondary); }
.sr-item-price { font-family: var(--body); font-size: .72rem; color: var(--primary); font-weight: 600; }
.sr-empty { padding: 16px; font-size: .85rem; color: var(--g400); text-align: center; }
.hdr-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ham { display: none; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; color: var(--g600); transition: background .2s; }
.ham:hover { background: var(--g100); }
/* ── Toast ───────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--secondary); color: var(--white); padding: 12px 22px; border-radius: 10px; font-family: var(--heading); font-weight: 600; font-size: .85rem; z-index: 9999; opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; pointer-events: none; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success .ti { color: var(--primary); }
.toast.error .ti { color: #f97316; }
/* ── Mobile drawer ──────────────────────────────────── */
.mob-nav { display: none; position: fixed; inset: 0; z-index: 9999; }
.mob-nav.open { display: block; }
.mob-overlay { position: absolute; inset: 0; background: rgba(44,54,91,.5); }
.mob-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(300px,88vw); background: var(--white); padding: 20px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.mob-nav.open .mob-drawer { transform: translateX(0); }
.mob-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--g200); margin-bottom: 8px; }
.mob-close { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--g600); transition: background .2s; }
.mob-close:hover { background: var(--g100); }
.mob-search { position: relative; margin-bottom: 12px; }
.mob-search input { width: 100%; height: 40px; background: var(--g100); border: 1.5px solid var(--g200); border-radius: 8px; padding: 0 38px 0 14px; font-family: var(--body); font-size: .85rem; outline: none; color: var(--g800); }
.mob-search .si { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--g400); pointer-events: none; }
.mob-nav-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; font-family: var(--heading); font-weight: 500; font-size: .875rem; color: var(--g600); transition: color .2s, background .2s; }
.mob-nav-links a:hover, .mob-nav-links a.active { color: var(--secondary); background: var(--g100); }
.mob-divider { height: 1px; background: var(--g200); margin: 8px 0; }
.mob-footer { margin-top: auto; padding-top: 16px; }
.mob-footer a { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--secondary); color: var(--white); font-family: var(--heading); font-weight: 600; font-size: .875rem; padding: 13px; border-radius: 10px; }
/* ── Page hero / breadcrumb ─────────────────────────── */
.page-hero { background: var(--off); border-bottom: 1px solid var(--g200); padding: 48px 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-family: var(--body); font-size: .78rem; color: var(--g400); margin-bottom: 16px; flex-wrap: wrap; }
.breadcrumb a { color: var(--g400); transition: color .2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .cur { color: var(--secondary); font-weight: 500; }
.page-hero-content { max-width: 640px; }
.page-hero h1 { color: var(--secondary); margin-bottom: 12px; }
.page-hero p { font-size: 1rem; color: var(--g600); max-width: 520px; }
/* ── Privacy layout ─────────────────────────────────── */
.privacy-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
/* ── TOC sidebar ────────────────────────────────────── */
.toc-card { background: var(--white); border: 1.5px solid var(--g200); border-radius: var(--radius); padding: 24px; position: sticky; top: calc(var(--hh) + 20px); }
.toc-card h4 { font-family: var(--heading); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); margin-bottom: 16px; }
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-family: var(--body); font-size: .82rem; color: var(--g600); transition: color .2s, background .2s; line-height: 1.4; }
.toc-list a:hover { color: var(--secondary); background: var(--g100); }
.toc-list a.active { color: var(--primary); background: rgba(5,207,171,.07); font-weight: 600; }
.toc-list a .toc-num { font-family: var(--heading); font-weight: 700; font-size: .68rem; color: var(--primary); min-width: 18px; }
.toc-divider { height: 1px; background: var(--g200); margin: 12px 0; }
.toc-meta { font-family: var(--body); font-size: .75rem; color: var(--g400); line-height: 1.6; }
.toc-meta strong { color: var(--g600); }
/* ── Privacy content ────────────────────────────────── */
.privacy-content { min-width: 0; }
.privacy-section { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--g200); scroll-margin-top: calc(var(--hh) + 24px); }
.privacy-section:last-child { border-bottom: none; margin-bottom: 0; }
.privacy-section-hd { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.privacy-num { width: 38px; height: 38px; background: rgba(5,207,171,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-weight: 700; font-size: .8rem; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.privacy-section h2 { font-size: 1.2rem; color: var(--secondary); margin-bottom: 0; }
.privacy-body p { font-size: .9rem; color: var(--g600); line-height: 1.8; margin-bottom: 14px; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body h3 { font-size: .95rem; font-weight: 600; color: var(--secondary); margin: 20px 0 8px; }
.privacy-list { margin: 12px 0 14px 0; display: flex; flex-direction: column; gap: 8px; }
.privacy-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--body); font-size: .875rem; color: var(--g600); line-height: 1.7; }
.privacy-list li::before { content: ''; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.privacy-highlight { background: rgba(5,207,171,.06); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 16px 0; }
.privacy-highlight p { margin: 0; font-size: .875rem; color: var(--secondary); font-weight: 500; }
.privacy-warning { background: rgba(239,68,68,.05); border-left: 3px solid #ef4444; border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 16px 0; }
.privacy-warning p { margin: 0; font-size: .875rem; color: #c53030; }
/* ── Data table ─────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-family: var(--body); font-size: .85rem; }
.data-table th { background: var(--g100); padding: 10px 14px; text-align: left; font-family: var(--heading); font-weight: 600; font-size: .78rem; color: var(--secondary); letter-spacing: .02em; border-bottom: 2px solid var(--g200); }
.data-table td { padding: 10px 14px; color: var(--g600); border-bottom: 1px solid var(--g100); vertical-align: top; line-height: 1.6; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--off); }
/* ── Rights grid ────────────────────────────────────── */
.rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.right-card { background: var(--off); border: 1.5px solid var(--g200); border-radius: 10px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; transition: border-color .2s; }
.right-card:hover { border-color: var(--primary); }
.right-ic { width: 34px; height: 34px; background: rgba(5,207,171,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; }
.right-ic svg { width: 16px; height: 16px; }
.right-card h4 { font-family: var(--heading); font-weight: 600; font-size: .82rem; color: var(--secondary); margin-bottom: 4px; }
.right-card p { font-size: .78rem; color: var(--g600); line-height: 1.5; margin: 0; }
/* ── Quick actions ──────────────────────────────────── */
.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.quick-card { background: var(--white); border: 1.5px solid var(--g200); border-radius: var(--radius); padding: 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: border-color .2s, transform .2s; }
.quick-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.quick-ic { width: 52px; height: 52px; background: rgba(5,207,171,.1); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.quick-ic svg { width: 22px; height: 22px; }
.quick-card h4 { font-family: var(--heading); font-weight: 600; font-size: .9rem; color: var(--secondary); }
.quick-card p { font-size: .8rem; color: var(--g600); line-height: 1.55; margin: 0; }
.quick-card a.btn-ghost { font-size: .78rem; }
/* ── Newsletter ─────────────────────────────────────── */
.nl-section { background: var(--secondary); padding: 72px 0; position: relative; overflow: hidden; }
.nl-section::before { content:''; position: absolute; top: -80px; right: -80px; width: 380px; height: 380px; border: 2px solid rgba(255,255,255,.04); border-radius: 50%; }
.nl-section::after { content:''; position: absolute; bottom: -100px; left: -60px; width: 280px; height: 280px; border: 2px solid rgba(255,255,255,.04); border-radius: 50%; }
.nl-inner { max-width: 560px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.nl-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(5,207,171,.15); border: 1px solid rgba(5,207,171,.3); color: var(--primary); font-family: var(--heading); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 18px; }
.nl-inner h2 { color: var(--white); font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom: 10px; }
.nl-inner h2 .ac { color: var(--primary); }
.nl-inner p { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 28px; max-width: 440px; margin-left: auto; margin-right: auto; }
.nl-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.nl-form input { flex: 1; height: 52px; line-height: 52px; padding: 0 18px; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); border-radius: 9px; font-family: var(--body); font-size: .9rem; color: var(--white); outline: none; transition: border-color .2s; min-width: 0; box-sizing: border-box; }
.nl-form input::placeholder { color: rgba(255,255,255,.45); }
.nl-form input:focus { border-color: var(--primary); background: rgba(255,255,255,.15); }
.nl-form button { height: 52px; padding: 0 28px; background: var(--primary); color: var(--white); font-family: var(--heading); font-weight: 600; font-size: .9rem; border-radius: 9px; white-space: nowrap; cursor: pointer; border: none; transition: background .2s; flex-shrink: 0; display: flex; align-items: center; }
.nl-form button:hover { background: var(--primary-dk); }
.nl-note { font-family: var(--body); font-size: .72rem; color: rgba(255,255,255,.35); margin-top: 12px; }
/* ── Footer ─────────────────────────────────────────── */
.footer { background: var(--white); border-top: 1px solid var(--g200); }
.footer-top { padding: 60px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-brand p { font-family: var(--body); font-size: .85rem; color: var(--g600); line-height: 1.7; margin: 14px 0 20px; max-width: 270px; }
.soc { display: flex; gap: 8px; }
.soc-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--g200); display: flex; align-items: center; justify-content: center; color: var(--g400); transition: border-color .2s, color .2s, background .2s; }
.soc-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(5,207,171,.06); }
.footer-col-h { font-family: var(--heading); font-weight: 700; font-size: .75rem; color: var(--secondary); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.flinks { display: flex; flex-direction: column; gap: 9px; }
.flinks a { font-family: var(--body); font-size: .85rem; color: var(--g600); transition: color .2s; }
.flinks a:hover { color: var(--primary); }
.fcontact { display: flex; flex-direction: column; gap: 12px; }
.fci { display: flex; align-items: flex-start; gap: 10px; }
.fci svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.fci span { font-family: var(--body); font-size: .85rem; color: var(--g600); line-height: 1.5; }
.fhours { margin-top: 16px; }
.fhours p { font-family: var(--body); font-size: .82rem; color: var(--g600); line-height: 1.75; margin: 0; }
.footer-bottom { border-top: 1px solid var(--g200); padding: 18px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom p { font-family: var(--body); font-size: .775rem; color: var(--g400); }
.pay-row { display: flex; align-items: center; gap: 6px; }
.pay-row span:first-child { font-family: var(--body); font-size: .72rem; color: var(--g400); }
.pay-badge { padding: 3px 9px; background: var(--g100); border: 1px solid var(--g200); border-radius: 6px; font-family: var(--heading); font-weight: 600; font-size: .68rem; color: var(--g600); letter-spacing: .03em; }
#btt { position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; background: var(--secondary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 800; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s, background .2s; pointer-events: none; }
#btt.show { opacity: 1; transform: translateY(0); pointer-events: all; }
#btt:hover { background: var(--primary); }
/* ── Responsive ─────────────────────────────────────── */
@media(max-width:1100px) {
  .privacy-layout { grid-template-columns: 220px 1fr; gap: 32px; }
  .rights-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media(max-width:860px) {
  :root { --hh: 60px; --px: 18px; }
  .nav-desk, .hdr-search { display: none; }
  .ham { display: flex; }
  .privacy-layout { grid-template-columns: 1fr; }
  .toc-card { position: static; }
  .rights-grid { grid-template-columns: 1fr 1fr; }
  .quick-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; padding: 0 4px; }
  .nl-form input, .nl-form button { width: 100%; height: 52px; justify-content: center; }
  .data-table { font-size: .78rem; }
  .data-table th, .data-table td { padding: 8px 10px; }
}
@media(max-width:560px) {
  .rights-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 48px 0; }
}