/* coupon-tools.css */
/* Coupon Tools */
main {
	--cpn-ttl-w: 3rem; /* { min: 0, max: 10, step: 1, friendly: 'Coupon Title Width' } */

	--cpn-bdr-pd: 0rem; /* { 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: none; /* { 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)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	--cpn-lg-dsp: flex;  /* {friendly: 'Coupon Logo Display'} */

	--cpn-ntch-r: 1.667rem;  /* { min: 10, max: 40, step: 1, friendly: 'Coupon Notch Radius' } */
	--cpn-ntch-y: 78%;   /* { min: 50, max: 95, step: 1, friendly: 'Coupon Notch Position' } */

	--cpn-udr-clr: #ffce34;  /* { friendly: 'Coupon Underlay Color' } */
	--cpn-udr-s: 12px;   /* { min: 0, max: 50, step: 1, friendly: 'Coupon Underlay Side Inset' } */
	--cpn-udr-o: 14px;   /* { min: 0, max: 30, step: 1, friendly: 'Coupon Underlay Overflow' } */
}

/* forms.css */

/* Form Styles */
fieldset {		
	min-inline-size: auto;
	border: none;
	padding: 0;
	margin: 0;
	
	legend {
		padding: 0;
	}
	
	ul {
	    flex-wrap: wrap;
	}
}

label {
	display: block;
	text-align: left;
	transition: color var(--g-trn-sp) var(--g-trn-tf) 0s;
}


/* Form Input Styles */
input, textarea, select {
	border: 0;
	width: 100%;
	outline: none;
	color: inherit;
	font-size: inherit;
	font-weight: normal;
	font-family: inherit;
	line-height: inherit;
	text-transform: none;
	background-color: transparent;
	line-height: var(--fnt-frm-lh);
}

select,
input[type='search'] {
	appearance: none;
}

textarea {
	resize: none;
	overflow: auto;
	min-height: 4.5rem;
}

:invalid {
	box-shadow: none;
}

.inp-mrk,
.input-text {
	position: relative;
}

.input-text #Consent + small {
    text-wrap: balance;
}

[class*="ta_"] {
	.input-text #Consent + small {
		text-align: center;
	}

	@media screen and (min-width:1280px) {
		&[class*="l-1280"] {
			.input-text #Consent + small {
				text-align: left;
			}
		}

		&[class*="r-1280"] {
			.input-text #Consent + small {
				text-align: right;
			}
		}
	}
	
}

.input-text  {
	text-align: left;
	font-size: 1rem;
	background-clip: padding-box !important;
	
	:is(input, select, textarea) {
		border-width: var(--frm-bdr-w);
		border-style: var(--frm-bdr-stl);
		border-radius: var(--frm-bdr-rds);
		transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
		padding: 1em;
	}
	
	&:has( > svg ) :is(input, select, textarea) {
		padding-right: 3em;
	}

	select {
		 option {
			background-color: var(--main-bg);
			color: var(--text);
		}
	}

	:is(input, select, textarea)::placeholder,
	select:has(option[value=""]:checked) {
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.175rem;
		text-transform: uppercase;
		opacity: 1;
	}

	label {

		&.abs {
			top: 1em;
			left: 1em;
			opacity: 0;
			pointer-events: none;
			transform: scale(1);
			transform-origin: 0 50%;
			transition: transform var(--g-trn-sp) var(--g-trn-tf) 0s, top var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
		}

	}
	
	> svg {
		bottom: calc(50% - .5em);
		right: 1em;
		position: absolute;
		pointer-events: none;
		color: var(--link-color);
	}
}

/* Form Checkbox Styles */

.inp-mrk {
	
	.input-text {
		border: 0;
		padding: 0;
	}
	
	input {
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		cursor: pointer;
		-webkit-appearance: none;
		z-index: 3;
		
		&:checked + label.replace:before {
			opacity: 1;
			transform: none;
		}
		
		&[type=radio] + label.replace {
			border-radius: 50%;
		}
		
	}
	
	label {
		user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		
		&.toggle,
		&.replace {
			flex: 0 0 auto;
			cursor: pointer;
			
			+ label {
				margin: 0;
				line-height: 1.55;
				position: relative;
				padding-left: .625em;	
			}
		}
		
		&.replace {
			margin: 0;
			width: 1.5em;
			height: 1.5em;
			border-width: 1px;
			position: relative;
			border-style: solid;
			transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
			
			&::before {
				content: '';
				top: 4px;
				left: 4px;
				right: 4px;
				bottom: 4px;
				opacity: 0;
				position: absolute;
				transform: scale(.7);
				border-radius: inherit;
				transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, transform var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
			}
		}
	}
}

/* Ui-Condidional */
html:not(.cms-content) .ui-conditional-panel:not(.active) {
	display: none;
	visibility: hidden;
}


/* Form Colors */
@scope (form) to (.inp-mrk) {
	
	.input-text {
		--text-color: var(--text);
		--background: var(--white);

		:is(input, select, textarea) {
			color: var(--text-color);
			border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
			background: var(--background);
		}
		
		label.abs {
			color: var(--text-color);
		}
		
	}

	.focused .input-text :is(input, select, textarea) {
		border-color: var(--highlight-color) !important;
	}
	
	.invalid .input-text :is(input, select, textarea) {
		border-color: var(--invalid-color) !important;
	}
	
	.valid .input-text :is(input, select, textarea) {
		border-color: var(--valid-color);
	}
	
}

.inp-mrk label.replace {
	border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk input:checked + label.replace {
	border-color: var(--link-color);
}

.inp-mrk label.replace.disabled,
.inp-mrk input:disabled + label.replace {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk label.replace.disabled::before,
.inp-mrk input:disabled + label.replace::before {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk label.replace::before {
	background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

.inp-mrk input:checked + label.replace::before {
	background-color: var(--link-color);
}

.inp-mrk label.replace + label,
.inp-mrk label.toggle + label {
	color: var(--text-color);
}

.inp-mrk label.replace.disabled + label,
.inp-mrk input:disabled + label.replace + label {
	color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

/* content-v2.css */
.cnt.v2 {
    aside > * + * {
        margin-top: var(--sp-vm-clc);
    }
}

/* side-nav.css */
.sdnv {
    --sdnv-lnk-pd: 1.125rem;
    --sdnv-lnk-rds: 0.625rem;
    --sdnv-hvr-bg: rgba(255, 255, 255, 0.12);
    --sdnv-hvr-bdr: rgba(237, 237, 237, 0.08);
    --sdnv-cpn-gap: 8rem;


    .sdnv-link {
        padding: var(--sdnv-lnk-pd);
        border: 1.5px solid transparent;
        border-radius: var(--sdnv-lnk-rds);
        color: hsl(from var(--text-color) h s l / 0.8);
        text-decoration: none;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;

        .sdnv-arr {
            color: var(--accent);
            width: 1em;
            height: 1em;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &.active,
        &:hover,
        &:focus-visible {
            background-color: var(--sdnv-hvr-bg);
            border-color: var(--sdnv-hvr-bdr);
            color: var(--text-color);

            .sdnv-arr {
                opacity: 1;
            }
        }
    }

    .sdnv-cpn {
        margin-top: var(--sdnv-cpn-gap);
    }
}

/* photo-catalog-v7.css */
/* Photo Catalog V7 — intro copy + spec cards, then two tag-driven feeds
   (technical illustrations and colour swatches). No tabs, no brochure button. */

.pht-cat.v7 {

    /* ── Intro copy ────────────────────────────────────── */

    .pht-cat-v7-lead {
        font-weight: 700;
    }

    .pht-cat-v7-disc {
        font-size: 0.9rem;
        color: hsl(from var(--text-color) h s l / 0.75);
    }


    /* ── Spec cards ────────────────────────────────────── */

    .pht-cat-v7-crds {
        list-style: none;
        margin-inline: 0;
        padding: 0;

        li {
            .pd_v.pd_h {
                padding: 1.33rem;
            }
        }
    }

    .pht-cat-v7-crd-nm {
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .pht-cat-v7-crd-bdg {
        display: inline-block;
        margin-block: 0.5rem 1rem;
        font-size: 0.61rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--accent, var(--text-color));
        background: hsl(from var(--accent, var(--text-color)) h s l / 0.12);
        padding: 0.25rem 0.55rem;
        border-radius: 4.375rem;
    }

    .pht-cat-v7-crd-grd {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 0.66rem;
        margin: 0;

        dt {
            font-size: 0.61rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: hsl(from var(--text-color) h s l / 0.65);
            margin-bottom: 0.125rem;
        }

        dd {
            margin: 0;
            font-size: 0.83rem;
            font-weight: 700;
        }
    }


    /* ── Feeds ─────────────────────────────────────────── */

    .pht-cat-v7-grd {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pht-cat-v7-fig {
        margin: 0;
    }

    .pht-cat-v7-zm {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        background: transparent;
        color: inherit;
        cursor: zoom-in;

        img {
            display: block;
            width: 100%;
        }
    }


    /* ── Illustration feed: line art + dimension caption bar ── */

    /* Column counts mirror grid.css `mx-4` (illustrations) and `mx-6`
       (swatches). Set here rather than via an mx- class so the count follows
       the feed's Layout, which is data-driven. `.pht-cat-v7-fd` is the grid's
       parent, so grid.css's `:has( > .grd )` makes it the query container. */
    .pht-cat-v7-fd[data-layout="illustrations"] .pht-cat-v7-grd.grd {
        @container (width >= 50rem) { --itm-val: 33.3; }
        @container (width >= 78rem) { --itm-val: 25; }
    }

    .pht-cat-v7-fd[data-layout="colors"] .pht-cat-v7-grd.grd {
        --itm-val: 50;
        @container (width >= 35rem) { --itm-val: 33.333; }
        @container (width >= 50rem) { --itm-val: 25; }
        @container (width >= 78rem) { --itm-val: 16.66667; }
    }

    .pht-cat-v7-fd[data-layout="illustrations"] {
        .pht-cat-v7-fig {
            border-radius: var(--bdr-rds-crd, 0.75rem);
            overflow: hidden;
        }

        .pht-cat-v7-zm {
            background: var(--inner-theme);

            img {
                height: auto;
                object-fit: contain;
            }
        }

        .pht-cat-v7-cap {
            background: var(--text-color);
            color: var(--background);
            font-size: 0.78rem;
            font-weight: 700;
            font-style: italic;
            text-align: center;
            padding: 0.55rem;
        }
    }


    /* ── Colour feed: swatch with label bar over the image ── */

    .pht-cat-v7-fd[data-layout="colors"] {
        .pht-cat-v7-fig {
            position: relative;
            overflow: hidden;
            border-radius: 0.25rem;
            background: var(--background);
            box-shadow: 0 1px 5px hsl(from var(--text-color) h s l / 0.18);
        }

        .pht-cat-v7-zm img {
            object-fit: contain;
        }

        .pht-cat-v7-cap {
            position: absolute;
            inset-inline: 0;
            bottom: 0;
            padding: 0.4rem 0.75rem;
            text-align: center;
            font-weight: 700;
            font-size: 0.85rem;
            line-height: 1.2;
            background: hsl(from var(--text-color) h s l / 0.55);
            color: var(--background);

            em {
                font-style: italic;
            }
        }
    }


    /* ── Lightbox (module-scoped, palette flipped via bg-bx ulk-bg) ── */

    .lightbox {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: hsl(from var(--background) h s l / 0.96);
        display: flex;
        flex-direction: column;
    }

    .lightbox[hidden] {
        display: none;
    }

    .lightbox-bar {
        flex: 0 0 auto;
        border-bottom: 1px solid hsl(from var(--text-color) h s l / 0.1);
    }

    .lightbox-close {
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
        padding: 0.25em 0.5em;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &:hover {
            opacity: 0.7;
        }
    }

    .lightbox-stage {
        flex: 1 1 auto;
        position: relative;
        min-height: 0;
        overflow: hidden;
    }

    .lightbox-img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

    .lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid hsl(from var(--text-color) h s l / 0.3);
        background: hsl(from var(--text-color) h s l / 0.15);
        color: inherit;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: hsl(from var(--text-color) h s l / 0.3);
            transform: translateY(-50%) scale(1.05);
        }
    }

    .lightbox-nav--prev { left: 1rem; }
    .lightbox-nav--next { right: 1rem; }


    /* ── Responsive ────────────────────────────────────── */

    @media screen and (max-width: 699px) {
        .pht-cat-v7-crd-nm {
            font-size: 1rem;
        }

        .pht-cat-v7-disc {
            font-size: 0.85rem;
        }
    }
}

/* Body scroll lock while the lightbox is open — <body> sits above the
   module root in the DOM, so this can't nest under .pht-cat.v7 */
body.pht-cat-lock {
    overflow: hidden;
}

/* contact-v5.css */
/* Contact V5 — Form (right) + Values stack (left) */
.ctc.v5 {
    --fnt-t-6-s: 1.11rem;
    --flx-gap: 2.78rem;

    /* Section gradient — cream → mint (Figma) */
    background: linear-gradient(to bottom, var(--background), var(--inner-theme) 82.258%);

    /* Frosted card chrome (mirror V4) */
    .frst-bg {
        --frst-blur: 4px;
        background-color: hsl(from var(--frst-bg-clr) h s l / .9);
        border: none;

        @media screen and (min-width: 1280px) {
            box-shadow: 0 14px 24px 0 rgba(0, 0, 0, 0.20);
            padding: 3.89rem;
        }
    }

    .frm {
        padding: 1.78rem;
    }

    .ctc-v5-vls li {
        svg {
            font-size: 1.22rem;
            color: var(--buttons);
        }
    }

    /* Bottom emergency CTA card */
    .ctc-v5-cta {
        --bdr-rds-crd: 1.11rem;

        .fnt_t-k.cstm {
            --fnt-t-k-s: 1.11rem;
            --fnt-t-k-ls: 0.12em;
        }

         @media screen and (min-width:1280px) {
           & > .pd_h.pd_v {
                padding: 1.78rem 11rem 1.78rem 1.78rem;
            }
        }

        .iso {
            position: absolute;
            bottom: 0;
            right: 0;
            max-width: 42%;
        }
    }

    .ctc-v5-cta-dsc {
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
    }

    &[data-colors$="-light"] {
        .ulk-bg {
            --inner-theme: var(--dk-bg);
        }
    }
}

/* photos-v1.css */
/* Photos V1 — Single photo scroller with peek */

.pht.v1 {
	--pht-v1-img-w: 36.111rem; /* 480px — side (non-active) image size per Figma */
	--pht-v1-active-scl: 0.7; /* 650 / 480 — active pops up to center size */

	.pht-v1-list {
		/* Track stays within .mn_wd gutters — previous/next peek is constrained
		   to the same horizontal space that bounds the rest of the module. */
		--grd-sp-dyn: 0.1rem;

		align-items: center;
		padding-block: 2rem;
		padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);
		scroll-padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);


		> li {
			scroll-snap-align: center;
			opacity: 0.5;
			position: relative;
			transform: scale(var(--pht-v1-active-scl));
			transition: opacity 0.4s ease, transform 0.4s ease;

			&.s-active {
				--itm-val: 119;
				opacity: 1;
				transform: none;
				z-index: 1;
			}
		}
	}

	@container (max-width: 767px) {
		.pht-v1-list {
			gap: 0.75rem;
			padding-inline: max(calc(50% - 10rem), 1rem);
			scroll-padding-inline: max(calc(50% - 10rem), 1rem);

			> li {
				width: min(20rem, 70vw);
			}
		}
	}
}