/* =========================================================================
   Shiv Shakti — shop page layout
   Full-width, fluid shell + responsive product grid.

   Builds only on the tokens already declared in css/common.css and is
   scoped to <body class="shop-page"> so no other page is affected.
   Pair with:  <link rel="stylesheet" href="assets/shop.css">   (after common.css)
   ========================================================================= */

/* ===================== Full-width shell ===================== */
/* common.css caps .container at 1240px; on the shop page the grid should use
   the whole viewport, with gutters that grow with the screen. */
.shop-page .container{
  max-width:none;
  width:100%;
  padding:0 clamp(16px,3.2vw,56px);
}

/* ===================== Page head ===================== */
/* banner-backed (assets/page-banner.css); these only set the copy */
.shop-page .shop-head{padding:0; text-align:left;}
.shop-page .shop-head h1{font-size:clamp(1.7rem,3.2vw,2.6rem); margin:0 0 10px;}
.shop-page .shop-head p{font-size:clamp(.86rem,1.2vw,1rem); color:#ecdcc2; max-width:44ch;}
.shop-page .shop-head .shop-kicker{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--gold-300);
}
.shop-page .shop-head .shop-kicker::before{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-400));
}

/* ===================== Sidebar + main ===================== */
.shop-page .shop-layout{
  grid-template-columns:clamp(238px,19vw,300px) minmax(0,1fr);
  gap:clamp(24px,2.4vw,44px);
  padding:clamp(28px,4vw,50px) 0;
}
/* minmax(0,1fr) keeps the grid from being widened by its own content */
.shop-page .shop-main{min-width:0;}

.shop-page .filters{
  padding:clamp(18px,1.5vw,26px);
  max-height:calc(100vh - 150px);
  overflow-y:auto;
}

.shop-page .shop-toolbar{margin-bottom:clamp(16px,1.6vw,26px);}

/* ===================== Product grid ===================== */
/* auto-fill + a clamped track keeps every card in a sane 210–260px band and
   simply adds columns as the viewport grows, instead of stretching 4 cards
   across the full width. */
.shop-page .prod-grid{
  grid-template-columns:repeat(auto-fill,minmax(clamp(210px,16vw,260px),1fr));
  gap:clamp(16px,1.5vw,26px);
  align-items:stretch;
}

/* ===================== Card ===================== */
.shop-page .card{height:100%; min-width:0;}
.shop-page .card .info{
  padding:clamp(13px,1vw,18px) clamp(13px,1vw,18px) clamp(15px,1.1vw,20px);
  gap:7px;
}
/* two-line title so prices and buttons line up across a row */
.shop-page .card h4{
  font-size:clamp(.92rem,1.02vw,1.06rem);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.shop-page .card .stars{flex-wrap:wrap;}
.shop-page .card .price-row{flex-wrap:wrap;}
.shop-page .card .variants-mini{flex-wrap:wrap;}
.shop-page .add-row{gap:8px;}
.shop-page .add-row .btn{min-width:0; padding:11px 12px;}
.shop-page .icon-cart{width:40px; height:40px;}

.shop-page .pagination{margin-top:clamp(30px,3.5vw,50px);}

/* ===================== Responsive ===================== */
@media (max-width:1080px){
  /* filters move above the grid — flow the groups into columns so the panel
     stays a short band instead of a tall wall of options */
  .shop-page .shop-layout{grid-template-columns:minmax(0,1fr);}
  .shop-page .filters{
    position:static;
    max-height:none;
    overflow:visible;
    columns:215px 3;
    column-gap:34px;
  }
  .shop-page .filters > *{break-inside:avoid;}
  /* title + "clear all" stay one full-width row above the columns */
  .shop-page .filters h4,
  .shop-page .filters > .f-group:first-of-type{column-span:all;}
  .shop-page .filters > .f-group:first-of-type{padding:0 0 14px;}
  .shop-page .filters .f-group{padding-top:14px;}
}

@media (max-width:640px){
  .shop-page .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px;}
  .shop-page .card .info{padding:12px 12px 14px; gap:6px;}
  .shop-page .card h4{font-size:.88rem;}
  .shop-page .card .stars{font-size:.7rem; gap:3px;}
  .shop-page .card .stars svg{width:11px; height:11px;}
  .shop-page .price-row .sp{font-size:1.02rem;}
  .shop-page .price-row .mrp{font-size:.76rem;}
  .shop-page .card .variants-mini span{font-size:.64rem; padding:2px 7px;}
  .shop-page .add-row{gap:6px;}
  .shop-page .add-row .btn{font-size:.76rem; padding:10px 8px;}
  .shop-page .icon-cart{display:none;}          /* button already links through */
  .shop-page .wish{width:30px; height:30px;}
  .shop-page .wish svg{width:14px; height:14px;}
  .shop-page .badge{font-size:.6rem; padding:4px 8px;}
  .shop-page .shop-toolbar .count{width:100%;}
}

/* below ~340px two cards get too cramped to read */
@media (max-width:340px){
  .shop-page .prod-grid{grid-template-columns:minmax(0,1fr);}
}