/* The Kosher Closet — shopping sections (redesign, October 22, 2026).
   Home page, "Who are you shopping for?" tiles, wardrobe sections, selections,
   community collection tiles and collection pages.
   Page-stability rules: every tile and image has a reserved size, selection rows
   scroll sideways inside themselves, and nothing is inserted above the shopper.
   Selections (occasion, item type, size range) look like tabs, never removable chips. */

/* Accessible text shade of the brand gold (WCAG AA 4.5:1 on white and cream);
   the lighter --gold remains for decorative borders only. */
:root{--gold-text:#7d6431}
html{scroll-padding-top:92px}
@media(max-width:760px){html{scroll-padding-top:76px}}

/* ---------- Welcome ---------- */
.modern-intro{max-width:820px;padding:18px 0 4px}
.modern-intro h1{font-size:clamp(34px,5vw,58px)}
.modern-intro>p:not(.eyebrow){font-size:18px;color:var(--muted);max-width:640px;margin:0}

/* ---------- Search and Refine bar (sticky, fixed height) ---------- */
.smart-finder{position:sticky;top:0;z-index:50;margin:24px 0 0;padding:0}
.finder-bar{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;gap:8px;align-items:center;padding:8px;background:rgba(255,254,251,.97);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(32,58,52,.10)}
.finder-search input{margin:0;min-height:46px;border-radius:var(--radius-sm);padding-inline:14px;background:#fff}
.finder-submit{min-width:104px;min-height:46px}
.filter-drawer{position:relative}
.filter-drawer>summary{list-style:none;min-height:46px;min-width:112px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-weight:700;cursor:pointer;display:flex;gap:9px;align-items:center;justify-content:center}
.filter-drawer>summary::-webkit-details-marker{display:none}
.filter-drawer>summary:after{content:"+";font-size:20px;line-height:1}
.filter-drawer[open]>summary:after{content:"−"}
.filter-drawer>summary span{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:20px;background:var(--plum);color:#fff;font-size:11px}
.filter-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(920px,calc(100vw - 48px));max-height:calc(100vh - 86px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 28px 70px rgba(24,42,37,.22)}
.filter-panel-heading{display:flex;justify-content:space-between;gap:30px;margin-bottom:18px}
.filter-panel-heading h2{margin:0;font-size:26px}
.filter-panel-heading>p{max-width:340px;color:var(--muted);font-size:14px}
.smart-finder .filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.filter-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--surface-soft);font-size:14px}
.filter-actions{display:flex;align-items:center;gap:18px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.filter-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700}
/* Refinements from the Refine panel only (search words, season, price…). */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.active-filters a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;text-decoration:none;overflow-wrap:anywhere;max-width:100%}
.active-filters .clear-all{background:transparent;border-color:transparent;color:var(--plum);font-weight:700}

/* ---------- Who are you shopping for? ---------- */
.shopping-directory{margin:36px 0 12px}
.directory-heading h2{margin:0 0 16px}
.audience-directory-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.wardrobe-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:44px;height:176px;padding:18px;border-radius:var(--radius);border:1px solid var(--line);text-decoration:none;overflow:hidden;background:#f3ece4;transition:border-color .18s ease,box-shadow .18s ease}
.wardrobe-tile:hover{color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow)}
.wardrobe-women{background:linear-gradient(160deg,#f7f0f3,#eadde3)}
.wardrobe-girls{background:linear-gradient(160deg,#faf3ec,#efe1d3)}
.wardrobe-boys_under_13{background:linear-gradient(160deg,#eef3f0,#dbe6df)}
.wardrobe-baby{background:linear-gradient(160deg,#f6f5ee,#e7e7da)}
.matching-directory-card{background:linear-gradient(160deg,#f7f1e4,#eadfc8)}
.wardrobe-mark{position:absolute;top:14px;right:14px;width:64px;height:64px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.55}
.wardrobe-tile strong{font:400 24px/1.15 var(--serif);color:var(--ink)}
.wardrobe-tile>span{font-size:13px;color:var(--muted)}
.wardrobe-tile b{font-weight:400}

/* ---------- Results heading ---------- */
.results-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:36px 0 18px;scroll-margin-top:92px}
.results-heading h2{font-size:22px;margin:0}
.results-heading p{font-size:14px;color:var(--muted);margin:0}
.understood{flex-basis:100%;font-weight:700;color:var(--ok)!important}
.catalog-empty-notice{flex-basis:100%;margin:10px 0 0!important;padding:14px 16px;background:var(--surface-soft);border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink)!important;max-width:760px}

/* ---------- Wardrobe sections ---------- */
.audience-sections{display:grid;gap:56px}
.audience-wardrobe{padding-top:36px;border-top:1px solid var(--line-strong)}
.audience-wardrobe,.wardrobe-collection,.community-collection{scroll-margin-top:92px}
.audience-heading{position:relative;max-width:none;margin-bottom:20px;padding-right:150px}
.audience-heading h2{font-size:clamp(30px,4vw,44px);margin-bottom:6px}
.audience-heading>p:not(.eyebrow){color:var(--muted);max-width:640px;margin:0}
.audience-heading>a{position:absolute;right:0;top:0;display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--plum)}
.matching-wardrobe{margin-top:56px}

/* Selections: labelled rows of tabs. The chosen one is underlined; nothing is removable. */
/* Wardrobe choices (layout research, October 22, 2026): shown once, for the chosen wardrobe; every
   option is a finger-sized button that wraps, never a sideways strip and never a removable chip. */
.audience-refiners{display:grid;gap:12px;margin:0 0 24px}
.audience-refiner{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:start;gap:12px;min-width:0}
.audience-refiner>div strong{display:block;padding-top:11px;font:700 15px/1.4 var(--sans);color:var(--ink)}
.audience-refiner nav{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.audience-refiner nav a,.choose-button{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);text-decoration:none;font-size:15px;color:var(--ink)}
.audience-refiner nav a:hover,.choose-button:hover{border-color:var(--plum);color:var(--plum)}
.audience-refiner nav a.is-selected{color:var(--plum);background:var(--plum-soft);border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.audience-refiner nav a:focus-visible,.choose-button:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.choose-wardrobe{margin:0 0 22px}

/* The eight community collections: always visible, same-size tiles. */
.audience-collection-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.audience-collection-nav a{display:grid;grid-template-rows:auto 1fr auto;gap:4px;min-height:44px;height:118px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;scroll-margin-top:92px;transition:border-color .18s ease,box-shadow .18s ease}
.audience-collection-nav a:hover{color:var(--ink);border-color:var(--plum);box-shadow:var(--shadow)}
.audience-collection-nav span{font:600 12px/1 var(--sans);letter-spacing:.1em}
.audience-collection-nav span,.occasion-cards span{color:var(--gold-text)}
.audience-collection-nav strong{font:400 17px/1.25 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.audience-collection-nav small{font-size:13px;color:var(--ok);font-weight:600}
.audience-collection-nav a.is-empty{border-style:dashed;background:transparent}
.audience-collection-nav a.is-empty strong{color:var(--muted)}
.audience-collection-nav a.is-empty small{color:var(--muted);font-weight:400}
.audience-collection-nav a.is-empty:hover{border-style:solid}

/* One community collection inside a wardrobe: slim heading, then its items. */
.wardrobe-collections{display:grid;gap:36px}
.wardrobe-collection{padding-top:4px}
.wardrobe-collection-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:14px}
.wardrobe-collection-heading>div{min-width:0;max-width:700px}
.wardrobe-collection-heading h3{font-size:24px;margin:0 0 4px}
.wardrobe-collection-heading p{font-size:14px;color:var(--muted);margin:0}
.wardrobe-collection-heading>a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--plum);text-decoration:none}
.wardrobe-collection-heading>a:hover{text-decoration:underline}
.wardrobe-collection-heading>span{flex:none;font-size:13px;color:var(--muted);padding:6px 12px;border:1px solid var(--line);border-radius:999px}

.audience-empty{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.audience-empty h3{margin-bottom:4px}
.audience-empty p{color:var(--muted);font-size:15px;margin:0;max-width:700px}
.audience-empty>a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-weight:700;font-size:14px;color:var(--plum)}

/* A chosen wardrobe stays open; the others become one-line switches. */
.compact-wardrobe{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:0;padding-right:0}
.compact-wardrobe .eyebrow{flex-basis:100%;margin:0}
.compact-wardrobe h2{font-size:26px;margin:0}
.audience-heading.compact-wardrobe>a{position:static;font-weight:700}
.audience-sections:has(.compact-wardrobe){gap:24px}
.audience-wardrobe:has(>.compact-wardrobe){padding-top:18px}

/* Matching Siblings family sets */
.family-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.family-set-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.family-set-card>header{display:flex;justify-content:space-between;gap:16px;align-items:start}
.family-set-card h4{font-size:22px}
.family-set-card>header>strong{white-space:nowrap;font:400 20px var(--serif)}
.family-roles{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.family-roles span{padding:4px 10px;background:var(--surface-soft);border-radius:999px;font-size:12px;font-weight:600}
.family-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.family-member a{display:grid;gap:4px;text-decoration:none}
.family-swatch{aspect-ratio:4/3;border-radius:var(--radius-sm);background:linear-gradient(150deg,color-mix(in srgb,var(--swatch),#fff 78%),color-mix(in srgb,var(--swatch),#fff 42%))}
.family-member span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);font-weight:700}
.family-member strong{font:400 17px/1.25 var(--serif)}
.family-member small{color:var(--muted);line-height:1.4;font-size:13px}
.family-trust{border-top:1px solid var(--surface-soft);padding-top:12px;margin:16px 0 0;font-size:13px;color:var(--muted)}

/* Items not yet placed in a community collection */
.unclassified-collection{margin-top:56px;padding-top:32px;border-top:1px solid var(--line-strong)}
.collection-heading{margin-bottom:18px}
.collection-heading p:not(.eyebrow){color:var(--muted);max-width:650px}

/* ---------- How it works and trust ---------- */
.trust-strip{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;margin-top:64px}
.how-it-works,.confidence-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.how-it-works h2{font-size:26px}
.how-it-works ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:14px}
.how-it-works li{counter-increment:step;display:grid;grid-template-columns:36px 1fr;column-gap:12px}
.how-it-works li:before{content:counter(step);grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font:15px var(--serif)}
.how-it-works li span,.confidence-card small{color:var(--muted);font-size:14px}
.confidence-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.confidence-card li{display:grid;align-content:start;gap:2px;padding-top:12px;border-top:2px solid var(--gold)}
.commitment{margin-top:20px;padding:26px;background:var(--surface-soft);border-radius:var(--radius)}
.commitment h2{font-size:24px}
.commitment p{max-width:780px;color:var(--muted)}
.commitment a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--plum)}

/* ---------- Collection page ---------- */
.collection-hero{padding:0 0 22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.collection-hero h1{margin-bottom:10px}
.collection-hero .mission-lead{margin-bottom:10px}
.collection-count{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin:0}
.collection-page-grid{scroll-margin-top:24px}
.later-item{display:contents}
.later-item[hidden]{display:none}
.show-more{text-align:center;margin:28px 0 0}
.collection-switch{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.collection-switch h2{font-size:24px}
.collection-switch ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.collection-switch a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:76px;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;font:400 16px/1.25 var(--serif)}
.collection-switch a:hover{border-color:var(--plum);color:var(--ink)}
.collection-switch a span{color:var(--plum);font-family:var(--sans)}

/* Sideways-scrolling rows: fade the side with more choices; never while keyboard focus is inside. */
[data-more="end"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
[data-more="start"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[data-more="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
[data-more]:focus-within{-webkit-mask-image:none;mask-image:none}

/* Wide screens: a collection with one or two items sits beside the next one,
   so short collections do not leave half-empty rows. Larger ones use the full width. */
@media(min-width:901px){
  .wardrobe-collections{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .wardrobe-collection .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wardrobe-collection:has(.product-grid>:nth-child(3)),.wardrobe-collection:has(.family-set-grid){grid-column:1/-1}
  .wardrobe-collection:has(.product-grid>:nth-child(3)) .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .audience-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .smart-finder .filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .collection-switch ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .audience-collection-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-strip{grid-template-columns:1fr}
  .family-set-grid{grid-template-columns:1fr}
  .collection-switch ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .modern-intro{padding-top:4px}
  .modern-intro>p:not(.eyebrow){font-size:16px}
  .finder-bar{grid-template-columns:minmax(0,1fr) auto auto;gap:6px;padding:6px}
  .finder-submit{min-width:56px;padding-inline:12px}
  .filter-drawer{position:static}
  .filter-drawer>summary{min-width:88px;padding-inline:12px}
  .filter-panel{left:0;right:0;width:100%;top:calc(100% + 6px);max-height:calc(100vh - 74px);padding:18px 16px}
  .filter-panel-heading{display:block}
  .filter-panel-heading>p{margin-top:6px}
  .smart-finder .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .filter-actions{position:sticky;bottom:0;background:var(--surface);padding:12px 0 2px}
  .filter-actions button{flex:1}
  .audience-heading{padding-right:0}
  .audience-heading>a{position:static;margin-top:2px}
  .audience-refiners{gap:16px}
  .audience-refiner{grid-template-columns:1fr;gap:8px}
  .audience-refiner>div strong{padding-top:0}
  .audience-refiner nav a,.choose-button{min-height:48px;padding:10px 14px;font-size:16px}
  .wardrobe-collection-heading{align-items:start}
}
@media(max-width:620px){
  .shopping-directory{margin-top:28px}
  .audience-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wardrobe-tile{height:124px;padding:14px}
  .wardrobe-tile:last-child{grid-column:1/-1;height:92px}
  .wardrobe-mark{width:48px;height:48px;top:10px;right:10px}
  .wardrobe-tile strong{font-size:21px}
  .wardrobe-tile>span{font-size:12px}
  .smart-finder{margin-inline:calc(-1 * var(--gutter))}
  .finder-bar{border-radius:0;border-inline:0}
  .smart-finder .filter-grid{grid-template-columns:1fr}
  .filter-bottom{align-items:flex-start;flex-direction:column}
  .results-heading{margin-top:28px}
  .audience-sections{gap:40px}
  .audience-wardrobe{padding-top:28px}
  .audience-collection-nav{gap:8px;margin-bottom:22px}
  .audience-collection-nav a{height:104px;padding:12px}
  .audience-collection-nav strong{font-size:15px}
  .audience-collection-nav small{font-size:12px}
  .wardrobe-collections{gap:28px}
  .wardrobe-collection-heading h3{font-size:20px}
  .wardrobe-collection-heading p{display:none}
  .wardrobe-collection-heading{align-items:center;margin-bottom:10px}
  .wardrobe-collection .card-action{display:none}
  .audience-heading:not(.compact-wardrobe)>a{display:none}
  /* Owner decision, October 21, 2026: on phones the items of one collection swipe sideways,
     two cards in view with the next one peeking, so the home page stays short. */
  .wardrobe-collection:not(.search-matches) .product-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none}
  .wardrobe-collection:not(.search-matches) .product-grid::-webkit-scrollbar{display:none}
  .wardrobe-collection:not(.search-matches) .product-grid>*{scroll-snap-align:start}
  .audience-empty{flex-direction:column;align-items:flex-start;padding:18px}
  .family-members{grid-template-columns:1fr 1fr}
  .family-set-card{padding:16px}
  .trust-strip{margin-top:48px}
  .how-it-works,.confidence-card,.commitment{padding:20px}
  .confidence-card ul{grid-template-columns:1fr 1fr;gap:12px}
  .collection-switch ul{grid-template-columns:1fr 1fr;gap:8px}
  .collection-switch a{height:72px;font-size:15px;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .wardrobe-tile,.audience-collection-nav a,.product-card,.family-set-card{transition:none!important}
}