/**
 * HS product card - one design for the home builder and every WooCommerce product loop.
 * Author: Hesham Saad - https://heshamsaad.com
 */

.hs-pcard {
    --hs-ink: var(--hshb-dark-color, #222);
    --hs-muted: #6e6964;
    --hs-line: #e4e0dc;
    --hs-media-bg: #f0edea;
    --hs-sale: #d63c31;
    --hs-new: #f3c34c;
    --hs-ok: #1b8a4e;
}

/* Loop wrapper: neutralise parent-theme li.product styling around the card and add gutters. */
ul.products:has(> li.hs-pcard-item) {
    margin-inline: -6px;
}
ul.products li.product.hs-pcard-item {
    margin-bottom: 12px;
    padding: 0 6px;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: start;
}
ul.products li.product.hs-pcard-item .hs-pcard__media img.hs-pcard__image {
    width: 100%;
    max-width: none;
}
/* The parent theme draws a white hover panel (li::before) over the item; the card has its own hover state. */
ul.products li.product.hs-pcard-item::before,
ul.products li.product.hs-pcard-item::after {
    display: none;
}
/* The parent theme positions .button absolutely; restore normal flow inside the card. */
ul.products li.product.hs-pcard-item .hs-pcard .hs-pcard__btn {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.2;
    transform: none;
}

/* Product card - Start */
.hs-pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: 10px;
    background: #fff;
}

.hs-pcard__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--hs-media-bg);
}

.hs-pcard__media > a {
    display: block;
    height: 100%;
}

.hs-pcard__media img.hs-pcard__image {
    width: 100%;
    height: 100%;
    padding: 9%;
    object-fit: contain;
    mix-blend-mode: multiply; /* white packshot backgrounds take the card tint */
    transition: transform 400ms ease;
}

@media (hover: hover) {
    .hs-pcard:hover .hs-pcard__image {
        transform: scale(1.04);
    }
}

.hs-pcard.is-out-of-stock .hs-pcard__image {
    opacity: 0.55;
}

.hs-pcard__badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.hs-badge {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hs-badge--sale {
    background: var(--hs-sale);
    color: #fff;
}

/* CommerceKit badges sit in the same stack; colours and labels come from CommerceKit. */
.hs-pcard__badges .ckit-badge_wrapper {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
}

.hs-pcard__badges .ckit-badge {
    margin: 0;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 1;
}

.hs-pcard .commercekit-wishlist.mini {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    left: auto;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    opacity: 1; /* CommerceKit only reveals it on li.product hover */
}

[dir="rtl"] .hs-pcard .commercekit-wishlist.mini {
    right: auto;
}

.hs-pcard .commercekit-wishlist.mini a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.hs-pcard .commercekit-wishlist a em::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hs-pcard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 16px;
}

.hs-pcard__brand {
    margin: 0;
    color: var(--hs-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-pcard .hs-pcard__title {
    display: -webkit-box;
    min-height: 2.7em;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hs-pcard__title a {
    color: var(--hs-ink);
}

.hs-pcard__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hs-pcard__price {
    margin-top: 4px;
    color: var(--hs-ink);
    line-height: 1.35;
}

.hs-pcard__now {
    font-size: 17px;
    font-weight: 700;
}

.hs-pcard__was {
    margin-inline-start: 4px;
    color: var(--hs-muted);
    font-size: 13px;
    font-weight: 400;
}

.hs-pcard__to {
    display: block;
    color: var(--hs-muted);
    font-size: 13px;
}

.hs-pcard__stock {
    margin: auto 0 4px;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 600;
}

.hs-pcard__stock.is-in {
    color: var(--hs-ok);
}

.hs-pcard__stock.is-out {
    color: var(--hs-sale);
}

.hs-pcard .hs-pcard__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px 12px;
    border: 1.5px solid var(--hs-ink);
    border-radius: 6px;
    background: var(--hs-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.hs-pcard .hs-pcard__btn:hover {
    opacity: 0.85;
}

.hs-pcard .hs-pcard__btn--outline {
    background: transparent;
    color: var(--hs-ink);
}

.hs-pcard .hs-pcard__btn--outline:hover {
    background: var(--hs-ink);
    color: #fff;
    opacity: 1;
}

.hs-pcard .hs-pcard__btn:focus-visible {
    outline: 2px solid var(--hs-ink);
    outline-offset: 2px;
}

/* Add to cart in progress: keep the button's size, hide the label and show one centred spinner. */
.hs-pcard .hs-pcard__btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.hs-pcard .hs-pcard__btn.loading::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    display: block;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    background: none;
    animation: hs-pcard-spin 700ms linear infinite;
}

.hs-pcard .hs-pcard__btn--outline.loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--hs-ink);
}

/* Added: the button goes back to normal; the "View cart" link the AJAX call injects is not shown on cards. */
.hs-pcard .hs-pcard__btn.added::after {
    content: none;
}

.hs-pcard .hs-pcard__body a.added_to_cart {
    display: none !important;
}

@keyframes hs-pcard-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-pcard .hs-pcard__btn.loading::after {
        animation-duration: 1800ms;
    }
}

[dir="rtl"] .hs-pcard__btn .hs-icon-arrow,
[dir="rtl"] .hs-post-card__more svg {
    transform: scaleX(-1);
}

/* Product card - End */

/* Phones: centre-snap carousel, edge to edge (Products List and related / upsell products). */
.hs-carousel .swiper-slide {
    height: auto;
}

@media (max-width: 559px) {
    .hs-products-list .hs-carousel,
    .hs-store-reviews .hs-carousel,
    .hs-athletic-roster .hs-carousel,
    .hs-blog-posts .hs-carousel,
    .hs-carousel--center {
        margin-inline: calc(50% - 50vw);
    }

    .hs-carousel--center {
        overflow: hidden;
    }

    /* Shoptimizer styles related / upsell lists as a native 320px scroller; hand sizing to Swiper. */
    .hs-carousel--center ul.products.swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hs-carousel--center ul.products li.product.hs-pcard-item {
        flex-shrink: 0;
        min-width: 0 !important;
        max-width: none !important;
        margin-bottom: 0;
        padding: 0;
    }
}

/* Phones: related / upsell lists are turned into a carousel by script; lay them out the same way
   beforehand (centred first card, 1.7 cards wide, edge to edge) so the page does not jump. */
@media (max-width: 559px) {
    .related ul.products:not(.swiper-wrapper),
    .up-sells ul.products:not(.swiper-wrapper),
    .upsells ul.products:not(.swiper-wrapper) {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0 !important;
        box-sizing: border-box;
        width: 100vw;
        margin: 0 calc(50% - 50vw) !important;
        padding: 0 0 0 calc((100vw - (100vw - 8.4px) / 1.7) / 2) !important;
        overflow: hidden !important;
    }

    .related ul.products:not(.swiper-wrapper) > li.product,
    .up-sells ul.products:not(.swiper-wrapper) > li.product,
    .upsells ul.products:not(.swiper-wrapper) > li.product {
        flex: 0 0 auto;
        width: calc((100vw - 8.4px) / 1.7) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
    }

    [dir="rtl"] .related ul.products:not(.swiper-wrapper),
    [dir="rtl"] .up-sells ul.products:not(.swiper-wrapper),
    [dir="rtl"] .upsells ul.products:not(.swiper-wrapper) {
        padding: 0 calc((100vw - (100vw - 8.4px) / 1.7) / 2) 0 0 !important;
    }

    [dir="rtl"] .related ul.products:not(.swiper-wrapper) > li.product,
    [dir="rtl"] .up-sells ul.products:not(.swiper-wrapper) > li.product,
    [dir="rtl"] .upsells ul.products:not(.swiper-wrapper) > li.product {
        margin: 0 0 0 12px !important;
    }
}

/* Phones: product grid fills the container exactly, with one small, even gap (the parent theme's 20px grid gap
   plus the desktop gutters made the right edge wider than the left and the cards far apart). */
@media (max-width: 767px) {
    ul.products:has(> li.hs-pcard-item):not(.swiper-wrapper) {
        gap: 14px 10px;
        width: auto;
        margin-inline: 0;
    }

    ul.products:not(.swiper-wrapper) > li.product.hs-pcard-item {
        width: auto;
        margin: 0;
        padding: 0;
    }
}

/* "Get notified" (out of stock): light tint of the brand yellow #e6b252 on the product cards and the product page. */
.hs-pcard-item.outofstock .hs-pcard .hs-pcard__btn--outline {
    background: #fcf5e6;
    color: #111;
    opacity: 1;
}

.hs-pcard-item.outofstock .hs-pcard .hs-pcard__btn--outline:hover,
.hs-pcard-item.outofstock .hs-pcard .hs-pcard__btn--outline:focus-visible {
    background: #e6b252;
    color: #111;
    opacity: 1;
}

/* Product page (simple, variable and bundle): same outline button and bell icon as the card. */
.single-product button.cgkit-waitlist-trigger,
.single-product #cgkit-waitlist-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    margin: 16px 0;
    padding: 8px 12px;
    border: 1.5px solid #222;
    border-radius: 6px;
    background: #fcf5e6;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    opacity: 1;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.single-product button.cgkit-waitlist-trigger::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 4.5 1.5 6.5 2.5 7.5h-17C4.5 15.5 6 13.5 6 9zM10 19.5a2 2 0 0 0 4 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 4.5 1.5 6.5 2.5 7.5h-17C4.5 15.5 6 13.5 6 9zM10 19.5a2 2 0 0 0 4 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-product button.cgkit-waitlist-trigger:hover,
.single-product button.cgkit-waitlist-trigger:focus-visible {
    background: #e6b252;
    color: #111;
}

/* Product tabs counter (Reviews 0): 6px from the label in LTR; the parent theme's RTL rule leaves no gap, so mirror it. */
.rtl #page .woocommerce-tabs ul.tabs li a span {
    left: -14px;
    right: auto;
}