/* ROZY editorial makeup navigation — compact mobile-first categories */
.makeup-explore{margin:24px 0 35px;padding-top:10px}
.makeup-explore__heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:17px}
.makeup-explore__heading h2{font-size:clamp(24px,3vw,38px);line-height:1.18;letter-spacing:-.035em;font-weight:600;margin:5px 0 0}
.makeup-explore__eyebrow{font:600 10px/1.5 var(--text, sans-serif);letter-spacing:.18em;color:#967385}
.makeup-explore__all{font-size:12px;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.makeup-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.makeup-area{position:relative;display:flex;flex-direction:column;min-width:0;min-height:245px;overflow:hidden;border:1px solid #eee2e0;border-radius:10px;text-decoration:none;color:#392e33;background:#f7f0ee;transition:background .18s,border-color .18s,transform .18s}
.makeup-area:nth-child(4n + 2){background:#f5eae9}
.makeup-area:nth-child(4n + 3){background:#f0e8e6}
.makeup-area:nth-child(4n + 4){background:#f8f4f1}
.makeup-area:hover,.makeup-area:focus-visible{transform:translateY(-2px);background:#fff;border-color:#ae8a93}
.makeup-area:focus-visible{outline:2px solid #9e6578;outline-offset:2px}
.makeup-area__number{position:absolute;inset-block-start:13px;inset-inline-start:15px;font:600 10px/1 var(--text,sans-serif);color:#997d86;z-index:2}
.makeup-area__visual{height:148px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}
.makeup-area__visual::after{content:'';position:absolute;bottom:2px;width:65%;height:1px;background:linear-gradient(90deg,transparent,#d6bfc2,transparent)}
.makeup-area__visual img{max-width:82%;width:auto;height:120px;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 9px 10px rgba(65,40,40,.13));transition:transform .28s}
.makeup-area:hover .makeup-area__visual img{transform:scale(1.065)}
.makeup-area__monogram{font:500 clamp(24px,2.5vw,35px)/1.1 var(--display,serif);letter-spacing:-.055em;color:#b89fa6;opacity:.85}
.makeup-area__info{display:flex;flex-direction:column;flex:1;padding:13px 15px 13px;gap:5px}
.makeup-area__title{font-size:clamp(15px,1.6vw,20px);line-height:1.3;font-weight:600}
.makeup-area__desc{font-size:11px;line-height:1.45;color:#806b73;min-height:2em}
.makeup-area__footer{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:auto;padding-top:7px;color:#7c6069;font-size:11px}
.makeup-area__footer [aria-hidden]{font-size:16px}
.makeup-area--current{border-color:#845466!important;background:#fff!important;box-shadow:inset 0 -3px #845466}
.makeup-areas--compact{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.makeup-area--compact{min-height:135px;border-radius:7px}
.makeup-area--compact .makeup-area__number{inset-block-start:9px;inset-inline-start:10px;font-size:9px}
.makeup-area--compact .makeup-area__visual{height:78px}
.makeup-area--compact .makeup-area__visual img{height:67px}
.makeup-area--compact .makeup-area__visual::after{display:none}
.makeup-area--compact .makeup-area__monogram{font-size:17px}
.makeup-area--compact .makeup-area__info{padding:8px 9px 10px}
.makeup-area--compact .makeup-area__title{font-size:12px;line-height:1.4}
.makeup-area--compact .makeup-area__footer{font-size:10px}
.makeup-zone-page .pagehead{padding-bottom:10px}
.makeup-shelf{padding-bottom:48px}
.makeup-shelf__heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:15px 0}
.makeup-shelf__heading h2,.makeup-all-title{font-size:clamp(20px,2.3vw,30px);font-weight:600;letter-spacing:-.025em;margin:0}
.makeup-all-title{margin:8px 0 18px}
.makeup-shelf__heading p{font-size:12px;color:#8e7880;margin:0}
.makeup-shelf__empty{padding:22px 0;color:#756771;font-size:13px}
:root[lang="ar"] .makeup-explore__eyebrow{letter-spacing:0;font-size:12px}
:root[lang="ar"] .makeup-area__title{font-size:clamp(16px,1.6vw,21px)}
:root[lang="ar"] .makeup-area--compact .makeup-area__title{font-size:13px}
@media(max-width:1050px){
 .makeup-areas--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
 .makeup-areas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
 .makeup-explore{margin:16px 0 24px}
 .makeup-explore__heading{align-items:start;margin-bottom:12px}
 .makeup-explore__heading h2{font-size:23px;max-width:260px}
 .makeup-explore__all{font-size:11px;margin-top:8px}
 .makeup-areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .makeup-areas--compact{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(126px,38vw);grid-template-columns:none;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;padding:2px 3px 10px;scrollbar-width:thin}
 .makeup-areas--compact .makeup-area{scroll-snap-align:start}
 .makeup-area{min-height:183px;border-radius:8px}
 .makeup-area__visual{height:105px}
 .makeup-area__visual img{height:90px}
 .makeup-area__info{padding:8px 10px 10px;gap:3px}
 .makeup-area__title{font-size:16px}
 .makeup-area__desc{font-size:10px;line-height:1.35}
 .makeup-area__footer{font-size:10px;padding-top:5px}
 .makeup-area__number{top:9px;inset-inline-start:10px}
 .makeup-area--compact{min-height:95px;display:grid;grid-template-columns:49px minmax(0,1fr);align-items:center}
 .makeup-area--compact .makeup-area__visual{height:88px;width:49px}
 .makeup-area--compact .makeup-area__visual img{height:58px;max-width:92%}
 .makeup-area--compact .makeup-area__number{display:none}
 .makeup-area--compact .makeup-area__info{min-height:88px;justify-content:center;padding:9px 8px 9px 0}
 :root[lang="ar"] .makeup-area--compact .makeup-area__info{padding:9px 0 9px 8px}
 .makeup-area--compact .makeup-area__title,:root[lang="ar"] .makeup-area--compact .makeup-area__title{font-size:12.5px}
 .makeup-shelf__heading{align-items:start;flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){.makeup-area,.makeup-area__visual img{transition:none}}