/* ═══════════════════════════════════════════════════════════════
   Avori — Shop Page Stylesheet
   Developer: Nathstack Technologies | nathstack.online
═══════════════════════════════════════════════════════════════ */

/* Reuses index.css variables & product card styles */

/* ── Shop layout ─────────────────────────────────────────────── */
.shop-wrap { max-width:1260px; margin:0 auto; padding:1.8rem 1.5rem; }

.shop-layout { display:grid; grid-template-columns:240px 1fr; gap:1.6rem; align-items:start; }
@media(max-width:900px){ .shop-layout{ grid-template-columns:1fr; } .filter-sidebar{ display:none; } .filter-sidebar.mobile-open{ display:block; position:fixed; top:0; left:0; width:80%; max-width:300px; height:100vh; overflow-y:auto; z-index:300; box-shadow:4px 0 24px var(--shadow-lg); } }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--text-muted); margin-bottom:1.2rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-muted); text-decoration:none; transition:color var(--tr); }
.breadcrumb a:hover { color:var(--red); }
.breadcrumb span { color:var(--text-light); font-size:.7rem; }

/* ── Filter sidebar ──────────────────────────────────────────── */
.filter-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:0 2px 10px var(--shadow); }
.filter-sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.filter-sidebar-title { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--text); }
.filter-clear { font-size:.78rem; color:var(--red); font-weight:600; text-decoration:none; cursor:pointer; border:none; background:none; font-family:'DM Sans',sans-serif; padding:0; transition:opacity var(--tr); }
.filter-clear:hover { opacity:.75; }

.filter-group { margin-bottom:1.3rem; border-bottom:1px solid var(--border); padding-bottom:1.2rem; }
.filter-group:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.filter-group-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:.8rem; }

.filter-check { display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; cursor:pointer; font-size:.85rem; color:var(--text-muted); user-select:none; }
.filter-check input { accent-color:var(--red); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
.filter-check:hover { color:var(--text); }
.filter-check-count { margin-left:auto; font-size:.72rem; color:var(--text-light); }

/* Price range */
.price-range { padding:.3rem 0; }
.price-inputs { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.7rem; }
.price-input { position:relative; }
.price-input span { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); font-size:.78rem; color:var(--text-light); }
.price-input input { width:100%; background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .6rem .5rem 1.7rem; font-family:'DM Sans',sans-serif; font-size:.83rem; color:var(--text); outline:none; transition:border-color var(--tr); }
.price-input input:focus { border-color:var(--red); }
.btn-apply-filter { width:100%; margin-top:.8rem; background:var(--red); color:white; border:none; border-radius:var(--radius-sm); padding:.6rem; font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:600; cursor:pointer; transition:opacity var(--tr); }
.btn-apply-filter:hover { opacity:.88; }

/* ── Shop toolbar ────────────────────────────────────────────── */
.shop-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.shop-count { font-size:.86rem; color:var(--text-muted); font-weight:500; }
.shop-count strong { color:var(--text); }
.shop-toolbar-right { display:flex; align-items:center; gap:.7rem; }

.sort-wrap { position:relative; }
.sort-select { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.52rem 2rem .52rem .85rem; font-family:'DM Sans',sans-serif; font-size:.84rem; color:var(--text); outline:none; appearance:none; cursor:pointer; transition:border-color var(--tr); }
.sort-select:focus { border-color:var(--red); }
.sort-arrow { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-light); pointer-events:none; }

.view-btns { display:flex; gap:.3rem; }
.view-btn { width:34px; height:34px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); transition:all var(--tr); }
.view-btn.active, .view-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-glow); }
.view-btn svg { width:16px; height:16px; }

/* Mobile filter button */
.btn-mobile-filter { display:none; align-items:center; gap:.4rem; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .9rem; font-family:'DM Sans',sans-serif; font-size:.83rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all var(--tr); }
.btn-mobile-filter:hover { border-color:var(--red); color:var(--red); }
.btn-mobile-filter svg { width:15px; height:15px; }
@media(max-width:900px){ .btn-mobile-filter{ display:flex; } }

/* ── Active filter chips ─────────────────────────────────────── */
.active-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; }
.filter-chip { display:inline-flex; align-items:center; gap:.35rem; background:var(--red-glow); color:var(--red); border:1px solid rgba(192,57,43,.22); border-radius:99px; padding:.28rem .75rem; font-size:.76rem; font-weight:600; cursor:pointer; transition:all var(--tr); }
.filter-chip:hover { background:rgba(192,57,43,.2); }
.filter-chip svg { width:12px; height:12px; }

/* ── Products grid / list ────────────────────────────────────── */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.1rem; }
.prod-grid.list-view { grid-template-columns:1fr; }

/* List view card override */
.prod-grid.list-view .prod-card { display:grid; grid-template-columns:180px 1fr; }
.prod-grid.list-view .prod-img-wrap { aspect-ratio:unset; height:180px; }
.prod-grid.list-view .prod-info { padding:1.1rem 1.2rem; display:flex; flex-direction:column; justify-content:space-between; }
.prod-grid.list-view .prod-name { -webkit-line-clamp:3; }
.prod-grid.list-view .prod-actions { display:none; }
@media(max-width:600px){ .prod-grid.list-view .prod-card{ grid-template-columns:1fr; } .prod-grid.list-view .prod-img-wrap{ height:200px; } }

/* ── Pagination ──────────────────────────────────────────────── */
.shop-pagination { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:2rem; flex-wrap:wrap; }
.pg-btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 .6rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; transition:all var(--tr); cursor:pointer; }
.pg-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-glow); }
.pg-btn.active { background:var(--red); border-color:var(--red); color:white; font-weight:700; }
.pg-ellipsis { color:var(--text-light); padding:0 .3rem; }

/* ── Empty state ─────────────────────────────────────────────── */
.shop-empty { text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.shop-empty svg { width:60px; height:60px; stroke:var(--border); margin:0 auto 1rem; }
.shop-empty h3 { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; color:var(--text-muted); margin-bottom:.4rem; }
.shop-empty p { font-size:.87rem; margin-bottom:1.3rem; }