#wardrobe {--shop-pale:#edf3ed;padding-bottom:clamp(64px,8vw,124px)}
.shop-heading {padding:clamp(40px,6vw,94px) 0 clamp(24px,3.4vw,52px)}
.shop-heading .eyebrow {color:var(--shop-green);font-size:11px;letter-spacing:.17em}
.shop-heading>div {display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:12px}
.shop-heading h1 {margin:0;font-size:clamp(46px,6.4vw,102px);font-weight:450;letter-spacing:-.025em;line-height:1.04}
.piece-count {color:#536059;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.shop-bar {position:relative;z-index:4;display:flex;align-items:center;gap:10px;border-top:1px solid #e5e7df;padding:14px 0 0;margin-bottom:clamp(24px,3vw,46px)}
#wardrobe [hidden] {display:none!important}
.shop-drop {position:relative;color:#19251e;font-size:14px}
.shop-drop>summary,.shop-panel button,.shop-empty button {
  display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:44px;
  padding:9px 16px;border:0;border-radius:24px;background:#f2f3ef;color:#1d2a21;
  font:inherit;font-weight:500;line-height:1.2;cursor:pointer;list-style:none;
}
.shop-drop summary::-webkit-details-marker {display:none}
.shop-drop>summary:after {content:none}

.shop-drop>summary svg {width:17px;height:17px;stroke-width:1.45}
#wardrobe .shop-drop>summary:is(:hover,:focus-visible),#wardrobe .shop-panel button:where(:not(:disabled)):is(:hover,:focus-visible),
#wardrobe .reset-filters:is(:hover,:focus-visible) {background:var(--shop-hover-surface);color:var(--shop-green)}
#wardrobe .shop-drop[open]>summary,#wardrobe .shop-drop.is-active>summary,#wardrobe .shop-panel button[aria-pressed=true],
#wardrobe .shop-panel .see-pieces {color:white;background:var(--shop-green)}
#wardrobe .shop-drop>summary:focus-visible {outline:0;box-shadow:inset 0 -3px currentColor}
.filter-count {display:grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:#fff;color:var(--shop-green);font-size:11px}
.sort-drop {margin-left:auto}
.shop-drop.sort-drop>summary,.shop-drop.currency-drop>summary {background:transparent}
.sort-current {font-weight:400;color:#556059}
.sort-drop[open] .sort-current {color:inherit}
.shop-panel {
  position:absolute;z-index:1;top:calc(100% + 9px);right:0;background:#fffefa;
  box-shadow:0 12px 46px #15271c28,0 2px 8px #15271c09;border-radius:18px;
  padding:8px;max-height:60svh;overflow:auto;overscroll-behavior:contain
}
.filter-panel {left:0;right:auto;width:min(390px,calc(100vw - 48px));padding:20px}
.filter-panel fieldset {padding:0;margin:0 0 17px;border:0}
.filter-panel legend {padding:0;margin:0 0 8px;color:#535e55;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.shop-choices {display:flex;gap:5px;flex-wrap:wrap}
.shop-choices button {font-size:13px;min-width:43px;padding-inline:12px}
.colour-dot {width:12px;height:12px;flex:none;border-radius:50%;background:var(--swatch)}
[aria-pressed=true]>.colour-dot {box-shadow:0 0 0 1px #ffffff90}
.filter-foot {display:flex;align-items:center;justify-content:space-between;gap:8px}
.filter-foot .reset-filters {background:transparent;text-decoration:underline;text-underline-offset:4px}
.option-panel {display:grid;gap:3px;min-width:max-content}
.option-panel button {justify-content:space-between;background:transparent;border-radius:10px;padding-inline:14px}
.option-panel button[aria-pressed=true]:after {content:'✓';margin-left:12px}
#wardrobe .cardinfo a:is(:hover,:focus-visible),#wardrobe article:has(.photo:hover) h3 a {color:var(--shop-green)}
#wardrobe .quick:is(:hover,:focus-visible) {background:var(--shop-green)!important;color:white!important}
#wardrobe .shop-note {margin:clamp(24px,3vw,42px) 0 0;color:#59615b;font-size:12px}
.shop-note a {color:var(--shop-green);text-decoration:underline;text-underline-offset:3px;margin-inline-start:6px}
.shop-empty {text-align:center;padding:46px 0}
.shop-empty p {margin-bottom:16px}
@media(max-width:600px){
  .shop-heading>div {align-items:flex-end}
  .shop-heading h1 {font-size:clamp(38px,8vw,48px)}
  .shop-heading .piece-count {font-size:12px;padding-bottom:3px}
  .shop-bar {gap:4px}
  .shop-bar .desktop-only {display:none}
  .shop-drop>summary {padding-inline:11px}
  .shop-panel {max-height:55svh}
}

/* Present colours with pieces first; the full palette stays within the filter. */
.palette-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#wardrobe .palette-grid button {justify-content:flex-start;gap:7px;min-width:0;padding:8px 10px;text-align:left;overflow-wrap:anywhere}
.palette-grid .colour-dot {box-shadow:inset 0 0 0 1px #17271b29}
#wardrobe .palette-grid button:disabled {background:transparent;color:#62695f;cursor:default}
#wardrobe .shop-panel .palette-toggle {background:transparent;color:var(--shop-green);padding-inline:2px;gap:7px;font-size:13px;font-weight:550}
.palette-toggle:after {content:none}
.palette-toggle[aria-expanded=false] .palette-close-label,.palette-toggle[aria-expanded=true] .palette-open-label {display:none}
.palette-note {margin:4px 0 6px;font-size:12px;color:#62695f}
@media(max-width:370px){.palette-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

#wardrobe .photo {
  position: relative;
  overflow: hidden;
}
#wardrobe .photo .shop-alternate {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  #wardrobe .photo .shop-alternate {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
  }
  #wardrobe .photo .shop-alternate.is-detail {transform:scale(1.6);transform-origin:50% 28%}
    #wardrobe article:is(:hover, :focus-within) .photo .shop-alternate {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #wardrobe .photo .shop-alternate {
    transition: none;
  }
}

#wardrobe .shop-heading .shop-subcopy {margin:16px 0 0;font-size:clamp(14px,1.2vw,17px);line-height:1.55;color:#536059;max-width:42ch}

#wardrobe .shop-colour {display:block;margin:3px 0 5px;color:#536059;font-size:13px;line-height:1.45}

/* Search stays beside the shop controls on desktop and has its own row on phones. */
#wardrobe .shop-search {display:flex;align-items:center;gap:10px;flex:0 1 330px;min-width:0;margin:0;padding:0 12px;background:#f2f3ef;border-radius:8px;color:#243f30}
#wardrobe .shop-search>svg {width:19px;height:19px;flex:none}
#wardrobe .shop-search input {appearance:none;min-width:0;width:100%;height:46px;margin:0;padding:10px 0;border:0;border-radius:0;background:transparent!important;color:#19251e;font:inherit;font-size:16px;line-height:1.5;box-shadow:none}
#wardrobe .shop-search input::placeholder {color:#59665e;opacity:1}
#wardrobe .shop-search input:focus {outline:0;box-shadow:none}
#wardrobe .shop-search:focus-within {outline:0;border:0;box-shadow:none}
#wardrobe .shop-search input::-webkit-search-cancel-button {display:none}
#wardrobe .shop-search .clear-search {flex:none;min-height:44px;padding:8px 4px;border:0;background:transparent;color:#243f30;font:inherit;font-size:13px;cursor:pointer}
#wardrobe .clear-search:focus-visible {outline:2px solid #243f30;outline-offset:2px}
@media(max-width:800px){
  #wardrobe .shop-bar {flex-wrap:wrap;row-gap:12px}
  #wardrobe .shop-search {flex-basis:100%}
}

/* Compact search disclosure, matching the rounded filter control. */
#wardrobe .shop-bar {flex-wrap:wrap;row-gap:12px}
#wardrobe .shop-search-toggle {display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:12px;border:0;border-radius:999px;background:#f2f3ef;color:#243f30;cursor:pointer}
#wardrobe .shop-search-toggle svg {width:20px;height:20px}
#wardrobe .shop-search-toggle:focus-visible {outline:2px solid #243f30;outline-offset:3px}
#wardrobe .shop-search-toggle[aria-expanded="true"] {background:#e3e9df}
#wardrobe .shop-search {order:10;flex:1 0 100%;box-sizing:border-box;border-radius:999px;padding:0 18px}