/* Maison Jadem — catégories visuelles */

.category-showcase{
  padding:90px 0 115px;
  background:var(--color-travertine);
}

.category-showcase-heading{
  max-width:1200px;
  margin:0 auto 52px;
  text-align:center;
}

.category-showcase-heading h2{
  margin:16px 0 18px;
  font-size:clamp(52px,6vw,86px);
  line-height:1.05;
}

.category-showcase-heading p{
  max-width:620px;
  margin:auto;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:260px;
  gap:18px;
}

.category-card{
  position:relative;
  grid-column:span 2;
  min-height:260px;
  overflow:hidden;
  background:#dcd4c8;
  color:#fff;
}

.category-card-large{
  grid-column:span 4;
  grid-row:span 2;
}

.category-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s ease;
}

.category-card-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(24,20,16,.06),
    rgba(24,20,16,.68)
  );
}

.category-card-content{
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:28px;
}

.category-card-content small{
  margin-bottom:8px;
  font-size:8px;
  letter-spacing:2px;
}

.category-card-content strong{
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,48px);
  font-weight:400;
  line-height:1;
}

.category-card-content em{
  max-width:420px;
  margin-top:9px;
  font-size:10px;
  font-style:normal;
  line-height:1.6;
  opacity:.84;
}

.category-card-link{
  margin-top:18px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.65);
  font-size:8px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.category-card-link b{
  font-weight:400;
}

.category-card:hover img{
  transform:scale(1.035);
}

/* Page catégorie */

.category-page{
  background:var(--color-ivory);
}

.category-topbar{
  background:var(--color-ivory);
  border-bottom:1px solid var(--line);
}

.category-topbar-inner{
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.category-logo{
  width:140px;
  height:auto;
}

.category-topbar nav{
  display:flex;
  align-items:center;
  gap:25px;
}

.category-topbar nav a{
  font-size:8px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.category-hero{
  position:relative;
  min-height:520px;
  display:grid;
  align-items:end;
  color:#fff;
  background-image:var(--category-image);
  background-position:center;
  background-size:cover;
}

.category-hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(24,20,16,.10),
    rgba(24,20,16,.66)
  );
}

.category-hero-content{
  position:relative;
  z-index:2;
  padding-bottom:72px;
}

.category-hero h1{
  margin:14px 0;
  font-size:clamp(70px,9vw,130px);
  line-height:.82;
}

.category-hero p{
  max-width:620px;
  font-size:13px;
  line-height:1.9;
}

.category-products{
  padding:110px 0 140px;
}

.category-products-heading{
  margin-bottom:50px;
}

.category-products-heading h2{
  margin-top:10px;
  font-size:58px;
}

/* ===========================
   CARTES PRODUITS
=========================== */

.category-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 26px;
}

.category-product-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.category-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}

.category-product-image{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--color-travertine);
}

.category-product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.category-product-card:hover .category-product-image img{
  transform:scale(1.03);
}

.category-product-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  padding:30px;
}

.category-product-copy .kicker{
  margin-bottom:12px;
  color:var(--color-champagne);
  font-size:8px;
  letter-spacing:2.6px;
}

.category-product-copy h3{
  margin:0 0 14px;
  color:var(--color-stone);
  font-family:var(--font-display);
  font-size:42px;
  font-weight:400;
  line-height:1;
}

.category-product-copy p{
  max-width:420px;
  margin:0;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:300;
  line-height:1.8;
}

/* Prix */

.product-prices{
  display:flex;
  align-items:baseline;
  gap:13px;
  margin:25px 0 23px;
}

.product-compare-price{
  color:rgba(95,91,85,.55);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:300;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

.product-current-price{
  color:var(--color-champagne);
  font-family:var(--font-display);
  font-size:31px;
  font-weight:400;
  line-height:1;
}

/* Bouton */

.category-product-copy .add-cart-button{
  width:100%;
  margin-top:auto;
  padding:17px 20px;
  border:0;
  background:var(--color-stone);
  color:#fff;
  cursor:pointer;
  font-size:8px;
  letter-spacing:2px;
  text-align:center;
  text-transform:uppercase;
  transition:
    background .25s ease,
    transform .25s ease;
}

.category-product-copy .add-cart-button:hover{
  background:var(--color-champagne);
  transform:translateY(-1px);
}

.category-product-copy .add-cart-button span{
  margin-left:8px;
}

/* Page introuvable */

.category-not-found{
  min-height:70vh;
  display:grid;
  align-content:center;
  justify-items:start;
}

.category-not-found h1{
  margin:12px 0;
  font-size:72px;
}

.category-not-found p{
  margin-bottom:25px;
}

/* Tablette */

@media(max-width:900px){
  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:320px;
  }

  .category-card,
  .category-card-large{
    grid-column:span 1;
    grid-row:span 1;
  }

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

/* ==========================================================
   MOBILE — 650 PX
   ========================================================== */

@media(max-width:650px){

  .category-showcase{
    padding:65px 0 80px;
  }

  .category-showcase-heading{
    margin-bottom:38px;
  }

  .category-grid{
    grid-template-columns:1fr;
    grid-auto-rows:410px;
  }

  .category-card,
  .category-card-large{
    grid-column:1;
    grid-row:auto;
  }

  .category-card-content{
    padding:23px;
  }

  .category-topbar-inner{
    min-height:88px;
  }

  .category-logo{
    width:112px;
  }

  .category-topbar nav{
    gap:12px;
  }

  .category-topbar nav a:first-child{
    display:none;
  }

  .category-hero{
    min-height:440px;
  }

  .category-hero-content{
    padding-bottom:45px;
  }

  .category-hero h1{
    font-size:66px;
  }

  .category-products{
    padding:80px 0 100px;
  }

  .category-product-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .category-product-copy{
    padding:24px 20px 26px;
  }

  .category-product-copy h3{
    font-size:36px;
  }

  .category-product-copy p{
    font-size:11px;
  }

  .product-prices{
    margin:21px 0;
  }

  .product-compare-price{
    font-size:13px;
  }

  .product-current-price{
    font-size:28px;
  }

}