ENVÍOS RÁPIDOS
A todo México
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600&display=swap');
/* =========================================================
THE BOXING MODE — HERO
========================================================= */
.tbm-hero,
.tbm-hero *,
.tbm-hero *::before,
.tbm-hero *::after {
box-sizing: border-box;
}
.tbm-hero {
--tbm-white: #ffffff;
--tbm-off: #f2efea;
--tbm-page: clamp(24px, 4vw, 64px);
position: relative;
width: 100%;
height: 460px;
min-height: 0 !important;
max-height: none !important;
margin: 0;
padding: 0;
overflow: hidden;
background: transparent;
color: var(--tbm-white);
font-family: "Montserrat", Arial, sans-serif;
}
/* =========================================================
CONTENIDO
========================================================= */
.tbm-hero__content {
position: absolute;
left: var(--tbm-page);
top: 50%;
transform: translateY(-50%);
width: min(650px, 55vw);
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding: 0;
z-index: 2;
}
/* =========================================================
KICKER
========================================================= */
.tbm-hero__kicker {
margin: 0 0 14px;
padding: 0;
font-family: "Montserrat", Arial, sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .20em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
}
/* =========================================================
TÍTULO
========================================================= */
.tbm-hero__title {
margin: 0 !important;
padding: 0 !important;
font-family: "Anton", Impact, sans-serif !important;
font-size: clamp(64px, 6.7vw, 112px) !important;
font-weight: 400 !important;
line-height: .98 !important;
letter-spacing: -.012em !important;
text-transform: uppercase;
color: #ffffff !important;
}
.tbm-hero__title > span {
display: block;
margin: 0;
padding: 0;
line-height: .98 !important;
}
.tbm-hero__title > span + span {
margin-top: .025em;
}
/* =========================================================
TAGLINE
========================================================= */
.tbm-hero__tagline {
margin: 16px 0 0;
padding: 0;
font-family: "Montserrat", Arial, sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .14em;
text-transform: uppercase;
color: #ffffff;
}
/* =========================================================
BOTONES
========================================================= */
.tbm-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.tbm-hero__button {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 28px;
border: 1px solid transparent;
font-family: "Montserrat", Arial, sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none !important;
cursor: pointer;
transition:
background .2s ease,
color .2s ease,
border-color .2s ease,
transform .2s ease;
}
.tbm-hero__button:hover {
transform: translateY(-1px);
}
/* BOTÓN PRINCIPAL */
.tbm-hero__button--primary {
background: var(--tbm-off);
color: #0d0d0d !important;
}
.tbm-hero__button--primary:hover {
background: #ffffff;
color: #000000 !important;
}
/* BOTÓN SECUNDARIO */
.tbm-hero__button--outline {
border-color: rgba(255,255,255,.80);
background: transparent;
color: #ffffff !important;
}
.tbm-hero__button--outline:hover {
background: #ffffff;
border-color: #ffffff;
color: #0d0d0d !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.tbm-hero {
height: 500px;
}
.tbm-hero__content {
width: 65vw;
}
.tbm-hero__title {
font-size: clamp(60px, 8vw, 92px) !important;
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 767px) {
.tbm-hero {
--tbm-page: 30px;
height: 620px;
min-height: 0 !important;
max-height: none !important;
}
.tbm-hero__content {
left: var(--tbm-page);
right: var(--tbm-page);
top: 57%;
bottom: auto;
transform: translateY(-50%);
width: auto;
}
.tbm-hero__kicker {
margin-bottom: 12px;
font-size: 8px;
letter-spacing: .16em;
}
.tbm-hero__title {
font-size: clamp(52px, 16vw, 78px) !important;
line-height: 1 !important;
}
.tbm-hero__title > span {
line-height: 1 !important;
}
.tbm-hero__title > span + span {
margin-top: .03em;
}
.tbm-hero__tagline {
margin-top: 16px;
font-size: 9px;
letter-spacing: .11em;
}
.tbm-hero__actions {
flex-direction: column;
width: 100%;
gap: 8px;
margin-top: 20px;
}
.tbm-hero__button {
width: 100%;
min-height: 46px;
}
}
/* =========================================================
MÓVIL PEQUEÑO
========================================================= */
@media (max-width: 390px) {
.tbm-hero {
--tbm-page: 28px;
height: 580px;
}
.tbm-hero__content {
top: 58%;
}
.tbm-hero__title {
font-size: clamp(46px, 15vw, 62px) !important;
}
.tbm-hero__kicker {
font-size: 7px;
}
}
THE BOXING MODE CLOTHING CO.
ENTRA EN THE MODE.
NO ES SUERTE. ES TRABAJO.
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600&display=swap');
/* =========================================================
THE BOXING MODE — BENEFITS BAR
========================================================= */
.tbm-benefits,
.tbm-benefits *,
.tbm-benefits *::before,
.tbm-benefits *::after {
box-sizing: border-box;
}
.tbm-benefits {
--tbm-black: #0d0d0d;
--tbm-grey: #5d5d58;
--tbm-off: #f2efea;
--tbm-line: rgba(13,13,13,.14);
--tbm-gold: #c9a84c;
width: 100%;
margin: 0;
padding: 0 clamp(20px, 4vw, 64px);
background: var(--tbm-off);
color: var(--tbm-black);
border-top: 1px solid var(--tbm-line);
border-bottom: 1px solid var(--tbm-line);
font-family: "Montserrat", Arial, sans-serif;
overflow: hidden;
}
/* =========================================================
GRID
========================================================= */
.tbm-benefits__grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
}
/* =========================================================
ITEM
========================================================= */
.tbm-benefits__item {
position: relative;
min-height: 104px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 22px 26px;
border-right: 1px solid var(--tbm-line);
opacity: 0;
transform: translateY(10px);
transition:
opacity .45s ease,
transform .45s ease,
background .2s ease;
}
.tbm-benefits__item:last-child {
border-right: 0;
}
.tbm-benefits.is-visible .tbm-benefits__item {
opacity: 1;
transform: translateY(0);
}
.tbm-benefits.is-visible .tbm-benefits__item:nth-child(1) {
transition-delay: 0s;
}
.tbm-benefits.is-visible .tbm-benefits__item:nth-child(2) {
transition-delay: .07s;
}
.tbm-benefits.is-visible .tbm-benefits__item:nth-child(3) {
transition-delay: .14s;
}
.tbm-benefits.is-visible .tbm-benefits__item:nth-child(4) {
transition-delay: .21s;
}
.tbm-benefits__item:hover {
background: rgba(13,13,13,.035);
}
/* =========================================================
ICON
========================================================= */
.tbm-benefits__icon {
flex: 0 0 auto;
width: 42px;
height: 42px;
display: grid;
place-items: center;
color: var(--tbm-black);
}
.tbm-benefits__icon i {
font-size: 28px;
}
/* =========================================================
COPY
========================================================= */
.tbm-benefits__copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.tbm-benefits__title {
margin: 0;
padding: 0;
font-family: "Montserrat", Arial, sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--tbm-black);
}
.tbm-benefits__text {
margin: 0;
padding: 0;
font-size: 10px;
font-weight: 400;
line-height: 1.45;
color: var(--tbm-grey);
}
/* =========================================================
SMALL GOLD DETAIL
========================================================= */
.tbm-benefits__item::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: var(--tbm-gold);
transform: translateX(-50%);
transition: width .25s ease;
}
.tbm-benefits__item:hover::after {
width: 42px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.tbm-benefits {
padding: 0 20px;
}
.tbm-benefits__grid {
grid-template-columns: repeat(2, 1fr);
}
.tbm-benefits__item {
min-height: 100px;
justify-content: flex-start;
border-bottom: 1px solid var(--tbm-line);
}
.tbm-benefits__item:nth-child(2) {
border-right: 0;
}
.tbm-benefits__item:nth-child(3),
.tbm-benefits__item:nth-child(4) {
border-bottom: 0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.tbm-benefits {
padding: 0 14px;
}
.tbm-benefits__grid {
grid-template-columns: repeat(2, 1fr);
}
.tbm-benefits__item {
min-height: 92px;
gap: 10px;
padding: 15px 10px;
justify-content: flex-start;
}
.tbm-benefits__icon {
width: 30px;
height: 30px;
}
.tbm-benefits__icon i {
font-size: 22px;
}
.tbm-benefits__title {
font-size: 8px;
letter-spacing: .04em;
}
.tbm-benefits__text {
font-size: 8px;
line-height: 1.35;
}
.tbm-benefits__item:hover::after {
width: 28px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
.tbm-benefits {
padding: 0 8px;
}
.tbm-benefits__item {
padding: 14px 7px;
gap: 7px;
}
.tbm-benefits__icon {
width: 26px;
}
.tbm-benefits__icon i {
font-size: 19px;
}
.tbm-benefits__title {
font-size: 7px;
}
.tbm-benefits__text {
font-size: 7px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.tbm-benefits__item {
opacity: 1;
transform: none;
transition: none;
}
}
(function () {
const section =
document.getElementById('tbmBenefits');
if (!section) {
return;
}
/* Si el navegador no soporta IntersectionObserver,
mostramos directamente la sección */
if (!('IntersectionObserver' in window)) {
section.classList.add('is-visible');
return;
}
const observer =
new IntersectionObserver(
function (entries) {
entries.forEach(
function (entry) {
if (entry.isIntersecting) {
section.classList.add(
'is-visible'
);
observer.unobserve(
section
);
}
}
);
},
{
threshold: 0.18
}
);
observer.observe(section);
})();
PAGOS SEGUROS
Compra protegida
CAMBIOS FÁCILES
30 días naturales
CALIDAD PREMIUM
Hecho para rendir
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600&display=swap');
/* =========================================================
THE BOXING MODE — COLECCIONES DESTACADAS
========================================================= */
.tbm-collections,
.tbm-collections *,
.tbm-collections *::before,
.tbm-collections *::after {
box-sizing: border-box;
}
.tbm-collections {
--tbm-black: #0d0d0d;
--tbm-off: #f2efea;
--tbm-white: #ffffff;
--tbm-grey: #686863;
--tbm-gold: #c9a84c;
--tbm-line: rgba(13,13,13,.13);
--tbm-page: clamp(24px, 4vw, 64px);
width: 100%;
margin: 0;
padding:
clamp(54px, 6vw, 88px)
var(--tbm-page);
background: var(--tbm-off);
color: var(--tbm-black);
font-family: "Montserrat", Arial, sans-serif;
}
/* =========================================================
HEADER
========================================================= */
.tbm-collections__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin-bottom: 24px;
}
.tbm-collections__heading {
display: flex;
flex-direction: column;
gap: 7px;
}
.tbm-collections__kicker {
margin: 0;
font-size: 9px;
font-weight: 600;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--tbm-grey);
}
.tbm-collections__title {
margin: 0;
font-family: "Anton", Impact, sans-serif !important;
font-size: clamp(32px, 3.8vw, 58px);
font-weight: 400;
line-height: 1;
letter-spacing: -.01em;
text-transform: uppercase;
}
.tbm-collections__viewall {
display: inline-flex;
align-items: center;
gap: 9px;
padding-bottom: 5px;
border-bottom: 1px solid var(--tbm-black);
color: var(--tbm-black) !important;
font-size: 9px;
font-weight: 600;
letter-spacing: .08em;
text-decoration: none !important;
text-transform: uppercase;
}
.tbm-collections__viewall span {
display: inline-block;
transition: transform .2s ease;
}
.tbm-collections__viewall:hover span {
transform: translateX(4px);
}
/* =========================================================
GRID
========================================================= */
.tbm-collections__grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 12px;
}
/* =========================================================
CARD
========================================================= */
.tbm-collection-card {
position: relative;
display: block;
height: clamp(360px, 35vw, 520px);
overflow: hidden;
background: #111;
color: #ffffff !important;
text-decoration: none !important;
opacity: 0;
transform: translateY(18px);
transition:
opacity .6s ease,
transform .6s ease;
}
.tbm-collections.is-visible
.tbm-collection-card {
opacity: 1;
transform: translateY(0);
}
.tbm-collections.is-visible
.tbm-collection-card:nth-child(1) {
transition-delay: 0s;
}
.tbm-collections.is-visible
.tbm-collection-card:nth-child(2) {
transition-delay: .08s;
}
.tbm-collections.is-visible
.tbm-collection-card:nth-child(3) {
transition-delay: .16s;
}
.tbm-collections.is-visible
.tbm-collection-card:nth-child(4) {
transition-delay: .24s;
}
/* =========================================================
IMAGEN
========================================================= */
.tbm-collection-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.001);
transition:
transform .55s ease,
filter .4s ease;
}
.tbm-collection-card:hover
.tbm-collection-card__image {
transform: scale(1.045);
filter: contrast(1.04);
}
/* =========================================================
GRADIENTE INFERIOR
========================================================= */
.tbm-collection-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
0deg,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.30) 34%,
transparent 64%
);
}
/* =========================================================
NUMERACIÓN
========================================================= */
.tbm-collection-card__number {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
font-size: 9px;
font-weight: 600;
letter-spacing: .12em;
color: rgba(255,255,255,.72);
}
/* =========================================================
CONTENIDO DE LA TARJETA
========================================================= */
.tbm-collection-card__content {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
z-index: 2;
}
.tbm-collection-card__title {
margin: 0;
font-family: "Anton", Impact, sans-serif !important;
font-size: clamp(34px, 3.4vw, 54px);
font-weight: 400;
line-height: .95;
letter-spacing: -.01em;
text-transform: uppercase;
color: #ffffff;
}
.tbm-collection-card__label {
display: block;
margin-top: 7px;
font-size: 8px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.64);
}
.tbm-collection-card__action {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 15px;
padding-bottom: 4px;
border-bottom:
1px solid rgba(255,255,255,.8);
font-size: 8px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.tbm-collection-card__arrow {
display: inline-block;
transition: transform .2s ease;
}
.tbm-collection-card:hover
.tbm-collection-card__arrow {
transform: translateX(5px);
}
/* =========================================================
DETALLE DORADO
========================================================= */
.tbm-collection-card__accent {
position: absolute;
right: 0;
top: 0;
width: 2px;
height: 0;
z-index: 3;
background: var(--tbm-gold);
transition: height .35s ease;
}
.tbm-collection-card:hover
.tbm-collection-card__accent {
height: 100%;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.tbm-collections__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.tbm-collection-card {
height: 480px;
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 767px) {
.tbm-collections {
--tbm-page: 18px;
padding:
48px 0
50px var(--tbm-page);
}
.tbm-collections__header {
padding-right: var(--tbm-page);
margin-bottom: 20px;
}
.tbm-collections__kicker {
font-size: 7px;
}
.tbm-collections__title {
font-size: 32px;
}
.tbm-collections__viewall {
font-size: 7px;
}
.tbm-collections__grid {
display: flex;
gap: 10px;
overflow-x: auto;
padding-right: var(--tbm-page);
padding-bottom: 6px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tbm-collections__grid::-webkit-scrollbar {
display: none;
}
.tbm-collection-card {
flex:
0 0
min(78vw, 330px);
height: 440px;
scroll-snap-align: start;
}
.tbm-collection-card__title {
font-size: 42px;
}
.tbm-collection-card__number {
top: 17px;
left: 17px;
}
.tbm-collection-card__content {
left: 18px;
right: 18px;
bottom: 19px;
}
}
/* =========================================================
MÓVIL PEQUEÑO
========================================================= */
@media (max-width: 390px) {
.tbm-collection-card {
flex-basis: 82vw;
height: 420px;
}
.tbm-collection-card__title {
font-size: 38px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.tbm-collection-card,
.tbm-collection-card__image,
.tbm-collection-card__accent {
transition: none !important;
}
.tbm-collection-card {
opacity: 1;
transform: none;
}
}
VER TODO
→
(function () {
const section =
document.getElementById('colecciones');
if (!section) {
return;
}
/* Fallback para navegadores antiguos */
if (!('IntersectionObserver' in window)) {
section.classList.add('is-visible');
return;
}
/* Animación de entrada */
const observer =
new IntersectionObserver(
function (entries) {
entries.forEach(
function (entry) {
if (entry.isIntersecting) {
section.classList.add(
'is-visible'
);
observer.unobserve(
section
);
}
}
);
},
{
threshold: 0.10
}
);
observer.observe(section);
})();
THE BOXING MODE / COLLECTIONS
COLECCIONES DESTACADAS
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600&display=swap');
/* =========================================================
THE BOXING MODE — PRODUCTOS DESTACADOS
WooCommerce + Elementor Free
========================================================= */
.tbm-featured-products,
.tbm-featured-products *,
.tbm-featured-products *::before,
.tbm-featured-products *::after {
box-sizing: border-box;
}
.tbm-featured-products {
--tbm-black: #0d0d0d;
--tbm-off: #f2efea;
--tbm-white: #ffffff;
--tbm-grey: #686863;
--tbm-gold: #c9a84c;
--tbm-line: rgba(13, 13, 13, .13);
--tbm-page: clamp(24px, 4vw, 64px);
width: 100%;
margin: 0 !important;
padding:
clamp(54px, 6vw, 88px)
var(--tbm-page) !important;
background: var(--tbm-off);
color: var(--tbm-black);
font-family: "Montserrat", Arial, sans-serif;
}
/* =========================================================
ELEMENTOR
Quitar espacios internos que Elementor pueda añadir
========================================================= */
.tbm-featured-products > .e-con-inner {
max-width: none !important;
}
.tbm-featured-products .elementor-widget {
margin-bottom: 0 !important;
}
.tbm-featured-products .elementor-widget-container {
width: 100%;
}
/* =========================================================
HEADER
========================================================= */
.tbm-featured-products__header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin: 0 0 25px;
padding: 0;
}
.tbm-featured-products__heading {
display: flex;
flex-direction: column;
gap: 7px;
}
/* KICKER */
.tbm-featured-products__kicker {
margin: 0;
padding: 0;
font-family: "Montserrat", Arial, sans-serif;
font-size: 9px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--tbm-grey);
}
/* TITLE */
.tbm-featured-products__title {
margin: 0 !important;
padding: 0 !important;
font-family: "Anton", Impact, sans-serif !important;
font-size: clamp(32px, 3.8vw, 58px) !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: -.01em !important;
text-transform: uppercase;
color: var(--tbm-black) !important;
}
/* VER TODO */
.tbm-featured-products__all {
display: inline-flex;
align-items: center;
gap: 9px;
padding-bottom: 5px;
border-bottom: 1px solid var(--tbm-black);
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none !important;
color: var(--tbm-black) !important;
}
.tbm-featured-products__all span {
display: inline-block;
transition: transform .2s ease;
}
.tbm-featured-products__all:hover span {
transform: translateX(4px);
}
/* =========================================================
WOOCOMMERCE
Eliminar estilos tradicionales de columnas/floats
========================================================= */
.tbm-featured-products .woocommerce {
width: 100%;
margin: 0;
padding: 0;
}
.tbm-featured-products .woocommerce ul.products,
.tbm-featured-products .woocommerce-page ul.products {
width: 100% !important;
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: clamp(14px, 1.6vw, 26px) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
clear: both;
}
/* =========================================================
PRODUCT CARD
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product {
position: relative !important;
width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
color: var(--tbm-black);
min-width: 0;
transition: transform .25s ease;
}
.tbm-featured-products
.woocommerce ul.products
li.product:hover {
transform: translateY(-3px);
}
/* =========================================================
PRODUCT LINK
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product
a.woocommerce-LoopProduct-link {
display: block;
margin: 0;
padding: 0;
color: inherit !important;
text-decoration: none !important;
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product
a img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5;
margin: 0 0 14px !important;
padding: 0 !important;
object-fit: cover;
object-position: center;
background: #e8e3dc;
border: 0;
box-shadow: none !important;
transition:
transform .3s ease,
filter .3s ease;
}
.tbm-featured-products
.woocommerce ul.products
li.product:hover
a img {
transform: scale(1.015);
filter: contrast(1.015);
}
/* =========================================================
PRODUCT TITLE
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product
.woocommerce-loop-product__title {
margin: 0 !important;
padding: 0 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: .025em !important;
text-transform: uppercase;
color: var(--tbm-black) !important;
}
/* =========================================================
PRICE
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product
.price {
display: flex !important;
align-items: center;
gap: 8px;
margin: 7px 0 0 !important;
padding: 0 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: var(--tbm-black) !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.price del {
opacity: .42;
color: var(--tbm-grey) !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.price ins {
background: transparent !important;
text-decoration: none !important;
color: var(--tbm-black) !important;
}
/* =========================================================
SALE BADGE
========================================================= */
.tbm-featured-products
.woocommerce span.onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
z-index: 5;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 7px 9px !important;
border-radius: 0 !important;
background: var(--tbm-off) !important;
color: var(--tbm-black) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 8px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
}
/* =========================================================
STAR RATING
No mostrar en cards del storefront
========================================================= */
.tbm-featured-products
.woocommerce
.star-rating {
display: none !important;
}
/* =========================================================
ADD TO CART / SELECT OPTIONS
========================================================= */
.tbm-featured-products
.woocommerce ul.products
li.product
.button {
width: 100% !important;
min-height: 44px;
display: flex !important;
align-items: center;
justify-content: center;
margin: 15px 0 0 !important;
padding: 0 16px !important;
border: 1px solid var(--tbm-black) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--tbm-black) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .07em !important;
text-align: center;
text-transform: uppercase;
transition:
background .2s ease,
color .2s ease;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.button:hover {
background: var(--tbm-black) !important;
color: #ffffff !important;
}
/* =========================================================
AJAX ADD TO CART
========================================================= */
.tbm-featured-products
.woocommerce
a.button.loading {
opacity: .55 !important;
}
.tbm-featured-products
.woocommerce
a.button.added {
background: var(--tbm-black) !important;
color: #ffffff !important;
}
/* VER CARRITO */
.tbm-featured-products
.woocommerce
a.added_to_cart {
display: inline-block;
margin-top: 9px;
padding-bottom: 3px;
border-bottom: 1px solid var(--tbm-black);
font-family: "Montserrat", Arial, sans-serif;
font-size: 8px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
text-decoration: none !important;
color: var(--tbm-black) !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.tbm-featured-products
.woocommerce ul.products {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 30px 16px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.tbm-featured-products {
--tbm-page: 16px;
padding:
48px
var(--tbm-page) !important;
}
/* HEADER */
.tbm-featured-products__header {
align-items: flex-end;
gap: 15px;
margin-bottom: 20px;
}
.tbm-featured-products__kicker {
font-size: 7px;
letter-spacing: .15em;
}
.tbm-featured-products__title {
font-size: 31px !important;
}
.tbm-featured-products__all {
flex-shrink: 0;
font-size: 7px;
}
/* PRODUCTS */
.tbm-featured-products
.woocommerce ul.products {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 26px 9px !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
a img {
margin-bottom: 10px !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.woocommerce-loop-product__title {
font-size: 9px !important;
line-height: 1.35 !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.price {
margin-top: 5px !important;
font-size: 9px !important;
}
.tbm-featured-products
.woocommerce ul.products
li.product
.button {
min-height: 40px;
margin-top: 11px !important;
padding: 0 7px !important;
font-size: 7px !important;
letter-spacing: .04em !important;
}
.tbm-featured-products
.woocommerce span.onsale {
top: 7px !important;
left: 7px !important;
padding: 6px 7px !important;
font-size: 7px !important;
}
}
/* =========================================================
MOBILE PEQUEÑO
========================================================= */
@media (max-width: 390px) {
.tbm-featured-products {
--tbm-page: 12px;
}
.tbm-featured-products__title {
font-size: 28px !important;
}
.tbm-featured-products
.woocommerce ul.products {
gap:
24px
8px !important;
}
}
VER TODO
→
THE BOXING MODE / STORE
PRODUCTOS DESTACADOS
-
-
-
SALE
Augue nisi non neque
El precio original era: $86.00.$79.00El precio actual es: $79.00. AÑADIR A LA BOLSA -