/* TEARDROP v78 — mobile responsive patch
   Load AFTER site.css. Desktop styles are untouched. */

/* Safety against accidental horizontal overflow */
html, body { max-width: 100%; }
img, video, iframe, svg { max-width: 100%; }

@media (max-width: 1050px) {
  html, body { overflow-x: clip; }

  /* Header / mobile navigation */
  .site-header { position: sticky; top: 0; z-index: 1000; }
  .site-header .topbar {
    min-height: 68px !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
  }
  .site-brand { flex: 0 0 auto; min-width: 0; }
  .site-brand span { white-space: nowrap; }
  .menu-toggle {
    display: grid !important;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0 !important;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .main-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 68px) !important;
    padding: 8px 18px 18px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #101011 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,.45);
  }
  .main-menu.open { display: flex !important; }

  /* Old v78 mobile rules hid first/third links. Force them visible. */
  .main-menu a,
  .topbar nav a:nth-child(1),
  .topbar nav a:nth-child(3),
  .menu-parent-row > a {
    display: block !important;
  }
  .main-menu > a,
  .menu-parent-row > a {
    min-height: 48px;
    padding: 13px 2px !important;
    font-size: 15px !important;
    line-height: 1.35;
  }
  .main-menu > a { border-top: 1px solid var(--line); }
  .main-menu > a:first-child { border-top: 0; }
  .menu-item { border-top: 1px solid var(--line) !important; }
  .menu-parent-row {
    min-height: 48px;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .dropdown-toggle {
    display: grid !important;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    font-size: 24px !important;
  }
  .dropdown,
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    display: none !important;
    position: static !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 4px 0 6px 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-left: 1px solid var(--line) !important;
    box-shadow: none !important;
    background: #0d0d0e !important;
  }
  .menu-item.submenu-open > .dropdown { display: block !important; }
  .dropdown a {
    display: block !important;
    min-height: 42px;
    padding: 10px 12px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* Global responsive grids */
  .hero-grid,
  .promo-grid,
  .config-layout,
  .organizer-config-layout,
  .component-detail-grid,
  .custom-request-layout,
  .custom-detail-grid,
  .special-grid,
  .order-panel,
  .contacts-layout,
  .contact-production-grid,
  .contact-location-row,
  .media-featured,
  .about-intro-grid,
  .rental-partner-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .summary,
  .organizer-summary { position: static !important; }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-photo,
  .hero-photo img,
  .photo-placeholder { min-height: 280px !important; }

  .about-cta-box { align-items: flex-start; flex-direction: column; }
  .media-grid-v38 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Typography */
  .page-hero { padding-top: 42px !important; padding-bottom: 34px !important; }
  .page-hero h1,
  .hero h1,
  .home-hero h1,
  .contacts-hero h1,
  .media-hero h1,
  .about-hero h1,
  .component-detail-info h1,
  .custom-project-info h1,
  .organizer-description h2 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .section h2,
  .contact-section-head h2 {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }
  .hero p,
  .page-hero p,
  .contacts-hero p,
  .media-hero p,
  .about-hero p,
  .prose,
  .lead { font-size: 16px !important; }

  /* Home */
  .home-hero { min-height: 500px !important; }
  .home-hero-inner { padding-top: 46px !important; padding-bottom: 58px !important; }
  .home-hero-copy { max-width: 100% !important; }
  .home-hero-actions { gap: 9px !important; }
  .home-category-grid,
  .home-quick-grid { grid-template-columns: minmax(0,1fr) !important; }
  .home-category-card { min-height: 290px !important; }

  /* Catalogs */
  .catalog-grid,
  .media-grid-v38,
  .offer-grid,
  .media-grid { grid-template-columns: minmax(0,1fr) !important; }
  .catalog-card .body,
  .offer-body,
  .media-body { padding: 16px !important; }
  .catalog-card .actions { flex-wrap: wrap; }
  .catalog-card .actions .btn { flex: 1 1 auto; justify-content: center; }
  .catalog-toolbar { grid-template-columns: minmax(0,1fr) !important; }
  .organizer-catalog-toolbar { align-items: stretch !important; flex-direction: column !important; }
  .category-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .category-pills a { flex: 0 0 auto; white-space: nowrap; }

  /* Component detail */
  .component-detail-info { padding: 20px !important; }
  .component-detail-main { width: 100%; }
  .detail-buy { align-items: stretch !important; flex-direction: column !important; }
  .detail-buy input { width: 100% !important; }
  .component-thumbs,
  .organizer-thumbs,
  .custom-thumbs { -webkit-overflow-scrolling: touch; }
  .component-thumb { width: 76px !important; min-width: 76px !important; height: 58px !important; }

  /* Campers / configurators */
  .choice-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* Two compact option cards per row on phones. */
  .options-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .option-card { min-width: 0 !important; }
  .option-media { aspect-ratio: 16/10 !important; }
  .option-toggle {
    padding: 10px !important;
    gap: 6px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
  }
  .option-toggle > span {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  .option-toggle strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }
  .option-toggle small {
    font-size: 12px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .option-toggle b {
    grid-column: 1 !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 15px !important;
  }
  .option-toggle i {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end;
  }
  .gallery-count {
    right: 5px !important;
    bottom: 5px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
  .option-mini-prev,
  .option-mini-next {
    width: 32px !important;
    height: 38px !important;
  }

  /*
   * On mobile the summary must appear AFTER the options but BEFORE the order form.
   * display:contents lets the inner config blocks participate in the parent grid,
   * so we can reorder only the last contact block without touching desktop markup.
   */
  .config-layout { gap: 0 !important; }
  .config-layout > div:first-child { display: contents !important; }
  .config-layout > .summary {
    order: 50 !important;
    margin: 18px 0 8px !important;
  }
  .config-layout > div:first-child > .config-block:has(#orderForm),
  .config-layout > div:first-child > .config-block:has(.order-form) {
    order: 100 !important;
  }

  .choice-card { min-height: 128px !important; }
  .package-equipment-list { grid-template-columns: minmax(0,1fr) !important; }
  .config-block { padding-top: 24px !important; padding-bottom: 24px !important; }
  .summary { padding: 18px !important; }

  /* Organizer detail */
  .organizer-page-config .organizer-head {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 24px !important;
    padding-bottom: 34px !important;
  }
  .organizer-page-config .organizer-photo,
  .organizer-page-config .organizer-photo img { min-height: 240px !important; }
  .organizer-summary { padding: 18px !important; }
  .simple-option-quantity { align-items: flex-start !important; flex-direction: column !important; }
  .simple-option-quantity .qty-price {
    width: 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
  }

  /* Model galleries: two columns on phones, not one huge image at a time */
  .model-gallery {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-height: 560px !important;
    gap: 8px !important;
    padding-right: 4px !important;
  }

  /* Lightboxes / enlarged photo arrows */
  .lightbox { padding: 58px 8px 20px !important; }
  .lb-content { width: 100%; max-width: 100% !important; }
  .lb-content img { max-width: 100%; max-height: 76dvh !important; }
  .lb-close { right: 10px !important; top: 10px !important; width: 44px; height: 44px; }
  .lb-prev,
  .lb-next { width: 44px !important; height: 54px !important; font-size: 30px !important; }
  .lb-prev { left: 4px !important; }
  .lb-next { right: 4px !important; }
  .organizer-lightbox {
    grid-template-columns: 44px minmax(0,1fr) 44px !important;
    padding: 14px 4px !important;
  }
  .organizer-lightbox .olb-prev,
  .organizer-lightbox .olb-next { width: 40px !important; height: 50px !important; }

  /* Contacts */
  .contacts-hero { min-height: 280px !important; }
  .contacts-hero-inner { padding-top: 54px !important; padding-bottom: 36px !important; }
  .contact-data-grid,
  .contact-location-row .contact-data-grid { grid-template-columns: minmax(0,1fr) !important; }
  .production-info,
  .contact-info-card { padding: 18px !important; }
  .production-info .contact-data a,
  .production-info .contact-data strong,
  .contact-data a,
  .contact-data strong {
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }
  .contact-production-grid .contact-map-wrap,
  .contact-location-row .contact-map-wrap,
  .contact-production-grid iframe,
  .contact-location-row iframe { min-height: 280px !important; }
  .contact-map-open { max-width: calc(100% - 24px); }

  /* Media / About */
  .media-hero-inner,
  .about-hero-inner { min-height: 280px !important; padding-top: 46px !important; padding-bottom: 46px !important; }
  .media-featured-photo img,
  .media-placeholder { min-height: 240px !important; }
  .media-featured-copy { padding: 20px !important; }
  .about-cta-box { padding: 20px !important; }

  /* Rental */
  .rental-partner-card { padding: 16px !important; }
  .rental-partner-info { display: block !important; }
  .rental-partner-logo { width: 100% !important; max-width: none !important; margin-bottom: 14px; }
  .partner-gallery { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .rental-map,
  .rental-map iframe { min-height: 260px !important; }

  /* Forms */
  .form-row,
  #componentOrderForm .form-row { grid-template-columns: minmax(0,1fr) !important; }
  .order-panel { padding: 18px !important; }
  input, select, textarea, button { max-width: 100%; }

  /* Videos */
  .video-row { flex-wrap: wrap !important; gap: 20px !important; }
  .video-row > .video-block { flex: 1 1 100% !important; max-width: none !important; }
  .youtube-section { padding-top: 38px !important; padding-bottom: 42px !important; }

  /* Documents */
  .document-grid { grid-template-columns: minmax(0,1fr) !important; }
  .document-card { grid-template-columns: minmax(0,1fr) !important; }
  .document-qr { justify-self: start !important; }

  /* Footer */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
  }

  /* Floating cart */
  .cart-panel { width: 100% !important; max-width: 100% !important; padding: 18px !important; }
  .cart-fab { right: 12px !important; bottom: 12px !important; padding: 12px 15px !important; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }

  .site-brand-mark { width: 28px !important; height: 28px !important; }
  .site-brand span { font-size: 17px; }

  .home-hero h1,
  .page-hero h1,
  .hero h1,
  .contacts-hero h1,
  .media-hero h1,
  .about-hero h1,
  .component-detail-info h1,
  .custom-project-info h1,
  .organizer-description h2 {
    font-size: 32px !important;
  }

  .home-hero { min-height: 460px !important; }
  .home-hero-actions .btn,
  .hero-actions .btn,
  .form-actions .btn { width: 100%; justify-content: center; }

  .catalog-card .actions { flex-direction: column; align-items: stretch !important; }
  .catalog-card input[type=number],
  .component-qty { width: 100% !important; }

  .model-gallery { grid-template-columns: minmax(0,1fr) !important; max-height: 520px !important; }

  .color-choice { width: 100%; }
  .summary-total,
  .summary-total-row { align-items: flex-start !important; gap: 8px; flex-direction: column; }

  .media-card-top { align-items: flex-start; flex-direction: column; }
  .partner-gallery { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }

  .lb-caption { gap: 10px; flex-direction: column; }
}

/* Touch devices: avoid hover-only behavior and ensure minimum tap target */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .menu-toggle,
  .dropdown-toggle,
  .component-thumb,
  .organizer-thumb,
  .custom-thumb,
  .lb-close,
  .lb-prev,
  .lb-next,
  .olb-close,
  .olb-prev,
  .olb-next { min-height: 44px; }
}


/* Very narrow phones: keep option cards readable. */
@media (max-width: 340px) {
  .options-grid { grid-template-columns: minmax(0,1fr) !important; }
}


/* === V3: organizer configurator mobile order ===
   Desired order:
   01 Color -> 02 Options -> Summary -> 03 Order form
*/
@media (max-width: 980px) {
  .organizer-config-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 0 !important;
  }

  .organizer-config-layout > .organizer-config-main {
    display: contents !important;
  }

  .organizer-config-layout > .organizer-config-main > .organizer-config-block:nth-child(1) {
    order: 10 !important;
  }

  .organizer-config-layout > .organizer-config-main > .organizer-config-block:nth-child(2) {
    order: 20 !important;
  }

  .organizer-config-layout > .organizer-summary {
    order: 30 !important;
    margin: 18px 0 !important;
  }

  .organizer-config-layout > .organizer-config-main > .organizer-order-block {
    order: 40 !important;
    padding-top: 24px !important;
  }
}


/* === V4: components catalog desktop grid ===
   Equal track widths on desktop. Long product names must not stretch a column.
   Wide desktop: 4 compact cards per row.
*/
.catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-card,
.catalog-card .body,
.catalog-card .body h3,
.catalog-card .body h3 a {
  min-width: 0;
}

.catalog-card .body h3,
.catalog-card .body h3 a {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (min-width: 1200px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .catalog-card .body {
    padding: 16px;
  }
}