/* Desktop: modal de personalización sobrio, centrado y fácil de escanear. */
.emv-up-row:not(.emv-up-selected) .emv-up-install-toggle { display: none; }
html.emv-up-image-open,
html.emv-up-image-open body { overflow: hidden; }
.emv-vinyl-item[data-vinyl-id] .emv-vinyl-card-image { position: relative; cursor: zoom-in; }
.emv-vinyl-card-zoom-icon { position: absolute; right: 8px; bottom: 8px; display: block; width: 32px; height: 32px; border: 1px solid #dbe2ea; border-radius: 10px; background: rgba(255, 255, 255, .97); box-shadow: 0 5px 14px rgba(5, 20, 42, .22); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.emv-vinyl-card-image:hover .emv-vinyl-card-zoom-icon { border-color: #e5342e; background: #fff7f6; transform: scale(1.06); }
.emv-vinyl-card-zoom-icon::before { content: ""; position: absolute; top: 8px; left: 8px; width: 10px; height: 10px; border: 2px solid #102b4b; border-radius: 50%; }
.emv-vinyl-card-zoom-icon::after { content: ""; position: absolute; top: 20px; left: 20px; width: 8px; height: 2px; border-radius: 2px; background: #102b4b; transform: rotate(45deg); transform-origin: left center; }
.emv-vinyl-image-zoom { position: fixed; z-index: 1000005; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.emv-vinyl-image-zoom.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
.emv-vinyl-image-zoom-backdrop { position: absolute; inset: 0; background: rgba(7, 16, 30, .74); backdrop-filter: blur(5px); }
.emv-vinyl-image-zoom-dialog { position: relative; width: min(100%, 760px); max-height: calc(100vh - 48px); padding: 18px 18px 14px; overflow: auto; border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; background: #fff; box-shadow: 0 28px 70px rgba(0, 0, 0, .42); }
.emv-vinyl-image-zoom-photo { display: block; width: 100%; max-height: min(72vh, 650px); object-fit: contain; border-radius: 10px; background: #f3f5f8; }
.emv-vinyl-image-zoom-caption { margin: 12px 42px 0 2px; color: #14243b; font-size: 14px; font-weight: 800; line-height: 1.25; }
.emv-vinyl-image-zoom-close { position: absolute; z-index: 1; top: 27px; right: 27px; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 34, 57, .86); color: #fff; cursor: pointer; font-size: 28px; font-weight: 300; line-height: 1; }
.emv-vinyl-image-zoom-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.emv-vinyl-image-zoom-open, html.emv-vinyl-image-zoom-open body { overflow: hidden; }
.emv-vinyl-card-action-status { display: block; }
.emv-vinyl-card-action.is-added { border-color: #2b9b52; background: #eaf8ee; color: #14733a; box-shadow: 0 0 0 1px rgba(43, 155, 82, .08); }
.emv-vinyl-card-action.is-added .emv-vinyl-card-action-icon, .emv-vinyl-card-action.is-added .emv-vinyl-card-action-arrow { color: #1c8d48; }
.emv-vinyl-card-action.is-added .emv-vinyl-card-action-copy small { color: #287445; }

/* El carrusel no necesita una barra visible: se desplaza con rueda, flechas,
   gesto táctil y arrastre con ratón. */
.emv-box-vinyls .emv-vinyls-scroll { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.emv-box-vinyls .emv-vinyls-scroll::-webkit-scrollbar { display: none; }
.emv-box-vinyls .emv-vinyls-scroll.is-mouse-dragging,
.emv-box-vinyls .emv-vinyls-scroll.is-mouse-dragging * { cursor: grabbing !important; user-select: none; }

/* Contexto y estado del selector: el carrusel no debe parecer una fila de
   productos sin relación ni ocultar al cliente qué ha elegido. */
.emv-box-vinyls .emv-box-header { align-items: flex-start; flex-direction: column; gap: 3px; }
.emv-vinyl-section-title { display: block; line-height: 1; }
.emv-vinyl-section-subtitle { display: block; opacity: .86; font-size: .64em; font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-transform: none; }
.emv-vinyl-selection { display: flex; min-height: 38px; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid #e3e7ec; border-radius: 10px; background: #f8fafc; color: #647084; font-size: 11px; font-weight: 800; line-height: 1.2; }
.emv-vinyl-selection-state { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; border: 1.5px solid #a7b0be; border-radius: 50%; }
.emv-vinyl-selection-state::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a7b0be; }
.emv-vinyls-selection-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emv-vinyl-clear { min-height: 26px; flex: 0 0 auto; padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: #d22f2a; cursor: pointer; font-size: 10px; font-weight: 900; }
.emv-vinyl-selection.has-vinyl { border-color: #bce0c7; background: #f0fbf3; color: #287445; }
.emv-vinyl-selection.has-vinyl .emv-vinyl-selection-state { border-color: #289153; background: #289153; color: #fff; }
.emv-vinyl-selection.has-vinyl .emv-vinyl-selection-state::after { width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; border-radius: 0; background: transparent; transform: rotate(-45deg) translateY(-1px); }
.emv-vinyl-scroll-hint { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; color: #66738a; font-size: 10px; font-weight: 700; line-height: 1.2; }
.emv-vinyl-scroll-hint strong { color: #172640; }
.emv-vinyl-scroll-hint span { margin-left: 2px; color: #e3322d; font-size: 15px; line-height: .6; }
.emv-box-vinyls .emv-vinyl-item.is-selected .emv-vinyl-card::after { content: "✓"; position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: #ef302b; color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 2px 7px rgba(158, 30, 25, .25); }

@media (min-width: 768px) {
  /* En escritorio el cursor zoom-in ya comunica la ampliación sin recargar la tarjeta. */
  .emv-vinyl-card-zoom-icon { display: none; }
  .emv-box-vinyls { margin-top: 16px; }
  .emv-box-vinyls .emv-vinyls-inner { gap: 10px; }
  .emv-box-vinyls .emv-vinyl-item { flex-basis: 132px; min-width: 132px; }
  .emv-box-vinyls .emv-vinyl-card { min-height: 260px; padding: 11px 7px 8px; border-radius: 15px; }
  .emv-box-vinyls .emv-vinyl-item.is-selected .emv-vinyl-card { padding: 10px 6px 7px; }
  .emv-box-vinyls .emv-vinyl-card-image { height: 122px; margin-bottom: 4px; }
  .emv-box-vinyls .emv-vinyl-card-none .emv-vinyl-card-image { width: 82px; height: 82px; margin: 14px auto 22px; font-size: 60px; }
  .emv-box-vinyls .emv-vinyl-card-title { min-height: 33px; max-height: 33px; margin: 2px 0 5px; font-size: 9px; line-height: 1.17; }
  .emv-box-vinyls .emv-vinyl-card-price { margin: 0 0 8px; font-size: 13px; }
  .emv-box-vinyls .emv-vinyl-card-action { min-height: 34px; margin-top: 6px !important; padding: 5px 6px; border-radius: 8px; font-size: 8px; line-height: 1; }
  .emv-box-vinyls .emv-vinyl-card-action.is-added { min-height: 43px; }
  .emv-box-vinyls .emv-vinyl-card-action.is-added .emv-vinyl-card-action-copy small { display: block; margin-top: 3px; font-size: 7px; line-height: 1.1; }
  .emv-box-vinyls .emv-vinyl-card-action-arrow { font-size: 18px; }
  .emv-box-vinyls .emv-vinyl-arrow { width: 36px; height: 36px; }
  .emv-box-vinyls .emv-vinyl-arrow span { font-size: 29px; }
  .emv-vinyl-customizer { padding: 36px; }
  .emv-vinyl-customizer-backdrop { background: rgba(12, 20, 34, .66); backdrop-filter: blur(7px); }
  .emv-vinyl-customizer-dialog {
    width: min(100%, 1000px);
    max-height: min(760px, calc(100vh - 72px));
    border: 1px solid rgba(15, 30, 55, .12);
    border-radius: 18px;
    box-shadow: 0 28px 72px rgba(8, 18, 35, .34);
  }
  .emv-vinyl-customizer-header { padding: 22px 28px 18px; border-bottom: 1px solid #e7ebf0; }
  .emv-vinyl-customizer-title { color: #15233a; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
  .emv-vinyl-customizer-close { width: 38px; height: 38px; border-radius: 10px; background: #f7f9fc; color: #344257; font-size: 30px; }
  .emv-vinyl-customizer-close:hover { border-color: #c9d2de; background: #eef2f7; }
  .emv-vinyl-customizer-content { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; padding: 24px 28px; background: #fbfcfe; }
  .emv-vinyl-customizer-side { gap: 22px; padding: 18px; border: 1px solid #e5eaf0; border-radius: 14px; background: #fff; }
  .emv-vinyl-selected-summary { min-height: 94px; grid-template-columns: 76px minmax(0, 1fr); border-bottom: 1px solid #e9edf2; }
  .emv-vinyl-selected-image { width: 76px; height: 84px; border-right: 0; }
  .emv-vinyl-selected-name { margin-bottom: 6px; font-size: 14px; font-weight: 800; }
  .emv-vinyl-selected-price { color: #15233a; font-size: 19px; white-space: nowrap; }
  .emv-vinyl-step-heading { gap: 8px; margin-bottom: 11px; color: #24344e; font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
  .emv-vinyl-step-number { width: 23px; height: 23px; border-radius: 7px; background: #152b4a; font-size: 12px; }
  .emv-vinyl-customizer .emv-vinyl-base-options { gap: 8px; }
  .emv-vinyl-customizer .emv-vinyl-base-option { min-height: 108px; padding: 13px 8px; border-radius: 10px; }
  .emv-vinyl-customizer .emv-vinyl-base-option.is-selected { padding: 12px 7px; border-color: #ef302b; box-shadow: 0 0 0 2px rgba(239, 48, 43, .08); }
  .emv-vinyl-customizer .emv-vinyl-base-option.is-selected::before { top: 7px; left: 7px; width: 19px; height: 19px; font-size: 12px; }
  .emv-vinyl-base-name { margin: 8px 0 4px; font-size: 14px; }
  .emv-vinyl-base-description { font-size: 11px; }
  .emv-vinyl-base-price { margin-top: 7px; color: #d92f2a; font-size: 14px; }
  .emv-vinyl-finish-preview { min-height: 194px; border-radius: 12px; }
  .emv-vinyl-finish-preview img { height: 194px; }
  .emv-vinyl-finish-video { display: none; }
  .emv-vinyl-finish-scroll-wrap { margin-top: 12px; }
  .emv-vinyl-customizer .emv-vinyl-finish-option { flex-basis: 136px; min-height: 188px; padding: 6px 6px 10px; border-radius: 11px; }
  .emv-vinyl-customizer .emv-vinyl-finish-option.is-selected { padding: 5px 5px 9px; border-color: #ef302b; }
  .emv-vinyl-finish-thumb { height: 82px; border-radius: 7px; }
  .emv-vinyl-finish-label { min-height: 30px; margin: 8px 1px 3px; font-size: 12px; }
  .emv-vinyl-finish-price { color: #d92f2a; font-size: 13px; }
  .emv-vinyl-finish-description { margin: 5px 1px 0; font-size: 10px; }
  .emv-vinyl-customizer-footer { padding: 16px 28px; border-top-color: #e7ebf0; }
  .emv-vinyl-customizer-total-label { color: #657389; font-size: 11px; }
  .emv-vinyl-customizer-total { color: #15233a; font-size: 24px; }
  .emv-vinyl-customizer-confirm { min-height: 48px; padding: 12px 20px; border-radius: 8px; background: #e6332d; box-shadow: 0 6px 12px rgba(230, 51, 45, .18); font-size: 13px; }
  .emv-vinyl-customizer-confirm:hover { background: #cc2824; }
}

@media (max-width: 767px) {
  .emv-box-vinyls .emv-box-header { min-height: 62px; padding-top: 12px; padding-bottom: 11px; gap: 3px; }
  .emv-vinyl-section-subtitle { font-size: 10px; }
  .emv-vinyl-selection { display: none; }
  .emv-vinyl-clear { min-height: 25px; padding: 4px 5px; font-size: 9px; }
  .emv-vinyl-scroll-hint { margin-bottom: 9px; font-size: 10px; }
  .emv-box-vinyls .emv-vinyls-scroll { scroll-snap-type: x mandatory; scroll-padding-left: 2px; }
  .emv-box-vinyls .emv-vinyls-row::after { content: "DESLIZA ›"; position: absolute; z-index: 3; top: 43%; right: 5px; display: flex; height: 28px; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: #102b4b; color: #fff; box-shadow: 0 5px 13px rgba(5, 20, 42, .25); font-size: 9px; font-weight: 900; letter-spacing: .035em; line-height: 1; opacity: 0; pointer-events: none; transform: translateX(10px); }
  .emv-box-vinyls .emv-vinyls-row.is-scroll-hinting::after { animation: emv-vinyl-scroll-cue 1.16s ease-in-out both; }
  @keyframes emv-vinyl-scroll-cue { 0%, 100% { opacity: 0; transform: translateX(10px); } 16%, 78% { opacity: 1; transform: translateX(0); } }
  .emv-box-vinyls .emv-vinyl-item.is-selected .emv-vinyl-card::after { top: 7px; left: 7px; width: 20px; height: 20px; font-size: 12px; }
  .emv-box-vinyls .emv-vinyls-inner { gap: 12px; }
  .emv-box-vinyls .emv-vinyl-item { flex-basis: 208px; min-width: 208px; }
  .emv-box-vinyls .emv-vinyl-card { min-height: 254px; padding: 10px 8px 8px; border-radius: 16px; }
  .emv-box-vinyls .emv-vinyl-item.is-selected .emv-vinyl-card { padding: 10px 7px 8px; }
  .emv-box-vinyls .emv-vinyl-card-image { height: 132px; margin-bottom: 2px; }
  .emv-box-vinyls .emv-vinyl-card-none .emv-vinyl-card-image { width: 78px; height: 78px; margin: 12px auto 16px; font-size: 56px; }
  .emv-box-vinyls .emv-vinyl-card-title { display: -webkit-box; min-height: 29px; max-height: 29px; margin: 3px 0 5px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.18; letter-spacing: -.02em; }
  .emv-box-vinyls .emv-vinyl-card-price { margin: 0 0 4px; font-size: 16px; }
  .emv-box-vinyls .emv-vinyl-card-action { min-height: 42px; margin-top: 0; padding: 6px 7px; border-radius: 10px; gap: 3px; font-size: 10px; }
  .emv-box-vinyls .emv-vinyl-card-action-icon { font-size: 14px; }
  .emv-box-vinyls .emv-vinyl-card-action-copy { min-width: 0; text-align: center; }
  .emv-box-vinyls .emv-vinyl-card-action-copy small { display: block; overflow: hidden; font-size: 7.2px; line-height: 1.05; letter-spacing: -.045em; text-overflow: clip; white-space: nowrap; }
  .emv-box-vinyls .emv-vinyl-card-action-arrow { font-size: 21px; }
  .emv-box-vinyls .emv-vinyl-card-action.is-added { min-height: 49px; }
  .emv-box-vinyls .emv-vinyl-card-action.is-added .emv-vinyl-card-action-copy small { font-size: 7px; }
  /* Reserva fija a la derecha: precio y selector no se mezclan con título ni variables. */
  .emv-box-upgrades .emv-up-inner { display: grid; grid-template-columns: 64px minmax(0, 1fr) max-content 22px; align-items: start; column-gap: 8px; row-gap: 6px; padding: 10px; }
  .emv-box-upgrades .emv-up-thumb-btn { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
  .emv-box-upgrades .emv-up-main { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; overflow: hidden; padding-right: 0; }
  .emv-box-upgrades .emv-up-title { width: 100%; min-width: 0; overflow-wrap: anywhere; font-size: clamp(14px, 3.7vw, 16px); line-height: 1.2; }
  .emv-box-upgrades .emv-up-side { display: contents; }
  .emv-box-upgrades .emv-up-price-wrap { grid-column: 3; grid-row: 1; min-width: 0; padding-left: 30px; align-self: center; justify-self: end; text-align: right; }
  .emv-box-upgrades .emv-up-check-col { grid-column: 4; grid-row: 1; align-self: center; justify-self: end; min-width: 0; }
  .emv-box-upgrades .emv-up-install-toggle { grid-column: 2; grid-row: 2; min-width: 0; justify-self: start; justify-content: flex-start; text-align: left; }
  .emv-box-upgrades .emv-up-var-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; min-width: 0; gap: 6px; }
  .emv-box-upgrades .emv-up-row[data-var-count="1"] .emv-up-var-btn { grid-column: 1 / -1; }
  .emv-box-upgrades .emv-up-row[data-var-count] .emv-up-var-btn { display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 36px; align-items: center; justify-content: center; box-sizing: border-box; padding: clamp(5px, 1.8vw, 8px); overflow-wrap: anywhere; word-break: break-word; white-space: normal; font-size: clamp(9px, 2.7vw, 11px); line-height: 1.15; text-align: center; }
  .emv-box-upgrades .emv-up-var-select-wrap, .emv-box-upgrades .emv-up-var-select { max-width: 100%; min-width: 0; box-sizing: border-box; font-size: clamp(10px, 2.8vw, 12px); }

  /* Hoja de personalización: mantiene las dos elecciones completas a la vista,
     sin una segunda barra de scroll vertical en el móvil. */
  .emv-vinyl-customizer { align-items: flex-end; padding: 0; }
  .emv-vinyl-customizer-dialog {
    width: 100%;
    height: calc(100dvh - 76px);
    max-height: calc(100dvh - 76px);
    overflow: hidden;
    border-radius: 27px 27px 0 0;
    transform: translateY(100%);
  }
  .emv-vinyl-customizer.is-open .emv-vinyl-customizer-dialog { transform: translateY(0); }
  .emv-vinyl-customizer-handle { width: 36px; height: 4px; margin: 9px auto 1px; }
  .emv-vinyl-customizer-header { flex: 0 0 auto; padding: 8px 16px 8px; }
  .emv-vinyl-customizer-title { font-size: 21px; line-height: 1.05; }
  .emv-vinyl-customizer-close { width: 36px; height: 36px; font-size: 29px; }
  .emv-vinyl-customizer-content {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding: 0 14px 8px;
  }
  .emv-vinyl-customizer-side { display: contents; }
  .emv-vinyl-selected-summary {
    min-height: 64px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 8px;
    border-radius: 12px;
  }
  .emv-vinyl-selected-image { width: 60px; height: 56px; }
  .emv-vinyl-selected-details { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
  .emv-vinyl-selected-name {
    display: -webkit-box;
    max-height: 2.35em;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #0b1937;
    font-size: 13px;
    line-height: 1.16;
  }
  .emv-vinyl-selected-price { display: block; flex: 0 0 auto; margin-top: 3px; font-size: 17px; line-height: 1; white-space: nowrap; }
  .emv-vinyl-base-section { flex: 0 0 auto; }
  .emv-vinyl-step-heading { gap: 7px; margin: 0 0 6px; font-size: 15px; line-height: 1.1; }
  .emv-vinyl-step-number { width: 24px; height: 24px; font-size: 13px; }
  .emv-vinyl-customizer .emv-vinyl-base-options { gap: 8px; }
  .emv-vinyl-customizer .emv-vinyl-base-option { min-height: 76px; padding: 7px 6px; border-radius: 12px; }
  .emv-vinyl-customizer .emv-vinyl-base-option.is-selected { padding: 6px 5px; }
  .emv-vinyl-customizer .emv-vinyl-base-option.is-selected::before { top: 6px; left: 6px; width: 18px; height: 18px; font-size: 11px; }
  .emv-vinyl-base-name { margin: 5px 0 2px; font-size: 14px; }
  .emv-vinyl-base-description { font-size: 10px; line-height: 1.12; }
  .emv-vinyl-base-price { margin-top: 4px; font-size: 13px; }
  .emv-vinyl-finish-section { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; margin-top: 0; }
  .emv-vinyl-finish-section .emv-vinyl-step-heading { flex: 0 0 auto; }
  .emv-vinyl-finish-preview { min-height: 0; height: clamp(112px, 18vh, 156px); flex: 0 0 auto; border-radius: 13px; }
  .emv-vinyl-finish-preview img { height: 100%; }
  .emv-vinyl-finish-video { right: 50%; bottom: 8px; min-height: 31px; padding: 6px 11px; font-size: 10px; transform: translateX(50%); white-space: nowrap; }
  .emv-vinyl-finish-video-icon { width: 14px; height: 14px; font-size: 7px; }
  .emv-vinyl-finish-scroll-wrap { display: flex; min-height: 0; flex: 1 1 auto; margin-top: 7px; padding: 0; }
  .emv-vinyl-finish-scroll { align-items: stretch; width: 100%; min-height: 0; gap: 8px; overflow: hidden; padding: 1px; }
  .emv-vinyl-customizer .emv-vinyl-finish-option { min-width: 0; min-height: 0; height: 100%; flex: 0 0 calc((100% - 16px) / 3); padding: 5px 4px 6px; border-radius: 11px; }
  .emv-vinyl-customizer .emv-vinyl-finish-option.is-selected { padding: 4px 3px 5px; }
  .emv-vinyl-customizer .emv-vinyl-finish-option.is-selected::before { top: 5px; left: 5px; width: 20px; height: 20px; border-width: 2px; font-size: 12px; }
  .emv-vinyl-finish-thumb { height: clamp(46px, 8.5vh, 68px); border-radius: 7px; }
  .emv-vinyl-finish-label { min-height: 0; margin: 5px 0 2px; font-size: 10px; line-height: 1.03; }
  .emv-vinyl-finish-price { font-size: 11px; }
  .emv-vinyl-finish-description { display: -webkit-box; margin: 3px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 8.5px; line-height: 1.12; }
  .emv-vinyl-finish-arrow { display: none; }
  .emv-vinyl-customizer-footer { flex: 0 0 auto; gap: 10px; padding: 9px 14px max(10px, env(safe-area-inset-bottom)); }
  .emv-vinyl-customizer-total-label { margin-bottom: 1px; font-size: 10px; }
  .emv-vinyl-customizer-total { font-size: 21px; line-height: 1; }
  .emv-vinyl-customizer-confirm { min-height: 43px; padding: 8px 10px; font-size: 10px; }

  @media (max-height: 720px) {
    .emv-vinyl-customizer-dialog { height: calc(100dvh - 52px); max-height: calc(100dvh - 52px); }
    .emv-vinyl-customizer-header { padding-top: 5px; padding-bottom: 5px; }
    .emv-vinyl-customizer-handle { margin-top: 6px; }
    .emv-vinyl-selected-summary { min-height: 55px; }
    .emv-vinyl-selected-image { width: 52px; height: 48px; }
    .emv-vinyl-selected-summary { grid-template-columns: 54px minmax(0, 1fr); }
    .emv-vinyl-base-option { min-height: 66px !important; }
    .emv-vinyl-finish-preview { height: clamp(94px, 16vh, 118px); }
    .emv-vinyl-finish-thumb { height: 42px; }
    .emv-vinyl-customizer-footer { padding-top: 6px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
    .emv-vinyl-customizer-confirm { min-height: 38px; }
  }

  .emv-vinyl-image-zoom { align-items: center; padding: 16px; }
  .emv-vinyl-image-zoom-dialog { padding: 12px 12px 13px; border-radius: 14px; }
  .emv-vinyl-image-zoom-photo { max-height: 70vh; }
  .emv-vinyl-image-zoom-close { top: 20px; right: 20px; }
  .emv-vinyl-image-zoom-caption { margin-top: 10px; font-size: 13px; }
}

/* Hoja móvil: protege el diseño de los estilos globales de botones del tema.
   En particular, Flatsome añadía márgenes y una altura mínima a cada botón,
   deformando la X y ocultando parte de las tarjetas de acabado. */
@media (max-width: 767px) {
  .emv-vinyl-customizer-dialog {
    height: calc(100dvh - 112px);
    max-height: calc(100dvh - 112px);
    min-height: 0;
  }
  .emv-vinyl-customizer-handle {
    display: block;
    width: 34px;
    height: 4px;
    flex: 0 0 4px;
    margin: 12px auto 3px;
    cursor: grab;
    touch-action: none;
  }
  .emv-vinyl-customizer-handle:active { cursor: grabbing; }
  .emv-vinyl-customizer-header {
    min-height: 0;
    padding: 4px 20px 10px;
  }
  .emv-vinyl-customizer-title {
    font-size: 22px;
    line-height: 1.08;
  }
  .emv-vinyl-customizer-close {
    box-sizing: border-box;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    align-self: center;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1 !important;
  }
  .emv-vinyl-customizer-content {
    gap: 8px;
    padding: 0 14px 8px;
  }
  .emv-vinyl-selected-summary { min-height: 64px; }
  .emv-vinyl-step-heading {
    margin-bottom: 6px;
    font-size: 14px;
  }
  .emv-vinyl-step-number {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
  .emv-vinyl-customizer .emv-vinyl-base-options { gap: 8px; }
  .emv-vinyl-customizer .emv-vinyl-base-option {
    box-sizing: border-box;
    min-height: 72px;
    margin: 0 !important;
    padding: 6px 5px;
  }
  .emv-vinyl-customizer .emv-vinyl-base-option.is-selected { padding: 5px 4px; }
  .emv-vinyl-base-name { margin: 4px 0 2px; font-size: 12px; }
  .emv-vinyl-base-description { font-size: 9px; line-height: 1.1; }
  .emv-vinyl-base-price { margin-top: 3px; font-size: 12px; }
  .emv-vinyl-finish-preview {
    height: clamp(120px, 18vh, 150px);
    min-height: 0;
  }
  .emv-vinyl-finish-scroll-wrap {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 8px;
    padding: 0;
  }
  .emv-vinyl-finish-scroll {
    width: 100%;
    min-height: 0;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 2px;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .emv-vinyl-finish-scroll::-webkit-scrollbar { display: none; }
  .emv-vinyl-customizer .emv-vinyl-finish-option {
    box-sizing: border-box;
    height: 154px;
    min-height: 154px;
    margin: 0 !important;
    padding: 5px 4px 6px;
    flex: 0 0 calc((100% - 16px) / 3);
    scroll-snap-align: start;
  }
  .emv-vinyl-customizer .emv-vinyl-finish-option.is-selected { padding: 4px 3px 5px; }
  .emv-vinyl-finish-thumb { height: 60px; }
  .emv-vinyl-finish-label { margin: 5px 0 2px; font-size: 9px; line-height: 1.05; }
  .emv-vinyl-finish-price { font-size: 10px; }
  .emv-vinyl-finish-description { margin: 3px 0 0; font-size: 8px; line-height: 1.1; }
  .emv-vinyl-finish-arrow {
    display: flex;
    box-sizing: border-box;
    width: 29px;
    min-width: 29px;
    height: 29px;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px;
  }
  .emv-vinyl-finish-arrow.prev { left: -10px; }
  .emv-vinyl-finish-arrow.next { right: -10px; }
  .emv-vinyl-customizer-footer { padding: 9px 14px max(10px, env(safe-area-inset-bottom)); }
  .emv-vinyl-customizer-confirm {
    min-height: 43px;
    margin: 0 !important;
    padding: 8px 10px;
  }
}

/* En escritorio se conserva la lectura natural del precio de partida. */
@media (min-width: 768px) {
  .emv-up-price.emv-up-price-from::before { content: "Desde "; }
  .emv-up-row.emv-up-selected .emv-up-price.emv-up-price-from::before { display: none; }
}

/* Hoja móvil centrada en el acabado: la elección se hizo en la tarjeta
   anterior, por lo que no repetimos ni cabecera ni ficha del vinilo. El alto
   recuperado se reparte entre la previsualización y las tres opciones. */
@media (max-width: 767px) {
  .emv-vinyl-customizer-dialog {
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
  }
  .emv-vinyl-customizer-header,
  .emv-vinyl-selected-summary {
    display: none !important;
  }
  .emv-vinyl-customizer-content {
    padding-top: 7px;
  }
  .emv-vinyl-finish-preview {
    height: clamp(176px, 27.25vh, 230px);
  }
  .emv-vinyl-finish-scroll-wrap {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 8px;
  }
  .emv-vinyl-finish-scroll {
    display: flex;
    min-height: 0;
    height: 100%;
    align-items: stretch;
  }
  .emv-vinyl-customizer .emv-vinyl-finish-option {
    height: 100%;
    min-height: 0;
  }
  .emv-vinyl-finish-thumb {
    height: clamp(76px, 13.25vh, 112px);
  }
  .emv-vinyl-finish-label {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.08;
  }
  .emv-vinyl-finish-price { font-size: 11px; }
  .emv-vinyl-finish-description {
    font-size: 9px;
    line-height: 1.14;
  }
}

@media (max-width: 767px) and (max-height: 720px) {
  .emv-vinyl-finish-preview { height: clamp(142px, 22vh, 160px); }
  .emv-vinyl-finish-thumb { height: clamp(62px, 10.5vh, 76px); }
}

/* Mejoras variables en móvil: el importe "Desde" se convierte en una etiqueta
   discreta y, con tres alternativas, cada opción recibe una fila completa. */
@media (max-width: 767px) {
  .emv-box-upgrades .emv-up-price-wrap {
    display: flex;
    min-width: 0;
    padding-left: 0;
    align-items: center;
    justify-content: flex-end;
  }
  .emv-box-upgrades .emv-up-price.emv-up-price-from {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #ef302b;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.03;
    white-space: nowrap;
  }
  .emv-box-upgrades .emv-up-price.emv-up-price-from::before {
    content: "Desde";
    margin-bottom: 2px;
    color: #69758a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: uppercase;
  }
  .emv-box-upgrades .emv-up-row.emv-up-selected .emv-up-price.emv-up-price-from::before {
    display: none;
  }
  .emv-box-upgrades .emv-up-row[data-var-count="3"] .emv-up-var-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .emv-box-upgrades .emv-up-row[data-var-count="3"] .emv-up-var-btn {
    grid-column: 1;
    min-height: 33px;
    justify-content: flex-start;
    padding: 6px 9px;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(10px, 2.65vw, 11px);
    line-height: 1.15;
    text-align: left;
  }
}

/* Acabados en móvil: se dejan tres tarjetas y media visibles para comunicar
   el desplazamiento horizontal sin sacrificar las descripciones. */
@media (max-width: 767px) {
  .emv-vinyl-customizer .emv-vinyl-finish-option {
    flex-basis: calc((100% - 24px) / 3.5);
  }
  .emv-vinyl-finish-price {
    font-size: 12px;
    line-height: 1.08;
  }
  .emv-vinyl-finish-description {
    display: block;
    min-height: 0;
    margin-top: 2px;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: 8.4px;
    line-height: 1.13;
  }
}

/* Se gana un poco de protagonismo para la previsualización sin comprometer
   las tres tarjetas y media de acabados ni su texto descriptivo. */
@media (max-width: 767px) {
  .emv-vinyl-finish-preview {
    height: clamp(180px, 28vh, 236px);
  }
  .emv-vinyl-finish-thumb {
    height: clamp(70px, 12.35vh, 104px);
  }
}

@media (max-width: 767px) and (max-height: 720px) {
  .emv-vinyl-finish-preview {
    height: clamp(146px, 22.5vh, 164px);
  }
  .emv-vinyl-finish-thumb {
    height: clamp(58px, 10vh, 70px);
  }
}

/* Ajuste final de lectura y jerarquía de los vinilos. */
.emv-vinyl-scroll-hint { display: none !important; }
/* El gesto horizontal se conserva, pero sin la etiqueta textual superpuesta. */
.emv-box-vinyls .emv-vinyls-row::after { content: none !important; display: none !important; }
.emv-vinyl-item[data-vinyl-id] .emv-vinyl-card-image { cursor: zoom-in; }
.emv-vinyl-card-zoom-icon {
  top: 7px;
  right: 7px;
  bottom: auto;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: #102b4b;
  box-shadow: 0 4px 11px rgba(5, 20, 42, .25);
}
.emv-vinyl-card-image:hover .emv-vinyl-card-zoom-icon { background: #e7332e; border: 0; }
.emv-vinyl-card-zoom-icon::before {
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  border-color: #fff;
}
.emv-vinyl-card-zoom-icon::after {
  top: 19px;
  left: 18px;
  width: 9px;
  height: 2px;
  background: #fff;
}
.emv-vinyl-image-zoom-close { display: none !important; }
.emv-vinyl-card-top-sales,
.emv-vinyl-finish-badge,
.emv-vinyl-base-badge {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #e6332d;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  white-space: nowrap;
}
.emv-vinyl-card-top-sales { top: 7px; left: 7px; }
.emv-vinyl-finish-badge { top: 6px; right: 6px; }
/* La recomendación queda medio fuera de la tarjeta: destaca sin invadir el título. */
.emv-vinyl-customizer .emv-vinyl-base-option { overflow: visible; }
.emv-vinyl-base-badge {
  top: -10px;
  right: auto;
  left: 50%;
  min-height: 21px;
  padding: 4px 8px 4px 7px;
  border: 1px solid #0c8c49;
  background: #18a957;
  box-shadow: 0 3px 7px rgba(14, 137, 72, .23);
  font-size: 7px;
  transform: translateX(-50%);
}
.emv-vinyl-base-badge::before {
  content: "✓";
  display: inline-flex;
  width: 10px;
  height: 10px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  border-radius: 50%;
  background: #fff;
  color: #159550;
  font-size: 8px;
  font-weight: 900;
}
.emv-box-vinyls .emv-vinyl-item.is-top-sales .emv-vinyl-card {
  border-color: #e5aaa6;
  background: linear-gradient(135deg, #fff, #fff8f7);
}
.emv-vinyl-customizer .emv-vinyl-finish-option.is-top-sales { border-color: #e8b5b1; }
.emv-vinyl-customizer-confirm:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; }
.emv-vinyl-customizer.emv-vinyl-customizer-no-finishes .emv-vinyl-finish-section { display: none; }

/* Las variables aparecen tras elegir la mejora; cada alternativa se lee en una sola línea. */
.emv-up-row[data-variable="1"]:not(.emv-up-selected) .emv-up-var-options,
.emv-up-row[data-variable="1"]:not(.emv-up-selected) .emv-up-var-select-wrap { display: none !important; }
.emv-up-row[data-variable="1"].emv-up-selected .emv-up-var-options { display: flex; }
@media (min-width: 768px) {
  .emv-box-upgrades .emv-up-title { font-size: 11px; }
}

@media (min-width: 768px) {
  .emv-box-vinyls .emv-box-body { padding: 10px 14px 6px; }
  .emv-box-vinyls .emv-vinyls-row { padding-top: 10px; }
  .emv-box-vinyls .emv-vinyl-card { min-height: 238px; }
  .emv-box-vinyls .emv-vinyl-card-image { height: 114px; }
  .emv-box-vinyls .emv-vinyl-card-title {
    min-height: 2.34em;
    max-height: 2.34em;
    margin-bottom: 3px;
    overflow: hidden;
  }
  .emv-box-vinyls .emv-vinyl-card-price { margin-bottom: 3px; }
  .emv-box-vinyls .emv-vinyl-card-action { min-height: 32px; margin-top: 1px !important; }
}

@media (max-width: 767px) {
  .emv-box-vinyls .emv-box-header {
    min-height: 48px;
    padding: 10px 16px;
  }
  .emv-vinyl-section-title { font-size: 15px; }
  .emv-box-vinyls .emv-box-body { padding: 10px 12px 7px; }
  .emv-box-vinyls .emv-vinyls-row { padding-top: 10px; }
  .emv-box-vinyls .emv-vinyl-card {
    min-height: 248px;
    padding-bottom: 7px;
  }
  .emv-box-vinyls .emv-vinyl-card-title {
    height: 2.36em;
    min-height: 0;
    max-height: 2.36em;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
  .emv-box-vinyls .emv-vinyl-card-price { margin-bottom: 2px; }
  .emv-box-vinyls .emv-vinyl-card-action { margin-top: 0; }
  .emv-vinyl-card-top-sales { top: 6px; left: 6px; }
  .emv-vinyl-customizer-no-finishes .emv-vinyl-customizer-dialog {
    height: auto;
    max-height: calc(100dvh - 72px);
  }
  .emv-vinyl-customizer-no-finishes .emv-vinyl-customizer-content {
    flex: 0 0 auto;
    padding-bottom: 12px;
  }
  .emv-vinyl-finish-preview { height: clamp(184px, 28.9vh, 244px); }
  .emv-vinyl-finish-thumb { height: clamp(66px, 11.4vh, 96px); }
  .emv-box-upgrades .emv-up-title {
    font-size: clamp(12px, 3vw, 13px) !important;
    line-height: 1.16;
  }
  .emv-box-upgrades .emv-up-row.emv-up-selected .emv-up-var-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px;
  }
  .emv-box-upgrades .emv-up-row[data-var-count] .emv-up-var-btn {
    justify-content: flex-start;
    overflow: hidden;
    padding: 6px 8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  .emv-box-upgrades .emv-up-row.emv-up-selected.emv-up-has-mobile-select .emv-up-var-select-wrap { display: block !important; }
  .emv-box-upgrades .emv-up-install-toggle {
    grid-column: 4 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: center !important;
    width: 22px;
    min-width: 22px !important;
    justify-content: center !important;
  }
  .emv-box-upgrades .emv-up-install-toggle .emv-up-install-text { display: none; }
  .emv-box-upgrades .emv-up-install-check { width: 16px; height: 16px; flex-basis: 16px; }
}

@media (max-width: 767px) and (max-height: 720px) {
  .emv-vinyl-finish-preview { height: clamp(150px, 23vh, 170px); }
  .emv-vinyl-finish-thumb { height: clamp(54px, 9.5vh, 66px); }
}

/* Refinado final móvil: se conserva la ampliación al tocar la imagen, pero
   desaparece el icono; la sección recupera espacio vertical útil. */
.emv-vinyl-card-zoom-icon { display: none !important; }

@media (max-width: 767px) {
  .emv-box-vinyls .emv-box-header {
    min-height: 0;
    padding: 8px 14px;
  }
  .emv-box-vinyls .emv-box-body { padding: 6px 12px 4px; }
  .emv-box-vinyls .emv-vinyls-row { padding-top: 6px; }
  .emv-box-vinyls .emv-vinyls-scroll { padding-bottom: 0; }
  .emv-box-vinyls .emv-vinyl-card { margin-bottom: 0; }

  /* El texto de instalación vuelve a estar junto al check y debajo del
     selector de la derecha, sin invadir título ni variables. */
  .emv-box-upgrades .emv-up-install-toggle {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: end !important;
    width: auto;
    min-width: 0 !important;
    gap: 4px;
    justify-content: flex-end !important;
    white-space: nowrap;
  }
  .emv-box-upgrades .emv-up-install-toggle .emv-up-install-text {
    display: inline !important;
    color: #526176;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }
  .emv-box-upgrades .emv-up-install-check {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* En el selector de acabados la previsualización gana protagonismo y el
   panel no se estira hasta ocupar altura sin contenido. Así las tarjetas no
   quedan con una banda blanca grande al pie. */
@media (max-width: 767px) and (min-height: 721px) {
  .emv-vinyl-customizer-dialog { max-height: calc(100dvh - 110px); }
  .emv-vinyl-finish-preview { height: clamp(220px, 34.7vh, 293px); }
  .emv-vinyl-finish-preview img { height: 100%; }
}

@media (max-width: 767px) and (max-height: 720px) {
  .emv-vinyl-customizer-dialog { max-height: calc(100dvh - 94px); }
  .emv-vinyl-finish-preview { height: clamp(180px, 27.6vh, 204px); }
  .emv-vinyl-finish-preview img { height: 100%; }
}

/* Safari modifica el alto visible al contraer sus barras. En lugar de
   aplastar las tarjetas de acabado, éstas conservan una altura legible y el
   contenido central se desplaza internamente cuando haga falta. */
@media (max-width: 767px) {
  .emv-vinyl-customizer-content {
    overflow: hidden;
  }
  .emv-vinyl-step-heading { margin-bottom: 10px; }
  /* Las opciones y el pie conservan siempre su sitio. El elemento que se
     adapta al alto dinámico de Safari es únicamente la imagen grande. */
  .emv-vinyl-finish-section {
    flex: 1 1 0;
    min-height: 0;
  }
  .emv-vinyl-finish-preview {
    height: auto;
    min-height: 100px;
    max-height: 320px;
    flex: 1 1 0;
  }
  .emv-vinyl-finish-scroll {
    width: auto;
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    align-items: flex-start;
  }
  .emv-vinyl-finish-scroll-wrap {
    width: 100%;
    flex: 0 0 198px;
  }
  .emv-vinyl-customizer .emv-vinyl-finish-option {
    align-self: flex-start;
    height: 194px;
    min-height: 194px;
  }
}

@media (max-width: 767px) and (max-height: 720px) {
  .emv-vinyl-finish-preview {
    min-height: 100px;
    max-height: none;
  }
  .emv-vinyl-finish-scroll-wrap {
    flex-basis: 186px;
  }
  .emv-vinyl-finish-scroll {
    height: 100%;
    min-height: 0;
  }
  .emv-vinyl-customizer .emv-vinyl-finish-option {
    height: 182px;
    min-height: 182px;
  }
}