/* Design 4: isolated navigation/homepage skin. All lower-page components are reused. */
:root{--d4-white:var(--fp-card)}
.stickyHeader,.mastShell,.d4Navigation{background:var(--ivory)}
.d4Navigation .brands{justify-content:center;gap:clamp(24px,4vw,68px);overflow:visible;min-height:58px}
.d4Navigation a,.d4Navigation summary{font-family:var(--font-interface);font-size:14px;white-space:nowrap;text-decoration:none;min-height:44px;display:flex;align-items:center;padding:10px 4px;gap:8px}
.d4Navigation a:hover,.d4Navigation summary:hover,.d4Navigation [aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:7px}
.d4Categories{position:relative}
.d4Categories>summary{list-style:none;cursor:pointer}
.d4Categories>summary::-webkit-details-marker{display:none}
.d4CategoryPanel{position:absolute;top:100%;left:0;width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--nav-height,180px) - 24px);overflow:auto;scrollbar-width:none;background:var(--ivory);border:1px solid var(--beige);border-radius:14px;padding:16px;box-shadow:0 8px 24px rgb(48 62 52 / .07)}
.d4CategoryPanel::-webkit-scrollbar{display:none}
.d4CategoryPanel .categoryTree{padding:0}
.d4CategoryPanel a,.d4CategoryPanel summary{white-space:normal}
.d4Homepage{padding-top:24px}
.d4HomeContent{min-width:0}
.d4Hero{position:relative;isolation:isolate;min-height:500px;border:1px solid var(--beige);border-radius:18px;overflow:hidden;display:flex;align-items:center;background:var(--cream)}
.d4HeroImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% 42%;z-index:-2}
.d4Hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--fp-ivory) 0%,color-mix(in srgb,var(--fp-ivory) 93%,transparent) 27%,color-mix(in srgb,var(--fp-ivory) 42%,transparent) 52%,color-mix(in srgb,var(--fp-ivory) 0%,transparent) 72%);z-index:-1}
.d4HeroCopy{padding:42px clamp(24px,4vw,64px);width:min(680px,61%)}
.d4Hero h1{font-size:clamp(36px,4vw,56px);line-height:1.06;font-weight:500;margin:12px 0 20px;font-style:italic}
.d4HeroCopy>p:not(.eyebrow){max-width:390px;margin:0;font-size:16px;line-height:1.65}
.d4Hero .homeEditorialLinks{gap:18px;margin-top:26px}
.d4Hero .primary{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.d4Hero .primary svg{width:19px;height:19px}
.d4Homepage .benefits{grid-template-columns:repeat(3,minmax(0,1fr));padding:24px 0 0;gap:20px}
.d4Homepage .section:last-child{margin-bottom:0}
.d4Homepage .sectionHead,.d4Homepage .homeSectionNote{text-align:center;justify-content:center}
.d4Homepage .sectionHead>a{margin-left:12px}
.d4Homepage .homeProductSection .grid.productGrid{grid-template-columns:repeat(5,minmax(0,1fr))}
.d4Homepage .homeCategory img,.d4Homepage .homeCategorySymbol{aspect-ratio:1.35}
.d4Homepage .homeCategory img.d4CategoryProduct{object-fit:contain;background:var(--d4-white)}
.design4Home .footerNewsletterCompact{margin:0 0 40px}
@media(min-width:769px) and (max-width:1350px){.d4Homepage .homeProductSection .grid.productGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:681px) and (max-width:900px){.d4HeroCopy{width:70%;padding:30px}.d4Hero{min-height:460px}}
@media(max-width:768px){
 .stickyHeader{display:block;position:sticky;top:0;z-index:8}
 .mastShell{position:relative;top:auto}
 .mastShell .mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-block:8px;min-height:0}
 .mastShell .logo{font-size:clamp(25px,5vw,34px);gap:5px}
 .mastShell .logo svg{width:34px;height:34px}
 .mastShell .logo small{font-size:8px}
 .mastShell .search{grid-row:2;grid-column:1/-1;max-width:none}
 .mastShell .actions{gap:7px}
 .mastShell .actions a:not([href$="/cos"]){display:none}
 .mastShell .actions a span:not(.badge){display:none}
 .mastShell .actions a{min-width:36px}
 .mobileCategories{display:inline-grid;place-items:center;min-height:40px;min-width:40px;padding:5px;background:var(--ivory)}
 .d4Navigation{display:none;position:absolute;inset:100% 0 auto;border-top:1px solid var(--beige);box-shadow:0 8px 20px rgb(48 62 52 / .07);max-height:calc(100dvh - var(--nav-height,130px) - 16px);overflow:auto;overscroll-behavior:contain}
 .d4Navigation.is-open{display:block}
 .d4Navigation .brands{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:12px;min-height:0}
 .d4Navigation .brands>a,.d4Navigation .brands>.d4Categories>summary{padding:12px;min-height:44px;border-bottom:1px solid var(--beige)}
 .d4CategoryPanel{position:static;width:100%;max-width:100%;max-height:none;box-shadow:none;padding:8px;border-radius:10px}
 .d4Homepage{padding-top:16px}
 .d4Homepage .homeProductSection .grid.productGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .d4Hero{min-height:440px}
 .d4HeroCopy{width:70%;padding:26px}
 .d4Hero .homeEditorialLinks{align-items:flex-start;flex-direction:column;gap:12px;margin-top:20px}
 .d4Homepage .benefits{gap:12px;padding-top:20px}
 .d4Homepage .benefits span{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){
 .d4Hero{min-height:570px;align-items:flex-end}
 .d4HeroImage{object-position:70% 30%}
 .d4Hero::before{background:linear-gradient(0deg,var(--fp-ivory) 0%,color-mix(in srgb,var(--fp-ivory) 96%,transparent) 36%,color-mix(in srgb,var(--fp-ivory) 66%,transparent) 57%,color-mix(in srgb,var(--fp-ivory) 0%,transparent) 80%)}
 .d4HeroCopy{width:100%;padding:24px 20px}
 .d4Hero h1{font-size:36px;line-height:1.08;margin:10px 0 14px}
 .d4HeroCopy>p:not(.eyebrow){font-size:15px}
 .d4Homepage .homeProductSection .grid.productGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .d4Homepage .sectionHead{align-items:center;flex-direction:column;gap:10px}
 .d4Homepage .sectionHead>a{margin:0}
 .d4Homepage .benefits{grid-template-columns:1fr;gap:12px}
 .d4Homepage .benefits span{flex-direction:row;align-items:center}
}

.d4Hero .primary{background:var(--fp-action);border-color:var(--fp-action);color:var(--fp-card)}
.d4Hero .primary:hover{background:var(--fp-hover)}