/* ======================================================================
   TMB Solutions — universal-styling.css
   Purpose:
   - Single shared front-end stylesheet for TMB-driven themes and plugins.
   - Keep plugins lean: plugins output structure/content, this file outputs UI.
   - Theme variations should come from tokens + body classes, not duplicated CSS.

   Expected body classes from TMB Settings:
   - .tmb-theme-mode-light / .tmb-theme-mode-dark
   - .tmb-surface-style-glass / .tmb-surface-style-minimal

   Recommended architecture:
   - universal-styling.css = all shared primitives + reusable components
   - tmb-settings.css      = optional mode / site-shell / header-footer layer
   - page-specific CSS     = only unique layout/behavior when truly necessary
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) Base Tokens
------------------------------------------------------------------------ */
:root{
  /* Brand */
  --tmb-primary: #0f2740;
  --tmb-secondary: #cfd7e2;
  --tmb-accent: #f4b400;

  /* Typography */
  --tmb-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tmb-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --tmb-font-primary: var(--tmb-font-sans);
  --tmb-font-heading: var(--tmb-font-sans);

  /* Surfaces */
  --tmb-page-bg: #f8fafc;
  --tmb-surface-bg: #ffffff;
  --tmb-surface-alt: #f1f5f9;
  --tmb-surface-soft: #ffffff;
  --tmb-surface-elevated: rgba(255,255,255,.82);

  /* Text */
  --tmb-text: #0f172a;
  --tmb-text-muted: #475569;
  --tmb-text-soft: #64748b;
  --tmb-text-inverse: #ffffff;

  /* Borders */
  --tmb-border: #dbe5ef;
  --tmb-border-strong: #cbd5e1;
  --tmb-border-soft: rgba(15,23,42,.08);

  /* UI treatment */
  --tmb-ui-surface: rgba(255,255,255,.76);
  --tmb-ui-border: rgba(15,23,42,.10);
  --tmb-ui-border-strong: rgba(15,23,42,.16);
  --tmb-ui-shadow: 0 14px 34px rgba(15,23,42,.10);
  --tmb-ui-shadow-soft: 0 8px 18px rgba(15,23,42,.07);
  --tmb-ui-shadow-none: none;
  --tmb-ui-blur: 14px;

  /* Radius */
  --tmb-radius-xs: 10px;
  --tmb-radius-sm: 14px;
  --tmb-radius: 18px;
  --tmb-radius-lg: 24px;
  --tmb-radius-pill: 999px;

  /* Sizing */
  --tmb-content-max: 1200px;
  --tmb-content-narrow: 980px;
  --tmb-content-wide: 1280px;
  --tmb-content-gutter: 18px;
  --tmb-section-space: clamp(48px, 6vw, 88px);

  /* Motion / focus */
  --tmb-focus: rgba(15,39,64,.18);
  --tmb-duration-fast: .16s;
  --tmb-duration-base: .22s;
  --tmb-ease: ease;

  /* Derived aliases used by existing templates */
  --tmb-color-primary: var(--tmb-primary);
  --tmb-color-secondary: var(--tmb-secondary);
  --tmb-color-accent: var(--tmb-accent);
  --tmb-color-10: var(--tmb-primary);
  --tmb-color-30: var(--tmb-secondary);
  --tmb-color-60: color-mix(in srgb, var(--tmb-primary) 12%, white);

  --tmb-surface-card: var(--tmb-ui-surface);
  --tmb-shadow-card: var(--tmb-ui-shadow);
  --tmb-border-color: var(--tmb-ui-border);
  --tmb-text-color: var(--tmb-text);
}

/* ----------------------------------------------------------------------
   2) Theme Mode Hooks
------------------------------------------------------------------------ */
body.tmb-theme-mode-light{
  --tmb-page-bg: #f8fafc;
  --tmb-surface-bg: #ffffff;
  --tmb-surface-alt: #f1f5f9;
  --tmb-surface-soft: #ffffff;
  --tmb-surface-elevated: rgba(255,255,255,.82);
  --tmb-text: #0f172a;
  --tmb-text-muted: #475569;
  --tmb-text-soft: #64748b;
  --tmb-border: #dbe5ef;
  --tmb-border-strong: #cbd5e1;
}

body.tmb-theme-mode-dark{
  --tmb-page-bg: #0b1220;
  --tmb-surface-bg: #111827;
  --tmb-surface-alt: #172033;
  --tmb-surface-soft: #0f172a;
  --tmb-surface-elevated: rgba(17,24,39,.82);
  --tmb-text: #f8fafc;
  --tmb-text-muted: #cbd5e1;
  --tmb-text-soft: #94a3b8;
  --tmb-border: rgba(255,255,255,.10);
  --tmb-border-strong: rgba(255,255,255,.16);
}

/* ----------------------------------------------------------------------
   3) Surface Mode Hooks
------------------------------------------------------------------------ */
body.tmb-surface-style-glass{
  --tmb-ui-surface: rgba(255,255,255,.76);
  --tmb-ui-border: rgba(15,23,42,.10);
  --tmb-ui-border-strong: rgba(15,23,42,.16);
  --tmb-ui-shadow: 0 14px 34px rgba(15,23,42,.10);
  --tmb-ui-shadow-soft: 0 8px 18px rgba(15,23,42,.07);
  --tmb-ui-blur: 14px;
}

body.tmb-theme-mode-dark.tmb-surface-style-glass{
  --tmb-ui-surface: rgba(17,24,39,.72);
  --tmb-ui-border: rgba(255,255,255,.10);
  --tmb-ui-border-strong: rgba(255,255,255,.18);
  --tmb-ui-shadow: 0 18px 42px rgba(0,0,0,.26);
  --tmb-ui-shadow-soft: 0 10px 22px rgba(0,0,0,.18);
}

body.tmb-surface-style-minimal{
  --tmb-ui-surface: var(--tmb-surface-bg);
  --tmb-ui-border: var(--tmb-border);
  --tmb-ui-border-strong: var(--tmb-border-strong);
  --tmb-ui-shadow: none;
  --tmb-ui-shadow-soft: none;
  --tmb-ui-blur: 0px;
}

/* ----------------------------------------------------------------------
   4) Reset + Base
------------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ min-height:100%; }
body{
  margin:0;
  background: var(--tmb-page-bg);
  color: var(--tmb-text);
  font-family: var(--tmb-font-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img,svg,video,canvas{ display:block; max-width:100%; }
button,input,textarea,select{ font: inherit; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
hr{ border:0; border-top:1px solid var(--tmb-ui-border); margin:24px 0; }

:focus-visible{
  outline: 3px solid var(--tmb-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ----------------------------------------------------------------------
   5) Shared Layout Primitives
------------------------------------------------------------------------ */
.tmb-container{
  width:min(100% - (var(--tmb-content-gutter) * 2), var(--tmb-content-max));
  margin-inline:auto;
}
.tmb-container--narrow{ max-width:var(--tmb-content-narrow); }
.tmb-container--wide{ max-width:var(--tmb-content-wide); }

.tmb-section{ padding: var(--tmb-section-space) 0; }
.tmb-section--tight{ padding: clamp(24px, 4vw, 40px) 0; }
.tmb-section--flush-top{ padding-top:0; }
.tmb-section--flush-bottom{ padding-bottom:0; }

.tmb-stack{ display:grid; gap:16px; }
.tmb-stack--xs{ gap:8px; }
.tmb-stack--sm{ gap:12px; }
.tmb-stack--lg{ gap:24px; }
.tmb-stack--xl{ gap:32px; }

.tmb-grid{ display:grid; gap:24px; }
.tmb-grid--sm{ gap:16px; }
.tmb-grid--lg{ gap:32px; }
.tmb-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tmb-grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tmb-grid-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .tmb-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .tmb-grid-2,
  .tmb-grid-3,
  .tmb-grid-4{ grid-template-columns:1fr; }
}

.tmb-cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.tmb-cluster--center{ justify-content:center; }
.tmb-cluster--between{ justify-content:space-between; }

.tmb-shell{
  background: var(--tmb-ui-surface);
  border: 1px solid var(--tmb-ui-border);
  border-radius: var(--tmb-radius-lg);
  box-shadow: var(--tmb-ui-shadow);
  backdrop-filter: blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter: blur(var(--tmb-ui-blur));
}

/* ----------------------------------------------------------------------
   6) Typography Primitives
------------------------------------------------------------------------ */
.tmb-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--tmb-primary);
}

.tmb-heading-xl,
.tmb-heading-lg,
.tmb-heading-md,
.tmb-heading-sm,
.tmb-heading,
.tmb-title{
  margin:0;
  color: var(--tmb-text);
  font-family: var(--tmb-font-heading);
  letter-spacing:-.03em;
}
.tmb-heading-xl{ font-size:clamp(2.15rem, 4.8vw, 3.8rem); line-height:1.02; }
.tmb-heading-lg{ font-size:clamp(1.9rem, 4vw, 3.2rem); line-height:1.08; }
.tmb-heading-md{ font-size:clamp(1.45rem, 2.8vw, 2.1rem); line-height:1.12; }
.tmb-heading-sm{ font-size:clamp(1.05rem, 1.8vw, 1.2rem); line-height:1.25; }

.tmb-text,
.tmb-copy,
.tmb-prose{
  color: var(--tmb-text-muted);
  line-height:1.75;
  font-size:1rem;
}
.tmb-text-sm{ font-size:.94rem; line-height:1.7; }
.tmb-text-xs{ font-size:.82rem; line-height:1.6; }
.tmb-text-muted{ color: var(--tmb-text-muted); }
.tmb-text-soft{ color: var(--tmb-text-soft); }
.tmb-text-strong{ color: var(--tmb-text); }
.tmb-text-center{ text-align:center; }
.tmb-prose p,
.tmb-copy p{ margin:0; }
.tmb-prose > * + *{ margin-top:1em; }

/* ----------------------------------------------------------------------
   7) Reusable Surfaces / Media / Dividers
------------------------------------------------------------------------ */
.tmb-card,
.tmb-surface-card,
.tmb-theme-card{
  background: var(--tmb-ui-surface);
  border: 1px solid var(--tmb-ui-border);
  border-radius: var(--tmb-radius);
  box-shadow: var(--tmb-ui-shadow);
  backdrop-filter: blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter: blur(var(--tmb-ui-blur));
  color: var(--tmb-text);
  padding:20px;
}
.tmb-card--tight{ padding:14px; }
.tmb-card--soft{ box-shadow: var(--tmb-ui-shadow-soft); }
.tmb-card--pad-lg{ padding:28px; }

.tmb-quote{
  padding:20px 24px;
  border:1px solid var(--tmb-ui-border);
  border-left:4px solid var(--tmb-primary);
  border-radius:0 var(--tmb-radius) var(--tmb-radius) 0;
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow);
  color: var(--tmb-text);
  line-height:1.75;
  font-weight:600;
}

.tmb-media-shell{
  overflow:hidden;
  border-radius: var(--tmb-radius-lg);
  border: 1px solid var(--tmb-ui-border);
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow);
}
.tmb-media-shell img{
  width:100%;
  height:auto;
  object-fit:cover;
}

.tmb-rule,
.tmb-hr{
  height:1px;
  background: var(--tmb-ui-border);
  border:0;
  margin:16px 0;
}

.tmb-pill,
.tmb-badge,
.tmb-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  border-radius: var(--tmb-radius-pill);
  border:1px solid var(--tmb-ui-border);
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow-soft);
  color: var(--tmb-text);
  font-size:.85rem;
  font-weight:700;
}

/* ----------------------------------------------------------------------
   8) Buttons / Links
------------------------------------------------------------------------ */
.tmb-button,
.tmb-btn,
.tmb-theme-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:10px 18px;
  border-radius: var(--tmb-radius-pill);
  border:1px solid var(--tmb-primary);
  background: var(--tmb-primary);
  color: var(--tmb-text-inverse);
  cursor:pointer;
  font-weight:700;
  text-decoration:none !important;
  box-shadow: var(--tmb-ui-shadow-soft);
  transition:
    transform var(--tmb-duration-fast) var(--tmb-ease),
    opacity var(--tmb-duration-fast) var(--tmb-ease),
    background var(--tmb-duration-fast) var(--tmb-ease),
    border-color var(--tmb-duration-fast) var(--tmb-ease),
    color var(--tmb-duration-fast) var(--tmb-ease);
}
.tmb-button:hover,
.tmb-btn:hover,
.tmb-theme-button:hover{
  text-decoration:none !important;
  color: var(--tmb-text-inverse);
  opacity:.95;
  transform: translateY(-1px);
}

.tmb-button--secondary,
.tmb-btn--secondary,
.tmb-theme-button--secondary{
  background: transparent;
  color: var(--tmb-text);
  border-color: var(--tmb-ui-border-strong);
  box-shadow:none;
}
.tmb-button--secondary:hover,
.tmb-btn--secondary:hover,
.tmb-theme-button--secondary:hover{
  color: var(--tmb-text);
  background: color-mix(in srgb, var(--tmb-primary) 6%, transparent);
}

.tmb-button--ghost,
.tmb-btn--ghost{
  background: transparent;
  color: var(--tmb-text);
  border-color: transparent;
  box-shadow:none;
}

.tmb-link{
  color: var(--tmb-primary);
  font-weight:800;
}
.tmb-link:hover{
  color: var(--tmb-accent);
  text-decoration:none;
}

body.tmb-surface-style-minimal .tmb-button,
body.tmb-surface-style-minimal .tmb-btn,
body.tmb-surface-style-minimal .tmb-theme-button{
  box-shadow:none;
}

/* ----------------------------------------------------------------------
   9) Forms / Inputs / Notices
------------------------------------------------------------------------ */
.tmb-field,
.tmb-theme-input,
.tmb-form input[type="text"],
.tmb-form input[type="email"],
.tmb-form input[type="tel"],
.tmb-form input[type="password"],
.tmb-form input[type="search"],
.tmb-form input[type="number"],
.tmb-form textarea,
.tmb-form select,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border-radius: var(--tmb-radius-sm);
  border:1px solid var(--tmb-ui-border);
  background: var(--tmb-surface-bg);
  color: var(--tmb-text);
  font-size:16px;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
  transition:
    border-color var(--tmb-duration-fast) var(--tmb-ease),
    box-shadow var(--tmb-duration-fast) var(--tmb-ease),
    background var(--tmb-duration-fast) var(--tmb-ease);
}
.tmb-field:focus,
.tmb-theme-input:focus,
.tmb-form input:focus,
.tmb-form textarea:focus,
.tmb-form select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--tmb-primary) 30%, white);
  box-shadow: 0 0 0 4px var(--tmb-focus);
}

.tmb-form,
.tmb-form__inner{ display:grid; gap:16px; }
.tmb-form__field,
.tmb-field-wrap{ display:grid; gap:8px; }
.tmb-form__field label,
.tmb-label{
  font-weight:700;
  color: var(--tmb-text);
}
.tmb-form__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.tmb-form__honeypot{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.tmb-notice,
.tmb-form__notice{
  padding:14px 16px;
  border-radius: var(--tmb-radius);
  font-weight:600;
  border:1px solid var(--tmb-ui-border);
  background: var(--tmb-ui-surface);
}
.tmb-notice--success,
.tmb-form__notice--success{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.24);
  color:#166534;
}
.tmb-notice--error,
.tmb-form__notice--error{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.20);
  color:#991b1b;
}

/* ----------------------------------------------------------------------
   10) Generic Utility Helpers
------------------------------------------------------------------------ */
.tmb-center{ text-align:center; }
.tmb-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.tmb-w-full{ width:100%; }
.tmb-max-none{ max-width:none; }
.tmb-mx-auto{ margin-inline:auto; }
.tmb-hidden{ display:none !important; }
.tmb-rounded{ border-radius: var(--tmb-radius); }
.tmb-rounded-lg{ border-radius: var(--tmb-radius-lg); }
.tmb-shadow-none{ box-shadow:none !important; }
.tmb-surface{ background: var(--tmb-ui-surface); }
.tmb-border{ border:1px solid var(--tmb-ui-border); }

/* ----------------------------------------------------------------------
   11) Woo / Commerce Shared Layer
------------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius: var(--tmb-radius);
  border:1px solid var(--tmb-ui-border);
  box-shadow: var(--tmb-ui-shadow-soft);
  background: var(--tmb-ui-surface);
  padding:14px 16px;
}
.woocommerce-message{ border-color: color-mix(in srgb, var(--tmb-primary) 22%, white); }
.woocommerce-info{ border-color: var(--tmb-ui-border-strong); }
.woocommerce-error{ border-color: rgba(179,45,46,.28); }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  appearance:none;
  border:1px solid var(--tmb-ui-border);
  background: var(--tmb-ui-surface);
  color: var(--tmb-text);
  border-radius: var(--tmb-radius-sm);
  padding:10px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform var(--tmb-duration-fast) var(--tmb-ease), background var(--tmb-duration-fast) var(--tmb-ease), border-color var(--tmb-duration-fast) var(--tmb-ease);
  box-shadow: var(--tmb-ui-shadow-soft);
  text-decoration:none !important;
  font-weight:800;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background: color-mix(in srgb, var(--tmb-surface-bg) 92%, white);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tmb-primary) 20%, white);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: color-mix(in srgb, var(--tmb-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--tmb-accent) 34%, white);
  color: var(--tmb-text);
}

.woocommerce table.shop_table{
  border:1px solid var(--tmb-ui-border);
  border-radius: var(--tmb-radius);
  overflow:hidden;
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow-soft);
}
.woocommerce table.shop_table thead th{
  background: color-mix(in srgb, var(--tmb-primary) 5%, white);
  color: var(--tmb-text);
  font-weight:900;
  border-bottom:1px solid var(--tmb-ui-border);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:12px 14px;
  border-top:1px solid var(--tmb-ui-border);
  vertical-align:middle;
}
.woocommerce table.shop_table tr:first-child td{ border-top:0; }

.woocommerce-account .woocommerce{
  max-width: var(--tmb-content-max);
  margin:0 auto;
  padding:18px var(--tmb-content-gutter);
}
.woocommerce-account .kpf-myacct-layout,
.woocommerce-account .tmb-myacct-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.woocommerce-account .kpf-myacct-layout > .woocommerce-MyAccount-navigation,
.woocommerce-account .kpf-myacct-layout > .woocommerce-MyAccount-content,
.woocommerce-account .tmb-myacct-layout > .woocommerce-MyAccount-navigation,
.woocommerce-account .tmb-myacct-layout > .woocommerce-MyAccount-content{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  min-width:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
  border:1px solid var(--tmb-ui-border);
  border-radius: var(--tmb-radius);
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow-soft);
  backdrop-filter: blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter: blur(var(--tmb-ui-blur));
  padding:10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius: var(--tmb-radius-sm);
  border:1px solid transparent;
  background: color-mix(in srgb, var(--tmb-surface-bg) 65%, transparent);
  font-weight:800;
  color: var(--tmb-text);
  text-decoration:none !important;
  transition: background var(--tmb-duration-base) var(--tmb-ease), border-color var(--tmb-duration-base) var(--tmb-ease), transform var(--tmb-duration-base) var(--tmb-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{
  background: color-mix(in srgb, var(--tmb-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--tmb-primary) 14%, white);
  transform: translateY(-1px);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a,
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active > a{
  background: color-mix(in srgb, var(--tmb-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--tmb-accent) 22%, white);
}
.woocommerce-account .woocommerce-MyAccount-content{
  border:1px solid var(--tmb-ui-border);
  border-radius: var(--tmb-radius);
  background: var(--tmb-ui-surface);
  box-shadow: var(--tmb-ui-shadow);
  backdrop-filter: blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter: blur(var(--tmb-ui-blur));
  padding:18px;
  min-height:340px;
}
@media (max-width: 980px){
  .woocommerce-account .kpf-myacct-layout,
  .woocommerce-account .tmb-myacct-layout{ grid-template-columns:1fr; }
}

/* ----------------------------------------------------------------------
   12) Legacy Alias Layer
   Keeps older KPF/TMB templates stable during migration.
------------------------------------------------------------------------ */
:root{
  --kpf-navy: var(--tmb-primary);
  --kpf-teal: var(--tmb-primary);
  --kpf-lime: var(--tmb-accent);
  --kpf-bg: var(--tmb-page-bg);
  --kpf-text: var(--tmb-text);
  --kpf-muted: var(--tmb-text-muted);
  --kpf-glass: var(--tmb-ui-surface);
  --kpf-glass-2: var(--tmb-surface-elevated);
  --kpf-border: var(--tmb-ui-border);
  --kpf-border-2: var(--tmb-ui-border-strong);
  --kpf-shadow: var(--tmb-ui-shadow);
  --kpf-shadow-soft: var(--tmb-ui-shadow-soft);
  --kpf-radius-lg: var(--tmb-radius);
  --kpf-radius-md: var(--tmb-radius-sm);
  --kpf-radius-sm: var(--tmb-radius-xs);
  --kpf-max: var(--tmb-content-max);
  --kpf-pad-x: var(--tmb-content-gutter);
  --kpf-focus: var(--tmb-focus);
}

.kpf-container{ max-width:var(--kpf-max); margin:0 auto; padding:0 var(--kpf-pad-x); }
.kpf-muted{ color:var(--kpf-muted); }
.kpf-sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.kpf-card{ background:var(--kpf-glass); border:1px solid var(--kpf-border); border-radius:var(--kpf-radius-lg); box-shadow:var(--kpf-shadow); backdrop-filter:blur(var(--tmb-ui-blur)); -webkit-backdrop-filter:blur(var(--tmb-ui-blur)); padding:16px; }
.kpf-card--tight{ padding:14px; }
.kpf-card--pad-lg{ padding:18px; }
.kpf-hr{ height:1px; background:var(--kpf-border); border:0; margin:16px 0; }
.kpf-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--kpf-border); background:var(--kpf-glass); box-shadow:var(--kpf-shadow-soft); }
.kpf-link{ color:var(--tmb-primary); font-weight:800; }
.kpf-link:hover{ color:var(--tmb-accent); text-decoration:none; }
.kpf-btn{ appearance:none; border:1px solid var(--kpf-border); background:var(--kpf-glass); color:var(--kpf-text); border-radius:var(--kpf-radius-md); padding:10px 12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; box-shadow:var(--kpf-shadow-soft); text-decoration:none !important; font-weight:800; }
.kpf-btn:hover{ background:color-mix(in srgb, var(--tmb-surface-bg) 92%, white); transform:translateY(-1px); border-color:color-mix(in srgb, var(--tmb-primary) 18%, white); }
.kpf-field{ width:100%; max-width:100%; padding:12px 14px; border-radius:var(--kpf-radius-md); border:1px solid var(--kpf-border); background:var(--tmb-surface-bg); color:var(--kpf-text); font-size:16px; box-shadow:inset 0 1px 2px rgba(15,23,42,.05); }