/* Theme:  DeepTide */

:root {

	/* ── Border Radius ──────────────────────────────────────────────────────── */

	--bdr-rds: 0;
	--bdr-tl-rds: 1;
	--bdr-tr-rds: 1;
	--bdr-br-rds: 1;
	--bdr-bl-rds: 1;

	/* ── Card Border Radius ─────────────────────────────────────────────────── */

	--bdr-rds-crd: 1rem;
	--bdr-tl-rds-crd: 1;
	--bdr-tr-rds-crd: 1;
	--bdr-br-rds-crd: 1;
	--bdr-bl-rds-crd: 1;

	/* ── Card Box Shadow ────────────────────────────────────────────────────── */

	--bx-sdw-crd-x:   0rem;
	--bx-sdw-crd-y:   0rem;
	--bx-sdw-crd-blr: 0rem;
	--bx-sdw-crd-o:   0;

	/* ── Button V1 Padding ──────────────────────────────────────────────────── */

	--btn-v1-pd-t: 1.125rem;
	--btn-v1-pd-b: 1.125rem;
	--btn-v1-pd-l: 1.875rem;
	--btn-v1-pd-r: 1.875rem;
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l);

	/* ── Button V1 Border Radius ────────────────────────────────────────────── */

	--btn-v1-bdr-rds-tl:0rem;
	--btn-v1-bdr-rds-tr:0rem;
	--btn-v1-bdr-rds-br:0rem;
	--btn-v1-bdr-rds-bl:0rem;
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl);

	/* ── Button V1 Box Shadow ───────────────────────────────────────────────── */

	--btn-v1-bx-sdw-x:   0rem;
	--btn-v1-bx-sdw-y:   0rem;
	--btn-v1-bx-sdw-blr: 0rem;
	--btn-v1-bx-sdw-o:   0;

	/* ── Button V1 Border (Alt Variant) ─────────────────────────────────────── */

	--btn-v1-bdr-w:   1px;
	--btn-v1-bdr-stl: solid;

	/* ── Button V2 Padding ──────────────────────────────────────────────────── */

	--btn-v2-pd-t: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
	--btn-v2-pd-b: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
	--btn-v2-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Left'  } */
	--btn-v2-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Right'  } */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* ── Button V2 Border Radius ────────────────────────────────────────────── */

	--btn-v2-bdr-rds-tl: 0rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 0rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 0rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 0rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* ── Button V2 Box Shadow ───────────────────────────────────────────────── */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0.25rem; /* { min: 0,  max: 2, step: 0.05, friendly: 'Button V2 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style'  } */

	/* ── Flair (Shapes & Decorative) ────────────────────────────────────────── */

	--flr-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 50' fill='none'><path d='M27.75 0.838501L54.75 14.3385V35.3385L27.75 48.8385L0.75 35.3385V14.3385L27.75 0.838501Z' stroke='black' stroke-width='1.5'/></svg>"); /* { friendly: 'Flair Mask Image (Data URI)', group: 'Shapes & Decorative' } */

}


[class*="fnt_"] {
	em {
		font-style: normal;
		color: var(--fnt-t-k);
	}
}

[data-colors*="-dark"] {
	.fnt_t-k {
		--title-color: var(--fnt-t-1);

	}

}

section.bnr.v1 {
	--bnr-v1-deco-h: 0 !important;
	--bnr-v1-wave-h: 56% !important;
	padding-bottom: var(--bnr-tls-pd-v-bt-clc) !important;

	.wv-bnr {
		bottom: -1% !important;
	}
}

.bnr-v1-deco {
       display: none !important;
    }

.flr_hd > svg {
	fill: none;
}

body {
	font-feature-settings: 'liga' off, 'clig' off;
}

/* ── Bottom Decoration (wave divider) ──────────────────────────────────── */

.btm-deco {
	position: absolute;
	bottom: -1px;
	z-index: 0;
	width: 100%;

	svg {
		width: 100%;
		height: 18.722rem;
		display: block;
	}

	@media screen and (max-width: 1279px) {
		margin-top: 2rem;
	}
}

section:has(> .btm-deco) {
	&:has(+ section[data-colors="primary-light"])   { --shape-clr-1-dyn: var(--lt-bg); }
	&:has(+ section[data-colors="alternate-light"]) { --shape-clr-1-dyn: var(--lt-alt-bg); }
	&:has(+ section[data-colors="primary-dark"])    { --shape-clr-1-dyn: var(--dk-bg); }
	&:has(+ section[data-colors="alternate-dark"])  { --shape-clr-1-dyn: var(--dk-alt-bg); }
}

/* When the btm-deco panel is the last thing in <main>, its visual neighbor is
   the first section of <footer>. Must set the var directly on the section
   (the @scope rule in color-structure.css sets --shape-clr-1-dyn on the
   section element itself, so a value set on a parent like <form> would be
   shadowed). Two paired selectors handle "section is direct last-child of
   main" and "section is wrapped (e.g. in <form>) as main's last-child". */
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-bg); }
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-alt-bg); }
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-bg); }
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-alt-bg); }

/* ── Wave Banner Decoration (banner wave divider) ──────────────────────── */

.wv-bnr {
	--wv-bnr-grad-start: var(--background);
	--wv-bnr-grad-end: var(--inner-theme);

	pointer-events: none;

	svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.wv-bnr-stop-start {
		stop-color: var(--wv-bnr-grad-start);
	}

	.wv-bnr-stop-end {
		stop-color: var(--wv-bnr-grad-end);
	}
}

/* Content Info Callout */
.cnt-info {
	border-radius: 1.25rem;
	padding: 2.5rem 3.125rem;
	text-align: center;

	&:is(p), p {
		margin: 0;
		font-weight: 600;
		line-height: 1.75;
	}

	@media screen and (max-width: 699px) {
		padding: 1.5rem;
	}
}

/* Bullet Styles */
.cnt-stl {
	ul.spl-lst li {
		padding-left: 2.75rem;
		line-height: 1.7;
	}

	ul {
		li {
			&::before {
				left: 0;
				top: 0.8em;
				width: 1rem;
				height: 0.2rem;
				background-color: currentColor;
				color: var(--blt-clr);
				mask: url("data:image/svg+xml;utf8,<svg width="64" height="8" viewBox="0 0 64 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H64V8H0V0Z" /></svg>");
				-webkit-mask: url("data:image/svg+xml;utf8,<svg width="64" height="8" viewBox="0 0 64 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H64V8H0V0Z" fill="#A0070B"/></svg>");
				mask-repeat: no-repeat;
				-webkit-mask-repeat: no-repeat;
				mask-size: contain;
				-webkit-mask-size: contain;
				border-radius: 0;
			}
		}
	}
}


/* Coupon Styles */

.cpn-v2-inf::before, .cpn-v2-inf::after {
	border-radius: 0% !important;
	transform: rotate(45deg);
}

*:has( > .cpn-itm ) {
	container-type: inline-size;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--cpn-udr-o)) var(--cpn-udr-s);
		background: var(--cpn-udr-clr, #ffce34);
		border-radius: var(--bdr-rds, 1rem);
		z-index: 0;
	}
}

.cpn-ntch {
	position: absolute;
	top: var(--cpn-ntch-y);
	left: calc(-1 * var(--pd-h) );
	pointer-events: none;
	z-index: 2;
	width: calc(100% + (var(--pd-h) * 2));
	--bdr-stl: dashed;
	--bdr-w: 2px;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		translate: 0 -50%;
		width: calc(1rem * 2);
		height: calc(1rem * 2);
		background-color: var(--cpn-ntch-bg, var(--main-bg));
		transform: rotate(45deg);
	}

	&::before {
		left: calc(-1.1 * 1rem);
	}

	&::after {
		right: calc(-1.1 * 1rem);
	}
}

ul:has(.cpn-itm) {
	padding-top: var(--cpn-v1-lgo-ovlp, 5.5rem);
    padding-bottom: 1.8rem;
}

li:has(.cpn-itm) {
	flex-shrink: 0;
	position: relative;
	overflow: visible;


	/* Yellow rotated blob behind each card */
	&::before {
		content: '';
		position: absolute;
		inset: -1% 8% -2% 3%;
		background-color: var(--buttons);
		border-radius: var(--bdr-rds);
		transform: rotate(-5.5deg);
		z-index: 0;
	}

	
}

.cpn-itm {
	position: relative;
	z-index: 1;
	padding: var(--cpn-bdr-pd);

	&::after {
		content: '';
		position: absolute;
		inset: var(--cpn-bdr-pd);
		z-index: 1;
		border-width: var(--cpn-bdr-w);
		border-style: var(--cpn-bdr-s);
		border-radius: inherit;
		pointer-events: none;
	}

	 .lgo {
        margin-top: calc(var(--cpn-v1-lgo-ovlp, 5.5rem) * -1);
        position: relative;
        z-index: 2;
    }
		
	&.no-bg:after {
		inset: 0;
	}
	
	.act .icn {
		font-size: var(--cpn-act-icn-s);
	}
	
	.lgo {
		display: var(--cpn-lg-dsp);
		max-width: var(--cpn-lg-mx-wd-clc);
		margin-inline: auto;
	}
	
	.icn.ft {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50%;
		font-size: 2rem;
	}
	
	&.no-bg {
		padding: var(--cpn-bdr-pd);
		
		&::after {
			inset: 0;
		}
	}
	
}

@media print {
	header,
	footer {
		display: none;
		visibility: hidden;
	}
}

@container (width > 900px) {
	.cpn-itm .pd_v {
		--pd-v: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
	}
	
	.cpn-itm div.cpn-lyt {
		text-align: left;
		display: grid;
		column-gap: var(--flx-gap);
		grid-template-columns: calc(50% - var(--cpn-ttl-w)) 1fr;
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dsc'
			'act dsc'
			'act dt'
			'act dis';
			
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			height: 100%;
			width: var(--bdr-w);
			left: calc( 50% - var(--cpn-ttl-w) + ( var(--flx-gap) * 0.5 ) );
			background-color: hsl(from var(--text-color) h s l / 0.5);
			transform: translateY(-50%);
		}
			
		.prc {
			grid-area: prc;
			text-align: center;
			align-self: center;
			
			&:nth-last-child(6) {
				align-self:flex-end;
			}
		}
		
		.ttl {
			grid-area: ttl;
			margin-top: 0;
		}
	
		.dsc {
			grid-area: dsc;
		}
		
		.dt {
			grid-area: dt;
		}
		
		.dis {
			grid-area: dis;
		}
			
		.act {
			grid-area: act;
			justify-content: center;
			
			
			
		}
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(3) {
		grid-template-areas:
			'prc ttl'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dt ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):not( :has( .dt ) ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dis'
			'prc act';
	}
}