/**
 * Store Kit — theme compatibility layer.
 *
 * Free themes vary enormously in how aggressively they style WooCommerce.
 * Rather than chase each one, everything the plugin owns is brought back to a
 * known state here, and the module stylesheets build up from it.
 *
 * The scope is deliberately tight: only elements inside a Store Kit wrapper
 * are touched, so the rest of the theme is untouched. This file loads before
 * every module stylesheet, so any module rule beats it at equal specificity.
 */

/* -------------------------------------------------------------------------
 * Box model and rhythm
 * ---------------------------------------------------------------------- */

.sk .sk-page,
.sk .sk-product,
.sk .sk-card-product,
.sk .sk-drawer,
.sk .sk-swatches {
	box-sizing: border-box;
}

.sk .sk-page *,
.sk .sk-product *,
.sk .sk-card-product *,
.sk .sk-drawer *,
.sk .sk-swatches * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Pseudo element fills
 *
 * Many themes build button and link fills from ::before or ::after. Left in
 * place they paint over the plugin's own backgrounds.
 * ---------------------------------------------------------------------- */

.sk .sk-page .button::before,
.sk .sk-page .button::after,
.sk .sk-page button.button::before,
.sk .sk-page button.button::after,
.sk .sk-qty-row .single_add_to_cart_button::before,
.sk .sk-qty-row .single_add_to_cart_button::after,
.sk .sk-swatch::before,
.sk .sk-card-product .button::before,
.sk .sk-card-product .button::after {
	content: none !important;
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Tables
 *
 * WooCommerce tables pick up striping, dashed borders and uppercase headers
 * from a lot of themes.
 * ---------------------------------------------------------------------- */

.sk .sk-page table.shop_table,
.sk .sk-page table.woocommerce-table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.sk .sk-page table.shop_table tr,
.sk .sk-page table.shop_table tbody tr:nth-child(odd),
.sk .sk-page table.shop_table tbody tr:nth-child(even) {
	background: transparent;
}

.sk .sk-page table.shop_table th,
.sk .sk-page table.shop_table td {
	border-left: 0;
	border-right: 0;
	background: transparent;
	letter-spacing: normal;
}

.sk .sk-page table.shop_table td::before,
.sk .sk-page table.shop_table th::before {
	content: none;
}

/* -------------------------------------------------------------------------
 * Lists
 * ---------------------------------------------------------------------- */

.sk .sk-page ul.woocommerce-shipping-methods,
.sk .sk-page ul.wc_payment_methods,
.sk .sk-page ul.sk-badges,
.sk .sk-drawer ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.sk .sk-page ul.wc_payment_methods li::before,
.sk .sk-page ul.wc_payment_methods li::marker,
.sk .sk-page ul.sk-badges li::before,
.sk .sk-page ul.sk-badges li::marker {
	content: none;
	display: none;
}

/* -------------------------------------------------------------------------
 * Headings
 *
 * Section headings inside plugin markup should read as section headings, not
 * as page titles.
 * ---------------------------------------------------------------------- */

.sk .sk-page h2,
.sk .sk-page h3,
.sk .sk-drawer h2 {
	letter-spacing: normal;
	text-transform: none;
}

.sk .sk-page h2::after,
.sk .sk-page h3::after,
.sk .sk-page h2::before,
.sk .sk-page h3::before {
	content: none;
	display: none;
}

/* -------------------------------------------------------------------------
 * Links
 * ---------------------------------------------------------------------- */

.sk .sk-page a,
.sk .sk-card-product a,
.sk .sk-drawer a {
	box-shadow: none;
	text-decoration-thickness: auto;
}

/* -------------------------------------------------------------------------
 * Images
 * ---------------------------------------------------------------------- */

.sk .sk-page img,
.sk .sk-card-product img,
.sk .sk-drawer img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Forms
 *
 * Only inside plugin wrappers, so theme forms elsewhere are unaffected.
 * ---------------------------------------------------------------------- */

.sk .sk-page input[type="text"],
.sk .sk-page input[type="email"],
.sk .sk-page input[type="tel"],
.sk .sk-page input[type="number"],
.sk .sk-page input[type="password"],
.sk .sk-page textarea,
.sk .sk-page select {
	max-width: 100%;
	text-transform: none;
	letter-spacing: normal;
}

/* -------------------------------------------------------------------------
 * Duplicate controls
 *
 * Marked in JavaScript when a theme supplies its own version of something the
 * plugin already renders.
 * ---------------------------------------------------------------------- */

.sk .sk-duplicate-qty,
.sk .sk-duplicate-remove {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Known theme conflicts
 *
 * Each rule below is a specific, verified conflict rather than a blanket
 * override. They are grouped by theme so they stay easy to audit.
 * ---------------------------------------------------------------------- */

/* Astra wraps WooCommerce loops in a flex row with negative margins, and
 * gives loop items a percentage width for its own column system. */
.sk-archive-page ul.products.columns-1,
.sk-archive-page ul.products.columns-2,
.sk-archive-page ul.products.columns-3,
.sk-archive-page ul.products.columns-4,
.sk-archive-page ul.products.columns-5,
.sk-archive-page ul.products.columns-6 {
	margin-left: 0;
	margin-right: 0;
}

.sk-archive-page ul.products li.product,
.sk-archive-page ul.products li.product.first,
.sk-archive-page ul.products li.product.last {
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: none !important;
}

/* OceanWP, Kadence and Neve all set a percentage width on the product
 * summary for the float layout the plugin's grid replaces. */
.sk-product-page .sk-product > .summary,
.sk-product-page .sk-product > .entry-summary,
.sk-product-page .sk-product .summary.entry-summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

/* GeneratePress and Twenty Twenty-One separate the gallery with a float and
 * a fixed percentage. */
.sk-product-page .sk-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin-bottom: 0 !important;
}

/* Several themes add a decorative rule under WooCommerce tab lists. */
.sk-product-page .woocommerce-tabs ul.tabs::before,
.sk-product-page .woocommerce-tabs ul.tabs::after {
	border: 0 !important;
	content: none !important;
}

/* Themes that add a full width background band behind notices, which reads
 * badly inside the plugin's cards. */
.sk .woocommerce-message,
.sk .woocommerce-error,
.sk .woocommerce-info {
	text-transform: none;
	letter-spacing: normal;
}

/* Block themes place cart and checkout inside a constrained group. The
 * container escape handles width; this stops the group's own padding
 * doubling the plugin's. */
.sk .sk-page > .wp-block-group,
.sk .sk-page > .entry-content {
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Interaction states
 *
 * Themes commonly repaint every button on hover, focus and active, often
 * through a pseudo element or a background image. The plugin's own quiet
 * controls are listed here and held transparent in every state; each module
 * then declares the hover it actually wants.
 *
 * Buttons that are meant to be filled — add to cart, checkout, place order —
 * are deliberately absent, so their own rules still apply.
 * ---------------------------------------------------------------------- */

.sk .sk-tabs__trigger,
.sk .sk-tabs__trigger:hover,
.sk .sk-tabs__trigger:focus,
.sk .sk-tabs__trigger:active,
.sk .sk-variation__btn,
.sk .sk-variation__btn:hover,
.sk .sk-variation__btn:focus,
.sk .sk-variation__btn:active,
.sk .sk-qty__btn,
.sk .sk-qty__btn:focus,
.sk .sk-qty__btn:active,
.sk .sk-coupon-toggle,
.sk .sk-coupon-toggle:hover,
.sk .sk-coupon-toggle:focus,
.sk .sk-coupon-toggle:active,
.sk .sk-remove,
.sk .sk-remove:focus,
.sk .sk-remove:active {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline-offset: 2px;
	text-decoration: none !important;
	transform: none !important;
}

/* Pseudo element fills on those same controls. */
.sk .sk-tabs__trigger::before,
.sk .sk-tabs__trigger::after,
.sk .sk-variation__btn::before,
.sk .sk-variation__btn::after,
.sk .sk-qty__btn::before,
.sk .sk-qty__btn::after,
.sk .sk-coupon-toggle::before,
.sk .sk-coupon-toggle::after,
.sk .sk-remove::before,
.sk .sk-remove::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* Filled controls keep their own colour on hover rather than the theme's. */
.sk .sk-page .checkout-button:hover,
.sk .sk-page .sk-place-order:hover,
.sk .sk-page .checkout-button:focus,
.sk .sk-page .sk-place-order:focus {
	background-image: none !important;
	box-shadow: none !important;
}

.sk .sk-page .checkout-button::before,
.sk .sk-page .checkout-button::after,
.sk .sk-page .sk-place-order::before,
.sk .sk-page .sk-place-order::after,
.sk .sk-product-page .single_add_to_cart_button::before,
.sk .sk-product-page .single_add_to_cart_button::after {
	content: none !important;
	display: none !important;
}

/* Links inside plugin markup should not gain a theme underline animation. */
.sk .sk-page a::before,
.sk .sk-page a::after,
.sk .sk-card-product a::before,
.sk .sk-card-product a::after {
	content: none;
}

/* Focus stays visible, because removing the theme's focus paint must not
 * leave a keyboard user with nothing. */
.sk .sk-tabs__trigger:focus-visible,
.sk .sk-variation__btn:focus-visible,
.sk .sk-qty__btn:focus-visible,
.sk .sk-coupon-toggle:focus-visible,
.sk .sk-remove:focus-visible {
	outline: 2px solid var(--sk-accent) !important;
}