/* ======================================================================
   Hustob Clothier · Global Design System  (site.css)
   Updated: 2025‑06‑23
   ====================================================================== */

/* Google Font ---------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ─────────── Design Tokens ───────────────────────────────────────────*/
:root{
  --hc-dark:       #1E1E1E;
  --hc-light:      #ffffff;
  --hc-accent:     #D4AF37;
  --hc-border:     #e5e5e5;

  --hc-font:       'Inter', sans-serif;
  --hc-gap:        clamp(.75rem, 1.5vw, 1.5rem);
  --hc-max-width:  1280px;
  --hc-dur:        .3s;
}

/* ─────────── Reset / Base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--hc-font);
  font-size:clamp(.9rem, 1vw + .4rem, 1rem);
  line-height:1.55;
  color:var(--hc-dark);
  background:var(--hc-light);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color var(--hc-dur) ease;}
button{font:inherit;cursor:pointer;background:none;border:none;}
img{max-width:100%;display:block;height:auto;}
body.no-scroll{overflow:hidden;}

/* Screen-reader utility */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip-link */
.hc-skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.hc-skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:1100;
  padding:.5rem 1rem;background:var(--hc-accent);color:#fff;border-radius:4px;
}

/* SVG icon helper */
.hc-icon{
  width:1.35rem;height:1.35rem;flex:none;vertical-align:-.15rem;
  color:var(--hc-dark);transition:color var(--hc-dur) ease;
}
button:hover .hc-icon,
.hc-cart:hover .hc-icon{color:var(--hc-accent);}

/* ─────────── Header ──────────────────────────────────────────────── */
.hc-header{
  position:sticky;top:0;z-index:1000;width:100%;
  background:#fff;border-bottom:1px solid var(--hc-border);
  padding:clamp(.75rem,1.5vw,1rem) 1rem;
  transition:padding var(--hc-dur) ease,box-shadow var(--hc-dur) ease;
}
.hc-header--shrink{
  padding:.4rem 1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.hc-container{
  max-width:var(--hc-max-width);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--hc-gap);
}

/* Logo */
.hc-logo img{height:clamp(40px,4vw,48px);width:auto;}

/* ─── Desktop Navigation ─────────────────────────────────────────── */
.hc-nav{display:flex;}
.hc-nav-list{
  display:flex;
  align-items:center; /* ensure common baseline */
  gap:calc(var(--hc-gap)*1.4);
  margin:0;padding:0;list-style:none;
}

/*  Nav links & “Shop” dropdown trigger share the same inline‑flex box  */
.hc-nav-link,
.dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  line-height:1;
  vertical-align:middle;
  font-weight:500;
  padding:.5rem;
  border-radius:4px;
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
  position:relative;
  transition:color var(--hc-dur) ease;
}

/* underline hover / focus */
.hc-nav-link::after,
.dropdown-toggle::after{
  content:'';position:absolute;left:0;right:0;bottom:.2rem;height:2px;
  background:var(--hc-accent);opacity:0;transform:scaleX(0);
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.hc-nav-link:hover::after,
.hc-nav-link:focus::after,
.dropdown-toggle:hover::after,
.dropdown-toggle:focus::after{opacity:1;transform:scaleX(1);}
.hc-nav-link:hover,
.hc-nav-link:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus{color:var(--hc-accent);outline:none;}

/* ─── “Shop” dropdown when categories > 6 ────────────────────────── */
.nav-dropdown{position:relative;}
.dropdown-toggle .icon-caret-down{
  width:.55rem;height:.55rem;flex:none;
  border:solid currentColor;border-width:0 1px 1px 0;
  display:inline-block;padding:3px;transform:rotate(45deg);
  margin-top:1px; /* optical tweak */
}
.dropdown-menu{
  position:absolute;left:0;top:100%;min-width:220px;
  background:#fff;color:#1E1E1E;border:1px solid var(--hc-border);
  border-radius:4px;padding:.75rem 0;box-shadow:0 8px 24px rgba(0,0,0,.08);
  opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
  z-index:50;
  margin-top:.35rem; /* uniform gap */
}
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.dropdown-menu a{
  display:block;padding:.55rem 1.25rem;font-size:.95rem;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus{background:#f6f6f6;color:inherit;}
@media (max-width:768px){
  .nav-dropdown{display:none;}   /* drawer handles cats on mobile */
}

/* ─── Controls cluster ──────────────────────────────────────────── */
.hc-controls{display:flex;align-items:center;gap:var(--hc-gap);}

/* Search -----------------------------------------------------------*/
.hc-search{position:relative;width:max(130px,26vw);} /* 26vw ensures it never overflows */
.hc-search input{
  width:100%;padding:.45rem 2.4rem .45rem .6rem;
  border:1px solid var(--hc-border);border-radius:4px;
  transition:width var(--hc-dur) ease;
}
.hc-search button{
  position:absolute;top:50%;right:.55rem;transform:translateY(-50%);
}
@media(max-width:500px){
  .hc-search{width:2.4rem;}
  .hc-search:focus-within{width:70vw;}
}

/* Account dropdown -------------------------------------------------*/
.dropdown-toggle:focus{outline:2px solid var(--hc-accent);outline-offset:2px;}
.dropdown-menu.open{display:block;}

/* Cart badge -------------------------------------------------------*/
.hc-cart{position:relative;display:inline-flex;align-items:center;}
.cart-count{
  position:absolute;top:-6px;right:-10px;
  padding:2px 6px;border-radius:999px;font-size:.7rem;font-weight:600;
  background:var(--hc-accent);color:#fff;
}

/* Hamburger --------------------------------------------------------*/
.hc-hamburger{display:none;flex-direction:column;gap:4px;padding:.5rem;}
.hc-hamburger span{width:22px;height:2px;background:var(--hc-dark);
  transition:background var(--hc-dur) ease;}
@media(hover:hover){.hc-hamburger:hover span{background:var(--hc-accent);}}

/* ─── Mobile drawer ─────────────────────────────────────────────── */
.hc-mobile-nav{
  position:fixed;left:0;top:0;width:80vw;max-width:290px;height:100vh;
  background:#fff;padding:2rem 1rem 3rem;
  transform:translateX(-100%);transition:transform var(--hc-dur) ease;
  box-shadow:2px 0 6px rgba(0,0,0,.1);z-index:1002;
}
.hc-mobile-nav.open{transform:translateX(0);}
.hc-mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.hc-mobile-nav a{font-size:1.1rem;padding:.5rem 0;width:100%;}
.hc-mobile-nav a:hover,
.hc-mobile-nav a:focus{color:var(--hc-accent);}

/* Overlay ----------------------------------------------------------*/
.hc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(1px);opacity:0;visibility:hidden;
  transition:opacity var(--hc-dur) ease,visibility var(--hc-dur) ease;
  z-index:1001;
}
.hc-overlay.open{opacity:1;visibility:visible;}

/* ─── Breakpoints ───────────────────────────────────────────────── */
@media(max-width:992px){
  .hc-nav{display:none;}        /* hide desktop links */
  .hc-hamburger{display:flex;}  /* show burger */
}

/* Reduced-motion users --------------------------------------------*/
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;}
}

/* ─────────── Utility Elements ──────────────────────────────────── */

/* search suggestions dropdown – optional JS enhancement */
.hc-search-suggest{
  position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:240px;
  background:#fff;border:1px solid var(--hc-border);
  box-shadow:0 8px 16px rgba(0,0,0,.08);border-radius:4px;
  list-style:none;margin:0;padding:.25rem 0;overflow-y:auto;
  font-size:.9rem;
}
.hc-search-suggest li a{display:block;padding:.4rem .75rem;}
.hc-search-suggest li a:hover{background:var(--hc-accent);color:#fff;}

/* product grid (home/shop) ----------------------------------------*/
.prod-grid{
  --min:220px;
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
}
.prod-card{
  background:#fff;border:1px solid var(--hc-border);border-radius:6px;
  overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;
}
.prod-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);transform:translateY(-2px);} 
.prod-card img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.prod-card h3{margin:.85rem .9rem .1rem;font-size:1rem;font-weight:500;line-height:1.35;}
.prod-card .price{margin:0 .9rem 1rem;color:var(--hc-accent);font-weight:600;font-size:.95rem;}

/* “Add to Cart” button */
.btn-cart{
  display:block;margin:0 .9rem 1rem;
  padding:.55rem 1rem;border:1px solid var(--hc-accent);
  color:var(--hc-accent);font-size:.9rem;font-weight:600;text-align:center;
  border-radius:4px;transition:background var(--hc-dur) ease,color var(--hc-dur) ease;
}
.btn-cart:hover{background:var(--hc-accent);color:#fff}

/* CTA buttons ------------------------------------------------------*/
.btn-outline{
  display:inline-block;padding:.75rem 1.9rem;border:2px solid var(--hc-accent);
  color:var(--hc-accent);border-radius:4px;font-weight:500;
  transition:background var(--hc-dur) ease,color var(--hc-dur) ease;
}
.btn-outline:hover{background:var(--hc-accent);color:#fff}
.btn-primary{
  display:inline-block;padding:.75rem 1.8rem;border-radius:4px;
  background:var(--hc-accent);color:#fff;font-weight:600;
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);}
.btn-alt{
  display:inline-block;padding:.7rem 1.8rem;background:#fff;color:var(--hc-dark);
  border-radius:4px;font-weight:600;transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.btn-alt:hover{opacity:.88;transform:translateY(-1px);}