/* ===== MODORO Round2: modal + mobile + badges (loads LAST; wins with #product-modal) ===== */
.example-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-inline-start: .4rem; padding: .15rem .5rem;
  font-family: "DM Mono", monospace; font-size: 12px !important; letter-spacing: .03em;
  color: #7a4a12; background: #f5e6c8; border: 1px solid #e2c48a;
  border-radius: 999px; vertical-align: middle; white-space: nowrap; line-height: 1.2;
}
.metrics .example-badge, .trust-strip .example-badge { font-size: 12px !important; }

/* Kill legacy modal layout for #product-modal only */
#product-modal.modal {
  position: fixed !important; inset: 0 !important; z-index: 2000 !important;
  display: none !important;
  align-items: center !important; justify-content: center !important;
  padding: 28px !important;
  background: rgba(18,16,14,.55) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  opacity: 1 !important; pointer-events: none !important;
  overflow: auto !important;
}
#product-modal.modal.show {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
#product-modal .modal-content {
  position: relative !important;
  display: block !important;
  width: min(1080px, 94vw) !important;
  max-width: 1080px !important;
  min-height: 0 !important;
  max-height: min(92vh, 900px) !important;
  margin: 0 !important;
  overflow: auto !important;
  background: #f7f2ea !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.28) !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}
/* Close outside top-right of card */
#product-modal .modal-close {
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  transform: translate(40%, -40%) !important;
  z-index: 5 !important;
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  border: 0 !important; background: #fff !important; color: #1a1714 !important;
  font-size: 22px !important; line-height: 1 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.18) !important; cursor: pointer !important;
  display: grid !important; place-items: center !important;
  margin: 0 !important; padding: 0 !important;
}
html[dir="rtl"] #product-modal .modal-close {
  right: auto !important; left: 0 !important; transform: translate(-40%, -40%) !important;
}

/* Desktop layout */
.pm-desk { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 520px; }
.pm-desk .pm-media, .pm-desk-media {
  background: #e8dfd2; padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.pm-desk .pm-frame {
  position: relative; flex: 1; min-height: 360px; aspect-ratio: 4 / 3;
  background: #e8dfd2; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
}
.pm-desk .pm-frame img {
  width: 100%; height: 100%; object-fit: contain !important; object-position: center;
  display: block; mix-blend-mode: normal !important;
}
.pm-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #1a1714; font-size: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: pointer; z-index: 2;
  display: grid; place-items: center;
}
.pm-nav-btn.prev { left: 10px; }
.pm-nav-btn.next { right: 10px; }
html[dir="rtl"] .pm-nav-btn.prev { left: auto; right: 10px; }
html[dir="rtl"] .pm-nav-btn.next { right: auto; left: 10px; }
.pm-dots { display: flex; justify-content: center; gap: 8px; padding: 4px 0 0; }
.pm-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; background: #c4b8a8; cursor: pointer; padding: 0;
}
.pm-dots button.on { background: #1a1714; width: 18px; border-radius: 4px; }
.pm-desk .pm-body { padding: 28px 28px 32px; overflow: auto; background: #faf7f2; }
.pm-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pm-tag {
  display: inline-block; padding: .28rem .7rem; border-radius: 999px;
  background: #efe6d8; color: #5a4a38; font-size: 12px; font-weight: 600;
}
.pm-video {
  font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer; padding: 8px; min-height: 44px;
}
.pm-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pm-title { font-family: "Playfair Display", serif; font-size: clamp(1.35rem, 2vw, 1.85rem); margin: 0; line-height: 1.25; color: #1a1714; }
.pm-quote {
  flex-shrink: 0; background: #1a1714; color: #fff; border: 0; border-radius: 8px;
  padding: .7rem 1.1rem; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 44px;
}
.pm-sell { font-size: 14px; line-height: 1.65; color: #4a433c; margin: 0 0 18px; }
.pm-specs { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 18px; }
.pm-specs th, .pm-specs td { text-align: start; padding: .55rem 0; border-bottom: 1px solid #e5ddd0; vertical-align: top; }
.pm-specs th { width: 34%; color: #7a7166; font-weight: 500; }
.pm-specs td { color: #1a1714; font-weight: 500; }
.pm-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 18px; }
.pm-process div {
  text-align: center; padding: 10px 4px; background: #efe6d8; border-radius: 10px; font-size: 12px; color: #4a433c;
}
.pm-process b { display: block; font-size: 16px; margin-bottom: 4px; }
.pm-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; border-radius: 10px; background: #25D366; color: #fff;
  font-weight: 700; text-decoration: none; font-size: 14px;
}

/* Mobile-only layout */
.pm-mob { display: none; }
@media (max-width: 860px) {
  #product-modal.modal { padding: 12px !important; align-items: center !important; }
  #product-modal .modal-content {
    width: min(100%, 430px) !important;
    max-height: 92vh !important;
    border-radius: 18px !important;
  }
  #product-modal .modal-close {
    top: 0 !important; right: 0 !important;
    transform: translate(30%, -40%) !important;
    width: 40px !important; height: 40px !important;
  }
  .pm-desk { display: none !important; }
  .pm-mob { display: block !important; }
  .pm-mob .pm-frame {
    aspect-ratio: 1 / 1; width: 100%; background: #e8dfd2;
    border-radius: 0; position: relative; display: grid; place-items: center;
  }
  .pm-mob .pm-frame img {
    width: 100%; height: 100%; object-fit: contain !important; mix-blend-mode: normal !important;
  }
  .pm-mob .pm-body { padding: 16px 16px 28px; }
  .pm-mob .pm-title { font-size: 1.25rem; }
  .pm-mob .pm-title-row { flex-direction: column; align-items: stretch; }
  .pm-mob .pm-quote { width: 100%; }
  .pm-process { grid-template-columns: repeat(3, 1fr); }
  .pm-sell { font-size: 13px; }
  .pm-specs { font-size: 12.5px; }
}

@media (min-width: 861px) {
  .pm-mob { display: none !important; }
  .pm-desk { display: grid !important; }
}

/* --- Readable text floor (>=12px) site-wide on small screens + key chrome --- */
.kicker, .hero-label, .hero-label span,
.language-toggle, .language-menu button,
.quick-nav a, .header-cta, .button,
.metrics span, .topbar, .card-info p, .card-info span,
.category-nav small, .trust-strip p, footer,
.catalogue-footer, .whatsapp, .whatsapp b {
  font-size: max(12px, 1em);
}
.kicker { font-size: 12px !important; }
.hero-label, .hero-label span { font-size: 12px !important; }
.language-toggle, .language-menu button { font-size: 12px !important; }
.quick-nav a { font-size: 12px !important; }
.header-cta { font-size: 12px !important; }
.button { font-size: 12px !important; }
.metrics span { font-size: 12px !important; text-transform: none; }
.card-info p, .card-info span { font-size: 12px !important; }
.category-nav small { font-size: 12px !important; }
.topbar { font-size: 12px !important; }
.trust-strip p { font-size: 12px !important; }
footer { font-size: 12px !important; }
.whatsapp, .whatsapp b { font-size: 12px !important; }

@media (max-width: 860px) {
  html { font-size: 16px; }
  body { overflow-x: hidden; }
  header, .quick-nav, main, footer, section { max-width: 100vw; }
  header { padding: 10px 14px; gap: 8px; }
  .logo { font-size: 1.1rem; }
  .mobile-menu, .language-toggle, .header-cta {
    min-height: 44px; min-width: 44px; font-size: 13px !important; padding: .55rem .8rem;
  }
  .language-menu button { min-height: 44px; font-size: 14px !important; padding: .6rem .9rem; }
  .quick-nav { gap: 6px; padding: 8px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quick-nav a {
    flex: 0 0 auto; min-height: 40px; padding: .5rem .75rem; font-size: 13px !important;
    white-space: nowrap;
  }
  .hero { display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.2; }
  .hero-copy p, #hero-lead { font-size: 14px; line-height: 1.55; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px; }
  .hero-actions .button, .hero-actions .underlink {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px !important; width: 100%;
  }
  .metrics {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px;
  }
  .metrics > div {
    padding: 14px 12px; font-size: 13px; min-height: 72px;
  }
  .metrics strong { font-size: 1.35rem; display: block; margin-bottom: 4px; }
  .section, .about, .products, .capability { padding: 28px 16px; }
  .section-intro h2, .about h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .about-body p, .lead { font-size: 14px; }
  #category-nav {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  #category-nav button {
    flex: 0 0 auto; min-height: 44px; padding: .55rem .9rem; font-size: 13px;
  }
  #catalogue, .library-grid {
    grid-template-columns: 1fr !important; gap: 14px;
  }
  .card, .library-card { min-height: auto; }
  .card h3, .library-card h3 { font-size: 1.05rem; }
  .card p, .library-card p, .card span, .library-card span { font-size: 13px !important; }
  #custom-steps { display: flex; flex-direction: column; gap: 12px; }
  #custom-steps article { padding: 14px; }
  #custom-steps h3 { font-size: 1rem; }
  #custom-steps p { font-size: 13px; }
  #factory-wall { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  #certs-grid, #cases-grid { grid-template-columns: 1fr !important; gap: 12px; }
  #certs-grid article, #cases-grid article { font-size: 13px; }
  .inquiry-form, #inquiry-form {
    display: flex; flex-direction: column; gap: 12px; padding: 0;
  }
  #inquiry-form input, #inquiry-form textarea, #inquiry-form select, #inquiry-form button {
    min-height: 48px; font-size: 16px;
    width: 100%; box-sizing: border-box;
  }
  #inquiry-form textarea { min-height: 120px; }
  .category-page, #category-page { padding: 12px !important; }
  .library-toolbar, .filters-row {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch !important;
  }
  .library-toolbar select, .library-toolbar label, #filter-style, #filter-nature, #sort-products {
    width: 100%; min-height: 44px; font-size: 14px;
  }
  #category-tabs { display: flex; gap: 8px; overflow-x: auto; }
  #category-tabs button { flex: 0 0 auto; min-height: 44px; font-size: 13px; }
  footer { padding: 24px 16px; font-size: 13px !important; }
  img, video, iframe { max-width: 100%; }
  * { word-wrap: break-word; }
}

/* Move close button to be a sibling positioned against the card:
   wrap trick — place close AFTER content in DOM so we position relative to flex layout */
#product-modal.modal.show {
  /* Use a single centered stack: content defines size; close overlays its corner */
}
#product-modal.modal.show > .modal-close {
  /* Position relative to the flex item (modal-content) via sticky pairing:
     put both in a relative wrapper simulated by absolute on content's box */
  position: absolute !important;
}
/* Position close relative to modal-content box using JS-free approach:
   content is relative; we move close inside via absolute on the modal using
   the content's getBoundingClientRect — instead, nest close visually with: */
#product-modal .modal-content { position: relative !important; }
/* Close is sibling BEFORE content in HTML — use order + absolute on the flex container
   sized by content. Make modal a grid with one cell: */
#product-modal.modal.show {
  display: grid !important;
  place-items: center !important;
}
#product-modal.modal.show > .modal-content {
  grid-area: 1 / 1;
}
#product-modal.modal.show > .modal-close {
  grid-area: 1 / 1;
  align-self: start !important;
  justify-self: end !important;
  position: relative !important;
  top: -8px !important; right: -8px !important;
  transform: none !important;
  margin: -4px -4px 0 0 !important;
}

/* Admin WYSIWYG helpers */
.wys-outline { outline: 2px dashed #3b82f6; outline-offset: 2px; cursor: pointer; position: relative; }
.wys-outline::after {
  content: attr(data-hint); position: absolute; top: 4px; right: 4px;
  background: #3b82f6; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px;
}
.wys-dirty { outline-color: #f59e0b; background: rgba(245,158,11,.08); }

/* Round2b: remaining text floor */
.feature-points span, .feature-copy .kicker, .feature span,
.contact label, .contact label span, .contact form small,
.steps b, .lib-filter, .library-tools label, .library-tools select,
.category-inquiry, #category-inquiry, .catalogue-footer,
.modal-note, .feature-badge, .built-for span {
  font-size: 12px !important;
}
.contact label, .contact label span { font-size: 12px !important; letter-spacing: .02em; }
.feature-points span { font-size: 13px !important; line-height: 1.45; }
.steps b { font-size: 12px !important; }
@media (max-width: 860px) {
  .feature-points span, .contact label, .contact label span,
  .lib-filter, .library-tools label { font-size: 13px !important; }
}

/* Round2d — force >=12px over catalogue-page.css */
.back-button,
.category-page-bar a,
.library-tools,
.library-tools label,
.library-tools select,
.lib-filter,
.lib-filter span,
.library-card p,
.library-card span,
.library-card .sample-image,
.library-note,
.category-tabs button span,
.category-page-bar #category-inquiry,
.pagination button {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.library-card h3 { font-size: 16px !important; }
@media (max-width: 860px) {
  .back-button {
    font-size: 13px !important;
  }
  .back-button::before { content: none !important; }
  .lib-filter, .lib-filter span, .library-tools label, .library-tools select {
    font-size: 13px !important;
  }
  .library-card p, .library-card span, .library-note, .category-tabs button span {
    font-size: 12px !important;
  }
  .category-page-bar #category-inquiry { font-size: 12px !important; }
}

#library-count, .library-tools span, .library-tools * { font-size: 12px !important; }

/* Round2e — blanket mobile readable floor vs mobile-ux / phase CSS */
@media (max-width: 860px) {
  .library-tools span,
  #library-count,
  .library-card p,
  .library-card span,
  .library-card .sample-image,
  .library-note,
  .category-tabs button span,
  .category-page-bar #category-inquiry,
  .card-info p,
  .card-info span,
  .card-placeholder,
  .metrics span,
  .category-nav small,
  .hero-copy .kicker,
  .hero-label,
  .feature-copy .kicker,
  .feature-image span,
  .feature-points span,
  .steps b,
  .contact label,
  .contact form small,
  .contact-direct span,
  .trust-strip p,
  .catalogue-footer,
  .whatsapp,
  .whatsapp b,
  .topbar,
  .quick-nav a,
  .language-toggle,
  .header-tools .header-cta,
  footer {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .metrics strong { font-size: 22px !important; }
  .card-info h3, .library-card h3 { font-size: 15px !important; }
}