.cosmetic-intro{position:relative;isolation:isolate;overflow:hidden;background:#13242a;border:1px solid var(--line);min-height:290px;padding:38px;margin:30px 0}.cosmetic-intro>div:first-child{position:relative;z-index:2;max-width:55%}.cosmetic-intro h2{font-size:32px;line-height:1.4;font-weight:500;margin:8px 0 14px}.cosmetic-intro p:not(.eyebrow){font-size:12px;color:#b5c7c6;line-height:1.9}.cosmetic-intro span{font-size:11px;color:var(--accent)}.cosmetic-intro>img{position:absolute;right:0;top:0;width:60%;height:100%;object-fit:cover;z-index:0;opacity:.65;mask-image:linear-gradient(90deg,transparent,#000 30%)}.cosmetic-intro-caption{position:absolute;bottom:18px;right:22px;letter-spacing:2px;font-size:8px;color:#c3d5d0}.cosmetic-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.cosmetic-categories button{position:relative;overflow:hidden;min-height:105px;text-align:left;padding:20px 16px;border-radius:0;background:#142129}.cosmetic-categories button img{position:absolute;right:0;top:0;width:60%;height:100%;object-fit:cover;opacity:.22;mask-image:linear-gradient(90deg,transparent,#000)}.cosmetic-categories strong,.cosmetic-categories small,.cosmetic-categories span{position:relative;display:block}.cosmetic-categories strong{font-size:13px;font-weight:500}.cosmetic-categories small{margin-top:9px;color:var(--muted);font-size:10px}.cosmetic-categories span{font-size:8px;letter-spacing:1px;margin-bottom:10px;color:var(--accent)}.cosmetic-categories button.active{border-color:var(--accent);background:#1a3434}.cosmetic-categories button.active strong{color:var(--accent)}#cosmetic-filters{display:grid;grid-template-columns:2fr 1.4fr 1.2fr 1fr 1fr 1fr auto;align-items:end;gap:12px}#cosmetic-filters label{font-size:10px}#cosmetic-filters input,#cosmetic-filters select{font-size:11px}#cosmetic-filters button{margin-bottom:16px}.cosmetic-context{display:flex;align-items:center;gap:25px;justify-content:space-between;margin:15px 0 25px;padding:15px 18px;border-left:2px solid #819e92;background:#122127;color:var(--muted)}.cosmetic-context p{font-size:10px;line-height:1.9;margin:0;max-width:800px}.cosmetic-context span{font-size:9px;white-space:nowrap}.cosmetic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.cosmetic-card{border:1px solid var(--line);background:#111e25;display:block;min-width:0;transition:border-color .2s,transform .2s}.cosmetic-card:hover{border-color:#85b3a5;transform:translateY(-3px)}.cosmetic-picture{position:relative;aspect-ratio:1.35;background:radial-gradient(ellipse at center,#263943,#111b22);overflow:hidden}.cosmetic-picture>img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.cosmetic-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:#9bb4b5;font-size:14px}.cosmetic-fallback small{display:block;margin-top:14px;font-size:9px;color:var(--muted)}.cosmetic-kind{position:absolute;left:10px;bottom:10px;z-index:2;background:#0b151de6;border:1px solid #6d898255;font-size:9px;color:#bfd7cc;padding:5px 8px}.cosmetic-card-body{padding:18px}.cosmetic-card-body .eyebrow{font-size:8px;margin:0 0 8px}.cosmetic-card-body h3{font-weight:500;font-size:15px;line-height:1.5;margin:0;overflow-wrap:anywhere}.cosmetic-card-body .english{font-size:10px;color:var(--muted);margin:7px 0}.cosmetic-family{font-size:10px;color:#a8bdbb;overflow-wrap:anywhere;margin:12px 0}.cosmetic-tags{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}.cosmetic-tags span{border:1px solid #455c58;color:#9bbbad;padding:2px 5px;font-size:8px}.cosmetic-card-tail{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font-size:9px;color:var(--muted)}.cosmetic-card-tail b{font-weight:500;color:var(--accent);white-space:nowrap}.cosmetics-callout{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;margin-bottom:25px;border:1px solid #3b5b53;background:#132725}.cosmetics-callout strong{font-size:14px;font-weight:500;color:var(--accent)}.cosmetics-callout p{font-size:11px;color:var(--muted);margin:6px 0 0}.cosmetics-callout>a{font-size:12px;white-space:nowrap;color:var(--accent)}.appearance-facts{display:flex;gap:10px;flex-wrap:wrap}.appearance-facts span{font-size:11px;background:#18302d;padding:7px 12px;color:var(--accent)}.appearance-viewer{margin:24px 0}.appearance-viewer>img{width:100%;max-height:480px;object-fit:contain;background:#101d24}.appearance-viewer>div{display:flex;gap:8px;overflow:auto;margin-top:12px}.appearance-viewer button{padding:0;width:88px;min-width:88px;height:65px;border-radius:0;background:#14232b}.appearance-viewer button img{width:100%;height:100%;object-fit:contain}.cosmetic-related{grid-template-columns:repeat(2,minmax(0,1fr))}.cosmetic-related .cosmetic-picture{aspect-ratio:1.6}.cosmetics-page .library-tabs{flex-wrap:wrap}@media(max-width:1100px){.cosmetic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#cosmetic-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.cosmetic-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.cosmetic-related{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cosmetic-intro{padding:25px;min-height:320px}.cosmetic-intro>div:first-child{max-width:100%}.cosmetic-intro h2{font-size:26px}.cosmetic-intro>img{width:100%;opacity:.22}.cosmetic-categories{grid-template-columns:repeat(2,minmax(0,1fr))}#cosmetic-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.cosmetic-context{display:block}.cosmetic-context span{display:block;margin-top:10px}.cosmetic-card-body{padding:12px}.cosmetic-card-body h3{font-size:13px}.cosmetics-callout{align-items:start;flex-direction:column}.cosmetic-card-tail{flex-direction:column}.cosmetic-related{grid-template-columns:1fr 1fr}}@media(max-width:380px){.cosmetic-grid{grid-template-columns:1fr}}

.cosmetic-picture>img+.cosmetic-fallback{display:none}.cosmetic-picture>img[style*="display: none"]+.cosmetic-fallback{display:flex}

.cosmetic-related{display:flex;overflow-x:auto;gap:14px;padding-bottom:12px;scroll-snap-type:x mandatory}.cosmetic-related>.cosmetic-card{flex:0 0 230px;scroll-snap-align:start}
.cosmetic-categories button{display:block}