/* ==========================================================================
   Biohack Therapeutics — shop archive + single product stylesheet.
   Shared tokens/header/buttons/product-card system/footer live in base.css
   (enqueued alongside this — see functions.php). This file covers what's
   unique to the shop/category archive and the single product page,
   including a full reskin of WooCommerce's native variation/add-to-cart
   markup (kept functionally untouched — only restyled — so real
   variations/AJAX/cart behavior keeps working).
   ========================================================================== */

/* ==========================================================================
   Shop / category archive header
   ========================================================================== */
.shop-header {
	padding: 56px 0 40px;
	text-align: center;
	background-color: var(--bg-alt);
	border-bottom: 1px solid var(--border);
}

.shop-header__eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--teal-deep);
	margin-bottom: 10px;
}

.shop-header__title {
	margin-bottom: 10px;
}

.shop-header__subtitle {
	color: var(--text-muted);
	font-size: 1rem;
	max-width: 46em;
	margin: 0 auto;
}

/* ==========================================================================
   Category filter pills
   ========================================================================== */
.shop-filters {
	padding: 28px 0;
}

.shop-filters__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.shop-filter {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background-color: var(--bg-card);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-muted);
	transition: background-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand), border-color 0.3s var(--ease-brand);
}

.shop-filter:hover {
	border-color: var(--teal);
	color: var(--teal-deep);
}

.shop-filter.is-active {
	background-color: var(--teal);
	border-color: var(--teal);
	color: #ffffff;
}

/* ==========================================================================
   Shop product grid section (reuses .product-grid/.product-card from
   base.css — this just wraps it with the archive's own section padding)
   ========================================================================== */
.shop-grid-section {
	padding: 16px 0 88px;
}

.shop-grid-section .product-grid {
	margin-bottom: 0;
}

.shop-empty {
	text-align: center;
	padding: 40px 0;
	color: var(--text-muted);
}

/* WooCommerce's native pagination widget, restyled */
.shop-pagination {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.shop-pagination .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-pagination .page-numbers li {
	display: flex;
}

.shop-pagination .page-numbers a,
.shop-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 50%;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-muted);
	transition: background-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand);
}

.shop-pagination .page-numbers a:hover {
	background-color: var(--teal-tint);
	color: var(--teal-deep);
}

.shop-pagination .page-numbers .current {
	background-color: var(--teal);
	color: #ffffff;
}

/* ==========================================================================
   Single product page
   ========================================================================== */
.product-page {
	padding: 48px 0 96px;
}

.product-page__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

/* Image column — real WooCommerce gallery if the product has one,
   otherwise a styled placeholder using the same hex-outline language as
   the product cards, scaled up to fill this larger frame. */
.product-page__media {
	position: sticky;
	top: 100px;
}

.product-page__image-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.product-page__image-frame .product-card__hex {
	width: 45%;
}

.product-page__image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-page__gallery.woocommerce-product-gallery {
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.product-page__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.product-page__gallery img {
	display: block;
	width: 100%;
	height: auto;
}

/* Info column */
.product-page__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 13px;
	border-radius: var(--radius-pill);
	background-color: var(--teal);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

.product-page__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.15;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin-bottom: 14px;
}

.product-page__purity {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--teal-deep);
	margin-bottom: 20px;
}

.product-page__purity svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.product-page__price-wrap .price {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 24px;
}

.product-page__price-wrap .price del {
	color: var(--text-faint);
	font-weight: 500;
	margin-right: 10px;
	opacity: 1;
}

.product-page__price-wrap .price ins {
	text-decoration: none;
}

/* ==========================================================================
   Size picker — replaces WooCommerce's variation <select>
   (product-variation-picker.js hides table.variations and inserts this).
   Same pill language as .shop-filter/.shop-filter.is-active, just two
   lines (size + price) instead of one.
   ========================================================================== */
.product-page__size-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.product-page__size-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 8px 18px;
	border-radius: var(--radius-card);
	border: 1.5px solid var(--border);
	background-color: var(--bg-card);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	transition: background-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand), border-color 0.3s var(--ease-brand);
}

.product-page__size-btn:hover:not(:disabled) {
	border-color: var(--teal);
	color: var(--teal-deep);
}

.product-page__size-btn.is-active {
	background-color: var(--teal);
	border-color: var(--teal);
	color: #ffffff;
}

.product-page__size-btn:disabled {
	cursor: not-allowed;
	color: var(--text-faint);
	opacity: 0.7;
}

.product-page__size-btn-label {
	font-size: 0.92rem;
	font-weight: 700;
}

.product-page__size-btn-price {
	font-size: 0.78rem;
	font-weight: 500;
	opacity: 0.8;
}

.product-page__description {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-muted);
	margin-bottom: 28px;
}

/* ---- WooCommerce native variation form, restyled ---- */
.product-page__form.variations_form {
	margin-bottom: 28px;
}

.product-page__form table.variations {
	width: 100%;
	margin-bottom: 20px;
}

.product-page__form table.variations tbody,
.product-page__form table.variations tr {
	display: block;
	width: 100%;
}

.product-page__form table.variations th.label {
	display: block;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text);
	padding: 0 0 8px;
}

.product-page__form table.variations td.value {
	display: block;
	padding: 0;
}

.product-page__form select {
	width: 100%;
	height: 48px;
	padding: 0 44px 0 18px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background-color: var(--bg-card);
	font-family: var(--font);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--text);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2327323C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	cursor: pointer;
	transition: border-color 0.3s var(--ease-brand);
}

.product-page__form select:focus {
	outline: none;
	border-color: var(--teal);
}

.product-page__form .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8rem;
	color: var(--text-faint);
	text-decoration: underline;
}

.woocommerce-variation.single_variation {
	margin-bottom: 16px;
}

.woocommerce-variation-price .price {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--text);
}

.woocommerce-variation-availability .stock {
	font-size: 0.85rem;
	color: var(--teal-deep);
	font-weight: 600;
}

.woocommerce-variation-availability .stock.out-of-stock {
	color: #C0392B;
}

.woocommerce-variation-add-to-cart,
.product-page__form .cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.quantity {
	display: inline-flex;
}

.quantity .qty {
	width: 76px;
	height: 48px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background-color: var(--bg-card);
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text);
	text-align: center;
}

.quantity .qty:focus {
	outline: none;
	border-color: var(--teal);
}

.single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border-radius: var(--radius-pill);
	background-color: var(--teal);
	color: #ffffff;
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s var(--ease-brand), transform 0.25s var(--ease-brand);
}

.single_add_to_cart_button.button:hover {
	background-color: var(--teal-deep);
	transform: translateY(-2px);
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
	background-color: var(--border);
	color: var(--text-faint);
	cursor: not-allowed;
}

.woocommerce-message {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 20px;
	border-radius: var(--radius-card);
	background-color: var(--teal-tint);
	color: var(--teal-deep);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Trust / COA note */
.product-page__trust {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
	background-color: var(--bg-alt);
	border-radius: var(--radius-card);
	margin-top: 8px;
}

.product-page__trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--teal-tint);
	color: var(--teal-deep);
}

.product-page__trust-icon svg {
	width: 17px;
	height: 17px;
}

.product-page__trust p {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.product-page__trust strong {
	color: var(--text);
}

/* Aggregate rating summary, next to the product title */
.product-page__rating .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.product-page__rating .star-rating {
	font-size: 1rem;
}

.woocommerce-review-link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: underline;
}

.woocommerce-review-link:hover {
	color: var(--teal-deep);
}

/* ==========================================================================
   Reviews section — real WooCommerce reviews (comments), reskinned.
   Structure/JS untouched: this only targets WooCommerce's stable core
   classes for the review list and the "Add a review" form.
   ========================================================================== */
.product-page__reviews {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--border);
}

.woocommerce-Reviews-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--text);
	margin-bottom: 28px;
}

.woocommerce-Reviews-title span {
	font-family: var(--font-display);
}

.commentlist {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.commentlist .review {
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 24px;
}

.comment_container {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.comment_container .avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-text {
	flex: 1;
	min-width: 0;
}

.comment-text .star-rating {
	margin-bottom: 8px;
}

.comment-text .meta {
	font-size: 0.82rem;
	color: var(--text-faint);
	margin: 0 0 10px;
}

.woocommerce-review__author {
	color: var(--text);
	font-weight: 700;
	font-style: normal;
}

.woocommerce-review__dash {
	margin: 0 4px;
}

.comment-text .description p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

/* "Add a review" form */
#review_form_wrapper {
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 32px;
	max-width: 640px;
}

.comment-reply-title {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--text);
	margin-bottom: 16px;
}

.comment-notes {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.comment-form-rating label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
}

.comment-form-rating {
	margin-bottom: 18px;
}

.comment-form-rating select {
	height: 46px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background-color: var(--bg);
	font-family: var(--font);
	font-size: 0.92rem;
	color: var(--text);
	cursor: pointer;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email {
	margin-bottom: 18px;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 16px;
	border-radius: 14px;
	border: 1.5px solid var(--border);
	background-color: var(--bg);
	font-family: var(--font);
	font-size: 0.92rem;
	color: var(--text);
	box-sizing: border-box;
}

#commentform input[type="text"],
#commentform input[type="email"] {
	height: 46px;
	border-radius: var(--radius-pill);
}

#commentform textarea {
	min-height: 120px;
	resize: vertical;
}

#commentform input:focus,
#commentform textarea:focus,
.comment-form-rating select:focus {
	outline: none;
	border-color: var(--teal);
}

#commentform .form-submit {
	margin-top: 8px;
}

#commentform #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 30px;
	border-radius: var(--radius-pill);
	background-color: var(--teal);
	color: #ffffff;
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s var(--ease-brand), transform 0.25s var(--ease-brand);
}

#commentform #submit:hover {
	background-color: var(--teal-deep);
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.product-page__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.product-page__media {
		position: static;
	}

	.comment_container {
		flex-direction: column;
	}

	#review_form_wrapper {
		padding: 24px 20px;
	}
}