/*
 * single-product.css
 *
 * NOTE: This file was previously just a placeholder comment with no
 * actual rules — that's a big part of why things like the slider
 * buttons, the size guide popup, and the wishlist/add-to-cart row had
 * no layout at all. Paste your existing design CSS above this block
 * (product-section, product-thumbnails, color-swatches, tab-nav,
 * product-grid, etc.) and keep the rules below — they only add styles
 * for the NEW functional pieces built in single-product.php/js and do
 * not touch any of your existing class names.
 */

/*
 * BASE LAYOUT — these rules were missing entirely (the file only had a
 * comment placeholder), which is why the thumbnail column showed every
 * image stacked with no scroll container, and the quantity box had no
 * box/border/sizing at all. Replace/extend these with your real design
 * values (colors, fonts, spacing) — the structure below is what makes
 * the slider and qty stepper actually behave like a slider/stepper.
 */

.product-layout {
	display: grid;
	grid-template-columns: 90px 1fr 1fr;
	gap: 24px;
	align-items: start;
}

/* Thumbnail column — fixed-height viewport + vertical scroll, so only
   a handful of thumbs show at once and the up/down buttons actually do
   something. overflow-y was previously "hidden", which blocks real
   scrolling (mouse wheel, touch drag) even though scrollTop could
   still be nudged by the up/down buttons — this switches to a real
   scroll container, with the scrollbar itself hidden for a clean look. */
.product-thumbnails {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
/* FIX: the scroll container is now .thumb-track, not .product-thumbnails.
   #thumbUp/#thumbDown are direct children of .product-thumbnails (outside
   this box), so they're always visible instead of scrolling away or
   being stuck below the fold at the bottom of the list. */
.thumb-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-height: 480px;
	overflow-y: auto;
	/* NOTE: scroll-behavior: smooth is intentionally omitted here. It was
	   fighting with the jQuery .animate({ scrollTop }) call in
	   single-product.js for #thumbUp/#thumbDown — every scrollTop write
	   jQuery made on its own animation frame re-triggered the browser's
	   native smooth-scroll to that tiny intermediate value, so the two
	   animations cancelled each other out and the buttons appeared to do
	   nothing. jQuery's .animate() already provides the smooth motion, so
	   this CSS property is redundant and actively harmful here. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
.thumb-track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
.thumbnail-nav-btn {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #f2f2f2;
	cursor: pointer;
}
/* REVERTED: position: sticky here was causing #thumbDown to visually
   overlap the last thumbnail (it stuck to the bottom edge of the scroll
   container on top of whatever thumbnail happened to be there). Back to
   normal flow — the buttons sit before the first / after the last thumb,
   same as the original design. The actual gallery sync fix lives in
   single-product.js (getCurrentIndex/scrollThumbIntoView), not here. */
.thumb {
	flex: 0 0 auto;
	width: 70px;
	height: 70px;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thumb.active {
	border-color: #111;
}

.product-main-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

/* Responsive caps — without these, "aspect-ratio" alone still lets the
   box grow arbitrarily tall on very wide viewports since it's driven
   by column width, not an absolute limit. */
@media (min-width: 901px) {
	.product-main-image img {
		max-height: 640px;
	}
}
@media (max-width: 900px) {
	.product-main-image img {
		aspect-ratio: 1 / 1;
		max-height: 480px;
	}
}
@media (max-width: 480px) {
	.product-main-image img {
		max-height: 380px;
	}
}

/* Quantity stepper box */
.quantity-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	width: fit-content;
}
.quantity-control .qty-btn {
	width: 36px;
	height: 40px;
	border: none;
	background: #f7f7f7;
	font-size: 16px;
	cursor: pointer;
}
.quantity-control input.qty {
	width: 50px;
	height: 40px;
	border: none;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	text-align: center;
	font-size: 14px;
	-moz-appearance: textfield;
}
.quantity-control input.qty::-webkit-outer-spin-button,
.quantity-control input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Variation attribute rows (variable products) — the actual swatch
   look/feel for these comes from your Variation Swatches plugin's own
   CSS once it replaces the <select> below, this just spaces things out. */
.variation-attribute-wrap {
	margin-bottom: 16px;
}
.variation-select {
	min-width: 160px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
}

/* Plain description swatches on simple products */
.color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 14px;
}
.color-swatches .swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #ddd;
	background: #eee;
	cursor: pointer;
}
.color-swatches .swatch.active {
	border-color: #111;
}

@media (max-width: 900px) {
	.product-layout {
		grid-template-columns: 1fr;
	}
	.product-thumbnails {
		flex-direction: row;
	}
	.thumb-track {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.thumbnail-nav-btn {
		display: none;
	}
}


.product-main-image {
	position: relative;
}
.product-main-image a {
	display: block;
}
.main-image-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.main-image-prev { left: 12px; }
.main-image-next { right: 12px; }
.main-image-nav-btn:hover { background: #fff; }

/* Stock message */
.stock-message {
	font-size: 14px;
	font-weight: 600;

}
.stock-message.in-stock { color: #2e7d32; }
.stock-message.out-of-stock { color: #c62828; }

/* Product meta (SKU / Category / Tags) */
.product-meta {
	margin: 6px 0 4px;
	font-size: 13px;
	line-height: 1.6;
}
.product-meta .meta-row {
	margin: 2px 0;
}
.product-meta .meta-label {
	font-weight: 600;
	margin-right: 4px;
}

/* Reset/clear variation selection link — only appears once a full
   variation selection has been made (toggled by JS). */
.reset-variations-link {
	display: none;
	background: none;
	border: none;
	padding: 4px 0;
	margin: 2px 0 0;
	font-size: 12px;
	color: #666;
	text-decoration: underline;
	cursor: pointer;
}

/* Size guide button */
.btn-size-guide {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 4px 0;
	margin: 2px 0 10px;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* Action row: wishlist + add to cart on one line */
.action-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-top: 14px;
}
.action-row .btn-add-cart,
.action-row .btn-wishlist,
.action-row .btn-wishlist-wrap {
	flex: 1 1 0;
	min-width: 0;
}
.action-row .btn-wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 18px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
}
.action-row .btn-wishlist[aria-pressed="true"] i {
	color: #e53935;
}

/* YITH Wishlist plugin renders its own markup/classes inside
   .btn-wishlist-wrap (not ours), which is why its button/link showed
   up as plain underlined text instead of a bordered button matching
   .btn-wishlist. This reaches into YITH's real output and applies the
   same visual treatment. YITH's "already in wishlist / browse
   wishlist" follow-up text is hidden to keep it button-shaped and
   compact, matching the design; the link underneath still works. */
.action-row .btn-wishlist-wrap {
	display: flex;
	align-items: stretch;
}
.action-row .btn-wishlist-wrap .yith-wcwl-add-to-wishlist {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	height: 100%;
	width: 100%;
}
.action-row .btn-wishlist-wrap a.add_to_wishlist,
.action-row .btn-wishlist-wrap a.added_to_wishlist,
.action-row .btn-wishlist-wrap a.browse_wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	width: 100%;
	padding: 0 18px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.action-row .btn-wishlist-wrap a.add_to_wishlist:hover,
.action-row .btn-wishlist-wrap a.browse_wishlist:hover {
	border-color: #111;
}
.action-row .btn-wishlist-wrap .yith-wcwl-icon {
	color: #e53935;
}
.action-row .btn-wishlist-wrap .feedback,
.action-row .btn-wishlist-wrap .yith-wcwl-wishlistexistsbrowse,
.action-row .btn-wishlist-wrap .yith-wcwl-wishlistaddedbrowse {
	display: none;
}
@media (max-width: 768px) {
	.action-row {
		flex-direction: column;
	}
}

/* Add to cart button — base look + a clear "not ready yet" state for
   variable products before a full selection is made. Previously there
   was no explicit background on .btn-add-cart itself, so the disabled
   state (opacity: 0.6 over nothing) rendered as a flat, washed-out box
   with barely-readable text instead of an intentional muted state. */
.btn-add-cart {
	background: #111;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.single_add_to_cart_button:disabled {
	background: #e5e5e5;
	color: #999;
	opacity: 1;
	cursor: not-allowed;
}
.single_add_to_cart_button:disabled i {
	color: #999;
}

/* Add to cart button loading / added states */
.single_add_to_cart_button .spinner {
	display: none;
}
.single_add_to_cart_button.loading .btn-text {
	visibility: hidden;
}
.single_add_to_cart_button.loading .spinner {
	display: inline-flex;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.single_add_to_cart_button {
	position: relative;
}
.single_add_to_cart_button.added {
	background: #2e7d32;
}
/* .single_add_to_cart_button:disabled styling now lives above, near
   .btn-add-cart, so both live in one place instead of two rules
   fighting over the same selector. */

/* Size guide modal */
.size-guide-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
}
.size-guide-modal.open {
	display: block;
}
.size-guide-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.size-guide-panel {
	position: relative;
	max-width: 520px;
	width: 90%;
	margin: 8vh auto 0;
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	max-height: 80vh;
	overflow-y: auto;
}
.size-guide-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.size-guide-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}
.size-guide-table th,
.size-guide-table td {
	border: 1px solid #e0e0e0;
	padding: 8px 10px;
	text-align: center;
	font-size: 13px;
}
body.size-guide-open {
	overflow: hidden;
}

/* Wrapper for WooCommerce's own add-to-cart / stock / validation
   notices (wc_print_notices()). The notice boxes themselves
   (.woocommerce-message, .woocommerce-error, .woocommerce-info) are
   styled by WooCommerce's core stylesheet — this only adds spacing so
   they don't sit flush against the breadcrumb above. */
.woocommerce-notices-wrapper:empty {
	display: none;
}
.woocommerce-notices-wrapper {
	max-width: 1440px;
	margin: 16px auto 0;
	padding: 0 24px;
}

/* Disabled swatches (e.g. out-of-stock variation combos) */
.color-swatches .swatch:disabled,
.color-swatches .swatch.disabled {
	opacity: 0.35;
	cursor: not-allowed;
	position: relative;
}

.variable-items-wrapper .variable-item.button-variable-item {
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	font-size: 10px;
	padding: 0;
	line-height: 1;
}


/*
 * single-product-responsive.css
 *
 * All @media rules for single-product.php/css in one place. Append to
 * the bottom of your existing single-product.css (after your base
 * rules), or load as a separate file after it — every selector here
 * already exists in your markup, no HTML changes needed.
 */

/* ---- Main image height caps per breakpoint ---- */
@media (min-width: 901px) {
	.product-main-image img {
		max-height: 640px;
	}
}
@media (max-width: 900px) {
	.product-main-image img {
		aspect-ratio: 1 / 1;
		max-height: 480px;
	}
}
@media (max-width: 480px) {
	.product-main-image img {
		max-height: 380px;
	}
}

/* ---- Tablet / mobile gallery layout (≤900px) ----
   FIX: mobile was collapsing .product-layout to 1 column and stacking
   in source order (thumbnails, then main image, then info) — that's
   why the thumbnail strip sat above the big image. grid-template-areas
   reorders things visually (main image first, thumbnails second, info
   last) without touching HTML/DOM order, which desktop + JS still rely
   on for selectors like .thumb / .thumb-track. */
@media (max-width: 900px) {
	.product-layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"main"
			"thumbs"
			"info";
		gap: 16px;
	}
	.product-main-image {
		grid-area: main;
	}
	.product-thumbnails {
		grid-area: thumbs;
		width: 100%;
		flex-direction: row;
	}
	.product-info {
		grid-area: info;
	}
	.thumb-track {
		flex-direction: row;
		max-height: none;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 2px 4px 8px;
		scroll-padding: 0 4px;
	}
	.thumbnail-nav-btn {
		display: none;
	}
}

/* ---- Action row (wishlist + add to cart) on tablet/mobile ----
   FIX: .btn-add-cart / .btn-wishlist use `flex: 1 1 0` for the
   side-by-side desktop layout, which sets flex-basis: 0 along the main
   axis. That's harmless in a row (main axis = width), but once
   .action-row switches to flex-direction: column here, the SAME
   flex-basis: 0 now applies to height — and with no fixed height for
   the row to grow into, the Add to Cart button collapsed to ~0 height
   instead of sizing to its own content, making it disappear entirely.
   Overriding to `flex: 0 0 auto` + full width restores natural,
   content-based sizing for both buttons. */
@media (max-width: 768px) {
	.action-row {
		flex-direction: column;
	}
	.action-row .btn-add-cart,
	.action-row .btn-wishlist,
	.action-row .btn-wishlist-wrap {
		flex: 0 0 auto;
		width: 100%;
	}
	.btn-add-cart {
		min-height: 46px;
	}
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
	.thumb {
		width: 56px;
		height: 56px;
	}
	.thumb-track {
		gap: 8px;
	}
	.variation-select {
		width: 100%;
		max-width: 220px;
	}
	.quantity-control .qty-btn {
		width: 32px;
	}
	.main-image-nav-btn {
		width: 34px;
		height: 34px;
	}
	.main-image-prev { left: 8px; }
	.main-image-next { right: 8px; }
	.size-guide-panel {
		width: 94%;
		margin-top: 4vh;
		padding: 18px;
	}
}

/* ---- Related products grid ("You may also like") ----
   FIX: on narrow screens the grid was still rendering multiple columns
   (whatever your base .product-grid rule defines), squeezing each card
   down to a sliver. Forcing 2 columns below 480px keeps cards legible.
   #relatedProducts adds specificity so this reliably overrides the
   base rule without needing to touch it. */
@media (max-width: 480px) {
	#relatedProducts.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ---- Fix: page-wide horizontal scroll on mobile ----
   ROOT CAUSE: grid/flex items default to `min-width: auto`, meaning
   they refuse to shrink below their CONTENT's natural width — even
   with `overflow-x: auto` or `width: 100%` set. Two places hit this:

   1. .thumb-track — its un-scrolled content width (every thumbnail
      laid out side by side) is wider than a phone screen. Because
      .product-thumbnails is a CSS Grid item, it wouldn't shrink below
      that width, which pushed .product-layout (and the whole page)
      wider than the viewport → horizontal scroll.
   2. .trust-strip__inner — the 4 trust badges in a row don't fit a
      phone screen either; without wrapping, the row forces the page
      wider the same way.

   `min-width: 0` on the grid items lets them shrink to the viewport
   and actually scroll their overflow internally instead of pushing the
   page wider. The trust badges are switched to a 2-column grid so they
   wrap instead of overflowing. */
@media (max-width: 900px) {
	.product-layout,
	.product-main-image,
	.product-thumbnails,
	.product-info {
		min-width: 0;
	}
	.thumb-track {
		min-width: 0;
	}
}
@media (max-width: 600px) {
	.trust-strip__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 12px;
	}
}

/* Defensive safety net: if something outside this file's scope (your
   base design CSS) also contributes a few stray px of overflow, this
   guarantees no sideways scroll on mobile without affecting layout —
   html/body already can't need horizontal scroll on a single-column
   mobile page. Safe to remove once the root causes above are verified
   fixed and nothing else surfaces. */
@media (max-width: 900px) {
	html, body {
		overflow-x: hidden;
	}
}