/* http://codebeautify.org/cssvalidate */

/* troubleshoot layouts */
/*.sefaswe { box-shadow: 0 0 0 1px pink; }*/

@font-face {
    font-family: "Roboto Slab";
    src:
        url("fonts/roboto/RobotoSlab-Regular.woff2") format("woff2"),
        url("fonts/roboto/RobotoSlab-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Slab";
    src:
        url("fonts/roboto/RobotoSlab-Bold.woff2") format("woff2"),
        url("fonts/roboto/RobotoSlab-Bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

html {
    background-color: #2c2c2c;
    background-image: url("/images/backgrounds/wild_oliva.png");
    color: ghostwhite;
    /*padding: 20px;*/
    /*font-family: Calibri, Arial, sans-serif;*/
}
/*body#index, body#request-quote {*/
body {
    /*background: url('/images/backgrounds/header_bg_fade.jpg');*/
    background-position: 0 4%;
    /*background-position: top center;*/
    /*background-size: 100% 150px;*/
    background-repeat: repeat-x;
    background-color: #2c2c2c;
    /*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
}
html,
body {
    /*height: 100%;*/
    position: relative;
    -webkit-font-smoothing: antialiased;
}
h1 {
    font-size: 3em;
    line-height: 1.2em;
    /*color: thistle;*/
    border-bottom: 1px dotted darkolivegreen;
}
.container {
    width: 80%;
} /* give our pages more real estate */
#headline {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
    color: #7dd181; /* minty green */
    margin-bottom: 0;
}
.header {
    margin-top: 10px;
    font-weight: 800;
}
/* Coolors Palette | http://coolors.co/fcb97d-87cefa-e7189a-7dd181-ffffa6 */
h4 {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
    color: #87cefa; /* lightskyblue */
}
h5 {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
    /*color: #E59F71; /* dim peach */
    color: #fcb97d; /* peach */
}
h6 {
    /*color: #7DD181;  minty green */
    color: #ffffa6; /* light yellow */
}
a {
    color: #e7189a;
    /*font-size: 1.2em;*/
}
a:hover {
    color: deeppink;
    text-decoration: underline;
    /*
	background: rgba(199, 21, 133, 0.55);
  	box-shadow: 0px 0px 12px 2px rgba(199, 21, 133, 0.85);
  	*/
}
a[rel="external"] {
    /*font-size: 0.8em;*/
    font-style: italic;
    vertical-align: text-bottom;
}
a,
.arrow {
    cursor: pointer;
}
abbr {
    color: ivory;
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
}
abbr[title] {
    border: 0;
}

/* kudos */
#kudoshead {
    margin-top: 1.5em;
}
#kudos blockquote {
    color: PaleGoldenRod;
    border-left: 5px solid BurlyWood;
    margin: 0.5em 0;
}
.kudo {
    font-size: 1.1em;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}
/* override grey-on-white datalist styles */
datalist,
datalist option,
#state,
#country {
    background: #2c2c2c;
    color: ghostwhite;
}
footer {
    font-size: 0.85em;
    /*
	margin-top: 40px;
	padding-bottom: 2px;
	*/
}
footer .fa {
    font-size: 1.2em;
    margin-right: 0.2em;
}
strong {
    font-weight: bold;
}
video {
    width: 100% !important;
    height: auto !important;
    opacity: 0.9;
    cursor: pointer;
}
video:hover {
    opacity: 1;
}
::selection {
    background: deeppink;
    color: white;
}
.intro {
    padding: 50px 0;
    background: url("/images/backgrounds/header_bg_fade.jpg") no-repeat center
        center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
#index-banner {
	background-image: url('/images/backgrounds/header_bg_fade.jpg');
	width: 100%;
	margin-left: 0;
}
*/

/* 750 section: lightweight, CSS-only animation for speed */
#new .col.s12.m3 {
    position: relative;
}
#new .badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111;
    background: linear-gradient(135deg, #ffd54f, #ffecb3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    animation: badgePulse 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes badgePulse {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 213, 79, 0));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 10px rgba(255, 213, 79, 0.55));
    }
}

#new .hero-copy {
    opacity: 0.9;
    color: mediumspringgreen;
}
#new .750hero {
    display: block;
    width: 340px;
    height: 250px;
    border-radius: 6px;
    transform-origin: center;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
    animation: heroKenBurns 12s ease-in forwards;
    will-change: transform;
}
@keyframes heroKenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.04);
    }
}
/* #new a:hover .750hero {
    transform: scale(1.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.22);
} */
/* Subtle CTA emphasis without layout shift */
/* #new a[href="/rfq"] {
    position: relative;
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: color 0.25s ease;
}
#new a[href="/rfq"]:hover {
    color: #ffd54f;
} */

/* Respect OS accessibility settings */
@media (prefers-reduced-motion: reduce) {
    #new .badge-new {
        animation: none;
    }
    #new .750hero {
        animation: none;
        transition: none;
    }
}

/* TODO: in use anywhere? */
.hero {
    height: 300px;
    background-image: url("/images/boathouse-row-spring-dim.png");
    background-position: 0 90%;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    overflow: hidden;
}

.hero-content {
    padding: 10px;
    padding-top: 60px;
    padding-bottom: 40px;
    color: #fff;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 1px 2px 0 #000;
}
.highlight {
    background-color: moccasin;
    color: mediumvioletred;
    padding: 0.1em 0.25em;
}
.hover-unfade {
    opacity: 0.7;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
.hover-unfade:hover {
    opacity: 1;
}

.spinCoaterIconS,
.spinCoaterIconM,
.spinCoaterIconL {
    background: url("/images/background-sprite.png") no-repeat scroll
        transparent;
}
.spinCoaterIconS {
    background-position: -31px 1px;
    padding: 0 0 0 14px;
    margin-bottom: -3px;
    display: inline-block;
    height: 15px;
}
.spinCoaterIconM {
    background-position: -28px -12px;
    padding: 0 0 0 20px;
    margin-bottom: -2px;
    display: inline-block;
    height: 20px;
}
.spinCoaterIconL {
    background-position: 0 6px;
    margin-right: 4px;
    padding: 0 0 0 28px;
    margin-bottom: -6px;
    display: inline-block;
    height: 36px;
}

/* Home Page - 3x feature */
#featured {
    border-top: 1px solid #444;
}
#featured > div {
    padding-top: 14px;
}
/*#featured > div.feature {*/
#featured > .feature {
    border-right: 1px solid #444;
}
.featuredimg {
    width: 160px;
}
#index .section {
    text-align: center;
}
#index #gbsimg {
    left: 2000px;
}
#homepagecopy > h5 {
    color: lightskyblue;
}
#trustedby .companylogo {
    opacity: 0.5;
}

/* email obfuscation | http://stackoverflow.com/a/29335530/5701 */
.email {
    color: #fff;
    font-weight: bold;
}
/* Stop the sp@m! */
.email:after {
    content: " (at) laurell (dot) com";
}

/* 150, 200, 300 mm */
.spincoatershead {
    background: rgb(255, 20, 147); /* Old browsers */
    background: -moz-linear-gradient(
        45deg,
        rgba(255, 20, 147, 1) 0%,
        rgba(127, 10, 70, 1) 100%
    ); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0%, rgba(255, 20, 147, 1)),
        color-stop(100%, rgba(127, 10, 70, 1))
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
        45deg,
        rgba(255, 20, 147, 1) 0%,
        rgba(127, 10, 70, 1) 100%
    ); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
        45deg,
        rgba(255, 20, 147, 1) 0%,
        rgba(127, 10, 70, 1) 100%
    ); /* Opera 11.10+ */
    background: -ms-linear-gradient(
        45deg,
        rgba(255, 20, 147, 1) 0%,
        rgba(127, 10, 70, 1) 100%
    ); /* IE10+ */
    background: linear-gradient(
        45deg,
        rgba(255, 20, 147, 1) 0%,
        rgba(127, 10, 70, 1) 100%
    ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1493', endColorstr='#7f0a46',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.edcshead {
    background: rgb(15, 73, 127); /* Old browsers */
    background: -moz-linear-gradient(
        45deg,
        rgba(15, 73, 127, 1) 0%,
        rgba(30, 144, 255, 1) 100%
    ); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0%, rgba(15, 73, 127, 1)),
        color-stop(100%, rgba(30, 144, 255, 1))
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
        45deg,
        rgba(15, 73, 127, 1) 0%,
        rgba(30, 144, 255, 1) 100%
    ); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
        45deg,
        rgba(15, 73, 127, 1) 0%,
        rgba(30, 144, 255, 1) 100%
    ); /* Opera 11.10+ */
    background: -ms-linear-gradient(
        45deg,
        rgba(15, 73, 127, 1) 0%,
        rgba(30, 144, 255, 1) 100%
    ); /* IE10+ */
    background: linear-gradient(
        45deg,
        rgba(15, 73, 127, 1) 0%,
        rgba(30, 144, 255, 1) 100%
    ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f497f', endColorstr='#1e90ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.spincoatershead h5,
.edcshead h5 {
    color: #ffffff;
}

/* Model Pages */
.tabs .tab {
    font-size: 0.85em;
    background-color: #2c2c2c;
    margin-bottom: 20px;
}
.tabs .tab a {
    color: mediumvioletred;
}
#tabinfo > div {
    opacity: 0.25s ease-in-out;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
#options .option {
    margin-bottom: 24px;
}

/* Request a Quote Button */
#rfqbutton {
    margin-bottom: 24px;
}
#rfqbutton:hover {
    color: yellow;
}

/* About Us */
#aboutus #bullets {
    margin: 24px 0 0 14px;
}
#aboutus #bullets1 li,
#aboutus #bullets2 li,
#aboutus #bullets3 li {
    margin-bottom: 20px;
    /* opacity: 0; */
}

/* Site Map & TV Collections (<ul> lists) */
#sitemap .collection,
#sitemap .collection-item,
#tv .collection,
#tv .collection-item {
    background: #2c2c2c; /* Old browsers */
    background: -moz-linear-gradient(
        top,
        #2c2c2c 54%,
        #3c3c3c 100%
    ); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(54%, #2c2c2c),
        color-stop(100%, #3c3c3c)
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
        top,
        #2c2c2c 54%,
        #3c3c3c 100%
    ); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
        top,
        #2c2c2c 54%,
        #3c3c3c 100%
    ); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2c2c2c 54%, #3c3c3c 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2c2c2c 54%, #3c3c3c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#3c3c3c',GradientType=0 ); /* IE6-9 */
    border: 0;
    border-bottom: 1px solid #3c3c3c;
    color: mediumvioletred;
}
#tv .collection .collection-item.active {
    background: none;
    background-color: black;
    font-weight: bold;
    border: 1px dotted darkgray;
    border-left: 6px solid darkgray;
}

.bluetooth {
    color: #386fae;
} /* official: #2260a5 */

/*#main { position: relative; }*/
.columns {
    position: relative;
}
/*.columns { vertical-align: middle; }*/
.ltccol {
    position: absolute;
    margin: 155px 0;
}

/* Materialize CSS Overrides */
.divider {
    margin-bottom: 1em;
}
.violet-text {
    color: #e7189a !important;
}
.violet {
    background-color: #e7189a !important;
}
/* add bullets to unordered lists with class 'bullets' */
ul.bullets li {
    margin: 0.5em 0 1em 1em;
}
ul.bullets li::before {
    content: "\2022\00a0"; /* add bullet & space - unicode required | http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content */
}
/** Forms **/

/* 'required' drop shadow */
form input:required,
form textarea:required,
form select:required,
form .selectize-control {
    border-bottom: 2px solid mediumvioletred;
    box-shadow: 4px 5px 14px rgba(199, 21, 133, 0.85);
}
/* re-color form radio inputs */
input[type="radio"]:checked + label:after {
    border: 2px solid mediumvioletred;
    background-color: mediumvioletred;
}
/* re-color form checkbox inputs */
[type="checkbox"]:checked + label:before {
    border-right: 2px solid mediumvioletred;
    border-bottom: 2px solid mediumvioletred;
}
/* re-color form labels (& related inputs) */
input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="date"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="search"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid deeppink;
    box-shadow: 0 1px 0 0 deeppink;
}
input[type="text"]:focus:not([readonly]) + label,
input[type="password"]:focus:not([readonly]) + label,
input[type="email"]:focus:not([readonly]) + label,
input[type="url"]:focus:not([readonly]) + label,
input[type="time"]:focus:not([readonly]) + label,
input[type="date"]:focus:not([readonly]) + label,
input[type="datetime-local"]:focus:not([readonly]) + label,
input[type="tel"]:focus:not([readonly]) + label,
input[type="number"]:focus:not([readonly]) + label,
input[type="search"]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: mediumvioletred;
}
/* http://stackoverflow.com/a/9705712/5701 | do not group these rules */
*::-webkit-input-placeholder {
    color: sienna;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: sienna;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: sienna;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: sienna;
}

/* nav */
nav ul li:hover,
nav ul li.active {
    background-color: rgba(0, 0, 0, 0.3);
}
#rfqnav {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
    font-size: 1.15em;
}
.badgeish {
    font-size: 0.6em;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: firebrick;
    color: snow;
    vertical-align: middle;
}

/* side-nav */
@media only screen and (max-width: 992px) {
    ul.side-nav {
        background-color: mediumvioletred;
    }
    ul.side-nav li.active {
        color: mediumvioletred;
    }
    ul.side-nav li a {
        color: white;
    }
    ul.side-nav li:hover {
        background-color: pink;
    }
    ul.side-nav li:hover a {
        color: mediumvioletred;
    }
}

/* moving banner - Nov '22 */
#movingtruck {
    color: wheat;
    font-size: 1.3em;
    margin-right: 0.15em;
    animation: bobbing 0.2s infinite ease-in-out forwards alternate;
}
@keyframes bobbing {
    0% {
        transform: rotate(0) translateY(0);
    }
    100% {
        transform: rotate(0.2deg) translateY(0.8px);
    }
}

footer,
footer.page-footer {
    /*font-size: 0.8em;*/
    margin-top: 1.3em;
    background-color: #2c2c2c;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iIzgwODA4MCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNjclIiBzdG9wLWNvbG9yPSIjODA4MDgwIiBzdG9wLW9wYWNpdHk9IjAuNzUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 4%,
        rgba(128, 128, 128, 0.5) 34%,
        rgba(128, 128, 128, 0.75) 67%,
        rgba(128, 128, 128, 1) 100%
    ); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(4%, rgba(255, 255, 255, 0)),
        color-stop(34%, rgba(128, 128, 128, 0.5)),
        color-stop(67%, rgba(128, 128, 128, 0.75)),
        color-stop(100%, rgba(128, 128, 128, 1))
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 4%,
        rgba(128, 128, 128, 0.5) 34%,
        rgba(128, 128, 128, 0.75) 67%,
        rgba(128, 128, 128, 1) 100%
    ); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 4%,
        rgba(128, 128, 128, 0.5) 34%,
        rgba(128, 128, 128, 0.75) 67%,
        rgba(128, 128, 128, 1) 100%
    ); /* Opera 11.10+ */
    background: -ms-linear-gradient(
        top,
        rgba(255, 255, 255, 0) 4%,
        rgba(128, 128, 128, 0.5) 34%,
        rgba(128, 128, 128, 0.75) 67%,
        rgba(128, 128, 128, 1) 100%
    ); /* IE10+ */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 4%,
        rgba(128, 128, 128, 0.5) 34%,
        rgba(128, 128, 128, 0.75) 67%,
        rgba(128, 128, 128, 1) 100%
    ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#808080',GradientType=0 ); /* IE6-8 */
}
#learnmore li {
    margin-bottom: 0.7em;
    padding: 0.4em 0;
    border: 0px solid silver;
}
#learnmore li a {
    /* https://stackoverflow.com/a/20327676/5701 */
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 1em;
    margin: -1em;
}
.socialicons a {
    opacity: 0.4;
}
.socialicons a:hover {
    opacity: 0.9;
}

/* ─── N-1: Home page styles (moved from index.php inline block) ─── */
#announcement {
    background: #2c2c2c;
    background: -webkit-linear-gradient(top, #4d4d4d 0%, #2c2c2c 50%, #2c2c2c 100%);
    background: linear-gradient(to bottom, #4d4d4d 0%, #2c2c2c 50%, #2c2c2c 100%);
    border: 1px solid red;
    margin: 0.5em 1em;
    padding: 1em;
}
.video-wrap {
    max-width: 800px;
    margin: 0 auto;
}
.responsive-video {
    width: 100%;
    height: auto;
    display: block;
}
#sizes .feature {
    border-radius: 18px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
#sizes .feature .icon-block {
    border-radius: 18px;
    padding: 12px 10px 16px;
    transition: transform 0.25s ease;
}
#sizes .feature h5 a {
    display: inline-block;
    transition: text-shadow 0.25s ease;
}
#sizes .feature h5 a::after {
    content: 'View Details >';
    display: block;
    margin-top: 0.45em;
    font-family: inherit;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#sizes .feature .featuredimg {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
#sizes .feature:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 28px rgba(0,0,0,0.16);
}
#sizes .feature:hover .icon-block {
    transform: translateY(-4px);
}
#sizes .feature:hover .featuredimg {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 34px rgba(0,0,0,0.35);
    filter: brightness(1.04) saturate(1.08);
}
#sizes .feature:hover h5 a {
    text-shadow: 0 0 12px rgba(255,255,255,0.24), 0 0 24px rgba(255,255,255,0.1);
}
#sizes .feature:hover h5 a::after {
    opacity: 1;
    transform: translateY(0);
}

/* ─── N-5: CSS Carousel (replaces jQuery Cycle2) ─── */
#sc-150mm, #sc-200mm, #sc-300mm {
    position: relative;
    width: 175px;
    height: 233px;
    overflow: hidden;
    margin: 0 auto;
}
#sc-150mm > a,
#sc-200mm > a,
#sc-300mm > a {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 175px;
    opacity: 0;
    animation: ssShow 20s infinite;
}
#sc-150mm > a:nth-child(1), #sc-200mm > a:nth-child(1), #sc-300mm > a:nth-child(1) { animation-delay: 0s; }
#sc-150mm > a:nth-child(2), #sc-200mm > a:nth-child(2), #sc-300mm > a:nth-child(2) { animation-delay: 5s; }
#sc-150mm > a:nth-child(3), #sc-200mm > a:nth-child(3), #sc-300mm > a:nth-child(3) { animation-delay: 10s; }
#sc-150mm > a:nth-child(4), #sc-200mm > a:nth-child(4), #sc-300mm > a:nth-child(4) { animation-delay: 15s; }
@keyframes ssShow {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    22%  { opacity: 1; }
    28%  { opacity: 0; } /* fade-out overlaps next slide's fade-in for crossfade */
    100% { opacity: 0; }
}
#sc-150mm:hover > a,
#sc-200mm:hover > a,
#sc-300mm:hover > a {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    #sc-150mm > a,
    #sc-200mm > a,
    #sc-300mm > a {
        animation: none;
        opacity: 0;
    }
    #sc-150mm > a:first-child,
    #sc-200mm > a:first-child,
    #sc-300mm > a:first-child {
        opacity: 1;
    }
}

/* ─── N-2: Material Icons self-hosted (place MaterialIcons-Regular.woff2 in /css/fonts/material-icons/) ─── */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/css/fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

@media print {
    [role="alertdialog"],
    [class*="termly-"] {
        display: none !important;
    }
}