/* ============================================================
   ALIXA-STYLE PRODUCT CARD + QUICK VIEW for WooCommerce
   ------------------------------------------------------------
   - Variables are used for COLORS ONLY. Everything else is a
     plain, solid value you can read and edit directly.
   - Class names are simple and flat: .alx-card, .alx-qv, etc.
   - Columns / gaps are NOT set here. Control those from the
     Elementor "Products" / "Archive Products" widget.
   ============================================================ */

:root {
	--alx-navy: #1a2037;
	--alx-gold: #a68a40;
	--alx-sand: #d0c299;
	--alx-price: #9e8a55;
	--alx-white: #ffffff;
}

/* ============================================================
   1. CARD
   ============================================================ */

ul.products li.product.alx-card,  li.product.alx-card{
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	background: var(--alx-white);
	border-radius: 16px;
	overflow: hidden;
	list-style: none;
	/* Keeps the white card visible on light page backgrounds.
	   On a navy section (like the original design) you can
	   safely delete these two lines. */
	border: 1px solid #e9e6dd;
	box-shadow: 0 2px 10px rgba(23, 23, 23, 0.04);
}

/* ---------- media / 2-image hover slider ---------- */

.alx-card .alx-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--alx-white);
}

.alx-card .alx-card-link {
	display: block;
	height: 100%;
}

.alx-card .alx-card-track {
	display: flex;
	height: 100%;
	transition: transform 0.6s ease;
}

.alx-card .alx-card-slide {
	flex: 0 0 100%;
	height: 100%;
	padding: 10px;
}

.alx-card .alx-card-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}

/* hover: slide image 1 out, reveal image 2 (only if a 2nd image exists) */
@media (hover: hover) {
	.alx-card:hover .alx-card-track.alx-has-second {
		transform: translateX(-100%);
	}
}

/* ---------- slider dots ---------- */

.alx-card .alx-card-dots {
	
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.25s ease;
	display: none;
}

.alx-card:hover .alx-card-dots {
	opacity: 1;
}

.alx-card .alx-card-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(26, 32, 55, 0.25);
	cursor: pointer;
	transition: background 0.2s ease;
}

.alx-card .alx-card-dots button.is-active {
	background: var(--alx-navy);
}

/* ---------- WooCommerce sale badge, restyled ---------- */

.alx-card .onsale {
	
	background: var(--alx-gold);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
	color: #fff;
	border-radius: 100%;
	z-index:50 !important;
	
}

/* ---------- quick view (eye) button ---------- */

.alx-card .alx-qv-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	background: var(--alx-white);
	color: var(--alx-navy);
	border: 1px solid rgba(26, 32, 55, 0.1);
	box-shadow: 0 4px 14px rgba(23, 23, 23, 0.12);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.alx-card:hover .alx-qv-btn {
	opacity: 1;
	transform: none;
}

.alx-card .alx-qv-btn:hover {
	background: var(--alx-navy);
	color: var(--alx-sand);
}

/* ---------- hover "Add to cart" pill (Woo's own loop button) ---------- */

.alx-card .alx-quick-add {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
}

.alx-card .alx-quick-add .button,
.alx-card .alx-quick-add .added_to_cart {
	pointer-events: auto;
}

.alx-card .alx-quick-add .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 60px;
	border: 2px solid var(--alx-gold);
	background: var(--alx-gold);
	color: var(--alx-navy);
	text-decoration: none;
	transition: opacity 0.25s ease, transform 0.4s ease, box-shadow 0.3s ease;
}

.alx-card .alx-quick-add .button:hover {
	box-shadow: 0 8px 22px rgba(23, 23, 23, 0.25);
}

@media (hover: hover) {
	.alx-card .alx-quick-add .button {
		opacity: 0;
		transform: translateY(10px);
	}

	.alx-card:hover .alx-quick-add .button {
		opacity: 1;
		transform: none;
	}
}

/* Woo's "View cart" link that appears after AJAX add */
.alx-card .alx-quick-add .added_to_cart {
	padding: 10px 20px;
	font-size: 13px;
	border-radius: 60px;
	background: var(--alx-white);
	color: var(--alx-navy);
	border: 1px solid rgba(26, 32, 55, 0.15);
	text-decoration: none;
}

/* Woo's loading spinner state on the button */
.alx-card .alx-quick-add .button.loading {
	opacity: 0.7;
}

.alx-card .alx-quick-add .button.loading::after, .alx-qv-pair .alx-btn.loading::after{
	font-family: WooCommerce;
    content: "\e01c";
    vertical-align: middle !important;
    font-weight: 400;
    position: absolute;
    top: 0.75em;
    right: 0.8em;
    animation: spin 2s linear infinite;
	
}

.alx-card:hover .alx-quick-add .button.added::after, .alx-qv-pair .alx-btn.added::after {
    font-family: WooCommerce;
    content: "\e017";
    margin-left: .53em;
	position: relative;
    z-index: 2;
}

/* ---------- card content ---------- */

.alx-card .alx-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
	color: var(--alx-navy);
	text-align: left;
	background-color: #fafafa;
}

.alx-card .alx-card-vendor {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(26, 32, 55, 0.55);
	text-decoration: none;
}

.alx-card .alx-card-details {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 4px 12px;
	height: 100% !important;
}

.alx-card .alx-card-title {
	order: 1;
	flex: 1 1 55%;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}

@media only screen and (max-width:478px){
	.alx-card .alx-card-title {
		flex-basis: 100%;
	}
}

.alx-card .alx-card-title a {
	color: var(--alx-navy);
	text-decoration: none;
}

.alx-card .alx-card-details .price {
	order: 2;
	margin: 0;
	font-size: 16px !important;
	font-weight: 400;
	color: var(--alx-navy);
	white-space: nowrap;
}

.alx-card .alx-card-details .price del {
	opacity: 0.45;
	margin-right: 6px;
}

.alx-card .alx-card-details .price ins {
	text-decoration: none;
	font-weight: 500;
}

.alx-card .alx-card-details .star-rating {
	order: 3;
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--alx-gold);
}

/* ---------- left-to-right underline on hover ---------- */

.alx-link {
	position: relative;
	text-decoration: none;
}

.alx-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.alx-link:hover::after {
	transform: scaleX(1);
}

/* ============================================================
   2. QUICK VIEW MODAL
   ============================================================ */

.alx-qv-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(23, 23, 23, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.alx-qv {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	pointer-events: none;
}

.alx-qv-inner {
	position: relative;
	width: min(1030px, 100%);
	height: 100%;
	max-height: min(815px, 100%);
	border-radius: 16px;
	overflow: hidden;
	background: var(--alx-navy);
	box-shadow: 0 30px 80px rgba(23, 23, 23, 0.5);
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

body.alx-qv-open .alx-qv-overlay {
	opacity: 1;
	visibility: visible;
}

body.alx-qv-open .alx-qv-inner {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

body.alx-qv-open {
	overflow: hidden;
}

.alx-qv-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
}

/* loading spinner while AJAX fetches the product */
.alx-qv-content.alx-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba(208, 194, 153, 0.25);
	border-top-color: var(--alx-sand);
	border-radius: 50%;
	animation: alx-spin 0.7s linear infinite;
}

@keyframes alx-spin {
	to {
		transform: rotate(360deg);
	}
}

button.single_add_to_cart_button.button.alt.added::after {
    font-family: WooCommerce;
    content: "\e017";
    margin-left: .53em;
}

/* ---------- close button ---------- */

.alx-qv-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(208, 194, 153, 0.12) !important;
    color: var(--alx-sand) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.alx-qv-close:hover {
	background: rgba(208, 194, 153, 0.25);
	transform: rotate(90deg);
}

/* ---------- left: image ---------- */

.alx-qv-media {
	background: var(--alx-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	min-height: 0;
}

.alx-qv-media img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ---------- right: panel ---------- */

.alx-qv-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	color: var(--alx-sand);
	overflow: hidden;
}

.alx-qv-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 40px 44px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.alx-qv-vendor {
	font-size: 13px;
	color: var(--alx-sand);
}

.alx-qv-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

.alx-qv-title {
	margin: 0;
	font-size: 2rem !important;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--alx-gold);
}

.alx-qv-price {
	padding-top: 8px;
	font-size: 20px;
	color: var(--alx-price);
	white-space: nowrap;
}

.alx-qv-price del {
	opacity: 0.5;
	margin-right: 6px;
}

.alx-qv-price ins {
	text-decoration: none;
}

.alx-qv-desc {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(208, 194, 153, 0.9);
}

.alx-qv-desc p {
	margin: 0 0 10px;
}

.alx-qv-desc p:last-child {
	margin-bottom: 0;
}

/* ---------- stock badge ---------- */

.alx-qv-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 60px;
	font-size: 13px;
	color: rgba(26, 32, 55, 0.75);
	background: rgba(255, 255, 255, 0.92);
}

.alx-qv-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--alx-gold);
}

.alx-qv-stock.alx-out-of-stock::before {
	background: #b54e4e;
}

/* ============================================================
   3. SHARED BUTTONS (gold pill / outline pill)
   ============================================================ */

.alx-btn,
.alx-qv .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 13px 30px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	border-radius: 60px !important;
	border: 2px solid var(--alx-gold) !important;
	background: var(--alx-gold) !important;
	color: var(--alx-navy) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: box-shadow 0.3s ease, opacity 0.2s ease !important;
}

.alx-btn:hover,
.alx-qv .single_add_to_cart_button:hover {
	box-shadow: 0 8px 22px rgba(23, 23, 23, 0.25);
	color: var(--alx-navy);
}

.alx-btn-outline {
	background: transparent !important;
	border-color: rgba(208, 194, 153, 0.6) !important;
	color: var(--alx-sand) !important;
}

.alx-btn-outline:hover {
	background: rgba(208, 194, 153, 0.08);
	border-color: var(--alx-sand);
	color: var(--alx-sand);
	box-shadow: none;
}

.alx-btn-small {
	padding: 8px 18px;
	font-size: 13px;
	border-width: 1px;
}

.alx-qv .single_add_to_cart_button.disabled,
.alx-qv .single_add_to_cart_button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.alx-qv-buynow {
	width: 100%;
}

/* ============================================================
   4. ADD-TO-CART FORM INSIDE THE MODAL
   ============================================================ */

.alx-qv-form {
	width: 100%;
}

.alx-qv-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	margin: 0;
	width: 100%;
}

/* hide the default variations table once JS has built the pills */
.alx-qv-form form.alx-has-pills table.variations {
	display: none;
}

.alx-qv-form .single_variation_wrap {
	width: 100%;
}

.alx-qv-form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	width: 100%;
}

.alx-qv-form .woocommerce-variation-price .price {
	font-size: 18px;
	color: var(--alx-price);
}

.alx-qv-form .woocommerce-variation-availability {
	font-size: 13px;
	color: rgba(208, 194, 153, 0.85);
}

.alx-qv-form .woocommerce-variation-availability p {
	margin: 6px 0 0;
}

.alx-qv-form .single_add_to_cart_button {
	flex: 1;
}

/* ---------- variation pills (built by JS from the selects) ---------- */

.alx-qv-option {
	width: 100%;
}

.alx-qv-option-label {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--alx-sand);
}

.alx-qv-option-label b {
	font-weight: 600;
}

.alx-qv-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.alx-pill {
	padding: 10px 18px;
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid rgba(208, 194, 153, 0.3);
	background: transparent;
	color: var(--alx-sand);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.alx-pill:hover {
	border-color: rgba(208, 194, 153, 0.65);
}

.alx-pill.is-selected {
	border-color: var(--alx-sand);
	background: rgba(208, 194, 153, 0.08);
	font-weight: 500;
}

.alx-pill.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ---------- quantity stepper (JS wraps Woo's qty input) ---------- */

.alx-qv .alx-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0 6px;
	border: 1px solid rgba(208, 194, 153, 0.35);
	border-radius: 60px;
}

.alx-qv .alx-qty .quantity {
	margin: 0;
}

.alx-qv .alx-qty input.qty {
	width: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 15px;
	color: var(--alx-sand);
	-moz-appearance: textfield;
	appearance: textfield;
}

.alx-qv .alx-qty input.qty::-webkit-outer-spin-button,
.alx-qv .alx-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.alx-qv .alx-qty-btn {
	width: 32px;
	height: 46px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--alx-sand);
	cursor: pointer;
	transition: color 0.2s ease;
}

.alx-qv .alx-qty-btn:hover {
	color: var(--alx-white);
}

/* hide Woo's reset link (pills can always re-select) */
.alx-qv-form .reset_variations {
	display: none !important;
}

/* ============================================================
   5. SHARE / PAIRS / FOOTER
   ============================================================ */

.alx-qv-share {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
}

.alx-qv-share a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--alx-sand);
	transition: color 0.2s ease, background 0.2s ease;
}

.alx-qv-share a:hover {
	color: var(--alx-white);
	background: rgba(208, 194, 153, 0.12);
}

.alx-qv-pairs {
	width: 100%;
}

.alx-qv-pairs h4 {
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--alx-gold);
	border-bottom: 1px solid rgba(208, 194, 153, 0.2);
}

.alx-qv-pair {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.alx-qv-pair:last-child {
	margin-bottom: 0;
}

.alx-qv-pair img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--alx-white);
	border-radius: 8px;
	padding: 6px;
}

.alx-qv-pair-info {
	flex: 1;
	font-size: 14px;
}

.alx-qv-pair-info a {
	color: var(--alx-sand);
}

.alx-qv-pair-price {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: rgba(208, 194, 153, 0.7);
}

.alx-qv-footer {
	border-top: 1px solid rgba(208, 194, 153, 0.2);
	background: var(--alx-navy);
}

.alx-qv-footer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 44px;
	font-size: 14px;
	color: var(--alx-sand);
	text-decoration: none;
	transition: color 0.2s ease;
}

.alx-qv-footer a:hover {
	color: var(--alx-white);
}

.alx-qv-footer a svg {
	transition: transform 0.3s ease;
}

.alx-qv-footer a:hover svg {
	transform: translateX(5px);
}

/* ============================================================
   6. RESPONSIVE + TOUCH
   ============================================================ */

@media (max-width: 767px) {
	.alx-qv {
		padding: 0;
	}

	.alx-qv-inner {
		max-height: 100%;
		border-radius: 0;
	}

	.alx-qv-content {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		height: 100%;
	}

	.alx-qv-media {
		flex: 0 0 auto;
		min-height: 300px;
		max-height: 340px;
	}

	.alx-qv-panel {
		overflow: visible;
	}

	.alx-qv-scroll {
		overflow: visible;
		padding: 28px 22px;
	}

	.alx-qv-title {
		font-size: 26px;
	}

	.alx-qv-footer a {
		padding: 16px 22px;
	}
}

/* touch devices: no hover, so the controls are always visible */
@media (hover: none) {
	.alx-card .alx-qv-btn,
	.alx-card .alx-quick-add .button {
		opacity: 1;
		transform: none;
	}

	.alx-card .alx-card-dots {
		opacity: 1;
	}
}


/*SLIDER CUSTOM CSS*/

.alx-slider-title {
    color: var(--e-global-color-primary);
    font-weight: 700;
}

/*Add to Stack Btn Css*/

.alx-stack-add{
	display:none !important;
	width:100%;
	margin-top:10px;
	justify-content:center;
	align-items:center;
}

body.alx-has-stack .show-stack-btn .alx-stack-add {
	display: block !important; 
	margin-top: 20px !important; 
	padding: 10px; 
	width: 100% !important; 
	align-self: end;
} 

body.alx-has-stack .show-stack-btn .alx-card .alx-quick-add{
	display: none !important;
}

.alx-stack-add{ 
	order: 3;
}

.alx-qv-pair-info a.alx-link:hover{
	color: #fff !important;
}


/* Desktop: text only */
.mobile-cartbtn { display: none; }

@media (max-width: 767px) {
    .mobile-cartbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
	
    .add_to_cart_button .btn-text,
    .alx-quick-add .btn-text {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
	
	.alx-card .alx-quick-add{
		justify-content: flex-end !important;
	}
	
	.alx-card .alx-quick-add .button{
		padding: 9px !important;

	}
}