/* Dandelion homepage — mobile layout (home only). Desktop unchanged.
   Linked after dn-ui-audit.css. Scope: body[data-dn-home="1"] / :has(.hero-search-anchor). */

@media (max-width: 900px) {
  html:has([data-dn-home="1"]) {
    background: #fff !important;
  }
  body[data-dn-home="1"] {
    --dn-gold: #c9a227;
    --dn-navy: #013a51;
    --dn-ink: #111111;
    --dn-muted: #4b5563;
    background: #fff !important;
  }

  /* ---------- flatten stacked Zoho gutters so content uses the 2mm body edge ---------- */
  body[data-dn-home="1"] .theme-banner,
  body:has(.hero-search-anchor) .theme-banner,
  body[data-dn-home="1"] .zphero-full-screen,
  body:has(.hero-search-anchor) .zphero-full-screen,
  body[data-dn-home="1"] .hero-section,
  body:has(.hero-search-anchor) .hero-section,
  body[data-dn-home="1"] .zphero,
  body:has(.hero-search-anchor) .zphero,
  body[data-dn-home="1"] .zphero.zpapply-height,
  body:has(.hero-search-anchor) .zphero.zpapply-height {
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px;
    overflow: hidden;
  }

  body[data-dn-home="1"] .zphero-slides,
  body:has(.hero-search-anchor) .zphero-slides,
  body[data-dn-home="1"] .zphero-slide,
  body:has(.hero-search-anchor) .zphero-slide,
  body[data-dn-home="1"] .zphero-slider-container,
  body:has(.hero-search-anchor) .zphero-slider-container {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-dn-home="1"] .zpslider-img,
  body:has(.hero-search-anchor) .zpslider-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body[data-dn-home="1"] .zphero-slider-container,
  body:has(.hero-search-anchor) .zphero-slider-container,
  body[data-dn-home="1"] .zphero-slider-container .zpcontainer,
  body:has(.hero-search-anchor) .zphero-slider-container .zpcontainer,
  body[data-dn-home="1"] .zphero-slider-container .zprow,
  body:has(.hero-search-anchor) .zphero-slider-container .zprow,
  body[data-dn-home="1"] .zphero-slider-container .zpelem-col,
  body:has(.hero-search-anchor) .zphero-slider-container .zpelem-col {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-dn-home="1"] .zphero-slider-container,
  body:has(.hero-search-anchor) .zphero-slider-container {
    padding: 14px 10px 16px !important;
  }

  body[data-dn-home="1"] .zphero-slider-container .zprow,
  body:has(.hero-search-anchor) .zphero-slider-container .zprow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* empty spacer column above the titles */
  body[data-dn-home="1"] .zphero-slider-container .zpelem-col:first-child:not(:has(h1)):not(:has(h2)):not(:has(form)):not(:has(.re-search)),
  body:has(.hero-search-anchor) .zphero-slider-container .zpelem-col:first-child:not(:has(h1)):not(:has(h2)):not(:has(form)):not(:has(.re-search)) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- hero type: brand / title / lead (beat the 15px flatten) ---------- */
  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading,
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    text-align: start !important;
    text-justify: auto !important;
  }

  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="135, 111, 34"],
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="135, 111, 34"],
  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="244, 190, 35"],
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="244, 190, 35"] {
    display: inline !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }

  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="font-size:36px"] [style*="1, 58, 81"],
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="font-size:36px"] [style*="1, 58, 81"],
  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="font-size:36px"] code,
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="font-size:36px"] code {
    display: block !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    color: var(--dn-navy) !important;
    -webkit-text-fill-color: var(--dn-navy) !important;
    background: none !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    margin-top: 6px !important;
  }

  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="font-size:20px"],
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="font-size:20px"],
  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="font-size:20px"] span,
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="font-size:20px"] span,
  html body[data-dn-home="1"] .zphero-slider-container h2.zpheading [style*="font-size:20px"] code,
  html body:has(.hero-search-anchor) .zphero-slider-container h2.zpheading [style*="font-size:20px"] code {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    color: #1d3a4d !important;
    -webkit-text-fill-color: #1d3a4d !important;
    background: none !important;
  }

  /* ---------- search card: full column, stacked rows ---------- */
  body[data-dn-home="1"] .hero-search-anchor,
  body:has(.hero-search-anchor) .hero-search-anchor,
  body[data-dn-home="1"] .re-search-wrap,
  body:has(.hero-search-anchor) .re-search-wrap,
  body[data-dn-home="1"] .hero-search-anchor .re-search,
  body:has(.hero-search-anchor) .hero-search-anchor .re-search,
  body[data-dn-home="1"] .zphero-slider-container .zpelem-codesnippet,
  body:has(.hero-search-anchor) .zphero-slider-container .zpelem-codesnippet,
  body[data-dn-home="1"] .zphero-slider-container .zpsnippet-container,
  body:has(.hero-search-anchor) .zphero-slider-container .zpsnippet-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }

  body[data-dn-home="1"] .hero-search-anchor,
  body:has(.hero-search-anchor) .hero-search-anchor {
    margin-top: 10px !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-search,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-search {
    width: 100% !important;
    padding: 12px !important;
    row-gap: 10px !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-topRow,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-topRow {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-tab,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-tab {
    padding: 10px 14px !important;
    min-height: 40px !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-ai,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-ai {
    min-height: 40px !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-inputRow,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-inputRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-loc,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-loc {
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 13px !important;
    padding: 4px 12px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  html body[data-dn-home="1"] .hero-search-anchor .re-btn,
  html body:has(.hero-search-anchor) .hero-search-anchor .re-btn {
    width: 100% !important;
    flex: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    font-size: 15px !important;
  }

  /* ---------- page sections: one gutter, full width cards ---------- */
  body[data-dn-home="1"] .theme-content-area .zpcontainer,
  body:has(.hero-search-anchor) .theme-content-area .zpcontainer,
  body[data-dn-home="1"] .theme-content-area .zpcontainer-fluid,
  body:has(.hero-search-anchor) .theme-content-area .zpcontainer-fluid,
  body[data-dn-home="1"] .theme-content-area .zprow,
  body:has(.hero-search-anchor) .theme-content-area .zprow,
  body[data-dn-home="1"] .theme-content-area .zpelem-col,
  body:has(.hero-search-anchor) .theme-content-area .zpelem-col {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-dn-home="1"] .theme-content-area .zpsection,
  body:has(.hero-search-anchor) .theme-content-area .zpsection {
    padding-inline: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* ---------- listings ---------- */
  html body[data-dn-home="1"] .z-lux,
  html body:has(.hero-search-anchor) .z-lux {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 12px !important;
    color: var(--dn-ink) !important;
  }

  html body[data-dn-home="1"] .z-lux__title,
  html body:has(.hero-search-anchor) .z-lux__title {
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-shadow: none !important;
    letter-spacing: -0.02em !important;
  }

  html body[data-dn-home="1"] .z-lux__header,
  html body:has(.hero-search-anchor) .z-lux__header {
    text-align: start !important;
  }

  html body[data-dn-home="1"] .z-lux__line,
  html body:has(.hero-search-anchor) .z-lux__line {
    margin-inline: 0 !important;
  }

  html body[data-dn-home="1"] .zpsection:has(.z-lux),
  html body:has(.hero-search-anchor) .zpsection:has(.z-lux),
  html body[data-dn-home="1"] .zpsection:has(.dn-process-en),
  html body:has(.hero-search-anchor) .zpsection:has(.dn-process-en) {
    background: #fff !important;
  }

  html body[data-dn-home="1"] .z-lux__kicker,
  html body:has(.hero-search-anchor) .z-lux__kicker,
  html body[data-dn-home="1"] .z-lux__sub,
  html body:has(.hero-search-anchor) .z-lux__sub {
    text-shadow: none !important;
    letter-spacing: 0.12em !important;
  }

  html body[data-dn-home="1"] .z-lux__tabs,
  html body:has(.hero-search-anchor) .z-lux__tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 14px 0 16px !important;
  }

  html body[data-dn-home="1"] .force-clear-bg .z-lux__tab,
  html body:has(.hero-search-anchor) .force-clear-bg .z-lux__tab,
  html body[data-dn-home="1"] .z-lux__tab,
  html body:has(.hero-search-anchor) .z-lux__tab {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #111 !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  html body[data-dn-home="1"] .force-clear-bg .z-lux__tab.is-active,
  html body:has(.hero-search-anchor) .force-clear-bg .z-lux__tab.is-active,
  html body[data-dn-home="1"] .z-lux__tab.is-active,
  html body:has(.hero-search-anchor) .z-lux__tab.is-active {
    background: #111 !important;
    color: #fff !important;
  }

  html body[data-dn-home="1"] .z-lux__grid,
  html body:has(.hero-search-anchor) .z-lux__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body[data-dn-home="1"] .force-clear-bg .z-card,
  html body:has(.hero-search-anchor) .force-clear-bg .z-card,
  html body[data-dn-home="1"] .z-card,
  html body:has(.hero-search-anchor) .z-card {
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  html body[data-dn-home="1"] .force-clear-bg .z-card__body,
  html body:has(.hero-search-anchor) .force-clear-bg .z-card__body {
    background: #fff !important;
  }

  html body[data-dn-home="1"] .z-card__name,
  html body:has(.hero-search-anchor) .z-card__name {
    font-size: 17px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* ---------- process ---------- */
  body[data-dn-home="1"] .dn-process-en,
  body:has(.hero-search-anchor) .dn-process-en,
  body[data-dn-home="1"] .dn-process-fa,
  body:has(.hero-search-anchor) .dn-process-fa,
  body[data-dn-home="1"] .dn-process-ar,
  body:has(.hero-search-anchor) .dn-process-ar {
    padding: 8px 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-dn-home="1"] .dn-process-en h2,
  body:has(.hero-search-anchor) .dn-process-en h2,
  body[data-dn-home="1"] .dn-process-fa h2,
  body:has(.hero-search-anchor) .dn-process-fa h2,
  body[data-dn-home="1"] .dn-process-ar h2,
  body:has(.hero-search-anchor) .dn-process-ar h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin: 8px 0 10px !important;
  }

  body[data-dn-home="1"] .dn-process-grid,
  body:has(.hero-search-anchor) .dn-process-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  body[data-dn-home="1"] .dn-process-step,
  body:has(.hero-search-anchor) .dn-process-step {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 16px !important;
  }

  /* ---------- about + buttons ---------- */
  body[data-dn-home="1"] .theme-content-area h2,
  body:has(.hero-search-anchor) .theme-content-area .zpelem-heading h2 {
    overflow-wrap: anywhere;
  }

  body[data-dn-home="1"] .zpbutton-group-container,
  body:has(.hero-search-anchor) .zpbutton-group-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body[data-dn-home="1"] .zpbutton,
  body:has(.hero-search-anchor) .zpbutton,
  body[data-dn-home="1"] .zpbutton-wrapper,
  body:has(.hero-search-anchor) .zpbutton-wrapper {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  body[data-dn-home="1"] .zpelem-text p,
  body:has(.hero-search-anchor) .zpelem-text p {
    text-align: start !important;
    text-justify: auto !important;
    overflow-wrap: anywhere;
  }

  /* ---------- Why Dandelion ---------- */
  html body[data-dn-home="1"] .zpelem-imageheadingtext,
  html body:has(.hero-search-anchor) .zpelem-imageheadingtext,
  html body[data-dn-home="1"] .zpimageheadingtext-container,
  html body:has(.hero-search-anchor) .zpimageheadingtext-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body[data-dn-home="1"] .theme-content-area-inner img.zpimage[src*="IMG_1730"],
  html body:has(.hero-search-anchor) .theme-content-area-inner img.zpimage[src*="IMG_1730"],
  html body[data-dn-home="1"] .theme-content-area-inner img[data-src*="IMG_1730"],
  html body:has(.hero-search-anchor) .theme-content-area-inner img[data-src*="IMG_1730"] {
    width: auto !important;
    max-width: 160px !important;
    max-inline-size: 160px !important;
    height: auto !important;
    max-height: 120px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    margin-inline: 0 !important;
    display: block !important;
  }

  html body[data-dn-home="1"] .zpelem-imageheadingtext figure,
  html body:has(.hero-search-anchor) .zpelem-imageheadingtext figure,
  html body[data-dn-home="1"] .zpelem-imageheadingtext .zpimage-data-ref,
  html body:has(.hero-search-anchor) .zpelem-imageheadingtext .zpimage-data-ref {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body[data-dn-home="1"] .zpimage-heading,
  html body:has(.hero-search-anchor) .zpimage-heading {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 4px 0 8px !important;
  }

  body[data-dn-home="1"] .zpelem-imageheadingtext ul,
  body:has(.hero-search-anchor) .zpelem-imageheadingtext ul {
    padding-inline-start: 1.15em !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  body[data-dn-home="1"] .zpelem-imageheadingtext li,
  body:has(.hero-search-anchor) .zpelem-imageheadingtext li,
  body[data-dn-home="1"] .zpelem-imageheadingtext p,
  body:has(.hero-search-anchor) .zpelem-imageheadingtext p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    text-align: start !important;
  }

  /* ---------- footer logos stay small ---------- */
  body[data-dn-home="1"] .theme-footer-area img,
  body:has(.hero-search-anchor) .theme-footer-area img,
  body[data-dn-home="1"] .theme-footer img,
  body:has(.hero-search-anchor) .theme-footer img {
    max-height: 64px !important;
    max-width: min(160px, 100%) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body[data-dn-home="1"] a[href*="wa.me"],
  body:has(.hero-search-anchor) a[href*="wa.me"] {
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---------- footer tap targets ---------- */
  body[data-dn-home="1"] .theme-footer-area,
  body:has(.hero-search-anchor) .theme-footer-area,
  body[data-dn-home="1"] .theme-footer,
  body:has(.hero-search-anchor) .theme-footer,
  body[data-dn-home="1"] [class*="footer"],
  body:has(.hero-search-anchor) [class*="footer"] {
    box-sizing: border-box !important;
  }

  body[data-dn-home="1"] .theme-footer-area a,
  body:has(.hero-search-anchor) .theme-footer-area a,
  body[data-dn-home="1"] .theme-footer a,
  body:has(.hero-search-anchor) .theme-footer a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ---------- About photo: stacked is correct; kill phone-shaped leftover box ---------- */
  html body[data-dn-home="1"] .dn-home-about-photo,
  html body[data-dn-home="1"] .dn-home-about-photo .zpelem-gallery,
  html body[data-dn-home="1"] .dn-home-about-photo .zpgallery-container,
  html body[data-dn-home="1"] .dn-home-about-photo .zpfilmstrip,
  html body[data-dn-home="1"] .dn-home-about-photo .zpfilmstrip-outter,
  html body[data-dn-home="1"] .dn-home-about-photo .zpfilmstrip-overflow-hidden,
  html body[data-dn-home="1"] .dn-home-about-photo .zpfilmstrip-inner,
  html body[data-dn-home="1"] .dn-home-about-photo .zpfilmstrip-item,
  html body[data-dn-home="1"] .dn-home-about-photo figure,
  html body[data-dn-home="1"] .dn-home-about-photo .zpimage-container,
  html body[data-dn-home="1"] .zpcol-md-5 .zpelem-image,
  html body[data-dn-home="1"] .zpcol-md-5 .zpimage-container,
  html body[data-dn-home="1"] .zpcol-md-5 .zpelem-image figure {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body[data-dn-home="1"] .dn-home-about-photo img,
  html body[data-dn-home="1"] .dn-home-about-photo .zpimage,
  html body[data-dn-home="1"] .zpcol-md-5 .zpelem-image img.zpimage,
  html body[data-dn-home="1"] .zpcol-md-5 .zpimage-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 240px !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border-radius: 16px !important;
  }

  html body[data-dn-home="1"] .dn-home-about-photo .zpcarousel-arrows-container,
  html body[data-dn-home="1"] .dn-home-about-photo figcaption,
  html body[data-dn-home="1"] .dn-home-about-photo .hb-grid-caption {
    display: none !important;
  }

  html body[data-dn-home="1"] .dn-home-about-copy .zpbutton-group-container,
  html body[data-dn-home="1"] .zpelem-buttongroup .zpbutton-group-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  html body[data-dn-home="1"] .dn-home-about-copy .zpbutton,
  html body[data-dn-home="1"] .dn-home-about-copy .zpbutton-wrapper,
  html body[data-dn-home="1"] .zpelem-buttongroup .zpbutton,
  html body[data-dn-home="1"] .zpelem-buttongroup .zpbutton-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 900px) and (min-width: 0) {
  html[dir="rtl"] body[data-dn-home="1"] .hero-search-anchor input.re-input,
  html[lang^="fa"] body[data-dn-home="1"] .hero-search-anchor input.re-input,
  html[lang^="ar"] body[data-dn-home="1"] .hero-search-anchor input.re-input {
    direction: rtl !important;
    text-align: right !important;
  }
}