/* ==========================================================================
   OYELAN Beauty — responsive layers (mobile-first additions)
   Tested at: 360 / 390 / 768 / 1024 / 1440 / 1920
   ========================================================================== */

/* ---- phones & small tablets: keep the header on one unclipped row ----
   Below 1024px the logo + menu button + search + bag + language switch
   needed ~444px but only ~359px was available at 390px, so the language
   switcher was clipped off-screen. Wishlist/Account live in the drawer
   (and the drawer has its own full language switcher), so we hide the
   header wishlist icon and compact the switcher. */
@media (max-width: 1023.98px) {
  .site-header__inner { gap: 0.6rem; }
  .header-actions .wishlist-link { display: none; }
  .lang-switch { margin-inline-end: 0; gap: 0.1rem; }
  .lang-btn { padding: 0.32rem 0.45rem; font-size: 0.8rem; min-height: 40px; min-width: 40px; }
  .lang-sep { font-size: 0.7rem; }
}
@media (max-width: 419.98px) {
  /* very narrow phones: shrink the lockup so the whole row still fits */
  .site-header__inner { gap: 0.5rem; }
  .brand { gap: 0.45rem; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__text { font-size: 1.15rem; }
  .brand__text small { letter-spacing: 0.3rem; margin-top: 0.2rem; }
  .icon-btn { width: 40px; height: 40px; }
  .header-actions { gap: 0.1rem; }
  /* the Arabic label collapses to its short form */
  .lang-btn[data-set-lang="ar"] { font-size: 0; min-width: 40px; }
  .lang-btn[data-set-lang="ar"]::before { content: "ع"; font-size: 0.85rem; }
}

/* ---- mobile filter drawer (below 1024px) ---- */
@media (max-width: 1023.98px) {
  .filters-panel {
    position: fixed; inset: 0 auto 0 0; z-index: 95;
    width: min(360px, 90vw); border-radius: 0; overflow-y: auto;
    transform: translateX(-102%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    max-height: none;
  }
  .filters-panel.is-open { transform: translateX(0); }
}

/* ---- small tablets & large phones (≥ 480px) ---- */
@media (min-width: 480px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .countdown div { min-width: 74px; }
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .cart-line { grid-template-columns: 100px 1fr auto; }
  .cart-line img { width: 100px; height: 124px; }
}

/* ---- tablets (≥ 768px) ---- */
@media (min-width: 768px) {
  :root { --header-h: 78px; }
  .value-strip ul { grid-template-columns: repeat(2, 1fr); }
  .value-strip li:nth-child(odd) { border-right: 1px solid var(--border); }
  .value-strip li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .value-strip li:first-child { border-top: 0; }

  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-template-columns: 1fr auto 1fr; text-align: left; justify-items: start; }
  .footer-payments { justify-self: end; }

  .newsletter form { flex-direction: row; }
  .newsletter .input { flex: 1; }

  .offer-band__inner { grid-template-columns: 1.2fr 0.8fr; }
  .offer-band__grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
  .offer-band__grid .product-card { min-width: 0; }

  .qv-grid { grid-template-columns: 1fr 1.1fr; }
  .qv-media img { aspect-ratio: auto; height: 100%; min-height: 420px; }

  .hero__media > img { aspect-ratio: 16 / 11; }
  .t-card { padding-inline: 3.4rem; }

  .checkout-layout { grid-template-columns: 1.5fr 1fr; }
  .cart-layout { grid-template-columns: 1.6fr 1fr; }
  .ty-details { grid-template-columns: 1fr 1fr; }
  .ty-details__summary { grid-column: 1 / -1; }

  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .form-field--full { grid-column: 1 / -1; }

  .shop-toolbar { margin-bottom: 1.8rem; }
  .gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ---- desktop (≥ 1024px) ---- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; }
  .header-actions .account-link { display: inline-flex; }
  .filters-toggle { display: none; }

  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; }

  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .hero__media > img { aspect-ratio: 4 / 3.1; }

  .shop-layout { grid-template-columns: 260px 1fr; gap: 2.4rem; }
  .mobile-filters { display: none !important; }

  .pdp { grid-template-columns: 1.05fr 1fr; gap: 3.4rem; }
  .prod-grid--pdp-related { grid-template-columns: repeat(4, 1fr); }

  .value-strip ul { grid-template-columns: repeat(4, 1fr); }
  .value-strip li + li { border-top: 0; border-left: 1px solid var(--border); }
  .insta-grid { grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-card { min-height: 420px; }

  .account-layout { grid-template-columns: 240px 1fr; }
  .account-nav { flex-direction: column; overflow: visible; }
  .account-nav button { text-align: left; }
}

/* ---- large desktop (≥ 1280px) ---- */
@media (min-width: 1280px) {
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { gap: 5rem; }
}

/* ---- wide screens (≥ 1440px) ---- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .prod-grid { gap: 1.5rem; }
}

/* ---- touch device niceties ---- */
@media (hover: none) {
  .product-card__quick { opacity: 1; translate: 0 0; }
}

/* ---- print ---- */
@media print {
  .announcement, .site-header, .mobile-nav, .search-panel, .cart-drawer,
  .site-footer, .to-top, .toast-region, .overlay, .modal { display: none !important; }
  body { color: #000; background: #fff; }
}