/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

@font-face{font-family:Newsreader;src:url('/explore/assets/newsreader.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:DM;src:url('/explore/assets/sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Plex;src:url('/explore/assets/mono.woff2') format('woff2');font-weight:400 500;font-display:swap}
:root{--paper:#f5f1ea;--ink:#1f1a14;--border:#ddd5c5;--rust:#cd5c36;--rust-dark:#953c22;--muted:#6b655c;--white:#fff;--soft:#eee9e1;--space:8px;--radius:8px;--ease:200ms ease-out;--sidebar:88px}
*{box-sizing:border-box}body{margin:0;background:var(--white);color:var(--ink);font-family:DM,system-ui,sans-serif;font-size:16px;line-height:1.5}button,input,select{font:inherit;color:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{border:0;background:none}a{color:inherit}button:disabled{cursor:wait;opacity:.65}button svg,a svg{width:20px;height:20px;flex:none}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--rust-dark);outline-offset:4px}button{min-height:44px}h1,h2,h3,p{margin:0}h1,h2{font-family:Newsreader,Georgia,serif;font-weight:400;line-height:1.08}h1{font-size:40px}h2{font-size:40px}h3{font-size:16px;font-weight:600}.mono{font-family:Plex,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:8px;left:104px;z-index:99;background:var(--ink);color:white;padding:12px 16px;transform:translateY(-150%)}.skip:focus{transform:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--paper);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:24px 8px 16px;z-index:20;gap:32px}.brand{font-family:Newsreader,Georgia,serif;font-size:30px;letter-spacing:-2px;text-decoration:none;font-weight:500}.brand b{color:var(--rust);font-weight:inherit}.side-nav{display:flex;flex-direction:column;gap:16px;width:100%}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;font-size:11px;border-radius:var(--radius);color:var(--muted);position:relative}.nav-item svg{width:24px;height:24px}.nav-item[aria-current="page"]{background:var(--ink);color:white}.saved-count{position:absolute;top:4px;right:8px;background:var(--rust-dark);color:white;min-width:16px;border-radius:8px;font-size:10px;line-height:16px;display:block;text-align:center}.side-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:16px}.app-nav{display:grid;justify-items:center;gap:8px;font-size:11px}.sun{width:28px;height:14px;border-radius:28px 28px 0 0;background:var(--rust);display:block}.side-note{writing-mode:vertical-rl;font-size:10px;letter-spacing:.12em;color:var(--muted)}
main{margin-left:var(--sidebar);min-height:100vh}.chrome{background:var(--paper);border-bottom:1px solid var(--border);padding:28px 32px 0}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.heading{display:flex;align-items:baseline;gap:20px}.heading p{color:var(--muted);font-size:14px}.mast-right{display:flex;align-items:center;gap:24px}.mast-right .mono{color:var(--muted)}.app-link{border:1px solid var(--border);border-radius:24px;padding:0 16px;display:flex;align-items:center;gap:16px;font-size:13px;font-weight:500}.app-link svg{width:16px}.mobile-brand{display:none}.search-row{display:flex;gap:12px;align-items:center;margin-bottom:20px}.search-box{display:flex;align-items:center;gap:12px;flex:1;background:white;border:1px solid var(--border);border-radius:var(--radius);padding:0 16px;min-height:56px}.search-box:focus-within{border-color:var(--ink)}.search-box>svg{width:20px;height:20px;color:var(--muted);flex:none}.search-box input{min-width:0;flex:1;border:0;background:none;outline:none;padding:16px 0;font-size:16px}.search-box input::placeholder{color:#746e66}.search-label{margin-bottom:4px;font-size:12px;color:var(--muted);display:block}.search-wrap{flex:1;min-width:0}.search-box kbd{font:11px Plex,monospace;border:1px solid var(--border);border-radius:4px;padding:2px 6px;color:var(--muted)}.clear-search{min-width:44px;display:grid;place-items:center}.clear-search[hidden]{display:none}.filter-toggle{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius);padding:0 16px;min-height:56px;align-self:flex-end;background:var(--paper)}.filter-toggle.active{background:var(--ink);color:white}
.filter-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px}.occasions{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:0 16px;border:1px solid transparent;border-radius:24px;display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap;min-height:40px}.chip[aria-pressed="true"]{background:var(--ink);color:white}.chip:not([aria-pressed="true"]){color:#625b52}.chip .tiny-dot{width:4px;height:4px;border-radius:50%;background:currentColor;display:block}.sort-wrap{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}.sort-wrap select{background:transparent;border:0;max-width:140px;min-height:44px;padding:0 4px;font-size:13px}.results-bar{padding:20px 32px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.result-caption{font-size:13px;color:var(--muted)}.result-caption strong{font-weight:500;color:var(--ink)}.result-caption .sep{margin:0 8px;color:var(--border)}.collection-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.collection-note .dot{width:6px;height:6px;border-radius:50%;background:var(--rust)}
.gallery{padding:0 24px 32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}.masonry-col{display:flex;flex-direction:column;gap:12px;min-width:0}.look{position:relative;min-width:0;border-radius:var(--radius);background:var(--soft);isolation:isolate}.image-open{display:block;width:100%;padding:0;border-radius:var(--radius);text-align:left;min-height:0}.look img{display:block;width:100%;height:auto;border-radius:var(--radius)}.look .scrim{position:absolute;bottom:0;left:0;right:0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.65));border-radius:0 0 var(--radius) var(--radius);pointer-events:none;opacity:0;transition:opacity var(--ease)}.look-info{position:absolute;bottom:16px;left:16px;right:16px;color:white;pointer-events:none;opacity:0;transition:opacity var(--ease);display:flex;align-items:end;gap:8px;justify-content:space-between}.look-info .od-field{--od-gap:4px}.look-title{font-family:Newsreader,Georgia,serif;font-size:24px;line-height:1.1}.look-tag{font-size:10px;font-family:Plex,monospace;text-transform:uppercase;letter-spacing:.08em}.quick-view{background:white;color:var(--ink);font-size:12px;padding:0 12px;border-radius:20px;pointer-events:auto;min-height:40px;white-space:nowrap;display:flex;align-items:center;gap:4px}.quick-view svg{width:14px}.save-button{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;background:white;border-radius:50%;box-shadow:0 2px 12px #00000014;opacity:0;transition:opacity var(--ease)}.save-button[aria-pressed="true"]{opacity:1;background:var(--ink);color:white}.save-button[aria-pressed="true"] svg{fill:currentColor}.look:focus-within .save-button,.look:focus-within .scrim,.look:focus-within .look-info{opacity:1}.end-note{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:32px 24px 48px;border-top:1px solid #eee;font-size:13px;color:var(--muted)}.end-note h3{font-family:Newsreader,Georgia,serif;font-size:24px;color:var(--ink);font-weight:400}.text-button{color:var(--rust-dark);font-weight:500;text-decoration:underline;text-underline-offset:4px;padding:4px 8px}.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;padding:64px 24px;gap:16px;text-align:center}.empty h2{font-size:32px}.empty p{max-width:40ch;color:var(--muted)}.solid{background:var(--ink);color:white;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;border-radius:var(--radius);font-weight:500;min-height:48px}.outline{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius);padding:8px 16px;min-height:48px;font-size:14px}
dialog{padding:0;border:0;color:var(--ink);border-radius:12px;background:white;box-shadow:0 24px 80px #0003;max-width:calc(100vw - 32px)}dialog::backdrop{background:rgba(31,26,20,.55);backdrop-filter:blur(4px)}.detail-dialog{width:1040px;max-height:calc(100dvh - 48px)}.detail-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:stretch}.detail-image{background:#eae8e4;padding:16px;display:flex;justify-content:center;align-items:flex-start;min-width:0}.detail-image img{width:100%;height:auto;max-width:100%;display:block;border-radius:4px}.detail-content{padding:32px;min-width:0}.detail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:24px}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--paper);flex:none}.detail-eyebrow{font-family:Plex,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.detail-content h2{margin-bottom:16px;font-size:44px}.detail-description{color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:20px}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.detail-tags span{display:block;background:var(--paper);font-size:12px;border-radius:4px;padding:4px 8px}.garments{list-style:none;margin:12px 0 24px;padding:0;border-top:1px solid var(--border)}.garments li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding:12px 0}.garment-index{font-family:Plex,monospace;font-size:11px;color:var(--muted);width:24px;flex:none}.garments .od-field{--od-gap:0}.garments strong{font-weight:500;font-size:14px}.garments small{font-size:12px;color:var(--muted)}.why{border-top:1px solid var(--border);padding-top:20px;margin-bottom:24px}.why p{font-size:14px;line-height:1.65;color:var(--muted);margin-top:8px}.actions-row{display:flex;gap:8px;margin:20px 0 12px}.actions-row button{flex:1}.wardrobe-cta{width:100%;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 16px;border-radius:var(--radius);gap:12px}.wardrobe-cta .od-field{--od-gap:2px}.wardrobe-cta strong{font-weight:500;font-size:15px}.wardrobe-cta small{font-size:11px;color:#ddd5c5}.fine-print{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}.source-link{font-size:11px;color:var(--muted);text-underline-offset:3px;display:inline-block;margin-top:16px}.small-dialog{width:440px;padding:28px;max-height:calc(100dvh - 32px)}.small-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.small-header h2{font-size:28px}.small-dialog p{color:var(--muted);margin:12px 0 24px;line-height:1.6}.small-dialog .solid{width:100%}.app-symbol{width:64px;height:32px;border-radius:64px 64px 0 0;background:var(--rust);margin:16px 0 24px}.small-dialog h3{font-family:Newsreader,Georgia,serif;font-size:32px;font-weight:400;line-height:1.2}.field-set{border:0;padding:0;margin:0 0 24px}.field-set legend{font-size:14px;font-weight:600;margin-bottom:12px}.choice-grid{display:flex;flex-wrap:wrap;gap:8px}.choice-grid button{border:1px solid var(--border);border-radius:24px;padding:0 16px;font-size:14px}.choice-grid button[aria-pressed="true"]{background:var(--ink);color:white;border-color:var(--ink)}.filter-actions{display:flex;gap:12px;align-items:center}.filter-actions .solid{flex:1}.share-input{display:block;width:100%;font-family:Plex,monospace;font-size:12px;background:var(--paper);border:1px solid var(--border);border-radius:4px;padding:12px;min-height:72px;resize:none;margin:8px 0 16px}.share-label{font-size:13px;display:block}.toast{position:fixed;bottom:24px;left:calc(50% + 44px);transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:var(--radius);z-index:100;max-width:calc(100vw - 32px);font-size:14px;box-shadow:0 4px 24px #0003}.toast:empty{display:none}
@media(hover:hover){.look:hover .save-button,.look:hover .look-info,.look:hover .scrim{opacity:1}.nav-item:not([aria-current="page"]):hover,.chip:not([aria-pressed="true"]):hover,.icon-btn:hover,.outline:hover,.app-link:hover,.filter-toggle:not(.active):hover{background:#e5dfd5;color:var(--ink)}.solid:hover,.wardrobe-cta:hover{background:#3c3025}.save-button:hover{background:var(--paper);color:var(--ink)}.quick-view:hover{background:var(--paper)}.text-button:hover{color:#6e2918}.source-link:hover{color:var(--ink)}}
@media(min-width:1440px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}}
@media(min-width:1800px){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1023px){:root{--sidebar:72px}.sidebar{padding-top:24px}.brand{font-size:26px}.chrome{padding:24px 24px 0}.heading{gap:12px}.heading p{display:none}.mast-right>.mono{display:none}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:16px}.results-bar{padding-inline:24px}.detail-content{padding:24px}.detail-content h2{font-size:36px}.detail-layout{grid-template-columns:1fr 1fr}.sort-wrap>span{display:none}}
@media(max-width:767px){:root{--sidebar:0px}.sidebar{display:none}main{margin:0}.chrome{padding:16px 16px 0}.masthead{margin-bottom:20px;gap:12px}.mobile-brand{display:block;font-size:36px}.heading{display:none}.mast-right{gap:8px}.mast-right .app-link{display:none}.mobile-saved{display:flex!important;gap:8px;align-items:center;font-size:13px;padding:0 12px;border:1px solid var(--border);border-radius:24px}.mobile-saved[aria-pressed="true"]{background:var(--ink);color:white}.search-row{gap:8px;margin-bottom:12px}.search-box{padding-inline:12px;min-height:52px}.search-box input{font-size:16px;padding-block:12px}.search-box kbd{display:none}.filter-toggle{padding:0 12px;min-height:52px}.filter-toggle .filter-word{display:none}.search-label{font-size:11px}.filter-row{display:block;padding-bottom:12px}.occasions{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none;gap:4px}.occasions::-webkit-scrollbar{display:none}.chip{min-height:44px;font-size:13px;padding-inline:14px;flex:none}.sort-wrap{display:none}.results-bar{padding:16px 12px 12px}.collection-note{font-size:10px}.result-caption{font-size:12px}.gallery{padding:0 8px 24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.masonry-col{gap:8px}.look,.look img,.image-open{border-radius:6px}.save-button{opacity:1;width:36px;height:36px;min-height:36px;top:8px;right:8px}.save-button svg{width:18px;height:18px}.look-info{display:none}.look .scrim{display:none}.detail-dialog{max-width:100vw;width:100vw;max-height:100dvh;border-radius:0;margin:0;min-height:100dvh}.detail-layout{grid-template-columns:1fr}.detail-image{padding:64px 12px 12px;background:var(--paper)}.detail-image img{width:100%;max-width:440px}.detail-content{padding:24px 20px 32px}.detail-top{margin-bottom:16px}.detail-close{position:fixed;top:12px;right:12px;z-index:3;box-shadow:0 2px 8px #0002;background:white}.detail-content h2{font-size:40px}.toast{left:50%;bottom:16px}.small-dialog{padding:24px}.fine-print{font-size:12px}.end-note{padding-bottom:32px}}
.mobile-saved{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Aura liquid glass v2 — supplied landing treatment, scoped prototype revision.
   Minimal change contract: index.html remains canonical; photos, data, and
   all interaction handlers remain unchanged. */
:root {
  --glass-light-tint: rgba(255,250,242,.045);
  --glass-dark-tint: rgba(17,13,11,.18);
  --glass-optics: blur(4px) saturate(132%) brightness(1.04);
  --glass-edge: 1.4px;
  --glass-radius: 16px;
  --glass-shadow: 0 8px 24px rgba(31,26,20,.08);
  --glass-specular: inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset -1px 0 0 rgba(255,255,255,.08);
  --glass-text: #433d36;
  --glass-text-backing: rgba(245,241,234,.72);
}
body { background: var(--paper); }
:is(.chrome,.sidebar,.save-button,.quick-view,.detail-dialog) {
  isolation: isolate;
  background: var(--paper);
  box-shadow: var(--glass-specular), var(--glass-shadow);
  border: 0;
}
:is(.chrome,.sidebar,.save-button,.quick-view,.detail-dialog)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.34),transparent 48%),
    radial-gradient(ellipse at 92% 100%,rgba(255,255,255,.13),transparent 52%),
    radial-gradient(ellipse at 70% 12%,rgba(205,92,54,.05),transparent 64%),
    linear-gradient(118deg,transparent 34%,rgba(255,255,255,.06) 46%,transparent 58%);
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :is(.chrome,.sidebar,.save-button,.quick-view,.detail-dialog)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--glass-edge);
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(180deg,rgba(255,255,255,.45),
      rgba(255,255,255,.15) 22%,transparent 50%,
      rgba(255,255,255,.15) 78%,rgba(255,255,255,.45));
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.sidebar {
  inset: 16px auto 16px 8px;
  width: calc(var(--sidebar) - 16px);
  border-radius: var(--glass-radius);
  padding: 20px 4px 12px;
  gap: 24px;
}
.sidebar .brand { font-size: 28px; }
.nav-item { min-height: 60px; border-radius: 12px; color: var(--glass-text); }
.side-note { color: var(--glass-text); }
.chrome {
  position: sticky;
  top: 16px;
  z-index: 21;
  margin: 16px 24px 0;
  padding: 16px 20px 4px;
  border-radius: var(--glass-radius);
}
.masthead { margin-bottom: 12px; gap: 16px; }
.heading h1 { font-size: 32px; }
.heading p,.mast-right>.mono { color: var(--glass-text); }
.mast-right { gap: 16px; }
.app-link { min-height: 44px; background: rgba(245,241,234,.48); }
.search-row { margin-bottom: 8px; gap: 8px; }
.search-label { color: var(--glass-text); }
.search-box {
  min-height: 48px;
  background: rgba(245,241,234,.76);
  border-color: rgba(31,26,20,.14);
}
.search-box input { padding-block: 12px; }
.search-box input::placeholder { color: #62594f; }
.search-box:focus-within { outline: 2px solid var(--rust-dark); outline-offset: 2px; }
.filter-toggle { min-height: 48px; background: rgba(245,241,234,.64); }
.filter-row { padding-bottom: 8px; }
.chip { min-height: 44px; }
.chip:not([aria-pressed="true"]) {
  color: var(--ink);
  background: rgba(245,241,234,.6);
}
.sort-wrap {
  background: rgba(245,241,234,.64);
  border-radius: 8px;
  padding-inline: 8px;
}
.results-bar { padding-top: 16px; }
.quick-view {
  position: relative;
  min-height: 44px;
  gap: 8px;
}
:is(.quick-view,.save-button) {
  background: var(--ink);
  color: white;
  --glass-shadow: 0 4px 12px rgba(17,13,11,.12);
}
.save-button[aria-pressed="true"] {
  background: var(--rust-dark);
  color: white;
}
.look-title { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
:is(.save-button,.quick-view):focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--rust-dark);
}
.detail-dialog {
  position: fixed;
  border-radius: 20px;
  --glass-shadow: 0 12px 32px rgba(17,13,11,.14);
}
.detail-dialog { overflow:auto;border:1px solid rgba(255,255,255,.55); }
.detail-dialog::before,.detail-dialog::after { content:none; }
@media(min-width:768px) {
  .detail-dialog { overflow:hidden; }
  .detail-layout { position:relative;min-height:min(420px,calc(100dvh - 48px)); }
  .detail-layout .detail-image { min-height:0;align-items:center;background:rgba(245,241,234,.92); }
  .detail-image img { width:100%;height:auto;max-height:min(788px,calc(100dvh - 80px));object-fit:contain; }
  .detail-layout .detail-content { position:absolute;inset:0;grid-column:2;grid-row:1;min-height:0;padding:24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; }
  .detail-top { position:sticky;top:-24px;z-index:2;margin:-24px -24px 20px;padding:16px 24px;background:rgba(245,241,234,.92);backdrop-filter:blur(12px);border-radius:0; }
}
.detail-dialog::backdrop {
  background: rgba(17,13,11,.3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.detail-image { background: transparent; padding: 16px; }
.detail-image img { border-radius: 8px; }
.detail-content {
  border-radius: 0 20px 20px 0;
  background: var(--paper);
}
.detail-content :is(.detail-eyebrow,.detail-description,.garments small,.garment-index,.why p,.fine-print,.source-link) {
  color: var(--glass-text);
}
.detail-tags span { background: rgba(245,241,234,.72); color: var(--ink); }
.detail-content .icon-btn,.detail-content .outline {
  background: rgba(245,241,234,.76);
  border-color: rgba(31,26,20,.16);
}
.garments,.garments li,.why { border-color: rgba(31,26,20,.18); }
.items-intro { margin: 6px 0 12px; font-size: 12px; color: var(--muted); }
.community-items .garments li { padding: 0; }
.garment-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 4px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.garment-link:hover { background: rgba(245,241,234,.6); }
.garment-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.garment-link .od-field { min-width: 0; }
.garment-link strong { overflow-wrap: anywhere; }
.garment-link > svg { width: 18px; height: 18px; flex: none; }
.garment-swatch { width: 16px; height: 16px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--garment-color); }
.detail-top { gap: 16px; }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :is(.chrome,.sidebar,.save-button,.quick-view,.detail-dialog) {
    -webkit-backdrop-filter: var(--glass-optics);
    backdrop-filter: var(--glass-optics);
    background:
      linear-gradient(135deg,rgba(255,255,255,.09),transparent 28%),
      linear-gradient(var(--glass-light-tint),var(--glass-light-tint)),
      rgba(255,255,255,.01);
  }
  :is(.chrome,.sidebar) {
    /* Local contrast backing leaves photographic contours visible on scroll. */
    background:
      linear-gradient(135deg,rgba(255,255,255,.09),transparent 28%),
      linear-gradient(var(--glass-light-tint),var(--glass-light-tint)),
      rgba(245,241,234,.68);
  }
  :is(.save-button,.quick-view) {
    background:
      linear-gradient(135deg,rgba(255,255,255,.09),transparent 28%),
      linear-gradient(var(--glass-dark-tint),var(--glass-dark-tint)),
      rgba(17,13,11,.52);
  }
  .save-button[aria-pressed="true"] {
    background:
      linear-gradient(135deg,rgba(255,255,255,.09),transparent 28%),
      rgba(149,60,34,.92);
  }
  .detail-content {
    background: var(--glass-text-backing);
    -webkit-backdrop-filter: var(--glass-optics);
    backdrop-filter: var(--glass-optics);
  }
}
@media(hover:hover) {
  :is(.save-button,.quick-view):hover {
    background: rgba(17,13,11,.84);
    color: white;
  }
  .save-button[aria-pressed="true"]:hover { background: var(--rust-dark); }
  .chip:not([aria-pressed="true"]):hover,.app-link:hover,
  .filter-toggle:not(.active):hover {
    background: rgba(245,241,234,.88);
    color: var(--ink);
  }
}
@media(max-width:1023px) {
  .sidebar { padding-top: 16px; }
  .sidebar .brand { font-size: 24px; }
  .chrome { margin-inline: 16px; padding: 12px 16px 4px; }
  .heading h1 { font-size: 28px; }
  .detail-content { padding: 24px; }
}
@media(max-width:767px) {
  .sidebar { display: none; }
  .chrome {
    top: max(8px,env(safe-area-inset-top));
    margin: 8px 8px 0;
    padding: 12px 12px 4px;
    border-radius: 16px;
  }
  .masthead { margin-bottom: 8px; }
  .mobile-brand { font-size: 28px; line-height: 1.2; }
  .mobile-saved { background: rgba(245,241,234,.7); min-height: 44px; }
  .mobile-saved[aria-pressed="true"] { background: var(--ink); }
  .search-label { font-size: 11px; margin-bottom: 4px; }
  .search-box,.filter-toggle { min-height: 44px; }
  .search-box input { padding-block: 8px; }
  .filter-row { padding-bottom: 4px; }
  .occasions { margin-inline: -12px; padding-inline: 12px; gap: 8px; }
  .chip { min-height: 44px; padding-inline: 12px; }
  .save-button { width: 44px; height: 44px; min-height: 44px; }
  .detail-dialog {
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: contain;
  }
  .detail-dialog::before { border-radius: inherit; }
  .detail-image { padding: 60px 12px 12px; background: transparent; }
  .detail-image img { max-width: 440px; }
  .detail-content { border-radius: 16px 16px 0 0; padding: 24px 20px 32px; }
  .detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--paper);
    box-shadow: var(--glass-specular),0 4px 12px rgba(17,13,11,.1);
  }
  .detail-dialog::after { border-radius: inherit; }
  .small-dialog { border-radius: 16px; }
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  :is(.chrome,.sidebar,.detail-dialog,.detail-content) { background: var(--paper); }
  :is(.save-button,.quick-view) { background: var(--ink); }
  .save-button[aria-pressed="true"] { background: var(--rust-dark); }
}
@media(prefers-reduced-motion:reduce) {
  .chrome,.sidebar,.detail-dialog,.save-button,.quick-view { animation: none; transition: none; }
}
/* /Aura liquid glass v2 */


/* Aura mixed-content edit v3: editorial art stays matte; glass remains UI-only. */
.content-types { display:flex;gap:4px;align-items:center;flex:none;border:1px solid var(--border);border-radius:24px;padding:4px;background:rgba(245,241,234,.8); }
.content-tab { display:block;min-height:44px;padding:0 16px;border-radius:20px;font-size:14px;font-weight:500; }
.content-tab[aria-pressed="true"] { background:var(--ink);color:white; }
.results-bar { flex-wrap:wrap;gap:12px 16px; }
.result-caption { margin-right:auto; }
.poster-label { position:absolute;left:12px;top:12px;display:block;padding:4px 8px;background:var(--ink);color:white;font:10px Plex,monospace;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;pointer-events:none; }
.poster-tile .look-title { font-size:20px; }
.poster-detail-title { font-family:DM,system-ui,sans-serif;letter-spacing:-.04em;font-size:36px!important;line-height:1.12;overflow-wrap:normal; }
.related-section { margin-top:28px;border-top:1px solid var(--border);padding-top:20px; }
.related-intro { color:var(--glass-text);font-size:14px;margin:8px 0 16px; }
.related-looks { display:flex;flex-direction:column;gap:8px; }
.related-look { width:100%;padding:8px;text-align:left;--od-gap:16px;background:rgba(245,241,234,.6);border-radius:8px; }
.related-look img { width:64px;height:auto;border-radius:4px; }
.related-look strong { font-size:14px;font-weight:500;line-height:1.4; }
.related-look small { font-size:12px;color:var(--glass-text); }
.related-look>svg { width:16px; }
.poster-credits { margin-top:20px;font-size:12px;color:var(--glass-text); }
.poster-credits summary { cursor:pointer;padding:12px 0;min-height:44px; }
.poster-credits .source-link { margin:0;padding:8px 0; }
.sidebar { bottom:auto;gap:20px;padding-bottom:12px; }
@media(hover:hover){.content-tab:not([aria-pressed="true"]):hover,.related-look:hover{background:#e5dfd5;color:var(--ink)}}
@media(max-width:767px){
 .results-bar { gap:8px;padding:12px 12px 8px; }
 .content-types { width:100%;justify-content:center; }
 .content-tab { flex:1;min-height:44px; }
 .result-caption { font-size:11px; }
 .collection-note { font-size:10px; }
 .poster-label { top:8px;left:8px;font-size:9px;padding:4px; }
 .poster-detail-title { font-size:32px!important; }
}
/* /Aura mixed-content edit v3 */


/* Aura v4 — compact navigation and reusable templates */
:root { --sidebar:104px; --nav-width:76px; --nav-height:64px; --nav-radius:14px; }
svg { stroke-width:1.75; }
.sidebar {
  position:fixed;inset:16px auto auto 8px;width:92px;padding:12px 8px;
  gap:24px;border-radius:16px;align-items:center;
}
.sidebar .brand { display:block;font-size:24px;line-height:28px;letter-spacing:-1px; }
.side-nav { width:76px;gap:8px;align-items:center; }
.nav-item {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:var(--nav-width);height:var(--nav-height);min-height:var(--nav-height);
  padding:8px 6px;gap:6px;border-radius:var(--nav-radius);font-size:10px;font-weight:500;line-height:14px;color:var(--glass-text);
}
.nav-item>span:last-child { display:block;white-space:nowrap; }
.nav-item svg { display:block;width:24px;height:24px;stroke-width:1.75; }
.nav-icon { display:block;position:relative;width:24px;height:24px;flex:none; }
.nav-item[aria-current="page"] { background:#29231d;color:white; }
.saved-count {
  position:absolute;top:-5px;right:-7px;display:block;width:14px;height:14px;
  min-width:14px;border-radius:50%;padding:0;font-size:9px;line-height:14px;font-weight:500;
  color:white;background:var(--rust-dark);text-align:center;letter-spacing:-.03em;
}
.saved-count[hidden] { display:none; }
.template-caption { background:var(--paper);padding:12px;--od-gap:4px;border-radius:0 0 8px 8px; }
.template-caption strong { font-size:14px;font-weight:500;line-height:1.4; }
.template-caption .mono { font-size:10px;color:var(--muted); }
.template-tile .image-open,.template-tile img { border-radius:8px 8px 0 0; }
.template-tile .scrim { display:none; }
body[data-catalog-view="true"] .filter-row,body[data-catalog-view="true"] .filter-toggle { display:none; }
body:has(.preview-end) .end-note { display:none; }
.preview-end { text-align:center;padding:40px 20px 32px; }
.preview-end h3 { font-family:Newsreader,Georgia,serif;font-size:clamp(26px,4vw,40px);margin:10px 0; }
.preview-end p { color:var(--muted);margin:8px 0 20px; }
.preview-end .solid { display:inline-flex;text-decoration:none;min-height:48px;padding:12px 24px; }
.template-formats { display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 16px; }
.template-formats[hidden] { display:none; }
.template-title { font-size:36px!important; }
.editable-fields { margin:16px 0 24px; }
.editable-fields>div { padding:12px 0;border-bottom:1px solid rgba(31,26,20,.15);align-items:start;--od-gap:12px; }
.editable-fields dt { display:flex;align-items:center;gap:8px;flex:0 0 112px;font-size:13px;font-weight:500; }
.editable-fields dd { margin:0;color:var(--glass-text);font-size:13px;line-height:1.5; }
.field-marker { display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;font:10px Plex,monospace;border:1px solid var(--border);border-radius:4px;color:var(--glass-text); }
.template-use { width:100%; }
.editor-dialog { width:960px;max-height:calc(100dvh - 32px);background:var(--paper);border-radius:16px;box-shadow:var(--glass-shadow); }
.editor-header { padding:20px 24px;border-bottom:1px solid var(--border);--od-gap:16px; }
.editor-header h2 { font-size:28px; }
.editor-header p { font-size:13px;color:var(--muted);margin-top:4px; }
.editor-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.editor-controls { padding:24px;--od-gap:24px; }
.editor-controls label,.editor-controls legend { font-size:14px;font-weight:500; }
.editor-controls input { display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:white;padding:12px;font-size:16px;min-height:48px; }
.editor-controls small { font-size:12px;color:var(--muted);margin-top:4px; }
.editor-controls .field-set { margin:0; }
.palette-choice { width:100%;text-align:left;border:1px solid var(--border);border-radius:8px;padding:12px;min-height:48px;--od-gap:12px;font-size:14px; }
.palette-choice[aria-pressed="true"] { border-color:var(--ink);background:rgba(255,255,255,.5); }
.palette-choice>svg { margin-left:auto;width:16px; }
.palette-swatches { display:flex;gap:0;flex:none;border:1px solid var(--border);border-radius:4px;overflow:hidden; }
.palette-swatches span { display:block;width:16px;height:24px; }
.editor-note { font-size:13px;color:var(--muted);line-height:1.6; }
.editor-stage { display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;background:#ddd9d2; }
#editor-preview { width:100%;max-width:360px; }
#editor-preview svg { display:block;width:100%;height:auto;stroke:none;box-shadow:0 4px 16px rgba(31,26,20,.12); }
.editor-preview-note { font-size:11px;color:var(--glass-text);text-align:center; }
.editor-feedback { min-height:24px; }
@media(hover:hover){.palette-choice:hover{background:#e5dfd5;color:var(--ink)}}
@media(max-width:1023px){:root{--sidebar:104px}.sidebar .brand{font-size:24px}.content-tab{padding-inline:12px}}
@media(max-width:767px){
 :root{--sidebar:0px}
 main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
 .sidebar {
   display:flex;top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:12px;
   width:calc(100% - 24px);padding:8px 12px;gap:0;border-radius:20px;z-index:30;
 }
 .sidebar>.brand { display:none; }
 .side-nav { width:100%;flex-direction:row;justify-content:space-around;gap:8px; }
 .nav-item { width:72px;height:64px;min-height:64px; }
 .mobile-saved { display:none!important; }
 .content-types { padding:4px;gap:0; }
 .content-tab { padding-inline:8px;font-size:12px;min-height:44px; }
 .results-bar .result-caption { flex-basis:100%;font-size:11px; }
 .template-formats { padding-inline:12px; }
 .toast { bottom:calc(104px + env(safe-area-inset-bottom)); }
 .editor-dialog { max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px); }
 .editor-header { padding:16px; }
 .editor-layout { grid-template-columns:1fr; }
 .editor-controls { padding:20px;--od-gap:20px; }
 .editor-stage { padding:20px; }
 .template-caption { padding:8px; }
 .template-caption strong { font-size:13px; }
}
@media(prefers-reduced-motion:reduce){.palette-choice{transition:none}}
/* /Aura v4 */


/* Aura caption polish — artwork stays clear; metadata remains in normal flow. */
#templates-nav>span:last-child { font-size:10px;padding-inline:4px;width:56px;max-width:56px;text-align:center;box-sizing:border-box; }
.poster-tile .image-open,.poster-tile img { border-radius:8px 8px 0 0; }
.editorial-caption { position:static;display:flex;opacity:1;padding:12px;--od-gap:4px;background:var(--paper);border-radius:0 0 8px 8px;color:var(--ink); }
.editorial-caption>.od-row { --od-gap:8px;align-items:center; }
.editorial-caption strong { display:block;font-size:14px;font-weight:500;line-height:1.4;overflow-wrap:anywhere; }
.caption-meta { --od-gap:8px; }
.caption-type { display:block;font-size:10px;font-weight:500;line-height:1.6;border:1px solid var(--border);border-radius:4px;padding:0 4px; }
.caption-meta .mono { display:block;font-size:10px;line-height:1.6;color:var(--muted); }
.caption-save { position:static;display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--ink); }
.caption-save svg { width:18px;height:18px; }
.caption-save[aria-pressed="true"] { background:var(--ink);color:white;border-color:var(--ink); }
.look:not(.poster-tile) .save-button[aria-pressed] { opacity:0;min-width:44px;min-height:44px;width:44px;height:44px; }
.look:not(.poster-tile):focus-within .save-button[aria-pressed] { opacity:1; }
@media(hover:hover){
 .look:not(.poster-tile):hover .save-button[aria-pressed] { opacity:1; }
 .caption-save:hover { background:var(--soft);color:var(--ink); }
 .caption-save[aria-pressed="true"]:hover { background:#3c3025;color:white; }
}
@media(max-width:767px){
 .editorial-caption { padding:8px; }
 .editorial-caption strong { font-size:13px; }
 .poster-tile .image-open,.poster-tile img { border-radius:6px 6px 0 0; }
}
/* /Aura caption polish */


/* One sticky surface morphs in place; reserved flow space prevents scroll feedback. */
:root { --glass-radius:24px; }
.discovery-header-slot { position:sticky;top:16px;z-index:21;margin:16px 24px 0;display:flow-root; }
#full-discovery-header {
 position:relative;top:auto;z-index:21;margin:0;overflow:hidden;
 opacity:1;visibility:visible;transform:none;transition:none;
 contain:layout style;
}
#full-discovery-header .search-row { position:relative;z-index:2; }
#full-discovery-header .masthead,#full-discovery-header .filter-row { transition:none; }
.smooth-corners { clip-path:var(--smooth-corners); }
/* Appending cursor pages must not anchor the viewport to the moving footer. */
#discovery { overflow-anchor:none; }
.community-feed-controls[hidden] { display:none; }
.community-feed-controls { display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center;color:var(--muted);font-size:13px; }
.community-feed-controls:has(.feed-skeletons) { padding:0 0 24px; }
.gallery:empty { padding-bottom:0; }
.live-editorial { aspect-ratio:4/5;display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--paper);color:var(--ink);overflow:hidden;text-align:left; }
.live-editorial-kicker,.live-editorial-note { font:9px/1.4 Plex,monospace;letter-spacing:.1em;text-transform:uppercase; }
.live-editorial-title { font-size:clamp(22px,2.4vw,36px);line-height:.92;letter-spacing:-.05em;font-weight:700; }
.live-editorial-photo { flex:1;min-height:0;overflow:hidden;border-left:6px solid var(--rust);padding-left:10px; }
.live-editorial .live-editorial-photo img { width:100%;height:100%;object-fit:contain;border-radius:0;background:var(--soft); }
.live-editorial-note { letter-spacing:.04em;font-size:8px; }
.live-editorial-type { background:var(--ink);color:var(--paper); }
.live-editorial-type .live-editorial-title { font-family:Newsreader,Georgia,serif;font-weight:500;letter-spacing:-.025em; }
@media(max-width:767px) { .live-editorial { padding:12px;gap:8px; } .live-editorial-kicker,.live-editorial-note { font-size:7px; } .live-editorial-title { font-size:22px; } .live-editorial-photo { border-left-width:4px;padding-left:6px; } }
.feed-skeletons { width:100%; text-align:left; }
.end-note[hidden] { display:none; }
#gallery .media-frame { position:relative; overflow:hidden; background:var(--soft); }
#gallery .media-frame > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
#gallery .media-frame.is-loaded > img { opacity:1; }
#gallery .media-frame { overflow:hidden; }
#gallery .media-frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,var(--paper) 45%,transparent 65%); animation:feed-shimmer 1.8s ease-in-out infinite; }
#gallery .media-frame:is(.is-loaded,.is-error)::after { content:none; }
#gallery .media-frame.is-error > img { opacity:1; }
@media(prefers-reduced-motion:reduce) { #gallery .media-frame::after { animation:none; } }
.feed-skeleton-card { overflow:hidden; border-radius:var(--radius); background:var(--soft); }
.feed-skeleton-image { position:relative; overflow:hidden; aspect-ratio:var(--skeleton-ratio,2/3); background:var(--soft); }
.feed-skeleton-image::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,var(--paper) 45%,transparent 65%); animation:feed-shimmer 1.8s ease-in-out infinite; }
.feed-skeleton-caption { display:grid; gap:8px; padding:14px; }
.feed-skeleton-caption span { display:block; height:10px; width:72%; border-radius:6px; background:var(--border); opacity:.5; }
.feed-skeleton-caption span:last-child { width:40%; height:8px; }
/* transform-only so the shimmer stays on the compositor */
@keyframes feed-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce) { .feed-skeleton-image::after { animation:none; } }
.community-feed-controls p:empty { display:none; }
.community-feed-controls button[hidden] { display:none; }
.mobile-section { display:none; }
#discovery:focus { outline:none; }
.discovery-header-slot.is-scrolled .header-collapse { display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:14px;font-size:13px; }
.header-collapse svg { width:18px;height:18px; }
.chrome { background:rgba(245,241,234,.68);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 24px rgba(31,26,20,.055); }
.search-box { border-radius:16px;border-color:rgba(31,26,20,.08);background:rgba(255,255,255,.42); }
.search-box:focus-within { outline:none;box-shadow:inset 0 0 0 2px var(--rust-dark); }
.filter-toggle { border-radius:16px;border-color:rgba(31,26,20,.08);background:rgba(255,255,255,.3); }
.content-types { border-radius:24px;border-color:rgba(31,26,20,.08);background:rgba(255,255,255,.2); }
.content-tab { border-radius:20px; }
.sidebar { border-radius:24px; }
.nav-item { border-radius:18px; }
.smooth-corners:focus-visible { outline-offset:-3px; }
@media(hover:hover){.header-collapse:hover{background:rgba(255,255,255,.5)}}
@media(max-width:1023px){
 .discovery-header-slot { margin-inline:16px; }
}
@media(max-width:767px){
 .discovery-header-slot { top:max(12px,env(safe-area-inset-top));margin:12px 12px 0; }
 .chrome { padding:12px;border-radius:24px; }
 #full-discovery-header { margin:0; }
 .masthead { min-height:32px;margin-bottom:10px; }
 .mobile-brand { font-size:30px;letter-spacing:-1.5px; }
 .mobile-section { display:block;font:400 18px/1.2 Newsreader,Georgia,serif;color:var(--muted); }
 .mast-right { gap:4px; }
 .header-collapse { padding:0;width:44px;border-radius:14px; }
 .header-collapse span { display:none; }
 .search-label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
 .search-box,.filter-toggle { height:48px;min-height:48px; }
 .search-box { padding-inline:14px;gap:10px; }
 .search-box>svg { width:18px;height:18px; }
 .search-box input { font-size:16px;padding-block:10px; }
 .search-box input::placeholder { font-size:14px;font-weight:400;color:var(--muted); }
 .filter-toggle { width:48px;padding:0;justify-content:center;flex:none; }
 .filter-toggle svg { width:20px;height:20px; }
 .search-row { margin-bottom:8px; }
 .filter-row { padding-bottom:0; }
 .occasions { margin-inline:-12px;padding-inline:12px;gap:4px; }
 .chip { padding-inline:12px;font-size:12px;font-weight:500; }
 .chip .tiny-dot { display:none; }
 .results-bar { padding-top:12px; }
 /* Compact dock hugs its controls instead of spanning the gallery. */
 main { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
 .sidebar {
   left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));
   width:max-content;max-width:calc(100vw - 24px);padding:5px;gap:0;
   transform:translateX(-50%);border-radius:20px;
   background:rgba(245,241,234,.7);
   backdrop-filter:blur(16px) saturate(125%);
   -webkit-backdrop-filter:blur(16px) saturate(125%);
   box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 18px rgba(31,26,20,.09);
 }
 .side-nav { width:auto;gap:4px;justify-content:center; }
 .nav-item { width:76px;height:48px;min-height:48px;border-radius:15px;gap:3px;font-size:10px;font-weight:500; }
 .nav-icon,.nav-item svg { width:20px;height:20px; }
 #templates-nav>span:last-child { font-size:10px;width:auto;max-width:none;padding:0; }
 .saved-count { min-width:14px;font-size:9px;line-height:14px;right:-7px;top:-4px; }
 .toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce){#full-discovery-header{transition:none;transform:none}}
/* /Scroll-aware discovery chrome */

/* Full step-one occasion catalogue; the header stays a single compact row. */
.occasion-browser { display:flex;align-items:center;gap:6px;min-width:0;flex:1; }
.occasion-browser .occasions { flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;margin:0;padding:0 0 0 2px;scrollbar-width:none; }
.occasion-browser .occasions::-webkit-scrollbar { display:none; }
.occasion-browser .chip { flex:none; }
.occasion-open { flex:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.3);font-size:12px;white-space:nowrap; }
.occasion-open svg { width:16px;height:16px; }
.small-dialog {
  background:var(--paper);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--glass-specular),0 16px 48px rgba(31,26,20,.16);
}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))) {
  .small-dialog {
    background:linear-gradient(135deg,rgba(255,255,255,.26),transparent 45%),rgba(245,241,234,.8);
    -webkit-backdrop-filter:blur(18px) saturate(132%);
    backdrop-filter:blur(18px) saturate(132%);
  }
}
.small-dialog::backdrop { background:rgba(31,26,20,.28);backdrop-filter:none; }
#filters { width:440px;padding:0;border-radius:24px;max-height:min(760px,calc(100dvh - 32px));overflow:hidden; }
#filters[open] { display:flex;flex-direction:column; }
#filters .small-header { flex:none;margin:0;padding:18px 20px 14px;border-bottom:1px solid rgba(31,26,20,.08); }
#filters .small-header h2 { font-size:28px;line-height:1.1; }
#filters .icon-btn { background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.6); }
#filters .filter-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 20px;scrollbar-width:thin; }
#filters .field-set { margin:0 0 20px; }
#filters .field-set:last-child { margin-bottom:0; }
#filters .filter-intro { margin:0 0 12px;color:var(--glass-text);font-size:12px; }
#filters .choice-grid button,#filters .occasion-any { background:rgba(255,255,255,.3);border-color:rgba(31,26,20,.13); }
#filters :is(.choice-grid button,.occasion-any)[aria-pressed="true"] { background:var(--ink);border-color:var(--ink);color:var(--paper); }
#style-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
#style-choices button { padding:8px 6px;min-height:44px;font-size:12px; }
.filter-intro { color:var(--muted);font-size:13px;margin:0 0 12px; }
.occasion-group { margin-top:16px; }
.occasion-group h3 { font-family:Plex,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px; }
.occasion-group .choice-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
.occasion-group button { min-height:44px;padding:8px 6px;font-size:12px; }
.occasion-any { width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;text-align:left;padding:0 12px;font-size:13px; }
.occasion-any[aria-pressed="true"] { background:var(--ink);color:var(--paper);border-color:var(--ink); }
#filters .filter-actions { flex:none;position:static;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));margin:0;border-top:1px solid rgba(31,26,20,.1); }
#filters .filter-actions button { min-height:48px;border-radius:14px;font-size:14px; }
#filters #reset-filters { min-width:76px;padding:0 16px;text-decoration:none;color:var(--glass-text);background:rgba(255,255,255,.3);border:1px solid rgba(31,26,20,.12); }
#filters #apply-filters { width:auto;gap:16px;padding:0 20px; }
#filters #apply-filters svg { width:18px;height:18px; }
@media(prefers-reduced-transparency:reduce) { .small-dialog { background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none; } }
@media(max-width:767px) {
 .occasion-browser { margin-inline:-2px;gap:4px; }
 .occasion-browser .chip { padding-inline:12px; }
 .occasion-open { padding-inline:10px; }
 #filters { width:calc(100% - 24px);max-width:440px;border-radius:24px; }
}



@media(hover:none){.look:not(.poster-tile) .save-button[aria-pressed]{opacity:1}}

/* Theme controls stay within the existing responsive masthead. */
:root { color-scheme:light; }
.explore-utilities { display:flex;align-items:center;gap:6px; }
.utility-button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:16px;text-decoration:none;font-size:13px;white-space:nowrap; }
.utility-button:hover { background:var(--soft); }
#theme-toggle { padding:0;width:44px; }
#theme-toggle[aria-pressed="true"] svg { fill:currentColor; }
.preview-end .text-button { margin-top:8px; }
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#211c18;--ink:#f5f1ea;--border:#55483d;--muted:#c3b4a5;
  --white:#211c18;--soft:#302820;--rust:#e18a63;--rust-dark:#edab87;
  --glass-text:#d8cbbd;--glass-text-backing:rgba(33,28,24,.9);
  --glass-light-tint:rgba(33,28,24,.3);
  --glass-specular:inset 0 1px 0 rgba(245,241,234,.13),inset 0 -1px 0 rgba(245,241,234,.04);
  --glass-shadow:0 8px 24px rgba(0,0,0,.2);
}
:root[data-theme="dark"] :is(.chrome,.sidebar,.small-dialog,.detail-dialog) {
  background:linear-gradient(135deg,rgba(245,241,234,.045),transparent 45%),rgba(33,28,24,.88);
  border-color:var(--border);box-shadow:var(--glass-specular),var(--glass-shadow);
}
:root[data-theme="dark"] :is(.search-box,.filter-toggle,.content-types,.sort-wrap,.app-link,.occasion-open,.related-look,.detail-tags span,.actions-row .outline,.utility-button,.mobile-saved,.palette-choice) { background:rgba(245,241,234,.055);border-color:var(--border);color:var(--ink); }
:root[data-theme="dark"] .search-box input::placeholder { color:var(--muted); }
:root[data-theme="dark"] :is(.chip:not([aria-pressed="true"]),.detail-layout .detail-image,.detail-top,.editor-stage) { background:rgba(33,28,24,.94);color:var(--ink); }
:root[data-theme="dark"] :is(.solid,.wardrobe-cta,.nav-item[aria-current="page"],.chip[aria-pressed="true"],.content-tab[aria-pressed="true"],.filter-toggle.active,.choice-grid button[aria-pressed="true"],.mobile-saved[aria-pressed="true"],.toast,.skip) { background:var(--ink);color:var(--paper); }
:root[data-theme="dark"] .wardrobe-cta small { color:#55483d; }
:root[data-theme="dark"] #filters :is(.choice-grid button,.occasion-any,.icon-btn) { background:rgba(245,241,234,.055);border-color:var(--border); }
:root[data-theme="dark"] #filters :is(.choice-grid button[aria-pressed="true"],.occasion-any[aria-pressed="true"]) { background:var(--ink);color:var(--paper); }
:root[data-theme="dark"] :is(.garments,.garments li,.why,.editable-fields>div,#filters .small-header,#filters .filter-actions,.end-note) { border-color:var(--border); }
:root[data-theme="dark"] :is(.detail-close,#editor-headline) { background:var(--paper);color:var(--ink); }
/* Editorial artwork keeps its authored day palette. Photography stays untouched. */
:root[data-theme="dark"] .live-editorial { --paper:#f5f1ea;--ink:#1f1a14;--muted:#6b655c;--border:#ddd5c5; }
@media(hover:hover) {
  :root[data-theme="dark"] :is(.nav-item:not([aria-current="page"]),.chip:not([aria-pressed="true"]),.outline,.app-link,.filter-toggle:not(.active),.icon-btn,.garment-link):hover { background:#3d3229;color:var(--ink); }
  :root[data-theme="dark"] :is(.solid,.wardrobe-cta):hover { background:#e3d6c8;color:var(--paper); }
}
@media(max-width:1023px) { .mast-right>.mono { display:none; } }
@media(max-width:767px) {
  .explore-utilities { gap:4px; }
  .utility-button { padding:0;width:44px; }
  #explore-account span { display:none; }
  .mast-right .mobile-saved { display:none!important; }
  .mast-right { gap:4px; }
}
@media(prefers-reduced-transparency:reduce) {
  :root[data-theme="dark"] :is(.chrome,.sidebar,.small-dialog,.detail-dialog,.detail-content) { background:var(--paper);backdrop-filter:none; }
}

:root[data-theme="dark"] #filters #reset-filters { background:rgba(245,241,234,.055);border-color:var(--border);color:var(--glass-text); }

@media(min-width:768px) {
  .sidebar>.explore-utilities { flex-direction:column;width:76px;gap:8px;padding-top:12px;border-top:1px solid var(--border);margin-top:-8px; }
  .sidebar #explore-account { flex-direction:column;width:76px;min-height:64px;padding:8px 6px;gap:6px;border:0;border-radius:14px;font-size:10px;line-height:14px;color:var(--glass-text);background:transparent; }
  .sidebar #explore-account svg { width:24px;height:24px; }
  .sidebar #theme-toggle { border-color:transparent;background:transparent;color:var(--glass-text); }
  .sidebar :is(#theme-toggle,#explore-account):hover { background:var(--soft); }
}

/* Saved refresh keeps existing cards; placeholders occupy the gallery only when empty. */
/* Pending placeholders render inside #gallery (explore.js) so real cards replace them in place; a block below the gallery would be pushed off-screen (CLS). */
#community-feed-root .feed-skeletons { display:none; }

.content-types[hidden] { display:none; }

.language-control { position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border-radius:14px;color:var(--glass-text); }
.language-control svg { width:20px;height:20px;flex:none; }
.language-code { font:10px Plex,monospace; }
.language-control select { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.language-control:focus-within { outline:3px solid var(--rust-dark);outline-offset:3px; }
.language-control:hover { background:var(--soft); }
@media(min-width:768px){ .sidebar .language-control { width:76px;flex-direction:column;gap:4px;padding:4px; } }
@media(max-width:767px){ .language-control { gap:3px;padding:0 5px; } .language-control svg { width:16px;height:16px; } .explore-utilities { gap:2px; } }

/* Scroll performance: skip rendering off-screen cards (render() sets each card's contain-intrinsic-size). */
.gallery .look { content-visibility:auto; }
/* Paint containment clips outer outlines; keep the card focus ring inside. */
.gallery .look .image-open:focus-visible { outline-offset:-3px; }
/* Large backdrop blurs repaint every scroll frame on phones. */
@media(max-width:767px) {
  /* explore.js moves the 44px utilities into the masthead; reserve it to avoid a shift. */
  .masthead { min-height:44px; }
  .chrome { backdrop-filter:blur(8px) saturate(125%);-webkit-backdrop-filter:blur(8px) saturate(125%); }
}

/* First-paint placeholders: six fixed staggered columns (own class, so render() never reuses them as
   .masonry-col); extra columns hide to mirror columnCount() in explore.js. */
.skeleton-col { display:flex;flex-direction:column;gap:12px;min-width:0; }
.skeleton-col:nth-child(n+5) { display:none; }
@media(min-width:1440px) { .skeleton-col:nth-child(5) { display:flex; } }
@media(min-width:1800px) { .skeleton-col:nth-child(6) { display:flex; } }
@media(max-width:1023px) { .skeleton-col:nth-child(4) { display:none; } }
@media(max-width:767px) { .skeleton-col { gap:8px; } .skeleton-col:nth-child(3) { display:none; } }
/* Detail image: grid thumbnail shown as-is (or a blurred pulse) until the resized full image loads */
.detail-image img { background:center/contain no-repeat; clip-path:inset(0 round 8px); transition:filter .45s ease-out; }
.detail-image.is-loading:not(.has-thumb) img { filter:blur(16px); background-color:var(--border); animation:detail-pulse 1.1s ease-in-out infinite alternate; }
@keyframes detail-pulse { from { opacity:1; } to { opacity:.55; } }
@media(prefers-reduced-motion:reduce) { .detail-image img { transition:none; } .detail-image.is-loading img { animation:none; } }