/* =========================================================
   PANIER / CART 
   ========================================================= */

body.page-id-8{
  font-family: var(--font-poppins, var(--default-font-family));
  color: var(--color-gray-900);
}

body.page-id-8 #wp--skip-link--target{
  max-width: var(--container-7xl);
  margin-left:auto;
  margin-right:auto;
}

body.page-id-8 #wp--skip-link--target > h1.wp-block-post-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
  margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 6);
}


body.page-id-8 .wc-block-store-notices,
body.page-id-8 .woocommerce-notices-wrapper{
  margin-bottom: calc(var(--spacing) * 4);
}


body.page-id-8 .wc-block-components-sidebar-layout.wc-block-cart{
  gap: calc(var(--spacing) * 6);
}

/* -------------------------
   LEFT: Cart items card
   ------------------------- */
body.page-id-8 .wc-block-components-sidebar-layout {
    padding: 1.5rem !important;
}
body.page-id-8 .wc-block-cart__main,
body.page-id-8 .wc-block-components-sidebar{
  padding: calc(var(--spacing) * 6);
}

body.page-id-8 table.wc-block-cart-items{
  width: 100%;
}

body.page-id-8 .wc-block-cart-items__header th{
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-gray-300);
}


body.page-id-8 .wc-block-cart-item__image{
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
  width: 84px;
}
body.page-id-8 .wc-block-cart-item__image img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
}

body.page-id-8 .wc-block-cart-item__product{
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
}

body.page-id-8 .wc-block-components-product-name{
  display: inline-block;
  font-weight: 900;
  color: var(--color-gray-900);
  text-decoration: none;
  line-height: var(--leading-tight);
  margin-bottom: calc(var(--spacing) * 2);
}
body.page-id-8 .wc-block-components-product-name:hover{
  color: var(--color-blue-secondary);
  text-decoration: underline;
}

body.page-id-8 .wc-block-cart-item__prices .price{
  color: var(--color-gray-600);
  font-weight: 700;
}

/* quantity + remove */
body.page-id-8 .wc-block-cart-item__quantity{
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  flex-wrap: wrap;
}

body.page-id-8 .wc-block-cart-item__remove-link{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-red-custom);
  font-weight: 800;
  text-decoration: underline;
}
body.page-id-8 .wc-block-cart-item__remove-link:hover{
  filter: brightness(0.9);
}

/* quantity selector pill */
body.page-id-8 .wc-block-components-quantity-selector{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-white);
  height: 38px;
}

body.page-id-8 .wc-block-components-quantity-selector__input{
  width: 52px;
  height: 38px;
  border: 0 !important;
  outline: none;
  text-align: center;
  font-weight: 900;
  color: var(--color-gray-900);
  background: transparent;
}

body.page-id-8 .wc-block-components-quantity-selector__button{
  width: 42px;
  height: 38px;
  border: 0;
  background: color-mix(in oklab, var(--color-blue-primary), var(--color-white) 88%);
  cursor: pointer;
  font-weight: 900;
  transition: filter var(--default-transition-duration) var(--default-transition-timing-function);
}
body.page-id-8 .wc-block-components-quantity-selector__button:hover{
  filter: brightness(0.98);
}
body.page-id-8 .wc-block-components-quantity-selector__button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* total cell */
body.page-id-8 .wc-block-cart-item__total{
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
  text-align: right;
  white-space: nowrap;
}
body.page-id-8 .wc-block-cart-item__total .price{
  font-weight: 900;
  color: var(--color-blue-secondary);
}

/* -------------------------
   RIGHT: Totals card
   ------------------------- */
body.page-id-8 .wc-block-cart__sidebar{
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-4xl);
  box-shadow: 0 10px 30px rgba(16,24,40,.10);
  padding: calc(var(--spacing) * 6);
}

@media (min-width: 992px){
  body.page-id-8 .wc-block-cart__sidebar{
    position: sticky;
    top: calc(var(--spacing) * 6);
    align-self: start;
  }
}

body.page-id-8 .wc-block-cart__totals-title{
  margin: 0 0 calc(var(--spacing) * 4);
  font-weight: 900;
  color: var(--color-gray-900);
}

/* coupon button */
body.page-id-8 .wc-block-components-panel__button{
  background: color-mix(in oklab, var(--color-blue-primary), var(--color-white) 90%);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-2xl);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-weight: 900;
  color: var(--color-gray-900);
}

/* totals footer */
body.page-id-8 .wc-block-components-totals-footer-item{
  border-top: 1px solid var(--color-gray-300);
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 4);
}
body.page-id-8 .wc-block-components-totals-item__label{
  color: var(--color-gray-600);
  font-weight: 800;
}
body.page-id-8 .wc-block-components-totals-item__value{
  font-weight: 900;
  color: var(--color-blue-secondary);
  font-size: var(--text-xl);
}
body.page-id-8 .wc-block-components-totals-item__description{
  color: var(--color-gray-600);
  font-size: var(--text-sm);
}

/* proceed button */
body.page-id-8 .wc-block-cart__submit{
  margin-top: calc(var(--spacing) * 4);
}
body.page-id-8 .wc-block-cart__submit a.wc-block-cart__submit-button{
  width: 100%;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--radius-3xl) !important;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) !important;
  font-size: var(--text-base) !important;
  font-weight: 900 !important;
  color: var(--color-white) !important;
    background: var(--color-blue-primary) !important;
  box-shadow: 0 14px 30px color-mix(in oklab, var(--color-blue-primary), transparent 78%);
  text-decoration: none;
  transition: transform var(--default-transition-duration) var(--default-transition-timing-function),
              filter var(--default-transition-duration) var(--default-transition-timing-function);
}
body.page-id-8 .wc-block-cart__submit a.wc-block-cart__submit-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 768px){

  body.page-id-8 .wp-block-woocommerce-cart{
    padding: calc(var(--spacing) * 4) !important;
  }
  body.page-id-8 #wp--skip-link--target > h1.wp-block-post-title{
    font-size: 16px !important;
    margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 4);
  }

  body.page-id-8 .wc-block-components-main {
    padding: 0 !important;
  }
  /* coupon button */
  body.page-id-8 .wc-block-components-panel__button{
    font-size: 14px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  body.page-id-8 .wc-block-cart__main,
  body.page-id-8 .wc-block-cart__sidebar{
    padding: calc(var(--spacing) * 3);
  }


  body.page-id-8 .wc-block-cart-items__header{
    display: none;
  }

  body.page-id-8 table.wc-block-cart-items{
    display: block;
  }

  body.page-id-8 table.wc-block-cart-items tbody{
    display: block;
  }

  body.page-id-8 .wc-block-cart-items__row{
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 3);
  }

  body.page-id-8 .wc-block-cart-items__row:last-child{
    margin-bottom: 0;
  }


  body.page-id-8 .wc-block-cart-item__image,
  body.page-id-8 .wc-block-cart-item__product,
  body.page-id-8 .wc-block-cart-item__total{
    display: block;
    width: 100%;
    padding: 0;
    border: none !important;
  }

  body.page-id-8 .wc-block-cart-item__image{
    margin-bottom: calc(var(--spacing) * 3);
    width: auto;
  }

  body.page-id-8 .wc-block-cart-item__image img{
    width: 80px;
    height: 80px;
    border-radius: var(--radius-2xl);
  }

  body.page-id-8 .wc-block-components-product-name{
    font-size: 14px !important;
    margin-bottom: calc(var(--spacing) * 2);
  }

  body.page-id-8 .wc-block-cart-item__prices{
    font-size: 12px !important;
    margin-bottom: calc(var(--spacing) * 2);
  }

  body.page-id-8 .wc-block-cart-item__quantity{
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 3);
  }


  body.page-id-8 .wc-block-cart-item__total{
    text-align: left;
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid var(--color-gray-300);
  }

  body.page-id-8 .wc-block-cart-item__total::before{
    content: 'Total: ';
    color: var(--color-gray-600);
    font-weight: 700;
    margin-right: calc(var(--spacing) * 2);
  }

  body.page-id-8 .wc-block-cart-item__total .price{
    font-size: var(--text-lg);
  }


  body.page-id-8 .wc-block-cart__totals-title{
    font-size: var(--text-lg);
    margin-bottom: calc(var(--spacing) * 3);
  }

  body.page-id-8 .wc-block-components-totals-item__value{
    font-size: var(--text-lg);
    border: none !important;
  }
  .wc-block-components-totals-wrapper{
    border: none !important;
  }

  body.page-id-8 .wc-block-cart__submit{
    position: sticky;
    bottom: calc(var(--spacing) * 2);
    z-index: 25;
    margin-top: calc(var(--spacing) * 3);
  }

  body.page-id-8 .wc-block-cart__submit a.wc-block-cart__submit-button{
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) !important;
    font-size: var(--text-sm) !important;
  }
}