/* =========================================================================
   SJ Kids Outfit - WooCommerce restyling
   Loaded site-wide wherever WooCommerce renders. Pulls WoodMart's product
   cards, badges and buttons into the purple palette rather than rebuilding
   any of its templates.
   ========================================================================= */

/* --- Product labels (sale % and "Hot") ----------------------------------
   WoodMart ships these in its own green/red; bring them into the ramp so
   the page stays mono-purple. White on #80286E is 8.58:1. */
.product-labels .product-label.onsale {
	background-color: var(--sj-p-600);
	color: #fff;
}
.product-labels .product-label.featured,
.product-labels .product-label.new {
	background-color: var(--sj-p-700);
	color: #fff;
}
.product-labels .product-label {
	font-family: var(--sj-font);
	font-weight: var(--sj-fw-bold);
	letter-spacing: var(--sj-ls-wide);
}

/* --- Product card ------------------------------------------------------- */
.wd-product .wd-entities-title a {
	color: var(--sj-ink);
	font-family: var(--sj-font-head);
	font-weight: var(--sj-fw-semi);
}
.wd-product .wd-entities-title a:hover { color: var(--sj-primary); }

.wd-product .wd-product-cats,
.wd-product .wd-product-cats a { color: var(--sj-muted); font-size: var(--sj-fs-xs); }
.wd-product .wd-product-cats a:hover { color: var(--sj-primary); }

.wd-product .price { color: var(--sj-ink); font-weight: var(--sj-fw-bold); }
.wd-product .price del { color: var(--sj-muted); font-weight: var(--sj-fw-regular); }
.wd-product .price ins { color: var(--sj-p-700); text-decoration: none; }

/* --- Buttons ------------------------------------------------------------- */
.woocommerce .button,
.wd-product .add_to_cart_button,
.wd-product .product_type_variable,
.wd-product .product_type_simple,
.wc-block-components-button,
.woocommerce-page .button.alt {
	border-radius: var(--sj-r-pill);
	font-family: var(--sj-font);
	font-weight: var(--sj-fw-semi);
	letter-spacing: var(--sj-ls-wide);
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background-color: var(--sj-primary);
	color: #fff;
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--sj-primary-dark);
	color: #fff;
}

/* --- Notices -------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--sj-primary); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--sj-primary); }

/* --- Shop archive header --------------------------------------------------- */
.woocommerce-result-count,
.woocommerce-ordering select { color: var(--sj-body); font-size: var(--sj-fs-sm); }

/* --- Side cart drawer ------------------------------------------------------- */
.cart-widget-side .wd-heading .title {
	font-family: var(--sj-font-head);
	color: var(--sj-ink);
	font-weight: var(--sj-fw-bold);
}
.cart-widget-side .woocommerce-mini-cart__total .amount { color: var(--sj-p-700); }

/* --- Sticky mobile toolbar ------------------------------------------------- */
/* WoodMart ships its toolbar cart bubble in a stock green that sits outside
   the palette; the header bubble above it is brand purple, so match them. */
.wd-toolbar .wd-tools-count,
.wd-toolbar .wd-cart-number {
	background-color: var(--sj-primary);
	color: #fff;
}

/* =========================================================================
   Product card

   Lives here rather than in home.css because the same card is used by the
   homepage rows and the shop archive; home.css only loads on the front page.
   ========================================================================= */
/* --- Grid ---------------------------------------------------------------- */
.sj-pcards {
	display: grid;
	gap: 27px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	/* never more than three across on a tablet, whatever the setting */
	.sj-pcards { grid-template-columns: repeat(min(var(--sj-pcols, 4), 3), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sj-pcards { grid-template-columns: repeat(var(--sj-pcols, 4), minmax(0, 1fr)); }
}

/* --- Card ---------------------------------------------------------------- */
.sj-pcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sj-surface);
	border: 1px solid var(--sj-border-strong);
	border-radius: 10px;
	transition: box-shadow var(--sj-dur-base) var(--sj-ease);
}
.sj-pcard:hover { box-shadow: var(--sj-shadow-md); }

.sj-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--sj-surface-alt);
}
.sj-pcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sj-dur-slow) var(--sj-ease);
}
.sj-pcard:hover .sj-pcard__img { transform: scale(1.04); }
.sj-pcard__img--empty { background: var(--sj-gradient-soft); }

/* The disc hangs off the corner and is clipped by the card, as in the
   reference - hence the negative offsets. */
.sj-pcard__badge {
	position: absolute;
	top: -8px;
	left: -14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding-left: 8px;
	background: var(--sj-sale);
	border-radius: 50%;
	color: #fff;
	font-size: 13px;
	font-weight: var(--sj-fw-semi);
	line-height: 1;
}

.sj-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 15px 15px;
}

/* One line, clipped - the reference never wraps a product name. */
.sj-pcard__title {
	margin: 0;
	color: var(--sj-body);
	font-size: 15px;
	font-weight: var(--sj-fw-regular);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sj-pcard__title a {
	color: var(--sj-body);
	text-decoration: none;
}
.sj-pcard__title a:hover { color: var(--sj-primary); }

.sj-pcard__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 16px;
}
.sj-pcard__price del {
	color: var(--sj-muted);
	font-size: 15px;
	text-decoration: line-through;
}
.sj-pcard__price del .amount { color: inherit; }
.sj-pcard__price ins,
.sj-pcard__price > .amount {
	color: var(--sj-primary);
	font-weight: var(--sj-fw-semi);
	text-decoration: none;
	background: none;
}

.sj-pcard__rating {
	display: flex;
	align-items: center;
	gap: 7px;
}
.sj-stars { display: inline-flex; gap: 1px; }
.sj-stars__star svg {
	display: block;
	width: 14px;
	height: 14px;
	color: var(--sj-border-strong);
}
.sj-stars__star.is-on svg { color: var(--sj-p-600); }
.sj-pcard__reviews { color: var(--sj-muted); font-size: 13px; }

.sj-pcard__quick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sj-sp-2);
	/* auto, not a fixed gap: cards whose neighbours carry a rating row are
	   taller, and the buttons should still line up across the row */
	margin-top: auto;
	padding: 11px 16px;
	background: var(--sj-surface);
	border: 1px solid var(--sj-border-strong);
	border-radius: 10px;
	color: var(--sj-primary);
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--sj-dur-base) var(--sj-ease),
	            border-color var(--sj-dur-base) var(--sj-ease),
	            color var(--sj-dur-base) var(--sj-ease);
}
.sj-pcard__quick svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sj-pcard__quick:hover {
	background: var(--sj-primary);
	border-color: var(--sj-primary);
	color: #fff;
}

/* WoodMart's quick view adds .loading while it fetches the product, which
   takes a moment. Without a cue the button looks dead, and a second click
   is swallowed by the script's own guard. */
.sj-pcard__quick.loading {
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 767px) {
	.sj-pcards { gap: 14px; }
	.sj-pcard__body { padding: 12px 11px 11px; gap: 5px; }
	.sj-pcard__title { font-size: 14px; }
	.sj-pcard__price { font-size: 15px; }
	/* two cards across at 375px leaves ~128px of button; "Quick Shop" plus
	   the trolley needs the tighter padding to stay on one line */
	.sj-pcard__quick { padding: 9px 10px; font-size: 13px; white-space: nowrap; }
	.sj-pcard__quick svg { width: 18px; height: 18px; }
	.sj-pcard__badge { width: 46px; height: 46px; font-size: 12px; top: -6px; left: -12px; }
}

/* WoodMart renders <div class="products wd-products wd-grid-g"> and drives
   the columns from its own --wd-col-* custom properties, which products.php
   sets via woodmart_set_loop_prop(). Nothing to override here; we only trim
   the trailing margin it adds below the grid. */
.sj-products .products.wd-products { margin-bottom: 0; }