@media(max-width:767px){
  /* navbar */
  .navbar-inner{flex-wrap:wrap}
  .navbar-col{width:100%}
  .navbar-col--logo{text-align:center;justify-content:center;align-items:center}
  .navbar-logo-widget{text-align:center;width:100%}
  .navbar-logo-widget img{width:65%;margin:0 auto;display:block}
  .navbar-col--cta{align-items:center}
  .btn-order{font-size:25px}

  /* pricing cards — 2-column layout mobile */
  .pricing-row{flex-direction:column;align-items:center;padding:40px 16px 20px}
  .pricing-card{width:100%;max-width:480px;padding:10px}

  /* override flex → grid for 2-column layout */
  .card-body{display:grid!important;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:4px;align-items:start;padding:12px 8px}

  /* LEFT column — explicit rows */
  .card-body .card-bottles{grid-column:1;grid-row:1;font-size:17px;text-align:center}
  .card-body .card-supply{grid-column:1;grid-row:2;font-size:13px;text-align:center}
  .card-body .card-img-link:has(.card-product-img){grid-column:1;grid-row:3/span 8}

  /* RIGHT column — price-box ocupa rows 1-2 */
  .card-body .price-box{grid-column:2;grid-row:1/span 2;align-self:center;padding:6px 8px;gap:5px}
  .card-body .price-box .currency{font-size:1.1rem;padding-bottom:5px}
  .card-body .price-box .amount{font-size:3rem;letter-spacing:-2px}
  .card-body .price-box .per,.card-body .price-box .bottle{font-size:.75rem;letter-spacing:.5px}

  .card-body .card-badge{grid-column:2;font-size:10px;justify-content:flex-start;white-space:nowrap}
  .card-body .card-btn-buy{grid-column:2;font-size:16px;padding:10px 8px;margin:0;width:100%}
  .card-body .card-img-link:has(.card-cards-img){grid-column:2}
  .card-body .card-total{grid-column:2;font-size:14px}

  /* image sizing */
  .card-product-img,.card-product-img--best{width:100%;max-width:none}
  .card-cards-img{width:100%;max-width:none}

  /* mobile card order: 6x → 3x → 2x */
  .pricing-card--best{order:1}
  .pricing-card--popular{order:2}
  .pricing-card--basic{order:3}

  /* hero */
  .hero-inner{flex-wrap:wrap}
  .hero-col{width:100%}
  .hero-heading{font-size:32px}
  .hero-subtext{font-size:21px}
  .hero-col--product{align-items:center}
  .hero-product{width:65%;margin:0 auto}
}