/* ===== Shop + Product page ===== */

/* layout */
.shop-layout{display:grid;grid-template-columns:268px 1fr;gap:38px;padding:46px 0 80px}
.shop-side{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px}
.side-block{margin-bottom:30px}
.side-block h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat-list a{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:8px;font-size:16.5px;color:var(--body);transition:.18s;margin-bottom:2px}
.cat-list a:hover{background:#fff;color:var(--taupe)}
.cat-list a.active{background:var(--taupe);color:#fff}
.cat-list a span{font-size:12px;color:var(--muted)}
.cat-list a.active span{color:rgba(255,255,255,.8)}
.price-filter{display:flex;gap:8px;align-items:center}
.price-filter input{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;font-size:13px;font-family:var(--sans);outline:none}
.price-filter input:focus{border-color:var(--accent)}
.side-block .btn{width:100%;justify-content:center;margin-top:12px;padding:10px}
.side-search{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:#fff}
.side-search input{flex:1;border:0;padding:12px 13px;font-size:15.5px;font-family:var(--sans);outline:none;background:transparent;min-width:0;color:var(--ink)}
.side-search button{background:var(--taupe);color:#fff;border:0;padding:0 15px;cursor:pointer;display:flex;align-items:center;transition:.2s}
.side-search button:hover{background:var(--coffee)}
.side-search button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

/* toolbar */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.shop-toolbar .result-count{font-size:16.5px;color:var(--muted)}
.shop-toolbar .result-count b{color:var(--ink);font-weight:500}
.toolbar-right{display:flex;align-items:center;gap:12px}
.sort-select{border:1px solid var(--line-strong);border-radius:999px;padding:12px 22px;font-size:16px;font-family:var(--sans);color:var(--coffee);background:#fff;cursor:pointer;outline:none}
.filter-toggle{display:none;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px;padding:10px 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--coffee)}
.active-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--coffee)}
.chip button{color:var(--muted);font-size:14px;line-height:1}
.chip button:hover{color:var(--oos)}

/* grid + pagination */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.empty-state{text-align:center;padding:80px 20px;color:var(--muted)}
.empty-state svg{width:60px;height:60px;stroke:var(--line-strong);fill:none;stroke-width:1.4;margin:0 auto 18px}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pagination button{min-width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;color:var(--coffee);font-size:14px;transition:.2s;padding:0 12px}
.pagination button:hover:not([disabled]){border-color:var(--taupe);color:var(--taupe)}
.pagination button.active{background:var(--taupe);color:#fff;border-color:var(--taupe)}
.pagination button[disabled]{opacity:.4;cursor:not-allowed}
.pagination .dots{color:var(--muted);padding:0 4px}

/* mobile drawer for filters */
.side-backdrop{display:none}
@media(max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .shop-side{position:fixed;top:0;left:0;height:100%;width:300px;max-width:88vw;background:var(--cream);z-index:320;transform:translateX(-100%);transition:.3s;max-height:none;padding:24px;box-shadow:var(--shadow);overflow-y:auto}
  .shop-side.open{transform:none}
  .side-backdrop.open{display:block;position:fixed;inset:0;background:rgba(31,27,22,.45);z-index:315}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ===== Product detail ===== */
.pd-wrap{padding:40px 0 70px}
.pd-top{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:start}
.pd-gallery{position:sticky;top:104px}
.pd-main{background:#fff;border:1px solid var(--line);border-radius:20px;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:32px}
.pd-cat{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.pd-title{font-size:35px;font-weight:600;line-height:1.3;margin:12px 0 18px;color:var(--ink)}
.pd-price{font-family:var(--serif);font-size:35px;color:var(--accent-dark);font-weight:700;margin-bottom:18px}
.pd-avail{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:8px 18px;border-radius:999px;margin-bottom:24px;color:#fff}
.pd-avail.in{background:var(--instock)}
.pd-avail.pre{background:var(--preorder)}
.pd-avail.out{background:var(--oos)}
.pd-avail .dot{width:9px;height:9px;border-radius:50%;background:#fff}
.pd-desc{color:var(--body);font-size:17.5px;line-height:1.9;margin-bottom:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.pd-meta{font-size:15px;color:var(--muted);margin-bottom:26px}
.pd-meta a{color:var(--taupe)}
.pd-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.pd-qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.pd-qty button{width:46px;height:52px;font-size:21px;color:var(--coffee)}
.pd-qty button:hover{background:var(--line)}
.pd-qty span{min-width:48px;text-align:center;font-size:17px}
.pd-actions .btn{height:50px}
.pd-actions .btn-add{flex:1;min-width:180px;justify-content:center}
.pd-accordion{margin-top:8px}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:17px 2px;font-size:16.5px;color:var(--ink);letter-spacing:.02em;text-align:left}
.acc-head .pm{font-size:20px;color:var(--accent);transition:.2s}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s;color:var(--body);font-size:15.5px;line-height:1.85}
.acc-item.open .acc-body{max-height:240px;padding-bottom:16px}
.acc-item.open .acc-head .pm{transform:rotate(45deg)}
.pd-404{text-align:center;padding:100px 20px}
.pd-404 h1{font-size:34px;font-weight:300;margin-bottom:14px}
.related{margin-top:80px}
@media(max-width:900px){
  .pd-top{grid-template-columns:1fr;gap:30px}
  .pd-gallery{position:static}
}