/* ==========================================================
   MAISON JADEM — RESPONSIVE
   ========================================================== */


/* ==========================================================
   1050 PX — PANIER
   ========================================================== */

@media(max-width:1050px){

  .cart-layout{
    grid-template-columns:1fr;
  }

}


/* ==========================================================
   900 PX — TABLETTE
   ========================================================== */

@media(max-width:900px){

  .shell{
    width:min(var(--shell),calc(100% - 28px));
  }


  /* HEADER */

  .nav{
    min-height:90px;
    grid-template-columns:1fr auto 1fr;
  }

  .brand{
    grid-column:2;
  }

  .brand-logo{
    width:125px;
    max-width:125px;
  }

  .menu-button{
    display:block;
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }

  .header-actions{
    grid-column:3;
    grid-row:1;
  }

  .main-nav{
    display:none;

    position:absolute;
    top:90px;
    left:14px;
    right:14px;

    padding:12px 20px 22px;

    background:rgba(251,248,243,.98);
    color:var(--color-stone);
  }

  .main-nav.open{
    display:block;
  }

  .main-nav a{
    display:block;

    padding:14px 0;

    border-bottom:1px solid var(--line);

    font-family:var(--font-display);
    font-size:26px;

    letter-spacing:0;
    text-transform:none;
  }


  /* SECTIONS ACCUEIL */

  .product-feature,
  .personalisation-grid,
  .story-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .product-feature-reverse{
    grid-template-columns:1fr;
  }

  .product-feature-reverse .product-image,
  .product-feature-reverse .product-copy{
    grid-column:auto;
    grid-row:auto;
  }

  .product-image,
  .product-image img,
  .personalisation-image,
  .personalisation-image img{
    min-height:520px;
  }


  /* FOOTER */

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-logo{
    width:130px;
    max-width:130px;
  }


  /* COMPTE CLIENT */

  .premium-account{
    grid-template-columns:1fr;
  }

  .account-sidebar{
    position:static;
  }

  .account-nav{
    grid-template-columns:repeat(2,1fr);
    gap:0 20px;
  }

  .order-card{
    grid-template-columns:1fr 1fr;
  }

}


/* ==========================================================
   700 PX — CHECKOUT / PANIER
   ========================================================== */

@media(max-width:700px){

  .cart-nav{
    min-height:90px;
  }

  .cart-logo{
    width:115px;
    max-width:115px;
  }

  .back-link{
    font-size:7px;
    letter-spacing:1.3px;
  }

  .cart-main{
    padding:60px 0 100px;
  }

  .checkout-panel{
    padding:28px 20px;
  }

  .checkout-grid,
  .account-options{
    grid-template-columns:1fr;
  }

  .checkout-grid .full{
    grid-column:auto;
  }

  .delivery-card{
    grid-template-columns:22px 1fr;
  }

  .delivery-price{
    grid-column:2;
  }

  .checkout-cart-item{
    grid-template-columns:110px minmax(0,1fr);

    gap:18px;
    padding:18px;
  }

  .checkout-cart-item img{
    width:110px;
    height:150px;
  }

  .checkout-cart-item-info h2{
    font-size:30px;
  }

  .checkout-cart-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .order-success,
  .cart-empty-page{
    padding:42px 22px;
  }

}


/* ==========================================================
   650 PX — COMPTE CLIENT
   ========================================================== */

@media(max-width:650px){

  .account-top-actions{
    gap:12px;
  }

  .account-top-actions a:first-child{
    display:none;
  }

  .account-top-logo{
    width:115px;
    max-width:115px;
  }

  .account-hero,
  .account-section{
    padding:28px 20px;
  }

  .account-hero h2{
    font-size:44px;
  }

  .account-stats,
  .address-grid,
  .profile-card,
  .account-nav,
  .order-card{
    grid-template-columns:1fr;
  }

  .account-section .section-heading{
    align-items:start;
    flex-direction:column;
  }

  .account-shell{
    width:min(100% - 28px,1120px);
    padding-top:28px;
  }

  .account-logo{
    width:115px;
    max-width:115px;
  }

  .account-panel{
    margin-top:34px;
    padding:38px 24px;
  }

}


/* ==========================================================
   600 PX — MOBILE
   ========================================================== */

@media(max-width:600px){

  /* HEADER */

  .brand-logo{
    width:110px;
    max-width:110px;
  }

  .account-link span:last-child{
    display:none;
  }


  /* SIGNATURE */

  .signature{
    padding:55px 0;
  }

  .signature blockquote{
    font-size:clamp(42px,12vw,58px);
  }


  /* COLLECTION */

  .collection{
    padding:75px 0;
  }

  .section-heading{
    padding-bottom:45px;
  }

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

  .product-image,
  .product-image img{
    min-height:410px;
  }


  /* PERSONNALISATION */

  .personalisation{
    padding:75px 0;
  }

  .personalisation-image,
  .personalisation-image img{
    min-height:410px;
  }


  /* NOTRE HISTOIRE */

  .story{
    padding:75px 0;
  }


  /* PANIER */

  .cart-trigger{
    font-size:0;
  }

  .cart-trigger::before{
    content:"Panier";

    font-size:8px;
    letter-spacing:1.5px;
  }

  .cart-count{
    margin-left:5px;
  }

  .cart-drawer-header,
  .cart-drawer-content,
  .cart-drawer-footer{
    padding-left:20px;
    padding-right:20px;
  }

  .cart-item{
    grid-template-columns:90px 1fr;
    gap:15px;
  }

  .cart-item img{
    width:90px;
    height:125px;
  }


  /* FOOTER */

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-logo{
    width:120px;
    max-width:120px;
  }

}