@media (min-width: 1200px) {
            .container {  	
                width: 1200px;
                
            }}
         :root {  
            --maincolor: #4C78B7;  
            --bodycolor: #525050;  
        }html{
            font-size: 14px;
        }body{
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            color: #525050;
        }.pos_title h2,.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
            font-family: "Open Sans", sans-serif;
            color: #121111;
            text-transform: capitalize;
			font-weight: 600;
        }.pos_title h2{
            font-size: 24px;
        }.pos-title{
            font-family: "Open Sans", sans-serif;
        }.pos-title-column h4{   
            font-size: 20px;
        }#header .sticky-inner.scroll-menu{  
            background-color: #4C78B7;   
        }.js-product-miniature .product_desc .product_name{
            color: #121111;
            text-transform: none;
            font-weight: 400;
        }@media(min-width: 768px){
                .js-product-miniature .product_desc .product_name{
                font-size: 16px;
                }
            }.js-product-miniature .product_desc .product_name:hover{
            color: #0090F0;
        }.product-price-and-shipping .price{
            color:#555555;
            font-size: 16px;
        }.h1.namne_details, .product_name_h1{
            color: #4C78B7;
            font-size: 24px;
            text-transform: none;
        }.product-prices .price, .product-prices .current-price span:first-child{
            color:#121111;
            font-size: 22px;
        }#product.showcase-body #header,.showcase-inner,#product.showcase-body .page-title-wrapper{
            background-color: ;
        }.whats-ico{
width: auto !important;
}
.iconos-portada:before {
    content: " ";
    width: 10000px;
    height: 347px;
    background-color: #eaeaea;
    position: absolute;
    left: -5000px;
    margin: 0 auto;
    top: 0px;
}
.product-variants-item select {
    width: 100% !important;
}
.dsn-popup-content label {
    text-align: left;
}

/*
* AJUSTE POPUP
*/
/* ====== FIX REAL: pasar los tab-content de ABSOLUTE a FLOW normal ====== */

/* Aplica solo en el popup y solo cuando estés en el modo unificado */
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active #dsn-tabs-content{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;

  /* un solo scroll */
  overflow: auto !important;
  height: 100% !important;
  min-height: 0 !important;

  /* importantísimo: que el contenedor NO actúe como “lienzo” de absolutos */
  position: static !important;
}

/* Los contenidos de tabs en el módulo suelen ser "pantallas" absolutas: lo anulamos */
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-text,
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-product{
  /* mata el absolute/inset/top/left/bottom típicos */
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  /* en flujo normal */
  display: block !important;
  width: 100% !important;
  flex: 0 0 auto !important;

  /* sin scroll interno */
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Orden real */
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-text{ order: 1 !important; }
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-product{
  order: 2 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Cuando NO estás en PERSONALIZACIÓN, oculta PRODUCTO para que no “invada” MODELOS */
.dsn-popup-content.dsn-merge-tabs:not(.dsn-merge-tabs--text-active) .dsn-tab-content-product{
  display: none !important;
}

/* ====== Dynamic Product suele meter un div absoluto al final (en tu HTML existe) ======
   Lo pasamos a flujo normal para que no tape lo anterior.
*/
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-product .dp_container > div[style*="position: absolute"]{
  position: static !important;
  height: auto !important;
}

/* Evita floats raros dentro de DP */
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-product .dp_field_container,
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-product .dp_input_container{
  float: none !important;
  clear: both !important;
  width: 100% !important;
}

/* Si el bloque de FUENTES usa grids/chips con alturas raras, garantizamos separación */
.dsn-popup-content.dsn-merge-tabs.dsn-merge-tabs--text-active .dsn-tab-content-text::after{
  content: "" !important;
  display: block !important;
  clear: both !important;
}


/* MOD - Dynamic Product Maquetacion */

/* Aumentar tamaño del bloque de atributos "Elige el diseño" (combinaciones nativas PS8) */
.product-variants .product-variants-item label.control-label,
.product-variants .product-variants-item .custom-select,
#product .product-variants .product-variants-item label {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Bloques de opciones de atributos - thumbnails de diseño más grandes */
.product-variants .product-variants-item .input-container img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain !important;
}

/* Bloque de personalización Dynamic Product - contenedor general */
#product .dp-field-wrap,
#product .dp-fields-wrap {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
}

/* Título de sección / label de campo DP */
#product .dp-field-label {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 8px !important;
}

/* Botones de radio de DP (colores, tamaños) */
#product .dp-radio-field label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin: 3px;
  font-size: 0.85rem !important;
  background: #fff;
  transition: all 0.2s;
}

#product .dp-radio-field input[type="radio"]:checked + label,
#product .dp-radio-field label.selected {
  border-color: #1a1a8c;
  background: #eef0ff;
  font-weight: 600;
}

/* Campos de texto DP */
#product .dp-input-field input,
#product .dp-textarea-field textarea {
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

#product .dp-input-field input:focus,
#product .dp-textarea-field textarea:focus {
  border-color: #1a1a8c !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,26,140,0.1) !important;
}

/* Separador entre secciones de personalización */
#product .dp-field-wrap + .dp-field-wrap {
  margin-top: 6px;
}

/* Precio adicional junto a opción */
#product .dp-price-label {
  font-size: 0.8rem;
  color: #888;
  margin-left: 4px;
}

/* Imágenes del selector DP en la ficha de producto */
#product .dp-images-selector img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

#product .dp-images-selector img:hover,
#product .dp-images-selector img.selected {
  border-color: #1a1a8c;
}

/* Spinner infinito: ocultar botón dsn-customize si Product Designer no está activo */
/* Solo se aplica cuando el botón tenga spinner infinito (cursor de carga) */
#product .dsn-customize .dp-btn-spinner:not([style*="display: none"]) ~ .dsn-customize-label {
  opacity: 0.5;
}


/* ============================================
   DYNAMIC PRODUCT - Mejora Estética v2.0
   dgregalos.es - Personalizacion de productos
   ============================================ */

/* === CONTENEDOR === */
.dp_container {
  font-family: 'Open Sans', sans-serif !important;
  margin-top: 20px !important;
}

/* === FIELDSET === */
.dp_group {
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 16px rgba(0,144,240,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

/* === ENCABEZADO del bloque === */
.dp_group::before {
  content: '\1F3A8  Personaliza tu producto';
  display: block;
  background: linear-gradient(135deg, #0090F0 0%, #5379B8 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  letter-spacing: 0.3px;
}

/* === CAMPOS === */
.dp_field_container {
  padding: 14px 20px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  margin-bottom: 0 !important;
}
.dp_field_container:last-child { border-bottom: none !important; }

/* === LABEL DEL CAMPO === */
.dp-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #0090F0 !important;
  margin-bottom: 10px !important;
}

/* === RADIO CONTAINER EN FLEX === */
.dp_type_radio .dp_input_container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

/* === HIDE native radios === */
.dp-radio-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* === PILL BUTTONS para tamano y metodo === */
[data-name="tamano"] .dp-radio-option,
[data-name="metodo"] .dp-radio-option {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 20px !important;
  border: 2px solid #dde3eb !important;
  border-radius: 25px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #525050 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: #f8fafc !important;
  user-select: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
[data-name="tamano"] .dp-radio-option:has(input:checked),
[data-name="metodo"] .dp-radio-option:has(input:checked) {
  background: #0090F0 !important;
  border-color: #0090F0 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,144,240,0.35) !important;
}
[data-name="tamano"] .dp-radio-option:hover,
[data-name="metodo"] .dp-radio-option:hover {
  border-color: #0090F0 !important;
  color: #0090F0 !important;
  background: #e8f5fe !important;
}
[data-name="tamano"] .dp-radio-option:has(input:checked):hover,
[data-name="metodo"] .dp-radio-option:has(input:checked):hover {
  color: #fff !important;
  background: #0090F0 !important;
}

/* === COLOR SWATCHES === */
[data-name="color_dibujo"] .dp-radio-option,
[data-name="color_texto"] .dp-radio-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px 5px 6px !important;
  border: 2px solid #e0e6ed !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #525050 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  background: #fff !important;
  user-select: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
[data-name="color_dibujo"] .dp-radio-option::before,
[data-name="color_texto"] .dp-radio-option::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  flex-shrink: 0 !important;
  background: #ccc !important;
}
[data-name="color_dibujo"] .dp-radio-option:has(input:checked),
[data-name="color_texto"] .dp-radio-option:has(input:checked) {
  border-color: #0090F0 !important;
  box-shadow: 0 0 0 2px rgba(0,144,240,0.25) !important;
  background: #f0f8ff !important;
  font-weight: 700 !important;
}
[data-name="color_dibujo"] .dp-radio-option:hover,
[data-name="color_texto"] .dp-radio-option:hover {
  border-color: #0090F0 !important;
  background: #f0f8ff !important;
}

/* COLORES: color_dibujo IDs 11-26 / color_texto IDs 28-43 */
/* Azul */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-11"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-28"]::before { background: #2196F3 !important; }
/* Rojo */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-12"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-29"]::before { background: #F44336 !important; }
/* Negro */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-13"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-30"]::before { background: #212121 !important; }
/* Marron */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-14"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-31"]::before { background: #795548 !important; }
/* Burdeos */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-15"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-32"]::before { background: #7B1535 !important; }
/* Amarillo */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-16"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-33"]::before { background: #FFEB3B !important; }
/* Celeste */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-17"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-34"]::before { background: #03A9F4 !important; }
/* Naranja */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-18"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-35"]::before { background: #FF9800 !important; }
/* Rosa */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-19"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-36"]::before { background: #E91E7A !important; }
/* Verde */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-20"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-37"]::before { background: #4CAF50 !important; }
/* Azul Oscuro */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-21"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-38"]::before { background: #1565C0 !important; }
/* Morado */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-22"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-39"]::before { background: #9C27B0 !important; }
/* Dorado */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-23"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-40"]::before { background: linear-gradient(135deg, #D4AF37, #FFD700) !important; }
/* Gris */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-24"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-41"]::before { background: #9E9E9E !important; }
/* Magenta */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-25"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-42"]::before { background: #C2185B !important; }
/* Violeta */
[data-name="color_dibujo"] label[for="dp-radio-color_dibujo-26"]::before,
[data-name="color_texto"] label[for="dp-radio-color_texto-43"]::before { background: #673AB7 !important; }

/* === TEXT INPUTS === */
.dp_type_text input[type="text"],
.dp_type_textarea textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 2px solid #e0e6ed !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #525050 !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
.dp_type_text input[type="text"]:focus,
.dp_type_textarea textarea:focus {
  border-color: #0090F0 !important;
  box-shadow: 0 0 0 3px rgba(0,144,240,0.12) !important;
}
.dp_type_text .dp_input_container,
.dp_type_textarea .dp_input_container { margin-top: 4px !important; }
.dp_type_textarea textarea { min-height: 80px !important; resize: vertical !important; }


/* ============================================
   DISEÑO TOPPER - Imágenes de diseño más grandes
   Selector: .product-variants-item .color.texture
   ============================================ */

/* Contenedor de opciones de diseño */
.product-variants-item ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 8px 0 0 0 !important;
}

/* Cada opción li */
.product-variants-item .input-container {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Label contenedor */
.product-variants-item label {
  position: relative !important;
  cursor: pointer !important;
  display: block !important;
}

/* Swatch de imagen de diseño - usa min-width/min-height para mayor compatibilidad */
.product-variants-item span.color.texture {
  display: block !important;
  min-width: 80px !important;
  min-height: 80px !important;
  width: 80px !important;
  height: 80px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #f8f9fa !important;
  border: 2px solid #e0e6ed !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* Label contenedor expandido */
.product-variants-item label {
  min-width: 90px !important;
  display: inline-block !important;
  cursor: pointer !important;
}

/* Label del atributo (oculto visualmente pero accesible) */
.product-variants-item .attribute-name {
  position: static !important;
  clip: auto !important;
  height: auto !important;
  width: auto !important;
  clip-path: none !important;
  display: block !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #525050 !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 85px !important;
}

.product-variants-item .attribute-name.sr-only {
  clip: auto !important;
  height: auto !important;
  margin: 4px 0 0 0 !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
  clip-path: none !important;
  display: block !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #525050 !important;
}

/* Radio input seleccionado */
.product-variants-item input.input-color:checked + span.color.texture {
  border-color: #0090F0 !important;
  box-shadow: 0 0 0 2px rgba(0,144,240,0.35), 0 1px 4px rgba(0,0,0,0.12) !important;
}

/* Hover en swatch de imagen */
.product-variants-item span.color.texture:hover {
  border-color: #0090F0 !important;
  transform: scale(1.05) !important;
}

/* Ocultar el radio input nativo */
.product-variants-item input.input-color {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Control-label del grupo de atributos */
.product-variants-item .control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #525050 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Espaciado entre campo label y opciones */
.product-variants-item {
  margin-bottom: 12px !important;
}


/* === INDICADOR DE PRECIO EN OPCION 18x18cm === */
label[for="dp-radio-tamano-8"]::after {
  content: ' (+6 \20AC)' !important;
  font-size: 11px !important;
  color: #0090F0 !important;
  font-weight: 600 !important;
}

/* === CAMPO FECHA - input type date === */
/* El JS cambia dp_fecha a type=date; aplicar estilos consistentes */
#dp_fecha[type="date"] {
  border-radius: 6px !important;
  border: 1px solid #ccc !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #333 !important;
  font-family: inherit !important;
}
#dp_fecha[type="date"]:focus {
  border-color: #1a1a8c !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,26,140,0.1) !important;
}
/* Ocultar el botón nativo add-to-cart del tema (dsn-customize lo reemplaza) */
/* NO ocultar con display:none - DP necesita el botón para funcionar */
.dp-hidden-cart-btn {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* === LOADER BOTÓN dsn-customize === */
/* Ocultar el spinner del botón dsn-customize cuando está en estado 'loaded' */
.dsn-customize-loader.loaded {
  display: none !important;
}
/* Mostrar spinner solo cuando está activamente cargando */
.dsn-customize.loading .dsn-customize-loader {
  display: inline !important;
}

/* === FIX: Borde de selección CUADRADO para swatches de imagen (en lugar de círculo) === */
/* El tema aplica border-radius:50% al ::before del swatch activo - lo sobreescribimos */
.product-variants > .product-variants-item .color.texture.active::before,
.product-variants > .product-variants-item .color.texture:hover::before,
.product-variants > .product-variants-item .custom-checkbox input[type="checkbox"]:checked + span.color.texture::before,
.product-variants > .product-variants-item .input-color:checked + span.color.texture::before,
.product-variants > .product-variants-item .input-color:hover + span.color.texture::before {
  border-radius: 8px !important;
}

/* === FIX: Precio (+6 €) visible cuando el pill 18x18cm está seleccionado (fondo azul) === */
/* Cuando el label está dentro de un pill seleccionado (fondo #0090F0), el ::after debe ser blanco */
[data-name="tamano"] .dp-radio-option:has(input:checked) label[for="dp-radio-tamano-8"]::after,
[data-name="tamano"] .dp-radio-option:has(input[value="8"]:checked)::after,
label[for="dp-radio-tamano-8"]:has(~ input:checked)::after {
  color: #fff !important;
}
/* Selector directo: cuando el label del 18x18 está dentro de un pill seleccionado */
.dp-radio-option:has(input:checked) label[for="dp-radio-tamano-8"]::after {
  color: #fff !important;
}

/* === FIX: "+6 €" BLANCO cuando 18x18cm está seleccionado (fondo azul) === */
/* Estructura: el label ES el dp-radio-option - el input está dentro del label */
label[for="dp-radio-tamano-8"]:has(input:checked)::after {
  color: #fff !important;
}