/* =========================================================
   RESPONSIVE-ONLY PATCH
   Desktop design (> 980px) is intentionally untouched.
   This file only prevents overflow and improves stacking on
   tablet/mobile screens without changing the site's styling.
   ========================================================= */

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Prevent grid/flex children from forcing horizontal overflow. */
  .container,
  .nav,
  .hero-content,
  .section-head,
  .grid,
  .grid-3,
  .grid-4,
  .stat-wrap,
  .about-grid,
  .contact-grid,
  .catalogue-card,
  .catalogue-main-card,
  .product-grid,
  .product-section,
  .model-card,
  .features-grid,
  .footer-main,
  .cta,
  .form-row,
  .actions,
  .step {
    min-width: 0;
    max-width: 100%;
  }

  .grid > *,
  .grid-3 > *,
  .grid-4 > *,
  .stat-wrap > *,
  .about-grid > *,
  .contact-grid > *,
  .catalogue-card > *,
  .catalogue-main-card > *,
  .product-grid > *,
  .product-section > *,
  .model-card > *,
  .features-grid > *,
  .footer-main > *,
  .cta > *,
  .form-row > *,
  .hero-content > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Existing desktop navigation becomes the existing mobile menu. */
  .nav-links {
    display: none !important;
  }

  .menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto;
  }

  .nav-actions,
  .brand-wrap {
    min-width: 0 !important;
  }

  /* Two-column content areas stack cleanly on tablet/mobile. */
  .hero-content,
  .about-grid,
  .contact-grid,
  .catalogue-card,
  .catalogue-main-card,
  .product-section,
  .model-card,
  .cta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Standard card grids remain two columns on tablet. */
  .grid-3,
  .grid-4,
  .stat-wrap,
  .product-grid,
  .features-grid,
  .mini-grid,
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Media must always stay inside its card/column. */
  img,
  picture,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
  }

  img,
  video,
  canvas,
  svg {
    height: auto;
  }

  iframe {
    width: 100%;
  }

  /* Long content should wrap instead of widening the page. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  span,
  li,
  .address-lines,
  .footer-address-row,
  .contact-address-row {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Tables/code remain usable without breaking page width. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .container,
  .nav {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* One-column layout on phones. */
  .grid-3,
  .grid-4,
  .stat-wrap,
  .product-grid,
  .features-grid,
  .mini-grid,
  .footer-main,
  .form-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

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

  .hero-btns,
  .actions {
    width: 100%;
    max-width: 100%;
  }

  .hero-btns .btn,
  .actions .btn,
  form .btn {
    max-width: 100%;
    white-space: normal;
  }

  /* Forms fit the viewport even when fields have inline sizing. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
  }

  .mobile-menu {
    width: min(390px, 88vw) !important;
    max-width: 88vw !important;
  }

  .brand-wrap,
  .brand-text,
  .nav-actions {
    min-width: 0 !important;
  }

  .brand-text strong,
  .brand-text span {
    max-width: 100%;
  }

  .footer-address-row,
  .contact-address-row {
    align-items: flex-start !important;
  }

  .address-lines {
    max-width: 100% !important;
  }

  /* Keep fixed contact buttons inside narrow phones. */
  .floating-actions {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 390px) {
  .container,
  .nav {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }

  .nav {
    gap: 8px !important;
  }

  .nav-actions {
    gap: 6px !important;
  }

  .brand-text strong {
    line-height: 1.15;
  }
}

/* =========================================================
   FINAL RESPONSIVE LOCK — PRODUCT / PANEL PAGES
   Keeps desktop (>980px) unchanged. Fixes phone + tablet
   overflow, oversized titles/images and specification tables.
   ========================================================= */

@media (max-width: 980px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  main,
  section,
  header,
  footer,
  .page-hero,
  .product-model-nav,
  .quick-nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .container,
  .nav,
  .page-hero .container,
  .product-model-nav .container {
    width: calc(100% - 32px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
  }

  /* Hero: never crop the title or description on tablets. */
  .page-hero .container > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(34px, 5.8vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .page-hero .lead {
    width: 100% !important;
    max-width: 760px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .page-hero .btn {
    white-space: normal !important;
    text-align: center !important;
  }

  /* Model selector stays inside the viewport and uses a clean grid. */
  .product-model-nav .container {
    padding: 16px !important;
    overflow: hidden !important;
  }

  .model-nav-links {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-model-nav a {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Product cards: force a true one-column tablet layout. */
  .model-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "image"
      "details" !important;
    gap: 18px !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  .product-title-wrap,
  .model-card .product-img,
  .model-card .product-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .product-title-wrap h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(28px, 4.8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.6px !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  /* Remove fixed image-area height that made iPad layouts huge. */
  .model-card .product-img,
  .product-img,
  .catalogue-image-box {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .model-card .product-img img,
  .model-card .product-photo,
  .model-card .product-real-img,
  .model-card .product-image,
  .product-img img,
  .catalogue-image-box img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .model-card .product-info {
    overflow: visible !important;
  }

  .model-card table,
  .product-info table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* At tablet widths both tables fit without forcing page overflow. */
  .product-info table:not(.price-table),
  .price-table {
    table-layout: fixed !important;
  }

  .product-info table:not(.price-table) th,
  .product-info table:not(.price-table) td,
  .price-table th,
  .price-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 620px) {
  .container,
  .nav,
  .page-hero .container,
  .product-model-nav .container {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .page-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-hero h1 {
    font-size: clamp(30px, 8.4vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.7px !important;
  }

  .page-hero .lead {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .page-hero .container > div:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .page-hero .container > div:last-child .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .product-model-nav .container {
    padding: 14px !important;
  }

  .model-nav-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .model-nav-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .product-model-nav a {
    min-height: 44px !important;
    padding: 8px 7px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  .model-card {
    padding: 15px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }

  .product-title-wrap .sub-title {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 7px !important;
  }

  .product-title-wrap h2 {
    font-size: clamp(23px, 6.8vw, 28px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.4px !important;
  }

  .model-card .product-img,
  .product-img,
  .catalogue-image-box {
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 16px !important;
  }

  .model-card .product-img img,
  .model-card .product-photo,
  .model-card .product-real-img,
  .model-card .product-image,
  .product-img img,
  .catalogue-image-box img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 235px !important;
  }

  .model-card .product-info p {
    font-size: 13.5px !important;
    line-height: 1.58 !important;
  }

  /* General details table. */
  .product-info table:not(.price-table) {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .product-info table:not(.price-table) th,
  .product-info table:not(.price-table) td {
    font-size: 11.5px !important;
    padding: 8px 7px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Five-column specifications: fit completely on phone screens. */
  .price-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .price-table tbody {
    display: table-row-group !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .price-table tr {
    display: table-row !important;
  }

  .price-table th,
  .price-table td {
    display: table-cell !important;
    min-width: 0 !important;
    padding: 7px 3px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: center !important;
  }

  .price-table th:nth-child(1),
  .price-table td:nth-child(1) { width: 15% !important; }
  .price-table th:nth-child(2),
  .price-table td:nth-child(2) { width: 27% !important; }
  .price-table th:nth-child(3),
  .price-table td:nth-child(3) { width: 16% !important; }
  .price-table th:nth-child(4),
  .price-table td:nth-child(4) { width: 20% !important; }
  .price-table th:nth-child(5),
  .price-table td:nth-child(5) { width: 22% !important; }

  .floating-actions {
    right: 8px !important;
    bottom: 8px !important;
    gap: 7px !important;
  }

  .float-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 390px) {
  .container,
  .nav,
  .page-hero .container,
  .product-model-nav .container {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }

  .page-hero h1 {
    font-size: 29px !important;
  }

  .model-nav-links {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .product-title-wrap h2 {
    font-size: 23px !important;
  }

  .price-table th,
  .price-table td {
    font-size: 9.8px !important;
    padding: 6px 2px !important;
  }
}


/* =========================================================
   FINAL CTA / CONTACT MOBILE SPACING PATCH — 2026-08-18
   Desktop (>980px) intentionally unchanged.
   ========================================================= */
@media (max-width: 980px) {
  /* Remove the oversized blank band before quotation boxes. */
  .pre-cta-section {
    padding-bottom: 30px !important;
  }

  .cta-section {
    padding-top: 0 !important;
    padding-bottom: 36px !important;
    margin: 0 !important;
  }

  .cta-section .container,
  .cta-section .cta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cta {
    padding: 28px 24px !important;
    gap: 18px !important;
    overflow: hidden !important;
  }

  .cta > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cta > div:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .cta .btn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .cta h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 5.2vw, 38px) !important;
    line-height: 1.1 !important;
    overflow-wrap: normal !important;
  }

  .cta p {
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Contact page cards / map stay fully inside tablet viewport. */
  .contact-grid,
  .contact-grid > *,
  .panel,
  .contact-cards,
  .contact-card,
  .map-box {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .pre-cta-section {
    padding-bottom: 22px !important;
  }

  .cta-section {
    padding-top: 0 !important;
    padding-bottom: 28px !important;
  }

  .cta {
    padding: 24px 18px !important;
    border-radius: 24px !important;
    gap: 16px !important;
  }

  .cta h2 {
    font-size: clamp(27px, 8vw, 32px) !important;
    margin-bottom: 10px !important;
  }

  .cta p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .contact-card {
    padding: 16px !important;
  }

  .contact-card > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}