/*
 * FILE: public/assets/css/catalog.css
 * Elegant Encasements — Catalog System Styles
 */

.catalog-page { display: grid; grid-template-columns: 280px 1fr; gap: 0; min-height: calc(100vh - 80px); align-items: start; }

/* Sidebar */
.catalog-sidebar { position: sticky; top: 80px; height: calc(100vh - 80px); overflow-y: auto; border-right: 1px solid var(--color-border); background: var(--color-black-soft); padding: var(--space-8); scrollbar-width: thin; scrollbar-color: var(--color-gold) transparent; }

.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }

.sidebar-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: 0; }

.sidebar-clear { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); padding: 0; }
.sidebar-clear:hover { color: var(--color-gold); }

.filter-group { margin-bottom: var(--space-8); }

.filter-group-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-parchment); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }

.filter-group-toggle { color: var(--color-gold); font-size: var(--text-base); transition: transform var(--transition-fast); }
.filter-group.is-collapsed .filter-group-toggle { transform: rotate(-90deg); }

.filter-group-items { display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; transition: max-height var(--transition-base); }
.filter-group.is-collapsed .filter-group-items { max-height: 0 !important; }

.filter-item { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; padding: var(--space-2) 0; }

.filter-item input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; background: transparent; border: 1px solid var(--color-border-gold); appearance: none; -webkit-appearance: none; cursor: pointer; position: relative; transition: background var(--transition-fast), border-color var(--transition-fast); border-radius: 1px; }
.filter-item input[type="checkbox"]:checked { background: var(--color-gold); border-color: var(--color-gold); }
.filter-item input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 3px; width: 4px; height: 7px; border: 1.5px solid var(--color-black); border-top: none; border-left: none; transform: rotate(40deg); }

.filter-item-label { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; transition: color var(--transition-fast); }
.filter-item:hover .filter-item-label,
.filter-item input:checked + .filter-item-label { color: var(--color-parchment); }

.filter-item-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-black-mid); padding: 1px var(--space-2); border-radius: 2px; }

.filter-item--budget .filter-item-label,
.filter-item--cost-effective .filter-item-label,
.filter-item--brand-enhancing .filter-item-label,
.filter-item--luxury .filter-item-label { display: flex; align-items: center; gap: var(--space-2); }

.filter-item--budget .filter-item-label::before         { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tier-budget); }
.filter-item--cost-effective .filter-item-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tier-cost-effective); }
.filter-item--brand-enhancing .filter-item-label::before{ content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tier-brand-enhancing); }
.filter-item--luxury .filter-item-label::before         { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tier-luxury); }

.filter-divider { height: 1px; background: var(--color-border); margin-block: var(--space-6); }

/* Main Area */
.catalog-main { padding: var(--space-8); }

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }

.catalog-result-count { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text-muted); }
.catalog-result-count strong { color: var(--color-gold); font-weight: 500; }

.catalog-toolbar-right { display: flex; align-items: center; gap: var(--space-5); }

.catalog-sort { display: flex; align-items: center; gap: var(--space-3); }
.catalog-sort-label { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.catalog-sort-select { background: transparent; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-parchment); font-family: var(--font-display); font-size: var(--text-sm); padding: var(--space-2) var(--space-6) var(--space-2) 0; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B8973A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; }

.view-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; }
.view-toggle-btn { background: none; border: none; padding: var(--space-2) var(--space-3); color: var(--color-text-muted); cursor: pointer; font-size: var(--text-sm); transition: background var(--transition-fast), color var(--transition-fast); display: flex; align-items: center; justify-content: center; }
.view-toggle-btn.is-active { background: var(--color-gold); color: var(--color-black); }
.view-toggle-btn:hover:not(.is-active) { background: var(--color-black-mid); color: var(--color-gold); }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); min-height: 32px; }
.active-filters:empty { display: none; }

.active-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-gold-dim); border: 1px solid var(--color-border-gold); color: var(--color-gold-light); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 3px var(--space-3); border-radius: 2px; text-transform: uppercase; }
.active-filter-remove { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; opacity: 0.7; transition: opacity var(--transition-fast); }
.active-filter-remove:hover { opacity: 1; }

/* Grid */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.catalog-grid--list { grid-template-columns: 1fr; }
.catalog-grid--list .card-catalog { flex-direction: row; }
.catalog-grid--list .card-catalog__image { width: 180px; aspect-ratio: auto; flex-shrink: 0; }
.catalog-grid--list .card-catalog__body { padding: var(--space-6) var(--space-8); }

.catalog-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-24) var(--space-8); }
.catalog-empty__icon { width: 80px; margin: 0 auto var(--space-6); opacity: 0.15; }
.catalog-empty__title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.catalog-empty__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); }

/* Item Detail */
.item-detail { padding-top: calc(80px + var(--space-8)); }

.item-detail-layout { display: grid; grid-template-columns: 1fr 480px; gap: var(--space-16); align-items: start; padding: var(--space-12) 0; }

.item-gallery { position: sticky; top: calc(80px + var(--space-8)); }

.item-gallery__main { position: relative; aspect-ratio: 1 / 1; background: var(--color-black-soft); border: 1px solid var(--color-border); overflow: hidden; margin-bottom: var(--space-4); cursor: zoom-in; }
.item-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); transition: transform var(--transition-slow); }
.item-gallery__main:hover img { transform: scale(1.04); }

.item-gallery__thumbs { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-gold) transparent; padding-bottom: var(--space-2); }

.item-gallery__thumb { flex-shrink: 0; width: 72px; height: 72px; background: var(--color-black-soft); border: 1px solid var(--color-border); overflow: hidden; cursor: pointer; transition: border-color var(--transition-fast); }
.item-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-gallery__thumb.is-active, .item-gallery__thumb:hover { border-color: var(--color-gold); }

.item-info { padding: var(--space-4) 0; }
.item-info__code { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--color-gold); margin-bottom: var(--space-3); }
.item-info__name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 300; line-height: 1.1; margin-bottom: var(--space-5); }
.item-info__rule { height: 1px; background: var(--color-border-gold); margin-block: var(--space-6); }
.item-info__desc { font-size: var(--text-base); font-weight: 300; color: var(--color-parchment); line-height: 1.8; margin-bottom: var(--space-8); }

.item-specs { margin-bottom: var(--space-8); }
.item-specs-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-5); }

.item-spec-row { display: flex; border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); gap: var(--space-6); }
.item-spec-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); flex: 0 0 140px; }
.item-spec-value { font-size: var(--text-sm); color: var(--color-parchment); flex: 1; }

.item-actions { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); padding: var(--space-6); background: var(--color-black-soft); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.item-actions-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); }

.item-download-link { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); transition: color var(--transition-fast); }
.item-download-link:hover { color: var(--color-gold); }

.related-items { padding-block: var(--space-16); border-top: 1px solid var(--color-border); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.lightbox__close { position: absolute; top: var(--space-6); right: var(--space-6); background: none; border: 1px solid var(--color-border-gold); color: var(--color-parchment); font-size: var(--text-xl); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); }
.lightbox__close:hover { color: var(--color-gold); border-color: var(--color-gold); }

/* Responsive */
@media (max-width: 1100px) {
    .catalog-page { grid-template-columns: 240px 1fr; }
    .item-detail-layout { grid-template-columns: 1fr; gap: var(--space-10); }
    .item-gallery { position: static; }
}

@media (max-width: 900px) {
    .catalog-page { grid-template-columns: 1fr; }
    .catalog-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-overlay); width: 300px; transform: translateX(-100%); transition: transform var(--transition-slow); height: 100vh; }
    .catalog-sidebar.is-open { transform: translateX(0); }
    .catalog-main { padding: var(--space-5); }
}

@media (max-width: 600px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .catalog-grid--list { grid-template-columns: 1fr; }
    .catalog-grid--list .card-catalog { flex-direction: column; }
    .catalog-grid--list .card-catalog__image { width: 100%; aspect-ratio: 1/1; }
    .item-gallery__thumb { width: 56px; height: 56px; }
}