/* 2020uniforms.com — redesign v2 (simplified / elegant / placeholder-driven)
   Palette: Ink #1C1B19 · Paper #FAF8F4 · Paper-alt #F1EEE6 · Line #E1DCD0 · Muted #7C7669 · Brass #8B6B3E
   Type: Fraunces (display, restrained) + Inter (body/UI)
*/

:root{
  --ink:#1C1B19;
  --paper:#FAF8F4;
  --paper-alt:#F1EEE6;
  --line:#E1DCD0;
  --muted:#7C7669;
  --brass:#8B6B3E;
  --white:#FFFFFF;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  line-height:1.18;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,3.6vw,2.9rem); font-weight:500;}
h2{font-size:clamp(1.5rem,2.6vw,2rem);}
h3{font-size:1.1rem;font-weight:600;font-family:'Inter',sans-serif;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important;}}

/* eyebrow label */
.eyebrow{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  margin-bottom:10px;
}

/* rule */
.rule{height:1px;background:var(--line);width:100%;border:0;margin:0;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  font-family:'Inter',sans-serif;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid var(--ink);
  cursor:pointer;
  transition:.15s ease;
}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:#000;}
.btn-line{background:transparent;color:var(--ink);}
.btn-line:hover{background:var(--ink);color:var(--paper);}
.btn-line-light{border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-line-light:hover{background:var(--white);color:var(--ink);}

/* ===== header ===== */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(28,27,25,.02);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;
  gap:28px;
}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-img{height:38px;width:auto;max-width:190px;object-fit:contain;display:block;}
nav.primary{display:flex;gap:2px;align-items:center;flex:1;justify-content:center;}
nav.primary > ul{display:flex;gap:6px;}
nav.primary > ul > li{position:relative;}
nav.primary > ul > li > a{
  display:block;
  padding:10px 14px;
  font-size:.83rem;
  font-weight:500;
  color:var(--ink);
  border-radius:2px;
  transition:.15s ease;
}
nav.primary > ul > li > a:hover{color:var(--brass);background:var(--paper-alt);}
.dropdown{
  display:none;
  position:absolute;top:100%;left:0;
  background:var(--white);
  border:1px solid var(--line);
  min-width:230px;
  padding:6px 0;
  box-shadow:0 10px 24px rgba(28,27,25,.08);
}
li:hover > .dropdown{display:block;}
.dropdown a{display:block;padding:9px 18px;font-size:.83rem;color:var(--ink);}
.dropdown a:hover{color:var(--brass);background:var(--paper-alt);}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn-whatsapp{padding:10px 16px;white-space:nowrap;}
.btn-whatsapp svg{flex-shrink:0;}
.mobile-toggle{
  display:none;background:none;border:none;cursor:pointer;color:var(--ink);
  width:38px;height:38px;align-items:center;justify-content:center;
}
.mobile-toggle svg{width:22px;height:22px;}

@media(max-width:1080px){
  nav.primary{display:none;}
  .mobile-toggle{display:flex;}
  .header-cta .btn-whatsapp{display:none;}
}
@media(max-width:640px){
  .header-cta .btn-dark{display:none;}
  .nav-row{height:70px;}
}

/* ===== auto-sliding marquee (custom made uniforms — no arrows) ===== */
.slider-auto{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.slider-auto-track{
  display:flex;gap:22px;width:max-content;
  animation:marquee 26s linear infinite;
}
.slider-auto:hover .slider-auto-track{animation-play-state:paused;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.slider-auto .slide{flex:0 0 260px;}
@media (prefers-reduced-motion: reduce){
  .slider-auto-track{animation:none;}
}

.ph-box{width:100%;overflow:hidden;background:var(--paper-alt);box-shadow:0 1px 0 rgba(28,27,25,.04);}
.ph-box.r-1x1{aspect-ratio:1/1;}
.ph-box.r-4x3{aspect-ratio:4/3;}
.ph-box.r-3x4{aspect-ratio:3/4;}
.ph-box.r-16x9{aspect-ratio:16/9;}
.ph-box img{width:100%;height:100%;object-fit:cover;display:block;}

.logo-img{height:34px;width:auto;display:block;}

/* ===== hero ===== */
.hero .container{
  padding:28px 24px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
}
.hero p.lead{color:var(--muted);font-size:1.05rem;max-width:44ch;}
.hero-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
@media(max-width:860px){
  .hero .container{grid-template-columns:1fr;padding:20px 20px 20px;gap:16px;}
}

/* ===== page banner (inner pages) ===== */
.banner{padding:16px 0 14px;border-bottom:1px solid var(--line);}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:8px;}
.breadcrumb a:hover{color:var(--brass);}
.banner h1{margin-bottom:.1em;}

/* ===== sections ===== */
section{padding:28px 0;}
section + section{border-top:1px solid var(--line);}
.section-alt{background:var(--paper-alt);}
.section-dark{background:var(--ink);color:rgba(250,248,244,.8);}
.section-dark h2{color:var(--white);}
.section-dark .eyebrow{color:#C9B48A;}
.section-head{max-width:560px;margin:0 0 24px;}
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.section-head-row h2{margin-bottom:0;}

/* grid */
.grid{display:grid;gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ===== dense product grid (amazon-style quick browse) ===== */
.product-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px 12px;
}
.p-card{display:block;}
.p-card .thumb{
  aspect-ratio:1/1;background:var(--paper-alt);overflow:hidden;
  border:1px solid var(--line);margin-bottom:6px;
}
.p-card .thumb img{width:100%;height:100%;object-fit:cover;}
.p-card h3{
  font-size:.76rem;font-weight:500;color:var(--ink);line-height:1.3;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-card:hover h3{color:var(--brass);}
@media(max-width:960px){.product-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:600px){.product-grid{grid-template-columns:repeat(3,1fr);gap:10px;}}
@media(max-width:420px){.product-grid{grid-template-columns:repeat(2,1fr);}}

/* ===== slider ===== */
.slider{position:relative;}
.slider-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:thin;
}
.slider-track::-webkit-scrollbar{height:5px;}
.slider-track::-webkit-scrollbar-thumb{background:var(--line);}
.slide{flex:0 0 230px;scroll-snap-align:start;}
.slide .body{padding-top:12px;}
.slide h3{font-size:.9rem;font-weight:600;margin-bottom:2px;}
.slide .price{font-size:.78rem;color:var(--muted);}
.slider-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.slider-nav button{
  width:36px;height:36px;border:1px solid var(--line);background:var(--white);
  cursor:pointer;font-size:1rem;color:var(--ink);
}
.slider-nav button:hover{border-color:var(--ink);}

/* feature list */
.feature-list{display:grid;gap:0;}
.feature{
  display:grid;grid-template-columns:34px 1fr;gap:16px;
  padding:16px 0;border-top:1px solid var(--line);
}
.feature:first-child{border-top:none;}
.feature .num{font-family:'Fraunces',serif;font-size:.95rem;color:var(--brass);padding-top:2px;}
.feature h3{margin-bottom:5px;}
.feature p{color:var(--muted);margin:0;font-size:.92rem;}

/* two column content */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:24px;}}

/* product page: image stays on the side at every width, so size/qty/WhatsApp
   button are visible immediately without scrolling past a full-width image */
.product-layout{
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
}
.product-layout .ph-box{
  background:var(--white);
  border:1px solid var(--line);
  padding:10px;
}
.product-layout .ph-box img{object-fit:contain;}
@media(min-width:480px){
  .product-layout{grid-template-columns:200px 1fr;gap:22px;}
  .product-layout .ph-box{padding:14px;}
}
@media(min-width:640px){
  .product-layout{grid-template-columns:260px 1fr;gap:32px;}
}
@media(min-width:860px){
  .product-layout{grid-template-columns:360px 1fr;gap:44px;}
  .product-layout .ph-box{padding:22px;}
}

/* CTA band */
.cta-band{background:var(--ink);color:var(--paper);padding:24px 0;}
.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-band h2{color:var(--white);margin-bottom:4px;font-size:1.4rem;}
.cta-band p{color:rgba(250,248,244,.65);margin:0;}

/* custom-made slide caption (quality copy instead of a title) */
.quality-line{
  font-size:.85rem;color:var(--muted);margin:0;padding-top:2px;
  line-height:1.5;
}

/* product page size/quantity selector */
.product-options{
  display:grid;grid-template-columns:2fr 1fr;gap:16px;
  margin:22px 0 18px;
}
@media(max-width:480px){.product-options{grid-template-columns:1fr;}}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.03em;color:var(--ink);margin-bottom:6px;}
input,textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--white);
  font-family:'Inter',sans-serif;font-size:.9rem;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brass);outline-offset:1px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* info card */
.info-card{padding:20px 0;border-top:1px solid var(--line);}
.info-card:first-child{border-top:none;}
.info-card h3{margin-bottom:4px;}

/* table */
table.clean{width:100%;border-collapse:collapse;}
table.clean th,table.clean td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:.88rem;}
table.clean th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;}

/* footer */
footer.site{background:var(--ink);color:rgba(250,248,244,.6);}
.footer-top{padding:28px 0 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;}
.footer-top h4{color:var(--white);font-family:'Inter',sans-serif;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-weight:600;}
.footer-top li{margin-bottom:9px;font-size:.85rem;}
.footer-top a:hover{color:var(--white);}
.footer-brand p{font-size:.85rem;max-width:32ch;margin-top:12px;color:rgba(250,248,244,.5);}
.footer-bottom{
  border-top:1px solid rgba(250,248,244,.12);
  padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.76rem;color:rgba(250,248,244,.4);flex-wrap:wrap;gap:10px;
}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;}}

/* whatsapp float */
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:60;
  width:50px;height:50px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;box-shadow:0 8px 18px rgba(0,0,0,.2);
}

/* mobile nav drawer */
/* ===== mobile nav drawer (accordion) ===== */
.mobile-nav{
  display:none;position:fixed;inset:0;background:var(--paper);z-index:100;
  flex-direction:column;
}
.mobile-nav.open{display:flex;}
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.mobile-nav .close{
  background:none;border:1px solid var(--line);border-radius:50%;
  width:36px;height:36px;font-size:1.3rem;line-height:1;color:var(--ink);cursor:pointer;
}
.macc-list{flex:1;overflow-y:auto;padding:6px 22px 20px;}
.macc-link{
  display:block;color:var(--ink);font-size:1rem;font-weight:500;
  padding:16px 0;border-top:1px solid var(--line);
}
.macc{border-top:1px solid var(--line);}
.macc-row{display:flex;align-items:center;justify-content:space-between;}
.macc-row .macc-link{border-top:none;flex:1;}
.macc-toggle{
  background:none;border:none;color:var(--muted);cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
.macc-toggle svg{width:18px;height:18px;}
.macc.open .macc-toggle{transform:rotate(180deg);color:var(--brass);}
.macc-panel{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.macc.open .macc-panel{max-height:600px;}
.macc-panel a{
  display:block;padding:9px 4px 9px 14px;font-size:.9rem;color:var(--muted);
  border-left:2px solid var(--line);
}
.macc-panel a:hover{color:var(--brass);border-left-color:var(--brass);}
.mobile-nav-foot{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 22px 22px;border-top:1px solid var(--line);flex-shrink:0;
}
@media(min-width:1081px){.mobile-nav{display:none!important;}}