/* ─── Scroll reveal ──────────────────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Header FSE ────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-top: 1.6rem;
}

.site-header .wp-block-site-logo {
    flex-shrink: 0;
}

/* ── Header en modo claro: fondo igual al background del sitio ───────────────── */
html:not([data-theme="dark"]) .site-header {
    background-color: var(--wp--preset--color--background) !important;
    border-bottom: none;
}
/* Íconos y nav: dark sobre fondo claro */
html:not([data-theme="dark"]) .site-header .wp-block-navigation a,
html:not([data-theme="dark"]) .site-header .wp-block-navigation a:visited {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--accent) !important;
}
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container-open,
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .site-header .wc-block-mini-cart__button,
html:not([data-theme="dark"]) .site-header .wc-block-mini-cart__amount {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .site-header .accel-theme-toggle {
    color: var(--wp--preset--color--primary) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}
html:not([data-theme="dark"]) .site-header .accel-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}
/* Página activa */
html:not([data-theme="dark"]) .site-header .wp-block-navigation-item.current-menu-item > a,
html:not([data-theme="dark"]) .site-header .wp-block-navigation-item > a[aria-current="page"] {
    color: var(--wp--preset--color--accent) !important;
}

/* ── Header en modo oscuro: fondo primario oscuro ───────────────────────────── */
html[data-theme="dark"] .site-header {
    background-color: var(--wp--preset--color--primary) !important;
    border-bottom: none !important;
}
html[data-theme="dark"] .site-header .wp-block-navigation a,
html[data-theme="dark"] .site-header .wp-block-navigation a:visited {
    color: #ffffff !important;
}
html[data-theme="dark"] .site-header .wp-block-navigation a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="dark"] .site-header .wp-block-navigation__responsive-container-open,
html[data-theme="dark"] .site-header .wp-block-navigation__responsive-container-close {
    color: #ffffff !important;
}
html[data-theme="dark"] .site-header .wc-block-mini-cart__button,
html[data-theme="dark"] .site-header .wc-block-mini-cart__amount {
    color: #ffffff !important;
}
html[data-theme="dark"] .site-header .accel-theme-toggle {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="dark"] .site-header .accel-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .site-header .wp-block-navigation-item.current-menu-item > a,
html[data-theme="dark"] .site-header .wp-block-navigation-item > a[aria-current="page"] {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ── Dark mode: menú móvil ───────────────────────────────────────────────────── */
/* El overlay de navegación tiene background white hardcodeado en WordPress.
   En dark mode el texto cambia a color claro → blanco sobre blanco = invisible. */
html[data-theme="dark"] .wp-block-navigation__responsive-container {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--text) !important;
}
html[data-theme="dark"] .wp-block-navigation__responsive-container a,
html[data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--text) !important;
}
html[data-theme="dark"] .wp-block-navigation__responsive-close button,
html[data-theme="dark"] .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--text) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* ── Dark mode: elementos con fondo blanco hardcodeado ──────────────────────── */
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea {
    background-color: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--text) !important;
    border-color: var(--wp--preset--color--border) !important;
}
html[data-theme="dark"] .wc-block-components-notice-banner,
html[data-theme="dark"] .woocommerce-info,
html[data-theme="dark"] .woocommerce-message {
    background-color: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--text) !important;
}

/* color-scheme: le indica al browser que aplique dark UI nativa (scrollbars, inputs) */
html[data-theme="dark"] { color-scheme: dark; }
html:not([data-theme="dark"]) { color-scheme: light; }

/* ── Overlay del menú hamburguesa ── color según el modo activo ── */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
    background-color: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--primary) !important;
    /* Ocupar toda la pantalla */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}
/* Diálogo interno: centra el contenido */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0 !important;
}
/* Botón cerrar (×) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 1.5rem !important;
}
.wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--primary) !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    line-height: 1 !important;
    opacity: 0.8;
}
.wp-block-navigation__responsive-container-close:hover { opacity: 1; }
/* Modo claro: las reglas del .site-header tienen más especificidad y ponen los links
   en color oscuro → invisible sobre el fondo negro del overlay. Esto los sobreescribe. */
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container.is-menu-open a,
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container.is-menu-open a:visited,
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container.is-menu-open a:focus {
    color: var(--wp--preset--color--accent) !important;
}
html:not([data-theme="dark"]) .site-header .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--primary) !important;
}

/* Items de navegación dentro del overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open a:visited {
    color: var(--wp--preset--color--primary) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 1rem 0 !important;
    display: block !important;
    border-bottom: 1px solid var(--wp--preset--color--border) !important;
    transition: color 150ms ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus {
    color: var(--wp--preset--color--accent-light) !important;
}
/* Página activa */
.wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"],
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item a {
    color: var(--wp--preset--color--accent-light) !important;
    font-weight: 700 !important;
}

.site-header .wp-block-navigation a,
.site-header .wp-block-navigation a:visited {
    color: #ffffff;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms ease;
}

.site-header .wp-block-navigation a:hover {
    color: #ffffff;
}

/* Línea animada debajo de cada ítem */
.site-header .wp-block-navigation-item > a {
    position: relative;
}

.site-header .wp-block-navigation-item > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--wp--preset--color--accent-light);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms ease;
}

/* Hover: línea aparece */
.site-header .wp-block-navigation-item > a:hover::after {
    transform: scaleX(1);
}

/* Página activa: texto en acento + línea permanente */
.site-header .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation-item.current_page_item > a,
.site-header .wp-block-navigation-item > a[aria-current="page"] {
    color: var(--wp--preset--color--accent-light) !important;
    font-weight: 700 !important;
}

.site-header .wp-block-navigation-item.current-menu-item > a::after,
.site-header .wp-block-navigation-item.current_page_item > a::after,
.site-header .wp-block-navigation-item > a[aria-current="page"]::after {
    transform: scaleX(1);
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
    color: #ffffff;
}

/* Mini cart */
.site-header .wc-block-mini-cart__button {
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
}
.site-header .wc-block-mini-cart__amount { color: #ffffff; }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */

.hero-section .wp-block-cover__inner-container { width: 100%; }

/* ════════════════════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO — Classic loop (content-product.php) y FSE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor — aplica a toda tarjeta de producto del sitio ────────────── */
.cc-product-card,
li.wc-block-product {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 250ms ease, transform 250ms ease;
}
.cc-product-card:hover,
li.wc-block-product:hover {
    box-shadow: 0 10px 32px rgba(28,28,28,.12);
    transform: translateY(-4px);
}

/* ── Título arriba ───────────────────────────────────────────────────────── */
.cc-product-card__title,
.cc-card-title {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: var(--wp--preset--font-size--sm) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0.75rem 0.875rem 0.375rem !important;
    color: var(--wp--preset--color--text) !important;
}

/* Espaciado compacto dentro del panel de info */
.cc-card-info .cc-card-price {
    margin-top: 0.375rem !important;
    padding: 0 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 0.3rem !important;
}
/* del/ins tienen tamaños de letra distintos — sin esto, el alineado por
   baseline default hace que el precio tachado (más chico) se vea "caído"
   respecto al precio nuevo en vez de centrado con él. */
.cc-card-info .cc-card-price del,
.cc-card-info .cc-card-price ins {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none;
}
.cc-card-info .cc-card-price del { text-decoration: line-through; }
.cc-card-info .cc-extra-prices {
    margin-top: 0.25rem !important;
    padding: 0 0.875rem 0.75rem !important;
}
.cc-product-card__title a,
.cc-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.cc-product-card__title a:hover,
.cc-card-title a:hover {
    color: var(--wp--preset--color--accent) !important;
}

/* ── Imagen con overlay ──────────────────────────────────────────────────── */
.cc-product-card__image-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.cc-product-card__img-link { display: block; }

.cc-product-card__img,
.cc-product-card__image-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 400ms ease;
}
.cc-product-card:hover .cc-product-card__img { transform: scale(1.04); }

/* Badges */
.cc-product-card__badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}
.cc-product-card__badge--agotado { background: #888; color: #fff; }

/* Badge de oferta unificado (OFERTA, 2×1, 3×2, etc.) */
.cc-product-card__badge--promo {
    background: var(--wp--preset--color--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(194,123,46,0.35);
    line-height: 1.4;
    animation: cc-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes cc-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-product-card__badge--promo,
    .cc-sp-badge--promo { animation: none !important; }
}

/* Safety net: ocultar cualquier badge nativo de WooCommerce que se cuele */
span.onsale,
.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge,
.wc-block-components-product-badge,
.wc-block-grid__product-onsale { display: none !important; }

/* Ocultar accel-of-badge legacy (reemplazado por cc-sp-badges) */
.accel-of-badge { display: none !important; }

/* El bloque woocommerce/product-image necesita position:relative para los badges absolutos */
.wc-block-product-image,
.wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-image-gallery,
.cc-card-image { position: relative; }

/* ── Badges de oferta en detalle de producto ─────────────────────────────── */
.cc-sp-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem;
}
.cc-sp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.85rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}
.cc-sp-badge--oferta {
    background: var(--wp--preset--color--accent);
    color: #fff;
}
.cc-sp-badge--promo {
    background: #c8360e;
    color: #fff;
    animation: cc-badge-pulse 1.8s ease-in-out infinite;
}
.cc-sp-badge--cantidad {
    background: transparent;
    border: 1.5px solid var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}
html[data-theme="dark"] .cc-sp-badge--cantidad {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}

/* % de descuento junto al precio tachado/final — grande y llamativo.
   Mismo acento naranja que el badge "OFERTA"/"2×1" de la esquina, en vez de
   un rojo suelto que no pertenece a la paleta del sitio. */
.cc-sale-percent {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.4em;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(194, 123, 46, 0.35);
    line-height: 1.3;
}

/* WooCommerce Blocks pisa el atributo [hidden] nativo con display:block en imágenes.
   El ítem de carrito tiene dos <img>: una real y una fallback con [hidden].
   Forzamos el ocultamiento para evitar que se muestre duplicada. */
.wc-block-cart-item__image > img[hidden] { display: none !important; }

/* Badges de oferta 2×1 por producto en el mini-carrito */
.accel-of-mc-badge {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px;
    margin-top: 5px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    width: fit-content;
}
.accel-of-mc-badge--active {
    background: var(--wp--preset--color--accent);
    color: #fff;
}
.accel-of-mc-badge--pending {
    background: rgba(194, 123, 46, 0.12);
    color: var(--wp--preset--color--accent);
    border: 1px solid rgba(194, 123, 46, 0.4);
}

/* Total estimado con descuento en el footer del mini-carrito */
.accel-dc-mini-total {
    padding: 0.4rem 1rem 0.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    margin-bottom: 0.25rem;
}
.accel-dc-mini-total__discount,
.accel-dc-mini-total__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 2px 0;
}
.accel-dc-mini-total__discount {
    color: var(--wp--preset--color--accent);
}
.accel-dc-mini-total__line span { font-weight: 600; }
.accel-dc-mini-total__line strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent);
}

/* ── Overlay "Agregar al carrito" — desliza desde abajo ─────────────────── */
.cc-product-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.34, 1.10, 0.64, 1);
}
.cc-product-card:hover .cc-product-card__overlay { transform: translateY(0); }

.cc-product-card__overlay .button,
.cc-product-card__overlay a.button,
.cc-product-card__overlay .added_to_cart {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 200ms ease !important;
}
.cc-product-card__overlay .button:hover { background: var(--wp--preset--color--primary) !important; }

/* Modo sin overlay: botón siempre visible debajo de los precios */
.cc-product-card--btn-visible .cc-product-card__image-wrap { overflow: visible; }
.cc-product-card__btn-wrap {
    padding: 0 0.75rem 0.875rem;
}
.cc-product-card__btn-wrap .button,
.cc-product-card__btn-wrap a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}

/* ── Precios ─────────────────────────────────────────────────────────────── */
.cc-product-card__prices { padding: 0.6rem 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.cc-extra-prices          { padding: 0 0.875rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }

.cc-product-card__main-price .woocommerce-Price-amount,
.cc-card-price .woocommerce-Price-amount {
    font-size: var(--wp--preset--font-size--lg) !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--accent) !important;
}
.cc-product-card__main-price del .woocommerce-Price-amount,
.cc-card-price del .woocommerce-Price-amount {
    font-size: var(--wp--preset--font-size--sm) !important;
    color: var(--wp--preset--color--text-muted) !important;
    font-weight: 400 !important;
}

.cc-product-card__transfer,
.cc-extra-prices__transfer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--wp--preset--color--text-muted);
}
.cc-product-card__transfer strong,
.cc-extra-prices__transfer strong { color: var(--wp--preset--color--text); font-weight: 600; }

.cc-price-label { font-size: 0.72rem; color: var(--wp--preset--color--text-muted); }

/* Descuento extra por transferencia — verde apagado (sigue siendo "ahorro",
   pero como detalle secundario, sin competir con el naranja del producto). */
.cc-discount-badge {
    background: transparent;
    color: #4a8a5c;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0;
}

.cc-product-card__installments,
.cc-extra-prices__installments {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--wp--preset--color--text-muted);
}
.cc-product-card__installments strong,
.cc-extra-prices__installments strong { color: var(--wp--preset--color--accent); font-weight: 700; }

/* ── Botón push-up — aplica a CUALQUIER tarjeta de producto del sitio ──────── */
/*
 * Funciona en cualquier .wc-block-product que tenga .cc-card-btn en el botón.
 * Al crear nuevas plantillas (shop, categorías, etc.) solo hay que agregar
 * la clase cc-card-btn al wrapper del botón "Agregar al carrito".
 */


.cc-card-btn {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.75rem 0.75rem;
    opacity: 0;
    transform: translateY(105%);
    transition: transform 300ms cubic-bezier(.34, 1.10, .64, 1),
                opacity 220ms ease;
    pointer-events: none;
    z-index: 3;
}
.wc-block-product:hover .cc-card-btn {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* En touch/mobile no hay :hover confiable — con solo :hover el botón quedaba
   escondido en casi todos los productos (aparecía nomás en el último tocado,
   por el hover simulado del navegador). En vez de mostrarlo siempre, un
   script (initProductCardTap en main.js) agrega la clase .is-tapped a la
   tarjeta que el usuario toca — el botón aparece solo en esa. */
@media (hover: none), (max-width: 768px) {
    /* El botón se superpone sobre la imagen (igual que el hover de desktop),
       nunca cambia el alto de la tarjeta — así las tarjetas vecinas en la
       grilla no quedan desalineadas. Para que no tape el texto de precios
       (Transferencia/cuotas) en productos con oferta, el empuje hacia
       arriba del panel de info usa --cc-btn-h: el alto REAL del botón,
       medido por JS (setCardBtnHeights en main.js), no un valor fijo. */
    .wc-block-product.is-tapped .cc-card-btn {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .wc-block-product.is-tapped .cc-card-info {
        transform: translateY(calc(-1 * var(--cc-btn-h, 2.5rem))) !important;
    }
}

/* Panel de info (título + precios) sube como unidad — imagen queda quieta.
   Las tarjetas de una misma fila quedan parejas en alto (stretch, por
   defecto), pero un producto con oferta tiene más líneas de precio que uno
   simple — para que la tarjeta corta no quede con un hueco muerto abajo,
   este panel crece para ocupar el espacio sobrante y centra su contenido
   ahí adentro en vez de dejarlo como aire vacío al final. */
.wc-block-product .cc-card-info {
    background: var(--wp--preset--color--surface);
    transition: transform 300ms cubic-bezier(.34, 1.10, .64, 1);
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wc-block-product:hover .cc-card-info {
    transform: translateY(calc(-1 * var(--cc-btn-h, 2.5rem)));
}

.cc-card-btn .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
}
.cc-card-image img,
.wc-block-woocommerce-product-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* ─── WooCommerce — Producto card (legacy overrides) ────────────────────── */

.wc-block-grid__product,
ul.products li.product {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.wc-block-grid__product:hover,
ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(28, 28, 28, 0.12);
    transform: translateY(-3px);
}

.wc-block-grid__product-image img,
ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 !important;
}

.wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: var(--wp--preset--font-size--md) !important;
    font-weight: 600 !important;
    padding: 1rem 1rem 0.25rem !important;
    color: var(--wp--preset--color--text) !important;
}

.wc-block-grid__product-price,
ul.products li.product .price {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: var(--wp--preset--font-size--lg) !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--accent) !important;
    padding: 0 1rem 1rem !important;
    display: block !important;
}

/* ─── WooCommerce — Botones ─────────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-grid__product .wp-block-button__link {
    background: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: var(--wp--preset--font-size--xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
    transition: background 200ms ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--wp--preset--color--primary) !important;
    color: #ffffff !important;
}

/* ─── WooCommerce — Loop grid override ─────────────────────────────────────── */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product .button {
    margin: auto 1rem 1rem !important;
    display: block !important;
    text-align: center !important;
    padding: 0.65em 1rem !important;
}

/* ─── WooCommerce — Single product ─────────────────────────────────────────── */

.woocommerce div.product .product_title {
    font-family: var(--wp--preset--font-family--playfair) !important;
    font-size: var(--wp--preset--font-size--4xl) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--wp--preset--color--accent) !important;
    font-size: var(--wp--preset--font-size--3xl) !important;
    font-weight: 700 !important;
}

/* ── Formulario: flex column con reordenamiento visual ───────────────── */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.6rem 0.75rem !important;
}

/* ── Comprar ahora (1°, más prominente) ──────────────────────────────── */
.woocommerce div.product form.cart .cc-buy-now-btn {
    order: 1 !important;
    flex: 1 1 100% !important;
    background: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding: 1em 2.5em !important;
    cursor: pointer !important;
    box-shadow: 0 5px 20px rgba(194,123,46,0.4) !important;
    transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease !important;
}
.woocommerce div.product form.cart .cc-buy-now-btn:hover {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 80%, #000) !important;
    box-shadow: 0 7px 26px rgba(194,123,46,0.5) !important;
    transform: translateY(-2px) !important;
}

/* ── Selector de cantidad — stepper pill (2°) ────────────────────────── */
.woocommerce div.product form.cart .quantity {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    border: 2px solid var(--wp--preset--color--border) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Botones − y + */
.woocommerce div.product form.cart .quantity .cc-qty-btn {
    background: transparent !important;
    border: none !important;
    width: 42px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: var(--wp--preset--color--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 150ms ease !important;
    padding: 0 !important;
}
.woocommerce div.product form.cart .quantity .cc-qty-btn:hover {
    background: rgba(0,0,0,0.06) !important;
}

/* Input numérico */
.woocommerce div.product form.cart .quantity input.qty {
    border: none !important;
    border-left: 1px solid var(--wp--preset--color--border) !important;
    border-right: 1px solid var(--wp--preset--color--border) !important;
    border-radius: 0 !important;
    width: 52px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--primary) !important;
    background: transparent !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Dark mode */
html[data-theme="dark"] .woocommerce div.product form.cart .quantity {
    border-color: rgba(255,255,255,0.22) !important;
}
html[data-theme="dark"] .woocommerce div.product form.cart .quantity .cc-qty-btn {
    color: rgba(255,255,255,0.88) !important;
}
html[data-theme="dark"] .woocommerce div.product form.cart .quantity .cc-qty-btn:hover {
    background: rgba(255,255,255,0.09) !important;
}
html[data-theme="dark"] .woocommerce div.product form.cart .quantity input.qty {
    color: rgba(255,255,255,0.88) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
    border-right-color: rgba(255,255,255,0.15) !important;
}

/* ── Añadir al carrito (3°, secundario — outlined) ───────────────────── */
.woocommerce div.product form.cart .single_add_to_cart_button {
    order: 3 !important;
    flex: 1 1 auto !important;
    background: transparent !important;
    color: var(--wp--preset--color--accent) !important;
    border: 2px solid var(--wp--preset--color--accent) !important;
    border-radius: 50px !important;
    font-size: var(--wp--preset--font-size--sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.85em 1.75em !important;
    height: auto !important;
    box-shadow: none !important;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* ── Hint descuento por cantidad (4°) ────────────────────────────────── */
.cc-atc-hint {
    order: 4 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.65rem 0.9rem !important;
    background: rgba(194,123,46,0.1) !important;
    border-left: 3px solid var(--wp--preset--color--accent) !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 0.82rem !important;
    color: #1C1C1C !important;
    line-height: 1.4 !important;
}
html[data-theme="dark"] .cc-atc-hint {
    background: rgba(194,123,46,0.18) !important;
    color: rgba(255,255,255,0.88) !important;
}
.cc-atc-hint svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 1px !important;
    color: var(--wp--preset--color--accent) !important;
}

/* ── CTA descuento por cantidad — debajo del precio, página de producto ───── */
.cc-qty-cta {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    background: rgba(194, 123, 46, 0.08) !important;
    border: 1px solid rgba(194, 123, 46, 0.30) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
    margin: 0.5rem 0 0.25rem !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: var(--wp--preset--color--primary) !important;
}
.cc-qty-cta__icon {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    color: var(--wp--preset--color--accent) !important;
}
.cc-qty-cta__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
}
.cc-qty-cta__body strong {
    color: var(--wp--preset--color--accent) !important;
    font-weight: 600 !important;
}
.cc-qty-cta__msg {
    margin: 0 !important;
    font-size: 0.88rem !important;
    color: inherit !important;
    line-height: 1.5 !important;
}
html[data-theme="dark"] .cc-qty-cta {
    background: rgba(194, 123, 46, 0.12) !important;
    border-color: rgba(194, 123, 46, 0.35) !important;
    color: #E8E8E5 !important;
}
html[data-theme="dark"] .cc-qty-cta__msg {
    color: #E8E8E5 !important;
}

/* ─── WooCommerce — Mensajes ────────────────────────────────────────────────── */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--wp--preset--color--accent); }

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--wp--preset--color--accent); }

/* ─── WooCommerce — Breadcrumbs ────────────────────────────────────────────── */

.woocommerce-breadcrumb {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted);
    margin-bottom: 2rem;
}

.woocommerce-breadcrumb a {
    color: var(--wp--preset--color--text-muted);
    transition: color 200ms ease;
}

.woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--accent); }

/* ─── Crédito Accel Systems ─────────────────────────────────────────────────── */

.cc-accel-credit {
    display: flex;
    justify-content: center;
    margin-top: var(--wp--preset--spacing--40);
}

.cc-accel-credit__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    transition: color 200ms ease;
}

.cc-accel-credit__link:hover {
    color: rgba(255, 255, 255, 0.65);
}

.cc-accel-credit__logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    opacity: 0.45;
    transition: opacity 200ms ease;
    object-fit: contain;
}

.cc-accel-credit__link:hover .cc-accel-credit__logo {
    opacity: 0.85;
}

.cc-accel-credit strong {
    font-weight: 600;
    color: inherit;
}

/* ─── Footer FSE ────────────────────────────────────────────────────────────── */

.site-footer .cc-footer-logo-img {
    max-width: 180px;
    width: 100%;
    height: auto;
}

/* Data Fiscal AFIP */
.cc-data-fiscal {
    display: inline-block;
    margin-top: 1.5rem;
}

.cc-data-fiscal__img {
    width: 55px;
    height: auto;
    display: block;
    opacity: 0.85;
    transition: opacity 200ms ease;
}

.cc-data-fiscal:hover .cc-data-fiscal__img {
    opacity: 1;
}

.site-footer .wp-block-navigation a,
.site-footer .wp-block-navigation a:visited {
    color: var(--wp--preset--color--text-muted);
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none;
    transition: color 200ms ease;
}

.site-footer .wp-block-navigation a:hover {
    color: var(--wp--preset--color--accent-light);
}

/* Redes sociales en footer */
.cc-footer-social {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-top: 1.25rem;
}

.cc-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
    flex-shrink: 0;
}

.cc-footer-social a:hover {
    background: var(--wp--preset--color--accent);
    transform: translateY(-2px);
}

/* Footer compacto */
.site-footer {
    padding-top: 2rem !important;
    padding-bottom: 1.25rem !important;
}

/* Separador del footer */
.site-footer .wp-block-separator {
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
}

/* Reducir espacio entre ítems de contacto/horarios */
.site-footer .wp-block-column p,
.site-footer .wp-block-column .wp-block-paragraph {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}
.site-footer .wp-block-column .wp-block-social-links {
    margin-top: 0.75rem !important;
}

/* ─── WhatsApp flotante ─────────────────────────────────────────────────────── */

.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
}

/* ─── Utilidades ────────────────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Secciones del home ────────────────────────────────────────────────────── */

/* Barra título de sección (ej: OFERTAS ESPECIALES) */
.cc-section-bar {
    margin-bottom: var(--wp--preset--spacing--60);
}
.cc-section-bar .wp-block-heading {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: var(--wp--preset--font-size--xl) !important;  /* 1.25rem = 20px */
    letter-spacing: 0.15em;
    font-weight: 800 !important;
    padding: 1rem 0 !important;
}

/*
 * Bug FSE: cuando un botón tiene ambas clases has-{color}-color y has-text-color,
 * la regla .has-text-color { color: var(--text) !important } (última en cascade)
 * sobreescribe la intención de color. Este selector doble restaura la prioridad.
 */
.has-white-color.has-text-color {
    color: var(--wp--preset--color--white) !important;
}

/* Subrayado acento bajo título */
.cc-title-underline {
    width: 64px;
    height: 4px;
    background: var(--wp--preset--color--accent);
    border-radius: 2px;
    margin: 0 auto var(--wp--preset--spacing--60);
}

/* Palabra en acento dentro de heading */
.cc-accent-word {
    color: var(--wp--preset--color--accent);
    font-style: italic;
}

/* ─── Grilla de productos (5 cols) ──────────────────────────────────────────── */

/* Convierte la lista flex de WooCommerce en grid de 5 columnas */
.cc-products-grid .wc-block-product-template,
.cc-products-grid ul.wc-block-grid__products {
    display: grid !important;
    /* 5 columnas de ancho fijo (un quinto menos el espacio entre ellas): si hay menos de
       5 productos (ej. 3 ofertas) las tarjetas quedan centradas en vez de pegadas a la izquierda. */
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 5rem) / 5))) !important;
    justify-content: center;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/*
 * WooCommerce pone width:calc(20% - 1em) en los <li> para flex layout.
 * Al forzar display:grid en el padre, ese 20% se calcula contra la CELDA (272px)
 * en vez del contenedor (1440px) → resultado: 38px. Lo reemplazamos con 100%
 * para que cada ítem rellene su celda de grid.
 */
.cc-products-grid .wc-block-product-template > li,
.cc-products-grid .wc-block-product-template > .wc-block-product {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.cc-products-grid .wc-block-grid__product,
.cc-products-grid li.product {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.cc-products-grid .wc-block-grid__product:hover,
.cc-products-grid li.product:hover {
    box-shadow: 0 8px 24px rgba(28,28,28,.10);
    transform: translateY(-3px);
}

/* ─── Social proof ───────────────────────────────────────────────────────────── */

.cc-stars { font-size: 1.5rem; letter-spacing: 4px; }

.cc-social-proof-photo img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top;
}
.cc-social-proof-photo--left img { border-radius: 0 8px 8px 0; }
.cc-social-proof-photo--right img { border-radius: 8px 0 0 8px; }

/* ─── Carousel de categorías ─────────────────────────────────────────────────── */

.cc-cat-carousel {
    overflow: hidden;
}

/* Hace que el bloque nativo de categorías sea un scroll horizontal */
.cc-cat-list.wc-block-product-categories,
.cc-cat-carousel .wp-block-woocommerce-product-categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    padding-bottom: 0.75rem !important;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--border) transparent;
    -webkit-overflow-scrolling: touch;
}

.cc-cat-list.wc-block-product-categories::-webkit-scrollbar { height: 4px; }
.cc-cat-list.wc-block-product-categories::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--border);
    border-radius: 2px;
}

/* Cada tarjeta de categoría */
.cc-cat-list .wc-block-product-categories-list-item,
.cc-cat-carousel .product-category {
    flex: 0 0 200px !important;
    width: 200px !important;
    list-style: none !important;
    margin: 0 !important;
}

.cc-cat-list .wc-block-product-categories-list-item a,
.cc-cat-carousel .product-category a {
    display: block !important;
    background: var(--wp--preset--color--primary) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.cc-cat-list .wc-block-product-categories-list-item a:hover,
.cc-cat-carousel .product-category a:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}

.cc-cat-list .wc-block-product-categories-list-item img,
.cc-cat-carousel .product-category img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    display: block !important;
}

.cc-cat-list .wc-block-product-categories-list-item .wc-block-product-categories-list-item__name,
.cc-cat-list .wc-block-product-categories-list-item mark,
.cc-cat-carousel .product-category h2,
.cc-cat-carousel .woocommerce-loop-category__title {
    color: #ffffff !important;
    font-size: var(--wp--preset--font-size--sm) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 0.6rem 0.75rem !important;
    background: var(--wp--preset--color--primary) !important;
    display: block !important;
    margin: 0 !important;
}

.cc-cat-list .wc-block-product-categories-list-item mark {
    background: transparent !important;
    font-weight: 400 !important;
    font-size: 0.7rem !important;
    opacity: 0.6 !important;
    letter-spacing: 0 !important;
}

/* ─── Strip pagos y envíos ───────────────────────────────────────────────────── */

.cc-section--strip {
    border-top: 1px solid var(--wp--preset--color--border);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.cc-strip-cols { gap: 0 !important; }

.cc-strip-item {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    text-align: center;
}

.cc-strip-item--bordered {
    border-left: 1px solid var(--wp--preset--color--border);
    border-right: 1px solid var(--wp--preset--color--border);
}

.cc-strip-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--wp--preset--color--accent);
}
.cc-strip-icon svg { width: 48px; height: 48px; }

.cc-strip-item .wp-block-heading {
    font-size: var(--wp--preset--font-size--md) !important;
    margin-bottom: 0.25rem !important;
}

/* ─── Antiguo helper (se mantiene por compatibilidad) ───────────────────────── */

.cc-oferta-tag {
    display: inline-block;
    background: var(--wp--preset--color--accent);
    color: #ffffff;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 99px;
    margin: 0;
    line-height: 1.8;
    white-space: nowrap;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Grilla 5 cols → 3 cols en tablet */
    .cc-products-grid .wc-block-product-template,
    .cc-products-grid ul.wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Social proof: ocultar fotos laterales */
    .cc-social-proof-photo {
        display: none !important;
    }
    .cc-section--social-proof .wp-block-column[style*="20%"] {
        display: none !important;
        flex-basis: 0 !important;
    }

    /* Strip: apilado en mobile */
    .cc-strip-item--bordered {
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--wp--preset--color--border);
        border-bottom: 1px solid var(--wp--preset--color--border);
    }
}

@media (max-width: 768px) {
    /* Tienda / ofertas / búsqueda: sin esto el breadcrumb, título, barra de
       orden y la grilla de productos quedan pegados al borde del celular. */
    .cc-catalog-wrap {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* La barra de título (ej: OFERTAS ESPECIALES) debe seguir yendo de
       borde a borde — se "escapa" del padding del wrapper que acabamos
       de agregarle. */
    .cc-catalog-wrap .cc-section-bar {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        width: auto !important;
    }

    .hero-section { min-height: 480px !important; }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grilla 5 cols → 2 cols en mobile */
    .cc-products-grid .wc-block-product-template,
    .cc-products-grid ul.wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Categorías: tarjetas más angostas */
    .cc-cat-list .wc-block-product-categories-list-item,
    .cc-cat-carousel .product-category {
        flex: 0 0 150px !important;
        width: 150px !important;
    }

    .whatsapp-float {
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .cc-products-grid .wc-block-product-template,
    .cc-products-grid ul.wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .cc-cat-list .wc-block-product-categories-list-item,
    .cc-cat-carousel .product-category {
        flex: 0 0 130px !important;
        width: 130px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Ajustes específicos por componente
══════════════════════════════════════════════════════════════════ */

/* ─── ≤ 768px — tablet y móvil ─────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Footer: compactado para mobile ─────────────────────────── */

    /* Padding vertical reducido */
    .site-footer {
        padding-top:    1rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Logo — achicado para mobile (antes apuntaba a una clase vieja y no aplicaba) */
    .cc-footer-logo img,
    .cc-footer-logo .wp-block-site-logo img,
    .site-footer .wp-block-site-logo img,
    .site-footer .cc-footer-logo-img {
        max-width: 90px !important;
        width: 90px !important;
    }

    /* Columnas apiladas: gap mínimo */
    .site-footer .wp-block-columns {
        padding: 0 1rem !important;
        gap: 0.6rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .site-footer .wp-block-column {
        text-align: center !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    .site-footer .wp-block-column > * { margin-left: auto !important; margin-right: auto !important; }

    /* Texto de contacto y horarios */
    .site-footer .wp-block-column p,
    .site-footer .wp-block-paragraph {
        font-size: 0.78rem !important;
        margin-top: 0.1rem !important;
        margin-bottom: 0 !important;
        line-height: 1.4 !important;
    }

    /* Headings de sección (Contacto, Horarios) */
    .site-footer h5,
    .site-footer h4 {
        font-size: 0.82rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.25rem !important;
        letter-spacing: 0.04em !important;
    }

    /* Íconos sociales más pequeños y juntos */
    .cc-footer-social { justify-content: center !important; gap: 0.6rem !important; }
    .site-footer .wp-block-social-links {
        gap: 0.6rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0 !important;
    }
    .site-footer .wp-block-social-link a {
        width:  30px !important;
        height: 30px !important;
        padding: 5px !important;
    }

    /* Copyright y crédito */
    .cc-footer-logo { display: block; text-align: center; }
    .cc-accel-credit__link { justify-content: center !important; font-size: 0.7rem !important; }
    .site-footer [class*="copyright"],
    .site-footer .wp-block-paragraph:last-child {
        font-size: 0.7rem !important;
        margin-top: 0.3rem !important;
        margin-bottom: 0 !important;
    }

    /* Padding lateral en secciones full-width de Contacto */
    .cc-contact-hero,
    .cc-contact-social,
    .cc-contact-cta {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box;
    }
    /* Sección contenedor del banner WA: reducir padding vertical en mobile */
    .cc-contact-hero + .wp-block-group {
        padding-top: var(--wp--preset--spacing--40) !important;
        padding-bottom: var(--wp--preset--spacing--40) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box;
    }
    /* WA banner: compacto en mobile */
    .cc-contact-wa-banner {
        padding: 1.25rem !important;
    }
    .cc-contact-wa-banner .wp-block-columns {
        row-gap: var(--wp--preset--spacing--30) !important;
    }
    .cc-contact-wa-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }
    .cc-contact-wa-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    .cc-contact-wa-heading {
        font-size: 1.2rem !important;
    }
    .cc-contact-wa-phone {
        font-size: 1rem !important;
    }
    .cc-contact-wa-action {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .cc-contact-wa-action .wp-block-buttons { justify-content: flex-start !important; }
    .cc-contact-wa-note { text-align: left !important; }

    /* ── Single product: quitar sticky en galería y columna de compra ── */
    .cc-product-gallery-col .wc-block-product-image-gallery { position: static !important; }
    .cc-product-atc-form { position: static !important; top: auto !important; }

    /* ── Contacto — fan de redes: deslizable en mobile ──────────── */
    /* La sección clips el fan sin afectar el pop-up vertical */
    .cc-contact-social {
        overflow: hidden !important;
    }
    .cc-contact-social .wp-block-columns {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 0 !important;
        align-items: center !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding: 1.25rem 0 4rem !important;
    }
    /* Cards más chicas para que entren en 390px (110 + 62×3 = 296px) */
    .cc-contact-social .cc-social-col {
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
        min-width: 0 !important;
        margin-inline-start: -44px !important;
        position: relative;
        cursor: pointer;
        transform-origin: bottom center;
        transition:
            transform 0.4s cubic-bezier(0.34, 1.25, 0.64, 1),
            box-shadow 0.3s ease;
    }
    .cc-contact-social .cc-social-col:first-child {
        margin-inline-start: 0 !important;
    }
    /* Rotación inicial — efecto baraja */
    .cc-contact-social .cc-social-col:nth-child(1) { z-index: 1; transform: rotate(-5deg) translateY(4px); }
    .cc-contact-social .cc-social-col:nth-child(2) { z-index: 2; transform: rotate(-2deg) translateY(2px); }
    .cc-contact-social .cc-social-col:nth-child(3) { z-index: 3; transform: rotate(1.5deg) translateY(1px); }
    .cc-contact-social .cc-social-col:nth-child(4) { z-index: 4; transform: rotate(4.5deg); }
    /* Hint de "tocá" en la card más al frente (la de encima) */
    .cc-contact-social .cc-social-col:nth-child(4)::after {
        content: '👆 Tocá';
        position: absolute;
        bottom: -1.6rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.65rem;
        color: rgba(0,0,0,0.45);
        white-space: nowrap;
        pointer-events: none;
    }
    .cc-contact-social .cc-social-col.is-active:nth-child(4)::after,
    .cc-contact-social .cc-social-col.is-active::after {
        display: none;
    }
    /* Card activa: sube al frente */
    .cc-contact-social .cc-social-col.is-active {
        z-index: 10 !important;
        transform: translateY(-16px) rotate(0) scale(1.12) !important;
        box-shadow: none !important;
    }
    .cc-contact-social .cc-social-col.is-active .cc-phone-frame {
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.5),
            0 20px 40px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    /* Botones: ocultos hasta que la card esté activa */
    .cc-contact-social .cc-social-col .wp-block-buttons {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        margin-top: 0 !important;
        padding: 0 !important;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.25s ease !important;
    }
    .cc-contact-social .cc-social-col.is-active .wp-block-buttons {
        max-height: 60px !important;
        opacity: 1 !important;
        margin-top: 0.75rem !important;
        pointer-events: auto !important;
    }
    /* Frame: proporciones 9:16, sin sombra pesada en fan */
    .cc-contact-social .cc-phone-frame {
        max-width: 100% !important;
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .cc-contact-social .cc-phone-frame__screen {
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        overflow: hidden !important;
    }
    .cc-contact-social .cc-phone-frame__screen img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }

    /* ── Contacto — CTA y social: títulos más pequeños ────────────── */
    .cc-contact-cta__title    { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }
    .cc-contact-social__title { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }
}

/* ─── ≤ 600px — teléfono ────────────────────────────────────────── */
@media (max-width: 600px) {

    /* ── Extra precios en tarjetas (home + tienda) ───────────────── */
    .cc-card-info .cc-extra-prices {
        padding: 0 0.4rem 0.5rem !important;
        gap: 0.1rem !important;
    }
    .cc-card-info .cc-extra-prices__transfer,
    .cc-card-info .cc-extra-prices__installments {
        font-size: 0.6rem !important;
        flex-wrap: wrap !important;
        gap: 0.2rem !important;
    }
    .cc-card-info .cc-extra-prices__transfer strong,
    .cc-card-info .cc-extra-prices__installments strong {
        font-size: 0.65rem !important;
    }
    .cc-sale-percent {
        font-size: 0.85rem !important;
        padding: 3px 9px !important;
    }
    .cc-card-info .cc-price-label {
        font-size: 0.58rem !important;
        white-space: nowrap;
    }
    .cc-card-info .cc-discount-badge {
        font-size: 0.55rem !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* ── Tarjeta: título compacto ────────────────────────────────── */
    .cc-card-title { font-size: 0.68rem !important; }
    .cc-card-info .cc-card-price .woocommerce-Price-amount {
        font-size: 0.85rem !important;
    }

    /* ── Barra "OFERTAS ESPECIALES" ─────────────────────────────── */
    .cc-section-bar h2 { font-size: 1rem !important; }

    /* ── Contacto — hero ─────────────────────────────────────────── */
    .cc-contact-hero__title { font-size: clamp(2rem, 9vw, 3rem) !important; }
    .cc-contact-hero {
        padding-top: var(--wp--preset--spacing--60) !important;
        padding-bottom: var(--wp--preset--spacing--60) !important;
    }

    /* ── Contacto — botón WA ─────────────────────────────────────── */
    .cc-btn-wa .wp-block-button__link {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.875rem !important;
    }

    /* ── Single product — extra precios (tamaño adecuado en mobile) ─ */
    .cc-product-details-col .cc-extra-prices {
        padding: 0 !important;
    }
    .cc-product-details-col .cc-extra-prices__transfer,
    .cc-product-details-col .cc-extra-prices__installments {
        font-size: 0.875rem !important;
        flex-wrap: nowrap !important;
    }
    .cc-product-details-col .cc-extra-prices__transfer strong,
    .cc-product-details-col .cc-extra-prices__installments strong {
        font-size: 1rem !important;
    }

    /* ── Botón flotante WA ───────────────────────────────────────── */
    .whatsapp-float { width: 48px !important; height: 48px !important; }
    .whatsapp-float svg { width: 26px !important; height: 26px !important; }
}

/* ── Badge onsale: single product — WooCommerce lo posiciona a left:-16px ──── */
.single-product .onsale,
.woocommerce-page.single-product span.onsale {
    left: 0.5rem !important;
    top: 0.5rem !important;
    right: auto !important;
    margin: 0 !important;
}

/* ── Header mobile: márgenes laterales seguros ──────────────────────────────── */
@media (max-width: 768px) {
    /* Flex wrapper directo dentro del header */
    .site-header > .wp-block-group > .wp-block-group {
        padding-left: max(1rem, env(safe-area-inset-left, 1rem)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 1rem)) !important;
    }
}

/* ── Select de ordenamiento: custom dropdown ─────────────────────────────────── */
/* El sort está antes que las tarjetas en el DOM → sin z-index propio, las tarjetas
   (position:relative sin z-index) aparecen encima por orden de pintado */
.woocommerce-ordering,
.wp-block-woocommerce-catalog-sorting {
    position: relative;
    z-index: 20;
}

.cc-custom-select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.cc-custom-select__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--sm);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 150ms ease;
    line-height: 1.4;
}
.cc-custom-select__btn::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.cc-custom-select.is-open .cc-custom-select__btn::after {
    transform: rotate(-135deg) translateY(2px);
}
.cc-custom-select__dropdown {
    position: fixed; /* fixed + appendeado al body: escapa transforms ancestrales */
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
    z-index: 9999;
    overflow: hidden;
    display: none;
    min-width: 200px;
}
/* El dropdown vive en body → usar clase propia para mostrar/ocultar */
.cc-custom-select__dropdown.is-open { display: block; }

/* Fondo semitransparente mientras el desplegable está abierto: separa visualmente
   la lista del contenido de atrás (antes quedaba "encimada" a la imagen de un
   producto, como si la página estuviera rota). Clic afuera también cierra. */
.cc-select-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, 0.28);
    z-index: 9998;
}
.cc-select-backdrop.is-open { display: block; }
html[data-theme="dark"] .cc-select-backdrop { background: rgba(0, 0, 0, 0.5); }
.cc-custom-select__option {
    display: block;
    width: 100%;
    padding: 0.65rem 0.875rem;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 120ms ease;
    white-space: nowrap;
}
.cc-custom-select__option:hover {
    background: color-mix(in srgb, var(--wp--preset--color--background) 60%, transparent);
}
.cc-custom-select__option.is-selected {
    font-weight: 600;
    color: var(--wp--preset--color--accent);
}

/* ─── Paginación — tienda y archivos de producto ────────────────────────────── */

.wp-block-woocommerce-product-collection-pagination,
.wp-block-query-pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.wp-block-woocommerce-product-collection-pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 6px;
    color: var(--wp--preset--color--text);
    background: var(--wp--preset--color--surface);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.wp-block-woocommerce-product-collection-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers:hover {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: #fff;
}

.wp-block-woocommerce-product-collection-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: #fff;
    font-weight: 700;
    pointer-events: none;
}

.wp-block-woocommerce-product-collection-pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-woocommerce-product-collection-pagination-next,
.wp-block-woocommerce-product-collection-pagination-previous {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 1rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 6px;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-woocommerce-product-collection-pagination-next a:hover,
.wp-block-woocommerce-product-collection-pagination-previous a:hover {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: #fff;
}

/* Título del archive alineado a la izquierda */
.cc-archive-title { text-align: left !important; }

.cc-title-underline--left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Tienda/categoría: quedaba un salto de aire de más entre la rayita del título
   y la tarjeta de categorías (dos márgenes de 32px que no siempre colapsaban
   igual según el modo/ancho). Se fija un solo espacio, más ajustado. */
.cc-catalog-wrap > .cc-title-underline--left { margin-bottom: 1.25rem !important; }
.cc-catalog-wrap > .wp-block-woocommerce-product-collection { margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   PÁGINA CONTACTO
══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.cc-contact-hero {
    border-bottom: none;
}
.cc-contact-hero__title {
    font-family: var(--wp--preset--font-family--playfair) !important;
    font-size: clamp(3rem, 7vw, 5.5rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    color: var(--wp--preset--color--white) !important;
    margin-top: var(--wp--preset--spacing--40) !important;
    margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── Banner WhatsApp ──────────────────────────────────────────────── */
.cc-contact-wa-banner {
    background: var(--wp--preset--color--surface);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    box-shadow: 0 0 40px rgba(37, 211, 102, 0.07);
}

.cc-contact-wa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #25D366;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}

.cc-contact-wa-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #25D366 !important;
    margin: 0 0 0.375rem !important;
}

.cc-contact-wa-heading {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--text) !important;
}

.cc-contact-wa-phone {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--wp--preset--color--text) !important;
    letter-spacing: 0.03em !important;
}

.cc-contact-wa-note {
    font-size: 0.78rem !important;
    color: var(--wp--preset--color--text-muted) !important;
}

/* Botón WhatsApp (verde) */
.cc-btn-wa .wp-block-button__link,
.cc-btn-wa.wp-block-button .wp-block-button__link {
    background: #25D366 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 8px !important;
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3) !important;
    white-space: nowrap !important;
}
.cc-btn-wa .wp-block-button__link:hover {
    background: #1ebe5a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}
.cc-btn-wa--large .wp-block-button__link {
    font-size: 1.1rem !important;
    padding: 1rem 2.5rem !important;
}

/* ── Sección redes sociales ───────────────────────────────────────── */
.cc-contact-social__title {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: clamp(1.8rem, 4vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--white) !important;
    margin-bottom: 0 !important;
}

/* ── Social: efecto baraja — cada card crece al hover (desktop) ───── */
@media (min-width: 782px) {
    .cc-contact-social .wp-block-columns {
        justify-content: center !important;
        gap: 0 !important;
        column-gap: 0 !important;
        align-items: flex-end !important;
        padding-bottom: 60px;
    }

    .cc-contact-social .cc-social-col {
        flex-basis: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        position: relative;
        margin-inline-start: -72px !important;
        transition:
            transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
            box-shadow 0.3s ease;
        cursor: pointer;
        transform-origin: bottom center;
    }

    .cc-contact-social .cc-social-col:first-child {
        margin-inline-start: 0 !important;
    }

    /* Rotación inicial — efecto "baraja" */
    .cc-contact-social .cc-social-col:nth-child(1) { z-index: 1; transform: rotate(-4deg) translateY(6px); }
    .cc-contact-social .cc-social-col:nth-child(2) { z-index: 2; transform: rotate(-1.5deg) translateY(3px); }
    .cc-contact-social .cc-social-col:nth-child(3) { z-index: 3; transform: rotate(1deg) translateY(1px); }
    .cc-contact-social .cc-social-col:nth-child(4) { z-index: 4; transform: rotate(3.5deg); }

    /* Botones ocultos siempre hasta hover de esa card */
    .cc-contact-social .cc-social-col .wp-block-buttons {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }

    /* Hover en tarjeta individual: sube, agranda, muestra su botón */
    .cc-contact-social .cc-social-col:hover {
        z-index: 10 !important;
        transform: translateY(-28px) scale(1.12) rotate(0deg) !important;
        box-shadow: none !important;
    }
    /* Sombra SOLO en el phone frame — evita el recuadro traslúcido */
    .cc-contact-social .cc-social-col:hover .cc-phone-frame {
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.55),
            0 32px 64px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    .cc-contact-social .cc-social-col:hover .wp-block-buttons {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ── Marco de celular ─────────────────────────────────────────────── */
.cc-phone-frame {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 220px;
    background: #111;
    border-radius: 36px;
    border: 3px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 24px 60px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Barra superior con cámara */
.cc-phone-frame__bar {
    height: 28px;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-phone-frame__bar::after {
    content: '';
    width: 60px;
    height: 8px;
    background: #222;
    border-radius: 10px;
}
/* Pantalla interna — donde irá la captura */
.cc-phone-frame__screen {
    flex: 1;
    min-height: 340px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: #151515;
    overflow: hidden;
}
.cc-phone-frame__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Indicador home */
.cc-phone-frame__home {
    height: 24px;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-phone-frame__home::after {
    content: '';
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

/* WordPress inserta un <p></p> vacío dentro del frame — eliminarlo */
.cc-phone-frame > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Color de acento superior por red */
.cc-phone-frame--instagram { border-color: rgba(225,48,108,0.4); }
.cc-phone-frame--facebook  { border-color: rgba(24,119,242,0.4); }
.cc-phone-frame--tiktok    { border-color: rgba(105,201,208,0.4); }
.cc-phone-frame--youtube   { border-color: rgba(255,0,0,0.4); }

/* ── Home social: WA + redes fan — layout dos columnas ──────────── */
.cc-home-social {
    overflow: hidden !important;
    background-color: var(--wp--preset--color--background) !important;
}
html[data-theme="dark"] .cc-home-social {
    background-color: #1c1c1c !important;
}

.cc-home-social__inner {
    display: flex;
    gap: 3.5rem;
    align-items: center;
}

/* Chip/label pequeño */
.cc-home-social__chip {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin-bottom: 0.75rem;
}

/* ── Columna WhatsApp ── */
.cc-home-social__wa { flex: 1; max-width: 400px; }

.cc-home-social__title {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-weight: 700 !important;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important;
    color: var(--wp--preset--color--primary) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.625rem !important;
    line-height: 1.15 !important;
}
html[data-theme="dark"] .cc-home-social__title {
    color: #fff !important;
}
.cc-home-social__sub {
    color: rgba(28,28,28,0.6);
    font-size: 0.875rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
html[data-theme="dark"] .cc-home-social__sub {
    color: rgba(255,255,255,0.5);
}
.cc-home-social__wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.625rem;
    background: #25D366;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 2rem;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s;
    line-height: 1;
}
.cc-home-social__wa-btn:hover { background: #1ebe57; transform: translateY(-2px); }
.cc-home-social__wa-note {
    font-size: 0.72rem;
    color: rgba(28,28,28,0.4);
    margin: 0.75rem 0 0;
}
html[data-theme="dark"] .cc-home-social__wa-note {
    color: rgba(255,255,255,0.35);
}

/* ── Columna Redes ── */
.cc-home-social__redes {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cc-home-social__grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto;
}

/* Cards: base visual — media queries controlan sizes y rotaciones */
.cc-home-social__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transform-origin: bottom center;
    position: relative;
}
.cc-home-social__card .cc-phone-frame {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5),
        0 8px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.cc-home-social__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Colores de acento por red al hacer hover */
.cc-home-social__card--instagram:hover .cc-phone-frame { border-color: rgba(225,48,108,0.7); }
.cc-home-social__card--facebook:hover  .cc-phone-frame { border-color: rgba(24,119,242,0.7); }
.cc-home-social__card--tiktok:hover    .cc-phone-frame { border-color: rgba(105,201,208,0.7); }
.cc-home-social__card--youtube:hover   .cc-phone-frame { border-color: rgba(255,0,0,0.7); }

/* Estilos base del phone frame en home social */
.cc-home-social__card .cc-phone-frame__screen {
    min-height: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
}
.cc-home-social__card .cc-phone-frame__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Desktop (>=768px): fan con hover */
@media (min-width: 768px) {
    .cc-home-social__grid { padding: 1rem 0 3.5rem; }

    .cc-home-social__card {
        flex: 0 0 135px;
        width: 135px;
        max-width: 135px;
        margin-left: -48px;
        transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
        cursor: pointer;
    }
    .cc-home-social__card:first-child { margin-left: 0; }
    .cc-home-social__card:nth-child(1) { z-index: 1; transform: rotate(-4deg) translateY(5px); }
    .cc-home-social__card:nth-child(2) { z-index: 2; transform: rotate(-1.5deg) translateY(2px); }
    .cc-home-social__card:nth-child(3) { z-index: 3; transform: rotate(1deg) translateY(1px); }
    .cc-home-social__card:nth-child(4) { z-index: 4; transform: rotate(3.5deg); }

    .cc-home-social__card:hover {
        z-index: 10;
        transform: translateY(-22px) rotate(0deg) scale(1.1) !important;
        box-shadow: none !important;
    }
    .cc-home-social__card:hover .cc-phone-frame {
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.5),
            0 22px 48px rgba(0,0,0,0.65),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .cc-home-social__card .cc-phone-frame { max-width: 135px; }
    .cc-home-social__card .cc-phone-frame__screen { height: 193px; }
    .cc-home-social__card:hover .cc-home-social__name { opacity: 1; }
}

/* Mobile (<768px): stack + fan tap-to-front */
@media (max-width: 767px) {
    .cc-home-social__inner {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        align-items: stretch;
    }
    .cc-home-social__wa { max-width: 100%; }
    .cc-home-social__wa-btn { width: 100%; justify-content: center; }
    .cc-home-social__wa-note { text-align: center; }

    .cc-home-social__grid { padding: 0.75rem 0 3.5rem; }

    .cc-home-social__card {
        flex: 0 0 102px;
        width: 102px;
        max-width: 102px;
        margin-left: -40px;
        transition: transform 0.4s cubic-bezier(0.34, 1.25, 0.64, 1);
        cursor: pointer;
    }
    .cc-home-social__card:first-child { margin-left: 0; }
    .cc-home-social__card:nth-child(1) { z-index: 1; transform: rotate(-5deg) translateY(4px); }
    .cc-home-social__card:nth-child(2) { z-index: 2; transform: rotate(-2deg) translateY(2px); }
    .cc-home-social__card:nth-child(3) { z-index: 3; transform: rotate(1.5deg) translateY(1px); }
    .cc-home-social__card:nth-child(4) { z-index: 4; transform: rotate(4.5deg); }

    .cc-home-social__card.is-active {
        z-index: 10 !important;
        transform: translateY(-15px) rotate(0deg) scale(1.08) !important;
    }
    .cc-home-social__card.is-active .cc-phone-frame {
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.5),
            0 16px 36px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .cc-home-social__card:nth-child(4)::after {
        content: '👆 Tocá';
        position: absolute;
        bottom: -1.4rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.62rem;
        color: rgba(255,255,255,0.4);
        white-space: nowrap;
        pointer-events: none;
    }
    .cc-home-social__card.is-active::after { display: none !important; }
    .cc-home-social__card .cc-phone-frame {
        max-width: 102px;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .cc-home-social__name { display: none; }
}

.cc-social-mockup__icon {
    width: 52px;
    height: 52px;
    opacity: 0.5;
    color: #fff;
    flex-shrink: 0;
}
.cc-social-mockup__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
}

/* Botón Instagram (gradiente) */
.cc-btn-instagram .wp-block-button__link {
    background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: opacity 200ms ease, transform 200ms ease !important;
    box-shadow: 0 4px 14px rgba(225,48,108,0.4) !important;
}
.cc-btn-instagram .wp-block-button__link:hover {
    opacity: 0.88 !important;
    transform: translateY(-2px) !important;
}

/* Botón Facebook */
.cc-btn-facebook .wp-block-button__link {
    background: #1877F2 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: background 200ms ease, transform 200ms ease !important;
    box-shadow: 0 4px 14px rgba(24,119,242,0.35) !important;
}
.cc-btn-facebook .wp-block-button__link:hover {
    background: #1464cc !important;
    transform: translateY(-2px) !important;
}

/* Botón YouTube */
.cc-btn-youtube .wp-block-button__link {
    background: #FF0000 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: background 200ms ease, transform 200ms ease !important;
    box-shadow: 0 4px 14px rgba(255,0,0,0.35) !important;
}
.cc-btn-youtube .wp-block-button__link:hover {
    background: #cc0000 !important;
    transform: translateY(-2px) !important;
}

/* Botón TikTok */
.cc-btn-tiktok .wp-block-button__link {
    background: #010101 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: background 200ms ease, transform 200ms ease !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
.cc-btn-tiktok .wp-block-button__link:hover {
    background: #2a2a2a !important;
    transform: translateY(-2px) !important;
}

/* Botones sociales en mobile: evitar wrapping dentro del fan */
@media (max-width: 781px) {
    .cc-contact-social .cc-social-col .wp-block-button__link {
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 0.5rem 0.75rem !important;
        letter-spacing: 0.03em !important;
    }
}

/* ── CTA final ────────────────────────────────────────────────────── */
.cc-contact-cta {
    background: var(--wp--preset--color--primary) !important;
    border-top: none;
    position: relative;
    isolation: isolate;
}
.cc-contact-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(184,150,110,0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.cc-contact-cta > * { position: relative; z-index: 1; }
.cc-contact-cta__title {
    font-family: var(--wp--preset--font-family--inter) !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--white) !important;
    margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ── Contacto: secciones oscuras adaptadas al modo claro ─────────── */
html:not([data-theme="dark"]) .cc-contact-hero {
    background-color: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--primary) !important;
    border-bottom: none !important;
}
html:not([data-theme="dark"]) .cc-contact-hero h1,
html:not([data-theme="dark"]) .cc-contact-hero h2,
html:not([data-theme="dark"]) .cc-contact-hero h3,
html:not([data-theme="dark"]) .cc-contact-hero p {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .cc-contact-hero .has-text-muted-color {
    color: var(--wp--preset--color--text-muted) !important;
}

html:not([data-theme="dark"]) .cc-contact-social {
    background-color: var(--wp--preset--color--warm-cream) !important;
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .cc-contact-social h2,
html:not([data-theme="dark"]) .cc-contact-social p {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .cc-contact-social .has-text-muted-color {
    color: var(--wp--preset--color--text-muted) !important;
}

html:not([data-theme="dark"]) .cc-contact-cta {
    background: var(--wp--preset--color--warm-cream) !important;
    border-top: none !important;
}
html:not([data-theme="dark"]) .cc-contact-cta::before {
    display: none;
}
html:not([data-theme="dark"]) .cc-contact-cta__title {
    color: var(--wp--preset--color--primary) !important;
}
html:not([data-theme="dark"]) .cc-contact-cta .has-text-muted-color {
    color: var(--wp--preset--color--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA DE PRODUCTO INDIVIDUAL
══════════════════════════════════════════════════════════════════ */

/* ── Layout hero ─────────────────────────────────────────────────── */
.cc-product-hero {
    align-items: flex-start !important;
}
.cc-product-gallery-col .wc-block-product-image-gallery {
    position: sticky;
    top: 2rem;
}
/* Botones de compra: pegajosos — mientras se scrollea la página (foto,
   descripción, video, todo más abajo), el precio y los botones quedan a
   la vista en vez de quedar arriba, fuera de pantalla. Solo el bloque de
   compra (no toda la columna, que con badges/CTA de cantidad/tira de
   confianza puede ser más alta que la propia foto y dejar sin margen
   para "pegarse"). */
.cc-product-atc-form {
    position: sticky;
    top: 2rem;
    z-index: 5;
    background: var(--wp--preset--color--surface);
}
/* Imagen principal más grande y con borde redondeado */
.cc-product-gallery-col .woocommerce-product-gallery__image img,
.cc-product-gallery-col .wc-block-product-image-gallery img {
    border-radius: 12px;
}

/* ── Carrusel de miniaturas ──────────────────────────────────────────── */
.cc-thumb-carousel {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

/* Track: scroll nativo sin scrollbar */
.cc-thumb-track-wrap {
    flex: 1 !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
    border-radius: 10px !important;
}
.cc-thumb-track-wrap::-webkit-scrollbar {
    display: none !important;
}

/* Lista en fila única */
.cc-thumb-carousel .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: max-content !important;
}

/* Cada miniatura: ancho fijo seteado por JS */
.cc-thumb-carousel .flex-control-thumbs li {
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: border-color 180ms ease !important;
    aspect-ratio: 1 !important;
    box-sizing: border-box !important;
}
.cc-thumb-carousel .flex-control-thumbs li:hover {
    border-color: var(--wp--preset--color--accent) !important;
}
.cc-thumb-carousel .flex-control-thumbs li:has(.flex-active) {
    border-color: var(--wp--preset--color--accent) !important;
}
.cc-thumb-carousel .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Miniatura de video: se suma al final de las fotos — al tocarla baja con
   scroll suave hasta la sección de video, no cambia la imagen principal. */
.cc-thumb-carousel .flex-control-thumbs li.cc-thumb-video {
    position: relative !important;
}
.cc-thumb-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}
.cc-thumb-video__play svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Flechas prev / next */
.cc-thumb-prev,
.cc-thumb-next {
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--wp--preset--color--border) !important;
    background: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--primary) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}
.cc-thumb-prev:hover,
.cc-thumb-next:hover {
    background: var(--wp--preset--color--accent) !important;
    border-color: var(--wp--preset--color--accent) !important;
    color: #fff !important;
}
.cc-thumb-prev:disabled,
.cc-thumb-next:disabled {
    opacity: 0.25 !important;
    pointer-events: none !important;
}
html[data-theme="dark"] .cc-thumb-prev,
html[data-theme="dark"] .cc-thumb-next {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.88) !important;
}

/* ── Título ──────────────────────────────────────────────────────── */
.cc-product-title {
    font-family: var(--wp--preset--font-family--playfair) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--wp--preset--color--text) !important;
    margin: 0 0 var(--wp--preset--spacing--30) !important;
}

/* ── Precio en single ────────────────────────────────────────────── */
.cc-product-price ins .woocommerce-Price-amount,
.cc-product-price .wc-block-components-product-price:not(:has(ins)) .woocommerce-Price-amount {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--accent) !important;
}
.cc-product-price del .woocommerce-Price-amount {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--text-muted) !important;
}
.cc-product-price .wc-block-components-product-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.625rem !important;
    flex-wrap: wrap !important;
}

/* ── Extra precios en single (más grandes que en tarjeta) ─────────── */
.cc-product-details-col .cc-extra-prices {
    padding: 0 !important;
    gap: 0.5rem !important;
    margin-top: 0.375rem;
    display: flex;
    flex-direction: column;
}
.cc-product-details-col .cc-extra-prices__transfer,
.cc-product-details-col .cc-extra-prices__installments {
    font-size: 1rem !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 8px !important;
    background: var(--wp--preset--color--surface) !important;
    border: 1px solid var(--wp--preset--color--border) !important;
}
.cc-product-details-col .cc-extra-prices__transfer strong,
.cc-product-details-col .cc-extra-prices__installments strong {
    font-size: 1.1rem !important;
}

/* ── Separador ───────────────────────────────────────────────────── */
.cc-product-divider {
    border-color: var(--wp--preset--color--border) !important;
    opacity: 0.6 !important;
}

/* ── Formulario agregar al carrito ───────────────────────────────── */
.cc-product-atc-form .wc-block-components-quantity-selector {
    border: 1px solid var(--wp--preset--color--border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.cc-product-atc-form .wc-block-components-product-add-to-cart-button .wp-element-button,
.cc-product-atc-form .single_add_to_cart_button {
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.875rem 2rem !important;
    letter-spacing: 0.04em !important;
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
    box-shadow: 0 4px 16px rgba(184,150,110,0.3) !important;
    cursor: pointer !important;
}
.cc-product-atc-form .wc-block-components-product-add-to-cart-button .wp-element-button:hover,
.cc-product-atc-form .single_add_to_cart_button:hover {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 80%, #000) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(184,150,110,0.4) !important;
}

/* ── CRO: aviso "Mirá el producto en video" bajo el precio ───────── */
.cc-video-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}
.cc-video-hint svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}
.cc-video-hint:hover {
    text-decoration: underline;
}

/* ── CRO: tira de confianza + consulta por WhatsApp ──────────────── */
.cc-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: var(--wp--preset--spacing--40);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--border);
}
.cc-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--wp--preset--color--text-muted);
}
.cc-trust-strip__item svg {
    width: 16px;
    height: 16px;
    fill: var(--wp--preset--color--accent);
    flex-shrink: 0;
}
.cc-consult-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: rgba(37, 211, 102, 0.1);
    color: #1a8a4a;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease;
}
.cc-consult-whatsapp svg {
    width: 18px;
    height: 18px;
    fill: #25d366;
    flex-shrink: 0;
}
.cc-consult-whatsapp:hover {
    background: rgba(37, 211, 102, 0.18);
}
html[data-theme="dark"] .cc-consult-whatsapp {
    color: #4fd881;
}

/* ── CRO: barra fija de compra — mobile Y desktop ─────────────────── */
.cc-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--wp--preset--color--surface);
    border-top: 1px solid var(--wp--preset--color--border);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.14), 0 -2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.34, 1.05, 0.64, 1);
    pointer-events: none;
}
.cc-sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
/* Filete de acento arriba de todo — toque de marca, más presencia visual */
.cc-sticky-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wp--preset--color--accent), color-mix(in srgb, var(--wp--preset--color--accent) 55%, #fff));
}
.cc-sticky-cta__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
}
.cc-sticky-cta__product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}
.cc-sticky-cta__thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--wp--preset--color--border);
}
.cc-sticky-cta__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}
.cc-sticky-cta__title {
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wp--preset--color--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cc-sticky-cta__price {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-sticky-cta__price del {
    display: none;
}
.cc-sticky-cta__price ins {
    text-decoration: none;
}
.cc-sticky-cta__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cc-sticky-cta__add,
.cc-sticky-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex-shrink: 0;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 0.65em 0.85em !important;
    cursor: pointer !important;
    white-space: nowrap;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}
.cc-sticky-cta__add svg,
.cc-sticky-cta__btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
/* En mobile el texto va corto ("Añadir" / "Comprar") para que entre
   cómodo junto al precio — el resto de la frase aparece recién con más
   ancho disponible. */
.cc-sticky-cta__btn-extra {
    display: none;
}
.cc-sticky-cta__add {
    background: transparent !important;
    color: var(--wp--preset--color--accent) !important;
    border: 2px solid var(--wp--preset--color--accent) !important;
}
.cc-sticky-cta__add:hover {
    background: rgba(194, 123, 46, 0.08) !important;
}
.cc-sticky-cta__btn {
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(194, 123, 46, 0.35) !important;
}
.cc-sticky-cta__btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(194, 123, 46, 0.45) !important;
}
@media (min-width: 560px) {
    .cc-sticky-cta__title {
        display: block;
    }
    .cc-sticky-cta__btn-extra {
        display: inline;
    }
}
@media (min-width: 900px) {
    .cc-sticky-cta__inner {
        padding: 0.85rem 2rem;
    }
    .cc-sticky-cta__thumb {
        width: 54px;
        height: 54px;
        border-radius: 10px;
    }
    .cc-sticky-cta__title {
        max-width: 420px;
        font-size: 0.9rem;
    }
    .cc-sticky-cta__price {
        font-size: 1.2rem;
    }
    .cc-sticky-cta__add,
    .cc-sticky-cta__btn {
        font-size: 0.82rem !important;
        padding: 0.85em 1.7em !important;
    }
}
/* Botón de WhatsApp flotante: subirlo cuando la barra fija de compra está
   visible, para que no se tapen entre sí en la ficha de producto. */
body.has-sticky-cta .whatsapp-float {
    bottom: calc(76px + 1.5rem);
    transition: bottom 200ms ease;
}
@media (max-width: 480px) {
    body.has-sticky-cta .whatsapp-float {
        bottom: calc(68px + 1rem);
    }
}
@media (min-width: 900px) {
    body.has-sticky-cta .whatsapp-float {
        bottom: calc(88px + 1.5rem);
    }
}

/* ── Tabs de descripción y reseñas ──────────────────────────────── */
.cc-product-tabs .wc-block-product-details__summary,
.cc-product-tabs .woocommerce-tabs {
    margin-top: var(--wp--preset--spacing--70);
}

/* Sin solapas: descripción, video, etc. van todos visibles uno debajo del
   otro — la gente recorre la página con scroll, no tiene que hacer clic
   en ninguna pestaña para encontrar la info. */
.cc-product-tabs .woocommerce-tabs ul.tabs {
    display: none !important;
}
.cc-product-tabs .woocommerce-Tabs-panel {
    display: block !important;
    opacity: 1 !important;
}
.cc-product-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel {
    margin-top: var(--wp--preset--spacing--50);
}

/* ── Video de producto: miniatura + play, el iframe de YouTube recién
   se carga al hacer clic (ver initVideoFacade en main.js). Formato
   vertical (reel/story) — los videos se suben así a propósito. ──── */
.cc-video-facade {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    margin-left: 0;
    margin-right: auto;
}
@media (min-width: 700px) {
    .cc-video-facade {
        margin-left: auto;
        margin-right: auto;
    }
}
.cc-video-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 200ms ease;
}
.cc-video-facade:hover .cc-video-facade__thumb {
    opacity: 1;
}
.cc-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease;
}
.cc-video-facade:hover .cc-video-facade__play {
    transform: translate(-50%, -50%) scale(1.08);
}
.cc-video-facade__play svg {
    width: 26px;
    height: 26px;
    fill: var(--wp--preset--color--white, #fff);
    margin-left: 3px;
}
.cc-video-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Rating ──────────────────────────────────────────────────────── */
.wc-block-components-product-rating .wc-block-components-product-rating__stars {
    color: var(--wp--preset--color--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PÁGINA NOSOTROS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Centrado de contenido en secciones full-width ──────────────────────────── */
/* El is-layout-constrained de FSE no siempre centra dentro de alignfull;
   forzamos el centrado explícitamente en todas nuestras secciones. */
.cc-nos-hero    > .wp-block-group__inner-container,
.cc-nos-section > .wp-block-group__inner-container { padding: 0 2rem; }

.cc-nos-hero    > *:not(style),
.cc-nos-section > *:not(style) {
    max-width: 1100px;
    margin-left:  auto !important;
    margin-right: auto !important;
}
.cc-nos-hero > *:not(style) { max-width: 720px; }

/* Padding lateral propio de cada sección, en TODOS los anchos (no solo
   mobile): el max-width + margin:auto de arriba solo centra el contenido
   cuando el viewport supera los ~1100px del contentSize. Entre ~769px y
   1100px (laptops, tablets en horizontal) no hay ningún margen propio y
   el texto queda pegado al borde — por eso este padding va sin media
   query, así siempre hay aire mínimo a los costados. */
.cc-nos-hero,
.cc-nos-section {
    padding-left:  1.25rem !important;
    padding-right: 1.25rem !important;
}

/* ── Variables locales ──────────────────────────────────────────────────────── */
.cc-page-nosotros {
    --nos-accent:  #C27B2E;
    --nos-dark:    #1C1C1C;
    --nos-cream:   #F5EED6;
    --nos-light:   #FAFAF7;
    --nos-border:  #E2D9C5;
    --nos-muted:   #6B6B6B;
    --nos-heading: 'Playfair Display', Georgia, serif;
    --nos-body:    'Inter', Arial, sans-serif;
}

/* ── Kicker (etiqueta dorada uppercase encima de headings) ──────────────────── */
.cc-nos-kicker {
    font-family: var(--nos-body) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--nos-accent) !important;
    margin: 0 0 0.85rem !important;
}

/* ── Headings ───────────────────────────────────────────────────────────────── */
.cc-nos-h2 {
    font-family: var(--nos-heading) !important;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--nos-dark) !important;
    margin: 0 0 1.5rem !important;
}
.cc-nos-h2--center { text-align: center !important; }
.cc-nos-h2--light  { color: var(--nos-light) !important; }

/* ── Párrafos ───────────────────────────────────────────────────────────────── */
.cc-nos-p {
    font-family: var(--nos-body) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: var(--nos-dark) !important;
    margin: 0 0 1rem !important;
}
.cc-nos-p--light  { color: rgba(250, 250, 247, 0.72) !important; }
.cc-nos-p:last-child { margin-bottom: 0 !important; }

/* ── Separador decorativo dorado ─────────────────────────────────────────────── */
.cc-nos-divider {
    width: 52px;
    height: 2px;
    background: var(--nos-accent);
    border-radius: 2px;
    margin: 2rem auto 0;
}

/* ── Imágenes ───────────────────────────────────────────────────────────────── */
.cc-nos-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    display: block;
}
.cc-nos-img--feria img {
    height: 320px;
}
/* Caption-placeholder (visible solo cuando no hay imagen) */
.cc-nos-img-hint {
    font-size: 0.78rem !important;
    color: var(--nos-muted) !important;
    font-style: italic !important;
    background: var(--nos-cream) !important;
    border: 2px dashed var(--nos-border) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    text-align: center !important;
    display: block !important;
    margin-top: 0.5rem !important;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.cc-nos-hero__title {
    font-family: var(--nos-heading) !important;
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #FAFAF7 !important;
    margin: 0.5rem 0 1.25rem !important;
    text-align: center !important;
}
.cc-nos-hero__sub {
    font-family: var(--nos-body) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: rgba(250, 250, 247, 0.65) !important;
    margin: 0 !important;
}

/* ── Feature list (sección máquina) ─────────────────────────────────────────── */
.cc-nos-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.75rem 0 0 !important;
}
.cc-nos-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--nos-body);
    font-size: 0.95rem;
    color: rgba(250, 250, 247, 0.8);
    line-height: 1.6;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-nos-features li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cc-nos-feature-icon {
    color: var(--nos-accent);
    font-size: 0.7rem;
    line-height: 1.6;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ── Timeline ───────────────────────────────────────────────────────────────── */
.cc-nos-timeline {
    margin: 3rem 0 0;
    position: relative;
}
.cc-nos-timeline::before {
    content: '';
    position: absolute;
    left: 72px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--nos-accent), var(--nos-border));
}
.cc-nos-tl-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.cc-nos-tl-item:last-child { margin-bottom: 0; }
.cc-nos-tl-year {
    flex-shrink: 0;
    width: 72px;
    font-family: var(--nos-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--nos-accent);
    line-height: 1.4;
    text-align: right;
    padding-right: 1.5rem;
    padding-top: 0.15rem;
    position: relative;
}
.cc-nos-tl-year::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nos-accent);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px var(--nos-accent);
}
.cc-nos-tl-body {
    flex: 1;
    background: var(--nos-light);
    border: 1px solid var(--nos-border);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
}
.cc-nos-tl-body h3 {
    font-family: var(--nos-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nos-dark);
    margin: 0 0 0.6rem;
}
.cc-nos-tl-body p {
    font-family: var(--nos-body);
    font-size: 0.95rem;
    color: var(--nos-muted);
    line-height: 1.75;
    margin: 0;
}
.cc-nos-tl-body strong { color: var(--nos-dark); }

/* ── Cards de valores ───────────────────────────────────────────────────────── */
.cc-nos-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.cc-nos-card {
    background: var(--nos-light);
    border: 1px solid var(--nos-border);
    border-top: 3px solid var(--nos-accent);
    border-radius: 0 0 10px 10px;
    padding: 2rem 1.75rem;
}
.cc-nos-card__icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1;
}
.cc-nos-card__title {
    font-family: var(--nos-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nos-dark);
    margin: 0 0 0.75rem;
}
.cc-nos-card__text {
    font-family: var(--nos-body);
    font-size: 0.92rem;
    color: var(--nos-muted);
    line-height: 1.75;
    margin: 0;
}
.cc-nos-card__text strong { color: var(--nos-dark); }

/* ── Botones CTA ────────────────────────────────────────────────────────────── */
.cc-nos-btn-primary .wp-block-button__link {
    background: var(--nos-accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.9rem 2.2rem !important;
    font-family: var(--nos-body) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
.cc-nos-btn-wa .wp-block-button__link {
    background: transparent !important;
    color: rgba(250, 250, 247, 0.85) !important;
    border: 1.5px solid rgba(250, 250, 247, 0.35) !important;
    padding: 0.9rem 2.2rem !important;
    font-family: var(--nos-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s;
}
.cc-nos-btn-wa .wp-block-button__link:hover {
    border-color: var(--nos-accent) !important;
    color: var(--nos-accent) !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Padding vertical de todas las secciones: de 4.5–5rem → 2rem
       Los inline styles traen 4.5rem/5rem, necesitamos !important.
       (El padding horizontal ya se aplica en todos los anchos más arriba,
       junto con el resto de las reglas de centrado de esta página.) */
    .cc-nos-hero,
    .cc-nos-familia,
    .cc-nos-historia,
    .cc-nos-maquina,
    .cc-nos-ferias,
    .cc-nos-valores,
    .cc-nos-cta {
        padding-top:    2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Headings y kickers: menos margen inferior */
    .cc-nos-h2   { margin-bottom: 1rem !important; }
    .cc-nos-kicker { margin-bottom: 0.5rem !important; }

    /* Gap interno entre bloques dentro de cada sección */
    .cc-nos-hero    > *:not(style) + *:not(style),
    .cc-nos-section > *:not(style) + *:not(style) { margin-top: 1.25rem; }

    /* Timeline: menos gap entre ítems */
    .cc-nos-timeline { gap: 1.25rem !important; }
    .cc-nos-tl-item  { margin-bottom: 0 !important; }
    .cc-nos-timeline::before { left: 52px; }
    .cc-nos-tl-year  { width: 52px; font-size: 1.1rem; }
    .cc-nos-tl-body  { padding: 1rem 1.1rem !important; }

    /* Cards de valores: 1 columna, menos gap */
    .cc-nos-cards {
        grid-template-columns: 1fr;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
    }
    .cc-nos-card { padding: 1.25rem 1.25rem !important; }

    /* Imágenes — altura sin cambios */
    .cc-nos-img img        { height: 280px; }
    .cc-nos-img--feria img { height: 220px; }

    /* Divider decorativo: menos margen */
    .cc-nos-divider { margin: 1rem auto 0 !important; }

    /* En mobile las fotos de ferias y familia van en columna */
    .cc-nos-ferias .wp-block-columns,
    .cc-nos-familia .wp-block-columns { flex-direction: column !important; }
    .cc-nos-ferias .wp-block-column,
    .cc-nos-familia .wp-block-column  { flex-basis: 100% !important; }

    /* CTA: línea divisora dorada antes del footer */
    .cc-nos-cta { padding-bottom: 1.75rem !important; }
    .cc-nos-cta::after {
        content: '';
        display: block;
        width: 80px;
        height: 1px;
        background: rgba(194, 123, 46, 0.45);
        margin: 1.5rem auto 0;
    }
}

/* ─── Callout: descuento por cantidad (página de producto) ──────────────────── */

.cc-qty-discount-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(194, 123, 46, 0.08);
    border: 1px solid rgba(194, 123, 46, 0.30);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: var(--wp--preset--spacing--50);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--wp--preset--color--primary);
}

.cc-qty-discount-callout__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--wp--preset--color--accent);
}

.cc-qty-discount-callout__body strong {
    color: var(--wp--preset--color--accent);
}

.cc-qty-discount-callout__tip {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--wp--preset--color--text-muted);
}

/* Dark mode override (archivo dark-mode.css maneja html[data-theme=dark]) */

/* Estilo del span de aclaración dentro del aviso dinámico del plugin */
.accel-dc-notice__tip {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    opacity: 0.75;
}

/* ─── Reseñas Google (Trustindex) ────────────────────────────────────────────── */

.cc-section--reviews {
    background-color: #FAFAF7;
}

/* Left panel: EXCELENTE + rating + logo */
.cc-section--reviews .ti-footer {
    background: transparent !important;
    padding-left: 0 !important;
}

.cc-section--reviews .ti-rating.ti-rating-large {
    color: var(--wp--preset--color--primary) !important;
    letter-spacing: -0.02em;
    font-size: 1.5rem !important;
}

/* Review cards */
.cc-section--reviews .ti-review-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(28, 28, 28, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cc-section--reviews .ti-review-item:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px);
}

/* Reviewer name */
.cc-section--reviews .ti-name {
    font-weight: 600 !important;
    color: var(--wp--preset--color--primary) !important;
}

/* Review date */
.cc-section--reviews .ti-date {
    color: #9B9B9B !important;
    font-size: 0.76rem !important;
}

/* Review text */
.cc-section--reviews .ti-review-content p,
.cc-section--reviews .ti-review-content {
    color: #444 !important;
    line-height: 1.55 !important;
}

/* Navigation arrows — accent color */
.cc-section--reviews .ti-next::before,
.cc-section--reviews .ti-prev::before {
    border-color: var(--wp--preset--color--accent) !important;
}

.cc-section--reviews .ti-next:hover,
.cc-section--reviews .ti-prev:hover {
    background: var(--wp--preset--color--accent) !important;
    border-color: var(--wp--preset--color--accent) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .cc-section--reviews .ti-widget-container {
        flex-direction: column !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .cc-section--reviews .ti-footer {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    /* El widget trae su propio aire abajo (paginación, "powered by", etc.) —
       recortarlo para que no sume al espacio ya reducido de la sección. */
    .cc-section--reviews .ti-widget,
    .cc-section--reviews .ti-carousel,
    .cc-section--reviews [class*="ti-pagination"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Las reglas de modo oscuro están en:
   wp-content/plugins/accel-dark-mode/assets/dark-mode.css
   usando html[data-theme="dark"] — NO usar @media prefers-color-scheme aquí */

/* ── FiboSearch en header ────────────────────────────────────────────────────── */

.site-header .wp-block-fibosearch-search {
    flex: 1 1 auto;
    max-width: 360px;
    min-width: 180px;
}

/* Wrapper pill: solo colores y borde — FiboSearch maneja el layout interno */
.site-header .dgwt-wcas-sf-wrapp {
    width: 100% !important;
    background: var(--wp--preset--color--background) !important;
    border: 1.5px solid var(--wp--preset--color--border) !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.site-header .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--wp--preset--color--accent) !important;
    box-shadow: 0 0 0 3px rgba(194,123,46,0.15) !important;
}

/* Input: solo colores, FiboSearch maneja padding/dimensiones */
.site-header .dgwt-wcas-search-input {
    background: transparent !important;
    color: var(--wp--preset--color--text) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem !important;
    padding-left: 60px !important;
}

.site-header .dgwt-wcas-search-input::placeholder {
    color: var(--wp--preset--color--text-muted) !important;
}

/* Botón submit: color accent */
.site-header .dgwt-wcas-search-submit {
    background: var(--wp--preset--color--accent) !important;
    border: none !important;
    transition: background 200ms ease !important;
}

.site-header .dgwt-wcas-search-submit:hover {
    background: var(--wp--preset--color--accent-light) !important;
}

.site-header .dgwt-wcas-search-submit svg,
.site-header .dgwt-wcas-search-submit svg path {
    fill: #fff !important;
}

/* Links de navegación: nunca parten en dos líneas */
.site-header .wp-block-navigation-item__content {
    white-space: nowrap;
}

/* Mobile: header en dos filas — Hamburger | Logo | Cart  /  Buscador + DarkMode */
@media (max-width: 781px) {
    /* Habilitar wrapping, quitar gap para que fila 2 no desborde */
    .site-header .is-content-justification-space-between.is-nowrap {
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding: 0 0.75rem 0.625rem !important;
    }

    /* Disolver el wrapper de cart+darkmode para poder separarlos */
    .site-header .is-content-justification-space-between > .wp-block-group {
        display: contents !important;
    }

    /* Fila 1: Nav (hamburger) a la izquierda */
    .site-header .wp-block-navigation {
        order: 1;
        flex: 0 0 auto;
    }

    /* Fila 1: Logo más grande y centrado */
    .site-header .wp-block-site-logo {
        order: 2;
        flex: 1;
        display: flex;
        justify-content: center;
        margin-bottom: 0.75rem;
    }
    .site-header .wp-block-site-logo img {
        width: 80px !important;
        height: auto !important;
    }

    /* Fila 1: Cart solo a la derecha */
    .site-header .wp-block-woocommerce-mini-cart {
        order: 3;
        flex: 0 0 auto;
    }

    /* Fila 2: FiboSearch + DarkMode comparten la fila (gap=0, caben exacto) */
    .site-header .dgwt-wcas-search-wrapp,
    .site-header .wp-block-fibosearch-search {
        display: flex !important;
        order: 10;
        flex: 0 0 calc(100% - 40px);
        width: calc(100% - 40px);
        padding: 0 0.25rem;
        box-sizing: border-box;
    }

    /* Fila 2: Dark mode fijo 40px a la derecha */
    .site-header .accel-dark-mode-toggle-wrap {
        order: 11;
        flex: 0 0 40px;
        width: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ── Resultados de búsqueda: misma grilla que tienda (5 columnas) ─────────── */
.search-results .wc-block-product-template {
    grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(20% - 1em)), 1fr)) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — home page
   ════════════════════════════════════════════════════════════════════════════ */

/* Evitar scroll horizontal en cualquier sección.
   OJO: .wp-site-blocks NO va acá — overflow-x:hidden en un ancestro tan
   arriba en el árbol rompe TODO el position:sticky del sitio entero (la
   galería del producto, los botones de compra, etc.), porque cualquier
   overflow != visible convierte a ese ancestro en el "contenedor" del
   sticky en vez del viewport. El scroll horizontal se corta con las
   reglas puntuales de abajo, que sí alcanzan sin ese efecto colateral. */
.site-header,
.cc-section--categorias,
.cc-section--ofertas,
.cc-section--exclusivos,
.cc-section--strip,
.cc-section--reviews,
.cc-home-social {
    overflow-x: hidden;
}

@media (max-width: 782px) {

    /* ── Banner: mientras no haya imágenes mobile, mostrar lado derecho ── */
    .ccdesign-banner-slider__img {
        object-position: right center;
    }

    /* ── Cat showcase: 1 tarjeta a la vez, bien contenida ─────────────── */
    .cc-section--categorias .alignwide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .cc-cat-showcase {
        padding: 0 2.5rem;
    }

    /* ── Productos home: 2 columnas y margen lateral ───────────────────── */
    .cc-section--ofertas .alignwide,
    .cc-section--exclusivos .alignwide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .cc-section--ofertas .wc-block-product-template,
    .cc-section--exclusivos .wc-block-product-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Strip pagos: apilar verticalmente ─────────────────────────────── */
    .cc-strip-cols {
        flex-direction: column !important;
    }
    .cc-strip-cols .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .cc-strip-item--bordered {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--wp--preset--color--border) !important;
        border-bottom: 1px solid var(--wp--preset--color--border) !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* ── Reseñas: widget Trustindex contenido ──────────────────────────── */
    .cc-section--reviews {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .cc-section--reviews .ti-widget,
    .cc-section--reviews .ti-widget-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Línea de acento bajo el título — mucho margen si el widget queda vacío */
    .cc-section--reviews .cc-title-underline {
        margin-bottom: 0.75rem !important;
    }

    /* ── Social / WhatsApp section: evitar overflow ─────────────────────── */
    .cc-home-social {
        padding-top: 1.5rem !important;
    }
    /* Achicar el espacio entre Reseñas y Contacto directo — el "block gap"
       global del tema (32px) separa igual todas las secciones del home, acá
       lo recortamos puntualmente sin tocar el resto. */
    .cc-section--reviews + .cc-home-social {
        margin-top: 1rem !important;
    }
    .cc-home-social__inner {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .cc-home-social__title {
        font-size: 1.4rem !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   PÁGINA DE RESEÑA
   ════════════════════════════════════════════════════════════════════════════ */

.cc-resena-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 1rem;
}

.cc-resena-card {
    background: var(--wp--preset--color--surface, #fff);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.10);
    padding: 3rem 2.5rem !important;
    text-align: center;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

html[data-theme="dark"] .cc-resena-card {
    background: #2a2a2a;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* Estrellas */
.cc-resena-stars {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}
.cc-resena-stars svg {
    width: 40px;
    height: 40px;
    color: #F5A623;
}

/* Título */
.cc-resena-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Subtítulo */
.cc-resena-subtitle {
    color: var(--wp--preset--color--text-muted, #666) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Botón Google */
.cc-resena-btn-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.cc-resena-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--wp--preset--color--accent);
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(194,123,46,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-resena-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(194,123,46,0.45);
}
.cc-resena-google-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}

/* Gracias */
.cc-resena-thanks {
    font-size: 0.9rem !important;
    color: var(--wp--preset--color--text-muted, #999) !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .cc-resena-card {
        padding: 2rem 1.25rem !important;
    }
    .cc-resena-stars svg {
        width: 32px;
        height: 32px;
    }
    .cc-resena-btn {
        font-size: 0.95rem;
        padding: 0.8rem 1.5rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   CHECKOUT — encabezado con logo, opciones de pago y reaseguro
   (plantilla: templates/page-checkout.html + parts/checkout-header.html)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Encabezado ─────────────────────────────────────────────────────────────── */
.cc-checkout-header {
    position: relative;
    background: var(--wp--preset--color--surface);
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding: 0.7rem 1rem;
    box-shadow: 0 6px 20px rgba(28, 28, 28, 0.05);
}
.cc-checkout-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wp--preset--color--accent), color-mix(in srgb, var(--wp--preset--color--accent) 55%, #fff));
}
.cc-checkout-header__inner {
    max-width: 1200px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 1rem;
}
.cc-checkout-header__logo,
.cc-checkout-header__logo img {
    display: block;
    width: auto !important;
    max-width: 74px;
    height: auto;
}
.cc-checkout-header__center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}
.cc-checkout-header__title {
    font-family: var(--wp--preset--font-family--playfair);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--wp--preset--color--text);
}
.cc-checkout-header__secure {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a8a4a;
}
.cc-checkout-header__secure svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}
.cc-checkout-header__back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
    text-decoration: none;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 50px;
    transition: color 150ms ease, border-color 150ms ease;
}
.cc-checkout-header__back svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.cc-checkout-header__back:hover {
    color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}
@media (max-width: 640px) {
    .cc-checkout-header { padding: 0.55rem 0.85rem; }
    .cc-checkout-header__logo,
    .cc-checkout-header__logo img { max-width: 54px; }
    .cc-checkout-header__title { font-size: 1.05rem; }
    .cc-checkout-header__back span { display: none; }
    .cc-checkout-header__back { padding: 0.6rem; }
}
html[data-theme="dark"] .cc-checkout-header__secure { color: #4fd881; }

/* ── Contenedor y campos ────────────────────────────────────────────────────── */
/* Sin los márgenes en cascada del tema (blockGap 2rem entre header/main/contenido)
   la distancia encabezado → "Información de contacto" queda en ~1.5rem. */
.cc-checkout-wrap {
    margin-top: 0 !important;
    padding: 1.5rem 1rem 3rem !important;
}
.cc-checkout-wrap > *:not(.cc-checkout-trust),
.cc-checkout-wrap .entry-content {
    margin-top: 0 !important;
}
.cc-checkout-wrap .wp-block-woocommerce-checkout {
    padding-top: 0 !important;
}
.cc-checkout-wrap .wp-block-woocommerce-store-notices:empty,
.cc-checkout-wrap .wc-block-store-notices:empty {
    display: none;
}
.cc-checkout-wrap .wp-block-woocommerce-checkout {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.cc-checkout-wrap .wc-block-components-text-input input,
.cc-checkout-wrap .wc-block-components-textarea,
.cc-checkout-wrap .wc-blocks-components-select__select,
.cc-checkout-wrap .wc-block-components-combobox .components-combobox-control__input {
    border-radius: 8px !important;
    border-color: var(--wp--preset--color--border) !important;
}
.cc-checkout-wrap .wc-block-components-text-input input:focus,
.cc-checkout-wrap .wc-blocks-components-select__select:focus {
    border-color: var(--wp--preset--color--accent) !important;
    box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
    outline: none !important;
}
.cc-checkout-wrap .wc-block-components-checkout-step__title {
    font-family: var(--wp--preset--font-family--playfair);
    font-weight: 700;
}

/* ── Opciones de pago ───────────────────────────────────────────────────────── */
.cc-checkout-wrap .wc-block-components-radio-control-accordion-option {
    border: 1.5px solid var(--wp--preset--color--border);
    border-radius: 12px;
    background: var(--wp--preset--color--surface);
    overflow: hidden;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.cc-checkout-wrap .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
    margin-top: 0.75rem;
}
.cc-checkout-wrap .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--wp--preset--color--accent);
    background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, var(--wp--preset--color--surface));
    box-shadow: 0 6px 20px rgba(194, 123, 46, 0.14);
}
/* Anula el recuadro negro que WooCommerce dibuja sobre la opción elegida */
.cc-checkout-wrap .wc-block-components-radio-control--highlight-checked::after,
.cc-checkout-wrap .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted::after,
.cc-checkout-wrap .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked::after {
    box-shadow: none !important;
    border: 0 !important;
}
.cc-checkout-wrap .wc-block-components-radio-control__option {
    padding: 1.05rem 1rem 1.05rem 3rem;
}
.cc-checkout-wrap .wc-block-components-radio-control__label,
.cc-checkout-wrap .wc-block-components-payment-method-label {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
}
.cc-checkout-wrap .wc-block-components-radio-control__input:checked {
    border-color: var(--wp--preset--color--accent) !important;
}
.cc-checkout-wrap .wc-block-components-radio-control__input:checked::before {
    background: var(--wp--preset--color--accent) !important;
}
/* Ícono de banco en la transferencia (los medios con logo propio, como
   Mercado Pago, traen el suyo desde el plugin de la pasarela) */
.cc-checkout-wrap label[for$="-bacs"] .wc-block-components-payment-method-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.cc-checkout-wrap label[for$="-bacs"] .wc-block-components-payment-method-label::before {
    content: "";
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C27B2E'%3E%3Cpath d='M12 2l9 4.5v2H3v-2L12 2zM5 9h2v9H5V9zm4 0h2v9H9V9zm4 0h2v9h-2V9zm4 0h2v9h-2V9zM3 20h18v2H3v-2z'/%3E%3C/svg%3E");
}
.cc-checkout-wrap .wc-block-components-radio-control-accordion-content {
    padding: 0.9rem 1rem 1.1rem 3rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--wp--preset--color--text-muted);
    border-top: 1px dashed var(--wp--preset--color--border);
}

/* ── Avisos (ej: "se ha añadido a tu carrito") ──────────────────────────────── */
.cc-checkout-wrap .wp-block-woocommerce-store-notices,
.cc-checkout-wrap .wc-block-store-notices {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cc-checkout-wrap .wc-block-components-notice-banner {
    border-radius: 10px !important;
    border-width: 1px !important;
}
.cc-checkout-wrap .wc-block-components-notice-banner.is-success {
    border-color: #2e9e5b !important;
}

/* ── Orden del checkout: contacto → dirección → RESUMEN → PAGO → confirmar ──
   WooCommerce pone el resumen en una columna lateral aparte (y en mobile lo
   duplica dentro del formulario, después del pago). Con display:contents los
   bloques de esa columna y del formulario pasan a ser hermanos en un solo
   flujo, y "order" los acomoda: el resumen queda arriba de las opciones de
   pago en cualquier ancho de pantalla. */
.cc-checkout-wrap .wc-block-components-sidebar-layout.wc-block-checkout {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
.cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-main,
.cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
/* Mobile: WooCommerce pone la columna del resumen ANTES que los datos. Como
   ahora esa columna también lleva el pago y el botón, tiene que ir después. */
.cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-main    { order: 1 !important; }
.cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-sidebar { order: 2 !important; }

/* Las opciones de pago, la nota, los términos y el botón se mudan (por JS,
   ver initCheckoutAside en main.js) a esta caja dentro de la columna derecha,
   debajo del resumen — así los dos quedan juntos y fijos al scrollear. */
.cc-checkout-pay {
    margin-top: 0.25rem;
}
.cc-checkout-pay fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Desktop: datos a la izquierda; resumen + pago a la derecha, pegados al
   scrollear (si el bloque es más alto que la pantalla, scrollea por dentro). */
@media (min-width: 900px) {
    .cc-checkout-wrap .wp-block-woocommerce-checkout {
        max-width: 1200px;
    }
    .cc-checkout-wrap .wc-block-components-sidebar-layout.wc-block-checkout {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.75rem;
    }
    .cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-main {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }
    .cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        flex: 0 0 430px;
        width: 430px !important;
        position: sticky;
        top: 1rem;
        align-self: flex-start;
    }
    /* Más compacto en desktop para que resumen + pago entren en pantalla */
    .cc-checkout-pay .wc-block-checkout__terms {
        margin-top: 0.75rem;
    }
}

/* El resumen duplicado que WooCommerce inserta en mobile antes del botón
   sobra: el de arriba (que ahora se muestra abierto) ya lo cubre. */
.cc-checkout-wrap .checkout-order-summary-block-fill-wrapper {
    display: none !important;
}
.cc-checkout-wrap .wc-block-components-checkout-order-summary__content {
    display: block !important;
}
.cc-checkout-wrap .wc-block-components-checkout-order-summary__title-price,
.cc-checkout-wrap .wc-block-components-checkout-order-summary__title-icon {
    display: none !important;
}

/* ── Resumen del pedido ─────────────────────────────────────────────────────── */
.cc-checkout-wrap .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    background: var(--wp--preset--color--surface);
    box-shadow: 0 10px 30px rgba(28, 28, 28, 0.07);
    overflow: hidden;
    margin: 0 0 1.5rem;
}
.cc-checkout-wrap .wc-block-components-checkout-order-summary__title {
    padding: 1rem 1.1rem 0.6rem !important;
    border-top: 0 !important;
}
.cc-checkout-wrap .wc-block-components-checkout-order-summary__content {
    padding: 0 1.1rem 0.5rem;
}
.cc-checkout-wrap .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--wp--preset--font-family--playfair);
    font-weight: 700;
}

/* ── Botón principal ────────────────────────────────────────────────────────── */
.cc-checkout-wrap .wc-block-components-checkout-place-order-button {
    border-radius: 50px !important;
    padding: 1.1em 2em !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(194, 123, 46, 0.38) !important;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.cc-checkout-wrap .wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(194, 123, 46, 0.48) !important;
}

/* ── Reaseguro al pie ───────────────────────────────────────────────────────── */
.cc-checkout-trust {
    list-style: none;
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--wp--preset--color--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
}
.cc-checkout-trust li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--wp--preset--color--text-muted);
}
.cc-checkout-trust svg {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    fill: var(--wp--preset--color--accent);
    flex-shrink: 0;
}
.cc-checkout-trust strong {
    display: block;
    font-size: 0.88rem;
    color: var(--wp--preset--color--text);
}
@media (max-width: 720px) {
    .cc-checkout-trust { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODO OSCURO — mini-carrito (panel lateral), carrito y checkout
   El panel del mini-carrito trae fondo blanco fijo de WooCommerce, pero en
   modo oscuro el texto pasa a crema → crema sobre blanco, ilegible.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .wc-block-mini-cart__drawer,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-drawer,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__title,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    background: var(--wp--preset--color--surface) !important;
    color: var(--wp--preset--color--text) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-drawer__close,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
    color: var(--wp--preset--color--text) !important;
    fill: var(--wp--preset--color--text) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    border-top: 1px solid var(--wp--preset--color--border) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-totals-wrapper,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-cart-items__row,
html[data-theme="dark"] .wc-block-mini-cart__drawer table {
    border-color: var(--wp--preset--color--border) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
    border: 1px solid var(--wp--preset--color--border) !important;
    background: var(--wp--preset--color--background) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
    background: transparent !important;
    color: var(--wp--preset--color--text) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg {
    color: var(--wp--preset--color--text-muted) !important;
    fill: var(--wp--preset--color--text-muted) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-product-metadata,
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-components-totals-item__description {
    color: var(--wp--preset--color--text-muted) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
    background: transparent !important;
    color: var(--wp--preset--color--text) !important;
    border: 1.5px solid var(--wp--preset--color--border) !important;
}
html[data-theme="dark"] .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover {
    border-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--accent) !important;
}
/* Etiqueta de oferta 2x1 dentro del panel */
html[data-theme="dark"] .accel-of-mc-badge {
    background: rgba(194, 123, 46, 0.18) !important;
    color: #f0c48a !important;
    border-color: rgba(194, 123, 46, 0.5) !important;
}

/* Checkout en modo oscuro */
html[data-theme="dark"] .cc-checkout-header {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .cc-checkout-wrap .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
}
html[data-theme="dark"] .cc-checkout-wrap .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Logo del encabezado del checkout en modo oscuro (el intercambio automático
   de logo del plugin de modo oscuro solo alcanza al encabezado principal) */
html[data-theme="dark"] .cc-checkout-header__logo img {
    content: url("/wp-content/uploads/2026/06/logo-ccdesign-modo-oscuro.png");
}

/* ══ ESPACIADOS VERTICALES — carrito y páginas de WooCommerce ═══════════════════ */
.cc-cart-wrap {
    margin-top: 0 !important;
    padding: 2rem 1rem 4rem !important;
}
.cc-cart-wrap > * { margin-top: 0 !important; }
.cc-cart-wrap .cc-cart-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.cc-cart-wrap .wp-block-woocommerce-cart {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.cc-cart-wrap .wp-block-woocommerce-store-notices:empty,
.cc-cart-wrap .wc-block-store-notices:empty { display: none; }
.cc-cart-wrap > .cc-cart-title,
.cc-cart-wrap > .wp-block-post-content,
.cc-cart-wrap > .wp-block-woocommerce-store-notices {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tienda / producto / ofertas / búsqueda: gutter lateral también en tablet y
   desktop angosto (769–1440px), donde antes el contenido quedaba pegado al borde. */
.cc-catalog-wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.cc-catalog-wrap .cc-section-bar {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: auto !important;
}
.cc-catalog-wrap > .wp-block-woocommerce-product-details,
.cc-catalog-wrap > .cc-product-tabs {
    max-width: 1200px !important;
}

/* Miniatura del video: cubre todo el recuadro vertical (antes quedaba una franja
   16:9 arriba y el resto negro). */
.cc-video-facade .cc-video-facade__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ══ ESPACIADOS VERTICALES — Contacto ═══════════════════════════════════════════
   Las secciones de esta plantilla no traen el padding inline del editor (quedaba
   en 0: el título "Seguinos en redes" pegado al borde del fondo, sin aire entre
   bloques). Se define acá, con gutter lateral también en pantallas medianas. */
.cc-contact-hero,
.cc-contact-social,
.cc-contact-cta {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}
.cc-contact-hero {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}
.cc-contact-hero + .wp-block-group {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}
.cc-contact-social {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
.cc-contact-cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.cc-contact-hero > .wp-block-woocommerce-breadcrumbs,
.cc-contact-hero > nav {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px;
}
@media (max-width: 768px) {
    .cc-contact-hero    { padding-top: 1.5rem; padding-bottom: 2rem; }
    .cc-contact-social  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .cc-contact-cta     { padding-top: 3rem;   padding-bottom: 3rem; }
}

/* ══ ESPACIADOS VERTICALES — páginas genéricas (Mi cuenta, políticas, etc.) ══════ */
.cc-page-wrap {
    margin-top: 0 !important;
    padding: 2rem 1.25rem 4rem;
}
.cc-page-wrap > * {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cc-page-wrap > .cc-page-title {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
}
.cc-page-wrap > .wp-block-post-content { margin-top: 0 !important; }
@media (max-width: 768px) {
    .cc-page-wrap { padding: 1.5rem 1rem 3rem; }
}

/* Breadcrumb alineado con el resto del contenido (1200px centrado) en vez de
   quedar más a la izquierda que el título y la galería. */
.wc-block-breadcrumbs.alignwide {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Contacto: menos aire acumulado entre hero → tarjeta y sin franjas de fondo
   entre secciones de color consecutivas. */
.cc-contact-hero { padding-bottom: 2rem; }
.cc-contact-hero + .wp-block-group {
    margin-top: 0 !important;
    padding-top: 1rem;
    padding-bottom: 3rem;
}
.cc-contact-social,
.cc-contact-cta { margin-top: 0 !important; }
@media (max-width: 768px) {
    .cc-contact-hero + .wp-block-group { padding-top: 0.5rem; padding-bottom: 2rem; }
}

/* Todo el contenido del catálogo comparte el mismo ancho/centrado que el
   breadcrumb y el título (antes la grilla iba a 1440px y desalineaba). */
.cc-catalog-wrap > *:not(.cc-section-bar):not(.wp-block-group.alignfull) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ══ ESPACIADOS VERTICALES — Inicio ════════════════════════════════════════════
   Las secciones no traían el padding inline del editor (títulos pegados al borde
   del fondo y grillas de producto a 0px del borde de pantalla). */
.cc-section--categorias,
.cc-section--ofertas,
.cc-section--exclusivos,
.cc-section--strip,
.cc-home-social {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}
.cc-section--ofertas    { padding-top: 0; padding-bottom: 4rem; }
.cc-section--categorias { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.cc-section--exclusivos { padding-top: 4rem; padding-bottom: 4rem; }
.cc-section--strip      { padding-top: 2rem; padding-bottom: 2rem; }
.cc-home-social         { padding-top: 3rem; padding-bottom: 3rem; }
.cc-section--categorias .alignwide,
.cc-section--ofertas .alignwide,
.cc-section--exclusivos .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Las franjas de color consecutivas van pegadas: el blockGap de 2rem dejaba
   una tira del fondo de la página entre cada una. */
.cc-section--categorias,
.cc-section--exclusivos,
.cc-section--strip,
.cc-section--reviews,
.cc-home-social { margin-top: 0 !important; }
.cc-section--ofertas { margin-top: 0 !important; }
/* La barra de "Ofertas especiales" sigue de borde a borde. */
.cc-section--ofertas > .cc-section-bar {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: auto !important;
    max-width: none !important;
}
@media (max-width: 782px) {
    .cc-section--categorias { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .cc-section--exclusivos { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .cc-section--ofertas    { padding-bottom: 2.5rem; }
    .cc-section--strip      { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODO CLARO — Nosotros
   Las secciones "hero", "máquina" y "CTA" venían con fondo #1C1C1C y texto claro
   fijos, así que en modo claro la página se veía como en modo oscuro. Acá se
   pasan a tonos crema/arena con texto oscuro. El modo oscuro no se toca.
   ════════════════════════════════════════════════════════════════════════════ */
html:not([data-theme="dark"]) .cc-nos-hero,
html:not([data-theme="dark"]) .cc-nos-maquina,
html:not([data-theme="dark"]) .cc-nos-cta {
    background-color: #EFE6C8 !important;
}
html:not([data-theme="dark"]) .cc-nos-maquina { background-color: #F5EED6 !important; }
html:not([data-theme="dark"]) .cc-nos-hero__title,
html:not([data-theme="dark"]) .cc-nos-h2--light,
html:not([data-theme="dark"]) .cc-nos-cta .cc-nos-h2 {
    color: var(--nos-dark) !important;
}
html:not([data-theme="dark"]) .cc-nos-hero__sub,
html:not([data-theme="dark"]) .cc-nos-p--light,
html:not([data-theme="dark"]) .cc-nos-p--light strong {
    color: #4d4a42 !important;
}
html:not([data-theme="dark"]) .cc-nos-p--light strong { color: var(--nos-dark) !important; }
html:not([data-theme="dark"]) .cc-nos-features li {
    color: #3b3934;
    border-bottom-color: rgba(28, 28, 28, 0.12);
}
html:not([data-theme="dark"]) .cc-nos-features li:first-child {
    border-top-color: rgba(28, 28, 28, 0.12);
}
html:not([data-theme="dark"]) .cc-nos-btn-wa .wp-block-button__link {
    color: var(--nos-dark) !important;
    border-color: rgba(28, 28, 28, 0.35) !important;
}
html:not([data-theme="dark"]) .cc-nos-btn-wa .wp-block-button__link:hover {
    border-color: var(--nos-accent) !important;
    color: var(--nos-accent) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MINI-CARRITO — el fondo lo fija WooCommerce por JS
   El bloque del panel copia el color de fondo de la página EN EL MOMENTO en que
   se monta, y lo deja como style="background-color:…" inline. Si la página cargó
   en oscuro y después se pasa a claro con el botón (o al revés), el panel se
   queda con el color viejo: texto oscuro sobre negro. Se fuerza según el tema
   actual (los estilos oscuros de más arriba ya usan !important).
   ════════════════════════════════════════════════════════════════════════════ */
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wc-block-components-drawer,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wc-block-mini-cart__title,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
html:not([data-theme="dark"]) .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
    background-color: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--text) !important;
}

/* ══ ESPACIADOS VERTICALES — Nosotros ═══════════════════════════════════════════
   Entre el contenido de una sección y el de la siguiente había ~184px
   (5rem de padding + 2rem de blockGap + 4.5rem de padding). Ahora ~112px, y en
   celular ~64px. Los fondos de las secciones quedan pegados, sin tira en el medio. */
.cc-nos-hero,
.cc-nos-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}
.cc-nos-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (max-width: 768px) {
    .cc-nos-hero,
    .cc-nos-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .cc-nos-cta { padding-bottom: 1.75rem !important; }
}

/* Nosotros → "Arte con propósito": sin emojis en las tarjetas. Se ocultan por CSS
   (el contenido vive en la página, así funciona también en producción sin editarla). */
.cc-nos-card__icon { display: none !important; }
html[data-theme="dark"] .cc-nos-card { border-top-color: var(--nos-accent) !important; }

/* ── Nosotros · hero: el título quedaba en 3 líneas con "láser" huérfano ─────────
   Más ancho para el título y reparto equilibrado de las líneas; el subtítulo
   conserva su medida de lectura. */
.cc-nos-hero > .cc-nos-hero__title {
    max-width: 920px !important;
    text-wrap: balance;
}
.cc-nos-hero > .cc-nos-hero__sub {
    max-width: 640px !important;
    text-wrap: balance;
}

/* Nosotros · hero con título corto ("Somos CC Design"): una línea en desktop y
   tablet, tamaño acorde en celular; vuelve al tamaño por defecto del título. */
.cc-nos-hero > .cc-nos-hero__title { max-width: 720px !important; }
@media (max-width: 640px) {
    .cc-nos-hero__title { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PEDIDO RECIBIDO — diseño propio (inc/order-confirmation.php)
   Usa los tokens del tema, así que sirve igual en modo claro y oscuro.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --cc-ok: #1f8f4e;
    --cc-ok-bg: rgba(31, 143, 78, 0.10);
    --cc-wait: #a95d0b;
    --cc-wait-bg: rgba(194, 123, 46, 0.14);
    --cc-oc-radius: 16px;
}
html[data-theme="dark"] {
    --cc-ok: #4fd881;
    --cc-ok-bg: rgba(79, 216, 129, 0.12);
    --cc-wait: #f5b14a;
    --cc-wait-bg: rgba(245, 177, 74, 0.14);
}

/* Se ocultan los bloques nativos que el diseño propio ya reemplaza */
body.cc-oc-active .wc-block-order-confirmation-status,
body.cc-oc-active .wc-block-order-confirmation-summary,
body.cc-oc-active .wc-block-order-confirmation-totals-wrapper,
body.cc-oc-active .wc-block-order-confirmation-address-wrapper,
body.cc-oc-active .wp-block-woocommerce-order-confirmation-additional-fields-wrapper,
body.cc-oc-has-bank .wc-block-order-confirmation-additional-information {
    display: none !important;
}

.cc-oc-page {
    margin-top: 0 !important;
    padding: 2rem 1rem 4rem !important;
}
.cc-oc-page > * { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
.cc-oc-page > .wp-block-shortcode { margin-top: 0 !important; }

.cc-oc { display: block; color: var(--wp--preset--color--text); }
.cc-oc-ico { width: 1.25em; height: 1.25em; flex: none; }

/* ── Encabezado ─────────────────────────────────────────────────────────────── */
.cc-oc-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 1.75rem;
    border-radius: var(--cc-oc-radius);
    background:
        radial-gradient(120% 140% at 50% -20%, var(--cc-ok-bg), transparent 60%),
        var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
}
.cc-oc-hero__badge {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff; background: var(--cc-ok);
    box-shadow: 0 0 0 8px var(--cc-ok-bg);
}
.cc-oc-hero__badge .cc-oc-ico { width: 32px; height: 32px; }
.cc-oc-hero__kicker {
    margin: 0 0 .35rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.cc-oc-hero__title {
    margin: 0 0 .6rem;
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    line-height: 1.15;
    text-wrap: balance;
}
.cc-oc-hero__lead {
    max-width: 640px; margin: 0 auto .5rem;
    font-size: 1.05rem; line-height: 1.6;
    color: var(--wp--preset--color--text-muted);
    text-wrap: balance;
}
.cc-oc-hero__mail {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: .25rem 0 0; font-size: .92rem;
    color: var(--wp--preset--color--text-muted);
}
.cc-oc-hero__mail strong { color: var(--wp--preset--color--text); word-break: break-all; }

.cc-oc-steps {
    list-style: none; margin: 1.75rem auto 0; padding: 0;
    max-width: 760px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.cc-oc-step {
    position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    font-size: .82rem; line-height: 1.3;
    color: var(--wp--preset--color--text-muted);
}
.cc-oc-step::before {                       /* línea que une los pasos */
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
    background: var(--wp--preset--color--border);
}
.cc-oc-step:first-child::before { display: none; }
.cc-oc-step.done::before, .cc-oc-step.current::before { background: var(--cc-ok); }
.cc-oc-step__dot {
    position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: .85rem;
    background: var(--wp--preset--color--background);
    border: 2px solid var(--wp--preset--color--border);
}
.cc-oc-step .cc-oc-ico { width: 16px; height: 16px; }
.cc-oc-step.done .cc-oc-step__dot { background: var(--cc-ok); border-color: var(--cc-ok); color: #fff; }
.cc-oc-step.current .cc-oc-step__dot {
    border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 5px var(--cc-wait-bg);
}
.cc-oc-step.current .cc-oc-step__label,
.cc-oc-step.done .cc-oc-step__label { color: var(--wp--preset--color--text); font-weight: 600; }

/* ── Grilla ─────────────────────────────────────────────────────────────────── */
.cc-oc-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cc-oc-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.cc-oc-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--cc-oc-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -16px rgba(0, 0, 0, .18);
}
.cc-oc-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.cc-oc-card__head > div { flex: 1; min-width: 0; }
.cc-oc-card__icon {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    border-radius: 12px; color: var(--wp--preset--color--accent);
    background: var(--cc-wait-bg);
}
.cc-oc-card__icon .cc-oc-ico { width: 24px; height: 24px; }
.cc-oc-card__title { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.cc-oc-card__sub { margin: .15rem 0 0; font-size: .88rem; color: var(--wp--preset--color--text-muted); }

.cc-oc-badge {
    flex: none; align-self: flex-start;
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.cc-oc-badge.is-wait { color: var(--cc-wait); background: var(--cc-wait-bg); }
.cc-oc-badge.is-ok   { color: var(--cc-ok);   background: var(--cc-ok-bg); }

/* ── Datos bancarios ────────────────────────────────────────────────────────── */
.cc-oc-bank {
    border: 2px solid var(--wp--preset--color--accent);
    box-shadow: 0 0 0 6px var(--cc-wait-bg), 0 14px 36px -18px rgba(194, 123, 46, .55);
}
.cc-oc-amount {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.15rem; margin-bottom: 1rem;
    border-radius: 12px; background: var(--wp--preset--color--background);
    border: 1px dashed var(--wp--preset--color--accent);
}
.cc-oc-amount__label { display: block; font-size: .8rem; color: var(--wp--preset--color--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.cc-oc-amount__value { display: block; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.15; font-variant-numeric: tabular-nums; }

.cc-oc-data { margin: 0; display: flex; flex-direction: column; }
.cc-oc-data__row {
    display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto;
    align-items: center; gap: .75rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--wp--preset--color--border);
}
.cc-oc-data__row:last-child { border-bottom: 0; }
.cc-oc-data dt { font-size: .85rem; color: var(--wp--preset--color--text-muted); }
.cc-oc-data dd { margin: 0; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.cc-oc-data dd.is-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .02em; }
.cc-oc-sep { border: 0; border-top: 2px solid var(--wp--preset--color--border); margin: .5rem 0; }

.cc-copy {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .85rem; min-height: 40px;
    border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 700; line-height: 1;
    color: var(--wp--preset--color--accent);
    background: transparent;
    border: 1.5px solid var(--wp--preset--color--accent);
    transition: background .15s, color .15s, transform .1s;
    white-space: nowrap;
}
.cc-copy:hover { background: var(--wp--preset--color--accent); color: #fff; }
.cc-copy:active { transform: scale(.97); }
.cc-copy:focus-visible { outline: 3px solid var(--cc-wait-bg); outline-offset: 2px; }
.cc-copy.is-copied { background: var(--cc-ok); border-color: var(--cc-ok); color: #fff; }

.cc-oc-ref {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .9rem 1rem;
    border-radius: 12px; background: var(--wp--preset--color--background);
    font-size: .92rem; color: var(--wp--preset--color--text-muted);
}
.cc-oc-ref > .cc-oc-ico { color: var(--wp--preset--color--accent); width: 1.4em; height: 1.4em; }
.cc-oc-ref p { margin: 0; flex: 1 1 200px; min-width: 0; }
.cc-oc-ref .cc-copy { margin-left: auto; }
.cc-oc-ref strong { color: var(--wp--preset--color--text); }

.cc-oc-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    flex: 1 1 220px; min-height: 50px; padding: .8rem 1.25rem;
    border-radius: 999px; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
    text-decoration: none !important; cursor: pointer; border: 2px solid transparent;
    transition: filter .15s, transform .1s, background .15s;
}
.cc-btn:hover { filter: brightness(1.06); }
.cc-btn:active { transform: scale(.98); }
.cc-btn--primary { color: #fff !important; background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.cc-btn--primary:hover { color: #fff; }
.cc-btn--primary.is-copied { background: var(--cc-ok); border-color: var(--cc-ok); }
.cc-btn--wa { color: #fff !important; background: #1fa855; border-color: #1fa855; }
.cc-oc-note { margin-top: 1rem; font-size: .9rem; color: var(--wp--preset--color--text-muted); }
.cc-oc-note p { margin: 0 0 .4rem; }

/* ── Productos y totales ────────────────────────────────────────────────────── */
.cc-oc-list { list-style: none; margin: 0; padding: 0; }
.cc-oc-item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    padding: .9rem 0; border-bottom: 1px solid var(--wp--preset--color--border);
}
.cc-oc-item:first-child { padding-top: 0; }
.cc-oc-item__media { position: relative; width: 72px; height: 72px; }
.cc-oc-item__img {
    width: 72px !important; height: 72px !important; object-fit: cover;
    border-radius: 12px; display: block;
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--background);
}
.cc-oc-item__qty {
    position: absolute; top: -8px; right: -8px;
    min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center;
    border-radius: 999px; font-size: .78rem; font-weight: 700;
    color: #fff; background: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}
.cc-oc-item__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cc-oc-item__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cc-oc-item__name a { color: inherit; text-decoration: none; }
.cc-oc-item__name a:hover { color: var(--wp--preset--color--accent); }
.cc-oc-item__unit { font-size: .84rem; color: var(--wp--preset--color--text-muted); }
.cc-oc-item__total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cc-oc-totals, .cc-oc-kv { margin: 0; }
.cc-oc-totals { margin-top: 1rem; }
.cc-oc-totals > div, .cc-oc-kv > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .4rem 0; font-size: .95rem;
}
.cc-oc-totals dt, .cc-oc-kv dt { color: var(--wp--preset--color--text-muted); }
.cc-oc-totals dd, .cc-oc-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cc-oc-totals small { font-weight: 400; }
.cc-oc-totals .is-discount dt, .cc-oc-totals .is-discount dd { color: var(--cc-ok); }
.cc-oc-totals .is-total, .cc-oc-kv .is-total {
    margin-top: .5rem; padding-top: .9rem;
    border-top: 2px solid var(--wp--preset--color--border);
}
.cc-oc-totals .is-total dt, .cc-oc-kv .is-total dt { color: var(--wp--preset--color--text); font-weight: 700; font-size: 1.05rem; }
.cc-oc-totals .is-total dd, .cc-oc-kv .is-total dd { font-size: 1.4rem; font-weight: 800; }

/* ── Columna lateral ────────────────────────────────────────────────────────── */
.cc-oc-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cc-oc-contact li, .cc-oc-addr { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.cc-oc-addr { align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--border); }
.cc-oc-contact__ico {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    border-radius: 50%; color: var(--wp--preset--color--accent); background: var(--cc-wait-bg);
}
.cc-oc-contact__ico .cc-oc-ico { width: 19px; height: 19px; }
.cc-oc-contact__txt { display: flex; flex-direction: column; min-width: 0; }
.cc-oc-contact small, .cc-oc-addr small { display: block; font-size: .78rem; color: var(--wp--preset--color--text-muted); }
.cc-oc-contact strong { font-weight: 600; overflow-wrap: anywhere; }
.cc-oc-addr address { font-style: normal; line-height: 1.5; font-weight: 500; margin: 0; padding: 0; }
.cc-oc-addr small { margin-bottom: .15rem; }
.cc-oc-addr > div { min-width: 0; }
.cc-oc-help { text-align: center; }
.cc-oc-help p { margin: .4rem 0 1rem; color: var(--wp--preset--color--text-muted); }
.cc-oc-help .cc-btn { width: 100%; flex: none; }

/* ── Crear cuenta (bloque nativo de Woo, con el mismo estilo) ───────────────── */
body.cc-oc-active .wc-block-order-confirmation-create-account {
    margin: 1.75rem auto 0; max-width: 1200px; padding: 1.5rem;
    border: 1px solid var(--wp--preset--color--border); border-radius: var(--cc-oc-radius);
    background: var(--wp--preset--color--surface);
}

/* ── Aviso de copiado ───────────────────────────────────────────────────────── */
.cc-toast {
    position: fixed; left: 50%; bottom: 1.5rem; z-index: 99999;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: .7rem 1.2rem; border-radius: 999px;
    font-size: .9rem; font-weight: 600; color: #fff; background: #1c1c1c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    transition: opacity .2s, transform .2s;
}
.cc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
html[data-theme="dark"] .cc-toast { background: #f0ead8; color: #1c1c1c; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cc-oc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .cc-oc-page { padding: 1rem .75rem 3rem !important; }
    .cc-oc-hero { padding: 1.75rem 1rem 1.5rem; }
    .cc-oc-card { padding: 1.15rem; }
    .cc-oc-steps { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
    .cc-oc-step:nth-child(odd)::before { display: none; }
    .cc-oc-card__head { flex-wrap: wrap; }
    .cc-oc-data__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .1rem; }
    .cc-oc-data__row dt { grid-column: 1 / -1; }
    .cc-oc-data__row dd { grid-column: 1; }
    .cc-oc-data__row .cc-copy { grid-column: 2; grid-row: 2; }
    .cc-oc-item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: .75rem; }
    .cc-oc-item__media, .cc-oc-item__img { width: 60px !important; height: 60px !important; }
    .cc-btn { flex-basis: 100%; }
    .cc-oc-amount { flex-direction: column; align-items: stretch; }
    .cc-oc-amount .cc-copy { width: 100%; }
}
.cc-oc-totals dd, .cc-oc-kv dd { white-space: nowrap; }
.cc-oc-kv dd { white-space: normal; }
.cc-oc-item__info { justify-content: center; }
@media (max-width: 640px) {
    .cc-oc-card__head .cc-oc-badge { margin-left: auto; }
}
/* Filas informativas (titular, banco): sin botón, ocupan todo el ancho del valor. */
.cc-oc-data__row.is-info dd { grid-column: 2 / -1; }
@media (max-width: 640px) {
    .cc-oc-data__row.is-info dd { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REINTENTAR EL PAGO (order-pay) — mismo estilo que el checkout
   ════════════════════════════════════════════════════════════════════════════ */
.woocommerce-order-pay .cc-checkout-wrap .entry-content {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.woocommerce-order-pay .cc-checkout-wrap { padding-top: 2rem !important; }

.cc-pay-intro { text-align: center; margin: 0 0 1.5rem; }
.cc-pay-intro__kicker {
    margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.cc-pay-intro__title { margin: 0 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; }
.cc-pay-intro__sub { margin: 0; color: var(--wp--preset--color--text-muted); text-wrap: balance; }
.cc-pay-intro__sub strong { color: var(--cc-ok, #1f8f4e); }

/* Resumen del pedido */
.woocommerce-order-pay #order_review table.shop_table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border) !important;
    border-radius: 16px; overflow: hidden;
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}
.woocommerce-order-pay #order_review table.shop_table th,
.woocommerce-order-pay #order_review table.shop_table td {
    padding: .85rem 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--border) !important;
    background: transparent !important;
    text-align: left; font-weight: 500;
}
.woocommerce-order-pay #order_review table.shop_table thead th {
    font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--wp--preset--color--text-muted); font-weight: 700;
    background: var(--wp--preset--color--background) !important;
}
.woocommerce-order-pay #order_review table.shop_table td:last-child,
.woocommerce-order-pay #order_review table.shop_table thead th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-order-pay #order_review table.shop_table td.product-quantity,
.woocommerce-order-pay #order_review table.shop_table thead th.product-quantity { text-align: center; }
.woocommerce-order-pay #order_review table.shop_table tfoot th { color: var(--wp--preset--color--text-muted); font-weight: 500 !important; }
.woocommerce-order-pay #order_review table.shop_table tfoot td { font-weight: 700; }
.woocommerce-order-pay #order_review table.shop_table tr.cc-pay-discount th,
.woocommerce-order-pay #order_review table.shop_table tr.cc-pay-discount td { color: var(--cc-ok, #1f8f4e) !important; }
.woocommerce-order-pay #order_review table.shop_table tr.cc-pay-total th,
.woocommerce-order-pay #order_review table.shop_table tr.cc-pay-total td {
    color: var(--wp--preset--color--text) !important; font-size: 1.15rem; font-weight: 800 !important;
    border-bottom: 0 !important; border-top: 2px solid var(--wp--preset--color--border) !important;
}
.woocommerce-order-pay #order_review table.shop_table tr.cc-pay-hide,
.woocommerce-order-pay #order_review table.shop_table tfoot tr:last-child:not(.cc-pay-total) { display: none; }

/* Métodos de pago como tarjetas */
.woocommerce-order-pay #order_review #payment {
    background: transparent !important; border-radius: 0 !important; padding: 0 !important;
}
.woocommerce-order-pay #payment ul.payment_methods {
    list-style: none; margin: 0 0 1.25rem !important; padding: 0 !important; border: 0 !important;
    display: flex; flex-direction: column; gap: .75rem;
}
.woocommerce-order-pay #payment ul.payment_methods > li {
    margin: 0 !important; padding: 1rem 1.15rem !important;
    background: var(--wp--preset--color--surface);
    border: 1.5px solid var(--wp--preset--color--border);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.woocommerce-order-pay #payment ul.payment_methods > li:has(input[name="payment_method"]:checked) {
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 4px rgba(194, 123, 46, .14);
}
.woocommerce-order-pay #payment ul.payment_methods > li > label {
    font-weight: 700; cursor: pointer; margin-left: .5rem;
}
.woocommerce-order-pay #payment ul.payment_methods > li input[type="radio"] { accent-color: var(--wp--preset--color--accent); }
.woocommerce-order-pay #payment div.payment_box {
    margin: .85rem 0 0 !important; padding: .9rem 1rem !important;
    background: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--text-muted) !important;
    border-radius: 10px; font-weight: 400;
}
.woocommerce-order-pay #payment div.payment_box::before { display: none !important; }

/* Confirmar */
.woocommerce-order-pay #payment .form-row { padding: 0 !important; margin: 0 !important; }
.woocommerce-order-pay .woocommerce-privacy-policy-text,
.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper { font-size: .85rem; color: var(--wp--preset--color--text-muted); margin-bottom: 1rem; }
.woocommerce-order-pay #place_order {
    width: 100%; float: none !important; min-height: 54px;
    border-radius: 999px !important; font-size: 1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--wp--preset--color--accent) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 8px 20px -10px rgba(194, 123, 46, .7);
}
.woocommerce-order-pay #place_order:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
    .woocommerce-order-pay #order_review table.shop_table th,
    .woocommerce-order-pay #order_review table.shop_table td { padding: .7rem .85rem !important; font-size: .92rem; }
    .woocommerce-order-pay #payment ul.payment_methods > li { padding: .85rem .9rem !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MI CUENTA — acceso con registro y panel del cliente (inc/my-account.php,
   woocommerce/myaccount/*.php). Solo tokens del tema: sirve en claro y oscuro.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --cc-info: #1b6ca8;
    --cc-info-bg: rgba(27, 108, 168, 0.10);
    --cc-bad: #b3261e;
    --cc-bad-bg: rgba(179, 38, 30, 0.10);
    --cc-acc-radius: 16px;
    --cc-acc-shadow: 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.05);
}
html[data-theme="dark"] {
    --cc-info: #6cb6f0;
    --cc-info-bg: rgba(108, 182, 240, 0.14);
    --cc-bad: #ff8a80;
    --cc-bad-bg: rgba(255, 138, 128, 0.14);
    --cc-acc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cc-acc-ico { width: 1.25em; height: 1.25em; flex: none; }

/* ── Página ─────────────────────────────────────────────────────────────────── */
body.cc-acc-page .cc-page-wrap { padding-top: 1.5rem; }
body.cc-acc-page .cc-page-wrap > .cc-page-title { margin-bottom: 1.5rem !important; }
body.cc-acc-page .woocommerce { max-width: 1200px; margin: 0 auto; }
body.cc-acc-page .wp-block-post-content.is-layout-constrained > .woocommerce,
body.cc-acc-page .entry-content > .woocommerce { max-width: 1200px !important; }

/* ── Campos (acceso, registro, datos, direcciones) ──────────────────────────── */
body.cc-acc-page .woocommerce form .form-row { float: none; width: auto; margin: 0; padding: 0; }
body.cc-acc-page .woocommerce form .form-row label {
    display: block; margin: 0 0 .4rem;
    font-size: .88rem; font-weight: 600; line-height: 1.3;
    color: var(--wp--preset--color--text);
}
body.cc-acc-page .woocommerce form .form-row label .required { color: var(--cc-bad); text-decoration: none; }
body.cc-acc-page .woocommerce form .form-row label .optional { font-weight: 400; color: var(--wp--preset--color--text-muted); }
body.cc-acc-page .woocommerce form .form-row .woocommerce-input-wrapper { display: block; }
body.cc-acc-page .woocommerce input.input-text,
body.cc-acc-page .woocommerce textarea.input-text,
body.cc-acc-page .woocommerce select,
body.cc-acc-page .select2-container--default .select2-selection--single {
    width: 100%; height: 3rem; min-height: 3rem;
    padding: 0 1rem;
    font: inherit; font-size: .98rem; line-height: 1.2;
    color: var(--wp--preset--color--text);
    background: var(--wp--preset--color--background);
    border: 1.5px solid var(--wp--preset--color--border);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
body.cc-acc-page .woocommerce textarea.input-text { height: auto; padding: .8rem 1rem; }
body.cc-acc-page .woocommerce input.input-text:hover,
body.cc-acc-page .woocommerce select:hover { border-color: var(--wp--preset--color--text-muted); }
body.cc-acc-page .woocommerce input.input-text:focus,
body.cc-acc-page .woocommerce textarea.input-text:focus,
body.cc-acc-page .woocommerce select:focus,
body.cc-acc-page .select2-container--default.select2-container--open .select2-selection--single,
body.cc-acc-page .select2-container--default.select2-container--focus .select2-selection--single {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 4px rgba(194, 123, 46, 0.18);
    background: var(--wp--preset--color--surface);
}
body.cc-acc-page .woocommerce input.input-text:-webkit-autofill {
    -webkit-text-fill-color: var(--wp--preset--color--text);
    box-shadow: 0 0 0 100px var(--wp--preset--color--background) inset;
}
body.cc-acc-page .woocommerce em,
body.cc-acc-page .woocommerce .form-row span > em { font-size: .8rem; color: var(--wp--preset--color--text-muted); font-style: normal; }
body.cc-acc-page .woocommerce form .form-row span em { display: block; margin-top: .35rem; }

/* select2 (país / provincia) */
body.cc-acc-page .select2-container--default .select2-selection--single { display: flex; align-items: center; }
body.cc-acc-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important; line-height: 1.2; color: var(--wp--preset--color--text); width: 100%;
}
body.cc-acc-page .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; height: 100%; right: .6rem; }
body .select2-dropdown {
    background: var(--wp--preset--color--surface); color: var(--wp--preset--color--text);
    border: 1.5px solid var(--wp--preset--color--border); border-radius: 12px; overflow: hidden;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--wp--preset--color--accent); color: #fff; }
body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--wp--preset--color--background); color: var(--wp--preset--color--text);
    border: 1.5px solid var(--wp--preset--color--border); border-radius: 8px; padding: .5rem .7rem;
}

/* mostrar/ocultar contraseña (botón de WooCommerce) */
body.cc-acc-page .woocommerce .password-input { display: block; position: relative; }
body.cc-acc-page .woocommerce .password-input input { padding-right: 3rem; }
body.cc-acc-page .woocommerce .show-password-input {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 2.4rem; height: 2.4rem; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 10px; cursor: pointer;
    opacity: 1; color: var(--wp--preset--color--text-muted);
}
body.cc-acc-page .woocommerce .show-password-input:hover { color: var(--wp--preset--color--accent); }
body.cc-acc-page .woocommerce .show-password-input::after {
    content: ""; display: block; width: 1.25rem; height: 1.25rem; margin: auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.cc-acc-page .woocommerce .show-password-input.display-password::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.8 11.8 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.8 11.8 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
}
body.cc-acc-page .woocommerce .show-password-input::before { display: none !important; }
body.cc-acc-page .woocommerce .show-password-input svg,
body.cc-acc-page .woocommerce .show-password-input img { display: none; }

/* medidor de seguridad de la contraseña */
body.cc-acc-page .woocommerce-password-strength {
    display: block; margin-top: .5rem; padding: .35rem .7rem;
    font-size: .8rem; font-weight: 600; text-align: left; border-radius: 8px;
    color: var(--wp--preset--color--text-muted); background: var(--wp--preset--color--background);
    border: 1px solid var(--wp--preset--color--border);
}
body.cc-acc-page .woocommerce-password-strength.short,
body.cc-acc-page .woocommerce-password-strength.bad { color: var(--cc-bad); background: var(--cc-bad-bg); border-color: transparent; }
body.cc-acc-page .woocommerce-password-strength.good { color: var(--cc-wait); background: var(--cc-wait-bg); border-color: transparent; }
body.cc-acc-page .woocommerce-password-strength.strong { color: var(--cc-ok); background: var(--cc-ok-bg); border-color: transparent; }
body.cc-acc-page .woocommerce-password-hint { display: block; margin-top: .4rem; font-size: .78rem; line-height: 1.4; color: var(--wp--preset--color--text-muted); }

/* casillas */
body.cc-acc-page .woocommerce input[type="checkbox"] {
    width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--wp--preset--color--accent);
}
body.cc-acc-page .woocommerce label.woocommerce-form__label-for-checkbox,
body.cc-acc-page .woocommerce label.checkbox {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-weight: 500; cursor: pointer;
}

/* ── Botones ────────────────────────────────────────────────────────────────── */
body.cc-acc-page .woocommerce .button,
body.cc-acc-page .woocommerce button.button,
body.cc-acc-page .woocommerce a.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85em 1.6em; min-height: 3rem;
    font: inherit; font-size: .88rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
    color: #fff; background: var(--wp--preset--color--accent);
    border: 0; border-radius: 50px !important; cursor: pointer;
    box-shadow: 0 6px 18px rgba(194, 123, 46, 0.32);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
body.cc-acc-page .woocommerce .button:hover,
body.cc-acc-page .woocommerce a.button:hover {
    color: #fff; background: var(--wp--preset--color--accent);
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(194, 123, 46, 0.44);
}
body.cc-acc-page .woocommerce .button:focus-visible { outline: 3px solid rgba(194, 123, 46, 0.5); outline-offset: 3px; }
body.cc-acc-page .woocommerce .button:disabled,
body.cc-acc-page .woocommerce .button.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Avisos (WooCommerce 10 los dibuja como "notice banner") ─────────────────── */
body.cc-acc-page .woocommerce-notices-wrapper:empty { display: none; }
body.cc-acc-page .woocommerce-notices-wrapper > * + * { margin-top: .75rem; }
body.cc-acc-page .woocommerce-notices-wrapper { margin-bottom: 1.25rem; }
body.cc-acc-page .wc-block-components-notice-banner,
body.cc-acc-page .woocommerce-message,
body.cc-acc-page .woocommerce-info,
body.cc-acc-page .woocommerce-error {
    display: flex; align-items: flex-start; gap: .85rem; margin: 0; padding: 1rem 1.25rem 1rem 1.15rem;
    list-style: none; font-size: .95rem; line-height: 1.55;
    color: var(--wp--preset--color--text); background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border); border-left: 4px solid var(--wp--preset--color--accent);
    border-radius: 12px; box-shadow: var(--cc-acc-shadow);
}
body.cc-acc-page .wc-block-components-notice-banner:focus,
body.cc-acc-page .wc-block-components-notice-banner:focus-visible { outline: none; }
body.cc-acc-page .wc-block-components-notice-banner > svg {
    flex: none; width: 1.4rem; height: 1.4rem; padding: 0; margin: .05rem 0 0; background: none; border-radius: 0;
    fill: var(--wp--preset--color--accent);
}
body.cc-acc-page .wc-block-components-notice-banner__content { flex: 1; min-width: 0; padding: 0; }
body.cc-acc-page .wc-block-components-notice-banner a { color: var(--wp--preset--color--accent); font-weight: 600; text-underline-offset: 3px; }
body.cc-acc-page .wc-block-components-notice-banner.is-error,
body.cc-acc-page .woocommerce-error { border-left-color: var(--cc-bad); background: linear-gradient(0deg, var(--cc-bad-bg), var(--cc-bad-bg)), var(--wp--preset--color--surface); }
body.cc-acc-page .wc-block-components-notice-banner.is-error > svg { fill: var(--cc-bad); }
body.cc-acc-page .wc-block-components-notice-banner.is-success,
body.cc-acc-page .woocommerce-message { border-left-color: var(--cc-ok); background: linear-gradient(0deg, var(--cc-ok-bg), var(--cc-ok-bg)), var(--wp--preset--color--surface); }
body.cc-acc-page .wc-block-components-notice-banner.is-success > svg { fill: var(--cc-ok); }
body.cc-acc-page .wc-block-components-notice-banner .wc-block-components-button,
body.cc-acc-page .wc-block-components-notice-banner .button { min-height: 2.4rem; padding: .5em 1.1em; font-size: .78rem; }
body.cc-acc-page .woocommerce-message::before,
body.cc-acc-page .woocommerce-info::before,
body.cc-acc-page .woocommerce-error::before { display: none; }
body.cc-acc-page .woocommerce-error li { margin: 0; list-style: none; }
body.cc-acc-page .woocommerce-message a:not(.button),
body.cc-acc-page .woocommerce-info a:not(.button),
body.cc-acc-page .woocommerce-error a { color: var(--wp--preset--color--accent); font-weight: 600; }
body.cc-acc-page .woocommerce-privacy-policy-text p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--wp--preset--color--text-muted); }
body.cc-acc-page .woocommerce-privacy-policy-text a { color: var(--wp--preset--color--accent); }

/* ── Tarjetas de contenido ──────────────────────────────────────────────────── */
.cc-acc-card,
body.cc-acc-in .woocommerce-EditAccountForm,
body.cc-acc-in .woocommerce-address-fields,
body.cc-acc-in .woocommerce-orders-table,
body.cc-acc-in .woocommerce-Address,
body.cc-acc-in .woocommerce-order-details,
body.cc-acc-in .woocommerce-customer-details,
body.cc-acc-in .woocommerce-table--order-downloads,
body.cc-acc-in .woocommerce-OrderUpdates {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--cc-acc-radius);
    box-shadow: var(--cc-acc-shadow);
}

/* ═══ ACCESO / REGISTRO ═════════════════════════════════════════════════════════ */
.cc-auth {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    max-width: 1000px; margin: 0 auto;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 24px; overflow: hidden;
    box-shadow: var(--cc-acc-shadow);
}
.cc-auth__aside {
    position: relative; display: flex; flex-direction: column; gap: 1.5rem;
    padding: 2.5rem 2.25rem;
    color: #fff;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(194, 123, 46, .55), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(232, 168, 74, .22), transparent 60%),
        #1c1c1c;
}
.cc-auth__kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-light); }
.cc-auth__aside-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: #fff; text-wrap: balance; }
.cc-auth__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cc-auth__perks li { display: flex; gap: .85rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.cc-auth__perks li strong { color: #fff; font-weight: 600; }
.cc-auth__perks .cc-acc-ico {
    width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 12px;
    color: var(--wp--preset--color--accent-light); background: rgba(255, 255, 255, .08);
}
.cc-auth__help {
    margin-top: auto; display: inline-flex; align-items: center; gap: .6rem;
    font-size: .9rem; font-weight: 500; text-decoration: none; color: rgba(255, 255, 255, .85);
    padding: .75rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    transition: background-color 150ms ease;
}
.cc-auth__help:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.cc-auth__help .cc-acc-ico { color: #25d366; }

.cc-auth__main { padding: 2.5rem 2.5rem 2.25rem; min-width: 0; }
.cc-auth__tabs {
    display: none; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .3rem; margin-bottom: 1.75rem;
    background: var(--wp--preset--color--background); border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
}
.cc-auth--js .cc-auth__tabs { display: grid; }
.cc-auth__tab {
    padding: .7rem 1rem; font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .03em;
    color: var(--wp--preset--color--text-muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.cc-auth__tab:hover { color: var(--wp--preset--color--text); }
.cc-auth__tab.is-active { color: #fff; background: var(--wp--preset--color--accent); box-shadow: 0 4px 14px rgba(194, 123, 46, .35); }
.cc-auth__tab:focus-visible { outline: 3px solid rgba(194, 123, 46, .5); outline-offset: 2px; }

.cc-auth--js .cc-auth__panel:not(.is-active) { display: none; }
.cc-auth:not(.cc-auth--js) .cc-auth__panel + .cc-auth__panel { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--wp--preset--color--border); }
.cc-auth__panel.is-active { animation: cc-auth-in 260ms ease both; }
@keyframes cc-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-auth__panel.is-active { animation: none; } }

.cc-auth__title { margin: 0 0 .35rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; }
.cc-auth__sub { margin: 0 0 1.5rem; color: var(--wp--preset--color--text-muted); font-size: .95rem; }
body.cc-acc-page .cc-auth form.woocommerce-form { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cc-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.cc-auth__options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; }
.cc-auth__link { font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cc-auth__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cc-auth__submit { margin: .25rem 0 0 !important; }
.cc-auth__submit .button { width: 100%; }
.cc-auth__note { margin: 0; font-size: .9rem; color: var(--wp--preset--color--text-muted); }
.cc-auth__switch { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--border); text-align: center; font-size: .92rem; color: var(--wp--preset--color--text-muted); }
.cc-auth__switch-btn { font: inherit; font-weight: 700; color: var(--wp--preset--color--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.cc-auth__switch-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
body.cc-acc-out .woocommerce-notices-wrapper { max-width: 1000px; margin: 0 auto 1.25rem; }

/* Recuperar / restablecer contraseña */
body.cc-acc-out .woocommerce-ResetPassword,
body.cc-acc-out form.lost_reset_password {
    max-width: 520px; margin: 0 auto; padding: 2rem;
    background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
    border-radius: 20px; box-shadow: var(--cc-acc-shadow);
    display: flex; flex-direction: column; gap: 1.1rem;
}
body.cc-acc-out .woocommerce-ResetPassword > p:first-child { margin: 0; color: var(--wp--preset--color--text-muted); line-height: 1.6; }
body.cc-acc-out .woocommerce-ResetPassword .form-row-first,
body.cc-acc-out .woocommerce-ResetPassword .form-row-last { width: auto; float: none; }
body.cc-acc-out .woocommerce-ResetPassword .clear { display: none; }
body.cc-acc-out .woocommerce-ResetPassword .button { width: 100%; }

/* ═══ PANEL ═════════════════════════════════════════════════════════════════════ */
body.cc-acc-in .woocommerce {
    display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.75rem; align-items: start;
}
body.cc-acc-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.cc-acc-in .woocommerce::before,
body.cc-acc-in .woocommerce::after { display: none; }
body.cc-acc-in .woocommerce:has(> .woocommerce-notices-wrapper:empty) { row-gap: 0; }
body.cc-acc-in .woocommerce-MyAccount-navigation { float: none; width: auto; }
body.cc-acc-in .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
body.cc-acc-in .woocommerce-MyAccount-content > * + * { margin-top: 1.25rem; }
body.cc-acc-in .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
body.cc-acc-in .woocommerce-MyAccount-content h2,
body.cc-acc-in .woocommerce-MyAccount-content h3 { font-size: 1.25rem; margin: 0 0 .75rem; }

/* Menú lateral */
.cc-acc-nav {
    position: sticky; top: 6.5rem;
    background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
    border-radius: 20px; box-shadow: var(--cc-acc-shadow); padding: 1rem;
}
.cc-acc-user { display: flex; align-items: center; gap: .85rem; padding: .35rem .35rem 1rem; margin-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.cc-acc-avatar {
    flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
    font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #fff;
    background: linear-gradient(135deg, var(--wp--preset--color--accent), #a45f15);
    box-shadow: 0 0 0 4px rgba(194, 123, 46, .16);
}
.cc-acc-avatar--lg { width: 4.25rem; height: 4.25rem; font-size: 1.4rem; box-shadow: 0 0 0 6px rgba(194, 123, 46, .18); }
.cc-acc-user__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cc-acc-user__name { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-acc-user__mail { font-size: .8rem; color: var(--wp--preset--color--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cc-acc-in .cc-acc-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
body.cc-acc-in .cc-acc-menu li { margin: 0; padding: 0; border: 0; }
body.cc-acc-in .cc-acc-menu a,
body.cc-acc-in .cc-acc-menu a:hover,
body.cc-acc-in .cc-acc-menu a[aria-current="page"] { text-decoration: none !important; }
.cc-acc-menu a {
    display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem;
    font-size: .95rem; font-weight: 500; text-decoration: none;
    color: var(--wp--preset--color--text); border-radius: 12px;
    transition: background-color 150ms ease, color 150ms ease;
}
.cc-acc-menu a .cc-acc-ico { color: var(--wp--preset--color--text-muted); transition: color 150ms ease; }
.cc-acc-menu a:hover { background: var(--wp--preset--color--background); color: var(--wp--preset--color--accent); }
.cc-acc-menu a:hover .cc-acc-ico { color: var(--wp--preset--color--accent); }
.cc-acc-menu .is-active a,
.cc-acc-menu a[aria-current="page"] { color: #fff; background: var(--wp--preset--color--accent); font-weight: 700; box-shadow: 0 6px 16px rgba(194, 123, 46, .3); }
.cc-acc-menu .is-active a .cc-acc-ico,
.cc-acc-menu a[aria-current="page"] .cc-acc-ico { color: #fff; }
body.cc-acc-in .cc-acc-menu .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--wp--preset--color--border); }
.cc-acc-menu .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--cc-bad); background: var(--cc-bad-bg); }
.cc-acc-menu .woocommerce-MyAccount-navigation-link--customer-logout a:hover .cc-acc-ico { color: var(--cc-bad); }

/* Bienvenida */
.cc-dash-hero {
    display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem 2rem;
    background: radial-gradient(120% 160% at 0% 0%, rgba(194, 123, 46, .16), transparent 60%), var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border); border-radius: 20px; box-shadow: var(--cc-acc-shadow);
}
.cc-dash-hero__kicker { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
body.cc-acc-in .woocommerce-MyAccount-content .cc-dash-hero__title { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; }
.cc-dash-hero__lead { margin: 0; color: var(--wp--preset--color--text-muted); line-height: 1.55; }

/* Estadísticas */
.cc-dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cc-stat {
    position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1.15rem 1.25rem;
    background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
    border-radius: 16px; box-shadow: var(--cc-acc-shadow);
}
.cc-stat__ico { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; margin-bottom: .5rem; border-radius: 12px; color: var(--wp--preset--color--accent); background: rgba(194, 123, 46, .12); }
.cc-stat__num { font-family: var(--wp--preset--font-family--playfair); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.cc-stat__num--sm { font-size: 1.35rem; padding: .3rem 0; }
.cc-stat__lbl { font-size: .85rem; color: var(--wp--preset--color--text-muted); }

/* Accesos rápidos */
.cc-dash-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cc-quick {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; text-decoration: none;
    color: var(--wp--preset--color--text); background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border); border-radius: 16px; box-shadow: var(--cc-acc-shadow);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.cc-quick:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--text); }
.cc-quick__ico { flex: none; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 14px; color: var(--wp--preset--color--accent); background: rgba(194, 123, 46, .12); }
.cc-quick__ico .cc-acc-ico { width: 1.4rem; height: 1.4rem; }
.cc-quick__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; line-height: 1.35; }
.cc-quick__txt strong { font-size: 1rem; }
.cc-quick__txt span { font-size: .85rem; color: var(--wp--preset--color--text-muted); }
.cc-quick__go { flex: none; color: var(--wp--preset--color--text-muted); transition: transform 180ms ease, color 180ms ease; }
.cc-quick:hover .cc-quick__go { color: var(--wp--preset--color--accent); transform: translateX(3px); }

/* Últimos pedidos */
.cc-dash-recent { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 20px; box-shadow: var(--cc-acc-shadow); padding: 1.25rem 1.25rem .75rem; }
.cc-dash-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 .35rem .75rem; }
body.cc-acc-in .woocommerce-MyAccount-content .cc-dash-recent__head h3 { margin: 0; font-size: 1.2rem; }
.cc-recent { list-style: none; margin: 0; padding: 0; }
.cc-recent li { margin: 0; border-top: 1px solid var(--wp--preset--color--border); }
.cc-recent__row {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto auto 1.5rem; align-items: center; gap: 1rem;
    padding: 1rem .35rem; text-decoration: none; color: var(--wp--preset--color--text); border-radius: 10px;
    transition: background-color 150ms ease;
}
.cc-recent__row:hover { background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); }
.cc-recent__num { font-weight: 700; }
.cc-recent__date { color: var(--wp--preset--color--text-muted); font-size: .9rem; }
.cc-recent__total { font-weight: 600; text-align: right; }
.cc-recent__go { color: var(--wp--preset--color--text-muted); display: grid; place-items: center; }
.cc-recent__row:hover .cc-recent__go { color: var(--wp--preset--color--accent); }

/* Etiquetas de estado */
.cc-pill {
    display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .75rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
    color: var(--wp--preset--color--text-muted); background: var(--wp--preset--color--background); border: 1px solid var(--wp--preset--color--border);
}
.cc-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.cc-pill--ok   { color: var(--cc-ok);   background: var(--cc-ok-bg);   border-color: transparent; }
.cc-pill--wait { color: var(--cc-wait); background: var(--cc-wait-bg); border-color: transparent; }
.cc-pill--info { color: var(--cc-info); background: var(--cc-info-bg); border-color: transparent; }
.cc-pill--bad  { color: var(--cc-bad);  background: var(--cc-bad-bg);  border-color: transparent; }

/* Estado vacío */
.cc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2.5rem 1.5rem 2.25rem; }
.cc-empty__ico { width: 4rem; height: 4rem; display: grid; place-items: center; margin-bottom: .5rem; border-radius: 50%; color: var(--wp--preset--color--accent); background: rgba(194, 123, 46, .12); }
.cc-empty__ico .cc-acc-ico { width: 1.75rem; height: 1.75rem; }
.cc-empty__title { margin: 0; font-family: var(--wp--preset--font-family--playfair); font-size: 1.25rem; font-weight: 700; }
.cc-empty__text { margin: 0 0 1rem; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-MyAccount-content > .cc-empty { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 20px; box-shadow: var(--cc-acc-shadow); }

/* ── Mis pedidos (tabla) ────────────────────────────────────────────────────── */
body.cc-acc-in .woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 0; }
body.cc-acc-in .woocommerce-orders-table thead th {
    padding: .9rem 1.15rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--wp--preset--color--text-muted); background: var(--wp--preset--color--background); border: 0; border-bottom: 1px solid var(--wp--preset--color--border);
}
body.cc-acc-in .woocommerce-orders-table td,
body.cc-acc-in .woocommerce-orders-table tbody th {
    padding: 1rem 1.15rem; vertical-align: middle; font-size: .95rem; font-weight: 400; text-align: left;
    background: transparent; border: 0; border-top: 1px solid var(--wp--preset--color--border);
}
body.cc-acc-in .woocommerce-orders-table tbody tr:first-child td,
body.cc-acc-in .woocommerce-orders-table tbody tr:first-child th { border-top: 0; }
body.cc-acc-in .woocommerce-orders-table tbody tr { transition: background-color 150ms ease; }
body.cc-acc-in .woocommerce-orders-table tbody tr:hover { background: var(--wp--preset--color--background); }
body.cc-acc-in .woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--wp--preset--color--text); text-decoration: none; }
body.cc-acc-in .woocommerce-orders-table__cell-order-number a:hover { color: var(--wp--preset--color--accent); }
body.cc-acc-in .woocommerce-orders-table__cell-order-date { color: var(--wp--preset--color--text-muted); }
.cc-ord-total { font-weight: 700; }
.cc-ord-items { display: block; font-size: .8rem; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-orders-table__cell-order-actions { text-align: right; }
body.cc-acc-in .woocommerce-orders-table__cell-order-actions .button { min-height: 2.4rem; padding: .5em 1.2em; font-size: .75rem; margin-left: .35rem; box-shadow: none; }
body.cc-acc-in .woocommerce-orders-table__cell-order-actions .button.view {
    color: var(--wp--preset--color--accent) !important; background: transparent !important;
    border: 1.5px solid var(--wp--preset--color--accent); box-shadow: none;
}
body.cc-acc-in .woocommerce-orders-table__cell-order-actions .button.view:hover {
    color: #fff !important; background: var(--wp--preset--color--accent) !important;
    border-color: var(--wp--preset--color--accent); transform: none; box-shadow: none;
}
body.cc-acc-in .woocommerce-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
body.cc-acc-in .woocommerce-pagination .button { box-shadow: none; }

/* ── Direcciones ────────────────────────────────────────────────────────────── */
body.cc-acc-in .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; }
body.cc-acc-in .woocommerce-Addresses::before,
body.cc-acc-in .woocommerce-Addresses::after { display: none; }
body.cc-acc-in .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; max-width: none; margin: 0; padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
body.cc-acc-in .woocommerce-Addresses .woocommerce-Address:only-child { grid-column: 1 / -1; }
body.cc-acc-in .woocommerce-Addresses .woocommerce-Address-title { padding: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0; padding: 0; }
body.cc-acc-in .woocommerce-Address-title::before,
body.cc-acc-in .woocommerce-Address-title::after { display: none; }
body.cc-acc-in .woocommerce-Addresses .woocommerce-Address-title h2 { padding: 0 !important; margin: 0; font-size: 1.15rem; float: none; width: auto; text-align: left; flex: 1 1 auto; }
body.cc-acc-in .woocommerce-Address-title .edit {
    float: none; font-size: .82rem; font-weight: 700; text-decoration: none; padding: .4rem .9rem;
    color: var(--wp--preset--color--accent); border: 1.5px solid var(--wp--preset--color--border); border-radius: 999px;
    transition: border-color 150ms ease, background-color 150ms ease;
}
body.cc-acc-in .woocommerce-Address-title .edit:hover { border-color: var(--wp--preset--color--accent); background: rgba(194, 123, 46, .08); }
body.cc-acc-in .woocommerce-Address address { margin: 0; font-style: normal; line-height: 1.7; color: var(--wp--preset--color--text-muted); }

/* ── Formularios (datos de la cuenta y edición de direcciones) ──────────────── */
body.cc-acc-in .woocommerce-EditAccountForm,
body.cc-acc-in .woocommerce-address-fields { padding: 1.75rem; }
body.cc-acc-in .woocommerce-EditAccountForm,
body.cc-acc-in .woocommerce-address-fields__field-wrapper {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem;
}
body.cc-acc-in .woocommerce-address-fields { display: flex; flex-direction: column; gap: 1.5rem; }
body.cc-acc-in .woocommerce-EditAccountForm .clear,
body.cc-acc-in .woocommerce-address-fields__field-wrapper .clear { display: none; }
body.cc-acc-in .woocommerce-EditAccountForm .form-row-wide,
body.cc-acc-in .woocommerce-address-fields__field-wrapper .form-row-wide,
body.cc-acc-in .woocommerce-EditAccountForm fieldset,
body.cc-acc-in .woocommerce-EditAccountForm > p:last-of-type { grid-column: 1 / -1; }
body.cc-acc-in .woocommerce-EditAccountForm fieldset { margin: .5rem 0 0; padding: 1.4rem; border: 1px solid var(--wp--preset--color--border); border-radius: 14px; background: var(--wp--preset--color--background); display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
body.cc-acc-in .woocommerce-EditAccountForm fieldset legend { padding: 0 .6rem; font-weight: 700; font-size: 1rem; }
body.cc-acc-in .woocommerce-EditAccountForm fieldset input.input-text { background: var(--wp--preset--color--surface); }
body.cc-acc-in .woocommerce-address-fields .button,
body.cc-acc-in .woocommerce-EditAccountForm .button { min-width: 14rem; }

/* ── Detalle de un pedido ───────────────────────────────────────────────────── */
body.cc-acc-in .woocommerce-MyAccount-content > p:has(mark.order-number) {
    padding: 1.1rem 1.4rem; line-height: 1.7; border-radius: 14px;
    background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-left: 4px solid var(--wp--preset--color--accent);
    box-shadow: var(--cc-acc-shadow);
}
body.cc-acc-in mark { background: none; color: var(--wp--preset--color--text); font-weight: 700; padding: 0; }
body.cc-acc-in mark.order-status { color: var(--wp--preset--color--accent); }
body.cc-acc-in .woocommerce-order-details { padding: 1.5rem; overflow: hidden; }
body.cc-acc-in .woocommerce-order-details__title,
body.cc-acc-in .woocommerce-column__title,
body.cc-acc-in .woocommerce-order-downloads__title { margin: 0 0 1rem; font-size: 1.2rem; }
body.cc-acc-in .woocommerce-table--order-details { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
body.cc-acc-in .woocommerce-table--order-details th,
body.cc-acc-in .woocommerce-table--order-details td { padding: .85rem .25rem; border: 0; border-top: 1px solid var(--wp--preset--color--border); text-align: left; font-size: .95rem; background: transparent; }
body.cc-acc-in .woocommerce-table--order-details thead th { border-top: 0; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-table--order-details .product-total,
body.cc-acc-in .woocommerce-table--order-details tfoot td,
body.cc-acc-in .woocommerce-table--order-details thead .product-total { text-align: right; }
body.cc-acc-in .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-table--order-details tfoot tr:last-child th,
body.cc-acc-in .woocommerce-table--order-details tfoot tr:last-child td { font-size: 1.1rem; font-weight: 700; color: var(--wp--preset--color--text); }
body.cc-acc-in .woocommerce-table--order-details .product-name a { font-weight: 600; color: var(--wp--preset--color--text); text-decoration: none; }
body.cc-acc-in .woocommerce-table--order-details .product-name a:hover { color: var(--wp--preset--color--accent); }
body.cc-acc-in .woocommerce-table--order-details .product-quantity { font-weight: 600; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-table--order-details .order-again { display: none; }
body.cc-acc-in .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
body.cc-acc-in .woocommerce-customer-details .woocommerce-columns::before,
body.cc-acc-in .woocommerce-customer-details .woocommerce-columns::after { display: none; }
body.cc-acc-in .woocommerce-customer-details { padding: 1.5rem; }
body.cc-acc-in .woocommerce-customer-details .woocommerce-column { float: none; width: auto; padding: 0; }
body.cc-acc-in .woocommerce-customer-details address { margin: 0; font-style: normal; line-height: 1.7; color: var(--wp--preset--color--text-muted); padding: 0; border: 0; }
body.cc-acc-in .woocommerce-customer-details--phone,
body.cc-acc-in .woocommerce-customer-details--email { margin: .35rem 0 0; }
body.cc-acc-in .woocommerce-OrderUpdates { list-style: none; margin: 0; padding: 1.4rem; }
body.cc-acc-in .woocommerce-OrderUpdate { margin: 0; padding: 1rem 0; border-top: 1px solid var(--wp--preset--color--border); }
body.cc-acc-in .woocommerce-OrderUpdate:first-child { border-top: 0; padding-top: 0; }
body.cc-acc-in .woocommerce-OrderUpdate-meta { margin: 0 0 .25rem; font-size: .8rem; color: var(--wp--preset--color--text-muted); }
body.cc-acc-in .woocommerce-OrderUpdate-description p { margin: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .cc-auth { grid-template-columns: 1fr; max-width: 560px; }
    .cc-auth__aside { padding: 1.75rem 1.75rem 1.5rem; gap: 1.1rem; }
    .cc-auth__aside-title { font-size: 1.4rem; }
    .cc-auth__perks { display: none; }
    .cc-auth__help { display: none; }
    .cc-auth__main { padding: 1.75rem 1.5rem 1.75rem; }
    body.cc-acc-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .cc-acc-nav { position: static; padding: .75rem; }
    .cc-acc-user { padding-bottom: .75rem; margin-bottom: .5rem; }
    body.cc-acc-in .cc-acc-menu { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cc-acc-menu::-webkit-scrollbar { display: none; }
    body.cc-acc-in .cc-acc-menu li { flex: none; }
    body.cc-acc-in .cc-acc-menu a { padding: .65rem 1rem; white-space: nowrap; }
    body.cc-acc-in .cc-acc-menu .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 720px) {
    .cc-dash-hero { flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1rem; }
    .cc-dash-stats { grid-template-columns: 1fr; }
    .cc-stat { flex-direction: row; align-items: center; gap: .9rem; padding: .95rem 1.1rem; }
    .cc-stat__ico { margin: 0; flex: none; }
    .cc-stat__num, .cc-stat__num--sm { font-size: 1.5rem; padding: 0; }
    .cc-stat__lbl { margin-left: auto; text-align: right; }
    .cc-dash-quick { grid-template-columns: 1fr; }
    .cc-recent__row { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; padding: .9rem .35rem; }
    .cc-recent__num { grid-column: 1; }
    .cc-recent__date { grid-column: 1; grid-row: 2; }
    .cc-recent__row .cc-pill { grid-column: 2; grid-row: 1; justify-self: end; }
    .cc-recent__total { grid-column: 2; grid-row: 2; }
    .cc-recent__go { display: none; }
    body.cc-acc-in .woocommerce-Addresses,
    body.cc-acc-in .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; }
    body.cc-acc-in .woocommerce-EditAccountForm,
    body.cc-acc-in .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
    body.cc-acc-in .woocommerce-EditAccountForm,
    body.cc-acc-in .woocommerce-address-fields { padding: 1.25rem; }
    body.cc-acc-in .woocommerce-address-fields .button,
    body.cc-acc-in .woocommerce-EditAccountForm .button { width: 100%; }

    /* Tabla de pedidos → una tarjeta por pedido */
    body.cc-acc-in .woocommerce-orders-table { background: none; border: 0; box-shadow: none; overflow: visible; }
    body.cc-acc-in .woocommerce-orders-table thead { display: none; }
    body.cc-acc-in .woocommerce-orders-table tbody { display: flex; flex-direction: column; gap: 1rem; }
    body.cc-acc-in .woocommerce-orders-table tr {
        display: block; padding: .5rem 1.15rem;
        background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
        border-radius: 16px; box-shadow: var(--cc-acc-shadow);
    }
    body.cc-acc-in .woocommerce-orders-table tbody tr:hover { background: var(--wp--preset--color--surface); }
    body.cc-acc-in .woocommerce-orders-table td,
    body.cc-acc-in .woocommerce-orders-table tbody th {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0;
        text-align: right; border-top: 1px solid var(--wp--preset--color--border);
    }
    body.cc-acc-in .woocommerce-orders-table tbody tr td:first-child,
    body.cc-acc-in .woocommerce-orders-table tbody tr th:first-child { border-top: 0; }
    body.cc-acc-in .woocommerce-orders-table td::before,
    body.cc-acc-in .woocommerce-orders-table tbody th::before {
        content: attr(data-title); float: none; flex: none; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--wp--preset--color--text-muted);
    }
    body.cc-acc-in .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; padding-top: .9rem; }
    body.cc-acc-in .woocommerce-orders-table__cell-order-actions::before { display: none; }
    body.cc-acc-in .woocommerce-orders-table__cell-order-actions .button { flex: 1; margin: 0; }
    .cc-ord-items { display: inline; margin-left: .4rem; }
    body.cc-acc-in .woocommerce-table--order-details thead { display: none; }
}
@media (max-width: 480px) {
    .cc-auth__row { gap: .75rem; }
    .cc-auth__main { padding: 1.5rem 1.15rem; }
    .cc-auth__aside { padding: 1.5rem 1.25rem 1.25rem; }
    .cc-dash-hero { padding: 1.25rem; }
}

/* Recuperar contraseña: confirmación y avisos centrados en el mismo ancho que el formulario */
body.cc-acc-out.woocommerce-lost-password .woocommerce-notices-wrapper,
body.cc-acc-out.woocommerce-lost-password .woocommerce > p { max-width: 520px; margin-left: auto; margin-right: auto; }
body.cc-acc-out.woocommerce-lost-password .woocommerce > p { color: var(--wp--preset--color--text-muted); line-height: 1.6; }


/* ════════════════════════════════════════════════════════════════════════════
   FILTRO DE CATEGORÍAS — tienda y páginas de categoría
   Bloque nativo de WooCommerce (Filtros de productos), en una tarjeta propia
   (.cc-filters-card, templates/archive-product.html) y reestilado por completo:
   se usa el propio, pero con look & feel de CC Design y sin depender de que
   cargue el CSS del plugin (se pisa todo explícitamente).
   ════════════════════════════════════════════════════════════════════════════ */
.cc-filters-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 16px;
    padding: 1.35rem 1.5rem 1.5rem;
    margin: 0 0 var(--wp--preset--spacing--50, 1.5rem) !important;
    box-shadow: 0 1px 2px rgba(28, 28, 28, .04), 0 8px 20px rgba(28, 28, 28, .04);
}
.cc-filters-card__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem !important;
    color: var(--wp--preset--color--text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.cc-filters-card__ico { width: 1.1em; height: 1.1em; color: var(--wp--preset--color--accent); }

.wp-block-woocommerce-product-filters {
    display: block !important;
    width: 100%;
    margin: 0 !important;
}

/* Reset de la mecánica de "overlay" del plugin: acá se maneja como un panel
   plegable propio (accordion en móvil, siempre visible en escritorio), con
   gap propio para que nada quede pegado o superpuesto. */
.wc-block-product-filters__overlay { all: unset; display: block; }
.wc-block-product-filters__overlay-wrapper { all: unset; display: block; }
.wc-block-product-filters__overlay-dialog {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.wc-block-product-filters__overlay-content {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
.wc-block-product-filters__overlay-header { display: none !important; }
.wc-block-product-filters__overlay-footer {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Botón "Filtrar productos" (toggle, solo se ve en móvil) */
.wc-block-product-filters__open-overlay {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    height: 44px;
    padding: 0 1.1rem !important;
    border: 1.5px solid var(--wp--preset--color--border) !important;
    border-radius: 10px;
    background: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--text) !important;
    font: inherit;
    font-size: var(--wp--preset--font-size--sm) !important;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}
.wc-block-product-filters__open-overlay:hover {
    border-color: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--accent) !important;
}
.wc-block-product-filters__open-overlay svg { width: 1.15em; height: 1.15em; }
.wc-block-product-filters__open-overlay::after {
    content: "";
    width: .5em; height: .5em;
    margin-left: .15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
}
.is-overlay-opened .wc-block-product-filters__open-overlay::after { transform: rotate(-135deg); }

/* Panel plegable: cerrado por default en móvil (el JS del bloque agrega/saca
   la clase .is-overlay-opened en el bloque padre). El botón "Aplicar" vive en
   el footer, hermano del contenido: se ocultan y muestran juntos. */
.wc-block-product-filters__overlay-content,
.wc-block-product-filters__overlay-footer { display: none !important; }
.is-overlay-opened .wc-block-product-filters__overlay-content {
    display: flex !important;
    animation: cc-filters-in 200ms ease both;
}
.is-overlay-opened .wc-block-product-filters__overlay-footer {
    display: block !important;
    margin-top: 1.15rem !important;
    padding-top: 1.1rem !important;
    border-top: 1px solid var(--wp--preset--color--border);
}
@keyframes cc-filters-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-overlay-opened .wc-block-product-filters__overlay-content { animation: none; } }

/* Lista de categorías (casilleros) — crece hacia abajo, en columnas; nada de
   scroll lateral, así se ve de entrada que hay más opciones. */
.wp-block-woocommerce-product-filter-taxonomy fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wc-block-product-filter-checkbox-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .1rem .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-block-product-filter-checkbox-list__item { margin: 0; }
.wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .55rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease;
}
.wc-block-product-filter-checkbox-list__label:hover { background: var(--wp--preset--color--background); }
.wc-block-product-filter-checkbox-list__input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    border: 1.5px solid var(--wp--preset--color--border);
    border-radius: 5px;
    background: var(--wp--preset--color--surface);
    transition: background 140ms ease, border-color 140ms ease;
}
.wc-block-product-filter-checkbox-list__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.wc-block-product-filter-checkbox-list__mark {
    width: .68rem;
    height: .58rem;
    color: #fff;
    opacity: 0;
    transition: opacity 120ms ease;
}
.wc-block-product-filter-checkbox-list__input:checked ~ .wc-block-product-filter-checkbox-list__mark { opacity: 1; }
.wc-block-product-filter-checkbox-list__input-wrapper:has(:checked) {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}
.wc-block-product-filter-checkbox-list__input:focus-visible ~ .wc-block-product-filter-checkbox-list__mark {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.wc-block-product-filter-checkbox-list__text-wrapper {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text);
}
.wc-block-product-filter-checkbox-list__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-block-product-filter-checkbox-list__count {
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    opacity: .6;
}

/* Filtros activos: chips removibles + borrar todo */
.wp-block-woocommerce-product-filter-active {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .7rem;
    margin: 0 !important;
    padding-top: 1rem;
    border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-woocommerce-product-filter-active.wc-block-product-filter--hidden { display: none !important; }
.wc-block-product-filter-removable-chips__items {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-block-product-filter-removable-chips__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .4rem 0 .8rem;
    border-radius: 999px;
    background: rgba(194, 123, 46, .1);
    color: var(--wp--preset--color--accent);
    font-size: .8rem;
    font-weight: 600;
}
.wc-block-product-filter-removable-chips__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem; height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 140ms ease;
}
.wc-block-product-filter-removable-chips__remove:hover { background: rgba(194, 123, 46, .22); }
.wc-block-product-filter-removable-chips__remove-icon { width: .95rem; height: .95rem; fill: currentColor; }
.wp-block-woocommerce-product-filter-clear-button:empty { display: none; }
.wp-block-woocommerce-product-filter-clear-button .wc-block-components-button,
.wp-block-woocommerce-product-filter-clear-button button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--wp--preset--color--text-muted) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    box-shadow: none !important;
}
.wp-block-woocommerce-product-filter-clear-button .wc-block-components-button:hover,
.wp-block-woocommerce-product-filter-clear-button button:hover { color: var(--wp--preset--color--accent) !important; }

/* Botón "Aplicar" — acción secundaria de toolbar, no un CTA gigante */
.wc-block-product-filters__apply {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 1.5rem !important;
    border: 0 !important;
    border-radius: 10px;
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    font: inherit;
    font-size: .82rem !important;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(194, 123, 46, .25);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.wc-block-product-filters__apply:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(194, 123, 46, .35); }

/* Escritorio: panel siempre visible, sin botón de abrir/cerrar; "Aplicar" a la
   derecha del todo, separado por una línea. */
@media (min-width: 769px) {
    .cc-filters-card__label--mobile-only { display: none; }
    .wc-block-product-filters__open-overlay { display: none !important; }
    .wc-block-product-filters__overlay-content,
    .wc-block-product-filters__overlay-footer { display: flex !important; }
    .wc-block-product-filters__overlay-footer {
        margin-top: 1.1rem !important;
        padding-top: 1.1rem !important;
        border-top: 1px solid var(--wp--preset--color--border);
        justify-content: flex-end;
    }
}

/* Móvil: una sola columna (nada de deslizar al costado); si hay muchas
   categorías, la lista tiene su propio scroll vertical para no empujar el
   botón "Aplicar" fuera de la pantalla. Tarjeta más angosta, sin encabezado
   redundante (el botón "Filtrar productos" ya lo indica). */
@media (max-width: 768px) {
    .cc-filters-card { padding: 1.1rem 1.1rem 1.25rem; }
    .cc-filters-card__label { display: none; }
    .wc-block-product-filter-checkbox-list__items {
        grid-template-columns: 1fr;
        max-height: 46vh;
        overflow-y: auto;
        padding-right: .25rem;
    }
    .wc-block-product-filters__apply { width: 100%; }
}
@media (min-width: 480px) and (max-width: 768px) {
    .wc-block-product-filter-checkbox-list__items { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   ESCRITORIO — filtro de categorías como columna fija a la izquierda, con el
   resto (conteo + orden, grilla, paginación) a la derecha. En mobile/tablet
   sigue siendo el desplegable "Filtrar productos" arriba de todo (sin este
   bloque, que solo aplica desde 1025px).
   ════════════════════════════════════════════════════════════════════════════ */
/* En la tienda los resultados van alineados a la izquierda (en el inicio se centran) */
.cc-shop-layout > .wc-block-product-template { justify-content: start; }
@media (min-width: 1025px) {
    /* Solo la plantilla de tienda/categoría (.cc-shop-layout): antes esto apuntaba a
       .cc-products-grid, que también usan las grillas del inicio y de Ofertas, y las
       corría a la derecha ("los productos aparecen a la mitad"). */
    .wp-block-woocommerce-product-collection.cc-shop-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 2.25rem;
        align-items: start;
    }
    /* Todo lo que no sea el filtro va a la columna derecha, uno debajo del otro.
       Filas explícitas (1, 2, 3): con "grid-row: 1 / -1" en un grid implícito
       el navegador no sabe cuántas filas hay en total y deja una fila 1 enorme
       (quedaba un salto vacío entre el título y la barra de orden). */
    .cc-shop-layout > .wc-block-components-notices,
    .cc-shop-layout > .cc-catalog-sortbar {
        grid-column: 2;
        grid-row: 1;
    }
    .cc-shop-layout > .wc-block-product-template,
    .cc-shop-layout > .wp-block-woocommerce-product-collection-no-results {
        grid-column: 2;
        grid-row: 2;
    }
    .cc-shop-layout > .wp-block-query-pagination {
        grid-column: 2;
        grid-row: 3;
    }
    .cc-shop-layout > .cc-filters-card {
        grid-column: 1;
        grid-row: 1 / 4;
        margin: 0 !important;
        position: sticky;
        top: 6.5rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
    .cc-shop-layout .cc-filters-card__label { display: flex; }
    /* Una sola columna de casilleros: la barra lateral es angosta */
    .cc-shop-layout .wc-block-product-filter-checkbox-list__items { grid-template-columns: 1fr; }
    /* Con la barra lateral la grilla tiene menos ancho: 4 columnas en vez de 5 */
    .cc-shop-layout .wc-block-product-template {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TAMAÑOS DE TEXTO DE RESPALDO
   En el inicio WordPress no imprimía las variables --font-size--2xl…6xl (solo las
   que detecta en uso), y los títulos de sección ("Explora nuestras categorías",
   "Descubre nuestros modelos…") quedaban en 16px, diminutos al lado de la rayita de
   acento. Se declaran acá con los mismos valores de theme.json; donde WordPress las
   imprime igual, gana la suya (mismo valor).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --wp--preset--font-size--2xl: 1.5rem;
    --wp--preset--font-size--3xl: 1.875rem;
    --wp--preset--font-size--4xl: 2.25rem;
    --wp--preset--font-size--5xl: 3rem;
    --wp--preset--font-size--6xl: 3.75rem;
}
h2.wp-block-heading.has-4xl-font-size { font-size: var(--wp--preset--font-size--4xl); line-height: 1.2; }
@media (max-width: 768px) {
    h2.wp-block-heading.has-4xl-font-size { font-size: 1.75rem; }
}

/* Los casilleros aplican el filtro apenas se tocan (tocar de nuevo lo saca): no hace falta
   el botón "Aplicar" ni la fila de "Categoría: X ×" abajo. */
.wc-block-product-filters__overlay-footer,
.wc-block-product-filters__apply,
.wp-block-woocommerce-product-filter-active { display: none !important; }

/* Barra de resultados: conteo a la izquierda, orden a la derecha (el bloque de avisos vacío
   ocupaba un lugar y dejaba el conteo flotando en el medio). */
.cc-catalog-sortbar { justify-content: flex-start; }
.cc-catalog-sortbar .wc-block-components-notices:empty,
.cc-catalog-sortbar .wc-block-components-notices:not(:has(*)) { display: none; }
.cc-catalog-sortbar .wc-block-catalog-sorting { margin-left: auto; }
.cc-catalog-sortbar .wc-block-product-results-count,
.cc-catalog-sortbar .woocommerce-result-count { margin: 0; }

/* Inicio / Ofertas en escritorio: si sobra un producto en la última fila (ej. 6 productos en
   5 columnas) queda centrado en vez de solo a la izquierda. */
@media (min-width: 1025px) {
    .cc-products-grid:not(.cc-shop-layout) .wc-block-product-template {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem !important;
    }
    .cc-products-grid:not(.cc-shop-layout) .wc-block-product-template > li {
        width: calc((100% - 5rem) / 5) !important;
        flex: 0 0 auto;
    }
}

/* Barra de resultados de la tienda: alineada con el borde superior del filtro y de la grilla */
.cc-shop-layout > .cc-catalog-sortbar { margin-top: 0 !important; }
.cc-catalog-sortbar > * { margin-left: 0; margin-right: 0; }
.cc-catalog-sortbar .wc-block-catalog-sorting { margin-left: auto !important; }
.cc-catalog-sortbar .wc-block-store-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) { display: none; }

/* ── Checkout: nota del pedido (columna izquierda, recuadro siempre visible) ─── */
.cc-checkout-wrap .wc-block-checkout__order-notes { margin-top: 1.75rem; }
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-checkbox {
    margin: 0 0 0.6rem;
    pointer-events: none;
}
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-checkbox__input,
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-checkbox__mark { display: none !important; }
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-checkbox label { display: block; padding: 0; }
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-checkbox__label {
    display: block;
    padding: 0;
    font-family: var(--wp--preset--font-family--playfair);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
}
.cc-checkout-wrap .wc-block-checkout__add-note .wc-block-components-textarea {
    width: 100%;
    min-height: 6.5rem;
    padding: 0.85rem 1rem;
    box-sizing: border-box;
    resize: vertical;
}

/* ── Inicio: revendedores (enlace al sitio mayorista) ─────────────────────────── */
.cc-section--mayorista {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 1.5rem;
    background:
        radial-gradient(circle at 92% 8%, rgba(194, 123, 46, 0.28), transparent 46%),
        radial-gradient(circle at 4% 100%, rgba(232, 168, 74, 0.12), transparent 40%),
        #1c1c1c;
}
.cc-section--mayorista::before,
.cc-section--mayorista::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(232, 168, 74, 0.22);
    border-radius: 50%;
    pointer-events: none;
}
.cc-section--mayorista::before { width: 420px; height: 420px; right: -120px; top: -150px; }
.cc-section--mayorista::after  { width: 260px; height: 260px; right: -40px;  top: -70px; }
.cc-mayorista {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.cc-mayorista__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: #e8a84a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cc-mayorista__eyebrow span { width: 2.5rem; height: 2px; background: #e8a84a; }
.cc-mayorista__title {
    margin: 0 0 1.1rem;
    color: #fff;
    font-family: var(--wp--preset--font-family--playfair);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
}
.cc-mayorista__title em { color: #e8a84a; font-style: italic; }
.cc-mayorista__desc {
    margin: 0 0 2rem;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.65;
}
.cc-mayorista__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.05rem 1.9rem;
    border-radius: 4px;
    background: #c27b2e;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(194, 123, 46, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-mayorista__btn svg { width: 1.15rem; height: 1.15rem; transition: transform 0.2s ease; }
.cc-mayorista__btn:hover { background: #d48a38; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(194, 123, 46, 0.45); }
.cc-mayorista__btn:hover svg { transform: translateX(4px); }
.cc-mayorista__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cc-mayorista__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cc-mayorista__perks li {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.5;
    backdrop-filter: blur(2px);
}
.cc-mayorista__perks strong { display: block; margin-bottom: 0.15rem; color: #fff; font-size: 1.02rem; }
.cc-mayorista__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(232, 168, 74, 0.14);
    color: #e8a84a;
}
.cc-mayorista__ico svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 900px) {
    .cc-section--mayorista { padding: 3.25rem 1rem; }
    .cc-mayorista { grid-template-columns: 1fr; gap: 2.25rem; }
    .cc-section--mayorista::before { width: 300px; height: 300px; right: -120px; top: -140px; }
    .cc-section--mayorista::after  { display: none; }
}
@media (max-width: 480px) {
    .cc-mayorista__btn { width: 100%; justify-content: center; box-sizing: border-box; }
    .cc-mayorista__perks li { padding: 1rem; gap: 0.9rem; }
}

/* ══ Inicio: acabado profesional ═════════════════════════════════════════════
   Encabezados de sección parejos, ritmo de espacios, tarjetas, franja de pagos
   y bloque de contacto. Va al final para pisar los estilos anteriores. */

/* Encabezados: etiqueta + título + línea de acento */
.cc-eyebrow {
    margin: 0 auto 0.65rem !important;
    color: var(--wp--preset--color--accent) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
}
.cc-section--ofertas h2.wp-block-heading,
.cc-section--categorias h2.wp-block-heading,
.cc-section--exclusivos h2.wp-block-heading,
.cc-section--reviews h2.wp-block-heading {
    margin: 0 auto 1rem !important;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}
.cc-section--ofertas .cc-title-underline,
.cc-section--categorias .cc-title-underline,
.cc-section--exclusivos .cc-title-underline,
.cc-section--reviews .cc-title-underline {
    width: 3.5rem;
    height: 3px;
    margin: 0 auto 2.75rem !important;
    border-radius: 2px;
}

/* Ritmo de espacios entre secciones */
.cc-section--ofertas    { padding-top: 4.5rem !important; padding-bottom: 5rem !important; }
.cc-section--categorias { padding-top: 5rem !important;   padding-bottom: 5rem !important; }
.cc-section--exclusivos { padding-top: 5rem !important;   padding-bottom: 5rem !important; }
.cc-section--strip      { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; background: var(--wp--preset--color--surface); }
.cc-section--reviews    { padding: 5rem 1rem 3rem !important; }
.cc-home-social         { padding-top: 5rem !important;   padding-bottom: 4rem !important; }

/* Tarjetas de producto */
.cc-products-grid .wc-block-product-template > li {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cc-products-grid .wc-block-product-template > li:hover {
    box-shadow: 0 2px 4px rgba(28, 28, 28, 0.06), 0 18px 40px rgba(28, 28, 28, 0.14);
    transform: translateY(-4px);
}
.cc-products-grid .cc-card-image img { transition: transform 0.6s ease; }
.cc-products-grid .wc-block-product-template > li:hover .cc-card-image img { transform: scale(1.05); }
.cc-products-grid .cc-card-title { padding: 1rem 1rem 0.4rem !important; letter-spacing: 0.005em; }
.cc-products-grid .cc-card-info .cc-card-price { font-weight: 700; }

/* Botones de "ver todos" */
.cc-section--ofertas > .wp-block-buttons .wp-block-button__link,
.cc-section--exclusivos > .wp-block-buttons .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.05rem 2.4rem !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(28, 28, 28, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cc-section--ofertas > .wp-block-buttons .wp-block-button__link::after,
.cc-section--exclusivos > .wp-block-buttons .wp-block-button__link::after {
    content: "→";
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}
.cc-section--ofertas > .wp-block-buttons .wp-block-button__link:hover,
.cc-section--exclusivos > .wp-block-buttons .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(28, 28, 28, 0.26);
    filter: brightness(1.06);
}
.cc-section--ofertas > .wp-block-buttons .wp-block-button__link:hover::after,
.cc-section--exclusivos > .wp-block-buttons .wp-block-button__link:hover::after { transform: translateX(4px); }

/* Franja de pagos y envíos */
.cc-strip-item { padding: 1.75rem 1.5rem; }
.cc-strip-icon { align-items: center; height: 56px; margin-bottom: 1rem; }
.cc-strip-item .wp-block-heading {
    margin: 0 0 0.35rem !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em;
}
.cc-strip-item p { margin: 0; font-size: 0.9rem; }

/* Categorías */
.cc-cat-card { border-radius: 16px; }

/* Contacto y redes */
html:not([data-theme="dark"]) .cc-home-social { background-color: var(--wp--preset--color--warm-cream) !important; }
.cc-home-social__chip {
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}
.cc-home-social__title {
    font-family: var(--wp--preset--font-family--playfair) !important;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important;
    line-height: 1.15 !important;
}
.cc-home-social__sub { margin-bottom: 1.75rem; font-size: 1.02rem; }
.cc-home-social__wa-btn {
    padding: 0.95rem 2rem;
    font-size: 0.95rem;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32);
}
.cc-home-social__wa-note { font-size: 0.8rem; }
@media (min-width: 768px) {
    .cc-home-social__grid { padding-bottom: 2.75rem; }
}

@media (max-width: 768px) {
    .cc-section--ofertas    { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .cc-section--categorias { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .cc-section--exclusivos { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .cc-section--strip      { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .cc-section--reviews    { padding: 3rem 1rem 1.5rem !important; }
    .cc-home-social         { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
    .cc-section--ofertas .cc-title-underline,
    .cc-section--categorias .cc-title-underline,
    .cc-section--exclusivos .cc-title-underline,
    .cc-section--reviews .cc-title-underline { margin-bottom: 1.75rem !important; }
    .cc-section--ofertas > .wp-block-buttons .wp-block-button__link,
    .cc-section--exclusivos > .wp-block-buttons .wp-block-button__link { padding: 1rem 1.75rem !important; }
}

/* Contacto y redes: grupo centrado, sin franja de aire antes del pie */
.cc-home-social__inner { justify-content: center; gap: 7rem; }
.cc-home-social + .wp-block-template-part { margin-top: 0 !important; }
@media (max-width: 900px) { .cc-home-social__inner { gap: 2rem; } }
/* La franja de aire que queda arriba del pie se pinta del mismo color del pie */
footer.wp-block-template-part { background-color: #1c1c1c; }
.wp-block-template-part > p:empty { display: none; }

/* Revendedores: tarjetas con íconos más cuidados */
.cc-mayorista__perks { gap: 1.1rem; }
.cc-mayorista__perks li {
    gap: 1.35rem;
    padding: 1.35rem 1.6rem;
    border-radius: 14px;
    border-color: rgba(232, 168, 74, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cc-mayorista__perks li:hover {
    transform: translateX(6px);
    border-color: rgba(232, 168, 74, 0.5);
    background: linear-gradient(135deg, rgba(232, 168, 74, 0.14), rgba(255, 255, 255, 0.03));
}
.cc-mayorista__ico {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 16px;
    border: 1px solid rgba(240, 180, 90, 0.4);
    background: linear-gradient(145deg, rgba(240, 180, 90, 0.32), rgba(194, 123, 46, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.25);
    color: #f6c56e;
}
.cc-mayorista__ico svg { width: 2rem; height: 2rem; }
.cc-mayorista__perks strong { font-size: 1.08rem; letter-spacing: 0.005em; }
@media (max-width: 480px) {
    .cc-mayorista__ico { width: 3.25rem; height: 3.25rem; border-radius: 14px; }
    .cc-mayorista__ico svg { width: 1.7rem; height: 1.7rem; }
    .cc-mayorista__perks li:hover { transform: none; }
}
.cc-mayorista__ico svg { width: 2.4rem; height: 2.4rem; stroke-width: 1.9; }
@media (max-width: 480px) { .cc-mayorista__ico svg { width: 2.1rem; height: 2.1rem; } }

/* Mini carrito: aviso de que el 2x1 no se combina con el descuento por cantidad */
.cc-mc-note {
    margin: 0.5rem 1rem 0.25rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ecd9b8;
    border-radius: 6px;
    background: #fbf4e6;
    color: #6b4a1a;
    font-size: 0.82rem;
    line-height: 1.4;
}
html[data-theme="dark"] .cc-mc-note {
    border-color: rgba(232, 168, 74, 0.35);
    background: rgba(232, 168, 74, 0.12);
    color: #f0c98a;
}

/* El aviso "Agregá X más…" del mini carrito lo maneja el tema (minicart-offers.js); se oculta el del plugin para no duplicar */
.accel-dc-mini-notice { display: none !important; }

/* ── Mini resumen del carrito (fijo abajo a la izquierda) ─────────────────────── */
.cc-cart-dock {
    --dock-bottom: 1.5rem;
    position: fixed;
    left: 1.5rem;
    bottom: var(--dock-bottom);
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: calc(100vw - 3rem - 56px - 1rem);
    padding: 0.55rem 0.6rem 0.55rem 0.7rem;
    border: 1px solid var(--wp--preset--color--border, #e2d9c5);
    border-radius: 14px;
    background: var(--wp--preset--color--surface, #fff);
    color: var(--wp--preset--color--primary, #1c1c1c);
    box-shadow: 0 10px 30px rgba(28, 28, 28, 0.16), 0 2px 6px rgba(28, 28, 28, 0.08);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.2s ease, box-shadow 0.2s ease;
}
.cc-cart-dock.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.cc-cart-dock:hover { box-shadow: 0 14px 34px rgba(28, 28, 28, 0.22), 0 2px 6px rgba(28, 28, 28, 0.1); }
.cc-cart-dock:focus-visible { outline: 3px solid #c27b2e; outline-offset: 3px; }
.cc-cart-dock__thumbs { display: flex; align-items: center; flex: 0 0 auto; }
.cc-cart-dock__thumbs img,
.cc-cart-dock__more {
    width: 38px;
    height: 38px;
    margin-left: -12px;
    box-sizing: border-box;
    border: 2px solid var(--wp--preset--color--surface, #fff);
    border-radius: 9px;
    background: #f1ede2;
    object-fit: cover;
}
.cc-cart-dock__thumbs > :first-child { margin-left: 0; }
.cc-cart-dock__more {
    display: grid;
    place-items: center;
    background: #1c1c1c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.cc-cart-dock__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cc-cart-dock__count { font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.cc-cart-dock__total { font-size: 0.8rem; color: var(--wp--preset--color--text-muted, #6b6b6b); white-space: nowrap; }
.cc-cart-dock__go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: 0.15rem;
    padding: 0.55rem 0.8rem;
    border-radius: 9px;
    background: #c27b2e;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.2s ease;
}
.cc-cart-dock__go svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.cc-cart-dock:hover .cc-cart-dock__go { background: #a86722; }
.cc-cart-dock:hover .cc-cart-dock__go svg { transform: translateX(3px); }
.cc-cart-dock.is-visible.is-bump { animation: cc-dock-bump 0.6s ease; }
@keyframes cc-dock-bump {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-4px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}
html[data-theme="dark"] .cc-cart-dock {
    border-color: rgba(255, 255, 255, 0.14);
    background: #262626;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .cc-cart-dock__thumbs img,
html[data-theme="dark"] .cc-cart-dock__more { border-color: #262626; }
html[data-theme="dark"] .cc-cart-dock__total { color: rgba(255, 255, 255, 0.65); }
body.has-sticky-cta .cc-cart-dock { --dock-bottom: calc(76px + 1.5rem); }
@media (min-width: 900px) {
    body.has-sticky-cta .cc-cart-dock { --dock-bottom: calc(88px + 1.5rem); }
}
@media (max-width: 768px) {
    .cc-cart-dock { --dock-bottom: 1rem; left: 1rem; max-width: calc(100vw - 2rem - 56px - 0.75rem); gap: 0.65rem; }
    .cc-cart-dock__go-label { display: none; }
    .cc-cart-dock__go { padding: 0.55rem 0.65rem; }
}
@media (max-width: 600px) {
    .cc-cart-dock { max-width: calc(100vw - 2rem - 48px - 0.75rem); }
    .cc-cart-dock__thumbs img, .cc-cart-dock__more { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
    body.has-sticky-cta .cc-cart-dock { --dock-bottom: calc(68px + 1rem); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-cart-dock, .cc-cart-dock.is-visible.is-bump { transition: none; animation: none; }
}

/* Botón de las tarjetas de producto: compacto, así al mostrarse no tapa la imagen.
   El enlace "Ver carrito" que WooCommerce agrega debajo ocupaba lugar de más (el mini
   resumen del carrito y el encabezado ya dan acceso). */
.cc-card-btn .added_to_cart { display: none !important; }
.cc-card-btn .wp-block-button__link {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}
@media (max-width: 768px) {
    .cc-card-btn .wp-block-button__link {
        padding: 0.5rem 0.35rem !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap;
    }
}

/* Nosotros: los botones del cierre ("¿Querés un cuadro decorativo único…?") van centrados.
   El contenido de la página vive en la base de datos y en producción el bloque de botones
   no trae la opción de centrado; con esto queda igual sin tocar la página. */
.cc-nos-cta .wp-block-buttons { justify-content: center !important; }

/* ── Checkout en celular/tablet: el resumen va ANTES de las opciones de pago ─────
   Sin mover nada de lugar (Mercado Pago se rompe si su bloque cambia de sitio): los
   bloques del formulario pasan a ser hijos directos del contenedor y "order" los acomoda. */
@media (max-width: 899px) {
    .cc-checkout-wrap .wc-block-components-sidebar-layout.wc-block-checkout { display: flex !important; flex-direction: column; }
    .cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-main,
    .cc-checkout-wrap .wc-block-checkout__form { display: contents !important; }
    .cc-checkout-wrap .wc-block-checkout__form > * { order: 10; }
    .cc-checkout-wrap .wc-block-components-sidebar-layout .wc-block-components-sidebar { order: 20 !important; margin-bottom: 1rem; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__payment-method { order: 30; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__terms { order: 31; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__actions { order: 32; }
}

/* Checkout en escritorio: la nota del pedido va antes de las opciones de pago (el orden de
   WooCommerce la deja después). Solo se reordena con CSS. */
@media (min-width: 900px) {
    .cc-checkout-wrap .wc-block-checkout__form { display: flex; flex-direction: column; }
    .cc-checkout-wrap .wc-block-checkout__form > * { order: 10; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__order-notes { order: 11; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__payment-method { order: 12; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__terms { order: 13; }
    .cc-checkout-wrap .wc-block-checkout__form > .wc-block-checkout__actions { order: 14; }
}

/* ── Mini carrito y carrito en celular: que todo entre entre los márgenes ───────
   WooCommerce arma cada producto con columnas fijas (80px + 132px + …) que no entran
   en pantallas de 320–360px y empujan el precio fuera del cajón. */
@media (max-width: 480px) {
    .wc-block-mini-cart__drawer { overflow-x: hidden; }

    /* Título "Tu carrito (artículos: N)": en una línea que se acomoda, sin partirse en columnas */
    .wc-block-mini-cart__drawer .wc-block-mini-cart__title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4rem;
        padding-right: 3.25rem;
        font-size: 1.6rem !important;
        line-height: 1.2;
    }
    /* Botón de cerrar: adentro del cajón */
    .wc-block-mini-cart__drawer .wc-block-components-drawer__close {
        right: 6px !important;
        top: 8px !important;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    /* Fila de producto: miniatura | detalle (ocupa lo que sobra) | precio */
    .wc-block-mini-cart__drawer .wc-block-cart-items__row,
    .cc-cart-page .wc-block-cart-items__row,
    .wp-block-woocommerce-cart .wc-block-cart-items__row {
        grid-template-columns: 64px minmax(0, 1fr) auto !important;
        column-gap: 0.75rem;
    }
    .wc-block-mini-cart__drawer .wc-block-cart-item__image,
    .wp-block-woocommerce-cart .wc-block-cart-item__image { grid-column: 1; width: 64px; padding-right: 0; }
    .wc-block-mini-cart__drawer .wc-block-cart-item__image img,
    .wp-block-woocommerce-cart .wc-block-cart-item__image img { width: 64px; height: auto; }
    .wc-block-mini-cart__drawer .wc-block-cart-item__product,
    .wp-block-woocommerce-cart .wc-block-cart-item__product { grid-column: 2; min-width: 0; }
    .wc-block-mini-cart__drawer .wc-block-cart-item__total,
    .wp-block-woocommerce-cart .wc-block-cart-item__total { grid-column: 3; padding: 0; text-align: right; }
}
@media (max-width: 480px) {
    /* WooCommerce le pone margen negativo al botón de cerrar y se asoma 4px fuera del cajón */
    .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
        margin: 0 !important;
        padding: 0.7rem !important;
        right: 8px !important;
        top: 8px !important;
        width: 44px;
        height: 44px;
        box-sizing: border-box;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Pedido recibido: nada puede ensanchar la pantalla
   ════════════════════════════════════════════════════════════════════════════ */
/* Verificar correo (pedido visto sin sesión): el botón no cortaba el texto y se salía de la pantalla. */
.woocommerce-verify-email input[type="submit"],
.woocommerce-verify-email .button {
    width: 100%; max-width: 100%; white-space: normal; line-height: 1.3; text-align: center;
}
.woocommerce-verify-email input[type="email"] { width: 100%; max-width: 100%; }
/* Crear cuenta: un correo largo sin espacios empujaba todo el bloque hacia afuera. */
body.cc-oc-active .wc-block-order-confirmation-create-account,
body.cc-oc-active .wc-block-order-confirmation-create-account * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; box-sizing: border-box; }
body.cc-oc-active .wc-block-order-confirmation-create-account-form-wrapper,
body.cc-oc-active .wc-block-order-confirmation-create-account-form { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
body.cc-oc-active .wc-block-order-confirmation-create-account .wc-block-components-button { white-space: normal; height: auto; }
@media (max-width: 380px) {
    .cc-oc-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .6rem; }
    .cc-oc-item__media, .cc-oc-item__img { width: 48px !important; height: 48px !important; }
    .cc-oc-item__price, .cc-oc-item > :last-child { font-size: .92rem; }
}

/* Entradas, archivo del blog y 404: el texto quedaba pegado a los bordes de la pantalla en celular. */
@media (max-width: 1240px) {
    body.error404 main.wp-block-group,
    body.single-post main.wp-block-group,
    body.blog main.wp-block-group,
    body.archive:not(.post-type-archive-product):not(.tax-product_cat):not(.tax-product_tag) main.wp-block-group,
    body.search:not(.post-type-product) main.wp-block-group {
        padding-left: 1.25rem !important; padding-right: 1.25rem !important;
    }
}

/* Mi cuenta en celular: el menú no se desliza hacia el costado (quedaban opciones escondidas), se acomoda en filas. */
@media (max-width: 600px) {
    body.cc-acc-in .cc-acc-menu { flex-wrap: wrap; overflow-x: visible; }
    body.cc-acc-in .cc-acc-menu li { flex: 1 1 calc(50% - .4rem); }
    body.cc-acc-in .cc-acc-menu a { white-space: normal; justify-content: center; text-align: center; padding: .65rem .75rem; }
    body.cc-acc-in .cc-acc-menu .woocommerce-MyAccount-navigation-link--customer-logout { flex-basis: 100%; }
}

/* Grillas de productos en celular: el margen se sumaba dos veces (sección + grilla) y las tarjetas quedaban angostas. */
@media (max-width: 600px) {
    .cc-section--ofertas > .cc-products-grid,
    .wp-block-group.alignfull > .cc-products-grid:not(.cc-shop-layout) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Contacto en celular: el ícono de WhatsApp le robaba ancho al texto; pasa arriba del título. */
@media (max-width: 600px) {
    .cc-contact-wa-banner .wp-block-columns .wp-block-group.is-layout-flex { flex-direction: column; align-items: flex-start; gap: .9rem; }
}
@media (max-width: 400px) {
    /* "Datos para transferir": el título quedaba en una columna angosta entre el ícono y la etiqueta. */
    .cc-oc-card__head > div { flex: 1 1 9rem; }
    .cc-oc-card__head .cc-oc-badge { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TIENDA — casilla «Combos» (bloque ccdesign/combos-filter), arriba de las categorías
   ════════════════════════════════════════════════════════════════════════════ */
.cc-combos-filter {
    display: flex; align-items: center; gap: .7rem;
    margin: 0 0 1rem; padding: .7rem .85rem;
    border: 1px solid var(--wp--preset--color--border); border-radius: 12px;
    background: var(--wp--preset--color--warm-cream, #F5EED6);
    color: var(--wp--preset--color--text, #1C1C1C); font-size: .95rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.cc-combos-filter:hover { border-color: var(--wp--preset--color--accent); }
.cc-combos-filter:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.cc-combos-filter__box {
    flex: none; width: 20px; height: 20px; display: grid; place-items: center;
    border: 1.5px solid var(--wp--preset--color--accent); border-radius: 5px; background: var(--wp--preset--color--surface, #fff); color: #fff;
}
.cc-combos-filter__box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .12s; }
.cc-combos-filter.is-active { border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 1px var(--wp--preset--color--accent) inset; }
.cc-combos-filter.is-active .cc-combos-filter__box { background: var(--wp--preset--color--accent); }
.cc-combos-filter.is-active .cc-combos-filter__box svg { opacity: 1; }
.cc-combos-filter__txt { flex: 1; min-width: 0; }
.cc-combos-filter__count {
    flex: none; min-width: 1.6rem; padding: .12rem .45rem; border-radius: 99px; text-align: center;
    background: var(--wp--preset--color--accent); color: #fff; font-size: .74rem; font-weight: 700;
}