/* ==========================================================================
   ShopRite — Customer Account Pages Restyle
   --------------------------------------------------------------------------
   CSS-only modernisation of the customer account pages (Quote History, etc.)
   to match the dashboard look (red banner + light cards + right-side nav).

   Scope: every rule is scoped to body class hooks (e.g. .qquoteadv-view-history)
          so this file never affects any other part of the site.

   Pages currently styled:
     - Quote History       → body.qquoteadv-view-history
     (more added as we extend)

   Strategy:
     1. Add a red welcome banner above the layout (pseudo-element on body).
     2. Hide the old red left sidebar, move the modern restyled version to
        the right column (visual repositioning, HTML untouched).
     3. Wrap the main content visually as a white rounded card.
     4. Restyle the quotes table — no zebra stripes, cleaner type, modern hover.
     5. Restyle pagination, "View Quotation" links, "Back" link.

   Notes:
     - Uses CSS Grid on the layout container to swap column order.
     - Banner is simplified vs the dashboard (no logo/member data — that
       data isn't on this page; would require template edits to add).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens

   IMPORTANT: this file does NOT define --sr-primary / --sr-primary-light /
   --sr-primary-dark / --sr-primary-tint — those are already defined per
   union in main.css (e.g. `.union-800 .sr-dash { --sr-primary: #c91f1a; ... }`).

   We promote them to the body level via `.acct-themed` below so they cascade
   into the Quote History / customer-account pages too. That way each union
   automatically gets its own brand colour without per-union CSS in this file.

   Non-colour tokens (radius, shadow, spacing, font) are defined here.
   -------------------------------------------------------------------------- */
:root {
  --acct-ink: #1a1530;
  --acct-muted: #6b6580;
  --acct-bg: #f4f5f8;
  --acct-card: #ffffff;
  --acct-border: rgba(26, 21, 48, 0.06);
  --acct-shadow: 0 4px 14px -8px rgba(26, 21, 48, 0.08);
  --acct-radius: 14px;
  --acct-radius-lg: 20px;
  --acct-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Arial, Helvetica, sans-serif;
}

/* Default theme fallback — purple, same as main.css default.
   Each union override below replaces these on the body. */
body.qquoteadv-view-history,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success,
body.qquoteadvstore-index-index,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success,
body.customer-account-edit,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success,
body.qquoteadvstore-index-index,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success,
body.qquoteadv-view-view,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success,
body.qquoteadvstore-index-index,
body.qquoteadv-index-success,
body.customer-address-index,
body.qquoteadv-index-success {
  --sr-primary: #5a2390;
  --sr-primary-light: #7330b3;
  --sr-primary-dark: #3e1864;
  --sr-primary-tint: rgba(115, 48, 179, 0.08);
}

/* Per-union theme overrides — KEEP THESE IN SYNC WITH main.css.
   29 unions themed. Each block mirrors what's defined in main.css for
   the dashboard, so customer-account pages (this file) inherit the
   same brand colour automatically.
   --------------------------------------------------------------------- */

/* 748 + 763 + 796 — shared black (Maritime, TPIWA, MEUWA) */
body.union-748.qquoteadv-view-history,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-748.qquoteadvstore-index-index,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-748.customer-account-edit,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-748.qquoteadvstore-index-index,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-748.qquoteadv-view-view,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-748.qquoteadvstore-index-index,
body.union-748.qquoteadv-index-success,
body.union-748.customer-address-index,
body.union-748.qquoteadv-index-success,
body.union-763.qquoteadv-view-history,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-763.qquoteadvstore-index-index,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-763.customer-account-edit,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-763.qquoteadvstore-index-index,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-763.qquoteadv-view-view,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-763.qquoteadvstore-index-index,
body.union-763.qquoteadv-index-success,
body.union-763.customer-address-index,
body.union-763.qquoteadv-index-success,
body.union-796.qquoteadv-view-history,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success,
body.union-796.qquoteadvstore-index-index,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success,
body.union-796.customer-account-edit,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success,
body.union-796.qquoteadvstore-index-index,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success,
body.union-796.qquoteadv-view-view,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success,
body.union-796.qquoteadvstore-index-index,
body.union-796.qquoteadv-index-success,
body.union-796.customer-address-index,
body.union-796.qquoteadv-index-success {
  --sr-primary: #0E0E0E;
  --sr-primary-light: #0E0E0E;
  --sr-primary-dark: #000000;
  --sr-primary-tint: rgba(14, 14, 14, 0.08);
}

/* 750 NTEU — purple */
body.union-750.qquoteadv-view-history,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success,
body.union-750.qquoteadvstore-index-index,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success,
body.union-750.customer-account-edit,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success,
body.union-750.qquoteadvstore-index-index,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success,
body.union-750.qquoteadv-view-view,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success,
body.union-750.qquoteadvstore-index-index,
body.union-750.qquoteadv-index-success,
body.union-750.customer-address-index,
body.union-750.qquoteadv-index-success {
  --sr-primary: #4A2575;
  --sr-primary-light: #5A2E8E;
  --sr-primary-dark: #361A55;
  --sr-primary-tint: rgba(90, 46, 142, 0.08);
}

/* 753 — tan */
body.union-753.qquoteadv-view-history,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success,
body.union-753.qquoteadvstore-index-index,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success,
body.union-753.customer-account-edit,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success,
body.union-753.qquoteadvstore-index-index,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success,
body.union-753.qquoteadv-view-view,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success,
body.union-753.qquoteadvstore-index-index,
body.union-753.qquoteadv-index-success,
body.union-753.customer-address-index,
body.union-753.qquoteadv-index-success {
  --sr-primary: #5C5239;
  --sr-primary-light: #756849;
  --sr-primary-dark: #443B28;
  --sr-primary-tint: rgba(117, 104, 73, 0.08);
}

/* 754 — navy deep */
body.union-754.qquoteadv-view-history,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success,
body.union-754.qquoteadvstore-index-index,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success,
body.union-754.customer-account-edit,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success,
body.union-754.qquoteadvstore-index-index,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success,
body.union-754.qquoteadv-view-view,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success,
body.union-754.qquoteadvstore-index-index,
body.union-754.qquoteadv-index-success,
body.union-754.customer-address-index,
body.union-754.qquoteadv-index-success {
  --sr-primary: #1B2638;
  --sr-primary-light: #23314C;
  --sr-primary-dark: #121927;
  --sr-primary-tint: rgba(35, 49, 76, 0.08);
}

/* 759 — muted purple (no logo) */
body.union-759.qquoteadv-view-history,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success,
body.union-759.qquoteadvstore-index-index,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success,
body.union-759.customer-account-edit,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success,
body.union-759.qquoteadvstore-index-index,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success,
body.union-759.qquoteadv-view-view,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success,
body.union-759.qquoteadvstore-index-index,
body.union-759.qquoteadv-index-success,
body.union-759.customer-address-index,
body.union-759.qquoteadv-index-success {
  --sr-primary: #4A2A5E;
  --sr-primary-light: #5F3879;
  --sr-primary-dark: #371F46;
  --sr-primary-tint: rgba(95, 56, 121, 0.08);
}

/* 764 — brick red */
body.union-764.qquoteadv-view-history,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success,
body.union-764.qquoteadvstore-index-index,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success,
body.union-764.customer-account-edit,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success,
body.union-764.qquoteadvstore-index-index,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success,
body.union-764.qquoteadv-view-view,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success,
body.union-764.qquoteadvstore-index-index,
body.union-764.qquoteadv-index-success,
body.union-764.customer-address-index,
body.union-764.qquoteadv-index-success {
  --sr-primary: #871F1F;
  --sr-primary-light: #A92727;
  --sr-primary-dark: #631616;
  --sr-primary-tint: rgba(169, 39, 39, 0.08);
}

/* 767 WAPU — navy bright */
body.union-767.qquoteadv-view-history,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success,
body.union-767.qquoteadvstore-index-index,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success,
body.union-767.customer-account-edit,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success,
body.union-767.qquoteadvstore-index-index,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success,
body.union-767.qquoteadv-view-view,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success,
body.union-767.qquoteadvstore-index-index,
body.union-767.qquoteadv-index-success,
body.union-767.customer-address-index,
body.union-767.qquoteadv-index-success {
  --sr-primary: #001550;
  --sr-primary-light: #001E67;
  --sr-primary-dark: #000E38;
  --sr-primary-tint: rgba(0, 30, 103, 0.08);
}

/* 770 + 816 — shared royal blue */
body.union-770.qquoteadv-view-history,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-770.qquoteadvstore-index-index,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-770.customer-account-edit,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-770.qquoteadvstore-index-index,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-770.qquoteadv-view-view,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-770.qquoteadvstore-index-index,
body.union-770.qquoteadv-index-success,
body.union-770.customer-address-index,
body.union-770.qquoteadv-index-success,
body.union-816.qquoteadv-view-history,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success,
body.union-816.qquoteadvstore-index-index,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success,
body.union-816.customer-account-edit,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success,
body.union-816.qquoteadvstore-index-index,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success,
body.union-816.qquoteadv-view-view,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success,
body.union-816.qquoteadvstore-index-index,
body.union-816.qquoteadv-index-success,
body.union-816.customer-address-index,
body.union-816.qquoteadv-index-success {
  --sr-primary: #002370;
  --sr-primary-light: #013298;
  --sr-primary-dark: #001852;
  --sr-primary-tint: rgba(1, 50, 152, 0.08);
}

/* 776 — coral */
body.union-776.qquoteadv-view-history,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success,
body.union-776.qquoteadvstore-index-index,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success,
body.union-776.customer-account-edit,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success,
body.union-776.qquoteadvstore-index-index,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success,
body.union-776.qquoteadv-view-view,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success,
body.union-776.qquoteadvstore-index-index,
body.union-776.qquoteadv-index-success,
body.union-776.customer-address-index,
body.union-776.qquoteadv-index-success {
  --sr-primary: #D6422F;
  --sr-primary-light: #FD5040;
  --sr-primary-dark: #A53122;
  --sr-primary-tint: rgba(253, 80, 64, 0.08);
}

/* 786 AWU — navy mid */
body.union-786.qquoteadv-view-history,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success,
body.union-786.qquoteadvstore-index-index,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success,
body.union-786.customer-account-edit,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success,
body.union-786.qquoteadvstore-index-index,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success,
body.union-786.qquoteadv-view-view,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success,
body.union-786.qquoteadvstore-index-index,
body.union-786.qquoteadv-index-success,
body.union-786.customer-address-index,
body.union-786.qquoteadv-index-success {
  --sr-primary: #012754;
  --sr-primary-light: #0A4082;
  --sr-primary-dark: #001A3A;
  --sr-primary-tint: rgba(10, 64, 130, 0.08);
}

/* 788 Boating — navy */
body.union-788.qquoteadv-view-history,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success,
body.union-788.qquoteadvstore-index-index,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success,
body.union-788.customer-account-edit,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success,
body.union-788.qquoteadvstore-index-index,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success,
body.union-788.qquoteadv-view-view,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success,
body.union-788.qquoteadvstore-index-index,
body.union-788.qquoteadv-index-success,
body.union-788.customer-address-index,
body.union-788.qquoteadv-index-success {
  --sr-primary: #022B6B;
  --sr-primary-light: #0E4399;
  --sr-primary-dark: #011C48;
  --sr-primary-tint: rgba(14, 67, 153, 0.08);
}

/* 791 BAWA — electric blue */
body.union-791.qquoteadv-view-history,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success,
body.union-791.qquoteadvstore-index-index,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success,
body.union-791.customer-account-edit,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success,
body.union-791.qquoteadvstore-index-index,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success,
body.union-791.qquoteadv-view-view,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success,
body.union-791.qquoteadvstore-index-index,
body.union-791.qquoteadv-index-success,
body.union-791.customer-address-index,
body.union-791.qquoteadv-index-success {
  --sr-primary: #000098;
  --sr-primary-light: #1A1AB8;
  --sr-primary-dark: #000070;
  --sr-primary-tint: rgba(26, 26, 184, 0.08);
}

/* 792 — crimson */
body.union-792.qquoteadv-view-history,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success,
body.union-792.qquoteadvstore-index-index,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success,
body.union-792.customer-account-edit,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success,
body.union-792.qquoteadvstore-index-index,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success,
body.union-792.qquoteadv-view-view,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success,
body.union-792.qquoteadvstore-index-index,
body.union-792.qquoteadv-index-success,
body.union-792.customer-address-index,
body.union-792.qquoteadv-index-success {
  --sr-primary: #9B1F2A;
  --sr-primary-light: #C42835;
  --sr-primary-dark: #76151E;
  --sr-primary-tint: rgba(196, 40, 53, 0.08);
}

/* 800 CPSU/CSA — red */
body.union-800.qquoteadv-view-history,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success,
body.union-800.qquoteadvstore-index-index,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success,
body.union-800.customer-account-edit,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success,
body.union-800.qquoteadvstore-index-index,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success,
body.union-800.qquoteadv-view-view,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success,
body.union-800.qquoteadvstore-index-index,
body.union-800.qquoteadv-index-success,
body.union-800.customer-address-index,
body.union-800.qquoteadv-index-success {
  --sr-primary: #c91f1a;
  --sr-primary-light: #ee2a24;
  --sr-primary-dark: #a8001a;
  --sr-primary-tint: rgba(238, 42, 36, 0.08);
}

/* 804 Diabetes WA — teal bright */
body.union-804.qquoteadv-view-history,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success,
body.union-804.qquoteadvstore-index-index,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success,
body.union-804.customer-account-edit,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success,
body.union-804.qquoteadvstore-index-index,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success,
body.union-804.qquoteadv-view-view,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success,
body.union-804.qquoteadvstore-index-index,
body.union-804.qquoteadv-index-success,
body.union-804.customer-address-index,
body.union-804.qquoteadv-index-success {
  --sr-primary: #1F8E85;
  --sr-primary-light: #2EBCB0;
  --sr-primary-dark: #156460;
  --sr-primary-tint: rgba(46, 188, 176, 0.08);
}

/* 810 HSU — purple (also the default) */
body.union-810.qquoteadv-view-history,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success,
body.union-810.qquoteadvstore-index-index,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success,
body.union-810.customer-account-edit,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success,
body.union-810.qquoteadvstore-index-index,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success,
body.union-810.qquoteadv-view-view,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success,
body.union-810.qquoteadvstore-index-index,
body.union-810.qquoteadv-index-success,
body.union-810.customer-address-index,
body.union-810.qquoteadv-index-success {
  --sr-primary: #5a2390;
  --sr-primary-light: #7330b3;
  --sr-primary-dark: #3e1864;
  --sr-primary-tint: rgba(115, 48, 179, 0.08);
}

/* 811 IEUAWA — indigo */
body.union-811.qquoteadv-view-history,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success,
body.union-811.qquoteadvstore-index-index,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success,
body.union-811.customer-account-edit,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success,
body.union-811.qquoteadvstore-index-index,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success,
body.union-811.qquoteadv-view-view,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success,
body.union-811.qquoteadvstore-index-index,
body.union-811.qquoteadv-index-success,
body.union-811.customer-address-index,
body.union-811.qquoteadv-index-success {
  --sr-primary: #2C3884;
  --sr-primary-light: #3B4A9F;
  --sr-primary-dark: #1F2862;
  --sr-primary-tint: rgba(59, 74, 159, 0.08);
}

/* 826 RLSSWA — ocean blue */
body.union-826.qquoteadv-view-history,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success,
body.union-826.qquoteadvstore-index-index,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success,
body.union-826.customer-account-edit,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success,
body.union-826.qquoteadvstore-index-index,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success,
body.union-826.qquoteadv-view-view,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success,
body.union-826.qquoteadvstore-index-index,
body.union-826.qquoteadv-index-success,
body.union-826.customer-address-index,
body.union-826.qquoteadv-index-success {
  --sr-primary: #0A6489;
  --sr-primary-light: #0E7CAD;
  --sr-primary-dark: #084962;
  --sr-primary-tint: rgba(14, 124, 173, 0.08);
}

/* 827 MPDA — slate teal */
body.union-827.qquoteadv-view-history,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success,
body.union-827.qquoteadvstore-index-index,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success,
body.union-827.customer-account-edit,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success,
body.union-827.qquoteadvstore-index-index,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success,
body.union-827.qquoteadv-view-view,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success,
body.union-827.qquoteadvstore-index-index,
body.union-827.qquoteadv-index-success,
body.union-827.customer-address-index,
body.union-827.qquoteadv-index-success {
  --sr-primary: #2F5A5C;
  --sr-primary-light: #3E7476;
  --sr-primary-dark: #224244;
  --sr-primary-tint: rgba(62, 116, 118, 0.08);
}

/* 833 WASSEA — blue */
body.union-833.qquoteadv-view-history,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success,
body.union-833.qquoteadvstore-index-index,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success,
body.union-833.customer-account-edit,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success,
body.union-833.qquoteadvstore-index-index,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success,
body.union-833.qquoteadv-view-view,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success,
body.union-833.qquoteadvstore-index-index,
body.union-833.qquoteadv-index-success,
body.union-833.customer-address-index,
body.union-833.qquoteadv-index-success {
  --sr-primary: #1B2B80;
  --sr-primary-light: #2237A0;
  --sr-primary-dark: #131F5C;
  --sr-primary-tint: rgba(34, 55, 160, 0.08);
}

/* 835 Pharmacy Guild — deep teal */
body.union-835.qquoteadv-view-history,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success,
body.union-835.qquoteadvstore-index-index,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success,
body.union-835.customer-account-edit,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success,
body.union-835.qquoteadvstore-index-index,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success,
body.union-835.qquoteadv-view-view,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success,
body.union-835.qquoteadvstore-index-index,
body.union-835.qquoteadv-index-success,
body.union-835.customer-address-index,
body.union-835.qquoteadv-index-success {
  --sr-primary: #006670;
  --sr-primary-light: #008390;
  --sr-primary-dark: #004A52;
  --sr-primary-tint: rgba(0, 131, 144, 0.08);
}

/* 843 WMWA — dark mauve */
body.union-843.qquoteadv-view-history,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success,
body.union-843.qquoteadvstore-index-index,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success,
body.union-843.customer-account-edit,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success,
body.union-843.qquoteadvstore-index-index,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success,
body.union-843.qquoteadv-view-view,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success,
body.union-843.qquoteadvstore-index-index,
body.union-843.qquoteadv-index-success,
body.union-843.customer-address-index,
body.union-843.qquoteadv-index-success {
  --sr-primary: #4A3937;
  --sr-primary-light: #5E4A48;
  --sr-primary-dark: #352927;
  --sr-primary-tint: rgba(94, 74, 72, 0.08);
}

/* 844 Offshore — dark blue */
body.union-844.qquoteadv-view-history,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success,
body.union-844.qquoteadvstore-index-index,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success,
body.union-844.customer-account-edit,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success,
body.union-844.qquoteadvstore-index-index,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success,
body.union-844.qquoteadv-view-view,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success,
body.union-844.qquoteadvstore-index-index,
body.union-844.qquoteadv-index-success,
body.union-844.customer-address-index,
body.union-844.qquoteadv-index-success {
  --sr-primary: #133458;
  --sr-primary-light: #194477;
  --sr-primary-dark: #0C2440;
  --sr-primary-tint: rgba(25, 68, 119, 0.08);
}

/* 850 AEAWA — red */
body.union-850.qquoteadv-view-history,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success,
body.union-850.qquoteadvstore-index-index,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success,
body.union-850.customer-account-edit,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success,
body.union-850.qquoteadvstore-index-index,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success,
body.union-850.qquoteadv-view-view,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success,
body.union-850.qquoteadvstore-index-index,
body.union-850.qquoteadv-index-success,
body.union-850.customer-address-index,
body.union-850.qquoteadv-index-success {
  --sr-primary: #B30016;
  --sr-primary-light: #E4001C;
  --sr-primary-dark: #850010;
  --sr-primary-tint: rgba(228, 0, 28, 0.08);
}

/* 853 FCAWA — blue (banner is blue/white split on dashboard) */
body.union-853.qquoteadv-view-history,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success,
body.union-853.qquoteadvstore-index-index,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success,
body.union-853.customer-account-edit,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success,
body.union-853.qquoteadvstore-index-index,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success,
body.union-853.qquoteadv-view-view,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success,
body.union-853.qquoteadvstore-index-index,
body.union-853.qquoteadv-index-success,
body.union-853.customer-address-index,
body.union-853.qquoteadv-index-success {
  --sr-primary: #004A78;
  --sr-primary-light: #005E96;
  --sr-primary-dark: #003557;
  --sr-primary-tint: rgba(0, 94, 150, 0.08);
}

/* 854 — mid blue */
body.union-854.qquoteadv-view-history,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success,
body.union-854.qquoteadvstore-index-index,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success,
body.union-854.customer-account-edit,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success,
body.union-854.qquoteadvstore-index-index,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success,
body.union-854.qquoteadv-view-view,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success,
body.union-854.qquoteadvstore-index-index,
body.union-854.qquoteadv-index-success,
body.union-854.customer-address-index,
body.union-854.qquoteadv-index-success {
  --sr-primary: #004F82;
  --sr-primary-light: #0061A0;
  --sr-primary-dark: #00385C;
  --sr-primary-tint: rgba(0, 97, 160, 0.08);
}

/* ==========================================================================
   QUOTE HISTORY PAGE  ( /qquoteadv/view/history/ )
   ========================================================================== */

/* Page background — light grey like the dashboard */
body.qquoteadv-view-history,
body.customer-account-edit,
body.qquoteadv-view-view {
  background: var(--acct-bg);
}

/* Hide the purple/blue diagonal SVG that sits behind the header — not used
   on the modern dashboard, and it creates visual noise on this page */
body.qquoteadv-view-history .shoprite-main-container .svg-bg,
body.customer-account-edit .shoprite-main-container .svg-bg,
body.qquoteadv-view-view .shoprite-main-container .svg-bg {
  display: none;
}

/* --------------------------------------------------------------------------
   1. Welcome banner (CSS-only, generated via the .inner_mid_part ::before)
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .inner_mid_part::before {
  content: "Quote History";
  display: block;
  box-sizing: border-box;
  max-width: 1180px;
  width: calc(100% - 40px);
  margin: 0 auto 24px;
  padding: 38px 40px;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--acct-radius-lg);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2);
}

/* Hide the duplicate `.account-sidebar` (mobile slide-out menu) — it
   contains the same nav already rendered in .col-left, but rendered as
   a hamburger trigger via #gn-menu2. We keep it for mobile if needed. */
body.qquoteadv-view-history .account-sidebar,
body.customer-account-edit .account-sidebar,
body.qquoteadv-view-view .account-sidebar {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Layout: swap to grid, sidebar on the right, main on the left

   Specificity boost: existing main.css uses body.union-800 prefixes on
   .col-main / .col-left rules, so we chain both body classes here to win.
   -------------------------------------------------------------------------- */

/* The .inner_mid_part wrapper had width constraints in main.css — neutralise
   and give breathing room so the banner sits clear of the header nav */
body.qquoteadv-view-history .inner_mid_part,
body.customer-account-edit .inner_mid_part,
body.qquoteadv-view-view .inner_mid_part {
  width: 100% !important;
  max-width: none !important;
  padding-top: 140px !important;
  background: transparent !important;
}

body.union-800.qquoteadv-view-history .main-container.col2-left-layout,
body.qquoteadv-view-history .main-container.col2-left-layout,
body.customer-account-edit .main-container.col2-left-layout,
body.qquoteadv-view-view .main-container.col2-left-layout {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 28px !important;
  align-items: start !important;
  padding: 0 20px 40px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Left content area — confirmed class is .col-main.right-panel */
body.union-800.qquoteadv-view-history .col-main,
body.union-800.qquoteadv-view-history .col-main.right-panel,
body.qquoteadv-view-history .col-main,
body.customer-account-edit .col-main,
body.qquoteadv-view-view .col-main,
body.qquoteadv-view-history .col-main.right-panel,
body.customer-account-edit .col-main.right-panel,
body.qquoteadv-view-view .col-main.right-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Old red sidebar → move to right column, restyle as modern white card */
body.union-800.qquoteadv-view-history .col-left.sidebar.left-panel,
body.qquoteadv-view-history .col-left.sidebar.left-panel,
body.customer-account-edit .col-left.sidebar.left-panel,
body.qquoteadv-view-view .col-left.sidebar.left-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}

/* Hide the legacy account logo block (just the SVG/img inside the sidebar) */
body.qquoteadv-view-history .col-left.sidebar.left-panel .account-logo,
body.customer-account-edit .col-left.sidebar.left-panel .account-logo,
body.qquoteadv-view-view .col-left.sidebar.left-panel .account-logo {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Sidebar blocks → modern card with grouped nav (matches dashboard)
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .col-left.sidebar.left-panel .block.block-account,
body.customer-account-edit .col-left.sidebar.left-panel .block.block-account,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block.block-account,
body.qquoteadv-view-history .col-left.sidebar.left-panel .static-links,
body.customer-account-edit .col-left.sidebar.left-panel .static-links,
body.qquoteadv-view-view .col-left.sidebar.left-panel .static-links {
  background: var(--acct-card);
  border-radius: var(--acct-radius);
  box-shadow: var(--acct-shadow);
  border: 1px solid var(--acct-border);
  padding: 18px 8px;
  margin-bottom: 16px;
  font-family: var(--acct-font);
}

/* Section labels "My Account" / "My Benefits" — turn into small uppercase headers */
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-title,
body.customer-account-edit .col-left.sidebar.left-panel .block-title,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-title,
body.qquoteadv-view-history .col-left.sidebar.left-panel .static-links .block-title,
body.customer-account-edit .col-left.sidebar.left-panel .static-links .block-title,
body.qquoteadv-view-view .col-left.sidebar.left-panel .static-links .block-title {
  background: transparent !important;
  color: var(--acct-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 16px 10px !important;
  border: 0 !important;
  margin: 0 !important;
}

body.qquoteadv-view-history .col-left.sidebar.left-panel .block-title strong,
body.customer-account-edit .col-left.sidebar.left-panel .block-title strong,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-title strong,
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-title span,
body.customer-account-edit .col-left.sidebar.left-panel .block-title span,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-title span {
  font-weight: 700;
  font-size: 11px;
  color: var(--acct-muted);
  background: transparent;
}

/* Nav lists inside sidebar blocks */
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content ul,
body.customer-account-edit .col-left.sidebar.left-panel .block-content ul,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li a,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li a,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  color: var(--acct-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li a:hover,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li a:hover,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li a:hover {
  background: var(--sr-primary-tint);
  color: var(--sr-primary);
}

/* Current page indicator — actual HTML: <li class="current last"><strong>...</strong></li>
   (no <a> tag wrapping it — it's just a <strong>) */
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li.current,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li.current,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li.current,
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li.current.last,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li.current.last,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li.current.last {
  background: var(--sr-primary) !important;
  border-radius: 10px;
  margin: 0 8px !important;
}

body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li.current strong,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li.current strong,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li.current strong,
body.qquoteadv-view-history .col-left.sidebar.left-panel .block-content li.current.last strong,
body.customer-account-edit .col-left.sidebar.left-panel .block-content li.current.last strong,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block-content li.current.last strong {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
}

/* Hide any redundant banner / account-sidebar blocks below (they belong
   to the old design — keep things clean) */
body.qquoteadv-view-history .col-left.sidebar.left-panel .block.block-banner,
body.customer-account-edit .col-left.sidebar.left-panel .block.block-banner,
body.qquoteadv-view-view .col-left.sidebar.left-panel .block.block-banner,
body.qquoteadv-view-history .col-left.sidebar.left-panel .account-sidebar,
body.customer-account-edit .col-left.sidebar.left-panel .account-sidebar,
body.qquoteadv-view-view .col-left.sidebar.left-panel .account-sidebar {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Main content → white rounded card
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .col-main,
body.customer-account-edit .col-main,
body.qquoteadv-view-view .col-main,
body.qquoteadv-view-history .col-main.right-panel,
body.customer-account-edit .col-main.right-panel,
body.qquoteadv-view-view .col-main.right-panel {
  background: var(--acct-card);
  border-radius: var(--acct-radius);
  box-shadow: var(--acct-shadow);
  border: 1px solid var(--acct-border);
  padding: 28px 32px !important;
  font-family: var(--acct-font);
  min-width: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* "My Quotes" heading — actual structure is .page-title > h1 */
body.qquoteadv-view-history .col-main .page-title,
body.customer-account-edit .col-main .page-title,
body.qquoteadv-view-view .col-main .page-title,
body.qquoteadv-view-history .col-main.right-panel .page-title,
body.customer-account-edit .col-main.right-panel .page-title,
body.qquoteadv-view-view .col-main.right-panel .page-title {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}

body.qquoteadv-view-history .col-main .page-title h1,
body.customer-account-edit .col-main .page-title h1,
body.qquoteadv-view-view .col-main .page-title h1,
body.qquoteadv-view-history .col-main.right-panel .page-title h1,
body.customer-account-edit .col-main.right-panel .page-title h1,
body.qquoteadv-view-view .col-main.right-panel .page-title h1,
body.qquoteadv-view-history .col-main h1,
body.customer-account-edit .col-main h1,
body.qquoteadv-view-view .col-main h1,
body.qquoteadv-view-history .col-main h2,
body.customer-account-edit .col-main h2,
body.qquoteadv-view-view .col-main h2 {
  font-family: var(--acct-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--acct-ink) !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   5. Quotes table — clean modern look, no zebra stripes
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .col-main table.data-table,
body.customer-account-edit .col-main table.data-table,
body.qquoteadv-view-view .col-main table.data-table,
body.qquoteadv-view-history .col-main #my-orders-table,
body.customer-account-edit .col-main #my-orders-table,
body.qquoteadv-view-view .col-main #my-orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--acct-font);
  font-size: 14px;
  margin: 0;
  background: transparent;
  border: 0;
}

body.qquoteadv-view-history .col-main table.data-table thead th,
body.customer-account-edit .col-main table.data-table thead th,
body.qquoteadv-view-view .col-main table.data-table thead th,
body.qquoteadv-view-history .col-main #my-orders-table thead th,
body.customer-account-edit .col-main #my-orders-table thead th,
body.qquoteadv-view-view .col-main #my-orders-table thead th {
  background: #f9fafb !important;
  color: var(--acct-muted) !important;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px !important;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
}

body.qquoteadv-view-history .col-main table.data-table tbody td,
body.customer-account-edit .col-main table.data-table tbody td,
body.qquoteadv-view-view .col-main table.data-table tbody td,
body.qquoteadv-view-history .col-main #my-orders-table tbody td,
body.customer-account-edit .col-main #my-orders-table tbody td,
body.qquoteadv-view-view .col-main #my-orders-table tbody td {
  background: transparent !important;
  padding: 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink);
  font-size: 14px;
  vertical-align: middle;
  text-align: left;
}

/* Override Magento's td.a-center default right-alignment for action column */
body.qquoteadv-view-history .col-main table.data-table tbody td.a-center,
body.customer-account-edit .col-main table.data-table tbody td.a-center,
body.qquoteadv-view-view .col-main table.data-table tbody td.a-center {
  text-align: right;
}

body.qquoteadv-view-history .col-main table.data-table tbody tr:last-child td,
body.customer-account-edit .col-main table.data-table tbody tr:last-child td,
body.qquoteadv-view-view .col-main table.data-table tbody tr:last-child td,
body.qquoteadv-view-history .col-main #my-orders-table tbody tr:last-child td,
body.customer-account-edit .col-main #my-orders-table tbody tr:last-child td,
body.qquoteadv-view-view .col-main #my-orders-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Subtle hover on rows */
body.qquoteadv-view-history .col-main table.data-table tbody tr,
body.customer-account-edit .col-main table.data-table tbody tr,
body.qquoteadv-view-view .col-main table.data-table tbody tr,
body.qquoteadv-view-history .col-main #my-orders-table tbody tr,
body.customer-account-edit .col-main #my-orders-table tbody tr,
body.qquoteadv-view-view .col-main #my-orders-table tbody tr {
  transition: background 0.15s ease;
}

body.qquoteadv-view-history .col-main table.data-table tbody tr:hover,
body.customer-account-edit .col-main table.data-table tbody tr:hover,
body.qquoteadv-view-view .col-main table.data-table tbody tr:hover,
body.qquoteadv-view-history .col-main #my-orders-table tbody tr:hover,
body.customer-account-edit .col-main #my-orders-table tbody tr:hover,
body.qquoteadv-view-view .col-main #my-orders-table tbody tr:hover {
  background: #fafbfc;
}

body.qquoteadv-view-history .col-main table.data-table tbody tr:hover td,
body.customer-account-edit .col-main table.data-table tbody tr:hover td,
body.qquoteadv-view-view .col-main table.data-table tbody tr:hover td {
  background: transparent !important;
}

/* "View Quotation" link */
body.qquoteadv-view-history .col-main table.data-table tbody a,
body.customer-account-edit .col-main table.data-table tbody a,
body.qquoteadv-view-view .col-main table.data-table tbody a,
body.qquoteadv-view-history .col-main #my-orders-table tbody a,
body.customer-account-edit .col-main #my-orders-table tbody a,
body.qquoteadv-view-view .col-main #my-orders-table tbody a {
  color: var(--sr-primary) !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.qquoteadv-view-history .col-main table.data-table tbody a:hover,
body.customer-account-edit .col-main table.data-table tbody a:hover,
body.qquoteadv-view-view .col-main table.data-table tbody a:hover,
body.qquoteadv-view-history .col-main #my-orders-table tbody a:hover,
body.customer-account-edit .col-main #my-orders-table tbody a:hover,
body.qquoteadv-view-view .col-main #my-orders-table tbody a:hover {
  text-decoration: underline;
}

/* Arrow after "View Quotation" */
body.qquoteadv-view-history .col-main table.data-table tbody a::after,
body.customer-account-edit .col-main table.data-table tbody a::after,
body.qquoteadv-view-view .col-main table.data-table tbody a::after,
body.qquoteadv-view-history .col-main #my-orders-table tbody a::after,
body.customer-account-edit .col-main #my-orders-table tbody a::after,
body.qquoteadv-view-view .col-main #my-orders-table tbody a::after {
  content: " →";
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   6. Pagination + "per page" controls (top + bottom)
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .pager,
body.customer-account-edit .pager,
body.qquoteadv-view-view .pager,
body.qquoteadv-view-history .toolbar,
body.customer-account-edit .toolbar,
body.qquoteadv-view-view .toolbar {
  background: transparent !important;
  border: 0 !important;
  padding: 12px 0 !important;
  font-family: var(--acct-font);
  font-size: 13px;
  color: var(--acct-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

body.qquoteadv-view-history .pager .amount,
body.customer-account-edit .pager .amount,
body.qquoteadv-view-view .pager .amount,
body.qquoteadv-view-history .toolbar .amount,
body.customer-account-edit .toolbar .amount,
body.qquoteadv-view-view .toolbar .amount {
  color: var(--acct-muted);
  font-weight: 600;
}

body.qquoteadv-view-history .pages ol,
body.customer-account-edit .pages ol,
body.qquoteadv-view-view .pages ol {
  display: inline-flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.qquoteadv-view-history .pages ol li,
body.customer-account-edit .pages ol li,
body.qquoteadv-view-view .pages ol li {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Kill the legacy theme's grey li border, but only on non-current li
   (current li is itself the styled button and needs its own border). */
body.qquoteadv-view-history .pages ol li:not(.current),
body.customer-account-edit .pages ol li:not(.current),
body.qquoteadv-view-view .pages ol li:not(.current) {
  border: 0 !important;
}

body.qquoteadv-view-history .pages ol li a,
body.customer-account-edit .pages ol li a,
body.qquoteadv-view-view .pages ol li a,
body.qquoteadv-view-history .pages ol li strong,
body.customer-account-edit .pages ol li strong,
body.qquoteadv-view-view .pages ol li strong,
body.qquoteadv-view-history .pages ol li span,
body.customer-account-edit .pages ol li span,
body.qquoteadv-view-view .pages ol li span,
body.qquoteadv-view-history .pages ol li.current,
body.customer-account-edit .pages ol li.current,
body.qquoteadv-view-view .pages ol li.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--acct-border);
  background: #fff;
  color: var(--acct-ink);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box !important;
}

body.qquoteadv-view-history .pages ol li a:hover,
body.customer-account-edit .pages ol li a:hover,
body.qquoteadv-view-view .pages ol li a:hover {
  background: var(--sr-primary);
  color: #fff;
  border-color: var(--sr-primary);
}

/* Current page: filled purple "you are here" button. Covers both the
   bare text case (<li class="current">1</li>) and any inner strong. */
body.qquoteadv-view-history .pages ol li.current,
body.customer-account-edit .pages ol li.current,
body.qquoteadv-view-view .pages ol li.current,
body.qquoteadv-view-history .pages ol li.current strong,
body.customer-account-edit .pages ol li.current strong,
body.qquoteadv-view-view .pages ol li.current strong,
body.qquoteadv-view-history .pages ol li strong,
body.customer-account-edit .pages ol li strong,
body.qquoteadv-view-view .pages ol li strong {
  background: var(--sr-primary) !important;
  color: #fff !important;
  border-color: var(--sr-primary) !important;
}

body.qquoteadv-view-history .limiter label,
body.customer-account-edit .limiter label,
body.qquoteadv-view-view .limiter label {
  color: var(--acct-muted);
  font-weight: 600;
  margin-right: 6px;
}

body.qquoteadv-view-history .limiter select,
body.customer-account-edit .limiter select,
body.qquoteadv-view-view .limiter select {
  border: 1px solid var(--acct-border);
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff;
  font-size: 13px;
  font-family: var(--acct-font);
  color: var(--acct-ink);
}

/* --------------------------------------------------------------------------
   7. "« Back" link — turn into a subtle ghost button
   Actual HTML: <div class="buttons-set"><p class="back-link"><a>...
   -------------------------------------------------------------------------- */
body.qquoteadv-view-history .col-main .buttons-set,
body.customer-account-edit .col-main .buttons-set,
body.qquoteadv-view-view .col-main .buttons-set {
  border: 0 !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  background: transparent !important;
}

body.qquoteadv-view-history .col-main .buttons-set p.back-link,
body.customer-account-edit .col-main .buttons-set p.back-link,
body.qquoteadv-view-view .col-main .buttons-set p.back-link {
  margin: 0 !important;
  padding: 0 !important;
}

body.qquoteadv-view-history .col-main .buttons-set p.back-link a,
body.customer-account-edit .col-main .buttons-set p.back-link a,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  border-radius: 10px;
  border: 1.5px solid var(--sr-primary);
  color: var(--sr-primary) !important;
  font-family: var(--acct-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}

body.qquoteadv-view-history .col-main .buttons-set p.back-link a:hover,
body.customer-account-edit .col-main .buttons-set p.back-link a:hover,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a:hover {
  background: var(--sr-primary);
  color: #fff !important;
}

body.qquoteadv-view-history .col-main .buttons-set p.back-link a small,
body.customer-account-edit .col-main .buttons-set p.back-link a small,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a small {
  font-size: inherit;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   8. Mobile reflow — stack sidebar below main content
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.qquoteadv-view-history .main-container.col2-left-layout {
    grid-template-columns: 1fr;
    padding: 0 16px 32px;
  }

  body.qquoteadv-view-history .col-left.sidebar.left-panel,
  body.qquoteadv-view-history .col-main,
  body.qquoteadv-view-history .col-main.right-panel {
    grid-column: 1;
  }

  body.qquoteadv-view-history .inner_mid_part::before {
    margin: 0 16px 20px;
    padding: 26px 24px;
    font-size: 22px;
    border-radius: 14px;
  }

  body.qquoteadv-view-history .col-main,
  body.qquoteadv-view-history .col-main.right-panel {
    padding: 20px !important;
  }

  /* Pager labels can wrap awkwardly on mobile */
  body.qquoteadv-view-history .pager {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* End of Quote History page restyle */

/* ==========================================================================
   ACCOUNT INFORMATION PAGE  ( /customer/account/edit/ )

   HTML structure (from page source):
     .col-main.right-panel > .my-account > .page-title > .breadcrumb > h1
     .col-main.right-panel > .my-account > form#form-validate
       > .fieldset (My Details)   > h2.legend + ul.form-list
       > .fieldset#passchangefrm  > h2.legend + ul.form-list
       > .fieldset#more_info      > h2.legend + ul.form-list (Membership)
       > .buttons-set             > .back-link + button.button

   All shared layout (grid, sidebar restyle, theming) is already handled by
   the rules above. This block adds only what's specific to this page:
     - Banner content text
     - Page-title/breadcrumb styling
     - Form field, label, input, fieldset, button styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner content for this page
   -------------------------------------------------------------------------- */

/* Push the layout down so the banner sits below the fixed header nav */
body.customer-account-edit .inner_mid_part,
body.qquoteadv-view-view .inner_mid_part {
  width: 100% !important;
  max-width: none !important;
  padding-top: 140px !important;
  background: transparent !important;
}

body.customer-account-edit .inner_mid_part::before {
  content: "Account Information";
  display: block;
  box-sizing: border-box;
  max-width: 1180px;
  width: calc(100% - 40px);
  margin: 0 auto 24px;
  padding: 38px 40px;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--acct-radius-lg);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2);
}

/* Hide the legacy diagonal SVG background on the account edit page too */
body.customer-account-edit .shoprite-main-container .svg-bg,
body.qquoteadv-view-view .shoprite-main-container .svg-bg {
  display: none;
}

/* Page background */
body.customer-account-edit,
body.qquoteadv-view-view {
  background: var(--acct-bg);
}

/* Hide duplicate mobile account-sidebar */
body.customer-account-edit .account-sidebar,
body.qquoteadv-view-view .account-sidebar {
  display: none;
}

/* --------------------------------------------------------------------------
   Main content card — same look as Quote History, applied to .my-account
   wrapper inside .col-main.right-panel.

   The card border / shadow is applied to .col-main by the rule above. We
   neutralise any extra padding/background inside .my-account so it doesn't
   create a double card effect.
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .my-account,
body.qquoteadv-view-view .col-main .my-account {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--acct-font);
}

/* --------------------------------------------------------------------------
   Page title + breadcrumb above the form
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .page-title,
body.qquoteadv-view-view .col-main .page-title {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}

body.customer-account-edit .col-main .page-title .breadcrumb,
body.qquoteadv-view-view .col-main .page-title .breadcrumb {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.customer-account-edit .col-main .page-title .breadcrumb h1,
body.qquoteadv-view-view .col-main .page-title .breadcrumb h1 {
  font-family: var(--acct-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--acct-ink) !important;
  letter-spacing: -0.02em;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.2;
}

body.customer-account-edit .col-main .page-title .breadcrumb ul,
body.qquoteadv-view-view .col-main .page-title .breadcrumb ul {
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--acct-border);
  font-size: 13px;
  color: var(--acct-muted);
}

body.customer-account-edit .col-main .page-title .breadcrumb ul li,
body.qquoteadv-view-view .col-main .page-title .breadcrumb ul li {
  background: transparent !important;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.customer-account-edit .col-main .page-title .breadcrumb ul li + li::before,
body.qquoteadv-view-view .col-main .page-title .breadcrumb ul li + li::before {
  content: "›";
  color: var(--acct-muted);
}

body.customer-account-edit .col-main .page-title .breadcrumb ul li a,
body.qquoteadv-view-view .col-main .page-title .breadcrumb ul li a {
  color: var(--acct-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

body.customer-account-edit .col-main .page-title .breadcrumb ul li a:hover,
body.qquoteadv-view-view .col-main .page-title .breadcrumb ul li a:hover {
  color: var(--sr-primary);
}

/* --------------------------------------------------------------------------
   Fieldsets — "My Details", "Change Password", "Membership"
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main form#form-validate,
body.qquoteadv-view-view .col-main form#form-validate {
  margin: 0;
  padding: 0;
}

body.customer-account-edit .col-main .fieldset,
body.qquoteadv-view-view .col-main .fieldset {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}

/* --------------------------------------------------------------------------
   Always show the Change Password fieldset, hide the toggle checkbox

   The original Magento form has a "Change Password" checkbox that toggles
   the password fields' visibility via JS. We're showing the fields by
   default for a cleaner UX — users can ignore them if they don't want to
   change their password.
   -------------------------------------------------------------------------- */

/* Hide the toggle checkbox row */
body.customer-account-edit .col-main .form-list li.control,
body.qquoteadv-view-view .col-main .form-list li.control {
  display: none !important;
}

/* Force the password fieldset visible even when Magento renders it
   with inline style="display:none" */
body.customer-account-edit #passchangefrm,
body.qquoteadv-view-view #passchangefrm,
body.customer-account-edit .col-main #passchangefrm,
body.qquoteadv-view-view .col-main #passchangefrm,
body.customer-account-edit #passchangefrm[style*="display: none"],
body.qquoteadv-view-view #passchangefrm[style*="display: none"],
body.customer-account-edit #passchangefrm[style*="display:none"],
body.qquoteadv-view-view #passchangefrm[style*="display:none"] {
  display: block !important;
}

body.customer-account-edit .col-main .fieldset:last-of-type,
body.qquoteadv-view-view .col-main .fieldset:last-of-type {
  margin-bottom: 0 !important;
}

body.customer-account-edit .col-main .fieldset .legend,
body.qquoteadv-view-view .col-main .fieldset .legend,
body.customer-account-edit .col-main .fieldset h2.legend,
body.qquoteadv-view-view .col-main .fieldset h2.legend {
  display: block;
  font-family: var(--acct-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acct-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  padding: 0 0 10px !important;
  margin: 0 0 18px !important;
}

/* --------------------------------------------------------------------------
   Form rows
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .form-list,
body.qquoteadv-view-view .col-main .form-list,
body.customer-account-edit .col-main ul.form-list,
body.qquoteadv-view-view .col-main ul.form-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  position: static !important;
}

body.customer-account-edit .col-main .form-list > li,
body.qquoteadv-view-view .col-main .form-list > li {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  position: static !important;
  float: none !important;
  list-style: none !important;
}

/* Single-row field — label sits above the input-box */
body.customer-account-edit .col-main .form-list > li > label,
body.qquoteadv-view-view .col-main .form-list > li > label {
  display: block !important;
  position: static !important;
  width: auto !important;
  float: none !important;
}

body.customer-account-edit .col-main .form-list > li .input-box,
body.qquoteadv-view-view .col-main .form-list > li .input-box {
  margin: 6px 0 0 !important;
  display: block !important;
  position: static !important;
  width: 100% !important;
  float: none !important;
}

/* Two-column .fields rows (First Name + Last Name, New Password + Confirm) */
body.customer-account-edit .col-main .form-list > li.fields,
body.qquoteadv-view-view .col-main .form-list > li.fields {
  display: block !important;
}

/* Variant A: <li.fields><div.customer-name><div.field>...</div><div.field>...</div></div></li> */
body.customer-account-edit .col-main .form-list > li.fields .customer-name,
body.qquoteadv-view-view .col-main .form-list > li.fields .customer-name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

body.customer-account-edit .col-main .form-list > li.fields .customer-name .field,
body.qquoteadv-view-view .col-main .form-list > li.fields .customer-name .field {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
}

/* Variant B: <li.fields><div.field>...</div><div.field>...</div></li> (password change) */
body.customer-account-edit .col-main .form-list > li.fields > .field,
body.qquoteadv-view-view .col-main .form-list > li.fields > .field {
  display: inline-block !important;
  width: calc(50% - 8px) !important;
  vertical-align: top !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
}

body.customer-account-edit .col-main .form-list > li.fields > .field:first-child,
body.qquoteadv-view-view .col-main .form-list > li.fields > .field:first-child {
  margin-right: 12px !important;
}

/* Re-stretch field labels and input-boxes inside .field wrappers */
body.customer-account-edit .col-main .form-list .field label,
body.qquoteadv-view-view .col-main .form-list .field label {
  display: block !important;
  position: static !important;
  width: auto !important;
  float: none !important;
}

body.customer-account-edit .col-main .form-list .field .input-box,
body.qquoteadv-view-view .col-main .form-list .field .input-box {
  display: block !important;
  position: static !important;
  width: 100% !important;
  float: none !important;
  margin: 6px 0 0 !important;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .form-list label,
body.qquoteadv-view-view .col-main .form-list label {
  display: block;
  font-family: var(--acct-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
}

body.customer-account-edit .col-main .form-list label.required::after,
body.qquoteadv-view-view .col-main .form-list label.required::after {
  content: " *";
  color: var(--sr-primary);
  font-weight: 700;
}

/* The "em.required" indicator Magento sometimes injects — hide it, we use ::after */
body.customer-account-edit .col-main .form-list label em,
body.qquoteadv-view-view .col-main .form-list label em {
  display: none;
}

/* --------------------------------------------------------------------------
   Inputs + selects
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .form-list .input-box,
body.qquoteadv-view-view .col-main .form-list .input-box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.customer-account-edit .col-main .form-list .input-text,
body.qquoteadv-view-view .col-main .form-list .input-text,
body.customer-account-edit .col-main .form-list input[type="text"],
body.qquoteadv-view-view .col-main .form-list input[type="text"],
body.customer-account-edit .col-main .form-list input[type="email"],
body.qquoteadv-view-view .col-main .form-list input[type="email"],
body.customer-account-edit .col-main .form-list input[type="password"],
body.qquoteadv-view-view .col-main .form-list input[type="password"],
body.customer-account-edit .col-main .form-list select,
body.qquoteadv-view-view .col-main .form-list select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 42px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: 10px;
  font-family: var(--acct-font);
  font-size: 14px;
  color: var(--acct-ink);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  float: none !important;
  position: static !important;
}

body.customer-account-edit .col-main .form-list .input-text:focus,
body.qquoteadv-view-view .col-main .form-list .input-text:focus,
body.customer-account-edit .col-main .form-list select:focus,
body.qquoteadv-view-view .col-main .form-list select:focus {
  outline: none;
  border-color: var(--sr-primary);
  box-shadow: 0 0 0 3px var(--sr-primary-tint);
}

/* Read-only inputs (First Name, Last Name, Membership Number) — visually
   muted to indicate they can't be edited */
body.customer-account-edit .col-main .form-list .input-text[readonly],
body.qquoteadv-view-view .col-main .form-list .input-text[readonly],
body.customer-account-edit .col-main .form-list input[readonly],
body.qquoteadv-view-view .col-main .form-list input[readonly] {
  background: #f9fafb !important;
  color: var(--acct-muted);
  cursor: not-allowed;
}

/* Disabled select (Union/Organisation field) */
body.customer-account-edit .col-main .form-list select[disabled],
body.qquoteadv-view-view .col-main .form-list select[disabled] {
  background: #f9fafb !important;
  color: var(--acct-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Custom select arrow (since we set -webkit-appearance: none) */
body.customer-account-edit .col-main .form-list select,
body.qquoteadv-view-view .col-main .form-list select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6580' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px;
}

/* --------------------------------------------------------------------------
   Hide the Union/Organisation field row entirely

   The field is disabled (member can't change it themselves — they'd need
   to contact support), so showing it on this page just adds clutter. The
   union association is already visible in the sidebar nav theming and in
   the welcome banner colour, so this isn't lost information.
   -------------------------------------------------------------------------- */
body.customer-account-edit #more_info .form-list > li:first-child,
body.qquoteadv-view-view #more_info .form-list > li:first-child,
body.customer-account-edit #more_info .form-list > li:has(#unionassociation),
body.qquoteadv-view-view #more_info .form-list > li:has(#unionassociation),
body.customer-account-edit #more_info .form-list > li:has([for="unionassociation"]),
body.qquoteadv-view-view #more_info .form-list > li:has([for="unionassociation"]) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   jqTransform compatibility

   The page uses the jqTransform jQuery plugin which wraps each native
   <select> in a <div class="jqTransformSelectWrapper"> containing a fake
   <span>-and-<ul> UI, and hides the real <select> via class "jqTransformHidden".

   Our restyle uses the native <select> directly (we've already given it
   a clean modern look). So we want to:
     1. Hide the jqTransform fake wrapper entirely
     2. Force the native (hidden) <select> back to visible
   -------------------------------------------------------------------------- */

/* Hide the entire jqTransform fake wrapper */
body.customer-account-edit .jqTransformSelectWrapper,
body.qquoteadv-view-view .jqTransformSelectWrapper {
  display: none !important;
}

/* Force the native select (which jqTransform tried to hide) back to visible */
body.customer-account-edit select.jqTransformHidden,
body.qquoteadv-view-view select.jqTransformHidden {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: 100% !important;
  height: 42px !important;
  opacity: 1 !important;
  left: auto !important;
  top: auto !important;
  /* Re-apply our select styling */
  padding: 10px 14px !important;
  background-color: #fff !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  color: var(--acct-ink) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6580' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* Disabled select (Union/Organisation is disabled in the form) — keep muted look */
body.customer-account-edit select.jqTransformHidden[disabled],
body.qquoteadv-view-view select.jqTransformHidden[disabled] {
  background-color: #f9fafb !important;
  color: var(--acct-muted) !important;
  cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   Defensive: hide any unexpected elements in #more_info (Membership fieldset)

   We've seen a phantom "WA Police Union of Workers (WAPU)" element appearing
   between the union select and the membership number input. Source of this
   isn't certain — possibly browser autofill rendering, possibly an unhidden
   .tip element, possibly a duplicate select. This rule defensively hides
   anything inside the membership <li> rows that isn't the label, input-box,
   or help icon wrapper.
   -------------------------------------------------------------------------- */

/* Inside the membership fieldset, only allow the expected children of each <li> */
body.customer-account-edit #more_info .form-list > li > *:not(label):not(.input-box):not(.help):not(.validation-advice),
body.qquoteadv-view-view #more_info .form-list > li > *:not(label):not(.input-box):not(.help):not(.validation-advice) {
  display: none !important;
}

/* AGGRESSIVE: hide any select/input inside #more_info that isn't one of the
   two expected fields (the union dropdown #unionassociation or the membership
   number input #membership_number) */
body.customer-account-edit #more_info select:not(#unionassociation),
body.qquoteadv-view-view #more_info select:not(#unionassociation),
body.customer-account-edit #more_info input:not(#membership_number):not([type="hidden"]),
body.qquoteadv-view-view #more_info input:not(#membership_number):not([type="hidden"]) {
  display: none !important;
}

/* Hide any element with role="combobox" or aria-autocomplete (browser autofill
   sometimes injects these) */
body.customer-account-edit #more_info [role="combobox"],
body.qquoteadv-view-view #more_info [role="combobox"],
body.customer-account-edit #more_info [role="listbox"],
body.qquoteadv-view-view #more_info [role="listbox"],
body.customer-account-edit #more_info [aria-autocomplete],
body.qquoteadv-view-view #more_info [aria-autocomplete] {
  display: none !important;
}

/* Hide any orphan text node containers — divs with no class that contain text */
body.customer-account-edit #more_info .form-list > li > div:not(.input-box):not(.help):not(.field),
body.qquoteadv-view-view #more_info .form-list > li > div:not(.input-box):not(.help):not(.field) {
  display: none !important;
}

/* Kill webkit autofill styling that can render as a visible element */
body.customer-account-edit input:-webkit-autofill,
body.qquoteadv-view-view input:-webkit-autofill,
body.customer-account-edit input:-webkit-autofill:focus,
body.qquoteadv-view-view input:-webkit-autofill:focus,
body.customer-account-edit input:-webkit-autofill:hover,
body.qquoteadv-view-view input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--acct-ink);
  -webkit-box-shadow: 0 0 0 30px #f9fafb inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Prevent <datalist> popovers / autocomplete suggestion containers from
   rendering inline if browser somehow does that */
body.customer-account-edit datalist,
body.qquoteadv-view-view datalist {
  display: none !important;
}

/* Disable autofill for the membership number field specifically — this
   tells the browser not to suggest values for it */
body.customer-account-edit #membership_number,
body.qquoteadv-view-view #membership_number {
  /* These attribute hints work best when set in HTML but won't hurt here */
}

/* --------------------------------------------------------------------------
   Help tooltip icons next to Union / Membership Number

   HTML structure:
     <div class="help">
       <div class="que union">              <- the trigger icon (background image is "?")
         <div class="tip">                  <- the tooltip content (hidden by default)
           <p>This Field is not editable...</p>
         </div>
       </div>
     </div>

   In the original design these are tiny "?" icons with a hover-revealed tip.
   We restore that behavior — keep the tip hidden until hover.
   -------------------------------------------------------------------------- */

/* Force hide ALL tooltip content first — only show on hover */
body.customer-account-edit .col-main .form-list .help .tip,
body.qquoteadv-view-view .col-main .form-list .help .tip,
body.customer-account-edit .col-main .form-list .help .tip p,
body.qquoteadv-view-view .col-main .form-list .help .tip p {
  display: none !important;
}

/* The wrapper — position absolutely to the right of the field */
body.customer-account-edit .col-main .form-list .help,
body.qquoteadv-view-view .col-main .form-list .help {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  z-index: 5;
}

/* The "?" icon trigger */
body.customer-account-edit .col-main .form-list .help .que,
body.qquoteadv-view-view .col-main .form-list .help .que {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sr-primary-tint) !important;
  color: var(--sr-primary);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  cursor: help;
  position: relative;
  text-indent: 0;
  /* override any background-image from old CSS that might show a different icon */
  background-image: none !important;
}

body.customer-account-edit .col-main .form-list .help .que::before,
body.qquoteadv-view-view .col-main .form-list .help .que::before {
  content: "?" !important;
  line-height: 1;
  color: var(--sr-primary);
  font-weight: 800;
  font-size: 12px;
}

/* Show the tooltip on hover of the icon */
body.customer-account-edit .col-main .form-list .help:hover .tip,
body.qquoteadv-view-view .col-main .form-list .help:hover .tip,
body.customer-account-edit .col-main .form-list .help .que:hover .tip,
body.qquoteadv-view-view .col-main .form-list .help .que:hover .tip,
body.customer-account-edit .col-main .form-list .help:hover .tip p,
body.qquoteadv-view-view .col-main .form-list .help:hover .tip p,
body.customer-account-edit .col-main .form-list .help .que:hover .tip p,
body.qquoteadv-view-view .col-main .form-list .help .que:hover .tip p {
  display: block !important;
}

body.customer-account-edit .col-main .form-list .help:hover .tip,
body.qquoteadv-view-view .col-main .form-list .help:hover .tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  width: 260px;
  background: var(--acct-ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
}

body.customer-account-edit .col-main .form-list .help:hover .tip p,
body.qquoteadv-view-view .col-main .form-list .help:hover .tip p {
  margin: 0;
  color: #fff !important;
  font-size: 12px;
  font-style: normal;
}

/* Position the form list items so the absolute-positioned help can anchor */
body.customer-account-edit .col-main .form-list > li,
body.qquoteadv-view-view .col-main .form-list > li {
  position: relative;
}

/* --------------------------------------------------------------------------
   Buttons set — Back link + Update submit button
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .buttons-set,
body.qquoteadv-view-view .col-main .buttons-set {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--acct-border) !important;
  padding: 20px 0 0 !important;
  margin: 28px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.customer-account-edit .col-main .buttons-set p.required,
body.qquoteadv-view-view .col-main .buttons-set p.required {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
  color: var(--acct-muted);
}

body.customer-account-edit .col-main .buttons-set p.back-link,
body.qquoteadv-view-view .col-main .buttons-set p.back-link {
  margin: 0 !important;
  padding: 0 !important;
  order: 1;
}

body.customer-account-edit .col-main .buttons-set p.back-link a,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--sr-primary);
  color: var(--sr-primary) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}

body.customer-account-edit .col-main .buttons-set p.back-link a:hover,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a:hover {
  background: var(--sr-primary);
  color: #fff !important;
}

body.customer-account-edit .col-main .buttons-set p.back-link a small,
body.qquoteadv-view-view .col-main .buttons-set p.back-link a small {
  font-size: inherit;
  font-weight: 800;
}

/* The submit button "Update" */
body.customer-account-edit .col-main .buttons-set button.button,
body.qquoteadv-view-view .col-main .buttons-set button.button,
body.customer-account-edit .col-main .buttons-set button[type="submit"],
body.qquoteadv-view-view .col-main .buttons-set button[type="submit"] {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 10px;
  border: 0;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
}

body.customer-account-edit .col-main .buttons-set button.button:hover,
body.qquoteadv-view-view .col-main .buttons-set button.button:hover,
body.customer-account-edit .col-main .buttons-set button[type="submit"]:hover,
body.qquoteadv-view-view .col-main .buttons-set button[type="submit"]:hover {
  background: var(--sr-primary-dark);
}

body.customer-account-edit .col-main .buttons-set button.button:active,
body.qquoteadv-view-view .col-main .buttons-set button.button:active {
  transform: translateY(1px);
}

body.customer-account-edit .col-main .buttons-set button.button span,
body.qquoteadv-view-view .col-main .buttons-set button.button span {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

/* --------------------------------------------------------------------------
   Hide Magento's validation success/error indicators (the absolutely
   positioned green ticks and red crosses). They were intended for the
   old layout where each input had room for a tick beside it; in our
   layout they end up floating in the gutter between columns.
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .validation-advice,
body.qquoteadv-view-view .col-main .validation-advice {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(220, 31, 38, 0.08);
  color: #c91f1a;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  position: static !important;
}

/* The green tick (.validate-success) and similar validation indicators
   that get absolutely positioned to the right of inputs */
body.customer-account-edit .col-main .form-list .validate-success,
body.qquoteadv-view-view .col-main .form-list .validate-success,
body.customer-account-edit .col-main .form-list img.v-middle[src*="tick"],
body.qquoteadv-view-view .col-main .form-list img.v-middle[src*="tick"],
body.customer-account-edit .col-main .form-list img[src*="valid"],
body.qquoteadv-view-view .col-main .form-list img[src*="valid"] {
  display: none !important;
}

/* End of Hide validation indicators */

/* --------------------------------------------------------------------------
   Hide "no_allow_change" alert message wrapper if it's empty
   -------------------------------------------------------------------------- */
body.customer-account-edit .col-main .no_allow_change,
body.qquoteadv-view-view .col-main .no_allow_change {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

body.customer-account-edit .col-main .no_allow_change p.alert-msg:empty,
body.qquoteadv-view-view .col-main .no_allow_change p.alert-msg:empty {
  display: none;
}

body.customer-account-edit .col-main .no_allow_change p.alert-msg,
body.qquoteadv-view-view .col-main .no_allow_change p.alert-msg {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--acct-muted);
}

/* --------------------------------------------------------------------------
   Mobile reflow
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.customer-account-edit .inner_mid_part::before {
    margin: 0 16px 20px;
    padding: 26px 24px;
    font-size: 22px;
    border-radius: 14px;
  }

  body.customer-account-edit .col-main .form-list > li.fields > .field {
    width: 100%;
    display: block;
    margin: 0 0 16px !important;
  }

  body.customer-account-edit .col-main .form-list > li.fields .customer-name {
    grid-template-columns: 1fr;
  }

  body.customer-account-edit .col-main .buttons-set {
    flex-direction: column;
    align-items: stretch;
  }

  body.customer-account-edit .col-main .buttons-set p.back-link a,
  body.customer-account-edit .col-main .buttons-set button.button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* End of Account Information page restyle */

/* ==========================================================================
   QUOTE DETAIL PAGE  ( /qquoteadv/view/view/id/XXXXX/ )

   HTML structure:
     .col-main.right-panel
       > ul.messages          (notice messages, hidden by JS)
       > ul.messages1         (the visible "ready" message)
       > div#main.my-account
         > .page-title.title-buttons > h1
         > p.order-date
         > p#callbackp
         > .col2-set.order-info-box  (Address + Shipping Method)
         > .col2-set.order-info-box  (Remark with Proposal)
         > h4 ("Items Requested")
         > form#quotelist > table.data-table.cart-table
         > .buttons-set > p.back-link > a

   All shared layout (grid, sidebar, banner, theming) is already handled by
   the rules above (this body class was added to those selectors via the
   bulk refactor). This block adds only what's specific to this page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner content for this page
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .inner_mid_part::before {
  content: "Quote Details";
  display: block;
  box-sizing: border-box;
  max-width: 1180px;
  width: calc(100% - 40px);
  margin: 0 auto 24px;
  padding: 38px 40px;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--acct-radius-lg);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Status / notice messages at the top of the page

   We hide both .messages and .messages1 entirely. The "Your quotation is
   ready. Please call us..." message can be misleading on quotes that have
   already been ordered/completed, and the conditional logic for showing
   it lives in the backend. Cleanest fix is to hide it across the board.
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main > ul.messages,
body.qquoteadv-view-view .col-main > ul.messages1,
body.qquoteadv-view-view .col-main ul.messages,
body.qquoteadv-view-view .col-main ul.messages1 {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Main content card wrapper (#main.my-account)
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main #main.my-account {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-family: var(--acct-font);
  box-sizing: border-box;
}

/* Defensive: any direct child of .my-account should respect its parent's width */
body.qquoteadv-view-view .col-main #main.my-account > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Page title — "Quote Request #252891"
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main .page-title {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

body.qquoteadv-view-view .col-main .page-title h1 {
  font-family: var(--acct-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--acct-ink) !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Quote metadata — date, callback text
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main .order-date {
  font-family: var(--acct-font);
  font-size: 13px;
  color: var(--acct-muted);
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.qquoteadv-view-view .col-main #callbackp {
  font-family: var(--acct-font);
  font-size: 13px;
  color: var(--acct-muted);
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Info boxes: Address + Shipping Method, Remark with Proposal
   Two-column layout using .col2-set.order-info-box

   We hide:
     - .col-2 (Shipping Method) — note isn't useful info on this page
     - The second .col2-set (Remark with Proposal) — usually empty
   And let .col-1 (Address) span the full width.
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main .col2-set.order-info-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hide the Shipping Method box and the Remark with Proposal section.
   Target by content (not position) because different quote variants render
   different sets of .col2-set boxes — e.g. some quotes have no Address,
   leaving the Remark as the first .col2-set. */
body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-2 {
  display: none !important;
}

/* Hide the entire .col2-set if it contains a .client-data.box (Remark with
   Proposal). Modern selector. */
body.qquoteadv-view-view .col-main .col2-set.order-info-box:has(.client-data) {
  display: none !important;
}

/* Fallback for browsers without :has() — hide the inner .client-data.box
   directly. The parent .col2-set will collapse to nothing visible. */
body.qquoteadv-view-view .col-main .col2-set.order-info-box .client-data,
body.qquoteadv-view-view .col-main .col2-set.order-info-box .client-data.box {
  display: none !important;
}

body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-1,
body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-2 {
  background: #f9fafb !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-1 h4,
body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-2 h4,
body.qquoteadv-view-view .col-main .col2-set.order-info-box .client-data h4 {
  font-family: var(--acct-font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acct-muted) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.qquoteadv-view-view .col-main .col2-set.order-info-box address {
  font-family: var(--acct-font);
  font-size: 13px;
  line-height: 1.6;
  color: var(--acct-ink);
  font-style: normal;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-2 u {
  font-family: var(--acct-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-ink);
  text-decoration: none;
  display: block;
}

/* The "Remark with Proposal" box — usually empty, so reduce its weight */
body.qquoteadv-view-view .col-main .col2-set.order-info-box .client-data.box {
  background: #f9fafb !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  grid-column: 1 / -1;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   "Items Requested" heading
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main #main h4 {
  font-family: var(--acct-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--acct-ink) !important;
  margin: 24px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Quote items table

   The HTML table has 9 columns (Quote#, Product, Comments, Qty, Best Price,
   Source of Price, Supplier, Status, Invoice). We hide the Invoice column
   (9th) because its value is always redundant with Status (e.g., Status
   says "Ordered" and Invoice says "done").

   With 8 columns the table fits comfortably in the available card width.
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main form#quotelist {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

body.qquoteadv-view-view .col-main table.data-table,
body.qquoteadv-view-view .col-main table.cart-table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--acct-border);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--acct-font);
  font-size: 13px;
  margin: 0;
  background: #fff !important;
}

/* Override the legacy <col width="..."> attributes if they're causing
   the table to overflow */
body.qquoteadv-view-view .col-main table.data-table col {
  width: auto !important;
}

/* Hide the Invoice column — both the header (9th th) and the cell (9th td)
   in every row. */
body.qquoteadv-view-view .col-main table.data-table thead tr th:nth-child(9),
body.qquoteadv-view-view .col-main table.data-table tbody tr td:nth-child(9) {
  display: none !important;
}

/* Tighter cell padding to fit 8 columns comfortably */
body.qquoteadv-view-view .col-main table.data-table thead th {
  background: #f9fafb !important;
  color: var(--acct-muted) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px !important;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  vertical-align: middle;
  white-space: nowrap;
}

body.qquoteadv-view-view .col-main table.data-table tbody tr.border td,
body.qquoteadv-view-view .col-main table.data-table tbody td {
  background: transparent !important;
  padding: 14px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink);
  font-size: 13px;
  vertical-align: middle;
  text-align: left;
}

body.qquoteadv-view-view .col-main table.data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Invoice note — appears under the items table

   Generated via ::after on the form#quotelist wrapper since the original
   HTML doesn't have a slot for it.
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main form#quotelist::after {
  content: "If you need a copy of your supplier invoice please contact us.";
  display: block;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: 8px;
  font-family: var(--acct-font);
  font-size: 13px;
  color: var(--acct-ink);
  line-height: 1.5;
}

/* Highlight the status cell */
body.qquoteadv-view-view .col-main table.data-table tbody td b {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--sr-primary-tint);
  color: var(--sr-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  text-transform: capitalize;
}

/* Tidy product name link */
body.qquoteadv-view-view .col-main table.data-table tbody td h5.title {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
}

body.qquoteadv-view-view .col-main table.data-table tbody td h5.title a {
  color: var(--sr-primary);
  text-decoration: none;
  font-weight: 600;
}

body.qquoteadv-view-view .col-main table.data-table tbody td h5.title a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Back link — "« Back to My Quotes"
   -------------------------------------------------------------------------- */
body.qquoteadv-view-view .col-main .buttons-set {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--acct-border) !important;
  padding: 20px 0 0 !important;
  margin: 24px 0 0 !important;
}

body.qquoteadv-view-view .col-main .buttons-set p.back-link {
  margin: 0 !important;
  padding: 0 !important;
}

body.qquoteadv-view-view .col-main .buttons-set p.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--sr-primary);
  color: var(--sr-primary) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}

body.qquoteadv-view-view .col-main .buttons-set p.back-link a:hover {
  background: var(--sr-primary);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Mobile reflow
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.qquoteadv-view-view .inner_mid_part::before {
    margin: 0 16px 20px;
    padding: 26px 24px;
    font-size: 22px;
    border-radius: 14px;
  }

  body.qquoteadv-view-view .col-main .col2-set.order-info-box {
    grid-template-columns: 1fr;
  }

  /* Allow horizontal scroll on the items table when it has many columns */
  body.qquoteadv-view-view .col-main form#quotelist {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.qquoteadv-view-view .col-main table.data-table {
    min-width: 700px;
  }
}

/* End of Quote Detail page restyle */

/* ==========================================================================
   REQUEST A QUOTE PAGE  ( /qquoteadvstore/index/ )

   HTML structure (from page source):
     .col-main.right-panel
       > #outer_breadcrumb > .page-title > h3  ("Appliance Quote Request")
       > form#quotelist
           > table#shopping-cart-table  (empty by default, rows added by JS)
           > .qquote-client-collaterals
               > .client-data.box  (hidden by default; remark + billing toggle)
               > #qquoteadv_shipping_box  (hidden; billing/shipping address)
           > #place_quotediv > input#submitOrder  (hidden until rows added)
       > .container-quote-faq  (5-question FAQ accordion)

   This page is JS-driven — rows are added to the table via jQuery on the
   ADD QUOTE button click. The JS injects rows with inline styles
   (height:40px;width:250px etc.) which we must override with !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared layout rules — these are duplicates of rules that exist for other
   pages but the bulk-duplicator missed them because they're below the
   "section boundary" comment. Re-declare them here for this page.
   -------------------------------------------------------------------------- */

/* Hide the purple/blue SVG behind the header */
body.qquoteadvstore-index-index .shoprite-main-container .svg-bg {
  display: none !important;
}

/* Neutralise inner_mid_part width constraints */
body.qquoteadvstore-index-index .inner_mid_part {
  width: 100% !important;
  max-width: none !important;
  padding-top: 140px !important;
  padding-bottom: 60px !important;
  background: transparent !important;
}

/* Grid layout for the main container (1fr + 280px sidebar) */
body.qquoteadvstore-index-index .main-container.col2-left-layout {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 28px !important;
  align-items: start !important;
  padding: 0 20px 40px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Hide the mobile slide-out menu (.account-sidebar with #gn-menu2) — same
   approach as the other pages. The visible sidebar comes from .col-left. */
body.qquoteadvstore-index-index .account-sidebar {
  display: none !important;
}

/* Move the original .col-left.sidebar.left-panel to grid column 2 (right) */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}

/* Hide the legacy account logo block inside the sidebar */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .account-logo {
  display: none !important;
}

/* Hide the empty banner block */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block.block-banner {
  display: none !important;
}

/* Style .block.block-account as a modern white card */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block.block-account,
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .static-links .block-account {
  background: var(--acct-card) !important;
  border-radius: var(--acct-radius) !important;
  box-shadow: var(--acct-shadow) !important;
  border: 1px solid var(--acct-border) !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  font-family: var(--acct-font) !important;
  overflow: hidden !important;
}

/* Section titles ("My Account", "My Benefits") */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-title {
  padding: 18px 20px 8px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-title strong {
  font-family: var(--acct-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--acct-muted) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-title strong span {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Nav lists */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content {
  padding: 0 8px 16px !important;
  background: transparent !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul li a {
  display: block !important;
  padding: 10px 12px !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--acct-ink) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul li a:hover {
  background: var(--acct-bg) !important;
  color: var(--acct-ink) !important;
}

/* Active item highlight — "Request a Quote" */
body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul li a[href*="/qquoteadvstore/index"] {
  background: var(--sr-primary) !important;
  color: #fff !important;
}

body.qquoteadvstore-index-index .col-left.sidebar.left-panel .block-account .block-content ul li a[href*="/qquoteadvstore/index"]:hover {
  background: var(--sr-primary-dark, var(--sr-primary)) !important;
  color: #fff !important;
}

/* Main content card */
body.qquoteadvstore-index-index .col-main,
body.qquoteadvstore-index-index .col-main.right-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: var(--acct-card) !important;
  border-radius: var(--acct-radius) !important;
  box-shadow: var(--acct-shadow) !important;
  border: 1px solid var(--acct-border) !important;
  padding: 28px 32px !important;
  font-family: var(--acct-font) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Page background */
body.qquoteadvstore-index-index,
body.qquoteadvstore-index-index #main_page {
  background: var(--acct-bg) !important;
}

/* Add top padding to inner_mid_part to clear the fixed header nav */
body.qquoteadvstore-index-index .inner_mid_part {
  padding-top: 140px !important;
  background: var(--acct-bg) !important;
}

/* Banner — "Request a Quote" */
body.qquoteadvstore-index-index .inner_mid_part::before {
  content: "Request a Quote";
  display: block;
  box-sizing: border-box;
  max-width: 1180px;
  width: calc(100% - 40px);
  margin: 0 auto 24px;
  padding: 38px 40px;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--acct-radius-lg);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Main content card — uses the shared rule applied above. We add
   page-specific tweaks here.
   -------------------------------------------------------------------------- */

/* Hide the legacy stray stylesheet link/loaders inside the col-main */
body.qquoteadvstore-index-index .col-main > link {
  display: none !important;
}

/* Page title "Appliance Quote Request" */
body.qquoteadvstore-index-index .col-main #outer_breadcrumb {
  margin: 0 0 24px;
  padding: 0;
}

body.qquoteadvstore-index-index .col-main #outer_breadcrumb .page-title {
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}

body.qquoteadvstore-index-index .col-main #outer_breadcrumb .page-title h3 {
  font-family: var(--acct-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--acct-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Form container
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main form#quotelist {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* --------------------------------------------------------------------------
   Quote items table — STACKED CARD LAYOUT

   Instead of rendering as a horizontal table (which crams 9 columns into a
   narrow space), each product row becomes a vertical card with labelled
   fields, one per row.

   Implementation:
     - <table>, <thead>, <tbody>, <tr>, <td> all set to display: block
     - <thead> hidden entirely (column headers moved to inline labels via
       ::before on each <td>)
     - Each <tr> becomes a white card with border + spacing
     - Field labels injected via CSS ::before since the HTML has no <label>s
     - Cells are targeted by :nth-child() since they have no class hooks
   -------------------------------------------------------------------------- */

/* Table wrapper — no longer needs to be a table visually */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table,
body.qquoteadvstore-index-index .col-main table.tablefront.data-table.cart-table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--acct-font) !important;
}

/* Hide the column header row entirely */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table thead {
  display: none !important;
}

/* Tbody becomes a stack of cards */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody {
  display: block !important;
  width: 100% !important;
}

/* Empty state: when tbody has no rows, show a placeholder */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody:empty::before {
  content: "Click ‘Add Quote’ below to start adding products to your request.";
  display: block;
  padding: 28px 24px;
  background: var(--acct-bg);
  border: 1px dashed var(--acct-border);
  border-radius: 10px;
  color: var(--acct-muted);
  font-family: var(--acct-font);
  font-size: 14px;
  text-align: center;
  margin: 0 0 12px;
}

/* Each row becomes a card */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr {
  display: block !important;
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 12px !important;
  padding: 20px 22px !important;
  margin: 0 0 14px !important;
  box-shadow: 0 1px 3px rgba(26, 21, 48, 0.04);
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr:last-child {
  margin-bottom: 0 !important;
}

/* Each cell becomes a labelled field block */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  vertical-align: top !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-ink) !important;
  overflow: visible !important;
  position: relative;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:last-child {
  margin-bottom: 0 !important;
}

/* Field labels injected via ::before — one per cell.
   Cell order from JS: 1) image  2) model  3) help  4) price  5) supplier
                       6) comments  7) empty  8) qty  9) remove */

/* td 2: Model Number */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(2)::before {
  content: "Model Number *";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 6px;
}

/* td 4: Best Price */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(4)::before {
  content: "Your Best Price *";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 6px;
}

/* td 5: Supplier */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(5)::before {
  content: "Name of Supplier *";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 6px;
}

/* td 6: Comments */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(6)::before {
  content: "Additional Comments";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 6px;
}

/* td 8: Qty */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(8)::before {
  content: "Quantity *";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 6px;
}

/* td 1: Product Image — show as small thumbnail at the top of the card */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(1) {
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--acct-border) !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(1)::before {
  content: "Product";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-muted);
  margin-bottom: 8px;
}

/* td 3: Help tooltip — positioned inline next to the "PRODUCT" header label
   at the top-left of the card (the "PRODUCT" label is rendered via
   ::before on td:nth-child(1) which sits at the very top of the card). */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(3) {
  position: absolute !important;
  top: 18px !important;
  left: 110px !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important;
}

/* td 7: Empty spacer — hide */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(7) {
  display: none !important;
}

/* td 9: Remove — float to top right of card */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td:nth-child(9) {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 !important;
}

/* Inputs inside the now-stacked cells */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input.input-text,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  color: var(--acct-ink) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input.input-text:hover,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input[type="text"]:hover,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody textarea:hover {
  border-color: #9ca3af !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input.input-text:focus,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input[type="text"]:focus,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody textarea:focus {
  outline: 0 !important;
  border-color: var(--sr-primary) !important;
  box-shadow: 0 0 0 3px var(--sr-primary-tint) !important;
}

/* Qty input — narrower, stays small even when its cell is full width */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input[name^="qtyprod"] {
  width: 90px !important;
  max-width: 90px !important;
  min-width: 90px !important;
  text-align: center !important;
}

/* Price input — limit width but allow it to be wider on this stacked layout */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody input[name^="bestpriceprod"] {
  max-width: 200px !important;
}

/* Textareas (Supplier, Comments) — full width in stacked layout */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 70px !important;
  height: 70px !important;
  padding: 10px 12px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  color: var(--acct-ink) !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

/* Help tooltip "?" — small circle */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acct-bg);
  color: var(--acct-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que::before {
  content: "?";
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que .tip {
  display: none;
  position: absolute;
  /* The "?" is now at top-left of the card. Open tooltip below and to
     the right of the icon (extending rightward into the card space). */
  top: calc(100% + 10px);
  left: -4px;
  right: auto;
  width: 280px;
  max-width: calc(100vw - 40px);
  padding: 12px 14px;
  background: var(--acct-ink);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  z-index: 100;
  box-shadow: 0 10px 28px -6px rgba(26, 21, 48, 0.35);
  white-space: normal;
  pointer-events: none;
}

/* Little arrow/triangle on top of the tooltip pointing up to the "?" */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que .tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  width: 10px;
  height: 10px;
  background: var(--acct-ink);
  transform: rotate(45deg);
  border-radius: 1px;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que:hover .tip {
  display: block;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .help .que .tip p {
  margin: 0;
}

/* Remove item button — text pill in top-right of card.
   Use a different technique: hide the inner <img> AND wrap the whole link
   to use background + text via a different attribute. */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td a.removeitems {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 8px 18px !important;
  width: auto !important;
  min-width: 80px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid #b8bcc7 !important;
  color: var(--acct-muted) !important;
  text-decoration: none !important;
  font-family: var(--acct-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Use text-indent trick: push the (hidden) img content out of view */
  text-indent: 0 !important;
  vertical-align: middle !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td a.removeitems:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* Hide the legacy trash icon image */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td a.removeitems > img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* "Delete" text — via ::before so we don't need to touch the JS.
   Maximum specificity, explicit display, font, and color. */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td a.removeitems::before {
  content: "Delete" !important;
  display: inline-block !important;
  font-family: var(--acct-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}

/* Product image (cell 1) — small thumbnail */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td img,
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td [id^="productxImage_"] img {
  max-width: 72px;
  max-height: 72px;
  border-radius: 6px;
  border: 1px solid var(--acct-border);
}

/* --------------------------------------------------------------------------
   COLLAPSED row state — applied when a new product card is added.

   The .qquote-collapsed class is added by JS to all previous rows. We hide
   every cell except a JS-injected .qquote-row-summary div that shows
   "Model — $Price" as a compact one-liner. The form inputs stay in the DOM
   (just visually hidden) so the data still submits.
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed {
  padding: 14px 22px !important;
  background: var(--acct-bg) !important;
  border: 1px solid var(--acct-border) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: padding .25s ease, background .25s ease, border-color .15s ease;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed:hover {
  background: #fff !important;
  border-color: var(--sr-primary) !important;
}

/* Hide all the cells inside a collapsed row */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed > td {
  display: none !important;
}

/* The summary div — injected by JS at the top of each collapsed row */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed .qquote-row-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  font-family: var(--acct-font);
  font-size: 14px;
  color: var(--acct-ink);
  line-height: 1.4;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed .qquote-row-summary-model {
  font-weight: 600;
  color: var(--acct-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed .qquote-row-summary-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acct-border);
  flex-shrink: 0;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed .qquote-row-summary-price {
  color: var(--sr-primary);
  font-weight: 600;
  flex-shrink: 0;
}

/* "Edit" affordance — a small pencil/edit text after the price */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed .qquote-row-summary::after {
  content: "Edit";
  display: inline-block;
  margin-left: auto;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--acct-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--acct-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr.qquote-collapsed:hover .qquote-row-summary::after {
  background: var(--sr-primary);
  border-color: var(--sr-primary);
  color: #fff;
}

/* The .qquote-row-summary div should ONLY show when its parent has the
   collapsed class. Hide it otherwise (when JS hasn't added it yet, or when
   we expand a row back). */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody tr:not(.qquote-collapsed) .qquote-row-summary {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Footer of the table — contains the ADD QUOTE button (and hidden continue
   shopping button). Since the table is display:block now, tfoot/tr/td
   need to be too.
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot {
  display: block !important;
  width: 100% !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot tr {
  display: block !important;
  width: 100% !important;
}

body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot td {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 16px 0 0 !important;
  text-align: left !important;
}

/* The "Add Quote" button — make it prominent in the union brand colour */
body.qquoteadvstore-index-index .col-main #addmore_prodx,
body.qquoteadvstore-index-index .col-main button.button.btn-continue.addmore {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--sr-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15) !important;
  transition: background .15s, transform .1s !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}

body.qquoteadvstore-index-index .col-main #addmore_prodx span,
body.qquoteadvstore-index-index .col-main button.button.btn-continue.addmore span {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

body.qquoteadvstore-index-index .col-main #addmore_prodx:hover,
body.qquoteadvstore-index-index .col-main button.button.btn-continue.addmore:hover {
  background: var(--sr-primary-dark, var(--sr-primary)) !important;
  transform: translateY(-1px);
}

body.qquoteadvstore-index-index .col-main #addmore_prodx:active,
body.qquoteadvstore-index-index .col-main button.button.btn-continue.addmore:active {
  transform: translateY(0);
}

/* Loading spinner — keep visible but unobtrusive when shown */
body.qquoteadvstore-index-index .col-main #Loading-autocomplete {
  text-align: center;
  padding: 8px;
}

/* --------------------------------------------------------------------------
   Customer collaterals block (remark + use-default-address checkbox)
   Hidden by default; shown when items are added
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main .qquote-client-collaterals {
  margin: 16px 0;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals .client-data.box {
  background: #f9fafb !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  font-family: var(--acct-font);
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals .client-data.box h4 {
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--acct-ink) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-ink) !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  margin: 0 0 16px !important;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals textarea:focus {
  outline: 0 !important;
  border-color: var(--sr-primary) !important;
  box-shadow: 0 0 0 3px var(--sr-primary-tint) !important;
}

/* Checkbox + label for "Use Default Billing and Shipping Address" */
body.qquoteadvstore-index-index .col-main .qquote-client-collaterals fieldset {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals fieldset p {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-ink) !important;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--sr-primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

body.qquoteadvstore-index-index .col-main .qquote-client-collaterals label {
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-ink) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Billing / shipping address forms (shown when checkbox unticked)
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main #billing-new-address-form,
body.qquoteadvstore-index-index .col-main #qquoteadv_shipping_box {
  margin: 12px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: 10px;
}

body.qquoteadvstore-index-index .col-main #qquote-tbl-address td,
body.qquoteadvstore-index-index .col-main #qquote-tbl-billing td,
body.qquoteadvstore-index-index .col-main #qquote-tbl-shipping td {
  font-family: var(--acct-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--acct-muted) !important;
  padding: 6px 8px !important;
  vertical-align: top !important;
  background: transparent !important;
  border: 0 !important;
}

body.qquoteadvstore-index-index .col-main #qquote-tbl-address input[type="text"],
body.qquoteadvstore-index-index .col-main #qquote-tbl-billing input[type="text"],
body.qquoteadvstore-index-index .col-main #qquote-tbl-shipping input[type="text"],
body.qquoteadvstore-index-index .col-main #qquoteadv_shipping_box input[type="text"],
body.qquoteadvstore-index-index .col-main #billing-new-address-form input[type="text"],
body.qquoteadvstore-index-index .col-main #qquoteadv_shipping_box select,
body.qquoteadvstore-index-index .col-main #billing-new-address-form select {
  width: 100% !important;
  max-width: 280px !important;
  height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-ink) !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
  text-transform: none !important;
  margin-top: 4px !important;
}

body.qquoteadvstore-index-index .col-main #qquote-tbl-address input[type="text"]:focus,
body.qquoteadvstore-index-index .col-main #qquote-tbl-billing input[type="text"]:focus,
body.qquoteadvstore-index-index .col-main #qquote-tbl-shipping input[type="text"]:focus,
body.qquoteadvstore-index-index .col-main #qquoteadv_shipping_box input:focus,
body.qquoteadvstore-index-index .col-main #billing-new-address-form input:focus {
  outline: 0 !important;
  border-color: var(--sr-primary) !important;
  box-shadow: 0 0 0 3px var(--sr-primary-tint) !important;
}

body.qquoteadvstore-index-index .col-main .qquote-cart-collaterals .required {
  color: var(--sr-primary) !important;
  font-weight: 600 !important;
}

/* jqTransform compatibility — hide wrappers, show native selects */
body.qquoteadvstore-index-index .col-main .jqTransformSelectWrapper {
  display: none !important;
}

body.qquoteadvstore-index-index .col-main select.jqTransformHidden,
body.qquoteadvstore-index-index .col-main select {
  display: inline-block !important;
  visibility: visible !important;
  position: static !important;
}

/* --------------------------------------------------------------------------
   Submit Quote Request button

   #place_quotediv has inline `style="float:right; display:none;"`. The
   existing JS shows it via $.show() when items are added (changes inline
   style to display:block). We override styling but the inline display
   property controls visibility.

   For right-alignment: when jQuery .show() sets display:block, we use an
   attribute selector to switch the display to flex with justify-content
   flex-end. This only activates when the inline style contains "display:
   block" (i.e. visible). Otherwise the inline display:none keeps it hidden.
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main #place_quotediv {
  margin: 20px 0 24px !important;
  float: none !important;
  clear: both !important;
  text-align: right !important;
  width: 100% !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 50 !important;
}

/* When the container is visible (inline style does NOT contain "none"),
   make it a flex container that pushes the button to the right edge.
   jQuery's .show() removes display:none from the inline style, so the
   selector :not([style*="none"]) matches when the element is shown. */
body.qquoteadvstore-index-index .col-main #place_quotediv:not([style*="none"]) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-direction: row !important;
}

body.qquoteadvstore-index-index .col-main #submitOrder {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--sr-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: var(--acct-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2) !important;
  transition: background .15s, transform .1s !important;
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

/* Ensure the container around the submit button is clickable */
body.qquoteadvstore-index-index .col-main #place_quotediv {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 50 !important;
}

body.qquoteadvstore-index-index .col-main #submitOrder:hover {
  background: var(--sr-primary-dark, var(--sr-primary)) !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   FAQ accordion — collapsible behind a single toggle button

   JS injects a <button class="faq-master-toggle"> as the heading. Clicking
   it adds/removes .open on .faq-master-content (the inner .container).
   We hide .faq-master-content by default and show it when .open is present.

   The inner accordion (individual question buttons) continues to use the
   existing JS that was already on the page — we just wrap it all behind
   one master toggle.
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main .container-quote-faq {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  position: relative;
}

/* The master toggle button (injected by JS) — clean pill button, secondary
   style (not the primary brand colour, since this is a "show more" CTA) */
body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--acct-ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s !important;
  width: auto !important;
  height: auto !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle:hover {
  background: var(--acct-bg) !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle-label {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  background: transparent !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--acct-bg) !important;
  color: var(--acct-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle[aria-expanded="true"] {
  background: var(--acct-bg) !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-toggle[aria-expanded="true"] .faq-master-toggle-icon {
  background: var(--sr-primary-tint) !important;
  color: var(--sr-primary) !important;
}

/* Inner content — hidden by default, shown when .open class is added */
body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-content {
  display: none !important;
  background: transparent !important;
  padding: 16px 0 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .faq-master-content.open {
  display: block !important;
}

/* FAQ question buttons — small, quiet, modern */
body.qquoteadvstore-index-index .col-main .container-quote-faq button.accordion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: #fff !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--acct-ink) !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
  box-shadow: none !important;
  transition: background .15s, border-color .15s;
  position: relative;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq button.accordion::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--acct-bg);
  border-radius: 50%;
  color: var(--acct-muted);
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform .2s, background .15s, color .15s;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq button.accordion:hover {
  background: #f9fafb !important;
  border-color: var(--acct-border) !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq button.accordion.active::after {
  transform: rotate(45deg);
  background: var(--sr-primary-tint);
  color: var(--sr-primary);
}

/* FAQ answer panels */
body.qquoteadvstore-index-index .col-main .container-quote-faq .panel {
  background: var(--acct-bg) !important;
  border-radius: 8px !important;
  margin: -4px 0 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .panel .content {
  padding: 12px 0 !important;
}

body.qquoteadvstore-index-index .col-main .container-quote-faq .panel p {
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--acct-ink) !important;
  margin: 0 !important;
}

/* Hide the leftover .quote-page empty block */
body.qquoteadvstore-index-index .col-main .quote-page {
  display: none !important;
}

/* Make absolutely sure .quote-page can't overlap anything */
body.qquoteadvstore-index-index .col-main .quote-page,
body.qquoteadvstore-index-index .col-main .quote-page * {
  pointer-events: none !important;
}

/* Hide the lightbox modal (#lightbox1) when it's not active */
body.qquoteadvstore-index-index .col-main #lightbox1 {
  display: none;
}

/* End of Request a Quote page restyle */

/* ==========================================================================
   MY ADDRESS PAGE  ( /customer/address/ )

   HTML structure (from page source):
     .col-main.right-panel > .my-account
       > .sr-union-banner (rich banner with logo + "Welcome back" + member#)
       > .page-title.title-buttons (empty in current state)
       > .col2-set.addresses-list
         > .col-1.addresses-primary > ol
             > li.item (Address)
             > li.item (Default Address)
         > .col-2.addresses-additional (Additional Address Entries)
       > .buttons-set > .back-link

   The .sr-union-banner is rendered by the backend with inline styles for
   background-color and background-image. We respect those and add visual
   polish (rounded corners, sizing, layout).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared layout rules — match other pages
   -------------------------------------------------------------------------- */
body.customer-address-index .shoprite-main-container .svg-bg {
  display: none !important;
}

body.customer-address-index .inner_mid_part {
  width: 100% !important;
  max-width: none !important;
  padding-top: 140px !important;
  padding-bottom: 60px !important;
  background: transparent !important;
}

body.customer-address-index .main-container.col2-left-layout {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 28px !important;
  align-items: start !important;
  padding: 0 20px 40px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Hide mobile slide-out menu, use the visible col-left sidebar */
body.customer-address-index .account-sidebar {
  display: none !important;
}

/* Move col-left sidebar to grid column 2 (right) */
body.customer-address-index .col-left.sidebar.left-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}

body.customer-address-index .col-left.sidebar.left-panel .account-logo {
  display: none !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block.block-banner {
  display: none !important;
}

/* Style sidebar blocks as modern white card */
body.customer-address-index .col-left.sidebar.left-panel .block.block-account,
body.customer-address-index .col-left.sidebar.left-panel .static-links .block-account {
  background: var(--acct-card) !important;
  border-radius: var(--acct-radius) !important;
  box-shadow: var(--acct-shadow) !important;
  border: 1px solid var(--acct-border) !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  font-family: var(--acct-font) !important;
  overflow: hidden !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-title {
  padding: 18px 20px 8px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-title strong {
  font-family: var(--acct-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--acct-muted) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-title strong span {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content {
  padding: 0 8px 16px !important;
  background: transparent !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul li a {
  display: block !important;
  padding: 10px 12px !important;
  font-family: var(--acct-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--acct-ink) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul li a:hover {
  background: var(--acct-bg) !important;
  color: var(--acct-ink) !important;
}

/* Active item highlight — "My Address" */
body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul li a[href*="/customer/address"] {
  background: var(--sr-primary) !important;
  color: #fff !important;
}

body.customer-address-index .col-left.sidebar.left-panel .block-account .block-content ul li a[href*="/customer/address"]:hover {
  background: var(--sr-primary-dark, var(--sr-primary)) !important;
  color: #fff !important;
}

/* Main content card */
body.customer-address-index .col-main,
body.customer-address-index .col-main.right-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--acct-font) !important;
  box-sizing: border-box !important;
}

/* Page background */
body.customer-address-index,
body.customer-address-index #main_page {
  background: var(--acct-bg) !important;
}

/* --------------------------------------------------------------------------
   Wrapper for the my-account content
   -------------------------------------------------------------------------- */
body.customer-address-index .col-main .my-account {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-family: var(--acct-font) !important;
}

/* --------------------------------------------------------------------------
   Banner — match the simple text-banner pattern used on other account
   pages (Quote History, Account Info, Quote Detail, Request a Quote).
   The backend-rendered .sr-union-banner is hidden in favour of a clean
   pseudo-element "My Address" banner injected before .inner_mid_part
   contents.
   -------------------------------------------------------------------------- */
body.customer-address-index .col-main .sr-union-banner {
  display: none !important;
}

body.customer-address-index .inner_mid_part::before {
  content: "My Address";
  display: block;
  max-width: 1180px;
  margin: 0 auto 24px;
  padding: 38px 40px;
  background: var(--sr-primary);
  color: #fff;
  font-family: var(--acct-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--acct-radius-lg);
  box-shadow: var(--acct-shadow);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Empty .page-title (used to hold "Add New Address" button which is
   commented out in the source) — hide
   -------------------------------------------------------------------------- */
body.customer-address-index .col-main .page-title.title-buttons {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Addresses list — 2-column grid for the two address cards, with the
   "Additional Address Entries" section spanning full width below
   -------------------------------------------------------------------------- */
body.customer-address-index .col-main .col2-set.addresses-list {
  background: var(--acct-card) !important;
  border-radius: var(--acct-radius) !important;
  box-shadow: var(--acct-shadow) !important;
  border: 1px solid var(--acct-border) !important;
  padding: 32px !important;
  margin: 0 !important;
  font-family: var(--acct-font) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

/* Each .col-1 contains the primary addresses list (could have 1-2 items).
   Use display:contents so the <ol> and <li> children become direct grid
   cells of the parent .col2-set.addresses-list grid. */
body.customer-address-index .col-main .col2-set.addresses-list .col-1.addresses-primary {
  display: contents !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

body.customer-address-index .col-main .col2-set.addresses-list .col-1.addresses-primary ol {
  display: contents !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Each address item becomes a full-width grid cell */
body.customer-address-index .col-main .col2-set.addresses-list li.item {
  background: #f9fafb !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 12px !important;
  padding: 28px 32px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Hide the legacy icon image — replace with a CSS-drawn icon */
body.customer-address-index .col-main .col2-set.addresses-list li.item .icon img,
body.customer-address-index .col-main .col2-set.addresses-list .col-2 .icon img {
  display: none !important;
}

body.customer-address-index .col-main .col2-set.addresses-list .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--sr-primary-tint) !important;
  color: var(--sr-primary) !important;
  margin: 0 0 16px !important;
  position: relative !important;
}

/* CSS-drawn pin icon */
body.customer-address-index .col-main .col2-set.addresses-list .icon::before {
  content: "";
  width: 18px;
  height: 22px;
  background: var(--sr-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") no-repeat center;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") no-repeat center;
}

/* Card headings */
body.customer-address-index .col-main .col2-set.addresses-list h3 {
  font-family: var(--acct-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--acct-ink) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.customer-address-index .col-main .col2-set.addresses-list h2 {
  font-family: var(--acct-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--acct-ink) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.customer-address-index .col-main .col2-set.addresses-list address {
  font-family: var(--acct-font) !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--acct-ink) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center;
}

/* "Change Address" link → branded pill button */
body.customer-address-index .col-main .col2-set.addresses-list li.item p {
  margin: 0 !important;
  padding: 0 !important;
}

body.customer-address-index .col-main .col2-set.addresses-list li.item p a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--sr-primary) !important;
  color: var(--sr-primary) !important;
  text-decoration: none !important;
  font-family: var(--acct-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: background .15s, color .15s !important;
  white-space: nowrap !important;
}

body.customer-address-index .col-main .col2-set.addresses-list li.item p a:hover {
  background: var(--sr-primary) !important;
  color: #fff !important;
}

/* Additional Address Entries card — hidden (always empty for this user base) */
body.customer-address-index .col-main .col2-set.addresses-list .col-2.addresses-additional {
  display: none !important;
}

body.customer-address-index .col-main .col2-set.addresses-list .col-2 ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

body.customer-address-index .col-main .col2-set.addresses-list .col-2 li.item.empty {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
}

body.customer-address-index .col-main .col2-set.addresses-list .col-2 li.item.empty p {
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  color: var(--acct-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Buttons-set at the bottom — "Back" link
   -------------------------------------------------------------------------- */
body.customer-address-index .col-main .col2-set.addresses-list .buttons-set {
  grid-column: 1 / -1 !important;
  margin: 12px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--acct-border) !important;
  text-align: left !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

body.customer-address-index .col-main .buttons-set .back-link {
  margin: 0 !important;
  padding: 0 !important;
}

body.customer-address-index .col-main .buttons-set .back-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--sr-primary) !important;
  color: var(--sr-primary) !important;
  text-decoration: none !important;
  font-family: var(--acct-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background .15s, color .15s !important;
}

body.customer-address-index .col-main .buttons-set .back-link a:hover {
  background: var(--sr-primary) !important;
  color: #fff !important;
}

body.customer-address-index .col-main .buttons-set .back-link a small {
  font-size: inherit !important;
}

/* End of My Address page restyle */

/* ==========================================================================
   QUOTE SUCCESS PAGE  ( /qquoteadv/index/success/ )

   Layout: col1-layout (no sidebar — different from account pages).
   We synthesize a layout that matches other account pages: page banner
   on top (via .main-container::before), then a single centered card
   containing the success state.

   HTML structure:
     .main-container.col1-layout > #outer_mid_inner > .col-main.mid_inner
       > .page-title > h1
       > .sucess-box (typo from backend) > h2/h3/h3/.grey-strip
       > .buttons-set > button.button ("Continue")
   ========================================================================== */

/* Page background */
body.qquoteadv-index-success,
body.qquoteadv-index-success #main_page {
  background: var(--acct-bg) !important;
}

/* Keep the SVG gradient background behind the header (don't hide it like
   we do on other account pages) — the SHOPRITE logo is white and needs
   the dark gradient backdrop to be visible. */

/* Outer wrapper */
body.qquoteadv-index-success .main-container.col1-layout {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 150px 20px 60px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  display: block !important;
  float: none !important;
}

body.qquoteadv-index-success #outer_mid_inner {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
  float: none !important;
}

/* Main content card — centered with max width */
body.qquoteadv-index-success .col-main.mid_inner {
  background: var(--acct-card) !important;
  border-radius: var(--acct-radius-lg) !important;
  box-shadow: var(--acct-shadow) !important;
  border: 1px solid var(--acct-border) !important;
  padding: 56px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 680px !important;
  float: none !important;
  font-family: var(--acct-font) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: block !important;
}

/* Green checkmark icon at top */
body.qquoteadv-index-success .col-main.mid_inner::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.08);
}

/* Title — "Hi {Name} / Your quote has been created" */
body.qquoteadv-index-success .col-main.mid_inner .page-title {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  text-align: center !important;
}

body.qquoteadv-index-success .col-main.mid_inner .page-title h1 {
  font-family: var(--acct-font) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--acct-ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
}

/* Info card — "Call us for the result", date, quote number */
/* --------------------------------------------------------------------------
   .sucess-box — content rewritten by JS. Original date/h2/h3 markup is
   replaced with the .qsucc-quote-block + .qsucc-next two-card explainer.
   The .sucess-box element itself is now just a transparent wrapper.
   -------------------------------------------------------------------------- */
body.qquoteadv-index-success .col-main.mid_inner .sucess-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* If for some reason the JS hasn't run yet, hide the raw legacy content
   so users don't see the misleading "Call us / After 11am" copy flash. */
body.qquoteadv-index-success .col-main.mid_inner .sucess-box > h2,
body.qquoteadv-index-success .col-main.mid_inner .sucess-box > h3:not(.qsucc-quote-label),
body.qquoteadv-index-success .col-main.mid_inner .sucess-box > .grey-strip {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Quote number hero block
   -------------------------------------------------------------------------- */
body.qquoteadv-index-success .qsucc-quote-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 24px;
  background: var(--sr-primary-tint, rgba(26, 21, 48, 0.04));
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius);
  margin: 0 0 32px;
}

body.qquoteadv-index-success .qsucc-quote-label {
  font-family: var(--acct-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acct-muted);
  margin: 0;
}

body.qquoteadv-index-success .qsucc-quote-number {
  font-family: var(--acct-font);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sr-primary);
  text-decoration: none;
  line-height: 1;
  margin: 4px 0 0;
}

body.qquoteadv-index-success .qsucc-quote-number:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   "Here's what happens next" — section heading + 2 cards
   -------------------------------------------------------------------------- */
body.qquoteadv-index-success .qsucc-next {
  margin: 0;
}

body.qquoteadv-index-success .qsucc-next-heading {
  font-family: var(--acct-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--acct-ink);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

body.qquoteadv-index-success .qsucc-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.qquoteadv-index-success .qsucc-next-card {
  background: #f9fafb;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* Card icons — circular brand-tinted backdrop + SVG glyph */
body.qquoteadv-index-success .qsucc-next-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sr-primary-tint, rgba(26, 21, 48, 0.06));
  position: relative;
  margin-bottom: 4px;
}

body.qquoteadv-index-success .qsucc-next-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sr-primary);
  -webkit-mask-size: 24px 24px;
          mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Text message bubble icon */
body.qquoteadv-index-success .qsucc-next-icon--text::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h10v2H7V9zm6 5H7v-2h6v2zm4-6H7V6h10v2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h10v2H7V9zm6 5H7v-2h6v2zm4-6H7V6h10v2z'/></svg>");
}

/* Phone call icon */
body.qquoteadv-index-success .qsucc-next-icon--call::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.25 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.25 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
}

body.qquoteadv-index-success .qsucc-next-title {
  font-family: var(--acct-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--acct-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

body.qquoteadv-index-success .qsucc-next-body {
  font-family: var(--acct-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--acct-muted);
  margin: 0;
  line-height: 1.5;
}

/* Responsive: stack the two cards on narrow viewports */
@media (max-width: 560px) {
  body.qquoteadv-index-success .qsucc-next-grid {
    grid-template-columns: 1fr;
  }
}

/* Continue button — visible, centered, branded */
body.qquoteadv-index-success .col-main.mid_inner .buttons-set {
  margin: 32px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
}

body.qquoteadv-index-success .col-main.mid_inner .buttons-set button.button,
body.qquoteadv-index-success .col-main.mid_inner .buttons-set button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  background: var(--sr-primary) !important;
  border: 1px solid var(--sr-primary) !important;
  color: #fff !important;
  font-family: var(--acct-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, transform .1s !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  float: none !important;
  margin: 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

body.qquoteadv-index-success .col-main.mid_inner .buttons-set button.button:hover,
body.qquoteadv-index-success .col-main.mid_inner .buttons-set button:hover {
  background: var(--sr-primary-dark, var(--sr-primary)) !important;
  border-color: var(--sr-primary-dark, var(--sr-primary)) !important;
  filter: brightness(0.92);
}

body.qquoteadv-index-success .col-main.mid_inner .buttons-set button.button span,
body.qquoteadv-index-success .col-main.mid_inner .buttons-set button span {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  font: inherit !important;
  /* Make the label a flex item with normalized line-height so it sits dead
     center vertically (theme line-height/baseline was pushing it up). */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: auto !important;
  font-family: var(--acct-font) !important;
  font-weight: 700 !important;
}

/* End of Quote Success page restyle */

/* --------------------------------------------------------------------------
   FOUC: hide misc legacy page elements that appear briefly during load
   on the Request a Quote page (h1 "Request an Electrical Enquiry",
   "No Items" placeholder, "Click..." help text).
   -------------------------------------------------------------------------- */
body.qquoteadvstore-index-index .col-main > h1,
body.qquoteadvstore-index-index .col-main > h2,
body.qquoteadvstore-index-index .col-main .page-title h1,
body.qquoteadvstore-index-index .col-main .page-title h2,
body.qquoteadvstore-index-index .col-main #empty-cart-info,
body.qquoteadvstore-index-index .col-main .empty-info-quote,
body.qquoteadvstore-index-index .col-main .no-items,
body.qquoteadvstore-index-index .col-main .quote-empty,
body.qquoteadvstore-index-index .col-main p.empty,
body.qquoteadvstore-index-index .col-main .cart-empty {
  display: none !important;
}

/* ==========================================================================
   ACCOUNT DASHBOARD ( /customer/account/ )

   QR code injected into the .sr-side-app card by head.phtml JS. We style
   it here so it sits cleanly between the eyebrow badge and the heading.
   ========================================================================== */
body.customer-account-index .sr-side-app .sr-app-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(26, 21, 48, 0.08);
}

body.customer-account-index .sr-side-app .sr-app-qr img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}

body.customer-account-index .sr-side-app .sr-app-qr-caption {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #6b6580;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
}

/* End of Account Dashboard page restyle */

/* ==========================================================================
   HEADER LOGO (applies to ALL pages, not just restyled account pages)
   The header.phtml uses an SVG logo. We constrain its display size here
   so it renders at consistent dimensions across the site regardless of
   its intrinsic SVG viewBox.
   ========================================================================== */
.shoprite-container .logo img {
  max-width: 330px;
  width: auto;
  height: auto;
  max-height: 66px;
  display: block;
}

/* ==========================================================================
   LOGIN PAGE — /customer/account/login/
   body.customer-account-login
   
   Layout: centered two-card grid on light background, no banner.
   - Sign In card on the LEFT (primary action, brand purple button)
   - Register card on the RIGHT (secondary, outlined button)
   
   The page also contains a hidden #loginPopupDiv (popup login fallback)
   and a #dullDiv overlay — both stay hidden via the existing main.css
   rules; we don't need to touch those.
   ========================================================================== */

/* ---- Page-level: clean background, kill old layout cruft ---- */
body.customer-account-login {
  background: #f4f5f8 !important;
}

/* Hide the header's Login + Register buttons when already on the login page
   (the page itself already presents both as primary actions, so the header
   buttons are redundant). */
body.customer-account-login .join-buttons li.login,
body.customer-account-login .join-buttons li.register {
  display: none !important;
}

/* The header has its dark gradient banner. The page content below should
   sit on the light grey background with proper spacing. */
body.customer-account-login .main-container.col1-layout,
body.customer-account-login #outer_mid_inner,
body.customer-account-login .col-main.mid_inner {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---- Page title (replaces the grey breadcrumb strip) ---- */
body.customer-account-login #outer_breadcrumb {
  background: transparent !important;
  padding: 32px 20px 8px !important;
  margin: 0 !important;
}

body.customer-account-login #outer_breadcrumb .breadcrumb {
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: center;
}

body.customer-account-login #outer_breadcrumb h1 {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #6b6580 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* ---- Hide the legacy popup login + overlay (they're not needed on this page) ---- */
body.customer-account-login #dullDiv,
body.customer-account-login #loginPopupDiv {
  display: none !important;
}

/* ---- Flash messages (success / error / notice after redirects) ----
   Magento's default styling positions these as a thin overlapping bar.
   We make them a proper inline banner above the card grid. */
body.customer-account-login .messages,
body.customer-account-login ul.messages,
body.customer-account-login .messages1,
body.customer-account-login ul.messages1,
body.customer-account-login .col-main .messages,
body.customer-account-login .col-main ul.messages {
  position: static !important;
  float: none !important;
  display: block !important;
  max-width: 1100px !important;
  width: auto !important;
  margin: 0 auto 16px !important;
  padding: 0 20px !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.customer-account-login .messages li,
body.customer-account-login ul.messages li,
body.customer-account-login .messages1 li,
body.customer-account-login ul.messages1 li {
  list-style: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.customer-account-login .messages li ul,
body.customer-account-login ul.messages li ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.customer-account-login .messages .success-msg,
body.customer-account-login ul.messages .success-msg,
body.customer-account-login .success-msg {
  background: #e8f5ed !important;
  border: 1px solid #b8e0c3 !important;
  border-left: 4px solid #2f9e4d !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #1f6d36 !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  list-style: none !important;
  box-shadow: 0 2px 6px -2px rgba(31, 109, 54, 0.15) !important;
}

body.customer-account-login .messages .error-msg,
body.customer-account-login ul.messages .error-msg,
body.customer-account-login .error-msg {
  background: #fdecec !important;
  border: 1px solid #f5b8b8 !important;
  border-left: 4px solid #d63838 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #a31f1f !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  list-style: none !important;
  box-shadow: 0 2px 6px -2px rgba(163, 31, 31, 0.15) !important;
}

body.customer-account-login .messages .notice-msg,
body.customer-account-login ul.messages .notice-msg,
body.customer-account-login .notice-msg {
  background: #fff7e6 !important;
  border: 1px solid #f3d9a4 !important;
  border-left: 4px solid #d39022 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #7a4d0d !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  list-style: none !important;
  box-shadow: 0 2px 6px -2px rgba(122, 77, 13, 0.15) !important;
}

/* Hide the small icon images Magento inserts before the message text */
body.customer-account-login .messages li img,
body.customer-account-login ul.messages li img {
  display: none !important;
}

/* ---- Two-card grid container ---- */
body.customer-account-login .mid-account {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 24px auto 60px !important;
  padding: 0 20px !important;
  align-items: stretch;
  width: 100% !important;
  box-sizing: border-box;
  float: none !important;
}

/* Visual swap: Register card (no .pro-login) on LEFT, Sign In (.pro-login) on RIGHT.
   DOM order is Sign In first, Register second — we flip via grid order. */
body.customer-account-login .mid-account .account-login.pro-login {
  order: 2;
}
body.customer-account-login .mid-account .account-login:not(.pro-login) {
  order: 1;
}

/* Make each card a flex column so we can push the action button to the bottom */
body.customer-account-login .account-login {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Register card: the "Click Here to Register" button-set sits at the bottom
   (was floating outside the card before — this contains it cleanly). */
body.customer-account-login .account-login:not(.pro-login) .buttons-set {
  margin-top: auto !important;
}

/* Reset old float-based layout from styles.css */
body.customer-account-login .mid-account::before,
body.customer-account-login .mid-account::after {
  display: none !important;
}

/* ---- Both cards: shared styles ---- */
body.customer-account-login .account-login {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26, 21, 48, 0.06) !important;
  box-shadow: 0 4px 18px -8px rgba(26, 21, 48, 0.1) !important;
  padding: 36px !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
}

/* ---- Card headings ---- */
body.customer-account-login .account-login h2,
body.customer-account-login .account-login .legend {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #1a1530 !important;
  margin: 0 0 20px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(26, 21, 48, 0.08) !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* ---- Form list reset ---- */
/* The Sign In form is nested in legacy Magento .fieldset > .col2-set >
   .col-1.registered-users, which the old theme floats to ~48% width
   (it's built to hold two side-by-side columns). There's no .col-2 here,
   so that half-width just caps the inputs at half the card. Reset the
   whole chain to full width so inputs span the card. */
body.customer-account-login .account-login .fieldset,
body.customer-account-login .account-login .col2-set,
body.customer-account-login .account-login .col-1,
body.customer-account-login .account-login .col-1.registered-users,
body.customer-account-login .account-login .min-col {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.customer-account-login .account-login .form-list,
body.customer-account-login .account-login .min-col {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.customer-account-login .account-login .form-list {
  display: block !important;
}

body.customer-account-login .account-login .form-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

/* Defeat the phantom checkmark::before that we added to .min-col ul li
   (which is meant for the Register card's benefit list only). The
   Sign In form-list lives inside .min-col too, so we have to neutralise. */
body.customer-account-login .account-login .form-list li::before,
body.customer-account-login .account-login.pro-login .min-col ul li::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.customer-account-login .account-login .form-list li::after {
  content: '';
  display: block;
  clear: both;
}

/* ---- Labels ---- */
body.customer-account-login .account-login label,
body.customer-account-login .account-login .form-list li label {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a4360 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* The <em>*</em> is the first child of <label>, before the text node.
   We want it to appear AFTER the label text — push it to the end via flex order. */
body.customer-account-login .account-login label em,
body.customer-account-login .account-login .form-list li label em,
body.customer-account-login .account-login label.required em {
  color: #c91f1a !important;
  font-style: normal !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  float: none !important;
  display: inline !important;
  position: static !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  order: 2 !important;
}

/* ---- Inputs ---- */
/* jqTransform wraps each native input in .jqTransformInputWrapper /
   .jqTransformInputInner divs and sets an inline fixed width (e.g.
   style="width:396px") on the wrapper. Our input is width:100% — but
   100% of that fixed wrapper, so it's stuck at half the card. Force the
   wrappers to full width so the input fills the card. The inline style
   is beaten by !important here. */
body.customer-account-login .account-login .jqTransformInputWrapper,
body.customer-account-login .account-login .jqTransformInputInner,
body.customer-account-login .account-login .jqTransformInputInner div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.customer-account-login .account-login .input-box {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

body.customer-account-login .account-login input.input-text,
body.customer-account-login .account-login .form-list li input.input-text {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  width: 350px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a1530 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
}

body.customer-account-login .account-login input.input-text:focus {
  outline: none !important;
  border-color: #7330b3 !important;
  box-shadow: 0 0 0 3px rgba(115, 48, 179, 0.12) !important;
}

body.customer-account-login .account-login input.input-text::placeholder {
  color: #9aa0a6;
}

/* ---- Forgot password link ---- */
body.customer-account-login .forgotpassword,
body.customer-account-login .account-login .forgotpassword {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  position: static !important;
}

body.customer-account-login .forgotpassword a,
body.customer-account-login .account-login .forgotpassword a {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #7330b3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.005em !important;
  display: inline-block !important;
}

body.customer-account-login .forgotpassword a:hover,
body.customer-account-login .account-login .forgotpassword a:hover {
  color: #5a2390 !important;
  text-decoration: underline !important;
}

/* ---- Buttons-set wrapper ---- */
body.customer-account-login .account-login .buttons-set {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100% !important;
}

/* Zero out any inherited left margin/padding on the buttons themselves
   so the Click Here to Register button sits flush against the card's
   inner padding edge. The Sign In (.pro-login) button gets a 28px left
   margin (set in its main rule below) to line up with the Email/Password
   input boxes above it (the inputs sit 28px further right than the card edge). */
body.customer-account-login .account-login .buttons-set button.button {
  margin-right: 0 !important;
}

/* Register card (NOT pro-login) button stays flush at the card edge. */
body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button {
  margin-left: 0 !important;
}

/* Align the Sign In button with the input boxes above it. The inputs sit
   28px in from the card edge (form-list inset), but .buttons-set starts
   flush at the card padding edge — so nudge the primary button 28px right. */
body.customer-account-login .account-login.pro-login .buttons-set button.button {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  background: linear-gradient(135deg, #7330b3 0%, #5a2390 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 12px -4px rgba(115, 48, 179, 0.35) !important;
  min-width: 120px;
  position: relative !important;
  overflow: hidden !important;
  margin-left: 28px !important;
}

body.customer-account-login .account-login.pro-login .buttons-set button.button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px -6px rgba(115, 48, 179, 0.45) !important;
}

/* Press-down effect: clicked button visually depresses */
body.customer-account-login .account-login.pro-login .buttons-set button.button:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 6px -2px rgba(115, 48, 179, 0.45) !important;
  transition: transform 0.05s, box-shadow 0.05s !important;
}

/* Loading state: spinner replaces label, button disabled-looking */
body.customer-account-login .account-login.pro-login .buttons-set button.button.is-loading {
  pointer-events: none !important;
  cursor: wait !important;
  opacity: 0.85 !important;
  transform: none !important;
  padding-left: 44px !important;
}

body.customer-account-login .account-login.pro-login .buttons-set button.button.is-loading::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: sr-spin 0.7s linear infinite;
}

@keyframes sr-spin {
  to { transform: rotate(360deg); }
}

body.customer-account-login .account-login.pro-login .buttons-set button.button span,
body.customer-account-login .account-login.pro-login .buttons-set button.button span span {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}

/* ---- SECONDARY BUTTON (Register card) ---- */
body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  background: #ffffff !important;
  color: #7330b3 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 11px 26px !important;
  border: 1.5px solid #7330b3 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button:hover {
  background: #faf6fd !important;
  border-color: #5a2390 !important;
  color: #5a2390 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px -6px rgba(115, 48, 179, 0.3) !important;
}

body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button span,
body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button span span {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}

/* ---- Register card: benefit list styling ---- */
body.customer-account-login .account-login .min-col p {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #4a4360 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
}

body.customer-account-login .account-login .min-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}

body.customer-account-login .account-login .min-col ul li {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #1a1530 !important;
  line-height: 1.5 !important;
  padding: 8px 0 8px 28px !important;
  margin: 0 !important;
  position: relative !important;
  list-style: none !important;
  border-bottom: 1px solid rgba(26, 21, 48, 0.05);
}

body.customer-account-login .account-login .min-col ul li:last-child {
  border-bottom: none;
}

/* Custom checkmark bullet — Register card benefit list ONLY (not the Sign In form-list) */
body.customer-account-login .account-login:not(.pro-login) .min-col ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(115, 48, 179, 0.1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237330b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

body.customer-account-login .account-login .min-col ul li a {
  color: #7330b3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.customer-account-login .account-login .min-col ul li a:hover {
  text-decoration: underline !important;
}

/* ---- Field set / col2-set / col-1: reset to plain divs ---- */
body.customer-account-login .account-login .fieldset,
body.customer-account-login .account-login .col2-set,
body.customer-account-login .account-login .col-1,
body.customer-account-login .account-login .registered-users {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-shadow: none !important;
}

/* ---- Responsive: stack cards on mobile ---- */
@media (max-width: 768px) {
  body.customer-account-login .mid-account {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 0 16px !important;
    margin: 16px auto 40px !important;
  }
  body.customer-account-login .account-login {
    padding: 26px !important;
  }
  body.customer-account-login #outer_breadcrumb {
    padding: 24px 16px 8px !important;
  }
  body.customer-account-login #outer_breadcrumb h1 {
    font-size: 22px !important;
  }
}

/* ---- "Forgot which email?" helper block (injected by JS into Sign In card) ---- */
body.customer-account-login .login-help-block {
  margin: auto 0 0 !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid rgba(26, 21, 48, 0.08);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

body.customer-account-login .account-login.pro-login .login-help-block {
  margin-top: 28px !important;
}

body.customer-account-login .login-help-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1a1530;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.35;
}

body.customer-account-login .login-help-text {
  font-size: 13.5px;
  color: #6b6580;
  line-height: 1.55;
  margin: 0 0 12px;
}

body.customer-account-login .login-help-link {
  font-size: 13px;
  font-weight: 600;
  color: #7330b3 !important;
  text-decoration: none !important;
  letter-spacing: 0.005em;
  display: inline-block;
  transition: color 0.15s;
}

body.customer-account-login .login-help-link:hover {
  color: #5a2390 !important;
  text-decoration: underline !important;
}

/* End of Login page restyle */

/* ==========================================================================
   REGISTER PAGE — /customer/account/create/
   body.customer-account-create
   
   Modernise typography and inputs, keep the existing section structure
   (Member Information → Home Address → Create a Password → Captcha →
   Terms → Submit). Single full-width card on light grey background, no
   banner. Side-by-side label-input layout.
   ========================================================================== */

/* ---- Page-level: clean background + hide redundant header buttons ---- */
body.customer-account-create {
  background: #f4f5f8 !important;
}

body.customer-account-create .join-buttons li.login,
body.customer-account-create .join-buttons li.register {
  display: none !important;
}

/* ---- Container resets ---- */
body.customer-account-create .main-container.col1-layout,
body.customer-account-create #outer_mid_inner,
body.customer-account-create .col-main.mid_inner {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---- Hide the popup login overlay (not used on this page) ---- */
body.customer-account-create #dullDiv,
body.customer-account-create #loginPopupDiv {
  display: none !important;
}

/* ---- Page heading (replaces the grey breadcrumb strip) ---- */
body.customer-account-create #outer_breadcrumb {
  background: transparent !important;
  padding: 32px 20px 8px !important;
  margin: 0 !important;
  border: none !important;
  background-image: none !important;
}

body.customer-account-create #outer_breadcrumb .breadcrumb {
  max-width: 880px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: center;
}

body.customer-account-create #outer_breadcrumb h1 {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #6b6580 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Hide the home > membership registration breadcrumb trail (the eyebrow heading
   already says where you are). */
body.customer-account-create #outer_breadcrumb ul {
  display: none !important;
}

/* ---- The form card ---- */
body.customer-account-create .inner_mid_part {
  max-width: 880px !important;
  margin: 16px auto 60px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  float: none !important;
  width: 100% !important;
}

body.customer-account-create .personal-details {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26, 21, 48, 0.06) !important;
  box-shadow: 0 4px 18px -8px rgba(26, 21, 48, 0.1) !important;
  padding: 40px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  float: none !important;
  overflow: hidden !important;
}

/* Clearfix: the form contains floated rows in some browsers; ensure the
   card grows to contain them so it doesn't overlap the footer below. */
body.customer-account-create .personal-details::after,
body.customer-account-create form#form-validate::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

body.customer-account-create form#form-validate {
  overflow: visible !important;
}

/* Ensure the footer always sits below the card with clear separation. */
body.customer-account-create .shipping_wrap,
body.customer-account-create .full-footer,
body.customer-account-create #outer_footer {
  clear: both !important;
  position: relative !important;
}

/* ---- Section headings ("Member Information" etc.) ---- */
body.customer-account-create .personal-details-heading {
  background: transparent !important;
  border: none !important;
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(26, 21, 48, 0.08) !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
}

body.customer-account-create .personal-details-heading h4 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #1a1530 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/* "* Indicates required field" inside h4 */
body.customer-account-create .personal-details-heading h4 > span {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6b6580 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.customer-account-create .personal-details-heading h4 > span > span {
  color: #c91f1a !important;
  margin-right: 2px !important;
}

/* Add top spacing for later section headings (after the first) */
body.customer-account-create .personal-details > .personal-details-heading + .personal-details-heading,
body.customer-account-create form > .personal-details-heading,
body.customer-account-create div.form-row + .personal-details-heading,
body.customer-account-create div + div .personal-details-heading {
  margin-top: 32px !important;
}

/* Intro paragraph under the first heading */
body.customer-account-create .personal-details > p.note,
body.customer-account-create .personal-details > p {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #6b6580 !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ---- Form row: side-by-side label + input grid ---- */
body.customer-account-create form#form-validate {
  margin: 0 !important;
  padding: 0 !important;
}

body.customer-account-create .form-row {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 16px 24px;
  align-items: center;
  margin: 0 0 16px !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

/* CRITICAL: respect inline style="display:none" on hidden rows (Country row).
   Our !important grid would otherwise override the hide. */
body.customer-account-create .form-row[style*="display: none"],
body.customer-account-create .form-row[style*="display:none"] {
  display: none !important;
}

/* Empty form rows (placeholders, hidden fields) take no space */
body.customer-account-create .form-row:empty {
  display: none !important;
}

/* Form rows that contain ONLY an .input-box (no <label>) — e.g. the
   Membership Number row. These should span both grid columns so the
   input doesn't sit alone in the label column. */
body.customer-account-create .form-row > .input-box.membership_number,
body.customer-account-create .form-row > .input-box:only-child {
  grid-column: 1 / -1 !important;
}

/* Membership Number row: make it visually match the Union/Organisation
   row above — 200px label column on the left, 534px input on the right.
   We use a ::before pseudo-element to draw the missing "Membership Number"
   label since the HTML row has no <label> element. */
body.customer-account-create .form-row:has(.input-box.membership_number),
body.customer-account-create .form-row > .input-box.membership_number {
  position: relative !important;
}

body.customer-account-create .form-row .input-box.membership_number,
body.customer-account-create .form-row > .input-box.membership_number,
body.customer-account-create div.input-box.membership_number {
  position: static !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 0 0 224px !important;
  width: 267px !important;
  max-width: 267px !important;
  min-width: 267px !important;
  display: block !important;
}

body.customer-account-create .form-row .input-box.membership_number input,
body.customer-account-create .form-row .input-box.membership_number input.input-text,
body.customer-account-create .form-row .input-box.membership_number input[type="text"],
body.customer-account-create .form-row .input-box.membership_number input#membership_number,
body.customer-account-create input#membership_number {
  width: 267px !important;
  max-width: 267px !important;
  min-width: 267px !important;
  box-sizing: border-box !important;
}

/* Inject a "Membership Number" label visually at the start of the
   parent form-row (positioned in the 200px label column). */
body.customer-account-create .form-row:has(> .input-box.membership_number)::before {
  content: "Membership Number";
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 200px !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4a4360 !important;
  text-align: left !important;
}

/* The result/union banner row similarly has no label */
body.customer-account-create .form-row#result {
  grid-column: 1 / -1 !important;
  display: block !important;
}

/* ---- Labels ---- */
body.customer-account-create .form-row > label,
body.customer-account-create .form-row label {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4a4360 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  float: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
  line-height: 1.4 !important;
}

body.customer-account-create .form-row label span {
  color: #c91f1a !important;
  font-weight: inherit !important;
}

/* ---- Inputs ---- */
body.customer-account-create .form-row .input-box,
body.customer-account-create .form-row > .input-box {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
}

body.customer-account-create .form-row input.input-text,
body.customer-account-create input.input-text,
body.customer-account-create input[type="text"],
body.customer-account-create input[type="password"],
body.customer-account-create input[type="email"],
body.customer-account-create input[type="tel"] {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a1530 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
}

body.customer-account-create input.input-text:focus,
body.customer-account-create input[type="text"]:focus,
body.customer-account-create input[type="password"]:focus,
body.customer-account-create input[type="email"]:focus,
body.customer-account-create input[type="tel"]:focus {
  outline: none !important;
  border-color: #7330b3 !important;
  box-shadow: 0 0 0 3px rgba(115, 48, 179, 0.12) !important;
}

body.customer-account-create input.input-text::placeholder {
  color: #9aa0a6;
  font-weight: 400;
}

/* ---- Select (State dropdown) ---- */
body.customer-account-create .form-row select,
body.customer-account-create select#region,
body.customer-account-create select#country,
body.customer-account-create .input-box.help select,
body.customer-account-create .input-box select {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 40px 12px 14px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  color: #1a1530 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  display: block !important;
  margin: 0 !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  pointer-events: auto !important;
}

body.customer-account-create .form-row select:focus {
  outline: none !important;
  border-color: #7330b3 !important;
  box-shadow: 0 0 0 3px rgba(115, 48, 179, 0.12) !important;
}

/* Hide ONLY the jqTransform select wrapper (which is a fake select UI replacing
   the native one). DO NOT hide the input wrapper — jqTransform also wraps
   text inputs and the actual <input> lives INSIDE that wrapper, so hiding
   the wrapper hides the input too. For input wrappers, just neutralise
   the visual styling. */
body.customer-account-create .jqTransformSelectWrapper {
  display: none !important;
  visibility: hidden !important;
}

/* For input wrappers, kill their decorative chrome but keep them visible */
body.customer-account-create .jqTransformInputWrapper,
body.customer-account-create .jqTransformInputInner {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  float: none !important;
  display: block !important;
  visibility: visible !important;
}

body.customer-account-create .jqTransformInputInner div {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* Force jqTransform-hidden selects and inputs back to static positioning.
   jqTransform sets position:absolute and left:-2000px on the underlying
   element after wrapping it, which is why the State select and Postcode
   input appear far off to the left of the card.
   
   Also force visibility even if jqTransform sets style="display:none"
   inline on the underlying select — our class-level rule wins because
   of the !important. */
body.customer-account-create select.jqTransformHidden,
body.customer-account-create input.jqTransformHidden,
body.customer-account-create select.validate-select,
body.customer-account-create select#region,
body.customer-account-create select#country,
body.customer-account-create #zip,
body.customer-account-create #membership_number,
body.customer-account-create select[style*="display: none"],
body.customer-account-create select[style*="display:none"],
body.customer-account-create select[style*="position: absolute"],
body.customer-account-create select[style*="position:absolute"] {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  float: none !important;
}

/* ---- First Name + Last Name: side-by-side in a 2-col sub-grid ---- */
body.customer-account-create .customer-name {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100% !important;
}

body.customer-account-create .customer-name .field {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* In the customer-name sub-grid, the labels should stack ABOVE inputs */
body.customer-account-create .customer-name .field label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
}

/* The first .form-row (containing customer-name) should span both columns */
body.customer-account-create .form-row:has(.customer-name) {
  grid-template-columns: 1fr !important;
}

/* Fallback for browsers without :has() — target by structure.
   The customer-name div is wrapped in a form-row; remove the grid for it. */
body.customer-account-create .form-row .customer-name {
  grid-column: 1 / -1;
}

/* ---- Union/Organisation row (autocomplete) ---- */
body.customer-account-create .form-row.union {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 16px 24px;
  align-items: center;
  margin: 0 0 16px !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

body.customer-account-create .form-row.union #search_org_box,
body.customer-account-create .form-row.union input#search_org_box,
body.customer-account-create .form-row.union input[name="search_org_box"],
body.customer-account-create .form-row.union .input-box,
body.customer-account-create .form-row.union .input-box input,
body.customer-account-create .form-row.union .jqTransformInputWrapper,
body.customer-account-create .form-row.union .jqTransformInputInner,
body.customer-account-create .form-row.union .jqTransformInputInner div,
body.customer-account-create .form-row.union .jqTransformInputInner input {
  width: 534px !important;
  max-width: 534px !important;
  min-width: 534px !important;
  box-sizing: border-box !important;
}

/* Autocomplete suggestion dropdown — restyle to match new design.
   jQuery UI appends this <ul> to <body>, so selectors prefixed with
   body.customer-account-create can fail to match. Use global selectors. */
.af_list {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  border: 1px solid rgba(26, 21, 48, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px -6px rgba(26, 21, 48, 0.18) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  z-index: 9999 !important;
}
.af_list .af_suggestion {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #1a1530 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(26, 21, 48, 0.05) !important;
  cursor: pointer !important;
}
.af_list .af_suggestion.af_hover,
.af_list .af_suggestion:hover {
  background: rgba(115, 48, 179, 0.08) !important;
  color: #5a2390 !important;
}
.af_footer {
  font-size: 11px !important;
  color: #9aa0a6 !important;
  padding: 6px 14px !important;
}

/* Hide the screen-reader live-region announcement ("N suggestions
   available") visually — keep it accessible to screen readers only.
   Addressfinder uses an aria-live region; we target it broadly. */
.af_aria_live,
[id^="af_aria"],
.af-aria-live,
.af_kbd_instructions,
[id*="addressfinder"][aria-live],
[class*="af_"][aria-live],
[aria-live="polite"][id*="af"],
[aria-live="assertive"][id*="af"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: -9999px !important;
}

ul.ui-autocomplete,
html body ul.ui-autocomplete,
body.customer-account-create #org_suggesstion-box,
body.customer-account-create .form-row.union ul.ui-autocomplete,
body.customer-account-create ul.ui-autocomplete,
body.customer-account-create .form-row.union > ul {
  /* Width and horizontal position are set by JS (fixUnionAutocomplete in
     srRegisterFixes) which computes the exact pixel offset to align with
     the input. We only style appearance here. */
  background: #ffffff !important;
  border: 1px solid rgba(26, 21, 48, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px -6px rgba(26, 21, 48, 0.15) !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #1a1530 !important;
  opacity: 1 !important;
  z-index: 50 !important;
  max-height: 280px;
  overflow-y: auto;
  list-style: none !important;
  box-sizing: border-box !important;
}

body.customer-account-create #org_suggesstion-box > *,
body.customer-account-create ul.ui-autocomplete > li,
body.customer-account-create .form-row.union > ul > li {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.1s;
  list-style: none !important;
}

body.customer-account-create #org_suggesstion-box > *:hover,
body.customer-account-create ul.ui-autocomplete > li:hover,
body.customer-account-create ul.ui-autocomplete > li.ui-state-focus,
body.customer-account-create ul.ui-autocomplete > li > .ui-state-focus,
body.customer-account-create ul.ui-autocomplete > li > .ui-state-active,
body.customer-account-create .form-row.union > ul > li:hover {
  background: rgba(115, 48, 179, 0.06) !important;
  color: #5a2390 !important;
  border: none !important;
}

/* ---- Result/union banner area ---- */
body.customer-account-create #result {
  margin: 16px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.customer-account-create #result:empty {
  display: none !important;
}

/* If the union result content has an image + paragraph, give it a tinted card */
body.customer-account-create #result .content {
  background: rgba(115, 48, 179, 0.04) !important;
  border: 1px solid rgba(115, 48, 179, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.customer-account-create #result .content img {
  max-width: 80px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}

body.customer-account-create #result .content p {
  font-size: 13.5px !important;
  color: #4a4360 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

body.customer-account-create #result .Clear {
  display: none !important;
}

/* ---- Loading image: hidden by default. JS toggles visibility when fetching. ---- */
body.customer-account-create #LoadingImage {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #6b6580 !important;
  margin: 8px 0 !important;
  padding: 8px !important;
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
}

/* When JS shows it (inline style display:block), let it be visible */
body.customer-account-create #LoadingImage[style*="display: block"],
body.customer-account-create #LoadingImage[style*="display:block"] {
  display: flex !important;
}

/* ---- State dropdown 'help' tooltip ---- */
body.customer-account-create .input-box.help {
  position: relative;
  display: block;
  width: 100%;
}

/* Force the State select inside .input-box.help to be visible at full
   width. jqTransform may try to hide it with inline styles; we override
   with high specificity. The select has id="region" name="region" per
   the page source (not region_id). */
body.customer-account-create .form-row .input-box.help select,
body.customer-account-create .form-row .input-box.help select#region,
body.customer-account-create .input-box.help select#region,
body.customer-account-create select[name="region"].validate-select,
body.customer-account-create select#region.validate-select,
body.customer-account-create select#region.required-entry,
body.customer-account-create select#region {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 40px 12px 14px !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* Bullet-proof: any jqTransformSelectWrapper inside the State row gets nuked
   even if our JS misses it. The native select underneath will then be
   visible per the rules above. */
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper {
  display: contents !important;
  position: static !important;
  width: auto !important;
  z-index: auto !important;
}

/* The fake jqTransform UI (the visible <div>/<span>/<a> chrome that
   replaces the native select). Hide these so only the native select
   shows through. */
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper > div,
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper > ul,
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper > a,
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper span,
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper a.jqTransformSelectOpen {
  display: none !important;
}

/* Make the native select escape the wrapper's sizing and display normally */
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper select,
body.customer-account-create .form-row .input-box.help .jqTransformSelectWrapper select#region,
body.customer-account-create select.jqTransformHidden,
body.customer-account-create select#region.jqTransformHidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 12px 40px 12px 14px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

body.customer-account-create .input-box.help .que {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(115, 48, 179, 0.1);
  color: #7330b3;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  z-index: 5;
}

body.customer-account-create .input-box.help .que::before {
  content: '?';
}

body.customer-account-create .input-box.help .que .tip,
body.customer-account-create .help .que .tip,
body.customer-account-create .form-row .help .tip {
  display: none;
  position: absolute;
  /* Open to the LEFT of the ? icon so it never overflows the right edge
     of the card. right:100% anchors the popup's right edge to the icon's
     left edge; the margin adds a small gap. */
  right: 100% !important;
  left: auto !important;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 12px !important;
  width: 280px;
  max-width: 280px;
  padding: 12px 14px;
  background: #1a1530;
  color: #ffffff;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  z-index: 9999;
  box-shadow: 0 8px 20px -6px rgba(26, 21, 48, 0.3);
  white-space: normal;
}

body.customer-account-create .input-box.help .que .tip p,
body.customer-account-create .help .que .tip p {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
}

body.customer-account-create .input-box.help .que:hover .tip,
body.customer-account-create .help .que:hover .tip,
body.customer-account-create .form-row .help .que:hover .tip {
  display: block;
}

/* On narrower screens push the help icon inside the input row */
@media (max-width: 900px) {
  body.customer-account-create .input-box.help .que {
    right: 8px;
    top: 8px;
    transform: none;
  }
}

/* ---- Captcha row ---- */
body.customer-account-create .form-row .captcha-box {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px !important;
  background: rgba(115, 48, 179, 0.04) !important;
  border: 1px solid rgba(115, 48, 179, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  width: 534px !important;
  max-width: 534px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

body.customer-account-create #logoindivCaptcha {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1530 !important;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* jqTransform wraps the captcha input in .jqTransformInputWrapper >
   .jqTransformInputInner > div > input. Make the wrapper behave like a
   normal flex child and shed its own sizing so the input aligns with
   the "4 + 9 =" equation. */
body.customer-account-create .captcha-box .jqTransformInputWrapper,
body.customer-account-create .captcha-box .jqTransformInputInner,
body.customer-account-create .captcha-box .jqTransformInputInner > div {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  float: none !important;
  position: static !important;
}

body.customer-account-create #txtcaptcha,
body.customer-account-create input#txtcaptcha {
  width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a1530 !important;
  box-sizing: border-box !important;
  float: none !important;
  position: static !important;
  vertical-align: middle !important;
}

body.customer-account-create #txtcaptcha:focus,
body.customer-account-create input#txtcaptcha:focus {
  outline: none !important;
  border-color: #7330b3 !important;
  box-shadow: 0 0 0 3px rgba(115, 48, 179, 0.12) !important;
}

body.customer-account-create #captchamsg {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: #c91f1a !important;
  width: 100% !important;
}

body.customer-account-create #captchamsg:empty {
  display: none !important;
}

body.customer-account-create .captcha-box .red {
  float: none !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 12px !important;
  color: #6b6580 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

/* ---- Terms & Conditions checkbox ---- 
   jqTransform wraps the native checkbox like this:
     <span class="jqTransformCheckboxWrapper">
       <a href="#" class="jqTransformCheckbox"></a>           <- visible fake UI
       <input type="checkbox" class="jqTransformHidden">      <- real input (hidden)
     </span>
   When checked, jqTransform adds class "jqTransformChecked" to the <a>.
   We style the <a> as our visible checkbox. */

body.customer-account-create .terms-check-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: rgba(115, 48, 179, 0.04) !important;
  border: 1px solid rgba(115, 48, 179, 0.1) !important;
  border-radius: 12px !important;
  width: 534px !important;
  max-width: 534px !important;
  box-sizing: border-box !important;
  cursor: pointer;
  margin: 0 !important;
}

/* The jqTransform wrapper — strip its own styling and act as a container */
body.customer-account-create .terms-check-box .jqTransformCheckboxWrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The fake checkbox <a> element — this is what users see */
body.customer-account-create .terms-check-box .jqTransformCheckbox,
body.customer-account-create a.jqTransformCheckbox {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #b8bcc7 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

body.customer-account-create .terms-check-box .jqTransformCheckbox:hover,
body.customer-account-create a.jqTransformCheckbox:hover {
  border-color: #7330b3 !important;
}

/* Checked state — jqTransform adds .jqTransformChecked when checked */
body.customer-account-create .terms-check-box .jqTransformChecked,
body.customer-account-create a.jqTransformChecked {
  background: linear-gradient(135deg, #7330b3 0%, #5a2390 100%) !important;
  border-color: #7330b3 !important;
}

body.customer-account-create .terms-check-box .jqTransformChecked::after,
body.customer-account-create a.jqTransformChecked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* The real <input> stays hidden by jqTransform — leave it that way */
body.customer-account-create .terms-check-box input[type="checkbox"].jqTransformHidden {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

body.customer-account-create .terms-check-box .yes {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #1a1530 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
}

body.customer-account-create .terms-check-box .yes span {
  color: #c91f1a !important;
  font-weight: inherit !important;
  margin-right: 2px;
}

/* Terms & Conditions link inside the checkbox label */
body.customer-account-create .terms-check-box .terms-link {
  color: #7330b3 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
}

body.customer-account-create .terms-check-box .terms-link:hover {
  color: #5a2390 !important;
}

/* The terms checkbox sits in a .form-row — make that one full-width (no label column) */
body.customer-account-create .form-row:has(.terms-check-box),
body.customer-account-create .form-row:has(.captcha-box) {
  grid-template-columns: 1fr !important;
}

/* Captcha and Terms boxes: indent to align with the other input columns
   (200px label col + 24px gap = 224px) instead of spanning from the far
   left. This keeps them left-justified with Password, Telephone, etc. */
body.customer-account-create .form-row .terms-check-box,
body.customer-account-create .form-row .captcha-box,
body.customer-account-create .terms-check-box,
body.customer-account-create .captcha-box {
  grid-column: 1 / -1;
  margin: 0 0 0 224px !important;
}

/* The captcha row has a label "Security Code*" — align it in the label
   column (no indent) like the other field labels. */
body.customer-account-create .form-row label.captcha4 {
  margin-bottom: 8px !important;
  display: block !important;
}

/* ---- Submit button ---- */
body.customer-account-create .form-row:last-child,
body.customer-account-create .form-row:has(button[type="submit"]),
body.customer-account-create form#form-validate > .form-row:last-of-type {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 8px !important;
  width: 758px !important;
  max-width: 758px !important;
  box-sizing: border-box !important;
}

body.customer-account-create button.button[type="submit"],
body.customer-account-create button[type="submit"].button {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  background: linear-gradient(135deg, #7330b3 0%, #5a2390 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 12px 32px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 12px -4px rgba(115, 48, 179, 0.35) !important;
  min-width: 140px;
  margin: 0 0 0 auto !important;
  float: none !important;
}

body.customer-account-create button.button[type="submit"]:hover,
body.customer-account-create button[type="submit"].button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px -6px rgba(115, 48, 179, 0.45) !important;
}

body.customer-account-create button.button[type="submit"]:active,
body.customer-account-create button[type="submit"].button:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 6px -2px rgba(115, 48, 179, 0.45) !important;
  transition: transform 0.05s, box-shadow 0.05s !important;
}

body.customer-account-create button.button[type="submit"] span,
body.customer-account-create button.button[type="submit"] span span {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}

/* ---- Validation error messages ---- */
body.customer-account-create .validation-advice {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #c91f1a !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4;
  font-weight: 500;
  position: static !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  clear: both !important;
}

/* In the grid form-rows, the validation-advice is a direct child of the
   .form-row. Make it span both columns and indent to align under the
   input column (224px) so error text sits under its field, not floating
   in the label column. */
body.customer-account-create .form-row > .validation-advice {
  grid-column: 1 / -1 !important;
  margin: 6px 0 0 224px !important;
}

/* When the advice is inside an .input-box (most fields incl. Postcode,
   Password), it sits under the input already — keep it left-aligned to
   the input, no extra indent (the input-box is already in column 2). */
body.customer-account-create .input-box .validation-advice {
  margin: 6px 0 0 !important;
  width: 100% !important;
  grid-column: auto !important;
}

/* Captcha: the advice is inside .captcha-box (a flex row). Force it onto
   its own full-width line below the input, single line (no wrap squeeze). */
body.customer-account-create .captcha-box .validation-advice {
  flex: 1 0 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  order: 99 !important;
  white-space: normal !important;
}

/* Terms: the advice may be inserted INSIDE .terms-check-box (right after
   the hidden checkbox) or as a sibling after it. In both cases, force it
   to a full-width line below the box, indented to align (224px). */
body.customer-account-create .form-row:has(.terms-check-box) > .validation-advice,
body.customer-account-create .terms-check-box ~ .validation-advice,
body.customer-account-create .terms-check-box .validation-advice {
  position: static !important;
  display: block !important;
  width: 100% !important;
  flex: 1 0 100% !important;
  flex-basis: 100% !important;
  margin: 8px 0 0 224px !important;
  grid-column: 1 / -1 !important;
  order: 99 !important;
}

/* When the terms advice is inside the box, the box is flex — push it to
   its own line and remove the 224px indent (the box itself is already
   indented). */
body.customer-account-create .terms-check-box .validation-advice {
  margin: 8px 0 0 !important;
}

/* State field: advice inside .input-box.help should sit under the select,
   not float. The help box is position:relative for the ? tooltip, so
   keep the advice in normal flow below. */
body.customer-account-create .input-box.help .validation-advice {
  margin: 6px 0 0 !important;
  width: 100% !important;
  position: static !important;
  display: block !important;
}

/* Relocated advice (moved out of flex boxes by JS) — sits as a direct
   child of the form-row, full width, indented to align under the box. */
body.customer-account-create .form-row > .validation-advice.relocated-advice,
body.customer-account-create .validation-advice.relocated-terms,
body.customer-account-create .validation-advice.relocated-captcha {
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: 534px !important;
  margin: 8px 0 0 224px !important;
  grid-column: 1 / -1 !important;
  white-space: normal !important;
  flex: none !important;
  order: 0 !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  body.customer-account-create .personal-details {
    padding: 24px !important;
  }
  body.customer-account-create .form-row {
    grid-template-columns: 1fr !important;
    gap: 6px;
    margin-bottom: 14px !important;
  }
  body.customer-account-create .form-row label {
    margin-bottom: 4px !important;
  }
  body.customer-account-create .customer-name {
    grid-template-columns: 1fr;
  }
  body.customer-account-create .inner_mid_part {
    padding: 0 16px !important;
  }
  body.customer-account-create #outer_breadcrumb {
    padding: 20px 16px 4px !important;
  }
  body.customer-account-create .input-box.help .que {
    right: 8px;
    top: 8px;
    transform: none;
  }
  body.customer-account-create .input-box.help .que .tip {
    right: 0;
    top: 30px;
    transform: none;
    width: 240px;
  }
}

/* End of Register page restyle */

/* ==========================================================================
   FORGOT PASSWORD PAGE — /customer/account/forgotpassword/
   body.customer-account-forgotpassword

   Layout: col1-layout (no sidebar), single centered card on light grey.
   Matches the Login page look — clean card, branded purple gradient Submit
   button, ghost "Back to Login" link, small uppercase eyebrow heading.

   HTML structure:
     .col-main.mid_inner
       #outer_breadcrumb > .breadcrumb > h1   ("Forgot Your Password?")
       form#form-validate
         .mid-forgot > .fieldset
           h2.legend ("Retrieve your password here")
           p (instructions)
           ul.form-list > li > label + .input-box > input#email_address
           .buttons-set > p.required + p.back-link + button.button
   ========================================================================== */

/* ---- Page-level: clean grey background ---- */
body.customer-account-forgotpassword {
  background: #f4f5f8 !important;
}

/* Hide redundant header join buttons (page is its own auth flow) — keep them,
   actually, since a user here may want to go straight to Register/Login.
   We leave the header buttons alone on this page. */

/* ---- Container resets (kill float layout, center the content) ---- */
body.customer-account-forgotpassword .main-container.col1-layout,
body.customer-account-forgotpassword #outer_mid_inner {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* The content wrapper itself is constrained + centered, so the white card
   never stretches edge-to-edge (the legacy theme gives .col-main.mid_inner
   a full-width white background otherwise). Cap it at the card width and
   center it — matching the Login card's contained feel. */
body.customer-account-forgotpassword .col-main.mid_inner {
  background: transparent !important;
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* ---- Eyebrow heading (replaces the grey breadcrumb banner H1) ---- */
body.customer-account-forgotpassword #outer_breadcrumb {
  background: transparent !important;
  padding: 32px 20px 8px !important;
  margin: 0 !important;
}

body.customer-account-forgotpassword #outer_breadcrumb .breadcrumb {
  max-width: 560px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: center;
}

body.customer-account-forgotpassword #outer_breadcrumb h1 {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #6b6580 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* ---- The form card ---- */
body.customer-account-forgotpassword form#form-validate {
  max-width: 560px !important;
  margin: 24px auto 60px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
}

body.customer-account-forgotpassword .mid-forgot {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26, 21, 48, 0.06) !important;
  box-shadow: 0 4px 18px -8px rgba(26, 21, 48, 0.1) !important;
  padding: 36px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  float: none !important;
}

body.customer-account-forgotpassword .mid-forgot .fieldset {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ---- Card heading "Retrieve your password here" ---- */
body.customer-account-forgotpassword .mid-forgot .legend,
body.customer-account-forgotpassword .mid-forgot h2.legend {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #1a1530 !important;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(26, 21, 48, 0.08) !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  background: transparent !important;
  display: block !important;
}

/* ---- Instructions paragraph ---- */
body.customer-account-forgotpassword .mid-forgot .fieldset > p {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #6b6580 !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ---- Form list / row reset ---- */
body.customer-account-forgotpassword .mid-forgot .form-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

body.customer-account-forgotpassword .mid-forgot .form-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

/* ---- Label ---- */
body.customer-account-forgotpassword .mid-forgot label,
body.customer-account-forgotpassword .mid-forgot .form-list li label {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a4360 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* The <em>*</em> is the first child of the label — push it to the end so it
   reads "Email Address *" rather than "* Email Address". */
body.customer-account-forgotpassword .mid-forgot label em,
body.customer-account-forgotpassword .mid-forgot label.required em {
  color: #c91f1a !important;
  font-style: normal !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  float: none !important;
  display: inline !important;
  position: static !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  order: 2 !important;
}

/* ---- Input ---- */
body.customer-account-forgotpassword .mid-forgot .input-box {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

body.customer-account-forgotpassword .mid-forgot input.input-text,
body.customer-account-forgotpassword .mid-forgot #email_address {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #b8bcc7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a1530 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
}

body.customer-account-forgotpassword .mid-forgot input.input-text:focus,
body.customer-account-forgotpassword .mid-forgot #email_address:focus {
  outline: none !important;
  border-color: #7330b3 !important;
  box-shadow: 0 0 0 3px rgba(115, 48, 179, 0.12) !important;
}

body.customer-account-forgotpassword .mid-forgot input.input-text::placeholder {
  color: #9aa0a6;
}

/* ---- Buttons-set: stack the "* Required Fields" note, then a row with
   "Back to Login" on the left and Submit on the right ---- */
body.customer-account-forgotpassword .mid-forgot .buttons-set {
  margin: 24px 0 0 !important;
  padding: 20px 0 0 !important;
  border: none !important;
  border-top: 1px solid rgba(26, 21, 48, 0.08) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* "* Required Fields" — small, sits on its own full-width line above the
   button row */
body.customer-account-forgotpassword .mid-forgot .buttons-set p.required {
  order: 1 !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #6b6580 !important;
  text-align: left !important;
}

/* "Back to Login" — ghost link/button on the LEFT */
body.customer-account-forgotpassword .mid-forgot .buttons-set p.back-link {
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set p.back-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1.5px solid #7330b3 !important;
  color: #7330b3 !important;
  background: #ffffff !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s !important;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set p.back-link a:hover {
  background: #faf6fd !important;
  border-color: #5a2390 !important;
  color: #5a2390 !important;
  transform: translateY(-1px) !important;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set p.back-link a small {
  font-size: inherit !important;
  font-weight: 700 !important;
}

/* ---- Submit button — branded purple gradient pill on the RIGHT ---- */
body.customer-account-forgotpassword .mid-forgot .buttons-set button.button {
  order: 3 !important;
  margin: 0 0 0 auto !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  background: linear-gradient(135deg, #7330b3 0%, #5a2390 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 12px 32px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: transform 0.12s, box-shadow 0.15s !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 12px -4px rgba(115, 48, 179, 0.35) !important;
  min-width: 120px;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set button.button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px -6px rgba(115, 48, 179, 0.45) !important;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set button.button:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 6px -2px rgba(115, 48, 179, 0.45) !important;
  transition: transform 0.05s, box-shadow 0.05s !important;
}

body.customer-account-forgotpassword .mid-forgot .buttons-set button.button span,
body.customer-account-forgotpassword .mid-forgot .buttons-set button.button span span {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}

/* ---- Validation error message ---- */
body.customer-account-forgotpassword .mid-forgot .validation-advice {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #c91f1a !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  position: static !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

/* ---- Flash messages (e.g. "we've sent you a reset link") ---- */
body.customer-account-forgotpassword .messages,
body.customer-account-forgotpassword ul.messages,
body.customer-account-forgotpassword .col-main .messages {
  position: static !important;
  float: none !important;
  display: block !important;
  max-width: 560px !important;
  width: auto !important;
  margin: 0 auto 16px !important;
  padding: 0 20px !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.customer-account-forgotpassword .messages li {
  list-style: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.customer-account-forgotpassword .messages .success-msg,
body.customer-account-forgotpassword .success-msg {
  background: #e8f5ed !important;
  border: 1px solid #b8e0c3 !important;
  border-left: 4px solid #2f9e4d !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #1f6d36 !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  list-style: none !important;
}

body.customer-account-forgotpassword .messages .error-msg,
body.customer-account-forgotpassword .error-msg {
  background: #fdecec !important;
  border: 1px solid #f5b8b8 !important;
  border-left: 4px solid #d63838 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #a31f1f !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  list-style: none !important;
}

body.customer-account-forgotpassword .messages li img {
  display: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  body.customer-account-forgotpassword .mid-forgot {
    padding: 26px !important;
  }
  body.customer-account-forgotpassword #outer_breadcrumb {
    padding: 24px 16px 8px !important;
  }
  body.customer-account-forgotpassword form#form-validate {
    padding: 0 16px !important;
  }
  body.customer-account-forgotpassword .mid-forgot .buttons-set {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.customer-account-forgotpassword .mid-forgot .buttons-set p.back-link a,
  body.customer-account-forgotpassword .mid-forgot .buttons-set button.button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
}

/* End of Forgot Password page restyle */

/* ==========================================================================
   404 / NO-ROUTE PAGE RESTYLE
   body.cms-no-route (also .cms-index-noroute). Layout is col1-layout with a
   single .col-main.mid_inner > .std block. We turn the legacy dl/dt/dd markup
   into a clean centered card matching the Login / Forgot Password pages:
   big branded "404", eyebrow + title, two info sections, and the action
   links rendered as proper buttons. Styling only — no markup changes.
   ========================================================================== */

/* ---- Container resets: kill float layout, center + constrain ---- */
body.cms-no-route .main-container.col1-layout,
body.cms-no-route #outer_mid_inner {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.cms-no-route .col-main.mid_inner {
  background: transparent !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 48px 20px 64px !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* ---- The white card (.std wraps everything) ---- */
body.cms-no-route .std {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26, 21, 48, 0.06) !important;
  box-shadow: 0 4px 18px -8px rgba(26, 21, 48, 0.1) !important;
  padding: 44px 40px !important;
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1a1530 !important;
  text-align: center !important;
}

/* ---- Hero heading: a small "ERROR 404" eyebrow injected above the H3,
   then the existing H3 ("404 Page not found...") styled as the big title.
   No duplicate numeral — the H3 keeps its own "404" text. ---- */
body.cms-no-route .std .page-head-alt {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.cms-no-route .std .page-head-alt::before {
  content: "ERROR 404";
  display: block;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7330b3;
  margin-bottom: 14px;
}

/* The original H3 "404 Page not found..." becomes the big page title. */
body.cms-no-route .std .page-head-alt h3 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #1a1530 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

/* ---- Info sections (dl/dt/dd) ---- */
body.cms-no-route .std dl {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body.cms-no-route .std dt {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1530 !important;
  margin: 22px 0 8px !important;
  letter-spacing: -0.01em !important;
}

body.cms-no-route .std dd {
  margin: 0 !important;
  font-size: 14px !important;
  color: #6b6580 !important;
  line-height: 1.6 !important;
}

body.cms-no-route .std dd ul.disc {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

body.cms-no-route .std dd ul.disc li {
  position: relative !important;
  padding: 4px 0 4px 22px !important;
  font-size: 14px !important;
  color: #6b6580 !important;
  line-height: 1.55 !important;
  list-style: none !important;
}

/* Custom bullet */
body.cms-no-route .std dd ul.disc li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7330b3;
  opacity: 0.55;
}

/* The spacer paragraph between the two dl blocks */
body.cms-no-route .std > p {
  margin: 0 !important;
  height: 8px !important;
}

/* ---- Links inside the body text (Go back) styled as inline accent ---- */
body.cms-no-route .std dd ul.disc li a {
  color: #7330b3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(115, 48, 179, 0.3) !important;
  transition: border-color 0.15s !important;
}

body.cms-no-route .std dd ul.disc li a:hover {
  border-bottom-color: #7330b3 !important;
}

/* ---- The final "Follow these links" li holds the two big nav links.
   Turn ShopRite Home + My Account into proper buttons stacked below. ---- */
body.cms-no-route .std dd ul.disc li:last-child {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #eceaf2 !important;
}

/* The two anchors after the <br>s in the last li become buttons */
body.cms-no-route .std dd ul.disc li:last-child a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px 8px 0 0 !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
}

/* First link (ShopRite Home) = primary purple */
body.cms-no-route .std dd ul.disc li:last-child a:nth-of-type(1) {
  background: linear-gradient(135deg, #7330b3 0%, #5a2390 100%) !important;
  color: #ffffff !important;
}

body.cms-no-route .std dd ul.disc li:last-child a:nth-of-type(1):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px -6px rgba(115, 48, 179, 0.4) !important;
  color: #ffffff !important;
}

/* Second link (My Account) = ghost / secondary */
body.cms-no-route .std dd ul.disc li:last-child a:nth-of-type(2) {
  background: #ffffff !important;
  color: #5a2390 !important;
  border: 1.5px solid #d6c4e8 !important;
}

body.cms-no-route .std dd ul.disc li:last-child a:nth-of-type(2):hover {
  transform: translateY(-1px) !important;
  border-color: #7330b3 !important;
  background: #faf6fd !important;
  color: #5a2390 !important;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  body.cms-no-route .col-main.mid_inner {
    padding: 28px 14px 48px !important;
  }
  body.cms-no-route .std {
    padding: 32px 22px !important;
  }
  body.cms-no-route .std .page-head-alt::before {
    font-size: 64px !important;
  }
  body.cms-no-route .std dd ul.disc li:last-child a {
    display: flex !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
}

/* End of 404 / no-route page restyle */

/* ==========================================================================
   ACCOUNT DASHBOARD — Recent quotes list

   Injected by dashboard.phtml JS into the "Your quote requests" card
   (replaces the empty state when the member has quotes). Markup:
     .sr-quote-list > a.sr-quote-row
        > span.sr-quote-num + span.sr-quote-date + span.sr-quote-status
   Scoped to .sr-dash so it inherits the per-union --sr-primary vars.
   ========================================================================== */
.sr-dash .sr-quote-list {
  padding: 4px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sr-dash .sr-quote-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #b8bcc7;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.sr-dash .sr-quote-row:hover {
  transform: translateY(-2px);
  border-color: var(--sr-primary-tint-hover);
  box-shadow: 0 12px 24px -10px rgba(26, 21, 48, 0.12);
  text-decoration: none;
  color: inherit;
}

.sr-dash .sr-quote-num {
  font-weight: 800;
  font-size: 15px;
  color: #1a1530;
  letter-spacing: -0.01em;
}

.sr-dash .sr-quote-date {
  font-size: 13px;
  color: #6b6580;
  white-space: nowrap;
}

.sr-dash .sr-quote-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sr-primary-tint-light);
  color: var(--sr-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .sr-dash .sr-quote-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .sr-dash .sr-quote-date { grid-column: 1; grid-row: 2; }
  .sr-dash .sr-quote-status { grid-column: 2; grid-row: 1 / 3; }
}

/* End of Recent quotes list */

/* ==========================================================================
   MEMBERS-AREA DARK MODE  (added 2026-05-30)
   Activated by `html.sr-dark`, which the toggle in head.phtml adds only on
   logged-in account pages. Most surfaces inherit via the --acct-* variables;
   the blocks below also override the surfaces that hardcode #fff / #f9fafb.
   The QR card is deliberately left white so it stays scannable.
   ========================================================================== */

/* 1) Variable override — flips every var(--acct-*) surface at once. */
html.sr-dark {
  --acct-ink: #e8eaf0;
  --acct-muted: #9aa0ad;
  --acct-bg: #191c22;
  --acct-card: #191c22;
  --acct-border: #2b303a;
  --acct-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.7);
}

/* 2) Page background (in case it's set outside this file). */
html.sr-dark body { background: var(--acct-bg) !important; }

/* 3) Light-grey inner panels (#f9fafb) -> slightly elevated dark. */
html.sr-dark .col-main table.data-table thead th,
html.sr-dark .col-main #my-orders-table thead th,
html.sr-dark .col-main .col2-set.order-info-box .col-2,
html.sr-dark .col-main .col2-set.order-info-box .client-data.box,
html.sr-dark .col-main .qquote-client-collaterals .client-data.box,
html.sr-dark .col-main .form-list input[readonly],
html.sr-dark .col-main .form-list select[disabled],
html.sr-dark .col-main .col2-set.addresses-list li.item,
html.sr-dark .col-main .container-quote-faq button.accordion:hover {
  background: #20242c !important;
  color: var(--acct-ink) !important;
}

/* 4) Hardcoded white containers -> dark cards. */
html.sr-dark .col-main table.data-table,
html.sr-dark .col-main table.cart-table,
html.sr-dark .col-main table#shopping-cart-table tbody tr,
html.sr-dark .col-main table#shopping-cart-table tbody tr.qquote-collapsed:hover,
html.sr-dark .col-main #billing-new-address-form,
html.sr-dark .col-main #qquoteadv_shipping_box,
html.sr-dark .col-main .container-quote-faq .faq-master-toggle,
html.sr-dark .col-main .container-quote-faq button.accordion,
html.sr-dark .col-main .pages ol li a {
  background: #191c22 !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
}

/* 5) Form fields (white inputs/selects/textareas) -> dark fields. */
html.sr-dark .col-main .form-list .input-text,
html.sr-dark .col-main .form-list input.input-text,
html.sr-dark .col-main select.jqTransformHidden,
html.sr-dark .col-main .limiter select,
html.sr-dark .col-main table#shopping-cart-table tbody input[type="text"],
html.sr-dark .col-main table#shopping-cart-table tbody input.input-text,
html.sr-dark .col-main table#shopping-cart-table tbody textarea,
html.sr-dark .col-main .qquote-client-collaterals textarea,
html.sr-dark .col-main #billing-new-address-form input,
html.sr-dark .col-main #billing-new-address-form select {
  background: #20242c !important;
  color: var(--acct-ink) !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .col-main input::placeholder,
html.sr-dark .col-main textarea::placeholder { color: #6b7280 !important; }

/* 6) Outline "Back" buttons keep their purple border/text, just lose the white fill. */
html.sr-dark .col-main .buttons-set p.back-link a,
html.sr-dark .col-main .buttons-set .back-link a { background: transparent !important; }

/* 7) Dashboard custom components (.sr-dash lives in main.css; override here). */
html.sr-dark .sr-dash,
html.sr-dark .sr-dash .sr-card {
  background: #191c22 !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
}
html.sr-dark .sr-dash h2,
html.sr-dark .sr-dash h3,
html.sr-dark .sr-dash .sr-card-head h3 { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-quote-row { background: #20242c !important; border-color: var(--acct-border) !important; }
html.sr-dark .sr-dash .sr-quote-num { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-quote-date { color: var(--acct-muted) !important; }

/* 8) The QR must stay on a LIGHT tile so phone cameras can still read it —
   inverting or darkening a QR breaks scanning. In dark mode we soften the
   stark #fff to a muted off-grey tile, gently dim the QR image so it stops
   glaring against the dark sidebar, and lift it with a soft shadow. Contrast
   stays well within scannable range. */
html.sr-dark .sr-side-app .sr-app-qr {
  background: #e4e6ec !important;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.45) !important;
}
html.sr-dark .sr-side-app .sr-app-qr img {
  filter: brightness(0.92) contrast(1.02) !important;
}
html.sr-dark .sr-side-app .sr-app-qr-caption {
  color: #4a4660 !important;
}

/* 8b) Remaining dashboard cards (defined in the dashboard_bottom_new CMS block,
   scoped to .sr-dash). These hardcode white/light backgrounds; the
   html.sr-dark .sr-dash ... selectors outrank the block's own rules.
   Coloured icon/logo tiles are left as accents on purpose. */

/* Stat cards (Active / Quotes / 100+ / Premium) */
html.sr-dark .sr-dash .sr-stat {
  background: #191c22 !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-stat-value,
html.sr-dark .sr-dash .sr-stat-num { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-stat-label { color: var(--acct-muted) !important; }

/* Quick action tiles */
html.sr-dark .sr-dash .sr-action {
  background: #20242c !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-action:hover { background: #262b35 !important; }
html.sr-dark .sr-dash .sr-action h4 { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-action p { color: var(--acct-muted) !important; }

/* Recommended-for-you partner rows */
html.sr-dark .sr-dash .sr-partner {
  background: #20242c !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-partner h5 { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-partner p { color: var(--acct-muted) !important; }

/* Sidebar nav card (whether .sr-card or .sr-side-card) + readable link text */
html.sr-dark .sr-dash .sr-side-card {
  background: #191c22 !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-side-nav a { color: #c7cad3 !important; }
html.sr-dark .sr-dash .sr-side-nav a:hover { background: #262b35 !important; color: #fff !important; }
html.sr-dark .sr-dash .sr-side-nav-section { color: #8b90a0 !important; }

/* Sidebar "Need help?" card */
html.sr-dark .sr-dash .sr-side-help {
  background: #20242c !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-side-help h4 { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-side-help p { color: var(--acct-muted) !important; }

/* Sidebar app-download card (QR tile stays white via the rule above) */
html.sr-dark .sr-dash .sr-side-app {
  background: #191c22 !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark .sr-dash .sr-side-app h4 { color: var(--acct-ink) !important; }
html.sr-dark .sr-dash .sr-side-app p { color: var(--acct-muted) !important; }

/* --------------------------------------------------------------------------
   Dark-mode toggle switch (injected by head.phtml, shown on members pages).
   -------------------------------------------------------------------------- */
.sr-dark-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 99999;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-dark-toggle .sr-dt-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 64px; height: 32px; padding: 0 7px; box-sizing: border-box;
  border-radius: 999px; background: #e6e3ef; border: 1px solid rgba(26, 21, 48, 0.12);
  box-shadow: 0 6px 16px -8px rgba(26, 21, 48, 0.5); transition: background 0.2s ease;
}
.sr-dark-toggle .sr-dt-ico { font-size: 14px; line-height: 1; z-index: 1; }
.sr-dark-toggle .sr-dt-sun { color: #b45309; }
.sr-dark-toggle .sr-dt-moon { color: #8a8597; }
.sr-dark-toggle .sr-dt-knob {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
html.sr-dark .sr-dark-toggle .sr-dt-track { background: #3a2d52; border-color: rgba(255, 255, 255, 0.14); }
html.sr-dark .sr-dark-toggle .sr-dt-knob { transform: translateX(32px); background: #7330b3; }
html.sr-dark .sr-dark-toggle .sr-dt-moon { color: #e8eaf0; }
html.sr-dark .sr-dark-toggle .sr-dt-sun { color: #7a7588; }
.sr-dark-toggle:focus-visible .sr-dt-track { outline: 2px solid var(--sr-primary, #7330b3); outline-offset: 2px; }

/* Inline (docked) variant — used on the dashboard next to the PREMIUM MEMBER
   pill. Sits in the navy banner, so the track is translucent white to read in
   both light and dark themes. */
.sr-dark-toggle.sr-dark-toggle--inline {
  position: static; display: inline-flex; vertical-align: middle;
  margin: 0 0 0 12px; right: auto; bottom: auto;
}
.sr-dark-toggle.sr-dark-toggle--inline .sr-dt-track {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.sr-dark-toggle.sr-dark-toggle--inline .sr-dt-sun { color: #ffd27a; }
.sr-dark-toggle.sr-dark-toggle--inline .sr-dt-moon { color: #e7e9f5; }
.sr-dark-toggle.sr-dark-toggle--inline .sr-dt-knob { background: #fff; }
html.sr-dark .sr-dark-toggle.sr-dark-toggle--inline .sr-dt-track {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
}
html.sr-dark .sr-dark-toggle.sr-dark-toggle--inline .sr-dt-knob { background: #c79bf0; }

/* Header variant — docked into the account header's pill row (.join-buttons),
   next to My Account / Sign Out. Reuses the base track sizing + knob travel;
   we only reset the fixed positioning and drop the floating shadow. The base
   light/dark track colours already adapt to the white (light) header and the
   dark header. */
/* Align the whole pill row — pills + toggle — on their vertical centres, so
   the switch sits level with My Account / Sign Out. Each <li> centres its own
   contents (inline-flex), so the pill's text no longer rides its baseline lower
   than the toggle. float:none guards against the base theme floating the items. */
.shoprite-container .join-buttons ul li,
header .shoprite-container .join-buttons ul li {
  display: inline-flex;
  align-items: center;
  float: none;
  vertical-align: middle;
}
.join-buttons .sr-dark-toggle-li {
  display: inline-flex; align-items: center; vertical-align: middle;
  list-style: none; margin: 0; padding: 0;
}
.sr-dark-toggle.sr-dark-toggle--header {
  position: static; display: inline-flex; vertical-align: middle;
  left: auto; right: auto; bottom: auto; margin: 0;
}
.sr-dark-toggle.sr-dark-toggle--header .sr-dt-track { box-shadow: none; }

/* 9) Quote-detail page fixes — address card lives in .col-1 (not .col-2), and
   the items-table cells pick up a light background from the base theme. Prefix
   with body.qquoteadv-view-view to outrank those rules. */
html.sr-dark body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-1,
html.sr-dark body.qquoteadv-view-view .col-main .col2-set.order-info-box .col-2,
html.sr-dark body.qquoteadv-view-view .col-main .col2-set.order-info-box .client-data.box {
  background: #20242c !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark body.qquoteadv-view-view .col-main table.data-table,
html.sr-dark body.qquoteadv-view-view .col-main table.cart-table,
html.sr-dark body.qquoteadv-view-view .col-main table.data-table tbody,
html.sr-dark body.qquoteadv-view-view .col-main table.data-table tbody tr,
html.sr-dark body.qquoteadv-view-view .col-main table.data-table tbody td,
html.sr-dark body.qquoteadv-view-view .col-main table.cart-table tbody td {
  background: #191c22 !important;
}
html.sr-dark body.qquoteadv-view-view .col-main table.data-table tbody td { color: var(--acct-ink) !important; }

/* 9b) Quote History + Account Info data tables. The light theme leaves the
   <td> transparent and relies on a white/zebra-striped <tr> background, so in
   dark mode the rows stay white (quote numbers/dates become invisible). Darken
   the table, tbody, rows and cells the same way the Quote Detail table is. */
html.sr-dark body.qquoteadv-view-history .col-main table.data-table,
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody,
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody tr,
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody td,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody tr,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody td,
html.sr-dark body.customer-account-edit .col-main table.data-table,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody tr,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody td,
html.sr-dark body.customer-account-edit .col-main #my-orders-table,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody tr,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody td {
  background: #191c22 !important;
}
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody td,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody td,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody td,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody td {
  color: var(--acct-ink) !important;
}
/* Row hover (light theme uses #fafbfc which flashes white in dark mode). */
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody tr:hover,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody tr:hover,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody tr:hover,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody tr:hover {
  background: #20242c !important;
}
/* "View Quotation" link — brand colour is too dark on a dark row. */
html.sr-dark body.qquoteadv-view-history .col-main table.data-table tbody a,
html.sr-dark body.qquoteadv-view-history .col-main #my-orders-table tbody a,
html.sr-dark body.customer-account-edit .col-main table.data-table tbody a,
html.sr-dark body.customer-account-edit .col-main #my-orders-table tbody a {
  color: #c8aef0 !important;
}

/* 9c) Quote Success "what happens next" tiles. The cards are a hardcoded
   light grey (#f9fafb) and their titles use --acct-ink, which flips to light
   in dark mode -> light title on a light card = invisible. Darken the cards
   and lift the icon circle + glyph. */
html.sr-dark body.qquoteadv-index-success .qsucc-next-card {
  background: #20242c !important;
  border-color: var(--acct-border) !important;
}
html.sr-dark body.qquoteadv-index-success .qsucc-next-title { color: var(--acct-ink) !important; }
html.sr-dark body.qquoteadv-index-success .qsucc-next-body { color: var(--acct-muted) !important; }
html.sr-dark body.qquoteadv-index-success .qsucc-next-icon {
  background: rgba(199, 155, 240, 0.16) !important;
}
html.sr-dark body.qquoteadv-index-success .qsucc-next-icon::before {
  background: #c8aef0 !important;
}
/* Quote number uses --sr-primary (brand navy) -> too dark on the dark box. */
html.sr-dark body.qquoteadv-index-success .qsucc-quote-number {
  color: #c8aef0 !important;
}

/* 10) "Back" button — brand purple is too dark on the dark card; lighten the
   resting state (hover keeps the filled purple with white text). */
html.sr-dark .col-main .buttons-set p.back-link a,
html.sr-dark .col-main .buttons-set .back-link a {
  color: #c8aef0 !important;
  border-color: #8a5cc0 !important;
}
html.sr-dark .col-main .buttons-set p.back-link a:hover,
html.sr-dark .col-main .buttons-set .back-link a:hover {
  background: #7330b3 !important;
  border-color: #7330b3 !important;
  color: #fff !important;
}

/* 11) Outer page frame — the light "content card" wrapper lives in main.css.
   Background-only override (can't affect layout) on the common wrapper classes,
   scoped to html.sr-dark so it only applies on account pages with dark on.
   If the strip persists, the real wrapper class needs adding here. */
html.sr-dark .main-container,
html.sr-dark .main,
html.sr-dark .page-content,
html.sr-dark .inner_mid_part,
html.sr-dark .std,
html.sr-dark .wrapper {
  background: var(--acct-bg) !important;
}

/* 12) White frame on non-dashboard account pages — main.css forces these
   wrappers transparent only on .customer-account-index, so elsewhere they keep
   a default light background (the strip at the bottom). Make them transparent
   in dark mode so the dark body shows through (mirrors the dashboard). */
html.sr-dark .shoprite-main-container,
html.sr-dark .wrapper-account,
html.sr-dark .account-wrapper,
html.sr-dark .top-information,
html.sr-dark .dashboard {
  background: transparent !important;
  background-color: transparent !important;
}

/* 13) "FREE MEMBER APP" eyebrow tag — dark purple on dark card was unreadable. */
html.sr-dark .sr-dash .sr-side-app .sr-app-eyebrow {
  background: rgba(199, 155, 240, 0.16) !important;
  color: #c8aef0 !important;
}

/* 14) Header logo — the colour logo carries a light halo that shows on the dark
   header. Swap it for the white logo SVG the theme ships, done on the <img>
   itself via `content`. Doing it on the image (not a container background) means
   the theme's sticky-header logo — whose <img> is display:none — stays hidden,
   so no duplicate/offset logo appears. */
html.sr-dark header .logo a img,
html.sr-dark header .shoprite-container .logo img,
html.sr-dark header .logo img {
  content: url(../images/shoprite-logo-white.svg) !important;
  max-width: 249px !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
}

/* 14b) Sticky/scrolled header logo — the swap above is scoped to `header .logo`,
   which the sticky-header logo sits outside of, so it fell back to the colour
   logo and showed purple after scrolling. Catch the logo by its image src so it
   goes white in EVERY header state regardless of wrapper. Filter (not content)
   so it also covers any element the content-swap can't reach; a white image
   filtered this way stays white, so the top-of-page logo is unaffected. */
html.sr-dark img[src*="shoprite-logo"] {
  filter: brightness(0) invert(1) !important;
}

/* 15) Header bar — the base theme gives .header-container a white background.
   On the dashboard that leaves the dark-mode white logo and the dark nav text
   invisible. Darken the header and lighten the nav links in dark mode. */
html.sr-dark .header-container,
html.sr-dark .header-container.fixed-header,
html.sr-dark .header,
html.sr-dark .shoprite-container {
  background: var(--acct-bg) !important;
}
html.sr-dark .shoprite-container .nav ul li a {
  color: #e8eaf0 !important;
}

/* 16) #outer_mid_inner carries a light-grey top border (1px solid #e1e1e1) from
   main.css that renders as a white line above the account content in dark mode.
   Hide it (sr-dark only exists on account pages, so this is appropriately scoped). */
html.sr-dark #outer_mid_inner {
  border-top-color: transparent !important;
}

/* 17) Request-a-Quote product form — belt-and-braces for a stray white bar at
   the bottom of the product card. Every field-level white surface is already
   darkened elsewhere, so this neutralises anything injected/wrapped that
   escaped: structural wrappers go transparent; jqTransform wrappers and any
   cart input/select go to the dark field colour. Cards keep #191c22 (section 4). */
html.sr-dark body.qquoteadvstore-index-index .col-main form#quotelist,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot tr,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tfoot td,
html.sr-dark body.qquoteadvstore-index-index .col-main .quote-addmore {
  background-color: transparent !important;
}
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody .jqTransformInputWrapper,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody .jqTransformSelectWrapper,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td input,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td select,
html.sr-dark body.qquoteadvstore-index-index .col-main table#shopping-cart-table tbody td .jqTransformInputWrapper input {
  background-color: #20242c !important;
  color: var(--acct-ink) !important;
}

/* ==========================================================================
   Dashboard — hide the four stat cards (Active / Quotes / 100+ / Premium).
   Markup lives in the dashboard_bottom_new CMS block as .sr-dash > .sr-stats
   (each card is .sr-stat). Removing the wrapper drops the whole row and its
   layout footprint. Applies in both light and dark mode. Body-class scope +
   !important outranks the CMS block's own .sr-stats layout rule.
   ========================================================================== */
body.customer-account-index .sr-dash .sr-stats {
  display: none !important;
}

/* ==========================================================================
   Dashboard quick action — emphasise "Request a quote" with a gently pulsing
   union-coloured border (no badge). Targets the card by its qquoteadvstore
   href so it's order-independent. Colour uses the per-union --sr-primary.
   IMPORTANT: border-color must NOT be !important here — per the CSS spec,
   !important author declarations override animations, which would freeze the
   pulse. Specificity (0,4,1) alone already beats the base .sr-dash .sr-action
   (0,2,0) rule, so the colour wins without !important and the keyframes can
   animate it. Only border-width/-style carry !important (they don't animate).
   prefers-reduced-motion users get a static highlighted border.
   Markup: .sr-dash .sr-actions a.sr-action[href*="qquoteadvstore"].
   (DEPLOY-MARKER sr-action-quote-pulse)
   ========================================================================== */
@keyframes srQuotePulse {
  0%, 100% { border-color: color-mix(in srgb, var(--sr-primary, #5a2390) 25%, transparent); }
  50%      { border-color: var(--sr-primary, #5a2390); }
}
.sr-dash .sr-actions a.sr-action[href*="qquoteadvstore"] {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--sr-primary, #5a2390);
  animation: srQuotePulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sr-dash .sr-actions a.sr-action[href*="qquoteadvstore"] {
    animation: none;
    border-color: var(--sr-primary, #5a2390);
  }
}

/* Dark mode: lighten the border toward white so it reads on the dark card. */
@keyframes srQuotePulseDark {
  0%, 100% { border-color: color-mix(in srgb, var(--sr-primary, #7330b3) 40%, transparent); }
  50%      { border-color: color-mix(in srgb, var(--sr-primary, #7330b3) 70%, #ffffff); }
}
html.sr-dark .sr-dash .sr-actions a.sr-action[href*="qquoteadvstore"] {
  border-color: color-mix(in srgb, var(--sr-primary, #7330b3) 70%, #ffffff);
  animation: srQuotePulseDark 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.sr-dark .sr-dash .sr-actions a.sr-action[href*="qquoteadvstore"] {
    animation: none;
  }
}

/* ==========================================================================
   Dashboard — TEST: show "Quick actions" above "Recent Quotes".
   .sr-content is the flex column holding the stacked cards (Recent Quotes,
   Quick actions, Recommended). The Quick actions card is the only one that
   contains .sr-actions, so :has() gives a precise handle. order:-1 lifts it
   to the top of the column; the other cards keep source order below it.
   NOTE: this changes VISUAL order only — DOM/tab/screen-reader order stays
   Recent Quotes first. If you keep this, reorder the cards in the
   dashboard_bottom_new CMS block so the DOM matches (better for a11y).
   (DEPLOY-MARKER sr-quickactions-first)
   ========================================================================== */
.sr-dash .sr-content > .sr-card:has(.sr-actions) {
  order: -1 !important;
}

/* ==========================================================================
   HTML SITE MAP (MageWorx xSitemap) — /sitemap/  (body.xsitemap-index-index)
   Public page, light theme only. Turns the raw link dump into a branded,
   responsive multi-column directory inside a clean card. Overrides the inline
   <style> the extension prints in the body (float:left; width:50%).
   (DEPLOY-MARKER sitemap-restyle)
   ========================================================================== */
body.xsitemap-index-index .col-main.mid_inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 20px 56px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}
body.xsitemap-index-index .page-head {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
body.xsitemap-index-index .page-head h3 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1a1530;
  line-height: 1.15;
  margin: 0;
}
/* Hide the empty stores/categories blocks and the redundant "Pages" subhead. */
body.xsitemap-index-index .xsitemap-stores,
body.xsitemap-index-index .xsitemap-categories { display: none !important; }
body.xsitemap-index-index .xsitemap-pages > h3 { display: none !important; }

/* Card wrapper around the link list. */
body.xsitemap-index-index .xsitemap-pages {
  float: none !important;
  width: auto !important;
  background: #fff;
  border: 1px solid #e5e3ee;
  border-radius: 16px;
  box-shadow: 0 4px 16px -8px rgba(26, 21, 48, 0.08);
  padding: 24px 28px;
}
/* Responsive multi-column directory. */
body.xsitemap-index-index ul.mageworx-pages {
  column-count: 3;
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.xsitemap-index-index ul.mageworx-pages li {
  float: none !important;
  width: auto !important;
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  list-style: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
body.xsitemap-index-index ul.mageworx-pages li a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: #2b2640;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
body.xsitemap-index-index ul.mageworx-pages li a:hover {
  background: #f5f2fa;
  color: #7330b3;
}
@media (max-width: 900px) {
  body.xsitemap-index-index ul.mageworx-pages { column-count: 2; column-gap: 28px; }
}
@media (max-width: 560px) {
  body.xsitemap-index-index ul.mageworx-pages { column-count: 1; }
  body.xsitemap-index-index .xsitemap-pages { padding: 18px; }
  body.xsitemap-index-index .page-head h3 { font-size: 24px; }
}

/* Hide internal app-registration utility pages from the HTML sitemap list.
   (Visual only — links remain in the HTML. Use MageWorx exclude/noindex to
   keep them out of Google.) (DEPLOY-MARKER sitemap-hide-links) */
body.xsitemap-index-index li.page-url:has(a[href*="/app-register.html"]),
body.xsitemap-index-index li.page-url:has(a[href*="/app_registration_sucess.html"]),
body.xsitemap-index-index li.page-url:has(a[href*="/app_registration_failed.html"]) {
  display: none !important;
}