/* ==========================================================================
   Header group — announcement bar, promo strip, header, nav, mobile drawer.
   Port of the Enterprise 1.6.1 header CSS. Spec: docs/spec/02-header-footer.md
   §2 (announcement), §3 (promo strip), §4 (header / search / icons / nav),
   §4.6.5 (mobile drawer), §4.7 (sticky behaviour).
   Breakpoints: sm 600 · md 769 · lg 1024 · xl 1280.
   ========================================================================== */


/* ==========================================================================
   1. Announcement bar (§2.2)
   ========================================================================== */

.cc-announcement{position:relative;z-index:31}
.announcement{--announcement-text-color:42 43 42;background-color:#f1f4f9;color:rgb(var(--announcement-text-color))}
.announcement a{color:inherit}
.announcement__text{justify-content:center;padding:6px 0;text-align:center}
/* Source: `.announcement__text a{text-decoration:underline}` — nothing else.
   The thickness/offset pair we used to add pushed the "Shop Now >" rule ~1px
   below the original. */
.announcement__text a{text-decoration:underline;transition:opacity .3s}
.announcement__text a:hover{opacity:.6}
.announcement__text p{margin-bottom:0}
.announcement__col--left{flex:1}
.announcement__col--right{padding:5px 0}
.announcement__localization{display:inline-block}

@media(min-width:769px) {
	.announcement__col--right{padding-inline-start:10px}
	.announcement__col--align-left .announcement__text{justify-content:flex-start;padding-inline-end:calc(4 * var(--space-unit));text-align:start}
}


/* ==========================================================================
   2. Promo strip (§3.2)
   ========================================================================== */

.cc-promo-strip{position:relative;z-index:30}
.promo-strip__discount,.promo-strip__button,.promo-strip__rte{margin-bottom:.8em}
.promo-strip__heading{max-width:100%;margin-bottom:.2em}
.promo-strip__rte p{margin-bottom:0}
.promo-strip__rte a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2rem;transition:opacity .3s}
.promo-strip__rte a:hover{opacity:.6}

@media(min-width:769px) {
	.promo-strip__container{display:flex;row-gap:calc(4 * var(--space-unit))}
	.promo-strip__container .section__block{margin-bottom:0}
}
@media(min-width:1024px) {
	.promo-strip__container .rte{flex-shrink:0;max-width:100%}
}


/* ==========================================================================
   3. Header shell (§4.2)
   ========================================================================== */

.cc-header{
	--nav-bg-color:255 255 255;
	--nav-text-color:7 7 7;
	--nav-child-bg-color:255 255 255;
	--nav-child-text-color:7 7 7;
	--header-accent-color:119 119 119;
	--search-bg-color:#e6e6e6;
	position:relative;
	z-index:30;
}

.header{
	display:block;
	position:relative;
	z-index:30;
	padding:calc(2 * var(--space-unit)) 0;
	border-bottom:1px solid rgba(var(--text-color)/.15);
	background-color:rgba(var(--bg-color));
	color:rgb(var(--text-color));
	--header-transition-speed:300ms;
}

store-header{display:block;--bg-color:255 255 255 / 1.0;--text-color:7 7 7}

.header__logo{flex:1}
.logo__h1{margin:0;line-height:0}
.logo__wrap{line-height:0}
.logo__link{display:inline-block;max-width:200px}
.logo__link img{display:block;width:100%;height:auto}
.header__icons{flex:0 0 auto;margin-inline-end:-10px}
.header__search{flex:0 0 100%;order:2}

@media(min-width:769px) {
	.header{padding:calc(4 * var(--space-unit)) 0 0}
	.header__logo,.header__icons{flex:1 1 auto;margin-bottom:16px;padding-inline-start:calc(6 * var(--space-unit))}
	.header__logo{order:0;padding-inline-start:0;padding-inline-end:calc(6 * var(--space-unit))}
	.header__search{display:block;flex:6 1 auto;order:1;margin-top:0}
	.header__icons{order:2}
	.main-menu{order:3}
}

.cc-header--sticky{position:-webkit-sticky;position:sticky;z-index:30;top:-1px}


/* ==========================================================================
   4. Header icons + cart badge (§4.5)
   ========================================================================== */

.header__icon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;color:inherit;text-align:center}
.header__icon>.icon{width:100%;height:100%}
.header__cart-count{position:absolute;top:2px;right:2px;min-width:18px;min-height:18px;padding:0 5px;border-radius:9px;background-color:rgb(var(--header-accent-color));box-shadow:0 0 0 2px rgba(var(--bg-color));color:rgba(var(--bg-color));font-size:11px;font-weight:700;line-height:18px}

@media(min-width:1024px) {
	.header__icon{padding:6px}
	.header__icon svg{width:32px;height:32px}
	.header__icon+.header__icon{margin-inline-start:12px}
}
@media(min-width:1280px) {
	.header__cart-count{top:0;right:0}
}
@media(min-width:769px) {
	.cc-header--sticky .header__cart-count-number{position:relative;top:.05em}
}


/* ==========================================================================
   5. Search (§4.4.2)
   ========================================================================== */

.search{position:relative;margin:6px 0;transition:margin var(--header-transition-speed)}
.search__form{position:relative}

.search__input{
	--input-text-color:var(--text-color);
	padding-inline-start:54px;
	padding-inline-end:54px;
	border:0;
	border-radius:var(--input-lg-border-radius,var(--input-border-radius));
	background-color:var(--search-bg-color,rgba(var(--text-color)/.08));
	color:rgb(var(--text-color));
	font-size:calc(var(--body-font-size) * .1rem);
	line-height:1em;
	text-transform:initial;
}
.search__input::placeholder{color:rgba(var(--text-color)/.5)}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
body:not(.tab-used) .search__input{outline:none}
.search__input:focus{box-shadow:none}

@media(min-width:769px) {
	.search{margin:0 0 15px}
}
@media(min-width:1024px) {
	.search__input{padding-top:12px;padding-bottom:12px}
}

/* Product-type select glued to the input's left edge */
.search--product-types{--product-types-width:100px;--product-types-padding:14px}
.search--product-types .search__input{padding-left:calc(var(--product-types-width) + var(--product-types-padding))}
.search__product-types{width:var(--product-types-width)}
.search__product-types .custom-select{height:100%}
.search__product-types .custom-select__btn{
	height:100%;
	padding-top:0;
	padding-right:var(--product-types-padding);
	padding-bottom:0;
	border:0;
	border-right:1px solid rgba(var(--bg-color));
	border-radius:var(--input-border-radius,0) 0 0 var(--input-border-radius,0);
	background-color:var(--search-bg-color,rgba(var(--text-color)/.08));
	color:currentColor;
	font-size:1em;
	font-weight:400;
	line-height:1em;
}
.search__product-types .custom-select__btn>span{overflow:hidden;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.search__product-types .custom-select__btn>.icon{width:20px;padding-inline-start:0}
predictive-search:not([open]) .search__input:focus+.search__product-types .custom-select__btn{border-color:rgba(var(--text-color)/.6)}
predictive-search[open] .search__product-types .custom-select__btn{border-color:rgb(var(--text-color))}

@media(min-width:769px) {
	.search--product-types{--product-types-width:130px;--product-types-padding:17px}
}
@media(min-width:1024px) {
	.search--product-types{--product-types-width:170px;--product-types-padding:20px}
}
@media(min-width:1280px) {
	.search--product-types{--product-types-width:210px}
}

/* Reset button */
.search__reset{right:12px;padding:10px;border:0;background:none;cursor:pointer}
.search--speech .search__reset,.search--product-types .search__reset{right:56px}
.search--speech .search__reset:after,.search--product-types .search__reset:after{content:"";position:absolute;top:10px;right:-1px;width:1px;height:24px;background-color:rgba(var(--text-color)/.3)}

/* Speech search */
.search__speech{position:absolute;top:calc(50% - 22px);right:0;min-height:44px;margin-inline-end:2px;padding:10px calc(5 * var(--space-unit));border-radius:var(--input-border-radius,0);color:currentColor;cursor:pointer}
.search__speech.search__speech-listening{animation:colorPulse 2s infinite;opacity:1}
.search__speech svg{width:24px;transition:color .3s}

@media(max-width:768.98px) {
	.search__speech{padding-inline-end:15px}
}
@keyframes colorPulse{0%{color:rgb(var(--text-color))}50%{color:var(--speech-icon-color)}to{color:rgb(var(--text-color))}}

/* Predictive panel plumbing (the panel body itself ships with T8) */
predictive-search{display:block;position:relative}
predictive-search .search__input{padding-inline-end:95px}
predictive-search[open] .overlay{z-index:30}
predictive-search[open] .search__form{position:relative;z-index:32}
.header predictive-search[open] .search__input{background-color:rgba(var(--bg-color));box-shadow:inset 0 0 0 1px rgb(var(--text-color))}
.js-search-results:empty{display:none}

@media(max-width:768.98px) {
	.header__search .overlay{z-index:900;background-color:#0006}
	predictive-search .search__input:not(.search__input--dirty){padding-inline-end:54px}
}


/* --- Predictive results panel geometry (spec §4.4.2) -------------------
   The panel *contents* are rendered by T8; these rules only anchor the panel
   to the header search field so injected markup lands in the right place. */

.predictive-search{
	--heading-color:var(--text-color);
	display:none;
	position:absolute;
	top:-12px;
	left:calc(var(--gutter) * -1);
	width:100vw;
	padding-top:60px;
	border-radius:8px;
	background-color:rgba(var(--bg-color));
	color:rgb(var(--text-color));
}
.header .predictive-search{top:0}
predictive-search[open] .predictive-search{display:block;z-index:31}
.predictive-search .tablist{position:sticky;z-index:1;top:0}
.predictive-search__scroller{max-height:66vh}
.predictive-search__item:not(.js-submit):hover,.predictive-search__item[aria-selected=true]{background-color:rgba(var(--text-color)/.04)}
.predictive-search__view-all{padding:24px var(--gutter) 40px;color:currentColor;line-height:1.75}
.predictive-result{padding:16px var(--gutter);color:rgb(var(--text-color))}
.predictive-result__media{flex:0 0 56px;width:56px;margin-inline-end:calc(4 * var(--space-unit))}
.predictive-result__media img{max-height:100px;object-fit:contain}
.predictive-result--suggestion{padding:8px var(--gutter)}
.predictive-search__scroller--suggestions .predictive-search__suggestions{padding-bottom:calc(3 * var(--space-unit));border-bottom:1px solid rgba(var(--text-color)/.09);background-color:rgba(var(--text-color)/.04)}

@media(max-width:768.98px) {
	.header .predictive-search{top:-20px}
}
@media(min-width:769px) {
	.predictive-search{left:-12px;width:calc(100% + 24px);padding-top:63px}
	.header .predictive-search{top:-12px}
	.predictive-result,.predictive-search__view-all,.predictive-search__no-results{padding-right:36px;padding-left:36px}
}
@media(min-width:1024px) {
	.predictive-search{padding-top:68px}
	.header__grid--left-logo .predictive-result__list-suggestions{position:sticky;top:12px;padding-bottom:calc(8 * var(--space-unit))}
	.header__grid--left-logo .predictive-search__scroller--suggestions .predictive-search__results{flex-direction:row-reverse}
	.header__grid--left-logo .predictive-search__scroller--suggestions .predictive-search__suggestions{flex:0 0 222px;padding-bottom:0;border-top:0;border-bottom:0;border-left:1px solid rgba(var(--text-color)/.05)}
}
@media(min-width:1280px) {
	.header__grid--left-logo .predictive-search__scroller--suggestions .predictive-search__suggestions{flex-basis:300px}
}


/* ==========================================================================
   6. Main navigation — shared shell (§4.6.3)
   ========================================================================== */

.main-menu{
	--nav-line-color:rgba(var(--nav-child-text-color)/.2);
	display:block;
	font-family:var(--navigation-font-family);
	font-style:var(--navigation-font-style);
	font-weight:var(--navigation-font-weight);
}
.main-menu__disclosure{display:block}
.main-menu__disclosure>summary::-webkit-details-marker{display:none}
.main-menu__disclosure>summary{list-style:none}
.main-nav{margin:0;padding:0;list-style:none}
.child-nav,.grandchild-nav{margin:0;padding:0;list-style:none}
.main-nav__item{color:currentColor}
.main-nav__item--toggle{display:block;list-style:none;cursor:pointer}
.main-nav__item--toggle::-webkit-details-marker{display:none}
.main-nav__item--toggle .icon{flex-shrink:0;width:20px;height:20px;margin-inline-start:5px;transition:transform .3s}
.main-nav__item--toggle .main-nav__item-content{display:inline-flex;align-items:center}
.main-nav__item--toggle .main-nav__item--primary{align-items:flex-end}
.main-nav__item--back{width:100%;border:0;background:none;cursor:pointer;font:inherit}


/* --- Desktop (≥769) --------------------------------------------------- */

@media(min-width:769px) {
	.main-menu{width:100%;background-color:rgb(var(--nav-bg-color));color:rgb(var(--nav-text-color))}
	.main-menu__content{position:relative}
	.main-nav{display:flex;flex-wrap:wrap;align-items:flex-end;margin:0 -1.2rem}
	.main-nav__details{position:static}
	.main-nav__item--primary{display:block;margin:0 1.2rem;padding-top:1rem;padding-bottom:1rem;transition:box-shadow .1s;line-height:1.2em}
	.main-nav__item--primary:hover,.main-nav__item--primary.is-active,.is-open>summary>.main-nav__item--primary{box-shadow:inset 0 -2px 0 0 currentColor}
	[open]>.main-nav__item--primary .icon{transform:rotate(180deg)}

	.main-nav__child{
		visibility:hidden;
		position:absolute;
		z-index:10;
		top:100%;
		min-width:170px;
		max-height:max(100vh - var(--content-start,150px) - 70px,60vh);
		padding:2rem 1.2rem;
		overflow:auto;
		transition:transform .3s,opacity .2s,visibility .3s;
		transition-timing-function:cubic-bezier(.19,1,.22,1);
		border-top:1px solid var(--nav-line-color);
		background-color:rgb(var(--nav-child-bg-color));
		box-shadow:0 5px 5px #0000001a;
		color:rgb(var(--nav-child-text-color));
	}
	.is-closing>.main-nav__child,.main-nav__child{z-index:-1;transform:translateY(-10px);opacity:0}
	.is-open>.main-nav__child,.no-js details[open] .main-nav__child{visibility:visible;transform:translateY(0);transition-delay:0s;opacity:1}

	.child-nav--dropdown{max-width:300px}
	.child-nav__item,.child-nav__item--toggle,.grandchild-nav__item{transition:color .3s}
	.child-nav__item:hover{color:rgba(var(--nav-child-text-color)/.7)}
	.child-nav__item{padding-top:1rem;padding-bottom:1rem}
	.child-nav__item,.main-nav__grandchild{display:block;padding-right:2rem;padding-left:2rem}
	.main-menu .localization,.main-menu .mob__localization{display:none}
}
@media(min-width:835px) {
	.main-menu__content{display:flex}
}


/* --- Mobile: hamburger + drawer (§4.6.5) ------------------------------ */

.main-menu__toggle{position:relative;width:44px;height:44px;margin-inline-start:10px;margin-inline-end:-10px;cursor:pointer;list-style:none}
.main-menu__toggle::-webkit-details-marker{display:none}
.main-menu__toggle:before,.main-menu__toggle:after,.main-menu__toggle-icon:before,.main-menu__toggle-icon:after{
	content:"";display:block;position:absolute;left:12px;width:20px;height:2px;
	transform:rotate(0);transition:.3s ease-in-out;transition-property:transform,width,top,left;background:currentColor;
}
.main-menu__toggle-icon:before{top:14px}
.main-menu__toggle:before,.main-menu__toggle:after{top:21px}
.main-menu__toggle-icon:after{top:28px}
.main-menu__disclosure.is-open .main-menu__toggle-icon:before,.main-menu__disclosure.is-open .main-menu__toggle-icon:after{top:21px;left:22px;width:0}
.main-menu__disclosure.is-open .main-menu__toggle:before{transform:rotate(45deg)}
.main-menu__disclosure.is-open .main-menu__toggle:after{transform:rotate(-45deg)}

@media(max-width:768.98px) {
	.main-menu__content{
		visibility:hidden;
		width:100vw;
		min-width:0;
		max-width:none;
		padding-bottom:calc(8 * var(--space-unit));
		overflow:hidden;
		box-shadow:0 -1px 0 var(--nav-line-color);
	}
	.main-menu__content,.js .main-nav__child{
		position:fixed;
		z-index:30;
		top:var(--header-end,100px);
		left:0;
		width:100vw;
		height:calc(var(--viewport-height,100vh) - var(--header-end,100px));
		padding-right:var(--gutter);
		padding-bottom:60px;
		padding-left:var(--gutter);
		overflow-y:scroll;
		background-color:rgb(var(--nav-child-bg-color));
		color:rgb(var(--nav-child-text-color));
	}
	.main-menu__disclosure>.main-menu__content{transition:opacity .3s,visibility .3s;opacity:0;pointer-events:none}
	.main-menu__disclosure.is-open>.main-menu__content{opacity:1}
	.js .is-open>.main-menu__content{visibility:visible;pointer-events:initial}

	.main-nav>li,.child-nav>li,.grandchild-nav>li{border-bottom:1px solid var(--nav-line-color)}
	.main-nav__item{display:block;width:100%;padding-top:2.4rem;padding-bottom:2.4rem;padding-inline-start:16px;padding-inline-end:44px;line-height:1.5}
	.main-nav__item-content{display:flex;align-items:center;justify-content:space-between;pointer-events:none}
	.main-nav__item--toggle{position:relative}
	.main-nav__item--toggle .icon{position:absolute;top:50%;right:16px;margin-top:-10px;margin-inline-end:-4px}
	.main-nav__item--toggle .main-nav__item:not(.child-nav__item) .icon{transform:rotate(-90deg)}
	.main-nav__item-header{font-size:2rem;padding-top:2.4rem;padding-bottom:2.4rem}
	.main-nav__item--back{color:rgb(var(--header-accent-color))}
	.main-nav__item--back .main-nav__item-content{justify-content:flex-start}
	.main-nav__item--back .main-nav__item-content>.icon{position:static;margin:0;margin-inline-start:-4px;margin-inline-end:calc(2 * var(--space-unit))}

	.js .main-nav__child,.js .main-nav__child.is-closing{transform:translate3d(100%,0,0);transition:transform .2s ease-out}
	.js .is-open:not(.is-closing)>.main-nav__child{transform:translateZ(0)}

	.main-menu .mob__localization{margin-top:calc(12 * var(--space-unit));padding:0 16px}
	.main-menu .mob__localization .main-nav__item{padding-inline-start:0}
	.main-menu .mob__localization .localization{margin-top:calc(4 * var(--space-unit));color:rgb(var(--header-accent-color))}
	.main-menu__content--no-focus{overflow:hidden}
}


/* ==========================================================================
   7. Sticky behaviour (§4.7)
   ========================================================================== */

@media(min-width:769px) {
	.cc-header--sticky .main-menu__disclosure{
		max-height:var(--menu-height,56px);
		overflow:hidden;
		transition:max-height var(--header-transition-speed),margin-top var(--header-transition-speed);
	}
	/* The nav row is clipped so it can fold away on scroll; an open dropdown
	   has to escape that clip. */
	.cc-header--sticky .main-menu__disclosure.has-open-child{max-height:none;overflow:visible}
	.cc-header--sticky .header{margin-bottom:0;transition:margin-bottom var(--header-transition-speed)}
	.cc-header--sticky .header.is-out{margin-bottom:var(--menu-height,56px)}
	.cc-header--sticky .header.is-out .main-menu__disclosure{max-height:0;margin-top:0}
}

@media(prefers-reduced-motion) {
	.has-motion{transition:none!important}
}