/* ============================================================================
   product-mobile.css — Mobile responsive fixes for PRODUCT PAGES ONLY
   ----------------------------------------------------------------------------
   Every rule is scoped under `body.mc-product`. Only the 15 product detail
   pages and the /products/ listing page carry that class, so no other page
   can be affected.

   Loaded AFTER each page's inline <style> block, and the `body.mc-product`
   prefix also raises specificity above it (0-2-1 vs 0-1-0), so these rules
   win on both counts.

   Targets: 320 / 360 / 375 / 390 / 414 / 430 px and up.

   Sections:
     1. Page level (overflow, gutters, tap targets)
     2. Fixed widgets — the right-side social rail was covering content
     3. Product DETAIL page  (.product-page / .product-hero / .specs-table)
     4. Product DETAIL page — inquiry modal (inline styles need !important)
     5. Product LISTING page (/products/)
     6. Narrow phones (430 / 360)
   ========================================================================== */


/* ==========================================================================
   1. PAGE LEVEL
   ========================================================================== */

@media (max-width: 768px) {

  body.mc-product {
    overflow-x: hidden;
    /* clear the fixed bottom social bar so it never covers the footer */
    padding-bottom: 66px;
  }

  body.mc-product img,
  body.mc-product video,
  body.mc-product iframe,
  body.mc-product svg {
    max-width: 100%;
  }

  body.mc-product .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Long machine names and spec strings must never push the page sideways */
  body.mc-product h1,
  body.mc-product h2,
  body.mc-product h3,
  body.mc-product h4,
  body.mc-product p,
  body.mc-product td,
  body.mc-product a {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Real tap targets everywhere */
  body.mc-product .btn-quote,
  body.mc-product .btn-primary,
  body.mc-product .btn-outline {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    line-height: 1.25;
  }

  body.mc-product .mobile-menu-toggle {
    display: block;
    padding: 8px 10px;
    margin: -8px -10px;
    font-size: 1.5rem;
    line-height: 1;
  }
}


/* ==========================================================================
   2. FIXED WIDGETS
   `.social-media-bar` is position:fixed at right:0; top:50% — a ~52px rail
   sitting on top of the page copy. On mobile it becomes a bottom action bar.

   Note: the detail pages use `.social-media-bar > .social-links` with no
   `.container` wrapper (unlike the home page), so these rules target both
   elements directly and work for either markup.
   ========================================================================== */

@media (max-width: 768px) {

  body.mc-product .social-media-bar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    z-index: 1400;
    border-radius: 0;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(135deg, #033051 0%, #1a4a6b 100%);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.22);
    display: block;
  }

  body.mc-product .social-media-bar .container {
    padding-left: 0;
    padding-right: 0;
  }

  body.mc-product .social-links {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
  }

  body.mc-product .social-link {
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.mc-product .social-link:hover {
    transform: none;
  }

  /* WhatsApp already appears as the first icon in the bar. Both of these were
     duplicate WhatsApp bubbles that also collided with the bar.
     (.contact-cta exists only on the /products/ listing page.) */
  body.mc-product .whatsapp-float,
  body.mc-product .contact-cta {
    display: none !important;
  }

  /* Inline styles on this button (left:30px;bottom:30px) need !important */
  body.mc-product #scrollToTopBtn {
    left: 14px !important;
    bottom: 76px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.35rem !important;
    z-index: 1300 !important;
  }
}


/* ==========================================================================
   3. PRODUCT DETAIL PAGE
   ========================================================================== */

@media (max-width: 768px) {

  /* 20px side padding on a 360px screen wastes space; header needs ~92px */
  body.mc-product .product-page {
    padding: 96px 16px 36px;
  }

  body.mc-product .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 8px;
  }

  body.mc-product .product-hero {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
  }

  body.mc-product .product-image {
    flex: 1 1 100%;
    padding: 12px;
    border-radius: 10px;
  }

  body.mc-product .product-image img {
    max-height: 260px;
  }

  body.mc-product .product-title {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    line-height: 1.25;
  }

  body.mc-product .product-model {
    font-size: 12px;
    letter-spacing: 0.4px;
  }

  body.mc-product .product-desc {
    font-size: 1rem;
    line-height: 1.6;
  }

  body.mc-product .product-info h3 {
    font-size: 1.15rem;
    margin-top: 24px !important;
  }

  /* ------------------------------------------------------------------
     Specs table — the main readability problem on this page.
     A 30%/70% two-column table at 360px gives the value column ~230px,
     so a long comma-separated feature list wrapped to 10+ lines against a
     narrow label. Tables cannot reflow, so each row becomes its own
     labelled card: label bar on top, value beneath at full width.
     ------------------------------------------------------------------ */
  body.mc-product .specs-table,
  body.mc-product .specs-table tbody,
  body.mc-product .specs-table tr,
  body.mc-product .specs-table td {
    display: block;
    width: 100%;
  }

  body.mc-product .specs-table {
    margin-top: 16px;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.mc-product .specs-table tr {
    margin-bottom: 14px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  body.mc-product .specs-table td {
    border-bottom: none;
    padding: 12px 14px;
  }

  body.mc-product .specs-table td:first-child {
    width: 100%;
    background: #f2f6fa;
    color: #033051;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 14px;
    border-bottom: 1px solid #e3e9ef;
  }

  body.mc-product .specs-table td:last-child {
    font-size: 0.97rem;
    line-height: 1.6;
    color: #555;
  }

  body.mc-product .cta-buttons {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }

  body.mc-product .cta-buttons .btn-quote {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }
}


/* ==========================================================================
   4. PRODUCT DETAIL PAGE — inquiry modal
   The modal is built from inline styles, so overrides need !important.
   Its field grid was a hard-coded 1fr 1fr, unusable at 360px.
   ========================================================================== */

@media (max-width: 768px) {

  /* The modal's inline z-index is 6000 but .main-header is 10000, so the fixed
     header covered the modal's title and its × close button. A full-screen
     overlay has to sit above the header. */
  body.mc-product #contactModal {
    padding: 12px !important;
    z-index: 10001 !important;
  }

  body.mc-product #contactModal > div {
    padding: 16px !important;
    max-height: 92vh !important;
  }

  /* the two-column field grid -> single column */
  body.mc-product #contactModalForm > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.mc-product #contactModalTitle {
    font-size: 1.3rem;
    padding-right: 36px;   /* clear the close button */
  }

  /* 16px minimum stops iOS Safari zooming the page on focus */
  body.mc-product #contactModalForm input,
  body.mc-product #contactModalForm select,
  body.mc-product #contactModalForm textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 12px !important;
  }

  body.mc-product #contactModalForm textarea {
    min-height: 110px !important;
  }

  body.mc-product #contactModalForm label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #033051;
  }

  /* action row: stacked, full width */
  body.mc-product #contactModalForm > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.mc-product #contactModalForm > div[style*="display:flex"] > button {
    width: 100% !important;
    min-height: 50px !important;
  }

  body.mc-product #contactModalClose {
    width: 44px !important;
    height: 44px !important;
    right: 6px !important;
    top: 6px !important;
    border-radius: 50% !important;
  }
}


/* ==========================================================================
   5. PRODUCT LISTING PAGE  (/products/)
   ========================================================================== */

@media (max-width: 768px) {

  body.mc-product .products-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 36px 16px;
    margin-top: 0;
  }

  body.mc-product .hero-left,
  body.mc-product .hero-right {
    max-width: 100%;
  }

  body.mc-product .hero-left h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  body.mc-product .hero-left p {
    font-size: 1rem !important;
    line-height: 1.6;
  }

  /* hero CTA pair is an inline-styled flex row -> stack it */
  body.mc-product .hero-left > div {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  body.mc-product .hero-left > div > a {
    width: 100%;
  }

  body.mc-product .products-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px;
  }

  body.mc-product .prod-thumb {
    height: 200px;
  }

  body.mc-product .prod-info {
    padding: 18px 16px;
    gap: 8px;
  }

  body.mc-product .prod-name {
    font-size: 1.15rem;
  }

  body.mc-product .prod-desc {
    font-size: 0.97rem;
    line-height: 1.55;
  }

  /* "Quote Now" / "View Details" side by side broke "View Details" onto two
     lines at 360px. Stack them full width instead. */
  body.mc-product .prod-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
  }

  body.mc-product .prod-actions .btn-primary,
  body.mc-product .prod-actions .btn-outline {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Inline-styled section headings (font-size:32px / 28px) and paddings */
  body.mc-product main section > .container > h2 {
    font-size: clamp(1.5rem, 6.2vw, 1.9rem) !important;
    line-height: 1.3;
    margin-bottom: 12px !important;
  }

  body.mc-product main section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  body.mc-product main section > .container > p {
    font-size: 1rem;
    line-height: 1.6;
  }
}


/* ==========================================================================
   6. NARROW PHONES
   ========================================================================== */

@media (max-width: 430px) {

  body.mc-product .product-image img {
    max-height: 230px;
  }

  body.mc-product .prod-thumb {
    height: 185px;
  }
}

@media (max-width: 360px) {

  body.mc-product .container,
  body.mc-product .product-page {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.mc-product .product-title {
    font-size: 1.28rem;
  }

  body.mc-product .product-image img {
    max-height: 205px;
  }

  body.mc-product .specs-table td:first-child {
    font-size: 0.9rem;
  }

  body.mc-product .specs-table td:last-child {
    font-size: 0.94rem;
  }

  body.mc-product .social-link {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.05rem;
  }

  body.mc-product .prod-thumb {
    height: 170px;
  }
}


/* ==========================================================================
   7. TOUCH DEVICES — hover transforms stick after a tap
   ========================================================================== */

@media (hover: none) {

  body.mc-product .prod-card:hover,
  body.mc-product .contact-cta:hover,
  body.mc-product .btn-quote:hover {
    transform: none;
  }
}