/*
Theme Name: Headless Storefront Native
Description: Small native WooCommerce shell using the shared storefront identity.
Version: 0.3.2
Text Domain: headless-storefront-native
Requires PHP: 8.0
*/

/* Shared palette/type from app/globals.css. No remote fonts or theme parent. */
@font-face { font-family: "Source Sans 3"; src: url(assets/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: optional; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  color-scheme: light;
  --accent: #8a0100;
  --accent-dark: #5c0000;
  --paper: #f6eee9;
  --surface: #ffffff;
  --surface-soft: #efe7e2;
  --ink: #221a17;
  --muted: #62574f;
  --line: rgba(34, 26, 23, .14);
  --tile: #f4f4f4;
  --accent-soft: #f2deda;
  --control-border: #8c8076;
  --rule: #cbbdb4;
  --sans: "Source Sans 3", "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
.hsf-native { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
.hsf-native *, .hsf-native *::before, .hsf-native *::after { box-sizing: border-box; }
.hsf-native ::selection { color: var(--ink); background: var(--accent-soft); }
.hsf-native a { color: var(--accent); text-underline-offset: .2em; }
.hsf-native a:hover { color: var(--accent-dark); }
.hsf-native :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Checkout-safe store header (5 Oct 2026): the storefront header's white row, hairline and logo sizes, plus one
   contextual ink link (24px icon). Not sticky; no promo bar, search, menu or account icons. */
.hsf-native__header { border-bottom: 1px solid var(--line); background: var(--surface); }
.hsf-native__header-inner { width: min(100% - 2rem, 72rem); margin-inline: auto; min-height: 88px; padding-block: .5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.hsf-native__brand { display: inline-flex; align-items: center; min-height: 3rem; font-family: var(--serif); font-size: 1.5rem; text-decoration: none; overflow-wrap: anywhere; }
.hsf-native__brand svg { display: block; width: 232px; max-width: 100%; height: auto; }
.hsf-native a.hsf-native__utility { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; padding: .25rem .5rem; border-radius: 4px; color: var(--ink); font: 500 1rem/1.5 var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.hsf-native__utility svg { flex: none; width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .hsf-native a.hsf-native__utility:hover { color: var(--accent); } }
@media not all and (min-width: 1024px) { .hsf-native__header-inner { min-height: 76px; } .hsf-native__brand svg { width: 184px; } .hsf-native a.hsf-native__utility { gap: .5rem; } }
@media not all and (min-width: 781px) { .hsf-native__header-inner { min-height: 0; } .hsf-native__brand svg { width: 164px; } }
@media (max-width: 480px) { .hsf-native__header-inner { column-gap: .75rem; } .hsf-native__brand svg { width: 150px; } .hsf-native a.hsf-native__utility { padding-inline: .25rem; } }
@media (max-width: 22.5em) { .hsf-native__brand svg { width: 136px; } }
.hsf-native__main { width: min(100% - 2rem, 72rem); margin: 2rem auto 4rem; }
.hsf-native h1, .hsf-native h2, .hsf-native h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.hsf-native h1 { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin: 0 0 1rem; letter-spacing: -.02em; text-wrap: balance; }
.hsf-native.woocommerce-cart .hsf-native__main > h1,
.hsf-native.woocommerce-checkout .hsf-native__main > h1 { text-align: center; }
.hsf-native h2, .hsf-native h3 { margin: 2rem 0 1rem; }
.hsf-native p { max-width: 70ch; }
.hsf-native__skip { position: absolute; top: .5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--surface); transform: translateY(-200%); }
.hsf-native__skip:focus { transform: none; }
.hsf-native .woocommerce form .form-row { padding: 0; margin-bottom: 1rem; }
.hsf-native .woocommerce form .form-row,
.hsf-native .woocommerce .woocommerce-error { scroll-margin-block: 1.5rem; }
.hsf-native .woocommerce form .form-row label { color: var(--ink); font-size: 1rem; }
.hsf-native .woocommerce form .form-row label .optional { display: inline-block; white-space: normal; }
.hsf-native .woocommerce form .form-row input.input-text,
.hsf-native .woocommerce form .form-row textarea,
.hsf-native .woocommerce form .form-row select { width: 100%; min-height: 3rem; padding: .625rem .75rem; border: 1px solid var(--control-border); border-radius: 4px; color: var(--ink); background: var(--surface); font: inherit; caret-color: var(--accent); }
.hsf-native .woocommerce input::placeholder, .hsf-native .woocommerce textarea::placeholder { color: var(--muted); opacity: 1; }
.hsf-native .woocommerce form .form-row input.input-text:focus,
.hsf-native .woocommerce form .form-row textarea:focus,
.hsf-native .woocommerce form .form-row select:focus { border-color: var(--accent); }
.hsf-native .woocommerce a.button, .hsf-native .woocommerce button.button, .hsf-native .woocommerce input.button { min-height: 3rem; padding: .75rem 1.5rem; border-radius: 4px; background: var(--accent); color: var(--surface); font: 600 1rem/1.5 var(--sans); white-space: normal; text-align: center; }
.hsf-native .woocommerce a.button:hover, .hsf-native .woocommerce button.button:hover, .hsf-native .woocommerce input.button:hover { background: var(--accent-dark); color: var(--surface); }
.hsf-native .woocommerce button.button:disabled, .hsf-native .woocommerce input.button:disabled { background: var(--surface-soft); color: var(--muted); cursor: not-allowed; }
.hsf-native .woocommerce form button[type="submit"]:not(.button),
.hsf-native .woocommerce form input[type="submit"]:not(.button) { min-height: 3rem; padding: .625rem 1rem; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); color: var(--ink); font: 600 1rem/1.5 var(--sans); white-space: normal; cursor: pointer; }
.hsf-native .woocommerce form button[type="submit"]:not(.button):hover,
.hsf-native .woocommerce form input[type="submit"]:not(.button):hover { background: var(--paper); }
.hsf-native .woocommerce form button[type="submit"]:not(.button):disabled,
.hsf-native .woocommerce form input[type="submit"]:not(.button):disabled { color: var(--muted); cursor: not-allowed; }
.hsf-native .woocommerce form input[type="checkbox"],
.hsf-native .woocommerce form input[type="radio"] { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; margin: 0 .5rem 0 0; vertical-align: middle; accent-color: var(--accent); }
.hsf-native .woocommerce #ship-to-different-address label { display: inline-flex; align-items: center; min-height: 3rem; padding-block: .5rem; color: var(--ink); font: 400 1rem/1.5 var(--sans); cursor: pointer; }
.hsf-native .woocommerce #ship-to-different-address label input { flex: 0 0 1.25rem; }
.hsf-native .woocommerce table.shop_table { border-color: var(--line); border-radius: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hsf-native .woocommerce table.shop_table th,
.hsf-native .woocommerce table.shop_table td { padding: .875rem .75rem; border-color: var(--line); }
.hsf-native .woocommerce table.shop_table th { font-weight: 600; }
.hsf-native .woocommerce table.shop_table .woocommerce-Price-amount { white-space: nowrap; }
.hsf-native .woocommerce table.shop_table .order-total { color: var(--accent); font-size: 1.125rem; }
.hsf-native .woocommerce .woocommerce-error, .hsf-native .woocommerce .woocommerce-info, .hsf-native .woocommerce .woocommerce-message { background: var(--surface); color: var(--ink); border-top-color: var(--accent); font-size: 1rem; }
.hsf-native .woocommerce .woocommerce-error::before,
.hsf-native .woocommerce .woocommerce-info::before,
.hsf-native .woocommerce .woocommerce-message::before { content: "i" / ""; width: 1.25em; height: 1.25em; border: 1px solid currentColor; border-radius: 50%; color: var(--accent); font: 600 1rem/1.2 var(--sans); text-align: center; }
.hsf-native .woocommerce .woocommerce-error::before { content: "!" / ""; }

/* Native account routes keep Woo's links, forms and order permissions.
   Give their current location and order identity the same readable hierarchy. */
.hsf-native.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.hsf-native.woocommerce-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 2.75rem; padding: .625rem .75rem; border-radius: 4px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.hsf-native.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--surface); text-decoration: underline; }
.hsf-native.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] { background: var(--surface); color: var(--accent); font-weight: 600; text-decoration: underline; }
.hsf-native.woocommerce-account .woocommerce table.woocommerce-orders-table { font-size: 1rem; background: var(--surface); overflow-wrap: normal; }
.hsf-native.woocommerce-account .woocommerce-orders-table__cell-order-number a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.hsf-native.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { max-width: 100%; margin: .25rem .375rem .25rem 0; }

/* The thank-you source's useful grouping extends across native commerce:
   solid reading surfaces, compact headings and distinct totals. No templates,
   field order, shipping choices or payment/status behavior are replaced. */
.hsf-native .woocommerce .woocommerce-cart-form,
.hsf-native .woocommerce .cart_totals,
.hsf-native .woocommerce #customer_details,
.hsf-native .woocommerce .woocommerce-order-details,
.hsf-native .woocommerce .woocommerce-customer-details { padding: clamp(1rem, 2.5vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.hsf-native .woocommerce .cart-collaterals { margin-top: 1.5rem; }
.hsf-native .woocommerce .cart_totals h2,
.hsf-native .woocommerce .woocommerce-order-details h2,
.hsf-native .woocommerce .woocommerce-customer-details h2,
.hsf-native .woocommerce #customer_details h3 { margin: 0 0 1.25rem; font: 700 1.375rem/1.3 var(--serif); }
.hsf-native .woocommerce #customer_details .col-1,
.hsf-native .woocommerce #customer_details .col-2 { float: none; width: 100%; }
.hsf-native .woocommerce #customer_details .col-2 { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hsf-native .woocommerce #customer_details #ship-to-different-address { margin: 0 0 1rem; }
.hsf-native .woocommerce #customer_details .woocommerce-additional-fields h3 { margin-top: 1.5rem; }
.hsf-native .woocommerce #order_review_heading { margin: 1.5rem 0 0; padding: 1.5rem 1.5rem .75rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); font: 700 1.375rem/1.3 var(--serif); }
.hsf-native .woocommerce #order_review { container: hsf-order / inline-size; padding: 0 1.5rem 1.5rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); }
.hsf-native .woocommerce #order_review table.shop_table { border: 0; margin-bottom: 1rem; }
.hsf-native .woocommerce #order_review table.shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hsf-native .woocommerce #order_review table.shop_table tbody td { padding-block: 1.25rem; vertical-align: top; }
.hsf-native .woocommerce #order_review table.shop_table tbody tr:first-child td { border-top: 0; }
.hsf-native .woocommerce .hsf-review-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.hsf-native .woocommerce .hsf-review-item__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--tile); }
.hsf-native .woocommerce .hsf-review-item__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.hsf-native .woocommerce .hsf-review-item__name { color: var(--ink); font: 600 1rem/1.5 var(--sans); overflow-wrap: anywhere; }
.hsf-native .woocommerce #order_review .product-name dl.variation dt { font-weight: 400; }
.hsf-native .woocommerce #order_review .product-name dl.variation dd { margin: 0; padding: 0; }
.hsf-native .woocommerce #order_review .product-name dl.variation p { margin: 0; }
.hsf-native .woocommerce #order_review tbody .product-total { font-weight: 600; }
.hsf-native .woocommerce #order_review tfoot .order-total th,
.hsf-native .woocommerce #order_review tfoot .order-total td { padding-block: 1.25rem; font-size: 1.25rem; color: var(--ink); }
.hsf-native .woocommerce #order_review table.shop_table th:first-child,
.hsf-native .woocommerce #order_review table.shop_table td:first-child { padding-left: 0; }
.hsf-native .woocommerce #order_review table.shop_table th:last-child,
.hsf-native .woocommerce #order_review table.shop_table td:last-child { padding-right: 0; text-align: right; }
.hsf-native .woocommerce #payment { background: transparent; border-radius: 0; }
.hsf-native .woocommerce #payment ul.payment_methods { padding: 1rem 0; border-color: var(--line); }
.hsf-native .woocommerce #payment div.form-row { padding: 1rem 0 0; }
.hsf-native .woocommerce #payment div.payment_box { background: var(--paper); color: var(--ink); font-size: 1rem; }
.hsf-native .woocommerce #payment div.payment_box::before { border-bottom-color: var(--paper); }
.hsf-native .woocommerce #payment #place_order { float: none; width: 100%; margin-top: .75rem; }
.hsf-native .woocommerce #payment .woocommerce-privacy-policy-text { color: var(--muted); font-size: 1rem; }

/* Keep the provider's controls together beneath the total. The iframe owns its
   buttons, dynamic height and fullscreen state; this shell only groups them. */
/* The sole native method still supplies its radio, hidden fields and scripts.
   Its visible title belongs to the payment section below. Flatten only the
   source-verified input/script-only box; retain any future description/fields. */
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment ul.payment_methods:has(> .payment_method_mecom_paypal:only-child),
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment ul.payment_methods > .payment_method_mecom_paypal:only-child { margin: 0; padding: 0; border: 0; }
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment ul.payment_methods > .payment_method_mecom_paypal:only-child > label { display: none; }
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment .payment_box.payment_method_mecom_paypal:not(:has(> :not(input):not(script))) { margin: 0; padding: 0; border: 0; background: transparent; }
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment .payment_box.payment_method_mecom_paypal:not(:has(> :not(input):not(script)))::before { content: none; }
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment .form-row.place-order { margin: 0; padding: 0; border: 0; }
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment) #payment .woocommerce-privacy-policy-text:empty { margin: 0; padding: 0; }
.hsf-native .woocommerce #order_review > .hsf-cardshield-payment { min-width: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-cardshield-payment-title,
.hsf-native .woocommerce .hsf-cardshield-payment .hsf-cardshield-payment__title { margin: 0 0 .5rem; color: var(--ink); font: 600 1.125rem/1.5 var(--sans); }
.hsf-native .woocommerce .hsf-cardshield-payment__intro { max-width: 42ch; margin: 0 auto 1rem; color: var(--muted); font: 400 1rem/1.6 var(--sans); }
.hsf-native .woocommerce .hsf-cardshield-payment__widget { width: 100%; max-width: 28rem; min-width: 0; margin-inline: auto; }
.hsf-native .woocommerce .hsf-cardshield-payment__widget #mecom-paypal-credit-form-container-custom,
.hsf-native .woocommerce .hsf-cardshield-payment__widget #mecom-paypal-credit-form-container { min-width: 0; }
.hsf-native .woocommerce .hsf-cardshield-payment__widget #mecom-paypal-credit-form-container-custom > .cs_pp_element { display: none; }
.hsf-native .woocommerce .hsf-cardshield-payment__widget #payment-paypal-area-custom,
.hsf-native .woocommerce .hsf-cardshield-payment__widget #payment-paypal-area { display: block; border: 0; }
/* Release the fixed-position containing block only for the provider's existing
   fullscreen state. The order's container queries resume when that state ends. */
.hsf-native .woocommerce #order_review:has(> .hsf-cardshield-payment .full_screen_iframe_paypal_checkout) { container-type: normal; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-express-opening-notice { max-width: 28rem; margin: .75rem auto 0; color: var(--ink); font: 400 1rem/1.6 var(--sans); text-align: left; overflow-wrap: anywhere; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-express-opening-notice:empty { margin: 0; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-express-opening-notice .hsf-guard__details { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 600 1rem/1.5 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }

/* Payment outcome panel (owner-approved design, 10 Oct 2026; SPEC checkout-failure-ux-2026-10-10 sections 3.1 and 3.11).
   A failed or unconfirmed payment is explained inside the Payment section, where the card form was, in the Storage Notice
   box: a plain heading, one paragraph, one next step. No icon, red rule or shadow (red stays for the action). While the
   section has a payment state the used card form collapses; the reload panel (C) is the same box in Woo's payment box. */
.hsf-native .hsf-cardshield-payment > [hidden],
.hsf-native .hsf-pay-outcome[hidden],
.hsf-native .hsf-pay-outcome [hidden],
.hsf-native .woocommerce-NoticeGroup[hidden],
.hsf-native .woocommerce-NoticeGroup [hidden] { display: none !important; }
.hsf-native .woocommerce .hsf-pay-outcome { position: relative; width: 100%; max-width: 28rem; min-width: 0; margin: 0 auto 1rem; padding: 1rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); text-align: left; overflow-wrap: anywhere; scroll-margin-top: 1rem; }
.hsf-native .woocommerce .hsf-pay-outcome:focus:not(:focus-visible) { outline: none; }
.hsf-native .woocommerce .hsf-pay-outcome__title { display: block; margin: 0 0 .25rem; color: var(--ink); font: 600 1.125rem/1.5 var(--sans); letter-spacing: 0; }
.hsf-native .woocommerce .hsf-pay-outcome__body,
.hsf-native .woocommerce .hsf-pay-outcome__more { display: block; max-width: none; margin: 0; color: var(--ink); font: 400 1rem/1.6 var(--sans); }
.hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry { float: none; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 48px; margin: 1rem 0 0; padding: .75rem 1.5rem; border: 0; border-radius: 4px; background: var(--accent); color: var(--surface); font: 700 1rem/1.5 var(--sans); text-align: center; text-decoration: none; white-space: normal; cursor: pointer; }
.hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry[aria-disabled="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) { .hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry:hover { background: var(--accent-dark); color: var(--surface); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
  .hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry:active:not(:focus-visible) { transform: scale(.98); }
}
.hsf-native .woocommerce .hsf-pay-outcome__hint { display: block; max-width: none; margin: .5rem 0 0; color: var(--muted); font: 400 1rem/1.6 var(--sans); }
.hsf-native .woocommerce .hsf-pay-outcome__help { display: flex; flex-wrap: wrap; align-items: center; column-gap: .375rem; margin-top: .5rem; color: var(--ink); font: 400 1rem/1.6 var(--sans); }
.hsf-native .woocommerce .hsf-pay-outcome__help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .hsf-native .woocommerce .hsf-pay-outcome__help a:hover { color: var(--accent); } }
/* The ready line after "Try again" is information, not a failure: a plain ink line without the box. */
.hsf-native .woocommerce .hsf-pay-outcome[data-hsf-kind="ready"] { padding: 0; border: 0; background: transparent; text-align: center; text-wrap: pretty; scroll-margin-top: 3rem; }
/* After the reload the payment form shows its buttons again, not an open card form, so the ready line takes the centred
   intro's place instead of stacking under it (live capture, 11 Oct 2026). Without :has() both lines show. */
.hsf-native .woocommerce .hsf-cardshield-payment:has(.hsf-pay-outcome[data-hsf-kind="ready"]:not([hidden])) .hsf-cardshield-payment__intro { display: none; }
.hsf-native .woocommerce .hsf-pay-outcome[data-hsf-kind="ready"] .hsf-pay-outcome__title { display: none; }
/* A payment state collapses the used card form (and the intro for an unconfirmed payment); the reload stop hides the section. */
.hsf-native .woocommerce .hsf-cardshield-payment:is([data-hsf-pay-state="declined"], [data-hsf-pay-state="not-charged"], [data-hsf-pay-state="unconfirmed"], [data-hsf-pay-state="held"]) .hsf-cardshield-payment__widget { display: none; }
.hsf-native .woocommerce .hsf-cardshield-payment:is([data-hsf-pay-state="unconfirmed"], [data-hsf-pay-state="held"]) .hsf-cardshield-payment__intro { display: none; }
.hsf-native .woocommerce #order_review > .hsf-cardshield-payment[data-hsf-pay-state="unavailable"] { display: none; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-cardshield-payment-title { scroll-margin-top: 1rem; }
.hsf-native .woocommerce .hsf-cardshield-payment #hsf-cardshield-payment-title:focus:not(:focus-visible) { outline: none; }
/* Reload panel (C): the same box; the notice fill, top rule, icon and icon padding are cancelled and the payment box around
   it is flattened (no box, no arrow). */
.hsf-native .woocommerce #order_review .woocommerce-info.hsf-pay-outcome { margin: 0 auto 1rem; padding: 1rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 1rem; list-style: none; }
.hsf-native .woocommerce #order_review .woocommerce-info.hsf-pay-outcome::before { content: none; display: none; }
.hsf-native .woocommerce #payment .payment_box:has(> .hsf-pay-outcome) { margin: 0; padding: 0; border: 0; background: transparent; }
.hsf-native .woocommerce #payment .payment_box:has(> .hsf-pay-outcome)::before { content: none; }
@container hsf-order (max-width: 26em) { .hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry { display: flex; width: 100%; } }
@media (prefers-reduced-motion: no-preference) { .hsf-native .woocommerce .hsf-pay-outcome[data-hsf-fade] { animation: hsf-outcome-in 200ms cubic-bezier(.23, 1, .32, 1); } }
@keyframes hsf-outcome-in { from { opacity: 0; } }
@media (forced-colors: active) {
  .hsf-native .woocommerce .hsf-pay-outcome { border-color: CanvasText; }
  .hsf-native .woocommerce .hsf-pay-outcome .hsf-pay-outcome__retry { border: 1px solid ButtonText; }
}

.hsf-native .woocommerce .select2-container .select2-selection--single { height: auto; min-height: 3rem; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); }
.hsf-native .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: .625rem 2rem .625rem .75rem; color: var(--ink); line-height: 1.6; }
.hsf-native .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: calc(50% - 13px); right: .5rem; }
.hsf-native .woocommerce .woocommerce-order > .woocommerce-notice { margin: 0 auto 1.5rem; text-align: center; }
/* Order link without an order (15 Oct sweep MS-04): calm info note, actions on their own line. */
.hsf-native .woocommerce .hsf-order-missing p { margin: 0 0 .5rem; }
.hsf-native .woocommerce .hsf-order-missing .hsf-order-missing__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 0; }
.hsf-native .woocommerce .hsf-order-missing__actions a,
.hsf-native .woocommerce .hsf-reset-help a { display: inline-flex; align-items: center; min-height: 44px; }
/* Show-password control (15 Oct sweep MS-31): a 44 px target; the icon is sized in em so it grows with text. */
.hsf-native.woocommerce-account .woocommerce form .password-input input.input-text { padding-right: 3rem; }
.hsf-native.woocommerce-account .woocommerce form .show-password-input { right: 0; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; width: 2.75em; height: 2.75em; }
.hsf-native.woocommerce-account .woocommerce form .show-password-input::before { width: 1.375em; height: 1.375em; }
.hsf-native .woocommerce ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem; margin: 0 0 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hsf-native .woocommerce ul.woocommerce-order-overview::before,
.hsf-native .woocommerce ul.woocommerce-order-overview::after { content: none; }
.hsf-native .woocommerce ul.woocommerce-order-overview li { float: none; margin: 0; padding: 0; border: 0; color: var(--muted); font-size: 1rem; text-transform: none; overflow-wrap: anywhere; }
.hsf-native .woocommerce ul.woocommerce-order-overview li strong { margin-top: .25rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.hsf-native .woocommerce .woocommerce-customer-details address { padding: 0; border: 0; border-radius: 0; line-height: 1.7; }

/* Order confirmation uses the same line-product photograph as checkout.
   Keep Woo's refund/quantity/meta markup; only its visual grouping changes. */
.hsf-native .woocommerce .woocommerce-order-details { container: hsf-order / inline-size; }
.hsf-native .woocommerce .woocommerce-order-details table.shop_table { table-layout: fixed; border: 0; }
.hsf-native .woocommerce .woocommerce-order-details table.shop_table th:first-child { width: 72%; }
.hsf-native .woocommerce .woocommerce-order-details table.shop_table td { vertical-align: top; }
.hsf-native .woocommerce .woocommerce-order-details table.shop_table th:last-child,
.hsf-native .woocommerce .woocommerce-order-details table.shop_table td:last-child { text-align: right; }
.hsf-native .woocommerce .woocommerce-order-details .hsf-review-item__name a { color: inherit; text-decoration-color: var(--line); }
.hsf-native .woocommerce .woocommerce-order-details .hsf-review-item__name a:hover { color: var(--accent); text-decoration-color: currentColor; }
.hsf-native .woocommerce .woocommerce-order-details .hsf-review-item ~ .product-quantity,
.hsf-native .woocommerce .woocommerce-order-details .hsf-review-item ~ .wc-item-meta { display: block; margin: .5rem 0 0 6rem; color: var(--muted); font: 400 1rem/1.5 var(--sans); }
.hsf-native .woocommerce .woocommerce-order-details .wc-item-meta p { margin: 0; }

/* Retained MU compatibility is styled only when its authorized renderer runs.
   Its source and the adapter's status/authentication boundaries stay intact.
   The MU redefines these names on .sblm-thankyou, so they repeat the :root
   values as literals (var(--ink) here would be a self-reference cycle). */
.hsf-native .sblm-thankyou { --ink: #221a17; --oxblood: #8a0100; --muted: #62574f; --line: rgba(34, 26, 23, .14); --paper: #ffffff; --field: #f4f4f4; max-width: 52rem; padding: 0 0 2rem; font-family: var(--sans); }
.hsf-native .sblm-hero { padding: .5rem 0 1rem; }
.hsf-native .sblm-h1 { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; }
.hsf-native .sblm-lede { font-size: 1rem; }
.hsf-native .sblm-lede[data-hsf-order-status] { margin-top: .75rem; color: var(--oxblood); font-weight: 600; }
.hsf-native .sblm-card { margin-top: 1.5rem; padding: clamp(1rem, 3vw, 2rem); border-radius: 12px; }
.hsf-native .sblm-card-title { font-size: 1.125rem; letter-spacing: 0; text-transform: none; }
.hsf-native .sblm-col-label { font-size: 1rem; letter-spacing: 0; text-transform: none; }
.hsf-native .sblm-kv, .hsf-native .sblm-addr, .hsf-native .sblm-name,
.hsf-native .sblm-sub, .hsf-native .sblm-amt, .hsf-native .sblm-trow,
.hsf-native .sblm-support a, .hsf-native .sblm-support a small,
.hsf-native .sblm-footnote { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.hsf-native .sblm-kv { flex-wrap: wrap; gap: .25rem 1rem; }
.hsf-native .sblm-kv .sblm-v { min-width: 0; overflow-wrap: anywhere; }
.hsf-native .sblm-thumb { flex-basis: 4rem; width: 4rem; height: 4rem; background: var(--field); }
.hsf-native .sblm-thumb .sblm-thumb-img { width: 100%; height: 100%; object-fit: contain; }
.hsf-native .sblm-item { flex-wrap: wrap; gap: .75rem; align-items: start; }
.hsf-native .sblm-item-text { flex: 1 1 12rem; }
.hsf-native .sblm-amt { white-space: normal; font-variant-numeric: tabular-nums; }
.hsf-native .sblm-trow { gap: 1rem; }
.hsf-native .sblm-trow.sblm-grand { font-size: 1.25rem; }
.hsf-native .sblm-support { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); border-radius: 12px; }
.hsf-native .sblm-support a { padding: 1rem; }
/* Help-strip grammar without MU markup changes: hide the red text-glyph
   icons (unlabelled characters) and use the storefront's red/underline hover. */
.hsf-native .sblm-support a > span { display: none; }
.hsf-native .sblm-support a:hover { background: var(--surface); color: var(--accent); text-decoration: underline; }
.hsf-native .sblm-footnote { text-align: left; }

/* At enlarged text the order's real table reflows by row instead of splitting
   a price or forcing the whole page wider. DOM order/headers remain native. */
@container hsf-order (max-width: 25em) {
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table,
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table tbody,
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table tfoot { display: block; width: 100%; }
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table th,
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table td { display: block; width: auto; max-width: 100%; padding: 0; border: 0; }
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table tbody .product-name { flex-basis: 100%; }
  .hsf-native .woocommerce .woocommerce-order-details table.shop_table td:last-child { margin-left: auto; }
  .hsf-native .woocommerce #order_review .woocommerce-error,
  .hsf-native .woocommerce #order_review .woocommerce-info,
  .hsf-native .woocommerce #order_review .woocommerce-message { padding: .75rem 0; }
  .hsf-native .woocommerce #order_review .woocommerce-error::before,
  .hsf-native .woocommerce #order_review .woocommerce-info::before,
  .hsf-native .woocommerce #order_review .woocommerce-message::before { position: static; display: block; margin-bottom: .5rem; }
}
@container hsf-order (max-width: 17em) {
  .hsf-native .woocommerce .hsf-review-item { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .hsf-native .woocommerce .hsf-review-item__photo { width: 5rem; }
  .hsf-native .woocommerce .woocommerce-order-details .hsf-review-item ~ .product-quantity,
  .hsf-native .woocommerce .woocommerce-order-details .hsf-review-item ~ .wc-item-meta { margin-left: 0; }
}
@media (max-width: 48rem) {
  .hsf-native.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .25rem .5rem; }
  /* Woo's responsive rule hides tbody th; current order templates use a row
     header for the order number. Keep that native label/link visible. */
  .hsf-native.woocommerce-account .woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number { display: block; text-align: left; }
  .hsf-native.woocommerce-account .woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before { content: attr(data-title) ": "; margin-inline-end: .5rem; }
  .hsf-native.woocommerce-account .woocommerce .woocommerce-info .button,
  .hsf-native.woocommerce-account .woocommerce .woocommerce-message .button,
  .hsf-native.woocommerce-account .woocommerce .woocommerce-error .button { float: none; display: block; width: fit-content; max-width: 100%; margin: 0 0 .75rem; }
  .hsf-native .woocommerce .col2-set .col-1, .hsf-native .woocommerce .col2-set .col-2 { width: 100%; float: none; }
  .hsf-native .sblm-summary-head { grid-template-columns: 1fr; }
  .hsf-native .sblm-summary-head .sblm-col:first-child { padding: 0 0 1rem; margin-bottom: 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .hsf-native .sblm-summary-head .sblm-col:last-child { padding-left: 0; }
}
@media (forced-colors: active) {
  .hsf-native :focus-visible { outline-color: Highlight; }
  .hsf-native .woocommerce a.button, .hsf-native .woocommerce button.button, .hsf-native .woocommerce input.button { border: 1px solid ButtonText; }
}

/* Enlarged-text reflow verified against the retained native Woo templates.
   Long receipt email addresses may wrap; account columns use available text
   space, without changing checkout/provider containing blocks or markup. */
.hsf-native .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email { overflow-wrap: anywhere; }
.hsf-native .woocommerce .woocommerce-order-details table.shop_table td:has(> .order-actions-button) { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.hsf-native .woocommerce .woocommerce-order-details .order-actions-button { margin: 0; max-width: 100%; }
.hsf-native.woocommerce-account .hsf-native__main { container: hsf-account-page / inline-size; }
@container hsf-account-page (max-width: 48em) {
  .hsf-native .woocommerce .woocommerce-MyAccount-navigation,
  .hsf-native .woocommerce .woocommerce-MyAccount-content { float: none; width: 100%; }
  .hsf-native .woocommerce .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: 0; list-style: none; }
}

/* Checkout workshop (3 Oct 2026). Presentation only: DOM order, Woo classes, field names and autocomplete are untouched. */
.hsf-sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hsf-native.woocommerce-checkout .hsf-native__main { container: hsf-main / inline-size; margin-block: 1rem 3rem; }
.hsf-native.woocommerce-checkout:not(.woocommerce-order-received):not(.woocommerce-order-pay) .hsf-native__main:has(.hsf-journey) > h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container hsf-main (max-width: 17em) {
  .hsf-native.woocommerce-checkout:not(.woocommerce-order-received):not(.woocommerce-order-pay) .hsf-native__main:has(.hsf-journey) > h1 { position: static; width: auto; height: auto; margin: 0 0 1rem; overflow: visible; clip-path: none; white-space: normal; }
  .hsf-native__main .woocommerce:has(> .hsf-journey) { display: flex; flex-direction: column; }
  .hsf-native__main .woocommerce > .hsf-journey { order: 1; }
}

/* Billing and shipping field grid, placed by field ID (address-i18n.js resets form-row-* on every country change).
   Tiers are the fields' own width in em, so 200% text collapses them (390px at 200% ≈ 10.2em: one column):
   < 16em one column; 16em (320px ≈ 16em) First|Last 3/3; 18em (360px ≈ 18.5em) adds State 4|ZIP 2;
   20em (390px ≈ 20.4em) adds Country|Street 3/3, State|ZIP 3/3 and Phone|Email 3/3, City full width;
   32em PC (1280 and 1440px ≈ 32.7em, the page is capped at 72rem): Country 2|Street 4, City|State|ZIP 2/2/2, Phone|Email 3/3.
   No Apt row (owner, 5 Oct 2026: "we dont need APT since it's fillable in Street address").
   Pairs follow DOM order, never CSS order. A partner that Woo hides for a country (inline display: none) or does not
   print leaves its neighbour full width; with State hidden, City|ZIP pair instead. Every placement carries
   #customer_details so it outranks the full-width default; the :has() guards drop out where :has() is unsupported. */
.hsf-native .woocommerce :is(.woocommerce-billing-fields, .woocommerce-shipping-fields) { container: hsf-fields / inline-size; }
.hsf-native .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.hsf-native .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)::before,
.hsf-native .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper)::after { content: none; }
.hsf-native .woocommerce #customer_details :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row { grid-column: 1 / -1; width: auto; min-width: 0; float: none; margin: 0; padding: 0; }
@container hsf-fields (min-width: 16em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :is([id$="_first_name_field"], [id$="_last_name_field"]) { grid-column: span 3; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :not([id$="_first_name_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) + [id$="_last_name_field"] { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_first_name_field"]:not(:has(+ [id$="_last_name_field"]:not([style*="display: none"], [style*="display:none"], [hidden]))) { grid-column: 1 / -1; }
}
@container hsf-fields (min-width: 18em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_state_field"] { grid-column: span 4; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_postcode_field"] { grid-column: span 2; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :not([id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) + [id$="_postcode_field"] { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_state_field"]:not(:has(+ [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden]))) { grid-column: 1 / -1; }
}
@container hsf-fields (min-width: 20em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :is([id$="_country_field"], [id$="_address_1_field"], [id$="_state_field"], [id$="_postcode_field"], [id$="_phone_field"], [id$="_email_field"]) { grid-column: span 3; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :not([id$="_country_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) + [id$="_address_1_field"] { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > :not([id$="_phone_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) + [id$="_email_field"] { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_country_field"]:not(:has(+ [id$="_address_1_field"]:not([style*="display: none"], [style*="display:none"], [hidden]))) { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_phone_field"]:not(:has(+ [id$="_email_field"]:not([style*="display: none"], [style*="display:none"], [hidden]))) { grid-column: 1 / -1; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"]:has(+ [id$="_state_field"]:is([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) { grid-column: span 3; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"] + [id$="_state_field"]:is([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) { grid-column: span 3; }
}
@container hsf-fields (min-width: 32em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_country_field"] { grid-column: span 2; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_address_1_field"] { grid-column: span 4; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"]:has(+ [id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) { grid-column: span 2; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"] + [id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden]):has(+ [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden])) { grid-column: span 2; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"] + [id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_postcode_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) { grid-column: span 2; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"]:has(+ [id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_postcode_field"]:is([style*="display: none"], [style*="display:none"], [hidden])) { grid-column: span 3; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_city_field"] + [id$="_state_field"]:not([style*="display: none"], [style*="display:none"], [hidden]):has(+ [id$="_postcode_field"]:is([style*="display: none"], [style*="display:none"], [hidden])) { grid-column: span 3; }
}
.hsf-native .woocommerce #customer_details .form-row > label { display: block; margin: 0 0 .25rem; color: var(--ink); font-weight: 500; line-height: 1.5; }
.hsf-native .woocommerce #customer_details .form-row .required { color: var(--accent); text-decoration: none; border: 0; }
.hsf-native .woocommerce #customer_details .form-row label .optional { color: var(--muted); font-weight: 400; }
/* Street row: label left, the address plugin's toggle right in the same row (its geometry is in address.css). */
.hsf-native .woocommerce #customer_details [id$="_address_1_field"] { container: hsf-street / inline-size; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: .75rem; }
.hsf-native .woocommerce #customer_details [id$="_address_1_field"] > label { flex: 1 1 auto; }
.hsf-native .woocommerce #customer_details [id$="_address_1_field"] > :not(label):not(.hsf-address-notice) { flex: 1 0 100%; }
/* The Street row stacks above the rows after it, so Woo's suggestion list is never painted under a later State control. */
.hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_address_1_field"] { position: relative; z-index: 1; }
/* Country|Street pair. While the Street column is at most 22em (fields 20em to 33.5em: Street is (fields - 1em) / 2, then
   (2 x fields - 1em) / 3 from 32em), address.css puts the address toggle on its own line under the Street label. That line
   is held at exactly 3em (one or two lines of 1.5 line height) and Country's label gets the same 3em of top padding, so both
   inputs start level and Country's label stays next to its own field. Only when the toggle exists. */
@container hsf-fields (min-width: 20em) and (max-width: 33.5em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"]:has(> [id$="_country_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_address_1_field"] > .hsf-address-notice) > [id$="_country_field"] > label { padding-top: 3em; }
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_country_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_address_1_field"] .hsf-address-toggle { min-height: 3em; }
}
/* Paired Street below the PC tier (a column of about 155px at 390px): Woo's suggestion list runs from the Street input's
   end edge back over the Country column, to the fields' full width, instead of wrapping each suggestion into its column. */
@container hsf-fields (min-width: 20em) and (max-width: 31.99em) {
  .hsf-native .woocommerce #customer_details [class*="-fields__field-wrapper"] > [id$="_country_field"]:not([style*="display: none"], [style*="display:none"], [hidden]) + [id$="_address_1_field"] .woocommerce-address-suggestions { inset-inline: auto 0; width: calc(200% + 1rem); max-width: none; }
}
/* Field states. Every .form-row/.select2 rule is scoped to #customer_details: Woo also prints .form-row inside #payment. */
.hsf-native .woocommerce #customer_details .form-row :is(input.input-text, select):autofill { box-shadow: inset 0 0 0 100px var(--paper); -webkit-text-fill-color: var(--ink); }
.hsf-native .woocommerce #customer_details .form-row :is(input.input-text, select):-webkit-autofill { box-shadow: inset 0 0 0 100px var(--paper); -webkit-text-fill-color: var(--ink); }
.hsf-native .woocommerce #customer_details .form-row.woocommerce-invalid :is(input.input-text, select, .select2-selection) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hsf-native .woocommerce #customer_details .form-row.woocommerce-validated :is(input.input-text, select, .select2-selection) { border-color: var(--control-border); box-shadow: none; }
/* A row the shopper has not used yet stays neutral until they try to pay (assets/checkout.js adds hsf-touch-gate and
   hsf-touched). Without the script, Woo's invalid state shows as before. */
.hsf-native .woocommerce form.hsf-touch-gate #customer_details .form-row.woocommerce-invalid:not(.hsf-touched) :is(input.input-text, select, .select2-selection) { border-color: var(--control-border); box-shadow: none; }
.hsf-native .woocommerce form.hsf-touch-gate #customer_details .form-row:not(.hsf-touched) .checkout-inline-error-message { display: none; }
.hsf-native .woocommerce #customer_details .form-row .checkout-inline-error-message { margin: .375rem 0 0; color: var(--accent-dark); font: 400 1rem/1.5 var(--sans); }
.hsf-native .woocommerce #customer_details .select2-container .select2-selection--single .select2-selection__rendered { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
/* Order notes disclosure */
.hsf-native .woocommerce .hsf-order-notes { margin-top: .5rem; border-top: 1px solid var(--line); }
.hsf-native .woocommerce .hsf-order-notes > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-weight: 500; }
.hsf-native .woocommerce :is(.hsf-order-notes, .hsf-coupon) > summary::-webkit-details-marker { display: none; }
.hsf-native .woocommerce :is(.hsf-order-notes, .hsf-coupon) > summary::after { content: "+" / ""; color: var(--accent); font: 600 1.25rem/1 var(--sans); }
.hsf-native .woocommerce :is(.hsf-order-notes, .hsf-coupon)[open] > summary::after { content: "\2212" / ""; }
.hsf-native .woocommerce .hsf-order-notes h3,
.hsf-native .woocommerce .hsf-order-notes #order_comments_field > label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Page grid. Below 64rem no child has a grid-row: everything flows in DOM order, unknown plugin output included;
   the heading and "Edit cart" share one row through their columns (sparse auto-placement keeps them together). */
.hsf-native .woocommerce #customer_details { padding: 1.5rem; }
.hsf-native .woocommerce form.checkout:has(#customer_details) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; align-items: start; }
.hsf-native .woocommerce form.checkout > * { grid-column: 1 / -1; }
.hsf-native .woocommerce form.checkout > #order_review_heading { grid-column: 1; margin: 1.5rem 0 0; padding: 1.25rem .5rem .5rem 1.5rem; border: 1px solid var(--line); border-width: 1px 0 0 1px; border-radius: 8px 0 0 0; background: var(--surface); }
.hsf-native .woocommerce form.checkout > .hsf-review-intro { grid-column: 2; align-self: stretch; display: flex; align-items: flex-start; justify-content: flex-end; max-width: none; margin: 1.5rem 0 0; padding: .75rem 1.5rem 0 0; border: 1px solid var(--line); border-width: 1px 1px 0 0; border-radius: 0 8px 0 0; background: var(--surface); }
.hsf-native .woocommerce .hsf-review-intro a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.hsf-native .woocommerce form.checkout > .hsf-order-status { max-width: none; margin: 0; padding: .25rem 1.5rem .5rem; border-inline: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.hsf-native .woocommerce form.checkout > .hsf-order-status[hidden] { display: none; }
@container hsf-main (max-width: 20em) {
  .hsf-native .woocommerce form.checkout > #order_review_heading { grid-column: 1 / -1; padding-right: 1rem; border-right-width: 1px; border-radius: 8px 8px 0 0; }
  .hsf-native .woocommerce form.checkout > .hsf-review-intro { grid-column: 1 / -1; justify-content: flex-start; margin: 0; padding: 0 1rem; border-width: 0 1px; border-radius: 0; }
}
/* PC: billing on the left; every child after #customer_details, in DOM order, in the right column with auto rows.
   Row 1 is reserved (notices, else an empty ::before), so nothing can be placed above "Billing details";
   dense flow lets the right column start at row 2 even when unknown output precedes #customer_details. */
@media (min-width: 64rem) {
  .hsf-native .woocommerce form.checkout:has(#customer_details) { grid-template-columns: minmax(0, 1.25fr) 2rem minmax(0, 1fr) auto; grid-template-rows: auto repeat(5, auto) 1fr; grid-auto-flow: row dense; }
  .hsf-native .woocommerce form.checkout:has(#customer_details)::before { content: ""; grid-column: 1 / -1; grid-row: 1; }
  .hsf-native .woocommerce form.checkout > .woocommerce-NoticeGroup { grid-row: 1; }
  .hsf-native .woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 6; }
  .hsf-native .woocommerce form.checkout > #customer_details ~ * { grid-column: 3 / -1; }
  .hsf-native .woocommerce form.checkout > #customer_details ~ #order_review_heading { grid-column: 3; margin-top: 0; }
  .hsf-native .woocommerce form.checkout > #customer_details ~ .hsf-review-intro { grid-column: 4; margin-top: 0; }
}
@media (max-width: 48rem) {
  .hsf-native .woocommerce #customer_details { padding: 1rem; }
  .hsf-native .woocommerce form.checkout > #order_review_heading { padding-left: 1rem; }
  .hsf-native .woocommerce form.checkout > .hsf-review-intro { padding-right: 1rem; }
  .hsf-native .woocommerce form.checkout > .hsf-order-status, .hsf-native .woocommerce #order_review { padding-inline: 1rem; }
}

/* Review lines. Woo prints name, '&nbsp;', quantity, options in one cell (review-order.php:48-50):
   the cell is a grid of named areas and its own text is 0px, so that &nbsp; never makes a row. */
.hsf-native .woocommerce #order_review table.shop_table,
.hsf-native .woocommerce #order_review table.shop_table :is(tbody, tfoot) { display: block; width: 100%; }
.hsf-native .woocommerce #order_review tbody tr.cart_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: end; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.hsf-native .woocommerce #order_review tbody tr.cart_item > td { display: block; padding: 0; border: 0; }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "photo name" "photo opts" "photo qty"; column-gap: .875rem; row-gap: 0; align-items: start; align-self: start; font-size: 0; line-height: 0; }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name > * { font-size: 1rem; line-height: 1.5; }
.hsf-native .woocommerce #order_review .hsf-review-item { display: contents; }
.hsf-native .woocommerce #order_review .hsf-review-item__photo { grid-area: photo; width: 100%; }
.hsf-native .woocommerce #order_review .hsf-review-item__name { grid-area: name; }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name > dl.variation { grid-area: opts; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .375rem; margin: .25rem 0 0; padding: 0; color: var(--muted); font: 400 1rem/1.5 var(--sans); }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name > dl.variation :is(dt, dd) { float: none; margin: 0; }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name > dl.variation dd p { margin: 0; }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-name > :is(.hsf-qty, .hsf-review-quantity) { grid-area: qty; margin-top: .75rem; }
.hsf-native .woocommerce .hsf-review-quantity { display: block; color: var(--muted); font: 400 1rem/1.5 var(--sans); }
.hsf-native .woocommerce #order_review tr.cart_item > td.product-total { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: end; font-variant-numeric: tabular-nums; }
.hsf-native .woocommerce #order_review tr.cart_item:has(.hsf-qty__box) > td.product-total { min-height: 3.1875rem; }
.hsf-native .woocommerce .hsf-line-total__amount { font-weight: 600; white-space: nowrap; }
.hsf-native .woocommerce .hsf-line-each { color: var(--muted); font-weight: 400; white-space: nowrap; }
.hsf-native .woocommerce .hsf-line-total__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container hsf-order (max-width: 26em) { .hsf-native .woocommerce #order_review tr.cart_item > td.product-name { grid-template-columns: 4rem minmax(0, 1fr); column-gap: .75rem; } }
@container hsf-order (max-width: 19em) {
  .hsf-native .woocommerce #order_review tbody tr.cart_item { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  .hsf-native .woocommerce #order_review tr.cart_item > td.product-total,
  .hsf-native .woocommerce #order_review tr.cart_item:has(.hsf-qty__box) > td.product-total { flex-direction: row; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; justify-content: flex-start; min-height: 0; text-align: start; }
  .hsf-native .woocommerce .hsf-line-total__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--muted); }
}
@container hsf-order (max-width: 17em) {
  .hsf-native .woocommerce #order_review tr.cart_item > td.product-name { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "name" "opts" "qty"; }
  .hsf-native .woocommerce #order_review .hsf-review-item__photo { width: 5rem; }
}

/* Summary rows in the cart's order: Subtotal, Shipping, other rows, coupon or Discount, Total. */
.hsf-native .woocommerce #order_review table.shop_table tfoot { display: flex; flex-direction: column; padding-top: .5rem; }
.hsf-native .woocommerce #order_review tfoot tr { order: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding-block: .5rem; }
.hsf-native .woocommerce #order_review tfoot tr.cart-subtotal { order: 1; }
.hsf-native .woocommerce #order_review tfoot tr.woocommerce-shipping-totals { order: 2; }
.hsf-native .woocommerce #order_review tfoot :is(tr.cart-discount, tr.hsf-coupon-row) { order: 4; }
.hsf-native .woocommerce #order_review tfoot tr.order-total { order: 5; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1.25rem; color: var(--ink); }
.hsf-native .woocommerce #order_review tfoot :is(th, td) { display: block; padding: 0; border: 0; text-align: start; }
.hsf-native .woocommerce #order_review tfoot th { color: var(--muted); font-weight: 400; }
.hsf-native .woocommerce #order_review tfoot td { margin-inline-start: auto; text-align: end; font-weight: 600; }
.hsf-native .woocommerce #order_review tfoot tr.order-total :is(th, td) { color: var(--ink); font-size: 1.25rem; font-weight: 700; padding: 0; }
.hsf-native .woocommerce #order_review #shipping_method { margin: 0; padding: 0; list-style: none; }
.hsf-native .woocommerce #order_review #shipping_method li { margin: 0; padding: 0; text-indent: 0; white-space: nowrap; }
@container hsf-order (max-width: 17em) { .hsf-native .woocommerce #order_review #shipping_method li { white-space: normal; } }

/* Help row below the payment area (left-aligned like the cart's) and its two dialogs. */
.hsf-native .hsf-checkout-help { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .25rem 1.5rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.hsf-native .hsf-help__trigger { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0; color: var(--ink); font: 400 1rem/1.5 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; cursor: pointer; }
.hsf-native .hsf-help__trigger svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .hsf-native .hsf-help__trigger:hover { color: var(--accent); } .hsf-native .hsf-help__trigger:hover svg { color: currentColor; } }
html.hsf-dialog-open { overflow: hidden; scrollbar-gutter: stable; }
.hsf-native .hsf-dialog { width: min(calc(100% - 2rem), 40rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 28px 90px rgb(20 12 8 / .3); overflow: auto; overscroll-behavior: contain; }
.hsf-native .hsf-dialog--anna { width: min(calc(100% - 2rem), 30rem); }
.hsf-native .hsf-dialog::backdrop { background: rgba(34, 26, 23, .44); }
.hsf-native .hsf-dialog[data-motion-pointer] { animation: hsf-settle 200ms cubic-bezier(.23, 1, .32, 1); }
@keyframes hsf-settle { from { opacity: 0; transform: scale(.97); } }
.hsf-native .hsf-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .5rem 1.5rem; background: var(--surface); }
.hsf-native .hsf-dialog__head h2 { margin: 0; font: 700 1.5rem/1.25 var(--serif); }
.hsf-native .hsf-dialog__close { display: grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--control-border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.hsf-native .hsf-dialog__close svg { width: 20px; height: 20px; }
.hsf-native .hsf-dialog__body { padding: .5rem 1.5rem 1.5rem; }
.hsf-native .hsf-dialog__body dl { margin: 0; }
.hsf-native .hsf-dialog__body dt { margin-top: 1rem; font: 700 1.125rem/1.4 var(--serif); }
.hsf-native .hsf-dialog__body dt:first-child { margin-top: 0; }
.hsf-native .hsf-dialog__body dd { margin: .25rem 0 0; max-width: 60ch; }
.hsf-native .hsf-dialog__foot { margin: 1.25rem 0 0; }
.hsf-native .hsf-dialog__foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hsf-native .hsf-anna { display: grid; gap: .5rem; }
.hsf-native .hsf-anna__row { display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.hsf-native .hsf-anna__row:active { background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .hsf-native .hsf-anna__row:hover { background: var(--accent-soft); color: var(--ink); } }
.hsf-native .hsf-anna__disc { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; }
.hsf-native .hsf-anna__disc svg { width: 1.25rem; height: 1.25rem; }
.hsf-native .hsf-anna__disc--wa { background: #0e7a3f; }
.hsf-native .hsf-anna__disc--phone { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hsf-native .hsf-dialog[data-motion-pointer] { animation: none; } }
@media (forced-colors: active) { .hsf-native .hsf-anna__row { border-color: CanvasText; } }

.hsf-native .woocommerce .hsf-qty { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.hsf-native .woocommerce .hsf-qty__caption { color: var(--muted); font-weight: 400; }
.hsf-native .woocommerce .hsf-qty__box { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; width: max(140px, calc(90px + 2.5rem)); max-width: 100%; min-height: 51px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); overflow: hidden; }
.hsf-native .woocommerce :is(.hsf-qty__step, .hsf-qty__field) { min-width: 0; margin: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
.hsf-native .woocommerce .hsf-qty__step { display: grid; place-items: center; padding: 0; cursor: pointer; }
.hsf-native .woocommerce .hsf-qty__step svg { width: 20px; height: 20px; }
.hsf-native .woocommerce .hsf-qty__field { grid-column: 2; width: 100%; padding: 0 2px; font-variant-numeric: tabular-nums; text-align: center; }
.hsf-native .woocommerce :is(.hsf-qty__step, .hsf-qty__field):focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.hsf-native .woocommerce .hsf-qty__step[aria-disabled="true"] { background: var(--surface-soft); color: var(--muted); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .hsf-native .woocommerce .hsf-qty__step:not([aria-disabled="true"]):hover { background: var(--paper); } }
.hsf-native .woocommerce .hsf-qty__note { max-width: 22rem; color: var(--muted); }
.hsf-native .woocommerce .hsf-inline-notices p { margin: 0 0 .25rem; color: var(--accent-dark); }
.hsf-native .woocommerce .hsf-order-status button { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--accent); font: 600 1rem/1.5 var(--sans); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.hsf-native .woocommerce .hsf-wash { animation: hsf-wash 600ms ease; border-radius: 4px; }
@keyframes hsf-wash { from { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); } to { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.hsf-native .woocommerce #order_review tfoot tr.hsf-coupon-row > td { flex: 1 1 100%; margin-inline-start: 0; padding-block: .25rem; border-block: 1px solid var(--line); text-align: start; font-weight: 400; }
.hsf-native .woocommerce .hsf-coupon > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-weight: 500; }
.hsf-native .woocommerce .hsf-coupon label { display: block; margin: .25rem 0; font-weight: 500; }
.hsf-native .woocommerce .hsf-coupon__row { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .75rem; }
.hsf-native .woocommerce .hsf-coupon__row input { flex: 1 1 10rem; min-height: 3rem; padding: .625rem .75rem; border: 1px solid var(--control-border); border-radius: 4px; font: inherit; color: var(--ink); }
.hsf-native .woocommerce .hsf-coupon__apply { min-height: 3rem; padding: .625rem 1.25rem; border: 2px solid var(--accent); border-radius: 4px; background: var(--surface); color: var(--accent); font: 700 1rem/1.5 var(--sans); cursor: pointer; }
.hsf-native .woocommerce .hsf-coupon__status { margin: 0 0 .5rem; color: var(--accent-dark); }
.hsf-native .woocommerce .hsf-coupon__status:empty { display: none; }
.hsf-native .woocommerce .hsf-coupon-chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .75rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.hsf-native .woocommerce .hsf-coupon-remove { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; }
.hsf-native .woocommerce .hsf-qty__step[hidden] { display: none; }
.hsf-native .woocommerce #order_review tfoot tr.hsf-coupon-row[hidden] { display: none; }
.hsf-native .woocommerce #order_review table.shop_table tr.hsf-review-notices,
.hsf-native .woocommerce #order_review table.shop_table tr.hsf-review-notices > td { display: block; padding: .75rem 0 0; border: 0; text-align: start; }
@media (forced-colors: active) { .hsf-native .woocommerce .hsf-qty__step[aria-disabled="true"] { color: GrayText; } .hsf-native .woocommerce .hsf-coupon-chip { border-color: CanvasText; } }

/* Native pay bar (5 Oct 2026): a signpost to the payment area, never a payment control. Server-printed hidden between
   the header and main, outside form.checkout and outside the container-query main (a container would become the fixed
   bar's containing block); assets/pay-bar.js shows it below 64rem only while the payment area is still below the fold.
   Quick purchase bar shell; filled oxblood link (conversion first). Show and hide are instant, with no entrance motion. */
.hsf-paybar { position: fixed; inset: auto 0 0; z-index: 45; padding: .5rem max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -6px 20px rgba(34, 26, 23, .08); color: var(--ink); font-family: var(--sans); }
.hsf-paybar[hidden] { display: none; }
.hsf-paybar__inner { width: min(100%, 72rem); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.hsf-native .hsf-paybar__total { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; font-variant-numeric: tabular-nums; }
.hsf-paybar__label { font: 600 1rem/1.4 var(--sans); }
.hsf-paybar__amount { min-height: 1.75rem; font: 700 1.25rem/1.4 var(--sans); white-space: nowrap; }
.hsf-paybar__amount[data-pending] { color: var(--muted); font-size: 1rem; font-weight: 400; line-height: 1.75; }
.hsf-native a.hsf-paybar__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 9rem; min-height: 3rem; padding: .625rem 1rem; border-radius: 4px; background: var(--accent); color: var(--surface); font: 600 1rem/1.5 var(--sans); text-decoration: none; }
.hsf-paybar__go svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .hsf-native a.hsf-paybar__go:hover { background: var(--accent-dark); color: var(--surface); } }
@media (prefers-reduced-motion: no-preference) { .hsf-native a.hsf-paybar__go { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); } .hsf-native a.hsf-paybar__go:active:not(:focus-visible) { transform: scale(.98); } }
@media (min-width: 64rem) { .hsf-paybar { display: none; } }
@media (forced-colors: active) { .hsf-paybar { border-top-color: CanvasText; } .hsf-native a.hsf-paybar__go { border: 1px solid ButtonText; } }
/* The pay bar's target: a visually hidden "Payment" anchor that pay-bar.js keeps just before the first payment block. */
.hsf-native #hsf-payment-start { scroll-margin-top: 1rem; }

/* Native store footer (5 Oct 2026): the storefront's espresso band in normal flow after main, so it never covers payment.
   Oxblood never sits on espresso: links are bone, white with an underline on hover or focus, and the focus ring is white. */
.hsf-native__footer { padding: 3rem 0 1.5rem; background: #2b211d; color: #e6ddd7; font: 400 1rem/1.6 var(--sans); overflow-wrap: anywhere; }
.hsf-native__footer-inner { width: min(100% - 2rem, 72rem); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 2rem; padding-bottom: 2rem; }
.hsf-native__footer-intro { flex: 1 1 15em; min-width: 0; }
.hsf-native__footer-nav { flex: 3 1 36em; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); gap: 2rem; }
.hsf-native .hsf-native__footer-brand { margin: 0 0 1.5rem; }
.hsf-native__footer-brand img { display: block; width: 220px; max-width: 100%; height: auto; }
.hsf-native .hsf-native__footer h2 { margin: 0 0 .75rem; color: #fff; font: 700 1.25rem/1.3 var(--serif); letter-spacing: -.01em; }
.hsf-native__footer ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.hsf-native .hsf-native__footer a { display: flex; flex-wrap: wrap; align-items: center; column-gap: .375rem; min-height: 44px; padding-block: .5rem; color: #e6ddd7; font: 400 1rem/1.5 var(--sans); text-decoration: none; text-underline-offset: 4px; }
.hsf-native .hsf-native__footer a:hover, .hsf-native .hsf-native__footer a:focus-visible { color: #fff; text-decoration: underline; }
.hsf-native .hsf-native__footer a:focus-visible { outline-color: #fff; }
.hsf-native__footer-number { white-space: nowrap; }
.hsf-native__footer-bottom { width: min(100% - 2rem, 72rem); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.875rem; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
@media (forced-colors: active) { .hsf-native__footer-bottom { border-top-color: CanvasText; } }

/* Consent115: independent native opt-ins, readable disclosure and separate policy link targets. */
.hsf-native .woocommerce .hsf-consent-disclosure { margin:0 0 1rem; color:var(--ink); font:400 1rem/1.6 var(--sans); overflow-wrap:anywhere; }
.hsf-native .woocommerce .hsf-consent-disclosure p { margin:0 0 .25rem; font:inherit; }
.hsf-native .woocommerce .hsf-consent-links { display:flex; flex-wrap:wrap; gap:.25rem 1rem; }
.hsf-native .woocommerce .hsf-consent-links a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding-block:.5rem; font-size:1rem; touch-action:manipulation; }
/* Checkout help box (owner, 11 Oct 2026): after the customer details, the cart's help box in the theme. One sentence and
   three equal tiles (disc over label), wrapping at enlarged text; numbers are spoken, never shown. */
.hsf-native .hsf-help-box { margin: 1.5rem 0 0; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.hsf-native .hsf-help-box > p { margin: 0 0 .75rem; color: var(--ink); font: 600 1rem/1.5 var(--sans); }
.hsf-native .hsf-help-box ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hsf-native .hsf-help-box li { min-width: 0; margin: 0; }
.hsf-native a.hsf-help-box__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; min-height: 4.5rem; height: 100%; padding: .625rem .25rem; border: 1px solid var(--control-border); border-radius: 8px; color: var(--ink); font: 600 1rem/1.3 var(--sans); text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.hsf-native a.hsf-help-box__link:active { background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .hsf-native a.hsf-help-box__link:hover { background: var(--accent-soft); color: var(--ink); } }
.hsf-native .hsf-anna__disc--mail { background: #2b211d; }
@media (forced-colors: active) { .hsf-native a.hsf-help-box__link { border-color: CanvasText; } }