/**
 * Provatic Shop — front-end styles.
 *
 * Scoped under .provatic-commerce-* so we don't leak into theme styles.
 */

.provatic-commerce-products-grid,
.provatic-commerce-product-detail,
.provatic-commerce-cart,
.provatic-commerce-checkout,
.provatic-commerce-thank-you {
	/* The site's own accent, Provatic blue only where a theme ships no palette.
	   Hardcoded, every commerce block arrived on a customer site in OUR blue, which is
	   why template-studio tells template authors to re-declare this token over the
	   product grid and pricing table. They should not have had to. */
	--provatic-brand: var(--wp--preset--color--accent, #497ae8);
	--provatic-brand-dark: var(--wp--preset--color--contrast, #3a63ba);
	/* Text, rules and fields follow the palette for the same reason. Fixed, a template's
	   dark mode turned the page dark and left the size chips, the quantity stepper and
	   "Buy now" in near-black on it — unreadable (Brimwell, 2026-10-13). */
	--provatic-text: var(--wp--preset--color--contrast, #1a202c);
	--provatic-text-muted: var(--wp--preset--color--contrast-2, #6b7280);
	--provatic-border: var(--wp--preset--color--border, #e2e4e9);
	/* The field surface. A dark template that redeclares the tokens above was still
	   left with white inputs it had no way to reach. */
	--provatic-bg: var(--wp--preset--color--base, #fff);
	--provatic-bg-subtle: var(--wp--preset--color--base-2, #f7f8fa);
	--provatic-error: #c0392b;
	--provatic-success: #1e8e3e;
	--provatic-radius: 8px;

	font-size: 14px;
	color: var(--provatic-text);
}

/* ── Self-contained width, for the blocks that never had one ──────────────────
 * `.provatic-commerce-pricing` has carried its own frame since it shipped (see its
 * block below). The cart, the checkout and the thank-you page never did: they
 * declared the tokens above and nothing else.
 *
 * That is invisible inside a theme's constrained post content, and ruinous
 * everywhere else. A template renders these from an `align:"full"` band, and
 * `wrap_band()` builds that band with no constrained layout at all — so the cart
 * table, which is `width:100%`, ran the whole width of the window, and
 * `.provatic-commerce-checkout-submit`, which is also `width:100%`, became a
 * full-bleed bar in the template's accent colour. Nine of nine templates style
 * zero cart or checkout classes, so nothing anywhere was holding them in.
 *
 * Two tokens rather than two literals, so a template can put these on its OWN grid
 * — the same move the post head and the profile menu make.
 *
 * 🔴 TWO LEVELS, and they are not interchangeable. The outer box only insets; the
 * inner column only caps. A template's inset token is already a centring device —
 * `max(gutter, (100% - cap) / 2)` — so a box carrying BOTH that token and the cap
 * centres the same content twice, and it lands a whole inset inside the grid that
 * every other band in that template sits on. Measured at 1440px, the first version
 * of this frame put Foundry's cart content at 304 where its header, its bands and
 * its footer all start at 152. That is template-studio §2 rule 2, and this file
 * broke it; the post head is built this way for exactly the same reason.
 *
 * `box-sizing` is stated, not inherited: a box carrying both a width and padding
 * means two different widths depending on it, and that ambiguity has cost this
 * codebase a day before (template-studio §2, rule 5). */
:where(.provatic-commerce-cart),
:where(.provatic-commerce-checkout),
:where(.provatic-commerce-thank-you) {
	box-sizing: border-box;
	padding-inline: var(--provatic-inset, 20px);
}
/* …and ONE inner column caps and centres. Not the children.
 *
 * Asking every child to centre itself with `margin-inline: auto` is what broke the
 * checkout. Four rules further down THIS file use the `margin` shorthand —
 * `.provatic-commerce-checkout-heading { margin: 0 0 16px }` and friends — and a
 * shorthand resets `margin-inline` to 0. A plain class beats a `:where()` rule, so
 * those three children sat flush left while `.provatic-commerce-checkout-total`,
 * whose rule happens to set only `margin-bottom`, kept the auto margins and centred
 * 180px away. Measured on the live Kikobana checkout at 1440px.
 *
 * :where() exists so a TEMPLATE can win with one class. It also means this
 * stylesheet's own ordinary rules win, which is easy to forget and impossible to
 * see by reading. A wrapper takes the decision away from the children entirely.
 *
 * A cart is a table with columns and wants the content width. A checkout is a form
 * and a receipt, and a form stretched to 1120px is a worse form — fields that wide
 * are harder to fill in, and the "Pay now" button becomes a banner. */
:where(.provatic-commerce-cart-inner),
:where(.provatic-commerce-checkout-inner),
:where(.provatic-commerce-thank-you-inner) {
	/* Stated, and measured: the empty-cart card carries 24px of its own padding, so
	   as content-box a cap of 1120 made a box of 1168 — 48px wider than the column
	   it sits in, hanging over both edges of the grid. */
	box-sizing: border-box;
	margin-inline: auto;
}
:where(.provatic-commerce-cart-inner) { max-width: var(--provatic-max, 1120px); }
:where(.provatic-commerce-checkout-inner),
:where(.provatic-commerce-thank-you-inner) { max-width: var(--provatic-max, 720px); }

/* ── The rules these templates emit markup for and nobody ever wrote ──────────
 * Each of the classes below appears in cart.php or checkout.php and had no rule in
 * this file, so they rendered as whatever the surrounding theme happened to say —
 * which is the other half of "it does not look like the template". */

/* The order summary's subtotal and tax rows: a label and a figure, apart. */
:where(.provatic-commerce-checkout-line) {
	display: flex;
	justify-content: space-between;
	padding: 4px 16px;
	color: var(--provatic-text-muted);
}
:where(.provatic-commerce-checkout-item-title) { color: var(--provatic-text); }
:where(.provatic-commerce-checkout-item-price) { white-space: nowrap; }

/* The cart's own totals, to match the summary's. */
:where(.provatic-commerce-cart-subtotal),
:where(.provatic-commerce-cart-total) { white-space: nowrap; text-align: right; }
:where(.provatic-commerce-cart-total-label) { text-align: right; }

/* The cart table's column rhythm. These were inline `width:` attributes on the header
   cells, so a template with wider prices or a narrower quantity stepper could not
   reach them — and the only way to try was !important on a `<th>`. */
:where(.provatic-commerce-cart-col-price) { width: var(--provatic-cart-col-price, 110px); }
:where(.provatic-commerce-cart-col-qty) { width: var(--provatic-cart-col-qty, 120px); }
:where(.provatic-commerce-cart-col-subtotal) { width: var(--provatic-cart-col-subtotal, 120px); }
:where(.provatic-commerce-cart-col-remove) { width: var(--provatic-cart-col-remove, 40px); }
:where(.provatic-commerce-cart-qty) { width: 70px; }

/* A line's variant, plan or renewal note, under its title. */
:where(.provatic-commerce-cart-item-note) { color: var(--provatic-text-muted); }

/* The label beside the currency switch. */
:where(.provatic-commerce-currency-switch-label) { font-size: 13px; margin-right: 6px; }

/* The gateway chooser. A bare <fieldset> draws a browser border nobody asked for. */
:where(.provatic-commerce-checkout-gateways) {
	margin: 20px 0;
	padding: 12px 16px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
}
:where(.provatic-commerce-checkout-gateways legend) {
	padding: 0 6px;
	font-weight: 600;
}

/* Sent here to sign in before buying — a message, not a dead end.
   Every declaration below was an inline style attribute carrying #fff, #e5e7eb,
   #111827 or #6b7280. A template cannot override an inline style at all, so a dark
   template got a white card with near-black text on it and no way to reach either. */
:where(.provatic-commerce-login-required) {
	max-width: 480px;
	margin: 24px auto;
	padding: 32px 28px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	background: var(--provatic-bg-subtle);
	text-align: center;
}
:where(.provatic-commerce-login-icon) { font-size: 40px; margin-bottom: 12px; }
:where(.provatic-commerce-login-title) { margin: 0 0 8px; font-size: 18px; color: var(--provatic-text); }
:where(.provatic-commerce-login-note) { margin: 0 0 20px; color: var(--provatic-text-muted); }
:where(.provatic-commerce-login-actions) {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
:where(.provatic-commerce-login-actions) .provatic-commerce-btn { min-width: 120px; }
:where(.provatic-commerce-lock-icon) { margin-right: 4px; }

/* Fields that read as one — city/state/postal, state/postal. Wrapping rather than
   squeezing: three boxes side by side at 390px are three boxes nobody can type in. */
:where(.provatic-commerce-checkout-pair) { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.provatic-commerce-checkout-pair) > input { flex: 1 1 8em; min-width: 0; }

/* The delivery address — one band, so it reads as a second thing being asked rather
   than more of the billing questions above it. Only drawn when the cart holds something
   that has to be posted. */
:where(.provatic-commerce-checkout-ship) {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--provatic-border, #e4e4e7);
}
:where(.provatic-commerce-checkout-ship-title) {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}
/* The second address line sits under the first, as one field with two boxes. */
:where(.provatic-commerce-checkout-ship) .provatic-commerce-checkout-field > input + input { margin-top: 8px; }

/* "Includes 10% tax" under the total. */
:where(.provatic-commerce-checkout-tax-note) {
	margin: 4px 0 0;
	text-align: right;
	font-size: 12px;
	color: var(--provatic-text-muted);
}

/* One payment method. The mark's tint is the gateway's own brand colour and stays
   inline — PHP is the only thing that knows it — but its shape belongs here. */
:where(.provatic-commerce-gateway-option) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
}
:where(.provatic-commerce-gateway-mark) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: calc(var(--provatic-radius) * 0.75);
}

/* The form itself — a hook a template can hang its own spacing on, and the one place
   the fields' rhythm is set. */
:where(.provatic-commerce-checkout-form) { margin: 0; }

/* The row the switch sits on. Both declarations were inline in the markup, where the
   design rules forbid them and no template could override them. */
:where(.provatic-commerce-currency-switch-wrap) {
	margin-bottom: 12px;
	text-align: right;
}

/* The currency switch, when a store accepts more than one. */
:where(.provatic-commerce-currency-switch) {
	padding: 6px 8px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	background: var(--provatic-bg);
	font-size: 13px;
	color: var(--provatic-text);
}

/* 🔴 `select` was missing from the field rule below it, so the billing-country
 * dropdown stayed a raw browser widget beside text inputs that were styled. One
 * word, and the form stopped looking half-finished. */
:where(.provatic-commerce-checkout-field select) {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	background: var(--provatic-bg);
	font-size: 14px;
	color: var(--provatic-text);
}

.provatic-commerce-empty {
	padding: 24px;
	text-align: center;
	color: var(--provatic-text-muted);
	background: var(--provatic-bg-subtle);
	border-radius: var(--provatic-radius);
}

/* ---- Catalog ---- */

/* ── The other three bands get a frame too ───────────────────────────────────
 * Gunnerup's Shop page put its product cards at x=0 while every other band on it
 * starts at 68. Five of nine templates had papered over it with a `max-width` of
 * their own, which is how it stayed invisible — the rule was "each template frames
 * its own commerce bands", and four templates had not.
 *
 * 🔴 An INSET, and deliberately not a cap.
 *
 * A template's inset expression — `max(gutter, (100% - cap) / 2)` — already leaves
 * a content box one cap wide and centred, AND collapses to the plain gutter once
 * the window is narrower than the cap. A cap plus a fixed gutter cannot do both:
 * pick the gutter for wide screens and the cards touch the edge on a phone; pick it
 * for the phone and they sit a gutter inside the grid on a desktop. Measured both
 * ways on Kikobana — 24px off at 1440, or 24px off at 900 and 390.
 *
 * (I shipped the cap version first, on a measurement I had misread: Kikobana's cards
 * were 24px in because of a stale per-template rule that capped AND padded, not
 * because its band was pre-capped. Its band is `alignfull` with no padding at all.)
 *
 * The fallback writes the same expression out, so a template that sets nothing still
 * gets 1120 centred with a 20px minimum gutter — what these blocks always had. */
:where(.provatic-commerce-products-grid),
:where(.provatic-commerce-pricing),
:where(.provatic-commerce-product-detail) {
	box-sizing: border-box;
	padding-inline: var(--provatic-grid-inset, max(20px, (100% - 1120px) / 2));
}

.provatic-commerce-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.provatic-commerce-product-card {
	background: var(--provatic-bg, #fff);
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow 0.15s ease;
}

.provatic-commerce-product-card:hover {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.provatic-commerce-product-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-color: var(--provatic-bg-subtle);
	border-radius: 6px;
	margin-bottom: 4px;
}

/* ── Product detail ──────────────────────────────────────────────────────────
   Image on one side, everything you decide with on the other. Sized in the same
   plain units as the rest of this file so a template can restyle it with its own
   tokens without fighting anything. */
.provatic-commerce-product-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	/* The cap and the centring moved to the shared inset rule above. Left here they
	   would apply on top of a template's inset token and centre the content twice. */
}
.provatic-commerce-product-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: var(--provatic-bg-subtle);
}
.provatic-commerce-product-detail__category {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--provatic-text-muted);
}
.provatic-commerce-product-detail__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.1;
	color: var(--provatic-text);
}
.provatic-commerce-product-detail__price {
	margin: 16px 0 0;
	font-size: 22px;
	color: var(--provatic-text);
}
.provatic-commerce-product-detail__lead {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--provatic-text-muted);
}
.provatic-commerce-product-detail__plan { margin-top: 20px; width: 100%; }

/* Options: one group per row, values as a wrapping set of choices. */
.provatic-commerce-options { margin-top: 28px; display: grid; gap: 18px; }
.provatic-commerce-option__name {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--provatic-text-muted);
}
.provatic-commerce-option__values { display: flex; flex-wrap: wrap; gap: 8px; }
.provatic-commerce-option__value {
	min-width: 48px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--provatic-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.provatic-commerce-option__value[aria-checked="true"] {
	border-color: var(--provatic-brand, #497ae8);
	background: var(--provatic-brand, #497ae8);
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	.provatic-commerce-option__value:not([aria-checked="true"]):hover { border-color: var(--provatic-text); }
}

/* Quantity and the buy button are one decision each, so they get a row each. */
.provatic-commerce-product-detail__buy {
	display: grid;
	gap: 12px;
	justify-items: start;
	margin-top: 28px;
}
.provatic-commerce-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--provatic-border);
	border-radius: 999px;
	overflow: hidden;
}
.provatic-commerce-qty__btn {
	width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	cursor: pointer;
}
.provatic-commerce-qty__input {
	width: 46px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.provatic-commerce-qty__input::-webkit-outer-spin-button,
.provatic-commerce-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 781px) {
	.provatic-commerce-product-detail { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Product detail: gallery, breadcrumb, price furniture, tabs ────────────
   The page used to be one photograph, a title, a price and a single line, because
   that was all a product could carry. It can carry a description, a spec table and
   more than one frame now, and this is what draws them. */

/* Breadcrumb — where the shopper is, above the name that says what they are looking at. */
.provatic-commerce-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--provatic-text-muted);
}
.provatic-commerce-crumbs a { color: inherit; text-decoration: none; }
.provatic-commerce-crumbs span[aria-hidden="true"] { opacity: .5; }
.provatic-commerce-crumbs__cat { text-transform: capitalize; }
@media (hover: hover) and (pointer: fine) {
	.provatic-commerce-crumbs a:hover { color: var(--provatic-text); text-decoration: underline; }
}

/* Gallery. The main frame keeps a stable aspect so swapping a thumbnail never makes
   the page jump under the pointer that clicked it. */
.provatic-commerce-gallery__frame {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--provatic-bg-subtle);
}
.provatic-commerce-gallery__frame img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.provatic-commerce-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.provatic-commerce-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--provatic-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--provatic-bg-subtle);
	cursor: pointer;
}
.provatic-commerce-gallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}
.provatic-commerce-gallery__thumb.is-active { border-color: var(--provatic-text); }
@media (hover: hover) and (pointer: fine) {
	.provatic-commerce-gallery__thumb:not(.is-active):hover { border-color: var(--provatic-text-muted); }
}

/* Price row: what it costs, what it cost, and at most one short label. */
.provatic-commerce-product-detail__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}
.provatic-commerce-product-detail__was {
	font-size: 16px;
	color: var(--provatic-text-muted);
	text-decoration-thickness: 1px;
}
.provatic-commerce-product-detail__badge {
	align-self: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--provatic-text);
	color: var(--provatic-bg, #fff);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Two actions, side by side, because they are alternatives rather than a sequence.
   Buy now carries .provatic-commerce-add-to-cart too — it shares that handler on purpose —
   so its outline styling is written at two classes deep to beat the primary background
   that rule sets further down the file. Order alone would not do it. */
.provatic-commerce-product-detail__buy {
	grid-template-columns: auto 1fr;
	align-items: center;
}
.provatic-commerce-product-detail__add,
.provatic-commerce-product-detail__buy-now { width: 100%; max-width: none; min-height: 48px; }
.provatic-commerce-product-detail .provatic-commerce-product-detail__buy-now {
	grid-column: 2;
	border: 1px solid var(--provatic-border);
	background: transparent;
	color: var(--provatic-text);
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
}
@media (hover: hover) and (pointer: fine) {
	.provatic-commerce-product-detail .provatic-commerce-product-detail__buy-now:hover { border-color: var(--provatic-text); }
}
@media (max-width: 600px) {
	.provatic-commerce-product-detail__buy { grid-template-columns: 1fr; }
	.provatic-commerce-product-detail__buy-now { grid-column: 1; }
}

/* Tabs. The panels are visible by default and only hidden once JS has marked the
   container tabbed — without it the page shows everything rather than hiding half of
   it behind a control nothing can operate. */
.provatic-commerce-product-detail__detail {
	margin-top: 36px;
	border-top: 1px solid var(--provatic-border);
	padding-top: 20px;
}
.provatic-commerce-tabs { display: flex; gap: 24px; margin-bottom: 18px; }
.provatic-commerce-tabs__tab {
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--provatic-text-muted);
	font: inherit;
	cursor: pointer;
}
.provatic-commerce-tabs__tab.is-active {
	color: var(--provatic-text);
	border-bottom-color: var(--provatic-text);
}
.provatic-commerce-product-detail__detail.is-tabbed .provatic-commerce-tabs__panel { display: none; }
.provatic-commerce-product-detail__detail.is-tabbed .provatic-commerce-tabs__panel.is-active { display: block; }
.provatic-commerce-product-detail__body { margin-top: 0; }
.provatic-commerce-product-detail__body p { margin: 0 0 12px; line-height: 1.7; }

/* Spec table: label left, value right, one hairline between rows. */
.provatic-commerce-specs { margin: 0; display: grid; gap: 0; }
.provatic-commerce-specs__row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--provatic-border);
}
.provatic-commerce-specs__row:last-child { border-bottom: 0; }
.provatic-commerce-specs dt { margin: 0; color: var(--provatic-text-muted); font-size: 14px; }
.provatic-commerce-specs dd { margin: 0; color: var(--provatic-text); font-size: 14px; }

/* A card is one link: image, collection and name. */
.provatic-commerce-product-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The collection this product sits in, above its name. Quiet by default — a template
   that wants it loud restyles this one class. */
.provatic-commerce-product-category {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--provatic-text-muted);
}

.provatic-commerce-product-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--provatic-text);
}

.provatic-commerce-product-excerpt {
	margin: 0;
	font-size: 13px;
	color: var(--provatic-text-muted);
	line-height: 1.4;
}

.provatic-commerce-product-price {
	font-size: 18px;
	font-weight: 600;
	color: var(--provatic-text);
	margin-top: auto;
}

/* ---- Buttons ---- */

.provatic-commerce-btn,
.provatic-commerce-add-to-cart {
	/* inline-flex, not inline-block: a <button> centres its own label, an <a> wearing the
	   same class does not. "Choose options" is an anchor, and wherever a card stretched it
	   past its min-height the text stayed pinned to the top — measured 10px above and 37px
	   below in a 64px box. Centring here fixes every button that is really a link. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: none;
	border-radius: var(--provatic-radius);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease;
}

.provatic-commerce-btn-primary,
.provatic-commerce-add-to-cart {
	background: var(--provatic-brand);
	color: #fff;
}

.provatic-commerce-btn-primary:hover,
.provatic-commerce-add-to-cart:hover:not(:disabled) {
	background: var(--provatic-brand-dark);
}

.provatic-commerce-btn-secondary {
	background: var(--provatic-bg-subtle);
	color: var(--provatic-text);
	border: 1px solid var(--provatic-border);
}

.provatic-commerce-btn-secondary:hover {
	background: #ecedef;
}

.provatic-commerce-add-to-cart:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- Cart table ---- */

.provatic-commerce-cart-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.provatic-commerce-cart-table th,
.provatic-commerce-cart-table td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid var(--provatic-border);
}

.provatic-commerce-cart-table th {
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--provatic-text-muted);
}

.provatic-commerce-cart-table tfoot th {
	font-size: 14px;
	font-weight: 600;
	color: var(--provatic-text);
	text-transform: none;
	letter-spacing: 0;
	padding-top: 16px;
}

.provatic-commerce-cart-qty {
	padding: 6px 8px;
	border: 1px solid var(--provatic-border);
	border-radius: 6px;
}

.provatic-commerce-cart-remove {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--provatic-text-muted);
	padding: 4px 8px;
}

.provatic-commerce-cart-remove:hover {
	color: var(--provatic-error);
}

.provatic-commerce-cart-actions {
	text-align: right;
}

/* ---- Checkout ---- */

.provatic-commerce-checkout-heading {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
}

.provatic-commerce-checkout-summary {
	list-style: none;
	margin: 0 0 20px;
	padding: 16px;
	background: var(--provatic-bg-subtle);
	border-radius: var(--provatic-radius);
}

.provatic-commerce-checkout-summary li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
}

.provatic-commerce-checkout-item-qty {
	color: var(--provatic-text-muted);
	font-size: 13px;
	margin-left: 4px;
}

.provatic-commerce-checkout-total {
	display: flex;
	justify-content: space-between;
	padding: 14px 16px;
	border-top: 2px solid var(--provatic-border);
	font-size: 16px;
	margin-bottom: 24px;
}

.provatic-commerce-checkout-field {
	margin-bottom: 16px;
}

.provatic-commerce-checkout-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
}

.provatic-commerce-checkout-field label .required {
	color: var(--provatic-error);
}

.provatic-commerce-checkout-field input {
	/* width 100% + padding + border: without border-box the field is 26px wider than
	   the form (the Name on the payment field stuck out on provatic.com). */
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	font-size: 14px;
}

.provatic-commerce-checkout-submit {
	width: 100%;
	padding: 14px;
	font-size: 15px;
}

.provatic-commerce-checkout-feedback {
	margin-top: 12px;
	color: var(--provatic-error);
	font-size: 13px;
	min-height: 1em;
}

.provatic-commerce-checkout-feedback.is-success {
	color: var(--provatic-success);
}

.provatic-commerce-checkout-secure {
	margin-top: 16px;
	text-align: center;
	color: var(--provatic-text-muted);
	font-size: 13px;
}

/* ---- Thank you ---- */

.provatic-commerce-thank-you {
	max-width: 540px;
	margin: 40px auto;
	padding: 32px;
	text-align: center;
	background: var(--provatic-bg-subtle);
	border-radius: var(--provatic-radius);
}

.provatic-commerce-thank-you h2 {
	margin: 0 0 16px;
	font-size: 24px;
}

/* ---- Toast ---- */

.provatic-commerce-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	padding: 12px 18px;
	/* Hard-coded colors — the admin design tokens (var(--provatic-text)) are
	   only defined inside `.provatic-wrap` and don't resolve on the front-end,
	   so the toast used to render with a transparent background. */
	background: #111827;
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
	z-index: 100000;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	pointer-events: none;
}

/* ============================================================
 * Pricing component ([provatic_commerce_pricing])
 * ============================================================ */

.provatic-commerce-pricing {
	/* The site's own accent, Provatic blue only where a theme ships no palette.
	   Hardcoded, every commerce block arrived on a customer site in OUR blue, which is
	   why template-studio tells template authors to re-declare this token over the
	   product grid and pricing table. They should not have had to. */
	--provatic-brand: var(--wp--preset--color--accent, #497ae8);
	--provatic-brand-dark: var(--wp--preset--color--contrast, #3a63ba);
	/* Palette, as on the blocks above: a dark mode must reach the cards too. */
	--provatic-text: var(--wp--preset--color--contrast, #1a202c);
	--provatic-text-muted: var(--wp--preset--color--contrast-2, #6b7280);
	--provatic-border: var(--wp--preset--color--border, #e2e4e9);
	--provatic-bg: var(--wp--preset--color--base, #fff);
	--provatic-bg-subtle: var(--wp--preset--color--base-2, #f7f8fa);
	--provatic-radius: 8px;

	/* Self-contained width: this block has to look right in ANY container — a theme's
	   constrained post-content OR an unconstrained wrapper (the chrome-less
	   template-preview / published @handle route, or a customer dropping the shortcode
	   into a full-width section). The cap and the gutter now come from the shared rule
	   above, so a template can move them with a token instead of overriding them. */
	box-sizing: border-box;

	font-size: 14px;
	color: var(--provatic-text);
	margin-bottom: 56px;
}

/* Monthly / Yearly toggle — always centred (flex + fit-content, independent of
   the parent's text-align so cards AND the comparison table both centre it). */
.provatic-commerce-pricing-toggle {
	display: flex;
	width: fit-content;
	margin: 0 auto 28px;
	padding: 4px;
	background: var(--provatic-bg-subtle);
	border: 1px solid var(--provatic-border);
	border-radius: 9999px;
	gap: 2px;
}
.provatic-commerce-pricing--cards { text-align: center; }
.provatic-commerce-pricing-toggle-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--provatic-text-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 18px;
	border-radius: 9999px;
	cursor: pointer;
	/* Reserve the bold-weight width so switching active state never nudges the
	   sibling label sideways. */
	min-width: 72px;
	text-align: center;
}
.provatic-commerce-pricing-toggle-btn.is-active {
	background: var(--provatic-bg, #fff);
	color: var(--provatic-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
/* "Save 10%" beside Yearly: the reason to flip the toggle, in the site's accent. */
.provatic-commerce-pricing-save {
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--provatic-brand) 16%, transparent);
	color: var(--provatic-text);
	font-size: 11px;
	font-weight: 600;
}

/* Cards */
.provatic-commerce-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	text-align: left;
}
.provatic-commerce-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--provatic-bg, #fff);
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	padding: 24px;
}
.provatic-commerce-pricing-card.is-highlight {
	border-color: var(--provatic-brand);
	box-shadow: 0 0 0 1px var(--provatic-brand);
}
.provatic-commerce-pricing-badge {
	position: absolute;
	top: -11px;
	left: 24px;
	background: var(--provatic-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 9999px;
}
.provatic-commerce-pricing-name {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
}
.provatic-commerce-pricing-desc {
	margin: 0 0 16px;
	color: var(--provatic-text-muted);
	font-size: 13px;
}
.provatic-commerce-pricing-price {
	margin: 0 0 18px;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.provatic-commerce-pricing-amount {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.provatic-commerce-pricing-period {
	color: var(--provatic-text-muted);
	font-size: 13px;
}
.provatic-commerce-pricing-features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}
.provatic-commerce-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
}
.provatic-commerce-pricing-check { color: var(--provatic-success, #1e8e3e); font-weight: 700; }
.provatic-commerce-pricing-none  { color: var(--provatic-text-muted); }
.provatic-commerce-pricing-cta {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: var(--provatic-radius);
	border: 1px solid var(--provatic-border);
	color: var(--provatic-text);
	font-weight: 600;
	font-size: 14px;
	background: var(--provatic-bg, #fff);
	margin-top: auto;
}
.provatic-commerce-pricing-cta.is-primary {
	background: var(--provatic-text);
	border-color: var(--provatic-text);
	color: #fff;
}
.provatic-commerce-pricing-cta:hover { border-color: var(--provatic-text); }

/* Comparison table */
.provatic-commerce-pricing-table-wrap { overflow-x: auto; }
.provatic-commerce-pricing-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	/* Fixed layout: column widths stay put when the Monthly/Yearly figures swap,
	   so nothing shifts on toggle. */
	table-layout: fixed;
}
/* Feature-label column fixed; the plan columns split the rest equally. */
.provatic-commerce-pricing-corner,
.provatic-commerce-pricing-table tbody th { width: 24%; }
.provatic-commerce-pricing-table th,
.provatic-commerce-pricing-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--provatic-border);
	vertical-align: middle;
}
.provatic-commerce-pricing-table thead th { border-bottom: 2px solid var(--provatic-border); }
.provatic-commerce-pricing-table tbody th { font-weight: 600; }
.provatic-commerce-pricing-col .provatic-commerce-pricing-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
}
.provatic-commerce-pricing-col .provatic-commerce-pricing-price {
	margin: 4px 0 0;
	font-size: 13px;
}
.provatic-commerce-pricing-col .provatic-commerce-pricing-amount { font-size: 18px; }
.provatic-commerce-pricing-table .is-highlight { background: var(--provatic-bg-subtle); }
.provatic-commerce-pricing-cta-row th,
.provatic-commerce-pricing-cta-row td { border-bottom: 0; }