/* Phase 3 — catalog depth: subcategory navigation, storefront filters, specifications,
   information sections and the zoomable gallery. Reuses the existing tokens and classes
   (.store-categories, .shop-grid, .section-title) and only adds what is new. */

/* --- two-level category navigation -------------------------------------------------- */
.store-subcategories{display:flex;gap:.5rem;overflow-x:auto;padding:.35rem 0 1rem;margin:-.35rem 0 .5rem;scrollbar-width:none}
.store-subcategories::-webkit-scrollbar{display:none}
.store-subcategories a{display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;min-height:38px;padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);text-decoration:none;font-size:.82rem}
.store-subcategories a small{font-size:.68rem;opacity:.75}
.store-subcategories a.active,.store-subcategories a[aria-current=page]{background:var(--brand);border-color:var(--brand);color:#fff}
.category-tile-children{display:block;font-size:.68rem;color:var(--muted);line-height:1.35;margin-top:.15rem}

/* --- filter panel ------------------------------------------------------------------- */
.catalog-filters{display:grid;gap:1rem;padding:1.1rem 1.2rem;margin:0 0 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.filter-group{display:grid;gap:.45rem;min-width:0}
.filter-title{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.filter-price{display:flex;align-items:center;gap:.5rem}
.filter-price input{width:100%;min-width:0;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font-size:.85rem}
.filter-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;font-size:.85rem;font-weight:650}
.filter-values{display:flex;flex-wrap:wrap;gap:.4rem}
.filter-chip{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-size:.8rem}
.filter-chip input{position:absolute;opacity:0;width:1px;height:1px}
.filter-chip span{display:inline-flex;align-items:baseline;gap:.4rem}
.filter-chip small{font-size:.65rem;color:var(--muted)}
.filter-chip:hover{border-color:var(--brand)}
.filter-chip.selected{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);font-weight:700}
.filter-chip:focus-within{outline:3px solid #588b71;outline-offset:2px}
.filter-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.active-filters{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 1.1rem}
.active-filter{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:999px;background:#eef4f0;color:#20593e;text-decoration:none;font-size:.78rem;font-weight:650}
.active-filter span{font-size:.95rem;line-height:1}

/* --- gallery: thumbnails, zoom button, viewer ---------------------------------------- */
.gallery-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem .1rem .1rem;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumbs button{flex-shrink:0;width:64px;height:64px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;cursor:pointer}
.gallery-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumbs button.active{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.gallery-track figure{position:relative}
.gallery-zoom{position:absolute;right:.6rem;bottom:.6rem;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer}
.gallery-zoom:hover{border-color:var(--brand);color:var(--brand)}
.image-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:rgba(20,17,13,.92)}
.image-lightbox[hidden]{display:none}
.image-lightbox img{max-width:min(100%,1100px);max-height:92vh;object-fit:contain;touch-action:pinch-zoom;background:#fff;border-radius:8px}
.lightbox-close{position:absolute;top:.75rem;right:.9rem;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lightbox-nav{width:48px;height:48px;flex-shrink:0;border:0;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:1.4rem;cursor:pointer}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.3)}
body.is-zoomed{overflow:hidden}

/* --- product page: specifications and information sections --------------------------- */
.spec-table{width:100%;border-collapse:collapse;margin:1.1rem 0 0;font-size:.86rem}
.spec-table th,.spec-table td{padding:.6rem .2rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table th{width:38%;color:var(--muted);font-weight:650}
.product-section{margin:1.4rem 0 0}
.product-section h2{font-size:.95rem;margin:0 0 .4rem}
.product-section p{margin:0;font-size:.87rem;line-height:1.6;color:var(--ink)}

@media(max-width:760px){
    .filter-price{flex-direction:column;align-items:stretch}
    .filter-price span{display:none}
    .gallery-thumbs button{width:54px;height:54px}
    .gallery-zoom{right:.4rem;bottom:.4rem;width:36px;height:36px}
}