/* =========================================================
   EDIUSFA — 12-ARCHIVE
   Page-specific styles for the product archive (shop + product_cat).
   -----------------------------------------------------------------
   Source of truth: ediusfa-product-archive.html (PRODUCT ARCHIVE
   PAGE-SPECIFIC STYLES block + MOBILE FILTER DRAWER + skeleton
   + empty state + pagination + drawer styles)
   -----------------------------------------------------------------
   NOTE: .pdp-container, .pdp-header, .header-search-toggle,
   .comp-mobile-searchbar, .comp-footer overrides, .mobile-sticky-nav,
   body padding-bottom, and all component-level rules (cat-card,
   filter-panel, filter-chip, pagination, prod-card, etc.) live in
   their co-located files from v0.1.0 — they are NOT redefined here.
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.2.0
   @version    0.2.0
   ========================================================= */

/* ---------- Breadcrumb bar ---------- */
.pdp-breadcrumb-bar{padding:16px 0; border-bottom:1px solid var(--line);}

/* ---------- Compact category header (NOT a hero — orientation only) ---------- */
.cat-header{padding:22px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.cat-header-left{display:flex; align-items:center; gap:14px;}
.cat-header-icon{
  width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg, var(--cyan), var(--amber));
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.cat-header h1{font-size:19px; font-weight:800; margin-bottom:3px;}
.cat-header-meta{font-size:12.5px; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap;}
.cat-header-chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; max-width:100%;}

/* ---------- Toolbar: search + sort + count + view toggle ---------- */
.archive-toolbar{
  display:flex; align-items:center; gap:14px; padding:18px 0; flex-wrap:wrap;
}
.archive-toolbar .searchbar{flex:1; min-width:220px; max-width:420px;}
.toolbar-right{display:flex; align-items:center; gap:10px; margin-inline-start:auto; flex-wrap:wrap;}
.product-count{font-size:13px; color:var(--ink-faint); white-space:nowrap;}
.product-count b{color:var(--ink); font-family:var(--font-mono);}
.sort-wrap{min-width:190px;}
.mobile-filter-btn{display:none; align-items:center; gap:8px;}
.mobile-filter-btn .filter-count{
  background:var(--cyan); color:var(--ink-on-accent); font-family:var(--font-mono); font-size:10.5px;
  border-radius:99px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
@media (max-width:980px){ .mobile-filter-btn{display:inline-flex;} }

/* ---------- Active filters row ---------- */
.active-filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:18px;}
.active-filters:empty{display:none;}

/* ---------- Layout: sidebar + grid ---------- */
.archive-layout{display:grid; grid-template-columns:264px 1fr; gap:28px; align-items:flex-start; padding-bottom:64px;}
@media (max-width:980px){ .archive-layout{grid-template-columns:1fr;} }

.filter-sidebar{position:sticky; top:150px; display:flex; flex-direction:column; gap:18px; max-height:calc(100vh - 170px); overflow-y:auto; padding-inline-end:4px;}
.filter-sidebar::-webkit-scrollbar{width:5px;}
.filter-sidebar::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px;}
@media (max-width:980px){ .filter-sidebar{display:none;} }

.filter-block{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;}
.filter-block-head{display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin-bottom:2px;}
.filter-block-head .filter-title{margin-bottom:0;}
.filter-block-head svg{color:var(--ink-faint); transition:transform var(--dur-fast) var(--ease); flex-shrink:0;}
.filter-block.is-collapsed .filter-block-head svg{transform:rotate(-90deg);}
.filter-block-body{display:flex; flex-direction:column; gap:11px; padding-top:14px; max-height:400px; overflow:hidden; transition:max-height var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);}
.filter-block.is-collapsed .filter-block-body{max-height:0; padding-top:0; opacity:0;}
.filter-block .checkbox, .filter-block .radio{justify-content:space-between; width:100%;}
.filter-block .checkbox > span:last-child, .filter-block .radio > span:last-child{flex:1; display:flex; justify-content:space-between; gap:8px;}
.opt-count{color:var(--ink-faint); font-family:var(--font-mono); font-size:11px;}

.clear-filters-btn{width:100%;}

/* ---------- Product grid ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:1260px){ .product-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:980px){ .product-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:760px){ .product-grid{grid-template-columns:repeat(2, 1fr); gap:12px;} }
@media (max-width:460px){ .product-grid{grid-template-columns:repeat(2, 1fr); gap:10px;} }
.product-grid .prod-card{opacity:0; animation:archiveCardIn .35s var(--ease) forwards;}

/* ---------- Product card stretched-link (fix: cards are now clickable) ---------- */
.prod-card-cover{position:absolute; inset:0; z-index:1; border-radius:inherit;}
.prod-card .add-btn{position:relative; z-index:2;}
@keyframes archiveCardIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Skeleton loading grid ---------- */
.grid-loading .prod-card{display:none;}
.skeleton-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.skeleton-card .prod-thumb{background:linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-sunken) 37%, var(--bg-elevated-2) 63%); background-size:400% 100%; animation:dsShimmer 1.6s ease-in-out infinite;}
.skeleton-card .prod-body{padding:16px; display:flex; flex-direction:column; gap:10px;}
.skeleton-card .sk-line{height:12px; border-radius:5px; background:linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-sunken) 37%, var(--bg-elevated-2) 63%); background-size:400% 100%; animation:dsShimmer 1.6s ease-in-out infinite;}

/* ---------- Pagination wrap ---------- */
.archive-pagination{display:flex; justify-content:center; padding:36px 0 8px;}

/* ---------- Empty state ---------- */
.empty-state{display:none; flex-direction:column; align-items:center; text-align:center; padding:70px 20px; gap:16px;}
.empty-state.is-visible{display:flex;}
.empty-state svg{color:var(--ink-faint);}
.empty-state h3{font-size:17px; font-weight:700;}
.empty-state p{font-size:13.5px; color:var(--ink-faint); max-width:340px;}

/* ---------- Mobile Filter Drawer / Bottom Sheet ---------- */
.filter-drawer-overlay{
  position:fixed; inset:0; background:var(--overlay); z-index:130; opacity:0; pointer-events:none;
  transition:opacity var(--dur-med) var(--ease);
}
.filter-drawer-overlay.is-open{opacity:1; pointer-events:auto;}
.filter-drawer{
  position:fixed; inset-inline:0; bottom:0; z-index:131; background:var(--bg-elevated);
  border-radius:20px 20px 0 0; max-height:85vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform var(--dur-med) var(--ease);
  box-shadow:var(--shadow-lg);
}
.filter-drawer-overlay.is-open .filter-drawer{transform:translateY(0);}
.filter-drawer-handle{width:40px; height:4px; border-radius:99px; background:var(--line-strong); margin:10px auto;}
.filter-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:6px 18px 14px; border-bottom:1px solid var(--line);}
.filter-drawer-head h3{font-size:15px; font-weight:800;}
.filter-drawer-body{overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px;}
.filter-drawer-foot{display:flex; gap:10px; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);}
.filter-drawer-foot .btn{flex:1;}