/* ─── RESET & BASE ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: 'Montserrat', sans-serif; color: #393737; background: #fff; overflow-x: hidden; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; }
    select { font-family: inherit; }

    /* ─── CSS VARIABLES ─── */
    :root {
      --gold-dark:  #c9a227;
      --gold-mid:   #d4aa2e;
      --gold-light: #e8d48b;
      --gold-gradient: linear-gradient(135deg, #c9a227, #e8d48b, #c9a227);
      --charcoal: #393737;
      --silver: #C4CBCA;
      --pink-soft: #FADFE9;
      --cream: #F0E9E9;
      --white: #FFFFFF;
    }

    /* ─── UTILITIES ─── */
    .gold-divider { height: 1px; background: linear-gradient(90deg, transparent, #c9a227, #e8d48b, #c9a227, transparent); border: none; margin: 0; }
    .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }
    .fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .fade-in-left.visible { opacity: 1; transform: translateX(0); }

    /* ─── BUTTONS ─── */
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--charcoal); color: white;
      padding: 14px 32px; font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase;
      transition: background 0.3s, transform 0.2s;
    }
    .btn-primary:hover { background: var(--gold-gradient); color: var(--charcoal); transform: translateY(-1px); }
    .btn-outline {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1.5px solid var(--charcoal); color: var(--charcoal);
      padding: 13px 32px; font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s;
    }
    .btn-outline:hover { background: var(--charcoal); color: white; }

    
    /* ─── CATEGORY HERO ─── */
    /*
      WooCommerce: term_description() para la descripción,
      get_term_meta($term->term_id, 'thumbnail_id', true) para la imagen de cabecera.
      Se recomienda el plugin WooCommerce Category Image o Advanced Custom Fields.
    */
    .cat-hero {
      position: relative; overflow: hidden;
      min-height: 320px; display: flex; align-items: flex-end;
      background: var(--charcoal);
    }
    .cat-hero-bg {
      position: absolute; inset: 0;
      /* WooCommerce: reemplazar con la imagen de la categoría */
      background: linear-gradient(135deg, #2a2828 0%, #4a4040 50%, #2a2828 100%);
      background-size: cover; background-position: center;
    }
    .cat-hero-bg img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
      opacity: 0.55;
    }
    .cat-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(57,55,55,0.92) 0%, rgba(57,55,55,0.3) 60%, transparent 100%);
    }
    /* Veta dorada decorativa */
    .cat-hero-vein {
      position: absolute; inset: 0; pointer-events: none; z-index: 1;
    }
    .cat-hero-content {
      position: relative; z-index: 2;
      max-width: 1400px; width: 100%; margin: 0 auto;
      padding: 0 48px 48px;
    }
    .cat-breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
    }
    .cat-breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
    .cat-breadcrumb a:hover { color: var(--gold-light); }
    .cat-breadcrumb span { color: rgba(255,255,255,0.25); }
    .cat-eyebrow {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em;
      text-transform: uppercase; color: var(--gold-light);
      margin-bottom: 10px;
    }
    .cat-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 700; color: white; line-height: 1.1;
      margin-bottom: 12px;
    }
    .cat-title em {
      font-style: italic;
      background: linear-gradient(135deg, #c9a227, #e8d48b, #c9a227);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .cat-description {
      font-size: 0.88rem; color: rgba(255,255,255,0.68);
      line-height: 1.7; max-width: 560px; margin-bottom: 20px;
    }
    .cat-meta {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .cat-meta-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.55);
    }
    .cat-meta-item svg { width: 13px; height: 13px; stroke: var(--gold-dark); fill: none; stroke-width: 2; stroke-linecap: round; }

   

    /* ─── SHOP LAYOUT ─── */
    .shop-layout {
      max-width: 1400px; margin: 0 auto;
      padding: 40px 48px 80px;
      display: grid; grid-template-columns: 260px 1fr;
      gap: 48px; align-items: start;
    }

    /* ─── SIDEBAR ─── */
    .shop-sidebar { position: sticky; top: 90px; }
    .sidebar-section { margin-bottom: 36px; border-bottom: 1px solid #f0f0f0; padding-bottom: 28px; }
    .sidebar-section:last-child { border-bottom: none; }
    .sidebar-title {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--charcoal);
      margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;
    }
    .sidebar-title button { font-size: 0.62rem; color: #aaa; }
    .filter-list { display: flex; flex-direction: column; gap: 10px; }
    .filter-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: #555; cursor: pointer; transition: color 0.2s; }
    .filter-item:hover { color: var(--charcoal); }
    .filter-checkbox { width: 16px; height: 16px; border: 1.5px solid #ccc; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; }
    .filter-item.checked .filter-checkbox { background: var(--charcoal); border-color: var(--charcoal); }
    .filter-item.checked .filter-checkbox::after { content: ''; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translateY(-1px); display: block; }
    .filter-item.checked { color: var(--charcoal); font-weight: 600; }
    .filter-count { margin-left: auto; font-size: 0.68rem; color: #bbb; }

    /* Tallas */
    .size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .size-chip {
      min-width: 40px; height: 36px; padding: 0 8px;
      border: 1.5px solid #e0e0e0;
      display: flex; align-items: center; justify-content: center; flex-direction: column;
      font-size: 0.72rem; font-weight: 600; cursor: pointer;
      transition: all 0.2s; color: #555; text-align: center; line-height: 1.2;
    }
    .size-chip:hover { border-color: var(--charcoal); color: var(--charcoal); }
    .size-chip.active { background: var(--charcoal); color: white; border-color: var(--charcoal); }
    .size-chip small { font-size: 0.5rem; color: inherit; opacity: 0.7; }

    /* Colores */
    .color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
    .color-swatch:hover { transform: scale(1.15); }
    .color-swatch.active { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--gold-dark); }
    .color-swatch[title="Blanco"] { background: #FFFFFF; border-color: #ddd; }
    .color-swatch[title="Negro"] { background: #1C1C1C; }
    .color-swatch[title="Beige"] { background: #E2D5C3; }
    .color-swatch[title="Camel"] { background: #C9A87C; }
    .color-swatch[title="Granate"] { background: #6B1020; }
    .color-swatch[title="Rosa"] { background: #FADFE9; border-color: #ddd; }
    .color-swatch[title="Gris"] { background: #8A8A8A; }
    .color-swatch[title="Azul"] { background: #4A6FA5; }
    .color-swatch[title="Verde"] { background: #6B8F71; }
    .color-swatch[title="Marrón"] { background: #4A2C17; }

    /* Precio */
    .price-range-display { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--charcoal); margin-bottom: 14px; }
    .range-slider { -webkit-appearance: none; width: 100%; height: 3px; background: linear-gradient(to right, var(--gold-dark) 0%, var(--gold-dark) 70%, #e0e0e0 70%); outline: none; border-radius: 2px; }
    .range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--charcoal); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

    /* Sidebar inferior: banner asesoría mini */
    .sidebar-asesoria-mini {
      background: linear-gradient(135deg, var(--charcoal) 0%, #4a4040 100%);
      padding: 28px 20px; margin-top: 8px;
    }
    .sidebar-asesoria-mini .mini-badge {
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--gold-light); margin-bottom: 8px;
    }
    .sidebar-asesoria-mini h4 {
      font-family: 'Playfair Display', serif; font-size: 0.95rem;
      font-weight: 700; color: white; line-height: 1.3; margin-bottom: 8px;
    }
    .sidebar-asesoria-mini h4 em { font-style: italic; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sidebar-asesoria-mini p { font-size: 0.72rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 16px; }
    .sidebar-asesoria-mini a {
      display: block; text-align: center;
      padding: 10px; border: 1px solid rgba(201,162,39,0.5);
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--gold-light); transition: all 0.2s;
    }
    .sidebar-asesoria-mini a:hover { background: var(--gold-gradient); color: var(--charcoal); border-color: transparent; }

    .sidebar-clear-all { width: 100%; padding: 12px; border: 1.5px solid #e0e0e0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #888; transition: all 0.2s; margin-top: 8px; }
    .sidebar-clear-all:hover { border-color: var(--charcoal); color: var(--charcoal); }

    /* ─── MAIN AREA ─── */
    .shop-main {}
    .sort-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
    .sort-bar-left { display: flex; align-items: center; gap: 16px; }
    .results-count { font-size: 0.78rem; color: #888; }
    .results-count strong { color: var(--charcoal); }
    .active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #f5f5f5; font-size: 0.68rem; font-weight: 600; color: var(--charcoal); border: 1px solid #e8e8e8; }
    .filter-chip button { font-size: 0.8rem; color: #999; }
    .sort-right { display: flex; align-items: center; gap: 12px; }
    .sort-select { border: 1.5px solid #e0e0e0; padding: 9px 36px 9px 14px; font-size: 0.72rem; font-weight: 600; color: var(--charcoal); background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23393737' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; cursor: pointer; }
    .sort-select:focus { outline: none; border-color: var(--gold-dark); }
    .view-toggles { display: flex; gap: 4px; }
    .view-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e0e0e0; color: #aaa; transition: all 0.2s; }
    .view-btn.active { border-color: var(--charcoal); color: var(--charcoal); background: #f8f8f8; }

    /* Mobile filter bar */
    .mobile-filter-bar { display: none; }

       /* ─── PRODUCT GRID ─── */
    .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .product-card { background: white; position: relative; overflow: hidden; cursor: pointer; }
    .product-card:hover .product-image-wrap img { transform: scale(1.06); }
    .product-image-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #f5f5f5; }
    .product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
    .product-badge { position: absolute; top: 14px; left: 14px; background: linear-gradient(135deg, #c9a227, #e8d48b, #c9a227); color: var(--charcoal); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; padding: 5px 10px; text-transform: uppercase; z-index: 2; }
    .product-badge.sale { background: var(--charcoal); color: white; }
    .product-wishlist { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background 0.2s, transform 0.2s; }
    .product-wishlist:hover { background: var(--gold-gradient); transform: scale(1.1); }
    .product-wishlist:hover svg { stroke: white; }
    .product-wishlist svg { width: 16px; height: 16px; stroke: var(--charcoal); fill: none; stroke-width: 2; }
    .product-info { padding: 16px 4px 4px; }
    .product-category-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #aaa; margin-bottom: 6px; }
    .product-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; line-height: 1.3; }
    .product-price { font-size: 0.95rem; font-weight: 700; color: var(--gold-dark); }
    .product-price .original { font-size: 0.8rem; font-weight: 400; color: #bbb; text-decoration: line-through; margin-left: 6px; }
    .product-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
    .product-size-dot { width: 28px; height: 28px; border: 1px solid rgba(57,55,55,0.18); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; transition: all 0.2s; cursor: pointer; }
    .product-size-dot:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
    .product-color-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    .product-color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

    /* Empty state */
    .empty-state {
      grid-column: 1 / -1; text-align: center; padding: 80px 20px;
    }
    .empty-state-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.3; }
    .empty-state h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--charcoal); margin-bottom: 8px; }
    .empty-state p { font-size: 0.85rem; color: #aaa; margin-bottom: 24px; }

    /* ─── PAGINATION ─── */
    /* WooCommerce: woocommerce_pagination() */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 60px; }
    .page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e0e0e0; font-size: 0.82rem; font-weight: 600; color: #888; transition: all 0.2s; cursor: pointer; }
    .page-btn:hover { border-color: var(--charcoal); color: var(--charcoal); }
    .page-btn.active { background: var(--charcoal); color: white; border-color: var(--charcoal); }
    .page-btn.prev, .page-btn.next { width: auto; padding: 0 16px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

    /* ─── RELATED CATEGORIES ─── */
    .related-cats {
      max-width: 1400px; margin: 0 auto;
      padding: 0 48px 72px; border-top: 1px solid #f0f0f0; padding-top: 64px;
    }
    .related-cats-title {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.25em;
      text-transform: uppercase; color: var(--gold-dark);
      margin-bottom: 28px; text-align: center;
    }
    .related-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .related-cat-card {
      position: relative; overflow: hidden; aspect-ratio: 3/4;
      background: #f5f5f5; cursor: pointer;
    }
    .related-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
    .related-cat-card:hover img { transform: scale(1.06); }
    .related-cat-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(57,55,55,0.85) 0%, transparent 60%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 20px;
    }
    .related-cat-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: white; margin-bottom: 4px; }
    .related-cat-count { font-size: 0.65rem; color: rgba(255,255,255,0.6); font-weight: 500; }

    /* ─── COLORIMETRÍA TIP ─── */
    /*
      Decisión de diseño: La información de paletas estacionales se integra aquí como CTA
      a la asesoría, NO como filtro (catálogo aún pequeño).
      Cuando el catálogo crezca, sustituir por sección "Compra por paleta".
    */
    .colorimetria-tip {
      background: linear-gradient(135deg, var(--pink-soft) 0%, var(--cream) 100%);
      border: 1px solid rgba(201,162,39,0.2);
      padding: 28px 32px; margin-bottom: 40px;
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .colorimetria-tip-icon { font-size: 1.8rem; flex-shrink: 0; }
    .colorimetria-tip-text {}
    .colorimetria-tip-text strong { font-size: 0.78rem; font-weight: 700; color: var(--charcoal); display: block; margin-bottom: 4px; }
    .colorimetria-tip-text p { font-size: 0.75rem; color: #777; line-height: 1.6; }
    .colorimetria-tip-text a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

    
    /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .shop-layout { grid-template-columns: 220px 1fr; gap: 32px; padding: 32px 32px 64px; }
      .products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .related-cats-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
      .cat-hero-content { padding: 0 32px 40px; }
    }
    @media (max-width: 768px) {
      .nav-inner { padding: 0 20px; }
      .nav-menu { display: none; }
      .nav-hamburger { display: flex; }
      .shop-sidebar { display: none; }
      .shop-layout { grid-template-columns: 1fr; gap: 0; padding: 0 0 48px; }
      .mobile-filter-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px; background: white;
        border-bottom: 1px solid #f0f0f0;
        position: sticky; top: 72px; z-index: 100; gap: 10px;
      }
      .mobile-filter-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; }
      .mobile-filter-scroll::-webkit-scrollbar { display: none; }
      .mobile-filter-pill { flex-shrink: 0; padding: 7px 14px; border: 1.5px solid #e0e0e0; color: #555; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; cursor: pointer; transition: all 0.2s; }
      .mobile-filter-pill.active { border-color: var(--charcoal); background: var(--charcoal); color: white; }
      .mobile-filter-btn { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--charcoal); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal); }
      .shop-main { padding: 20px 20px 0; }
      .sort-bar { padding-bottom: 14px; margin-bottom: 18px; }
      .results-count, .view-toggles { display: none; }
      .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .related-cats-grid { grid-template-columns: repeat(2, 1fr); }
      .related-cats { padding: 0 20px 48px; padding-top: 48px; }
      .cat-hero { min-height: 260px; }
      .cat-hero-content { padding: 0 20px 32px; }
      .cat-title { font-size: clamp(1.6rem, 5vw, 2.4rem); }
      .subcategories-inner { padding: 0 20px; }
      .footer-top { grid-template-columns: 1fr 1fr; padding: 48px 20px 40px; }
      .footer-bottom { flex-direction: column; text-align: center; padding: 20px; }
      .colorimetria-tip { padding: 20px; gap: 14px; }
    }
    @media (max-width: 480px) {
      .products-grid { gap: 8px; }
      .footer-top { grid-template-columns: 1fr; }
      .related-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    }

    /* ─── MOBILE FILTER PANEL ─── */
    .filter-panel-overlay { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.4); }
    .filter-panel-overlay.open { display: block; }
    .filter-panel { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 16px 16px 0 0; padding: 24px 24px 48px; max-height: 80vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s ease; }
    .filter-panel-overlay.open .filter-panel { transform: translateY(0); }
    .filter-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
    .filter-panel-header h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; }
    .filter-panel-section { margin-bottom: 24px; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
    .filter-panel-section:last-child { border-bottom: none; }
    .filter-panel-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; color: var(--charcoal); }
    .filter-panel-apply { width: 100%; padding: 16px; background: var(--charcoal); color: white; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 8px; }
    .filter-panel-apply:hover { background: var(--gold-gradient); color: var(--charcoal); }