/* ==========================================================================
 *  Our Bunny — responsive.css
 *  Breakpoints: 1200 laptop · 1024 small laptop · 860 tablet · 620 mobile
 *  Load this file LAST so its overrides win.
 *  ========================================================================== */

/* ==========================================================================
   GLOBAL MOBILE OVERFLOW GUARD
   Several elements below (fixed-width cells, un-wrapped flex rows, huge
   inline marquee text) were wider than small viewports. Because base.css
   sets `overflow-x: hidden` on body, that excess width wasn't shown as a
   scrollbar — it was silently CROPPED off the right edge. The rules below
   remove the oversized/un-wrapping sources so nothing needs to be clipped.
   ========================================================================== */
html, body { max-width: 100%; }
img, svg, video, picture, iframe, table, canvas {
  max-width: 100%;
}

/* ------------------------------------------------------------ ≤ 1200px --- */
@media (max-width: 1200px) {
  /* The nav sits at 1rem now, which is comfortably readable but wider.
     Tighten the gaps rather than shrink the type back down. */
  .header-actions { gap: .35rem; }

  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid  { grid-template-columns: repeat(3, 1fr); }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ ≤ 1024px --- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  /* Hide desktop navigation and show burger */
  .nav,
  .header-cta {
    display: none !important;
  }
  .burger {
    display: grid !important;
  }

  /* The mode-toggle (All/Boys/Girls pill) is injected by JS and wasn't
     part of the header's width budget — on narrow screens it competed
     with the cart + burger icons for space, and the losers got pushed
     off the right edge where overflow-x:hidden on body silently cropped
     them. Rather than squeeze everything onto one line, give the toggle
     its own centered row below the icons — a standard, intentional
     mobile pattern instead of an accidental overflow.

     `order` moves the toggle after every icon regardless of its spot
     in the DOM. The ::after spacer (order 9, flex-basis:100%) forces
     the line break; the toggle itself (order 10) keeps its natural
     width and centers via margin-inline:auto — so its pill background
     hugs its buttons instead of stretching across the whole row. */
  /* the nav column is gone at this width, so drop it from the grid instead of
     leaving an empty 1fr track sitting between the logo and the icons */
  .header-inner { gap: .6rem; grid-template-columns: auto 1fr; }
  /* the header is a 3-column grid; with the nav hidden the actions block is
     shrink-to-fit, which left the wrapped "All" pill floating off-centre.
     Let it span the row instead — icons still sit right, pill centres. */
  .header-inner .header-actions { justify-self: stretch; }
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
    row-gap: .4rem;
  }
  .header-actions::after {
    content: "";
    order: 9;
    flex-basis: 100%;
    height: 0;
  }
  .header-actions .all-pill {
    order: 10;
    margin-inline: auto;
  }
  .icon-btn { width: 40px; height: 40px; }

  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 340px);
    max-height: none;
    border-radius: 0;
    z-index: 95;
    transform: translateX(-102%);
    transition: transform var(--t);
    box-shadow: var(--shadow-lg);
    padding-top: 1.6rem;
  }
  .filters.open { transform: none; }
  .filter-toggle { display: inline-flex; }

  .cart-layout, .checkout-layout, .contact-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .acct-layout { grid-template-columns: 1fr; }
  .acct-side { position: static; }
  .acct-nav { grid-template-columns: repeat(2, 1fr); display: grid; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; display: flex; flex-wrap: wrap; gap: .8rem; border-left: 0; padding-left: 0; border-bottom: 2px dashed var(--border); padding-bottom: 1rem; }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .story { grid-template-columns: 1fr; }
  .story-media { order: -1; }
  .flash { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .review-rail { grid-template-columns: repeat(2, 1fr); }
  .mv-grid { grid-template-columns: 1fr; } /* was stuck at 2 cols on every screen size */
  .social-auth { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { min-height: 240px; padding-block: 2.5rem; }
  .auth-art img { width: 130px; }
  .mega { display: none; }
}

/* ------------------------------------------------------------- ≤ 860px --- */
@media (max-width: 860px) {
  :root { --pad-section: clamp(2.4rem, 8vw, 3.6rem); }

  .card-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .flash-rail { grid-template-columns: repeat(2, 1fr); }
  .flash-rail > *:nth-child(3) { display: none; }
  .review-rail { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .qv { grid-template-columns: 1fr; }
  .qv-media img { min-height: 260px; max-height: 300px; }
  .mv-grid { grid-template-columns: 1fr; }
  .form-row, .form-row.three { grid-template-columns: 1fr; }
  .hero-slides { min-height: 560px; }
  .hero-copy > div { max-width: 100%; }
  .hero-bg { object-position: 72% center; }
  .cart-item { grid-template-columns: 76px 1fr; }
  .cart-item .line-total { grid-column: 2; text-align: left; }
  .cart-item img { width: 76px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* countdown cells (4 x min-width:68px) didn't wrap and ran past the
     .flash card's padding on narrow screens, getting cropped by
     overflow-x:hidden on body */
  .countdown { flex-wrap: wrap; }

  /* fixed 78px thumbnail row could exceed viewport width on PDP with
     several images; let it scroll instead of overflowing */
  .pd-thumbs { overflow-x: auto; padding-bottom: .3rem; }
}

/* ------------------------------------------------------------- ≤ 620px --- */
@media (max-width: 620px) {
  :root { --gap: .9rem; --header-h: 62px; }

  .wrap, .wrap-narrow { width: min(100% - 1.6rem, var(--wrap)); }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .p-body { padding: .8rem .85rem 1rem; }
  .p-name { font-size: .95rem; }
  .p-price .now { font-size: 1.05rem; }
  /* Was `position: static`, which dropped the buttons into .p-media's normal
     flow — but .p-media is a fixed aspect-ratio box with overflow:hidden, so
     the buttons rendered past its bottom edge and were clipped: invisible
     and untappable, which is why "Add to Cart" silently did nothing on
     phones while working fine on desktop (where hover reveals it in place).
     Keeping it absolutely positioned (the desktop default) puts it back
     inside the visible, tappable area. */
  .p-quick { opacity: 1; transform: none; }
  .p-quick .btn span { display: none; }
  .p-quick .btn { padding: .5rem; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .trust-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-arrow { display: none; }
  .hero-slides { min-height: 520px; }
  .hero-btns .btn { flex: 1 1 100%; }
  .news-form { flex-direction: column; }
  .pd-actions .btn { flex: 1 1 100%; }
  .steps { gap: .25rem; }
  .step span { display: none; }
  .step-line { width: 22px; }
  .timeline-item { grid-template-columns: 1fr; gap: .4rem; }
  .timeline-body { border-left: 0; padding-left: 0; border-top: 2px dashed var(--border); padding-top: .8rem; }
  .acct-nav { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-card { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .to-top { bottom: 4.9rem; width: 44px; height: 44px; }
  .wa-float { width: 44px; height: 44px; }
  .table { min-width: 520px; }
  .order-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: .52rem; letter-spacing: .04em; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn .ico { width: 18px; height: 18px; }
  .countdown { flex-wrap: wrap; }
  .cd-cell { min-width: 60px; padding: .6rem .45rem; }

  /* the marquee's inline style hardcodes font-size:2.4rem which is far
     too wide for a phone screen — scale it down so the announcement bar
     doesn't force extra width/height on mobile */
  .announce marquee { font-size: 1.05rem !important; letter-spacing: .5px !important; padding: 9px 0 !important; }
}

/* ------------------------------------------------------------- ≤ 480px --- */
@media (max-width: 480px) {
  /* on the smallest phones the header still benefits from a little more
     trimming, but the mode-toggle already has its own row so this is
     just fine-tuning, not a fight for space */
  .header-inner { gap: .45rem; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn .ico { width: 16px; height: 16px; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: .9rem; }
  .all-pill { height: 32px; min-width: 40px; padding: 0 .8rem; font-size: .75rem; }
  .announce marquee { font-size: .92rem !important; }
}

/* ==========================================================================
   NAVIGATION SIZING (applies globally)
   The nav previously scaled down to 0.62rem on ordinary laptop widths, which
   was small enough to be genuinely hard to read. It now holds a comfortable
   size and only steps down gently, because the row was given real room back:
   Login/Register collapse to a single account button below 1300px, and the
   letter-spacing tightens rather than the type shrinking.
   ========================================================================== */
.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 0;
}
.nav-item {
  flex: 0 0 auto;
  margin: 0 !important;
}
.nav-link {
  /* size comes from the fluid clamp in layout.css — a fixed size here made the
     nav jump back to full width and slide under the search icon */
  white-space: nowrap;
}
/* Mega menu stays anchored */
.nav-item .mega {
  left: 50%;
  translate: -50% 0;
}

/* the brand lockup is the widest fixed block in the header — trim it a little
   earlier than the nav so the two never compete */
@media (max-width: 1560px) {
  .brand { gap: .55rem; }
  .brand img { width: 48px; height: 48px; }
  .brand-name { font-size: 1.2rem; }
  .brand-tag { font-size: .58rem; letter-spacing: .05em; }
}

/* .nav-link sizing is fluid in layout.css — no stepped overrides here, or the
   nav jumps back up in width just above each breakpoint and collides with the
   icon row. */
@media (max-width: 1340px) {
  .header-inner { gap: 0.7rem; }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 1.1rem; }
  /* free up the width the type needs: one account button instead of two */
  .header-cta .btn-ghost[data-guest-only] { display: none; }
}
@media (max-width: 1180px) {
  .nav-link { letter-spacing: -0.01em; }
  .header-inner { gap: 0.6rem; }
  .brand-tag { font-size: .54rem; }
}
@media (max-width: 1080px) {
}

/* ---------------------------------------------------------- print sheet -- */
@media print {
  .site-header, .site-footer, .announce, .to-top, .wa-float,
  .p-quick, .drawer, .overlay, .toast-stack { display: none !important; }
  body { background: #fff; }
  .panel, .summary, .order-card { break-inside: avoid; box-shadow: none; }
}