/* ==========================================================================
   Personalise Par - Responsive rules
   Mobile-first base lives in styles.css; these are the step-downs.
   Breakpoints: 1024px (tablet landscape), 768px (tablet), 560px (phone)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet landscape and below
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section: 4.5rem; }

  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { font-size: 3rem; }
  .designer { max-width: 520px; margin: 0 auto; }

  .product-layout { grid-template-columns: 1fr; gap: 2rem; }
  .gallery { position: static; }
  .gallery__main .ball { max-width: 300px; }

  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }

  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(340px, 88vw);
    z-index: 150;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--ease);
    box-shadow: var(--shadow-l);
  }
  .filters.is-open { transform: translateX(0); }
  .filters__close { display: inline-flex !important; }
  .filter-drawer-btn { display: inline-flex; }

  .filters-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 62, 80, 0.45);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease);
  }
  .filters-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .contact-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Tablet and below - nav collapses, grids narrow
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --section: 3.5rem; --header-h: 68px; }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.65rem; }
  .hero h1 { font-size: 2.4rem; }
  .hero { padding: 2.5rem 0 3rem; }
  .hero__sub { font-size: 1.05rem; }

  .nav-toggle { display: inline-flex; order: 3; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--ink-08);
    box-shadow: var(--shadow-m);
    transform: translateY(-120%);
    transition: transform var(--ease);
    z-index: 90;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 0.85rem 1rem; font-size: 1.05rem; }

  .cart-btn { padding: 0.55rem 0.85rem; }
  .cart-btn__label, .cart-btn__total { display: none; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .customiser__stage { grid-template-columns: 1fr; }
  .card-row { grid-template-columns: 1fr; }

  .steps li span { display: none; }
  .steps li::after { margin-left: 0.25rem; }

  /* Sticky total bar on cart + checkout */
  .sticky-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--ink-08);
    box-shadow: 0 -8px 24px rgba(44,62,80,0.08);
  }
  .sticky-bar__total { margin-right: auto; }
  .sticky-bar__total span { display: block; font-size: 0.72rem; color: var(--ink-40); }
  .sticky-bar__total strong { font-family: var(--display); font-size: 1.25rem; }
  body.has-sticky-bar { padding-bottom: 92px; }

  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line__price { grid-column: 2; text-align: left; }

  .reviews__track { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .wrap { padding: 0 1.15rem; }

  h1 { font-size: 1.9rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero__cta .btn { width: 100%; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .designer { padding: 1.15rem; }
  .designer .ball { max-width: 220px; }

  .shop-toolbar { gap: 0.6rem; }
  .shop-toolbar .count { width: 100%; }
  .shop-toolbar select,
  .shop-toolbar input[type="search"],
  .shop-toolbar .btn { width: 100%; }

  .product-card__media .ball { max-width: 220px; }
  .total-pill { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

  .qty-stepper button { width: 52px; height: 52px; }
  .form-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Large screens
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --maxw: 1340px; }
}

/* --------------------------------------------------------------------------
   Print - order confirmations get printed a lot
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .sticky-bar, .btn { display: none !important; }
  body { background: #fff; }
}