/* Health & Beauty V19 VIP accompaniment; opt-in page classes */
.hb-vip-home,.hb-vip-compact,.hb-vip-detail-page{font-family:system-ui,Arial,sans-serif;color:#f8f6f2}
.hb-vip-wrap{max-width:1140px;margin-inline:auto}
.hb-vip-home{padding:clamp(2.5rem,5vw,5rem) max(20px,calc((100vw - 1140px)/2));background:radial-gradient(ellipse at 90% 12%,#28446b 0,transparent 55%),linear-gradient(120deg,#071629,#102c4b 70%,#08192e);color:white}
.hb-vip-eyebrow{font-size:.82rem!important;font-weight:800!important;letter-spacing:.09em;color:#eed08f!important;text-transform:uppercase;margin:0 0 .65rem}
.hb-vip-home h2,.hb-vip-compact h2,.hb-vip-detail-page h1{font-family:Georgia,serif!important;color:#fff!important;line-height:1.17!important;font-weight:700!important;margin:.35rem 0 1rem}
.hb-vip-home h2,.hb-vip-detail-page h1{font-size:clamp(2.15rem,4.2vw,3.5rem)!important}
.hb-vip-lead{font-size:clamp(1rem,1.35vw,1.13rem)!important;line-height:1.9!important;color:#e7ebf4!important;max-width:1050px}
.hb-vip-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;list-style:none!important;margin:2rem 0!important;padding:0!important}
.hb-vip-steps li{display:flex;align-items:flex-start;gap:.75rem;padding:1.2rem;border:1px solid #8f744c;border-radius:16px;background:rgba(255,255,255,.075);min-width:0}
.hb-vip-steps li span{font:700 1.4rem/1 Georgia,serif;color:#e4c286}
.hb-vip-steps li strong{font:600 1rem/1.5 system-ui,sans-serif;color:white}
.hb-vip-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:1.25rem 0}
.hb-vip-gold,.hb-vip-outline{display:inline-flex!important;min-height:46px;box-sizing:border-box;justify-content:center;align-items:center;border-radius:99px;padding:12px 20px!important;font:700 .93rem/1.3 system-ui,sans-serif;text-align:center;text-decoration:none!important}
.hb-vip-gold{color:#061627!important;background:linear-gradient(125deg,#bc8f38,#f5dfa9);box-shadow:0 9px 23px #0004}
.hb-vip-outline{color:#f4d48d!important;background:transparent;border:1px solid #d3ae69}
.hb-vip-note{font-size:.85rem!important;line-height:1.55!important;color:#c3d0e0!important;margin:1.2rem 0 0}
.hb-vip-hero-line{font:700 .89rem/1.6 system-ui,sans-serif!important;color:#f4d48d!important;margin:.7rem 0 1rem!important}
.hb-vip-compact{padding:clamp(1.3rem,3vw,2.2rem);margin:2.5rem auto;max-width:1140px;box-sizing:border-box;border:1px solid #ba9653;border-radius:20px;background:linear-gradient(125deg,#102b4b,#06182c);box-shadow:0 10px 30px #0002}
.hb-vip-compact h2{font-size:clamp(1.5rem,2.6vw,2.1rem)!important}
.hb-vip-compact p:not(.hb-vip-eyebrow){font:400 1rem/1.7 system-ui,sans-serif!important;color:#dbe7f3!important}
.hb-flagship-premium-stamp{display:inline-flex!important;gap:.65rem;align-items:center;flex-wrap:wrap;padding:.75rem 1.2rem;margin:.7rem 0 1.3rem;border:1px solid #e8c47c;border-radius:12px;background:linear-gradient(115deg,#081d33,#203957);box-shadow:0 6px 22px #0003;font:800 .84rem/1.4 system-ui,sans-serif;color:#fbe7b8!important;letter-spacing:.07em;text-transform:uppercase}
.hb-flagship-premium-stamp strong{font:700 clamp(1.1rem,2vw,1.7rem)/1.1 Georgia,serif;color:#ffe5a6!important;letter-spacing:0;text-transform:none}
.hb-flagship-premium-stamp .hb-flagship-star{color:#e7be6f;font-size:1.2rem}
.hb-flagship-premium-stamp + h1,.hb-detail-hero:has(.hb-flagship-premium-stamp) h1{font-size:clamp(2.1rem,4vw,3.35rem)!important;line-height:1.15!important;color:#fff!important;text-shadow:0 3px 14px #04162877;letter-spacing:-.018em}
.hb-exclusive-focus{border:2px solid #e5bd6c!important;box-shadow:0 8px 35px #a8805440!important}
.hb-exclusive-focus .hb-exclusive-card-badge{font-weight:900!important;letter-spacing:.09em!important;box-shadow:0 5px 14px #0003!important;background:linear-gradient(135deg,#8b601d,#f4d696)!important;color:#12233b!important}
.hb-exclusive-focus .ribbon h2{font-size:clamp(1.55rem,2.2vw,2.3rem)!important;color:#f5d68f!important;font-weight:900!important;text-shadow:0 2px 8px #0008}
.hb-wa-float{position:fixed!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;right:calc(18px + env(safe-area-inset-right,0px))!important;left:auto!important;z-index:2147483000!important;display:flex!important;visibility:visible!important;opacity:1!important;gap:8px;align-items:center;width:auto!important;height:auto!important;text-decoration:none!important;transform:none!important;background:none!important}
.hb-wa-circle{width:62px;height:62px;border:3px solid white;border-radius:50%;display:grid;place-items:center;background:#25d366;box-shadow:0 7px 25px #0007}
.hb-wa-icon{width:35px;height:35px;fill:white}
.hb-wa-label{font:700 .87rem system-ui,sans-serif;color:#fff;padding:.7rem;border-radius:30px;background:#102740;border:1px solid #d8ba7d;box-shadow:0 5px 20px #0005}
.hb-wa-float:hover .hb-wa-circle{transform:scale(1.07)}
.hb-wa-float:focus-visible,.hb-vip-gold:focus-visible,.hb-vip-outline:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hb-vip-detail-page{background:#08192c;margin:0}
.hb-vip-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(20px,calc((100vw - 1140px)/2));background:#07172b;border-bottom:1px solid #44506a}
.hb-vip-head a:first-child{display:flex;align-items:center;gap:.8rem;font:bold 1.25rem Georgia,serif;color:#fff;text-decoration:none}
.hb-vip-detail-hero{padding:4rem max(20px,calc((100vw - 1140px)/2));background:linear-gradient(130deg,#0d2a48,#091629)}
.hb-vip-detail-journey,.hb-vip-methods{padding:3rem max(20px,calc((100vw - 1140px)/2))}
.hb-vip-detail-journey h2,.hb-vip-methods h2{font:700 1.9rem Georgia,serif;color:#f5d58f}
.hb-vip-methods a{color:#f5d58f;display:inline-block;border:1px solid #ac8853;padding:.8rem;margin:.5rem;border-radius:12px;text-decoration:none}
.hb-vip-foot{text-align:center;padding:2rem;background:#0a1f39}.hb-vip-foot a{color:#f5d58f}
@media(max-width:840px){.hb-vip-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.hb-vip-steps{grid-template-columns:1fr}.hb-vip-home{padding:2rem 18px}.hb-wa-label{display:none}.hb-wa-circle{width:57px;height:57px}.hb-vip-actions>a{width:100%}.hb-vip-head{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.hb-wa-circle{transition:none}}

.hb-flagship-title{font:700 clamp(2.2rem,4vw,3.65rem)/1.13 Georgia,serif!important;color:#ffe5ae!important;text-shadow:0 3px 15px rgba(0,0,0,.4)!important;max-width:980px;letter-spacing:-.018em}
.hb-flagship-title::after{content:"";display:block;height:3px;width:min(225px,48%);margin:1.05rem 0;background:linear-gradient(90deg,#b98635,#ffdf94,#b98635);border-radius:5px;box-shadow:0 3px 12px rgba(245,196,98,.5)}

/* HB34 V19 MOBILE HEADER PARITY FIX: desktop identity, compact mobile alignment */
@media(max-width:570px){
.topbar:not(.hb-header) .wrap.header{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;min-width:0!important;align-items:center!important}
.topbar:not(.hb-header) .logo-link{min-width:0!important;flex:1 1 auto!important;gap:5px!important;overflow:hidden!important}
.topbar:not(.hb-header) .official-logo{width:clamp(43px,12vw,55px)!important;height:clamp(43px,12vw,55px)!important}
.topbar:not(.hb-header) .wordmark{font-size:clamp(14px,4.1vw,18px)!important;letter-spacing:-.35px!important;white-space:nowrap!important}
.topbar:not(.hb-header) .mobile-toggle{flex:0 0 37px!important;width:37px!important;min-width:37px!important;height:38px!important;padding:5px!important}
.topbar:not(.hb-header) .hb6-lang{flex:0 0 58px!important;min-width:0!important;max-width:58px!important;margin-left:0!important}
.topbar:not(.hb-header) .hb6-lang .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.topbar:not(.hb-header) .hb6-lang select{display:block!important;width:58px!important;min-width:0!important;max-width:58px!important;padding:7px 3px!important;border-radius:8px!important;font-size:12px!important;box-sizing:border-box!important}
.topbar:not(.hb-header) .head-action{flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;padding:6px!important;margin:0!important}
.topbar:not(.hb-header) .head-action svg{width:23px!important;height:23px!important}
}
@media(max-width:360px){
.topbar:not(.hb-header) .wrap.header{gap:3px!important}
.topbar:not(.hb-header) .hb6-lang{flex-basis:52px!important;max-width:52px!important}
.topbar:not(.hb-header) .hb6-lang select{width:52px!important;max-width:52px!important}
.topbar:not(.hb-header) .mobile-toggle{flex-basis:35px!important;width:35px!important;min-width:35px!important}
.topbar:not(.hb-header) .head-action{flex-basis:35px!important;width:35px!important;min-width:35px!important;max-width:35px!important}
}

/* HB34 V19 TABLET HEADER PARITY AND MOBILE TOUCH TARGETS */
@media(min-width:571px) and (max-width:875px){
.topbar:not(.hb-header) .wrap.header{flex-wrap:nowrap!important;gap:clamp(6px,1vw,11px)!important}
.topbar:not(.hb-header) .logo-link{min-width:0!important;flex:0 1 auto!important}
.topbar:not(.hb-header) .hb6-lang{flex:0 0 84px!important;min-width:0!important;max-width:84px!important;margin-left:auto!important}
.topbar:not(.hb-header) .hb6-lang label.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.topbar:not(.hb-header) .hb6-lang select{display:block!important;min-width:0!important;width:84px!important;max-width:84px!important;max-height:44px!important;font-size:12px!important;padding:9px 4px!important;box-sizing:border-box!important}
.topbar:not(.hb-header) .head-action{margin-left:0!important}
}
@media(min-width:571px) and (max-width:700px){
.topbar:not(.hb-header) .head-action{flex:0 0 44px!important;min-width:44px!important;max-width:44px!important;width:44px!important;height:44px!important;padding:7px!important}
.topbar:not(.hb-header) .head-action span{display:none!important}
.topbar:not(.hb-header) .head-action svg{width:24px!important;height:24px!important}
}
@media(max-width:570px){
.topbar:not(.hb-header) .mobile-toggle,.topbar:not(.hb-header) .head-action{height:44px!important;position:relative!important}
.topbar:not(.hb-header) .mobile-toggle::before,.topbar:not(.hb-header) .head-action::before{content:"";position:absolute;inset:-3px;pointer-events:auto}
.topbar:not(.hb-header) .hb6-lang select{height:44px!important;padding:10px 3px!important}
}
