/**
 * Boost Commerce — Single product page styles.
 * Scoped selectors ensure theme compatibility without !important.
 * @package BoostCommerce
 */

/* ─── Layout ────────────────────────────────────────────────────── */
.bcom-single-product { max-width: 1100px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.bcom-single-product .bcom-single-product__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bcom-single-product .bcom-single-product__gallery { position: relative; }
.bcom-single-product .bcom-single-product__main-img { width: 100%; height: auto; border-radius: 4px; display: block; }

/* ─── Gallery thumbs ────────────────────────────────────────────── */
.bcom-single-product__thumbs { display: flex; gap: 8px; margin-top: 12px; }
.bcom-gallery-thumb { width: 60px; height: 60px; object-fit: cover; border: 2px solid transparent; border-radius: 3px; cursor: pointer; transition: border-color .2s; }
.bcom-gallery-thumb:hover,
.bcom-gallery-thumb--active { border-color: #333; }

/* ─── Info panel ────────────────────────────────────────────────── */
.bcom-single-product__title { font-size: 28px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.bcom-single-product__price { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.bcom-single-product__price del { color: #999; font-weight: 400; margin-right: 8px; }
.bcom-single-product__price ins { text-decoration: none; color: #dc3232; }
.bcom-single-product__excerpt { margin-bottom: 16px; color: #555; line-height: 1.6; }
.bcom-single-product__sku { margin-top: 12px; color: #666; font-size: 13px; }

/* ─── Stock status ──────────────────────────────────────────────── */
.bcom-stock--instock,
.bcom-stock-status--instock { color: #46b450; font-weight: 600; font-size: 14px; margin: 8px 0; }
.bcom-stock--outofstock,
.bcom-stock-status--outofstock { color: #dc3232; font-weight: 600; font-size: 14px; margin: 8px 0; }
.bcom-stock--onbackorder,
.bcom-stock-status--onbackorder { color: #f0b849; font-weight: 600; font-size: 14px; margin: 8px 0; }

/* ─── Sale price ───────────────────────────────────────────────── */
.bcom-price--old { text-decoration: line-through; color: #999; font-size: 0.9em; margin-right: 6px; }
.bcom-price--sale { color: #dc3232; font-weight: 700; }

/* ─── Add to cart form ──────────────────────────────────────────── */
.bcom-add-to-cart { margin-top: 16px; }
.bcom-add-to-cart__row { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.bcom-add-to-cart input[type="number"] { width: 60px; padding: 8px; text-align: center; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; }

/* ─── Variations ────────────────────────────────────────────────── */
.bcom-variant-field { margin-bottom: 12px; }
.bcom-variant-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.bcom-variant-select { width: 100%; max-width: 250px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; }
.bcom-variant-select:focus { border-color: #333; outline: none; box-shadow: 0 0 0 1px #333; }

/* ─── Product badge ─────────────────────────────────────────────── */
.bcom-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 12px; border-radius: 3px; font-size: 12px; font-weight: 600; color: #fff; }
.bcom-badge--sale { background: #dc3232; }
.bcom-badge--new { background: #46b450; }
.bcom-badge--soldout { background: #666; }

/* ─── Description ───────────────────────────────────────────────── */
.bcom-single-product__description { grid-column: 1 / -1; margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; }
.bcom-single-product__description h2 { font-size: 20px; margin-bottom: 16px; }

/* ─── Toast notifications ───────────────────────────────────────── */
.bcom-notice { position: fixed; top: 20px; right: 20px; z-index: 9999; padding: 12px 20px; border-radius: 4px; font-size: 14px; max-width: 350px; animation: bcom-slidein .3s ease; }
.bcom-notice--info { background: #f0fef0; color: #46b450; border: 1px solid #46b450; }
.bcom-notice--error { background: #fef0f0; color: #dc3232; border: 1px solid #dc3232; }

@keyframes bcom-slidein {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* ─── Archive/catalog ───────────────────────────────────────────── */
.bcom-product-grid { display: grid; grid-template-columns: repeat(var(--bcom-grid-cols, 3), 1fr); gap: 24px; padding: 20px 0; }
.bcom-product-card { border: 1px solid #eee; border-radius: 4px; overflow: hidden; transition: box-shadow .2s; }
.bcom-product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.bcom-product-card__image { aspect-ratio: 1; overflow: hidden; }
.bcom-product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.bcom-product-card__info { padding: 16px; }
.bcom-product-card__title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.bcom-product-card__title a { color: inherit; text-decoration: none; }
.bcom-product-card__title a:hover { text-decoration: underline; }
.bcom-product-card__price { font-size: 16px; font-weight: 700; }

/* ─── Stars ─────────────────────────────────────────────────────── */
.bcom-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.bcom-star { cursor: default; }
.bcom-star path { transition: fill .15s; }
.bcom-star--full path { fill: #f5a623; }
.bcom-star--half path { fill: #f5a623; opacity: .5; }
.bcom-star--empty path { fill: #ddd; }

/* ─── Star selector (review form) ───────────────────────────────── */
.bcom-star-selector { display: inline-flex; gap: 4px; cursor: pointer; }
.bcom-star-select { cursor: pointer; transition: transform .1s; }
.bcom-star-select:hover { transform: scale(1.2); }
.bcom-star-select path { fill: #ddd; transition: fill .15s; }
.bcom-star-select.bcom-star--full path { fill: #f5a623; }

/* ─── Reviews section ───────────────────────────────────────────── */
.bcom-reviews { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; }
.bcom-reviews__heading { font-size: 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bcom-reviews__summary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.bcom-reviews__avg { font-weight: 700; font-size: 18px; }
.bcom-reviews__count { color: #666; font-weight: 400; }
.bcom-reviews__empty { color: #666; font-style: italic; }

.bcom-reviews__list { margin-bottom: 40px; }
.bcom-review { padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
.bcom-review:last-child { border-bottom: 0; }
.bcom-review__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bcom-review__title { font-size: 15px; }
.bcom-review__content { line-height: 1.6; color: #444; margin-bottom: 8px; }
.bcom-review__meta { font-size: 13px; color: #999; display: flex; gap: 12px; }
.bcom-review__author { font-weight: 600; color: #666; }

/* ─── Review form ───────────────────────────────────────────────── */
.bcom-review-form { margin-top: 32px; padding: 24px; background: #f9f9f9; border-radius: 4px; }
.bcom-review-form h3 { margin: 0 0 16px; font-size: 18px; }
.bcom-review-form .bcom-field { margin-bottom: 14px; }
.bcom-review-form .bcom-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.bcom-review-form .bcom-field input,
.bcom-review-form .bcom-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; }
.bcom-review-form .bcom-field input:focus,
.bcom-review-form .bcom-field textarea:focus { border-color: #333; outline: none; box-shadow: 0 0 0 1px #333; }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.bcom-single-product__inner { grid-template-columns: 1fr; gap: 20px; }
	.bcom-single-product__title { font-size: 22px; }
	.bcom-single-product__price { font-size: 18px; }
	.bcom-product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ─── Stars ─────────────────────────────────────────────────────── */
.bcom-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.bcom-star { cursor: default; }
.bcom-star path { stroke: #f0b849; stroke-width: 1.5; }
.bcom-star--full path { fill: #f0b849; }
.bcom-star--half path { fill: url(#bcom-half-star-grad); }
.bcom-star--empty path { fill: #e0e0e0; }

/* ─── Star selector (review form) ───────────────────────────────── */
.bcom-star-selector { display: flex; gap: 4px; margin: 4px 0 12px; }
.bcom-star-select { cursor: pointer; transition: transform .15s; }
.bcom-star-select:hover { transform: scale(1.2); }
.bcom-star-select path { stroke: #f0b849; stroke-width: 1.5; }
.bcom-star-select.bcom-star--full path { fill: #f0b849; }
.bcom-star-select.bcom-star--empty path { fill: #e0e0e0; }

/* ─── Reviews section ───────────────────────────────────────────── */
.bcom-reviews { grid-column: 1 / -1; margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; }
.bcom-reviews__heading { font-size: 20px; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bcom-reviews__avg { font-size: 18px; font-weight: 700; }
.bcom-reviews__count { font-size: 14px; color: #666; font-weight: 400; }
.bcom-reviews__empty { color: #666; font-style: italic; }

/* ─── Individual review ─────────────────────────────────────────── */
.bcom-reviews__list { margin-bottom: 32px; }
.bcom-review { padding: 20px 0; border-bottom: 1px solid #eee; }
.bcom-review:last-child { border-bottom: 0; }
.bcom-review__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bcom-review__title { font-size: 15px; }
.bcom-review__content { line-height: 1.6; color: #333; margin-bottom: 8px; }
.bcom-review__meta { font-size: 13px; color: #999; display: flex; gap: 12px; }
.bcom-review__author { font-weight: 600; color: #666; }

/* ─── Review form ───────────────────────────────────────────────── */
.bcom-review-form { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee; max-width: 600px; }
.bcom-review-form h3 { margin: 0 0 16px; font-size: 18px; }
.bcom-review-form .bcom-field { margin-bottom: 12px; }
.bcom-review-form .bcom-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.bcom-review-form .bcom-field input,
.bcom-review-form .bcom-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; }
.bcom-review-form .bcom-field input:focus,
.bcom-review-form .bcom-field textarea:focus { border-color: #333; outline: none; box-shadow: 0 0 0 1px #333; }

/* ─── Sale end date ──────────────────────────────────────────── */
.bcom-single-product__sale-end {
	display: inline-block;
	font-size: 13px;
	color: #dc3232;
	background: #fef0f0;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 12px;
	font-weight: 500;
}

/* ─── Urgency badges ─────────────────────────────────────────── */
.bcom-urgency {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 4px;
	margin-bottom: 10px;
	line-height: 1.4;
}
.bcom-urgency--sale {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffc107;
}
.bcom-urgency--stock {
	background: #fef0f0;
	color: #dc3232;
	border: 1px solid #f5c6c6;
}

/* ─── Responsive grid ────────────────────────────────────────── */
@media (max-width: 768px) {
	.bcom-single-product .bcom-single-product__inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── Button base ────────────────────────────────────────────── */
/* wp-element-button inherits theme.json styles (BTF, FSE, Starter).
   Fallback values only apply on classic themes without theme.json. */
.bcom-btn--primary,
.bcom-co__btn--primary {
	display: inline-block;
	padding: 12px 28px;
	/* Use theme variables first → BTF variables → hardcoded fallback */
	background: var(--wp--preset--color--primary, var(--boost-btn-primary-bg, var(--bcom-accent, #111)));
	color: var(--wp--preset--color--white, var(--boost-btn-primary-text, #fff));
	border: none;
	border-radius: var(--boost-radius, var(--bcom-radius, 6px));
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	text-align: center;
	box-sizing: border-box;
	transition: opacity .2s ease;
}
.bcom-btn--primary:hover,
.bcom-co__btn--primary:hover {
	background: var(--boost-btn-primary-hover, var(--bcom-accent, #333));
	opacity: 0.9;
}