/* =====================================================================
   StratGeeks — WooCommerce presentation layer
   =====================================================================

   WHAT THIS IS
   The approved commerce design, applied to the markup WooCommerce already
   emits. Cart, Checkout and My Account are WooCommerce's screens; this file
   only changes how they look.

   WHAT IT DELIBERATELY DOES NOT DO
   It adds no fields, removes no fields, moves nothing between steps, and
   recalculates nothing. Every amount on screen is the amount WooCommerce
   printed. Products, prices, billing intervals, subscriptions, gateways,
   entitlement and licensing are untouched by anything in here — a stylesheet
   cannot change them, and that is the point of doing the work this way.

   SCOPE
   Everything is scoped to body.sg-commerce, which functions.php adds only on
   WooCommerce pages and on the local preview. Nothing here can reach a page
   that is not a commerce screen.

   STILL TO COME — two template overrides, deliberately not written yet
   1. Totals hierarchy: "Due today" above "Then every month" on subscription
      checkouts. That needs the order-review and recurring-totals templates
      re-grouped, which must be done against the exact WooCommerce 11.0.1 and
      Subscriptions 7.2.1 templates rather than from memory.
   2. Checkout field grouping into the approved 01/02/03 steps, which likewise
      re-arranges existing output and needs the real templates in front of it.
   Until those templates can be read, this file styles WooCommerce's default
   grouping faithfully rather than guessing at an override. The CSS below is
   written so both changes are additive when they land.
   ===================================================================== */

/* ---------- page frame ---------- */
body.sg-commerce .woocommerce{max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(16px,4vw,28px)}
body.sg-commerce .woocommerce-page-title,
body.sg-commerce .entry-title{font-family:"Chivo",sans-serif;font-size:clamp(28px,4vw,40px);
  font-weight:900;letter-spacing:-.03em;color:var(--d-text);margin:0 0 26px}

/* ---------- notices ---------- */
body.sg-commerce .woocommerce-message,
body.sg-commerce .woocommerce-info,
body.sg-commerce .woocommerce-error{margin:0 0 22px;padding:14px 16px;border-radius:11px;
  border:1px solid var(--d-line-2);background:var(--d-card);color:var(--d-mid);
  font-size:var(--fs-small);line-height:1.6;list-style:none}
body.sg-commerce .woocommerce-message{border-color:rgba(70,204,51,.45)}
body.sg-commerce .woocommerce-error{border-color:var(--s-down);color:var(--d-text)}
body.sg-commerce .woocommerce-message .button,
body.sg-commerce .woocommerce-info .button{float:none;margin-left:10px}

/* ---------- shared table treatment ---------- */
body.sg-commerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--d-line);
  border-radius:14px;overflow:hidden;background:var(--d-card);margin:0 0 24px}
body.sg-commerce table.shop_table th{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid);font-weight:500;
  text-align:left;padding:15px 16px;border-bottom:1px solid var(--d-line);background:var(--d-surface)}
body.sg-commerce table.shop_table td{padding:16px;border-bottom:1px solid var(--d-line);
  color:var(--d-text);font-size:15.5px;vertical-align:middle}
body.sg-commerce table.shop_table tr:last-child td{border-bottom:0}
body.sg-commerce table.shop_table .product-thumbnail img{width:56px;height:auto;border-radius:8px;
  border:1px solid var(--d-line-2)}
body.sg-commerce table.shop_table .product-name a{color:var(--d-text);text-decoration:none;font-weight:700}
body.sg-commerce table.shop_table .product-name a:hover{color:var(--sg-blue)}
body.sg-commerce table.shop_table .product-price,
body.sg-commerce table.shop_table .product-subtotal{white-space:nowrap;font-variant-numeric:tabular-nums}
/* The remove control keeps its small circle but carries a 44px hit area, so it
   is comfortable to tap without changing the visual weight of the row. */
body.sg-commerce a.remove{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--d-line-2);color:var(--d-muted);text-decoration:none;
  font-size:15px;line-height:1}
body.sg-commerce a.remove::after{content:"";position:absolute;inset:-9px;border-radius:50%}
body.sg-commerce a.remove:hover{border-color:var(--s-down);color:var(--s-down);background:none}

/* subscription price suffixes WooCommerce Subscriptions prints inline */
body.sg-commerce .subscription-details,
body.sg-commerce .wcs-price-details{display:block;margin-top:4px;font-size:var(--fs-small);
  color:var(--d-muted);font-weight:400}

/* ---------- buttons ---------- */
body.sg-commerce .button,
body.sg-commerce button.button,
body.sg-commerce input.button,
body.sg-commerce a.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:13px 22px;border:1px solid var(--d-line-2);border-radius:10px;
  background:var(--d-raise);color:var(--d-text);font-family:"Chivo",sans-serif;font-size:15.5px;
  font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .15s,filter .15s}
body.sg-commerce .button:hover{border-color:var(--d-muted)}
body.sg-commerce .button:focus-visible{outline:2px solid var(--sg-blue);outline-offset:2px}
body.sg-commerce .button:disabled,
body.sg-commerce .button[disabled]{opacity:.5;cursor:not-allowed}
body.sg-commerce .checkout-button,
body.sg-commerce #place_order,
body.sg-commerce .button.alt{background:var(--sg-green);border-color:transparent;color:#05210A}
body.sg-commerce .checkout-button:hover,
body.sg-commerce #place_order:hover,
body.sg-commerce .button.alt:hover{filter:brightness(1.06);border-color:transparent}

/* ---------- form controls (checkout, addresses, account) ---------- */
body.sg-commerce .form-row{display:block;margin:0 0 16px;padding:0}
body.sg-commerce .form-row label{display:block;margin:0 0 8px;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}
body.sg-commerce .form-row label .required{color:var(--s-down);text-decoration:none;border:0}
body.sg-commerce .form-row .optional{color:var(--d-muted)}
body.sg-commerce .input-text,
body.sg-commerce .form-row input[type=text],
body.sg-commerce .form-row input[type=tel],
body.sg-commerce .form-row input[type=email],
body.sg-commerce .form-row input[type=password],
body.sg-commerce .form-row select,
body.sg-commerce .select2-selection,
body.sg-commerce .form-row textarea{width:100%;box-sizing:border-box;min-height:50px;
  border:1px solid var(--d-line-2);border-radius:9px;background:var(--d-bg);padding:13px 14px;
  font-family:"Chivo",sans-serif;font-size:16px;line-height:1.45;color:var(--d-text);
  -webkit-appearance:none;appearance:none;transition:border-color .15s}
body.sg-commerce .form-row textarea{min-height:112px;resize:vertical}
body.sg-commerce .input-text::placeholder,
body.sg-commerce .form-row textarea::placeholder{color:var(--d-muted);opacity:1}
body.sg-commerce .input-text:hover,body.sg-commerce .form-row select:hover{border-color:var(--d-muted)}
body.sg-commerce .input-text:focus,body.sg-commerce .form-row select:focus,
body.sg-commerce .form-row textarea:focus{outline:none;border-color:var(--sg-blue);
  box-shadow:0 0 0 3px rgba(18,168,200,.16)}
body.sg-commerce .woocommerce-invalid .input-text{border-color:var(--s-down)}
/* Two-up rows, matching the approved layout, using WooCommerce's own classes.
   The field wrapper is the flex container rather than floating or
   inline-blocking the rows: inline-block leaves the whitespace between two
   50% rows to push the second one onto its own line. */
@media(min-width:620px){
  body.sg-commerce .woocommerce-billing-fields__field-wrapper,
  body.sg-commerce .woocommerce-shipping-fields__field-wrapper,
  body.sg-commerce .woocommerce-address-fields__field-wrapper{
    display:flex;flex-wrap:wrap;column-gap:16px}
  body.sg-commerce .woocommerce-billing-fields__field-wrapper>.form-row,
  body.sg-commerce .woocommerce-shipping-fields__field-wrapper>.form-row,
  body.sg-commerce .woocommerce-address-fields__field-wrapper>.form-row{flex:0 0 100%}
  body.sg-commerce .woocommerce-billing-fields__field-wrapper>.form-row-first,
  body.sg-commerce .woocommerce-billing-fields__field-wrapper>.form-row-last,
  body.sg-commerce .woocommerce-shipping-fields__field-wrapper>.form-row-first,
  body.sg-commerce .woocommerce-shipping-fields__field-wrapper>.form-row-last,
  body.sg-commerce .woocommerce-address-fields__field-wrapper>.form-row-first,
  body.sg-commerce .woocommerce-address-fields__field-wrapper>.form-row-last{
    flex:0 0 calc(50% - 8px)}
  body.sg-commerce .form-row-first,body.sg-commerce .form-row-last{float:none;width:auto}
}
/* select2, which WooCommerce uses for country and state */
body.sg-commerce .select2-container--default .select2-selection--single{height:auto}
body.sg-commerce .select2-dropdown{background:var(--d-card);border-color:var(--d-line-2);color:var(--d-text)}

/* ---------- cart ---------- */
body.sg-commerce .woocommerce-cart-form{margin:0 0 26px}
body.sg-commerce .cart .quantity input{max-width:88px;text-align:center}
body.sg-commerce .actions .coupon{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:16px;border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);margin:0 0 18px}
body.sg-commerce .actions .coupon label{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}
body.sg-commerce .actions .coupon #coupon_code{flex:1 1 200px;min-width:0}
body.sg-commerce .cart_totals{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:22px 20px}
body.sg-commerce .cart_totals h2{margin:0 0 16px;font-size:19px;font-weight:800;color:var(--d-text)}
body.sg-commerce .cart_totals table{width:100%;border:0;background:none;margin:0}
/* WooCommerce prints the totals inside another .shop_table, so these have to
   outrank the shared table treatment above rather than sit beside it. */
body.sg-commerce .cart_totals table.shop_table th,
body.sg-commerce .cart_totals table.shop_table td{background:none;border:0;
  border-bottom:1px solid var(--d-line);padding:12px 0;text-transform:none;letter-spacing:normal;
  font-family:"Chivo",sans-serif;font-size:15.5px}
body.sg-commerce .cart_totals table.shop_table th{color:var(--d-mid);font-weight:400;
  text-align:left}
body.sg-commerce .cart_totals table.shop_table td{text-align:right;font-variant-numeric:tabular-nums}
body.sg-commerce .cart_totals table.shop_table .order-total th,
body.sg-commerce .cart_totals table.shop_table .order-total td{border-bottom:0;font-size:19px;
  font-weight:800;color:var(--d-text);padding-top:16px}
body.sg-commerce .wc-proceed-to-checkout{margin-top:18px}
body.sg-commerce .wc-proceed-to-checkout .checkout-button{width:100%}

/* ---------- checkout ---------- */
@media(min-width:1000px){
  body.sg-commerce form.checkout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
    grid-template-rows:min-content 1fr;gap:0 clamp(24px,3vw,40px);
    align-items:start;align-content:start}
  /* WooCommerce's own layout stylesheet floats these and gives them percentage
     widths for its two-column checkout. Inside the grid those percentages are
     of the grid track, which leaves both columns half-empty — so they are
     released here and the grid does the placing. */
  body.sg-commerce form.checkout #customer_details,
  body.sg-commerce form.checkout #order_review_heading,
  body.sg-commerce form.checkout #order_review{width:auto;max-width:none;float:none}
  body.sg-commerce form.checkout #customer_details{grid-column:1;grid-row:1 / span 2}
  body.sg-commerce form.checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0}
  body.sg-commerce form.checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:96px}
}
/* below the grid breakpoint WooCommerce's floats would still apply */
body.sg-commerce form.checkout #customer_details,
body.sg-commerce form.checkout #order_review{width:auto;max-width:none;float:none}
body.sg-commerce form.checkout::after{content:"";display:table;clear:both}

/* ---------- the page title ----------
   Astra prints it in its own .entry-header, outside the .woocommerce wrapper,
   so it needs the same measure to line up with the content beneath it. */
body.sg-commerce .entry-header{max-width:1180px;margin:0 auto;
  padding:clamp(28px,4vw,56px) clamp(16px,4vw,28px) 0}
body.sg-commerce .entry-header+.woocommerce,
body.sg-commerce .entry-header~.woocommerce{padding-top:clamp(16px,2vw,24px)}

/* ---------- the checkout coupon ----------
   WooCommerce's own toggle already carries production's wording — "Have a
   coupon? Click here to enter your code" — so it only needs the approved
   treatment. The form below it is WooCommerce's; nothing is re-implemented. */
body.sg-commerce .woocommerce-form-coupon-toggle{margin:0 0 20px}
body.sg-commerce .woocommerce-form-coupon-toggle .woocommerce-info{margin:0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:var(--tap);
  padding:14px 18px;border-radius:11px;border:1px solid var(--d-line);
  background:var(--d-card);color:var(--d-text);font-family:"Chivo",sans-serif;font-size:15px}
body.sg-commerce .woocommerce-form-coupon-toggle .showcoupon{color:var(--p-echo);
  text-decoration:underline;text-underline-offset:3px}
body.sg-commerce form.checkout_coupon{margin:0 0 22px;padding:18px;border-radius:11px;
  border:1px solid var(--d-line);background:var(--d-card)}
body.sg-commerce form.checkout_coupon p:first-child{margin-top:0;color:var(--d-mid);
  font-size:var(--fs-small)}
@media(min-width:620px){
  body.sg-commerce form.checkout_coupon .form-row-first{width:calc(100% - 190px);
    display:inline-block;vertical-align:bottom;margin-right:12px}
  body.sg-commerce form.checkout_coupon .form-row-last{width:170px;display:inline-block;
    vertical-align:bottom}
}
body.sg-commerce form.checkout_coupon .button{width:100%}
body.sg-commerce #customer_details .col-1,
body.sg-commerce #customer_details .col-2{width:100%;float:none}
body.sg-commerce .woocommerce-billing-fields,
body.sg-commerce .woocommerce-additional-fields,
body.sg-commerce .woocommerce-account-fields{border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:22px 20px;margin:0 0 20px}
body.sg-commerce .woocommerce-billing-fields h3,
body.sg-commerce .woocommerce-additional-fields h3,
body.sg-commerce #order_review_heading{margin:0 0 18px;font-size:19px;font-weight:800;color:var(--d-text)}
body.sg-commerce #order_review{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:22px 20px}
body.sg-commerce .woocommerce-checkout-review-order-table{border:0;background:none;margin:0}
body.sg-commerce table.woocommerce-checkout-review-order-table th,
body.sg-commerce table.woocommerce-checkout-review-order-table td{background:none;
  border-bottom:1px solid var(--d-line);padding:12px 0;font-size:15.5px}
body.sg-commerce table.woocommerce-checkout-review-order-table thead th{
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-mid);padding:0 0 12px}
body.sg-commerce table.woocommerce-checkout-review-order-table tfoot th{
  font-family:"Chivo",sans-serif;font-size:15.5px;letter-spacing:normal;text-transform:none;
  color:var(--d-mid);font-weight:400;text-align:left}
body.sg-commerce .woocommerce-checkout-review-order-table td{text-align:right;
  font-variant-numeric:tabular-nums}
body.sg-commerce .woocommerce-checkout-review-order-table .product-name{text-align:left}
body.sg-commerce .woocommerce-checkout-review-order-table .order-total th,
body.sg-commerce .woocommerce-checkout-review-order-table .order-total td{font-size:19px;
  font-weight:800;color:var(--d-text);border-bottom:0;padding-top:16px}
/* the recurring block Subscriptions prints under the totals */
body.sg-commerce .recurring-totals,
body.sg-commerce tr.recurring-total{border-top:1px solid var(--d-line)}
body.sg-commerce .recurring-totals th{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}

/* payment methods */
body.sg-commerce .wc_payment_methods{list-style:none;margin:22px 0 0;padding:0;
  border:1px solid var(--d-line);border-radius:12px;overflow:hidden}
/* WooCommerce prints the radio and its label as siblings, with the gateway's
   own panel after them. The row is the flex container so the radio and label
   sit on one line and the panel drops beneath, full width. */
body.sg-commerce .wc_payment_method{display:flex;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--d-line);margin:0}
body.sg-commerce .wc_payment_method:last-child{border-bottom:0}
body.sg-commerce .wc_payment_method>input[type=radio]{flex:none;margin:0 0 0 16px;
  accent-color:var(--sg-green);width:17px;height:17px}
body.sg-commerce .wc_payment_method>label{flex:1 1 auto;display:flex;align-items:center;gap:11px;
  min-height:var(--tap);padding:14px 16px 14px 11px;margin:0;cursor:pointer;
  font-family:"Chivo",sans-serif;font-size:15.5px;font-weight:600;letter-spacing:normal;
  text-transform:none;color:var(--d-text)}
body.sg-commerce .wc_payment_method>label img{max-height:24px;width:auto}
body.sg-commerce .payment_box{flex:0 0 100%;margin:0;padding:0 16px 16px;background:var(--d-bg);
  font-size:var(--fs-small);line-height:1.6;color:var(--d-mid)}
body.sg-commerce .payment_box p:last-child{margin-bottom:0}
body.sg-commerce .woocommerce-privacy-policy-text,
body.sg-commerce .woocommerce-terms-and-conditions-wrapper{margin-top:18px;font-size:var(--fs-small);
  line-height:1.6;color:var(--d-muted)}
body.sg-commerce .woocommerce-terms-and-conditions-wrapper .form-row{display:flex;gap:11px;
  align-items:flex-start;margin-top:12px}
body.sg-commerce .woocommerce-terms-and-conditions-wrapper label{text-transform:none;
  letter-spacing:normal;font-family:"Chivo",sans-serif;font-size:var(--fs-small);color:var(--d-mid);margin:0}
body.sg-commerce .place-order{margin-top:20px}
body.sg-commerce #place_order{width:100%}

/* ---------- my account ---------- */
@media(min-width:900px){
  body.sg-commerce .woocommerce-account .woocommerce{display:grid;
    grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:clamp(22px,3vw,38px);align-items:start}
}
body.sg-commerce .woocommerce-MyAccount-navigation{border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:10px;margin:0 0 20px}
body.sg-commerce .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
body.sg-commerce .woocommerce-MyAccount-navigation li{margin:0}
body.sg-commerce .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;
  min-height:var(--tap);padding:11px 14px;border-radius:9px;text-decoration:none;
  font-size:15.5px;font-weight:600;color:var(--d-mid)}
body.sg-commerce .woocommerce-MyAccount-navigation li a:hover{background:var(--d-raise);color:var(--d-text)}
body.sg-commerce .woocommerce-MyAccount-navigation li.is-active a{background:var(--d-raise);
  color:var(--d-text);box-shadow:inset 2px 0 0 var(--sg-green)}
body.sg-commerce .woocommerce-MyAccount-content{border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:24px 22px;min-width:0}
body.sg-commerce .woocommerce-MyAccount-content p{color:var(--d-mid);line-height:1.65}
body.sg-commerce .woocommerce-MyAccount-content mark{background:none;color:var(--d-text);font-weight:700}
body.sg-commerce .woocommerce-orders-table__cell-order-actions .button{padding:8px 16px;
  min-height:var(--tap);font-size:14px}
body.sg-commerce .woocommerce-Address{border:1px solid var(--d-line);border-radius:12px;
  background:var(--d-bg);padding:18px;margin-top:14px}
body.sg-commerce .woocommerce-Address address{font-style:normal;color:var(--d-mid);line-height:1.7}
body.sg-commerce .woocommerce-Address-title h2,
body.sg-commerce .woocommerce-MyAccount-content h2,
body.sg-commerce .woocommerce-MyAccount-content h3{font-size:19px;font-weight:800;color:var(--d-text);
  margin:0 0 12px}
body.sg-commerce .woocommerce-form-login,
body.sg-commerce .woocommerce-form-register{border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:24px 22px;max-width:520px}
body.sg-commerce .woocommerce-form-login__rememberme{display:inline-flex;gap:9px;align-items:center;
  text-transform:none;letter-spacing:normal;font-family:"Chivo",sans-serif;font-size:var(--fs-small)}
body.sg-commerce .woocommerce-LostPassword a{color:var(--sg-blue)}

/* subscriptions tables in My Account */
body.sg-commerce .woocommerce-orders-table__cell-order-status,
body.sg-commerce .subscription-status{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}

/* ---------- narrow widths ---------- */
@media(max-width:780px){
  /* WooCommerce's own responsive cart collapses the table into rows; keep the
     labels it generates legible rather than replacing the mechanism */
  body.sg-commerce table.shop_table td{display:block;text-align:right;border-bottom:0;padding:8px 16px}
  body.sg-commerce table.shop_table tr{display:block;border-bottom:1px solid var(--d-line);padding:8px 0}
  body.sg-commerce table.shop_table tr:last-child{border-bottom:0}
  body.sg-commerce table.shop_table thead{display:none}
  body.sg-commerce table.shop_table td::before{content:attr(data-title);float:left;
    font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
    text-transform:uppercase;color:var(--d-mid)}
  body.sg-commerce table.shop_table td.product-remove::before,
  body.sg-commerce table.shop_table td.product-thumbnail::before{content:none}
  body.sg-commerce table.shop_table .product-thumbnail{text-align:left}
  body.sg-commerce .cart_totals th,body.sg-commerce .cart_totals td{display:table-cell}
  body.sg-commerce .actions .coupon{flex-direction:column;align-items:stretch}
  body.sg-commerce .actions .coupon .button{width:100%}
  body.sg-commerce .form-row-first,body.sg-commerce .form-row-last{width:100%;margin-right:0}
}

/* The build-preview banner. Only ever rendered by page-commerce-preview.php,
   which does not exist as a customer page. */
body.sg-commerce .sgpreview-note{margin:0 0 30px;padding:14px 16px;border-radius:11px;
  border:1px solid rgba(224,172,87,.4);background:#140F04;color:#D9C39A;
  font-size:var(--fs-small);line-height:1.6}
body.sg-commerce .sgpreview-note b{color:#F0DCB4}
body.sg-commerce .sgpreview-note p{margin:0}

/* ---------- the approved 01 / 02 / 03 groups ----------
   The headings are printed by inc/commerce.php on WooCommerce's own hooks.
   These rules turn the flat billing field list into the two approved cards
   and label the payment block, without any field moving out of the form
   WooCommerce built. */
body.sg-commerce .sg-fieldgroup-head{display:flex;align-items:center;gap:12px;
  flex:0 0 100%;margin:0 0 18px}
body.sg-commerce .sg-fieldgroup-head+.form-row{margin-top:0}
body.sg-commerce .sg-fieldgroup-head .sg-stepn{display:inline-flex;align-items:center;
  justify-content:center;width:30px;height:30px;flex:none;border-radius:50%;
  border:1px solid var(--d-line-2);background:var(--d-bg);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.06em;
  color:var(--d-mid)}
body.sg-commerce .sg-fieldgroup-head h4{margin:0;font-family:"Chivo",sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--d-text)}
/* the second group starts a new card inside the same field wrapper */
body.sg-commerce .woocommerce-billing-fields__field-wrapper .sg-fieldgroup-head{
  padding-top:22px;margin-top:6px;border-top:1px solid var(--d-line)}
body.sg-commerce .woocommerce-billing-fields__field-wrapper>.sg-fieldgroup-head:first-child,
body.sg-commerce .woocommerce-billing-fields__field-wrapper .sg-fieldgroup-head:first-child{
  padding-top:0;margin-top:0;border-top:0}
/* WooCommerce already prints its own "Billing details" heading above the list */
body.sg-commerce .woocommerce-billing-fields>h3{display:none}
body.sg-commerce .sg-payment-head{margin:24px 0 14px}

/* "Due today" — a label above WooCommerce's own total row. It carries no
   figure of its own; the amount beneath it is WooCommerce's. */
body.sg-commerce tr.sg-due-today th{font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-mid);font-weight:500;text-align:left;padding:18px 0 4px;
  border-bottom:0;background:none}
body.sg-commerce .cart_totals table.shop_table tr.sg-due-today th{padding:18px 0 4px}
/* and the recurring block Subscriptions prints straight after the total */
body.sg-commerce tr.recurring-totals th,
body.sg-commerce .recurring-totals th{font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-mid);font-weight:500;text-align:left;padding:20px 0 4px;
  border-bottom:0;background:none}


/* ---------- WooCommerce's own loading overlay ----------
   WooCommerce blocks the order review while it refreshes it. The default
   overlay is white, which flashes the panel light on a dark checkout. */
body.sg-commerce .blockUI.blockOverlay{background:var(--d-bg) !important;opacity:.6 !important}
body.sg-commerce .blockUI.blockOverlay::before{border-top-color:var(--sg-blue);
  border-right-color:transparent;border-bottom-color:var(--sg-blue);
  border-left-color:transparent}

/* the order-review heading belongs to the panel beneath it */
body.sg-commerce #order_review_heading{border:0;padding:0}


/* ---------- Astra's own WooCommerce rules ----------
   Astra prints an inline stylesheet that draws #order_review_heading and
   #order_review as one bordered box, using a :not() selector carrying two IDs.
   Nothing a child stylesheet can write outranks that on specificity alone, so
   these four declarations are marked important — deliberately, and only for
   the box drawing. Everything else about those elements is left to Astra. */
body.sg-commerce form #order_review_heading{border:0 !important;padding:0 0 14px !important}
body.sg-commerce form #order_review{border:1px solid var(--d-line) !important;
  padding:22px 20px !important;border-radius:14px}