/* ==========================================================================
   RK Store Extras – styles for the WoodMart child theme
   Uses WoodMart's own colour variables with safe fallbacks.
   ========================================================================== */

:root {
	--rk-price-color: var(--wd-primary-color, #f58220);
	--rk-accent: var(--wd-primary-color, #f58220);
}

/* ---------- Info block under the price ---------- */
.rk-ex {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin-top: 6px;
	text-align: var(--text-align, center);
}

.rk-ex-row,
.rk-ex-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--text-align, center);
	gap: 6px 8px;
}

.rk-ex--single { margin: 0 0 12px; text-align: start; }
.rk-ex--single .rk-ex-row { justify-content: flex-start; }

.rk-ex-off {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 6px;
	background: #e8f5ee;
	color: #1f2937;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

.rk-ex-save {
	color: #16a34a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.rk-ex-save .amount,
.rk-ex-save bdi { color: inherit; font-weight: inherit; }

.rk-ex-stock {
	color: #dc2626;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------- Category chips ---------- */
.rk-ex .rk-ex-chip {
	display: inline-block;
	padding: 3px 12px;
	border: 1px solid var(--brdcolor-gray-300, #e5e7eb);
	border-radius: 999px;
	background: transparent;
	color: var(--color-gray-800, #374151);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.rk-ex .rk-ex-chip:hover,
.rk-ex .rk-ex-chip:focus {
	border-color: var(--rk-accent);
	color: var(--rk-accent);
}

/* Hide WoodMart's plain-text categories while our chips are on */
body.rk-hide-wd-cats .wd-hover-parent .wd-product-cats { display: none; }

/* Too small for extra rows */
.wd-hover-small .rk-ex { display: none; }

/* ---------- Buy Now on cards ---------- */
.rk-ex-buy {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 18px;
	border: 2px solid var(--rk-accent);
	border-radius: var(--btn-brd-radius, var(--wd-brd-radius, 6px));
	background: transparent;
	color: var(--rk-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}
.rk-ex-buy:hover,
.rk-ex-buy:focus {
	background: var(--rk-accent);
	color: #fff;
	text-decoration: none;
}

/* ---------- WhatsApp order button ---------- */
.rk-ex-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 12px 22px;
	border-radius: var(--btn-brd-radius, var(--wd-brd-radius, 6px));
	background: #25d366;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
}
.rk-ex-wa:hover,
.rk-ex-wa:focus {
	background: #1ebe5b;
	color: #fff;
	text-decoration: none;
}

/* ---------- Store-style prices: sale price, old price, unit ---------- */
body.rk-store-price .wd-hover-parent .price,
body.rk-store-price .summary .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--text-align, center);
	gap: 2px 8px;
}
body.rk-store-price .summary .price { justify-content: flex-start; }

body.rk-store-price .wd-hover-parent .price ins,
body.rk-store-price .summary .price ins {
	order: -2;
	color: var(--rk-price-color);
	font-weight: 700;
	text-decoration: none;
}
body.rk-store-price .wd-hover-parent .price ins .amount,
body.rk-store-price .summary .price ins .amount { color: inherit; }

body.rk-store-price .wd-hover-parent .price del,
body.rk-store-price .summary .price del {
	order: -1;
	color: var(--color-gray-300, #9ca3af);
	font-weight: 400;
	opacity: 1;
}
/* A product that is not on sale: show its single price in the accent colour too. */
body.rk-store-price .wd-hover-parent .price > .amount,
body.rk-store-price .summary .price > .amount { color: var(--rk-price-color); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.rk-ex .rk-ex-chip, .rk-ex-buy, .rk-ex-wa { transition: none; }
}