/* ============================================================
   Product detail: mejoras visuales
   ============================================================ */
.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    height: 400px;
}
.price-discount-badge {
    background: var(--color-favorite);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    vertical-align: middle;
}
.size-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}
.size-guide-link {
    font-size: 0.8rem;
    color: var(--color-secondary);
    text-decoration: underline;
}
.size-btn {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}
.size-btn:hover { border-color: var(--color-accent); }
.size-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: white;
}
.size-btn-out {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.size-stock-info {
    font-size: 0.8rem;
    margin-top: var(--space-xs);
}
.size-stock-info.ok  { color: var(--color-success); }
.size-stock-info.low { color: var(--color-warning); }
.size-stock-info.out { color: var(--color-error); }
.stock-warning {
    font-size: 0.85rem;
    color: var(--color-warning);
    margin-top: var(--space-sm);
}
.product-themes-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.tab-content { display: none; padding: var(--space-xl) 0; }
.tab-content.active { display: block; }
.tab-btn {
    padding: var(--space-sm) var(--space-lg);
    border: none;
    background: none;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}
.tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.review-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.review-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
}
.review-rating .star.filled { color: #f39c12; }
.verified-badge {
    font-size: 0.75rem;
    color: var(--color-success);
}
.no-reviews {
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-xl) 0;
}
.related-products { margin-top: var(--space-3xl); }

/* Tags de tematica */
.theme-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-bg-secondary);
    color: var(--color-secondary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.theme-tag:hover {
    background: var(--color-secondary);
    color: white;
}

/* Product card: categoria breadcrumb */
.product-card-category {
    font-size: 0.72rem;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.product-card-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-sm);
}

/* ============================================================
   Theme tags: escala de azules Logyia + acentos vivos
   ============================================================ */
/* Azul eléctrico — el acento principal */
.theme-tag--0 { background: var(--color-accent); color: #fff; }
.theme-tag--0:hover { background: var(--color-accent-light); color: #fff; }

/* Navy profundo — confianza */
.theme-tag--1 { background: var(--color-primary); color: #fff; }
.theme-tag--1:hover { background: var(--color-primary-dark); color: #fff; }

/* Azul medio corporativo */
.theme-tag--2 { background: var(--color-secondary); color: #fff; }
.theme-tag--2:hover { background: #0D4A8A; color: #fff; }

/* Rojo — contraste cálido */
.theme-tag--3 { background: #c62828; color: #fff; }
.theme-tag--3:hover { background: #e53935; color: #fff; }

/* Verde esmeralda — natural */
.theme-tag--4 { background: #1a7a50; color: #fff; }
.theme-tag--4:hover { background: #14623f; color: #fff; }

/* Azul teal — del logo */
.theme-tag--5 { background: #005F8A; color: #fff; }
.theme-tag--5:hover { background: #004B70; color: #fff; }

/* Sobreescribe el estilo base cuando hay clase de color */
.theme-tag[class*="theme-tag--"] {
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}
.theme-tag[class*="theme-tag--"]:hover {
    transform: translateY(-1px);
}

/* ============================================================
   Product icon placeholder (sin imagen)
   ============================================================ */
.product-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, #d0d8dc 100%);
    gap: var(--space-sm);
    padding: var(--space-lg);
}
.product-icon-placeholder svg {
    width: 72px;
    height: 72px;
    color: var(--color-secondary);
    opacity: 0.8;
}
.product-icon-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   Sort select compacto
   ============================================================ */
.sort-select {
    width: auto;
    min-width: 160px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
    cursor: pointer;
}
.sort-select:focus {
    outline: none;
    border-color: var(--color-secondary);
}