/* =============================================================
   WBA SHOP — SINGLE PRODUCT
   Styles Woo's default content-single-product markup (kept on
   hooks for compat) into the campaign language: cream gallery
   panel left, editorial summary right, underline-grow tabs,
   funnel sections ("complete the kit" / "you might also like"),
   dark range band at the foot.
   ============================================================= */

/* -------------------------------------------------------------
   BREADCRUMB BAR
   ------------------------------------------------------------- */
.shop-single__crumbbar {
	border-bottom: 1px solid var(--wba-border);
	border-top: 3px solid var(--wba-red);
	background: #fff;
}
.shop-single__crumbbar-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px var(--gutter-d);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.shop-single__back {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	color: var(--wba-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
}
.shop-single__back:hover { color: var(--wba-red); }

.shop-single__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px var(--gutter-d) 0;
}

/* -------------------------------------------------------------
   PRODUCT LAYOUT — gallery 6 / summary 5 on a 12-ish split
   ------------------------------------------------------------- */
.shop-single div.product {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 64px;
	align-items: start;
}

/* Everything after gallery+summary spans full width */
.shop-single div.product .woocommerce-tabs,
.shop-single div.product .up-sells,
.shop-single div.product .related.products {
	grid-column: 1 / -1;
}

/* -------------------------------------------------------------
   GALLERY — cream panel, contained product imagery
   ------------------------------------------------------------- */
.woocommerce-product-gallery {
	position: relative;
	background: #fff;
	border: 1px solid var(--wba-border);
	border-radius: 14px;
	overflow: hidden;
	padding: 30px;
	box-sizing: border-box;
}
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}
.woocommerce-product-gallery .flex-viewport { border-radius: 8px; overflow: hidden; }
.woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.woocommerce-product-gallery ol.flex-control-thumbs li {
	width: 72px;
	cursor: pointer;
	border: 1px solid var(--wba-border);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s;
}
.woocommerce-product-gallery ol.flex-control-thumbs li:hover,
.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	border-color: var(--wba-dark);
}
.woocommerce-product-gallery ol.flex-control-thumbs img { display: block; width: 100%; }
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 9;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wba-border);
	border-radius: 50%;
	text-decoration: none;
}

/* Sale flash on the gallery */
div.product span.onsale {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 9;
	background: var(--wba-red);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 3px;
}

/* -------------------------------------------------------------
   SUMMARY — editorial column
   ------------------------------------------------------------- */
div.product .summary .shop-eyebrow { margin-bottom: 14px; }
div.product .summary .product_title {
	margin: 0 0 16px;
	font-size: clamp(1.8rem, 3.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--wba-dark);
}
div.product .summary .price {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--wba-dark);
	margin: 0 0 22px;
}
div.product .summary .price del { color: var(--wba-muted); font-weight: 400; margin-right: 12px; }
div.product .summary .price ins { text-decoration: none; color: var(--wba-red); }
div.product .summary .woocommerce-product-details__short-description {
	color: var(--wba-muted);
	line-height: 1.8;
	font-size: 0.94rem;
	margin-bottom: 28px;
}
div.product .summary .woocommerce-product-details__short-description em { font-style: italic; }

/* Stock states */
div.product p.stock { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; }
div.product p.stock.in-stock { color: var(--wba-dark); }
div.product p.stock.out-of-stock { color: var(--wba-red); }

/* -------------------------------------------------------------
   VARIATIONS + ADD TO CART
   ------------------------------------------------------------- */
table.variations { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
table.variations th,
table.variations td { padding: 8px 0; text-align: left; border: 0; vertical-align: middle; }
table.variations th.label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wba-muted);
	padding-right: 20px;
	width: 1%;
	white-space: nowrap;
}
table.variations td.value select {
	width: 100%;
	max-width: 280px;
	padding: 12px 36px 12px 14px;
	border: 1px solid var(--wba-border);
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--wba-dark);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}
table.variations td.value select:focus { outline: none; border-color: var(--wba-dark); }
.reset_variations {
	font-size: 0.68rem;
	color: var(--wba-muted);
	text-transform: lowercase;
	letter-spacing: 0.08em;
}
.woocommerce-variation-price .price { margin-top: 6px; }
.woocommerce-variation-availability { margin-bottom: 10px; }

/* qty + button row */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 26px 0;
	border-top: 1px solid var(--wba-border);
	border-bottom: 1px solid var(--wba-border);
	margin-bottom: 24px;
}
form.cart.variations_form { display: block; }
form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
}
button.single_add_to_cart_button { flex: 1; min-width: 200px; }

/* meta */
div.product .product_meta {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	color: var(--wba-muted);
}
div.product .product_meta > span { display: block; margin-bottom: 6px; }
div.product .product_meta a { color: var(--wba-dark); text-decoration: none; }
div.product .product_meta a:hover { color: var(--wba-red); }

/* -------------------------------------------------------------
   TABS — underline-grow, lowercase, brand-quiet
   ------------------------------------------------------------- */
.woocommerce-tabs { margin-top: 80px; }
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wba-border);
}
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.woocommerce-tabs ul.tabs li a {
	position: relative;
	display: inline-block;
	padding: 16px 2px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: lowercase;
	color: var(--wba-muted);
	text-decoration: none;
}
.woocommerce-tabs ul.tabs li a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--wba-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.woocommerce-tabs ul.tabs li a:hover::after,
.woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }
.woocommerce-tabs ul.tabs li.active a { color: var(--wba-dark); }
.woocommerce-tabs .panel {
	padding: 34px 0 0;
	max-width: 720px;
	color: var(--wba-muted);
	line-height: 1.85;
	font-size: 0.94rem;
}
.woocommerce-tabs .panel h2 { display: none; } /* redundant panel headings */

/* -------------------------------------------------------------
   FUNNEL SECTIONS — upsells + related
   ------------------------------------------------------------- */
.up-sells,
.related.products {
	padding: 80px 0 0;
}
.up-sells > h2,
.related.products > h2 {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wba-dark);
	text-transform: lowercase;
}
.up-sells > h2::after,
.related.products > h2::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--wba-red);
	margin: 16px 0 34px;
}

/* Last funnel section gets breathing room before the dark band */
.shop-single div.product > :last-child { padding-bottom: 96px; }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 900px) {
	.shop-single div.product { grid-template-columns: 1fr; gap: 36px; }
	.shop-single__inner { padding: 36px var(--gutter-m) 0; }
	.shop-single__crumbbar-inner { padding: 14px var(--gutter-m); flex-wrap: wrap; }
	.up-sells, .related.products { padding-top: 56px; }
	.woocommerce-tabs { margin-top: 48px; }
	.shop-single div.product > :last-child { padding-bottom: 56px; }
}
@media (max-width: 560px) {
	form.cart { flex-direction: column; align-items: stretch; }
	form.cart .quantity { width: 100%; }
	form.cart .quantity .qty { width: 100%; box-sizing: border-box; }
	button.single_add_to_cart_button { width: 100%; }
	form.cart.variations_form .woocommerce-variation-add-to-cart { flex-direction: column; align-items: stretch; }
}