/* Desktop cloud: a stable first row, with a connected category ribbon below. */
:root { --paper:#fffdfc; --cream:#faf8f5; --pearl:#f8f3f1; --wine:#923a57; --wine-soft:#a85970; --line:#eae4e0; --cloud-paper:#fcf9f6; --catalog-paper:#fdfbf8; --catalog-line:#ece5df; --catalog-ink:#554b49; --cloud-ease:cubic-bezier(.23,1,.32,1); --cloud-morph:560ms cubic-bezier(.65,0,.35,1); }
body { background-image:none; }
.shipping-notice { position:relative; width:100%; min-height:34px; display:flex; align-items:center; justify-content:center; padding:7px 52px; background:#efacc2; color:#4d2635; }
.shipping-notice[hidden] { display:none; }
.shipping-notice p { margin:0; text-align:center; font-size:12px; line-height:20px; }
.shipping-notice button { position:absolute; right:16px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:32px; height:32px; border-radius:8px; }
.shipping-notice button .icon { width:16px; height:16px; }
.shipping-notice button:focus-visible { outline:2px solid var(--wine); outline-offset:1px; }
#main.shell { width:min(1260px,calc(100% - 80px)); }
.site-header.cream-cloud-header { position:sticky; top:14px; z-index:65; height:132px; padding:0; margin-top:14px; background:transparent; border:0; }
.site-header.cream-cloud-header .header-inner { position:relative; width:min(1260px,calc(100% - 64px)); height:126px; min-height:0; padding:0; display:block; background:var(--cloud-paper); border:1px solid var(--line); border-radius:28px; box-shadow:0 5px 18px #502d3405; transition:width var(--cloud-morph),height var(--cloud-morph),border-radius var(--cloud-morph),box-shadow var(--cloud-morph); }
.site-header.cream-cloud-header .header-main { position:relative; isolation:auto; display:grid; grid-template-columns:204px 0px minmax(0,1fr) 125px 50px 126px; align-items:center; gap:0 18px; height:76px; padding:8px 26px; transition:grid-template-columns var(--cloud-morph),column-gap var(--cloud-morph),padding var(--cloud-morph); }
.header-main::before { content:none; }
.site-header.cream-cloud-header .header-main .brand { position:relative; width:204px; height:58px; min-width:0; margin:0; display:block; overflow:hidden; transform:none; transition:width var(--cloud-morph),height var(--cloud-morph); mix-blend-mode:multiply; }
.site-header.cream-cloud-header .brand .brand-image-window { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; overflow:hidden; transform:none; transition:none; }
.site-header.cream-cloud-header .brand .brand-image-window img { position:absolute; width:208px; max-width:none; height:auto; left:-4px; top:-19px; mix-blend-mode:normal; transition:width var(--cloud-morph),left var(--cloud-morph),top var(--cloud-morph); }
.site-header.cream-cloud-header .category-menu { position:relative; width:0; height:40px; opacity:0; pointer-events:none; overflow:hidden; transition:opacity 260ms ease,width var(--cloud-morph); }
.site-header.cream-cloud-header .category-menu-trigger { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--catalog-line); border-radius:50%; color:var(--catalog-ink); background:var(--catalog-paper); transition:background 150ms ease,transform 140ms var(--cloud-ease); }
.site-header.cream-cloud-header .category-menu-trigger .icon { width:20px; height:20px; }
.site-header.cream-cloud-header .header-main .search-form { position:relative; grid-column:auto; grid-row:auto; left:auto; top:auto; right:auto; width:100%; height:44px; min-width:0; padding:0 16px; margin:0; background:#fff; border:1px solid #eee7e2; border-radius:14px; transition:box-shadow 150ms ease; }
.site-header.cream-cloud-header .header-main .search-form input { font-family:inherit; font-size:14px; }
.site-header.cream-cloud-header .header-main .search-form input::placeholder { opacity:1; color:#8b8287; }
.site-header.cream-cloud-header .header-main .search-form .icon { width:18px; height:18px; color:#8e8387; }
.site-header.cream-cloud-header .header-main .header-actions { display:flex; align-items:center; grid-column:auto; grid-row:auto; height:44px; gap:9px; }
.site-header.cream-cloud-header .header-actions .icon-button { width:36px; height:40px; opacity:1; filter:none; overflow:visible; pointer-events:auto; transition:background 150ms ease,transform 140ms var(--cloud-ease); }
.site-header.cream-cloud-header .header-favorites { display:inline-flex; }
.site-header.cream-cloud-header .mobile-menu { display:none; }
.site-header.cream-cloud-header .header-actions .icon { width:23px; height:23px; }
.site-header .header-actions .count { background:var(--wine); box-shadow:0 0 0 2px var(--cloud-paper); }
.customer-menu { position:relative; height:44px; z-index:4; }
.customer-menu-trigger { display:flex; align-items:center; gap:8px; height:44px; padding:0 4px; font-size:13px; white-space:nowrap; }
.customer-menu-trigger .icon,.language-toggle .icon { width:13px; height:13px; color:#a68c85; transition:transform 180ms var(--cloud-ease); }
.customer-menu-trigger[aria-expanded="true"] .icon { transform:rotate(180deg); }
.customer-menu-panel { position:absolute; z-index:90; top:calc(100% + 14px); right:-10px; width:228px; padding:10px; border:1px solid var(--line); border-radius:18px; background:var(--catalog-paper); box-shadow:0 15px 42px #46253014; transform-origin:top right; }
/* Keep the pointer inside this menu while crossing its visual gap. */
.customer-menu-panel::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.customer-menu-panel button { display:block; min-height:40px; width:100%; padding:9px 12px; text-align:left; border-radius:8px; font-size:14px; color:#4b3e45; }
.header-language { display:flex; align-items:center; justify-content:center; }
.site-header .language-toggle { position:static; display:flex; align-items:center; justify-content:center; gap:7px; width:50px; height:40px; padding:0; background:transparent; font-size:12px; color:var(--ink); }
.site-header.cream-cloud-header .header-inner .cloud-nav { position:absolute; left:0; top:76px; display:block; grid-column:auto; grid-row:auto; margin:0; padding:0; width:100%; max-width:none; height:calc(100% - 76px); opacity:1; filter:none; overflow:hidden; pointer-events:auto; transition:height var(--cloud-morph),opacity 340ms ease,filter 340ms ease,transform var(--cloud-morph),visibility 560ms,top var(--cloud-morph); }
.site-header.cream-cloud-header .cloud-nav-links { position:relative; inset:auto; display:flex; align-items:center; justify-content:center; gap:16px; width:100%; height:48px; padding:0 24px; transform:none; border:0; border-top:1px solid #ece5df; border-radius:0 0 28px 28px; background:transparent; opacity:1; transition:none; }
.site-header.cream-cloud-header .cloud-nav-links button { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; flex:0 1 180px; height:46px; padding:0 12px; font-size:15px; font-weight:400; white-space:normal; line-height:1.2; border-radius:10px; transition:color 140ms ease,background 140ms ease; }
.site-header.cream-cloud-header .cloud-nav-links button::after { content:none; }
.site-header.cream-cloud-header .cloud-nav-links button .icon { width:13px; height:13px; color:#a68c85; }
.site-header.cream-cloud-header .cloud-nav-links button[aria-expanded="true"] { color:var(--wine); background:#f4eeeb; }
.site-header.cream-cloud-header.is-floating .header-inner { width:min(1080px,calc(100% - 64px)); height:78px; border-radius:38px; box-shadow:0 10px 30px #4625300c; }
.site-header.cream-cloud-header.is-floating .header-main { grid-template-columns:164px 40px minmax(0,1fr) 125px 50px 126px; gap:0 15px; padding-inline:22px; }
.site-header.cream-cloud-header.is-floating .header-main::before { border-radius:38px; box-shadow:0 10px 30px #4625300c; }
.site-header.cream-cloud-header.is-floating .header-main .brand { width:164px; height:48px; }
.site-header.cream-cloud-header.is-floating .brand .brand-image-window img { width:168px; left:-3px; top:-16px; }
.site-header.cream-cloud-header.is-floating .category-menu { width:40px; opacity:1; pointer-events:auto; }
.site-header.cream-cloud-header.is-floating .customer-menu-trigger { font-size:13px; }
.cloud-ribbon-surface { position:relative; width:100%; height:48px; }
/* The row fades out as the main frame contracts. Its fixed contents do not reflow. */
.site-header.cream-cloud-header.is-floating .header-inner .cloud-nav { position:absolute; left:0; top:76px; height:48px; visibility:hidden; opacity:0; filter:blur(5px); transform:translateY(-12px); transform-origin:top; pointer-events:none; }
.site-header.cream-cloud-header.is-floating .cloud-nav-links { gap:16px; position:absolute; bottom:0; border:1px solid var(--catalog-line); border-radius:24px; background:var(--catalog-paper); box-shadow:0 12px 30px #3559400c; }
.site-header.cream-cloud-header.is-floating.is-categories-open .header-inner .cloud-nav { top:100px; visibility:visible; opacity:1; filter:none; transform:translateY(0); pointer-events:auto; }
.site-header.cream-cloud-header.is-categories-open .category-menu-trigger { background:var(--catalog-paper); border-color:transparent; }
.site-header.cream-cloud-header.is-keyboard-navigation .cloud-nav,.site-header.cream-cloud-header.is-keyboard-navigation .cloud-nav-links { transition:none; }
@media(hover:hover) and (pointer:fine) {
 .customer-menu-panel button:hover { background:#f4eeeb; color:var(--wine); }
 .site-header.cream-cloud-header .cloud-nav-links button:hover { color:var(--wine); background:#f4eeeb; }
 .site-header.cream-cloud-header .category-menu-trigger:hover { background:#f2eeea; }
 .customer-menu-trigger:hover { color:var(--wine); }
}
.site-header.cream-cloud-header .icon-button:active,.site-header.cream-cloud-header .category-menu-trigger:active { transform:scale(.97); }
@media(max-width:1150px) and (min-width:701px) {
 .site-header.cream-cloud-header .header-main { grid-template-columns:170px 0px minmax(0,1fr) 116px 40px 108px; gap:0 12px; padding-inline:18px; }
 .site-header.cream-cloud-header .header-main .brand { width:170px; height:50px; }
 .site-header.cream-cloud-header .brand .brand-image-window img { width:196px; left:-12px; top:-15px; }
 .site-header.cream-cloud-header.is-floating .header-main { grid-template-columns:150px 36px minmax(0,1fr) 116px 40px 108px; gap:0 10px; padding-inline:18px; }
 .site-header.cream-cloud-header.is-floating .header-main .brand { width:150px; }
 .site-header.cream-cloud-header .header-actions { gap:4px!important; }
 .site-header.cream-cloud-header .header-actions .icon-button { width:32px; }
 .customer-menu-trigger { font-size:13px; }
 .site-header.cream-cloud-header .cloud-nav-links { gap:6px; padding-inline:12px; }
 .site-header.cream-cloud-header .cloud-nav-links button { padding-inline:8px; font-size:14px; }
}
/* A safe narrow baseline; the dedicated phone design is a later owner task. */
@media(max-width:700px) {
 .site-header.cream-cloud-header { top:8px; margin-top:8px; }
 .site-header.cream-cloud-header .header-inner,.site-header.cream-cloud-header.is-floating .header-inner { width:calc(100% - 24px); }
 .site-header.cream-cloud-header .header-main { grid-template-columns:110px 0px minmax(40px,1fr) 30px auto; gap:0 5px; padding:8px 10px; height:68px; }
 .site-header.cream-cloud-header .header-main .brand { width:110px; height:36px; }
 .site-header.cream-cloud-header .brand .brand-image-window img { width:128px; left:-8px; top:-10px; }
 .site-header.cream-cloud-header .customer-menu { display:none; }
 .site-header.cream-cloud-header .header-main .search-form { min-width:0; height:38px; padding-inline:8px; border-radius:12px; gap:5px; }
 .site-header.cream-cloud-header .header-main .search-form input { font-size:16px; }
 .site-header.cream-cloud-header .header-actions .icon-button { width:28px; height:36px; }
 .site-header.cream-cloud-header .header-main .header-actions { gap:2px; }
 .site-header .language-toggle { width:28px; gap:2px; font-size:11px; }
 .site-header .language-toggle .icon { width:9px; }
 .site-header.cream-cloud-header .cloud-nav-links { gap:2px; padding:0 5px; }
 .site-header.cream-cloud-header .cloud-nav-links button { min-width:0; flex:1; padding:0 6px; font-size:11px; gap:2px; }
 .site-header.cream-cloud-header.is-floating .header-main { grid-template-columns:84px 30px minmax(30px,1fr) 28px auto; padding-inline:8px; gap:0 4px; }
 .site-header.cream-cloud-header.is-floating .header-main .brand { width:84px; height:32px; }
 .site-header.cream-cloud-header.is-floating .brand .brand-image-window img { width:100px; left:-7px; top:-8px; }
 .site-header.cream-cloud-header.is-floating .category-menu,.site-header.cream-cloud-header.is-floating .category-menu-trigger { width:30px; height:32px; }
 .site-header.cream-cloud-header.is-floating .header-inner .cloud-nav { top:82px; }
 .site-header.cream-cloud-header.is-floating .cloud-nav-links { gap:6px; }
}
@media(prefers-reduced-motion:reduce) {
 .site-header.cream-cloud-header .header-inner,.site-header.cream-cloud-header .header-main,.site-header.cream-cloud-header .brand,.site-header.cream-cloud-header .brand img,.site-header.cream-cloud-header .category-menu,.site-header.cream-cloud-header .header-inner .cloud-nav,.site-header.cream-cloud-header .cloud-nav-links,.site-header.cream-cloud-header .icon-button,.site-header.cream-cloud-header .category-menu-trigger { transition:none; transform:none; }
 .site-header.cream-cloud-header.is-floating .header-inner .cloud-nav { transform:none; }
}

@media(prefers-reduced-motion:reduce) { header.cream-cloud-header,header.cream-cloud-header * { transition:none!important; animation:none!important; } }

.site-header.cream-cloud-header .cloud-nav-links [data-shop-section="special-care"] { flex-basis:230px; }


/* One contour grows from the entire button into the lower panel. */
.cloud-fluid-shape { position:absolute; left:0; top:0; height:156px; display:none; z-index:1; overflow:visible; pointer-events:none; }
.cloud-fluid-shape path { fill:var(--catalog-paper); stroke:var(--catalog-line); stroke-width:1; }
.site-header.cream-cloud-header .header-main { z-index:3; }
.site-header.cream-cloud-header .cloud-nav { z-index:2; }
.site-header.cream-cloud-header.is-floating .cloud-ribbon-surface { position:absolute; top:0; height:48px; clip-path:none; }
.site-header.cream-cloud-header.is-floating .cloud-nav-links { border:0; background:transparent; box-shadow:none; }
.site-header.cream-cloud-header.is-floating .header-inner .cloud-nav { top:100px; filter:none; transform:none; transition:visibility 800ms; }
.site-header.cream-cloud-header.is-floating.is-categories-open .header-inner .cloud-nav { opacity:1; filter:none; transform:none; }
.site-header.cream-cloud-header.is-floating .cloud-nav-links button { color:var(--catalog-ink); }
.site-header.cream-cloud-header.is-floating .cloud-nav-links button:hover,.site-header.cream-cloud-header.is-floating .cloud-nav-links button[aria-expanded="true"] { background:#f2eeea; color:#6b5145; }
.site-header.cream-cloud-header .category-menu-trigger:hover { background:#f2eeea; }
.site-header.cream-cloud-header.is-categories-open .category-menu-trigger { background:transparent; border-color:transparent; }
.site-header.cream-cloud-header .category-menu-trigger:focus-visible { outline:2px solid var(--catalog-ink); outline-offset:-3px; border-radius:50%; }

.site-header.cream-cloud-header .header-main .brand { mix-blend-mode:normal; background:var(--cloud-paper); }
.site-header.cream-cloud-header .brand .brand-image-window img { mix-blend-mode:multiply; }

.site-header.cream-cloud-header.is-header-morphing .header-inner .cloud-nav { top:76px; height:calc(100% - 76px); overflow:hidden; visibility:visible; border-radius:0 0 28px 28px; transition:none; pointer-events:none; }
.site-header.cream-cloud-header.is-floating.is-fluid-closing .header-inner .cloud-nav { visibility:visible; opacity:1; pointer-events:none; }
.site-header.cream-cloud-header .cloud-nav-links button { gap:7px; }
.site-header.cream-cloud-header .cloud-nav-links button .category-symbol { width:19px; height:19px; flex-shrink:0; color:#876c67; stroke-width:1.5; }
.site-header.cream-cloud-header .cloud-nav-links button .category-label { min-width:0; }
.site-header.cream-cloud-header .cloud-nav-links button > .icon:not(.category-symbol) { width:11px; height:11px; flex-shrink:0; color:#a58f87; }
@media(max-width:1150px) { .site-header.cream-cloud-header .cloud-nav-links { gap:3px; } .site-header.cream-cloud-header .cloud-nav-links button { gap:5px; padding-inline:5px; font-size:13px; } .site-header.cream-cloud-header .cloud-nav-links button .category-symbol { width:17px; height:17px; } }
@media(max-width:700px) { .site-header.cream-cloud-header .cloud-nav-links button .category-symbol { display:none; } }

@media(min-width:701px) and (max-width:1000px) {
 .site-header.cream-cloud-header .cloud-nav-links { gap:2px; padding-inline:10px; }
 .site-header.cream-cloud-header .cloud-nav-links button,.site-header.cream-cloud-header .cloud-nav-links [data-shop-section="special-care"] { flex:1 1 auto; gap:4px; padding-inline:4px; font-size:12px; }
 .site-header.cream-cloud-header .cloud-nav-links button .category-symbol { width:16px; height:16px; }
 .site-header.cream-cloud-header .cloud-nav-links button > .icon:not(.category-symbol) { width:9px; height:9px; }
}

@media(min-width:701px) and (max-width:1150px) {
 .site-header.cream-cloud-header .brand .brand-image-window img { width:174px; left:-4px; top:-16px; }
 .site-header.cream-cloud-header.is-floating .brand .brand-image-window img { width:154px; left:-3px; top:-15px; }
}

.site-header.cream-cloud-header.is-fluid-closing .category-menu-trigger { background:transparent; border-color:transparent; }
/* Allocate space from the actual labels, including their icons and padding. */
@media(min-width:701px) {
 .site-header.cream-cloud-header .cloud-nav-links button,.site-header.cream-cloud-header .cloud-nav-links [data-shop-section="special-care"] { flex:1 1 auto; min-width:min-content; }
 .site-header.cream-cloud-header .cloud-nav-links button .category-label { min-width:min-content; }
}
@media(min-width:701px) and (max-width:1150px) {
 .site-header.cream-cloud-header.is-floating .cloud-nav-links { gap:3px; }
}