*,*::before,*::after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}@font-face{font-family:courgette;src:url(/font/Courgette-Regular.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:inter;src:url(/font/Inter-Variable.woff2)format('woff2');font-weight:100 900;font-style:normal;font-display:swap}:root{--color-primary:#5A4552;--color-primary-dark:#4A3542;--color-text:#364153;--color-text-light:#666;--color-bg:oklch(98.5% .002 247.839);--color-bg-dark:oklch(.37 .013 285.805);--color-bg-darker:oklch(.274 .006 286.033);--font-size-base:16px;--font-size-lg:1.25rem;--font-size-sm:0.875rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:2rem;--spacing-xl:4rem;--max-width:1200px;--border-radius:4px;--transition:200ms ease-in-out}body{color:var(--color-text);background:var(--color-bg);min-height:100svh;display:flex;flex-direction:column;font-family:inter,sans-serif}a{color:#c10009}a:hover{color:#a03338}body>header{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.2);position:relative;fss-topbar{background-color:#34383c;display:block;> div{max-width:87.5rem;margin:0 auto;display:flex;color:#fff;padding:.75rem 1rem;gap:.5rem .25rem;font-size:.75rem}@media(min-width:52rem){>div{gap:.5rem 1.25rem;font-size:.875rem}}p{display:inline-block;font-family:courgette,cursive;width:100%;flex:1}a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:.25rem;&:hover{text-decoration:underline}&:first-of-type{margin-right:auto}span{display:none}&:last-of-type span{display:inline-block}@media(min-width:52rem){span{display:inline-block}}}.map-link::before, .facebook-link::before, .phone-link::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.map-link::before{mask-image:url(/svg/lucide-map-pin.svg);-webkit-mask-image:url(/svg/lucide-map-pin.svg)}.facebook-link::before{mask-image:url(/svg/lucide-facebook.svg);-webkit-mask-image:url(/svg/lucide-facebook.svg)}.phone-link::before{mask-image:url(/svg/lucide-phone.svg);-webkit-mask-image:url(/svg/lucide-phone.svg)}}> div:last-child{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;max-width:87.5rem;margin:0 auto;position:relative}fss-branding{display:flex;align-items:center;padding:1rem;.logo{width:14rem}}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:0 0;border:none;cursor:pointer;padding:.5rem 1rem;z-index:10;span{display:block;width:24px;height:2px;background:#34383c;border-radius:2px;transition:transform .3s ease,opacity .3s ease}&.active span:nth-child(1){transform:translateY(7px)rotate(45deg)}&.active span:nth-child(2){opacity:0}&.active span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}}nav{display:flex;flex-direction:column;width:100%;max-height:0;overflow:hidden;transition:max-height .35s ease;&.open{max-height:30rem}a{text-decoration:none;font-size:.875rem;font-weight:600;color:#000;padding:.75rem 1rem;border-top:1px solid #eee;&:hover{background:#f5f5f5;text-decoration:none}}}@media(min-width:52rem){fss-topbar{p{width:auto;&:after{content:"";border-right:1px solid #eee;margin-left:1rem}}}fss-branding{.logo{width:17rem;margin-right:1rem}}.menu-toggle{display:none}nav{flex-direction:row;flex-wrap:wrap;width:auto;max-height:none;overflow:visible;gap:1.5rem;padding:.5rem 1rem;a{padding:0;border-top:none;font-size:1rem;&:hover{background:0 0;text-decoration:underline}}}}@media(min-width:64rem){fss-branding{.logo{width:20rem;margin-right:1rem}}nav{gap:2rem;padding:1rem}}}body>footer{background-color:#34383c;background-image:url(/svg/fss_logomark.svg);background-repeat:no-repeat;background-position:50% 100%;background-size:80%;color:#fff;margin-top:auto;padding-bottom:1rem;> div{display:grid;grid-template-columns:repeat(24,1fr);gap:1rem;max-width:87.5rem;margin:0 auto;padding:0 1rem}fss-contact{grid-column:span 24;img:first-of-type{margin:2rem 0;max-width:14rem}ul{list-style:none;padding:0;li{display:flex;align-items:center}}a[href*=maps], a[href^=tel], a[href*=facebook], > ul > li > p::before{color:#fff;text-decoration:none;margin:.25rem 0;&:hover{text-decoration:underline}}a[href*=maps]::before, a[href^=tel]::before, a[href*=facebook]::before, > ul > li > p::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}a[href*=maps]::before{mask-image:url(/svg/lucide-map-pin.svg);-webkit-mask-image:url(/svg/lucide-map-pin.svg)}a[href^=tel]::before{mask-image:url(/svg/lucide-phone.svg);-webkit-mask-image:url(/svg/lucide-phone.svg)}a[href*=facebook]::before{mask-image:url(/svg/lucide-facebook.svg);-webkit-mask-image:url(/svg/lucide-facebook.svg)}> ul > li > p::before{mask-image:url(/svg/lucide-clock.svg);-webkit-mask-image:url(/svg/lucide-clock.svg)}}fss-scripture{grid-column:span 24;border-top:1px solid #65676b;border-bottom:1px solid #65676b;background-color:#3e4145;padding:.75rem 1rem;margin:1.5rem 0;font-family:courgette,cursive;text-align:center;font-size:.875rem;line-height:1.5}fss-legal{grid-column:span 24;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;font-size:.875rem;p{margin:.5rem 0}a{color:#fff;text-decoration:none;&:hover{text-decoration:underline;color:#fff}}p:last-of-type{display:flex}p a{&:not(:last-child){border-right:1px solid;margin-right:.5rem;padding-right:.5rem}}}@media(min-width:48rem){background-position: right 10% center; background-size: 40%; fss-contact{grid-column:span 24;img:first-of-type{max-width:17rem}}fss-scripture{padding:1rem 0;margin:2rem 0;font-size:1rem}fss-legal{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;font-size:1rem}}@media(min-width:64rem){background-size: 50%; fss-contact{padding-top:2rem;grid-column:span 24;display:flex;align-items:center;ul{margin:2rem auto}img:first-of-type{margin:2rem 0;max-width:25rem}}}}.breadcrumbs{background-color:#34383c;background:rgba(52,56,60,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-bottom:1px solid #484c52;grid-column:span 24;> div{margin:0 auto;padding:1rem 0}a{text-decoration:none;color:#fff}a:hover{text-decoration:underline}.separator{color:#fff;padding:0 .5rem}}.category-selection{margin:2rem 0 3rem;position:relative;z-index:100;> div{box-shadow:0 0 2px rgba(0,0,0,.2);border-radius:.25rem;max-width:87.5rem;margin:0 auto;padding:2rem;background-color:#fff;display:grid;grid-template-columns:1fr;gap:.75rem}a{position:relative;display:block;text-decoration:none;color:#fff;border-radius:.5rem;overflow:hidden;img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}&::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 50%);pointer-events:none;transition:background .4s ease}p{position:absolute;bottom:0;left:0;right:auto;top:auto;margin:0;padding:.75rem 1rem;font-weight:800;font-size:1.125rem;text-transform:uppercase;letter-spacing:.05em;z-index:1;background:0 0;border-radius:0;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.5)}&:hover img{transform:scale(1.05)}&:hover::after{background:linear-gradient(to top,rgba(193,39,44,.75) 0%,transparent 50%)}}}@media(min-width:30rem){.category-selection>div{grid-template-columns:repeat(2,1fr)}}@media(min-width:48rem){.category-selection>div{grid-template-columns:repeat(3,1fr);gap:1rem}.category-selection a p{font-size:1.25rem;padding:1rem 1.25rem}}@media(min-width:64rem){.category-selection>div{grid-template-columns:repeat(5,1fr);gap:1.25rem}}.content{width:100%;padding:1rem;h1{margin:1rem 0 2rem;font-weight:800}p{margin:1rem 0}}main{position:relative}.site-main{width:100%;max-width:87.5rem;margin:0 auto;padding:0 1rem}.site-main.with-aside{margin:2rem auto;background:#fff;padding:1rem;border-radius:.25rem;box-shadow:0 0 2px rgba(0,0,0,.2);display:flex;flex-direction:column;.contact-info-section{min-width:unset;width:100%}}@media(min-width:48rem){.content{padding:2rem;flex:1;min-width:0}.site-main.with-aside{flex-direction:row;padding:1rem 2rem;.contact-info-section{width:22rem;flex-shrink:0}}}.site-main{width:100%;max-width:87.5rem;margin:0 auto;padding:0 1rem}.welcome{padding:1rem}.hero-video-container{border-radius:.5rem;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;max-height:75svh}.hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;z-index:1}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:2}.hero-content{max-width:87.5rem;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;height:100%;text-align:center;color:#fff;padding:1rem;z-index:3;position:relative;bottom:0;div{text-align:center}}.hero-tagline{font-size:1.5rem;font-weight:800;text-transform:uppercase;margin:0;text-shadow:1px 1px 4px rgba(0,0,0,.5);span:first-child{display:block;margin-bottom:-.25rem}span:last-child{display:block;margin-bottom:-.25rem}}.hero-cta{background:#c1272c;padding:.75rem 1.5rem;border:1px solid #c96164;border-radius:9999px;box-shadow:1px 1px 4px rgba(0,0,0,.25);color:#fff;text-decoration:none;display:inline-block;margin:1rem 0;text-transform:uppercase;font-weight:800;font-size:.875rem}.about-freeburgs>div{padding:2rem 1rem;h2{margin-top:0}p{line-height:1.6}}@media(min-width:48rem){.hero-content{justify-content:end;align-items:center;padding:2rem;bottom:-3rem;div{text-align:right}}.hero-tagline{font-size:2.5rem;span:first-child{margin-bottom:-.75rem}span:last-child{margin-bottom:-.75rem}}.hero-cta{padding:1rem 2rem;font-size:1rem;margin:1.5rem 0}.about-freeburgs>div{padding:2rem 0}}@media(min-width:64rem){.hero-content{bottom:-5rem}.hero-tagline{font-size:4rem;span:first-child{margin-bottom:-1rem}span:last-child{margin-bottom:-1rem}}.hero-cta{padding:1.25rem 3rem;font-size:1.25rem;margin:2rem 0}}.site-main{width:100%;max-width:87.5rem;min-height:75svh;margin:0 auto;padding:2rem 1rem}@media(max-width:768px){.hero-content h1{font-size:2rem}}.about-freeburgs{background-image:url(/img/about_background_fade.jpg);background-position:bottom;background-size:cover;background-repeat:no-repeat;padding:4rem 1rem;min-height:68svh;display:flex;align-items:center;justify-content:center;h2{font-family:courgette,cursive;font-size:2.5rem;margin:1.5rem 0;text-align:center}p{margin:1rem 0;font-size:1.25rem}> div{max-width:92ch;color:#fff}}.financing-banner{background-color:#0a5540;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.site-main{margin:2rem auto;background:#fff;padding:2rem;border-radius:.25rem;box-shadow:0 0 2px rgba(0,0,0,.2)}.prose{h1{font-size:2rem;font-weight:700}p{margin:1rem 0}ul{margin:1rem 0}}.sheffield{> div{align-items:center;background-color:#fff;border-radius:.25rem;box-shadow:0 0 2px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:2rem;justify-content:start;margin:2rem auto;max-width:87.5rem;padding:2rem;h2{margin:.5rem 0}p{margin:.5rem 0}.sheffield-logo{border-radius:.5rem;overflow:hidden;max-width:16rem;height:auto}.sheffield-banner{background-color:#0a5540;display:flex;align-items:center;justify-content:center;border-radius:.5rem;width:100%}}@media(min-width:64rem){>div{flex-direction:row;.sheffield-banner{display:inline-block;max-width:fit-content;padding:1rem 3rem}}}}.contact-us{max-width:87.5rem;margin:0 auto}.contact-us h1{margin-bottom:2rem;font-size:2.5rem;color:#333}.trailer-reference{margin:0 auto 2rem;padding-right:2rem}.reference-box{background:##b2b2b2;border:1px solid #ddd;border-radius:.25rem;padding:1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.reference-box p{margin:0;font-weight:700;color:#000;font-size:1.125rem;flex:1}.clear-btn{background:#d4d4d4;border:none;color:#000;padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .3s;white-space:nowrap}.clear-btn:hover{background:#aaa}.contact-content{margin-top:2rem}.contact-form-section{order:1}.contact-form{background:#fff;padding-right:2rem;border-radius:8px}.form-group{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#333;font-size:.9rem}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#c10009;box-shadow:0 0 2px rgba(193,0,9,.1)}.form-group textarea{resize:vertical;min-height:120px}.submit-button{margin-left:auto;display:inline-block;padding:.75rem 4rem;background-color:#c10009;color:#fff;border:none;text-decoration:none;border-radius:.5rem;font-weight:700;transition:background-color .2s;cursor:pointer;&:hover{background-color:#e7000b}}.submit-button:hover:not(:disabled){background-color:#e7000b}.submit-button:disabled{opacity:.6;cursor:not-allowed}.button-loading{display:none}.form-message{margin-top:1rem;padding:1rem;border-radius:4px;font-weight:500}.form-message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.form-message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.contact-info-section{margin:1rem 0;background:#f9fafb;padding:2rem;border-radius:8px}.contact-info-section{.contact-item::before{content:"";display:inline-block;width:1.5rem;height:1.5rem;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.address::before{mask-image:url(/svg/lucide-map-pin.svg);-webkit-mask-image:url(/svg/lucide-map-pin.svg)}.phone::before{mask-image:url(/svg/lucide-phone.svg);-webkit-mask-image:url(/svg/lucide-phone.svg)}.email::before{mask-image:url(/svg/lucide-email.svg);-webkit-mask-image:url(/svg/lucide-email.svg)}.hours::before{mask-image:url(/svg/lucide-clock.svg);-webkit-mask-image:url(/svg/lucide-clock.svg)}}.contact-info-section h2{margin-top:0;margin-bottom:1.5rem;font-size:1.75rem;color:#33373c}.contact-item{display:flex;margin-bottom:2rem}.contact-item span{display:block;min-width:2rem}.contact-item:last-child{margin-bottom:0}.contact-item h3{margin:0;font-size:1.125rem;color:#33373c}.contact-item p{margin:0;line-height:1.6;color:#33373c}.contact-item a{color:#33373c;text-decoration:none;transition:color .2s}.contact-item a:hover{color:#33373c;text-decoration:underline}@media(max-width:968px){.contact-content{grid-template-columns:1fr;gap:2rem}.contact-form-section{order:1}.contact-info-section{order:2;position:static}}@media(max-width:768px){.contact-us{padding:1.5rem}.contact-us h1{font-size:2rem}.contact-form{padding:1.5rem}.contact-info-section{padding:1.5rem}.reference-box{flex-direction:column;align-items:flex-start}.reference-box p{width:100%}.clear-btn{width:100%}}@media(max-width:480px){.contact-us{padding:1rem}.contact-us h1{font-size:1.75rem}.contact-form{padding:1rem}.contact-info-section{padding:1rem}.contact-info-section h2{font-size:1.5rem}.form-group input,.form-group textarea{font-size:16px}}.contact-buttons{.by-phone::before, .by-email::before, .by-form::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.by-phone::before{mask-image:url(/svg/lucide-phone.svg);-webkit-mask-image:url(/svg/lucide-phone.svg)}.by-email::before{mask-image:url(/svg/lucide-email.svg);-webkit-mask-image:url(/svg/lucide-email.svg)}.by-form::before{mask-image:url(/svg/lucide-form.svg);-webkit-mask-image:url(/svg/lucide-form.svg)}}.recent-inventory{z-index:100;position:relative;.section-container{box-shadow:0 0 2px rgba(0,0,0,.2);border-radius:.25rem;max-width:87.5rem;margin:0 auto;padding:2rem;background-color:#fff;h2{text-align:center;margin:2rem 0;font-size:2rem}> p{text-align:center;margin:2rem auto;max-width:55ch}} #recent-inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin: 4rem auto; } .inventory-card { background: white; border-radius: 0.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: inherit; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; &:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .card-group { display: flex; flex-direction: column; min-height: 100%; flex: 0 1; } .image-group { position: relative; } .content-group { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; flex: 1; } .price-group { display: flex; justify-content: space-between; align-items: end; min-height: 2lh; } .manufacturer-logo { width: 60px; height: 60px; position: absolute; top: 10px; left: 10px; padding: 5px; border-radius: 4px; object-fit: contain; } .sale-badge { position: absolute; top: 0px; right: 0px; background: #e63946; color: white; padding: 0.25rem 0.5rem; border-bottom-left-radius: 0.25rem; font-weight: bold; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; } .used-badge { font-size: 0.75rem; padding: 0.125rem; display: block; margin: 0; text-transform: uppercase; background: #ffeced; text-align: center; border-radius: 9999px; } img { object-fit: cover; aspect-ratio: 16 / 9; width: 100%; } .manufacturer-name { text-align: center; font-size: 0.75rem; font-weight: bold; } h3 { margin: 0 0 auto; font-size: 0.875rem; font-weight: bold; text-align: center; min-height: 2lh; } .stock-number { font-size: 0.75rem; } .price-display { display: flex; flex-direction: column; align-items: end; } .price { font-size: 1rem; font-weight: bold; } .sale-price { font-size: 1rem; font-weight: bold; color: #C10009; } .regular-price { font-size: 0.64rem; text-decoration: line-through; } } .view-all-container { text-align: center; margin: 3rem 0; } .view-all-button { display: inline-block; padding: 0.75rem 4rem; background-color: #911218; color: white; text-decoration: none; border-radius: 0.5rem; font-weight: bold; transition: background-color 0.2s; text-align: center; max-width: 24rem; margin-left: auto; &:hover { background-color: #b11a21; } }}.inventory-list{padding:2rem 1rem;background:#fff;margin:2rem auto;border-radius:.25rem;box-shadow:0 0 2px rgba(0,0,0,.2);header{margin:1rem 0;text-align:center}.inventory-title{font-size:3rem;font-weight:800} #inventory-index { display: flex; flex-direction: column; gap: 3rem; margin-top: 4rem; padding: 1rem; } .inventory-item > a { margin: 2rem auto; display: block; text-decoration: none; min-height: 8rem; color: #364153; padding: 0rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: white; border-radius: 0.25rem; overflow: hidden; } .used-badge { font-size: 0.75rem; padding: 0.15rem 1rem; display: inline-block; margin: 0; text-transform: uppercase; background: #f6dfe1; text-align: center; border-radius: 9999px; } @media (min-width: 72rem) { .inventory-item > a { display: flex; flex-flow: wrap; } } .inventory-item .trailer-image { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; width: 100%; height: 100%; max-height: 16rem; } .inventory-item .trailer-details { padding: 1rem 1rem; flex: 1 0; text-align: center; h3 { font-size: 1rem; } } .inventory-item .trailer-standard-features { text-align: left; font-size: 0.875rem; } .trailer-standard-features { ul { margin: 1rem 0; padding: 0; list-style: none; li { margin: 0.5rem 0; } li::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url('/svg/lucide-circle-check.svg') no-repeat center; background-size: contain; flex-shrink: 0; margin-right: 0.5rem; } } } .inventory-category-section { display: flex; flex-direction: column; } .category-heading { font-size: 1.75rem; font-weight: 800; margin-bottom: -1rem; padding: 0.5rem; border-bottom: 3px solid #AC0E15; scroll-margin-top: 2rem; } .price-group { display: flex; flex-direction: column; justify-content: space-between; padding: 0 1rem 1rem; min-width: 100%; } .price { font-size: 1.25rem; font-weight: bold; margin: 0 0 1rem; } @media (min-width: 64rem) { .price-group { min-width: fit-content; } } .sale-price { font-size: 1.25rem; font-weight: bold; color: #C10009; } .regular-price { font-size: 0.84rem; text-decoration: line-through; } .view-trailer { display: inline-block; padding: 0.75rem 4rem; background-color: #911218; color: white; text-decoration: none; border-radius: 0.5rem; font-weight: bold; transition: background-color 0.2s; text-align: center; width: 100%; margin-left: auto; &:hover { background-color: #b11a21; } } .image-wrapper { position: relative; } .inventory-item .manufacturer-name { margin: 0.5rem 0; font-size: 0.875rem; } .inventory-item .manufacturer-logo { position: absolute; top: 10px; left: 10px; width: 80px; height: auto; max-height: 80px; object-fit: contain; padding: 6px; border-radius: 6px; z-index: 10; }}@media(min-width:42rem){.inventory-list{.inventory-item{a{display:flex;flex-flow:wrap}.image-wrapper{max-width:50%}.trailer-details{p{font-size:1rem}h3{font-size:1.25rem}text-align:left;max-width:50%}.pricing{margin:1rem 0;text-align:right}}}}.inventory-single{margin:2rem auto;background:#fff;padding:1rem 2rem;border-radius:.25rem;box-shadow:0 0 2px rgba(0,0,0,.2);h1{text-align:center;margin:3rem 0;font-weight:800}h2{font-weight:800}h3{font-weight:800}.manufacturer-logo{max-height:6rem;max-width:12rem;margin:3rem auto}.back-button{display:inline-block;padding:10px 20px;background:#f0f0f0;text-decoration:none;color:#333;border-radius:5px;margin-bottom:20px}.back-button:hover{background:#e0e0e0}.photo-gallery{margin:30px 0} #main-photo { width: 100%; height: 75svh; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f5f5; border-radius: 0.5rem; object-fit: cover; object-position: center; box-shadow: 1px 1px 4px rgba(0,0,0,0.1), 1px 1px 16px rgba(0,0,0,0.1); } .photo-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; } .thumbnail { width: 100px; height: 100px; object-fit: cover; border-radius: 0.5rem; cursor: pointer; border: 3px solid transparent; transition: all 0.3s; } .thumbnail.active { border-color: #007bff; } .thumbnail:hover { opacity: 0.8; } .trailer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 40px 0; } .details-section ul { list-style: none; margin: 0; padding: 0; li { margin: 0.25rem 0; display: flex; } } .details-section span { font-weight: 600; min-width: 6rem; display: inline-block; } .details-section, .pricing-section { background: #F9F9F9; border: 1px solid #eee; border-radius: 0.5rem; padding: 1rem; } .pricing-section .price { font-size: 28px; font-weight: bold; } .detail-sale-price .price { color: #d32f2f; } .strikethrough { text-decoration: line-through; opacity: 0.6; } .weight-ratings { display: flex; justify-content: center; width: fit-content; p { display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 1.5rem; span:first-child { font-size: 0.875rem; } span:last-child { font-size: 1rem; font-weight: 600; } &:not(:last-child) { border-right: 1px solid #eee; } } } .standard-features-section { background: #F9F9F9; border: 1px solid #eee; border-radius: 0.5rem; padding: 1rem; margin: 2rem auto; div { max-width: 96ch; margin: 0 auto; } h2 { font-size: 2rem; margin: 2rem 0; text-align: center; } p { margin: 2rem 0; text-align: center; } ul { display: grid; grid-template-columns: 1fr; max-width: 100ch; margin: 1rem auto; padding: 0; list-style: none; li { margin: 0; display: flex; align-items: baseline; border-top: 1px dashed #d8dbdf; padding: 1rem 0; } li::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url('/svg/lucide-circle-check.svg') no-repeat center; background-size: contain; flex-shrink: 0; margin-right: 0.5rem; } } @media screen and (min-width: 48rem) { ul { grid-template-columns: 1fr 1fr; } } } .contact-section { background: #35383d; color: #eceff7; padding: 4rem 1rem; margin: 2rem 0rem; border-radius: 0.5rem; text-align: center; } .contact-buttons { display: flex; justify-content: space-evenly; gap: 1rem; margin: 2rem auto; max-width: 64rem; } .contact-button { display: inline-block; padding: 15px 30px; background: #f0f0f0; color: black; text-decoration: none; border-radius: 5px; border: 1px solid white; font-size: 18px; text-align: center; flex: 1; } .contact-button:hover { background: #dddddd; } .error-message { padding: 40px; text-align: center; } .error-detail { color: #666; font-size: 14px; margin: 10px 0; font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 5px; } .content-section { h2 { margin: 2rem 0; } } .options-section { columns: 2; column-gap: 1rem; h2 { margin: 2rem 0; } } .options-section h2 { column-span: all; margin: 2rem 0; } .options-category { break-inside: avoid; } @media (max-width: 768px) { .trailer-info-grid { grid-template-columns: 1fr; } .contact-buttons { flex-direction: column; } } .custom-order { margin: 4rem 0; text-align: center; } .stock-info { text-align: center; padding: 1rem; border-top: 1px dashed #eee; border-bottom: 1px dashed #eee; } .photo-gallery { margin: 2rem 0; } #main-swiper { width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom: 1rem; border-radius: 0.5rem; position: relative; overflow: hidden; } #main-swiper .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 100%; } #main-swiper .swiper-wrapper::-webkit-scrollbar { display: none; } #main-swiper .swiper-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; height: 100%; } #main-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } #thumbnail-swiper { width: 100%; height: auto; position: relative; overflow: hidden; } #thumbnail-swiper .swiper-wrapper { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; padding: 4px; } #thumbnail-swiper .swiper-slide { flex: 0 0 auto; width: calc((100% - 30px) / 7.5); aspect-ratio: 16 / 9; height: auto; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; border-radius: 0.5rem; overflow: hidden; border: 2px solid transparent; } #thumbnail-swiper .swiper-slide:hover { opacity: 0.8; } #thumbnail-swiper .swiper-slide-thumb-active { opacity: 1; border-color: #c1272c; } #thumbnail-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 4rem; font-weight: bold; transition: background 0.3s; user-select: none; } .swiper-button-prev { left: 10px; } .swiper-button-next { right: 10px; } .swiper-button-prev::after { content: '‹'; } .swiper-button-next::after { content: '›'; } @media (max-width: 1024px) { #thumbnail-swiper .swiper-slide { width: calc((100% - 40px) / 5); } } @media (max-width: 768px) { #main-swiper { height: 400px; } #thumbnail-swiper .swiper-slide { width: calc((100% - 30px) / 4); } } @media (max-width: 640px) { #thumbnail-swiper .swiper-slide { width: calc((100% - 20px) / 3); } } @media (max-width: 480px) { #main-swiper { height: 300px; } }}