/* Swartland Workwear approved responsive blueprint — consolidated in Test 021 */
*{box-sizing:border-box}
html,body{margin:0;background:#050606;color:#eee;font-family:Arial,sans-serif}
.shell{width:min(1450px,95%);margin:auto}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:12px 16px;border:2px solid #f4c400;border-radius:3px;background:#111;color:#fff;font-weight:700;text-decoration:none;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* Header */
.top{height:100px;display:flex;align-items:center;gap:36px}
.logo{width:320px;line-height:.9;text-decoration:none}
.logo span{display:block;color:#fff;font-size:39px;font-weight:900}
.logo b{display:block;margin-top:8px;color:#f4c400;font-size:25px}
.search{height:50px;flex:1;max-width:570px;display:flex;background:#222}
.search input{flex:1;border:0;padding:0 20px;background:none;color:#fff;font-size:15px}
.search button{width:58px;border:0;background:none;color:#fff;font-size:28px}
.search input:disabled,.search button:disabled{opacity:1;cursor:default}
.search input:disabled{-webkit-text-fill-color:#fff}
.login,.cart{color:#eee;text-decoration:none;white-space:nowrap}
.cart i{padding:2px 6px;border-radius:50%;background:#f4c400;color:#111;font-style:normal}
.navband{background:#161819}
.navrow{height:62px;display:flex;align-items:center}
.category{width:235px;height:62px;border:0;background:#f4c400;font-weight:900}
.category:disabled{opacity:1;color:#111;cursor:default}
.navrow nav{display:flex}
.navrow nav a,.navrow nav .nav-placeholder{padding:23px 25px;color:#fff;font-size:14px;font-weight:900}
.navrow nav a{text-decoration:none}
.navrow nav .nav-placeholder{cursor:default}
.quick{margin-left:auto;display:flex;gap:42px}
.quick a{color:inherit;text-decoration:none}
.menu{display:none}

/* Homepage carousel */
.hero{position:relative;width:100%;aspect-ratio:1536/539;overflow:hidden;background:#111}
.hero-slide{position:absolute;inset:0;background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0;transition:opacity .8s ease-in-out}
.hero-slide.active{opacity:1}
.hero-slide[data-banner="1"]{background-image:url('../images/banner1-test010.webp')}
.carousel-toggle{position:absolute;right:12px;bottom:12px;z-index:4;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid #f4c400;border-radius:3px;background:rgba(5,6,6,.78);color:#fff;font:700 15px/1 Arial,sans-serif;cursor:pointer}
.carousel-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}

/* Homepage SEO introduction */
.homepage-seo-intro{padding:67px 0 15px;background:#050505;color:#fff}
.homepage-seo-intro-inner{max-width:1120px;margin:0 auto;padding:17px 28px;display:flex;align-items:center;border:3px solid #f4c400;border-radius:7px;background:#151515;text-align:center}
.homepage-seo-copy{flex:1;min-width:0;max-width:880px;margin:0 auto}
.homepage-seo-intro h1{margin:0 0 7px;color:#f4c400;font-size:clamp(19px,1.65vw,25px);line-height:1.2;font-weight:700}
.homepage-seo-intro h1::after{content:none}
.homepage-seo-intro p{max-width:none;margin:0;color:#f1f1f1;font-size:13px;line-height:1.45}

/* Homepage supporting content */
.homepage-content{background:#0b0c0c;color:#eee}
.content-section{padding:52px 0}
.homepage-content>.content-section.shell{padding-top:71px;padding-bottom:33px}
.content-section-alt{background:#141515}
.section-intro{max-width:880px;margin:0 auto 28px;text-align:center}
.content-section h2{margin:0 0 12px;color:#f4c400;font-size:clamp(24px,2.1vw,32px);line-height:1.2}
.content-section h3{margin:0 0 9px;color:#fff;font-size:18px;line-height:1.25}
.content-section p{margin:0;color:#d2d2d2;font-size:15px;line-height:1.65}
.product-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-overview-grid h2{margin:0 0 9px;color:#fff;font-size:18px;line-height:1.25}
.product-overview-grid article,.benefit-grid article{padding:24px;border:1px solid #333;border-top:3px solid #f4c400;background:#171818}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px;border:3px solid #f4c400;border-radius:7px}
.benefit-grid article{border-top:1px solid #333}

/* Standardized approved footer */
.footgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(230px,1.18fr) minmax(0,1fr) minmax(0,1.12fr);align-items:start;padding:32px 0}
.footgrid section{min-width:0;padding:0 28px;border-right:1px solid #393939}
.footgrid .footer-heading{height:44px;margin:0 0 19px;display:flex;align-items:flex-start;border-bottom:2px solid #d1ad00;padding-bottom:13px;color:#eee;font-size:18px;font-weight:700;line-height:1.1;white-space:nowrap}
.footgrid section>.footer-heading+p,.footgrid section>.footer-heading+a{margin-top:0}
.footgrid p,.footgrid a{color:#ccc;font-size:14px;line-height:1.8}
.footgrid a{display:block;margin:7px 0;text-decoration:none}
.footer-slogan{text-transform:uppercase;font-weight:900;line-height:1.15}
.social{display:flex;gap:13px}
.social a{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#1877f2;color:#fff;font-size:23px}
.social a:nth-child(2){background:linear-gradient(135deg,#7337ff,#ff297c,#ffb234)}
footer .coming-soon-link{position:relative;display:block;cursor:default}
footer span.coming-soon-link{margin:7px 0;color:#ccc;font-size:14px;line-height:1.8}
footer .coming-soon-note{position:absolute;top:50%;left:auto;margin-left:6px;transform:translateY(-50%);opacity:0;color:rgba(255,255,255,.48);font-size:11px;font-weight:700;letter-spacing:.5px;white-space:nowrap;pointer-events:none;transition:opacity .18s ease}
footer .coming-soon-link:hover .coming-soon-note{opacity:1}
.footgrid .contact-footer{padding-left:20px;padding-right:8px}
.contact-footer .contact-line{min-height:46px;margin:2px 0;display:flex;align-items:center;gap:14px;white-space:nowrap}
.contact-footer .contact-icon{width:30px;height:30px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font-size:20px;line-height:1;text-decoration:none}
.contact-footer .contact-icon svg{width:24px;height:24px;display:block;fill:currentColor}
.contact-footer .contact-value{color:#ccc;font-size:14px;line-height:1.4;white-space:nowrap}
.contact-footer a.contact-value{display:inline;margin:0;text-decoration:none}
.copyright{padding:30px;border-top:1px solid #111;color:#aaa;text-align:center}

/* Tablet */
@media(max-width:1100px){
  .login,.cart,.quick{display:none}
  .product-overview-grid{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr 1fr}
  .footgrid section{padding:25px;border-bottom:1px solid #333}
  .footgrid .footer-heading{height:auto;min-height:44px}
  .footgrid .contact-footer{padding:25px 8px 25px 20px}
}

/* Mobile */
@media(max-width:720px){
  .search{display:none}
  .logo{width:auto}
  .logo span{font-size:27px}
  .logo b{font-size:18px}
  .navrow nav{position:absolute;top:162px;right:0;left:0;z-index:10;display:none;flex-direction:column;background:#111}
  .navrow nav.open{display:flex}
  .menu{margin-left:auto;display:block;border:0;background:none;color:#fff;font-size:24px}
  .hero{position:relative;width:100%;max-width:none;height:clamp(330px,90vw,410px);margin:0;padding:0;display:block;overflow:hidden;aspect-ratio:auto;background:#000}
  .hero-slide{position:absolute;inset:0;width:100%;max-width:none;margin:0;padding:0;background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0;visibility:hidden;transition:none;pointer-events:none}
  .hero-slide.active{opacity:1;visibility:visible;pointer-events:auto}
  .hero-slide[data-banner="1"]{background-image:url('../images/banner1-mobile-test010.webp')}
  .hero-slide[data-banner="2"]{background-position:right calc(50% - 6px);background-size:109% auto}
  .hero-slide[data-banner="3"],.hero-slide[data-banner="4"]{background-position:center center;background-repeat:no-repeat;background-size:cover}
  .carousel-toggle{right:9px;bottom:9px;width:34px;height:34px;font-size:13px}
  .homepage-seo-intro{padding-top:53px}
  .content-section{width:92%;padding:38px 0}
  .homepage-content>.content-section.shell{padding-top:50px;padding-bottom:26px}
  .content-section-alt{width:100%;padding-right:4%;padding-left:4%}
  .section-intro{margin-bottom:20px}
  .content-section h2{font-size:23px}
  .content-section h3{font-size:17px}
  .product-overview-grid h2{font-size:17px}
  .content-section p{font-size:14px}
  .product-overview-grid,.benefit-grid{grid-template-columns:1fr;gap:13px}
  .benefit-grid{padding:14px}
  .product-overview-grid article,.benefit-grid article{padding:20px}
  .footgrid{grid-template-columns:1fr}
  .footgrid .footer-heading{min-height:0;white-space:normal}
  .footgrid .contact-footer{padding:25px 8px 25px 12px}
  .contact-footer .contact-line,.contact-footer .contact-value{white-space:normal}
}

@media(max-width:700px){
  .homepage-seo-intro-inner{width:92%;padding:13px 14px}
  .homepage-seo-intro h1{font-size:18px}
  .homepage-seo-intro p{font-size:12px}
}