/* ===========================================================================
   WooCommerce, dressed in the source's own rules.
   ---------------------------------------------------------------------------
   Woo's three stylesheets are dequeued (see inc/woocommerce.php), so this file
   is not a set of overrides — it is the whole visual layer for the shop, and
   every value below is taken from the source's css/style.css:
   .field, .field-row, .checkout, .product__*, .cart-btn, .note.

   Tokens only. The variables are the ones build-design-system.php emits.
   =========================================================================== */

/* --------------------------------------------------------------- shell --
   `div.woocommerce`, NOT `.woocommerce`.

   On a shop ARCHIVE, WooCommerce puts the `woocommerce` class on <body>. A bare
   `.woocommerce` selector therefore styled the whole document: the body took
   max-width 1200px and margin 0 120px, so the Theme Builder header and footer —
   which live outside any content wrapper — were inset by 120px on both sides and
   pushed down by the 96px of block padding. It read as "the footer is broken";
   it was every element on the page, on one selector. */
div.woocommerce {
	width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
	max-width: var(--av-wrap);
	margin-inline: auto;
	padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}
.woocommerce h2,
.woocommerce h3 { color: inherit; }
.woocommerce h2 { font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); margin: 0 0 1rem; }

/* ---------------------------------------------------------- the layout --

/* ---------------------------------------------------------- the layout --
   The source's `.checkout`: one column, splitting at 960px into 1.35fr / 1fr
   with the summary sticky. These are the source's own numbers — an earlier
   pass guessed 1.15fr/1fr at 860px, which put the form and the summary at
   visibly different proportions from the design. */
.woocommerce form.checkout {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 960px) {
	.woocommerce form.checkout { grid-template-columns: 1.35fr 1fr; }
	/* Woo emits three siblings — the details block, the review HEADING and the
	 * review table. Left to auto-placement the heading takes the top of column
	 * two and the table wraps onto a second row in column ONE, under the form. */
	.woocommerce form.checkout #customer_details     { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 1rem; }
	.woocommerce form.checkout #order_review         { grid-column: 2; grid-row: 2; position: sticky; top: 104px; }
}
.woocommerce form.checkout #customer_details { min-width: 0; }
.woocommerce form.checkout .col-1,
.woocommerce form.checkout .col-2 { width: auto; float: none; }

/* --------------------------------------------------------------- fields --
   The source's `.field` and `.field-row`, on Woo's `.form-row`. The pair
   splits at 620px, which is the source's breakpoint. */
.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-additional-fields__field-wrapper {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 620px) {
	.woocommerce .woocommerce-billing-fields__field-wrapper,
	.woocommerce .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.woocommerce .form-row.av-col-half { grid-column: span 1; }
}
.woocommerce .form-row { margin: 0 0 1.5rem; grid-column: 1 / -1; min-width: 0; }
.woocommerce .form-row label {
	display: block;
	font-weight: 700;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	margin-bottom: 0.35rem;
}
.woocommerce .form-row .required { color: var(--av-accent); text-decoration: none; }
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select {
	width: 100%;
	min-height: 48px;
	padding: 0.65em 0.85em;
	border: 1px solid var(--av-line);
	border-radius: 10px;
	background: var(--av-bg);
	color: var(--av-ink);
	font: inherit;
}
.woocommerce .form-row textarea { min-height: 7rem; resize: vertical; }
.woocommerce .form-row input.input-text:focus-visible,
.woocommerce .form-row textarea:focus-visible,
.woocommerce .form-row select:focus-visible {
	outline: 3px solid var(--av-accent);
	outline-offset: 2px;
	border-color: var(--av-accent);
}
.woocommerce .form-row .description {
	margin: 0.35rem 0 0;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	color: var(--av-ink-muted);
}
.woocommerce .form-row.woocommerce-invalid input.input-text,
.woocommerce .form-row.woocommerce-invalid textarea { border-color: var(--av-danger); }
/* no "valid" state: the source only marks errors, and a green edge on an
 * untouched optional field (Telefon) read as a highlight */

/* ------------------------------------------- neutralise the theme reset --
   THIS is what made the cart look like a spreadsheet, and it is not Woo's —
   Woo's CSS is fully dequeued. hello-elementor's reset.css styles every <table>
   on the page:

       table            font-size:.9em; margin-block-end:15px
       table td, th     border:1px solid hsla(0,0%,50%,.502); padding:15px
       tbody tr:nth-child(odd) > td   background: hsla(0,0%,50%,.071)   <- zebra
       tbody tr:hover > td            background: hsla(0,0%,50%,.102)   <- the grey hover
       tbody + tbody    border-block-start:2px solid …
       th               font-weight:700

   Those are element selectors (0-0-2 / 0-1-3), so most of what follows would
   out-rank them — but only for properties it happens to set. The zebra and the
   hover were never named at all, so they came through untouched. Everything is
   zeroed here in one place, before the design is applied, rather than being
   chased property by property further down. */
.woocommerce table,
.woocommerce table td,
.woocommerce table th,
.woocommerce table tbody,
.woocommerce table tfoot,
.woocommerce table tr {
	font-size: inherit;
	line-height: inherit;
	vertical-align: baseline;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}
.woocommerce table tbody > tr:nth-child(odd) > td,
.woocommerce table tbody > tr:nth-child(odd) > th,
.woocommerce table tbody tr:hover > td,
.woocommerce table tbody tr:hover > th { background: none; }
.woocommerce table tbody + tbody { border: 0; }
.woocommerce table th { font-weight: inherit; }

/* ------------------------------------------------------------- summary --
   The source's `.summary` card, used for BOTH the checkout's order review and
   the cart totals. Rows are flex with a hairline between them; the total is
   pulled out by a 2px ink rule, which is the one place the design uses a
   heavy border. No table chrome anywhere — Woo's markup is a <table>, so the
   table parts are re-declared as blocks and the cells carry the layout. */
.woocommerce #order_review,
.woocommerce .cart_totals {
	padding: 1.5rem;
	border: 1px solid var(--av-line);
	border-radius: 16px;
	background: var(--av-surface);
}
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
	margin: 0 0 1rem;
}
.woocommerce #order_review table.shop_table,
.woocommerce .cart_totals table.shop_table {
	display: block;
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.woocommerce #order_review table.shop_table thead { display: none; }
.woocommerce #order_review table.shop_table tbody,
.woocommerce #order_review table.shop_table tfoot,
.woocommerce .cart_totals table.shop_table tbody,
.woocommerce .cart_totals table.shop_table tfoot { display: block; }
.woocommerce #order_review table.shop_table tr,
.woocommerce .cart_totals table.shop_table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.4rem;
}
.woocommerce #order_review table.shop_table tbody tr + tr,
.woocommerce #order_review table.shop_table tfoot tr,
.woocommerce .cart_totals table.shop_table tr + tr { border-top: 1px solid var(--av-line); }
.woocommerce #order_review table.shop_table th,
.woocommerce #order_review table.shop_table td,
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	display: block;
	border: 0;
	padding: 0;
	text-align: left;
	font-weight: 400;
}
.woocommerce #order_review table.shop_table td:last-child,
.woocommerce .cart_totals table.shop_table td:last-child { text-align: right; white-space: nowrap; }
.woocommerce #order_review table.shop_table th,
.woocommerce .cart_totals table.shop_table th { font-weight: 700; }
/* the total: heavier rule, bigger type, accent figure */
.woocommerce #order_review table.shop_table tfoot .order-total,
.woocommerce .cart_totals table.shop_table .order-total {
	border-top: 2px solid var(--av-ink);
	margin-top: 0.5rem;
	padding-top: 1rem;
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
}
.woocommerce #order_review table.shop_table tfoot .order-total th,
.woocommerce .cart_totals table.shop_table .order-total th { font-weight: 800; }
.woocommerce #order_review table.shop_table tfoot .order-total td,
.woocommerce .cart_totals table.shop_table .order-total td {
	font-weight: 800;
	color: var(--av-accent);
}
/* the VAT/shipping line under the total, added by inc/woocommerce.php */
.woocommerce .av-order-note {
	border-top: 0 !important;
	display: block !important;
	padding-top: 1rem;
}
.woocommerce .av-order-note td {
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	color: var(--av-ink-muted);
	text-align: left !important;
	white-space: normal !important;
}
.woocommerce .product-quantity { color: var(--av-ink-muted); }

/* ------------------------------------------------------------ cart lines --
   The source's `.cart-line`: a flex row per item with a hairline between,
   never a bordered grid. Woo's cart is a <table>, so the table parts are
   re-declared as blocks — the row becomes the flex container and the cells
   become its children. The header row goes away entirely; with the item's own
   labels present it was only ever there to prop up the table layout. */
.woocommerce .woocommerce-cart-form { margin: 0 0 2rem; }
.woocommerce table.shop_table.cart {
	display: block;
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}
.woocommerce table.shop_table.cart thead { display: none; }
.woocommerce table.shop_table.cart tbody { display: block; }
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 1rem;
	align-items: center;
	padding-block: 1.5rem;
	border: 0;
}
.woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item + tr.woocommerce-cart-form__cart-item {
	border-top: 1px solid var(--av-line);
}
.woocommerce table.shop_table.cart td { display: block; border: 0; padding: 0; }
/* the remove "×" rides on the thumbnail rather than taking a column of its own */
.woocommerce table.shop_table.cart td.product-remove { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; z-index: 2; }
.woocommerce table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1; }
.woocommerce table.shop_table.cart td.product-name { grid-column: 2; grid-row: 1; }
.woocommerce table.shop_table.cart td.product-price { display: none; }  /* the line total says it */
.woocommerce table.shop_table.cart td.product-quantity { grid-column: 2; grid-row: 2; }
.woocommerce table.shop_table.cart td.product-subtotal { grid-column: 3; grid-row: 1 / span 2; text-align: right; align-self: center; }
.woocommerce table.shop_table.cart td.product-thumbnail img {
	width: 64px; height: 64px; object-fit: cover;
	border-radius: 10px; display: block; background: var(--av-surface);
}
.woocommerce table.shop_table.cart td.product-name a {
	font-size: clamp(1rem, 0.96rem + 0.20vw, 1.11rem);
	font-weight: 700;
	color: var(--av-ink);
	text-decoration: none;
}
.woocommerce table.shop_table.cart td.product-name a:hover { color: var(--av-accent); }
.woocommerce table.shop_table.cart td.product-subtotal {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.woocommerce table.shop_table.cart td.product-remove a {
	display: grid; place-content: center;
	width: 24px; height: 24px;
	margin: -8px 0 0 -8px;
	border-radius: 999px;
	background: var(--av-bg);
	border: 1px solid var(--av-line);
	color: var(--av-ink-muted);
	text-decoration: none;
	font-size: 0.85rem; line-height: 1;
}
.woocommerce table.shop_table.cart td.product-remove a:hover { color: var(--av-danger); border-color: var(--av-danger); }
/* the source's .qty pill, on Woo's number input */
.woocommerce .quantity input.qty {
	width: 5.5rem; min-height: 44px;
	padding: 0.4em 0.75em;
	border: 1px solid var(--av-line);
	border-radius: 999px;
	background: var(--av-bg);
	color: var(--av-ink);
	font: inherit; font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.woocommerce .quantity input.qty:focus-visible { outline: 3px solid var(--av-accent); outline-offset: 2px; }
/* the actions row: update sits quietly, the coupon field is switched off */
.woocommerce table.shop_table.cart tr:not(.woocommerce-cart-form__cart-item) { display: block; border: 0; }
.woocommerce table.shop_table.cart td.actions {
	display: flex; justify-content: flex-end;
	padding-top: 1.5rem;
	border-top: 1px solid var(--av-line);
}
/* "Posodobi košarico" is a correction, not the way forward — it stays quiet
 * until the quantity actually changes, which is when Woo enables it. */
.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	min-height: 44px;
}
/* The cart page is the checkout's layout, not a stack: items on the left,
 * summary beside them. Woo renders the form and the collaterals as siblings of
 * `div.woocommerce`, so the grid goes on that wrapper. Left as a stack the
 * summary sat under the single cart line with a screen-height of empty space
 * above it. */
body.woocommerce-cart div.woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
@media (min-width: 960px) {
	body.woocommerce-cart div.woocommerce { grid-template-columns: 1.35fr 1fr; }
	body.woocommerce-cart div.woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce .cart_totals { position: sticky; top: 104px; }
}
.woocommerce .cart-collaterals { margin: 0; width: 100%; min-width: 0; }
.woocommerce .woocommerce-cart-form { min-width: 0; }
.woocommerce .wc-proceed-to-checkout { margin-top: 1.5rem; }
.woocommerce .wc-proceed-to-checkout .button { width: 100%; }
.woocommerce .cart-empty { font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); font-weight: 700; }
.woocommerce .return-to-shop { margin-top: 1.5rem; }

/* ------------------------------------------------------------- payment --
   one method, so it reads as a statement rather than a choice. */
.woocommerce #payment { margin-top: 1.5rem; }
.woocommerce #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; }
.woocommerce #payment ul.payment_methods li { margin: 0; }
.woocommerce #payment ul.payment_methods label { font-weight: 700; display: inline; }
.woocommerce #payment .payment_box {
	margin: 0.5rem 0 0;
	padding: 1.5rem;
	background: var(--av-accent-wash);
	border-radius: 16px;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
}
.woocommerce #payment .payment_box p { margin: 0; max-width: none; }
.woocommerce .woocommerce-terms-and-conditions-wrapper { margin: 1.5rem 0; }
/* `.woocommerce .form-row label` above is 0-2-1 (it names an element), so this
 * had to match it or the checkbox row stayed `display: block` and the tick sat
 * on its own line above the text. */
.woocommerce .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-weight: 400;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	cursor: pointer;
}
/* The native control, sized to the design rather than the browser's 13px, and
 * tinted with the accent. `accent-color` keeps the real checkbox — and with it
 * the keyboard behaviour and the screen-reader role — instead of hiding it
 * behind a styled pseudo-element. */
.woocommerce .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	appearance: auto;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--av-accent);
	cursor: pointer;
}

/* -------------------------------------------------------------- buttons --
   the source's .btn--primary pill, since Woo's button is dequeued with its CSS */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.55em 1.3em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--av-accent);
	color: var(--av-on-accent);
	font: inherit;
	font-weight: 700;
	font-size: 0.94rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover,
.woocommerce #place_order:focus-visible { background: var(--av-ink); color: var(--av-bg); }
.woocommerce #place_order { width: 100%; }
/* the secondary skin: ghost, as on the rest of the site */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"] {
	background: transparent;
	color: var(--av-ink);
	border-color: currentColor;
}
.woocommerce button[name="update_cart"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------- notices --
/* --------------------------------------------------------------- notices --
   the source's .note: a tinted panel, not a browser alert. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--av-accent-wash);
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	list-style: none;
}
.woocommerce .woocommerce-error {
	background: var(--av-danger-wash);
	color: var(--av-danger-ink);
	border: 1px solid var(--av-danger-line);
	flex-direction: column;
	align-items: flex-start;
}
.woocommerce .woocommerce-error li { margin: 0; }
.woocommerce .woocommerce-message .button { margin-inline-start: auto; }

/* ---------------------------------------------------- order received ----- */
/* One grid for the whole page, so Woo's sibling sections can sit side by side
   without a wrapper: the overview, the UPN slip and "Kaj sledi" span the row;
   the order and the billing address are two cards next to each other. */
.woocommerce .woocommerce-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 900px) {
	.woocommerce .woocommerce-order { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.woocommerce .woocommerce-order > * { grid-column: 1 / -1; }
	.woocommerce .woocommerce-order > .woocommerce-order-details { grid-column: 1; }
	.woocommerce .woocommerce-order > .woocommerce-customer-details { grid-column: 2; }
}
/* the thank-you sentence is emptied (the hero says it). Its <p> still holds
   whitespace, so :empty misses it and it took a grid row plus two gaps (~64px). */
.woocommerce .woocommerce-order > p.woocommerce-thankyou-order-received { display: none; }

/* the order at a glance: full width, one row of five on desktop */
/* flex, not a grid of equal columns: each value keeps its natural width, so an
   e-mail address or "Nakazilo na račun društva" wraps as a whole item instead
   of breaking mid-word; on a wide screen the five spread across one row */
.woocommerce ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0;
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	background: var(--av-gold-wash);
	border-radius: 16px;
	list-style: none;
}
.woocommerce ul.woocommerce-order-overview::before,
.woocommerce ul.woocommerce-order-overview::after { display: none; }
.woocommerce ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	font-weight: 700;
	text-transform: none;
	color: var(--av-ink-muted);
}
.woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
	line-height: 1.3;
	color: var(--av-ink);
	overflow-wrap: break-word;
	font-variant-numeric: tabular-nums;
}
.woocommerce ul.woocommerce-order-overview .total strong { color: var(--av-accent); }
@media (min-width: 1100px) {
	.woocommerce ul.woocommerce-order-overview { justify-content: space-between; }
}
@media (max-width: 599px) {
	.woocommerce ul.woocommerce-order-overview { flex-direction: column; gap: 1rem; }
}
.woocommerce .woocommerce-order-details table.shop_table tfoot th { white-space: nowrap; }

/* order details + billing address: the checkout's summary card */
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--av-line);
	border-radius: 16px;
	background: var(--av-surface);
}
.woocommerce .woocommerce-order-details table.shop_table {
	display: block; width: 100%; max-width: none; margin: 0;
	border: 0; border-collapse: collapse; font-variant-numeric: tabular-nums;
}
.woocommerce .woocommerce-order-details table.shop_table thead { display: none; }
.woocommerce .woocommerce-order-details table.shop_table tbody,
.woocommerce .woocommerce-order-details table.shop_table tfoot { display: block; }
.woocommerce .woocommerce-order-details table.shop_table tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding-block: 0.5rem;
}
.woocommerce .woocommerce-order-details table.shop_table tfoot tr { border-top: 1px solid var(--av-line); }
.woocommerce .woocommerce-order-details table.shop_table th,
.woocommerce .woocommerce-order-details table.shop_table td {
	display: block; padding: 0; border: 0; background: none; text-align: left; font-weight: 400;
}
.woocommerce .woocommerce-order-details table.shop_table td:last-child { text-align: right; }
.woocommerce .woocommerce-order-details table.shop_table tfoot th { font-weight: 700; }
/* the paid amount is the order's total — Woo gives that row no class, it is the
   one before "Način plačila" */
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:nth-last-child(2) {
	border-top: 2px solid var(--av-ink);
	margin-top: 0.25rem;
	padding-top: 0.75rem;
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
}
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:nth-last-child(2) th,
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:nth-last-child(2) td { font-weight: 800; }
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:nth-last-child(2) td { color: var(--av-accent); }
.woocommerce .woocommerce-customer-details address {
	margin: 0; padding: 0; border: 0;
	font-size: inherit; line-height: 1.65; color: var(--av-ink);
}
.woocommerce .woocommerce-customer-details address p {
	margin: 0.75rem 0 0;
	color: var(--av-ink-muted);
	overflow-wrap: anywhere;
}
.woocommerce .woocommerce-customer-details address p::before { display: none; }

/* the UPN plugin's block: the member's next action, so it sits right under the
   overview as one panel — transfer details, then the slip at full width */
.woocommerce .kw-upn-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem 2.5rem;
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	border: 1px solid var(--av-line);
	border-radius: 16px;
	background: var(--av-surface);
}
.woocommerce .kw-upn-block h2 {
	margin: 0;
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
}
.woocommerce .kw-upn-block__instructions p { margin: 0; color: var(--av-ink-muted); max-width: 62ch; }
.woocommerce .kw-upn-block__details table.shop_table {
	display: block; width: 100%; margin: 0; border: 0;
	font-variant-numeric: tabular-nums;
}
.woocommerce .kw-upn-block__details tbody { display: block; }
.woocommerce .kw-upn-block__details tr {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
	gap: 0.25rem 1rem;
	padding-block: 0.5rem;
	border-top: 1px solid var(--av-line);
}
.woocommerce .kw-upn-block__details tr:first-child { border-top: 0; padding-top: 0; }
.woocommerce .kw-upn-block__details th,
.woocommerce .kw-upn-block__details td {
	padding: 0; border: 0; background: none; text-align: left;
}
.woocommerce .kw-upn-block__details th {
	font-weight: 700;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	color: var(--av-ink-muted);
}
.woocommerce .kw-upn-block__details td { font-weight: 700; color: var(--av-ink); overflow-wrap: anywhere; }
.woocommerce .kw-upn-block__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--av-line);
}
/* the slip always gets the panel's full width, so every field on it is legible;
   on a phone it keeps a readable minimum and scrolls sideways instead of shrinking */
@media (max-width: 699px) {
	.woocommerce .kw-upn-block__image { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.woocommerce .kw-upn-block__image img { width: 680px; max-width: none; }
}
@media (max-width: 599px) {
	.woocommerce .kw-upn-block__details tr { grid-template-columns: minmax(0, 1fr); }
}

/* the "what happens next" steps appended by inc/woocommerce.php — the numbered
   disc is the same counter the join page uses, so the two pages read as one. */
.av-next-steps { margin-top: 0; }
.av-next-steps .av-steps { counter-reset: step; list-style: none; margin: 1.5rem 0; padding: 0;
	display: flex; flex-direction: column; gap: 1.5rem; }
.av-next-steps .av-steps__item { position: relative; counter-increment: step; padding-inline-start: 3rem; }
.av-next-steps .av-steps__item::before {
	content: counter(step);
	position: absolute;
	inset-inline-start: 0;
	top: -0.1em;
	display: grid;
	place-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--av-accent);
	color: var(--av-on-accent);
	font-weight: 800;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	font-variant-numeric: tabular-nums;
}
.av-next-steps .av-steps__title { display: block; font-weight: 700; }
.av-next-steps .av-steps__text { margin: 0.2rem 0 0;
	color: var(--av-ink-muted); font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.av-next-steps .av-field-hint { margin-top: 1.5rem;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); color: var(--av-ink-muted); }

/* ------------------------------------------------------------- product --
/* --------------------------------------------------------- loading state --
   Woo's blockUI overlay, which otherwise arrives unstyled once its CSS is gone.
   Async feedback within 100ms is the whole point of it, so it stays. */
.blockUI.blockOverlay { position: relative; }
.blockUI.blockOverlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--av-veil);
	backdrop-filter: blur(1px);
}
.woocommerce .processing { opacity: 0.65; }

/* -------------------------------------------------------- screen reader -- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ buy form --
/* ------------------------------------------------------------ buy form --
   The source's .product__buy, on the shortcode that replaces it. */
.av-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.av-buy__label { font-weight: 700; font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.av-buy__qty {
	width: 5rem; min-height: 44px; padding: 0.5em 0.75em;
	border: 1px solid var(--av-line); border-radius: 10px;
	background: var(--av-bg); color: var(--av-ink);
	font: inherit; font-variant-numeric: tabular-nums;
}
.av-buy__qty:focus-visible { outline: 3px solid var(--av-accent); outline-offset: 2px; border-color: var(--av-accent); }
.av-buy__submit {
	display: inline-flex; align-items: center; gap: 0.5em;
	min-height: 44px; padding: 0.55em 1.3em;
	border: 2px solid transparent; border-radius: 999px;
	background: var(--av-accent); color: var(--av-on-accent);
	font: inherit; font-weight: 700; font-size: 0.94rem; line-height: 1.2;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}
.av-buy__submit:hover, .av-buy__submit:focus-visible { background: var(--av-ink); color: var(--av-bg); }

/* ---------------------------------------------------------- shop hero ----
/* ---------------------------------------------------------- shop hero ----
   The shortcode pages get the same band as every ported page. It is rendered
   by inc/woocommerce.php rather than being an Elementor element, so it needs
   the handful of rules the global classes would otherwise supply — the classes
   themselves only emit on pages that use atomic elements. */
.av-shop-hero {
	width: 100%;
	background: var(--av-surface);
	padding-block: calc(clamp(3.5rem, 2rem + 6vw, 6rem) * 0.75) calc(clamp(3.5rem, 2rem + 6vw, 6rem) * 0.6);
	border-bottom: 1px solid var(--av-line);
}
.av-shop-hero .av-container {
	width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
	max-width: var(--av-wrap);
	margin-inline: auto;
}
.av-shop-hero .av-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
	list-style: none; margin: 0 0 1rem; padding: 0;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
}
.av-shop-hero .av-crumbs__item { display: flex; align-items: center; gap: 0.5em; color: var(--av-ink-muted); }
.av-shop-hero .av-crumbs__item + .av-crumbs__item::before {
	content: ""; width: 5px; height: 5px; flex: 0 0 auto; align-self: center;
	border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
	transform: rotate(45deg); opacity: 0.65;
}
.av-shop-hero .av-crumbs__link {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--av-ink-muted); font-weight: 600;
}
.av-shop-hero .av-crumbs__link:hover { color: var(--av-accent); }
.av-shop-hero .av-crumbs__current {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--av-ink); font-weight: 700;
}
.av-shop-hero .av-eyebrow {
	font-family: "Caveat", cursive; font-weight: 600; line-height: 1;
	font-size: clamp(1.44rem, 1.32rem + 0.58vw, 1.80rem);
	color: var(--av-accent); margin: 0 0 0.5rem;
}
.av-shop-hero .av-page-hero__title {
	font-size: clamp(2.07rem, 1.78rem + 1.44vw, 2.94rem);
	max-width: 18ch; margin: 0 0 1rem; color: var(--av-ink);
}
.av-shop-hero .av-page-hero__lede {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
	color: var(--av-ink-muted); max-width: 56ch; margin: 1rem 0 0;
}

/* ------------------------------------------------- bank details & tables --
/* ------------------------------------------------- bank details & tables --
   Woo prints the transfer details as an <h2>, an <h3> per account and a <ul>.
   Treated as the source's .note panel, so the number the member has to copy
   sits in a block of its own rather than in a run of body text. */
.woocommerce .woocommerce-bacs-bank-details {
	margin: 0 0 2rem; padding: 1.5rem;
	background: var(--av-gold-wash); border-radius: 16px;
}
.woocommerce .woocommerce-bacs-bank-details h2,
.woocommerce .woocommerce-bacs-bank-details h3 {
	font-size: clamp(1rem, 0.96rem + 0.20vw, 1.11rem);
	margin: 0 0 0.5rem;
}
.woocommerce .woocommerce-bacs-bank-details ul.wc-bacs-bank-details {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0.35rem;
	font-variant-numeric: tabular-nums;
}
.woocommerce .woocommerce-bacs-bank-details li { font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.woocommerce .woocommerce-bacs-bank-details li strong { font-weight: 700; }

.woocommerce .woocommerce-order-details h2,
.woocommerce .woocommerce-customer-details h2,
.woocommerce .woocommerce-column__title {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); margin: 0 0 1rem;
}
.woocommerce address {
	font-style: normal;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	color: var(--av-ink-muted);
}

/* ------------------------------------------------------- cart button ----
/* ------------------------------------------------------- cart button ----
   The source's .cart-btn: a 44px circle on the header's line, with the count
   as a badge. */
.av-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	flex: 0 0 auto;
	border: 1px solid var(--av-line);
	border-radius: 999px;
	background: var(--av-bg);
	color: var(--av-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 160ms ease-out, color 160ms ease-out;
}
.av-cart-btn:hover, .av-cart-btn:focus-visible { border-color: var(--av-accent-tint); color: var(--av-accent); }
.av-cart-btn__count {
	position: absolute; top: -4px; inset-inline-end: -4px;
	min-width: 20px; height: 20px; padding: 0 5px;
	display: grid; place-content: center;
	background: var(--av-accent); color: var(--av-on-accent);
	border: 2px solid var(--av-bg); border-radius: 999px;
	font-size: 0.6875rem; font-weight: 800; line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* the shortcode widget wrapper would otherwise take the whole flex row */
.elementor .av-header__inner .elementor-widget-shortcode { width: fit-content; }

/* --------------------------------------------------------- focus rings --
/* --------------------------------------------------------- focus rings --
   Woo moves focus to the notice after an add-to-cart so a screen reader
   announces it. That is right, and it means the notice is a focusable element
   whose default ring is the browser's blue — the one colour not in this
   palette. The ring stays (removing it would cost the keyboard user their
   position); it just wears the site's accent. */
.woocommerce :focus-visible,
.av-cart-btn:focus-visible,
.av-buy__submit:focus-visible {
	outline: 3px solid var(--av-accent);
	outline-offset: 2px;
}
.woocommerce .woocommerce-message:focus,
.woocommerce .woocommerce-info:focus,
.woocommerce .woocommerce-error:focus { outline: 3px solid var(--av-accent); outline-offset: 2px; }

/* The cart table's own cells already carry the rhythm; the outer table needs a
   little inline breathing room so the right-aligned column is not flush to the
   container edge. */
.woocommerce table.cart { border-collapse: collapse; width: 100%; }
.woocommerce table.cart th:last-child,
.woocommerce table.cart td:last-child { padding-inline-end: 0.5rem; }
.woocommerce table.cart th:first-child,
.woocommerce table.cart td:first-child { padding-inline-start: 0.5rem; }
.woocommerce table.cart .product-thumbnail { width: 80px; }

/* ----------------------------------------------------- catalogue cards --
/* ----------------------------------------------------- catalogue cards --
   NOTE the bare `.woocommerce` here, against `div.woocommerce` for the box rule
   above. These are DESCENDANT selectors, so they have to match in both contexts:
   on a shortcode page the ancestor is `div.woocommerce`, on the shop ARCHIVE it
   is `body.woocommerce` and no such div exists at all. Scoping these to `div`
   silently switched every card style off on /trgovina/ and left the products as
   a bulleted list.

   The archive at /trgovina/. Woo's loop markup wears the site's own card: a
   bordered white panel with a 4:3 image, matching .av-card on the homepage so
   the shop does not read as a different site. */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	/* auto-FILL, not auto-fit. With one product in the catalogue auto-fit
	 * collapses the empty tracks and the single card stretches across the whole
	 * 1200px column — a membership card the size of a billboard. auto-fill keeps
	 * the empty tracks, so one card is the same size as four would be. */
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--av-line);
	border-radius: 16px;
	background: var(--av-bg);
	transition: border-color 180ms ease-out;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within { border-color: var(--av-accent-tint); }
.woocommerce ul.products li.product > a {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--av-surface);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.022em;
	margin: 0;
	padding: 1.5rem 1.5rem 0.5rem;
	color: var(--av-ink);
}
.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1.5rem;
	margin: 0 0 1rem;
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
	font-weight: 800;
	color: var(--av-accent);
	font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .button {
	margin: auto 1.5rem 1.5rem;   /* auto pins the action to the card's base */
	width: calc(100% - 3rem);
}
/* Woo's "read more"/"add to cart" on a loop card is a link, not the primary
   action here — the card itself goes to the ported page. */
.woocommerce ul.products li.product .added_to_cart { display: none; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none; }


/* ------------------------------------------------- archive content box --
   The shortcode pages get their column from `div.woocommerce`. The archive has
   no such wrapper — Woo renders straight into the theme's <main> — so the
   column is applied there instead. Without it the product grid ran the full
   viewport width while every other page sat in the 1200px measure. */
body.woocommerce main.site-main,
body.woocommerce-page main.site-main {
	width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
	max-width: var(--av-wrap);
	margin-inline: auto;
	padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

/* Woo prints the notices wrapper whether or not there are notices. As a grid
   child it still claims a row and its gap, which put ~50px of nothing between
   the page hero and the first cart line. */
.woocommerce-notices-wrapper:empty { display: none; }

/* --------------------------------------------- checkout section headings --
   The source gives "Podatki člana", "Način plačila" and "Vaše naročilo" the
   h2 scale (--step-4). Woo emits them as h3s from core templates, so they
   inherit the h3 scale (--step-2) and read a size too small. Restate the
   source's h2 size here rather than fork two templates to change one tag.
   Kept in sync with the kit's h2 by hand — there is no CSS way to say
   "whatever h2 is". */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout .woocommerce .av-checkout__heading,
.woocommerce-checkout .woocommerce #order_review_heading {
	font-size: clamp(2.07rem, 1.78rem + 1.44vw, 2.94rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--av-ink);
	margin: 0 0 1rem;
}

/* The bank-transfer details block is a nested heading INSIDE the payment box,
   not a section heading — keep it at its own smaller scale. */
.woocommerce-checkout .woocommerce .woocommerce-bacs-bank-details h3 {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
}

/* ===========================================================================
   CHECKOUT COMPOSITION (2026-09-29, JOBS J13)
   Pairs with the "checkout composition" hooks in inc/woocommerce.php: payment,
   terms and the submit button now live in the FORM column, and the summary card
   holds only the order, as in the source's blagajna.html.
   =========================================================================== */

/* Section headings are --step-1 in the source. It sets that INLINE
 * (`<h2 style="font-size:var(--step-1)">`), which the port missed and read the
 * h2 scale (--step-4) off the stylesheet instead: ~40px headings where the
 * original has ~22px. */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout .woocommerce .av-checkout__heading,
.woocommerce-checkout .woocommerce .av-summary__heading {
	font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}
/* "Način plačila" sits 2.5rem under the notes field (source inline style). */
.woocommerce-checkout .woocommerce .av-checkout__heading { margin-top: 2.5rem; }
/* Woo's own "Dodatne informacije" heading over the notes field and its
 * out-of-card "Vaše naročilo" heading are not in the source. */
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading { display: none; }

/* Grid: form column (details, then payment) and the summary spanning both rows.
 * No row gap — the two form parts are one form in the source, spaced only by
 * the heading's own 2.5rem; on one column the summary is pushed down by the
 * source's own gap instead. */
.woocommerce form.checkout { row-gap: 0; }
.woocommerce form.checkout #order_review { margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) {
	/* "Način plačila" is printed as its own sibling before #payment, so it is a
	 * grid item too and needs a row, or auto-placement drops it under the button */
	.woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1; }
	.woocommerce form.checkout > .av-checkout__heading { grid-column: 1; grid-row: 2; }
	.woocommerce form.checkout .woocommerce-checkout-payment { grid-column: 1; grid-row: 3; }
	.woocommerce form.checkout #order_review { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: start; }
}
.woocommerce form.checkout .woocommerce-checkout-payment { min-width: 0; margin-top: 0; }

/* Payment methods as the source's `.pay` radio cards: bordered label, radio
 * on the left, the method name bold, its description muted and small under it
 * — not a separate tinted box. */
.woocommerce #payment ul.payment_methods { margin: 0 0 1.5rem; }
.woocommerce #payment ul.payment_methods li + li { margin-top: 0.5rem; }
.woocommerce #payment ul.payment_methods li.wc_payment_method {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	padding: 1rem 1.5rem;
	border: 1px solid var(--av-line);
	border-radius: 10px;
}
.woocommerce #payment ul.payment_methods li.wc_payment_method:hover { border-color: var(--av-accent-tint); }
.woocommerce #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	/* Woo inlines display:none on the radio when only one gateway is active; the
	 * source always shows the (checked) radio, which is what makes it read as a
	 * choice card rather than a caption */
	display: block !important;
	grid-row: 1 / span 2;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.25rem 0 0;
	accent-color: var(--av-accent);
	appearance: auto;
}
.woocommerce #payment ul.payment_methods li.wc_payment_method > label { display: block; font-weight: 700; font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); cursor: pointer; }
.woocommerce #payment ul.payment_methods li.wc_payment_method > .payment_box {
	grid-column: 2;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--av-ink-muted);
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
}
.woocommerce #payment ul.payment_methods li.wc_payment_method > .payment_box::before { display: none; }

/* Terms tick: the asterisk follows the sentence, as in the source, instead of
 * being pushed to the far edge of the row. */
.woocommerce .woocommerce-terms-and-conditions-wrapper { margin: 0 0 1rem; }
.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox { justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
/* the tick stays beside the sentence at every width (it wrapped above it on
 * phones), and the text box shrinks to its content so the * follows it */
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text { flex: 0 1 auto; }
.woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.15rem; }
.woocommerce .woocommerce-terms-and-conditions-wrapper abbr.required,
.woocommerce .woocommerce-terms-and-conditions-wrapper .required { margin-left: -0.5rem; text-decoration: none; }

/* The summary: "Skupaj" regular and the figure 800 in INK (the source's
 * `.summary__total`), not both bold with an accent figure. The subtotal row
 * duplicated the only line's price. */
.woocommerce #order_review table.shop_table tfoot .cart-subtotal { display: none; }
.woocommerce #order_review table.shop_table tfoot .order-total th { font-weight: 400; }
.woocommerce #order_review table.shop_table tfoot .order-total td { color: var(--av-ink); }
.woocommerce #order_review table.shop_table tfoot tr.order-total { border-top: 2px solid var(--av-ink); }

/* "Nazaj na članarino": the source's ghost pill, 1rem under the VAT note. */
.woocommerce .av-summary__back { margin: 1rem 0 0; }
.woocommerce .av-shop-btn--ghost {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.55em 1.3em;
	border: 2px solid currentColor;
	border-radius: 999px;
	color: var(--av-ink);
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.woocommerce .av-shop-btn--ghost:hover {
	background: var(--av-ink);
	border-color: var(--av-ink);
	color: var(--av-bg);
	transform: translateY(-2px);
}

/* ------------------------------------------------ checkout error state --
   The source's: a small bold red "To polje je obvezno." directly under each
   field (`.field__error`: margin .35rem 0 0, step--1, 700, #9B2C2C), and above
   the button the terms message plus ONE summary line. Woo prints a boxed list
   of every field error (with links) as well; its per-field items duplicate the
   inline messages, so they are hidden and the summary is drawn instead.
   Non-field errors (payment, session) have no data-id and still show. */
.woocommerce form.checkout .checkout-inline-error-message {
	margin: 0.35rem 0 0;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	font-weight: 700;
	color: var(--av-danger);
}
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout { margin: 0 0 1rem; }
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout .woocommerce-error {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	font-weight: 700;
	color: var(--av-danger);
}
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li[data-id] { display: none; } /* terms included: Woo also prints it inline under the tick, as the source does */
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li + li { margin-top: 1rem; }
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout .woocommerce-error a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}
.woocommerce form.checkout .woocommerce-NoticeGroup-checkout .woocommerce-error:has(li[data-id])::after {
	content: "Naročila še ne moremo oddati. Preverite označena polja.";
	display: block;
}
/* the source's "* " follows the sentence inline; Woo's <abbr> is a separate
 * flex item that ends up at the far right once the sentence wraps. The input
 * itself carries `required`, so the visual mark is all the abbr adds. */
.woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox > .required { display: none; }
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text::after { content: "\00a0*"; }

/* ------------------------------------------ cart page + empty state (09-29) */
/* one total row + the VAT note, as the source's drawer; no heading that
 * repeats the "Skupaj" row under it */
.woocommerce .cart_totals > h2 { display: none; }
.woocommerce .cart_totals table.shop_table .cart-subtotal { display: none; }
.woocommerce .cart_totals table.shop_table .order-total { border-top: 0; margin-top: 0; padding-top: 0; }
.woocommerce .cart_totals table.shop_table .order-total th { font-weight: 400; }
.woocommerce .cart_totals table.shop_table .order-total td { color: var(--av-ink); }

/* the source's empty state is a `.callout` (surface, 4px accent-tint left
 * rule, radius 10, step--1 text) with the primary button under the text */
.woocommerce .wc-empty-cart-message .cart-empty,
.woocommerce .cart-empty.woocommerce-info {
	margin: 0;
	padding: 1.5rem 1.5rem 0;
	background: var(--av-surface);
	border: 0;
	border-left: 4px solid var(--av-accent-tint);
	border-radius: 10px 10px 0 0;
	font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	font-weight: 400;
	color: var(--av-ink);
}
.woocommerce .wc-empty-cart-message .cart-empty b { display: block; margin-bottom: 0.5rem; font-weight: 700; }
.woocommerce .return-to-shop {
	margin: 0;
	padding: 1rem 1.5rem 1.5rem;
	background: var(--av-surface);
	border-left: 4px solid var(--av-accent-tint);
	border-radius: 0 0 10px 10px;
}
.woocommerce .return-to-shop a.button.wc-backward {
	background: var(--av-accent);
	border-color: transparent;
	color: var(--av-on-accent);
}
.woocommerce .return-to-shop a.button.wc-backward:hover { background: var(--av-ink); color: var(--av-on-accent); }

/* the login form at a readable width, not the full 1200px column */
.woocommerce-account .woocommerce form.woocommerce-form-login { max-width: 28rem; }
/* the empty state is one block: out of the cart page's two-column grid, and
 * the notice is not a flex row (that put the bold line and the text side by side) */
.woocommerce .wc-empty-cart-message,
.woocommerce .return-to-shop { grid-column: 1 / -1; max-width: none; }
.woocommerce .wc-empty-cart-message .cart-empty { display: block; }
.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) { display: block; }
.woocommerce .wc-empty-cart-message { margin: 0; }
.woocommerce .wc-empty-cart-message .cart-empty { margin: 0; }

/* ===========================================================================
   CART DRAWER — the source's side cart (av0608 css/style.css "Cart"), on the
   markup printed by inc/woocommerce.php. Values are the source's tokens mapped
   to this site's variables (--sp-1 .5rem, --sp-2 1rem, --sp-3 1.5rem; steps as
   the kit's clamps; --dur 220ms, --ease cubic-bezier(.2,.6,.3,1)).
   =========================================================================== */
.av-cart-scrim {
	position: fixed; inset: 0; z-index: 9998;
	background: rgb(20 30 12 / 0.5);
	opacity: 0; transition: opacity 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.av-cart-open .av-cart-scrim { opacity: 1; }
.av-cart {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999;
	width: min(26rem, 100%);
	display: flex; flex-direction: column;
	background: var(--av-bg); color: var(--av-ink);
	box-shadow: 0 18px 40px -20px rgb(30 42 18 / 0.28);
	transform: translateX(100%); transition: transform 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
	font-size: clamp(1rem, 0.96rem + 0.20vw, 1.11rem); line-height: 1.65;
}
.av-cart-open .av-cart { transform: none; }
.av-cart[aria-busy="true"] .av-cart__content { opacity: 0.6; pointer-events: none; }
.av-cart__content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.av-cart__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.5rem; border-bottom: 1px solid var(--av-line);
}
.av-cart__head h2 { margin: 0; font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); font-weight: 800; line-height: 1.2; color: var(--av-ink); }
.av-cart__close {
	display: grid; place-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
	border: 1px solid var(--av-line); border-radius: 999px; background: var(--av-bg); color: var(--av-ink); cursor: pointer;
}
.av-cart__close:hover { border-color: var(--av-accent-tint); color: var(--av-accent); }
.av-cart__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.av-cart__empty p { margin: 0; }
.av-cart__empty p + p { margin-top: 1rem; }
.av-cart__empty p:nth-child(2) { color: var(--av-ink-muted); font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.av-cart__list { list-style: none; margin: 0; padding: 0; }
.av-cart-line { display: flex; gap: 1rem; justify-content: space-between; padding-block: 1.5rem; }
.av-cart-line + .av-cart-line { border-top: 1px solid var(--av-line); }
.av-cart-line h3 { margin: 0 0 0.15rem; font-size: clamp(1rem, 0.96rem + 0.20vw, 1.11rem); font-weight: 800; line-height: 1.12; }
.av-cart-line h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--av-ink); text-decoration: none; }
.av-cart-line h3 a:hover { color: var(--av-accent); }
.av-cart-line__note { margin: 0 0 1rem; color: var(--av-ink-muted); font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.av-cart-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.av-cart .av-cart-line__price { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.av-cart-line__remove, .av-cart__clear {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0.4em 0;
	border: 0; background: none; cursor: pointer; color: var(--av-ink-muted);
	font: inherit; font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	text-decoration: underline; text-underline-offset: 0.2em;
}
.av-cart-line__remove:hover, .av-cart__clear:hover { color: var(--av-accent); }
.av-qty { display: inline-flex; align-items: center; border: 1px solid var(--av-line); border-radius: 999px; }
.av-qty button {
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
	color: var(--av-ink); font: inherit; font-size: clamp(1rem, 0.96rem + 0.20vw, 1.11rem); line-height: 1;
}
.av-qty button:hover { color: var(--av-accent); }
.av-qty span { min-width: 2.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.av-cart__foot { padding: 1.5rem; border-top: 1px solid var(--av-line); }
.av-cart__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); }
.av-cart__sum b { font-weight: 800; font-variant-numeric: tabular-nums; }
.av-cart__vat { margin: 0.35rem 0 1rem; color: var(--av-ink-muted); font-size: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); }
.av-cart .av-cta { justify-content: center; }
.av-cart__checkout { width: 100%; }
.av-cart__clear { display: flex; justify-content: center; width: 100%; margin-top: 1rem; padding: 0.5em; }
@media (prefers-reduced-motion: reduce) { .av-cart, .av-cart-scrim { transition: none; } }
/* The drawer sits outside Elementor's content, so the site's primary pill
 * (global class av-cta, scoped to .elementor) is restated for it. */
.av-cart .av-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 44px; padding: 0.55em 1.3em; border: 2px solid transparent; border-radius: 999px;
	background-color: var(--av-accent); color: var(--av-on-accent);
	font-size: 0.94rem; font-weight: 700; line-height: 1.2; text-decoration: none;
	transition: background-color 180ms, transform 180ms;
}
.av-cart .av-cta:hover { background-color: var(--av-ink); color: var(--av-on-accent); transform: translateY(-2px); }