/* =============================================================
   SEA MIRACLE — SHOP CSS  (products.php + product.php)
   Inherits CSS variables from home.css via shared :root
   ============================================================= */

/* ── Reuse the same root variables ─────────────────────── */
:root {
  --g-50:  #f0fdf4; --g-100: #dcfce7; --g-200: #bbf7d0;
  --g-300: #86efac; --g-400: #4ade80;
  --g-600: #16a34a; --g-700: #15803d;
  --t-100: #ccfbf1; --t-200: #99f6e4; --t-300: #5eead4;
  --t-400: #2dd4bf; --t-500: #14b8a6; --t-600: #0d9488;
  --t-700: #0f766e; --t-800: #115e59; --t-900: #134e4a;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;
  --gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;
  --grad: linear-gradient(135deg, #0d9488 0%, #059669 52%, #16a34a 100%);
  --grad-light: linear-gradient(135deg, #f0fdf4 0%, #ccfbf1 100%);
  --sh-sm:0 1px 3px rgba(0,0,0,.08);--sh:0 4px 12px rgba(0,0,0,.08);
  --sh-md:0 8px 24px rgba(0,0,0,.1);--sh-lg:0 16px 40px rgba(0,0,0,.12);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;
  --font:'Poppins',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--trans:all .3s var(--ease);
  --container:1200px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--gray-800);background:#fff;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
button{cursor:pointer;border:none;background:none;font-family:var(--font)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ── NAVBAR ─────────────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--gray-100);box-shadow:0 1px 12px rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:18px;font-weight:800;color:var(--t-700)}
.nav-logo img{height:48px;width:auto;object-fit:contain}
.nav-links{display:flex;list-style:none;gap:28px;margin:0 auto}
.nav-links a{font-size:14px;font-weight:500;color:var(--gray-600);position:relative;padding:4px 0;transition:color .25s}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--grad);border-radius:2px;transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--t-700)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-phone{font-size:13px;font-weight:600;color:var(--gray-700);display:flex;align-items:center;gap:6px;transition:color .2s}
.nav-phone:hover{color:var(--t-600)}
.nav-btn{display:flex;align-items:center;gap:6px;background:var(--grad);color:#fff;padding:9px 20px;border-radius:var(--radius-full);font-size:13px;font-weight:700;transition:var(--trans)}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,148,136,.35)}
/* User menu dropdown */
.nav-user-menu{position:relative}
.nav-user-btn{display:flex;align-items:center;gap:7px;background:var(--grad);color:#fff;padding:9px 18px;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;font-family:'Poppins',sans-serif;cursor:pointer;transition:var(--trans)}
.nav-user-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,148,136,.35)}
.nav-user-btn .uname{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-btn .fa-chevron-down{font-size:10px;transition:transform .2s}
.nav-user-btn[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)}
.nav-user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 10px);background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.13);min-width:200px;padding:6px 0;z-index:500;border:1px solid #f0fdf4}
.nav-user-dropdown.open{display:block}
.nav-user-hello{padding:11px 16px 9px;border-bottom:1px solid #f3f4f6;margin-bottom:4px}
.nav-user-hello small{display:block;font-size:11px;color:#9ca3af;font-weight:500}
.nav-user-hello strong{display:block;font-size:14px;font-weight:700;color:#111827;margin-top:1px}
.nav-user-dropdown a,.nav-logout-btn{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:13px;color:#374151;text-decoration:none;font-weight:500;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:'Poppins',sans-serif;transition:background .15s;white-space:nowrap}
.nav-user-dropdown a:hover{background:#f0fdf4;color:var(--t-700)}
.nav-user-dropdown a i,.nav-logout-btn i{width:16px;text-align:center;color:var(--t-600)}
.nav-logout-btn{color:#ef4444}
.nav-logout-btn i{color:#ef4444}
.nav-logout-btn:hover{background:#fef2f2;color:#dc2626}
.nav-user-sep{border:none;border-top:1px solid #f3f4f6;margin:4px 0}
/* Mobile user links */
.mob-user-info{padding:14px 24px;background:var(--g-50);border-bottom:1px solid var(--g-200);display:flex;align-items:center;gap:10px}
.mob-user-info i{font-size:22px;color:var(--t-600)}
.mob-user-info span{font-size:13px;font-weight:600;color:var(--gray-700)}
.mob-logout-btn{background:none;border:none;padding:14px 24px;font-size:14px;font-weight:600;color:#ef4444;font-family:'Poppins',sans-serif;width:100%;text-align:left;cursor:pointer;border-bottom:1px solid var(--gray-50);display:flex;align-items:center;gap:8px}
/* Cart icon in nav */
.nav-cart{position:relative;width:42px;height:42px;border-radius:50%;background:var(--g-50);border:1px solid var(--g-200);display:flex;align-items:center;justify-content:center;color:var(--t-700);font-size:17px;transition:var(--trans);cursor:pointer}
.nav-cart:hover{background:var(--t-600);color:#fff;transform:translateY(-2px)}
.nav-cart-count{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--grad);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
.nav-cart-count:empty{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;background:transparent;border:1px solid var(--gray-200);border-radius:8px}
.hamburger span{display:block;width:20px;height:2px;background:var(--gray-600);border-radius:2px;transition:var(--trans)}
.mobile-nav{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--gray-100);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.mobile-nav a{padding:14px 24px;font-size:14px;font-weight:500;color:var(--gray-700);border-bottom:1px solid var(--gray-50)}
.mobile-nav.open{display:flex}
.mob-btn{background:var(--grad);color:#fff!important;margin:12px 16px;border-radius:var(--radius-full);text-align:center}

/* ── SHOP HERO ───────────────────────────────────────────────────── */
.shop-hero{position:relative;height:400px;overflow:hidden;background:#0a2e24;display:flex;align-items:center}
.shop-hero-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;opacity:.22;filter:saturate(.6)}
.shop-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,40,28,.92) 0%,rgba(6,95,70,.78) 55%,rgba(4,40,28,.7) 100%)}
.shop-hero-content{position:relative;z-index:2;width:100%;text-align:center}
.shop-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:16px}
.shop-breadcrumb a{color:rgba(255,255,255,.6);transition:color .2s}
.shop-breadcrumb a:hover{color:#fff}
.shop-breadcrumb i{font-size:9px}
/* Title with animated gradient across the full line */
.shop-hero-title{
  font-size:clamp(32px,5vw,58px);font-weight:800;line-height:1.1;margin-bottom:12px;
  background:linear-gradient(90deg,
    #fde68a 0%,#fbbf24 10%,#a7f3d0 22%,#2dd4bf 36%,
    #6ee7b7 50%,#34d399 64%,#a7f3d0 78%,#fbbf24 90%,#fde68a 100%);
  background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shopGradText 6s linear infinite;
}
@keyframes shopGradText{0%{background-position:0% center}100%{background-position:250% center}}
.shop-hero-sub{font-size:15px;color:rgba(255,255,255,.75);margin:0 auto 28px;max-width:520px;line-height:1.6}
/* Hero stats pills */
.shop-hero-stats{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.shop-hero-stat{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full);
  padding:9px 18px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);
  transition:background .28s,transform .28s,box-shadow .28s;cursor:default;
}
.shop-hero-stat:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  color:#fff;
}
.shop-hero-stat-icon{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
  transition:transform .3s;
}
.shop-hero-stat:hover .shop-hero-stat-icon{transform:scale(1.18) rotate(-5deg)}
/* Individual icon badge colors */
.shop-hero-stat-icon.ic-authentic{background:rgba(74,222,128,.25);color:#4ade80}
.shop-hero-stat-icon.ic-delivery {background:rgba(96,165,250,.25);color:#60a5fa}
.shop-hero-stat-icon.ic-rated    {background:rgba(251,191,36,.3); color:#fbbf24}
.shop-hero-stat-icon.ic-marine   {background:rgba(45,212,191,.25);color:#2dd4bf}

/* ── FILTER STRIP ──────────────────────────────────────────────── */
.shop-filter-strip{position:sticky;top:72px;z-index:100;background:#fff;border-bottom:1px solid var(--gray-100);box-shadow:0 2px 12px rgba(0,0,0,.05)}
.filter-inner{display:flex;align-items:center;gap:12px;padding:14px 0;flex-wrap:wrap;justify-content:space-between}
.filter-cats{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.filter-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--gray-600);background:var(--gray-50);border:1.5px solid var(--gray-200);transition:var(--trans);cursor:pointer}
.filter-btn:hover{border-color:var(--t-400);color:var(--t-700);background:var(--t-100)}
.filter-btn.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(13,148,136,.3)}
.filter-btn .count{font-size:10px;background:rgba(255,255,255,.25);padding:1px 7px;border-radius:10px}
.filter-btn.active .count{background:rgba(255,255,255,.3)}
/* Right controls */
.filter-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.filter-result-count{font-size:13px;color:var(--gray-500);white-space:nowrap}
.sort-select{appearance:none;background:var(--gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:1.5px solid var(--gray-200);border-radius:var(--radius-full);padding:8px 36px 8px 14px;font-size:13px;font-weight:600;color:var(--gray-700);font-family:var(--font);cursor:pointer;transition:border-color .2s}
.sort-select:focus{outline:none;border-color:var(--t-400)}
/* Price filter pill */
.price-filter-wrap{position:relative}
.price-filter-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--gray-600);background:var(--gray-50);border:1.5px solid var(--gray-200);transition:var(--trans);cursor:pointer}
.price-filter-btn:hover,.price-filter-btn.active{border-color:var(--t-400);color:var(--t-700);background:var(--t-100)}
.price-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);padding:20px;width:260px;z-index:200;display:none}
.price-dropdown.open{display:block;animation:fadeUp .2s ease both}
.price-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:600}
.price-range{width:100%;accent-color:var(--t-600);margin-bottom:12px}
.price-inputs{display:flex;gap:10px}
.price-inputs input{flex:1;border:1.5px solid var(--gray-200);border-radius:8px;padding:7px 10px;font-size:13px;font-family:var(--font);outline:none;text-align:center}
.price-inputs input:focus{border-color:var(--t-400)}
.price-apply{width:100%;margin-top:12px;padding:9px;background:var(--grad);color:#fff;border-radius:var(--radius-full);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;transition:var(--trans)}
.price-apply:hover{transform:scale(1.02);box-shadow:0 4px 14px rgba(13,148,136,.35)}
/* Clear-filter button in result count row */
.btn-clear-filter{display:none;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;color:var(--gray-600);background:var(--gray-100);border:1.5px solid var(--gray-200);cursor:pointer;font-family:var(--font);transition:var(--trans)}
.btn-clear-filter:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.btn-clear-filter.visible{display:inline-flex}
/* ── PRODUCTS MAIN ─────────────────────────────────────────────── */
.shop-main{padding:44px 0 80px}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ── PRODUCT CARD ──────────────────────────────────────────────── */
.sp-card{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--sh-sm);border:1.5px solid var(--gray-100);overflow:hidden;transition:transform .38s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease,border-color .25s;position:relative;display:flex;flex-direction:column}
.sp-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(13,148,136,.16);border-color:var(--t-200)}

/* Image area */
.sp-img-wrap{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--gray-50);cursor:zoom-in}
.sp-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .15s ease}
.sp-card:hover .sp-img-wrap img{transform:scale(1.08)}
.sp-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--grad-light);font-size:48px;color:var(--t-400)}

/* Badges */
.sp-badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;padding:4px 10px;border-radius:var(--radius-full);letter-spacing:.06em;text-transform:uppercase;z-index:2}
.sp-badge.new{background:var(--grad);color:#fff;box-shadow:0 3px 10px rgba(13,148,136,.35)}
.sp-badge.sale{background:#ef4444;color:#fff;box-shadow:0 3px 10px rgba(239,68,68,.35)}
.sp-badge.out{background:rgba(0,0,0,.6);color:#fff}

/* Wishlist btn */
.sp-wishlist{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-400);transition:var(--trans);z-index:5;border:1px solid rgba(255,255,255,.8)}
.sp-wishlist:hover{color:#ef4444;transform:scale(1.15)}
.sp-wishlist.active{color:#ef4444;background:#fff2f2}
/* Gallery nav arrows (visible on card hover) */
.sp-gal-prev,.sp-gal-next{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--gray-700);font-size:11px;display:flex;align-items:center;justify-content:center;z-index:4;opacity:0;transition:opacity .25s,background .2s;pointer-events:none;border:1.5px solid rgba(255,255,255,.6)}
.sp-gal-prev{left:8px}
.sp-gal-next{right:8px}
.sp-card:hover .sp-gal-prev,.sp-card:hover .sp-gal-next{opacity:1;pointer-events:auto}
.sp-gal-prev:hover,.sp-gal-next:hover{background:#fff;color:var(--t-700)}
.sp-gal-dots{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:4;opacity:0;transition:opacity .25s;pointer-events:none}
.sp-card:hover .sp-gal-dots{opacity:1}
.sp-gal-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s;pointer-events:auto;cursor:pointer}
.sp-gal-dot.active{background:#fff;width:12px;border-radius:3px}

/* Hover action overlay */
.sp-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,40,28,.88) 0%,rgba(4,40,28,.4) 55%,transparent 100%);opacity:0;transition:opacity .35s ease;z-index:3;display:flex;align-items:flex-end;padding:14px}
.sp-card:hover .sp-overlay{opacity:1}
.sp-overlay-btns{display:flex;gap:8px;width:100%;transform:translateY(14px);transition:transform .35s ease}
.sp-card:hover .sp-overlay-btns{transform:translateY(0)}
.sp-overlay-btns .btn-atc{flex:1;background:#fff;color:var(--t-700);font-size:12px;font-weight:700;padding:9px 10px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;gap:5px;transition:var(--trans);font-family:var(--font)}
.sp-overlay-btns .btn-atc:hover{background:var(--grad);color:#fff;transform:scale(1.03)}
.sp-overlay-btns .btn-atc.out{background:rgba(255,255,255,.3);color:rgba(255,255,255,.6);cursor:not-allowed}
.sp-overlay-btns .btn-view{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:var(--trans)}
.sp-overlay-btns .btn-view:hover{background:rgba(255,255,255,.3)}

/* Card body */
.sp-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.sp-cat{font-size:10px;font-weight:700;color:var(--t-600);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.sp-name{font-size:14px;font-weight:600;color:var(--gray-800);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-price{display:flex;align-items:baseline;gap:7px;margin-bottom:12px;margin-top:auto}
.sp-price-main{font-size:16px;font-weight:800;color:var(--t-700)}
.sp-price-old{font-size:12px;color:var(--gray-400);text-decoration:line-through}
.sp-price-off{font-size:10px;font-weight:700;background:#fef2f2;color:#ef4444;padding:2px 7px;border-radius:var(--radius-full)}
/* Bottom action row (always visible) */
.sp-actions{display:flex;gap:8px}
.sp-actions .btn-add{flex:1;background:var(--g-50);color:var(--t-700);border:1.5px solid var(--t-200);font-size:12px;font-weight:700;padding:9px 10px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;gap:5px;transition:var(--trans);font-family:var(--font)}
.sp-actions .btn-add:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 14px rgba(13,148,136,.3)}
.sp-actions .btn-add:active{transform:scale(.97)}
.sp-actions .btn-add.out{background:var(--gray-100);color:var(--gray-400);border-color:var(--gray-200);cursor:not-allowed}
.sp-actions .btn-add.loading{opacity:.7;pointer-events:none}
.sp-actions .btn-detail{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--gray-50);border:1.5px solid var(--gray-200);color:var(--gray-500);display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--trans)}
.sp-actions .btn-detail:hover{background:var(--t-700);color:#fff;border-color:var(--t-700);transform:rotate(8deg) scale(1.08)}

/* Stock bar */
.sp-stock-low{font-size:10px;color:#f59e0b;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:4px}

/* Empty state */
.shop-empty{grid-column:1/-1;text-align:center;padding:80px 0}
.shop-empty i{font-size:52px;color:var(--gray-300);margin-bottom:16px;display:block}
.shop-empty h3{font-size:20px;color:var(--gray-700);margin-bottom:8px}
.shop-empty p{font-size:14px;color:var(--gray-400)}
.shop-empty button{margin-top:20px;padding:10px 28px;background:var(--grad);color:#fff;border-radius:var(--radius-full);font-size:14px;font-weight:700;font-family:var(--font);transition:var(--trans)}

/* ── CART SIDEBAR ──────────────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-sidebar{position:fixed;top:0;right:0;height:100vh;width:100%;max-width:400px;background:#fff;z-index:401;transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.15)}
.cart-sidebar.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--gray-100)}
.cart-head h3{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.cart-head h3 span{background:var(--grad);color:#fff;font-size:11px;padding:2px 8px;border-radius:var(--radius-full)}
.cart-close{width:36px;height:36px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-500);transition:var(--trans)}
.cart-close:hover{background:var(--gray-200)}
.cart-body{flex:1;overflow-y:auto;padding:16px 22px}
.cart-empty-msg{text-align:center;padding:52px 0;color:var(--gray-400)}
.cart-empty-msg i{font-size:44px;margin-bottom:12px;display:block;color:var(--gray-300)}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-100)}
.cart-item-img{width:68px;height:68px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;background:var(--gray-50)}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:13px;font-weight:600;color:var(--gray-800);margin-bottom:4px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-item-price{font-size:14px;font-weight:800;color:var(--t-700)}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{width:26px;height:26px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gray-700);transition:var(--trans)}
.qty-btn:hover{background:var(--t-600);color:#fff}
.qty-val{font-size:14px;font-weight:700;min-width:20px;text-align:center}
.cart-item-remove{width:26px;height:26px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-400);transition:color .2s;flex-shrink:0;align-self:flex-start;margin-top:2px}
.cart-item-remove:hover{color:#ef4444}
.cart-foot{padding:18px 22px;border-top:1px solid var(--gray-100)}
.cart-subtotal{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--gray-600)}
.cart-total-row{display:flex;justify-content:space-between;font-size:17px;font-weight:800;color:var(--gray-900);margin-bottom:16px}
.cart-checkout-btn{width:100%;padding:14px;background:var(--grad);color:#fff;border-radius:var(--radius-full);font-size:15px;font-weight:700;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--trans)}
.cart-checkout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,148,136,.4)}
.cart-continue{display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--gray-400);transition:color .2s}
.cart-continue:hover{color:var(--t-600)}

/* ── TOAST ─────────────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.toast{background:var(--gray-900);color:#fff;padding:12px 22px;border-radius:var(--radius-full);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);animation:toastIn .35s ease both;pointer-events:none;max-width:340px}
.toast.success .toast-icon{color:#4ade80}
.toast.error   .toast-icon{color:#f87171}
.toast.info    .toast-icon{color:#a5b4fc}
.toast.out{animation:toastOut .35s ease both;opacity:0}
@keyframes toastIn {from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(16px) scale(.95)}}
@keyframes fadeUp {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── WISHLIST NAV ICON ─────────────────────────────────────────── */
.nav-wishlist{position:relative;width:42px;height:42px;border-radius:50%;background:var(--g-50);border:1px solid var(--g-200);display:flex;align-items:center;justify-content:center;color:#e11d48;font-size:17px;transition:var(--trans);cursor:pointer}
.nav-wishlist:hover{background:#fee2e2;border-color:#fca5a5;transform:translateY(-2px)}
.nav-wishlist-count{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
.nav-wishlist-count:empty{display:none}
.sp-wishlist.active .fa-heart{color:#e11d48}

/* ── WISHLIST SIDEBAR ─────────────────────────────────────────── */
.wishlist-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s}
.wishlist-overlay.open{opacity:1;pointer-events:all}
.wishlist-sidebar{position:fixed;top:0;right:0;height:100vh;width:100%;max-width:400px;background:#fff;z-index:401;transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.15)}
.wishlist-sidebar.open{transform:translateX(0)}
.wishlist-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--gray-100)}
.wishlist-head h3{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--gray-900)}
.wishlist-head h3 i{color:#e11d48}
.wishlist-head h3 span{background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff;font-size:11px;padding:2px 8px;border-radius:var(--radius-full)}
.wishlist-close{width:36px;height:36px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-500);transition:var(--trans)}
.wishlist-close:hover{background:var(--gray-200)}
.wishlist-body{flex:1;overflow-y:auto;padding:16px 22px}
.wl-empty-msg{text-align:center;padding:52px 0;color:var(--gray-400)}
.wl-empty-msg i{font-size:44px;margin-bottom:12px;display:block;color:#fca5a5}
.wl-empty-msg p{font-size:14px;line-height:1.6}
/* Wishlist item */
.wl-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-100);animation:fadeUp .25s ease both}
.wl-item-img{width:72px;height:72px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;background:var(--gray-50);cursor:pointer;transition:transform .2s}
.wl-item-img:hover{transform:scale(1.04)}
.wl-item-info{flex:1;min-width:0}
.wl-item-name{font-size:13px;font-weight:600;color:var(--gray-800);margin-bottom:4px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wl-item-price{font-size:15px;font-weight:800;color:var(--t-700);margin-bottom:8px}
.wl-item-price .wl-orig-price{font-size:11px;font-weight:400;color:var(--gray-400);text-decoration:line-through;margin-left:5px}
.wl-item-out{font-size:11px;color:#f59e0b;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.wl-item-actions{display:flex;gap:8px;align-items:center}
.wl-move-cart-btn{flex:1;padding:7px 10px;background:var(--grad);color:#fff;border-radius:var(--radius-full);font-size:11px;font-weight:700;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:5px;transition:var(--trans);border:none;cursor:pointer}
.wl-move-cart-btn:hover{opacity:.88;transform:translateY(-1px)}
.wl-move-cart-btn.loading{opacity:.6;pointer-events:none}
.wl-move-cart-btn.out-stock{background:var(--gray-200);color:var(--gray-400);cursor:not-allowed;pointer-events:none}
.wl-remove-btn{width:28px;height:28px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray-400);flex-shrink:0;transition:color .2s,background .2s;align-self:flex-start;margin-top:2px;cursor:pointer;border:none}
.wl-remove-btn:hover{color:#ef4444;background:#fee2e2}
/* Wishlist footer */
.wishlist-foot{padding:16px 22px;border-top:1px solid var(--gray-100)}
.wl-clear-btn{width:100%;padding:10px;border:1.5px solid var(--gray-200);color:var(--gray-500);border-radius:var(--radius-full);font-size:13px;font-weight:600;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:7px;transition:var(--trans);background:#fff;cursor:pointer;margin-bottom:10px}
.wl-clear-btn:hover{border-color:#ef4444;color:#ef4444;background:#fff5f5}
.wl-continue{display:block;text-align:center;font-size:13px;color:var(--gray-400);transition:color .2s}
.wl-continue:hover{color:var(--t-600)}

/* ── FULL FOOTER ──────────────────────────────────────────────── */
.footer { background: var(--gray-900); color: var(--gray-400); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
.foot-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-logo img { height: 44px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .88; }
.foot-logo-ico { width: 44px; height: 44px; background: var(--grad); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; }
.foot-logo-name { font-size: 18px; font-weight: 700; color: #fff; }
.foot-desc { font-size: 13px; color: var(--gray-400); line-height: 1.72; margin-bottom: 20px; max-width: 260px; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 36px; height: 36px; background: rgba(255,255,255,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: var(--trans); font-size: 15px; }
.foot-social a:hover { background: var(--t-700); color: #fff; transform: translateY(-2px); }
.foot-col h3, .foot-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.foot-col h3::after, .foot-col h4::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:2px; background:var(--t-600); border-radius:2px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: 13px; color: var(--gray-400); transition: var(--trans); display: flex; align-items: center; gap: 6px; }
.foot-links a i { font-size: 10px; color: var(--t-700); }
.foot-links a:hover { color: var(--t-400); padding-left: 4px; }
.foot-contact-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.foot-contact-row i { color: var(--t-500); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.foot-contact-row span, .foot-contact-row a { font-size: 13px; color: var(--gray-400); line-height: 1.5; transition: color .2s; }
.foot-contact-row a:hover { color: var(--t-400); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 12px; flex-wrap: wrap; }
.foot-copy { font-size: 12px; color: var(--gray-500); }
.foot-bottom-links { display: flex; gap: 20px; }
.foot-bottom-links a { font-size: 12px; color: var(--gray-500); transition: color .2s; }
.foot-bottom-links a:hover { color: var(--t-400); }
.scroll-top { position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; background: var(--grad); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 18px rgba(13,148,136,.42); opacity: 0; transform: translateY(12px); transition: var(--trans); z-index: 999; cursor: pointer; border: none; }
.scroll-top.show { opacity: 1; transform: none; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── PRODUCT DETAIL PAGE ───────────────────────────────────────── */
/* Breadcrumb */
.pd-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray-400);padding:18px 0}
.pd-breadcrumb a{color:var(--gray-500);transition:color .2s}
.pd-breadcrumb a:hover{color:var(--t-600)}
.pd-breadcrumb i{font-size:8px;color:var(--gray-300)}
/* Detail grid */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding-bottom:64px}
/* Gallery */
.pd-gallery{position:sticky;top:90px}
.pd-main-img{aspect-ratio:1/1;border-radius:var(--radius-xl);overflow:hidden;background:var(--gray-50);border:1.5px solid var(--gray-100);margin-bottom:12px;cursor:zoom-in;position:relative}
.pd-main-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pd-main-img:hover img{transform:scale(1.05)}
.pd-main-img .pd-zoom-hint{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:5px 10px;border-radius:var(--radius-full);display:flex;align-items:center;gap:5px;pointer-events:none}
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pd-thumb{width:68px;height:68px;border-radius:var(--radius);overflow:hidden;border:2px solid var(--gray-200);cursor:pointer;transition:var(--trans)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--t-500)}
/* Info side */
.pd-info{}
.pd-cat-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--t-700);text-transform:uppercase;letter-spacing:.07em;background:var(--t-100);padding:5px 14px;border-radius:var(--radius-full);margin-bottom:14px}
.pd-name{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--gray-900);line-height:1.2;margin-bottom:10px}
/* Stars */
.pd-stars{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pd-stars i{color:#f59e0b;font-size:14px}
.pd-rating-val{font-size:14px;font-weight:700;color:var(--gray-800)}
.pd-rating-cnt{font-size:13px;color:var(--gray-400)}
/* Price block */
.pd-price-block{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pd-price-main{font-size:32px;font-weight:800;color:var(--t-700)}
.pd-price-old{font-size:18px;color:var(--gray-400);text-decoration:line-through}
.pd-price-off{background:#fef2f2;color:#ef4444;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--radius-full)}
/* Stock */
.pd-stock{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:18px;padding:6px 14px;border-radius:var(--radius-full)}
.pd-stock.in-stock{background:var(--g-50);color:var(--g-700);border:1px solid var(--g-200)}
.pd-stock.low-stock{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.pd-stock.out-stock{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.pd-stock i{font-size:11px}
/* Short desc */
.pd-short-desc{font-size:14px;color:var(--gray-500);line-height:1.75;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--gray-100)}
/* Qty + Add to cart */
.pd-qty-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.pd-qty-ctrl{display:flex;align-items:center;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--radius-full);overflow:hidden}
.pd-qty-ctrl button{width:40px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gray-600);transition:var(--trans)}
.pd-qty-ctrl button:hover{background:var(--t-100);color:var(--t-700)}
.pd-qty-ctrl .pd-qty-num{min-width:40px;text-align:center;font-size:16px;font-weight:700;color:var(--gray-900)}
.pd-atc-btn{flex:1;background:var(--grad);color:#fff;padding:14px 28px;border-radius:var(--radius-full);font-size:15px;font-weight:700;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--trans)}
.pd-atc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(13,148,136,.38)}
.pd-atc-btn:active{transform:scale(.97)}
.pd-atc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* Share / wishlist row */
.pd-meta-row{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--gray-100);margin-top:4px;flex-wrap:wrap}
.pd-meta-label{font-size:12px;color:var(--gray-400)}
.pd-meta-btn{width:36px;height:36px;border-radius:50%;background:var(--gray-50);border:1.5px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-500);transition:var(--trans)}
.pd-meta-btn:hover{background:var(--t-100);border-color:var(--t-300);color:var(--t-700)}
/* Tabs / accordion */
.pd-tabs{margin-top:52px}
.pd-tabs-nav{display:flex;border-bottom:2px solid var(--gray-100);gap:0;margin-bottom:28px}
.pd-tab-btn{padding:12px 24px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--trans)}
.pd-tab-btn.active{color:var(--t-700);border-bottom-color:var(--t-600)}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block;animation:fadeUp .3s ease both}
.pd-tab-panel h4{font-size:15px;font-weight:700;color:var(--gray-800);margin:18px 0 8px}
.pd-tab-panel p,.pd-tab-panel li{font-size:14px;color:var(--gray-500);line-height:1.78}
.pd-tab-panel ul{padding-left:18px;display:flex;flex-direction:column;gap:6px}
/* Related products */
.pd-related{padding:48px 0 72px;background:var(--gray-50)}
.pd-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px}

/* ── LIGHTBOX ──────────────────────────────────────────────────── */
.sp-lightbox{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sp-lightbox.open{opacity:1;pointer-events:all}
.sp-lightbox-inner{position:relative;display:inline-flex;align-items:center;justify-content:center}
.sp-lightbox-img{max-width:min(88vw,680px);max-height:82vh;object-fit:contain;border-radius:var(--radius-xl);display:block;transition:opacity .2s}
.sp-lightbox-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.sp-lightbox-close:hover{background:rgba(255,255,255,.3)}
.sp-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;z-index:1}
.sp-lightbox-nav:hover{background:rgba(255,255,255,.26)}
.sp-lightbox-prev{left:-66px}
.sp-lightbox-next{right:-66px}
.sp-lightbox-counter{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;letter-spacing:.04em}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:1100px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .pd-related-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .nav-links,.nav-phone{display:none}
  .nav-user-menu,.nav-actions .nav-btn{display:none}
  .hamburger{display:flex}
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .pd-grid{grid-template-columns:1fr;gap:32px}
  .pd-gallery{position:static}
  .pd-related-grid{grid-template-columns:repeat(2,1fr)}
  .shop-hero{height:320px}
  .filter-inner{gap:8px}
  .filter-controls{flex-wrap:wrap;width:100%}
  .sp-lightbox-prev{left:-44px}
  .sp-lightbox-next{right:-44px}
  .shop-hero-stats{gap:8px}
  .shop-hero-stat{padding:6px 12px;font-size:11px}
}
@media(max-width:520px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .filter-cats{gap:6px}
  .filter-btn{padding:7px 12px;font-size:12px}
  .pd-related-grid{grid-template-columns:repeat(2,1fr)}
  .cart-sidebar{max-width:100%}
  .wishlist-sidebar{max-width:100%}
  .sp-lightbox-prev{left:6px;background:rgba(0,0,0,.55);width:38px;height:38px}
  .sp-lightbox-next{right:6px;background:rgba(0,0,0,.55);width:38px;height:38px}
  .sp-lightbox-img{max-width:92vw;max-height:75vh}
  .shop-hero{height:280px}
  .nav-inner{gap:10px}
  .nav-logo img{height:38px}
  .nav-actions{gap:8px}
}