/* ==========================================================================
   zegna.css — header, mega menu, homepage modules and footer.

   Built from measurements of zegna.com taken in the browser (Sept 2026):
   header 32px promo + 80px bar, 15px sentence-case menu, 16px icons, a
   four-column panel with 130x173 feature thumbnails and a 360px editorial
   image, full-viewport slides with text 100px off the bottom, 48px white
   buttons, 1:1 service cards, and a newsletter / nearest store / link-column
   footer under a large wordmark.

   Colours are NOT Zegna's: every value comes from the existing palette in
   site.css. Loaded after site.css; uses its own class namespace (zh, zm, zd,
   zs, zsec, zf) so nothing here collides with the older rules.
   ========================================================================== */

:root{
  --zh-promo:32px;
  --zh-bar:80px;
  --zh-h:calc(var(--zh-promo) + var(--zh-bar));
  --z-pad:30px;
  --z-muted:#5F6B6A;        /* Zegna's #707070, taken from our grey family; 5.6:1 on white */
}

/* ══════════════════════════ HEADER ══════════════════════════ */
.zh{position:sticky;inset-block-start:0;z-index:80;background:var(--white)}

.zh-promo{
  height:var(--zh-promo);background:var(--black);color:#fff;position:relative;
  display:flex;align-items:center;justify-content:center;padding-inline:var(--z-pad);
  font-size:13px;line-height:19px;text-transform:uppercase;
}
[lang="fa"] .zh-promo{text-transform:none;font-size:12.5px}
.zh-msg{margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.zh-msg a{font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-inline-start:.2em}
.zh-reg{position:absolute;inset-block:0;inset-inline-end:var(--z-pad);margin:0;display:flex;align-items:center}
.zh-reg .sep{color:#A3A3A3;padding-inline:12px}
.zh-reg a{font-weight:600}
.zh-reg a:hover,.zh-msg a:hover{color:var(--gold)}

.zh-bar{
  position:relative;height:var(--zh-bar);display:flex;align-items:center;
  padding-inline:var(--z-pad);border-block-end:1px solid transparent;transition:border-color .2s;
}
.zh.scrolled .zh-bar,.zh.menu-open .zh-bar{border-block-end-color:var(--line)}

.zh-logo{display:flex;align-items:center;gap:8px;flex:none;color:var(--gold-dk)}
.zh-logo svg{width:36px;height:24px;stroke:currentColor}
.zh-logo span{font-family:var(--f-wm);font-size:20px;line-height:24px;letter-spacing:.16em;text-transform:uppercase}

.zh-nav{margin-inline-start:21px;height:100%}
.zh-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px;height:100%}
.zh-nav li{height:100%;display:flex;align-items:center}
.zh-nav a{
  height:100%;display:flex;align-items:center;white-space:nowrap;
  font-size:15px;line-height:21px;color:var(--ink);transition:color .15s;
}
.zh-nav a:hover,.zh-nav li.open>a{color:var(--teal)}

.zh-tools{margin-inline-start:auto;display:flex;align-items:center;gap:16px}
.zh-ico{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--ink);transition:color .15s}
.zh-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.zh-ico:hover{color:var(--teal)}
.zh-burger,.zh-search-m{display:none}

/* ══════════════════════════ MEGA PANEL ══════════════════════ */
.zm{
  position:absolute;inset-inline:0;inset-block-start:100%;display:none;
  grid-template-columns:repeat(4,1fr);
  height:min(720px,calc(100vh - var(--zh-h)));
  background:var(--white);border-block-start:1px solid var(--line);
  box-shadow:0 26px 30px -26px rgba(0,0,0,.28);
}
.zm.open{display:grid}
.zm-col{padding:32px 40px 24px;border-inline-end:1px solid var(--line);overflow-y:auto}
.zm-col.zm-feat{padding-inline:20px 0;border-inline-end:0}
.zm-h{
  margin:0 0 22px;padding-block-end:12px;border-block-end:1px solid var(--line);max-width:271px;
  font-size:15px;font-weight:600;color:var(--z-muted);text-transform:uppercase;
}
[lang="fa"] .zm-h{text-transform:none}
.zm-col ul+.zm-h{margin-block-start:32px}
.zm-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.zm-col ul a{font-size:15px;line-height:21px;color:var(--ink)}
.zm-col ul a:hover{color:var(--teal)}

.zm-fh{margin:0 0 30px;font-size:17px;line-height:22px;color:var(--gold-dk);text-transform:uppercase}
[lang="fa"] .zm-fh{text-transform:none}
.zm-f{display:flex;align-items:center;gap:20px;margin-block-end:32px;color:var(--ink)}
.zm-f:last-child{margin-block-end:0}
.zm-f .im{flex:none;width:130px;height:173px;overflow:hidden;background:var(--grey)}
.zm-f img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.zm-f:hover img{transform:scale(1.04)}
.zm-f .t{display:block;font-size:15px;line-height:21px;max-width:170px}
.zm-f .c{display:inline-flex;gap:4px;margin-block-start:10px;font-size:13px;font-weight:600}
.zm-f:hover .t{color:var(--teal)}

.zm-ed{position:relative;overflow:hidden;background:var(--teal-dp);isolation:isolate}
.zm-ed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.zm-ed:hover img{transform:scale(1.03)}
.zm-ed .ov{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:32px;padding:24px 24px 72px;text-align:center;
  background:linear-gradient(to top,rgba(12,44,52,.66),rgba(12,44,52,0) 55%);
}
.zm-ed .tt{color:#fff;font-size:31px;line-height:1.3;letter-spacing:3px;text-transform:uppercase}
[lang="fa"] .zm-ed .tt{letter-spacing:0;text-transform:none;font-size:26px;font-weight:500}

/* ══════════════════════════ BUTTONS ═════════════════════════ */
.zb{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:48px;padding:15px 40px;font-size:15px;line-height:18px;white-space:nowrap;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;
}
.zb-w{background:#fff;color:var(--ink);border-color:#fff}
.zb-w:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.zb-ow{border-color:#fff;color:#fff}
.zb-ow:hover{background:#fff;color:var(--ink)}
.zb-d{background:var(--black);border-color:var(--black);color:#fff}
.zb-d:hover{background:var(--teal);border-color:var(--teal)}

/* ══════════════════════════ HOMEPAGE SLIDES ═════════════════ */
.zs{
  position:relative;isolation:isolate;overflow:hidden;background:var(--teal-dp);
  height:calc(100vh - var(--zh-h));min-height:520px;max-height:1080px;
  display:flex;align-items:flex-end;justify-content:center;
}
@supports (height:100svh){.zs{height:calc(100svh - var(--zh-h))}}
.zs-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zs::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(12,44,52,.66) 0%,rgba(12,44,52,.2) 36%,rgba(12,44,52,0) 60%);
}
.zs-in{position:relative;z-index:2;max-width:1040px;padding:0 var(--z-pad) 100px;text-align:center;color:#fff}
.zs-eb{margin:0 0 12px;font-size:15px;line-height:21px;letter-spacing:1px;text-transform:uppercase}
.zs-tt{margin:0 0 30px;font-size:39px;line-height:1.25;font-weight:400;letter-spacing:3.5px;text-transform:uppercase;text-wrap:balance}
[lang="fa"] .zs-eb{letter-spacing:0;text-transform:none}
[lang="fa"] .zs-tt{letter-spacing:0;text-transform:none;font-weight:500;font-size:36px;line-height:1.55}
.zs-cta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}

/* ══════════════════════════ CARD SECTIONS ═══════════════════ */
.zsec{padding:66px 40px 84px}
.zsec-t{margin:0 0 40px;text-align:center;font-size:28px;line-height:1.3;font-weight:400;text-transform:uppercase}
[lang="fa"] .zsec-t{text-transform:none;font-weight:500}
.zsec-lead{margin:-24px auto 40px;max-width:60ch;text-align:center;color:var(--ink-2);font-size:15px;line-height:1.9}
.zcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zcards.c4{grid-template-columns:repeat(4,1fr)}
.zcard{display:block;color:var(--ink)}
.zcard .im{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--grey)}
.zcard img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .8s var(--ease)}
.zcard:hover img{transform:scale(1.03)}
.zcard .lb{display:block;margin:16px 0 4px;font-size:13px;line-height:19px;color:var(--z-muted)}
.zcard .tt{display:block;font-size:16px;line-height:22px;letter-spacing:1px;text-transform:uppercase}
[lang="fa"] .zcard .tt{letter-spacing:0;text-transform:none;font-weight:500}
.zcard:hover .tt{color:var(--teal)}
.zsec-more{margin-block-start:40px;text-align:center}

/* alternating rows (women's page) */
.zrows{display:flex;flex-direction:column}
.zrow{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;scroll-margin-top:calc(var(--zh-h) + 12px)}
.zrow:nth-child(even) .zrow-im{order:2}
.zrow-im{position:relative;min-height:560px;overflow:hidden;background:var(--grey)}
.zrow-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.zrow-bd{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:60px clamp(24px,6vw,96px)}
.zrow-bd .eb{margin:0;font-size:13px;color:var(--z-muted);text-transform:uppercase}
[lang="fa"] .zrow-bd .eb{text-transform:none}
.zrow-bd h2{margin:0;font-size:28px;line-height:1.35;font-weight:400;text-transform:uppercase}
[lang="fa"] .zrow-bd h2{text-transform:none;font-weight:500}
.zrow-bd p{margin:0;max-width:52ch;color:var(--ink-2);font-size:15px;line-height:1.95}
.zrow-bd .zb{align-self:flex-start;margin-block-start:14px}

/* search */
.zsearch{padding:56px var(--z-pad) 80px;max-width:1100px;margin-inline:auto}
.zsearch form{display:flex;border-block-end:1px solid var(--ink);margin-block-end:40px}
.zsearch input{flex:1;border:0;background:none;font:inherit;font-size:24px;padding:12px 0;color:var(--ink);min-width:0}
.zsearch input:focus{outline:none}
.zsearch button{border:0;background:none;cursor:pointer;color:var(--ink);padding:0 4px}
.zsearch button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.zsearch-g{margin-block-end:36px}
.zsearch-g h2{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--z-muted);text-transform:uppercase}
[lang="fa"] .zsearch-g h2{text-transform:none}
.zsearch-g ul{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.zsearch-g li a{display:flex;justify-content:space-between;gap:1rem;padding:14px 0;border-block-end:1px solid var(--line);font-size:15px}
.zsearch-g li a:hover{color:var(--teal)}
.zsearch-g li .m{color:var(--z-muted);font-size:13px}
.zsearch-empty{color:var(--ink-2)}

/* ══════════════════════════ FOOTER ══════════════════════════ */
.zf{font-size:15px;line-height:23px}

.zf-news{background:var(--grey);padding:96px var(--z-pad) 90px;text-align:center}
.zf-nt{margin:0 0 18px;font-size:17px;text-transform:uppercase}
[lang="fa"] .zf-nt{text-transform:none;font-weight:500}
.zf-nl{margin:0 auto 30px;max-width:62ch;font-size:17px;line-height:26px;color:var(--ink-2)}
.zf-ok{margin:0 0 16px;color:var(--teal)}
.zf-form{display:flex;justify-content:center}
.zf-form input{
  width:min(450px,100%);height:50px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--black);border-inline-end:0;border-radius:0;
}
.zf-form input:focus{outline:2px solid var(--teal);outline-offset:-2px}
.zf-form button{flex:none;width:50px;height:50px;border:0;background:var(--black);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zf-form button:hover{background:var(--teal)}
.zf-form svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
[dir="rtl"] .zf-form svg{transform:scaleX(-1)}

.zf-store{display:grid;grid-template-columns:1fr 1fr;min-height:400px;background:var(--black);color:#fff}
.zf-store.tall{grid-template-columns:.62fr 1fr;min-height:460px}
.zf-sim{position:relative;overflow:hidden;min-height:240px}
.zf-sim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.zf-sbd{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:0 40px;padding:56px 60px}
.zf-sbd p{margin:0}
.zf-h{margin:0 0 14px!important;font-size:13px;line-height:19px;text-transform:uppercase;color:rgba(255,255,255,.72)}
[lang="fa"] .zf-h{text-transform:none}
.zf-sbd a:hover{color:var(--gold)}
.zf-find{grid-column:1/-1;margin-block-start:40px;display:inline-flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;justify-self:start}
[lang="fa"] .zf-find{text-transform:none;letter-spacing:0;font-size:13px}
.zf-find svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}

.zf-info{background:var(--teal-dp);color:#E8F1F0;padding:80px 60px 28px}
.zf-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.zf-info .zf-h{color:var(--gold)}
.zf-info p{margin:0}
.zf-info ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.zf-info a{color:#E8F1F0}
.zf-info a:hover{color:var(--gold)}
.zf-change{font-weight:600;margin-inline-start:.5em;text-decoration:underline;text-underline-offset:3px}
.zf-logo{text-align:center;padding:84px 0 36px;overflow:hidden}
.zf-logo span{
  display:inline-block;padding-inline-start:.18em;font-family:var(--f-wm);
  font-size:clamp(56px,13.5vw,196px);line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.zf-legal{text-align:center;font-size:12px;line-height:18px;color:rgba(232,241,240,.72)}

/* ══════════════════════════ MOBILE ══════════════════════════ */
@media (max-width:1100px){
  :root{--zh-bar:56px}
  .zh-nav,.zh-tools .zh-search-d{display:none}
  .zh-bar{padding-inline:20px}
  .zh-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:25px;height:25px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);
  }
  .zh-burger i{display:block;height:1.6px;width:25px;background:currentColor;transition:transform .25s,opacity .25s}
  .zh-burger.x i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .zh-burger.x i:nth-child(2){opacity:0}
  .zh-burger.x i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .zh-search-m{display:flex;margin-inline-start:20px;width:22px;height:22px}
  .zh-search-m svg{width:22px;height:22px}
  .zh-logo{position:absolute;inset-inline-start:50%;transform:translateX(-50%)}
  [dir="rtl"] .zh-logo{transform:translateX(50%)}
  .zh-logo svg{display:none}
  .zh-tools{gap:14px}
  .zh-tools .zh-ico{width:20px;height:20px}
  .zh-tools .zh-ico svg{width:20px;height:20px}
  .zm{display:none!important}
}
@media (max-width:640px){
  :root{--zh-promo:44px}
  .zh-promo{padding-inline:20px;font-size:10px;line-height:14px}
  [lang="fa"] .zh-promo{font-size:11.5px;line-height:16px}
  .zh-msg{white-space:normal;max-width:none}
  .zh-reg{display:none}
  .zh-tools .zh-ico:nth-child(3){display:none}   /* stores stays in the drawer */
}

.zd{
  position:fixed;inset-inline:0;inset-block-start:var(--zh-h);inset-block-end:0;z-index:79;
  background:var(--white);overflow:hidden;visibility:hidden;transform:translateX(-100%);
  transition:transform .32s var(--ease),visibility .32s;
}
[dir="rtl"] .zd{transform:translateX(100%)}
.zd.open{transform:none;visibility:visible}
.zd-l1,.zd-l2{position:absolute;inset:0;overflow-y:auto;padding:8px 20px 48px;background:var(--white)}
.zd-l2{visibility:hidden;transform:translateX(100%);transition:transform .3s var(--ease),visibility .3s}
[dir="rtl"] .zd-l2{transform:translateX(-100%)}
.zd-l2.open{visibility:visible;transform:none}
.zd ul{list-style:none;margin:0;padding:0}
.zd-l1>ul:first-child li>a,.zd-go{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:17px 0;font:inherit;font-size:16px;line-height:22px;color:var(--ink);text-align:start;
  background:none;border:0;border-block-end:1px solid var(--line);cursor:pointer;
}
.zd .chev{font-size:22px;line-height:1;color:var(--z-muted)}
[dir="rtl"] .zd .chev{transform:scaleX(-1);display:inline-block}
.zd-util{margin-block-start:24px!important}
.zd-util a{display:block;padding:10px 0;font-size:14px;color:var(--ink-2)}
.zd-back{display:flex;align-items:center;gap:8px;padding:14px 0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.zd-title{display:block;padding:6px 0 10px;font-size:22px;line-height:30px;color:var(--ink)}
.zd-h{margin:26px 0 6px;font-size:13px;font-weight:600;color:var(--z-muted);text-transform:uppercase}
[lang="fa"] .zd-h{text-transform:none}
.zd-l2 li a{display:block;padding:10px 0;font-size:15px;color:var(--ink)}

@media (max-width:900px){
  .zsec{padding:48px 20px 60px}
  .zcards,.zcards.c4{grid-template-columns:repeat(2,1fr);gap:16px}
  .zrow{grid-template-columns:1fr}
  .zrow:nth-child(even) .zrow-im{order:0}
  .zrow-im{min-height:0;aspect-ratio:4/5}
  .zrow-bd{padding:36px 20px 52px}
  .zf-store,.zf-store.tall{grid-template-columns:1fr}
  .zf-sim{aspect-ratio:3/2}
  .zf-sbd{padding:40px 20px}
  .zf-info{padding:52px 20px 24px}
  .zf-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .zs-in{padding-bottom:44px}
  .zs-eb{font-size:14px}
  .zs-tt{font-size:23px;letter-spacing:2px;margin-bottom:22px}
  [lang="fa"] .zs-tt{font-size:24px}
  .zs-cta{gap:10px;flex-wrap:nowrap}
  .zs .zb{font-size:13px;padding:12px 14px;min-height:44px;white-space:normal}
  .zsec-t{font-size:22px;margin-bottom:28px}
  .zf-news{padding:64px 20px}
  .zf-nt,.zf-nl{font-size:15px}
}
@media (max-width:560px){
  .zcards{grid-template-columns:1fr}
  .zf-sbd{grid-template-columns:1fr;gap:24px}
  .zf-cols{grid-template-columns:1fr}
}