/* =========================================================================
   LEYA ABAYAS — Responsive rules
   Every @media block from the design system, in original source order.
   MUST load after base-variables.css and shop-layout.css: several rules
   here override an equal-specificity selector in shop-layout.css purely
   by cascading later — no !important is used, so load order is load-bearing.
   ========================================================================= */

/* Header: desktop nav appears at 1024px */
@media (min-width: 1024px) {
  .header__nav-left { display: flex; align-items: center; gap: var(--s3); }
  .header__burger { display: none; }
}

/* Hero: hairline rail + slide index only on larger viewports */
@media (min-width: 900px) {
  .hero__rail { display: block; }
  .hero__content { padding-inline-start: calc(var(--gutter) + 3rem); }
  .hero__dots { inset-inline-start: calc(var(--gutter) + 3rem); }
}

/* Category tiles: 2 → 4 columns */
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* Product grid: 2 → 3 → 4 columns */
@media (min-width: 768px) { .products, ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s3); } }
@media (min-width: 768px) {
  .products.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .products.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) { .products.cols-4, ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); } }

/* Touch devices: no hover state to reveal wishlist / quick-add, so show them always */
@media (hover: none) { .product-card__wish { opacity: 1; transform: none; } }
@media (hover: none) { .product-card__quick { display: none; } }

/* Horizontal scroll rail becomes a static grid on tablet+ */
@media (min-width: 768px) { .rail-scroll { grid-auto-columns: unset; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: var(--s3); } }

/* Value strip: 2 → 4 columns, borders adjust */
@media (min-width: 900px) { .values__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .value { border-block-end: 0; } .value:last-child { border-inline-end: 0; } }

/* Editorial banner: side-by-side on tablet+ */
@media (min-width: 900px) { .edit-banner { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }

/* Testimonials: stack → 3 columns */
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

/* Instagram strip: 3 → 6 columns */
@media (min-width: 768px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }

/* Footer: stacked → 4-column grid */
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s5); } }

/* Shop sidebar + filters appear at desktop width */
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px 1fr; } .filter-toggle { display: none; } }
@media (min-width: 1024px) { .filters { display: block; position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; } }

/* Single product: side-by-side gallery + summary */
@media (min-width: 1024px) { .product-main { grid-template-columns: 1.15fr 1fr; gap: var(--s6); align-items: start; } }
@media (min-width: 1024px) { .gallery { grid-template-columns: 84px 1fr; } }
@media (min-width: 1024px) { .gallery__thumbs { grid-auto-flow: row; overflow: visible; } }

/* Checkout: side-by-side steps + sticky summary */
@media (min-width: 1024px) { .checkout-steps form.checkout { grid-template-columns: 1.3fr 1fr; gap: var(--s6); align-items: start; } .checkout__summary { position: sticky; top: calc(var(--header-h) + 1rem); } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-card__img--alt { clip-path: inset(0 0 100% 0); }
}

/* =========================================================================
   Mobile — the 70% of traffic. Kept as a single block, matching the
   original authoring intent: it must cascade after every rule above so it
   wins on equal specificity where selectors repeat (e.g. .header__inner,
   .value, .footer__grid). Since this file always loads after
   shop-layout.css, that guarantee holds regardless of which file a given
   base rule lives in.
   ========================================================================= */
@media (max-width: 767px) {

  :root { --header-h: 60px; }

  /* --- Header: five icons do not fit next to a logo. Keep three. --- */
  .header__inner { grid-template-columns: auto 1fr auto; min-height: 60px; }
  .brand img, .brand .custom-logo { height: 26px; }
  .header__tools { gap: 0; }
  .header__tools .lang-switch,
  .header__tools .icon-btn--account,
  .header__tools .icon-btn--wishlist { display: none; }   /* they live in the nav drawer */

  /* Apple's minimum comfortable target is 44px. Enforce it. */
  .icon-btn { width: 44px; height: 44px; }
  .qty button { width: 48px; height: 48px; }
  .opt { min-width: 52px; min-height: 44px; display: grid; place-items: center; }
  .opt--color { width: 40px; height: 40px; }
  .mini-cart__remove, .size-guide-link { padding-block: 8px; display: inline-block; }

  /* --- Announcement: one line, never wrapping to three. --- */
  .announce__track { padding-inline: 2.75rem; min-height: 34px; }
  .announce__msg { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* --- Hero: shorter, so the first products are reachable by thumb. --- */
  .hero {
    --hero-height: clamp(500px, calc(100svh - var(--header-h) - 34px), 720px);
  }
  .hero__slide, .hero__content { min-height: var(--hero-height); }
  .hero__media img { object-position: 50% 18%; }
  .hero__slide--1 .hero__media img { object-position: 50% 28%; }
  .hero__slide--2 .hero__media img,
  .hero__slide--3 .hero__media img { object-position: 50% 8%; }
  .hero__title { font-size: clamp(2.25rem, 11vw, 3rem); max-width: 12ch; }
  .hero__text { font-size: var(--step-0); }
  .hero .btn { width: 100%; }
  .hero__dots { bottom: auto; top: var(--s3); inset-inline-start: var(--gutter); }

  /* --- Section headers stack instead of squeezing. --- */
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .section__title { font-size: var(--step-2); }

  /* --- Grid --- */
  .products, ul.products { gap: var(--s3) var(--s1); }
  .product-card__body { padding-block-start: .75rem; }
  .product-card__title { font-size: .8125rem; line-height: 1.4; }
  .product-card__price { font-size: .8125rem; }
  .badge { font-size: 9px; padding: 4px 7px; }

  /* Rails: one and a half cards visible, so it reads as scrollable. */
  .rail-scroll { grid-auto-columns: 62%; gap: var(--s1); scroll-padding-inline-start: var(--gutter); }

  /* --- Value strip: 2×2, no dangling border --- */
  .value { padding: var(--s3) var(--s1); }
  .value:nth-child(2n) { border-inline-end: 0; }
  .value:nth-last-child(-n+2) { border-block-end: 0; }

  /* --- Editorial banner: image first, then the story --- */
  .edit-banner__media { aspect-ratio: 4/5; }
  .edit-banner .btn { align-self: stretch; }

  /* --- Product page --- */
  .gallery__main { aspect-ratio: 3/4; }
  .gallery__main img { cursor: default; }            /* pinch-zoom instead of click-zoom */
  .gallery__thumbs { grid-auto-columns: 64px; }
  .summary .product_title { font-size: var(--step-2); }

  /* Sticky add-to-cart. The single biggest mobile conversion lever. */
  .sticky-atc {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 65;
    display: flex; align-items: center; gap: var(--s2);
    background: var(--cream); border-block-start: var(--rail);
    padding: .7rem var(--s2) calc(.7rem + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform var(--dur) var(--ease);
  }
  .sticky-atc.is-visible { transform: none; }
  .sticky-atc__info { flex: 1; min-width: 0; }
  .sticky-atc__name { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-atc__price { font-size: var(--step-0); color: var(--wine); direction: ltr; }
  .sticky-atc .btn { padding-inline: 1.5rem; white-space: nowrap; }
  body.is-product .wa-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

  /* --- Cart & checkout: tables become cards --- */
  .shop_table thead { display: none; }
  .shop_table tr { display: grid; grid-template-columns: 80px 1fr; gap: var(--s2);
    padding-block: var(--s2); border-block-end: var(--rail); }
  .shop_table td { display: block; border: 0; padding: 0; }
  .checkout-steps form.checkout { gap: var(--s4); }
  .checkout__summary { order: -1; }                  /* see the total before typing an address */

  /* --- Footer --- */
  .footer__grid { gap: var(--s3); padding-block: var(--s4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__brand img { height: 32px; }

  /* --- Filters drawer button always reachable --- */
  .shop-toolbar { flex-wrap: wrap; gap: var(--s1); }
  .shop-toolbar__count { width: 100%; order: 3; }
}

/* Very small phones (SE, older Androids) */
@media (max-width: 360px) {
  .products, ul.products { grid-template-columns: 1fr; }
  .rail-scroll { grid-auto-columns: 78%; }
}

/* Landscape phones: the hero must not eat the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { --hero-height: max(420px, 100svh); }
  .hero__slide, .hero__content { min-height: var(--hero-height); }
  .hero__media img { object-position: 50% 20%; }
  .site-header { position: static; }
}

/* Buy-now-pay-later: tighter on mobile */
@media (max-width: 767px) {
  .bnpl-note { font-size: .75rem; }
  .bnpl-note__brands img { height: 18px; }
  .product-profile { grid-template-columns: 1fr; }
  .product-profile div { border-inline-end: 0; border-block-end: var(--rail); }
  .product-profile div:last-child { border-block-end: 0; }
  .size-finder__grid { grid-template-columns: 1fr; }
  .checkout-reassurance { grid-template-columns: 1fr; }
  .checkout-reassurance span { justify-content: flex-start; text-align: start; }
  .product-story { margin-block: var(--s5); padding: var(--s4) var(--s2); }
  .product-motion { grid-template-columns: 1fr; margin-block: var(--s5); padding: var(--s3); }
  .stock-waitlist form { grid-template-columns: 1fr; }
  .consent-notice { align-items: stretch; flex-direction: column; }
  .consent-notice > div { display: grid; grid-template-columns: 1fr 1fr; }
}