/* ============================================================
   ASTROZON — shop page
   depends on style.css for tokens & shared components
   ============================================================ */

body{ background:#fff; }


/* ============================================================
   BREADCRUMB  (shared with the product page)
   ============================================================ */

.pcrumbs{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.pcrumbs ol{
  list-style:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin:0; padding:14px 0;
  font-size:12px;
}
.pcrumbs li{
  display:flex;
  align-items:center;
  min-width:0;
  color:var(--ink);
}
.pcrumbs li a{
  color:var(--ink-2);
  white-space:nowrap;
  transition:color .18s ease;
}
.pcrumbs li a:hover{ color:var(--brand); }
.pcrumbs li + li::before{
  content:'›';
  flex:0 0 auto;
  margin:0 10px;
  color:#B9BFCB;
}

/* the page you are on is the long one — it truncates, the trail does not */
.pcrumbs li[aria-current]{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}


/* ============================================================
   TRUST STRIP  (shared with the product page)
   ============================================================ */

.trust{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.trust li{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 14px;
  border-left:1px solid var(--line);
}
.trust li:first-child{ border-left:0; }
.trust__ico{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px;
  background:var(--brand-tint);
  color:var(--brand);
}
.trust__ico svg{ width:19px; height:19px; }
.trust h3{
  margin:0;
  font-size:10.5px;
  font-weight:700;
  color:var(--ink);
}
.trust p{
  margin:2px 0 0;
  font-size:11px;
  color:var(--muted);
}

/* the shop closes on the strip rather than opening on a banner */
.trust--standalone{ margin-bottom:44px; }


/* ============================================================
   SHOP LAYOUT
   ============================================================ */

.shop{ background:#fff; }

.shophead{ padding-block:26px 0; }
.shophead__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.35rem, 2.6vw, 1.8rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
}
.shophead__sub{
  margin:7px 0 0;
  font-size:13px;
  color:var(--muted);
}
.shophead__sub p{ margin:0; }

.shop__grid{
  display:grid;
  grid-template-columns:262px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding-block:22px 34px;
}


/* ---------- sidebar ---------- */

.filters{
  position:sticky;
  top:98px;
}
.filters form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* the collapsed bar only exists on narrow screens */
.filters__toggle{
  display:none;
  align-items:center;
  gap:10px;
  width:100%;
  height:46px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}
.filters__ico{ display:grid; place-items:center; width:18px; height:18px; color:var(--ink-2); }
.filters__ico svg{ width:100%; height:100%; }
.filters__label{ margin-right:auto; }
.filters__count{
  display:grid;
  place-items:center;
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.filters__chev{
  display:grid; place-items:center;
  width:18px; height:18px;
  color:var(--ink-2);
  transition:transform .22s ease;
}
.filters__chev svg{ width:100%; height:100%; }
.filters.is-open .filters__chev{ transform:rotate(180deg); }

/* each filter group is a panel, matching the buy box and spec cards */
.fblock{
  padding:15px 16px 17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.fblock + .fblock{ margin-top:0; }

/* the apply / clear group is an action row, not a panel */
.fblock--actions{
  border:0;
  padding:0;
  background:none;
}

.fblock__title{
  margin:0 0 13px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}

/* categories — a tree, so subcategories live under their parent */
.cats{ margin:0; padding:0; }
.cats__kids{ list-style:none; margin:0; padding:0; }

.cat__row{
  display:flex;
  align-items:center;
  gap:4px;
}
.cat__link{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  padding:6px 4px 6px 0;
  font-size:12.5px;
  color:var(--ink-2);
  transition:color .18s ease;
}
.cat__name{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cat__n{
  flex:0 0 auto;
  font-size:11px;
  color:var(--muted);
}
.cat__link:hover{ color:var(--brand); }
.cat__link.is-active{ color:var(--brand); font-weight:700; }
.cat__link.is-active .cat__n{ color:var(--brand); }

.cat__row--all{
  padding-bottom:6px;
  margin-bottom:4px;
  border-bottom:1px solid var(--line);
}

/* expander */
.cat__toggle{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:22px; height:22px;
  border-radius:5px;
  color:#9BA2AF;
  transition:background .18s ease, color .18s ease, transform .22s ease;
}
.cat__toggle svg{ width:14px; height:14px; }
.cat__toggle:hover{ background:#F1F2F5; color:var(--ink); }
.cat.is-open > .cat__row > .cat__toggle{ transform:rotate(180deg); }

/* children hide until their parent is opened */
.cat > .cats__kids{ display:none; }
.cat.is-open > .cats__kids{ display:block; }

/* each level steps in, with a hairline showing the branch */
.cats__kids--1,
.cats__kids--2{
  margin-left:7px;
  padding-left:10px;
  border-left:1px solid var(--line);
}
.cats__kids--1 .cat__link,
.cats__kids--2 .cat__link{ font-size:12px; }
.cats__kids--2 .cat__link{ color:var(--muted); }

/* brand search */
.fsearch{
  width:100%;
  height:34px;
  padding:0 11px;
  margin-bottom:11px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  font:inherit;
  font-size:12px;
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.fsearch::placeholder{ color:#A9AEBA; }
.fsearch:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}

/* checkbox lists */
.checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.checks label{
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-size:12.5px;
  color:var(--ink-2);
  transition:color .18s ease;
}
.checks label:hover{ color:var(--ink); }
.checks input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:15px; height:15px;
  border:1.5px solid #CFD4DD;
  border-radius:3.5px;
  background:#fff;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.checks input[type=checkbox]:checked{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.4 3 3 6-6.6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--brand);
}
.checks label span{ flex:1 1 auto; }
.checks label i{ font-style:normal; font-size:11.5px; color:var(--muted); }

.checks--rating .stars{ margin:0; }

.fmore{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:0;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  transition:color .18s ease;
}
.fmore span{ font-size:14px; line-height:1; color:var(--brand); }
.fmore:hover{ color:var(--brand); }

/* price range */
.range{
  position:relative;
  height:20px;
  margin:6px 0 2px;
}
.range__rail,
.range__fill{
  position:absolute;
  top:50%;
  height:4px;
  border-radius:999px;
  transform:translateY(-50%);
  pointer-events:none;
}
.range__rail{ left:0; right:0; background:#E4E7ED; }
.range__fill{ background:var(--brand); }

.range__in{
  position:absolute;
  left:0; right:0; top:0;
  width:100%;
  height:20px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  pointer-events:none;
}
.range__in::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--brand);
  border:2px solid #fff;
  box-shadow:0 1px 5px rgba(20,23,31,.35);
  cursor:pointer;
}
.range__in::-moz-range-thumb{
  pointer-events:auto;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--brand);
  border:2px solid #fff;
  box-shadow:0 1px 5px rgba(20,23,31,.35);
  cursor:pointer;
}

.range__vals{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  color:var(--muted);
}


/* ---------- toolbar ---------- */

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.toolbar__count{
  margin:0;
  font-size:12.5px;
  color:var(--ink-2);
}
.toolbar__count strong{ color:var(--ink); font-weight:600; }

.toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.select{ position:relative; }
.select::after{
  content:'';
  position:absolute;
  right:12px; top:50%;
  width:7px; height:7px;
  margin-top:-4px;
  border-right:1.6px solid var(--ink-2);
  border-bottom:1.6px solid var(--ink-2);
  transform:rotate(45deg);
  pointer-events:none;
}
.select select{
  appearance:none;
  -webkit-appearance:none;
  height:38px;
  padding:0 34px 0 14px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  font:inherit;
  font-size:12.5px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .18s ease;
}
.select select:hover{ border-color:#CFD4DD; }
.select select:focus{ outline:none; border-color:var(--brand); }

.viewtog{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
}
.viewtog button{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:5px;
  color:#9BA2AF;
  transition:background .18s ease, color .18s ease;
}
.viewtog button svg{ width:16px; height:16px; }
.viewtog button:hover{ color:var(--ink); }
.viewtog button.is-active{
  background:var(--brand-tint);
  color:var(--brand);
}


/* ---------- product grid ---------- */

.pgrid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

.pcard{
  position:relative;
  display:flex;
}
.pcard__link{
  display:flex;
  flex-direction:column;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pcard:hover .pcard__link{
  transform:translateY(-4px);
  border-color:#DCDFE6;
  box-shadow:0 18px 32px -20px rgba(20,23,31,.42);
}

.pcard__media{
  position:relative;
  aspect-ratio:1/1;
  background:#F4F5F7;
  overflow:hidden;
}
.pcard__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.pcard:hover .pcard__media img{ transform:scale(1.06); }

/* badges */
.tag{
  position:absolute;
  top:8px; left:8px;
  z-index:2;
  padding:3px 8px;
  border-radius:4px;
  color:#fff;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.55;
}
.tag--new{ background:#F97316; }
.tag--hot{ background:var(--brand); }
.tag--sale{ background:#EC4899; }

/* wishlist heart */
.wish{
  position:absolute;
  top:8px; right:8px;
  z-index:3;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink-2);
  box-shadow:0 2px 8px rgba(20,23,31,.16);
  transition:color .18s ease, transform .18s ease, background .18s ease;
}
.wish svg{ width:14px; height:14px; }
.wish:hover{ color:var(--brand); transform:scale(1.1); }
.wish.is-on{ color:var(--brand); background:var(--brand-tint); }
.wish.is-on svg path{ fill:currentColor; }

.pcard__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:11px 11px 13px;
}
.pcard__body h3{
  margin:0;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard__meta{
  margin:4px 0 0;
  font-size:10.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pcard__rate{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
}
.pcard__rate .stars{ margin:0; width:58px; height:11px; }
.pcard__rate small{ font-size:10.5px; color:var(--muted); }

.pcard__foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  padding-top:10px;
}
.pcard__price{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}
.pcard__price s{
  margin-left:5px;
  font-weight:500;
  font-size:11px;
  color:#B0B6C2;
}
.off{
  padding:2px 6px;
  border-radius:4px;
  background:var(--brand-tint);
  color:var(--brand);
  font-size:9.5px;
  font-weight:700;
}

/* add to cart */
.addcart{
  position:absolute;
  right:11px; bottom:12px;
  z-index:3;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-2);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.addcart svg{ width:15px; height:15px; }
.addcart:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.addcart.is-added{
  background:#16A34A;
  border-color:#16A34A;
  color:#fff;
  transform:scale(1.12);
}

/* list view */
.pgrid.is-list{ grid-template-columns:1fr; gap:12px; }
.pgrid.is-list .pcard__link{ flex-direction:row; }
.pgrid.is-list .pcard__media{ width:150px; flex:0 0 auto; aspect-ratio:1/1; }
.pgrid.is-list .pcard__body{ padding:16px 20px; }
.pgrid.is-list .pcard__body h3{ font-size:15px; -webkit-line-clamp:1; }
.pgrid.is-list .pcard__meta{ font-size:12px; margin-top:5px; }
.pgrid.is-list .pcard__price{ font-size:15px; }
.pgrid.is-list .addcart{ right:20px; bottom:20px; width:36px; height:36px; }
.pgrid.is-list .addcart svg{ width:18px; height:18px; }


/* ---------- pagination ---------- */

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:34px;
}
.pager__n{
  min-width:32px; height:32px;
  display:grid; place-items:center;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.pager__n:hover{
  border-color:var(--brand);
  color:var(--brand);
}
.pager__n.is-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.pager__n--next svg{ width:15px; height:15px; }
.pager__gap{ padding:0 2px; color:var(--muted); font-size:12.5px; }


/* ---------- 5-up feature strip ---------- */

.features--5 .features__grid{ grid-template-columns:repeat(5, 1fr); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  .pgrid{ grid-template-columns:repeat(4, 1fr); }
}

@media (max-width:980px){
  .shop__grid{ grid-template-columns:1fr; gap:16px; }
  .filters{ position:static; }

  .filters__toggle{ display:flex; }

  /* the panels drop down out of the bar instead of pushing the grid down */
  .filters form{
    display:none;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
    margin-top:12px;
  }
  .filters.is-open form{ display:grid; }
  .fblock--actions{ grid-column:1 / -1; }

  .pgrid{ grid-template-columns:repeat(3, 1fr); }
  .features--5 .features__grid{ grid-template-columns:repeat(2,1fr); }

  .trust{ grid-template-columns:repeat(2, 1fr); }
  .trust li:nth-child(odd){ border-left:0; }
  .trust li:nth-child(n+3){ border-top:1px solid var(--line); }
}

@media (max-width:640px){
  /* A wrapped trail ate three lines above the fold. One line that scrolls
     sideways keeps the path visible without pushing the product down. */
  .pcrumbs ol{
    flex-wrap:nowrap;
    padding:11px 0;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pcrumbs ol::-webkit-scrollbar{ display:none; }
  .pcrumbs li + li::before{ margin:0 7px; }
  .pcrumbs li[aria-current]{ max-width:52vw; }

  .filters form{ grid-template-columns:1fr; }

  .toolbar{ gap:12px; }
  .toolbar__right{ width:100%; flex-wrap:wrap; }
  .select{ flex:1 1 auto; }
  .select select{ width:100%; }

  .pgrid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .pgrid.is-list .pcard__media{ width:110px; }
  .pgrid.is-list .pcard__body{ padding:12px 14px; }
  .pgrid.is-list .addcart{ right:14px; bottom:14px; }

  .features--5 .features__grid{ grid-template-columns:1fr; }
}