/*
Theme Name:  CosmoCar
Theme URI:   https://arnottspain.es
Author:      CosmoCar
Description: Tema propio para Arnott España — tienda de suspensión neumática. Cabecera CosmoCar, portada dinámica generada desde categorías y fabricantes, SEO integrado. Sin Elementor, sin tema padre.
Version:     1.8.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
Text Domain: cosmocar
Tags:        e-commerce, woocommerce, custom-colors
*/

/* ══════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
    --cc-bg:        #0f1013;
    --cc-bg2:       #0a0b0e;
    --cc-surface:   #1a1c22;
    --cc-surface2:  #16181e;

    --cc-green:     #00ae42;
    --cc-green2:    #00c84d;
    --cc-green-dk:  #008f36;
    --cc-amber:     #ef9f27;

    --cc-page:      #f4f5f7;
    --cc-card:      #ffffff;
    --cc-ink:       #14161b;
    --cc-ink2:      #3d434f;
    --cc-ink3:      #6b7280;
    --cc-line:      #e4e6ea;

    --cc-radius:    10px;
    --cc-radius-sm: 6px;
    --cc-shadow:    0 1px 2px rgba(15,16,19,.06), 0 4px 16px rgba(15,16,19,.06);
    --cc-shadow-lg: 0 8px 32px rgba(15,16,19,.12);

    --cc-wrap:      1280px;
    --cc-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--cc-font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--cc-ink2);
    background: var(--cc-page);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cc-green-dk); text-decoration: none; }
a:hover { color: var(--cc-green); }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    color: var(--cc-ink);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--cc-line); margin: 2rem 0; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--cc-green); color: #fff; }

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

.cc-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: var(--cc-green); color: #fff; padding: 10px 18px;
    border-radius: 0 0 var(--cc-radius-sm) 0; font-size: 14px; font-weight: 600;
}
.cc-skip-link:focus { left: 0; color: #fff; }

/* ══════════════════════════════════════════════════════════════
   3. LAYOUT
   ══════════════════════════════════════════════════════════════ */
.cc-wrap {
    width: 100%;
    max-width: var(--cc-wrap);
    margin: 0 auto;
    padding: 0 24px;
}
.cc-wrap-narrow { max-width: 860px; }

.cc-site { display: flex; flex-direction: column; min-height: 100vh; }
.cc-main { flex: 1 0 auto; }

.cc-section { padding: 56px 0; }
.cc-section--tight { padding: 36px 0; }
.cc-section--dark { background: var(--cc-bg); color: rgba(255,255,255,.72); }
.cc-section--dark h2,
.cc-section--dark h3 { color: #fff; }
.cc-section--alt { background: #fff; }

.cc-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.cc-section-head h2 { margin: 0; }
.cc-section-head p { margin: 6px 0 0; color: var(--cc-ink3); font-size: 14px; max-width: 62ch; }
.cc-section-head .cc-link-all {
    font-size: 13px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
}

.cc-eyebrow {
    display: inline-block; margin-bottom: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cc-green);
}

/* ══════════════════════════════════════════════════════════════
   4. BOTONES
   ══════════════════════════════════════════════════════════════ */
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--cc-radius-sm);
    background: var(--cc-green); color: #fff !important;
    border: 1px solid var(--cc-green);
    font-size: 14px; font-weight: 600; line-height: 1;
    cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.cc-btn:hover { background: var(--cc-green2); border-color: var(--cc-green2); transform: translateY(-1px); }
.cc-btn svg { width: 16px; height: 16px; fill: currentColor; }

.cc-btn--ghost {
    background: transparent; color: var(--cc-ink) !important;
    border-color: var(--cc-line);
}
.cc-btn--ghost:hover { background: #fff; border-color: var(--cc-green); color: var(--cc-green-dk) !important; }

.cc-btn--onDark {
    background: rgba(255,255,255,.08); color: #fff !important;
    border-color: rgba(255,255,255,.22);
}
.cc-btn--onDark:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

/* ══════════════════════════════════════════════════════════════
   5. PORTADA — HERO
   ══════════════════════════════════════════════════════════════ */
.cc-hero {
    position: relative;
    background:
        radial-gradient(1100px 460px at 12% -10%, rgba(0,174,66,.20), transparent 62%),
        linear-gradient(180deg, #0f1013 0%, #14161c 100%);
    color: rgba(255,255,255,.74);
    padding: 56px 0 60px;
    overflow: hidden;
}
.cc-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
    background: linear-gradient(90deg, var(--cc-green), transparent 70%);
}
.cc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px; align-items: center;
}
.cc-hero h1 { color: #fff; margin-bottom: 16px; }
.cc-hero h1 em { font-style: normal; color: var(--cc-green); }
.cc-hero-sub {
    font-size: 16px; line-height: 1.7; max-width: 56ch;
    color: rgba(255,255,255,.66); margin-bottom: 24px;
}
.cc-hero-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.cc-hero-points li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: rgba(255,255,255,.78);
}
.cc-hero-points svg { width: 18px; height: 18px; fill: var(--cc-green); flex-shrink: 0; margin-top: 1px; }
.cc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cc-hero-stats {
    display: flex; flex-wrap: wrap; gap: 28px;
    margin-top: 30px; padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.cc-hero-stat strong {
    display: block; font-size: 24px; font-weight: 800;
    color: #fff; line-height: 1.1; letter-spacing: -.02em;
}
.cc-hero-stat span { font-size: 12px; color: rgba(255,255,255,.45); }

/* Caja que envuelve el filtro (el widget mantiene su propio CSS) */
.cc-hero-finder {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cc-hero-finder-head {
    display: flex; align-items: center; gap: 9px;
    margin: 2px 4px 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cc-green);
}
.cc-hero-finder-head svg { width: 16px; height: 16px; fill: currentColor; }
.cc-hero-finder .fi-widget { max-width: none; margin: 0; box-shadow: none; }
.cc-hero-finder-foot {
    margin: 14px 4px 2px; font-size: 12px; color: rgba(255,255,255,.42);
    text-align: center;
}
.cc-hero-finder-foot a { color: rgba(255,255,255,.7); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   6. BARRA DE CONFIANZA
   ══════════════════════════════════════════════════════════════ */
.cc-trust { background: #fff; border-bottom: 1px solid var(--cc-line); }
.cc-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--cc-line);
}
.cc-trust-item {
    background: #fff; padding: 22px 20px;
    display: flex; align-items: flex-start; gap: 13px;
}
.cc-trust-item svg { width: 24px; height: 24px; fill: var(--cc-green); flex-shrink: 0; }
.cc-trust-item strong { display: block; font-size: 14px; color: var(--cc-ink); }
.cc-trust-item span { font-size: 12.5px; color: var(--cc-ink3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   7. REJILLA DE CATEGORÍAS
   ══════════════════════════════════════════════════════════════ */
.cc-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
}
.cc-cat-card {
    display: flex; flex-direction: column;
    background: var(--cc-card); border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cc-cat-card:hover {
    border-color: var(--cc-green); box-shadow: var(--cc-shadow);
    transform: translateY(-2px);
}
/* Fondo blanco: lo que se muestra aquí es la foto de una pieza real
   del catálogo, recortada sobre blanco por el fabricante. */
.cc-cat-thumb {
    aspect-ratio: 4 / 3; background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-bottom: 1px solid var(--cc-line);
}
.cc-cat-thumb img {
    width: 100%; height: 100%; object-fit: contain; padding: 10px;
    transition: transform .3s ease;
}
.cc-cat-card:hover .cc-cat-thumb img { transform: scale(1.05); }
.cc-cat-thumb svg { width: 54px; height: 54px; fill: #c9ced8; }
.cc-cat-thumb:has(svg) { background: #f7f8fa; }
.cc-cat-body { padding: 14px 16px 16px; }
.cc-cat-body h3 {
    margin: 0 0 3px; font-size: 15px; font-weight: 650;
    color: var(--cc-ink); line-height: 1.35;
}
.cc-cat-card:hover .cc-cat-body h3 { color: var(--cc-green-dk); }
.cc-cat-count { font-size: 12.5px; color: var(--cc-ink3); }

/* ══════════════════════════════════════════════════════════════
   8. REJILLA DE MARCAS DE LA PORTADA
   ══════════════════════════════════════════════════════════════
   Fichas tipográficas: el nombre de la marca es el elemento, sin
   iconos genéricos. Las seis primeras llevan un filete verde a la
   izquierda que crece al pasar el ratón. */

.cc-marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 10px;
}

.cc-marca {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 66px;
    padding: 12px 34px 12px 18px;
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cc-marca::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cc-green);
    transition: width .15s;
}
.cc-marca:hover {
    border-color: var(--cc-green);
    box-shadow: var(--cc-shadow);
    transform: translateY(-2px);
}
.cc-marca:hover::before { background: var(--cc-green); width: 5px; }

/* Punta de flecha, sin icono de coche */
.cc-marca::after {
    content: ""; position: absolute; right: 16px; top: 50%;
    width: 6px; height: 6px; margin-top: -4px;
    border-right: 2px solid #c3c8d0; border-bottom: 2px solid #c3c8d0;
    transform: rotate(-45deg);
    transition: border-color .15s, right .15s;
}
.cc-marca:hover::after { border-color: var(--cc-green); right: 13px; }

.cc-marca-nombre {
    display: block;
    font-size: 15px; font-weight: 650; color: var(--cc-ink);
    line-height: 1.25; letter-spacing: -.01em;
}
.cc-marca:hover .cc-marca-nombre { color: var(--cc-green-dk); }
.cc-marca-meta {
    display: block; margin-top: 3px;
    font-size: 11.5px; color: var(--cc-ink3);
}

.cc-marca-oculta { display: none; }
.cc-marcas-abierta .cc-marca-oculta { display: flex; }

.cc-marcas-toggle { display: flex; justify-content: center; margin-top: 22px; }

/* ══════════════════════════════════════════════════════════════
   9. PRODUCTOS DESTACADOS
   ══════════════════════════════════════════════════════════════ */
.cc-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.cc-prod-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cc-prod-card:hover {
    border-color: var(--cc-green); box-shadow: var(--cc-shadow); transform: translateY(-2px);
}
.cc-prod-thumb {
    aspect-ratio: 1 / 1; background: #fff; overflow: hidden;
    border-bottom: 1px solid var(--cc-line);
    display: flex; align-items: center; justify-content: center;
}
.cc-prod-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cc-prod-body { padding: 13px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.cc-prod-sku {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cc-ink3); margin-bottom: 5px;
}
.cc-prod-title {
    font-size: 14px; font-weight: 600; color: var(--cc-ink);
    line-height: 1.4; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cc-prod-price {
    margin-top: auto; font-size: 16px; font-weight: 700; color: var(--cc-ink);
}
.cc-prod-price del { font-weight: 400; font-size: 13px; color: var(--cc-ink3); margin-right: 6px; }
.cc-prod-price ins { text-decoration: none; color: var(--cc-green-dk); }
.cc-prod-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--cc-green); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   10. BLOQUE DE TEXTO SEO / FAQ
   ══════════════════════════════════════════════════════════════ */
.cc-prose { max-width: 78ch; }
.cc-prose h2 { margin-top: 1.9em; }
.cc-prose h2:first-child { margin-top: 0; }
.cc-prose h3 { margin-top: 1.5em; font-size: 1.05rem; }
.cc-prose ul { padding-left: 1.15em; }
.cc-prose li { margin-bottom: .4em; }

.cc-cols-2 { columns: 2; column-gap: 48px; }
.cc-cols-2 > * { break-inside: avoid; }

/* Bloques de texto de la portada en tres columnas: en una sola, el
   texto se quedaba pegado a la izquierda con media pantalla vacía. */
.cc-prose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.cc-prose-col { padding-top: 20px; border-top: 2px solid var(--cc-line); }
.cc-prose-col:first-child { border-top-color: var(--cc-green); }
.cc-prose-num {
    display: block; margin-bottom: 10px;
    font-size: 12px; font-weight: 800; letter-spacing: .1em;
    color: var(--cc-green);
}
.cc-prose-col h3 { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.3; }
.cc-prose-col p { font-size: 14.5px; line-height: 1.7; }
.cc-prose-col p:last-child { margin-bottom: 0; }

.cc-faq { display: grid; gap: 10px; }
.cc-faq details {
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); overflow: hidden;
}
.cc-faq details[open] { border-color: var(--cc-green); }
.cc-faq summary {
    cursor: pointer; list-style: none; padding: 16px 48px 16px 18px;
    font-size: 15px; font-weight: 600; color: var(--cc-ink); position: relative;
}
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after {
    content: ""; position: absolute; right: 20px; top: 50%;
    width: 9px; height: 9px; margin-top: -6px;
    border-right: 2px solid var(--cc-green); border-bottom: 2px solid var(--cc-green);
    transform: rotate(45deg); transition: transform .2s;
}
.cc-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cc-faq .cc-faq-body { padding: 0 18px 18px; font-size: 14.5px; color: var(--cc-ink2); }
.cc-faq .cc-faq-body p:last-child { margin-bottom: 0; }

/* Franja CTA */
.cc-cta {
    background: linear-gradient(120deg, #0f1013 0%, #17462a 130%);
    color: rgba(255,255,255,.72); border-radius: var(--cc-radius);
    padding: 36px 40px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
}
.cc-cta h2 { color: #fff; margin: 0 0 6px; }
.cc-cta p { margin: 0; font-size: 14.5px; max-width: 60ch; }
.cc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   11. PÁGINAS INTERNAS
   ══════════════════════════════════════════════════════════════ */
.cc-pagehead {
    background: #fff; border-bottom: 1px solid var(--cc-line);
    padding: 30px 0 26px;
}
.cc-pagehead h1 { margin: 0; }
.cc-pagehead p { margin: 8px 0 0; color: var(--cc-ink3); font-size: 14.5px; max-width: 70ch; }

.cc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--cc-ink3); margin-bottom: 12px;
}
.cc-crumbs a { color: var(--cc-ink3); }
.cc-crumbs a:hover { color: var(--cc-green-dk); }
.cc-crumbs span[aria-hidden] { opacity: .5; }

.cc-page-body { padding: 40px 0 64px; }
.cc-card-panel {
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); padding: 34px 38px;
}
.cc-card-panel > :last-child { margin-bottom: 0; }

.cc-entry img { border-radius: var(--cc-radius-sm); }
.cc-entry table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
.cc-entry th, .cc-entry td { border: 1px solid var(--cc-line); padding: 9px 12px; text-align: left; }
.cc-entry th { background: #f7f8fa; font-weight: 600; color: var(--cc-ink); }
.cc-entry blockquote {
    margin: 1.4em 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--cc-green); color: var(--cc-ink3); font-style: italic;
}

.cc-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.cc-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: #fff; color: var(--cc-ink); font-size: 14px; font-weight: 600;
}
.cc-pagination .page-numbers:hover { border-color: var(--cc-green); color: var(--cc-green-dk); }
.cc-pagination .page-numbers.current { background: var(--cc-green); border-color: var(--cc-green); color: #fff; }

/* 404 y búsqueda vacía */
.cc-empty { text-align: center; padding: 60px 20px; }
.cc-empty svg { width: 64px; height: 64px; fill: #c9ced8; margin: 0 auto 18px; }
.cc-empty h1, .cc-empty h2 { margin-bottom: 10px; }
.cc-empty p { color: var(--cc-ink3); max-width: 52ch; margin: 0 auto 22px; }

.cc-searchform { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.cc-searchform input[type="search"] {
    flex: 1; padding: 11px 14px; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm); background: #fff; font-size: 14px;
}
.cc-searchform input[type="search"]:focus { outline: none; border-color: var(--cc-green); }

/* ══════════════════════════════════════════════════════════════
   12. FOOTER
   ══════════════════════════════════════════════════════════════ */
.cc-footer {
    background: var(--cc-bg); color: rgba(255,255,255,.55);
    font-size: 13.5px; margin-top: auto;
}
.cc-footer a { color: rgba(255,255,255,.55); }
.cc-footer a:hover { color: #fff; }

.cc-footer-cta {
    background: var(--cc-surface2); border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 26px 0;
}
.cc-footer-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.cc-footer-cta strong { display: block; color: #fff; font-size: 17px; }
.cc-footer-cta span { font-size: 13.5px; }

.cc-footer-main { padding: 48px 0 40px; }
.cc-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.cc-footer-col h3 {
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #fff; margin: 0 0 16px;
}
.cc-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cc-footer-col li { line-height: 1.45; }

.cc-footer-logo img { height: 34px; width: auto; margin-bottom: 16px; }
.cc-footer-about { line-height: 1.7; margin-bottom: 18px; }

.cc-footer-contact { display: grid; gap: 10px; margin-bottom: 18px; }
.cc-footer-contact a { display: flex; align-items: flex-start; gap: 9px; }
.cc-footer-contact svg { width: 15px; height: 15px; fill: var(--cc-green); flex-shrink: 0; margin-top: 3px; }

.cc-footer-social { display: flex; gap: 8px; }
.cc-footer-social a {
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.cc-footer-social a:hover { background: rgba(255,255,255,.14); }
.cc-footer-social svg { width: 15px; height: 15px; }

.cc-footer-razon {
    margin: -8px 0 18px;
    font-size: 12.5px; color: rgba(255,255,255,.4);
}

/* El contacto cierra su columna con aspecto de botón, separado del
   resto de enlaces de la lista. */
.cc-footer-contacto-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 18px; padding: 7px 16px;
    border: 1px solid var(--cc-green); border-radius: var(--cc-radius-sm);
    background: rgba(0,174,66,.12);
    color: #fff !important; font-size: 13.5px; font-weight: 600;
    transition: background .15s, border-color .15s;
}
.cc-footer-contacto-btn:hover { background: var(--cc-green); border-color: var(--cc-green); }
.cc-footer-contacto-btn svg { width: 15px; height: 15px; fill: var(--cc-green); }
.cc-footer-contacto-btn:hover svg { fill: #fff; }

/* Aviso de titularidad de marcas y material de producto */
.cc-footer-ip {
    border-top: 1px solid rgba(255,255,255,.07);
    background: var(--cc-bg2);
    padding: 24px 0;
    font-size: 12px; line-height: 1.7;
    color: rgba(255,255,255,.46);
}
.cc-footer-ip-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) 200px;
    gap: 36px; align-items: center;
}
.cc-footer-ip p { margin: 0 0 10px; }
.cc-footer-ip p:last-child { margin-bottom: 0; }
.cc-footer-ip strong { color: rgba(255,255,255,.72); }

.cc-footer-ip-marca {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 18px 16px;
    border: 1px solid rgba(255,255,255,.10); border-radius: var(--cc-radius);
    background: rgba(255,255,255,.03); text-align: center;
}
.cc-footer-ip-marca img {
    width: auto; height: auto;
    max-width: 155px; max-height: 72px;
    object-fit: contain;
}
.cc-footer-ip-badge {
    font-size: 19px; font-weight: 800; letter-spacing: .1em;
    color: #fff; line-height: 1;
}
.cc-footer-ip-badge sup { font-size: 9px; letter-spacing: 0; }
.cc-footer-ip-pie {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cc-green); font-weight: 600;
}

.cc-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 18px 0; font-size: 12.5px;
}
.cc-footer-bottom-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px 32px; flex-wrap: wrap;
}
.cc-footer-copy { color: rgba(255,255,255,.5); min-width: 0; }
.cc-footer-pay {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; flex-wrap: wrap; opacity: .8;
}
.cc-footer-pay span {
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
    padding: 3px 7px; background: rgba(255,255,255,.05);
}

/* ══════════════════════════════════════════════════════════════
   13. WOOCOMMERCE — ajustes de encaje
   ══════════════════════════════════════════════════════════════ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-radius: var(--cc-radius-sm);
    border-top: 3px solid var(--cc-green);
    background: #fff; box-shadow: var(--cc-shadow);
    padding: 14px 18px 14px 44px; list-style: none;
    margin: 0 0 22px; position: relative; font-size: 14px;
}
.woocommerce-error { border-top-color: #d63638; }
.woocommerce-info { border-top-color: var(--cc-amber); }

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin: 0 0 32px; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important;
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); padding: 14px;
    display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--cc-green); box-shadow: var(--cc-shadow); transform: translateY(-2px);
}
.woocommerce ul.products li.product img { border-radius: var(--cc-radius-sm); margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important; font-weight: 600; color: var(--cc-ink);
    padding: 0 !important; margin: 0 0 8px; line-height: 1.4;
}
.woocommerce ul.products li.product .price {
    color: var(--cc-ink) !important; font-size: 16px !important; font-weight: 700;
    margin: auto 0 12px;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--cc-green-dk); }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
    background: var(--cc-green); color: #fff;
    border-radius: var(--cc-radius-sm); font-size: 13.5px; font-weight: 600;
    padding: 10px 18px; line-height: 1.2;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
    background: var(--cc-green2); color: #fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--cc-green); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--cc-green2); }

.woocommerce span.onsale {
    background: var(--cc-green); border-radius: 4px;
    min-width: auto; min-height: auto; line-height: 1;
    padding: 5px 9px; font-size: 11px; font-weight: 700;
    top: 10px; left: 10px; right: auto; margin: 0;
}

.woocommerce div.product {
    background: #fff; border-radius: var(--cc-radius);
    padding: 28px; border: 1px solid var(--cc-line);
}
.woocommerce div.product .product_title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--cc-ink); font-size: 26px; font-weight: 800;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--cc-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: #f7f8fa; border-color: var(--cc-line);
    border-radius: var(--cc-radius-sm) var(--cc-radius-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce table.shop_table { border-radius: var(--cc-radius); border-color: var(--cc-line); background: #fff; }
.woocommerce .quantity .qty { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); padding: 8px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    padding: 10px 12px; background: #fff;
}
.woocommerce form .form-row input.input-text:focus { outline: none; border-color: var(--cc-green); }

.woocommerce .woocommerce-breadcrumb { display: none; }

/* El botón "Leer más" (producto sin stock) no ofrece ninguna acción útil
   dentro del listado: se oculta y la tarjeta entera hace de enlace. */
.woocommerce ul.products li.product .button.product_type_simple[aria-label*="Lee más"],
a.button.product_type_simple:not(.add_to_cart_button) { display: none !important; }

.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: #fff; min-width: 38px; padding: 9px 12px; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--cc-green); border-color: var(--cc-green); color: #fff;
}

/* Lateral propio del tema (solo si no lo aporta el plugin de filtros) */
.cc-shop-layout { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 28px; align-items: start; }
.cc-shop-layout--full { grid-template-columns: minmax(0,1fr); }
.cc-shop-aside { position: sticky; top: 16px; }

/* ── Plugin "Filtros Tienda" ──────────────────────────────────
   Su rejilla vive dentro de .cc-wrap, así que su padding propio
   sobra: duplicaría el margen lateral de la página. */
.cc-page-body .ft-layout-wrap { padding: 0; gap: 28px; }
@media (max-width: 768px) {
    .cc-page-body .ft-layout-wrap { padding: 0; }
}
.cc-page-body #ft-toggle-mobile { border-radius: var(--cc-radius-sm); }

/* ══════════════════════════════════════════════════════════════
   14. CATÁLOGO A ANCHO COMPLETO
   ══════════════════════════════════════════════════════════════ */

/* Con el lateral de filtros ocupando 260 px, limitar el catálogo a
   1280 deja las tarjetas de producto estrechas. Las vistas de listado
   usan todo el ancho de la ventana. */
.cc-wrap--fluid { max-width: none; padding: 0 32px; }

/* Las columnas se calculan por ancho disponible en vez de por un
   número fijo, para que la rejilla funcione igual en un portátil de
   1280 que en un monitor de 2560. El plugin de filtros fija
   grid-template-columns con !important, de ahí la especificidad. */
.cc-page-body .ft-productos-col ul.products,
.cc-page-body .ft-productos-col ul.products.columns-2,
.cc-page-body .ft-productos-col ul.products.columns-3,
.cc-page-body .ft-productos-col ul.products.columns-4,
.cc-page-body .ft-productos-col ul.products.columns-5,
.cc-page-body .ft-productos-col ul.products:not([class*="columns-"]),
.cc-page-body--catalogo ul.products {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 18px !important;
    /* Todas las filas a la misma altura, no solo las tarjetas de una
       misma fila entre sí: si no, cada fila se ajusta a su contenido y
       la rejilla queda escalonada. */
    grid-auto-rows: 1fr !important;
}

/* ── Barra de resultados y orden ──────────────────────────────── */
.woocommerce .woocommerce-result-count,
.ft-resultado-count {
    float: left;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--cc-ink3);
    line-height: 38px;
}

.woocommerce .woocommerce-ordering { float: right; margin: 0 0 18px; }

.woocommerce .woocommerce-ordering select {
    -webkit-appearance: none; appearance: none;
    height: 38px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236b7280"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px;
    font-size: 13.5px; font-weight: 600; color: var(--cc-ink);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--cc-green); }
.woocommerce .woocommerce-ordering select:focus {
    outline: none; border-color: var(--cc-green);
    box-shadow: 0 0 0 3px rgba(0,174,66,.16);
}

.woocommerce ul.products { clear: both; }

/* ── Tarjeta de producto ──────────────────────────────────────
   Los envoltorios .cc-loop-thumb / .cc-loop-body los repone el tema
   (ver inc/woocommerce.php); son los que permiten cuadrar la altura
   de la foto y alinear precio y botón en todas las tarjetas. */
.woocommerce ul.products li.product {
    padding: 0;
    overflow: hidden;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: block; }

.woocommerce ul.products li.product .cc-loop-thumb {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-bottom: 1px solid var(--cc-line);
    overflow: hidden;
}
.woocommerce ul.products li.product .cc-loop-thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px;
    margin: 0;
    border-radius: 0;
    transition: transform .3s ease;
}
.woocommerce ul.products li.product:hover .cc-loop-thumb img { transform: scale(1.04); }

.woocommerce ul.products li.product .cc-loop-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 13px 15px 15px;
}
.woocommerce ul.products li.product .cc-prod-sku {
    display: block; margin: 0 0 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cc-ink3);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important; font-weight: 650;
    line-height: 1.4; margin: 0 0 12px; padding: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: calc(2 * 1.4em);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--cc-ink); }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--cc-green-dk); }

.woocommerce ul.products li.product .price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    margin: auto 0 12px !important;
    font-size: 17px !important; font-weight: 800;
    color: var(--cc-ink) !important;
}
.woocommerce ul.products li.product .price small,
.woocommerce ul.products li.product .price .tax_label {
    font-size: 11px; font-weight: 500; color: var(--cc-ink3);
}

/* Botón de compra y botón "Consultar" del plugin de stock.
   Los dos plugins los estilan con !important y en mayúsculas: a 214 px
   de tarjeta, "AÑADIR AL CARRITO" se partía en dos líneas y el botón
   quedaba 17 px más alto que el de "Consultar", descuadrando la fila.
   Altura fija, caja y tipografía en minúscula lo resuelven. */
.cc-page-body ul.products li.product .button,
.cc-page-body ul.products li.product a.button,
.cc-page-body ul.products li.product .cs-btn-loop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--cc-radius-sm) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.cc-page-body ul.products li.product .cs-wrap { margin: 0 !important; }

.cc-page-body ul.products li.product .add_to_cart_button,
.cc-page-body ul.products li.product a.add_to_cart_button {
    background: var(--cc-green) !important;
    color: #fff !important;
}
.cc-page-body ul.products li.product .add_to_cart_button:hover,
.cc-page-body ul.products li.product a.add_to_cart_button:hover {
    background: var(--cc-green2) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   15. TARJETAS DE MARCA Y MODELO  (plugin WC Catálogo Fabricantes)
   ══════════════════════════════════════════════════════════════
   El diseño original era un rectángulo verde macizo con un cajetín
   negro y el mismo icono de coche repetido en cada tarjeta. Se retira
   el icono —no aporta nada cuando se repite cincuenta veces— y la
   tarjeta pasa a ser tipográfica, igual que la rejilla de marcas de la
   portada, con un filete verde a la izquierda. */

.wccf-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.wccf-card {
    position: relative;
    height: auto;
    min-height: 58px;
    align-items: center;
    gap: 0;
    padding: 12px 32px 12px 18px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    box-shadow: none;
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wccf-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cc-line);
    transition: background .15s, width .15s;
}
.wccf-card:hover {
    transform: translateY(-2px);
    border-color: var(--cc-green);
    box-shadow: var(--cc-shadow);
}
.wccf-card:hover::before { background: var(--cc-green); width: 5px; }

/* Fuera el icono de coche */
.wccf-card-icon { display: none !important; }

.wccf-card-label { background: transparent; padding: 0; }
.wccf-card-label-text {
    color: var(--cc-ink);
    font-size: .84rem; font-weight: 650;
    letter-spacing: 0; text-transform: none;
}
.wccf-card:hover .wccf-card-label-text { color: var(--cc-green-dk); }

/* Punta de flecha a la derecha, como pista de que la tarjeta navega */
.wccf-card::after {
    content: "";
    flex: 0 0 auto;
    width: 7px; height: 7px;
    margin-left: auto;
    border-right: 2px solid #c3c8d0;
    border-bottom: 2px solid #c3c8d0;
    transform: rotate(-45deg);
    transition: border-color .15s;
}
.wccf-card:hover::after { border-color: var(--cc-green); }

/* Botones "Mostrar más / menos" con aspecto de botón, no de enlace */
.wccf-paginacion-botones { margin-top: 4px; }
.wccf-mostrar-mas,
.wccf-mostrar-menos {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 20px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: #fff; color: var(--cc-ink);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wccf-mostrar-mas:hover,
.wccf-mostrar-menos:hover {
    background: #fff; border-color: var(--cc-green); color: var(--cc-green-dk);
}

.wccf-buscador {
    height: 40px; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm); max-width: 360px;
}
.wccf-buscador:focus { outline: none; border-color: var(--cc-green); }

@media (max-width: 480px) {
    .wccf-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .wccf-card { height: auto; min-height: 52px; padding: 10px 22px 10px 14px; }
    .wccf-card-label { padding: 0; }
    .wccf-card-label-text { font-size: .76rem; letter-spacing: 0; }
    .wccf-card::after { right: 10px; }
    .cc-marcas-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cc-marca { min-height: 58px; padding: 10px 24px 10px 14px; }
    .cc-marca-nombre { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════
   16. CARRITO Y PAGO
   ══════════════════════════════════════════════════════════════ */

/* Los bloques de WooCommerce reparten solos artículos a la izquierda y
   resumen a la derecha, pero necesitan ancho para hacerlo: dentro de
   .cc-prose se quedaban en una columna estrecha. */
.cc-compra { max-width: none; width: 100%; }
.cc-compra .wp-block-woocommerce-cart,
.cc-compra .wp-block-woocommerce-checkout,
.cc-compra .wc-block-cart,
.cc-compra .wc-block-checkout { max-width: none; width: 100%; }

.cc-compra .wc-block-components-sidebar-layout {
    display: flex; align-items: flex-start; gap: 32px;
}
.cc-compra .wc-block-components-main { flex: 1 1 auto; min-width: 0; }
.cc-compra .wc-block-components-sidebar {
    flex: 0 0 380px; max-width: 380px;
    position: sticky; top: 16px;
}

/* Tarjetas blancas para las dos columnas */
.cc-compra .wc-block-components-main,
.cc-compra .wc-block-components-sidebar {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 26px 28px;
}

/* En el carrito, WooCommerce esconde la fila "Subtotal" cuando entre
   ella y el total solo hay impuestos (en el pago sí la muestra). Como
   los artículos van sin IVA, sin esa fila la cifra puede despistar: se
   añade una aclaración fija bajo el título del resumen. */
.cc-compra .wc-block-cart__totals-title::after {
    content: "Los importes de los artículos se muestran sin IVA.";
    display: block;
    margin-top: 6px;
    font-size: 12px; font-weight: 400; line-height: 1.5;
    color: var(--cc-ink3); text-transform: none; letter-spacing: 0;
}

.cc-compra .wc-block-components-totals-item__label { color: var(--cc-ink2); }
.cc-compra .wc-block-components-totals-footer-item { border-top: 1px solid var(--cc-line); }
.cc-compra .wc-block-components-button:not(.is-link) {
    background: var(--cc-green); border-radius: var(--cc-radius-sm);
}
.cc-compra .wc-block-components-button:not(.is-link):hover { background: var(--cc-green2); }

/* Carrito clásico (por si los bloques se sustituyen por shortcodes) */
.cc-compra .woocommerce { display: block; }
.cc-compra .woocommerce-cart-form { float: left; width: calc(100% - 412px); }
.cc-compra .cart-collaterals { float: right; width: 380px; }
.cc-compra .cart-collaterals .cart_totals { width: 100%; float: none; }
.cc-compra::after { content: ""; display: table; clear: both; }

@media (max-width: 1024px) {
    .cc-compra .wc-block-components-sidebar-layout { flex-direction: column; }
    .cc-compra .wc-block-components-sidebar {
        flex: 1 1 auto; max-width: none; width: 100%; position: static;
    }
    .cc-compra .woocommerce-cart-form,
    .cc-compra .cart-collaterals { float: none; width: 100%; }
}

/* Desglose del carrito lateral */
.cc-minicart-nota {
    margin: 0 0 12px; padding: 8px 10px;
    background: #f4f5f7; border-radius: var(--cc-radius-sm);
    font-size: 11.5px; line-height: 1.5; color: var(--cc-ink3);
}
.cc-cart-desglose {
    display: grid; gap: 6px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid #e4e6ea;
}
.cc-cart-linea {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; font-size: 13px; color: #6b7280;
}
.cc-cart-linea span:last-child { color: #14161b; font-weight: 600; white-space: nowrap; }
.cc-cart-sidebar-total small {
    display: block; font-size: 10.5px; font-weight: 500;
    color: #6b7280; letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   17. PÁGINA DE CONTACTO
   ══════════════════════════════════════════════════════════════ */
.cc-contacto-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 28px; align-items: start;
}

.cc-contacto-vias { display: grid; gap: 10px; }

.cc-via {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 16px 18px;
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    transition: border-color .15s, box-shadow .15s;
}
.cc-via:hover { border-color: var(--cc-green); box-shadow: var(--cc-shadow); }
.cc-via--estatica:hover { border-color: var(--cc-line); box-shadow: none; }
.cc-via--destacada { border-color: var(--cc-green); background: #f6fdf8; }
.cc-via svg { width: 20px; height: 20px; fill: var(--cc-green); flex-shrink: 0; margin-top: 2px; }
.cc-via span { display: block; min-width: 0; }
.cc-via strong { display: block; font-size: 14px; color: var(--cc-ink); }
.cc-via em {
    display: block; font-style: normal; font-size: 13.5px;
    color: var(--cc-ink2); word-break: break-word;
}
.cc-via small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--cc-ink3); line-height: 1.5; }

.cc-contacto-nota {
    padding: 16px 18px; border-radius: var(--cc-radius);
    background: #fff7ea; border: 1px solid #f2d9a8;
    font-size: 13.5px; color: #6b4c14;
}
.cc-contacto-nota strong { display: block; margin-bottom: 5px; color: #543a0c; }
.cc-contacto-nota p { margin: 0; line-height: 1.6; }

.cc-contacto-form {
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius); padding: 28px 30px 30px;
}
.cc-contacto-form h2 { margin: 0 0 20px; font-size: 1.3rem; }

.cc-form-row { margin-bottom: 16px; }
.cc-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cc-form-row label { display: block; }
.cc-form-row label > span {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--cc-ink);
}
.cc-form-row label > span small { font-weight: 400; color: var(--cc-ink3); }
.cc-form-row abbr { color: var(--cc-green); text-decoration: none; }
.cc-form-row input,
.cc-form-row textarea {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: #fff; font-size: 14px; color: var(--cc-ink);
    transition: border-color .15s, box-shadow .15s;
}
.cc-form-row textarea { resize: vertical; min-height: 120px; }
.cc-form-row input:focus,
.cc-form-row textarea:focus {
    outline: none; border-color: var(--cc-green);
    box-shadow: 0 0 0 3px rgba(0,174,66,.15);
}

/* Campo trampa antibots: fuera de la vista pero no display:none, que
   algunos bots detectan. */
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cc-form-legal { font-size: 12.5px; color: var(--cc-ink3); margin: 0 0 16px; }

.cc-aviso {
    padding: 13px 16px; border-radius: var(--cc-radius-sm);
    margin-bottom: 20px; font-size: 14px;
    border: 1px solid transparent;
}
.cc-aviso--ok    { background: #eefaf1; border-color: #b6e3c4; color: #14602f; }
.cc-aviso--error { background: #fdefef; border-color: #f0c0c0; color: #8a1f1f; }

/* ══════════════════════════════════════════════════════════════
   18. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cc-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .cc-hero-finder { max-width: 560px; }
    .cc-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .cc-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .cc-shop-layout { grid-template-columns: minmax(0,1fr); }
    .cc-shop-aside { position: static; }
    .cc-prose-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .cc-contacto-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cc-wrap { padding: 0 16px; }
    .cc-wrap--fluid { padding: 0 16px; }
    .cc-section { padding: 40px 0; }
    .cc-hero { padding: 36px 0 42px; }
    .cc-cols-2 { columns: 1; }
    .cc-card-panel { padding: 22px 20px; }
    .cc-cta { padding: 26px 22px; }
    .cc-cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .cc-prod-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
    .cc-page-body .ft-productos-col ul.products,
    .cc-page-body .ft-productos-col ul.products.columns-2,
    .cc-page-body .ft-productos-col ul.products.columns-3,
    .cc-page-body .ft-productos-col ul.products.columns-4,
    .cc-page-body .ft-productos-col ul.products.columns-5,
    .cc-page-body .ft-productos-col ul.products:not([class*="columns-"]),
    .cc-page-body--catalogo ul.products {
        grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)) !important;
        gap: 12px !important;
    }
    .woocommerce .woocommerce-result-count,
    .ft-resultado-count,
    .woocommerce .woocommerce-ordering { float: none; line-height: 1.5; }
    .woocommerce .woocommerce-ordering select { width: 100%; }
    .cc-hero-stats { gap: 20px; }
    .woocommerce div.product { padding: 18px; }
}

@media (max-width: 860px) {
    /* El distintivo de Arnott pasa arriba y a lo ancho: en dos columnas
       estrechas el texto legal quedaba en una tira ilegible. */
    .cc-footer-ip-inner { grid-template-columns: 1fr; gap: 20px; }
    .cc-footer-ip-marca { order: -1; flex-direction: row; justify-content: center; gap: 14px; }
}

@media (max-width: 560px) {
    .cc-footer-grid { grid-template-columns: 1fr; }
    .cc-trust-grid { grid-template-columns: 1fr; }
    .cc-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .cc-footer-pay { margin-left: 0; }
    .cc-prose-grid { grid-template-columns: 1fr; gap: 26px; }
    .cc-form-row--2 { grid-template-columns: 1fr; }
    .cc-contacto-form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   19. DOCUMENTOS LARGOS (legales, condiciones, cookies)

   El texto seguía cabiendo en 78 caracteres —es lo que se lee
   cómodo— pero dentro de una caja de 1280 px eso dejaba media
   pantalla en blanco. La solución no es estirar el párrafo hasta
   el borde, que se lee peor, sino darle compañía: un índice fijo
   a la izquierda que además hacía falta en textos de veinte
   apartados.
   ══════════════════════════════════════════════════════════════ */
.cc-doc {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.cc-doc-cuerpo {
    max-width: none;   /* la columna ya limita el ancho de línea */
    margin: 0;
}

/* ── Índice ── */
.cc-doc-indice {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 6px;
}
.cc-doc-indice h2 {
    margin: 0 0 14px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--cc-ink3);
}
.cc-doc-indice ol {
    list-style: none;
    margin: 0; padding: 0;
    border-left: 1px solid var(--cc-line);
}
.cc-doc-indice li { margin: 0; }
.cc-doc-indice a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 12px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 13px; line-height: 1.45;
    color: var(--cc-ink2);
    transition: color .12s, border-color .12s;
}
.cc-doc-indice a span {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cc-ink3);
}
.cc-doc-indice a:hover,
.cc-doc-indice a:focus-visible {
    color: var(--cc-ink);
    border-left-color: var(--cc-green);
}
.cc-doc-indice a:hover span { color: var(--cc-green); }
.cc-doc-indice .cc-doc-n3 a { padding-left: 26px; font-size: 12.5px; }

/* ── Apartados ── */
.cc-doc-cuerpo .cc-doc-titulo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    /* Hueco para que el ancla no quede pegada al borde superior
       cuando se salta desde el índice. */
    scroll-margin-top: 24px;
}
.cc-doc-cuerpo h2.cc-doc-titulo {
    margin: 2.4em 0 .9em;
    padding-top: 1.1em;
    border-top: 1px solid var(--cc-line);
    font-size: 1.22rem; line-height: 1.3;
}
.cc-doc-cuerpo h2.cc-doc-titulo:first-child,
.cc-doc-cuerpo h3.cc-doc-titulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cc-doc-cuerpo h3.cc-doc-titulo {
    margin: 1.8em 0 .7em;
    font-size: 1.02rem;
}
.cc-doc-num {
    font-variant-numeric: tabular-nums;
    font-size: .78em; font-weight: 700;
    color: var(--cc-green);
}

/* La entradilla en negrita que abre estos textos */
.cc-doc-cuerpo > p:first-child strong {
    font-weight: 600;
}
.cc-doc-cuerpo > p:first-child {
    font-size: 15.5px; line-height: 1.65;
    color: var(--cc-ink2);
}

/* Las citas que usan estas páginas para avisos y plazos */
.cc-doc-cuerpo blockquote,
.cc-prose blockquote {
    margin: 1.3em 0;
    padding: 12px 16px;
    background: #f7f8fa;
    border-left: 3px solid var(--cc-green);
    border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
}
.cc-doc-cuerpo blockquote p:last-child,
.cc-prose blockquote p:last-child { margin-bottom: 0; }

.cc-doc-cuerpo hr,
.cc-prose hr {
    height: 1px; border: 0; margin: 2em 0;
    background: var(--cc-line);
}

.cc-pagehead-fecha {
    margin: 10px 0 0 !important;
    font-size: 13px !important;
    color: var(--cc-ink3);
}

@media (max-width: 1024px) {
    /* Por debajo de mil pixeles el índice no cabe al lado: pasa
       arriba, en horizontal, y deja de ser fijo. */
    .cc-doc { grid-template-columns: 1fr; gap: 24px; }
    .cc-doc-indice {
        position: static; max-height: none; overflow: visible;
        padding: 18px 20px;
        background: #fff;
        border: 1px solid var(--cc-line);
        border-radius: var(--cc-radius);
    }
    .cc-doc-indice ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 0 12px;
        border-left: 0;
    }
    .cc-doc-indice a { padding: 6px 0; margin-left: 0; border-left: 0; }
    .cc-doc-indice a:hover { border-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   20. CUPÓN EN CARRITO Y PAGO

   El campo venía con el estilo de serie de WooCommerce: borde
   fino, foco azul del navegador y un botón verde macizo que no se
   parecía a ningún otro del formulario. Se iguala al resto de
   campos del pago.
   ══════════════════════════════════════════════════════════════ */
.cc-compra .wc-block-components-totals-coupon__form {
    display: flex;
    align-items: stretch;
    /* WooCommerce lo trae con flex-wrap:wrap, y con el input a ancho
       completo el botón se caía a la línea de abajo. */
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}
.cc-compra .wc-block-components-totals-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.cc-compra .wc-block-components-totals-coupon__input input[type="text"] {
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    box-shadow: none;
    font-size: 14.5px;
    color: var(--cc-ink);
}
.cc-compra .wc-block-components-totals-coupon__input input[type="text"]:focus {
    border-color: var(--cc-green);
    /* El anillo azul del navegador chocaba con el verde de la marca. */
    box-shadow: 0 0 0 3px rgba(0, 174, 66, .16);
    outline: none;
}
/* La etiqueta flotante de WooCommerce se recoloca con el nuevo alto. */
.cc-compra .wc-block-components-totals-coupon__input label {
    top: 13px;
    left: 14px;
    font-size: 14.5px;
    color: var(--cc-ink3);
}
.cc-compra .wc-block-components-totals-coupon__input.is-active label {
    top: 4px;
    font-size: 11px;
}
.cc-compra .wc-block-components-totals-coupon__input.is-active input[type="text"] {
    padding-top: 12px;
}
.cc-compra .wc-block-components-button.wc-block-components-totals-coupon__button {
    flex: 0 0 auto;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--cc-ink);
    border-radius: var(--cc-radius-sm);
    /* Aplicar no es la acción principal de la página —lo es pagar—
       así que se queda en botón de contorno y el verde no compite. */
    background: #fff;
    color: var(--cc-ink);
    font-size: 14px; font-weight: 600;
    white-space: nowrap;
}
.cc-compra .wc-block-components-button.wc-block-components-totals-coupon__button:hover:not(:disabled) {
    background: var(--cc-ink);
    color: #fff;
}
.cc-compra .wc-block-components-button.wc-block-components-totals-coupon__button:disabled {
    border-color: var(--cc-line);
    color: var(--cc-ink3);
    opacity: 1;
}
.cc-compra .wc-block-components-panel__button {
    font-size: 14px; font-weight: 600; color: var(--cc-ink);
}
.cc-compra .wc-block-components-totals-coupon .wc-block-components-validation-error {
    margin-top: 8px; font-size: 13px;
}

/* Carrito clásico, por si algún día se vuelve a los shortcodes */
.cc-compra .coupon input[type="text"] {
    height: 46px; padding: 0 14px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
}
.cc-compra .coupon button {
    height: 46px; padding: 0 20px;
    background: #fff; color: var(--cc-ink);
    border: 1px solid var(--cc-ink); border-radius: var(--cc-radius-sm);
    font-weight: 600;
}
.cc-compra .coupon button:hover { background: var(--cc-ink); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   21. FICHA DE PRODUCTO

   Tres columnas: galería, datos de compra y una barra lateral.
   La barra no es relleno decorativo: responde a «¿me vale?»,
   «¿cuándo llega?» y «¿y si no encaja?», que es lo que frena una
   compra de mil euros.
   ══════════════════════════════════════════════════════════════ */
.woocommerce div.product {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 30px 32px 34px;
}

/* La rejilla definitiva está en el apartado 21b: aquí solo queda el
   comportamiento común. */

/* ── Galería ── */
.cc-ficha-galeria { min-width: 0; position: relative; }
.woocommerce div.product .cc-ficha-galeria div.images { width: 100%; float: none; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    background: #fff;
}
.woocommerce div.product .flex-control-thumbs { margin-top: 12px; gap: 8px; display: flex; }
.woocommerce div.product .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product .flex-control-thumbs img {
    width: 74px; height: 74px; object-fit: contain;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    padding: 4px; background: #fff;
    opacity: .62; transition: opacity .15s, border-color .15s;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--cc-green); }

/* ── Columna central ── */
.woocommerce div.product .summary.entry-summary { width: 100%; float: none; margin: 0; min-width: 0; }
.woocommerce div.product .product_title {
    font-size: clamp(1.3rem, 2.1vw, 1.65rem);
    line-height: 1.24; margin: 0 0 14px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.9rem; font-weight: 700; color: var(--cc-ink);
    margin: 0 0 4px; line-height: 1.1;
}
.ccom-nota-iva { margin: 0 0 16px !important; }
.woocommerce div.product .woocommerce-product-details__short-description {
    padding: 14px 16px; margin-bottom: 18px;
    background: #f7f8fa; border-radius: var(--cc-radius-sm);
    font-size: 14.5px; line-height: 1.6; color: var(--cc-ink2);
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce div.product p.stock {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 16px; padding: 5px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
}
.woocommerce div.product p.stock::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.woocommerce div.product p.stock.in-stock { background: #e9f7ee; color: #067a34; }
.woocommerce div.product p.stock.out-of-stock { background: #f4f5f7; color: var(--cc-ink3); }
.woocommerce div.product form.cart { margin-bottom: 22px; }

/* ── Metadatos: Referencia, Pieza, OEM ──
   Antes era una línea corrida donde no se distinguía dónde acababa
   un dato y empezaba el siguiente. */
.cc-meta { display: grid; gap: 10px; }
.cc-meta-caja {
    padding: 12px 14px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    background: #fff;
}
.cc-meta-et {
    display: block; margin-bottom: 5px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--cc-ink3);
}
.cc-meta-caja--ref { border-left: 3px solid var(--cc-green); }
.cc-meta-ref {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.12rem; font-weight: 700; letter-spacing: .02em;
    color: var(--cc-ink);
}
.cc-meta-val { font-size: 14.5px; font-weight: 600; }
.cc-meta-val a { color: var(--cc-ink); }
.cc-meta-val a:hover { color: var(--cc-green); }

.cc-meta-oem { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-meta-oem a {
    padding: 4px 9px;
    background: #f4f5f7;
    border: 1px solid var(--cc-line);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px; color: var(--cc-ink2);
    transition: background .12s, color .12s, border-color .12s;
}
.cc-meta-oem a:hover { background: var(--cc-ink); border-color: var(--cc-ink); color: #fff; }
.cc-meta-pie {
    margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--cc-ink3);
}

/* ── Barra lateral ── */
.cc-ficha-lateral { display: grid; gap: 12px; min-width: 0; }
.cc-fl-caja {
    padding: 16px 17px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    background: #fff;
}
.cc-fl-caja--ayuda { background: var(--cc-bg); border-color: var(--cc-bg); }
.cc-fl-caja--ayuda .cc-fl-titulo { color: #fff; }
.cc-fl-caja--ayuda .cc-fl-texto { color: rgba(255,255,255,.66); }
.cc-fl-titulo {
    margin: 0 0 12px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink);
}
.cc-fl-texto { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--cc-ink2); }
.cc-fl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.cc-fl-lista li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; }
.cc-fl-lista svg { width: 16px; height: 16px; fill: var(--cc-green); margin-top: 2px; }
.cc-fl-lista b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cc-fl-lista span { display: block; font-size: 12px; line-height: 1.45; color: var(--cc-ink3); }

.cc-fl-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 7px;
    border: 1px solid rgba(255,255,255,.2); border-radius: var(--cc-radius-sm);
    font-size: 13px; font-weight: 600; color: #fff;
    transition: background .15s;
}
.cc-fl-btn:last-child { margin-bottom: 0; }
.cc-fl-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.cc-fl-btn svg { width: 15px; height: 15px; fill: currentColor; }
.cc-fl-btn--wa { background: #25d366; border-color: #25d366; }
.cc-fl-btn--wa:hover { background: #1fba57; }

.cc-fl-pagos { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-fl-pagos span {
    padding: 4px 8px; background: #f4f5f7;
    border: 1px solid var(--cc-line); border-radius: 4px;
    font-size: 11px; font-weight: 600; color: var(--cc-ink2);
}

/* ── Pestañas ── */
.woocommerce div.product .woocommerce-tabs { margin-top: 38px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex; flex-wrap: wrap; gap: 2px;
    border-bottom: 1px solid var(--cc-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0; padding: 0; background: transparent;
    border: 0; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block; padding: 11px 18px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 14px; font-weight: 600; color: var(--cc-ink3);
    transition: color .12s, border-color .12s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--cc-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--cc-ink); border-bottom-color: var(--cc-green);
}
.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0; padding: 26px 0 0; border: 0;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* ── Ficha técnica ──
   Ocho filas de dos palabras estiradas sobre una tabla de 1.200 px
   eran más hueco que dato. En rejilla se lee de un vistazo. */
.cc-tecnica {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
/* Tarjetas sueltas y no una rejilla con filetes de 1 px: cuando la
   última fila queda incompleta, el truco del gap de color deja celdas
   fantasma grises donde no hay dato. */
.cc-tecnica-dato {
    padding: 12px 15px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
}
.cc-tecnica-et {
    display: block; margin-bottom: 3px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--cc-ink3);
}
.cc-tecnica-val { font-size: 14.5px; font-weight: 600; color: var(--cc-ink); }
.cc-tecnica-nota {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 16px 0 0; padding: 12px 14px;
    background: #f7f8fa; border-radius: var(--cc-radius-sm);
    font-size: 13px; line-height: 1.55; color: var(--cc-ink2);
}
.cc-tecnica-nota svg { width: 16px; height: 16px; fill: var(--cc-ink3); flex-shrink: 0; margin-top: 2px; }

/* ── Opiniones ── */
.woocommerce #reviews #comments { padding: 0; }
.woocommerce #reviews h2.woocommerce-Reviews-title { display: none; }
.woocommerce p.woocommerce-noreviews {
    margin: 0 0 22px; padding: 14px 16px;
    background: #f7f8fa; border-radius: var(--cc-radius-sm);
    font-size: 14px; color: var(--cc-ink2);
}
.woocommerce #reviews #comments ol.commentlist { padding: 0; margin: 0 0 26px; }
.woocommerce #reviews #comments ol.commentlist li {
    margin-bottom: 12px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
    position: static; float: left; width: 38px; height: 38px;
    margin: 0 12px 0 0; padding: 0; border: 0; border-radius: 50%;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0; padding: 0; border: 0;
}
.woocommerce #reviews #comments ol.commentlist li .meta { font-size: 13px; color: var(--cc-ink3); }

.cc-op-titulo { margin: 0 0 8px; font-size: 1.15rem; }
.cc-op-intro {
    max-width: 62ch; margin: 0 0 20px;
    font-size: 14px; line-height: 1.6; color: var(--cc-ink2);
}
.woocommerce #review_form #respond { max-width: 640px; }
.woocommerce #review_form #respond p { margin: 0 0 14px; }
.woocommerce #review_form #respond label {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--cc-ink2);
}
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    font-family: inherit; font-size: 14.5px; color: var(--cc-ink);
    background: #fff; box-shadow: none;
}
.woocommerce #review_form #respond input:focus,
.woocommerce #review_form #respond textarea:focus {
    border-color: var(--cc-green);
    box-shadow: 0 0 0 3px rgba(0,174,66,.16);
    outline: none;
}
.woocommerce #review_form #respond textarea { min-height: 110px; resize: vertical; }
.woocommerce #review_form #respond .comment-form-rating { margin-bottom: 16px; }
.woocommerce p.stars a { color: var(--cc-green); }
.woocommerce #respond input#submit.cc-op-enviar,
.woocommerce #review_form #respond .form-submit input[type="submit"] {
    background: var(--cc-green); color: #fff;
    padding: 11px 22px; border-radius: var(--cc-radius-sm);
    font-size: 14px; font-weight: 700; border: 0;
}
.woocommerce #respond input#submit.cc-op-enviar:hover,
.woocommerce #review_form #respond .form-submit input[type="submit"]:hover { background: var(--cc-green2); }
.woocommerce #review_form #respond .comment-form-cookies-consent label {
    display: inline; font-weight: 400; font-size: 13px;
}

/* ── Relacionados ── */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { margin-top: 42px; }
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
    font-size: 1.25rem; margin: 0 0 18px;
    padding-bottom: 12px; border-bottom: 1px solid var(--cc-line);
}

@media (max-width: 780px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 13px; font-size: 13px; }
    .cc-tecnica { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Valores largos (Modelo suele traer veinte versiones): fila entera. */
.cc-tecnica-dato--ancho { grid-column: 1 / -1; }
.cc-tecnica-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cc-tecnica-chips span {
    padding: 3px 8px;
    background: #f4f5f7;
    border: 1px solid var(--cc-line);
    border-radius: 4px;
    font-size: 12px; font-weight: 500; color: var(--cc-ink2);
}

/* Opiniones a dos columnas: el formulario no llena solo el ancho de la
   pestaña, y estirarlo haría los campos ilegibles. */
.cc-op {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 34px;
    align-items: start;
}
.cc-op-principal { min-width: 0; }
.cc-op-lado { display: grid; gap: 12px; }
.cc-op-caja {
    padding: 15px 17px;
    background: #f7f8fa;
    border-radius: var(--cc-radius-sm);
}
.cc-op-caja h3 {
    margin: 0 0 7px; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--cc-ink);
}
.cc-op-caja p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cc-ink2); }
.cc-op-caja a {
    display: inline-block; margin-top: 8px;
    font-size: 13px; font-weight: 600; color: var(--cc-green);
}

@media (max-width: 900px) {
    .cc-op { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cc-op-lado { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* La galería siempre visible.

   WooCommerce la sirve con opacity:0 en el atributo style y la enciende
   desde JavaScript al terminar de montar el carrusel. Si ese script
   falla —un bloqueador, un error de otro plugin, la pestaña en segundo
   plano mientras corre la transición— la foto del producto no aparece
   nunca. En una tienda de recambios la foto es el producto, así que
   vale más perder el fundido de 250 ms que arriesgarse a eso. */
.woocommerce div.product .woocommerce-product-gallery {
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   21b. FICHA: BLOQUES SEPARADOS

   Antes era una sola caja blanca gigante con todo dentro —galería,
   datos, barra lateral, pestañas y relacionados—, y ahí es donde
   salían los huecos: una caja tiene que estirarse hasta el elemento
   más alto que contenga. Separando en bloques, cada uno ocupa lo
   que necesita y el aire pasa a ser separación entre ellos, que sí
   se lee como intencionado.
   ══════════════════════════════════════════════════════════════ */

/* La caja grande deja de existir. */
.woocommerce div.product {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.cc-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 20px;
    align-items: start;
}

/* Bloque 1: galería y datos de compra, en su propia caja. */
.cc-ficha-principal {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    min-width: 0;
    padding: 26px 28px 28px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
}

/* Bloque 2: la barra lateral, ya suelta. */
.cc-ficha-lateral { position: sticky; top: 16px; }

/* Bloque 3: las pestañas. */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 20px;
    padding: 8px 28px 28px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
}

/* Bloque 4: los relacionados, fuera del resto. */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
    margin-top: 20px;
    padding: 24px 28px 28px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
}

/* El botón de consultar disponibilidad venía del plugin de stock sin
   margen inferior, y la caja de Referencia quedaba pegada a él. */
.cs-wrap-single { margin-bottom: 20px; }

/* Con la columna más estrecha, las cajas de datos se aprietan un poco. */
.cc-meta { gap: 8px; }
.cc-meta-caja { padding: 11px 13px; }

@media (max-width: 1180px) {
    .cc-ficha { grid-template-columns: minmax(0, 1fr); }
    .cc-ficha-lateral {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 860px) {
    .cc-ficha-principal { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 780px) {
    .cc-ficha-principal { padding: 18px; }
    .woocommerce div.product .woocommerce-tabs { padding: 4px 18px 20px; }
    .woocommerce div.product .related.products { padding: 18px; }
}

/* Las referencias OEM ocupan las dos columnas de la caja: en la columna
   de datos, una lista de veinte números se comía seis filas y estiraba
   el bloque muy por debajo de la galería. */
.cc-ficha-principal > .cc-meta-caja--oem {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* Relacionados en móvil: dos columnas.

   La rejilla general del catálogo pide columnas de 220 px como mínimo,
   y en un móvil de 375 px solo cabe una. Aquí se fija el número de
   columnas en vez del ancho mínimo: cuatro productos en una sola
   columna obligan a bajar media pantalla para verlos. */
@media (max-width: 780px) {
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .upsells.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Separación entre la foto grande y las miniaturas.

   WooCommerce las pega con `.woocommerce div.product div.images
   .flex-control-thumbs { margin: 0 }`, que tiene más especificidad que
   el selector corto y se llevaba el margen por delante. Se le añade
   la etiqueta para ganarle sin recurrir a !important.

   Ojo: flexslider lo pinta como <ol>, no como <ul>. */
.woocommerce div.product div.images ol.flex-control-thumbs {
    margin-top: 14px;
}