/**
* Facundo Tulin — custom styles.
* Overrides sobre Bootstrap 5 vía CSS custom properties + componentes propios.
*/
/* --- Tokens / Brand --- */
:root {
--ft-yellow: #f1c40f;
--ft-yellow-dark: #d4ac0d;
--ft-black: #0a0809;
--ft-gray-900: #212121;
--ft-gray-100: #f5f5f5;
/* Overrides BS5 (sólo impactan componentes que usen --bs-* custom props) */
--bs-primary: var(--ft-yellow);
--bs-primary-rgb: 241, 196, 15;
--bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--bs-body-color: var(--ft-gray-900);
--bs-link-color: var(--ft-black);
--bs-link-hover-color: var(--ft-yellow-dark);
}
body {
font-family: var(--bs-body-font-family);
font-feature-settings: "cv11", "ss01";
}
/* Primary button en amarillo con texto negro */
.btn-primary {
--bs-btn-bg: var(--ft-yellow);
--bs-btn-border-color: var(--ft-yellow);
--bs-btn-hover-bg: var(--ft-yellow-dark);
--bs-btn-hover-border-color: var(--ft-yellow-dark);
--bs-btn-active-bg: var(--ft-yellow-dark);
--bs-btn-active-border-color: var(--ft-yellow-dark);
--bs-btn-color: var(--ft-black);
--bs-btn-hover-color: var(--ft-black);
--bs-btn-active-color: var(--ft-black);
font-weight: 600;
}
/* --- Section primitives --- */
.ft-section {
padding: clamp(3rem, 6vw, 5rem) 0;
}
.ft-section__title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
color: var(--ft-black);
}
.ft-section__subtitle {
color: #6c757d;
margin-bottom: 0;
font-size: 1rem;
}
/* === 1. Hero Slider ============================================= */
/* === Hero editorial (sin bg images, full tipografía + apliques) === */
.ft-hero {
position: relative;
overflow: hidden;
color: #fff;
--ft-hero-duration: 7s;
background:
radial-gradient(ellipse 80% 60% at 80% 0%, rgba(241, 196, 15, 0.12) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 20% 100%, rgba(241, 196, 15, 0.08) 0%, transparent 55%),
linear-gradient(135deg, #0a0809 0%, #1a1716 50%, #221e1b 100%);
}
.ft-hero__carousel,
.ft-hero__carousel .carousel-inner {
min-height: clamp(32rem, 72vh, 46rem);
}
/* ---- Apliques decorativos (dots, grid, mesh) ---- */
.ft-hero__deco {
position: absolute;
pointer-events: none;
z-index: 1;
}
.ft-hero__deco--mesh {
inset: 0;
background:
radial-gradient(600px circle at 90% 20%, color-mix(in srgb, var(--ft-accent, #f1c40f) 22%, transparent), transparent 55%),
radial-gradient(500px circle at 10% 80%, color-mix(in srgb, var(--ft-accent, #f1c40f) 14%, transparent), transparent 60%);
mix-blend-mode: screen;
opacity: 0.7;
transition: background 0.8s ease;
}
.ft-hero__deco--dots {
top: 2rem;
right: 3rem;
width: 140px;
height: 140px;
background-image: radial-gradient(rgba(241, 196, 15, 0.35) 1.2px, transparent 1.2px);
background-size: 14px 14px;
opacity: 0.6;
}
.ft-hero__deco--grid {
bottom: 3.5rem;
left: 2.5rem;
width: 180px;
height: 100px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.9;
}
/* ---- Slide ---- */
.ft-hero-slide {
position: relative;
min-height: clamp(32rem, 72vh, 46rem);
display: flex;
align-items: center;
isolation: isolate;
background: #0a0809;
}
/* Background image per slide — CONTAIN a la derecha + frame con margins
La imagen se ve completa centrada en su área, sin recorte. */
.ft-hero-slide--has-bg {
background:
radial-gradient(ellipse at 80% 50%, rgba(30, 22, 18, 0.5) 0%, transparent 60%),
#0a0809;
}
.ft-hero-slide--has-bg::before {
content: "";
position: absolute;
top: clamp(1.25rem, 2.5vw, 2.5rem);
bottom: clamp(1.25rem, 2.5vw, 2.5rem);
left: clamp(1.25rem, 2.5vw, 2.5rem);
right: clamp(1.25rem, 2.5vw, 2.5rem);
z-index: 0;
background-image: var(--ft-hero-bg);
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
border-radius: 1.5rem;
opacity: 0.85;
transition: opacity 0.6s ease;
}
@media (max-width: 991.98px) {
.ft-hero-slide--has-bg::before {
background-size: auto 58%;
background-position: center bottom;
opacity: 0.92; /* antes 0.35: la foto quedaba casi invisible en móvil */
}
}
.ft-hero-slide--has-bg::after {
content: "";
position: absolute;
top: clamp(1.25rem, 2.5vw, 2.5rem);
bottom: clamp(1.25rem, 2.5vw, 2.5rem);
left: clamp(1.25rem, 2.5vw, 2.5rem);
right: clamp(1.25rem, 2.5vw, 2.5rem);
z-index: 1;
background:
linear-gradient(90deg, rgba(10, 8, 9, 0.98) 0%, rgba(10, 8, 9, 0.92) 30%, rgba(10, 8, 9, 0.6) 55%, transparent 80%),
linear-gradient(180deg, transparent 60%, rgba(10, 8, 9, 0.65) 100%);
border-radius: 1.5rem;
pointer-events: none;
}
@media (max-width: 991.98px) {
.ft-hero-slide--has-bg::after {
/* Oscurece detrás del texto (arriba) y deja ver la foto abajo (no la tapa). */
background: linear-gradient(180deg,
rgba(10, 8, 9, 0.94) 0%,
rgba(10, 8, 9, 0.82) 30%,
rgba(10, 8, 9, 0.38) 64%,
rgba(10, 8, 9, 0.12) 100%);
}
}
@media (max-width: 575.98px) {
.ft-hero-slide--has-bg::before,
.ft-hero-slide--has-bg::after {
top: 0.85rem;
bottom: 0.85rem;
left: 0.85rem;
right: 0.85rem;
border-radius: 1rem;
}
}
.ft-hero-slide__inner {
position: relative;
z-index: 2;
width: 100%;
padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 8vw, 7rem);
}
.ft-hero-slide__text {
text-align: left;
}
/* ---- Eyebrow pill (estilo "Nuestro catálogo") ---- */
.ft-hero-slide__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ft-yellow);
background: rgba(241, 196, 15, 0.12);
border: 1px solid rgba(241, 196, 15, 0.35);
padding: 0.45rem 1rem 0.45rem 0.85rem;
border-radius: 999px;
margin-bottom: 1.5rem;
backdrop-filter: blur(8px);
}
.ft-hero-slide__eyebrow i {
font-size: 0.85rem;
color: var(--ft-yellow);
}
/* ---- Title ---- */
.ft-hero-slide__title {
font-size: clamp(2.25rem, 6vw, 4.75rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1;
margin: 0 0 1.25rem;
color: #fff;
text-wrap: balance;
}
.ft-hero-slide__title em {
color: var(--ft-yellow);
font-style: normal;
background: linear-gradient(90deg, var(--ft-yellow) 0%, #ffe066 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ---- Subtitle ---- */
.ft-hero-slide__sub {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: rgba(255, 255, 255, 0.78);
max-width: 36rem;
margin: 0 0 1.75rem;
line-height: 1.55;
}
/* ---- Chips de features (apliques sutiles) ---- */
.ft-hero-slide__chips {
list-style: none;
padding: 0;
margin: 0 0 2.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ft-hero-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 0.45rem 0.9rem;
border-radius: 999px;
backdrop-filter: blur(6px);
transition: border-color 0.2s ease, background 0.2s ease;
}
.ft-hero-chip:hover {
border-color: rgba(241, 196, 15, 0.4);
background: rgba(255, 255, 255, 0.1);
}
.ft-hero-chip i {
font-size: 0.75rem;
color: var(--ft-yellow);
}
/* ---- CTA ---- */
.ft-hero-slide__cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 2rem;
background: var(--ft-yellow);
color: var(--ft-black);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: 999px;
border: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
box-shadow: 0 10px 30px -8px rgba(241, 196, 15, 0.55);
}
.ft-hero-slide__cta:hover {
background: #ffd83a;
color: var(--ft-black);
transform: translateY(-2px);
box-shadow: 0 14px 36px -8px rgba(241, 196, 15, 0.7);
}
.ft-hero-slide__cta svg { transition: transform 0.2s ease; }
.ft-hero-slide__cta:hover svg { transform: translateX(4px); }
/* ---- Animaciones staggered ---- */
.ft-hero-slide [data-ft-anim] {
opacity: 0;
transform: translateY(18px);
}
.ft-hero-slide.active [data-ft-anim] {
animation: ft-hero-reveal 0.75s cubic-bezier(.2,.8,.2,1) forwards;
}
.ft-hero-slide.active [data-ft-anim="1"] { animation-delay: 0.08s; }
.ft-hero-slide.active [data-ft-anim="2"] { animation-delay: 0.20s; }
.ft-hero-slide.active [data-ft-anim="3"] { animation-delay: 0.34s; }
.ft-hero-slide.active [data-ft-anim="4"] { animation-delay: 0.48s; }
.ft-hero-slide.active [data-ft-anim="5"] { animation-delay: 0.60s; }
.ft-hero-slide.active [data-ft-anim="6"] { animation-delay: 0.35s; }
@keyframes ft-hero-reveal {
to { opacity: 1; transform: translateY(0); }
}
/* ---- Product preview card (columna derecha) ---- */
.ft-hero-slide__preview-col { perspective: 1200px; }
.ft-hero-preview {
position: relative;
display: block;
text-decoration: none;
color: inherit;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.25rem;
padding: 1rem;
backdrop-filter: blur(16px) saturate(160%);
transition: transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
max-width: 440px;
margin-left: auto;
}
.ft-hero-preview:hover {
transform: translateY(-4px) rotate(0.2deg);
border-color: color-mix(in srgb, var(--ft-accent) 60%, rgba(255, 255, 255, 0.3));
background: rgba(255, 255, 255, 0.08);
color: inherit;
}
.ft-hero-preview__badge {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
background: var(--ft-yellow);
color: var(--ft-black);
font-size: 0.68rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ft-hero-preview__img-wrap {
aspect-ratio: 4 / 3;
background: #fff;
border-radius: 0.85rem;
overflow: hidden;
margin-bottom: 1rem;
}
.ft-hero-preview__img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.ft-hero-preview:hover .ft-hero-preview__img { transform: scale(1.06); }
.ft-hero-preview__body { padding: 0 0.25rem 0.25rem; }
.ft-hero-preview__cat {
display: inline-block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.65);
font-weight: 600;
margin-bottom: 0.35rem;
}
.ft-hero-preview__title {
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
margin: 0 0 0.4rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ft-hero-preview__price {
display: block;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.6rem;
}
.ft-hero-preview__price .woocommerce-Price-amount { color: var(--ft-yellow); }
.ft-hero-preview__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--ft-yellow);
font-size: 0.85rem;
font-weight: 600;
}
.ft-hero-preview__link svg { transition: transform 0.2s ease; }
.ft-hero-preview:hover .ft-hero-preview__link svg { transform: translateX(3px); }
/* ---- Controls: arrows + counter ---- */
.ft-hero__controls {
position: absolute;
z-index: 5;
bottom: clamp(2rem, 4vw, 3.5rem);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
justify-content: center;
}
.ft-hero__arrow {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
cursor: pointer;
}
.ft-hero__arrow:hover {
background: var(--ft-yellow);
border-color: var(--ft-yellow);
color: var(--ft-black);
transform: scale(1.05);
}
.ft-hero__counter {
font-variant-numeric: tabular-nums;
font-size: 0.9rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.03em;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 3.5rem;
justify-content: center;
}
.ft-hero__counter-current {
font-size: 1.25rem;
color: #fff;
font-weight: 700;
}
.ft-hero__counter-sep { opacity: 0.3; }
.ft-hero__counter-total { opacity: 0.55; }
/* ---- Progress bar ---- */
.ft-hero__progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: rgba(255, 255, 255, 0.08);
z-index: 4;
}
.ft-hero__progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--ft-accent, var(--ft-yellow)) 0%, var(--ft-yellow) 100%);
}
.ft-hero__progress-bar.is-running {
animation: ft-hero-progress var(--ft-hero-duration) linear forwards;
}
@keyframes ft-hero-progress {
from { width: 0%; }
to { width: 100%; }
}
/* ---- Dots ---- */
.ft-hero__dots {
position: absolute;
left: 0;
right: 0;
bottom: calc(1.25rem + 3px);
margin: 0;
display: flex;
justify-content: center;
gap: 0.5rem;
z-index: 4;
}
.ft-hero__dots button {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 999px !important;
color: rgba(255, 255, 255, 0.65) !important;
padding: 0.3rem 0.85rem !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
width: auto !important;
height: auto !important;
opacity: 1 !important;
margin: 0 !important;
transition: all 0.2s ease !important;
}
.ft-hero__dots button:hover {
background: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
}
.ft-hero__dots button.active {
background: var(--ft-yellow) !important;
border-color: var(--ft-yellow) !important;
color: var(--ft-black) !important;
}
/* ---- Responsive ---- */
@media (max-width: 991.98px) {
.ft-hero__deco--dots { top: 1rem; right: 1rem; width: 100px; height: 100px; }
.ft-hero__deco--grid { display: none; }
}
@media (max-width: 767.98px) {
.ft-hero__controls { gap: 0.5rem; justify-content: center; }
.ft-hero__arrow { width: 2.4rem; height: 2.4rem; }
.ft-hero__counter { display: none !important; }
.ft-hero__dots { display: none !important; }
.ft-hero-slide__chips { gap: 0.4rem; }
.ft-hero-chip { font-size: 0.75rem; padding: 0.35rem 0.7rem; }
}
/* === Stats band (social proof bajo hero) ========================= */
.ft-stats-band {
background: #fff;
border-bottom: 1px solid #f0f0f0;
padding: clamp(2rem, 4vw, 3rem) 0;
}
.ft-stat {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 0.25rem;
}
.ft-stat__icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 1rem;
background: linear-gradient(135deg, var(--ft-yellow), #ffd83a);
color: var(--ft-black);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px -6px rgba(241, 196, 15, 0.55);
}
.ft-stat__icon svg { width: 26px; height: 26px; }
.ft-stat__value {
font-size: clamp(1.2rem, 1.9vw, 1.65rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ft-black);
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ft-stat__suffix { color: var(--ft-yellow-dark); }
.ft-stat__label {
font-size: 0.85rem;
color: #6c757d;
font-weight: 500;
margin-top: 0.15rem;
}
.ft-stat__value + .ft-stat__label { display: block; }
@media (max-width: 767px) {
.ft-stat { gap: 0.75rem; }
.ft-stat__icon { width: 42px; height: 42px; }
.ft-stat__icon svg { width: 22px; height: 22px; }
.ft-stat__label { font-size: 0.78rem; }
}
/* === 2. Categorías grid (fondo amarillo, iconos webp protagonistas) === */
.ft-cats-section {
background: var(--ft-yellow);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.ft-cat-tile {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.ft-cat-tile__inner {
position: relative;
height: 100%;
min-height: 220px;
padding: 1.25rem 1.25rem 3.5rem;
background: transparent;
border-radius: 1.25rem;
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.ft-cat-tile:hover .ft-cat-tile__inner {
transform: translateY(-4px);
}
.ft-cat-tile__img-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 140px;
margin-bottom: 0.5rem;
}
.ft-cat-tile__img-wrap img {
max-width: 100%;
max-height: 170px;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.35s ease;
filter: drop-shadow(0 6px 12px rgba(10, 8, 9, 0.18));
}
.ft-cat-tile:hover .ft-cat-tile__img-wrap img { transform: scale(1.06); }
.ft-cat-tile__name {
font-size: clamp(0.95rem, 1.15vw, 1.1rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ft-black);
margin: 0;
line-height: 1.2;
text-align: center;
width: 100%;
}
.ft-cat-tile__arrow {
position: absolute;
bottom: 0.75rem;
right: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.6rem 0.35rem 0.85rem;
border-radius: 999px;
background: rgba(10, 8, 9, 0.08);
color: var(--ft-black);
font-size: 0.78rem;
font-weight: 700;
transition: all 0.25s ease;
}
.ft-cat-tile__arrow svg {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
padding: 0.2rem;
border-radius: 50%;
background: rgba(10, 8, 9, 0.1);
}
.ft-cat-tile:hover .ft-cat-tile__arrow {
background: var(--ft-black);
color: var(--ft-yellow);
transform: translateX(-2px);
}
.ft-cat-tile:hover .ft-cat-tile__arrow svg {
background: var(--ft-yellow);
color: var(--ft-black);
}
/* === 3 & 6. Carruseles de productos (Owl Carousel) ============== */
.ft-products-slider {
padding: clamp(3rem, 6vw, 5rem) 0;
position: relative;
}
.ft-products-slider--light { background: #fff; }
.ft-products-slider--dark { background: #fafafa; }
/* ══════════════════════════════════════════
Category Spotlight — banner izq + carrusel
══════════════════════════════════════════ */
.ft-cat-spotlight { padding: clamp(3rem, 6vw, 5rem) 0; background: #fff; }
.ft-cat-spotlight__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 992px) {
.ft-cat-spotlight__grid {
grid-template-columns: minmax(280px, 340px) 1fr;
gap: 1.5rem;
}
}
/* --- Banner --- */
.ft-cat-spotlight__banner {
position: relative;
overflow: hidden;
border-radius: 1rem;
padding: 2rem 1.75rem;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--ft-black);
border: 1px solid rgba(0,0,0,0.06);
}
@media (min-width: 992px) {
.ft-cat-spotlight__banner { min-height: 480px; padding: 2.25rem; }
}
.ft-cat-spotlight__banner-img {
position: absolute;
right: -20%;
bottom: -10%;
width: 110%;
max-width: none;
height: auto;
object-fit: contain;
opacity: 0.85;
pointer-events: none;
mix-blend-mode: multiply;
z-index: 1;
}
@media (min-width: 992px) {
.ft-cat-spotlight__banner-img { right: -15%; bottom: -5%; width: 95%; }
}
.ft-cat-spotlight__offer,
.ft-cat-spotlight__title,
.ft-cat-spotlight__cta,
.ft-cat-spotlight__side {
position: relative;
z-index: 2;
}
.ft-cat-spotlight__offer {
display: inline-flex;
align-self: flex-start;
padding: 0.45rem 0.85rem;
background: var(--ft-black);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
border-radius: 0.35rem;
letter-spacing: 0.02em;
margin-bottom: 0.75rem;
}
.ft-cat-spotlight__title {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 1rem;
}
.ft-cat-spotlight__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ft-black);
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid var(--ft-black);
padding-bottom: 0.2rem;
align-self: flex-start;
transition: gap 0.2s ease;
}
.ft-cat-spotlight__cta:hover {
color: var(--ft-black);
gap: 0.8rem;
}
.ft-cat-spotlight__cta i { font-size: 0.8rem; }
.ft-cat-spotlight__side {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 0.05em;
color: rgba(0,0,0,0.08);
text-transform: uppercase;
z-index: 1;
pointer-events: none;
}
@media (min-width: 992px) {
.ft-cat-spotlight__side { font-size: 3.25rem; right: 1.25rem; }
}
/* --- Slider header --- */
.ft-cat-spotlight__slider { min-width: 0; }
.ft-cat-spotlight__head {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"eyebrow viewall"
"title viewall";
align-items: center;
gap: 0.35rem 1rem;
padding: 0 0 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.ft-cat-spotlight__eyebrow {
grid-area: eyebrow;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ft-yellow-dark);
margin: 0;
}
.ft-cat-spotlight__h {
grid-area: title;
font-size: clamp(1.1rem, 2vw, 1.45rem);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ft-black);
margin: 0;
}
.ft-cat-spotlight__viewall { grid-area: viewall; }
@media (max-width: 575px) {
.ft-cat-spotlight__head {
grid-template-columns: 1fr;
grid-template-areas: "eyebrow" "title" "viewall";
}
}
.ft-cat-spotlight__h em {
font-style: normal;
color: var(--ft-yellow-dark);
}
.ft-cat-spotlight__viewall {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 700;
color: #dc2626;
text-decoration: none;
white-space: nowrap;
}
.ft-cat-spotlight__viewall:hover { color: #b91c1c; text-decoration: underline; }
/* --- Cards --- */
.ft-cat-spotlight-card {
background: #fff;
border: 1px solid #eee;
border-radius: 0.75rem;
overflow: hidden;
transition: all 0.2s ease;
height: 100%;
}
.ft-cat-spotlight-card:hover {
border-color: var(--ft-yellow);
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
transform: translateY(-3px);
}
.ft-cat-spotlight-card__link { display: block; color: inherit; text-decoration: none; }
.ft-cat-spotlight-card__img-wrap {
aspect-ratio: 1 / 1;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-bottom: 1px solid #f3f4f6;
}
.ft-cat-spotlight-card__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.ft-cat-spotlight-card__body {
padding: 0.85rem 1rem 1rem;
}
.ft-cat-spotlight-card__title {
font-size: 0.92rem;
font-weight: 700;
color: var(--ft-black);
margin: 0 0 0.5rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4em;
}
.ft-cat-spotlight-card__prices {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.ft-cat-spotlight-card__price {
color: #dc2626;
font-weight: 800;
font-size: 0.95rem;
}
.ft-cat-spotlight-card__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.ft-cat-spotlight-card__regular {
color: #9ca3af;
font-size: 0.8rem;
font-weight: 500;
text-decoration: line-through;
}
.ft-cat-spotlight-card__pct {
color: #16a34a;
font-size: 0.78rem;
font-weight: 700;
background: #f0fdf4;
border: 1px solid #bbf7d0;
padding: 0.15rem 0.45rem;
border-radius: 0.3rem;
}
/* Owl dots (spotlight) */
.ft-cat-spotlight__carousel .owl-dots {
margin-top: 1rem;
display: flex !important;
justify-content: center;
gap: 0.35rem;
}
.ft-cat-spotlight__carousel .owl-dot span {
width: 10px;
height: 4px;
border-radius: 2px;
background: #e5e7eb;
display: block;
transition: all 0.2s ease;
}
.ft-cat-spotlight__carousel .owl-dot.active span {
background: #dc2626;
width: 22px;
}
/* Header editorial: eyebrow + título + subtitle */
.ft-products-slider__head {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 2.75rem);
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.ft-products-slider__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ft-yellow-dark);
background: rgba(241, 196, 15, 0.14);
border: 1px solid rgba(241, 196, 15, 0.3);
padding: 0.35rem 0.8rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.ft-products-slider__eyebrow i {
font-size: 0.78rem;
}
.ft-products-slider__title {
font-size: clamp(1.75rem, 3.8vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--ft-black);
margin: 0 0 0.75rem;
text-wrap: balance;
}
.ft-products-slider__title em {
color: var(--ft-yellow-dark);
font-style: normal;
background: linear-gradient(90deg, var(--ft-yellow-dark) 0%, var(--ft-yellow) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ft-products-slider__subtitle {
font-size: 1rem;
color: #6c757d;
line-height: 1.55;
margin: 0;
}
/* Wrap + Owl carousel */
.ft-products-slider__wrap {
position: relative;
padding-top: 3rem;
}
.ft-products-slider__carousel .owl-stage {
display: flex;
align-items: stretch;
padding: 0.25rem 0 1.5rem;
}
.ft-products-slider__carousel .owl-item {
display: flex;
height: auto;
}
.ft-products-slider__carousel .ft-product-card {
width: 100%;
}
/* Nav arrows — top right */
.ft-products-slider__carousel .owl-nav {
position: absolute;
top: -3.25rem;
right: 0;
margin: 0;
display: flex;
gap: 0.5rem;
}
.ft-products-slider__carousel .owl-nav button.owl-prev,
.ft-products-slider__carousel .owl-nav button.owl-next {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 50% !important;
color: var(--ft-black) !important;
font-size: 1.5rem;
line-height: 1;
transition: all 0.15s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.ft-products-slider--dark .ft-products-slider__carousel .owl-nav button.owl-prev,
.ft-products-slider--dark .ft-products-slider__carousel .owl-nav button.owl-next {
background: #fff !important;
}
.ft-products-slider__carousel .owl-nav button.owl-prev:hover,
.ft-products-slider__carousel .owl-nav button.owl-next:hover {
background: var(--ft-yellow) !important;
border-color: var(--ft-yellow) !important;
color: var(--ft-black) !important;
transform: translateY(-1px);
}
.ft-products-slider__carousel .owl-nav button.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ft-products-slider__carousel .owl-nav button span {
font-weight: 700;
margin-top: -3px;
}
/* Dots */
.ft-products-slider__carousel .owl-dots {
margin-top: 1rem !important;
text-align: center;
}
.ft-products-slider__carousel .owl-dots .owl-dot span {
width: 8px;
height: 8px;
background: #d0d0d0 !important;
border-radius: 50%;
transition: all 0.15s ease;
margin: 5px;
}
.ft-products-slider__carousel .owl-dots .owl-dot.active span,
.ft-products-slider__carousel .owl-dots .owl-dot:hover span {
background: var(--ft-yellow) !important;
}
.ft-products-slider__carousel .owl-dots .owl-dot.active span {
width: 28px;
border-radius: 4px;
}
/* "Ver toda la tienda" link */
.ft-products-slider__all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--ft-black);
text-decoration: none;
padding: 0.6rem 1.2rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 999px;
transition: all 0.15s ease;
}
.ft-products-slider__all:hover {
color: var(--ft-black);
background: var(--ft-yellow);
border-color: var(--ft-yellow);
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(241, 196, 15, 0.5);
}
.ft-products-slider__all svg { transition: transform 0.15s ease; }
.ft-products-slider__all:hover svg { transform: translateX(3px); }
@media (max-width: 767.98px) {
.ft-products-slider__wrap { padding-top: 0; }
.ft-products-slider__carousel .owl-nav {
position: static;
justify-content: center;
margin-top: 1rem;
}
}
/* Product card propio (marketplace style) */
.ft-product-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.ft-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(10, 8, 9, 0.1);
border-color: var(--ft-yellow);
}
.ft-product-card__link {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
text-decoration: none;
color: inherit;
}
.ft-product-card__img-wrap {
position: relative;
aspect-ratio: 1;
background: #fff;
overflow: hidden;
display: block;
}
.ft-product-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease, opacity 0.3s ease;
}
.ft-product-card__img--hover {
opacity: 0;
}
.ft-product-card.has-hover-img:hover .ft-product-card__img:not(.ft-product-card__img--hover) {
opacity: 0;
}
.ft-product-card.has-hover-img:hover .ft-product-card__img--hover {
opacity: 1;
}
.ft-product-card:not(.has-hover-img):hover .ft-product-card__img {
transform: scale(1.06);
}
.ft-product-card__body {
padding: 1rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
flex: 1;
}
.ft-product-card__cat {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
font-weight: 600;
margin-bottom: 0.35rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ft-product-card__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--ft-black);
margin: 0 0 0.5rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ft-product-card__price {
color: var(--ft-black);
font-size: 1rem;
font-weight: 700;
margin-top: auto;
display: block;
}
.ft-product-card__price .woocommerce-Price-currencySymbol { font-weight: 600; }
.ft-product-card__price ins { background: transparent; text-decoration: none; }
.ft-product-card__price del { color: #9ca3af; font-weight: 500; margin-right: 0.4rem; font-size: 0.85rem; }
/* Spec badges (memoria, marca, dorm., etc. según categoría) */
.ft-product-card__specs {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.ft-product-card__spec {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: #f5f5f5;
color: #444;
font-size: 0.72rem;
font-weight: 600;
padding: 0.2rem 0.55rem;
border-radius: 999px;
line-height: 1.3;
white-space: nowrap;
}
.ft-product-card__spec i {
font-size: 0.7rem;
color: var(--ft-yellow-dark);
}
/* Add-to-cart button en la card */
.ft-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 3;
background: var(--ft-yellow);
color: var(--ft-black);
font-size: 0.7rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ft-product-card__actions {
padding: 0 1rem 1rem;
margin-top: auto;
}
.ft-product-card__actions .add-to-cart-container,
.ft-product-card__actions .add-to-cart-container.mt-auto {
margin: 0 !important;
width: 100%;
}
.ft-product-card__actions .button,
.ft-product-card__actions a.button,
.ft-product-card__actions .add_to_cart_button,
.ft-product-card__actions a.add_to_cart_button {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
background: var(--ft-black) !important;
color: #fff !important;
border: 1px solid var(--ft-black) !important;
border-radius: 0.5rem !important;
padding: 0.6rem 0.85rem !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
text-align: center;
text-decoration: none;
transition: all 0.15s ease;
cursor: pointer;
line-height: 1.2;
}
.ft-product-card__actions .button::before,
.ft-product-card__actions .add_to_cart_button::before {
content: "\f07a";
font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.82rem;
display: inline-block;
}
.ft-product-card__actions .button:hover,
.ft-product-card__actions a.button:hover,
.ft-product-card__actions .add_to_cart_button:hover,
.ft-product-card__actions a.add_to_cart_button:hover {
background: var(--ft-yellow) !important;
color: var(--ft-black) !important;
border-color: var(--ft-yellow) !important;
}
.ft-product-card__actions .added_to_cart {
font-size: 0.8rem;
color: var(--ft-yellow-dark);
text-decoration: underline;
margin-left: 0.5rem;
align-self: center;
}
.ft-product-card__actions .button.loading::after {
content: "";
width: 14px;
height: 14px;
border: 1px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ft-spin 0.7s linear infinite;
margin-left: 0.4rem;
}
@keyframes ft-spin { to { transform: rotate(360deg); } }
/* === 4. Importaciones banner ==================================== */
.ft-import-banner {
background: linear-gradient(135deg, var(--ft-yellow) 0%, #f5cf30 55%, #e9b91a 100%);
color: var(--ft-black);
padding: clamp(3rem, 6vw, 5rem) 0;
position: relative;
overflow: hidden;
}
.ft-import-banner::before {
content: "";
position: absolute;
right: -10%;
top: -50%;
width: 80%;
height: 200%;
background: radial-gradient(circle, rgba(212, 172, 13, 0.35) 0%, transparent 60%);
pointer-events: none;
}
.ft-import-banner__deco--dots {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(10, 8, 9, 0.08) 1px, transparent 1px);
background-size: 22px 22px;
background-position: 0 0;
opacity: 0.6;
pointer-events: none;
mask-image: linear-gradient(120deg, transparent 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
-webkit-mask-image: linear-gradient(120deg, transparent 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
}
.ft-import-banner__inner {
position: relative;
display: grid;
grid-template-columns: minmax(180px, 280px) 1fr;
align-items: center;
gap: clamp(1.5rem, 5vw, 4rem);
z-index: 2;
}
/* --- Visual: ilustración real importaciones --- */
.ft-import-banner__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.ft-import-banner__img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 12px 24px rgba(155, 110, 0, 0.25));
}
/* --- Content --- */
.ft-import-banner__content { min-width: 0; }
.ft-import-banner__eyebrow {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ft-black);
background: rgba(10, 8, 9, 0.09);
padding: 0.4rem 0.85rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.ft-import-banner__title {
font-size: clamp(1.6rem, 3vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 0.85rem;
color: var(--ft-black);
max-width: 38ch;
}
.ft-import-banner__sub {
font-size: 1.02rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 46rem;
color: rgba(10, 8, 9, 0.78);
}
.ft-import-banner__chips {
list-style: none;
padding: 0;
margin: 0 0 1.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.ft-import-banner__chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(10, 8, 9, 0.12);
padding: 0.4rem 0.85rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ft-black);
backdrop-filter: blur(4px);
}
.ft-import-banner__chip i.bi {
font-size: 1rem;
color: var(--ft-black);
opacity: 0.75;
}
.ft-import-banner__cta {
--bs-btn-bg: var(--ft-black);
--bs-btn-border-color: var(--ft-black);
--bs-btn-hover-bg: #212121;
--bs-btn-hover-border-color: #212121;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
font-weight: 700;
padding: 0.85rem 1.85rem;
display: inline-flex;
align-items: center;
}
@media (max-width: 767px) {
.ft-import-banner__inner {
grid-template-columns: 1fr;
text-align: center;
gap: 1.75rem;
}
.ft-import-banner__visual { max-width: 220px; margin: 0 auto; }
.ft-import-banner__title { margin-left: auto; margin-right: auto; }
.ft-import-banner__sub { margin-left: auto; margin-right: auto; }
.ft-import-banner__chips { justify-content: center; }
}
/* === Flyer destacado TD ARTESANIA (entre carátulas y novedades) === */
.ft-td-flyer {
padding: clamp(2.5rem, 5vw, 4rem) 0;
background: #f5f6f8;
}
.ft-td-flyer__card {
display: grid;
grid-template-columns: 1fr;
background: #1a1003;
color: #fff;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.45);
isolation: isolate;
}
@media (min-width: 992px) {
.ft-td-flyer__card {
grid-template-columns: 5fr 6fr;
min-height: 440px;
}
}
.ft-td-flyer__media {
position: relative;
min-height: 280px;
overflow: hidden;
background: #000;
padding: clamp(1rem, 3vw, 2rem);
display: flex;
align-items: center;
justify-content: center;
}
/* Variante logo: fondo negro para resaltar el logo dorado TD Artesanía. */
.ft-td-flyer__media--logo {
background: var(--ft-black, #0a0809);
padding: clamp(2rem, 5vw, 3.5rem);
}
.ft-td-flyer__img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.ft-td-flyer__media--logo .ft-td-flyer__img {
max-height: 240px;
width: auto;
filter: drop-shadow(0 12px 28px rgba(241, 196, 15, 0.35));
}
.ft-td-flyer__card:hover .ft-td-flyer__img { transform: scale(1.04); }
.ft-td-flyer__media-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(217, 119, 6, 0.18) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%);
pointer-events: none;
}
@media (min-width: 992px) {
.ft-td-flyer__media { min-height: 100%; }
}
.ft-td-flyer__body {
padding: clamp(1.75rem, 3.5vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.ft-td-flyer__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
width: max-content;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(217, 119, 6, 0.18);
border: 1px solid rgba(217, 119, 6, 0.4);
color: #fbbf24;
padding: 0.4rem 0.9rem;
border-radius: 999px;
}
.ft-td-flyer__eyebrow svg { color: var(--ft-yellow); }
.ft-td-flyer__title {
font-size: clamp(1.6rem, 3.2vw, 2.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
color: #fff;
text-wrap: balance;
}
.ft-td-flyer__title em {
color: var(--ft-yellow);
font-style: normal;
background: linear-gradient(90deg, var(--ft-yellow) 0%, #ffe066 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ft-td-flyer__sub {
font-size: 1rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.55;
margin: 0;
max-width: 44ch;
}
.ft-td-flyer__chips {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.6rem;
}
.ft-td-flyer__chip {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.85rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.85rem;
}
.ft-td-flyer__chip strong {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.ft-td-flyer__chip span:not(.ft-td-flyer__chip-icon) {
display: block;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.2;
margin-top: 2px;
}
.ft-td-flyer__chip-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(217, 119, 6, 0.2);
color: var(--ft-yellow);
border-radius: 8px;
font-size: 0.95rem;
}
.ft-td-flyer__chip--coming { opacity: 0.7; }
.ft-td-flyer__chip--coming strong::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: var(--ft-yellow);
border-radius: 50%;
margin-left: 0.4rem;
vertical-align: middle;
animation: ft-td-pulse 1.6s ease-in-out infinite;
}
@keyframes ft-td-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.ft-td-flyer__actions {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.ft-td-flyer__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.3rem;
font-weight: 700;
font-size: 0.92rem;
border-radius: 999px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ft-td-flyer__cta:hover { transform: translateY(-1px); }
.ft-td-flyer__cta--primary {
--bs-btn-bg: var(--ft-yellow);
--bs-btn-border-color: var(--ft-yellow);
--bs-btn-color: var(--ft-black);
--bs-btn-hover-bg: var(--ft-yellow-dark);
--bs-btn-hover-border-color: var(--ft-yellow-dark);
--bs-btn-hover-color: var(--ft-black);
}
.ft-td-flyer__cta--secondary {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.ft-td-flyer__cta--secondary:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: #fff;
}
@media (max-width: 575.98px) {
.ft-td-flyer__chips { grid-template-columns: 1fr; }
.ft-td-flyer__cta { width: 100%; justify-content: center; }
}
/* === 5. Benefits (4 value props) ================================ */
.ft-benefits {
padding: clamp(3rem, 6vw, 5rem) 0;
background: #fff;
}
.ft-benefit__icon {
width: 5rem;
height: 5rem;
margin: 0 auto 1rem;
color: var(--ft-yellow);
display: flex;
align-items: center;
justify-content: center;
}
.ft-benefit__icon svg { width: 100%; height: 100%; }
.ft-benefit__icon i.bi {
font-size: 3.25rem;
line-height: 1;
display: inline-block;
}
.ft-benefit__title {
font-size: 1.1rem;
font-weight: 800;
color: var(--ft-yellow-dark);
margin: 0 0 0.5rem;
}
.ft-benefit__text {
font-size: 0.9rem;
color: #6c757d;
line-height: 1.5;
max-width: 16rem;
margin: 0 auto;
}
/* --- WhatsApp button --- */
.ft-whatsapp-btn {
font-weight: 600;
}
/* --- Misc cleanup --- */
.site-header {
background: linear-gradient(180deg, #1f1b19 0%, #2a2421 100%);
border-bottom: 1px solid rgba(241, 196, 15, 0.18);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
color: #fff;
}
.site-header .navbar-brand,
.site-header a.navbar-brand { color: var(--ft-yellow) !important; }
.site-header .ft-header-btn {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14) !important;
color: #fff !important;
}
.site-header .ft-header-btn:hover,
.site-header .ft-header-btn:focus {
background: var(--ft-yellow) !important;
border-color: var(--ft-yellow) !important;
color: var(--ft-black) !important;
}
.site-header .ft-nav-search .ft-search-form {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.site-header .ft-currency-switch {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
.site-header .ft-currency-switch__opt { color: rgba(255, 255, 255, 0.7); }
.site-header .ft-currency-switch__opt.is-active { color: var(--ft-black); }
/* --- Search embebida en navbar (desktop) --- */
.ft-nav-search {
flex: 1 1 auto;
max-width: 560px;
margin: 0 1.25rem 0 4rem;
display: flex;
align-items: center;
}
@media (min-width: 1200px) {
.ft-nav-search {
margin-left: 6rem;
}
}
@media (min-width: 1400px) {
.ft-nav-search {
margin-left: 8rem;
}
}
.ft-nav-search .ft-search-form {
width: 100%;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 0.65rem;
box-shadow: none;
}
/* Primer y último child toman las esquinas del form para reemplazar overflow:hidden */
.ft-nav-search .ft-search-form > *:first-child { border-top-left-radius: 0.65rem; border-bottom-left-radius: 0.65rem; }
.ft-nav-search .ft-search-form > *:last-child { border-top-right-radius: 0.65rem; border-bottom-right-radius: 0.65rem; }
.ft-nav-search .ft-search-form__cat {
background: #fafafa;
padding: 0 1.5rem 0 2rem;
}
.ft-nav-search .ft-search-form__cat-icon { left: 0.7rem; font-size: 0.8rem; }
.ft-nav-search .ft-search-form__select { padding: 0.55rem 0.4rem 0.55rem 0; font-size: 0.85rem; }
.ft-nav-search .ft-search-form__cat-chevron { right: 0.55rem; }
.ft-nav-search .ft-search-form__input { padding: 0.55rem 0.75rem 0.55rem 2.25rem; font-size: 0.88rem; }
.ft-nav-search .ft-search-form__input-icon { left: 0.8rem; font-size: 0.85rem; }
.ft-nav-search .ft-search-form__submit { padding: 0 1.1rem; font-size: 0.85rem; min-width: 44px; }
/* En mobile (< lg) no mostramos la search en navbar, queda en su propia franja */
@media (max-width: 991.98px) {
.ft-nav-search { display: none; }
}
/* Bag icon del menú — visible en cualquier contexto (desktop y mobile) */
.ft-menu-bag {
font-size: 1.15rem;
color: var(--ft-yellow);
}
/* En desktop el item Tienda es solo el bag icon — agrandamos un poco y damos hover */
@media (min-width: 992px) {
.ft-menu-tienda > .nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 999px;
background: rgba(241, 196, 15, 0.12);
transition: background 0.15s ease, transform 0.15s ease;
}
.ft-menu-tienda > .nav-link:hover {
background: var(--ft-yellow);
transform: translateY(-1px);
}
.ft-menu-tienda > .nav-link:hover .ft-menu-bag { color: var(--ft-black); }
}
/* --- Search autocomplete dropdown --- */
.ft-search-form { position: relative; }
/* El form y sus ancestros deben permitir overflow del dropdown. */
.ft-nav-search,
.ft-header-search,
.ft-header-search > .container { overflow: visible !important; }
.ft-search-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 0.75rem;
box-shadow: 0 14px 36px rgba(10, 8, 9, 0.18);
overflow: hidden;
z-index: 99999;
display: none;
max-width: 100%;
}
.ft-search-dropdown.is-visible { display: block !important; }
.ft-search-dropdown__list {
max-height: 440px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #d1d5db transparent;
}
.ft-search-dropdown__list::-webkit-scrollbar { width: 5px; }
.ft-search-dropdown__list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.ft-search-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #f1f3f5;
transition: background 0.12s ease;
}
.ft-search-item:last-child { border-bottom: 0; }
.ft-search-item:hover,
.ft-search-item.is-selected {
background: rgba(241, 196, 15, 0.08);
}
.ft-search-item img {
width: 48px;
height: 48px;
object-fit: contain;
flex-shrink: 0;
background: #fafafa;
border-radius: 0.35rem;
padding: 2px;
}
.ft-search-item__body {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.ft-search-item__cat {
font-size: 0.68rem;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ft-search-item__title {
font-size: 0.9rem;
color: var(--ft-black);
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ft-search-item__price {
font-size: 0.85rem;
color: var(--ft-yellow-dark);
font-weight: 700;
}
.ft-search-item__price del { color: #9ca3af; font-weight: 500; margin-right: 0.3rem; font-size: 0.78rem; }
.ft-search-item__price ins { background: transparent; text-decoration: none; }
.ft-search-dropdown__loading,
.ft-search-dropdown__empty {
padding: 1rem 1.25rem;
text-align: center;
color: #6c757d;
font-size: 0.88rem;
}
.ft-search-dropdown__loading .spinner-border { margin-right: 0.4rem; color: var(--ft-yellow-dark) !important; }
.ft-search-dropdown__empty strong { color: var(--ft-black); }
.ft-search-dropdown__more {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.8rem 1rem;
background: #fafafa;
border-top: 1px solid #e9ecef;
color: var(--ft-black);
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
transition: all 0.12s ease;
}
.ft-search-dropdown__more:hover {
background: var(--ft-yellow);
color: var(--ft-black);
}
.ft-search-dropdown__more i { font-size: 0.75rem; }
/* --- Super buscador central (debajo de navbar, sólo mobile ahora) --- */
@media (min-width: 992px) {
/* En desktop, el search se mueve al navbar vía JS — ocultamos la banda standalone
como defensa por si el JS no corre (evita duplicación). */
.ft-header-search { display: none; }
}
.ft-header-search {
background: linear-gradient(180deg, var(--ft-black) 0%, #1a1716 100%);
padding: 0.85rem 0;
border-bottom: 1px solid var(--ft-yellow);
position: relative;
z-index: 1025;
}
.ft-search-form {
display: flex;
align-items: stretch;
max-width: 900px;
margin: 0 auto;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.ft-search-form__cat {
position: relative;
display: none;
align-items: center;
background: #f8f9fa;
border-right: 1px solid #e9ecef;
padding: 0 1.75rem 0 2.25rem;
flex: 0 0 auto;
}
@media (min-width: 768px) {
.ft-search-form__cat { display: flex; }
}
.ft-search-form__cat-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--ft-yellow-dark);
font-size: 0.85rem;
pointer-events: none;
}
.ft-search-form__select {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0.85rem 0.5rem 0.85rem 0;
font-size: 0.9rem;
color: var(--ft-black);
font-weight: 500;
cursor: pointer;
outline: none;
width: auto;
min-width: 0;
text-overflow: clip;
}
.ft-search-form__cat-chevron {
position: absolute;
right: 0.7rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 0.7rem;
pointer-events: none;
}
.ft-search-form__input-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.ft-search-form__input-icon {
position: absolute;
left: 1rem;
color: #9ca3af;
font-size: 0.95rem;
pointer-events: none;
}
.ft-search-form__input {
flex: 1;
border: 0;
outline: none;
padding: 0.85rem 1rem 0.85rem 2.5rem;
font-size: 0.95rem;
color: var(--ft-black);
background: transparent;
width: 100%;
}
.ft-search-form__input::placeholder { color: #9ca3af; }
.ft-search-form__input:focus::placeholder { color: #d1d5db; }
.ft-search-form__submit {
background: var(--ft-yellow);
color: var(--ft-black);
border: 0;
padding: 0 1.5rem;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
border-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
.ft-search-form__submit:hover { background: var(--ft-yellow-dark); }
@media (max-width: 767px) {
.ft-header-search { padding: 0.6rem 0; }
.ft-search-form__input { padding-left: 2.25rem; font-size: 0.9rem; }
}
/* ══════════════════════════════════════════════
OFFCANVAS (carrito, menú, mi cuenta)
══════════════════════════════════════════════ */
.offcanvas { --bs-offcanvas-bg: #fff; }
.ft-offcanvas { width: min(92vw, 400px) !important; }
/* Header negro con borde amarillo */
.ft-offcanvas-header,
.offcanvas-header.ft-offcanvas-header {
background: var(--ft-black);
color: #fff;
padding: 1.1rem 1.25rem;
border-bottom: 2px solid var(--ft-yellow);
display: flex;
align-items: center;
justify-content: space-between;
}
.ft-offcanvas-header .offcanvas-title {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--ft-yellow) !important;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
margin: 0;
line-height: 1.2;
}
.ft-offcanvas-header .offcanvas-title i {
color: var(--ft-yellow);
font-size: 1.35rem;
width: 1.5rem;
text-align: center;
flex-shrink: 0;
}
.ft-offcanvas-header .offcanvas-title .ft-offcanvas-greeting {
color: var(--ft-yellow);
}
.ft-offcanvas-header .btn-close {
filter: invert(1) grayscale(1);
opacity: 0.7;
transition: opacity 0.15s ease;
}
.ft-offcanvas-header .btn-close:hover { opacity: 1; }
/* ── Body gris claro para contraste con cards blancas ── */
#offcanvas-user .offcanvas-body { background: #f4f5f7; padding: 1rem; }
/* ══════════════════════════════════════════════
MI CUENTA — lista como cards
══════════════════════════════════════════════ */
#offcanvas-user .my-offcanvas-account .woocommerce-MyAccount-content,
#offcanvas-user .woocommerce-Tabs-panel.panel > h2,
#offcanvas-user .my-offcanvas-account form.woocommerce-EditAccountForm,
#offcanvas-user .my-offcanvas-account .woocommerce-MyAccount-paymentMethods,
#offcanvas-user .my-offcanvas-account .woocommerce-orders-table {
display: none !important;
}
/* En el offcanvas no necesitamos el grid 2-cols: la sidebar tiene que ocupar
100% del ancho y la columna de contenido se oculta (ya saludamos en el header). */
#offcanvas-user .ft-account__head { display: none !important; }
#offcanvas-user .ft-account__layout {
display: block !important;
margin: 0 !important;
}
#offcanvas-user .ft-account__layout > * { padding: 0 !important; }
#offcanvas-user .ft-account__sidebar-col {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
#offcanvas-user .ft-account__layout > .col-lg-8,
#offcanvas-user .ft-account__layout > .col-xl-9 {
display: none !important;
}
#offcanvas-user .woocommerce-MyAccount-navigation {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
width: 100%;
}
#offcanvas-user .woocommerce-MyAccount-navigation ul,
#offcanvas-user .woocommerce-MyAccount-navigation .list-group {
list-style: none;
padding: 0;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 0.55rem;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#offcanvas-user .woocommerce-MyAccount-navigation li {
list-style: none;
margin: 0;
padding: 0;
background: transparent;
border: 0;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a {
display: flex !important;
align-items: center;
gap: 0.85rem;
padding: 0.95rem 1.1rem;
background: #ffffff !important;
color: var(--ft-black) !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
text-decoration: none !important;
font-weight: 600;
font-size: 0.98rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
position: relative;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a i.fa-solid {
color: var(--ft-yellow-dark, #b08500);
font-size: 1.05rem;
width: 1.5rem;
text-align: center;
flex-shrink: 0;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a > span {
flex: 1;
}
/* Flecha derecha via pseudo */
#offcanvas-user .woocommerce-MyAccount-navigation li a::after {
content: "\f054"; /* fa-chevron-right */
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 900;
color: #9ca3af;
font-size: 0.85rem;
transition: transform 0.15s ease, color 0.15s ease;
margin-left: auto;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a:hover,
#offcanvas-user .woocommerce-MyAccount-navigation li.is-active a,
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a:hover {
border-color: var(--ft-yellow) !important;
box-shadow: 0 4px 12px -6px rgba(240, 180, 0, 0.25);
transform: translateX(2px);
}
#offcanvas-user .woocommerce-MyAccount-navigation li a:hover::after {
color: var(--ft-black);
transform: translateX(3px);
}
/* Logout — destacado rojo */
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed #e5e7eb;
}
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
background: #fef2f2 !important;
color: #dc2626 !important;
border-color: #fecaca !important;
font-weight: 700;
}
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a i.fa-solid {
color: #dc2626;
}
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::after {
content: "\f2f5"; /* fa-arrow-right-from-bracket */
color: #dc2626;
}
#offcanvas-user .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: #fee2e2 !important;
border-color: #dc2626 !important;
box-shadow: 0 4px 12px -6px rgba(220, 38, 38, 0.3);
}
/* Usuario no logueado: formulario de login/register limpio */
#offcanvas-user .u-columns,
#offcanvas-user .woocommerce form.login,
#offcanvas-user .woocommerce form.register {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem;
}
/* Menú principal — estilos sólo cuando actúa como offcanvas real (< lg) */
@media (max-width: 991.98px) {
#offcanvas-navbar {
width: min(88vw, 360px) !important;
}
#offcanvas-navbar .offcanvas-body {
background: var(--ft-black);
color: #fff;
padding: 1.25rem 1rem;
}
#offcanvas-navbar .offcanvas-body ul {
list-style: none;
padding: 0;
margin: 0;
}
#offcanvas-navbar .offcanvas-body .nav-item { display: block; }
#offcanvas-navbar .offcanvas-body a,
#offcanvas-navbar .offcanvas-body .nav-link {
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
padding: 0.85rem 0.25rem;
display: flex;
align-items: center;
gap: 0.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-weight: 500;
font-size: 0.98rem;
transition: color 0.2s ease, padding-left 0.2s ease;
}
#offcanvas-navbar .offcanvas-body a:hover,
#offcanvas-navbar .offcanvas-body .nav-link:hover,
#offcanvas-navbar .offcanvas-body .current-menu-item > a {
color: var(--ft-yellow);
padding-left: 0.65rem;
}
/* Tienda en mobile muestra el texto; el bag queda como ícono al inicio */
#offcanvas-navbar .ft-menu-tienda .ft-menu-label {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
}
#offcanvas-navbar .ft-menu-bag {
color: var(--ft-yellow);
width: 1.25rem;
text-align: center;
}
}
/* Hide external search band when any offcanvas is open (evita verlo
a través del backdrop semi-transparente). */
body:has(.offcanvas.show) .ft-header-search,
body:has(.offcanvas.showing) .ft-header-search {
visibility: hidden;
}
/* Desktop: navbar inline, sin offcanvas-header negra */
@media (min-width: 992px) {
#offcanvas-navbar .offcanvas-header,
.navbar-expand-lg #offcanvas-navbar .offcanvas-header { display: none !important; }
#offcanvas-navbar .offcanvas-body { background: transparent !important; padding: 0 !important; }
/* Items marcados como "hide on desktop" (Inicio, Quiénes Somos, Contacto) */
.ft-menu-desktop-hide { display: none !important; }
/* En desktop "Tienda" muestra sólo el bag icon, label oculto (visually hidden) */
.ft-menu-tienda .ft-menu-label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#offcanvas-navbar .nav-link {
font-weight: 600;
color: var(--ft-black);
padding: 0.5rem 0.85rem !important;
position: relative;
transition: color 0.15s ease;
}
#offcanvas-navbar .nav-link:hover,
#offcanvas-navbar .nav-link.active,
#offcanvas-navbar .current-menu-item .nav-link {
color: var(--ft-yellow-dark);
}
#offcanvas-navbar .nav-link.active::after,
#offcanvas-navbar .current-menu-item .nav-link::after {
content: '';
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: 0.15rem;
height: 2px;
background: var(--ft-yellow);
border-radius: 2px;
}
}
/* Cart offcanvas — refinamiento */
#offcanvas-cart .cart-list { background: #fff; }
#offcanvas-cart .woocommerce-mini-cart-item,
#offcanvas-cart .mini_cart_item {
padding: 1rem 1.25rem;
border-bottom: 1px solid #f1f3f5;
}
#offcanvas-cart .widget_shopping_cart .total,
#offcanvas-cart .woocommerce-mini-cart__total {
padding: 0.85rem 1.25rem;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
font-weight: 600;
margin: 0;
}
#offcanvas-cart .woocommerce-mini-cart__total .amount,
#offcanvas-cart .woocommerce-Price-amount {
color: var(--ft-black);
font-weight: 700;
}
#offcanvas-cart .buttons {
padding: 0.85rem 1rem 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
margin: 0;
}
#offcanvas-cart .buttons .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.5rem 0.5rem;
font-weight: 600;
font-size: 0.78rem;
line-height: 1.15;
border-radius: 999px;
text-decoration: none;
border: 1px solid transparent;
transition: all 0.15s ease;
white-space: nowrap;
cursor: pointer;
min-width: 0;
}
#offcanvas-cart .buttons .button i { font-size: 0.78rem; }
/* "Ver carrito" + "Seguir comprando" comparten la fila de arriba */
.ft-mini-cart__btn--view,
.ft-mini-cart__btn--continue {
background: #fff;
color: var(--ft-black);
border-color: #e5e7eb;
}
.ft-mini-cart__btn--view:hover,
.ft-mini-cart__btn--continue:hover {
border-color: var(--ft-black);
background: #f8f9fa;
color: var(--ft-black);
}
/* "Finalizar compra" full-width amarillo */
#offcanvas-cart .buttons .checkout {
grid-column: 1 / -1;
background: var(--ft-yellow);
color: var(--ft-black);
font-weight: 700;
font-size: 0.85rem;
padding: 0.65rem 0.8rem;
}
#offcanvas-cart .buttons .checkout:hover {
background: var(--ft-yellow-dark);
color: var(--ft-black);
transform: translateY(-1px);
box-shadow: 0 8px 18px -6px rgba(241, 196, 15, 0.55);
}
/* Fallback para .wc-forward view-cart si aparece (bootscore) */
#offcanvas-cart .buttons .wc-forward:not(.checkout) {
background: #fff;
color: var(--ft-black);
border-color: #e5e7eb;
}
#offcanvas-cart .buttons .wc-forward:not(.checkout):hover {
border-color: var(--ft-black);
background: #f8f9fa;
}
#offcanvas-cart .woocommerce-mini-cart__empty-message {
padding: 3rem 1.5rem;
text-align: center;
color: #6c757d;
}
/* User (mi cuenta) offcanvas — ocultar contenido de sección, mostrar nav */
#offcanvas-user .woocommerce-MyAccount-content,
#offcanvas-user .woocommerce-Tabs-panel.panel > h2 {
display: none !important;
}
#offcanvas-user .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a {
display: block;
padding: 0.85rem 1.25rem;
color: var(--ft-black);
text-decoration: none;
border-bottom: 1px solid #f1f3f5;
font-weight: 500;
}
#offcanvas-user .woocommerce-MyAccount-navigation li.is-active a,
#offcanvas-user .woocommerce-MyAccount-navigation li a:hover {
background: rgba(241, 196, 15, 0.1);
color: var(--ft-black);
border-left: 1px solid var(--ft-yellow);
padding-left: calc(1.25rem - 3px);
}
/* --- Header action buttons (cart, user, search, menu) --- */
.ft-header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: transparent;
border: 1px solid #e9ecef;
border-radius: 0.55rem;
padding: 0.5rem 0.75rem;
color: var(--ft-black);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
position: relative;
line-height: 1;
}
.ft-header-btn:hover,
.ft-header-btn:focus {
background: var(--ft-black);
border-color: var(--ft-black);
color: #fff;
outline: none;
}
.ft-header-btn .ft-header-icon {
display: block;
flex-shrink: 0;
stroke: currentColor;
}
/* Cart badge + total — bootscore mete .cart-content-count (absolute via utility)
+ .cart-total (inline) dentro de .cart-content. */
.cart-toggler .cart-content {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
line-height: 1;
}
.cart-toggler .cart-content-count,
.cart-toggler span.cart-content-count {
/* Pisamos los estilos de BS badge para que matchee nuestra escala */
min-width: 18px;
height: 18px;
padding: 0 0.3rem;
background: #dc3545 !important;
color: #fff !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
line-height: 1 !important;
border: 2px solid #fff;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
/* Badge anclado al borde izquierdo-superior de .cart-content, que sitúa justo
después del ícono. Así queda en la esquina top-right del ícono sin importar
si el .cart-total aparece al lado (desktop) o no (mobile). */
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
transform: translate(-55%, -40%) !important;
}
.cart-toggler .cart-total {
font-size: 0.85rem;
font-weight: 700;
color: inherit;
white-space: nowrap;
margin-left: 0.4rem;
}
/* En mobile ocultamos el total para ahorrar espacio (bootscore ya tiene d-none d-md-inline) */
@media (max-width: 767px) {
.ft-header-btn { padding: 0.45rem 0.55rem; }
}
/* Hamburguesa mobile — que matchee estilo */
.ft-header-btn--nav-toggler i.fa-solid.fa-bars {
/* Reemplazamos el icono FA con SVG outline vía pseudo-element */
font-size: 0;
position: relative;
width: 22px;
height: 22px;
display: inline-block;
}
.ft-header-btn--nav-toggler i.fa-solid.fa-bars::before {
content: '';
position: absolute;
inset: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/20px 20px;
mask: url("data:image/svg+xml;utf8,") no-repeat center/20px 20px;
}
/* Navbar brand — constrain logo size (el FT-logo.png viene de 2141x371) */
.navbar-brand {
flex-shrink: 0;
padding: 0.25rem 0;
margin-right: auto;
}
.navbar-brand img {
max-height: 44px;
width: auto;
height: auto;
display: block;
}
/* Bootscore mete 2 ![]()
(light/dark theme). Usamos solo la primera. */
.navbar-brand img + img { display: none !important; }
@media (max-width: 991px) {
.navbar-brand { padding: 0.15rem 0; }
.navbar-brand img { max-height: 28px; }
.navbar, #nav-main.navbar { padding-top: 0.4rem; padding-bottom: 0.4rem; min-height: 56px; }
.navbar .navbar-toggler { padding: 0.35rem 0.5rem; }
.navbar .bi, .navbar .fa { font-size: 1.15rem; }
}
/* --- Checkout multi-step --- */
.ft-checkout-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.ft-checkout-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 2rem;
align-items: start;
}
@media (max-width: 991px) {
.ft-checkout-grid { grid-template-columns: 1fr; }
}
/* Progress bar */
.ft-checkout-progress {
background: var(--ft-black);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.75rem;
}
.ft-progress-steps {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.ft-progress-line {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.15);
transition: background 0.3s ease;
}
.ft-progress-line.active { background: var(--ft-yellow); }
.ft-progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ft-progress-step .ft-step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
.ft-progress-step .ft-step-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.35);
transition: color 0.3s ease;
}
.ft-progress-step.active .ft-step-circle {
background: rgba(241, 196, 15, 0.15);
border-color: var(--ft-yellow);
color: var(--ft-yellow);
}
.ft-progress-step.active .ft-step-label { color: rgba(255, 255, 255, 0.9); }
.ft-progress-step.completed .ft-step-circle {
background: var(--ft-yellow);
border-color: var(--ft-yellow);
color: var(--ft-black);
}
/* Step cards */
.ft-step--hidden { display: none !important; }
.ft-step-card {
background: #fff;
border-radius: 1rem;
border: 1px solid #e9ecef;
overflow: hidden;
box-shadow: 0 2px 16px rgba(10, 8, 9, 0.06);
}
.ft-step-header {
background: var(--ft-black);
padding: 1.25rem 1.5rem;
position: relative;
overflow: hidden;
color: #fff;
}
.ft-step-header::after {
content: attr(data-num);
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 3.5rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.04);
line-height: 1;
pointer-events: none;
}
.ft-step-num {
font-size: 0.7rem;
font-weight: 700;
color: var(--ft-yellow);
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 4px;
}
.ft-step-title {
font-size: 1.15rem;
font-weight: 700;
color: #fff;
margin: 0 0 2px;
}
.ft-step-sub {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
.ft-step-body { padding: 1.25rem 1.5rem; text-align: left; }
.ft-step-body h2,
.ft-step-body h3,
.ft-step-body h4,
.ft-step-body label,
.ft-step-body p,
.ft-step-body legend { text-align: left; }
.ft-step-nav {
display: flex;
gap: 12px;
padding: 1.25rem 1.5rem;
border-top: 1px solid #e9ecef;
background: #fafafa;
}
.ft-btn-next { margin-left: auto; }
/* Login notice */
.ft-login-notice {
display: flex;
gap: 8px;
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 1.25rem;
}
.ft-login-notice a {
color: var(--ft-yellow-dark);
font-weight: 600;
}
/* WC billing/shipping fields adaptados a BS */
.ft-step-body .woocommerce-billing-fields,
.ft-step-body .woocommerce-shipping-fields,
.ft-step-body .woocommerce-additional-fields {
margin-bottom: 0;
}
.ft-step-body h3 {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6c757d;
margin: 1rem 0 0.65rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid #f0f1f3;
}
.ft-step-body h3:first-child { margin-top: 0; }
/* Grid: campos cortos (postcode/state/city) en 2 columnas en >sm */
.ft-step-body .woocommerce-billing-fields__field-wrapper,
.ft-step-body .woocommerce-shipping-fields__field-wrapper,
.ft-step-body .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 0.75rem;
}
@media (max-width: 575.98px) {
.ft-step-body .woocommerce-billing-fields__field-wrapper,
.ft-step-body .woocommerce-shipping-fields__field-wrapper,
.ft-step-body .woocommerce-additional-fields__field-wrapper {
grid-template-columns: 1fr;
}
}
.ft-step-body .form-row {
margin-bottom: 0.75rem;
}
/* Campos largos ocupan toda la fila */
.ft-step-body .form-row.form-row-wide,
.ft-step-body .form-row.notes,
.ft-step-body .form-row#order_comments_field,
.ft-step-body .form-row#billing_address_1_field,
.ft-step-body .form-row#billing_address_2_field,
.ft-step-body .form-row#shipping_address_1_field,
.ft-step-body .form-row#shipping_address_2_field,
.ft-step-body .form-row#billing_email_field,
.ft-step-body .form-row#shipping_company_field,
.ft-step-body .form-row#billing_company_field {
grid-column: 1 / -1;
}
.ft-step-body .form-row label {
display: block;
font-size: 0.78rem;
font-weight: 600;
margin-bottom: 4px;
color: #495057;
letter-spacing: 0.01em;
}
.ft-step-body .form-row label .required,
.ft-step-body .form-row label abbr.required {
color: #dc3545;
text-decoration: none;
border: 0;
}
.ft-step-body .woocommerce-input-wrapper input,
.ft-step-body .woocommerce-input-wrapper select,
.ft-step-body .woocommerce-input-wrapper textarea,
.ft-step-body .select2-selection {
width: 100%;
padding: 0.55rem 0.8rem !important;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
font-size: 0.9rem;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
height: auto !important;
line-height: 1.3;
}
.ft-step-body .select2-selection { min-height: 38px; }
.ft-step-body .select2-selection__rendered { line-height: 26px !important; padding-left: 0 !important; }
.ft-step-body .select2-selection__arrow { height: 36px !important; }
.ft-step-body .woocommerce-input-wrapper input:focus,
.ft-step-body .woocommerce-input-wrapper select:focus,
.ft-step-body .woocommerce-input-wrapper textarea:focus {
outline: none;
border-color: var(--ft-yellow);
box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.2);
}
.ft-step-body .ft-input--error,
.ft-step-body input.ft-input--error {
border-color: #dc3545 !important;
background: #fff5f5 !important;
}
/* Shipping wrapper */
#ft-shipping-wrapper .woocommerce-shipping-methods {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
#ft-shipping-wrapper .woocommerce-shipping-methods li {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #dee2e6;
border-radius: 0.75rem;
cursor: pointer;
background: #fff;
transition: all 0.2s ease;
position: relative;
}
#ft-shipping-wrapper .woocommerce-shipping-methods li:hover {
border-color: rgba(241, 196, 15, 0.5);
background: rgba(241, 196, 15, 0.02);
}
#ft-shipping-wrapper .woocommerce-shipping-methods li.is-selected {
border-color: var(--ft-yellow);
background: rgba(241, 196, 15, 0.05);
box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}
#ft-shipping-wrapper .woocommerce-shipping-methods li label {
margin: 0;
cursor: pointer;
flex: 1;
font-weight: 600;
color: var(--ft-black);
}
#ft-shipping-wrapper input[name^="shipping_method"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.ft-shipping-loading {
display: flex;
align-items: center;
gap: 10px;
color: #6c757d;
font-size: 0.9rem;
padding: 1rem 0;
}
.ft-shipping--error { border: 1px solid #dc3545 !important; border-radius: 0.75rem; padding: 1rem; }
/* Confirm step */
.ft-confirm-info {
background: #fff8e1;
border: 1px solid #f1c40f55;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.ft-confirm-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #25d366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Payment section: solo COD, esconder lo superfluo */
.ft-payment-wrap .wc_payment_methods { list-style: none; padding: 0; margin: 0 0 1rem; }
.ft-payment-wrap .wc_payment_method {
background: #f8f9fa;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.ft-payment-wrap .wc_payment_method > label {
font-weight: 700;
color: var(--ft-black);
}
.ft-payment-wrap .payment_box {
background: transparent !important;
padding: 0.5rem 0 0 !important;
color: #6c757d;
font-size: 0.9rem;
}
.ft-payment-wrap .payment_box::before { display: none !important; }
.ft-payment-wrap input[type="radio"] { display: none; }
.ft-payment-wrap .terms { margin: 1rem 0; }
/* Summary panel */
.ft-checkout-summary-col { position: sticky; top: 2rem; }
.ft-order-summary {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 2px 16px rgba(10, 8, 9, 0.06);
}
.ft-summary-header {
background: var(--ft-black);
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.ft-summary-title {
font-size: 0.9rem;
font-weight: 700;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ft-summary-toggle {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 4px;
}
.ft-summary-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.woocommerce-checkout-review-order-table {
width: 100%;
font-size: 0.88rem;
border-collapse: collapse;
}
/* Truco width:1% + nowrap solo funciona con table-layout AUTO (default). */
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tbody td:last-child,
.woocommerce-checkout-review-order-table tfoot td {
width: 1%;
white-space: nowrap;
text-align: right;
}
.woocommerce-checkout-review-order-table thead th {
padding: 10px 14px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6c757d;
border-bottom: 1px solid #e9ecef;
font-weight: 600;
white-space: nowrap;
}
.woocommerce-checkout-review-order-table tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(222, 226, 230, 0.5);
vertical-align: top;
color: var(--ft-black);
word-break: break-word;
}
.woocommerce-checkout-review-order-table tbody td.product-name {
font-size: 0.85rem;
line-height: 1.35;
}
.woocommerce-checkout-review-order-table tbody td.product-name .product-quantity {
color: #6c757d;
font-weight: 500;
}
.woocommerce-checkout-review-order-table tbody td.product-total {
text-align: right;
font-weight: 600;
font-size: 0.88rem;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
padding: 8px 14px;
font-size: 0.83rem;
color: #6c757d;
border-bottom: 1px solid rgba(222, 226, 230, 0.4);
}
.woocommerce-checkout-review-order-table tfoot td {
text-align: right;
color: var(--ft-black);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
font-size: 0.95rem;
font-weight: 700;
color: var(--ft-black);
border-top: 1px solid #e9ecef;
border-bottom: none;
}
/* Reducir el "Subtotal" header de tabla en pantallas chicas para que respire */
@media (max-width: 380px) {
.woocommerce-checkout-review-order-table { font-size: 0.82rem; }
.woocommerce-checkout-review-order-table thead th { font-size: 0.65rem; padding: 8px 10px; }
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { padding: 8px 10px; }
}
.ft-summary-free { color: #16a34a; font-weight: 600; }
/* Coupon dentro del summary */
.ft-summary-coupon {
border-top: 1px solid #e9ecef;
margin-top: 0;
padding: 0;
background: #fafafa;
}
.ft-summary-coupon__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--ft-black);
cursor: pointer;
transition: background 0.15s ease;
}
.ft-summary-coupon__toggle:hover { background: #f3f4f6; }
.ft-summary-coupon__toggle i.fa-ticket {
color: var(--ft-yellow-dark);
margin-right: 0.4rem;
}
.ft-summary-coupon__chevron {
transition: transform 0.2s ease;
font-size: 0.75rem;
color: #9ca3af;
}
.ft-summary-coupon__toggle[aria-expanded="true"] .ft-summary-coupon__chevron {
transform: rotate(180deg);
}
.ft-summary-coupon__panel {
padding: 0 1.25rem 1rem;
}
.ft-summary-coupon__row {
display: flex;
gap: 0.4rem;
}
.ft-summary-coupon__input {
flex: 1;
min-width: 0;
padding: 0.5rem 0.75rem !important;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
font-size: 0.88rem;
background: #fff;
}
.ft-summary-coupon__input:focus {
outline: none;
border-color: var(--ft-yellow);
box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.15);
}
.ft-summary-coupon__btn {
flex: 0 0 auto;
padding: 0.5rem 1rem;
background: var(--ft-black);
color: #fff;
border: 0;
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.ft-summary-coupon__btn:hover:not(:disabled) {
background: var(--ft-yellow);
color: var(--ft-black);
}
.ft-summary-coupon__btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ft-summary-coupon__msg {
margin-top: 0.5rem;
padding: 0.4rem 0.6rem;
font-size: 0.78rem;
border-radius: 0.4rem;
line-height: 1.4;
}
.ft-summary-coupon__msg.is-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.ft-summary-coupon__msg.is-success {
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
}
@media (max-width: 991px) {
.ft-summary-body { display: none; }
.ft-summary-body.ft-summary-body--open { display: block; }
}
/* ========================================================
SHOP HERO — banner con imagen + título + filtros activos
======================================================== */
.ft-shop-hero {
position: relative;
overflow: hidden;
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
background: linear-gradient(135deg, var(--ft-black) 0%, #1a1716 50%, #2a2421 100%);
color: #fff;
margin-bottom: 0;
text-align: center;
}
.ft-shop-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
opacity: 0.9;
filter: saturate(1.15) contrast(1.08) brightness(0.95);
transform: scale(1.05);
}
.ft-shop-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(135deg, rgba(10, 8, 9, 0.8) 0%, rgba(10, 8, 9, 0.55) 55%, rgba(10, 8, 9, 0.75) 100%),
radial-gradient(circle at 85% 20%, rgba(241, 196, 15, 0.18) 0%, transparent 55%);
}
/* Cuando hay imagen real: overlay liviano y degrade de abajo para que la imagen se vea pero el texto siga legible. */
.ft-shop-hero--has-bg .ft-shop-hero__overlay {
background:
linear-gradient(180deg, rgba(10, 8, 9, 0.15) 0%, rgba(10, 8, 9, 0.05) 35%, rgba(10, 8, 9, 0.55) 100%),
radial-gradient(circle at 50% 60%, transparent 0%, rgba(10, 8, 9, 0.35) 100%);
}
.ft-shop-hero__inner {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Breadcrumb dentro del hero: pill con contraste sobre fondo oscuro */
.ft-shop-hero__breadcrumb {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
position: relative;
z-index: 3;
}
.ft-shop-hero__breadcrumb .wc-breadcrumb,
.ft-shop-hero__breadcrumb .woocommerce-breadcrumb,
.ft-shop-hero__breadcrumb > nav {
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
padding: 0.55rem 1.1rem !important;
margin: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 999px !important;
font-size: 0.85rem;
color: #ffffff !important;
text-align: center;
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
letter-spacing: 0.01em;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.ft-shop-hero__breadcrumb .breadcrumb {
justify-content: center;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
display: inline-flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.ft-shop-hero__breadcrumb a {
color: rgba(255, 255, 255, 0.88) !important;
text-decoration: none !important;
font-weight: 500;
transition: color 0.15s ease;
}
.ft-shop-hero__breadcrumb a:hover { color: var(--ft-yellow) !important; }
.ft-shop-hero__breadcrumb i,
.ft-shop-hero__breadcrumb .bi,
.ft-shop-hero__breadcrumb .fa,
.ft-shop-hero__breadcrumb svg { color: var(--ft-yellow) !important; }
.ft-shop-hero__breadcrumb ol { margin: 0 !important; padding: 0 !important; background: transparent !important; }
.ft-shop-hero__breadcrumb .breadcrumb-item,
.ft-shop-hero__breadcrumb > nav,
.ft-shop-hero__breadcrumb > nav * { color: #ffffff !important; }
.ft-shop-hero__breadcrumb .breadcrumb-item.active,
.ft-shop-hero__breadcrumb span:last-child { color: var(--ft-yellow) !important; font-weight: 600; }
/* Separador Woo default es " / " dentro de