/* ==========================================================
Creemly Header
========================================================== */

:root {
	--creemly-primary: #ff6b35;
	--creemly-primary-dark: #e85a27;
	--creemly-secondary: #1f2937;
	--creemly-text: #374151;
	--creemly-muted: #6b7280;
	--creemly-light: #f8fafc;
	--creemly-white: #ffffff;
	--creemly-border: #e5e7eb;
	--creemly-radius: 18px;
	--creemly-radius-lg: 28px;
	--creemly-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
	--creemly-container: 1240px;
}

:root {

	--creemly-header-height: 78px;

	--creemly-header-bg: #ffffff;

	--creemly-header-text: #1f2937;

	--creemly-header-muted: #6b7280;

	--creemly-header-border: #e5e7eb;

	--creemly-header-accent: #ff6b35;

	--creemly-header-container: 1240px;

}

/* ==========================================================
Global Container
========================================================== */

.container {
width: 100%;
max-width: var(--creemly-header-container);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}

/* ==========================================================
Sticky Header
========================================================== */

.site-header {
position: sticky;
top: 0;
z-index: 99990;
width: 100%;
background: var(--creemly-header-bg);
}

/* ==========================================================
Header Main
========================================================== */

.header-main {
width: 100%;
background: var(--creemly-header-bg);
border-bottom: 1px solid var(--creemly-header-border);
}

/* ==========================================================
Header Inner
========================================================== */

.header-inner {
display: flex;
align-items: center;
width: 100%;
min-height: var(--creemly-header-height);
gap: 24px;
}

/* ==========================================================
Logo
========================================================== */

.site-branding {
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
}

.site-branding a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--creemly-header-text);
}

.site-branding img,
.site-branding .custom-logo {
display: block;
width: auto;
max-width: 180px;
max-height: 52px;
height: auto;
}

.site-title {
font-size: 24px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}

/* ==========================================================
Desktop Location
========================================================== */

.header-location {
display: flex;
align-items: center;
flex: 0 0 auto;
}

.location-selector {
display: flex;
align-items: center;
gap: 9px;

margin: 0;
padding: 6px 0;

border: 0;
outline: 0;
background: transparent;

color: var(--creemly-header-text);

cursor: pointer;
text-align: left;

}

.location-selector:hover {
color: var(--creemly-header-accent);
}

.location-icon {
display: flex;
align-items: center;
justify-content: center;

flex: 0 0 auto;

width: 28px;
height: 28px;

color: var(--creemly-header-accent);

font-size: 25px;
line-height: 1;

}

.location-content {
display: flex;
flex-direction: column;
justify-content: center;

min-width: 0;

}

.location-label {
display: block;

margin-bottom: 2px;

color: var(--creemly-header-muted);

font-size: 11px;
font-weight: 500;
line-height: 1.2;

}

.location-value {
display: block;

color: var(--creemly-header-text);

font-size: 14px;
font-weight: 600;
line-height: 1.25;

white-space: nowrap;

}

/* ==========================================================
Mobile Header Location
========================================================== */

.mobile-header-location {
display: none;
}

/* ==========================================================
Search
========================================================== */

.header-search {
position: relative;

flex: 1 1 auto;
min-width: 180px;
max-width: 600px;

margin-left: auto;
margin-right: auto;

}

.creemly-search-form {
position: relative;

display: flex;
align-items: center;

width: 100%;
height: 46px;

margin: 0;
padding: 0;

border: 1px solid #e3e7e6;
border-radius: 12px;

background: #f7f9f8;

box-sizing: border-box;

transition:
	border-color 180ms ease,
	background-color 180ms ease,
	box-shadow 180ms ease;

}

.creemly-search-form:focus-within {
border-color: rgba(0, 164, 153, 0.45);

background: #ffffff;

box-shadow:
	0 0 0 3px rgba(0, 164, 153, 0.08);

}

.creemly-search-form input[type="search"] {
flex: 1 1 auto;

width: 100%;
height: 100%;

margin: 0;
padding: 0 52px 0 16px;

border: 0;
outline: 0;

background: transparent;

color: var(--creemly-header-text);

font-family: inherit;
font-size: 14px;
line-height: 1;

box-sizing: border-box;

}

.creemly-search-form input[type="search"]::placeholder {
color: #8b9491;
opacity: 1;
}

.creemly-search-form input[type="search"]::-webkit-search-decoration,
.creemly-search-form input[type="search"]::-webkit-search-cancel-button,
.creemly-search-form input[type="search"]::-webkit-search-results-button,
.creemly-search-form input[type="search"]::-webkit-search-results-decoration {
display: none;
}

/* ==========================================================
Search Button
========================================================== */

.search-submit {
position: absolute;
top: 50%;
right: 6px;

display: flex;
align-items: center;
justify-content: center;

width: 36px;
height: 36px;

margin: 0;
padding: 0;

transform: translateY(-50%);

border: 0;
border-radius: 9px;

background: var(--creemly-header-accent);
color: #ffffff;

font-size: 22px;
line-height: 1;

cursor: pointer;

transition:
	background-color 180ms ease,
	transform 180ms ease;

}

.search-submit:hover {
background: #008f85;
}

.search-submit:active {
transform: translateY(-50%) scale(0.96);
}

/* ==========================================================
Search Results
========================================================== */

.creemly-search-results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;

z-index: 100000;

display: none;

max-height: 420px;
overflow-y: auto;

border: 1px solid #e6e9e8;
border-radius: 12px;

background: #ffffff;

box-shadow:
	0 15px 40px rgba(21, 25, 24, 0.12);

}

/* ==========================================================
Header Actions
========================================================== */

.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;

flex: 0 0 auto;

gap: 22px;

}

/* ==========================================================
Account
========================================================== */

.header-account {
display: flex;
align-items: center;
}

.header-account-link {
display: flex;
align-items: center;
gap: 9px;

color: var(--creemly-header-text);

text-decoration: none;

white-space: nowrap;

transition: color 180ms ease;

}

.header-account-link:hover {
color: var(--creemly-header-accent);
}
.header-account-link:hover .account-icon svg{
	fill: #e85a27;
}
.account-icon svg{
display: flex;
align-items: center;
justify-content: center;

width: 32px;
height: 32px;

color: currentColor;

font-size: 25px;
line-height: 1;

}

.account-text {
display: flex;
flex-direction: column;
justify-content: center;
}

.account-label {
display: block;

color: var(--creemly-header-muted);

font-size: 11px;
font-weight: 500;
line-height: 1.2;

}

.account-value {
display: block;

color: var(--creemly-header-text);

font-size: 13px;
font-weight: 600;
line-height: 1.3;

}

/* ==========================================================
Cart
========================================================== */

.header-cart {
position: relative;

display: flex;
align-items: center;
justify-content: center;

min-width: 38px;
height: 42px;

color: var(--creemly-header-text);

text-decoration: none;

}

.header-cart:hover {
color: var(--creemly-header-accent);
}

.cart-icon {
display: flex;
align-items: center;
justify-content: center;

width: 32px;
height: 32px;

font-size: 24px;
line-height: 1;

}

.cart-content {
position: absolute;

top: -3px;
right: -6px;

display: flex;
align-items: center;
justify-content: center;

}

.cart-label {
display: none;
}

.header-cart-count {
display: flex;
align-items: center;
justify-content: center;

min-width: 18px;
height: 18px;

padding: 0 4px;

border-radius: 50%;

background: var(--creemly-header-accent);
color: #ffffff;

font-size: 9px;
font-weight: 700;
line-height: 1;

box-sizing: border-box;

}

/* ==========================================================
Mobile Menu Page Link
========================================================== */

.mobile-menu-toggle {
display: none;

align-items: center;
justify-content: center;
flex-direction: column;

width: 34px;
height: 34px;

gap: 5px;

margin: 0;
padding: 0;

border: 0;
outline: 0;

background: transparent;

text-decoration: none;
cursor: pointer;

}

.mobile-menu-toggle span {
display: block;

width: 23px;
height: 2px;

border-radius: 2px;

background: var(--creemly-header-text);

transition:
	background-color 180ms ease,
	transform 180ms ease;

}

.mobile-menu-toggle:hover span {
background: var(--creemly-header-accent);
}

/* ==========================================================
Screen Reader
========================================================== */

.screen-reader-text {
position: absolute !important;

width: 1px;
height: 1px;

padding: 0;
margin: -1px;

overflow: hidden;
clip: rect(0, 0, 0, 0);

white-space: nowrap;

border: 0;

}

/* ==========================================================
Mobile — 991px and Below
========================================================== */

@media (max-width: 991px) {

:root {
	--creemly-header-height: 64px;
}


/* ------------------------------------------
   Container
   ------------------------------------------ */

.container {
	padding-left: 14px;
	padding-right: 14px;
}


/* ------------------------------------------
   Header
   ------------------------------------------ */

.header-main {
	border-bottom: 1px solid var(--creemly-header-border);
}


.header-inner {
	min-height: 64px;
	height: 64px;

	gap: 10px;
}


/* ------------------------------------------
   Logo
   ------------------------------------------ */

.site-branding {
	flex: 0 0 auto;
}

.site-branding img,
.site-branding .custom-logo {
	max-width: 125px;
	max-height: 42px;
}

.site-title {
	font-size: 20px;
}


/* ------------------------------------------
   Hide Desktop Location
   ------------------------------------------ */

.header-location {
	display: none;
}


/* ------------------------------------------
   Search
   ------------------------------------------ */

.header-search {
	flex: 1 1 auto;

	min-width: 0;
	max-width: none;

	margin-left: 0;
	margin-right: 0;
}

.creemly-search-form {
	height: 42px;
	border-radius: 10px;
}

.creemly-search-form input[type="search"] {
	padding-left: 12px;
	padding-right: 44px;

	font-size: 13px;
}

.search-submit {
	right: 4px;

	width: 34px;
	height: 34px;

	border-radius: 8px;

	font-size: 19px;
}


/* ------------------------------------------
   Header Actions
   ------------------------------------------ */

.header-actions {
	flex: 0 0 auto;

	gap: 0;
}


/* ------------------------------------------
   Hide Account + Cart On Mobile
   ------------------------------------------ */

.header-account,
.header-cart {
	display: none;
}


/* ------------------------------------------
   Show Menu Icon
   ------------------------------------------ */

.mobile-menu-toggle {
	display: flex;
}


/* ------------------------------------------
   Mobile Location Row
   ------------------------------------------ */

.mobile-header-location {
	display: flex;
	align-items: center;

	width: 100%;
	min-height: 40px;

	padding: 4px 14px;

	box-sizing: border-box;

	border-top: 1px solid #f0f2f1;
	border-bottom: 1px solid var(--creemly-header-border);

	background: #ffffff;
}


.mobile-header-location .location-selector {
	display: flex;
	align-items: center;

	width: 100%;

	padding: 4px 0;

	gap: 7px;

	white-space: nowrap;
}


.mobile-header-location .location-icon {
	flex: 0 0 auto;

	width: 23px;
	height: 23px;

	font-size: 21px;
}


.mobile-header-location .location-content {
	display: flex;
	align-items: center;
	flex-direction: row;

	min-width: 0;

	gap: 6px;

	white-space: nowrap;
}


.mobile-header-location .location-label {
	flex: 0 0 auto;

	margin: 0;

	font-size: 11px;
	line-height: 1;

	white-space: nowrap;
}


.mobile-header-location .location-value {
	flex: 0 1 auto;

	min-width: 0;

	font-size: 12px;
	line-height: 1.2;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ------------------------------------------
   Search Results
   ------------------------------------------ */

.creemly-search-results {
	top: calc(100% + 6px);

	max-height: 60vh;

	border-radius: 10px;
}

}

/* ==========================================================
Smaller Mobile — 600px and Below
========================================================== */

@media (max-width: 600px) {

.container {
	padding-left: 12px;
	padding-right: 12px;
}

.header-inner {
	gap: 8px;
}

.site-branding img,
.site-branding .custom-logo {
	max-width: 105px;
	max-height: 38px;
}

.creemly-search-form input[type="search"] {
	font-size: 12px;
}

.creemly-search-form input[type="search"]::placeholder {
	font-size: 11px;
}

.mobile-header-location {
	padding-left: 12px;
	padding-right: 12px;
}

}

/* ==========================================================
Very Small Phones — 400px and Below
========================================================== */

@media (max-width: 400px) {

.header-inner {
	gap: 6px;
}

.site-branding img,
.site-branding .custom-logo {
	max-width: 92px;
}

.creemly-search-form {
	height: 40px;
}

.creemly-search-form input[type="search"] {
	padding-left: 10px;
	padding-right: 40px;
}

.search-submit {
	width: 32px;
	height: 32px;
}

.mobile-menu-toggle {
	width: 30px;
}

.mobile-menu-toggle span {
	width: 21px;
}

.mobile-header-location .location-label {
	font-size: 10px;
}

.mobile-header-location .location-value {
	font-size: 11px;
}

}

/* ==========================================================
Desktop — 992px and Above
========================================================== */

@media (min-width: 992px) {

/* Desktop location visible */
.header-location {
	display: flex;
}

/* Mobile location hidden */
.mobile-header-location {
	display: none !important;
}

/* Desktop menu icon hidden */
.mobile-menu-toggle {
	display: none !important;
}

/* Desktop account visible */
.header-account {
	display: flex;
}

/* Desktop cart visible */
.header-cart {
	display: flex;
}

}

/* ==========================================================
Prevent Horizontal Overflow
========================================================== */

.site-header,
.header-main,
.header-inner,
.mobile-header-location {
max-width: 100%;
box-sizing: border-box;
}

/* ==========================================================
Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
	transition-duration: 0.01ms !important;
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
}

}