/* =============================================
   Central Steel - Component Styles
   ============================================= */

/* ---- Product Card ---- */
.product-card {
    border: 1px solid #e5e7eb;
    will-change: transform;
    transition: transform    0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow   0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: var(--site-color-primary);
    box-shadow: 0 20px 40px rgba(var(--site-color-primary-rgb, 0, 0, 0), 0.15);
}

/* =============================================
   Grilla de productos — tres modos de visualización (ítem 9)
   ---
   La tarjeta es SIEMPRE la misma (templates/product-card.php). Lo único que
   cambia entre modos es el layout, gobernado por la clase `is-{vista}` del
   contenedor contra los ganchos estructurales de la tarjeta:

     .card-media  imagen + overlays      .card-text  sku, nombre, comentario, unidad
     .card-body   contenedor del texto   .card-foot  precio + botón de carrito

   Por eso `.product-card` define acá su `display:flex` en vez de traer
   `flex flex-col` de Tailwind: una utility no se puede pisar desde el
   contenedor sin pelear por especificidad. Estas reglas son (0,2,0) y ganan.
   ============================================= */

.product-card { display: flex; flex-direction: column; }
.card-body    { display: flex; flex-direction: column; flex-grow: 1; }
.card-text    { flex-grow: 1; }

/* ---- Modo tarjetas (default): la grilla de siempre, 1 / 2 / 3 columnas ---- */
.product-grid.is-tarjetas {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .product-grid.is-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .product-grid.is-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Modos filas y lista: una sola columna ---- */
.product-grid.is-filas,
.product-grid.is-lista { display: flex; flex-direction: column; }
.product-grid.is-filas { gap: 1rem; }
.product-grid.is-lista { gap: 0.5rem; }

/* ---- Modo filas: tarjeta horizontal a ancho completo ----
   Sólo desde 640px: en un teléfono la grilla de 1 columna ya ES una fila, y
   meter la imagen al costado dejaría 120px para el nombre. */
@media (min-width: 640px) {
    .product-grid.is-filas .product-card { flex-direction: row; }
    .product-grid.is-filas .card-media   { width: 200px; flex-shrink: 0; }
    .product-grid.is-filas .card-body    { flex-direction: row; align-items: center; gap: 1.5rem; }
    .product-grid.is-filas .card-text    { flex: 1 1 auto; min-width: 0; }
    .product-grid.is-filas .card-foot    {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
        margin-top: 0;
        width: auto;
        flex-shrink: 0;
    }
}

/* ---- Modo lista: fila densa para escanear y reponer ---- */
.product-grid.is-lista .product-card   { flex-direction: row; align-items: center; border-radius: 0.5rem; }
.product-grid.is-lista .card-media     { width: 64px; flex-shrink: 0; }
.product-grid.is-lista .card-media > a { aspect-ratio: auto; height: 64px; }
.product-grid.is-lista .card-media img { padding: 0.25rem; }
/* Badge y pill de categoría son overlays calibrados para una imagen grande:
   sobre una miniatura de 64px la taparían entera. */
.product-grid.is-lista .card-badge,
.product-grid.is-lista .card-cat-pill  { display: none; }
.product-grid.is-lista .card-body      { flex-direction: row; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; }
.product-grid.is-lista .card-text      { flex: 1 1 auto; min-width: 0; }
.product-grid.is-lista .card-divider,
.product-grid.is-lista .card-comentario,
.product-grid.is-lista .card-unidad    { display: none; }
.product-grid.is-lista .card-text h3   { margin-bottom: 0; -webkit-line-clamp: 1; }
.product-grid.is-lista .card-foot      { margin-top: 0; width: auto; min-height: 0; gap: 0.75rem; flex-shrink: 0; }
.product-grid.is-lista .card-price p   { font-size: 0.9375rem; }
/* En una fila densa el salto de 6px al hover se siente un tirón, no una caricia. */
.product-grid.is-lista .product-card:hover { transform: none; box-shadow: none; }
@media (max-width: 479px) {
    .product-grid.is-lista .card-meta { display: none; }
}

/* =============================================
   Barra de controles del listado (templates/product-toolbar.php)
   ============================================= */

.product-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.5rem;
}
.product-toolbar-count        { font-size: 0.8125rem; color: #6b7280; margin-right: auto; }
.product-toolbar-count strong { color: var(--site-color-text); font-weight: 700; }

/* Popover de marcas: <details> nativo, sin JS. */
.product-filter { position: relative; }
.product-filter-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    transition: border-color 0.2s, color 0.2s;
}
.product-filter-trigger::-webkit-details-marker { display: none; }
.product-filter-trigger::marker                 { content: ''; }
.product-filter-trigger:hover,
.product-filter[open] .product-filter-trigger   { border-color: var(--site-color-primary); color: var(--site-color-primary); }
.product-filter-chevron                         { transition: transform 0.2s; }
.product-filter[open] .product-filter-chevron   { transform: rotate(180deg); }
.product-filter-badge {
    background: var(--site-color-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-filter-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 17rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 0.75rem;
}
.product-filter-search {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}
.product-filter-search:focus { outline: none; border-color: var(--site-color-primary); }
.product-filter-list         { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.product-filter-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.25rem;
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
    border-radius: 0.375rem;
}
.product-filter-list label:hover { background: #f9fafb; }
.product-filter-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-filter-count { color: #9ca3af; font-size: 0.75rem; }
.product-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
}
.product-filter-apply {
    background: var(--site-color-primary);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.product-filter-apply:hover { opacity: 0.9; }
.product-filter-clear       { font-size: 0.8125rem; color: #6b7280; }
.product-filter-clear:hover { color: var(--site-color-primary); text-decoration: underline; }

/* Orden */
.product-toolbar-sort       { display: inline-flex; align-items: center; gap: 0.5rem; }
.product-toolbar-sort-label { font-size: 0.8125rem; color: #6b7280; }
.product-toolbar-sort select {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: #374151;
    background: #fff;
}
.product-toolbar-sort select:focus { outline: none; border-color: var(--site-color-primary); }

/* Selector de vista */
.product-view-switch { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
.product-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2rem;
    color: #9ca3af;
    transition: background-color 0.2s, color 0.2s;
}
.product-view-btn + .product-view-btn { border-left: 1px solid #e5e7eb; }
.product-view-btn:hover               { color: var(--site-color-primary); background: #f9fafb; }
.product-view-btn.is-active           { background: var(--site-color-primary); color: #fff; }

/* Chips de filtros activos */
.product-active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.75rem 0 1.25rem; }
.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}
.product-chip:hover { background: var(--site-color-primary); color: #fff; }

@media (max-width: 639px) {
    .product-toolbar-count   { width: 100%; margin-right: 0; }
    .product-filter,
    .product-toolbar-sort    { flex: 1 1 auto; }
    .product-filter-trigger  { width: 100%; justify-content: space-between; }
    .product-filter-panel    { left: 0; right: 0; width: auto; }
    .product-toolbar-sort select { flex: 1 1 auto; min-width: 0; }
}

/* ---- Cart Sidebar ---- */
#cart-sidebar.open {
    transform: translateX(0);
}

/* Cart item in sidebar */
.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.cart-item-info {
    flex: 1;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cart-item-qty button {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.2s;
}

.cart-item-qty button:hover {
    border-color: var(--site-color-primary);
    color: var(--site-color-primary);
}

.cart-item-qty span {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

/* ---- Search suggestions ---- */
#search-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

#search-suggestions .suggestion-item:hover {
    background-color: #f5f5f5;
}

#search-suggestions .suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #f9fafb;
}

/* ---- Image Gallery ---- */
.gallery-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 4px;
    background: white;
    transition: border-color 0.2s;
}

.gallery-thumbs img:hover,
.gallery-thumbs img.active {
    border-color: var(--site-color-primary);
}

/* ---- Flash messages ---- */
.flash-message {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.flash-message.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.flash-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.flash-message.info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ---- Formulario de contacto reusable (templates/contact-form.php) ----
   Estilos de input + texto apagado. El wrapper visual (tarjeta, banda de color)
   lo provee cada consumer (contacto.php, home.php, etc). */
.contact-input {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--site-color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    outline: none;
    transition: box-shadow 0.2s;
}
.contact-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--site-color-primary-rgb), 0.18);
}
.contact-input::placeholder {
    color: #9ca3af;
}
.contact-muted {
    color: var(--site-color-text);
    opacity: 0.6;
}

/* ---- Bloque "Hablemos." (home) ----
   Banda con form de contacto que vive después de Marcas. Todos los colores y el
   tamaño del título salen de CSS vars seteadas por el theme — el operador los
   ajusta desde Configuración → Diseño → "Sección de contacto". */
.contact-section {
    background-color: var(--site-contact-bg, #E2EBF4);
}
.contact-section-pretitle {
    color: var(--site-contact-text-color, var(--site-color-text));
    opacity: 0.75;
}
.contact-section-title {
    color: var(--site-contact-title-color, var(--site-color-primary));
    /* clamp: en mobile no baja de 1.875rem (30px); en desktop respeta el size del
       slider con tope absoluto de 72px (que es el max del slider en el admin). */
    font-size: clamp(1.875rem, 5vw, var(--site-contact-title-size, 36px));
    line-height: 1.15;
}
.contact-section-text {
    color: var(--site-contact-text-color, var(--site-color-text));
}

/* ---- Spec cards (ficha técnica del producto) ----
   Grid modular: cada spec en su propia mini-card con ícono inferido por
   keyword (ver spec_icon_for_key en includes/functions.php). El consumer
   arma el grid responsive con clases Tailwind. */
.spec-card {
    /* Fondo: color primary del tema al 5% (95% transparente) — apenas
       perceptible, da una tinta de marca sin pesar visualmente. */
    background: rgba(var(--site-color-primary-rgb), 0.05);
    border: 1px solid #f0f0f0;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.spec-card:hover {
    border-color: var(--site-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.spec-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(var(--site-color-primary-rgb), 0.08);
    color: var(--site-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
}
.spec-card-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0 0 0.125rem 0;
    line-height: 1.3;
}
.spec-card-value {
    font-size: 0.95rem;
    font-weight: 400;
    color: #111827;
    line-height: 1.35;
    word-break: break-word;
    margin: 0;
}

/* ---- Order Status Badge ---- */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.pendiente { background: #fef3c7; color: #92400e; }
.status-badge.confirmado { background: #dbeafe; color: #1e40af; }
.status-badge.en_preparacion { background: #e0e7ff; color: #3730a3; }
.status-badge.enviado { background: #d1fae5; color: #065f46; }
.status-badge.entregado { background: #f0fdf4; color: #166534; }
.status-badge.cancelado { background: #fef2f2; color: #991b1b; }

/* =============================================
   Social Carousel (compartido por Instagram y YouTube)
   ---
   Patrón: track horizontal con scroll-snap, flechas prev/next en los extremos
   y dots como indicador secundario. Cantidad de cards visibles responsive:
     - mobile (<640px):     1 card (peek mínimo de la siguiente)
     - sm (640px+):         2 cards
     - md (768px+):         3 cards
     - lg (1024px+):        4 cards
   Gap consistente de 1.25rem entre cards.
   ============================================= */
.social-carousel {
    position: relative;
}

.social-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* NO agregar `scroll-behavior: smooth` acá.
       El desplazamiento lo anima assets/js/social-carousel.js con RAF, y esa
       regla lo rompía: con scroll-behavior suave, asignar `scrollLeft` dispara
       la animación NATIVA del browser en vez de saltar, así que el valor que el
       JS lee de vuelta no es el que acababa de setear. Eso disparaba su guard
       de "el usuario intervino", abortaba la animación a los pocos píxeles y
       restauraba el scroll-snap, que rebotaba la tarjeta a su posición original.
       Síntoma: había que clickear la flecha varias veces para pasar una imagen
       (ítems 14 y 15 del documento de cambios). El JS además fuerza
       scroll-behavior:auto mientras anima, por si la regla vuelve. */
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 1rem;  /* 10px arriba: absorbe el hover-lift más alto del sitio (product-card: translateY(-6px) + border 1px). */
    scrollbar-width: none;
}
.social-track::-webkit-scrollbar { display: none; }

.social-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    /* Ancho responsive: 1 / 2 / 3 / 4 cards visibles según viewport */
    width: calc(100% - 3rem);                    /* mobile: 1 con peek de la siguiente */
}
@media (min-width: 640px) {
    .social-card { width: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 768px) {
    .social-card { width: calc((100% - 2.5rem)  / 3); }
}
@media (min-width: 1024px) {
    .social-card { width: calc((100% - 3.75rem) / 4); }
}

/* Flechas de navegación */
.social-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    z-index: 5;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 1;
}
.social-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
}
.social-arrow.is-prev { left: -22px; }
.social-arrow.is-next { right: -22px; }
.social-arrow[disabled],
.social-arrow.is-disabled {
    /* Atenuada, no invisible. Con opacity:0 la flecha del extremo desaparecía y
       el visitante no distinguía "llegué al final" de "el botón no anda" — que
       es justo la queja que originó los ítems 14 y 15. Para volver al
       comportamiento anterior, poner 0 acá. */
    opacity: 0.25;
    pointer-events: none;
}
/* En viewports muy chicos las flechas estorban — solo dots en mobile */
@media (max-width: 639px) {
    .social-arrow { display: none; }
}

/* Dots como indicador secundario */
.social-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.social-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #d1d5db;
    transition: background-color 0.25s ease, width 0.25s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.social-dot.is-active {
    width: 1.5rem;
    background: #1f2937;
}
@media (min-width: 768px) {
    .social-dots { display: none; }
}

/* =============================================
   Instagram Feed (specifics: ratio + ig-tinted accents)
   ============================================= */
.ig-feed .ig-media {
    aspect-ratio: 1 / 1;
}

/* =============================================
   YouTube Feed (specifics: red-tinted dots when active)
   ============================================= */
.yt-feed .social-dot.is-active {
    background: #dc2626;
}
.yt-feed .yt-card iframe {
    display: block;
}

/* =============================================
   Pretty Scroll — barra de scroll fina, tintada con el color primario del
   sitio y con fallback gris si la variable no está cargada. Aplicable a
   cualquier contenedor con overflow vertical. DRY.
   ============================================= */
.pretty-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.35) transparent;
}
.pretty-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.pretty-scroll::-webkit-scrollbar-track { background: transparent; }
.pretty-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.35);
    border-radius: 3px;
    transition: background-color .2s ease;
}
.pretty-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.7);
}

/* =============================================
   Sidebar de Categorías (usado en pages/productos.php y pages/categoria.php
   vía templates/category-sidebar.php).
   ---
   Desktop (lg+): sticky al viewport. El elemento que scrollea es
   `.category-sidebar-inner` — `max-height` y `overflow-y:auto` viven ahí
   directamente para evitar la cadena flex de 3 niveles (que se rompe en el
   wrapper collapsible — su `max-height:none` rompe la propagación).

   El gradient overlay del fondo (::after) da feedback visual de "hay más
   contenido abajo". Es pointer-events:none para no interferir con clicks
   sobre los últimos ítems. Se atenúa con el modificador .is-scrolled-end
   (lo setea el template cuando el scroll llegó al final).

   Mobile (<lg): se renderiza colapsado por default con un toggle "Categorías".
   La animación de altura usa max-height para mantenerla CSS-only.
   ============================================= */
.category-sidebar-toggle { display: flex; }     /* visible en mobile */

@media (min-width: 1024px) {
    .category-sidebar {
        position: sticky;
        /* top alineado con el navbar scrolled (4rem = 64px en base.css) + 1rem
           de breathing room. Sin esto, los primeros ítems del árbol quedan
           tapados por el navbar sticky (z:50) al scrollear. */
        top: 5rem;
        align-self: flex-start;
    }
    .category-sidebar-toggle { display: none; }
    .category-sidebar-collapsible {
        max-height: none !important;
        overflow: visible;
    }
    .category-sidebar-inner {
        /* viewport menos top (5rem) menos margen al pie (1.5rem) */
        max-height: calc(100vh - 6.5rem);
    }
}

.category-sidebar-collapsible {
    /* Mobile: animación de despliegue. La altura máxima alcanza con cubrir
       el contenido razonable de categorías (suficiente para cualquier árbol).
       En desktop la regla de arriba la neutraliza. */
    overflow: hidden;
    transition: max-height .3s ease;
}
.category-sidebar-collapsible.is-collapsed { max-height: 0; }
.category-sidebar-collapsible.is-expanded  { max-height: 2000px; }

.category-sidebar-inner {
    position: relative;
    overflow-y: auto;
    padding-right: 6px;     /* respiro para que el scroll no tape texto */
}
.category-sidebar-inner::after {
    /* Fade gradient al pie — indica visualmente "hay más abajo". Solo en
       desktop (donde tiene altura limitada); en mobile colapsable molesta. */
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2rem;
    margin-top: -2rem;
    background: linear-gradient(to bottom, transparent, var(--site-color-bg, #ffffff));
    pointer-events: none;
    transition: opacity .25s ease;
}
.category-sidebar-inner.is-scrolled-end::after { opacity: 0; }
@media (max-width: 1023px) {
    .category-sidebar-inner::after { display: none; }
}

/* ---- Aviso de precios con sesión (templates/price-login-notice.php) ----
   Franja de una línea con tinte de marca: es un mensaje, no una advertencia.
   En pantallas angostas el link baja a su propia línea. */
.price-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    background: rgba(var(--site-color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--site-color-primary-rgb), 0.15);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
}
.price-notice-icon {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9999px;
    background: rgba(var(--site-color-primary-rgb), 0.12);
    color: var(--site-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.price-notice-text {
    flex: 1;
    min-width: 10rem;
    margin: 0;
    font-size: 0.875rem;
    color: #1f2937;
}
.price-notice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--site-color-primary);
    white-space: nowrap;
}
.price-notice-link:hover { text-decoration: underline; }
.price-notice-link svg { transition: transform 0.2s; }
.price-notice-link:hover svg { transform: translateX(2px); }