/* ============================================================
   eVehicle — WooCommerce CSS
   Step 10 — shop (sh-*) + product detail (pd-*)
   ============================================================ */

/* ── WooCommerce Core Resets ── */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    margin-bottom: 20px;
}
.woocommerce-message { background: #f0fdf4; border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; color: #166534; font-size: .88rem; }
.woocommerce-error  { background: #fff5f5; border-left: 4px solid var(--danger); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; color: #991b1b; font-size: .88rem; }
.woocommerce-info   { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; color: #1e40af; font-size: .88rem; }

/* ============================================================
   SHOP PROMO STRIP
   ============================================================ */
.sh-promo-strip { background: var(--primary); padding: 10px 0; }
.sh-promo-inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.sh-promo-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--dark); font-family: var(--font-primary); }
.sh-promo-item i { font-size: .8rem; }

/* ============================================================
   SHOP HERO
   ============================================================ */
.sh-hero {
    background: linear-gradient(135deg, var(--dark) 0%, #1a0d2e 100%);
    padding: 36px 0 28px;
    position: relative;
    overflow: hidden;
}
.sh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 100% at 90% 50%, rgba(0,200,150,.1), transparent 65%);
}
.sh-hero-inner { position: relative; z-index: 1; }
.sh-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.sh-hero h1 { color: var(--white); font-size: clamp(1.3rem,2.5vw,1.9rem); margin-bottom: 6px; }
.sh-hero h1 span { color: var(--primary); }
.sh-hero-sub { color: rgba(255,255,255,.55); font-size: .88rem; }
.sh-hero-stats { display: flex; gap: 20px; flex-shrink: 0; }
.sh-stat { text-align: center; }
.sh-stat-val { font-size: 1.4rem; font-weight: 900; color: var(--primary); font-family: var(--font-primary); line-height: 1; }
.sh-stat-lbl { font-size: .66rem; color: rgba(255,255,255,.45); font-family: var(--font-primary); margin-top: 3px; }

/* Category quick tabs */
.sh-quick-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-qcat {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-full);
    font-size: .78rem; font-weight: 600;
    color: rgba(255,255,255,.65);
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-primary); white-space: nowrap;
    text-decoration: none;
}
.sh-qcat:hover, .sh-qcat.active { background: var(--primary); border-color: var(--primary); color: var(--dark); }

/* Hero search */
.sh-search {
    display: flex; max-width: 480px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: var(--radius-full);
    overflow: hidden; margin-top: 16px; transition: var(--transition);
}
.sh-search:focus-within { border-color: var(--primary); }
.sh-search input { flex:1; background:transparent; border:none; padding:10px 15px; color:var(--white); font-size:.88rem; font-family:var(--font-body); min-width:0; outline:none; }
.sh-search input::placeholder { color:rgba(255,255,255,.35); }
.sh-search button { padding:0 18px; background:var(--primary); border:none; color:var(--dark); font-weight:700; font-size:.85rem; font-family:var(--font-primary); cursor:pointer; flex-shrink:0; display:flex; align-items:center; gap:6px; transition:var(--transition); }
.sh-search button:hover { background:var(--primary-dark); color:var(--white); }

/* ============================================================
   SHOP LAYOUT
   ============================================================ */
.sh-layout { display: grid; grid-template-columns: 256px 1fr; gap: 22px; padding: 28px 0 60px; align-items: start; }

/* ── Filter Sidebar ── */
.sh-sidebar {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    position: sticky; top: calc(var(--header-height) + 14px);
    max-height: calc(100vh - var(--header-height) - 28px);
    overflow-y: auto;
}
.sh-sidebar::-webkit-scrollbar { width: 4px; }
.sh-sidebar::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
.sh-filter-head { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--border); background:var(--gray-50); position:sticky; top:0; z-index:1; }
.sh-filter-head h5 { font-size:.87rem; font-weight:700; display:flex; align-items:center; gap:7px; }
.sh-filter-head h5 i { color:var(--primary); }
.sh-filter-clear { font-size:.75rem; color:var(--primary); background:none; border:none; cursor:pointer; font-weight:600; font-family:var(--font-primary); }
.sh-fg { border-bottom: 1px solid var(--border); }
.sh-fg:last-child { border-bottom: none; }
.sh-fg-hd { display:flex; align-items:center; justify-content:space-between; padding:11px 17px; cursor:pointer; transition:var(--transition); user-select:none; }
.sh-fg-hd:hover { background:var(--gray-50); }
.sh-fg-hd span { font-size:.81rem; font-weight:700; color:var(--text); font-family:var(--font-primary); }
.sh-chev { font-size:.63rem; color:var(--gray-400); transition:var(--transition); }
.sh-fg.open .sh-chev { transform:rotate(180deg); }
.sh-fg-bd { display:none; padding:4px 17px 13px; }
.sh-fg.open .sh-fg-bd { display:block; }
.sh-check { display:flex; align-items:center; justify-content:space-between; padding:5px 0; }
.sh-check label { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-muted); cursor:pointer; flex:1; }
.sh-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--primary); flex-shrink:0; }
.sh-cnt { font-size:.68rem; color:var(--gray-400); background:var(--gray-100); padding:1px 6px; border-radius:var(--radius-full); }

/* Price range */
.sh-price-wrap { padding:4px 0 8px; }
.sh-price-lbl { display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-muted); margin-bottom:6px; }
input[type=range] { accent-color:var(--primary); width:100%; cursor:pointer; }
.sh-price-inputs { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.sh-price-inp label { font-size:.66rem; color:var(--gray-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:3px; }
.sh-price-inp input { width:100%; padding:6px 9px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.79rem; color:var(--text); font-family:var(--font-body); box-sizing:border-box; }
.sh-price-inp input:focus { border-color:var(--primary); outline:none; }

/* Star rating filter */
.sh-star-row { display:flex; align-items:center; gap:7px; padding:5px 0; cursor:pointer; }
.sh-star-row input[type=radio] { width:15px; height:15px; accent-color:var(--primary); }
.sh-stars { color:var(--warning); font-size:.75rem; display:flex; gap:1px; }

/* Toggle */
.sh-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.sh-toggle-row > label:first-child { font-size:.8rem; color:var(--text-muted); }
.sh-tgl { position:relative; width:36px; height:20px; display:inline-block; flex-shrink:0; }
.sh-tgl input { opacity:0; width:0; height:0; position:absolute; }
.sh-tgl-sl { position:absolute; inset:0; background:var(--gray-300); border-radius:20px; cursor:pointer; transition:var(--transition); }
.sh-tgl-sl::before { content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:var(--transition); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sh-tgl input:checked + .sh-tgl-sl { background:var(--primary); }
.sh-tgl input:checked + .sh-tgl-sl::before { transform:translateX(16px); }
.sh-sidebar-apply { padding:13px 17px; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--white); }

/* ── Toolbar ── */
.sh-main {}
.sh-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.sh-result-count { font-size:.84rem; color:var(--text-muted); }
.sh-result-count strong { color:var(--text); font-weight:700; }
.sh-toolbar-r { display:flex; align-items:center; gap:8px; }
.sh-sort { padding:7px 28px 7px 11px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.82rem; color:var(--text); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; cursor:pointer; font-family:var(--font-body); }
.sh-sort:focus { border-color:var(--primary); outline:none; }
.sh-view-toggle { display:flex; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sh-view-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--white); border:none; cursor:pointer; font-size:.8rem; color:var(--gray-400); transition:var(--transition); }
.sh-view-btn:first-child { border-right:1px solid var(--border); }
.sh-view-btn.active, .sh-view-btn:hover { background:var(--primary-light); color:var(--primary); }
.sh-mob-filter { display:none; align-items:center; gap:7px; padding:7px 13px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); font-size:.82rem; font-weight:600; color:var(--text); cursor:pointer; font-family:var(--font-primary); }
.sh-mob-badge { background:var(--primary); color:var(--dark); font-size:.67rem; font-weight:700; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* Active filter tags */
.sh-active-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; min-height:8px; }
.sh-tag { display:inline-flex; align-items:center; gap:5px; background:var(--primary-light); color:var(--primary-dark); border:1px solid rgba(0,200,150,.2); padding:4px 10px; border-radius:var(--radius-full); font-size:.74rem; font-weight:600; font-family:var(--font-primary); }
.sh-tag-x { width:15px; height:15px; background:rgba(0,150,100,.15); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.55rem; color:var(--primary-dark); padding:0; }

/* ── Product Grid ── */
.sh-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ── Product Card ── */
.sh-card {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:var(--radius-lg); overflow:hidden;
    transition:var(--transition); position:relative;
    display:flex; flex-direction:column; height:100%;
}
.sh-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.sh-card-img { width:100%; aspect-ratio:1/1; background:var(--gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; flex-shrink:0; }
.sh-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.sh-card:hover .sh-card-img img { transform:scale(1.06); }
.sh-card-img-ico { font-size:3.5rem; color:var(--gray-300); }
.sh-card-badges { position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:4px; z-index:1; }
.sh-badge-sale { background:var(--danger); color:#fff; font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.sh-badge-new  { background:var(--primary); color:var(--dark); font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.sh-badge-hot  { background:#f97316; color:#fff; font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.sh-card-wish { position:absolute; top:9px; right:9px; z-index:1; }
.sh-card-body { padding:13px; display:flex; flex-direction:column; flex:1; }
.sh-card-cat { font-size:.66rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; font-family:var(--font-primary); }
.sh-card-name { font-size:.88rem; font-weight:700; color:var(--text); margin-bottom:6px; font-family:var(--font-primary); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sh-card-rating { display:flex; align-items:center; gap:4px; margin-bottom:8px; }
.sh-card-score { font-size:.72rem; font-weight:700; color:var(--text); }
.sh-card-reviews { font-size:.68rem; color:var(--text-muted); }
.sh-card-price { margin-top:auto; margin-bottom:10px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.sh-price-current { font-size:.98rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.sh-price-old { font-size:.78rem; color:var(--text-light,#94a3b8); text-decoration:line-through; }
.sh-price-off { font-size:.68rem; background:var(--primary-light); color:var(--primary-dark); padding:2px 6px; border-radius:var(--radius-full); font-weight:700; }
.sh-card-footer { padding:0 13px 13px; display:flex; gap:6px; }
.sh-card-footer .btn { flex:1; justify-content:center; font-size:.76rem; padding:8px 5px; }

/* List view */
.sh-grid.list-view { grid-template-columns:1fr; }
.sh-grid.list-view .sh-card { flex-direction:row; }
.sh-grid.list-view .sh-card-img { width:160px; flex-shrink:0; aspect-ratio:unset; height:160px; }
.sh-grid.list-view .sh-card-body { padding:14px 18px; }
.sh-grid.list-view .sh-card-footer { padding:14px 18px 14px 0; flex-direction:column; min-width:130px; justify-content:flex-end; margin-top:auto; }

/* No products */
.sh-no-products { text-align:center; padding:60px 20px; grid-column:1/-1; }
.sh-no-products i { font-size:3rem; color:var(--gray-300); margin-bottom:16px; }

/* Pagination */
.sh-pagination-wrap { display:flex; align-items:center; justify-content:space-between; margin-top:28px; flex-wrap:wrap; gap:12px; }
.sh-page-info { font-size:.82rem; color:var(--text-muted); }

/* Filter drawer */
.sh-drawer { position:fixed; top:0; left:-100%; width:280px; max-width:85vw; height:100%; background:var(--white); z-index:1001; overflow-y:auto; transition:left .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.sh-drawer.open { left:0; }
.sh-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid var(--border); background:var(--gray-50); flex-shrink:0; position:sticky; top:0; z-index:1; }
.sh-drawer-body { flex:1; overflow-y:auto; }
.sh-drawer-foot { padding:13px 17px; border-top:1px solid var(--border); display:flex; gap:8px; flex-shrink:0; background:var(--white); position:sticky; bottom:0; }
.sh-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; }
.sh-overlay.active { display:block; }

/* ============================================================
   PRODUCT DETAIL  (pd-* classes)
   ============================================================ */
.pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:28px 0 0; align-items:start; }

/* Gallery */
.pd-gallery-col { position:sticky; top:calc(var(--header-height)+14px); align-self:start; }
.pd-gallery-wrap { display:grid; grid-template-columns:72px 1fr; gap:12px; }
.pd-thumbs { display:flex; flex-direction:column; gap:8px; }
.pd-thumb { width:68px; height:68px; border:2px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; background:var(--gray-50); flex-shrink:0; }
.pd-thumb.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }
.pd-thumb-ico { font-size:1.6rem; }
.pd-main-img { border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:1/1; background:linear-gradient(135deg,#f0fdf4,#dcfce7); display:flex; align-items:center; justify-content:center; position:relative; cursor:zoom-in; }
.pd-main-img img { width:100%; height:100%; object-fit:contain; }
.pd-main-ico { font-size:9rem; color:#4ade80; transition:var(--transition); }
.pd-main-img:hover .pd-main-ico { transform:scale(1.05); }
.pd-img-badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:5px; z-index:1; }
.pd-img-zoom { position:absolute; bottom:12px; right:12px; width:36px; height:36px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--text-muted); cursor:pointer; transition:var(--transition); border:1px solid var(--border); }
.pd-img-zoom:hover { background:var(--primary); color:var(--dark); }
.pd-img-type-strip { display:flex; gap:6px; margin-top:10px; }
.pd-img-type-btn { flex:1; padding:6px 4px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.68rem; font-weight:700; color:var(--text-muted); cursor:pointer; transition:var(--transition); text-align:center; font-family:var(--font-primary); background:var(--white); }
.pd-img-type-btn:hover { border-color:var(--primary); color:var(--primary); }
.pd-img-type-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); }
.pd-video-wrap { border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:1/1; background:var(--dark); display:none; align-items:center; justify-content:center; flex-direction:column; cursor:pointer; gap:10px; }
.pd-video-wrap.show { display:flex; }
.pd-play-btn { width:60px; height:60px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--dark); transition:var(--transition); }
.pd-video-wrap:hover .pd-play-btn { transform:scale(1.1); box-shadow:0 0 30px rgba(0,200,150,.4); }

/* Product Info */
.pd-info {}
.pd-brand { font-size:.75rem; color:var(--primary-dark); font-weight:700; background:var(--primary-light); padding:3px 10px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:5px; margin-bottom:10px; font-family:var(--font-primary); }
.pd-title { font-size:clamp(1.15rem,2.2vw,1.55rem); font-weight:800; color:var(--text); line-height:1.25; margin-bottom:12px; font-family:var(--font-primary); }

/* Rating row */
.pd-rating-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-lg); }
.pd-stars { color:var(--warning); font-size:.88rem; display:flex; gap:2px; }
.pd-rating-score { font-size:.88rem; font-weight:800; color:var(--white); background:var(--warning); padding:2px 8px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.pd-rating-count { font-size:.78rem; color:var(--primary); cursor:pointer; font-weight:600; background:var(--primary-light); padding:2px 9px; border-radius:var(--radius-full); border:1px solid rgba(0,200,150,.2); }
.pd-rating-count:hover { background:var(--primary); color:var(--dark); }
.pd-rating-sep { width:1px; height:16px; background:var(--border); }
.pd-sold { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; font-weight:600; }
.pd-sold i { color:var(--primary); }

/* Price */
.pd-price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.pd-price-current { font-size:1.7rem; font-weight:900; color:var(--text); font-family:var(--font-primary); line-height:1; }
.pd-price-old { font-size:1rem; color:var(--gray-400); text-decoration:line-through; }
.pd-price-off { background:var(--danger); color:#fff; font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.pd-price-emi { font-size:.8rem; color:var(--primary-dark); font-weight:600; margin-bottom:16px; }
.pd-price-emi a { color:var(--primary); }

/* Stock */
.pd-stock { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; margin-bottom:16px; }
.pd-stock.in  { color:var(--success); }
.pd-stock.low { color:#d97706; }
.pd-stock.out { color:var(--danger); }

/* Short desc */
.pd-short-desc { font-size:.87rem; color:var(--text-muted); line-height:1.75; margin-bottom:18px; }
.pd-short-desc ul { list-style:none; display:flex; flex-direction:column; gap:5px; padding:0; margin:0; }
.pd-short-desc li { display:flex; align-items:flex-start; gap:8px; }
.pd-short-desc li i { color:var(--primary); font-size:.75rem; margin-top:3px; flex-shrink:0; }

/* Variations */
.pd-variations { margin-bottom:18px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.pd-var-group { padding:13px 16px; border-bottom:1px solid var(--border); }
.pd-var-group:last-child { border-bottom:none; }
.pd-var-label { font-size:.78rem; font-weight:700; color:var(--text-muted); margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-primary); text-transform:uppercase; letter-spacing:.04em; }
.pd-var-selected { font-size:.8rem; color:var(--primary-dark); font-weight:700; background:var(--primary-light); padding:2px 9px; border-radius:var(--radius-full); text-transform:none; letter-spacing:0; }
.pd-var-opts { display:flex; gap:7px; flex-wrap:wrap; }
.pd-var-opt { padding:8px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--transition); color:var(--text-muted); font-family:var(--font-primary); background:var(--white); }
.pd-var-opt:hover:not(.disabled) { border-color:var(--primary); color:var(--primary-dark); }
.pd-var-opt.active { border-color:var(--primary); background:var(--primary); color:var(--dark); font-weight:700; }
.pd-var-opt.disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; background:var(--gray-100); }
.pd-color-swatches-wrap { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pd-color-swatch { width:34px; height:34px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; transition:var(--transition); box-shadow:0 2px 6px rgba(0,0,0,.14); }
.pd-color-swatch:hover { transform:scale(1.12); }
.pd-color-swatch.active { border-color:var(--primary); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary); }

/* Qty + Cart */
.pd-qty-cart { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.pd-qty { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.pd-qty button { width:38px; height:44px; background:var(--gray-50); border:none; font-size:.9rem; cursor:pointer; transition:var(--transition); color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.pd-qty button:hover { background:var(--primary-light); color:var(--primary); }
.pd-qty input { width:50px; height:44px; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-size:.92rem; font-weight:700; color:var(--text); font-family:var(--font-primary); background:var(--white); }
.pd-cart-btn { flex:1; min-width:160px; justify-content:center; font-size:.92rem; }
.pd-buy-btn { width:100%; justify-content:center; font-size:.92rem; margin-bottom:10px; }
.pd-action-row { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.pd-action-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.78rem; font-weight:600; cursor:pointer; transition:var(--transition); color:var(--text-muted); background:var(--white); font-family:var(--font-primary); }
.pd-action-btn:hover { border-color:var(--primary); color:var(--primary); }
.pd-action-btn.wishlisted { border-color:var(--danger); color:var(--danger); }

/* Trust badges */
.pd-trust { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:18px; }
.pd-trust-item { display:flex; align-items:center; gap:9px; padding:11px 13px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-lg); }
.pd-trust-ico { width:32px; height:32px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:var(--primary); flex-shrink:0; }
.pd-trust-text { font-size:.75rem; font-weight:700; color:var(--text); line-height:1.3; }
.pd-trust-sub { font-size:.66rem; color:var(--text-muted); }

/* Meta table */
.pd-meta-table { border-top:1px solid var(--border); padding-top:14px; }
.pd-meta-row { display:flex; gap:8px; padding:5px 0; font-size:.8rem; border-bottom:1px solid var(--border); }
.pd-meta-row:last-child { border-bottom:none; }
.pd-meta-lbl { color:var(--text-muted); width:120px; flex-shrink:0; font-weight:600; }
.pd-meta-val { color:var(--text); font-weight:600; font-family:var(--font-primary); }
.pd-meta-val a { color:var(--primary); }

/* ── Tabs ── */
.pd-tabs { margin:32px 0 0; }
.pd-tab-nav { display:flex; gap:0; border-bottom:2px solid var(--border); overflow-x:auto; }
.pd-tab-nav::-webkit-scrollbar { display:none; }
.pd-tab-btn { padding:12px 22px; font-size:.85rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:var(--transition); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; font-family:var(--font-primary); background:none; border-top:none; border-left:none; border-right:none; flex-shrink:0; }
.pd-tab-btn:hover { color:var(--primary); }
.pd-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.pd-tab-pane { display:none; padding:24px 0; }
.pd-tab-pane.active { display:block; }

/* Description */
.pd-desc-body { font-size:.9rem; color:var(--text-muted); line-height:1.8; }
.pd-desc-body h4 { font-size:.98rem; font-weight:700; color:var(--text); margin:20px 0 8px; font-family:var(--font-primary); }
.pd-desc-body ul { padding-left:18px; margin-bottom:14px; display:flex; flex-direction:column; gap:5px; }
.pd-desc-body p { margin-bottom:14px; }

/* Spec table */
.pd-spec-table { width:100%; border-collapse:collapse; }
.pd-spec-table tr { border-bottom:1px solid var(--border); }
.pd-spec-table tr:nth-child(even) td { background:var(--gray-50); }
.pd-spec-table td { padding:11px 14px; font-size:.85rem; vertical-align:top; }
.pd-spec-table td:first-child { color:var(--text-muted); width:42%; font-weight:600; }
.pd-spec-table td:last-child { color:var(--text); font-weight:600; font-family:var(--font-primary); }
.pd-spec-section td { background:var(--dark) !important; color:var(--white) !important; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; }

/* Reviews */
.pd-review-summary { display:flex; align-items:center; gap:28px; background:var(--gray-50); border-radius:var(--radius-xl); padding:22px; margin-bottom:22px; flex-wrap:wrap; }
.pd-rev-score { text-align:center; }
.pd-rev-num { font-size:3rem; font-weight:900; color:var(--text); font-family:var(--font-primary); line-height:1; }
.pd-rev-stars { display:flex; gap:2px; color:var(--warning); font-size:1rem; justify-content:center; margin:6px 0; }
.pd-rev-count { font-size:.78rem; color:var(--text-muted); }
.pd-rev-bars { flex:1; min-width:180px; display:flex; flex-direction:column; gap:6px; }
.pd-rev-bar { display:flex; align-items:center; gap:9px; font-size:.78rem; }
.pd-rev-bar-lbl { color:var(--text-muted); width:32px; text-align:right; flex-shrink:0; }
.pd-rev-bar-track { flex:1; height:7px; background:var(--gray-200); border-radius:7px; overflow:hidden; }
.pd-rev-bar-fill { height:100%; background:var(--warning); border-radius:7px; }
.pd-rev-bar-cnt { color:var(--text-muted); width:24px; flex-shrink:0; font-size:.72rem; }
.pd-review { padding:18px 0; border-bottom:1px solid var(--border); }
.pd-review:last-child { border-bottom:none; }
.pd-review-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.pd-review-av { width:38px; height:38px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--dark); font-weight:800; flex-shrink:0; font-family:var(--font-primary); overflow:hidden; }
.pd-review-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pd-review-name { font-size:.87rem; font-weight:700; color:var(--text); font-family:var(--font-primary); }
.pd-review-meta { display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
.pd-review-stars { color:var(--warning); font-size:.72rem; display:flex; gap:1px; }
.pd-review-date { font-size:.7rem; color:var(--text-muted); }
.pd-verified { font-size:.65rem; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; padding:2px 7px; border-radius:var(--radius-full); font-weight:700; }
.pd-review-text { font-size:.85rem; color:var(--text-muted); line-height:1.7; margin-bottom:8px; }
.pd-review-helpful { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.pd-review-helpful button { background:none; border:1px solid var(--border); border-radius:var(--radius-full); padding:3px 10px; font-size:.72rem; cursor:pointer; transition:var(--transition); font-family:var(--font-primary); color:var(--text-muted); }
.pd-review-helpful button:hover { border-color:var(--primary); color:var(--primary); }

/* Review form */
.pd-review-form { background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px; margin-top:20px; }
.pd-review-form h5 { font-size:.95rem; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.pd-review-form h5 i { color:var(--primary); }
.pd-star-input { display:flex; gap:5px; margin-bottom:14px; }
.pd-star-input i { font-size:1.4rem; color:var(--gray-300); cursor:pointer; transition:var(--transition); }
.pd-star-input i.active, .pd-star-input i:hover { color:var(--warning); }

/* Related products */
.pd-related { margin-top:40px; padding-top:32px; padding-bottom:56px; border-top:1px solid var(--border); }
.pd-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.pd-rel-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; text-decoration:none; }
.pd-rel-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); }
.pd-rel-img { width:100%; aspect-ratio:1/1; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:2.5rem; overflow:hidden; }
.pd-rel-img img { width:100%; height:100%; object-fit:cover; }
.pd-rel-body { padding:11px; flex:1; display:flex; flex-direction:column; }
.pd-rel-name { font-size:.8rem; font-weight:700; color:var(--text); font-family:var(--font-primary); margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; flex:1; }
.pd-rel-price { display:flex; align-items:baseline; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.pd-rel-price-cur { font-size:.88rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.pd-rel-price-old { font-size:.72rem; color:var(--gray-400); text-decoration:line-through; }
.pd-rel-rating-row { display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.pd-rel-stars { color:var(--warning); font-size:.68rem; display:flex; gap:1px; }
.pd-rel-score { font-size:.72rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.pd-rel-count { font-size:.68rem; color:var(--text-muted); }
.pd-rel-atc { width:100%; justify-content:center; font-size:.76rem; padding:7px; }

/* Sticky Mobile Bar */
.pd-mobile-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--white); border-top:1px solid var(--border); padding:11px 14px; z-index:400; gap:9px; align-items:center; }
.pd-mobile-bar .btn { flex:1; justify-content:center; font-size:.86rem; }

/* ============================================================
   CART & CHECKOUT  (shared classes)
   ============================================================ */
.woocommerce table.shop_table { width:100%; border-collapse:collapse; }
.woocommerce table.shop_table th { padding:12px 14px; font-size:.82rem; font-weight:700; color:var(--text); border-bottom:2px solid var(--border); font-family:var(--font-primary); text-align:left; background:var(--gray-50); }
.woocommerce table.shop_table td { padding:14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:.88rem; }
.woocommerce table.shop_table .product-thumbnail img { width:68px; height:68px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border); }
.woocommerce-cart-form input[type=number] { width:60px; padding:8px; border:1.5px solid var(--border); border-radius:var(--radius-sm); text-align:center; font-size:.88rem; font-weight:700; font-family:var(--font-primary); }
.woocommerce-cart-form input[type=number]:focus { border-color:var(--primary); outline:none; }
.woocommerce .cart_totals { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:22px; }
.woocommerce .cart_totals h2 { font-size:1rem; font-weight:800; margin-bottom:16px; font-family:var(--font-primary); }
.woocommerce .wc-proceed-to-checkout .checkout-button { width:100%; justify-content:center; font-size:1rem; padding:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
    .sh-layout { grid-template-columns:220px 1fr; }
    .sh-grid { grid-template-columns:repeat(2,1fr); }
    .pd-layout { gap:24px; }
    .pd-related-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
    .sh-layout { grid-template-columns:1fr; }
    .sh-sidebar { display:none; }
    .sh-mob-filter { display:flex; }
    .sh-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .sh-hero { padding:24px 0 18px; }
    .sh-hero-stats { display:none; }
    .sh-view-toggle { display:none; }
    .sh-grid.list-view { grid-template-columns:repeat(2,1fr); }
    .sh-grid.list-view .sh-card { flex-direction:column; }
    .sh-grid.list-view .sh-card-img { width:100%; height:auto; aspect-ratio:1/1; }
    .sh-grid.list-view .sh-card-footer { flex-direction:row; padding:0 13px 13px; }
    /* Product detail */
    .pd-layout { grid-template-columns:1fr; gap:0; }
    .pd-gallery-col { position:static; margin-bottom:22px; }
    .pd-gallery-wrap { grid-template-columns:60px 1fr; gap:9px; }
    .pd-thumb { width:56px; height:56px; }
    .pd-mobile-bar { display:flex; }
    body.single-product { padding-bottom:70px; }
    .pd-related-grid { grid-template-columns:repeat(2,1fr); }
    .pd-trust { grid-template-columns:1fr 1fr; }
    .pd-cart-btn { display:none; }
}
@media (max-width:480px) {
    .sh-grid { gap:8px; }
    .sh-card-body { padding:10px; }
    .sh-card-name { font-size:.8rem; }
    .sh-price-current { font-size:.88rem; }
    .sh-card-footer { padding:0 10px 10px; gap:4px; }
    .sh-card-footer .btn { font-size:.7rem; padding:7px 3px; }
    .pd-gallery-wrap { grid-template-columns:1fr; }
    .pd-thumbs { flex-direction:row; }
    .pd-thumb { width:52px; height:52px; }
    .pd-trust { grid-template-columns:1fr; }
    .pd-related-grid { grid-template-columns:repeat(2,1fr); gap:9px; }
    .pd-review-summary { flex-direction:column; }
}

/* ============================================================
   CART PAGE  (cart-* classes)
   Step 11
   ============================================================ */

/* Hero */
.cart-hero { background:linear-gradient(135deg,var(--dark) 0%,#1a0d2e 100%); padding:28px 0 22px; position:relative; overflow:hidden; }
.cart-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 120% at 100% 50%,rgba(0,200,150,.08),transparent); }
.cart-hero-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cart-hero h1 { color:var(--white); font-size:clamp(1.2rem,2.2vw,1.6rem); font-family:var(--font-primary); display:flex; align-items:center; gap:10px; margin:0; }
.cart-hero h1 .cart-count-bubble { background:var(--primary); color:var(--dark); font-size:.75rem; font-weight:900; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.cart-steps { display:flex; align-items:center; gap:0; }
.cart-step { display:flex; align-items:center; gap:7px; padding:6px 14px; font-size:.76rem; font-weight:700; font-family:var(--font-primary); color:rgba(255,255,255,.35); }
.cart-step.active { color:var(--primary); }
.cart-step.done { color:rgba(255,255,255,.55); }
.cart-step-num { width:22px; height:22px; border-radius:50%; border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:.67rem; flex-shrink:0; }
.cart-step.active .cart-step-num { background:var(--primary); border-color:var(--primary); color:var(--dark); }
.cart-step.done .cart-step-num { background:rgba(255,255,255,.15); }
.cart-step-sep { width:24px; height:1px; background:rgba(255,255,255,.15); }

/* Free shipping progress bar */
.cart-shipping-bar { background:var(--primary-light); border-bottom:1px solid rgba(0,200,150,.2); padding:10px 0; }
.cart-ship-inner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cart-ship-msg { font-size:.82rem; font-weight:700; color:var(--primary-dark); font-family:var(--font-primary); display:flex; align-items:center; gap:7px; flex-shrink:0; }
.cart-ship-msg i { font-size:.85rem; }
.cart-ship-track { flex:1; min-width:180px; height:7px; background:rgba(0,200,150,.2); border-radius:7px; overflow:hidden; }
.cart-ship-fill { height:100%; background:var(--primary); border-radius:7px; transition:width .6s ease; }
.cart-ship-pct { font-size:.75rem; font-weight:700; color:var(--primary-dark); flex-shrink:0; white-space:nowrap; }

/* Layout */
.cart-layout { display:grid; grid-template-columns:1fr 340px; gap:22px; padding:28px 0 60px; align-items:start; }

/* Cart table */
.cart-table-wrap { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.cart-table-head { display:grid; grid-template-columns:1fr 90px 120px 100px 44px; gap:0; padding:12px 20px; background:var(--gray-50); border-bottom:1px solid var(--border); }
.cart-th { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-primary); }
.cart-th.center { text-align:center; }
.cart-th.right { text-align:right; }

/* Cart row */
.cart-row { display:grid; grid-template-columns:1fr 90px 120px 100px 44px; gap:0; padding:16px 20px; border-bottom:1px solid var(--border); align-items:center; transition:var(--transition); }
.cart-row:last-child { border-bottom:none; }
.cart-row:hover { background:var(--gray-50); }

/* Product cell */
.cart-prod { display:flex; align-items:center; gap:13px; min-width:0; }
.cart-img { width:72px; height:72px; border:1.5px solid var(--border); border-radius:var(--radius-lg); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; overflow:hidden; transition:var(--transition); }
.cart-img img { width:100%; height:100%; object-fit:cover; }
.cart-row:hover .cart-img { border-color:var(--primary); }
.cart-prod-info { min-width:0; }
.cart-prod-name { font-size:.87rem; font-weight:700; color:var(--text); font-family:var(--font-primary); line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-prod-name a { color:inherit; transition:var(--transition); }
.cart-prod-name a:hover { color:var(--primary); }
.cart-prod-meta { display:flex; flex-wrap:wrap; gap:4px; }
.cart-meta-tag { font-size:.67rem; color:var(--text-muted); background:var(--gray-100); padding:2px 7px; border-radius:var(--radius-full); font-weight:600; }
.cart-prod-stock { font-size:.68rem; font-weight:700; margin-top:4px; display:flex; align-items:center; gap:4px; }
.cart-prod-stock.in { color:var(--success); }
.cart-prod-stock.low { color:#d97706; }

/* Price cell */
.cart-price-cell { text-align:center; }
.cart-unit-price { font-size:.88rem; font-weight:700; color:var(--text); font-family:var(--font-primary); }
.cart-unit-old { font-size:.72rem; color:var(--gray-400); text-decoration:line-through; display:block; }

/* Qty stepper */
.cart-qty-cell { display:flex; justify-content:center; }
.cart-qty { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.cart-qty:focus-within { border-color:var(--primary); }
.cart-qty-btn { width:30px; height:34px; background:var(--gray-50); border:none; cursor:pointer; color:var(--text-muted); font-size:.8rem; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.cart-qty-btn:hover { background:var(--primary-light); color:var(--primary); }
.cart-qty-inp { width:38px; height:34px; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-size:.85rem; font-weight:700; color:var(--text); font-family:var(--font-primary); background:var(--white); }

/* Subtotal cell */
.cart-sub-cell { text-align:right; }
.cart-sub-price { font-size:.95rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.cart-sub-saving { font-size:.66rem; color:var(--success); font-weight:700; display:block; margin-top:2px; }

/* Remove button */
.cart-remove-btn { width:32px; height:32px; background:none; border:1.5px solid var(--border); border-radius:50%; cursor:pointer; color:var(--text-muted); font-size:.75rem; transition:var(--transition); display:flex; align-items:center; justify-content:center; margin-left:auto; }
.cart-remove-btn:hover { background:var(--danger); border-color:var(--danger); color:#fff; transform:scale(1.1); }

/* Cart actions bar */
.cart-actions-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--gray-50); border-top:1px solid var(--border); flex-wrap:wrap; gap:10px; }
.cart-actions-left { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cart-clear-btn { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-muted); background:none; border:1.5px solid var(--border); border-radius:var(--radius); padding:7px 13px; cursor:pointer; transition:var(--transition); font-family:var(--font-primary); font-weight:600; }
.cart-clear-btn:hover { border-color:var(--danger); color:var(--danger); }

/* Coupon section */
.cart-coupon { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:18px 20px; margin-top:14px; }
.cart-coupon-hd { display:flex; align-items:center; gap:8px; font-size:.87rem; font-weight:700; color:var(--text); font-family:var(--font-primary); margin-bottom:12px; cursor:pointer; justify-content:space-between; }
.cart-coupon-hd i.tag-ico { color:var(--primary); }
.cart-coupon-form { display:flex; gap:8px; }
.cart-coupon-input { flex:1; padding:9px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.85rem; font-family:var(--font-body); color:var(--text); transition:var(--transition); text-transform:uppercase; letter-spacing:.04em; }
.cart-coupon-input::placeholder { text-transform:none; letter-spacing:0; color:var(--text-muted); }
.cart-coupon-input:focus { border-color:var(--primary); outline:none; }
.cart-coupon-applied { display:none; align-items:center; gap:8px; background:var(--primary-light); border:1px solid rgba(0,200,150,.25); border-radius:var(--radius); padding:10px 14px; }
.cart-coupon-applied.show { display:flex; }
.cart-coupon-applied-code { font-size:.85rem; font-weight:700; color:var(--primary-dark); font-family:var(--font-primary); flex:1; }
.cart-coupon-applied-saving { font-size:.78rem; color:var(--success); font-weight:600; }
.cart-coupon-remove { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:.8rem; padding:2px; transition:var(--transition); }
.cart-coupon-remove:hover { color:var(--danger); }
.cart-available-coupons { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.cart-avail-chip { display:flex; align-items:center; gap:5px; padding:5px 10px; border:1.5px dashed var(--primary); border-radius:var(--radius); font-size:.74rem; font-weight:700; color:var(--primary-dark); cursor:pointer; transition:var(--transition); background:var(--primary-light); font-family:var(--font-primary); }
.cart-avail-chip:hover { background:var(--primary); color:var(--dark); border-style:solid; }

/* Cross-sell */
.cart-crosssell { margin-top:14px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.cart-crosssell-hd { padding:14px 18px 0; display:flex; align-items:center; gap:8px; font-size:.87rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.cart-crosssell-hd i { color:var(--primary); }
.cart-crosssell-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.cart-cs-item { padding:14px; border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; transition:var(--transition); cursor:pointer; }
.cart-cs-item:last-child { border-right:none; }
.cart-cs-item:hover { background:var(--gray-50); }
.cart-cs-img { width:64px; height:64px; border-radius:var(--radius); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.6rem; border:1px solid var(--border); flex-shrink:0; overflow:hidden; }
.cart-cs-img img { width:100%; height:100%; object-fit:cover; }
.cart-cs-name { font-size:.75rem; font-weight:700; color:var(--text); font-family:var(--font-primary); line-height:1.3; }
.cart-cs-price { font-size:.8rem; font-weight:800; color:var(--primary-dark); font-family:var(--font-primary); }
.cart-cs-atc { font-size:.71rem; padding:5px 10px; }

/* Order summary sidebar */
.cart-summary { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; position:sticky; top:calc(var(--header-height)+14px); }
.cart-summary-hd { padding:16px 20px; border-bottom:1px solid var(--border); background:var(--dark); }
.cart-summary-hd h4 { color:var(--white); font-size:.95rem; font-weight:800; font-family:var(--font-primary); margin:0; display:flex; align-items:center; gap:8px; }
.cart-summary-hd h4 i { color:var(--primary); }
.cart-summary-body { padding:18px 20px; display:flex; flex-direction:column; gap:0; }
.cs-line { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:.84rem; }
.cs-line:last-child { border-bottom:none; }
.cs-line-lbl { color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.cs-line-lbl i { color:var(--primary); font-size:.78rem; width:14px; }
.cs-line-val { font-weight:700; color:var(--text); font-family:var(--font-primary); }
.cs-line-val.saving { color:var(--success); }
.cs-line-val.free { color:var(--success); font-weight:800; }
.cs-shipping-opts { background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius); padding:10px 13px; margin:4px 0 8px; display:flex; flex-direction:column; gap:7px; }
.cs-ship-opt { display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.cs-ship-opt input[type=radio] { margin-top:2px; accent-color:var(--primary); flex-shrink:0; }
.cs-ship-opt label { font-size:.78rem; color:var(--text-muted); cursor:pointer; flex:1; }
.cs-ship-opt label strong { color:var(--text); display:block; margin-bottom:2px; }
.cs-ship-opt .free-tag { font-size:.65rem; background:var(--primary); color:var(--dark); padding:1px 6px; border-radius:var(--radius-full); font-weight:800; vertical-align:middle; margin-left:4px; }
.cs-total { display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 4px; border-top:2px solid var(--dark); margin-top:4px; }
.cs-total-lbl { font-size:.9rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.cs-total-val { font-size:1.4rem; font-weight:900; color:var(--text); font-family:var(--font-primary); line-height:1; }
.cs-total-tax { font-size:.7rem; color:var(--text-muted); margin-top:2px; text-align:right; }
.cs-savings-banner { background:linear-gradient(135deg,var(--primary-light),#d1fae5); border:1px solid rgba(0,200,150,.25); border-radius:var(--radius); padding:10px 13px; margin:12px 0 16px; display:flex; align-items:center; gap:9px; }
.cs-savings-ico { font-size:1.2rem; flex-shrink:0; }
.cs-savings-text { font-size:.78rem; color:var(--primary-dark); font-weight:700; font-family:var(--font-primary); }
.cs-savings-text span { font-size:.9rem; }
.cs-checkout-btn { width:100%; justify-content:center; font-size:.95rem; padding:14px; margin-bottom:9px; border-radius:var(--radius-lg); }
.cs-continue-btn { width:100%; justify-content:center; font-size:.84rem; padding:10px; }
.cs-pay-methods { margin-top:14px; text-align:center; }
.cs-pay-label { font-size:.68rem; color:var(--text-muted); margin-bottom:7px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.cs-pay-icons { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.cs-pay-icon { padding:4px 9px; background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.68rem; font-weight:700; color:var(--text-muted); }
.cs-trust { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }
.cs-trust-item { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--text-muted); font-weight:600; }
.cs-trust-item i { color:var(--primary); font-size:.78rem; width:14px; }

/* Empty cart */
.cart-empty { display:none; text-align:center; padding:60px 20px; }
.cart-empty.show { display:block; }
.cart-empty-icon { font-size:4rem; color:var(--gray-300); margin-bottom:18px; }
.cart-empty h3 { font-size:1.15rem; font-weight:800; color:var(--text); margin-bottom:8px; font-family:var(--font-primary); }
.cart-empty p { color:var(--text-muted); font-size:.87rem; margin-bottom:22px; }

/* Recently viewed */
.cart-recently { padding:0 0 56px; }
.cart-recently-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; margin-top:18px; }
.cart-rv-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); text-decoration:none; display:block; }
.cart-rv-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow); }
.cart-rv-img { width:100%; aspect-ratio:1/1; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:2rem; overflow:hidden; }
.cart-rv-img img { width:100%; height:100%; object-fit:cover; }
.cart-rv-body { padding:9px 10px; }
.cart-rv-name { font-size:.74rem; font-weight:700; color:var(--text); font-family:var(--font-primary); line-height:1.3; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-rv-price { font-size:.82rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }

/* ============================================================
   CHECKOUT PAGE  (co-* classes)
   Step 11
   ============================================================ */

/* Hero + steps */
.co-hero { background:linear-gradient(135deg,var(--dark) 0%,#1a0d2e 100%); padding:24px 0 18px; }
.co-hero-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.co-hero h1 { color:var(--white); font-size:clamp(1.1rem,2vw,1.5rem); font-family:var(--font-primary); display:flex; align-items:center; gap:10px; margin:0; }
.co-hero h1 i { color:var(--primary); }
.co-steps { display:flex; align-items:center; gap:0; }
.co-step { display:flex; align-items:center; gap:6px; padding:5px 12px; font-size:.74rem; font-weight:700; font-family:var(--font-primary); color:rgba(255,255,255,.3); }
.co-step.done { color:rgba(255,255,255,.55); }
.co-step.active { color:var(--primary); }
.co-step-num { width:20px; height:20px; border-radius:50%; border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:.62rem; flex-shrink:0; }
.co-step.active .co-step-num { background:var(--primary); border-color:var(--primary); color:var(--dark); }
.co-step.done .co-step-num { background:rgba(255,255,255,.1); }
.co-step-sep { width:20px; height:1px; background:rgba(255,255,255,.12); }
.co-trust-strip { background:var(--dark); border-top:1px solid rgba(255,255,255,.07); padding:8px 0; }
.co-trust-row { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.co-trust-item { display:flex; align-items:center; gap:6px; font-size:.73rem; font-weight:600; color:rgba(255,255,255,.45); font-family:var(--font-primary); }
.co-trust-item i { color:var(--primary); font-size:.78rem; }

/* Layout */
.co-layout { display:grid; grid-template-columns:1fr 380px; gap:24px; padding:28px 0 60px; align-items:start; }

/* Form sections */
.co-section { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:16px; }
.co-section:last-child { margin-bottom:0; }
.co-sec-hd { display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--border); background:var(--gray-50); cursor:pointer; user-select:none; }
.co-sec-hd-ico { width:30px; height:30px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:var(--primary); flex-shrink:0; }
.co-sec-hd h4 { font-size:.9rem; font-weight:800; color:var(--text); font-family:var(--font-primary); flex:1; margin:0; }
.co-sec-badge { font-size:.65rem; font-weight:700; color:var(--success); background:#f0fdf4; border:1px solid #bbf7d0; padding:2px 8px; border-radius:var(--radius-full); white-space:nowrap; }
.co-sec-chev { font-size:.65rem; color:var(--gray-400); transition:var(--transition); }
.co-section.collapsed .co-sec-chev { transform:rotate(-90deg); }
.co-sec-body { padding:20px; }
.co-section.collapsed .co-sec-body { display:none; }

/* Login nudge */
.co-login-nudge { display:flex; align-items:center; gap:10px; background:var(--primary-light); border:1px solid rgba(0,200,150,.2); border-radius:var(--radius); padding:11px 14px; margin-bottom:16px; font-size:.82rem; }
.co-login-nudge i { color:var(--primary); flex-shrink:0; }
.co-login-nudge a { color:var(--primary); font-weight:700; }

/* Form grid */
.co-form-row { display:grid; gap:13px; margin-bottom:13px; }
.co-form-row.cols-2 { grid-template-columns:1fr 1fr; }
.co-form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.co-form-row:last-child { margin-bottom:0; }

/* Fields */
.co-field { display:flex; flex-direction:column; gap:5px; }
.co-field label { font-size:.76rem; font-weight:700; color:var(--text); font-family:var(--font-primary); display:flex; align-items:center; gap:4px; }
.co-field label .req { color:var(--danger); }
.co-field input,
.co-field select,
.co-field textarea { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.85rem; font-family:var(--font-body); color:var(--text); transition:var(--transition); background:var(--white); box-sizing:border-box; }
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(0,200,150,.1); }
.co-field input.error,
.co-field select.error { border-color:var(--danger); }
.co-field .co-err { font-size:.7rem; color:var(--danger); display:none; }
.co-field .co-err.show { display:block; }
.co-input-wrap { position:relative; }
.co-input-wrap input { padding-left:38px; }
.co-input-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.82rem; pointer-events:none; }
.co-otp-row { display:flex; gap:7px; }
.co-otp-row input { flex:1; }
.co-otp-btn { padding:10px 14px; background:var(--primary); color:var(--dark); border:none; border-radius:var(--radius); font-size:.79rem; font-weight:700; cursor:pointer; white-space:nowrap; font-family:var(--font-primary); transition:var(--transition); flex-shrink:0; }
.co-otp-btn:hover { background:var(--primary-dark); color:#fff; }
.co-otp-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Same as billing */
.co-same-billing { display:flex; align-items:center; gap:9px; padding:12px 16px; background:var(--primary-light); border:1px solid rgba(0,200,150,.2); border-radius:var(--radius); margin-bottom:14px; cursor:pointer; }
.co-same-billing input { width:16px; height:16px; accent-color:var(--primary); flex-shrink:0; cursor:pointer; }
.co-same-billing label { font-size:.83rem; font-weight:600; color:var(--primary-dark); cursor:pointer; font-family:var(--font-primary); }

/* Delivery slots */
.co-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.co-slot { padding:10px 8px; border:1.5px solid var(--border); border-radius:var(--radius); text-align:center; cursor:pointer; transition:var(--transition); }
.co-slot:hover { border-color:var(--primary); }
.co-slot.active { border-color:var(--primary); background:var(--primary-light); }
.co-slot-date { font-size:.75rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.co-slot-day  { font-size:.67rem; color:var(--text-muted); margin-top:2px; }
.co-slot-type { font-size:.65rem; font-weight:700; margin-top:4px; padding:2px 6px; border-radius:var(--radius-full); display:inline-block; }
.co-slot-type.free { background:var(--primary-light); color:var(--primary-dark); }
.co-slot-type.paid { background:#fff7ed; color:#d97706; }
.co-slot.disabled { opacity:.4; cursor:not-allowed; background:var(--gray-100); }

/* Payment methods */
.co-pay-methods { display:flex; flex-direction:column; gap:10px; }
.co-pay-opt { border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.co-pay-opt.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.co-pay-label-row { display:flex; align-items:center; gap:11px; padding:13px 16px; cursor:pointer; }
.co-pay-radio { width:18px; height:18px; accent-color:var(--primary); flex-shrink:0; }
.co-pay-ico { width:36px; height:24px; border:1px solid var(--border); border-radius:4px; background:var(--gray-50); display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; color:var(--text-muted); flex-shrink:0; }
.co-pay-name { font-size:.87rem; font-weight:700; color:var(--text); font-family:var(--font-primary); flex:1; }
.co-pay-sub { font-size:.72rem; color:var(--text-muted); }
.co-pay-badge { font-size:.63rem; background:var(--primary-light); color:var(--primary-dark); border:1px solid rgba(0,200,150,.2); padding:2px 7px; border-radius:var(--radius-full); font-weight:700; white-space:nowrap; }
.co-pay-body { padding:0 16px 15px; border-top:1px solid var(--border); display:none; background:var(--gray-50); }
.co-pay-opt.active .co-pay-body { display:block; padding-top:14px; }
.co-upi-apps { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.co-upi-app { padding:7px 13px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.75rem; font-weight:700; cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:5px; background:var(--white); color:var(--text-muted); }
.co-upi-app:hover, .co-upi-app.active { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-light); }
.co-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-card-full { grid-column:1 / -1; }
.co-card-num-wrap { position:relative; }
.co-card-num-wrap input { padding-right:45px; letter-spacing:.08em; font-family:var(--font-primary); }
.co-card-type-ico { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.75rem; color:var(--text-muted); font-weight:800; font-family:var(--font-primary); }
.co-emi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.co-emi-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:10px; text-align:center; cursor:pointer; transition:var(--transition); }
.co-emi-card:hover, .co-emi-card.active { border-color:var(--primary); background:var(--primary-light); }
.co-emi-months { font-size:.9rem; font-weight:900; color:var(--text); font-family:var(--font-primary); }
.co-emi-label  { font-size:.63rem; color:var(--text-muted); }
.co-emi-amount { font-size:.8rem; font-weight:700; color:var(--primary-dark); margin-top:4px; font-family:var(--font-primary); }
.co-emi-rate   { font-size:.63rem; color:var(--text-muted); }
.co-nb-banks { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.co-nb-bank { border:1.5px solid var(--border); border-radius:var(--radius); padding:9px 6px; text-align:center; cursor:pointer; transition:var(--transition); }
.co-nb-bank:hover, .co-nb-bank.active { border-color:var(--primary); background:var(--primary-light); }
.co-nb-bank-name { font-size:.71rem; font-weight:700; color:var(--text); margin-top:4px; font-family:var(--font-primary); }
.co-cod-note { background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--radius); padding:11px 13px; font-size:.82rem; color:#92400e; display:flex; gap:8px; align-items:flex-start; }
.co-cod-note i { flex-shrink:0; margin-top:2px; }

/* Order summary sidebar */
.co-sidebar { position:sticky; top:calc(var(--header-height)+14px); display:flex; flex-direction:column; gap:14px; }
.co-order-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.co-order-card-hd { padding:13px 18px; border-bottom:1px solid var(--border); background:var(--dark); display:flex; align-items:center; justify-content:space-between; }
.co-order-card-hd h5 { color:var(--white); font-size:.87rem; font-weight:800; font-family:var(--font-primary); margin:0; display:flex; align-items:center; gap:7px; }
.co-order-card-hd h5 i { color:var(--primary); }
.co-order-edit { font-size:.74rem; color:var(--primary); cursor:pointer; font-weight:600; text-decoration:none; }
.co-order-edit:hover { text-decoration:underline; }
.co-order-items { padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.co-oi { display:flex; gap:11px; align-items:flex-start; }
.co-oi-img { width:52px; height:52px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; position:relative; overflow:hidden; }
.co-oi-img img { width:100%; height:100%; object-fit:cover; }
.co-oi-badge { position:absolute; top:-6px; right:-6px; width:18px; height:18px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:900; color:var(--dark); border:2px solid var(--white); font-family:var(--font-primary); }
.co-oi-name { font-size:.8rem; font-weight:700; color:var(--text); font-family:var(--font-primary); line-height:1.3; flex:1; }
.co-oi-meta { font-size:.67rem; color:var(--text-muted); margin-top:2px; }
.co-oi-price { font-size:.87rem; font-weight:800; color:var(--text); font-family:var(--font-primary); white-space:nowrap; }
.co-totals { padding:0 18px 16px; }
.co-tot-line { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border); font-size:.83rem; }
.co-tot-line:last-child { border-bottom:none; }
.co-tot-lbl { color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.co-tot-lbl i { color:var(--primary); font-size:.75rem; width:13px; }
.co-tot-val { font-weight:700; color:var(--text); font-family:var(--font-primary); }
.co-tot-val.green { color:var(--success); }
.co-tot-val.free  { color:var(--success); font-weight:800; }
.co-grand-total { display:flex; justify-content:space-between; align-items:baseline; padding:13px 18px; background:var(--gray-50); border-top:2px solid var(--dark); }
.co-grand-lbl { font-size:.92rem; font-weight:800; color:var(--text); font-family:var(--font-primary); }
.co-grand-val { font-size:1.5rem; font-weight:900; color:var(--text); font-family:var(--font-primary); line-height:1; }
.co-grand-tax { font-size:.68rem; color:var(--text-muted); text-align:right; margin-top:2px; }
.co-savings-badge { margin:0 18px 16px; background:linear-gradient(135deg,var(--primary-light),#d1fae5); border:1px solid rgba(0,200,150,.25); border-radius:var(--radius); padding:9px 13px; display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--primary-dark); font-family:var(--font-primary); }
.co-savings-badge i { flex-shrink:0; }
.co-place-btn { margin:0 18px 14px; width:calc(100% - 36px); justify-content:center; font-size:.95rem; padding:14px; border-radius:var(--radius-lg); }
.co-secure { padding:0 18px 16px; text-align:center; font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:5px; }
.co-secure i { color:var(--success); }
.co-tnc { margin:0 18px 16px; display:flex; gap:9px; align-items:flex-start; font-size:.75rem; color:var(--text-muted); line-height:1.6; }
.co-tnc input { width:15px; height:15px; accent-color:var(--primary); flex-shrink:0; margin-top:2px; cursor:pointer; }
.co-tnc a { color:var(--primary); }

/* Success overlay */
.co-success-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; align-items:center; justify-content:center; }
.co-success-overlay.show { display:flex; }
.co-success-box { background:var(--white); border-radius:var(--radius-xl); padding:40px 32px; max-width:460px; width:90%; text-align:center; animation: slideUp .4s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.co-success-ico { width:72px; height:72px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--dark); margin:0 auto 18px; }
.co-success-box h3 { font-size:1.25rem; font-weight:900; color:var(--text); font-family:var(--font-primary); margin-bottom:8px; }
.co-success-box p { color:var(--text-muted); font-size:.87rem; line-height:1.7; margin-bottom:10px; }
.co-success-id { display:inline-block; background:var(--primary-light); color:var(--primary-dark); font-weight:700; font-family:var(--font-primary); padding:6px 16px; border-radius:var(--radius-full); font-size:.85rem; margin-bottom:20px; border:1px solid rgba(0,200,150,.2); }
.co-success-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Notes */
.co-notes-field textarea { min-height:80px; resize:vertical; }

/* ── Responsive Cart + Checkout ── */
@media (max-width:1024px) {
    .cart-layout { grid-template-columns:1fr 300px; }
    .cart-recently-grid { grid-template-columns:repeat(4,1fr); }
    .co-layout { grid-template-columns:1fr 340px; gap:18px; }
}
@media (max-width:900px) {
    .cart-table-head { display:none; }
    .cart-row { grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:10px; padding:14px; }
    .cart-prod { grid-column:1; grid-row:1; }
    .cart-price-cell { display:none; }
    .cart-qty-cell { grid-column:1; grid-row:2; justify-content:flex-start; }
    .cart-sub-cell { grid-column:2; grid-row:1/span 2; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
    .cart-remove-btn { grid-column:2; grid-row:1; align-self:flex-start; margin-left:0; }
}
@media (max-width:768px) {
    .cart-layout { grid-template-columns:1fr; }
    .cart-summary { position:static; }
    .cart-steps { display:none; }
    .cart-recently-grid { grid-template-columns:repeat(3,1fr); }
    .cart-hero { padding:20px 0 16px; }
    .co-layout { grid-template-columns:1fr; }
    .co-sidebar { position:static; }
    .co-steps { display:none; }
    .co-form-row.cols-2,
    .co-form-row.cols-3 { grid-template-columns:1fr; }
    .co-slots { grid-template-columns:repeat(2,1fr); }
    .co-emi-grid { grid-template-columns:repeat(2,1fr); }
    .co-nb-banks { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px) {
    .cart-img { width:58px; height:58px; font-size:1.4rem; }
    .cart-crosssell-grid { grid-template-columns:repeat(2,1fr); }
    .cart-recently-grid { grid-template-columns:repeat(2,1fr); }
    .co-sec-body { padding:15px; }
    .co-upi-app { font-size:.7rem; padding:6px 10px; }
    .co-nb-banks { grid-template-columns:repeat(2,1fr); }
    .co-emi-grid { grid-template-columns:1fr 1fr; }
    .co-success-box { padding:28px 20px; }
}

/* ── Wishlist button active state ── */
.wishlist-btn {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(4px);
}
.wishlist-btn:hover { border-color: #fca5a5; background: #fff5f5; }
.wishlist-btn i { font-size: .82rem; color: var(--text-muted); transition: var(--transition); }
.wishlist-btn:hover i { color: #ef4444; }
.wishlist-btn.ev-wished { background: #fff5f5 !important; border-color: #fecaca !important; }
.wishlist-btn.ev-wished i { color: #ef4444 !important; }

/* ── AJAX skeleton ── */
.ev-skeleton-box, .ev-skeleton-line {
    background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: evShimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes evShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}