/* ───────────────────────────────────────────────────────────────
   Hooshop storefront — کاتالوگ (PLP/PDP). توکن‌ها از تم فعال (theme.css).
   ─────────────────────────────────────────────────────────────── */

.breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; color:var(--text-secondary); margin-bottom:1rem; }
.breadcrumb a { color:var(--text-secondary); }
.breadcrumb a:hover { color:var(--clr-primary); }
.breadcrumb span.sep { opacity:.5; }

.plp { display:grid; grid-template-columns: 260px 1fr; gap:1.5rem; align-items:start; }
@media (max-width: 860px){
    .plp { grid-template-columns: 1fr; }
}

.filter-panel {
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.1rem; position:sticky; top:1rem;
}
@media (max-width: 860px){ .filter-panel { position:static; } }
.filter-panel h3 { font-size:1rem; margin:0 0 .25rem; }
.filter-group { padding:.9rem 0; border-top:1px solid var(--border); }
.filter-group:first-of-type { border-top:none; }
.filter-group__title { font-weight:700; font-size:.9rem; margin-bottom:.6rem; }
.filter-check { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; font-size:.9rem; }
.filter-swatches { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:50px;
    border:1px solid var(--border); font-size:.82rem; cursor:pointer; background:var(--bg-base); }
.chip input { display:none; }
.chip.selected { border-color:var(--clr-primary); color:var(--clr-primary); background:rgba(109,40,217,.06); }
.price-inputs { display:flex; gap:.5rem; }
.price-inputs input { width:100%; padding:.5rem; border:1px solid var(--border); border-radius:var(--radius-sm); }

.plp-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
.plp-toolbar .count { color:var(--text-secondary); font-size:.9rem; }
.plp-toolbar select { padding:.5rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-base); color:inherit; }

.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1100px){ .product-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid { grid-template-columns:repeat(2,1fr); } }

.pcard { background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; display:flex; flex-direction:column; }
.pcard:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.pcard__media { position:relative; aspect-ratio:3/4; background:var(--bg-surface); overflow:hidden; }
.pcard__media img { width:100%; height:100%; object-fit:cover; }
.pcard__noimg { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-secondary); font-size:2rem; }
.pcard__badges { position:absolute; top:.5rem; inset-inline-start:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.badge-new { background:var(--clr-accent); color:#fff; padding:.2rem .5rem; border-radius:50px; font-size:.72rem; font-weight:700; }
.badge-off { background:var(--clr-danger); color:#fff; padding:.2rem .5rem; border-radius:50px; font-size:.72rem; font-weight:700; }
.badge-oos { position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.pcard__body { padding:.75rem .85rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.pcard__name { font-size:.92rem; line-height:1.5; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__price { margin-top:auto; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.pcard__price .now { font-weight:700; font-size:1.05rem; }
.pcard__price .old { color:var(--text-secondary); text-decoration:line-through; font-size:.82rem; }
.toman { font-size:.75rem; color:var(--text-secondary); }

.empty-catalog { text-align:center; padding:4rem 1rem; color:var(--text-secondary); }
.empty-catalog i { font-size:3rem; opacity:.4; display:block; margin-bottom:1rem; }

.store-button {
    min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.5rem .9rem; border:1px solid transparent; border-radius:var(--radius-md);
    cursor:pointer; font:700 .86rem/1.35 var(--font-heading); text-align:center; white-space:nowrap;
    transition:transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}
.store-button:hover { opacity:1; transform:translateY(-1px); }
.store-button:active { transform:translateY(1px) scale(.98); }
.store-button:focus-visible { outline:2px solid var(--clr-primary); outline-offset:2px; }
.store-button--primary { background:var(--clr-primary); color:#fff; }
.store-button--primary:hover { background:#3d203a; color:#fff; }
.store-button--outline { background:transparent; color:var(--clr-primary); border-color:var(--clr-primary); }
.store-button--outline:hover { background:rgba(var(--clr-primary-rgb),.06); color:var(--clr-primary); }
.filter-actions {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.5rem;
}
.filter-actions .store-button { width:100%; min-width:0; padding-inline:.55rem; font-size:.8rem; }

/* pagination (storefront) */
.pager { display:flex; gap:.3rem; justify-content:center; list-style:none; padding:0; margin:1.5rem 0 0; }
.pager a, .pager span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 .6rem;
    border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); }
.pager .active span { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
.pager .disabled span { opacity:.4; }

/* ── PDP ── */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media(max-width:820px){ .pdp{ grid-template-columns:1fr; } }
.gallery__main { aspect-ratio:3/4; background:var(--bg-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__main .noimg { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-secondary); font-size:3rem; }
.gallery__thumbs { display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.gallery__thumbs img { width:64px; height:80px; object-fit:cover; border-radius:var(--radius-sm); border:2px solid transparent; cursor:pointer; }
.gallery__thumbs img.active { border-color:var(--clr-primary); }
.pdp-title { font-size:1.4rem; margin:0 0 .5rem; }
.pdp-meta { color:var(--text-secondary); font-size:.85rem; margin-bottom:1rem; display:flex; gap:1rem; flex-wrap:wrap; }
.price-block { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin:1rem 0; }
.price-block .now { font-size:1.6rem; font-weight:800; }
.price-block .old { color:var(--text-secondary); text-decoration:line-through; }
.price-block .off { background:var(--clr-danger); color:#fff; padding:.15rem .5rem; border-radius:50px; font-size:.8rem; font-weight:700; }
.opt-label { font-weight:700; font-size:.9rem; margin:1rem 0 .5rem; }
.swatch-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.swatch { padding:.4rem .9rem; border:1px solid var(--border); border-radius:50px; cursor:pointer; background:var(--bg-base); font-size:.9rem; }
.swatch.active { border-color:var(--clr-primary); color:var(--clr-primary); }
.size-btn { min-width:52px; padding:.4rem .7rem; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:var(--bg-base); color:inherit; }
.size-btn.active { border-color:var(--clr-primary); color:var(--clr-primary); }
.size-btn.oos { opacity:.4; text-decoration:line-through; cursor:not-allowed; }
.size-group { display:none; gap:.5rem; flex-wrap:wrap; }
.size-group.active { display:flex; }
.pdp-actions { display:flex; gap:.75rem; margin:1.5rem 0; flex-wrap:wrap; align-items:center; }
.pdp-add-button { padding-inline:1.35rem; }
.pdp-wishlist-button { width:42px; flex:0 0 42px; padding:0; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:50px; overflow:hidden; }
.qty button { width:38px; height:44px; border:none; background:transparent; font-size:1.1rem; cursor:pointer; color:inherit; }
.qty input { width:44px; text-align:center; border:none; background:transparent; color:inherit; }
.pdp-links { display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem; margin-top:.5rem; }
.pdp-links a { color:var(--clr-primary); }
.tabs { margin-top:2.5rem; }
.tab-head { display:flex; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:1rem; flex-wrap:wrap; }
.tab-btn { padding:.6rem 1.1rem; border:none; background:transparent; cursor:pointer; color:var(--text-secondary); font:inherit; border-bottom:2px solid transparent; }
.tab-btn.active { color:var(--clr-primary); border-bottom-color:var(--clr-primary); font-weight:700; }
.tab-panel { display:none; line-height:2; }
.tab-panel.active { display:block; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table td { padding:.5rem .75rem; border-bottom:1px solid var(--border); }
.spec-table td:first-child { color:var(--text-secondary); width:180px; }
.carousel { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.carousel .pcard { min-width:190px; max-width:190px; }
.section-h { font-size:1.15rem; font-weight:700; margin:2.5rem 0 1rem; }

@media(max-width:480px) {
    .pdp-actions { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:.5rem; }
    .pdp-actions .qty { grid-column:1 / -1; justify-self:start; }
    .pdp-add-button { width:100%; }
}