/*
Theme Name:   KeycapsMaster Child
Theme URI:    https://keycapsmaster.com
Description:  KeycapsMaster design system. Child theme of Hello Elementor,
              built to style Elementor pages through stable semantic classes
              (km-*) so the design never depends on Elementor's generated
              per-element CSS.
Author:       KeycapsMaster
Template:     hello-elementor
Version:      5.0.0
License:      GNU General Public License v2 or later
Text Domain:  keycapsmaster-child
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand */
  --km-primary: #006194;
  --km-primary-container: #007bb9;
  --km-primary-hover: #004b73;
  --km-on-primary: #ffffff;
  --km-primary-fixed: #cce5ff;
  --km-primary-fixed-dim: #93ccff;
  --km-secondary: #006591;
  --km-secondary-container: #39b8fd;
  --km-secondary-fixed: #c9e6ff;
  --km-tertiary: #006387;
  --km-tertiary-fixed: #c4e7ff;

  /* Surfaces */
  --km-surface: #faf8ff;
  --km-surface-container-lowest: #ffffff;
  --km-surface-container-low: #f2f3ff;
  --km-surface-container: #eaedff;
  --km-surface-container-high: #e2e7ff;
  --km-surface-container-highest: #dae2fd;
  --km-surface-variant: #dae2fd;
  --km-inverse-surface: #283044;
  --km-inverse-on-surface: #eef0ff;

  /* Text */
  --km-on-surface: #131b2e;
  --km-on-surface-variant: #3f4850;
  --km-outline: #707881;
  --km-outline-variant: #bfc7d2;
  --km-hairline: #e2e8f0;

  /* Accents */
  --km-star: #f59e0b;
  --km-success: #15803d;
  --km-success-bg: #dcfce7;
  --km-danger: #ba1a1a;

  /* Typography */
  --km-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --km-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii */
  --km-radius-xs: 0.375rem;
  --km-radius-sm: 0.5rem;
  --km-radius-md: 0.75rem;
  --km-radius-lg: 1rem;
  --km-radius-xl: 1.5rem;
  --km-radius-pill: 9999px;

  /* Spacing */
  --km-space-2xs: 0.25rem;
  --km-space-xs: 0.5rem;
  --km-space-sm: 0.75rem;
  --km-space-md: 1rem;
  --km-space-lg: 1.5rem;
  --km-space-xl: 2.5rem;
  --km-space-2xl: 3.5rem;
  --km-space-3xl: 5rem;

  /* Layout */
  --km-shell: 1280px;
  --km-shell-narrow: 62rem;
  --km-shell-wide: 1440px;
  --km-gutter: 1.5rem;

  /* Elevation */
  --km-shadow-xs: 0 1px 2px rgba(19, 27, 46, .05);
  --km-shadow-sm: 0 1px 3px rgba(19, 27, 46, .06), 0 1px 2px rgba(19, 27, 46, .04);
  --km-shadow-md: 0 4px 12px rgba(19, 27, 46, .06), 0 2px 4px rgba(19, 27, 46, .03);
  --km-shadow-lg: 0 12px 32px rgba(15, 23, 42, .08), 0 4px 8px rgba(15, 23, 42, .04);
  --km-shadow-xl: 0 24px 48px rgba(15, 23, 42, .10), 0 8px 16px rgba(15, 23, 42, .05);

  /* Motion */
  --km-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. RESET / NORMALISE (scoped to Elementor output so we never fight core)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Neutralise Elementor's atomic base sheet (base-desktop.css: 10px padding on
   every container and div-block, a 30px min-width on div-blocks, a 0 margin on
   the heading/paragraph bases) - but only on elements the design system has not
   spoken for.

   Why the `:not(:where(...))` lists: the CSS Elementor generates from global
   class props (global-<post>-frontend-*.css) is emitted WITHOUT !important, so
   a blanket !important here silently outranks any design class that declares
   the same property. That is what stopped a km-section's padding-block from
   reaching the page. Each list names the global classes that declare that
   property, so on those elements the class is now authoritative.

   Families that do NOT declare a property deliberately keep the reset, and
   must: km-row, km-stack, km-nav, km-grid, km-header-bar, km-footer__nav,
   km-breadcrumb, km-media, km-section-head, km-brand, km-cart-btn ... declare
   no padding of their own, so without the reset Elementor's 10px would suddenly
   reappear on every one of them.

   `:where()` is load-bearing: it contributes zero specificity, so these
   selectors stay at 0-2-0 exactly as before, which keeps the !important
   modifier rules further down (--tight, --hero, --flush-top, --flush-bottom)
   winning their tie on source order.
   -------------------------------------------------------------------------- */
.elementor .e-con { --e-con-gap: 0; }

/* padding-block and padding-inline are neutralised separately on purpose: a
   class that declares only ONE axis (km-container sets padding-inline;
   km-section-lg sets padding-block) must keep the reset on the other axis, or
   the base sheet's 10px reappears there. */
.elementor :is(.e-con, .e-flexbox-base, .e-div-block-base):not(:where(
  .km-section, .km-section-lg,
  .km-card, .km-card-flat, .km-card-soft, .km-dark-panel, .km-gradient-panel,
  .km-chip, .km-chip-accent, .km-eyebrow-pill,
  .km-btn-primary, .km-btn-secondary, .km-btn-ghost
)) {
  padding-block: 0 !important;
}
.elementor :is(.e-con, .e-flexbox-base, .e-div-block-base):not(:where(
  .km-section, .km-container, .km-container-narrow,
  .km-card, .km-card-flat, .km-card-soft, .km-dark-panel, .km-gradient-panel,
  .km-chip, .km-chip-accent, .km-eyebrow-pill,
  .km-btn-primary, .km-btn-secondary, .km-btn-ghost
)) {
  padding-inline: 0 !important;
}
.elementor :is(.e-flexbox-base, .e-div-block-base):not(:where(
  .km-card, .km-dot, .km-icon-tile
)) {
  min-width: 0 !important;
}
.elementor :is(.e-paragraph-base, .e-heading-base):not(:where(
  .km-h1, .km-h2, .km-h3, .km-h4, .km-display, .km-lead, .km-body, .km-body-sm
)) {
  margin: 0 !important;
}
.elementor .e-paragraph-base > *,
.elementor .e-heading-base > * {
  margin: 0 !important;
}
.elementor .e-image-base,
.elementor .e-default-img {
  max-width: 100% !important;
}
.elementor :is(.e-image-base, .e-default-img):not(:where(
  .km-cover, .km-hidden-mobile, .km-hidden-tablet
)) {
  display: block !important;
  height: auto;
}
.elementor .e-button-base {
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
/* Max-width shells must stay centred even though the inline style says 100%. */
.elementor .km-container,
.elementor .km-header-bar,
.elementor .km-footer,
.elementor .km-ribbon,
.elementor .km-page-head {
  max-width: var(--km-shell) !important;
  margin-inline: auto !important;
}
.elementor .km-container--narrow { max-width: var(--km-shell-narrow) !important; }
.elementor .km-container--wide { max-width: var(--km-shell-wide) !important; }

/* Kill Elementor's auto page-title block on pages we design ourselves. */
.page-header {
  display: none !important;
}

.elementor .km-section--tight {
  padding-block: var(--km-space-2xl) !important;
}
.elementor .km-section--flush-top {
  padding-block-start: 0 !important;
}
.elementor .km-section--flush-bottom {
  padding-block-end: 0 !important;
}
.elementor .km-section--alt {
  background-color: var(--km-surface-container-low) !important;
}
.elementor .km-section--deep {
  background-color: var(--km-surface-container) !important;
}
.elementor .km-section--white {
  background-color: var(--km-surface-container-lowest) !important;
}
.elementor .km-section--hero {
  background-image: linear-gradient(180deg, #eaedff 0%, #f5f6ff 45%, var(--km-surface) 100%) !important;
}
.elementor .km-section--footer-cta {
  background-image: linear-gradient(135deg, #006194 0%, #007bb9 55%, #39b8fd 140%) !important;
}

.elementor .km-container--narrow {
  max-width: var(--km-shell-narrow) !important;
}
.elementor .km-container--wide {
  max-width: var(--km-shell-wide) !important;
}
.elementor .km-container--center {
  text-align: center;
}

.elementor .km-stack--xs { gap: var(--km-space-2xs) !important; }
.elementor .km-stack--sm { gap: var(--km-space-sm) !important; }
.elementor .km-stack--md { gap: var(--km-space-md) !important; }
.elementor .km-stack--lg { gap: var(--km-space-lg) !important; }
.elementor .km-stack--xl { gap: var(--km-space-xl) !important; }

.elementor .km-row--between {
  
}

.elementor .km-row--center {
  justify-content: center;
}
.elementor .km-row--end {
  justify-content: flex-end;
}
.elementor .km-row--top {
  align-items: flex-start !important;
}
.elementor .km-row--baseline {
  align-items: baseline !important;
}
.elementor .km-row--wrap {
  flex-wrap: wrap;
}
.elementor .km-row--sm { gap: var(--km-space-sm) !important; }
.elementor .km-row--xs { gap: var(--km-space-xs) !important; }
.elementor .km-row--lg { gap: var(--km-space-lg) !important; }

/* Section heading block: eyebrow + title + lead. */
.elementor .km-section-head {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-sm) !important;
  max-width: 46rem !important;
}
.elementor .km-section-head--center {
  align-items: center !important;
  text-align: center;
  margin-inline: auto !important;
}
.elementor .km-grid {
  gap: var(--km-space-lg) !important;
  width: 100% !important;
}
.elementor .km-grid--2 {
  
}

.elementor .km-grid--3 {
  
}
.elementor .km-grid--4 {
  
}
.elementor .km-grid--split {
  
}

.elementor .km-grid--hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: var(--km-space-2xl) !important;
}

.elementor .km-grid--sidebar { grid-template-columns: 268px minmax(0, 1fr) !important; gap: var(--km-space-xl) !important; align-items: start !important; }
.elementor .km-grid--gap-sm { gap: var(--km-space-md) !important; }
.elementor .km-grid--gap-xl { gap: var(--km-space-xl) !important; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.elementor .km-dot--on {
  background-color: var(--km-success) !important;
}

.elementor .km-display--sm {
  font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem);
  line-height: 1.12;
}

.elementor .km-micro {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--km-on-surface-variant);
}

.elementor .km-price--sm {
  font-size: 1.125rem;
}

.elementor .km-on-dark {
  color: #ffffff;
}
.elementor .km-on-dark-muted {
  color: rgba(255, 255, 255, .82);
}
.elementor .km-strong { font-weight: 600; color: var(--km-on-surface); }
.elementor .km-accent { color: var(--km-primary); }
.elementor .km-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: .6875rem;
  letter-spacing: .04em;
}

.elementor .km-btn-primary--sm,
.elementor .km-btn-secondary--sm {
  font-size: .8125rem;
  border-radius: var(--km-radius-sm) !important;
}

.elementor .km-btn-primary--block,
.elementor .km-btn-secondary--block {
  
}

.elementor .km-btn-primary--lg {
  font-size: .9375rem;
}

.elementor a.km-btn-ghost,
.elementor button.km-btn-ghost {
  width: auto !important;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
}

.elementor a.km-btn-primary,
.elementor a.km-btn-secondary,
.elementor button.km-btn-primary,
.elementor button.km-btn-secondary {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
}

.elementor a.km-btn-primary--block,
.elementor a.km-btn-secondary--block,
.elementor a.km-btn-primary--lg.km-btn-primary--block {
  
}

.elementor .km-card .km-btn-primary,
.elementor .km-card .km-btn-secondary {
  
}

/* Chips that carry a sentence rather than a label wrap instead of clipping. */
.elementor .km-spec-panel .km-chip,
.elementor .km-hero-product .km-chip {
  white-space: normal;
  text-align: left;
}
.elementor .km-chip--accent {
  border-color: var(--km-secondary-container);
  background-color: rgba(14, 165, 233, .08) !important;
  color: var(--km-primary);
  font-weight: 600;
}
.elementor .km-chip--solid {
  border-color: transparent;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary);
  font-weight: 600;
}
.elementor .km-chip--stock {
  border-color: transparent;
  background-color: var(--km-success-bg) !important;
  color: var(--km-success);
  font-weight: 600;
}
.elementor .km-chip--muted {
  border-color: transparent;
  background-color: var(--km-surface-container) !important;
  color: var(--km-on-surface-variant);
}

.elementor .km-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3125rem !important;
  padding: .25rem .5rem !important;
  border-radius: var(--km-radius-xs) !important;
  background-color: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--km-hairline) !important;
  backdrop-filter: blur(8px);
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--km-primary);
  width: fit-content !important;
}
.elementor .km-badge--dark {
  background-color: rgba(40, 48, 68, .92) !important;
  border-color: transparent;
  color: var(--km-inverse-on-surface);
}
.elementor .km-badge--star {
  color: var(--km-star);
}

.elementor .km-card--interactive:hover {
  box-shadow: var(--km-shadow-lg);
  border-color: var(--km-secondary-container);
  transform: translateY(-2px);
}
.elementor .km-card--soft {
  border-color: transparent;
  background-color: var(--km-surface-container-low) !important;
  box-shadow: none;
}
.elementor .km-card--feature {
  padding: var(--km-space-xl) !important;
  gap: var(--km-space-lg) !important;
}
.elementor .km-card--flush {
  padding: 0 !important;
  overflow: hidden;
}
.elementor .km-card--dark {
  border-color: transparent;
  background-color: var(--km-inverse-surface) !important;
  color: var(--km-inverse-on-surface);
}
.elementor .km-card--row {
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-lg) !important;
}
.elementor .km-card--fill {
  
}

/* Media box inside cards */

.elementor .km-media--4x3 {
  
}

.elementor .km-media--1x1 { aspect-ratio: 1 / 1; }
.elementor .km-media--16x9 { aspect-ratio: 16 / 9; }
.elementor .km-media--3x2 { aspect-ratio: 3 / 2; }
.elementor .km-media img,
.elementor .km-media .e-image-base,
.elementor .km-media .e-default-img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}

.elementor .km-icon-tile--lg {
  font-size: 1.375rem;
}

.elementor .km-icon-tile--accent {
  background-color: var(--km-primary-fixed) !important;
}
.elementor .km-icon-tile--dark {
  background-color: rgba(255, 255, 255, .14) !important;
  color: #ffffff;
}

/* Spec tile: label over value */
.elementor .km-spec-tile {
  display: flex !important;
  flex-direction: column !important;
  gap: .1875rem !important;
  padding: .75rem .875rem !important;
  border-radius: var(--km-radius-sm) !important;
  background-color: var(--km-surface-container-low) !important;
  min-width: 0 !important;
}
.elementor .km-spec-tile__label {
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--km-on-surface-variant);
}
.elementor .km-spec-tile__value {
  font-family: var(--km-font-display);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--km-primary);
}
.elementor .km-spec-tile--plain .km-spec-tile__value { color: var(--km-on-surface); }

/* ==========================================================================
   8. HEADER
   ========================================================================== */

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100% !important;
  background-color: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--km-hairline);
}

/* Three-part header: brand left, nav centred, actions right.
   display:contents dissolves the wrapper row so its children become the grid
   items. Elementor puts an inline width:100% on every atomic container, so
   each part is pinned to its content width or the nav would stretch and push
   the actions out of the bar. */
.elementor .km-header-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: var(--km-space-lg) !important;
  width: 100% !important;
  max-width: var(--km-shell) !important;
  margin-inline: auto !important;
  padding: .875rem var(--km-gutter) !important;
}
.elementor .km-header-bar > .km-row {
  display: contents !important;
}
.elementor .km-header-bar > .km-brand,
.elementor .km-header-bar > .km-nav,
.elementor .km-header-bar > .km-header-actions,
.elementor .km-header-bar > .km-nav-toggle {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.elementor .km-header-bar > .km-brand { grid-column: 1; justify-self: start; }
.elementor .km-header-bar > .km-nav { grid-column: 2; justify-self: center; }
.elementor .km-header-bar > .km-header-actions { grid-column: 3; justify-self: end; }
.elementor .km-header-bar > .km-nav-toggle { grid-column: 3; justify-self: end; }

.elementor .km-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .625rem !important;
  text-decoration: none;
  min-width: 0 !important;
}
.elementor .km-brand__mark {
  display: block !important;
  width: 30px !important;
  height: 30px;
  min-width: 30px !important;
  border-radius: 8px !important;
  background-image: linear-gradient(135deg, var(--km-primary) 0%, var(--km-secondary-container) 100%) !important;
  box-shadow: var(--km-shadow-xs);
}
.elementor .km-brand__name {
  font-family: var(--km-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--km-on-surface);
  white-space: nowrap;
}

.elementor .km-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.75rem !important;
}
.elementor .km-nav-link {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
  text-decoration: none;
  transition: color .16s var(--km-ease);
  white-space: nowrap;
}
.elementor .km-nav-link:hover,
.elementor .km-nav-link--active {
  color: var(--km-primary);
}
.elementor .km-nav-link--active { font-weight: 600; }

.elementor .km-header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-lg) !important;
}

/* Mini-cart, sitting last in the header action cluster.
   Built from ordinary widgets (glyph + label + count) so it stays editable in
   Elementor; the count is filled by assets/km.js from WooCommerce's cart
   fragments, and the badge stays hidden while the cart is empty.
   One component, two homes: the desktop header action cluster and the mobile
   drawer (.km-cart-btn--drawer). No per-breakpoint gate is needed here: on
   <=1024px the whole action cluster is hidden, and the drawer instance is
   shown by its own class. */
.elementor .km-cart-btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  width: auto !important;
  min-height: 40px !important;
  padding: .5rem .75rem !important;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-surface-container-lowest) !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--km-on-surface) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color .18s var(--km-ease), color .18s var(--km-ease), background-color .18s var(--km-ease);
}
.elementor .km-cart-btn:hover {
  border-color: var(--km-primary-fixed-dim) !important;
  color: var(--km-primary) !important;
  background-color: var(--km-surface-container-low) !important;
}
.elementor .km-cart-btn__icon {
  font-size: 1.0625rem;
  line-height: 1;
}
.elementor .km-cart-btn__count {
  display: none !important;
  align-items: center !important;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .375rem;
  border-radius: var(--km-radius-pill);
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary) !important;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Only shown once km.js has filled it in. */
.elementor .km-cart-btn__count.has-items {
  display: inline-flex !important;
}

/* Drawer instance of the same pill. The drawer is a column flex container, so
   the pill spans its full width — the same width as the CTA above it — and its
   contents are centred to match that button rather than hugging the left edge.
   Only placement and width differ here; border, radius, background, type and
   badge all come from the shared .km-cart-btn rules. */
.elementor .km-cart-btn--drawer {
  align-self: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: var(--km-space-sm) !important;
}

/* Elementor Pro form widgets, styled to match the design system's own field and
   button rules. The widget carries .km-form and each field .km-field (set in the
   form settings), so only the plugin's own markup needs mapping here. */
.elementor .km-form .elementor-field-group { margin-bottom: var(--km-space-md) !important; }
.elementor .km-form .elementor-field-label {
  display: block;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
}
.elementor .km-form .elementor-field-textual {
  width: 100% !important;
  min-height: 46px;
  padding: .6875rem .875rem !important;
  border-radius: var(--km-radius-md) !important;
  border: 1px solid var(--km-outline-variant) !important;
  background-color: var(--km-surface-container-lowest) !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  color: var(--km-on-surface);
}
.elementor .km-form .elementor-field-textual::placeholder { color: rgba(63, 72, 80, .5); }
.elementor .km-form .elementor-field-textual:focus {
  outline: none;
  border-color: var(--km-secondary-container) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}
.elementor .km-form textarea.elementor-field-textual { min-height: 140px; }
.elementor .km-form input[type="file"].elementor-field-textual { padding: .5rem !important; font-size: .8125rem; }
.elementor .km-form .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px;
  padding: .9375rem 1.75rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary) !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  font-weight: 700;
}
.elementor .km-form .elementor-button:hover { background-color: var(--km-primary-container) !important; }
.elementor .km-form .elementor-message { font-family: var(--km-font-body); font-size: .875rem; }
.elementor .km-form .elementor-message-success { color: var(--km-success, #15803d); }
.elementor .km-form .elementor-message-danger { color: var(--km-danger, #b91c1c); }
.elementor .km-form .elementor-field-required .elementor-field-label::after,
.elementor .km-form .elementor-mark-required .elementor-field-label::after { color: var(--km-danger, #b91c1c); }
.elementor .km-form .elementor-field-type-honeypot { display: none !important; }

/* FAQ items built from the free Accordion widget.
   The <details>/<summary> version above is what the [km_faq] shortcode emits;
   these rules give the widget the same card list: one bordered card per
   question, chevron on the right, answer inset underneath. Opening is
   Elementor's own accordion behaviour — one item at a time — so no extra JS. */
.elementor .km-faq > .elementor-widget-container { width: 100%; }
.elementor .km-faq .elementor-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-sm) !important;
  width: 100%;
}
.elementor .km-faq .elementor-accordion-item {
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
  overflow: hidden;
}
.elementor .km-faq .elementor-tab-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-md) !important;
  padding: 1.125rem var(--km-space-lg) !important;
  border: 0 !important;
  background-color: transparent !important;
  font-family: var(--km-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--km-on-surface) !important;
  text-align: left !important;
  cursor: pointer;
}
.elementor .km-faq .elementor-tab-title a,
.elementor .km-faq .elementor-tab-title a:hover {
  order: 1;
  flex: 1 1 auto;
  color: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
}
/* Elementor floats this icon to the right, which a flex title ignores — the icon
   kept its DOM position (first), pushing the question over. Place it explicitly
   instead: question first, chevron pushed to the far end.
   The icon renders as inline SVG here (e_font_icon_svg), and the open state is
   painted with the kit accent through `fill`, so the colour is set on both. */
.elementor .km-faq .elementor-accordion-icon {
  order: 2;
  margin-inline-start: auto;
  color: var(--km-primary) !important;
  fill: var(--km-primary) !important;
  font-size: .75rem;
  line-height: 1;
}
.elementor .km-faq .elementor-accordion-icon svg,
.elementor .km-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
  color: var(--km-primary) !important;
  fill: var(--km-primary) !important;
}
.elementor .km-faq .elementor-tab-content {
  border: 0 !important;
  padding: 0 var(--km-space-lg) 1.25rem !important;
  text-align: left !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  line-height: 1.7;
  color: var(--km-on-surface-variant) !important;
}

/* Mobile menu toggle + drawer (desktop hides both).
   The visible icon is drawn from bars rather than from the ☰ character: that
   glyph sits roughly 2px below the optical centre of its line box, and its ink
   differs per platform. The character stays in the markup as the Elementor
   label and the accessible name, and is sized away here. */
.elementor .km-nav-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center;
  width: 42px !important;
  height: 42px;
  min-width: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-surface-container-lowest) !important;
  color: var(--km-on-surface);
  font-size: 0 !important;
  line-height: 1;
  cursor: pointer;
}
/* Three 2px bars 4.5px apart. The flex box centres this one box exactly and the
   outer two bars are its box-shadow copies, so the icon is centred by
   construction at every size instead of by font metrics. */
.elementor .km-nav-toggle::before {
  content: "";
  width: 18px;
  height: 2px;
  flex: none;
  background-color: currentColor;
  box-shadow: 0 -4.5px 0 currentColor, 0 4.5px 0 currentColor;
}
.elementor .km-mobile-menu {
  display: none !important;
  flex-direction: column !important;
  gap: .25rem !important;
  width: 100% !important;
  padding: var(--km-space-sm) var(--km-gutter) var(--km-space-md) !important;
  border-top: 1px solid var(--km-hairline);
  background-color: var(--km-surface-container-lowest) !important;
}
/* The drawer is JS-only: revealed when km.js toggles .is-open, and then only
   inside an open <details>. Using <details> means that when the Elementor
   editor loads the canvas at a narrow "tablet" width it still renders closed,
   instead of dumping a second row of unstyled links into the canvas. The
   !important flags win over Elementor's default .e-button-base button skin
   (solid #375EFB), which otherwise bleeds through in the editor. */
.elementor .km-mobile-menu:not(.is-open) { display: none !important; }
.elementor .km-mobile-menu > details > summary { display: none !important; }

.elementor .km-mobile-link,
.elementor .km-header-bar .km-mobile-link {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: .6875rem .25rem !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--km-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--km-font-body) !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--km-on-surface) !important;
  text-align: left !important;
  text-decoration: none !important;
  min-height: 0 !important;
}
.elementor .km-mobile-link:hover { color: var(--km-primary) !important; }
.elementor .km-mobile-menu .km-btn-primary {
  margin-top: var(--km-space-sm) !important;
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.elementor-location-footer {
  background-color: var(--km-surface-container-lowest) !important;
  border-top: 1px solid var(--km-hairline);
}

.elementor .km-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-lg) !important;
  width: 100% !important;
  max-width: var(--km-shell) !important;
  margin-inline: auto !important;
  padding: var(--km-space-2xl) var(--km-gutter) var(--km-space-xl) !important;
}
.elementor .km-footer__top {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: var(--km-space-xl) !important;
  flex-wrap: wrap;
}
.elementor .km-footer__nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-lg) !important;
  flex-wrap: wrap;
}
.elementor .km-footer__bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  flex-wrap: wrap;
  padding-top: var(--km-space-lg) !important;
  border-top: 1px solid var(--km-hairline);
}
.elementor .km-footer-link,
.elementor .km-footer__nav a.km-footer-link,
.elementor .km-footer__bottom a.km-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none;
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--km-on-surface-variant);
  text-decoration: none;
  transition: color .16s var(--km-ease);
}
.elementor .km-footer-link:hover {
  color: var(--km-primary);
  background-color: transparent !important;
}
.elementor .km-footer-link--accent { color: var(--km-primary); font-weight: 600; }
.elementor .km-footer-copy {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

.elementor .km-hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--km-space-lg) !important;
  min-width: 0 !important;
}
.elementor .km-hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-sm) !important;
  flex-wrap: wrap;
  padding-top: var(--km-space-2xs) !important;
}
.elementor .km-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--km-space-lg) !important;
  width: 100% !important;
  max-width: 30rem !important;
  padding-top: var(--km-space-md) !important;
  border-top: 1px solid var(--km-hairline);
  margin-top: var(--km-space-md) !important;
}
.elementor .km-hero-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: .125rem !important;
  min-width: 0 !important;
}
.elementor .km-hero-stat__label {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
}

/* Spec panel (right column of hero / product visual) */
.elementor .km-spec-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  padding: var(--km-space-lg) !important;
  border-radius: var(--km-radius-xl) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xl);
  min-width: 0 !important;
}
.elementor .km-spec-panel__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--km-space-sm) !important;
}
.elementor .km-spec-panel__strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-sm) !important;
  padding: .625rem .875rem !important;
  border-radius: var(--km-radius-sm) !important;
  background-color: rgba(201, 230, 255, .45) !important;
}

/* Single-product spotlight card (home page "featured drop") */
.elementor .km-hero-product {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--km-space-lg) !important;
  align-items: center !important;
  padding: var(--km-space-lg) !important;
  border-radius: var(--km-radius-xl) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-lg);
}
.elementor .km-hero-product .km-media { display: block !important; }
.elementor .km-hero-product h3 a { color: inherit; text-decoration: none; }
.elementor .km-hero-product h3 a:hover { color: var(--km-primary); }
.elementor .km-product-flag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
}

/* Rating */
.elementor .km-rating {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .375rem !important;
  white-space: nowrap;
}
.elementor .km-rating__stars {
  color: var(--km-star);
  font-size: .875rem;
  letter-spacing: .06em;
}
.elementor .km-rating__text {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
}

/* Inline notices */
.elementor .km-notice {
  padding: .875rem 1.125rem !important;
  border-radius: var(--km-radius-md) !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 500;
}
.elementor .km-notice--ok {
  background-color: var(--km-success-bg) !important;
  color: var(--km-success);
}
.elementor .km-notice--bad {
  background-color: #fee2e2 !important;
  color: var(--km-danger);
}

/* ==========================================================================
   11. TRUST RIBBON
   ========================================================================== */

.elementor .km-ribbon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-lg) !important;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: var(--km-shell) !important;
  margin-inline: auto !important;
  padding: var(--km-space-md) var(--km-gutter) !important;
}
.elementor .km-ribbon__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  min-width: 0 !important;
  /* Elementor sets width: var(--width) on every container, which made each
     ribbon item claim the full row once these became real containers rather
     than children of a display:contents wrapper. */
  width: auto !important;
  flex: 0 0 auto !important;
}
.elementor .km-ribbon__label {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
  white-space: nowrap;
}

/* The ribbon's items are a free Icon List widget, so the same strip is now one
   widget instead of a wrapper of dot+label containers. These rules map the
   widget's own list markup onto the strip above; the shortcode version, which
   still emits .km-ribbon__item, is untouched. */
.elementor .km-ribbon > .elementor-widget-container { width: 100%; }
.elementor .km-ribbon .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--km-space-lg) !important;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor .km-ribbon .elementor-icon-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor .km-ribbon .elementor-icon-list-icon {
  width: 8px;
  line-height: 1;
}
.elementor .km-ribbon .elementor-icon-list-icon i,
.elementor .km-ribbon .elementor-icon-list-icon svg {
  width: 8px;
  height: 8px;
  font-size: 8px !important;
  color: var(--km-primary);
}
.elementor .km-ribbon .elementor-icon-list-text {
  padding-inline-start: 0 !important;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
  white-space: nowrap;
}

/* ==========================================================================
   12. STEPS
   ========================================================================== */

.elementor .km-step {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: var(--km-space-lg) !important;
  padding: var(--km-space-lg) !important;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
  height: 100%;
  min-width: 0 !important;
}
.elementor .km-step__num {
  font-family: var(--km-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--km-outline-variant);
  /* Atomic headings only accept h1-h6 tags, so these step numbers render as
     <h4>. Zero the user-agent heading margin so the output stays identical to
     the inline rendering this was designed around. */
  margin: 0 !important;
}
.elementor .km-step__body {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
}
.elementor .km-step__foot {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  padding-top: var(--km-space-sm) !important;
  border-top: 1px solid var(--km-hairline);
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-primary);
}

/* ==========================================================================
   13. FEATURE / CHECK LIST
   ========================================================================== */

.elementor .km-check-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-sm) !important;
}
.elementor .km-check-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: .625rem !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--km-on-surface-variant);
}
.elementor .km-check-item__mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  width: 18px !important;
  height: 18px;
  min-width: 18px !important;
  margin-top: .125rem !important;
  border-radius: var(--km-radius-pill) !important;
  background-color: var(--km-primary-fixed) !important;
  color: var(--km-primary);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   14. WORKFLOW TABLE
   ========================================================================== */

.elementor .km-workflow {
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  overflow: hidden;
}
.elementor .km-workflow__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  padding: .875rem var(--km-space-lg) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-workflow__row:last-child { border-bottom: 0; }
.elementor .km-workflow__key {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
}
.elementor .km-workflow__val {
  font-family: var(--km-font-display);
  font-size: .875rem;
  font-weight: 700;
  color: var(--km-on-surface);
  text-align: right;
}
.elementor .km-workflow__key .elementor-heading-title,
.elementor .km-workflow__val .elementor-heading-title {
  display: inline;
  margin: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.elementor .km-h4 .elementor-heading-title {
  margin: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.elementor .km-chip .elementor-heading-title {
  margin: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* ==========================================================================
   15. FAQ
   ========================================================================== */

.elementor .km-faq {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-sm) !important;
  width: 100% !important;
}
.elementor .km-faq details {
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
  overflow: hidden;
}
.elementor .km-faq summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  padding: 1.125rem var(--km-space-lg) !important;
  font-family: var(--km-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--km-on-surface);
  cursor: pointer;
  list-style: none;
}
.elementor .km-faq summary::-webkit-details-marker { display: none !important; }
.elementor .km-faq summary::after {
  content: "";
  width: 9px !important;
  height: 9px;
  min-width: 9px !important;
  border-right: 2px solid var(--km-primary);
  border-bottom: 2px solid var(--km-primary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--km-ease);
}
.elementor .km-faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.elementor .km-faq__answer {
  padding: 0 var(--km-space-lg) 1.25rem !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  line-height: 1.7;
  color: var(--km-on-surface-variant);
}

/* ==========================================================================
   16. FORMS
   ========================================================================== */

.elementor .km-field {
  display: flex !important;
  flex-direction: column !important;
  gap: .4375rem !important;
  min-width: 0 !important;
}
.elementor .km-field__label {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface);
}
.elementor .km-field__req { color: var(--km-danger); }

.elementor .km-input,
.elementor .km-select,
.elementor .km-textarea {
  width: 100% !important;
  min-height: 46px;
  padding: .6875rem .875rem !important;
  border-radius: var(--km-radius-md) !important;
  border: 1px solid var(--km-outline-variant) !important;
  background-color: var(--km-surface-container-lowest) !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--km-on-surface);
  transition: border-color .16s var(--km-ease), box-shadow .16s var(--km-ease);
  box-sizing: border-box;
}
.elementor .km-input::placeholder,
.elementor .km-textarea::placeholder { color: rgba(63, 72, 80, .5); }
.elementor .km-input:focus,
.elementor .km-select:focus,
.elementor .km-textarea:focus {
  outline: none;
  border-color: var(--km-secondary-container);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}
.elementor .km-textarea {
  min-height: 132px;
  resize: vertical;
}
.elementor .km-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233f4850' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  padding-right: 2.25rem !important;
}
.elementor .km-dropzone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: .375rem !important;
  padding: 1.75rem var(--km-space-lg) !important;
  border-radius: var(--km-radius-md) !important;
  border: 1.5px dashed var(--km-outline-variant) !important;
  background-color: var(--km-surface-container-low) !important;
  text-align: center;
  cursor: pointer;
}
.elementor .km-dropzone__title {
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--km-primary);
}
.elementor .km-form-note {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: .5rem !important;
  padding-top: var(--km-space-xs) !important;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}

/* Elementor native form widgets inside the km-form card */
.elementor .km-form .elementor-field-group { margin-bottom: var(--km-space-md) !important; }
.elementor .km-form .elementor-field-label {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface);
}
.elementor .km-form .elementor-field-textual {
  min-height: 46px;
  border-radius: var(--km-radius-md) !important;
  border: 1px solid var(--km-outline-variant) !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  color: var(--km-on-surface);
}
.elementor .km-form .elementor-field-textual:focus {
  border-color: var(--km-secondary-container);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}
.elementor .km-form .elementor-button {
  min-height: 50px;
  padding: .875rem 1.75rem !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-primary) !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--km-on-primary);
  transition: background-color .18s var(--km-ease);
}
.elementor .km-form .elementor-button:hover { background-color: var(--km-primary-container) !important; }

/* ==========================================================================
   17. WOOCOMMERCE — SHOP ARCHIVE + PRODUCT CARDS
   ========================================================================== */

/* Product grid — a fixed track width keeps cards the same size whether the
   catalogue has one product or twelve. */
.elementor .km-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(0, 24rem)) !important;
  gap: var(--km-space-lg) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100% !important;
}
.elementor .km-products.km-products--compact {
  grid-template-columns: repeat(auto-fill, minmax(0, 18rem)) !important;
}
.elementor ul.products.km-products::before,
.elementor ul.products.km-products::after { display: none !important; content: none; }
.elementor ul.products.km-products li.product {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  padding: var(--km-space-md) !important;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
  transition: box-shadow .2s var(--km-ease), border-color .2s var(--km-ease),
              transform .2s var(--km-ease);
  text-align: left;
  list-style: none;
}
.elementor ul.products.km-products li.product:hover {
  box-shadow: var(--km-shadow-lg);
  border-color: var(--km-secondary-container);
  transform: translateY(-2px);
}
.elementor ul.products.km-products li.product a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  gap: .625rem !important;
  text-decoration: none;
  color: inherit;
  min-width: 0 !important;
}
.elementor ul.products.km-products li.product .km-media {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3;
  border-radius: var(--km-radius-md) !important;
  overflow: hidden;
  background-color: var(--km-surface-container) !important;
  margin: 0 !important;
}
.elementor ul.products.km-products li.product img {
  width: 100% !important;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0 !important;
  background-color: transparent !important;
  margin: 0 !important;
  display: block !important;
}
.elementor ul.products.km-products li.product .woocommerce-loop-product__title {
  font-family: var(--km-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--km-on-surface) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor ul.products.km-products li.product .price {
  font-family: var(--km-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: var(--km-on-surface) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: .5rem !important;
}
.elementor ul.products.km-products li.product .price del {
  font-size: .875rem;
  font-weight: 500;
  color: var(--km-outline);
  opacity: 1;
}
.elementor ul.products.km-products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
}
.elementor ul.products.km-products li.product .button,
.elementor ul.products.km-products li.product .add_to_cart_button,
.elementor ul.products.km-products li.product .km-btn-primary,
.elementor ul.products.km-products li.product .km-btn-secondary {
  margin: 0 !important;
  border-radius: var(--km-radius-sm) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary) !important;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 0 !important;
  transition: background-color .18s var(--km-ease);
}

.elementor ul.products.km-products li.product .button:hover,
.elementor ul.products.km-products li.product .add_to_cart_button:hover,
.elementor ul.products.km-products li.product .km-btn-primary:hover {
  background-color: var(--km-primary-container) !important;
  color: var(--km-on-primary) !important;
}
.elementor ul.products.km-products li.product .added_to_cart {
  display: block !important;
  margin-top: .5rem !important;
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-primary);
  text-align: center;
}
.elementor ul.products.km-products li.product .onsale {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 3;
  min-height: 0;
  min-width: 0 !important;
  padding: .25rem .5rem !important;
  border-radius: var(--km-radius-xs) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Stock chip sits on the media panel, top-left. */
.elementor ul.products.km-products li.product .km-media .km-chip {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 3;
  box-shadow: var(--km-shadow-sm);
}
/* Give the card's CTA room to sit at the bottom. */
.elementor ul.products.km-products li.product > .km-btn-primary,
.elementor ul.products.km-products li.product > .km-btn-secondary {
  margin-top: auto !important;
}

/* Result count / ordering bar */
.elementor .km-shop-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  flex-wrap: wrap;
  width: 100% !important;
}

/* ==========================================================================
   Product carousel
   ==========================================================================
   One horizontal row instead of a wrapping grid, so a growing catalogue never
   makes the Featured section taller. The items deliberately carry a different
   class from the grid's `li.product`: WooCommerce ships
   `ul.products li.product { float: left; width: 22.05% }`, which would fight a
   scrolling track. The card styling is aliased to the carousel item class so
   the design system still applies. */

.elementor .km-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.elementor .km-carousel__track {
  /* Flex, not grid: a grid track keeps trying to fit every column into the
     container (shrinking the cards instead of overflowing). With flex items
     that cannot shrink, the track genuinely overflows and scrolls. */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  gap: var(--km-space-lg) !important;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--km-space-sm);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--km-outline-variant) transparent;
}
.elementor .km-carousel__track::-webkit-scrollbar { height: 6px; }
.elementor .km-carousel__track::-webkit-scrollbar-track { background: transparent; }
.elementor .km-carousel__track::-webkit-scrollbar-thumb {
  border-radius: var(--km-radius-pill);
  background-color: var(--km-outline-variant);
}

/* --- card styling, aliased from the grid rules --- */
.elementor ul.products.km-carousel__track li.km-carousel__item {
  position: relative;
  /* Fixed size that cannot shrink, so the row overflows horizontally. */
  flex: 0 0 auto !important;
  width: 21rem !important;
  max-width: 21rem;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: var(--km-space-md);
  border-radius: var(--km-radius-lg);
  border: 1px solid var(--km-hairline);
  background-color: var(--km-surface-container-lowest);
  box-shadow: var(--km-shadow-xs);
  transition: box-shadow .2s var(--km-ease), border-color .2s var(--km-ease),
              transform .2s var(--km-ease);
  text-align: left;
  list-style: none;
  scroll-snap-align: start;
}
.elementor ul.products.km-carousel__track li.km-carousel__item:hover {
  box-shadow: var(--km-shadow-lg);
  border-color: var(--km-secondary-container);
  transform: translateY(-2px);
}
.elementor ul.products.km-carousel__track li.km-carousel__item a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.elementor ul.products.km-carousel__track li.km-carousel__item .km-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--km-radius-md);
  overflow: hidden;
  background-color: var(--km-surface-container);
  margin: 0;
}
.elementor ul.products.km-carousel__track li.km-carousel__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  background-color: transparent;
  margin: 0;
  display: block;
}
.elementor ul.products.km-carousel__track li.km-carousel__item .woocommerce-loop-product__title {
  font-family: var(--km-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--km-on-surface) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor ul.products.km-carousel__track li.km-carousel__item .price {
  font-family: var(--km-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: var(--km-on-surface) !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

/* --- arrows ---
   Positioned over the track edges rather than above it: the carousel is
   rendered inside a widget that sits below the section heading row, so an
   absolutely positioned control up there would overlap the "Browse full
   inventory" link. */
.elementor .km-carousel__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--km-hairline);
  border-radius: var(--km-radius-pill);
  background-color: var(--km-surface-container-lowest);
  box-shadow: var(--km-shadow-lg);
  color: var(--km-on-surface);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s var(--km-ease), color .18s var(--km-ease), opacity .18s var(--km-ease);
}
.elementor .km-carousel__nav:hover {
  border-color: var(--km-primary-fixed-dim);
  color: var(--km-primary);
}
.elementor .km-carousel__nav--prev { left: -.5rem; }
.elementor .km-carousel__nav--next { right: -.5rem; }
.elementor .km-carousel__nav[disabled] {
  opacity: 0;
  pointer-events: none;
}
.elementor .km-carousel__nav[hidden] { display: none !important; }

/* Product carousel arrows. On narrow screens the scrollbar and swipe are the
   affordances, so the arrows step aside. */
@media (max-width: 767px) {
  .elementor .km-carousel__nav { display: none !important; }
  .elementor ul.products.km-carousel__track li.km-carousel__item { width: 78vw !important; max-width: 78vw; }
}

/* ==========================================================================
   18. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */

.elementor .km-pdp {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: var(--km-space-2xl) !important;
  align-items: start !important;
  width: 100% !important;
}
.elementor .km-pdp__gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  min-width: 0 !important;
}
.elementor .km-pdp__summary {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  min-width: 0 !important;
}

/* Force WooCommerce single-product markup into the km look */
.elementor .km-single div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: var(--km-space-2xl) !important;
  align-items: start !important;
  width: 100% !important;
}
.elementor .km-single div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.elementor .km-single div.product .woocommerce-product-gallery__wrapper { margin: 0 !important; }
.elementor .km-single div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container) !important;
}
.elementor .km-single div.product .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
  margin: .75rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.elementor .km-single div.product .flex-control-thumbs li {
  width: 100% !important;
  margin: 0 !important;
  float: none;
}
.elementor .km-single div.product .flex-control-thumbs img {
  width: 100% !important;
  border-radius: var(--km-radius-sm) !important;
  border: 1px solid var(--km-hairline) !important;
  opacity: .7;
  cursor: pointer;
}
.elementor .km-single div.product .flex-control-thumbs img.flex-active,
.elementor .km-single div.product .flex-control-thumbs img:hover { opacity: 1; }
.elementor .km-single div.product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
}
.elementor .km-single div.product .product_title {
  font-family: var(--km-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--km-on-surface);
  margin: 0 !important;
}
.elementor .km-single div.product .price {
  font-family: var(--km-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--km-on-surface);
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: .625rem !important;
}
.elementor .km-single div.product .price del {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--km-outline);
  opacity: 1;
}
.elementor .km-single div.product .price ins { text-decoration: none; }
.elementor .km-single div.product .woocommerce-product-details__short-description {
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--km-on-surface-variant);
}
.elementor .km-single div.product .woocommerce-product-details__short-description p { margin: 0 0 .75rem !important; }
.elementor .km-single div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0 !important; }
.elementor .km-single div.product .stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important;
  width: fit-content !important;
  padding: .3125rem .75rem !important;
  border-radius: var(--km-radius-pill) !important;
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-success);
  background-color: var(--km-success-bg) !important;
}
.elementor .km-single div.product .stock.out-of-stock {
  color: var(--km-danger);
  background-color: #fee2e2 !important;
}

/* Cart form */
.elementor .km-single div.product form.cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: .75rem !important;
  flex-wrap: wrap;
  margin: 0 !important;
  padding-top: var(--km-space-xs) !important;
}
.elementor .km-single div.product form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--km-outline-variant) !important;
  border-radius: var(--km-radius-md) !important;
  overflow: hidden;
  background-color: var(--km-surface-container-lowest) !important;
}
.elementor .km-single div.product form.cart .quantity input.qty {
  width: 62px !important;
  min-height: 46px;
  padding: 0 .5rem !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--km-on-surface);
  text-align: center;
  -moz-appearance: textfield;
}
.elementor .km-single div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.elementor .km-single div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0 !important;
}
.elementor .km-single div.product form.cart .button,
.elementor .km-single div.product form.cart button[type="submit"] {
  flex: 1 1 12rem;
  min-height: 46px;
  padding: .8125rem 1.75rem !important;
  border: 0 !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary);
  font-family: var(--km-font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s var(--km-ease);
}
.elementor .km-single div.product form.cart .button:hover,
.elementor .km-single div.product form.cart button[type="submit"]:hover {
  background-color: var(--km-primary-container) !important;
  color: var(--km-on-primary);
}

/* Product meta */
.elementor .km-single div.product .product_meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-lg) !important;
  flex-wrap: wrap;
  padding-top: var(--km-space-md) !important;
  border-top: 1px solid var(--km-hairline);
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}
.elementor .km-single div.product .product_meta a { color: var(--km-primary); text-decoration: none; }

/* Tabs */
.elementor .km-single .woocommerce-tabs {
  width: 100% !important;
  margin-top: var(--km-space-2xl) !important;
  clear: both;
}
.elementor .km-single .woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--km-space-lg) !important;
  margin: 0 0 var(--km-space-lg) !important;
  padding: 0 0 var(--km-space-sm) !important;
  border-bottom: 1px solid var(--km-hairline);
  list-style: none;
}
.elementor .km-single .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none;
}
.elementor .km-single .woocommerce-tabs ul.tabs li::before,
.elementor .km-single .woocommerce-tabs ul.tabs li::after { display: none !important; }
.elementor .km-single .woocommerce-tabs ul.tabs li a {
  padding: 0 !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
  text-decoration: none;
}
.elementor .km-single .woocommerce-tabs ul.tabs li.active a { color: var(--km-primary); }
.elementor .km-single .woocommerce-tabs .panel {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--km-on-surface-variant);
}
.elementor .km-single .woocommerce-tabs .panel h2 {
  font-family: var(--km-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--km-on-surface);
  margin: 0 0 .75rem !important;
}

/* Related products */
.elementor .km-single .related.products,
.elementor .km-single .upsells.products {
  width: 100% !important;
  margin-top: var(--km-space-2xl) !important;
  clear: both;
}
.elementor .km-single .related.products > h2,
.elementor .km-single .upsells.products > h2 {
  font-family: var(--km-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--km-on-surface);
  margin: 0 0 var(--km-space-lg) !important;
}

/* Notices */
.elementor .woocommerce-message,
.elementor .woocommerce-info,
.elementor .woocommerce-error {
  border-radius: var(--km-radius-md) !important;
  border: 1px solid var(--km-hairline) !important;
  border-top: 0;
  background-color: var(--km-surface-container-low) !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  color: var(--km-on-surface);
}
.elementor .woocommerce-message::before,
.elementor .woocommerce-info::before { color: var(--km-primary); }

/* ==========================================================================
   18b. SINGLE PRODUCT — hand-rendered buy panel (km_product_detail)
   ========================================================================== */

.elementor .km-pdp {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) !important;
  gap: var(--km-space-2xl) !important;
  align-items: start !important;
  width: 100% !important;
}

/* --- gallery column --- */
.elementor .km-pdp__gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  min-width: 0 !important;
}
.elementor .km-pdp__frame {
  position: relative;
  display: block !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container) !important;
}
.elementor .km-pdp__frame img,
.elementor .km-pdp__img {
  display: block !important;
  width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.elementor .km-pdp__frame-badge {
  position: absolute;
  top: var(--km-space-md);
  left: var(--km-space-md);
}
.elementor .km-pdp__frame-badge .km-chip {
  box-shadow: var(--km-shadow-sm);
}

/* Quick-fact list under the image */
.elementor .km-pdp__facts {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-surface-container-lowest) !important;
  overflow: hidden;
}
.elementor .km-pdp__facts li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  padding: .625rem var(--km-space-md) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-pdp__facts li:last-child { border-bottom: 0; }
.elementor .km-pdp__fact-key {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--km-on-surface-variant);
}
.elementor .km-pdp__fact-val {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface);
  text-align: right;
}

/* --- details column --- */
.elementor .km-pdp__summary {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  min-width: 0 !important;
}
.elementor .km-pdp__summary .km-eyebrow { margin-bottom: -.375rem !important; }

.elementor .km-pdp__title {
  margin: 0 !important;
  font-family: var(--km-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--km-on-surface);
}

.elementor .km-pdp__price-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: var(--km-space-sm) !important;
  flex-wrap: wrap;
  padding-bottom: var(--km-space-md) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-pdp__price {
  font-family: var(--km-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--km-on-surface);
}
.elementor .km-pdp__price del {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--km-outline);
  opacity: 1;
  margin-right: .375rem !important;
}
.elementor .km-pdp__price ins { text-decoration: none; }
.elementor .km-pdp__price-note {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}

.elementor .km-pdp__lede {
  margin: 0 !important;
  font-family: var(--km-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--km-on-surface-variant);
}

/* --- buy box --- */
.elementor .km-buybox {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-md) !important;
  padding: var(--km-space-lg) !important;
  border-radius: var(--km-radius-lg) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-low) !important;
}
.elementor .km-variants {
  display: flex !important;
  flex-direction: row !important;
  gap: .5rem !important;
  flex-wrap: wrap;
}
.elementor .km-variant {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-height: 38px;
  padding: .5rem .875rem !important;
  border-radius: var(--km-radius-sm) !important;
  border: 1px solid var(--km-outline-variant) !important;
  background-color: var(--km-surface-container-lowest) !important;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
  cursor: pointer;
  transition: border-color .16s var(--km-ease), background-color .16s var(--km-ease),
              color .16s var(--km-ease), box-shadow .16s var(--km-ease);
}
.elementor .km-variant:hover { border-color: var(--km-secondary-container); }
.elementor .km-variant.is-active {
  border-color: var(--km-primary);
  background-color: var(--km-primary-fixed) !important;
  color: var(--km-primary);
  box-shadow: inset 0 0 0 1px var(--km-primary);
}
.elementor .km-variant:focus-visible {
  outline: 3px solid var(--km-secondary-container);
  outline-offset: 2px;
}

.elementor .km-buybox form.cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: .75rem !important;
  flex-wrap: wrap;
  margin: 0 !important;
}
.elementor .km-buybox form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--km-outline-variant) !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-surface-container-lowest) !important;
  overflow: hidden;
}
.elementor .km-buybox form.cart .quantity input.qty {
  width: 58px !important;
  min-height: 50px;
  padding: 0 .5rem !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--km-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--km-on-surface);
  text-align: center;
  -moz-appearance: textfield;
}
.elementor .km-buybox form.cart .quantity input.qty::-webkit-outer-spin-button,
.elementor .km-buybox form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0 !important;
}
.elementor .km-buybox form.cart .button,
.elementor .km-buybox form.cart button[type="submit"] {
  flex: 1 1 12rem;
  min-height: 50px;
  padding: .875rem 1.75rem !important;
  border: 0 !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary);
  font-family: var(--km-font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s var(--km-ease);
}
.elementor .km-buybox form.cart .button:hover,
.elementor .km-buybox form.cart button[type="submit"]:hover {
  background-color: var(--km-primary-container) !important;
  color: var(--km-on-primary);
}

.elementor .km-buybox__assurance {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--km-space-md) !important;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: var(--km-space-sm) 0 0 !important;
  border-top: 1px solid var(--km-outline-variant);
  list-style: none;
}
.elementor .km-buybox__assurance li {
  position: relative;
  padding-left: 1rem !important;
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
}
.elementor .km-buybox__assurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .375rem;
  width: 6px !important;
  height: 6px;
  border-radius: var(--km-radius-pill) !important;
  background-color: var(--km-primary) !important;
}

/* --- description --- */
.elementor .km-pdp__description {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  padding-top: var(--km-space-sm) !important;
}
.elementor .km-pdp__section-title {
  margin: 0 0 .25rem !important;
  font-family: var(--km-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--km-on-surface);
}
.elementor .km-pdp__description p {
  margin: 0 0 .75rem !important;
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--km-on-surface-variant);
}
.elementor .km-pdp__description p:last-child { margin-bottom: 0 !important; }

/* --- specifications band --- */
.elementor .km-pdp-specs {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-xl) !important;
  width: 100% !important;
  padding-top: var(--km-space-3xl) !important;
  margin-top: var(--km-space-2xl) !important;
  border-top: 1px solid var(--km-hairline);
}
.elementor .km-pdp-specs .km-card .km-stack { flex: 1 1 auto; }
.elementor .km-pdp-specs .km-card--row { align-items: flex-start !important; }

/* ==========================================================================
   18c. WOOCOMMERCE BLOCKS — cart, checkout and the block product grid
   ==========================================================================
   Cart and checkout are block-based and are NOT Elementor documents, so
   these selectors are deliberately unscoped. WordPress block global styles
   set button colours with !important, so the overrides need it too. */

.wp-block-button__link,
.wc-block-components-button,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-height: 46px;
  padding: 0.8125rem 1.5rem !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  background-color: #006194 !important;
  color: #ffffff !important;
  font-family: var(--km-font-body, 'Inter', sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .18s ease;
}

.wp-block-button__link:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: #007bb9 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Block product grid */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(0, 24rem)) !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.wc-block-grid__product {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(19, 27, 46, .05);
  text-align: left;
}
.wc-block-grid__product-image img {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .75rem !important;
}
.wc-block-grid__product-title {
  margin: 0 !important;
  font-family: var(--km-font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #131b2e !important;
}
.wc-block-grid__product-title a {
  color: inherit !important;
  text-decoration: none;
}
.wc-block-grid__product-price {
  font-family: var(--km-font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #131b2e !important;
}
.wc-block-grid__product-price ins { text-decoration: none; }

/* Empty cart state */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart h2 {
  font-family: var(--km-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #131b2e;
}

/* Cart and checkout surfaces */
.wc-block-cart-items,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
  font-family: var(--km-font-body, 'Inter', sans-serif);
  color: #131b2e;
}
.wc-block-components-title,
.wc-block-components-checkout-step__title {
  font-family: var(--km-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
}
.wc-block-components-text-input input,
.wc-block-components-select select {
  min-height: 46px;
  border: 1px solid #bfc7d2 !important;
  border-radius: .75rem !important;
  font-family: var(--km-font-body, 'Inter', sans-serif);
  font-size: .9375rem;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  border-color: #39b8fd;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

/* ==========================================================================
   19. FOOTER CTA BAND
   ========================================================================== */

.elementor .km-cta-band {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--km-space-xl) !important;
  padding: var(--km-space-xl) !important;
  border-radius: var(--km-radius-xl) !important;
  background-color: var(--km-surface-container-lowest) !important;
  border: 1px solid var(--km-hairline) !important;
  box-shadow: var(--km-shadow-lg);
}

/* ==========================================================================
   20. PAGE HEADER (interior pages)
   ========================================================================== */

.elementor .km-page-head {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--km-space-sm) !important;
  width: 100% !important;
  max-width: var(--km-shell) !important;
  margin-inline: auto !important;
  padding: var(--km-space-2xl) var(--km-gutter) var(--km-space-lg) !important;
}
.elementor .km-breadcrumb {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: wrap;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}
.elementor .km-breadcrumb a { color: var(--km-on-surface-variant); text-decoration: none; }
.elementor .km-breadcrumb a:hover { color: var(--km-primary); }
.elementor .km-breadcrumb__sep { color: var(--km-outline-variant); }
.elementor .km-breadcrumb__current { color: var(--km-on-surface); font-weight: 600; }

/* ==========================================================================
   20b. SHOP FILTER SIDEBAR
   ========================================================================== */

.elementor .km-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-lg) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
  overflow: hidden;
}

@media (min-width: 1025px) {
  .elementor .km-grid--sidebar > .km-filters,
  .elementor .km-grid--sidebar > .elementor-element.km-filters {
    position: sticky;
    top: 96px;
  }
}

.elementor .km-filters__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-sm) !important;
  padding: var(--km-space-md) var(--km-space-lg) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-filters__head .km-h4 { margin: 0 !important; }

.elementor .km-filters__reset {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-primary);
  text-decoration: none;
  white-space: nowrap;
}
.elementor .km-filters__reset:hover { color: var(--km-primary-container); }
.elementor .km-filters__reset.is-disabled {
  color: var(--km-outline-variant);
  pointer-events: none;
}

.elementor .km-filters__group {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  padding: var(--km-space-md) var(--km-space-lg) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-filters__group:last-of-type { border-bottom: 0; }

.elementor .km-filters__legend {
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-on-surface-variant);
}

.elementor .km-filters__list {
  display: flex !important;
  flex-direction: column !important;
  gap: .125rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.elementor .km-filters__option {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .4375rem .375rem !important;
  border-radius: var(--km-radius-sm) !important;
  font-family: var(--km-font-body);
  font-size: .875rem;
  color: var(--km-on-surface-variant);
  text-decoration: none;
  transition: background-color .16s var(--km-ease), color .16s var(--km-ease);
}
.elementor .km-filters__option:hover {
  background-color: var(--km-surface-container-low) !important;
  color: var(--km-on-surface);
}
.elementor .km-filters__option.is-active {
  background-color: rgba(14, 165, 233, .08) !important;
  color: var(--km-primary);
  font-weight: 600;
}

.elementor .km-filters__check {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  width: 18px !important;
  height: 18px;
  border: 1.5px solid var(--km-outline-variant) !important;
  border-radius: 4px !important;
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.elementor .km-filters__option.is-active .km-filters__check {
  border-color: var(--km-primary);
  background-color: var(--km-primary) !important;
}

.elementor .km-filters__label { min-width: 0 !important; }
.elementor .km-filters__count {
  min-width: 1.75rem !important;
  font-size: .75rem;
  font-weight: 500;
  color: var(--km-outline);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.elementor .km-filters__option.is-active .km-filters__count { color: var(--km-primary); }

.elementor .km-filters__note {
  margin: 0 !important;
  font-family: var(--km-font-body);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--km-outline);
}

.elementor .km-filters__search { width: 100% !important; }
.elementor .km-filters__search .km-input { font-size: .875rem; min-height: 42px; }

.elementor .km-filters__callout {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: .625rem !important;
  margin: var(--km-space-md) !important;
  padding: var(--km-space-sm) var(--km-space-md) !important;
  border-radius: var(--km-radius-md) !important;
  background-color: var(--km-surface-container-low) !important;
}
.elementor .km-filter-cta__title {
  font-family: var(--km-font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface);
}

/* --- Toolbar above the grid --- */
.elementor .km-shop-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--km-space-md) !important;
  flex-wrap: wrap;
  width: 100% !important;
  padding-bottom: var(--km-space-md) !important;
  border-bottom: 1px solid var(--km-hairline);
}
.elementor .km-shop-toolbar__left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--km-space-md) !important;
  min-width: 0 !important;
}
.elementor .km-shop-toolbar__count {
  margin: 0 !important;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  color: var(--km-on-surface-variant);
}
.elementor .km-shop-toolbar__count strong { color: var(--km-on-surface); }
.elementor .km-shop-toolbar__sort {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
}
.elementor .km-shop-toolbar__sortlabel {
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--km-on-surface-variant);
  white-space: nowrap;
}
.elementor .km-select--sm {
  min-height: 40px;
  padding: .4375rem 2rem .4375rem .75rem !important;
  font-size: .8125rem;
  width: auto !important;
}
.elementor .km-filters-toggle { display: none !important; }

/* --- Active filter chips --- */
.elementor .km-shop-active {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: wrap;
  width: 100% !important;
  padding: var(--km-space-sm) 0 0 !important;
}
.elementor .km-shop-active__label {
  font-family: var(--km-font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--km-outline);
}
.elementor .km-chip--removable {
  cursor: pointer;
  transition: background-color .16s var(--km-ease);
}
.elementor .km-chip--removable:hover {
  background-color: rgba(14, 165, 233, .16) !important;
  color: var(--km-primary-container);
}
.elementor .km-shop-active__clear {
  font-family: var(--km-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--km-on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.elementor .km-shop-active__clear:hover { color: var(--km-primary); }

/* --- Empty state --- */
.elementor .km-shop-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--km-space-sm) !important;
  width: 100% !important;
  padding: var(--km-space-2xl) var(--km-space-lg) !important;
  border: 1px dashed var(--km-outline-variant) !important;
  border-radius: var(--km-radius-lg) !important;
  background-color: var(--km-surface-container-low) !important;
  text-align: center;
}
.elementor .km-shop-empty .km-h3 { margin: 0 !important; }

/* --- Filtered grid: fade while AJAX refresh is in flight --- */
.elementor .km-shop-results {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
}
.elementor .km-shop-results.is-busy {
  opacity: .5;
  pointer-events: none;
  transition: opacity .15s var(--km-ease);
}

/* ==========================================================================
   21. UTILITIES
   ========================================================================== */

.elementor .km-hide-mobile { display: flex !important; }
.elementor .km-hide-tablet { display: flex !important; }
.elementor .km-fill { width: 100% !important; }
.elementor .km-grow { flex: 1 1 auto; min-width: 0 !important; }
.elementor .km-nowrap { white-space: nowrap; }
.elementor .km-text-center { text-align: center; }
.elementor .km-mt-auto { margin-top: auto !important; }
.elementor .km-divider {
  width: 100% !important;
  height: 1px;
  background-color: var(--km-hairline) !important;
  border: 0 !important;
}

/* Wrapper emitted by the KM Dynamic Content atomic widget. */
.elementor .km-block {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
/* When a dynamic block is the only child of a grid cell it should not add a
   layout box of its own — the shortcode's children become the grid items. */
.elementor .km-grid > .km-block,
.elementor .km-grid > .km-block > .km-hero-stat {
  display: contents !important;
}
.elementor .km-frame {
  border-radius: var(--km-radius-xl) !important;
  border: 1px solid var(--km-hairline) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-lg);
  padding: var(--km-space-lg) !important;
}
.elementor .km-scroll-x {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--km-space-sm) !important;
  overflow-x: auto;
  padding-bottom: .25rem !important;
}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
.elementor .km-grid--4 {
  
}

}

@media (max-width: 1024px) {
  :root { --km-space-3xl: 3.75rem; --km-space-2xl: 2.75rem; }
.elementor .km-grid--4 {
  
}

.elementor .km-grid--3 {
  
}

  .elementor .km-grid--hero { grid-template-columns: minmax(0, 1fr) !important; gap: var(--km-space-xl) !important; }
  .elementor .km-grid--sidebar { grid-template-columns: minmax(0, 1fr) !important; }
  .elementor .km-pdp,
  .elementor .km-single div.product { grid-template-columns: minmax(0, 1fr) !important; gap: var(--km-space-xl) !important; }
  .elementor .km-cta-band { grid-template-columns: minmax(0, 1fr) !important; }
  .elementor .km-hide-tablet { display: none !important; }
  .elementor .km-nav { gap: 1.25rem !important; }
  .elementor .km-section-head { max-width: 100% !important; }

  /* Shop filters collapse behind a toggle on narrow screens. */
  .elementor .km-filters-toggle { display: inline-flex !important; }
  .elementor .km-filters { display: none !important; }
  .elementor .km-filters.is-open { display: flex !important; }
}

/* Tablet and below: swap the inline nav for the drawer. */
@media (max-width: 1024px) {
  /* On narrow screens the drawer carries the links, the CTA and the cart, so
     the bar reduces to brand + toggle. The action cluster is dropped entirely
     rather than left as an empty grid cell (it would still claim a column and
     push the toggle onto a second row). */
  .elementor .km-nav,
  .elementor .km-header-actions { display: none !important; }

  .elementor .km-header-bar { grid-template-columns: minmax(0, 1fr) auto !important; }
  .elementor .km-header-bar > .km-brand { grid-column: 1 !important; }
  .elementor .km-header-bar > .km-nav-toggle { grid-column: 2 !important; justify-self: end !important; }

  /* Wider tap target than the glyph needs, to match the other header controls.
     The selector repeats the class deliberately: the desktop rule
     `.km-header-bar > .km-nav-toggle { min-width: 0 !important }` is more
     specific, and with box-sizing:border-box that shrinks the button down to
     its glyph no matter what width is set. */
  .elementor .km-nav-toggle.km-nav-toggle {
    display: inline-flex !important;
    width: 56px !important;
    min-width: 56px !important;
  }

  .elementor .km-mobile-menu { display: none !important; }
  .elementor .km-mobile-menu.is-open { display: flex !important; }
  .elementor .km-hero-stats { max-width: 100% !important; }
}

@media (max-width: 767px) {
  :root { --km-space-3xl: 3rem; --km-space-2xl: 2.25rem; --km-gutter: 1.125rem; }
.elementor .km-grid--split {
  
}

.elementor .km-grid--4 {
  
}

.elementor .km-grid--2 {
  
}

.elementor .km-grid--3 {
  
}

  .elementor .km-hide-mobile { display: none !important; }
  .elementor .km-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--km-space-md) var(--km-space-lg) !important; max-width: 100% !important; }
  .elementor .km-hero-stat { align-items: flex-start !important; }
  .elementor .km-hero-stat__label { line-height: 1.35; }
  
  .elementor .km-spec-panel__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .elementor .km-card--row { flex-direction: column !important; align-items: flex-start !important; }
  .elementor .km-header-actions .km-btn-primary,
  .elementor .km-header-actions .km-btn-secondary { min-height: 40px; padding: .5rem .875rem !important; font-size: .8125rem; }
  .elementor .km-brand__name { font-size: 1.0625rem; }
  .elementor .km-footer__top { flex-direction: column !important; gap: var(--km-space-lg) !important; }
  .elementor .km-footer__nav { gap: var(--km-space-md) !important; }
  .elementor .km-footer__bottom { flex-direction: column !important; align-items: flex-start !important; }
  .elementor .km-hero-actions { width: 100% !important; }
  .elementor .km-hero-actions .km-btn-primary,
  .elementor .km-hero-actions .km-btn-secondary { flex: 1 1 100%; }
  .elementor .km-ribbon { gap: var(--km-space-sm) !important; padding-block: var(--km-space-sm) !important; }
  .elementor .km-ribbon__label,
  .elementor .km-ribbon .elementor-icon-list-text { font-size: .75rem; white-space: normal; }
  .elementor .km-single .woocommerce-tabs ul.tabs { gap: var(--km-space-md) !important; flex-wrap: wrap; }
  .elementor .km-section-head { text-align: left; align-items: flex-start !important; }
.elementor .km-container--center {
  text-align: left;
}

  .elementor .km-filters__group { padding: var(--km-space-sm) var(--km-space-md) !important; }
  .elementor .km-filters__head { padding: var(--km-space-sm) var(--km-space-md) !important; }
  .elementor .km-filters__callout { margin: var(--km-space-sm) !important; }
  .elementor .km-shop-toolbar { align-items: flex-start !important; }
  .elementor .km-shop-toolbar__sort { width: 100% !important; justify-content: space-between; }
  .elementor .km-faq summary { padding: 1rem var(--km-space-md) !important; font-size: .9375rem; }
  .elementor .km-faq__answer { padding: 0 var(--km-space-md) 1rem !important; }
  .elementor .km-faq .elementor-tab-title { padding: 1rem var(--km-space-md) !important; font-size: .9375rem; }
  .elementor .km-faq .elementor-tab-content { padding: 0 var(--km-space-md) 1rem !important; }
  .elementor .km-card--feature { padding: var(--km-space-lg) !important; }
}

/* WordPress core alignment classes above the fold */
.elementor .alignleft { float: left; margin: 0 1.5rem .75rem 0 !important; }
.elementor .alignright { float: right; margin: 0 0 .75rem 1.5rem !important; }

/* ==========================================================================
   23. CART & CHECKOUT (WooCommerce blocks)
   ==========================================================================
   The cart and checkout pages are WooCommerce's block-powered pages, hydrated
   client-side, so they are styled here rather than in Elementor.

   Two specifics worth recording:

   1. The product grid in the empty-cart state is a block grid that WooCommerce
      turns into a FLEX container via `.has-4-columns`, whose items also carry
      `flex: 0 0 25%; max-width: 25%`. Resetting the item's own `max-width`
      alone is not enough: with four items at 25% of a 1232px row the first one
      wrapped onto its own line and collapsed to a ~20px sliver, which is what
      made the empty cart look broken. Both the container and the items need
      resetting.

   2. On a 4-column grid a single product leaves ~900px of dead space, and a
      24rem card looks stretched, so the grid is capped at three columns.
   ========================================================================== */

/* Align the page with the site shell. The cart block is `alignwide`, which
   otherwise pushes it out past the header's 1280px container. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
  width: 100% !important;
  max-width: var(--km-shell-wide, 1440px) !important;
  margin-inline: auto !important;
  padding: var(--km-space-xl, 2.5rem) var(--km-gutter, 1.5rem) var(--km-space-3xl, 5rem) !important;
  box-sizing: border-box;
}
/* The theme hides .page-header globally because Elementor pages draw their own
   titles. The cart and checkout pages have no Elementor content, so their
   heading has to be shown again. */
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header {
  display: block !important;
  margin: 0 0 var(--km-space-xl, 2.5rem) !important;
  padding: 0 0 var(--km-space-md, 1rem) !important;
  border-bottom: 1px solid var(--km-hairline);
  text-align: left;
}
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
  margin: 0 !important;
  font-family: var(--km-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--km-on-surface);
}
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------- empty cart -- */

/* The empty state is a message plus a product teaser, so it reads better as a
   centred panel than as full-bleed page content. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  max-width: var(--km-shell, 1280px);
  margin-inline: auto;
}
/* WooCommerce draws the empty-cart glyph as a ::before pseudo-element on this
   heading: content:"" with a mask-image, sized in `em` and painted with
   `currentcolor`. So the heading must keep a real font-size (the glyph scales
   off it) and a real colour (it fills the mask). Hiding the wording with
   font-size:0 or color:transparent erases the glyph entirely — it is hidden
   with text-indent instead. */
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: var(--km-space-lg, 1.5rem) auto var(--km-space-md, 1rem) !important;
  padding: 0 !important;
  /* A real font-size is required: the glyph below is sized in em. The wording
     is hidden by making it transparent, since text-indent with font-size:0 has
     nothing left to indent. */
  font-size: 1.5rem !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
}
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto var(--km-space-md, 1rem) !important;
  /* The mask is filled from this colour, not from `color`. */
  background-color: var(--km-on-surface) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Product grid inside the empty state. */
.woocommerce-cart .wc-block-grid .wc-block-grid__products,
.wc-block-grid .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(0, 21rem)) !important;
  justify-content: center;
  gap: var(--km-space-lg, 1.5rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
/* Reset WooCommerce's flex-item sizing so cards keep their width. */
.wc-block-grid .wc-block-grid__product {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--km-space-md, 1rem) !important;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-lg, 1rem) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-xs);
}
.wc-block-grid .wc-block-grid__product-image img {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--km-radius-md, .75rem) !important;
}
.wc-block-grid .wc-block-grid__product-title {
  margin: 0 !important;
  font-family: var(--km-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--km-on-surface) !important;
}
.wc-block-grid .wc-block-grid__product-title a { color: inherit !important; text-decoration: none !important; }
.wc-block-grid .wc-block-grid__product-price {
  font-family: var(--km-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--km-on-surface) !important;
}
.wc-block-grid .wc-block-grid__product-price ins { text-decoration: none !important; }
.wc-block-grid .wc-block-grid__product-add-to-cart { margin: 0 !important; }
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid .wc-block-grid__product-add-to-cart .add_to_cart_button {
  width: 100% !important;
  min-height: 42px !important;
  padding: .6875rem 1rem !important;
  border: 0 !important;
  border-radius: var(--km-radius-md, .75rem) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary) !important;
  font-family: var(--km-font-body) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: var(--km-primary-container) !important;
  color: var(--km-on-primary) !important;
}

/* ---------------------------------------------------------- populated cart -- */

/* Card surfaces, matching .km-card in the design system. */
.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-cart .wc-block-components-order-summary,
.woocommerce-cart .wc-block-components-totals-wrapper {
  font-family: var(--km-font-body);
  color: var(--km-on-surface);
}
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-cart .wc-block-components-order-summary {
  padding: var(--km-space-lg, 1.5rem) !important;
  border: 1px solid var(--km-hairline) !important;
  border-radius: var(--km-radius-xl, 1.5rem) !important;
  background-color: var(--km-surface-container-lowest) !important;
  box-shadow: var(--km-shadow-sm, 0 1px 2px rgba(19, 27, 46, .05));
}
.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart .wc-block-cart-item__image img {
  border-radius: var(--km-radius-md, .75rem);
}
.woocommerce-cart .wc-block-components-product-name {
  font-family: var(--km-font-display);
  font-weight: 600;
  color: var(--km-on-surface) !important;
  text-decoration: none !important;
}
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-totals-item__value {
  font-family: var(--km-font-display);
  color: var(--km-on-surface) !important;
}
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-cart-items__header th {
  font-family: var(--km-font-body);
  font-weight: 500;
  color: var(--km-on-surface-variant) !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--km-on-surface) !important;
}
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-button {
  border-radius: var(--km-radius-md, .75rem) !important;
  background-color: var(--km-primary) !important;
  color: var(--km-on-primary) !important;
  font-family: var(--km-font-body) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-components-button:hover {
  background-color: var(--km-primary-container) !important;
  color: var(--km-on-primary) !important;
}
.woocommerce-cart .wc-block-components-quantity-selector,
.woocommerce-cart .wc-block-components-text-input input {
  border-radius: var(--km-radius-sm, .5rem) !important;
  border-color: var(--km-outline-variant) !important;
  font-family: var(--km-font-body);
}

/* Polish: keep the sidebar heading legible (WooCommerce renders it as a small
   uppercase label) and give the checkout button room to breathe.
   The item list itself is deliberately NOT a card: it used to carry the same
   1px hairline box as the summary, which read as a stray outline drawn around
   the product row. The header divider and the row dividers carry the structure
   instead, and the list is full-bleed so it lines up with the "Cart" heading
   and the summary card rather than floating inside its own frame. */
.woocommerce-cart .wc-block-cart-items {
  padding: var(--km-space-md, 1rem) 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.woocommerce-cart .wc-block-components-sidebar h2,
.woocommerce-cart .wc-block-components-order-summary h2,
.woocommerce-cart .wc-block-components-title {
  margin: 0 0 var(--km-space-md, 1rem) !important;
  font-family: var(--km-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--km-on-surface) !important;
}
.woocommerce-cart .wc-block-cart__submit-container {
  margin-top: var(--km-space-md, 1rem) !important;
}
.woocommerce-cart .wc-block-cart-item__remove-link,
.woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--km-on-surface-variant) !important;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover { color: var(--km-danger) !important; }

/* The cart item list is a real <table>, and Hello Elementor's reset gives every
   td/th a 1px border. That draws a full grid of lines around the product cell —
   WooCommerce only zeroes the table's own border, not the cells. Remove the cell
   borders; the surrounding card and the row dividers provide the structure. */
.woocommerce-cart .wc-block-cart-items td,
.woocommerce-cart .wc-block-cart-items th,
.woocommerce-cart .wc-block-cart-items__row td,
.woocommerce-cart .wc-block-cart-items__header th {
  border: 0 none !important;
}
.woocommerce-cart .wc-block-cart-items__row + .wc-block-cart-items__row > td,
.woocommerce-cart .wc-block-cart-items__row > td {
  border-top: 0 none !important;
}
/* A single divider between the header and the first row, rather than a box. */
.woocommerce-cart .wc-block-cart-items__header > th {
  border-bottom: 1px solid var(--km-hairline) !important;
}

/* ==========================================================================
   Product variations (real WooCommerce variations)
   ==========================================================================
   product page's colourway control is WooCommerce's own variation form, so the
   attribute dropdown, variation price and availability message are styled here
   rather than hand-rolled markup. WooCommerce's variation script drives the
   behaviour; nothing below affects that. */

.km-buybox .variations_form,
.km-buybox .variations_form .variations,
.km-buybox .single_variation_wrap,
.km-buybox .woocommerce-variation-add-to-cart {
  width: 100%;
  margin: 0;
}
.km-buybox .variations { border: 0; }
.km-buybox .variations tr,
.km-buybox .variations th,
.km-buybox .variations td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.km-buybox .variations .label {
  display: block;
  margin-bottom: .4375rem;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-on-surface);
}
.km-buybox .variations .label label { margin: 0; }

/* The attribute dropdown, matched to the design system's select. */
.km-buybox .variations select,
.km-buybox select.km-variations__select {
  display: block;
  width: 100%;
  max-width: 22rem;
  min-height: 46px;
  margin: 0;
  padding: .6875rem 2.25rem .6875rem .875rem;
  border: 1px solid var(--km-outline-variant);
  border-radius: var(--km-radius-md);
  background-color: var(--km-surface-container-lowest);
  font-family: var(--km-font-body);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--km-on-surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233f4850' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  cursor: pointer;
  box-sizing: border-box;
}
.km-buybox .variations select:focus {
  outline: none;
  border-color: var(--km-secondary-container);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

/* "Clear" link WooCommerce shows once a choice is made. */
.km-buybox .reset_variations {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--km-primary);
  text-decoration: none;
}
.km-buybox .reset_variations:hover { text-decoration: underline; }

/* Price / availability WooCommerce injects for the chosen variation. */
.km-buybox .woocommerce-variation {
  margin-bottom: var(--km-space-md, 1rem);
}
.km-buybox .woocommerce-variation-price .price,
.km-buybox .woocommerce-variation-price .amount {
  font-family: var(--km-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--km-on-surface);
}
.km-buybox .woocommerce-variation-availability p {
  margin: .25rem 0 0;
  font-family: var(--km-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--km-success);
}

/* Keep the quantity and button on one row, as the simple-product form does. */
.km-buybox .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--km-space-sm, .75rem);
  flex-wrap: wrap;
}
.km-buybox .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto;
}

/* The add-to-cart button is disabled until a colourway is chosen. Give that
   state a neutral, clearly-inactive treatment instead of the theme's fallback. */
.km-buybox .single_add_to_cart_button:disabled,
.km-buybox .single_add_to_cart_button.disabled,
.km-buybox .single_add_to_cart_button.wc-variation-selection-needed {
  background-color: var(--km-surface-container-high, #e2e7ff) !important;
  color: var(--km-on-surface-variant, #3f4850) !important;
  border: 1px solid var(--km-hairline, #e2e8f0) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Empty cart: friendly worded state

   WooCommerce draws the empty-cart glyph as a ::before with a mask-image, sized
   in `em` and filled from `background-color`. That mask is replaced here with a
   plain sad-face emoji, and the "Your cart is currently empty!" wording — which
   is already in the DOM for screen readers — is shown rather than hidden. */

.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: var(--km-space-lg, 1.5rem) auto var(--km-space-md, 1rem) !important;
  padding: 0 !important;
  font-family: var(--km-font-display) !important;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
  color: var(--km-on-surface) !important;
  text-align: center;
  overflow: visible;
}
/* Replace WooCommerce's mask glyph with a standard emoji. */
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: "\1F622";
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto var(--km-space-md, 1rem) !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: 3.25rem !important;
  line-height: 1 !important;
  color: initial !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* ---------------------------------------------------------------------------
   Block product grid: no underline on the product title link.
   Previously only `.wc-block-grid__product-title a` was reset, but the anchor
   that actually wraps the card is `.wc-block-grid__product-link`, so the title
   kept its underline. */

.wc-block-grid .wc-block-grid__product-link,
.wc-block-grid .wc-block-grid__product-link:hover,
.wc-block-grid .wc-block-grid__product-link:focus,
.wc-block-grid .wc-block-grid__product-title,
.wc-block-grid .wc-block-grid__product-title a,
.wc-block-grid .wc-block-grid__product-title a:hover,
.wc-block-grid .wc-block-grid__product-title a:focus,
.wc-block-grid a.wc-block-grid__product-link * {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* Phase 2: layout declarations for the PHP-rendered button surfaces (product cards, PDP,
   shortcodes). Elementor-built buttons take these values from their own element props. */
.elementor .km-block .km-btn-primary,
.elementor .km-block .km-btn-secondary {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: var(--km-space-xs) !important;
  min-height: 46px;
  padding: .8125rem 1.5rem !important;
  width: fit-content !important;
}
.elementor .km-block .km-btn-primary--sm,
.elementor .km-block .km-btn-secondary--sm {
  min-height: 38px;
  padding: .5625rem 1rem !important;
}
.elementor .km-block .km-btn-primary--block,
.elementor .km-block .km-btn-secondary--block {
  width: 100% !important;
}
.elementor .km-block .km-btn-primary--lg {
  min-height: 54px;
  padding-inline: 2rem !important;
}
.elementor .km-block a.km-btn-primary,
.elementor .km-block a.km-btn-secondary,
.elementor .km-block button.km-btn-primary,
.elementor .km-block button.km-btn-secondary {
  width: auto !important;
}
.elementor .km-block a.km-btn-primary--block,
.elementor .km-block a.km-btn-secondary--block,
.elementor .km-block a.km-btn-primary--lg.km-btn-primary--block {
  width: 100% !important;
}
.elementor .km-block .km-card .km-btn-primary,
.elementor .km-block .km-card .km-btn-secondary {
  width: 100% !important;
}
.elementor .km-block .km-mobile-menu .km-btn-primary {
  width: 100% !important;
}
.elementor .km-block ul.products.km-products li.product .button,
.elementor .km-block ul.products.km-products li.product .add_to_cart_button,
.elementor .km-block ul.products.km-products li.product .km-btn-primary,
.elementor .km-block ul.products.km-products li.product .km-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  width: 100% !important;
  min-height: 42px;
  padding: .625rem 1rem !important;
}

/* Phase 2 family 1 (km-stack): layout declarations for the PHP-rendered surfaces. */
.elementor .km-block .km-stack {
  display: flex !important;
  flex-direction: column !important;
}

/* Phase 2 km-row: layout declarations for the PHP-rendered surfaces. */
.elementor .km-block .km-row {
  flex-direction: row !important;
  align-items: center !important;
}

/* Phase 2 km-row */
.elementor .km-block .km-row {
  display: flex !important;
}

/* Phase 2 km-grid */
.elementor .km-block .km-grid {
  display: grid !important;
}

/* Phase 2 km-card */
.elementor .km-block .km-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Phase 2 km-chip */
.elementor .km-block .km-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
.elementor .km-block .km-chip .elementor-heading-title {
  display: inline;
}

/* Phase 2 km-icon-tile */
.elementor .km-block .km-icon-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
}

/* Phase 2 km-media */
.elementor .km-block .km-media img,
.elementor .km-block .km-media .e-image-base,
.elementor .km-block .km-media .e-default-img {
  display: block !important;
}

/* Phase 2 km-dot */
.elementor .km-block .km-dot {
  display: block !important;
}

/* Phase 2 km-eyebrow-pill */
.elementor .km-block .km-eyebrow-pill {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Phase 2 km-container */
.elementor .km-block .km-container {
  display: flex !important;
  flex-direction: column !important;
}

/* Phase 2 km-section */
.elementor .km-block .km-section {
  display: flex !important;
  flex-direction: column !important;
}

/* Phase 2 km-h4 */
.elementor .km-block .km-h4 .elementor-heading-title {
  display: inline;
}

/* Phase 2 km-grid--hero */
.elementor .km-block .km-grid--hero {
  align-items: center !important;
}

/* Phase 2 km-row--between */
.elementor .km-block .km-row--between {
  justify-content: space-between;
}

/* Phase 2 km-container--center */
.elementor .km-block .km-container--center {
  align-items: center !important;
}
.elementor .km-block .km-container--center {
  align-items: flex-start !important;
}

/* Phase 2 km-grid--3 (typed + responsive) */
.elementor .km-block .km-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--3 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--3 {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Phase 2 km-grid--2 (typed + responsive) */
.elementor .km-block .km-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--2 {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Phase 2 km-grid--4 (typed + responsive) */
.elementor .km-block .km-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--4 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.elementor .km-block .km-grid--4 {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Phase 2 km-grid--split (typed + responsive) */
.elementor .km-block .km-grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.elementor .km-block .km-grid--split {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Phase 2 km-media--4x3 (typed + responsive) */
.elementor .km-block .km-media--4x3 {
  aspect-ratio: 4 / 3;
}

/* Phase 2 km-icon-tile--lg (typed + responsive) */
.elementor .km-block .km-icon-tile--lg {
  width: 56px !important;
  height: 56px;
  min-width: 56px !important;
}

/* Phase 2 km-card--fill (typed + responsive) */
.elementor .km-block .km-card--fill {
  height: 100%;
}