/* =============================================================================
   MICLIFT DESIGN SYSTEM — «صنعتی دقیق» / Industrial Precision
   RTL-first design layer for متین یدک (miclift.co)
   Steel-ink neutrals + safety-amber CTA. Self-hosted Vazirmatn variable font.
   ========================================================================== */

/* ---- 1. Typeface ---------------------------------------------------------
   Vazirmatn variable (100–900), Persian + Latin.
   The theme references «dana» and «IRANSans» which were requested from
   Google Fonts (they don't exist there → Times fallback). Aliasing those
   family names to the local file repairs typography everywhere at once. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
                 U+0000-00FF, U+2000-206F, U+20A0-20CF, U+FEFF;
}
@font-face {
  font-family: 'dana';
  src: url('../fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- 2. Tokens ---------------------------------------------------------- */
:root {
  /* ink & steel neutrals */
  --mx-ink:        #15171C;
  --mx-steel-900:  #1E222B;
  --mx-steel-700:  #353B49;
  --mx-steel-500:  #59617436;
  --mx-text:       #1C2027;
  --mx-text-soft:  #4A5160;
  --mx-text-faint: #6C7484;
  /* surfaces */
  --mx-bg:         #F4F5F7;
  --mx-card:       #FFFFFF;
  --mx-line:       #E3E6EC;
  --mx-line-soft:  #EEF0F4;
  /* safety amber — CTA only */
  --mx-amber:      #FFB400;
  --mx-amber-deep: #B97800;
  --mx-on-amber:   #1A1300;
  /* semantic */
  --mx-blue:       #135FB0;
  --mx-green:      #167A48;
  --mx-red:        #C22F2B;
  /* shape & motion */
  --mx-r-lg: 14px;
  --mx-r-md: 10px;
  --mx-r-sm: 8px;
  --mx-shadow-1: 0 1px 2px rgba(21,23,28,.05), 0 1px 4px rgba(21,23,28,.05);
  --mx-shadow-2: 0 6px 18px -4px rgba(21,23,28,.14), 0 2px 6px rgba(21,23,28,.06);
  --mx-ease: cubic-bezier(.2,.7,.3,1);
  --mx-font: 'Vazirmatn', 'dana', 'IRANSans', Tahoma, sans-serif;
}

/* ---- 3. Base typography (Persian-tuned) ---------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body,
button, input, select, textarea, optgroup,
.woocommerce, .price, .amount, h1, h2, h3, h4, h5, h6 {
  font-family: var(--mx-font);
}
body {
  font-size: 16px;
  line-height: 1.95;            /* Persian script needs a taller leading */
  color: var(--mx-text);
  font-feature-settings: 'ss01' on;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--mx-ink);
  text-wrap: balance;
}
p { margin-block-end: 1.1em; }
::selection { background: var(--mx-amber); color: var(--mx-on-amber); }

/* prices, counters, phone numbers — tabular digits stop layout wobble */
.price, .amount, .mx-tabular, .woocommerce-Price-amount,
.cz_counter, bdi[dir="ltr"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}

/* ---- 4. Accessibility primitives ----------------------------------------- */
.mx-skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 100000;
  transform: translateY(-200%);
  background: var(--mx-ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--mx-r-sm);
  font-weight: 700;
  transition: transform .2s var(--mx-ease);
}
.mx-skip-link:focus { transform: translateY(0); color: #fff; }

:focus-visible {
  outline: 3px solid var(--mx-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
a, button, .button, [role="button"], input[type="submit"], select, summary {
  touch-action: manipulation;
}
a { transition: color .18s var(--mx-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 5. Buttons ----------------------------------------------------------- */
.button, button[type="submit"], input[type="submit"],
.woocommerce .button, .woocommerce button.button,
a.checkout-button, .single_add_to_cart_button,
.ff-btn-submit, .fluentform .ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 26px;
  border-radius: var(--mx-r-sm);
  border: 2px solid transparent;
  background: var(--mx-ink);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s var(--mx-ease), color .18s var(--mx-ease),
              border-color .18s var(--mx-ease), transform .12s var(--mx-ease),
              box-shadow .18s var(--mx-ease);
}
.button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.woocommerce .button:hover, a.checkout-button:hover,
.ff-btn-submit:hover, .fluentform .ff-btn:hover {
  background: var(--mx-steel-700);
  color: #fff;
  box-shadow: var(--mx-shadow-2);
  transform: translateY(-1px);
}
.button:active, .woocommerce .button:active { transform: translateY(0) scale(.985); }

/* primary conversions = amber */
a.checkout-button, .single_add_to_cart_button,
.woocommerce #payment #place_order,
.ff-btn-submit,
ul.products li.product .button:hover {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
  border-color: var(--mx-amber);
}
a.checkout-button:hover, .single_add_to_cart_button:hover,
.woocommerce #payment #place_order:hover, .ff-btn-submit:hover {
  background: #FFC02E;
  color: var(--mx-on-amber);
}
.button[disabled], button[disabled], .woocommerce .button.disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ---- 6. Header ------------------------------------------------------------ */
#site_header.page_header {
  background: linear-gradient(180deg, var(--mx-ink) 0%, var(--mx-steel-900) 100%);
}
#site_header a { color: #E8EAEF; }
#site_header a:hover { color: var(--mx-amber); }
#site_header .sf-menu > li > a {
  font-weight: 700;
  font-size: 15px;
  position: relative;
}
#site_header .sf-menu > li > a::after {
  content: '';
  position: absolute;
  inset-inline: 14px;
  inset-block-end: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--mx-amber);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--mx-ease);
}
#site_header .sf-menu > li > a:hover::after,
#site_header .sf-menu > li.current-menu-item > a::after { transform: scaleX(1); }
#site_header .sf-menu li li a { color: var(--mx-text); }
#site_header .sf-menu li li a:hover { color: var(--mx-amber-deep); }

/* dropdown panels */
#site_header .sf-menu ul {
  border-radius: var(--mx-r-md);
  box-shadow: var(--mx-shadow-2);
  border: 1px solid var(--mx-line);
  overflow: hidden;
}

/* cart count bubble */
#site_header .cz_cart_count, .cz_cart_count {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
  font-weight: 800;
}

/* ---- 7. Breadcrumbs -------------------------------------------------------- */
.mx-breadcrumbs {
  max-width: 1200px;
  margin-inline: auto;
  padding: 14px 20px 0;
  font-size: 13.5px;
}
.mx-breadcrumbs .rank-math-breadcrumb a { color: var(--mx-text-soft); }
.mx-breadcrumbs .rank-math-breadcrumb a:hover { color: var(--mx-amber-deep); }
.mx-breadcrumbs .rank-math-breadcrumb .separator {
  margin-inline: 8px;
  color: var(--mx-text-faint);
}
.mx-breadcrumbs .rank-math-breadcrumb .last { color: var(--mx-ink); font-weight: 600; }

/* ---- 8. Product cards (archives) ------------------------------------------ */
ul.products li.product,
ul.products li.product-category {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  overflow: hidden;
  box-shadow: var(--mx-shadow-1);
  transition: transform .22s var(--mx-ease), box-shadow .22s var(--mx-ease),
              border-color .22s var(--mx-ease);
  padding-block-end: 18px;
}
ul.products li.product:hover,
ul.products li.product-category:hover {
  transform: translateY(-5px);
  box-shadow: var(--mx-shadow-2);
  border-color: color-mix(in srgb, var(--mx-amber) 55%, var(--mx-line));
}
ul.products li.product img,
ul.products li.product-category img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: 0;
  transition: transform .35s var(--mx-ease);
}
ul.products li.product:hover img { transform: scale(1.04); }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--mx-ink);
  padding-inline: 16px;
  margin-block: 12px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
}
ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 16px;
  font-weight: 800;
  padding-inline: 16px;
  margin-block: 14px 6px;
}
ul.products li.product-category .count {
  background: var(--mx-line-soft);
  color: var(--mx-text-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  margin-inline-start: 6px;
}
ul.products li.product .price {
  color: var(--mx-amber-deep);
  font-weight: 800;
  font-size: 16px;
  padding-inline: 16px;
  display: block;
}
ul.products li.product .price del {
  color: var(--mx-text-faint);
  font-weight: 500;
  font-size: 13px;
  margin-inline-end: 8px;
}
ul.products li.product .button {
  margin: 12px 16px 0;
  width: calc(100% - 32px);
  min-height: 44px;
  background: transparent;
  color: var(--mx-ink);
  border-color: var(--mx-steel-700);
}
.woocommerce span.onsale, span.onsale {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  min-width: 0;
  min-height: 0;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  box-shadow: var(--mx-shadow-1);
}

/* shop toolbar */
.woocommerce-result-count { color: var(--mx-text-soft); font-size: 14px; }
.woocommerce-ordering select, select {
  border: 1.5px solid var(--mx-line);
  border-radius: var(--mx-r-sm);
  min-height: 44px;
  padding-inline: 14px;
  background-color: var(--mx-card);
  color: var(--mx-text);
}

/* pagination */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: inline-flex;
  gap: 8px;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mx-r-sm);
  border: 1.5px solid var(--mx-line);
  background: var(--mx-card);
  color: var(--mx-text);
  font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--mx-amber);
  background: #FFF7E0;
  color: var(--mx-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mx-ink);
  border-color: var(--mx-ink);
  color: #fff;
}

/* ---- 9. Single product ----------------------------------------------------- */
.woocommerce-product-gallery {
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  overflow: hidden;
  background: var(--mx-card);
}
.woocommerce-product-gallery .flex-control-thumbs { gap: 8px; padding: 10px; }
.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: var(--mx-r-sm);
  border: 2px solid transparent;
  opacity: .6;
  transition: opacity .18s, border-color .18s;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--mx-amber);
}

.summary.entry-summary .product_title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.6;
}
.summary.entry-summary .price {
  font-size: 24px;
  font-weight: 800;
  color: var(--mx-amber-deep);
}
.summary.entry-summary .woocommerce-product-details__short-description {
  color: var(--mx-text-soft);
  font-size: 15px;
  border-inline-start: 3px solid var(--mx-amber);
  padding-inline-start: 14px;
  margin-block: 14px;
}
.product_meta {
  border-block-start: 1px dashed var(--mx-line);
  padding-block-start: 14px;
  font-size: 13.5px;
  color: var(--mx-text-faint);
}
.product_meta a { color: var(--mx-blue); }

/* quote CTA + trust strip (injected by plugin) */
.mx-product-cta {
  margin-block: 18px;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  background: linear-gradient(135deg, #FFFDF5 0%, #FFF6DC 100%);
  padding: 16px;
}
.mx-cta-call {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--mx-amber);
  color: var(--mx-on-amber) !important;
  border-radius: var(--mx-r-md);
  padding: 12px 18px;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: var(--mx-shadow-1);
  transition: transform .15s var(--mx-ease), box-shadow .2s var(--mx-ease);
}
.mx-cta-call:hover { transform: translateY(-2px); box-shadow: var(--mx-shadow-2); }
.mx-cta-call svg { flex: none; }
.mx-cta-call strong { display: block; font-size: 16px; }
.mx-cta-call bdi { font-weight: 800; letter-spacing: .5px; }
.mx-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.mx-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-steel-700);
}
.mx-trust svg { color: var(--mx-green); flex: none; }

/* tabs → segmented control */
.woocommerce-tabs ul.wc-tabs, .woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 6px;
  border-block-end: 2px solid var(--mx-line);
  padding: 0;
  margin-block-end: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 20px;
  font-weight: 700;
  color: var(--mx-text-soft);
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
  display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mx-ink);
  border-block-end-color: var(--mx-amber);
}
.woocommerce-Tabs-panel {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-block-start: 0;
  border-radius: 0 0 var(--mx-r-md) var(--mx-r-md);
  padding: 22px !important;
}

/* related products heading */
.related.products > h2, .upsells.products > h2 {
  font-size: 22px;
  position: relative;
  padding-inline-start: 14px;
}
.related.products > h2::before, .upsells.products > h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 6px;
  width: 5px;
  border-radius: 3px;
  background: var(--mx-amber);
}

/* ---- 10. Forms (Woo + Fluent Forms) ---------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], textarea,
.fluentform .ff-el-form-control {
  border: 1.5px solid var(--mx-line);
  border-radius: var(--mx-r-sm);
  background: var(--mx-card);
  color: var(--mx-text);
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;               /* prevents iOS zoom */
  transition: border-color .15s var(--mx-ease), box-shadow .15s var(--mx-ease);
}
textarea { min-height: 120px; }
input:focus, textarea:focus, .fluentform .ff-el-form-control:focus {
  border-color: var(--mx-amber);
  box-shadow: 0 0 0 3px rgba(255,180,0,.25);
  outline: none;
}
label, .fluentform .ff-el-input--label label {
  font-weight: 700;
  font-size: 14px;
  color: var(--mx-steel-700);
}
.required { color: var(--mx-red); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--mx-red); }
.fluentform .error.text-danger, .woocommerce-error {
  color: var(--mx-red);
  font-size: 13px;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  border-radius: var(--mx-r-md);
  border-block-start-width: 4px;
  background: var(--mx-card);
  box-shadow: var(--mx-shadow-1);
}
.woocommerce-message { border-block-start-color: var(--mx-green); }
.woocommerce-info { border-block-start-color: var(--mx-blue); }
.woocommerce-error { border-block-start-color: var(--mx-red); }

.quantity .qty {
  min-height: 48px;
  border-radius: var(--mx-r-sm);
  border: 1.5px solid var(--mx-line);
  text-align: center;
  font-weight: 700;
}

/* ---- 11. Cart & checkout ---------------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--mx-card);
}
.woocommerce table.shop_table th {
  background: var(--mx-line-soft);
  color: var(--mx-steel-700);
  font-weight: 800;
  font-size: 13.5px;
  padding: 14px 16px;
}
.woocommerce table.shop_table td {
  border-block-start: 1px solid var(--mx-line-soft);
  padding: 14px 16px;
  vertical-align: middle;
}
.woocommerce table.shop_table td.product-name a { color: var(--mx-ink); font-weight: 700; }
.woocommerce table.shop_table img { border-radius: var(--mx-r-sm); width: 64px; }
.woocommerce a.remove {
  color: var(--mx-red) !important;
  width: 32px; height: 32px;
  line-height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-weight: 400;
  transition: background .15s, color .15s;
}
.woocommerce a.remove:hover { background: var(--mx-red); color: #fff !important; }

.cart_totals, #order_review {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 6px 18px 18px;
  box-shadow: var(--mx-shadow-1);
}
.cart_totals h2, #order_review_heading {
  font-size: 18px;
  border-block-end: 2px solid var(--mx-amber);
  padding-block-end: 10px;
}
.woocommerce-checkout #payment {
  background: var(--mx-line-soft);
  border-radius: var(--mx-r-md);
}
.woocommerce form .form-row label { display: block; margin-block-end: 4px; }

/* empty cart state */
.cart-empty.woocommerce-info {
  text-align: center;
  font-size: 17px;
  padding: 36px 20px;
}
.return-to-shop { text-align: center; }
.return-to-shop .button {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
  font-size: 16px;
  padding-inline: 36px;
}

/* ---- 12. My account ---------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--mx-r-sm);
  color: var(--mx-text-soft);
  font-weight: 600;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--mx-line-soft); color: var(--mx-ink); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--mx-ink);
  color: #fff;
}
.woocommerce-MyAccount-content {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 24px;
}

/* ---- 13. Footer --------------------------------------------------------------- */
#site_footer.page_footer {
  background: var(--mx-ink);
  color: #B9BFCB;
}
#site_footer a { color: #D6DAE2; }
#site_footer a:hover { color: var(--mx-amber); }
#site_footer h4, #site_footer h5, #site_footer .widget-title {
  color: #fff;
  position: relative;
  padding-block-end: 10px;
}
#site_footer h4::after, #site_footer h5::after, #site_footer .widget-title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--mx-amber);
}
/* trust seals (enamad/samandehi) on a light chip so they stay legible */
#site_footer img[src*="enamad"], #site_footer img[src*="samandehi"],
img[src*="trustseal"], img[src*="samandehi"] {
  background: #fff;
  border-radius: var(--mx-r-md);
  padding: 8px;
}

/* ---- 14. Blog cards / archive readability -------------------------------------- */
article.post .entry-title a { color: var(--mx-ink); }
article.post .entry-title a:hover { color: var(--mx-amber-deep); }

/* ---- 15. Floating helpers: keep Chaty + sticky call from colliding ------------- */
.mx-sticky-call {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 9998;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--mx-line);
}
.mx-sticky-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mx-amber);
  color: var(--mx-on-amber) !important;
  border-radius: var(--mx-r-md);
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--mx-shadow-2);
}

/* ---- 16. Responsive ------------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 15.5px; }
  ul.products li.product .woocommerce-loop-product__title { font-size: 14px; min-height: 3.6em; }
  .summary.entry-summary .product_title { font-size: 20px; }
  .mx-sticky-call { display: block; }
  /* lift Chaty above the sticky bar on product pages */
  .single-product .chaty-widget, .single-product #chaty-widget,
  .single-product .chaty-outer-forms { margin-block-end: 72px; }
  .woocommerce table.shop_table_responsive tr {
    border-block-end: 1px solid var(--mx-line);
  }
  .woocommerce-Tabs-panel { padding: 16px !important; }
}

@media (min-width: 1024px) {
  .mx-breadcrumbs { padding-inline: 0; }
}

/* ---- 17. Print -------------------------------------------------------------------- */
@media print {
  #site_header, #site_footer, .mx-sticky-call, .chaty-widget { display: none !important; }
}

/* ---- 18. RevSlider hero CTA — amber, visible against dark imagery ------------ */
.sr7-layer[data-btn], .sr7-btn, .sr7-module a.sr7-layer,
#SR7_1_1 a.sr7-layer[href] {
  background: var(--mx-amber) !important;
  color: var(--mx-on-amber) !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  border: 0 !important;
}
#SR7_1_1 a.sr7-layer[href]:hover { background: #FFC02E !important; }

/* ---- 19. Product H1 readability — theme paints it gold-gradient ---------------- */
.single-product .summary .product_title,
.single-product h1.product_title {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--mx-ink) !important;
}

/* ---- 20. WCAG contrast + link affordance fixes (Lighthouse) -------------------- */
:root { --mx-text-faint: #5B6373; }              /* 4.9:1 on white */
.product_meta, .product_meta span { color: var(--mx-text-faint); }
.sidebar_inner .codevz-widget-title, .sidebar_inner h6,
.widget-title { color: var(--mx-ink) !important; }
/* in-content links must not rely on color alone */
.entry-content p a:not(.button), .woocommerce-Tabs-panel p a:not(.button),
.product_meta a, .textwidget p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* product meta spans — theme paints them too light; force AA */
.summary .product_meta span, .summary .product_meta,
.codevz-pm-sku span, .codevz-pm-status span, .codevz-pm-tags span,
.codevz-pm-cats span { color: #5B6373 !important; }
.summary .product_meta a { color: var(--mx-blue) !important; text-decoration: underline; text-underline-offset: 3px; }
/* footer designer-credit link readability */
.cz_elm .it_text a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   v2 — BOLD PASS: unmistakable «صنعتی دقیق» identity
   ========================================================================== */

/* ---- 21. Signature: forklift hazard-stripe accents ---------------------------- */
body::after {
  content: '';
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 8px;
  z-index: 2147483000;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    var(--mx-amber) 0 16px,
    var(--mx-ink) 16px 32px
  );
}
#site_footer.page_footer { position: relative; }
#site_footer.page_footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--mx-amber) 0 16px,
    var(--mx-ink) 16px 32px
  );
}

/* ---- 22. Surface depth: page canvas vs white cards ----------------------------- */
body { background: var(--mx-bg); }
#layout { background: var(--mx-bg); }

/* ---- 23. Primary buttons go amber sitewide (theme builder buttons too) --------- */
.cz_btn:not(.cz_btn_transparent), a.cz_btn:not(.cz_btn_transparent) {
  background: var(--mx-amber) !important;
  color: var(--mx-on-amber) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px -4px rgba(255,180,0,.55) !important;
  transition: transform .15s var(--mx-ease), box-shadow .2s var(--mx-ease) !important;
}
.cz_btn:not(.cz_btn_transparent):hover {
  background: #FFC233 !important;
  color: var(--mx-on-amber) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -6px rgba(255,180,0,.65) !important;
}

/* ---- 24. Section headers: industrial kicker treatment -------------------------- */
.cz_title .cz_title_content > h1,
.cz_title .cz_title_content > h2,
.cz_title .cz_title_content > h3,
.cz_title .cz_title_content > h4 {
  position: relative;
  font-weight: 900 !important;
  letter-spacing: 0;
}
.cz_title_shape.cz_shape_1 {
  background: var(--mx-amber) !important;
  height: 5px !important;
  border-radius: 3px !important;
}

/* ---- 25. Homepage grid cards (cz_grid_item) — strong card system --------------- */
.cz_grid_item {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  overflow: hidden;
  box-shadow: var(--mx-shadow-1);
  transition: transform .25s var(--mx-ease), box-shadow .25s var(--mx-ease),
              border-color .25s var(--mx-ease);
}
.cz_grid_item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px -10px rgba(21,23,28,.22);
  border-color: color-mix(in srgb, var(--mx-amber) 60%, var(--mx-line));
}
.cz_grid_item .cz_grid_details {
  padding: 14px 16px 16px;
}
.cz_grid_item .cz_grid_details h3,
.cz_grid_item .cz_grid_details .cz_grid_title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--mx-ink);
}
.cz_grid_item:hover .cz_grid_details h3 { color: var(--mx-amber-deep); }

/* ---- 26. Feature boxes (cz_content_box) ----------------------------------------- */
.cz_content_box {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  box-shadow: var(--mx-shadow-1);
  transition: transform .22s var(--mx-ease), box-shadow .22s var(--mx-ease);
}
.cz_content_box:hover {
  transform: translateY(-4px);
  box-shadow: var(--mx-shadow-2);
}
.cz_content_box .cz_box_front_inner { border-radius: var(--mx-r-lg); }

/* ---- 27. Counters band: amber industrial numerals -------------------------------- */
.cz_counter b, .cz_counter .cz_counter_number, .cz_counter strong {
  color: var(--mx-amber) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}
.cz_counter_after { color: var(--mx-amber) !important; }

/* ---- 28. Hero heading: heavier presence ------------------------------------------- */
.sr7-layer h1, .sr7-layer h2, #SR7_1_1 .sr7-txt {
  font-weight: 900 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

/* ---- 29. Sidebar widgets as cards --------------------------------------------------- */
.sidebar_inner > div {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 18px;
  box-shadow: var(--mx-shadow-1);
  margin-block-end: 18px;
}
.sidebar_inner .codevz-widget-title, .sidebar_inner h6 {
  font-size: 16px;
  font-weight: 900;
  padding-block-end: 10px;
  border-block-end: 3px solid var(--mx-amber);
  margin-block-end: 12px;
  display: block;
}

/* ---- 30. Tables, blockquotes, content polish ----------------------------------------- */
.entry-content blockquote {
  border-inline-start: 4px solid var(--mx-amber);
  background: var(--mx-card);
  border-radius: var(--mx-r-md);
  padding: 16px 20px;
  box-shadow: var(--mx-shadow-1);
}
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content table th {
  background: var(--mx-ink); color: #fff; padding: 10px 14px;
}
.entry-content table td { border: 1px solid var(--mx-line); padding: 10px 14px; background: var(--mx-card); }

/* ---- 31. Scroll-to-top + misc floating buttons ----------------------------------------- */
.cz_scroll_top, #scroll_top {
  background: var(--mx-amber) !important;
  color: var(--mx-on-amber) !important;
  border-radius: 12px !important;
}

/* counters: numerals carry the amber */
.cz_counter .cz_counter_num, .cz_counter .cz_counter_num_wrap i {
  color: var(--mx-amber) !important;
  font-weight: 900 !important;
}
.cz_counter .cz_counter_before, .cz_counter .cz_counter_after {
  color: #E8EAEF !important;
  font-weight: 600 !important;
}

/* =============================================================================
   v2.1 — review-panel fixes
   ========================================================================== */

/* ---- 32. Inner-page title band: ink overlay (replaces blue stock photo),
        clears the absolute header so titles stop clipping ------------------- */
.page_cover { position: relative; padding-block-start: 150px !important; }
.page_cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,23,28,.94) 0%, rgba(30,34,43,.82) 100%);
}
.page_cover > * { position: relative; z-index: 1; }
.page_cover .codevz-section-title {
  color: #fff !important;
  font-weight: 900 !important;
  display: inline-block;
  padding-block-end: 10px;
  border-block-end: 4px solid var(--mx-amber);
}
.page_cover .breadcrumbs, .page_cover .breadcrumbs a,
.page_cover .breadcrumbs span { color: #C9CEDA !important; }
.page_cover .breadcrumbs a:hover { color: var(--mx-amber) !important; }

/* ---- 33. WooCommerce archive grid → real CSS grid (fixes float flow bug
        that left the first column empty when card heights differ) ----------- */
.woocommerce ul.products, ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product, ul.products li.product-category {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
@media (max-width: 992px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 540px) {
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr; }
}

/* ---- 34. Chaty launcher: on-brand ink + amber, slight lift --------------------- */
#chaty-widget-0 svg circle[fill] { fill: var(--mx-ink) !important; }
#chaty-widget-0 .chaty-channel svg path[fill="#ffffff"] { fill: var(--mx-amber) !important; }
#chaty-widget-0 .chaty-cta, #chaty-widget-0 [class*="cta"] {
  background: var(--mx-ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ---- 35. Hide the empty "Uncategorized" term everywhere ------------------------- */
.widget_product_categories li.cat-item:has(> a[href*="uncategorized"]),
ul.products li.product-category:has(a[href*="uncategorized"]) { display: none !important; }

/* ---- 36. Homepage brand intro card: scrim so the title is legible ---------------- */
.cz_94185 .cz_box_front_inner {
  background: linear-gradient(200deg, rgba(21,23,28,.25) 0%, rgba(21,23,28,.88) 75%) !important;
  border-radius: var(--mx-r-lg);
}
.cz_94185 h2, .cz_94185 h2 strong {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.cz_94185 p { color: #E8EAEF !important; }
.cz_94185 .cz_wpe_content span[style*="#bbb"] { color: var(--mx-amber) !important; }

/* ---- 37. In-content gradient display titles on product pages → solid ink ---------- */
.single-product h1.codevz-section-title:not(.page_title *),
.single-product .entry-content h2[style*="background"] {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--mx-ink) !important;
}

/* band photo lives on a child layer — remove it outright, pure ink band
   (hero media slides carry their own inline bg and must keep it) */
.page_cover, .page_cover .page_title, .page_cover [style*="background"]:not(.mx-hero-v3--media) {
  background-image: none !important;
  background-color: var(--mx-steel-900) !important;
}
.page_cover .mx-hero-v3--media { background-color: var(--mx-steel-900) !important; }
.page_cover::before { background: linear-gradient(180deg, rgba(21,23,28,.55), rgba(21,23,28,0)); }
/* Uncategorized: cover theme widget markup too */
li.cat-item:has(> a[href*="uncategorized"]),
#woocommerce_product_categories-2 li:has(a[href*="uncategorized"]) { display: none !important; }

/* =============================================================================
   v3 — visible UI/UX pass: replacement hero + commerce surfaces
   ========================================================================== */

.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  transition: transform .16s var(--mx-ease), box-shadow .22s var(--mx-ease),
              background .2s var(--mx-ease), color .2s var(--mx-ease);
}
.mx-btn:hover { transform: translateY(-2px); text-decoration: none; }
.mx-btn--primary {
  background: var(--mx-amber);
  color: var(--mx-on-amber) !important;
  box-shadow: 0 12px 28px -14px rgba(255,180,0,.9);
}
.mx-btn--primary:hover { background: #FFC433; color: var(--mx-on-amber) !important; }
.mx-btn--ghost {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
}
.mx-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff !important; }

.mx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mx-amber);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}
.mx-kicker::before {
  content: '';
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--mx-amber) 0 8px, var(--mx-ink) 8px 16px);
}

body.mx-home-ui-v3::after { height: 10px; }
.mx-home-ui-v3 .page_cover {
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(21,23,28,.96), rgba(21,23,28,.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px) !important;
}
.mx-home-ui-v3 .page_cover::before {
  background:
    linear-gradient(90deg, rgba(255,180,0,.16), transparent 32%),
    linear-gradient(180deg, rgba(21,23,28,0) 0%, rgba(21,23,28,.88) 100%);
}
.mx-home-ui-v3 .page_cover > sr7-module,
.mx-home-ui-v3 .page_cover > rs-module,
.mx-home-ui-v3 .page_cover .rev_slider,
.mx-home-ui-v3 .page_cover .revslider-initialised {
  display: none !important;
}
.mx-hero-v3 {
  position: relative;
  z-index: 2;
  color: #fff;
  min-height: 900px;
  padding: 224px clamp(24px, 4vw, 56px) 56px;
}
.mx-hero-v3::before,
.mx-hero-v3::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.mx-hero-v3::before {
  inset-block-start: 146px;
  inset-inline-start: clamp(24px, 6vw, 96px);
  width: min(36vw, 520px);
  height: 22px;
  background: repeating-linear-gradient(-45deg, var(--mx-amber) 0 18px, rgba(255,255,255,.08) 18px 36px);
  opacity: .75;
}
.mx-hero-v3::after {
  inset-block-end: 0;
  inset-inline: 0;
  height: 112px;
  background: linear-gradient(180deg, rgba(244,245,247,0), var(--mx-bg));
}
.mx-hero-v3__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(540px, 1.1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.mx-hero-v3__inner > * { min-width: 0; }
.mx-hero-v3__copy {
  max-width: 640px;
  text-align: right;
}
.mx-hero-v3__copy h1 {
  margin: 20px 0 18px;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}
.mx-hero-v3__copy p {
  margin: 0;
  max-width: 600px;
  color: #D9DEE9;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 2;
}
.mx-hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 30px;
}
.mx-hero-v3__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.mx-hero-v3__stats li {
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-block-start: 4px solid var(--mx-amber);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.mx-hero-v3__stats strong {
  display: block;
  color: var(--mx-amber);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
}
.mx-hero-v3__stats span {
  display: block;
  margin-block-start: 8px;
  color: #D9DEE9;
  font-size: 14px;
  font-weight: 800;
}
.mx-hero-v3__showcase {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.mx-hero-v3__beam {
  position: absolute;
  inset-block-start: 42px;
  inset-inline-start: 8%;
  width: 84%;
  height: 78%;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,180,0,.16), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.05) 34px 35px);
  transform: skewX(-5deg);
}
.mx-hero-product {
  position: relative;
  z-index: 1;
  min-height: 238px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.7);
  text-decoration: none;
}
.mx-hero-product--1 {
  grid-row: 1 / 3;
  min-height: 520px;
}
.mx-hero-product--4 { display: none; }
.mx-hero-product img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 28px;
  transition: transform .28s var(--mx-ease);
}
.mx-hero-product:hover img { transform: scale(1.045); }
.mx-hero-product span {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  margin: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(21,23,28,.9);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.8);
}
.mx-hero-v3__cats,
.mx-shop-intro__chips,
.mx-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mx-hero-v3__cats {
  max-width: 1360px;
  margin: 42px auto 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
}
.mx-hero-v3__cats a,
.mx-shop-intro__chips a,
.mx-category-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}
.mx-hero-v3__cats a {
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.mx-hero-v3__cats a:hover {
  color: var(--mx-on-amber);
  background: var(--mx-amber);
}
.mx-hero-v3__cats span,
.mx-shop-intro__chips span,
.mx-category-chips span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-variant-numeric: tabular-nums;
}

.mx-shop-ui-v3 .page_cover {
  background:
    linear-gradient(180deg, rgba(21,23,28,.96), rgba(21,23,28,.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px) !important;
}
.mx-shop-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--mx-line);
  border-block-start: 6px solid var(--mx-amber);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,180,0,.12), rgba(255,255,255,0) 34%),
    #fff;
  box-shadow: var(--mx-shadow-2);
}
.mx-shop-intro h2 {
  margin: 8px 0 4px;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.35;
  color: var(--mx-ink);
}
.mx-shop-intro p {
  max-width: 720px;
  margin: 0;
  color: var(--mx-text-soft);
}
.mx-shop-intro__call {
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--mx-ink);
  color: #fff !important;
  text-decoration: none;
  text-align: center;
}
.mx-shop-intro__call strong {
  color: var(--mx-amber);
  font-size: 13px;
}
.mx-shop-intro__call bdi {
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}
.mx-shop-intro__chips {
  grid-column: 1 / -1;
  padding-block-start: 2px;
}
.mx-shop-intro__chips a {
  background: #F7F0DF;
  color: var(--mx-amber-deep);
  border: 1px solid #F1D899;
}
.mx-shop-intro__chips a:hover {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
}

.woocommerce ul.products li.product,
ul.products li.product,
ul.products li.product-category {
  border-radius: 8px;
  border: 1px solid var(--mx-line);
  background: #fff;
  box-shadow: 0 9px 24px -18px rgba(21,23,28,.45);
  overflow: hidden;
  transition: transform .2s var(--mx-ease), box-shadow .2s var(--mx-ease),
              border-color .2s var(--mx-ease);
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
ul.products li.product-category:hover {
  transform: translateY(-5px);
  border-color: #F1C651;
  box-shadow: 0 18px 38px -24px rgba(21,23,28,.55);
}
ul.products li.product .xtra-product-thumbnail,
ul.products li.product-category > a {
  display: block;
  background:
    linear-gradient(180deg, #fff, #F6F7FA);
}
ul.products li.product img,
ul.products li.product-category img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 16px;
  background: #fff;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title {
  min-height: 62px;
  margin: 0 !important;
  padding: 16px 18px 8px !important;
  color: var(--mx-ink);
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 900 !important;
  text-align: right;
}
ul.products li.product-category mark.count {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  margin-inline-start: 8px;
  border-radius: 999px;
  background: #EEF0F4;
  color: var(--mx-steel-700);
  font-size: 13px;
}
ul.products li.product .button {
  width: calc(100% - 32px);
  margin: 10px 16px 18px !important;
  border-radius: 8px;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-ordering select {
  min-height: 52px;
  padding-inline: 18px 42px;
  border-radius: 8px;
  border: 1px solid var(--mx-line);
  background-color: #fff;
  color: var(--mx-text);
  font-weight: 800;
  box-shadow: var(--mx-shadow-1);
}
.woocommerce-result-count {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: #FFF8E8;
  color: var(--mx-amber-deep) !important;
  font-weight: 900;
}

.mx-product-ui-v3 div.product {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: 34px;
  align-items: start;
}
.mx-product-ui-v3 div.product .images,
.mx-product-ui-v3 div.product .summary {
  width: auto !important;
  float: none !important;
  border-radius: 8px;
  border: 1px solid var(--mx-line);
  background: #fff;
  box-shadow: var(--mx-shadow-2);
}
.mx-product-ui-v3 div.product .images {
  padding: 24px;
}
.mx-product-ui-v3 div.product .summary {
  padding: clamp(22px, 3vw, 34px);
}
.mx-product-ui-v3 div.product .product_title {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.32;
}
.mx-product-ui-v3 .mx-product-cta {
  border-radius: 8px;
  border: 1px solid #F0D48A;
  background: linear-gradient(180deg, #FFF8E8, #fff);
}

@media (max-width: 1180px) {
  .mx-hero-v3 {
    min-height: 0;
    padding-block-start: 188px;
  }
  .mx-hero-v3__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .mx-hero-v3__copy {
    max-width: 820px;
  }
  .mx-hero-v3__showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    min-height: 0;
  }
  .mx-hero-v3__beam { display: none; }
  .mx-hero-product,
  .mx-hero-product--1 {
    grid-row: auto;
    min-height: 280px;
  }
  .mx-product-ui-v3 div.product {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body.mx-home-ui-v3::after { height: 6px; }
  .mx-hero-v3 {
    padding: 118px 20px 28px;
  }
  .mx-hero-v3::before {
    inset-block-start: 82px;
    inset-inline: 20px;
    width: auto;
    height: 10px;
  }
  .mx-hero-v3__copy h1 {
    font-size: 34px;
    line-height: 1.26;
    margin-block-start: 14px;
  }
  .mx-hero-v3__copy p {
    font-size: 15.5px;
    line-height: 1.9;
  }
  .mx-hero-v3__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .mx-hero-v3__stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mx-hero-v3__stats li {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .mx-hero-v3__stats strong { font-size: 30px; }
  .mx-hero-v3__stats span { margin: 0; }
  .mx-hero-v3__showcase {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mx-hero-product,
  .mx-hero-product--1 {
    min-height: 220px;
  }
  .mx-hero-product--3 { display: none; }
  .mx-hero-v3__cats {
    margin-block-start: 24px;
    padding: 12px;
  }
  .mx-hero-v3__cats a,
  .mx-shop-intro__chips a {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
  .mx-shop-intro {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .mx-shop-intro__call { min-width: 0; }
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product-category h2,
  ul.products li.product-category .woocommerce-loop-category__title {
    min-height: 0;
  }
}

/* v3.1 — tighten hero height and avoid theme wrapper collisions */
@media (min-width: 1181px) {
  .mx-hero-v3 {
    min-height: 0;
    padding-block-start: 206px;
    padding-block-end: 30px;
  }
  .mx-hero-v3__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(480px, .88fr);
    gap: clamp(28px, 4vw, 58px);
  }
  .mx-hero-v3__copy h1 {
    max-width: 720px;
    font-size: clamp(42px, 4.5vw, 64px);
  }
  .mx-hero-v3__showcase {
    min-height: 460px;
  }
  .mx-hero-product--1 {
    min-height: 460px;
  }
  .mx-hero-v3__cats {
    margin-block-start: 24px;
  }
}

.mx-product-ui-v3 .content.product {
  display: block !important;
  grid-template-columns: none !important;
}
.mx-product-ui-v3 div[id^="product-"].product {
  display: flex !important;
  flex-wrap: wrap;
  gap: 34px;
  align-items: start;
}
.mx-product-ui-v3 div[id^="product-"].product > .images,
.mx-product-ui-v3 div[id^="product-"].product > .summary {
  flex: 1 1 calc(50% - 17px);
  width: auto !important;
  min-width: 0;
  float: none !important;
}
.mx-product-ui-v3 div[id^="product-"].product > .woocommerce-tabs,
.mx-product-ui-v3 div[id^="product-"].product > .related,
.mx-product-ui-v3 div[id^="product-"].product > .up-sells {
  flex: 1 0 100%;
}
.mx-product-ui-v3 .xtra-single-product {
  display: flex !important;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
  width: 100%;
}
.mx-product-ui-v3 .xtra-single-product > .images,
.mx-product-ui-v3 .xtra-single-product > .summary {
  flex: 0 0 calc(50% - 40px);
  width: auto !important;
  max-width: calc(50% - 40px);
  min-width: 0;
  float: none !important;
  margin: 0 !important;
}
.mx-product-ui-v3 .xtra-single-product > .images img {
  max-height: 470px;
  width: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .mx-hero-v3 {
    padding: 104px 20px 18px;
  }
  .mx-hero-v3__copy h1 {
    font-size: 31px;
  }
  .mx-hero-v3__copy,
  .mx-hero-v3__copy h1,
  .mx-hero-v3__copy p {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .mx-hero-v3__actions {
    gap: 10px;
    margin-block-start: 20px;
  }
  .mx-hero-v3__stats {
    display: flex;
    gap: 10px;
    margin-block-start: 20px;
    padding-block-end: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .mx-hero-v3__stats li {
    min-width: 136px;
    min-height: 88px;
    display: block;
    scroll-snap-align: start;
  }
  .mx-hero-v3__stats strong {
    font-size: 28px;
  }
  .mx-hero-v3__stats span {
    margin-block-start: 6px;
    font-size: 13px;
  }
  .mx-hero-v3__showcase {
    display: flex;
    gap: 12px;
    margin-block-start: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .mx-hero-product,
  .mx-hero-product--1 {
    flex: 0 0 216px;
    min-height: 142px;
    scroll-snap-align: start;
  }
  .mx-hero-product--3 {
    display: flex;
  }
  .mx-hero-product img {
    padding: 14px;
  }
  .mx-hero-product span {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .mx-hero-v3__cats {
    display: none;
  }
  .mx-product-ui-v3 div[id^="product-"].product {
    display: block !important;
  }
  .mx-product-ui-v3 div[id^="product-"].product > .images,
  .mx-product-ui-v3 div[id^="product-"].product > .summary,
  .mx-product-ui-v3 .xtra-single-product > .images,
  .mx-product-ui-v3 .xtra-single-product > .summary {
    width: 100% !important;
    max-width: 100%;
  }
  .mx-product-ui-v3 .xtra-single-product {
    display: block !important;
  }
}

/* =============================================================================
   v3 — custom hero, pre-footer band, checkout grid, mobile menu, search
   ========================================================================== */

/* ---- 38. Hero carousel ---------------------------------------------------- */
.mx-hero {
  position: relative;
  background: var(--mx-ink);
  color: #fff;
  overflow: hidden;
}
.mx-hero-slides { position: relative; min-height: clamp(480px, 62vh, 640px); }
.mx-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  opacity: 0;
  transition: opacity .6s var(--mx-ease);
  pointer-events: none;
}
.mx-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
.mx-slide-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.mx-slide-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(21,23,28,.45) 0%, rgba(21,23,28,.82) 55%, rgba(21,23,28,.96) 100%);
}
.mx-slide-media-ink {
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(255,180,0,.16), transparent 60%),
    linear-gradient(135deg, var(--mx-steel-900), var(--mx-ink));
}
.mx-slide-media-ink::after { display: none; }
.mx-slide-body {
  position: relative;
  z-index: 1;
  grid-column: 2;
  padding: clamp(28px, 6vw, 72px);
  max-width: 640px;
  justify-self: end;
}
.mx-kicker {
  display: inline-block;
  color: var(--mx-amber);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .02em;
  border: 1.5px solid color-mix(in srgb, var(--mx-amber) 55%, transparent);
  border-radius: 999px;
  padding: 4px 16px;
  margin-block-end: 14px;
  background: rgba(21,23,28,.45);
}
.mx-slide-body h2 {
  color: #fff !important;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 900 !important;
  line-height: 1.5;
  margin: 0 0 12px;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.mx-sub {
  color: #CBD1DC;
  font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 2;
  margin-block-end: 22px;
}
.mx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 20px; }
.mx-btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mx-amber);
  color: var(--mx-on-amber) !important;
  font-weight: 800;
  font-size: 16px;
  min-height: 52px;
  padding: 10px 32px;
  border-radius: var(--mx-r-md);
  box-shadow: 0 8px 26px -8px rgba(255,180,0,.65);
  transition: transform .15s var(--mx-ease), box-shadow .2s var(--mx-ease), background .18s;
}
.mx-btn-amber:hover { background: #FFC233; transform: translateY(-2px); }
.mx-btn-ghost, .mx-btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 26px;
  border-radius: var(--mx-r-md);
  border: 2px solid rgba(255,255,255,.45);
  color: #fff !important;
  font-weight: 700;
  transition: border-color .18s, background .18s;
}
.mx-btn-ghost:hover, .mx-btn-ghost-light:hover {
  border-color: var(--mx-amber);
  background: rgba(255,180,0,.12);
  color: #fff !important;
}
.mx-hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
}
.mx-hero-trust li {
  color: #AEB6C4;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mx-hero-trust li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--mx-amber);
  transform: rotate(45deg);
}
.mx-cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 22px; }
.mx-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color .18s, background .18s, transform .15s;
}
.mx-cat-chip:hover {
  border-color: var(--mx-amber);
  background: rgba(255,180,0,.14);
  transform: translateY(-2px);
}
.mx-cat-chip span {
  background: var(--mx-amber);
  color: var(--mx-on-amber);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 1px 8px;
}
.mx-hero-controls {
  position: absolute;
  inset-block-end: 18px;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2;
}
.mx-hero-btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(21,23,28,.5);
  color: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.mx-hero-btn:hover { border-color: var(--mx-amber); background: rgba(255,180,0,.18); }
.mx-hero-dots { display: flex; gap: 8px; }
.mx-hero-dots [role="tab"] {
  width: 26px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.mx-hero-dots [role="tab"].is-active { background: var(--mx-amber); width: 40px; }

@media (max-width: 860px) {
  .mx-hero-slides { min-height: 560px; }
  .mx-slide { grid-template-columns: 1fr; }
  .mx-slide-body { grid-column: 1; justify-self: stretch; padding: 28px 20px 76px; }
  .mx-slide-media::after {
    background: linear-gradient(180deg, rgba(21,23,28,.35) 0%, rgba(21,23,28,.92) 70%);
  }
  .mx-slide-body { align-self: end; }
  .mx-hslider .mx-btn-amber, .mx-hslider .mx-btn-ghost,
  .mx-hero-v3__actions .mx-btn { width: 100%; justify-content: center; }
}

/* ---- 39. Pre-footer conversion band ------------------------------------------ */
.mx-prefooter {
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(255,180,0,.13), transparent 60%),
    var(--mx-steel-900);
  border-block-start: 4px solid var(--mx-amber);
}
.mx-prefooter-in {
  max-width: 1200px;
  margin-inline: auto;
  padding: 44px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mx-prefooter h2 {
  color: #fff !important;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900 !important;
  margin: 0 0 8px;
}
.mx-prefooter p { color: #B9BFCB; margin: 0; max-width: 560px; }
.mx-prefooter-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 40. Checkout: 2-column layout with sticky order review -------------------- */
@media (min-width: 993px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 32px;
    align-items: start;
  }
  form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
  form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; inset-block-start: 24px; }
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

/* ---- 41. Mobile menu / popup nav: ink & amber ----------------------------------- */
.cz_popup, .cz_popup_in, .xtra-popup-menu {
  background: var(--mx-ink) !important;
}
.cz_popup a, .xtra-popup-menu a { color: #E8EAEF !important; font-weight: 700; }
.cz_popup a:hover, .xtra-popup-menu a:hover { color: var(--mx-amber) !important; }
.cz_popup li, .xtra-popup-menu li { border-color: rgba(255,255,255,.08) !important; }
.cz_popup .sf-menu > li > a { min-height: 48px; display: flex; align-items: center; }

/* ---- 42. Search results as cards ------------------------------------------------- */
.search-results article {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 22px;
  margin-block-end: 18px;
  box-shadow: var(--mx-shadow-1);
  transition: transform .2s var(--mx-ease), box-shadow .2s var(--mx-ease);
}
.search-results article:hover { transform: translateY(-3px); box-shadow: var(--mx-shadow-2); }
.search-no-results .page_content { text-align: center; padding-block: 48px; }
form.searchform input[type="search"], .search-field { min-height: 50px; }

/* ---- 43. Content pages (About/Contact) rhythm ------------------------------------- */
.page .entry-content > h2, .page .cz_wpe_content > h2 {
  position: relative;
  padding-inline-start: 16px;
  margin-block: 1.4em .6em;
}
.page .entry-content > h2::before, .page .cz_wpe_content > h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  width: 5px;
  border-radius: 3px;
  background: var(--mx-amber);
}
.fluentform {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 26px;
  box-shadow: var(--mx-shadow-1);
}

/* ---- 44. Header refinement: stronger bottom edge ----------------------------------- */
#site_header.page_header { box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,0,0,.6); }

/* =============================================================================
   v4 — STRUCTURAL SHELL: new header / drawer / footer / homepage sections
   ========================================================================== */

/* ---- 45. Suppress the theme's old shell (replaced by plugin-rendered shell) -- */
#site_header.page_header, #site_footer.page_footer { display: none !important; }
.home .page_cover { padding: 0 !important; background: none !important; }
.home .page_cover::before { display: none; }
.page_cover { padding-block-start: 48px !important; }

/* ---- 46. New header ---------------------------------------------------------- */
.mxh { position: sticky; inset-block-start: 0; z-index: 9000; }
.mxh-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.mxh-top { background: var(--mx-ink); border-block-end: 1px solid rgba(255,255,255,.07); }
.mxh-top .mxh-wrap { min-height: 38px; justify-content: space-between; }
.mxh-top-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--mx-amber) !important; font-weight: 800; font-size: 13.5px; }
.mxh-top-note { color: #8E97A8; font-size: 12.5px; }
.mxh-main { background: linear-gradient(180deg, var(--mx-ink), var(--mx-steel-900)); transition: box-shadow .2s; }
.mxh.is-stuck .mxh-main { box-shadow: 0 12px 30px -14px rgba(0,0,0,.65); }
.mxh-main .mxh-wrap { min-height: 72px; }
.mxh-logo { flex: none; }
.mxh-logo img { display: block; width: 175px; height: auto; }
.mxh-nav { flex: 1; }
.mxh-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.mxh-menu > li { position: relative; }
.mxh-menu > li > a {
  display: flex; align-items: center;
  min-height: 44px; padding: 8px 14px;
  color: #E8EAEF !important; font-weight: 700; font-size: 14.5px;
  border-radius: 8px;
}
.mxh-menu > li > a:hover, .mxh-menu > li.current-menu-item > a,
.mxh-menu > li.current_page_item > a { color: var(--mx-amber) !important; background: rgba(255,255,255,.05); }
.mxh-menu .sub-menu {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; inset-block-start: 100%; inset-inline-start: 0;
  min-width: 230px; background: #fff;
  border: 1px solid var(--mx-line); border-radius: 12px;
  box-shadow: var(--mx-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--mx-ease), transform .18s var(--mx-ease), visibility .18s;
  z-index: 20;
}
.mxh-menu li:hover > .sub-menu, .mxh-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mxh-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--mx-text) !important; font-weight: 600; font-size: 14px; }
.mxh-menu .sub-menu a:hover { background: var(--mx-line-soft); color: var(--mx-amber-deep) !important; }
.mxh-actions { display: flex; align-items: center; gap: 10px; }
.mxh-search { display: flex; align-items: center; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; }
.mxh-search input {
  background: transparent; border: 0; min-height: 42px; width: 150px;
  padding-inline: 12px; color: #fff; font-size: 14px;
}
.mxh-search input::placeholder { color: #8E97A8; }
.mxh-search input:focus { outline: none; box-shadow: none; border: 0; }
.mxh-search:focus-within { border-color: var(--mx-amber); }
.mxh-search button { background: transparent; border: 0; color: #C9CEDA; padding: 0 12px; min-height: 42px; cursor: pointer; }
.mxh-cart { position: relative; display: inline-flex; color: #E8EAEF !important; padding: 8px; }
.mxh-cart-n {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  background: var(--mx-amber); color: var(--mx-on-amber);
  font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px;
  border-radius: 999px; display: grid; place-items: center; padding-inline: 4px;
}
.mxh-cta {
  background: var(--mx-amber); color: var(--mx-on-amber) !important;
  font-weight: 800; font-size: 14px; min-height: 44px;
  display: inline-flex; align-items: center; padding-inline: 20px;
  border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(255,180,0,.6);
  transition: transform .15s, background .18s;
}
.mxh-cta:hover { background: #FFC233; transform: translateY(-1px); }
.mxh-burger { display: none; background: transparent; border: 1.5px solid rgba(255,255,255,.25); border-radius: 10px; width: 46px; height: 44px; cursor: pointer; padding: 10px; flex-direction: column; justify-content: space-between; }
.mxh-burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--mx-amber); }

/* ---- 47. Drawer (RTL: slides from inline-start) -------------------------------- */
.mxd-scrim { position: fixed; inset: 0; background: rgba(13,15,19,.6); backdrop-filter: blur(3px); z-index: 9500; }
.mxd {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(320px, 86vw);
  background: var(--mx-ink); color: #E8EAEF;
  z-index: 9600; padding: 18px;
  overflow-y: auto;
  box-shadow: 12px 0 40px rgba(0,0,0,.5);
  animation: mxd-in .25s var(--mx-ease);
}
@keyframes mxd-in { from { transform: translateX(-100%); } to { transform: none; } }
[dir="rtl"] .mxd { animation-name: mxd-in-rtl; }
@keyframes mxd-in-rtl { from { transform: translateX(100%); } to { transform: none; } }
.mxd-head { display: flex; align-items: center; justify-content: space-between; padding-block-end: 14px; border-block-end: 1px solid rgba(255,255,255,.1); margin-block-end: 10px; }
.mxd-close { background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: #fff; border-radius: 10px; width: 42px; height: 42px; cursor: pointer; display: grid; place-items: center; }
.mxd-menu { list-style: none; margin: 0; padding: 0; }
.mxd-menu li { border-block-end: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; align-items: center; }
.mxd-menu a { flex: 1; display: flex; align-items: center; min-height: 50px; color: #E8EAEF !important; font-weight: 700; font-size: 15px; }
.mxd-menu a:hover { color: var(--mx-amber) !important; }
.mxd-sub-toggle { background: transparent; border: 0; color: #8E97A8; width: 44px; height: 44px; cursor: pointer; transition: transform .2s; }
.mxd-menu li.is-open > .mxd-sub-toggle { transform: rotate(180deg); color: var(--mx-amber); }
.mxd-menu .sub-menu { list-style: none; margin: 0; padding: 0 14px 8px; width: 100%; display: none; }
.mxd-menu li.is-open > .sub-menu { display: block; }
.mxd-menu .sub-menu a { font-size: 14px; font-weight: 600; color: #B9BFCB !important; min-height: 42px; }
.mxd-call { width: 100%; justify-content: center; margin-block-start: 16px; }
html.mxd-open { overflow: hidden; }

/* ---- 48. New footer -------------------------------------------------------------- */
.mxf { background: var(--mx-ink); color: #B9BFCB; border-block-start: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--mx-amber) 0 16px, var(--mx-ink) 16px 32px) 6; }
.mxf-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 20px; }
.mxf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; padding-block: 48px 36px; }
.mxf-brand img { margin-block-end: 14px; }
.mxf-brand p { font-size: 13.5px; line-height: 2.1; color: #9AA3B5; }
.mxf h3 { color: #fff; font-size: 15.5px; font-weight: 800; padding-block-end: 10px; margin-block-end: 12px; position: relative; }
.mxf h3::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 38px; height: 3px; border-radius: 2px; background: var(--mx-amber); }
.mxf ul { list-style: none; margin: 0; padding: 0; }
.mxf li { margin-block-end: 8px; }
.mxf a { color: #C9CEDA !important; font-size: 14px; }
.mxf a:hover { color: var(--mx-amber) !important; }
.mxf-contact li { color: #C9CEDA; font-size: 14px; }
.mxf-seals { margin-block-start: 14px; }
.mxf-seals img { background: #fff; border-radius: 10px; padding: 6px; }
.mxf-bottom { border-block-start: 1px solid rgba(255,255,255,.08); }
.mxf-bottom .mxf-wrap { min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #8E97A8; }

/* ---- 49. Hero slider chrome -------------------------------------------------------- */
.mx-hslider { position: relative; }
.mx-hs-slide[hidden] { display: none; }
.mx-hslider .mx-hs-slide { animation: mxfade .5s var(--mx-ease); }
@keyframes mxfade { from { opacity: 0; } to { opacity: 1; } }
.mx-hero-v3--media { background-size: cover; background-position: center; position: relative; }
.mx-hero-v3--media::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21,23,28,.5) 0%, rgba(21,23,28,.85) 55%, rgba(21,23,28,.97) 100%); }
.mx-hero-v3--media .mx-hero-v3__inner { position: relative; z-index: 1; min-height: clamp(420px, 52vh, 560px); display: grid; align-items: center; }
.mx-hs-h { color: #fff !important; font-size: clamp(24px, 3.2vw, 40px); font-weight: 900 !important; line-height: 1.5; margin: 0 0 12px; }
.mx-hero-v3--media p { color: #CBD1DC; }
.mx-hs-controls {
  position: absolute; inset-block-end: 14px; inset-inline: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 5;
}
.mx-hs-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(21,23,28,.55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.mx-hs-btn:hover { border-color: var(--mx-amber); }
.mx-hs-dots { display: flex; gap: 7px; }
.mx-hs-dots [role="tab"] { width: 24px; height: 7px; border-radius: 999px; border: 0; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; transition: all .2s; }
.mx-hs-dots [role="tab"].is-active { background: var(--mx-amber); width: 38px; }

/* ---- 50. Homepage sections ----------------------------------------------------------- */
.mx-sec { max-width: 1280px; margin-inline: auto; padding: 56px 20px 8px; }
.mx-sec-head { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 18px; margin-block-end: 26px; }
.mx-sec-head h2 { font-size: clamp(21px, 2.6vw, 30px); font-weight: 900 !important; margin: 0; flex: 1; min-width: 240px; }
.mx-sec-head .mx-kicker { width: 100%; }
.mx-sec-more { font-weight: 700; color: var(--mx-amber-deep) !important; }
.mx-sec-more:hover { color: var(--mx-ink) !important; }

.mx-catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.mx-catcard {
  background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg);
  padding: 18px; text-align: center; box-shadow: var(--mx-shadow-1);
  transition: transform .2s var(--mx-ease), box-shadow .2s var(--mx-ease), border-color .2s;
}
.mx-catcard:hover { transform: translateY(-5px); box-shadow: var(--mx-shadow-2); border-color: color-mix(in srgb, var(--mx-amber) 55%, var(--mx-line)); }
.mx-catcard img { width: 110px; height: 110px; object-fit: contain; margin-block-end: 10px; }
.mx-catcard-name { display: block; font-weight: 800; color: var(--mx-ink); font-size: 15px; }
.mx-catcard-count { display: inline-block; margin-block-start: 6px; font-size: 12px; font-weight: 700; color: var(--mx-amber-deep); background: #FFF4D6; border-radius: 999px; padding: 2px 12px; }

.mx-sec-ink { max-width: none; background: var(--mx-steel-900); padding-block: 44px; margin-block-start: 56px; }
.mx-usps { max-width: 1280px; margin-inline: auto; padding-inline: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.mx-usp { color: #C9CEDA; }
.mx-usp svg { color: var(--mx-amber); margin-block-end: 10px; }
.mx-usp h3 { color: #fff; font-size: 16px; margin: 0 0 6px; }
.mx-usp p { font-size: 13.5px; margin: 0; color: #9AA3B5; }

.mx-prodgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.mx-prodcard {
  background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg);
  padding: 16px; box-shadow: var(--mx-shadow-1);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s var(--mx-ease), box-shadow .2s var(--mx-ease), border-color .2s;
}
.mx-prodcard:hover { transform: translateY(-5px); box-shadow: var(--mx-shadow-2); border-color: color-mix(in srgb, var(--mx-amber) 55%, var(--mx-line)); }
.mx-prodcard img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mx-prodcard h3 { font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.7; color: var(--mx-ink); min-height: 3.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-prodcard-cta { margin-block-start: auto; text-align: center; background: var(--mx-line-soft); color: var(--mx-steel-700); font-weight: 800; font-size: 13.5px; border-radius: 9px; padding: 10px; transition: background .18s, color .18s; }
.mx-prodcard:hover .mx-prodcard-cta { background: var(--mx-amber); color: var(--mx-on-amber); }

.mx-about { }
.mx-about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
  background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: 18px; padding: 36px; box-shadow: var(--mx-shadow-1); }
.mx-about-txt h2 { font-size: clamp(20px, 2.4vw, 27px); margin-block: 10px 12px; }
.mx-about-txt p { color: var(--mx-text-soft); }
.mx-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mx-stats li { background: var(--mx-steel-900); border-radius: 14px; padding: 18px 22px; display: flex; align-items: baseline; gap: 14px; }
.mx-stats strong { color: var(--mx-amber); font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mx-stats span { color: #C9CEDA; font-weight: 600; }

.mx-bloggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding-block-end: 40px; }
.mx-blogcard { background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); overflow: hidden; box-shadow: var(--mx-shadow-1); transition: transform .2s var(--mx-ease), box-shadow .2s; }
.mx-blogcard:hover { transform: translateY(-5px); box-shadow: var(--mx-shadow-2); }
.mx-blogcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mx-blogcard h3 { font-size: 15px; font-weight: 700; line-height: 1.8; margin: 0; padding: 14px 16px 4px; color: var(--mx-ink); }
.mx-blogcard-date { display: block; padding: 0 16px 16px; font-size: 12.5px; color: var(--mx-text-faint); }

/* ---- 51. Shell responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mxh-nav, .mxh-search, .mxh-cta { display: none; }
  .mxh-burger { display: flex; }
  .mxh-top-note { display: none; }
  .mxf-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mx-about-grid { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .mxf-grid { grid-template-columns: 1fr; }
  .mxh-logo img { width: 145px; }
  .mx-sec { padding-block-start: 40px; }
}

/* slide-1 hero carries its own ink backdrop (page_cover bg was removed) */
.mx-hero-v3:not(.mx-hero-v3--media) {
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(255,180,0,.14), transparent 60%),
    linear-gradient(135deg, var(--mx-steel-900), var(--mx-ink));
}

/* media slides: no decorative beam, lighter scrim so the photo reads */
.mx-hero-v3--media::after { display: none !important; }
.mx-hero-v3--media::before {
  background: linear-gradient(90deg, rgba(21,23,28,.25) 0%, rgba(21,23,28,.72) 55%, rgba(21,23,28,.94) 100%);
}

/* ---- 52. Product page: stacked sections instead of hidden tabs ----------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none !important; }
.woocommerce-Tabs-panel {
  display: block !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: var(--mx-r-lg) !important;
  margin-block-end: 22px;
  padding: 24px !important;
}
.woocommerce-Tabs-panel > h2:first-child {
  font-size: 19px;
  padding-inline-start: 14px;
  position: relative;
  margin-block-start: 0;
}
.woocommerce-Tabs-panel > h2:first-child::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 6px;
  width: 5px; border-radius: 3px; background: var(--mx-amber);
}
.mx-specs {
  background: var(--mx-card); border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg); padding: 24px; margin-block: 22px;
}
.mx-specs h2 { font-size: 19px; margin-block-start: 0; padding-inline-start: 14px; position: relative; }
.mx-specs h2::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 6px; width: 5px; border-radius: 3px; background: var(--mx-amber); }
.mx-specs table { width: 100%; border-collapse: collapse; }
.mx-specs th { width: 30%; text-align: start; background: var(--mx-line-soft); padding: 11px 16px; font-size: 13.5px; color: var(--mx-steel-700); border-block-end: 2px solid #fff; }
.mx-specs td { padding: 11px 16px; border-block-end: 1px solid var(--mx-line-soft); font-size: 14px; }

/* ---- 53. Blog archive: card grid -------------------------------------------------- */
.blog article.cz_default_loop, .archive article.cz_default_loop {
  background: var(--mx-card); border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg); overflow: hidden; box-shadow: var(--mx-shadow-1);
  transition: transform .2s var(--mx-ease), box-shadow .2s var(--mx-ease);
  margin-block-end: 24px;
}
.blog article.cz_default_loop:hover, .archive article.cz_default_loop:hover {
  transform: translateY(-4px); box-shadow: var(--mx-shadow-2);
}
article.cz_default_loop .cz_post_con { padding: 18px 20px; }
article.cz_default_loop .cz_post_title { font-size: 18px; font-weight: 800; line-height: 1.7; }
article.cz_default_loop .cz_post_image img { width: 100%; object-fit: cover; }

/* ---- 54. Single post reading experience -------------------------------------------- */
.single-post .entry-content, .single-post .cz_post_content {
  max-width: 780px; margin-inline: auto;
  font-size: 17px; line-height: 2.15;
}
.single-post .entry-content h2, .single-post .cz_post_content h2 {
  font-size: 22px; padding-inline-start: 14px; position: relative; margin-block: 1.5em .6em;
}
.single-post .entry-content h2::before, .single-post .cz_post_content h2::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 6px;
  width: 5px; border-radius: 3px; background: var(--mx-amber);
}
.single-post .entry-content img { border-radius: var(--mx-r-lg); }
.mx-breadcrumbs--post { max-width: 780px; margin-inline: auto; padding: 0 0 14px; }
.mx-postnav {
  max-width: 780px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.mx-postnav a {
  background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: var(--mx-r-md);
  padding: 14px 18px; font-weight: 700; color: var(--mx-ink) !important; box-shadow: var(--mx-shadow-1);
}
.mx-postnav a span { display: block; font-size: 12px; color: var(--mx-amber-deep); font-weight: 800; margin-block-end: 4px; }
.mx-postnav-next { text-align: end; }
.mx-related-posts { max-width: 1100px; margin: 40px auto 0; }
.mx-related-posts h2 { font-size: 21px; padding-inline-start: 14px; position: relative; }
.mx-related-posts h2::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 6px; width: 5px; border-radius: 3px; background: var(--mx-amber); }
@media (max-width: 640px) { .mx-postnav { grid-template-columns: 1fr; } }

/* ---- 55. Homepage section QA fixes -------------------------------------------- */
/* section kicker: light amber chip, never the hero's dark pill, never full-width */
.mx-sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 18px; }
.mx-sec-head .mx-kicker, .mx-sec .mx-kicker {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  background: #FFF4D6 !important;
  color: var(--mx-amber-deep) !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 5px 16px !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.8;
}
.mx-sec-head h2 { margin: 0; }
.mx-sec-head .mx-sec-more { justify-self: end; }

/* cards: explicit block formatting so anchors never fragment */
.mx-blogcard, .mx-catcard {
  display: flex !important;
  flex-direction: column;
}
.mx-blogcard h3, .mx-catcard .mx-catcard-name { background: none !important; }
.mx-blogcard img { flex: none; }

/* ---- 56. Mobile QA fixes (about card / stats tiles / button sizing) ------------ */
.mx-btn-amber, .mx-btn-ghost, .mx-btn-ghost-light, .mx-cta-call,
.mx-sticky-call-btn, .mxh-cta, .mxd-call {
  box-sizing: border-box;
  max-width: 100%;
}
.mx-about .mx-btn-amber { width: auto; }
.mx-stats li { flex-wrap: wrap; row-gap: 2px; }
.mx-stats strong { white-space: nowrap; font-size: clamp(20px, 5.5vw, 28px); }
.mx-stats span { font-size: clamp(13px, 3.6vw, 15px); }
@media (max-width: 860px) {
  .mx-about .mx-btn-amber { width: 100%; justify-content: center; }
  .mx-about-grid { padding: 20px; }
}

/* ---- 57. Hero slider mobile QA -------------------------------------------------- */
/* .mx-btn gets width:100% on mobile — without border-box its 24px side padding
   overflowed the viewport and shifted the whole page sideways */
.mx-btn { box-sizing: border-box; max-width: 100%; }
.mx-hslider, .mx-hero-v3 { overflow-x: clip; }
@media (max-width: 860px) {
  .mx-hero-v3--media .mx-hero-v3__inner {
    min-height: clamp(300px, 44vh, 430px);   /* was up to 560px → big dead zone */
    align-items: center;
    padding-block: 36px 72px;                /* clear the dots/arrows at the bottom */
  }
  .mx-hero-v3__actions { display: flex; flex-direction: column; gap: 10px; }
  .mx-hero-v3__stats { gap: 10px; }
  .mx-hero-v3__stats li { min-height: 84px; padding: 12px; }
}

@media (max-width: 860px) {
  /* media slides: height from content, no inherited tall min-heights */
  .mx-hero-v3--media { min-height: 0 !important; }
  .mx-hero-v3--media .mx-hero-v3__inner {
    min-height: 0;
    padding-block: 56px 88px;
  }
}

/* ---- 58. Inner-page band compaction + related grid + cz_grid mobile ------------- */
/* theme's .page_title carries padding-top:150px from the old absolute header */
.page_cover { padding-block-start: 16px !important; }
.page_cover .page_title { padding-block: 28px 6px !important; min-height: 0 !important; }
.home .page_cover { padding: 0 !important; }

/* related products: clean static grid, one row of 4 (2-up on phones) */
.related.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related.products .slick-arrow, .related.products .cz_carousel_arrows { display: none !important; }
@media (max-width: 992px) { .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* product description panels: collapse leading dead space */
.woocommerce-Tabs-panel > :first-child { margin-block-start: 0 !important; }
.woocommerce-Tabs-panel > .cz_gap:first-child { height: 0 !important; }

/* builder grids (/products/, /portfolio/): collapse to one column on phones,
   keep product photos contained instead of towering */
@media (max-width: 640px) {
  .cz_grid .cz_grid_item { width: 100% !important; margin-inline: 0 !important; }
  .cz_grid .cz_grid_item .cz_main_image img { max-height: 300px; object-fit: contain; background: #fff; }
}

/* related section renamed to .mx-related (defeats theme slick selector) */
.mx-related.products > h2 {
  font-size: 22px; position: relative; padding-inline-start: 14px;
}
.mx-related.products > h2::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 6px;
  width: 5px; border-radius: 3px; background: var(--mx-amber);
}
.mx-related.products { margin-block-start: 36px; }
.mx-related.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 992px) { .mx-related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 59. Portfolio archive: card grid with visible titles ----------------------- */
.post-type-archive-portfolio .cz_posts_container, .tax-portfolio_cat .cz_posts_container,
.tax-portfolio_tags .cz_posts_container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.post-type-archive-portfolio article.cz_default_loop,
.tax-portfolio_cat article.cz_default_loop,
.tax-portfolio_tags article.cz_default_loop {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
article.cz_default_loop .cz_post_image { display: block; aspect-ratio: 1; overflow: hidden; }
article.cz_default_loop .cz_post_image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--mx-ease); }
article.cz_default_loop:hover .cz_post_image img { transform: scale(1.05); }
.cz_default_loop_square .cz_post_con {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  background: var(--mx-card) !important;
  padding: 14px 18px 16px;
}
.cz_default_loop_square .cz_post_title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--mx-ink) !important;
  background: none !important;
}
.cz_default_loop_square .cz_post_title:hover { color: var(--mx-amber-deep) !important; }
@media (max-width: 992px) {
  .post-type-archive-portfolio .cz_posts_container, .tax-portfolio_cat .cz_posts_container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 560px) {
  .post-type-archive-portfolio .cz_posts_container, .tax-portfolio_cat .cz_posts_container { grid-template-columns: 1fr; }
}

/* portfolio: theme wraps articles in row divs — flatten them into the grid */
.post-type-archive-portfolio .cz_posts_container > .clr,
.tax-portfolio_cat .cz_posts_container > .clr,
.tax-portfolio_tags .cz_posts_container > .clr { display: contents; }

/* portfolio: RTL fill order + a real title bar */
.post-type-archive-portfolio .cz_posts_container,
.tax-portfolio_cat .cz_posts_container { direction: rtl; }
.cz_default_loop_square .cz_post_con { padding: 14px 18px 16px !important; }
.cz_default_loop_square .cz_post_con .cz_post_title h3 {
  font-size: 16px !important; font-weight: 800 !important;
  margin: 0 !important; color: var(--mx-ink) !important;
}

/* a zero-size stray child occupies the first grid cell — pack densely */
.post-type-archive-portfolio .cz_posts_container,
.tax-portfolio_cat .cz_posts_container { grid-auto-flow: row dense; }
.cz_posts_container > .clr > :not(article) { display: none !important; }

/* .clr clearfix ::before/::after become grid items under display:contents — remove */
.post-type-archive-portfolio .cz_posts_container > .clr::before,
.post-type-archive-portfolio .cz_posts_container > .clr::after,
.tax-portfolio_cat .cz_posts_container > .clr::before,
.tax-portfolio_cat .cz_posts_container > .clr::after,
.post-type-archive-portfolio .cz_posts_container::before,
.post-type-archive-portfolio .cz_posts_container::after {
  content: none !important;
  display: none !important;
}

/* ---- 60. Tablet/mobile: stack the theme's sidebar float layout ------------------- */
@media (max-width: 992px) {
  .page_content .row > .col.s9, .page_content .row > .col.s8,
  .page_content .row > .col.s3, .page_content .row > .col.s4 {
    width: 100% !important;
    float: none !important;
  }
  .page_content .row > .col.s3, .page_content .row > .col.s4 { margin-block-start: 28px; }
  /* archive toolbar: count + sort on one tidy row */
  .woocommerce-result-count { margin: 0 0 10px; }
  .woocommerce-ordering { width: 100%; margin: 0 0 18px; }
  .woocommerce-ordering select { width: 100%; }
}
@media (max-width: 540px) {
  ul.products li.product .woocommerce-loop-product__title { min-height: 0; font-size: 14.5px; }
  ul.products li.product { padding-block-end: 12px; }
}

@media (max-width: 540px) {
  ul.products li.product, ul.products li.product-category { width: 100% !important; max-width: none !important; }
}

/* phones: out-specify whatever pins archive items at 48% */
@media (max-width: 540px) {
  body .woocommerce ul.products[class*="columns-"] li.product,
  body ul.products[class*="columns-"] li.product,
  body .woocommerce-page ul.products li.product,
  body ul.products li.product,
  body ul.products li.product-category {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* phones: theme's xtra-woo-two-col-mobile pins li at 48%!important — adopt a
   true 2-col grid and let tracks size the cards */
@media (max-width: 540px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  body.xtra-woo-two-col-mobile ul.products li.product,
  body.xtra-woo-two-col-mobile ul.products[class*="columns-"] li.product,
  body.xtra-woo-two-col-mobile ul.products li.product-category {
    width: 100% !important;
  }
  ul.products li.product .price { font-size: 14px; }
  ul.products li.product .button { margin: 10px 10px 0; width: calc(100% - 20px); min-height: 40px; font-size: 13.5px; }
}

/* ---- 61. SEO layer blocks ------------------------------------------------------ */
.mx-cat-intro {
  background: var(--mx-card);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg);
  padding: 22px 26px;
  margin-block-end: 24px;
  box-shadow: var(--mx-shadow-1);
  font-size: 15px;
  line-height: 2.1;
  color: var(--mx-text-soft);
}
.mx-cat-intro h2, .mx-cat-intro h3 { font-size: 18px; color: var(--mx-ink); }
.mx-guide-link { margin-block: 10px 0; }
.mx-guide-link a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mx-blue) !important; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- 62. Product detail v2 (Stitch blueprint 2026-06-12) ----------------------------- */
.single-product .s12.clr > .content.product { max-width: 1240px; margin-inline: auto; float: none; }
.mx-plead { font-size: 15.5px; line-height: 2; color: var(--mx-text, #3a3d44); margin: 6px 0 14px; }
.mx-pchips { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mx-pchips li { background: #f7f7f4; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.mx-pchips li span { font-size: 11.5px; color: var(--mx-text-faint, #6f7277); }
.mx-pchips li strong { font-size: 13.5px; color: var(--mx-ink, #15171C); }
.mx-cta-row { display: flex; gap: 10px; margin-top: 10px; }
.mx-cta-wa, .mx-cta-form { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; transition: filter .2s, transform .15s; }
.mx-cta-wa { background: #1faa5c; color: #fff !important; }
.mx-cta-wa:hover { filter: brightness(1.08); }
.mx-cta-form { border: 2px solid var(--mx-ink, #15171C); color: var(--mx-ink, #15171C) !important; background: transparent; }
.mx-cta-form:hover { background: var(--mx-ink, #15171C); color: #fff !important; }

/* in-page section nav */
.mx-pnav { position: sticky; top: 64px; z-index: 30; display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 14px; padding: 8px; margin: 26px 0 18px; box-shadow: 0 6px 18px rgba(21,23,28,.06); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx-pnav a { white-space: nowrap; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--mx-ink, #15171C); text-decoration: none; }
.mx-pnav a:hover { background: #f3f3ef; }
.mx-pnav .mx-pnav-cta { margin-inline-start: auto; background: var(--mx-amber, #FFB400); color: var(--mx-ink, #15171C); }
.mx-pnav .mx-pnav-cta:hover { filter: brightness(1.05); background: var(--mx-amber, #FFB400); }

/* description section + clamp */
.mx-desc { background: #fff; border: 1px solid var(--mx-line, #e6e6e0); border-radius: var(--mx-r-lg, 16px); padding: 26px 28px; margin: 0 0 26px; position: relative; }
.mx-desc > h2 { font-size: 19px; margin: 0 0 14px; padding-inline-start: 12px; border-inline-start: 4px solid var(--mx-amber, #FFB400); }
.mx-desc-body { font-size: 14.5px; line-height: 2.1; color: var(--mx-text, #3a3d44); overflow-wrap: anywhere; }
.mx-desc-body h2 { font-size: 17px; margin: 22px 0 10px; }
.mx-desc-body h3 { font-size: 15px; margin: 18px 0 8px; }
.mx-desc-body img { max-width: 100%; height: auto; border-radius: 12px; }
.mx-desc.is-clamped .mx-desc-body { max-height: 460px; overflow: hidden; }
.mx-desc.is-clamped .mx-desc-body::after { content: ""; position: absolute; inset-inline: 0; bottom: 64px; height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.mx-desc-more { display: block; margin: 14px auto 0; min-height: 44px; padding: 10px 26px; border: 2px solid var(--mx-ink, #15171C); border-radius: 12px; background: transparent; color: var(--mx-ink, #15171C); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.mx-desc-more:hover { background: var(--mx-ink, #15171C); color: #fff; }

/* gallery breathing room in full-width layout */
.single-product div.product div.images { max-width: 46%; }
@media (max-width: 880px) { .single-product div.product div.images { max-width: 100%; } }

/* sticky bar: + WhatsApp */
.mx-sticky-call { display: none; }
@media (max-width: 880px) {
	.mx-sticky-call { position: fixed; bottom: 0; inset-inline: 0; z-index: 980; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(21,23,28,.97); backdrop-filter: blur(6px); }
	.mx-sticky-call-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--mx-amber, #FFB400); color: var(--mx-ink, #15171C) !important; border-radius: 12px; font-weight: 800; font-size: 14.5px; text-decoration: none; }
	.mx-sticky-wa-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; background: #1faa5c; color: #fff !important; border-radius: 12px; }
	.single-product .mxf { padding-bottom: 84px; }
	.single-product #chaty-widget-0 { bottom: 78px !important; }
}

/* ---- 63. Blog grid v2 + pagination + empty states ------------------------------------- */
.mx-bloggrid--archive { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mx-blogcard-media { display: block; position: relative; background: #f0f0ec; }
.mx-blogcard-noimg { display: block; width: 100%; aspect-ratio: 16/9; background:
	repeating-linear-gradient(45deg, #f0f0ec 0 14px, #eaeae4 14px 28px); }
.mx-blogcard-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--mx-ink, #15171C); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.mx-blogcard-cat { display: inline-block; margin: 12px 16px 0; font-size: 11.5px; font-weight: 700; color: #8a6400; background: #fff7e0; border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.mx-blogcard h3 a { color: inherit; text-decoration: none; }
.mx-blogcard h3 a:hover { color: #8a6400; }
.mx-blogcard-excerpt { padding: 6px 16px 0; margin: 0; font-size: 13px; line-height: 1.9; color: var(--mx-text-faint, #6f7277); }
.mx-blogcard-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 16px; }
.mx-blogcard-foot .mx-blogcard-date { padding: 0; }
.mx-blogcard-more { font-size: 12.5px; font-weight: 700; color: var(--mx-ink, #15171C); text-decoration: none; border-bottom: 2px solid var(--mx-amber, #FFB400); padding-bottom: 1px; }
.mx-pagination { margin: 8px 0 40px; }
.mx-pagination ul.page-numbers { list-style: none; display: flex; gap: 6px; justify-content: center; margin: 0; padding: 0; }
.mx-pagination .page-numbers li { margin: 0; }
.mx-pagination a.page-numbers, .mx-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 10px; background: #fff; color: var(--mx-ink, #15171C); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.mx-pagination span.page-numbers.current { background: var(--mx-ink, #15171C); color: #fff; border-color: var(--mx-ink, #15171C); }
.mx-pagination a.page-numbers:hover { border-color: var(--mx-amber, #FFB400); background: #fff7e0; }
.mx-empty { text-align: center; padding: 56px 20px 64px; color: var(--mx-text, #3a3d44); }
.mx-empty svg { color: var(--mx-amber, #FFB400); margin-bottom: 10px; }
.mx-empty h2 { font-size: 20px; margin: 0 0 8px; }
.mx-empty p { margin: 0 0 18px; color: var(--mx-text-faint, #6f7277); }
.mx-empty-search { display: flex; gap: 8px; max-width: 460px; margin: 0 auto 18px; }
.mx-empty-search input[type="search"] { flex: 1; min-height: 48px; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14px; background: #fff; }
.mx-empty-search input[type="search"]:focus { outline: 2px solid var(--mx-amber, #FFB400); outline-offset: 1px; }
.mx-empty-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mx-empty-links a { background: #fff; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 999px; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--mx-ink, #15171C); text-decoration: none; }
.mx-empty-links a:hover { border-color: var(--mx-amber, #FFB400); background: #fff7e0; }

/* ---- 64. Post TOC + mobile band clamp + account forms --------------------------------- */
.mx-toc { background: #f7f7f4; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 14px; padding: 4px 18px 4px; margin: 0 0 22px; }
.mx-toc summary { cursor: pointer; font-weight: 800; font-size: 14.5px; padding: 12px 0; color: var(--mx-ink, #15171C); list-style-position: inside; }
.mx-toc ol { margin: 0 0 14px; padding-inline-start: 22px; }
.mx-toc li { margin: 6px 0; font-size: 13.5px; line-height: 1.8; }
.mx-toc a { color: var(--mx-text, #3a3d44); text-decoration: none; border-bottom: 1px dashed #cfcfc6; }
.mx-toc a:hover { color: #8a6400; border-color: var(--mx-amber, #FFB400); }
@media (max-width: 640px) {
	.page_title h1.codevz-section-title, .page_title .codevz-section-title { font-size: clamp(22px, 6.4vw, 30px) !important; line-height: 1.6 !important; }
	.page_title { padding-block: 28px !important; }
}
/* my-account login/register card (raw Woo markup) */
.woocommerce-page form.woocommerce-form-login, .woocommerce-page form.woocommerce-form-register { max-width: 460px; margin: 10px auto 40px; background: #fff; border: 1px solid var(--mx-line, #e6e6e0); border-radius: var(--mx-r-lg, 16px); padding: 26px 26px 22px; box-shadow: 0 8px 24px rgba(21,23,28,.06); }
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row { margin-bottom: 14px; }
.woocommerce-form-login label, .woocommerce-form-register label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--mx-ink, #15171C); }
.woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text { width: 100%; min-height: 48px; border: 1px solid var(--mx-line, #e6e6e0); border-radius: 10px; padding: 0 12px; font: inherit; background: #fcfcfa; }
.woocommerce-form-login input.input-text:focus, .woocommerce-form-register input.input-text:focus { outline: 2px solid var(--mx-amber, #FFB400); outline-offset: 1px; border-color: var(--mx-amber, #FFB400); }
.woocommerce-form-login button.woocommerce-form-login__submit, .woocommerce-form-register button { width: 100%; min-height: 48px; background: var(--mx-ink, #15171C); color: #fff; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.woocommerce-form-login button.woocommerce-form-login__submit:hover { background: #000; }
.woocommerce-LostPassword a { font-size: 13px; color: #8a6400; }