/**
 * WooCommerce Custom Price Grid Styling
 * 
 * Provides styling for the custom WooCommerce price grid layout.
 * Handles formatting for regular prices, sale prices, strikethroughs,
 * and tax notices with responsive grid structure.
 * All selectors use "kj_" prefix for namespacing.
 * 
 * This stylesheet is enqueued and implemented by kj_wooPrice.php
 * 
 * @author      Sebastiaan Castenmiller
 * @date        March 31, 2025
 * @ticket      SCRORO-62599
 */
 
 
 /* ----------------------------------------------------------------
  * PRICE GRID
  * ---------------------------------------------------------------- */

.kj_price-grid {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 10px;
	row-gap: 2px;
	align-items: start;
	width: fit-content;
	max-width: 100%;
}

.kj_price-cell {
  text-align: left;
}

.kj_price-value {
	display: inline-block;
	text-align: left;
}

.kj_price-label {
	display: inline-block;
	text-align: left;
	margin-left: -2px;
}


/* ----------------------------------------------------------------
 * PRICE COLORS
 * These override the base styles to adjust price colors
 * ---------------------------------------------------------------- */
 
 .kj_price-value {
	 color: #ff8618;
 }
 
 .kj_sale {
	 
 }
 
 .kj_excl {
	 
 }
 
 .kj_strike {
	color: darkgray;
 }


/* ----------------------------------------------------------------
 * LOCATION-SPECIFIC FONT SIZES, STYLE and DECORATION
 * These override the base styles to adjust prices based on location
 * ---------------------------------------------------------------- */

.kj_price-grid {
	font-family: 'Oswald', sans-serif;
}

.kj_price-value {
	font-size: 1.2em;
}

.kj_tax-note {
	font-size: 0.5em;
}

.kj_excl {
	font-size: 0.9em;
}

.kj_strike {
	text-decoration: line-through;
	font-size: 0.9em;
}

/* 1. MAIN PRODUCT PAGE (large size) */
.summary.entry-summary .kj_price-grid {
	font-size: 26px;
	font-weight: 700;
	row-gap: 15px;
}

/* 2. RECENTLY VIEWED PRODUCTS WIDGET (smaller size) */
.sidebar-content .kj_price-grid {
	font-size: 14px;
	column-gap: 10px;
}

.sidebar-content .kj_price-grid .kj_strike {
}

/* 3. STICKY PRODUCT SECTION (medium size) */
.sticky-product .sticky-detail .kj_price-grid {
	font-size: 18px;
	row-gap: 1px;
}

/* 4. Suggested items, Related items, Archive */ 
.product-inner .product-content .kj_price-grid {
	font-size: 15px;
	column-gap: 10px;
	margin: 0 auto;
}

/* . VARIABLE PRODUCTS */
.woocommerce-variation-price .kj_price-grid {
	font-size: 20px !important;
	row-gap: 1px !important;
}

/* . BUNDLE PRODUCTS */
.kj-bundle-item .kj_price-grid {
	font-size: 15px !important;
	row-gap: 10px !important;
	column-gap: 10px;	
}

.kj-bundle-item .kj_strike {
	font-size: 0.6em;
}

/* ----------------------------------------------------------------
 * Guaven Woo Search
 * The search function has it's own cache - rebuild it to see results!
 * ---------------------------------------------------------------- */