body { font-family: var(--bcc-font-sans); color: var(--bcc-foreground); background-color: var(--bcc-background); font-size: var(--bcc-text-base); line-height: 1.6; }
h1,h2,h3,h4 { font-family: var(--bcc-font-serif); color: var(--bcc-brand-teal); font-weight: 600; line-height: 1.2; }
/* Excepciones: headings que usan DM Sans según Lovable */
.bcc-cat-header__title,
.bcc-cat-section__title { font-family: var(--bcc-font-sans) !important; }
/* El color del título de categoría animal viene del PHP inline style — no sobreescribir */
.bcc-cat-header__title { color: unset !important; }
/* El título del PDP: base sky-900, el keyword conserva su color inline de categoría */
.bcc-pdp-summary__title-before { color: #0c4a6e !important; }
a { color: var(--bcc-brand-teal); } a:hover { color: var(--bcc-cta); }
.bcc-btn-cta { display:inline-flex;align-items:center;gap:.5rem;background-color:var(--bcc-cta);color:#fff;border-radius:var(--bcc-radius-pill);font-family:var(--bcc-font-sans);font-weight:600;padding:.75rem 1.5rem;text-decoration:none;border:none;cursor:pointer;transition:background-color .2s; }
.bcc-btn-cta:hover { background-color:var(--bcc-cta-hover);color:#fff; }
.bcc-btn-conseil { display:inline-flex;align-items:center;gap:.5rem;background-color:var(--bcc-conseil);color:#fff;border-radius:var(--bcc-radius-pill);font-family:var(--bcc-font-sans);font-weight:600;padding:.75rem 1.5rem;text-decoration:none;transition:background-color .2s; }
.bcc-btn-conseil:hover { background-color:var(--bcc-conseil-hover);color:#fff; }
.home .page-title,.home .entry-title,.home .site-main>article>header { display:none!important; }
.elementor-page .entry-content { padding:0!important;max-width:none!important; }
.bcc-avis-badge { position:fixed;bottom:0.75rem;right:0.75rem;z-index:9999;width:56px;height:56px;transition:transform 0.2s;display:block; }
.bcc-avis-badge:hover { transform:scale(1.1); }
.bcc-avis-badge img { width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));object-fit:cover; }
@media (min-width:640px) { .bcc-avis-badge { width:72px;height:72px; } }
@media (min-width:768px) { .bcc-avis-badge { width:80px;height:80px; } }
.bcc-breadcrumb { font-size:var(--bcc-text-sm);color:var(--bcc-muted-foreground);padding:.75rem 0; }
.bcc-breadcrumb a { color:var(--bcc-brand-teal); }
.bcc-breadcrumb-sep { margin:0 .4rem;opacity:.4; }
.bcc-section-heading { text-align:center;padding:var(--bcc-space-12) var(--bcc-space-6) var(--bcc-space-6);background-color:var(--bcc-background); }
.bcc-section-heading__eyebrow { display:block;font-size:var(--bcc-text-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--bcc-muted-foreground);margin-bottom:var(--bcc-space-3); }
.bcc-section-heading__title { font-family:var(--bcc-font-serif);font-size:clamp(1.75rem,3vw,2.5rem);color:var(--bcc-brand-teal);margin:0 0 var(--bcc-space-3); }
.bcc-section-heading__subtitle { font-size:var(--bcc-text-base);color:var(--bcc-muted-foreground);max-width:60ch;margin:0 auto; }

/* -- CONTAINER ---------------------------------- */
.container {
  width: 100%;
  max-width: var(--bcc-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}
/* -- Toast global (v2.3.38.1) -- movido aqui desde woocommerce-catalogue.css
   porque ese archivo solo carga en tienda/categoria, y el toast se usa en
   TODO el sitio (wishlist + confirmacion de "anadido al carrito"), incluida
   la ficha de producto individual. main.css carga sin condicion en todas
   las paginas, asi que aqui si funciona de forma consistente siempre. */
.bcc-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    z-index: 9999;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    font-family: var(--bcc-font-sans, 'DM Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.bcc-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.bcc-toast--success { background: #188A81; }
.bcc-toast--info    { background: #6b7280; }

/* En pantallas de escritorio, el toast se ve mas amigable arriba a la
   derecha (patron habitual de notificaciones web) en vez de abajo al
   centro. Se ubica DEBAJO de todo el header/nav (no pegado al borde
   superior) -- las notificaciones flotantes deben alejarse de la zona
   de navegacion, no superponerse a ella. Usa la misma variable
   --bcc-header-height ya establecida en hero.css (fallback 140px). */
@media (min-width: 900px) {
    .bcc-toast {
        bottom: auto;
        left: auto;
        top: calc(var(--bcc-header-height, 140px) + 1rem);
        right: 1.5rem;
        transform: translateY(-0.5rem);
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .bcc-toast--visible {
        transform: translateY(0);
    }
}