/* Montarea custom CSS */
.header-logo svg {
	width: 160px;
	height: auto;
	fill: #fff;
}

.header-logo a {
	text-decoration: none;
}

.header-logo a:hover {
	text-decoration: none;
}

/* header menu links */
.header-menu-links a {
	text-decoration: none;
}

.header-menu-links a:hover {
	color: #000000;
	text-decoration: none;
}

.shop-quick-links ul {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.shop-quick-links ul li {
	display: inline-block;
	padding: 0 1.25rem 0 0;
	list-style: none;
	vertical-align: middle;
}

.shop-quick-links ul li a {
	color: #222 !important;
}

.shop-quick-links ul li a:hover {
	color: #222 !important;
}

/* === Animated line under hyperlinks === */
/* 1. Target links on a light background */
.animated-underline, .shop-quick-links ul li a {
  display: inline; /* Required for the background to wrap correctly */
  text-decoration: none;
  padding-bottom: 2px;
  /* 2. Create the "underline" using a background gradient */
  background-image: linear-gradient(#222, #222); /* Line color */
  background-position: 0% 100%; /* Start at the bottom left */
  background-repeat: no-repeat;
  background-size: 0% 2px; /* Start with 0% width and 2px height */
  /* 3. Smooth transition */
  transition: background-size 0.4s ease;
}

.animated-underline-darkbg, footer a, .header-menu-links a, header nav a {
  display: inline; /* Required for the background to wrap correctly */
  text-decoration: none;
  padding-bottom: 2px;
  /* 2. Create the "underline" using a background gradient */
  background-image: linear-gradient(#fff, #fff); /* Line color */
  background-position: 0% 100%; /* Start at the bottom left */
  background-repeat: no-repeat;
  background-size: 0% 2px; /* Start with 0% width and 2px height */
  /* 3. Smooth transition */
  transition: background-size 0.4s ease;
}

/* 4. The Hover State */
.animated-underline:hover, .header-menu-links a:hover, header nav a:hover, .shop-quick-links ul li a:hover, footer a:hover {
  background-size: 100% 2px; /* Expand width to 100% */
}

.home-hero-cta a {
	display: inline; /* Required for the background to wrap correctly */
	text-decoration: none;
	padding-bottom: 2px;
	/* 2. Create the "underline" using a background gradient */
	background-image: linear-gradient(#fef289, #fef289); /* Line color */
	background-position: 0% 100%; /* Start at the bottom left */
	background-repeat: no-repeat;
	background-size: 0% 2px; /* Start with 0% width and 2px height */
	/* 3. Smooth transition */
	transition: background-size 0.4s ease;
}

.home-hero-cta a:hover {
	background-size: 100% 2px; /* Expand width to 100% */
}

/* === Custom product filters === */
.product-filters-custom button.wc-block-product-filter-chips__item {
	padding: 2px 4px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
	/* Create the "background" using a background gradient */
	background-image: linear-gradient(#6da2e5, #6da2e5); /* background color */
	background-position: 0% 100%; /* Start at the bottom left */
	background-repeat: no-repeat;
	background-size: 100% 2px; /* Start with 100% width and 2px height */
	/* 3. Smooth transition */
	transition: background-size 0.4s ease;
}

/* Override default hover colour */
.wc-block-product-filter-chips__item:hover {
	background-color: none;
}

.product-filters-custom button.wc-block-product-filter-chips__item:hover {
	background-color: #fff;
	background-size: 0% 2px; /* Contract width to 0% */
}

/* Active selected product filter chips */
.has-selected-chip-background-color .wc-block-product-filter-chips__item[aria-checked=true] {
	background-color: #c9e5f7;
	transition: background-color 0.4s ease;
}

.has-selected-chip-background-color .wc-block-product-filter-chips__item[aria-checked=true]:hover {
	background-color: #ddf1fe;
}

/* Clear filters button */
.product-filters-custom .wp-block-woocommerce-product-filter-clear-button .wc-block-product-filter-clear-button {
	width: inherit;
}

.product-filters-custom .wp-block-woocommerce-product-filter-clear-button .wc-block-product-filter-clear-button button {
	width: inherit;
	padding: 2px 4px !important;
	border: 0;
	border-radius: 0px;
	/* Create the "background" using a background gradient */
	background-image: linear-gradient(#f49446, #f49446); /* background color */
	background-position: 0% 100%; /* Start at the bottom left */
	background-repeat: no-repeat;
	background-size: 100% 2px; /* Start with 100% width and 2px height */
	/* 3. Smooth transition */
	transition: background-size 0.4s ease;
}

.product-filters-custom .wp-block-woocommerce-product-filter-clear-button .wc-block-product-filter-clear-button button:hover {
	background-color: #fff;
	background-size: 0% 2px /* Contract width to 0% */
}

/* === CSS for product sorting filter dropdown === */
form.woocommerce-ordering label {
	margin-right: 0px;
	line-height: 20px;
}

form.woocommerce-ordering select {
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #ccc;
	border-bottom-width: 2px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	padding-bottom: 2px;
	line-height: 20px;
	vertical-align: baseline !important;
	border-radius: 0px;
	cursor: pointer;
}

/* === Price prefixes === */
/* Style the 'From AUD' prefixes */
.currency-prefix, .price-from-text {
    font-size: 0.85em;
    color: inherit;
}

/* === Shop page 'Add to cart' or 'Select options' button === */
div.wp-block-woocommerce-product-button a.add_to_cart_button {
	border-radius: 0px;
	background-color: #fff !important;
	padding: 2px 4px;
	color: inherit;
	text-decoration: none;
	/* Create the "background" using a background gradient */
	background-image: linear-gradient(#333, #333); /* background color */
	background-position: 0% 100%; /* Start at the bottom left */
	background-repeat: no-repeat;
	background-size: 100% 2px; /* Start with 100% width and 2px height */
	/* 3. Smooth transition */
	transition: background-size 0.4s ease;
}

div.wp-block-woocommerce-product-button a.add_to_cart_button:hover {
	background-color: #fff !important;
	background-size: 0% 2px; /* Contract width to 0% */
	color: inherit;
}

/* === CSS for cart === */
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 200px;
	text-align: left;
}

th.wc-block-cart-items__header-image {
	padding-left: 16px;
}


/* === Product display page === */
/* Product display page (display a single product) */
.pdp-price .wc-block-components-product-price, .pdp-price .wc-block-grid__product-price {
	font-size: 1.1rem;
} 

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-options .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
	margin-bottom: 0.5em;
	background-color: #fff;
	color: inherit;
	width: inherit;
	padding: 6px 12px 5px !important;
	border: solid 2px #6da2e5;
	border-radius: 5px;
	/* Create the "background" using a background gradient */
	background-image: linear-gradient(#E2F2F8, #E2F2F8); /* background color */
	background-position: 0% 100%; /* Start at the bottom left */
	background-repeat: no-repeat;
	background-size: 0% 100%; /* Start with 0% width and 2px height */
	/* 3. Smooth transition */
	transition: background-size 0.4s ease;
}

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-options .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:hover {
	background-size: 100% 100% /* Expand width to 100% */
}

:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked)) {
	background-color: #2D546B !important; /* dark blue background when selected*/
	color: #fff !important;
	border-color: #2D546B !important;
	background-image: none !important;
}

:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill):where(:hover:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked)) {
	background-color: #2D546B !important;
}

/* Add to cart button on PDP page */
form.wp-block-add-to-cart-with-options button.add_to_cart_button {
	transition: background-color 0.4s ease;
}

form.wp-block-add-to-cart-with-options button.add_to_cart_button:hover {
	background-color: var(--wp--preset--color--custom-button-rollover) !important;
}

/* 1. Override the block's default display logic to enable animation */
.wp-block-accordion-panel {
    display: grid !important; /* Forces the panel to stay in the DOM for animation */
    grid-template-rows: 0fr;   /* Collapsed state */
    transition: grid-template-rows 0.4s ease-in-out, visibility 0.4s;
    visibility: hidden;
    overflow: hidden;
}

/* 2. Animate to full height when the 'is-open' class is present */
.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
    grid-template-rows: 1fr;   /* Smoothly expands to fit content */
    visibility: visible;
}

/* 3. Helper to ensure internal elements don't collapse improperly */
.wp-block-accordion-panel > * {
    min-height: 0;
}

/* ///// Sendy ///// */
/* Sendy subscribe form in footer */

.subscription-wrapper,
.sendy-wrapper-firstname-lastname,
.sendy-emailaddress,
.firstname,
.lastname {
	box-sizing: border-box;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname {
	display: flex;
  	flex-direction: row;
  	box-sizing: border-box;
}

/*
.subscription-wrapper .sendy-wrapper-firstname-lastname .firstname {
	width: 28%;
	padding: 10px;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname .lastname {
	width: 28%;
	padding: 10px;
}
*/

.subscription-wrapper .sendy-wrapper-firstname-lastname .sendy-emailaddress {
	width: 100%;
	padding: 5px 0px;
	box-sizing: border-box;
}

.subscription-wrapper .sendy-form-label {
	font-size: 14px;
	line-height: 16px;
	color: #946602;
}

.subscription-wrapper .sendy-form-label span.sendy-optionalspan-label {
	font-size: 11px;
	line-height: 13px;
	color: #C58907;
}

.subscription-wrapper input[type=text], .subscription-wrapper input[type=email] {
	width: 100%;
	flex-grow: 1; /* Makes the input fill the remaining space */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid 2px #fcdb43;
	padding: 5px 2px;
	background-color: transparent;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.subscription-wrapper input[type=text]:focus, .subscription-wrapper input[type=email]:focus {
	border-bottom-color: #ccaa10;
}

.sendy-button {
	text-align: right;
}

.sendy-button #submit-btn {
	cursor: pointer;
	padding: 10px 30px;
    font-size: 14px;
    font-family: inherit;
	font-size: 16px;
	font-weight: 400;
    background: #fcdb43;
	color: inherit;
    border: none;
    border-radius: 50px;
}

.sendy-button #submit-btn:hover {
	background: #ffe360;
}

/* 1. Target the status message element */
.sendy-statusmessage {
    text-align: right;
}

.sendy-statusmessage-wrapper {
    width: 60%;
    text-align: right;
    display: inline-block;
    padding: 0px 0px;
}

.sendy-statusmessage #status {
    font-size: 16px;
    text-align: right;
    transition: opacity 0.5s ease-in-out, color 0.5s, background-color 0.5s; 
    opacity: 1;
    position: relative; /* Required for the pseudo-element positioning */
    display: inline-block; /* Ensures the border is only as wide as the text */
}

/* 2. The "Border" Pseudo-element */
.sendy-statusmessage #status::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0%; 
    height: 1px;
    border-bottom: 2px solid transparent;
    transition: width 0.8s ease-out, border-color 0.5s;
}

/* Add this to ensure the width stays 0 when no style is present */
.sendy-statusmessage #status:not([style]) {
    transition: none !important;
}
.sendy-statusmessage #status:not([style])::after {
    width: 0% !important;
    transition: none !important;
}

/* 3. Logic to "Draw" the border when color is applied */

/* Error State */
.sendy-statusmessage #status[style*="color: red"] {
    color: #6d2e2e;
    font-size: 14px;
}
.sendy-statusmessage #status[style*="color: red"]::after {
    width: 100%;
    border-bottom-color: #e6a0a0;
}

/* Success State */
.sendy-statusmessage #status[style*="color: green"] {
    color: #3b7c3b;
}
.sendy-statusmessage #status[style*="color: green"]::after {
    width: 100%;
    border-bottom-color: #a3d5a3;
}

/* Loading/Verifying State */
.sendy-statusmessage #status[style*="color: gray"] {
    color: #758275;
    font-size: 14px;
}
.sendy-statusmessage #status[style*="color: gray"]::after {
    width: 100%;
    border-bottom-color: #abb9ab;
}

/* Override Focus styles on PDP pills */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus-within,
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus, 
.wp-site-blocks *:focus, 
.wp-site-blocks *:focus-within {
    outline: none;
    outline-offset: none;
}

/* === Footer === */
footer a:hover {
	text-decoration: none;
}


/* === MOBILE rules === */
/* CSS rules to apply when the screen width is 900px or less */
@media screen and (max-width: 900px) {

	.subscription-wrapper .sendy-wrapper-firstname-lastname {
		flex-direction: column;
	}

	.subscription-wrapper .sendy-wrapper-firstname-lastname .firstname, 
	.subscription-wrapper .sendy-wrapper-firstname-lastname .lastname, 
	.subscription-wrapper .sendy-wrapper-firstname-lastname .sendy-emailaddress {
		width: 100%;
		padding: 5px 0px;
	}
	
	.sendy-statusmessage-wrapper {
		width: 100%;
		display: block;
	}
}

/* CSS rules to apply when the screen width is 600px or less */
@media screen and (max-width: 600px) {
	.product-filters-custom button.wc-block-product-filters__open-overlay {
		width: inherit;
		font-weight: 600;
		padding: 2px 2px;
		margin-bottom: 5px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: none;
		/* Create the "background" using a background gradient */
		background-image: linear-gradient(#6da2e5, #6da2e5); /* background color */
		background-position: 0% 100%; /* Start at the bottom left */
		background-repeat: no-repeat;
		background-size: 100% 2px; /* Start with 100% width and 2px height */
		/* 3. Smooth transition */
		transition: background-size 0.4s ease;
	}

	.product-filters-custom button.wc-block-product-filters__open-overlay svg {
		display: none;
	}

	:where(.wc-block-product-filters) .wc-block-product-filters__open-overlay span {
		padding: 2px 2px;
	}

	.product-filters-custom button.wc-block-product-filters__open-overlay:hover {
		width: inherit;
		background-color: #fff;
		background-size: 0% 2px /* Contract width to 0% */
	}

	.wp-container-woocommerce-product-filters-is-layout-8d9dc39a {
		flex-direction: inherit;
	}

	.wc-block-product-filters__overlay-wrapper p {
		font-size: 18px !important;
		padding-top: 50px !important;
	}

	.wc-block-product-filters__overlay-wrapper button.wc-block-product-filter-chips__item {
		border: none;
		border-radius: 0px; 
		font-size: 16px;
		font-weight: 300;
		margin-right: 10px;
	}

	.wc-block-product-filters__overlay-wrapper .wc-block-product-filter-clear-button button {
		font-size: 16px !important;
		margin-top: 50px;
	}

	.wc-block-product-filters__overlay-wrapper .wc-block-product-filters__overlay-footer {
		box-shadow: none;
	}
}