.oursys-pc-grid,
.oursys-pc-carousel {
    display: block;
}

.oursys-pc-grid .products,
.oursys-pc-carousel .products {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Reuse the theme's shop card styling (scoped to ".woocommerce"), but
   neutralize the theme's percentage width/margin grid so it doesn't
   fight this plugin's own CSS grid layout. The theme also adds a
   "columns-N" class to ul.products (via wc_set_loop_prop), which
   carries a same-specificity width rule that loads after this
   stylesheet and would otherwise win the cascade - !important keeps
   card sizing driven by the grid's own column tracks instead. */
.oursys-pc-grid.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Carousel slide width/spacing must stay owned by Swiper, which sets
   inline width + margin-right per slide (from slidesPerView /
   spaceBetween). Forcing width/margin here with !important would beat
   those inline styles and collapse the gap between cards and their
   equal-width sizing, so only neutralize the theme's padding. */
.oursys-pc-carousel.woocommerce ul.products li.product {
    padding: 0 !important;
}

.oursys-pc-grid.woocommerce .products,
.oursys-pc-carousel.woocommerce .products {
    margin: 0 !important;
}

/* WooCommerce's ul.products::before/::after is a float-era clearfix
   (content:" "; display:table). Inside a grid/flex container those
   pseudo-elements become real grid/flex items - an invisible leading
   item pushes every product over by one track, and a trailing one
   eats the last slot in the final row. Grid/flex don't need a
   clearfix, so drop them here. */
.oursys-pc-grid.woocommerce .products::before,
.oursys-pc-grid.woocommerce .products::after,
.oursys-pc-carousel.woocommerce .products::before,
.oursys-pc-carousel.woocommerce .products::after {
    display: none !important;
    content: none !important;
}

.oursys-pc-grid.cols-desktop-2 .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oursys-pc-grid.cols-desktop-3 .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oursys-pc-grid.cols-desktop-4 .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oursys-pc-grid .products {
    display: grid;
    column-gap: var(--oursys-pc-gap-x, 20px);
    row-gap: var(--oursys-pc-gap-y, 20px);
    align-items: var(--oursys-pc-align-items, stretch);
}

.oursys-pc-carousel.swiper {
    overflow: hidden;
    padding: 6px 2px 8px;
    box-sizing: border-box;
}

.oursys-pc-carousel .products.swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.oursys-pc-carousel .products.swiper-wrapper > li.swiper-slide {
    height: auto;
    box-sizing: border-box;
}

/* Equal-height cards: the slide li becomes a column flex container so
   the image, title, price and add-to-cart button line up across every
   card regardless of how long an individual title runs. Swiper already
   stretches every slide to the height of the tallest one (align-items:
   stretch above), this just makes each card's own content fill that
   stretched height consistently. */
.oursys-pc-carousel .products.swiper-wrapper > li.product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.oursys-pc-carousel .products.swiper-wrapper > li.product > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    transition: transform 0.45s ease;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product:hover img {
    transform: scale(1.06);
}

.oursys-pc-carousel .products.swiper-wrapper > li.product > a > *:not(img) {
    padding-left: 14px;
    padding-right: 14px;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product .woocommerce-loop-product__title {
    margin: 12px 0 4px;
    font-size: 15px;
    line-height: 1.4;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product .price {
    margin-top: auto;
    padding-top: 4px;
    padding-bottom: 14px;
}

.oursys-pc-carousel .products.swiper-wrapper > li.product > a.button,
.oursys-pc-carousel .products.swiper-wrapper > li.product > .button {
    margin: 0 14px 14px;
    text-align: center;
}

.oursys-pc-carousel .swiper-button-next,
.oursys-pc-carousel .swiper-button-prev {
    color: #222;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.oursys-pc-carousel .swiper-button-next:hover,
.oursys-pc-carousel .swiper-button-prev:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.oursys-pc-carousel .swiper-button-next::after,
.oursys-pc-carousel .swiper-button-prev::after {
    font-size: 15px;
    font-weight: 700;
}

.oursys-pc-carousel .swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.oursys-pc-carousel .swiper-pagination {
    position: relative;
    margin-top: 16px;
}

.oursys-pc-carousel .swiper-pagination-bullet-active {
    background: currentColor;
}

@media (max-width: 1024px) {
    .oursys-pc-grid.cols-tablet-2 .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oursys-pc-grid.cols-tablet-3 .products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .oursys-pc-grid.cols-mobile-1 .products {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .oursys-pc-grid.cols-mobile-2 .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}