/* ══════════════════════════════════════════════════════════════════════════
   COMMERCE — cart, checkout, thank-you
   ══════════════════════════════════════════════════════════════════════════

   Almost nothing belongs in here, and that is the point. concept.css already
   styles `.shop-grid`, `.lines`, `.line`, `.line-tier`, `.line-nudge`, `.qty`,
   `.sum`, `.sum-row`, `.sum-total`, `.sum-note`, `.minis`, `.mini`,
   `.credit-banner`, `.rwd-line`, `.co-step`, `.co-n`, `.pick`, `.form`,
   `.fineprint`, `.state` and `.thanks-*` — the work was making the templates
   emit those class names, not writing rules that look like them.

   This file got SHORTER in the round that emitted them. What is left is two
   kinds of rule and nothing else:

     1. a class name moved, and a rule elsewhere in the theme still points at
        where it used to be;
     2. style.css re-created a concept class under a different name back when
        the markup did not carry the real one, and that substitute now beats
        the design it was standing in for.

   style.css is a shared file and is not this workflow's to edit, so (2) is
   handled by re-asserting the concept's own rule from here — this stylesheet
   loads after style.css (functions.php:61-86). Every such block below names the
   style.css line it is answering, so that when style.css can be edited the
   substitute can be deleted and this block with it.

   ══════════════════════════════════════════════════════════════════════════ */

/* ── the checkout's last step ──────────────────────────────────────────────
   The Payment step moved out of the summary card and into the left column, so
   it — not "Ship to" — is now the last thing in that column. style.css closed
   the rule under `.col-2.co-step` back when that was the last one; the divider
   moves down with the step, and the concept's own `.co-step` rule takes the
   column's second step back. */
.co-main .col-2.co-step {
	padding-bottom: 26px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}
.co-main .co-step--pay {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

/* ── the payment methods ───────────────────────────────────────────────────
   checkout/payment-method.php now emits the concept's `.pick` card, the same
   element cart/cart-shipping.php gives the delivery choices, so everything the
   card looks like comes from concept.css:1097-1107.

   style.css:480-493 draws a SECOND card on the <li> that wraps it — border,
   radius, padding, hover and a `:has(input:checked)` green — which would put a
   box inside a box. The <li> is turned back into a plain list item here; the
   only rule it keeps is the list reset, because the concept's step body has no
   markers in it. */
.co-step--pay .wc_payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}
.co-step--pay .wc_payment_methods > li,
.co-step--pay .wc_payment_methods > li:hover,
.co-step--pay .wc_payment_methods > li:has(input:checked) {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
}
/* A gateway's own logo, which the concept's card has no slot for: kept out of
   the way at the end of the title line rather than pushed to the far right,
   where `.pick`'s third grid track is. */
.co-step--pay .wc_payment_methods img { max-height: 22px; width: auto; vertical-align: middle; }

/* Gateways WITH fields keep core's `.payment_box` below the card — a card
   input belongs where the gateway put it. Gateways without fields have their
   description printed inside the card instead, which is where the concept
   draws it. */
.co-step--pay .payment_box { margin: 8px 0 0 30px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.co-step--pay .payment_box p { margin: 0; }
.co-step--pay .place-order { margin: 0; }
/* core prints the privacy paragraph above the button; the concept's own line
   sits below it, so the two do not run into each other */
.co-step--pay .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.co-step--pay .woocommerce-privacy-policy-text p { margin: 0; font-size: 12.5px; line-height: 1.55; }

/* ── the delivery cards, wherever they are drawn ───────────────────────────
   The concept draws them as full-width `.pick` cards in the left column, and
   checkout/form-checkout.php now draws them there — see `.rosen-delivery`
   below. They are still wrapped in `ul#shipping_method`, because that id is
   what woocommerce.css addresses, and its

       .woocommerce ul#shipping_method li label { display: inline; }

   carries an ID: specificity (1,1,3), which beats `concept.css:1131 .pick`
   (0,1,0) no matter which sheet loads last. An inline box ignores
   grid-template-columns, ignores width, and paints its 15px/17px padding
   outside the line box — which is the radio sitting on top of its own label
   and price in the client's screenshot 11.

   So the concept's own rule is re-asserted at a specificity that reaches:
   (1,2,3). This is the only place in the theme that needs to. */
.woocommerce ul#shipping_method li label.pick,
.woocommerce ul.picks li label.pick {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 13px;
	width: 100%;
	margin: 0;
	float: none;
}
.woocommerce ul#shipping_method,
.rosen-delivery ul.picks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.woocommerce ul#shipping_method li,
.rosen-delivery ul.picks li { display: block; margin: 0; padding: 0; }

/* The step the concept numbers 3. It is a `.co-step` like the other three, so
   everything about it comes from concept.css; the only thing said here is that
   a package's own heading — printed when a cart ships in more than one
   parcel — is the design's small print rather than a second <h2>. */
.rosen-delivery .rosen-package { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rosen-delivery .rosen-package + ul.picks { margin-bottom: 14px; }
.rosen-delivery .woocommerce-shipping-destination,
.rosen-delivery > p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── the credit row, in the concept's vocabulary ───────────────────────────
   checkout/review-order.php now tags the negative fee `sum-row--credit`, which
   is what the cart has always called it and what concept.css:1059-1060 styles.
   It cannot reach the cells on its own here: style.css:442 sets an explicit
   `color` on `.rosen-review td`, and an explicit colour beats an inherited one.
   This is style.css:459-460 re-pointed at the design's name; the `.rosen-off`
   rule it replaces is now dead. */
.rosen-review .sum-row--credit th,
.rosen-review .sum-row--credit td,
.rosen-review .sum-row--credit td .amount { color: var(--green-ink); }

/* ── the two money lines are elements now, not repainted notices ───────────
   `.credit-banner` and `.rwd-line` are emitted by inc/commerce.php and styled
   by concept.css:998 and :2186. style.css:55-125 painted `.shop-main
   .woocommerce-message` and `.shop-main .woocommerce-info` to look like them,
   which was the only way to reach them before — and which means EVERY notice
   in that column still arrives wearing the credit banner's skin: "4 × Rosen
   MUA Scan-Body® have been added to your cart" reads as green good news with a
   credit-card icon and its "View cart" button demoted to a text link.

   The concept has exactly one green card in this slot and it is
   `.credit-banner`. So the generic notice is given back a neutral card and its
   button back. `.state .woocommerce-info` is left alone — that is the empty
   cart, a different template with its own rules. */
.shop-main .woocommerce-message,
.shop-main .woocommerce-info {
	padding-left: 17px;
	background: var(--wash);
	border: 1px solid var(--line);
	display: block;
}
.shop-main .woocommerce-message::before,
.shop-main .woocommerce-info::before { content: none; }
.shop-main .woocommerce-message > a { margin-left: 0; }

/* ── `.form` is one column and `.form--grid` is two ────────────────────────
   concept.css:644-645. The checkout's field wrappers now carry those classes,
   so style.css:395-397 — which put the two-column grid on all three
   `__field-wrapper` elements, including the order-notes block the concept
   draws as a plain single-column `.form` — is answered here rather than
   inherited. */
.co-main .form { grid-template-columns: 1fr; }
.co-main .form--grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
	.co-main .form--grid { grid-template-columns: 1fr; }
}

/* ── the field CHROME, not just the grid ───────────────────────────────────
   MEASURED on the store, same class of bug the paired-field widths were: the
   grid is right but the INPUT itself gets WooCommerce's raw form styling, not
   the concept's. On /checkout/ the text inputs and the order-notes textarea
   rendered 31px tall with a 4px radius, a near-black `rgba(32,7,7,.8)` border
   and the 13.3px UA control font — nothing like `.f input` at concept.css:650
   (400 15.5px/1.4, 1px var(--line), 11px radius, 12px 14px padding, #fff, and
   a green focus ring).

   The theme already tries to draw them right — style.css carries

       .co-main .form-row .input-text,
       .co-main .form-row select,
       .co-main .form-row textarea { border-radius:11px; padding:12px 14px; … }   (0,3,0)

   but it LOSES to woocommerce.css

       .woocommerce form .form-row .input-text,
       .woocommerce form .form-row select { border-radius:var(--wc-form-border-radius); … }   (0,3,1)

   — one class of specificity higher because it also names the `form` element.
   Same fight, same cure as the form-row widths at the foot of this file: keep
   WooCommerce's shape and thread `.co-main` into it, which makes this (0,4,1)
   and wins on merit, no !important. Element order is the same trap noted there
   — `<form class="checkout">` is the ANCESTOR of `.co-main`, so `form` comes
   BEFORE it. The textarea carries `.input-text` too, so this one selector
   covers the email, phone, street, apartment, town and ZIP inputs, the
   account password when "create an account" is ticked, and the order-notes
   textarea. The State/Country dropdowns are Select2 widgets whose rendered box
   style.css already wins (`.co-main .select2-container--default
   .select2-selection--single`, 46px/11px/var(--line)), so they are left alone
   and already read as one row with these. */
.woocommerce form .co-main .form-row .input-text,
.woocommerce-page form .co-main .form-row .input-text {
	/* concept.css:650 writes this as `font:400 15.5px/1.4 inherit`, but a
	   CSS-wide keyword (`inherit`) is not a legal component of the `font`
	   shorthand, so the WHOLE declaration is invalid and dropped — in the
	   concept too, where `.f input` therefore renders at the 13.3px UA control
	   size, not the 15.5px the designer wrote. The intent is plainly 15.5px/1.4
	   in the inherited body face, so it is spelled out here as valid longhands
	   that actually take effect. (The same one-line fix would let concept.css
	   render what it means; that file is READ ONLY and outside this brief.) */
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.4;
	font-family: inherit;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 12px 14px;
	background: #fff;
}
.woocommerce form .co-main .form-row .input-text::placeholder,
.woocommerce-page form .co-main .form-row .input-text::placeholder { color: #98a3aa; }
/* The green focus ring — woocommerce.css's `.input-text:focus` (0,3,1) sets
   `border-color:currentcolor` and no shadow, out-pointing the theme's ring, so
   it is restated here at (0,4,1) to match concept.css:652. */
.woocommerce form .co-main .form-row .input-text:focus,
.woocommerce-page form .co-main .form-row .input-text:focus {
	outline: none;
	border-color: var(--green-ink);
	box-shadow: 0 0 0 4px rgba(140, 192, 84, .22);
}

/* The saved delivery address, printed beside "Ship to a different address?" so
   the box is a choice rather than a trap. `.addr` is the concept's own type
   for an address (concept.css:748); this only spaces it under the label. */
.co-main #ship-to-different-address .addr { margin-top: 6px; }

/* The checkout's saved-address picker (`#rosen-addressbook`) is printed and
   styled by inc/account.php, which owns it. Nothing is asserted about it here
   — a second stylesheet reaching into another workflow's component is how two
   agents end up fighting over one card. */

/* ── the account + $50 gift block on the Contact step ──────────────────────
   concept.css owns the look of `.co-account`, `.co-create`, `.co-pass` and the
   green-soft `.gift` card (icon chip, headline, lede). This file only threads
   WooCommerce's own markup into it — the `.form-row` the account checkbox and
   password arrive wrapped in, and the plugin's opt-in `<p class="rosen-credits-
   optin">`, which is where the single `rosen_marketing_optin` consent box and
   the honest $50 terms live. The plugin owns that copy; this styles it to read
   as the card's consent line and fine print rather than a grey form row. */
.co-account > .form-row { margin: 0; }
/* The password field is a WooCommerce `.form-row.f`, not the concept's bare
   `.f`, so the indent that makes it read as the account box's consequence is
   restated for the wrapper the field actually renders in. */
.co-pass .form-row { margin: 0; }

.gift .rosen-credits-optin { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gift .rosen-credits-optin > label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
}
.gift .rosen-credits-optin input[type="checkbox"] {
	flex: none;
	margin: 2px 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--green-ink);
}
/* The plugin prints the terms with an inline `font-size:0.9em; opacity:0.8`.
   The opacity would drop muted text under 4.5:1 on the green-soft card, so both
   inline values are overridden here (the only place `!important` earns its keep
   in this file — it is beating an inline style, which nothing else can). */
.gift .rosen-credits-optin .description {
	display: block;
	margin: 0;
	font-size: 12.5px !important;
	line-height: 1.55;
	color: var(--muted);
	opacity: 1 !important;
}

/* ── the delivery row in either summary panel ──────────────────────────────
   The summary states the delivery; it does not negotiate it. Both panels now
   print one label and one figure, with the method's name as the sub-line
   concept.css:1100 draws for exactly this (`.sum-row em`). On the checkout the
   row is a <tr> inside `.rosen-review`, whose <td> style.css:470 had pushed
   left so a radio list would read — there is no list in it any more, so the
   figure goes back to the right where every other figure in the panel is. */
.rosen-review .woocommerce-shipping-totals td { text-align: right; }
.rosen-review .woocommerce-shipping-totals th { padding-right: 14px; }
.rosen-review .woocommerce-shipping-totals th em {
	display: block;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--muted);
	margin-top: 2px;
}

/* ── "Use all my credit", and the amount behind it ─────────────────────────
   MONEY-FACING, and the client's first complaint this round: the amount field
   never hid, so the control's whole grammar — tick for all of it, untick to
   name a number — was invisible.

   `concept.css:1083 .sum-credit-part { display:flex }` is a class selector
   (0,1,0), and it beats the UA stylesheet's `[hidden] { display:none }`
   (0,0,0). Nothing in concept.css puts it back. PHP and the script both set
   the attribute correctly; the browser was told to keep showing the box
   anyway. concept.css is the design's file and not this workflow's to edit,
   so the reset is asserted here, on the attribute, at (0,2,0). */
.sum-credit-part[hidden] { display: none; }

/* The balance line under the tick, when the ceiling for this basket is not
   the whole wallet. `.f-note` is the design's own small print. */
.sum-credit .f-note { margin: 6px 0 0; }
.sum-credit-part .f-note { margin: 0; }

/* ── the order panel's item list ───────────────────────────────────────────
   Screenshot 11: names wrapping over four lines, and broken rules cutting
   between an item's image and its name.

   BOTH come from the same mistake — `.minis` and `.mini` were put on the
   <tbody> and the <tr>, and concept.css makes both `display:grid`. A grid box
   inside a table formatting context is shrink-to-fit, so the item list laid
   itself out in 200px of a 307px table and gave the name column 60px; and
   each of the three cells became a grid ITEM at its own vertical offset, so
   woocommerce.css's `td { border-top: 1px }` painted three part-width stubs at
   three different heights.

   review-order.php now puts the concept's `.mini` grid on a <span> inside ONE
   cell that spans the panel, which is the element the rule was written for and
   the width it was written against. The <tbody> goes back to being a row
   group. What is restated below is only what `.minis` gave the block as a grid
   container: the 12px rhythm between items and the hairline that closes the
   list (concept.css:1110). */
.woocommerce table.rosen-review { border: 0; border-radius: 0; }
.rosen-review tbody.minis { display: table-row-group; }
.rosen-review tbody.minis > tr { display: table-row; }
.woocommerce table.rosen-review tbody.minis > tr > td {
	display: table-cell;
	border: 0;
	padding: 0 0 12px;
}
.woocommerce table.rosen-review tbody.minis > tr:last-child > td { padding-bottom: 14px; }
.rosen-review .mini { width: 100%; }
/* style.css:445 styles `.cart_item .product-name` as the flex row this used to
   be; the name is a plain line inside the grid now. */
.rosen-review .mini-name {
	display: block;
	padding: 0;
	text-align: left;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.35;
}
.rosen-review .mini-total {
	padding: 0;
	text-align: right;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
}

/* The totals rows underneath keep the concept's `.sum-row` rhythm, which has
   no rules between its lines — only `.sum-total` carries one. woocommerce.css
   draws a border on every `td` of a `.shop_table`; style.css:440 resets that
   table's padding but never its border, so the panel arrived ruled like a
   spreadsheet. */
.woocommerce table.rosen-review tfoot th,
.woocommerce table.rosen-review tfoot td { border-top: 0; }
.woocommerce table.rosen-review tfoot tr.order-total th,
.woocommerce table.rosen-review tfoot tr.order-total td {
	border-top: 1px solid var(--line);
	padding-top: 15px;
}

/* ── the payment step ──────────────────────────────────────────────────────
   `#payment` is WooCommerce's own lavender-grey panel (`background:#ebe9eb`,
   `border-radius:5px`), and it appears nowhere in the design: the concept
   draws two bare `.pick` cards straight onto the page and a full-width pay
   button under them. The panel also inset the button 22px from the column it
   is supposed to span. Core's selector carries the id, so this one does too. */
.co-main .co-step--pay #payment,
.co-main .co-step--pay #payment.woocommerce-checkout-payment {
	background: none;
	border-radius: 0;
	padding: 0;
	border: 0;
}
.co-main .co-step--pay #payment .form-row {
	padding: 0;
	border-top: 0;
}
.co-main .co-step--pay #payment .place-order { margin: 0; padding: 0; }
/* The concept's pay button is the full width of the column. */
.co-main .co-step--pay #place_order { width: 100%; }

/* The gateway list itself. `#payment ul.payment_methods { padding: 1em }` is
   core's, and it carries the id — so the cards were inset 17px inside a column
   the concept draws them across. Same `.pick` geometry as the delivery cards
   two steps up, so the two steps read as one screen. */
.co-main .co-step--pay #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
	border: 0;
}
.co-main .co-step--pay #payment ul.payment_methods > li { padding: 0; border: 0; background: none; }
.co-main .co-step--pay #payment ul.payment_methods > li > label.pick {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 13px;
	width: 100%;
	margin: 0;
	float: none;
}

/* ── the summary card is not a scroller ────────────────────────────────────
   style.css:389 caps `.co-aside .sum` at `calc(100vh - 106px)` and gives it
   `overflow-y:auto`. With a five-line order that hid 423px of the card — the
   total, the credit control and the trust line were all below a fold inside a
   card that does not stick, so scrolling the page moved it out of reach rather
   than into view, and the 17px scrollbar was what squeezed the item table to
   307px. The concept has no such rule and its summary measures 372x699,
   unclipped. Same specificity as the rule it answers; this sheet loads after
   style.css (functions.php:61-86). */
.co-aside .sum {
	max-height: none;
	overflow: visible;
}

/* ── minimum tap targets ───────────────────────────────────────────────────
   The cart's quantity stepper and its remove button measure 32x36 and 30x30,
   both under the 44px a finger needs. The drawn size is the design's and does
   not change; what changes is the box that answers the tap. */
@media (max-width: 700px) {
	.shop-main .qty button,
	.shop-main .line-x {
		position: relative;
	}
	.shop-main .qty button::after,
	.shop-main .line-x::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
	.sum-credit .check,
	.co-main .woocommerce-form__label-for-checkbox {
		padding: 6px 0;
	}
}

/* ── the checkout's paired fields fill their column ─────────────────────────
   MEASURED, not guessed. concept/checkout.html and the store's checkout at the
   same 1425px viewport put the "Ship to" fields in an identical container —
   784px wide, `grid-template-columns: 384px 384px`. In the design each paired
   field then FILLS its 384px column. In the store each one was 180px.

   180 is 47% of 384. woocommerce-layout.css carries

       .woocommerce form .form-row-first,
       .woocommerce form .form-row-last { width:47%; float:left }

   from the days when that plugin laid its forms out with floats. style.css:376
   already undoes the same stylesheet's floats for `.col2-set`, but the form
   rows were never included, so First/Last name, Town/ZIP and State/Country all
   rendered a little over a third of the width the design draws them at — with
   a dead gutter beside each. It is the narrow-box look in the client's
   checkout screenshot.

   Specificity: core's selector is (0,2,1) — two classes and the `form`
   element — so `.co-main .form-row-first` (0,2,0) loses to it and being later
   in the cascade does not help. Matching its shape and adding `.co-main`
   makes this (0,3,1), which wins on merit rather than on !important. Scoped to
   `.co-main` so nothing outside the checkout column changes.

   Element order matters here and is easy to get backwards: the checkout's
   `<form class="checkout">` is the ANCESTOR of `.co-main`, not a descendant —
   form.checkout > .co-grid > .co-main > .col2-set > .co-step > the wrapper.
   So `form` comes BEFORE `.co-main` in the selector. */
.woocommerce form .co-main .form-row-first,
.woocommerce form .co-main .form-row-last,
.woocommerce-page form .co-main .form-row-first,
.woocommerce-page form .co-main .form-row-last {
	width: auto;
	float: none;
}

/* ── ...and go full width on a phone ────────────────────────────────────────
   The design pairs those fields in two columns and then COLLAPSES the pair to
   one column on a narrow screen:

       concept.css:645   .form--grid{grid-template-columns:1fr 1fr}
       concept.css:1152  @media (max-width:620px){ .form--grid{grid-template-columns:1fr} }

   style.css:395-397 maps WooCommerce's wrappers onto the first of those two
   rules; the second was never carried over, so the pairs stayed side by side
   all the way down to the narrowest phone. Same breakpoint as the design, same
   selectors as style.css — this file is enqueued after style.css
   (functions.php:61-86), so equal specificity plus later source order is all
   the override needs here. */
@media (max-width: 620px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

/* ── K2: the delivery chooser inside the cart's 372px summary panel ────────
   The cart now OFFERS the delivery instead of stating it (decision K2), and it
   offers it with the same `.pick` cards the checkout's step 3 uses — one
   delivery control in the design rather than two. The only difference is the
   room: step 3 has an 830px column, the summary panel has 372px, so the cards
   are drawn in a compact form.

   Everything about how a `.pick` LOOKS still comes from concept.css:1150-1160 —
   the border, the radius, the green picked state, the accent colour. What is
   said here is padding, gap and type scale, and nothing else.

   The `ul` sits outside the `.sum-row` on purpose: `.sum-row` is a
   label/figure pair with `justify-content:space-between`, and a list dropped
   into its second column is screenshot 11 again. */
.sum-ship { margin: 2px 0 4px; }
.woocommerce ul.picks--sum { gap: 7px; }
.woocommerce ul.picks--sum li label.pick {
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
}
.woocommerce ul.picks--sum li label.pick input { width: 15px; height: 15px; }
.woocommerce ul.picks--sum li label.pick strong { font-size: 13.5px; margin-bottom: 0; }
.woocommerce ul.picks--sum li label.pick span { font-size: 12.5px; }
.woocommerce ul.picks--sum li label.pick b { font-size: 13.5px; font-weight: 600; }

/* The summary panel's own type weight is inherited by everything inside it
   (style.css sets `.cart_totals #shipping_method` to 13.5/400), and a `.pick`
   is a card rather than a totals row — so the price inside one is the card's
   own weight, not the row's. */
.cart_totals ul.picks--sum { font-size: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   The line's item data — "What MUA are you using?: Straumann — BLX / BLC".

   `wc_get_formatted_cart_item_data()` emits a bare <dl><dt><dd>, and nothing
   styled it here: the concept's cart has no line data because the concept was
   drawn before the MUA question existed (P1), so `.line-body dl` inherited the
   document's 17px body type, `display:block` on both dt and dd, and the UA's
   1em block margin. Measured on /cart/ with one gated screw in it: the <dl>
   rendered 396 x 116px and the cart line 296px tall, which pushes the stepper
   and the figure out of the row. Fifteen of the store's thirty-nine products
   ask the question, including every Rosen Screw®, so this is the common line
   rather than an edge case.

   The values are the checkout's, at style.css:465-467 — the same data is drawn
   there already and the two screens have to read alike. */
.line-body dl.variation { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.line-body dl.variation dt,
.line-body dl.variation dd { display: inline; margin: 0; }
.line-body dl.variation dt { font-weight: 600; }
.line-body dl.variation dd p { display: inline; margin: 0; }
/* dt and dd are inline now, so the pair needs its own line break between one
   answer and the next when a plugin adds a second. */
.line-body dl.variation dd { margin-right: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   PAY FOR AN EXISTING ORDER

   This is a checkout endpoint, but not the normal checkout form. Core floats
   #order_review to half width and paints #payment as a grey inset panel. The
   template keeps both ids for WooCommerce/gateways and places them in the
   catalogue's normal main/summary grid instead.
   ══════════════════════════════════════════════════════════════════════════ */

.rosen-order-pay#order_review {
	float: none;
	width: auto;
	margin: 0;
}

.rosen-order-pay__grid { align-items: start; }
.rosen-order-pay .shop-head p { max-width: 620px; margin: 8px 0 0; font-size: 15px; color: var(--muted); }

.rosen-pay-order { overflow: hidden; }
.rosen-pay-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 19px 22px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(145deg, #fff, #f8faf8);
}
.rosen-pay-order__head h2 { margin: 0; font-size: 18px; }
.rosen-pay-order__head span {
	padding: 5px 10px;
	border: 1px solid #d6e4c7;
	border-radius: 999px;
	background: var(--green-soft);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--green-ink);
}

.woocommerce table.rosen-pay-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.rosen-pay-table th,
.woocommerce table.rosen-pay-table td { padding: 15px 22px; border-top: 1px solid var(--line); }
.woocommerce table.rosen-pay-table thead th {
	border-top: 0;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}
.woocommerce table.rosen-pay-table th.product-quantity,
.woocommerce table.rosen-pay-table td.product-quantity { width: 74px; text-align: center; }
.woocommerce table.rosen-pay-table th.product-total,
.woocommerce table.rosen-pay-table td.product-subtotal,
.woocommerce table.rosen-pay-table td.product-total { width: 130px; text-align: right; white-space: nowrap; }
.woocommerce table.rosen-pay-table tbody .product-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.woocommerce table.rosen-pay-table tbody .product-name .wc-item-meta { margin: 5px 0 0; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.woocommerce table.rosen-pay-table tbody .product-name .wc-item-meta li { margin: 0; }
.woocommerce table.rosen-pay-table tbody .product-quantity { color: var(--muted); }
.woocommerce table.rosen-pay-table tbody .product-subtotal { font-weight: 650; color: var(--ink); }
.woocommerce table.rosen-pay-table tfoot th { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.woocommerce table.rosen-pay-table tfoot td { text-align: right; font-size: 14px; font-weight: 650; color: var(--ink); }
.woocommerce table.rosen-pay-table tfoot tr:last-child th,
.woocommerce table.rosen-pay-table tfoot tr:last-child td { padding-top: 18px; padding-bottom: 18px; font-size: 16px; font-weight: 700; color: var(--ink); background: #fbfcfb; }

.rosen-pay-panel { position: sticky; top: 154px; }
.rosen-pay-panel__lede { margin: -8px 0 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rosen-pay-panel #payment.woocommerce-checkout-payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.rosen-pay-panel #payment ul.payment_methods {
	display: grid;
	gap: 9px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none;
}
.rosen-pay-panel #payment ul.payment_methods > li { margin: 0; padding: 0; border: 0; background: none; }
.rosen-pay-panel #payment ul.payment_methods > li > label.pick {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	width: 100%;
	margin: 0;
}
.rosen-pay-panel #payment ul.payment_methods img { max-width: 84px; max-height: 22px; width: auto; }
.rosen-pay-panel #payment .payment_box {
	margin: 8px 0 16px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--wash);
	font-size: 13px;
	line-height: 1.5;
	color: var(--body);
}
.rosen-pay-panel #payment .payment_box p:last-child { margin-bottom: 0; }
.rosen-pay-panel__submit { margin: 0; padding: 0; border: 0; }
.rosen-pay-panel__submit #place_order { width: 100%; justify-content: center; }
.rosen-pay-panel__submit .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.rosen-pay-panel__trust { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
	.rosen-pay-panel { position: static; }
}

@media (max-width: 620px) {
	.rosen-pay-order__head { padding: 16px; }
	.woocommerce table.rosen-pay-table thead { display: none; }
	.woocommerce table.rosen-pay-table tbody,
	.woocommerce table.rosen-pay-table tbody tr { display: block; }
	.woocommerce table.rosen-pay-table tbody tr { padding: 14px 16px; border-top: 1px solid var(--line); }
	.woocommerce table.rosen-pay-table tbody td,
	.woocommerce table.rosen-pay-table tbody td.product-quantity,
	.woocommerce table.rosen-pay-table tbody td.product-subtotal {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		padding: 4px 0;
		border: 0;
		text-align: right;
	}
	.woocommerce table.rosen-pay-table tbody td::before { content: attr(data-title); font-size: 11px; font-weight: 650; color: var(--muted); }
	.woocommerce table.rosen-pay-table tbody td.product-name { display: block; padding-bottom: 7px; text-align: left; }
	.woocommerce table.rosen-pay-table tbody td.product-name::before { display: none; }
	/* WooCommerce's small-screen table rule turns every footer cell into a
	   separate block and adds `attr(data-title) ": "` to every td. Footer
	   values have no data-title, so that produced a literal orphan colon and
	   split each total across two rows. Keep the semantic table markup for
	   gateways, but draw each footer row as one label/value pair here. */
	.woocommerce table.rosen-pay-table tfoot tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		border-top: 1px solid var(--line);
	}
	.woocommerce table.rosen-pay-table tfoot th,
	.woocommerce table.rosen-pay-table tfoot td {
		display: block;
		width: auto;
		padding: 12px 16px;
		border-top: 0;
		background: transparent;
	}
	.woocommerce table.rosen-pay-table tfoot th { text-align: left; }
	.woocommerce table.rosen-pay-table tfoot td { text-align: right !important; }
	.woocommerce table.rosen-pay-table tfoot td::before { display: none !important; content: none !important; }
	.woocommerce table.rosen-pay-table tfoot tr:last-child { background: #fbfcfb; }
}
