/* ── multitools-tienda — Public CSS ──────────────────────────────────────────
   Generado a partir de repuestos-config/assets/css/repuestos-public.css (RepuMoto) con la paleta de
   Ferretería Multi Tools: amarillo construcción (#f5b800, casco/placa del logo) sobre negro cálido
   (#1f1d1a), franjas de seguridad en vez de la bandera de carreras. Se carga DESPUÉS de rce-public.css y
   SOLO en home/catálogo de multitoolscordoba.com (ver multitools-tienda.php).
   ────────────────────────────────────────────────────────────────────────── */

:root {
	--rce-graphite:    #f5b800;
	--rce-graphite-lt: #ffd23f;
	--rce-orange:      #f5b800;
	--rce-orange-dim:  #d49a00;
	--rce-steel:       #9a9a9a;
	--rce-cream:       #171513;
	--rce-sand:        #24211d;
	--rce-text:        #f2f0ee;
	--rce-muted:       #a8a196;
	--rce-border:      #3a352d;
	--rce-danger:      #ff5252;
	--rce-font-display: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.rce-page-shell { background: var(--rce-cream); }

/* SIN overflow-x acá a propósito -- bug real reportado con captura: cualquier
   ancestro de un elemento position:sticky con overflow distinto de "visible"
   desactiva el sticky por completo (lo vuelve un bloque normal que se
   scrollea con todo lo demás). .rc-page es ancestro directo de .rc-header
   (sticky) -- con overflow-x:hidden acá, el header entero se perdía al
   scrollear, y el carrito/menú (esos sí position:fixed de verdad, ajenos a
   este problema) quedaban "flotando" solos sobre el contenido, pareciendo
   fuera de lugar. El desborde horizontal que esto prevenía en .rc-hero/
   .rc-banner ya se corta en esos mismos elementos (ver ambos, `overflow:
   hidden` puesto directo ahí, no hace falta acá también). */
.rc-page { background: var(--rce-cream); color: var(--rce-text); }
.rc-page * { box-sizing: border-box; }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.rc-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(23, 21, 19, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rce-border);
	padding: 14px clamp(16px, 4vw, 48px) 12px;
}
.rc-header__top { display: flex; align-items: center; }
.rc-logo {
	font-family: var(--rce-font-display); font-weight: 700; font-size: 1.3rem;
	letter-spacing: .02em; color: #fff; text-decoration: none; text-transform: uppercase;
}
.rc-logo span { color: var(--rce-orange); }
.rc-header__search { position: relative; margin-top: 12px; }
.rc-header__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .9rem; }
.rc-header__search-input {
	width: 100%; background: var(--rce-sand); border: 1px solid var(--rce-border);
	border-radius: 8px; padding: 11px 14px 11px 38px; color: var(--rce-text);
	font-family: inherit; font-size: .9rem;
}
.rc-header__search-input::placeholder { color: var(--rce-muted); }
.rc-header__search-input:focus { outline: none; border-color: var(--rce-orange); }

/* Carrito: vuelve a flotar ABAJO a la derecha (posición de fábrica de
   cart-widget.php, sin overrides de posición acá) -- a pedido explícito del
   usuario, para que nunca compita con la barra de arriba. Solo se le tocan
   colores para que combine con el tema oscuro. */
#rce-cart-fab {
	background: var(--rce-orange) !important; box-shadow: 0 6px 18px rgba(245,184,0,.4) !important;
}
.rce-cart-fab__badge {
	background: #1c1a17 !important; color: var(--rce-orange) !important;
}
/* Bug real (mismo patrón ya visto en otros motores de este proyecto): sin
   esto, [hidden] pierde contra el display:flex de rce-public.css a igual
   especificidad -- la insignia "0" quedaba visible siempre, incluso con el
   carrito vacío (ver initBadgeCarrito() en repuestos-public.js). */
.rce-cart-fab__badge[hidden] { display: none !important; }

/* Menú: centrado arriba -- a pedido explícito del usuario ("el botoncito de
   menú en el medio"), ahora que el carrito ya no comparte esa esquina.
   position:fixed (no sticky): sigue siendo el MISMO botón de
   menu-drawer.php/rce-public.js, solo repositicionado; con .rc-header ya
   sticky de verdad (ver el fix de overflow arriba), queda alineado con el
   header en todo momento sin necesitar tocar su JS. */
#rce-menu-toggle {
	top: 12px !important; right: auto !important; left: 50% !important;
	transform: translateX(-50%) !important;
	width: 40px !important; height: 40px !important;
	background: var(--rce-sand) !important; border: 1px solid var(--rce-border) !important;
	box-shadow: none !important; z-index: 501 !important;
}
.rce-menu-toggle__icon { width: 16px; height: 16px; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.rc-hero {
	position: relative; overflow: hidden;
	background: radial-gradient(ellipse 900px 500px at 80% -10%, rgba(245, 184, 0, .25), transparent 60%), #171513;
	padding: clamp(48px, 9vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 88px);
}
.rc-hero__flag {
	position: absolute; inset: 0; opacity: .07; pointer-events: none;
	background-image:
		repeating-linear-gradient(-45deg, #f5b800 0 22px, transparent 22px 44px);
	mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
.rc-hero__content { position: relative; z-index: 1; max-width: 640px; }
.rc-eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--rce-orange); color: var(--rce-orange);
	font-family: var(--rce-font-display); font-weight: 600; font-size: .72rem;
	letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px;
	margin-bottom: 18px;
}
.rc-hero__title {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: .01em;
	color: #fff; margin-bottom: 18px; text-wrap: balance;
}
.rc-accent { color: var(--rce-orange); }
.rc-hero__subtitle { color: var(--rce-muted); font-size: clamp(.95rem, 2vw, 1.1rem); max-width: 46ch; margin-bottom: 30px; }
.rc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── BOTONES propios (además de los .rce-btn ya existentes) ────────────────── */
.rc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--rce-font-display); font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; font-size: .82rem; padding: 13px 26px;
	border-radius: 4px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.rc-btn--primary { background: var(--rce-orange); color: #1c1a17; }
.rc-btn--primary:hover { background: var(--rce-orange-dim); transform: translateY(-2px); }
.rc-btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.rc-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.rc-btn--outline { background: transparent; border-color: var(--rce-orange); color: var(--rce-orange); }
.rc-btn--outline:hover { background: var(--rce-orange); color: #1c1a17; }
.rc-btn--sm { padding: 8px 14px; font-size: .72rem; }
.rc-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── CONFIANZA ────────────────────────────────────────────────────────────── */
.rc-trust {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--rce-border); border-top: 1px solid var(--rce-border);
}
.rc-trust__item {
	display: flex; align-items: center; gap: 10px; background: var(--rce-cream);
	padding: 16px clamp(14px, 3vw, 28px);
}
.rc-trust__icon { font-size: 1.3rem; flex-shrink: 0; }
.rc-trust__item strong { display: block; font-size: .82rem; color: #fff; }
.rc-trust__item span { display: block; font-size: .74rem; color: var(--rce-muted); }
@media (min-width: 720px) {
	.rc-trust { grid-template-columns: repeat(4, 1fr); }
}

/* ── SECCIONES GENERALES ──────────────────────────────────────────────────── */
.rc-section { padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 64px); }
.rc-section--alt { background: #1b1916; }
.rc-section__header {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; margin-bottom: 26px; border-bottom: 2px solid var(--rce-orange);
	padding-bottom: 14px;
}
.rc-section__header h2 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.3rem, 3vw, 1.7rem); color: #fff; letter-spacing: .02em; margin: 0 0 4px;
}
.rc-section__header p { color: var(--rce-muted); font-size: .88rem; margin: 0; }
.rc-link-ver-todo {
	color: var(--rce-orange); font-family: var(--rce-font-display); font-weight: 600;
	font-size: .78rem; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.rc-link-ver-todo:hover { text-decoration: underline; }

/* ── CATEGORÍAS (home) ────────────────────────────────────────────────────── */
.rc-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .rc-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rc-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-cat-tile {
	position: relative; display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 6px; text-align: center; text-decoration: none;
	background: linear-gradient(160deg, #262320, #1b1916);
	border: 1px solid var(--rce-border); border-radius: 6px;
	padding: 26px 12px; min-height: 140px; overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.rc-cat-tile::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--rce-orange); transform: scaleX(0); transform-origin: left;
	transition: transform .2s ease;
}
.rc-cat-tile:hover { border-color: var(--rce-orange); transform: translateY(-3px); }
.rc-cat-tile:hover::after { transform: scaleX(1); }
.rc-cat-tile__emoji { font-size: 2.2rem; filter: drop-shadow(0 4px 10px rgba(245,184,0,.35)); }
.rc-cat-tile__label { font-family: var(--rce-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; color: #fff; }
.rc-cat-tile__count { font-size: .72rem; color: var(--rce-muted); }

/* ── PRODUCTOS DESTACADOS (home, tarjetas estáticas) ─────────────────────────
   Mismo lenguaje visual que .rce-card del catálogo (ver abajo), pero
   servidas directo por PHP -- no pasan por Catalogo/rce-tpl-product-card. */
.rc-product-grid--static { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 720px) { .rc-product-grid--static { grid-template-columns: repeat(4, 1fr); } }
.rc-card-static {
	background: var(--rce-sand); border: 1px solid var(--rce-border); border-radius: 6px; overflow: hidden;
	display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease;
}
.rc-card-static:hover { border-color: var(--rce-orange); transform: translateY(-3px); }
.rc-card-static__img {
	position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 30%, #2b2824, #191714);
	font-size: 3rem;
}
.rc-badge-agotado {
	position: absolute; top: 8px; left: 8px; background: var(--rce-danger); color: #fff;
	font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
}
.rc-card-static--agotado .rc-card-static__img { opacity: .5; }
.rc-card-static__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rc-card-static__cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rce-muted); }
.rc-card-static__body h3 { font-size: .88rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.rc-card-static__footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rc-card-static__price { font-family: var(--rce-font-display); font-weight: 700; font-size: 1rem; color: var(--rce-orange); }

/* ── BANNER SECUNDARIO ────────────────────────────────────────────────────── */
.rc-banner {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, #211e1a, #171513);
	padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 64px);
	border-top: 1px solid var(--rce-border); border-bottom: 1px solid var(--rce-border);
}
.rc-banner__flag {
	position: absolute; inset: 0; opacity: .04; pointer-events: none;
	background-image: repeating-linear-gradient(45deg, #f5b800 0 14px, transparent 14px 28px);
}
.rc-banner__content { position: relative; z-index: 1; max-width: 560px; }
.rc-banner__content h2 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.6rem, 4vw, 2.2rem); color: #fff; margin-bottom: 12px; text-wrap: balance;
}
.rc-banner__content p { color: var(--rce-muted); margin-bottom: 24px; }

/* ── MARCAS ───────────────────────────────────────────────────────────────── */
.rc-brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rce-border); border: 1px solid var(--rce-border); }
@media (min-width: 640px) { .rc-brands-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-brand-tile {
	background: var(--rce-cream); text-align: center; padding: 26px 10px;
	font-family: var(--rce-font-display); font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; font-size: .82rem; color: var(--rce-muted);
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.rc-footer { background: #12100e; border-top: 3px dashed var(--rce-orange); padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 64px) 0; }
.rc-footer__top { display: grid; gap: 28px; padding-bottom: 32px; }
@media (min-width: 720px) { .rc-footer__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.rc-logo--footer { display: inline-block; margin-bottom: 10px; }
.rc-footer__brand p { color: var(--rce-muted); font-size: .86rem; max-width: 34ch; }
.rc-footer__col h4 { font-family: var(--rce-font-display); color: var(--rce-orange); font-size: .78rem; letter-spacing: .08em; margin: 0 0 12px; }
.rc-footer__col { display: flex; flex-direction: column; gap: 9px; }
.rc-footer__col a, .rc-footer__col span { color: var(--rce-muted); text-decoration: none; font-size: .86rem; }
.rc-footer__col a:hover { color: #fff; }
.rc-footer__bottom { border-top: 1px solid var(--rce-border); padding: 18px 0; text-align: center; color: var(--rce-muted); font-size: .76rem; }

/* ── CATÁLOGO ─────────────────────────────────────────────────────────────── */
.rc-cat-header { padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 64px) 8px; }
.rc-cat-header h1 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.8rem, 5vw, 2.6rem); color: #fff; margin: 0 0 8px;
}
.rc-cat-header p { color: var(--rce-muted); margin: 0 0 14px; max-width: 52ch; }
.rc-cat-header::after { content: ""; display: block; width: 64px; height: 3px; background: var(--rce-orange); }

/* Tabs horizontales -- pisa el sidebar vertical fijo original (.rce-cat-nav)
   por completo: position:static, scroll horizontal en vez de vertical. */
/* Pegada arriba (debajo del header) al scrollear -- a pedido explícito del
   usuario, para no perder de vista los filtros mientras se recorre el grid.
   `top` usa --rc-header-h (medida en vivo por repuestos-public.js, igual
   criterio que medirAlturaHeader() del motor) en vez de un número fijo: el
   alto real del header cambia según ancho de pantalla/idioma. Fondo opaco
   obligatorio -- sin esto el grid se ve "pasar por debajo" de las tabs. */
.rc-cat-tabs-wrap {
	position: sticky; top: var(--rc-header-h, 108px); z-index: 400;
	background: var(--rce-cream); padding: 14px clamp(20px, 5vw, 64px) 12px;
	border-bottom: 1px solid var(--rce-border);
}
.rce-cat-nav {
	position: static !important; width: auto !important; height: auto !important;
	flex-direction: row !important; align-items: center !important;
	background: transparent !important; border-right: none !important; box-shadow: none !important;
	padding: 0 !important; gap: 8px !important;
	overflow-x: auto; overflow-y: hidden !important;
	scrollbar-width: none;
}
.rce-cat-nav::-webkit-scrollbar { display: none; }
.rce-cat-tab, button.rce-cat-tab {
	flex-direction: row !important; width: auto !important; flex-shrink: 0;
	padding: 9px 18px !important; border-radius: 4px !important;
	border: 1.5px solid var(--rce-border) !important; background: var(--rce-sand) !important;
	font-family: var(--rce-font-display); font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; font-size: .74rem !important; color: var(--rce-muted) !important;
}
.rce-cat-tab__emoji { display: none; }
.rce-cat-tab:hover, button.rce-cat-tab:hover { border-color: var(--rce-orange) !important; color: #fff !important; background: var(--rce-sand) !important; }
.rce-cat-tab--active, button.rce-cat-tab.rce-cat-tab--active {
	background: var(--rce-orange) !important; border-color: var(--rce-orange) !important; color: #1c1a17 !important;
}

.rc-cat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px clamp(20px, 5vw, 64px) 0; }
.rc-cat-toolbar__search {
	flex: 1; min-width: 200px; background: var(--rce-sand); border: 1px solid var(--rce-border);
	border-radius: 6px; padding: 11px 14px; color: var(--rce-text); font-family: inherit; font-size: .88rem;
}
.rc-cat-toolbar__sort {
	background: var(--rce-sand); border: 1px solid var(--rce-border); border-radius: 6px;
	padding: 11px 14px; color: var(--rce-text); font-family: var(--rce-font-display);
	font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; cursor: pointer;
}
.rc-cat-toolbar__search::placeholder { color: var(--rce-muted); }
.rc-cat-toolbar__search:focus, .rc-cat-toolbar__sort:focus { outline: none; border-color: var(--rce-orange); }

.rc-cat-count {
	padding: 16px clamp(20px, 5vw, 64px) 0; color: var(--rce-muted);
	font-family: var(--rce-font-display); font-size: .78rem; letter-spacing: .06em;
}

.rce-products { margin-left: 0 !important; padding: 12px clamp(20px, 5vw, 64px) 60px !important; max-width: none !important; }
.rc-product-grid.rce-product-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .rc-product-grid.rce-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rc-product-grid.rce-product-grid { grid-template-columns: repeat(4, 1fr); } }

.rce-card {
	background: var(--rce-sand) !important; border: 1px solid var(--rce-border); border-radius: 6px;
}
.rce-card:hover { border-color: var(--rce-orange); }
.rce-card__img-wrap { background: radial-gradient(circle at 50% 30%, #2b2824, #191714) !important; }
.rce-card__img-placeholder { filter: drop-shadow(0 4px 10px rgba(245,184,0,.3)); }
.rce-card__title { color: #fff !important; }
.rce-card__desc { display: none; }
.rce-card__cats { display: none; }
.rce-card__price { color: var(--rce-orange) !important; font-family: var(--rce-font-display); }
.rce-card__add-btn { background: var(--rce-graphite) !important; }
.rc-empty.rce-empty, .rc-empty.rce-error-msg { color: var(--rce-muted); }
.rce-loading { color: var(--rce-muted); }
.rce-cargar-mas {
	background: transparent !important; border: 1.5px solid var(--rce-orange) !important;
	color: var(--rce-orange) !important; font-family: var(--rce-font-display) !important;
	text-transform: uppercase; letter-spacing: .04em;
}
.rce-cargar-mas:hover { background: var(--rce-orange) !important; color: #1c1a17 !important; }

/* Menú/carrito drawers, modal de variante -- solo redefinen colores acá vía
   las mismas variables de arriba, sin tocar su HTML/estructura/animaciones. */
.rce-menu-drawer__panel, .rce-cart-drawer__panel, .rce-variante-modal__panel { background: var(--rce-sand) !important; color: var(--rce-text); }


/* ── Agregados de Multi Tools ─────────────────────────────────────────────── */
.rc-header__top { justify-content: space-between; gap: 12px; }
.rc-logo { display: inline-flex; align-items: center; gap: 8px; }
.rc-logo__img { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; background: #f5b800; padding: 2px; }
.rc-logo--footer .rc-logo__img { width: 44px; height: 44px; }
.rc-header__wa {
	font-family: var(--rce-font-display); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
	color: #1c1a17; background: var(--rce-orange); border-radius: 999px; padding: 7px 14px; text-decoration: none; white-space: nowrap;
}
.rc-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rc-hero__mascota {
	position: relative; z-index: 1; width: clamp(140px, 24vw, 260px); height: auto; flex-shrink: 0;
	filter: drop-shadow(0 18px 30px rgba(245, 184, 0, .28));
}
@media (max-width: 640px) {
	.rc-hero { flex-direction: column-reverse; align-items: flex-start; }
	.rc-hero__mascota { width: 120px; align-self: center; }
}
.rc-card-static__img img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; }
.rc-brand-tile { text-decoration: none; color: var(--rce-text); font-family: var(--rce-font-display); font-weight: 700; letter-spacing: .06em; }
.rc-brand-tile:hover { border-color: var(--rce-orange); color: var(--rce-orange); }
.rc-accent { color: var(--rce-orange); }

/* Botón de menú arriba a la derecha (en RepuMoto iba centrado); el de WhatsApp le deja lugar. */
#rce-menu-toggle { left: auto !important; right: clamp(16px, 4vw, 48px) !important; transform: none !important; }
.rc-header__wa { margin-right: 52px; }
/* Foto de producto: recuadro siempre cuadrado, la imagen se adapta adentro (una foto alta estiraba la tarjeta). */
.rc-card-static__img { overflow: hidden; }
.rc-card-static__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ── Ficha de producto (1.1.0) ────────────────────────────────────────────── */
#rce-product-grid .rce-card__img-wrap, #rce-product-grid .rce-card__body { cursor: pointer; }
.mtt-migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 18px clamp(16px, 4vw, 48px) 0; font-size: .82rem; color: var(--rce-muted); }
.mtt-migas a { color: var(--rce-muted); text-decoration: none; }
.mtt-migas a:hover { color: var(--rce-orange); }
.mtt-migas [aria-current] { color: var(--rce-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.mtt-producto {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px);
	padding: 20px clamp(16px, 4vw, 48px) clamp(28px, 5vw, 56px); max-width: 1280px; margin: 0 auto;
}
@media (max-width: 860px) { .mtt-producto { grid-template-columns: 1fr; } }
.mtt-producto__media {
	position: relative; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; border: 1px solid var(--rce-border);
	background: #fff; display: flex; align-items: center; justify-content: center; align-self: start;
}
.mtt-producto__media > img { width: 100%; height: 100%; object-fit: contain; padding: clamp(10px, 3vw, 28px); }
.mtt-producto__placeholder {
	position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 35%, #2b2824, #171513); font-size: clamp(4rem, 12vw, 7rem);
}
.mtt-producto__placeholder::after {
	content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
	background-image: repeating-linear-gradient(-45deg, #f5b800 0 22px, transparent 22px 44px);
}
.mtt-producto__placeholder-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #f5b800; padding: 3px; opacity: .9; }
.mtt-producto__agotado {
	position: absolute; top: 14px; left: 14px; background: var(--rce-danger); color: #fff; font-weight: 800;
	font-size: .78rem; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; letter-spacing: .04em;
}
.mtt-producto__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mtt-producto__info .rc-eyebrow { align-self: flex-start; text-decoration: none; }
.mtt-producto__titulo {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase; color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.1; margin: 0; overflow-wrap: anywhere;
}
.mtt-producto__codigos { display: flex; flex-wrap: wrap; gap: 8px; }
.mtt-producto__codigos span { font-size: .78rem; color: var(--rce-muted); border: 1px solid var(--rce-border); border-radius: 999px; padding: 3px 10px; }
.mtt-producto__corta { color: var(--rce-text); opacity: .85; margin: 0; }
.mtt-producto__precio { font-family: var(--rce-font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--rce-orange); line-height: 1; }
.mtt-producto__unidad, .mtt-producto__desde { font-size: .9rem; color: var(--rce-muted); font-weight: 600; }
.mtt-stock { font-size: .9rem; font-weight: 600; }
.mtt-stock--ok { color: #6fd38a; }
.mtt-stock--no { color: var(--rce-danger); }
.mtt-compra { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mtt-cantidad { display: inline-flex; border: 1px solid var(--rce-border); border-radius: 10px; overflow: hidden; background: var(--rce-sand); }
.mtt-cantidad__btn { width: 46px; border: 0; background: transparent; color: var(--rce-text); font-size: 1.3rem; cursor: pointer; }
.mtt-cantidad__btn:hover { color: var(--rce-orange); }
.mtt-cantidad__input {
	width: 64px; border: 0; background: transparent; color: var(--rce-text); text-align: center; font-size: 1.05rem; font-weight: 700;
	-moz-appearance: textfield;
}
.mtt-cantidad__input::-webkit-outer-spin-button, .mtt-cantidad__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mtt-agregar--principal { flex: 1 1 220px; justify-content: center; font-size: 1rem; padding: 14px 20px; }
.mtt-aviso { font-size: .88rem; padding: 10px 12px; border-radius: 8px; }
.mtt-aviso--ok { background: rgba(111, 211, 138, .12); color: #6fd38a; }
.mtt-aviso--tope { background: rgba(245, 184, 0, .12); color: var(--rce-orange); }
.mtt-wa { align-self: flex-start; }
.mtt-variantes { display: flex; flex-direction: column; gap: 8px; }
.mtt-variante {
	display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
	padding: 12px 14px; border: 1px solid var(--rce-border); border-radius: 10px; background: var(--rce-sand);
}
.mtt-variante strong { display: block; color: #fff; }
.mtt-variante__precio { font-family: var(--rce-font-display); font-weight: 700; color: var(--rce-orange); font-size: 1.15rem; }
@media (max-width: 480px) { .mtt-variante { grid-template-columns: 1fr auto; } .mtt-variante .mtt-agregar { grid-column: 1 / -1; } }
.mtt-producto__subtitulo { font-family: var(--rce-font-display); text-transform: uppercase; color: #fff; font-size: 1.05rem; margin: 10px 0 0; letter-spacing: .03em; }
.mtt-tecnica { margin: 0; border: 1px solid var(--rce-border); border-radius: 10px; overflow: hidden; }
.mtt-tecnica div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; }
.mtt-tecnica div + div { border-top: 1px solid var(--rce-border); }
.mtt-tecnica dt { padding: 10px 14px; background: var(--rce-sand); color: var(--rce-muted); font-size: .85rem; }
.mtt-tecnica dd { padding: 10px 14px; margin: 0; color: var(--rce-text); font-size: .9rem; overflow-wrap: anywhere; }
.mtt-descripcion__texto { max-width: 820px; color: var(--rce-text); line-height: 1.65; }
.mtt-card-link { text-decoration: none; color: inherit; }
.mtt-barra-compra {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; gap: 12px; align-items: center; justify-content: space-between;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(23, 21, 19, .96); border-top: 2px solid var(--rce-orange);
	backdrop-filter: blur(8px);
}
.mtt-barra-compra div { display: flex; flex-direction: column; min-width: 0; }
.mtt-barra-compra strong { color: var(--rce-orange); font-family: var(--rce-font-display); font-size: 1.2rem; }
.mtt-barra-compra span { color: var(--rce-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
	.mtt-barra-compra:not([hidden]) { display: flex; }
	body.mtt-ficha #rce-cart-fab { bottom: 84px !important; }
}
.mtt-no-encontrado { text-align: center; padding: clamp(48px, 10vw, 96px) 20px; }
.mtt-no-encontrado__emoji { font-size: 4rem; display: block; margin-bottom: 10px; }
.mtt-no-encontrado .rc-btn { margin-top: 18px; display: inline-flex; }

/* Ícono de reemplazo (producto sin foto) siempre centrado en el recuadro. */
.rc-card-static__img > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }