/**
 * Skin: white and translucent red.
 *
 * Loaded last on every front-end page, so it re-colours the site without
 * touching the component files underneath. It deliberately leaves the
 * announcement bar, the header and the hero banner alone.
 *
 * The look:
 *   - light sections are white, alternating with a faint red blush;
 *   - dark sections (newsletter, CTA, footer) are a deep maroon gradient;
 *   - cards float: a thin red-tinted edge, a soft red glow, lifting on hover;
 *   - solid buttons are a translucent red gradient instead of flat black.
 *
 * Red is always used see-through (rgba), never as a flat solid fill.
 *
 * @package maaz-dev
 */

:root {
	/* The brand red as an RGB triplet, so every tint below is one rgba(). */
	--skin-red: 139, 0, 0;
	--skin-red-bright: 190, 24, 24;

	--skin-blush: #fff6f6;
	--skin-blush-2: #fdeeee;

	--skin-maroon: linear-gradient(100deg, #3a0306 0%, #520c0c 55%, #661512 100%);
	--skin-maroon-deep: linear-gradient(160deg, #22020a 0%, #350508 45%, #4b0b0b 100%);

	--skin-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 247, 0.96) 100%);
	--skin-card-edge: rgba(var(--skin-red), 0.12);
	--skin-card-edge-hover: rgba(var(--skin-red), 0.28);

	--skin-glow:
		0 0 0 1px rgba(255, 255, 255, 0.6) inset,
		0 1px 2px rgba(var(--skin-red), 0.06),
		0 10px 28px -10px rgba(var(--skin-red), 0.22),
		0 0 18px rgba(var(--skin-red-bright), 0.05);
	--skin-glow-hover:
		0 0 0 1px rgba(255, 255, 255, 0.6) inset,
		0 2px 6px rgba(var(--skin-red), 0.08),
		0 22px 44px -14px rgba(var(--skin-red), 0.38),
		0 0 28px rgba(var(--skin-red-bright), 0.14);

	--skin-btn: linear-gradient(135deg, rgba(var(--skin-red), 0.92) 0%, rgba(var(--skin-red-bright), 0.84) 100%);
	--skin-btn-hover: linear-gradient(135deg, rgba(var(--skin-red), 1) 0%, rgba(var(--skin-red-bright), 0.95) 100%);
	--skin-btn-shadow: 0 8px 20px -8px rgba(var(--skin-red), 0.55);
	--skin-btn-shadow-hover: 0 12px 26px -8px rgba(var(--skin-red), 0.7), 0 0 16px rgba(var(--skin-red-bright), 0.25);

	/* Softer, red-tinted neutrals for dividers across every page. */
	--rlr-border: rgba(var(--skin-red), 0.14);
	--rlr-border-soft: rgba(var(--skin-red), 0.1);
	--rlr-border-light: rgba(var(--skin-red), 0.09);
	--rlr-border-lighter: rgba(var(--skin-red), 0.08);
	--rlr-surface-50: #fffafa;
	--rlr-surface-100: var(--skin-blush);
	--rlr-surface-compare: rgba(var(--skin-red), 0.06);
}

/* ==========================================================================
   1. Section backgrounds (homepage presets)
   ========================================================================== */

.rlr-sec.rlr-sec--white {
	--sec-bg: #ffffff;
	--sec-border: rgba(var(--skin-red), 0.1);
	background:
		radial-gradient(ellipse 60% 50% at 100% 0%, rgba(var(--skin-red), 0.05), transparent 70%),
		#ffffff;
}

.rlr-sec.rlr-sec--grey,
.rlr-sec.rlr-sec--offwhite {
	--sec-bg: var(--skin-blush);
	--sec-border: rgba(var(--skin-red), 0.12);
	background:
		radial-gradient(ellipse 70% 60% at 0% 0%, rgba(var(--skin-red), 0.06), transparent 70%),
		linear-gradient(180deg, var(--skin-blush) 0%, var(--skin-blush-2) 100%);
}

/*
 * Homepage rhythm: light sections strictly alternate white and blush, so no
 * two neighbours ever share a colour and merge into one block. (The hero is
 * the first child, so the first section after it is white.) Maroon sections
 * and the CTA keep their own look.
 */
.site-main--front > .rlr-sec:not(.rlr-sec--dark):not(.cta-banner):not(.newsletter):nth-child(even) {
	--sec-bg: #ffffff;
	background:
		radial-gradient(ellipse 60% 50% at 100% 0%, rgba(var(--skin-red), 0.05), transparent 70%),
		#ffffff;
}

.site-main--front > .rlr-sec:not(.rlr-sec--dark):not(.cta-banner):not(.newsletter):nth-child(odd) {
	--sec-bg: var(--skin-blush);
	background:
		radial-gradient(ellipse 70% 60% at 0% 0%, rgba(var(--skin-red), 0.06), transparent 70%),
		linear-gradient(180deg, var(--skin-blush) 0%, var(--skin-blush-2) 100%);
}

/*
 * Section dividers: the flat 4px red rules become a thin line of light that
 * fades out at both ends.
 */
.rlr-sec {
	border-top: 0;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(var(--skin-red), 0) 0%, rgba(var(--skin-red), 0.35) 50%, rgba(var(--skin-red), 0) 100%) 1;
}

.rlr-sec.rlr-sec--dark {
	--sec-card-bg: rgba(255, 255, 255, 0.06);
	--sec-border: rgba(255, 255, 255, 0.12);
	--sec-highlight-bg: rgba(255, 255, 255, 0.08);
	--sec-text: rgba(255, 255, 255, 0.78);
	background: var(--skin-maroon);
}

/* ==========================================================================
   2. Floating cards
   ========================================================================== */

.product-card,
.col-product-card,
.cart-rec-card,
.article-product-card,
.blog-card,
.blog-grid-card,
.search-card,
.why-us__card,
.testimonials__card,
.collection-card,
.error-card,
.certifications__badge,
.cart-summary__inner,
.sidebar-widget--newsletter {
	background: var(--skin-card-bg);
	border: 1px solid var(--skin-card-edge);
	box-shadow: var(--skin-glow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover,
.col-product-card:hover,
.cart-rec-card:hover,
.article-product-card:hover,
.blog-card:hover,
.blog-grid-card:hover,
.search-card:hover,
.why-us__card:hover,
.testimonials__card:hover,
.collection-card:hover,
.certifications__badge:hover {
	transform: translateY(-6px);
	border-color: var(--skin-card-edge-hover);
	box-shadow: var(--skin-glow-hover);
}

/* Image tiles inside cards get a faint blush instead of flat grey. */
.product-card__image-wrap,
.col-product-card__image-wrap,
.related-product-card__image-wrap,
.search-card__image-wrap {
	background: linear-gradient(180deg, #ffffff 0%, var(--skin-blush) 100%);
}

/* Related products are bare links, so only their image tile floats. */
.related-product-card__image-wrap {
	border: 1px solid var(--skin-card-edge);
	box-shadow: var(--skin-glow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.related-product-card:hover .related-product-card__image-wrap {
	transform: translateY(-4px);
	box-shadow: var(--skin-glow-hover);
}

/* Certification logos sit in a faint blush frame. */
.certifications__badge-logo {
	background: linear-gradient(180deg, #ffffff 0%, var(--skin-blush) 100%);
	border: 1px solid rgba(var(--skin-red), 0.06);
}

/* Collection tiles are photos, so they get the glow as a frame only. */
.feat-col__card {
	border: 1px solid var(--skin-card-edge);
	box-shadow: var(--skin-glow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feat-col__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--skin-glow-hover);
}

.feat-col__card-overlay {
	background: linear-gradient(180deg, rgba(58, 3, 6, 0) 35%, rgba(58, 3, 6, 0.55) 70%, rgba(40, 2, 4, 0.85) 100%);
}

/* Cards on a maroon section turn to frosted glass. */
.rlr-sec--dark .why-us__card,
.rlr-sec--dark .testimonials__card,
.rlr-sec--dark .blog-card,
.rlr-sec--dark .product-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Feature images and panels get the same soft red lift. */
.rlt-explainer__img-wrap,
.comparison__table,
.comparison__image {
	box-shadow: var(--skin-glow);
	border-color: var(--skin-card-edge);
}

.rlt-explainer__badge {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--skin-card-edge);
	box-shadow: var(--skin-glow-hover);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Accordions: each question is its own soft card, so the list loses its frame. */
.faq__list,
.collection-faqs__list,
.product-faqs__list {
	border: none;
	border-radius: 0;
	overflow: visible;
	gap: 12px;
}

.faq__item,
.collection-faq__item,
.product-faq__item,
.article-faq__item {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--skin-card-edge);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px -10px rgba(var(--skin-red), 0.25);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq__item:last-child,
.collection-faq__item:last-child,
.product-faq__item:last-child {
	border-bottom: 1px solid var(--skin-card-edge);
}

.faq__item.is-open,
.faq__item:hover,
.collection-faq__item:hover,
.product-faq__item:hover,
.article-faq__item:hover {
	background: #ffffff;
	border-color: var(--skin-card-edge-hover);
	box-shadow: var(--skin-glow-hover);
}

/* Comparison table: the "our brand" column as a see-through red band. */
.comparison__row:hover {
	background: rgba(var(--skin-red), 0.03);
}

/* ==========================================================================
   3. Buttons: translucent red instead of flat black
   ========================================================================== */

.product-card__btn,
.col-product-card__btn,
.col-product-card__quick-btn,
.comparison__btn,
.rlt-explainer__btn--primary,
.newsletter__btn,
.product-form__add-btn,
.cart-summary__checkout-btn,
.collection-empty__btn,
.search-empty__btn,
.cart-empty__btn,
.price-filter__btn,
.blog-newsletter-form__btn,
.sidebar-newsletter-form__btn {
	background: var(--skin-btn);
	border-color: transparent;
	color: #ffffff;
	box-shadow: var(--skin-btn-shadow);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card__btn:hover,
.col-product-card__btn:hover,
.col-product-card__quick-btn:hover,
.comparison__btn:hover,
.rlt-explainer__btn--primary:hover,
.newsletter__btn:hover,
.product-form__add-btn:hover,
.cart-summary__checkout-btn:hover,
.collection-empty__btn:hover,
.search-empty__btn:hover,
.cart-empty__btn:hover,
.price-filter__btn:hover,
.blog-newsletter-form__btn:hover,
.sidebar-newsletter-form__btn:hover {
	background: var(--skin-btn-hover);
	color: #ffffff;
	box-shadow: var(--skin-btn-shadow-hover);
	transform: translateY(-1px);
}

/* Outline buttons keep their outline, in see-through red. */
.rlt-explainer__btn--secondary,
.before-after__header-btn {
	border-color: rgba(var(--skin-red), 0.35);
	color: rgb(var(--skin-red));
	background: rgba(var(--skin-red), 0.03);
}

.rlt-explainer__btn--secondary:hover,
.before-after__header-btn:hover {
	border-color: rgba(var(--skin-red), 0.7);
	background: rgba(var(--skin-red), 0.08);
	color: rgb(var(--skin-red));
}

.collection-pagination__btn--active,
.search-pagination__btn--active,
.blog-pagination__btn--active {
	background: var(--skin-btn);
	border-color: transparent;
	color: #ffffff;
}

/* ==========================================================================
   4. The closing run: CTA card, newsletter, footer

   The CTA, newsletter and footer sit one after another at the foot of every
   page. All three in maroon read as one block, so each gets its own look:
   the CTA is a maroon card floating on white, the newsletter is a light
   blush band, and only the footer stays full maroon.
   ========================================================================== */

/* CTA: a floating maroon card on a white band. */
.cta-banner {
	--sec-bg: #ffffff;
	position: relative;
	background:
		radial-gradient(ellipse 60% 80% at 50% 100%, rgba(var(--skin-red), 0.06), transparent 70%),
		#ffffff;
	border: 0;
	border-image: none;
}

.cta-banner__inner {
	position: relative;
	width: calc(100% - 64px);
	max-width: calc(1400px - 64px);
	margin: 0 auto;
	padding: 44px 48px;
	border-radius: 24px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 45% 110% at 88% 50%, rgba(255, 90, 90, 0.22), transparent 70%),
		var(--skin-maroon);
	border: 1px solid rgba(255, 120, 120, 0.25);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 24px 50px -20px rgba(var(--skin-red), 0.55),
		0 0 36px rgba(var(--skin-red-bright), 0.14);
}

.cta-banner__title {
	color: #ffffff;
}

.cta-banner__desc {
	color: rgba(255, 255, 255, 0.82);
}

.cta-banner__btn {
	background: rgba(255, 255, 255, 0.95);
	color: rgb(var(--skin-red));
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
}

.cta-banner__btn:hover {
	background: #ffffff;
	color: rgb(var(--skin-red));
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 768px) {

	.cta-banner__inner {
		width: calc(100% - 32px);
		padding: 32px 24px;
		border-radius: 18px;
	}
}

/* Newsletter: a light blush band with dark text, between the card and footer. */
.rlr-sec.newsletter {
	--sec-title: var(--rlr-ink);
	--sec-text: var(--rlr-text-muted);
	--sec-accent: rgb(var(--skin-red));
	background:
		radial-gradient(ellipse 50% 70% at 50% 0%, rgba(var(--skin-red), 0.08), transparent 70%),
		linear-gradient(180deg, var(--skin-blush) 0%, var(--skin-blush-2) 100%);
	border-top: 1px solid rgba(var(--skin-red), 0.1);
	border-bottom: 0;
	border-image: none;
}

.newsletter__input-wrap {
	border: 1px solid var(--skin-card-edge);
	box-shadow: var(--skin-glow);
}

.newsletter__input-wrap:focus-within {
	border-color: rgba(var(--skin-red), 0.45);
	box-shadow: var(--skin-glow-hover);
}

/* On phones the form stacks: the field becomes its own white box. */
@media screen and (max-width: 768px) {

	.newsletter__input-wrap,
	.newsletter__input-wrap:focus-within {
		border: none;
		box-shadow: none;
	}

	.newsletter__input {
		flex: none;
		height: 52px;
		background: #ffffff;
		color: var(--rlr-ink);
		border: 1px solid var(--skin-card-edge);
		box-shadow: var(--skin-glow);
	}

	.newsletter__input:focus {
		border-color: rgba(var(--skin-red), 0.45);
	}

	.newsletter__input::placeholder {
		color: var(--rlr-text-faint);
	}
}

.newsletter__privacy {
	color: var(--rlr-text-soft);
}

.newsletter__social-link {
	color: rgb(var(--skin-red));
	background: rgba(var(--skin-red), 0.08);
}

.newsletter__social-link:hover {
	color: #ffffff;
	background: var(--skin-btn);
}

/*
 * Footer. Its colours are Customizer values handed over as --ft-* custom
 * properties; the background and dividers are set here so the maroon
 * gradient replaces the flat colour.
 */
.footer {
	background: var(--skin-maroon-deep);
	border-top: 1px solid rgba(255, 90, 90, 0.18);
}

.footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.footer__col-title {
	color: #ffffff;
}

.footer__links a:hover,
.footer__contact-link:hover {
	color: #ff8a8a;
}

.footer__tagline {
	color: #ff8a8a;
}