/* =====================================================================
   Servolink — Shop / Collection page (Multikart-style)
   Product card styles are shared with the home page (home-shop.css)
   ===================================================================== */

/* ---------------- layout ---------------- */
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:28px;padding:34px 0 56px;align-items:start}

/* ---------------- sidebar ---------------- */
.shop-side{position:sticky;top:86px}
.fbox{border:1px solid var(--grey-300);border-radius:6px;padding:12px 14px 2px;margin-bottom:12px;background:#fff}
.fbox > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-display);font-size:14px;font-weight:700;padding-bottom:10px
}
.fbox > summary::-webkit-details-marker{display:none}
.fbox > summary::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--grey-600);border-bottom:2px solid var(--grey-600);
  transform:rotate(-135deg);transition:.2s;margin-top:4px
}
.fbox:not([open]) > summary::after{transform:rotate(45deg);margin-top:-2px}
.fbox .fbody{max-height:212px;overflow-y:auto;padding-bottom:14px;scrollbar-width:thin}
.fbox .fbody::-webkit-scrollbar{width:4px}
.fbox .fbody::-webkit-scrollbar-thumb{background:var(--red);border-radius:4px}
.fbox .fbody::-webkit-scrollbar-track{background:var(--grey-100)}

.fopt{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:12.5px;color:var(--grey-800)}
.fopt input{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;flex-shrink:0;margin:0;
  border:1px solid var(--grey-300);border-radius:3px;background:#fff;cursor:pointer;position:relative
}
.fopt input:checked{background:var(--red);border-color:var(--red)}
.fopt input:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)
}
.fopt:hover{color:var(--red)}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--grey-600);font-family:var(--font-mono)}

.price-fields{display:flex;align-items:center;gap:8px;padding-bottom:14px}
.price-fields input{
  width:100%;min-width:0;border:1px solid var(--grey-300);border-radius:4px;padding:9px 10px;
  font-size:13px;font-family:var(--font-mono);outline:0;color:var(--ink)
}
.price-fields input:focus{border-color:var(--red)}
.price-fields span{color:var(--grey-600);font-size:13px}
.price-note{font-size:11.5px;color:var(--grey-600);font-family:var(--font-mono);padding-bottom:12px}

/* Mobile browsers (khaas kar iOS) price/number ko apne aap tel: link bana dete hain
   aur wo blue underline dikhta hai — filter ke andar rang wahi rakho */
.shop-side a[href^="tel"]:not(.btn-clear),
.shop-side a[href^="mailto"]:not(.btn-clear),
.shop-side a[x-apple-data-detectors]{
  color:inherit!important;text-decoration:none!important;
  -webkit-text-fill-color:currentColor!important;pointer-events:none
}
.shop-side .fopt span,.shop-side .price-note,.shop-side summary{-webkit-text-fill-color:currentColor}
.fopt span{color:inherit}

/* iOS Safari kabhi-kabhi sirf `color` ko ignore kar deta hai (auto-detected links,
   accessibility settings, ya Reader-style overrides) — isliye har filter text par
   -webkit-text-fill-color bhi set karo. */
.shop-side .side-head h3{color:var(--ink,#1B1C1F);-webkit-text-fill-color:var(--ink,#1B1C1F)}
.shop-side .fbox > summary{color:var(--ink,#1B1C1F);-webkit-text-fill-color:var(--ink,#1B1C1F)}
.shop-side .fopt,.shop-side .fopt > span{color:#2B2D31;-webkit-text-fill-color:#2B2D31}
.shop-side .fopt:hover,.shop-side .fopt:hover > span{color:var(--red,#FF2836);-webkit-text-fill-color:var(--red,#FF2836)}
.shop-side .fopt .n,.shop-side .price-note,.shop-side .price-fields > span{
  color:#5B5F66;-webkit-text-fill-color:#5B5F66
}
.shop-side input[type="number"]{color:#1B1C1F;-webkit-text-fill-color:#1B1C1F;background:#fff}
.shop-side input[type="number"]::placeholder{color:#9AA0A6;-webkit-text-fill-color:#9AA0A6}
.shop-side input[type="checkbox"]{accent-color:var(--red,#FF2836)}
.shop-side .btn-clear{color:#2B2D31;-webkit-text-fill-color:#2B2D31}
.shop-side .btn-shop{color:#fff;-webkit-text-fill-color:#fff}
.shop-side{-webkit-tap-highlight-color:transparent}

.side-actions{display:flex;gap:8px;margin-bottom:18px}
.side-actions .btn-shop{flex:1;justify-content:center;padding:11px 12px}
.btn-clear{
  flex:1;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--grey-300);
  border-radius:4px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--grey-800);background:#fff;cursor:pointer;font-family:var(--font-body);padding:11px 12px
}
.btn-clear:hover{border-color:var(--ink)}

/* ---------------- promo banner above the grid ---------------- */
.shop-promo{
  position:relative;border-radius:6px;overflow:hidden;background:var(--grey-100);
  display:flex;align-items:center;min-height:190px;margin-bottom:20px
}
.shop-promo .txt{padding:26px 30px;position:relative;z-index:2;max-width:56%;margin-left:8%}
.shop-promo .script{
  font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--red);
  font-size:15px;margin-bottom:6px
}
.shop-promo h2{font-size:25px;font-weight:800;margin-bottom:8px}
.shop-promo p{font-size:13.5px;color:var(--grey-600);max-width:46ch}
.shop-promo .pic{
  position:absolute;right:4%;top:0;bottom:0;width:44%;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.shop-promo .pic img{
  width:83%;height:auto;
  object-fit:contain;object-position:center center;
}
.shop-promo::after{
  content:"";position:absolute;left:54%;top:0;bottom:0;width:120px;z-index:1;
  background:linear-gradient(90deg,var(--grey-100),rgba(242,242,241,0))
}

/* ---------------- toolbar ---------------- */
.shop-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--grey-300);border-radius:6px;padding:12px 14px;margin-bottom:22px
}
.shop-bar select{
  border:1px solid var(--grey-300);border-radius:4px;padding:9px 30px 9px 12px;font-size:13px;
  font-family:var(--font-body);color:var(--ink);background:#fff no-repeat right 10px center;cursor:pointer;outline:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235B5F66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-size:10px;appearance:none;-webkit-appearance:none
}
.shop-bar select:focus{border-color:var(--red)}
.shop-count{font-size:13px;color:var(--grey-600);font-family:var(--font-mono)}
.shop-bar .spacer{margin-left:auto}
.view-toggle{display:flex;gap:6px}
.view-toggle button{
  width:36px;height:36px;border:1px solid var(--grey-300);border-radius:4px;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:2px;padding:0;transition:.2s
}
.view-toggle button i{display:block;width:3px;height:14px;background:var(--grey-600);border-radius:1px}
.view-toggle button:hover{border-color:var(--ink)}
.view-toggle button.on{background:var(--red);border-color:var(--red)}
.view-toggle button.on i{background:#fff}

.filter-open{
  display:none;align-items:center;gap:8px;border:1px solid var(--grey-300);border-radius:4px;
  background:#fff;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;padding:9px 14px
}
.filter-open svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:2}

/* ---------------- active filter chips ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--grey-300);
  border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--grey-800)
}
.chip b{font-weight:600}
.chip .x{color:var(--red);font-weight:700;line-height:1}
.chip:hover{border-color:var(--red)}

/* ---------------- grid (column count is set by data-cols) ---------------- */
.shop-grid{display:grid;gap:22px}
.shop-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.shop-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.shop-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}

.shop-empty{text-align:center;padding:60px 20px;color:var(--grey-600)}
.shop-empty h3{font-size:19px;margin-bottom:8px;color:var(--ink)}

/* ---------------- pagination ---------------- */
.pager{display:flex;justify-content:center;gap:8px;margin-top:38px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:38px;height:38px;padding:0 10px;border:1px solid var(--grey-300);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;
  color:var(--grey-800);background:#fff;transition:.2s
}
.pager a:hover{border-color:var(--ink)}
.pager .on{background:var(--red);border-color:var(--red);color:#fff}
.pager .off{opacity:.4;pointer-events:none}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .shop-layout{grid-template-columns:230px 1fr;gap:22px}
  .shop-grid[data-cols="4"]{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;padding-top:24px}
  .filter-open{display:inline-flex}

  /* sidebar becomes a slide-in drawer.
     NOTE: site ka header z-index 1050 aur utility-bar 1100 hai — drawer usse
     upar hona chahiye, warna uska title aur close button header ke peeche chhup jaate the. */
  .shop-side{
    position:fixed;left:0;top:0;width:320px;max-width:86vw;z-index:1200;background:#fff;
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;
    padding:0;overflow:hidden;transform:translateX(-102%);transition:transform .28s ease;
    box-shadow:6px 0 28px rgba(0,0,0,.22)
  }
  .shop-side.open{transform:translateX(0)}

  /* title bar upar chipka rahe */
  .side-head{
    display:flex!important;align-items:center;justify-content:space-between;
    margin:0;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));
    border-bottom:1px solid var(--grey-300,#E2E4E9);background:#fff;flex:0 0 auto
  }
  .side-head h3{font-size:17px;font-weight:800;margin:0}
  .side-head button{
    background:#F2F3F6;border:0;width:34px;height:34px;border-radius:50%;
    font-size:22px;line-height:1;color:var(--ink,#1B1C1F);cursor:pointer;padding:0
  }

  /* beech ka hissa hi scroll ho */
  .shop-side > .fbox{flex:0 0 auto;margin:0;padding:0 16px}
  .shop-side > .fbox:first-of-type{padding-top:12px}
  .shop-side{scrollbar-width:thin}
  .shop-side{overflow-y:auto}
  .shop-side .side-head{position:sticky;top:0;z-index:2}
  .shop-side .fbox + .fbox{border-top:1px solid var(--grey-100,#F2F2F1)}

  /* Apply / Clear hamesha neeche dikhein — pehle scroll karke dhoondhne padte the */
  .side-actions{
    position:sticky;bottom:0;margin-top:auto;flex:0 0 auto;
    display:flex;gap:10px;padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid var(--grey-300,#E2E4E9)
  }
  .side-actions .btn-shop,.side-actions .btn-clear{flex:1;text-align:center;justify-content:center}

  .side-veil{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1190;opacity:0;visibility:hidden;transition:.25s}
  .side-veil.open{opacity:1;visibility:visible}

  .shop-grid[data-cols="3"],.shop-grid[data-cols="4"]{grid-template-columns:repeat(3,1fr)}
  .shop-promo{min-height:150px}
  .shop-promo h2{font-size:20px}
  .shop-promo .txt{padding:18px 20px;max-width:62%}
}
@media (max-width:640px){
  .shop-grid,.shop-grid[data-cols="2"],.shop-grid[data-cols="3"],.shop-grid[data-cols="4"]{
    grid-template-columns:repeat(2,1fr);gap:14px
  }
  .view-toggle{display:none}
  .shop-bar{padding:10px;gap:8px}
  .filter-open{width:100%;justify-content:center}
  .shop-bar select{flex:1 1 calc(50% - 4px);min-width:0}
  .shop-count{width:100%;order:5}
  .shop-promo .pic{display:none}
  .shop-promo::after{display:none}
  .shop-promo .txt{max-width:100%}
}
.side-head{display:none}

@media (prefers-reduced-motion:reduce){.shop-side,.side-veil{transition:none}}