/* ============================================================
   Single Product page — extracted from single-product.html mockup.
   Only product-specific styles live here. Header, footer, topbar,
   nav and newsletter styling already come from css/style.css +
   header.php/footer.php, so those blocks were intentionally left
   out to avoid duplicate/conflicting rules.
   Enqueued only on is_product() — see functions.php.
   ============================================================ */

.breadcrumb { padding: 18px 0; font-size: 13px; color: #8d7e86; }
.breadcrumb span { color: #b16d88; }
.breadcrumb a { color: #8d7e86; }

.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; padding: 25px 0 58px; }

/* Gallery */
.gallery { display: grid; grid-template-columns: 82px 1fr; gap: 15px; position: sticky; top: 140px; align-self: start; }
.thumbs { display: flex; flex-direction: column; gap: 10px; }
.thumb { height: 76px; border: 1px solid var(--line, #eadfe4); border-radius: 14px; background: #faf7f8; display: grid; place-items: center; padding: 0; cursor: pointer; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active { border: 2px solid var(--accent, #ef86a2); }
.main { aspect-ratio: 1; background: linear-gradient(145deg, #fff, #f7eef2); border: 1px solid var(--line, #eadfe4); border-radius: 25px; display: grid; place-items: center; position: relative; overflow: hidden; }
.main img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }
.tag { position: absolute; top: 16px; left: 16px; background: var(--accent, #ef86a2); color: #2b1024; border-radius: 99px; padding: 7px 11px; font-size: 11px; font-weight: 800; z-index: 2; }

/* Info column */
.info .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: #b16d88; font-weight: 800; }
.info h1 { font: clamp(38px, 5vw, 58px)/1.02 Georgia, serif; color: var(--ink, #2b1024); margin: 8px 0 12px; }
.info .rating { color: #df8a2d; }
.info .rating span { color: var(--muted, #786b73); margin-left: 7px; }
.info .price { font-size: 27px; font-weight: 850; color: var(--ink, #2b1024); margin: 16px 0 2px; }
.info .muted { color: var(--muted, #786b73); }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 22px 0; }
.trust div { background: var(--blush, #fff4f7); border: 1px solid #f0d8e0; border-radius: 13px; padding: 12px; font-size: 12px; }
.trust b { display: block; color: var(--ink, #2b1024); }

.option { font-weight: 800; font-size: 13px; margin: 20px 0 8px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { border: 1px solid var(--line, #eadfe4); background: #fff; border-radius: 10px; padding: 9px 13px; cursor: pointer; }
.swatch.active { border: 2px solid var(--ink, #2b1024); }

.buy { margin-top: 18px; }
.buy .quantity { display: inline-flex; border: 1px solid var(--line, #eadfe4); border-radius: 10px; overflow: hidden; margin-right: 9px; vertical-align: middle; }
.buy .quantity .qty-btn { width: 35px; border: 0; background: #fff; cursor: pointer; font-size: 16px; }
.buy .quantity input.qty { width: 42px; border: 0; text-align: center; -moz-appearance: textfield; }
.buy .quantity input.qty::-webkit-outer-spin-button,
.buy .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy button.single_add_to_cart_button,
.buy .add { border: 0; border-radius: 10px; background: var(--ink, #2b1024); color: #fff; font-weight: 800; padding: 12px 22px; cursor: pointer; vertical-align: middle; }
.buy .wish { border: 1px solid var(--line, #eadfe4); background: #fff; border-radius: 10px; font-size: 22px; width: 52px; height: 46px; cursor: pointer; vertical-align: middle; margin-left: 9px; }
.buy .wish.active { color: #ef86a2; border-color: #ef86a2; }

/* Restyle WooCommerce's default variation form to match the buy box */
.variations { margin: 20px 0; width: 100%; border-collapse: collapse; }
.variations td { padding: 6px 0; }
.variations label { font-weight: 800; font-size: 13px; }
.variations select { padding: 10px 13px; border: 1px solid var(--line, #eadfe4); border-radius: 10px; min-width: 160px; }
.woocommerce-variation-price .price { font-size: 22px; }
.reset_variations { font-size: 12px; color: var(--muted, #786b73); margin-left: 8px; }

.delivery { margin-top: 14px; padding: 14px; border: 1px solid var(--line, #eadfe4); border-radius: 14px; }
.accordion { margin-top: 20px; border-top: 1px solid var(--line, #eadfe4); }
.accordion details { padding: 15px 0; border-bottom: 1px solid var(--line, #eadfe4); }
.accordion summary { font-weight: 750; color: var(--ink, #2b1024); cursor: pointer; }

/* Tabs */
.tabs { border-top: 1px solid var(--line, #eadfe4); padding: 50px 0; }
.tab-buttons { display: flex; gap: 25px; border-bottom: 1px solid var(--line, #eadfe4); margin-bottom: 24px; flex-wrap: wrap; }
.tab-buttons button { border: 0; background: none; padding: 12px 2px; font-weight: 750; color: var(--muted, #786b73); cursor: pointer; }
.tab-buttons button.active { color: var(--ink, #2b1024); border-bottom: 2px solid var(--accent, #ef86a2); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel h2 { font: 34px Georgia, serif; color: var(--ink, #2b1024); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.box { border: 1px solid var(--line, #eadfe4); border-radius: 16px; padding: 20px; }
.box b { color: var(--ink, #2b1024); }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line, #eadfe4); }
.reviews-tab .comment-list { list-style: none; padding: 0; }

/* Related products */
.related-products { margin-bottom: 50px; }
.related-products .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.related-products .pcard { border: 1px solid var(--line, #eadfe4); border-radius: 18px; overflow: hidden; }
.related-products .pmedia { aspect-ratio: 1; background: #faf7f8; display: grid; place-items: center; }
.related-products .pmedia img { width: 100%; height: 100%; object-fit: cover; }
.related-products .pcopy { padding: 14px; }
.related-products .pcopy h3 { font-size: 15px; margin: 0 0 6px; }
.related-products .pcopy h3 a { color: var(--ink, #2b1024); }
.related-products .price { font-size: 15px; font-weight: 800; color: var(--ink, #2b1024); margin: 4px 0 10px; }
.related-products .small { width: 100%; border: 0; background: var(--ink, #2b1024); color: #fff; padding: 9px; border-radius: 9px; cursor: pointer; }

@media (max-width: 900px) {
	.wrap { grid-template-columns: 1fr; }
	.gallery { position: static; }
	.related-products .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.gallery { grid-template-columns: 1fr; }
	.thumbs { order: 2; flex-direction: row; overflow: auto; }
	.thumb { min-width: 70px; }
	.related-products .products { grid-template-columns: 1fr; }
	.features { grid-template-columns: 1fr; }
}