.t3-topbar {
    background: var(--t3-header, #111);
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    padding: 8px 0;
}

.t3-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.t3-topbar-dir i { margin-right: 6px; color: var(--theme-color); }

.t3-topbar-msg {
    color: #fff;
    font-weight: 600;
}

a.t3-topbar-msg:hover { color: var(--theme-color); }

@media (max-width: 767px) {
    .t3-topbar-inner { justify-content: center; text-align: center; }
    .t3-topbar-dir   { display: none; }
}


/* --- Buscador del encabezado -------------------------------------------- */
/* El <select> lleva la clase `ignore` para que niceSelect no lo reemplace por
   un div; sin eso el formulario no enviaba la categoría. Como se queda siendo
   un <select> de verdad, hay que darle el aspecto a mano. */

.t3-buscador { display: flex; width: 100%; }




/* --- Hero ---------------------------------------------------------------- */
/* Propio: el banner del template trae contenido quemado y varias capas de
   formas decorativas que no aplican a un catálogo real. */

/* --- Encabezado de las páginas internas ---------------------------------- */
/* El template pinta un `page-title` sin imagen. Acá lleva fondo, velo y alto
   configurables, igual que el tema 2. */

.t3-enc {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: var(--t3-enc-alto, 180px);
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.t3-enc:before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--t3-enc-velo, 0);
}

.t3-enc-inner { position: relative; z-index: 2; }

.t3-enc h1 {
    color: #fff;
    font-size: clamp(24px, 3vw, 38px);
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.t3-enc .bread-crumb li,
.t3-enc .bread-crumb li a { color: rgba(255, 255, 255, .9); }
.t3-enc .bread-crumb li a:hover { color: var(--theme-color); }

/* Con velo en 0 y una foto clara el título se perdía. La sombra lo sostiene
   sin tener que oscurecer la imagen entera. */
.t3-enc .bread-crumb li { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }


/* --- Etiquetas de producto ----------------------------------------------- */

.t3-agotado {
    background: #6c757d !important;
    color: #fff !important;
}


.shop-block-two .lower-content h5 del {
    margin-left: 8px;
    font-size: .82em;
    color: #9aa0a6;
    font-weight: 400;
}

/* El template deja las tarjetas a distinta altura según el largo del nombre y
   la fila queda escalonada. */
.shop-block-two .inner-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.shop-block-two .lower-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.shop-block-two .lower-content .cart-btn { margin-top: auto; }

.shop-block-two .lower-content h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.theme-btn.disabled,
.theme-btn[disabled] {
    opacity: .55;
    pointer-events: none;
}


/* --- Ficha del producto --------------------------------------------------- */
/* La estructura es la de `shop-details.html`. Aca solo van los ajustes que el
   template no necesitaba porque sus fotos eran todas del mismo tamano y sus
   variantes cabian en una etiqueta de 71px. */

/* El precio tachado y el porcentaje viven dentro del <h3> del precio. */
.product-details-content .content-box h3 del {
    margin-left: 12px;
    font-size: 20px;
    font-weight: 400;
    color: #9aa0a6;
}

.t3-prod-descuento {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    background: var(--theme-color-3, #C02332);
}

.t3-prod-vigencia {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color-3, #C02332);
}

/* Las fotos de los clientes vienen de cualquier proporcion. Sin una relacion
   fija, `bxslider` en modo fade fija la altura de la primera y las demas se
   salen o dejan un hueco. */
.product-details-content .image-box img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* El carril de miniaturas es absoluto sobre esos 130px de padding. Con una
   sola foto no dibujamos carril, asi que el hueco sobra. */
.product-details-content .image-inner.t3-sin-carril {
    padding-left: 0;
}

.product-details-content .slider-content .thumb-box li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un producto puede traer mas miniaturas de las que caben a lo alto. */
.product-details-content .slider-content .slider-pager {
    max-height: 100%;
    overflow: hidden;
}

/* Las variantes reales ("Rojo intenso", "Talla XXL") no caben en la etiqueta
   de ancho fijo del template. */
.product-details-content .content-box .size-list {
    flex-wrap: wrap;
    gap: 10px 0;
}

.product-details-content .content-box .size-list .check-box label {
    width: auto;
    min-width: 71px;
    padding: 0 18px;
    white-space: nowrap;
}

.product-details-content .content-box .size-list .check-box input:disabled + label {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Sin `rating` debajo del precio, el bloque de datos queda pegado al titulo. */
.product-details-content .content-box .discription-box {
    margin-top: 10px;
}

.product-details-content .addto-cart-box ul li.cart-btn .theme-btn[disabled] {
    opacity: .55;
    pointer-events: none;
}

/* En el carrusel de relacionados el boton no se apila como en la rejilla: es
   una capa absoluta que solo asoma al pasar el mouse. Lo unico que hay que
   arreglar es que "Agregar al carrito" no cabe en un renglon con seis tarjetas
   por fila, y el template nunca lo previo porque su texto decia "Add to Cart". */
.shop-two .shop-carousel .cart-btn .theme-btn {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
}


/* --- Catálogo ------------------------------------------------------------- */
/* La estructura es la de `shop.html`; aca solo van los enganches con datos
   reales que el template no contemplaba. */

.shop-sidebar .category-list li a.activa {
    color: var(--theme-color);
    font-weight: 700;
}

/* El conteo va como hijo directo del <li>, nunca dentro del <label>: el
   template posiciona ese span con `position: absolute; right: 0`, y el label
   esta en `position: relative`, asi que dentro se pegaba al final del texto.
   Ademas el <li> solo queda relativo bajo `.shop-sidebar.style-two`. */
.shop-sidebar .category-list li { position: relative; }

.shop-sidebar .category-list li > span {
    color: #9aa0a6;
    font-size: 13px;
    line-height: 30px;
}

.t3-limpiar-filtros {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--theme-color);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.t3-cat-busqueda { margin-top: 4px; font-size: 14px; }
.t3-cat-busqueda a { margin-left: 10px; text-decoration: underline; }

.t3-vacio {
    color: #55585c;
    padding: 40px 0;
    text-align: center;
}

/* Respaldo por si jQuery UI no cargara: dos campos en vez del deslizador. */
.t3-precio-manual { display: flex; gap: 10px; }

.t3-precio-manual input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
}

/* Las fotos de producto vienen de cualquier proporcion; el template usaba
   recortes a medida. */
.shop-block-two .image-box .image img,
.shop-block-seven .image-box .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* La rejilla del template es `float: left; width: 20%`. Con fichas de distinta
   altura, una alta atora a las de la fila siguiente y deja huecos: en el demo
   nunca se veia porque todas las fichas median igual. Con flex, cada fila se
   acomoda sola y los anchos y cortes responsivos del template siguen valiendo.

   El `float: none` es obligatorio: un elemento flotado no participa del flex. */
.shop-page-section .wrapper .inner-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.shop-page-section .wrapper .inner-container .shop-block-two {
    float: none;
    display: flex;
}

.shop-page-section .wrapper .inner-container .shop-block-two .inner-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.shop-page-section .wrapper .inner-container .shop-block-two .lower-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Empuja el boton al fondo para que quede a la misma altura en toda la fila. */
.shop-page-section .wrapper .inner-container .shop-block-two .cart-btn {
    margin-top: auto;
}

/* Dos lineas de nombre como maximo: es lo que mas hacia variar la altura. */
.shop-block-two .lower-content h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.pagination li span { padding: 0 6px; color: #9aa0a6; }

/* --- Ofertas con cuenta regresiva ---------------------------------------- */

.t3-ofertas .deals-block-one .inner-box { height: 100%; }

.t3-ofertas .cs-countdown {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.t3-ofertas .cs-countdown .count-col {
    min-width: 48px;
    padding: 6px 4px;
    text-align: center;
    border-radius: 6px;
    background: #f4f6f9;
}

.t3-ofertas .cs-countdown .count-col span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--theme-color-3, #C02332);
}

.t3-ofertas .cs-countdown .count-col h6 {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: #7b8494;
}

.t3-ofertas .content-box h4 del {
    margin-left: 8px;
    font-size: .8em;
    color: #9aa0a6;
    font-weight: 400;
}


/* --- Banners -------------------------------------------------------------- */

.t3-banner {
    position: relative;
    min-height: 260px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.t3-banner:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1));
}

.t3-banner-inner {
    position: relative;
    z-index: 2;
    padding: 34px 40px;
    max-width: 460px;
    color: #fff;
}

.t3-banner-inner h3 { color: #fff; margin-bottom: 12px; }
.t3-banner-inner p  { color: rgba(255, 255, 255, .88); margin-bottom: 20px; }

.t3-banner-sobre {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-color-2, #2CB877);
}


/* --- Beneficios ----------------------------------------------------------- */

.t3-beneficios { padding: 34px 0; }

.t3-beneficios .shipping-block-one .inner-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 12px;
    background: #f7f8fa;
    height: 100%;
}

.t3-beneficios .icon-box {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    margin: 0;
    border-radius: 50%;
    text-align: center;
    font-size: 19px;
    color: #fff;
    background: var(--theme-color);
    overflow: visible;
}

.t3-benef-texto { min-width: 0; }
.t3-beneficios h4 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; }
.t3-beneficios p  { margin: 0; font-size: 13px; line-height: 1.45; color: #7b8494; }


/* --- Testimonios ---------------------------------------------------------- */

.t3-resena {
    padding: 26px;
    border-radius: 12px;
    background: #f7f8fa;
    height: 100%;
}

.t3-resena .rating { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 12px; }
.t3-resena .rating li { color: #f5a623; }
.t3-resena p  { margin-bottom: 14px; color: #55585c; }
.t3-resena h5 { margin: 0; font-size: 16px; }


/* --- Cajón del carrito ---------------------------------------------------- */
/* Propio. El template trae un menú flotante al pasar el mouse que en celular
   no se puede abrir. */

.t3-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    z-index: 9998;
}

.t3-cart-overlay.visible { opacity: 1; visibility: visible; }

.t3-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100%;
    background: #fff;
    box-shadow: -6px 0 30px rgba(0, 0, 0, .16);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.t3-cart-drawer.abierto { transform: translateX(0); }

.t3-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eceef1;
}

.t3-cart-head h4 { margin: 0; font-size: 19px; }

.t3-cart-head button {
    border: 0;
    background: transparent;
    font-size: 19px;
    color: #7b8494;
    cursor: pointer;
}

.t3-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 22px; }

.t3-cart-vacio { text-align: center; padding: 56px 0; color: #9aa0a6; }
.t3-cart-vacio i { font-size: 42px; display: block; margin-bottom: 14px; }

.t3-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f2f4;
}

.t3-cart-item-info   { flex: 1 1 auto; min-width: 0; }
.t3-cart-item-nombre { font-weight: 600; font-size: 15px; }
.t3-cart-item-var    { font-size: 13px; color: #7b8494; }
.t3-cart-item-precio { color: var(--theme-color); font-weight: 700; }

.t3-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
    padding: 3px 8px;
}

.t3-cart-item-qty button {
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    color: #55585c;
    cursor: pointer;
}

.t3-cart-item-quitar {
    border: 0;
    background: transparent;
    color: #c0392b;
    cursor: pointer;
}

.t3-cart-foot { padding: 18px 22px; border-top: 1px solid #eceef1; }

.t3-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 17px;
}

.t3-cart-total strong { color: var(--theme-color); font-size: 21px; }


/* --- Modal de sesión y vista rápida --------------------------------------- */
/* Propios, portados del tema 2. */

.t3-sesion-overlay,
.t3-vr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    z-index: 10000;
}

.t3-sesion-overlay.visible,
.t3-vr-overlay.visible { opacity: 1; visibility: visible; }

.t3-sesion-modal,
.t3-vr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s;
    z-index: 10001;
    max-height: 92vh;
    overflow-y: auto;
}

.t3-sesion-modal { width: 420px; max-width: 94vw; }
.t3-vr-modal     { width: 860px; max-width: 94vw; }

.t3-sesion-modal.abierto,
.t3-vr-modal.abierto {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.t3-sesion-tabs { display: flex; border-bottom: 1px solid #eceef1; }

.t3-sesion-tabs button {
    flex: 1;
    padding: 15px;
    border: 0;
    background: transparent;
    font-weight: 600;
    color: #7b8494;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.t3-sesion-tabs button.activa {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
}

.t3-sesion-cuerpo { padding: 24px; }
.t3-sesion-cuerpo .form-control { margin-bottom: 14px; }

.t3-sesion-aviso {
    display: none;
    padding: 11px 14px;
    border-radius: 7px;
    margin-bottom: 14px;
    font-size: 14px;
}

.t3-sesion-aviso.error { display: block; background: #fdecea; color: #a4322a; }
.t3-sesion-aviso.ok    { display: block; background: #e8f5ec; color: #256d43; }

.t3-vr-cerrar {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 21px;
    color: #7b8494;
    cursor: pointer;
    z-index: 2;
}

.t3-vr-cuerpo { padding: 26px; }


/* --- Retoques generales ---------------------------------------------------- */

.sec-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.sec-title h2 { margin: 0; }

.sec-title a {
    font-weight: 600;
    color: var(--theme-color);
    white-space: nowrap;
}

/* Sin esto el pie del carrito y el botón de pagar quedaban tapados por la
   barra del navegador en iOS. */
@supports (padding: max(0px)) {
    .t3-cart-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

.t3-resena .rating li.t3-estrella-apagada { color: #d6d9de; }

.t3-resena-autor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.t3-resena-autor img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.t3-resena-autor h5 { margin: 0; }


/* --- Correcciones vistas en pantalla ------------------------------------- */

/* El template daba por hecho un logo apaisado y chico, y no le puso tope de
   alto. Un logo cuadrado estiraba la barra azul a cientos de pixeles. El alto
   sale de la configuracion del tema. */
.main-header .logo-box img,
.main-header .nav-logo img,
.sticky-header .logo-box img {
    max-height: var(--t3-logo-alto, 55px);
    width: auto;
}

.header-upper .upper-inner .logo-box {
    display: flex;
    align-items: center;
    max-width: 260px;
}

/* La cinta en movimiento: el circulo de 40x40 lo pone el template, pero nunca
   estilizo la imagen de adentro porque sus PNG ya venian a esa medida. Las
   fotos de categoria de una tienda son de cualquier tamano y se desbordaban
   del circulo. */

.featured-section .single-featured .image-box { overflow: hidden; }

.featured-section .single-featured .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-section .single-featured p a { color: inherit; }


/* El template ya da 160x160 a la ficha; lo unico que hace falta es que una foto
   de cualquier proporcion llene ese cuadro sin deformarse. */

.category-block-one .inner-box .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El hero del template usa recortes PNG sobre fondo claro; las tiendas suben
   fotos rectangulares. Se acota al mismo tamano del original (738x416) en vez
   de estirarla de arriba abajo. */

.t3-hero .banner-carousel .slide-item {
    background: #d9edf4;
    min-height: 480px;
}

/* La posicion la ponen `r_50 b_50` del markup, igual que en el original. No
   se toca `top` ni `transform`: ese transform es el que anima la entrada. */
.t3-hero .banner-carousel .image-layer {
    margin: 0;
    width: 738px;
    max-width: 42vw;
}

.t3-hero .banner-carousel .image-layer img {
    width: 100%;
    aspect-ratio: 738 / 416;
    height: auto;
    object-fit: cover;
}

.t3-hero .banner-carousel .content-box {
    position: relative;
    z-index: 3;
}

@media (max-width: 991px) {
    .t3-hero .banner-carousel .image-layer { display: none; }
    .t3-hero .banner-carousel .slide-item  { min-height: 320px; }
}

/* --- Precargador ---------------------------------------------------------- */
/* jQuery deja `display:none` en linea al esconderlo; sin `!important` no hay
   forma de sostenerlo hasta cumplir el minimo configurado. */

.loader-wrap.t3-preloader-espera {
    display: block !important;
    opacity: 1 !important;
}

.loader-wrap .preloader-close {
    cursor: pointer;
    z-index: 99999999;
}


/* El logo del pie tampoco tenia tope: la clase que le puse (`footer-logo`) no
   existe en este template, asi que salia a tamano completo. Ya no se usa, pero
   el tope queda por si alguna vista lo reintroduce. */
.main-footer .footer-widget img { max-height: 90px; width: auto; }


/* --- Contacto -------------------------------------------------------------- */

/* El mapa lo pega el cliente como iframe de Google; el template esperaba uno
   con medidas fijas. */
.contact-section .map-inner iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0;
}

/* El margen negativo del formulario existe para pegarse al mapa. Sin mapa
   sobra y deja el bloque descuadrado. */
.contact-section .form-inner.t3-form-sola { margin-right: 0; }


/* El template escalona el retardo de las letras solo hasta la octava. Un
   nombre mas largo dejaba el resto animandose al mismo tiempo. */
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before { animation-delay: 1.6s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(10):before { animation-delay: 1.8s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(11):before { animation-delay: 2.0s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(12):before { animation-delay: 2.2s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(13):before { animation-delay: 2.4s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(14):before { animation-delay: 2.6s; }

.handle-preloader .animation-preloader .txt-loading .t3-letra-espacio {
    width: .4em;
}


/* --- Paginas de sesion ---------------------------------------------------- */
/* El template trae accesos con Google y Facebook, y "recordarme". No hay OAuth
   ni sesion persistente detras, asi que se omiten en vez de pintar botones que
   no hacen nada. */

.sign-section .t3-sesion-aviso {
    display: none;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
}

.sign-section .t3-sesion-aviso.t3-error {
    display: block;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #a4241a;
}

.sign-section .t3-ayuda {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #7b8494;
}

.sign-section .theme-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- Finalizar compra ----------------------------------------------------- */
/* La estructura es la de `checkout.html`. El template solo daba estilo a
   `input[type=text]` y `input[type=email]`, porque su formulario no tenia ni
   areas de texto ni selectores nativos; el nuestro si. */

.checkout-section .billing-content .form-inner .form-group textarea,
.checkout-section .billing-content .form-inner .form-group select.t3-select-nativo {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid rgba(229, 229, 229, 1);
    font-size: 16px;
    color: var(--title-color);
    padding: 10px 20px;
    background: #fff;
    transition: all 500ms ease;
}

/* El pildorazo de 50px del template no le sienta a un area de varias lineas. */
.checkout-section .billing-content .form-inner .form-group textarea {
    min-height: 110px;
    border-radius: 20px;
    resize: vertical;
}

/* El selector nativo imita al `nice-select` de los demas campos, incluida la
   flechita, que aqui hay que dibujar a mano porque no hay markup de por medio. */
.checkout-section .billing-content .form-inner .form-group select.t3-select-nativo {
    height: 50px;
    border-radius: 50px;
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--title-color) 50%),
                      linear-gradient(135deg, var(--title-color) 50%, transparent 50%);
    background-position: calc(100% - 24px) 22px, calc(100% - 18px) 22px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* El template no trae cupon en el checkout. Se arma con sus mismas piezas. */
.t3-cupon {
    position: relative;
    margin-top: 26px;
}

.t3-cupon label {
    display: block;
    font-size: 16px;
    color: var(--title-color);
    margin-bottom: 8px;
}

.t3-cupon-fila {
    display: flex;
    gap: 10px;
}

.t3-cupon-fila input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 16px;
    color: var(--title-color);
}

.t3-cupon-fila .theme-btn {
    flex: 0 0 auto;
    padding: 0 24px;
    line-height: 50px;
    white-space: nowrap;
}

.t3-cupon-msg {
    font-size: 14px;
    margin-top: 8px;
}

.t3-cupon-msg.bien { color: #1a7f37; }
.t3-cupon-msg.mal  { color: var(--theme-color-3, #C02332); }

.t3-aviso {
    margin-top: 18px;
    font-size: 14px;
    line-height: 22px;
    color: var(--theme-color-3, #C02332);
}

/* La variante va debajo del nombre, no pegada a la cantidad. */
.checkout-section .order-info .order-product .single-item h6 .t3-var {
    display: block;
    font-size: 14px;
}

/* El template le puso 85px de ancho, pero `.product-box` es flex y con
   nombres largos la miniatura se encogia a 75. Sus productos de demo tenian
   nombres cortos, asi que nunca se noto. */
.checkout-section .order-info .order-product .single-item .product-box .image-box {
    flex-shrink: 0;
}

.checkout-section .order-info .order-product .single-item .product-box .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-section .order-info .btn-box .theme-btn[disabled] {
    opacity: .55;
    pointer-events: none;
}