/* =============================================
   MFS HARDWARE STORE — style.css
   NEW CLEAN VERSION — replaces old messy file
   PASTE THIS AS YOUR FULL style.css
============================================= */

/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brand: #ff6600;
  --brand-dark: #e05500;
  --brand-light: #fff3eb;
  --black: #111;
  --dark: #222;
  --gray: #666;
  --light: #f5f5f5;
  --border: #e8e8e8;
  --white: #fff;
  --danger: #e53935;
  --font: 'Inter', sans-serif;
}

body { font-family: var(--font); background: #f5f5f5; color: var(--dark); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
img { display: block; }
button { font-family: var(--font); cursor: pointer; }

/* === TOP BAR === */
.top-bar { background: var(--black); color: #ccc; font-size: 12px; padding: 6px 0; }
.top-bar-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; }
.top-bar a { color: #ccc; margin-left: 15px; transition: color .2s; }
.top-bar a:hover { color: var(--brand); }
.top-bar-left { display: flex; align-items: center; gap: 5px; }
.top-bar-left span { color: var(--brand); font-weight: 600; }

/* === HEADER === */
.main-header { background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 1000; }
.header-main { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.logo-wrap { display: flex; flex-direction: column; line-height: 1.1; min-width: 150px; }
.logo-name { font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: -.5px; }
.logo-motto { font-size: 11px; color: var(--gray); }
.search-bar { flex: 1; display: flex; max-width: 620px; border: 2px solid var(--brand); border-radius: 6px; overflow: hidden; }
.search-bar select { padding: 0 10px; border: none; border-right: 1px solid #ddd; background: #f9f9f9; font-size: 13px; outline: none; min-width: 130px; }
.search-bar input { flex: 1; padding: 11px 14px; border: none; outline: none; font-size: 14px; font-family: var(--font); }
.search-bar button { padding: 0 20px; background: var(--brand); color: #fff; border: none; font-size: 16px; transition: background .2s; }
.search-bar button:hover { background: var(--brand-dark); }
.header-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 6px; transition: background .2s; color: var(--dark); gap: 3px; min-width: 54px; }
.icon-btn:hover { background: var(--light); color: var(--brand); }
.icon-btn i { font-size: 20px; }
.icon-btn span { font-size: 11px; font-weight: 500; }
.cart-wrap { position: relative; }
.cart-badge { position: absolute; top: 2px; right: 6px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.wa-btn { display: flex; align-items: center; gap: 6px; background: #25D366; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; transition: background .2s; white-space: nowrap; }
.wa-btn:hover { background: #1ebe5d; color: #fff; }

/* === CATEGORY NAV === */
.cat-nav { background: var(--brand); }
.cat-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; overflow-x: auto; scrollbar-width: none; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-link { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; font-weight: 500; padding: 11px 16px; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.15); transition: background .2s; }
.cat-link:hover { background: rgba(0,0,0,.15); }
.cat-link i { font-size: 15px; opacity: .9; }

/* === HERO SECTION === */
.hero-section { max-width: 1280px; margin: 15px auto; padding: 0 20px; display: flex; gap: 12px; }
.banner-slider { flex: 1; border-radius: 10px; overflow: hidden; position: relative; background: #eee; min-height: 320px; }
.slides { display: flex; height: 100%; transition: transform .6s ease-in-out; }
.slide { min-width: 100%; position: relative; }
.slide img { width: 100%; height: 320px; object-fit: cover; }
.slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,.6) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: center; padding: 40px; color: #fff; }
.slide-tag { font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; padding: 4px 10px; border-radius: 4px; width: fit-content; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.slide-overlay h2 { font-size: 26px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; max-width: 280px; }
.slide-overlay p { font-size: 13px; opacity: .9; margin-bottom: 18px; }
.slide-cta { background: var(--brand); color: #fff; border: none; padding: 10px 22px; border-radius: 6px; font-weight: 700; font-size: 14px; width: fit-content; transition: background .2s; display: inline-block; }
.slide-cta:hover { background: var(--brand-dark); }
.sl-prev, .sl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: rgba(255,255,255,.9); border: none; border-radius: 50%; font-size: 15px; color: var(--dark); display: flex; align-items: center; justify-content: center; z-index: 5; transition: background .2s; }
.sl-prev { left: 12px; }
.sl-next { right: 12px; }
.sl-prev:hover, .sl-next:hover { background: #fff; }
.slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 5; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .3s, transform .2s; }
.dot.active { background: var(--brand); transform: scale(1.3); }
.side-banners { display: flex; flex-direction: column; gap: 12px; width: 235px; }
.side-banner { border-radius: 10px; overflow: hidden; flex: 1; position: relative; min-height: 150px; }
.side-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.side-banner:hover img { transform: scale(1.04); }
.side-label { position: absolute; bottom: 10px; left: 12px; background: rgba(0,0,0,.7); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }

/* === TRUST STRIP === */
.trust-strip { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 15px; }
.trust-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 14px 10px; flex: 1; min-width: 180px; border-right: 1px solid var(--border); }
.trust-item:last-child { border-right: none; }
.trust-icon { width: 42px; height: 42px; background: var(--brand-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 18px; flex-shrink: 0; }
.trust-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--dark); }
.trust-text span { font-size: 11px; color: var(--gray); }

/* === SECTION HEADER === */
.sec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sec-title { display: flex; align-items: center; gap: 10px; }
.sec-title h2 { font-size: 20px; font-weight: 800; color: var(--dark); }
.title-bar { width: 4px; height: 24px; background: var(--brand); border-radius: 2px; }
.see-all { font-size: 13px; color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 5px; transition: gap .2s; }
.see-all:hover { gap: 8px; }

/* === CATEGORIES === */
.categories-section { max-width: 1280px; margin: 0 auto 20px; padding: 0 20px; }
.cats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat-card { background: var(--white); border-radius: 10px; border: 1px solid var(--border); transition: box-shadow .3s, transform .3s; display: flex; flex-direction: column; align-items: center; padding: 16px 10px 12px; gap: 8px; text-align: center; }
.cat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-4px); }
.cat-icon { width: 56px; height: 56px; background: var(--brand-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; transition: background .3s; }
.cat-card:hover .cat-icon { background: var(--brand); }
.cat-name { font-size: 13px; font-weight: 600; color: var(--dark); }
.cat-sub { font-size: 11px; color: var(--gray); }

/* === FLASH SALE === */
.flash-section { max-width: 1280px; margin: 0 auto 20px; padding: 0 20px; }
.flash-hdr { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; background: var(--white); padding: 14px 20px; border-radius: 10px; border: 1px solid var(--border); flex-wrap: wrap; }
.flash-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; }
.flash-timer-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.timer-lbl { font-size: 12px; color: var(--gray); font-weight: 500; }
.timer-blocks { display: flex; align-items: center; gap: 4px; }
.t-block { background: var(--dark); color: #fff; font-size: 18px; font-weight: 800; padding: 6px 10px; border-radius: 6px; min-width: 44px; text-align: center; }
.t-colon { font-size: 18px; font-weight: 800; color: var(--dark); }
.flash-all { font-size: 13px; color: var(--brand); font-weight: 600; margin-left: 12px; }
.flash-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.flash-track::-webkit-scrollbar { display: none; }
.flash-card { min-width: 175px; background: var(--white); border-radius: 10px; padding: 12px; border: 1px solid var(--border); transition: box-shadow .3s, transform .3s; cursor: pointer; }
.flash-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); }
.fc-img { position: relative; height: 125px; background: var(--light); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.fc-img img { width: 100%; height: 100%; object-fit: contain; }
.disc-badge { position: absolute; top: 6px; left: 6px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.fc-stock { height: 4px; background: #eee; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.fc-fill { height: 100%; background: var(--danger); border-radius: 2px; }
.flash-card h4 { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 5px; height: 34px; overflow: hidden; line-height: 1.3; }
.f-price-new { font-size: 15px; font-weight: 800; color: var(--danger); }
.f-price-old { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 5px; }
.flash-add { width: 100%; margin-top: 8px; padding: 8px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; transition: background .2s; }
.flash-add:hover { background: var(--brand-dark); }

/* === BRANDS === */
.brands-section { max-width: 1280px; margin: 0 auto 20px; padding: 0 20px; }
.brands-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.brand-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 18px; display: flex; align-items: center; justify-content: center; height: 88px; transition: box-shadow .3s, transform .3s; }
.brand-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); }
.brand-card img { max-width: 100%; max-height: 52px; object-fit: contain; filter: grayscale(30%); transition: filter .3s; }
.brand-card:hover img { filter: grayscale(0%); }

/* === FEATURED PRODUCTS === */
.products-section { max-width: 1280px; margin: 0 auto 20px; padding: 0 20px; }
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.product-card { background: var(--white); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-4px); }
.p-img { position: relative; height: 168px; background: var(--light); overflow: hidden; cursor: pointer; }
.p-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; padding: 10px; }
.product-card:hover .p-img img { transform: scale(1.08); }
.p-disc { position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.p-wish { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ccc; cursor: pointer; transition: color .2s; }
.p-wish:hover, .p-wish.active { color: var(--danger); }
.p-body { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.p-brand { font-size: 11px; color: var(--gray); font-weight: 500; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.p-name { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.4; margin-bottom: 5px; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.stars { color: #FFB800; font-size: 12px; }
.rev-count { font-size: 11px; color: var(--gray); }
.p-price { margin-top: auto; margin-bottom: 10px; }
.price-new { font-size: 17px; font-weight: 800; color: var(--danger); }
.price-old { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 5px; }
.p-cart-btn { width: 100%; padding: 9px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.p-cart-btn:hover { background: var(--brand-dark); }

/* === WHY CHOOSE US === */
.why-section { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.why-inner { max-width: 1280px; margin: 0 auto; padding: 30px 20px; }
.why-inner h2 { font-size: 20px; font-weight: 800; margin-bottom: 20px; text-align: center; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--light); border-radius: 10px; border: 1px solid var(--border); transition: box-shadow .3s; }
.why-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.why-icon { width: 44px; height: 44px; background: var(--brand-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 20px; flex-shrink: 0; }
.why-text strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.why-text p { font-size: 12px; color: var(--gray); line-height: 1.4; }

/* === FOOTER === */
.footer { background: #1a1a1a; color: #ccc; }
.footer-top { max-width: 1280px; margin: 0 auto; padding: 40px 20px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.f-logo { font-size: 22px; font-weight: 800; color: var(--brand); display: block; margin-bottom: 10px; }
.footer-brand p { font-size: 13px; line-height: 1.6; color: #999; margin-bottom: 16px; }
.socials { display: flex; gap: 10px; }
.soc-btn { width: 36px; height: 36px; border-radius: 50%; background: #333; color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .2s, color .2s; }
.soc-btn:hover { background: var(--brand); color: #fff; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: #999; margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: var(--brand); }
.f-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #999; }
.f-contact i { color: var(--brand); width: 18px; }
.f-wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 700; margin-top: 10px; transition: background .2s; }
.f-wa-btn:hover { background: #1ebe5d; color: #fff; }
.footer-bottom { border-top: 1px solid #333; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; font-size: 12px; color: #666; flex-wrap: wrap; gap: 10px; }
.pay-badges { display: flex; align-items: center; gap: 8px; }
.pay-b { background: #333; color: #ccc; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; }

/* === TOAST === */
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--dark); color: #fff; padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; opacity: 0; z-index: 9999; transition: all .3s ease; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .cats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .hero-section { flex-direction: column; }
  .side-banners { flex-direction: row; width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .header-main { flex-wrap: wrap; }
  .search-bar { order: 3; max-width: 100%; width: 100%; }
  .search-bar select { display: none; }
  .logo-wrap { min-width: unset; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cats-grid { grid-template-columns: repeat(3, 1fr); }
  .top-bar { display: none; }
  .cat-link span { display: none; }
  .cat-link { padding: 11px 14px; }
  .slide img { height: 200px; }
  .slide-overlay h2 { font-size: 18px; }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
}




/* ==============================================
   PRODUCTS PAGE — paste this at the BOTTOM
   of your existing style.css file
=============================================== */

/* === BREADCRUMB === */
.breadcrumb-bar { background: var(--white); border-bottom: 1px solid var(--border); }
.breadcrumb-inner { max-width: 1280px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); }
.breadcrumb-inner a { color: var(--gray); transition: color .2s; }
.breadcrumb-inner a:hover { color: var(--brand); }
.bc-sep { font-size: 10px; color: #ccc; }
.breadcrumb-inner span:last-child { color: var(--dark); font-weight: 600; }

/* === SHOP PAGE LAYOUT === */
.shop-page { max-width: 1280px; margin: 20px auto; padding: 0 20px; display: flex; gap: 20px; align-items: flex-start; }

/* === LEFT SIDEBAR === */
.shop-sidebar { width: 240px; flex-shrink: 0; background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; position: sticky; top: 80px; }
.sidebar-close-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--dark); }
.sidebar-close { background: none; border: none; font-size: 16px; color: var(--gray); display: none; }
.filter-block { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.filter-block-title { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .4px; }
.filter-options { display: flex; flex-direction: column; gap: 6px; }
.filter-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dark); cursor: pointer; padding: 3px 0; }
.filter-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.filter-check:hover { color: var(--brand); }
.filter-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dark); cursor: pointer; padding: 3px 0; margin-bottom: 4px; }
.filter-radio input[type="radio"] { width: 15px; height: 15px; accent-color: var(--brand); }
.stars-small { color: #FFB800; font-size: 12px; }
.price-range-display { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 8px; }
.range-slider { width: 100%; accent-color: var(--brand); margin-bottom: 6px; cursor: pointer; }
.clear-filters-btn { width: 100%; padding: 11px; background: none; border: 1px solid var(--border); color: var(--gray); font-size: 13px; font-weight: 600; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.clear-filters-btn:hover { background: var(--light); color: var(--danger); border-color: var(--danger); }

/* === SHOP MAIN === */
.shop-main { flex: 1; min-width: 0; }

/* === TOOLBAR === */
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.toolbar-left { display: flex; align-items: center; gap: 12px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mobile-filter-btn { display: none; align-items: center; gap: 6px; background: var(--brand); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.result-count { font-size: 13px; color: var(--gray); }
.result-count strong { color: var(--dark); }
.sort-label { font-size: 13px; color: var(--gray); }
.sort-select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--dark); outline: none; font-family: var(--font); cursor: pointer; }
.sort-select:focus { border-color: var(--brand); }
.view-toggle { display: flex; gap: 4px; }
.view-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--white); border-radius: 6px; font-size: 14px; color: var(--gray); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.view-btn.active, .view-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* === ACTIVE FILTER CHIPS === */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-chip { display: flex; align-items: center; gap: 5px; background: var(--brand-light); border: 1px solid #ffd9b8; color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.filter-chip button { background: none; border: none; color: var(--brand); font-size: 14px; line-height: 1; padding: 0; margin: 0; }

/* === PRODUCT GRID === */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.product-grid.list-view { grid-template-columns: 1fr; }

/* === PRODUCT CARD === */
.product-card { background: var(--white); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; cursor: pointer; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-4px); }
.p-img { position: relative; height: 180px; background: var(--light); overflow: hidden; }
.p-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; padding: 10px; }
.product-card:hover .p-img img { transform: scale(1.08); }
.p-disc { position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; z-index: 2; }
.p-wish { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ccc; cursor: pointer; transition: color .2s; z-index: 2; }
.p-wish:hover, .p-wish.active { color: var(--danger); }
.p-body { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.p-brand { font-size: 11px; color: var(--gray); font-weight: 500; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.p-name { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.4; margin-bottom: 5px; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.stars { color: #FFB800; font-size: 12px; }
.rev-count { font-size: 11px; color: var(--gray); }
.p-price { margin-top: auto; margin-bottom: 10px; }
.price-new { font-size: 16px; font-weight: 800; color: var(--danger); }
.price-old { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 5px; }
.p-cart-btn { width: 100%; padding: 9px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.p-cart-btn:hover { background: var(--brand-dark); }

/* === LIST VIEW === */
.product-grid.list-view .product-card { flex-direction: row; height: 140px; transform: none !important; }
.product-grid.list-view .p-img { width: 140px; height: 140px; flex-shrink: 0; }
.product-grid.list-view .p-body { flex-direction: row; align-items: center; flex: 1; gap: 15px; padding: 14px 16px; }
.product-grid.list-view .p-name { height: auto; -webkit-line-clamp: 1; flex: 1; font-size: 14px; }
.product-grid.list-view .p-stars { margin-bottom: 0; }
.product-grid.list-view .p-price { margin: 0; white-space: nowrap; }
.product-grid.list-view .p-cart-btn { width: auto; padding: 9px 18px; white-space: nowrap; }
.product-grid.list-view .p-brand { display: none; }

/* === SKELETON LOADER === */
.skeleton-card { height: 300px; border-radius: 10px; background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* === EMPTY STATE === */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #999; }
.empty-state i { font-size: 48px; color: #ddd; display: block; margin-bottom: 16px; }
.empty-state strong { display: block; font-size: 18px; color: #555; margin-bottom: 8px; }
.empty-state p { font-size: 13px; margin-bottom: 16px; }
.empty-state a { display: inline-block; padding: 10px 24px; background: var(--brand); color: #fff; border-radius: 6px; font-weight: 700; font-size: 13px; }

/* === PAGINATION === */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.page-btn { min-width: 36px; height: 36px; border: 1px solid var(--border); background: var(--white); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--dark); transition: all .2s; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.page-btn:hover { border-color: var(--brand); color: var(--brand); }
.page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* === FILTER OVERLAY (mobile) === */
.filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }

/* === RESPONSIVE === */
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .shop-sidebar { position: fixed; top: 0; left: -260px; width: 260px; height: 100%; border-radius: 0; z-index: 1000; overflow-y: auto; transition: left .3s ease; border: none; box-shadow: 2px 0 16px rgba(0,0,0,.15); }
  .shop-sidebar.open { left: 0; }
  .filter-overlay.open { display: block; }
  .mobile-filter-btn { display: flex !important; }
  .sidebar-close { display: block; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .shop-page { padding: 0 12px; margin: 12px auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .p-img { height: 140px; }
  .p-name { font-size: 12px; }
  .price-new { font-size: 14px; }
  .toolbar-right .sort-label { display: none; }
  .view-toggle { display: none; }
}






/* ==============================================
   PRODUCT DETAIL PAGE — paste at BOTTOM of style.css
=============================================== */

/* === PAGE LAYOUT === */
.pd-page { max-width: 1280px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 420px 1fr 260px; gap: 24px; align-items: flex-start; }

/* === IMAGE GALLERY === */
.pd-gallery { display: flex; gap: 12px; }
.pd-thumbnails { display: flex; flex-direction: column; gap: 8px; width: 72px; flex-shrink: 0; }
.pd-thumb { width: 72px; height: 72px; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--light); transition: border-color .2s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-thumb.active, .pd-thumb:hover { border-color: var(--brand); }
.pd-main-img-wrap { flex: 1; position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pd-main-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: transform .4s ease; }
.pd-main-img-wrap:hover img { transform: scale(1.08); }
.pd-disc-badge { position: absolute; top: 12px; left: 12px; background: var(--danger); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 5px; }

/* === PRODUCT INFO === */
.pd-info { display: flex; flex-direction: column; }
.pd-brand-row { font-size: 12px; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.pd-brand-row a { color: var(--brand); }
.pd-title { font-size: 20px; font-weight: 700; color: var(--dark); line-height: 1.4; margin-bottom: 10px; }
.pd-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pd-stars { color: #FFB800; font-size: 16px; }
.pd-rev-count { font-size: 13px; color: var(--gray); }
.pd-stock-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.pd-stock-tag.in-stock { background: #e8f5e9; color: #2e7d32; }
.pd-stock-tag.low-stock { background: #fff3e0; color: #e65100; }
.pd-stock-tag.out-stock { background: #fce4ec; color: #c62828; }
.pd-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pd-price-new { font-size: 28px; font-weight: 800; color: var(--danger); }
.pd-price-old { font-size: 16px; color: #aaa; text-decoration: line-through; }
.pd-savings { font-size: 13px; font-weight: 700; color: #2e7d32; background: #e8f5e9; padding: 3px 8px; border-radius: 4px; }
.pd-divider-line { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.pd-delivery-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark); margin-bottom: 8px; }
.pd-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pd-qty-label { font-size: 14px; font-weight: 600; color: var(--dark); }
.pd-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pd-qty-ctrl button { width: 36px; height: 36px; background: var(--light); border: none; font-size: 13px; color: var(--dark); transition: background .2s; }
.pd-qty-ctrl button:hover { background: var(--brand); color: #fff; }
.pd-qty-ctrl input { width: 52px; height: 36px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-size: 15px; font-weight: 700; font-family: var(--font); outline: none; }
.pd-stock-hint { font-size: 12px; color: var(--gray); }
.pd-action-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pd-cart-btn { flex: 1; padding: 13px 20px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; min-width: 160px; }
.pd-cart-btn:hover { background: var(--brand-dark); }
.pd-buy-btn { flex: 1; padding: 13px 20px; background: var(--dark); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; min-width: 140px; }
.pd-buy-btn:hover { background: #000; }
.pd-wish-btn { width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); font-size: 18px; color: #ccc; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.pd-wish-btn:hover, .pd-wish-btn.active { color: var(--danger); border-color: var(--danger); }
.pd-share-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); }
.pd-share-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--dark); transition: all .2s; }
.pd-share-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* === SIDE CARD === */
.pd-side-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; position: sticky; top: 80px; }
.pd-side-title { font-size: 13px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
.pd-side-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark); margin-bottom: 10px; }
.pd-side-row i { color: var(--brand); width: 16px; text-align: center; flex-shrink: 0; }
.pd-side-small { font-size: 12px; color: var(--gray); }
.pd-wa-order { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; background: #25D366; color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; margin: 12px 0; transition: background .2s; }
.pd-wa-order:hover { background: #1ebe5d; color: #fff; }
.pd-side-divider { border-top: 1px solid var(--border); margin: 14px 0; }

/* === TABS === */
.pd-tabs-section { max-width: 1280px; margin: 24px auto; padding: 0 20px; }
.pd-tabs { display: flex; border-bottom: 2px solid var(--border); gap: 0; }
.pd-tab { padding: 12px 24px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 14px; font-weight: 600; color: var(--gray); cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.pd-tab:hover { color: var(--brand); }
.pd-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.pd-tab-badge { background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; min-width: 20px; text-align: center; }
.pd-tab-content { background: var(--white); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: 24px; }
.pd-pane { display: none; }
.pd-pane.active { display: block; }

/* === SPECS TABLE === */
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table td { padding: 10px 14px; font-size: 13px; }
.specs-table td:first-child { width: 40%; color: var(--gray); font-weight: 600; background: var(--light); }
.specs-table td:last-child { color: var(--dark); }

/* === REVIEWS === */
.reviews-summary { display: flex; gap: 30px; padding: 20px; background: var(--light); border-radius: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.avg-score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 100px; }
.avg-num { font-size: 48px; font-weight: 800; color: var(--dark); line-height: 1; }
.avg-stars { color: #FFB800; font-size: 20px; margin: 6px 0; }
.avg-count { font-size: 12px; color: var(--gray); }
.rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 200px; }
.rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.rating-bar-row span:first-child { width: 30px; color: var(--gray); text-align: right; }
.rating-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rating-bar-fill { height: 100%; background: #FFB800; border-radius: 4px; transition: width .5s ease; }
.rating-bar-row span:last-child { width: 24px; color: var(--gray); }
.review-card { padding: 16px 0; border-bottom: 1px solid var(--border); }
.review-card:last-child { border-bottom: none; }
.rc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rc-name { font-size: 14px; font-weight: 600; color: var(--dark); }
.rc-date { font-size: 12px; color: var(--gray); margin-left: auto; }
.rc-stars { color: #FFB800; font-size: 13px; margin-bottom: 6px; }
.rc-text { font-size: 13px; color: #555; line-height: 1.6; }

/* === REVIEW FORM === */
.review-form-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.review-form-wrap h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.review-star-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--gray); }
.star-pick { font-size: 24px; color: #ddd; cursor: pointer; transition: color .15s; }
.star-pick.lit { color: #FFB800; }
.review-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: var(--font); outline: none; margin-bottom: 10px; transition: border-color .2s; resize: vertical; }
.review-input:focus { border-color: var(--brand); }
.review-submit-btn { padding: 10px 24px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; transition: background .2s; }
.review-submit-btn:hover { background: var(--brand-dark); }

/* === RELATED PRODUCTS === */
.related-section { background: var(--white); border-top: 1px solid var(--border); padding: 24px 0; }
.related-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* === STICKY BOTTOM BAR === */
.sticky-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); padding: 10px 20px; display: flex; align-items: center; gap: 14px; z-index: 900; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.sticky-thumb { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--light); padding: 4px; }
.sticky-info { flex: 1; overflow: hidden; }
.sticky-name { display: block; font-size: 13px; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-price { display: block; font-size: 15px; font-weight: 800; color: var(--danger); }
.sticky-cart-btn { padding: 10px 20px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: background .2s; }
.sticky-cart-btn:hover { background: var(--brand-dark); }
.sticky-buy-btn { padding: 10px 20px; background: var(--dark); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.sticky-buy-btn:hover { background: #000; }

/* === RESPONSIVE === */
@media (max-width: 1100px) { .pd-page { grid-template-columns: 360px 1fr; } .pd-side-card { display: none; } }
@media (max-width: 768px) {
  .pd-page { grid-template-columns: 1fr; padding: 0 12px; }
  .pd-gallery { flex-direction: column-reverse; }
  .pd-thumbnails { flex-direction: row; width: 100%; height: auto; }
  .pd-thumb { width: 60px; height: 60px; }
  .pd-title { font-size: 17px; }
  .pd-price-new { font-size: 22px; }
  .pd-tabs-section { padding: 0 12px; }
  .related-inner { padding: 0 12px; }
  .sticky-thumb { display: none; }
}


/* ==============================================
   CART PAGE — paste at BOTTOM of style.css
=============================================== */

/* === CHECKOUT STEPS BAR === */
.checkout-steps-bar { background: var(--white); border-bottom: 1px solid var(--border); }
.steps-inner { max-width: 700px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: center; }
.chk-step { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.chk-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--border); color: var(--gray); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all .3s; }
.chk-step span { font-size: 12px; color: var(--gray); font-weight: 500; white-space: nowrap; }
.chk-step.active .chk-step-num { background: var(--brand); color: #fff; }
.chk-step.active span { color: var(--brand); font-weight: 700; }
.chk-step.done .chk-step-num { background: #2e7d32; color: #fff; }
.chk-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; min-width: 60px; margin-bottom: 20px; }

/* === CART PAGE LAYOUT === */
.cart-page { max-width: 1280px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: flex-start; }

/* === CART LEFT === */
.cart-left { display: flex; flex-direction: column; gap: 12px; }
.cart-left-header { display: flex; justify-content: space-between; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; flex-wrap: wrap; gap: 10px; }
.cart-left-header h2 { font-size: 16px; font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 8px; }
.continue-link { font-size: 13px; color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 6px; transition: gap .2s; }
.continue-link:hover { gap: 9px; }

/* === CART ITEM CARD === */
.cart-item-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; gap: 16px; align-items: flex-start; transition: box-shadow .2s; }
.cart-item-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.cart-item-img { width: 90px; height: 90px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--light); flex-shrink: 0; cursor: pointer; }
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-brand { font-size: 11px; color: var(--gray); font-weight: 500; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.cart-item-name { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 6px; cursor: pointer; }
.cart-item-name:hover { color: var(--brand); }
.cart-item-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cart-item-price { font-size: 17px; font-weight: 800; color: var(--danger); }
.cart-item-old { font-size: 12px; color: #aaa; text-decoration: line-through; }
.cart-item-disc { font-size: 11px; font-weight: 700; background: #fce4ec; color: var(--danger); padding: 2px 6px; border-radius: 4px; }
.cart-item-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cart-qty-ctrl { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cart-qty-ctrl button { width: 32px; height: 32px; background: var(--light); border: none; font-size: 13px; color: var(--dark); transition: background .2s; }
.cart-qty-ctrl button:hover { background: var(--brand); color: #fff; }
.cart-qty-ctrl span { width: 40px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.cart-item-remove { font-size: 12px; color: var(--gray); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: color .2s; padding: 0; }
.cart-item-remove:hover { color: var(--danger); }
.cart-item-subtotal { text-align: right; flex-shrink: 0; }
.cart-item-sub-label { font-size: 11px; color: var(--gray); display: block; margin-bottom: 3px; }
.cart-item-sub-amount { font-size: 16px; font-weight: 800; color: var(--dark); }

/* === EMPTY CART === */
.cart-empty { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 60px 20px; text-align: center; }
.cart-empty i { font-size: 56px; color: #ddd; display: block; margin-bottom: 16px; }
.cart-empty h3 { font-size: 20px; font-weight: 700; color: #555; margin-bottom: 8px; }
.cart-empty p { font-size: 14px; color: var(--gray); margin-bottom: 20px; }
.cart-empty a { display: inline-block; padding: 12px 28px; background: var(--brand); color: #fff; border-radius: 8px; font-weight: 700; font-size: 14px; transition: background .2s; }
.cart-empty a:hover { background: var(--brand-dark); }

/* === CART RIGHT === */
.cart-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }
.cart-summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.summary-card-title { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.summary-card-title i { color: var(--brand); }

/* === DELIVERY OPTIONS === */
.delivery-option-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s, background .2s; }
.delivery-option-row:hover { border-color: var(--brand); background: var(--brand-light); }
.delivery-option-row input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.delivery-option-info { flex: 1; }
.delivery-option-name { display: block; font-size: 13px; font-weight: 600; color: var(--dark); }
.delivery-option-desc { display: block; font-size: 11px; color: var(--gray); }
.delivery-option-price { font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.delivery-option-price.free { color: #2e7d32; }

/* === ORDER SUMMARY === */
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dark); margin-bottom: 10px; }
.summary-divider { border-top: 1px solid var(--border); margin: 10px 0; }
.summary-total-row { font-weight: 700; font-size: 15px; }
.summary-total-amount { font-size: 20px; font-weight: 800; color: var(--danger); }
.checkout-proceed-btn { width: 100%; padding: 14px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; margin-top: 14px; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.checkout-proceed-btn:hover { background: var(--brand-dark); }
.cart-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; background: #25D366; color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; margin-top: 8px; transition: background .2s; }
.cart-wa-btn:hover { background: #1ebe5d; color: #fff; }
.cart-trust-row { display: flex; justify-content: space-around; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cart-trust-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--gray); }
.cart-trust-item i { font-size: 16px; color: var(--brand); }

/* === RESPONSIVE === */
@media (max-width: 900px) { .cart-page { grid-template-columns: 1fr; } .cart-right { position: static; } }
@media (max-width: 480px) {
  .cart-page { padding: 0 12px; }
  .cart-item-card { flex-wrap: wrap; }
  .cart-item-subtotal { width: 100%; text-align: left; margin-top: 8px; display: flex; align-items: center; gap: 10px; }
  .cart-item-img { width: 72px; height: 72px; }
  .chk-step span { display: none; }
}





/* ==============================================
   CHECKOUT PAGE — paste at BOTTOM of style.css
=============================================== */

/* === CHECKOUT HEADER === */
.checkout-header { background: var(--white); border-bottom: 1px solid var(--border); }
.checkout-header-inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.checkout-header-trust { display: flex; gap: 20px; font-size: 12px; color: var(--gray); flex-wrap: wrap; }
.checkout-header-trust span { display: flex; align-items: center; gap: 5px; }
.checkout-header-trust i { color: var(--brand); }

/* === CHECKOUT PAGE LAYOUT === */
.checkout-page { max-width: 1100px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: flex-start; }

/* === CHECKOUT CARD === */
.checkout-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.checkout-card-title { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.step-badge { width: 26px; height: 26px; background: var(--brand); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* === FORM ELEMENTS === */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.req { color: var(--danger); }
.form-optional { font-size: 11px; color: var(--gray); font-weight: 400; }
.form-input { padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none; transition: border-color .2s; color: var(--dark); background: var(--white); }
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,102,0,.08); }
.form-input.error { border-color: var(--danger); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--gray); margin-top: 4px; }
.form-error { font-size: 11px; color: var(--danger); margin-top: 4px; min-height: 16px; font-weight: 500; }

/* === DELIVERY OPTIONS === */
.delivery-opts { display: flex; flex-direction: column; gap: 10px; }
.delivery-opt-card { display: block; cursor: pointer; }
.delivery-opt-card input[type="radio"] { display: none; }
.delivery-opt-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--border); border-radius: 10px; transition: all .2s; }
.delivery-opt-card input:checked + .delivery-opt-body { border-color: var(--brand); background: var(--brand-light); }
.delivery-opt-body:hover { border-color: var(--brand); }
.delivery-opt-icon { width: 38px; height: 38px; background: var(--brand-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 16px; flex-shrink: 0; }
.delivery-opt-info { flex: 1; }
.delivery-opt-name { display: block; font-size: 14px; font-weight: 600; color: var(--dark); }
.delivery-opt-desc { display: block; font-size: 12px; color: var(--gray); }
.delivery-opt-price { font-size: 14px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.delivery-opt-price.free { color: #2e7d32; }

/* === STEP NAV BUTTONS === */
.step-next-btn { width: 100%; padding: 14px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; margin-top: 8px; }
.step-next-btn:hover { background: var(--brand-dark); }
.step-nav-row { display: flex; gap: 10px; margin-top: 8px; }
.step-back-btn { padding: 14px 20px; background: var(--white); color: var(--dark); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all .2s; white-space: nowrap; }
.step-back-btn:hover { border-color: var(--brand); color: var(--brand); }

/* === PAYMENT METHODS === */
.payment-method-card { border: 2px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.payment-method-card.active { border-color: var(--brand); }
.pm-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.pm-header input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.pm-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.mpesa-icon { background: #e8f5e9; color: #2e7d32; }
.cash-icon { background: #fff8e1; color: #f57f17; }
.wa-icon { background: #e8f5e9; color: #25D366; }
.pm-info { flex: 1; }
.pm-name { display: block; font-size: 14px; font-weight: 700; color: var(--dark); }
.pm-desc { display: block; font-size: 12px; color: var(--gray); }
.pm-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.pm-badge.popular { background: var(--brand-light); color: var(--brand); }
.pm-body { padding: 0 16px 16px; }
.mpesa-steps { display: flex; flex-direction: column; gap: 8px; background: var(--light); border-radius: 8px; padding: 12px; }
.mpesa-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark); }
.mpesa-step span { width: 22px; height: 22px; background: var(--brand); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cash-note { background: var(--light); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--dark); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.cash-note i { color: var(--brand); margin-top: 2px; flex-shrink: 0; }

/* === REVIEW STEP === */
.review-section { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.review-section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--light); border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--dark); }
.review-section-header span { display: flex; align-items: center; gap: 8px; }
.review-section-header i { color: var(--brand); }
.review-edit-btn { font-size: 12px; color: var(--brand); font-weight: 600; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; text-decoration: none; }
.review-detail-row { display: flex; gap: 8px; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.review-detail-row:last-child { border-bottom: none; }
.review-detail-label { width: 110px; color: var(--gray); font-weight: 500; flex-shrink: 0; }
.review-detail-value { color: var(--dark); font-weight: 600; }
.review-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.review-item-row:last-child { border-bottom: none; }
.review-item-img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--light); padding: 4px; flex-shrink: 0; }
.review-item-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--dark); }
.review-item-qty { font-size: 12px; color: var(--gray); display: block; }
.review-item-price { font-size: 14px; font-weight: 700; color: var(--danger); white-space: nowrap; }

/* === PLACE ORDER === */
.place-order-btn { flex: 1; padding: 14px 20px; background: #2e7d32; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.place-order-btn:hover { background: #1b5e20; }

/* === ORDER SUCCESS === */
.order-success { text-align: center; padding: 30px 20px; }
.success-icon { font-size: 64px; color: #2e7d32; margin-bottom: 16px; }
.order-success h2 { font-size: 24px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.order-success p { font-size: 14px; color: var(--gray); margin-bottom: 16px; }
.success-order-num { display: inline-block; background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 10px 20px; font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 16px; }
.success-details { background: var(--light); border-radius: 10px; padding: 16px; text-align: left; margin-bottom: 20px; font-size: 13px; line-height: 1.8; color: var(--dark); }
.success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.success-wa-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: #25D366; color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; transition: background .2s; }
.success-wa-btn:hover { background: #1ebe5d; color: #fff; }
.success-continue-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--brand); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; transition: background .2s; }
.success-continue-btn:hover { background: var(--brand-dark); color: #fff; }

/* === RIGHT SUMMARY === */
.checkout-right { position: sticky; top: 20px; }
.chk-summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.chk-summary-divider { border-top: 1px solid var(--border); margin: 10px 0; }
.chk-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.chk-item-row:last-child { border-bottom: none; }
.chk-item-img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--light); padding: 3px; flex-shrink: 0; }
.chk-item-info { flex: 1; min-width: 0; }
.chk-item-name { font-size: 12px; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chk-item-qty { font-size: 11px; color: var(--gray); }
.chk-item-price { font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.chk-trust-row { display: flex; justify-content: space-around; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* === RESPONSIVE === */
@media (max-width: 900px) { .checkout-page { grid-template-columns: 1fr; } .checkout-right { position: static; } }
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .checkout-page { padding: 0 12px; }
  .checkout-header-trust { display: none; }
  .chk-step span { display: none; }
}






/* ==============================================
   ADD TO BOTTOM OF style.css
   ACCOUNT + WISHLIST + TRACK ORDER PAGES
=============================================== */

/* ==============================
   SHARED: ACTIVE ICON (current page)
============================== */
.active-icon { color: var(--brand) !important; }
.active-icon i { color: var(--brand); }

/* ==============================
   ACCOUNT PAGE
============================== */
.acc-auth-wrap {
  min-height: 60vh; display: flex; align-items: center;
  justify-content: center; padding: 40px 16px;
  background: var(--light);
}
.acc-auth-card {
  background: var(--white); border-radius: 14px;
  width: 100%; max-width: 440px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
.auth-tabs {
  display: flex; border-bottom: 2px solid var(--border);
}
.auth-tab {
  flex: 1; padding: 15px; background: none; border: none;
  font-size: 14px; font-weight: 600; color: var(--gray);
  cursor: pointer; transition: all .2s; border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.auth-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
#form-signin, #form-signup { padding: 28px; }
.auth-welcome { text-align: center; margin-bottom: 24px; }
.auth-icon {
  width: 64px; height: 64px; background: var(--brand-light);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 28px; color: var(--brand);
  margin: 0 auto 12px;
}
.auth-welcome h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.auth-welcome p { font-size: 13px; color: var(--gray); }
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--dark); margin-bottom: 6px;
}
.auth-field input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none;
  transition: border-color .2s;
}
.auth-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,102,0,.08); }
.auth-pass-wrap { position: relative; }
.auth-pass-wrap input { padding-right: 42px; }
.auth-pass-wrap button {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--gray); cursor: pointer; font-size: 14px;
}
.auth-err { display: block; font-size: 11px; color: var(--danger); margin-top: 4px; font-weight: 500; min-height: 14px; }
.auth-submit-btn {
  width: 100%; padding: 13px; background: var(--brand); color: #fff;
  border: none; border-radius: 8px; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .2s; margin-top: 4px;
}
.auth-submit-btn:hover { background: var(--brand-dark); }
.auth-switch-text { text-align: center; font-size: 13px; color: var(--gray); margin-top: 16px; }
.auth-switch-text a { color: var(--brand); font-weight: 600; }

/* DASHBOARD */
.acc-dashboard-wrap { background: var(--light); min-height: 60vh; padding: 24px 16px 48px; }
.acc-page-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 260px 1fr; gap: 20px;
}

/* SIDEBAR */
.acc-sidebar { display: flex; flex-direction: column; gap: 12px; }
.acc-profile-card {
  background: var(--white); border-radius: 12px;
  padding: 24px 20px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.acc-avatar {
  width: 68px; height: 68px; background: var(--brand);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff; margin: 0 auto 12px;
}
.acc-profile-name { font-size: 16px; font-weight: 800; color: var(--dark); }
.acc-profile-phone { font-size: 13px; color: var(--gray); margin-top: 3px; }
.acc-profile-location { font-size: 12px; color: var(--gray); margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.acc-side-nav {
  background: var(--white); border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.acc-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; font-size: 13.5px; font-weight: 500;
  color: var(--dark); transition: all .2s; border-left: 3px solid transparent;
}
.acc-nav-link i { width: 18px; text-align: center; color: var(--gray); }
.acc-nav-link:hover { background: var(--brand-light); color: var(--brand); border-left-color: var(--brand); }
.acc-nav-link:hover i { color: var(--brand); }
.acc-nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 700; border-left-color: var(--brand); }
.acc-nav-link.active i { color: var(--brand); }
.acc-nav-badge {
  margin-left: auto; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.acc-nav-badge-red { background: var(--danger); }
.acc-nav-logout { color: var(--danger) !important; }
.acc-nav-logout i { color: var(--danger) !important; }
.acc-nav-logout:hover { background: #fef2f2 !important; border-left-color: var(--danger) !important; }

/* CONTENT */
.acc-content { display: flex; flex-direction: column; gap: 16px; }
.acc-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.acc-section-header h2 {
  font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.acc-section-header h2 i { color: var(--brand); }
.acc-track-link {
  font-size: 13px; color: var(--brand); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}

/* ORDER FILTER TABS */
.order-filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.order-tab {
  padding: 7px 16px; border: 1.5px solid var(--border);
  border-radius: 20px; background: var(--white); font-size: 12px; font-weight: 600;
  color: var(--gray); cursor: pointer; transition: all .2s;
}
.order-tab.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.order-tab:hover { border-color: var(--brand); color: var(--brand); }

/* ORDER CARDS */
.acc-order-card {
  background: var(--white); border-radius: 12px;
  border: 1px solid var(--border); margin-bottom: 12px;
  overflow: hidden; transition: box-shadow .2s;
}
.acc-order-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.acc-order-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.acc-order-id { font-size: 14px; font-weight: 800; color: var(--dark); }
.acc-order-date { font-size: 12px; color: var(--gray); margin-left: 10px; }
.acc-order-body {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; flex-wrap: wrap;
}
.acc-order-thumbs { display: flex; gap: 6px; }
.acc-order-thumbs img {
  width: 48px; height: 48px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--light); padding: 3px;
}
.acc-order-info { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--gray); }
.acc-order-delivery { display: flex; align-items: center; gap: 5px; }
.acc-order-total { font-size: 16px; font-weight: 800; color: var(--brand); margin-left: auto; }
.acc-order-actions {
  display: flex; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--border); background: var(--light); flex-wrap: wrap;
}
.acc-order-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
  transition: all .2s; border: none; cursor: pointer;
}
.acc-order-btn.primary { background: var(--brand); color: #fff; }
.acc-order-btn.primary:hover { background: var(--brand-dark); }
.acc-order-btn.wa { background: #25D366; color: #fff; }
.acc-order-btn.wa:hover { background: #1ebe5d; }

/* STATUS BADGES */
.acc-status-badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 20px; font-size: 11px; font-weight: 700;
}
.badge-pending { background: #fff7ed; color: #d97706; }
.badge-processing { background: #eff6ff; color: #3b82f6; }
.badge-delivered { background: #f0fdf4; color: #16a34a; }
.badge-cancelled { background: #fef2f2; color: #dc2626; }

/* EMPTY STATE */
.acc-empty-orders {
  text-align: center; padding: 48px 20px;
  background: var(--white); border-radius: 12px;
  border: 1px dashed var(--border);
}
.acc-empty-orders i { font-size: 48px; color: #ddd; display: block; margin-bottom: 14px; }
.acc-empty-orders h3 { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.acc-shop-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  background: var(--brand); color: #fff; padding: 10px 22px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
}

/* PROFILE FORM */
.acc-form-card { background: var(--white); border-radius: 12px; padding: 24px; }
.acc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.acc-form-group { display: flex; flex-direction: column; gap: 6px; }
.acc-form-group label { font-size: 12px; font-weight: 600; color: var(--dark); }
.acc-input {
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 14px; font-family: var(--font);
  outline: none; transition: border-color .2s;
}
.acc-input:focus { border-color: var(--brand); }
.acc-input:read-only { background: var(--light); cursor: not-allowed; }
.acc-save-btn {
  background: var(--brand); color: #fff; border: none; border-radius: 8px;
  padding: 11px 28px; font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s;
}
.acc-save-btn:hover { background: var(--brand-dark); }

/* ==============================
   WISHLIST PAGE
============================== */
.wl-page-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.wl-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.wl-title-block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wl-title-block h1 {
  font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.wl-title-block h1 i { color: var(--danger); }
.wl-count-badge {
  background: var(--brand-light); color: var(--brand);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}
.wl-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s; border: 1.5px solid;
}
.wl-action-btn.secondary { background: var(--white); border-color: var(--border); color: var(--dark); }
.wl-action-btn.secondary:hover { border-color: var(--brand); color: var(--brand); }
.wl-action-btn.danger { background: #fef2f2; border-color: #fecaca; color: var(--danger); }
.wl-action-btn.danger:hover { background: var(--danger); color: #fff; }

.wl-toolbar { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; }
.wl-sort-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--white);
}
.wl-sort-wrap select { border: none; background: none; font-size: 13px; outline: none; cursor: pointer; font-family: var(--font); }

/* WISHLIST GRID */
.wl-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.wl-item-card {
  background: var(--white); border-radius: 12px; border: 1px solid var(--border);
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.wl-item-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.wl-remove-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; background: rgba(255,255,255,.9);
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--gray); transition: all .2s;
}
.wl-remove-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.wl-disc-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.wl-flash-badge {
  position: absolute; top: 30px; left: 8px; z-index: 2;
  background: #FFB800; color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.wl-item-img {
  aspect-ratio: 1; overflow: hidden; padding: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--light);
}
.wl-item-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.wl-item-card:hover .wl-item-img img { transform: scale(1.05); }
.wl-item-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.wl-item-brand { font-size: 10px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .5px; }
.wl-item-name { font-size: 13px; font-weight: 600; color: var(--dark); cursor: pointer; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-item-name:hover { color: var(--brand); }
.wl-item-stars { font-size: 12px; color: #FFB800; }
.wl-item-stars span { color: var(--gray); font-size: 11px; }
.wl-item-price-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wl-item-price { font-size: 15px; font-weight: 800; color: var(--brand); }
.wl-item-old { font-size: 12px; color: #aaa; text-decoration: line-through; }
.wl-stock-tag { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.wl-stock-ok { color: #22c55e; }
.wl-stock-low { color: #f59e0b; }
.wl-stock-out { color: var(--danger); }
.wl-item-footer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.wl-cart-btn {
  flex: 1; padding: 9px; background: var(--brand); color: #fff; border: none;
  border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .2s;
}
.wl-cart-btn:hover { background: var(--brand-dark); }
.wl-cart-btn:disabled { background: #ddd; color: #aaa; cursor: not-allowed; }
.wl-view-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--light); border-radius: 7px; color: var(--gray);
  transition: all .2s; border: 1px solid var(--border); font-size: 13px;
}
.wl-view-btn:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }

/* EMPTY */
.wl-empty {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center; background: var(--white);
  border-radius: 12px; border: 1px dashed var(--border);
}
.wl-empty-icon { font-size: 56px; color: #e0e0e0; margin-bottom: 16px; }
.wl-empty h3 { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.wl-empty p { font-size: 13px; color: var(--gray); margin-bottom: 20px; }
.wl-browse-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: #fff; padding: 11px 24px;
  border-radius: 8px; font-weight: 700; font-size: 14px;
}

/* SUGGESTIONS */
.wl-suggest-section { margin-top: 40px; }

/* ==============================
   TRACK ORDER PAGE
============================== */
.track-page-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; display: flex; flex-direction: column; gap: 24px; }

/* SEARCH CARD */
.track-search-card {
  background: var(--white); border-radius: 14px;
  padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.track-search-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.track-search-icon {
  width: 60px; height: 60px; background: var(--brand-light);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--brand); flex-shrink: 0;
}
.track-search-header h1 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.track-search-header p { font-size: 13px; color: var(--gray); }
.track-search-form { display: flex; flex-direction: column; gap: 10px; }
.track-input-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.track-input-wrap { position: relative; display: flex; width: 100%; }
.track-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: 14px; }
.track-input-wrap input {
  flex: 1; padding: 13px 14px 13px 38px;
  border: 1.5px solid var(--border); border-radius: 8px 0 0 8px;
  font-size: 14px; font-family: var(--font); outline: none;
  transition: border-color .2s;
}
.track-input-wrap input:focus { border-color: var(--brand); }
.track-search-btn {
  padding: 13px 24px; background: var(--brand); color: #fff;
  border: none; border-radius: 0 8px 8px 0; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px;
  transition: background .2s;
}
.track-search-btn:hover { background: var(--brand-dark); }
.track-hint { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 5px; }
.track-hint i { color: var(--brand); }

/* STATUS CARD */
.track-status-card { background: var(--white); border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.track-order-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 10px; }
.track-order-id { font-size: 18px; font-weight: 800; color: var(--dark); margin-right: 10px; }
.track-order-date { font-size: 13px; color: var(--gray); }

/* STATUS PILL */
.track-status-pill {
  display: inline-flex; align-items: center; padding: 6px 16px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
}
.pill-pending { background: #fff7ed; color: #d97706; }
.pill-processing { background: #eff6ff; color: #3b82f6; }
.pill-shipped { background: #f0fdf4; color: #16a34a; }
.pill-delivered { background: #f0fdf4; color: #16a34a; }
.pill-cancelled { background: #fef2f2; color: #dc2626; }

/* PROGRESS STEPS */
.track-steps { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 10px; }
.track-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.track-step-dot {
  width: 44px; height: 44px; border-radius: 50%; background: var(--light);
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--gray); z-index: 1; transition: all .3s;
}
.track-step-line {
  position: absolute; top: 22px; left: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0; transition: background .3s;
}
.track-step-line.last { display: none; }
.track-step-label { font-size: 12px; font-weight: 700; color: var(--gray); margin-top: 10px; text-align: center; }
.track-step-sub { font-size: 11px; color: #aaa; text-align: center; }

/* Active step */
.track-step.active .track-step-dot { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.track-step.active .track-step-label { color: var(--brand); }
/* Done step */
.track-step.done .track-step-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.track-step.done .track-step-line { background: #22c55e; }
.track-step.done .track-step-label { color: #22c55e; }
/* Cancelled */
.track-step.cancelled .track-step-dot { background: #fef2f2; border-color: #fecaca; color: var(--danger); }

.track-cancelled-bar {
  background: #fef2f2; border-radius: 8px; padding: 12px 16px;
  color: var(--danger); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
}

/* DETAILS GRID */
.track-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.track-info-card { background: var(--white); border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.track-info-card h3 { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.track-info-card h3 i { color: var(--brand); }
.track-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.track-info-row:last-child { border-bottom: none; }
.track-info-row span { color: var(--gray); }
.track-info-row strong { font-weight: 600; color: var(--dark); text-align: right; }
.track-info-total { padding-top: 10px !important; }
.track-info-total span, .track-info-total strong { font-size: 15px; font-weight: 800; }
.track-info-total strong { color: var(--brand); }

/* ITEMS */
.track-items-card { background: var(--white); border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.track-items-card h3 { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.track-items-card h3 i { color: var(--brand); }
.track-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.track-item-row:last-child { border-bottom: none; }
.track-item-img { width: 50px; height: 50px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--light); padding: 4px; flex-shrink: 0; }
.track-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.track-item-name { font-size: 13px; font-weight: 600; color: var(--dark); }
.track-item-qty { font-size: 12px; color: var(--gray); }
.track-item-price { font-size: 14px; font-weight: 800; color: var(--brand); white-space: nowrap; }

/* HELP CARD */
.track-help-card {
  background: var(--brand-light); border-radius: 12px; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.track-help-text { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.track-help-text i { font-size: 24px; color: var(--brand); flex-shrink: 0; }
.track-help-text strong { display: block; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
.track-help-text span { color: var(--gray); }
.track-wa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #25D366; color: #fff; padding: 10px 20px;
  border-radius: 8px; font-weight: 700; font-size: 13px; white-space: nowrap;
  transition: background .2s;
}
.track-wa-btn:hover { background: #1ebe5d; }

/* NOT FOUND */
.track-notfound-card {
  background: var(--white); border-radius: 14px; padding: 48px 32px;
  text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.track-notfound-icon { font-size: 56px; color: #ddd; margin-bottom: 16px; }
.track-notfound-card h3 { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.track-notfound-card p { font-size: 14px; color: var(--gray); }

/* RECENT ORDERS (logged in) */
.track-recent-header { margin-bottom: 12px; }
.track-recent-header h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.track-recent-header h2 i { color: var(--brand); }
.track-recent-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
}
.track-recent-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: var(--brand); }
.track-recent-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.track-recent-id { font-size: 14px; font-weight: 800; color: var(--dark); }
.track-recent-date { font-size: 12px; color: var(--gray); flex: 1; }
.track-recent-body { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--gray); flex-wrap: wrap; }
.track-recent-total { font-weight: 700; color: var(--brand); margin-left: auto; }
.track-recent-cta { color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 4px; font-size: 12px; }

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 900px) {
  .acc-page-inner { grid-template-columns: 1fr; }
  .acc-sidebar { flex-direction: row; flex-wrap: wrap; }
  .acc-profile-card { flex: 1; min-width: 200px; }
  .acc-side-nav { flex: 2; min-width: 280px; }
  .wl-grid { grid-template-columns: repeat(3, 1fr); }
  .track-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wl-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-form-grid { grid-template-columns: 1fr; }
  .track-steps { gap: 4px; }
  .track-step-dot { width: 36px; height: 36px; font-size: 15px; }
  .track-step-label { font-size: 10px; }
  .track-step-sub { display: none; }
  .wl-header-row { flex-direction: column; align-items: flex-start; }
}





/* ==============================================
   ADD TO BOTTOM OF style.css
   PRODUCT DETAIL PAGE — 03product.html
=============================================== */

/* ==============================
   PAGE LAYOUT
============================== */
.pd-page {
  max-width: 1200px; margin: 0 auto;
  padding: 24px 16px 0;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 40px;
  align-items: start;
}

/* ==============================
   GALLERY
============================== */
.pd-gallery { position: sticky; top: 20px; }

.pd-main-img-wrap {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--white); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: crosshair;
}
.pd-main-img-wrap img {
  width: 100%; height: 100%; object-fit: contain; padding: 12px;
  transition: transform .3s;
}

/* IMG BADGES */
.pd-img-badges {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.pd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px;
}
.pd-badge.flash { background: #FFB800; color: #fff; }
.pd-badge.discount { background: var(--danger); color: #fff; }
.pd-badge.new { background: #8b5cf6; color: #fff; }
.pd-badge.featured { background: var(--brand); color: #fff; }

/* ZOOM LENS */
.pd-zoom-lens {
  position: absolute; width: 120px; height: 120px;
  background: rgba(255,102,0,.08); border: 1.5px solid var(--brand);
  border-radius: 4px; display: none; pointer-events: none; z-index: 3;
}
/* ZOOM RESULT */
.pd-zoom-result {
  display: none; position: absolute; left: calc(100% + 12px); top: 0;
  width: 400px; height: 400px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--white) no-repeat;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 100;
  overflow: hidden;
}

/* THUMBNAILS */
.pd-thumbs {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.pd-thumb {
  width: 68px; height: 68px; border: 1.5px solid var(--border);
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--white); transition: border-color .2s, transform .2s;
  display: flex; align-items: center; justify-content: center;
}
.pd-thumb:hover { border-color: var(--brand); transform: scale(1.05); }
.pd-thumb.active { border-color: var(--brand); border-width: 2px; }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* SHARE ROW */
.pd-share-row {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; color: var(--gray);
}
.pd-share-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: all .2s;
}
.pd-share-btn.wa { color: #25D366; }
.pd-share-btn.wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.pd-share-btn.fb { color: #1877F2; }
.pd-share-btn.fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.pd-share-btn.copy:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ==============================
   DETAILS PANEL
============================== */
.pd-details { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }

.pd-brand-tag {
  font-size: 11px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: 1px;
}
.pd-name { font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0; }

.pd-rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-stars { display: flex; align-items: center; gap: 4px; font-size: 15px; color: #FFB800; }
.pd-rating-val { font-size: 13px; font-weight: 700; color: var(--dark); }
.pd-review-count { font-size: 13px; color: var(--brand); font-weight: 600; }
.pd-dot { color: var(--gray); font-size: 12px; }
.pd-sku-tag { font-size: 11px; color: var(--gray); font-family: monospace; }

/* PRICE BLOCK */
.pd-price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-price-main { font-size: 30px; font-weight: 800; color: var(--brand); }
.pd-price-old { font-size: 16px; color: #aaa; text-decoration: line-through; }
.pd-savings-tag {
  display: inline-flex; align-items: center; background: #f0fdf4;
  color: #16a34a; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; border: 1px solid #bbf7d0;
}

/* FLASH BAR */
.pd-flash-bar {
  background: linear-gradient(135deg, #FFB800 0%, #ff6600 100%);
  color: #fff; border-radius: 8px; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}
.pd-countdown { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; }
.pd-countdown span {
  background: rgba(0,0,0,.2); padding: 3px 7px; border-radius: 5px; min-width: 28px; text-align: center;
}

/* STOCK ROW */
.pd-stock-row { font-size: 13px; font-weight: 600; }
.pd-stock-ok { color: #16a34a; display: flex; align-items: center; gap: 6px; }
.pd-stock-low { color: #d97706; display: flex; align-items: center; gap: 6px; }
.pd-stock-out { color: var(--danger); display: flex; align-items: center; gap: 6px; }

/* VARIANTS */
.pd-variants-label { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.pd-variants-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-variant-btn {
  padding: 8px 16px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--white); font-size: 13px; font-weight: 600;
  color: var(--dark); cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px;
}
.pd-variant-btn:hover { border-color: var(--brand); color: var(--brand); }
.pd-variant-btn.active { border-color: var(--brand); background: var(--brand-light); color: var(--brand); border-width: 2px; }
.pd-variant-out { opacity: .5; cursor: not-allowed; }
.pd-variant-out:hover { border-color: var(--border); color: var(--dark); }
.pd-variant-low { font-size: 10px; color: #d97706; font-weight: 500; }
.pd-variant-out-label { font-size: 10px; color: var(--danger); font-weight: 500; }

/* COVERAGE CALCULATOR */
.pd-coverage-calc {
  background: var(--brand-light); border: 1px solid #ffd6b3;
  border-radius: 10px; padding: 16px; display: none;
}
.pd-coverage-header { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.pd-coverage-header i { color: var(--brand); }
.pd-coverage-inputs { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pd-cov-field { display: flex; flex-direction: column; gap: 4px; }
.pd-cov-field label { font-size: 11px; font-weight: 600; color: var(--dark); }
.pd-cov-field input {
  width: 90px; padding: 8px 10px; border: 1.5px solid var(--border);
  border-radius: 7px; font-size: 13px; outline: none;
}
.pd-cov-field input:focus { border-color: var(--brand); }
.pd-cov-times, .pd-cov-eq { font-size: 18px; color: var(--gray); padding-bottom: 6px; }
.pd-cov-result {
  background: var(--white); border-radius: 8px; padding: 8px 14px;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border);
}
.pd-cov-result span { font-size: 12px; color: var(--gray); }
.pd-cov-result strong { font-size: 14px; font-weight: 800; color: var(--brand); }
.pd-cov-note { font-size: 11px; color: var(--gray); margin-top: 6px; display: block; }

/* QTY + BUTTONS */
.pd-qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-qty-ctrl {
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
}
.pd-qty-ctrl button {
  width: 38px; height: 42px; background: var(--light); border: none;
  font-size: 14px; cursor: pointer; color: var(--dark); transition: background .2s;
}
.pd-qty-ctrl button:hover { background: var(--brand); color: #fff; }
.pd-qty-ctrl input {
  width: 56px; height: 42px; text-align: center;
  border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
  font-size: 16px; font-weight: 700; outline: none;
}
.pd-unit-label { font-size: 12px; color: var(--gray); }

.pd-action-btns { display: flex; gap: 10px; }
.pd-atc-btn {
  flex: 1; padding: 14px 20px; background: var(--brand); color: #fff;
  border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .2s, transform .1s;
}
.pd-atc-btn:hover { background: var(--brand-dark); }
.pd-atc-btn:active { transform: scale(.98); }
.pd-atc-btn:disabled { background: #ddd; cursor: not-allowed; }

.pd-buy-btn {
  padding: 14px 24px; background: var(--dark); color: #fff;
  border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background .2s; white-space: nowrap;
}
.pd-buy-btn:hover { background: #000; }
.pd-buy-btn:disabled { background: #ddd; cursor: not-allowed; }

.pd-secondary-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-wish-btn {
  flex: 1; padding: 11px 16px; background: var(--white); color: var(--dark);
  border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .2s;
}
.pd-wish-btn:hover, .pd-wish-btn.wished { border-color: #ef4444; color: #ef4444; background: #fff5f5; }
.pd-wish-btn .fa-heart { transition: color .2s; }

.pd-wa-ask-btn {
  flex: 1; padding: 11px 16px; background: #f0fdf4; color: #16a34a;
  border: 1.5px solid #bbf7d0; border-radius: 10px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .2s;
}
.pd-wa-ask-btn:hover { background: #25D366; color: #fff; border-color: #25D366; }

/* TRUST BADGES */
.pd-trust-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding: 14px; background: var(--light);
  border-radius: 10px; border: 1px solid var(--border);
}
.pd-trust-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; font-size: 11px; font-weight: 600; color: var(--gray); text-align: center;
}
.pd-trust-item i { font-size: 18px; color: var(--brand); }

/* ==============================
   TABS SECTION
============================== */
.pd-tabs-section { max-width: 1200px; margin: 32px auto 0; padding: 0 16px; }
.pd-tabs-wrap { border-bottom: 2px solid var(--border); margin-bottom: 0; }
.pd-tabs { display: flex; gap: 0; }
.pd-tab {
  padding: 13px 22px; background: none; border: none;
  font-size: 14px; font-weight: 600; color: var(--gray);
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: all .2s; display: flex; align-items: center; gap: 7px;
}
.pd-tab:hover { color: var(--brand); }
.pd-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.pd-tab-badge {
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
}

.pd-tab-body { background: var(--white); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; padding: 28px; margin-bottom: 32px; }
.pd-tab-pane { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }

/* DESCRIPTION */
.pd-description { font-size: 14px; line-height: 1.8; color: var(--dark); white-space: pre-line; }

/* SPECS TABLE */
.pd-specs-table { width: 100%; border-collapse: collapse; }
.pd-specs-table tr { border-bottom: 1px solid var(--border); }
.pd-spec-even { background: var(--light); }
.pd-spec-key { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--dark); width: 40%; }
.pd-spec-val { padding: 12px 16px; font-size: 13px; color: var(--gray); }
.pd-specs-empty { padding: 24px; text-align: center; color: var(--gray); font-size: 13px; }

/* REVIEWS */
.pd-review-summary { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pd-rating-big { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px; }
.pd-rating-num { font-size: 52px; font-weight: 800; color: var(--dark); line-height: 1; }
.pd-rating-stars { font-size: 18px; color: #FFB800; }
.pd-rating-total { font-size: 12px; color: var(--gray); }
.pd-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.pd-rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pd-rb-label { width: 32px; color: var(--dark); font-weight: 600; display: flex; align-items: center; gap: 3px; }
.pd-rb-label i { color: #FFB800; font-size: 11px; }
.pd-rb-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.pd-rb-fill { height: 100%; background: #FFB800; border-radius: 4px; transition: width .6s ease; }
.pd-rb-pct { width: 32px; text-align: right; color: var(--gray); }

.pd-reviews-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.pd-reviews-empty { display: flex; flex-direction: column; align-items: center; padding: 32px; text-align: center; color: var(--gray); gap: 10px; }
.pd-reviews-empty i { font-size: 36px; color: #ddd; }
.pd-reviews-empty p { font-size: 13px; }

.pd-review-item { padding: 16px; border: 1px solid var(--border); border-radius: 10px; }
.pd-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pd-reviewer-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.pd-reviewer-info { flex: 1; }
.pd-reviewer-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--dark); }
.pd-review-date { font-size: 11px; color: var(--gray); }
.pd-review-stars { font-size: 13px; color: #FFB800; margin-left: auto; }
.pd-review-body { font-size: 13px; color: var(--dark); line-height: 1.6; }

/* REVIEW FORM */
.pd-review-form-wrap { border-top: 1px solid var(--border); padding-top: 24px; }
.pd-review-form-title { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.pd-review-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.pd-rf-group { display: flex; flex-direction: column; gap: 6px; }
.pd-rf-group label { font-size: 12px; font-weight: 700; color: var(--dark); }
.pd-rf-input {
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: var(--font); outline: none; resize: vertical;
  transition: border-color .2s;
}
.pd-rf-input:focus { border-color: var(--brand); }
.pd-star-picker { display: flex; gap: 6px; font-size: 24px; color: var(--border); cursor: pointer; }
.pd-star-pick { transition: color .15s, transform .1s; }
.pd-star-pick:hover, .pd-star-pick.hovered, .pd-star-pick.selected { color: #FFB800; transform: scale(1.15); }
.pd-rf-submit {
  background: var(--brand); color: #fff; border: none;
  padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s; align-self: flex-start;
}
.pd-rf-submit:hover { background: var(--brand-dark); }

/* ==============================
   RELATED PRODUCTS
============================== */
.pd-related-section { background: var(--light); padding: 32px 0 48px; margin-top: 0; }
.pd-related-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ==============================
   STICKY BAR
============================== */
.pd-sticky-bar {
  position: fixed; bottom: -80px; left: 0; right: 0; z-index: 200;
  background: var(--white); border-top: 2px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
  transition: bottom .3s cubic-bezier(.4,0,.2,1);
}
.pd-sticky-bar.visible { bottom: 0; }
.pd-sticky-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
}
.pd-sticky-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); }
.pd-sticky-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pd-sticky-name { font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pd-sticky-price { font-size: 15px; font-weight: 800; color: var(--brand); }
.pd-sticky-actions { display: flex; align-items: center; gap: 10px; }
.pd-sticky-view-cart {
  font-size: 13px; color: var(--brand); font-weight: 700;
  display: none; align-items: center; gap: 4px; white-space: nowrap;
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1100px) {
  .pd-zoom-result { display: none !important; }
  .pd-main-img-wrap { cursor: default; }
}
@media (max-width: 900px) {
  .pd-page { grid-template-columns: 1fr; gap: 20px; }
  .pd-gallery { position: static; }
  .pd-trust-row { grid-template-columns: repeat(2, 1fr); }
  .pd-price-main { font-size: 24px; }
  .pd-name { font-size: 18px; }
  .pd-action-btns { flex-direction: column; }
  .pd-buy-btn { justify-content: center; }
}
@media (max-width: 600px) {
  .pd-trust-row { grid-template-columns: repeat(2, 1fr); }
  .pd-variants-grid { gap: 6px; }
  .pd-variant-btn { padding: 7px 12px; font-size: 12px; }
  .pd-tabs { overflow-x: auto; }
  .pd-tab { padding: 11px 14px; font-size: 13px; white-space: nowrap; }
  .pd-tab-body { padding: 16px; }
  .pd-coverage-inputs { flex-direction: column; align-items: flex-start; }
  .pd-sticky-inner { gap: 10px; }
  .pd-sticky-name { max-width: 120px; }
}



/* ==============================================
   ADD TO BOTTOM OF assets/01css/style.css
   PRODUCTS LISTING PAGE — 02products.html
   All pl-* classes + product card p-* classes
================================================ */

/* ==============================
   SHOP WRAPPER — SIDEBAR + MAIN
============================== */
.pl-shop-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  align-items: start;
}

/* ==============================
   LEFT SIDEBAR
============================== */
.pl-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pl-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  background: var(--light);
  position: sticky;
  top: 0;
  z-index: 2;
}

.pl-sidebar-header i { color: var(--brand); margin-right: 6px; }

.pl-sidebar-close {
  display: none;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--gray);
  padding: 4px;
  line-height: 1;
}

/* FILTER GROUPS */
.pl-filter-group {
  border-bottom: 1px solid var(--border);
}

.pl-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.pl-filter-title:hover { background: var(--light); }
.pl-filter-title i {
  font-size: 11px;
  color: var(--gray);
  transition: transform .2s;
}

.pl-filter-body {
  padding: 4px 18px 14px;
}

/* CATEGORY BUTTONS */
.pl-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.pl-cat-btn:hover { background: var(--light); color: var(--brand); }
.pl-cat-btn.active {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
}
.pl-cat-count {
  font-size: 11px;
  color: var(--gray);
  background: var(--light);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.pl-cat-btn.active .pl-cat-count { background: rgba(255,102,0,.15); color: var(--brand); }

/* PRICE RANGE */
.pl-price-range { width: 100%; }
.pl-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pl-price-sep { color: var(--gray); font-size: 13px; flex-shrink: 0; }
.pl-price-field { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pl-price-field label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; }
.pl-price-field input {
  width: 100%;
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  outline: none;
  font-family: var(--font);
  transition: border-color .2s;
}
.pl-price-field input:focus { border-color: var(--brand); }

.pl-price-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.pl-price-shortcuts button {
  padding: 5px 6px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all .15s;
}
.pl-price-shortcuts button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* BRAND LIST */
.pl-brand-list { display: flex; flex-direction: column; gap: 2px; }
.pl-brand-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--gray);
  background: var(--light);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

/* CHECKBOXES */
.pl-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
  transition: background .15s;
}
.pl-check-label:hover { background: var(--light); }
.pl-check-label input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }

/* RADIO (RATING) */
.pl-rating-options { display: flex; flex-direction: column; gap: 2px; }
.pl-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
  transition: background .15s;
}
.pl-radio-label:hover { background: var(--light); }
.pl-radio-label input[type="radio"] { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }
.pl-stars-sm { color: #FFB800; font-size: 13px; }

/* CLEAR ALL BTN */
.pl-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 36px);
  margin: 14px 18px 18px;
  padding: 10px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all .2s;
}
.pl-clear-btn:hover { border-color: var(--danger); color: var(--danger); background: #fff5f5; }

/* ==============================
   MOBILE FILTER OVERLAY
============================== */
.pl-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
  backdrop-filter: blur(2px);
}
.pl-filter-overlay.active { display: block; }

/* ==============================
   ACTIVE FILTERS BAR (chips)
============================== */
.pl-active-filters-bar {
  background: #fffbf7;
  border-bottom: 1px solid #ffe5cc;
  padding: 8px 0;
}
.pl-active-filters-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pl-af-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pl-af-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.pl-af-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pl-af-chip i { cursor: pointer; font-size: 10px; opacity: .7; transition: opacity .15s; }
.pl-af-chip i:hover { opacity: 1; }

.pl-af-clear {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background .15s;
}
.pl-af-clear:hover { background: #fff5f5; }

/* ==============================
   PRODUCTS MAIN AREA
============================== */
.pl-main {
  padding-left: 24px;
  min-width: 0;
}

/* TOOLBAR */
.pl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.pl-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-toolbar-right { display: flex; align-items: center; gap: 10px; }

.pl-filter-toggle {
  display: none; /* hidden on desktop, shown on mobile */
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  transition: border-color .2s;
  position: relative;
}
.pl-filter-toggle:hover { border-color: var(--brand); color: var(--brand); }

.pl-filter-count {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pl-result-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
}

/* SORT */
.pl-sort-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--gray);
  height: 38px;
  transition: border-color .2s;
}
.pl-sort-wrap:hover { border-color: var(--brand); }
.pl-sort-wrap select {
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
}

/* VIEW TOGGLE */
.pl-view-toggle {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.pl-view-btn {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: none;
  font-size: 14px;
  color: var(--gray);
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-view-btn:first-child { border-right: 1px solid var(--border); }
.pl-view-btn:hover { background: var(--light); }
.pl-view-btn.active { background: var(--brand); color: #fff; }

/* ==============================
   PRODUCT GRID (overrides old .product-grid for this page)
============================== */
.pl-main .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* ==============================
   PRODUCT CARD — GRID VIEW (p- classes)
============================== */
.pl-main .product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative;
}
.pl-main .product-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  transform: translateY(-4px);
}

/* IMAGE AREA */
.p-img {
  position: relative;
  height: 180px;
  background: var(--light);
  overflow: hidden;
  flex-shrink: 0;
}
.p-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .4s ease;
}
.pl-main .product-card:hover .p-img img { transform: scale(1.07); }

/* DISCOUNT BADGE */
.p-disc {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

/* FLASH DOT */
.p-flash-dot {
  position: absolute;
  top: 8px;
  right: 40px;
  font-size: 16px;
  z-index: 2;
  line-height: 1;
}

/* OUT OF STOCK OVERLAY */
.p-oos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: .5px;
  z-index: 2;
}

/* WISHLIST HEART */
.p-wish {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.p-wish:hover { color: #ef4444; border-color: #ef4444; }
.p-wish.active { color: #ef4444; border-color: #ef4444; background: #fff5f5; }

/* CARD BODY */
.p-body {
  padding: 10px 12px 6px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}

.p-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.p-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  min-height: 34px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.stars { color: #FFB800; font-size: 12px; letter-spacing: .5px; }
.rev-count { font-size: 11px; color: var(--gray); }

.p-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.price-new { font-size: 16px; font-weight: 800; color: var(--danger); }
.price-old { font-size: 11px; color: #aaa; text-decoration: line-through; }

.p-variants-tag {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  margin-top: 2px;
}

.p-low-stock {
  font-size: 11px;
  color: #d97706;
  font-weight: 700;
  margin-top: 2px;
}

/* CARD FOOTER */
.p-footer {
  padding: 8px 12px 12px;
  margin-top: auto;
}

.p-cart-btn {
  width: 100%;
  padding: 9px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s, transform .1s;
  font-family: var(--font);
}
.p-cart-btn:hover { background: var(--brand-dark); }
.p-cart-btn:active { transform: scale(.97); }
.p-cart-btn:disabled {
  background: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
}

/* ==============================
   PRODUCT CARD — LIST VIEW
============================== */
.pl-list-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pl-list-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 0;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative;
}
.pl-list-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateX(3px);
}

.pl-list-img {
  position: relative;
  width: 160px;
  height: 160px;
  background: var(--light);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.pl-list-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform .35s;
}
.pl-list-card:hover .pl-list-img img { transform: scale(1.05); }

.pl-list-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.pl-list-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
}

.pl-list-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}

.pl-list-sku {
  font-size: 11px;
  color: var(--gray);
  margin-top: 2px;
}
.pl-list-sku code { font-family: monospace; background: var(--light); padding: 1px 5px; border-radius: 3px; }

.pl-list-right {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-width: 180px;
  border-left: 1px solid var(--border);
  background: var(--light);
}

.pl-list-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.pl-list-price .price-new { font-size: 20px; }
.pl-list-saving {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 10px;
}

.pl-list-stock {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pl-list-stock.ok { color: #16a34a; }
.pl-list-stock.out { color: var(--danger); }

.pl-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.pl-list-actions .p-cart-btn { flex: 1; }
.pl-list-actions .p-wish {
  position: static;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
}

/* ==============================
   SKELETON LOADER
============================== */
.pl-skeleton {
  height: 280px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 12px;
  border: 1px solid var(--border);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==============================
   EMPTY STATE
============================== */
.pl-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 12px;
}
.pl-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ccc;
  margin-bottom: 8px;
}
.pl-empty h3 { font-size: 18px; font-weight: 800; color: var(--dark); }
.pl-empty p { font-size: 13px; color: var(--gray); max-width: 300px; }
.pl-empty-clear {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  margin-top: 8px;
  font-family: var(--font);
}
.pl-empty-clear:hover { background: var(--brand-dark); }

/* ==============================
   PAGINATION
============================== */
.pl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 32px 0 16px;
  flex-wrap: wrap;
}
.pl-pg-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
}
.pl-pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.pl-pg-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pl-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pl-pg-dots { color: var(--gray); font-size: 14px; padding: 0 4px; line-height: 38px; }

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1024px) {
  .pl-shop-wrap { grid-template-columns: 230px 1fr; gap: 0; }
}

@media (max-width: 860px) {
  /* Sidebar goes off-screen on mobile */
  .pl-shop-wrap { grid-template-columns: 1fr; padding-top: 12px; }

  .pl-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
    z-index: 310;
    transition: left .3s cubic-bezier(.4,0,.2,1);
  }
  .pl-sidebar.open { left: 0; }
  .pl-sidebar-close { display: flex; }

  .pl-main { padding-left: 0; }
  .pl-filter-toggle { display: flex; }

  .pl-list-card { grid-template-columns: 120px 1fr; }
  .pl-list-img { width: 120px; height: 130px; }
  .pl-list-right { display: none; }

  .pl-main .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .pl-main .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .p-img { height: 140px; }
  .p-name { font-size: 12px; min-height: 30px; }
  .price-new { font-size: 14px; }

  .pl-list-card { grid-template-columns: 90px 1fr; }
  .pl-list-img { width: 90px; height: 110px; }
  .pl-list-name { font-size: 13px; }

  .pl-toolbar { gap: 8px; }
  .pl-sort-wrap select { font-size: 12px; max-width: 120px; }

  .pl-active-filters-inner { gap: 5px; }
}