/*
 * RMS Shop: shop styling (product lists, product pages, cart, checkout and account pages).
 * Agent Orange Design. Brand: navy #002B59, orange #FF6702, orange hover #E05A00.
 *
 * Contents
 * 1. Prices including VAT, with the excluding-VAT figure (from Code Snippet 300)
 * 2. Note for customers outside Gauteng (from Code Snippet 284)
 * 3. Cart and checkout: delivery and collection notes, terms box (from live snippets 310 and 313)
 */

/* 1. Prices ----------------------------------------------------------------------------------- */

/* "incl. VAT" never splits from the price before it. */
.woocommerce-price-suffix {
	white-space: nowrap;
}

/* The excluding-VAT line is hidden by default and shows only on the product page price and a chosen variation. */
.rms-price-excl {
	display: none;
}

/*
 * Product page price: the classic WooCommerce summary, the Elementor "Product Price" widget used by the
 * RMS Single Product template, and the price of a chosen variation (Tebogo, 16 Oct 2026).
 */
.summary .price,
.elementor-widget-woocommerce-product-price .price,
.woocommerce-variation-price .price {
	display: block;
}

.summary .rms-price-excl,
.elementor-widget-woocommerce-product-price .rms-price-excl,
.woocommerce-variation-price .rms-price-excl {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	font-weight: 400;
	white-space: normal;
}

/*
 * Product page (RMS Single Product template): grey #55606E, 16 px, semi-bold, as set for the chosen-variation
 * price in the template's Custom CSS (written for the old class name .aod-excl). The headline price of a
 * simple product (Safety Caps, USB Green Plastic Sheeting) uses the same style, so the two read alike.
 * The amount rule repeats WooCommerce's own classes on purpose: the template sets the chosen-variation amount to
 * 30 px orange with a six-class Elementor selector, and this must outrank it without !important.
 */
.single-product .elementor-widget-woocommerce-product-price .woocommerce-price-suffix.rms-price-excl,
.single-product .woocommerce-variation-price .woocommerce-price-suffix.rms-price-excl {
	margin-top: 4px;
	color: #55606e;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.single-product .elementor-widget-woocommerce-product-price .price .woocommerce-price-suffix.rms-price-excl .woocommerce-Price-amount.amount,
.single-product .woocommerce-variation-price .price .woocommerce-price-suffix.rms-price-excl .woocommerce-Price-amount.amount {
	display: inline;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Product cards: the price line may wrap between the price and "incl. VAT", never inside a number. */
.qodef-woo-product-price {
	flex-wrap: wrap;
	row-gap: 0;
}

.qodef-woo-product-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/*
 * Product cards never show the excluding-VAT figure (decision V5, 16 Oct 2026, confirmed by Paula on 24 Oct 2026):
 * every card reads "incl. VAT" only, and the figure stays on the product page. The Site Settings CSS shows every
 * price suffix on the Shop Online cards (.rms-cards) as its own line, so the second selector outranks that rule
 * without !important.
 */
ul.products li.product .price .woocommerce-price-suffix.rms-price-excl,
.rms-cards ul.products li.product .price .woocommerce-price-suffix.rms-price-excl {
	display: none;
}

/* 2. Note for customers outside Gauteng ------------------------------------------------------------ */

/*
 * Shop and category pages, cart and checkout (includes/cart-checkout.php). The navy band with the orange
 * "Find your nearest branch" button is still styled in the Site Settings custom CSS and moves here in the
 * stylesheet consolidation step. Of the light-grey panel that Code Snippet 284 printed, only the typeface
 * still took effect (the Site Settings band overrides everything else), so only the typeface moves here:
 * without it the band falls back to Roboto on the cart and checkout.
 */
.rms-gp-note {
	font-family: Lato, sans-serif;
}

/* 3. Cart and checkout ------------------------------------------------------------------------------ */

/*
 * Lines under each delivery or collection option. 15 px and darker than before (Brandon and Paula, 24 Oct 2026:
 * nothing in the shop under 15 px). Spacing by proximity: each option name sits 6 px above its own notes, notes are
 * 10 px apart, and 24 px separate one option from the next (it was 14, 20 and 6 px, which tied "Collect" to the
 * delivery text above it). The gap before the next option sits on the last note because the cart and checkout
 * Elementor styles fix the list items' own margins and padding with !important.
 */
html body .rms-ship-note {
	margin: 6px 0 0 !important;
	color: #3d4b5c;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

html body .rms-ship-note + .rms-ship-note {
	margin-top: 10px !important;
}

html body ul#shipping_method > li:not(:last-child) > .rms-ship-note:last-child {
	margin-bottom: 24px !important;
}

/* The one sentence a collecting customer must not miss: bold navy in the same typeface as the rest of the note. */
.rms-ship-note__key {
	color: #002b59;
	font-family: inherit;
	font-weight: 700;
}

/*
 * Each option is a flex row (radio, label) in the checkout widget. The notes wrap onto their own full-width
 * lines under the label, indented to line up with it (20 px radio plus the widget's 10 px gap).
 */
html body ul#shipping_method li {
	flex-wrap: wrap;
	row-gap: 0 !important;
}

#shipping_method li > label {
	flex: 1 1 0;
	min-width: 0;
}

#shipping_method li > .rms-ship-note {
	flex: 0 0 100%;
	box-sizing: border-box;
	padding-left: 30px;
}

/*
 * Only one option (collection, for an address outside Gauteng): WooCommerce prints no radio button, so the notes line
 * up with the option name, and the name keeps the colour it has when there is a choice.
 */
html body ul#shipping_method > li > input[type="hidden"] ~ .rms-ship-note {
	padding-left: 0;
}

html body ul#shipping_method > li > input[type="hidden"] + label,
html body ul#shipping_method > li > input[type="hidden"] + label * {
	color: #3a3a3a !important;
}

/* With collection chosen, the "Shipping to" line and the address calculator do not apply. */
tr.woocommerce-shipping-totals:has(#shipping_method input[value^="local_pickup"]:checked) .woocommerce-shipping-destination,
tr.woocommerce-shipping-totals:has(#shipping_method input[value^="local_pickup"]:checked) .woocommerce-shipping-calculator {
	display: none !important; /* WooCommerce shows these with its own scripts after every cart update. */
}

/*
 * Phones: the shipping row of the cart totals stacks to full width. The !important flags override WooCommerce's
 * small-screen stylesheet, which lays every totals row out as a label beside a value.
 */
@media (max-width: 767px) {
	body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals {
		display: block !important;
	}

	body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals > th,
	body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals > td {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		text-align: left !important;
	}

	body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals > td::before {
		display: none !important;
	}

	.cart_totals #shipping_method li,
	.cart_totals .woocommerce-shipping-destination,
	.cart_totals .woocommerce-shipping-calculator {
		text-align: left !important;
	}
}

/* Terms box at checkout: headings at a reading size, the box kept inside its column on phones. */
.woocommerce-terms-and-conditions {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.woocommerce-terms-and-conditions h1,
.woocommerce-terms-and-conditions h2,
.woocommerce-terms-and-conditions h3 {
	margin: 18px 0 8px;
	font-size: 18px;
	line-height: 1.35;
}

.woocommerce-terms-and-conditions ul,
.woocommerce-terms-and-conditions p {
	font-size: 15px;
}

/* 4. Buttons and the "View cart" link --------------------------------------------------------------- */

/*
 * Hover colour changes at once, without a fade. Orange to navy over 0.3 s passes through brown on the way, and a
 * phone that starts loading the next page in the middle of the fade shows the brown (Paula, iPhone, 24 Oct 2026).
 * The shadow and the arrow still move smoothly.
 */
html body.woocommerce .button,
html body.woocommerce-page .button,
html body.woocommerce-page #place_order,
html body.woocommerce-page .checkout-button,
html body .rms-cards ul.products li.product a.button,
html body.woocommerce .elementor-button,
html body.woocommerce-page .elementor-button,
html body.page-id-9319 .elementor-button {
	transition-property: box-shadow, transform !important;
}

/*
 * "View cart" link that WooCommerce adds under a card button after Add to cart: a plain text link in the site's
 * link style (orange, bold, as "Contact your nearest RMS branch"), under the button, without the theme's bag icon.
 */
html body .rms-cards ul.products li.product a.added_to_cart {
	order: 4;
	position: static !important;
	display: inline-block !important;
	align-self: flex-start;
	width: auto !important;
	height: auto !important;
	margin: 12px 24px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: Lato, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--rms-orange, #ff6702) !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

html body .rms-cards ul.products li.product a.added_to_cart:hover,
html body .rms-cards ul.products li.product a.added_to_cart:focus-visible {
	color: var(--rms-navy, #002b59) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

html body .rms-cards ul.products li.product a.added_to_cart .qodef-m-text {
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
}

html body .rms-cards ul.products li.product a.added_to_cart .qodef-m-button-icon-bag-holder,
html body .rms-cards ul.products li.product a.added_to_cart svg {
	display: none !important;
}

/* In the shop and category grids the link sits inside the button holder; it follows the button with the same gap. */
html body .rms-cards ul.products li.product .woocommerce-loop-product__buttons a.added_to_cart {
	display: block !important;
	margin: 12px 0 0 !important;
}

/* 5. Prices and checkout messages (1.0.2) ----------------------------------------------------------- */

/*
 * Rand: no gap between R and the amount (R1 058,00), as in the cart, checkout, emails and invoice. The theme puts a
 * 5 px right margin on every span inside .price, which pushed the amount away from the R on product cards and
 * product pages ("R 39,34").
 */
html body .price .woocommerce-Price-currencySymbol {
	margin-right: 0 !important;
}

/*
 * Checkout error list. The theme shows each link as inline-flex, which swallows the space between the field name
 * and the rest of the sentence ("First nameis a required field."). Shown as ordinary inline text instead, and the
 * terms line takes the same colour as the other lines rather than the theme's light blue.
 */
html body .woocommerce-error li a {
	display: inline !important;
}

html body .woocommerce-error li a[href="#terms"] {
	color: var(--rms-orange, #ff6702) !important;
}