/* ==============================================================
 GREYSTONE MERCHANDISE — FEUILLE DE STYLE
 Pour modifier les couleurs : voir les variables :root ci-dessous.
 Pour modifier le menu Astec : rechercher « Navigation Astec-style ».
 Pour les 4 bannières d'accueil : rechercher « category-showcase ».
 ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--blue:#435e73;
  --navy:#173f61;
  --grey:#868b8e;
  --line:#e4e5e7;
  --text:#343434;
  --max:1230px}
*{
  box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0;
  color:var(--text);
  font:14px/1.55 Arial,sans-serif;
  background:#fff}a{color:inherit;
  text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.container{max-width:var(--max);
  padding:0 22px;
  margin:auto}.utility{background:#f6f6f6;
  border-bottom:1px solid #e9e9e9;
  font-size:12px;
  color:#666}.utility .container{display:flex;
  justify-content:flex-end;
  gap:23px;
  padding-top:7px;
  padding-bottom:7px}.utility a:hover{color:var(--navy)}.main-header{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:136px}.brand-logo{width:225px;
  max-width:100%;
  height:120px;
  object-fit:contain}.searchbox button,.blue-btn{background:var(--navy);
  border:1px solid var(--navy);
  color:white;
  padding:0 24px;
  font-weight:700}.header-side{display:flex;
  align-items:center;
  gap:23px;
  font-size:13px}.header-side a{white-space:nowrap}.header-side svg{vertical-align:middle}.nav-shell{border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}nav{display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap}nav a{font-weight:700;
  padding:17px 22px;
  font-size:13px}nav a:hover,nav a.active{color:var(--navy);
  background:#edf2f5}.mobile-toggle{display:none}.hero{position:relative;
  overflow:hidden;
  background:#e9ecef;
  min-height:445px}.slides{position:relative;
  min-height:445px}.slide{display:none;
  min-height:445px;
  align-items:center;
  background:linear-gradient(100deg,#244763 0%,#477089 45%,#dadfe2 45%,#f2f2f2 100%)}.slide.active{display:flex}.hero-copy{width:60%;
  max-width:650px;
  color:white;
  padding:55px 0}.hero h1{
  font:800 clamp(30px,4vw,53px)/1.13 Montserrat,Arial,sans-serif;
  margin:0 0 18px;
  text-transform:uppercase}.hero p{max-width:420px;
  font-size:16px;
  margin:0 0 30px}.hero-art{position:absolute;
  right:12%;
  top:20%;
  font-size:150px;
  filter:drop-shadow(0 15px 10px #0002)}.btn{display:inline-block;
  padding:12px 25px;
  background:#1b527f;
  border:1px solid #1b527f;
  color:white;
  text-transform:uppercase;
  font-weight:700;
  font-size:12px;
  letter-spacing:.3px}.btn:hover{background:#102e48}.slider-arrow{position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:0;
  background:#ffffffad;
  padding:14px 17px;
  font-size:25px}.slider-arrow.prev{left:8px}.slider-arrow.next{right:8px}.dots{position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px}.dots button{width:11px;
  height:11px;
  border-radius:50%;
  border:0;
  background:#c4c4c4;
  padding:0}.dots button.on{background:var(--navy)}h1,h2,h3{
  line-height:1.25}.section{padding:60px 0}.section h2{
  font-size:27px;
  text-align:center;
  margin:0 0 28px;
  text-transform:uppercase;
  font-weight:700}.categories{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px}.cat-tile{position:relative;
  min-height:275px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  color:#fff;
  overflow:hidden;
  background:linear-gradient(135deg,#9da6ac,#243f50)}.cat-tile:nth-child(even){
  background:linear-gradient(135deg,#8798a1,#172c3b)}.cat-tile:before{content:attr(data-symbol);
  position:absolute;
  top:20px;
  left:0;
  right:0;
  text-align:center;
  font-size:110px;
  opacity:.65}.cat-tile span{position:relative;
  text-align:center;
  background:#143d60ec;
  width:100%;
  padding:16px 5px;
  font:700 16px Montserrat,Arial,sans-serif;
  text-transform:uppercase}.feature-grid,.product-grid{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px}.product-card{border:1px solid #ededed;
  padding-bottom:18px;
  text-align:center;
  transition:box-shadow .2s}.product-card:hover{box-shadow:0 5px 20px #00000017}.product-image{height:226px;
  background:linear-gradient(140deg,#f6f6f6,#e8e9e9);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden}.product-image:before{content:attr(data-emoji);
  font-size:91px;
  opacity:.88;
}.product-name{font-weight:600;
  padding:15px 9px 4px;
  display:block;
  min-height:64px}.product-price{font-weight:700;
  font-size:16px}.product-card .quick{margin:12px auto 0;
  background:white;
  border:1px solid #aaa;
  color:#333;
  padding:8px 16px;
  display:inline-block}.product-card .quick:hover{background:#f3f5f6}.connect{background:#f7f7f7;
  text-align:center;
  padding:55px 15px}.connect p{max-width:800px;
  margin:15px auto;
  font-size:15px;
  color:#555}.safety-banner{background:#1d4868;
  color:#fff}.safety-inner{display:grid;
  grid-template-columns:1fr 1fr;
  min-height:295px}.safety-text{padding:45px 48px}.safety-text h2{
  font-size:30px}.safety-image{display:flex;
  align-items:center;
  justify-content:center;
  background:#7792a2;
  font-size:120px}.breadcrumb{padding:24px 0;
  color:#777;
  font-size:12px}.breadcrumb a{color:#45687e}.page-title{font-size:28px;
  margin:12px 0 25px}.catalog-head{display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px}.sort{padding:8px;
  border:1px solid #ddd;
  background:white}.catalog{padding-bottom:65px}.category-note{border-top:1px solid #ddd;
  margin-top:55px;
  padding-top:25px}.category-note h2{
  text-transform:uppercase;
  font-size:22px}.product-layout{display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding-bottom:70px}.detail-photo{min-height:475px;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative}.detail-photo:before{content:attr(data-emoji);
  font-size:170px;
  filter:grayscale(.6)}.detail-photo:after{content:'GREYSTONE';
  position:absolute;
  top:64%;
  color:#415e71;
  font-size:23px;
  font-weight:700;
  letter-spacing:2px}.detail-info h1{
  font-size:29px;
  margin:0 0 15px}.detail-price{font-size:27px;
  font-weight:700}.detail-info label{display:block;
  margin-top:20px;
  margin-bottom:6px;
  font-weight:700}.detail-info select,.detail-info input{border:1px solid #ccc;
  padding:11px;
  min-width:180px}.detail-info .add{margin-top:25px;
  padding:14px 35px;
  background:var(--navy);
  color:white;
  border:0;
  font-weight:700}.demo-note{background:#fff9ed;
  border:1px solid #f1d8aa;
  padding:13px;
  margin:22px 0;
  color:#735d30}.ecwid-wrapper{min-height:300px;
  padding:25px 0 90px}.simple-card{max-width:740px;
  padding:35px;
  border:1px solid #e1e1e1;
  margin:30px auto 65px}.simple-card input{padding:12px;
  border:1px solid #ddd;
  width:100%;
  margin:8px 0 16px}.footer{background:#303237;
  color:#dedede;
  padding:45px 0 15px}.foot-cols{display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:28px}.footer h3{
  font-size:15px;
  color:white;
  margin-top:0}.footer a{display:block;
  margin-bottom:10px;
  font-size:13px}.footer a:hover{text-decoration:underline}.footer-logo{width:160px;
  filter:brightness(1.8)}.footer-bottom{border-top:1px solid #5a5a5a;
  margin-top:30px;
  padding-top:15px;
  font-size:12px;
  color:#aaa}.newsletter{background:#eee;
  padding:35px 0}.newsletter-inner{display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center}.newsletter input{height:42px;
  width:min(400px,40vw);
  border:1px solid #ddd;
  padding:0 12px}.newsletter button{height:42px;
  background:var(--navy);
  color:#fff;
  border:0;
  padding:0 20px}.footnote{font-size:12px;
  color:#777}.hide{display:none!important}@media(max-width:950px){.main-header{gap:15px;
  min-height:105px}.brand-logo{width:170px;
  height:96px}nav a{padding:14px 12px}.categories,.feature-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.foot-cols{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.utility{display:none}.main-header{flex-wrap:wrap;
  padding:10px 14px;
  gap:4px}.brand-logo{height:75px;
  width:135px}.header-side{margin-left:auto;
  gap:8px}.header-side a{font-size:11px}.mobile-toggle{display:block;
  width:100%;
  padding:12px 18px;
  border:0;
  text-align:left;
  color:#fff;
  background:var(--navy)}nav{display:none;
  flex-direction:column;
  align-items:stretch}nav.open{display:flex}nav a{border-bottom:1px solid #eee}.slide,.slides,.hero{min-height:365px}.slide{background:linear-gradient(100deg,#244763,#68859a)}
.hero-copy{width:100%;
  padding:35px 22px}
.hero h1{
  font-size:30px}
.hero-art{right:5%;
  top:50%;
  font-size:75px;
  opacity:.3}
.section{padding:35px 0}
.categories{gap:10px}
.cat-tile{min-height:200px}
.cat-tile:before{font-size:75px}
.cat-tile span{font-size:12px}
.feature-grid,.product-grid{gap:10px}
.product-image{height:180px}
.product-image:before{font-size:68px}
.product-name{font-size:12px}
.safety-inner,.product-layout{grid-template-columns:1fr}
.safety-image{min-height:150px;
  font-size:70px}
.safety-text{padding:25px}
.detail-photo{min-height:320px}
.foot-cols{grid-template-columns:1fr 1fr}
.newsletter-inner{display:block}
.newsletter input{width:60vw}
.header-side .acct-label{display:none}}


/* Astec-reference inspired four-image category block. Editable per HTML file. */
.category-showcase{background:#f4f4f4;
  padding:90px 0 92px}
.category-showcase .container{max-width:1268px}
.category-showcase .section-title{position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
.category-showcase .categories{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 25px}
.category-showcase .cat-tile{position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:232px;
  aspect-ratio:2.58/1;
  isolation:isolate;
  overflow:hidden;
  padding:0 40px;
  background:#345b69;
  background-size:cover;
  background-position:center;
  transition:filter .2s}
.category-showcase .cat-tile:nth-child(even){
  background-color:#345b69}
.category-showcase .cat-tile::before{content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.02) 65%);
  opacity:1}
.category-showcase .cat-tile:hover{filter:brightness(1.09)}
.category-showcase .cat-tile span{display:inline-flex;
  align-items:center;
  gap:9px;
  background:none;
  width:auto;
  text-align:left;
  padding:0;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 8px #0005;
  font:900 clamp(24px,2.9vw,39px)/1.1 'Arial Narrow','Impact',sans-serif;
  letter-spacing:-.7px;
  position:relative;
  z-index:2}
.category-showcase .cat-tile span::after{content:'›';
  font:400 37px/1 Arial,sans-serif}
.category-showcase .cat-tile .category-product{position:absolute;
  z-index:1;
  right:3%;
  bottom:-5%;
  width:54%;
  height:108%;
  object-fit:contain;
  object-position:right bottom;
  filter:drop-shadow(2px 6px 9px #0004);
  pointer-events:none}
.category-showcase .cat-headwear{background-image:linear-gradient(125deg,#1b4b52a8,#376f4c33),url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=85')}
.category-showcase .cat-mens{background-image:linear-gradient(125deg,#13506d5c,#9ac1c041),url('https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1200&q=85')}
.category-showcase .cat-womens{background-image:linear-gradient(125deg,#26729aa0,#6ca5db1a),url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1200&q=85')}
.category-showcase .cat-accessories{background-image:linear-gradient(125deg,#38667a7c,#0b4d7042),url('https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?auto=format&fit=crop&w=1200&q=85')}
@media(max-width:850px){.category-showcase{padding:50px 0}
.category-showcase .categories{gap:15px}
.category-showcase .cat-tile{min-height:180px;
  padding:0 22px}
.category-showcase .cat-tile span{font-size:27px}
.category-showcase .cat-tile .category-product{width:60%}}
@media(max-width:620px){.category-showcase{padding:28px 0}
.category-showcase .categories{grid-template-columns:1fr;
  gap:16px}
.category-showcase .cat-tile{min-height:185px;
  aspect-ratio:2.5/1}
.category-showcase .cat-tile span{font-size:27px}}

/* Navigation Astec-style sur toutes les pages */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');
.nav-shell{background:#424041 !important;
  border-top:0 !important;
  border-bottom:1px solid #656264 !important;
  position:relative;
  z-index:30}
.nav-shell #nav{max-width:1200px;
  margin:0 auto;
  min-height:49px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:31px;
  padding:0 15px;
  flex-wrap:nowrap}
.nav-shell #nav a{font-family:'Oswald','Arial Narrow',sans-serif !important;
  color:#fff !important;
  font-size:19px !important;
  font-weight:400 !important;
  letter-spacing:.05px !important;
  white-space:nowrap;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:0 1px !important;
  background:transparent !important;
  border:0 !important;
  line-height:1.1;
  text-decoration:none;
  transition:opacity .18s ease}
.nav-shell #nav a:hover,.nav-shell #nav a:focus-visible{color:#fff !important;
  opacity:.72}
.nav-shell #nav a.active{color:#fff !important;
  text-decoration:underline;
  text-underline-offset:7px;
  text-decoration-thickness:2px}
.nav-shell .mobile-toggle{display:none !important}
@media(max-width:1000px){.nav-shell #nav{gap:18px}
.nav-shell #nav a{font-size:17px !important}}
@media(max-width:750px){.nav-shell .mobile-toggle{display:block !important;
  width:100%;
  background:#424041 !important;
  color:#fff;
  border:0;
  text-align:left;
  padding:15px 20px;
  font-family:'Oswald',sans-serif;
  font-size:19px;
  text-transform:uppercase}
.nav-shell #nav{display:none !important;
  min-height:0;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:4px 19px 16px;
  gap:0}
.nav-shell #nav.open{display:flex !important}
.nav-shell #nav a{min-height:44px;
  justify-content:flex-start;
  font-size:19px !important;
  border-bottom:1px solid #5e5b5c !important}}


/* Greystone : les 4 bannières en 2 colonnes sur grand écran */
.category-showcase .categories {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width:620px) { .category-showcase .categories {
   grid-template-columns: 1fr;
} }


/* =============================================================
   ACCUEIL : PHOTOS DU CARROUSEL
   Change les images dans index.html : images/banner-1.svg, etc.
   Tu peux utiliser des .jpg ou des .png (1920 x 650 recommandé).
   ============================================================= */
.hero .slide {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.hero .hero-copy {
  width: min(570px, 100%);
  max-width: 570px;
  padding: 38px 45px;
  margin: 30px 0;
  background: rgba(24, 49, 68, .55);
}
.hero .hero-copy h1 { color: #fff; }
@media(max-width:650px) {
  .hero .hero-copy {
    margin: 16px 0;
    padding: 25px 22px;
    width: 100%;
  }
}

.main-header > a > img {
    width: 150px !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

/* GREYSTONE SHOP BY CATEGORY */

.category-showcase {
  padding: 45px 0;
}

.category-showcase .categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.category-showcase .cat-tile {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1011 / 389;
  border-radius: 0;
  background: transparent;
}

.category-showcase .cat-tile img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 0.4s ease;
}

.category-showcase .cat-tile:hover img {
  transform: scale(1.04);
}

/* MOBILE */
@media (max-width: 768px) {
  .category-showcase .categories {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* GREYSTONE SHOP BY CATEGORY */

.category-showcase {
  padding: 45px 0;
}

.category-showcase .categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.category-showcase .cat-tile {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1011 / 389;
  border-radius: 0;
  background: transparent;
}

.category-showcase .cat-tile img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 0.4s ease;
}

.category-showcase .cat-tile:hover img {
  transform: scale(1.04);
}

/* MOBILE */
@media (max-width: 768px) {
  .category-showcase .categories {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* FOOTER CREDITS AND ECWID */

#greystone-footer .gs-footer-credits {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#greystone-footer .gs-footer-ecwid {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #858d95;
  letter-spacing: 0.3px;
  margin: 0;
}

@media (max-width: 600px) {
  #greystone-footer .gs-footer-credits {
    align-items: center;
    text-align: center;
  }
}


/* =====================================================
   GREYSTONE — FEATURED PRODUCTS CAROUSEL
   ASTEC INSPIRED DESIGN
===================================================== */

/* MAIN SECTION */

.gs-featured {
  background: #ffffff;
  padding: 65px 0 75px;
  overflow: hidden;
}

.gs-featured .container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 22px;
}

/* CENTERED TITLE */

.gs-featured .gs-featured-title {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  text-align: center;
  color: #343434;
  margin: 0 0 45px;
}

/* CAROUSEL LAYOUT */

.gs-carousel {
  position: relative;
  padding: 0 55px;
}

.gs-carousel-viewport {
  width: 100%;
  overflow: hidden;
}

/* PRODUCTS TRACK */

.gs-carousel-track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* FOUR PRODUCTS ON DESKTOP */

.gs-featured .gs-product {
  flex: 0 0 calc((100% - 72px) / 4);
  min-width: 0;
  text-align: center;
}

.gs-featured .gs-product a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* PRODUCT IMAGES */

.gs-featured .gs-product-image {
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.gs-featured .gs-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.gs-featured .gs-product a:hover img {
  transform: scale(1.04);
}

/* PRODUCT NAMES */

.gs-featured .gs-product h3 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: #424041;
  text-align: center;
  margin: 25px 0 8px;
}

/* BLACK ARROWS */

.gs-featured .gs-carousel-arrow {
  position: absolute;
  z-index: 5;
  top: 135px;
  transform: translateY(-50%);

  width: 40px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 0;

  font-size: 21px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gs-featured .gs-carousel-arrow:hover {
  background: #424041;
}

.gs-featured .gs-carousel-prev {
  left: 0;
}

.gs-featured .gs-carousel-next {
  right: 0;
}

/* =====================================================
   TABLET — TWO PRODUCTS
===================================================== */

@media (max-width: 991px) {

  .gs-featured .gs-product {
    flex-basis: calc((100% - 24px) / 2);
  }

  .gs-featured .gs-product-image {
    height: 245px;
  }

  .gs-featured .gs-carousel-arrow {
    top: 122px;
  }

}

/* =====================================================
   MOBILE — ONE PRODUCT
===================================================== */

@media (max-width: 600px) {

  .gs-featured {
    padding: 45px 0 55px;
  }

  .gs-featured .gs-featured-title {
    font-size: 19px;
    margin-bottom: 19px;
  }

  .gs-carousel {
    padding: 0 43px;
  }

  .gs-featured .gs-product {
    flex-basis: 100%;
  }

  .gs-featured .gs-product-image {
    height: 260px;
  }

  .gs-featured .gs-product h3 {
    font-size: 22px;
    margin-top: 20px;
  }

  .gs-featured .gs-carousel-arrow {
    top: 130px;
    width: 35px;
    height: 35px;
    font-size: 15px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .gs-carousel-track,
  .gs-featured .gs-product-image img {
    transition: none;
  }
}


/* GREYSTONE HERO BANNER */

.hero .slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  image-rendering: auto;
}

.hero,
.hero .slides,
.hero .slide {
  min-height: 445px;
}