/* ============================================================
   KEY4GAMES — WooCommerce pages (cart / checkout / my-account)
   ============================================================
   Loads ONLY on is_cart() / is_checkout() / is_account_page(),
   layered ON TOP of WooCommerce's own stylesheets (dependency on
   'woocommerce-general' — see inc/enqueue.php).

   WHY CSS-ONLY (no template overrides in themes/key4games/woocommerce/):
   deliberate scope decision — survives WooCommerce updates, no
   template-version drift.

   IMPORTANT CONTEXT (verified against WooCommerce 10.9.4 in this install):
   - /cart/ and /checkout/ are the **Cart and Checkout BLOCKS** (React),
     not the classic [woocommerce_cart] / [woocommerce_checkout]
     shortcodes. Their interactive markup is hydrated client-side, so the
     selectors below come from WooCommerce's own shipped stylesheets
     (assets/client/blocks/{cart,checkout,packages-style}.css), not guesses.
   - /my-account/ and the order-received (thank-you) screen are CLASSIC
     PHP templates -> classic .woocommerce-* selectors.
   - All three render inside .prose.prose-solo (page template), which caps
     width at 820px and restyles <p>/<a>. Both are corrected below.
   - WooCommerce blocks ship a dark variant behind a `.has-dark-controls`
     class, but that is a *block attribute* (page content), not something
     CSS may switch on. So the dark control styles are re-declared here
     against the same selectors.

   Source order: this file loads after every wc-* and k4g-* stylesheet, so
   equal-specificity rules win. Selectors are scoped to a body class both
   to guarantee that and to avoid leaking into the storefront.
   ============================================================ */


/* ============================================================
   0. SEMANTIC TOKENS (scoped — does NOT pollute the design system)
   ============================================================
   tokens.css has no success/error colours. Notices need them and must
   stay WCAG AA on --panel. These are namespaced --k4g-wc-* and scoped to
   WooCommerce pages only. FLAGGED FOR THE LEAD: if semantic
   success/error tokens are ever added to tokens.css, delete these two
   and point at the real tokens.
   Contrast on --panel #141828: ok 9.7:1, err 5.5:1 — both AA.
   ------------------------------------------------------------ */
body.woocommerce-page{
  --k4g-wc-ok:#34d399;              /* success  (not in tokens.css) */
  --k4g-wc-err:#f87171;             /* error    (not in tokens.css) */
  --k4g-wc-warn:var(--solar);
  --k4g-wc-info:var(--ice);
  --k4g-wc-field:var(--panel2);     /* form field background */
  --k4g-wc-field-bd:var(--line2);   /* form field border */
}


/* ============================================================
   1. PAGE SHELL — undo .prose constraints for commerce layouts
   ============================================================
   .prose{max-width:820px} would squeeze the block cart/checkout, which
   are two-column (main + order-summary sidebar).
   ------------------------------------------------------------ */
body.woocommerce-cart .prose.prose-solo,
body.woocommerce-checkout .prose.prose-solo{max-width:1180px}
body.woocommerce-account .prose.prose-solo{max-width:1040px}

/* .prose sets max-width on the article; the WC subtree must fill it. */
body.woocommerce-page .prose .woocommerce{max-width:none}

/* .prose restyles every <p>. WooCommerce uses <p class="form-row"> for
   form rows, so the muted prose colour/size must not apply to them. */
body.woocommerce-page .woocommerce p.form-row,
body.woocommerce-page .woocommerce p.woocommerce-form-row{
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  margin:0 0 16px;
}

/* .prose underlines every <a>; buttons are often <a class="button">. */
body.woocommerce-page .prose a.button,
body.woocommerce-page .prose a.wc-block-components-button,
body.woocommerce-page .prose a.woocommerce-button{text-decoration:none}


/* ============================================================
   2. TYPOGRAPHY / HEADINGS
   ============================================================ */
body.woocommerce-page .woocommerce h2,
body.woocommerce-page .woocommerce h3,
body.woocommerce-page .wc-block-components-title,
body.woocommerce-page .wc-block-cart__empty-cart__title{
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--text);
  font-weight:700;
  letter-spacing:.01em;
}
body.woocommerce-page .woocommerce h2{font-size:20px;margin:0 0 16px}
body.woocommerce-page .woocommerce h3{font-size:16px;margin:0 0 12px}


/* ============================================================
   3. NOTICES — classic + block
   ============================================================
   Classic:  .woocommerce-info / .woocommerce-message / .woocommerce-error
   Block:    .wc-block-components-notice-banner.is-{info,success,error,warning,default}
   WooCommerce ships these light with a coloured left border; here they
   become tinted dark panels. Icon inherits the accent via currentColor.
   ------------------------------------------------------------ */
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .woocommerce-noreviews,
body.woocommerce-page .wc-block-components-notice-banner{
  background:var(--panel);
  border:1px solid var(--line2);
  border-left-width:3px;
  border-radius:12px;
  color:var(--text);
  box-shadow:none;
  padding:14px 16px;
  margin:0 0 18px;
  list-style:none;
  font-size:14px;
  line-height:1.55;
}

/* info */
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .wc-block-components-notice-banner.is-info,
body.woocommerce-page .wc-block-components-notice-banner.is-default{
  border-left-color:var(--k4g-wc-info);
  background:linear-gradient(0deg,rgba(89,208,255,.06),rgba(89,208,255,.06)),var(--panel);
}
/* success */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .wc-block-components-notice-banner.is-success{
  border-left-color:var(--k4g-wc-ok);
  background:linear-gradient(0deg,rgba(52,211,153,.07),rgba(52,211,153,.07)),var(--panel);
}
/* error */
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .wc-block-components-notice-banner.is-error{
  border-left-color:var(--k4g-wc-err);
  background:linear-gradient(0deg,rgba(248,113,113,.08),rgba(248,113,113,.08)),var(--panel);
}
/* warning */
body.woocommerce-page .wc-block-components-notice-banner.is-warning{
  border-left-color:var(--k4g-wc-warn);
  background:linear-gradient(0deg,rgba(255,194,75,.07),rgba(255,194,75,.07)),var(--panel);
}

/* WooCommerce colours the banner icon via the wrapper's colour. */
body.woocommerce-page .wc-block-components-notice-banner.is-info > svg,
body.woocommerce-page .wc-block-components-notice-banner.is-default > svg{fill:var(--k4g-wc-info)}
body.woocommerce-page .wc-block-components-notice-banner.is-success > svg{fill:var(--k4g-wc-ok)}
body.woocommerce-page .wc-block-components-notice-banner.is-error > svg{fill:var(--k4g-wc-err)}
body.woocommerce-page .wc-block-components-notice-banner.is-warning > svg{fill:var(--k4g-wc-warn)}

body.woocommerce-page .wc-block-components-notice-banner__content{color:var(--text)}
body.woocommerce-page .wc-block-components-notice-banner__content a{color:var(--ice)}

/* classic notices carry an ::before glyph and a coloured bg we neutralise */
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-error::before{color:inherit}
body.woocommerce-page .woocommerce-info{color:var(--text)}
body.woocommerce-page .woocommerce-error li{color:var(--text)}

/* the inline "notices wrapper" should not reserve space when empty */
body.woocommerce-page .woocommerce-notices-wrapper:empty{display:none}


/* ============================================================
   4. BUTTONS
   ============================================================
   primary   = --grad          (Proceed to checkout, Place order, Login)
   secondary = --panel2 + --line2 (Apply coupon, outlined, view order)
   ------------------------------------------------------------ */
body.woocommerce-page .woocommerce a.button,
body.woocommerce-page .woocommerce button.button,
body.woocommerce-page .woocommerce input.button,
body.woocommerce-page .woocommerce .woocommerce-button,
body.woocommerce-page .wc-block-components-button:not(.is-link){
  background:var(--grad);
  background-color:transparent;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  border:none;
  border-radius:11px;
  padding:12px 22px;
  box-shadow:0 10px 30px -10px rgba(225,75,200,.6);
  transition:.2s;
  text-decoration:none;
  text-shadow:none;
  cursor:pointer;
}
body.woocommerce-page .woocommerce a.button:hover,
body.woocommerce-page .woocommerce button.button:hover,
body.woocommerce-page .woocommerce input.button:hover,
body.woocommerce-page .woocommerce .woocommerce-button:hover,
body.woocommerce-page .wc-block-components-button:not(.is-link):hover{
  background:var(--grad);
  color:#fff;
  filter:brightness(1.12);
  transform:translateY(-1px);
}
body.woocommerce-page .wc-block-components-button:not(.is-link) .wc-block-components-button__text{color:#fff}

/* WooCommerce's focus ring is a blue #0675c4 double shadow — retheme it
   to the violet focus ring used everywhere else, keep it visible (a11y). */
body.woocommerce-page .wc-block-components-button:not(.is-link):focus,
body.woocommerce-page .wc-block-components-button:not(.is-link):focus-visible{
  box-shadow:none;
  outline:2px solid var(--violet);
  outline-offset:2px;
}

/* secondary / outlined */
body.woocommerce-page .wc-block-components-button:not(.is-link).outlined,
body.woocommerce-page .woocommerce a.button.wc-backward,
body.woocommerce-page .wc-block-components-totals-coupon__button,
body.woocommerce-page .woocommerce-MyAccount-content a.button.view,
body.woocommerce-page .woocommerce table a.button{
  background:var(--panel2);
  background-image:none;
  color:var(--text);
  border:1px solid var(--line2);
  box-shadow:none;
}
body.woocommerce-page .wc-block-components-button:not(.is-link).outlined:hover,
body.woocommerce-page .woocommerce a.button.wc-backward:hover,
body.woocommerce-page .wc-block-components-totals-coupon__button:hover,
body.woocommerce-page .woocommerce-MyAccount-content a.button.view:hover,
body.woocommerce-page .woocommerce table a.button:hover{
  background:var(--panel2);
  background-image:none;
  border-color:var(--violet);
  color:#fff;
  filter:none;
  transform:none;
}

/* link-style buttons (coupon toggle, etc.) */
body.woocommerce-page .wc-block-components-button.is-link{
  background:none;
  box-shadow:none;
  color:var(--dim);
  font-size:12.5px;
  text-decoration:underline;
  text-underline-offset:2px;
  padding:0;
}
body.woocommerce-page .wc-block-components-button.is-link:hover{color:var(--fuchsia)}

/* "Remove item" — WooCommerce sizes this as a 24x24 icon button and fills its
   svg with currentColor. Recolour ONLY; touching the box breaks the icon.
   WC sets `color:inherit` from a 4-class selector
     table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link
   so the full path is needed here to win — a short selector loses and the link
   silently stays --text (confirmed in-browser before this was lengthened). */
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__save-for-later .wc-block-cart-item__save-for-later-link{
  color:var(--dim);
}
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__save-for-later .wc-block-cart-item__save-for-later-link:hover{
  color:var(--fuchsia);
}

/* disabled */
body.woocommerce-page .wc-block-components-button:not(.is-link):disabled,
body.woocommerce-page .woocommerce button.button:disabled{
  opacity:.45;
  filter:none;
  transform:none;
  box-shadow:none;
  cursor:not-allowed;
}


/* ============================================================
   5. FORM FIELDS — classic + block
   ============================================================
   Block inputs use a FLOATING LABEL: the <label> is absolutely
   positioned INSIDE the input (top:25px, scale(.82) + top:6px when
   .is-active). Only colours/border/background are touched here — the
   geometry (padding 16px 12px / 24px 9px 8px when active) is left alone
   so the float animation keeps working.
   ------------------------------------------------------------ */

/* --- classic inputs --- */
body.woocommerce-page .woocommerce input.input-text,
body.woocommerce-page .woocommerce textarea,
body.woocommerce-page .woocommerce select,
body.woocommerce-page .woocommerce .woocommerce-Input--text{
  background:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
  border-radius:10px;
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding:11px 13px;
  width:100%;
  box-shadow:none;
  transition:border-color .2s,box-shadow .2s;
}
body.woocommerce-page .woocommerce input.input-text:focus,
body.woocommerce-page .woocommerce textarea:focus,
body.woocommerce-page .woocommerce select:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(139,92,246,.25);
  outline:none;
  color:var(--text);
}
body.woocommerce-page .woocommerce label{
  color:var(--text);
  font-size:13px;
  font-weight:600;
  display:block;
  margin:0 0 7px;
}
body.woocommerce-page .woocommerce label .required{color:var(--fuchsia);text-decoration:none;border:0}

/* --- block text inputs (background/colour only; geometry untouched) --- */
body.woocommerce-page .wc-block-components-text-input input[type=text],
body.woocommerce-page .wc-block-components-text-input input[type=email],
body.woocommerce-page .wc-block-components-text-input input[type=tel],
body.woocommerce-page .wc-block-components-text-input input[type=url],
body.woocommerce-page .wc-block-components-text-input input[type=number],
body.woocommerce-page .wc-block-components-text-input input[type=password],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=text],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=email],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=tel],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=url],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=number],
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=password],
body.woocommerce-page .wc-block-components-textarea,
body.woocommerce-page .wc-block-components-select-input select,
body.woocommerce-page .wc-block-components-combobox-control input{
  background-color:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
  border-radius:10px;
  color:var(--text);
  font-family:'Inter',sans-serif;
}
body.woocommerce-page .wc-block-components-text-input input[type=text]:focus,
body.woocommerce-page .wc-block-components-text-input input[type=email]:focus,
body.woocommerce-page .wc-block-components-text-input input[type=tel]:focus,
body.woocommerce-page .wc-block-components-text-input input[type=url]:focus,
body.woocommerce-page .wc-block-components-text-input input[type=number]:focus,
body.woocommerce-page .wc-block-components-text-input input[type=password]:focus,
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
body.woocommerce-page .wc-block-components-textarea:focus,
body.woocommerce-page .wc-block-components-select-input select:focus{
  background-color:var(--k4g-wc-field);
  border:1px solid var(--violet);
  box-shadow:0 0 0 3px rgba(139,92,246,.25);
  color:var(--text);
  outline:none;
}

/* floating label — sits ON the field background (--panel2), so --dim is
   the correct token and stays AA against it. */
body.woocommerce-page .wc-block-components-text-input label,
body.woocommerce-page .wc-block-components-select-input label,
body.woocommerce-page .wc-block-components-combobox-control label{color:var(--dim)}
body.woocommerce-page .wc-block-components-text-input.is-active label{color:var(--dim)}
body.woocommerce-page .wc-block-components-text-input input:focus + label{color:var(--violet)}

/* placeholders — --dim per the design system */
body.woocommerce-page .woocommerce input::placeholder,
body.woocommerce-page .woocommerce textarea::placeholder,
body.woocommerce-page .wc-block-components-text-input input::placeholder,
body.woocommerce-page .wc-block-components-textarea::placeholder{color:var(--dim);opacity:1}

/* Chrome autofill paints inputs white — force the dark field back. */
body.woocommerce-page .woocommerce input:-webkit-autofill,
body.woocommerce-page .wc-block-components-text-input input:-webkit-autofill,
body.woocommerce-page .wc-block-components-text-input input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--k4g-wc-field) inset;
  caret-color:var(--text);
}

/* validation */
body.woocommerce-page .wc-block-components-validation-error{color:var(--k4g-wc-err);font-size:12.5px}
body.woocommerce-page .wc-block-components-validation-error p{color:var(--k4g-wc-err)}
body.woocommerce-page .wc-block-components-text-input.has-error input,
body.woocommerce-page .wc-block-components-text-input.has-error input:focus{
  border-color:var(--k4g-wc-err);
  box-shadow:0 0 0 3px rgba(248,113,113,.2);
}

/* --- checkbox (block) ---
   WooCommerce draws an SVG tick (.wc-block-components-checkbox__mark,
   fill:#000) over a white box. Box -> violet when checked, tick -> #fff. */
body.woocommerce-page .wc-block-components-checkbox__input[type=checkbox]{
  background-color:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
  border-radius:5px;
}
body.woocommerce-page .wc-block-components-checkbox__input[type=checkbox]:checked{
  background:var(--violet);
  border-color:var(--violet);
}
body.woocommerce-page .wc-block-components-checkbox__mark{fill:#fff}
body.woocommerce-page .wc-block-components-checkbox__label{color:var(--text)}
body.woocommerce-page .wc-block-components-checkbox__input[type=checkbox]:focus{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

/* --- classic checkbox --- */
body.woocommerce-page .woocommerce input[type=checkbox]{
  accent-color:var(--violet);
  width:auto;
  margin-right:8px;
}
body.woocommerce-page .woocommerce .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:2px;
  font-weight:500;
  color:var(--muted);
  cursor:pointer;
}
body.woocommerce-page .woocommerce .woocommerce-form__label-for-checkbox span{color:var(--muted)}

/* --- radio (block) — shipping/payment options ---
   The dot is an ::before with background:#000 by default. */
body.woocommerce-page .wc-block-components-radio-control__input{
  background:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
}
body.woocommerce-page .wc-block-components-radio-control__input:checked{
  background:var(--k4g-wc-field);
  border:1px solid var(--violet);
}
body.woocommerce-page .wc-block-components-radio-control__input:checked::before{background:var(--violet)}
body.woocommerce-page .wc-block-components-radio-control__input:focus{
  outline:2px solid var(--violet);
  outline-offset:2px;
}
body.woocommerce-page .wc-block-components-radio-control__label{color:var(--text)}
body.woocommerce-page .wc-block-components-radio-control__description,
body.woocommerce-page .wc-block-components-radio-control__secondary-description{color:var(--muted)}
body.woocommerce-page .wc-block-components-radio-control-accordion-option,
body.woocommerce-page .wc-block-components-radio-control__option{
  border-color:var(--line);
  color:var(--text);
}
body.woocommerce-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
  margin-bottom:10px;
}
body.woocommerce-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option:has(:checked){
  border-color:var(--violet);
  box-shadow:0 0 0 1px rgba(139,92,246,.35);
}


/* ============================================================
   6. TABLES — classic order tables + block cart line items
   ============================================================
   Classic: .shop_table / .woocommerce-table--order-details /
            .woocommerce-orders-table
   Block:   .wc-block-cart-items (a real <table>)
   ------------------------------------------------------------ */
body.woocommerce-page .woocommerce table.shop_table,
body.woocommerce-page .woocommerce table.woocommerce-table,
body.woocommerce-page .woocommerce table.woocommerce-orders-table{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  color:var(--text);
  width:100%;
  margin:0 0 24px;
}
body.woocommerce-page .woocommerce table.shop_table thead th,
body.woocommerce-page .woocommerce table.woocommerce-table thead th,
body.woocommerce-page .woocommerce table.woocommerce-orders-table thead th{
  background:var(--panel2);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
body.woocommerce-page .woocommerce table.shop_table td,
body.woocommerce-page .woocommerce table.shop_table th,
body.woocommerce-page .woocommerce table.woocommerce-table td,
body.woocommerce-page .woocommerce table.woocommerce-orders-table td{
  border-top:1px solid var(--line);
  color:var(--text);
  padding:14px 16px;
  background:transparent;
}
body.woocommerce-page .woocommerce table.shop_table tbody tr:first-child td{border-top:none}
body.woocommerce-page .woocommerce table.shop_table tfoot th,
body.woocommerce-page .woocommerce table.shop_table tfoot td{
  background:var(--panel2);
  border-top:1px solid var(--line);
  color:var(--text);
  font-weight:600;
}
body.woocommerce-page .woocommerce table.shop_table a{color:var(--ice);text-decoration:none}
body.woocommerce-page .woocommerce table.shop_table a:hover{color:var(--fuchsia)}

/* --- block cart line-item table ---
   CAREFUL — this table is NOT a normal table and must be recoloured only:
   WooCommerce lays each .wc-block-cart-items__row out as `display:grid`
   (grid-template-columns:80px 132px) and zeroes `td{padding:0}`. Adding
   padding/borders to the td here BREAKS that grid. So: no structural
   overrides below, colours only.
   WooCommerce also resets the table with `background:none!important`, so the
   panel background is the one place !important is genuinely required to win
   (specificity/order cannot beat !important). Row separators are WC's own
   border-bottom, which is currentColor-derived (near-white on our dark text)
   — retheme it to --line rather than adding a second border. */
body.woocommerce-page table.wc-block-cart-items:not(.wc-block-mini-cart-items){
  background:var(--panel)!important;   /* beats WC's background:none!important */
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2px 18px;                    /* rows are flush to the edge otherwise */
}
body.woocommerce-page table.wc-block-cart-items .wc-block-cart-items__header th{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.1em;
}

/* Row separators.
   WooCommerce's own separator is
     table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row
   — note :not(:last-child) is on the TABLE. In this layout the items table IS
   the last child of .wc-block-cart__main, so that rule never matches and the
   rows run together with no divider (verified in-browser: all rows reported
   border-bottom-width 0px). Use an adjacent-sibling border instead, which does
   not depend on the table's position, and hard-zero WC's border-bottom at
   higher specificity so the two can never stack into a double line. */
body.woocommerce-page table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row{
  border-bottom:0;
}
body.woocommerce-page table.wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-items__row + .wc-block-cart-items__row{
  border-top:1px solid var(--line);
}
body.woocommerce-page .wc-block-cart-item__image img{border-radius:10px;border:1px solid var(--line)}
body.woocommerce-page .wc-block-components-product-name{
  color:var(--text);
  font-weight:600;
  text-decoration:none;
}
body.woocommerce-page .wc-block-components-product-name:hover{color:var(--violet)}
body.woocommerce-page .wc-block-components-product-metadata,
body.woocommerce-page .wc-block-components-product-metadata__description{color:var(--muted);font-size:12.5px}

/* ------------------------------------------------------------
   PRE-ORDER LINE (cart + checkout summary)
   ------------------------------------------------------------
   Without this the line renders in the same 12.5px --muted grey as the
   description excerpt directly above it, third in a stack, and the sentence
   that corrects the sale reads as the same small print as "Product Overview
   Banker Simulator is a single-player PC simulation…". That was the state
   this task started in: the truth was PRESENT and not READ. Letter 48 §3 is
   about a buyer knowing what they are paying for at the moment they pay, and
   presence is not the same thing as being noticed.

   Solar, matching .bchip.pre and .buy-note.is-pre on the product page, so the
   same fact wears the same colour on every surface: scheduled — not the green
   "ready now", not the red "you cannot have it".

   The class is ours (K4G_Cart passes `className` explicitly). The block would
   otherwise derive it from a slug of the TRANSLATED label, so a locale change
   would silently unstyle the line.
   ------------------------------------------------------------ */
body.woocommerce-page .k4g-preorder-line{
  display:block;
  margin:8px 0 2px;
  padding:7px 10px;
  border:1px solid rgba(255,194,75,.3);
  border-radius:9px;
  background:rgba(255,194,75,.08);
  color:var(--solar);
  font-size:12.5px;
  line-height:1.45;
}
body.woocommerce-page .k4g-preorder-line .wc-block-components-product-details__name{
  font-weight:700;
  color:var(--solar);
}
body.woocommerce-page .k4g-preorder-line .wc-block-components-product-details__value{color:var(--solar)}
body.woocommerce-page .k4g-preorder-line .wc-block-components-product-details__value strong{font-weight:600}
/* The block puts a " / " separator between details; it must not sit inside the box. */
body.woocommerce-page .k4g-preorder-line > span[aria-hidden="true"]{display:none}

/* ------------------------------------------------------------
   PRE-ORDER NOTICE (order-received page)
   ------------------------------------------------------------
   Sits ABOVE the gateway's own instructions, which say the key is delivered as
   soon as payment is confirmed — false for a pre-order. Placement is the point:
   it must be read before the sentence it corrects.
   ------------------------------------------------------------ */
body.woocommerce-page .k4g-preorder-notice{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid rgba(255,194,75,.32);
  border-left:3px solid var(--solar);
  border-radius:12px;
  background:rgba(255,194,75,.07);
}
body.woocommerce-page .k4g-preorder-notice p{margin:0 0 7px;color:var(--text);font-size:14px;line-height:1.55}
body.woocommerce-page .k4g-preorder-notice p:last-child{margin-bottom:0}
body.woocommerce-page .k4g-preorder-notice__head{
  color:var(--solar);
  font-weight:700;
  letter-spacing:.01em;
}
body.woocommerce-page .wc-block-components-product-price{
  color:var(--text);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;
}
body.woocommerce-page .wc-block-components-product-price__regular{color:var(--muted);text-decoration:line-through;font-weight:500}
body.woocommerce-page .wc-block-cart-item__total .wc-block-components-product-price{font-size:16px}

/* quantity stepper */
body.woocommerce-page .wc-block-components-quantity-selector{
  background:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
  border-radius:10px;
  overflow:hidden;
}
body.woocommerce-page .wc-block-components-quantity-selector::after{border:none;box-shadow:none}
body.woocommerce-page .wc-block-components-quantity-selector__input{
  background:transparent;
  color:var(--text);
  border:none;
}
body.woocommerce-page .wc-block-components-quantity-selector__button{
  background:transparent;
  color:var(--muted);
  border:none;
  box-shadow:none;
}
body.woocommerce-page .wc-block-components-quantity-selector__button:hover{color:var(--text)}
body.woocommerce-page .wc-block-components-quantity-selector__button:disabled{opacity:.4}


/* ============================================================
   7. BLOCK CART / CHECKOUT LAYOUT — panels, totals, summary
   ============================================================ */
body.woocommerce-page .wc-block-cart__sidebar .wc-block-components-sidebar,
body.woocommerce-page .wc-block-checkout__sidebar .wc-block-components-sidebar,
body.woocommerce-page .wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child{
  background:transparent;
}
body.woocommerce-page .wc-block-components-sidebar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  color:var(--text);
}
body.woocommerce-page .wc-block-components-sidebar .wc-block-components-panel,
body.woocommerce-page .wc-block-components-sidebar .wc-block-components-totals-item{background:transparent}

/* totals rows */
body.woocommerce-page .wc-block-components-totals-item{color:var(--muted);font-size:14px}
body.woocommerce-page .wc-block-components-totals-item__label{color:var(--muted)}
body.woocommerce-page .wc-block-components-totals-item__value{color:var(--text);font-weight:600}
body.woocommerce-page .wc-block-components-totals-item__description{color:var(--dim);font-size:12px}
body.woocommerce-page .wc-block-components-totals-wrapper{
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:14px;
}
body.woocommerce-page .wc-block-components-totals-wrapper:first-child{border-top:none;margin-top:0;padding-top:0}
body.woocommerce-page .wc-block-components-totals-wrapper::after{border:none;display:none}

/* order total */
body.woocommerce-page .wc-block-components-totals-footer-item{
  border-top:1px solid var(--line2);
  padding-top:14px;
  color:var(--text);
}
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  color:var(--text);
  font-weight:700;
}
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--text);
}
body.woocommerce-page .wc-block-components-totals-footer-item__description{color:var(--dim)}

/* collapsible panels (coupon, order summary) */
body.woocommerce-page .wc-block-components-panel__button{color:var(--text);font-weight:600}
body.woocommerce-page .wc-block-components-panel__button:hover{color:var(--violet)}
body.woocommerce-page .wc-block-components-panel__button svg{fill:currentColor}
body.woocommerce-page .wc-block-components-panel__content{color:var(--muted)}

/* coupon */
body.woocommerce-page .wc-block-components-totals-coupon__form{gap:10px}
body.woocommerce-page .wc-block-components-totals-coupon__content{color:var(--text)}
body.woocommerce-page .wc-block-components-chip{
  background:var(--panel2);
  border:1px solid var(--line2);
  color:var(--text);
  border-radius:8px;
}
body.woocommerce-page .wc-block-components-chip__remove{fill:var(--muted)}
body.woocommerce-page .wc-block-components-chip__remove:hover{fill:var(--fuchsia)}

/* order summary rows inside checkout sidebar */
body.woocommerce-page .wc-block-components-order-summary-item{border-color:var(--line);color:var(--text)}
body.woocommerce-page .wc-block-components-order-summary-item__image img{border-radius:8px;border:1px solid var(--line)}
body.woocommerce-page .wc-block-components-order-summary-item__quantity{
  background:var(--panel2);
  border:1px solid var(--line2);
  color:var(--text);
}
body.woocommerce-page .wc-block-components-order-summary-item__description,
body.woocommerce-page .wc-block-components-order-summary-item__individual-price{color:var(--muted)}

/* checkout step headings + form section separators */
body.woocommerce-page .wc-block-components-checkout-step{border-color:var(--line)}
body.woocommerce-page .wc-block-components-checkout-step__title{
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--text);
  font-weight:700;
}
body.woocommerce-page .wc-block-components-checkout-step__heading{margin-top:0}
body.woocommerce-page .wc-block-components-checkout-step__description,
body.woocommerce-page .wc-block-components-checkout-step__legend{color:var(--muted)}
body.woocommerce-page .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step::before{
  color:var(--muted);
  border-color:var(--line2);
}

/* express-payment area + "or" rule */
body.woocommerce-page .wc-block-components-express-payment{border-color:var(--line)}
body.woocommerce-page .wc-block-components-express-payment__title-container,
body.woocommerce-page .wc-block-components-express-payment-continue-rule{color:var(--muted)}
body.woocommerce-page .wc-block-components-express-payment-continue-rule::before,
body.woocommerce-page .wc-block-components-express-payment-continue-rule::after{background:var(--line)}

/* empty cart */
body.woocommerce-page .wc-block-cart__empty-cart__title{color:var(--text)}

/* loading skeletons should not flash white on the dark page */
body.woocommerce-page .wc-block-components-loading-mask__children{opacity:.4}
body.woocommerce-page .wc-block-components-skeleton,
body.woocommerce-page .wc-block-components-spinner{color:var(--muted)}

/* terms / privacy copy */
body.woocommerce-page .wc-block-checkout__terms{color:var(--muted)}
body.woocommerce-page .wc-block-checkout__terms a,
body.woocommerce-page .wc-block-components-checkout-policies__policy a{color:var(--ice)}


/* ============================================================
   8. MY ACCOUNT — navigation sidebar + content
   ============================================================
   .woocommerce-MyAccount-navigation is a <nav><ul><li> from
   templates/myaccount/navigation.php; item classes come from
   wc_get_account_menu_item_classes() ->
   .woocommerce-MyAccount-navigation-link--{endpoint} + .is-active
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   ROOT CAUSE of the "cheap template" account page — documented so it is not
   reintroduced.

   WooCommerce's woocommerce-layout.css applies a legacy clearfix:
       .woocommerce::before,.woocommerce::after{content:" ";display:table}
   Under `display:grid` those two pseudo-elements are GRID ITEMS. `::before`
   claimed cell row 1 / column 1 and pushed every real child one cell along:

     logged out -> <h2>Login</h2> landed in the 1fr track (stranded mid-page,
                   784px wide) and the form was squeezed into the 230px sidebar
                   track, where its own `max-width:460px;margin:0 auto` was
                   powerless. That is the ~200px column the owner saw.
     logged in  -> the account nav stretched across the wide track while the
                   dashboard content was crushed into the 230px one. Inside-out.

   Fix the cause: take the clearfix pseudo-elements out of the grid.
   ------------------------------------------------------------ */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after{display:none}

/* The sidebar grid belongs to the SIGNED-IN dashboard only — it is keyed on the
   account nav actually being present rather than on a body class, so the
   logged-out page can never inherit a sidebar track it has no sidebar for.
   Browsers without :has() keep the default block flow: the dashboard stacks
   (nav above content) instead of breaking, and the login card still centres. */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
/* the notices wrapper is a grid child — let it span both columns */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper{grid-column:1 / -1}

body.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px;
  float:none;
  width:auto;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li{
  margin:0;
  border:none;
  list-style:none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  display:block;
  padding:10px 13px;
  border-radius:10px;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:.18s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  background:var(--panel2);
  color:var(--text);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 26px -12px rgba(225,75,200,.6);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{
  color:var(--fuchsia);
  background:var(--panel2);
}

body.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  float:none;
  width:auto;
  color:var(--text);
}
body.woocommerce-account .woocommerce-MyAccount-content p{color:var(--muted)}
body.woocommerce-account .woocommerce-MyAccount-content p mark,
body.woocommerce-account .woocommerce-MyAccount-content mark{
  background:transparent;
  color:var(--text);
  font-weight:600;
}
body.woocommerce-account .woocommerce-MyAccount-content a{color:var(--ice)}
body.woocommerce-account .woocommerce-MyAccount-content a.button{color:#fff}

/* addresses */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}
body.woocommerce-account .woocommerce-Address-title h3{margin:0}
body.woocommerce-account address{color:var(--muted);font-style:normal;line-height:1.7}

/* nested tables inside the content panel shouldn't double-panel */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
body.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table{
  background:var(--panel2);
  margin-bottom:0;
}


/* ============================================================
   9. LOGIN FORM (/my-account/, logged out)
   ============================================================
   Registration is disabled in this install, so form-login renders alone
   (no .col2-set). Capped + centred so it doesn't stretch to 1040px.
   The .col2-set rules below are defensive: if registration is ever
   enabled, the two columns become a responsive grid instead of floats.
   ------------------------------------------------------------ */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
/* single-column (no register form) -> narrow + centred */
body.woocommerce-account .woocommerce > .woocommerce-form-login{
  max-width:460px;
  margin:0 auto;
}
body.woocommerce-account .woocommerce > h2{text-align:center}

body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit{width:100%;justify-content:center;margin-top:4px}
body.woocommerce-account .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  margin:0 0 14px;
}
body.woocommerce-account .woocommerce-LostPassword{
  margin:14px 0 0;
  text-align:center;
  font-size:13px;
}
body.woocommerce-account .woocommerce-LostPassword a{color:var(--ice);text-decoration:none}
body.woocommerce-account .woocommerce-LostPassword a:hover{color:var(--fuchsia)}
body.woocommerce-account .woocommerce-privacy-policy-text p{color:var(--dim);font-size:12.5px}

/* password strength meter / hint */
body.woocommerce-account .woocommerce-password-strength{
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--panel2);
  color:var(--text);
  font-size:12.5px;
  padding:7px 10px;
}
body.woocommerce-account .woocommerce-password-strength.strong{border-color:var(--k4g-wc-ok);color:var(--k4g-wc-ok)}
body.woocommerce-account .woocommerce-password-strength.bad,
body.woocommerce-account .woocommerce-password-strength.short{border-color:var(--k4g-wc-err);color:var(--k4g-wc-err)}
body.woocommerce-account .woocommerce-password-strength.good{border-color:var(--k4g-wc-warn);color:var(--k4g-wc-warn)}
body.woocommerce-account .woocommerce-password-hint{color:var(--dim);font-size:12px}

/* show/hide password toggle */
body.woocommerce-account .show-password-input::after{color:var(--muted)}

/* defensive: 2-col login/register if registration is re-enabled */
body.woocommerce-account .u-columns.col2-set{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  float:none;
}
body.woocommerce-account .u-columns.col2-set .col-1,
body.woocommerce-account .u-columns.col2-set .col-2{width:auto;float:none}


/* ============================================================
   10. ORDER RECEIVED / THANK-YOU  (classic, is_checkout() endpoint)
   ============================================================
   templates/checkout/thankyou.php -> .woocommerce-order,
   .woocommerce-order-overview.order_details (a <ul>),
   .woocommerce-order-details + .woocommerce-table--order-details
   ------------------------------------------------------------ */
body.woocommerce-checkout .woocommerce-order > p,
body.woocommerce-checkout .woocommerce-thankyou-order-received{
  color:var(--text);
  font-size:18px;
  font-weight:600;
}
body.woocommerce-checkout ul.woocommerce-order-overview.order_details{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  margin:0 0 26px;
  padding:0;
}
body.woocommerce-checkout ul.woocommerce-order-overview.order_details li{
  flex:1 1 160px;
  border:none;
  border-right:1px solid var(--line);
  margin:0;
  padding:16px 18px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  list-style:none;
}
body.woocommerce-checkout ul.woocommerce-order-overview.order_details li:last-child{border-right:none}
body.woocommerce-checkout ul.woocommerce-order-overview.order_details li strong{
  display:block;
  margin-top:7px;
  color:var(--text);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
body.woocommerce-checkout .woocommerce-order-details__title,
body.woocommerce-checkout .woocommerce-column__title{
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--text);
  font-size:18px;
  font-weight:700;
  margin:0 0 14px;
}
body.woocommerce-checkout .woocommerce-customer-details address{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-style:normal;
  padding:16px;
  line-height:1.7;
}
/* bank/BACS transfer details block (gateway is enabled on this store) */
body.woocommerce-checkout .woocommerce-bacs-bank-details,
body.woocommerce-checkout .wc-bacs-bank-details-account-name{color:var(--text)}
body.woocommerce-checkout ul.wc-bacs-bank-details{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  list-style:none;
  color:var(--muted);
}
body.woocommerce-checkout ul.wc-bacs-bank-details li strong{color:var(--text)}
/* order downloads (game keys are delivered as downloads) */
body.woocommerce-page .woocommerce-order-downloads__title{color:var(--text)}


/* ============================================================
   11. MISC — select2 (WooCommerce ships it for country/state)
   ============================================================ */
body.woocommerce-page .select2-container--default .select2-selection--single,
body.woocommerce-page .select2-container--default .select2-selection--multiple{
  background:var(--k4g-wc-field);
  border:1px solid var(--k4g-wc-field-bd);
  border-radius:10px;
  height:auto;
  padding:6px 4px;
}
body.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--text)}
body.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--dim)}
body.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--muted) transparent transparent}
/* the dropdown renders in a body-level portal, so it is NOT scoped to
   .woocommerce-page — but this file only loads on WC pages anyway. */
.select2-container--default .select2-dropdown{
  background:var(--panel2);
  border:1px solid var(--line2);
  border-radius:10px;
  color:var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:8px;
  color:var(--text);
}
.select2-container--default .select2-results__option{background:transparent;color:var(--text)}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--violet);color:#fff}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true]{background:var(--panel);color:var(--text)}


/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  /* Must repeat the :has() from the dashboard rule above: :has() takes the
     specificity of its argument, so a plain `.woocommerce` selector here loses
     to it and the 230px sidebar track survives into mobile (content crushed to
     ~119px, page overflowing sideways). */
  body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul li a{padding:8px 12px}
}
@media (max-width:640px){
  body.woocommerce-account .woocommerce-MyAccount-content{padding:16px}
  body.woocommerce-page .woocommerce table.shop_table td,
  body.woocommerce-page .woocommerce table.shop_table th{padding:11px 12px}
  body.woocommerce-checkout ul.woocommerce-order-overview.order_details li{
    flex:1 1 100%;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  body.woocommerce-checkout ul.woocommerce-order-overview.order_details li:last-child{border-bottom:none}
  body.woocommerce-account .u-columns.col2-set{grid-template-columns:1fr}
  body.woocommerce-account .woocommerce > .woocommerce-form-login{max-width:none}
}


/* ============================================================
   14. DESIGNED SIGN-IN PAGE (/my-account/, logged out)
   ============================================================
   Markup: template-parts/auth-modal.php  ->  #k4g-auth-page
   Relocated into `.woocommerce` by auth.js, which then sets
   body.k4g-auth-ready. Without JS this block never applies and the plain
   WooCommerce form above is used instead — centred, capped, on-theme.

   The panel lands inside <article class="prose">, so the shared prose
   typography (underlined links, bulleted lists, muted <p>) has to be undone
   locally rather than left to fight the component styles.
   ------------------------------------------------------------ */
body.woocommerce-account .k4g-auth-page{
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:38px;
  align-items:start;
  max-width:980px;
  margin:6px auto 0;
}

/* the sign-in card */
body.woocommerce-account .k4g-auth-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 26px 26px;
}
body.woocommerce-account .k4g-auth-card-head{margin:0 0 20px}

/* --- prose resets, scoped to the panel --- */
body.woocommerce-account .k4g-auth-page p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
body.woocommerce-account .k4g-auth-page .k4g-auth-sub{color:var(--muted);font-size:13.5px;line-height:1.6}
body.woocommerce-account .k4g-auth-page .k4g-auth-hint{color:var(--dim);font-size:12.5px;line-height:1.55;margin-top:10px}
body.woocommerce-account .k4g-auth-page .k4g-auth-msg{margin-top:12px;font-size:13px;line-height:1.55}
body.woocommerce-account .k4g-auth-page ul{margin:0;padding:0;list-style:none;color:inherit}
body.woocommerce-account .k4g-auth-page li{margin:0}
body.woocommerce-account .k4g-auth-page a{text-decoration:none}
body.woocommerce-account .k4g-auth-page .k4g-auth-lost a{color:var(--ice)}
body.woocommerce-account .k4g-auth-page .k4g-auth-lost a:hover{color:var(--fuchsia);text-decoration:underline}
body.woocommerce-account .k4g-auth-page .k4g-auth-google{color:#1f1f1f}
body.woocommerce-account .k4g-auth-page h2,
body.woocommerce-account .k4g-auth-page h3{margin:0}

/* --- the "what an account is for" panel --- */
body.woocommerce-account .k4g-auth-aside{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(225,75,200,.10), transparent 62%),
    var(--bg2);
  padding:26px 24px;
}
body.woocommerce-account .k4g-auth-aside-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:17px;font-weight:700;color:var(--text);
  margin:0 0 10px;
}
body.woocommerce-account .k4g-auth-page .k4g-auth-aside-lead{
  color:var(--muted);font-size:13.5px;line-height:1.65;margin:0 0 20px;
}
body.woocommerce-account .k4g-auth-perks{display:grid;gap:16px}
body.woocommerce-account .k4g-auth-perks li{display:flex;gap:12px;align-items:flex-start}
body.woocommerce-account .k4g-auth-perks li>span:last-child{
  color:var(--muted);font-size:13px;line-height:1.6;
}
body.woocommerce-account .k4g-auth-perks b{display:block;color:var(--text);font-size:13.5px;font-weight:600;margin:0 0 3px}
body.woocommerce-account .k4g-auth-perk-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:9px;
  background:var(--panel2);
  border:1px solid var(--line2);
}
body.woocommerce-account .k4g-auth-perk-ico svg{stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

body.woocommerce-account .k4g-auth-page .k4g-auth-aside-foot{
  display:flex;gap:10px;align-items:flex-start;
  margin:22px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);
  color:var(--dim);font-size:12.5px;line-height:1.6;
}
body.woocommerce-account .k4g-auth-page .k4g-auth-aside-foot svg{
  flex:none;margin-top:2px;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* the page H1 belongs over a centred block once the designed page is in */
body.k4g-auth-ready .page-head{text-align:center;max-width:980px;margin-left:auto;margin-right:auto}

/* NO REGISTRATION, ANYWHERE. Registration is off in this install; these are
   belt-and-braces so a plugin or a settings flip can never surface a register
   column on a page that is deliberately sign-in only. */
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .u-column2.col-2,
body.woocommerce-account .u-columns.col2-set > .col-2{display:none !important}

@media (max-width:900px){
  /* .legal-wrap carries no gutter at this width, so the panel supplies its own
     rather than sitting flush against the viewport edge. */
  body.woocommerce-account .k4g-auth-page{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    max-width:512px;
    padding:0 16px;
    box-sizing:border-box;
  }
  /* the card leads on small screens; the rationale follows it */
  body.woocommerce-account .k4g-auth-aside{order:2}
}
@media (max-width:520px){
  body.woocommerce-account .k4g-auth-card{padding:22px 18px}
  body.woocommerce-account .k4g-auth-aside{padding:20px 18px}
}


/* ============================================================
   15. ORDERS LIST ON SMALL SCREENS — restore the order number
   ============================================================
   woocommerce-smallscreen.css (max-width:768px) hides the first column of a
   responsive shop table:
       .woocommerce table.shop_table_responsive tbody th{display:none}
   on the assumption that it repeats the row heading. On the orders table that
   first cell is the ORDER NUMBER, so every order collapsed into an identical
   Date / Status / Total block with no way to tell them apart — and the only
   link to the order (#33205) went with it.

   Bring it back as the heading of each order card.
   ------------------------------------------------------------ */
@media (max-width:768px){
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number{
    display:block;
    width:auto;
    text-align:left;
    padding:14px 14px 10px;
    border-bottom:1px solid var(--line);
    font-family:'Space Grotesk','Inter',sans-serif;
    font-size:15px;
    font-weight:700;
  }
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before{
    content:attr(data-title) " ";
    display:block;
    margin:0 0 2px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--dim);
  }
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a{
    color:var(--text);
    text-decoration:none;
  }
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a:hover{
    color:var(--violet);
  }
  /* each order reads as its own card */
  body.woocommerce-account .woocommerce-orders-table tbody tr{
    display:block;
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:12px;
    margin:0 0 12px;
    overflow:hidden;
  }
}


/* ============================================================
   16. NO FLASH OF THE RAW WOOCOMMERCE LOGIN FORM
   ============================================================
   auth.js is a deferred footer script, so it runs AFTER first paint. Measured
   on this page: the raw two-column WooCommerce form was painted for ~150ms
   normally and ~2.2s with a 6x CPU throttle before the designed panel replaced
   it. On a slow phone that is a clear flash of exactly the layout this work
   exists to remove, so it is suppressed from the very first paint instead.

   `k4g-auth` is a SERVER-side body class (K4G_Auth::body_class), so this rule
   is in force before a single script runs. If that class ever disappears the
   rule simply stops applying — degrading to the old flash, never to a hidden
   form.

   The form comes back by THREE independent routes, so a visitor can always
   sign in even if this stylesheet outlives the JS:
     1. auth.js relocates the designed panel and deletes this form outright;
     2. scripting disabled  -> the <noscript> block in footer.php reveals it;
     3. auth.js blocked/404 -> the watchdog in footer.php adds
        .k4g-auth-fallback after 1.2s and reveals it.

   The !important below is not padding — it is answering WooCommerce's own:
       .woocommerce-no-js form.woocommerce-form-login{display:block !important}
   The document is served with `woocommerce-no-js` on <body> and WooCommerce's
   script swaps it to `woocommerce-js` on load, so that !important rule is in
   force during precisely the window this is trying to cover. Every rule that
   reveals the form again therefore has to carry !important too.
   ------------------------------------------------------------ */
body.k4g-auth .woocommerce > h2,
body.k4g-auth .woocommerce > form.woocommerce-form-login{display:none !important}

body.k4g-auth.k4g-auth-fallback .woocommerce > h2,
body.k4g-auth.k4g-auth-fallback .woocommerce > form.woocommerce-form-login{display:block !important}