:root{--ink:#402533;--green:#9b3166;--gold:#963b69;--cream:#fff7fa;--border:#ecd2df}
.header{background:#fff5fa}.header nav,.mobile-menu{color:var(--ink)}
.detail-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:clamp(24px,5vw,80px) 6%;background:#eee2df;color:var(--ink)}
.look{margin:0;grid-column:2;grid-row:1;background:#efc1d5;border-radius:48% 48% 5px 5px;overflow:hidden;width:min(100%,410px);justify-self:center}
.look img,.look svg{display:block;width:100%;aspect-ratio:4/4.5;object-fit:cover}
.detail-title{grid-column:1;grid-row:1}.detail-title p,.section-head p,.mini-card p,.branch-card p{color:#644f51}
.detail-title .crumb{background:#fff7f3}.btn.accent,.btn.dark{background:var(--green);color:white}
.section{max-width:1180px}.section[id]{scroll-margin-top:95px}.section+.section{border-top:1px solid var(--border)}
.mini-grid,.branch-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.mini-card,.branch-card{border-radius:5px;background:#fffafd;border-top:3px solid #c16b97}
.mini-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.gallery-tile{cursor:zoom-in;color:var(--ink);padding:0;text-align:start}.gallery-tile img{height:auto;aspect-ratio:3/4}
dialog{background:var(--cream);border:0;border-radius:10px;max-width:92vw}dialog img{display:block;max-width:82vw;max-height:72vh;object-fit:contain}dialog::backdrop{background:#211620ce}
.footer{background:#622642}.footer span,.footer a{color:#e8d8dc}
@media(max-width:650px){.detail-hero{grid-template-columns:1fr;gap:18px}.look,.detail-title{grid-column:1;grid-row:auto}.look{width:min(80%,280px)}.look img,.look svg{aspect-ratio:4/3}.header nav{gap:14px}.brand-mark{flex-shrink:0}}
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:30;background:white;color:#402533;padding:8px 16px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
:focus-visible,.search:focus-within{outline:3px solid #9b3166;outline-offset:3px}
.header nav a,.mobile-menu{min-height:44px;display:inline-flex;align-items:center}
.mobile-menu{display:none;min-width:44px;justify-content:center}
#welcome,#app{scroll-margin-top:90px}
@media(max-width:650px){.mobile-menu{display:inline-flex}.header nav{gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}
.footer .footer-directory{display:inline-flex;align-items:center;gap:1em;min-height:44px;padding:6px 18px;border:1px solid #b897a7;border-radius:8px;color:#fff;font-size:14px}.footer .footer-directory:hover,.footer .footer-directory:focus-visible{background:#fff4f7;color:#622642}.footer-directory span{color:inherit}
main{background-color:#fff7fa;background-image:repeating-linear-gradient(0deg,transparent 0 4px,rgba(116,77,68,.022) 4px 5px),repeating-linear-gradient(90deg,transparent 0 5px,rgba(116,77,68,.018) 5px 6px)}
.detail-hero{background-color:#fae6ef;background-image:url("/assets/seams.svg"),radial-gradient(ellipse at 20% 55%,#efb8d1,transparent 58%),linear-gradient(110deg,#f7d6e5,#fff4f9);background-size:cover;background-position:center}

.look svg rect{fill:#efd2df}.look svg circle{fill:#f8e5ed}.look svg>path{fill:#913c69}.header nav a:hover{color:#92305f}

.shop-banner h1{margin:0;line-height:0}.shop-banner img{display:block;width:100%;height:auto}.shop-banner .button-row{justify-content:center;padding:16px;background:#fff5fa}.shop-banner .btn{min-height:44px}
.about-shop{max-width:920px}.about-shop h2{font-size:clamp(26px,4vw,38px)}.about-shop h3{font-size:24px;margin:28px 0 6px}.about-shop .about-lead{color:#963b69;font-weight:700}.about-intro{white-space:pre-line}.about-shop li{margin-block:6px}.about-shop ul{padding-inline-start:1.4em}
#photoViewer img{touch-action:pan-y pinch-zoom;user-select:none;margin:auto;max-height:min(70vh,calc(100dvh - 140px))}#photoNav:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}#photoPosition{direction:ltr}

/* Main navigation: right aligned with a subtle logo watermark. */
.shop-header .brand{order:2;font-size:clamp(15px,1.5vw,21px);min-width:0}
.shop-header nav{order:1;gap:0;flex-shrink:0}
.shop-header nav a{position:relative;isolation:isolate;padding:8px 17px;justify-content:center;border-radius:5px;transition:background-color .2s,color .2s}
.shop-header nav a+a{border-inline-start:1px solid #e5bfd2}
.shop-header nav a::before{content:"";position:absolute;inset:2px;background:url('/assets/alsanaa-logo.png') center/contain no-repeat;opacity:0;z-index:-1;pointer-events:none;transition:opacity .2s}
.shop-header nav a:hover,.shop-header nav a:focus-visible{background:#f7e3ed;color:#81234f}
.shop-header nav a:hover::before,.shop-header nav a:focus-visible::before{opacity:.13}
.shop-header .mobile-menu{order:0}
@media(min-width:651px) and (max-width:1000px){.shop-header{padding-inline:3%;gap:12px}.shop-header nav a{padding-inline:10px}.shop-header .brand{max-width:40%;font-size:16px}.shop-header .brand img{flex-shrink:0}}
@media(max-width:650px){.shop-header .brand{font-size:15px}.shop-header nav a{justify-content:flex-start;padding-inline:18px}.shop-header nav a+a{border-inline-start:0;border-block-start:1px solid #ecd2df}.shop-header nav a::before{background-position:right center}}
@media(prefers-reduced-motion:reduce){.shop-header nav a,.shop-header nav a::before{transition:none}}

.shop-header{justify-content:flex-start}.shop-header nav a::before{background-image:none}

.shop-title-bar{background:#fff5fa;color:#92305f;text-align:center;padding:12px 16px 8px;border-bottom:1px solid #ecd2df;font-family:Amiri,serif;font-size:clamp(22px,4vw,30px);font-weight:700;line-height:1.6}.shop-title-bar a{display:inline-block;max-width:100%;overflow-wrap:break-word}

.shop-header-title{order:2;margin-inline-start:auto;color:#92305f;font-family:Amiri,serif;font-weight:700;font-size:clamp(18px,2.3vw,24px);line-height:1.5}.shop-header .mobile-menu{flex-shrink:0}@media(max-width:650px){.shop-header{gap:12px}.shop-header-title{order:1;margin-inline-start:0;font-size:clamp(17px,5vw,22px)}}

.model-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}.model-filter{border:1px solid #dfb5c9;border-radius:24px;background:#fff5fa;color:#92305f;padding:8px 18px;min-height:44px;font:inherit;cursor:pointer}.model-filter.active,.model-filter:hover{background:#9b3166;color:#fff}.model-card[hidden],#noCategoryModels[hidden]{display:none}

/* Collapsible right-hand navigation on every screen size. */
.shop-header .mobile-menu{display:inline-flex;order:0}
.shop-header-title{order:1;margin-inline-start:0}
body.navigation-open{overflow:hidden}
.navigation-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(340px,88vw);max-width:88vw;height:100dvh;max-height:100dvh;padding:24px;border:0;border-inline-end:1px solid #ecd2df;background:#fff5fa;color:#6e284b;box-shadow:-12px 0 40px #48203926}
.navigation-drawer::backdrop{background:#30162566}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid #e5bfd2}
.drawer-heading button{border:0;background:transparent;color:inherit;font-size:32px;width:44px;height:44px;line-height:1}
.navigation-drawer nav{display:flex;flex-direction:column;padding-top:16px;gap:6px}
.navigation-drawer nav a{display:block;padding:14px 18px;border-bottom:1px solid #ecd2df;border-radius:8px;font-size:18px;position:relative;isolation:isolate}
.navigation-drawer nav a:hover,.navigation-drawer nav a:focus-visible{background:#f5dfeb;color:#81234f}
.navigation-drawer nav a::before{content:"";position:absolute;inset:4px;background:url('/assets/alsanaa-logo.png') left center/contain no-repeat;opacity:0;z-index:-1;pointer-events:none}
.navigation-drawer nav a:hover::before,.navigation-drawer nav a:focus-visible::before{opacity:.12}
.navigation-drawer[open]{animation:drawer-in .2s ease-out}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.navigation-drawer[open]{animation:none}}

.models-menu summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:14px 18px;border-bottom:1px solid #ecd2df;border-radius:8px;font-size:18px;list-style:none}
.models-menu summary::-webkit-details-marker{display:none}
.models-menu summary:hover,.models-menu summary:focus-visible{background:#f5dfeb;color:#81234f}
.models-menu summary span{transition:transform .2s}
.models-menu[open] summary span{transform:rotate(180deg)}
.models-submenu{margin:6px 12px 10px 0;padding-inline-start:10px;border-inline-start:2px solid #dda1bf;background:#fffafd;border-radius:8px}
.navigation-drawer .models-submenu a{font-size:16px;padding:11px 12px}