/*
 Theme Name:   Kadence C2B Customizations
 Theme URI:    http://closdebreuilly.com/kadence-c2b/
 Description:  Customizations to Kadence Theme for C2B
 Author:       Adrien Tay Pamart
 Template:     kadence
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  c2b
*/

/* Theme customization starts here
-------------------------------------------------------------- */

:root {
	--c2b-form-v-padding: .3em;
	--c2b-form-h-padding: .5em;
	--c2b-subtle-background: #e8e6e180; /* rgba(var(--global-palette7), 0.5); */
	--c2b-subtle-gradient-from: rgba(80, 74, 64, 0.12); /* rgba(var(--global-palette5), 0.12); */
	--c2b-subtle-gradient-to: transparent; /* rgba(var(--global-palette6), 0.0); */
	--c2b-woo-error-color: #a00;
	--c2b-woo-validated-color: #6dc22e;
	--c2b-header-height: 53px;
}
@media screen and (max-width: 1025px) {
	:root {
		--c2b-header-height: 47px;
	}
}

#inner-wrap {
	background-image: url("/wp-content/uploads/misc/bg-vines-map-lightgrey-opt.png");
	background-position: left top 300px;
}

.mini-cart-container ::-webkit-scrollbar {
	display: none;
}

/* kadence styles for shoping cart: when empty or not. second style required to go deep
 * since kadence style is very specific. */
.header-cart-is-empty-true +  * .header-cart-button .header-cart-total {
	visibility: hidden;
}
/* color when empty: mobile header and non mobile header */
#masthead .header-cart-is-empty-true + * .header-cart-button {
	color: rgba(237,242,247,0.6);
}
.header-cart-is-empty-false +  * .header-cart-button .header-cart-total {
	color: var(--global-palette9);
	background: var(--global-palette1);
}
.header-cart-is-empty-false +  * .header-cart-button:hover .header-cart-total {
	color: var(--global-palette1);
	background: var(--global-palette9);
}

/* attempts for organizing blocks in lang switcher, not quite successful. using diplsya none and the
 * likes is complicated and brittle. slightly simpler to do this server side, and simply style visual
 * render here */
#secondary-menu .nav-drop-title-wrap img {
	margin: 5px 3px;
}
#mobile-secondary-menu .drawer-nav-drop-wrap img {
	margin: 5px 7px;
}

/* less cartoonishly in your face woocommerce typography, some details remain to be adjusted */
.woocommerce h2,
.woocommerce h3,
.woocommerce form .form-row label,
.woocommerce mark,
.woocommerce table.shop_table th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tbody td::before,
.woocommerce table.shop_table tbody strong,
.woocommerce ul.order_details li strong,
.woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label,
.woocommerce ul#shipping_method .amount {
	font-weight: 500;
	font-family: var(--global-body-font-family);
}

/* in order page */
.woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label {
	padding: 10px 15px 8px 22px;
}

/* case of shipping cost */
.woocommerce #shipping_method {
	font-weight: 400;
}

.woocommerce ul#shipping_method li {
	flex-wrap: nowrap;
	/* remove bottom margin introduced around jan '24 in kadence theme */
	margin-bottom: 0;
}

/* an ugly fix to separate shipping cost from shipping details, the margin bottom
 * removed from .woocommerce ul#shipping_method li was probably attempting to do the same */
.woocommerce p.woocommerce-shipping-destination {
	margin-top: 0.5em;
}

/* keep real total lines in your face though. with responsive shift, could be th or ::before */
.woocommerce table.shop_table tbody tr.order-total th,
.woocommerce table.shop_table tbody tr.order-total td::before,
.woocommerce table.shop_table tbody tr.order-total td strong,
.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td::before,
.woocommerce table.shop_table tfoot tr.order-total td strong {
	font-weight: 700;
	font-family: var(--global-body-font-family);
}
/* tweak CSS from kadence for order review table and the likes */
.woocommerce table.shop_table td {
	padding: 9px 0 9px 12px;
}
.woocommerce table.shop_table th {
	padding: 9px 0 9px 12px;
}
/* tweak column proportions for order review on checkout page to avoid
 * layout shift when changing the shipping method */
.woocommerce table.woocommerce-checkout-review-order-table .product-name {
	width: 52%;
}
.woocommerce table.woocommerce-checkout-review-order-table .product-total {
	width: 48%;
}

.c2b-button-outline {
	padding: .2em .4em;
	border: 1px solid var(--global-palette-highlight);
	color: var(--global-palette-highlight);
	background-color: var(--global-palette9);
	font-size: 90%;
}

.c2b-button-outline:hover, .c2b-button-outline:focus, .c2b-button-outline:active {
	border: 1px solid var(--global-palette-highlight-alt);
	color: var(--global-palette-highlight-alt);
	background-color: var(--global-palette9);
}

/* coupon entry in checkout page */
.woocommerce form .coupon_inner_checkout {
	font-weight: 400;
	margin-top: .4em;
}
/* lost password page (reset password), also in my account? */
.woocommerce form .form-row .woocommerce-password-strength {
	background-color: transparent;
	font-size: 85%;
	text-align: left;
	padding: 3px 0;
	&.bad, &.short {
		font-weight: 500;
		color: var(--c2b-woo-error-color);
		&::before {
			content: "⚠ ";
		};
	};
	&.good, &.strong {
		font-weight: 400;
		color: var(--c2b-woo-validated-color);
		&::before {
			content: "✓ ";
		};
	};
}
/* myaccount lost reset password in one col */
.woocommerce .lost_reset_password .form-row-first, .woocommerce .lost_reset_password .form-row-last {
	float: none;
}

.woocommerce a.added_to_cart {
	visibility: hidden;
}

div.woocommerce-variation-price {
	margin-bottom: 30px;
}

/* fix to the slightly puzzling choice of kadence to add manually margin-bottom: 0 to the coupon stuff...
 * so add margin top to the next element. also kill white background to reveal textured background...
 * 20241117 after checkout refactor, margin spec not needed anymore, transparent still required */
.woocommerce .woocommerce-checkout .shop_table {
	background-color: transparent;
}
/* fix the puzzling choice of kadence to increase line height for label. the only
 * obviously visible impact is in the t&c section: this is quite ugly. */
.woocommerce form .form-row label {
	line-height: normal;
}

/* avoid overhang for short labels where text appears to the left in product loop (under the centered bottle) */
li.loop-entry div.product-details {
	text-align: center;
}

/* woocommerce checkout forms and others
 * NB support for has() is not yet 100%, but if it is not supported the page reverts to
 * the classical look in theory
 */
.woocommerce form .form-row:has(label) .input-text,
.woocommerce form .form-row:has(label) select {
	padding: calc(1em + var(--c2b-form-v-padding)) var(--c2b-form-h-padding) var(--c2b-form-v-padding);
	border-radius: 5px;
	font-size: 1rem;
	line-height: 1.6;
	height: auto;
}
.woocommerce form p.form-row:has(.input-text) label,
.woocommerce form p.form-row:has(select) label {
	left: 0;
	top: 0;
	position: absolute;
	z-index: 1;
	padding: var(--c2b-form-v-padding) var(--c2b-form-h-padding);
	font-weight: 400;
	font-size: 80%;
	line-height: 1;
}
.woocommerce form p.form-row {
	position: relative;
}
.woocommerce form p[id$="_address_2_field"] .input-text {
	padding: var(--c2b-form-v-padding) var(--c2b-form-h-padding);
}
.woocommerce form p.form-hidden {
	font-size: 90%;
}
.woocommerce form p[id$="_first_nme_field"] {
    width: 48%;
}
.woocommerce form p[id$="_last_name_field"] {
    width: 50%;
}
.woocommerce form p[id$="_postcode_field"] {
    width: 37%;
}
.woocommerce form p[id$="_city_field"] {
    width: 60%;
}
@media screen and (min-width: 1025px) {
	.woocommerce form.checkout .col2-set {
		width: 53%;
		padding-right: var(--global-sm-spacing);
	}
	/* override kadence stuff. modified on 20241117 when refactoring checkout form,
	 * used to cater for the slightly dodgy float based layout (both styles) */
	.woocommerce form.checkout .woocommerce-checkout-review-order, .woocommerce form.checkout #order_review_heading {
		width: 100%;
		padding: 0;
		float: none;
	}
}
#wc-stripe-upe-element {
	min-height: 138px;
}
/* woocommerce stripe gateway background. smaller left/right padding for smaller devices ie iphone SE
   origina size is 0.625em 1.425em 0.625em 1.425em */
#wc-stripe-upe-form {
	padding: 1em 0.625em 0.8em 1.2em;
	background-color: var(--c2b-subtle-background);
	border-color: var(--global-gray-400);
	border-radius: 5px;
}
/* a hack to avoid having a floating checkbox to select payment on initializing
 * stripe elements */
.wc-saved-payment-methods {
	display: none;
}
/* kadence contact form. see asset/css/c2b-language-xx.css for locale sensitive parts  */
.kb-form-basic-style form.kb-advanced-form input:user-invalid,
.kb-form-basic-style form.kb-advanced-form textarea:user-invalid {
	border-color: var(--c2b-woo-error-color);
}
.kb-form-basic-style form.kb-advanced-form input:user-valid,
.kb-form-basic-style form.kb-advanced-form textarea:user-valid {
	border-color: var(--c2b-woo-validated-color);
}
.kb-form-basic-style form.kb-advanced-form .kb-adv-form-field:has(input:user-invalid) label,
.kb-form-basic-style form.kb-advanced-form .kb-adv-form-field:has(textarea:user-invalid) label {
	color: var(--c2b-woo-error-color);
}
/* kadence provisions too much space here, this is ugly */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin-top: var(--global-xs-spacing);
}
.woocommerce-privacy-policy-text {
	margin-bottom: var(--global-xs-spacing);
	font-size: 90%;
}
/* custom buttons for disabled checkout (ie cart constraints for standard delivery) */
.c2b-button {
	text-align: center;
	padding: 0.6em 1em;
	border: 2px none currentColor;
	border-radius: 5px;
}
.c2b-button-disabled {
	cursor: not-allowed;
	background-color: var(--global-palette7);
	color: var(--global-palette5);
	margin-bottom: 5px;
	opacity: 0.5;
}
.c2b-woo-warn {
	padding: 0.6em 1em 0.6em 1em;
	border-left: 5px solid var(--global-palette-highlight);
	margin: var(--global-xs-spacing) 0;
	background-color: var(--c2b-subtle-background);
	color: var(--global-palette4);
}
.c2b-small-text {
	font-size: 90%;
}
/* woocommerce login in checkout page, see see asset/css/c2b-language-xx.css for locale sensitive parts */
.woocommerce form .c2b-validate-email-running::after {
	color: var(--c2b-woo-validated-color);
	position: absolute;
	font-size: 90%;
}
.woocommerce form .c2b-checkout-login-running::after {
	color: var(--c2b-woo-validated-color);
	font-size: 90%;
}
.checkout-login-hidden {
	opacity: 0;
	max-height: 0; /* used when page is loaded */
	overflow-y: hidden;
}
.checkout-login-shown {
	opacity: 1;
	margin-bottom: var(--global-sm-spacing); /* more space for the ::after parts */
	max-height: 1000px; /* used when page is loaded */
	transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
}
.woocommerce form .woocommerce-invalid-required-field::after,
.woocommerce form .woocommerce-invalid::after {
	color: var(--c2b-woo-error-color);
	font-size: 90%;
}
/* used in custom amabassador feature */
.woocommerce form select optgroup {
	font-weight: 500;
}
/* copy style t&c checkbox in kadence */
.woocommerce form .woocommerce-invalid #term_reg_evin {
    outline: 2px solid red;
    outline-offset: 2px;
}

/* my account pages */
.woocommerce-logged-out + .woocommerce {
	max-width: var(--global-content-narrow-width);
	margin: auto;
}
.woocommerce-logged-out + .woocommerce form {
	border: 0;
	padding: 0 var(--global-md-spacing);
}
.woocommerce .lost_password {
	padding-left: var(--global-sm-spacing);
}
@media screen and (max-width: 719px) {
	.woocommerce-logged-out + .woocommerce form {
		border: 0;
		padding: 0;
	}
	/* copied from lost password equivalent cases */
	.woocommerce form.woocommerce-Login .form-row {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}
@media screen and (min-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content {
		padding-left: var(--global-xs-spacing);
	}
}
/* reorder menu in woocommerce my account */
@media screen and (max-width: 767px) {
	.woocommerce-account div.woocommerce {
		display: flex;
		flex-direction: column-reverse;
	}
	.woocommerce-account div.woocommerce-MyAccount-content {
		margin-bottom: 35px;
	}
}

.c2b-placeholder,
textarea::placeholder,
input::placeholder {
	opacity: 0.4;
}

/* slightly more obvious UX for impossible selection of vintages/bottle size */
label.kt_disabled {
	/*cursor: not-allowed;*/
	pointer-events: none;
}

/* defaults for banner on loi Evin is to hide */
.regulatory-evin {
	margin-left: 15px;
	display: none;
}

/* the dark magic of CSS... this relies on callback adding the element in the gallery :-) */
div:has(span.c2b-soldout) form .woocommerce-variation-price {
	opacity: 0.3;
}

/* no need to display add to cart when vintage is sold out */
.woocommerce-variation-add-to-cart-disabled {
	display: none;
}

/* the sold out bages/classes (for copied from wcsob badges) */
.c2b-soldout {
	color: #625D52;
	background: #E8E6E1;
	font-size: 17px;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-left: 8px;
	font-weight: normal;
	width: auto;
	height: auto;
	border-radius: 5px;
	z-index: 10;
	text-align: center;
	position: absolute;
	top: 6px;
	right: auto;
	bottom: auto;
	left: 6px;
}

.single-product .c2b-soldout {
	top: 20px;
	right: auto;
	bottom: auto;
	left: 30px;
}

/* specific style for sold out text as part of variation display */
.c2b-soldout-text {
	padding-top: 8px;  /* this fits exactly the size of checkout button, an unstable trick */
	padding-bottom: 7px;
	margin-bottom: 0;
	border-radius: 5px;
	background-color: rgba(98,93,82,.1); /* var(--wp--preset--color--theme-palette-7) w/ a bit of transparency, same as delivery */
	text-align: center;
}

span.c2b-soldout ~ img {
	opacity: 0.3;
}

/* breadcrumbs in factsheets and shop */
.link-style-no-underline .entry-content .c2b-factsheet-breadcrumbs a {
	text-decoration: underline;
}
.link-style-no-underline .entry-content .c2b-product-breadcrumbs a {
	text-decoration: underline;
}