/* =========================================================
   Cowbell — mobile.css  (loaded LAST on every page)
   Modern mobile-first responsive layer. Only active on phones /
   small tablets, so desktop looks exactly as before.
   Fluid type (clamp), tighter spacing, no oversized cards or
   carousels, swipeable rows, 44px touch targets.
   ========================================================= */

/* ---------- global safety: nothing may be wider than the screen ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, video, iframe, svg, canvas{ max-width:100%; }
img, video{ height:auto; }
table{ max-width:100%; }
.bn-card img, .pc-media img, .blog-card-media img, .pd-main-media img{ height:100%; }

@media (max-width:900px){
  html{ font-size:15px; }
  body{ line-height:1.55; }

  /* ---------- fluid headings: never "too large" ---------- */
  h1{ font-size:clamp(1.65rem, 7vw, 2.3rem) !important; line-height:1.15; }
  h2{ font-size:clamp(1.35rem, 5.6vw, 1.85rem) !important; line-height:1.2; }
  h3{ font-size:clamp(1.05rem, 4.4vw, 1.3rem); line-height:1.28; }
  p, li{ font-size:.97rem; }
  .eyebrow{ font-size:.68rem; letter-spacing:.14em; }
  .section-head{ margin-bottom:1.8rem !important; padding:0 4px; }

  /* ---------- section rhythm: tighter, consistent ---------- */
  body section:not([class*="hero"]):not([class*="bn-"]):not(.marquee-section){
    padding-top:clamp(40px, 9vw, 64px) !important;
    padding-bottom:clamp(40px, 9vw, 64px) !important;
    padding-left:16px !important; padding-right:16px !important;
  }
  .about-grid, .contact-grid, .pd-wrap{ gap:1.6rem !important; grid-template-columns:minmax(0,1fr) !important; }
  .certifications, .facility-stats, .whyus, .about-modern{ padding-left:16px !important; padding-right:16px !important; }
  .facility-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.8rem !important; padding-bottom:48px !important; }

  /* ---------- header: slim floating pill, no overflow ---------- */
  .site-header, .site-header.modern-nav{ padding:8px 0 !important; }
  .header-inner{ gap:8px !important; padding-left:10px !important; padding-right:10px !important; }
  .modern-nav .header-inner{ padding:5px 6px 5px 12px !important; }
  .brand img, .brand-link img{ height:34px !important; width:auto !important; max-width:120px; object-fit:contain; background:transparent !important; }
  .brand-text, .brand-meta{ display:none !important; }
  .header-actions{ gap:6px !important; }
  .lang-select{ font-size:.76rem !important; padding:6px 8px !important; max-width:104px; }
  .header-whatsapp{ padding:0 !important; width:38px; height:38px; justify-content:center; }
  .header-whatsapp span{ display:none; }
  .menu-toggle{ display:flex !important; padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .main-nav{ max-width:86vw; }
  .main-nav a{ font-size:1rem !important; padding:13px 16px !important; display:block; }

  /* ---------- page banners (Products / Blog / About ...) ---------- */
  .page-hero{ padding:104px 18px 40px !important; }
  .page-hero h1{ font-size:clamp(1.6rem, 7.4vw, 2.2rem) !important; margin-bottom:.6rem !important; }
  .page-hero p{ font-size:.92rem !important; line-height:1.5; }

  /* ---------- homepage hero / banner slides ---------- */
  .hero-modern{ padding:104px 18px 56px !important; min-height:auto !important; }
  .bn-slide{ min-height:0 !important; padding:92px 0 64px !important; }
  .bn-inner{ padding:0 18px !important; gap:18px !important; }
  .bn-title, .bn-slide[data-layout] .bn-title{ font-size:clamp(1.9rem, 9vw, 2.7rem) !important; line-height:1.08; margin-bottom:.7rem; }
  .bn-sub{ font-size:.95rem !important; margin-bottom:1.1rem; }
  .bn-cta{ gap:8px; flex-wrap:wrap; }
  .bn-cta a, .bn-cta .btn{ padding:11px 18px !important; font-size:.88rem !important; }
  .bn-products{ gap:8px !important; }
  .bn-card .bn-img{ border-radius:12px !important; }
  .bn-card .bn-cap{ font-size:.72rem !important; }
  .bn-slide[data-layout="fan"] .bn-products li{ margin-left:-30px !important; max-width:120px; }
  .bn-slide[data-layout="magazine"] .bn-products li:nth-child(odd){ margin-top:18px !important; }
  .bn-slide[data-layout="minimal"] .bn-copy{ padding-left:1rem !important; border-left-width:4px !important; }
  .bn-slide[data-layout="glass"] .bn-copy{ padding:1.1rem !important; }
  .bn-feature{ max-width:100% !important; }
  .bn-arrow{ width:36px !important; height:36px !important; }

  /* ---------- product cards: compact, equal height ---------- */

  /* ---------- homepage category rows → swipeable carousel ---------- */
  .cat-row-viewport{ overflow:visible; margin:0 -16px; }
  .cat-row-track{
    display:flex !important; gap:.75rem !important; overflow-x:auto; padding:2px 16px 12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cat-row-track::-webkit-scrollbar{ display:none; }
  .cat-row-track > *{ display:block !important; flex:0 0 min(62vw, 230px); scroll-snap-align:start; min-width:0; }
  .cat-row-title{ font-size:1.15rem !important; }
  .cat-row-viewall{ font-size:.8rem; }

  /* ---------- products page: sidebar → compact, no duplicate chips ---------- */
  .catalog-layout{ gap:1rem !important; }
  .catalog-sidebar{ display:none !important; }          /* chips below do the same job */
  .filter-tabs{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; gap:8px; margin:0 -16px 1rem !important; padding:2px 16px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; justify-content:flex-start !important; }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .category-chip{ flex:0 0 auto; white-space:nowrap; font-size:.84rem !important; padding:9px 16px !important; }
  .catalog-search{ margin-bottom:.9rem !important; }
  .catalog-search input{ font-size:16px !important; }   /* stops iOS zoom-on-focus */

  /* ---------- blog ---------- */
  .blog-grid{ grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
  .blog-card-featured{ flex-direction:column !important; min-height:0 !important; }
  .blog-card-featured .blog-card-media{ aspect-ratio:16/10 !important; flex:none !important; }
  .blog-card-body{ padding:16px 16px 18px !important; }
  .blog-card h3{ font-size:1.08rem !important; }
  .blog-card p{ font-size:.88rem !important; }
  .blog-chips{ flex-wrap:nowrap !important; overflow-x:auto; margin:0 -16px; padding:2px 16px 8px; scrollbar-width:none; }
  .blog-chips::-webkit-scrollbar{ display:none; }
  .blog-chip{ flex:0 0 auto; white-space:nowrap; padding:8px 15px !important; font-size:.82rem !important; }
  .blog-search, .blog-search input{ max-width:100% !important; }
  article img, .blog-article img, .post-body img{ border-radius:12px; }
  article table, .post-body table{ display:block; overflow-x:auto; }

  /* ---------- other grids / cards ---------- */
  .testimonial-grid, .resource-grid, .video-grid{ grid-template-columns:minmax(0,1fr) !important; gap:1rem !important; }
  .whyus-grid{ gap:.8rem !important; }
  .whyus-grid .about-feature, .about-feature{ flex:1 1 calc(50% - .4rem) !important; max-width:none !important; padding:1.1rem !important; }
  .about-features{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:.8rem !important; }
  .about-feature strong{ font-size:.95rem !important; }
  .about-feature span:not(.about-feature-icon){ font-size:.78rem !important; }
  .flip-card{ padding:1.2rem !important; }
  .flip-card h3{ font-size:1.1rem !important; }
  .marquee-track .client-badge{ transform:scale(.88); }

  /* ---------- product detail ---------- */
  .pd-main-media{ max-width:100% !important; margin:0 auto; }
  .pd-title{ font-size:clamp(1.35rem, 6vw, 1.8rem) !important; }
  .pd-price{ font-size:1.5rem !important; }
  .pd-thumbs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .pd-thumbs > *{ flex:0 0 64px; }

  /* ---------- forms: easy tapping ---------- */
  input, select, textarea{ font-size:16px !important; }
  .contact-form input, .contact-form select, .contact-form textarea{ padding:13px 14px !important; }
  .btn, .btn-primary, .btn-ghost, button.btn{ min-height:44px; }

  /* ---------- footer ---------- */
  .modern-footer, .site-footer{ padding-left:16px !important; padding-right:16px !important; }
  .footer-inner, .footer-grid{ grid-template-columns:minmax(0,1fr) !important; gap:1.6rem !important; }
  .footer-nav{ flex-wrap:wrap; gap:.8rem 1.2rem; }
  .footer-tagline{ max-width:none; }

  /* ---------- floating widgets shouldn't cover content ---------- */
  .whatsapp-float, .chat-fab, .back-to-top{ transform:scale(.88); transform-origin:bottom right; bottom:14px !important; right:12px !important; }

  /* ---------- lightbox ---------- */
  .lightbox img, .lightbox video{ max-height:82vh; object-fit:contain; }
}

/* ---------- small phones ---------- */
@media (max-width:420px){
  .bn-products li:nth-child(n+4){ display:none !important; }
  .product-grid{ gap:.6rem !important; }
  .whyus-grid .about-feature, .about-feature{ flex-basis:100% !important; }
  .about-features{ grid-template-columns:minmax(0,1fr) !important; }
  .lang-select{ max-width:86px; }
}

/* ---------- tablets (601–900px): 3 columns where it helps ---------- */
@media (min-width:601px) and (max-width:900px){
  .product-grid, .catalog-main .product-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .cat-row-track > *{ flex-basis:min(38vw, 250px); }
}

/* ---------- landscape phones: don't make heroes taller than the screen ---------- */
@media (max-height:480px) and (orientation:landscape){
  .bn-slide, .hero-modern{ padding-top:80px !important; padding-bottom:40px !important; }
}

/* ---------- lighter animation on phones (speed + battery) ---------- */
@media (max-width:900px){
  .grain{ display:none; }
  .reveal{ transition-duration:.45s !important; }
}

/* chips: always one line, swipe sideways */
@media (max-width:900px){
  .filter-tabs > *, .filter-tabs .category-chip, .filter-tabs button{
    flex:0 0 auto !important; width:auto !important; max-width:none !important;
    white-space:nowrap !important; line-height:1.2;
  }
  .pc-ribbon{ max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.6rem !important; }
}

/* =========================================================
   COMPACT PRODUCT CARDS (v2) — smaller on phones, a little
   smaller on desktop. Uses the same specificity as style.css
   so it wins; loaded last.
   ========================================================= */
/* ---- desktop / laptop ---- */
.product-grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 270px)); gap:1.1rem; }
.catalog-main .product-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem; }
@media (min-width:1240px){ .catalog-main .product-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.product-card.has-photo{ border-radius:18px; }
.product-card.has-photo .pc-media{ aspect-ratio:1/1; border-radius:18px 18px 0 0; }
.product-card.has-photo .pc-body{ padding:.95rem 1.05rem 1.1rem; }
.product-card.has-photo h3{ font-size:.98rem; line-height:1.28; margin-bottom:.35rem; }
.product-card.has-photo p{
  font-size:.8rem; line-height:1.45; margin-bottom:.8rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card.has-photo .pc-cat{ top:10px; left:10px; font-size:.58rem; padding:4px 10px; }
.pc-ribbon{ top:12px; right:-38px; font-size:.58rem; padding:4px 40px; }
.product-card.has-photo .pc-actions .btn,
.product-card.has-photo .pc-actions a,
.product-card.has-photo .card-link{ font-size:.76rem; padding:8px 14px; }
.product-card.has-photo .pc-price{ font-size:1rem; }
.product-card.has-photo:hover{ transform:translateY(-6px); }
.cat-row-track{ gap:.9rem; }

/* ---- phones & small tablets ---- */
@media (max-width:900px){
  .product-grid, .catalog-main .product-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:.6rem !important; }
  .product-card.has-photo{ border-radius:13px !important; }
  .product-card.has-photo .pc-media{ aspect-ratio:1/1 !important; border-radius:13px 13px 0 0 !important; }
  .product-card.has-photo .pc-body{ padding:.55rem .6rem .7rem !important; }
  .product-card.has-photo h3{ font-size:.8rem !important; line-height:1.25; margin-bottom:.25rem !important; }
  .product-card.has-photo p{ font-size:.68rem !important; line-height:1.35; margin-bottom:.45rem !important; -webkit-line-clamp:2; }
  .product-card.has-photo .pc-cat{ top:6px !important; left:6px !important; font-size:.5rem !important; padding:3px 7px !important; letter-spacing:.04em; }
  .pc-ribbon{ top:8px !important; right:-30px !important; font-size:.5rem !important; padding:3px 32px !important; max-width:none !important; overflow:visible !important; }
  .product-card.has-photo .pc-actions{ flex-direction:column; align-items:flex-start; gap:4px; }
  .product-card.has-photo .pc-actions .btn,
  .product-card.has-photo .pc-actions a,
  .product-card.has-photo .card-link{ font-size:.68rem !important; padding:6px 10px !important; min-height:0 !important; }
  .product-card.has-photo .pc-price{ font-size:.82rem !important; }
  .product-card.has-photo:hover{ transform:none; }
  /* homepage swipe rows: smaller cards, ~2.3 visible */
  .cat-row-track > *{ flex-basis:min(43vw, 180px) !important; }
}
@media (min-width:601px) and (max-width:900px){
  .product-grid, .catalog-main .product-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

/* v2b — phones: even shorter cards (no description, price + button on one row) */
@media (max-width:600px){
  .product-card.has-photo p{ display:none !important; }
  .product-card.has-photo h3{ font-size:.78rem !important; min-height:2.5em; margin-bottom:.4rem !important; }
  .product-card.has-photo .pc-actions{ flex-direction:row !important; align-items:center !important; justify-content:space-between; gap:4px; flex-wrap:nowrap; padding-top:0; }
  .product-card.has-photo .pc-actions .card-link{ margin-top:0 !important; padding:6px 9px !important; font-size:.64rem !important; }
  .product-card.has-photo .pc-actions .card-link span{ display:none; }
  .product-card.has-photo .pc-price{ font-size:.8rem !important; }
  .product-card.has-photo .pc-price small{ display:none; }
}