/* =============================================
   Product Detail Page — Parfois-style layout
   Vertical gallery + sticky info panel
   ============================================= */

/* ---- Reset: override default product styles ---- */
.parfois-pdp #content {
  margin-bottom: 0;
}
.parfois-pdp .product-prices {
  margin: 0;
}
.parfois-pdp .product-information {
  margin: 0;
  padding: 0;
  border-top: none;
}
.parfois-pdp .product-actions .control-label {
  min-width: auto;
}

/* ---- Break out of .container and #content-wrapper padding ---- */
#product #wrapper > .container {
  max-width: 100%;
  padding: 0 20px;
  width: 100%;
}

#product #content-wrapper {
  padding-left: 0;
  padding-right: 0;
}

#product #wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ---- Main layout ---- */
.parfois-pdp {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.parfois-product-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ---- Left column: Gallery ---- */
.parfois-gallery {
  flex: 0 0 58%;
  max-width: 58%;
  position: relative;
}

/* Desktop gallery: 2 large + 3 per row */
.parfois-gallery__desktop {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.parfois-gallery__item {
  flex: 0 0 calc(33.333% - 3px);
  max-width: calc(33.333% - 3px);
  overflow: hidden;
  display: block;
  text-decoration: none;
}

/* First 2 images: 50% width each (2 per row) */
.parfois-gallery__item--large {
  flex: 0 0 calc(50% - 2px);
  max-width: calc(50% - 2px);
}

.parfois-gallery__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.4s ease;
}

.parfois-gallery__img:hover {
  transform: scale(1.03);
}

/* Hidden images (beyond the first 4) */
.parfois-gallery__item--hidden {
  display: none;
}

/* Mobile carousel dots — hidden on desktop */
.parfois-gallery__dots {
  display: none;
}

/* Contador "3/14" (sustituye a los puntos con >8 fotos) — hidden on desktop */
.parfois-gallery__counter {
  display: none;
}

/* "See all photos" button */
.parfois-gallery__show-more {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  margin-top: 4px;
  border: 1px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.parfois-gallery__show-more:hover {
  background: #1a1a1a;
  color: #fff;
}


/* Product flags */
.parfois-flags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parfois-flag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #fff;
  color: #000;
}

.parfois-flag--new {
  background: #000;
  color: #fff;
}

.parfois-flag--on-sale,
.parfois-flag--discount {
  background: #c4392d;
  color: #fff;
}

/* ---- Right column: Info panel ---- */
.parfois-info {
  flex: 0 0 42%;
  max-width: 42%;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.parfois-info__inner {
  padding: 32px 40px 48px;
}

/* Product name */
.parfois-info__name {
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 12px;
}

/* Price */
.parfois-info__price {
  margin-bottom: 16px;
}

/* ---- SeQura: compactar el hueco bajo el widget ----
   El widget (tipo banner) se inyecta por JS tras .product-prices, dentro de
   .parfois-info__price. El hueco lo sumaban: margin 10px 0 del widget
   (modules/sequra/views/css/custom.css), min-height 123px de reserva CLS
   (el iframe real suele medir menos) y el padding-top 20px de .product-actions
   (theme.css). Lo dejamos en ~16px efectivos. */
.parfois-info__price .sequra-promotion-widget,
.parfois-info__price .sequra-promotion-widget[data-theme] {
  margin: 8px 0 0 !important;
  min-height: 0 !important;
}

.parfois-pdp .product-actions {
  padding-top: 0 !important;
}

.parfois-info__price .product-prices .current-price {
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
}

.parfois-info__price .product-discount {
  margin-bottom: 4px;
}

.parfois-info__price .product-discount .regular-price {
  font-size: 14px;
  color: #999;
}

.parfois-info__price .has-discount .discount {
  background: #c4392d;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 0;
  vertical-align: middle;
}

.parfois-info__price .tax-shipping-delivery-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* Short description */
.parfois-info__short-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.parfois-info__short-desc p {
  margin: 0;
}

/* ---- Variants ---- */
.parfois-info__variants {
  margin-bottom: 20px;
}

.parfois-info__variants .product-variants {
  margin: 0;
}

.parfois-info__variants .product-variants-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}

.parfois-info__variants .product-variants-item .control-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin: 0;
}

/* Color swatches — circular, Parfois-style */
.parfois-info__variants .product-variants-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parfois-info__variants .product-variants-item ul .input-container {
  margin: 0;
  float: none;
}

/* Fix input-color to cover entire swatch */
.parfois-info__variants .input-color {
  width: 100% !important;
  height: 100% !important;
  top: 0;
  left: 0;
}

/* Solid color swatches — circle */
.parfois-info__variants .input-color + span.color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  display: block;
  transition: border-color 0.2s ease;
  box-shadow: none;
}

.parfois-info__variants .input-color:checked + span.color,
.parfois-info__variants .input-color:hover + span.color {
  border-color: #1a1a1a;
}

/* Texture / image swatches — square, larger */
.parfois-info__variants .input-color + span.color.texture {
  width: 75px;
  height: 75px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

/* Size / radio selectors — Parfois pill style */
.parfois-info__variants .radio-label {
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  min-width: 48px;
  text-align: center;
}

.parfois-info__variants .input-radio:checked + .radio-label,
.parfois-info__variants .input-radio:hover + .radio-label {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}

/* Select dropdown style — full width, small arrow */
.parfois-pdp select.form-control-select,
.parfois-info__variants .form-control-select {
  width: 100% !important;
  max-width: 100%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  height: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 10px 6px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

/* Variant items: aligned left */
.parfois-info__variants .product-variants-item ul {
  justify-content: flex-start;
}

/* Remove ALL outstock styling — Parfois style: all options look selectable */
.parfois-pdp .product-variants-item ul li.outstock,
.parfois-pdp .input-container.outstock {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.parfois-pdp .product-variants-item ul li.outstock .radio-label,
.parfois-pdp .input-container.outstock .radio-label {
  background-image: none !important;
  color: inherit;
  border-color: #ccc;
}

.parfois-pdp .product-variants-item ul li.outstock .color:after,
.parfois-pdp .input-container.outstock .color:after {
  display: none !important;
}

/* Extra options module — remove outstock/dimmed look */
.parfois-pdp .block-product-attribute-custom .input-container {
  opacity: 1 !important;
}

.parfois-pdp .block-product-attribute-custom .radio-label {
  background-image: none !important;
}

/* ---- Quantity selector ---- */
.parfois-cart-block {
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
  margin-top: 4px;
}

/* Kill bootstrap-touchspin wrapper */
.parfois-qty .bootstrap-touchspin {
  display: contents !important;
  border: none !important;
  background: none !important;
}

.parfois-qty .input-group-btn-vertical {
  display: none !important;
}

.parfois-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}

.parfois-qty__label {
  display: block !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin-bottom: 8px;
  width: 100%;
  float: none !important;
  text-align: left;
}

.parfois-qty {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #ccc;
}

.parfois-qty__btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
  padding: 0;
}

.parfois-qty__btn:hover {
  background: #f5f5f5;
}

.parfois-qty__input,
.parfois-qty input#quantity_wanted {
  width: 46px !important;
  height: 36px !important;
  border: none !important;
  border-left: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  /* Hide native number spinners */
  -moz-appearance: textfield !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

.parfois-qty__input::-webkit-inner-spin-button,
.parfois-qty__input::-webkit-outer-spin-button,
.parfois-qty input#quantity_wanted::-webkit-inner-spin-button,
.parfois-qty input#quantity_wanted::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0;
  display: none !important;
}

/* ---- Add to cart button ---- */
.parfois-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: none;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 4px;
}

.parfois-btn-cart:hover {
  background: #333;
}

.parfois-btn-cart:disabled {
  background: #ccc;
  cursor: not-allowed;
  color: #888;
}

/* Minimum quantity notice */
.parfois-min-qty {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Availability */
.parfois-availability {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.parfois-availability--ok {
  color: #2e7d32;
}

.parfois-availability--low {
  color: #e65100;
}

.parfois-availability--out {
  color: #c62828;
}

/* Extra actions (wishlist, compare) */
.parfois-extra-actions {
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
}

.parfois-extra-actions__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.parfois-extra-actions a {
  font-size: 13px;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.parfois-extra-actions a:hover {
  color: #555;
}

/* Title row: title + bookmark wishlist (Parfois-style) */
.parfois-info__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.parfois-info__title-row .parfois-info__name {
  flex: 1;
  margin: 0;
}

.parfois-info__wishlist {
  flex-shrink: 0;
  margin-top: 4px;
}

.parfois-info__wishlist .wishlist {
  display: inline-block;
  margin: 0;
}

.parfois-info__wishlist .leo-wishlist-button,
.parfois-info__wishlist .leo-wishlist-button.btn,
.parfois-info__wishlist .leo-wishlist-button.btn-product {
  position: relative !important;   /* contexto para el icono absoluto */
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.parfois-info__wishlist .leo-wishlist-button:hover {
  background: none !important;
}

.parfois-info__wishlist .leo-wishlist-bt-loading,
.parfois-info__wishlist .name-btn-product,
.parfois-info__wishlist .leo-wishlist-button.added span.name-btn-product.text-remove,
.parfois-info__wishlist .leo-wishlist-button.added span.name-btn-product.text-add {
  display: none !important;
}

.parfois-info__wishlist .icon-wishlist {
  font-size: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a1a1a !important;
  position: static !important;              /* centrado por el flex del botón (sin transform → no se recorta) */
}

.parfois-info__wishlist .icon-wishlist:before {
  content: "\e867"; /* bookmark_border (outline) */
  font-family: "Material Icons";
  font-size: 24px;
  line-height: 1;
  color: inherit;
  display: inline-block;
  width: 24px;
  text-align: center;
}

.parfois-info__wishlist .leo-wishlist-button:hover .icon-wishlist {
  color: #555 !important;
}

.parfois-info__wishlist .leo-wishlist-button.added .icon-wishlist:before {
  content: "\e866"; /* bookmark (filled) */
}

/* ---- Extra options module (ets_extraoptions) ---- */
/* Hide the struck-through original price — only show final price */
.parfois-pdp .block-product-attribute-custom .product-discount .regular-price {
  display: none !important;
}

/* Reset discount styling: show price inline without discount badge */
.parfois-pdp .block-product-attribute-custom .product-discount {
  color: inherit;
}

.parfois-pdp .block-product-attribute-custom .product-price.has-discount {
  display: inline;
}

.parfois-pdp .block-product-attribute-custom .has-discount .discount {
  display: none;
}

.parfois-pdp .block-product-attribute-custom .current-price {
  font-size: inherit;
  font-weight: 400;
  color: #555;
}

/* Clean radio-label inside extra options */
.parfois-pdp .block-product-attribute-custom .radio-label {
  background-image: none;
}

/* Hide checkbox tick / radio dot — clean label-only style */
.parfois-pdp .block-product-attribute-custom .ets_input_group {
  display: none !important;
}

/* Style extra option labels as clean selectable items */
.parfois-pdp .block-product-attribute-custom .checkbox > label,
.parfois-pdp .block-product-attribute-custom .radio > label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  margin: 0 6px 6px 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.parfois-pdp .block-product-attribute-custom .checkbox > label:hover,
.parfois-pdp .block-product-attribute-custom .radio > label:hover {
  border-color: #1a1a1a;
}

/* Selected state — border highlight via :has() */
.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked),
.parfois-pdp .block-product-attribute-custom .radio > label:has(input:checked) {
  border-color: #1a1a1a;
  background: #1a1a1a;
  color: #fff;
}

.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked) .product-discount,
.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked) .current-price {
  color: #fff;
}

/* Extra option select dropdowns — full width */
.parfois-pdp .block-product-attribute-custom select.form-control,
.parfois-pdp .block-product-attribute-custom .form-control-selectp {
  width: 100% !important;
  display: block;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  height: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 10px 6px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* ---- Accordions ---- */
.parfois-accordions {
  margin-top: 0;
}

.parfois-accordion {
  border-top: 1px solid #e8e8e8;
}

.parfois-accordion__end {
  border-top: 1px solid #e8e8e8;
}

.parfois-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a1a1a;
  text-align: left;
  line-height: 1.3;
}

.parfois-accordion__trigger:hover {
  color: #555;
}

/* Plus/minus icon */
.parfois-accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 16px;
}

.parfois-accordion__icon::before,
.parfois-accordion__icon::after {
  content: '';
  position: absolute;
  background: #1a1a1a;
  transition: transform 0.3s ease;
}

.parfois-accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.parfois-accordion__icon::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.parfois-accordion__trigger[aria-expanded="true"] .parfois-accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Accordion panel */
.parfois-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.parfois-accordion__content {
  padding: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}

.parfois-accordion__content a {
  color: #1a1a1a;
  text-decoration: underline;
}

.parfois-accordion__content img {
  max-width: 100%;
  height: auto;
}

/* Detail rows inside accordion */
.parfois-detail-row {
  display: flex;
  padding: 6px 0;
  font-size: 13px;
  gap: 12px;
}

.parfois-detail-label {
  font-weight: 500;
  color: #1a1a1a;
  min-width: 100px;
  flex-shrink: 0;
}

.parfois-features {
  margin: 0;
}

.parfois-features dd {
  margin: 0;
}

/* Reassurance block overrides inside accordion */
.parfois-accordion__content .block-reassurance {
  border: none;
  padding: 0;
  margin: 0;
}

.parfois-accordion__content .block-reassurance ul {
  padding: 0;
}

/* Pack products */
.parfois-pack {
  margin-bottom: 16px;
  padding: 16px;
  background: #f9f9f9;
}

.parfois-pack__title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---- Related products section ---- */
.parfois-related {
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid #e8e8e8;
}

.parfois-related__title {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 32px;
}

/* ---- Responsive ---- */

/* Tablet landscape */
@media (max-width: 1199px) {
  .parfois-gallery {
    flex: 0 0 55%;
    max-width: 55%;
  }
  .parfois-info {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .parfois-info__inner {
    padding: 24px 28px 40px;
  }
}

/* Tablet portrait & mobile */
@media (max-width: 991px) {
  .parfois-product-wrap {
    flex-direction: column;
  }
  .parfois-gallery {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .parfois-info {
    flex: 0 0 100%;
    max-width: 100%;
    position: static;
  }
  .parfois-info__inner {
    padding: 24px 16px 32px;
  }

  /* Mobile: vertical carousel — 1 image at a time, swipe up/down.
     Altura con la misma proporción 4:5 de las imágenes para que se vean
     enteras sin recorte; max-height como tope en apaisado. */
  .parfois-gallery__desktop {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 90vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .parfois-gallery__desktop::-webkit-scrollbar {
    display: none;
  }
  .parfois-gallery__item,
  .parfois-gallery__item--large {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .parfois-gallery__item--hidden {
    display: flex !important; /* show all in mobile carousel */
  }
  .parfois-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .parfois-gallery__show-more {
    display: none; /* not needed on mobile carousel */
  }

  /* Gallery wrapper needs relative position for dots overlay */
  .parfois-gallery {
    position: relative;
  }

  /* Mobile carousel dots — vertical strip on right side */
  .parfois-gallery__dots {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    gap: 6px;
    z-index: 5;
    pointer-events: auto;
  }

  .parfois-gallery__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .parfois-gallery__dot--active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: scale(1.2);
  }

  /* Contador de imágenes "3/14" — badge discreto abajo-derecha sobre la foto */
  .parfois-gallery__counter {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 12px;
    pointer-events: none;
  }

  .parfois-flags {
    top: 10px;
    left: 10px;
  }

  .parfois-related {
    margin-top: 40px;
    padding: 24px 0;
  }
}

/* Small mobile */
@media (max-width: 575px) {
  .parfois-info__name {
    font-size: 18px;
  }
  .parfois-info__inner {
    padding: 20px 12px 28px;
  }
  .parfois-btn-cart {
    padding: 14px 20px;
    font-size: 13px;
  }
}

/* ---- Product page #product wrapper ---- */
#product.parfois-page .breadcrumb {
  margin-bottom: 0;
  padding-bottom: 12px;
}

/* ---- Hide default product elements we don't use ---- */
.parfois-pdp .product-cover,
.parfois-pdp .product-thumb-images,
.parfois-pdp .arrows-product-fake,
.parfois-pdp .images-container,
.parfois-pdp .more-info-product,
.parfois-pdp .products-accordion,
.parfois-pdp .product-tabs {
  display: none;
}

/* ---- Smooth image loading ---- */
.parfois-gallery__img {
  background: #f5f5f5;
}

/* ---- Ocultar social sharing dentro del product-additional-info (lo dejamos
       solo en otros sitios o no del todo) — pero mantenemos pgsi_tallastop visible.
       NOTA: si el botón "¿Cuál es mi talla?" debe quedarse, lo dejamos. ---- */
.parfois-extra-actions .product-additional-info .social-sharing,
.parfois-extra-actions .product-additional-info .ps_sharebuttons {
  display: none !important;
}

/* Botón de tallas (pgsi_tallastop) - estilo Parfois link subrayado */
.parfois-extra-actions .pgsi-ts-button-container {
  margin: 12px 0 0;
}

.parfois-extra-actions .pgsi-ts-button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1a1a1a !important;
  color: #1a1a1a !important;
  font-family: "Work Sans", Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0 0 4px !important;
  cursor: pointer;
  transition: opacity 0.2s;
}

.parfois-extra-actions .pgsi-ts-button:hover {
  opacity: 0.6;
}

/* Modal "Encuentra tu talla" — título blanco sobre header negro */
.pgsi-ts-modal-content .pgsi-ts-modal-title,
.pgsi-ts-modal-header .pgsi-ts-modal-title {
  color: #fff !important;
}

.pgsi-ts-modal-content .pgsi-ts-modal-close-btn {
  color: #fff !important;
}

/* ============ Extra options ets_extraoptions: layout inline + texto normal ============ */
/* Los items radio se muestran uno al lado del otro (no apilados verticalmente)
   y el nombre del color en fuente normal sin outline. */
.list-attribute-custom ul,
.from-group-option ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.list-attribute-custom li.input-container,
.from-group-option li.input-container {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.list-attribute-custom .radio-label,
.from-group-option .radio-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.list-attribute-custom .radio-label img,
.from-group-option .radio-label img {
  flex-shrink: 0;
  display: inline-block !important;
  vertical-align: middle;
  border-radius: 2px;
}

/* Borde simple para el seleccionado */
.list-attribute-custom .input-container input:checked + .radio-label,
.list-attribute-custom li.input-container.checked .radio-label,
.from-group-option input:checked + .radio-label {
  outline: 1px solid #1a1a1a !important;
  outline-offset: 0 !important;
}

/* ============ Customization: layout limpio del input file ============ */
.product-customization-item .custom-file {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.product-customization-item .custom-file .btn,
.product-customization-item .custom-file button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 100%;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-customization-item .js-file-name {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  color: #6c757d;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  min-height: 100%;
}

/* Lista de extensiones a línea propia para que no quede tapada */
.product-customization-item small.float-xs-right,
.product-customization-item small {
  display: block !important;
  float: none !important;
  clear: both !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #888 !important;
  text-align: left !important;
}

/* ---- Social sharing: WhatsApp & Telegram icons + hover ---- */
.social-sharing li.whatsapp a:before {
  content: "\f232";
  color: #25d366;
}

.social-sharing li.whatsapp a:hover {
  background: #25d366;
}

.social-sharing li.telegram a:before {
  content: "\f2c6";
  color: #0088cc;
}

.social-sharing li.telegram a:hover {
  background: #0088cc;
}

/* ---- FIX: legibilidad de radios seleccionados (Medida, Piel...) ----
   Todos los <li> de variantes llegan con la clase .outstock, y la regla
   ".parfois-pdp .input-container.outstock .radio-label { color: inherit }"
   (definida MÁS ABAJO que la de :checked y con la misma especificidad)
   pisaba el color #fff del estado seleccionado: el label quedaba con fondo
   #1a1a1a y texto oscuro heredado → ilegible. Texto blanco siempre que el
   radio esté seleccionado (o en hover, que comparte el fondo oscuro). */
.parfois-info__variants .input-radio:checked + .radio-label,
.parfois-info__variants .input-radio:hover + .radio-label {
  color: #fff !important;
}

/* ets_extraoptions: sus radios (ul/li movidos por JS dentro del form, fuera
   de .parfois-info__variants) quedan con fondo BLANCO + outline al marcarse,
   así que ahí el texto sigue oscuro. Solo si algún label de ets recibe el
   fondo oscuro de las reglas :has() (markup .radio/.checkbox > label),
   forzamos también en blanco el texto y el precio interior (.current-price
   tenía color #555 fijo y quedaba ilegible sobre #1a1a1a). */
.parfois-pdp .block-product-attribute-custom .radio > label:has(input:checked),
.parfois-pdp .block-product-attribute-custom .radio > label:has(input:checked) .current-price,
.parfois-pdp .block-product-attribute-custom .radio > label:has(input:checked) .product-discount,
.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked),
.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked) .current-price,
.parfois-pdp .block-product-attribute-custom .checkbox > label:has(input:checked) .product-discount {
  color: #fff !important;
}

/* ---- Print ---- */
@media print {
  .parfois-info {
    position: static;
  }
  .parfois-accordion__panel {
    max-height: none !important;
    overflow: visible;
  }
  .parfois-gallery__desktop {
    display: block;
  }
}