/* ============================================================
   AC MENZ WEAR — Phase 1 brand layer
   Visual redesign only. Loaded last. Does not rename selectors
   used by Django or JavaScript. Dual-selects cover CSS/HTML
   class spelling mismatches already present in base.html.
   ============================================================ */

:root{
  --nav-h:72px;

  --ink:#161513;
  --paper:#F6F4F0;
  --surface:#FFFFFF;
  --muted:#6B6560;
  --line:#E4DFD6;
  --soft:#F3F0EA;
  --brass:#8C734B;
  --brass-soft:rgba(140,115,75,.16);

  --brand:#161513;
  --gold:#8C734B;

  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;

  --text-xs:clamp(.68rem,.8vw,.75rem);
  --text-sm:clamp(.82rem,.9vw,.9rem);
  --text-md:clamp(.92rem,1vw,1rem);
  --text-lg:clamp(1.05rem,1.4vw,1.25rem);
  --text-xl:clamp(1.35rem,2.2vw,2rem);

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:clamp(2rem,4vw,3.5rem);

  --radius:2px;
  --radius-sm:2px;
  --shadow:0 1px 0 rgba(22,21,19,.04);
  --shadow-heavy:0 18px 40px rgba(22,21,19,.08);
  --focus:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  --container:min(1200px, calc(100% - clamp(1.5rem, 4vw, 3rem)));
  --touch:44px;
}

@media (max-width:991.98px){
  :root{ --nav-h:64px; }
}

/* ---------- Base layout ---------- */

html{
  max-width:100%;
  overflow-x:hidden;
}

body{
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font-ui);
  font-size:var(--text-md);
  font-weight:400;
  line-height:1.55;
  letter-spacing:.01em;
  max-width:100%;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  line-height:1.15;
}

a{ color:inherit; }
a:hover{ color:var(--ink); opacity:1; }

img,svg,video{ max-width:100%; }

#main,
main#main{
  min-width:0;
}

.container,
.container-fluid,
.container-lg,
.container-xl{
  max-width:1200px;
}

/* ---------- Buttons ---------- */

.btn{
  border-radius:var(--radius);
  font-family:var(--font-ui);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.7rem 1.15rem;
  min-height:var(--touch);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border-width:1px;
  box-shadow:none;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus{
  box-shadow:var(--focus);
}

.btn-primary,
.btn-dark{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus{
  background:#2a2825;
  border-color:#2a2825;
  color:#fff;
}

.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-light{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}

.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.btn-danger{
  background:#7a2e2e;
  border-color:#7a2e2e;
  color:#fff;
}

.btn-danger:hover,
.btn-danger:focus{
  background:#5e2323;
  border-color:#5e2323;
  color:#fff;
}

.btn-sm{
  min-height:40px;
  padding:.45rem .8rem;
  font-size:.78rem;
}

/* ---------- Inputs ---------- */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-height:var(--touch);
  font-family:var(--font-ui);
  font-size:1rem;
  box-shadow:none;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:var(--ink);
  background:var(--surface);
  color:var(--ink);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder{
  color:#9a948c;
}

.form-label{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
}

/* ---------- Header ---------- */

#header{
  width:100%;
  left:0;
  right:0;
  background:var(--surface) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  min-height:var(--nav-h);
  z-index:9997;
}

#header.header-scrolled,
#header.header-inner-pages{
  background:var(--surface) !important;
  box-shadow:none !important;
  border-bottom:1px solid var(--line) !important;
}

#header .ac-header-inner,
#header .ac-header-inner,
#header .ac-header-inner{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(.5rem, 2vw, 1.25rem);
  width:100%;
  max-width:1200px;
  min-width:0;
}

.brand-mark{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  text-decoration:none;
  color:var(--ink) !important;
  line-height:1;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing:.12em;
}

.brand-ac,
.brand-men,
.brand-wear,
.brand-mark .brand-ac,
.brand-mark .brand-men,
.brand-mark .brand-wear{
  color:var(--ink);
}

.brand-z,
.brand-mark .brand-z{
  color:var(--brass);
  text-shadow:none;
}

/* ---------- Navigation ---------- */

#navbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(.35rem, 1.2vw, .85rem);
  min-width:0;
  flex:1 1 auto;
}

#navbar > ul{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  flex:1 1 auto;
  min-width:0;
}

#navbar .nav-link,
#navbar > ul > li > a{
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:500;
  font-size:clamp(.78rem, .95vw, .88rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.55rem .7rem;
  border-radius:0;
  background:transparent;
  min-height:var(--touch);
  display:inline-flex;
  align-items:center;
}

#navbar .nav-link:hover,
#navbar .nav-link.active,
#navbar > ul > li > a:hover,
#navbar > ul > li > a.active{
  color:var(--ink);
  background:transparent;
  box-shadow:inset 0 -1px 0 var(--ink);
}

#navbar .dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink);
  font-weight:500;
}

#navbar .dropdown ul{
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow-heavy);
  overflow:hidden;
  background:var(--surface);
}

#navbar .dropdown ul a{
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:none;
  padding:.7rem 1rem;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.45rem;
  flex:0 0 auto;
  margin:0;
}

.search-quick,
.search-quick,
.cart-quick,
.cart-quick,
.mobile-nav-toggle{
  width:var(--touch) !important;
  height:var(--touch) !important;
  min-width:var(--touch) !important;
  min-height:var(--touch) !important;
  max-width:var(--touch) !important;
  max-height:var(--touch) !important;
  border-radius:var(--radius) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  transform:none !important;
}

.search-quick,
.search-quick{
  color:var(--ink) !important;
  cursor:pointer;
}

.search-quick i,
.search-quick i,
.mobile-nav-toggle{
  font-size:1.15rem !important;
  line-height:1;
}

.search-quick:hover,
.search-quick:hover,
.cart-quick:hover,
.cart-quick:hover,
.mobile-nav-toggle:hover{
  border-color:var(--ink) !important;
  background:var(--surface) !important;
  transform:none !important;
}

.cart-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}

.cart-icon .nav-cart-badge,
.nav-cart-badge{
  position:absolute;
  top:-7px;
  right:-9px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--ink) !important;
  color:#fff !important;
  border:0 !important;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:10px;
  line-height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
}

@media (min-width:992px){
  .mobile-nav-toggle{ display:none !important; }
  #navbar .nav-cart{ display:none !important; }
}

@media (max-width:1199.98px) and (min-width:992px){
  #navbar .nav-link,
  #navbar > ul > li > a{
    padding:.5rem .45rem;
    font-size:.74rem;
  }
}

@media (max-width:991.98px){
  #header{
    min-height:var(--nav-h) !important;
    height:auto !important;
    background:var(--surface) !important;
  }

  #header .ac-header-inner,
  #header .ac-header-inner,
  #header .ac-header-inner{
    min-height:var(--nav-h) !important;
    height:auto !important;
    padding:8px 12px !important;
    gap:8px !important;
    max-width:100% !important;
  }

  .brand-mark{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 168px) !important;
    font-size:clamp(1.05rem, 5.2vw, 1.4rem) !important;
    letter-spacing:.1em !important;
  }

  #navbar{
    flex:0 0 auto !important;
    width:auto !important;
  }

  #navbar > ul{ display:none !important; }
  #navbar.navbar-mobile > ul{ display:block !important; }

  .header-actions{
    gap:6px !important;
  }
}

@media (max-width:380px){
  .brand-mark{
    max-width:calc(100vw - 158px) !important;
    font-size:1.02rem !important;
    letter-spacing:.06em !important;
  }
}

/* ---------- Mobile drawer ---------- */

#drawerOverlay{
  background:rgba(22,21,19,.48);
}

@media (max-width:991.98px){
  #navbar.navbar-mobile{
    width:min(88vw, 400px) !important;
    max-width:100% !important;
    padding:24px 18px 32px !important;
    background:var(--surface) !important;
    box-shadow:24px 0 60px rgba(22,21,19,.16) !important;
    overflow-x:hidden !important;
  }

  #navbar.navbar-mobile .drawer-head,
  #navbar.navbar-mobile .drawer-head,
  #navbar.navbar-mobile .drawer-head{
    margin:0 0 16px;
    padding:0 52px 16px 0;
    border-bottom:1px solid var(--line);
  }

  .avatar-circle{
    background:var(--ink);
    box-shadow:none;
    flex:0 0 44px;
  }

  .drawer-user-meta strong{
    font-family:var(--font-display);
    font-size:1.2rem;
    font-weight:600;
    color:var(--ink);
  }

  .drawer-user-meta .links a{
    color:var(--ink);
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:2px;
  }

  #navbar.navbar-mobile .nav-link,
  #navbar.navbar-mobile .dropdown > a{
    min-height:var(--touch);
    padding:12px 4px;
    font-size:1rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink);
  }

  #navbar.navbar-mobile .nav-link:hover,
  #navbar.navbar-mobile .dropdown > a:hover{
    color:var(--ink);
  }

  #navbar.navbar-mobile .dropdown ul{
    border-radius:var(--radius);
    background:var(--soft);
    border:1px solid var(--line);
  }

  #navbar.navbar-mobile .dropdown ul li a{
    min-height:40px;
    padding:10px 0;
    color:var(--muted);
    font-weight:500;
  }

  #navbar.navbar-mobile .header-actions{
    top:12px !important;
    right:12px !important;
  }

  #navbar.navbar-mobile .mobile-nav-toggle{
    width:var(--touch) !important;
    height:var(--touch) !important;
    min-width:var(--touch) !important;
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    box-shadow:none !important;
  }
}

/* ---------- Search overlay ---------- */

.premium-search-overlay,
.premium-search-overlay,
.premium-search-overlay{
  padding:clamp(72px, 12vw, 120px) 16px 20px;
  background:rgba(22,21,19,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.premium-search-box,
.premium-search-box{
  width:min(720px,100%);
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-heavy);
  padding:clamp(1.25rem, 3vw, 2rem);
}

.premium-search-close,
.premium-search-close{
  width:var(--touch);
  height:var(--touch);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-weight:500;
}

.premium-search-kicker,
.premium-search-kicker{
  color:var(--brass);
  font-family:var(--font-ui);
  font-weight:500;
  letter-spacing:.18em;
  font-size:var(--text-xs);
}

.premium-search-box h3,
.premium-search-box h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-xl);
  letter-spacing:.01em;
}

.premium-search-form,
.premium-search-form{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:6px 6px 6px 14px;
  box-shadow:none;
}

.premium-search-form i,
.premium-search-form i{ color:var(--ink); }

.premium-search-form input,
.premium-search-form input{
  font-family:var(--font-ui);
  font-weight:400;
  min-width:0;
}

.premium-search-form button,
.premium-search-form button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius);
  background:var(--ink);
  color:#fff;
  font-family:var(--font-ui);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 18px;
  min-height:var(--touch);
  box-shadow:none;
  white-space:nowrap;
}

.premium-search-hints,
.premium-search-hints{
  gap:8px;
  color:var(--muted);
}

.premium-search-hints a,
.premium-search-hints a{
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:500;
  padding:8px 12px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
}

.premium-search-hints a:hover,
.premium-search-hints a:hover{
  transform:none;
  border-color:var(--ink);
}

@media (max-width:575.98px){
  .premium-search-form,
  .premium-search-form{
    flex-wrap:wrap;
    padding:10px;
  }

  .premium-search-form input,
  .premium-search-form input{
    flex:1 1 100%;
    min-height:44px;
  }

  .premium-search-form button,
  .premium-search-form button{
    width:100%;
    display:flex !important;
  }
}

/* ---------- Personal offer (visual only) ---------- */

.personal-offer-wrap,
.personal-offer-wrap{
  max-width:1200px;
}

.personal-offer-card,
.personal-offer-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:none;
}

.personal-offer-kicker,
.personal-offer-kicker{
  color:var(--brass);
  letter-spacing:.12em;
}

.personal-offer-action,
.personal-offer-action{
  border-radius:var(--radius);
  background:var(--ink);
  min-height:var(--touch);
}

/* ---------- Footer ---------- */

#footer.ft-modern,
#footer{
  background:var(--surface);
  color:var(--ink);
  overflow:hidden;
}

#footer .ft-bg,
#footer .ft-bg{
  background:none;
}

#footer .footer-top{
  padding:clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
}

#footer .ft-heading,
#footer .ft-heading,
#footer .ft-heading{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:14px;
  color:var(--ink);
  padding-bottom:8px;
}

#footer .ft-heading:after,
#footer .ft-heading:after,
#footer .ft-heading:after{
  background:var(--ink);
  height:1px;
  right:40%;
  border-radius:0;
}

#footer .ft-contact,
#footer .ft-contact{
  color:var(--muted);
  overflow-wrap:anywhere;
  word-break:break-word;
}

#footer .ft-contact li span,
#footer .ft-contact li span{
  color:var(--ink);
  font-weight:600;
}

#footer .ft-links a,
#footer .ft-links a{
  color:var(--muted);
  min-height:40px;
}

#footer .ft-links a:hover,
#footer .ft-links a:hover{
  color:var(--ink);
  transform:none;
}

#footer .ft-links i,
#footer .ft-links i{ color:var(--brass); }

#footer .ft-sub,
#footer .ft-sub{ color:var(--muted); }

#footer .ft-newsletter,
#footer .ft-newsletter{
  display:flex;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px;
  box-shadow:none;
  max-width:100%;
}

#footer .ft-newsletter input,
#footer .ft-newsletter input{
  min-width:0;
  width:100%;
  min-height:44px;
  font-size:1rem;
}

#footer .ft-btn,
#footer .ft-btn{
  border:0;
  padding:10px 16px;
  min-height:44px;
  border-radius:var(--radius);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  box-shadow:none;
  white-space:nowrap;
}

#footer .ft-btn:hover,
#footer .ft-btn:hover{
  transform:none;
  filter:none;
  background:#2a2825;
  box-shadow:none;
}

#footer .ft-follow,
#footer .ft-follow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

#footer .ft-social a,
#footer .ft-bottom-social a,
#footer .ft-social a,
#footer .ft-bottom .ft-bottom-social a{
  width:44px;
  height:44px;
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
}

#footer .ft-social a:hover,
#footer .ft-bottom-social a:hover,
#footer .ft-social a:hover,
#footer .ft-bottom .ft-bottom-social a:hover{
  transform:none;
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:none;
}

#footer .ft-bottom,
#footer .ft-bottom{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:14px 0 18px;
}

#footer .ft-credit,
#footer .ft-credit{
  color:var(--muted);
  border-bottom:1px solid var(--line);
}

#footer .ft-credit:hover,
#footer .ft-credit:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

@media (max-width:767.98px){
  #footer .ft-newsletter,
  #footer .ft-newsletter{
    flex-direction:column;
    border-radius:var(--radius);
    padding:10px;
  }

  #footer .ft-btn,
  #footer .ft-btn{ width:100%; }

  #footer .ft-follow,
  #footer .ft-follow{ justify-content:flex-start; }

  #footer .ft-bottom .d-flex{
    text-align:center;
  }
}

/* ---------- Back to top ---------- */

.back-to-top{
  width:44px;
  height:44px;
  border-radius:var(--radius);
  background:var(--ink);
  box-shadow:none;
  right:12px;
  bottom:12px;
}

.back-to-top i{ color:#fff; font-size:22px; }

.back-to-top:hover{
  background:#2a2825;
  color:#fff;
}

/* Large screens: keep a readable measure, no stretched header */
@media (min-width:1440px){
  #header .ac-header-inner,
  #header .ac-header-inner,
  #header .ac-header-inner,
  #footer .container,
  #main > .container{
    max-width:1240px;
  }
}

/* Exact HTML class names from templates/base.html (aliases only) */
#header .ac-header-inner{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(.5rem, 2vw, 1.25rem);
  width:100%;
  max-width:1200px;
  min-width:0;
}

.search-quick,
.cart-quick{
  width:var(--touch) !important;
  height:var(--touch) !important;
  min-width:var(--touch) !important;
  min-height:var(--touch) !important;
  max-width:var(--touch) !important;
  max-height:var(--touch) !important;
  border-radius:var(--radius) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
  color:var(--ink) !important;
}

.premium-search-overlay.show,
.premium-search-overlay.show{
  opacity:1;
  visibility:visible;
}

.premium-search-box,
.premium-search-close,
.premium-search-kicker,
.premium-search-form,
.premium-search-hints{
  border-radius:var(--radius);
}

.premium-search-form button{
  display:inline-flex !important;
  min-height:var(--touch);
}

#footer .ft-heading,
#footer .ft-contact,
#footer .ft-links,
#footer .ft-sub,
#footer .ft-newsletter,
#footer .ft-btn,
#footer .ft-follow,
#footer .ft-social,
#footer .ft-bottom,
#footer .ft-credit{
  max-width:100%;
}

#navbar.navbar-mobile .drawer-head{
  margin:0 0 16px;
  padding:0 52px 16px 0;
  border-bottom:1px solid var(--line);
}

@media (max-width:991.98px){
  #header .ac-header-inner{
    min-height:var(--nav-h) !important;
    height:auto !important;
    padding:8px 12px !important;
    gap:8px !important;
    max-width:100% !important;
  }
}

@media (max-width:575.98px){
  .premium-search-form button,
  .premium-search-form button{
    width:100%;
    display:flex !important;
  }

  #footer .ft-newsletter{
    flex-direction:column;
  }

  #footer .ft-btn{
    width:100%;
  }
}