/* ============================================================
   Mobile & small-screen responsive fixes.
   Loaded last (after every other stylesheet) so these overrides
   win without needing extra specificity. Nothing here changes
   desktop appearance — every rule is scoped to a max-width or a
   touch/no-hover media feature.
   ============================================================ */

/* ---- Site-wide horizontal scroll, root cause: Bootstrap's ".g-5"
   row gutter is 3rem, which gives every ".row.g-5" a -1.5rem (-24px)
   negative margin on each side. .container-luxury's mobile padding is
   only var(--space-4) (16px), so every page using "row g-5" (account
   pages, cart, checkout, product, shop, about, contact, footer — i.e.
   nearly everywhere) bled 8px of content past the viewport edge on
   both sides. Shrink the gutter on mobile so it fits inside the
   container padding instead of fighting it. ---- */
@media (max-width: 767.98px) {
  .row.g-5 {
    --bs-gutter-x: 1rem;
  }
}

@media (max-width: 575.98px) {
  .row {
    --bs-gutter-x: 0.75rem;
  }
}

/* Defensive backstop against horizontal page scrolling:
   Use overflow-x: clip on html, body, and main content wrapper.
   Unlike overflow: hidden, overflow-x: clip prevents horizontal scrolling
   without breaking position: sticky on header and mobile bars! */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

#main-content {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

.container-luxury {
  max-width: 1440px;
  box-sizing: border-box;
}

/* ---- Product card actions (wishlist / quick view) and the "Add
   to Cart" CTA are hidden until :hover — on touch devices there is
   no hover, so they were completely unreachable. Make them
   permanently visible on touch/narrow screens. ---- */
@media (hover: none), (max-width: 991.98px) {
  .product-card-actions,
  .product-card-cta {
    opacity: 1;
    transform: none;
  }
}

/* ---- Add to Cart button was wrapping onto two lines in the
   narrower two-column mobile grid — the desktop padding/tracking
   need more room than a ~150px-wide card has to give. ---- */
@media (max-width: 767.98px) {
  .product-card-cta .btn-luxury {
    padding: 0.7rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

/* ---- New/Sale badges are a fixed rem size regardless of card
   width, so they read as oversized on the smaller mobile cards. ---- */
@media (max-width: 767.98px) {
  .product-card-badges .badge-luxury {
    font-size: 0.58rem;
    padding: 0.24rem 0.5rem;
  }
}

/* ---- Hero slider: a vh-based height crops landscape photography
   unpredictably on phones. An aspect-ratio scales with the viewport
   width instead, giving a consistent, less aggressive crop. ---- */
@media (max-width: 767.98px) {
  .hero-slider {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }

  .hero-slide-caption {
    padding-block: var(--space-6);
  }
}

/* ---- Editorial banners (e.g. home page "Statement Dress" /
   "Season Edit" sections) use an inline fixed pixel height meant for
   wide desktop crops — on a narrow phone that crops away almost the
   whole photo. Override with the same aspect-ratio approach; !important
   is needed to beat the inline style attribute. ---- */
@media (max-width: 767.98px) {
  .banner-editorial {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 520px;
  }
}

/* ---- Section rhythm: 96px of top+bottom padding on every section
   eats a huge share of a small viewport. Trim it down on mobile
   without touching the desktop rhythm. ---- */
@media (max-width: 767.98px) {
  .section {
    padding-block: var(--space-7);
  }

  .section-tight {
    padding-block: var(--space-6);
  }

  .empty-state {
    padding-block: var(--space-7);
  }
}

/* ---- Cart line item: image + details + qty stepper + price +
   remove button were all forced onto one unwrapped flex row, which
   overflows or crushes the title column on narrow screens. Let it
   wrap into two lines instead. ---- */
@media (max-width: 575.98px) {
  .cart-line-item {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .cart-line-item .flex-grow-1 {
    flex-basis: 55%;
  }
}

/* ---- Admin shell: the sidebar was a fixed 240px column with no
   collapse at all. Hide it off-canvas on phones/tablets and reveal
   it with the hamburger button in admin.blade.php (see admin-sidebar.js).
   The hamburger is hidden by default (desktop) and only shown inside
   the mobile media query below — this order matters, the "hidden by
   default" rule must come first or it wins the cascade and the button
   never appears on mobile. ---- */
.admin-hamburger {
  display: none;
  border: 0;
}

@media (max-width: 991.98px) {
  .admin-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background: #fff;
    color: var(--admin-ink);
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    max-width: 82vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }

  .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    z-index: 1040;
  }

  .admin-sidebar-backdrop.is-open {
    display: block;
  }

  .admin-topbar,
  .admin-content {
    padding: 1.25rem;
  }
}

@media (min-width: 992px) {
  .admin-sidebar-backdrop {
    display: none !important;
  }
}