/*
Theme Name: Moro Jaya Teknik
Theme URI: https://morojayateknik.com
Description: Blocksy child theme for Moro Jaya Teknik. Carries the site design system: colour, spacing, radius and shadow tokens plus the reusable global classes used across Elementor templates.
Author: Moro Jaya Teknik
Version: 1.0.0
Template: blocksy
Text Domain: blocksy-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth. Never hardcode these values in Elementor.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --mjt-primary: #005BBB;
  --mjt-primary-dark: #004A99;
  --mjt-primary-light: #1A6DC7;
  --mjt-primary-50: #EBF3FF;
  --mjt-primary-100: #DBEAFE;
  --mjt-primary-on-dark: #93C5FD;

  --mjt-accent: #FF6B00;
  --mjt-accent-dark: #E55A00;
  --mjt-accent-light: #FF8533;
  --mjt-accent-50: #FFF3E8;

  --mjt-whatsapp: #25D366;
  --mjt-whatsapp-dark: #1DAA55;

  /* --- Neutrals --------------------------------------------------------- */
  --mjt-navy: #0F172A;
  --mjt-navy-alt: #1E293B;
  --mjt-heading: #0F172A;
  --mjt-body-strong: #334155;
  --mjt-body: #475569;
  --mjt-muted: #64748B;
  --mjt-muted-light: #94A3B8;
  --mjt-border-strong: #CBD5E1;
  --mjt-border: #E2E8F0;
  --mjt-surface-alt: #F1F5F9;
  --mjt-bg: #F8FAFC;
  --mjt-surface: #FFFFFF;

  /* --- Status ----------------------------------------------------------- */
  --mjt-success: #059669;
  --mjt-warning: #F59E0B;
  --mjt-danger: #EF4444;

  /* --- Spacing scale ---------------------------------------------------- */
  --mjt-space-xs: 4px;
  --mjt-space-sm: 8px;
  --mjt-space-md: 16px;
  --mjt-space-lg: 24px;
  --mjt-space-xl: 40px;
  --mjt-space-2xl: 56px;
  --mjt-space-3xl: 80px;

  /* --- Radius ----------------------------------------------------------- */
  --mjt-radius-xs: 2px;
  --mjt-radius-sm: 4px;
  --mjt-radius-md: 8px;
  --mjt-radius-lg: 12px;
  --mjt-radius-xl: 16px;
  --mjt-radius-2xl: 20px;
  --mjt-radius-3xl: 24px;
  --mjt-radius-pill: 9999px;

  /* --- Shadows ---------------------------------------------------------- */
  --mjt-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --mjt-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --mjt-shadow-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -1px rgba(15,23,42,.04);
  --mjt-shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -2px rgba(15,23,42,.04);
  --mjt-shadow-xl: 0 20px 25px -5px rgba(15,23,42,.10), 0 10px 10px -5px rgba(15,23,42,.04);
  --mjt-shadow-2xl: 0 25px 50px -12px rgba(15,23,42,.20);
  --mjt-shadow-card: 0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
  --mjt-shadow-primary: 0 4px 14px rgba(0,91,187,.25);
  --mjt-shadow-primary-hover: 0 6px 20px rgba(0,91,187,.35);
  --mjt-shadow-accent: 0 4px 14px rgba(255,107,0,.30);
  --mjt-shadow-accent-hover: 0 6px 20px rgba(255,107,0,.40);
  --mjt-shadow-whatsapp: 0 4px 14px rgba(37,211,102,.30);
  --mjt-shadow-whatsapp-hover: 0 6px 20px rgba(37,211,102,.40);
  --mjt-shadow-hover-blue: 0 8px 30px rgba(0,91,187,.10);

  /* --- Layout ----------------------------------------------------------- */
  --mjt-container: 1280px;
  --mjt-gutter: 24px;
  --mjt-tap-target: 44px;

  /* --- Motion ----------------------------------------------------------- */
  --mjt-ease: cubic-bezier(.4, 0, .2, 1);
  --mjt-duration: 200ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--mjt-bg);
  color: var(--mjt-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elementor pages own their own spacing; strip theme container padding. */
.elementor-page .site-main,
.elementor-page .ct-container-full {
  padding-block: 0;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mjt-border-strong); border-radius: var(--mjt-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--mjt-muted-light); }

/* Visible keyboard focus everywhere — required for AA keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mjt-primary);
  outline-offset: 2px;
  border-radius: var(--mjt-radius-sm);
}

/* Never allow a page to scroll sideways. */
html, body { overflow-x: clip; }

/* ==========================================================================
   3. GLOBAL CLASSES — SECTIONS
   Applied via Elementor > Advanced > CSS Classes.
   ========================================================================== */

.mjt-section-light { background-color: var(--mjt-surface); }
.mjt-section-alt   { background-color: var(--mjt-bg); }
.mjt-section-dark  { background-color: var(--mjt-navy); }

.mjt-section-dark,
.mjt-section-dark p,
.mjt-section-dark li { color: #94A3B8; }
.mjt-section-dark h1,
.mjt-section-dark h2,
.mjt-section-dark h3,
.mjt-section-dark h4 { color: #FFFFFF; }

.mjt-section-gradient {
  background-image: linear-gradient(135deg, var(--mjt-primary) 0%, #0066D4 50%, var(--mjt-primary-dark) 100%);
}
.mjt-section-gradient-navy {
  background-image: linear-gradient(135deg, var(--mjt-navy) 0%, var(--mjt-navy-alt) 50%, var(--mjt-navy) 100%);
}
.mjt-section-gradient-accent {
  background-image: linear-gradient(135deg, var(--mjt-accent) 0%, var(--mjt-accent-light) 50%, var(--mjt-accent-dark) 100%);
}

.mjt-border-top    { border-top: 1px solid var(--mjt-border); }
.mjt-border-bottom { border-bottom: 1px solid var(--mjt-border); }
.mjt-border-y      { border-block: 1px solid var(--mjt-border); }

/* Subtle dotted texture used behind dark hero sections. */
.mjt-dot-pattern { position: relative; isolation: isolate; }
.mjt-dot-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #FFFFFF 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .04;
}
.mjt-dot-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(135deg, rgba(0,91,187,.22) 0%, transparent 55%, rgba(255,107,0,.12) 100%);
}

/* ==========================================================================
   4. GLOBAL CLASSES — TYPOGRAPHY HELPERS
   ========================================================================== */

.mjt-eyebrow .elementor-heading-title,
.mjt-eyebrow {
  color: var(--mjt-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.mjt-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mjt-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   5. GLOBAL CLASSES — BUTTONS
   Put the class on the Elementor Button widget (Advanced > CSS Classes).
   ========================================================================== */

.mjt-btn .elementor-button,
.mjt-btn-primary .elementor-button,
.mjt-btn-secondary .elementor-button,
.mjt-btn-accent .elementor-button,
.mjt-btn-whatsapp .elementor-button,
.mjt-btn-ghost .elementor-button,
.mjt-btn-marketplace .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--mjt-tap-target);
  border-radius: var(--mjt-radius-lg);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease),
              transform var(--mjt-duration) var(--mjt-ease);
}

.mjt-btn-primary .elementor-button {
  background-color: var(--mjt-primary);
  color: #FFFFFF;
  box-shadow: var(--mjt-shadow-primary);
}
.mjt-btn-primary .elementor-button:hover,
.mjt-btn-primary .elementor-button:focus {
  background-color: var(--mjt-primary-dark);
  box-shadow: var(--mjt-shadow-primary-hover);
  transform: translateY(-1px);
}

.mjt-btn-secondary .elementor-button {
  background-color: var(--mjt-surface);
  color: var(--mjt-primary);
  border: 1px solid rgba(0,91,187,.30);
}
.mjt-btn-secondary .elementor-button:hover,
.mjt-btn-secondary .elementor-button:focus {
  background-color: var(--mjt-primary-50);
  border-color: var(--mjt-primary);
}

.mjt-btn-accent .elementor-button {
  background-color: var(--mjt-accent);
  color: #FFFFFF;
  box-shadow: var(--mjt-shadow-accent);
}
.mjt-btn-accent .elementor-button:hover,
.mjt-btn-accent .elementor-button:focus {
  background-color: var(--mjt-accent-dark);
  box-shadow: var(--mjt-shadow-accent-hover);
  transform: translateY(-1px);
}

.mjt-btn-whatsapp .elementor-button {
  background-color: var(--mjt-whatsapp);
  color: #FFFFFF;
  box-shadow: var(--mjt-shadow-whatsapp);
}
.mjt-btn-whatsapp .elementor-button:hover,
.mjt-btn-whatsapp .elementor-button:focus {
  background-color: var(--mjt-whatsapp-dark);
  box-shadow: var(--mjt-shadow-whatsapp-hover);
  transform: translateY(-1px);
}

.mjt-btn-ghost .elementor-button {
  background-color: transparent;
  color: var(--mjt-body);
  border: 1px solid transparent;
}
.mjt-btn-ghost .elementor-button:hover,
.mjt-btn-ghost .elementor-button:focus {
  background-color: var(--mjt-surface-alt);
  border-color: var(--mjt-border);
}

.mjt-btn-marketplace .elementor-button {
  background-color: var(--mjt-navy-alt);
  color: #FFFFFF;
  box-shadow: var(--mjt-shadow-sm);
}
.mjt-btn-marketplace .elementor-button:hover,
.mjt-btn-marketplace .elementor-button:focus {
  background-color: var(--mjt-navy);
}

/* On dark backgrounds an outlined button needs a light border. */
.mjt-btn-outline-light .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.25);
  min-height: var(--mjt-tap-target);
  border-radius: var(--mjt-radius-lg);
}
.mjt-btn-outline-light .elementor-button:hover,
.mjt-btn-outline-light .elementor-button:focus {
  background-color: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.45);
}

/* ==========================================================================
   6. GLOBAL CLASSES — CARDS
   ========================================================================== */

.mjt-card,
.mjt-card-service,
.mjt-card-feature,
.mjt-card-product,
.mjt-card-category,
.mjt-card-brand,
.mjt-card-testimonial,
.mjt-card-blog,
.mjt-pricing-card {
  background-color: var(--mjt-surface);
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-xl);
  overflow: hidden;
  transition: border-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease),
              transform var(--mjt-duration) var(--mjt-ease);
}

.mjt-card:hover,
.mjt-card-service:hover,
.mjt-card-feature:hover,
.mjt-card-product:hover,
.mjt-card-category:hover,
.mjt-card-brand:hover,
.mjt-card-blog:hover {
  border-color: rgba(0,91,187,.30);
  box-shadow: var(--mjt-shadow-hover-blue);
  transform: translateY(-2px);
}

.mjt-card-category,
.mjt-card-brand,
.mjt-card-blog,
.mjt-card-testimonial,
.mjt-pricing-card { border-radius: var(--mjt-radius-2xl); }

.mjt-card-testimonial:hover { box-shadow: var(--mjt-shadow-lg); }

/* Cards sitting on a dark section. */
.mjt-card-dark {
  background-color: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--mjt-radius-xl);
  transition: background-color var(--mjt-duration) var(--mjt-ease);
}
.mjt-card-dark:hover { background-color: rgba(255,255,255,.08); }

/* ==========================================================================
   7. GLOBAL CLASSES — BADGES, PILLS, ICONS
   ========================================================================== */

.mjt-badge > .elementor-widget-container,
.mjt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--mjt-radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.mjt-badge-primary { background-color: var(--mjt-primary-50); color: var(--mjt-primary); }
.mjt-badge-accent  { background-color: var(--mjt-accent-50);  color: var(--mjt-accent-dark); }
.mjt-badge-success { background-color: #ECFDF5;               color: var(--mjt-success); }
.mjt-badge-danger  { background-color: #FEF2F2;               color: var(--mjt-danger); }
.mjt-badge-neutral { background-color: var(--mjt-surface-alt); color: var(--mjt-body); }

/* Pill sitting on a dark hero. */
.mjt-pill-dark { align-self: flex-start; }
.mjt-pill-dark .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0,91,187,.20);
  border: 1px solid rgba(0,91,187,.35);
  color: var(--mjt-primary-on-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--mjt-radius-pill);
}

.mjt-icon-circle .elementor-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mjt-radius-pill);
  background-color: var(--mjt-primary-50);
  color: var(--mjt-primary);
}

.mjt-icon-square .elementor-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mjt-radius-lg);
  background-color: var(--mjt-primary-50);
  color: var(--mjt-primary);
}

/* ==========================================================================
   8. COMPONENT — FLOATING WHATSAPP
   ========================================================================== */

.mjt-float-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--mjt-radius-pill);
  background-color: var(--mjt-whatsapp);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--mjt-shadow-whatsapp);
  transition: background-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease);
}
.mjt-float-wa:hover,
.mjt-float-wa:focus {
  background-color: var(--mjt-whatsapp-dark);
  box-shadow: var(--mjt-shadow-whatsapp-hover);
  color: #FFFFFF;
}
.mjt-float-wa svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

@media (max-width: 767px) {
  .mjt-float-wa { padding: 0; width: 56px; justify-content: center; }
  .mjt-float-wa .mjt-float-wa__label { display: none; }
}

/* ==========================================================================
   9. WOOCOMMERCE — CATALOGUE / RFQ MODE
   Prices stay visible; the cart is replaced by WhatsApp + RFQ actions.
   ========================================================================== */

.woocommerce .cart,
.woocommerce .single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce .added_to_cart,
.woocommerce .quantity { display: none !important; }

.woocommerce ul.products li.product {
  background-color: var(--mjt-surface);
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-xl);
  overflow: hidden;
  transition: border-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease);
}
.woocommerce ul.products li.product:hover {
  border-color: rgba(0,91,187,.30);
  box-shadow: var(--mjt-shadow-hover-blue);
}

.woocommerce .price { color: var(--mjt-heading); font-weight: 700; }

/* Product specification table */
.mjt-spec-table table,
.woocommerce table.shop_attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-lg);
  overflow: hidden;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--mjt-border);
  text-align: left;
}
.woocommerce table.shop_attributes th {
  background-color: var(--mjt-bg);
  color: var(--mjt-body-strong);
  font-weight: 600;
  width: 38%;
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td { border-bottom: 0; }

/* Any wide table scrolls inside itself rather than the page. */
.mjt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   10. FORMS (WPForms)
   ========================================================================== */

.wpforms-container .wpforms-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mjt-body-strong);
  margin-bottom: 6px;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
  width: 100%;
  min-height: var(--mjt-tap-target);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--mjt-heading);
  background-color: var(--mjt-surface);
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-lg);
  transition: border-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease);
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--mjt-primary);
  box-shadow: 0 0 0 3px rgba(0,91,187,.12);
  outline: none;
}
.wpforms-container button[type=submit] {
  width: 100%;
  min-height: var(--mjt-tap-target);
  background-color: var(--mjt-primary);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  border-radius: var(--mjt-radius-lg);
  box-shadow: var(--mjt-shadow-primary);
  cursor: pointer;
  transition: background-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease);
}
.wpforms-container button[type=submit]:hover {
  background-color: var(--mjt-primary-dark);
  box-shadow: var(--mjt-shadow-primary-hover);
}

/* RFQ form sits on a dark panel in the popup. */
.mjt-form-card .wpforms-container { margin: 0; }

/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

.mjt-full-width-mobile { width: 100%; }

/* Guarantee a comfortable tap target on small screens. */
@media (max-width: 767px) {
  .mjt-btn-primary .elementor-button,
  .mjt-btn-secondary .elementor-button,
  .mjt-btn-accent .elementor-button,
  .mjt-btn-whatsapp .elementor-button,
  .mjt-btn-ghost .elementor-button,
  .mjt-btn-marketplace .elementor-button { width: 100%; }

  .mjt-nowrap-mobile .elementor-button { width: auto; }
}

/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mjt-card:hover,
  .mjt-card-product:hover,
  .mjt-btn-primary .elementor-button:hover { transform: none; }
}

/* ==========================================================================
   13. LAYOUT UTILITIES FOR HEADER / FOOTER COMPOSITION
   ========================================================================== */

.mjt-flex-grow { flex: 1 1 0%; min-width: 0; }
.mjt-flex-none { flex: 0 0 auto; }

/* --- Sticky header ------------------------------------------------------ */
.mjt-header {
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: var(--mjt-shadow-sm);
}
.admin-bar .mjt-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .mjt-header { top: 46px; }
}

/* --- Top bar ------------------------------------------------------------ */
.mjt-topbar a { color: #CBD5E1; transition: color var(--mjt-duration) var(--mjt-ease); }
.mjt-topbar a:hover,
.mjt-topbar a:focus { color: var(--mjt-primary-on-dark); }
.mjt-topbar .elementor-icon-list-items { margin: 0; }

/* --- Trust strip -------------------------------------------------------- */
.mjt-trust .elementor-icon-list-item { color: var(--mjt-muted); }

/* --- Product category dropdown reads as two columns on wide screens ----- */
@media (min-width: 1025px) {
  .mjt-nav .xpro-submenu,
  .mjt-nav ul.sub-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 2px;
  }
}

/* ==========================================================================
   14. WOOCOMMERCE PRODUCT ACTION BUTTONS (rendered by the child theme)
   ========================================================================== */

.mjt-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
}

.mjt-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mjt-tap-target);
  padding: 0 22px;
  border-radius: var(--mjt-radius-lg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #FFFFFF;
  transition: background-color var(--mjt-duration) var(--mjt-ease),
              box-shadow var(--mjt-duration) var(--mjt-ease);
}
.mjt-btn-inline:hover,
.mjt-btn-inline:focus { color: #FFFFFF; }

.mjt-btn-inline--wa  { background-color: var(--mjt-whatsapp); box-shadow: var(--mjt-shadow-whatsapp); }
.mjt-btn-inline--wa:hover,
.mjt-btn-inline--wa:focus { background-color: var(--mjt-whatsapp-dark); box-shadow: var(--mjt-shadow-whatsapp-hover); }

.mjt-btn-inline--rfq { background-color: var(--mjt-accent); box-shadow: var(--mjt-shadow-accent); }
.mjt-btn-inline--rfq:hover,
.mjt-btn-inline--rfq:focus { background-color: var(--mjt-accent-dark); box-shadow: var(--mjt-shadow-accent-hover); }

.mjt-price-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mjt-muted-light);
}

@media (max-width: 767px) {
  .mjt-product-actions { flex-direction: column; }
  .mjt-btn-inline { width: 100%; }
}

/* ==========================================================================
   15. STAT / TIMELINE / MILESTONE BLOCKS
   ========================================================================== */

.mjt-stat .elementor-counter-number-wrapper { justify-content: center; }

.mjt-milestone {
  position: relative;
  padding-left: 26px;
}
.mjt-milestone::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-color: rgba(255,255,255,.12);
}
.mjt-milestone .elementor-icon-list-icon { color: var(--mjt-accent); }

/* Wide content never pushes the page sideways. */
.mjt-scroll-x > .elementor-widget-container { overflow-x: auto; }
/* ==========================================================================
   16. IMAGE-BOX CARD INTERNALS
   Elementor's Image Box has no inner padding control, so the card padding
   and media framing live here with the rest of the design system.
   ========================================================================== */

.mjt-card-category .elementor-image-box-content,
.mjt-card-brand .elementor-image-box-content,
.mjt-card-feature .elementor-image-box-content {
  padding: 16px 16px 18px;
}

.mjt-card-category .elementor-image-box-img,
.mjt-card-brand .elementor-image-box-img {
  margin: 0;
  overflow: hidden;
}

.mjt-card-brand .elementor-image-box-img {
  background-color: var(--mjt-bg);
  border-bottom: 1px solid var(--mjt-border);
}
.mjt-card-brand .elementor-image-box-img img {
  object-fit: contain;
  padding: 20px 24px;
}

/* Cards in a row must stretch to equal height. */
.mjt-card-category,
.mjt-card-brand,
.mjt-card-feature { display: flex; flex-direction: column; }
.mjt-card-category > .elementor-widget-container,
.mjt-card-brand > .elementor-widget-container,
.mjt-card-feature > .elementor-widget-container { height: 100%; }
.mjt-card-category .elementor-image-box-wrapper,
.mjt-card-brand .elementor-image-box-wrapper,
.mjt-card-feature .elementor-image-box-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The hero search should use the full column width. */
.mjt-hero-search { width: 100%; }

/* Popular-search chips */
.mjt-chips .elementor-icon-list-item > a,
.mjt-chips .elementor-icon-list-item {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--mjt-radius-pill);
  padding: 4px 12px;
  transition: border-color var(--mjt-duration) var(--mjt-ease),
              background-color var(--mjt-duration) var(--mjt-ease);
}
.mjt-chips .elementor-icon-list-item:hover {
  border-color: rgba(255,255,255,.32);
  background-color: rgba(255,255,255,.06);
}
/* ==========================================================================
   17. LONG-FORM CONTENT (policy pages, article body)
   ========================================================================== */

.mjt-longform h2,
.entry-content h2 { margin: 34px 0 12px; font-size: 22px; font-weight: 700; color: var(--mjt-heading); }
.mjt-longform h3,
.entry-content h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; color: var(--mjt-heading); }
.mjt-longform h2:first-child { margin-top: 0; }
.mjt-longform p,
.entry-content p { margin: 0 0 14px; }
.mjt-longform ul,
.mjt-longform ol,
.entry-content ul,
.entry-content ol { margin: 0 0 18px; padding-left: 22px; }
.mjt-longform li,
.entry-content li { margin-bottom: 7px; }
.mjt-longform a { color: var(--mjt-primary); text-decoration: underline; }

/* ==========================================================================
   18. BREADCRUMBS
   ========================================================================== */

.mjt-breadcrumb-bar {
  max-width: var(--mjt-container);
  margin: 0 auto;
  padding: 18px 24px 0;
}
.mjt-breadcrumb {
  font-size: 13px;
  color: var(--mjt-muted);
}
.mjt-breadcrumb a { color: var(--mjt-primary); text-decoration: none; }
.mjt-breadcrumb a:hover { text-decoration: underline; }
.mjt-crumb-sep { margin: 0 8px; color: var(--mjt-border-strong); }
@media (max-width: 767px) {
  .mjt-breadcrumb-bar { padding: 14px 16px 0; }
}

/* ==========================================================================
   19. MOBILE TAP TARGETS AND GRID SAFETY
   ========================================================================== */

@media (max-width: 767px) {
  /* Contact links in the top bar and the hero chips need a real hit area. */
  .mjt-topbar .elementor-icon-list-item > a,
  .mjt-chips .elementor-icon-list-item > a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .mjt-chips .elementor-icon-list-item { padding: 7px 14px; }
  .mjt-topbar .elementor-icon-list-items { gap: 6px 14px; }
}

/* CubePortfolio-driven grids must never spill out of their container. */
.mjt-product-grid .cbp,
.mjt-post-grid .cbp { max-width: 100%; }
.mjt-product-grid,
.mjt-post-grid { width: 100%; overflow: hidden; }

/* ==========================================================================
   20. MOBILE HEADER
   Logo and hamburger share the top row; search takes the row beneath it.
   ========================================================================== */

@media (max-width: 767px) {
  .mjt-header .mjt-flex-grow { order: 2; width: 100%; flex: 1 0 100%; }
  .mjt-nav { padding-block: 0; }
  .mjt-nav .elementor-widget-xpro-horizontal-menu { width: 100%; }
  .mjt-nav .xpro-elementor-horizontal-menu-toggle-wrapper,
  .mjt-nav .xpro-elementor-horizontal-menu-toggle { margin-left: auto; /* hamburger */ }
  .mjt-topbar .elementor-widget-text-editor { display: none; }
}

/* Keep the hamburger a comfortable, quiet control. */
.xpro-elementor-horizontal-menu-toggle {
  border-radius: var(--mjt-radius-md);
}

/* ==========================================================================
   21. SPECIFICITY FIXES
   Elementor and Xpro both emit high-specificity rules for these elements,
   so the overrides below have to match that weight.
   ========================================================================== */

/* The logo must never be squeezed by the growing search field. */
.mjt-header .elementor-element.elementor-widget-image {
  flex: 0 0 auto;
  min-width: 200px;
}
@media (max-width: 767px) {
  .mjt-header .elementor-element.elementor-widget-image { min-width: 158px; }
}

/* The price suffix is a caption, not part of the price. */
.woocommerce .price .mjt-price-note,
.xpro-woo-product-grid-price .mjt-price-note,
span.mjt-price-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mjt-muted-light);
}