/**
 * Makito Product Card — design tokens + component styles.
 * The @font-face for "Sunday Charm" is injected inline by PHP (see
 * makito_pc_enqueue_assets()) because its URL depends on the site's install
 * path (content_url()) and can't be hardcoded here.
 */

.makito-pc-wrap {
	--makito-amber: #FFBF00;
	--makito-blue: #1756D4;
	--makito-cream: #FFFCEA;
	--makito-text: #1a1a1a;
	--makito-radius: 16px;
	--makito-shadow: 0 4px 18px rgba(26, 26, 26, 0.08);
	--makito-border: 1px solid rgba(23, 86, 212, 0.08);
	--makito-heading-font: 'Sunday Charm', cursive, sans-serif;
	--makito-body-font: 'Poppins', sans-serif;

	/* Hard offset shadow (neo-brutalist). Elementor's "Hard Shadow" controls override these. */
	--mpc-card-shadow-x: 3px; --mpc-card-shadow-y: 3px; --mpc-card-blur: 0px; --mpc-card-spread: 0px; --mpc-card-color: #000000; --mpc-card-bw: 1px; --mpc-card-bc: #000000;
	--mpc-btn-x: 4px; --mpc-btn-y: 4px; --mpc-btn-blur: 0px; --mpc-btn-spread: 0px; --mpc-btn-color: #000000; --mpc-btn-bw: 2px; --mpc-btn-bc: #000000;
	--mpc-more-x: 4px; --mpc-more-y: 4px; --mpc-more-blur: 0px; --mpc-more-spread: 0px; --mpc-more-color: #000000; --mpc-more-bw: 2px; --mpc-more-bc: #000000;
	--mpc-arrow-x: 3px; --mpc-arrow-y: 3px; --mpc-arrow-blur: 0px; --mpc-arrow-spread: 0px; --mpc-arrow-color: #000000; --mpc-arrow-bw: 2px; --mpc-arrow-bc: #000000;
	--mpc-btn-bg: #FFBF00; --mpc-btn-text: #1a1a1a;
	--mpc-more-bg: #FFBF00; --mpc-more-text: #1a1a1a;
	/* Card hover: thicker hard shadow + small lift. Colours never change. */
	--mpc-card-shadow-hover-x: 8px; --mpc-card-shadow-hover-y: 8px; --mpc-card-shadow-hover-color: #000000;
	--mpc-card-lift-x: -3px; --mpc-card-lift-y: -3px; --mpc-card-hover-dur: 200ms;
	--mpc-card-shadow: var(--mpc-card-shadow-x) var(--mpc-card-shadow-y) var(--mpc-card-blur) var(--mpc-card-spread) var(--mpc-card-color);
	--mpc-card-shadow-hover: var(--mpc-card-shadow-hover-x) var(--mpc-card-shadow-hover-y) var(--mpc-card-blur) var(--mpc-card-spread) var(--mpc-card-shadow-hover-color);
	--mpc-btn-shadow: var(--mpc-btn-x) var(--mpc-btn-y) var(--mpc-btn-blur) var(--mpc-btn-spread) var(--mpc-btn-color);
	--mpc-more-shadow: var(--mpc-more-x) var(--mpc-more-y) var(--mpc-more-blur) var(--mpc-more-spread) var(--mpc-more-color);
	--mpc-arrow-shadow: var(--mpc-arrow-x) var(--mpc-arrow-y) var(--mpc-arrow-blur) var(--mpc-arrow-spread) var(--mpc-arrow-color);
	/* Space the shadow needs on each side (so it is never clipped). */
	/* Covers the larger of the normal and the hover (shadow + lift) extents. */
	--mpc-card-r: max(0px, calc(var(--mpc-card-shadow-x) + var(--mpc-card-blur) + var(--mpc-card-spread)), calc(var(--mpc-card-shadow-hover-x) + var(--mpc-card-lift-x) + var(--mpc-card-blur) + var(--mpc-card-spread)));
	--mpc-card-l: max(0px, calc(var(--mpc-card-blur) + var(--mpc-card-spread) - var(--mpc-card-shadow-x)), calc(-1 * var(--mpc-card-lift-x)), calc(var(--mpc-card-blur) + var(--mpc-card-spread) - var(--mpc-card-lift-x) - var(--mpc-card-shadow-hover-x)));
	--mpc-card-b: max(0px, calc(var(--mpc-card-shadow-y) + var(--mpc-card-blur) + var(--mpc-card-spread)), calc(var(--mpc-card-shadow-hover-y) + var(--mpc-card-lift-y) + var(--mpc-card-blur) + var(--mpc-card-spread)));
	--mpc-card-t: max(0px, calc(var(--mpc-card-blur) + var(--mpc-card-spread) - var(--mpc-card-shadow-y)), calc(-1 * var(--mpc-card-lift-y)), calc(var(--mpc-card-blur) + var(--mpc-card-spread) - var(--mpc-card-lift-y) - var(--mpc-card-shadow-hover-y)));

	font-family: var(--makito-body-font);
	color: var(--makito-text);
}

/* ---------- Grid ---------- */

.makito-pc-grid {
	--makito-pc-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--makito-pc-columns), 1fr);
	gap: 28px;
	align-items: stretch;
}

@media (max-width: 1200px) {
	.makito-pc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.makito-pc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.makito-pc-grid { grid-template-columns: repeat(1, 1fr); gap: 18px; }
}

.makito-pc-empty {
	grid-column: 1 / -1;
	text-align: center;
	font-family: var(--makito-body-font);
	color: var(--makito-text);
	padding: 40px 0;
}

/* ---------- Card ---------- */

.makito-pc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--makito-cream);
	border-radius: var(--makito-radius);
	border: var(--mpc-card-bw) solid var(--mpc-card-bc);
	box-shadow: var(--mpc-card-shadow);
	box-sizing: border-box;
	/* overflow is no longer hidden here, so keep grid/flex items from growing to their images' natural size. */
	min-width: 0;
	min-height: 0;
	transition: transform var(--mpc-card-hover-dur) ease, box-shadow var(--mpc-card-hover-dur) ease;
}

/* Hard shadow switched off: no shadow and no hover effect. */
.makito-hs-card-off .makito-pc-card,
.makito-hs-card-off .makito-pc-card:hover {
	box-shadow: none;
	transform: none;
}

/* Hover: thicker shadow + lift (hover-capable pointers only, so touch never sticks). */
@media (hover: hover) {
	.makito-pc-card:hover {
		box-shadow: var(--mpc-card-shadow-hover);
		transform: translate(var(--mpc-card-lift-x), var(--mpc-card-lift-y));
	}

	.makito-hs-card-hoveroff .makito-pc-card:hover {
		box-shadow: var(--mpc-card-shadow);
		transform: none;
	}

	.makito-hs-card-off .makito-pc-card:hover {
		box-shadow: none;
		transform: none;
	}
}

/* Room for the hard shadow so it is not cropped. */
.makito-pc-grid {
	padding: var(--mpc-card-t) var(--mpc-card-r) var(--mpc-card-b) var(--mpc-card-l);
	box-sizing: border-box;
}
.makito-hs-card-off .makito-pc-grid { padding: 0; }

/* ---------- Media / slider ---------- */

.makito-pc-media {
	position: relative;
	/* The card itself must not clip its hard shadow, so the image area clips (matching the card's inner radius). */
	overflow: hidden;
	border-radius: max(0px, calc(var(--makito-radius) - var(--mpc-card-bw))) max(0px, calc(var(--makito-radius) - var(--mpc-card-bw))) 0 0;
}

.makito-pc-media-link {
	display: block;
}

/*
 * Safety fallback: these three rules alone (overflow:hidden + wrapper flex +
 * slide flex-basis:100%) guarantee the slider can never break card layout —
 * even with Swiper's JS/CSS entirely absent, only the first slide is ever
 * visible and the card stays a fixed, consistent height. Swiper's own CSS
 * (loaded as a hard dependency, see makito_pc_register_assets()) layers
 * pagination/nav/transition behavior on top of this when it's available.
 */
.makito-pc-swiper {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}

.makito-pc-swiper .swiper-wrapper {
	display: flex;
}

.makito-pc-swiper .swiper-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.makito-pc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hide slider controls entirely when there is only one image. */
.makito-pc-media > .swiper-pagination,
.makito-pc-media > .swiper-button-prev,
.makito-pc-media > .swiper-button-next {
	display: none !important;
}

/*
 * Slider pagination dots and nav arrows.
 *
 * The Cutie theme styles every [role="button"] as a full-size CTA button
 * (themes/cutie/assets/css/base.css: padding var(--wdtPadding_Btn) = 15px 35px,
 * margin 10px 0 0, primary-colour background, uppercase, button font). Swiper
 * renders its bullets and arrows with role="button", so they inherit all of
 * that and turn into ~70px-wide ovals. Reset everything the theme sets, scoped
 * under .makito-pc-card, before applying our own sizing.
 */
.makito-pc-card .makito-pc-media > .swiper-pagination {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 12px !important;
	top: auto !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 0 !important;
	font-size: 0 !important;
	opacity: 0;
	transition: opacity .2s ease;
}

.makito-pc-card:hover .makito-pc-media > .swiper-pagination {
	opacity: 1;
}

@media (hover: none) {
	.makito-pc-card .makito-pc-media > .swiper-pagination {
		opacity: 1;
	}
}

.makito-pc-card .makito-pc-media > .swiper-pagination .swiper-pagination-bullet {
	box-sizing: border-box !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 8px !important;
	height: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
	text-transform: none !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .7) !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.makito-pc-card .makito-pc-media > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 20px !important;
	background: var(--makito-amber) !important;
}

.makito-pc-card .makito-pc-media > .swiper-button-prev,
.makito-pc-card .makito-pc-media > .swiper-button-next {
	box-sizing: border-box !important;
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	display: block !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	transform: translateY(-50%) !important;
	line-height: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
	text-transform: none !important;
	border-radius: 50% !important;
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	box-shadow: 0 2px 8px rgba(26, 26, 26, .18) !important;
	z-index: 10;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}

.makito-pc-card .makito-pc-media > .swiper-button-prev {
	left: 10px !important;
	right: auto !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231756D4' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") !important;
}

.makito-pc-card .makito-pc-media > .swiper-button-next {
	right: 10px !important;
	left: auto !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231756D4' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") !important;
}

/* Hide Swiper's default icon-font glyph ("prev"/"next" text). */
.makito-pc-card .makito-pc-media > .swiper-button-prev::before,
.makito-pc-card .makito-pc-media > .swiper-button-prev::after,
.makito-pc-card .makito-pc-media > .swiper-button-next::before,
.makito-pc-card .makito-pc-media > .swiper-button-next::after {
	content: none !important;
	display: none !important;
}

.makito-pc-card:hover .makito-pc-media > .swiper-button-prev,
.makito-pc-card:hover .makito-pc-media > .swiper-button-next {
	opacity: 1;
}

/* Always visible on touch devices (no hover to reveal them). */
@media (hover: none) {
	.makito-pc-card .makito-pc-media > .swiper-button-prev,
	.makito-pc-card .makito-pc-media > .swiper-button-next {
		opacity: 1;
	}
}

.makito-pc-card .makito-pc-media > .swiper-button-prev.swiper-button-disabled,
.makito-pc-card .makito-pc-media > .swiper-button-next.swiper-button-disabled {
	/* Dimmed only: pointer-events stay on so a click never falls through to the link. */
	opacity: .4 !important;
	cursor: default;
	pointer-events: auto !important;
}

.makito-pc-badge-sale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--makito-amber);
	color: var(--makito-text);
	font-family: var(--makito-body-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 5px 10px;
	border-radius: 999px;
}

.makito-pc-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: block;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(26, 26, 26, .14);
	overflow: hidden;
	transition: transform .2s ease;
}

/* Hover: scale only, no colour change. */
.makito-pc-wishlist:hover {
	transform: scale(1.08);
}

/*
 * TI WooCommerce Wishlist's [ti_wishlists_addtowishlist] shortcode outputs a
 * wrapper div, an <a role="button"> with a text label span, a <tooltip> and a
 * .tinvwl-tooltip div. The theme paints the <a> as a purple CTA button
 * (base.css `*[role="button"]`), and its layout.css puts a webfont "W" glyph
 * on ::before with !important. We hide every original child/pseudo-element
 * and draw the heart as an inline-SVG background on the <a> itself. TI's JS
 * binds to the <a> (and toggles .tinvwl-product-in-list on it), so AJAX
 * add/remove is untouched.
 */
.makito-pc-card .makito-pc-wishlist .tinv-wraper {
	display: block !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.makito-pc-card .makito-pc-wishlist .tinv-wraper > *:not(a.tinvwl_add_to_wishlist_button) {
	display: none !important;
}

.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button {
	box-sizing: border-box !important;
	position: relative !important;
	display: block !important;
	float: none !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	transform: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
	text-transform: none !important;
	overflow: hidden;
	cursor: pointer;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px 18px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231756D4' d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.11-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E") !important;
	transition: opacity .2s ease;
}

.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button > * {
	display: none !important;
}

.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before,
.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-icon-heart::after,
.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button::before,
.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button::after {
	content: none !important;
	display: none !important;
}

/* Filled heart when the product is already in the wishlist. */
.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231756D4' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
}

.makito-pc-card .makito-pc-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-loading {
	opacity: .5;
}

/* ---------- Body ---------- */

.makito-pc-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
	text-align: center;
}

.makito-pc-category {
	font-family: var(--makito-body-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--makito-blue);
	text-decoration: none;
	margin-bottom: 6px;
}

.makito-pc-category:hover {
	text-decoration: underline;
}

.makito-pc-title {
	font-family: var(--makito-heading-font);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}

.makito-pc-title a {
	color: var(--makito-text);
	text-decoration: none;
}

.makito-pc-title a:hover {
	color: var(--makito-blue);
}

.makito-pc-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.makito-pc-tag {
	font-family: var(--makito-body-font);
	font-size: 11px;
	font-weight: 500;
	color: var(--makito-blue);
	background: rgba(23, 86, 212, 0.08);
	border: 1px solid rgba(23, 86, 212, 0.15);
	border-radius: 999px;
	padding: 3px 10px;
}

/*
 * margin-top:auto is what makes card spacing consistent whether or not a
 * card has a meta-chips row: category/title/(chips) stack tightly at the
 * top with their own small margins, then price absorbs all remaining
 * vertical space and sits pushed down just above the button — instead of a
 * big, inconsistent empty gap appearing wherever the chips row happens to be
 * missing.
 */
.makito-pc-price {
	font-family: var(--makito-body-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--makito-blue);
	margin: auto 0 14px;
}

.makito-pc-price del {
	color: rgba(26, 26, 26, 0.45);
	font-weight: 400;
	margin-right: 6px;
}

.makito-pc-price ins {
	text-decoration: none;
}

.makito-pc-cta {
	margin-top: 0;
}

/*
 * Specificity note: this link also carries WooCommerce's own "button" and
 * "add_to_cart_button" classes (needed for AJAX add-to-cart and theme mini-cart
 * compatibility). The theme's base.css styles a.button / .button with an
 * element+class selector (0,0,1,1), which beats a single class selector — so
 * every rule here is written as ".makito-pc-cta a.makito-pc-add-to-cart"
 * (0,0,2,1) to reliably win without needing !important.
 */
.makito-pc-cta a.makito-pc-add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	font-family: var(--makito-body-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--mpc-btn-text);
	background: var(--mpc-btn-bg);
	border: var(--mpc-btn-bw) solid var(--mpc-btn-bc);
	box-shadow: var(--mpc-btn-shadow);
	box-sizing: border-box;
	border-radius: 999px;
	padding: 12px 18px;
	text-decoration: none;
	cursor: pointer;
}

.makito-pc-cta a.makito-pc-add-to-cart:before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h-2l-1 2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.95-2h-3.7zm14 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-11 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h-2l-1 2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.95-2h-3.7zm14 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-11 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
}

/*
 * No hover/focus/active/added colour change, by design — background stays
 * amber and text stays the base text colour in every state. This also
 * neutralizes any theme hover rule (background/colour/border/shadow/
 * transform) that would otherwise apply to the .button / a.button classes
 * this link also carries for WooCommerce compatibility.
 */
.makito-pc-cta a.makito-pc-add-to-cart:hover,
.makito-pc-cta a.makito-pc-add-to-cart:focus,
.makito-pc-cta a.makito-pc-add-to-cart:active,
.makito-pc-cta a.makito-pc-add-to-cart.added {
	background: var(--mpc-btn-bg) !important;
	color: var(--mpc-btn-text) !important;
	border: var(--mpc-btn-bw) solid var(--mpc-btn-bc) !important;
	box-shadow: var(--mpc-btn-shadow) !important;
	transform: none !important;
}

.makito-hs-btn-off .makito-pc-cta a.makito-pc-add-to-cart,
.makito-hs-btn-off .makito-pc-cta a.makito-pc-add-to-cart:hover,
.makito-hs-btn-off .makito-pc-cta a.makito-pc-add-to-cart:focus,
.makito-hs-btn-off .makito-pc-cta a.makito-pc-add-to-cart:active,
.makito-hs-btn-off .makito-pc-cta a.makito-pc-add-to-cart.added {
	box-shadow: none !important;
}

.makito-hs-btn-press .makito-pc-cta a.makito-pc-add-to-cart:hover {
	transform: translate(2px, 2px) !important;
	box-shadow: 2px 2px 0 0 var(--mpc-btn-color) !important;
}
.makito-hs-btn-off.makito-hs-btn-press .makito-pc-cta a.makito-pc-add-to-cart:hover { box-shadow: none !important; }

/* Keep a visible, neutral focus outline for keyboard users. */
.makito-pc-cta a.makito-pc-add-to-cart:focus-visible {
	outline: 2px solid var(--makito-text);
	outline-offset: 2px;
}

.makito-pc-cta a.makito-pc-add-to-cart.added:after {
	content: "\2713";
}

.makito-pc-cta a.makito-pc-add-to-cart.loading {
	opacity: .6;
	pointer-events: none;
}

/*
 * The theme's own jQuery (cutie/modules/woocommerce/assets/js/common.js:75)
 * unconditionally inserts <tooltip class="tooltip">Cart</tooltip> after every
 * .add_to_cart_button on the page, including ours. Keep it hidden here, the
 * same way it's kept hidden for the existing card via Customizer Additional
 * CSS — this rule lives in the component's own stylesheet so the card is
 * self-contained and the fix travels with it wherever it's used.
 */
.makito-pc-cta .tooltip {
	display: none;
}

/* ---------- See More ---------- */

.makito-pc-seemore-wrap {
	text-align: center;
	margin-top: 40px;
}

.makito-pc-wrap a.makito-pc-seemore,
.makito-pc-wrap a.makito-pc-seemore:hover,
.makito-pc-wrap a.makito-pc-seemore:focus,
.makito-pc-wrap a.makito-pc-seemore:active {
	display: inline-block;
	box-sizing: border-box;
	font-family: var(--makito-body-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--mpc-more-text);
	background: var(--mpc-more-bg);
	border: var(--mpc-more-bw) solid var(--mpc-more-bc);
	border-radius: 999px;
	box-shadow: var(--mpc-more-shadow);
	padding: 14px 36px;
	text-decoration: none;
	transform: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.makito-hs-more-off .makito-pc-wrap a.makito-pc-seemore,
.makito-hs-more-off .makito-pc-wrap a.makito-pc-seemore:hover {
	box-shadow: none;
}

.makito-hs-more-press .makito-pc-wrap a.makito-pc-seemore:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--mpc-more-color);
}
.makito-hs-more-off.makito-hs-more-press .makito-pc-wrap a.makito-pc-seemore:hover { box-shadow: none; }

/* Room for the button's hard shadow. */
.makito-pc-seemore-wrap {
	padding: 0 max(var(--mpc-more-x), calc(-1 * var(--mpc-more-x))) max(0px, var(--mpc-more-y)) max(var(--mpc-more-x), calc(-1 * var(--mpc-more-x)));
}

/* ---------- Product Carousel (outer Swiper: .makito-pc-carousel) ---------- */

/*
 * Everything here is scoped to .makito-pc-carousel-wrap and uses its own
 * class names (.makito-pc-carousel-prev/-next/-dots/-bullet), so it can't
 * clash with the per-card image slider (.makito-pc-swiper, .swiper-button-*,
 * .swiper-pagination-bullet) styled above. Child combinators keep the outer
 * rules from reaching the inner sliders' .swiper-wrapper / .swiper-slide.
 */
.makito-pc-carousel-wrap {
	/* Own variable names (--mpc-ar-*): saved Elementor CSS from the old amber arrows can't override them. */
	--mpc-ar-size: 36px;
	--mpc-ar-icon: 18px;
	--mpc-ar-offset: 12px;
	--mpc-ar-bg: #FFFFFF;
	--mpc-ar-icon-color: #1756D4;
	/*
	 * Vertical position (arrow centre, measured from the top of the stage).
	 * The stage = cards + the carousel's bottom padding (dots sit outside it), so
	 * "center of cards" is 50% minus half that padding. --mpc-ar-y is replaced by
	 * the Elementor "Vertical position" select; --mpc-ar-img-y is set by JS.
	 */
	--mpc-ar-img-y: calc(50% - var(--mpc-car-b) / 2);
	--mpc-ar-y: calc(50% - var(--mpc-car-b) / 2);
	--mpc-ar-y-offset: 0px;
	/* Inside: offset from the card edge, over the image. Outside: in the margin beside the cards. */
	/* Never closer than 12px to the card edge, so the arrow never touches its border/shadow. */
	--mpc-arrow-gap: max(12px, var(--mpc-ar-offset));
	--mpc-arrow-pl: var(--mpc-arrow-gap);
	--mpc-arrow-pr: var(--mpc-arrow-gap);
	--mpc-dot-size: 10px;
	--mpc-dot-gap: 8px;
	--mpc-dot-color: rgba(23, 86, 212, .25);
	--mpc-dot-active: #FFBF00;
}

.makito-pc-carousel-stage {
	position: relative;
	/* Contains the carousel's negative top margin, so the stage's top edge is the cards' top edge (arrow positions are measured from it). */
	display: flow-root;
}

.makito-pc-carousel-wrap.makito-pc-arrows-outside .makito-pc-carousel-stage {
	padding-left: calc(var(--mpc-ar-size) + var(--mpc-arrow-gap));
	padding-right: calc(var(--mpc-ar-size) + var(--mpc-arrow-gap));
}

/*
 * Room for card shadows (Swiper clips with overflow:hidden): shadow offset +
 * border width + 4px on every side, never less than 16px. A matching
 * negative margin (top/left/right) keeps the cards aligned with the widget
 * edges; the bottom padding stays so the dots clear the shadow. The Style tab
 * "Carousel Padding" can only enlarge these (--mpc-pad-*).
 */
.makito-pc-carousel-wrap {
	--mpc-car-t: max(16px, var(--mpc-pad-t, 0px), calc(var(--mpc-card-t) + var(--mpc-card-bw) + 4px));
	--mpc-car-r: max(16px, var(--mpc-pad-r, 0px), calc(var(--mpc-card-r) + var(--mpc-card-bw) + 4px));
	--mpc-car-b: max(16px, var(--mpc-pad-b, 0px), calc(var(--mpc-card-b) + var(--mpc-card-bw) + 4px));
	--mpc-car-l: max(16px, var(--mpc-pad-l, 0px), calc(var(--mpc-card-l) + var(--mpc-card-bw) + 4px));
}

.makito-pc-carousel-wrap .makito-pc-carousel {
	padding: var(--mpc-car-t) var(--mpc-car-r) var(--mpc-car-b) var(--mpc-car-l);
	margin: calc(-1 * var(--mpc-car-t)) calc(-1 * var(--mpc-car-r)) 0 calc(-1 * var(--mpc-car-l));
	box-sizing: border-box;
	/* Hide neighbouring slides in the side padding; keep the right-hand shadow. */
	clip-path: inset(0 max(0px, calc(var(--mpc-car-r) - var(--mpc-card-r) - 2px)) 0 max(0px, calc(var(--mpc-car-l) - var(--mpc-card-l))));
}

/* Equal-height cards: slides stretch, the card fills the slide. Slides and wrapper never clip (the card's hard shadow lives outside the slide box). */
.makito-pc-carousel-wrap .makito-pc-carousel > .swiper-wrapper,
.makito-pc-carousel-wrap .makito-pc-carousel > .swiper-wrapper > .swiper-slide {
	overflow: visible !important;
}

.makito-pc-carousel > .swiper-wrapper > .swiper-slide {
	height: auto;
	display: flex;
}

.makito-pc-carousel > .swiper-wrapper > .swiper-slide > .makito-pc-card {
	width: 100%;
	height: auto;
	align-self: stretch;
}

/* Pin the add-to-cart button to the bottom whether or not a price shows. */
.makito-pc-carousel-wrap .makito-pc-cta {
	margin-top: auto;
}

.makito-pc-carousel-wrap .makito-pc-price + .makito-pc-cta {
	margin-top: 0;
}

/* Outer arrows: reset the theme's [role="button"]/button CTA styling. */
.makito-pc-carousel-wrap .makito-pc-carousel-arrow {
	box-sizing: border-box !important;
	position: absolute !important;
	top: calc(var(--mpc-ar-y) + var(--mpc-ar-y-offset)) !important;
	z-index: 10;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: var(--mpc-ar-size) !important;
	height: var(--mpc-ar-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--mpc-ar-bg) !important;
	color: var(--mpc-ar-icon-color) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
	line-height: 0 !important;
	font-size: 0 !important;
	text-transform: none !important;
	transform: translateY(-50%) !important;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.makito-pc-carousel-wrap .makito-pc-carousel-arrow:hover,
.makito-pc-carousel-wrap .makito-pc-carousel-arrow:focus-visible {
	background: var(--mpc-ar-bg) !important;
	color: var(--mpc-ar-icon-color) !important;
	border: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.makito-pc-carousel-wrap .makito-pc-carousel-arrow::before {
	content: "";
	display: block;
	width: var(--mpc-ar-icon);
	height: var(--mpc-ar-icon);
	background-color: currentColor;
	-webkit-mask: var(--mpc-chevron) no-repeat center / contain;
	mask: var(--mpc-chevron) no-repeat center / contain;
}

.makito-pc-carousel-wrap .makito-pc-carousel-prev {
	--mpc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
	left: var(--mpc-arrow-pl) !important;
	right: auto !important;
}

.makito-pc-carousel-wrap .makito-pc-carousel-next {
	--mpc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
	right: var(--mpc-arrow-pr) !important;
	left: auto !important;
}

/* RTL: previous is on the right, icons mirrored. */
.makito-pc-carousel-wrap.makito-pc-rtl .makito-pc-carousel-prev {
	right: var(--mpc-arrow-pr) !important;
	left: auto !important;
}

.makito-pc-carousel-wrap.makito-pc-rtl .makito-pc-carousel-next {
	left: var(--mpc-arrow-pl) !important;
	right: auto !important;
}

.makito-pc-carousel-wrap.makito-pc-rtl .makito-pc-carousel-arrow::before {
	transform: scaleX(-1);
}

.makito-pc-carousel-wrap .makito-pc-carousel-arrow.is-disabled {
	opacity: .4;
	cursor: default;
	pointer-events: none;
}

.makito-pc-carousel-wrap .makito-pc-carousel-arrow.is-locked,
.makito-pc-carousel-wrap .makito-pc-carousel-dots.is-locked {
	display: none !important;
}

/* Outer dots. */
.makito-pc-carousel-wrap .makito-pc-carousel-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mpc-dot-gap);
	/* At least 16px below the cards (beyond the shadow room in the carousel's bottom padding). */
	margin: max(16px, var(--mpc-dot-offset, 16px)) 0 0 !important;
	padding: 0;
	line-height: 0;
}

.makito-pc-carousel-wrap .makito-pc-carousel-dots .makito-pc-carousel-bullet {
	box-sizing: border-box !important;
	display: block !important;
	flex: 0 0 auto;
	width: var(--mpc-dot-size) !important;
	height: var(--mpc-dot-size) !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--mpc-dot-color) !important;
	box-shadow: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.makito-pc-carousel-wrap .makito-pc-carousel-dots .makito-pc-carousel-bullet.is-active {
	width: calc(var(--mpc-dot-size) * 2.4) !important;
	background: var(--mpc-dot-active) !important;
}

/* Outside: arrow hugs the stage edge; the stage padding leaves `gap` clear of the card edge. */
.makito-pc-carousel-wrap.makito-pc-arrows-outside {
	--mpc-arrow-pl: 0px;
	--mpc-arrow-pr: 0px;
}

/* Arrows never sit outside on small screens (no room): overlay instead. */
@media (max-width: 767px) {
	.makito-pc-carousel-wrap.makito-pc-arrows-outside .makito-pc-carousel-stage {
		padding-left: 0;
		padding-right: 0;
	}

	.makito-pc-carousel-wrap.makito-pc-arrows-outside {
		--mpc-arrow-pl: var(--mpc-arrow-gap);
		--mpc-arrow-pr: var(--mpc-arrow-gap);
	}
}

.makito-pc-shipnote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 8px;
	font-family: var(--makito-body-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--makito-blue);
	opacity: .8;
}
.makito-pc-shipnote svg { flex: 0 0 auto; }
span.makito-pc-category.makito-pc-label { cursor: default; }


/* ---------- Add To Cart options / Demo Mode ---------- */

.makito-pc-wrap.makito-pc-tt-uppercase .makito-pc-cta a.makito-pc-add-to-cart { text-transform: uppercase; }
.makito-pc-wrap.makito-pc-tt-capitalize .makito-pc-cta a.makito-pc-add-to-cart { text-transform: capitalize; }
.makito-pc-wrap.makito-pc-tt-none .makito-pc-cta a.makito-pc-add-to-cart { text-transform: none; }

.makito-pc-wrap.makito-pc-noicon .makito-pc-cta a.makito-pc-add-to-cart:before { display: none; }
.makito-pc-wrap.makito-pc-icon-right .makito-pc-cta a.makito-pc-add-to-cart { flex-direction: row-reverse; }

/* The label says "Added"; no tick and never a "View cart" link. */
.makito-pc-cta a.makito-pc-add-to-cart.added:after { content: none; }
.makito-pc-cta .added_to_cart,
.makito-pc-cta .wc-forward { display: none !important; }

.makito-pc-cta a.makito-pc-add-to-cart.makito-pc-atc-disabled {
	opacity: .55;
	cursor: not-allowed;
}
.makito-pc-demo .makito-pc-cta a.makito-pc-add-to-cart.makito-pc-atc-disabled { cursor: default; }

/* Disable Add To Cart: identical look, inert. */
.makito-pc-cta a.makito-pc-add-to-cart.makito-pc-atc-off { cursor: default; }

/* Demo Mode: links are inert (cursor only; JS also prevents navigation). */
.makito-pc-demo a:not(.makito-pc-add-to-cart),
.makito-pc-demo .makito-pc-wishlist,
.makito-pc-demo .makito-pc-wishlist a {
	cursor: default;
}