.wvc-cards {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 12px;
	margin: 12px 0 20px;
	width: 100% !important;
}

@media (max-width: 480px) {
	.wvc-cards {
		flex-wrap: wrap !important;
	}
}

@media (max-width: 900px) {
	.wvc-card .wvc-body {
		padding: 14px 8px;
	}
	.wvc-card .wvc-label {
		font-size: 13px;
	}
	.wvc-card .wvc-save {
		font-size: 11px;
	}
	.wvc-card .wvc-badge {
		font-size: 10px;
		padding: 7px 6px;
	}
	.wvc-card .wvc-badge-inline {
		font-size: 10px;
	}
	.wvc-cards {
		gap: 8px;
	}
}

/* Standalone shortcode wrapper ([wvc_add_to_cart]) - this is deliberately NOT
   nested inside the theme's own widget markup, so none of its layout CSS can
   reach in here in the first place. */
.wvc-standalone-cart {
	width: 100%;
}
.wvc-standalone-cart form.variations_form.cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}
.wvc-standalone-cart form.variations_form.cart > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
}

/* Something (a theme widget's own card styling, or Elementor's Shortcode widget
   default box) tends to wrap this in a white panel with rounded corners/shadow.
   Strip that off from whichever element is actually doing it, one or two levels
   up, without needing to know its exact class name. */
*:has(> .wvc-standalone-cart),
*:has(> * > .wvc-standalone-cart),
*:not(.pc-modal-body):not(.pc-modal-panel):has(> form.variations_form.cart),
*:not(.pc-modal-body):not(.pc-modal-panel):has(> * > form.variations_form.cart) {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.elementor-widget-shortcode:has(.wvc-standalone-cart) .elementor-widget-container {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

/* The theme lays the whole variations form out as a flex ROW (it was originally
   just a small dropdown + button sitting side by side). Force it into a vertical
   stack instead, with every direct child (the variations table/cards, the hidden
   quantity+button row, our Buy Now button) taking the full width on its own line. */
form.variations_form.cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
}
form.variations_form.cart > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
}

/* Full reset so the theme's global button/link/box styles can't leak in - these
   are plain divs, not <button>, specifically to dodge that conflict. */
.wvc-card {
	all: unset;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;
	flex: 1 1 0 !important;
	min-width: 0;
	width: auto !important;
	background: #fff;
	border: 1px solid #e3ddd0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.wvc-card:hover {
	border-color: var(--wvc-accent, #1e3d24);
}

/* "Colored badge strip" layout (white body) and "Plain" layout (transparent
   body) share the same colored badge header. */
.wvc-card[data-layout="strip"] .wvc-badge,
.wvc-card[data-layout="plain"] .wvc-badge {
	display: block !important;
	padding: 9px 8px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--wvc-accent, #efe9dc);
	color: #fff;
}

/* "Plain" layout: same colored badge header as above, but a transparent body
   instead of white. */
.wvc-card[data-layout="plain"] {
	background: transparent !important;
}

/* Plain/solid layouts: badge text is its own line, same as label/save below. */
.wvc-card .wvc-badge-inline {
	display: block !important;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Solid fill + badge: an intentional divider line between the badge and the
   number below it. */
.wvc-card .wvc-badge-divider {
	display: block !important;
	padding: 9px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.wvc-card .wvc-body {
	display: block !important;
	padding: 18px 10px;
}

.wvc-card .wvc-label {
	display: block !important;
	font-size: 15px;
	font-weight: 400;
	color: #232323;
}

.wvc-card .wvc-save {
	display: block !important;
	font-size: 13px;
	font-weight: 400;
	color: var(--wvc-accent, #1e3d24);
}

/* "Solid color fill" layout: whole card is one continuous colored block, no border
   at all (a border in the same color served no purpose and could show as a seam
   at the corners on some browsers/zoom levels). */
.wvc-card[data-layout="solid"] {
	border: none;
	background: var(--wvc-accent, #fff);
}
.wvc-card[data-layout="solid"] .wvc-label,
.wvc-card[data-layout="solid"] .wvc-save,
.wvc-card[data-layout="solid"] .wvc-badge-inline {
	color: #fff;
}

/* Selection ring, in the card's own accent color when it has one */
.wvc-card.wvc-selected {
	box-shadow: 0 0 0 2px var(--wvc-accent, #1e3d24);
}

.wvc-card:focus-visible {
	outline: 2px solid var(--wvc-accent, #1e3d24);
	outline-offset: 2px;
}

/* Hide the original select visually but keep it in the DOM/functional for WooCommerce JS */
.wvc-original-select {
	display: none !important;
}

/* Custom full-width Buy Now button */
.wvc-buynow-wrap {
	margin-top: 14px;
	width: 100% !important;
	display: block !important;
}

.wvc-buynow-btn {
	all: unset;
	box-sizing: border-box;
	display: block !important;
	width: 100% !important;
	text-align: center;
	cursor: pointer;
	background: var(--wvc-button-color, #1e3d24);
	color: #fff;
	border-radius: 999px;
	padding: 16px 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 15px;
	font-family: inherit;
	transition: filter .15s ease;
}

.wvc-buynow-btn:hover {
	filter: brightness(1.08);
}

.wvc-buynow-btn:focus-visible {
	outline: 2px solid var(--wvc-button-color, #1e3d24);
	outline-offset: 3px;
}

/* "New" badge, shown next to the price widget when a product is ticked as new */
.wvc-new-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--wvc-new-color, #1e3d24);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	vertical-align: middle;
	line-height: 1.4;
}

/* Flavour/option pill selector - used for the non-pricing attribute(s) on
   products with more than one attribute (e.g. Flavour + Pack Size). Uses its
   own dedicated classes (not shared with the pricing cards) so it's easy to
   restyle independently. Selected fill comes from the site-wide/per-product
   flavour color. */
.wvc-flavour-cards .wvc-card {
	border-radius: 5px;
}
.wvc-flavour-body {
	display: block;
	padding: 5px 0px;
}
.wvc-flavour-label {
	display: block;
	font-size: 15px;
	font-weight: 400;
	color: #232323;
}
.wvc-flavour-cards .wvc-card.wvc-selected {
	background: var(--wvc-flavour-color, #241F20) !important;
	border-color: var(--wvc-flavour-color, #241F20) !important;
	box-shadow: none;
}
.wvc-flavour-cards .wvc-card.wvc-selected .wvc-flavour-label {
	color: #fff;
}

/* Show the attribute label above a flavour-style pill row, even when the
   global "hide attribute label" setting is on (that setting is meant for the
   pricing row, e.g. Pack Size, not a flavour picker). */
.variations_form table.variations tr:has(.wvc-flavour-cards) th.label {
	display: table-cell !important;
}

/* When a [wvc_flavour] placeholder is used elsewhere on the page, only the
   visual cards move there - the original row (holding the real, still-functional
   <select>) stays inside the form but hidden, so it doesn't leave empty space. */
.wvc-row-relocated {
	display: none !important;
}
.wvc-flavour-slot {
	width: 100%;
}
.wvc-flavour-relocated-label {
	font-size: 13px;
	color: #6b5f4f;
	margin-bottom: 8px;
}