.brand-page[data-brand=mup] { --brand-accent:#a6dcd4; --brand-deep:#071e42; --brand-soft:#eef2ee; }
.mup-hero { padding:0; background:#041638; }
.mup-hero-scene { position:relative; min-height:660px; aspect-ratio:2/1; isolation:isolate; }
.mup-hero-picture { position:absolute; inset:0; z-index:-1; }
.mup-hero-picture img { width:100%; height:100%; object-fit:cover; object-position:right bottom; }
.mup-hero-copy { padding:clamp(155px,11vw,220px) 6vw 70px; width:51%; max-width:920px; }
.mup-hero-copy .brand-breadcrumb { margin:0 0 28px; }
.mup-hero h1 { font-size:clamp(3.6rem,5.5vw,7rem); max-width:650px; margin:15px 0 20px; }
.mup-hero h1 em { color:#e3bf8e; }
.mup-hero-intro { max-width:380px; color:#e3e8f0; line-height:1.6; font-size:1rem; }
.mup-hero .brand-actions { margin-top:25px; gap:17px; align-items:center; }
.mup-hero .mup-text-link { border-bottom:1px solid #a6dcd4; padding:10px 0; font-size:.78rem; }
.mup-proof { padding:25px 6vw; background:#061832; }
.mup-proof .brand-proof { border:0; padding:0; }
.mup-introduction .brand-intro-heading { grid-template-columns:1.2fr 1fr; }
.mup-introduction .brand-differences { margin-top:45px; }
.mup-introduction .brand-difference h3 { margin:17px 0 10px; }
.mup-film { background:radial-gradient(ellipse at 80% 50%,#103b50 0,transparent 65%),#061832; }
.mup-film-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:70px; align-items:center; }
.mup-film-copy { max-width:650px; }
.mup-film h2 { font-size:clamp(2.9rem,4.8vw,5.5rem); line-height:1.05; letter-spacing:-.045em; margin:18px 0 25px; }
.mup-film h2 em { color:#e3bf8e; }
.mup-film-copy>p:not(.brand-kicker) { max-width:430px; line-height:1.65; color:var(--muted); }
.mup-derma { max-width:560px; margin-top:28px; padding:22px 0 0; border-top:1px solid rgba(166,220,212,.25); }
.mup-derma-heading { display:flex; align-items:center; gap:20px; }
/* Display only the original seal from the supplied artwork (300px source viewport). */
.mup-derma-seal { position:relative; flex:0 0 110px; width:110px; height:110px; border-radius:50%; overflow:hidden; background:#38adc0; }
.mup-derma-seal img { position:absolute; width:450%; max-width:none; height:auto; left:-287.333333%; top:-302.666667%; }
.mup-derma-source { margin:0 0 8px; color:var(--brand-accent); font-size:.68rem; line-height:1.5; }
.mup-derma h3 { margin:0; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.15; letter-spacing:-.02em; }
.mup-derma-points { display:flex; flex-wrap:wrap; gap:10px 20px; list-style:none; padding:0; margin:22px 0 12px; }
.mup-derma-points li { display:flex; align-items:baseline; gap:8px; font-size:.82rem; line-height:1.5; }
.mup-derma-points li::before { content:'✓'; color:var(--brand-accent); font-weight:700; }
.mup-derma-note { max-width:490px; margin:0; color:var(--muted); font-size:.7rem; line-height:1.6; }
.mup-film .brand-actions { margin-top:30px; }
.mup-film-figure { width:min(100%,350px); justify-self:center; }
.mup-film-player { position:relative; aspect-ratio:9/16; overflow:hidden; background:#07131f; border-radius:12px; border:1px solid rgba(245,241,232,.2); box-shadow:0 25px 70px rgba(0,0,0,.2); }
.mup-film-player video { display:block; width:100%; height:100%; object-fit:contain; }
.mup-film-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:78px; height:78px; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(5,22,49,.78); color:#fff; cursor:pointer; backdrop-filter:blur(8px); }
.mup-film-play[hidden],.mup-film-error[hidden] { display:none; }
.mup-film-play svg { width:29px; height:29px; margin-left:4px; fill:currentColor; }
.mup-film-play:hover { background:#071e42; }
.mup-film-figure figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:17px; color:var(--muted); font-size:.75rem; line-height:1.5; }
.mup-film-figure figcaption span { color:var(--brand-accent); white-space:nowrap; }
.mup-film-error { font-size:.8rem; line-height:1.6; padding-top:12px; color:var(--ink); }
.mup-film-error a { text-decoration:underline; text-underline-offset:4px; }
.mup-film-player video:focus-visible { outline:3px solid var(--brand-accent); outline-offset:-5px; }
.mup-explorer { background:#f5f5f1; color:#172020; }
.mup-explorer .brand-kicker { color:#27645f; }
.mup-explorer h2,.mup-nuances h2,.mup-social h2 { font-size:clamp(2.7rem,4.4vw,5rem); letter-spacing:-.045em; line-height:1.06; margin:16px 0 22px; }
.mup-explorer-intro { max-width:470px; color:#54625e; line-height:1.6; }
.mup-filter { display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 28px; }
.mup-filter[hidden],.mup-card[hidden],.mup-card-action[hidden],.mup-variants[hidden] { display:none; }
.mup-filter button { appearance:none; color:#28443d; border:1px solid #b8c9c1; border-radius:99px; background:transparent; min-height:48px; padding:13px 20px; font:600 .82rem 'Segoe UI',Arial,sans-serif; cursor:pointer; transition:background .2s,color .2s; }
.mup-filter button[aria-pressed=true] { background:#092d38; color:#fff; border-color:#092d38; }
.mup-filter button:hover { border-color:#092d38; }
.mup-explorer-context { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:0 0 26px; border-top:1px solid #ccd5ce; padding-top:24px; }
.mup-explorer-context h3 { font-size:1.65rem; margin-bottom:8px; }
.mup-explorer-context p { color:#54625e; font-size:.9rem; line-height:1.55; max-width:580px; }
.mup-explorer-context>a { border-bottom:1px solid #597970; padding:10px 0; font-size:.8rem; white-space:nowrap; }
.mup-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 25px; }
.mup-card figure { position:relative; background:#f7f7f7; aspect-ratio:1.1; overflow:hidden; }
.mup-card img { width:100%; height:100%; object-fit:contain; padding:24px; transition:transform .35s; }
.mup-card:hover img { transform:scale(1.04); }
.mup-card-copy { padding:20px 0 0; }
.mup-card-copy>span { font-size:.67rem; letter-spacing:.1em; color:#56766b; text-transform:uppercase; }
.mup-card-copy h3 { font-size:clamp(1.6rem,2.25vw,2.35rem); margin:9px 0; }
.mup-card-copy p { color:#54625e; font-size:.89rem; line-height:1.6; max-width:355px; }
.mup-card-action { display:inline-flex; align-items:center; gap:20px; padding:13px 0 7px; margin-top:6px; color:#184a43; border:0; border-bottom:1px solid #8aaba0; background:none; font:600 .8rem 'Segoe UI',Arial,sans-serif; cursor:pointer; }
.mup-explorer-status { font-size:.76rem; color:#52645b; margin-top:26px!important; }
.mup-explorer-note { font-size:.76rem; color:#52645b; line-height:1.6; max-width:720px; margin-top:10px!important; }
.mup-nuances { background:#071e42; }
.mup-nuances h2 em { color:#e3bf8e; }
.mup-nuance-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; }
.mup-nuance-heading>div>p:not(.brand-kicker) { color:var(--muted); max-width:460px; line-height:1.6; }
.mup-catalog-actions { display:flex; flex-direction:column; align-items:center; gap:17px; flex-shrink:0; padding-bottom:5px; }
.mup-catalog-actions>a:last-child { font-size:.75rem; text-decoration:underline; text-underline-offset:5px; color:#c5d2df; padding:8px; }
.mup-tone-selector { margin-top:40px; }
.mup-tone-selector[hidden] { display:none; }
.mup-tone-label { display:flex; justify-content:space-between; gap:15px; margin-bottom:17px; font-size:.76rem; color:#ccdbe8; }
.mup-tone-label span { font-size:.68rem; color:#a6dcd4; }
.mup-tone-levels { display:flex; gap:9px; overflow-x:auto; padding:5px 5px 15px; margin:0 -5px; scrollbar-width:thin; scrollbar-color:#699599 #122c4c; }
.mup-tone-levels button { flex:1 0 89px; min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px solid #536680; border-radius:8px; padding:14px 10px; background:#0a254a; color:#e9eef4; cursor:pointer; font:inherit; }
.mup-tone-levels button[data-mup-level="12"],.mup-tone-levels button[data-mup-level="mix"] { flex-basis:120px; }
.mup-tone-levels strong { font-family:Georgia,serif; font-size:1.85rem; font-weight:400; }
.mup-tone-levels span { font-size:.65rem; max-width:86px; line-height:1.35; text-align:center; }
.mup-tone-levels button[aria-pressed=true] { background:#a6dcd4; color:#09283b; border-color:#a6dcd4; }
.mup-tone-levels button:hover { border-color:#a6dcd4; }
.mup-shade-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:30px 0 20px; padding-top:26px; border-top:1px solid #3f5370; }
.mup-shade-heading h3 { font-size:clamp(1.55rem,2.5vw,2.25rem); letter-spacing:-.02em; }
.mup-shade-heading p { color:#bacadc; font-size:.75rem; white-space:nowrap; }
.mup-shade-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.mup-shade-grid li { min-width:0; }
.mup-shade { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; height:100%; border:2px solid transparent; border-radius:9px; padding:12px 10px 16px; background:#f6f5ef; color:#182d37; cursor:pointer; font:inherit; text-align:center; }
.mup-shade img { width:100%; max-width:150px; height:auto; aspect-ratio:1.1; object-fit:contain; mix-blend-mode:multiply; }
.mup-shade-code { display:block; font-size:1.05rem; font-weight:700; margin:9px 0 5px; }
.mup-shade-name { display:block; font-size:.66rem; line-height:1.45; }
.mup-shade[aria-pressed=true] { border-color:#a6dcd4; box-shadow:0 0 0 2px #a6dcd4; }
.mup-shade[aria-pressed=true]::after { content:'✓'; position:absolute; top:6px; right:6px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#09283b; color:#a6dcd4; font-size:.8rem; }
.mup-shade:hover { border-color:#a6dcd4; }
.mup-shade:disabled { cursor:default; }
.mup-shade-selection { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:25px; padding:23px 25px; border:1px solid #536680; border-radius:10px; background:#0a254a; }
.mup-shade-selection>div>span { display:block; font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:#a6dcd4; margin-bottom:10px; }
.mup-shade-selection p { display:flex; align-items:center; gap:18px; }
.mup-shade-selection strong { font-size:1.6rem; font-weight:500; }
.mup-shade-selection p>span { font-size:.9rem; color:#dde5ec; line-height:1.4; }
.mup-shade-selection .brand-button { flex-shrink:0; gap:7px; }
.mup-shade-note { margin-top:18px; color:#b0c3d5; font-size:.67rem; line-height:1.65; max-width:780px; }
.mup-social { background:#e9eeeb; color:#18251f; }
.mup-social-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:35px; }
.mup-social .brand-kicker { color:#27645f; }
.mup-social-heading p:not(.brand-kicker) { max-width:460px; color:#536058; line-height:1.65; }
.mup-social-profile { flex-shrink:0; display:inline-flex; gap:24px; padding:14px 0; border-bottom:1px solid #48776c; font-size:.85rem; }
.mup-social-scroll { max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#6f9e92 #d6e1da; padding-bottom:15px; }
.mup-social-scroll:focus-visible { outline:3px solid #008e87; outline-offset:5px; }
.mup-social-posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; margin:0; padding:0; list-style:none; }
.mup-social-card { min-width:0; border:1px solid #cbd8d0; border-radius:10px; overflow:hidden; background:#f6f8f5; scroll-snap-align:start; }
.mup-social-card>a { display:flex; flex-direction:column; height:100%; }
.mup-social-cover { position:relative; aspect-ratio:4/5; overflow:hidden; background:#071e42; }
.mup-social-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.mup-social-format { position:absolute; right:12px; top:12px; display:inline-flex; align-items:center; gap:14px; background:#061832; border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:7px 11px; color:#fff; font-size:.65rem; }
.mup-social-copy { display:flex; flex-direction:column; flex:1; padding:23px; }
.mup-social-copy>span:first-child { color:#376f62; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.mup-social-copy h3 { margin:12px 0 10px; font-size:clamp(1.3rem,2vw,2rem); letter-spacing:-.02em; line-height:1.15; }
.mup-social-copy p { color:#536058; font-size:.82rem; line-height:1.6; margin:0 0 20px; }
.mup-social-open { display:flex; justify-content:space-between; margin-top:auto; padding-top:15px; border-top:1px solid #d5dfd8; font-size:.73rem; font-weight:600; }
.mup-social-card:hover .mup-social-open { color:#27645f; }
.mup-social-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px; margin-top:20px; }
.mup-social-footer>p { color:#536058; font-size:.7rem; line-height:1.6; }
.mup-social-refresh { display:inline-flex; gap:18px; align-items:center; min-height:44px; border:1px solid #9bb7aa; border-radius:99px; padding:11px 17px; background:transparent; color:#25483f; font:600 .75rem 'Segoe UI',Arial,sans-serif; cursor:pointer; }
.mup-social-refresh:hover { background:#dae7df; }
.mup-social-refresh[hidden] { display:none; }
.mup-social-hint { display:none; }
.mup-product-dialog { width:min(960px,calc(100vw - 38px)); max-height:calc(100dvh - 38px); padding:0; border:0; border-radius:8px; background:#f5f5f1; color:#18251f; overflow:auto; }
.mup-product-dialog::backdrop { background:rgba(3,14,32,.78); backdrop-filter:blur(6px); }
.mup-dialog-layout { display:grid; grid-template-columns:1fr 1.05fr; }
.mup-dialog-visual { min-height:470px; background:#f7f7f7; }
.mup-dialog-visual img { display:block; width:100%; height:470px; padding:35px; object-fit:contain; }
.mup-dialog-copy { padding:65px 40px 35px; }
.mup-dialog-copy .brand-kicker { color:#27645f; }
.mup-dialog-copy h2 { font-family:Georgia,serif; font-size:2.8rem; line-height:1.05; letter-spacing:-.03em; font-weight:400; margin:15px 0 20px; }
.mup-dialog-copy>p { color:#536058; font-size:.95rem; line-height:1.65; }
.mup-dialog-copy ul { list-style:none; margin:22px 0; padding:0; }
.mup-dialog-copy li { border-top:1px solid #d2ddd5; padding:12px 0; color:#35574d; font-size:.88rem; }
.mup-dialog-close { position:absolute; right:15px; top:15px; width:44px; height:44px; border:1px solid #bcc8c0; border-radius:50%; background:#f5f5f1; color:#18251f; font-size:1.6rem; cursor:pointer; z-index:1; }
.mup-variants { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0; }
.mup-variants p { width:100%; font-size:.75rem; color:#536058; margin-bottom:2px; }
.mup-variants button { min-height:44px; padding:10px 13px; background:transparent; border:1px solid #b5c7bc; border-radius:5px; color:#25483d; font:600 .78rem 'Segoe UI',Arial,sans-serif; cursor:pointer; }
.mup-variants button[aria-pressed=true] { background:#092d38; color:#fff; border-color:#092d38; }
.mup-dialog-copy .mup-product-note { font-size:.74rem; margin:20px 0 0; line-height:1.55; }
.mup-dialog-open { overflow:hidden; }
.mup-page :is(button,a):focus-visible,.mup-product-dialog :is(button,a):focus-visible { outline:3px solid #008e87; outline-offset:5px; }
@media(max-width:1100px) and (min-width:761px) { .mup-hero-copy { width:52%; } .mup-hero h1 { font-size:3.6rem; } .mup-hero .brand-actions { flex-direction:column; align-items:start; gap:6px; } .mup-hero-scene { min-height:650px; } .mup-hero-picture { inset:auto 0 0; aspect-ratio:2/1; } .mup-hero-picture img { object-fit:contain; } }
@media(max-width:760px) {
 .mup-film-grid { grid-template-columns:1fr; gap:32px; }
 .mup-film h2 { font-size:clamp(2.6rem,9vw,4rem); }
 .mup-film-figure { width:min(100%,335px); }
 .mup-derma-heading { gap:16px; }
 .mup-derma-heading>div:last-child { min-width:0; }
 .mup-derma h3 { font-size:clamp(1.1rem,4.8vw,1.55rem); }
 .mup-derma-seal { flex-basis:96px; width:96px; height:96px; }
 .mup-derma-points { gap:9px 16px; }
 .mup-derma-points li { font-size:.8rem; }
 .mup-hero { padding:0; }
 .mup-hero-scene { aspect-ratio:auto; min-height:calc(177.68vw + 125px); }
 .mup-hero-picture { top:auto; aspect-ratio:941/1672; }
 .mup-hero-picture img { object-fit:contain; }
 .mup-hero-copy { width:100%; max-width:none; padding:125px 22px 0; }
 .mup-hero-copy .brand-breadcrumb { font-size:.65rem; margin-bottom:17px; }
 .mup-hero h1 { font-size:clamp(2.7rem,11vw,4.1rem); margin:12px 0 14px; }
 .mup-hero h1 em { display:inline; }
 .mup-hero-intro { max-width:330px; font-size:.91rem; }
 .mup-hero .brand-actions { margin-top:18px; gap:16px; }
 .mup-hero .brand-button { padding:13px 18px; min-height:46px; }
 .mup-proof { padding:24px 22px; }
 .mup-introduction .brand-intro-heading { grid-template-columns:1fr; }
 .mup-filter { gap:8px; margin-top:27px; }
 .mup-filter button { padding:12px 15px; font-size:.78rem; }
 .mup-explorer-context { align-items:start; flex-direction:column; gap:15px; }
 .mup-explorer-context h3 { font-size:1.6rem; }
 .mup-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:27px 15px; }
 .mup-card figure { aspect-ratio:.78; }
 .mup-card img { padding:10px; }
 .mup-card-copy { padding-top:15px; }
 .mup-card-copy h3 { font-size:1.4rem; overflow-wrap:anywhere; }
 .mup-card-copy>span { font-size:.6rem; }
 .mup-card-copy p { font-size:.78rem; }
 .mup-card-action { font-size:.73rem; gap:12px; }
 .mup-nuance-heading { flex-direction:column; align-items:start; gap:25px; }
 .mup-catalog-actions { flex-direction:row; flex-wrap:wrap; justify-content:start; gap:15px; }
 .mup-tone-selector { margin-top:30px; }
 .mup-tone-levels button { flex-basis:83px; }
 .mup-tone-label { flex-wrap:wrap; gap:8px; }
 .mup-shade-heading { flex-direction:column; gap:10px; }
 .mup-shade-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 .mup-shade { padding:9px 8px 13px; }
 .mup-shade-selection { flex-direction:column; align-items:start; padding:21px; gap:20px; }
 .mup-shade-selection .brand-button { width:100%; }
 .mup-shade-selection p { align-items:start; }
 .mup-social-heading { align-items:start; flex-direction:column; gap:20px; margin-bottom:25px; }
 .mup-social-posts { grid-template-columns:repeat(3,min(78vw,320px)); gap:16px; }
 .mup-social-scroll { scroll-snap-type:x mandatory; }
 .mup-social-hint { display:flex; justify-content:space-between; gap:15px; margin-bottom:15px; font-size:.73rem; color:#536058; }
 .mup-social-copy { padding:20px; }
 .mup-dialog-layout { grid-template-columns:1fr; }
 .mup-dialog-visual { min-height:0; }
 .mup-dialog-visual img { height:300px; padding:20px; }
 .mup-dialog-copy { padding:26px 24px; }
 .mup-dialog-copy h2 { font-size:2.35rem; }
}
@media(max-width:360px) { .mup-hero-scene { min-height:calc(177.68vw + 200px); } .mup-hero .brand-actions { flex-direction:column; align-items:start; gap:6px; } .mup-product-grid { grid-template-columns:1fr; } .mup-card figure { aspect-ratio:1.15; } }
@media(prefers-reduced-motion:reduce) { .mup-page *, .mup-product-dialog * { transition:none!important; } .mup-card:hover img { transform:none; } }
@media(min-width:761px) and (max-width:1100px) { .mup-shade-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:480px) { .mup-shade-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mup-shade img { max-width:130px; } .mup-shade-name { font-size:.72rem; } .mup-shade-code { font-size:1.2rem; } }

/* New square packshots: preserve original spacing and the whole package. */
.mup-card img[src*="20261009"] { padding:0; }
.mup-dialog-visual img[src*="20261009"] { padding:0; }