/* LuxePaw PDP — swipe gallery + buy box (served as /pdp-carousel.css, bypasses immutable CSS cache) */
.product-detail{display:flex!important;flex-direction:column!important;gap:20px!important;width:100%!important;max-width:100%!important;margin-top:16px!important}
.detail-gallery{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
.gallery-carousel{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;touch-action:pan-x!important;width:100%!important;max-width:100%!important;aspect-ratio:1/1!important;border-radius:16px!important;background:#f6f4ef!important}
.gallery-slide{scroll-snap-align:start!important;scroll-snap-stop:always!important;width:100%!important;height:100%!important;min-width:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
.gallery-slide img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;user-select:none!important;-webkit-user-drag:none!important}
.gallery-thumbs{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;margin-top:10px!important;padding-bottom:4px!important}
.gallery-thumb{flex:0 0 auto!important;width:64px!important;height:64px!important;border:1px solid #ddd!important;border-radius:8px!important;overflow:hidden!important;display:block!important}
.gallery-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
.gallery-hint{font-size:.8rem!important;margin:6px 0 0!important;color:#666!important}
.price-note{font-weight:400!important;font-size:.9rem!important;color:#666!important}
.product-buybox{width:100%!important;min-width:0!important;padding:0!important}
.product-detail h1{margin-top:8px!important;font-size:clamp(28px,7vw,40px)!important}
.detail-images{margin-top:24px!important;width:100%!important}
.detail-images h2{font-size:1.15rem!important;margin:0 0 12px!important}
.detail-images-stack{display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important}
.detail-images-stack img{width:100%!important;height:auto!important;display:block!important;border-radius:0!important;background:#f6f4ef!important}
.section{overflow-x:hidden!important}
@media (max-width:900px){
  .product-detail{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important}
}
.product-buybox .purchase{margin-top:12px!important}
.product-buybox .about-item{margin-top:20px!important}
.product-buybox h1{line-height:1.15!important}
.gallery-thumbs{margin-top:8px!important}
.gallery-hint{display:none!important}

/* Keep buy box on first mobile screen */
@media (max-width: 520px) {
  .gallery-carousel {
    aspect-ratio: auto !important;
    height: min(300px, 38vh) !important;
    max-height: 300px !important;
  }
  .gallery-thumbs { display: none !important; }
  .announcement { display: none !important; }
  .breadcrumb { font-size: 11px !important; margin: 8px 0 !important; }
  .product-detail { margin-top: 8px !important; gap: 12px !important; }
  .product-buybox h1 { font-size: 26px !important; margin-top: 4px !important; }
  .product-buybox .price { margin: 6px 0 8px !important; }
  .product-buybox .purchase { margin-top: 4px !important; }
}

/* LuxePaw site mobile polish — /site-mobile.css (bypass CSP + immutable CSS cache) */

/* --- Compact footer ≤768px --- */
@media (max-width: 768px) {
  footer.site-footer {
    padding: 28px 16px 72px !important; /* bottom room for FAB */
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    align-items: start !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
  }
  .footer-brand .brand {
    font-size: 22px !important;
  }
  .footer-brand .footer-tagline {
    max-width: none !important;
    margin: 6px 0 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .footer-brand .footer-meta {
    margin: 0 0 0 !important;
    font-size: 11px !important;
  }
  /* Keep floating FAB; hide footer / inline WhatsApp CTAs on mobile */
  .footer-brand .support-inline,
  footer.site-footer .support-inline,
  .product-buybox .support-inline,
  .prose .support-inline {
    display: none !important;
  }
  .footer-heading {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }
  footer.site-footer nav {
    gap: 6px !important;
    font-size: 13px !important;
  }
  footer.site-footer nav a {
    min-height: 28px !important;
    line-height: 1.3 !important;
  }
  .footer-bottom {
    margin-top: 18px !important;
    padding-top: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .footer-bottom .small {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .support-floating {
    bottom: 14px !important;
    right: 14px !important;
  }
  .support-floating a {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* Preserve existing PDP carousel rules if this file is the only override loaded on some pages —
   full carousel rules stay in pdp-carousel.css; do not conflict. */

/* Footer copyright single-line + tighter brand (≤768) */
@media (max-width: 768px) {
  .footer-brand .footer-tagline { display: none !important; }
  .footer-bottom {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .footer-bottom .small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
  }
  .footer-bottom .small:last-child { display: none !important; }
  footer.site-footer nav a { font-size: 12px !important; }
}