/* Tecno Colores para Hummingbird (Bootstrap 5.3).
   Los colores base se aplican pisando las variables --bs-* en el <head>;
   acá van solo las reglas que Bootstrap no resuelve con variables. */

/* Botones principales */
html .btn-primary{
  --bs-btn-bg:var(--tc-primary);
  --bs-btn-border-color:var(--tc-primary);
  --bs-btn-hover-bg:var(--tc-primary-hover);
  --bs-btn-hover-border-color:var(--tc-primary-hover);
  --bs-btn-active-bg:var(--tc-primary-hover);
  --bs-btn-active-border-color:var(--tc-primary-hover);
  --bs-btn-disabled-bg:var(--tc-primary);
  --bs-btn-disabled-border-color:var(--tc-primary);
  --bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;
  background-image:var(--tc-btn-image,none);
}
html .btn-primary:hover,html .btn-primary:focus,html .btn-primary:active{background-image:none;}
html .btn-outline-primary{
  --bs-btn-color:var(--tc-primary);
  --bs-btn-border-color:var(--tc-primary);
  --bs-btn-hover-bg:var(--tc-primary);
  --bs-btn-hover-border-color:var(--tc-primary);
  --bs-btn-active-bg:var(--tc-primary);
  --bs-btn-active-border-color:var(--tc-primary);
}

/* Encabezado y menú */
html .header-top,html .header-bottom{background:var(--tc-header-bg);color:var(--tc-header-text);}
html .header-top a,html .header-bottom a,html .header-bottom .menu__link,html .header-block__action-btn{color:var(--tc-header-text);}
html .header-top a:hover,html .header-bottom a:hover,html .header-bottom .menu__link:hover,html .header-block__action-btn:hover{color:var(--tc-accent);}
html .header-block__badge{background:var(--tc-accent);color:#fff;}

/* Precios y etiquetas */
html .product-miniature__price,html .product__price{color:var(--tc-price,#e30613);}
html .product-flags .badge:not(.discount){background-color:var(--tc-accent);border-color:var(--tc-accent);color:#fff;}
html .product-flags .badge.discount{border-color:var(--tc-accent);color:var(--tc-accent);}

/* Pie de página */
html .footer__main{background:var(--tc-footer-bg);color:var(--tc-footer-text);}
html .footer__main a,html .footer__main .footer-block__title{color:var(--tc-footer-text);}
html .footer__main a:hover{color:var(--tc-accent);}

/* Barra de anuncio (dentro de .header-banner) */
.tc-bar{background:var(--tc-bar-bg,#111827);color:var(--tc-bar-color,#fff);text-align:center;padding:.5rem 1rem;font-size:.875rem;line-height:1.4;}
.tc-bar a,.tc-bar span{color:var(--tc-bar-color,#fff);text-decoration:none;}
.tc-bar a:hover{text-decoration:underline;color:var(--tc-bar-color,#fff);}

/* Botón de WhatsApp */
.tc-wa{position:fixed;bottom:20px;z-index:1040;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s;}
.tc-wa:hover{transform:scale(1.08);}
.tc-wa--right{right:20px;}
.tc-wa--left{left:20px;}

/* Productos por fila (escritorio): opción del módulo */
@media (min-width:992px){
  html .layout-full-width .products,
  html .layout-left-column .products,
  html .layout-right-column .products{grid-template-columns:repeat(var(--tc-cols,4),minmax(0,1fr));}
}


/* ------------------------------------------------------------------ */
/* 1.6.0 - Cantidad: botones y campo siempre en una sola fila (celular) */
/* El campo se deformaba (− arriba, número en medio, + abajo).          */
/* ------------------------------------------------------------------ */
@media (max-width:991.98px){
  html .product-miniature :is(div,span):has(> input[name="qty"]),
  html .product-miniature :is(div,span):has(> input[type="number"]),
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group),
  html :is(.quantity-button,.js-quantity-button){
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:stretch !important;justify-content:center;gap:0;width:100%;
  }
  html .product-miniature :is(div,span):has(> input[name="qty"]) > :is(button,.btn,[class*="btn"]),
  html .product-miniature :is(div,span):has(> input[type="number"]) > :is(button,.btn,[class*="btn"]),
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group) > :is(button,.btn,[class*="btn"]),
  html :is(.quantity-button,.js-quantity-button) > :is(button,.btn,[class*="btn"]){
    flex:0 0 38px !important;width:38px !important;min-width:38px;height:38px !important;min-height:38px !important;
    margin:0 !important;padding:0 !important;display:inline-flex !important;align-items:center;justify-content:center;
  }
  html .product-miniature :is(div,span):has(> input[name="qty"]) > input,
  html .product-miniature :is(div,span):has(> input[type="number"]) > input,
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group) > input,
  html :is(.quantity-button,.js-quantity-button) > input{
    flex:1 1 auto !important;width:auto !important;min-width:0 !important;height:38px !important;
    margin:0 !important;padding:0 .25rem !important;text-align:center;-moz-appearance:textfield;appearance:textfield;
  }
  html .product-miniature input[type="number"]::-webkit-outer-spin-button,
  html .product-miniature input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
}

/* ------------------------------------------------------------------ */
/* 1.6.0 - Página de producto: recuadro marca / EAN / referencia        */
/* ------------------------------------------------------------------ */
.tc-pbox{margin:0 0 1.6rem;padding:.55rem .85rem;border:1px solid #e5e7eb;border-radius:var(--bs-border-radius,8px);background:#f9fafb;font-size:.875rem;line-height:1.35;}
.tc-pbox__row{display:flex;gap:.75rem;padding:.2rem 0;}
.tc-pbox__row + .tc-pbox__row{border-top:1px solid #eceef1;}
.tc-pbox__label{flex:0 0 7rem;font-weight:600;color:#374151;}
.tc-pbox__value{flex:1 1 auto;min-width:0;word-break:break-word;color:var(--bs-body-color,#374151);}

/* 1.6.0 - Sello de compra segura (debajo de cantidad y carrito) */
.tc-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;align-items:center;text-align:center;margin:.9rem 0 0;padding:.65rem .85rem;border:1px solid #e5e7eb;border-radius:var(--bs-border-radius,8px);background:#fff;}
.tc-trust__item{display:flex;align-items:center;justify-content:center;gap:.4rem;flex:0 1 auto;min-width:0;font-size:.8rem;font-weight:600;color:#374151;}
.tc-trust__item svg{flex:0 0 auto;color:#16a34a;}
.tc-trust__img{display:block;max-width:100%;height:auto;margin:0 auto;}
.tc-trust:has(> .tc-trust__img){border:0;padding:0;background:transparent;}

/* 1.9.0 - Campos adicionales (debajo de la imagen del producto) */
.tc-extras{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0 0;}
.tc-x{--x-c:var(--tc-primary,#0a8bd6);--x-bg:#fff;--x-bd:#e5e7eb;position:relative;border:1px solid var(--x-bd);border-radius:calc(var(--bs-border-radius,8px) + 2px);background:var(--x-bg);box-shadow:0 1px 2px rgba(16,24,40,.05);overflow:hidden;font-size:.875rem;line-height:1.5;color:var(--bs-body-color,#374151);}
.tc-x::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--x-c);}
.tc-x--info{--x-c:#2563eb;--x-bg:#eff6ff;--x-bd:#bfdbfe;}
.tc-x--success{--x-c:#16a34a;--x-bg:#f0fdf4;--x-bd:#bbf7d0;}
.tc-x--warning{--x-c:#d97706;--x-bg:#fffbeb;--x-bd:#fde68a;}
.tc-x--danger{--x-c:#dc2626;--x-bg:#fef2f2;--x-bd:#fecaca;}
.tc-x--plain{--x-bd:transparent;--x-bg:transparent;box-shadow:none;}
.tc-x--plain::before{display:none;}
.tc-x--plain .tc-x__head,.tc-x--plain .tc-x__body{padding-left:0;padding-right:0;}

.tc-x__head{display:flex;align-items:center;gap:.6rem;margin:0;padding:.7rem .95rem .7rem 1.1rem;list-style:none;}
.tc-x__head::-webkit-details-marker{display:none;}
.tc-x__ico{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;color:var(--x-c);}
.tc-x__ico::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.12;}
.tc-x__ico svg{position:relative;width:1.05rem;height:1.05rem;}
.tc-x__title{flex:1 1 auto;min-width:0;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:#111827;}
.tc-x__body{padding:0 .95rem .85rem 1.1rem;}
.tc-x__head + .tc-x__body{padding-top:.75rem;border-top:1px solid rgba(17,24,39,.07);}
.tc-x--plain .tc-x__head + .tc-x__body{border-top:0;padding-top:0;}
.tc-x--fold > .tc-x__head{cursor:pointer;user-select:none;}
.tc-x--fold > .tc-x__head:hover .tc-x__title{color:var(--x-c);}
.tc-x__chev{flex:0 0 auto;margin-left:auto;color:#6b7280;transition:transform .2s;}
.tc-x--fold[open] > .tc-x__head .tc-x__chev{transform:rotate(180deg);}

/* Contenido */
.tc-x__body > :first-child{margin-top:0;}
.tc-x__body > :last-child{margin-bottom:0;}
.tc-x__body p{margin:0 0 .55rem;}
.tc-x__body a{color:var(--x-c);text-decoration:underline;text-underline-offset:2px;}
.tc-x-sub{margin:.9rem 0 .35rem;font-size:.8rem;font-weight:700;color:#111827;}
.tc-x__body > .tc-x-sub:first-child{margin-top:0;}
.tc-x-money{font-weight:700;color:var(--x-c);white-space:nowrap;}
.tc-x-note{margin:.55rem 0 0;font-size:.78rem;line-height:1.4;color:#6b7280;}
.tc-x-note::before{content:"* ";font-weight:700;}
.tc-ico{display:inline-flex;vertical-align:-.2em;margin-right:.25rem;color:var(--x-c);}
.tc-ico svg{width:1.1em;height:1.1em;}

/* Filas de precio */
.tc-x-rows{margin:0 0 .5rem;padding:.1rem .75rem;border-radius:8px;background:rgba(17,24,39,.035);}
.tc-x-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;}
.tc-x-row + .tc-x-row{border-top:1px dashed rgba(17,24,39,.16);}
.tc-x-row__l{flex:1 1 auto;min-width:0;}
.tc-x-row__v{flex:0 0 auto;font-weight:700;color:var(--x-c);white-space:nowrap;}
.tc-x-row__v .tc-x-money{font-weight:inherit;}

/* Lista con tildes */
.tc-x-list{list-style:none;margin:0 0 .5rem;padding:0;}
.tc-x-list li{position:relative;padding:.2rem 0 .2rem 1.5rem;}
.tc-x-list li::before{content:"";position:absolute;left:0;top:.5rem;width:1rem;height:1rem;background:var(--x-c);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;}

/* Tabla */
.tc-x-table{width:100%;margin:0 0 .5rem;border-collapse:collapse;font-size:.84rem;}
.tc-x-table th{padding:.4rem .5rem;text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7280;border-bottom:2px solid rgba(17,24,39,.1);}
.tc-x-table td{padding:.5rem;border-bottom:1px solid rgba(17,24,39,.08);}
.tc-x-table tr:last-child td{border-bottom:0;}
.tc-x-table th:last-child,.tc-x-table td:last-child{text-align:right;font-weight:600;white-space:nowrap;}

/* Pasos */
.tc-x-steps{list-style:none;counter-reset:tcs;margin:0 0 .5rem;padding:0;}
.tc-x-steps li{counter-increment:tcs;position:relative;padding:.25rem 0 .25rem 2rem;}
.tc-x-steps li::before{content:counter(tcs);position:absolute;left:0;top:.25rem;display:flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--x-c);color:#fff;font-size:.72rem;font-weight:700;}

/* Cajitas */
.tc-x-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.5rem;margin:0 0 .5rem;}
.tc-x-box{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .7rem;border-radius:8px;background:rgba(17,24,39,.045);}
.tc-x-box strong{font-size:.95rem;color:var(--x-c);}
.tc-x-box span{font-size:.75rem;color:#6b7280;}

/* Etiqueta y aviso */
.tc-x-chip{display:inline-block;margin:0 .25rem .25rem 0;padding:.15rem .6rem;border-radius:999px;background:var(--x-c);color:#fff;font-size:.72rem;font-weight:600;line-height:1.5;}
.tc-x-callout{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .5rem;padding:.6rem .75rem;border-radius:8px;background:rgba(17,24,39,.045);}
.tc-x-callout .tc-ico{margin-top:.15rem;}


/* 1.10.3 - Celular: todas las tarjetas de producto (listados y carruseles) con el mismo formato:
   cantidad (− 1 +) a la izquierda y botón de carrito SOLO con el ícono a la derecha, en una sola fila.
   El JS marca cada tarjeta con .tc-mrow (contenedor), .tc-mq (cantidad), .tc-mb (botón) y .tc-mbtn (el botón). */
@media (max-width:991.98px){
  html .tc-mrow{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:stretch !important;gap:.5rem !important;width:100% !important;max-width:100% !important;}
  html .tc-mrow > :not(.tc-mq):not(.tc-mb){flex:0 0 100% !important;}
  html .tc-mq,
  html .tc-mq :is(div,span):has(> input[name="qty"]),
  html .tc-mq :is(.quantity-button,.js-quantity-button,.input-group){
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:stretch !important;justify-content:center;
    width:100% !important;max-width:100% !important;margin:0 !important;gap:0;
  }
  html .tc-mq{flex:1 1 0 !important;min-width:0 !important;width:auto !important;}
  html .tc-mq :is(button,.btn,[class*="btn"]){
    flex:0 0 38px !important;width:38px !important;min-width:38px !important;height:46px !important;min-height:46px !important;
    margin:0 !important;padding:0 !important;display:inline-flex !important;visibility:visible !important;opacity:1 !important;
    align-items:center;justify-content:center;
  }
  html .tc-mq input{
    flex:1 1 auto !important;width:auto !important;min-width:0 !important;height:46px !important;margin:0 !important;padding:0 .2rem !important;
    display:block !important;text-align:center;-moz-appearance:textfield;appearance:textfield;
  }
  html .tc-mq input::-webkit-outer-spin-button,html .tc-mq input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  html .tc-mb{display:flex !important;flex:0 0 58px !important;width:58px !important;min-width:58px !important;margin:0 !important;}
  /* Solo ícono: el texto del botón se anula con font-size:0 y el ícono recupera su tamaño */
  html .tc-mbtn{
    display:inline-flex !important;align-items:center;justify-content:center;
    width:100% !important;min-width:0 !important;height:46px !important;min-height:46px !important;margin:0 !important;padding:0 !important;
    font-size:0 !important;line-height:1 !important;gap:0 !important;
  }
  html .tc-mbtn :is(.material-icons,.material-symbols-outlined){font-size:24px !important;width:auto;height:auto;line-height:1;}
  html .tc-mbtn svg{width:22px;height:22px;}
  html .tc-mbtn :is(span:not(.material-icons):not(.material-symbols-outlined),.visually-hidden,.sr-only,.tc-mlabel){display:none !important;}
}

/* 1.10.4 - Pantalla de búsqueda: filas de 5 productos (escritorio) */
@media (min-width:1200px){
  html body#search .products{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (min-width:992px) and (max-width:1199.98px){
  html body#search .products{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* 1.10.6 - Escritorio: la cantidad (− 1 +) de las tarjetas de producto también va siempre en UNA fila.
   Antes solo estaba protegida en celular y en pantallas grandes se apilaba (− arriba, 1 en medio, + abajo). */
@media (min-width:992px){
  html .tc-mq,
  html .tc-mq :is(div,span):has(> input[name="qty"]),
  html .tc-mq :is(.quantity-button,.js-quantity-button,.input-group),
  html .product-miniature :is(div,span):has(> input[name="qty"]),
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group){
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:stretch !important;justify-content:center;gap:0;width:100%;max-width:100%;
  }
  html .tc-mq :is(button,.btn,[class*="btn"]),
  html .product-miniature :is(div,span):has(> input[name="qty"]) > :is(button,.btn,[class*="btn"]),
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group) > :is(button,.btn,[class*="btn"]){
    flex:0 0 42px !important;width:42px !important;min-width:42px !important;height:44px !important;min-height:44px !important;
    margin:0 !important;padding:0 !important;display:inline-flex !important;visibility:visible !important;opacity:1 !important;
    align-items:center;justify-content:center;
  }
  html .tc-mq input[name="qty"],
  html .product-miniature :is(div,span):has(> input[name="qty"]) > input,
  html .product-miniature :is(.quantity-button,.js-quantity-button,.input-group) > input{
    flex:1 1 auto !important;width:auto !important;min-width:0 !important;height:44px !important;margin:0 !important;
    padding:0 .25rem !important;display:block !important;text-align:center;-moz-appearance:textfield;appearance:textfield;
  }
  html .tc-mq input::-webkit-outer-spin-button,html .tc-mq input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
}

/* ------------------------------------------------------------------ */
/* 1.10.9 - Ficha de producto: reglas fijas (no dependen del bloque en línea)   */
/* ------------------------------------------------------------------ */
/* Más aire entre el nombre del producto y el recuadro de datos */
html body#product h1:not(.header-bottom__h1){margin-bottom:0 !important;}
html body#product .tc-pbox{margin-top:1.75rem !important;transform:none !important;top:auto !important;}
/* Imagen principal: nunca más de 800 x 800 px, centrada */
html body#product :is(.product__images,.product__carousel,.product-images,.images-container,.js-images-container) img{max-width:800px !important;max-height:800px !important;object-fit:contain;}
html body#product :is(.product__images,.product__carousel,.product-images,.images-container,.js-images-container) img:not([class*="thumb"]):not([class*="Thumb"]){display:block;margin-left:auto !important;margin-right:auto !important;}