/* ============================================================
   SHOE HAVEN — RESPONSIVE (v3, Bootstrap 5.3-aligned)
   Single source of truth for every device size.
   Loaded LAST on every page so it wins the cascade.

   Breakpoints (match Bootstrap, so <container-*>, <col-xx-*> agree):
     xs  < 576px   (phones)
     sm  ≥ 576px   (large phones / small tablets)
     md  ≥ 768px   (tablets)
     lg  ≥ 992px   (small laptops)
     xl  ≥ 1200px  (desktops)
     xxl ≥ 1400px  (large desktops)

   Everything below follows a mobile-first ladder with ONLY
   these breakpoints — no more 380/420/480/540/640/900/1000/1099.
   ============================================================ */

/* ---------- 0. Safety: never scroll horizontally, box-size all ---------- */
html, body { overflow-x: hidden !important; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }

/* ---------- 1. Container widths (match Bootstrap) ---------- */
.container {
  width: 100%;
  padding-inline: 1.2rem;
  margin-inline: auto;
}
@media (min-width: 576px)  { .container { max-width: 54rem;  padding-inline: 1.6rem; } }
@media (min-width: 768px)  { .container { max-width: 72rem; } }
@media (min-width: 992px)  { .container { max-width: 96rem; } }
@media (min-width: 1200px) { .container { max-width: 114rem; } }
@media (min-width: 1400px) { .container { max-width: 128rem; } }

/* Nav inner mirrors the container */
.nav__inner {
  width: 100%;
  padding-inline: 1.2rem;
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
}
@media (min-width: 576px)  { .nav__inner { max-width: 54rem;  padding-inline: 1.6rem; gap: 1.4rem; } }
@media (min-width: 768px)  { .nav__inner { max-width: 72rem; } }
@media (min-width: 992px)  { .nav__inner { max-width: 96rem; gap: 2.4rem; } }
@media (min-width: 1200px) { .nav__inner { max-width: 114rem; } }
@media (min-width: 1400px) { .nav__inner { max-width: 128rem; } }

/* ---------- 2. Root rhythm (nav height scales with device) ---------- */
:root { --nav-h: 6rem; }
@media (min-width: 768px) { :root { --nav-h: 6.8rem; } }
@media (min-width: 992px) { :root { --nav-h: 7.2rem; } }

/* ---------- 3. Nav internals ---------- */
.logo { font-size: 1.4rem; white-space: nowrap; }
@media (min-width: 576px) { .logo { font-size: 1.6rem; } }
@media (min-width: 992px) { .logo { font-size: 1.8rem; } }
.logo .brand-tag { display: none; }
@media (min-width: 576px) { .logo .brand-tag { display: inline; } }

.nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 576px) { .nav__actions { gap: .8rem; } }
@media (min-width: 992px) { .nav__actions { gap: 1.2rem; } }

.icon-btn { width: 3.6rem; height: 3.6rem; }
@media (min-width: 992px) { .icon-btn { width: 4rem; height: 4rem; } }

/* Currency toggle only from md up (saves xs space) */
.nav__actions [data-currency-toggle] { display: none; }
@media (min-width: 768px) { .nav__actions [data-currency-toggle] { display: inline-flex; } }

/* Single authoritative switch: mobile menu < 992, desktop links ≥ 992 */
.nav__links { display: none !important; }
.hamburger { display: inline-flex !important; }
.mobile-menu { display: block; }
@media (min-width: 992px) {
  .nav__links { display: flex !important; gap: 2.4rem; margin-inline: auto; }
  .hamburger  { display: none !important; }
  .mobile-menu { display: none !important; }
}

/* ---------- 4. Section rhythm ---------- */
.section { padding-block: 3.6rem; }
@media (min-width: 576px) { .section { padding-block: 4.8rem; } }
@media (min-width: 768px) { .section { padding-block: 6rem; } }
@media (min-width: 992px) { .section { padding-block: 7.2rem; } }

.section-head { max-width: 62rem; margin: 0 auto 2.8rem; text-align: center; }
@media (min-width: 768px) { .section-head { margin-bottom: 4rem; } }

.section--first { padding-top: calc(var(--nav-h) + 2rem) !important; padding-bottom: 3rem !important; }
@media (min-width: 768px) { .section--first { padding-top: calc(var(--nav-h) + 3.6rem) !important; padding-bottom: 4rem !important; } }
@media (min-width: 992px) { .section--first { padding-top: calc(var(--nav-h) + 5rem) !important; } }

.breadcrumb { padding-top: calc(var(--nav-h) + 1.2rem); padding-bottom: 1rem; }

/* ---------- 5. Typography (fluid) ---------- */
h1, .hero__h1 { font-size: clamp(2.8rem, 5.5vw, 5.6rem) !important; line-height: 1.08; }
h2 { font-size: clamp(2.2rem, 3.6vw, 3.8rem) !important; line-height: 1.15; }
h3 { font-size: clamp(1.7rem, 2.2vw, 2.2rem) !important; }
h4 { font-size: 1.55rem !important; }

/* ---------- 6. Hero ---------- */
.hero {
  min-height: 80svh !important;
  padding-top: calc(var(--nav-h) + 1.6rem);
  padding-bottom: 4rem;
}
@media (min-width: 768px) { .hero { min-height: 90svh !important; padding-top: calc(var(--nav-h) + 2.4rem); padding-bottom: 6rem; } }
@media (min-width: 992px) { .hero { min-height: 100svh !important; padding-bottom: 8rem; } }

.hero__inner {
  width: 100%;
  padding-inline: 1.2rem;
  padding-block: 2rem;
}
@media (min-width: 576px)  { .hero__inner { padding-inline: 1.6rem; padding-block: 3rem; max-width: 54rem; } }
@media (min-width: 768px)  { .hero__inner { max-width: 72rem; padding-block: 4rem; } }
@media (min-width: 992px)  { .hero__inner { max-width: 96rem; padding-block: 5rem; } }
@media (min-width: 1200px) { .hero__inner { max-width: 114rem; } }
@media (min-width: 1400px) { .hero__inner { max-width: 128rem; } }

.hero__sub { font-size: 1.4rem !important; max-width: 52rem !important; margin: 0 auto 2rem !important; color: var(--text-dim); }
@media (min-width: 768px) { .hero__sub { font-size: 1.6rem !important; margin-bottom: 2.8rem !important; } }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.8rem; }
@media (min-width: 768px) { .hero__cta { margin-bottom: 3.6rem; } }

/* Hero stats — 2 cols phones, 4 cols from sm up */
.hero__stats {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: .8rem !important;
  padding: 1.2rem !important;
  max-width: 70rem !important;
}
@media (min-width: 576px) {
  .hero__stats { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; padding: 1.4rem !important; }
}
.hero__stats > div { text-align: center; }
.hero__stats strong {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700; color: var(--accent); line-height: 1.1;
}
.hero__stats span {
  font-size: 1.1rem; color: var(--text-mute);
  letter-spacing: .08em; text-transform: uppercase;
}

/* Buttons full-width stacked on xs */
@media (max-width: 575.98px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .btn-lg { padding: 1.3rem 2rem; font-size: 1.4rem; }
}

/* ---------- 7. Bento / feature grid ---------- */
.bento {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.2rem !important;
}
@media (min-width: 576px) { .bento { grid-template-columns: repeat(2, 1fr) !important; gap: 1.4rem !important; } }
@media (min-width: 992px) { .bento { grid-template-columns: repeat(4, 1fr) !important; gap: 1.6rem !important; } }

/* ---------- 8. Products grid (catalog page) ---------- */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.2rem !important;
}
@media (min-width: 576px)  { .products-grid { gap: 1.6rem !important; } }
@media (min-width: 768px)  { .products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.8rem !important; } }
@media (min-width: 1200px) { .products-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; } }

/* Featured row on home: consistent 2 → 3 → 4 with no hidden items */
.products-grid--row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.2rem !important;
}
@media (min-width: 768px)  { .products-grid--row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1200px) { .products-grid--row { grid-template-columns: repeat(4, 1fr) !important; } }
.products-grid--row > .product-card { display: flex !important; flex-direction: column !important; }
.products-grid--row .product-card__media { display: block !important; }
.products-grid--row .product-card__media img { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* Filter bar — pills on md, rounded rect on xs */
.filter-bar { border-radius: 1.2rem !important; padding: .8rem !important; gap: .4rem !important; }
@media (min-width: 768px) { .filter-bar { border-radius: 999px !important; padding: 1rem !important; gap: .6rem !important; } }
.filter-chip { padding: .7rem 1.2rem !important; font-size: 1.2rem !important; }
@media (min-width: 768px) { .filter-chip { padding: .8rem 1.6rem !important; font-size: 1.3rem !important; } }

/* ---------- 9. Reviews grid (home shows 3) ---------- */
.reviews {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.4rem !important;
  overflow: visible !important;
}
@media (min-width: 576px) { .reviews { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 992px) { .reviews { grid-template-columns: repeat(3, 1fr) !important; } }

/* ---------- 10. About / team ---------- */
.about { display: grid !important; grid-template-columns: 1fr !important; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .about { grid-template-columns: 1fr 1fr !important; gap: 5rem; } }

.about-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.4rem !important; }
@media (min-width: 576px) { .about-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 992px) { .about-grid { grid-template-columns: repeat(3, 1fr) !important; } }

.team-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1.4rem !important; }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 992px) { .team-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* ---------- 11. Contact ---------- */
.contact-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; }
.contact-info { display: grid !important; grid-template-columns: 1fr !important; gap: 1.2rem !important; }
@media (min-width: 576px) { .contact-info { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 992px) { .contact-info { grid-template-columns: repeat(4, 1fr) !important; } }

/* ---------- 12. PDP ---------- */
.pdp { display: grid !important; grid-template-columns: 1fr !important; gap: 3rem; }
@media (min-width: 992px) { .pdp { grid-template-columns: 1.05fr 1fr !important; gap: 5rem; } }

/* ---------- 13. Cart ---------- */
.cart-wrap { display: grid !important; grid-template-columns: 1fr !important; gap: 2.4rem; }
@media (min-width: 992px) { .cart-wrap { grid-template-columns: 1.6fr 1fr !important; gap: 3rem; } }

/* Cart table collapses to cards on < md */
@media (max-width: 767.98px) {
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-row {
    margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; background: var(--surface);
  }
  .cart-row td {
    border: 0 !important;
    padding: .5rem 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .cart-prod__img { width: 6rem; height: 6rem; }
}

/* ---------- 14. Forms ---------- */
.form-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.2rem !important; }
@media (min-width: 576px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr !important; } }

/* Newsletter */
.newsletter__box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.6rem !important;
  text-align: left !important;
}
@media (min-width: 768px) {
  .newsletter__box { grid-template-columns: 1fr auto !important; gap: 2rem !important; align-items: center; }
}
.newsletter__form {
  display: flex !important;
  flex-direction: column !important;
  gap: .6rem !important;
  max-width: 40rem !important;
  width: 100%;
}
@media (min-width: 576px) { .newsletter__form { flex-direction: row !important; flex-wrap: nowrap !important; } }
.newsletter__form .btn { width: 100%; }
@media (min-width: 576px) { .newsletter__form .btn { width: auto; } }

/* ---------- 15. Tap-target guarantee ---------- */
@media (max-width: 767.98px) {
  .btn, .icon-btn, .filter-chip, .size, .qty button, .pay-card,
  .card-size-btn, .mobile-menu a, .footer__socials a {
    min-height: 44px;
  }
}

/* ============================================================
   16. FOOTER — tighter at every size
   Mobile: brand block on top (compact centered), then a clean
   3-col row for Shop / Help / Stores — ends the page smoothly
   without the awkward brand-left vertical wall.
   ============================================================ */
/* xs (<576): brand on top, 3 equal columns below */
footer.footer {
  padding: 1.8rem 0 1rem !important;
  margin-top: 2rem !important;
}
.footer__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem .8rem !important;
  text-align: left !important;
  align-items: start;
  margin-bottom: 1rem !important;
}
.footer__brand {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0 0 1rem 0;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: .4rem;
}
.footer__brand .logo {
  justify-content: center;
  font-size: 1.5rem;
}
.footer__brand p {
  font-size: 1.1rem !important;
  max-width: 34rem !important;
  margin: .4rem auto .8rem !important;
  text-align: center;
  color: var(--text-dim);
}
.footer__socials { justify-content: center; gap: .6rem; }
.footer__socials a { width: 3.2rem; height: 3.2rem; font-size: 1.15rem; }
.footer__col { grid-column: auto; min-width: 0; }
.footer__col h4 {
  font-size: 1.05rem !important;
  margin: 0 0 .4rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.footer__col ul li {
  margin-bottom: .25rem !important;
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
}
.footer__col a { font-size: 1.1rem !important; }
.footer__bottom {
  padding-top: .9rem !important;
  gap: .2rem !important;
  font-size: 1rem !important;
  text-align: center;
  border-top: 1px solid var(--border);
}
.footer__bottom p { margin: 0 !important; line-height: 1.4; }

/* Tighten spacing between the newsletter and the footer on mobile */
@media (max-width: 767.98px) {
  .section.newsletter {
    padding: 2.4rem 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .newsletter__box {
    padding: 1.8rem 1.4rem !important;
    border-radius: 1.2rem !important;
    text-align: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .newsletter__box h2 { font-size: 1.8rem !important; margin: .3rem 0 .3rem !important; }
  .newsletter__box p  { font-size: 1.15rem !important; }
  .newsletter__box .eyebrow { font-size: 1rem !important; }
  .newsletter__form {
    max-width: 100% !important;
    width: 100% !important;
    margin: 1rem 0 0 !important;
  }
  .newsletter__form input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 1rem 1.4rem !important;
    font-size: 1.2rem !important;
    box-sizing: border-box !important;
  }
  .newsletter__form .btn {
    padding: 1rem 1.4rem !important;
    font-size: 1.2rem !important;
  }
}

/* sm ≥576 — brand left (wider), links in 3 cols on the right */
@media (min-width: 576px) {
  footer.footer { padding: 2.6rem 0 1.4rem !important; margin-top: 3rem !important; }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 1.2rem 1.6rem !important;
    align-items: start;
    margin-bottom: 1.4rem !important;
  }
  .footer__brand {
    grid-column: 1;
    text-align: left;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .footer__brand .logo { justify-content: flex-start; font-size: 1.55rem; }
  .footer__brand p { text-align: left; margin: .4rem 0 .8rem !important; }
  .footer__socials { justify-content: flex-start; }
  .footer__col h4 { font-size: 1.2rem !important; }
  .footer__col ul li, .footer__col a { font-size: 1.2rem !important; }
  .footer__bottom { text-align: left; border-top: 0; padding-top: 1rem !important; }
  .section.newsletter { padding: 3rem 0 !important; }
  .newsletter__box { padding: 2.4rem !important; }
}

/* md ≥768 — classic 4-col layout with more breathing room */
@media (min-width: 768px) {
  footer.footer { padding: 3.2rem 0 1.6rem !important; margin-top: 4rem !important; }
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 2.4rem !important;
    margin-bottom: 1.6rem !important;
  }
  .footer__brand .logo { font-size: 1.7rem !important; }
  .footer__brand p { font-size: 1.25rem !important; margin: .6rem 0 1rem !important; }
  .footer__socials a { width: 3.4rem; height: 3.4rem; font-size: 1.25rem; }
  .footer__col h4 { font-size: 1.25rem !important; margin-bottom: .8rem !important; letter-spacing: .08em; text-transform: uppercase; }
  .footer__col ul li { margin-bottom: .4rem !important; font-size: 1.25rem !important; }
  .footer__col a { font-size: 1.25rem !important; }
  .footer__bottom {
    padding-top: 1.2rem !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1.6rem !important;
    text-align: left;
    font-size: 1.2rem !important;
  }
}

/* lg ≥992 */
@media (min-width: 992px) {
  footer.footer { padding: 3.6rem 0 1.8rem !important; margin-top: 5rem !important; }
  .footer__grid { gap: 3rem !important; margin-bottom: 2rem !important; }
  .footer__col h4 { font-size: 1.3rem !important; }
  .footer__col ul li, .footer__col a { font-size: 1.3rem !important; }
}

/* ---------- 17. Floating widgets: scale on small screens ---------- */
.cookie-banner { left: 1rem !important; right: 1rem !important; bottom: 1rem !important; }
@media (min-width: 768px) { .cookie-banner { left: auto !important; right: 1.6rem !important; bottom: 1.6rem !important; max-width: 42rem; } }

.to-top { width: 4rem !important; height: 4rem !important; bottom: 1.2rem !important; right: 1.2rem !important; }
@media (min-width: 768px) { .to-top { width: 4.6rem !important; height: 4.6rem !important; bottom: 2rem !important; right: 2rem !important; } }

.wa-fab { width: 4.8rem !important; height: 4.8rem !important; bottom: 1rem !important; right: 1rem !important; font-size: 1.8rem !important; }
@media (min-width: 768px) { .wa-fab { width: 5.6rem !important; height: 5.6rem !important; bottom: 1.4rem !important; right: 1.4rem !important; font-size: 2rem !important; } }

/* ---------- 18. Print ---------- */
@media print {
  .nav, .mobile-menu, .to-top, .wa-fab,
  .cookie-banner, .install-card, .footer__socials { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}