@charset "utf-8";
/* Discount / Offer Banner - in page block
 * see page_include/discount_banner.php -> getDiscountBanner('v1')
 * NOT the top offer bar + popup -> see offer_banner.css
 *
 * .discount-banner--v1  twin cards
 * .discount-banner--v2  single panel
 * .discount-banner--v3  gold ribbon
 * .discount-banner--v4  offer panel + CTA
 */

.discount-banner {
	/* scoped - do not move to :root, offer_banner.css owns --offer-* there */
	--db-gold:#D9BC72;
	--db-gold-lt:#F6E7B8;
	--db-gold-dk:#8A6E32;
	--db-panel:#0C0A0B;
	--db-line:rgba(217,188,114,0.35);
	--db-txt:#F3F1EC;
	--db-label:#C8C8D2;
	--db-note:#9A9AA6;

	max-width:950px;
	margin:2.5em auto;
	font-family:Montserrat,Helvetica,Arial,sans-serif;
	text-align:center;
}

/*--- SHARED PARTS ---*/
.discount-banner .db-deals {
	display:flex;
	justify-content:center;
	align-items:stretch;
	gap:24px;
	max-width: 600px;
	margin: 0 auto;
}
.discount-banner .db-deal {
	position:relative; /* dividers are drawn with :before */
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1.2em;
	padding:1.1em 1.8em;
	text-align:left;
}

/* icon - svg is black, so mask it & paint with gold */
.discount-banner .db-icon {
	flex:0 0 auto;
	width:2.5em;
	height:2.5em;
	background:linear-gradient(160deg, #F6E7B8 0%, #D9BC72 45%, #B5904A 100%);
	-webkit-mask-repeat:no-repeat;
	        mask-repeat:no-repeat;
	-webkit-mask-position:center;
	        mask-position:center;
	-webkit-mask-size:contain;
	        mask-size:contain;
}
.discount-banner .db-icon-user {
	-webkit-mask-image:url(../images/icon/user-light.svg);
	        mask-image:url(../images/icon/user-light.svg);
}
.discount-banner .db-icon-cart {
	-webkit-mask-image:url(../images/icon/cart-shopping-light.svg);
	        mask-image:url(../images/icon/cart-shopping-light.svg);
	width:2.9em;
}

/* text block */
.discount-banner .db-txt {
	padding-left:1.2em;
	border-left:1px solid var(--db-line);
}
.discount-banner .db-label {
	display:block;
	font-size:0.8em;
	font-weight:400;
	letter-spacing:0.22em;
	text-transform:uppercase;
	white-space:nowrap;
	color:var(--db-label);
}
.discount-banner .db-save {
	display:block;
	margin-top:0.25em;
	font-size:1.45em;
	font-weight:500;
	letter-spacing:0.05em;
	text-transform:uppercase;
	white-space:nowrap;
	color:var(--db-txt);
}
.discount-banner .db-save b {
	font-weight:700;
	color:var(--db-gold-lt); /* fallback */
	background:linear-gradient(180deg, #F6E7B8 0%, #D9BC72 55%, #C9A24E 100%);
	-webkit-background-clip:text;
	        background-clip:text;
	-webkit-text-fill-color:transparent;
}

/* small print */
.discount-banner .db-note {
	margin:1.2em 0 0;
	font-size:0.88em;
	line-height:1.6;
	color:var(--db-note);
}
.discount-banner .db-note .db-sep {
	padding:0 0.6em;
	color:var(--db-line);
}
.discount-banner .db-note a {
	color:#DCDCE4;
	text-decoration:underline;
	text-underline-offset:4px;
	text-decoration-color:var(--db-line);
}
.discount-banner .db-note a:hover { color:var(--db-gold-lt); text-decoration-color:var(--db-gold); }

/* eyebrow heading (v2 & v4) */
.discount-banner .db-hd {
	margin:0 0 1.1em;
	font-size:0.85em;
	font-weight:500;
	letter-spacing:0.32em;
	text-transform:uppercase;
	color:var(--db-gold-lt);
}
.discount-banner .db-hd b {
	display:block;
	margin-top:0.5em;
	font-family:Cinzel,"Times New Roman",Times,serif;
	font-size:1.9em;
	font-weight:600;
	letter-spacing:0.06em;
	color:var(--db-txt);
}


/*--- V1 - TWIN CARDS ---*/
.discount-banner--v1 .db-deal {
	flex:1 1 0; /* equal halves, like the reference */
	border:1px solid transparent;
	border-radius:18px;
	background:linear-gradient(var(--db-panel), var(--db-panel)) padding-box,
	           linear-gradient(140deg, #4A4029 0%, #8C7C55 32%, #D9C48C 58%, #6E6142 78%, #4A4029 100%) border-box;
	box-shadow:0 8px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}


/*--- V2 - SINGLE PANEL ---*/
.discount-banner--v2 .db-deals {
	gap:0;
	border:1px solid transparent;
	border-radius:14px;
	background:linear-gradient(180deg, #100D0E 0%, #080607 100%) padding-box,
	           linear-gradient(140deg, #4A4029 0%, #8C7C55 32%, #D9C48C 58%, #6E6142 78%, #4A4029 100%) border-box;
	box-shadow:0 8px 24px rgba(0,0,0,0.45);
	overflow:hidden;
}
.discount-banner--v2 .db-deal {
	flex:1 1 0;
	padding:1.5em 1.8em;
}
.discount-banner--v2 .db-deal + .db-deal:before {
	content:"";
	position:absolute;
	top:14%;
	left:0;
	width:1px;
	height:72%;
	background:linear-gradient(180deg, rgba(217,188,114,0) 0%, var(--db-gold) 50%, rgba(217,188,114,0) 100%);
}


/*--- V3 - GOLD RIBBON ---*/
.discount-banner--v3 .db-deals {
	align-items:center;
	gap:0;
	padding:1.4em 1em;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
	border-image:linear-gradient(90deg, rgba(217,188,114,0) 0%, var(--db-gold) 25%, #F6E7B8 50%, var(--db-gold) 75%, rgba(217,188,114,0) 100%) 1;
	background:radial-gradient(ellipse at center, rgba(217,188,114,0.10) 0%, rgba(217,188,114,0) 70%);
}
.discount-banner--v3 .db-lead {
	position:relative;
	flex:0 0 auto;
	margin:0;
	padding-right:2em;
	font-family:Cinzel,"Times New Roman",Times,serif;
	font-size:1.3em;
	font-weight:600;
	letter-spacing:0.08em;
	line-height:1.25;
	text-transform:uppercase;
	text-align:right;
	color:var(--db-gold-lt);
}
.discount-banner--v3 .db-lead span { display:block; font-size:1.5em; color:var(--db-txt); }
.discount-banner--v3 .db-deal { padding:0.4em 1.8em; }
.discount-banner--v3 .db-deal:before,
.discount-banner--v3 .db-lead:after {
	content:"";
	position:absolute;
	top:8%;
	left:0;
	width:1px;
	height:84%;
	background:linear-gradient(180deg, rgba(217,188,114,0) 0%, var(--db-gold) 50%, rgba(217,188,114,0) 100%);
}
.discount-banner--v3 .db-lead:after { left:auto; right:0; }
.discount-banner--v3 .db-lead + .db-deal:before { display:none; } /* lead already draws this edge */
.discount-banner--v3 .db-icon { width:2.1em; height:2.1em; }
.discount-banner--v3 .db-icon-cart { width:2.5em; }
.discount-banner--v3 .db-txt { padding-left:1em; }
.discount-banner--v3 .db-save { font-size:1.3em; }


/*--- V4 - OFFER PANEL + CTA ---*/
.discount-banner--v4 .db-panel {
	padding:2.2em 2em 2em;
	border:1px solid transparent;
	border-radius:14px;
	background:linear-gradient(180deg, #100D0E 0%, #080607 100%) padding-box,
	           linear-gradient(140deg, #4A4029 0%, #8C7C55 32%, #D9C48C 58%, #6E6142 78%, #4A4029 100%) border-box;
	box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.discount-banner--v4 .db-deals { gap:0; }
.discount-banner--v4 .db-deal { flex:1 1 0; padding:0.6em 1.8em; }
.discount-banner--v4 .db-deal + .db-deal:before {
	content:"";
	position:absolute;
	top:6%;
	left:0;
	width:1px;
	height:88%;
	background:linear-gradient(180deg, rgba(217,188,114,0) 0%, var(--db-gold) 50%, rgba(217,188,114,0) 100%);
}
.discount-banner--v4 .db-btn-row { margin:1.8em 0 0; }
.discount-banner--v4 a.btn.db-btn {
	padding:0.85em 2.4em;
	border-radius:100px;
	font-size:1.05em;
	letter-spacing:0.04em;
}
.discount-banner--v4 a.btn.db-btn .db-arrow { display:inline-block; margin-left:0.45em; transition:transform 0.2s linear; }
.discount-banner--v4 a.btn.db-btn:hover .db-arrow { transform:translateX(4px); }
.discount-banner--v4 .db-note { margin-top:1.4em; }


/*--- RESPONSIVE ---*/
@media only screen and (max-width: 900px) {
	.discount-banner { font-size:0.95em; }
	.discount-banner .db-deals { gap:16px; }
	.discount-banner .db-deal { padding:1em 1.4em; }

	/* v3 - lead sits above the row */
	.discount-banner--v3 .db-deals { flex-wrap:wrap; }
	.discount-banner--v3 .db-lead {
		flex:1 0 100%;
		padding:0 0 0.8em;
		text-align:center;
	}
	.discount-banner--v3 .db-lead:after { display:none; }
	.discount-banner--v3 .db-lead span { display:inline; font-size:1.2em; }
}

@media only screen and (max-width: 700px) {
	.discount-banner { margin:2em auto; }

	/* every variant stacks - icon left, text right, full width */
	.discount-banner .db-deals { flex-direction:column; align-items:stretch; }
	.discount-banner .db-deal { justify-content:flex-start; padding:1.1em 1.4em; }
	.discount-banner .db-icon { width:2.2em; height:2.2em; }
	.discount-banner .db-icon-cart { width:2.5em; }

	/* vertical dividers become horizontal rules */
	.discount-banner--v2 .db-deal + .db-deal:before,
	.discount-banner--v3 .db-deal + .db-deal:before,
	.discount-banner--v4 .db-deal + .db-deal:before {
		top:0;
		left:8%;
		width:84%;
		height:1px;
		background:linear-gradient(90deg, rgba(217,188,114,0) 0%, var(--db-gold) 50%, rgba(217,188,114,0) 100%);
	}

	.discount-banner .db-hd b { font-size:1.6em; }
	.discount-banner .db-note { font-size:0.85em; }
	.discount-banner .db-note .db-sep { display:none; }
	.discount-banner .db-note a { display:block; margin-top:0.5em; }

	.discount-banner--v3 .db-deals { padding:1.2em 0.5em; }
	.discount-banner--v3 .db-deal { padding:1em 1.4em; }
	.discount-banner--v4 .db-panel { padding:1.8em 1.2em 1.6em; }
}

@media only screen and (max-width: 420px) {
	.discount-banner { font-size:0.9em; }
	.discount-banner .db-deal { gap:0.9em; padding:1em; }
	.discount-banner .db-txt { padding-left:0.9em; }
	.discount-banner .db-save { font-size:1.35em; }
	.discount-banner .db-label { letter-spacing:0.16em; }
}