/* --------- FICHA DE PRODUCTOS --------- */ /* Seleccionamos el <div> interno que tiene el background inline */ .containerImagePrincipal a#main-fancy > div { background-size: contain !important; background-position: center center !important; } /* Selecciona el <div> con background dentro de cada .ficha_carousel_img */ .carousel-thumbs .ficha_carousel_img > a > div { background-size: contain !important; background-position: center center !important; } /* --------- FIN FICHA DE PRODUCTOS --------- */ /* --------- TOP pre header --------- */ .page-header .sticky-wrapper::before { background-color: #0083af; } .top-bar:before { background-color: #0083af; } /* --------- FIN TOP pre header --------- */ /* --------- Categorias HOME --------- */ /* ---- Sección categorías: ancho completo ---- */ .categories.section-categories-index .container{ /* anula el max-width de Bootstrap y quita márgenes laterales */ max-width:none; width:100%; padding-left:0; padding-right:0; } /* ---- Grid flexible basado en flexbox ---- */ .section-categories-index .row{ display:flex !important; /* sobreescribe el display:flex de Bootstrap si fuera grid */ flex-wrap:wrap; margin-left:-.5rem; /* compensan el padding interno */ margin-right:-.5rem; } /* ---- Item base: 4 columnas (≥ 992 px) ---- */ .section-categories-index .row > div{ padding:.5rem; /* separa las tarjetas */ flex:0 0 25%; /* 4 × 25 % */ max-width:25%; } /* 3 columnas (≥ 768 px y < 992 px) */ @media (max-width:991.98px){ .section-categories-index .row > div{ flex:0 0 33.3333%; max-width:33.3333%; } } /* 2 columnas (≥ 576 px y < 768 px) */ @media (max-width:767.98px){ .section-categories-index .row > div{ flex:0 0 50%; max-width:50%; } } /* 1 columna (< 576 px) */ @media (max-width:575.98px){ .section-categories-index .row > div{ flex:0 0 100%; max-width:100%; } } /* --------- FIN Categorias HOME --------- */ /* ---- Destacados: forzamos ancho completo del contenedor ---- */ .section-hightlights .container{ max-width:none; width:100%; padding-left:0; padding-right:0; } /* ---- Desactivamos el carrusel y convertimos todo en grilla ---- */ /* 1) Ocultamos duplicados y controles del Owl */ .owl-carousel-hightlights .owl-item.cloned, .owl-carousel-hightlights .owl-nav, .owl-carousel-hightlights .owl-dots{ display:none !important; } /* 2) Permitimos que el track se expanda y eliminamos la traslación */ .owl-carousel-hightlights .owl-stage-outer{ overflow:visible !important; /* que crezca libremente */ } .owl-carousel-hightlights .owl-stage{ display:flex !important; /* flexbox en lugar de “pista” */ flex-wrap:wrap; transform:none !important; /* anulamos el scroll del carrusel */ width:100% !important; margin-left:-.5rem; /* compensan el padding de los items */ margin-right:-.5rem; } /* 3) Cada tarjeta: 5 columnas base */ .owl-carousel-hightlights .owl-item{ flex:0 0 20%; /* 5 × 20 % */ max-width:20%; padding:.5rem; /* separación uniforme */ width:auto !important; /* sobrescribe el inline style width:210px */ } /* ---- Puntos de quiebre responsivos ---- */ /* 4 columnas (≥ 992 px < 1200 px) */ @media (max-width:1199.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 25%; max-width:25%; } } /* 3 columnas (≥ 768 px < 992 px) */ @media (max-width:991.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 33.3333%; max-width:33.3333%; } } /* 2 columnas (≥ 576 px < 768 px) */ @media (max-width:767.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 50%; max-width:50%; } } /* 1 columna (< 576 px) */ @media (max-width:575.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 100%; max-width:100%; } } /* --------- Destacados HOME --------- */ /* --- Contenedor: ancho completo + margen sutil --- */ .section-hightlights .container{ max-width:none; width:100%; padding-left:1rem; /* margen interno deseado */ padding-right:1rem; } /* --- Anular carrusel y clones/controles --- */ .owl-carousel-hightlights .owl-item.cloned, .owl-carousel-hightlights .owl-nav, .owl-carousel-hightlights .owl-dots{display:none!important;} .owl-carousel-hightlights .owl-stage-outer{overflow:visible!important;} .owl-carousel-hightlights .owl-stage{ display:flex!important; flex-wrap:wrap; transform:none!important; width:100%!important; margin-left:-.5rem; /* compensan padding de items */ margin-right:-.5rem; } /* --- Tarjeta de producto --- */ .owl-carousel-hightlights .owl-item{ box-sizing:border-box; flex:0 0 20%; /* 5 columnas */ max-width:20%; padding:.5rem; margin-right:0!important;/* sobrescribe el inline 15px */ width:auto!important; /* anula inline width:210px */ } /* 4 columnas (992–1199 px) */ @media(max-width:1199.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 25%; max-width:25%; } } /* 3 columnas (768–991 px) */ @media(max-width:991.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 33.3333%; max-width:33.3333%; } } /* 2 columnas (576–767 px) */ @media(max-width:767.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 50%; max-width:50%; } } /* 1 columna (< 576 px) */ @media(max-width:575.98px){ .owl-carousel-hightlights .owl-item{ flex:0 0 100%; max-width:100%; } } /* ---------- Fondo gris del bloque Destacados ---------- */ /* Navegadores modernos (Chrome 105+, Safari 15.4+, Edge, Firefox 122+) */ section.section-hightlights:has(#owl-carousel-hightlights){ background:#F6F6F6; } /* Fallback para navegadores sin :has() ─ aplica el gris solo detrás de la grilla (títulos quedarían sobre fondo blanco, pero evitamos cualquier conflicto) */ @supports not(selector(:has(*))){ #owl-carousel-hightlights{ background:#F6F6F6; padding-top:2rem; padding-bottom:2rem; margin-left:-1rem; /* neutraliza el padding‐left del contenedor */ margin-right:-1rem; /* neutraliza el padding‐right del contenedor */ } } /* ---------- Tarjeta de producto tipo “card” ---------- */ .owl-carousel-hightlights .product-item{ background:#fff; /* interior blanco */ border:1px solid #e4e4e4; /* borde tenue */ border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); height:100%; overflow:hidden; /* para que nada sobresalga */ transition:transform .18s ease, box-shadow .18s ease; } /* — Pequeño efecto “hover” para dar vida — */ .owl-carousel-hightlights .product-item:hover{ transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.12); } /* ---------- Ajustes menores opcionales ---------- */ /* Redondear la imagen superior para que coincida con la tarjeta */ .owl-carousel-hightlights .product-grid__image-wrapper, .owl-carousel-hightlights .ox-product-image{ border-top-left-radius:8px; border-top-right-radius:8px; } /* Alineamos detalles debajo sin pegarse al borde */ .owl-carousel-hightlights .product-item-details{ padding:0 0.75rem 0.75rem; } /* --------- FIN destacados HOME --------- */ /* --------- blog HOME --------- */ /* =========== GRID 4×1 PARA “Últimas novedades” =========== */ /* 1) Convertimos la fila a flex-box y anulamos los márgenes del grid Bootstrap */ .section-last-news .row{ display:flex !important; flex-wrap:wrap; margin-left:-.5rem; margin-right:-.5rem; } /* 2) Cada tarjeta (category-selector) ocupará 25 % = 4 columnas */ .section-last-news .category-selector{ padding:.5rem; flex:0 0 25%; max-width:25%; } /* --- Responsivo --- */ /* 3 columnas (992–1199 px) */ @media(max-width:1199.98px){ .section-last-news .category-selector{ flex:0 0 33.3333%; max-width:33.3333%; } } /* 2 columnas (768–991 px) */ @media(max-width:991.98px){ .section-last-news .category-selector{ flex:0 0 50%; max-width:50%; } } /* 1 columna (< 768 px) */ @media(max-width:767.98px){ .section-last-news .category-selector{ flex:0 0 100%; max-width:100%; } } /* =========== AJUSTE DE TIPOGRAFÍA =========== */ /* Titulares: 50 % del tamaño real (aprox.) */ .section-last-news .page-card-custom h3{ font-size:1rem; /* antes ~2 rem */ line-height:1.25; margin-bottom:.35rem; } /* Descripción: un poco más pequeña */ .section-last-news .blog-description{ font-size:.85rem; /* antes ~1 rem */ line-height:1.35; } /* Ajustamos título del bloque mismo para que no parezca desproporcionado (opcional) */ .section-last-news .section-hightlights_title{ font-size:1.25rem; } /* ========================================================= Unificamos la tarjeta “ancha” (col-12) a formato vertical ========================================================= */ /* 1) Apunta sólo a la fila interna que aún usa .row */ .section-last-news .category-selector .row.h-100{ display:flex !important; flex-direction:column !important; /* apilamos imagen y texto */ margin:0 !important; } /* 2) Forzamos que sus dos columnas ocupen 100 % */ .section-last-news .category-selector .row.h-100 > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; } /* 3) Una altura coherente para la imagen (igual al resto) */ .section-last-news .row.h-100 .angulo-item-img.blog-list-image{ height:230px; /* ajusta si necesitas otra altura */ background-size:cover; background-position:center; } /* 4) Alineamos la parte de texto como las demás tarjetas */ .section-last-news .row.h-100 > .col-md-6.pt-3{ padding:1rem .75rem .75rem !important; /* idéntico al resto */ } /* ================================================ Normalizamos la primera tarjeta (la que venía 12-cols) ================================================ */ /* 1) Cambiamos su fila interna a columna */ .section-last-news .category-selector.col-12 .row.h-100{ display:flex !important; flex-direction:column !important; /* imagen arriba, texto abajo */ margin:0 !important; /* anulamos márgenes Bootstrap */ height:100%; /* llena todo el card */ } /* 2) Sus dos “col-md-6” pasan a ocupar 100 % del ancho */ .section-last-news .category-selector.col-12 .row.h-100 > .col-md-6{ width:100% !important; max-width:100% !important; flex:none !important; /* sin flex-basis que altere la altura */ padding-left:0 !important; padding-right:0 !important; } /* 3) Imagen con la misma altura que las otras noticias */ .section-last-news .angulo-item-img.blog-list-image{ height:260px; /* ajusta aquí si quieres otra altura global */ background-size:cover; background-position:center; } /* 4) Bloque de texto idéntico al resto */ .section-last-news .category-selector.col-12 .row.h-100 > .col-md-6.pt-3{ padding:1rem .75rem .75rem !important; display:flex; flex-direction:column; justify-content:space-between; } /* 5) Evita que la etiqueta y la fecha desborden */ .section-last-news .category-selector.col-12 .row.h-100 .d-flex{ flex-wrap:wrap; } /* --------- FIN blog HOME --------- */ /* --------- TITULO SUBTITULO CARRUSEL ---------*/ /* ========================================================== Encabezado de #sectionCarrusel – mismo look de DESTACADOS ========================================================== */ /* ---------- SUBTÍTULO (equivale a .section-hightlights_subtitle) */ #sectionCarrusel .text-destacado h4{ font-family: inherit; font-size: .8125rem; /* ≈13 px */ font-weight: 700; text-transform: uppercase; letter-spacing: .25em; color: #c5c5c5; /* gris claro usado en “PRODUCTOS” */ margin: 0 0 .4rem; } /* ---------- TÍTULO PRINCIPAL (equivale a .section-hightlights_title) */ #sectionCarrusel .text-destacado > div{ font-family: inherit; font-weight: 800; /* mismo grosor */ text-transform: uppercase; line-height: 1.1; color: #0e2e5c; /* azul oscuro corporativo */ text-align: center; margin: 0; } /* tamaños responsivos idénticos a DESTACADOS */ @media (min-width:992px){ /* desktop */ #sectionCarrusel .text-destacado > div{font-size: 3.75rem;} /* ≈60 px */ } @media (max-width:991.98px){ /* tablet/móvil */ #sectionCarrusel .text-destacado > div{font-size: 1.75rem;} /* ≈28 px */ } /* Contador de productos */ .contador-productos { font-weight: 600; background-color: #1ecad3; color: #fdfdfd; } /* =============================== FORMULARIO DE CONTACTO =============================== */ .col.contact { display: none !important; } /* =============================== FIN FORMULARIO DE CONTACTO =============================== */ /* =============================== SLIDER IMAGENES HOME =============================== */ /* ========================= DUBLIN ACTIVA - HERO SLIDER TEXT UPGRADE (sin tocar HTML) ========================= */ /* Base del caption: mejor lectura + ancho controlado */ .section-slider .carousel-caption.carousel-item-verti-center{ left: 6% !important; right: 6% !important; bottom: auto !important; top: 50% !important; transform: translateY(-50%); text-align: left !important; padding: 0 !important; max-width: 760px; z-index: 3; } /* Fondo sutil para que el texto “explote” sobre la imagen */ .section-slider .carousel-caption.carousel-item-verti-center::before{ content:""; position:absolute; inset:-22px -18px; background: linear-gradient(90deg, rgba(0,131,175,.60), rgba(0,131,175,.18), rgba(0,131,175,0)); border-radius: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 45px rgba(0,0,0,.18); z-index:-1; } /* H1: más “premium”, más impacto */ .section-slider .titulo-h1{ margin: 0 0 8px 0 !important; font-weight: 800 !important; letter-spacing: -0.6px; line-height: 1.05 !important; /* Ignora el color inline del HTML */ color: #ffffff !important; /* Tamaño responsive sin romper */ font-size: clamp(34px, 4vw, 56px) !important; /* Brillo/relieve */ text-shadow: 0 10px 28px rgba(0,0,0,.35); } /* Subrayado-acento con color de marca */ .section-slider .titulo-h1::after{ content:""; display:block; width: 96px; height: 6px; border-radius: 999px; background: #CADB2B; margin-top: 12px; box-shadow: 0 10px 22px rgba(202,219,43,.35); } /* H2: marca como “badge” */ .section-slider .titulo-h2{ margin: 14px 0 0 0 !important; display: inline-flex; align-items: center; gap: 10px; /* Ignora el color inline del HTML */ color: #0b2b2b !important; font-weight: 800 !important; letter-spacing: .6px; text-transform: uppercase; /* badge */ padding: 10px 14px; border-radius: 999px; background: #CADB2B; box-shadow: 0 18px 40px rgba(202,219,43,.30); } /* Detalle “punto” azul a la izquierda del badge */ .section-slider .titulo-h2::before{ content:""; width: 10px; height: 10px; border-radius: 999px; background: #0083af; box-shadow: 0 0 0 6px rgba(0,131,175,.18); } /* Ajustes tablet */ @media (max-width: 991.98px){ .section-slider .carousel-caption.carousel-item-verti-center{ max-width: 640px; } } /* Si en algún momento se muestra texto en mobile, esto lo deja prolijo */ @media (max-width: 767.98px){ .section-slider .carousel-caption.carousel-item-verti-center{ left: 5% !important; right: 5% !important; top: auto !important; bottom: 10% !important; transform: none !important; } .section-slider .carousel-caption.carousel-item-verti-center::before{ inset: -16px -14px; background: linear-gradient(180deg, rgba(0,131,175,.55), rgba(0,131,175,.15)); } } /* Animación suave de entrada (sin librerías) */ @keyframes dublinHeroIn{ 0%{opacity:0; transform: translateY(-50%) translateX(-12px);} 100%{opacity:1; transform: translateY(-50%) translateX(0);} } .section-slider .carousel-item.active .carousel-caption.carousel-item-verti-center{ animation: dublinHeroIn 900ms ease-out both; } /* ========================= DUBLIN ACTIVA – SUBTÍTULO SIN FONDO ========================= */ /* Elimina completamente el fondo/estilo del H2 */ .section-slider .titulo-h2{ background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; color: #CADB2B !important; font-weight: 700 !important; letter-spacing: .4px; text-transform: uppercase; } /* ---------- SUBTÍTULO SLIDER (H2) ---------- */ .section-slider .carousel-caption .titulo-h2{ margin-top: 10px !important; font-size: 0.95rem !important; /* más chico que H1 */ line-height: 1.25; font-weight: 500; color: #CADB2B !important; /* color marca */ letter-spacing: 0.3px; text-transform: none; display: block !important; } /* Garantiza que quede debajo del H1 */ .section-slider .carousel-caption .titulo-h1{ display: block; } /* ===================================================== FIX DEFINITIVO SLIDER – H2 TAMAÑO + NO DUPLICADO ===================================================== */ /* ---------- DESKTOP ---------- */ @media (min-width: 768px){ /* Forzamos visibilidad correcta */ .section-slider .titulo-h2{ display: block !important; font-size: 1.35rem !important; /* + grande que antes */ line-height: 1.3; font-weight: 600; color: #CADB2B !important; margin-top: 14px !important; letter-spacing: .3px; text-transform: none; } } /* ---------- MOBILE ---------- */ @media (max-width: 767.98px){ /* Ocultamos el H1 duplicado que hace de subtítulo */ .section-slider .carousel-caption h1.titulo-h1.d-block.d-md-none{ display: none !important; } /* Mostramos el H2 también en mobile */ .section-slider .titulo-h2{ display: block !important; font-size: 1.1rem !important; line-height: 1.25; font-weight: 500; color: #CADB2B !important; margin-top: 10px !important; text-transform: none; } /* Ajuste del H1 principal en mobile */ .section-slider .titulo-h1{ font-size: 1.8rem !important; line-height: 1.1; } } /* ===================================================== FIX FINAL SLIDER MOBILE – H1 VISIBLE + NO DUPLICADO ===================================================== */ /* ---------- DESKTOP ---------- */ @media (min-width: 768px){ .section-slider .titulo-h2{ display: block !important; font-size: 1.35rem !important; line-height: 1.3; font-weight: 600; color: #CADB2B !important; margin-top: 14px !important; text-transform: none; } } /* ---------- MOBILE ---------- */ @media (max-width: 767.98px){ /* 🔴 Ocultamos SOLO el H1 que viene después del H2 (subtítulo duplicado) */ .section-slider .carousel-caption h2.titulo-h2 + h1.titulo-h1{ display: none !important; } /* ✅ H1 principal visible */ .section-slider .carousel-caption h1.titulo-h1{ display: block !important; font-size: 1.9rem !important; line-height: 1.15; font-weight: 800; color: #ffffff !important; } /* ✅ Subtítulo visible también en mobile */ .section-slider .titulo-h2{ display: block !important; font-size: 1.05rem !important; line-height: 1.25; font-weight: 500; color: #CADB2B !important; margin-top: 10px !important; text-transform: none; } } /* ===================================================== CATEGORÍAS HOME – SOLO FIX 2 COLUMNAS EN MOBILE (sin cambiar estética) ===================================================== */ @media (max-width: 575.98px){ .section-categories-index .row{ display: flex; flex-wrap: wrap; } .section-categories-index .row > div{ flex: 0 0 50% !important; max-width: 50% !important; } } /* ===================================================== CATEGORÍAS HOME – MOBILE MÁS AIRE Y FLUIDEZ (sin tocar desktop) ===================================================== */ @media (max-width: 575.98px){ /* Un poco más de separación entre cards */ .section-categories-index .row{ margin-left: -.25rem; margin-right: -.25rem; } .section-categories-index .row > div{ padding: .5rem; /* más aire externo */ } /* El item respira mejor */ .section-categories-index_item{ padding: .25rem; /* aire interno sin cambiar estética */ } /* Botón / recuadro de texto */ .section-categories-index_item_banner-container{ left: .5rem !important; right: .5rem !important; margin-bottom: .5rem !important; } /* Botón más fluido */ .section-categories-index_item_banner-container .btn{ width: 100%; padding: .6rem .75rem; /* más aire lateral */ line-height: 1.2; white-space: normal; /* permite salto de línea */ font-size: .75rem; /* apenas más chico */ } } /* ===================================================== CATEGORÍAS HOME – FIX TEXTO + RECUADRO EN MOBILE (SIN tocar desktop) ===================================================== */ @media (max-width: 575.98px){ /* Contenedor del banner (recuadro blanco) */ .section-categories-index_item_banner-container{ position:absolute; left:.75rem !important; right:.75rem !important; bottom:.75rem !important; margin:0 !important; display:flex; justify-content:center; } /* Botón / texto */ .section-categories-index_item_banner-container .btn{ width:100%; max-width:100%; padding:.75rem .85rem; /* aire interno real */ font-size:.78rem; /* escala correcta */ line-height:1.25; white-space:normal; /* permite 2 líneas */ word-break:break-word; /* evita overflow */ text-align:center; box-sizing:border-box; } }

/* =========================================================
   LISTA DE PRODUCTOS – SOLUCIÓN DEFINITIVA
   Compatible con HTML Nextiendas (SIN tocar markup)
   ========================================================= */

/* ---------- GRID ---------- */
#product-container{
    display:flex !important;
    flex-wrap:wrap !important;
    margin:0 -0.6rem !important;
}

#product-container .products-template-item{
    padding:0.6rem !important;
    flex:0 0 25% !important;
    max-width:25% !important;
}

/* Notebook */
@media (max-width:1199.98px){
    #product-container .products-template-item{
        flex:0 0 33.3333% !important;
        max-width:33.3333% !important;
    }
}

/* Tablet */
@media (max-width:991.98px){
    #product-container .products-template-item{
        flex:0 0 50% !important;
        max-width:50% !important;
    }
}

/* Móvil → 2 columnas */
@media (max-width:575.98px){
    #product-container .products-template-item{
        flex:0 0 50% !important;
        max-width:50% !important;
    }
}

/* ---------- CARD ---------- */
#product-container .products-template-item > .mb-5{
    margin:0 !important;
    background:#fff;
    border:1px solid #e3e3e3;
    border-radius:10px;
    overflow:hidden;
}

/* ---------- CONTENEDOR IMAGEN ---------- */
#product-container .item-image-preview{
    display:block;
    position:relative;
    height:140px;              /* desktop */
    overflow:hidden;
}

/* Imagen más baja en móvil */
@media (max-width:575.98px){
    #product-container .item-image-preview{
        height:100px;
    }
}

/* ---------- IMÁGENES (PRIMARY + SECONDARY) ---------- */
#product-container .angulo-item-img{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;     /* PISA el inline 400px */
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    margin:0 !important;
}

/* Secundaria oculta por defecto */
#product-container .bg-image-secondary{
    opacity:0;
    transition:opacity .25s ease;
}

/* Hover limpio */
#product-container .item-image-preview:hover .bg-image-secondary{
    opacity:1;
}

#product-container .item-image-preview:hover .bg-image-primary{
    opacity:0;
}

/* ---------- TEXTO ---------- */
#product-container .product-item-link{
    display:block;
    padding:0.75rem 0.75rem 0.5rem;
    font-size:0.82rem;
    font-weight:600;
    line-height:1.25;
    text-align:center;
    color:#00203d;
    text-decoration:none;
}

/* ---------- BOTÓN AGREGAR (NO TOCAR) ---------- */
#product-container a[data-action="add-product"]{
    bottom:.5rem !important;
    right:.5rem !important;
}

/* =========================================================
   AJUSTE FINAL – AIRE Y ESCALA CORRECTA
   ========================================================= */

/* Imagen más grande (desktop) */
#product-container .item-image-preview{
    height:250px !important;          /* antes 140 */
    padding:12px;                     /* aire interno */
    box-sizing:border-box;
}

/* Imagen móvil */
@media (max-width:575.98px){
    #product-container .item-image-preview{
        height:180px !important;      /* antes 100 */
        padding:10px;
    }
}

/* Las imágenes respetan el padding */
#product-container .angulo-item-img{
    inset:12px !important;            /* crea margen visual */
    width:auto !important;
    height:auto !important;
}

/* Card un poco más espaciosa */
#product-container .products-template-item > .mb-5{
    border-radius:12px;
}

/* Texto con más respiración */
#product-container .product-item-link{
    padding-top:0.85rem;
    padding-bottom:0.75rem;
}