@font-face{font-family:ManropeHX;src:url('/website_harmonyx_sa/static/src/v2/fonts/manrope-latin-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:ArabicHX;src:url('/website_harmonyx_sa/static/src/v2/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ArabicHX;src:url('/website_harmonyx_sa/static/src/v2/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:ArabicHX;src:url('/website_harmonyx_sa/static/src/v2/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--ink:#101518;--paper:#f9fafb;--muted:#687178;--line:#dfe3e5;--dark:#05090d;--gutter:clamp(24px,5vw,88px);--radius:20px;--header:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:ManropeHX,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a,input,select{font:inherit}button{cursor:pointer}.hxv2{overflow:clip}.hx-wrap{padding-inline:var(--gutter)}[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select{font-family:ArabicHX,Arial,sans-serif}
.hx-header{position:fixed;z-index:100;top:0;left:0;right:0;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--gutter);color:#fff;transition:background .22s,backdrop-filter .22s,color .22s}.hx-header.is-scrolled{background:rgba(6,10,14,.78);backdrop-filter:blur(16px)}.hx-header.is-light{color:var(--ink);background:rgba(249,250,251,.84)}.hx-brand{border:0;background:none;padding:0;width:154px;height:58px;display:flex;align-items:center;justify-content:flex-start}.hx-brand-logo{display:block;width:100%;height:56px;object-fit:contain;object-position:left center}.hx-brand-logo-on-light{display:none}.hx-header.is-light .hx-brand-logo-on-dark{display:none}.hx-header.is-light .hx-brand-logo-on-light{display:block}.hx-nav{display:flex;gap:36px}.hx-nav button,.hx-utils button,.hx-utils a{border:0;background:none;color:inherit;text-decoration:none;font-size:14px}.hx-utils{justify-self:end;display:flex;align-items:center;gap:12px}.hx-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:23px}.hx-menu{display:none;font-size:24px}.hx-mobile-menu{position:fixed;z-index:99;inset:0;background:rgba(5,9,13,.97);padding:110px 28px 40px;color:#fff}.hx-mobile-menu button,.hx-mobile-menu a{display:block;width:100%;padding:18px 0;border:0;border-bottom:1px solid #ffffff22;background:none;color:#fff;text-align:start;text-decoration:none;font-size:34px}
.hx-page{display:none;min-height:100vh}.hx-page.is-active{display:block}.hx-hero-track{height:140svh;background:#03070a}.hx-hero{position:sticky;top:0;height:100svh;min-height:740px;overflow:hidden;color:#fff}.hx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--hero-progress,0)*.035));transform-origin:center;will-change:transform}.hx-hero:after{content:"";position:absolute;inset:62% 0 0;background:linear-gradient(transparent,rgba(3,8,12,.66))}.hx-hero-title{position:absolute;z-index:2;top:12%;left:50%;transform:translateX(-50%) translateY(calc(var(--hero-progress,0)*18vh));margin:0;width:100%;text-align:center;font-size:clamp(74px,12.3vw,190px);line-height:.95;letter-spacing:-.067em;font-weight:720;white-space:nowrap}.hx-hero-copy{position:absolute;z-index:4;left:50%;bottom:7.5%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}.hx-hero-copy p{font-size:20px;margin:0 0 18px}.hx-btn{border:0;border-radius:999px;padding:14px 28px;min-height:48px;font-weight:650}.hx-btn-primary,.hx-btn-light{background:#fff;color:#0b1115}.hx-btn-dark{background:#0b1115;color:#fff}.hx-btn-outline{background:transparent;border:1px solid #161c20;color:#161c20}.hx-btn-outline-light{background:transparent;border:1px solid #ffffff88;color:#fff}.hx-text-action{margin-top:10px;border:0;background:none;color:#fff;padding:8px}.hx-edition{position:absolute;z-index:4;bottom:31px;left:var(--gutter);font-size:12px;letter-spacing:.09em}.hx-explore{position:absolute;z-index:4;right:var(--gutter);bottom:29px;border:0;background:none;color:#fff}.hx-eyebrow{font-size:12px;letter-spacing:.11em;font-weight:700;margin:0 0 20px}.hx-quiet{display:grid;grid-template-columns:1.6fr 1fr;padding-block:128px 112px;gap:60px}.hx-quiet h2{font-size:clamp(44px,5.4vw,78px);line-height:1.06;letter-spacing:-.05em;margin:0;max-width:920px}.hx-quiet .hx-eyebrow{grid-column:1/-1}.hx-aside{font-size:18px;line-height:1.65;max-width:380px;align-self:end;margin:0}
.hx-product-world{position:relative;margin-inline:12px;height:min(830px,92svh);min-height:680px;background:#eef2f4;overflow:hidden}.hx-world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.25) saturate(.7);opacity:.34}.hx-family-type{position:absolute;z-index:1;left:50%;top:8%;transform:translateX(-50%);font-size:26vw;line-height:.8;font-weight:800;letter-spacing:-.08em;color:#05080b}.hx-world-object{position:absolute;z-index:2;left:50%;top:13%;transform:translateX(-50%);height:68%;width:43%;display:grid;place-items:center}.hx-world-object img{width:100%;height:100%;object-fit:contain}.hx-world-copy{position:absolute;z-index:3;bottom:12%;left:5%;max-width:380px}.hx-world-copy h3{font-size:clamp(32px,3.3vw,48px);margin:4px 0 20px;letter-spacing:-.04em}.hx-family-tabs{position:absolute;z-index:4;left:50%;bottom:4%;transform:translateX(-50%);display:flex;gap:28px}.hx-family-tabs button{border:0;background:none;padding:8px 12px;font-weight:700;color:#777}.hx-family-tabs button.is-selected{color:#111;border-bottom:2px solid #111}
.hx-info{display:grid;grid-template-columns:1fr 1.15fr;gap:10vw;padding-block:112px 88px}.hx-info h2{font-size:clamp(42px,4.8vw,72px);letter-spacing:-.05em;line-height:1.08;margin:0}.hx-info-list article{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:42px 1fr;column-gap:20px}.hx-info-list article span{font-size:12px;color:var(--muted)}.hx-info-list h3{margin:0 0 8px;font-size:22px}.hx-info-list p{grid-column:2;margin:0;max-width:600px;color:var(--muted);line-height:1.65}.hx-tactile{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:7vw;padding-bottom:112px}.hx-tactile-copy h2{font-size:clamp(42px,4.8vw,72px);margin:0 0 18px;letter-spacing:-.05em}.hx-tactile-copy>p:last-of-type{font-size:19px;line-height:1.65;color:var(--muted)}.hx-tactile-tabs{display:flex;gap:28px;margin-top:30px}.hx-tactile-tabs button{border:0;background:none;padding:8px 0;color:#777}.hx-tactile-tabs .is-selected{color:#111;border-bottom:2px solid}.hx-tactile-stage{height:550px;background:#f0f2f3;display:grid;place-items:center;overflow:hidden}.hx-tactile-stage img{width:75%;height:85%;object-fit:contain;transition:transform .6s cubic-bezier(.22,1,.36,1)}.hx-tactile-stage:hover img{transform:scale(1.06)}
.hx-branding-tease{background:#05090d;color:#fff;padding-top:104px}.hx-branding-intro{max-width:1100px}.hx-branding-intro h2{font-size:clamp(52px,7vw,106px);letter-spacing:-.06em;line-height:.96;margin:0 0 24px}.hx-branding-intro p:last-child{font-size:19px;color:#c6ccd0;max-width:580px;line-height:1.6}.hx-compare{position:relative;margin-top:70px;height:min(780px,80svh);overflow:hidden;background-image:url('https://www.harmonyx.sa/web/image/170671-2719b9f8/HERO.webp');background-size:cover;background-position:center}.hx-compare:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,9,.35),rgba(4,7,9,.05))}.hx-compare-after{position:absolute;z-index:2;inset:0;width:52%;overflow:hidden;background:#9f7c51}.hx-compare-after img{width:100vw;height:100%;object-fit:cover;max-width:none}.hx-compare input{position:absolute;z-index:6;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.hx-compare-label{position:absolute;z-index:5;bottom:28px;font-size:14px}.hx-left{left:32px}.hx-right{right:32px}.hx-branding-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:38px 56px}.hx-branding-bottom p{font-size:21px;max-width:780px;line-height:1.5;margin:0}
.hx-business-home{background:#070b0f;color:#fff}.hx-business-intro{padding-top:112px;padding-bottom:48px}.hx-business-intro h2{font-size:clamp(48px,6vw,88px);margin:0;letter-spacing:-.055em;max-width:980px}.hx-business-cinema{position:relative;height:700px;overflow:hidden}.hx-business-cinema>img{width:100%;height:100%;object-fit:cover}.hx-business-cinema:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,8,.12),rgba(3,6,8,.05) 40%,rgba(3,6,8,.6))}.hx-business-copy{position:absolute;z-index:3;right:7%;bottom:70px;max-width:520px}.hx-business-copy h3{font-size:48px;line-height:1.05;margin:6px 0 20px;letter-spacing:-.04em}.hx-business-copy p:not(.hx-eyebrow){font-size:17px;line-height:1.6}.hx-segment-tabs{display:flex;justify-content:center;gap:34px;padding:22px var(--gutter) 50px;overflow:auto}.hx-segment-tabs button{border:0;background:none;color:#aaa;padding:12px 0;white-space:nowrap}.hx-segment-tabs button.is-selected{color:#fff;border-bottom:2px solid #fff}.hx-closing{min-height:560px;display:grid;align-items:center}.hx-closing h2{font-size:clamp(56px,7vw,112px);max-width:1120px;letter-spacing:-.065em;line-height:.96;margin:0 0 34px}.hx-actions{display:flex;gap:14px;flex-wrap:wrap}
.hx-page-top{padding-top:150px;padding-bottom:72px}.hx-page-top h1{font-size:clamp(58px,8vw,120px);letter-spacing:-.065em;line-height:.96;margin:0 0 30px;max-width:1100px}.hx-page-top>p:last-child{font-size:19px;line-height:1.65;color:var(--muted);max-width:720px}.hx-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:120px}.hx-shop-grid article{background:#fff;border:1px solid #eceff0}.hx-shop-image{height:580px;background:#f0f2f3;overflow:hidden}.hx-shop-image img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.22,1,.36,1)}.hx-shop-grid article:hover img{transform:scale(1.035)}.hx-shop-grid article>div:last-child{padding:24px}.hx-shop-grid p{font-size:12px;font-weight:700;letter-spacing:.08em}.hx-shop-grid h2{font-size:27px;margin:8px 0}.hx-shop-grid span{display:block;color:var(--muted);min-height:48px}.hx-shop-grid button{margin-top:18px;border:0;background:none;padding:0;font-weight:700}
.hx-product-hero{position:relative;height:960px;overflow:hidden}.hx-product-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.2);opacity:.25}.hx-product-copy{position:absolute;z-index:3;top:130px;left:var(--gutter)}.hx-product-copy>p:first-child{font-size:14px}.hx-product-copy h1{font-size:clamp(70px,8vw,126px);margin:10px 0 10px;letter-spacing:-.065em;line-height:.95}.hx-product-copy>p:last-child{font-size:19px}.hx-product-bottle{position:absolute;z-index:2;left:50%;top:15%;transform:translateX(-50%);width:46%;height:70%;object-fit:contain}.hx-product-config{position:absolute;z-index:4;right:var(--gutter);top:160px;width:min(390px,32vw);background:rgba(249,250,251,.88);backdrop-filter:blur(18px);padding:22px;border-radius:20px}.hx-config-row+ .hx-config-row{margin-top:18px}.hx-config-row>span{font-size:12px;color:#666;display:block;margin-bottom:9px}.hx-option-group{display:flex;gap:8px;flex-wrap:wrap}.hx-option-group button{border:1px solid #ccd1d4;background:#fff;border-radius:999px;padding:9px 14px}.hx-option-group button.is-selected{background:#101518;color:#fff;border-color:#101518}.hx-purchase-tray{position:absolute;z-index:5;bottom:28px;left:4%;right:4%;display:grid;grid-template-columns:1.4fr .7fr auto auto;align-items:center;gap:20px;background:rgba(249,250,251,.9);backdrop-filter:blur(20px);padding:18px 22px;border-radius:20px}.hx-purchase-tray>div:first-child span{display:block;color:#777;font-size:13px}.hx-tray-price{font-size:24px;font-weight:700}.hx-qty{display:flex;align-items:center;gap:8px}.hx-qty button{width:42px;height:42px;border:1px solid #d5dadd;border-radius:50%;background:transparent}.hx-product-details{display:grid;grid-template-columns:1fr 1.2fr;gap:10vw;padding-block:112px}.hx-product-details h2{font-size:60px;line-height:1.05;letter-spacing:-.05em;margin:0}
.hx-business-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:100px}.hx-business-card{position:relative;height:520px;overflow:hidden;color:#fff;background:#111}.hx-business-card img{width:100%;height:100%;object-fit:cover}.hx-business-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8))}.hx-business-card div{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}.hx-business-card h2{font-size:32px;margin:8px 0}.hx-business-card p{line-height:1.55;margin:0;color:#e4e7e9}.hx-abm-cta{background:#071018;color:#fff;padding-block:100px}.hx-abm-cta h2{font-size:clamp(48px,6vw,86px);letter-spacing:-.055em;line-height:1;margin:0 0 32px;max-width:1050px}
.hx-skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-160%);background:#fff;color:#05090d;padding:10px 14px;border-radius:6px;text-decoration:none}.hx-skip-link:focus{transform:none}
.hxv2 a:focus-visible,.hxv2 button:focus-visible,.hxv2 input:focus-visible,.hxv2 select:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hx-branding-page{background:#05090d;color:#fff}.hx-branding-hero{min-height:900px;position:relative;overflow:hidden}.hx-branding-hero .hx-branding-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;z-index:0}.hx-branding-hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,5,7,.9),rgba(3,5,7,.05))}.hx-branding-hero>div{position:absolute;z-index:2;left:var(--gutter);top:28%;max-width:720px}.hx-branding-hero h1{font-size:clamp(70px,9vw,140px);line-height:.9;letter-spacing:-.07em;margin:0 0 28px}.hx-branding-hero p{font-size:20px;line-height:1.5}
.hx-ubrand-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:8vw;align-items:end;margin-bottom:42px}.hx-ubrand-section-head h2{font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.045em;margin:8px 0 0}.hx-ubrand-section-head>p{margin:0;color:#b7bec3;line-height:1.65;max-width:580px}.hx-ubrand-product-picker{grid-column:1/-1;padding:22px 0 10px}.hx-field-title{display:block;font-size:12px;color:#aeb5ba;margin-bottom:10px}.hx-ubrand-family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.hx-ubrand-family{appearance:none;border:1px solid #30383e;background:#0d1318;color:#fff;border-radius:10px;padding:10px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}.hx-ubrand-family:hover:not(:disabled){transform:translateY(-2px);border-color:#7a858d}.hx-ubrand-family.is-selected{border-color:#fff;background:#151d23}.hx-ubrand-family:disabled{opacity:.32;cursor:not-allowed}.hx-ubrand-family-icon{width:66px;height:72px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:5px;overflow:hidden}.hx-ubrand-family-icon img{width:86%;height:86%;object-fit:contain}.hx-ubrand-family strong{font-size:12px;line-height:1.15;text-align:center}.hx-ubrand-family small{font-size:10px;color:#89939a}.hx-ubrand-size{display:block;max-width:100%}
.hx-ubrand-process{background:#0d141a;padding-block:100px}.hx-ubrand-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #ffffff22;border-left:1px solid #ffffff22}.hx-ubrand-steps article{min-height:280px;padding:28px;border-right:1px solid #ffffff22;border-bottom:1px solid #ffffff22}.hx-ubrand-steps span{font-size:12px;color:#7f8990}.hx-ubrand-steps h3{font-size:30px;margin:90px 0 12px}.hx-ubrand-steps p{color:#b7bec3;line-height:1.55;margin:0}
.hx-ubrand-proof{padding-block:110px}.hx-ubrand-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.hx-ubrand-proof-grid figure{margin:0;background:#fff;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hx-ubrand-proof-grid img{display:block;width:100%;height:100%;max-height:560px;object-fit:contain}
.hx-branding-form{display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;padding-block:100px}.hx-branding-form h2{font-size:58px;line-height:1.05;margin:0}.hx-branding-form form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hx-branding-form label{font-size:12px;color:#aeb5ba}.hx-branding-form input,.hx-branding-form select{display:block;width:100%;margin-top:8px;padding:16px 14px;border:1px solid #4d555b;background:#10161b;color:#fff;border-radius:8px}.hx-branding-form button{align-self:end}.hx-story-visual{width:100%;overflow:hidden;background:#eef1f2}.hx-story-visual img{display:block;width:100%;height:min(62vw,760px);min-height:460px;object-fit:cover;object-position:center}
.hx-story-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:56px var(--gutter) 72px;background:#f5f6f6;min-height:0}.hx-story-band{position:relative;min-height:0;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}.hx-story-band>img{position:relative;inset:auto;width:100%;height:430px;object-fit:contain;object-position:center;padding:34px;background:#fff}.hx-story-band:after{display:none}.hx-story-band-copy{position:relative;z-index:2;left:auto;right:auto;bottom:auto;color:var(--ink);padding:28px 32px 38px;border-top:1px solid #edf0f1;background:#fff;flex:1}.hx-story-bands strong{font-size:12px;letter-spacing:.1em;color:var(--muted)}.hx-story-bands p{font-size:27px;line-height:1.3;margin:18px 0 0;max-width:480px}
.hx-footer{background:#05090d;color:#fff;padding-top:64px}.hx-footer-top{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding-bottom:48px}.hx-footer-top p{margin:0;text-align:center}.hx-footer-top button{border:0;background:none;color:#fff}.hx-footer-links{display:flex;justify-content:space-between;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;padding-block:24px}.hx-footer-links>div{display:flex;gap:30px;flex-wrap:wrap}.hx-footer-social{justify-content:flex-end}.hx-footer-links button,.hx-footer-links a{border:0;background:none;color:#fff;text-decoration:none;padding:0}.hx-footer-meta{display:flex;justify-content:space-between;gap:24px;padding-block:22px;color:#919aa1;font-size:12px}.hx-footer-word{font-size:17vw;line-height:.72;letter-spacing:-.075em;font-weight:800;text-align:center;overflow:hidden;color:#eef0f1;padding-top:20px}
@media(max-width:900px){.hx-ubrand-family-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hx-ubrand-steps{grid-template-columns:1fr 1fr}.hx-ubrand-proof-grid{grid-template-columns:1fr 1fr}.hx-ubrand-section-head{grid-template-columns:1fr;gap:22px}.hx-header{grid-template-columns:1fr auto}.hx-nav{display:none}.hx-menu{display:block}.hx-shop-grid,.hx-business-grid{grid-template-columns:1fr 1fr}.hx-info,.hx-product-details,.hx-branding-form{grid-template-columns:1fr;gap:48px}.hx-product-config{right:24px;width:310px}.hx-purchase-tray{grid-template-columns:1fr auto auto}.hx-purchase-tray .hx-btn{grid-column:1/-1}}
@media(max-width:760px){:root{--gutter:24px}.hx-brand{width:126px;height:52px}.hx-brand-logo{height:50px}.hx-footer-parent{justify-content:flex-start;gap:16px;flex-wrap:wrap}.hx-footer-parent img{width:58px;height:68px;padding:6px}.hx-ubrand-proof{padding-block:76px}.hx-ubrand-process{padding-block:76px}.hx-ubrand-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-ubrand-family{min-height:118px;padding:8px}.hx-ubrand-family-icon{width:58px;height:64px}.hx-ubrand-proof-grid,.hx-ubrand-steps{grid-template-columns:1fr}.hx-ubrand-card-image{height:390px}.hx-ubrand-steps article{min-height:230px}.hx-ubrand-steps h3{margin-top:62px}.hx-story-visual img{height:62svh;min-height:420px}.hx-header{padding-inline:20px}.hx-header{padding-inline:20px}.hx-brand{width:110px}.hx-utils{gap:2px}.hx-icon{width:40px}.hx-hero-track{height:118svh}.hx-hero{min-height:640px}.hx-hero-title{top:16%;font-size:13vw}.hx-hero-img{object-position:center}.hx-hero-copy{bottom:8%;width:100%;padding-inline:24px;text-align:center}.hx-hero-copy p{font-size:17px}.hx-edition{font-size:9px;bottom:22px}.hx-explore{font-size:11px;bottom:19px}.hx-quiet{display:block;padding-block:80px 72px}.hx-quiet h2{font-size:40px}.hx-aside{margin-top:28px}.hx-product-world{height:710px}.hx-family-type{font-size:35vw;top:16%}.hx-world-object{width:72%;height:58%;top:20%}.hx-world-copy{left:22px;right:22px;bottom:13%;max-width:none;display:flex;align-items:end;justify-content:space-between;gap:16px}.hx-world-copy h3{font-size:25px;margin-bottom:0;max-width:180px}.hx-world-copy .hx-eyebrow{display:none}.hx-world-copy .hx-btn{padding-inline:17px}.hx-family-tabs{bottom:3%;gap:15px}.hx-info{display:block;padding-block:80px 56px}.hx-info h2{font-size:40px;margin-bottom:38px}.hx-tactile{display:flex;flex-direction:column-reverse;gap:30px;padding-bottom:80px}.hx-tactile-stage{height:460px}.hx-tactile-copy h2{font-size:40px}.hx-branding-tease{padding-top:80px}.hx-branding-intro h2{font-size:56px}.hx-compare{height:600px}.hx-branding-bottom{display:block}.hx-branding-bottom .hx-btn{margin-top:24px}.hx-business-intro{padding-top:80px}.hx-business-intro h2{font-size:42px}.hx-business-cinema{height:720px}.hx-business-copy{left:24px;right:24px;bottom:46px;padding:18px;background:rgba(4,8,12,.68)}.hx-business-copy h3{font-size:36px}.hx-segment-tabs{justify-content:flex-start}.hx-closing{min-height:640px}.hx-closing h2{font-size:58px}.hx-page-top{padding-top:112px}.hx-page-top h1{font-size:58px}.hx-shop-grid,.hx-business-grid{grid-template-columns:1fr}.hx-shop-image{height:540px}.hx-product-hero{height:920px}.hx-product-copy{top:105px;left:24px}.hx-product-copy h1{font-size:56px}.hx-product-bottle{top:25%;width:90%;height:47%}.hx-product-config{top:auto;bottom:160px;left:14px;right:14px;width:auto}.hx-purchase-tray{left:12px;right:12px;bottom:12px;grid-template-columns:1fr auto;gap:10px}.hx-purchase-tray .hx-qty{display:none}.hx-purchase-tray .hx-btn{grid-column:1/-1}.hx-product-details{padding-block:80px}.hx-product-details h2{font-size:40px}.hx-branding-hero{min-height:760px}.hx-branding-hero>div{left:24px;right:24px;top:27%}.hx-branding-hero h1{font-size:64px}.hx-branding-form{display:block;padding-block:80px}.hx-branding-form h2{font-size:42px;margin-bottom:42px}.hx-branding-form form{grid-template-columns:1fr}.hx-story-bands{grid-template-columns:1fr;gap:20px;padding:32px 20px 48px}.hx-story-band{min-height:0}.hx-story-band>img{height:360px;padding:24px}.hx-story-band-copy{bottom:auto;padding:24px 24px 30px}.hx-story-bands p{margin-top:14px}.hx-footer-top{grid-template-columns:1fr auto;gap:20px}.hx-footer-top p{grid-column:1/-1;text-align:start;margin-top:22px}.hx-footer-links{display:block}.hx-footer-links>div{margin-bottom:20px}.hx-footer-meta{display:block}.hx-footer-meta span{display:block;margin-bottom:8px}.hx-footer-word{font-size:27vw}.hx-business-card{height:500px}}
@media(max-width:380px){.hx-hero{min-height:620px}.hx-hero-title{font-size:12.6vw}.hx-btn{padding-inline:21px}.hx-world-copy h3{font-size:22px}.hx-product-bottle{top:27%;height:43%}.hx-product-config{bottom:158px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hx-hero-track{height:auto}.hx-hero{position:relative}.hx-hero-img{transform:none!important}.hx-tactile-stage img{transition:none}}
[dir=rtl] .hx-business-copy{right:auto;left:7%;text-align:right}[dir=rtl] .hx-business-cinema:after{background:linear-gradient(270deg,rgba(3,6,8,.12),rgba(3,6,8,.05) 40%,rgba(3,6,8,.68))}[dir=rtl] .hx-business-card div{text-align:right}[dir=rtl] .hx-world-copy{left:auto;right:5%}[dir=rtl] .hx-product-copy{left:auto;right:var(--gutter)}[dir=rtl] .hx-product-config{right:auto;left:var(--gutter)}[dir=rtl] .hx-branding-hero>div{left:auto;right:var(--gutter);text-align:right}[dir=rtl] .hx-branding-hero .hx-branding-hero-base{transform:translateX(-38%);object-position:center}[dir=rtl] .hx-branding-hero:after{background:linear-gradient(270deg,rgba(3,5,7,.92),rgba(3,5,7,.04) 62%,rgba(3,5,7,.16))}[dir=rtl] .hx-compare:after{background:linear-gradient(270deg,rgba(4,7,9,.35),rgba(4,7,9,.05))}[dir=rtl] .hx-compare-after{left:auto;right:0}[dir=rtl] .hx-left{left:auto;right:32px}[dir=rtl] .hx-right{right:auto;left:32px}
.hx-wordmark{color:inherit;text-align:center}.hx-wordmark>span{display:block;font-size:13px;font-weight:800;letter-spacing:.32em;white-space:nowrap}.hx-wordmark small,.hx-footer-logo small{display:block;font-family:cursive;font-size:18px;margin-top:-1px}.hx-x{color:#3aaef2;letter-spacing:0}.hx-footer-logo strong{font-size:13px;letter-spacing:.28em}.hx-footer-top .hx-footer-logo{width:170px}.hx-footer-logo img{display:block;width:100%;height:72px;object-fit:contain;object-position:left center}.hx-footer-parent{display:flex;align-items:center;justify-content:center;gap:24px;padding-block:28px;border-bottom:1px solid #ffffff22;color:#b8c0c5;font-size:12px;letter-spacing:.03em}.hx-footer-parent img{display:block;width:64px;height:74px;object-fit:contain;background:#fff;padding:7px;border-radius:7px}

/* Homepage responsive geometry authority - 29 Sep 2026.
   Preserves approved artwork and layered architecture. This block supersedes
   the prior homepage hero/family responsive experiments. */

/* Shared visual fidelity */
.hx-hero{background:#03070a}
.hx-hero-img,.hx-hero-foreground{
  position:absolute;
  inset:0;
  width:100%;
  height:calc(100svh + clamp(52px,7svh,86px));
  object-fit:cover;
  object-position:center;
  transform:translateY(clamp(24px,3.5vh,42px)) scale(calc(1 + var(--hero-progress,0)*.035));
  transform-origin:center;
  will-change:transform;
}
.hx-hero-img{z-index:1}
.hx-hero-title{z-index:4}
.hx-hero-foreground{
  z-index:3;
  pointer-events:none;
  -webkit-mask-image:url('/website_harmonyx_sa/static/src/v2/assets/hero-depth.svg');
  mask-image:url('/website_harmonyx_sa/static/src/v2/assets/hero-depth.svg');
  -webkit-mask-size:cover;
  mask-size:cover;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.hx-hero-copy,.hx-edition,.hx-explore{z-index:5}
.hx-world-bg{filter:none;opacity:1}
.hx-world-object img{filter:none}

/* Dark homepage hero: title zone above bottle at rest, existing scroll motion retained. */
.hx-hero-track{
  --hero-extra:clamp(108px,14svh,160px);
  height:calc(155svh + var(--hero-extra));
}
.hx-hero{
  height:calc(100svh + var(--hero-extra));
  min-height:850px;
}
.hx-hero-img,.hx-hero-foreground{
  height:100svh;
}
.hx-hero-title{
  top:clamp(28px,4.2vh,54px);
  left:50%;
  width:92vw;
  max-width:92vw;
  margin:0;
  transform:translateX(-50%) translateY(calc(var(--hero-progress,0)*18vh));
  text-align:center;
  text-wrap:balance;
  white-space:nowrap;
  overflow-wrap:normal;
  font-size:clamp(68px,10.2vw,158px);
  line-height:.92;
  letter-spacing:-.062em;
  font-weight:720;
  color:#f4f6f8;
}
.hx-hero-copy{
  left:50%;
  bottom:clamp(42px,5.2vh,68px);
  width:min(92vw,560px);
  transform:translateX(-50%);
  text-align:center;
}
.hx-hero-copy p{margin-bottom:14px;text-shadow:0 2px 18px rgba(0,0,0,.72)}
.hx-edition{bottom:20px}
.hx-explore{bottom:18px}

[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea{font-family:ArabicHX,Arial,sans-serif}
[dir=rtl] .hx-nav button,[dir=rtl] .hx-utils button,[dir=rtl] .hx-utils a{font-weight:400}
[dir=rtl] .hx-hero-title{
  left:50%;
  right:auto;
  width:90vw;
  max-width:90vw;
  text-align:center;
  font-family:ArabicHX,Arial,sans-serif;
  font-size:clamp(64px,9.6vw,148px);
  font-weight:700;
  letter-spacing:0;
  line-height:1.04;
  white-space:nowrap;
}
[dir=rtl] .hx-quiet h2,[dir=rtl] .hx-info h2,[dir=rtl] .hx-branding-intro h2,[dir=rtl] .hx-business-intro h2,[dir=rtl] .hx-closing h2{letter-spacing:0;line-height:1.18}

/* Product family stage: explicit title / product / content / control safe zones. */
.hx-world-copy h3{white-space:pre-line}
.hx-product-world[data-family-active]{
  height:clamp(1020px,76vw,1220px);
  min-height:1020px;
  background:#f7fbfd;
  overflow:hidden;
}
.hx-product-world[data-family-active] .hx-world-bg{
  z-index:0;
  opacity:1;
  filter:none;
  object-fit:cover;
  object-position:center;
}
.hx-product-world[data-family-active] .hx-family-type{
  z-index:4;
  left:50%;
  transform:translateX(-50%);
  top:clamp(26px,3.2vw,52px);
  line-height:.78;
  color:#05080b;
  white-space:nowrap;
  pointer-events:none;
}
.hx-product-world[data-family-active="one"] .hx-family-type{font-size:clamp(150px,23vw,420px)}
.hx-product-world[data-family-active="go"] .hx-family-type{font-size:clamp(170px,25vw,460px)}
.hx-product-world[data-family-active="glass"] .hx-family-type{font-size:clamp(138px,20vw,380px)}

.hx-product-world[data-family-active] .hx-world-object{
  z-index:1;
  left:50%;
  transform:translateX(-50%);
  top:clamp(160px,12vw,210px);
  bottom:auto;
  height:clamp(650px,52vw,800px);
  display:grid;
  place-items:center;
}
.hx-product-world[data-family-active="one"] .hx-world-object{width:clamp(245px,23vw,340px)}
.hx-product-world[data-family-active="go"] .hx-world-object{width:clamp(390px,36vw,560px)}
.hx-product-world[data-family-active="glass"] .hx-world-object{width:clamp(420px,39vw,575px)}
.hx-product-world[data-family-active] .hx-world-object img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:center;
}

/* ONE transparent asset has wide empty side margins. Fit it by product-zone height,
   not by full PNG canvas width, so optical bottle size remains the approved ONE benchmark. */
.hx-product-world[data-family-active="one"] .hx-world-object img{
  width:auto;
  max-width:none;
  height:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}

.hx-product-world[data-family-active] .hx-world-copy{z-index:5}
.hx-product-world[data-family-active="one"] .hx-world-copy{
  left:auto;
  right:5.5%;
  bottom:16%;
  max-width:390px;
  text-align:right;
}
.hx-product-world[data-family-active="go"] .hx-world-copy,
.hx-product-world[data-family-active="glass"] .hx-world-copy{
  left:5%;
  right:auto;
  bottom:16%;
  max-width:390px;
  text-align:left;
}
.hx-product-world[data-family-active] .hx-world-copy h3{
  margin:4px 0 20px;
  line-height:1.02;
}
.hx-product-world[data-family-active] .hx-family-tabs{
  z-index:6;
  bottom:clamp(24px,2.6vw,38px);
}

@media(max-width:900px){
  .hx-hero-track{height:calc(145svh + var(--hero-extra))}
  .hx-hero-img,.hx-hero-foreground{
    transform:translateY(clamp(38px,5.5vh,58px)) scale(calc(1 + var(--hero-progress,0)*.028));
    transform-origin:center top;
  }
  .hx-hero-title{
    top:clamp(24px,4vh,42px);
    width:min(90vw,10.5ch);
    max-width:90vw;
    white-space:normal;
    font-size:clamp(58px,12vw,88px);
    line-height:.9;
    letter-spacing:-.055em;
  }
  [dir=rtl] .hx-hero-title{
    left:50%;
    right:auto;
    width:min(88vw,10.5ch);
    max-width:88vw;
    white-space:normal;
    font-size:clamp(56px,11.2vw,82px);
    line-height:1.08;
    text-align:center;
  }
  .hx-hero-copy{
    bottom:clamp(36px,4.6vh,56px);
    width:min(90vw,480px);
  }
  .hx-hero-copy p{font-size:clamp(15px,2.7vw,18px);margin-bottom:12px}

  .hx-product-world[data-family-active]{
    margin-inline:0;
    width:100%;
    height:clamp(960px,135vw,1080px);
    min-height:960px;
  }
  .hx-product-world[data-family-active] .hx-family-type{top:clamp(24px,4vw,38px)}
  .hx-product-world[data-family-active="one"] .hx-family-type{font-size:clamp(122px,31vw,176px)}
  .hx-product-world[data-family-active="go"] .hx-family-type{font-size:clamp(148px,38vw,208px)}
  .hx-product-world[data-family-active="glass"] .hx-family-type{font-size:clamp(108px,27vw,160px)}
  .hx-product-world[data-family-active] .hx-world-object{
    top:clamp(145px,20vw,180px);
    bottom:auto;
    height:clamp(570px,72vw,650px);
  }
  .hx-product-world[data-family-active="one"] .hx-world-object{width:clamp(220px,43vw,300px)}
  .hx-product-world[data-family-active="go"] .hx-world-object{width:clamp(340px,68vw,470px)}
  .hx-product-world[data-family-active="glass"] .hx-world-object{width:clamp(330px,68vw,450px)}
  .hx-product-world[data-family-active] .hx-world-copy,
  [dir=rtl] .hx-product-world[data-family-active] .hx-world-copy{
    left:clamp(20px,4vw,36px);
    right:clamp(20px,4vw,36px);
    bottom:clamp(92px,10vw,112px);
    max-width:none;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    text-align:start;
  }
  .hx-product-world[data-family-active] .hx-world-copy .hx-eyebrow{display:none}
  .hx-product-world[data-family-active] .hx-world-copy h3{
    max-width:46vw;
    margin:0;
    font-size:clamp(22px,4.4vw,30px);
    line-height:1.02;
  }
  .hx-product-world[data-family-active] .hx-world-copy .hx-btn{
    flex:0 0 auto;
    padding-inline:clamp(16px,3vw,24px);
  }
  .hx-product-world[data-family-active] .hx-family-tabs{
    bottom:clamp(20px,3vw,28px);
    gap:clamp(12px,3vw,22px);
  }
}

@media(max-width:760px){
  :root{--gutter:24px}
  .hx-hero{min-height:820px}
  .hx-hero-title{
    top:clamp(20px,3.8vh,34px);
    width:min(88vw,9.5ch);
    max-width:88vw;
    font-size:clamp(54px,15vw,76px);
  }
  [dir=rtl] .hx-hero-title{
    width:min(88vw,10.5ch);
    max-width:88vw;
    font-size:clamp(52px,13.6vw,72px);
    line-height:1.1;
  }
  .hx-hero-img,.hx-hero-foreground{
    transform:translateY(clamp(44px,6.5vh,64px)) scale(calc(1 + var(--hero-progress,0)*.024));
  }
  .hx-hero-copy{
    bottom:clamp(34px,4.5vh,48px);
    padding-inline:18px;
  }
  .hx-hero-copy p{font-size:16px}
  .hx-edition{font-size:9px;bottom:18px}
  .hx-explore{font-size:11px;bottom:16px}

  .hx-product-world[data-family-active]{
    height:clamp(880px,235vw,960px);
    min-height:880px;
  }
  .hx-product-world[data-family-active] .hx-family-type{top:clamp(22px,6vw,34px)}
  .hx-product-world[data-family-active="one"] .hx-family-type{font-size:clamp(112px,35vw,154px)}
  .hx-product-world[data-family-active="go"] .hx-family-type{font-size:clamp(138px,42vw,188px)}
  .hx-product-world[data-family-active="glass"] .hx-family-type{font-size:clamp(100px,30vw,140px)}
  .hx-product-world[data-family-active] .hx-world-object{
    top:clamp(132px,35vw,158px);
    bottom:auto;
    height:clamp(490px,132vw,560px);
  }
  .hx-product-world[data-family-active="one"] .hx-world-object{width:clamp(190px,54vw,240px)}
  .hx-product-world[data-family-active="go"] .hx-world-object{width:clamp(300px,88vw,380px)}
  .hx-product-world[data-family-active="glass"] .hx-world-object{width:clamp(305px,96vw,385px)}
  .hx-product-world[data-family-active] .hx-world-copy,
  [dir=rtl] .hx-product-world[data-family-active] .hx-world-copy{
    left:20px;
    right:20px;
    bottom:100px;
  }
  .hx-product-world[data-family-active] .hx-world-copy h3{
    max-width:48vw;
    font-size:clamp(22px,6.2vw,28px);
  }
  .hx-product-world[data-family-active] .hx-family-tabs{
    bottom:18px;
    gap:12px;
  }
}

@media(max-width:380px){
  .hx-hero{min-height:800px}
  .hx-hero-title{font-size:clamp(50px,14.5vw,64px)}
  [dir=rtl] .hx-hero-title{font-size:clamp(48px,13vw,60px)}
  .hx-product-world[data-family-active]{height:880px;min-height:880px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hx-hero-track{height:auto}
  .hx-hero{position:relative}
  .hx-hero-img,.hx-hero-foreground{transform:none!important}
  .hx-tactile-stage img{transition:none}
}


/* D4 V2 Odoo wiring layer - private/unpublished */
.hx-cart-link{position:relative}.hx-cart-count{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#fff;color:#05090d;font-size:10px;font-weight:800;line-height:16px;text-align:center}.hx-header.is-light .hx-cart-count{background:#101518;color:#fff}
.hx-complete-collection{padding-block:86px 104px;background:var(--paper)}.hx-complete-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.hx-complete-head h2{margin:0;font-size:clamp(38px,4.8vw,68px);line-height:1.03;letter-spacing:-.05em}.hx-text-link{border:0;background:none;padding:8px 0;font-weight:700;color:var(--ink);white-space:nowrap}
.hx-collection-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.hx-collection-card{scroll-snap-align:start;background:#fff;border:1px solid #e7eaec;min-height:390px}.hx-card-hit{display:block;width:100%;height:100%;padding:0;border:0;background:none;text-align:start;color:inherit}.hx-card-image{height:270px;background:#eef1f2;display:grid;place-items:center;overflow:hidden}.hx-card-image img{width:82%;height:88%;object-fit:contain}.hx-card-copy{padding:18px}.hx-card-copy p{margin:0 0 8px;font-size:11px;font-weight:750;letter-spacing:.07em}.hx-card-copy h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}.hx-card-copy>span{display:block;color:var(--muted);font-size:13px}.hx-product-state{margin-top:9px!important;color:#111!important;font-weight:700}
.hx-proof-placeholder,.hx-branding-proof-shell{display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#f6f8f7,#dfe9e4);color:#0a1711}.hx-proof-placeholder{width:100vw;height:100%}.hx-proof-placeholder span,.hx-branding-proof-shell span{font-size:12px;font-weight:800;letter-spacing:.12em}.hx-proof-placeholder strong,.hx-branding-proof-shell strong{display:block;font-size:clamp(42px,7vw,90px);letter-spacing:-.055em}.hx-proof-placeholder small,.hx-branding-proof-shell small{font-size:13px;color:#587065}
.hx-shop-filter{display:flex;gap:10px;overflow:auto;padding-bottom:28px}.hx-shop-filter button{border:1px solid #d9dee1;background:#fff;border-radius:999px;padding:10px 17px;white-space:nowrap}.hx-shop-filter button.is-selected{background:#101518;color:#fff;border-color:#101518}.hx-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hx-shop-card{background:#fff;border:1px solid #eceff0;min-height:590px}.hx-shop-card .hx-card-image{height:460px}.hx-shop-card .hx-card-copy{padding:22px}.hx-shop-card .hx-card-copy h3{font-size:25px}
.hx-tray-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}.hx-tray-price small{width:100%;font-size:11px;color:var(--muted)}.hx-live-note{color:var(--muted);line-height:1.6;max-width:620px}.hx-btn:disabled{opacity:.45;cursor:not-allowed}
.hx-branding-proof-shell{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 60% 45%,#eff6f2 0,#cdded5 38%,#07100c 78%);color:#fff}.hx-branding-proof-shell small{color:#bdcbc4}.hx-branding-hero>div:last-child{z-index:2}.hx-branding-form form{position:relative}.hx-form-status{grid-column:1/-1;min-height:22px;margin:0;color:#aeb5ba;font-size:13px;line-height:1.5}
@media(max-width:900px){.hx-shop-grid{grid-template-columns:1fr 1fr}.hx-complete-head{align-items:start;flex-direction:column}.hx-collection-rail{grid-auto-columns:minmax(210px,42vw)}}
@media(max-width:760px){.hx-complete-collection{padding-block:64px 76px}.hx-complete-head{margin-bottom:24px}.hx-collection-rail{grid-auto-columns:minmax(210px,78vw)}.hx-shop-grid{grid-template-columns:1fr}.hx-shop-card{min-height:0}.hx-shop-card .hx-card-image{height:430px}}

.hx-business-card{cursor:pointer}.hx-business-formats{display:block;margin-top:14px;font-size:11px;letter-spacing:.05em;color:#dce4e7;text-transform:uppercase}\n
.hx-branding-form label small{display:block;margin-top:7px;color:#77838a;font-size:10px;line-height:1.4}.hx-logo-upload{grid-column:1/-1}.hx-logo-upload input[type=file]{padding:13px}.hx-logo-upload input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:999px;padding:8px 12px;background:#eef2f4;color:#101518;font-weight:700}.hx-branding-form select option{background:#10161b;color:#fff}


/* Homepage U-Brand: Apple-style live typography + exact unlabeled ONE 500 master. */
.hx-ubrand-minimal{
  position:relative;
  min-height:clamp(760px,78vw,1020px);
  padding:0;
  overflow:hidden;
  background:#fff;
  color:#050505;
}
.hx-ubrand-word{
  position:absolute;
  z-index:3;
  left:max(28px,var(--gutter));
  right:calc(50% + 64px);
  margin:0;
  max-width:none;
  text-align:right;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-weight:650;
  letter-spacing:-.065em;
  line-height:.88;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.hx-ubrand-word-top{
  top:11%;
  font-size:clamp(58px,7.2vw,110px);
}
.hx-ubrand-word-mid{
  top:44%;
  transform:translateY(-50%);
  font-size:clamp(72px,8.4vw,132px);
}
.hx-ubrand-word-bottom{
  bottom:16%;
  font-size:clamp(52px,6.7vw,102px);
  color:#6e6e73;
}
.hx-ubrand-minimal-link{
  position:absolute;
  z-index:4;
  right:calc(50% + 64px);
  bottom:7.5%;
  margin:0;
  padding:0;
  color:#111;
  text-align:right;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.02em;
}
.hx-ubrand-half-stage{
  position:absolute;
  inset:0 0 0 50%;
  overflow:hidden;
  background:#fff;
}
.hx-ubrand-bottle-plain{
  position:absolute;
  left:0;
  top:50%;
  height:92%;
  aspect-ratio:650/1675;
  transform:translate(-50%,-50%);
}
.hx-ubrand-bottle-plain img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
}
[dir=rtl] .hx-ubrand-word,
[dir=rtl] .hx-ubrand-minimal-link{
  left:calc(50% + 64px);
  right:max(28px,var(--gutter));
  text-align:left;
  font-family:ArabicHX,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em;
}
[dir=rtl] .hx-ubrand-half-stage{inset:0 50% 0 0}
[dir=rtl] .hx-ubrand-bottle-plain{
  left:auto;
  right:0;
  transform:translate(50%,-50%);
}
@media(max-width:760px){
  .hx-ubrand-minimal{min-height:760px}
  .hx-ubrand-word{
    left:20px;
    right:calc(50% + 28px);
    max-width:none;
    text-align:right;
    font-weight:650;
    letter-spacing:-.06em;
  }
  .hx-ubrand-word-top{
    top:9.5%;
    font-size:clamp(50px,14vw,60px);
  }
  .hx-ubrand-word-mid{
    top:41%;
    max-width:none;
    font-size:clamp(42px,12vw,54px);
    line-height:.9;
  }
  .hx-ubrand-word-bottom{
    bottom:17%;
    max-width:none;
    font-size:clamp(34px,9.8vw,42px);
    line-height:.92;
  }
  .hx-ubrand-minimal-link{
    right:calc(50% + 28px);
    bottom:8%;
    font-size:14px;
  }
  .hx-ubrand-half-stage{inset:0 0 0 50%}
  .hx-ubrand-bottle-plain{
    height:88%;
    top:50%;
  }
  [dir=rtl] .hx-ubrand-word,
  [dir=rtl] .hx-ubrand-minimal-link{left:calc(50% + 28px);right:20px;text-align:left}
  [dir=rtl] .hx-ubrand-half-stage{inset:0 50% 0 0}
}


/* 01 Oct 2026: family-first Shop + clean PDP background. */
.hx-product-hero{background:#f8f9fa}
.hx-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hx-family-card .hx-card-copy p{color:var(--muted)}
.hx-family-card .hx-card-copy h3{font-size:32px}
.hx-family-card .hx-card-image{background:#fff}
.hx-family-card .hx-card-image img{width:100%;height:100%;object-fit:contain}
[dir=rtl] .hx-family-card .hx-card-hit{text-align:right}
@media(max-width:900px){.hx-shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.hx-shop-grid{grid-template-columns:1fr}}


/* Arabic PDP: mirror the product configurator away from the right-side headline. */
@media (max-width:900px) and (min-width:761px){
  [dir=rtl] .hx-product-config{right:auto;left:24px}
}
@media (max-width:760px){
  [dir=rtl] .hx-product-config{left:14px;right:14px}
}

@media(max-width:760px){[dir=rtl] .hx-branding-hero .hx-branding-hero-base{transform:translateX(-30%)}}


/* 04 Oct 2026: Arabic-first visual parity.
   Directional copy and its contrast treatment must move together in RTL. */
[dir=rtl] .hx-edition{left:auto;right:var(--gutter);text-align:right}
[dir=rtl] .hx-explore{right:auto;left:var(--gutter)}
@media(min-width:901px){
  [dir=rtl] .hx-product-world[data-family-active="one"] .hx-world-copy{left:5.5%;right:auto;text-align:right}
  [dir=rtl] .hx-product-world[data-family-active="go"] .hx-world-copy,
  [dir=rtl] .hx-product-world[data-family-active="glass"] .hx-world-copy{left:auto;right:5%;text-align:right}
}
@media(max-width:760px){
  [dir=rtl] .hx-business-copy{left:24px;right:24px;text-align:right}
  [dir=rtl] .hx-branding-hero>div{left:24px;right:24px;text-align:right}
}



/* D4 11 Oct: Apple-like PDP with readable typography over bottle media.
 * Preserve the original product geometry, native media, pricing and checkout.
 * Text and interactive controls always take precedence in the scene depth.
 */
.hx-product-hero {
  position: relative;
  display: block;
  min-height: 850px;
  height: clamp(850px, 92svh, 950px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #f9fafb;
}
.hx-product-hero > .hx-product-bg { z-index: 0; }
.hx-product-copy {
  position: absolute;
  inset: auto;
  z-index: 6;
  top: clamp(160px, 18vh, 220px);
  left: var(--gutter);
  right: auto;
  width: min(64vw, 960px);
  max-width: none;
  padding: 0;
  transform: none;
  overflow: visible;
}
.hx-product-copy > p:first-child { margin: 0 0 12px; }
.hx-product-copy h1 {
  margin: 6px 0 18px;
  max-width: none;
  font-size: clamp(78px, 6.45vw, 120px);
  font-weight: 760;
  letter-spacing: -.076em;
  line-height: .94;
  white-space: pre-line;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.hx-product-copy > p:last-child {
  margin: 0;
  max-width: 460px;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.5;
}
.hx-product-bottle {
  position: absolute;
  inset: auto;
  z-index: 1;
  top: clamp(180px, 20vh, 220px);
  left: 60.5%;
  right: auto;
  transform: translateX(-50%);
  width: min(35vw, 600px);
  max-width: none;
  height: clamp(430px, 60vh, 640px);
  object-fit: contain;
  object-position: center;
}
.hx-product-config {
  position: absolute;
  inset: auto;
  z-index: 7;
  top: clamp(440px, 50vh, 505px);
  right: var(--gutter);
  left: auto;
  width: min(335px, 22vw);
  max-width: none;
  min-width: 0;
  padding: 12px;
  margin: 0;
  border-radius: 16px;
  background: rgba(249,250,251,.72);
  backdrop-filter: blur(8px);
}
.hx-product-config .hx-config-row, .hx-option-group { min-width: 0; }
.hx-option-group button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  line-height: 1.35;
}
.hx-purchase-tray {
  position: absolute;
  inset: auto;
  z-index: 8;
  left: 4%;
  right: 4%;
  bottom: 26px;
  width: auto;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,.7fr) auto auto;
  gap: 18px;
}
.hx-purchase-tray > div, .hx-purchase-tray .hx-tray-price { min-width: 0; }
#tray-name, #tray-size { overflow-wrap: break-word; }
[dir=rtl] .hx-product-copy { left: auto; right: var(--gutter); text-align: right; }
[dir=rtl] .hx-product-copy h1 {
  font-size: clamp(65px, 6.5vw, 111px);
  line-height: 1.2;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: normal;
}
[dir=rtl] .hx-product-bottle { left: 41%; }
[dir=rtl] .hx-product-config {
  left: var(--gutter);
  right: auto;
  text-align: start;
}
@media (min-width: 921px) and (max-width: 1350px) {
  .hx-product-hero { height: 960px; min-height: 960px; }
  .hx-product-copy { top: 146px; width: 65%; }
  .hx-product-copy h1 { font-size: clamp(72px, 6.25vw, 96px); }
  .hx-product-bottle { top: 270px; width: 38vw; height: 450px; left: 66%; }
  .hx-product-config { top: 680px; width: min(310px, 27vw); }
  [dir=rtl] .hx-product-bottle { left: 42%; }
  [dir=rtl] .hx-product-copy h1 { font-size: clamp(61px, 6vw, 90px); }
}
@media (max-width: 920px) {
  .hx-product-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
    padding: 110px clamp(18px, 5vw, 36px) 28px;
    overflow: hidden;
  }
  .hx-product-copy, .hx-product-bottle, .hx-product-config, .hx-purchase-tray,
  [dir=rtl] .hx-product-copy, [dir=rtl] .hx-product-bottle,
  [dir=rtl] .hx-product-config {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .hx-product-copy { order: 1; z-index: 6; padding: 0; align-self: stretch; }
  .hx-product-copy h1 {
    font-size: clamp(56px, 8.6vw, 88px);
    line-height: .96;
    letter-spacing: -.066em;
  }
  [dir=rtl] .hx-product-copy h1 { font-size: clamp(52px, 8vw, 83px); letter-spacing: 0; line-height: 1.2; }
  .hx-product-bottle {
    order: 2;
    z-index: 1;
    align-self: center;
    margin-top: -12px;
    height: clamp(360px, 58vw, 530px);
    object-fit: contain;
  }
  .hx-product-config {
    order: 3;
    z-index: 7;
    align-self: stretch;
    padding: 18px;
    background: rgba(249,250,251,.92);
    border: 1px solid #e7ebee;
    border-radius: 16px;
    backdrop-filter: none;
  }
  .hx-purchase-tray {
    order: 4;
    z-index: 8;
    margin-top: 16px;
    padding: 18px;
    gap: 12px;
    grid-template-columns: minmax(0,1fr) auto auto;
  }
  .hx-purchase-tray .hx-btn { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .hx-product-hero { padding: 100px 18px 24px; }
  .hx-product-copy h1 { font-size: clamp(40px, 11.7vw, 70px); line-height: .99; letter-spacing: -.06em; }
  [dir=rtl] .hx-product-copy h1 { font-size: clamp(40px, 11vw, 65px); line-height: 1.22; }
  .hx-product-copy > p:last-child { font-size: 16px; }
  .hx-product-bottle { height: clamp(280px, 78vw, 445px); margin-top: -8px; }
  .hx-product-config { padding: 16px; }
  .hx-purchase-tray { grid-template-columns: minmax(0,1fr) auto; padding: 16px; }
  .hx-purchase-tray .hx-tray-price { font-size: 19px; }
}
@media (max-width: 380px) {
  .hx-product-hero { padding-inline: 13px; }
  .hx-product-copy h1 { font-size: clamp(36px, 11.3vw, 42px); }
  [dir=rtl] .hx-product-copy h1 { font-size: clamp(36px, 10.6vw, 41px); }
  .hx-option-group button { padding: 9px 11px; }
}

/* D4 10 Oct: real V2 header utility icons, accessible focus and device-safe spacing. */
.hx-utils .hx-lang{min-width:44px;padding:8px 7px;line-height:1;font-size:13px;font-weight:650;letter-spacing:.04em;text-align:center}
.hx-utils .hx-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;line-height:1;flex:0 0 40px}
.hx-utils .hx-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hx-utils .hx-icon:hover,.hx-utils .hx-icon:focus-visible,.hx-utils .hx-lang:focus-visible{outline:1px solid currentColor;outline-offset:2px;border-radius:999px}
.hx-cart-count{z-index:1;top:0;right:-2px}
@media(max-width:760px){.hx-utils{gap:0}.hx-utils .hx-icon{width:38px;height:40px;flex-basis:38px}.hx-utils .hx-lang{min-width:39px;padding-inline:4px}}

/* D4 10 Oct: Apple-quiet cross-collection discovery directly inside the PDP. */
.hx-product-switcher {
  position: absolute;
  z-index: 9;
  top: 103px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2.4vw, 35px);
  min-height: 38px;
  color: #101518;
}
.hx-product-switcher-caption {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #8c969b;
}
.hx-product-switcher-options {
  display: flex;
  gap: clamp(13px, 2vw, 28px);
  align-items: center;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.hx-product-switcher-options::-webkit-scrollbar { display: none; }
.hx-product-switcher-option {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  outline-offset: 4px;
  padding: 8px 0 10px;
  background: transparent;
  color: #697378;
  cursor: pointer;
  font-size: clamp(12px, .9vw, 14px);
  font-weight: 550;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: color .2s ease;
}
.hx-product-switcher-option:hover, .hx-product-switcher-option.is-active { color: #101518; }
.hx-product-switcher-option.is-active { font-weight: 700; }
.hx-product-switcher-option.is-active:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.hx-product-explore {
  padding-top: clamp(46px, 7vw, 108px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.hx-product-explore-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}
.hx-product-explore-head h2 {
  font-size: clamp(42px, 6vw, 84px);
  line-height: .98;
  letter-spacing: -.068em;
  margin: 7px 0 0;
}
.hx-product-explore .hx-product-explore-all {
  font-size: 14px;
  white-space: nowrap;
  margin: 0 0 6px;
}
.hx-product-explore-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.hx-product-explore-card {
  border: 0;
  border-radius: 15px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #f3f5f6;
  text-align: start;
  overflow: hidden;
  cursor: pointer;
  color: #101518;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hx-product-explore-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.075);
}
.hx-product-explore-card:focus-visible { outline: 2px solid #101518; outline-offset: 4px; }
.hx-product-explore-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(210px, 24vw, 365px);
  padding: 24px;
  overflow: hidden;
}
.hx-product-explore-visual img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}
.hx-product-explore-card:hover img { transform: scale(1.035); }
.hx-product-explore-meta {
  padding: 14px 23px 25px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 15px;
}
.hx-product-explore-meta strong { font-size: clamp(17px,1.55vw,23px); font-weight: 720; letter-spacing: -.04em; }
.hx-product-explore-meta span { color:#6d777e; font-size: 12px; }
[dir=rtl] .hx-product-switcher { right: var(--gutter); left: var(--gutter); }
[dir=rtl] .hx-product-explore-head h2 { letter-spacing: 0; line-height: 1.14; }
[dir=rtl] .hx-product-explore-card { text-align: right; }
@media(max-width:920px) {
  .hx-product-switcher {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    order: 0;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    gap: 15px;
    margin: 0 0 18px;
    align-self: stretch;
    justify-content: flex-start;
  }
  .hx-product-switcher-options { gap: 18px; }
}
@media(max-width:760px) {
  .hx-product-switcher { margin-bottom: 14px; gap: 11px; }
  .hx-product-switcher-caption { font-size: 9px; }
  .hx-product-switcher-option { font-size: 12px; }
  .hx-product-explore-head h2 { font-size: clamp(40px,10vw,64px); }
  .hx-product-explore-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 16px;
  }
  .hx-product-explore-card { flex: 0 0 79%; scroll-snap-align: start; }
  .hx-product-explore-visual { height: 260px; }
  .hx-product-explore-meta { padding: 13px 17px 22px; }
}
@media(max-width:380px) {
  .hx-product-switcher-caption { display:none; }
  .hx-product-explore-card { flex-basis: 88%; }
}

/* 10 Oct D4 buyer QA: the Explore rail must remain visible on light pages.
 * This also covers the genuine single-published-family fallback. */
.hx-product-explore .hx-product-explore-all,
.hx-product-explore .hx-text-action,
.hx-product-explore .hx-product-explore-fallback {
  color: #111820 !important;
  opacity: 1 !important;
}
.hx-product-explore .hx-product-explore-fallback {
  min-height: 160px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E3E8EB;
  border-radius: 15px;
  background: #F7F8F9;
  cursor: pointer;
  font-size: clamp(18px,2.2vw,28px);
  font-weight: 650;
}
.hx-product-explore .hx-product-explore-fallback:hover { border-color:#8E9BA3; }
.hx-product-explore .hx-product-explore-card {
  color: #141A1E !important;
  opacity: 1 !important;
}
.hx-product-explore .hx-product-explore-meta span { color:#525F67; }


/* 11 Oct: shared visual depth guard, no product/bottle artwork modification.
 * The hero foreground cutout intentionally stays under type; all controls
 * remain interactive and visually above decorative media in AR and EN.
 */
.hx-hero,.hx-product-world,.hx-product-hero,.hx-ubrand-minimal{
  isolation:isolate;
}
.hx-hero-img,.hx-world-bg,.hx-product-bg{pointer-events:none}
.hx-hero-foreground,.hx-world-object,.hx-product-bottle,.hx-ubrand-half-stage{
  pointer-events:none;
}
.hx-ubrand-half-stage{z-index:0}
.hx-ubrand-word{z-index:3}
.hx-ubrand-minimal-link{z-index:4}


/* 11 Oct 2026: depth invariant across ALL authored HarmonyX V2 scenes.
 * The media/cutout layers are strictly decorative; every visible word and
 * customer control paints ABOVE them in Arabic and English, at every width.
 * Scope to the V2 shell so Odoo's native /shop and back-office are untouched.
 * Preserve existing positioning, artwork, scrolling, mobile stack and commerce.
 */
.hxv2 .hx-hero,
.hxv2 .hx-product-world,
.hxv2 .hx-product-hero,
.hxv2 .hx-branding-hero,
.hxv2 .hx-business-cinema,
.hxv2 .hx-ubrand-minimal,
.hxv2 .hx-business-card { isolation: isolate; }

/* Scene media always stays behind live text; no pointer interception. */
.hxv2 .hx-hero > .hx-hero-img,
.hxv2 .hx-product-world > .hx-world-bg,
.hxv2 .hx-product-hero > .hx-product-bg,
.hxv2 .hx-branding-hero > .hx-branding-hero-image { z-index: 0; pointer-events: none; }
.hxv2 .hx-hero > .hx-hero-foreground,
.hxv2 .hx-product-world > .hx-world-object,
.hxv2 .hx-product-hero > .hx-product-bottle,
.hxv2 .hx-ubrand-minimal > .hx-ubrand-half-stage {
  z-index: 1;
  pointer-events: none;
}
.hxv2 .hx-business-cinema > img,
.hxv2 .hx-business-card > img { position: relative; z-index: 0; pointer-events: none; }
.hxv2 .hx-business-cinema::after,
.hxv2 .hx-business-card::after { z-index: 1; pointer-events: none; }

/* Apple-style live headlines are always the top readable scene layer. */
.hxv2 .hx-hero > .hx-hero-title,
.hxv2 .hx-product-world > .hx-family-type,
.hxv2 .hx-product-hero > .hx-product-copy,
.hxv2 .hx-branding-hero > div,
.hxv2 .hx-business-cinema > .hx-business-copy,
.hxv2 .hx-ubrand-minimal > .hx-ubrand-word,
.hxv2 .hx-business-card > div { z-index: 10; }
.hxv2 .hx-hero > .hx-hero-copy,
.hxv2 .hx-hero > .hx-edition,
.hxv2 .hx-hero > .hx-explore,
.hxv2 .hx-product-world > .hx-world-copy,
.hxv2 .hx-ubrand-minimal > .hx-ubrand-minimal-link { z-index: 11; }
.hxv2 .hx-product-world > .hx-family-tabs,
.hxv2 .hx-product-hero > .hx-product-config { z-index: 12; }
.hxv2 .hx-product-hero > .hx-purchase-tray { z-index: 13; }
.hxv2 .hx-product-hero > .hx-product-switcher { z-index: 14; }
.hxv2 > .hx-header { z-index: 100; }
.hxv2 > .hx-mobile-menu { z-index: 101; }

/* Explicit readability and geometry, without an opaque typographic panel. */
.hxv2 .hx-product-copy,
.hxv2 .hx-product-copy h1,
.hxv2 .hx-product-copy p {
  overflow: visible;
  text-overflow: clip;
}
.hxv2 .hx-product-copy { pointer-events: none; }
@media(max-width:920px) {
  .hxv2 .hx-product-hero > .hx-product-copy { order: 1; }
  .hxv2 .hx-product-hero > .hx-product-bottle { order: 2; }
  .hxv2 .hx-product-hero > .hx-product-config { order: 3; }
  .hxv2 .hx-product-hero > .hx-purchase-tray { order: 4; }
}