/* Shared structural styles — imported at the top of each template CSS file */

.cpgt-section {
	margin: 30px 0 50px;
}

/* Breaks the section out of whatever narrower container/column it's
   nested in (common with page builders like Elementor when a section
   isn't set to full-width), so the grid always spans the full browser
   width instead of getting squeezed into part of the page with blank
   space beside it. This is the default; add width="contained" on the
   shortcode to keep the old, non-breakout behaviour instead. */
.cpgt-section.cpgt-width-full {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding-left: 60px;
	padding-right: 24px;
	box-sizing: border-box;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.cpgt-section.cpgt-width-full {
		padding-left: 30px;
		padding-right: 24px;
	}
}
@media (max-width: 767px) {
	.cpgt-section.cpgt-width-full {
		padding-left: 20px;
		padding-right: 14px;
	}
}

.cpgt-section-title {
	font-size: 20px;
	font-weight: 400;
	color: #222;
	padding-bottom: 14px;
	margin: 0 0 26px;
	border-bottom: 1px solid #e5e5e5;
}

.cpgt-section .cpgt-grid,
ul.products.cpgt-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 28px 20px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
/* Flexbox, not CSS Grid — deliberately simple, with the exact per-item
   width set by an id-scoped <style> block the shortcode outputs (see
   CPGT_Shortcode::render()). The 25% below is only a generic fallback
   for the rare case that block doesn't load.
   Below 1024px (tablets and phones) the grid becomes a swipeable slider
   instead of wrapping to more rows — see the "Tablet & mobile" block
   near the end of this file, which is what actually implements it and
   deliberately comes last so it wins the cascade at this width. */

/* These reset whatever width/float/margin/box-sizing a theme's own
   WooCommerce grid CSS (e.g. "columns-4") tries to force onto each
   product, so items always fill their grid cell cleanly. flex/max-width
   here are a generic 4-up fallback (deliberately NOT !important) so the
   shortcode's own id-scoped percentage, or the slider/mobile rules
   further down, can cleanly override it. */
.cpgt-section .cpgt-grid li.product,
ul.products.cpgt-grid li.product {
	position: relative !important;
	display: block !important;
	float: none !important;
	flex: 1 1 23%;
	max-width: 23%;
	margin: 0 !important;
	padding: 0 0 6px !important;
	box-sizing: border-box !important;
	list-style: none !important;
	clear: none !important;
	overflow: hidden !important;
}

.cpgt-section .cpgt-grid li.product a.woocommerce-LoopProduct-link,
ul.products.cpgt-grid li.product a.woocommerce-LoopProduct-link {
	display: block !important;
	text-decoration: none !important;
	color: inherit !important;
	width: 100% !important;
	position: relative !important;
	overflow: hidden !important;
}

.cpgt-section .cpgt-grid img,
ul.products.cpgt-grid img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block !important;
	object-fit: cover !important;
}

/* Wraps just the thumbnail (not the title/price that follow it in the
   same link) so badges and the hover-swap image size themselves
   against the image only, instead of stretching to the whole card. */
.cpgt-section .cpgt-grid .cpgt-img-wrap,
ul.products.cpgt-grid .cpgt-img-wrap {
	position: relative !important;
	overflow: hidden !important;
	display: block !important;
	line-height: 0 !important;
}

/* Second product photo, absolutely stacked over the first — CSS below
   fades it in on hover so the image appears to "change". Explicit
   filter/transform resets guard against any theme-level hover effect
   (blur-in transitions, zoom scale, etc.) bleeding onto this image and
   making it look soft. */
.cpgt-section .cpgt-grid .cpgt-hover-img,
ul.products.cpgt-grid .cpgt-hover-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	opacity: 0 !important;
	z-index: 2;
	transition: opacity 0.35s ease !important;
	filter: none !important;
	-webkit-filter: none !important;
	transform: none !important;
	image-rendering: auto !important;
	backface-visibility: hidden;
}
.cpgt-section .cpgt-grid li.product:hover .cpgt-hover-img,
ul.products.cpgt-grid li.product:hover .cpgt-hover-img {
	opacity: 1 !important;
}

/* Neutralise theme colours/typography on title, price so each template's
   own CSS file is what visually controls them. */
.cpgt-section .cpgt-grid .woocommerce-loop-product__title,
ul.products.cpgt-grid .woocommerce-loop-product__title {
	color: inherit !important;
}
.cpgt-section .cpgt-grid .price,
ul.products.cpgt-grid .price {
	color: inherit !important;
}

/* Add to Cart / Select Options / Read More button — hidden by default,
   slides up into view as an overlay bar when the shopper hovers the card.
   Works for simple (ajax_add_to_cart), variable ("Select options") and
   external ("Read more") products, since WooCommerce gives all of them
   the "button" class in the loop. */
.cpgt-section .cpgt-grid li.product > a.button,
ul.products.cpgt-grid li.product > a.button {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	text-align: center !important;
	padding: 11px 6px !important;
	background: rgba(17, 17, 17, 0.92) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 0 !important;
	transform: translateY(100%);
	transition: transform 0.28s ease;
	z-index: 6;
}
.cpgt-section .cpgt-grid li.product:hover > a.button,
ul.products.cpgt-grid li.product:hover > a.button {
	transform: translateY(0);
}
@media (hover: none) {
	/* Touch devices can't hover — keep the button reachable, just quieter. */
	.cpgt-section .cpgt-grid li.product > a.button,
	ul.products.cpgt-grid li.product > a.button {
		position: static !important;
		transform: none !important;
		margin-top: 8px !important;
		background: #111 !important;
	}
	.cpgt-section .cpgt-grid li.product,
	ul.products.cpgt-grid li.product {
		overflow: visible !important;
	}
}

/* Wishlist heart — every property is !important because theme/page-builder
   default <button> styles (padding, border-radius, width:auto, etc.) are a
   very common source of this rendering as a stretched rectangle instead of
   a clean circle. (Deliberately not using "all: unset" here — some CSS
   minifiers mangle that shorthand, which can silently drop the whole
   reset.) */
.cpgt-wishlist-btn {
	box-sizing: border-box !important;
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 5 !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	overflow: hidden !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, 0.92) !important;
	background-image: none !important;
	background-clip: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #222 !important;
	line-height: 1 !important;
	font-size: 0 !important;
	text-indent: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	transition: transform 0.15s ease !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
/* Targeted by its own class (not just ".cpgt-wishlist-btn svg") so the icon
   is always capped to 18px even if it somehow ends up outside the button
   wrapper for any reason — this is the fix for it rendering as a giant,
   unstyled heart. */
svg.cpgt-wishlist-icon {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	display: block !important;
	flex: 0 0 auto !important;
}
.cpgt-wishlist-btn:hover { transform: scale(1.08); }
.cpgt-wishlist-btn.is-active { color: #d1345b; }
.cpgt-wishlist-btn.is-active svg path { fill: #d1345b; stroke: #d1345b; }

/* Badges */
.cpgt-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.cpgt-badge {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 3px;
	background: #111;
	color: #fff;
}
.cpgt-badge-sale { background: #b23b3b; }
.cpgt-badge-new { background: #2f6b45; }
.cpgt-badge-rated { background: #b8860b; }
.cpgt-badge-colors { background: #fff; color: #111; border: 1px solid #ccc; }

/* Swatches + tags row */
.cpgt-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.cpgt-swatches { display: flex; align-items: center; gap: 6px; }
.cpgt-swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid rgba(0,0,0,0.15);
}
.cpgt-swatch-more {
	font-size: 11px;
	color: #666;
}
.cpgt-material-tag {
	font-size: 11px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ============ Slider (desktop) ============
   Used when the [cpgt_products] shortcode has more products than fit in
   one row (limit > columns), or when slider="yes" is set explicitly. */
.cpgt-slider-wrap {
	position: relative;
}
.cpgt-slider-arrow {
	/* Buttons keep native OS/browser "appearance" (flat grey chrome,
	   default border, no border-radius/box-shadow support) unless it's
	   explicitly turned off — without this, some browsers ignore the
	   background/border-radius/box-shadow below entirely and render a
	   plain square system button instead of the intended white circle.
	   !important throughout this rule so a theme's own button reset
	   (many themes style all <button> elements globally) can't win. */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	top: 38% !important;
	transform: translateY(-50%) !important;
	z-index: 8 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid #e2e2e2 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: #222 !important;
	outline: none !important;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.cpgt-slider-arrow:hover { background: #111 !important; color: #fff !important; }
.cpgt-slider-arrow:focus-visible { box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 2px #111 !important; }
.cpgt-slider-arrow:disabled { opacity: 0.35 !important; cursor: default !important; }
.cpgt-slider-arrow:disabled:hover { background: #fff !important; color: #222 !important; }
/* Sit just inside the row instead of floating out toward the browser
   edge — especially noticeable on the width="full" breakout layout,
   where the arrow used to end up hugging the viewport edge itself. */
.cpgt-slider-prev { left: 10px !important; }
.cpgt-slider-next { right: 10px !important; }

.cpgt-grid.cpgt-slider-track,
ul.products.cpgt-grid.cpgt-slider-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 6px !important;
}
.cpgt-grid.cpgt-slider-track::-webkit-scrollbar,
ul.products.cpgt-grid.cpgt-slider-track::-webkit-scrollbar {
	display: none;
	height: 0;
}
.cpgt-grid.cpgt-slider-track li.product,
ul.products.cpgt-grid.cpgt-slider-track li.product {
	flex: 0 0 calc((100% - (var(--cpgt-cols, 4) - 1) * 20px) / var(--cpgt-cols, 4)) !important;
	width: auto !important;
	scroll-snap-align: start;
}

/* Mouse click-and-drag scrolling (see slider.js). Touch keeps the browser's
   native thumb-drag behaviour, which needs none of this. */
.cpgt-grid.cpgt-slider-track,
ul.products.cpgt-grid.cpgt-slider-track {
	cursor: grab;
}
.cpgt-grid.cpgt-slider-track img,
ul.products.cpgt-grid.cpgt-slider-track img,
.cpgt-grid.cpgt-slider-track a,
ul.products.cpgt-grid.cpgt-slider-track a {
	-webkit-user-drag: none;
}
.cpgt-grid.cpgt-slider-track.cpgt-dragging,
ul.products.cpgt-grid.cpgt-slider-track.cpgt-dragging {
	cursor: grabbing !important;
	scroll-snap-type: none !important;
	user-select: none;
}
.cpgt-grid.cpgt-slider-track.cpgt-dragging li.product,
ul.products.cpgt-grid.cpgt-slider-track.cpgt-dragging li.product {
	pointer-events: none;
}

/* Arrow buttons are desktop-only. Tablet and mobile always get a native
   swipeable slider (see the block below), so the click-arrow UI is both
   unnecessary there and, at in-between widths like 600–1024px, ends up
   floating awkwardly over the cards — hide it for the whole tablet/mobile
   range, not just phones. */
@media (max-width: 1024px) {
	.cpgt-slider-arrow { display: none; }
}

/* ============ Tablet & mobile: always a swipeable slider ============
   Below 1024px, the grid becomes a horizontally swipeable slider instead
   of wrapping to more rows — regardless of whether the desktop version
   is a static grid or already a slider with arrows. Tablets (768–1024px)
   see exactly 3 cards per view; phones (below 768px) see exactly 2. This
   block is deliberately last in the file so it wins the cascade at these
   widths. */
@media (max-width: 1024px) {
	.cpgt-section .cpgt-grid,
	ul.products.cpgt-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		gap: 16px !important;
		padding-bottom: 8px !important;
		scrollbar-width: none;
	}
	.cpgt-section .cpgt-grid::-webkit-scrollbar,
	ul.products.cpgt-grid::-webkit-scrollbar {
		display: none;
		height: 0;
	}
}
/* Tablet: exactly 3 cards per view (two 16px gaps between three cards). */
@media (min-width: 768px) and (max-width: 1024px) {
	.cpgt-section .cpgt-grid li.product,
	ul.products.cpgt-grid li.product {
		flex: 0 0 calc((100% - 32px) / 3) !important;
		width: calc((100% - 32px) / 3) !important;
		scroll-snap-align: start;
	}
}
/* Phone: exactly 2 cards per view (one 12px gap between two cards). */
@media (max-width: 767px) {
	.cpgt-section .cpgt-grid,
	ul.products.cpgt-grid {
		gap: 12px !important;
	}
	.cpgt-section .cpgt-grid li.product,
	ul.products.cpgt-grid li.product {
		flex: 0 0 calc(50% - 6px) !important;
		width: calc(50% - 6px) !important;
		scroll-snap-align: start;
	}
}