/* ============================================================
   SHOP PAGE — RAKESH MASALA v4 (with real icons & banners)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* 0. Reset */
.shop-page-wrapper { font-family:"Poppins",sans-serif; color:#333; background:#fff; width:100vw; margin-left:calc(-50vw + 50%); overflow-x:hidden; }
.shop-page-wrapper *,.shop-page-wrapper *::before,.shop-page-wrapper *::after { box-sizing:border-box; }

/* 1. BREADCRUMB */
.sp-breadcrumb-bar { background:#fff; border-bottom:1px solid #e8e8e8; padding:10px 0; width:100%; }
.sp-breadcrumb-inner { max-width:1400px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:6px; font-size:12px; color:#888; }
.sp-breadcrumb-inner a { color:#666; text-decoration:none; }
.sp-breadcrumb-inner a:hover { color:#c21b22; }
.sp-sep { color:#bbb; }
.sp-current { color:#c21b22; font-weight:500; }

/* 2. LAYOUT */
.sp-layout-bg { background:#fff; width:100%; }
.sp-layout { max-width:1400px; margin:0 auto; padding:28px 32px 48px; display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start; }

/* 3. SIDEBAR */
.sp-sidebar { position:sticky; top:20px; background:#fff; border:1px solid #e8ddd2; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.sp-filter-group { border-bottom:1px solid #f0e8dc; }
.sp-filter-group:last-child { border-bottom:none; }
.sp-filter-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 16px; background:none; border:none; cursor:pointer; font-family:"Poppins",sans-serif; font-size:12.5px; font-weight:600; color:#333; text-align:left; transition:background .15s; gap:6px; }
/* All Categories gets a prominent header style */
#fg-allcat > .sp-filter-toggle { font-size:14px; font-weight:700; color:#111; padding:20px 16px; border-bottom:1px solid #ede0d0; }
.sp-filter-toggle:hover { background:#faf6f0; }
/* toggle-left: icon + label row — match gap & icon-slot to category items */
.sp-toggle-left { display:flex; align-items:center; gap:10px; flex:1; }
/* All Categories icon slot: same 26px width as .sp-cat-icon so text columns align */
#fg-allcat > .sp-filter-toggle .sp-toggle-left > svg { width:22px; height:22px; flex-shrink:0; min-width:26px; }
/* Filter group toggles (Price Range, Weight, etc.) — clean 0 indent so they align with sidebar padding */
.sp-filter-group:not(#fg-allcat) > .sp-filter-toggle .sp-toggle-left { padding-left:0; }
.sp-chev { flex-shrink:0; transition:transform .28s; }
.sp-filter-group.open .sp-chev { transform:rotate(180deg); }
.sp-filter-body { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); padding:0 16px; }
.sp-filter-group.open .sp-filter-body { max-height:600px; padding:0 16px 24px; }
/* All categories list needs more room for all 12 items */
#fg-allcat.open .sp-filter-body { max-height:850px; }

/* Category Icon */
.sp-cat-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; }
.sp-cat-icon img { width:22px; height:22px; object-fit:contain; opacity:.55; filter:grayscale(100%); transition:opacity .2s,filter .2s; }
.sp-cat-link:hover .sp-cat-icon img { opacity:.85; filter:grayscale(30%); }
.sp-cat-link.active .sp-cat-icon img { opacity:1; filter:invert(16%) sepia(90%) saturate(4000%) hue-rotate(345deg) brightness(85%) grayscale(0%); }

/* Category list */
.sp-cat-list { list-style:none; margin:0; padding:0; }
.sp-cat-list li { border-bottom:1px solid #f5efe8; }
.sp-cat-list li:last-child { border-bottom:none; }
.sp-cat-link { display:flex; align-items:center; gap:10px; padding:16px 16px 16px 2px; text-decoration:none; color:#444; font-size:13px; transition:color .2s; }
.sp-cat-link:hover { color:#c21b22; }
.sp-cat-link.active { color:#222; font-weight:700; }

/* Price Range */
.sp-slider-wrap { position:relative !important; width:100% !important; margin:12px 0 4px !important; height:14px !important; display:flex !important; align-items:center !important; }
#fg-price.open .sp-filter-body { padding:0 16px 20px 16px !important; }
#fg-price:not(.open) .sp-filter-body { padding:0 16px !important; }
.sp-slider-wrap::before { content:'' !important; position:absolute !important; left:0 !important; top:50% !important; transform:translateY(-50%) !important; width:10px !important; height:10px !important; background:#fff !important; border:2px solid #c21b22 !important; border-radius:50% !important; z-index:3 !important; pointer-events:none !important; }
.sp-price-slider { -webkit-appearance:none !important; appearance:none !important; width:100% !important; height:14px !important; background:transparent !important; outline:none !important; border:none !important; box-shadow:none !important; margin:0 !important; padding:0 !important; position:relative !important; z-index:2 !important; cursor:pointer !important; }
.sp-price-slider::-webkit-slider-runnable-track { -webkit-appearance:none !important; appearance:none !important; width:100% !important; height:3px !important; background:linear-gradient(to right, #c21b22 var(--pct, 50%), #e8ddd2 var(--pct, 50%)) !important; border-radius:2px !important; border:none !important; box-shadow:none !important; }
.sp-price-slider::-webkit-slider-thumb { -webkit-appearance:none !important; appearance:none !important; height:14px !important; width:14px !important; border-radius:50% !important; background:#c21b22 !important; border:none !important; cursor:pointer !important; box-shadow:none !important; margin-top:-5.5px !important; }
.sp-price-slider::-moz-range-track { width:100% !important; height:3px !important; background:#e8ddd2 !important; border-radius:2px !important; border:none !important; box-shadow:none !important; }
.sp-price-slider::-moz-range-progress { height:3px !important; background:#c21b22 !important; border-radius:2px !important; border:none !important; }
.sp-price-slider::-moz-range-thumb { height:14px !important; width:14px !important; border-radius:50% !important; background:#c21b22 !important; border:none !important; cursor:pointer !important; box-shadow:none !important; }
.sp-price-display { font-size:13px !important; color:#c21b22 !important; font-weight:700 !important; text-align:right !important; margin-top:8px !important; font-family:"Poppins",sans-serif !important; }

/* Checkboxes */
.sp-check-item { display:flex; align-items:center; gap:8px; font-size:12px; color:#555; cursor:pointer; padding:8px 0; border-bottom:1px solid #f5efe8; margin-bottom:10px; }
.sp-check-item:last-child { border-bottom:none; }
.sp-check-item input[type=checkbox] { -webkit-appearance:none; appearance:none; width:14px; height:14px; border:1.5px solid #ccc; border-radius:3px; cursor:pointer; flex-shrink:0; position:relative; transition:all .18s; }
.sp-check-item input[type=checkbox]:checked { background:#c21b22; border-color:#c21b22; }
.sp-check-item input[type=checkbox]:checked::after { content:''; position:absolute; top:1px; left:3px; width:5px; height:7px; border:1.5px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); }

/* 4. MAIN */
.sp-main { min-width:0; }
.sp-toolbar-header { margin-bottom:16px; border-bottom:1px solid #e8e8e8; padding-bottom:12px; }
.sp-all-products-title { font-size:24px; font-weight:800; color:#111; margin:0; }
.sp-toolbar-controls { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.sp-toolbar-left { display:flex; align-items:center; gap:16px; }
.sp-viewas-label { font-size:11px; color:#333; font-weight:700; letter-spacing:4px; text-transform:uppercase; }
.sp-view-toggle { display:flex; gap:4px; }
.sp-view-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1.5px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; color:#888; transition:all .2s; outline:none; }
.sp-view-btn.active { color:#c21b22; border-color:#c21b22; background:#fff8f8; }
.sp-view-btn:hover:not(.active) { color:#c21b22; border-color:#e0b0b0; }
.sp-view-btn:focus { outline:none; box-shadow:none; }
.sp-sort-select { border:1px solid #d0c4b4; border-radius:5px; padding:8px 30px 8px 12px; font-family:"Poppins",sans-serif; font-size:12px; color:#555; appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; cursor:pointer; outline:none; }
.sp-sort-select:focus { border-color:#c21b22; }

/* 5. PRODUCT GRID */
.sp-product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sp-product-grid.sp-grid-view { grid-template-columns:repeat(2,1fr); }

/* Product Card */
.sp-product-card { background:#FFFFFF; border:2px solid #E6E6E6; border-radius:15px; overflow:hidden; position:relative; transition:box-shadow .25s,transform .25s; animation:sp-fadeUp .35s both; display:flex; flex-direction:column; }
.sp-product-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.12); transform:translateY(-3px); }
.sp-product-card:nth-child(1){animation-delay:.04s}.sp-product-card:nth-child(2){animation-delay:.08s}.sp-product-card:nth-child(3){animation-delay:.12s}.sp-product-card:nth-child(4){animation-delay:.16s}.sp-product-card:nth-child(5){animation-delay:.20s}.sp-product-card:nth-child(6){animation-delay:.24s}.sp-product-card:nth-child(7){animation-delay:.28s}.sp-product-card:nth-child(8){animation-delay:.32s}

.sp-badge { position:absolute; top:10px; right:10px; z-index:3; background:#c21b22; color:#fff; font-size:10px; font-weight:700; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px; box-shadow:0 2px 6px rgba(194,27,34,.3); }
.sp-badge-oos { background:#888; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.sp-product-img-wrap { display:flex; align-items:center; justify-content:center; background:#fff; height:350px; overflow:hidden; position:relative; padding:12px; }
.sp-product-img-wrap img { width:100%; height:100%; object-fit:contain; transition:transform .35s cubic-bezier(.34,1.4,.64,1); }
.sp-product-card:hover .sp-product-img-wrap img { transform:scale(1.06); }

.sp-product-info { padding:14px 14px 16px; display:flex; flex-direction:column; flex:1; }
.sp-stars { display:flex; gap:2px; margin-bottom:8px; }
.sp-name-price { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sp-product-name { font-size:15px; font-weight:700; color:#c21b22; text-decoration:none; line-height:1.35; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-product-name:hover { color:#a01219; }
.sp-price-wrap { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:2px; }
.sp-price { font-size:16px; font-weight:700; color:#111; white-space:nowrap; font-family:"Poppins",sans-serif; line-height:1.1; }
.sp-orig { font-size:12px; color:#888; font-weight:400; text-decoration:line-through; display:block; line-height:1; font-family:"Poppins",sans-serif; white-space:nowrap; }

.sp-atc-row { display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:14px; }
.sp-weight-select { height:38px; line-height:20px; border:1px solid #707070; border-radius:19px; padding:8px 24px 8px 12px; font-family:"Poppins","Mazzard",sans-serif; font-size:14px; font-weight:400; color:#3C3C3C; text-transform:lowercase; letter-spacing:0px; appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%233C3C3C' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; width:82px; flex-shrink:0; cursor:pointer; outline:none; box-sizing:border-box; overflow:visible; text-overflow:clip; }
.sp-weight-select:focus { border-color:#c21b22; outline:none; }
.sp-atc-btn { height:38px; line-height:38px; flex:1; border-radius:19px; font-family:"Poppins",sans-serif; font-weight:700; font-size:13px; background:#fcb913; color:#222; border:none; padding:0 10px; text-transform:uppercase; letter-spacing:0.3px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .18s,transform .1s; box-sizing:border-box; white-space:nowrap; }
.sp-atc-btn:active { transform:scale(.97); }
.sp-atc-btn:hover { background:#e5a400; }
.sp-atc-btn-oos { background:#e0e0e0 !important; color:#999 !important; cursor:not-allowed !important; flex:1; width:100%; }
.sp-atc-btn-oos:hover { background:#e0e0e0 !important; transform:none !important; }

.sp-no-products { grid-column:1/-1; padding:60px 20px; text-align:center; color:#888; font-size:14px; }
.sp-no-products a { color:#c21b22; }

/* 6. PAGINATION */
.sp-pagination { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:32px; padding-top:24px; border-top:1px solid #f0e8dc; }
.sp-page-btn { min-width:34px; height:34px; border-radius:5px; border:1px solid #e0d4c4; background:#fff; font-size:12.5px; color:#555; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; font-family:"Poppins",sans-serif; font-weight:500; padding:0 8px; }
.sp-page-btn:hover { border-color:#c21b22; color:#c21b22; }
.sp-page-btn.active { background:#fcb913; color:#111; border-color:#fcb913; font-weight:700; }
.sp-page-btn.sp-dots { cursor:default; border:none; background:none; color:#aaa; }

/* 7. PROMO BANNERS — full image */
.sp-promo-banners { max-width:1400px; margin:8px auto 0; padding:0 32px 48px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sp-promo-card.sp-promo-img-full { display:block; border-radius:12px; overflow:hidden; text-decoration:none; transition:transform .25s,box-shadow .25s; line-height:0; }
.sp-promo-card.sp-promo-img-full:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.15); }
.sp-promo-card.sp-promo-img-full img { width:100%; height:auto; display:block; }

/* 8. ANIMATION */
@keyframes sp-fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* 9. WC OVERRIDES */
.shop-page-wrapper .woocommerce ul.products { display:contents !important; }
.shop-page-wrapper .woocommerce ul.products li.product { display:block !important; margin:0 !important; padding:0 !important; float:none !important; width:auto !important; }
.shop-page-wrapper .woocommerce-notices-wrapper,
.shop-page-wrapper .woocommerce-result-count,
.shop-page-wrapper .woocommerce-ordering,
.shop-page-wrapper nav.woocommerce-pagination { display:none !important; }

/* 10. RESPONSIVE */
@media(max-width:1300px){ .sp-layout{grid-template-columns:210px 1fr; padding:24px 24px 40px} .sp-breadcrumb-inner{padding:0 24px} .sp-promo-banners{padding:0 24px 40px} }
@media(max-width:1100px){ .sp-layout{grid-template-columns:190px 1fr} .sp-product-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){ .sp-layout{grid-template-columns:1fr} .sp-sidebar{display:none} .sp-sidebar.sp-mobile-open{display:block} .sp-product-grid{grid-template-columns:repeat(2,1fr)} .sp-promo-banners{grid-template-columns:1fr} }
@media(max-width:500px){ .sp-product-grid{gap:10px} .sp-product-info{padding:8px 9px 10px} .sp-product-name{font-size:11px} .sp-atc-btn{font-size:9.5px} }