/* ==========================================================================
   ARC GAMES — WooCommerce
   Presentation only
   Mobile First

   WooCommerce remains responsible for:
   products, prices, stock, cart, orders, customers and checkout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   WooCommerce general
   -------------------------------------------------------------------------- */

.woocommerce {
    color: var(--arc-text);
}

.woocommerce-page {
    background: var(--arc-bg);
}


/* ==========================================================================
   ARC GAMES — Página Productos
   Layout visual
   ========================================================================== */


/* --------------------------------------------------------------------------
   Contenedor general de la página
   -------------------------------------------------------------------------- */

.woocommerce-page main.site-main {
    width: min(
        calc(100% - (var(--arc-space-md) * 2)),
        var(--arc-container)
    );

    margin-inline: auto;
    padding-block-start: var(--arc-page-top-gap);
}


@media (min-width: 768px) {

    .woocommerce-page main.site-main {
        width: min(
            calc(100% - (var(--arc-space-lg) * 2)),
            var(--arc-container)
        );
    }

}


@media (min-width: 1200px) {

    .woocommerce-page main.site-main {
        width: min(
            calc(100% - (var(--arc-space-xl) * 2)),
            var(--arc-container)
        );
    }

}


/* --------------------------------------------------------------------------
   Título de Productos
   -------------------------------------------------------------------------- */

.woocommerce-page h1 {
    margin-bottom: var(--arc-space-lg);

    color: var(--arc-text);

    font-family: var(--arc-font-heading);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 400;

    line-height: 1.1;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Product Filters + Shop Layout
   -------------------------------------------------------------------------- */

/*
 * Mobile First
 *
 * En móvil:
 * filtros arriba del catálogo.
 *
 * Desde 1024px:
 * filtros a la izquierda + catálogo a la derecha.
 */

.arc-shop__content {
    display: flex;
    flex-direction: column;
    gap: var(--arc-space-xl);

    width: 100%;
}


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

.arc-shop__filters {
    width: 100%;
    min-width: 0;
}


.wc-block-product-filters {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: var(--arc-text);

    font-family: var(--arc-font-main);
}


/* --------------------------------------------------------------------------
   Grupos de filtros
   -------------------------------------------------------------------------- */

.arc-shop__filters
.wp-block-woocommerce-product-filter-status,

.arc-shop__filters
.wp-block-woocommerce-product-filter-taxonomy,

.arc-shop__filters
.wp-block-woocommerce-product-filter-attribute {
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
}


.arc-shop__filters
.wp-block-woocommerce-product-filter-status
+ .wp-block-woocommerce-product-filter-taxonomy,

.arc-shop__filters
.wp-block-woocommerce-product-filter-taxonomy
+ .wp-block-woocommerce-product-filter-attribute {
    margin-top: var(--arc-space-lg);
}


/* --------------------------------------------------------------------------
   Títulos de filtros
   -------------------------------------------------------------------------- */

.arc-filter-title {
    margin: 0 0 var(--arc-space-sm);

    color: var(--arc-primary);

    font-family: var(--arc-font-main);
    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Lista de opciones
   -------------------------------------------------------------------------- */

.arc-shop__filters
.wc-block-product-filter-checkbox-list__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__item {
    margin: 0;
    padding: 0;
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin: 0;

    color: var(--arc-text-muted);

    font-family: var(--arc-font-main);
    font-size: 0.7rem;
    font-weight: 400;

    line-height: 1.35;

    cursor: pointer;
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__label:hover {
    color: var(--arc-primary);
}


/* --------------------------------------------------------------------------
   Checkbox ARC
   -------------------------------------------------------------------------- */

.arc-shop__filters
input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
    width: 14px;
    height: 14px;

    margin: 0;

    border: 1px solid var(--arc-border);
    border-radius: 2px;

    background: var(--arc-bg-dark);

    appearance: none;
    cursor: pointer;
}


.arc-shop__filters
input[type="checkbox"].wc-block-product-filter-checkbox-list__input:hover {
    border-color: var(--arc-primary);
}


.arc-shop__filters
input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
    border-color: var(--arc-primary);
    background: var(--arc-primary);
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__input-wrapper {
    display: flex;
    align-items: center;
    position: relative;

    width: 14px;
    height: 14px;
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__input-wrapper::before {
    display: none;
}


.arc-shop__filters
.wc-block-product-filter-checkbox-list__mark {
    width: 14px;
    height: 14px;

    padding: 2px;

    color: var(--arc-bg-dark);
}


/* --------------------------------------------------------------------------
   Texto de las opciones
   -------------------------------------------------------------------------- */

.arc-shop__filters
.wc-block-product-filter-checkbox-list__text-wrapper {
    display: inline-flex;
    align-items: center;

    color: inherit;

    font-family: var(--arc-font-main);
    font-size: 0.7rem;
    line-height: 1.35;
}


/* --------------------------------------------------------------------------
   Botón móvil de filtros
   -------------------------------------------------------------------------- */

.wc-block-product-filters__open-overlay {
    min-height: 44px;

    padding: 0.65rem 0.85rem;

    border: 1px solid var(--arc-primary);
    border-radius: var(--arc-radius-sm);

    background: var(--arc-bg-panel);
    color: var(--arc-primary);

    font-family: var(--arc-font-main);
    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}


.wc-block-product-filters__open-overlay:hover {
    background: var(--arc-primary);
    color: var(--arc-bg-dark);
}


/* --------------------------------------------------------------------------
   Catálogo
   -------------------------------------------------------------------------- */

.arc-shop__products {
    width: 100%;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Desktop — filtros laterales
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

    .arc-shop__content {
        display: grid;

        grid-template-columns: 220px minmax(0, 1fr);

        align-items: start;

        column-gap: var(--arc-space-xl);
    }


    .arc-shop__filters {
        position: relative;

        width: 100%;
    }


    .arc-shop__products {
        min-width: 0;
    }

}


/* --------------------------------------------------------------------------
   Desktop amplio
   -------------------------------------------------------------------------- */

@media (min-width: 1366px) {

    .arc-shop__content {
        grid-template-columns: 220px minmax(0, 1fr);
    }

}

/* --------------------------------------------------------------------------
   Product Collection / Más vendidos
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-product-collection {
    width: 100%;
    max-width: 100%;

    min-width: 0;
}


.wp-block-woocommerce-product-collection h2,
.wp-block-woocommerce-product-collection h3 {
    margin-bottom: var(--arc-space-md);

    color: var(--arc-text);

    font-family: var(--arc-font-heading);
    font-weight: 400;

    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Evitar overflow horizontal
   -------------------------------------------------------------------------- */

.woocommerce-page .wc-block-product-template,
.woocommerce-page ul.products {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Shop / product archives
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
    margin-bottom: var(--arc-space-lg);
    color: var(--arc-text-muted);
    font-family: var(--arc-font-main);
    font-size: 0.8rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--arc-primary);
}


/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--arc-space-lg);
    margin: 0;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
}


/* --------------------------------------------------------------------------
   WooCommerce sale badge
   -------------------------------------------------------------------------- */

.woocommerce span.onsale {
    --arc-sale-cut: 8px;
    --arc-sale-border: 1px;

    top: var(--arc-space-sm);
    left: var(--arc-space-sm);
    z-index: 5;

    min-width: auto;
    min-height: auto;
    margin: 0;
    padding: 0.4rem 0.65rem;

    isolation: isolate;

    background: var(--arc-primary);
    color: var(--arc-primary);

    border: 0;
    border-radius: 0;

    font-family: var(--arc-font-main);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;

    clip-path: polygon(
        var(--arc-sale-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-sale-cut)),
        calc(100% - var(--arc-sale-cut)) 100%,
        0 100%,
        0 var(--arc-sale-cut)
    );
}

.woocommerce span.onsale::before {
    content: "";
    position: absolute;
    z-index: -1;

    inset: var(--arc-sale-border);

    background: var(--arc-bg-dark);

    clip-path: polygon(
        calc(var(--arc-sale-cut) - var(--arc-sale-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-sale-cut) - var(--arc-sale-border))),
        calc(100% - (var(--arc-sale-cut) - var(--arc-sale-border))) 100%,
        0 100%,
        0 calc(var(--arc-sale-cut) - var(--arc-sale-border))
    );
}


/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product {
    color: var(--arc-text);
}

.woocommerce div.product .product_title {
    color: var(--arc-text);
    font-family: var(--arc-font-heading);
    font-weight: 400;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--arc-primary);
    font-family: var(--arc-font-main);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Single product — ARC gallery image
   -------------------------------------------------------------------------- */

.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image--placeholder {
    --arc-product-image-cut: 18px;
    --arc-product-image-border: 1px;

    position: relative;

    width: 100%;
    padding: var(--arc-product-image-border);
    overflow: hidden;
    box-sizing: border-box;

    background: var(--arc-primary);

    border: 0;
    border-radius: 0;

    clip-path: polygon(
        var(--arc-product-image-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-product-image-cut)),
        calc(100% - var(--arc-product-image-cut)) 100%,
        0 100%,
        0 var(--arc-product-image-cut)
    );
}


/* Imagen real enlazada a la galería */
.woocommerce.single-product div.product div.images
.woocommerce-product-gallery__image > a {
    display: block;

    width: 100%;
    overflow: hidden;

    background: var(--arc-bg-dark);

    clip-path: polygon(
        calc(var(--arc-product-image-cut) - var(--arc-product-image-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-product-image-cut) - var(--arc-product-image-border))),
        calc(100% - (var(--arc-product-image-cut) - var(--arc-product-image-border))) 100%,
        0 100%,
        0 calc(var(--arc-product-image-cut) - var(--arc-product-image-border))
    );
}


/* Placeholder cuando el producto todavía no tiene imagen */
.woocommerce.single-product div.product div.images
.woocommerce-product-gallery__image--placeholder > img {
    clip-path: polygon(
        calc(var(--arc-product-image-cut) - var(--arc-product-image-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-product-image-cut) - var(--arc-product-image-border))),
        calc(100% - (var(--arc-product-image-cut) - var(--arc-product-image-border))) 100%,
        0 100%,
        0 calc(var(--arc-product-image-cut) - var(--arc-product-image-border))
    );
}


.woocommerce.single-product div.product div.images
.woocommerce-product-gallery__image img,
.woocommerce.single-product div.product div.images
.woocommerce-product-gallery__image--placeholder img {
    display: block;

    width: 100%;
    height: auto;
    margin: 0;

    border: 0;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--arc-text-muted);
}


/* --------------------------------------------------------------------------
   Single product — ARC tabs
   -------------------------------------------------------------------------- */

.woocommerce.single-product div.product .woocommerce-tabs {
    clear: both;
    width: 100%;
    padding-top: var(--arc-space-sm);
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--arc-space-sm);

    margin: 0 0 var(--arc-space-md);
    padding: 0;
    overflow: visible;

    border: 0;
    list-style: none;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::after {
    display: none;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
    --arc-tab-cut: 9px;
    --arc-tab-border: 1px;

    position: relative;
    z-index: 0;

    display: block;
    flex: 1 1 140px;

    margin: 0;
    padding: var(--arc-tab-border);

    border: 0;
    border-radius: 0;
    background: var(--arc-primary);

    clip-path: polygon(
        var(--arc-tab-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-tab-cut)),
        calc(100% - var(--arc-tab-cut)) 100%,
        0 100%,
        0 var(--arc-tab-cut)
    );
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    box-sizing: border-box;

    background: var(--arc-bg-panel);
    color: var(--arc-text-muted);

    font-family: var(--arc-font-main);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    clip-path: polygon(
        calc(var(--arc-tab-cut) - var(--arc-tab-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-tab-cut) - var(--arc-tab-border))),
        calc(100% - (var(--arc-tab-cut) - var(--arc-tab-border))) 100%,
        0 100%,
        0 calc(var(--arc-tab-cut) - var(--arc-tab-border))
    );
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--arc-primary);
    color: var(--arc-bg-dark);
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid var(--arc-primary-light);
    outline-offset: 3px;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel {
    margin: 0 0 var(--arc-space-xl);
    color: var(--arc-text);
}

@media (min-width: 768px) {

    .woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
        flex: 0 0 auto;
    }

}


/* --------------------------------------------------------------------------
   Quantity / inputs
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    background: var(--arc-bg-panel);
    color: var(--arc-text);
}

/* --------------------------------------------------------------------------
   Single product — ARC quantity
   -------------------------------------------------------------------------- */

.woocommerce.single-product div.product form.cart .quantity {
    --arc-qty-cut: 8px;
    --arc-qty-border: 1px;

    width: 68px;
    margin: 0 var(--arc-space-xs) 0 0;
    padding: var(--arc-qty-border);
    box-sizing: border-box;

    background: var(--arc-primary);

    clip-path: polygon(
        var(--arc-qty-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-qty-cut)),
        calc(100% - var(--arc-qty-cut)) 100%,
        0 100%,
        0 var(--arc-qty-cut)
    );
}

.woocommerce.single-product div.product form.cart .quantity .qty {
    display: block;

    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;

    background: var(--arc-bg-panel);
    color: var(--arc-text);

    border: 0;
    border-radius: 0;
    outline: 0;

    font-family: var(--arc-font-main);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;

    color-scheme: dark;

    clip-path: polygon(
        calc(var(--arc-qty-cut) - var(--arc-qty-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-qty-cut) - var(--arc-qty-border))),
        calc(100% - (var(--arc-qty-cut) - var(--arc-qty-border))) 100%,
        0 100%,
        0 calc(var(--arc-qty-cut) - var(--arc-qty-border))
    );
}

.woocommerce.single-product div.product form.cart .quantity .qty:focus {
    background: var(--arc-bg-panel);
    outline: 0;
}

/* --------------------------------------------------------------------------
   WooCommerce buttons
   -------------------------------------------------------------------------- */

.woocommerce a.button:not(.arc-btn),
.woocommerce button.button:not(.arc-btn):not(.single_add_to_cart_button),
.woocommerce input.button:not(.arc-btn),
.woocommerce #respond input#submit:not(.arc-btn),
.woocommerce a.button.alt:not(.arc-btn),
.woocommerce button.button.alt:not(.arc-btn):not(.single_add_to_cart_button),
.woocommerce input.button.alt:not(.arc-btn) {
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--arc-primary);
    border-radius: var(--arc-radius-sm);
    background: var(--arc-primary);
    color: var(--arc-bg-dark);
    font-family: var(--arc-font-main);
    font-weight: 700;
    line-height: 1.2;
}

.woocommerce a.button:not(.arc-btn):hover,
.woocommerce button.button:not(.arc-btn):not(.single_add_to_cart_button):hover,
.woocommerce input.button:not(.arc-btn):hover,
.woocommerce #respond input#submit:not(.arc-btn):hover,
.woocommerce a.button.alt:not(.arc-btn):hover,
.woocommerce button.button.alt:not(.arc-btn):not(.single_add_to_cart_button):hover,
.woocommerce input.button.alt:not(.arc-btn):hover {
    background: var(--arc-primary-light);
    color: var(--arc-bg-dark);
}


/* --------------------------------------------------------------------------
   WooCommerce Notices — ARC
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    --arc-notice-cut: 12px;
    --arc-notice-border: 1px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    margin: 0 0 var(--arc-space-lg);
    padding: var(--arc-space-md);
    box-sizing: border-box;

    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--arc-text);

    list-style: none outside;

    clip-path: polygon(
        var(--arc-notice-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-notice-cut)),
        calc(100% - var(--arc-notice-cut)) 100%,
        0 100%,
        0 var(--arc-notice-cut)
    );
}


/*
 * Sustituye los pseudo-elementos nativos de WooCommerce.
 * Esto elimina el icono rojo que se superponía al texto y construye
 * el borde ARC completo, incluidas las diagonales.
 */
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    z-index: -2;
    inset: 0;

    background: var(--arc-primary);

    clip-path: polygon(
        var(--arc-notice-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-notice-cut)),
        calc(100% - var(--arc-notice-cut)) 100%,
        0 100%,
        0 var(--arc-notice-cut)
    );
}

.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
    z-index: -1;
    inset: var(--arc-notice-border);

    background: var(--arc-bg-panel);

    clip-path: polygon(
        calc(var(--arc-notice-cut) - var(--arc-notice-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-notice-cut) - var(--arc-notice-border))),
        calc(100% - (var(--arc-notice-cut) - var(--arc-notice-border))) 100%,
        0 100%,
        0 calc(var(--arc-notice-cut) - var(--arc-notice-border))
    );
}


/* Error de WooCommerce */
.woocommerce-error li {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--arc-space-sm);

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Mensajes e información */
.woocommerce-message,
.woocommerce-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--arc-space-sm);
}


/* Botón interno del aviso */
.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error li > .button {
    float: none;
    width: 100%;
    margin: 0;
    flex: 0 0 auto;
}


/* Desktop / tablet */
@media (min-width: 600px) {

    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error li {
        flex-direction: row;
        align-items: center;
    }

    .woocommerce-message > .button,
    .woocommerce-info > .button,
    .woocommerce-error li > .button {
        width: auto;
        margin-left: auto;
    }
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (min-width: 1366px) {

    .woocommerce ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

/* --------------------------------------------------------------------------
   Elimina recuadro nativo de filtros
   -------------------------------------------------------------------------- */

.arc-shop__filters fieldset,
.arc-shop__filters .wc-block-product-filter-checkbox-list {
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
    min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   Catalog sorting
   -------------------------------------------------------------------------- */

.arc-shop__sorting {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-left: auto;
    margin-bottom: 15px;
}

.arc-shop__sorting .woocommerce-ordering {
    --arc-sort-cut: 8px;
    --arc-sort-border: 1px;

    position: relative;
    width: min(100%, 225px);
    margin: 0;
    padding: var(--arc-sort-border);
    box-sizing: border-box;

    background: var(--arc-primary);

    clip-path: polygon(
        var(--arc-sort-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-sort-cut)),
        calc(100% - var(--arc-sort-cut)) 100%,
        0 100%,
        0 var(--arc-sort-cut)
    );
}

.arc-shop__sorting .woocommerce-ordering select {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 36px 0 12px;
    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

    background: var(--arc-bg-panel);
    color: var(--arc-text);

    border: 0;
    border-radius: 0;
    outline: 0;

    font-family: var(--arc-font-main);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    clip-path: polygon(
        calc(var(--arc-sort-cut) - var(--arc-sort-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-sort-cut) - var(--arc-sort-border))),
        calc(100% - (var(--arc-sort-cut) - var(--arc-sort-border))) 100%,
        0 100%,
        0 calc(var(--arc-sort-cut) - var(--arc-sort-border))
    );
}

/* Flecha ARC */
.arc-shop__sorting .woocommerce-ordering::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 13px;
    z-index: 2;

    width: 8px;
    height: 8px;

    border-right: 2px solid var(--arc-primary);
    border-bottom: 2px solid var(--arc-primary);

    transform: translateY(-70%) rotate(45deg);

    pointer-events: none;
}

.arc-shop__sorting .woocommerce-ordering select option {
    background: var(--arc-bg-panel);
    color: var(--arc-text);
}