/* Maison Kôssi (marque fictive) — styles propres à : boutique. Chargée après styles.css, qui déclare l’ordre des couches. */
@layer components {
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
  .chip { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; padding: 0.4rem 1.1rem; border: 1.5px solid var(--color-ligne); border-radius: 999px; background: var(--color-papier); font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--color-encre); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
  .chip:hover { border-color: var(--color-indigo); }
  .chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--color-indigo); border-color: var(--color-indigo); color: var(--color-creme); }
  .chip--x::after { content: "×"; font-size: 1.15rem; line-height: 1; }
}
@layer pages {
  /* ---------- Boutique ---------- */
  .shop-head { padding-block: var(--s-4) var(--s-5); }
  .shop-head h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); } .shop-head .count-line { color: var(--color-doux); }
  .shop-tools { display: grid; gap: var(--s-3); padding-block: var(--s-4); border-block: 1px solid var(--color-ligne-deco); margin-block-end: var(--s-5); }
  .shop-tools .row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
  .shop-tools .field { flex: 1 1 11rem; } .shop-tools .search-q { flex: 2 1 15rem; }
  .shop-layout { display: grid; gap: var(--s-5); }
  @media (min-width: 64em) { .shop-layout { grid-template-columns: 15.5rem 1fr; gap: var(--s-7); align-items: start; } }
  .filters { display: grid; gap: var(--s-5); align-content: start; }
  .filters fieldset { border-block-end: 1px solid var(--color-ligne-deco); padding-block-end: var(--s-4); }
  .filters legend { font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin-block-end: var(--s-2); padding: 0; }
  .filters .check { min-block-size: 2.5rem; padding-block: 0.2rem; } .filters .check span.c { margin-inline-start: auto; color: var(--color-doux); font-size: 0.8125rem; } .filters .check.is-zero { opacity: 0.5; }
  .filters .price-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-block-end: var(--s-3); }
  .filters-open-btn { display: inline-flex; } @media (min-width: 64em) { .filters-open-btn, .filters-close, .filters-apply { display: none !important; } }
  @media (max-width: 63.99em) { .js .filters-wrap { position: fixed; inset: 0; z-index: 120; background: var(--color-creme); padding: var(--s-5) var(--gutter) 6rem; overflow-y: auto; display: none; } .js .filters-wrap.is-open { display: block; } .js .filters-apply { position: fixed; inset-inline: 0; inset-block-end: 0; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--color-creme); box-shadow: 0 -8px 20px oklch(0.3 0.05 60 / 0.1); display: flex; gap: var(--s-3); } .js .filters-apply .btn:first-child { flex: 1; } .filters-top { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--s-4); } }
  @media (min-width: 64em) { .filters-top { display: none; } .filters-apply { display: none; } }
  .active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); list-style: none; padding: 0; }
  .more { display: grid; justify-items: center; gap: var(--s-2); margin-block-start: var(--s-7); }
  .lookbook-tile { grid-column: 1 / -1; display: none; }
  @media (min-width: 64em) { .lookbook-tile { display: block; } }
  .tile-lb { position: relative; display: grid; align-items: end; min-block-size: 100%; border-radius: var(--radius-lg); overflow: hidden; color: var(--color-creme); text-decoration: none; padding: var(--s-6); background: var(--color-indigo); isolation: isolate; aspect-ratio: auto; }
  .tile-lb { grid-template-columns: 1fr minmax(0, 15rem); gap: var(--s-6); align-items: center; padding: var(--s-6) var(--s-7); background: var(--color-indigo) radial-gradient(28rem 18rem at 85% 50%, color-mix(in srgb, var(--color-or) 22%, transparent), transparent 70%); }
  .tile-lb svg { order: 2; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; border-radius: var(--arch); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-or) 70%, transparent); }
  .tile-lb > span { display: grid; gap: var(--s-3); justify-items: start; } .tile-lb .tile-sub { color: var(--color-sur-indigo); max-inline-size: 38ch; } .tile-lb .tile-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; max-inline-size: 16ch; }
  .tile-lb h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; max-inline-size: 16ch; margin-block-end: var(--s-3); }
  .help-band { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--radius-lg); background: var(--color-indigo); color: var(--color-creme); margin-block-start: var(--s-8); align-items: center; }
  @media (min-width: 48em) { .help-band { grid-template-columns: 1fr auto; } } .help-band h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); } .help-band p { color: var(--color-sur-indigo); }
}