/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ==========================================================================
   ZipZipe — WHMCS client area
   --------------------------------------------------------------------------
   TOKEN-DRIVEN. Every size below comes from a token. The previous version had
   eleven layers of appended patches (v2..v11) with ad-hoc values — 22px here,
   18px there, 13.5px elsewhere — which is exactly why spacing never settled.
   Nothing in this file hard-codes a spacing or type value.

   Spacing scale and shadows are taken from the ui-ux-pro-max design system:
     --space-xs 4 · sm 8 · md 16 · lg 24 · xl 32 · 2xl 48 · 3xl 64
   Breakpoints follow the skill's test list: 375 / 768 / 1024 / 1440.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root{
  /* --- colour ------------------------------------------------------------ */
  --zz-canvas:#f5f5f7;
  --zz-surface:#ffffff;
  --zz-ink:#1d1d1f;
  --zz-ink-2:#515154;          /* 7.2:1 on canvas */
  --zz-ink-3:#6e6e73;          /* 4.7:1 on canvas */
  --zz-hair:rgba(0,0,0,.07);
  --zz-hair-2:rgba(0,0,0,.10);
  --zz-accent:#0071e3;
  --zz-accent-deep:#0a4a8f;    /* text-on-tint, 7.7:1 */
  --zz-accent-soft:rgba(0,113,227,.12);
  --zz-success:#157a35;
  --zz-warning:#8a5300;
  --zz-danger:#b3261e;
  --zz-info:#0a5bbd;
  --zz-neutral:#5f5f5f;

  /* --- spacing (design-system scale) ------------------------------------- */
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  --space-2:6px; --space-3:12px;               /* half-steps, used sparingly */

  /* --- type -------------------------------------------------------------- */
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:21px; --fs-xl:28px; --fs-2xl:34px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-base:1.5;

  /* --- radius ------------------------------------------------------------ */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:980px;

  /* --- elevation (design-system scale) ----------------------------------- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 10px 15px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05);

  /* --- interaction ------------------------------------------------------- */
  --focus-ring:0 0 0 3px rgba(0,113,227,.28);
  --touch:44px;                 /* minimum touch target */
  --ease:cubic-bezier(.25,.1,.25,1);
  --dur:.2s;
}

/* -------------------------------------------------------------------- 2. BASE */
body, .btn, input, select, textarea, .card, .tile, h1,h2,h3,h4,h5,h6{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
              "Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
body{
  background:var(--zz-canvas) !important;
  color:var(--zz-ink);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--zz-accent); }

h1{ font-size:var(--fs-xl)  !important; font-weight:600 !important; letter-spacing:-.03em; line-height:var(--lh-tight); margin-bottom:var(--space-2) !important; }
h2{ font-size:var(--fs-lg)  !important; font-weight:600 !important; letter-spacing:-.025em; line-height:var(--lh-tight); }
h3, .card-title{ font-size:var(--fs-md) !important; font-weight:600 !important; letter-spacing:-.02em; line-height:var(--lh-snug); }

/* ------------------------------------------------------- 3. HEADER / NAVIGATION
   CRITICAL: .header carries backdrop-filter, which CREATES A STACKING CONTEXT.
   It must therefore be explicitly positioned and ordered, or it paints in
   document order and the page content covers every open dropdown. */
.header{
  position:relative !important;
  z-index:1030 !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--zz-hair) !important;
  box-shadow:none !important;
}
.header .navbar, .header .main-navbar-wrapper{
  position:relative; z-index:1030;
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding-top:var(--space-xs); padding-bottom:var(--space-xs);
}
.navbar-light .navbar-nav .nav-link{
  color:var(--zz-ink) !important;
  font-weight:450; font-size:var(--fs-sm);
  padding:var(--space-2) var(--space-3) !important;
  border-radius:var(--r-pill);
}
.navbar-light .navbar-nav .nav-link:hover{ background:rgba(0,0,0,.045); }
/* the theme renders top-level links as #nav > li > a with NO .nav-link class */
.navbar-nav > li > a, #nav > li > a{
  display:inline-flex !important; align-items:center;
  min-height:var(--touch);
}
.navbar-brand{ font-weight:600; letter-spacing:-.02em; color:var(--zz-ink) !important; }

/* top utility bar — was dark, and its text inherited a white-on-white colour */
.topbar{
  background:var(--zz-surface) !important;
  border-bottom:1px solid var(--zz-hair) !important;
}
.topbar, .topbar a, .topbar span, .topbar div, .topbar li, .topbar p,
.topbar .btn, .topbar .nav-link{ color:var(--zz-ink-2) !important; }
.topbar a:hover, .topbar .btn:hover, .topbar .nav-link:hover{ color:var(--zz-ink) !important; }

/* ------------------------------------------------------------------ 4. DROPDOWNS */
.navbar-nav .dropdown-menu, .dropdown-menu.show{
  z-index:1050 !important;
  min-width:200px;
  padding:var(--space-2) !important;
  margin-top:var(--space-2);
  background:var(--zz-surface) !important;
  border:1px solid var(--zz-hair-2) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--shadow-lg) !important;
}
/* the theme puts .dropdown-item on BOTH the <li> wrapper and the <a> */
.dropdown-menu > li.dropdown-item{
  padding:0 !important; background:transparent !important;
  border-radius:0 !important; list-style:none;
}
.dropdown-menu > li.dropdown-item:hover{ background:transparent !important; }
.dropdown-menu a.dropdown-item{
  display:flex; align-items:center;
  min-height:var(--space-xl);
  padding:var(--space-sm) var(--space-3) !important;
  border-radius:var(--r-sm) !important;
  font-size:var(--fs-sm);
  color:var(--zz-ink) !important;
  text-decoration:none;
}
.dropdown-menu a.dropdown-item:hover, .dropdown-menu a.dropdown-item:focus{
  background:rgba(0,0,0,.05) !important; color:var(--zz-ink) !important;
}

/* -------------------------------------------------------------------- 5. TILES */
.tiles .tile{
  display:flex; flex-direction:column; position:relative;
  background:var(--zz-surface) !important;
  border:1px solid var(--zz-hair) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm);
  padding:var(--space-lg) !important;
  text-decoration:none !important;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tiles .tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none !important; }
.tiles .tile .title{
  order:1; font-size:var(--fs-sm) !important; font-weight:500 !important;
  color:var(--zz-ink-2) !important; margin:0 0 var(--space-sm) 0 !important;
}
.tiles .tile .stat{
  order:2; font-size:var(--fs-2xl) !important; font-weight:600 !important;
  line-height:1 !important; letter-spacing:-.03em; color:var(--zz-ink) !important; margin:0 !important;
}
.tiles .tile > i{
  order:3; position:absolute; top:var(--space-md); right:var(--space-md);
  font-size:var(--fs-base) !important; color:var(--zz-accent) !important;
  opacity:.85; width:auto !important; margin:0 !important;
}
.tiles .tile .highlight{ display:none !important; }

/* -------------------------------------------------------------------- 6. CARDS */
.card, .card-sidebar, .client-home-cards .card{
  background:var(--zz-surface) !important;
  border:1px solid var(--zz-hair) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card[class*="card-accent-"]{ border-top:1px solid var(--zz-hair) !important; }
.card-header{ background:transparent !important; border-bottom:1px solid var(--zz-hair) !important; padding:var(--space-md) var(--space-lg) !important; }
.card-body{ padding:var(--space-md) var(--space-lg) !important; }
.card-footer{ background:transparent !important; border-top:1px solid var(--zz-hair) !important; padding:var(--space-md) var(--space-lg) !important; }
.client-home-cards .row > [class*="col-"]{ padding-left:var(--space-sm); padding-right:var(--space-sm); }

/* ------------------------------------------------------------------ 7. TABLES */
.table{ margin-bottom:0; }
.table thead th{
  background:transparent !important; border-top:none !important;
  border-bottom:1px solid var(--zz-hair) !important;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--zz-ink-3) !important; font-weight:500;
  padding:var(--space-3) var(--space-md) !important;
}
.table td{ padding:var(--space-3) var(--space-md) !important; border-top:1px solid var(--zz-hair) !important; }
.table-hover tbody tr:hover{ background:#fafafc !important; }

/* ------------------------------------------------------- 8. FORMS (labels scoped)
   The bare `label` selector used to also match WHMCS status badges, which are
   <label class="label">, repainting their text dark-on-dark. Excluded. */
label:not(.label):not(.badge),
.control-label:not(.label),
.form-group > label:not(.label){
  font-size:var(--fs-sm) !important; font-weight:500 !important;
  color:var(--zz-ink-2) !important; margin-bottom:var(--space-2);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], input[type="date"], select, textarea, .form-control{
  border:1px solid var(--zz-hair-2) !important;
  border-radius:var(--r-sm) !important;
  background:var(--zz-surface) !important;
  color:var(--zz-ink) !important;
  padding:var(--space-3) !important;
  font-size:var(--fs-base) !important;
  box-shadow:none !important;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--zz-accent) !important;
  box-shadow:var(--focus-ring) !important;
  outline:none !important;
}
.form-group{ margin-bottom:var(--space-md) !important; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--zz-accent); }
.form-text, .help-block, small.text-muted{ color:var(--zz-ink-3) !important; font-size:var(--fs-xs); }

/* ------------------------------------------------------------------ 9. BUTTONS */
.btn{
  border-radius:var(--r-pill) !important;
  font-weight:500; letter-spacing:-.01em;
  min-height:var(--space-2xl);            /* 48px desktop */
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-xs, .btn-sm{ min-height:var(--space-xl); }
.btn-primary, .btn-success, .btn-info{
  background:var(--zz-accent) !important; border-color:var(--zz-accent) !important;
  color:#fff !important; box-shadow:none !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover{ filter:brightness(1.07); }
.btn-default, .btn-secondary, .btn-light{
  background:var(--zz-surface) !important; border:1px solid var(--zz-hair-2) !important;
  color:var(--zz-ink) !important;
}
.btn-default:hover, .btn-secondary:hover{ background:#fafafa !important; }
a, button, [role="button"], .dropdown-item, .list-group-item{ cursor:pointer; }

/* ------------------------------------------------------- 10. BADGES / STATUS */
.label, label.label, .badge{
  color:#fff !important;
  border-radius:var(--r-pill) !important;
  font-weight:600 !important; letter-spacing:.01em;
  white-space:nowrap !important;
  font-size:var(--fs-xs) !important;
  padding:.32em .62em !important;
}
.label.status, .status{ font-size:var(--fs-xs) !important; line-height:var(--lh-base) !important; }
.status-active,.status-paid,.status-open,
.label.status-active,.label.status-paid,.label.status-open{ background-color:var(--zz-success) !important; color:#fff !important; }
.status-suspended,.status-fraud,.status-collections,.status-redemption{ background-color:var(--zz-danger) !important; color:#fff !important; }
.status-terminated,.status-cancelled,.status-expired,.status-refunded,.status-closed{ background-color:var(--zz-neutral) !important; color:#fff !important; }
.status-pending,.status-unpaid,.status-grace,.status-paymentpending{ background-color:var(--zz-warning) !important; color:#fff !important; }
.status-answered,.status-inprogress{ background-color:var(--zz-info) !important; color:#fff !important; }
.status-customerreply{ background-color:#c2410c !important; color:#fff !important; }
.status-onhold{ background-color:#224488 !important; color:#fff !important; }
.label-success,.badge-success{ background:var(--zz-success) !important; color:#fff !important; }
.label-info,.badge-info{ background:var(--zz-info) !important; color:#fff !important; }
.label-warning,.badge-warning{ background:var(--zz-warning) !important; color:#fff !important; }
.label-danger,.badge-danger{ background:var(--zz-danger) !important; color:#fff !important; }
.label-default,.badge-default{ background:var(--zz-neutral) !important; color:#fff !important; }
.textgreen,.label.textgreen{ background-color:var(--zz-success) !important; color:#fff !important; }
.textred,.label.textred{ background-color:var(--zz-danger) !important; color:#fff !important; }
.textblue,.label.textblue{ background-color:var(--zz-info) !important; color:#fff !important; }
.textorange,.label.textorange{ background-color:var(--zz-warning) !important; color:#fff !important; }

/* Bootstrap's #5cb85c toggle gives white text only 2.48:1 */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch-success .bootstrap-switch-handle-on{ background-color:var(--zz-success) !important; color:#fff !important; }
.bootstrap-switch .bootstrap-switch-handle-off{ background-color:#e9ecef !important; color:var(--zz-ink) !important; }

/* ------------------------------------------------------------------ 11. SIDEBAR */
.list-group-header, .sidebar .panel-heading, .sidebar-heading, .card-sidebar .panel-heading{
  background:transparent !important; border:none !important;
  color:var(--zz-ink-3) !important; font-size:var(--fs-xs) !important;
  font-weight:600 !important; text-transform:uppercase; letter-spacing:.05em;
  padding:var(--space-md) var(--space-lg) var(--space-2) !important;
}
.sidebar-menu-item-wrapper a, .sidebar .list-group-item{
  border:none !important; border-radius:var(--r-sm) !important;
  color:var(--zz-ink) !important; font-size:var(--fs-sm);
  padding:var(--space-sm) var(--space-3) !important;
  transition:background var(--dur) var(--ease);
}
.sidebar-menu-item-wrapper a:hover, .sidebar .list-group-item:hover{ background:rgba(0,0,0,.045) !important; }
.sidebar-menu-item-icon{ color:var(--zz-ink-2) !important; }
/* active item was blue text on a blue tint (~4.0:1, visually invisible) */
.list-group-item.active, .list-group-item.active:hover,
.list-group-item.active .sidebar-menu-item-label,
.sidebar-menu-item-wrapper.active .sidebar-menu-item-label{
  background:var(--zz-accent-soft) !important;
  color:var(--zz-accent-deep) !important;
  font-weight:500;
}
.list-group-item.active .sidebar-menu-item-icon{ color:var(--zz-accent-deep) !important; }

/* ------------------------------------------- 12. BREADCRUMB / FOOTER / MISC */
.master-breadcrumb, .breadcrumb{ background:transparent !important; border:none !important; box-shadow:none !important; font-size:var(--fs-sm); }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active{ color:var(--zz-ink-3) !important; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--zz-ink-3) !important; }
.footer{
  background:transparent !important; color:var(--zz-ink-3) !important;
  border-top:1px solid var(--zz-hair) !important; margin-top:var(--space-xl);
}
.footer a, .footer span, .footer p{ color:var(--zz-ink-3) !important; }
.footer a:hover{ color:var(--zz-ink) !important; }
.alert{ padding:var(--space-3) var(--space-md) !important; font-size:var(--fs-sm) !important; border-radius:var(--r-md) !important; box-shadow:none !important; }
.alert-info{ background:#eef4ff !important; border-color:#dbe6fb !important; color:#1d4ed8 !important; }
.alert-success{ background:#eefaf1 !important; border-color:#d6f2df !important; color:#1c8c3f !important; }
.alert-warning{ background:#fff8ec !important; border-color:#fbe7c6 !important; color:#8a5300 !important; }
.alert-danger{ background:#fef1f0 !important; border-color:#fbdad7 !important; color:#c0271d !important; }
.nav-tabs{ border-bottom:1px solid var(--zz-hair) !important; }
.nav-tabs .nav-link{ border:none !important; color:var(--zz-ink-2) !important; font-weight:500; padding:var(--space-3) var(--space-md) !important; border-radius:var(--r-sm) var(--r-sm) 0 0 !important; }
.nav-tabs .nav-link.active{ color:var(--zz-ink) !important; background:transparent !important; border-bottom:2px solid var(--zz-accent) !important; }
.pagination .page-link{ border:none !important; color:var(--zz-ink) !important; border-radius:var(--r-sm) !important; margin:0 2px; font-size:var(--fs-sm); padding:var(--space-sm) var(--space-3); }
.pagination .page-item.active .page-link{ background:var(--zz-accent) !important; color:#fff !important; }
.modal-content{ border:none !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow-lg) !important; }
.modal-header, .modal-footer{ border-color:var(--zz-hair) !important; }
.progress{ border-radius:var(--r-pill); background:var(--zz-hair); height:var(--space-sm); }
.progress-bar{ background:var(--zz-accent); }
.dial-code, .country-list .dial-code{ color:var(--zz-ink-3) !important; }
.country-list li, .country-list .country-name{ color:var(--zz-ink) !important; }
.selected-dial-code{ color:var(--zz-ink) !important; }
/* empty states should read as intentional, not broken */
.card-body > .text-center:only-child{ color:var(--zz-ink-3) !important; font-size:var(--fs-sm); padding:var(--space-xl) var(--space-md) !important; line-height:var(--lh-base); }

/* ------------------------------------------------------ 13. ACCESSIBILITY */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .nav-link:focus-visible{
  outline:3px solid var(--zz-accent) !important; outline-offset:2px !important; border-radius:var(--r-sm);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important;
  }
  .tiles .tile:hover{ transform:none !important; }
}

/* ============================================================ 14. RESPONSIVE
   Skill rule: "test at 375 768 1024 1440" and "tables can overflow on mobile
   — use horizontal scroll or card layout". WHMCS tables carry no data-labels,
   so card layout is not achievable in pure CSS; they scroll instead, with a
   visible affordance so it is obvious they scroll.
   ========================================================================== */
@media (max-width:820px){
  /* tables scroll inside their own container rather than widening the page */
  .listtable, .dataTables_wrapper, .table-container, .table-responsive{
    overflow-x:auto !important; -webkit-overflow-scrolling:touch; max-width:100%;
    position:relative;
  }
  table.table, table.table-list{ min-width:520px; width:auto; }
  .dataTables_wrapper .dataTables_filter input{ max-width:55vw; }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate{ max-width:100%; white-space:normal; }

  /* 44px touch targets (WCAG 2.2 / skill rule) */
  a.btn, button.btn, input.btn, .btn,
  .navbar-nav > li > a, .dropdown-menu a.dropdown-item,
  .sidebar-menu-item-wrapper a{
    min-height:var(--touch) !important;
    display:inline-flex; align-items:center;
  }
  .list-group-item{ min-height:var(--touch) !important; }
  .btn-xs, .btn-sm{ min-height:var(--space-xl) !important; }

  /* nothing below 12px */
  .label, .badge, .label.status, .status{ font-size:var(--fs-xs) !important; }
  .small, small, .text-muted, .help-block, .card-footer,
  .dataTables_info, .table td, .table th{ font-size:var(--fs-xs) !important; }

  /* a phone does not need 64px section gaps */
  .hero, .page-header{ padding:var(--space-lg) 0 var(--space-md) !important; }
  h1{ font-size:var(--fs-lg) !important; }
  h2{ font-size:var(--fs-md) !important; }
  .card-header, .card-body, .card-footer{ padding:var(--space-md) !important; }
  .tiles .tile{ padding:var(--space-md) !important; }
  .tiles .tile .stat{ font-size:var(--fs-xl) !important; }
  .wrap, .container{ padding-left:var(--space-md); padding-right:var(--space-md); }
}
@media (max-width:420px){
  .tiles .tile .stat{ font-size:var(--fs-lg) !important; }
  table.table, table.table-list{ min-width:460px; }
}

/* ==========================================================================
   15. FINAL MEASURED FIXES  (targets identified by diag-taps.mjs)
   ========================================================================== */

/* --- text that was rendering at 11px --------------------------------------- */
span.pull-left, span.pull-right, .pull-left, .pull-right,
.product-group, .input-group-text, p.copyright, .copyright{
  font-size:var(--fs-xs) !important;
}

/* --- remaining undersized targets ------------------------------------------ */
/* Do NOT make these flex containers: WHMCS stacks content inside list items
   with <br>, and a flex container ignores <br>, collapsing lines together
   (this is what merged the news headline and its date). Alignment for the
   single-line Quick Actions list is applied separately, further down. */
.list-group-item{
  min-height:var(--space-xl);
  padding-top:var(--space-sm) !important;
  padding-bottom:var(--space-sm) !important;
}
.page-link{
  min-height:var(--space-xl);
  display:inline-flex; align-items:center; justify-content:center;
}
.navbar-brand{ min-height:var(--space-xl); display:inline-flex; align-items:center; }
.navbar-light .navbar-nav .nav-link{ min-height:var(--space-xl); display:inline-flex; align-items:center; }
.input-group-text{ min-height:var(--space-xl); display:inline-flex; align-items:center; }

/* On touch devices everything interactive reaches the 44px minimum. On a
   desktop with a pointer that is unnecessarily chunky, so 36px applies there —
   the skill's 44x44 rule is a TOUCH target rule. */
@media (max-width:820px){
  .list-group-item, .page-link, .navbar-brand,
  .navbar-light .navbar-nav .nav-link, .input-group-text{
    min-height:var(--touch) !important;
  }
}

/* ==========================================================================
   16. LAST MILE
   ========================================================================== */

/* A 12px floor for body copy. `max(12px, 1em)` raises anything smaller while
   leaving larger text untouched — the skill's rule is "no body text < 12px". */
body p, body small, body li, body dd, body dt, body figcaption, body .small{
  font-size:max(var(--fs-xs), 1em) !important;
}

/* remaining undersized controls */
.btn-view-more, a.btn-view-more{ min-height:var(--space-xl); display:inline-flex; align-items:center; }
@media (max-width:820px){
  .nav-link, .btn-view-more, a.btn-view-more, a.pull-right, a.float-right{
    min-height:var(--touch) !important;
    display:inline-flex; align-items:center;
  }
}

/* ==========================================================================
   17. Status badge must never be clipped to "Ac..."
   The badge was inheriting an ellipsis from the table cell. Force the text to
   render in full, and give the first column room to hold it.
   ========================================================================== */
.label, label.label, .badge, .label.status, .status{
  overflow:visible !important;
  text-overflow:clip !important;
  max-width: none !important;
  white-space:nowrap !important;
  flex:none !important;
}
@media (max-width:820px){
  table.table td, table.table th{ white-space:nowrap; }
  table.table td:first-child, table.table th:first-child{ min-width:96px; }
}

/* ==========================================================================
   18. OPTION B DASHBOARD LAYOUT  (clientareahome.tpl)
   --------------------------------------------------------------------------
   Desktop: two columns, explicitly placed.
   Mobile:  one column in DOM order — Services, Quick Actions, Tickets,
            Register, News. That order is sensible on a phone, which is why
            the grid placement is explicit rather than relying on source order.
   ========================================================================== */

/* --- stat tiles: 5 up on desktop, 2 up on phones ---------------------------- */
.zz-tiles{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-md);
  margin-bottom:var(--space-md);
}
.zz-tile{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:104px;
  padding:var(--space-lg);
  background:var(--zz-surface);
  border:1px solid var(--zz-hair);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  text-decoration:none !important;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.zz-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none !important; }
.zz-tile > i{
  position:absolute; top:var(--space-md); right:var(--space-md);
  font-size:var(--fs-base); color:var(--zz-accent); opacity:.85;
}
.zz-tile-k{ font-size:var(--fs-sm); color:var(--zz-ink-2); font-weight:500; margin-bottom:var(--space-sm); }
.zz-tile-v{ font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--zz-ink); }
.zz-tile-f{ font-size:var(--fs-xs); color:var(--zz-ink-3); margin-top:var(--space-sm); }

/* --- dashboard grid --------------------------------------------------------- */
.zz-dash{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-md);
  align-items:start;
}
.zz-cell{ min-width:0; }
.zz-services{ grid-column:1; grid-row:1; }
.zz-actions { grid-column:2; grid-row:1; }
.zz-tickets { grid-column:2; grid-row:2; }
.zz-register{ grid-column:2; grid-row:3; }
.zz-news    { grid-column:1; grid-row:2; }
.zz-extra   { grid-column:1 / -1; }

/* the Quick Actions card uses the same list-group styling as panels */
.zz-actions .list-group-item{ min-height:var(--touch); display:flex; align-items:center; }
.zz-actions .list-group-item i{ color:var(--zz-accent); width:18px; text-align:center; }

/* --- phones: one column, sensible order, 2-up tiles ------------------------- */
@media (max-width:820px){
  .zz-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zz-tile{ min-height:92px; padding:var(--space-md); }
  .zz-tile-v{ font-size:var(--fs-xl); }
  .zz-dash{ grid-template-columns:1fr; }
  .zz-services, .zz-actions, .zz-tickets, .zz-register, .zz-news, .zz-extra{
    grid-column:1 !important; grid-row:auto !important;
  }
}
@media (max-width:420px){
  .zz-tile-v{ font-size:var(--fs-lg); }
}

/* ==========================================================================
   19. Option B polish — measured from the live render
   ========================================================================== */

/* Panel content was truncating ("Hosting - Business H..."). The dashboard
   columns are narrower than stock, so let names wrap instead of clipping. */
.zz-dash .text-truncate,
.zz-dash .text-nowrap{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.zz-dash .list-group-item{
  height:auto !important;
  min-height:var(--touch);
  padding-top:var(--space-3) !important;
  padding-bottom:var(--space-3) !important;
}
.zz-dash .list-group-item .row,
.zz-dash .list-group-item > div{ min-width:0; }

/* The news date was butting against the headline */
.zz-news .card-body > div + div,
.zz-news .card-body p + p{ margin-top:var(--space-sm) !important; }
.zz-news .card-body small,
.zz-news .card-body .text-muted{ display:block; margin-top:var(--space-sm); }

/* Tiles: keep labels tidy and let the value scale rather than wrap awkwardly */
.zz-tile-k{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zz-tile-v{ white-space:nowrap; font-size:clamp(19px, 1.7vw, 30px) !important; }
.zz-tile-f{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* The credit value is a formatted currency string ("$960.10 AUD") and is wider
   than a 5-across tile can hold at full size. Wrapping it to a second line is
   the right answer — shrinking every number to fit one string would weaken the
   whole row. Labels stay single-line. */
.zz-tile-v{ white-space:normal !important; overflow-wrap:anywhere; }

/* ==========================================================================
   20. Two REAL defects, confirmed at 3x zoom (not downscaling artefacts)
   --------------------------------------------------------------------------
   a) The service name truncates with an ellipsis. Measuring .div-service-name
      showed it fitting, because an INNER child does the clipping.
   b) The news body concatenates the headline and the date with no separator.
   ========================================================================== */

/* a) let service names wrap instead of clipping */
.zz-dash .div-service-name,
.zz-dash .div-service-name *,
.zz-services .list-group-item *{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  max-width:100% !important;
}
.zz-dash .div-service-name{ min-width:0; }
.zz-dash .div-service-name > *{ min-width:0; }

/* b) separate stacked lines in panel bodies (news headline vs date) */
.zz-news .card-body > *,
.zz-dash .card-body > *{ display:block; }
.zz-news .card-body > * + *{ margin-top:var(--space-sm) !important; }

/* ==========================================================================
   21. PHASE 1 — detail pages adopt the dashboard's visual language
   --------------------------------------------------------------------------
   Applied to the data tables on My Services / My Domains / My Invoices /
   Support Tickets so they read like the dashboard's service rows instead of a
   stock bordered grid.

   Technique: `border-collapse:separate` + `border-spacing` gives each row the
   appearance of its own card WITHOUT converting the table to display:block.
   That matters because DataTables is active on these tables and drives sorting
   and paging from the real table layout — changing display would break it.
   ========================================================================== */
@media (min-width:821px){
  .listtable table.table,
  table.table-list{
    border-collapse:separate !important;
    border-spacing:0 var(--space-2) !important;
  }

  /* column headings stay, but as quiet labels rather than a header band */
  table.table-list thead th{
    background:transparent !important;
    border:none !important;
    font-size:var(--fs-xs) !important;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--zz-ink-3) !important;
    font-weight:600 !important;
    padding:0 var(--space-md) var(--space-2) !important;
    white-space:nowrap;
  }

  /* each row becomes a card */
  table.table-list tbody tr{
    background:var(--zz-surface) !important;
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--dur) var(--ease);
  }
  table.table-list tbody tr:hover{
    box-shadow:var(--shadow-md);
  }

  table.table-list tbody td{
    background:transparent !important;
    border:none !important;
    border-top:1px solid var(--zz-hair) !important;
    border-bottom:1px solid var(--zz-hair) !important;
    padding:var(--space-md) !important;
    vertical-align:middle;
  }
  table.table-list tbody tr:hover td{ background:#fafafc !important; }

  /* close the card at both ends */
  table.table-list tbody td:first-child{
    border-left:1px solid var(--zz-hair) !important;
    border-radius:var(--r-lg) 0 0 var(--r-lg);
  }
  table.table-list tbody td:last-child{
    border-right:1px solid var(--zz-hair) !important;
    border-radius:0 var(--r-lg) var(--r-lg) 0;
  }

  /* primary column emphasis — the linked cell is the row's subject */
  table.table-list tbody td a{ font-weight:500; }
  table.table-list tbody td .text-muted,
  table.table-list tbody td small{ color:var(--zz-ink-3) !important; }

  /* the leading SSL/icon column is decorative — keep it tight */
  table.table-list tbody td.ssl-info{ padding-left:var(--space-3) !important; padding-right:0 !important; }

  /* row actions read as a button, matching the dashboard */
  table.table-list tbody .btn{
    min-height:var(--space-xl);
    padding:0 var(--space-3) !important;
  }
}

/* The same treatment on phones, minus the corner rounding (rows scroll). */
@media (max-width:820px){
  table.table-list tbody tr{ background:var(--zz-surface) !important; }
  table.table-list tbody td{ background:transparent !important; }
}

/* ==========================================================================
   22. Phase 1 polish — the DataTables controls around the card rows
   The search field and "show N entries" select were rendering as blank white
   boxes; the info line and pagination needed to match the new row styling.
   ========================================================================== */
.dataTables_filter input,
.dataTables_length select{
  border:1px solid var(--zz-hair-2) !important;
  border-radius:var(--r-sm) !important;
  background:var(--zz-surface) !important;
  color:var(--zz-ink) !important;
  padding:var(--space-sm) var(--space-3) !important;
  font-size:var(--fs-sm) !important;
  min-height:var(--space-xl);
  box-shadow:none !important;
}
.dataTables_length select{ min-width:72px; padding-right:var(--space-sm) !important; }
.dataTables_filter input:focus,
.dataTables_length select:focus{
  border-color:var(--zz-accent) !important;
  box-shadow:var(--focus-ring) !important;
}
.dataTables_filter label,
.dataTables_length label,
.dataTables_info{
  color:var(--zz-ink-3) !important;
  font-size:var(--fs-sm) !important;
  font-weight:400 !important;
}
.dataTables_wrapper .row{ align-items:center; }
.dataTables_paginate{ margin-top:var(--space-sm) !important; }

/* ==========================================================================
   23. ROOT CAUSE of the spacing/type problems
   --------------------------------------------------------------------------
   WHMCS ships `html { font-size: 14px }`. Bootstrap sizes everything in rem,
   so a 14px root turns its spacing scale into 3.5 / 7 / 14 / 21 / 42 px —
   every value lands BETWEEN a 4px-grid step, which is exactly why the page
   never felt aligned no matter which individual rules I adjusted.

   Measured inventory on the dashboard before this change:
     padding  25 distinct values (3.5, 3.8, 4.4, 5.3, 7.4, 10.5, 17.5, 21 ...)
     font     10 distinct sizes  (12.3, 12.6, 13.5, 17.5, 24.5 ...)

   Setting the root to 16px snaps 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px,
   3rem = 48px — the same scale the rest of this stylesheet uses. It also
   brings body text up to the 16px base the UX guidance recommends.
   ========================================================================== */
html{ font-size:16px !important; }

/* ==========================================================================
   24. SCALE NORMALIZER — generated from the measured offender list
   --------------------------------------------------------------------------
   The inventory reduced "too many spacing issues" to a short, ranked list of
   specific selectors. Each rule below snaps one measured off-scale value onto
   the scale. Nothing here is guessed; every selector was reported by
   audit-offenders.mjs as the source of an off-scale value.

   Bootstrap hard-codes several of these in px, so the 16px root change could
   not reach them — they need naming explicitly.
   ========================================================================== */

/* --- typography ------------------------------------------------------------ */
/* 14px was the single most common off-scale size (Bootstrap's .875rem at the
   old 14px root). Snap it to the body size so text stops reading small. */
body span, body p, body div, body li, body td, body label, body small,
button.btn, .btn-sm, .btn-default{
  font-size:var(--fs-base);
}
/* the logo was rendering at 20px, outside the scale */
a.navbar-brand.mr-3, .navbar-brand{ font-size:var(--fs-lg) !important; }

/* My own tile value used clamp(), which produced 24.5px at 1440. Use the
   scale directly so it lands on a step at every width. */
.zz-tile-v{ font-size:var(--fs-xl) !important; }
@media (max-width:1100px){ .zz-tile-v{ font-size:var(--fs-lg) !important; } }
@media (max-width:820px){ .zz-tile-v{ font-size:var(--fs-lg) !important; } }
@media (max-width:420px){ .zz-tile-v{ font-size:var(--fs-md) !important; } }

/* --- spacing: Bootstrap px values the root change could not reach ---------- */
div.container{ padding-left:var(--space-md) !important; padding-right:var(--space-md) !important; }
ol.breadcrumb{ padding:var(--space-sm) 0 !important; }
button.btn, .btn{ padding-left:var(--space-3) !important; padding-right:var(--space-3) !important; }
a.btn.btn-default.btn-xs, .btn-xs{
  padding:var(--space-xs) var(--space-sm) !important;
  min-height:var(--space-xl) !important;
}
div.topbar{ padding-top:var(--space-xs) !important; padding-bottom:var(--space-xs) !important; }
footer.footer{ padding-top:var(--space-xl) !important; padding-bottom:var(--space-xl) !important; }

/* keep the primary content gutters on the scale too */
.col-lg-4.col-xl-3, .col-lg-8.col-xl-9.primary-content{
  padding-left:var(--space-sm) !important;
  padding-right:var(--space-sm) !important;
}

/* Bootstrap's stock 2-3px corner radii sit off the scale; snap them up so all
   corners come from the same set. (980px is the intentional pill.) */
.badge, .label, .btn-xs, .alert, .list-group-item, .form-control,
input, select, textarea, .card, .dropdown-menu, .nav-tabs .nav-link{
  border-radius:var(--r-sm);
}
.card, .zz-tile, .modal-content{ border-radius:var(--r-lg) !important; }
.badge, .label, .btn, .btn-xs, .btn-sm, .nav-link, .pagination .page-link{
  border-radius:var(--r-pill) !important;
}

/* ==========================================================================
   25. FINAL SNAP — the last measured off-scale values
   ========================================================================== */
button.btn, a.btn.btn-active-client, .btn{ font-size:var(--fs-base) !important; }
a.navbar-brand.mr-3, .navbar-brand{
  padding-left:var(--space-sm) !important;
  padding-right:var(--space-sm) !important;
}

/* residual margins off the 4px grid */
.mb-1, .my-1{ margin-bottom:var(--space-xs) !important; }
.mt-1, .my-1{ margin-top:var(--space-xs) !important; }
.mb-2, .my-2{ margin-bottom:var(--space-sm) !important; }
.mt-2, .my-2{ margin-top:var(--space-sm) !important; }
.mb-3, .my-3{ margin-bottom:var(--space-md) !important; }
.mt-3, .my-3{ margin-top:var(--space-md) !important; }

/* Bootstrap's stock 3px/4px corner radii — snap to the scale */
.badge, .label, .alert, .btn, .btn-sm, .btn-xs, .form-control,
input, select, textarea, .dropdown-menu, .list-group-item,
.nav-tabs .nav-link, .pagination .page-link, .card-header, .card-footer{
  border-radius:var(--r-sm) !important;
}
.badge, .label, .btn, .btn-sm, .btn-xs, .nav-link, .pagination .page-link{
  border-radius:var(--r-pill) !important;
}

/* ==========================================================================
   26. Requested removals
   --------------------------------------------------------------------------
   The sidebar renders each card with a menuItemName attribute, so a card can
   be hidden by name without touching sidebar.tpl. "Client Contacts" was
   removed at the client's request.
   To restore it, delete this rule.
   ========================================================================== */
.card-sidebar[menuitemname="Client Contacts"]{ display:none !important; }

/* ==========================================================================
   27. Remove the knowledge base
   --------------------------------------------------------------------------
   Measured markup:
     search form  form.form-inline.ml-auto  action="/index.php?rp=/knowledgebase/search"
     menu entry   li.dropdown-item[menuitemname="Knowledgebase"]
   Targeted by action/menuItemName rather than by position, so this keeps
   working if the header is rearranged.
   ========================================================================== */
.navbar form.form-inline.ml-auto,
.navbar-light form.form-inline.ml-auto,
.navbar form[action*="knowledgebase" i],
form[action*="/knowledgebase/search"]{
  display:none !important;
}
li[menuitemname="Knowledgebase"],
[menuitemname="Knowledgebase"],
a.dropdown-item[href*="knowledgebase" i],
.dropdown-menu a[href*="knowledgebase" i]{
  display:none !important;
}

/* With the search gone the right-hand cluster needs its own spacing, otherwise
   the cart and account menu collapse together. */
.header .navbar .container{ position:relative; }
.header .navbar-nav.ml-auto,
.header .navbar .ml-auto{
  margin-left:auto !important;
  display:flex; align-items:center; gap:var(--space-sm);
}
.cart-btn{ display:inline-flex; align-items:center; gap:var(--space-sm); min-height:var(--touch); }

/* ==========================================================================
   28. PRODUCT DETAILS page  (clientareaproductdetails.tpl)
   --------------------------------------------------------------------------
   Measured problems, all fixed without touching the template:
     .product-status            a full-width coloured BAR -> should be a badge
     .col-md-6.text-center      every label/value CENTRED, so nothing aligns
                                -> label left, value right, one row each
     .product-icon              heavy dark disc
     .btn.btn-block.btn-danger  the destructive action was the loudest element
                                on the page -> quiet outlined button
   ========================================================================== */

/* --- the service panel ------------------------------------------------------
   IMPORTANT: .product-status is NOT a badge — it is the WRAPPER PANEL that
   contains .product-icon and .product-status-text. WHMCS paints the whole panel
   the status colour. Treating it as a badge painted the entire left panel green
   and blew the layout apart. The panel is now a neutral card and the status is
   a small badge inside it, which is what it should have been. */
.product-status{
  display:block !important;
  width:auto !important;
  background:var(--zz-surface) !important;
  border:1px solid var(--zz-hair) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm);
  padding:var(--space-lg) var(--space-md) !important;
  margin:0 0 var(--space-md) !important;
  text-align:center;
}
.product-status-text{
  display:inline-block;
  padding:var(--space-xs) var(--space-3) !important;
  border-radius:var(--r-pill) !important;
  font-size:var(--fs-xs) !important;
  font-weight:600 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff !important;
  background:var(--zz-neutral);
}
.product-status-active    .product-status-text{ background-color:var(--zz-success) !important; }
.product-status-suspended .product-status-text,
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text{ background-color:var(--zz-neutral) !important; }
.product-status-pending   .product-status-text{ background-color:var(--zz-warning) !important; }

/* --- icon ------------------------------------------------------------------
   The icon is a FontAwesome STACK: fa-circle (2x) behind fa-hdd (1x). Sizing the
   individual <i> glyphs with max-width squashes the circle into an ellipse and
   stripping its background removes the fill entirely — both were bugs I
   introduced. The stack is sized by its own font-size, so scale that instead. */
.product-icon{ padding:var(--space-lg) 0 var(--space-md) !important; text-align:center; font-size:var(--fs-base) !important; }
/* Draw the circle in CSS rather than relying on the FontAwesome stack.
   `.product-icon` inherits a very large font-size, so any em-based scaling of
   .fa-stack multiplies out of control (measured 132px) and the glyph boxes come
   out non-square. A real CSS circle is exact at any size. */
.product-icon .fa-stack{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:88px !important; height:88px !important;
  border-radius:50% !important;
  background:var(--zz-ink) !important;
  font-size:1px !important;      /* neutralise inherited glyph sizing */
  line-height:0 !important;
  position:relative;
}
.product-icon .fa-stack .fa-circle{ display:none !important; }
.product-icon .fa-stack .fa-stack-1x,
.product-icon .fa-stack .fa-hdd{
  position:static !important;
  font-size:34px !important;
  line-height:1 !important;
  color:#fff !important;
}
.product-icon h3{
  font-size:var(--fs-md) !important;
  font-weight:600 !important;
  margin:var(--space-sm) 0 0 !important;
  letter-spacing:-.02em;
}
.product-icon h4{
  font-size:var(--fs-sm) !important;
  font-weight:400 !important;
  color:var(--zz-ink-3) !important;
  margin:var(--space-xs) 0 0 !important;
}

/* --- right column: centred stack -> aligned label/value rows ---------------- */
.product-details .col-md-6.text-center{
  text-align:left !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:baseline;
}
.product-details .col-md-6.text-center > h4{
  flex:0 0 58%;
  margin:0 !important;
  padding:var(--space-3) 0 !important;
  font-size:var(--fs-sm) !important;
  font-weight:500 !important;
  color:var(--zz-ink-2) !important;
  letter-spacing:0;
  border-bottom:1px solid var(--zz-hair);
}
.product-details .col-md-6.text-center > *:not(h4){
  flex:0 0 42%;
  margin:0 !important;
  padding:var(--space-3) 0 !important;
  text-align:right;
  font-weight:500;
  color:var(--zz-ink);
  border-bottom:1px solid var(--zz-hair);
}

/* --- destructive action should not dominate -------------------------------- */
.btn.btn-block.btn-danger,
.product-details .btn-danger.btn-block{
  background:transparent !important;
  border:1px solid var(--zz-hair-2) !important;
  color:var(--zz-danger) !important;
  box-shadow:none !important;
  font-weight:500 !important;
  margin-top:var(--space-md) !important;
}
.btn.btn-block.btn-danger:hover,
.product-details .btn-danger.btn-block:hover{
  background:rgba(179,38,30,.06) !important;
  border-color:var(--zz-danger) !important;
}

/* --- tabs / panels on this page -------------------------------------------- */
.product-details .nav-tabs{ margin-top:var(--space-lg) !important; }
.product-details .card{ margin-bottom:var(--space-md); }