/* One glass finish and one drawn arrow throughout IDOL HAIR. */
:root{--glass-arrow-size:32px;--glass-arrow-line:#8c7350;--glass-arrow-fill:linear-gradient(145deg,#ffffff80 0%,#ffffff20 52%,#c5b39322 100%);--glass-arrow-shadow:inset 0 1px 1px #ffffffc0,inset 0 -1px 2px #ffffff30,0 4px 12px #211a1615;--glass-arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.glass-mark,.glass-mark-right,.glass-mark-left,.glass-mark-down,.course-expand{display:inline-flex;position:relative;align-items:center;justify-content:center;flex:0 0 auto;width:var(--glass-arrow-size);height:var(--glass-arrow-size);padding:0;border:1px solid #ffffffa0;border-radius:50%;background:var(--glass-arrow-fill);box-shadow:var(--glass-arrow-shadow);vertical-align:middle;color:var(--glass-arrow-line);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);transition:box-shadow .2s,background .2s}
.glass-mark:before,.glass-mark-right:before,.glass-mark-left:before,.glass-mark-down:before,.course-expand:before{content:'';position:absolute;inset:0;margin:auto;width:20px;height:20px;left:0;top:0;background:currentColor;clip-path:none;-webkit-mask:var(--glass-arrow-mask) center/contain no-repeat;mask:var(--glass-arrow-mask) center/contain no-repeat;transform:rotate(-45deg)}
.glass-mark-right:before{transform:none}.glass-mark-left:before{transform:rotate(180deg)}.glass-mark-down:before,.course-expand:before{transform:rotate(90deg)}
.course-expand:after,.course-day[open] .course-expand:after{content:none}
.course-day[open] .course-expand:before{transform:rotate(-90deg)}
.navigation-menu,.top,.service-tile,.brand-hero{--glass-arrow-line:#eadbc3;--glass-arrow-fill:linear-gradient(145deg,#ffffff30,#ffffff08 60%,#c5b39318);--glass-arrow-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 2px #ffffff14,0 4px 14px #0002}
.navigation-item>.glass-mark,.luxury-primary-links a>.glass-mark{width:32px;height:32px;color:var(--glass-arrow-line)}
.top nav .glass-mark-down{width:24px;height:24px}.top nav .glass-mark-down:before{width:17px;height:17px}
.top [aria-expanded=true]>.glass-mark-down:before{transform:rotate(-90deg)}
.tile-action .glass-mark{width:34px;height:34px}.tile-action .glass-mark:before{left:0;top:0}
.contact-socials a{display:inline-flex;align-items:center;gap:12px}.location-action{display:inline-flex;align-items:center;gap:10px}
.hub-scroll-controls button{width:54px;height:54px;padding:0;border-radius:50%;background:var(--glass-arrow-fill)!important;border:1px solid #ffffffa0!important;box-shadow:var(--glass-arrow-shadow);color:var(--glass-arrow-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hub-scroll-controls button>.glass-mark-left,.hub-scroll-controls button>.glass-mark-right,.float-wa>.glass-mark{width:100%;height:100%;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit}
.hub-scroll-controls button span:before{width:25px;height:25px}.float-wa>.glass-mark:before{width:25px;height:25px}
a:hover .glass-mark,button:hover>.glass-mark,.navigation-item:hover>.glass-mark{box-shadow:inset 0 1px 2px #ffffffc0,0 5px 16px #b49b7330}
/* Native disclosure triangles use the same glass arrow. */
.salon-films>summary,.course-slide-gallery>summary,.mini-hair-prices>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}
.salon-films>summary::-webkit-details-marker,.course-slide-gallery>summary::-webkit-details-marker,.mini-hair-prices>summary::-webkit-details-marker{display:none}
.salon-films>summary:after,.course-slide-gallery>summary:after,.mini-hair-prices>summary:after{content:'';flex:0 0 32px;width:32px;height:32px;border:1px solid #ffffffa0;border-radius:50%;box-shadow:var(--glass-arrow-shadow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 9v14m-6-6 6 6 6-6' fill='none' stroke='%238c7350' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--glass-arrow-fill);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.salon-films[open]>summary:after,.course-slide-gallery[open]>summary:after,.mini-hair-prices[open]>summary:after{transform:rotate(180deg)}
@media(max-width:760px){.hub-scroll-controls button{width:44px;height:44px}.navigation-item>.glass-mark{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.glass-mark,.glass-mark-right,.glass-mark-left,.glass-mark-down{transition:none}}
#home .hub-scroll-controls{--glass-arrow-line:#eadbc3;--glass-arrow-fill:linear-gradient(145deg,#ffffff30,#ffffff08 60%,#c5b39318)}
/* Keep native select behaviour, with the same drawn disclosure arrow. */
.field select,.fields select{appearance:none;-webkit-appearance:none;padding-inline-end:48px;background-repeat:no-repeat;background-position:right 12px center;background-size:28px 28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop stop-color='white' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23c5b393' stop-opacity='.12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='15' fill='url(%23g)' stroke='white' stroke-opacity='.8'/%3E%3Cpath d='M16 9v14m-6-6 6 6 6-6' fill='none' stroke='%238c7350' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[dir=rtl] .field select,html[dir=rtl] .fields select{background-position:left 12px center}
@media(forced-colors:active){.field select,.fields select{appearance:auto;background-image:none}.glass-mark:before,.glass-mark-right:before,.glass-mark-left:before,.glass-mark-down:before{background:ButtonText}}
