/* Batch 1: shared usability rules; category art direction remains unchanged. */
:root{--taupe:#6d5c50;--gold-ink:#886324;--text-body:1rem;--text-small:.875rem;--space-sm:.75rem;--space-md:1.5rem}
html{text-size-adjust:100%;-webkit-text-size-adjust:100%}
img{max-width:100%}
button,a{-webkit-tap-highlight-color:rgba(182,139,70,.2);touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold-ink);outline-offset:4px}
.welcome button:focus-visible,.glass:focus-visible,.viewer-close:focus-visible,.viewer-controls button:focus-visible{outline-color:#fff}
.screen h1[tabindex],.screen h2[tabindex]{outline-offset:8px}
.shell,.catalog-card,.catalog-card-copy,.detail-content,.hydra-story,.catalog-head>div{min-width:0}
.catalog-card h4,.catalog-head h2,.detail-heading h3,.tier-heading h4{overflow-wrap:anywhere}
.icon-btn,.tier-tab,.primary,.secondary,.quiet-enter,.photo-expand{min-height:44px}
.icon-btn{min-width:44px}
.eyebrow,.step,.card-label small,.card-index,.appointment-eyebrow,.visit-label{font-size:var(--text-small)}
.service-top span,.service-top p,.includes small,.addon-heading>p,.addon-card p,.banner-copy small,.banner-price small,.tier-tab span,.tier-tab small,.tier-heading p,.tier-includes small,.tier-includes p,.ritual-summary,.ritual li p,.hydra-notes,.detail-note,.catalog-card small,.learn-more,.catalog-guide small,.catalog-guide p,.secondary-strip>span,.secondary-strip small,.primary,.secondary{font-size:var(--text-small);line-height:1.6}
.service-card>p,.includes p,.facial-intro>p:last-child,.catalog-card p,.catalog-head>p,.page-head>p,.detail-intro,.detail-block li,.detail-options p,.tier-detail>p{font-size:var(--text-body);line-height:1.7}
.price,.catalog-card strong,.detail-heading>strong,.tier-heading>strong,.addon-card span{color:var(--gold-ink)!important}
.service-card.dark .price{color:#e8c787!important}
.service-card.dark>p{color:#e8e0d9}
.addon-card span,.catalog-card strong{font-size:1rem}
.addon-card>div{flex-wrap:wrap;gap:.5rem}
.addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-credit{max-width:calc(100% - 160px)}
.appointment-dialog{overscroll-behavior:contain}
.welcome-copy{padding-bottom:max(80px,env(safe-area-inset-bottom))}
@media(max-width:750px){
 .detail-block li,.detail-options p,.catalog-card p,.catalog-card.has-photo p,.catalog[data-catalog="nails"] .catalog-card p{font-size:1rem}
 .catalog-card small,.catalog-card.has-photo small,.catalog[data-catalog="nails"] .catalog-card small{font-size:.875rem}
 .banner-desc,.hydra-title>p:last-child,.visit-location address,.visit-map{font-size:.9375rem;line-height:1.6}
 .catalog-card h4{max-width:100%}
 .catalog-card>.catalog-card-title{flex-wrap:wrap}
 .detail-photo-frame .photo-expand{bottom:14px}
 .detail-photo-frame .photo-credit{bottom:66px;max-width:calc(100% - 28px)}
 .appointment-actions,.welcome-actions{row-gap:var(--space-sm)}
}
@media(max-width:650px){
 .topbar{grid-template-columns:44px minmax(0,1fr);gap:var(--space-sm)}
 .topbar .step{display:none}
 .topbar .brand{justify-self:end}
 .tier-tab{min-height:52px}
 .service-card{padding:24px}
 .service-top{flex-wrap:wrap}
 .banner-copy{top:24px;transform:none;bottom:100px;overflow:visible}
 .banner-desc{max-width:100%}
 .hydra-banner{height:auto;min-height:430px}
 .hydra-banner>img{position:absolute;inset:0}
 .banner-copy{position:relative;top:auto;left:auto;right:auto;bottom:auto;padding:28px 24px 120px}
 .hydra-title h2{font-size:clamp(2.5rem,12vw,3.2rem);line-height:1.05}
 .hydra-title>p br{display:none}
 .hydra-title{bottom:5vh}
}
@media(max-width:380px){.addon-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
