/* =========================================================
   DecorateNow — Responsive Rules
   Mobile-first base already in style.css (targets 375–430px)
   Progressive enhancement upward from here.
   ========================================================= */

/* ---------- Small phones (<=374px): tighten spacing ---------- */
@media (max-width:374px){
  :root{--container-pad:12px;}
  .hero-slide-content h1{font-size:30px;}
  .category-grid{gap:10px;}
  .product-rail .product-card{width:148px;}
  .countdown-box{min-width:40px;padding:6px 8px;}
}

/* ---------- Large phones (430px+) already covered by base ---------- */

/* ---------- Small tablets / large phones landscape (600px+) ---------- */
@media (min-width:600px){
  .category-grid{grid-template-columns:repeat(4,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .insta-grid{grid-template-columns:repeat(4,1fr);}
  .brand-strip{grid-template-columns:repeat(4,1fr);}
  .deal-banner{grid-template-columns:1fr 1fr;}
  .hero-arrow{display:flex;}
}

/* ---------- Tablets (768px+) ---------- */
@media (min-width:768px){
  :root{--header-h:76px;--bottom-nav-h:0px;}
  .bottom-nav{display:none;}
  .floating-btns{bottom:24px;}
  .toast{bottom:30px;}

  .header-search{display:block;max-width:420px;margin:0 24px;}
  .header-search-mobile{display:none;}
  .hamburger{display:none;}

  .logo-mark{font-size:30px;}
  .logo-word{font-size:22px;}
  .logo-img-icon{height:42px;}
  .logo-img-heading{height:24px;}

  .section{padding:64px 32px;}
  .section-tint{padding-left:32px;padding-right:32px;}
  .section-head h2{font-size:38px;}

  .category-grid{grid-template-columns:repeat(4,1fr);gap:20px;}
  .product-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
  .product-rail{gap:20px;}
  .product-rail .product-card{width:210px;}

  .room-card{width:190px;height:230px;}

  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}
  .footer-payments{padding-left:32px;padding-right:32px;}
  .footer-bottom{padding-bottom:40px;}

  .insta-grid{grid-template-columns:repeat(5,1fr);}
  .brand-strip{grid-template-columns:repeat(5,1fr);}

  .newsletter-form{flex-direction:row;max-width:460px;margin:0 auto;}
  .newsletter-form input{flex:1;}

  .quick-view{position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-46%);
    border-radius:20px;max-width:760px;width:90%;display:grid;grid-template-columns:1fr 1fr;max-height:80vh;}
  .quick-view.is-open{transform:translate(-50%,-50%);}
  .quick-view-close{position:absolute;top:14px;right:14px;margin:0;}
  .qv-media{margin-bottom:0;height:100%;border-radius:20px 0 0 20px;}
  .quick-view-body{padding:28px 28px 28px 0;display:contents;}
  .qv-details{padding:40px 28px 28px 20px;}
}

/* ---------- Small desktop (1024px+) ---------- */
@media (min-width:1024px){
  .hero{height:640px;}
  .hero-slide-content{padding-bottom:90px;}

  .category-grid{grid-template-columns:repeat(8,1fr);}
  .product-grid{grid-template-columns:repeat(4,1fr);}

  .deal-info{padding:40px 48px;display:flex;flex-direction:column;justify-content:center;}
  .deal-info h3{font-size:32px;}

  .collection-band-inner{padding:80px 32px 44px;}
  .festival-section{padding-top:64px;padding-bottom:64px;}

  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;}

  .announce-track{animation-duration:30s;}
}

/* ---------- Desktop (1280px+) ---------- */
@media (min-width:1280px){
  .header-inner{padding:0 40px;}
  .section{padding:80px 40px;}
  .section-tint{padding-left:40px;padding-right:40px;}
  .product-rail .product-card:hover,
  .product-grid .product-card:hover{transform:translateY(-6px) scale(1.01);}
  .hero-slide-content h1{font-size:72px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.bottom-nav,.floating-btns,.announce-bar,.search-overlay,.mobile-menu,.drawer-backdrop{display:none !important;}
}