/* ==========================================================================
   BRINZA — RESPONSIVE STYLESHEET
   Breakpoints: Laptop (1200px) / Tablet (992px) / Mobile-L (768px) / Mobile-S (480px)
   ========================================================================== */

/* ---------------------------------
   LAPTOP  ≤ 1200px
   --------------------------------- */
@media (max-width: 1200px) {
  .container { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .navbar__menu ul { gap: 28px; }
  .oil-banner__card { padding: 56px 44px; }
}

/* ---------------------------------
   TABLET  ≤ 992px
   --------------------------------- */
@media (max-width: 992px) {
  :root { --nav-h: 78px; }

  .navbar__menu { display: none; }
  .navbar__burger { display: flex; }
  .navbar__account { display: none; }

  .hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 20px; }
  .hero__content { display: flex; flex-direction: column; align-items: center; }
  .hero__cta { justify-content: center; }
  .hero__desc { max-width: 100%; }
  .hero__visual { margin-top: 20px; min-height: 420px; }
  .hero__badge { top: 0; right: 4%; width: 108px; height: 108px; }

  .trustbar__card { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }

  .bestsellers .section-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .bestsellers .section-head > div { align-items: center; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  .oil-banner__card { grid-template-columns: 1fr; text-align: center; padding: 50px 32px; }
  .oil-banner__content { display: flex; flex-direction: column; align-items: center; }
  .oil-banner__content p { max-width: 100%; }
  .oil-banner__visual { order: -1; }
  .oil-banner__deco { display: none; }

  .why-gallery__grid { grid-template-columns: 1fr; }
  .why-choose { text-align: center; }
  .section-head--left { align-items: center; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ---------------------------------
   MOBILE-L  ≤ 768px  (redesigned, not just shrunk)
   --------------------------------- */
@media (max-width: 768px) {
  :root { --nav-h: 70px; }

  .container { padding: 0 18px; }

  /* Navbar */
  .navbar__logo-title { font-size: 17px; }
  .navbar__logo-sub { font-size: 8px; }
  .navbar__logo-mark { width: 36px; height: 36px; font-size: 16px; }
  .icon-btn { width: 36px; height: 36px; }

  /* Hero — mobile redesign: stacked, centered, compact CTA row */
  .hero { min-height: auto; padding: 110px 0 60px; }
  .hero__bg-img { object-fit: contain; object-position: top center; }
  .hero__title { font-size: 34px; }
  .hero__title-accent { font-size: 22px; }
  .hero__desc { font-size: 15px; margin-bottom: 28px; }
  .hero__cta { flex-direction: column; width: 100%; gap: 14px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__visual { min-height: 340px; margin-top: 10px; }
  .hero__badge { width: 86px; height: 86px; top: -6px; right: 6%; }
  .hero__badge-pct { font-size: 15px; }
  .hero__badge-line { font-size: 7px; }
  .hero__badge-sub { font-size: 6.5px; }
  .hero__scroll { display: none; }
  .hero__dots { bottom: 18px; }

  /* Trust bar becomes horizontal scroll cards */
  .trustbar { margin-top: -36px; }
  .trustbar__card {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    overflow-x: auto;
    gap: 16px;
    padding: 22px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .trustbar__item { scroll-snap-align: start; }
  .trustbar__card::-webkit-scrollbar { display: none; }

  .bestsellers { padding: 100px 0 70px; }
  .section-title { font-size: 28px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-card__media { height: 190px; }
  .product-card__media .jar { transform: scale(0.55); }
  .product-card:hover .product-card__media .jar { transform: scale(0.58) rotate(-2deg); }
  .product-card__imgcat { padding: 24px 14px; }
  .product-card__body { padding: 14px 14px 16px; }
  .product-card__body h3 { font-size: 15px; }
  .product-card__price { font-size: 17px; }

  .oil-banner__card { padding: 40px 22px; border-radius: var(--radius-lg); }
  .oil-banner__title { font-size: 28px; }
  .oil-banner__imgcat { width: min(100%, 280px); }
  .bottle { width: 110px; height: 220px; }
  .bottle__body { top: 34px; width: 100px; height: 178px; }
  .bottle__label { width: 76px; height: 86px; }

  .why-choose__grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery-crate { min-height: 300px; gap: 6px; padding: 30px 14px 18px; }
  .gallery-card__imgcat { min-height: 300px; }
  .jar--mini { width: 46px; height: 62px; }
  .jar--mini .jar__lid { width: 22px; height: 8px; }
  .jar--mini .jar__body { top: 6px; width: 40px; height: 54px; }
  .gallery-card__nav { display: none; }

  .testimonial-slide { padding: 34px 24px; }
  .testimonial-slide__text { font-size: 19px; }

  .service-strip__grid { grid-template-columns: 1fr 1fr; padding: 28px 20px; gap: 24px 16px; }

  .newsletter__inner { flex-direction: column; align-items: flex-start; }
  .newsletter__form { width: 100%; flex-direction: column; }
  .newsletter__form input { width: 100%; min-width: 0; }
  .newsletter__form .btn { width: 100%; justify-content: center; }

  .footer__grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
  .footer__col--brand p { max-width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
}

/* ---------------------------------
   MOBILE-S  ≤ 480px
   --------------------------------- */
@media (max-width: 480px) {
  .hero__title { font-size: 28px; }
  .hero__title-accent { font-size: 19px; }
  .eyebrow { font-size: 11px; }

  .product-grid { grid-template-columns: 1fr; }
  .product-card__media { height: 220px; }
  .product-card__media .jar { transform: scale(0.7); }

  .trustbar__card { grid-template-columns: repeat(4, minmax(180px, 1fr)); }

  .service-strip__grid { grid-template-columns: 1fr; }

  .mega-menu { min-width: 300px; grid-template-columns: 1fr 1fr; }
  .mega-menu__feature { display: none; }
}