/* V55: four compact photographic entries and tactile, material-based collection controls.
   All effects belong to the interface/background. Product photographs are never filtered. */
#hair-gallery[open][data-material]{isolation:isolate}
#hair-gallery[open][data-material]>.vitrine-content{position:relative;z-index:2}
#hair-gallery[data-display-view=catalogue] .vitrine-content{padding:0 28px 28px}
#hair-gallery[open][data-material][data-display-view=catalogue] .vitrine-heading{position:sticky;top:0;z-index:12;padding:16px 20px 18px;margin:0 0 20px;min-height:0;background:var(--material-panel);border-bottom:1px solid var(--material-rule)}
#hair-gallery[open][data-material][data-display-view=catalogue] .dialog-top{position:relative;min-height:44px;padding:0 340px 0 0}
#hair-gallery[open][data-material][data-display-view=catalogue] .dialog-top h2{font-size:36px;line-height:1.1;margin:0;max-width:none}
#hair-gallery[data-display-view=catalogue] #close-hair{position:absolute;right:0;top:0;width:44px;height:44px;padding:11px}
#hair-gallery[data-display-view=catalogue] #hair-context{display:none}
#hair-gallery[data-display-view=catalogue] .saved-tools{position:absolute;top:16px;right:80px;display:flex;gap:20px;margin:0;padding:0;min-height:44px}
#hair-gallery[data-display-view=catalogue] .saved-tools button{min-height:44px;font-size:12px}
#hair-gallery[open][data-material] .hair-filters{display:grid;grid-template-columns:96px repeat(3,minmax(0,1fr));gap:12px;max-width:950px;margin:12px 0 0;padding:5px 0 0;border:0;perspective:1000px}
#hair-gallery[open][data-material] .hair-filters[hidden]{display:none}
#hair-gallery[open][data-material] .hair-filters .mineral-choice{position:relative;isolation:isolate;overflow:hidden;min-height:88px;padding:16px;text-align:left;border:0;border-radius:3px;background:#1c1b19;color:#fff5e4;cursor:pointer;transform:translateY(0);transition:transform 250ms cubic-bezier(.16,1,.3,1),box-shadow 250ms;box-shadow:0 4px 10px #0003}
.mineral-choice-surface,.mineral-choice-shine,.mineral-choice-shade{position:absolute;inset:0;pointer-events:none;z-index:-1}
.mineral-choice-surface{background-image:var(--choice-image);background-size:cover;background-position:center;transition:filter 250ms,transform 450ms cubic-bezier(.16,1,.3,1)}
.mineral-choice-shade{background:linear-gradient(180deg,#00000008 0%,#00000030 20%,#000000c9 100%)}
.mineral-choice-shine{z-index:0;background:linear-gradient(112deg,transparent 18%,#fff4d355 40%,#fff8e98c 43%,transparent 63%);transform:translateX(-110%);opacity:0;transition:transform 650ms cubic-bezier(.16,1,.3,1),opacity 200ms}
#hair-gallery .mineral-choice-name{display:block;position:relative;margin-top:13px;font:500 16px/1.25 Manrope,Arial,sans-serif;color:#fff5e4}
#hair-gallery .mineral-choice-note{display:block;position:relative;margin-top:5px;font:12px/1.4 Manrope,Arial,sans-serif;color:#fff1db}
#hair-gallery .mineral-choice-check{position:absolute;right:12px;top:10px;width:16px;height:16px;opacity:0;color:#fff8e6;stroke-width:1.5;filter:drop-shadow(0 1px 2px #000)}
#hair-gallery[open][data-material] .hair-filters .mineral-choice[aria-pressed=true]{outline:1px solid var(--material-accent);outline-offset:3px}
#hair-gallery .mineral-choice[aria-pressed=true] .mineral-choice-check{opacity:1}
#hair-gallery[open][data-material] .hair-filters .mineral-choice[data-hair-filter=all]{background:var(--material-base);box-shadow:none;padding:14px 12px;color:var(--material-ink);display:flex;flex-direction:column;justify-content:center}
#hair-gallery .mineral-choice[data-hair-filter=all] .mineral-choice-name{margin:0;color:var(--material-ink);font-size:14px}
#hair-gallery .mineral-choice[data-hair-filter=all] .mineral-choice-note{color:var(--material-muted);font-size:11px}
#hair-gallery .mineral-choice[data-hair-filter=all] .mineral-choice-check{display:none}
#hair-gallery[open][data-material] .hair-filters .mineral-choice:focus-visible{outline:2px solid var(--material-accent);outline-offset:4px;transform:translateY(-4px)}
#hair-gallery .mineral-choice:focus-visible .mineral-choice-shine{transform:translateX(40%);opacity:.75}
#hair-gallery .hair-filters:has(.mineral-choice:not([data-hair-filter=all]):focus-visible) .mineral-choice:not(:focus-visible) .mineral-choice-surface{filter:brightness(.45)}
@media(hover:hover) and (pointer:fine){
 #hair-gallery[open][data-material] .hair-filters .mineral-choice:hover{transform:translateY(-6px) rotateX(3deg);box-shadow:0 12px 22px #0005}
 #hair-gallery .mineral-choice:hover .mineral-choice-surface{transform:scale(1.055);filter:brightness(1.16)}
 #hair-gallery .mineral-choice:hover .mineral-choice-shine{transform:translateX(35%);opacity:.8}
 #hair-gallery .hair-filters:has(.mineral-choice:not([data-hair-filter=all]):hover) .mineral-choice:not(:hover) .mineral-choice-surface{filter:brightness(.38)}
}
#hair-gallery[open][data-material] .hair-filters .mineral-choice:active{transform:translateY(-1px) scale(.985)}
/* Catalogue density is independent from the number of products actually received. */
#hair-gallery[open][data-material] .inventory-state>.prepared-grid,#hair-gallery[open][data-material] .saved-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 16px;align-items:start}
#hair-gallery[data-display-view=catalogue] .inventory-heading,#hair-gallery[data-display-view=catalogue] .inventory-intro,#hair-gallery[data-display-view=catalogue] .received-access{display:none}
#hair-gallery[open][data-material][data-display-view=catalogue] .inventory-notice{font-size:12px;line-height:1.5;margin:0 0 16px;padding:10px 14px;display:inline-block}
#hair-gallery[open][data-material] .prepared-grid .prepared-photo.has-reference{height:auto;min-height:0;aspect-ratio:1/1;max-height:none;padding:0;background:var(--material-photo);overflow:hidden}
#hair-gallery[open][data-material] .prepared-grid .reference-photo{display:block;width:100%;height:100%;filter:none;mix-blend-mode:normal}
#hair-gallery[open][data-material] .prepared-grid .prepared-caption{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:14px 12px 10px;background:var(--material-panel);color:var(--material-ink)}
#hair-gallery[open][data-material] .prepared-grid .prepared-caption h4,#hair-gallery[open][data-material] .prepared-grid .prepared-caption h3{grid-column:1;grid-row:auto;font:500 16px/1.4 Manrope,Arial,sans-serif;letter-spacing:0;margin:0;max-width:none;color:var(--material-ink)}
#hair-gallery[open][data-material] .prepared-grid .prepared-name-note{font:12px/1.5 Manrope,Arial,sans-serif;grid-column:1;grid-row:auto;max-width:none;margin:0;color:var(--material-muted)}
#hair-gallery[open][data-material] .prepared-grid .prepared-open{grid-column:1;grid-row:auto;justify-content:space-between;display:flex;gap:8px;padding:5px 0;min-height:36px;font:12px/1.5 Manrope,Arial,sans-serif}
#hair-gallery .prepared-grid .prepared-open svg{width:17px;height:17px}
#hair-gallery[open][data-material] .prepared-grid .prepared-favorite{top:8px;right:8px;width:36px;height:36px;min-height:36px;padding:9px;border:0}
#hair-gallery .prepared-photo-open{outline-offset:4px}
#hair-gallery .prepared-photo-open:hover{outline:1px solid var(--material-accent)}
/* The fracture layer never covers product photography, text or controls. */
#hair-gallery>.mineral-fracture{position:absolute;left:0;z-index:1;pointer-events:none;overflow:hidden;contain:layout paint;perspective:1100px}
.mineral-fragment{position:absolute;display:block;transform-origin:center;backface-visibility:hidden;will-change:transform,opacity;background-repeat:no-repeat;box-shadow:none}
.mineral-fragment::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#fff1d512,transparent 35%,#06050335);opacity:.7}
.mineral-fracture-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#f4dfb5;stroke-width:.7;pointer-events:none}
@media(max-width:1100px) and (min-width:701px){
 #hair-gallery[open][data-material] .inventory-state>.prepared-grid,#hair-gallery[open][data-material] .saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 #hair-gallery[data-display-view=catalogue] .vitrine-content{padding:0 12px 20px}
 #hair-gallery[open][data-material][data-display-view=catalogue] .vitrine-heading{padding:12px 10px 14px;margin-bottom:14px}
 #hair-gallery[open][data-material][data-display-view=catalogue] .dialog-top{padding-right:48px;min-height:44px}
 #hair-gallery[open][data-material][data-display-view=catalogue] .dialog-top h2{font-size:30px;line-height:1.15}
 #hair-gallery[data-display-view=catalogue] .saved-tools{position:static;justify-content:flex-end;gap:18px;min-height:36px;margin-top:8px}
 #hair-gallery[data-display-view=catalogue] .saved-tools button{min-height:36px;font-size:12px}
 #hair-gallery[open][data-material] .hair-filters{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding-top:0}
 #hair-gallery[open][data-material] .hair-filters .mineral-choice{min-height:92px;padding:10px}
 #hair-gallery[open][data-material] .hair-filters .mineral-choice[data-hair-filter=all]{grid-column:1/-1;min-height:40px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:6px 10px;margin-bottom:0}
 #hair-gallery .mineral-choice-name{font-size:14px;margin-top:20px}
 #hair-gallery .mineral-choice-note{font-size:11px;line-height:1.4}
 #hair-gallery[open][data-material] .inventory-state>.prepared-grid,#hair-gallery[open][data-material] .saved-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
 #hair-gallery[open][data-material] .prepared-grid .prepared-photo.has-reference{aspect-ratio:3/4}
 #hair-gallery[open][data-material] .prepared-grid .prepared-caption{padding:12px 10px 8px}
 #hair-gallery[open][data-material] .prepared-grid .prepared-caption h4{font-size:15px}
 #hair-gallery[open][data-material] .prepared-grid .prepared-name-note{font-size:11px}
 #hair-gallery[open][data-material] .prepared-grid .prepared-open{font-size:11px;min-height:44px}
 #hair-gallery[open][data-material] .prepared-grid .prepared-favorite{width:40px;height:40px;min-height:40px;top:4px;right:4px}
 #hair-gallery[open][data-material][data-display-view=catalogue] .inventory-notice{font-size:11px;padding:8px 10px;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
 #hair-gallery .mineral-choice,#hair-gallery .mineral-choice-surface,#hair-gallery .mineral-choice-shine{transition:none!important;transform:none!important}
 #hair-gallery>.mineral-fracture{display:none}
}
#hair-gallery[data-reduced=true] .mineral-choice,#hair-gallery[data-reduced=true] .mineral-choice-surface,#hair-gallery[data-reduced=true] .mineral-choice-shine{transition:none!important;transform:none!important}
#hair-gallery[data-reduced=true]>.mineral-fracture{display:none}
