/*
 * KidsCool Product Grids — unified product card
 *
 * Used by the [aproxian_products] shortcode (new / sale pages) and, via the
 * content-product template swap, by category / tag archives and related /
 * up-sell loops. Matches the WooCommerce shop card: white card, 10px radius,
 * centred content, pink price / button, and the theme's 1px pink "skin border"
 * on hover (no lift / shadow).
 *
 * Column counts (ALL of them are generated by PHP and injected inline, from the
 * Customizer settings + Elementor's breakpoints — see
 * Kidscool_Product_Grids::grids_css()):
 *   - shortcode grids are targeted via .ap-grid.ap-cols-N;
 *   - related / up-sell grids via their own selectors;
 *   - category / tag archives follow the shop's .kc-col-N wrapper instead.
 * The only column rule left in this file is the pre-CSS base below, so the grid
 * still looks sane if the inline style is ever stripped by an optimiser.
 */

/* ---- shortcode grid ---- */
.ap-grid{display:grid;gap:24px;grid-template-columns:repeat(6,1fr);}

/* ---- the card ---- */
.ap-card{position:relative;text-align:center;padding:16px;border-radius:10px;background:#fff;transition:.25s;overflow:visible;}
/* shop-style hover: 1px pink skin border drawn as an overlay, no lift/shadow */
.ap-card::before{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color .25s ease;}
.ap-card:hover::before{border-color:var(--wdtPrimaryColor,#ed145b);}
.ap-media{position:relative;}
.ap-media img{width:100%;height:auto;border-radius:10px;}
.ap-title{display:block;margin:12px 0 6px;font-weight:700;color:#2a2a3a;text-decoration:none;}
.ap-price{margin-bottom:12px;color:#ec2d8a;font-weight:700;}
.ap-price del{color:#9aa0ad;font-weight:400;margin-right:6px;}
.ap-add{display:inline-block;background:#ec2d8a;color:#fff;border-radius:50px;padding:10px 20px;text-decoration:none;}
.ap-add:hover{background:#c81e74;color:#fff;}
.ap-empty{text-align:center;}

/* ---- badges (shortcode; optional on related) ---- */
.ap-badge{position:absolute;top:10px;z-index:2;font-weight:700;font-size:13px;padding:5px 10px;border-radius:50px;color:#fff;}
.ap-badge-sale{
	background:url('https://studiopetsbg.com/wp-content/uploads/2026/06/badge-sale-starburst.svg') center/contain no-repeat !important;
	left:8px;top:8px;min-width:54px;height:54px;padding:0;
	display:flex;align-items:center;justify-content:center;
	border-radius:0;color:#fff;font-size:14px;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.ap-badge-new{
	background:#1cbbb4 url('https://studiopetsbg.com/wp-content/uploads/2026/06/badge-new-sparkle.svg') 9px center/14px 14px no-repeat;
	left:auto;right:8px;top:10px;padding:6px 12px 6px 28px;
}

/* ---- pagination ---- */
.ap-pagination{display:flex;gap:8px;justify-content:center;margin-top:28px;}
.ap-page{padding:8px 14px;border-radius:50px;background:#fde3ef;color:#c81e74;text-decoration:none;}
.ap-page.current{background:#ec2d8a;color:#fff;}

/* ---- related / up-sell grids ----
 * The theme hides these li by default (revealed only by JS that no longer
 * matches our markup), so we force a clean CSS grid. grid-template-columns is
 * supplied inline by PHP from the Customizer setting.
 */
.related.products ul.products,
.up-sells ul.products,
.upsells ul.products{
	display:grid !important;
	gap:24px;margin:0;padding:0;width:100%;
}
.related.products ul.products li.product,
.up-sells ul.products li.product,
.upsells ul.products li.product{
	display:block !important;width:auto !important;float:none !important;margin:0 !important;list-style:none;
}
.related.products ul.products li.product .wdt-col,
.up-sells ul.products li.product .wdt-col,
.upsells ul.products li.product .wdt-col{
	width:auto !important;max-width:none !important;float:none !important;padding:0 !important;
}
/* higher-specificity sizer hide (beats the li.product display:block rule) */
.related.products ul.products li.product.isotope-grid-sizer,
.up-sells ul.products li.product.isotope-grid-sizer,
.upsells ul.products li.product.isotope-grid-sizer{
	display:none !important;
}

/* The KidsCool Elementor widget renders the desktop maximum server-side.
 * JS synchronises the visible count to the current matrix value so related and
 * up-sell products always occupy exactly one row: 6/5/4/3/2/1 by default. */
.single-product .related.products ul.products li.product.kc-related-overflow,
.single-product .up-sells ul.products li.product.kc-related-overflow,
.single-product .upsells ul.products li.product.kc-related-overflow{
	display:none !important;
}

/* Keep our card clean and full-width inside the theme's list / column wrapper
 * (category archives keep the theme's flex wdt-col layout). */
.woocommerce ul.products li.product .ap-card{margin:0;box-shadow:none;}
.woocommerce ul.products li.product > .wdt-col > .ap-card{width:100%;}