/*
 * CommerceKit + Shoptimizer overrides for the product page.
 *
 * Selectors here target CommerceKit DOM (.cgkit-*, .commercekit-*, .ckit-*,
 * .ckwtl-*, #commercegurus-*, #cgkit-*, .cg-thumb-swiper) — they live in this
 * separate file so they're easy to spot and easy to replace if/when CommerceKit
 * upstreams an equivalent fix in compatibility/shoptimizer.css.
 *
 * Loaded on the product page from class-wc-product-customizations.php:init().
 */

/* ------------------------------------------------------------------ */
/* Waitlist                                                           */
/* ------------------------------------------------------------------ */

/* CommerceKit shows a stray tooltip on variable products that are out of stock */
.ckwtl-os-label { display: none !important; }

/* Waitlist call-to-action buttons — Orem brand colors */
#ckwtl-button,
#ckwtl-button2,
#ckwtl-button3,
.load-more-images,
.cr-show-more-reviews-prd {
	color: black !important;
	background-color: #85E4E1 !important;
	font-weight: 400 !important;
}

#ckwtl-button,
#ckwtl-button2,
.cr-show-more-reviews-prd:hover,
.load-more-images:hover {
	background-color: #F9FDFD !important;
	box-shadow: 0 0 0 3px #85E4E1;
	color: #000000;
	font-weight: 400;
}

@media (min-width: 771px) {
	.load-more-images { font-weight: 400 !important; }
}

/* ------------------------------------------------------------------ */
/* Attribute swatches (color, planeación buttons)                     */
/* ------------------------------------------------------------------ */

/* Hide CommerceKit's tooltip pseudo-elements: when a variation is selected
   on mobile, the tooltip overflows and is redundant — the chosen attribute
   is already shown next to the swatches and the gallery updates. */
.cgkit-attribute-swatches-wrap ul li:before,
.cgkit-attribute-swatches-wrap ul li:after { display: none !important; }

/* "Button" style swatches (e.g. planeación) */
.cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
	background-color: #ECE2D8 !important;
	border: 1px solid #ECE2D8 !important;
}

.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button {
	border: 1px solid #6e6b6a;
	color: #6e6b6a !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	font-size: 13px !important;
}

/* Color swatches in the summary block */
.summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color > button {
	width: 35px !important;
	height: 35px !important;
	padding: 3.5px !important;
}
.summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color span.color-div {
	width: 28px !important;
	height: 28px !important;
}

/* Hide the auto-generated semicolon between attribute label and value */
#primary table.variations th.label span span.ckit-chosen-attribute_semicolon {
	display: none !important;
}

/* Chosen attribute text inside variations table */
.variations .cgkit-chosen-attribute { padding-left: 0 !important; }

#primary table.variations .cgkit-chosen-attribute {
	font-size: 13px !important;
	font-family: "Noto Serif Display";
	font-style: italic;
}

.cgkit-chosen-attribute.no-selection { color: red !important; }

/* Hide swatches that aren't valid for the currently selected combination
   (e.g. in agendas, when carpeta is selected only matching colors apply) */
button.cgkit-swatch.cgkit-disabled { display: none !important; }

/* ------------------------------------------------------------------ */
/* Gallery + badges                                                   */
/* ------------------------------------------------------------------ */

/* Move CommerceKit's badge to the right side of the gallery */
#commercegurus-pdp-gallery-wrapper .ckit-badge_wrapper {
	left: auto !important;
	right: 10px !important;
}

@media (max-width: 770px) {
	.swiper-container.cg-thumb-swiper { top: 0 !important; }
}

/* Video iframe in the gallery — keep it square instead of 16:9.
   CLS FIX: aspect-ratio + auto height reserves space without pinning a
   fixed pixel value that conflicts with viewport changes. */
@media (min-width: 1025px) {
	.cgkit-video .cgkit-iframe-wrap {
		aspect-ratio: 1 / 1;
		height: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Sticky add-to-cart bar (CommerceKit module)                        */
/* ------------------------------------------------------------------ */

/* Mobile sticky ATC: Orem controls its own ATC, so CommerceKit's mobile
   sticky bar is hidden. CLS FIX: visibility:hidden + pointer-events:none
   prevents the empty container from intercepting touches and from
   triggering a paint when JS toggles state. */
#cgkit-mobile-commercekit-sticky-atc {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#cgkit-mobile-commercekit-sticky-atc button { display: none; }

/* Sticky ATC: smaller buttons inside the sticky bar's swatch list so the
   "con/sin horarios" buttons fit on the side cart */
.commercekit_sticky-atc .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.button-fluid {
	font-size: 10px !important;
	padding: 9px 4px !important;
}

.sticky-atc_button {
	font-weight: 400 !important;
	margin-right: 3px !important;
}

@media (max-width: 641px) {
	.variations_form.cart.commercekit_sticky-atc { z-index: 99999999 !important; }

	#cgkit-mobile-commercekit-sticky-atc button { max-width: 75% !important; }
}

@media (min-width: 992px) {
	#cgkit-tab-commercekit-sticky-atc-title .button { display: none; }

	#cgkit-mobile-commercekit-sticky-atc {
		display: flex !important;
		flex-direction: row-reverse;
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: right;
		background: #fff;
		box-shadow: 4px -5px 6px rgb(50 50 50 / 5%);
		z-index: 19;
		max-width: 100% !important;
		align-items: center;
		justify-content: space-between;
		column-gap: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#cgkit-mobile-commercekit-sticky-atc button {
		width: 39% !important;
		margin: 15px 0;
		font-size: 14px;
		font-weight: 700;
		height: 60px;
		margin-right: 70px !important;
	}
}

@media only screen and (min-width: 1024px) {
	#cgkit-tab-commercekit-sticky-atc-title button {
		height: 55px;
		margin-bottom: 10px;
		width: 350px;
	}
}

/* ------------------------------------------------------------------ */
/* CommerceKit ATC tabs                                               */
/* ------------------------------------------------------------------ */

/* Review-count circle indicator on the ATC tab */
.commercekit-atc-tab-links .commercekit-atc-tab span {
	width: 23px !important;
	height: 23px !important;
	line-height: 23px !important;
	font-size: 9px;
	background-color: #CB8E16;
}

/* Brand-colored underline for active ATC tab */
.commercekit-atc-tab-links li a:after { border-color: #CB8E16 !important; }

/* ------------------------------------------------------------------ */
/* Smaller media-query tweaks for swatches                            */
/* ------------------------------------------------------------------ */

@media (max-width: 450px) {
	.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button { font-size: 10px !important; }

	.cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-button button.button-fluid { padding: 4px !important; }

	.summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color > button {
		width: 30px !important;
		height: 30px !important;
		padding: 2.5px !important;
	}
	.summary .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-color span.color-div {
		width: 25px !important;
		height: 25px !important;
	}
}