/**
 * WC Smart Search v2.4.6 — Frontend CSS
 *
 * Especificidad: todos los selectores usan .wcss-wrapper[data-wcss]
 * como raíz. Esto gana sobre reglas genéricas de Divi (.et_pb_module,
 * input[type="text"], etc.) sin interferir con el CSS personalizado
 * del sitio que use clases/IDs propias.
 *
 * Si necesitas sobreescribir algo desde tu CSS personalizado:
 *   .wcss-wrapper[data-wcss] .wcss-input { ... }  ← funciona
 *   .mi-clase .wcss-wrapper { ... }               ← no tiene suficiente especificidad
 */

/* ─── Variables base (CSS Custom Properties) ─────────────────────────────────
   Aplican a todo el árbol del componente. Se sobreescriben desde WCSS_Styles
   inyectando un <style> en wp_head con los valores configurados en el admin.    */
.wcss-wrapper[data-wcss] {
    --wcss-accent:          #593BAD;
    --wcss-accent-rgb:      89, 59, 173;
    --wcss-radius:          10px;
    --wcss-radius-sm:       6px;
    --wcss-radius-lg:       14px;
    --wcss-shadow:          0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    --wcss-border:          #e2e4e8;
    --wcss-bg:              #ffffff;
    --wcss-dropdown-bg:     #ffffff;
    --wcss-dropdown-br:     #e2e4e8;
    --wcss-text:            #1a1a2e;
    --wcss-muted:           #6b7280;
    --wcss-hover:           #f5f6f8;
    --wcss-dp-width:        300px;
    --wcss-img-size:        52px;
    --wcss-input-h:         50px;
    --wcss-z:               9999;
    --wcss-t:               .15s ease;
    --wcss-price-color:     var(--wcss-accent);
    --wcss-highlight-bg:    rgba(var(--wcss-accent-rgb), .16);
    /* Tamaños de fuente — sobreescritos por WCSS_Styles si el usuario los cambia */
    --wcss-title-size:      13.5px;
    --wcss-cats-size:       11px;
    --wcss-price-size:      13px;
    --wcss-btn-size:        13.5px;
    --wcss-dp-title-size:   15px;
    --wcss-dp-desc-size:    12px;
    --wcss-dp-price-size:   18px;
    --wcss-qty-size:        14px;

    /* Reset de caja para que no herede box-sizing roto de algunos temas */
    position: relative;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Reset de box-sizing para TODOS los hijos del componente */
.wcss-wrapper[data-wcss] *,
.wcss-wrapper[data-wcss] *::before,
.wcss-wrapper[data-wcss] *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Ocultar elementos con [hidden] — algunos temas CSS sobreescriben display */
.wcss-wrapper[data-wcss] [hidden] {
    display: none !important;
}

/* ─── Input group ─────────────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: var(--wcss-bg);
    border: 2px solid var(--wcss-border);
    border-radius: var(--wcss-radius);
    min-height: var(--wcss-input-h);
    transition: border-color var(--wcss-t), box-shadow var(--wcss-t);
    position: relative;
    /* Anular any Divi card-shadow en el contenedor */
    box-shadow: none;
}
.wcss-wrapper[data-wcss] .wcss-input-group:focus-within {
    border-color: var(--wcss-accent);
    box-shadow: 0 0 0 3px rgba(var(--wcss-accent-rgb), .14);
}

.wcss-wrapper[data-wcss] .wcss-icon-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--wcss-muted);
    transition: color var(--wcss-t);
    pointer-events: none;
}
.wcss-wrapper[data-wcss] .wcss-input-group:focus-within .wcss-icon-search {
    color: var(--wcss-accent);
}
.wcss-wrapper[data-wcss] .wcss-icon-search svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Input de texto — resetear todo lo que Divi o el tema puedan inyectar */
.wcss-wrapper[data-wcss] .wcss-input,
.wcss-wrapper[data-wcss] input.wcss-input,
.wcss-wrapper[data-wcss] input[type="text"].wcss-input {
    flex: 1;
    min-width: 0;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--wcss-text) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    padding: 13px 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    /* Divi a veces aplica height fija a inputs */
    height: auto !important;
    max-height: none !important;
}
.wcss-wrapper[data-wcss] .wcss-input::placeholder {
    color: var(--wcss-muted);
    opacity: 1;
}
/* Anular el focus ring del tema en este input */
.wcss-wrapper[data-wcss] .wcss-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.wcss-wrapper[data-wcss] .wcss-spinner {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--wcss-accent);
}
.wcss-wrapper[data-wcss] .wcss-spinner svg {
    width: 18px;
    height: 18px;
    display: block;
    animation: wcss-spin .75s linear infinite;
}
@keyframes wcss-spin { to { transform: rotate(360deg); } }

.wcss-wrapper[data-wcss] .wcss-clear,
.wcss-wrapper[data-wcss] .wcss-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: transparent !important;
    border: none !important;
    border-radius: 50%;
    cursor: pointer;
    color: var(--wcss-muted);
    transition: background var(--wcss-t), color var(--wcss-t);
    padding: 0 !important;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-clear svg { width: 14px; height: 14px; display: block; }
.wcss-wrapper[data-wcss] .wcss-clear:hover,
.wcss-wrapper[data-wcss] .wcss-mobile-close:hover {
    background: var(--wcss-hover) !important;
    color: var(--wcss-text);
}
.wcss-wrapper[data-wcss] .wcss-mobile-close {
    width: auto;
    border-radius: 6px;
    gap: 5px;
    padding: 0 8px !important;
    font-size: 13px;
    display: none;
}
.wcss-wrapper[data-wcss] .wcss-mobile-close svg { width: 16px; height: 16px; }

/* ─── Panel wrap ──────────────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-panel-wrap {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    z-index: var(--wcss-z);
}

/* ─── Dropdown ────────────────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-dropdown {
    flex: 1;
    min-width: 0;
    background: var(--wcss-dropdown-bg);
    border: 1px solid var(--wcss-dropdown-br);
    border-radius: var(--wcss-radius);
    box-shadow: var(--wcss-shadow);
    overflow: hidden;
    animation: wcss-in .14s ease-out;
}
@keyframes wcss-in {
    from { opacity: 0; transform: translateY(-6px) scaleY(.97); }
    to   { opacity: 1; transform: none; }
}

/* ─── Estados (loading, vacío, error) ────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    color: var(--wcss-muted);
    font-size: 13px;
    text-align: center;
}
.wcss-wrapper[data-wcss] .wcss-state svg { width: 30px; height: 30px; opacity: .35; }
.wcss-wrapper[data-wcss] .wcss-state p { margin: 0; line-height: 1.4; }

/* ─── Lista de resultados ─────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-results-list {
    list-style: none !important;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wcss-border) transparent;
    padding: 8px 0;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-results-list::-webkit-scrollbar { width: 3px; }
.wcss-wrapper[data-wcss] .wcss-results-list::-webkit-scrollbar-thumb {
    background: var(--wcss-border);
    border-radius: 3px;
}
.wcss-wrapper[data-wcss] .wcss-results-list li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-results-list li::before,
.wcss-wrapper[data-wcss] .wcss-results-list li::after {
    display: none !important;
    content: none !important;
}

/* ─── Resultado individual ────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-result-item,
.wcss-wrapper[data-wcss] a.wcss-result-item {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 20px 11px 16px !important;
    text-decoration: none !important;
    color: var(--wcss-text) !important;
    cursor: pointer;
    transition: background var(--wcss-t);
    position: relative;
    outline: none;
    background: transparent;
    /* Anular cualquier borde/sombra que el tema aplique a <a> */
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.wcss-wrapper[data-wcss] .wcss-result-item + .wcss-result-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 0.5px;
    background: var(--wcss-border);
    opacity: 0.55;
}
.wcss-wrapper[data-wcss] .wcss-result-item:hover,
.wcss-wrapper[data-wcss] a.wcss-result-item:hover,
.wcss-wrapper[data-wcss] .wcss-result-item:focus,
.wcss-wrapper[data-wcss] .wcss-result-item.wcss-active {
    background: var(--wcss-hover) !important;
    text-decoration: none !important;
    color: var(--wcss-text) !important;
}
.wcss-wrapper[data-wcss] .wcss-result-item.wcss-detail-active {
    background: rgba(var(--wcss-accent-rgb), .06) !important;
}

/* ─── Imagen ──────────────────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-result-img-wrap {
    flex-shrink: 0;
    width: var(--wcss-img-size);
    height: var(--wcss-img-size);
    border-radius: var(--wcss-radius-sm);
    overflow: hidden;
    background: var(--wcss-hover);
    border: 1px solid var(--wcss-border) !important;
    position: relative;
    margin-top: 2px;
}
.wcss-wrapper[data-wcss] .wcss-result-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.wcss-wrapper[data-wcss] .wcss-result-img-wrap .wcss-rbadge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
}
.wcss-wrapper[data-wcss] .wcss-rbadge-sale     { background: #ef4444; color: #fff; }
.wcss-wrapper[data-wcss] .wcss-rbadge-featured { background: #f59e0b; color: #fff; }
.wcss-wrapper[data-wcss] .wcss-rbadge-oos      { background: #9ca3af; color: #fff; }

/* ─── Info del producto ───────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wcss-wrapper[data-wcss] .wcss-result-title {
    font-size: var(--wcss-title-size);
    font-weight: 500;
    color: var(--wcss-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    transition: color var(--wcss-t);
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.wcss-wrapper[data-wcss] .wcss-result-item:hover .wcss-result-title,
.wcss-wrapper[data-wcss] .wcss-result-item.wcss-active .wcss-result-title,
.wcss-wrapper[data-wcss] .wcss-result-item.wcss-detail-active .wcss-result-title {
    color: var(--wcss-accent);
}
.wcss-wrapper[data-wcss] .wcss-result-cats {
    font-size: var(--wcss-cats-size);
    color: var(--wcss-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-result-sku {
    font-size: 11px;
    color: var(--wcss-muted);
    margin: 0 !important;
}

/* ─── Precio en el dropdown ───────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-result-price-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-width: 72px;
    text-align: right;
    margin-top: 2px;
}
.wcss-wrapper[data-wcss] .wcss-result-price-regular {
    font-size: 11px;
    color: var(--wcss-muted);
    text-decoration: line-through;
    line-height: 1.2;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-result-price-sale,
.wcss-wrapper[data-wcss] .wcss-result-price-simple {
    font-size: var(--wcss-price-size);
    font-weight: 600;
    color: var(--wcss-price-color);
    line-height: 1.2;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-highlight {
    background: var(--wcss-highlight-bg);
    border-radius: 2px;
    padding: 0 2px;
    /* Sin font-weight adicional — no queremos que el texto resaltado se vea más grueso */
    color: inherit;
}

/* ─── Footer del dropdown ─────────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--wcss-border);
    background: var(--wcss-hover);
}
.wcss-wrapper[data-wcss] .wcss-view-all,
.wcss-wrapper[data-wcss] a.wcss-view-all {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--wcss-accent) !important;
    text-decoration: none !important;
    transition: gap var(--wcss-t);
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-view-all:hover { gap: 10px; }
.wcss-wrapper[data-wcss] .wcss-view-all svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--wcss-t);
}
.wcss-wrapper[data-wcss] .wcss-view-all:hover svg { transform: translateX(3px); }

/* ─── Historial de búsqueda ───────────────────────────────────────────────── */
.wcss-wrapper[data-wcss] .wcss-history-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--wcss-dropdown-bg);
    border: 1px solid var(--wcss-dropdown-br);
    border-radius: var(--wcss-radius);
    box-shadow: var(--wcss-shadow);
    z-index: var(--wcss-z);
    padding: 8px 0;
    animation: wcss-in .14s ease-out;
}
.wcss-wrapper[data-wcss] .wcss-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wcss-muted);
    border-bottom: 0.5px solid var(--wcss-border);
    margin-bottom: 4px;
}
.wcss-wrapper[data-wcss] .wcss-history-clear {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: 11px;
    color: var(--wcss-accent);
    font-weight: 500;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity var(--wcss-t);
}
.wcss-wrapper[data-wcss] .wcss-history-clear:hover { opacity: .7; }
.wcss-wrapper[data-wcss] .wcss-history-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-history-list li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-history-list li::before,
.wcss-wrapper[data-wcss] .wcss-history-list li::after { display: none !important; content: none !important; }
.wcss-wrapper[data-wcss] .wcss-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--wcss-text);
    transition: background var(--wcss-t);
    border: none !important;
    background: transparent;
}
.wcss-wrapper[data-wcss] .wcss-history-item:hover { background: var(--wcss-hover) !important; }
.wcss-wrapper[data-wcss] .wcss-history-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--wcss-muted);
    opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  DETAILS PANEL                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */
.wcss-wrapper[data-wcss] .wcss-details-panel {
    flex: 0 0 var(--wcss-dp-width);
    background: var(--wcss-dropdown-bg);
    border: 1px solid var(--wcss-dropdown-br);
    border-radius: var(--wcss-radius);
    box-shadow: var(--wcss-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 680px); /* respeta el viewport */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wcss-border) transparent;
}
.wcss-wrapper[data-wcss] .wcss-details-panel::-webkit-scrollbar { width: 3px; }
.wcss-wrapper[data-wcss] .wcss-details-panel::-webkit-scrollbar-thumb {
    background: var(--wcss-border);
    border-radius: 3px;
}
.wcss-wrapper[data-wcss] .wcss-details-panel.wcss-dp-updating .wcss-dp-body,
.wcss-wrapper[data-wcss] .wcss-details-panel.wcss-dp-updating .wcss-dp-actions,
.wcss-wrapper[data-wcss] .wcss-details-panel.wcss-dp-updating .wcss-dp-image {
    opacity: 0;
    transition: opacity .1s ease;
}
.wcss-wrapper[data-wcss] .wcss-dp-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--wcss-hover);
    overflow: hidden;
    flex-shrink: 0;
}
.wcss-wrapper[data-wcss] .wcss-dp-img-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--wcss-hover) 25%, #e8e9eb 50%, var(--wcss-hover) 75%);
    background-size: 200% 100%;
    animation: wcss-skeleton 1.4s ease-in-out infinite;
}
@keyframes wcss-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.wcss-wrapper[data-wcss] .wcss-dp-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2; /* Encima del skeleton */
    transition: opacity .2s ease;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.wcss-wrapper[data-wcss] .wcss-dp-image.loading { opacity: 0; }
.wcss-wrapper[data-wcss] .wcss-dp-badge {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
.wcss-wrapper[data-wcss] .wcss-dp-badge svg { width: 12px; height: 12px; }
.wcss-wrapper[data-wcss] .wcss-dp-sale     { left: 10px; top: 10px; background: #ef4444; color: #fff; }
.wcss-wrapper[data-wcss] .wcss-dp-featured { right: 10px; top: 10px; background: #f59e0b; color: #fff; }
.wcss-wrapper[data-wcss] .wcss-dp-body { padding: 14px 16px 0; flex: 1; }
.wcss-wrapper[data-wcss] .wcss-dp-cats {
    font-size: 10px;
    color: var(--wcss-muted) !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-dp-title {
    font-size: var(--wcss-dp-title-size);
    font-weight: 600;
    color: var(--wcss-text) !important;
    line-height: 1.3;
    margin-bottom: 8px;
    margin-top: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    /* Posición relativa para el ::after con fade */
    position: relative;
}
/* Gradient fade solo cuando el texto está truncado (línea 2+ de altura) */
.wcss-wrapper[data-wcss] .wcss-dp-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.3em; /* altura de una línea */
    background: linear-gradient(to bottom, transparent, var(--wcss-dropdown-bg, #fff));
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
/* Mostrar el fade solo si el título ocupa exactamente 2 líneas (está truncado) */
.wcss-wrapper[data-wcss] .wcss-dp-title.is-clamped::after {
    opacity: 1;
}
.wcss-wrapper[data-wcss] .wcss-dp-price {
    font-size: var(--wcss-dp-price-size);
    font-weight: 700;
    color: var(--wcss-price-color);
    margin-bottom: 8px;
    margin-top: 0 !important;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}
.wcss-wrapper[data-wcss] .wcss-dp-price del {
    font-size: calc(var(--wcss-dp-price-size) * 0.72);
    color: var(--wcss-muted);
    font-weight: 400;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
    margin-top: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-dp-price ins { text-decoration: none; }
.wcss-wrapper[data-wcss] .wcss-dp-desc {
    font-size: var(--wcss-dp-desc-size);
    color: var(--wcss-muted) !important;
    line-height: 1.55;
    margin-bottom: 8px;
    margin-top: 0 !important;
    /* Sin line-clamp: el texto se muestra completo y el panel scrollea */
}
/* Sin fade en descripción — el texto se muestra completo, el panel scrollea */
.wcss-wrapper[data-wcss] .wcss-dp-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.wcss-wrapper[data-wcss] .wcss-dp-sku,
.wcss-wrapper[data-wcss] .wcss-dp-stock { font-size: 11px; color: var(--wcss-muted); margin: 0 !important; }
.wcss-wrapper[data-wcss] .wcss-dp-stock.instock  { color: #16a34a; font-weight: 500; }
.wcss-wrapper[data-wcss] .wcss-dp-stock.outofstock { color: #dc2626; }
.wcss-wrapper[data-wcss] .wcss-dp-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--wcss-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: var(--wcss-dropdown-bg);
}
.wcss-wrapper[data-wcss] .wcss-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--wcss-border) !important;
    border-radius: var(--wcss-radius-sm);
    overflow: hidden;
    width: fit-content;
}
.wcss-wrapper[data-wcss] .wcss-qty-btn {
    width: 34px;
    height: 34px;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: var(--wcss-qty-size);
    color: var(--wcss-text);
    transition: background var(--wcss-t);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.wcss-wrapper[data-wcss] .wcss-qty-btn:hover { background: var(--wcss-hover) !important; }
.wcss-wrapper[data-wcss] .wcss-qty-input,
.wcss-wrapper[data-wcss] input.wcss-qty-input,
.wcss-wrapper[data-wcss] input[type="number"].wcss-qty-input {
    width: 44px !important;
    border: none !important;
    border-left: 1.5px solid var(--wcss-border) !important;
    border-right: 1.5px solid var(--wcss-border) !important;
    text-align: center !important;
    font-size: var(--wcss-qty-size) !important;
    font-weight: 500;
    color: var(--wcss-text) !important;
    background: transparent !important;
    -moz-appearance: textfield;
    outline: none !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.wcss-wrapper[data-wcss] .wcss-qty-input::-webkit-outer-spin-button,
.wcss-wrapper[data-wcss] .wcss-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wcss-wrapper[data-wcss] .wcss-atc-btn,
.wcss-wrapper[data-wcss] button.wcss-atc-btn {
    width: 100% !important;
    padding: 10px 16px !important;
    background: var(--wcss-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--wcss-radius-sm);
    font-size: var(--wcss-btn-size) !important;
    font-weight: 600;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: filter var(--wcss-t), transform var(--wcss-t);
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
}
.wcss-wrapper[data-wcss] .wcss-atc-btn:hover:not(:disabled) { filter: brightness(1.1); }
.wcss-wrapper[data-wcss] .wcss-atc-btn:active:not(:disabled) { transform: scale(.98); }
.wcss-wrapper[data-wcss] .wcss-atc-btn:disabled { opacity: .65; cursor: not-allowed; }
.wcss-wrapper[data-wcss] .wcss-atc-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.wcss-wrapper[data-wcss] .wcss-atc-btn.wcss-added { background: #16a34a !important; }
.wcss-wrapper[data-wcss] .wcss-view-product,
.wcss-wrapper[data-wcss] a.wcss-view-product {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    color: var(--wcss-muted) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    transition: color var(--wcss-t);
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
.wcss-wrapper[data-wcss] .wcss-view-product:hover { color: var(--wcss-accent) !important; }
.wcss-wrapper[data-wcss] .wcss-view-product svg {
    width: 12px;
    height: 12px;
    transition: transform var(--wcss-t);
}
.wcss-wrapper[data-wcss] .wcss-view-product:hover svg { transform: translate(2px, -2px); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  OVERLAY MOBILE                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */
.wcss-wrapper[data-wcss] .wcss-overlay-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--wcss-z) - 1);
    animation: wcss-fade-in .2s ease;
}
@keyframes wcss-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
    .wcss-wrapper[data-wcss].wcss-mobile-active {
        position: fixed !important;
        inset: 0 !important;
        max-width: none !important;
        width: 100% !important;
        z-index: var(--wcss-z) !important;
        padding: 14px 16px !important;
        background: var(--wcss-bg);
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        top: 0 !important;
        left: 0 !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, .2);
        border-radius: 0 !important;
    }
    .wcss-wrapper[data-wcss].wcss-mobile-active .wcss-overlay-backdrop { display: block; }
    .wcss-wrapper[data-wcss].wcss-mobile-active .wcss-mobile-close    { display: flex !important; }
    .wcss-wrapper[data-wcss].wcss-mobile-active .wcss-panel-wrap {
        position: relative;
        top: 0;
        flex-direction: column;
        margin-top: 8px;
    }
    .wcss-wrapper[data-wcss].wcss-mobile-active .wcss-dropdown {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
    .wcss-wrapper[data-wcss] .wcss-details-panel { display: none !important; }
    .wcss-wrapper[data-wcss] .wcss-history-panel {
        position: relative;
        top: 0;
        margin-top: 8px;
    }
}

/* ─── Variantes de estilo del input ──────────────────────────────────────── */
.wcss-wrapper[data-wcss].wcss-style-pill .wcss-input-group {
    border-radius: 100px;
    padding: 0 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.wcss-wrapper[data-wcss].wcss-style-pill .wcss-input-group:focus-within {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08), 0 0 0 3px rgba(var(--wcss-accent-rgb), .15);
}
.wcss-wrapper[data-wcss].wcss-style-minimal .wcss-input-group {
    border: none;
    border-bottom: 2px solid var(--wcss-border);
    border-radius: 0;
    padding: 0 4px;
    background: transparent;
    box-shadow: none;
}
.wcss-wrapper[data-wcss].wcss-style-minimal .wcss-input-group:focus-within {
    border-bottom-color: var(--wcss-accent);
    box-shadow: none;
}
.wcss-wrapper[data-wcss].wcss-style-minimal .wcss-input {
    padding: 10px 0 !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wcss-wrapper[data-wcss] { --wcss-img-size: 44px; }
}
@media (hover: none) {
    .wcss-wrapper[data-wcss] .wcss-details-panel { display: none !important; }
}