/**
 * Sofisticato Design Theme — single product, premium tobacco look.
 * Subtle humidor/accessory ambience, professional, never kitsch.
 */

.single-product .product {
	background: var(--sdt-cream, #FAF7F2);
}

/* Elegant two-column layout on desktop: gallery left, summary right.
 * Targets the native WooCommerce structure
 * (div.product > div.woocommerce-product-gallery + div.summary) without
 * touching parent templates.
 * C8: full-width single product — the parent renders #primary narrow next to
 * its .sidebar.widget-area (#sidebar-right-ws / #sidebar-left-ws, verified in
 * ws-cigar/sidebar.php); hide that sidebar on single products and center a
 * wide #primary so the grid below has room to breathe. */
.single-product #sidebar-right-ws,
.single-product #sidebar-left-ws,
.single-product #sidebar-right-blog,
.single-product #sidebar-left-blog,
.single-product .sidebar.widget-area,
.single-product #secondary,
.single-product .site-content .sidebar {
	display: none !important;
}

.single-product #primary.content-area,
.single-product #content #primary {
	float: none !important;
	width: 100% !important;
	max-width: 1200px;
	margin: 0 auto !important;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 769px) {
	.single-product div.product {
		display: grid;
		column-gap: 2.5rem;
		grid-template-columns: minmax(0, 1.1fr) minmax(320px, 460px);
		align-items: start;
	}

	.single-product div.product .woocommerce-product-gallery {
		margin-bottom: 0;
		position: sticky;
		top: 1.5rem;
	}

	.single-product div.product .summary.entry-summary {
		margin-top: 0;
	}
}

/* Native gallery images on a white stage: uniform mosaic tiles. */
.single-product .woocommerce-product-gallery {
	background: var(--sdt-white, #FFFFFF);
	border: 1px solid var(--sdt-cream-dark, #F1E9DC);
	border-radius: var(--sdt-radius, 14px);
	box-shadow: var(--sdt-shadow-sm, 0 4px 14px rgba(43, 29, 20, 0.08));
	padding: 1rem;
}

/* C8: FlexSlider slides must NOT carry aspect-ratio — that deformed every
 * slide and shrank thumbs. Slide is a plain white stage; the image caps at
 * 560px tall. Uniform tiles live ONLY in ol.flex-control-thumbs
 * (assets/css/gallery.css). */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	background: var(--sdt-white, #FFFFFF);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	object-position: center;
}

/* Generous whitespace for the summary column: warm cream card against the
 * white gallery stage. */
.single-product .summary.entry-summary {
	background: var(--sdt-cream, #FAF7F2);
	border: 1px solid var(--sdt-cream-dark, #F1E9DC);
	border-radius: var(--sdt-radius, 14px);
	box-shadow: var(--sdt-shadow, 0 10px 30px rgba(43, 29, 20, 0.10));
	padding: 2rem;
}

/* Subtle breadcrumb: small muted text, dark-gold links. */
.single-product .woocommerce-breadcrumb {
	color: var(--sdt-muted, #57534E);
	font-family: var(--sdt-sans);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--sdt-gold-ink, #6E5308);
	text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover,
.single-product .woocommerce-breadcrumb a:focus-visible {
	color: var(--sdt-brown, #2B1D14);
	text-decoration: underline;
}

/* Large readable serif title in deep brown. */
.single-product h1.product_title {
	color: var(--sdt-brown, #2B1D14);
	font-family: var(--sdt-serif);
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

/* Price: high contrast ink on white, gold accent bar. */
.single-product .summary .price {
	border-left: 4px solid var(--sdt-gold, #C9A227);
	color: var(--sdt-ink, #1C1917);
	font-family: var(--sdt-sans);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	padding-left: 0.75rem;
}

.single-product .summary .price del {
	color: var(--sdt-muted, #57534E);
	font-weight: 400;
}

.single-product .summary .price ins {
	text-decoration: none;
}

.single-product .woocommerce-product-rating {
	margin-bottom: 1rem;
}

/* Variation selects: large, clear, touch-friendly.
 * C8: table must use full summary width — fixed label column, fluid selects. */
.single-product table.variations {
	width: 100%;
	table-layout: fixed;
}

.single-product table.variations th.label,
.single-product table.variations td.label {
	width: 110px;
	white-space: nowrap;
	vertical-align: middle;
	padding-right: 0.75rem;
}

.single-product table.variations td.value {
	width: auto;
}

.single-product .variations label {
	color: var(--sdt-brown, #2B1D14);
	font-weight: 600;
}

.single-product .variations select,
.single-product table.variations td.value select {
	background: var(--sdt-white, #FFFFFF);
	border: 1px solid var(--sdt-brown-soft, #4A3423);
	border-radius: var(--sdt-radius-sm, 8px);
	color: var(--sdt-ink, #1C1917);
	font-size: 1rem;
	min-height: 3rem;
	padding: 0.65rem 0.9rem;
	width: 100%;
	min-width: 200px;
	max-width: 100%;
}

.single-product .variations select:focus-visible {
	outline: 3px solid var(--sdt-gold, #C9A227);
	outline-offset: 2px;
}

.single-product .reset_variations {
	color: var(--sdt-gold-ink, #6E5308);
	display: inline-block;
	margin-top: 0.5rem;
	width: 100%;
}

/* C8: summary must never clip; button full-width, wraps, beats parent red. */
.single-product .summary.entry-summary {
	min-width: 0;
	overflow: visible;
}

/* Premium gold add-to-cart button with deep-brown hover. Higher specificity
 * (.single-product .summary ...) + !important wins over the parent red. */
.single-product .summary .single_add_to_cart_button.button.alt,
.single-product .single_add_to_cart_button {
	background: var(--sdt-gold, #C9A227) !important;
	border: 1px solid var(--sdt-gold, #C9A227) !important;
	border-radius: 999px !important;
	color: var(--sdt-brown, #2B1D14) !important;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	min-height: 3.25rem;
	padding: 0.85rem 2.25rem !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	white-space: normal;
	width: 100%;
}

.single-product .summary .single_add_to_cart_button.button.alt:hover,
.single-product .summary .single_add_to_cart_button.button.alt:focus-visible,
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible {
	background: var(--sdt-brown, #2B1D14) !important;
	border-color: var(--sdt-brown, #2B1D14) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

.single-product .quantity .qty {
	border: 1px solid var(--sdt-brown-soft, #4A3423);
	border-radius: var(--sdt-radius-sm, 8px);
	color: var(--sdt-ink, #1C1917);
	font-size: 1rem;
	min-height: 3.25rem;
}

/* Tabs panel as soft card. (C21: related/upsells quedan del padre, sin tocar.) */
.single-product .woocommerce-tabs .panel {
	background: var(--sdt-white, #FFFFFF);
	border: 1px solid var(--sdt-cream-dark, #F1E9DC);
	border-radius: var(--sdt-radius, 14px);
	box-shadow: var(--sdt-shadow-sm, 0 4px 14px rgba(43, 29, 20, 0.08));
}

.single-product .woocommerce-tabs .panel {
	padding: 1.75rem;
}

/* Body copy stays legible sans. */
.single-product .summary,
.single-product .woocommerce-tabs {
	font-family: var(--sdt-sans);
	line-height: 1.65;
}

@media (max-width: 900px) {
	/* Single column on mobile: gallery stacks above summary. */
	.single-product div.product {
		display: block;
	}

	.single-product table.variations tr {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 0.35rem;
		margin-bottom: 0.75rem;
	}

	.single-product table.variations th.label,
	.single-product table.variations td.label {
		width: auto;
		padding-right: 0;
	}

	.single-product table.variations td.value select {
		min-width: 0;
	}

 	.single-product .summary.entry-summary {
 		padding: 1.25rem;
 	}
}

/* C9 (v1.3.2 hotfix): the parent forces
 * body.woocommerce #primary #main { width:72%!important; float:left; }
 * (ws-cigar/css/custom-layout.css:182-189, read-only). C8 widened #primary
 * to 1200px but #main inside stayed at 72%, squeezing the whole product +
 * related grid (tiny Sale/Cover selects, split Clear, broken cards).
 * Same-or-higher specificity + !important wins without touching the parent. */
body.woocommerce.single-product #primary #main {
	width: 100% !important;
	max-width: 1200px;
	float: none !important;
	margin: 0 auto !important;
}

body.woocommerce.single-product .site-inner {
	max-width: 1320px;
}

/* C21: relacionados SIN tocar — los muestra el padre ws-cigar tal cual.
 * Se eliminaron el grid propio, el `li width:100%`, el `min-height` de títulos
 * y el wrap de botones: esa sección queda 100% del padre hasta nuevo aviso. */

/* C10 (v1.3.3 hotfix): grid tracks are correct (668px/460px on
 * .single-product div.product) but the gallery renders at 321px and the
 * summary at 221px — the parent fixes Woo .images/.summary grid items to
 * width:48% (+floats), so each item shrinks to ~48% of its own track
 * (Playwright: galW 321, sumW 221). Force both items to fill their tracks.
 * Tabs/related/upsells are also direct grid children and must span full width.
 * Read-only parent, override here with higher specificity + !important. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .upsells.products {
	grid-column: 1 / -1;
	width: 100% !important;
	float: none !important;
}

/* C11 (v1.4.0): the custom static gallery replaces the FlexSlider track.
 * It keeps the `woocommerce-product-gallery` class for layout hooks, so
 * the C10 full-track rules above already apply — this makes it explicit
 * and keeps the sticky left-column behaviour from the desktop grid. */
.single-product div.product .sdt-custom-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
}

@media (min-width: 769px) {
	.single-product div.product .sdt-custom-gallery {
		position: sticky;
		top: 1.5rem;
	}
}

/* C12 (v1.4.1): chosen-variation preview inside the summary, rendered by
 * sdt_render_variation_preview() on woocommerce_before_add_to_cart_quantity
 * (below variations table + Clear, above qty + add-to-cart). White rounded
 * card that stays in the normal form flow: full summary width, centered
 * contain image capped at ~320px tall, never pushes the form around. */
.single-product .summary .sdt-variation-preview {
	background: var(--sdt-white, #FFFFFF);
	border: 1px solid var(--sdt-cream-dark, #F1E9DC);
	border-radius: var(--sdt-radius, 14px);
	box-shadow: var(--sdt-shadow-sm, 0 4px 14px rgba(43, 29, 20, 0.08));
	cursor: zoom-in;
	margin: 0 0 1rem;
	padding: 0.75rem;
}

.single-product .summary .sdt-variation-preview img {
	background: #FFFFFF;
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 320px;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	width: auto;
}