/**
 * KAUFLOND — Product detail page
 *
 * Scope: WoodMart single product — gallery column, summary column hierarchy,
 * shipping/delivery lines, service facts, key facts, accordion sections,
 * specification table, related products. Related cards inherit
 * product-card.css unchanged.
 *
 * The purchase form (form.cart) is styled on the OUTSIDE only — spacing, the
 * button's colours and height, the quantity field's border. Its markup, JS
 * and behaviour are WooCommerce's.
 *
 * All values from tokens.css.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. PAGE FRAME
 * ====================================================================== */

.single-product .site-content > .product {
	padding-top: var(--kfl-space-5);
}

.single-product .product-images.wd-grid-col {
	position: relative;
}

/* =========================================================================
 * 2. GALLERY
 *
 * Main image: stable square-ish box, product never cropped. Thumbnails are
 * WoodMart's vertical column. Zoom/lightbox stay WoodMart/WooCommerce native.
 * ====================================================================== */

.single-product .woocommerce-product-gallery {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
	padding: var(--kfl-space-3);
}

/* The image itself carries the square box: a landscape bike and a portrait
 * cat tree both letterbox inside the same 1:1 area, so every product's
 * gallery is the same height and nothing is cropped. */
.single-product .wd-gallery-images .woocommerce-product-gallery__image img,
.single-product .wd-gallery-images .wd-carousel-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: var(--kfl-color-surface);
}

/* Thumbnails: quiet frames, brand outline on the active one. */
.single-product .wd-gallery-thumb .wd-carousel-item {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-sm);
	background: var(--kfl-color-surface);
	overflow: hidden;
}

.single-product .wd-gallery-thumb .wd-carousel-item img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
}

.single-product .wd-gallery-thumb .wd-carousel-item.wd-active,
.single-product .wd-gallery-thumb .wd-carousel-item.active-thumb {
	border-color: var(--kfl-color-brand-primary);
	box-shadow: inset 0 0 0 1px var(--kfl-color-brand-primary);
}

/* Native sale label on the gallery: same compact rectangle as the cards. */
.single-product .woocommerce-product-gallery .product-labels .product-label {
	min-height: 0;
	padding: 3px var(--kfl-space-2);
	border-radius: var(--kfl-radius-sm);
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: uppercase;
}

.single-product .woocommerce-product-gallery .product-label.onsale {
	background: var(--kfl-color-sale);
	color: var(--kfl-color-sale-on);
}

/* =========================================================================
 * 3. SUMMARY COLUMN — hierarchy and density
 * ====================================================================== */

.single-product .summary-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kfl-space-3) var(--kfl-space-5);
}

.single-product .summary-inner > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* WoodMart adds bottom margins to every summary block; the flex gap replaces them. */
.single-product .summary-inner.wd-set-mb > * {
	margin-bottom: 0 !important;
}

.single-product .single-breadcrumbs-wrapper {
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-muted);
}

/* Brand: small uppercase line above the title. WoodMart renders a brand image
 * when the term has one; cap its height so a logo never dominates. */
.single-product .wd-product-brands {
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-medium);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kfl-color-text-secondary);
}

/* WoodMart boxes each brand link (it expects a logo image). Text brands
 * should read as a plain line. */
.single-product .wd-product-brands {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kfl-space-2);
	justify-content: flex-start;
	align-items: center;
}

/* WoodMart lays the brand block out as a COLUMN flexbox, so horizontal
 * alignment is align-items, not justify-content. */
.single-product .summary-inner .wd-product-brands {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	min-height: 0;
}

.single-product .summary-inner .wd-product-brands > a {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	background: none;
	line-height: var(--kfl-line-height-snug);
	color: inherit;
}

.single-product .wd-product-brands a:hover {
	color: var(--kfl-color-brand-primary);
}

.single-product .wd-product-brands img {
	max-height: 28px;
	width: auto;
}

/* Title: compact, not editorial. */
.single-product h1.product_title {
	margin: 0;
	font-size: var(--kfl-font-size-2xl);
	line-height: var(--kfl-line-height-tight);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
}

/* Rating: only rendered when reviews exist. */
.single-product .summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--kfl-space-2);
	font-size: var(--kfl-font-size-sm);
}

/* Price: the strongest commercial element. */
.single-product .summary p.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kfl-space-3);
	margin: 0;
	font-size: var(--kfl-font-size-3xl);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	color: var(--kfl-color-price);
}

.single-product .summary p.price ins {
	order: 1;
	text-decoration: none;
	color: var(--kfl-color-price-sale);
}

.single-product .summary p.price del {
	order: 2;
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-normal);
	color: var(--kfl-color-price-old);
	text-decoration: line-through;
}

/* WoodMart's per-variation price swaps into .woocommerce-variation-price */
.single-product .woocommerce-variation-price .price {
	font-size: var(--kfl-font-size-xl);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-price);
}

/* --- Shipping + delivery, directly under the price --------------------- */

.single-product .kfl-pdp-shipping {
	display: flex;
	flex-direction: column;
	gap: var(--kfl-space-1);
	padding: var(--kfl-space-3);
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface-subtle);
}

.single-product .kfl-pdp-shipping__cost {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-bold);
}

.single-product .kfl-pdp-shipping .wd-est-del {
	margin: 0;
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

.single-product .kfl-pdp-shipping .wd-est-del strong {
	font-weight: var(--kfl-font-weight-medium);
	color: var(--kfl-color-text-primary);
}

/* Short description: quiet body copy. */
.single-product .woocommerce-product-details__short-description {
	font-size: var(--kfl-font-size-base);
	color: var(--kfl-color-text-secondary);
}

.single-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * 4. PURCHASE FORM — outside styling only
 * ====================================================================== */

.single-product form.cart {
	display: block;
	padding-top: var(--kfl-space-2);
}

.single-product form.cart.variations_form .single_variation_wrap {
	width: 100%;
	margin-top: var(--kfl-space-3);
}

/* Variation table: label + select rows, compact. */
.single-product table.variations {
	margin: 0;
}

.single-product table.variations th.label {
	padding: 0 var(--kfl-space-3) var(--kfl-space-2) 0;
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	color: var(--kfl-color-text-primary);
	vertical-align: middle;
}

.single-product table.variations td.value select {
	min-width: 180px;
	height: var(--kfl-input-height);
}

.single-product table.variations .reset_variations {
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

/* Quantity + button row. WooCommerce/WoodMart markup; we align and size. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kfl-space-3);
}

.single-product form.cart .quantity {
	height: var(--kfl-btn-height-lg);
	border: var(--kfl-border-width) solid var(--kfl-color-border-strong);
	border-radius: var(--kfl-radius-md);
	overflow: hidden;
}

.single-product form.cart .quantity input.qty {
	height: 100%;
	border: none;
	font-weight: var(--kfl-font-weight-bold);
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	height: var(--kfl-btn-height-lg);
	padding-inline: var(--kfl-space-6);
	border-radius: var(--kfl-radius-md);
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	background: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	box-shadow: none;
}

.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--kfl-color-brand-primary-hover);
}

/* WooCommerce disables the button until a variation is chosen; keep it
 * visibly disabled rather than hiding it. */
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Stock line from WooCommerce */
.single-product .stock {
	font-size: var(--kfl-font-size-sm);
	margin: 0;
}

.single-product .stock.in-stock {
	color: var(--kfl-color-success-text);
}

.single-product .stock.available-on-backorder {
	color: var(--kfl-color-warning);
}

.single-product .stock.out-of-stock {
	color: var(--kfl-color-danger);
}

/* Wishlist + compare: side by side (the only summary children that do not
 * span the full width). */
.single-product .summary-inner .wd-compare-btn,
.single-product .summary-inner .wd-wishlist-btn {
	flex: 0 0 auto;
	display: inline-flex;
	margin: 0;
}

.single-product .summary-inner .wd-wishlist-btn > a,
.single-product .summary-inner .wd-compare-btn > a {
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--kfl-color-text-primary);
}

.single-product .summary-inner .wd-wishlist-btn > a:hover,
.single-product .summary-inner .wd-compare-btn > a:hover,
.single-product .summary-inner .wd-wishlist-btn.added > a {
	color: var(--kfl-color-brand-primary);
}

/* =========================================================================
 * 5. SERVICE FACTS + KEY FACTS
 * ====================================================================== */

.single-product .kfl-pdp-service {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kfl-space-2) var(--kfl-space-4);
	margin: 0;
	padding: var(--kfl-space-3) 0 0;
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
	list-style: none;
}

.single-product .kfl-pdp-service__item {
	display: inline-flex;
	align-items: center;
	gap: var(--kfl-space-1);
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
}

.single-product .kfl-pdp-service__item::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23218739' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
}

.single-product .kfl-key-facts {
	padding: var(--kfl-space-3) var(--kfl-space-4);
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
}

.single-product .kfl-key-facts__title {
	margin: 0 0 var(--kfl-space-2);
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kfl-color-text-primary);
}

.single-product .kfl-key-facts__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kfl-space-1) var(--kfl-space-4);
}

.single-product .kfl-key-facts__item {
	position: relative;
	padding-inline-start: var(--kfl-space-4);
	font-size: var(--kfl-font-size-base);
	line-height: var(--kfl-line-height-snug);
	color: var(--kfl-color-text-primary);
}

.single-product .kfl-key-facts__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kfl-color-brand-primary);
}

/* Meta (SKU, categories): one quiet line. */
.single-product .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kfl-space-1) var(--kfl-space-4);
	padding-top: var(--kfl-space-2);
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-muted);
}

.single-product .product_meta > span {
	display: inline;
}

.single-product .product_meta a {
	color: var(--kfl-color-text-secondary);
}

/* =========================================================================
 * 6. ACCORDION SECTIONS — Beschreibung · Technische Daten · Bewertungen
 * ====================================================================== */

.single-product .woocommerce-tabs.tabs-layout-accordion {
	margin-top: var(--kfl-space-8);
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
}

.single-product .tabs-layout-accordion .wd-accordion-item {
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

.single-product .tabs-layout-accordion .wd-accordion-title {
	padding-block: var(--kfl-space-4);
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	color: var(--kfl-color-text-primary);
}

.single-product .tabs-layout-accordion .wd-accordion-title:hover,
.single-product .tabs-layout-accordion .wd-accordion-title.wd-active {
	color: var(--kfl-color-brand-primary);
}

.single-product .tabs-layout-accordion .wd-accordion-content {
	padding: 0 0 var(--kfl-space-5);
	max-width: 80ch;
	font-size: var(--kfl-font-size-base);
	color: var(--kfl-color-text-secondary);
}

.single-product .tabs-layout-accordion .wd-accordion-content h2,
.single-product .tabs-layout-accordion .wd-accordion-content h3 {
	font-size: var(--kfl-font-size-md);
	margin: var(--kfl-space-4) 0 var(--kfl-space-2);
	color: var(--kfl-color-text-primary);
}

/* Specification table.
 * WoodMart renders .shop_attributes as a grid of flex rows with 30px gaps and
 * caps every accordion panel at a 250px scroll box. A spec sheet must read as
 * a real table and be fully visible, so both are reset here. */
.single-product .woocommerce-Tabs-panel--additional_information {
	max-width: none;
}

.single-product .tabs-layout-accordion .wd-scroll-content {
	max-height: none;
	overflow: visible;
}

.single-product table.woocommerce-product-attributes {
	--wd-attr-v-gap: 0px;
	--wd-attr-brd-width: 0px;
	width: 100%;
	max-width: 720px;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--kfl-font-size-base);
	overflow: visible;
}

.single-product .woocommerce-product-attributes tbody {
	display: table-row-group;
	margin-bottom: 0;
}

.single-product .woocommerce-product-attributes tr {
	display: table-row;
	padding: 0;
	margin: 0;
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
}

.single-product .woocommerce-product-attributes tr:nth-child(odd) {
	background: var(--kfl-color-surface-subtle);
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	display: table-cell;
	padding: var(--kfl-space-2) var(--kfl-space-3);
	text-align: start;
	vertical-align: top;
	border: none;
}

.single-product .woocommerce-product-attributes th {
	width: 40%;
	font-weight: var(--kfl-font-weight-medium);
	color: var(--kfl-color-text-secondary);
	font-style: normal;
}

.single-product .woocommerce-product-attributes td {
	color: var(--kfl-color-text-primary);
	text-align: start;
}

.single-product .woocommerce-product-attributes td p {
	margin: 0;
}

/* =========================================================================
 * 7. RELATED PRODUCTS — cards inherit product-card.css
 * ====================================================================== */

.single-product .related-products {
	margin-top: var(--kfl-space-8);
	padding-top: var(--kfl-space-5);
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
}

.single-product .related-products .title,
.single-product .related-products > h2,
.single-product .related-products .wd-el-title {
	margin: 0 0 var(--kfl-space-4);
	font-size: var(--kfl-font-size-xl);
	font-weight: var(--kfl-font-weight-bold);
	text-align: start;
	text-transform: none;
}

/* =========================================================================
 * 8. FOCUS
 * ====================================================================== */

.single-product .wd-gallery-thumb .wd-carousel-item:focus-visible,
.single-product form.cart .single_add_to_cart_button:focus-visible,
.single-product form.cart input.qty:focus-visible,
.single-product table.variations select:focus-visible,
.single-product .wd-accordion-title:focus-visible,
.single-product .summary-inner .wd-wishlist-btn > a:focus-visible {
	outline: none;
	box-shadow: var(--kfl-focus-ring);
}

/* =========================================================================
 * 9. ACTION LINKS — real touch targets
 * ====================================================================== */

.single-product .summary-inner .wd-wishlist-btn > a,
.single-product .summary-inner .wd-compare-btn > a {
	display: inline-flex;
	align-items: center;
	gap: var(--kfl-space-1);
	min-height: 40px;
	padding-inline: var(--kfl-space-1);
}

/* =========================================================================
 * 10. STICKY ADD-TO-CART BAR (WoodMart native, shown after scrolling past
 *     the purchase area). Compact and on-brand; behaviour untouched.
 * ====================================================================== */

.single-product .wd-sticky-btn {
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
	box-shadow: var(--kfl-shadow-md);
	background: var(--kfl-color-surface);
}

.single-product .wd-sticky-btn .wd-sticky-btn-content {
	max-width: var(--kfl-container-max);
	margin-inline: auto;
}

.single-product .wd-sticky-btn .wd-entities-title {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-medium);
	text-transform: none;
}

.single-product .wd-sticky-btn .price {
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-price);
}

.single-product .wd-sticky-btn .price ins {
	color: var(--kfl-color-price-sale);
	text-decoration: none;
}

.single-product .wd-sticky-btn .button,
.single-product .wd-sticky-btn .single_add_to_cart_button {
	height: var(--kfl-btn-height);
	border-radius: var(--kfl-radius-md);
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	background: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
}