/* LOB 02 - Breakfast Cereals (Wholesale)
   Extracted verbatim from <style>
   in design file lob-02-cereals-wholesale.html (block 3 of 3).
   Load order matters -- keep the numeric prefix. */

    .wrange-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .wrange-head-text {
      max-width: 60%;
    }

    .wrange-nav-row {
      margin: 0;
      display: flex;
      align-items: center;
    }

    @media (max-width: 768px) {
      .wrange-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }

      .wrange-head-text {
        max-width: 100%;
      }
    }




    /* ============================================================
       TABLET (≤ 1024px) OVERRIDES
       ============================================================ */
    @media (max-width: 1024px) {

      /* Hide trust section on mobile/tablet */
      .whero-trust {
        display: none !important;
      }

      /* Hero section - match Retail hero style */
      .whero {
        padding-top: 0 !important;
        position: relative;
        overflow: hidden;
      }

      .whero-stage {
        display: block !important;
      }

      .whero-photo {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        margin-top: 0 !important;
        z-index: 0 !important;
      }

      /* Overlay veil matching Retail style so text is readable */
      .whero-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(236, 229, 216, 0.93) 30%, rgba(236, 229, 216, 0.5)) !important;
        z-index: 1;
      }

      .whero-shell {
        position: relative !important;
        z-index: 2 !important;
        padding-top: 130px !important;
        padding-bottom: 60px !important;
      }

      /* Hero heading scale */
      .whero h1 {
        font-size: clamp(36px, 6vw, 64px);
      }

      .whero-actions {
        flex-wrap: wrap;
        gap: 14px;
      }

      /* Pricing grid: override inline style repeat(3,1fr) */
      .wprice-grid,
      [class*="wprice-grid"] {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        margin: 40px auto 0 !important;
      }

      .pr-card.c2,
      article.pr-card.c2 {
        transform: none !important;
      }

      /* Enquiry section form row stacks */
      .wf-row {
        grid-template-columns: 1fr !important;
      }

      /* Comparison table - horizontal scroll on tablet/mobile */
      .ctable2 {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        /* Enforce minimum column widths to trigger scroll instead of squishing */
        grid-template-columns: minmax(180px, 1.2fr) 160px 160px !important;
      }
    }

    /* ============================================================
       MOBILE (≤ 680px) OVERRIDES
       ============================================================ */
    @media (max-width: 680px) {

      /* Hero */
      .whero-shell {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
      }

      .whero h1 {
        font-size: clamp(32px, 9vw, 48px);
      }

      .whero-tag {
        font-size: 15px;
      }

      .whero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
      }

      /* Pricing section heading */
      .wpricing h2,
      section.wpricing h2 {
        font-size: clamp(28px, 8vw, 48px) !important;
      }

      /* Pricing grid single column, full width */
      .wprice-grid,
      [class*="wprice-grid"] {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        gap: 20px !important;
      }

      /* Each pricing card: reduce min-height */
      .pr-card,
      article.pr-card {
        min-height: 600px !important;
        padding: 30px 20px !important;
      }
        
      /* WhatsApp CTA in pricing card: allow wrap */
      article.pr-card a[href*="wa.me"] {
        min-width: unset !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Feature story section */
      .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }

      .feature-list {
        grid-template-columns: 1fr !important;
      }

      /* Comparison table (inherit scroll from 1024px) */
      .ctable2 {
        border-radius: 20px;
        padding-bottom: 10px !important;
      }

      /* Enquiry section */
      .wenq-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      .wf-row {
        grid-template-columns: 1fr !important;
      }

      /* Wrange section section heading */
      .wrange h2,
      section.wrange h2 {
        font-size: clamp(28px, 8vw, 44px);
      }

      /* Wpricing section padding */
      section.wpricing {
        padding: 60px 0 !important;
      }
    }