/*
 * Store-wide WooCommerce product-page correction for the Noodle Stroodle theme.
 * This intentionally overrides only single-product rules already present in
 * assets/css/site.css. Header, footer, homepage and shop grids are untouched.
 */

/* Give the product page enough room on larger screens. */
body.single-product .ns-woocommerce-shell {
	width: min(1180px, calc(100% - 56px));
}

/* Stable two-column product layout. */
body.single-product.woocommerce div.product {
	display: grid !important;
	grid-template-columns: minmax(420px, 540px) minmax(380px, 1fr) !important;
	column-gap: clamp(42px, 5vw, 76px) !important;
	row-gap: 0 !important;
	align-items: start !important;
	justify-content: center !important;
}

/* WooCommerce core can reapply 48% widths; explicitly remove them. */
body.single-product.woocommerce div.product > div.images,
body.single-product.woocommerce div.product > .woocommerce-product-gallery {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	max-width: 540px !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0 !important;
	justify-self: center !important;
}

body.single-product.woocommerce div.product > div.summary,
body.single-product.woocommerce div.product > .summary,
body.single-product.woocommerce div.product > .entry-summary {
	grid-column: 2 !important;
	grid-row: 1 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0 !important;
}

/* Make every product image use the full gallery column. */
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	max-width: none !important;
}

body.single-product .woocommerce-product-gallery__image img {
	height: auto !important;
	background: var(--ns-cream);
}

/* Working gallery fallback for the custom theme (which omits FlexSlider). */
body.single-product .woocommerce-product-gallery { opacity:1 !important; position:relative; }
body.single-product .woocommerce-product-gallery.ns-gallery-ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { display:none !important; }
body.single-product .woocommerce-product-gallery.ns-gallery-ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.ns-active { display:block !important; }
body.single-product .woocommerce-product-gallery.ns-gallery-ready .flex-viewport { overflow:visible !important; height:auto !important; }
body.single-product .woocommerce-product-gallery.ns-gallery-ready .woocommerce-product-gallery__wrapper { width:100% !important; transform:none !important; transition:none !important; }
body.single-product .woocommerce-product-gallery.ns-gallery-ready > .flex-control-thumbs { display:none !important; }
body.single-product .ns-thumbnail-strip { display:flex; gap:10px; width:100%; margin-top:12px; padding:2px 0 8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; }
body.single-product .ns-thumbnail { flex:0 0 78px; width:78px; height:78px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:6px; background:#fff; cursor:pointer; scroll-snap-align:start; opacity:.75; }
body.single-product .ns-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
body.single-product .ns-video-thumbnail { position:relative; }
body.single-product .ns-video-thumbnail::after { content:'VIDEO'; position:absolute; left:4px; bottom:4px; padding:2px 5px; border-radius:3px; background:rgba(9,28,39,.82); color:#fff; font:700 9px/1.2 var(--ns-sans); letter-spacing:.06em; }
body.single-product .ns-video-play { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:30px; height:30px; padding-left:2px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.9); color:#142c3b; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
body.single-product .ns-product-video-slide { aspect-ratio:1/1; background:#0f1720; }
body.single-product .ns-product-video { display:block; width:100%; height:100%; object-fit:contain; background:#0f1720; }
body.single-product .ns-thumbnail:hover,
body.single-product .ns-thumbnail:focus-visible,
body.single-product .ns-thumbnail.ns-active { border-color:var(--ns-gold-dark); opacity:1; outline:none; }
@media(max-width:520px){body.single-product .ns-thumbnail{flex-basis:76px;width:76px;height:76px}}

/* Clean thumbnail row rather than a tiny squeezed block. */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs::before,
body.single-product .woocommerce-product-gallery .flex-control-thumbs::after {
	display: none !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100% !important;
	border: 2px solid transparent;
	opacity: .72;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--ns-gold-dark);
	opacity: 1;
}

/* The theme's 65px/.96 title was causing the one-word-per-line appearance. */
body.single-product.woocommerce div.product .product_title {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 18px !important;
	font-family: var(--ns-sans) !important;
	font-size: clamp(34px, 3vw, 48px) !important;
	font-weight: 750 !important;
	line-height: 1.08 !important;
	letter-spacing: -.03em !important;
	overflow-wrap: normal;
	word-break: normal;
}

body.single-product.woocommerce div.product p.price,
body.single-product.woocommerce div.product span.price {
	margin: 0 0 20px !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
}

body.single-product .woocommerce-product-details__short-description {
	font-size: 15px !important;
	line-height: 1.7 !important;
}

/* Buying controls should occupy the full details column. */
body.single-product.woocommerce div.product form.cart {
	width: 100%;
	margin: 4px 0 24px !important;
	padding: 18px 0 22px;
	border-top: 1px solid rgba(17, 45, 65, .12);
	border-bottom: 1px solid rgba(17, 45, 65, .12);
}

body.single-product.woocommerce div.product form.cart .variations,
body.single-product.woocommerce div.product form.cart .single_variation_wrap,
body.single-product.woocommerce div.product form.cart .woocommerce-variation,
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	width: 100%;
}

body.single-product .ns-space-sign-personalisation {
	width: 100%;
	margin: 12px 0 4px !important;
}

body.single-product .ns-space-sign-personalisation .form-row {
	width: 100%;
	margin: 0;
}

body.single-product .ns-space-sign-personalisation input.input-text {
	width: 100%;
}

/* Reusable buyer options configured on each product. */
body.single-product .ns-product-options {
	width: 100%;
	margin: 18px 0;
	padding: 18px;
	background: #fffaf0;
	border: 1px solid rgba(17, 45, 65, .14);
	border-radius: 12px;
}

body.single-product .ns-product-options h3 {
	margin: 0 0 14px;
	font-family: var(--ns-sans);
	font-size: 20px;
	line-height: 1.25;
}

body.single-product .ns-product-option {
	width: 100%;
	margin: 0 0 14px;
}

body.single-product .ns-product-option:last-child { margin-bottom: 0; }
body.single-product .ns-product-option label,
body.single-product .ns-product-option .description { display: block; }
body.single-product .ns-product-option label { margin-bottom: 6px; font-weight: 700; }
body.single-product .ns-product-option .description { margin-top: 6px; font-size: 13px; line-height: 1.45; opacity: .78; }
body.single-product .ns-character-count { display:block; margin-top:7px; text-align:right; color:#59636b; font-size:13px; font-variant-numeric:tabular-nums; }
body.single-product .ns-character-count strong { color:#172b3a; }

body.single-product .ns-product-option input.input-text,
body.single-product .ns-product-option textarea.input-text,
body.single-product .ns-product-option select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid rgba(17, 45, 65, .28);
	border-radius: 8px;
	background: #fff;
}

body.single-product .ns-etsy-reviews-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
body.single-product .ns-etsy-reviews-head h2 { margin:0 0 5px; }
body.single-product .ns-etsy-score { display:flex; align-items:center; gap:8px; }
body.single-product .ns-etsy-score span,
body.single-product .ns-review-stars { color:#e6a20b; letter-spacing:2px; }
body.single-product .ns-review-source { max-width:850px; color:#56616a; }
body.single-product .ns-etsy-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }
body.single-product .ns-etsy-review { margin:0; padding:20px; border:1px solid rgba(17,45,65,.12); border-radius:12px; background:#fffaf0; }
body.single-product .ns-etsy-review blockquote { margin:10px 0 18px; padding:0; border:0; font-size:15px; line-height:1.65; }
body.single-product .ns-etsy-review footer span,
body.single-product .ns-etsy-review footer small { display:block; margin-top:3px; }
body.single-product .ns-etsy-review footer small { color:#6a7278; }
@media(max-width:700px){body.single-product .ns-etsy-review-grid{grid-template-columns:1fr}body.single-product .ns-etsy-reviews-head{align-items:flex-start;flex-direction:column}}

/* Force all below-product content onto its own full-width row. */
body.single-product.woocommerce div.product > .woocommerce-tabs,
body.single-product.woocommerce div.product > .related,
body.single-product.woocommerce div.product > .upsells,
body.single-product.woocommerce div.product > section.related,
body.single-product.woocommerce div.product > section.upsells {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Tablet and mobile: gallery first, details second, full-width content after. */
@media (max-width: 900px) {
	body.single-product .ns-woocommerce-shell {
		width: min(760px, calc(100% - 36px));
	}

	body.single-product.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 34px !important;
	}

	body.single-product.woocommerce div.product > div.images,
	body.single-product.woocommerce div.product > .woocommerce-product-gallery {
		grid-column: 1 !important;
		grid-row: 1 !important;
		max-width: 620px !important;
	}

	body.single-product.woocommerce div.product > div.summary,
	body.single-product.woocommerce div.product > .summary,
	body.single-product.woocommerce div.product > .entry-summary {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	body.single-product.woocommerce div.product > .woocommerce-tabs,
	body.single-product.woocommerce div.product > .related,
	body.single-product.woocommerce div.product > .upsells,
	body.single-product.woocommerce div.product > section.related,
	body.single-product.woocommerce div.product > section.upsells {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

@media (max-width: 520px) {
	body.single-product .ns-woocommerce-shell {
		width: calc(100% - 28px);
	}

	body.single-product.woocommerce div.product .product_title {
		font-size: 32px !important;
		line-height: 1.1 !important;
	}

	body.single-product.woocommerce div.product > div.images,
	body.single-product.woocommerce div.product > .woocommerce-product-gallery {
		max-width: 100% !important;
	}

	body.single-product .woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 7px;
	}
}