/* =====================================================
   BREAKPOINTS — Royal Aroma Concept
   ALL media queries live here ONLY.
   1024px | 768px | 480px
   ===================================================== */

/* ── 1024px (Tablet Landscape) ─────────────────────── */
@media (max-width: 1024px) {
  :root { --section-pad: 64px; }

  /* Header */
  .nav-wrap { grid-template-columns: 180px 1fr 160px; }

  /* Cards */
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* Shop layout */
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; display: none; } /* replaced by mobile filters */

  /* Product page */
  .product-layout { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-totals { position: static; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }

  /* Account */
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }

  /* Homepage */
  .about-grid { gap: 40px; }
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 768px (Tablet Portrait) ───────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 52px; }

  /* Container */
  .container { width: min(100% - 28px, var(--container)); }

  /* Header — hamburger mode */
  .nav-wrap {
    height: 68px;
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    gap: 20px;
    z-index: 99;
  }

  .main-nav.open { display: flex; }
  .hamburger { display: flex; }

  /* Brand */
  .brand-text { font-size: 20px; }
  .brand img, .brand svg { height: 38px; }

  /* Categories */
  .categories { grid-template-columns: repeat(2, 1fr); }
  .categories a { border-right: none; border-bottom: 1px solid var(--border-light); }
  .categories a:nth-child(odd) { border-right: 1px solid var(--border-light); }

  /* Cards */
  .product-grid { gap: 16px; }

  /* Product page */
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: static; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-image { height: 380px; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Forms */
  .form-row--2col { grid-template-columns: 1fr; }
  .account-forms { grid-template-columns: 1fr; }
  .address-grid { grid-template-columns: 1fr; }
}

/* ── 480px (Mobile) ────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-pad: 44px; }

  /* Hero */
  .hero { min-height: 80vh; }
  .hero-content h1 { font-size: clamp(48px, 14vw, 80px); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  /* Cards — 1 col on mobile */
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: 280px; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }

  /* Cart product cell */
  .cart-product-cell { flex-direction: column; align-items: flex-start; }

  /* Tables */
  th, td { padding: 12px 10px; font-size: 13px; }

  /* Checkout */
  .checkout-layout { gap: 36px; }

  /* Buttons */
  .btn { padding-inline: 18px; }

  /* Tabs */
  .tab-btn { padding: 12px 16px; font-size: 12px; }
}


/* === MOBILE PRIMARY NAV + SUBMENUS === */
@media (max-width:768px){
  .main-nav{
    align-items:stretch;
    max-height:calc(100vh - 68px);
    overflow-y:auto;
    padding:18px 24px 28px;
  }

  .main-nav>ul{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .main-nav .menu-item{
    width:100%;
    border-bottom:1px solid var(--border-light);
  }

  .main-nav .menu-item>a{
    min-height:52px;
    display:flex;
    align-items:center;
    padding:14px 44px 14px 0;
  }

  .main-nav .menu-item-has-children>a::before{
    display:none;
  }

  .main-nav .menu-item-has-children{
    position:relative;
  }

  .submenu-toggle{
    position:absolute;
    top:7px;
    right:0;
    z-index:2;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    background:transparent;
    color:var(--black);
    cursor:pointer;
  }

  .submenu-toggle::before{
    content:'';
    width:8px;
    height:8px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--transition);
  }

  .menu-item-has-children.submenu-open>.submenu-toggle::before{
    transform:rotate(225deg) translate(-1px,-1px);
  }

  .main-nav .sub-menu{
    position:static;
    width:100%;
    min-width:0;
    max-height:0;
    display:block;
    padding:0;
    overflow:hidden;
    border:0;
    box-shadow:none;
    background:var(--off-white);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:max-height .28s ease,padding .28s ease;
  }

  .main-nav .sub-menu::before{
    display:none;
  }

  .main-nav .menu-item-has-children:hover>.sub-menu,
  .main-nav .menu-item-has-children:focus-within>.sub-menu{
    transform:none;
  }

  .main-nav .menu-item-has-children.submenu-open>.sub-menu{
    max-height:500px;
    padding:6px 0 10px;
  }

  .main-nav .sub-menu li{
    border:0;
  }

  .main-nav .sub-menu a{
    min-height:auto;
    padding:11px 16px;
    font-size:12px;
    white-space:normal;
  }

  .main-nav .sub-menu a::after{
    display:none;
  }
}

/* === NESTED MOBILE SUBMENU === */
@media (max-width:768px){
  .main-nav .sub-menu .menu-item>a{
    padding-left:20px;
  }
  .main-nav .sub-menu .sub-menu{
    background:rgba(0,0,0,.025);
  }
  .main-nav .sub-menu .sub-menu a{
    padding-left:36px;
    font-size:11px;
  }
  .main-nav .sub-menu .submenu-toggle{
    right:4px;
  }
}