/* A restrained retail system: straight campaign edges, softly rounded cards. */
:root { --paper:#fff; --ink:#172631; --navy:#112f49; --muted:#53616b; --line:#dde2e6; --sage:#f1f4f6; --accent:#165b94; --serif:var(--sans); }
h1,h2,h3 { font-family:var(--sans); font-weight:600; letter-spacing:-.035em; line-height:1.15; }
h2 { font-size:clamp(30px,3.3vw,46px); }
h1 em,h2 em,h3 em { font-style:normal; }
.site-header { background:#fffffff5; }
.topbar { letter-spacing:.04em; text-transform:none; }
.brand-symbol { transform:none; }
.button,.header-cta { border-radius:6px; }
.button { font-size:13px; padding:15px 24px; }
.eyebrow { letter-spacing:.09em; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.retail-hero { background:#102638; position:relative; color:#fff; outline-offset:-4px; }
.campaign-slide { min-height:540px; position:relative; overflow:hidden; display:flex; align-items:center; }
.campaign-photo { position:absolute; inset:0 0 0 40%; overflow:hidden; }
.campaign-photo img { position:absolute; top:-25%; left:0; width:100%; height:150%; max-width:none; object-fit:cover; }
.campaign-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#102638 0%,#10263800 40%); }
.campaign-copy { position:relative; z-index:1; width:min(1280px,calc(100% - 96px)); margin:auto; padding:78px 0 95px; pointer-events:none; }
.campaign-copy > * { max-width:390px; pointer-events:auto; }
.campaign-copy .eyebrow { color:#d1e3ef; font-size:13px; margin-bottom:18px; }
.campaign-copy h2 { font-size:clamp(38px,4.3vw,60px); margin-bottom:22px; max-width:430px; }
.campaign-copy > p:not(.eyebrow) { font-size:16px; line-height:1.8; color:#e0e9ee; }
.campaign-copy .button { margin-top:28px; color:#15344d; background:#fff; }
.oral-campaign { background:#edf3f6; color:var(--ink); }
.oral-campaign .campaign-photo::after { background:linear-gradient(90deg,#edf3f6,#edf3f600 40%); }
.oral-campaign .campaign-copy p { color:#475a68; }
.oral-campaign .button { color:#fff; background:var(--navy); }
.carousel-controls { position:absolute; left:calc((100% - min(1280px,100% - 96px))/2); bottom:22px; z-index:2; display:flex; align-items:center; gap:13px; color:inherit; }
.carousel-controls button { min-width:44px; min-height:44px; color:inherit; border:1px solid currentColor; background:transparent; border-radius:50%; }
.carousel-controls button:focus-visible { outline-color:currentColor; }
.carousel-controls .carousel-dots { display:flex; gap:0; }
.carousel-dots button { border:0; display:grid; place-items:center; }
.carousel-dots span { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; }
.carousel-dots [aria-pressed=true] span { opacity:1; width:24px; border-radius:6px; }
.carousel-position { font-size:11px; letter-spacing:.1em; padding-inline:6px; }
.retail-hero:has(.oral-campaign:not([hidden])) { color:var(--ink); }
.brand-strip { padding-block:30px; }
.section { padding-block:72px; }
.section-tinted { background:#f5f7f8; }
.category-grid { gap:24px; }
.category-card.real-category { border-radius:12px; background:#f0f3f5; min-height:360px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:8px; padding:54px 30px 30px; }
.category-card.real-category .category-copy { max-width:none; min-width:0; position:static; }
.category-card.real-category > img { position:static; width:100%; height:240px; object-fit:contain; transform:none; mix-blend-mode:multiply; }
.category-card.real-category:hover > img { transform:translateY(-4px); }
.category-card h3 { font-size:clamp(24px,2.3vw,32px); overflow-wrap:normal; }
.category-card .category-number { font-size:10px; top:22px; left:30px; }
.category-card p { font-size:13px; }
.category-card .eyebrow { display:none; }
.category-card.oral { background:#edf4f7; }
.product-image { border-radius:10px; border:1px solid #e8edf0; }
.product-name { letter-spacing:-.015em; font-weight:550; }
.filter { border-radius:6px; }
.brand-panel,.more-brands > a { border-radius:10px; }
.brand-panel { background:#f0f4f7; }
.brand-panel.gillette { background:#e9eef4; }
.brand-panel h3 { font-family:var(--sans); font-size:30px; }
.ritual { border-radius:12px; overflow:hidden; background:#edf3f6; }
.ritual-copy h2 { font-size:38px; }
.trade-banner { border-radius:12px; background:#112f49; }
.trade-banner h2 { font-size:36px; }
.product-fit,.market-panel,.contact-form { border-radius:10px; }
@media(min-width:1440px) { .campaign-slide { min-height:600px; } }
@media(max-width:1000px) and (min-width:701px) {
 .campaign-copy > * { max-width:310px; } .campaign-copy h2 { max-width:340px; font-size:44px; }
 .campaign-photo { left:36%; } .category-card.real-category { padding-inline:22px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
}
@media(max-width:700px) {
 .campaign-slide { display:flex; flex-direction:column; min-height:0; }
 .campaign-photo { position:relative; inset:auto; width:100%; aspect-ratio:3/2; }
 .campaign-photo::after { display:none; }
 .campaign-copy { width:100%; padding:28px 24px 85px; margin:0; }
 .campaign-copy > * { max-width:100%; }
 .campaign-copy h2 { font-size:36px; max-width:100%; margin-bottom:14px; }
 .campaign-copy .eyebrow { font-size:11px; margin-bottom:12px; }
 .campaign-copy > p:not(.eyebrow) { font-size:14px; line-height:1.7; }
 .campaign-copy .button { margin-top:20px; font-size:13px; padding:13px 20px; }
 .carousel-controls { left:24px; bottom:16px; gap:8px; }
 .brand-strip { padding-block:25px; }
 .section { padding-block:48px; }
 .section-head h2 { font-size:32px; }
 .category-card.real-category { min-height:310px; padding:52px 24px 26px; }
 .category-card.real-category > img { width:100%; height:220px; }
 .category-card h3 { font-size:25px; }
 .category-card .category-number { left:24px; }
 .category-card p { font-size:12px; }
 .category-card .text-link { font-size:12px; }
 .brand-panel h3 { font-size:28px; }
 .ritual-copy h2 { font-size:32px; }
 .trade-banner h2 { font-size:32px; }
 .brand-strip .brand-logos { gap:28px; }
 .carousel-position { font-size:10px; }
}
@media(max-width:370px) { .campaign-copy h2 { font-size:31px; } .category-card.real-category { gap:4px; padding-inline:19px; } .category-card h3 { font-size:22px; } }
/* Both campaigns share their tallest layout, so switching never moves the page. */
.carousel-stage { display:grid; }
.campaign-slide { grid-area:1 / 1; }
.campaign-slide[hidden] { display:flex!important; visibility:hidden; pointer-events:none; }
.oralb-wordmark,.wahl-wordmark { white-space:nowrap; }
@media(max-width:700px) { .campaign-photo { flex-shrink:0; } }
h1,h2,h3 { overflow-wrap:anywhere; }
.faq > * { min-width:0; }
@media(max-width:650px) { .faq h2 { font-size:32px; } }
.brand-panel.gillette { color:var(--ink); }
.brand-panel.gillette p { color:var(--muted); }
.brand-panel.gillette .text-link { border-color:#768795; }
.brand-panel.gillette .brand-panel-logo { filter:none; }
/* Country picker follows the same compact, lightly rounded retail system. */
.market-toggle { border-radius:6px; padding-inline:10px; transition:background .15s; }
.market-toggle:hover,.market-switcher[open] .market-toggle { background:#edf3f8; }
.market-panel { width:440px; padding:18px; border:1px solid #dce4ea; border-radius:12px; background:#fff; box-shadow:0 12px 32px #17263114; max-height:min(700px,calc(100svh - 130px)); overflow:hidden; }
.market-switcher[open] .market-panel { display:flex; flex-direction:column; }
.market-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-shrink:0; }
.market-panel-head .market-panel-title { margin:0; font-size:18px; font-weight:600; letter-spacing:-.025em; line-height:1.4; }
.market-close { display:grid; place-items:center; width:40px; min-width:40px; height:40px; border:0; border-radius:6px; background:#f0f3f5; }
.market-close:hover { background:#e5edf3; }
.market-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.market-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; overflow:auto; min-height:0; padding:2px; scrollbar-width:thin; }
.market-options a { position:relative; min-width:0; min-height:61px; padding:10px 8px; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; border:1px solid transparent; border-radius:8px; background:#f5f7f9; transition:background .15s,border-color .15s; }
.market-options a:hover { background:#edf3f8; border-color:#b7cadb; }
.market-options a[aria-current] { background:#eaf2f9; border-color:#1b5a8d; }
.market-options .market-code { width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; border:1px solid #dbe3e9; border-radius:5px; background:#fff; color:#526679; font-size:9px; letter-spacing:.03em; font-weight:600; }
.market-options .market-option-copy { display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:9px; }
.market-options .market-option-copy > span { font-size:12px; font-weight:550; line-height:1.4; overflow-wrap:anywhere; }
.market-options small { color:#586b79; font-size:10px; line-height:1.5; }
.market-check { position:absolute; width:13px; height:13px; right:6px; top:8px; fill:none; stroke:#165b94; stroke-width:2; }
.market-panel-foot { border-top:1px solid #e1e7ec; padding-top:12px; margin-top:14px; flex-shrink:0; }
.market-auto { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:44px; margin:0; padding:10px; border-radius:6px; background:#112f49; color:#fff; font-size:12px; line-height:1.5; text-decoration:none; }
.market-auto:hover { background:#1b4b70; }
.market-auto svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.3; }
.market-help { margin-top:10px; font-size:11px; line-height:1.7; color:#586b79; }
@media(max-width:650px) {
 .market-toggle { padding-inline:5px; }
 .market-panel { top:78px; left:12px; right:12px; width:auto; padding:14px; max-height:calc(100svh - 92px); }
 .market-panel-head { margin-bottom:10px; }
 .market-panel-head .market-panel-title { font-size:18px; }
 .market-options a { min-height:58px; padding:9px 6px; gap:6px; }
 .market-options .market-code { width:25px; height:25px; font-size:8px; }
 .market-options .market-option-copy > span { font-size:12px; }
 .market-options small { font-size:10px; }
 .market-panel-foot { margin-top:10px; padding-top:10px; }
 .market-help { font-size:11px; }
 .market-close { min-width:44px; width:44px; height:44px; }
}
@media(max-width:370px) {
 .market-panel { padding:12px; }
 .market-options .market-code { display:none; }
 .market-options a { padding:9px; }
}
@media(max-width:650px) {
 .market-options .market-option-copy > span { font-size:14px; }
 .market-options small { font-size:12px; }
 .market-options a { min-height:62px; }
}
@media(max-width:650px) {
 .site-header { backdrop-filter:none; }
 .market-panel { top:var(--picker-top,106px); max-height:calc(100svh - var(--picker-top,106px) - 12px); }
}
/* Local SVGs keep each small flag consistent across browsers and devices. */
.market-flag { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:28px; min-width:28px; height:24px; }
.market-flag img { display:block; width:24px; height:18px; max-width:none; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px #17263112; }
.market-toggle .market-flag { width:22px; min-width:22px; }
.market-toggle .market-flag img { width:20px; height:15px; }
@media(max-width:370px) {
 .market-options a { gap:6px; padding:9px 6px; }
 .market-options .market-flag { width:22px; min-width:22px; }
 .market-options .market-flag img { width:20px; height:15px; }
 .market-options .market-option-copy > span { font-size:13px; }
 .market-options small { font-size:11px; }
}