/* ============================================================
   Sirmos Bebe — category / product-list page
   Class rules ported from the design's styles.css.
   Markup port lands in Milestone 2 (product/category.twig).
   ============================================================ */
.cat-layout{display:grid;grid-template-columns:clamp(240px,22vw,300px) 1fr;gap:clamp(28px,3vw,54px);align-items:start}
.cat-grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px) clamp(10px,1vw,18px)}
.cat-filters__backdrop{display:none}

/* ---------- breadcrumb + title bar (dark) ---------- */
.cat-head{width:100%;background:var(--sb-black);border-radius:0 0 var(--sb-r-xl) var(--sb-r-xl)}
.cat-head__wrap{max-width:var(--sbmax);margin:0 auto;padding:clamp(18px,2.2vw,32px) var(--sb-pad) clamp(28px,3.4vw,52px)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.5)}
.breadcrumb a{display:inline-flex;align-items:center;color:rgba(255,255,255,.5)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .is-current{color:#fff}
.cat-head__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;margin-top:clamp(16px,1.6vw,22px)}
.cat-title{margin:0;font-family:var(--sb-font);font-size:clamp(23px,3.6vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.02;color:#fff}
.cat-sub{margin:12px 0 0;font-size:clamp(14px,1.05vw,16px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.7);white-space:nowrap}

.cat-prod-section{max-width:var(--sbmax);margin:0 auto;padding:clamp(22px,2.6vw,40px) var(--sb-pad) clamp(64px,7vw,120px)}

/* ---------- mobile filter bar + FAB ---------- */
.cat-mobilebar{display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.cat-mobilebar__btn,.cat-fab{display:inline-flex;align-items:center;gap:9px;font-family:var(--sb-font);font-weight:600;letter-spacing:-.01em;cursor:pointer}
.cat-mobilebar__btn{padding:12px 18px;border:1.5px solid var(--sb-ink);border-radius:var(--sb-r-md);background:#fff;color:var(--sb-ink);font-size:13px}
.cat-count-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sb-ink);color:#fff;font-size:10px;font-weight:700}
.cat-fab{position:fixed;left:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,34px);z-index:150;display:none;height:52px;padding:0 22px;border:none;border-radius:26px;background:var(--sb-ink);color:#fff;font-size:13px;box-shadow:0 6px 22px rgba(23,19,13,.3)}

/* ---------- filters sidebar ---------- */
.cat-filters__head{display:none;align-items:center;justify-content:space-between;margin-bottom:20px}
.cat-filters__close{width:36px;height:36px;display:grid;place-items:center;padding:0;border:none;background:transparent;color:var(--sb-sale);cursor:pointer}
.cf-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--sb-line)}
.cf-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--sb-font);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--sb-ink)}
.cf-title img{width:18px;height:18px;display:block}
.cf-clear{padding:0;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--sb-caramel);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cf-group{margin-bottom:26px}
.cf-group:last-child{margin-bottom:0}
.cf-group h3{margin:0 0 14px;font-family:var(--sb-font);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sb-ink)}
.cf-list{display:flex;flex-direction:column;gap:11px}
.cf-check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:400;color:var(--sb-ink-2);cursor:pointer}
.cf-sizes{display:flex;flex-wrap:wrap;gap:8px}
.cf-size{min-width:44px;height:38px;padding:0 12px;border:1px solid var(--sb-line-strong);border-radius:var(--sb-r-sm);background:#fff;color:var(--sb-ink);font-family:var(--sb-font);font-size:13px;font-weight:600;cursor:pointer}
.cf-size[aria-pressed="true"]{background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}
.cf-price-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-weight:500;color:var(--sb-ink-soft)}

/* ---------- toolbar + empty + pagination ---------- */
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2vw,30px)}
.cat-toolbar__count{font-size:13px;font-weight:500;color:var(--sb-ink-soft)}
.cat-toolbar__sort{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--sb-ink-soft)}
.cat-empty{padding:clamp(60px,9vw,120px) 20px;text-align:center;border:1px dashed var(--sb-line-strong);border-radius:var(--sb-r-lg)}
.cat-empty h3{margin:0 0 6px;font-family:var(--sb-font);font-size:19px;font-weight:700;color:var(--sb-ink)}
.cat-empty p{margin:0 0 20px;font-size:14px;font-weight:300;color:var(--sb-muted)}
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(40px,4vw,64px)}
.pagination a,.pagination span,.pagination button{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--sb-line-strong);border-radius:var(--sb-r-md);background:#fff;color:var(--sb-ink);font-family:var(--sb-font);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.pagination a:hover,.pagination button:hover{border-color:var(--sb-ink)}
.pagination .is-active{background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* ---------- recently viewed + quick categories ---------- */
.cat-recent{width:100%;margin-top:clamp(56px,6vw,92px);background:var(--sb-cream)}
.cat-recent__wrap{max-width:var(--sbmax);margin:0 auto;padding:clamp(48px,5vw,78px) var(--sb-pad)}
.cat-recent h2{margin:0 0 clamp(20px,2.2vw,30px);font-family:var(--sb-font);font-size:clamp(18px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--sb-ink)}
.mini-rel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mini-rel::-webkit-scrollbar{display:none}
.mini-rel>a{flex:0 0 clamp(240px,22vw,300px);min-width:0;scroll-snap-align:start;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;transition:border-color .18s,background .18s}
.mini-rel>a:hover{border-color:var(--sb-ink);background:var(--sb-cream-2)}
.mini-rel__img{flex:0 0 auto;width:64px;height:78px;border-radius:5px;overflow:hidden;background:var(--sb-tint);display:block}
.mini-rel__img img{width:100%;height:100%;object-fit:cover}
.mini-rel__meta{min-width:0;display:flex;flex-direction:column;gap:5px}
.mini-rel__brand{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sb-faint)}
.mini-rel__title{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--sb-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.mini-rel__price{font-family:var(--sb-font);font-size:13.5px;font-weight:700;color:var(--sb-ink)}
.quick-cats-wrap{margin-top:clamp(34px,3.4vw,48px);padding-top:clamp(28px,3vw,38px);border-top:1px solid var(--sb-line-2)}
.quick-cats-wrap h3{margin:0 0 clamp(14px,1.6vw,20px);font-family:var(--sb-font);font-size:clamp(15px,1.3vw,18px);font-weight:700;letter-spacing:-.02em;color:var(--sb-ink)}
.quick-cats{display:flex;flex-wrap:wrap;gap:10px 12px}
.quick-cats a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--sb-line-2);border-radius:999px;background:#fff;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--sb-ink-2);transition:background .18s,border-color .18s,color .18s}
.quick-cats a:hover{background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}

/* ---------- FAQ ---------- */
.faq{width:100%;margin-top:var(--sb-gap-sec)}
.faq__wrap{max-width:var(--sbmax);margin:0 auto;padding:clamp(52px,6vw,96px) var(--sb-pad) 0;border-top:1px solid var(--sb-line)}
.faq__title{margin:0 0 clamp(28px,3vw,44px);font-family:var(--sb-font);font-size:clamp(24px,2.8vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--sb-ink);text-align:center}
.faq-item{border-bottom:1px solid var(--sb-line)}
.faq-item:first-child{border-top:1px solid var(--sb-line)}
.faq-item>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,2vw,26px) 4px;cursor:pointer;font-family:var(--sb-font);font-size:clamp(15px,1.4vw,18px);font-weight:600;letter-spacing:-.01em;color:var(--sb-ink)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-chev{flex:0 0 auto;transition:transform .3s ease}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item p{margin:0;padding:0 4px clamp(20px,2vw,26px);font-size:clamp(14px,1.1vw,16px);font-weight:300;line-height:1.65;color:var(--sb-ink-soft)}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .32s ease,content-visibility .32s allow-discrete;content-visibility:hidden}
.faq-item[open]::details-content{block-size:auto;content-visibility:visible}

/* circular filter checkboxes */
.filter-check{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid #C9BEAE;border-radius:50%;background:#fff;cursor:pointer;position:relative;flex:0 0 auto;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.filter-check:hover{background:rgba(224,168,122,.16)}
.filter-check:checked{background:rgba(224,168,122,.28);border-color:rgba(224,168,122,.8);-webkit-backdrop-filter:blur(6px) saturate(150%);backdrop-filter:blur(6px) saturate(150%)}
.filter-check:checked::after{content:"";position:absolute;left:50%;top:46%;width:5px;height:8px;border-right:1.5px solid var(--sb-ink);border-bottom:1.5px solid var(--sb-ink);transform:translate(-50%,-50%) rotate(45deg)}
.cat-filters button{transition:background .28s ease,border-color .28s ease,color .28s ease}
.cat-filters button:hover{background:var(--sb-peach-tint);border-color:var(--sb-peach-tint)}

/* price range */
.price-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:#EAD4BE;outline:none}
.price-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#EAD4BE}
.price-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:var(--sb-ink);border:none;cursor:pointer}
.price-range::-moz-range-track{height:6px;border-radius:3px;background:#EAD4BE}
.price-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sb-ink);border:none;cursor:pointer}

/* glass sort dropdown */
.sort-select{-webkit-appearance:none;appearance:none;padding:11px 40px 11px 16px;border:1px solid rgba(23,19,13,.12);border-radius:10px;
  background-color:rgba(255,255,255,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317130D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 6px 20px rgba(23,19,13,.08),inset 0 1px 0 rgba(255,255,255,.6);color:var(--sb-ink);cursor:pointer;transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.sort-select:hover{background-color:rgba(255,255,255,.72);border-color:rgba(224,168,122,.7)}
.sort-select:focus{outline:none;box-shadow:0 6px 22px rgba(23,19,13,.12),0 0 0 3px rgba(224,168,122,.22)}

@media (max-width:1280px){.cat-grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1024px){.cat-layout{grid-template-columns:clamp(210px,24vw,260px) 1fr;gap:clamp(20px,2.4vw,36px)}}
@media (max-width:900px){
  .cat-layout{grid-template-columns:1fr}
  .cat-toolbar{display:none}
  .cat-mobilebar{display:flex}
  .cat-fab{display:inline-flex}
  .cat-grid4{grid-template-columns:repeat(3,1fr)}
  .cf-title{display:none}
  .cat-filters{position:fixed;inset:0;width:100%;height:100%;background:#fff;z-index:430;transform:translateX(-100%);transition:transform .34s var(--sb-ease);overflow-y:auto;padding:20px clamp(20px,5vw,28px) 32px}
  .cat-filters[data-open="true"]{transform:translateX(0)}
  .cat-filters__head{display:flex}
  .cat-filters__backdrop{position:fixed;inset:0;background:rgba(23,19,13,.5);z-index:425}
  .cat-filters__backdrop[data-open="true"]{display:block}
}
@media (max-width:640px){.cat-sub{white-space:normal}}
@media (max-width:720px){.cat-grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cat-grid4{grid-template-columns:repeat(2,1fr);gap:12px 10px}}

/* ============================================================
   ho_filter skin — group headers, checks, size chips, chips row
   The engine toggles .is-collapsed on .filter-group and .is-disabled
   on the label, so style from those.
   ============================================================ */
.ho-filters{display:block}

.cf-group__title{display:flex;align-items:center;gap:8px;margin:0 0 14px;cursor:pointer;
  font-family:var(--sb-font);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sb-ink)}
.cf-chev{margin-left:auto;flex:0 0 auto;transition:transform .25s ease;color:var(--sb-faint)}
.filter-group.is-collapsed .cf-chev{transform:rotate(-90deg)}
.filter-group.is-collapsed .cf-group__body{display:none}
.cf-clear{margin-left:auto;font-size:11px;font-weight:600;color:var(--sb-caramel);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.cf-clear:empty{display:none}
.cf-group__title .cf-clear + .cf-chev{margin-left:0}

/* checkbox rows */
.cf-check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:400;color:var(--sb-ink-2);cursor:pointer}
.cf-check .cf-label{flex:1 1 auto;min-width:0}
.cf-count{font-size:11px;color:var(--sb-faint);font-variant-numeric:tabular-nums}
.cf-check.is-disabled{opacity:.4;cursor:not-allowed}
.cf-sublink{display:block;padding:7px 0;font-size:13.5px;color:var(--sb-ink-2)}
.cf-sublink:hover{color:var(--sb-caramel)}

/* size chips — a real checkbox stretched invisibly over the chip keeps it keyboard-accessible */
.cf-sizes{display:flex;flex-wrap:wrap;gap:8px}
.cf-size{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:44px;height:38px;padding:0 10px;border:1px solid var(--sb-line-strong);border-radius:var(--sb-r-sm);
  background:#fff;color:var(--sb-ink);font-family:var(--sb-font);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.cf-size:hover{background:var(--sb-peach-tint);border-color:var(--sb-peach-tint)}
.cf-size__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf-size:has(.cf-size__input:checked){background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}
.cf-size:has(.cf-size__input:checked) .cf-count{color:rgba(255,255,255,.7)}
.cf-size.is-disabled{opacity:.35;pointer-events:none;text-decoration:line-through}
.cf-size .cf-count{font-size:10px}

/* mobile drawer foot */
.cat-filters__foot{display:none}
@media (max-width:900px){
  .cat-filters__foot{display:block;position:sticky;bottom:0;padding:14px 0 4px;background:#fff;
    box-shadow:0 -10px 20px rgba(255,255,255,.9)}
}

/* active filter chips */
.selected-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(14px,1.6vw,22px)}
.selected-filters__label{font-size:12px;color:var(--sb-muted)}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;border-radius:999px;
  background:var(--sb-cream);font-size:12.5px;font-weight:500;color:var(--sb-ink)}
.filter-chip button{width:18px;height:18px;display:grid;place-items:center;padding:0;border:none;border-radius:50%;
  background:rgba(23,19,13,.08);color:var(--sb-ink);font-size:13px;line-height:1;cursor:pointer}
.filter-chip button:hover{background:var(--sb-sale);color:#fff}
.selected-filters__sep{flex:1 1 auto}
.clear-filters{font-size:12px;font-weight:600;color:var(--sb-sale);text-decoration:underline;text-underline-offset:2px}

/* in-grid promo banner (Design → Banners linked to a category) */
.cat-banner-tile{position:relative;display:block;overflow:hidden;border-radius:var(--sb-r-md);background:var(--sb-tint);aspect-ratio:3/4}
.cat-banner-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.cat-banner-tile:hover img{transform:scale(1.05)}
.cat-banner-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.8vw,26px);
  background:linear-gradient(180deg,rgba(23,19,13,0) 0%,rgba(23,19,13,.72) 100%);
  font-family:var(--sb-font);font-size:clamp(15px,1.4vw,20px);font-weight:700;letter-spacing:-.01em;color:#fff}

/* listings without a filter sidebar (special / wishlist / search) fit 4 across */
.cat-grid4--wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.cat-grid4--wide{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.cat-grid4--wide{grid-template-columns:repeat(2,1fr)}}

/* wishlist card: heart is a link, plus an add-to-cart button under the price */
.pcard__wish.is-active{background:#fff}
.pcard__cta{width:100%;height:42px;margin-top:10px}

/* ---------- brand pages ---------- */
.brandhead{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.brandhead__logo{flex:0 0 auto;display:grid;place-items:center;width:clamp(84px,9vw,120px);height:clamp(56px,6vw,76px);
  padding:10px 14px;border-radius:var(--sb-r-md);background:#fff}
.brandhead__logo img{max-width:100%;max-height:100%;width:auto;height:auto}

.brand-index{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,32px)}
.brand-index a{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--sb-line);
  border-radius:var(--sb-r-sm);background:#fff;font-family:var(--sb-font);font-size:13px;font-weight:700;color:var(--sb-ink)}
.brand-index a:hover{border-color:var(--sb-ink);background:var(--sb-ink);color:#fff}
.brand-letter{margin:clamp(24px,2.6vw,38px) 0 14px;font-family:var(--sb-font);font-size:clamp(17px,1.6vw,22px);font-weight:700;
  color:var(--sb-ink);scroll-margin-top:calc(var(--hh) + 24px)}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(10px,1.2vw,16px)}
.brand-card{display:grid;place-items:center;height:110px;padding:16px;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);
  background:var(--sb-cream-2);transition:border-color .2s,background .2s}
.brand-card:hover{border-color:var(--sb-ink);background:#fff}
.brand-card img{max-width:100%;max-height:64px;width:auto;height:auto}
.brand-card__name{font-family:var(--sb-font);font-size:14px;font-weight:700;color:var(--sb-ink);text-align:center}
@media (max-width:767px){.brands-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.brands-grid{grid-template-columns:repeat(2,1fr)}}