/* Veridian Product Variants
 * Progressive enhancement only: styles apply after JS adds .vhpv-root.
 * Native PrestaShop controls remain in the DOM and retain core behaviour.
 */
.product-variants.vhpv-root {
  --vhpv-accent: #5f752e;
  --vhpv-radius: 9px;
  --vhpv-height: 42px;
  --vhpv-border: var(--vh-border, #dad9c2);
  --vhpv-text: var(--vh-ink, #2d3d15);
  --vhpv-muted: var(--vh-ink-soft, #505c3c);
  --vhpv-surface: var(--vh-surface, #fffef8);
  margin: .45rem 0 .7rem;
}

.product-variants.vhpv-root .vhpv-field {
  clear: both;
  margin: 0 0 .8rem;
}

.product-variants.vhpv-root .vhpv-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .34rem;
}

.product-variants.vhpv-root .vhpv-label {
  margin: 0;
  color: var(--vhpv-text);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

.product-variants.vhpv-root .vhpv-hint {
  color: var(--vhpv-muted);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
}

.product-variants.vhpv-root .vhpv-select-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.product-variants.vhpv-root .vhpv-select-shell::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--vhpv-accent);
  border-bottom: 2px solid var(--vhpv-accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.product-variants.vhpv-root select.vhpv-select.form-control {
  width: 100%;
  min-height: var(--vhpv-height);
  height: var(--vhpv-height);
  padding: 0 42px 0 13px;
  border: 1px solid var(--vhpv-border);
  border-radius: var(--vhpv-radius);
  background: var(--vhpv-surface);
  color: var(--vhpv-text);
  box-shadow: none;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.product-variants.vhpv-root select.vhpv-select.form-control:hover {
  border-color: color-mix(in srgb, var(--vhpv-accent) 55%, var(--vhpv-border));
}

.product-variants.vhpv-root select.vhpv-select.form-control:focus {
  outline: 0;
  border-color: var(--vhpv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vhpv-accent) 16%, transparent);
}

.product-variants.vhpv-root .vhpv-radio-list,
.product-variants.vhpv-root .vhpv-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-variants.vhpv-root .vhpv-radio-item,
.product-variants.vhpv-root .vhpv-color-item {
  float: none !important;
  margin: 0 !important;
}

.product-variants.vhpv-root .vhpv-radio-item label,
.product-variants.vhpv-root .vhpv-color-item label {
  margin: 0;
  cursor: pointer;
}

.product-variants.vhpv-root .vhpv-radio-item .input-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-variants.vhpv-root .vhpv-radio-item .radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .42rem .72rem;
  border: 1px solid var(--vhpv-border);
  border-radius: var(--vhpv-radius);
  background: var(--vhpv-surface);
  color: var(--vhpv-text);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.15;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.product-variants.vhpv-root .vhpv-radio-item .input-radio:focus + .radio-label {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vhpv-accent) 16%, transparent);
}

.product-variants.vhpv-root .vhpv-radio-item .input-radio:checked + .radio-label {
  border-color: var(--vhpv-accent);
  background: var(--vhpv-accent);
  color: #fff;
}

.product-variants.vhpv-root .vhpv-color-item .input-color {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-variants.vhpv-root .vhpv-color-item .color {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--vhpv-border);
  transition: box-shadow .16s ease, transform .16s ease;
}

.product-variants.vhpv-root .vhpv-color-item .input-color:checked + .color {
  box-shadow: 0 0 0 2px var(--vhpv-accent), 0 0 0 4px #fff;
  transform: scale(.96);
}

.product-variants.vhpv-root .vhpv-color-item .input-color:focus + .color {
  box-shadow: 0 0 0 2px var(--vhpv-accent), 0 0 0 5px color-mix(in srgb, var(--vhpv-accent) 18%, transparent);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .product-variants.vhpv-root select.vhpv-select.form-control:hover,
  .product-variants.vhpv-root select.vhpv-select.form-control:focus {
    border-color: var(--vhpv-accent);
  }
  .product-variants.vhpv-root select.vhpv-select.form-control:focus,
  .product-variants.vhpv-root .vhpv-radio-item .input-radio:focus + .radio-label {
    box-shadow: 0 0 0 2px rgba(95, 117, 46, .18);
  }
}

@media (max-width: 767.98px) {
  .product-variants.vhpv-root .vhpv-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }

  .product-variants.vhpv-root .vhpv-hint {
    text-align: left;
  }

  .product-variants.vhpv-root select.vhpv-select.form-control {
    min-height: max(var(--vhpv-height), 46px);
    height: max(var(--vhpv-height), 46px);
    font-size: 16px; /* prevents iOS focus zoom */
  }

  .product-variants.vhpv-root .vhpv-radio-item .radio-label {
    min-height: 42px;
    padding: .55rem .78rem;
  }
}

/* Optional per-product bundle selector.
 * v1.3.6 intentionally mirrors the compact variant selector instead of
 * rendering large bundle cards. The hidden radio layer is kept for the
 * existing image/quantity logic, while customers see one clean dropdown.
 */
.vhpv-bundle-selector {
  --vhpv-bundle-accent: var(--vh-accent, #5f752e);
  --vhpv-bundle-border: var(--vh-border, #dad9c2);
  --vhpv-bundle-text: var(--vh-ink, #2d3d15);
  --vhpv-bundle-muted: var(--vh-ink-soft, #505c3c);
  --vhpv-bundle-surface: var(--vh-surface, #fffef8);
  --vhpv-bundle-radius: var(--vh-radius, 9px);
  --vhpv-bundle-height: 42px;
  clear: both;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: .48rem 0 .72rem;
  padding: 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.vhpv-bundle-selector .vhpv-bundle-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .65rem;
  margin: 0 0 .34rem;
  padding: 0;
}

.vhpv-bundle-selector .vhpv-bundle-label,
.vhpv-bundle-selector .vhpv-bundle-heading {
  color: var(--vhpv-bundle-text);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

.vhpv-bundle-selector .vhpv-bundle-select-shell {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.vhpv-bundle-selector .vhpv-bundle-select-shell::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--vhpv-bundle-accent);
  border-bottom: 2px solid var(--vhpv-bundle-accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.vhpv-bundle-selector select.vhpv-bundle-select.form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--vhpv-bundle-height);
  height: var(--vhpv-bundle-height);
  margin: 0;
  padding: 0 42px 0 13px;
  border: 1px solid var(--vhpv-bundle-border);
  border-radius: var(--vhpv-bundle-radius);
  background: var(--vhpv-bundle-surface);
  background-image: none;
  color: var(--vhpv-bundle-text);
  box-shadow: none;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.vhpv-bundle-selector select.vhpv-bundle-select.form-control:hover {
  border-color: var(--vhpv-bundle-accent);
}

.vhpv-bundle-selector select.vhpv-bundle-select.form-control:focus {
  outline: 0;
  border-color: var(--vhpv-bundle-accent);
  box-shadow: 0 0 0 3px rgba(95, 117, 46, .16);
}

/* Internal compatibility layer: never display the old bundle cards. */
.vhpv-bundle-selector .vhpv-bundle-options {
  display: none !important;
}

.vhpv-bundle-selector .vhpv-bundle-summary {
  display: block;
  min-height: 0;
  margin: .28rem 0 0;
  padding: 0;
  color: var(--vhpv-bundle-muted);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Native PrestaShop's volume-discount table is the same pricing data that backs
 * these bundles. Once the compact bundle selector is active, hiding the duplicate
 * table keeps the product purchase area clean and avoids two competing controls.
 */
.vhpv-bundle-product-scope .product-discounts,
.vhpv-bundle-product-scope .product-discounts-table,
.vhpv-bundle-product-scope .js-product-discounts {
  display: none !important;
}

/* Some themes float/absolutely position content around the buy block. Force the
 * bundle field back into normal document flow so it cannot cover reviews,
 * policies, stock messages or the Add to cart controls. */
.vhpv-bundle-selector,
.vhpv-bundle-selector * {
  float: none;
}

@media (max-width: 767.98px) {
  .vhpv-bundle-selector {
    margin: .48rem 0 .7rem;
  }

  .vhpv-bundle-selector select.vhpv-bundle-select.form-control {
    min-height: 46px;
    height: 46px;
    font-size: 16px; /* avoids iOS zoom */
  }

  .vhpv-bundle-selector .vhpv-bundle-summary {
    font-size: .74rem;
  }
}

/* v1.1.1: images assigned to bundle tiers remain attached to the product in
 * Back Office, but non-selected bundle images are hidden from the storefront
 * gallery. The selected bundle image is unhidden before the theme gallery is
 * activated, so this works for both desktop and responsive/mobile galleries.
 */
.vhpv-bundle-image-hidden {
  display: none !important;
}