/*
 * Haute Visibilité overrides of the classic theme.
 * Loaded by PrestaShop after theme.css (FrontController, priority 1000): keep
 * the site changes here rather than in the compiled theme.css.
 */

:root {
  /* Colors */
  --hv-color-bg: #ffffff;
  --hv-color-customize: #0b3954;
  --hv-color-blank: #a4cac2;
  --hv-color-button-text: #ffffff;

  /* Typography (Poppins is loaded by Creative Elements) */
  --hv-font-family-base: 'Poppins', sans-serif;
  --hv-font-weight-medium: 500;
  --hv-font-weight-bold: 700;

  /* Effects */
  --hv-button-hover-filter: brightness(0.93);
  --hv-transition-base: 150ms ease-in-out;
  --hv-option-inactive-opacity: 0.5;
  --hv-option-outline-width: 2px;

  /* Spacing */
  --hv-spacing-sm: 0.4rem;
  --hv-spacing-lg: 1.5rem;

  /* Shapes */
  --hv-border-radius-pill: 25px;
}

/* MINT-7727: white page background instead of the classic grey */
#wrapper,
.block-category,
.product-miniature .product-description {
  background: var(--hv-color-bg);
}

/* MINT-7727: category description below the products */
.block-category-footer {
  margin-top: var(--hv-spacing-lg);
}

/* MINT-7727: no shadow between the header and the page */
#header {
  box-shadow: none;
}

/* MINT-7727: no "Quick view" white box on the product miniatures */
.product-miniature .highlighted-informations {
  display: none;
}

/* MINT-7727: nor the line drawn above the product name on hover */
.product-miniature .product-description::after {
  display: none;
}

/* MINT-7727: Poppins Medium on the category tree and the facets */
#left-column .block-categories :not(.material-icons),
#left-column #search_filters :not(.material-icons) {
  font-family: var(--hv-font-family-base);
  font-weight: var(--hv-font-weight-medium);
}

/*
 * MINT-7727: white background behind the reassurance icons of the product
 * descriptions. The images have the old grey (#f6f6f6) baked in and are
 * pasted in every description: brightening them turns that grey white.
 */
img[src*="icones%20reassurance"],
img[src*="icones reassurance"] {
  filter: brightness(1.04);
}

/*
 * MINT-7727: "Without" / "With customization" choice on the Zakeke products
 * (ZAKEKE_FORCE = 0), like on Comptoir du Golf: "Without" shows the native
 * "Add to cart" button, "With" the Zakeke "Customize" one instead.
 * custom.js shows the choice and sets .hv-customize-selected.
 */
#zakeke-customize-container,
.hv-customize-selected .product-quantity .add {
  display: none;
}

.hv-customize-selected #zakeke-customize-container {
  display: block;
}

.hv-customization-choice {
  margin-bottom: var(--hv-spacing-lg);
  font-family: var(--hv-font-family-base);
}

.hv-customization-choice[hidden] {
  display: none;
}

.hv-customization-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-spacing-sm);
}

.hv-customization-option {
  flex: 1 1 0;
  padding: var(--hv-spacing-sm) var(--hv-spacing-lg);
  border: 0;
  border-radius: var(--hv-border-radius-pill);
  color: var(--hv-color-button-text);
  font-family: var(--hv-font-family-base);
  font-weight: var(--hv-font-weight-bold);
  white-space: nowrap;
  background-color: var(--hv-option-color);
  cursor: pointer;
  opacity: var(--hv-option-inactive-opacity);
  transition: filter var(--hv-transition-base), opacity var(--hv-transition-base);
}

.hv-customization-option-blank {
  --hv-option-color: var(--hv-color-blank);
}

.hv-customization-option-customize {
  --hv-option-color: var(--hv-color-customize);
}

.hv-customization-option[aria-pressed="true"] {
  opacity: 1;
  outline: var(--hv-option-outline-width) solid var(--hv-option-color);
  outline-offset: var(--hv-option-outline-width);
}

.hv-customization-option:hover,
.hv-customization-option:focus {
  filter: var(--hv-button-hover-filter);
}