/**
 * Portal Theme — NGauge B2B portal boilerplate theme
 * Bootstrap 4 compatible — does NOT import or depend on Bootstrap 3
 *
 * ARCHITECTURE:
 *   default.css        — platform base styles (never edit)
 *   portal-theme.css   — boilerplate: brand tokens + component styles (this file)
 *   [client]-theme.css — client layer: override brand tokens only (thin file)
 *
 * CLIENT CUSTOMISATION:
 *   Create [client]-theme.css and override the Brand Token variables only.
 *   All component variables cascade from those tokens automatically.
 *   See docs/THEMING_GUIDE.md for full reference.
 */

/* ==========================================================================
   A. CSS VARIABLES — FULL DEFINITION
   Replaces custom-css.css entirely. All CSS variables are defined here.
   custom-css.css is NOT loaded in the frontend.
   Boilerplate: neutral Bootstrap 4-aligned defaults. Client overrides go
   in [client]-theme.css — override brand tokens only.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       BRAND TOKENS — override these per client in [client]-theme.css
       These are the ONLY variables a client needs to change.
       All component variables below cascade from these tokens.
       ------------------------------------------------------------------ */
    --portal-primary:         #007bff;      /* Main brand colour — buttons, active states, highlights */
    --portal-table-header-bg: #0056b3;     /* Table <thead> background — must achieve 4.5:1 contrast with white text (WCAG AA). Defaults darker than portal-primary */
    --portal-primary-dark:    #343a40;      /* Dark brand — nav bg, footer, card headers */
    --portal-secondary:       #6c757d;      /* Secondary/accent — borders, card header bg, accents */
    --portal-secondary-light: #adb5bd;      /* Light secondary — separators, muted borders, pipes */
    --portal-bg-light:        #f8f9fa;      /* Light strip/bar background */
    --portal-bg-tinted:       #f8f9fa;      /* Tinted light bg — alternating rows, hover states */
    --account-table-odd-bg:   var(--portal-bg-light, #f8f9fa); /* Account list table striped odd row */
    --account-table-even-bg:  #fff;                             /* Account list table striped even row */
    --portal-text-muted:      #6c757d;      /* Muted/secondary text */
    --portal-text-body:       #444444;      /* Body text colour */
    --portal-focus-ring:      rgba(0, 123, 255, 0.2); /* Input focus ring — matches portal-primary at 20% */
    --portal-alt-accent:      transparent;  /* Optional alt accent (promo section) — set per client */

    /* ------------------------------------------------------------------
       TABLE ACTION BAR BUTTON TOKENS
       Semantic colour roles for buttons in account list-page action rows.
       Override in [client]-theme.css to restyle without touching selectors.
       All defaults chain from the global palette tokens above.
       ------------------------------------------------------------------ */
    --table-btn-view-color:     var(--portal-primary, #0056b3);      /* View / primary-nav actions */
    --table-btn-secondary-color: var(--portal-secondary, #6c757d);   /* PDF, toggle, update — neutral */
    --table-btn-action-color:   #dc3545;                              /* Destructive: Delete, Block */
    --table-btn-positive-color: #28a745;                              /* Positive state change: Unblock */
    --table-btn-support-color:  #17a2b8;                              /* Support / ticket actions */

    /* ------------------------------------------------------------------
       DESIGN TOKENS — structural/shape choices, override per client
       ------------------------------------------------------------------ */

    /* Category card */
    --cat-card-border-radius:  8px;                       /* SFF override: 50% */
    --cat-card-width:          100%;                      /* SFF override: 225px */
    --cat-card-height:         200px;                     /* SFF override: 225px */
    --cat-card-margin-y:       16px;                      /* SFF override: 50px */
    --cat-btn-transform:       none;                      /* SFF override: rotate(-5deg) skew(-4deg) */
    --cat-btn-box-shadow:      none;                      /* SFF override: complex angled shadow */
    --cat-btn-font-family:     var(--base-font-family);   /* SFF override: 'Lato', sans-serif */
    --cat-btn-font-size:       0.875rem;                  /* SFF override: 19px */

    /* Section heading underline (::before decorative bar) */
    --portal-heading-underline-height: 0;                 /* SFF override: 5px — set to 0 to hide */
    --portal-heading-underline-width:  60px;
    --portal-heading-underline-color:  var(--portal-primary);

    /* ------------------------------------------------------------------
       THEME TYPOGRAPHY SCALE
       ------------------------------------------------------------------ */
    --base-font-family: Arial, Helvetica, sans-serif;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.8125rem;
    --h1: 1.5rem;
    --h2: 1.25rem;
    --h3: 1.125rem;
    --panel-title: 1rem;
    --menu: 0.875rem;
    --lh-base: 1.5;
    --lh-tight: 1.25;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --btn-font-weight: var(--fw-regular);  /* Override in client CSS for bold buttons */

    /* ------------------------------------------------------------------
       THEME SPACING & RADIUS
       ------------------------------------------------------------------ */
    --space-sm: 8px;
    --space-md: 12px;
    --radius-sm: 4px;

    /* Admin */

    /* Alerts — Bootstrap 4 native values (consumed by default.css #system_alerts rules) */
    --alert-info-background:    #d1ecf1;        /* BS4 info bg */
    --alert-info-border:        1px solid #bee5eb;
    --alert-info-color:         #0c5460;        /* BS4 info text */
    --alert-success-background: #d4edda;        /* BS4 success bg */
    --alert-success-border:     1px solid #c3e6cb;
    --alert-success-color:      #155724;        /* BS4 success text */
    --alert-warning-background: #fff3cd;        /* BS4 warning bg */
    --alert-warning-border:     1px solid #ffeeba;
    --alert-warning-color:      #856404;        /* BS4 warning text */
    --alert-danger-background:  #f8d7da;        /* BS4 danger bg */
    --alert-danger-border:      1px solid #f5c6cb;
    --alert-danger-color:       #721c24;        /* BS4 danger text */
    --alert-radius:             0;
    --alert-shadow:             none;
    --alert-spacing-y:          0;
    --alert-padding-y:          0.75rem;
    --alert-padding-x:          1.25rem;
    --alert-close-color:        currentColor;
    --alert-close-opacity:      0.75;

    /* Alertbox — JS flash toast wrapper (#flashmessage) */
    --alertbox-fluidbg:         rgba(0,0,0,0);  /* transparent outer band */
    --alertbox-bg:              rgba(0,0,0,0);  /* transparent — Bootstrap .alert handles bg */
    --alertbox-font-color:      inherit;
    --alertbox-font-size:       0.9rem;
    --alertbox-font-weight:     400;
    --alertbox-dismiss-color:   inherit;
    --alertbox-dismiss-size:    1.25rem;

    /* Back to top */
    --backtotop-background-color: var(--portal-primary-dark);
    --backtotop-background-color-hover: var(--portal-primary);
    --backtotop-border-color: #8eb992;
    --backtotop-border-color-hover: #8eb992;
    --backtotop-icon-color: #fff;
    --backtotop-icon-size: 32px;
    --backtotop-position: 60px;
    --backtotop-size: 45px;
    --backtotop-size-height: 50px;

    /* Breadcrumbs */
    --breadcrumb-link-color: var(--portal-secondary);
    --breadcrumb-link-color-hover: var(--portal-primary-dark);
    --breadcrumb-link-fontsize: 15px;
    --breadcrumb-link-fontweight: 600;
    --breadcrumb-link-letterspacing: 0.4px;
    --breadcrumb-link-texttransform: uppercase;
    --breadcrumb-current-color: var(--portal-primary-dark);
    --breadcrumb-current-fontsize: 15px;
    --breadcrumb-current-fontweight: 700;
    --breadcrumb-current-letterspacing: 0.4px;
    --breadcrumb-current-texttransform: uppercase;

    /* Banner */
    --banner-bg-color: #57855c;
    --banner-fluidbg-border: none;
    --banner-fluidbg-color: rgba(255,255,255,0);
    --banner-h2-color: rgba(255,255,255,1);
    --banner-p-color: rgba(255,255,255,1);

    /* Base */
    --base-background: rgba(0,0,0,0);
    --base-button--primary-background: var(--portal-primary-dark);
    --base-button--primary-background-hover: var(--portal-primary);
    --base-button--primary-border-color-hover: var(--portal-primary);
    --base-button--primary-color: #fff;
    --base-button--primary-fontsize: var(--text-sm);
    --base-button-danger-background: rgb(220,53,69);
    --base-button-danger-background-hover: rgb(200,35,51);
    --base-button-danger-border: 1px solid rgb(220,53,69);
    --base-button-danger-color: #fff;
    --base-button-danger-fontsize: var(--text-sm);
    --base-button-light-background: rgb(238,239,240);
    --base-button-light-border: 1px solid rgb(208,209,200);
    --base-button-light-color: #444444;
    --base-button-light-fontsize: var(--text-sm);
    --base-button-primary-border: 1px solid var(--portal-primary-dark);
    --base-button-primary-color-hover: #fff;
    --base-color: #444444;
    --base-cardheader-background: var(--portal-secondary);
    --base-cardheader-color: #ffffff;
    --base-cardheader-hover-color: var(--portal-bg-tinted);
    --base-card-border-color: var(--portal-secondary);
    --base-card-border-radius: var(--radius-sm);
    --base-cardheader-padding:     0.75rem 1.25rem;
    --base-cardheader-font-weight: var(--fw-semibold);
    --base-cardheader-radius: var(--radius-sm) var(--radius-sm) 0 0;
    --base-cardheader-title-size: var(--panel-title);
    --base-cardheader-title-line-height: var(--lh-tight);
    --base-modalheader-background: var(--base-cardheader-background);
    --base-modalheader-color: var(--base-cardheader-color);
    --base-modalheader-hover-color: var(--base-cardheader-hover-color);
    --base-modalheader-radius: var(--base-cardheader-radius);
    --base-help-icon-color: #FF5C3E;  /* Help/info modal trigger icon */
    --base-green: #b0ba3c;
    --base-h1-color: #444444;
    --base-h1-font: Arial, Helvetica, sans-serif;
    --base-h1-size: 1.75rem;
    --base-h1-weight: 500;
    --base-h2-color: #444444;
    --base-h2-font: Arial, Helvetica, sans-serif;
    --base-h2-size: 2rem;
    --base-h2-weight: 500;
    --base-h3-color: #444444;
    --base-h3-font: Arial, Helvetica, sans-serif;
    --base-h3-size: 1.75rem;
    --base-h3-weight: 500;
    --base-h4-color: #444444;
    --base-h4-size: 1.5rem;
    --base-h4-weight: 500;
    --base-h5-color: #444444;
    --base-h5-font: Arial, Helvetica, sans-serif;
    --base-h5-size: 1.25rem;
    --base-h5-weight: 500;
    --base-h6-color: #444444;
    --base-h6-font: Arial, Helvetica, sans-serif;
    --base-h6-size: 1rem;
    --base-h6-weight: 500;
    --base-li-color: #444444;
    --base-li-font: Arial, Helvetica, sans-serif;
    --base-li-size: 1rem;
    --base-li-weight: 500;
    --base-link-color: var(--portal-primary-dark);
    --base-size: 1rem;
    --base-weight: 400;

    /* Basket */
    --basket-basketheader-background-color: var(--portal-table-header-bg); /* ★ table header */
    --basket-baskettitle-background-color: #fff;
    --basket-bg-color: rgba(255,255,255,1);
    --basket-border: 1px solid rgba(0,0,0,0.125);
    --basket-cardfooter-bg: rgba(0,0,0,0);
    --basket-cardfooter-border: 1px solid rgba(0,0,0,0);
    --basket-checkout-button-bg: #fff;
    --basket-checkout-button-border: 4px solid #bfbfbf;
    --basket-checkout-button-color: #444444;
    --basket-checkout-button-fontfamily: Arial, Helvetica, sans-serif;
    --basket-checkout-button-radius: 0rem;
    --basket-checkout-button-shadow: 0 0 0 0rem #fff;
    --basket-checkout-button-size: 1.1rem;
    --basket-checkout-button-weight: 600;
    --basket-delivery-button-bg: #28a745;
    --basket-delivery-button-border: #28a745;
    --basket-delivery-button-color: #fff;
    --basket-delivery-button-radius: 0.25rem;
    --basket-delivery-button-shadow: 0 0 0 0.2rem rgba(72,180,97,0.5);
    --basket-delivery-button-size: 1rem;
    --basket-delivery-button-weight: 400;
    --basket-discountcode-bg: #fff;
    --basket-discountcode-border: 3px solid #aaa;
    --basket-discountcode-borderradius: 0px;
    --basket-discountcode-button-bg: #fff;
    --basket-discountcode-button-border: 3px solid #bfbfbf;
    --basket-discountcode-button-color: #444444;
    --basket-discountcode-button-fontsize: 18px;
    --basket-discountcode-button-fontweight: 500;
    --basket-discountcode-h4-fontcolor: #444444;
    --basket-discountcode-h4-fontsize: 1rem;
    --basket-discountcode-h4-fontweight: 700;
    --basket-fluidbg-color: rgba(255,255,255,0);
    --basket-grandtotal-color: #fff;
    --basket-grandtotal-size: 1rem;
    --basket-grandtotal-weight: 700;
    --basket-grandtotal-accent-color: var(--portal-primary-dark);
    --basket-grandtotal-accent-size: 1.05rem;
    --basket-grandtotal-accent-border: 2px solid var(--portal-primary-dark);
    --basket-pageheader-bg: #fff;
    --basket-pageheader-border: 1px solid rgba(0,0,0,0.125);
    --basket-pageheader-color: #fff;
    --basket-pageheader-fontsize: 1rem;
    --basket-pageheader-fontweight: 600;
    --basket-pageheader-h1-color: #444444;
    --basket-pageheader-size: 1.5rem;
    --basket-pageheader-weight: 500;
    --basket-products-sku-color: #ea281f;
    --basket-products-sku-fontsize: 0.95rem;
    --basket-products-sku-fontweight: 700;
    --basket-shipping-bg: rgba(0,0,0,0);
    --basket-shipping-border: 2px solid #e72b29;
    --basket-shipping-borderradius: 0px;
    --basket-shipping-h4-color: #444444;
    --basket-shipping-h4-size: 1.05rem;
    --basket-shipping-h4-weight: 700;
    --basket-shipping-input-color: #444444;
    --basket-shipping-input-size: 1rem;
    --basket-shipping-input-weight: 400;
    --basket-shipping-p-color: #444444;
    --basket-shipping-p-size: 1rem;
    --basket-shipping-p-weight: 600;
    --basket-shipping-select-color: #444444;
    --basket-shipping-select-size: 1rem;
    --basket-shipping-select-weight: 400;
    --basket-smalltext-color: #444444;
    --basket-smalltext-size: 0.75rem;
    --basket-smalltext-weight: 400;
    --basket-subtotals-bg: #e8e8e8;
    --basket-subtotals-border: 0px solid rgba(0,0,0,0);
    --basket-subtotals-borderradius: 0px;
    --basket-subtotals-color: #444444;
    --basket-subtotals-size: 1rem;
    --basket-subtotals-weight: 600;
    --basket-update-button-bg: rgba(0,0,0,0);
    --basket-update-button-border: 3px solid #bfbfbf;
    --basket-update-button-shadow: 0 0 0 0rem rgba(0,0,0,0);

    /* Cart */
    --cart-checkout-button-bg: #28a745;
    --cart-checkout-button-border: #28a745;
    --cart-checkout-button-color: #fff;
    --cart-checkout-button-radius: 0.25rem;
    --cart-checkout-button-shadow: 0 0 0 0.2rem rgba(72,180,97,0.5);
    --cart-checkout-button-size: 1rem;
    --cart-checkout-button-weight: 400;
    --cart-update-button-bg: #28a745;
    --cart-update-button-border: #28a745;
    --cart-update-button-color: #fff;
    --cart-update-button-radius: 0.25rem;
    --cart-update-button-shadow: 0 0 0 0.2rem rgba(72,180,97,0.5);
    --cart-update-button-size: 1rem;
    --cart-update-button-weight: 400;
    --cart-discount-bg: var(--portal-primary);  /* Discount/promo row background in basket */
    --cart-discount-color: #ffffff;             /* Discount/promo row text colour */
    --cartlogin-bg-color: rgba(255,255,255,1);
    --cartlogin-bgfluid-color: rgba(255,255,255,0);
    --cartlogin-color: #444444;
    --cartlogin-h2-color: #444444;
    --cartlogin-h2-size: 2rem;
    --cartlogin-h2-weight: 500;
    --cartlogin-loginbox-bg: rgba(0,0,0,0.03);
    --cartlogin-loginbox-border: 1px solid rgba(0,0,0,0.125);
    --cartlogin-loginbox-borderradius: 6px;
    --cartlogin-size: 1rem;
    --cartlogin-weight: 400;

    /* Category listing */
    --cat-breadcrumb-background: none;
    --cat-list-bg-border: 0px solid rgba(0,0,0,0);
    --cat-list-bg-color: #FFFFFF;
    --cat-list-bg-image: ;
    --cat-list-bg-position: right bottom;
    --cat-list-bg-repeat: no-repeat;
    --cat-list-bg-size: auto auto;
    --cat-list-cat-color: #444444;
    --cat-list-cat-size: 1.125rem;
    --cat-list-cat-weight: 700;
    --cat-list-fluidbg-color: rgba(255,255,255,0);
    --cat-list-prod-addto-bg: var(--portal-primary-dark);
    --cat-list-prod-addto-color: rgba(255,255,255,1);
    --cat-list-prod-addto-size: 1.125rem;
    --cat-list-prod-addto-weight: 600;
    --cat-list-prod-bg: rgba(255,255,255,1);
    --cat-list-prod-color: #444444;
    --cat-list-prod-price-color: #f00;
    --cat-list-prod-price-size: 1rem;
    --cat-list-prod-price-weight: 600;
    --cat-list-prod-size: 16px;
    --cat-list-prod-weight: 500;
    --cat-list-sku-color: #ea281f;
    --cat-list-table-bg-color-hover: #fff;
    --cat-list-tableheader-bg-color: var(--portal-table-header-bg);      /* ★ not in custom-css.css — add here */
    --cat-list-tablerow-bg-color: #FFFFFF;
    --cat-list-tablerow2-bg-color: #f0f0f0;
    --cat-list-tablerow4-bg-color: #FBFBFB;
    --cat-pager-bg: #e8e8e8;
    --cat-pager-bg-active: #f0f0f0;
    --cat-pager-border: 1px solid #666;
    --cat-pager-border-active: 1px solid #666;
    --cat-pager-color: #000;
    --cat-pager-color-active: #000;
    --cat-pager-color-disabled: #666;
    --cat-pager-fontsize: 15px;
    --cat-sidebar-filter-background: var(--portal-bg-light);
    --cat-sidebar-filterbutton-background: var(--portal-primary-dark);
    --cat-sidebar-filterbutton-color: #ffffff;
    --cat-sidebar-filterbutton-font: Arial, Helvetica, sans-serif;
    --cat-sidebar-filterbutton-fontweight: 600;
    --cat-sidebar-filterbutton-padding: 12px;
    --cat-sidebar-heading-background: var(--portal-primary-dark);
    --cat-sidebar-heading-color: #ffffff;
    --cat-sidebar-heading-font: var(--base-font-family);
    --cat-sidebar-heading-fontsize: var(--panel-title);
    --cat-sidebar-heading-fontweight: 600;
    --cat-sidebar-heading-margin-x: 0.45rem;
    --cat-sidebar-heading-texttransform: uppercase;
    --cat-sidebar-subheading-background: var(--portal-table-header-bg); /* Filter slot headings — matches account table thead */
    --cat-sidebar-subheading-color: #ffffff;
    --cat-sidebar-toggle-color: #ffffff;
    --cat-sidebar-filter-color: #333333;
    --cat-sidebar-filter-border: 1px solid #dee2e6;
    --cat-sidebar-filter-headingblock-color: #ffffff;
    --cat-text-color: #444444;
    --cat-text-size: 1rem;
    --cat-title-bg: #c7c8ca;
    --cat-title-border: 28px solid #4c4c4c;
    --cat-title-color: #444444;
    --cat-title-size: 55px;
    --cat-toolbar-background: #FFFFFF;
    --cat-toolbar-border: 1px solid var(--portal-secondary);              /* matches card/separator borders */
    --cat-toolbar-border-radius: 4px;
    --cat-toolbar-button: #444444;

    /* Product cards (grid + list views)
       Override these under .productlist in a client CSS to retheme cards. */
    --pdt-card-border:           1px solid var(--portal-secondary);
    --pdt-card-radius:           var(--radius-sm);
    --pdt-card-bg:               #fff;
    --pdt-card-image-max-width:  300px;
    --pdt-card-name-color:       var(--portal-primary-dark);
    --pdt-card-code-color:       var(--portal-text-muted);
    --pdt-card-price-color:      var(--portal-primary-dark);
    --pdt-card-btn-bg:           var(--portal-primary-dark);
    --pdt-card-btn-hover-bg:     var(--portal-primary);
    --pdt-card-btn-color:        #fff;
    /* List view specific */
    --pdt-card-list-divider:     1px solid rgba(0, 0, 0, .125);
    --pdt-card-list-btn-bg:      transparent;

    /* Checkout */
    --checkout-bg-color: rgba(255,255,255,1);
    --checkout-bgfluid-color: rgba(255,255,255,0);
    --checkout-body-color: #444444;
    --checkout-body-size: 1rem;
    --checkout-body-weight: 400;
    --checkout-borderbox-background: #ffffff;
    --checkout-borderbox-border: 1px solid var(--portal-secondary);
    --checkout-borderbox-radius: var(--radius-sm);
    --checkout-borderbox-form-background: #F8F8F7;
    --checkout-borderbox-form-border: 1px solid #aaa;
    --checkout-borderbox-form-radius: 4px;
    --checkout-borderbox-h4-fontcolor: var(--portal-primary-dark);
    --checkout-borderbox-h4-fontsize: var(--panel-title);
    --checkout-borderbox-h4-fontweight: var(--fw-semibold);
    --checkout-borderbox-h4-letterspacing: 0.03em;
    --checkout-borderbox-h4-marginbottom: 0.75rem;
    --checkout-borderbox-h4-texttransform: uppercase;
    --checkout-borderboxred-a-fontweight: 700;
    --checkout-borderboxred-fontsize: 16px;
    --checkout-borderboxred-fontweight: 600;
    --checkout-borderboxred-input-bg: #e8e8e8;
    --checkout-button-bg-hover: var(--portal-primary);                   /* ★ */
    --checkout-button-border-hover: 1px solid var(--portal-primary);     /* ★ */
    --checkout-button-color: #fff;
    --checkout-button-color-hover: #fff;
    --checkout-button-radius: 4px;
    --checkout-button-shadow: 0 0 0 0rem #fff;
    --checkout-button-size: 1.0rem;
    --checkout-button-weight: 600;
    --checkout-cartline-border: 1px solid rgba(0,0,0,0.15);
    --checkout-grandtotal-color: #444444;
    --checkout-grandtotal-size: 1rem;
    --checkout-grandtotal-weight: 600;
    --checkout-gridheader-color: #444444;
    --checkout-gridheader-size: 1rem;
    --checkout-gridheader-weight: 600;
    --checkout-header-background: rgba(0,0,0,0.03);
    --checkout-header-color: #444444;
    --checkout-header-size: 1rem;
    --checkout-header-weight: 600;
    --checkout-orderreview-detailsspacer-bordertop: 2px solid #aaa;
    --checkout-orderreview-grandtotal-color: #ffffff;
    --checkout-orderreview-grandtotal-size: 1rem;
    --checkout-orderreview-grandtotal-weight: 700;
    --checkout-orderreview-specialprice-fontsize: 13px;
    --checkout-orderreview-specialprice-fontstyle: italic;
    --checkout-orderreview-subtotals-bg: #e8e8e8;
    --checkout-orderreview-subtotals-border: 0px solid rgba(0,0,0,0);
    --checkout-orderreview-subtotals-borderradius: 0px;
    --checkout-orderreview-subtotals-firstrow-border: 2px solid #ffffff;
    --checkout-orderreview-subtotals-lastrow-bg: var(--portal-primary-dark);
    --checkout-orderreview-subtotals-row-border: 2px solid #ffffff;
    --checkout-orderreviewdetails-change-color: #666;
    --checkout-orderreviewdetails-change-fontstyle: italic;
    --checkout-orderreviewdetails-change-fontweight: 600;
    --checkout-shipping-bg: rgba(0,0,0,0);
    --checkout-shipping-border: 2px solid #e72b29;
    --checkout-shipping-borderradius: 0px;
    --checkout-stage-box-bg: #e8e8e8;
    --checkout-stage-box-bg-active: var(--portal-primary-dark);               /* ★ was #333 */
    --checkout-stage-box-border: 3px solid #e8e8e8;
    --checkout-stage-box-border-active: 3px solid var(--portal-primary-dark); /* ★ was #333 */
    --checkout-stage-box-fontcolor: #444444;
    --checkout-stage-box-fontcolor-active: #fff;
    --checkout-stage-box-fontsize: 16px;
    --checkout-stage-box-fontweight: 700;
    --checkout-stage-fontsize: 15px;
    --checkout-stage-fontweight: 700;
    --checkout-subtotals-bg: rgba(0,0,0,0.03);
    --checkout-subtotals-border: 1px solid rgba(0,0,0,0.125);
    --checkout-subtotals-borderradius: 18px;
    --checkout-subtotals-color: #444444;
    --checkout-subtotals-size: 1rem;
    --checkout-subtotals-weight: 600;
    --checkout-upload-button-bg: #ffffff;
    --checkout-upload-button-border: 3px solid #bfbfbf;
    --checkout-upload-button-fontfamily: Arial, Helvetica, sans-serif;
    --checkout-upload-button-fontsize: 18px;
    --checkout-upload-button-fontweight: 500;
    --checkoutheader-pageheader-h1-color: #444444;
    --checkoutheader-pageheader-size: 1.5rem;
    --checkoutheader-pageheader-weight: 500;

    /* CMS */
    --cms-bg: rgba(255,255,255,1);
    --cms-block-bg: #fff;
    --cms-block-color: rgb(34,34,34);
    --cms-block-content-padding: 15px 15px 0px 15px;
    --cms-block-fluidbg: rgba(255,255,255,0);
    --cms-block-size: 14px;
    --cms-block-weight: 400;
    --cms-button--primary-background-hover: var(--portal-primary);
    --cms-button--primary-border-color-hover: 1px solid var(--portal-primary);
    --cms-button-primary-color-hover: #fff;
    --cms-button-primary-fontsize-hover: 1rem;
    --cms-fluidbg: rgba(255,255,255,0);
    --cms-overlay-color: rgba(255,255,255,1);
    --cms-signup-input-bgcolor: #ffffff;

    /* Contact */
    --contact-bg: #ffffff;
    --contact-fluid-bg: rgba(255,255,255,0);

    /* Empty cart */
    --emptycart-bg-color: rgba(255,255,255,1);
    --emptycart-fluidbg-color: rgba(255,255,255,0);
    --emptycart-h2-align: center;
    --emptycart-h2-color: #444444;
    --emptycart-h2-margin: 48px 0;
    --emptycart-h2-size: 18px;
    --emptycart-h2-weight: var(--fw-regular);

    /* Footer */
    --footer-bg: var(--portal-primary-dark);
    --footer-bottom-bg: #212529;
    --footer-bottom-fluid-bg: #212529;
    --footer-bottom-p-color: #777;
    --footer-button-color: #aaa;
    --footer-companydetails-color: #bbb;
    --footer-fluid-bg: var(--portal-primary-dark);
    --footer-bg-image: none;
    --footer-bg-repeat: no-repeat;
    --footer-bg-position: center bottom;
    --footer-bg-size: auto;
    --footer-followus-color: #e2e2e2;
    --footer-followus-hover: #ffffff;
    --footer-font-color: #e2e2e2;
    --footer-heading-color: #ffffff;
    --footer-social-heading-color: var(--portal-primary-dark);
    --footer-social-heading-fontfamily: var(--base-font-family);
    --footer-social-heading-fontsize: 1rem;
    --footer-social-heading-fontweight: 600;
    --footer-social-heading-letterspacing: 0.05em;
    --footer-social-heading-texttransform: uppercase;
    --footer-copyright-bg: #ffffff;
    --footer-hpdeliveryinfo-color: #bbb;
    --footer-hpdeliveryinfo-fontfamily: Arial, Helvetica, sans-serif;
    --footer-hpdeliveryinfo-h3-color: #fff;
    --footer-hpdeliveryinfo-h3-fontfamily: Arial, Helvetica, sans-serif;
    --footer-info-color: #bbb;
    --footer-info-font-size: 1rem;
    --footer-newsletter-button-color: #fff;
    --footer-newsletter-color: #bbb;
    --footer-newsletter-fontfamily: Arial, Helvetica, sans-serif;
    --footer-newsletter-h3-color: #fff;
    --footer-newsletter-h3-fontfamily: Arial, Helvetica, sans-serif;
    --footer-socialicons-bgcolor: rgba(0,0,0,0);
    --footer-socialicons-bgcolor-hover: rgba(0,0,0,0);
    --footer-socialicons-color: #bbb;
    --footer-socialicons-color-hover: var(--portal-primary);
    --footertop-bg: var(--portal-primary-dark);
    --footertop-fluid-bg: transparent;
    --footertop-font-color: #bbb;

    /* Login */
    --login-card-title-color: var(--portal-primary-dark);
    --login-card-title-fontfamily: var(--base-font-family);
    --login-card-title-fontsize: 1.3rem;
    --login-card-title-marginbottom: 24px;
    --login-card-label-color: var(--portal-primary-dark);
    --login-card-label-fontsize: 13px;
    --login-card-label-fontweight: 700;
    --login-card-input-fontsize: 13px;
    --login-card-input-padding: 10px 12px;
    --login-card-button-fontsize: 14px;
    --login-card-button-fontweight: 700;
    --login-card-button-letterspacing: 0.02em;
    --login-card-help-fontsize: 11px;
    --login-card-link-fontsize: 13px;

    /* Header */
    --header-bg-color: #fff;
    --header-border-bottom: 0px solid rgba(0,0,0,0);
    --header-fluidbg-color: #fff;
    --header-topstrip-bg:          var(--portal-primary-dark);  /* nav top strip background */
    --menu-navbar-bg:              var(--portal-primary-dark);  /* horizontal nav bar background */
    --menu-navbar-item-border-right: 1px solid rgba(255,255,255,0.2);
    --menu-navbar-item-border-left-first: 1px solid rgba(255,255,255,0.2);
    --menu-navbar-item-border-right-last: 1px solid rgba(255,255,255,0.2);
    --header-toprow-link-hover-color: var(--portal-primary);   /* top strip link hover text colour */
    --header-toprow-link-hover-bg:    transparent;             /* top strip link hover background */
    --header-menu-fluidbg-color: #ffffff;
    --headerlinks-cartcount-bg: #e52c27;
    --headerlinks-cartcount-color: #fff;
    --headerlinks-color: #444444;
    --headerlinks-createaccount-border: 3px solid #bfbfbf;
    --headerlinks-fontfamily: Arial, Helvetica, sans-serif;
    --headerlinks-navicon-border: 1px solid #000;
    --headerlinks-navicon-borderradius: 6px;
    --headerlinks-telephone-color: #444444;
    --headertop-links-color: #444444;
    --headertop-links-icon-color: var(--portal-primary);

    /* Homepage */
    --homecats-bg-color: rgba(255,255,255,1);
    --homecats-fluidbg-color: #fff;
    --homecats-image-aspect-ratio: 1/1 auto;
    --homecats-title-background: #4c4c4c;
    --homecats-title-color: #fff;
    --homecats-title-weight: 500;
    --homeslider-bg-color: rgba(0,0,0,0);
    --homeslider-fluidbg-color: rgba(255,255,255,0);
    --homeslider-overlay-button: #fff;
    --homeslider-overlay-buttonbg: #713d65;
    --homeslider-overlay-h1-color: #444444;
    --homeslider-overlay-p-color: #fff;

    /* Logo */
    --logobox-logo-max-height-small: 100px;
    --logobox-logo-max-width: 300px;
    --logobox-margin: 0;
    --portal-hdr-logo-margin-top: 0;

    /* Navigation menu */
    --menu-bg: #ffffff;
    --menu-color: #444444;
    --menu-dropdown-bg: #ffffff;
    --menu-dropdown-columns: 3;
    --menu-dropdown-columns-wide: 4;
    --menu-dropdown-hover: var(--portal-primary);
    --menu-dropdown-hoverbg: var(--portal-primary);
    --menu-dropdown-mobile-hoverbg: var(--portal-primary);
    --menu-dropdown-mobile-textdecoration: underline;
    --menu-dropdown-navlink-hover: var(--portal-primary);
    --menu-font-family: Arial, Helvetica, sans-serif;
    --menu-font-size: 1rem;
    --menu-font-weight: 600;
    --menu-hover: var(--portal-primary);
    --menu-hover-background-color: transparent;
    --menu-hover-width: 0px;
    --menu-mobile-bg: rgba(0,0,0,0);
    --menudropdown-background-color: #ffffff;
    --menudropdown-border: 0px solid rgb(196,196,196);
    --menudropdown-borderradius: 0 0 4px 4px;
    --menudropdown-category-borderradius: 0px;
    --menudropdown-category-color: #444444;

    /* News */
    --news-bg-color: rgba(255,255,255,1);
    --news-fluidbg-color: rgba(255,255,255,0);
    --news-sidebar-background: #ddd;
    --news-sidebar-base-color: #444444;
    --news-sidebar-base-size: 1rem;
    --news-sidebar-base-weight: 500;
    --news-sidebar-cats-background: #ddd;
    --news-sidebar-cats-base-color: #444444;
    --news-sidebar-cats-base-size: 1rem;
    --news-sidebar-cats-base-weight: 500;
    --news-sidebar-cats-h3-color: #444444;
    --news-sidebar-cats-h3-size: 1.5rem;
    --news-sidebar-cats-h3-weight: 500;
    --news-sidebar-h4-color: #444444;
    --news-sidebar-h4-size: 1.5rem;
    --news-sidebar-h4-weight: 500;
    --news-sidebar-icon-color: #444444;
    --news-sidebar-icon-hover: #008800;
    --newscategories-bg-color: rgba(255,255,255,1);
    --newscategories-dropdown-color: #444444;
    --newscategories-dropdown-size: 1.25rem;
    --newscategories-dropdown-weight: 500;
    --newscategories-fluidbg-color: rgba(255,255,255,0);
    --newscategories-title-color: #444444;
    --newscategories-title-size: 18px;
    --newscategories-title-weight: 700;
    --newslist-bg-color: rgba(255,255,255,1);
    --newslist-card-background: #f8f8f8;
    --newslist-card-border: 1px solid #ccc;
    --newslist-fluidbg-color: rgba(255,255,255,0);
    --newslist-h3-color: #444444;
    --newslist-h3-size: 16px;
    --newslist-h3-weight: 700;
    --newslist-p-color: #444444;
    --newslist-p-size: 1rem;
    --newslist-p-weight: 400;

    /* Password reset */
    --passwordreset-bg-color: rgba(255,255,255,1);
    --passwordreset-bgfluid-color: rgba(255,255,255,0);
    --passwordreset-h1-color: #767676;
    --passwordreset-h1-size: 2rem;
    --passwordreset-h1-weight: 600;
    --passwordreset-p-color: #444444;
    --passwordreset-p-size: 1rem;
    --passwordreset-p-weight: 400;

    /* Product block */
    --product-block-bg-color: rgba(255,255,255,1);
    --product-block-border: 3px solid #bebebe;
    --product-block-button-bg: #fff;
    --product-block-button-color: #444444;
    --product-block-button-radius: ;
    --product-block-button-size: 1.1rem;
    --product-block-button-weight: 500;
    --product-block-fluidbg-color: rgba(255,255,255,0);
    --product-block-price-color: #444444;
    --product-block-price-size: 24px;
    --product-block-price-weight: 600;
    --product-block-select-color: #444444;
    --product-block-select-padding: 3px;
    --product-block-select-size: 1.125rem;
    --product-block-select-weight: 400;
    --product-block-shortdescription-color: #444444;
    --product-block-shortdescription-size: 1.125rem;
    --product-block-shortdescription-weight: 600;

    /* Product grouped (order/stockgroup table) */
    --product-grouped-addto-bg: var(--portal-primary-dark);
    --product-grouped-addto-bg-hover: var(--portal-primary);
    --product-grouped-addto-border: 3px solid var(--portal-primary-dark);
    --product-grouped-addto-border-hover: var(--portal-primary);
    --product-grouped-addto-color: #fff;
    --product-grouped-addto-color-hover: #fff;
    --product-grouped-addto-fontfamily: Arial, Helvetica, sans-serif;
    --product-grouped-addto-fontsize: 18px;
    --product-grouped-addtobutton-bg-hover: var(--portal-primary);
    --product-grouped-addtobutton-border-hover: 3px solid var(--portal-primary);
    --product-grouped-addtobutton-color-hover: #fff;
    --product-grouped-backtoproducts-color: #444444;
    --product-grouped-backtoproducts-fontsize: 14px;
    --product-grouped-backtoproducts-fontweight: 500;
    --product-grouped-border-color: ;
    --product-grouped-border-radius: 8px;
    --product-grouped-button-bg: #fff;
    --product-grouped-button-radius: ;
    --product-grouped-button-weight: 500;
    --product-grouped-header-background: var(--portal-primary);          /* ★ was #767676 */
    --product-grouped-header-color: #ffffff;
    --product-grouped-price-color: #FF0000;
    --product-grouped-price-weight: 700;
    --product-grouped-row-color: #000;
    --product-grouped-row-even: var(--portal-bg-tinted);
    --product-grouped-row-odd: #ffffff;
    --product-grouped-row-size: 16px;
    --product-grouped-row-weight: 500;
    --product-grouped-tab-border: 1px solid var(--portal-primary);       /* ★ was #767676 */
    --product-grouped-tab-borderradius: 0 0 4px 4px;

    /* Product header */
    --product-header-bg-color: rgba(255,255,255,0);
    --product-header-fluidbg-color: #fff;
    --product-header-h1-color: var(--portal-primary-dark);                    /* ★ was #444444 */
    --product-header-h1-padding: 0;
    --product-header-h1-size: 21px;
    --product-header-h1-weight: 600;
    --product-header-sku-color: #000;
    --product-image-border: 1px solid #e8e8e8;
    --product-image-borderradius: 4px;

    /* Product info tabs */
    --productinfo-a-size: 1rem;
    --productinfo-a-weight: 400;
    --productinfo-bg-color: ;
    --productinfo-bg-image: ;
    --productinfo-bg-position: right bottom;
    --productinfo-bg-repeat: no-repeat;
    --productinfo-fluidbg-color: rgba(255,255,255,0);
    --productinfo-fluidbg-image: ;
    --productinfo-fluidbg-position: right bottom;
    --productinfo-fluidbg-repeat: no-repeat;
    --productinfo-h1-size: 3rem;
    --productinfo-h1-weight: 700;
    --productinfo-h2-size: 2.25rem;
    --productinfo-h2-weight: 700;
    --productinfo-h3-size: 1.5rem;
    --productinfo-h3-weight: 600;
    --productinfo-h4-size: 1.25rem;
    --productinfo-h4-weight: 600;
    --productinfo-h5-size: 1.125rem;
    --productinfo-h5-weight: 500;
    --productinfo-h6-size: 1rem;
    --productinfo-h6-weight: 500;
    --productinfo-p-size: 14px;
    --productinfo-p-weight: 400;
    --productinfotabs-bg-borderbotton: none;
    --productinfotabs-bg-borderradius: 4px 4px 0 0;
    --productinfotabs-bg-bordertop: 1px solid var(--portal-primary);     /* ★ was #767676 */
    --productinfotabs-bg-color: rgba(255,255,255,0);
    --productinfotabs-bg-colour: var(--portal-primary-dark);                  /* ★ was #888 */
    --productinfotabs-bg-padding: 0;
    --productinfotabs-bgcolor: #ffffff;                    /* tab pane content background — must be white */
    --productinfotabs-bgcolor-active: #ffffff;
    --productinfotabs-color-active: var(--portal-primary-dark);               /* ★ was #000 */
    --productinfotabs-fluidbg-color: rgba(255,255,255,0);
    --productinfotabs-infotabs-color: #fff;
    --productinfotabs-infotabs-size: 18px;
    --productinfotabs-infotabs-weight: 600;
    --productinfotabs-minheight: 100px;
    --productinfotitle-bg-color: rgba(255,255,255,0);
    --productinfotitle-fluidbg-color: rgba(255,255,255,0);
    --productinfotitle-h2-color: #713d65;
    --productinfotitle-h2-margin: 78px 0 32px 0;
    --productinfotitle-h2-size: 1.875rem;
    --productinfotitle-h2-weight: 700;
    --productlist-image-aspect-ratio: ;

    /* Recommended products */
    --productrecommended-card-border: 1px solid var(--portal-primary);   /* ★ was var(--base-green) */
    --productrecommended-title-background: var(--portal-primary-dark);        /* ★ was green */
    --productrecommended-title-border-radius: 4px 4px 0 0;
    --productrecommended-title-borderbottom: 1px solid rgba(0,0,0,0);
    --productrecommended-title-borderleft: 1px solid var(--portal-primary);
    --productrecommended-title-borderright: 1px solid var(--portal-primary);
    --productrecommended-title-bordertop: 1px solid var(--portal-primary);
    --productrecommended-title-h4-color: #fff;
    --productrecommended-title-h4-fontsize: 1.0rem;
    --productrecommended-title-h4-fontweight: 500;
    --productrecommended-title-h4-padding: 8px 24px;
    --productrecommended-title-h4-textalign: left;

    /* Registration */

    /* Reviews */

    /* Search */
    --search-button-bg-color: var(--portal-primary-dark);
    --search-button-border: 1px solid var(--portal-primary-dark);
    --search-button-borderradius: 0px 4px 4px 0px;
    --search-button-padding: 4px 12px;
    --search-card-border-radius: 0;
    --search-cardheader-background: var(--portal-primary-dark);
    --search-cardheader-color: #ffffff;
    --search-cardheader-radius: 0;
    --search-cardheader-texttransform: uppercase;
    --search-result-heading-color: var(--portal-primary-dark);
    --search-result-heading-size: 1.1rem;
    --search-result-heading-weight: 600;
    --search-result-summary-color: var(--portal-text-muted);
    --search-result-summary-size: 0.9rem;
    --search-icon-color: #ffffff;

    /* Web login request */
    --weblogin-card-border: none;
    --weblogin-card-footer-background: #ffffff;
    --weblogin-card-footer-border: none;
    --weblogin-strip-background: #4c4c4c;

    /* Sidebar card headers */
    --sidebar-cardheader-accountaccordion-background: var(--portal-primary-dark);  /* ★ was var(--portal-secondary) */
    --sidebar-cardheader-managementaccordion-background: var(--portal-primary-dark); /* ★ was var(--portal-secondary) */
    --sidebar-cardheader-color: var(--base-cardheader-color);
    --sidebar-cardheader-hover-color: var(--base-cardheader-hover-color);
    --sidebar-cardheader-font-weight: var(--base-cardheader-font-weight);
    --sidebar-cardheader-padding: var(--base-cardheader-padding);
    --sidebar-cardheader-radius: var(--base-cardheader-radius);

    /* Status / utility pages */
    --message-title-color: #ffffff;
    --message-title-fontsize: 34px;
    --message-title-lineheight: 48px;
    --message-title-padding: 36px 24px;
    --message-background: rgba(0, 0, 0, 0.75);
    --message-radius: 24px;
    --error-text-fontsize: 1.75rem;
    --error-link-color: #ffffff;

    /* View pages */
    --view-page-heading-color: var(--portal-primary-dark);
    --view-page-heading-size: 1.5rem;
    --view-page-heading-marginbottom: 1.5rem;
    --products-cols-heading-color: var(--portal-primary-dark);
    --products-cols-heading-size: 1.5rem;
    --products-cols-heading-marginbottom: 1rem;
    --account-block-heading-color: var(--portal-primary-dark);
    --account-block-heading-size: 1.25rem;
    --account-block-heading-margin: 1.5rem 0 1rem;

    /* ------------------------------------------------------------------
       ACCOUNT DASHBOARD — override per client in [client]-theme.css
       ------------------------------------------------------------------ */
    --dashboard-stat-box-padding:    1rem;               /* Stat tile inner padding */
    --dashboard-stat-value-size:     1.75rem;            /* Big count number in stat tile */
    --dashboard-stat-hover-shadow:   0 2px 8px rgba(0,0,0,0.1); /* Stat tile hover lift */
    --dashboard-table-padding-y:     0.35rem;            /* Compact row padding — preview tables */
    --dashboard-table-padding-x:     0.75rem;            /* Compact column padding — preview tables */
    --dashboard-invoices-max-height: 320px;              /* Max height of overdue invoices scroll area (~10 rows) */

    --tablebox-background: #ffffff;
    --tablebox-border: 1px solid var(--portal-secondary);
    --tablebox-radius: var(--radius-sm);
    --tablebox-row-divider: 1px solid var(--portal-secondary);

    /* Misc */
    --slider-indicator-bgcolor: #444;
    --slider-indicator-color: #fff;
    --spinner-color: #4EC03f;
    --tickertape-bg-color: #c7c8ca;
    --tickertape-color: #444444;
    --tickertape-fluidbg-color: var(--portal-bg-light);
}

body {
    font-family: var(--base-font-family);
    font-size: var(--text-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    color: var(--portal-text-body);
}

h1, h2, h3 {
    font-family: 'Arial Black', Gadget, sans-serif;
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
}

h1 { font-size: var(--h1); color: var(--portal-primary-dark); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

a {
    color: var(--portal-primary-dark);
}

a:hover {
    color: var(--portal-primary);
    text-decoration: none;
}

/* ==========================================================================
   B. HEADER UTILITY LINKS
   Right-side icon+text links inside the white header bar
   ========================================================================== */

/* Navy top strip — full browser width */
.portal-hdr-topstrip {
    background: var(--header-topstrip-bg);
    padding: 6px 0;
}

/* White bottom strip — desktop only */
.portal-hdr-bottomstrip {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 0;
    overflow: visible;
}

/* Spacer in the navy strip that reserves horizontal space for the logo (desktop) */
.portal-hdr-logo-space {
    width: 120px;
    flex-shrink: 0;
}

/* Logo wrapper in the header white strip */
.portal-hdr-logo {
    display: flex;
    align-items: center;
    padding-right: 16px;
    flex-shrink: 0;
    position: relative;
    margin-top: var(--portal-hdr-logo-margin-top);
    z-index: 10;
}

/* Row 1: links right-aligned in navy strip */
.portal-hdr-top-row {
    display: flex;
    align-items: center;
}

/* Row 2: search + phone + cart */
.portal-hdr-bottom-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Search fills available space in bottom row */
.portal-hdr-search {
    flex: 1 1 auto;
    margin-right: 8px;
    min-width: 0;
}

/* Base link style (row 2 — dark on white) */
.portal-hdr-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--portal-primary-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-left: 1px solid #e0e0e0;
    white-space: nowrap;
    line-height: 1.4;
}

.portal-hdr-bottom-row .portal-hdr-link:first-child {
    border-left: none;
}

.portal-hdr-link i {
    font-size: 14px;
    color: var(--portal-primary-dark);
}

.portal-hdr-link:hover,
.portal-hdr-link:hover i {
    color: var(--portal-primary);
    text-decoration: none;
}

/* Row 1 overrides — white text/icons on navy */
.portal-hdr-top-row .portal-hdr-link {
    color: #ffffff;
    border-left-color: rgba(255,255,255,0.25);
}

.portal-hdr-top-row .portal-hdr-link:first-child {
    border-left: none;
}

.portal-hdr-top-row .portal-hdr-link i {
    color: #ffffff;
}

.portal-hdr-top-row .portal-hdr-link:hover,
.portal-hdr-top-row .portal-hdr-link:hover i {
    color: var(--header-toprow-link-hover-color);
    background: var(--header-toprow-link-hover-bg);
}

/* Phone link */
.portal-hdr-phone {
    font-weight: 700;
}

/* Cart link — reset any cart widget chrome */
.portal-hdr-cart .portal-cart-count,
.portal-hdr-cart .portal-cart-count * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--portal-primary-dark) !important;
    display: inline !important;
}

/* Mobile icon buttons in header */
.portal-mobile-icons {
    gap: 4px;
    flex-shrink: 0;
}

/* Mobile logo: allow shrink and cap size so icons always fit in the strip */
@media (max-width: 767px) {
    .portal-hdr-logo {
        flex-shrink: 1;
        min-width: 0;
        padding-right: 8px;
    }
    .portal-header-main .logobox img {
        max-height: 46px;
        max-width: 160px;
        width: auto;
    }
}

.portal-mobile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    padding: 6px 8px;
    text-decoration: none;
    background: transparent;
    border: none;
    line-height: 1;
}

.portal-mobile-icon:hover {
    color: var(--portal-primary);
    text-decoration: none;
}

.portal-mobile-icon .portal-cart-count,
.portal-mobile-icon .portal-cart-count * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    display: inline !important;
    font-size: 14px;
}

/* ==========================================================================
   C. HEADER — LOGO + SEARCH (C02/C03)
   ========================================================================== */

.portal-header-main {
    background: transparent;
}

.portal-header-main .logobox img {
    max-height: 100px;
    width: auto;
}

/* Search area (desktop, inside .portal-hdr-search) */
.portal-hdr-search .form-group {
    margin-bottom: 0;
    width: 100%;
}

.portal-hdr-search .input-group {
    position: relative;
    width: 100%;
}

.portal-hdr-search .input-group > div {
    width: 100%;
}

.portal-hdr-search .input-group-btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.portal-hdr-search .twitter-typeahead .form-control {
    border-radius: 4px !important;
    border: 1px solid var(--portal-secondary);
    font-size: 13px;
    color: #444;
    height: 38px;
    padding-right: 44px;
}

/* Search submit buttons share the same structure on desktop and mobile. */
.portal-hdr-search .btn-default,
#mobileSearchMob .btn-default {
    background: var(--portal-primary-dark);
    color: #fff;
    border-radius: 0 4px 4px 0 !important;
    height: 38px;
    line-height: 1;
    padding: 0 12px;
}

.portal-hdr-search .btn-default {
    border: 1px solid var(--portal-secondary);
}

.portal-hdr-search .btn-default:hover,
#mobileSearchMob .btn-default:hover {
    background: var(--portal-primary);
    color: #fff;
}

/* Hamburger — dark icon on white background */
.portal-hamburger {
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    padding: 4px 8px;
    background: transparent;
}

.portal-hamburger .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile search bar */
.portal-mobile-search {
    background: var(--portal-bg-light);
    border-bottom: 1px solid #e0e0e0;
}

.portal-mobile-search .collapse {
    padding: 8px;
}

.portal-mobile-search form,
.portal-mobile-search .form-group {
    margin-bottom: 0;
    width: 100%;
}

/* Collins-style: typeahead div fills input-group, button positioned absolutely */
#mobileSearchMob .input-group {
    position: relative;
}

#mobileSearchMob .input-group > div {
    width: 100%;
}

#mobileSearchMob .input-group-btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

#mobileSearchMob .twitter-typeahead .form-control {
    border-radius: 4px !important;
    border: 1px solid var(--portal-secondary);
    font-size: 13px;
    height: 38px;
    padding-right: 44px;
}

#mobileSearchMob .btn-default {
    border: 1px solid var(--portal-primary-dark);
}

/* ==========================================================================
   D. MAIN NAVIGATION (C04)
   Navy background, white text, full-width spacing
   ========================================================================== */

.portal-menubar {
    background: var(--menu-navbar-bg);
    border-bottom: none;
}

.portal-menubar .navbar {
    background: transparent !important;
    padding: 0;
}

/* Full-width spacing across desktop */
.portal-menubar .navbar-nav {
    width: 100%;
    justify-content: space-between;
}

.portal-menubar .navbar-nav .nav-item {
    flex: 1;
    text-align: center;
    border-right: var(--menu-navbar-item-border-right);
}

.portal-menubar .navbar-nav .nav-item:first-child {
    border-left: var(--menu-navbar-item-border-left-first);
}

.portal-menubar .navbar-nav .nav-item:last-child {
    border-right: var(--menu-navbar-item-border-right-last);
}

.portal-menubar .navbar-nav .nav-item > a,
.portal-menubar .navbar-nav .nav-item > .nav-link {
    font-weight: bold;
    font-size: 13px;
    color: #ffffff !important;
    padding: 12px 8px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: block;
}

.portal-menubar .navbar-nav .nav-item > a:hover,
.portal-menubar .navbar-nav .nav-item > .nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff !important;
}

.portal-menubar .navbar-nav .nav-item.active > a,
.portal-menubar .navbar-nav .nav-item.active > .nav-link {
    background: rgba(255,255,255,0.15);
    color: #ffffff !important;
}

/* Dropdown — no border-radius, matches parent width */
.portal-menubar .nav-item.dropdown {
    position: relative;
}

.portal-menubar .dropdown-menu {
    background: var(--portal-primary-dark);
    border: none;
    border-radius: 0;
    border-top: 2px solid var(--portal-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 13px;
    min-width: 100%;
    padding: 4px 0;
}

.portal-menubar .dropdown-item {
    color: #ffffff;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-menubar .dropdown-item:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

/* Parent category item at top of dropdown */
.portal-menubar .dropdown-item-parent {
    font-weight: 700;
}

.portal-menubar .dropdown-divider {
    border-top-color: rgba(255,255,255,0.2);
    margin: 2px 0;
}

/* Mobile nav — overlay (does not push page content down) */
@media (max-width: 991px) {
    .portal-menubar {
        position: relative;
    }

    #collapsibleNavbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1040;
        background: var(--menu-navbar-bg);
        box-shadow: 0 6px 16px rgba(0,0,0,0.35);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .portal-menubar .navbar-nav {
        flex-direction: column;
        justify-content: flex-start;
    }

    .portal-menubar .navbar-nav .nav-item {
        flex: none;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .portal-menubar .navbar-nav .nav-item:first-child {
        border-left: none;
    }

    .portal-menubar .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .portal-menubar .dropdown-menu {
        position: static;
        float: none;
        min-width: 100%;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--portal-primary);
        padding-left: 8px;
    }
}

   E. BRAND CAROUSEL (C07)
   ========================================================================== */

.portal-logo-wrapper {
    padding: 28px 0;
    border-top: 1px solid var(--portal-secondary);
    background: #fff;
}

.portal-section-heading,
.portal-logo-wrapper h3 {
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 1rem;
    text-align: center;
    color: var(--portal-primary-dark);
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
}

.portal-section-heading::before,
.portal-logo-wrapper h3::before {
    content: '';
    width: var(--portal-heading-underline-width);
    height: var(--portal-heading-underline-height);
    background: var(--portal-heading-underline-color);
    position: absolute;
    bottom: -17px;
    left: 0;
    right: 0;
    margin: auto;
}

.portal-logo-wrapper .owl-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    margin-right: 10px;
}

.portal-logo-wrapper .owl-carousel .item img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.2s;
}

.portal-logo-wrapper .owl-carousel .item img:hover {
    filter: grayscale(0%);
}

/* ==========================================================================
   F. CATEGORY LISTING CARDS (C08)
   ========================================================================== */

/* Boilerplate default: rectangular card, label below image.
   Client overrides (circular overlay pattern, etc.) go in [client]-theme.css */
.sub-category-wrapper {
    text-align: center;
    position: relative;
    margin-bottom: var(--cat-card-margin-y);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sub-category-wrapper .category-content {
    width: var(--cat-card-width);
    height: var(--cat-card-height);
    border-radius: var(--cat-card-border-radius);
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-top: var(--cat-card-margin-y);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: var(--portal-bg-tinted);
}

.sub-category-wrapper .category-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Label — boilerplate default: static position, below image */
.sub-category-wrapper .button-wrapper {
    position: static;
    margin-top: 8px;
    pointer-events: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sub-category-wrapper .cat-snippet {
    font-size: var(--cat-snippet-size, 0.8rem);
    color: var(--cat-snippet-color, var(--base-text-color));
    margin-bottom: 6px;
}

.sub-category-wrapper .cat-low-price {
    font-size: 0.8rem;
    color: var(--portal-primary);
    margin-bottom: 6px;
}

.sub-category-wrapper .category-link {
    display: block;
    margin-top: auto;
}

.sub-category-wrapper .category-link a {
    display: block;
    padding: 8px 16px;
    background: var(--portal-primary);
    color: #ffffff;
    font-family: var(--cat-btn-font-family);
    font-size: var(--cat-btn-font-size);
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transform: var(--cat-btn-transform);
    -webkit-transform: var(--cat-btn-transform);
    box-shadow: var(--cat-btn-box-shadow);
    transition: background 0.3s;
}

.sub-category-wrapper .category-link a:hover {
    background: var(--portal-primary-dark) !important;
    color: #fff;
}

/* ==========================================================================
   G. PRODUCT CARD (C10)
   ========================================================================== */

/* ==========================================================================
   G0. CATEGORY TOOLBAR
   default.css sets margin: 0 15px 15px — the 15px side margins make the
   toolbar narrower than the Bootstrap product grid below it. Reset to 0.
   Border colour is driven by --cat-toolbar-border, overridden in :root above.
   ========================================================================== */

.tool-bar {
    margin: 0 0 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#prod_grid .tool-bar .page-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
    flex: 0 0 100%;
}

#prod_grid .tool-bar .page-meta .pager-wrap {
    margin-left: auto;
}

#prod_grid .tool-bar .page-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#prod_grid .tool-bar .page-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

#prod_grid .tool-bar .page-filters > .prompt.custom-select1 {
    width: 170px;
    min-width: 170px;
    flex: 0 0 170px;
}

#prod_grid .tool-bar .pageview {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

#prod_grid .tool-bar .pageview button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
}

#prod_grid .tool-bar .pageview img {
    width: 14px;
    height: 14px;
    top: 0;
}

#prod_grid .tool-bar .pageview i {
    font-size: 14px;
    top: 0;
}

@media (max-width: 575.98px) {
    #prod_grid .tool-bar .page-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    #prod_grid .tool-bar .page-meta .pager-wrap {
        margin-left: 0;
    }

    #prod_grid .tool-bar .page-options {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }

    #prod_grid .tool-bar .page-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #prod_grid .tool-bar .page-filters > .prompt.custom-select1 {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    #prod_grid .tool-bar .pageview {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Override default.css: .productlist h1 { color: #2c3e50; font-size: 22px; font-weight: 500 } */
.productlist h1 {
    color: var(--portal-primary-dark);
    font-size: var(--h1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.pdt-wrapper {
    margin-bottom: 24px;
}

.pdt-content {
    border: var(--pdt-card-border);
    border-radius: var(--pdt-card-radius);
    height: 100%;
    background: var(--pdt-card-bg);
    display: flex;
    flex-direction: column;
}

.pdt-image {
    text-align: center;
    margin-bottom: 10px;
}

.pdt-image img {
    width: 100%;
    max-width: var(--pdt-card-image-max-width);
    border-radius: var(--pdt-card-radius);
    display: block;
    margin: auto;
}

.pdt-description {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pdt.pdt-name {
    font-weight: bold;
    color: var(--pdt-card-name-color);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pdt.pdt-code {
    font-size: 11px;
    color: var(--pdt-card-code-color);
    display: block;
    margin-bottom: 2px;
}

.pdt.pdt-desc {
    font-size: 12px;
    color: var(--portal-text-muted);
    display: block;
    margin-bottom: 2px;
    flex: 1;
}

.pdt.pdt-min-qty,
.pdt.pdt-qty {
    font-size: 11px;
    color: var(--portal-text-muted);
    display: block;
    margin-bottom: 2px;
}

.pdt.pdt-cost {
    display: block;
    font-size: 12px;
    color: var(--portal-text-muted);
    margin-top: 8px;
    margin-bottom: 8px;
}

.pdt.pdt-cost .cp-price {
    color: var(--pdt-card-price-color);
    font-weight: bold;
    font-size: 1.05em;
}

.pdt.pdt-btn {
    margin-top: auto;
}

.pdt.pdt-btn a,
.pdt.pdt-btn button.addtobasket {
    display: block;
    width: 100%;
    background: var(--pdt-card-btn-bg);
    color: var(--pdt-card-btn-color);
    border: none;
    border-radius: var(--pdt-card-radius);
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.pdt.pdt-btn a:hover,
.pdt.pdt-btn button.addtobasket:hover {
    background: var(--pdt-card-btn-hover-bg);
    color: var(--pdt-card-btn-color);
}

/* Dietary attribute icons */
.pdt-description .attributes {
    margin: 6px 0;
}

/* ==========================================================================
   Product card — qty controls, grid/list layout fixes
   ========================================================================== */

/* +/- button sizing — uniform padding to align with input height */
.product-list .productsProduct .input-group-text.btn-number {
    padding: 10px;
}

/* Qty input — centre value, flex to fill space, capped at 4-digit width, no auto margins */
.product-list .form-control {
    text-align: center;
    flex: 1 1 auto;
    max-width: 70px;
    margin: 0;
}

/* Add button — gap from + button, full rounded corners, locked padding across all states */
.product-list .input-group-append:has(.basketsubmit) {
    margin-left: 4px;
}
.product-list .input-group .basketsubmit.addtobasket,
.product-list .input-group .basketsubmit.addtobasket:hover,
.product-list .input-group .basketsubmit.addtobasket:focus,
.product-list .input-group .basketsubmit.addtobasket:active {
    padding: 6px 12px;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: var(--pdt-card-radius);
}
.product-list .form-control[type="number"]::-webkit-inner-spin-button,
.product-list .form-control[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-list .form-control[type="number"] {
    -moz-appearance: textfield;
}

/* Input group — full width, no wrap, stretch so +/- match input height.
   Overrides default.css fixed 168px width, flex-wrap:wrap, align-items:flex-start */
.product-list .input-group {
    width: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* List view — card becomes a horizontal row */
.list .pdt-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
.list .pdt-image {
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}
.list .card-body.pdt-description {
    flex: 0 0 50%;
    max-width: 50%;
}
.list .card-footer.pdt-btn {
    flex: 0 0 25%;
    max-width: 25%;
    background-color: var(--pdt-card-list-btn-bg);
    border-top: none;
    border-left: var(--pdt-card-list-divider);
}

/* List view — tablet (768px–1024px)
   20% image / 50% description / 30% actions; Add button wraps under qty row.
   Note: .list class is on each item wrapper (itemOptions), not on .product-list */
@media (min-width: 768px) and (max-width: 1024px) {
    .list .pdt-image {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .list .card-body.pdt-description {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .list .card-footer.pdt-btn {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .list .input-group {
        flex-wrap: wrap;
    }
    /* Input: remove max-width cap so [−][input][+] row fills same width as Add button */
    .list .form-control {
        max-width: none;
    }
    .list .input-group-append:has(.basketsubmit) {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
    .list .basketsubmit.addtobasket {
        width: 100%;
        border-radius: var(--pdt-card-radius);
    }
}

/* List view — mobile (< 768px)
   Full column stack: image → name/code → shaded footer (price + qty row + icons).
   Matches grid card style — consistent UX regardless of selected view mode. */
@media (max-width: 767px) {
    /* Stack all sections full width — !important overrides equal-specificity desktop rule */
    .list .pdt-content {
        flex-direction: column !important;
    }
    /* flex-basis:100% means 100% height in column layout — use auto+explicit width instead */
    .list .pdt-image,
    .list .card-body.pdt-description,
    .list .card-footer.pdt-btn {
        flex: 0 0 auto !important;
        max-width: 100%;
        width: 100%;
    }
    .list .pdt-image {
        margin-bottom: 0;
    }
    /* Footer: restore shaded card-footer background, top border as divider */
    .list .card-footer.pdt-btn {
        border-left: none;
        border-top: var(--pdt-card-list-divider);
        background-color: var(--portal-bg-light);
    }
    /* Show price in footer (grid-view div) — overrides list-mode display:none */
    .list .card-footer.pdt-btn .grid-view {
        display: block !important;
    }
    /* Hide price from description — it now shows in the footer */
    .list .card-body.pdt-description .list-view {
        display: none;
    }
    /* Keep all input-group elements inline — full card width gives plenty of room */
    .list .input-group {
        flex-wrap: nowrap;
    }
    /* Restore Add button gap and radius (tablet wrap rules don't apply here) */
    .list .input-group-append:has(.basketsubmit) {
        width: auto;
        margin-left: 4px;
        margin-top: 0;
    }
    .list .basketsubmit.addtobasket {
        width: auto;
        border-radius: var(--pdt-card-radius);
    }
}

/* Favourites / quote icons — pointer cursor */
.product-list .prodlist-icons i {
    cursor: pointer;
}

/* ==========================================================================
   H. "OUR STORY" SECTION (C06) — available for future use
   ========================================================================== */

.portal-our-story {
    background: var(--portal-alt-accent);
    padding: 50px 0;
}

.portal-our-story h2 {
    font-family: 'Arial Black', Gadget, sans-serif;
    color: #fff;
    margin-bottom: 20px;
}

.portal-our-story h4 {
    color: #fff;
    font-weight: bold;
}

.portal-our-story p {
    color: #fff;
    line-height: 1.7;
}

.portal-our-story img {
    border-radius: var(--radius-sm);
    width: 100%;
}

/* ==========================================================================
   I. FOOTER (C13)
   ========================================================================== */

.portal-footer {
    background-color: var(--footer-bg);
    background-image: var(--footer-bg-image);
    background-repeat: var(--footer-bg-repeat);
    background-position: var(--footer-bg-position);
    background-size: var(--footer-bg-size);
    border-top: 1px solid #dddddd;
    color: var(--footer-font-color);
    padding: 70px 0;
    font-size: 15px;
}

/* Prevent default.css .productblock .container { background: white } from
   bleeding into the footer if the productblock div is not closed before it.
   Also ensures the footer container is always transparent so .portal-footer
   periwinkle background reaches the full viewport width. */
.portal-footer .container,
.portal-footer-copyright .container {
    background: transparent !important;
}

.portal-footer h4 {
    color: var(--footer-heading-color);
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.portal-footer p,
.portal-footer address {
    color: var(--footer-font-color);
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
}

.portal-footer a {
    color: var(--footer-font-color);
    text-decoration: none;
}

.portal-footer a:hover {
    color: var(--footer-heading-color);
    text-decoration: underline;
}

.portal-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-footer ul li {
    margin-bottom: 6px;
}

.portal-footer ul li a {
    color: var(--footer-font-color);
}

.portal-footer ul li a:hover {
    color: var(--footer-heading-color);
}

.portal-footer .fa,
.portal-footer .fas,
.portal-footer .far {
    color: var(--footer-font-color);
    margin-right: 6px;
    width: 14px;
}

.portal-footer .connect a {
    color: var(--footer-followus-color);
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    margin-right: 4px;
    padding: 4px;
}

.portal-footer .connect a:hover {
    color: var(--footer-followus-hover);
}

.portal-footer-copyright {
    background: var(--footer-copyright-bg);
    padding: 12px 0;
    font-size: 13px;
    color: var(--portal-primary-dark) !important;
    font-family: var(--base-font-family);
    letter-spacing: 0.4px;
    text-align: center;
}

.portal-footer-copyright p,
.portal-footer-copyright a {
    color: var(--portal-primary-dark) !important;
    font-size: 13px;
    letter-spacing: 0.4px;
}

.portal-footer-copyright a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   BREADCRUMB — matches SFF live site style
   Covers both page types:
     - Category/cart pages: .portal-breadcrumb > span > a  (static spans or Yii Breadcrumbs tag=false)
     - Product/stockgroup:  ul.breadcrumb > li > a       (common\widgets\Breadcrumbs)
   NOTE: these classes sit on the INNER content div, never on the Bootstrap col,
   so they cannot interfere with Bootstrap column padding/margin.
   ========================================================================== */

#default .breadcrumb,
#default .portal-breadcrumb {
    background: transparent !important;
    padding: 6px 0;
    margin: 0 0 0 -10px;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
}

/* All crumb links — pipe separator via border-right */
#default .breadcrumb a,
#default .portal-breadcrumb a {
    padding: 0 10px;
    border-right: 1px solid var(--portal-secondary-light);
    color: var(--breadcrumb-link-color);    /* #6c757d — 4.63:1 on white, passes WCAG AA */
    font-size: var(--breadcrumb-link-fontsize);
    font-weight: var(--breadcrumb-link-fontweight);
    text-transform: var(--breadcrumb-link-texttransform);
    letter-spacing: var(--breadcrumb-link-letterspacing);
    line-height: 27px;
    text-decoration: none;
}

#default .breadcrumb a:hover,
#default .portal-breadcrumb a:hover {
    color: var(--breadcrumb-link-color-hover);
}

/* Last crumb (current page) — no pipe, navy */
#default .breadcrumb li:last-child,
#default .breadcrumb-item.active,
#default .portal-breadcrumb span:last-child {
    border-right: none;
    color: var(--breadcrumb-current-color) !important;
    font-weight: var(--breadcrumb-current-fontweight);
    font-size: var(--breadcrumb-current-fontsize);
    text-transform: var(--breadcrumb-current-texttransform);
    letter-spacing: var(--breadcrumb-current-letterspacing);
}
/* Text-only last crumb (no link) — needs explicit padding since there is no <a> to provide it */
#default .breadcrumb li:last-child:not(:has(a)),
#default .portal-breadcrumb span:last-child:not(:has(a)) {
    padding-left: 10px;
}
/* Linked last crumb — inherits padding: 0 10px from the general <a> rule; just kill the pipe */
#default .breadcrumb li:last-child a,
#default .portal-breadcrumb span:last-child a {
    border-right: none;
    color: var(--breadcrumb-current-color) !important;
    font-weight: var(--breadcrumb-current-fontweight);
    font-size: var(--breadcrumb-current-fontsize);
    text-transform: var(--breadcrumb-current-texttransform);
    letter-spacing: var(--breadcrumb-current-letterspacing);
}

/* Suppress all ::before/::after content on breadcrumb li — kills any > separator regardless of source */
#default .breadcrumb li::before,
#default .breadcrumb li::after,
#default .breadcrumb-item + .breadcrumb-item::before,
#default .breadcrumb i,
#default .portal-breadcrumb i {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Ensure old footer classes also use SFF periwinkle if present */
.footer {
    background-color: var(--portal-primary);
}

/* ==========================================================================
   J. LOGIN PAGE
   ========================================================================== */

.portal-login-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    background: var(--portal-bg-light);
}

.portal-login-card {
    background: #fff;
    border: 1px solid var(--portal-secondary);
    border-radius: var(--radius-sm);
    padding: 40px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 2px 12px rgba(22,24,64,0.08);
}

.portal-login-card .portal-login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.portal-login-card .portal-login-logo img {
    max-height: 80px;
    width: auto;
}

.portal-login-card h1,
.portal-login-card h2 {
    font-family: var(--login-card-title-fontfamily);
    font-size: var(--login-card-title-fontsize);
    color: var(--login-card-title-color);
    text-align: center;
    margin-bottom: var(--login-card-title-marginbottom);
}

.portal-login-card .form-group label {
    font-size: var(--login-card-label-fontsize);
    color: var(--login-card-label-color);
    font-weight: var(--login-card-label-fontweight);
}

.portal-login-card .form-control {
    border: 1px solid var(--portal-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--login-card-input-fontsize);
    color: var(--portal-text-body);
    padding: var(--login-card-input-padding);
}

.portal-login-card .form-control:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 2px var(--portal-focus-ring);
}

.portal-login-card .btn-primary {
    background: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
    border-radius: var(--radius-sm);
    width: 100%;
    padding: 10px;
    font-size: var(--login-card-button-fontsize);
    font-weight: var(--login-card-button-fontweight);
    letter-spacing: var(--login-card-button-letterspacing);
}

.portal-login-card .btn-primary:hover {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
}

.portal-login-card .help-block {
    font-size: var(--login-card-help-fontsize);
    color: var(--portal-text-muted);
}

.portal-login-card a {
    color: var(--portal-primary-dark);
    font-size: var(--login-card-link-fontsize);
}

.portal-login-card a:hover {
    color: var(--portal-primary);
}

/* ==========================================================================
   K. ALERTS + FLASH MESSAGES
   Shared top-of-page alert presentation. Both the Pjax flash stack
   (#system_alerts) and the legacy JS flash box (#flashmessage) are kept
   visually aligned and controlled by the --alert-* token family.
   ========================================================================== */

#system_alerts,
#flashmessage {
    background: transparent;
    margin: 0;
}

#system_alerts .container,
#flashmessage .container {
    padding-top: 0;
    padding-bottom: 0;
}

#flashmessage {
    position: relative;
    top: auto;
    z-index: 1050;
}

#system_alerts .alert,
#flashmessage .alert {
    border-radius: var(--alert-radius);
    box-shadow: var(--alert-shadow);
    font-size: var(--alertbox-font-size);
    font-weight: var(--alertbox-font-weight);
    margin: 0 0 var(--alert-spacing-y);
    padding: var(--alert-padding-y) calc(var(--alert-padding-x) * 2) var(--alert-padding-y) var(--alert-padding-x);
}

#system_alerts .alert-info,
#flashmessage .alert-info {
    color: var(--alert-info-color);
    background-color: var(--alert-info-background);
    border: var(--alert-info-border);
}

#system_alerts .alert-success,
#flashmessage .alert-success {
    color: var(--alert-success-color);
    background-color: var(--alert-success-background);
    border: var(--alert-success-border);
}

#system_alerts .alert-warning,
#flashmessage .alert-warning {
    color: var(--alert-warning-color);
    background-color: var(--alert-warning-background);
    border: var(--alert-warning-border);
}

#system_alerts .alert-danger,
#flashmessage .alert-danger {
    color: var(--alert-danger-color);
    background-color: var(--alert-danger-background);
    border: var(--alert-danger-border);
}

#system_alerts .alert .close,
#flashmessage .alert .close {
    color: var(--alert-close-color);
    opacity: var(--alert-close-opacity);
    padding: var(--alert-padding-y) var(--alert-padding-x);
    text-shadow: none;
}

#system_alerts .alert .close:hover,
#flashmessage .alert .close:hover {
    opacity: 1;
}

#system_alerts .alert span,
#flashmessage #message,
#flashmessage #message span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

#flashmessage #message > br:first-child,
#flashmessage #message:empty {
    display: none;
}

/* ==========================================================================
   L. BACK TO TOP BUTTON
   ========================================================================== */

.back-to-top {
    height: auto;
    overflow: visible;
    width: auto;
}

.back-to-top .scrollup {
    background: var(--portal-primary-dark);
    box-sizing: border-box;
    border-radius: 50%;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top .scrollup span {
    background: transparent;
    border: 0;
    border-radius: 0;
    height: auto;
    width: auto;
    margin-left: 0;
    padding: 0;
}

.back-to-top .scrollup:hover {
    background: var(--portal-primary);
}

/* ==========================================================================
   L2. SIDEBAR — ACCOUNT ACCORDION & CATEGORY LIST
   ========================================================================== */

/* "My Account" toggle button — match card-header treatment.
   Bootstrap's .btn gives all-corner border-radius; override to top-only. */
.sidebar #accountaccordion .btn.btn-link,
.sidebar #managementaccordion .btn.btn-link,
.sidebar #cataccordion .btn.btn-link,
.sidebar #recentaccordion .btn.btn-link,
.sidebar #newsaccordion .btn.btn-link {
    align-items: center;
    color: var(--sidebar-cardheader-color) !important;
    display: flex;
    font-weight: var(--sidebar-cardheader-font-weight);
    justify-content: space-between;
    border-radius: var(--sidebar-cardheader-radius);
    padding: var(--sidebar-cardheader-padding);
    width: 100%;
    text-align: left;
}

.sidebar #accountaccordion .btn.btn-link {
    background-color: var(--sidebar-cardheader-accountaccordion-background) !important;
}

.sidebar #managementaccordion .btn.btn-link {
    background-color: var(--sidebar-cardheader-managementaccordion-background) !important;
}

.sidebar #cataccordion .btn.btn-link,
.sidebar #recentaccordion .btn.btn-link,
.sidebar #newsaccordion .btn.btn-link {
    background-color: var(--sidebar-cardheader-accountaccordion-background) !important;
}

.sidebar #accountaccordion .btn.btn-link:hover,
.sidebar #managementaccordion .btn.btn-link:hover,
.sidebar #cataccordion .btn.btn-link:hover,
.sidebar #recentaccordion .btn.btn-link:hover,
.sidebar #newsaccordion .btn.btn-link:hover {
    color: var(--sidebar-cardheader-hover-color) !important;
    text-decoration: none;
}

.sidebar #accountaccordion .btn.btn-link i,
.sidebar #managementaccordion .btn.btn-link i,
.sidebar #cataccordion .btn.btn-link i,
.sidebar #recentaccordion .btn.btn-link i,
.sidebar #newsaccordion .btn.btn-link i {
    flex: 0 0 auto;
    margin-left: 0.75rem;
    margin-top: 0;
    transition: all 0.5s ease 0s;
}

/* #cataccordion button sits inside .card-header — default.css sets position:absolute on
   .sidebar .card-header i which breaks flex alignment. Override here per the known conflict note. */
.sidebar #cataccordion .btn.btn-link i {
    position: static;
}

.sidebar #accountaccordion .btn.btn-link.collapsed i,
.sidebar #managementaccordion .btn.btn-link.collapsed i,
.sidebar #cataccordion .btn.btn-link.collapsed i,
.sidebar #recentaccordion .btn.btn-link.collapsed i,
.sidebar #newsaccordion .btn.btn-link.collapsed i {
    transform: rotate(180deg);
}

/* Collapse panel — outer frame only, no top border (sits flush under button) */
.sidebar #account-sidemenu,
.sidebar #management-sidemenu,
.sidebar #recent-list,
.sidebar #news-list {
    border: 1px solid var(--portal-secondary);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* List items — strip Bootstrap's all-sides border, use bottom-only dividers.
   This avoids the container border + item border doubling. */
.sidebar .list-group-item {
    color: var(--portal-primary-dark) !important;
    background-color: #ffffff;
    border: none;
    border-bottom: 1px solid var(--portal-secondary);
    margin-bottom: 0;
    font-size: var(--menu);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Last item has no bottom divider — outer container provides the edge */
.sidebar .list-group-item:last-child {
    border-bottom: none;
}

.sidebar .list-group-item:hover {
    color: var(--portal-primary) !important;
    background-color: var(--portal-bg-tinted);
}

/* Active/current page item */
.sidebar .list-group-item.list-group-item-light {
    background-color: var(--portal-bg-tinted);
    color: var(--portal-primary-dark) !important;
    font-weight: 600;
}

/* Remove the extra top border on the list-group container itself
   (Bootstrap border + first item border = visible double line) */
.sidebar .my-account .list-group,
.sidebar .management-portal .list-group {
    border-top: none;
}

.sidebar .recently-viewed-items,
.sidebar .news-sidebar-items {
    background-color: #ffffff;
}

/* Browse By category links — hierarchical nav */
.sidebar .categories .card-body {
    padding: 0;
}

/* Top-level links */
.sidebar .categories .card-body a.browse-top {
    color: var(--portal-primary-dark);
    font-size: var(--menu);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    padding: 9px 1.25rem;
    text-decoration: none;
}

.sidebar .categories .card-body a.browse-top:hover {
    color: var(--portal-primary);
    background-color: var(--portal-bg-tinted);
    text-decoration: none;
}

/* Active = currently viewed category */
.sidebar .categories .card-body a.browse-active {
    color: var(--portal-primary);
    font-weight: var(--fw-bold);
}

/* Expanded parent when viewing a child */
.sidebar .categories .card-body a.browse-open {
    color: var(--portal-primary-dark);
    font-weight: var(--fw-bold);
}

/* Child links container — indented */
.sidebar .categories .browse-children {
    border-left: 2px solid var(--portal-bg-tinted);
    margin-left: 1.25rem;
}

/* Child links */
.sidebar .categories .card-body a.browse-child {
    color: var(--portal-primary-dark);
    font-size: calc(var(--menu) - 0.0625rem);
    font-weight: var(--fw-normal);
    line-height: 1.4;
    padding: 6px 1rem;
    text-decoration: none;
}

.sidebar .categories .card-body a.browse-child:hover {
    color: var(--portal-primary);
    background-color: var(--portal-bg-tinted);
    text-decoration: none;
}

.sidebar .categories .card-body a.browse-child.browse-active {
    color: var(--portal-primary);
    font-weight: var(--fw-bold);
}

/* Icons */
.sidebar .categories .card-body a i {
    font-size: var(--menu);
    width: 1.1em;
    text-align: center;
    margin-right: 4px;
    color: inherit;
}

/* Recently Viewed Products / Latest News — aligned to sidebar accordion pattern */
.sidebar .recent-item,
.sidebar .news-sidebar-item {
    margin: 0;
}

.sidebar .recent-item-bordered,
.sidebar .news-sidebar-item-bordered {
    border-bottom: 1px solid var(--portal-secondary);
}

.sidebar .recent-item a {
    display: block;
    padding: 9px 1.25rem;
    color: var(--portal-primary-dark);
    font-size: var(--menu);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    text-decoration: none;
}

.sidebar .recent-item a:hover {
    color: var(--portal-primary);
    background-color: var(--portal-bg-tinted);
    text-decoration: none;
}

.sidebar .recent-name {
    margin: 0;
    font-size: var(--menu);
    font-weight: var(--fw-medium);
    color: var(--portal-primary-dark);
}

.sidebar .news-sidebar-item {
    padding: 1rem 1.25rem;
}

.sidebar .news-sidebar-item .news-title,
.sidebar .news-sidebar-item h4 {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   M. CARD HEADERS & ACCORDION TABS (global — all pages)
   Background var(--portal-secondary) (SFF mid-periwinkle), white text. !important used
   because default.css has many high-specificity context overrides
   (.checkout, .myaccount, #accordion ID selectors etc.) that would otherwise
   win. Matching variables in custom-css.css should also be updated via admin
   — see RESKIN_CHANGELOG.md Technical Reference.
   ========================================================================== */

.card-header {
    background-color: var(--base-cardheader-background) !important;
    color: var(--base-cardheader-color) !important;
    font-weight: var(--base-cardheader-font-weight);
    border-radius: var(--base-cardheader-radius);
    padding: var(--base-cardheader-padding);
    border-bottom: 0;
}

/* Modal header — matches card-header treatment so client CSS overrides flow through */
.modal-header {
    background-color: var(--base-modalheader-background);
    color: var(--base-modalheader-color);
    border-radius: var(--base-modalheader-radius);
    border-bottom: 0;
}
.modal-header .modal-title,
.modal-header .close {
    color: var(--base-modalheader-color);
}
.modal-header .close:hover {
    color: var(--base-modalheader-hover-color);
    opacity: 1;
}

/* Text-bearing children — excludes .btn so action buttons (btn-primary,
   btn-success) inside card-header wrappers keep Bootstrap white text */
.card-header a,
.card-header .btn-link,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header p, .card-header span:not([class*="fa"]) {
    color: var(--base-cardheader-color) !important;
    font-weight: var(--base-cardheader-font-weight);
}

/* Panel/card headers: constrain heading size to panel-title token (16px)
   so card headers stay compact regardless of h-level used in markup */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    font-size: var(--base-cardheader-title-size);
    line-height: var(--base-cardheader-title-line-height);
    margin-bottom: 0;
}

.card-header a:hover,
.card-header .btn-link:hover {
    color: var(--base-cardheader-hover-color) !important;
    text-decoration: none;
}

/* btn-outline-light in card headers: Bootstrap fills background white on hover,
   so force text to dark to remain readable */
.card-header .btn-outline-light:hover,
.card-header .btn-outline-light:focus {
    color: var(--base-cardheader-background) !important;
}

/* ==========================================================================
   N. GENERAL BUTTON OVERRIDES
   Primary btn throughout site uses SFF navy
   ========================================================================== */

/* Sitewide button font-size and font-weight — controlled by tokens.
   Bootstrap default is 1rem; normalise to match default.css basket buttons (14px). */
.btn {
    font-size: var(--text-sm);
    font-weight: var(--btn-font-weight);
}

.btn.btn-primary {
    background-color: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: var(--btn-font-weight);
    padding: 8px 18px;
    transition: none;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--portal-primary) !important;
    border-color: var(--portal-primary) !important;
    color: #ffffff !important;
    font-size: var(--text-sm) !important;
    padding: 8px 18px;
    box-shadow: none;
}

/* btn-danger — consistent padding + hover state (default.css rule has no hover) */
.btn.btn-danger {
    padding: 8px 18px;
}
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active {
    background-color: var(--base-button-danger-background-hover) !important;
    border-color: var(--base-button-danger-background-hover) !important;
    color: #fff !important;
}

/* btn-light in .myaccount context — outline-secondary appearance with portal-theme control.
   Scoped to .myaccount to avoid affecting resources.php nav-tab buttons. */
.myaccount .btn.btn-light {
    padding: 8px 18px;
    background-color: transparent;
    border-color: var(--portal-secondary, #6c757d);
    color: var(--portal-secondary, #6c757d);
}
.myaccount .btn.btn-light:hover,
.myaccount .btn.btn-light:focus,
.myaccount .btn.btn-light:active {
    background-color: var(--portal-secondary, #6c757d) !important;
    border-color: var(--portal-secondary, #6c757d) !important;
    color: #fff !important;
}

/* Favourites in default.css shrink primary buttons to 4px top/bottom padding.
   Restore the shared portal primary button size so normal and hover states match. */
.favourites .btn.btn-primary {
    padding: 8px 18px;
    transition: none;
}
.favourites .btn.btn-primary:hover,
.favourites .btn.btn-primary:focus,
.favourites .btn.btn-primary:active {
    padding: 8px 18px;
}
.favourites .btn.btn-primary .button,
.favourites .btn.btn-primary:hover .button,
.favourites .btn.btn-primary:focus .button,
.favourites .btn.btn-primary:active .button {
    display: inline-block;
    line-height: 1.5;
    color: #fff !important;
}

/* ==========================================================================
   N2. GLOBAL CARD BORDERS
   Bootstrap default is rgba(0,0,0,.125) grey. default.css overrides checkout
   cards to solid black. Both overridden here to use --portal-border throughout.
   ========================================================================== */

.card {
    border-color: var(--base-card-border-color);
    border-radius: var(--base-card-border-radius);
}

/* Any card nested inside an account or checkout card (e.g. common\widgets\GridView inner card)
   should not double-up with border/margin from the outer card */
.myaccount > .card .card,
.checkout > .card .card {
    border: none;
    margin-bottom: 0;
}

/* Override default.css .checkout .card { border: 1px solid rgb(0,0,0) } */
.checkout .card {
    border-color: var(--base-card-border-color) !important;
}
/* Override default.css .checkout .card-header { border-bottom: 1px solid rgb(0,0,0) } */
.checkout .card-header {
    border-bottom: 0 !important;
}

/* Override default.css .sidebar .card { border: 1px solid #2c3e50 !important } */
.sidebar .card {
    border: 1px solid var(--base-card-border-color) !important;
}

/* ==========================================================================
   O. BASKET / CART
   ========================================================================== */

/* Basket cart card-header — restore standard card-header styling.
   default.css .basket .card-header (specificity 0,2,0) sets padding: 0.125rem (razor-thin)
   and custom background/colour tokens that differ from the portal card-header treatment.
   This rule (0,3,0 + !important) beats it and aligns the basket cart card with all other
   portal card-headers. */
.basket .cart .card-header {
    background-color: var(--base-cardheader-background) !important;
    color: var(--base-cardheader-color) !important;
    padding: var(--base-cardheader-padding) !important;
    border-bottom: 0 !important;
    border-radius: var(--base-cardheader-radius);
}
.basket .cart .card-header h5,
.basket .cart .card-header .fas {
    color: var(--base-cardheader-color) !important;
}

/* Basket table content lives in .card-body (was misused .card-header).
   No override needed for background/color — card-body has no forced colours. */

/* Qty-button icons — explicit colour so basket icons are not affected by
   any inherited colour, and both basket and product page match */
.btn-number [class*="fa"] {
    color: var(--portal-primary-dark);
}

/* Product/stock code links in basket remain periwinkle */
.basket .cart .card-body a:not(.btn) {
    color: var(--portal-primary) !important;
    font-weight: 400;
}

/* Remove item buttons — transparent hover keeps the trash icon visible.
   Bootstrap's btn-outline-danger solid red fill (#dc3545) causes the icon
   to disappear against the filled background. A low-opacity tint instead
   retains icon contrast at all times. */
.basket .btn-remove:hover,
.basket .btn-remove:focus {
    background-color: rgba(220, 53, 69, 0.12) !important;
    color: var(--table-btn-action-color, #dc3545) !important;
    border-color: var(--table-btn-action-color, #dc3545) !important;
}

/* Continue Shopping button shares the checkout back-button treatment:
   default.css constrains legacy widths, so normalise layout and apply the
   filled primary treatment within these specific contexts only. */
#basket .basketcontinueshopping .btn,
.checkoutbuttons .basketcontinueshopping .btn,
.checkoutbuttons .previous.btn {
    width: auto;
    white-space: nowrap;
}

#basket .basketcontinueshopping .btn.btn-primary,
.checkoutbuttons .basketcontinueshopping .btn.btn-default,
.checkoutbuttons .previous.btn.btn-default {
    background-color: var(--base-button--primary-background);
    border: var(--base-button-primary-border);
    color: var(--base-button--primary-color);
    font-size: var(--base-button--primary-fontsize);
    font-weight: var(--btn-font-weight);
    padding: 8px 18px;
    transition: none;
    transform: none;
}

#basket .basketcontinueshopping .btn.btn-primary:hover,
#basket .basketcontinueshopping .btn.btn-primary:focus,
#basket .basketcontinueshopping .btn.btn-primary:active,
.checkoutbuttons .basketcontinueshopping .btn.btn-default:hover,
.checkoutbuttons .basketcontinueshopping .btn.btn-default:focus,
.checkoutbuttons .basketcontinueshopping .btn.btn-default:active,
.checkoutbuttons .previous.btn.btn-default:hover,
.checkoutbuttons .previous.btn.btn-default:focus,
.checkoutbuttons .previous.btn.btn-default:active {
    background-color: var(--base-button--primary-background-hover) !important;
    border-color: var(--base-button--primary-border-color-hover) !important;
    color: var(--base-button-primary-color-hover) !important;
    font-size: var(--base-button--primary-fontsize);
    padding: 8px 18px;
    box-shadow: none;
    transform: none;
}

/* Prevent default.css a:hover/a:visited (specificity 0,1,1) from overriding Bootstrap btn hover colours
   on <a> elements used as buttons. Targets .button spans inside solid-colour btn variants. */
#basket .basketcontinueshopping .btn .button,
#basket .basketcontinueshopping .btn:hover .button,
#basket .basketcontinueshopping .btn:focus .button,
#basket .basketcontinueshopping .btn:active .button,
.checkoutbuttons .basketcontinueshopping .btn .button,
.checkoutbuttons .basketcontinueshopping .btn:hover .button,
.checkoutbuttons .basketcontinueshopping .btn:focus .button,
.checkoutbuttons .basketcontinueshopping .btn:active .button,
.checkoutbuttons .previous.btn .button,
.checkoutbuttons .previous.btn:hover .button,
.checkoutbuttons .previous.btn:focus .button,
.checkoutbuttons .previous.btn:active .button,
.myaccount .btn-primary .button,
.myaccount .btn-primary:hover .button,
.myaccount .btn-primary:focus .button,
.myaccount .btn-primary:active .button,
.myaccount .btn-danger .button,
.myaccount .btn-danger:hover .button,
.myaccount .btn-danger:focus .button,
.myaccount .btn-danger:active .button,
.myaccount .btn-light:hover .button,
.myaccount .btn-light:focus .button,
.myaccount .btn-light:active .button {
    color: #fff !important;
}
.myaccount .btn-light .button {
    color: var(--portal-secondary, #6c757d) !important;
}

/* Footer social heading — generic boilerplate default.
   Client-specific styling (e.g. SFF "Sweet Tweets") goes in [client]-theme.css */
.portal-social-heading {
    font-family: var(--footer-social-heading-fontfamily);
    font-size: var(--footer-social-heading-fontsize);
    font-weight: var(--footer-social-heading-fontweight);
    color: var(--footer-social-heading-color);
    text-transform: var(--footer-social-heading-texttransform);
    letter-spacing: var(--footer-social-heading-letterspacing);
    margin-bottom: 0.75rem;
}
.portal-follow {
    font-size: 0.875rem;
    color: var(--portal-text-muted);
    display: block;
    margin-bottom: 0.5rem;
}
.portal-follow a {
    color: var(--portal-primary);
    text-decoration: none;
}
.portal-follow a:hover {
    text-decoration: underline;
}

/* Basket page — main cart table */
.cart.card .table {
    font-size: 0.875rem;
}
.cart.card .table td,
.cart.card .table th {
    padding: 0.5rem;
}
.cart.card .table td p,
.cart.card .table th p {
    font-size: inherit;
    margin-bottom: 0;
}

/* Basket — discount/promo row */
.cart-discount-row {
    background-color: var(--cart-discount-bg);
    color: var(--cart-discount-color);
    text-align: center;
}

/* Checkout stage 3 — address/info cards (Invoice, Delivery, Extra Info, Payment) */
.portal-confirm-cards .card-body {
    font-size: 90%;
}
.portal-confirm-cards .card-body p {
    font-size: inherit;
}
.portal-confirm-cards .card-body .table td,
.portal-confirm-cards .card-body .table th {
    padding: 0.5rem;
    font-size: inherit;
}

/* Checkout stage 3 — Your Basket review table */
.portal-basket-review .table {
    font-size: 90%;
}
.portal-basket-review .table td,
.portal-basket-review .table th {
    padding: 0.5rem;
}
.portal-basket-review .table td p,
.portal-basket-review .table th p {
    font-size: inherit;
    margin-bottom: 0;
}
.portal-basket-review .basket-thumb img {
    width: 48px;
    height: 48px;
}

/* Page title */
.baskettitle {
    padding: 1rem 0;
}

h1.page-header,
h1.page-title {
    font-size: var(--h1);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
    color: var(--portal-primary-dark);
    border-bottom: none;
    margin-bottom: 0.5rem;
}

/* Proforma order review product image */
.thumbnail-image {
    height: auto;
    margin-bottom: 12px;
    object-fit: cover;
    width: 100%;
}

/* Product thumbnail */
.basket-thumb img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Table header rows — beats Bootstrap's .table .thead-dark th (two-class specificity = 0,2,1)
   !important required as Bootstrap uses .table .thead-dark th with background-color: #343a40
   Uses --portal-table-header-bg (not --portal-primary) to ensure WCAG AA contrast with white text */
.table thead th,
.table .thead-dark th {
    background-color: var(--portal-table-header-bg) !important;
    color: #ffffff !important;
    border-color: var(--portal-table-header-bg) !important;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    vertical-align: middle;
}

.cart .table thead th,
.cart .table .thead-dark th {
    background-color: var(--portal-table-header-bg) !important;
    color: #ffffff !important;
    border-color: var(--portal-table-header-bg) !important;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

/* Action icons (tool-tip links) — normalised to 1rem site-wide */
.tool-tip i,
.myaccount .tool-tip i,
.erp-orders-index .tool-tip i {
    font-size: 1rem;
}

/* Account + checkout tables — 13px, matches card-header label size */
.myaccount .table,
.checkout .table,
.erp-orders-index .table {
    font-size: 0.8125rem;
}

.myaccount .table td,
.checkout .table td,
.erp-orders-index .table td {
    line-height: 1.4;
    padding: 0.75rem 12px;
    vertical-align: middle;
}

.myaccount .table th,
.checkout .table th,
.erp-orders-index .table th {
    padding: 10px 12px;
    vertical-align: top;
}

/* Stripe colour */
.cart .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--portal-bg-tinted);
}

.cart .table td {
    vertical-align: middle;
}

/* Loyalty points redemption row (inline style override) */
.cart .table tr td[colspan="8"] {
    background-color: var(--portal-primary) !important;
    color: #ffffff !important;
}

/* Empty cart message — styled via tokens in :root; rule lives in default.css */

/* ==========================================================================
   P. CHECKOUT FLOW
   ========================================================================== */

/* Step progress bar */
.progressbar {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    padding: 1.5rem 0 1rem;
}

.progressbar .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkoutstage {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--portal-bg-light);
    border: 2px solid var(--portal-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--portal-text-muted);
}

.checkoutstage p {
    margin: 0;
    line-height: 1;
}

.stage.active .checkoutstage {
    background-color: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
    color: #ffffff;
}

.stage.active > p {
    color: var(--portal-primary-dark);
    font-weight: 600;
}

.stage > p {
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    margin-bottom: 0;
}

/* Bordered content boxes within checkout forms */
.checkout-borderbox {
    border: var(--checkout-borderbox-border);
    border-radius: var(--checkout-borderbox-radius);
    padding: 1.25rem;
    background-color: var(--checkout-borderbox-background);
    margin-bottom: 1rem;
}

.checkout-borderbox h4 {
    color: var(--checkout-borderbox-h4-fontcolor);
    font-size: var(--checkout-borderbox-h4-fontsize);
    font-weight: var(--checkout-borderbox-h4-fontweight);
    text-transform: var(--checkout-borderbox-h4-texttransform);
    letter-spacing: var(--checkout-borderbox-h4-letterspacing);
    margin-bottom: var(--checkout-borderbox-h4-marginbottom);
}

/* Address form label text */
.checkout-address p {
    font-weight: 500;
    color: var(--portal-primary-dark);
    margin-bottom: 0;
    padding-top: 0.5rem;
}

/* One-page checkout (checkout.php) — card-header/card-body inside checkout-borderbox.
   The staged checkout uses <h4> + bare content inside checkout-borderbox, so it only
   has the borderbox padding (1.25rem). The one-page checkout wraps with Bootstrap
   card-header/card-body which would double the padding.
   default.css overrides .checkout .checkout-borderbox padding to 0.5rem horizontal,
   so we use negative margins of -0.5rem to make the header span full borderbox width,
   matching the My Account card-header style. Top border-radius matches the borderbox corners. */
.checkout-borderbox > .card-header {
    margin: -0.5rem -0.5rem 0.75rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--checkout-borderbox-radius) var(--checkout-borderbox-radius) 0 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    border-bottom: 0;
}

.checkout-borderbox > .card-body {
    padding: 0;
}

/* Order review section (Your Quote) — clip Bootstrap row negative-margin overflow at
   the borderbox border edge. This prevents the T&C custom checkbox indicator and other
   row-based content from overflowing outside the border. The gridheader row naturally
   extends to fill the clipped width, giving a flush full-width header band. */
.checkout-borderbox.quotereview {
    overflow: hidden;
}

/* No margin gap between Your Quote card-header and the gridheader row that follows. */
.checkout-borderbox.quotereview > .card-header {
    margin-bottom: 0;
}

/* Strip Bootstrap card-footer styling — transparent background, portal border,
   no horizontal padding (checkout-borderbox padding provides the inset). */
.checkout-borderbox > .card-footer {
    background-color: transparent;
    border-top: var(--checkout-borderbox-border);
    padding-left: 0;
    padding-right: 0;
}

/* One-page checkout order summary (_orderbody) — div-based rows use <p> tags
   that carry the browser's default 1rem bottom margin, making rows look
   over-spaced. Suppress the margin and match basket font size.
   Grand total (default.css specificity 0,3,1) needs an explicit match to
   prevent the 1rem --checkout-grandtotal-size token from overriding --text-sm. */
.checkout .cartline p,
.checkout .subtotals p {
    margin-bottom: 0;
    font-size: var(--text-sm);
}
.checkout .subtotals .grand-total p {
    font-size: var(--text-sm);
}

/* One-page checkout — "Your Quote" column header row (gridheader).
   Matches the stage-3 order-review table header style: base-cardheader
   background and white text. Scoped to .checkout (not .checkout-container)
   so it applies in checkout.php context. */
.checkout .gridheader {
    background-color: var(--portal-table-header-bg);
    padding: 0.4rem 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
}
.checkout .gridheader p {
    margin-bottom: 0;
    font-size: var(--text-sm);
    color: #fff !important;
}

/* Payment method radio items */
.payment-methods {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--portal-secondary);
}

.payment-methods:last-child {
    border-bottom: none;
}

/* Payment card — side-by-side expiry date inputs (MM / YY) */
.portal-expiry-input {
    width: 48%;
    display: inline-block;
}

.payment-methods label {
    cursor: pointer;
    margin-bottom: 0;
}

/* Required field asterisk */
span.red {
    color: #dc3545;
}

/* Terms checkbox area */
.termsandconditions {
    padding: 0.75rem 0;
}

.termsmodal {
    cursor: pointer;
}

/* Checkout nav buttons (Previous / Continue) */
.checkoutbuttons {
    padding: 1rem 0;
}

.checkoutbuttons a:not(.btn) {
    color: var(--portal-primary-dark);
}

.checkoutbuttons a:not(.btn):hover {
    color: var(--portal-primary);
}

/* ==========================================================================
   Q. ORDER CONFIRMATION (orderthanks.php)
   ========================================================================== */

.order-thanks .aboutBody {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.order-thanks .aboutBody h2 {
    color: var(--portal-primary-dark);
    margin-bottom: 1rem;
}

.order-thanks .aboutBody a {
    color: var(--portal-primary);
    font-weight: 600;
}

/* ==========================================================================
   R. SECONDARY / DEFAULT BUTTON
   Used for "Continue Shopping", "Previous", "Back" actions
   ========================================================================== */

.btn-default {
    background-color: transparent;
    border: 2px solid var(--portal-primary-dark);
    color: var(--portal-primary-dark);
    font-size: var(--text-sm);
    font-weight: var(--btn-font-weight);
    padding: 10px 14px;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--portal-primary-dark);
    color: #ffffff;
}

/* ==========================================================================
   S. ACCOUNT AREA
   ========================================================================== */

/* Pay invoices — compact table + checkbox alignment */
#payInvoicesForm table { font-size: 0.8rem; }
#payInvoicesForm th { padding: 0.5rem 0.4rem; vertical-align: top; white-space: normal; }
#payInvoicesForm td { padding: 0.75rem 0.4rem; vertical-align: middle; }
/* Pay column header centred over the checkbox */
#payInvoicesForm th:nth-child(9) { text-align: center; }
/* Strip Bootstrap custom-control layout so chk image centres cleanly */
#payInvoicesForm td .form-group { margin-bottom: 0; }
#payInvoicesForm td .custom-control { padding-left: 0; min-height: auto; display: flex; justify-content: center; align-items: center; }
#payInvoicesForm td .custom-control-label { padding-left: 0; line-height: 1; }
#payInvoicesForm td .custom-control-label::before,
#payInvoicesForm td .custom-control-label::after { display: none; }
#payInvoicesForm td .invalid-feedback { display: none; }
#payInvoicesForm td label chk { display: block; margin: 0; }
/* Actions header — left-align to reduce wasted space */
#payInvoicesForm th:last-child { text-align: left; padding-left: 0.25rem; }

/* Help/info modal trigger icon (logon page tab bar) */
.portal-help-icon {
    color: var(--base-help-icon-color);
}

/* Account info table (key/value pairs) — label column */
.myaccount .table td.text-muted {
    color: var(--portal-text-muted) !important;
}

/* Sidebar navigation list group — override Bootstrap green */
.sidebar .list-group-item-success {
    background-color: var(--portal-primary-dark);
    color: #ffffff;
    border-color: var(--portal-primary-dark);
    font-weight: 600;
}

.sidebar .list-group-item-success:hover,
.sidebar .list-group-item-success:focus {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: #ffffff;
}

.sidebar .list-group-item {
    color: var(--portal-primary-dark);
    border-color: var(--portal-secondary);
}

.sidebar .list-group-item:hover {
    background-color: var(--portal-bg-light);
    color: var(--portal-primary-dark);
}

.sidebar .submenu .list-group-item {
    padding-left: 1.75rem;
    font-size: 0.9rem;
}

/* Account layout — all account pages */
.myaccount {
    padding: 0;
}

.products-cols {
    display: flex;
    flex-wrap: wrap;
}

.products-cols-controls {
    width: 220px;
    flex-shrink: 0;
    padding-right: 1rem;
}

.products-cols-products {
    flex: 1;
    min-width: 0;
}

.products-cols-products h2 {
    color: var(--products-cols-heading-color);
    font-size: var(--products-cols-heading-size);
    margin-bottom: var(--products-cols-heading-marginbottom);
}

@media (max-width: 767px) {
    .products-cols {
        flex-direction: column;
    }
    .products-cols-controls {
        width: 100%;
        padding-right: 0;
        margin-bottom: 1rem;
    }
}

/* Order detail page */
.view-order h2 {
    color: var(--view-page-heading-color);
    font-size: var(--view-page-heading-size);
    margin-bottom: var(--view-page-heading-marginbottom);
}

.view-order .order-table p b {
    color: var(--portal-primary-dark);
}

.account-block h2 {
    color: var(--account-block-heading-color);
    font-size: var(--account-block-heading-size);
    margin: var(--account-block-heading-margin);
}

/* Order line items box */
.tablebox {
    border: var(--tablebox-border);
    border-radius: var(--tablebox-radius);
    padding: 1rem;
    background-color: var(--tablebox-background);
    margin-bottom: 1rem;
}

.tablebox .row:not(:last-child) {
    border-bottom: var(--tablebox-row-divider);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Order totals table */
.baskettotals td {
    vertical-align: middle;
}

.baskettotals tr:last-child td {
    font-weight: var(--basket-grandtotal-weight);
    color: var(--basket-grandtotal-accent-color);
    font-size: var(--basket-grandtotal-accent-size);
    border-top: var(--basket-grandtotal-accent-border);
}


/* ==========================================================================
   T. SEARCH RESULTS
   ========================================================================== */

.searchresult h4 {
    color: var(--search-result-heading-color);
    font-size: var(--search-result-heading-size);
    font-weight: var(--search-result-heading-weight);
}

.searchresult .summary {
    color: var(--search-result-summary-color);
    font-size: var(--search-result-summary-size);
}

/* No results message */
#results .news p {
    color: var(--portal-primary-dark);
    font-size: 1rem;
}

/* Product grid in search results already uses .pdt-wrapper styles from section G */
/* Cards within search */
.search-card-header {
    border-radius: var(--search-cardheader-radius) !important;
    text-transform: var(--search-cardheader-texttransform);
    background-color: var(--search-cardheader-background);
    color: var(--search-cardheader-color);
}

/* ==========================================================================
   U. PRODUCT PAGE NAV TABS (Order / Description / Downloads etc.)
   Inactive tabs: var(--portal-bg-tinted) bg, navy text. Active tab: white bg (visible
   distinction). !important required to beat default.css variable-driven rules
   (.nav-tabs .nav-item, .infotabs a, .productblock .nav-tabs .nav-link.active).
   ========================================================================== */

/* Tab content area border — direct override, bypasses variable cascade */
.colour-tabs .tab-content.producttabs {
    border: 1px solid var(--portal-primary) !important;
}

/* Nav-tabs container bottom border */
.nav-tabs,
.infotabs {
    border-bottom: 1px solid var(--portal-primary) !important;
}

/* Inactive tabs: navy bg, white text */
.nav-tabs .nav-link,
.infotabs .nav-link {
    background-color: var(--portal-primary-dark) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-color: var(--portal-primary-dark) var(--portal-primary-dark) var(--portal-primary);
    border-top: 3px solid var(--portal-primary-dark) !important;
}

/* Active tab: white bg, navy text, periwinkle top border as indicator
   .productblock .nav-tabs .nav-link.active in default.css has higher specificity — match it */
.nav-tabs .nav-link.active,
.infotabs .nav-link.active,
.productblock .nav-tabs .nav-link.active {
    background-color: #ffffff !important;
    color: var(--portal-primary-dark) !important;
    font-weight: 600;
    border-color: var(--portal-primary) var(--portal-primary) #ffffff !important;
    border-top: 3px solid var(--portal-primary) !important;
}

/* Hover on inactive: periwinkle */
.nav-tabs .nav-link:not(.active):hover,
.infotabs .nav-link:not(.active):hover {
    background-color: var(--portal-primary) !important;
    color: #ffffff !important;
    border-color: var(--portal-primary) var(--portal-primary) var(--portal-primary) !important;
    border-top: 3px solid var(--portal-primary) !important;
    text-decoration: none;
}

/* ==========================================================================
   V. ACCOUNT PAGES
   Standard pattern: div.myaccount > div.card > div.card-header h5 + content
   Content zone: .table-responsive > table (data) or .card-body > form (forms)
   Card header background/text colour: global .card-header rule (portal-primary-dark).
   ========================================================================== */

/* Per-page length select in card-header — override form-control width:100% so the
   native select arrow is fully rendered and clickable */
.myaccount .card-header select.form-control {
    width: auto;
    min-width: 75px;
    color: #333;
}

/* Pagination inside card-header — applies to common\widgets\GridView (dashboard) */
.myaccount .card-header .pagination,
.myaccount .grid-view .card-header .pagination {
    margin-bottom: 0;
}
.myaccount .card-header .pagination .page-item .page-link,
.myaccount .grid-view .card-header .pagination .page-item .page-link {
    background-color: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #ffffff;
}
.myaccount .card-header .pagination .page-item.active .page-link,
.myaccount .grid-view .card-header .pagination .page-item.active .page-link {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.6);
    font-weight: 600;
}
.myaccount .card-header .pagination .page-item.disabled .page-link,
.myaccount .grid-view .card-header .pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
}

/* Summary text in card-header */
.myaccount .card-header .summary,
.myaccount .grid-view .card-header .summary {
    color: #ffffff;
    font-size: 0.85rem;
}

/* Pagination in card-footer — compact, matches table text size */
.myaccount .card-footer {
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
}
.myaccount .card-footer .pagination {
    margin-bottom: 0;
}
.myaccount .card-footer .pagination .page-link {
    padding: 0.3125rem 0.5625rem !important;
    line-height: 1.5;
    font-size: 0.875rem;
}
.myaccount .card-footer .pagination li {
    width: 33px !important;
    height: 33px !important;
}

/* Sortable column header links — keep white on blue background */
.table thead th a,
.table thead th a:hover,
.table thead th a:focus {
    color: #ffffff;
    text-decoration: none;
}
.table thead th a:hover {
    color: rgba(255,255,255,0.75);
}

/* Sort direction arrows */
.table thead th a::after {
    content: ' \25B8';
    opacity: 0.5;
    font-size: 1em;
}
.table thead th a.asc::after {
    content: ' \25B4';
    opacity: 1;
    font-size: 1.1em;
}
.table thead th a.desc::after {
    content: ' \25BE';
    opacity: 1;
    font-size: 1.1em;
}

/* Filter row inputs (GridView .grid-view wrapper) */
.myaccount .table .filters input.form-control,
.myaccount .table .filters select.form-control,
.myaccount .table .filters select.custom-select {
    border-color: var(--portal-secondary);
    font-size: var(--text-xs);
    padding: 0.25rem 0.5rem;
    height: auto;
}

/* Filter bar — used on transactions, pay-invoices, and similar account list pages */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--portal-bg-light, #f8f9fa);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.filter-bar > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.filter-bar > .filter-bar-actions {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
}
.filter-bar .filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
    white-space: nowrap;
}
.filter-bar .form-control-sm,
.filter-bar .custom-select-sm {
    min-width: 120px;
    border-color: var(--portal-secondary-light, #b8d4e8);
}
.filter-bar .form-control-sm:focus,
.filter-bar .custom-select-sm:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 0.2rem var(--portal-focus-ring, rgba(46,163,242,.2));
}
.filter-bar input[type="date"].form-control-sm {
    min-width: 140px;
}

/* Action column links — all tables inside .myaccount */
/* Excludes .btn elements — Bootstrap btn-outline-* hover turns bg blue/white text;
   forcing color here overrides that and makes icons invisible on hover */
.myaccount .table td a:not(.btn) {
    color: var(--portal-primary);
}

/* General form controls on account/checkout pages */
.myaccount .card-body,
.myaccount .card-body p,
.checkout .card-body {
    font-size: var(--text-sm);
}

.myaccount .form-control,
.checkout .form-control {
    font-size: var(--text-sm);
    border-color: var(--portal-secondary);
    border-radius: var(--radius-sm);
}

.myaccount label,
.checkout label {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
}

/* ==========================================================================
   MIGRATED FROM VIEW <style> BLOCKS
   All rules below were moved from inline <style> tags in view files.
   ========================================================================== */

/* --- Form validation (consolidated across multiple views) --- */

.invalid-feedback {
    display: block;
}

.help-block {
    color: #dc3545;
    font-weight: bold;
}

form label .red {
    color: #dc3545;
}

.termsspan,
.privicypolicyspan {
    cursor: pointer;
    color: #dc3545;
}

.contact .custom-control {
    padding-left: unset;
}

/* --- Category sidebar (deduplicated from products/index, grid, favourites, site/products) --- */

.cat-sidebar .submit-btn {
    color: var(--cat-sidebar-filterbutton-color);
    display: inline-block;
    font-family: var(--cat-sidebar-filterbutton-font);
    font-weight: var(--cat-sidebar-filterbutton-fontweight);
    padding: var(--cat-sidebar-filterbutton-padding);
    width: 100%;
}

.cat-sidebar .card-header h5 > span {
    font-family: var(--cat-sidebar-heading-font);
    font-size: var(--cat-sidebar-heading-fontsize);
    font-weight: var(--cat-sidebar-heading-fontweight);
    margin: 0 var(--cat-sidebar-heading-margin-x);
    text-align: left;
    text-transform: var(--cat-sidebar-heading-texttransform);
    width: 100%;
}

/* Filter By — outer accordion matches sidebar card-header pattern */
#filteraccordion > .card {
    border: none !important;
    border-radius: 4px !important;
    margin-bottom: 0;
    overflow: hidden;
}
#filteraccordion > .card > .card-header {
    border-bottom: none;
}

#filteraccordion > .card > .card-header .btn.btn-link {
    background-color: var(--cat-sidebar-heading-background);
    color: var(--cat-sidebar-toggle-color) !important;
    font-weight: var(--sidebar-cardheader-font-weight);
    padding: var(--sidebar-cardheader-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    text-transform: var(--cat-sidebar-heading-texttransform);
}

#filteraccordion > .card > .card-header .btn.btn-link i {
    flex: 0 0 auto;
    margin-left: 0.75rem;
    position: static;
    transition: all 0.5s ease 0s;
}

#filteraccordion > .card > .card-header .btn.btn-link.collapsed i {
    transform: rotate(180deg);
}

/* filter-block body — no extra padding, let groups sit flush */
.filter-block-body {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Each filter slot group */
.cat-filter-group {
    border-bottom: var(--cat-sidebar-filter-border);
}

.cat-filter-group:last-of-type {
    border-bottom: none;
}

/* Sub-heading (BRAND, TYPE etc) — matches account table thead colour */
.cat-filter-heading .btn.btn-link {
    background-color: var(--cat-sidebar-subheading-background);
    color: var(--cat-sidebar-subheading-color) !important;
    font-size: 0.8125rem;
    font-weight: var(--sidebar-cardheader-font-weight);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    text-transform: var(--cat-sidebar-heading-texttransform);
}

.cat-filter-heading .btn.btn-link i {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    position: static;
    transition: all 0.5s ease 0s;
}

.cat-filter-heading .btn.btn-link.collapsed i {
    transform: rotate(180deg);
}

/* Suppress default.css FA pseudo-element chevrons on filter buttons — we use inline FA icons */
#filteraccordion .btn.btn-link::after,
#filteraccordion .btn.btn-link.collapsed::after {
    content: none !important;
    display: none !important;
}

/* Checkbox body */
.cat-filter-group .card-body {
    background-color: var(--cat-sidebar-filter-background);
    padding: 0.5rem 1rem;
}

.cat-filter-group label {
    color: var(--cat-sidebar-filter-color);
    width: 100%;
}

/* Toolbar filter inputs */
.page-options input,
.page-options select {
    background-color: var(--menu-bg);
    color: inherit;
    border-radius: 0;
}

/* --- Account --- */

#change-password {
    cursor: pointer;
}

.customer-account th {
    width: 18%;
}

.customer-account #pagesize {
    padding-right: 50px;
    width: 500px;
}

/* --- Search results --- */

#results .card {
    border-radius: var(--search-card-border-radius) !important;
}

/* --- News --- */

.newscategories .custom-select {
    background: var(--portal-primary-dark) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
    color: #fff;
    border-radius: 0;
    font-size: 14px;
}

.background-orange {
    background-color: #E98C59;
}

.empty {
    width: 100%;
}

/* --- Cart --- */

.NGauge-link {
    cursor: pointer;
}

/* --- Error and no-results pages --- */

.errortext {
    min-height: 200px;
    text-align: center;
    font-size: var(--error-text-fontsize);
}

.errorreturn {
    text-align: center;
    padding-bottom: 50px;
}

.site-error .errorreturn a {
    color: var(--error-link-color);
}

/* --- Navigation --- */

span.nav-link {
    cursor: pointer;
}

/* --- Products --- */

.productDetails .productDetails__price {
    font-size: 14px;
}

.productsProduct {
    margin: 0;
}

#default .grouped-input {
    font-size: 0.75rem;
}

/* --- Web login request form --- */

.web-login-request .card {
    border: var(--weblogin-card-border);
}

.web-login-request .card-footer {
    background-color: var(--weblogin-card-footer-background);
    border: var(--weblogin-card-footer-border);
}

.web-login-request img {
    margin: auto;
    min-width: 35%;
}

.web-login-request .form-control {
    margin: 6px 0 0;
}

.web-login-request .bg-dgrey {
    background-color: var(--weblogin-strip-background) !important;
}

/* --- History page scroll-to-top arrow widget --- */

.scrollToTop {
    bottom: 40px;
    display: none;
    position: fixed;
    right: 40px;
    text-align: center;
    text-decoration: none;
    z-index: 9999;
}

.scrollToTop:hover {
    text-decoration: none;
}

.scrollToTop a {
    display: inline-block;
    border-radius: 50%;
}

.scrollToTop a:hover .left::after,
.scrollToTop a:hover .top::after,
.scrollToTop a:hover .bottom::after,
.scrollToTop a:hover .right::after {
    border-right: 0.4em solid var(--backtotop-border-color-hover);
    border-top: 0.4em solid var(--backtotop-border-color-hover);
}

.scrollToTop a:hover .left,
.scrollToTop a:hover .top,
.scrollToTop a:hover .bottom,
.scrollToTop a:hover .right {
    border: 0.4em solid var(--backtotop-border-color-hover);
}

.scrollToTop .top {
    align-items: center;
    border: 0.3em solid var(--backtotop-border-color);
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    height: 3em;
    justify-content: center;
    line-height: 1;
    margin-right: 0.75em;
    position: relative;
    vertical-align: top;
    width: 3em;
}

.scrollToTop .top::after {
    border-right: 0.4em solid var(--backtotop-border-color);
    border-top: 0.4em solid var(--backtotop-border-color);
    content: "";
    display: block;
    height: 1.1em;
    left: 50%;
    margin-top: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -45%) rotate(-45deg);
    width: 1.1em;
}

/* --- Offline / maintenance page --- */

#default.site-offline > div {
    background-image: url("/images/maintenance.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.message h1 {
    color: var(--message-title-color);
    font-size: var(--message-title-fontsize);
    line-height: var(--message-title-lineheight);
    padding: var(--message-title-padding);
}

.message {
    background-color: var(--message-background);
    border-radius: var(--message-radius);
}

/* --- Tickets form — stretch description to fill column height --- */
.ticket-description-card .card-body .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
}
.ticket-description-card .card-body .form-group textarea {
    flex: 1;
}

/* --- Stacked mobile table (.table-stacked-mobile) --- */
@media (max-width: 575px) {
    .table-stacked-mobile {
        overflow: visible;
    }
    .table-stacked-mobile table {
        border: 0;
    }
    .table-stacked-mobile table thead {
        display: none;
    }
    .table-stacked-mobile table tr {
        display: block;
        border: 1px solid var(--portal-secondary-light);
        border-radius: var(--radius-sm);
        margin-bottom: 0.75rem;
        background: #fff;
    }
    .table-stacked-mobile table td {
        display: block;
        text-align: right;
        padding: 0.5rem 0.75rem;
        position: relative;
        border: none;
        border-bottom: 1px solid var(--portal-bg-tinted);
    }
    .table-stacked-mobile table td:last-child {
        border-bottom: 0;
    }
    .table-stacked-mobile table td[data-label]::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--portal-primary-dark);
    }
    .table-stacked-mobile table td:not([data-label]) {
        text-align: center;
    }
}

/* ── Date picker z-index fix ────────────────────────────────────────────────
 * Bootstrap Datepicker (used by kartik\date\DatePicker) appends its popup
 * to <body> but defaults to z-index:1000, below Bootstrap's navbar (1030).
 * Bump it above the nav. 1060 also clears modals (1050).
 * ──────────────────────────────────────────────────────────────────────── */
.datepicker { z-index: 1060 !important; }

/* ── Favourite product cards ────────────────────────────────────────────────
 * Tighten up font sizes on the product name, price and qty input within
 * each favourite product row.
 * ──────────────────────────────────────────────────────────────────────── */
.favourite-product h2,
.favourite-product h2 a {
    font-size: 0.875rem;   /* 14px */
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.favourites .favourite-category-card .product-columns > div {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.favourites .favourite-category-card > .card-body,
.favourites .favourite-category-card-body {
    padding: 0 1.25rem 0 !important;
    padding-bottom: 0 !important;
}
.favourites .product-list .product-columns .productsProduct.favourite-product,
.favourites .favourite-category-card .productsProduct.favourite-product {
    margin-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
}
.favourites .product-list .product-columns > div:last-child .productsProduct.favourite-product,
.favourites .favourite-category-card .product-columns > div:last-child .productsProduct.favourite-product {
    margin-bottom: 0;
    border-bottom: 0;
}
.favourite-product-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
}
.favourite-product-media .productsProductImage {
    margin: 0 !important;
    width: 100px;
}
.favourite-product-layout-stale {
    grid-template-columns: 0 minmax(0, 1fr);
}
.favourite-product-media {
    width: 150px;
    align-self: start;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
}
.favourite-product-media-empty {
    width: 0;
}
.favourite-product-media .image {
    width: 100px;
}
.favourite-product-media picture {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.favourite-product-media .image img,
.favourite-product-media picture img {
    width: 100%;
    height: 100%;
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}
.favourite-product-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.favourite-product-copy h2 {
    min-height: 2.6rem;
}
.favourite-product-copy h2 small {
    min-height: 1.1rem;
}
.favourite-product-top {
    width: 100%;
}
.favourite-product-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.favourite-product-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0.15rem 1rem;
    align-items: start;
    min-height: 0;
}
.favourite-product-meta {
    width: 100%;
    margin-top: 0.15rem;
    padding-top: 0;
}
.favourite-product-meta-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.favourite-product-meta-bar .removefromfavs,
.favourite-product-meta-bar .moveFavourite {
    margin: 0 !important;
}
.favourite-meta-btn {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.favourite-product-meta-bar .btn {
    padding: .25rem .5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
}
.favourite-product-meta-bar .btn-outline-primary {
    color: var(--table-btn-view-color) !important;
    border-color: var(--table-btn-view-color) !important;
    background-color: transparent !important;
}
.favourite-product-meta-bar .btn-outline-primary:hover,
.favourite-product-meta-bar .btn-outline-primary:focus,
.favourite-product-meta-bar .btn-outline-primary:active {
    background-color: var(--table-btn-view-color) !important;
    border-color: var(--table-btn-view-color) !important;
    color: #fff !important;
}
.favourite-product-meta-bar .btn-outline-danger {
    color: var(--table-btn-action-color, #dc3545) !important;
    border-color: var(--table-btn-action-color, #dc3545) !important;
    background-color: transparent !important;
}
.favourite-product-meta-bar .btn-outline-danger:hover,
.favourite-product-meta-bar .btn-outline-danger:focus,
.favourite-product-meta-bar .btn-outline-danger:active {
    background-color: var(--table-btn-action-color, #dc3545) !important;
    border-color: var(--table-btn-action-color, #dc3545) !important;
    color: #fff !important;
}
.favourite-product-meta-bar .btn .button,
.favourite-product-meta-bar .btn:hover .button,
.favourite-product-meta-bar .btn:focus .button,
.favourite-product-meta-bar .btn:active .button {
    display: inline-block;
    line-height: 1.5;
    color: inherit !important;
}
.favourite-product-price {
    min-height: 22px;
}
.favourite-product-price-inline {
    margin-top: 0.05rem;
}
.favourite-product-price-inline a,
.favourite-product-price-inline span {
    justify-content: flex-start !important;
}
.favourite-product-purchase {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.favourite-product-purchase .product-list-qty {
    flex: 0 0 118px;
}
.favourite-product-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    width: 240px;
    min-width: 240px;
    box-sizing: border-box;
    justify-self: end;
    padding-right: 0;
    margin-right: 0;
}
.favourite-product-controls-unavailable {
    justify-content: center;
}
.favourite-product-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.favourite-product-action .btn {
    margin-left: auto;
}
.favourite-product .price.grid-view a,
.favourite-product .price.grid-view span {
    font-size: 0.875rem;   /* 14px */
}
.favourite-product .product-list-qty .input-group .input-group-text {
    font-size: 0.875rem;   /* 14px */
    height: 31px;
    padding: 0.25rem 0.5rem;
}
.favourite-product .product-list-qty .input-group input.form-control {
    font-size: 0.875rem;   /* 14px */
    height: 31px !important;  /* override Bootstrap .form-control height */
    padding: 0.25rem 0.5rem !important;
}
.favourite-product .add-to .btn,
.favourite-product .add-to .btn:hover,
.favourite-product .add-to .btn:focus {
    font-size: 0.875rem !important;
    height: 31px !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1 !important;
    overflow: hidden;
}
.favourite-product .add-to .btn,
.favourite-product .add-to .btn:hover,
.favourite-product .add-to .btn:focus,
.bulk-wishlist .bulk-order-actions .btn,
.bulk-wishlist .bulk-order-actions .btn:hover,
.bulk-wishlist .bulk-order-actions .btn:focus,
.bulk-wishlist .bulk-order-qty-col .btn,
.bulk-wishlist .bulk-order-qty-col .btn:hover,
.bulk-wishlist .bulk-order-qty-col .btn:focus {
    min-height: 31px;
}
.favourite-product .add-to .btn.btn-primary,
.favourite-product .add-to .btn.btn-primary:hover,
.favourite-product .add-to .btn.btn-primary:focus,
.bulk-wishlist .bulk-order-actions .btn.btn-primary,
.bulk-wishlist .bulk-order-actions .btn.btn-primary:hover,
.bulk-wishlist .bulk-order-actions .btn.btn-primary:focus {
    padding: 0.25rem 0.75rem !important;
}
.favourite-product .add-to .btn .button,
.favourite-product .add-to .btn:hover .button,
.favourite-product .add-to .btn:focus .button,
.bulk-wishlist .bulk-order-actions .btn .button,
.bulk-wishlist .bulk-order-actions .btn:hover .button,
.bulk-wishlist .bulk-order-actions .btn:focus .button,
.bulk-wishlist .bulk-order-qty-col .btn .button,
.bulk-wishlist .bulk-order-qty-col .btn:hover .button,
.bulk-wishlist .bulk-order-qty-col .btn:focus .button {
    display: inline-block;
    line-height: 1.5;
}

/* ── Unavailable favourite cards ──────────────────────────────────────────── */
.favourite-unavailable {
    opacity: 0.6;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}
.favourite-unavailable .fav-unavailable-img {
    filter: grayscale(100%);
}
.fav-unavailable-msg {
    color: #6c757d;
    font-size: 0.8125rem;
    margin-top: 0.15rem;
}

/* ── Bulk order table ──────────────────────────────────────────────────────── */
.bulk-wishlist table {
    table-layout: fixed;
    width: 100%;
}
.bulk-wishlist table td {
    height: 60px;
    vertical-align: middle;
}
.bulk-wishlist table td.bulk-order-qty-col,
.bulk-wishlist table th.bulk-order-qty-col {
    white-space: nowrap;
}
.bulk-wishlist .bulk-order-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.1);
}
.bulk-wishlist table .bulk-order-img-col {
    width: 75px;
}
.bulk-wishlist table .bulk-order-qty-col {
    text-align: right;
    width: 200px;
}
.bulk-wishlist table th.bulk-order-qty-col {
    text-align: center;
}
.bulk-wishlist .input-group {
    max-width: 180px;
    margin-left: auto;
    flex-wrap: nowrap;
}
.bulk-wishlist .input-group .btn-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid #ced4da;
    background-color: #eef1f4;
}
.bulk-wishlist .input-group .btn-number:hover,
.bulk-wishlist .input-group .btn-number:focus {
    background-color: #dde3e8;
    box-shadow: none;
}
.bulk-wishlist .bulk-order-qty-input {
    min-width: 56px;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.bulk-wishlist .bulk-order-qty-col .btn {
    white-space: nowrap;
}
.bulk-wishlist .bulk-order-qty-col .btn.btn-light {
    min-width: 112px;
}
.favourite-create-category-controls {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}
.favourite-create-category-input {
    flex: 1 1 auto;
}
.favourite-create-category-action {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}
.favourite-create-category-action .btn .button {
    display: inline-block;
    line-height: 1.5;
}
.favourite-create-category-field .help-block {
    margin-top: 0.35rem;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .bulk-wishlist table .bulk-order-qty-col {
        width: 140px;
    }
    .bulk-wishlist .input-group {
        max-width: 132px;
    }
    .favourite-product-layout,
    .favourite-product-layout-stale,
    .favourite-product-main-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .favourite-product-meta-bar {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .favourite-product-copy {
        gap: 0.25rem;
    }
    .favourite-product-media,
    .favourite-product-media-empty {
        width: 100%;
    }
    .favourite-product-media {
        justify-content: center;
        padding-top: 0.25rem;
        padding-bottom: 0;
    }
    .favourite-product-copy,
    .favourite-product-copy h2,
    .favourite-product-copy h2 a,
    .favourite-product-price-inline,
    .favourite-product-price-inline a,
    .fav-unavailable-msg,
    .favourite-product-meta,
    .favourite-product-meta-bar {
        text-align: center;
        justify-content: center !important;
    }
    .favourite-product-copy {
        align-items: center;
    }
    .favourite-product-copy h2 {
        min-height: 0;
    }
    .favourite-product-copy h2 small {
        min-height: 0;
    }
    .favourite-meta-btn {
        width: 100%;
    }
    .favourite-product-controls {
        min-width: 0;
        width: 100%;
        align-items: stretch;
    }
    .favourite-product-purchase {
        flex-direction: column;
        align-items: center;
    }
    .favourite-product-purchase .product-list-qty {
        flex: 0 0 auto;
    }
    .favourite-product-action,
    .favourite-product-controls {
        width: 100%;
    }
    .favourite-product-action .btn {
        width: 100%;
    }
    .favourite-create-category-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .favourite-create-category-action {
        margin-top: 0.25rem;
        align-items: stretch;
    }
    .favourite-create-category-action .btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   Account list pages — button-row and expandable sub-table pattern
   Applied to: view-orders, view-erp-orders, addesses, index (recent
               orders widget), pay-invoices, transactions
   ════════════════════════════════════════════════════════════════ */

/* ── Row striping: shared row-odd / row-even classes ────── */
/* Scoped to .myaccount to avoid leaking into other tables.  */
/* All account list tables use row-odd/row-even (unified).   */
/* table-hover is NOT applied to account list tables — no hover rules needed. */
.myaccount tr.row-odd  > td { background-color: var(--account-table-odd-bg,  #f8f9fa); border-bottom: none !important; }
.myaccount tr.row-even > td { background-color: var(--account-table-even-bg, #fff);  border-bottom: none !important; }
/* Also zero border on the tr element — default.css may add border-bottom to tr
   which is separate from td borders and won't be caught by the td rules above */
.myaccount tr.row-odd,
.myaccount tr.row-even { border-bottom: none !important; }

/* ── Action button rows — flush below data row ──────────────────────────── */
/* Zero both td AND tr borders on both sides of the data→action seam.        */
/* default.css can add borders to tr elements independently of td borders.   */
.order-actions-row,
.address-actions-row,
.invoice-btn-row { border-top: none !important; }
.order-actions-row > td,
.address-actions-row > td {
    border-top: none !important;
    padding: 0 10px 10px !important; /* !important beats table-specific tbody padding-top rules */
}
.invoice-btn-row > td {
    border-top: none !important;
    padding: 0 10px 10px !important; /* !important beats #form-scoped padding rules */
}
.invoice-btn-wrapper { padding-top: 4px; }
@media (max-width: 767px) {
    .invoice-btn-cell { padding: 0 6px 8px !important; }
}

/* ── Action bars — flex container ───────────────────────────────────────── */
.order-actions-bar,
.address-actions-bar,
.invoice-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 8px gap = adequate touch-target spacing */
}

/* ── Table action bar buttons — shared sizing ────────────────────────────
   !important required on all three: default.css .btn.btn-TYPE:hover has
   specificity 0,3,0 (two classes + pseudo) which beats our 0,2,0 without it.
   Touch target: 0.75rem font × 1.5 line-height = 18px content + .25rem (4px)
   padding each side = 26px total height — passes WCAG 2.5.8 AA (24px min).
   8px gap between buttons satisfies the spacing offset requirement. */
.order-actions-bar .btn,
.address-actions-bar .btn,
.invoice-btn-wrapper .btn {
    padding: .25rem .5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}

/* ── Table action bar buttons — token-wired colours + hover ─────────────
   Each semantic role gets explicit normal + hover states so colour is
   always driven by the --table-btn-* tokens, not Bootstrap hardcodes.
   All hovers fill with the accent colour + white text for readability.   */

/* — View / primary nav (View Order, View User, View & Edit, Add to Basket) */
.order-actions-bar .btn-outline-primary,
.address-actions-bar .btn-outline-primary,
.invoice-btn-wrapper .btn-outline-primary {
    color: var(--table-btn-view-color) !important;
    border-color: var(--table-btn-view-color) !important;
    background-color: transparent !important;
}
.order-actions-bar .btn-outline-primary:hover,
.address-actions-bar .btn-outline-primary:hover,
.invoice-btn-wrapper .btn-outline-primary:hover {
    background-color: var(--table-btn-view-color) !important;
    border-color: var(--table-btn-view-color) !important;
    color: #fff !important;
}

/* — Secondary / neutral (View PDF, toggle expand, Update) */
.order-actions-bar .btn-outline-secondary,
.address-actions-bar .btn-outline-secondary,
.invoice-btn-wrapper .btn-outline-secondary {
    color: var(--table-btn-secondary-color) !important;
    border-color: var(--table-btn-secondary-color) !important;
    background-color: transparent !important;
}
.order-actions-bar .btn-outline-secondary:hover,
.address-actions-bar .btn-outline-secondary:hover,
.invoice-btn-wrapper .btn-outline-secondary:hover {
    background-color: var(--table-btn-secondary-color) !important;
    border-color: var(--table-btn-secondary-color) !important;
    color: #fff !important;
}

/* — Destructive (Delete, Block) */
.order-actions-bar .btn-outline-danger,
.address-actions-bar .btn-outline-danger,
.invoice-btn-wrapper .btn-outline-danger {
    color: var(--table-btn-action-color) !important;
    border-color: var(--table-btn-action-color) !important;
    background-color: transparent !important;
}
.order-actions-bar .btn-outline-danger:hover,
.address-actions-bar .btn-outline-danger:hover,
.invoice-btn-wrapper .btn-outline-danger:hover {
    background-color: var(--table-btn-action-color) !important;
    border-color: var(--table-btn-action-color) !important;
    color: #fff !important;
}

/* — Positive state change (Unblock) */
.order-actions-bar .btn-outline-success,
.address-actions-bar .btn-outline-success,
.invoice-btn-wrapper .btn-outline-success {
    color: var(--table-btn-positive-color) !important;
    border-color: var(--table-btn-positive-color) !important;
    background-color: transparent !important;
}
.order-actions-bar .btn-outline-success:hover,
.address-actions-bar .btn-outline-success:hover,
.invoice-btn-wrapper .btn-outline-success:hover {
    background-color: var(--table-btn-positive-color) !important;
    border-color: var(--table-btn-positive-color) !important;
    color: #fff !important;
}

/* — Support / ticket (Raise Ticket) */
.order-actions-bar .btn-outline-info,
.address-actions-bar .btn-outline-info,
.invoice-btn-wrapper .btn-outline-info {
    color: var(--table-btn-support-color) !important;
    border-color: var(--table-btn-support-color) !important;
    background-color: transparent !important;
}
.order-actions-bar .btn-outline-info:hover,
.address-actions-bar .btn-outline-info:hover,
.invoice-btn-wrapper .btn-outline-info:hover {
    background-color: var(--table-btn-support-color) !important;
    border-color: var(--table-btn-support-color) !important;
    color: #fff !important;
}

/* ── Toggle icon rotation ───────────────────────────────── */
.toggle-icon { transition: transform 0.2s ease; font-size: 0.7em; }
button[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); }

/* ── Expandable row inner — slide-fade animation ─────────── */
.order-items-inner,
.invoice-lines-inner,
.address-details-inner,
.favourite-options-inner {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.order-items-inner.is-open,
.invoice-lines-inner.is-open,
.address-details-inner.is-open,
.favourite-options-inner.is-open { opacity: 1; transform: translateY(0); }

/* ── Order items sub-table ──────────────────────────────── */
/* Used by: view-orders, view-erp-orders, account index      */
.order-items-row > td {
    padding: 0;
    border-bottom: 2px solid var(--portal-secondary, #adb5bd) !important;
}
.order-items-table {
    font-size: 0.8125rem;
    border-top: 2px solid var(--portal-secondary, #adb5bd) !important;
    table-layout: fixed;
    width: 100%;
}
.order-items-table thead th {
    background-color: var(--portal-bg-tinted, #f8f9fa);
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    padding: 6px 10px;
}
.order-items-table tbody td { padding: 5px 10px; }
.order-items-table tbody tr:nth-child(odd)  td { background-color: #fff; }
.order-items-table tbody tr:nth-child(even) td { background-color: var(--portal-bg-tinted, #f0f7ff); }
/* Default 3-col layout: Code | Product | Qty (web orders + index) */
@media (min-width: 768px) {
    .order-items-table th:nth-child(1), .order-items-table td:nth-child(1) { width: 20%; }
    .order-items-table th:nth-child(2), .order-items-table td:nth-child(2) { width: 72%; overflow: hidden; word-break: break-word; overflow-wrap: break-word; }
    .order-items-table th:nth-child(3), .order-items-table td:nth-child(3) { width: 8%; white-space: nowrap; }
    /* ERP orders override: 5 cols — Code | Description | Ordered | Unit Price | Value */
    .erp-orders-table .order-items-table th:nth-child(1), .erp-orders-table .order-items-table td:nth-child(1) { width: 15%; }
    .erp-orders-table .order-items-table th:nth-child(2), .erp-orders-table .order-items-table td:nth-child(2) { width: 45%; overflow: hidden; word-break: break-word; overflow-wrap: break-word; }
    .erp-orders-table .order-items-table th:nth-child(3), .erp-orders-table .order-items-table td:nth-child(3) { width: 10%; }
    .erp-orders-table .order-items-table th:nth-child(4), .erp-orders-table .order-items-table td:nth-child(4) { width: 15%; }
    .erp-orders-table .order-items-table th:nth-child(5), .erp-orders-table .order-items-table td:nth-child(5) { width: 15%; }
}
@media (max-width: 767px) {
    .order-items-table { table-layout: fixed; width: 100%; }
    /* ERP orders mobile: col1(Code)+col4(Price) hidden, show col2+col3+col5 */
    .erp-orders-table .order-items-table th:nth-child(2), .erp-orders-table .order-items-table td:nth-child(2) { width: 55%; }
    .erp-orders-table .order-items-table th:nth-child(3), .erp-orders-table .order-items-table td:nth-child(3) { width: 15%; }
    .erp-orders-table .order-items-table th:nth-child(5), .erp-orders-table .order-items-table td:nth-child(5) { width: 30%; }
}

/* ── Product options sub-panel ─────────────────────────── */
/* Used by: favourites/_favourites.php, favourites/bulkorder.php */
.favourites .favourite-category-card {
    overflow: hidden;
}
.favourite-options-panel {
    margin-top: 5px;
    overflow: hidden;
}
/* Mobile: overcome card-body 1.25rem padding with no card-deck offset */
.favourite-options-panel.col-12 {
    flex: 0 0 calc(100% + 2.5rem);
    max-width: calc(100% + 2.5rem);
    margin-left: -1.25rem;
}
/* Desktop ≥576px: card-deck -15px margins reduce the gap to 5px */
@media (min-width: 576px) {
    .favourite-options-panel.col-12 {
        flex: 0 0 calc(100% + 10px);
        max-width: calc(100% + 10px);
        margin-left: -5px;
    }
}
.favourite-options-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Slower transition than siblings so height+fade feels deliberate on a div */
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
.product-options-row > td { padding: 0 !important; border-bottom: 2px solid var(--portal-secondary, #adb5bd) !important; }
.bulk-order-table.table-hover > tbody > tr.product-options-row:hover > td,
.bulk-order-table.table-hover > tbody > tr.product-options-row:hover > th {
    background-color: transparent !important;
}
.favourite-options-table {
    font-size: 0.8rem;
    border-top: 2px solid var(--portal-secondary, #adb5bd) !important;
    margin-bottom: 0 !important;
}
.favourite-options-table th { font-size: 0.75rem; }
.favourite-options-table th.favourite-options-qty-col { text-align: center; }
.favourite-options-table th.favourite-options-add-col { text-align: center; }
.favourite-options-table tbody tr:hover td,
.favourite-options-table tbody tr:hover th {
    background-color: inherit !important;
}
.favourite-options-qty-col { width: 160px; white-space: nowrap; }
.favourite-options-add-col { width: 70px; text-align: right; white-space: nowrap; }
.favourite-options-qty-group { max-width: 150px; flex-wrap: nowrap; }
.bulk-order-table > tbody > tr.bulk-order-row-odd > td,
.bulk-order-table > tbody > tr.bulk-order-row-odd > th {
    background-color: var(--account-table-odd-bg, #f8f9fa);
}
.bulk-order-table > tbody > tr.bulk-order-row-even > td,
.bulk-order-table > tbody > tr.bulk-order-row-even > th {
    background-color: var(--account-table-even-bg, #fff);
}
@media (max-width: 767px) {
    .favourite-options-qty-col { width: 130px; }
    .favourite-options-qty-group { max-width: 120px; }
}

/* ── Invoice lines sub-table ────────────────────────────── */
/* Used by: pay-invoices, transactions                       */
.invoice-lines-row > td { padding: 0 !important; border-bottom: 2px solid var(--portal-secondary, #adb5bd) !important; }
.invoice-lines-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.invoice-lines-table {
    font-size: 0.8rem;
    border-top: 2px solid var(--portal-secondary, #adb5bd) !important;
    table-layout: fixed;
    width: 100%;
}
.invoice-lines-table thead th {
    background-color: var(--portal-secondary, #495057);
    color: #fff;
    font-weight: 600;
    padding: 5px 8px;
    border-bottom: none;
}
.invoice-lines-table tbody td { padding: 5px 8px; white-space: normal !important; word-break: break-word; }
.invoice-lines-table tbody tr:nth-child(odd)  td { background-color: #fff; }
.invoice-lines-table tbody tr:nth-child(even) td { background-color: var(--portal-bg-tinted, #f0f7ff); }
/* 6 cols: Code | Description | Qty | Unit Price | VAT | Total */
@media (min-width: 768px) {
    .invoice-lines-table th:nth-child(1), .invoice-lines-table td:nth-child(1) { width: 15%; }
    .invoice-lines-table th:nth-child(2), .invoice-lines-table td:nth-child(2) { width: 40%; }
    .invoice-lines-table th:nth-child(3), .invoice-lines-table td:nth-child(3) { width: 8%; }
    .invoice-lines-table th:nth-child(4), .invoice-lines-table td:nth-child(4) { width: 13%; }
    .invoice-lines-table th:nth-child(5), .invoice-lines-table td:nth-child(5) { width: 11%; }
    .invoice-lines-table th:nth-child(6), .invoice-lines-table td:nth-child(6) { width: 13%; }
}
/* Mobile: Code+Unit Price+VAT hidden; show Description+Qty+Total */
@media (max-width: 767px) {
    .invoice-lines-table { table-layout: fixed; width: 100%; }
    .invoice-lines-table th:nth-child(2), .invoice-lines-table td:nth-child(2) { width: 55%; }
    .invoice-lines-table th:nth-child(3), .invoice-lines-table td:nth-child(3) { width: 15%; }
    .invoice-lines-table th:nth-child(6), .invoice-lines-table td:nth-child(6) { width: 30%; }
}

/* ── Address details sub-table ──────────────────────────── */
/* Used by: addesses.php                                     */
.address-details-row > td {
    background-color: var(--portal-bg-tinted, #f8f9fa);
    border-bottom: 2px solid var(--portal-secondary, #adb5bd) !important;
}
.address-details-table {
    font-size: 0.8125rem;
    border-top: 2px solid var(--portal-secondary, #adb5bd) !important;
    width: 100%;
    table-layout: fixed;
}
.address-details-table td { word-break: break-word; overflow-wrap: break-word; white-space: normal !important; }
.address-details-table thead th {
    background-color: var(--portal-primary-dark, #32373c);
    color: #fff;
    font-weight: 600;
    padding: 6px 10px;
    border-bottom: none;
}
.address-details-table tbody th {
    background-color: var(--portal-bg-tinted, #f8f9fa);
    font-weight: 600;
    padding: 5px 10px;
    width: 120px;
    white-space: nowrap;
    border-right: 1px solid #dee2e6;
}
.address-details-table tbody td { padding: 5px 10px; }
.address-details-table tbody tr:nth-child(odd)  td,
.address-details-table tbody tr:nth-child(odd)  th { background-color: #fff; }
.address-details-table tbody tr:nth-child(even) td,
.address-details-table tbody tr:nth-child(even) th { background-color: var(--portal-bg-tinted, #f0f7ff); }
@media (max-width: 767px) {
    .address-details-inner { overflow-x: auto; max-width: 100%; }
    .address-details-table tbody th { white-space: normal; width: 90px; }
}

/* ── Page-specific: web orders table (/account/view-orders) ── */
@media (min-width: 768px) {
    .web-orders-table { table-layout: fixed; width: 100%; }
    .web-orders-table > * > tr > th,
    .web-orders-table > * > tr > td { padding: 0.4rem 10px; }
    .web-orders-table > tbody > tr > td { padding-top: 10px; vertical-align: top !important; }
    .web-orders-table > * > tr > th:nth-child(1), .web-orders-table > * > tr > td:nth-child(1) { width: 18%; }
    .web-orders-table > * > tr > th:nth-child(2), .web-orders-table > * > tr > td:nth-child(2) { width: 16%; }
    .web-orders-table > * > tr > th:nth-child(3), .web-orders-table > * > tr > td:nth-child(3) { width: 25%; }
    .web-orders-table > * > tr > th:nth-child(4), .web-orders-table > * > tr > td:nth-child(4) { width: 14%; }
    .web-orders-table > * > tr > th:nth-child(5), .web-orders-table > * > tr > td:nth-child(5) { width: 27%; }
}
@media (max-width: 767px) {
    .web-orders-wrapper { overflow: visible; }
    .web-orders-table,
    .web-orders-table tbody,
    .web-orders-table tr { display: block; width: 100%; }
    .web-orders-table thead { display: none; }
    .web-orders-table tr.order-summary-row {
        border: 1px solid #dee2e6;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    .web-orders-table tr.order-summary-row.row-odd  { background: var(--account-table-odd-bg,  #f8f9fa); }
    .web-orders-table tr.order-summary-row.row-even { background: var(--account-table-even-bg, #fff); }
    .web-orders-table tr.order-summary-row > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 12px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
        font-size: 0.875rem;
    }
    .web-orders-table tr.order-summary-row > td:last-child { border-bottom: none; }
    .web-orders-table tr.order-summary-row > td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
        color: var(--portal-text-muted, #555);
        font-size: 0.8125rem;
    }
    .web-orders-table tr.order-actions-row {
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 4px 4px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .web-orders-table tr.order-actions-row > td {
        display: block !important;
        padding: 8px 10px 10px !important;
        border-top: none !important;
    }
    .web-orders-table tr.order-actions-row > td::before { display: none !important; }
    .web-orders-table .order-items-row > td.order-items-cell {
        display: block;
        padding: 0 !important;
        border-bottom: none !important;
        background: none !important;
    }
    .web-orders-table .order-items-row > td.order-items-cell::before { display: none !important; }
    .web-orders-table .order-items-table,
    .web-orders-table .order-items-table thead,
    .web-orders-table .order-items-table tbody,
    .web-orders-table .order-items-table tr,
    .web-orders-table .order-items-table td,
    .web-orders-table .order-items-table th { display: revert; }
}

/* ── Page-specific: ERP orders table (/account/view-acc-orders) ── */
@media (min-width: 768px) {
    .erp-orders-table { table-layout: fixed; width: 100%; }
    .erp-orders-table > * > tr > th,
    .erp-orders-table > * > tr > td { padding: 0.4rem 10px; }
    .erp-orders-table > tbody > tr > td { padding-top: 10px; }
    .erp-orders-table > * > tr > th:nth-child(1), .erp-orders-table > * > tr > td:nth-child(1) { width: 14%; }
    .erp-orders-table > * > tr > th:nth-child(2), .erp-orders-table > * > tr > td:nth-child(2) { width: 24%; }
    .erp-orders-table > * > tr > th:nth-child(3), .erp-orders-table > * > tr > td:nth-child(3) { width: 13%; white-space: nowrap; overflow: hidden; }
    .erp-orders-table > * > tr > th:nth-child(4), .erp-orders-table > * > tr > td:nth-child(4) { width: 22%; }
    .erp-orders-table > * > tr > th:nth-child(5), .erp-orders-table > * > tr > td:nth-child(5) { width: 27%; }
}
.erp-orders-table > thead > tr > th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
    .erp-orders-wrapper { overflow: visible; }
    .erp-orders-table,
    .erp-orders-table tbody,
    .erp-orders-table tr { display: block; width: 100%; }
    .erp-orders-table thead { display: none; }
    .erp-orders-table tr.order-summary-row {
        border: 1px solid #dee2e6;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    .erp-orders-table tr.order-summary-row.row-odd  { background: var(--account-table-odd-bg,  #f8f9fa); }
    .erp-orders-table tr.order-summary-row.row-even { background: var(--account-table-even-bg, #fff); }
    .erp-orders-table tr.order-summary-row > td {
        display: flex !important; /* overrides d-none d-md-table-cell on hidden cols */
        justify-content: space-between;
        align-items: center;
        padding: 7px 12px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
        font-size: 0.875rem;
    }
    .erp-orders-table tr.order-summary-row > td:last-child { border-bottom: none; }
    .erp-orders-table tr.order-summary-row > td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
        color: var(--portal-text-muted, #555);
        font-size: 0.8125rem;
    }
    .erp-orders-table tr.order-actions-row {
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 4px 4px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .erp-orders-table tr.order-actions-row > td {
        display: block !important;
        padding: 8px 10px 10px !important;
        border-top: none !important;
    }
    .erp-orders-table tr.order-actions-row > td::before { display: none !important; }
    .erp-orders-table .order-items-row > td.order-items-cell {
        display: block !important;
        padding: 0 !important;
        border-bottom: none !important;
        background: none !important;
    }
    .erp-orders-table .order-items-row > td.order-items-cell::before { display: none !important; }
    .erp-orders-table .order-items-table,
    .erp-orders-table .order-items-table thead,
    .erp-orders-table .order-items-table tbody,
    .erp-orders-table .order-items-table tr,
    .erp-orders-table .order-items-table td,
    .erp-orders-table .order-items-table th { display: revert; }
}

/* ── Page-specific: account index recent orders widget ── */
@media (min-width: 768px) {
    .recent-orders-table { table-layout: fixed; width: 100%; }
    .recent-orders-table > * > tr > th,
    .recent-orders-table > * > tr > td { padding: 0.4rem 10px; }
    .recent-orders-table > tbody > tr > td { padding-top: 10px; }
    .recent-orders-table > * > tr > th:nth-child(1), .recent-orders-table > * > tr > td:nth-child(1) { width: 20%; }
    .recent-orders-table > * > tr > th:nth-child(2), .recent-orders-table > * > tr > td:nth-child(2) { width: 22%; }
    .recent-orders-table > * > tr > th:nth-child(3), .recent-orders-table > * > tr > td:nth-child(3) { width: 38%; overflow: hidden; }
    .recent-orders-table > * > tr > th:nth-child(4), .recent-orders-table > * > tr > td:nth-child(4) { width: 20%; }
}

/* ── Page-specific: address book (/account/addresses) ── */
/* Primary (ERP-owned) address rows — subtle mute; user cannot delete these */
.address-primary-row td { color: #6c757d !important; }
.address-primary-note {
    font-size: 0.8125rem;
    color: #6c757d;
    font-style: italic;
    margin: 0 0 6px;
}
.address-primary-note .fa-info-circle { margin-right: 0.25rem; }
@media (min-width: 768px) {
    .address-book-table { table-layout: fixed; width: 100%; }
    .address-book-table > * > tr > th,
    .address-book-table > * > tr > td { padding: 0.4rem 10px; }
    .address-book-table > tbody > tr > td { padding-top: 10px; }
    .address-book-table > * > tr > th:nth-child(1), .address-book-table > * > tr > td:nth-child(1) { width: 15%; }
    .address-book-table > * > tr > th:nth-child(2), .address-book-table > * > tr > td:nth-child(2) { width: 35%; }
    .address-book-table > * > tr > th:nth-child(3), .address-book-table > * > tr > td:nth-child(3) { width: 50%; }
}
@media (max-width: 767px) {
    .address-book-wrapper { overflow: visible; }
    .address-book-table,
    .address-book-table tbody,
    .address-book-table tr { display: block; width: 100%; }
    .address-book-table thead { display: none; }
    .address-book-table tr.address-summary-row {
        border: 1px solid #dee2e6;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    .address-book-table tr.address-summary-row.row-odd  { background: var(--account-table-odd-bg,  #f8f9fa); }
    .address-book-table tr.address-summary-row.row-even { background: var(--account-table-even-bg, #fff); }
    .address-book-table tr.address-summary-row > td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 7px 12px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
        font-size: 0.875rem;
    }
    .address-book-table tr.address-summary-row > td:last-child { border-bottom: none; }
    .address-book-table tr.address-summary-row > td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
        color: var(--portal-text-muted, #555);
        font-size: 0.8125rem;
    }
    .address-book-table tr.address-actions-row {
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 4px 4px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .address-book-table tr.address-actions-row > td {
        display: block !important;
        padding: 8px 10px 10px !important;
        border-top: none !important;
    }
    .address-book-table tr.address-actions-row > td::before { display: none !important; }
    .address-book-table .address-details-row > td {
        display: block !important;
        padding: 0 !important;
        background: none !important;
    }
    .address-book-table .address-details-row > td::before { display: none !important; }
    .address-book-table .address-details-table,
    .address-book-table .address-details-table thead,
    .address-book-table .address-details-table tbody,
    .address-book-table .address-details-table tr,
    .address-book-table .address-details-table td,
    .address-book-table .address-details-table th { display: revert; }
}

/* ── Page-specific: pay invoices (/account/pay-invoices) ── */
/* Row striping handled by shared .myaccount tr.row-odd/even rules in portal-theme.css */
/* Overdue row highlight — red transparent tint; raised specificity to beat row-odd/even */
#payInvoicesForm .pay-invoices-table > tbody > tr.pay-invoice-overdue > td { background-color: rgba(220, 53, 69, 0.08); }
/* Header: allow wrapping; bottom-align single-word headers */
#payInvoicesForm .pay-invoices-table > thead > tr > th { white-space: normal; vertical-align: top; }
/* Pay column centring */
#payInvoicesForm td.pay-col { vertical-align: middle; text-align: center; }
/* Desktop fixed layout: 8 cols */
@media (min-width: 768px) {
    #payInvoicesForm .pay-invoices-table { table-layout: fixed; width: 100%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th { padding: 0.65rem 10px; }
    #payInvoicesForm .pay-invoices-table > * > tr > td { padding: 0.4rem 10px; }
    #payInvoicesForm .pay-invoices-table > tbody > tr > td { padding-top: 10px; }
    /* Col widths: 14+10+10+9+11+13+15+18=100 */
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(1),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(1) { width: 14%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(2),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(2) { width: 10%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(3),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(3) { width: 10%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(4),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(4) { width: 9%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(5),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(5) { width: 11%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(6),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(6) { width: 13%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(7),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(7) { width: 15%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(8),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(8) { width: 18%; }
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(1),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(6) { white-space: nowrap; overflow: hidden; }
}
/* Mobile: 5 visible cols; hidden cols collapsed to zero */
@media (max-width: 767px) {
    #payInvoicesForm .pay-invoices-table { table-layout: fixed; width: 100%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th,
    #payInvoicesForm .pay-invoices-table > * > tr > td { padding: 0.4rem 0.35rem; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(1),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(1) { width: 24%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(2),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(2) { width: 18%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(3),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(3) { width: 19%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(4),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(4) { width: 0; padding: 0 !important; overflow: hidden; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(5),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(5) { width: 0; padding: 0 !important; overflow: hidden; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(6),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(6) { width: 0; padding: 0 !important; overflow: hidden; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(7),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(7) { width: 19%; }
    #payInvoicesForm .pay-invoices-table > * > tr > th:nth-child(8),
    #payInvoicesForm .pay-invoices-table > * > tr > td:nth-child(8) { width: 20%; }
}

/* ── Page-specific: transactions (/account/transactions) ── */
/* Row striping handled by shared .myaccount tr.row-odd/even rules in portal-theme.css */
/* Header: allow wrapping; bottom-align single-word headers */
#transactions-grid .transactions-table > thead > tr > th { white-space: normal; vertical-align: top; }
/* Desktop fixed layout: 8 cols */
@media (min-width: 768px) {
    #transactions-grid .transactions-table { table-layout: fixed; width: 100%; }
    #transactions-grid .transactions-table > * > tr > th { padding: 0.65rem 10px; }
    #transactions-grid .transactions-table > * > tr > td { padding: 0.4rem 10px; }
    #transactions-grid .transactions-table > tbody > tr > td { padding-top: 10px; }
    /* Col widths: 13+10+10+10+13+12+10+15=93 — remaining 7% fluid */
    #transactions-grid .transactions-table > * > tr > th:nth-child(1),
    #transactions-grid .transactions-table > * > tr > td:nth-child(1) { width: 13%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(2),
    #transactions-grid .transactions-table > * > tr > td:nth-child(2) { width: 10%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(3),
    #transactions-grid .transactions-table > * > tr > td:nth-child(3) { width: 10%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(4),
    #transactions-grid .transactions-table > * > tr > td:nth-child(4) { width: 10%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(5),
    #transactions-grid .transactions-table > * > tr > td:nth-child(5) { width: 13%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(6),
    #transactions-grid .transactions-table > * > tr > td:nth-child(6) { width: 12%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(7),
    #transactions-grid .transactions-table > * > tr > td:nth-child(7) { width: 10%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(8),
    #transactions-grid .transactions-table > * > tr > td:nth-child(8) { width: 15%; }
    #transactions-grid .transactions-table > * > tr > td:nth-child(1),
    #transactions-grid .transactions-table > * > tr > td:nth-child(5) { white-space: nowrap; overflow: hidden; }
}
/* Mobile: 5 visible cols; hidden cols collapsed to zero */
@media (max-width: 767px) {
    #transactions-grid .transactions-table { table-layout: fixed; width: 100%; }
    #transactions-grid .transactions-table > * > tr > th,
    #transactions-grid .transactions-table > * > tr > td { padding: 0.4rem 0.35rem; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(1),
    #transactions-grid .transactions-table > * > tr > td:nth-child(1) { width: 24%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(2),
    #transactions-grid .transactions-table > * > tr > td:nth-child(2) { width: 18%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(3),
    #transactions-grid .transactions-table > * > tr > td:nth-child(3) { width: 0; padding: 0 !important; overflow: hidden; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(4),
    #transactions-grid .transactions-table > * > tr > td:nth-child(4) { width: 19%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(5),
    #transactions-grid .transactions-table > * > tr > td:nth-child(5) { width: 0; padding: 0 !important; overflow: hidden; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(6),
    #transactions-grid .transactions-table > * > tr > td:nth-child(6) { width: 20%; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(7),
    #transactions-grid .transactions-table > * > tr > td:nth-child(7) { width: 0; padding: 0 !important; overflow: hidden; }
    #transactions-grid .transactions-table > * > tr > th:nth-child(8),
    #transactions-grid .transactions-table > * > tr > td:nth-child(8) { width: 19%; }
}

/* ── Saved orders table (.saved-orders-table) ─────────────────────────────── */

@media (min-width: 768px) {
    .saved-orders-table { table-layout: fixed; width: 100%; }
    .saved-orders-table > * > tr > th,
    .saved-orders-table > * > tr > td { padding: 0.4rem 10px; }
    .saved-orders-table > tbody > tr > td { padding-top: 10px; }
    .saved-orders-table > * > tr > th:nth-child(1),
    .saved-orders-table > * > tr > td:nth-child(1) { width: 20%; white-space: nowrap; }
    .saved-orders-table > * > tr > th:nth-child(2),
    .saved-orders-table > * > tr > td:nth-child(2) { width: 80%; }
}

/* ════════════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD (/account/dashboard)
   Scoped to .account-dashboard — all rules here are additive on top
   of the shared .myaccount rules above. Tokens defined in :root above.
   ════════════════════════════════════════════════════════════════ */

/* ── Stat boxes ─────────────────────────────────────────────────── */
.account-dashboard .dashboard-stat-box {
    padding: var(--dashboard-stat-box-padding);
    border: var(--base-button-primary-border) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-dashboard .dashboard-stat-icon {
    color: var(--portal-primary-dark) !important;
}
.account-dashboard a:hover .dashboard-stat-box {
    background-color: var(--portal-primary) !important;
    border-color: var(--portal-primary) !important;
    box-shadow: var(--dashboard-stat-hover-shadow);
}
.account-dashboard a:hover .dashboard-stat-icon,
.account-dashboard a:hover .dashboard-stat-value,
.account-dashboard a:hover .dashboard-stat-label {
    color: #fff !important;
}
.account-dashboard .dashboard-stat-value {
    font-size: var(--dashboard-stat-value-size);
    font-weight: var(--fw-semibold);
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* ── Overdue invoices scroll area ───────────────────────────────── */
/* Shows all overdue invoices; scrolls vertically when list is long  */
.account-dashboard .dashboard-invoices-scroll {
    max-height: var(--dashboard-invoices-max-height);
    overflow-y: auto;
}

/* ── Preview table action buttons ───────────────────────────────── */
/* Bootstrap btn-outline-primary hardcodes #007bff — wire to brand tokens */
.account-dashboard .table td a.btn-outline-primary {
    color: var(--portal-primary-dark);
    border-color: var(--portal-primary-dark);
}
.account-dashboard .table td a.btn-outline-primary:hover {
    background-color: var(--portal-primary) !important;
    border-color: var(--portal-primary) !important;
    color: #fff;
}

/* ── Preview tables (recent-orders, recent-tickets, invoices) ──── */
/* Compact padding — these are summary widgets, not full-page grids  */
.account-dashboard .table > thead > tr > th,
.account-dashboard .table > tbody > tr > td {
    padding: var(--dashboard-table-padding-y) var(--dashboard-table-padding-x);
}
/* Action column: right-align, no wrapping */
.account-dashboard .table > thead > tr > th:last-child,
.account-dashboard .table > tbody > tr > td:last-child {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* ── Users table (.users-table) ───────────────────────────────────────────── */

@media (min-width: 768px) {
    .users-table { table-layout: fixed; width: 100%; }
    .users-table > * > tr > th,
    .users-table > * > tr > td { padding: 0.4rem 10px; }
    .users-table > tbody > tr > td { padding-top: 10px; }
    .users-table > * > tr > th:nth-child(1),
    .users-table > * > tr > td:nth-child(1) { width: 30%; word-break: break-all; }
    .users-table > * > tr > th:nth-child(2),
    .users-table > * > tr > td:nth-child(2) { width: 15%; }
    .users-table > * > tr > th:nth-child(3),
    .users-table > * > tr > td:nth-child(3) { width: 20%; }
    .users-table > * > tr > th:nth-child(4),
    .users-table > * > tr > td:nth-child(4) { width: 15%; }
    .users-table > * > tr > th:nth-child(5),
    .users-table > * > tr > td:nth-child(5) { width: 20%; }
}

@media (min-width: 992px) {
    .users-table > * > tr > th:nth-child(1),
    .users-table > * > tr > td:nth-child(1) { width: 28%; }
    .users-table > * > tr > th:nth-child(2),
    .users-table > * > tr > td:nth-child(2) { width: 14%; }
    .users-table > * > tr > th:nth-child(3),
    .users-table > * > tr > td:nth-child(3) { width: 18%; }
    .users-table > * > tr > th:nth-child(4),
    .users-table > * > tr > td:nth-child(4) { width: 15%; }
    .users-table > * > tr > th:nth-child(5),
    .users-table > * > tr > td:nth-child(5) { width: 25%; }
}

/* ── Page-specific: quick order (/quickorder) ── */
/* Three-column add-product row: search grows, qty and button are fixed */
.myaccount > .card.typeahead-card,
.myaccount > .card.typeahead-card > .card-body {
    overflow: visible;
}

.quickorder-form-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem; /* reserve space for absolutely-positioned errors */
}
.quickorder-search-wrap { flex: 1 1 200px; position: relative; }
.quickorder-qty-wrap    { flex: 0 0 auto;  position: relative; }
.quickorder-action-wrap { flex: 0 0 auto; display: flex; flex-direction: column; }
/* Typeahead results must sit above the surrounding cards on quick-order/quote forms */
#addtoquickorderform .quickorder-search-wrap,
#addtoquoteform .quickorder-search-wrap { z-index: 20; }
#addtoquickorderform .tt-menu,
#addtoquoteform .tt-menu { z-index: 2600 !important; }
/* Errors float below their column — never shift siblings */
.quickorder-search-wrap .help-block,
.quickorder-qty-wrap    .help-block,
.quickorder-search-wrap .invalid-feedback,
.quickorder-qty-wrap    .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
/* Label row — keeps all three inputs baseline-aligned */
.quickorder-label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: var(--text-sm); }
/* Stepper width */
.quickorder-qty-wrap .number-limit { width: 120px; }
.quickorder-qty-wrap .input-group { flex-wrap: nowrap; }
.quickorder-qty-wrap .form-control.is-valid,
.quickorder-qty-wrap .form-control.is-invalid,
.quickorder-search-wrap .form-control.is-valid,
.quickorder-search-wrap .form-control.is-invalid {
    background-image: none;
    padding-right: 0.75rem;
}
/* Basket table: form-group margin in qty cell */
#quickorderform .quickorder-qty-cell .form-group { margin-bottom: 0; }
#quickorderform .quickorder-qty-cell .form-control { max-width: 110px; }
/* Quote-row icon actions: minimal touch-safe square, token-driven colours */
.quote-request-table .quote-row-action {
    min-width: 36px;
    min-height: 36px;
    padding: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quote-request-table .btn-quoterowupdate {
    color: var(--table-btn-view-color, var(--portal-primary, #0056b3)) !important;
    border-color: var(--table-btn-view-color, var(--portal-primary, #0056b3)) !important;
}

.quote-request-table .btn-quoterowupdate:hover,
.quote-request-table .btn-quoterowupdate:focus,
.quote-request-table .btn-quoterowupdate:active {
    background-color: var(--table-btn-view-color, var(--portal-primary, #0056b3)) !important;
    border-color: var(--table-btn-view-color, var(--portal-primary, #0056b3)) !important;
    color: #fff !important;
}

.quote-request-table .quote-row-action .button {
    line-height: 1;
    color: inherit !important;
}

.quote-request-table .btn-quoterowdelete {
    color: var(--table-btn-action-color, #dc3545) !important;
    border-color: var(--table-btn-action-color, #dc3545) !important;
}

.quote-request-table .btn-quoterowdelete:hover,
.quote-request-table .btn-quoterowdelete:focus,
.quote-request-table .btn-quoterowdelete:active {
    background-color: var(--table-btn-action-color, #dc3545) !important;
    border-color: var(--table-btn-action-color, #dc3545) !important;
    color: #fff !important;
}
/* Quote request table */
.quote-request-table th { border-top: none; }
.quote-request-table td { vertical-align: middle; }
.quote-request-image-cell img {
    max-width: 100px;
    max-height: 100px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
#quoteform .quote-price-cell .form-group,
#quoteform .quickorder-qty-cell .form-group { margin-bottom: 0; }
#quoteform .quote-price-cell .form-control { min-width: 110px; }
#quoteform .quote-request-qty-group { width: 140px; }
#quoteform .quickorder-qty-cell .form-control { max-width: 110px; }
/* Responsive: stack below sm */
@media (max-width: 575px) {
    .quickorder-search-wrap { flex: 1 1 100%; }
}