/* =========================================
   Categories and Products Showcase - Frontend Styles
   ========================================= */

.wccs-container,
.wccs-wrapper {
    --wccs-title-color: #111111;
    --wccs-desc-color: #444444;
    --wccs-bg-color: #f8f9fa;
    --wccs-overlay-color: rgba(0, 0, 0, 0.4);
    --wccs-accent-color: #0073aa;
    --wccs-button-color: #0073aa;
    --wccs-border-radius: 12px;
    --wccs-columns: 4;
    --wccs-cols: var(--wccs-columns);
    --wccs-gap: 20px;
    --wccs-image-width: 300px;
    --wccs-image-height: auto;
}

.wccs-wrapper {
    width: 100%;
    box-sizing: border-box;
    /* Convierte el contenedor en referencia para los @container
       y así la responsividad se adapta a su ancho real (sidebars,
       columnas de builders, widgets), no solo al viewport. */
    container-type: inline-size;
}

.wccs-wrapper * {
    box-sizing: border-box;
}

.wccs-no-categories {
    padding: 20px;
    text-align: center;
    color: #666;
    background: #f9f9f9;
    border: 1px dashed #ddd;
}

/* =========================================
   GRID LAYOUT
   ========================================= */
.wccs-grid {
    display: grid;
    gap: var(--wccs-gap);
    width: 100%;
}

.wccs-grid--grid,
.wccs-grid--cards,
.wccs-grid--columns,
.wccs-grid--modern,
.wccs-grid--minimal {
    grid-template-columns: repeat(var(--wccs-cols, var(--wccs-columns)), minmax(0, 1fr));
}

.wccs-grid--overlay {
    grid-template-columns: repeat(var(--wccs-cols, var(--wccs-columns)), minmax(0, 1fr));
}

/* =========================================
   BASE ITEM
   ========================================= */
.wccs-item {
    opacity: 1;
    transform: none;
}

/* Only when JS initialises the animations do items get hidden then revealed.
   This keeps content visible if JS is slow, blocked or inside iframes like
   the Divi visual builder (prevents the "white/blank preview"). */
.wccs-item.wccs-anim-init {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.wccs-item.wccs-visible {
    opacity: 1;
    transform: translateY(0);
}

.wccs-item__inner {
    position: relative;
    background: var(--wccs-bg-color);
    border-radius: calc(var(--wccs-border-radius) + 4px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wccs-item__image-wrap {
    position: relative;
    overflow: hidden;
    width: var(--wccs-image-width, 100%);
    height: var(--wccs-image-height, auto);
    max-width: 100%;
}

.wccs-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wccs-item__overlay {
    position: absolute;
    inset: 0;
    background: var(--wccs-overlay-color);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.wccs-item__content {
    position: relative;
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wccs-item__title {
    margin: 0;
    color: var(--wccs-title-color);
    font-size: var(--wccs-title-fs, 1.1em);
    font-weight: 700;
    line-height: 1.3;
}

.wccs-item__title a {
    color: var(--wccs-title-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.wccs-item__title a:hover {
    color: var(--wccs-accent-color);
}

.wccs-item__count-number {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 1px;
}

.wccs-item__product-count {
    display: inline-block;
    font-size: 0.85em;
    color: #666;
    background: #f1f1f1;
    padding: 3px 12px;
    border-radius: 20px;
}

.wccs-item__description {
    margin: 0;
    font-size: var(--wccs-desc-fs, 0.9em);
    color: var(--wccs-desc-color, #444444);
    line-height: 1.5;
}

.wccs-item__link {
    display: inline-block;
    margin-top: auto;
    padding: 8px 18px;
    background: var(--wccs-button-color, var(--wccs-accent-color));
    color: #fff;
    text-decoration: none;
    border-radius: 24px;
    font-size: var(--wccs-button-fs, 0.9em);
    transition: background 0.3s ease, transform 0.3s ease;
    align-self: flex-start;
}

.wccs-item__link:hover {
    background: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 80%, #000);
    transform: translateY(-2px);
}

/* Boxes grow proportionally with the image size */
.wccs-item__content {
    zoom: var(--wccs-content-zoom, 1);
}

/* =========================================
   LIST LAYOUT
   ========================================= */
.wccs-layout--list .wccs-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wccs-gap);
}

.wccs-layout--list .wccs-item {
    width: 100%;
}

.wccs-layout--list .wccs-item__inner {
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 20px;
    background: var(--wccs-bg-color);
    border: 1px solid #eee;
    border-radius: calc(var(--wccs-border-radius) + 4px);
}

.wccs-layout--list .wccs-item__image-wrap {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border-radius: calc(var(--wccs-border-radius));
    overflow: hidden;
    position: relative;
}

.wccs-layout--list .wccs-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wccs-layout--list .wccs-item__content {
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.wccs-layout--list .wccs-item__title {
    flex: 1 1 60%;
}

.wccs-layout--list .wccs-item__product-count {
    order: 2;
}

.wccs-layout--list .wccs-item__description {
    flex: 1 0 100%;
    order: 3;
}

.wccs-layout--list .wccs-item__link {
    order: 4;
    margin-top: 0;
}

.wccs-layout--list .wccs-item__count-number {
    display: none;
}

/* =========================================
   COLUMNS LAYOUT
   ========================================= */
.wccs-layout--columns .wccs-item__inner {
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.wccs-layout--columns .wccs-item__image-wrap {
    margin-bottom: 12px;
}

.wccs-layout--columns .wccs-item__content {
    padding: 8px 0;
    align-items: center;
}

.wccs-layout--columns .wccs-item__link {
    margin: 0 auto;
}

.wccs-layout--columns .wccs-item__description {
    text-align: center;
}

/* =========================================
   CARDS LAYOUT
   ========================================= */
.wccs-layout--cards .wccs-item__inner {
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wccs-layout--cards .wccs-item__inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.wccs-layout--cards .wccs-item__image-wrap {
    aspect-ratio: 1;
}

.wccs-layout--cards .wccs-item__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.wccs-layout--cards .wccs-item__content {
    padding: 20px;
}

.wccs-layout--cards .wccs-item__title {
    font-size: 1.2em;
    font-weight: 600;
}

.wccs-layout--cards .wccs-item__link {
    width: 100%;
    text-align: center;
}

/* =========================================
   FEATURED LAYOUT
   ========================================= */
.wccs-layout--featured .wccs-grid {
    grid-template-columns: repeat(var(--wccs-cols, var(--wccs-columns)), minmax(0, 1fr));
    gap: var(--wccs-gap);
}

.wccs-layout--featured .wccs-item__inner {
    min-height: 400px;
    position: relative;
}

.wccs-layout--featured .wccs-item__image-wrap {
    position: absolute;
    inset: 0;
    height: 100%;
}

.wccs-layout--featured .wccs-item__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wccs-layout--featured .wccs-item:hover .wccs-item__image {
    transform: scale(1.05);
}

.wccs-layout--featured .wccs-item__overlay {
    opacity: 1;
}

.wccs-layout--featured .wccs-item__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    padding: 24px;
    background: linear-gradient(to top, var(--wccs-overlay-color), transparent);
}

.wccs-layout--featured .wccs-item__title {
    color: #fff;
    font-size: 1.4em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.wccs-layout--featured .wccs-item__title a {
    color: #fff;
}

.wccs-layout--featured .wccs-item__description {
    color: #f0f0f0;
}

.wccs-layout--featured .wccs-item__product-count {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

.wccs-layout--featured .wccs-item__link {
    background: var(--wccs-button-color, var(--wccs-accent-color));
    color: #fff;
    font-weight: 600;
}

.wccs-layout--featured .wccs-item__link:hover {
    background: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 80%, #000);
}

.wccs-layout--featured .wccs-item__count-number {
    display: none;
}

/* =========================================
   MODERN LAYOUT
   ========================================= */
.wccs-layout--modern .wccs-item__inner {
    position: relative;
    background: transparent;
    border-radius: calc(var(--wccs-border-radius) + 4px);
}

.wccs-layout--modern .wccs-item__image-wrap {
    aspect-ratio: 1;
}

.wccs-layout--modern .wccs-item__image {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wccs-layout--modern .wccs-item:hover .wccs-item__image {
    transform: scale(1.1);
}

.wccs-layout--modern .wccs-item__overlay {
    opacity: 0;
    background: linear-gradient(180deg, transparent, var(--wccs-overlay-color));
    transition: opacity 0.4s ease;
}

.wccs-layout--modern .wccs-item:hover .wccs-item__overlay {
    opacity: 1;
}

.wccs-layout--modern .wccs-item__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.wccs-layout--modern .wccs-item:hover .wccs-item__content {
    transform: translateY(0);
}

.wccs-layout--modern .wccs-item__title {
    color: #fff;
}

.wccs-layout--modern .wccs-item__title a {
    color: #fff;
}

.wccs-layout--modern .wccs-item__product-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    backdrop-filter: blur(4px);
}

.wccs-layout--modern .wccs-item__count-number {
    background: var(--wccs-accent-color);
}

/* =========================================
   MINIMAL LAYOUT
   ========================================= */
.wccs-layout--minimal .wccs-item__inner {
    background: transparent;
    box-shadow: none;
    border: none;
}

.wccs-layout--minimal .wccs-item__image-wrap {
    margin-bottom: 12px;
}

.wccs-layout--minimal .wccs-item__content {
    padding: 8px 0 0;
    align-items: flex-start;
    gap: 6px;
}

.wccs-layout--minimal .wccs-item__title {
    font-size: 1em;
    font-weight: 500;
}

.wccs-layout--minimal .wccs-item__title a {
    color: var(--wccs-title-color);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.wccs-layout--minimal .wccs-item__title a:hover {
    border-bottom: 1px solid var(--wccs-accent-color);
    color: var(--wccs-accent-color);
}

.wccs-layout--minimal .wccs-item__link {
    background: transparent;
    color: var(--wccs-button-color, var(--wccs-accent-color));
    padding: 4px 0;
    border-bottom: 1px solid var(--wccs-button-color, var(--wccs-accent-color));
    border-radius: 0;
}

.wccs-layout--minimal .wccs-item__link:hover {
    background: transparent;
    color: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 75%, #000);
    border-color: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 75%, #000);
}

.wccs-layout--minimal .wccs-item__count-number {
    display: none;
}

.wccs-layout--minimal .wccs-item__product-count {
    background: transparent;
    padding: 0;
    color: #999;
}

/* =========================================
   OVERLAY LAYOUT
   ========================================= */
.wccs-layout--overlay .wccs-item__inner {
    position: relative;
    aspect-ratio: 1;
    border-radius: calc(var(--wccs-border-radius) + 4px);
}

.wccs-layout--overlay .wccs-item__image-wrap {
    position: absolute;
    inset: 0;
    height: 100%;
}

.wccs-layout--overlay .wccs-item__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wccs-layout--overlay .wccs-item:hover .wccs-item__image {
    transform: scale(1.08);
}

.wccs-layout--overlay .wccs-item__overlay {
    opacity: 1;
    transition: background 0.4s ease, opacity 0.4s ease;
}

.wccs-layout--overlay .wccs-item__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    gap: 10px;
}

.wccs-layout--overlay .wccs-item__title {
    color: #fff;
    font-size: 1.3em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.wccs-layout--overlay .wccs-item:hover .wccs-item__title {
    transform: translateY(0);
}

.wccs-layout--overlay .wccs-item__title a {
    color: #fff;
}

.wccs-layout--overlay .wccs-item__product-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.wccs-layout--overlay .wccs-item:hover .wccs-item__product-count {
    opacity: 1;
    transform: translateY(0);
}

.wccs-layout--overlay .wccs-item__link {
    background: var(--wccs-button-color, var(--wccs-accent-color));
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.1s;
}

.wccs-layout--overlay .wccs-item:hover .wccs-item__link {
    opacity: 1;
    transform: translateY(0);
}

.wccs-layout--overlay .wccs-item__link:hover {
    background: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 80%, #000);
}

.wccs-layout--overlay .wccs-item__description {
    color: #eee;
    display: none;
}

.wccs-layout--overlay .wccs-item__count-number {
    display: none;
}

/* =========================================
   CAROUSEL LAYOUT
   ========================================= */
.wccs-carousel {
    position: relative;
    padding: 0 50px;
}

.wccs-carousel__track {
    overflow: hidden;
}

.wccs-carousel__slides {
    display: flex;
    transition: transform 0.5s ease;
}

.wccs-carousel[data-rows]:not([data-rows="1"]) .wccs-carousel__slides {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0 16px;
}

.wccs-carousel__slide {
    flex: 0 0 25%;
    width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
}

.wccs-carousel__slide .wccs-item {
    width: 100%;
}

.wccs-carousel__prev,
.wccs-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #333;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wccs-carousel__prev:hover,
.wccs-carousel__next:hover {
    background: var(--wccs-accent-color);
    color: #fff;
}

.wccs-carousel__prev {
    left: 0;
}

.wccs-carousel__next {
    right: 0;
}

.wccs-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.wccs-carousel__dots button {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.wccs-carousel__dots button.active {
    background: var(--wccs-accent-color);
    width: 24px;
    border-radius: 4px;
}

.wccs-carousel__slide .wccs-item {
    display: block;
    height: 100%;
}

.wccs-carousel__slide .wccs-item__inner {
    height: 100%;
}

/* =========================================
   MASONRY LAYOUT
   ========================================= */
.wccs-masonry {
    columns: var(--wccs-cols, var(--wccs-columns));
    column-gap: var(--wccs-gap);
}

.wccs-masonry__item {
    break-inside: avoid;
    margin-bottom: var(--wccs-gap);
}

.wccs-masonry__item .wccs-item__image {
    width: 100%;
    height: auto;
}

.wccs-masonry__item.wccs-masonry--tall .wccs-item__image {
    height: 480px;
    object-fit: cover;
}

.wccs-masonry__item.wccs-masonry--short .wccs-item__image {
    height: 240px;
    object-fit: cover;
}

/* =========================================
   IMAGE SHAPES
   ========================================= */

/* Circle */
.wccs-shape--circle .wccs-item__image-wrap {
    border-radius: 50%;
}

.wccs-shape--circle.wccs-layout--grid .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--columns .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--cards .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--minimal .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--modern .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--masonry .wccs-item__image-wrap {
    width: var(--wccs-image-width, 70%);
    aspect-ratio: 1;
    margin: 0 auto;
    margin-top: 15px;
}

.wccs-shape--circle.wccs-layout--grid .wccs-item__image,
.wccs-shape--circle.wccs-layout--columns .wccs-item__image,
.wccs-shape--circle.wccs-layout--cards .wccs-item__image,
.wccs-shape--circle.wccs-layout--minimal .wccs-item__image,
.wccs-shape--circle.wccs-layout--modern .wccs-item__image,
.wccs-shape--circle.wccs-layout--masonry .wccs-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wccs-shape--circle.wccs-layout--list .wccs-item__image-wrap {
    border-radius: 50%;
}

.wccs-shape--circle.wccs-layout--overlay .wccs-item__image-wrap,
.wccs-shape--circle.wccs-layout--featured .wccs-item__image-wrap {
    border-radius: 0;
}

/* Square */
.wccs-shape--square .wccs-item__image-wrap {
    border-radius: 0;
}

/* Rounded (default) */
.wccs-shape--rounded .wccs-item__image-wrap {
    border-radius: var(--wccs-border-radius);
}

/* Hexagon */
.wccs-shape--hexagon .wccs-item__image-wrap {
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    overflow: hidden;
}

.wccs-shape--hexagon.wccs-layout--grid .wccs-item__image-wrap,
.wccs-shape--hexagon.wccs-layout--columns .wccs-item__image-wrap,
.wccs-shape--hexagon.wccs-layout--cards .wccs-item__image-wrap,
.wccs-shape--hexagon.wccs-layout--minimal .wccs-item__image-wrap,
.wccs-shape--hexagon.wccs-layout--modern .wccs-item__image-wrap {
    width: var(--wccs-image-width, 80%);
    aspect-ratio: 1;
    margin: 0 auto;
    margin-top: 20px;
}

.wccs-shape--hexagon .wccs-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diamond */
.wccs-shape--diamond .wccs-item__image-wrap {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    overflow: hidden;
}

.wccs-shape--diamond.wccs-layout--grid .wccs-item__image-wrap,
.wccs-shape--diamond.wccs-layout--columns .wccs-item__image-wrap,
.wccs-shape--diamond.wccs-layout--cards .wccs-item__image-wrap,
.wccs-shape--diamond.wccs-layout--minimal .wccs-item__image-wrap,
.wccs-shape--diamond.wccs-layout--modern .wccs-item__image-wrap {
    width: var(--wccs-image-width, 80%);
    aspect-ratio: 1;
    margin: 0 auto;
    margin-top: 20px;
}

.wccs-shape--diamond .wccs-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Blob */
.wccs-shape--blob .wccs-item__image-wrap {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    overflow: hidden;
}

.wccs-shape--blob.wccs-layout--grid .wccs-item__image-wrap,
.wccs-shape--blob.wccs-layout--columns .wccs-item__image-wrap,
.wccs-shape--blob.wccs-layout--cards .wccs-item__image-wrap,
.wccs-shape--blob.wccs-layout--minimal .wccs-item__image-wrap,
.wccs-shape--blob.wccs-layout--modern .wccs-item__image-wrap {
    width: var(--wccs-image-width, 80%);
    aspect-ratio: 1;
    margin: 0 auto;
    margin-top: 20px;
}

.wccs-shape--blob .wccs-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   HOVER EFFECTS
   ========================================= */

/* Zoom */
.wccs-hover--zoom .wccs-item__image {
    transition: transform 0.5s ease;
}

.wccs-hover--zoom .wccs-item__inner:hover .wccs-item__image {
    transform: scale(1.08);
}

/* Brightness */
.wccs-hover--brightness .wccs-item__image {
    filter: brightness(0.9);
    transition: filter 0.4s ease;
}

.wccs-hover--brightness .wccs-item__inner:hover .wccs-item__image {
    filter: brightness(1.1);
}

/* Grayscale */
.wccs-hover--grayscale .wccs-item__image {
    transition: filter 0.5s ease;
}

.wccs-hover--grayscale .wccs-item__inner .wccs-item__image {
    filter: grayscale(100%);
}

.wccs-hover--grayscale .wccs-item__inner:hover .wccs-item__image {
    filter: grayscale(0);
}

/* Overlay dark */
.wccs-hover--overlay-dark .wccs-item__overlay {
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
}

.wccs-hover--overlay-dark .wccs-item__inner:hover .wccs-item__overlay {
    opacity: 1;
}

/* Overlay light */
.wccs-hover--overlay-light .wccs-item__overlay {
    opacity: 0;
    background: rgba(255, 255, 255, 0.6);
}

.wccs-hover--overlay-light .wccs-item__inner:hover .wccs-item__overlay {
    opacity: 1;
}

/* Scale shadow */
.wccs-hover--scale-shadow .wccs-item__inner {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wccs-hover--scale-shadow .wccs-item__inner:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Blur */
.wccs-hover--blur .wccs-item__image {
    transition: filter 0.4s ease, transform 0.4s ease;
}

.wccs-hover--blur .wccs-item__inner .wccs-item__image {
    filter: blur(2px);
    transform: scale(1.05);
}

.wccs-hover--blur .wccs-item__inner:hover .wccs-item__image {
    filter: blur(0);
    transform: scale(1);
}

/* =========================================
   ANIMATIONS
   ========================================= */

/* None */
.wccs-anim--none .wccs-item {
    opacity: 1;
    transform: none;
}

/* Fade */
.wccs-anim--fade .wccs-item.wccs-visible {
    animation: wccsFadeIn 0.8s ease forwards;
}

/* Slide Up */
.wccs-anim--slide-up .wccs-item.wccs-visible {
    animation: wccsSlideUp 0.7s ease forwards;
}

/* Slide Left */
.wccs-anim--slide-left .wccs-item.wccs-visible {
    animation: wccsSlideLeft 0.7s ease forwards;
}

/* Zoom */
.wccs-anim--zoom .wccs-item.wccs-visible {
    animation: wccsZoomIn 0.7s ease forwards;
}

/* Flip */
.wccs-anim--flip .wccs-item.wccs-visible {
    animation: wccsFlip 0.8s ease forwards;
}

/* Bounce */
.wccs-anim--bounce .wccs-item.wccs-visible {
    animation: wccsBounceIn 0.9s ease forwards;
}

@keyframes wccsFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes wccsSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes wccsSlideLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes wccsZoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes wccsFlip {
    from { opacity: 0; transform: perspective(800px) rotateY(90deg); }
    to { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}

@keyframes wccsBounceIn {
    0% { opacity: 0; transform: scale(0.6); }
    60% { opacity: 1; transform: scale(1.08); }
    80% { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   LOAD MORE
   ========================================= */
.wccs-load-more {
    text-align: center;
    margin-top: 30px;
}

.wccs-load-more-btn {
    padding: 12px 36px;
    background: var(--wccs-accent-color);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wccs-load-more-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.wccs-load-more-btn.wccs-loading {
    opacity: 0.6;
    cursor: wait;
}

.wccs-load-more-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* =========================================
   RESPONSIVE
   =========================================
   La responsividad se adapta al ancho del CONTENEDOR
   (widgets, sidebars, columnas de page builders, etc.)
   mediante container queries, con fallback por viewport
   para navegadores sin soporte.

   --wccs-cols  : número efectivo de columnas mostradas.
                 Por defecto = --wccs-columns (configurado).
   ========================================= */

/* A) Navegadores modernos: container queries
   (la variable se aplica a los hijos del contenedor: un @container
   no puede estilizar al propio elemento que actúa como contenedor) */
@container (max-width: 980px) {
    .wccs-grid,
    .wccs-masonry { --wccs-cols: min(var(--wccs-columns), 3); }
}

@container (max-width: 720px) {
    .wccs-grid,
    .wccs-masonry { --wccs-cols: min(var(--wccs-columns), 2); }
}

@container (max-width: 460px) {
    .wccs-grid,
    .wccs-masonry { --wccs-cols: min(var(--wccs-columns), 1); }
}

/* Espaciado: un gap menor cuando el contenedor es estrecho
   compensa el aumento que produce la fórmula según columnas. */
@container (max-width: 980px) {
    .wccs-grid,
    .wccs-layout--featured .wccs-grid,
    .wccs-layout--list .wccs-grid {
        gap: 20px;
    }

    .wccs-masonry { column-gap: 20px; }
    .wccs-masonry__item { margin-bottom: 20px; }
}

@container (max-width: 720px) {
    .wccs-grid,
    .wccs-layout--featured .wccs-grid,
    .wccs-layout--list .wccs-grid {
        gap: 16px;
    }

    .wccs-masonry { column-gap: 16px; }
    .wccs-masonry__item { margin-bottom: 16px; }
}

@container (max-width: 460px) {
    .wccs-grid,
    .wccs-layout--featured .wccs-grid,
    .wccs-layout--list .wccs-grid {
        gap: 12px;
    }

    .wccs-masonry { column-gap: 12px; }
    .wccs-masonry__item { margin-bottom: 12px; }
}

/* Lista: el contenido se apila antes en contenedores estrechos */
@container (max-width: 640px) {
    .wccs-layout--list .wccs-item__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .wccs-layout--list .wccs-item__image-wrap {
        width: 100%;
        height: 180px;
        min-width: 100%;
    }
}

/* Destacado hero: altura reducida en contenedores estrechos */
@container (max-width: 980px) {
    .wccs-layout--featured .wccs-item__inner { min-height: 340px; }
}

@container (max-width: 720px) {
    .wccs-layout--featured .wccs-item__inner { min-height: 300px; }
}

@container (max-width: 460px) {
    .wccs-layout--featured .wccs-item__inner { min-height: 260px; }
}

/* Masonry: alturas del mosaico más compactas en estrechos */
@container (max-width: 720px) {
    .wccs-masonry__item.wccs-masonry--tall .wccs-item__image { height: 340px; }
    .wccs-masonry__item.wccs-masonry--short .wccs-item__image { height: 180px; }
}

@container (max-width: 460px) {
    .wccs-masonry__item.wccs-masonry--tall .wccs-item__image { height: 300px; }
    .wccs-masonry__item.wccs-masonry--short .wccs-item__image { height: 160px; }
}

/* Carrusel: flechas y padding adaptados al ancho disponible */
@container (max-width: 640px) {
    .wccs-carousel { padding: 0 38px; }
}

@container (max-width: 460px) {
    .wccs-carousel { padding: 0 32px; }

    .wccs-carousel__prev,
    .wccs-carousel__next {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .wccs-carousel__slide { padding: 0 6px; }
}

/* B) Navegadores sin container queries: fallback por viewport */
@supports not (container-type: inline-size) {
    @media (max-width: 1200px) {
        .wccs-wrapper { --wccs-cols: min(var(--wccs-columns), 3); }
    }

    @media (max-width: 992px) {
        .wccs-wrapper { --wccs-cols: min(var(--wccs-columns), 2); }

        .wccs-layout--list .wccs-item__inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .wccs-layout--list .wccs-item__image-wrap {
            width: 100%;
            height: 180px;
            min-width: 100%;
        }
    }

    @media (max-width: 576px) {
        .wccs-wrapper { --wccs-cols: min(var(--wccs-columns), 1); }

        .wccs-carousel { padding: 0 40px; }

        .wccs-carousel__prev,
        .wccs-carousel__next {
            width: 34px;
            height: 34px;
            font-size: 18px;
        }
    }
}

/* =========================================
   CONTENT ALIGNMENT (centrado / izquierda / derecha)
   Aplica a todo el contenido de cada categoría.

   - Centrado  : todo el contenido centrado y la tarjeta se ajusta
                 al ancho de la imagen (sin sobrante excesivo a los
                 lados).
   - Izquierda : la imagen queda a la izquierda y el título, la
                 descripción y el botón quedan al lado de la imagen.
   - Derecha   : la imagen queda a la derecha y el título, la
                 descripción y el botón quedan al lado de la imagen.

   En layouts con el contenido encima de la imagen (featured,
   modern, overlay) solo se ajusta la alineación del texto.
   ========================================= */

/* --- Centrado --- */
.wccs-content--center {
    text-align: center;
}

.wccs-content--center .wccs-item__content {
    align-items: center;
}

.wccs-content--center .wccs-item__image-wrap {
    margin-left: auto;
    margin-right: auto;
}

.wccs-content--center .wccs-item__description {
    text-align: center;
}

.wccs-content--center .wccs-item__link {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* La tarjeta se ciñe al ancho de la imagen en layouts de flujo
   normal (grid, columns, cards, list, minimal, masonry, carrusel). */
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--center .wccs-item__inner {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Izquierda y Derecha: imagen y texto lado a lado --- */
.wccs-content--left .wccs-item__inner,
.wccs-content--right .wccs-item__inner,
.wccs-content--left .wccs-item__content,
.wccs-content--right .wccs-item__content {
    text-align: left;
    align-items: flex-start;
}

.wccs-content--left .wccs-item__link,
.wccs-content--right .wccs-item__link {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
}

/* Estructura lado a lado en layouts de flujo normal. */
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__inner,
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__inner {
    flex-direction: row;
    align-items: flex-start;
}

.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__inner {
    flex-direction: row-reverse;
}

.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__image-wrap,
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__image-wrap {
    flex: 0 0 auto;
    min-width: 0;
}

/* En carrusel, con contenido lado a lado (izquierda/derecha) la imagen
   encoge dentro del slide para que la tarjeta no se corte a la derecha. */
.wccs-container.wccs-content--left .wccs-carousel__slide .wccs-item__image-wrap,
.wccs-container.wccs-content--right .wccs-carousel__slide .wccs-item__image-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
}

.wccs-container.wccs-content--left .wccs-carousel__slide .wccs-item__content,
.wccs-container.wccs-content--right .wccs-carousel__slide .wccs-item__content {
    min-width: 0;
}

/* --- Contenedor estrecho (≤640px): apilar imagen y texto
       (salvo list, que ya se apila con su propia regla) --- */
@container (max-width: 640px) {
    .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__inner,
    .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__image-wrap,
    .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__image-wrap {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}

/* Fallback sin container queries: apilar por viewport */
@supports not (container-type: inline-size) {
    @media (max-width: 992px) {
        .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__inner,
        .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__image-wrap,
        .wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__image-wrap {
            width: 100%;
            height: auto;
            max-width: 100%;
        }
    }
}

/* =========================================
   TIPOGRAFÍA CONFIGURABLE (título, descripción y botón)
   Al final para que los tamaños elegidos venzan a los
   tamaños fijos de cada layout.
   ========================================= */
.wccs-container .wccs-item__title {
    font-size: var(--wccs-title-fs, 1.1em);
}

.wccs-container .wccs-item__title,
.wccs-container .wccs-item__title a {
    font-weight: 700;
}

.wccs-container .wccs-item__description {
    font-size: var(--wccs-desc-fs, 0.9em);
}

.wccs-container .wccs-item__link {
    font-size: var(--wccs-button-fs, 0.9em);
}

/* =========================================
   PRODUCTS
   ========================================= */

/* Precio */
.wccs-product__price {
    font-size: var(--wccs-price-fs, 1.05em);
    font-weight: 700;
    color: var(--wccs-title-color);
}

.wccs-product__price ins {
    background: transparent;
    text-decoration: none;
    color: #e0245e;
}

.wccs-product__price del {
    opacity: 0.55;
    font-weight: 400;
    margin-right: 6px;
}

/* Valoración */
.wccs-product__rating {
    line-height: 1;
}

.wccs-product__rating .star-rating {
    margin: 0;
}

.wccs-product__rating .star-rating span::before {
    color: #f5a623;
}

/* Botón añadir al carrito (comparte estilo con .wccs-item__link) */
.wccs-item__add-to-cart {
    display: inline-block;
    margin-top: auto;
    padding: 8px 18px;
    background: var(--wccs-button-color, var(--wccs-accent-color));
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 24px;
    font-size: var(--wccs-button-fs, 0.9em);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    align-self: flex-start;
}

.wccs-item__add-to-cart:hover {
    background: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 80%, #000);
    color: #fff;
    transform: translateY(-2px);
}

.wccs-item__add-to-cart.loading {
    opacity: 0.7;
    pointer-events: none;
}

.wccs-item__add-to-cart.added::after {
    content: '\2713';
    margin-left: 6px;
    font-weight: 700;
}

/* Etiquetas (oferta / nuevo / destacado) */
.wccs-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}

.wccs-badge--sale {
    background: #e0245e;
}

.wccs-badge--new {
    background: #2e9e5b;
}

.wccs-badge--featured {
    background: var(--wccs-accent-color);
}

/* El contador (número de categoría) se posiciona arriba a la derecha:
   no pisa las etiquetas de producto que van arriba a la izquierda. */
.wccs-item__count-number {
    top: 10px;
    right: 10px;
    left: auto;
}

/* En layouts overlay/featured/modern las etiquetas van sobre la imagen */
.wccs-layout--overlay .wccs-badge,
.wccs-layout--featured .wccs-badge,
.wccs-layout--modern .wccs-badge {
    top: 14px;
    left: 14px;
}

/* Productos con contenido lado a lado: el botón de carrito no crece
   cuando la descripción es corta. */
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--left .wccs-item__add-to-cart,
.wccs-container:not(.wccs-layout--featured):not(.wccs-layout--modern):not(.wccs-layout--overlay).wccs-content--right .wccs-item__add-to-cart {
    margin-top: 0;
    align-self: auto;
}

/* List: botón de carrito sigue el orden del layout */
.wccs-layout--list .wccs-item__add-to-cart {
    order: 4;
    margin-top: 0;
}

/* Overlay: el botón de carrito se revela con el hover igual que el enlace */
.wccs-layout--overlay .wccs-item__add-to-cart {
    background: var(--wccs-button-color, var(--wccs-accent-color));
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.1s;
}

.wccs-layout--overlay .wccs-item:hover .wccs-item__add-to-cart {
    opacity: 1;
    transform: translateY(0);
}

.wccs-layout--overlay .wccs-item__add-to-cart:hover {
    background: color-mix(in srgb, var(--wccs-button-color, var(--wccs-accent-color)) 80%, #000);
    color: #fff;
}

/* Centrado: botón de carrito centrado */
.wccs-content--center .wccs-item__add-to-cart {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}