/**
 * Each / Case unit chips — Wix-matched (measured 23 Sep 2026 with Playwright,
 * computed styles). Source values:
 * .superpowers/sdd/2026-09-23-unit-of-measure-each-case/task-8-wix-measurements.md
 *
 * Colours use the site's existing navy token (#242c3f == rgb(36,44,63)).
 * Wix's label/chip font is Avenir; Roboto is this project's licensed
 * substitute, matching the rest of the plugin's font stack.
 *
 * Enqueued only on product / shop / category / search pages
 * (adriatic_site_tweaks_units_assets() in adriatic-site-tweaks.php).
 */

/* ------------------------------------------------------------------ *
 * A. Product page — chip group replacing the native "Unit" <select>
 * ------------------------------------------------------------------ */

/* The native select stays in the DOM — WooCommerce's own variation-form JS
   still reads it — but is visually hidden once units.js has built the chip
   group for it. units.js adds this class; it is never applied by CSS alone,
   so a page with JS disabled still shows the working native dropdown. */
.single-product form.variations_form table.variations.adr-native-hidden {
	display: none;
}

/* Gap: price bottom -> chip group title top, measured at 23px. Set directly
   rather than relying on margin collapsing between .price and the form. */
.single-product .summary.adr-has-unit-chips > .price,
.single-product.adr-static-unit-chip .summary > .price {
	margin-bottom: 23px !important;
}

/* Single-unit product ("250g", "1L"): one chip printed by PHP with the same
   classes as the Each/Case group; outlined until clicked (see units.js). */

/* 16px below the chip group before whatever follows (the selected variation's
   price / stock line): on Wix the block after the option group carries
   margin-top:16px. Without this the price sat directly under the chips. */
.adr-unit-chips-group {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
}

.adr-unit-chips-title {
	margin: 0;
	padding: 0 0 8px;
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: rgb(36, 44, 63);
}

.adr-unit-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.adr-unit-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	margin: -1px;
	padding: 4px 8px;
	border: 1px solid rgba(36, 44, 63, 0.6);
	border-radius: 0;
	background: #fff;
	color: rgb(36, 44, 63);
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.adr-unit-chip:hover,
.adr-unit-chip:focus-visible {
	border-color: rgb(36, 44, 63);
}
.adr-unit-chip:focus-visible {
	outline: 2px solid rgb(36, 44, 63);
	outline-offset: 2px;
}
.adr-unit-chip.is-selected {
	background: rgb(36, 44, 63);
	border-color: rgb(36, 44, 63);
	color: #fff;
}

/* Out-of-stock chip (mirrors the native <option>'s disabled state - see
   syncAvailability() in units.js). The Wix reference does not show this
   state, so it was not measured; this is a plain "greyed out, not clickable"
   treatment rather than a matched value. */
.adr-unit-chip.is-unavailable,
.adr-unit-chip[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.adr-unit-chip.is-unavailable:hover,
.adr-unit-chip[disabled]:hover {
	border-color: rgba(36, 44, 63, 0.6);
}

/* "Case = N x <product>" hint, shown only when Case is the chosen chip.
   Positioned under the chip group by units.js. */
.adr-unit-hint {
	display: none;
	/* Pull up under the chips (group already has 16px below), keep 16px before
	   the price. */
	margin: -10px 0 16px;
	font-size: 13px;
	color: #555;
	font-family: "Avenir", "Roboto", Arial, sans-serif;
}

/* AJAX add-to-cart confirmation under the button (ajax-cart.js). */
.adr-cart-notice {
	margin: 12px 0 0;
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: rgb(36, 44, 63);
}
.adr-cart-notice a {
	text-decoration: underline;
	font-weight: 700;
}
.adr-cart-notice.is-error {
	color: #b3261e;
}

/* ------------------------------------------------------------------ *
 * B. Shop / category / search card — informational chips under the price
 * ------------------------------------------------------------------ */

.adr-card-unit-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 0;
}
.adr-card-unit-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	margin: -1px;
	padding: 4px 8px;
	border: 1px solid rgba(36, 44, 63, 0.6);
	border-radius: 0;
	background: #fff;
	color: rgb(36, 44, 63);
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 14px;
	line-height: 19.6px;
	font-weight: 400;
	box-sizing: border-box;
	text-align: center;
}

/* Size choice on a card (Weight 100g…1kg, Pack sizes 1…24): the chips are
   links to the product page with that size chosen; the smallest - the size
   the card is priced at ("From R66.55 · 100g") - is filled, like a selected
   chip on the product page. A single unit size ("180ml") is plain text. */
a.adr-card-unit-chip,
a.adr-card-unit-chip:visited {
	text-decoration: none;
	color: rgb(36, 44, 63);
	cursor: pointer;
}
a.adr-card-unit-chip:hover,
a.adr-card-unit-chip:focus-visible {
	border-color: rgb(36, 44, 63);
	color: rgb(36, 44, 63);
}
a.adr-card-unit-chip.is-selected,
a.adr-card-unit-chip.is-selected:visited,
a.adr-card-unit-chip.is-selected:hover {
	background: rgb(36, 44, 63);
	border-color: rgb(36, 44, 63);
	color: #fff;
}
.adr-card-size-choice {
	gap: 6px;
}
.adr-card-size-choice .adr-card-unit-chip {
	padding: 3px 6px;
	font-size: 13px;
	line-height: 18px;
}
.adr-card-unit-size {
	display: flex;
	align-items: center;
	padding: 3px 2px;
	color: rgb(36, 44, 63);
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
}
.adr-price-from,
.adr-price-size {
	font-size: 0.85em;
	font-weight: 400;
}

/* A one-value attribute or the unit size of a pack product on the product
   page: not a choice, so a small plain line ("Size: 500ml",
   "Preparation Style: Sliced") instead of a chip group. */
.adr-unit-line {
	margin: 0 0 12px;
	color: rgb(36, 44, 63);
	font-family: "Avenir", "Roboto", Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
}
.adr-unit-line-label {
	font-weight: 600;
}

/* Card size chips set the card price in place (units.js). A size that is out
   of stock stays clickable (to see its price) but reads as unavailable. */
.adr-card-size-choice a.adr-card-unit-chip.is-unavailable:not(.is-selected) {
	color: rgba(36, 44, 63, 0.45);
	border-style: dashed;
}
.price .adr-price-oos {
	display: inline-block;
	margin-left: 4px;
	color: #b32d2e;
	font-size: 12px;
	font-weight: 400;
}

/* Cards: "choose a size" nudge and the line under the chips (23 Oct 2026). */
.adr-card-size-choice.adr-need-size { animation: adr-nudge .4s ease; }
.adr-card-size-choice.adr-need-size .adr-card-unit-chip:not(.is-unavailable) { border-color: #c0392b; }
@keyframes adr-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.adr-card-note { margin: 4px 0 6px; font-size: 13px; line-height: 1.4; color: #c0392b; }
.adr-card-note.is-ok { color: #1e7e34; }
@media (prefers-reduced-motion: reduce) { .adr-card-size-choice.adr-need-size { animation: none; } }