/* responsive.css
   Mobile-first adjustments and breakpoints
*/
@import "./variables.css";

/* Small screens: show toggle and hide nav until toggled */
@media (max-width: 820px) {
  .brand h1 { display: none; } /* save header space */
  .nav-toggle { display: inline-flex; align-items: center; gap: .35rem; }

  /* Mobile nav overlay style */
  nav {
    position: absolute;
    right: 1rem;
    top: var(--nav-height);
    background: #fff;@import "./variables.css";

/* Mobile adjustments */
@media (max-width: 820px) {
  .brand-title h1 { display:none; } /* save space on small screens */
  .nav-toggle { display:inline-flex; align-items:center; gap:.35rem; }

  nav {
    position:absolute;
    right:1rem;
    top:var(--nav-height);
    background:#fff;
    color:var(--rose);
    padding:.5rem;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
    flex-direction:column;
    display:none;
    min-width:180px;
  }
  nav.show { display:flex; }
  nav a { color:var(--rose); padding:.5rem .6rem; }

  /* Logo - keep it from being too wide */
  .logo-wrap { max-width:120px; }
  .logo-wrap img { height:44px; }

  .product-card { min-height:310px; }
}

/* Medium and up - make nav inline */
@media (min-width: 821px) {
  nav { position:static; display:flex !important; background:transparent; padding:0; box-shadow:none; }
}

/* Larger screens */
@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Improve touch target on coarse pointers */
@media (pointer: coarse) {
  nav a, .button, button { padding:.8rem 1rem; }
}

    color: var(--rose);
    padding: .5rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    flex-direction: column;
    display: none;
    min-width: 180px;
  }
  nav.show { display: flex; }
  nav a { color: var(--rose); padding: .5rem .6rem; }

  .product-card { min-height: 310px; }
}

/* Medium and up */
@media (min-width: 821px) {
  nav { position: static; display: flex !important; background: transparent; padding: 0; box-shadow: none; }
}

/* Larger layouts */
@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Improve touch targets for small devices */
@media (pointer: coarse) {
  nav a, .button, button { padding: .8rem 1rem; }
}