/* ==========================================================================
   PurOstill V2 — single product
   ========================================================================== */

/* The buy column owns the product name, so the head shows only the trail. */
.v2-head--product { padding-bottom: .6rem; }
.v2-head--product .v2-head__title { display: none; }

.v2-product { padding-bottom: 3rem; }

.v2-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

/* Gallery ----------------------------------------------------------------- */

.v2-product__gallery {
	display: flex; flex-direction: column; gap: .9rem;
	position: sticky; top: calc(var(--v2-header-h) + 1.5rem);
}

.v2-product__stage {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1;
	padding: clamp(1rem, 3vw, 2.5rem);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius-lg);
	background: var(--v2-tint);
	overflow: hidden;
}
.v2-product__stage img { width: 100%; height: 100%; object-fit: contain; }

/* Five thumbnails across, as the design specifies. */
.v2-product__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.v2-product__thumb {
	padding: .4rem; aspect-ratio: 1 / 1;
	border: 1px solid var(--v2-line); border-radius: .8rem;
	background: var(--v2-surface); cursor: pointer;
	transition: border-color .2s ease, transform .2s ease;
}
.v2-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.v2-product__thumb:hover { border-color: var(--v2-accent); transform: translateY(-2px); }
.v2-product__thumb.is-active { border-color: var(--v2-accent); box-shadow: 0 0 0 2px rgba(var(--v2-accent-rgb), .2); }

/* Buy column --------------------------------------------------------------- */

.v2-product__buy { display: flex; flex-direction: column; gap: 1.1rem; }
.v2-product__title { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em; }

.v2-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.v2-product__reviews-link { font-size: .85rem; color: var(--v2-muted); text-decoration: underline; text-underline-offset: 3px; }
.v2-product__reviews-link:hover { color: var(--v2-accent); }

.v2-product__price { font-size: 1.9rem; font-weight: 800; }
.v2-product__price del { font-size: 1.1rem; font-weight: 500; color: var(--v2-muted); margin-right: .5rem; }
.v2-product__price ins { text-decoration: none; }
.v2-product__from {
	font-size: .95rem; font-weight: 600;
	color: var(--v2-muted);
	letter-spacing: 0;
	margin-right: .15rem;
}
/* WooCommerce's variation price_html arrives wrapped, so the headline keeps
   its own size rather than inheriting the smaller one. */
.v2-product__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

.v2-product__excerpt { color: var(--v2-muted); line-height: 1.7; }
.v2-product__excerpt p + p { margin-top: .8rem; }

.v2-product__stock { font-size: .9rem; font-weight: 700; }
.v2-product__stock.is-in { color: var(--v2-ok); }
.v2-product__stock.is-low { color: var(--v2-sale); }
.v2-product__stock.is-out { color: var(--v2-muted); }

/* The WooCommerce add-to-cart form, restyled in place. */
.v2-product__buy form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0; }
.v2-product__buy form.cart .quantity { display: inline-flex; }
.v2-product__buy form.cart .quantity input {
	width: 88px; min-height: 48px; text-align: center; font-weight: 700;
	border-radius: .75rem; border: 1px solid var(--v2-line);
}
.v2-product__buy form.cart button[type="submit"],
.v2-product__buy .single_add_to_cart_button {
	flex: 1 1 220px;
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 1.5rem;
	border: none; border-radius: .75rem;
	background: var(--v2-accent); color: #fff;
	font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .015em;
	cursor: pointer; transition: background .2s ease;
}
.v2-product__buy .single_add_to_cart_button:hover { background: rgba(var(--v2-accent-rgb), .9); }
.v2-product__buy .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* Variable products ------------------------------------------------------- */

/* The form holds a table and a wrapper rather than a single row of controls,
   so it stacks; the buy row inside it is the part that goes side by side. */
.v2-product__buy form.variations_form { display: block; }

.v2-product__buy .variations { width: 100%; border-collapse: collapse; display: block; }
.v2-product__buy .variations tbody,
.v2-product__buy .variations tr { display: block; }
.v2-product__buy .variations th,
.v2-product__buy .variations td { display: block; width: 100%; padding: 0; text-align: left; }
.v2-product__buy .variations th.label { margin-bottom: .35rem; }
.v2-product__buy .variations label { font-weight: 600; font-size: .9rem; }
.v2-product__buy .variations tr + tr { margin-top: .9rem; }
.v2-product__buy .variations select { width: 100%; }

.v2-product__buy .reset_variations {
	display: inline-block; margin-top: .5rem;
	font-size: .85rem; font-weight: 600; color: var(--v2-muted);
	text-decoration: underline; text-underline-offset: 3px;
}
.v2-product__buy .reset_variations:hover { color: var(--v2-accent); }

/* The chosen variation's price is shown in the headline above, so the copy
   WooCommerce repeats under the dropdown is redundant. */
.v2-product__buy .woocommerce-variation-price { display: none; }
.v2-product__buy .woocommerce-variation-description { margin: .6rem 0; color: var(--v2-muted); font-size: .95rem; }
/* The headline stock line above now reports the chosen variation, so the copy
   WooCommerce repeats under the dropdown would say the same thing twice. */
.v2-product__buy .woocommerce-variation-availability { display: none; }

.v2-product__buy .single_variation_wrap { margin-top: 1.1rem; }

/* Same buy row as a simple product: quantity, then a button that fills the
   rest of the line. */
.v2-product__buy .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.v2-product__buy .woocommerce-variation-add-to-cart .quantity { display: inline-flex; }
.v2-product__buy .woocommerce-variation-add-to-cart .quantity input {
	width: 88px; min-height: 48px; text-align: center; font-weight: 700;
	border-radius: .75rem; border: 1px solid var(--v2-line);
}

/* A bordered panel rather than a bare list: these are reassurances read at the
   moment of buying, so they earn a block of their own under the button. */
.v2-product__perks {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: .35rem 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	background: color-mix(in srgb, var(--v2-tint) 55%, var(--v2-surface));
}

.v2-product__perks li {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem 1rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--v2-ink);
}

.v2-product__perks li + li { border-top: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent); }

.v2-product__perks .v2-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--v2-accent) 12%, var(--v2-surface));
	color: var(--v2-accent);
	font-size: 19px;
}

@media (max-width: 480px) {
	.v2-product__perks li { padding: .6rem .8rem; font-size: .88rem; }
	.v2-product__perks .v2-icon { width: 30px; height: 30px; font-size: 17px; }
}

/* Description and specification -------------------------------------------- */

.v2-product__detail {
	display: grid;
	grid-template-columns: 60% minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--v2-line);
}

/* Both halves are cards. Both are sticky, but only the shorter one can
   actually pin: a column taller than the viewport simply scrolls, so the short
   side follows the long one instead of leaving a blank half-screen. */
.v2-product__description,
.v2-product__specs {
	position: sticky;
	top: calc(var(--v2-header-h) + 1.5rem);
	align-self: start;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	background: var(--v2-surface);
}

/* No specification table: the description takes the whole row rather than
   leaving an empty 40% beside it. */
.v2-product__detail--solo { grid-template-columns: minmax(0, 1fr); }
.v2-product__detail--solo .v2-product__description { position: static; }

.v2-product__section-title {
	margin-bottom: 1rem;
	font-size: .8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--v2-muted);
}

.v2-specs {
	width: 100%; border-collapse: collapse;
	background: transparent;
}
.v2-specs th, .v2-specs td { padding: .75rem .25rem; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--v2-line); }
.v2-specs tr:last-child th, .v2-specs tr:last-child td { border-bottom: none; }
.v2-specs th { width: 45%; color: var(--v2-muted); font-weight: 600; }
.v2-specs td { font-weight: 600; }

/* Reviews ------------------------------------------------------------------ */

.v2-product__reviews {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--v2-line);
}
.v2-reviews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.v2-review {
	display: flex; flex-direction: column; gap: .8rem;
	padding: 1.4rem;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	background: var(--v2-surface);
}
.v2-review__text { color: color-mix(in srgb, var(--v2-ink) 88%, var(--v2-muted)); line-height: 1.6; font-size: .95rem; }
.v2-review__meta { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.v2-review__meta img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.v2-review__author { font-weight: 700; font-size: .95rem; }
.v2-review__date { font-size: .82rem; color: var(--v2-muted); }
.v2-review__verified { color: var(--v2-ok); font-weight: 600; }

/* Layout at narrower widths ------------------------------------------------ */

@media (max-width: 980px) {
	.v2-product__top { grid-template-columns: minmax(0, 1fr); }
	.v2-product__gallery { position: static; }
	.v2-product__detail { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.v2-product__top { gap: 1.25rem; }

	.v2-product__stage { padding: 1rem; border-radius: 1.25rem; }

	/* Thumbnails scroll sideways rather than shrinking below a tappable size. */
	.v2-product__thumbs {
		display: flex; gap: .5rem;
		overflow-x: auto;
		padding-bottom: .25rem;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.v2-product__thumbs::-webkit-scrollbar { height: 3px; }
	.v2-product__thumbs::-webkit-scrollbar-thumb { background: var(--v2-line); border-radius: 999px; }
	.v2-product__thumb { flex: 0 0 68px; width: 68px; scroll-snap-align: start; }

	.v2-product__title { font-size: 1.45rem; }
	.v2-product__price { font-size: 1.55rem; }

	/* The quantity field and the button share a row badly at this width. */
	.v2-product__buy form.cart { gap: .6rem; }
	.v2-product__buy form.cart .quantity,
	.v2-product__buy form.cart .quantity input { width: 100%; }
	.v2-product__buy .single_add_to_cart_button { flex: 1 1 100%; width: 100%; }

	.v2-product__detail { margin-top: 1.5rem; padding-top: 1.25rem; gap: 1.5rem; }

	/* A two-column spec table is unreadable on a phone: stack each pair. */
	.v2-specs, .v2-specs tbody, .v2-specs tr { display: block; }
	.v2-specs th, .v2-specs td { display: block; width: auto; padding: .55rem .9rem; }
	.v2-specs th { padding-bottom: 0; border-bottom: none; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
	.v2-specs tr { border-bottom: 1px solid var(--v2-line); }
	.v2-specs tr:last-child { border-bottom: none; }
	.v2-specs td { border-bottom: none; }

	.v2-product__reviews .comment_container { flex-direction: column; gap: .75rem; padding: 1rem; }
}

/* Review grid at narrower widths ------------------------------------------- */

@media (max-width: 980px) {
	/* Sticky needs a taller neighbour to travel against; once the columns
	   stack there is nothing to stick to. */
	.v2-product__description,
	.v2-product__specs { position: static; }

	.v2-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.v2-reviews { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
	.v2-review { padding: 1.1rem; }
}