/* =============================================================================
   Liora — woocommerce.css

   The shop, product, cart, checkout and account screens. Loaded ONLY on those
   screens, from inc/assets.php, after shell.css.

   Why this file exists at all. These screens have no approved design: they
   render on Astra's WooCommerce templates, wrapped in this theme's chrome.
   Astra's stylesheet is deliberately KEPT here (see inc/setup.php) because its
   templates need it — which means everything inside #main arrives in Astra's
   own palette unless it is told otherwise. Left alone, every button on the
   store rendered rgb(4,107,210) with a 4px radius: a blue that appears nowhere
   in the LIORA design, on Add to cart, Apply coupon, Proceed to checkout,
   Place order and Log in. A customer crossing from the Menu page into the shop
   visibly left the restaurant.

   These rules were in shell.css until 10 Sep 2026. They are here now because
   shell.css is defined as what is shared across the five DESIGN pages, and the
   store is not one of them — and because a per-screen file means the five
   design pages stop carrying rules they can never use.

   Two conventions hold throughout:

     · Everything is scoped to a body.woocommerce-page* class. Nothing here can
       reach a design page, and the scope is also what wins on specificity —
       Astra sets the blue from `.button` in its inline CSS, so `body.woocommerce-page
       .button` beats it without a single !important.

     · Nothing is invented. Buttons are the design's .btn-ghost; fields are the
       enquiry form's, lifted from contact.html — same sizes, same tokens, same
       focus behaviour. If the design has a treatment for something, it is used.
   ============================================================================= */

/* 1. Background.
   shell.css sets `body{background:var(--bone)}`, but Astra's `.ast-plain-container` — a class on
   the same body element — is (0,1,0) against that rule's (0,0,1), so Astra's white won. Every
   ancestor of the content was already transparent, so painting the body is the whole fix. */
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account{ background:var(--bone); }

/* 2. Clearance under the fixed nav.
   `.nav` is position:fixed and reserves no space, so the first line of content ran underneath
   it — measured at 10px of overlap at 1280 and a full 66px at 500, where the bar covered the
   breadcrumb outright. The nav's solid height is its padding plus the 42px logo: 14+42+14=70 at
   desktop, 12+42+12=66 under 900px.

   The child combinator is load-bearing. Astra's product template emits its own
   `<main id="main" class="site-main">` INSIDE this theme's `<main id="main">`, so there are two
   #main elements on the page and a descendant selector padded both, reserving the gap twice. */
body.woocommerce-page > #main,
body.woocommerce-cart > #main,
body.woocommerce-checkout > #main,
body.woocommerce-account > #main{ margin-top:0; padding-top:70px; }

@media (max-width:900px){
  body.woocommerce-page > #main,
  body.woocommerce-cart > #main,
  body.woocommerce-checkout > #main,
  body.woocommerce-account > #main{ padding-top:66px; }
}

/* 3. The gallery's magnifier — belt and braces.
   In WooCommerce 11 the 🔍 trigger is not in the PHP template at all; the gallery script
   inserts it, and it stopped being inserted once inc/woocommerce.php dropped
   wc-product-gallery-zoom support. So this rule matches nothing today. It is kept deliberately,
   because the element is created in JavaScript on a code path outside our control: if a Woo
   update or a re-enabled zoom brings it back, it stays hidden rather than silently reappearing.

   Verified separately that the lightbox still works — clicking the photograph opens PhotoSwipe
   (pswp--open, pswp--visible) without navigating away. */
.woocommerce-product-gallery__trigger{ display:none !important; }

/* 4. Description / Additional information, moved into the summary column.
   inc/woocommerce.php re-registers the tabs on woocommerce_single_product_summary so they land
   under the Add to cart button, filling the space the tall 3:4 bottle photograph leaves beside
   it. They arrive styled as WooCommerce's full-width tab block, so the borders and the browser
   list bullets have to come off to sit in a narrow column. */
.summary .woocommerce-tabs{ margin-top:36px; padding-top:0; }
.summary .woocommerce-tabs ul.tabs{ padding:0 0 0 0; margin:0 0 18px; border-bottom:1px solid var(--line); display:flex; gap:26px; }
.summary .woocommerce-tabs ul.tabs::before{ display:none; }
.summary .woocommerce-tabs ul.tabs li{ background:none; border:0; border-radius:0; margin:0; padding:0; }
.summary .woocommerce-tabs ul.tabs li::before,
.summary .woocommerce-tabs ul.tabs li::after{ display:none; }
.summary .woocommerce-tabs ul.tabs li a{
  padding:0 0 10px; font-family:var(--sans); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:500; color:var(--ink-soft);
}
.summary .woocommerce-tabs ul.tabs li.active a{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink); }
.summary .woocommerce-tabs .panel{ margin:0; padding:0; }
.summary .woocommerce-tabs .panel h2{ display:none; }   /* "Description" repeated under its own tab */
.summary .woocommerce-tabs .panel h3{
  /* font-style:normal is load-bearing. Block 14 gives every h2/h3 on a store screen the
     design's serif italic. This rule out-specifies it for the FAMILY but says nothing about
     style, so the subheads rendered as italic Inter small caps until this was added. */
  font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:600; color:var(--ink); margin:22px 0 8px;
}
.summary .woocommerce-tabs .panel p{
  font-size:14.5px; color:var(--ink-soft); font-weight:300; line-height:1.75; margin:0 0 14px;
}
.summary .woocommerce-tabs .shop_attributes th{
  font-family:var(--sans); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:600; color:var(--ink); width:44%;
}
.summary .woocommerce-tabs .shop_attributes td{ font-size:14px; color:var(--ink-soft); font-weight:300; font-style:normal; }

/* 5. The product photograph's own white background.
   Setting the page to bone is only half of "make the background match": the supplied bottle
   shot is a studio cut-out on a flat 254,254,254 ground — measured, and it is 80% of the frame
   — so it read as a white slab sitting on the bone page.

   mix-blend-mode:multiply drops that ground onto whatever is behind it: 254/255 x bone lands
   within one value of bone, so the white disappears and the bottle is untouched. Done in CSS
   rather than by re-encoding the client's photograph, so the original file is unaltered, the
   fix applies to any future bottle shot on the same white, and reverting is deleting this rule.

   It only works while the image sits on a flat background — a photograph with its own scene
   behind it would darken. Check any new product image before assuming this still applies. */
.woocommerce-product-gallery img,
.woocommerce ul.products li.product img,
.woocommerce-cart-form img{ mix-blend-mode:multiply; }

/* 6. Gutters, which the design's own reset removed.
   `*{margin:0;padding:0}` at the top of this file is the ONLY rule setting padding on Astra's
   .ast-woocommerce-container — confirmed by enumerating every matching rule. The design pages
   do not care, because each of their sections carries its own `padding:… 48px`; Astra's Woo
   templates have no such padding of their own and were left flush against the viewport edge.

   48/24px matches the gutters the nav and footer already use, and the 1440px cap matches the
   design's own section grids, so the shop lines up with the rest of the site instead of
   spreading edge to edge on a wide screen.

   Two selectors because the screens arrive by two routes: shop and product render through
   Astra's WooCommerce templates inside #primary, while cart, checkout and my-account are
   ordinary pages and come through this theme's own page.php as <article class="content-page">.

   Those three screens deliberately do NOT load content-page.css — liora_is_content_page()
   excludes WooCommerce, because this file already dresses them. The gutters and the h1 below
   are the parts of it they still need. */
body.woocommerce-page > #main #primary,
body.woocommerce-cart > #main > article.content-page,
body.woocommerce-checkout > #main > article.content-page,
body.woocommerce-account > #main > article.content-page{
  max-width:1440px; margin-left:auto; margin-right:auto;
  padding-left:48px; padding-right:48px;
}

@media (max-width:900px){
  body.woocommerce-page > #main #primary,
  body.woocommerce-cart > #main > article.content-page,
  body.woocommerce-checkout > #main > article.content-page,
  body.woocommerce-account > #main > article.content-page{ padding-left:24px; padding-right:24px; }
}

/* 7. Contain WooCommerce's floats, or the footer sits beside them.
   WooCommerce floats the product gallery left and the summary right and never clears them.
   `footer` is display:flex, which establishes an independent formatting context, so instead of
   ignoring the floats it is NARROWED to avoid them: measured 679px wide against 1265 on the
   design pages, with the logo, links and copyright squashed into two wrapped rows.

   Clearing on #main contains the floats inside the content area, so the footer is full width
   again and anything else added after the product also lands below it. */
body.woocommerce-page > #main::after{ content:''; display:block; clear:both; }

/* =============================================================================
   PALETTE — Astra's defaults mapped onto the LIORA design system.
   Added 10 Sep 2026, in response to the review "the whole shop is styled in
   Astra's default blue".
   ============================================================================= */

/* 8. Buttons.
   The design has exactly one button: .btn-ghost — a bordered rectangle, no
   fill, 11px uppercase at 0.2em, that inverts on hover. shell.css defines it;
   this reproduces it on the markup WooCommerce emits, which cannot be given
   the class.

   Astra paints these from `var(--ast-global-color-0)` on a bare `.button`
   selector in its inline CSS, so a body-scoped selector outranks it. The only
   !important is on border-radius, because Astra sets it from two places and
   one of them is a longhand on `button`. */
body.woocommerce-page .button,
body.woocommerce-page button.button,
body.woocommerce-page a.button,
body.woocommerce-page input[type="submit"],
body.woocommerce-page .single_add_to_cart_button,
body.woocommerce-page .checkout-button,
body.woocommerce-page #place_order,
body.woocommerce-page .woocommerce-Button,
body.woocommerce-page .woocommerce-form-login__submit,
body.woocommerce-account .button{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.4;
  padding:16px 38px;
  border:1px solid var(--ink);
  border-radius:0 !important;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}

body.woocommerce-page .button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page input[type="submit"]:hover,
body.woocommerce-page .single_add_to_cart_button:hover,
body.woocommerce-page .checkout-button:hover,
body.woocommerce-page #place_order:hover,
body.woocommerce-page .woocommerce-Button:hover,
body.woocommerce-account .button:hover{
  background:var(--ink);
  color:var(--bone);
  transform:translateY(-2px);
}

/* The buttons inside a notice — "View cart" after an add-to-cart — are the same
   .button markup and are covered by the list above, but Astra's inline CSS
   targets them through a longer selector than it uses elsewhere. Named
   explicitly so the notice CTA cannot drift back to Astra's blue. */
body.woocommerce-page .woocommerce-message a.button,
body.woocommerce-page .woocommerce-info a.button,
body.woocommerce-page .woocommerce-error a.button,
body.woocommerce-page .woocommerce-message .button,
body.woocommerce-page .woocommerce-info .button{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  font-size:11px;
  padding:13px 26px;
}
body.woocommerce-page .woocommerce-message a.button:hover,
body.woocommerce-page .woocommerce-info a.button:hover{ background:var(--ink); color:var(--bone); }

/* A disabled Update cart must not look like a live control. */
body.woocommerce-page .button:disabled,
body.woocommerce-page .button[disabled],
body.woocommerce-page button.button:disabled{
  border-color:var(--line-strong); color:var(--ink-soft);
  background:transparent; opacity:1; cursor:default; transform:none;
}
body.woocommerce-page .button:disabled:hover{ background:transparent; color:var(--ink-soft); transform:none; }

/* 9. Form fields — the enquiry form's, from contact.html, verbatim.
   Transparent on the bone ground rather than white boxes, a hairline --line
   border, and the border going solid --ink on focus. */
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="number"],
body.woocommerce-page input[type="search"],
body.woocommerce-page textarea,
body.woocommerce-page select,
body.woocommerce-page .input-text,
body.woocommerce-page .select2-selection{
  font-family:var(--sans);
  font-size:15px;
  font-weight:300;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:14px 16px;
}
body.woocommerce-page input::placeholder,
body.woocommerce-page textarea::placeholder{ color:rgba(33,25,16,0.34); }
body.woocommerce-page input:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-page select:focus{ outline:none; border-color:var(--ink); }
body.woocommerce-page textarea{ resize:vertical; min-height:130px; line-height:1.6; }

/* The quantity box is small and numeric — same skin, tighter padding. */
body.woocommerce-page .quantity .qty{ padding:12px 8px; text-align:center; font-size:14px; }

/* Radios and checkboxes: shipping methods were drawing in Astra's blue.
   accent-color alone is not enough — Astra paints the checked state with an
   explicit `input[type="radio"]:checked{background-color:var(--ast-global-color-0)}`,
   so the checked rule has to be answered directly. */
body.woocommerce-page input[type="radio"],
body.woocommerce-page input[type="checkbox"]{ accent-color:var(--ink); }
body.woocommerce-page input[type="radio"]:checked,
body.woocommerce-page input[type="checkbox"]:checked{
  background-color:var(--ink);
  border-color:var(--ink);
}

/* 10. Labels, in the enquiry form's voice. */
body.woocommerce-page label,
body.woocommerce-page .woocommerce-form__label{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
/* …except the ones that are really body copy sitting beside a control. */
body.woocommerce-page .woocommerce-form__label-for-checkbox,
body.woocommerce-page .shipping label,
body.woocommerce-page .wc_payment_method label{
  font-size:14px; letter-spacing:normal; text-transform:none;
  color:var(--ink); font-weight:300;
}

/* 11. Price. Astra rendered it in its slate rgb(51,65,85).
   The selectors are long on purpose. WooCommerce's own inline CSS carries
   `.woocommerce div.product p.price` at (0,3,2), so `body.woocommerce-page .price`
   at (0,2,1) lost and the price stayed slate — measured, not assumed. These
   match its shape one step higher rather than reaching for !important. */
body.woocommerce-page .price,
body.woocommerce-page .amount,
body.woocommerce-page .woocommerce-Price-amount{ color:var(--ink); font-family:var(--sans); }
body.woocommerce-page div.product p.price,
body.woocommerce-page div.product span.price,
body.woocommerce-page ul.products li.product .price{ color:var(--ink); }
body.woocommerce-page div.product p.price{ font-size:24px; font-weight:400; margin-bottom:22px; }
body.woocommerce-page del .amount{ color:var(--ink-soft); }

/* 12. Notices — Astra's grey panels, in the design's language instead.
   The eyebrow accent (#DB9C6E) is the design's one attention colour, so it is
   what marks a notice rather than WooCommerce's purple or Astra's grey. */
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .woocommerce-noreviews,
body.woocommerce-page .cart-empty{
  background:var(--bone-deep);
  border-top:2px solid #DB9C6E;
  color:var(--ink);
  font-size:14px; font-weight:300;
  border-radius:0;
}
body.woocommerce-page .woocommerce-error{ border-top-color:var(--terracotta); }
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before{ color:#DB9C6E; }

/* 13. Tables — cart and order summary. */
body.woocommerce-page table.shop_table,
body.woocommerce-page table.shop_table td,
body.woocommerce-page table.shop_table th{ border-radius:0; border-color:var(--line); }
body.woocommerce-page table.shop_table th{
  font-family:var(--sans); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}
body.woocommerce-page table.shop_table td{ font-size:14.5px; font-weight:300; color:var(--ink-soft); }
body.woocommerce-page table.shop_table td .amount,
body.woocommerce-page .order-total .amount{ color:var(--ink); font-weight:500; }
body.woocommerce-page a.remove{ color:var(--ink-soft) !important; }
body.woocommerce-page a.remove:hover{ background:var(--ink) !important; color:var(--bone) !important; }

/* 14. Headings inherit the design's serif, as everywhere else on the site.
   h1 is in the list for Cart, Checkout and My account: those are ordinary pages rendered by
   this theme's page.php, which the five design pages never use, so their <h1> had no styling
   at all and came out as Astra's bold 36px Inter. */
body.woocommerce-page .woocommerce-products-header__title,
body.woocommerce-page .product_title,
body.woocommerce-page article.content-page > h1,
body.woocommerce-page h2,
body.woocommerce-page h3{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink);
}
body.woocommerce-page .woocommerce-products-header__title,
body.woocommerce-page article.content-page > h1{ font-size:clamp(34px,5vw,56px); line-height:1.05; margin-bottom:28px; }
body.woocommerce-page .product_title{ font-size:clamp(26px,3.2vw,40px); line-height:1.1; margin-bottom:14px; }
/* The tab labels are UI, not prose — they keep the sans face set in block 4. */
body.woocommerce-page .summary .woocommerce-tabs ul.tabs li a{ font-family:var(--sans); font-style:normal; }

/* 15. Breadcrumb and result count — quiet supporting type. */
body.woocommerce-page .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-result-count,
body.woocommerce-page .woocommerce-ordering select{
  font-size:12px; color:var(--ink-soft); font-weight:300;
}
body.woocommerce-page .woocommerce-breadcrumb a{ color:var(--ink-soft); }
body.woocommerce-page .woocommerce-breadcrumb a:hover{ color:#DB9C6E; }

/* 16. Shop card. */
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:20px; line-height:1.2; color:var(--ink);
}
body.woocommerce-page ul.products li.product .price{ font-size:15px; }

/* 17. Content links.
   Astra colours links with its own blue — "Lost your password?" on the account
   screen measured rgb(72,133,185) off the rendered pixels. The design has no
   blue at all: shell.css sets `a{color:inherit}` and reserves #DB9C6E as the
   single accent, which is what a hover gets here.

   Scoped to `main` so the nav and footer, which sit outside it, keep their own
   rules. Deliberately low specificity (0,1,2) — the breadcrumb rule in block 15
   is (0,2,2) and must still win, so its links stay the quieter --ink-soft. */
body.woocommerce-page main a:not(.button):not(.checkout-button){ color:var(--ink); }
body.woocommerce-page main a:not(.button):not(.checkout-button):hover{ color:#DB9C6E; }

/* =============================================================================
   TAP TARGETS — from the pre-launch audit, 10 Sep 2026 (F02, F04).
   Every figure below was measured at a 390px viewport on the running build.
   ============================================================================= */

/* 18. The buy button was the smallest control on the page.
   Add to cart measured 141x37 at 390px — under the 44x44 minimum, and sitting
   next to a 51x40 quantity box that is easier to hit by accident. It is the one
   control the whole store exists for. */
body.woocommerce-page .single_add_to_cart_button,
body.woocommerce-page #place_order,
body.woocommerce-page .checkout-button{ min-height:52px; }

body.woocommerce-page .quantity .qty{ min-height:52px; }

@media (max-width:600px){
  /* Its own row below the quantity field, full width — so the primary action is
     unmissable and the two controls stop competing for the same thumb. */
  body.woocommerce-page form.cart{ display:flex; flex-wrap:wrap; gap:12px; }
  body.woocommerce-page form.cart .quantity{ flex:0 0 auto; }
  body.woocommerce-page .single_add_to_cart_button{ flex:1 0 100%; width:100%; }
  body.woocommerce-page #place_order,
  body.woocommerce-page .checkout-button{ width:100%; }
}

/* 19. Checkout radios and checkboxes were 13x13.
   Shipping method, payment method and the terms box — the controls that decide
   whether an order is a $0 collection or a paid delivery, and how it is paid.
   A mis-tap here is an order-fulfilment problem, not an annoyance. */
body.woocommerce-page input[type="radio"],
body.woocommerce-page input[type="checkbox"]{
  width:22px; height:22px; margin-right:4px; flex:none;
}

/* Make the whole row the target, not just the 22px control. */
body.woocommerce-page #shipping_method li,
body.woocommerce-page .woocommerce-shipping-methods li,
body.woocommerce-page .wc_payment_method > label,
body.woocommerce-page .woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:12px;
  min-height:48px; padding:6px 0; cursor:pointer;
}
body.woocommerce-page #shipping_method li label,
body.woocommerce-page .woocommerce-shipping-methods li label{
  margin:0; cursor:pointer; flex:1;
}

/* 20. The single-country selector.
   Selling locations are restricted to Singapore, so the country row can only ever hold one
   value. inc/woocommerce.php tags it rather than unsetting it, so WooCommerce still receives
   the field and the order still records the country — it is only removed from view. */
body.woocommerce-page .liora-hidden-field{ display:none !important; }

/* ==========================================================================
   Age confirmation (F26) — inc/age-gate.php

   Lives in this file because the gate only ever renders on store screens, which are exactly
   the screens this stylesheet loads on.

   z-index 400 clears everything the chrome uses: the nav is 100, and shell.css lifts it to 210
   while the mobile panel is open (the panel itself is 200). A gate that a fixed nav can sit on
   top of is not a gate.
   ========================================================================== */

body.liora-age-locked{ overflow:hidden; }

.liora-age-gate{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:var(--ink);
  /* Opaque, not a translucent scrim. The point is that the store is not readable yet. */
}
.liora-age-panel{
  max-width:440px; width:100%;
  text-align:center;
  color:var(--bone);
}
.liora-age-panel .eyebrow{ color:#DB9C6E; }
.liora-age-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(32px,5vw,46px); line-height:1.06;
  color:var(--bone);
  margin:16px 0 18px;
}
.liora-age-body{
  font-size:15px; font-weight:300; line-height:1.75;
  color:rgba(245,241,233,0.78);
  margin-bottom:32px;
}
.liora-age-actions{
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
/* The gate's own button, because .btn-ghost is bordered for a bone background and this panel
   is ink. Sized past the 44px tap minimum the audit measured the buy button failing (F02). */
.liora-age-actions .btn-ghost.dark{
  border-color:rgba(245,241,233,0.45); color:var(--bone);
  min-height:52px; display:inline-flex; align-items:center; padding:0 30px;
}
.liora-age-actions .btn-ghost.dark:hover{ background:var(--bone); color:var(--ink); }
.liora-age-no{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(245,241,233,0.6);
  min-height:44px; padding:0 12px;
  text-decoration:underline; text-underline-offset:4px;
}
.liora-age-no:hover{ color:var(--bone); }

/* 24. Payment gateway furniture — defensive, before a gateway is installed.
   ------------------------------------------------------------------------
   The client is going to add Stripe, and possibly PayPal or HitPay. None of them is here yet,
   which is exactly when this is cheap to get right: every one of them injects markup into the
   checkout that this theme has never rendered, and two of this design's global rules are
   hostile to it.

   ⚑ shell.css sets `img{ width:100%; height:100%; object-fit:cover }` for the photography. A
   gateway's card logos sit INSIDE the payment-method label — Stripe emits a row of card-brand
   images, PayPal its own mark — and that rule turns each of them into a full-width block. The
   symptom is a checkout with a giant Visa logo across it, on the day the client connects a
   gateway and not before, which is the worst possible day to find it.

   ⚑ And `.wc_payment_method > label` is display:flex here, to make the whole row a tap target.
   Flex makes every one of those logos a flex item on its own line-ish row. Keeping them inline
   and auto-sized is what makes the label read as "Credit card [visa][mc][amex]" rather than as
   a stack.

   Written from WooCommerce's and the gateways' documented markup rather than from a live
   install, so re-check it against the real thing when a gateway goes in — but the failure it
   prevents is a visible one, and the cost of being early is a rule that does nothing. */

body.woocommerce-page .wc_payment_method label img,
body.woocommerce-page .payment_methods label img,
body.woocommerce-page .payment_box img{
  display:inline-block;
  width:auto;
  max-width:52px;
  height:auto;
  max-height:26px;
  object-fit:contain;
  vertical-align:middle;
  margin:0 2px;
  border-radius:0;
}

/* The panel a gateway opens under its radio — Stripe's card iframe, PayPal's buttons, a
   redirect gateway's sentence of explanation. Give it room and the body type, and do NOT put a
   flex context or a min-height on it: an iframe sized by the gateway's own script is the one
   thing on this page whose box is not ours to decide. */
body.woocommerce-page .payment_box{
  font-size:14px; font-weight:300; line-height:1.7; color:var(--ink-soft);
  background:var(--bone-deep); border-radius:0;
  padding:16px 18px; margin:6px 0 14px;
}
body.woocommerce-page .payment_box::before{ display:none; }   /* WooCommerce's little arrow */
body.woocommerce-page .payment_box p:last-child{ margin-bottom:0; }

/* A hosted card field is an iframe the gateway styles from the inside. Ours is only to stop the
   design's borders and background fighting it. */
body.woocommerce-page .payment_box iframe,
body.woocommerce-page .wc-stripe-elements-field,
body.woocommerce-page .wc-payment-form iframe{
  width:100%; height:auto; min-height:44px;
  background:transparent; border:1px solid var(--line); border-radius:0;
  padding:10px 12px; object-fit:fill;
}