/* ==========================================================================
   3-column product layout: gallery | middle info | sidebar buy-box.
   The add-to-cart form (form.cart) is given display:contents so its own
   children — swatches, the variations table, the price/qty/button block —
   can each be routed into the middle or sidebar column independently while
   staying part of one functional <form>. See class-product-page-extras.php
   for the corresponding hook priorities that control DOM order within each
   column (auto-placement stacks same-column items in source order).
   ========================================================================== */

.km-product-grid {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr) 320px;
	column-gap: 40px;
	align-items: start;
	position: relative;
}

/* Gallery column is taken out of the grid's row-track sizing entirely, rather
   than spanning grid-row: 1 / -1 across the middle column's rows. A spanning
   item's height requirement gets absorbed almost entirely by whichever
   spanned row already has the largest base size, which is always row 1
   (title/price/description) -- that inflated row 1 far past what its own
   text needs, leaving a large empty gap above the swatches row before the
   next row's content began. Positioned absolutely instead, mirroring the fix
   already applied further down to the wishlist button and sidebar accordion
   for this identical row-inflation problem. */
.km-gallery-col {
	position: absolute;
	top: 0;
	left: 0;
	width: 440px;
}

.km-middle-col {
	grid-column: 2;
	grid-row: 1;
}

/* Gallery column grows on large screens by reclaiming the theme's own root
   padding (a fixed 50px each side, confirmed empirically, not a percentage) --
   the standard WordPress alignfull breakout formula (viewport-relative, not a
   hardcoded px target) so it stays correct at any viewport width without ever
   pushing the page into horizontal overflow. Gated to 1300px+ so the middle
   column (fixed at 500px worth of content) always keeps enough room; below
   that this whole rule is inactive and the base 3-column widths apply. */
@media (min-width: 1300px) {
	.km-product-grid {
		margin-left: calc(50% - 50vw + 20px) !important;
		margin-right: calc(50% - 50vw + 20px) !important;
		max-width: calc(100vw - 40px) !important;
		grid-template-columns: 500px minmax(0, 1fr) 320px;
	}
	.km-gallery-col {
		width: 500px;
	}
}

/* The breadcrumb row above is a separate, site-wide shared block (same markup
   on every page) -- widen it to match on single-product pages only, so it
   doesn't end up misaligned against the wider grid below it. */
@media (min-width: 1300px) {
	body.single-product .wp-block-breadcrumbs.alignwide {
		margin-left: calc(50% - 50vw + 20px) !important;
		margin-right: calc(50% - 50vw + 20px) !important;
		max-width: calc(100vw - 40px) !important;
	}
}

/* Gallery: white placeholder frame behind the main image, independent of
   whatever background the source photo itself happens to have -- without
   this, a product photo shot on a non-white or transparent background would
   show the page's cream backdrop through any letterboxing from object-fit.
   object-fit:contain is pinned explicitly here too (already the block's own
   "contain" scale setting, but locked in via our own CSS as belt-and-suspenders
   now that this box's size will vary more with the wider breakout above). */
.wc-block-product-gallery-large-image__container {
	background: #ffffff;
	border-radius: 4px;
}
.wc-block-product-gallery-large-image__container img {
	object-fit: contain;
}

.km-product-grid .wp-block-woocommerce-add-to-cart-form,
.km-product-grid form.cart {
	display: contents !important;
}

/* Middle column: swatches + the (mostly swatch-replaced) variations table live
   with the other product-option content. The "Clear" reset-variations link
   isn't part of the reference design, so it's hidden rather than placed. */
.km-product-grid .kitmik-swatches,
.km-product-grid table.variations {
	grid-column: 2 !important;
	grid-row: 2 !important;
}
.km-product-grid a.reset_variations {
	display: none;
}

/* Per-variation description (WooCommerce's own "Description" field on each
   variation). Hidden here in the sidebar -- it's shown instead in the middle
   column, right below the swatches (.kitmik-middle-variation-description,
   filled in by JS on found_variation), which reads better next to the
   picker than squeezed into the narrow sidebar next to the price. */
.km-product-grid .woocommerce-variation-description {
	display: none;
}

/* Its middle-column replacement. */
.km-product-grid .kitmik-middle-variation-description {
	grid-column: 2 !important;
	grid-row: 3 !important;
	font-family: 'Manrope', sans-serif;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #6b5d4f;
	margin: 10px 0 0;
}
.km-product-grid .kitmik-middle-variation-description p {
	margin: 0;
}

/* Sidebar column, variable products: WooCommerce's own variation price/stock/
   qty/button grouping (.single_variation_wrap) becomes one sidebar item
   automatically since it's already one form child, sized fine within row 1 --
   no further splitting needed. */
.km-product-grid .single_variation_wrap {
	grid-column: 3 !important;
	grid-row: 1 !important;
}

/* Sidebar column, simple products: price/bulk-link/qty/badge/buttons/secure-link
   are separate top-level form children (no wrap to bundle them under), so
   grid-row numbering was tried first here too -- but grid rows span BOTH
   columns, and column 2's row 1 (title/price/coupon/excerpt) is frequently much
   taller than this short price line, stranding every later sidebar row behind a
   large blank gap while row 1's shared height (dictated entirely by column 2)
   plays out. Positioned via JS instead (kitmikPositionSimpleProductSidebar in
   product-page-extras.js), the same "measure the previous element's real
   rendered bottom and set `top`" technique already used below for the wishlist
   button/accordion -- fully decoupled from whatever height column 2 happens to
   need for a given product. visibility:hidden avoids a flash of overlapping
   elements before JS sets their real position on first paint. */
.km-product-grid .kitmik-sidebar-price:not(.single_variation_wrap *),
.km-product-grid .kitmik-bulk-link:not(.single_variation_wrap *),
.km-product-grid .quantity:not(.single_variation_wrap *),
.km-product-grid .kitmik-addtocart-badge:not(.single_variation_wrap *),
.km-product-grid button.single_add_to_cart_button:not(.single_variation_wrap *),
.km-product-grid .kitmik-secure-link:not(.single_variation_wrap *) {
	/* grid-column/grid-row explicitly spans the whole grid rather than being left
	   auto -- an auto abs-pos grid item's containing block is normally the full
	   grid box, but empirically one of these (the Add to Cart/Buy Now buttons)
	   still resolved to a real 2-column auto-placed area instead (`right:0` then
	   meant column 2's right edge, landing the buttons over the middle column).
	   Being explicit removes any dependence on auto-placement's per-item outcome. */
	grid-column: 1 / -1 !important;
	grid-row: 1 / -1 !important;
	position: absolute;
	top: 0;
	right: 0;
	width: 320px;
	visibility: hidden;
}

/* Sidebar-only: shrink and recolor the "(Inclusive of all taxes)" price
   suffix -- scoped to .kitmik-sidebar-price/.single_variation_wrap so the
   same .woocommerce-price-suffix markup in the middle column's main price
   display (title area) is untouched. */
.km-product-grid .kitmik-sidebar-price .woocommerce-price-suffix,
.km-product-grid .single_variation_wrap .woocommerce-price-suffix {
	font-size: 50%;
	color: #2e7d32;
}
.kitmik-addtocart-badge {
	background: #fff;
	border: 1px solid #43454b;
	border-radius: 4px;
	color: #43454b;
	display: inline-block;
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.25em 0.75em;
	text-transform: uppercase;
	width: fit-content;
	margin: 6px 0;
}



/* .woocommerce-variation-add-to-cart (variable products' qty/button/hook area) is
   natively display:grid in WooCommerce's own CSS. The rules above are meant for
   the OUTER page grid, but without the :not() guard they also land inside THIS
   inner grid (same property, whichever grid container is actually the element's
   layout parent) and shove everything into its narrow, non-zero column 3 --
   causing a left inset here that the outer grid's column 3 doesn't have.
   Restyle the inner grid directly instead of fighting it: full-width rows for
   everything except Add to Cart + Buy Now, which share one row at equal width. */
.single_variation_wrap .woocommerce-variation-add-to-cart {
	grid-template-columns: 1fr 1fr !important;
	grid-auto-flow: row !important;
	column-gap: 10px;
	row-gap: 10px;
}
.single_variation_wrap .woocommerce-variation-add-to-cart > .kitmik-bulk-link,
.single_variation_wrap .woocommerce-variation-add-to-cart > .quantity,
.single_variation_wrap .woocommerce-variation-add-to-cart > .kitmik-secure-link {
	grid-column: 1 / -1 !important;
}
.single_variation_wrap .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
	grid-column: auto !important;
	width: 100% !important;
	margin-left: 0 !important;
}

/* Middle column: specs table + trust icons, both hooked inside the form at
   priorities placing them after swatches, before the sidebar picks back up. */
.km-product-grid .kitmik-specs-table {
	grid-column: 2 !important;
	grid-row: 4 !important;
}
.km-product-grid .kitmik-trust-icons {
	grid-column: 2 !important;
	grid-row: 5 !important;
}

/* Content outside the form: title/rating/price/excerpt column (col 2), and the
   sidebar accordion + wishlist button (col 3). Product meta (SKU/Category/Tags)
   is hidden per explicit request -- was the last item in the middle column,
   right after the trust icons row. */
.km-product-grid .wp-block-woocommerce-product-meta {
	display: none !important;
}

/* Positioned via JS (product-page-extras.js), not a grid row: pinning these to a
   row number forces them to wait for however many rows the middle column uses,
   which differs a lot between simple and variable products and caused a large
   blank gap here twice already. JS sets `top` from the buy-box's own rendered
   height instead, so it's independent of the middle column entirely. */
.km-product-grid .yith-add-to-wishlist-button-block,
.km-product-grid .kitmik-sidebar-accordion {
	position: absolute;
	right: 0;
	width: 320px;
	visibility: hidden;
}

/* Stack to a single column below 1300px -- deliberately NOT the site-wide
   782px hamburger/nav breakpoint. The grid's fixed-width columns (440px
   gallery + 320px sidebar + 80px gaps = 840px minimum, regardless of viewport)
   don't leave enough room for the middle column between 782-1300px, causing
   real horizontal page overflow in that range (confirmed: 800px viewport ->
   880px scrollWidth) -- not just a cramped look. Raised to 1300px (matching
   the OTHER existing breakpoint, the gallery-widening rule below) so there's
   no dead zone where the 3-column grid is attempted but doesn't actually fit. */
@media (max-width: 1300px) {
	.km-product-grid {
		grid-template-columns: 1fr;
	}
	.km-gallery-col {
		grid-row: auto;
		position: static !important;
		width: auto !important;
	}
	.km-gallery-col,
	.km-middle-col,
	.km-product-grid .kitmik-swatches,
	.km-product-grid table.variations,
	.km-product-grid .single_variation_wrap,
	.km-product-grid .quantity,
	.km-product-grid button.single_add_to_cart_button,
	.km-product-grid button.single_add_to_cart_button.kitmik-buy-now-button,
	.km-product-grid .kitmik-sidebar-price,
	.km-product-grid .kitmik-bulk-link,
	.km-product-grid .kitmik-secure-link,
	.km-product-grid .kitmik-specs-table,
	.km-product-grid .kitmik-trust-icons,
	.km-product-grid .kitmik-middle-variation-description,
	.km-product-grid .kitmik-addtocart-badge {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.km-product-grid .kitmik-sidebar-accordion,
	.km-product-grid .yith-add-to-wishlist-button-block,
	.km-product-grid .kitmik-sidebar-price,
	.km-product-grid .kitmik-bulk-link,
	.km-product-grid .quantity,
	.km-product-grid button.single_add_to_cart_button,
	.km-product-grid .kitmik-secure-link {
		position: static !important;
		visibility: visible !important;
		width: auto !important;
	}
	/* WooCommerce core CSS (not ours -- .wp-block-woocommerce-add-to-cart-form
	   form.cart > .single_add_to_cart_button) sets justify-self:start on both
	   buttons with no !important. Invisible on desktop, where the simple-
	   product sidebar rule above pins these with position:absolute regardless
	   of layout -- but once mobile flips them back to position:static, each
	   grid item shrinks to its own label width instead of the column, and
	   with no row-gap set on .km-product-grid, Add to Cart and Buy Now end up
	   different widths and touching. Force both to fill the column and add a
	   gap between them here. */
	.km-product-grid button.single_add_to_cart_button:not(.single_variation_wrap *) {
		justify-self: stretch !important;
		width: 100% !important;
	}
	.km-product-grid button.single_add_to_cart_button.kitmik-buy-now-button:not(.single_variation_wrap *) {
		margin-top: 12px !important;
	}
	/* The desktop rule above explicitly spans the whole grid (grid-column/row:
	   1/-1) for the simple-product sidebar items -- with no mobile override,
	   that span stays active even once position:static puts them back in flow,
	   landing their content at row 1 (overlapping gallery/title). Reset back to
	   a normal single-column auto-placed item, same as everything else on mobile.
	   Needs the same :not(.single_variation_wrap *) clause as the desktop rule --
	   without it this selector has LOWER specificity (missing that pseudo-class's
	   contribution) and loses to the desktop rule despite being !important and
	   later in the file; specificity is compared before source order. */
	.km-product-grid .kitmik-sidebar-price:not(.single_variation_wrap *),
	.km-product-grid .kitmik-bulk-link:not(.single_variation_wrap *),
	.km-product-grid .quantity:not(.single_variation_wrap *),
	.km-product-grid button.single_add_to_cart_button:not(.single_variation_wrap *),
	.km-product-grid .kitmik-secure-link:not(.single_variation_wrap *) {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	/* CSS Grid auto-placement respects `order` just like flexbox -- everything
	   above defaults to order:0 and stacks by source/DOM order, which (see the
	   PHP hook comments in class-product-page-extras.php) puts this description
	   placeholder AFTER the entire buy-box (.single_variation_wrap and
	   everything hooked after it), not right after the swatches like the
	   desktop grid-row does. Splitting into two order groups reproduces the
	   desktop position without touching relative order *within* either group
	   (gallery/title/swatches keep their existing order:0 sequence; the whole
	   buy-box-and-below group keeps its existing sequence too, just shifted to
	   order:2) -- only the description moves, via its own order:1 in between. */
	.km-product-grid .kitmik-middle-variation-description {
		order: 1;
	}
	.km-product-grid .single_variation_wrap,
	.km-product-grid .quantity,
	.km-product-grid button.single_add_to_cart_button,
	.km-product-grid button.single_add_to_cart_button.kitmik-buy-now-button,
	.km-product-grid .kitmik-sidebar-price,
	.km-product-grid .kitmik-bulk-link,
	.km-product-grid .kitmik-secure-link,
	.km-product-grid .kitmik-specs-table,
	.km-product-grid .kitmik-trust-icons,
	.km-product-grid .kitmik-addtocart-badge,
	.km-product-grid .kitmik-sidebar-accordion,
	.km-product-grid .yith-add-to-wishlist-button-block {
		order: 2;
	}
}

/* ---- Condensed sidebar price (simple products) ---- */
.kitmik-sidebar-price {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1c1108;
	margin-bottom: 10px;
}

/* ---- Buy Now button: filled variant sitting next to the outline Add to Cart ---- */
.woocommerce div.product form.cart .kitmik-buy-now-button {
	background: var(--dark, #1c1108) !important;
	color: #fff !important;
}
.woocommerce div.product form.cart .kitmik-buy-now-button:hover {
	background: #c4956a !important;
	border-color: #c4956a !important;
	color: #fff !important;
}

/* ---- Buying in Bulk link ---- */
.kitmik-bulk-link {
	margin: 0 0 12px;
}
.kitmik-bulk-link a {
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	color: #8a6d4f;
	text-decoration: underline;
}

/* ---- Standalone secure-transaction sidebar link ---- */
.kitmik-secure-link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	color: #6b5d4f;
}
.kitmik-secure-link svg {
	flex-shrink: 0;
	color: #8a6d4f;
}

/* ---- Trust icons row (middle column) ---- */
.kitmik-trust-icons {
	display: flex;
	gap: 20px;
	margin: 18px 0 4px;
	padding-top: 14px;
	border-top: 1px solid #e8e0d4;
	flex-wrap: wrap;
}
.kitmik-trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Manrope', sans-serif;
	font-size: 0.72rem;
	color: #6b5d4f;
}
.kitmik-trust-item svg {
	flex-shrink: 0;
	color: #8a6d4f;
}

/* ---- Specs table ---- */
.kitmik-specs-table {
	border-collapse: collapse;
	margin-top: 10px;
	width: 100%;
	max-width: 420px;
}
.kitmik-specs-table th,
.kitmik-specs-table td {
	text-align: left;
	padding: 8px 12px 8px 0;
	font-family: 'Manrope', sans-serif;
	font-size: 0.82rem;
	border-bottom: 1px solid #f0ebe3;
}
.kitmik-specs-table th {
	color: #6b5d4f;
	font-weight: 600;
	width: 40%;
}
.kitmik-specs-table td {
	color: #1c1108;
}

/* ---- Product tabs (Description / Reviews only now) restyled as a vertical list ---- */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-direction: column;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 20px !important;
}
.woocommerce-tabs ul.tabs::before {
	display: none !important;
}
.woocommerce-tabs ul.tabs li {
	width: 100%;
	margin: 0 !important;
	border: none !important;
	border-bottom: 1px solid #e8e0d4 !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}
.woocommerce-tabs ul.tabs li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 4px !important;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.2px;
	color: #1c1108 !important;
}
.woocommerce-tabs ul.tabs li a::after {
	content: '›';
	font-size: 1.1rem;
	color: #b8ada0;
	transition: transform 0.2s ease;
}
.woocommerce-tabs ul.tabs li.active a::after {
	transform: rotate(90deg);
	color: #1c1108;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 4px 4px 24px !important;
	font-family: 'Manrope', sans-serif;
	font-size: 0.88rem;
	line-height: 1.7;
	color: #1c1108;
}

/* Description is always shown as a plain section (not a clickable tab) --
   its trigger + border is hidden here; Reviews is repositioned via JS
   (product-page-extras.js) to sit right after the Description panel instead
   of alongside it, since it's the only tab left to actually toggle. */
.woocommerce-tabs ul.tabs li.description_tab {
	display: none !important;
}

/* ---- Sidebar accordion (Specifications / Shipping / Cancellation) ---- */
.kitmik-sidebar-accordion {
	margin-top: 4px;
}
.kitmik-sidebar-accordion-item {
	border-bottom: 1px solid #e8e0d4;
}
.kitmik-sidebar-accordion-trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: 14px 4px;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	color: #1c1108;
	cursor: pointer;
	text-align: left;
}
.kitmik-sidebar-accordion-trigger::after {
	content: '›';
	font-size: 1.1rem;
	color: #b8ada0;
	transition: transform 0.2s ease;
}
.kitmik-sidebar-accordion-item.active .kitmik-sidebar-accordion-trigger::after {
	transform: rotate(90deg);
	color: #1c1108;
}
.kitmik-sidebar-accordion-panel {
	display: none;
	padding: 0 4px 18px;
	font-family: 'Manrope', sans-serif;
	font-size: 0.82rem;
	line-height: 1.7;
	color: #1c1108;
}
.kitmik-sidebar-accordion-item.active .kitmik-sidebar-accordion-panel {
	display: block;
}
.kitmik-sidebar-accordion-panel table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}
.kitmik-sidebar-accordion-panel table.woocommerce-product-attributes th,
.kitmik-sidebar-accordion-panel table.woocommerce-product-attributes td {
	text-align: left;
	padding: 6px 8px 6px 0;
	font-size: 0.8rem;
	border-bottom: 1px solid #f0ebe3;
}

.kitmik-sidebar-price .kitmik-stock-instock {
	color: #2e7d32;
	font-size: 0.85rem;
	font-weight: 500;
}
.kitmik-sidebar-price .kitmik-stock-outofstock {
	color: #b3261e;
	font-size: 0.85rem;
	font-weight: 500;
}

/* Native WooCommerce stock text — replaced by our own condensed sidebar price + stock status */
.km-product-grid p.stock {
	display: none !important;
}

/* wpautop wraps stray whitespace in the accordion shortcode output into empty <p> tags */
.kitmik-sidebar-accordion-trigger + p:empty {
	display: none;
}