/* ================================================================
   PRODUCT PAGE — Mobile Responsive CSS
   ================================================================ */

@media(max-width:767px) {
    .mobile-sticky-atc { display: block; }
    body { padding-bottom: 76px; }

    .p-wrap { padding: 12px; }
    .p-grid { gap: 20px; }
    .gallery-container { min-width: unset; width: 100%; }
    .info-container { min-width: unset; width: 100%; }
    .main-slider img { max-height: 360px; }
    .p-name { font-size: 1.25rem; }
    .p-price { font-size: 1.5rem; }
    .breadcrumb { font-size: .72rem; margin-bottom: 12px; }
    .alert-success { font-size: .82rem; padding: 10px 14px; }
    .gallery-actions { top: 10px; right: 10px; }
    .gal-act-btn { width: 34px; height: 34px; font-size: .82rem; }
    .badge-off-red { top: 10px; left: 10px; font-size: .7rem; padding: 4px 10px; }
    .trust-badge-row { flex-wrap: wrap; }
    .trust-item { flex: 1 1 45%; min-width: 100px; }
    .btn-atc { padding: 14px 20px; font-size: .88rem; }
    .btn-buy-now { padding: 14px 20px; font-size: .88rem; }
    .qty-control { flex-shrink: 0; }
    .urgency-badge { font-size: .82rem; padding: 10px 12px; gap: 8px; margin-bottom: 12px; }
    .urgency-dot { width: 8px; height: 8px; }
    .scroll-row .pc { width: 148px; }
    .fbt-row { flex-wrap: nowrap; }
    .fbt-card { width: 110px; }
    .fbt-card img { width: 80px; height: 80px; }
    .rev-card { padding: 14px; }
    .rev-summary { padding: 14px; gap: 14px; }
    .rev-big { font-size: 2.2rem; }
    .prod-sec { padding: 24px 12px; }
    .prod-sec-contained { padding-left: 12px; padding-right: 12px; }
    .sec-title { font-size: 1rem; }
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* ── Pack selector (AVAILABLE PACKS) ── */
    /* Pills wrap to the next line instead of squishing; names stay on one line
       (nowrap from web.css), so "Pack of 2" never breaks into "Pack / of 2". */
    .variant-box { margin-top: 4px; }
    .v-list, .color-list-wrap { gap: 9px; margin: 14px 0 16px; }
    .v-pill { padding: 9px 15px; font-size: .82rem; }
    /* 2-line pack pills: share the row equally, keep the price bold & readable */
    .v-pill-2line{ flex:1 1 0; min-width:0; padding:12px 10px 11px; align-items:center; text-align:center; }
    .variant-box span.v-pill-name{ font-size:.66rem !important; }
    .variant-box span.v-pill-price{ font-size:1.05rem !important; }
    .variant-box .v-pill-2line .v-save-badge{ top:-8px !important; right:-5px !important; font-size:8px !important; padding:2px 6px !important; }
}

@media(max-width:380px) {
    .p-name { font-size: 1.1rem; }
    .p-price { font-size: 1.3rem; }
    .v-pill { padding: 8px 16px; font-size: .78rem; }
    .v-pill-2line{ padding: 10px 8px 9px; }
    .variant-box span.v-pill-price{ font-size: 1rem !important; }
    .qty-btn { width: 36px; height: 40px; }
    .qty-display { width: 36px; font-size: .9rem; }
    .sc-modal-box { padding: 16px; border-radius: 14px; }
    .sc-modal-title { font-size: 1rem; }
}