/* Single product page. */

.product-container {
	display: grid;
	grid-template-columns: 0.75fr 1fr;
	gap: clamp(24px, 4vw, 50px);
	max-width: 1020px;
	width: 90%;
	margin: 50px auto;
	align-items: start;
}

.product-visual { margin-top: 30px; }

/* --- Gallery (native scroll-snap; replaces the Swiper CDN bundle) --- */
.jubix-gallery {
	position: relative;
	border-radius: 15px 30px 30px 15px;
	overflow: hidden;
	background: #f0f0f0;
	box-shadow: -20px 30px 60px rgba(0,0,0,.25);
	border: 1px solid rgba(0,0,0,.05);
}
.jubix-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.jubix-gallery__track::-webkit-scrollbar { display: none; }

.jubix-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	/* Was 1/1. Covers are 3:4, so a square frame cropped them vertically —
	   and object-position:top anchored the crop to the top, throwing away the
	   bottom third. Matching the cover ratio removes the crop entirely. */
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
}
.jubix-gallery__slide img,
.jubix-gallery__slide video {
	width: 100%;
	height: 100%;
	/* contain, never cover. A shopper buying a physical book must see the whole
	   cover; an off-ratio upload should letterbox, not lose its bottom edge. */
	object-fit: contain;
	object-position: center;
	display: block;
}

.jubix-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 50%;
	background: rgba(0,0,0,.35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background .25s ease;
	z-index: 2;
}
.jubix-gallery:hover .jubix-gallery__nav,
.jubix-gallery__nav:focus-visible { opacity: 1; }
.jubix-gallery__nav:hover { background: rgba(0,0,0,.6); }
.jubix-gallery__nav--prev { left: 12px; }
.jubix-gallery__nav--next { right: 12px; }

.jubix-gallery__dots {
	position: absolute;
	bottom: 14px; left: 0; right: 0;
	display: flex; justify-content: center; gap: 8px;
	z-index: 2;
}
.jubix-gallery__dot {
	width: 9px; height: 9px;
	border: none; border-radius: 50%;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	padding: 0;
	transition: background .25s ease, transform .25s ease;
}
.jubix-gallery__dot[aria-selected="true"] { background: var(--accent); transform: scale(1.3); }

/* Touch devices: arrows are always visible since there is no hover. */
@media (hover: none) {
	.jubix-gallery__nav { opacity: 1; }
}

/* --- Product info --- */
.product-info { padding-top: 8px; }

.breadcrumb {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	margin: 0 0 14px;
	color: var(--accent-dark);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { margin: 0 6px; opacity: .5; }

h1.product-title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	margin: 0 0 10px;
	font-weight: 900;
	text-wrap: balance;
}

.product-age {
	display: inline-block;
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--deep-purple);
	background: var(--light-purple);
	padding: 5px 12px;
	border-radius: 50px;
	margin: 0 0 18px;
}

.product-container .price {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--accent-dark);
	font-weight: 900;
	display: block;
	margin: 0 0 26px;
}
.product-container .price del { color: #bbb; font-size: 1.1rem; margin-right: 6px; }
.product-container .price ins { text-decoration: none; }

.product-desc, .product-desc p, .product-desc li {
	font-family: var(--font-body);
	font-size: .95rem;
	line-height: 1.75;
	color: #444;
}
.product-desc strong { font-weight: 700; color: var(--deep-purple); }
.product-desc ul { padding-left: 20px; margin: 14px 0; }
.product-desc li { margin-bottom: 8px; }

form.cart { display: flex; flex-direction: column; gap: 16px; align-items: stretch; margin: 26px 0 0; }
form.cart .quantity { width: auto; margin: 0; }
.quantity input.qty,
.quantity input[type="number"] {
	width: 84px; height: 50px;
	font-size: 1.05rem; font-weight: 600;
	text-align: center;
	border: 2px solid #ddd;
	border-radius: var(--radius-sm);
	background: var(--white);
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

button.single_add_to_cart_button {
	background: linear-gradient(to right, var(--accent), var(--accent-dark));
	color: var(--deep-purple);
	padding: 16px 30px;
	border: none;
	border-radius: 50px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .95rem;
	cursor: pointer;
	width: 100%;
	box-shadow: 0 10px 20px rgba(212,175,55,.3);
	transition: transform .2s ease;
}
button.single_add_to_cart_button:hover { transform: translateY(-2px); }

.product-shipping {
	margin-top: 20px;
	font-size: .9rem;
	color: #999;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Complete the Collection --- */
.related-section {
	background: var(--white);
	padding: var(--space-section) 5%;
	border-top: 1px solid var(--hairline);
	margin-top: 70px;
}
.sec-title { text-align: center; font-size: clamp(1.7rem, 4vw, 3rem); margin: 0 0 12px; font-weight: 900; }
.sec-subtitle { text-align: center; color: #888; font-size: 1.1rem; margin: 0 0 clamp(30px, 5vw, 55px); }
.related-section .book-grid { max-width: 1100px; }

/* --- WooCommerce notices --- */
.woocommerce-notices-wrapper { max-width: 1020px; width: 90%; margin: 20px auto 0; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--accent-dark);
	font-family: var(--font-body);
	border-radius: var(--radius-sm);
}
.woocommerce-message .button, .woocommerce-info .button {
	background: var(--deep-purple);
	color: var(--white);
	border-radius: 50px;
}

@media (max-width: 900px) {
	.product-container { grid-template-columns: 1fr; gap: 26px; width: 92%; }
	.product-visual { margin-top: 0; }
	.jubix-gallery { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
}