/*
Theme Name:   Storefront Child
Theme URI:    http://wplife.test
Description:  BonBon-style header and store chrome for Storefront.
Author:       WP Life
Template:     storefront
Version:      1.4.9
*/

:root {
	--wplife-navy: #072f91;
	--wplife-pink: #ffe1e0;
	--wplife-search-bg: #f8f8f8;
	--wplife-white: #ffffff;
	--wplife-text: #444444;
	--wplife-font: Inter, "Source Sans Pro", Helvetica, Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
	font-family: var(--wplife-font);
	color: var(--wplife-text);
}

a {
	color: var(--wplife-navy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--wplife-navy);
	font-family: var(--wplife-font);
}

/* -------------------------------------------------------------------------
 * Announcement
 * ---------------------------------------------------------------------- */
.wplife-announcement {
	background: var(--wplife-navy);
	color: #fff;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	padding: 12px 16px;
	font-weight: 400;
}

.wplife-announcement strong {
	font-weight: 700;
}

.wplife-announcement a {
	color: #fff;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.site-header,
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header,
.no-wc-breadcrumb .site-header {
	background-color: var(--wplife-pink) !important;
	color: var(--wplife-navy);
	padding: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0;
}

.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
	padding-top: 0;
}

.page-template-template-homepage .type-page {
	padding-top: 0;
	padding-bottom: 0;
}

/* Match Shoptimizer .main-header / .shoptimizer-primary-navigation:
 * max-width 1170px + 42px side padding, centered (≈1254px bar). */
.site-header > .col-full,
.storefront-primary-navigation .col-full {
	max-width: 1254px;
	width: 100%;
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 42px;
	padding-right: 42px;
}

.site-header > .col-full::before,
.site-header > .col-full::after,
.storefront-primary-navigation .col-full::before,
.storefront-primary-navigation .col-full::after {
	display: none;
	content: none;
}

.site-header > .col-full {
	display: flex;
	align-items: center;
	gap: 0;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-header > .col-full > .skip-link {
	position: absolute;
}

.site-header > .col-full .site-branding,
.woocommerce-active .site-header .site-branding,
.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
	flex: 0 0 auto;
	max-width: 170px;
}

.site-header .custom-logo-link,
.site-header .site-logo-anchor,
.site-header .site-logo-link,
.site-branding,
.site-search,
.site-header-cart,
.custom-logo-link {
	margin-bottom: 0 !important;
}

.site-header .custom-logo-link img,
.site-header .site-branding img {
	max-width: 160px;
	width: auto;
	height: auto;
	max-height: 60px;
	object-fit: contain;
}

.site-branding .site-description {
	display: none !important;
}

.site-header > .col-full .secondary-navigation {
	display: none;
}

.site-header > .col-full .site-search,
.woocommerce-active .site-header .site-search {
	display: block !important;
	float: none;
	clear: none;
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	margin: 0 0 0 48px;
	font-size: 16px;
}

.site-header .site-search form {
	margin: 0;
}

.wplife-search-toggle {
	display: none;
}

.site-header .widget_product_search form:not(.wp-block-search) input[type="search"],
.site-header .widget_product_search form:not(.wp-block-search) input[type="text"] {
	background: var(--wplife-search-bg);
	border: 1px solid var(--wplife-search-bg);
	border-radius: 5px;
	box-shadow: none;
	padding: 12px 16px 12px 44px;
	height: 48px;
	color: var(--wplife-text);
	font-size: 16px;
}

.site-header .widget_product_search form:not(.wp-block-search)::before {
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
	color: #999;
}

/* White nav row */
.storefront-primary-navigation {
	background: var(--wplife-white) !important;
	clear: both;
	border-top: 0;
	border-bottom: 0;
}

/* PC: fixed nav when scrolled (see assets/sticky-nav.js). */
@media (min-width: 768px) {
	.storefront-primary-navigation.wplife-nav-is-fixed {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 100050;
		box-shadow: 0 2px 16px rgba(7, 47, 145, 0.12);
	}

	.wplife-sticky-nav-placeholder {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

.storefront-primary-navigation .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
}

.storefront-primary-navigation .main-navigation,
.woocommerce-active .site-header .main-navigation {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	flex: 1 1 auto;
}

.storefront-primary-navigation .site-header-cart,
.woocommerce-active .site-header .site-header-cart {
	float: none !important;
	width: auto !important;
	margin: 0 0 0 auto !important;
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		margin-left: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: 20px 11px 20px 0;
		font-size: 16px;
		font-weight: 700;
		color: var(--wplife-navy) !important;
		white-space: nowrap;
	}

	.main-navigation ul.menu > li > a:hover,
	.main-navigation ul.nav-menu > li > a:hover,
	.site-header ul.menu li.current-menu-item > a {
		color: var(--wplife-navy) !important;
		opacity: 0.75;
	}
}

/* Cart: $0.00 + outlined bag with count */
.site-header-cart .cart-contents {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: var(--wplife-navy) !important;
	text-indent: 0;
	height: 60px;
	width: auto;
	line-height: 1;
}

.site-header-cart > li {
	display: flex;
	align-items: center;
}

.site-header-cart .cart-contents::after {
	display: none;
}

.wplife-cart-total {
	font-weight: 700;
	font-size: 16px;
	color: var(--wplife-navy);
	line-height: 1;
}

.wplife-cart-total .amount {
	margin-right: 0;
}

.wplife-cart-icon {
	display: none;
}

.wplife-cart-count {
	--wplife-cart-bag-body: 22px;
	--wplife-cart-bag-handle: 7px;
	position: relative;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px;
	width: max-content;
	height: var(--wplife-cart-bag-body);
	margin: calc(var(--wplife-cart-bag-handle) / 2) 0 0;
	padding: 0 5px;
	border: 1px solid var(--wplife-navy);
	border-radius: 0 0 3px 3px;
	background: transparent;
	color: var(--wplife-navy);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.wplife-cart-count__value {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 1em;
	line-height: 1;
	padding: 0;
	margin: 0;
	transform: translateY(0.5px);
}

.wplife-cart-count::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--wplife-cart-bag-handle));
	left: 50%;
	width: 12px;
	height: var(--wplife-cart-bag-handle);
	margin-left: -6px;
	border: 1px solid var(--wplife-navy);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	pointer-events: none;
}

/* No header mini-cart dropdown — cart link goes to cart page. */
.site-header-cart .widget_shopping_cart {
	display: none !important;
}

.storefront-breadcrumb {
	margin: 0;
	padding: 0.6em 0;
}

/* -------------------------------------------------------------------------
 * Buttons, sale, products
 * ---------------------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
	background-color: var(--wplife-navy);
	border-color: var(--wplife-navy);
	color: #fff;
	border-radius: 4px;
	font-weight: 600;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: #05246e;
	border-color: #05246e;
	color: #fff;
}

.onsale,
.woocommerce span.onsale {
	background-color: var(--wplife-navy);
	color: #fff;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.35em 0.65em;
	min-height: 0;
	border: 0;
}

/* Hide default blog sidebar on every page except shop/category (left filters). */
body:not(.wplife-product-archive) #secondary:not(.wplife-shop-sidebar) {
	display: none !important;
}

body:not(.wplife-product-archive) .content-area {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Product grid (TOP MIXES, etc.): see assets/product-grid.css */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wplife-navy);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer {
	background-color: var(--wplife-pink);
	color: var(--wplife-navy);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer a {
	color: var(--wplife-navy);
}

.site-footer a:hover {
	opacity: 0.75;
}

.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a {
	background-color: var(--wplife-pink);
	color: var(--wplife-navy);
}

.storefront-handheld-footer-bar ul li > a {
	color: var(--wplife-navy);
}

/* -------------------------------------------------------------------------
 * Mobile — closer to bonbonnyyclife.com
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	body:not(.wplife-checkout) .storefront-handheld-footer-bar {
		display: none !important;
	}

	.wplife-announcement {
		font-size: 13px;
		line-height: 1.45;
		padding: 10px 16px;
		font-weight: 400;
	}

	.wplife-announcement strong {
		font-weight: 400;
	}

	body:not(.wplife-checkout) .site-header {
		position: relative;
		z-index: 20;
	}

	body:not(.wplife-checkout) .site-header > .col-full {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 72px;
		padding: 8px 96px 8px 52px;
		text-align: center;
		box-sizing: border-box;
	}

	body:not(.wplife-checkout) .site-header > .col-full .site-branding {
		float: none;
		margin: 0 auto;
		max-width: 168px;
		width: auto;
		flex: 0 1 auto;
	}

	body:not(.wplife-checkout) .site-header .custom-logo-link {
		display: inline-block;
	}

	body:not(.wplife-checkout) .site-header .custom-logo-link img {
		max-width: 160px;
		max-height: 56px;
		margin: 0 auto;
	}

	body:not(.wplife-checkout) .site-header > .col-full .site-search,
	body:not(.wplife-checkout).woocommerce-active .site-header .site-search {
		display: block !important;
		position: static;
		float: none;
		flex: 0 0 0;
		width: 0;
		margin: 0;
		overflow: visible;
	}

	body:not(.wplife-checkout) .site-header .widget_product_search form:not(.wp-block-search)::before,
	body:not(.wplife-checkout) .site-header .woocommerce-product-search button[type="submit"] {
		display: none;
	}

	body:not(.wplife-checkout) .site-header .woocommerce-product-search {
		position: static;
	}

	body:not(.wplife-checkout) .wplife-search-toggle {
		display: block;
		position: absolute;
		top: 50%;
		right: 58px;
		z-index: 22;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23072f91' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 24px 24px;
		transform: translateY(-50%);
		cursor: pointer;
	}

	body:not(.wplife-checkout) .site-header .woocommerce-product-search .search-field {
		display: none;
		position: absolute;
		left: 12px;
		right: 12px;
		top: calc(100% + 8px);
		z-index: 23;
		width: auto;
		height: 44px;
		padding: 10px 14px;
		background: #fff;
		border: 1px solid #dcdcde;
		border-radius: 4px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}

	body.wplife-search-open:not(.wplife-checkout) .site-header .woocommerce-product-search .search-field {
		display: block;
	}

	body:not(.wplife-checkout) .storefront-primary-navigation {
		position: relative;
		z-index: 21;
		height: 0;
		overflow: visible;
		background: transparent !important;
	}

	body:not(.wplife-checkout) .storefront-primary-navigation .col-full {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		display: flex;
		align-items: center;
		height: 72px;
		min-height: 72px;
		padding: 0 12px;
		pointer-events: none;
		background: transparent;
	}

	body:not(.wplife-checkout) button.menu-toggle,
	body:not(.wplife-checkout) button.menu-toggle:hover,
	body:not(.wplife-checkout) button.menu-toggle:focus {
		pointer-events: auto;
		position: absolute;
		left: 12px;
		top: 50%;
		z-index: 100090;
		float: none;
		display: block;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none !important;
		background: transparent !important;
		color: var(--wplife-navy);
		font-size: 0;
		line-height: 0;
		transform: translateY(-50%);
	}

	body:not(.wplife-checkout) button.menu-toggle::before,
	body:not(.wplife-checkout) button.menu-toggle::after,
	body:not(.wplife-checkout) button.menu-toggle span::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		width: 22px !important;
		height: 2px !important;
		margin: 0 !important;
		margin-top: 0 !important;
		border-radius: 0;
		background: var(--wplife-navy) !important;
		opacity: 1 !important;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	body:not(.wplife-checkout) button.menu-toggle::before {
		transform: translate(-50%, -50%) translateY(-7px) !important;
	}

	body:not(.wplife-checkout) button.menu-toggle span::before {
		transform: translate(-50%, -50%) !important;
	}

	body:not(.wplife-checkout) button.menu-toggle::after {
		transform: translate(-50%, -50%) translateY(7px) !important;
	}

	body:not(.wplife-checkout) button.menu-toggle span {
		display: block;
		position: relative;
		width: 22px;
		height: 2px;
		margin: 0 auto;
		overflow: hidden;
		background: transparent;
		color: transparent;
	}

	body:not(.wplife-checkout) button.menu-toggle span::after {
		content: none !important;
		display: none !important;
	}

	body:not(.wplife-checkout) .storefront-primary-navigation .site-header-cart,
	body:not(.wplife-checkout).woocommerce-active .site-header .site-header-cart {
		pointer-events: auto;
		position: absolute;
		top: 50%;
		right: 12px;
		z-index: 22;
		margin: 0 !important;
		transform: translateY(-50%);
	}

	body:not(.wplife-checkout) .site-header-cart .cart-contents {
		height: 40px;
		line-height: 1;
	}

	body:not(.wplife-checkout) .wplife-cart-total {
		display: none;
	}

	body:not(.wplife-checkout) .wplife-cart-count {
		--wplife-cart-bag-body: 26px;
		--wplife-cart-bag-handle: 8px;
		min-width: 32px;
		font-size: 13px;
	}

	body:not(.wplife-checkout) .storefront-primary-navigation .main-navigation.toggled .primary-navigation {
		display: none !important;
	}

	body:not(.wplife-checkout) .wplife-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100070;
		display: block;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	}

	body.wplife-mobile-menu-open .wplife-menu-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.28s ease, visibility 0s linear 0s;
	}

	body:not(.wplife-checkout) .handheld-navigation {
		pointer-events: none;
		position: fixed !important;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100080;
		display: block !important;
		width: 75%;
		height: 100%;
		height: 100dvh;
		margin: 0;
		padding: 0 20px 32px;
		max-height: none !important;
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff !important;
		background-color: #fff !important;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
		transform: translate3d(-105%, 0, 0);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
		-webkit-overflow-scrolling: touch;
	}

	body.wplife-mobile-menu-open .handheld-navigation {
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s linear 0s;
	}

	body:not(.wplife-checkout) .handheld-navigation ul {
		display: block !important;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		max-height: none !important;
		overflow: visible;
		background: transparent !important;
	}

	body:not(.wplife-checkout) .handheld-navigation li {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		background: transparent !important;
		border: 0;
	}

	body:not(.wplife-checkout) .handheld-navigation a {
		display: block;
		padding: 10px 8px 10px 4px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.35;
		color: var(--wplife-navy) !important;
		background: transparent !important;
		text-align: left;
	}

	body:not(.wplife-checkout) .handheld-navigation ul > li:first-child > a {
		padding-top: 20px !important;
	}

	body:not(.wplife-checkout) .wplife-menu-close {
		display: none;
		position: fixed;
		top: 8px;
		right: 8px;
		z-index: 100090;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none !important;
		background-color: transparent !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 22px 22px;
		font-size: 0;
		cursor: pointer;
	}

	body.wplife-mobile-menu-open .wplife-menu-close {
		display: block;
	}

	body:not(.wplife-checkout) .wplife-menu-close::before,
	body:not(.wplife-checkout) .wplife-menu-close::after {
		content: none !important;
		display: none !important;
	}

	body.wplife-mobile-menu-open {
		overflow: hidden;
	}

	body.wplife-mobile-menu-open button.menu-toggle {
		visibility: hidden;
	}
}