/* ==========================================================================
   J2 FINE FURNITURE — responsive
   Mobile first. Breakpoints follow the brand spec:
     <480        small phone
     480–767     large phone
     768–991     tablet
     992–1199    small desktop
     1200+       desktop
   ========================================================================== */

/* ---------------------------------------------------------- small phones
   Everything is single column, the photography is the largest element and
   the hero leads with the image. */
.j2-hero__visual {
  order: -1;
}

.j2-hero__media {
  aspect-ratio: 5 / 4;
}

.j2-grid--2,
.j2-grid--3,
.j2-grid--4,
.j2-editorial {
  grid-template-columns: minmax(0, 1fr);
}

.j2-editorial__item--wide {
  grid-column: auto;
}

.j2-form__grid,
.j2-filter-bar__row {
  grid-template-columns: minmax(0, 1fr);
}

.j2-hero__stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.j2-hero__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.j2-btn-row .j2-btn {
  flex: 1 1 100%;
}

.j2-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
}

.j2-footer__social a {
  flex: 1 1 100%;
  justify-content: center;
}

.j2-whatsapp-float {
  min-height: 50px;
  padding: 14px;
}

.j2-whatsapp-float span {
  display: none;
}

.j2-pagination {
  gap: 5px;
}

.j2-pagination a,
.j2-pagination span {
  min-width: 40px;
  min-height: 40px;
}

/* ---------------------------------------------------------- large phones */
@media (min-width: 480px) {
  :root {
    --gutter: 20px;
  }

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

  .j2-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .j2-editorial__item--wide {
    grid-column: span 2;
  }

  .j2-form__grid,
  .j2-filter-bar__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .j2-project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- tablets */
@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-height: 76px;
  }

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

  .j2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .j2-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .j2-hero__stat {
    display: block;
  }

  .j2-btn-row .j2-btn {
    flex: 0 1 auto;
  }

  .j2-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .j2-footer__bottom {
    flex-direction: row;
    align-items: center;
  }

  .j2-footer__social a {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .j2-consult {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .j2-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .j2-story--reverse > :first-child {
    order: 2;
  }

  .j2-story--reverse > :last-child {
    order: 1;
  }

  .j2-product-gallery-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------- small desktop */
@media (min-width: 992px) {
  .j2-topbar {
    display: block;
  }

  .j2-nav {
    display: block;
  }

  .j2-burger {
    display: none;
  }

  .j2-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .j2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hero: copy about 40%, photography about 60%. */
  .j2-hero__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .j2-hero__visual {
    order: 0;
  }

  .j2-hero__media {
    aspect-ratio: 5 / 6;
  }

  .j2-split,
  .j2-split--start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .j2-split--reverse > :first-child {
    order: 2;
  }

  .j2-catalogue {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .j2-catalogue__aside {
    position: sticky;
    top: calc(var(--header-height) + 20px);
  }

  .j2-filters-toggle {
    display: none;
  }

  .j2-shop-toolbar__search {
    display: none;
  }

  .j2-shop-toolbar {
    margin-bottom: 24px;
  }

  .j2-product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .j2-product__info {
    position: sticky;
    top: calc(var(--header-height) + 24px);
  }

  .j2-cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .j2-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .j2-footer__brand-col {
    grid-column: span 3;
  }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1200px) {
  :root {
    --gutter: 32px;
  }

  .j2-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .j2-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Footer: brand column plus Shop, Services, Contact, Social. */
  .j2-footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr;
  }

  .j2-footer__brand-col {
    grid-column: auto;
  }
}

/* ------------------------------------------------------- JS-enabled shop
   Without JavaScript the filter panel simply stays inline above the grid.
   With JavaScript it becomes a drawer on small screens so filters never
   permanently occupy the page. */
.j2-js .j2-filters-toggle {
  display: inline-flex;
}

.j2-js .j2-catalogue__aside {
  display: none;
}

.j2-js .j2-catalogue__aside[data-open="true"] {
  display: block;
}

@media (min-width: 992px) {
  .j2-js .j2-catalogue__aside {
    display: block;
  }

  .j2-js .j2-filters-toggle {
    display: none;
  }
}