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

@media (max-width: 768px) {
  /* --- Compact footer: 3-col links, no duplicate WhatsApp --- */
  footer.site-footer {
    padding: 24px 16px 88px !important; /* room for small FAB */
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    align-items: start !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
  }
  .footer-brand .brand { font-size: 20px !important; }
  .footer-brand .footer-tagline { display: none !important; }
  .footer-brand .footer-meta {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
  }
  .footer-brand .support-inline,
  footer.site-footer .support-inline,
  .product-buybox .support-inline,
  .prose .support-inline,
  .section .support-inline {
    display: none !important;
  }
  .footer-heading {
    margin: 0 0 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  footer.site-footer nav {
    gap: 5px !important;
    font-size: 12px !important;
  }
  footer.site-footer nav a {
    min-height: 26px !important;
    line-height: 1.25 !important;
  }
  footer.site-footer .text-button {
    min-height: 26px !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  .footer-bottom {
    margin-top: 14px !important;
    padding-top: 10px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding-right: 72px !important; /* clear small FAB */
  }
  .footer-bottom .small {
    margin: 0 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .footer-bottom .small:last-child { display: none !important; }

  /* --- Smaller WhatsApp FAB (keep only this CTA) --- */
  .support-floating {
    bottom: 12px !important;
    right: 12px !important;
    max-width: none !important;
  }
  .support-floating a {
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 10px #00000026 !important;
    /* short label on narrow screens via font; full aria-label remains */
    max-width: 46vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- Homepage hero: don't eat full fold; next section peeks --- */
  .hero {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px auto 0 !important;
    padding: 20px 16px 18px !important;
    border-radius: 18px !important;
    display: block !important;
    overflow: hidden !important;
  }
  .hero-copy {
    position: relative !important;
    z-index: 2 !important;
    max-width: 72% !important;
  }
  .hero-copy .eyebrow {
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }
  .hero-copy h1 {
    margin: 8px 0 10px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    letter-spacing: -1.2px !important;
    line-height: 1.08 !important;
    max-width: none !important;
  }
  .hero-copy > p:not(.eyebrow) {
    margin-bottom: 14px !important;
    font-size: 14px !important;
    max-width: 28ch !important;
    line-height: 1.35 !important;
  }
  .hero .button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
  .hero-image {
    opacity: 0.78 !important;
    width: 36% !important;
    height: 160px !important;
    top: 28px !important;
    right: 12px !important;
  }
  .hero-message { display: none !important; }

  /* First content section after hero — visible peek under fold */
  main > .hero + .section,
  main .hero + .section {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section > h2 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  .product-grid {
    margin-top: 20px !important;
    gap: 18px 12px !important;
  }
}

@media (max-width: 420px) {
  /* Even tighter FAB: show WA short chip */
  .support-floating a {
    padding: 9px 11px !important;
    font-size: 11px !important;
    max-width: 118px !important;
  }
  .hero {
    padding: 16px 14px 14px !important;
  }
  .hero-copy h1 {
    font-size: 28px !important;
  }
  .hero-image {
    height: 140px !important;
    width: 34% !important;
  }
}


/* PDP conversion trust strip */
.pdp-trust{list-style:none;margin:0.75rem 0 1rem;padding:0.75rem 1rem;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#faf8f5;display:grid;gap:.35rem;font-size:.92rem;line-height:1.35}
.pdp-trust li{margin:0;padding-left:1.25rem;position:relative}
.pdp-trust li:before{content:"✓";position:absolute;left:0;color:#2f6b4f;font-weight:700}
.product-buybox .price{font-size:1.55rem;font-weight:700;letter-spacing:-0.02em}
.product-buybox .price-note{font-size:.9rem;font-weight:500;opacity:.75}
@media (max-width:720px){
  .purchase{position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));border-top:1px solid rgba(0,0,0,.06);margin:0 -0.25rem}
  .purchase .button{width:100%}
}

/* qty stepper hotpatch */
.qty-field{display:grid;gap:7px;max-width:220px}
.qty-label{font-size:14px;display:block}
.qty-stepper{display:inline-flex;align-items:stretch;border:1px solid #7b9082;border-radius:8px;overflow:hidden;background:var(--ivory,#faf9f5);width:100%;max-width:180px;margin-top:7px}
.qty-btn{border:0;background:transparent;color:var(--green,#173b33);min-width:48px;min-height:49px;font-size:22px;line-height:1;padding:0;cursor:pointer}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-input{border:0;border-inline:1px solid #bac8be;border-radius:0;text-align:center;margin:0;min-height:49px;padding:8px 4px;width:100%;-moz-appearance:textfield;appearance:textfield;background:var(--ivory,#faf9f5);color:var(--green,#173b33)}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}