/* Coupon Tools */
main {
	--cpn-ttl-w: 3rem; /* { min: 0, max: 10, step: 1, friendly: 'Coupon Title Width' } */ 
	
	--cpn-bdr-pd: 1.167rem; /* { min: 0.25, max: 2, step: 0.001, friendly: 'Coupon Border Padding' } */ 
	--cpn-bdr-w: 2px; /* { min: 1, max: 5, step: 1, friendly: 'Coupon Border Width' } */  
	--cpn-bdr-s: dashed; /* { friendly: 'Coupon Border Style' } */ 
	
	--cpn-act-icn-s: .89rem; /* { min: .8, max: 3, step: 0.001, friendly: 'Action Icon Size' } */ 
	
	--cpn-lg-mx-wd: 265; /* { min: 50, max: 500, step: 10, friendly: 'Coupon Logo Max Width Desktop' } */
	--cpn-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Coupon Logo Max Width Mobile' } */
	--cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((100vw - 320px) / (1920 - 320))); /* { readonly: true } */
	
	--cpn-lg-dsp: flex;  /* {friendly: 'Coupon Logo Display'} */
}

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

.cpn-itm {
	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;
	}
		
	&.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';
	}
}