/** Couleurs par defaut **/
.woocommerce-info::before {
  color: var(--wp--preset--color--info);
}
.woocommerce-error {
  border-top-color: var(--wp--preset--color--error);
}
.woocommerce-error::before {
  color: var(--wp--preset--color--error);
}

/** Go To Top **/
@media (min-width: 1280px) {
  #go-to-top {
    bottom: 0;
    right: 0;
    border-radius: 0;
    border: none;
    border-top-left-radius: 10px;
  }
}

/** Effet Blur à l'ouverture du menu **/
body * {
  transition: filter 0.3s ease;
}

/* Appliquer le flou sur tout sauf le header et le menu */
html.blur-mode body > *:not(header) {
  filter: blur(5px);
}

del {
  text-decoration: line-through;
  text-decoration-color: var(--wp--preset--color--supports-700);
}

input {
  cursor: pointer;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

/** Formulaire de connexion / inscription **/
#customer_login h2 {
  margin-bottom: 0;
}

#customer_login .woocommerce-form {
  margin-top: 0;
}

#customer_login .woocommerce-form .form-row .woocommerce-form-login__rememberme {
  width: 100%;
}

#customer_login .woocommerce-form .form-row input[type="checkbox"] {
  appearance: auto;
  width: max-content;
}

/** Page mon compte (connecté) **/
.woocommerce-MyAccount-navigation {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding-left: 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  position: relative;
  justify-content: center;
  width: 250px;
  padding: 1rem;
  padding-top: 140px;
  background-color: #f5f5f5;
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: #c4c4c4;
}

.woocommerce-MyAccount-navigation ul li a::before {
  content: "";
  position: absolute;
  width: 100px;
  left: 50%;
  top: 20px;
  height: 100px;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: #000000;
  transform: translateX(-50%);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #c4c4c4;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
  mask-image: url(./svgs/dashboard.svg);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
  mask-image: url(./svgs/order.svg);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before {
  mask-image: url(./svgs/downloads.svg);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
  mask-image: url(./svgs/address.svg);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
  mask-image: url(./svgs/account.svg);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  mask-image: url(./svgs/logout.svg);
}

/** Page d'adresses **/
.woocommerce-Addresses header {
  margin-left: initial;
  margin-right: initial;
  width: initial;
}

.woocommerce-Addresses header h2 {
  margin-bottom: 0;
}

/** Page Checkout **/
.checkout-page #order_comments {
  border: 1px solid #ccc;
  padding: .5rem;
  min-height: 100px;
}

/** Design du bouton Liste Envie */
html body#header .wishlist-button {
  --size: 2.5rem;
  all: initial;
  position: relative;
  width: calc(var(--size) * 1.5);
  height: 3rem; /** Hauteur du bouton ajouter au panier à côté */
  background-color: transparent;
  border: none;
  outline: none;
  vertical-align: super;
}

html body#header .wishlist-button::before {
  --size: 2.5rem;
  cursor: pointer;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  mask-image: url(./svgs/heart.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: var(--wp--preset--color--supports-800);
}

html body#header .wishlist-button:hover::before {
  background-color: var(--wp--preset--color--supports-300);
  opacity: 0.5;
}

html body#header .wishlist-button.active::before,
html body#header .wishlist-button.active:hover::before  {
  background-color: var(--wp--preset--color--error);
  opacity: 1;
}

#liste-envie { cursor: pointer; }