/* Atolyeman — single product page (Phase D5).
   Layered on top of woocommerce.css + Blocksy. Every colour resolves from
   tokens.css, so the buy box, option buttons and section rules morph with the
   active audience segment. */

/* ---------- D5.1 Buy-box trust bullets ---------- */
.single-product .at-buybox-trust {
	list-style: none;
	margin: var(--at-space-6) 0 0;
	padding: var(--at-space-4) 0 0;
	border-top: 1px solid var(--at-border);
	display: flex;
	flex-direction: column;
	gap: var(--at-space-3);
}
.single-product .at-buybox-trust__item {
	display: flex;
	align-items: center;
	gap: var(--at-space-3);
	color: var(--at-text-muted);
	font-size: var(--at-fs-200);
	line-height: 1.4;
}
.single-product .at-buybox-trust__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--at-accent);
}

/* ---------- D5.2 Variation UX — segmented option buttons ---------- */
/* The native <select> stays in the DOM (WooCommerce reads/writes its value) but
   is visually hidden once product.js has built the button UI. Without JS the
   select remains visible and fully functional. */
.single-product .variations select.at-vary-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.single-product .variations {
	width: 100%;
	border-collapse: collapse;
}
.single-product .variations th.label,
.single-product .variations td.value {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
}
.single-product .variations th.label {
	padding-top: var(--at-space-4);
}
.single-product .variations th.label label {
	font-weight: 600;
	font-size: var(--at-fs-200);
	color: var(--at-text);
	letter-spacing: .01em;
}

.single-product .at-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	margin-top: var(--at-space-2);
}
.single-product .at-option-btn {
	appearance: none;
	cursor: pointer;
	min-width: 3rem;
	padding: var(--at-space-2) var(--at-space-4);
	background: var(--at-surface);
	color: var(--at-text);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	font-family: var(--at-font-sans);
	font-size: var(--at-fs-200);
	font-weight: 600;
	line-height: 1.2;
	transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.single-product .at-option-btn:hover {
	border-color: var(--at-accent);
	color: var(--at-accent);
}
.single-product .at-option-btn[aria-pressed="true"] {
	border-color: var(--at-accent);
	color: var(--at-accent);
	box-shadow: inset 0 0 0 1px var(--at-accent);
}
.single-product .at-option-btn:focus-visible {
	outline: 2px solid var(--at-accent);
	outline-offset: 2px;
}
/* Unavailable combinations — muted and inert. */
.single-product .at-option-btn[disabled],
.single-product .at-option-btn[aria-disabled="true"] {
	cursor: not-allowed;
	background: var(--at-surface-2);
	color: var(--at-text-muted);
	border-color: var(--at-border);
	box-shadow: none;
	text-decoration: line-through;
}

/* Variation price + availability that WooCommerce swaps in on selection. */
.single-product .single_variation .price {
	color: var(--at-text);
	font-weight: 700;
	font-size: var(--at-fs-400);
}
.single-product .single_variation .stock {
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	margin-top: var(--at-space-1);
}

/* "Temizle" reset link — quiet, muted, only nudges into view when Woo shows it. */
.single-product a.reset_variations {
	display: inline-block;
	margin: var(--at-space-2) 0 0 var(--at-space-2);
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.single-product a.reset_variations:hover {
	color: var(--at-accent);
}

/* ---------- D5.4 Gallery polish ---------- */
/* Thumbnails a touch larger, soft radius, accent border on the active one.
   Main image keeps its object-fit: contain (set in woocommerce.css). */
.single-product .flexy-pills[data-type="thumbs"] ol {
	gap: var(--at-space-2);
}
.single-product .flexy-pills[data-type="thumbs"] li .ct-media-container {
	border-radius: var(--at-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color .18s ease, opacity .18s ease;
}
.single-product .flexy-pills[data-type="thumbs"] li:not(.active) .ct-media-container {
	opacity: .7;
}
.single-product .flexy-pills[data-type="thumbs"] li:hover .ct-media-container {
	opacity: 1;
}
.single-product .flexy-pills[data-type="thumbs"] li.active .ct-media-container {
	border-color: var(--at-accent);
	opacity: 1;
}

/* ---------- D6.2 Mobile gallery + buy box ---------- */
/* At 375px the six 115px thumbnails wrapped into three rows and pushed the
   price and add-to-cart button ~1600px down the page. One horizontally
   scrollable strip of smaller thumbs brings the buy box back near the fold. */
@media (max-width: 767px) {
	.single-product .flexy-pills[data-type="thumbs"] ol {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.single-product .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar {
		display: none;
	}
	.single-product .flexy-pills[data-type="thumbs"] li {
		flex: 0 0 68px !important; /* Blocksy sizes pills from its own flex basis */
		width: 68px !important;
		scroll-snap-align: start;
	}
	/* Full-width primary action; 3rem-wide option pills are ~35px tall. */
	.single-product .single_add_to_cart_button { width: 100%; }
	.single-product .at-option-btn { min-height: 44px; }
}

/* WooCommerce sizes the review rating stars at 1em each — 14px hit areas that
   are near-impossible to tap accurately. The <a>s are sized in em, so scaling
   the paragraph scales the whole control. */
.single-product #review_form p.stars {
	font-size: 26px;
	line-height: 1;
}
.single-product #review_form p.stars a {
	margin-right: 8px;
}

/* ---------- D5.5 Tabs → stacked long-scroll sections ---------- */
/* Hide the tab nav; reveal every panel. (Tablist hidden ⇒ all panels shown, so
   the content stays reachable.) */
.single-product .woocommerce-tabs ul.tabs.wc-tabs {
	display: none !important; /* Blocksy forces display:flex at higher specificity */
}
.single-product .woocommerce-tabs .wc-tab,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: none;
	padding-top: var(--at-space-12);
	margin-top: var(--at-space-12);
	border-top: 1px solid var(--at-border);
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel:first-child {
	padding-top: 0;
	margin-top: var(--at-space-8);
	border-top: 0;
}
.single-product .at-tab-heading,
.single-product .woocommerce-Reviews-title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	font-weight: 500;
	color: var(--at-text);
	margin: 0 0 var(--at-space-6);
}

/* ---------- D5.3 Related products spacing ---------- */
/* Cards inherit the shared badge/button/card styling from woocommerce.css;
   we only add the section rhythm here. */
.single-product .related.products,
.single-product .upsells.products {
	margin-top: var(--at-space-16);
	padding-top: var(--at-space-12);
	border-top: 1px solid var(--at-border);
}
.single-product .related.products > h2,
.single-product .related.products > .ct-module-title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	font-weight: 500;
	margin-bottom: var(--at-space-8);
}