/*
 * CommerceKit Standalone Styles
 *
 * These styles apply to all themes EXCEPT Shoptimizer.
 * Shoptimizer has its own compatibility stylesheet (shoptimizer.css).
 */

 /* PDP swatches: reset center alignment, remove table borders, ensure vertical stacking */
div.product .summary .commercekit-pdp-sticky-inner table.variations {
	text-align: left;
	border: 0;
	margin-bottom: 0;
}
div.product .summary .commercekit-pdp-sticky-inner table.variations tr {
	display: block;
}
div.product .summary .commercekit-pdp-sticky-inner table.variations td,
div.product .summary .commercekit-pdp-sticky-inner table.variations th {
	display: block;
	padding: 4px 0;
	background-color: transparent;
}

/* ==========================================================================
   Sticky ATC Tabs
   ========================================================================== */

.commercekit-atc-sticky-tabs ul.commercekit-atc-tab-links {
	padding: 0;
}

.commercekit-atc-tab-links li a {
	text-decoration: none;
}

/* ==========================================================================
   PDP Attribute Swatches
   ========================================================================== */

.cgkit-swatch-form {
	margin-bottom: 0;
}

.cgkit-swatch-form table tbody tr td {
	text-align: inherit;
}

/* Show second swatch title on desktop (first is always visible) */
@media (min-width: 993px) {
	form.variations_form.cgkit-swatch-form table.variations tr:nth-child(2) .cgkit-swatch-title {
		display: inherit;
	}
}

/* PLP "more" swatch button: ensure tap target on mobile */
@media (max-width: 770px) {
	.cgkit-as-wrap-plp .cgkit-attribute-swatches li.cgkit-attribute-swatch.cgkit-as-more > a {
		height: 44px;
	}
}

.woocommerce .cart-collaterals .cross-sells ul.products .cgkit-attribute-swatches li, 
.woocommerce-page .cart-collaterals .cross-sells ul.products .cgkit-attribute-swatches li {
    width: auto;
}

.rtl .commercekit-pdp-sticky-inner table td {
    text-align: right;
}

/* ==========================================================================
   PDP Links (Wishlist + Size Guide wrapper)
   ========================================================================== */

.commercekit-pdp-links {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 1rem;
}

.commercekit-wishlist.full {
	flex-shrink: 0;
}

.commercekit-pdp-links .commercekit-size-guide {
	margin: 0;
	flex-shrink: 0;
}

.commercekit-pdp-links a,
.commercekit-pdp-links .commercekit-sg-label {
	font-weight: 400;
	line-height: 1;
}

/* Remove any generic button padding */
.commercekit-size-guide .commercekit-sg-label {
	padding: 0;
}

/* ==========================================================================
   Product Gallery
   ========================================================================== */

/* Scale down thumb nav buttons in narrow containers */
.cg-thumb-swiper {
    container-type: inline-size;
}

/*
 * Swiper's bundle CSS sets box-sizing:content-box on .swiper-wrapper. Themes that
 * use *{box-sizing:inherit} (e.g. Astra, GeneratePress) cause .swiper-slide to
 * inherit content-box, making padding additive to width:20%. Five thumb slides then
 * exceed the container and show a sliver of the next thumbnail. Force border-box so
 * padding is absorbed within each slide's percentage width.
 * (No-op on themes that already apply *{box-sizing:border-box} directly.)
 */
.cg-thumb-swiper .swiper-slide {
    box-sizing: border-box;
}

/*
 * Clip the thumb strip's negative-margin bleed (margin-left:-5px; width:calc(100%+10px))
 * so it doesn't overflow the gallery container. Themes with a float-based BFC clip this
 * naturally; flex-based themes (Astra, GeneratePress) do not.
 * Scoped to horizontal layout only — vertical layouts use a fixed-width flex column with
 * no bleed, and overflow:hidden there clips the thumb column's height, hiding lower
 * slides and breaking click events on them.
 */
#commercegurus-pdp-gallery.cg-layout-horizontal {
    overflow: hidden;
}

/*
 * Some themes apply a global ul margin (e.g. ol,ul{margin:0 0 1.5em 3em}) which
 * shifts ul.swiper-wrapper — the CSS-mode scroll container — inside the swiper div,
 * misaligning scroll-snap points. Reset it unconditionally.
 */
#commercegurus-pdp-gallery .swiper-wrapper {
    margin: 0;
    padding: 0;
}

/* Navigation arrows */
#commercegurus-pdp-gallery .swiper-button-next:after,
#commercegurus-pdp-gallery .swiper-button-prev:after {
	display: block;
}

@media (min-width: 771px) {
    #commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper .swiper-slide,
    #commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper .swiper-slide {
        padding-top: 0;
        padding-bottom: 0;
    }
    #commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper button.swiper-button-prev,
    #commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper button.swiper-button-prev {
        margin: 0;
        top: 0px;
    }
    #commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper button.swiper-button-next,
    #commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper button.swiper-button-next {
        margin: 0;
        bottom: 0px;
    }
    /*
     * product-gallery-swiper.css applies margin-left:-5px; width:calc(100%+10px) to
     * ALL .cg-thumb-swiper.swiper-container elements for the horizontal thumbnail bleed
     * effect. In vertical layouts the thumb column is a flex child — "100%" resolves to
     * the full flex container width (e.g. 480px), not the flex item's 100px allocation.
     * This inflates the container to ~490px, making the nav buttons (width:calc(100%-5px))
     * span the entire gallery and intercept clicks on visible slides. Reset to the
     * correct width so the container matches its intended 100px flex allocation.
     */
    #commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper.swiper-container,
    #commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper.swiper-container {
        margin-left: 0;
        width: 100px;
    }
    .rtl #commercegurus-pdp-gallery.cg-layout-vertical-left .cg-thumb-swiper.swiper-container,
    .rtl #commercegurus-pdp-gallery.cg-layout-vertical-right .cg-thumb-swiper.swiper-container {
        margin-right: 0;
    }
}

@container (max-width: 400px) {
    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper button.swiper-button-next,
    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper button.swiper-button-prev {
        width: 24px;
        height: 24px;
        margin-top: -12px;
    }
    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper button.swiper-button-next:after,
    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper button.swiper-button-prev:after {
        width: 14px;
        height: 14px;
    }

    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper div.cgkit-play,
    .cgkit-gallery-horizontal #commercegurus-pdp-gallery .cg-thumb-swiper div.cgkit-play svg {
        width: 24px;
        height: 24px;
    }
}

/* Override WooCommerce woocommerce-product-gallery__image:nth-child(n+2) { width:25%; display:inline-block } */
#commercegurus-pdp-gallery-wrapper.images .woocommerce-product-gallery__image,
#commercegurus-pdp-gallery-wrapper.images .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 100%;
    display: block;
}
@media (max-width: 770px) {
    #commercegurus-pdp-gallery-wrapper.images.ckit-mobile-show-edge:not(.cgkit-single-gallery) .woocommerce-product-gallery__image.swiper-slide,
    #commercegurus-pdp-gallery-wrapper.images.ckit-mobile-show-edge .woocommerce-product-gallery__image.swiper-slide:nth-child(n+2) {
        width: var(--cgkit-showedge-percent, 91%);
        display: flex;
    }
}
.woocommerce div.product #commercegurus-pdp-gallery-wrapper.images .woocommerce-product-gallery__image a,
.woocommerce div.product #commercegurus-pdp-gallery-wrapper.images img {
    height: 100%;
    object-fit: cover;
}

.woocommerce div.product .cgkit-gallery-horizontal #commercegurus-pdp-gallery .swiper-button-next,
.woocommerce div.product .cgkit-gallery-horizontal #commercegurus-pdp-gallery .swiper-button-prev {
    margin-top: 5px;
    transform: translateY(-50%);
}

.woocommerce div.product #commercegurus-pdp-gallery-wrapper.images .cg-grid-layout .woocommerce-product-gallery__image.more-images {
    display: none;
}

@media (min-width: 771px) {
    button.load-more-images {
        padding: 10px 20px; 
        font-size: 13px;
    }
}

@media (max-width: 770px) {
    .load-more-images {
        display: none;
    }
}

@media (min-width: 771px) {
    /* No-badges: push .onsale past the 100px thumb column */
    .cgkit-active.single-product:has(.cg-layout-vertical-left) div.product > .onsale {
        left: 100px;
    }
    .rtl.cgkit-active.single-product:has(.cg-layout-vertical-left) div.product > .onsale {
        right: 100px;
        left: auto;
    }
    .cgkit-active.single-product:has(.cg-layout-vertical-left) div.product .ckit-badge_wrapper {
        margin-left: 100px;
    }
    .rtl.cgkit-active.single-product:has(.cg-layout-vertical-left) div.product .ckit-badge_wrapper {
        margin-right: 100px;
        margin-left: 0;
    }
    .cgkit-active.single-product:has(.cgkit-single-gallery) div.product .ckit-badge_wrapper {
        margin-left: 0px;
    }
    .rtl.cgkit-active.single-product:has(.cgkit-single-gallery) div.product .ckit-badge_wrapper {
        margin-right: 0px;
        margin-left: 0;
    }

    /* Badges active: compact .onsale is at left:10px; add thumb column offset.
     * Specificity (0,6,2) beats the compact rule at (0,5,2). */
    .cgkit-active.single-product.cgkit-has-badges:has(.cg-layout-vertical-left) div.product > span.onsale {
        left: 110px;
    }
    .cgkit-active.single-product:has(.cgkit-gallery-vertical-scroll) div.product > span.onsale {
        margin-left: 65px;
    }
    .rtl.cgkit-active.single-product:has(.cgkit-gallery-vertical-scroll) div.product > span.onsale {
        margin-left: 0;
        margin-right: 65px;
    }
    .rtl.cgkit-active.single-product.cgkit-has-badges:has(.cg-layout-vertical-left) div.product > span.onsale {
        left: auto;
        right: 110px;
    }
}

/* ==========================================================================
   Wishlist Page (shortcode grid)
   ========================================================================== */

#commercekit-wishlist-shortcode .commercekit-wishlist-list {
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 26px;
	row-gap: 36px;
}

#commercekit-wishlist-shortcode.woocommerce ul.products:before {
	display: none;
}

#commercekit-wishlist-shortcode.woocommerce ul.products li.product {
	float: none;
	width: 100%;
	margin: 0;
}

@media screen and (min-width: 993px) {
	#commercekit-wishlist-shortcode ul.commercekit-wishlist-list.products li.product {
		width: 100%;
	}
}

@media (max-width: 992px) {
	#commercekit-wishlist-shortcode .commercekit-wishlist-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#commercekit-wishlist-shortcode .commercekit-wishlist-list {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ==========================================================================
   Badge + Wishlist Positioning
   ========================================================================== */

/*
 * Note: wishlist heart → right and badge push-down (ckit-has-sale) are handled
 * in commercekit-unified.css as universal rules. The rules here are theme-specific:
 * .onsale repositioning and compact styling. No .woocommerce prefix — that class
 * is absent on non-WC pages (homepage etc.) where products appear via shortcode.
 * Gallery offset rules use .cgkit-active prefix to reach (0,6,2), beating
 * these compact rules by specificity regardless of cascade order.
 */

/*
 * Wishlist active, badges NOT active: move .onsale to top-left using WooCommerce's
 * natural -.5em offset (the base span.onsale value used by most themes). Frees
 * top-right for the wishlist heart.
 * :not(.cgkit-has-badges) ensures the compact badges rule below takes full control
 * when the badges module is on.
 */
.cgkit-has-wishlist:not(.theme-storefront):not(.cgkit-has-badges) ul.products li.product span.onsale {
    left: -.5em;
    right: auto;
}

/*
 * Badges module active: shrink .onsale to a compact label aligned with custom badges.
 * PLP (11px) and PDP (12px) use separate rules to avoid a cascade override.
 * :not(.theme-storefront) keeps Storefront's in-flow .onsale unaffected.
 */
.cgkit-has-badges:not(.theme-storefront) ul.products li.product span.onsale {
    top: 10px;
    left: 10px;
    right: auto;
    margin: 0;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 8px;
    min-width: unset;
    min-height: unset;
}

.cgkit-active.cgkit-has-badges:not(.theme-storefront) div.product .onsale {
    top: 10px;
    left: 10px;
    right: auto;
    margin: 0;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
    padding: 3px 8px;
    min-width: unset;
    min-height: unset;
}

/* RTL: mirror .onsale horizontal positions */
.rtl.cgkit-has-badges:not(.theme-storefront) ul.products li.product span.onsale,
.rtl.cgkit-active.cgkit-has-badges:not(.theme-storefront) div.product span.onsale {
    right: 10px;
    left: auto;
}

.rtl.cgkit-has-wishlist:not(.theme-storefront):not(.cgkit-has-badges) ul.products li.product span.onsale {
    right: -.5em;
    left: auto;
}

/* ==========================================================================
   Waitlist
   ========================================================================== */
.cgkit-active #commercekit-waitlist-popup .star-rating {
    float: none;
}