/* =============================================================================
   CARLO RINO CORE COMPONENTS — Products (Figma design implementation)
   Figma node: 467:4123 (CardProduct)
   All rules use !important for Figma fidelity.
   Relies on CSS variables from shop.css (:root section).
   ============================================================================= */

/* ── SVG ICON REFERENCE ──────────────────────────────────────────────────
   The following SVG files from assets/svg/ map to these CSS selectors:

   Wishlist inactive → Button=Wishlist, State=Inactive.svg
     - Used by: .cr-product-card__wishlist (default state)
     - Heart outline, stroke="#333", fill="none"

   Wishlist active → Button=Wishlist, State=Active.svg
     - Used by: .cr-product-card__wishlist.is-active
     - Filled heart, fill="#E81F76", stroke="#E81F76"

   Compare → Property 1=compare.svg
     - Used by: .cr-product-card__compare
     - Two side-by-side rectangles

   Cart → Property 1=cart.svg
     - Used by: .cr-product-card__cart
     - Shopping bag icon

   Icons are loaded from assets/svg/ via carlo_rino_get_inline_svg() in content-product.php.
   ──────────────────────────────────────────────────────────────────────── */

/* ── 1. SINGLE PRODUCT PAGE ───────────────────────────────────────────── */

/* ── 1a. Page Layout ────────────────────────────────────────────────── */

/* Full-width product page — override Astra sidebar */
.single-product .content-area {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

.single-product .ast-woocommerce-container {
	max-width: 100% !important;
	padding: 0 !important;
}

.single-product div.product {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	max-width: 90rem !important;
	margin: 0 auto !important;
	padding: 2.5rem 3.75rem 5rem !important;
}

/* ── 1b. Product Gallery (Figma: product image area) ──────────────── */

.single-product .woocommerce-product-gallery {
	width: 55% !important;
	max-width: 55% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 2.5rem 0 0 !important;
	position: relative !important;
}

/* Main gallery image container */
.single-product .woocommerce-product-gallery__image {
	position: relative !important;
	border-radius: 0.125rem !important;
	overflow: hidden !important;
	background: #faf8f6 !important;
}

.single-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
	display: block !important;
}

/* Flexslider overrides */
.single-product .flex-viewport {
	border: none !important;
	border-radius: 0.125rem !important;
	background: #faf8f6 !important;
	margin-bottom: 0.5rem !important;
}

/* Thumbnail navigation */
.single-product .flex-control-thumbs {
	display: flex !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.single-product .flex-control-thumbs li {
	width: 5rem !important;
	height: 5rem !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0.125rem !important;
	overflow: hidden !important;
	background: #faf8f6 !important;
	cursor: pointer !important;
	border: 0.062rem solid transparent !important;
	transition: border-color 0.2s !important;
}

.single-product .flex-control-thumbs li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	opacity: 0.5 !important;
	transition: opacity 0.2s !important;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li:hover img {
	opacity: 1 !important;
}

.single-product .flex-control-thumbs li.flex-active {
	border-color: var(--cr-black, #333) !important;
}

/* Gallery action buttons (wishlist, compare, share overlay) */
.single-product .cr-gallery-actions {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	z-index: 10 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
}

.single-product .cr-gallery-actions button,
.single-product .cr-gallery-actions .cr-gallery-action-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	padding: 0.5rem !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(0.312rem) !important;
	-webkit-backdrop-filter: blur(0.312rem) !important;
	cursor: pointer !important;
	color: var(--cr-black, #333) !important;
	transition: background 0.2s, color 0.2s !important;
	box-shadow: none !important;
}

.single-product .cr-gallery-actions button:hover {
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
}

.single-product .cr-gallery-actions button svg,
.single-product .cr-gallery-actions .cr-gallery-action-btn svg {
	width: 1.25rem !important;
	height: 1.25rem !important;
}

/* Wishlist on single product — active state = Button=Wishlist, State=Active.svg */
.single-product .cr-gallery-actions .is-wishlisted svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* Gallery zoom button */
.single-product .woocommerce-product-gallery__trigger {
	position: absolute !important;
	top: 1rem !important;
	left: 1rem !important;
	z-index: 10 !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(0.312rem) !important;
	-webkit-backdrop-filter: blur(0.312rem) !important;
	overflow: hidden !important;
	text-indent: -624.938rem !important;
	box-shadow: none !important;
}

.single-product .woocommerce-product-gallery__trigger::before {
	content: '' !important;
	position: absolute !important;
	inset: 0.5rem !important;
	background: currentColor !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.3999 12.0292C14.3999 13.3189 13.3254 14.3645 11.9999 14.3645C10.6744 14.3645 9.5999 13.3189 9.5999 12.0292C9.5999 10.7394 10.6744 9.6938 11.9999 9.6938C13.3254 9.6938 14.3999 10.7394 14.3999 12.0292Z' stroke='%23333' stroke-width='1.2'/%3E%3C/svg%3E") !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.3999 12.0292C14.3999 13.3189 13.3254 14.3645 11.9999 14.3645C10.6744 14.3645 9.5999 13.3189 9.5999 12.0292C9.5999 10.7394 10.6744 9.6938 11.9999 9.6938C13.3254 9.6938 14.3999 10.7394 14.3999 12.0292Z' stroke='%23333' stroke-width='1.2'/%3E%3C/svg%3E") !important;
	mask-size: contain !important;
	-webkit-mask-size: contain !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-position: center !important;
	-webkit-mask-position: center !important;
}

.single-product .woocommerce-product-gallery__trigger img {
	display: none !important;
}

.single-product .woocommerce-product-gallery__trigger .woocommerce-product-gallery__trigger-icon {
	display: none !important;
}

/* ── 1c. Product Summary (Entry Summary) ──────────────────────────── */

.single-product .entry-summary {
	width: 45% !important;
	max-width: 45% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Breadcrumb */
.single-product .woocommerce-breadcrumb {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	line-height: 1.34 !important;
	color: var(--cr-grey, #888) !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--cr-grey, #888) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

.single-product .woocommerce-breadcrumb a:hover {
	color: var(--cr-pink, #e81f76) !important;
}

/* Product Title - matching Figma heading style */
.single-product .product_title {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 2.5rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
}

/* Rating */
.single-product .woocommerce-product-rating {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 0 1.25rem !important;
}

.single-product .star-rating {
	overflow: hidden !important;
	position: relative !important;
	height: 1rem !important;
	line-height: 1rem !important;
	width: 5rem !important;
	font-size: 0.75rem !important;
	font-family: "star" !important;
	color: var(--cr-pink, #e81f76) !important;
}

.single-product .star-rating::before {
	color: var(--cr-border, #e7e7e7) !important;
}

.single-product .star-rating span::before {
	color: var(--cr-pink, #e81f76) !important;
}

.single-product .woocommerce-review-link {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	color: var(--cr-grey, #888) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

.single-product .woocommerce-review-link:hover {
	color: var(--cr-pink, #e81f76) !important;
}

/* Price */
.single-product div.product p.price,
.single-product div.product span.price {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	line-height: 1.34 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
}

.single-product div.product p.price del,
.single-product div.product span.price del {
	color: var(--cr-grey, #888) !important;
	text-decoration: line-through !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
}

.single-product div.product p.price ins,
.single-product div.product span.price ins {
	text-decoration: none !important;
	font-weight: 500 !important;
}

/* Short Description / Excerpt */
.single-product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-product-details__short-description {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
}

.single-product .woocommerce-product-details__short-description p {
	margin: 0 0 0.5rem !important;
}

/* ── 1d. Add to Cart / Variation / Quantity ────────────────────────── */

/* Divider */
.single-product .cr-product-divider {
	width: 100% !important;
	height: 0.062rem !important;
	background: var(--cr-border, #e7e7e7) !important;
	margin: 1.5rem 0 !important;
}

/* Add to cart form */
.single-product div.product form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 1rem !important;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	border: none !important;
}

/* Quantity */
.single-product div.product .quantity {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	overflow: hidden !important;
}

.single-product div.product .quantity .qty {
	width: 3rem !important;
	height: 3rem !important;
	padding: 0 !important;
	text-align: center !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: var(--cr-black, #333) !important;
	border: none !important;
	background: #fff !important;
	-moz-appearance: textfield !important;
}

.single-product div.product .quantity .qty::-webkit-inner-spin-button,
.single-product div.product .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.single-product div.product .quantity .cr-qty-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.5rem !important;
	height: 3rem !important;
	border: none !important;
	background: none !important;
	cursor: pointer !important;
	font-size: 1.25rem !important;
	color: var(--cr-black, #333) !important;
	transition: background 0.2s !important;
	box-shadow: none !important;
}

.single-product div.product .quantity .cr-qty-btn:hover {
	background: var(--cr-cream, #faf8f6) !important;
}

/* Single Add to Cart Button */
.single-product .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	min-height: 3rem !important;
	padding: 0.75rem 2rem !important;
	border: none !important;
	border-radius: 0.125rem !important;
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.52 !important;
	cursor: pointer !important;
	transition: opacity 0.2s !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.single-product .single_add_to_cart_button:hover {
	opacity: 0.9 !important;
	color: #fff !important;
	background: var(--cr-pink, #e81f76) !important;
}

/* Wishlist & Compare buttons inline */
.single-product .cr-product-actions {
	display: flex !important;
	gap: 0.5rem !important;
	margin: 1rem 0 1.5rem !important;
}

.single-product .cr-product-actions button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.625rem 1.25rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	background: #fff !important;
	color: var(--cr-black, #333) !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	box-shadow: none !important;
}

.single-product .cr-product-actions button:hover {
	border-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-pink, #e81f76) !important;
}

.single-product .cr-product-actions button.is-active {
	border-color: var(--cr-pink, #e81f76) !important;
	background: #fef1f8 !important;
	color: var(--cr-pink, #e81f76) !important;
}

.single-product .cr-product-actions button.is-active svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.single-product .cr-product-actions button.is-active svg rect {
	stroke: currentColor !important;
}

.single-product .cr-product-actions button svg {
	width: 1.25rem !important;
	height: 1.25rem !important;
	flex-shrink: 0 !important;
}

/* Compare icon on single product — matches Property 1=compare.svg */
.single-product .cr-compare-btn svg rect {
	fill: none !important;
	stroke: currentColor !important;
}

/* Cart icon on single product — matches Property 1=cart.svg */
.single-product .cr-cart-btn svg path {
	fill: none !important;
	stroke: currentColor !important;
}

/* ── 1e. Variations (variable products) ────────────────────────────── */

.single-product form.cart .variations {
	margin: 0 0 1.25rem !important;
	width: 100% !important;
}

.single-product form.cart .variations tr {
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 1rem !important;
}

.single-product form.cart .variations td {
	display: block !important;
	padding: 0 !important;
	border: none !important;
}

.single-product form.cart .variations td.label {
	padding: 0 0 0.5rem !important;
}

.single-product form.cart .variations td.label label {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--cr-black, #333) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.037rem !important;
}

.single-product form.cart .variations select {
	width: 100% !important;
	max-width: 20rem !important;
	height: 3rem !important;
	padding: 0 2.5rem 0 1rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	background: #fff !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: var(--cr-black, #333) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 1rem !important;
	cursor: pointer !important;
}

.single-product form.cart .variations .reset_variations {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.75rem !important;
	color: var(--cr-grey, #888) !important;
	text-decoration: underline !important;
	margin-top: 0.25rem !important;
	display: inline-block !important;
}

/* Color swatches on single product (variation swatches area) */
.single-product .cr-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	margin: 0 0 1rem !important;
}

.single-product .cr-swatch {
	display: block !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	border: 0.125rem solid transparent !important;
	cursor: pointer !important;
	transition: border-color 0.2s !important;
	background-size: cover !important;
	background-position: center !important;
	box-sizing: border-box !important;
}

.single-product .cr-swatch.is-selected,
.single-product .cr-swatch:hover {
	border-color: var(--cr-black, #333) !important;
}

/* Variation price */
.single-product .woocommerce-variation-price {
	margin: 1rem 0 !important;
}

.single-product .woocommerce-variation-availability {
	margin: 0.5rem 0 !important;
}

.single-product .woocommerce-variation-availability .in-stock {
	color: #4caf50 !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
}

/* ── 1f. Product Meta ──────────────────────────────────────────────── */

.single-product div.product .product_meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	margin: 1.5rem 0 0 !important;
	padding: 1.5rem 0 0 !important;
	border-top: 0.062rem solid var(--cr-border, #e7e7e7) !important;
}

.single-product div.product .product_meta > span {
	display: block !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	color: var(--cr-black, #333) !important;
}

.single-product div.product .product_meta > span a {
	color: var(--cr-grey, #888) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

.single-product div.product .product_meta > span a:hover {
	color: var(--cr-pink, #e81f76) !important;
}

.single-product div.product .product_meta > span span.sku {
	color: var(--cr-grey, #888) !important;
}

.single-product .posted_in::before,
.single-product .tagged_as::before {
	display: none !important;
}

/* ── 1g. Product Tabs (Figma: clean tab style) ────────────────────── */

.single-product .woocommerce-tabs {
	width: 100% !important;
	margin: 3.75rem 0 0 !important;
	padding: 0 !important;
	clear: both !important;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-bottom: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	overflow: visible !important;
}

.single-product .woocommerce-tabs ul.tabs::before {
	display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	position: relative !important;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block !important;
	padding: 1rem 1.5rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	color: var(--cr-grey, #888) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
	border-bottom: 0.125rem solid transparent !important;
	margin-bottom: -0.062rem !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--cr-pink, #e81f76) !important;
	border-bottom-color: var(--cr-pink, #e81f76) !important;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--cr-pink, #e81f76) !important;
}

/* Tab panels */
.single-product .woocommerce-Tabs-panel {
	padding: 2rem 0 !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	line-height: 1.52 !important;
	color: var(--cr-black, #333) !important;
}

.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1rem !important;
}

/* Description panel */
.single-product .woocommerce-Tabs-panel--description p {
	margin: 0 0 0.75rem !important;
}

/* Additional information panel */
.single-product .woocommerce-Tabs-panel--additional_information table {
	width: 100% !important;
	border-collapse: collapse !important;
}

.single-product .woocommerce-Tabs-panel--additional_information table tr {
	border-bottom: 0.062rem solid var(--cr-border, #e7e7e7) !important;
}

.single-product .woocommerce-Tabs-panel--additional_information table th {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: var(--cr-black, #333) !important;
	padding: 0.75rem 1rem 0.75rem 0 !important;
	text-align: left !important;
	width: 40% !important;
}

.single-product .woocommerce-Tabs-panel--additional_information table td {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: var(--cr-grey, #888) !important;
	padding: 0.75rem 0 !important;
}

/* ── 1h. Reviews Section (Figma: elegant review cards) ────────────── */

.single-product #reviews {
	padding: 2rem 0 !important;
}

.single-product #reviews #comments {
	padding: 0 !important;
}

.single-product #reviews h2 {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1.5rem !important;
}

.single-product #reviews .commentlist {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.single-product #reviews .commentlist li {
	margin: 0 0 1.5rem !important;
	padding: 1.5rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
}

.single-product #reviews .commentlist li .comment-text {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.single-product #reviews .commentlist li .comment-text .star-rating {
	float: left !important;
	margin: 0 1rem 0 0 !important;
}

.single-product #reviews .commentlist li .comment-text .meta {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	color: var(--cr-grey, #888) !important;
	margin: 0 0 0.75rem !important;
}

.single-product #reviews .commentlist li .comment-text .meta strong {
	font-weight: 500 !important;
	color: var(--cr-black, #333) !important;
}

.single-product #reviews .commentlist li .comment-text .description p {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	line-height: 1.52 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 !important;
}

/* Review form */
.single-product #review_form_wrapper {
	margin-top: 2rem !important;
}

.single-product #review_form {
	padding: 2rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	background: #faf8f6 !important;
}

.single-product #review_form #reply-title {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 1rem !important;
	display: block !important;
}

.single-product #review_form .comment-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
}

.single-product #review_form .comment-form label {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 0.25rem !important;
	display: block !important;
}

.single-product #review_form .comment-form input[type="text"],
.single-product #review_form .comment-form input[type="email"] {
	width: 100% !important;
	height: 3rem !important;
	padding: 0 1rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	color: var(--cr-black, #333) !important;
	background: #fff !important;
}

.single-product #review_form .comment-form textarea {
	width: 100% !important;
	min-height: 7.5rem !important;
	padding: 0.75rem 1rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	color: var(--cr-black, #333) !important;
	background: #fff !important;
	resize: vertical !important;
}

.single-product #review_form .comment-form .stars {
	margin-bottom: 0 !important;
}

.single-product #review_form .comment-form .stars a {
	color: var(--cr-border, #e7e7e7) !important;
	transition: color 0.2s !important;
}

.single-product #review_form .comment-form .stars a.active,
.single-product #review_form .comment-form .stars a:hover {
	color: var(--cr-pink, #e81f76) !important;
}

.single-product #review_form .form-submit .submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	min-height: 3rem !important;
	padding: 0.75rem 2rem !important;
	border: none !important;
	border-radius: 0.125rem !important;
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.52 !important;
	cursor: pointer !important;
	transition: opacity 0.2s !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.single-product #review_form .form-submit .submit:hover {
	opacity: 0.9 !important;
}

/* ── 1i. Related Products / Upsells ────────────────────────────────── */

.single-product .related.products,
.single-product .upsells.products {
	width: 100% !important;
	margin: 3.75rem 0 0 !important;
	padding: 0 !important;
	clear: both !important;
}

.single-product .related.products h2,
.single-product .upsells.products h2 {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--cr-black, #333) !important;
	margin: 0 0 2rem !important;
	text-align: center !important;
}

.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after,
.single-product .upsells.products ul.products::before,
.single-product .upsells.products ul.products::after {
	display: none !important;
}

.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}

/* ── 1j. Sticky Add to Cart (Astra override) ────────────────────────── */

.ast-sticky-add-to-cart {
	background: rgba(255, 255, 255, 0.97) !important;
	border-top: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	backdrop-filter: blur(0.625rem) !important;
	-webkit-backdrop-filter: blur(0.625rem) !important;
	padding: 0.75rem 3.75rem !important;
	z-index: 100 !important;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap .ast-sticky-add-to-cart-title {
	font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
	color: var(--cr-black, #333) !important;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-action-price.price {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: var(--cr-black, #333) !important;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-action .single_add_to_cart_button {
	min-height: 2.5rem !important;
	padding: 0.5rem 1.5rem !important;
	font-size: 0.875rem !important;
}

/* ── 1k. Product Trust Badges (Shipping, Returns, Payments) ────────── */

.single-product .cr-product-trust {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	margin: 1.5rem 0 !important;
	padding: 1.25rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	background: #faf8f6 !important;
}

.single-product .cr-product-trust__item {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex: 1 !important;
	min-width: 8.75rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	line-height: 1.34 !important;
	color: var(--cr-black, #333) !important;
}

.single-product .cr-product-trust__item svg {
	width: 1.25rem !important;
	height: 1.25rem !important;
	flex-shrink: 0 !important;
	color: var(--cr-pink, #e81f76) !important;
}

.single-product .ast-single-product-payments {
	margin: 1rem 0 !important;
	padding: 1rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	background: #faf8f6 !important;
}

.single-product .ast-single-product-payments .ast-single-product-payments-title {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.037rem !important;
	color: var(--cr-grey, #888) !important;
	margin: 0 0 0.75rem !important;
}

/* Payment icons */
.single-product .ast-single-product-payments .ast-single-product-payments-list {
	display: flex !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
}

.single-product .ast-single-product-payments .ast-single-product-payments-list .ast-single-product-payments-icon {
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 0.125rem !important;
	width: 2.75rem !important;
	height: 1.75rem !important;
	background: #fff !important;
}

/* ── 2. PRODUCT CARD ICONS (loaded via carlo_rino_get_inline_svg in content-product.php)
   Shop card layout lives in shop.css — no duplicate path/fill overrides here. ── */

.cr-product-card__color-swatch--more {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.625rem !important;
	font-weight: 500 !important;
	color: var(--cr-grey, #888) !important;
	cursor: default !important;
}

/* ── 3. SLIDER INDICATOR (Figma: thin progress line at image bottom) ─ */

.cr-product-card__slider-indicator {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.cr-product-card__slider-track {
	display: block !important;
	width: 100% !important;
	height: 0.062rem !important;
	background: var(--cr-border, #e7e7e7) !important;
}

.cr-product-card__slider-progress {
	display: block !important;
	height: 100% !important;
	background: var(--cr-black, #333) !important;
	transition: width 0.3s ease !important;
}

/* Featured-only cards: keep Figma black/white line static (no slide animation) */
.cr-product-card__slider-indicator.is-static .cr-product-card__slider-progress {
	transition: none !important;
}

/* Single product gallery — indicator sits on flex viewport */
.single-product .woocommerce-product-gallery .flex-viewport {
	position: relative !important;
}

.single-product .cr-product-card__slider-indicator--gallery {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 3 !important;
}

/* ── 4. SINGLE PRODUCT — CFVSW variation swatches (Figma CardProduct colors) ─ */

.cr-single-product-card-layout.single-product .product_title,
.cr-single-product-card-layout.single-product div.product p.price,
.cr-single-product-card-layout.single-product div.product span.price {
	text-align: center !important;
}

.cr-single-product-card-layout.single-product .entry-summary {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.cr-single-product-card-layout.single-product form.cart .variations {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.cr-single-product-card-layout.single-product form.cart .variations tr {
	align-items: center !important;
}

.cr-single-product-card-layout.single-product form.cart .variations td.label {
	text-align: center !important;
}

.cr-single-product-card-layout.single-product .cfvsw-swatches-container {
	justify-content: center !important;
	gap: 0.25rem !important;
	margin: 0 auto !important;
}

.cr-single-product-card-layout.single-product .cfvsw-swatches-option {
	width: 1rem !important;
	min-width: 1rem !important;
	height: 1rem !important;
	min-height: 1rem !important;
	padding: 0.125rem !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	border-radius: 50% !important;
	background: transparent !important;
}

.cr-single-product-card-layout.single-product .cfvsw-swatches-option .cfvsw-swatch-inner {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	border-radius: 50% !important;
}

.cr-single-product-card-layout.single-product .cfvsw-swatches-option:not(.cfvsw-label-option, .cfvsw-image-option) .cfvsw-swatch-inner {
	border: none !important;
}

.cr-single-product-card-layout.single-product .cfvsw-selected-swatch {
	border-color: var(--cr-black, #333) !important;
}

.cr-single-product-card-layout.single-product .cfvsw-swatches-option:not(.cfvsw-swatches-disabled, .cfvsw-swatches-out-of-stock):hover {
	border-color: var(--cr-black, #333) !important;
}

/* ── 5. PRODUCT BADGES (new, sale, limited edition) ───────────────── */

.cr-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.125rem 0.5rem !important;
	border-radius: 0.125rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.688rem !important;
	font-weight: 500 !important;
	line-height: 1.34 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.037rem !important;
	white-space: nowrap !important;
}

.cr-badge--sale {
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
}

.cr-badge--new {
	background: var(--cr-black, #333) !important;
	color: #fff !important;
}

.cr-badge--soldout {
	background: #b0b0b0 !important;
	color: #fff !important;
}

/* ── 6. QUICK VIEW MODAL ──────────────────────────────────────────── */

.cr-quickview-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	background: rgba(0, 0, 0, 0.5) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: hidden !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.cr-quickview-overlay.is-open {
	visibility: visible !important;
	opacity: 1 !important;
}

.cr-quickview-modal {
	position: relative !important;
	width: 60rem !important;
	max-width: 90vw !important;
	max-height: 90vh !important;
	background: #fff !important;
	border-radius: 0.25rem !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

.cr-quickview-modal__close {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	z-index: 10 !important;
	width: 2rem !important;
	height: 2rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	color: var(--cr-black, #333) !important;
	transition: background 0.2s !important;
	box-shadow: none !important;
}

.cr-quickview-modal__close:hover {
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
}

.cr-quickview-modal__content {
	display: flex !important;
	gap: 0 !important;
}

.cr-quickview-modal__gallery {
	width: 50% !important;
	padding: 2rem !important;
	background: #faf8f6 !important;
}

.cr-quickview-modal__summary {
	width: 50% !important;
	padding: 2rem !important;
}

.cr-quickview-modal__summary .product_title {
	font-size: 1.5rem !important;
	margin: 0 0 0.75rem !important;
}

.cr-quickview-modal__summary div.product p.price {
	font-size: 1.25rem !important;
	margin: 0 0 1rem !important;
}

.cr-quickview-modal__summary .woocommerce-product-details__short-description {
	font-size: 0.875rem !important;
	margin: 0 0 1rem !important;
}

.cr-quickview-modal__summary .single_add_to_cart_button {
	width: 100% !important;
}

/* ── 7. WISHLIST PAGE / COMPARE PAGE ──────────────────────────────── */

.cr-wishlist-page .cr-wishlist-empty,
.cr-compare-page .cr-compare-empty {
	text-align: center !important;
	padding: 5rem 1.25rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1.125rem !important;
	color: var(--cr-grey, #888) !important;
}

/* ── 8. SINGLE CATEGORY PAGE ────────────────────────────────────────── */

.single-product .single-product-category {
	display: block !important;
	margin-bottom: 0.5rem !important;
}

.single-product .single-product-category a {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.037rem !important;
	color: var(--cr-pink, #e81f76) !important;
	text-decoration: none !important;
	transition: opacity 0.2s !important;
}

.single-product .single-product-category a:hover {
	opacity: 0.8 !important;
}

/* ── 9. NOTICE / MESSAGES (WooCommerce notices) ─────────────────────── */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	border-radius: 0.125rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	margin: 0 0 1rem !important;
	padding: 0.75rem 1rem !important;
	border-top: none !important;
}

.woocommerce-notices-wrapper .woocommerce-message {
	background: #f0faf0 !important;
	color: #2e7d32 !important;
	border-left: 0.188rem solid #2e7d32 !important;
}

.woocommerce-notices-wrapper .woocommerce-info {
	background: #f0f4f8 !important;
	color: #1565c0 !important;
	border-left: 0.188rem solid #1565c0 !important;
}

.woocommerce-notices-wrapper .woocommerce-error {
	background: #fef1f0 !important;
	color: #c62828 !important;
	border-left: 0.188rem solid #c62828 !important;
}

/* Leave room for the WooCommerce notice icon (::before is absolutely positioned). */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	position: relative !important;
	padding-left: 2.75rem !important;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
	top: 0.75rem !important;
	left: 1rem !important;
	line-height: 1.52 !important;
}

/* ── 10. RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 1200px) {
	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.ast-sticky-add-to-cart {
		padding: 0.75rem 2.5rem !important;
	}
}

@media (max-width: 992px) {
	.single-product div.product {
		padding: 2rem 2rem 3.75rem !important;
		flex-direction: column !important;
	}

	.single-product .woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin-bottom: 2rem !important;
	}

	.single-product .entry-summary {
		width: 100% !important;
		max-width: 100% !important;
	}

	.single-product .product_title {
		font-size: 2rem !important;
	}

	.single-product div.product p.price {
		font-size: 1.25rem !important;
	}

	.single-product .woocommerce-tabs ul.tabs li a {
		padding: 0.75rem 1rem !important;
		font-size: 0.875rem !important;
	}

	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.single-product .cr-product-trust {
		flex-direction: column !important;
		gap: 0.75rem !important;
	}

	.ast-sticky-add-to-cart {
		padding: 0.75rem 1.5rem !important;
	}

	.cr-quickview-modal {
		max-width: 95vw !important;
		max-height: 95vh !important;
	}

	.cr-quickview-modal__content {
		flex-direction: column !important;
	}

	.cr-quickview-modal__gallery,
	.cr-quickview-modal__summary {
		width: 100% !important;
	}
}

@media (max-width: 576px) {
	.single-product div.product {
		padding: 1rem 1rem 2.5rem !important;
	}

	.cr-single-product-card-layout.single-product .product_title {
		font-family: var(--cr-font-heading, "Lora", Georgia, serif) !important;
		font-size: 1rem !important;
		font-weight: 400 !important;
		line-height: 1.52 !important;
		text-align: center !important;
		margin: 0 0 0.5rem !important;
	}

	.cr-single-product-card-layout.single-product div.product p.price,
	.cr-single-product-card-layout.single-product div.product span.price {
		font-size: 0.75rem !important;
		font-weight: 400 !important;
		text-align: center !important;
		margin: 0 0 0.5rem !important;
	}

	.single-product .product_title {
		font-size: 1.5rem !important;
	}

	.single-product div.product p.price {
		font-size: 1.125rem !important;
	}

	.single-product .woocommerce-tabs ul.tabs {
		flex-direction: column !important;
		gap: 0 !important;
	}

	.single-product .woocommerce-tabs ul.tabs li {
		border-bottom: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	}

	.single-product .woocommerce-tabs ul.tabs li a {
		padding: 0.75rem 1rem !important;
		border-bottom: none !important;
		margin-bottom: 0 !important;
	}

	.single-product .woocommerce-tabs ul.tabs li.active a {
		border-bottom: none !important;
		background: #fef1f8 !important;
	}

	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0 !important;
	}

	.single-product .woocommerce-product-gallery {
		margin-bottom: 1.5rem !important;
	}

	.single-product .flex-control-thumbs li {
		width: 3.5rem !important;
		height: 3.5rem !important;
	}

	.single-product div.product form.cart {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.single-product .single_add_to_cart_button {
		width: 100% !important;
	}

	.single-product div.product .quantity {
		align-self: flex-start !important;
	}

	.single-product .cr-product-actions {
		flex-direction: column !important;
	}

	.single-product .cr-product-actions button {
		width: 100% !important;
	}

	.single-product #review_form {
		padding: 1.25rem !important;
	}

	.single-product .cr-product-trust__item {
		min-width: 100% !important;
	}

	.ast-sticky-add-to-cart {
		padding: 0.5rem 1rem !important;
	}

	.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-action-price.price {
		display: none !important;
	}

	.single-product .related.products h2,
	.single-product .upsells.products h2 {
		font-size: 1.25rem !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error {
		font-size: 0.812rem !important;
		padding: 0.625rem 0.75rem 0.625rem 2.25rem !important;
	}

	.woocommerce-notices-wrapper .woocommerce-message::before,
	.woocommerce-notices-wrapper .woocommerce-info::before,
	.woocommerce-notices-wrapper .woocommerce-error::before {
		top: 0.625rem !important;
		left: 0.75rem !important;
	}
}


/* =============================================================================
   CARLO RINO BUTTON COMPONENTS — 7 Figma button designs
   Figma nodes: 56:717, 152:680, 725:5155, 706:4700, 587:8594, 697:5097, 2569:36674
   Uses !important for Figma fidelity.
   Relies on CSS variables from shop.css (:root section).
   ============================================================================= */

/* ── Shared Icon Base ──────────────────────────────────────────────────── */

.cr-btn-icon {
	display: block !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	flex-shrink: 0 !important;
}

.cr-btn-icon--sm {
	width: 1rem !important;
	height: 1rem !important;
}

/* =============================================================================
   1. BUTTON PRIMARY — Filled / Outline with optional icons
   Figma: 56:717
   ============================================================================= */

.cr-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.125rem !important;
	backdrop-filter: blur(0.312rem) !important;
	-webkit-backdrop-filter: blur(0.312rem) !important;
	font-family: "Quicksand", "Segoe UI", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.52 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s !important;
	border: 0.062rem solid transparent !important;
	box-shadow: none !important;
	white-space: nowrap !important;
}

.cr-btn-primary:hover {
	box-shadow: none !important;
}

.cr-btn-primary__text {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	word-break: break-word !important;
	line-height: 1.52 !important;
	white-space: nowrap !important;
}

.cr-btn-primary__icon {
	display: flex !important;
	flex-shrink: 0 !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Variant: Outline Black ────────────────────────────────────────── */

.cr-btn-primary--outline-b {
	border-color: #333 !important;
	color: #333 !important;
	background: transparent !important;
}

.cr-btn-primary--outline-b .cr-btn-icon path {
	stroke: #333 !important;
}

.cr-btn-primary--outline-b:hover {
	border-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--outline-b:hover .cr-btn-icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

/* ── Variant: Outline White ────────────────────────────────────────── */

.cr-btn-primary--outline-w {
	border-color: #fff !important;
	color: #fff !important;
	background: transparent !important;
}

.cr-btn-primary--outline-w .cr-btn-icon path {
	stroke: #fff !important;
}

.cr-btn-primary--outline-w:hover {
	background: #fff !important;
	color: #333 !important;
}

.cr-btn-primary--outline-w:hover .cr-btn-icon path {
	stroke: #333 !important;
}

/* ── Variant: Outline Pink ─────────────────────────────────────────── */

.cr-btn-primary--outline-pink {
	border-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-pink, #e81f76) !important;
	background: transparent !important;
}

.cr-btn-primary--outline-pink .cr-btn-icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--outline-pink:hover {
	border-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-pink, #e81f76) !important;
}

/* ── Variant: Pink Filled ──────────────────────────────────────────── */

.cr-btn-primary--pink {
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
	border-color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--pink .cr-btn-icon path {
	stroke: #fff !important;
}

.cr-btn-primary--pink:hover {
	background: var(--cr-pink-700, #ca0c59) !important;
	border-color: var(--cr-pink-700, #ca0c59) !important;
}

/* ── Variant: White Filled ─────────────────────────────────────────── */

.cr-btn-primary--white {
	background: var(--cr-cream, #faf7f6) !important;
	color: var(--cr-pink, #e81f76) !important;
	border-color: var(--cr-cream, #faf7f6) !important;
}

.cr-btn-primary--white .cr-btn-icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--white:hover {
	background: var(--cr-cream, #faf7f6) !important;
	color: var(--cr-pink, #e81f76) !important;
}

/* ── Variant: Disabled ─────────────────────────────────────────────── */

.cr-btn-primary--disabled {
	background: #b0b0b0 !important;
	color: #fff !important;
	border-color: #b0b0b0 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.cr-btn-primary--disabled .cr-btn-icon path {
	stroke: #fff !important;
}

/* ── State: Hover (used when forced state is needed) ───────────────── */

.cr-btn-primary--outline-b.cr-btn-primary--hover {
	border-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--outline-w.cr-btn-primary--hover {
	background: #fff !important;
	color: #333 !important;
}

.cr-btn-primary--pink.cr-btn-primary--hover {
	background: var(--cr-pink-700, #ca0c59) !important;
}

.cr-btn-primary--white.cr-btn-primary--hover {
	background: var(--cr-cream, #faf7f6) !important;
	color: var(--cr-pink, #e81f76) !important;
}

/* ── State: Static ─────────────────────────────────────────────────── */

.cr-btn-primary--disabled.cr-btn-primary--static {
	cursor: not-allowed !important;
	opacity: 1 !important;
}

/* =============================================================================
   2. BUTTON SECONDARY TEXT — defined below (Figma 152:680 / 1786:25498)
   See: "Button Secondary Text" section near end of this file.
   ============================================================================= */

/* =============================================================================
   3. BUTTON QTY / SHOE SIZE — Square size / icon selector
   Figma: 725:5155
   ============================================================================= */

.cr-btn-qty {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.5rem !important;
	border-radius: 0.125rem !important;
	cursor: pointer !important;
	transition: background-color 0.2s, border-color 0.2s !important;
	border: 0.062rem solid transparent !important;
	box-shadow: none !important;
	min-width: 2.5rem !important;
	min-height: 2.5rem !important;
	font-family: "Quicksand", "Segoe UI", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
}

.cr-btn-qty:hover {
	box-shadow: none !important;
}

/* ── Number: Default ───────────────────────────────────────────────── */

.cr-btn-qty--number.cr-btn-qty--default {
	background: var(--cr-cream, #faf7f6) !important;
	color: var(--cr-black, #333) !important;
}

/* ── Number: Hover ─────────────────────────────────────────────────── */

.cr-btn-qty--number.cr-btn-qty--hover {
	background: var(--cr-cream, #faf7f6) !important;
	color: var(--cr-pink, #e81f76) !important;
	border-color: var(--cr-pink, #e81f76) !important;
}

/* ── Number: Selected ──────────────────────────────────────────────── */

.cr-btn-qty--number.cr-btn-qty--selected {
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
}

.cr-btn-qty--number.cr-btn-qty--selected .cr-btn-qty__text {
	color: #fff !important;
}

/* ── Icon: Default ─────────────────────────────────────────────────── */

.cr-btn-qty--icon.cr-btn-qty--default {
	background: transparent !important;
	color: var(--cr-black, #333) !important;
}

.cr-btn-qty--icon.cr-btn-qty--default .cr-btn-icon path {
	stroke: var(--cr-black, #333) !important;
}

/* ── Icon: Hover ───────────────────────────────────────────────────── */

.cr-btn-qty--icon.cr-btn-qty--hover {
	border-color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-qty--icon.cr-btn-qty--hover .cr-btn-icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-qty__text {
	text-align: center !important;
	width: 1.5rem !important;
	word-break: break-word !important;
	line-height: 1.52 !important;
}

.cr-btn-qty__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* =============================================================================
   4. BUTTON PRODUCT SLIDER — Circular arrow/zoom button
   Figma: 706:4700
   ============================================================================= */

.cr-btn-slider {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border-radius: 2rem !important;
	backdrop-filter: blur(0.625rem) !important;
	-webkit-backdrop-filter: blur(0.625rem) !important;
	background: rgba(255, 255, 255, 0.6) !important;
	border: 0.062rem solid transparent !important;
	cursor: pointer !important;
	transition: background 0.2s, border-color 0.2s !important;
	box-shadow: none !important;
	width: 2rem !important;
	height: 2rem !important;
	line-height: 1 !important;
	font-size: 0 !important;
	color: var(--cr-black, #333) !important;
}

.cr-btn-slider:hover {
	box-shadow: none !important;
}

.cr-btn-slider--disabled {
	background: rgba(51, 51, 51, 0.1) !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	border-color: transparent !important;
}

.cr-btn-slider--disabled .cr-btn-slider__icon path {
	stroke: rgba(51, 51, 51, 0.25) !important;
}

/* ── Hover state ─────────────────────────────────────────────────────── */

.cr-btn-slider--hover {
	background: rgba(255, 255, 255, 0.9) !important;
	border-color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-slider--hover .cr-btn-slider__icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-slider:not(.cr-btn-slider--disabled):not(.cr-btn-slider--hover):hover {
	background: rgba(255, 255, 255, 0.9) !important;
	border-color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-slider:not(.cr-btn-slider--disabled):not(.cr-btn-slider--hover):hover .cr-btn-slider__icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-slider__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

/* Icon sizing: Figma uses 16px inside the 32px circular button */
.cr-btn-slider .cr-btn-slider__icon {
	width: 1rem !important;
	height: 1rem !important;
}

/* ── Direction variants ────────────────────────────────────────────── */

.cr-btn-slider--left .cr-btn-slider__icon,
.cr-btn-slider--right .cr-btn-slider__icon,
.cr-btn-slider--zoom .cr-btn-slider__icon {
	transform: none !important;
}

/* =============================================================================
   5. BUTTON SHOP THE LOOK — Composite with product thumbnails
   Figma: 587:8594
   ============================================================================= */

.cr-btn-stl {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.25rem !important;
	backdrop-filter: blur(0.625rem) !important;
	-webkit-backdrop-filter: blur(0.625rem) !important;
	background: rgba(51, 51, 51, 0.3) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	box-shadow: none !important;
	font-family: "Quicksand", "Segoe UI", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	color: #fff !important;
	white-space: nowrap !important;
	border: none !important;
}

.cr-btn-stl:hover {
	background: rgba(51, 51, 51, 0.45) !important;
	box-shadow: none !important;
	color: #fff !important;
}

.cr-btn-stl__button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex-shrink: 0 !important;
}

.cr-btn-stl__text {
	color: #fff !important;
	line-height: 1.52 !important;
	white-space: nowrap !important;
}

.cr-btn-stl__arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.cr-btn-stl__arrow .cr-btn-icon {
	width: 1rem !important;
	height: 1rem !important;
}

.cr-btn-stl__arrow .cr-btn-icon path {
	stroke: #fff !important;
}

/* ── Variant: Thumbnails (with product preview strip) ──────────────── */

.cr-btn-stl--thumbnails {
	padding: 0.25rem 1rem 0.25rem 0.25rem !important;
	gap: 0.5rem !important;
}

.cr-btn-stl--thumbnails .cr-btn-stl__button {
	gap: 0.5rem !important;
}

/* ── Hover reveal: preview strip hidden by default, slides in on hover ── */
.cr-btn-stl--hover-reveal {
	overflow: hidden !important;
}

.cr-btn-stl--hover-reveal .cr-btn-stl__preview {
	width: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	transition: width 0.35s ease, opacity 0.25s ease !important;
}

.cr-btn-stl--hover-reveal:hover .cr-btn-stl__preview,
.cr-btn-stl--hover-reveal:focus-within .cr-btn-stl__preview,
.cr-highlighted-product:hover .cr-btn-stl--hover-reveal .cr-btn-stl__preview,
.cr-block-stl:hover .cr-btn-stl--hover-reveal .cr-btn-stl__preview {
	width: 6.25rem !important;
	opacity: 1 !important;
}

.cr-btn-stl__preview {
	display: flex !important;
	align-items: center !important;
	gap: 0.125rem !important;
	border-radius: 0.125rem !important;
	flex-shrink: 0 !important;
	height: 2.5rem !important;
	overflow: hidden !important;
}

.cr-btn-stl__thumb {
	display: block !important;
	width: 2rem !important;
	height: 2.5rem !important;
	overflow: hidden !important;
	background: var(--cr-cream, #faf7f6) !important;
	flex-shrink: 0 !important;
	border-radius: 0.125rem !important;
}

.cr-btn-stl__thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* =============================================================================
   6. BUTTON SELECT QTY — Quantity selector (minus / value / plus)
   Figma: 697:5097
   ============================================================================= */

.cr-btn-qty-select {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.25rem !important;
	border-radius: 0.125rem !important;
	background: var(--cr-cream, #faf7f6) !important;
	border: 0.062rem solid var(--cr-border, #e7e7e7) !important;
	min-width: 9rem !important;
}

.cr-btn-qty-select__btn {
	display: flex !important;
	flex: 1 0 0 !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.5rem !important;
	border-radius: 0.125rem !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: border-color 0.2s !important;
	box-shadow: none !important;
	min-width: 2.5rem !important;
	min-height: 2.5rem !important;
}

.cr-btn-qty-select__btn:hover {
	border-color: var(--cr-pink, #e81f76) !important;
	box-shadow: none !important;
}

.cr-btn-qty-select__btn:hover .cr-btn-icon path {
	stroke: var(--cr-pink, #e81f76) !important;
}

.cr-btn-qty-select__value {
	flex: 1 0 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.5rem 0 !important;
}

.cr-btn-qty-select__input {
	width: 100% !important;
	min-width: 0 !important;
	text-align: center !important;
	font-family: "Quicksand", "Segoe UI", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	color: var(--cr-black, #333) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	-moz-appearance: textfield !important;
}

.cr-btn-qty-select__input::-webkit-inner-spin-button,
.cr-btn-qty-select__input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* =============================================================================
   7. BUTTON COLOR SWATCH — Circular color selector
   Figma: 2569:36674
   ============================================================================= */

.cr-btn-swatch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	box-shadow: none !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	transition: opacity 0.2s !important;
}

.cr-btn-swatch:hover {
	box-shadow: none !important;
	opacity: 0.8 !important;
}

.cr-btn-swatch__circle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	border-radius: 50% !important;
	transition: outline 0.2s !important;
	outline: 0.125rem solid transparent !important;
	outline-offset: 0.125rem !important;
}

/* ── Selected state ────────────────────────────────────────────────── */

.cr-btn-swatch--selected .cr-btn-swatch__circle {
	outline-color: var(--cr-black, #333) !important;
}

.cr-btn-swatch__check {
	display: block !important;
	width: 1rem !important;
	height: 1rem !important;
}

.cr-btn-swatch__check path {
	fill: #fff !important;
	stroke: #fff !important;
}

/* ── Unselected state ──────────────────────────────────────────────── */

.cr-btn-swatch--unselected .cr-btn-swatch__circle {
	outline-color: transparent !important;
}

/* ── Accessibility focus ────────────────────────────────────────────── */

.cr-btn-swatch:focus-visible .cr-btn-swatch__circle {
	outline-color: var(--cr-black, #333) !important;
}

/* ── Hover ─────────────────────────────────────────────────────────── */

.cr-btn-swatch:hover .cr-btn-swatch__circle {
	outline-color: var(--cr-grey, #888) !important;
}

/* =============================================================================
   CARLO RINO CORE COMPONENTS — Button Primary (Figma node 56:717)
   Design system button with 6 color variants, icon support, and hover states.
   All rules use !important for Figma fidelity.
   ============================================================================= */

/* ── Base Button ──────────────────────────────────────────────────── */

.cr-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.125rem !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s !important;
	box-shadow: none !important;
	border: none !important;
	backdrop-filter: blur(0.312rem) !important;
	-webkit-backdrop-filter: blur(0.312rem) !important;
	white-space: nowrap !important;
}

.cr-btn-primary:hover,
.cr-btn-primary:focus,
.cr-btn-primary:active {
	box-shadow: none !important;
	text-decoration: none !important;
}

/* ── Icon Styles ──────────────────────────────────────────────────── */

.cr-btn-primary__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
}

.cr-btn-primary__icon svg {
	display: block !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
}

.cr-btn-primary__icon svg path {
	transition: stroke 0.2s !important;
}

/* ── Text ─────────────────────────────────────────────────────────── */

.cr-btn-primary__text {
	word-break: break-word !important;
	line-height: 1.52 !important;
}

/* ── Color Variant: Pink (filled) ──────────────────────────────────── */

.cr-btn-primary--pink {
	background-color: var(--cr-pink, #e81f76) !important;
	color: var(--cr-white, #fff) !important;
	border: none !important;
}

.cr-btn-primary--pink:hover {
	background-color: var(--cr-pink-700, #ca0c59) !important;
	color: var(--cr-white, #fff) !important;
}

/* ── Color Variant: White (filled) ──────────────────────────────────── */

.cr-btn-primary--white {
	background-color: var(--cr-white, #fff) !important;
	color: var(--cr-black, #333) !important;
	border: none !important;
}

.cr-btn-primary--white:hover {
	background-color: var(--cr-cream, #faf8f6) !important;
	color: var(--cr-black, #333) !important;
}

/* ── Color Variant: Disabled (filled) ───────────────────────────────── */

.cr-btn-primary--disabled {
	background-color: var(--cr-btn-disabled, #b0b0b0) !important;
	color: var(--cr-white, #fff) !important;
	border: none !important;
	cursor: default !important;
	pointer-events: none !important;
	opacity: 1 !important;
}

.cr-btn-primary--disabled:hover {
	background-color: var(--cr-btn-disabled, #b0b0b0) !important;
	color: var(--cr-white, #fff) !important;
}

/* ── Color Variant: Outline White ──────────────────────────────────── */

.cr-btn-primary--outline-w {
	background-color: transparent !important;
	color: var(--cr-white, #fff) !important;
	border: 0.062rem solid var(--cr-white, #fff) !important;
}

.cr-btn-primary--outline-w:hover {
	background-color: var(--cr-white, #fff) !important;
	color: var(--cr-black, #333) !important;
	border: 0.062rem solid var(--cr-white, #fff) !important;
}

.cr-btn-primary--outline-w .cr-btn-primary__icon svg path {
	stroke: var(--cr-white, #fff) !important;
}

.cr-btn-primary--outline-w:hover .cr-btn-primary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

/* ── Color Variant: Outline Pink ──────────────────────────────────── */

.cr-btn-primary--outline-pink {
	background-color: transparent !important;
	color: var(--cr-pink, #e81f76) !important;
	border: 0.062rem solid var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--outline-pink:hover {
	background-color: transparent !important;
	color: var(--cr-pink, #e81f76) !important;
	border: 0.062rem solid var(--cr-pink, #e81f76) !important;
}

/* ── Color Variant: Outline Black ──────────────────────────────────── */

.cr-btn-primary--outline-b {
	background-color: transparent !important;
	color: var(--cr-black, #333) !important;
	border: 0.062rem solid var(--cr-black, #333) !important;
}

.cr-btn-primary--outline-b:hover {
	background-color: transparent !important;
	color: var(--cr-pink, #e81f76) !important;
	border: 0.062rem solid var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--outline-b .cr-btn-primary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

.cr-btn-primary--outline-b:hover .cr-btn-primary__icon svg path {
	stroke: var(--cr-pink, #e81f76) !important;
}

/* ── Hover state (for design docs / previews) ──────────────────────── */

.cr-btn-primary--hover.cr-btn-primary--pink {
	background-color: var(--cr-pink-700, #ca0c59) !important;
}

.cr-btn-primary--hover.cr-btn-primary--white {
	background-color: var(--cr-cream, #faf8f6) !important;
}

.cr-btn-primary--hover.cr-btn-primary--outline-w {
	background-color: var(--cr-white, #fff) !important;
	color: var(--cr-black, #333) !important;
}

.cr-btn-primary--hover.cr-btn-primary--outline-w .cr-btn-primary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

.cr-btn-primary--hover.cr-btn-primary--outline-b {
	color: var(--cr-pink, #e81f76) !important;
	border-color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-primary--hover.cr-btn-primary--outline-b .cr-btn-primary__icon svg path {
	stroke: var(--cr-pink, #e81f76) !important;
}

/* ── Button tag reset ──────────────────────────────────────────────── */

button.cr-btn-primary {
	background: none !important;
	outline: none !important;
	cursor: pointer !important;
}

button.cr-btn-primary:focus-visible {
	outline: 0.125rem solid var(--cr-pink, #e81f76) !important;
	outline-offset: 0.125rem !important;
}

/* =============================================================================
   CARLO RINO CORE COMPONENTS — Button Secondary Text
   Figma: 152:680 (component) 
   Text-anchor button: Quicksand 16/1.52, 1px underline, gap 4→8 hover.
   Underline animation follows featured-products.css pattern:
   base line fades to transparent on hover, accent line pops in from center.
   All rules use !important for Astra / WooCommerce override fidelity.
   ============================================================================= */

/* ── Base Button ──────────────────────────────────────────────────── */

.cr-btn-secondary {
	--cr-btn-line-duration: 0.45s;
	--cr-btn-line-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--cr-btn-gap-duration: 0.35s;
	--cr-btn-pop-duration: 1.6s;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.188rem !important;
	padding-top: 0.25rem !important;
	margin: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border: none !important;
	background: none !important;
	outline: none !important;
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	white-space: nowrap !important;
	transition: gap var(--cr-btn-gap-duration) var(--cr-btn-line-ease) !important;
}

.cr-btn-secondary:hover,
.cr-btn-secondary:focus,
.cr-btn-secondary:active {
	box-shadow: none !important;
	text-decoration: none !important;
	outline: none !important;
}

/* ── Inner Row (icons + text) ─────────────────────────────────────── */

.cr-btn-secondary__row {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	transition: gap var(--cr-btn-gap-duration) var(--cr-btn-line-ease) !important;
	flex-shrink: 0 !important;
}

/* ── Hover / Active gap animation (Figma Default 4px → Hover 8px) ─── */

.cr-btn-secondary:hover .cr-btn-secondary__row,
.cr-btn-secondary:focus-visible .cr-btn-secondary__row,
.cr-btn-secondary--hover .cr-btn-secondary__row,
.cr-btn-secondary--active .cr-btn-secondary__row,
.cr-btn-secondary--hover-animation .cr-btn-secondary__row {
	gap: 0.5rem !important;
}

/* ── Icon Styles ──────────────────────────────────────────────────── */

.cr-btn-secondary__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.cr-btn-secondary__icon--front,
.cr-btn-secondary__icon--back {
	width: 1.5rem !important;
	height: 1.5rem !important;
}

.cr-btn-secondary__icon--dropdown {
	width: 1rem !important;
	height: 1rem !important;
}

.cr-btn-secondary__icon svg {
	display: block !important;
}

.cr-btn-secondary__icon svg path {
	transition: stroke var(--cr-btn-line-duration) var(--cr-btn-line-ease) !important;
}

/* ── Text ─────────────────────────────────────────────────────────── */

.cr-btn-secondary__text {
	font-family: var(--cr-font-body, "Quicksand", "Segoe UI", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.52 !important;
	white-space: nowrap !important;
	word-break: break-word !important;
	text-decoration: none !important;
	transition: color var(--cr-btn-line-duration) var(--cr-btn-line-ease) !important;
}

/* ── Underline Line ─────────────────────────────────────────────────
   Matches featured-products.css pattern:
   base line fades to transparent on hover; accent grows from center. */

.cr-btn-secondary__line {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: 0.062rem !important;
	flex-shrink: 0 !important;
	opacity: 1 !important;
	transform: scaleX(1) !important;
	transform-origin: center center !important;
	transition: background-color var(--cr-btn-line-duration) var(--cr-btn-line-ease) !important;
}

/* Accent overlay — expands from center on hover (Figma Hover Animation) */
.cr-btn-secondary__line::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: var(--cr-pink, #e81f76) !important;
	transform: scaleX(0) !important;
	transform-origin: center center !important;
	transition: transform var(--cr-btn-pop-duration) var(--cr-btn-line-ease) !important;
	pointer-events: none !important;
}

/* ── Simple apply (no nested markup) — underline via ::after ────────
   <a class="cr-btn-secondary cr-btn-secondary--light">Explore Collection</a>
   ──────────────────────────────────────────────────────────────────── */

.cr-btn-secondary:not(:has(.cr-btn-secondary__line))::after {
	content: "" !important;
	display: block !important;
	width: 100% !important;
	height: 0.062rem !important;
	flex-shrink: 0 !important;
	background-color: currentColor !important;
	opacity: 1 !important;
	transform: scaleX(1) !important;
	transform-origin: center center !important;
	transition:
		background-color var(--cr-btn-line-duration) var(--cr-btn-line-ease),
		transform var(--cr-btn-line-duration) var(--cr-btn-line-ease),
		opacity var(--cr-btn-line-duration) var(--cr-btn-line-ease) !important;
	pointer-events: none !important;
}

/* ── Color Variant: Dark ──────────────────────────────────────────── */

.cr-btn-secondary--dark,
.cr-btn-secondary--dark .cr-btn-secondary__text {
	color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark .cr-btn-secondary__line {
	background-color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark .cr-btn-secondary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark:hover .cr-btn-secondary__text,
.cr-btn-secondary--dark:focus-visible .cr-btn-secondary__text,
.cr-btn-secondary--dark.cr-btn-secondary--hover .cr-btn-secondary__text,
.cr-btn-secondary--dark.cr-btn-secondary--active .cr-btn-secondary__text {
	color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-secondary--dark:hover .cr-btn-secondary__line,
.cr-btn-secondary--dark:focus-visible .cr-btn-secondary__line,
.cr-btn-secondary--dark.cr-btn-secondary--hover .cr-btn-secondary__line,
.cr-btn-secondary--dark.cr-btn-secondary--active .cr-btn-secondary__line {
	background-color: transparent !important;
	transition: background-color 0s !important;
}

.cr-btn-secondary--dark:hover .cr-btn-secondary__line::after,
.cr-btn-secondary--dark:focus-visible .cr-btn-secondary__line::after,
.cr-btn-secondary--dark.cr-btn-secondary--hover .cr-btn-secondary__line::after,
.cr-btn-secondary--dark.cr-btn-secondary--active .cr-btn-secondary__line::after {
	transform: scaleX(1) !important;
}

.cr-btn-secondary--dark:hover .cr-btn-secondary__icon svg path,
.cr-btn-secondary--dark:focus-visible .cr-btn-secondary__icon svg path,
.cr-btn-secondary--dark.cr-btn-secondary--hover .cr-btn-secondary__icon svg path,
.cr-btn-secondary--dark.cr-btn-secondary--active .cr-btn-secondary__icon svg path {
	stroke: var(--cr-pink, #e81f76) !important;
}

/* Simple-apply dark */
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)) {
	color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line))::after {
	background-color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)):hover,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)):focus-visible,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--hover,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--active {
	color: var(--cr-pink, #e81f76) !important;
}

.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)):hover::after,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)):focus-visible::after,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--hover::after,
.cr-btn-secondary--dark:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--active::after {
	background-color: var(--cr-pink, #e81f76) !important;
}

/* ── Color Variant: Light (Figma overlay CTA — white on dark) ─────── */

.cr-btn-secondary--light {
	color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light .cr-btn-secondary__line {
	background-color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light .cr-btn-secondary__line::after {
	background: var(--cr-white, #fff) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--light .cr-btn-secondary__icon svg path {
	stroke: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light:hover .cr-btn-secondary__line,
.cr-btn-secondary--light:focus-visible .cr-btn-secondary__line,
.cr-btn-secondary--light.cr-btn-secondary--hover .cr-btn-secondary__line {
	background-color: transparent !important;
	transition: background-color 0s !important;
}

.cr-btn-secondary--light:hover .cr-btn-secondary__line::after,
.cr-btn-secondary--light:focus-visible .cr-btn-secondary__line::after,
.cr-btn-secondary--light.cr-btn-secondary--hover .cr-btn-secondary__line::after {
	transform: scaleX(1) !important;
}

.cr-btn-secondary--light:hover .cr-btn-secondary__text,
.cr-btn-secondary--light:focus-visible .cr-btn-secondary__text,
.cr-btn-secondary--light.cr-btn-secondary--hover .cr-btn-secondary__text {
	color: var(--cr-white, #fff) !important;
}

/* Simple-apply light */
.cr-btn-secondary--light:not(:has(.cr-btn-secondary__line)) {
	color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light:not(:has(.cr-btn-secondary__line))::after {
	background-color: var(--cr-white, #fff) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--light:not(:has(.cr-btn-secondary__line)):hover::after,
.cr-btn-secondary--light:not(:has(.cr-btn-secondary__line)):focus-visible::after,
.cr-btn-secondary--light:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--hover::after {
	transform: scaleX(1) !important;
}

/* ── Color Variant: Disabled ───────────────────────────────────────── */

.cr-btn-secondary--disabled {
	cursor: default !important;
	pointer-events: none !important;
}

.cr-btn-secondary--disabled,
.cr-btn-secondary--disabled .cr-btn-secondary__text {
	color: var(--cr-btn-disabled, #b0b0b0) !important;
}

.cr-btn-secondary--disabled .cr-btn-secondary__line {
	background-color: var(--cr-btn-disabled, #b0b0b0) !important;
	opacity: 0 !important;
	width: 0.062rem !important;
	height: 0.062rem !important;
}

.cr-btn-secondary--disabled .cr-btn-secondary__line::after {
	display: none !important;
}

.cr-btn-secondary--disabled .cr-btn-secondary__icon svg path {
	stroke: var(--cr-btn-disabled, #b0b0b0) !important;
}

.cr-btn-secondary--disabled:not(:has(.cr-btn-secondary__line))::after {
	opacity: 0 !important;
	transform: scaleX(0) !important;
}

/* ── Color Variant: Dark No Line ──────────────────────────────────── */

.cr-btn-secondary--dark-no-line,
.cr-btn-secondary--dark-no-line .cr-btn-secondary__text {
	color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark-no-line .cr-btn-secondary__line {
	background-color: transparent !important;
	width: 100% !important;
	height: 0.062rem !important;
}

.cr-btn-secondary--dark-no-line .cr-btn-secondary__line::after {
	background: var(--cr-pink, #e81f76) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--dark-no-line .cr-btn-secondary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark-no-line:hover .cr-btn-secondary__text,
.cr-btn-secondary--dark-no-line:focus-visible .cr-btn-secondary__text,
.cr-btn-secondary--dark-no-line.cr-btn-secondary--hover .cr-btn-secondary__text {
	color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark-no-line:hover .cr-btn-secondary__line::after,
.cr-btn-secondary--dark-no-line:focus-visible .cr-btn-secondary__line::after,
.cr-btn-secondary--dark-no-line.cr-btn-secondary--hover .cr-btn-secondary__line::after {
	transform: scaleX(1) !important;
}

.cr-btn-secondary--dark-no-line:hover .cr-btn-secondary__icon svg path,
.cr-btn-secondary--dark-no-line:focus-visible .cr-btn-secondary__icon svg path,
.cr-btn-secondary--dark-no-line.cr-btn-secondary--hover .cr-btn-secondary__icon svg path {
	stroke: var(--cr-black, #333) !important;
}

/* Simple-apply dark-no-line */
.cr-btn-secondary--dark-no-line:not(:has(.cr-btn-secondary__line)) {
	color: var(--cr-black, #333) !important;
}

.cr-btn-secondary--dark-no-line:not(:has(.cr-btn-secondary__line))::after {
	background-color: var(--cr-pink, #e81f76) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--dark-no-line:not(:has(.cr-btn-secondary__line)):hover::after,
.cr-btn-secondary--dark-no-line:not(:has(.cr-btn-secondary__line)):focus-visible::after,
.cr-btn-secondary--dark-no-line:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--hover::after {
	transform: scaleX(1) !important;
}

/* ── Color Variant: Light No Line ─────────────────────────────────── */

.cr-btn-secondary--light-no-line,
.cr-btn-secondary--light-no-line .cr-btn-secondary__text {
	color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light-no-line .cr-btn-secondary__line {
	background-color: transparent !important;
	width: 100% !important;
	height: 0.062rem !important;
}

.cr-btn-secondary--light-no-line .cr-btn-secondary__line::after {
	background: var(--cr-white, #fff) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--light-no-line .cr-btn-secondary__icon svg path {
	stroke: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light-no-line:hover .cr-btn-secondary__text,
.cr-btn-secondary--light-no-line:focus-visible .cr-btn-secondary__text,
.cr-btn-secondary--light-no-line.cr-btn-secondary--hover .cr-btn-secondary__text {
	color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light-no-line:hover .cr-btn-secondary__line::after,
.cr-btn-secondary--light-no-line:focus-visible .cr-btn-secondary__line::after,
.cr-btn-secondary--light-no-line.cr-btn-secondary--hover .cr-btn-secondary__line::after {
	transform: scaleX(1) !important;
}

/* Simple-apply light-no-line */
.cr-btn-secondary--light-no-line:not(:has(.cr-btn-secondary__line)) {
	color: var(--cr-white, #fff) !important;
}

.cr-btn-secondary--light-no-line:not(:has(.cr-btn-secondary__line))::after {
	background-color: var(--cr-white, #fff) !important;
	transform: scaleX(0) !important;
}

.cr-btn-secondary--light-no-line:not(:has(.cr-btn-secondary__line)):hover::after,
.cr-btn-secondary--light-no-line:not(:has(.cr-btn-secondary__line)):focus-visible::after,
.cr-btn-secondary--light-no-line:not(:has(.cr-btn-secondary__line)).cr-btn-secondary--hover::after {
	transform: scaleX(1) !important;
}

/* ── Hover Animation preview state (Figma 152:680 — accent line mid-grow) ─ */

.cr-btn-secondary--hover-animation .cr-btn-secondary__line {
	background-color: transparent !important;
}

.cr-btn-secondary--hover-animation .cr-btn-secondary__line::after {
	transform: scaleX(0) !important;
}

.cr-btn-secondary--hover-animation:not(:has(.cr-btn-secondary__line))::after {
	transform: scaleX(0) !important;
}

/* ── Focus visible ─────────────────────────────────────────────────── */

button.cr-btn-secondary:focus-visible {
	outline: 0.125rem solid var(--cr-pink, #e81f76) !important;
	outline-offset: 0.125rem !important;
}

/* =============================================================================
   GUTENBERG BLOCK: Shop The Look (carlo-rino/shop-the-look)
   Wraps .cr-btn-stl in an alignable block container.
   ============================================================================= */

.cr-block-stl {
display: flex !important;
width: 100% !important;
}

.cr-block-stl--align-left   { justify-content: flex-start  !important; }
.cr-block-stl--align-center { justify-content: center      !important; }
.cr-block-stl--align-right  { justify-content: flex-end    !important; }

.cr-block-stl__placeholder {
padding: 1rem !important;
border: 0.062rem dashed #ccc !important;
color: #666 !important;
font-style: italic !important;
text-align: center !important;
}

/* =============================================================================
   GUTENBERG BLOCK: Carlo Rino Button (carlo-rino/button)
   Wraps .cr-btn-primary / .cr-btn-secondary in an alignable block container.
   ============================================================================= */

.cr-block-button {
display: flex !important;
width: 100% !important;
}

.cr-block-button--align-left   { justify-content: flex-start  !important; }
.cr-block-button--align-center { justify-content: center      !important; }
.cr-block-button--align-right  { justify-content: flex-end    !important; }

.cr-block-button__placeholder {
padding: 1rem !important;
border: 0.062rem dashed #ccc !important;
color: #666 !important;
font-style: italic !important;
text-align: center !important;
}