/* Frontend Responsive Styles
   Keep ONLY media queries here to keep main.css clean.
   Mobile-first approach: add overrides at increasing min-width breakpoints. */

/* Default (mobile-first) adjustments: show ONLY ticker on <992px */
.top-bar__contact, .top-bar__auth { display: none !important; }
.top-bar__ticker { max-width: 100%; width: 100%; text-align: center; }
.top-bar__inner { padding: 0 .75rem; justify-content: center; }
.top-bar__ticker-track { animation-duration: 20s; }

/* Mobile-first nav visibility (force with !important to beat any utility or inline display) */
.site-navbar__inner { display: none !important; }
.site-navbar__mobile-bar { display: flex !important; }

/* Adjust drawer sizing on very small screens */
@media (max-width: 480px) {
  .site-drawer__panel { width: 92%; }
  
  /* Product detail page responsive adjustments */
  .pdp-actions { 
    flex-direction: column; 
    gap: 0.5rem; 
    width: 100%; 
  }
  
  .pdp-btn--addcart,
  .pdp-btn--buynow { 
    width: 100%; 
    justify-content: center; 
    padding: 0.9rem 1rem; 
  }
  
  .pdp-btn--icon { 
    width: 48px; 
    height: 48px; 
    align-self: center; 
  }
}

/* Medium mobile screens */
@media (max-width: 768px) and (min-width: 481px) {
  .pdp-actions { 
    flex-wrap: wrap; 
    gap: 0.5rem; 
  }
  
  .pdp-btn--addcart,
  .pdp-btn--buynow { 
    flex: 1; 
    min-width: 120px; 
  }
}

@media (min-width: 992px) {
  /* Restore full 3-part layout on large screens */
  .top-bar__contact, .top-bar__auth { display: flex !important; }
  .top-bar__inner { flex-wrap: nowrap; justify-content: space-between; }
  .top-bar__ticker { flex: 1 1 auto; max-width: 55%; }
  .top-bar__ticker-track { animation-duration: 28s; }
  /* Show desktop nav; hide mobile bar */
  .site-navbar__inner { display: grid !important; }
  .site-navbar__mobile-bar { display: none !important; }
}

/* >=576px */
@media (min-width: 576px) {
  /* Placeholder: adjust layout spacing, grid columns, etc. */
}
/* >=768px */
@media (min-width: 768px) {
  /* Placeholder: tablet enhancements */
}
/* >=992px additional desktop adjustments can be added above */
/* >=1200px */
@media (min-width: 1200px) {
  /* Placeholder: large desktop refinements */
}