/* =====================================================================
   ROCCO · shop.css  (shop listing, category, collection and brand pages)
   Spec: clothing-store-remaining-pages-spec.md section 3 and 18
   ===================================================================== */
.shop__head { padding: 18px 50px 0; }
.crumb--shop { height: auto; padding: 0; }
.shop__title { margin-top: 14px; font-size: 30px; font-weight: 400; line-height: 1.3; text-transform: uppercase; }
.shop__rule { margin-top: 24px; }
.shop__band[hidden], .shop__lookbook[hidden], .shop__head[hidden] { display: none; }

.shop__layout { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 12px; padding: 24px 50px 100px; align-items: start; }

/* Filter sidebar */
.filters { position: sticky; top: 90px; }
.filters__head { display: none; }
.filters__clear { padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.filters__clear-btn { background: none; border: 0; padding: 0; cursor: pointer; min-height: 24px; font-size: 10px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.filters__clear-btn:hover { color: var(--c-accent-6); }
.filters .acc__btn { min-height: 56px; padding: 0; font-size: 14px; font-weight: 500; }
.filters .acc__body { padding: 4px 0 20px; }
.ftree { display: flex; flex-direction: column; gap: 12px; }
.ftree ul { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-left: 10px; }
.fcheck { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.fcheck input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin: 0; flex: 0 0 12px; border: 1px solid var(--c-accent-6); border-radius: 0; background: #fff; display: inline-grid; place-content: center; cursor: pointer; }
.fcheck input:checked { background: var(--c-accent-6); }
.fcheck input:checked::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.fcheck input:focus-visible { outline: 2px solid var(--c-accent-6); outline-offset: 2px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-line); flex: 0 0 16px; }
.fsearch { margin-bottom: 12px; }
.fsearch .f__input { height: 36px; font-size: 12px; }

/* Toolbar */
.toolbar { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toolbar__count { font-size: 12px; line-height: 1.4; color: var(--c-muted); }
.toolbar__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 12px; line-height: 1.4; color: var(--c-accent-6); }
.toolbar__filter { display: none; text-transform: uppercase; font-weight: 500; letter-spacing: .8px; }
.sort { position: relative; }
.sort__menu {
  position: absolute; right: 0; top: 100%; z-index: 30; min-width: 200px; padding: 8px 0;
  background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}
.sort__menu[hidden] { display: none; }
.sort__menu li { padding: 8px 16px; font-size: 12px; line-height: 1.4; cursor: pointer; }
.sort__menu li:hover, .sort__menu li[aria-selected="true"] { background: var(--c-accent-2); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:not(:empty) { margin: 8px 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--c-accent-6); background: none; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--c-accent-6); }
.chip svg { width: 12px; height: 12px; }

/* Grid */
.grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transition: opacity var(--t); }
/* Reserve the space of the first page of cards and the four filter groups before JS fills them (no layout shift) */
.grid:empty { min-height: 1760px; }
.filters__groups:empty { min-height: 228px; }
.grid.is-loading { opacity: .5; }
.grid .badge--stack { top: 48px; }
.shop__none { padding: 60px 0; text-align: center; font-size: 14px; color: var(--c-muted); }
.shop__more { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; }
.shop__more .tl[hidden] { display: none; }

/* Filters as a drawer (tablet, phone) */
.filters__overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.filters__overlay.is-visible { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
  .shop__head { padding: 18px 24px 0; }
  .shop__layout { grid-template-columns: minmax(0, 1fr); padding: 16px 24px 80px; }
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; width: 360px; max-width: 100vw;
    background: var(--c-bg); padding: 0 24px 24px; overflow-y: auto;
    transform: translateX(-100%); visibility: hidden; transition: transform .3s ease, visibility .3s;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters__head { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--c-line); margin-bottom: 16px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
  .filters__head .icon-btn { margin-right: -12px; }
  .toolbar__filter { display: inline-flex; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid:empty { min-height: 2900px; }
  .filters__groups:empty { min-height: 0; }
}

@media (max-width: 767px) {
  .shop__head { padding: 14px 16px 0; }
  .crumb--shop { display: none; }
  .shop__title { margin-top: 0; font-size: 24px; }
  .shop__rule { margin-top: 16px; }
  .shop__layout { padding: 12px 16px 60px; }
  .toolbar { height: auto; flex-wrap: wrap; }
  .toolbar__filter, .sort { flex: 1 1 calc(50% - 8px); }
  .toolbar__filter, .sort__btn { width: 100%; height: 44px; justify-content: center; border: 1px solid var(--c-line); text-transform: uppercase; font-weight: 500; letter-spacing: .8px; }
  .sort__btn .sort__prefix { display: none; }
  .toolbar__count { order: 3; width: 100%; margin-top: 10px; }
  .sort__menu { left: 0; right: 0; }
  .grid { gap: 8px; }
  .grid:empty { min-height: 1700px; }
  .filters { width: 100vw; }
}