/*
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 .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; }

/* ==========================================================================
   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);
}

/* == PRO COMPONENTS == */

/* ==========================================================================
   13. MEGA MENU (Elementor Pro n-menu)
   The panel itself is a styled container, so the widget shell stays neutral.
   ========================================================================== */

.mjt-mega .e-n-menu-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.mjt-mega .e-n-menu-content > .e-con {
  --container-max-width: none;
  margin-inline: 0;
}

.mjt-mega .e-n-menu-title {
  border-radius: var(--mjt-radius-md);
}

.mjt-mega .e-n-menu-title-text {
  white-space: nowrap;
}

/* Active/hover underline instead of a filled block. */
.mjt-mega .e-n-menu-item > .e-n-menu-title {
  position: relative;
}
.mjt-mega .e-n-menu-item > .e-n-menu-title::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--mjt-primary);
  transform: scaleX(0);
  transition: transform var(--mjt-duration) var(--mjt-ease);
}
.mjt-mega .e-n-menu-item > .e-n-menu-title[aria-expanded="true"]::after,
.mjt-mega .e-n-menu-item > .e-n-menu-title:hover::after {
  transform: scaleX(1);
}

/* Category rows inside the panel. */
.mjt-mega-cat .elementor-image-box-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--mjt-radius-md);
  transition: background-color var(--mjt-duration) var(--mjt-ease);
}
.mjt-mega-cat:hover .elementor-image-box-wrapper { background: var(--mjt-primary-50); }
.mjt-mega-cat .elementor-image-box-img { margin: 0 !important; flex: none; }
.mjt-mega-cat .elementor-image-box-img img { display: block; border-radius: var(--mjt-radius-md); }
.mjt-mega-cat .elementor-image-box-content { flex: 1 1 auto; min-width: 0; }
.mjt-mega-cat .elementor-image-box-title { margin: 0; }
.mjt-mega-cat .elementor-image-box-description { display: none; }

.mjt-mega-brand img { max-height: 20px; width: auto; object-fit: contain; }
.mjt-mega-brands > .e-con,
.mjt-mega-brands > .e-con-inner { flex: 0 0 calc(50% - 3px); }

@media (max-width: 1024px) {
  .mjt-mega .e-n-menu-content > .e-con { width: 100% !important; }
  .mjt-mega-panel { box-shadow: none !important; border: 0 !important; }
}

/* ==========================================================================
   14. PRODUCT + ARTICLE CARDS (Loop Grid)
   ========================================================================== */

.elementor-widget-loop-grid .e-loop-item { display: flex; }
.elementor-widget-loop-grid .e-loop-item > .e-con { width: 100%; }

.mjt-brand-pill {
  display: inline-block;
  background: var(--mjt-primary-50);
  padding: 3px 8px;
  border-radius: var(--mjt-radius-sm);
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mjt-brand-pill a { color: inherit; text-decoration: none; }

.mjt-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

.mjt-prod-title a,
.mjt-blog-title a { color: inherit; text-decoration: none; }
.mjt-prod-title a:hover,
.mjt-blog-title a:hover { color: var(--mjt-primary); }

.mjt-card-product img { mix-blend-mode: multiply; }

.mjt-card-product .elementor-widget-woocommerce-product-rating .woocommerce-product-rating { margin: 0; }
.mjt-card-product .star-rating { float: none; }

/* The pre-VAT note belongs on the product page, not on every card. */
.mjt-card-product .mjt-price-note { display: none; }
.mjt-price-note {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mjt-muted-light);
  margin-top: 2px;
}
.mjt-price .price { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.mjt-price del { display: none; }

.mjt-blog-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   15. ELEMENTOR FORMS
   ========================================================================== */

.mjt-form .elementor-field-group > label { margin-bottom: 6px; }
.mjt-form .elementor-field-textual { min-height: var(--mjt-tap-target); }
.mjt-form .elementor-field-textual:focus {
  border-color: var(--mjt-primary);
  box-shadow: 0 0 0 3px rgba(0,91,187,.12);
  outline: none;
}
.mjt-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.mjt-form .elementor-field-type-acceptance label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mjt-muted);
}
.mjt-form .elementor-field-type-acceptance input { margin-top: 3px; flex: none; }
.mjt-form .elementor-field-type-acceptance a { color: var(--mjt-primary); }
.mjt-form select.elementor-field-textual { appearance: auto; }
.mjt-form-dark .elementor-field-textual::placeholder { color: #64748B; }
.mjt-form-dark .elementor-field-group > label { display: none; }

/* ==========================================================================
   16. CHIP LISTS (certifications, payment methods)
   ========================================================================== */

.mjt-chip-list .elementor-icon-list-item,
.mjt-pay-list .elementor-icon-list-item {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--mjt-radius-sm);
  padding: 4px 8px;
}
.mjt-pay-list .elementor-icon-list-item:first-child {
  border: 0;
  padding-inline: 0;
  font-weight: 400;
}

/* ==========================================================================
   17. SEARCH FORMS
   ========================================================================== */

.mjt-header-search .elementor-search-form__container,
.mjt-hero-search .elementor-search-form__container { overflow: hidden; }
.mjt-hero-search .elementor-search-form__container { box-shadow: var(--mjt-shadow-lg); }
.mjt-header-search input[type="search"],
.mjt-hero-search input[type="search"] { font-family: inherit; }

/* ==========================================================================
   18. WOOCOMMERCE SINGLE + ARCHIVE (Elementor widgets)
   ========================================================================== */

.mjt-breadcrumb-dark a { color: var(--mjt-primary-on-dark); }
.mjt-stock .stock.in-stock { color: var(--mjt-success); }
.mjt-stock .stock.out-of-stock { color: var(--mjt-danger); }

.mjt-product-tabs .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--mjt-border);
  overflow-x: auto;
}
.mjt-product-tabs .woocommerce-tabs ul.tabs::before,
.mjt-product-tabs .woocommerce-tabs ul.tabs::after { display: none; }
.mjt-product-tabs .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.mjt-product-tabs .woocommerce-tabs ul.tabs li::before,
.mjt-product-tabs .woocommerce-tabs ul.tabs li::after { display: none; }
.mjt-product-tabs .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  color: var(--mjt-muted);
  font-weight: 600;
  white-space: nowrap;
}
.mjt-product-tabs .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--mjt-primary); }
.mjt-product-tabs .woocommerce-tabs ul.tabs li.active a { color: var(--mjt-primary); }

.mjt-product-gallery .woocommerce-product-gallery__image img { border-radius: var(--mjt-radius-lg); }

/* Loop-grid pagination */
.elementor-widget-loop-grid .elementor-pagination { margin-top: 36px; }
.elementor-widget-loop-grid .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-md);
  background: var(--mjt-surface);
  color: var(--mjt-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.elementor-widget-loop-grid .page-numbers.current,
.elementor-widget-loop-grid .page-numbers:hover {
  background: var(--mjt-primary);
  border-color: var(--mjt-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   19. ARTICLE BODY
   ========================================================================== */

.mjt-article-body h2 { font-size: 24px; margin: 32px 0 12px; color: var(--mjt-heading); }
.mjt-article-body h3 { font-size: 19px; margin: 26px 0 10px; color: var(--mjt-heading); }
.mjt-article-body p { margin: 0 0 16px; line-height: 1.8; }
.mjt-article-body ul,
.mjt-article-body ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.8; }
.mjt-article-body li { margin-bottom: 6px; }
.mjt-article-body img { border-radius: var(--mjt-radius-lg); }
.mjt-article-body table { width: 100%; }

/* == SEARCH TUNING == */

.mjt-header-search .elementor-search-form__container,
.mjt-hero-search .elementor-search-form__container {
  border: 1px solid var(--mjt-border);
  overflow: hidden;
}
.mjt-hero-search .elementor-search-form__container {
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--mjt-shadow-lg);
}
.mjt-header-search input[type="search"]::placeholder,
.mjt-hero-search input[type="search"]::placeholder {
  color: var(--mjt-muted-light);
  opacity: 1;
}
.mjt-header-search .elementor-search-form__submit,
.mjt-hero-search .elementor-search-form__submit {
  border-radius: 0;
  transition: background-color var(--mjt-duration) var(--mjt-ease);
}

/* == MEGA PANEL SIZING == */

.mjt-mega-panel,
.mjt-mega-panel .e-con { min-width: 0; }
.mjt-mega-panel > .e-con:first-child { align-items: stretch; }
.mjt-mega-panel .elementor-image-box-title { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1024px) {
  .mjt-mega-panel > .e-con:first-child { flex-wrap: wrap; }
}

/* == A11Y + MOBILE TUNING == */

/*
 * The hamburger must meet the 44px touch target, but Elementor owns its
 * display: it is `none` on desktop and `flex` only below the breakpoint.
 * Never set `display` here or the toggle leaks onto desktop.
 */
.mjt-mega .e-n-menu-toggle {
  min-width: var(--mjt-tap-target);
  min-height: var(--mjt-tap-target);
  align-items: center;
  justify-content: center;
  border-radius: var(--mjt-radius-md);
}
.mjt-mega .e-n-menu-toggle:hover { background-color: var(--mjt-surface-alt); }

/* Utility links in the top bar get a comfortable hit area on touch. */
@media (max-width: 1024px) {
  .mjt-topbar-list .elementor-icon-list-item > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* Stacked calls to action read better at one consistent width. */
@media (max-width: 767px) {
  .mjt-btn-primary,
  .mjt-btn-secondary,
  .mjt-btn-accent,
  .mjt-btn-whatsapp,
  .mjt-btn-marketplace,
  .mjt-btn-outline-light { width: 100%; }

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

  /* Two product cards per row still need a usable button row. */
  .mjt-card-product .mjt-btn-secondary,
  .mjt-card-product .mjt-btn-accent { width: auto; }
}

/* Popular-search chips: keep them tappable. */
.mjt-hero-chips .elementor-button { min-height: 38px; }

/* == HOMEPAGE V2 == */

/* ---------- Hero ---------- */
.mjt-hero-img img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.38));
}
.mjt-hero-chips .elementor-icon-list-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--mjt-radius-pill);
  padding: 7px 14px;
}

/* ---------- Trust bar ---------- */
.mjt-trust-row > .elementor-widget { flex: 1 1 calc(25% - 21px); min-width: 210px; }
.mjt-trust-item .elementor-icon-box-icon { margin-bottom: 0; }
.mjt-trust-item .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 14px; }
.mjt-trust-item .elementor-icon-box-title { margin: 0 0 3px; }

/* ---------- Brand strip ---------- */
.mjt-logo-grid > .e-con { flex: 0 0 calc(12.5% - 12.25px); }
.mjt-logo-tile { 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-logo-tile:hover {
  border-color: rgba(0,91,187,.32) !important;
  box-shadow: var(--mjt-shadow-md);
  transform: translateY(-2px);
}
.mjt-logo-img img {
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter var(--mjt-duration) var(--mjt-ease), opacity var(--mjt-duration) var(--mjt-ease);
}
.mjt-logo-tile:hover .mjt-logo-img img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1024px) { .mjt-logo-grid > .e-con { flex: 0 0 calc(25% - 10.5px); } }
@media (max-width: 767px)  { .mjt-logo-grid > .e-con { flex: 0 0 calc(33.333% - 9.34px); } }
@media (max-width: 480px)  { .mjt-logo-grid > .e-con { flex: 0 0 calc(50% - 7px); } }

/* ---------- Category cards ---------- */
.mjt-cat-card { 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-cat-card:hover {
  border-color: rgba(0,91,187,.30) !important;
  box-shadow: var(--mjt-shadow-hover-blue);
  transform: translateY(-3px);
}
.mjt-cat-media { overflow: hidden; }
.mjt-cat-img img {
  height: 132px;
  width: 100%;
  object-fit: contain;
  transition: transform 420ms var(--mjt-ease);
}
.mjt-cat-card:hover .mjt-cat-img img { transform: scale(1.05); }
.mjt-cat-cta { transition: transform var(--mjt-duration) var(--mjt-ease); }
.mjt-cat-card:hover .mjt-cat-cta { transform: translateX(3px); }

/* ---------- Why / Solution cards ---------- */
.mjt-why-card,
.mjt-sol-card { 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-why-card:hover,
.mjt-sol-card:hover {
  border-color: rgba(0,91,187,.30) !important;
  box-shadow: var(--mjt-shadow-lg);
  transform: translateY(-3px);
}
.mjt-sol-card .elementor-icon { flex: none; }

/* ---------- Stats ---------- */
.mjt-stat .elementor-counter-number-wrapper { justify-content: center; }
.mjt-stat .elementor-counter-title { text-align: center; margin-top: 4px; }

/* ---------- FAQ ---------- */
.mjt-faq .elementor-accordion-item {
  border-radius: var(--mjt-radius-lg);
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--mjt-border) !important;
}
.mjt-faq .elementor-tab-title { transition: background-color var(--mjt-duration) var(--mjt-ease); }
.mjt-faq .elementor-tab-title:hover { background-color: var(--mjt-primary-50) !important; }
.mjt-faq .elementor-tab-title.elementor-active { border-bottom: 0 !important; }

/* ---------- Inline text links ---------- */
.mjt-link-btn .elementor-button { padding-inline: 0 !important; }
.mjt-link-btn .elementor-button-icon { transition: transform var(--mjt-duration) var(--mjt-ease); }
.mjt-link-btn .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---------- Promo banners ---------- */
.mjt-promo-a, .mjt-promo-b { position: relative; isolation: isolate; }

/* Whole-card links must not steal the pointer from real buttons inside. */
.mjt-cat-card > a.elementor-element-overlay,
.mjt-sol-card > a.elementor-element-overlay { border-radius: inherit; }

/* Flex children must be allowed to shrink below their content width. */
.mjt-hero .e-con,
.mjt-hero .e-con-inner { min-width: 0; }
.mjt-hero-img img { max-height: 460px; width: auto; margin-inline: auto; }
@media (max-width: 1024px) { .mjt-hero-img img { max-height: 340px; } }

/* == CATEGORY TABS == */

/* ==========================================================================
   SCROLLABLE CATEGORY TABS
   Native Elementor Loop Filter, restyled as marketplace-style pills.
   Markup: <search.e-filter> > <button.e-filter-item data-filter="slug">
   ========================================================================== */

/* --- Scroller ------------------------------------------------------------ */
.mjt-cat-tabs .e-filter {
  gap: 10px;
  padding-block: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soft fade at both edges hints that the row keeps going. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.mjt-cat-tabs .e-filter::-webkit-scrollbar { display: none; }

/* "Semua Produk" is appended last by the widget; pull it to the front. */
.mjt-cat-tabs .e-filter-item[data-filter="__all"] { order: -1; }

/* --- Pills --------------------------------------------------------------- */
.mjt-cat-tabs .e-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;           /* the widget ships content-box */
  min-height: 44px;                 /* comfortable touch target */
  padding: 10px 18px;
  border: 1px solid var(--mjt-border);
  border-radius: var(--mjt-radius-pill);
  background-color: var(--mjt-surface-alt);
  color: var(--mjt-body-strong);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--mjt-ease),
              color 200ms var(--mjt-ease),
              border-color 200ms var(--mjt-ease),
              box-shadow 200ms var(--mjt-ease),
              transform 200ms var(--mjt-ease);
}

.mjt-cat-tabs .e-filter-item:hover {
  background-color: var(--mjt-primary);
  border-color: var(--mjt-primary);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--mjt-shadow-primary);
}

.mjt-cat-tabs .e-filter-item[aria-pressed="true"] {
  background-color: #16A34A;
  border-color: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(22,163,74,.28);
}
.mjt-cat-tabs .e-filter-item[aria-pressed="true"]:hover {
  background-color: #15803D;
  border-color: #15803D;
  box-shadow: 0 6px 20px rgba(22,163,74,.34);
}

.mjt-cat-tabs .e-filter-item:focus-visible {
  outline: 2px solid var(--mjt-primary);
  outline-offset: 2px;
}

/* --- Filtered grid: fade the new results in ------------------------------ */
@keyframes mjtFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mjt-filter-grid .e-loop-item {
  animation: mjtFadeUp 320ms var(--mjt-ease) both;
}
.mjt-filter-grid .e-loop-item:nth-child(2) { animation-delay: 40ms; }
.mjt-filter-grid .e-loop-item:nth-child(3) { animation-delay: 80ms; }
.mjt-filter-grid .e-loop-item:nth-child(4) { animation-delay: 120ms; }
.mjt-filter-grid .e-loop-item:nth-child(5) { animation-delay: 160ms; }
.mjt-filter-grid .e-loop-item:nth-child(6) { animation-delay: 200ms; }
.mjt-filter-grid .e-loop-item:nth-child(7) { animation-delay: 240ms; }
.mjt-filter-grid .e-loop-item:nth-child(8) { animation-delay: 280ms; }

/* Elementor dims the grid while the AJAX request is in flight. */
.mjt-filter-grid.e-loading,
.mjt-filter-grid [class*="loading"] { transition: opacity 200ms var(--mjt-ease); }

@media (max-width: 1024px) {
  .mjt-cat-tabs .e-filter-item { font-size: 13px; padding: 10px 16px; }
}
@media (max-width: 767px) {
  .mjt-cat-sticky { margin-inline: -16px; border-radius: 0; }
  .mjt-cat-tabs .e-filter { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mjt-filter-grid .e-loop-item { animation: none; }
  .mjt-cat-tabs .e-filter { scroll-behavior: auto; }
}

/* == CATEGORY TAB ICONS == */

/* --- Icons: inline SVG masks. Elementor 4 renders icons as SVG, so the
       Font Awesome webfont is never loaded - a mask keeps this weightless
       and lets the glyph inherit the pill's text colour. --------------- */
.mjt-cat-tabs .e-filter-item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  opacity: .9;
  -webkit-mask: var(--mjt-cat-icon) center / contain no-repeat;
          mask: var(--mjt-cat-icon) center / contain no-repeat;
  transition: opacity 200ms var(--mjt-ease);
}
.mjt-cat-tabs .e-filter-item { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item:hover::before,
.mjt-cat-tabs .e-filter-item[aria-pressed="true"]::before { opacity: 1; }

.mjt-cat-tabs .e-filter-item[data-filter="__all"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="pompa-industri"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M4 20V9l5 3V9l5 3V4h6v16'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="pompa-fluid-handling"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.5 8.2a7.8 7.8 0 1 0 11 0z'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="pompa-celup"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.5 8.2a7.8 7.8 0 1 0 11 0z'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M9.5 13.5 12 16l2.5-2.5'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="submersible-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.5 8.2a7.8 7.8 0 1 0 11 0z'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M9.5 13.5 12 16l2.5-2.5'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="booster-pumps"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13a9 9 0 1 0-18 0'/%3E%3Cpath d='M12 13l4.5-3.5'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="pressure-managers"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13a9 9 0 1 0-18 0'/%3E%3Cpath d='M12 13l4.5-3.5'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="multistage-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5z'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="centrifugal-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v6h-6'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="centrifugal-close-couple-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="centrifugal-stainless-steel-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="motor-drive"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="sewage-pump"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19H4.8a2 2 0 0 1-1.7-3l1.6-2.7'/%3E%3Cpath d='m6.4 9.8 2-3.4a2 2 0 0 1 3.4 0l1.3 2.2'/%3E%3Cpath d='M17 14h2.2a2 2 0 0 1 1.7 3l-1.5 2.5a2 2 0 0 1-1.7 1H10'/%3E%3Cpath d='m12 22 2-3-2-3'/%3E%3Cpath d='m5 11 2 3'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="slurry-pumps"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.5 8.2a7.8 7.8 0 1 0 11 0z'/%3E%3Cpath d='M6 15c2-1.5 4-1.5 6 0s4 1.5 6 0'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="peralatan-kolam-renang"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9c2.2-1.8 4.4-1.8 6.6 0S13 10.8 15.2 9s4.6-1.8 6.8 0'/%3E%3Cpath d='M2 15c2.2-1.8 4.4-1.8 6.6 0s4.4 1.8 6.6 0 4.6-1.8 6.8 0'/%3E%3Cpath d='M2 21c2.2-1.8 4.4-1.8 6.6 0'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="water-treatment"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8v7l-4 2v-9z'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="cartridge-filter"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8v7l-4 2v-9z'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="valve-actuator"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3'/%3E%3Cpath d='M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="panel-kelistrikan"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="kompresor-vacuum"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10a3 3 0 1 0-3-3'/%3E%3Cpath d='M3 13h14a3 3 0 1 1-3 3'/%3E%3Cpath d='M3 18h8a2.5 2.5 0 1 1-2.5 2.5'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="pneumatik-hidraulik"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v4H4M16 3v4h4M8 21v-4H4M16 21v-4h4'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="instrumentasi"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3C/svg%3E"); }
.mjt-cat-tabs .e-filter-item[data-filter="safety-k3"] { --mjt-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }

/* The header and its dropdowns must always sit above the sticky category bar. */
.mjt-header,
.mjt-header.elementor-sticky--active { z-index: 200 !important; }

/* == CATEGORY TABS STICKY (scoped) == */

/* ==========================================================================
   Sticky is scoped to the category section only.
   position: sticky resolves against the nearest scrolling ancestor and stops
   at the bottom of its own parent - so the bar releases the moment the
   product grid ends, and the next section is never covered.
   ========================================================================== */

:root { --mjt-header-h: 152px; }

.mjt-cat-sticky {
  position: sticky;
  top: var(--mjt-header-h);
  z-index: 20;
  align-self: stretch;
  background-color: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mjt-border);
  box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .30);
  transition: box-shadow 200ms var(--mjt-ease);
}

/* An ancestor with a clipping overflow would silently kill position: sticky. */
.mjt-cat-section,
.mjt-cat-section > .e-con-inner,
.mjt-cat-section .e-con,
.mjt-cat-section .e-con-inner { overflow: visible; }

@media (max-width: 767px) {
  .mjt-cat-sticky { margin-inline: -16px; border-radius: 0; }
  .mjt-cat-tabs .e-filter { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mjt-cat-sticky { transition: none; }
}

/* == BLOCKSY CARD TEST == */

/* Blocksy sizes its product grid from [data-products], an attribute its own
   archive template adds. Elementor's Products widget renders the plain
   WooCommerce loop, so the columns have to be restated here. */
.mjt-blocksy-cards ul.products {
  --shop-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) { .mjt-blocksy-cards ul.products { --shop-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .mjt-blocksy-cards ul.products { --shop-columns: repeat(2, minmax(0, 1fr)); } }

.mjt-blocksy-cards ul.products li.product { margin: 0; }

/* == PRODUCT CARD v3 == */

.mjt-card-product {
  transition: transform 300ms cubic-bezier(.2,.7,.2,1),
              box-shadow 300ms cubic-bezier(.2,.7,.2,1),
              border-color 300ms var(--mjt-ease);
}
.mjt-card-product:hover {
  transform: translateY(-6px);
  border-color: rgba(0,91,187,.35) !important;
  box-shadow: 0 20px 40px -16px rgba(0,91,187,.35),
              0 4px 12px -6px rgba(15,23,42,.12);
}

/* Media: edge to edge, square, no padding */
.mjt-card-media {
  position: relative;
  display: block !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background-color: #FFFFFF;
}
.mjt-card-media > .elementor-widget-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.mjt-prod-thumb .elementor-widget-container,
.mjt-prod-thumb figure,
.mjt-prod-thumb a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.mjt-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.mjt-card-product:hover .mjt-prod-thumb img { transform: scale(1.07); }

/* A touch of shade on hover so the image reads as interactive */
.mjt-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 55%, rgba(15,23,42,.14) 100%);
  transition: opacity 300ms var(--mjt-ease);
}
.mjt-card-product:hover .mjt-card-media::after { opacity: 1; }

.mjt-card-product:hover .mjt-prod-title a { color: var(--mjt-primary); }

/* Stock ribbon */
.mjt-sold-out { display: none; }
.outofstock .mjt-sold-out {
  display: block;
  background: #E11D48;
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: 0 0 var(--mjt-radius-md) 0;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(225,29,72,.28);
}
.outofstock .mjt-prod-thumb img { opacity: .55; }

.mjt-prod-cat { text-transform: none; }
.mjt-card-product .mjt-price .price { color: var(--mjt-primary); }
.mjt-card-product .mjt-price ins { text-decoration: none; }
.mjt-card-product .mjt-price-note,
.e-loop-item .mjt-price-note { display: none !important; }
.mjt-card-product .woocommerce-product-rating { display: none; }

/* Action row: Penawaran 70% + WhatsApp 30%, always one line */
.mjt-card-actions {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
}
.mjt-card-actions .mjt-act-primary { flex: 0 0 68%; max-width: 68%; width: auto !important; }
.mjt-card-actions .mjt-act-wa { flex: 1 1 auto; min-width: 0; width: auto !important; }
.mjt-card-actions .elementor-button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  padding-inline: 8px;
}
.mjt-act-wa .elementor-button-content-wrapper { justify-content: center; }
.mjt-act-wa .elementor-button-text { display: none; }
.mjt-act-wa .elementor-button-icon { margin: 0 !important; font-size: 17px; line-height: 1; }
.mjt-act-wa .elementor-button-icon svg { width: 17px; height: 17px; }

@media (max-width: 767px) {
  .mjt-card-product .mjt-price .price,
  .mjt-card-product .mjt-price bdi { font-size: 15px; white-space: nowrap; }
  .mjt-card-actions .elementor-button { min-height: 44px; font-size: 12px; }

  /* Narrow cards: pin the WhatsApp tap target at 44px and let the
     primary action absorb whatever width is left. */
  .mjt-card-actions .mjt-act-wa { flex: 0 0 44px; }
  .mjt-card-actions .mjt-act-primary { flex: 1 1 auto; max-width: none; }

  .mjt-card-product:hover { transform: none; }
}

@media (max-width: 359px) {
  .mjt-product-grid .elementor-grid,
  .elementor-widget-loop-grid .elementor-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mjt-card-product,
  .mjt-prod-thumb img { transition: none; }
  .mjt-card-product:hover { transform: none; }
  .mjt-card-product:hover .mjt-prod-thumb img { transform: none; }
}

/* == PRODUCT CARD v4 == */

/* --- Card shell: 10px radius, soft blue hover, thin premium shadow ------ */
.mjt-card-product {
  border-radius: 10px !important;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1),
              box-shadow 280ms cubic-bezier(.2,.7,.2,1),
              border-color 280ms var(--mjt-ease);
}
.mjt-card-product:hover {
  transform: translateY(-4px);
  border-color: rgba(53,101,180,.30) !important;
  box-shadow: 0 10px 28px -14px rgba(15,23,42,.22),
              0 2px 6px -3px rgba(15,23,42,.07);
}
.mjt-card-product:hover .mjt-prod-thumb img { transform: scale(1.05); }
.mjt-card-media::after { background: linear-gradient(180deg, rgba(15,23,42,0) 62%, rgba(15,23,42,.10) 100%); }

/* --- One-line title and category, so every card is the same height ----- */
.mjt-clamp-1,
.mjt-prod-title,
.mjt-prod-cat {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mjt-prod-title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjt-card-product .mjt-prod-title { min-height: 21px; }
.mjt-card-product .mjt-prod-cat { min-height: 18px; }

/* --- Request-quote button ---------------------------------------------- */
.mjt-btn-quote .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #3565B4;
  color: #FFFFFF;
  border: 0;
  border-radius: var(--mjt-radius-md);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 220ms var(--mjt-ease),
              box-shadow 220ms var(--mjt-ease);
}
.mjt-btn-quote .elementor-button:hover,
.mjt-btn-quote .elementor-button:focus {
  background-color: #1C426D;
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(28,66,109,.45);
}
.mjt-act-wa .elementor-button { border-radius: var(--mjt-radius-md); }

/* --- 5 / 4 / 2 grid ----------------------------------------------------- */
.mjt-product-grid .elementor-grid { gap: 16px; }

@media (max-width: 1024px) {
  .mjt-card-actions .elementor-button { font-size: 12px; padding-inline: 6px; }
}
@media (max-width: 767px) {
  .mjt-card-product .mjt-prod-title { font-size: 13px; }
  .mjt-card-actions .mjt-act-wa { flex: 0 0 44px; }
  .mjt-card-actions .mjt-act-primary { flex: 1 1 auto; max-width: none; }
  .mjt-card-product:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mjt-card-product, .mjt-prod-thumb img, .mjt-btn-quote .elementor-button { transition: none; }
  .mjt-card-product:hover { transform: none; }
  .mjt-card-product:hover .mjt-prod-thumb img { transform: none; }
}

/* Price row keeps a constant height whether or not a price exists. */
.mjt-card-product .mjt-price {
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mjt-card-product .mjt-price > .elementor-widget-container { width: 100%; }
.mjt-card-product .mjt-price .price { line-height: 1.2; }
.mjt-price-ask {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--mjt-muted);
}

/* == GRID COLUMN GUARD == */

/* A grid track of 1fr is really minmax(auto, 1fr), so the nowrap product
   title was forcing its column wider instead of ellipsing. Allowing the
   items to shrink below their content width restores equal columns. */
.mjt-product-grid .elementor-grid > *,
.elementor-widget-loop-grid .elementor-grid > * { min-width: 0; }

.mjt-card-product,
.mjt-card-product .e-con,
.mjt-card-product .e-con-inner,
.mjt-card-product .elementor-widget { min-width: 0; max-width: 100%; }

.mjt-prod-title,
.mjt-prod-cat { max-width: 100%; }

/* Restate the tracks so nothing can fall back to content sizing. */
.mjt-product-grid .elementor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1024px) { .mjt-product-grid .elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 767px)  { .mjt-product-grid .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 359px)  { .mjt-product-grid .elementor-grid { grid-template-columns: 1fr !important; } }

/* Article grid keeps its own 3-column rhythm. */
.mjt-post-grid .elementor-grid > * { min-width: 0; }