/* ============================================================ responsive.css — Breakpoint-specific overrides. IMPORTANT: this file must be loaded LAST (after style.css, navbar.css, product.css, checkout.css, account.css, admin.css, and animations.css). Each rule below has the same selector specificity as its base rule in another file, so cascade order — not specificity — is what makes these overrides win at the relevant breakpoint. See index.html's for the required order. ============================================================ */ /* Notification panel: full-width strip pinned below the navbar on mobile (base rule in navbar.css) */ @media (max-width: 640px) { #notif-panel { right:8px; left:8px; width:auto; max-width:none; top:60px; border-radius:14px; } } /* Product modal: two-column layout on desktop (base single-column rule in product.css) */ @media (min-width:768px) { #product-modal-box { flex-direction:row; max-width:860px !important; max-height:85vh !important; } #pm-gallery-wrap { width:46%; flex-shrink:0; } #pm-info-wrap { width:54%; overflow-y:auto; } } /* Product modal: sticky Add to Cart / Buy Now bar on mobile only (base "display:none" rule in product.css) */ @media (max-width:767px) { #pm-sticky-bar { display:flex; position:sticky; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e5e7eb; padding:10px 14px; gap:10px; align-items:center; z-index:20; box-shadow:0 -4px 16px rgba(17,24,39,0.06); } #pm-info-wrap { padding-bottom:4px; } }