/*
 * WooCommerce pieces the shop stylesheet does not cover: notices, the cart, the
 * checkout, the account pages and the order lines. Loaded after WooCommerce's own
 * stylesheets so these rules win.
 */

/* ---------- core's own tokens, re-pointed ----------

   WooCommerce reads a few values from custom properties on :root and writes its
   rules against those properties rather than a literal. Re-declaring the
   property beats editing its selectors: a selector fight has to tie core's
   specificity and win on order at every consumer, while one declaration reaches
   all of them. This file loads after woocommerce.css, so the same property
   declared here wins.

   --wc-red is core's red for the required marker, invalid fields, coupon errors,
   out-of-stock and the cart's remove link. The last two wear `!important`, which
   is why only the property can move them. The shop's red for a field that wants
   attention is --danger, already used by our own notices.

   --wc-form-* is what core's `.form-row` controls draw with: a default border of
   `rgba(32,7,7,.8)` at a 4px radius and a hard `#000` for the text, none of
   which is a colour this shop uses. The values below are the ones our own
   checkout rules already give `input.input-text`, so a select and a textarea
   stop disagreeing with the input beside them. */
:root {
  --wc-red: rgb(var(--danger));
  --wc-form-border-color: var(--line-strong);
  --wc-form-border-radius: 8px;
  --wc-form-color-text: rgb(var(--color-foreground));
  --wc-form-color-background: rgb(var(--color-background));
}

/* Notices use the same voice as the rest of the shop. */
.woocommerce-notices-wrapper { margin: 0 0 18px; }

/* WooCommerce prints that wrapper even when it holds nothing, and its margin
   would push the whole page down on a product with no notices. Empty means it
   takes no room. */
.woocommerce-notices-wrapper:empty { margin: 0; }

/* Core draws a notice icon with an absolutely positioned ::before whose glyph
   (\e028) comes from the "WooCommerce" icon font — and nothing in this theme ever
   enqueues that font, so the glyph has no face and renders as an empty box
   (◻) in every notice on the site. The 3px left border already says which kind
   of notice this is, so the icon is dropped and the left padding it needed goes
   with it. If that font is ever enqueued, delete this rule. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* The notice's own box: one row, 10px of padding above and below the line it
   holds. It is a bar and not a panel, so it reads as one — 14px of padding made
   a 56px action fit too loosely and the bar 86px tall (measured 2026-10-15 at
   1470px, product page and cart alike).

   The action INSIDE the bar is not this file's business: `View cart` is an
   `a.button`, so it wears the tertiary BOX (style.css keeps the fill, the ink and
   both rings on the primary). That is what brought the bar to 66px — 10 + 44 + 10
   + its 2px of border. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 14px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid rgb(var(--color-foreground));
  border-radius: var(--radius-panel);
  background: rgb(var(--chip));
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  font-weight: 600;
  list-style: none;
}

.woocommerce-error { border-left-color: rgb(var(--danger)); color: rgb(var(--danger)); }
.woocommerce-info { border-left-color: rgb(var(--color-button)); }
/* THE BAR IS AS WIDE AS WHAT IT SAYS, not as wide as the page. WooCommerce prints
   a notice outside any column, so a short line in a 1350px bar left most of the
   row as background — the owner's screenshots of the added-to-cart, the removed
   and the empty bars, 2026-10-15. `fit-content` keeps the left edge on the
   content's own left edge and lets the bar end where its text and its action do;
   `max-width: 100%` is what lets a long one wrap instead of overflow (357 of
   393px at 393px).

   THE ROW IS A GRID, not a float. `woocommerce-layout.css` floats the action right
   (`.woocommerce .woocommerce-message .button{float:right}`), and a float sits at
   the TOP of the line box, so the 16.8px line hugged the bar's top edge while the
   44px action filled it — the owner's first screenshot. Grid also settles the
   trailing tab core's template prints after the link: as a flex item it was a
   zero-width item at the end that took one `gap` with it, and the action sat 16px
   short of the right edge (measured 2026-10-15); as a grid item it lands in a
   second row of its own, which has no height at all.

   NOT `.woocommerce-error`: that notice is a `<ul>` of rows, and a grid would lay
   them out side by side. It hugs, and its rows stack. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  width: fit-content;
  max-width: 100%;
}

.woocommerce-message,
.woocommerce-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
}

.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: inherit; }

/* ---------- buttons ----------
   The button standard lives in style.css — one base, three tiers. Nothing here
   restates a size, a weight or a colour; this file only carries what WooCommerce's
   own selectors force on us.

   The reason it cannot be left alone: core ships
   `.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button
   { display: inline-block; … }`, and `:where()` is zero-specificity, so it ties
   with style.css and core gets the last word by being earlier in the cascade.
   The inline-block then keeps `padding: 0 36px` while the box is 56px tall and
   only ~22px of glyphs, so the label sits against the top edge with ~34px of dead
   space beneath. Restating `display: inline-flex; align-items: center` settles it:
   more specific than core, and later. */

/* Every `a.button` the theme styles needs that pair, which is why it is its own
   rule rather than a line inside the block below. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* WooCommerce's empty-cart link is `class="button wc-backward"`, so it is a
   primary button like any other action. */
.woocommerce a.button.wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Core hardcodes `.button.alt` to WooCommerce purple (#7f54b3) at 22.5px — the
   Proceed-to-checkout and Place-order buttons, the two largest buttons on the
   site. Nothing in the theme overrode it, so they were the only purple things in
   a black-and-gold shop. Back to the primary tier, like every other action.
   The `font-size` is needed because core's rule is the one that would otherwise
   set it; everything else comes from the base. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-size: 1.5rem;
}

/* The disabled variant of the base lives in style.css with the rest of the
   button; it is not repeated here. What core does reach from here are two
   cart-page buttons whose own selectors the base cannot outrank — restating the
   exact selector wins on source order, which is what this file has.

   `.woocommerce table.cart td.actions .button { display: block; width: 100% }`
   in woocommerce-smallscreen.css is 0,2,3. It made *Update cart* a block box,
   which cost it the base's flex centring the same way `display: block` cost the
   footer buttons theirs. This shop's cart prints no button of its own in that
   cell since 1.0.111; the rule stays for whatever a plugin prints into
   `woocommerce_cart_actions`, which is now the cell's only reason to exist. */
.woocommerce table.cart td.actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button
   { display: block; font-size: 1.25em; padding: 1em }` is 0,3,1, so *Proceed to
   checkout* rendered 58px tall on core's padding instead of the scale's 56px.
   The box is the column's width, which is what the reference's own button is
   (its *Check out* fills its 420px column); core made it `display: block` and
   this rule's switch to `inline-flex` shrank it to its own label — measured 266px
   in a 648px column before this. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 36px;
  font-size: 1.5rem;
}

/* ---------- cart ---------- */

/* `table.` is load-bearing, and a rule that loses says nothing. Core's
   `.woocommerce table.shop_table` is 0,2,1 and `.woocommerce table.shop_table
   th/td` is 0,2,2; the shorter `.woocommerce-cart .shop_table` (0,2,0) lost to
   both even from this later file, so the cart table kept core's
   `border-collapse: separate`, its 1px/5px-radius outer box and its
   `9px 12px` cell padding while the three rules below read as applied.
   Measured before the fix: `separate`, border `1px` on all four sides, cell
   padding `9px 12px`. Matching core's shape ties the table rule — ours wins on
   order, woo.css loads after woocommerce.css — and the cells carry the extra
   type selector that ties theirs. */
.woocommerce-cart table.shop_table { width: 100%; border: 0; border-radius: 0; border-collapse: collapse; }
.woocommerce-cart table.shop_table th { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
/* Cell edges. Core's `.woocommerce table.shop_table td` (0,2,2) draws the top
   hairline as `color-mix(in srgb, currentcolor 20%, transparent 80%)`, and a rule
   that never mentions the property cannot move it: our table rules only ever
   declared the bottom edge, so every row in the shop carried a 20% line above it
   and an 8% line below.

   The second and third selectors are the totals table, which core reaches
   through `.woocommerce-cart .cart-collaterals .cart_totals tr td/th` (0,3,2) and
   paints in its own `#E9E6ED`. `table.shop_table` on the same chain is 0,3,3 and
   wins on the type count. Core also zeroes the first row's cells with
   `… .cart_totals tr:first-child td` (0,4,1) — one class more, so it still wins
   and the first row keeps the missing top edge it has always had.

   `tbody th` and `tfoot td` are in core's own list of what carries the 20% edge,
   so they are named here too; without them the totals table's label cells kept the
   grey one while the value cells beside them went to `--line`. */
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td { border-top: 1px solid var(--line); }

.woocommerce-cart table.shop_table td { padding: 16px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* The account's tables wear the cart's treatment. The orders table kept core's
   frame — `1px` at 20% ink, a 5px radius, `separate` collapse — because 1.0.85
   zeroed the cart's table and named no other. These two rules give it the same
   shape: 0,2,1 chains that tie core's and win on order, the same way the cart's
   do, and the cart's paddings so the two tables read as one family. */
.woocommerce-account table.shop_table { width: 100%; border: 0; border-radius: 0; border-collapse: collapse; }
.woocommerce-account table.shop_table th { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.woocommerce-account table.shop_table td { padding: 16px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* The cart row's thumbnail. WooCommerce core hardcodes
   `.woocommerce-cart table.cart img { width: 32px }`, which left a 32px picture
   in a 120px cell. The reference's own cart stylesheet sizes it instead:
   `.cart-item__image { max-width: calc(10rem / var(--font-body-scale)) }` inside a
   `.cart-item__media { width: 10rem }` column. At this theme's 12px root and a
   body scale of 1.2 that is a 100px picture in a 120px column — the same ratio,
   copied as the reference wrote it rather than as the pixel it happens to be.

   The selectors carry `table.cart td.` on purpose. Core's rule is
   `.woocommerce-cart table.cart img`, which is two classes AND two type
   selectors — 0,2,2 — so the shorter `.woocommerce-cart .product-thumbnail img`
   at 0,2,1 loses to it even from a later file. Match its shape and add one
   class: 0,3,2. */
.woocommerce-cart table.cart td.product-thumbnail { width: 10rem; }
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart td.product-thumbnail a {
  display: inline-block; width: auto; box-shadow: none;
}
.woocommerce-cart table.cart td.product-thumbnail img {
  height: auto;
  max-width: calc(10rem / var(--font-body-scale));
}

.woocommerce-cart .cart_totals { margin-top: 28px; }
.woocommerce-cart .cart_totals table { width: 100%; }

/* The totals column is the reference's own width. Core sets
   `.woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }`,
   which spends 648px of this shop's 1350px page on a six-row table, and the
   reference's own column is 420px there — measured at 1470px: x990, 31% of the
   page, with its own Buyer Protection block built for 424px. Same selector and a
   later file, so this wins the tie; core's smallscreen sheet takes the column
   full width below 769px and is left alone. */
@media (min-width: 769px) {
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals { width: 420px; }
}
/* The same specificity loss as the table above, one row down: at 0,2,1 these
   lost to core's `.woocommerce table.shop_table th/td` (0,2,2) and the totals
   kept core's `9px 12px`. `.cart_totals` plus the two type selectors is 0,2,3. */
/* Core gives this table's `th` `width: 35%`, which is 147px of the 420px column
   and 18px less than `Coupon: black10` needs — the label wrapped after "Coupon:"
   and put the code on a second line (measured: the label is 165px unwrapped, the
   th 147px, the value cell 273px). With only the subtotal and coupon rows left in
   this table, letting the browser size the two cells by content keeps both the
   label and `-$3.60 [Remove]` on one line each. Same selector shape as core's
   rule — three classes and two elements — and a later sheet, so this wins the tie. */
.woocommerce-cart .cart_totals table.shop_table th { text-align: left; padding: 8px 0; width: auto; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; padding: 8px 0; }

/* ---------- checkout ---------- */

/* The form is the page's grid: `minmax(0, 1fr)` for the form column and a
   360-480px one for the summary. WooCommerce used to print its coupon toggle and
   coupon form as siblings of this form, outside it, and a second grid on the
   wrapper existed to place them; the shop takes no coupon above the card now, so
   the wrapper is a plain block again and this form is the only grid here. The
   480px track is the reference store's own summary column, which carries 40px of
   padding, so the card's content measures the same 400px its `<aside>` does. */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  gap: 0 40px;
  align-items: start;
}

/* Every child of the form that holds a column is placed explicitly; the rest of
   `#order_review` is the left column's own flow.

   `#order_review` is a `display: contents` box: the summary card and the payment
   box are its children, and the reference store puts the first in a column of its
   own and the second under the address fields. The card is the review table
   itself, and it spans every row the left column asks for so it has room to stay
   in view while the shopper fills the form in. */
.woocommerce-checkout .col2-set { grid-column: 1; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }

.woocommerce-checkout #order_review { display: contents; }

/* Anything else WooCommerce or a gateway prints inside `#order_review` — the
   payment box, the policy row, a gateway's own message or button wrapper —
   stays in the form column, in the order it was printed. */
.woocommerce-checkout #order_review > * { grid-column: 1; }

/* The summary: the reference store's own panel, and nothing drawn around it.
   Measured on its checkout at 1470px — a sticky 480px column with 40px of
   padding, its `<aside>` 400px inside it, white on white, no border and no
   radius. This table is that panel: the track is 480, the 40px is its padding,
   and `border-spacing: 0` keeps the two columns on their own edges. It stuck at
   top 20px while it had a frame; the reference's wrapper sticks at 0. */
.woocommerce-checkout #order_review > .shop_table {
  grid-column: 2;
  grid-row: 1 / span 24;
  align-self: start;
  position: sticky;
  top: 0;
  border-collapse: separate;
  border-spacing: 0;
  padding: 40px;
}

/* Then the contents, in the reference's own order and at its own sizes. */
#order_review .shop_table { width: 100%; }
#order_review .shop_table th,
#order_review .shop_table td { padding: 0; border: 0; text-align: left; }

/* ---------- a line item: picture, name over answers, price ---------- */

/* 64px with a 16px radius on its own grey ground, the name and the answers in
   one column beside it, the price at the row's right edge — measured on the
   reference. The three sit on one flex line inside the name cell: the table
   still gives the price its own cell, which is what puts it on the row's right
   edge, and `width: 1px` on that cell is the shrink-to-fit that keeps the name's
   column at the rest of the 400px. */
.woocommerce-checkout #order_review tr.cart_item td { padding: 0 0 20px; vertical-align: top; font-size: 14px; }
.woocommerce-checkout #order_review tr.cart_item td.product-name { width: 100%; }
.woocommerce-checkout #order_review tr.cart_item td.product-total { width: 1px; white-space: nowrap; padding-left: 14px; }

.woocommerce-checkout #order_review .gs-line { display: flex; align-items: flex-start; gap: 14px; }
.woocommerce-checkout #order_review .gs-line__media { position: relative; flex: 0 0 64px; width: 64px; height: 64px; }
.woocommerce-checkout #order_review .gs-line__media img {
  display: block; width: 64px; height: 64px;
  object-fit: cover; border-radius: 16px; background: #ececec;
}
.woocommerce-checkout #order_review .gs-line__body { flex: 1 1 auto; min-width: 0; }
.woocommerce-checkout #order_review .gs-line__title { display: block; font-size: 14px; line-height: 18.9px; }

/* The quantity rides the picture's corner. The reference's live page draws no
   badge — it prints `× 1` inline — so the shape is its screenshot's and the 20px
   disc is this theme's own size for a control this small. */
.woocommerce-checkout #order_review .gs-line__qty {
  position: absolute; top: -6px; right: -6px;
  display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: #000; color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}

/* The answers: one line each, `Label: value`, at the reference's 12px and its
   56% ink. Core floats the label and blocks the value
   (`.woocommerce td.product-name dl.variation dt`), which is what put every
   value on the line below its label before this rule; the same two fixes the
   cart took in 1.0.95 apply here, and the break sits on the label for the reason
   recorded there. */
/* The answers are capped and scroll, at the owner's request (2026-10-15): a design
   with a dozen answers — the slot designs, where every letter of a name brings its
   own quote, are the ones that reach that — otherwise grows the card until the
   discount field and the totals are a screen away. 162px is ten of these rows
   (12px on 16.2px), and the owner's reference shows about eleven of its own, which
   are drawn larger, so the same block of text. The picture and the name above stay
   where they are and do not scroll; the browser's own scrollbar is left alone,
   which is what every other scrolling box in this shop does — on macOS it appears
   while the list is being scrolled. The 6px on the right keeps the text off it on
   the platforms whose scrollbars take space. */
.woocommerce-checkout #order_review .gs-line dl.variation {
  margin: 6px 0 0;
  max-height: 162px;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 12px; line-height: 16.2px;
  color: rgba(14, 14, 14, .56);
}
.woocommerce-checkout #order_review .gs-line dl.variation dt,
.woocommerce-checkout #order_review .gs-line dl.variation dd,
.woocommerce-checkout #order_review .gs-line dl.variation dd p {
  display: inline; float: none; clear: none; margin: 0; padding: 0;
  color: inherit; font-size: inherit; line-height: inherit;
}
.woocommerce-checkout #order_review .gs-line dl.variation dt:not(:first-child)::before {
  content: "\A";
  white-space: pre;
}

/* ---------- the discount field ---------- */

/* Between the items and the totals, where the reference keeps it: measured
   400x49 with a 12px radius and a 1px `#dedede` edge, the input filling the box
   and a 35px `Apply` inset 7px from its right edge. The gap above is the item
   row's own 20px, the gap below is this cell's 35px. */
.woocommerce-checkout #order_review tr.gs-review-discount > td { padding: 0 0 35px; }
.gs-discount {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  padding-right: 7px;
  border: 1px solid #dedede; border-radius: 12px;
  background: #fff;
}
.gs-discount:has( :focus-visible ) { border-color: rgb(var(--color-foreground)); }
.gs-discount__input {
  width: 100%; min-height: 0;
  padding: 13.5px 10px;
  border: 0; background: none; box-shadow: none;
  font: inherit; font-size: 14px; line-height: 18.9px; color: inherit;
}
.gs-discount__input:focus { outline: none; }
.gs-discount__input.has-error { color: inherit; }
.gs-discount__apply {
  height: 35px; padding: 0 10px;
  border: 0; border-radius: 12px;
  background: #f5f5f5; color: #000;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.woocommerce-checkout #order_review .coupon-error-notice {
  display: block; margin: 6px 0 0;
  font-size: 12px; line-height: 16.2px;
  color: #b32d2e;
}

/* The applied coupons, as chips under the field. The reference's own chip is the
   grey of this shop's `Apply` button with the code in the label size; its height,
   its 999px radius and the 14px glyphs are this theme's own values (the store
   that chip comes from is not one this shop measured, so there was nothing to
   copy but the shape). The `×` is a real control, so its box is 24px — the floor
   WCAG 2.2 takes for a link inside a sentence, which is the largest a control
   this size can be. */
.woocommerce-checkout #order_review .gs-coupon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; margin: 10px 8px 0 0; padding: 0 4px 0 10px;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 14px; font-weight: 600; line-height: 1;
}
.woocommerce-checkout #order_review .gs-coupon-chip__tag { flex: 0 0 14px; width: 14px; height: 14px; }
.woocommerce-checkout #order_review .gs-coupon-chip__remove {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: inherit; text-decoration: none;
}
.woocommerce-checkout #order_review .gs-coupon-chip__x { width: 12px; height: 12px; }

/* `Order discount`, the label over the coupon rows, and the coupon row itself:
   the tag mark with the code the shopper typed, then the amount at the row's
   right edge. Both are the reference's own arrangement. */
.woocommerce-checkout #order_review tr.gs-order-discount td {
  padding: 0 0 6px;
  text-align: left;
  font-size: 14px; font-weight: 400; line-height: 18.9px;
}
.woocommerce-checkout #order_review tr.cart-discount th { font-weight: 400; color: rgba(14, 14, 14, .56); }
/* Inline, not flex: taking a table cell out of the column model redistributes
   the row (the lesson the cart's action row taught in 1.0.95), and this is a
   `th` in a two-cell row. */
.woocommerce-checkout #order_review tr.cart-discount .gs-coupon-tag {
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px; margin-right: 6px;
}

/* `TOTAL SAVINGS`, under the total: the row size at weight 700, with the same
   tag mark, and the figure beside the label rather than at the right edge —
   which is how the reference prints it. Inline for the same reason as above. */
.woocommerce-checkout #order_review tr.gs-order-savings td {
  padding: 12px 0 6px;
  text-align: left;
  font-size: 14px; font-weight: 700; line-height: 18.9px;
}
.woocommerce-checkout #order_review .gs-order-savings__tag {
  display: inline-block; vertical-align: -3px;
  width: 16px; height: 16px; margin-right: 6px;
}
.woocommerce-checkout #order_review .gs-order-savings__amount { margin-left: 2px; }

/* ---------- the totals ---------- */

/* Subtotal, the coupon row and Shipping at the reference's 14px/400, its own
   24px pitch, and the figure at the row's right edge; the total one step up at
   18px/600 with the shop's currency code in front of the amount. */
.woocommerce-checkout #order_review tfoot th,
.woocommerce-checkout #order_review tfoot td {
  padding: 0 0 6px;
  font-size: 14px; font-weight: 400; line-height: 18.9px;
  vertical-align: top;
}
.woocommerce-checkout #order_review tfoot td { text-align: right; white-space: nowrap; }

/* Except the shipping cell: WooCommerce prints its own sentences there when no
   method applies — "Enter your address to view shipping options." measured 330px
   — and those wrap rather than widen the row. */
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td { white-space: normal; }

/* The `?` in the shipping row's label, and the panel it opens.
   Two boxes, on purpose: the button is 24px because it is a pointer target and
   WCAG 2.2's floor for one is 24px, and the circle drawn inside it is 14px with
   a 10px glyph so the mark reads a step below the 14px *Shipping* beside it. The
   2px pull to the left is what makes it sit close to the word: the 24px target
   already carries 5px of its own on each side of a 14px circle. Owner's
   corrections of 2026-10-15, twice: the first version drew a 15.6px glyph in a
   24px circle, which came out larger than the word, and the second still stood
   too far from it. */
.gs-ship-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  /* `middle` centres the mark on the label's own line, and the negative block
     margins keep the 24px pointer target out of the line box: without them the
     row measured 34px against the 25px of the rows around it. */
  vertical-align: middle; margin: -5px 0 -5px -2px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.gs-ship-help > span {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font: inherit; font-size: 10px; line-height: 1;
}

/* The panel: a dark backdrop, a white card, the card's own scrollbar. Above the
   drawer's 10 and the pay bar's 9 — it is the topmost thing this shop draws. */
.gs-modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gs-modal[hidden] { display: none; }
.gs-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 14, 14, .5); }
.gs-modal__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: 85vh;
  border-radius: 16px; background: #fff;
}
.gs-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 10px; }
.gs-modal__title { margin: 0; font-size: calc(var(--font-heading-scale) * 2.2rem); }
.gs-modal__close {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.gs-modal__close svg { width: 18px; height: 17px; }
/* The body scrolls inside the card, which is what keeps a long shipping page from
   making the panel taller than the viewport; the scrollbar is the browser's own,
   as everywhere else in this shop. */
.gs-modal__body { overflow-y: auto; padding: 0 20px 24px; }
.gs-modal__body h3 { margin: 18px 0 8px; font-size: calc(var(--font-heading-scale) * 1.6rem); }
.gs-modal__body p, .gs-modal__body li { font-size: 14px; line-height: 21px; }
.gs-modal__body p { margin: 0 0 12px; }
.gs-modal__body ul { margin: 0 0 12px; padding-left: 20px; }
.gs-modal__body li { margin: 0 0 6px; }
body.gs-modal-open { overflow: hidden; }

/* WooCommerce's own shipping list carries a 7px bottom margin on its `<li>`,
   which is a row of its own in a cart's totals and only padding here: measured,
   it made this row 34px against the 25px pitch of the two beside it. */
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals li { margin: 0; }
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
  padding-top: 12px;
  font-size: 18px; font-weight: 600; line-height: 24.3px;
}

/* The tax row is a row like any other — a label and a value at the same size as
   the Subtotal row above it (the owner's decision of 2026-10-15) — so it needs no
   rule of its own: the `tfoot` rules above style it. */
.woocommerce-checkout #order_review .gs-total-currency {
  font-size: 12px; font-weight: 400;
  color: rgba(14, 14, 14, .56);
}
.woocommerce-checkout #order_review tr.cart-discount td a { color: inherit; }

/* One column below 989px, in DOM order: customer details, the summary, the
   payment box, the policy row. The number matches the header's own breakpoint:
   above it the checkout has the room for two columns, and between 990px and
   989px it does not — measured at 901px the left column was 281px and the paired
   name fields 135px each.
   The summary also loses its 40px padding there: the card is full width, the
   page already carries its own gutter, and 40px each side would spend 80px of a
   393px screen on nothing. */
@media (max-width: 989px) {
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }

  .woocommerce-checkout #order_review > .shop_table { grid-column: 1; grid-row: auto; position: static; padding: 0; }
}

/* The summary's own heading is the reference store's own omission: its summary
   card opens with the items. The heading stays for the one-column layout below
   990px, where the card is preceded by the whole address form. */
@media (min-width: 990px) {
  .woocommerce-checkout #order_review_heading { display: none; }
}

.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout .form-row label { display: block; margin-bottom: 4px; font-weight: 700; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%; min-height: var(--inputs-height); padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: rgb(var(--color-background));
}

/* ---------- the checkout's boxes ----------

   Every single-line field on this page is a box with its label inside it, which
   is the reference store's own shape: the label sits where a placeholder would
   until the box is filled, then it rides up to the top of it. The field rows are
   taller than the shop's 54px input token for that second line — 64px — and the
   textarea and the checkboxes keep the plain label-over-control shape they have
   everywhere else on the shop.

   Two selectors do the work. `input:not(:placeholder-shown)` is why every
   single-line field carries `placeholder=" "` (inc/cart-checkout.php): an input
   with a real placeholder would show that text, and an input with a one-space
   one shows nothing, so the selector is a reliable "this box has been filled
   in". A `<select>` has no placeholder at all, so its label floats from the
   start — except while the selected option is the empty one core prints for a
   country with states, when it drops back to the middle. */

.woocommerce-checkout .form-row:has(input.input-text) > label,
.woocommerce-checkout .form-row:has(select) > label {
  position: absolute; z-index: 1; left: 13px; right: 12px;
  top: 50%; transform: translateY(-50%);
  margin: 0;
  font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: var(--muted);
  pointer-events: none;
}

/* A filled or focused box: the label rides up to the top of it. A select has no
   placeholder to be `:placeholder-shown`, so it counts as filled unless the
   option it is showing is core's own empty one.
   The 6px and the 1.2 line-height are what keep the floated label off the value
   below it: WooCommerce wraps the required `*` in its own span, and the label's
   line box measured 29px against the 17px of a plain 14.4px line. */
.woocommerce-checkout .form-row:has(input.input-text:focus) > label,
.woocommerce-checkout .form-row:has(input.input-text:not(:placeholder-shown)) > label,
.woocommerce-checkout .form-row:has(select):not(:has(select option:checked[value=""])) > label {
  top: 6px; transform: none;
  font-size: 1.2rem;
}

/* The box itself: room at the top for a floated label, and at the right for the
   `?` mark on the two fields that carry one. */
.woocommerce-checkout .form-row:has(input.input-text) input.input-text,
.woocommerce-checkout .form-row:has(select) select {
  min-height: 64px;
  padding: 24px 12px 8px;
}

.woocommerce-checkout .form-row:has(select) > label { right: 40px; }
.woocommerce-checkout .form-row:has(select) select { padding-right: 40px; }
.woocommerce-checkout .form-row:has(.gs-help) > label { right: 42px; }

/* An empty select paints its first option — *Select an option…* — in the middle
   of the box, right under the label that is standing in for it. The label is the
   placeholder here, so the option's own text goes; it comes back the moment an
   option is picked, when this rule stops matching. Options are painted by the
   browser's own popup, which does not inherit the select's colour, so they are
   set back to black for the list itself. */
.woocommerce-checkout .form-row:has(select option:checked[value=""]) select { color: transparent; }
.woocommerce-checkout .form-row:has(select option:checked[value=""]) select option { color: #000; }

/* WooCommerce hides the label of every optional address field from sighted
   shoppers — *Apartment, suite, unit, etc. (optional)* carries
   `screen-reader-text` — because the placeholder said the same thing. Here that
   label is the box's own, and a clipped 1x1px label is a box with no label at
   all. Scoped to this form's fields, so no other clipped label is unclipped. */
.woocommerce-checkout #customer_details .form-row > label.screen-reader-text {
  clip: auto; clip-path: none;
  width: auto; height: auto;
  overflow: visible;
}

/* City, State and ZIP share one line, which is the source store's own row:
   a third of the column each, so the last one's right edge lands on the same
   edge as *Street address* above it and the two gaps between them are what they
   already were.
   
   The source's row is three 158px fields and two 10px gaps inside a 497px
   column, and it fills, edges included. Measured before, at 1470px: three 266px
   cells at x60/x326/x591, the row ending 33px short of the column's right edge
   at x890. Each cell carries core's 3px of `.form-row` padding, which is the 6px
   seen between two boxes whose cells touch. */
.woocommerce-checkout .form-row.gs-third { width: 33.3333%; display: inline-block; vertical-align: top; }

@media (max-width: 749px) {
  .woocommerce-checkout .form-row.gs-third { width: 100%; display: block; }
}

/* The two section headings, and the *Sign in* link on the first of them. Core's
   own *Billing details* heading above them is turned off; these two are the
   reference store's, and they name the two things the column actually asks for —
   where the receipt goes, and where the parcel does. They carry `.form-row` and
   a `data-priority` of their own because WooCommerce's `address-i18n.js`
   re-appends every `.form-row` of this wrapper, sorted by that attribute, once
   the page loads (inc/cart-checkout.php). */
.woocommerce-checkout .form-row.gs-checkout-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 26px 0 14px;
}

/* WooCommerce's own clearfix puts a zero-width `::before` and `::after` on every
   `.form-row`, and a flex container counts both as items: with them in the row
   `space-between` had four gaps to fill and pushed the heading 230px in from the
   edge — measured at 1470px, "Contact" sat at x293 in an 850px row. Content
   `none` takes them out of the layout. */
.woocommerce-checkout .form-row.gs-checkout-section::before,
.woocommerce-checkout .form-row.gs-checkout-section::after { content: none; display: none; }

.woocommerce-checkout .form-row.gs-checkout-section--contact { margin-top: 0; }

.gs-checkout-section h3 { margin: 0; font-size: calc(var(--font-heading-scale) * 1.8rem); }
.woocommerce-checkout #customer_details .col-1 .woocommerce-billing-fields > h3 { display: none; }

.woocommerce-checkout .gs-checkout-signin { font-size: 1.5rem; text-decoration: underline; }

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 48%; display: inline-block; }
.woocommerce-checkout .form-row-wide { width: 100%; }

/* WooCommerce's `.woocommerce table.shop_table` draws a 1px box with a 5px
   radius and 20% ink around any shop_table. This one is the summary panel and
   has no frame at all — the reference store's is white on white. The rows' own
   spacing and the price's alignment are set with the rest of the card, in the
   checkout block above. */
.woocommerce-checkout #order_review > .shop_table { border: 0; border-radius: 0; background: none; }
#order_review .shop_table { width: 100%; }
#order_review .shop_table td.product-total { text-align: right; }

/* ---------- the payment block ----------

   Core plates `#payment` in its own purple — `rgba(129,110,153,.14)`, an
   alias of `#816f98` — and every method's description box in `rgb(220,215,226)`
   with a matching `::before` arrow. Two purple-greys in a black-and-gold shop,
   and neither is a token here: the description box drops to `--color-subtle`
   with its arrow following.

   These selectors tie core's and win on order. Core's are `.woocommerce-cart
   #payment` / `.woocommerce-checkout #payment` (one id, one class) and
   `… #payment div.payment_box` (one id, two classes, one type);
   `#payment.woocommerce-checkout-payment` reproduces those counts from this
   later file, which is the whole trick — add a class and the tie breaks.

   The plate itself is this shop's, and it lives on the `#payment` rule further
   down with the same class on it (the pay box is a card in the form column since
   1.0.96, not a block inside the summary). Carrying the class there is what lets
   the white card outrank core's lavender: a bare `#payment` is one id against
   core's one id and one class, and loses. */
#payment.woocommerce-checkout-payment div.payment_box {
  background-color: rgb(var(--color-subtle));
  color: var(--muted);
}
#payment.woocommerce-checkout-payment div.payment_box::before {
  border-bottom-color: rgb(var(--color-subtle));
}
/* The method list's own bottom rule is a third purple — `rgba(104,87,125,.14)`,
   from the same core family as the plate above, one element further in. */
#payment.woocommerce-checkout-payment ul.wc_payment_methods { border-bottom-color: var(--line); }

/* ---------- cart and checkout: reassurance, density, the pay bar ----------

   Everything below styles markup printed by inc/cart-checkout.php through
   WooCommerce's own actions, plus the one rule that puts the cart's own
   thumbnail back below 768px. No WooCommerce template is overridden. */

/* The cart's title row: the page H1 and the reference store's *Continue
   shopping* link. On its cart the link sits at the right-hand end of a flex row
   centred on the heading — measured 2026-10-15 at 1470px: the H1 is 52px/66px
   with no margins of its own, the link 19.2px in a 32px box, both centred in
   the same 66px row, and the link's box ends at 1410, the page's right gutter.
   The row therefore carries the heading's own font size, so the `.83em` block
   margins below resolve to the same 43.16px the bare H1 had, and the padding
   between the heading and the page content does not move. */
.gs-page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: .83em 0;
  font-size: calc(var(--font-heading-scale) * 4rem);
}
.gs-page-head h1 { margin: 0; }
.gs-continue-shopping { font-size: 1.6rem; color: var(--muted); text-decoration: underline; }

@media (max-width: 749px) {
  .gs-page-head { font-size: calc(var(--font-heading-scale) * 3rem); }
}

/* The cart's tax note. WooCommerce prints its own `tax_label` in this same slot
   but inline and only when the cart carries tax; the note is a block so it takes
   its own line under the amount, which is where the reference store's own line
   sits. 1.7rem is that line's 20.4px at this root's 12px.
   The selector is long because it has to be: core ships
   `.woocommerce-cart .cart-collaterals .cart_totals table small` at 0,3,2 with
   `color: rgb(118,118,118)` and `.woocommerce table.shop_table td small` at
   0,2,3 with `font-weight: 400`, so a bare `.gs-tax-note` loses both and the
   note rendered grey and light. Naming the same three ancestors and the class
   comes to 0,4,1, which wins on class count alone. */
.woocommerce-cart .cart-collaterals .cart_totals table small.gs-tax-note {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--muted);
}

/* The cart's Buyer Protection block, the reference store's own, measured on its
   cart 2026-10-15: a 50x55 cart-and-shield; the heading at 24px/700; the brand
   marks 38x24 with 1px between them; then two claims at 15.36px, each led by a
   16px filled tick, in the muted ink. Its column there is 424px wide and this
   block fills the totals column instead, so no width is fixed here. The 40px
   above it is the gap it keeps from the express buttons there: measured on the
   reference, the express row ends at 183px and the block starts at 223px. */
.gs-buyer-protection { display: flex; flex-direction: column; gap: 10px; margin: 40px 0 0; }
.gs-buyer-protection__head { display: flex; align-items: flex-start; gap: 10px; }
.gs-buyer-protection__shield { flex: 0 0 50px; width: 50px; height: 55px; }
.gs-buyer-protection__column { display: flex; flex-direction: column; gap: 6px; }
.gs-buyer-protection__title { margin: 0; font-size: 2rem; font-weight: 700; color: var(--muted); }
.gs-buyer-protection__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; }
.gs-buyer-protection__claim { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 1.28rem; color: var(--muted); }

/* The tick is the reference's `bi-check-square-fill`, painted in the same
   orange as the shield's face. */
.gs-buyer-protection__check { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: #ed7e00; }

/* ---------- the empty cart ----------

   The reference store's own empty page, measured live 2026-10-15 at 1470px: one
   centred column 1350 wide with `84px 0 12px` of padding, holding a 52px/400
   title with 36px under it, the 56px gold button — the primary tier, so nothing
   here sizes it — then `Have an account?` 66px below with the sign-in line under
   it. The Buyer Protection block follows at the cart's own 420px column,
   right-aligned and 40px lower, which is the margin that block already carries.
   The reference's empty page shows its *Customers also bought* row under this;
   this shop's suggestions need a cart item to read a category from, so an empty
   cart has none.

   The account title's 700 is this shop's section-title weight against the
   reference's 400, the same departure its section headings already carry. */
.gs-empty-cart__main { padding: 84px 0 12px; text-align: center; }
.gs-empty-cart__main h1 { margin: 0 0 36px; }
.gs-empty-cart__account-title { margin: 66px 0 6px; font-weight: 700; }
.gs-empty-cart__account-line { margin: 9.6px 0 19.2px; font-size: 1.6rem; color: var(--muted); }
.gs-empty-cart__protection { width: 420px; max-width: 100%; margin-left: auto; }

/* The order review's summary row. Measured at 393px with five items, the item
   rows are 1674px of a 5545px page and *Place order* sits below all of them.
   Below 989px those rows fold into this one — the count and the item subtotal,
   which is what the buyer is checking — and come back with one tap. Above
   989px the row is not drawn and the table is what it always was. */
.gs-review-summary { display: none; }
.gs-review-summary td { padding: 0 0 10px; }
.gs-review-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.gs-review-summary__total { margin-left: auto; font-weight: 700; }
.gs-review-summary__more { color: var(--muted); text-decoration: underline; }

/* ---------- the cart's summary column ---------- */

/* The cart prints the reference's summary and nothing else — the *Cart totals*
   heading, the shipping row and the *Total* row are not in the markup at all.
   That is `woocommerce/cart/cart-totals.php` in this theme, cut from core's copy;
   this file styles what it prints and hides nothing. The one thing CSS could not
   have done is the point: the shipping row carries `wc_cart_totals_shipping_html()`
   and the total row carries `wc_cart_totals_order_total_html()`, and both go with
   the rows. */

/* The express buttons share one line, the way the reference's own three do.
   Stripe's `express-checkout.css` gives the container `flex-wrap: wrap` and each
   child `flex: 1 1 0%; min-width: 260px`, so two of them need 530px of a 420px
   column and stack. Dropping the floor to zero lets the two share it — 205px
   each with the container's 10px gap — and the iframes inside are already
   `width: calc(100% + 8px)` with Stripe's own `-4px` bleed. Same specificity as
   Stripe's rule and a later sheet, so no `!important`: measured sheet order is
   express-checkout.css → style.css → woo.css. */
.woocommerce-cart #wc-stripe-express-checkout-element > div { min-width: 0; }

/* The pay bar: the reference store's own shape — a gold capsule with a 20px
   radius, floating above the bottom edge with a gutter — carrying the shield
   mark and one word. Measured on the reference at 1470px: 1029x60 at y760 in an
   835px viewport, so 15px off the bottom, a 20px radius and a 26.4px/600 label.
   Three things are deliberately not copied: the width (its bar is 1029 of 1470
   with a 16px left gutter and a 426px right one, which reads as an accident, so
   this one is centred between two equal gutters and capped at its own width),
   the label's size (its 26.4px is that shop's scale — this one is the existing
   h3 step, `calc(var(--font-heading-scale) * 1.8rem)` = 23.4px, which is the
   nearest size this shop already owns) and its off-white ink on the gold — this
   shop's label stays dark, which is the 10.89:1 decision of 2026-10-13 and the
   same token every other button uses.
   The bar has no figure: the reference's is a bare label, and each page prints
   the total next to the button that matters on it.
   The body gets the bar's height plus its own offset as bottom padding on the
   pages that draw it, so it cannot sit on the footer's last row. z-index 9 keeps
   it under the menu drawer's 10: opening the drawer covers the bar, not the
   reverse. */
.gs-sticky-pay {
  position: fixed; z-index: 9;
  inset-inline: 16px; bottom: 16px;
  margin-inline: auto; max-width: 1029px; min-height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 24px calc(8px + env(safe-area-inset-bottom));
  border: 0; border-radius: 20px;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-size: calc(var(--font-heading-scale) * 1.8rem); font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.gs-sticky-pay__icon { flex: 0 0 24px; width: 24px; height: 24px; }
.woocommerce-cart { padding-bottom: 92px; }

/* An empty cart never shows the bar, and the cart's own AJAX removal of the last
   item is the one case PHP cannot cover: WooCommerce's `remove_from_cart` swaps
   the cart area but not the footer this bar was printed into, so the bar a
   non-empty page drew stays behind on the emptied cart until a real page load —
   measured 2026-10-15: a visible 1029x60 capsule over "Your cart is currently
   empty", gone after a reload. `:has()` reads the state off the page instead, so
   the bar cannot outlive the items it was drawn for. */
.woocommerce-cart:has(.cart-empty) .gs-sticky-pay { display: none; }

@media (max-width: 989px) {
  .gs-review-summary { display: table-row; }
  #order_review tr.cart_item { display: none; }
  #order_review table.gs-review-open tr.cart_item { display: table-row; }

  .woocommerce-checkout { padding-bottom: 92px; }
}

/* The checkout's bar is the phone's alone: below 989px the rule above has
   already given it the body padding it needs, and this is what takes the bar
   itself away from 990px up. */
@media (min-width: 990px) {
  .woocommerce-checkout .gs-sticky-pay { display: none; }
}

/* Core hides the cart's thumbnail below 768px with
   `.woocommerce table.cart .product-thumbnail { display: none }` — 0,3,1. An
   item in this shop is a picture of the shopper's own design, which is what
   they recognise, so it comes back at 72px: the desktop row's 100px clocked
   down one step, in the same cell order core already stacks. */
@media only screen and (max-width: 768px) {
  .woocommerce-cart table.cart td.product-thumbnail { display: block; text-align: left !important; }
  .woocommerce-cart table.cart td.product-thumbnail img { width: 72px; }
  .woocommerce-cart table.cart td.product-thumbnail::before { content: none; }

  /* The name cell, and with it every personalization answer, hung off the right
     edge on a phone. Core's `woocommerce-smallscreen.css` sets
     `.woocommerce table.shop_table_responsive tr td { text-align: right !important }`
     — 0,2,2 — and this theme restates the thumbnail cell and the three figures
     below it, but never this one, so the name and the answers under it were the
     only right-aligned text in the row. Measured at 393px before this rule:
     every answer line ended at x355 and started at 132, 161, 214, 143 and 105 in
     turn. Naming the table, the row class and the cell comes to 0,4,3, which
     beats core's rule on `!important` equal footing. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name { text-align: left !important; }

  /* The three figures share one line: a third of the row each, which is what
     three 54px-high controls and two prices need. Their data-title labels go —
     a unit price, a quantity and a line total in that order say what they are —
     and the line total carries the weight so the number being checked is the
     one that reads first. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
    display: inline-block; box-sizing: border-box; vertical-align: top;
    width: 32%; margin: 6px 0 0; padding: 0; text-align: left !important;
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
    font-weight: 700; text-align: right !important;
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal::before {
    content: none;
  }

  /* The remove control measured 29x29 at the far left of a phone row. Core's
     own rule is `.woocommerce table.cart td.product-remove a.remove` — 0,4,3 —
     so the link has to be named the same way or its box stays core's. The cell
     keeps core's block display: making it the flex container shrank the link's
     44px box back to 28, because a flex item shrinks by default. */
  .woocommerce-cart table.cart td.product-remove { width: 44px; padding: 0; }
  .woocommerce-cart table.cart td.product-remove a.remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }
}

/* One line per personalization answer, at every width.
   WooCommerce prints each answer as `<dt>` label + `<dd>` value (the value
   wrapped in a `<p>`), and core floats the label:
   `.woocommerce td.product-name dl.variation dt { float: left; clear: both;
   margin-right: .25em; display: inline-block }` — a floated inline-block
   computes to `block`. A float only shortens the line boxes of the block that
   follows, so whether the value lands beside its label depends on what room is
   left on that line, and `clear: both` on the next label decides where the
   float sits. Measured on the cart at 1470px before this rule: the first answer
   read "Add Name Here: Jordan" on one line, and every answer after it put its
   value on the line below — p1's label at y538 with its value at y557, p2's at
   y696/y715 and y744/y763. The label stays beside the value, because "grandma"
   alone does not say whether it is the recipient, the sender or a quote.
   This block used to live inside the max-width 768px query above, which is why
   only the phone showed it right. */
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt,
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd,
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd p {
  display: inline; float: none; clear: none; margin: 0;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt { color: var(--muted); }
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd { margin-right: 12px; }

/* Each answer takes its own line, so a row with three of them reads as three
   lines and not as one run-on sentence: measured on the two-item cart, p2's
   three answers all landed on y652 without this. The `<dl>` carries no wrapper
   per answer — `dt` and `dd` are flat siblings — so the break cannot be a block
   without pushing the value under its own label, which is the bug above; it is
   a `\A` in a `pre` pseudo-element instead.
   The break sits on the label, not on the value: with it after the value, the
   whitespace text node WooCommerce prints between `</dd>` and `<dt>` survived
   the `pre` break and indented every line after the first by one space —
   measured 5px per line, 260 → 265 → 270. Before the label, that whitespace
   falls at the end of the previous line and collapses. `:not(:first-child)`
   leaves the first answer without a leading blank line. */
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt:not(:first-child)::before {
  content: "\A";
  white-space: pre;
}

/* The edit link is appended to the product name by gs_cart_item_name() and had
   no rule of its own, so on a row wide enough to hold both it butted straight
   against the name: measured at 1280px the two boxes touched at x=461 and the
   row read "A Cuddle From HeavenEdit personalization". */
.woocommerce-cart table.cart .gs-edit-link { display: inline-block; margin-left: 8px; color: var(--muted); }

/* The cart's action row is WooCommerce's own markup, kept where core prints it.
   The promo-code field is off in this cart (1.0.102, `wc_coupons_enabled()`) and
   *Update cart* is gone (1.0.111), so the row is now drawn only when a plugin
   prints into `woocommerce_cart_actions` — this theme's own copy of
   `cart/cart.php` decides that — and the styling below it is waiting for
   whatever lands there. */

/* The suggestions under the cart. Both the heading and the cards are the shop's
   own `.section-title` and `.product-card`, so the block reads as one more shelf
   rather than as an advertisement. */
.cart-suggestions { margin: 44px 0 0; }

/* ---------- the checkout's payment section ----------

   Laid out from the source store's own checkout, read out of its live DOM on
   2026-10-15 at 1470px — every number here is a measurement, recorded in
   `research/reference-copy.md`, "Checkout payment".

   The section is not a card of its own. Its method rows are one stacked group:
   a 1px `#dfdfdf` edge with a 12px radius on the group's outer corners, and
   every inner edge shared with the row above it, so one line separates two rows
   rather than two lines touching.

   The card box is the one part of this no rule here can reach: it is a
   cross-origin Stripe iframe, and its whites, radius and edge are set through
   Stripe's appearance API in `inc/cart-checkout.php`. What is left for this file
   is the grey ground that box sits on, and the row above it.

   Every row selector is a direct child (`>`). Stripe's saved-payment-methods
   list is a `<ul>` of `<li>`s inside the card box, so a plain descendant
   selector styles those list items as payment rows too — measured 2026-10-15 at
   393px, the *Use a new payment method* item came out 18px wide in 94px of
   wrapping text. */

/* Core's own payment-box wash — `rgba(129,110,153,.14)` on a 5px radius — is
   `.woocommerce-checkout #payment` at one class and one id, so it has to be
   named at the same weight to be taken off: measured 2026-10-15, the bare
   `#payment` selector left both the wash and the radius in place. */
.woocommerce-checkout #payment { margin-top: 0; background: none; border: 0; border-radius: 0; padding: 0; }

/* The source's own two lines: 20px/600 over 14px at 56% ink, 4px apart, with
   13px under the second one before the group starts. */
.gs-payment-head { margin: 30px 0 4px; font-size: 1.6667rem; font-weight: 600; line-height: 1.2; }

.gs-payment-note { margin: 0 0 13px; color: rgba(var(--color-foreground), .56); font-size: 1.1667rem; line-height: 1.35; }

/* Core pads this list with its own `1em` — 19.2px at this root — and draws a
   1px line under it, which set the whole method group 19px inside the heading
   above it and 19px inside the column's own edge. Core's selector is
   `.woocommerce-checkout #payment ul.payment_methods` at one id and two classes,
   so the bare `#payment ul…` shape loses to it by one class: measured
   2026-10-15, the rows came out 792 wide at x79 under a heading at x60. */
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

/* One row per gateway. The row is a three-column grid — the radio, the label,
   then the marks at their own width — and the gateway's own fields, when it has
   any, take a full-width row under them. A grid rather than a wrapping flex line
   because the fields are pulled out to the row's own border with negative
   margins, and a flex line charged that pull the column gap: measured
   2026-10-15, the grey box came out 10px short of the border on each of its two
   sides. The marks are a column of their own rather than an absolute box so the
   title can never run under them — at 393px *Credit card* and five marks were
   6px into each other when they were laid over the label. */
#payment ul.payment_methods > li {
  position: relative;
  display: grid; grid-template-columns: 18px 1fr auto; column-gap: 10px; align-items: center;
  margin: 0; padding: 14px;
  border: 1px solid #dfdfdf; border-top: 0;
  background: #fff;
}

#payment ul.payment_methods > li:first-child { border-top: 1px solid #dfdfdf; border-radius: 12px 12px 0 0; }
#payment ul.payment_methods > li:last-child { border-radius: 0 0 12px 12px; }

/* Core's own clearfix on every row — a `::before` and an `::after`, each
   `content: " "` with `display: table` — counts as two more grid items here, and
   the first of them takes the cell the radio needs: measured 2026-10-15, the
   radio and the label had swapped columns. Placement is the one thing core does
   not set on those two, so they are parked on a row of their own instead;
   `content` and `display` are core's at two ids and cannot be unset from this
   stylesheet. */
#payment ul.payment_methods > li::before,
#payment ul.payment_methods > li::after { grid-area: 99 / 1 / 100 / -1; }

/* The label is the whole control: it fills the second column, which runs from
   10px after the radio to the third one, and its 14px of padding above and below
   make the row 47px tall — the source's own row, and well over WCAG 2.2's
   24px floor. */
#payment ul.payment_methods > li label { grid-area: 1 / 2; font-size: 1.1667rem; font-weight: 600; line-height: 1.35; }

/* The label's own hit box stops at the marks' column, and Stripe's Optimized
   Checkout rewrites that label from the browser side, so the marks cannot live
   inside it. This overlay is what makes the marks clickable anyway: it is
   positioned against the row (the label itself stays static), it covers the
   row's first line only — never the gateway's own fields on the second one — and
   the marks carry `pointer-events: none`, so a click on them falls through to
   it. Verified with `elementFromPoint()` at 393px and at 1470px: the marks'
   centre, and both ends of the label, answer the label. */
#payment ul.payment_methods > li label::after {
  content: ''; position: absolute;
  top: 14px; right: 14px; bottom: auto; left: 0;
  height: 19px;
}

/* The marks sit in the third column, against the row's right padding edge, and
   they are not interactive: they are drawn marks, and the row's own control is
   the label. `pointer-events: none` is what lets a click on them reach the
   label's overlay above. The box is 19px — the title's own line — and the 24px
   images are centred in it and overflow it by 2.5px on each side, so the marks
   do not make the row taller than the source's 47px. */
#payment .gs-payment-row__marks { display: flex; align-items: center; gap: 4px; grid-area: 1 / 3; height: 19px; pointer-events: none; }

/* Core puts a margin on every payment-row image — `0.5em` on the first and
   `2px` on each following one (`li img` and `li img + img`), which is how it
   spaces a gateway's own icon from its label. These marks are spaced by the flex
   gap instead. Core's `img + img` rule reaches four elements and wins a tie on
   the second selector below, so it is named: measured 2026-10-15, the five marks
   came out 214px where they are 206. */
#payment ul.payment_methods > li .gs-payment-row__marks img,
#payment ul.payment_methods > li .gs-payment-row__marks img + img { margin: 0; }

/* Below core's own 749px breakpoint — the one `woocommerce-smallscreen.css` is
   gated by — five marks are 224px of a 357px row, which left the title 65px and
   wrapped *Credit card* onto two lines: measured 2026-10-15 at 393px, the title
   box 65×38 with five marks beside it. At 34×21.5 each the five are 186px and
   the title gets 103px, which is its own 82px with room over. The ratio is the
   asset's own 38:24, so the marks are scaled rather than stretched. */
@media (max-width: 749px) {
  #payment .gs-payment-row__marks .gs-payment { width: 34px; height: 21.5px; }
}

/* The source's own `+N` badge: 23x24, a 3px radius, a 1px edge at 7% ink.
   The number is counted from gs_checkout_card_methods(), never written down.
   Its `-2px` block margins keep the taller badge out of the 19px line box, the
   way the shipping row's `?` does with its own (1.0.105). */
#payment .gs-payment-more {
  display: flex; align-items: center; justify-content: center;
  min-width: 23px; height: 24px; margin: -2px 0; padding: 0 4px;
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 3px;
  background: #fff; color: #080808;
  font-size: .8333rem; line-height: 1;
}

/* The source's own 18px radio: `6px solid #080808` when chosen, which is the
   black ring with the white centre in that page, and a 1px `#dfdfdf` ring when
   not. Core draws a native control here, so it is replaced rather than styled. */
#payment ul.payment_methods > li input.input-radio {
  appearance: none; -webkit-appearance: none;
  grid-area: 1 / 1;
  width: 18px; height: 18px; margin: 0;
  border: 1px solid #dfdfdf; border-radius: 50%;
  background: none;
}

#payment ul.payment_methods > li input.input-radio:checked { border: 6px solid #080808; background: #fff; }

/* The gateway's own fields, on their own row and as wide as the row's box: the
   negative margins wipe the row's 14px padding on three sides so the grey
   reaches the group's own border, which is what the source's grey area does.
   The card element inside it is Stripe's iframe and keeps its own 14px inset. */
#payment ul.payment_methods > li .payment_box {
  grid-area: 2 / 1 / 3 / -1;
  /* Core gives this box `width: 100%`, which is 100% of the grid area and makes
     the two negative side margins pull it out of true: measured 2026-10-15, the
     grey reached the row's left border and stopped 14px short of the right one.
     `auto` lets both sides do the same job. */
  width: auto;
  margin: 14px -14px -14px;
  padding: 14px;
  background: rgba(0, 0, 0, .043);
}

/* The gateway's own `<fieldset>` draws no design of its own — every browser
   frames it with `2px groove` and its `0.35em 0.75em 0.625em` of padding and a
   2px side margin, which at this box's inherited 17.664px is 6.18 / 13.25 /
   11.04px. Nothing reset that here, so the grey held a frame inside it and three
   different left edges: its own border, the notice line at 14px, the fields at
   29px — measured 2026-10-15, the box came out 828×335 where it draws 314 reset.
   Stripe's plugin carries exactly this reset, but hangs it on
   `li.wc-stripe-optimized-checkout`, a class its own script adds — and on this
   page that script never does: `querySelectorAll('.wc-stripe-optimized-checkout')`
   was 0 after a reload and again after a manual `update_checkout`, while
   `wc_stripe_upe_params.shouldShowOptimizedCheckout` read `"1"`. The reset is
   therefore repeated here, on this file's own ancestor, for any gateway that
   ships a fieldset in its box.

   One thing will not close: Stripe's iframe is 4px wider than its parent on each
   side by design (`width: calc(100% + 8px)` with `margin: -4px`, its own
   scrollbar insurance), so the *drawn* fields land 10px from the plate's edge
   rather than the reference's 14px. Buying that back would take an 18px plate,
   which is a value the reference does not have. */
#payment ul.payment_methods > li .payment_box > fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* The grey ground sits at the row's own border, so on the last row it carries
   that row's outer corners — the group's 12px minus its 1px border, which is what
   the reference's own last plate measures: `0 0 11px 11px`. Two rows follow the
   card one today, so nothing shows; with the card row alone the plate would
   otherwise square off inside the group's rounded corner. */
#payment ul.payment_methods > li:last-child .payment_box { border-radius: 0 0 11px 11px; }

/* Core draws a small arrow from the payment box up to the label above it — a
   `::before` triangle at `margin: -1em 0 0 2em`. It is painted inside the row's
   own line here, over the left end of the label, and it takes the clicks there:
   measured 2026-10-15 at 393px, `elementFromPoint()` on the label's left edge
   answered the box and not the label. The source store's card box has no
   arrow, and the row above already says which method is chosen. */
#payment ul.payment_methods > li .payment_box::before { content: none; display: none; }

/* Core pads every payment row with its own `padding: 1em` — 19.2px at this
   root — which inset the button from the column's edges by that much on each
   side: measured 277px of a 315px row at 393px, and 770px of 810px at 1470px.
   The group above it is the only thing that should inset this button now, and
   the 22px is the gap the source store leaves under its own payment rows.
   Core's selector is `.woocommerce-checkout #payment div.form-row` at one id,
   two classes and one element, and it beat this rule's earlier shape by that one
   element; naming the same ancestor and the row's own class comes to 1,3,1 and
   wins on its own. */
.woocommerce-checkout #payment div.form-row.place-order { margin: 22px 0 0; padding: 0; }

#payment .form-row.place-order .button { width: 100%; }

/* The shop's policy links, the last thing in the checkout's form column. The
   reference store ends its own checkout with the same row and this page carries
   no footer, so this is the only copy of them on the page (inc/cart-checkout.php
   prints it, from the same list the footer's Policy column uses). */
.gs-checkout-policies {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 22px 0 0;
  font-size: 1.35rem;
}

.gs-checkout-policies a { color: var(--muted); text-decoration: underline; }

/* The checkout's *Sign in* link rides in the *Contact* heading's row, which
   inc/cart-checkout.php prints; the row is what places it, so there is no rule
   here but the label's own size. */

/* The `?` mark on the two fields that carry one, and the line it opens. The mark
   sits at the input's right-hand end — the row is the positioning context because
   `woocommerce_form_field()` puts the wrapper and the mark side by side — and the
   input keeps its own text off the mark. */
.woocommerce-checkout .form-row { position: relative; }

.woocommerce-checkout .gs-help { position: absolute; right: 10px; bottom: 12px; }

.woocommerce-checkout .form-row:has(.gs-help) input.input-text { padding-right: 40px; }

.gs-help__mark {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: none; color: var(--muted);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}

.gs-help__text {
  position: absolute; z-index: 6; right: 0; bottom: 30px;
  display: none;
  width: 260px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
  font-size: 1.3rem; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.gs-help.is-open .gs-help__text { display: block; }

/* ---------- the checkout's bare chrome ----------

   The reference store wraps its own checkout in a wordmark, a cart icon and one
   row of accepted-payment marks, and nothing else. header.php skips the
   announcement bar, the drawer, the search panel, the tracking link, the account
   icon and the menu row on this page (`gs_is_bare_checkout()`), and footer.php
   skips the footer entirely; the policy links that would have been there are in
   the form column. */

body.gs-bare-checkout .header--bare { padding-top: 14px; }

/* The bare header's own seam. On every other page the announcement bar draws the
   1px line that ends the white top band; this page has no announcement bar, so
   the band and the page below it were white against white with nothing between
   them. The line is the same one, from the same value (`--seam`, style.css) —
   the owner asked for it on 2026-10-15. It goes on the wrapper, not the header:
   the wrapper is the box that carries the white and the full page width. */
body.gs-bare-checkout .header-wrapper { border-bottom: 1px solid var(--seam); }

.gs-checkout-marks { grid-column: 1 / -1; }

.gs-checkout-marks .gs-payments { justify-content: center; gap: 6px; margin-top: 4px; }

/* The footer's and the cart's payment strips (`.gs-payments`) are core-free
   markup the theme prints itself; the checkout's own rows are laid out in the
   payment section above. */

/* Three controls the per-form rules above do not reach. All are measured 54px so
   the shop has one input height: the account forms, which the theme never styled
   and which WooCommerce left at its own 44.7px; the cart table's quantity
   field, which core draws as a bare 34.8px box with no radius — it is the one
   input on the page that did not match its own row; and the order-tracking
   form, which core pads with `.5em` and so came out 44.69px against the token.
   The reference's cart quantity is
   `min-height: calc(var(--inputs-border-width) * 2 + 4.5rem)`, i.e. the same
   54px as everything else there.
   `.woocommerce-form-track-order` is the tracking form's own class, on a plain
   page that carries none of the `.woocommerce-account` / `.woocommerce-cart`
   body classes the rules above are scoped to. */
.woocommerce-account input.input-text,
.woocommerce-account input.woocommerce-Input,
.woocommerce-account textarea,
.woocommerce-cart input.qty,
.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text,
.woocommerce-form-track-order input.input-text {
  min-height: var(--inputs-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: rgb(var(--color-background));
  /* Every one of these fields is a bare `<input>`, so its text colour was the UA
     default `fieldtext` — pure black — against the page's `14,14,14`. core's own
     `--wc-form-color-text` reaches the `.form-row` controls and nothing else. */
  color: rgb(var(--color-foreground));
}

/* The account and address forms' controls sit under core's own
   `.woocommerce form .form-row .input-text` (0,3,1) — one class more than the
   list above — so core's `padding: .5em` won on those pages and the
   country/state `<select>` was never named at all: it drew borderless at 32px.
   This rule carries the form-row chain (0,3,2 on the inputs, a tie core loses on
   order for the select) and restates the shop's values, so the account's fields
   are the checkout's fields. */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row input.woocommerce-Input,
.woocommerce-account form .form-row select,
.woocommerce-account form .form-row textarea {
  min-height: var(--inputs-height);
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
}

/* The eye that reveals a password is core's own button, and core leaves it 22x22
   with no padding — under WCAG 2.2's 24px floor — inside a 54px field. The
   selectors repeat core's shape exactly (0,2,1 for the button, 0,2,2 for the
   field) because this file loads after `woocommerce-layout.css`: on a tie the
   later rule wins. The field's right pad grows to 54px so the password text
   cannot run under a 44px button that sits 5px from the edge; the icon stays the
   same 22px core draws and is centred by its own margin. */
.woocommerce form .show-password-input { width: 44px; height: 44px; right: 5px; }
.woocommerce form .show-password-input::before { margin: 11px; }
.woocommerce form .password-input input[type="password"] { padding-right: 54px; }

/* ---------- account ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a { text-decoration: none; font-weight: 700; }

/* ---------- reviews ---------- */

.woocommerce-Reviews .commentlist { list-style: none; padding: 0; }
/* The reference draws the rule ABOVE each review, not below it: its own item is
   `border-top`, so the first review has a line and the last one does not. Ours had
   it the other way round.
   The card's shape is the reference's review widget, and its numbers are read off
   it: the header rows sit 8px apart with 10px under the header, the date is
   15.36px, the name 19.2px, the title 19.2px bold with 8px under it, the body
   19.2px at line-height 1.4, and the photos are 96px squares 8px apart with 16px
   above them. The markup is the theme's own now (woocommerce/single-product/review.php),
   because the reference puts the avatar and the name on their own row, under the
   star row — core's floated avatar and "Author – date" line cannot be made to do
   that from CSS alone.
   Colours stay this shop's: the stars are the same #fcb549 the reference paints
   its own with (--color-button), the greys are the ones this file already used,
   and the divider is --line rather than the reference's navy tint.
   EVERY selector below is core's own, spelled out. Core writes these rules through
   two IDs (`#reviews #comments`), so a shorter three-class selector loses to it
   outright — however much later this file loads. */
.woocommerce-Reviews .comment_container { padding: 16px 0; border-top: 1px solid var(--line); }

/* Core gives the review text its own bordered card and indents it past a floated
   avatar; the reference has neither, and the avatar now sits inside the text. */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0; border: 0; border-radius: 0; padding: 0;
}

/* Core pins the avatar absolutely at the card's top-left (`float: left; position:
   absolute; top: 0; left: 0`) because it expects it outside the review text. The
   reference puts it in the row with the name, so it is put back in the flow here —
   without that, it sits on top of the star row. */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static; float: none; top: auto; left: auto;
  width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: var(--radius-plate); background: rgba(224, 224, 224, .5);
}

.gs-review-card__header { margin: 0 0 10px; }
.gs-review-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px; }
.gs-review-card__stars { display: inline-flex; gap: 4px; }
.gs-review-card__stars .gs-rating__star { width: 20px; height: 20px; color: rgb(var(--color-button)); }
.gs-review-card__stars .gs-rating__star:not(.is-on) svg { fill: none; stroke: currentColor; }
.gs-review-card__date { color: rgb(123, 123, 123); font-size: 1.28rem; line-height: 1.4; }
.gs-review-card__who { display: flex; align-items: center; gap: 8px; }
.gs-review-card__author { color: rgb(var(--color-foreground)); font-size: 1.6rem; line-height: 1.4; }

/* The body. Both selectors carry the same values: the deep one is what it takes
   to outrank core's own `.comment-text` rules on the product page, and the plain
   one serves the Happy Customers page, where core's markup is not involved. */
.gs-review-card__body,
.woocommerce #reviews #comments ol.commentlist li .comment-text .gs-review-card__body {
  color: var(--muted); font-size: 1.6rem; line-height: 1.4;
}
.gs-review-card__body p,
.woocommerce #reviews #comments ol.commentlist li .comment-text .gs-review-card__body p { margin: 0; }
/* The title the importer wrote is the first paragraph, and it stands apart from
   the body only when there IS a body — a review with no title is one paragraph. */
.gs-review-card__body p:first-child:not(:last-child),
.woocommerce #reviews #comments ol.commentlist li .comment-text .gs-review-card__body p:first-child:not(:last-child) { margin: 0 0 8px; }

.woocommerce-Reviews #review_form_wrapper { margin-top: 20px; }

/* The photos the imported reviews carry. A review shows up to three, so they sit
   in a row and wrap. `object-fit` squares them without distorting a portrait
   photo, and the file behind each thumbnail is the same 900px JPEG the click
   opens — there is no separate thumbnail size. */
.gs-review__photos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.gs-review__photos img {
  display: block; width: 96px; height: 96px;
  object-fit: cover; border-radius: 5px;
}

/* ---------- search results, 404, reviews page, contact ---------- */

.search-results__empty,
.gs-review-list__empty { color: var(--muted); }

.not-found { text-align: center; padding: 64px 0 72px; }
.not-found__text { color: var(--muted); margin: 8px 0 22px; }

.happy-customers h1,
.contact-page h1 { margin-bottom: 20px; }

/* The page is the reference's own all-reviews page: its heading is 52px at weight
   600 with 36px under it, its cards are the product page's card with the product
   name above ("about <product>", 19.2px), and its photo strip prints the review
   photos as 80px squares with a 19.2px muted title over them. */
.happy-customers h1 { font-size: calc(var(--font-heading-scale) * 4rem); font-weight: 600; margin-bottom: 36px; }

/* The phone step, and it has to live in THIS file. The scale block in style.css
   steps `.archive-head h1, .pb-page h1` down to 3rem below 749px, but the rule
   above is also (0,1,1) and this file loads later, so on a tie the page kept its
   52px title on a 393px screen while every other page's was 39px — measured, and
   the same shape as the 1.0.87 fix. Restating the step after the rule it has to
   beat is what moves it. Only the size steps: 600 is this page's own measured
   value from the reference's all-reviews page. */
@media (max-width: 749px) {
  .happy-customers h1 { font-size: calc(var(--font-heading-scale) * 3rem); }
}

.gs-review-list { list-style: none; margin: 0; padding: 0; }
.gs-review { padding: 16px 0; border-top: 1px solid var(--line); }
.gs-review__product { margin: 0 0 10px; font-size: 1.6rem; line-height: 1.4; }
.gs-review__about { color: var(--muted); }

.gs-photo-strip { margin: 0 0 28px; }
.gs-photo-strip__title { margin: 0 0 4px; font-size: 1.6rem; font-weight: 400; color: rgb(123, 123, 123); }
.gs-photo-strip__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gs-photo-strip__list img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 5px; }

.contact-page__intro { color: var(--muted); max-width: 60ch; }
.contact-form { margin-top: 24px; max-width: 560px; }
.contact-form__row { margin: 0 0 16px; }
.contact-form__row label { display: block; margin-bottom: 4px; font-weight: 700; }
.contact-form__row input,
.contact-form__row textarea {
  width: 100%; min-height: var(--inputs-height); padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: rgb(var(--color-background));
  /* A field's text is the page's ink, not the UA's `fieldtext`. This form is not
     WooCommerce's, so core's `--wc-form-color-text` never reaches it. */
  color: rgb(var(--color-foreground));
}
/* The honeypot is off-screen, never hidden with display:none, which bots detect. */
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pagination, one style for the whole site, and plain: no boxes. `.gs-pagination`
   is the search and reviews-page control; the shop archive and the product page's
   review list print WooCommerce's own `.woocommerce-pagination`. Core draws the
   archive as a bordered strip (`ul { border: 1px solid #cfc8d8 }`, `li {
   border-right: … }`) and paints the current page — and a hovered one — in
   WooCommerce purple `#816f98` on `#e9e6ed`, the only purple in a black-and-gold
   shop. Core's rules win on specificity unless the same shape is used back:
   `.woocommerce nav.woocommerce-pagination ul li span.current` carries three
   classes and four elements, so that is what it takes to outrank it.
   The numbers are set like text: no box, no fill, 18px apart, the page you are on
   bold and underlined. */
.gs-pagination,
.woocommerce-pagination { margin-top: 28px; }

.gs-pagination ul,
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  list-style: none; margin: 0; padding: 0; border: 0; white-space: normal;
}
.gs-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul.page-numbers li { border: 0; float: none; display: inline; }

.gs-pagination li a,
.gs-pagination li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-block; min-width: 0; margin: 0; padding: 3px 2px;
  border: 0; background: none; color: rgb(var(--color-foreground));
  line-height: 1.4; text-decoration: none;
}
.gs-pagination li a:hover,
.gs-pagination li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: none; color: rgb(var(--color-foreground));
  text-decoration: underline; text-underline-offset: 4px;
}
.gs-pagination li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current {
  background: none; color: rgb(var(--color-foreground));
  font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}