/**
 * Biblioteca (Modules\ShopUI): header RW LIBRARY SHOP, barra de la lista,
 * sidebar en tarjeta con filtros y tarjeta de descargas.
 *
 * Solo se carga en producto, tienda, taxonomías y búsqueda de productos
 * (body.rw-shop-ui). Medidas tomadas de las referencias (lienzo de 2138 px):
 * N * var(--rws-u) escala la medida N de la referencia con la ventana, con un
 * mínimo del 80 %. Claro por defecto; oscuro con html[data-rw-mode="dark"].
 *
 * @package RecursosWorship\Modules\ShopUI
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

html body.rw-shop-ui {
    --rws-u: clamp(0.8px, 0.04677vw, 1px);
    --rws-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --rws-bg: #ffffff;
    --rws-surface: #f8f8f8;
    --rws-surface-line: #e7e9ee;
    --rws-card: #ffffff;
    --rws-card-line: #e7e9ee;
    --rws-line: #e3e3e3;
    --rws-line-strong: #cfcfcf;
    --rws-hover: #f2f2f2;
    --rws-text: #000000;
    --rws-text-2: #707070;
    --rws-text-3: #8a8a8a;
    --rws-value: #040404;
    --rws-icon-muted: #989898;
    --rws-search-icon: #d9d9d9;
    --rws-pill-bg: #ffffff;
    --rws-pill-active-bg: #000000;
    --rws-pill-active-text: #ffffff;
    --rws-circle-bg: #000000;
    --rws-circle-icon: #ffffff;
    --rws-swatch-bg: #f8f8f8;
    --rws-view: #b4b4b4;
    --rws-view-hover: #666666;
    --rws-view-active: #333333;
    --rws-popover-bg: #ffffff;
    --rws-popover-line: #e7e9ee;
    --rws-input-bg: #ffffff;
    --rws-input-line: #e5e7eb;
    --rws-focus: rgba(92, 151, 230, 0.35);
    --rws-color-submit: #4a6fe3;
    --rws-color-submit-hover: #3e62d4;
    --rws-bar-track: #cfb8ff;
    --rws-bar-fill: linear-gradient(90deg, #bc00ff 0%, #bc00ff 45%, #cfb8ff 100%);
    --rws-upgrade: linear-gradient(90deg, #bc00ff 18%, #7700ff 72%);
    --rws-underline: #d2d2d2;

    /* Sidebar en tarjeta: ancho de la referencia (406 px a 2138) con mínimo. */
    --rws-sidebar-w: clamp(250px, calc(19vw - 30px), 290px);
    --rws-inset-x: 12px;
    --rws-inset-top: 20px;
    --rws-inset-bottom: 12px;
    --rws-gap: calc(40 * var(--rws-u));
    --rws-header-h: calc(124 * var(--rws-u));
    --rws-header-sticky-h: calc(88 * var(--rws-u));
    --rws-ctl-h: calc(44 * var(--rws-u));
    --rws-pad: calc(18 * var(--rws-u));

    /* El sidebar global usa estas variables para su ancho y el desplazamiento del contenido. */
    --rw-sidebar-width: var(--rws-sidebar-w);
    --rw-sidebar-page-bg: var(--rws-bg);
}

html[data-rw-mode="dark"] body.rw-shop-ui,
html:not([data-rw-mode]) body.rw-shop-ui.global-color-scheme-light {
    --rws-bg: #121212;
    --rws-surface: #181818;
    --rws-surface-line: #262626;
    --rws-card: #1f1f1f;
    --rws-card-line: #2b2b2b;
    --rws-line: #333333;
    --rws-line-strong: #4a4a4a;
    --rws-hover: #262626;
    --rws-text: #f5f5f7;
    --rws-text-2: #a1a1a6;
    --rws-text-3: #8a8a8f;
    --rws-value: #f5f5f7;
    --rws-icon-muted: #7a7a80;
    --rws-search-icon: #55555a;
    --rws-pill-bg: #1a1a1a;
    --rws-pill-active-bg: #f5f5f7;
    --rws-pill-active-text: #000000;
    --rws-circle-bg: #f5f5f7;
    --rws-circle-icon: #000000;
    --rws-swatch-bg: #1f1f1f;
    --rws-view: #5c5c62;
    --rws-view-hover: #a1a1a6;
    --rws-view-active: #f5f5f7;
    --rws-popover-bg: #1c1c1c;
    --rws-popover-line: #2e2e2e;
    --rws-input-bg: #141414;
    --rws-input-line: #333333;
    --rws-bar-track: #3a2c55;
    --rws-underline: #48484c;
}

/* ==========================================================================
   Página y desplazamiento por el sidebar en tarjeta
   ========================================================================== */

/* Solo en escritorio: por debajo de 1200 px el sidebar no existe (lo decide vertical-sidebar.css). */
@media (min-width: 1200px) {
    html body.rw-shop-ui.rw-has-sidebar {
        --rw-current-sidebar-width: calc(var(--rws-inset-x) + var(--rws-sidebar-w) + var(--rws-gap));
    }

    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed {
        --rw-current-sidebar-width: calc(var(--rws-inset-x) + var(--rw-sidebar-width-collapsed, 64px) + var(--rws-gap));
    }

    /* El listado ocupa el mismo ancho que el header (también con el sidebar colapsado). */
    html body.rw-shop-ui #main-content.container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: calc(38 * var(--rws-u));
    }
}

@media (max-width: 1199px) {
    html body.rw-shop-ui.rw-has-sidebar,
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed {
        --rw-current-sidebar-width: 0px;
    }
}

/* :not(#rws) suma especificidad de ID: el sidebar y el tema claro de la tienda
   fijan el fondo cálido (#fbfaf6) con selectores largos. */
html:not(#rws) body.rw-shop-ui,
html:not(#rws) body.rw-shop-ui .website-wrapper,
html:not(#rws) body.rw-shop-ui .main-page-wrapper,
html:not(#rws) body.rw-shop-ui .wd-page-content,
html:not(#rws) body.rw-shop-ui .site-content {
    --rw-sidebar-page-bg: var(--rws-bg);
    background-color: var(--rws-bg);
}

/* Menos aire entre el header y la rejilla (el hueco lo dejaban la barra
   original, ahora en el header, y una descripción vacía). */
@media (min-width: 1200px) {
    html body.rw-shop-ui--catalog #main-content {
        padding-top: calc(12 * var(--rws-u));
    }

    html body.rw-shop-ui--catalog .shop-loop-head {
        margin-bottom: calc(16 * var(--rws-u));
    }

    html body.rw-shop-ui--catalog .page-description:not(:has(*:not(:empty))) {
        margin-bottom: 0;
    }
}

/* El CSS crítico coloca el header colapsado a 64 px fijos; aquí cuenta el margen de la tarjeta. */
@media (min-width: 1200px) {
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed .whb-main-header,
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed .whb-clone,
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed .whb-sticked .whb-main-header,
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed .whb-scroll-down .whb-main-header,
    html body.rw-shop-ui.rw-has-sidebar.rw-sidebar-collapsed .whb-scroll-up .whb-main-header {
        left: var(--rw-current-sidebar-width) !important;
        width: calc(100% - var(--rw-current-sidebar-width)) !important;
    }
}

/* La reserva del CSS crítico no hace falta (el sidebar va en el HTML inicial) y,
   desplazada por la barra de admin, se veía como un segundo borde encima del logo. */
html body.rw-shop-ui.rw-has-sidebar::before {
    display: none !important;
}

/* ==========================================================================
   Header RW LIBRARY SHOP
   ========================================================================== */

html:not(#rws) body.rw-shop-ui .whb-main-header,
html:not(#rws) body.rw-shop-ui .whb-general-header {
    background-color: var(--rws-bg) !important;
    border-bottom: 0;
    box-shadow: none !important;
}

html:not(#rws) body.rw-shop-ui .whb-sticked .whb-general-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--rws-surface-line);
}

@media (min-width: 1200px) {
    html body.rw-shop-ui .whb-general-header .whb-general-header-inner {
        height: var(--rws-header-h) !important;
        max-height: var(--rws-header-h) !important;
    }

    html body.rw-shop-ui .whb-sticked .whb-general-header .whb-general-header-inner {
        height: var(--rws-header-sticky-h) !important;
        max-height: var(--rws-header-sticky-h) !important;
    }

    html body.rw-shop-ui .whb-general-header > .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: calc(38 * var(--rws-u));
    }

    /* La columna central (menú + barra) ocupa el espacio libre. */
    html body.rw-shop-ui .whb-general-header .whb-col-left,
    html body.rw-shop-ui .whb-general-header .whb-col-right {
        flex: 0 0 auto;
    }

    html body.rw-shop-ui .whb-general-header .whb-col-center {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: calc(20 * var(--rws-u));
    }

    html body.rw-shop-ui .whb-general-header .whb-col-center > .wd-header-text {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        padding: 0;
    }

    html body.rw-shop-ui .whb-general-header .whb-col-right {
        gap: 0;
        padding-left: calc(14 * var(--rws-u));
    }
}

/* --- Idioma, notificaciones, favoritos y carrito: solo el icono ------- */

@media (min-width: 1200px) {
    html body.rw-shop-ui .whb-general-header .whb-col-right > .wd-header-text,
    html body.rw-shop-ui .whb-general-header .whb-col-right > .wd-tools-element {
        margin: 0;
        padding: 0 calc(7 * var(--rws-u));
    }

    html body.rw-shop-ui .whb-general-header .whb-col-right > .wd-header-text:empty {
        display: none;
    }

    html body.rw-shop-ui .whb-general-header .whb-col-right .wd-tools-element > a {
        height: auto;
        padding: 0;
    }
}

html body.rw-shop-ui .whb-general-header .wd-tools-element .wd-tools-icon {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rws-text) !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}

html body.rw-shop-ui .whb-general-header .wd-tools-element .wd-tools-icon::before {
    color: inherit !important;
    font-size: 21px;
}

html body.rw-shop-ui .whb-general-header .wd-tools-element:hover .wd-tools-icon {
    color: var(--rws-text-2) !important;
}

html body.rw-shop-ui .whb-general-header .wd-tools-element .wd-tools-count {
    top: -6px !important;
    right: -10px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--rws-text-2) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

html body.rw-shop-ui .whb-general-header .rw-notifications-trigger {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rws-text) !important;
    box-shadow: none !important;
}

html body.rw-shop-ui .whb-general-header .rw-notifications-trigger:hover {
    color: var(--rws-text-2) !important;
}

html body.rw-shop-ui .whb-general-header .rw-notifications-trigger svg {
    width: 22px;
    height: 22px;
}

html body.rw-shop-ui .whb-general-header .rw-lang__trigger {
    padding: 2px !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Buscador --------------------------------------------------------- */

/* 372 px de la referencia a 2138, 334 a 1920 y mínimo de 190 en portátiles. */
html body.rw-shop-ui .whb-general-header .wd-search-form {
    width: clamp(190px, calc(26vw - 165px), calc(372 * var(--rws-u)));
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchform {
    --wd-form-height: var(--rws-ctl-h);
    --wd-form-brd-radius: 999px;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* WoodMart da un ancho fijo al campo: aquí se ajusta a la columna. */
html body.rw-shop-ui .whb-general-header .wd-search-form .searchform input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchform input[type="text"] {
    height: var(--rws-ctl-h);
    padding: 0 calc(54 * var(--rws-u)) 0 calc(26 * var(--rws-u));
    border: 1px solid var(--rws-line);
    border-radius: 999px;
    background: var(--rws-pill-bg);
    color: var(--rws-text);
    font-family: var(--rws-font);
    font-size: max(14px, calc(16 * var(--rws-u)));
    box-shadow: none;
    transition: border-color 0.2s ease;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchform input[type="text"]::placeholder {
    color: var(--rws-text-2);
    opacity: 1;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchform input[type="text"]:focus {
    border-color: var(--rws-line-strong);
    outline: none;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit {
    position: absolute;
    top: 0;
    right: calc(10 * var(--rws-u));
    bottom: 0;
    width: calc(40 * var(--rws-u));
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: var(--rws-search-icon);
    box-shadow: none;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit > span {
    display: none;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit::before,
html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(19.5 * var(--rws-u));
    height: calc(19.5 * var(--rws-u));
    margin: 0;
    border: 0;
    transform: translate(-50%, -50%);
    background: currentColor;
    font-size: 0;
    opacity: 1;
    animation: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5'%3E%3Cpath d='M7.678,0h.236a7.74,7.74,0,0,1,7.563,7.742,7.732,7.732,0,0,1-1.626,4.746q2.413,2.418,4.83,4.831a3.709,3.709,0,0,1,.4.428,1.137,1.137,0,0,1,.159.423v.188a.992.992,0,0,1-.882.881h-.153a1.012,1.012,0,0,1-.6-.278q-2.559-2.555-5.115-5.111A7.737,7.737,0,0,1,.121,9.1,8.912,8.912,0,0,1,0,7.954V7.563A7.747,7.747,0,0,1,7.678,0M7.417,1.936a5.812,5.812,0,1,0,3.129.71A5.83,5.83,0,0,0,7.417,1.936Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5'%3E%3Cpath d='M7.678,0h.236a7.74,7.74,0,0,1,7.563,7.742,7.732,7.732,0,0,1-1.626,4.746q2.413,2.418,4.83,4.831a3.709,3.709,0,0,1,.4.428,1.137,1.137,0,0,1,.159.423v.188a.992.992,0,0,1-.882.881h-.153a1.012,1.012,0,0,1-.6-.278q-2.559-2.555-5.115-5.111A7.737,7.737,0,0,1,.121,9.1,8.912,8.912,0,0,1,0,7.954V7.563A7.747,7.747,0,0,1,7.678,0M7.417,1.936a5.812,5.812,0,1,0,3.129.71A5.83,5.83,0,0,0,7.417,1.936Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* WoodMart dibuja el icono/cargador en ::after: solo se usa ::before. */
html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit::after {
    display: none;
}

html body.rw-shop-ui .whb-general-header .wd-search-form .searchsubmit:hover,
html body.rw-shop-ui .whb-general-header .wd-search-form .searchform:focus-within .searchsubmit {
    color: var(--rws-text-2);
}

html body.rw-shop-ui .whb-general-header .wd-search-form .wd-clear-search {
    right: calc(52 * var(--rws-u));
}

/* ==========================================================================
   Barra: menú de la biblioteca + herramientas de la lista
   ========================================================================== */

.rw-shop-bar {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--rws-u));
    width: 100%;
    min-width: 0;
    font-family: var(--rws-font);
}

.rw-shop-menu {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

/* Solo si no caben todas (shop-ui.js marca el desbordamiento). */
.rw-shop-menu.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.rw-shop-menu.is-overflowing.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.rw-shop-menu.is-overflowing.is-scrolled-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
    mask-image: linear-gradient(90deg, transparent, #000 28px);
}

.rw-shop-menu::-webkit-scrollbar {
    display: none;
}

.rw-shop-menu__list {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--rws-u));
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-shop-menu__item {
    flex: 0 0 auto;
    margin: 0;
}

html body.rw-shop-ui .rw-shop-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--rws-ctl-h);
    padding: 0 calc(19 * var(--rws-u));
    border: 1px solid var(--rws-line);
    border-radius: 999px;
    background: var(--rws-pill-bg);
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: max(13px, calc(15 * var(--rws-u)));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-menu__link:hover {
    border-color: var(--rws-line-strong);
    color: var(--rws-text);
}

html body.rw-shop-ui .rw-shop-menu__link.is-active {
    padding: 0 calc(22 * var(--rws-u));
    border-color: var(--rws-pill-active-bg);
    background: var(--rws-pill-active-bg);
    color: var(--rws-pill-active-text);
    font-size: max(14px, calc(16 * var(--rws-u)));
    font-weight: 600;
}

html body.rw-shop-ui .rw-shop-menu__link:focus-visible,
html body.rw-shop-ui .rw-shop-pill:focus-visible,
html body.rw-shop-ui .rw-shop-color__swatch:focus-visible,
html body.rw-shop-ui .rw-shop-order__button:focus-visible,
html body.rw-shop-ui .rw-shop-filters__close:focus-visible,
html body.rw-shop-ui .rw-shop-filters__open:focus-visible,
html body.rw-shop-ui .rw-shop-filter__toggle:focus-visible {
    outline: 2px solid var(--rws-focus);
    outline-offset: 2px;
}

/* El tema pone un contorno punteado a todo :focus; aquí solo con teclado. */
html body.rw-shop-ui :is(.rw-shop-bar, .rw-shop-mbar, .rw-shop-filters, .rw-shop-filters__open, .rw-shop-color__popover, .rw-shop-order__list) :focus:not(:focus-visible),
html body.rw-shop-ui .rw-shop-filters__open:focus:not(:focus-visible) {
    outline: none;
}

html body.rw-shop-ui .rw-shop-order__option:focus-visible {
    outline: 2px solid var(--rws-focus);
    outline-offset: -2px;
}

/* --- Herramientas: vista · color · orden ------------------------------ */

.rw-shop-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: calc(14 * var(--rws-u));
    margin-left: auto;
}

.rw-shop-toolbar__views {
    display: flex;
    align-items: center;
}

html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--rws-u));
    margin: 0;
    padding: 0 calc(16 * var(--rws-u));
}

html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view .shop-view {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(24 * var(--rws-u));
    height: calc(24 * var(--rws-u));
    margin: 0;
    padding: 0;
    color: var(--rws-view);
    transition: color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view .shop-view::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    font-size: 0;
    -webkit-mask: var(--rws-view-icon) center / contain no-repeat;
    mask: var(--rws-view-icon) center / contain no-repeat;
}

html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view .shop-view:hover {
    color: var(--rws-view-hover);
}

html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view .shop-view.current-variation {
    color: var(--rws-view-active);
}

.rw-shop-toolbar .shop-view.per-row-list {
    --rws-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='4' width='22' height='2' rx='1'/%3E%3Crect x='1' y='11' width='22' height='2' rx='1'/%3E%3Crect x='1' y='18' width='22' height='2' rx='1'/%3E%3C/svg%3E");
}

.rw-shop-toolbar .shop-view.per-row-2 {
    --rws-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='7' r='3.2'/%3E%3Ccircle cx='17' cy='7' r='3.2'/%3E%3Ccircle cx='7' cy='17' r='3.2'/%3E%3Ccircle cx='17' cy='17' r='3.2'/%3E%3C/svg%3E");
}

.rw-shop-toolbar .shop-view.per-row-3 {
    --rws-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='4' r='2.7'/%3E%3Ccircle cx='12' cy='4' r='2.7'/%3E%3Ccircle cx='20' cy='4' r='2.7'/%3E%3Ccircle cx='4' cy='12' r='2.7'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3Ccircle cx='20' cy='12' r='2.7'/%3E%3Ccircle cx='4' cy='20' r='2.7'/%3E%3Ccircle cx='12' cy='20' r='2.7'/%3E%3Ccircle cx='20' cy='20' r='2.7'/%3E%3C/svg%3E");
}

.rw-shop-toolbar .shop-view.per-row-4,
.rw-shop-toolbar .shop-view.per-row-5,
.rw-shop-toolbar .shop-view.per-row-6 {
    --rws-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='3' cy='3' r='2.15'/%3E%3Ccircle cx='9' cy='3' r='2.15'/%3E%3Ccircle cx='15' cy='3' r='2.15'/%3E%3Ccircle cx='21' cy='3' r='2.15'/%3E%3Ccircle cx='3' cy='9' r='2.15'/%3E%3Ccircle cx='9' cy='9' r='2.15'/%3E%3Ccircle cx='15' cy='9' r='2.15'/%3E%3Ccircle cx='21' cy='9' r='2.15'/%3E%3Ccircle cx='3' cy='15' r='2.15'/%3E%3Ccircle cx='9' cy='15' r='2.15'/%3E%3Ccircle cx='15' cy='15' r='2.15'/%3E%3Ccircle cx='21' cy='15' r='2.15'/%3E%3Ccircle cx='3' cy='21' r='2.15'/%3E%3Ccircle cx='9' cy='21' r='2.15'/%3E%3Ccircle cx='15' cy='21' r='2.15'/%3E%3Ccircle cx='21' cy='21' r='2.15'/%3E%3C/svg%3E");
}

/* --- Orden: el <select> de WooCommerce queda detrás de una píldora ------ */

.rw-shop-toolbar__order {
    position: relative;
    display: flex;
    align-items: center;
}

html body.rw-shop-ui .rw-shop-toolbar .woocommerce-ordering {
    position: relative;
    margin: 0;
}

html body.rw-shop-ui .rw-shop-toolbar .woocommerce-ordering select.orderby {
    height: var(--rws-ctl-h);
    padding: 0 calc(30 * var(--rws-u));
    border: 1px solid var(--rws-line);
    border-radius: 999px;
    background: var(--rws-pill-bg);
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: max(14px, calc(16 * var(--rws-u)));
    font-weight: 400;
}

html body.rw-shop-ui .rw-shop-toolbar .woocommerce-ordering.is-enhanced select.orderby {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

html body.rw-shop-ui .rw-shop-order__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: calc(129 * var(--rws-u));
    height: var(--rws-ctl-h);
    min-height: 0;
    margin: 0;
    padding: 0 calc(30 * var(--rws-u));
    border: 1px solid var(--rws-line);
    border-radius: 999px;
    background: var(--rws-pill-bg);
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: max(14px, calc(16 * var(--rws-u)));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-order__button:hover,
html body.rw-shop-ui .rw-shop-order__button[aria-expanded="true"] {
    border-color: var(--rws-line-strong);
    background: var(--rws-pill-bg);
    color: var(--rws-text);
}

.rw-shop-order__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 400;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--rws-popover-line);
    border-radius: 16px;
    background: var(--rws-popover-bg);
    list-style: none;
    font-family: var(--rws-font);
}

.rw-shop-order__list[hidden] {
    display: none;
}

html body.rw-shop-ui .rw-shop-order__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
}

html body.rw-shop-ui .rw-shop-order__option:hover,
html body.rw-shop-ui .rw-shop-order__option:focus-visible {
    background: var(--rws-hover);
    color: var(--rws-text);
    outline: none;
}

html body.rw-shop-ui .rw-shop-order__option[aria-selected="true"] {
    color: var(--rws-text);
    font-weight: 600;
}

.rw-shop-order__check {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    visibility: hidden;
}

.rw-shop-order__option[aria-selected="true"] .rw-shop-order__check {
    visibility: visible;
}

/* --- Selector de color ------------------------------------------------- */

.rw-shop-color {
    position: relative;
    display: flex;
    align-items: center;
    --rws-picked: #5c97e6;
}

html body.rw-shop-ui .rw-shop-color__swatch {
    position: relative;
    display: block;
    width: calc(38 * var(--rws-u));
    height: calc(38 * var(--rws-u));
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid var(--rws-line);
    border-radius: 50%;
    background: var(--rws-swatch-bg);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-color__swatch:hover,
html body.rw-shop-ui .rw-shop-color__swatch[aria-expanded="true"] {
    border-color: var(--rws-line-strong);
    background: var(--rws-swatch-bg);
}

.rw-shop-color__dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--rws-picked);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.rw-shop-color.is-picked .rw-shop-color__dot {
    opacity: 1;
    transform: none;
}

.rw-shop-color__popover {
    position: absolute;
    top: calc(100% + 12px);
    right: calc(-60 * var(--rws-u));
    z-index: 400;
    width: 250px;
    padding: 10px;
    border: 1px solid var(--rws-popover-line);
    border-radius: 18px;
    background: var(--rws-popover-bg);
    font-family: var(--rws-font);
}

.rw-shop-color__popover[hidden] {
    display: none;
}

.rw-shop-color__sv {
    position: relative;
    height: 150px;
    border-radius: 12px;
    background:
        linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
        linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
        hsl(var(--rws-hue, 214), 100%, 50%);
    cursor: crosshair;
    touch-action: none;
    outline: none;
}

.rw-shop-color__sv-handle {
    position: absolute;
    top: var(--rws-sv-y, 10%);
    left: var(--rws-sv-x, 60%);
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--rws-picked);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rw-shop-color__hue {
    position: relative;
    height: 12px;
    margin: 16px 6px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.rw-shop-color__hue-handle {
    position: absolute;
    top: 50%;
    left: var(--rws-hue-x, 59%);
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: hsl(var(--rws-hue, 214), 100%, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rw-shop-color__sv:focus-visible,
.rw-shop-color__hue:focus-visible {
    outline: 2px solid var(--rws-focus);
    outline-offset: 3px;
}

html body.rw-shop-ui .rw-shop-color__hex {
    display: block;
    width: 100%;
    height: 44px;
    margin: 18px 0 0;
    padding: 0 12px;
    border: 1px solid var(--rws-input-line);
    border-radius: 12px;
    background: var(--rws-input-bg);
    color: var(--rws-text);
    font-family: var(--rws-font);
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: none;
}

html body.rw-shop-ui .rw-shop-color__hex:focus {
    border-color: var(--rws-line-strong);
    outline: none;
}

html body.rw-shop-ui .rw-shop-color__submit {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 0;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--rws-color-submit);
    color: #ffffff;
    font-family: var(--rws-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-color__submit:hover {
    background: var(--rws-color-submit-hover);
    color: #ffffff;
}

html body.rw-shop-ui .rw-shop-color__clear {
    display: block;
    margin: 10px 0 2px;
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

html body.rw-shop-ui .rw-shop-color__clear:hover {
    color: var(--rws-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Color activo: el círculo del header lleva un anillo del propio color. */
html body.rw-shop-ui .rw-shop-color.is-active .rw-shop-color__swatch {
    border-color: var(--rws-picked);
}

/* Píldora del filtro de color (sidebar): muestra + código + quitar. */
html body.rw-shop-ui .rw-shop-pill.rw-shop-pill--color {
    gap: 8px;
    padding-left: 6px;
    padding-right: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rw-shop-pill__swatch {
    flex: 0 0 auto;
    width: calc(22 * var(--rws-u));
    height: calc(22 * var(--rws-u));
    min-width: 18px;
    min-height: 18px;
    border: 2px solid var(--rws-pill-active-text);
    border-radius: 50%;
}

.rw-shop-pill__remove {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    opacity: 0.8;
}

.rw-shop-pill--color:hover .rw-shop-pill__remove {
    opacity: 1;
}

/* Los originales del listado solo se ven donde el header no lleva la barra. */
@media (min-width: 1200px) {
    html body.rw-shop-ui--catalog .shop-loop-head .wd-products-shop-view,
    html body.rw-shop-ui--catalog .shop-loop-head .woocommerce-ordering,
    html body.rw-shop-ui--catalog .shop-loop-head .wd-show-sidebar-btn {
        display: none !important;
    }
}

/* ==========================================================================
   Sidebar en tarjeta (mismo componente, mismas animaciones de colapso)
   ========================================================================== */

html body.rw-shop-ui #rw-sidebar {
    --rw-sidebar-bg-surface: var(--rws-surface);
    --rw-sidebar-border: var(--rws-surface-line);
    --rw-sidebar-text: var(--rws-text-2);
    --rw-sidebar-text-hover: var(--rws-text);
    --rw-sidebar-icon: var(--rws-text-2);
    --rw-sidebar-icon-hover: var(--rws-text);
    --rw-sidebar-active-bg: var(--rws-hover);
    --rw-sidebar-site-name: var(--rws-text);
    --rw-sidebar-toggle-icon: #a0a5b5;
    --rw-sidebar-user-bg: transparent;
    --rw-sidebar-user-bg-hover: var(--rws-hover);
    --rw-sidebar-user-border: transparent;
    --rw-sidebar-user-menu-hover: transparent;
    --rw-sidebar-shadow: none;
    top: var(--rws-inset-top);
    left: var(--rws-inset-x);
    height: calc(100vh - var(--rws-inset-top) - var(--rws-inset-bottom));
    height: calc(100dvh - var(--rws-inset-top) - var(--rws-inset-bottom));
    border: 1px solid var(--rws-surface-line);
    border-radius: calc(41 * var(--rws-u));
    background: var(--rws-surface);
    box-shadow: none;
    font-family: var(--rws-font);
    color: var(--rws-text);
}

html body.rw-shop-ui.admin-bar #rw-sidebar {
    top: calc(32px + var(--rws-inset-top));
    height: calc(100vh - 32px - var(--rws-inset-top) - var(--rws-inset-bottom));
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] {
    border-radius: 32px;
}

/* El scroll de una columna del sidebar no debe asomar por las esquinas redondeadas. */
html body.rw-shop-ui #rw-sidebar::-webkit-scrollbar {
    width: 0;
}

/* --- Cabecera: isotipo + marca + botón de colapsar --------------------- */

html body.rw-shop-ui #rw-sidebar .rw-sidebar__header {
    min-height: 0;
    padding: calc(30 * var(--rws-u)) calc(16 * var(--rws-u)) calc(10 * var(--rws-u)) calc(30 * var(--rws-u));
    border-bottom: 0;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__logo {
    gap: calc(10 * var(--rws-u));
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__logo img.rw-sidebar__logo-img {
    width: auto;
    height: calc(32 * var(--rws-u));
    max-height: none;
    max-width: none;
    flex: 0 0 auto;
}

.rw-shop-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22em;
    font-family: "Nunito", var(--rws-font);
    font-size: max(12px, calc(34 * var(--rws-u)));
    line-height: 1;
    letter-spacing: -0.038em;
    white-space: nowrap;
    color: var(--rws-text);
}

html body.rw-shop-ui #rw-sidebar .rw-shop-wordmark {
    font-size: max(12px, calc(34 * var(--rws-u)));
    font-weight: 400;
    overflow: visible;
}

.rw-shop-wordmark__strong {
    font-weight: 700;
}

.rw-shop-wordmark__light {
    font-weight: 300;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__toggle {
    width: calc(40 * var(--rws-u));
    height: calc(36 * var(--rws-u));
    min-height: 0;
    padding: 0;
    border-radius: 16px;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__header {
    padding: 22px 12px 12px;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__logo img.rw-sidebar__logo-img {
    height: 28px;
}

/* --- Colapsar/expandir sin reflujo ------------------------------------
   Mientras la tarjeta anima su ancho, el contenido de la versión ancha conserva
   su ancho final (el sidebar recorta lo que sobra) y los filtros entran con un
   fundido, en lugar de recolocarse fotograma a fotograma. */

@media (min-width: 1200px) {
    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-sidebar__header,
    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-shop-filters-slot,
    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-sidebar__nav,
    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-sidebar__footer {
        flex-shrink: 0;
        box-sizing: border-box;
        width: calc(var(--rws-sidebar-w) - 2px) !important;
    }

    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-sidebar__credits.rw-sidebar__credits {
        flex-shrink: 0;
        width: calc(var(--rws-sidebar-w) - 2px - 2 * var(--rws-pad)) !important;
    }

    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-shop-filters {
        animation: rws-fade-in 0.28s ease both;
    }
}

@keyframes rws-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* El tema pone un contorno punteado al botón al pulsarlo; solo con teclado. */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__toggle:focus:not(:focus-visible) {
    outline: none !important;
}

/* --- Filtros ------------------------------------------------------------ */

.rw-shop-filters {
    padding: calc(8 * var(--rws-u)) var(--rws-pad) calc(20 * var(--rws-u));
}

html body.rw-shop-ui .rw-shop-filters__close,
html body.rw-shop-ui .rw-shop-filters__open {
    display: inline-flex;
    align-items: center;
    gap: calc(9 * var(--rws-u));
    min-height: 0;
    margin: 0 0 calc(16 * var(--rws-u));
    padding: 4px calc(6 * var(--rws-u));
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: max(12px, calc(13 * var(--rws-u)));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

html body.rw-shop-ui .rw-shop-filters__close:hover,
html body.rw-shop-ui .rw-shop-filters__open:hover {
    background: transparent;
    color: var(--rws-text);
}

.rw-shop-filters__close-icon {
    width: calc(16.2 * var(--rws-u));
    height: calc(13.5 * var(--rws-u));
    color: var(--rws-icon-muted);
    transition: transform 0.2s ease;
}

.rw-shop-filters__close:hover .rw-shop-filters__close-icon {
    transform: translateX(-2px);
}

.rw-shop-filters__open {
    display: none !important;
}

.rw-shop-filters__open-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.rw-shop-filter {
    margin: 0 0 calc(22 * var(--rws-u));
    padding: calc(30 * var(--rws-u)) calc(23 * var(--rws-u)) calc(32 * var(--rws-u)) calc(26 * var(--rws-u));
    border: 1px solid var(--rws-card-line);
    border-radius: calc(41 * var(--rws-u));
    background: var(--rws-card);
}

.rw-shop-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: calc(6 * var(--rws-u));
}

html body.rw-shop-ui .rw-shop-filter__title {
    margin: 0;
    padding: 0;
    color: var(--rws-text);
    font-family: var(--rws-font);
    font-size: max(15px, calc(17 * var(--rws-u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

html body.rw-shop-ui .rw-shop-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(26 * var(--rws-u));
    height: calc(26 * var(--rws-u));
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rws-circle-bg);
    color: var(--rws-circle-icon);
    box-shadow: none;
    cursor: pointer;
}

html body.rw-shop-ui .rw-shop-filter__toggle:hover {
    background: var(--rws-circle-bg);
    color: var(--rws-circle-icon);
    opacity: 0.85;
}

.rw-shop-filter__toggle svg {
    width: calc(6.2 * var(--rws-u));
    height: calc(9.7 * var(--rws-u));
    transform: rotate(-90deg);
    transition: transform 0.25s ease;
}

.rw-shop-filter__toggle[aria-expanded="false"] svg {
    transform: rotate(90deg);
}

.rw-shop-filter__body {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: calc(18 * var(--rws-u));
    transition: grid-template-rows 0.25s ease, margin-top 0.25s ease;
}

.rw-shop-filter.is-collapsed .rw-shop-filter__body {
    grid-template-rows: 0fr;
    margin-top: 0;
}

.rw-shop-pills {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--rws-u)) calc(13 * var(--rws-u));
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.rw-shop-pills > li {
    margin: 0;
}

html body.rw-shop-ui .rw-shop-pill {
    display: inline-flex;
    align-items: center;
    height: calc(34 * var(--rws-u));
    padding: 0 calc(15 * var(--rws-u)) 0 calc(16 * var(--rws-u));
    border: 1px solid var(--rws-line);
    border-radius: 999px;
    background: var(--rws-pill-bg);
    color: var(--rws-text-2);
    font-family: var(--rws-font);
    font-size: max(14px, calc(16 * var(--rws-u)));
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

html body.rw-shop-ui .rw-shop-pill:hover {
    border-color: var(--rws-line-strong);
    color: var(--rws-text);
}

html body.rw-shop-ui .rw-shop-pill.is-active {
    border-color: var(--rws-pill-active-bg);
    background: var(--rws-pill-active-bg);
    color: var(--rws-pill-active-text);
}

/* Filtros abiertos: ocupan el lugar del menú. */
body.rw-shop-has-filters:not(.rw-shop-filters-closed) #rw-sidebar[data-collapsed="false"] .rw-sidebar__nav {
    display: none;
}

/* Filtros cerrados (o sidebar colapsado): vuelve el menú habitual. */
body.rw-shop-filters-closed #rw-sidebar .rw-shop-filters,
#rw-sidebar[data-collapsed="true"] .rw-shop-filters {
    display: none;
}

html body.rw-shop-filters-closed #rw-sidebar[data-collapsed="false"] .rw-shop-filters__open {
    display: flex !important;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    margin: calc(6 * var(--rws-u)) calc(18 * var(--rws-u)) 0;
    padding: 10px 12px;
    border-radius: var(--rw-sidebar-link-radius, 12px);
    color: var(--rws-text-2);
    font-size: 14px;
    font-weight: 500;
}

html body.rw-shop-filters-closed #rw-sidebar[data-collapsed="false"] .rw-shop-filters__open:hover {
    background: var(--rws-hover);
    color: var(--rws-text);
}

/* ==========================================================================
   Menú habitual dentro de la tarjeta
   ========================================================================== */

html body.rw-shop-ui #rw-sidebar .rw-sidebar__nav {
    padding: calc(12 * var(--rws-u)) calc(18 * var(--rws-u)) calc(12 * var(--rws-u));
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__nav {
    padding: 12px 8px;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__label {
    font-family: var(--rws-font);
}

/* ==========================================================================
   Descargas (tarjeta inferior)
   ========================================================================== */

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits.rw-sidebar__credits {
    position: relative !important;
    margin: auto var(--rws-pad) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: calc(26 * var(--rws-u)) !important;
    background: var(--rws-card) !important;
    transition: border-radius 0.2s ease !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits:has([aria-expanded="true"]) {
    border-radius: calc(28 * var(--rws-u)) !important;
}

html body.rw-shop-ui #rw-sidebar button.rw-sidebar__credits-toggle.rw-sidebar__credits-toggle {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title label arrow"
        "title bar arrow" !important;
    align-items: center !important;
    column-gap: calc(12 * var(--rws-u)) !important;
    row-gap: 2px !important;
    width: 100% !important;
    min-height: calc(52 * var(--rws-u)) !important;
    margin: 0 !important;
    padding: calc(8 * var(--rws-u)) calc(13 * var(--rws-u)) calc(8 * var(--rws-u)) calc(16 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: var(--rws-text) !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-summary.rw-sidebar__credits-summary {
    display: contents !important;
}

.rw-sidebar__credits-title {
    grid-area: title !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: calc(7 * var(--rws-u)) !important;
    color: var(--rws-text) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.rw-sidebar__credits-title-icon {
    display: inline-flex !important;
    width: calc(16.4 * var(--rws-u)) !important;
    height: calc(11.6 * var(--rws-u)) !important;
}

.rw-sidebar__credits-title-icon svg {
    width: 100% !important;
    height: 100% !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-label.rw-sidebar__credits-label {
    grid-area: label !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rws-text-3) !important;
    font-size: max(10px, calc(10 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-arrow.rw-sidebar__credits-arrow {
    grid-area: arrow !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(19 * var(--rws-u)) !important;
    height: calc(19 * var(--rws-u)) !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--rws-circle-bg) !important;
    color: var(--rws-circle-icon) !important;
    transform: none !important;
    opacity: 1 !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-arrow.rw-sidebar__credits-arrow svg {
    width: calc(9 * var(--rws-u)) !important;
    height: calc(9 * var(--rws-u)) !important;
    transform: rotate(180deg) !important;
    transition: transform 0.25s ease !important;
}

html body.rw-shop-ui #rw-sidebar button.rw-sidebar__credits-toggle[aria-expanded="true"] .rw-sidebar__credits-arrow svg {
    transform: none !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-bar.rw-sidebar__credits-bar {
    grid-area: bar !important;
    width: 100% !important;
    height: calc(11 * var(--rws-u)) !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--rws-bar-track) !important;
    overflow: hidden !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-bar-fill.rw-sidebar__credits-bar-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--rws-bar-fill) !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-details.rw-sidebar__credits-details {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-details-inner.rw-sidebar__credits-details-inner {
    padding: calc(4 * var(--rws-u)) calc(16 * var(--rws-u)) calc(16 * var(--rws-u)) calc(21 * var(--rws-u)) !important;
    border: 0 !important;
    background: transparent !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-list.rw-sidebar__credits-list {
    display: grid !important;
    gap: calc(8 * var(--rws-u)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Las filas ocultas siguen ocultas (p. ej. la nota de promocionales sin saldo)… */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row[hidden] {
    display: none !important;
}

/* …salvo la de promocionales, que la referencia muestra siempre (también en 0). */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row[data-rw-credits-promo-row][hidden] {
    display: flex !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row dt {
    margin: 0 !important;
    color: var(--rws-text-3) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row:not([data-rw-credits-promo-note]) dt::after {
    content: ":" !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row.rw-sidebar__credits-row dd {
    margin: 0 !important;
    color: var(--rws-value) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-row[data-rw-credits-promo-note] dt {
    font-size: max(11px, calc(12 * var(--rws-u))) !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-actions.rw-sidebar__credits-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: calc(18 * var(--rws-u)) 0 0 !important;
    padding: 0 !important;
}

html body.rw-shop-ui #rw-sidebar a.rw-sidebar__credits-action--upgrade.rw-sidebar__credits-action--upgrade {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: calc(102 * var(--rws-u)) !important;
    height: calc(26 * var(--rws-u)) !important;
    padding: 0 calc(18 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--rws-upgrade) !important;
    color: #ffffff !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body.rw-shop-ui #rw-sidebar a.rw-sidebar__credits-action--upgrade.rw-sidebar__credits-action--upgrade:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
}

html body.rw-shop-ui #rw-sidebar a.rw-sidebar__credits-action--info.rw-sidebar__credits-action--info {
    padding: 0 0 4px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rws-underline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rws-text-3) !important;
    font-size: max(13px, calc(14 * var(--rws-u))) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body.rw-shop-ui #rw-sidebar a.rw-sidebar__credits-action--info.rw-sidebar__credits-action--info:hover {
    color: var(--rws-text) !important;
    background: transparent !important;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits.rw-sidebar__credits {
    margin: auto 8px 0 !important;
    border-radius: 24px !important;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] button.rw-sidebar__credits-toggle.rw-sidebar__credits-toggle {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" !important;
    justify-items: center !important;
    padding: 12px 0 !important;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-title-text,
html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-label,
html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-arrow,
html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__credits-bar {
    display: none !important;
}

/* ==========================================================================
   Pie: usuario o línea de inicio de sesión
   ========================================================================== */

/* Pie en su sitio (no sticky): con las descargas desplegadas no las tapa. */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__footer {
    position: static !important;
    margin-top: 0 !important;
    padding: calc(18 * var(--rws-u)) var(--rws-pad) calc(16 * var(--rws-u)) !important;
    border-top: 0 !important;
    background: var(--rws-surface) !important;
    border-radius: 0 0 calc(41 * var(--rws-u)) calc(41 * var(--rws-u)) !important;
}

/* Sin tarjeta de descargas, el pie baja al fondo de la tarjeta. */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__nav + .rw-sidebar__footer {
    margin-top: auto !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-menu {
    padding: 0 !important;
}

html body.rw-shop-ui #rw-sidebar button.rw-sidebar__user.rw-sidebar__user-trigger {
    gap: calc(12 * var(--rws-u)) !important;
    padding: 6px calc(6 * var(--rws-u)) 6px calc(8 * var(--rws-u)) !important;
    border: 0 !important;
    border-radius: 22px !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-main {
    gap: calc(12 * var(--rws-u)) !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-avatar {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--rws-card-line) !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-trigger,
html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-trigger * {
    text-transform: none !important;
    text-align: left !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 1px !important;
}

html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-name {
    color: var(--rws-text) !important;
    font-family: var(--rws-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rw-sidebar__user-email {
    display: block !important;
    color: var(--rws-text-3) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Menú de usuario: 10 px más ancho y crece hacia la izquierda. Su animación
   (sidebar-footer.css) lo centra con translateX(-50%): se desplaza el centro
   5 px para que el borde derecho quede donde estaba. */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-panel {
    width: 230px !important;
    left: calc(50% - 5px) !important;
}

/* La referencia no muestra insignia ni flecha: el menú se abre igual al pulsar. */
html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-badge,
html body.rw-shop-ui #rw-sidebar .rw-sidebar__user-trigger-icon {
    display: none !important;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__footer {
    padding: 12px 0 16px !important;
    border-radius: 0 0 32px 32px !important;
}

html body.rw-shop-ui #rw-sidebar[data-collapsed="true"] .rw-sidebar__user-avatar {
    width: 36px !important;
    height: 36px !important;
}

.rw-sidebar__login-line {
    margin: 0 !important;
    padding: calc(4 * var(--rws-u)) 0 calc(8 * var(--rws-u)) !important;
    color: #636363 !important;
    font-family: var(--rws-font) !important;
    font-size: max(13px, calc(15 * var(--rws-u))) !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

html[data-rw-mode="dark"] .rw-sidebar__login-line {
    color: var(--rws-text-2) !important;
}

html body.rw-shop-ui .rw-sidebar__login-line-link {
    color: var(--rws-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

html body.rw-shop-ui .rw-sidebar__login-line-link:hover {
    color: var(--rws-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.rw-sidebar__login-line-icon {
    display: none !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-text,
#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-label {
    display: none !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    border: 1px solid var(--rws-card-line) !important;
    border-radius: 50% !important;
    background: var(--rws-card) !important;
}

#rw-sidebar[data-collapsed="true"] .rw-sidebar__login-line-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   Carga AJAX: barra de progreso y esqueleto (mismo estilo que Cuenta)
   ========================================================================== */

html body.rw-shop-ui {
    --rws-skel: color-mix(in srgb, var(--rws-text) 7%, transparent);
    --rws-skel-shine: color-mix(in srgb, var(--rws-text) 4%, transparent);
    --rws-progress: var(--wd-primary-color, #7700ff);
}

html[data-rw-mode="dark"] body.rw-shop-ui,
html:not([data-rw-mode]) body.rw-shop-ui.global-color-scheme-light {
    --rws-skel: color-mix(in srgb, var(--rws-text) 8.5%, transparent);
    --rws-skel-shine: color-mix(in srgb, var(--rws-text) 6%, transparent);
}

.rws-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--rw-current-sidebar-width, 0px);
    z-index: 100001;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.admin-bar .rws-progress {
    top: 32px;
}

.rws-progress.is-active {
    opacity: 1;
}

.rws-progress::before {
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--rws-progress);
    transform: translateX(-100%);
    animation: rws-progress 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    content: "";
}

@keyframes rws-progress {
    to { transform: translateX(260%); }
}

/* Mientras llega la página: esqueleto en lugar de la rejilla y sin el spinner del tema. */
html body.rw-shop-ui.rws-loading .wd-page-content .wd-products-element,
html body.rw-shop-ui.rws-loading .wd-page-content .products-footer,
html body.rw-shop-ui.rws-loading .wd-page-content .wd-sticky-loader {
    display: none !important;
}

/* Flex y no grid: el alto de cada pieza sale de su proporción y las filas nunca se
   estiran (en un grid de alto fijo las piezas se montaban unas sobre otras). */
.rws-skel {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--rws-gap-y, 10px) var(--rws-gap-x, 10px);
    margin: 0 0 30px;
    animation: rws-fade-in 0.14s ease-out both;
}

.rws-skel > .rws-sk--media {
    flex: 0 0 calc((100% - (var(--rws-cols, 4) - 1) * var(--rws-gap-x, 10px)) / var(--rws-cols, 4));
    width: auto;
}

.rws-skel--list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 28px;
}

.rws-skel__row {
    display: grid;
    grid-template-columns: minmax(180px, 20%) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.rws-skel__lines {
    display: grid;
    gap: 12px;
    padding-top: 6px;
}

.rws-sk {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: var(--rws-skel);
}

.rws-sk::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--rws-skel-shine) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: rws-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    content: "";
}

.rws-sk--media {
    height: auto;
    aspect-ratio: var(--rws-ratio, 16 / 9);
    border-radius: var(--rws-radius, 8px);
}

.rws-sk--title {
    width: 62%;
    height: 16px;
}

.rws-sk--price {
    width: 18%;
    height: 14px;
}

.rws-sk--line-sm {
    width: 86%;
    height: 10px;
}

.rws-sk--btn {
    width: 140px;
    height: 34px;
    border-radius: 999px;
}

@keyframes rws-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .rws-skel,
    html body.rw-shop-ui #rw-sidebar[data-collapsed="false"] .rw-shop-filters {
        animation: none;
    }

    .rws-sk::after,
    .rws-progress::before {
        display: none;
    }
}

/* ==========================================================================
   Móvil y tableta: sin sidebar, la barra va encima del listado
   ========================================================================== */

.rw-shop-mbar {
    display: none;
}

@media (max-width: 1199px) {
    .rw-shop-mbar {
        display: grid;
        gap: 12px;
        margin: 0 0 20px;
        font-family: var(--rws-font);
    }

    .rw-shop-mbar .rw-shop-menu {
        margin: 0 -15px;
        padding: 0 15px;
    }

    html body.rw-shop-ui .rw-shop-mbar .rw-shop-menu__link {
        height: 42px;
        padding: 0 18px;
        font-size: 15px;
    }

    html body.rw-shop-ui .rw-shop-mbar .rw-shop-menu__link.is-active {
        padding: 0 22px;
        font-size: 16px;
    }

    .rw-shop-mbar__tools {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    html body.rw-shop-ui .rw-shop-mbar__filters {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        min-height: 0;
        margin: 0;
        padding: 0 16px;
        border: 1px solid var(--rws-line);
        border-radius: 999px;
        background: var(--rws-pill-bg);
        color: var(--rws-text-2);
        font-family: var(--rws-font);
        font-size: 15px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        box-shadow: none;
    }

    html body.rw-shop-ui .rw-shop-mbar__filters[aria-expanded="true"] {
        border-color: var(--rws-pill-active-bg);
        background: var(--rws-pill-active-bg);
        color: var(--rws-pill-active-text);
    }

    .rw-shop-mbar__filters svg {
        width: 18px;
        height: 18px;
    }

    html body.rw-shop-ui .rw-shop-mbar .rw-shop-color__swatch {
        width: 38px;
        height: 38px;
    }

    .rw-shop-mbar .rw-shop-color__popover {
        right: auto;
        left: 0;
    }

    .rw-shop-mbar__panel[hidden] {
        display: none;
    }

    .rw-shop-filters--inline {
        display: grid;
        gap: 12px;
        padding: 0;
    }

    .rw-shop-filters--inline .rw-shop-filter {
        margin: 0;
        padding: 20px 18px 22px 20px;
        border-radius: 28px;
    }

    html body.rw-shop-ui .rw-shop-filters--inline .rw-shop-pill {
        height: 34px;
        font-size: 15px;
    }

    html body.rw-shop-ui .rw-shop-filters--inline .rw-shop-filter__title {
        font-size: 16px;
    }

    html body.rw-shop-ui .rw-shop-filters--inline .rw-shop-filter__toggle {
        width: 26px;
        height: 26px;
    }
}

/* Portátiles: la barra se compacta y las píldoras se desplazan si no caben. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .rw-shop-bar {
        gap: 12px;
    }

    .rw-shop-toolbar {
        gap: 8px;
    }

    html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view {
        gap: 10px;
        padding: 0 4px;
    }

    html body.rw-shop-ui .rw-shop-toolbar .wd-products-shop-view .shop-view {
        width: 20px;
        height: 20px;
    }

    html body.rw-shop-ui .rw-shop-menu__link {
        padding: 0 16px;
    }

    html body.rw-shop-ui .rw-shop-menu__link.is-active {
        padding: 0 20px;
    }

    html body.rw-shop-ui .rw-shop-order__button {
        min-width: 0;
        padding: 0 16px;
    }

    html body.rw-shop-ui .whb-general-header .whb-col-center {
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-shop-filter__body,
    .rw-shop-filter__toggle svg,
    .rw-shop-color__dot,
    html body.rw-shop-ui #rw-sidebar .rw-sidebar__credits-arrow svg {
        transition: none;
    }
}