/* ==========================================================================
   Zawiya Shadhuliyya — news/magazine layout for the blog
   Section structure follows the Cloudix reference; palette is Zawiya brand.
   ========================================================================== */

:root{
  --zsn-maxw:1360px;
  --zsn-sbw:330px;
  --zsn-radius:10px;

  /* brand */
  --zsn-blue:#0b5ea8;
  --zsn-blue-dark:#062f5f;
  --zsn-gold:#b99147;
  --zsn-gold-dark:#9a7838;

  /* surfaces */
  --zsn-page:#ffffff;
  --zsn-card:#ffffff;
  --zsn-band:#f4f6f8;
  --zsn-line:#e3e7ec;

  /* bars */
  --zsn-topbar:var(--zsn-blue-dark);
  --zsn-nav:var(--zsn-blue-dark);
  --zsn-footer:var(--zsn-blue-dark);
  --zsn-footer-text:#a9b6c8;

  /* type */
  --zsn-title:#12141a;
  --zsn-text:#454b57;
  --zsn-meta:#7a8090;
  --zsn-head:"Noto Serif","Noto Serif Malayalam",Georgia,"Times New Roman",serif;
  --zsn-body:"Inter","Noto Sans Malayalam","Noto Naskh Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --zsn-shadow:0 1px 2px rgba(16,20,28,.05),0 8px 24px rgba(16,20,28,.06);
}

/* ── base ─────────────────────────────────────────────────────────── */
.zsn *,.zsn *::before,.zsn *::after{box-sizing:border-box;}
.zsn{
  font-family:var(--zsn-body);
  font-size:16px;
  line-height:1.6;
  color:var(--zsn-text);
  background:var(--zsn-page);
}
.zsn img{max-width:100%;display:block;}
.zsn a{color:inherit;text-decoration:none;}
.zsn a:hover{text-decoration:none;}
.zsn h1,.zsn h2,.zsn h3,.zsn h4{
  font-family:var(--zsn-head);
  color:var(--zsn-title);
  font-weight:600;
  margin:0;
  line-height:1.25;
}
.zsn-container{max-width:var(--zsn-maxw);margin:0 auto;padding:0 24px;}
.zsn-band{padding:38px 0;}
.zsn-band--alt{background:var(--zsn-band);}

/* clamp helpers */
.zsn-c2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zsn-c3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ── 1. top bar ───────────────────────────────────────────────────── */
.zsn-topbar{background:var(--zsn-topbar);color:#cdd8e6;font-size:13px;}
.zsn-topbar .zsn-container{display:flex;align-items:center;gap:20px;height:40px;}
.zsn-topbar-date{color:#9fb0c6;}
.zsn-topbar-links{display:flex;gap:18px;margin-left:8px;}
.zsn-topbar-links a:hover{color:var(--zsn-gold);}
.zsn-topbar-social{margin-left:auto;display:flex;gap:14px;font-size:14px;}
.zsn-topbar-social a:hover{color:var(--zsn-gold);}

/* ── 2. header ────────────────────────────────────────────────────── */
.zsn-header{background:var(--zsn-page);border-bottom:1px solid var(--zsn-line);}
.zsn-header .zsn-container{display:flex;align-items:center;gap:24px;min-height:96px;}
.zsn-logo img{max-height:62px;width:auto;}
.zsn-header-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.zsn-search{display:flex;align-items:center;background:var(--zsn-band);border:1px solid var(--zsn-line);
  border-radius:999px;padding:0 6px 0 18px;height:44px;min-width:290px;}
.zsn-search input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--zsn-title);min-width:0;}
.zsn-search input::placeholder{color:var(--zsn-meta);}
.zsn-search button{border:0;background:var(--zsn-blue);color:#fff;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.zsn-search button:hover{background:var(--zsn-blue-dark);}

/* ── 3. nav ───────────────────────────────────────────────────────── */
.zsn-nav{background:var(--zsn-nav);position:sticky;top:0;z-index:600;}
.zsn-nav .zsn-container{display:flex;align-items:center;gap:6px;min-height:52px;}
.zsn-nav a{color:#e6edf6;font-size:14px;font-weight:500;padding:16px 15px;display:inline-block;white-space:nowrap;}
.zsn-nav a:hover,.zsn-nav a.is-active{color:var(--zsn-gold);}
.zsn-nav-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.zsn-nav-clock{margin-left:auto;color:#9fb0c6;font-size:13px;white-space:nowrap;}
.zsn-nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;padding:10px;cursor:pointer;margin-left:auto;}

/* ── mega menu ────────────────────────────────────────────────────── */
/* the panel spans the whole nav bar, so it anchors to .zsn-nav (a positioned
   sticky element) rather than to its own <li> */
.zsn-nav-list li.zsn-has-mega{position:static;}

.zsn-mega{
  position:absolute;left:0;right:0;top:100%;z-index:650;
  background:var(--zsn-page);
  border-top:3px solid var(--zsn-gold);
  box-shadow:0 22px 44px rgba(6,20,40,.22);
  padding:28px 0 32px;
  /* Never run off a short laptop screen - scroll inside the panel instead.
     200px covers the worst case: unscrolled, the nav bottom sits ~191px down
     (topbar 40 + header 97 + nav 54). Once scrolled the nav sticks to the top
     and there is far more room, so this only engages on short screens. */
  max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.zsn-has-mega:hover > .zsn-mega,
.zsn-has-mega:focus-within > .zsn-mega{opacity:1;visibility:visible;transform:translateY(0);}

/* the nav bar styles its own .zsn-container as a flex row; the panel's nested
   container must not inherit that or the head and grid sit side by side */
.zsn-mega .zsn-container{display:block;min-height:0;gap:0;}

.zsn-mega-head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--zsn-line);
}
.zsn-mega-head h4{font-family:var(--zsn-head);font-size:20px;color:var(--zsn-title);margin:0;}
.zsn-mega-count{font-size:12.5px;color:var(--zsn-meta);}
.zsn-mega-all{margin-left:auto;font-size:13px;font-weight:700;color:var(--zsn-blue);padding:0;}
.zsn-mega-all:hover{color:var(--zsn-gold);}

.zsn-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}

/* links inside the panel are cards, not nav items: undo .zsn-nav a, whose
   padding and white-space:nowrap would otherwise stop titles from wrapping */
.zsn-nav .zsn-mega a{
  padding:0;
  white-space:normal;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  display:block;
}
.zsn-nav .zsn-mega .zsn-mega-all{
  display:inline-block;font-size:13px;font-weight:700;color:var(--zsn-blue);
}
.zsn-nav .zsn-mega .zsn-mega-all:hover{color:var(--zsn-gold);}

.zsn-mega-card{display:block;padding:0;}
.zsn-mega-thumb-wrap{position:relative;display:block;overflow:hidden;
  border-radius:var(--zsn-radius);margin-bottom:12px;}
.zsn-mega-thumb{
  display:block;height:132px;background:#dfe6ee no-repeat center/cover;
  transition:transform .45s ease;
}
.zsn-mega-card:hover .zsn-mega-thumb{transform:scale(1.07);}
.zsn-mega-card strong{
  display:block;font-family:var(--zsn-head);font-size:15px;font-weight:600;
  line-height:1.35;color:var(--zsn-title);margin-bottom:6px;
  transition:color .2s ease;
}
.zsn-mega-card:hover strong{color:var(--zsn-blue);}
.zsn-mega-date{font-size:12px;color:var(--zsn-meta);}

/* Blog panel: 8 posts as two tidy rows of four, so shorter thumbs keep the
   overall height sane, plus a category strip along the bottom */
.zsn-mega--blog{padding:22px 0 24px;}
.zsn-mega--blog .zsn-mega-thumb{height:92px;}
.zsn-mega--blog .zsn-mega-thumb-wrap{margin-bottom:9px;}
.zsn-mega--blog .zsn-mega-grid{row-gap:18px;}
.zsn-mega--blog .zsn-mega-card strong{font-size:14px;margin-bottom:4px;}
.zsn-mega--blog .zsn-mega-head{padding-bottom:13px;margin-bottom:18px;}

.zsn-mega-cat{
  display:inline-block;margin-bottom:5px;
  font-family:var(--zsn-body);font-size:10px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:var(--zsn-gold-dark);
}

.zsn-mega-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--zsn-line);
}
.zsn-mega-foot-label{
  font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--zsn-meta);margin-right:6px;
}
.zsn-nav .zsn-mega .zsn-mega-pill{
  display:inline-block;background:var(--zsn-band);border:1px solid var(--zsn-line);
  border-radius:999px;padding:6px 15px;font-size:12.5px;color:var(--zsn-text);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.zsn-nav .zsn-mega .zsn-mega-pill:hover{
  background:var(--zsn-gold);color:#1b1405;border-color:var(--zsn-gold);
}

/* cards rise in one after another once the panel opens */
@keyframes zsn-megaCardIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.zsn-has-mega:hover .zsn-mega-card,
.zsn-has-mega:focus-within .zsn-mega-card{animation:zsn-megaCardIn .42s ease both;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(1){animation-delay:.05s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(2){animation-delay:.11s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(3){animation-delay:.17s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(4){animation-delay:.23s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(5){animation-delay:.29s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(6){animation-delay:.35s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(7){animation-delay:.41s;}
.zsn-has-mega:hover .zsn-mega-card:nth-child(8){animation-delay:.47s;}

@media (prefers-reduced-motion:reduce){
  .zsn-mega{transition:opacity .01s;transform:none;}
  .zsn-has-mega:hover .zsn-mega-card{animation:none;}
  .zsn-mega-card:hover .zsn-mega-thumb{transform:none;}
}

/* ── 4. breaking ticker ───────────────────────────────────────────── */
.zsn-ticker{border-bottom:1px solid var(--zsn-line);background:var(--zsn-page);}
.zsn-ticker .zsn-container{display:flex;align-items:center;gap:16px;height:56px;}
.zsn-ticker-tag{background:var(--zsn-gold);color:#1b1405;font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;padding:6px 14px;border-radius:4px;white-space:nowrap;flex-shrink:0;
  position:relative;z-index:2;}
/* own clipping context, else the nowrap track spills over the tag */
.zsn-ticker-viewport{flex:1;min-width:0;overflow:hidden;}
.zsn-ticker-track{display:flex;gap:34px;white-space:nowrap;animation:zsn-marquee 38s linear infinite;}
.zsn-ticker:hover .zsn-ticker-track{animation-play-state:paused;}
.zsn-ticker-track a{font-size:14.5px;color:var(--zsn-title);}
.zsn-ticker-track a:hover{color:var(--zsn-blue);}
.zsn-ticker-track a::before{content:"\2022";color:var(--zsn-gold);margin-right:12px;font-weight:700;}
@keyframes zsn-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.zsn-ticker-track{animation:none;}}

/* ── card primitives ──────────────────────────────────────────────── */
.zsn-pill{display:inline-block;background:var(--zsn-gold);color:#1b1405;font-size:10.5px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;padding:5px 11px;border-radius:4px;}
.zsn-meta{color:var(--zsn-meta);font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zsn-thumb{background:#dfe6ee no-repeat center/cover;display:block;}

/* play badge on cards whose post contains a video */
.zsn-thumb-wrap{position:relative;display:block;}
.zsn-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.93);box-shadow:0 6px 20px rgba(6,20,40,.35);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:transform .25s ease,background .25s ease;
}
.zsn-play::before{
  content:"";margin-left:5px;
  border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent var(--zsn-blue-dark);
}
a:hover > .zsn-play,
a:hover .zsn-play{background:var(--zsn-gold);transform:translate(-50%,-50%) scale(1.09);}
a:hover > .zsn-play::before,
a:hover .zsn-play::before{border-left-color:#1b1405;}

/* size per context */
.zsn-hero-lead .zsn-play{width:74px;height:74px;}
.zsn-hero-lead .zsn-play::before{border-width:13px 0 13px 22px;}
.zsn-hero-side .zsn-play,
.zsn-ex-grid .zsn-play{width:44px;height:44px;}
.zsn-hero-side .zsn-play::before,
.zsn-ex-grid .zsn-play::before{border-width:7px 0 7px 12px;margin-left:4px;}
.zsn-cat-list .zsn-play{width:38px;height:38px;}
.zsn-cat-list .zsn-play::before{border-width:6px 0 6px 10px;margin-left:3px;}
.zsn-side-list .zsn-play{width:26px;height:26px;}
.zsn-side-list .zsn-play::before{border-width:4px 0 4px 7px;margin-left:2px;}

/* the slide overlay gradient sits at z-index auto; keep the badge above it */
.zsn-ov .zsn-play{z-index:3;}

/* overlay card (image + text on top) */
.zsn-ov{position:relative;border-radius:var(--zsn-radius);overflow:hidden;display:block;box-shadow:var(--zsn-shadow);}
.zsn-ov .zsn-thumb{width:100%;height:100%;position:absolute;inset:0;transition:transform .5s ease;}
.zsn-ov:hover .zsn-thumb{transform:scale(1.05);}
.zsn-ov::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,20,40,.92) 0%,rgba(6,20,40,.45) 45%,rgba(6,20,40,.05) 100%);}
.zsn-ov-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:24px;}
.zsn-ov-body h2,.zsn-ov-body h3{color:#fff;margin:10px 0 8px;}
.zsn-ov-body .zsn-meta{color:rgba(255,255,255,.8);}

/* ── 5. hero ──────────────────────────────────────────────────────── */
.zsn-hero{display:grid;grid-template-columns:1fr 420px;gap:22px;}
.zsn-hero-lead{height:470px;}
.zsn-hero-lead h2{font-size:30px;}

/* lead slider: slides stack and cross-fade */
.zsn-slider{position:relative;border-radius:var(--zsn-radius);overflow:hidden;box-shadow:var(--zsn-shadow);}
.zsn-slide{
  position:absolute;inset:0;box-shadow:none;border-radius:0;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;
}
.zsn-slide.is-active{opacity:1;visibility:visible;z-index:1;}
/* only the live slide zooms on hover */
.zsn-slider:hover .zsn-slide:not(.is-active) .zsn-thumb{transform:none;}

.zsn-slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;padding:0;
  background:rgba(255,255,255,.92);color:var(--zsn-blue-dark);
  font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,background .2s ease,color .2s ease;
}
.zsn-slider:hover .zsn-slider-btn,
.zsn-slider-btn:focus-visible{opacity:1;}
.zsn-slider-btn:hover{background:var(--zsn-gold);color:#1b1405;}
.zsn-slider-prev{left:16px;}
.zsn-slider-next{right:16px;}

.zsn-slider-dots{position:absolute;right:24px;bottom:22px;z-index:3;display:flex;gap:8px;}
.zsn-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .25s ease,width .25s ease,border-radius .25s ease;
}
.zsn-dot:hover{background:rgba(255,255,255,.85);}
.zsn-dot.is-active{background:var(--zsn-gold);width:26px;border-radius:5px;}

/* no hover on touch - keep arrows visible */
@media (hover:none){
  .zsn-slider-btn{opacity:1;background:rgba(255,255,255,.82);}
}
.zsn-hero-side{display:grid;grid-template-rows:repeat(3,1fr);gap:22px;}
.zsn-hero-side .zsn-ov{height:142px;}
.zsn-hero-side h3{font-size:16px;}
.zsn-hero-side .zsn-ov-body{padding:16px;}

/* ── 5b. feature cards ────────────────────────────────────────────── */
.zsn-feature{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px;}

.zsn-feature-card .zsn-thumb{
  height:300px;border-radius:var(--zsn-radius);
  transition:transform .5s ease;
}
.zsn-feature-card .zsn-thumb-wrap{overflow:hidden;border-radius:var(--zsn-radius);}
.zsn-feature-card:hover .zsn-thumb{transform:scale(1.04);}

.zsn-feature-card .zsn-pill{margin:15px 0 10px;}
.zsn-feature-card h3{font-size:22px;line-height:1.3;margin:0 0 10px;}
.zsn-feature-card h3 a:hover{color:var(--zsn-blue);}
.zsn-feature-card .zsn-meta{font-size:13px;}
.zsn-feature-card .zsn-play{width:66px;height:66px;}
.zsn-feature-card .zsn-play::before{border-width:12px 0 12px 19px;}

/* ── 6. main + sidebar ────────────────────────────────────────────── */
.zsn-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--zsn-sbw);gap:40px;align-items:start;}

.zsn-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.zsn-sec-head h2{font-size:22px;position:relative;padding-bottom:10px;}
.zsn-sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--zsn-gold);border-radius:2px;}
.zsn-sec-more{margin-left:auto;font-size:13px;font-weight:600;color:var(--zsn-blue);}
.zsn-sec-more:hover{color:var(--zsn-gold);}

/* list article row */
.zsn-row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;padding:22px 0;border-bottom:1px solid var(--zsn-line);}
.zsn-row:first-of-type{padding-top:0;}
.zsn-row .zsn-thumb{height:190px;border-radius:var(--zsn-radius);}
.zsn-row h3{font-size:20px;margin:10px 0 8px;}
.zsn-row h3 a:hover{color:var(--zsn-blue);}
.zsn-row p{margin:0 0 12px;font-size:14.5px;}
.zsn-more{font-size:13px;font-weight:700;color:var(--zsn-blue);}
.zsn-more:hover{color:var(--zsn-gold);}

/* explore grid */
.zsn-explore{margin-top:46px;}

/* the block is main column + a list running down the side of BOTH the lead
   row and the card grid - that is what stops a gap opening under the image */
.zsn-explore-body{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:30px;}
.zsn-explore-main{min-width:0;}

/* lead row - headline left, large image right */
.zsn-ex-lead{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:22px;align-items:start;margin-bottom:30px;
}

.zsn-ex-side{display:flex;flex-direction:column;gap:15px;}
.zsn-ex-side-item{padding-bottom:15px;border-bottom:1px solid var(--zsn-line);}
.zsn-ex-side-item:last-child{border-bottom:0;padding-bottom:0;}
.zsn-ex-side .zsn-thumb-wrap{overflow:hidden;border-radius:var(--zsn-radius);margin-bottom:10px;}
.zsn-ex-side .zsn-thumb{height:118px;border-radius:var(--zsn-radius);transition:transform .5s ease;}
.zsn-ex-side-item:hover .zsn-thumb{transform:scale(1.05);}
.zsn-ex-side .zsn-play{width:40px;height:40px;}
.zsn-ex-side .zsn-play::before{border-width:7px 0 7px 11px;margin-left:3px;}
.zsn-ex-side h4{font-size:15px;line-height:1.35;margin:0 0 6px;}
.zsn-ex-side h4 a:hover{color:var(--zsn-blue);}
.zsn-ex-side p{margin:0 0 7px;font-size:13px;line-height:1.55;color:var(--zsn-text);}
.zsn-ex-lead-text h3{font-size:23px;line-height:1.28;margin:0 0 12px;}
/* narrow column, so let the headline run rather than truncate at three lines */
.zsn-ex-lead-text h3.zsn-c3{-webkit-line-clamp:5;}
.zsn-ex-lead-text h3 a:hover{color:var(--zsn-blue);}
/* the image fills the row rather than leaving a gap under it when the
   stacked list beside it runs taller */
.zsn-ex-lead-img{overflow:hidden;border-radius:var(--zsn-radius);display:block;}
.zsn-ex-lead-img .zsn-thumb{height:258px;border-radius:var(--zsn-radius);transition:transform .5s ease;}
.zsn-ex-lead-img:hover .zsn-thumb{transform:scale(1.04);}
.zsn-ex-lead .zsn-play{width:62px;height:62px;}
.zsn-ex-lead .zsn-play::before{border-width:11px 0 11px 18px;}
.zsn-ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;}
.zsn-ex-grid .zsn-thumb-wrap{overflow:hidden;border-radius:var(--zsn-radius);margin-bottom:13px;}
.zsn-ex-grid .zsn-thumb{height:132px;border-radius:var(--zsn-radius);transition:transform .5s ease;}
.zsn-ex-card:hover .zsn-thumb{transform:scale(1.05);}
.zsn-ex-grid h4{font-size:15.5px;line-height:1.35;margin:0 0 7px;}
.zsn-ex-grid h4 a:hover{color:var(--zsn-blue);}
.zsn-ex-card p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--zsn-text);}
.zsn-ex-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--zsn-meta);}
.zsn-ex-sep{opacity:.45;}
.zsn-ex-cat{color:var(--zsn-gold-dark);font-weight:600;}

/* sidebar */
.zsn-side-card{background:var(--zsn-card);border:1px solid var(--zsn-line);border-radius:var(--zsn-radius);
  padding:22px;margin-bottom:24px;box-shadow:var(--zsn-shadow);}
.zsn-side-card h3{font-size:15px;text-transform:uppercase;letter-spacing:.8px;font-family:var(--zsn-body);
  font-weight:800;padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--zsn-line);position:relative;}
.zsn-side-card h3::after{content:"";position:absolute;left:0;bottom:-1px;width:40px;height:2px;background:var(--zsn-gold);}
.zsn-side-list{list-style:none;margin:0;padding:0;}
.zsn-side-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--zsn-line);}
.zsn-side-list li:last-child{border-bottom:0;padding-bottom:0;}
.zsn-side-list .zsn-thumb{width:78px;height:60px;border-radius:6px;flex-shrink:0;}
.zsn-side-list strong{font-family:var(--zsn-head);font-size:14px;font-weight:600;color:var(--zsn-title);display:block;margin-bottom:4px;}
.zsn-side-list a:hover strong{color:var(--zsn-blue);}
/* ad slots - sidebar (300x250) and wide banners (970x130) */
.zsn-ad-card{text-align:center;}
.zsn-ad-host{text-align:center;}
.zsn-band--ad{padding:26px 0;}
.zsn-ad-card--wide{
  background:var(--zsn-card);border:1px solid var(--zsn-line);
  border-radius:var(--zsn-radius);padding:18px;
}
.zsn-ad-card--wide .zsn-ad-placeholder{aspect-ratio:970/130;}
.zsn-ad-card--wide .zsn-ad-slot img{margin:0 auto;width:auto;max-width:100%;}
.zsn-ad-label{
  display:block;margin-bottom:10px;
  font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--zsn-meta);
}
.zsn-ad-slot{display:block;width:100%;}
.zsn-ad-slot img{display:block;width:100%;max-width:100%;height:auto;border-radius:8px;}
.zsn-ad-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;max-width:100%;aspect-ratio:300/250;
  border:2px dashed var(--zsn-line);border-radius:8px;
  background:var(--zsn-band);color:var(--zsn-meta);
}
.zsn-ad-placeholder strong{
  font-family:var(--zsn-body);font-size:14px;font-weight:700;color:var(--zsn-text);
}
.zsn-ad-placeholder span{font-size:12px;}

/* sidebar Videos card - one lead with a big still, then compact rows */
.zsn-vid-lead{display:block;}
.zsn-vid-lead .zsn-thumb-wrap{
  position:relative;display:block;overflow:hidden;
  border-radius:8px;margin-bottom:10px;
}
.zsn-vid-lead .zsn-thumb{height:152px;transition:transform .45s ease;}
.zsn-vid-lead:hover .zsn-thumb{transform:scale(1.05);}
.zsn-vid-lead .zsn-play{width:46px;height:46px;}
.zsn-vid-lead .zsn-play::before{border-width:8px 0 8px 13px;margin-left:3px;}
.zsn-vid-lead strong{
  display:block;margin-bottom:4px;
  font-family:var(--zsn-head);font-size:14.5px;font-weight:600;line-height:1.35;
  color:var(--zsn-title);transition:color .2s ease;
}
.zsn-vid-lead:hover strong{color:var(--zsn-blue);}
.zsn-vid-lead .zsn-meta{font-size:11.5px;}

.zsn-vid-list{list-style:none;margin:16px 0 0;padding:0;}
.zsn-vid-list li{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:11px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--zsn-line);
}
.zsn-vid-list li:last-child{border-bottom:0;padding-bottom:0;}
.zsn-vid-thumb{position:relative;display:block;overflow:hidden;border-radius:6px;}
.zsn-vid-thumb .zsn-thumb{width:76px;height:52px;transition:transform .45s ease;}
.zsn-vid-list li:hover .zsn-vid-thumb .zsn-thumb{transform:scale(1.08);}
.zsn-vid-thumb .zsn-play{width:24px;height:24px;}
.zsn-vid-thumb .zsn-play::before{border-width:4px 0 4px 6px;margin-left:2px;}
.zsn-vid-list strong{
  display:block;margin-bottom:4px;
  font-family:var(--zsn-head);font-size:13px;font-weight:600;line-height:1.35;
  color:var(--zsn-title);transition:color .2s ease;
}
.zsn-vid-list a:hover strong{color:var(--zsn-blue);}
.zsn-vid-list .zsn-meta{font-size:11px;}

/* ranked sidebar lists - Trending Now / Most Popular */
.zsn-side-rank{list-style:none;margin:0;padding:0;}
.zsn-side-rank li{
  display:grid;grid-template-columns:22px 72px minmax(0,1fr);
  gap:11px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--zsn-line);
}
.zsn-side-rank li:first-child{padding-top:0;}
.zsn-side-rank li:last-child{border-bottom:0;padding-bottom:0;}
.zsn-rank-num{
  font-family:var(--zsn-head);font-size:21px;font-weight:600;line-height:1.15;
  color:#b8c2cf;text-align:center;
}
.zsn-rank-thumb{position:relative;display:block;overflow:hidden;border-radius:6px;}
.zsn-rank-thumb .zsn-thumb{width:72px;height:58px;transition:transform .45s ease;}
.zsn-side-rank li:hover .zsn-rank-thumb .zsn-thumb{transform:scale(1.08);}
.zsn-rank-thumb .zsn-play{width:24px;height:24px;}
.zsn-rank-thumb .zsn-play::before{border-width:4px 0 4px 6px;margin-left:2px;}
.zsn-side-rank strong{
  display:block;margin-bottom:4px;
  font-family:var(--zsn-head);font-size:13.5px;font-weight:600;line-height:1.35;
  color:var(--zsn-title);transition:color .2s ease;
}
.zsn-side-rank a:hover strong{color:var(--zsn-blue);}
.zsn-side-rank .zsn-meta{font-size:11.5px;gap:5px;}

.zsn-cats{list-style:none;margin:0;padding:0;}
.zsn-cats li a{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--zsn-line);font-size:14px;}
.zsn-cats li:last-child a{border-bottom:0;}
.zsn-cats li a:hover{color:var(--zsn-blue);}
.zsn-cats span{color:var(--zsn-meta);font-size:12px;}

/* ── 7. most read ─────────────────────────────────────────────────── */
.zsn-mr-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;}
.zsn-mr{display:flex;gap:12px;align-items:flex-start;}
.zsn-mr b{font-family:var(--zsn-head);font-size:30px;line-height:1;color:var(--zsn-line);flex-shrink:0;}
.zsn-mr h4{font-size:14px;margin:0 0 6px;}
.zsn-mr a:hover h4{color:var(--zsn-blue);}

/* ── 8. category block ────────────────────────────────────────────── */
.zsn-cat-block{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.zsn-cat-block .zsn-ov{height:420px;}
.zsn-cat-block .zsn-ov h3{font-size:24px;}
.zsn-cat-list{display:flex;flex-direction:column;gap:18px;}
.zsn-cat-list .zsn-row{grid-template-columns:150px minmax(0,1fr);padding:0 0 18px;gap:16px;}
.zsn-cat-list .zsn-row:last-child{border-bottom:0;padding-bottom:0;}
.zsn-cat-list .zsn-row .zsn-thumb{height:100px;}
.zsn-cat-list .zsn-row h3{font-size:16px;margin:8px 0 6px;}

/* ── 9. spotlight ─────────────────────────────────────────────────── */
/* one photo spans the panel; the left half carries the headline, the right half
   sits under a heavier scrim for the excerpt and call to action */
.zsn-spot{
  position:relative;display:grid;grid-template-columns:1.25fr 1fr;
  min-height:430px;border-radius:var(--zsn-radius);overflow:hidden;
  box-shadow:var(--zsn-shadow);background:#0b2038 center/cover no-repeat;
}
.zsn-spot::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(6,20,40,.78) 0%, rgba(6,20,40,.30) 42%,
    rgba(6,20,40,.62) 56%, rgba(6,20,40,.90) 100%);
}
.zsn-spot-left,.zsn-spot-right{
  position:relative;z-index:1;padding:46px;
  display:flex;flex-direction:column;justify-content:center;
}
.zsn-spot-left h2{color:#fff;font-size:34px;line-height:1.22;margin:16px 0 14px;}
.zsn-spot-left h2 a{color:#fff;}
.zsn-spot-left h2 a:hover{color:var(--zsn-gold);}
.zsn-spot-left .zsn-meta{color:rgba(255,255,255,.75);}
.zsn-spot-right{background:rgba(6,20,40,.42);}
.zsn-spot-right p{margin:0 0 26px;color:rgba(255,255,255,.92);font-size:16px;line-height:1.7;}

.zsn-btn-outline{
  display:inline-block;align-self:flex-start;
  border:2px solid rgba(255,255,255,.9);color:#fff;
  padding:13px 30px;border-radius:4px;
  font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.zsn-btn-outline:hover{background:var(--zsn-gold);border-color:var(--zsn-gold);color:#1b1405;}
.zsn-btn{display:inline-block;background:var(--zsn-gold);color:#1b1405;font-size:13px;font-weight:800;
  padding:12px 26px;border-radius:6px;align-self:flex-start;}
.zsn-btn:hover{background:var(--zsn-gold-dark);color:#fff;}
.zsn-btn--ghost{background:transparent;color:var(--zsn-blue);border:1px solid var(--zsn-line);}
.zsn-btn--ghost:hover{background:var(--zsn-blue-dark);color:#fff;border-color:var(--zsn-blue-dark);}

/* "view all" under the Latest Articles list */
.zsn-viewall{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:30px;padding-top:28px;border-top:1px solid var(--zsn-line);}
.zsn-viewall .zsn-btn{align-self:center;padding:13px 34px;}
.zsn-viewall-count{font-size:12.5px;color:var(--zsn-meta);}

/* ── 10. footer ───────────────────────────────────────────────────── */
.zsn-footer{background:var(--zsn-footer);color:var(--zsn-footer-text);padding:54px 0 0;}
.zsn-footer-logo{
  /* native 200x60 - kept at or under native size so it stays crisp */
  width:auto;max-width:200px;height:auto;
  /* no plate behind it: the artwork is already white with transparency */
  background:none;padding:0;
}
.zsn-footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.9px;
  font-family:var(--zsn-body);font-weight:800;margin-bottom:18px;}
.zsn-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;}
.zsn-footer a:hover{color:var(--zsn-gold);}
.zsn-footer ul{list-style:none;margin:0;padding:0;}
.zsn-footer ul li{padding:7px 0;font-size:14px;}
.zsn-footer-social{display:flex;gap:12px;margin-top:18px;}
.zsn-footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff;}
.zsn-footer-social a:hover{background:var(--zsn-gold);color:#1b1405;}
.zsn-footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:13px;}
.zsn-footer-bar .zsn-container{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;}

/* ── article (detail page) ────────────────────────────────────────── */
.zsn-article{background:var(--zsn-card);border:1px solid var(--zsn-line);border-radius:var(--zsn-radius);
  padding:36px;box-shadow:var(--zsn-shadow);}
.zsn-article h1{font-size:34px;margin:14px 0 16px;}
.zsn-article-hero{width:100%;height:440px;border-radius:var(--zsn-radius);margin:22px 0 28px;}
.zsn-article-body{font-size:17px;line-height:1.85;color:var(--zsn-text);}
.zsn-article-body p{margin:0 0 20px;}
.zsn-article-body img{border-radius:var(--zsn-radius);margin:22px 0;}
.zsn-article-body h2{font-size:25px;margin:34px 0 14px;}
.zsn-article-body h3{font-size:20px;margin:28px 0 12px;}
.zsn-article-body ul,.zsn-article-body ol{margin:0 0 20px;padding-left:22px;}
.zsn-article-body li{margin-bottom:8px;}
.zsn-article-body blockquote{margin:26px 0;padding:18px 24px;border-left:4px solid var(--zsn-gold);
  background:var(--zsn-band);border-radius:0 6px 6px 0;font-style:italic;}
.zsn-article-body a{color:var(--zsn-blue);text-decoration:underline;}
.zsn-article[dir="rtl"] .zsn-article-body{text-align:right;}
.zsn-article[dir="rtl"] .zsn-article-body ul,
.zsn-article[dir="rtl"] .zsn-article-body ol{padding-left:0;padding-right:22px;}

/* responsive 16:9 video embed */
.zsn-video{position:relative;width:100%;aspect-ratio:16/9;margin:26px 0;
  border-radius:var(--zsn-radius);overflow:hidden;background:#000;}
.zsn-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* share row - circular icon buttons that take each network's colour on hover */
.zsn-share{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--zsn-line);
}
.zsn-share-label{
  font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--zsn-meta);margin-right:4px;
}
.zsn-share a{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--zsn-band);border:1px solid var(--zsn-line);
  color:var(--zsn-text);font-size:17px;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.zsn-share a:hover{color:#fff;transform:translateY(-2px);}
.zsn-share .is-fb:hover{background:#1877f2;border-color:#1877f2;}
.zsn-share .is-tw:hover{background:#111;border-color:#111;}
.zsn-share .is-wa:hover{background:#25d366;border-color:#25d366;}
.zsn-share .is-em:hover{background:var(--zsn-blue);border-color:var(--zsn-blue);}
/* RTL articles: keep the row reading right-to-left with the label first */
.zsn-article[dir="rtl"] .zsn-share{flex-direction:row-reverse;justify-content:flex-end;}
.zsn-article[dir="rtl"] .zsn-share-label{margin:0 0 0 4px;}

.zsn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:24px;border-top:1px solid var(--zsn-line);}
.zsn-tag{background:var(--zsn-band);border:1px solid var(--zsn-line);border-radius:999px;
  padding:6px 15px;font-size:12.5px;color:var(--zsn-text);}
.zsn-tag:hover{background:var(--zsn-gold);color:#1b1405;border-color:var(--zsn-gold);}

.zsn-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.zsn-prevnext a{background:var(--zsn-card);border:1px solid var(--zsn-line);border-radius:var(--zsn-radius);
  padding:20px;display:block;}
.zsn-prevnext a:hover{border-color:var(--zsn-gold);}
.zsn-prevnext span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--zsn-meta);font-weight:700;margin-bottom:8px;}
.zsn-prevnext strong{font-family:var(--zsn-head);font-size:16px;font-weight:600;color:var(--zsn-title);}
.zsn-prevnext .zsn-pn-next{text-align:right;}

.zsn-crumb{font-size:13px;color:var(--zsn-meta);padding:16px 0;}
.zsn-crumb a:hover{color:var(--zsn-blue);}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1180px){
  /* not enough width for a side rail - the list moves below, three across */
  .zsn-explore-body{grid-template-columns:1fr;gap:26px;}
  .zsn-ex-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
    padding-top:24px;border-top:1px solid var(--zsn-line);}
  .zsn-ex-side-item{border-bottom:0;padding-bottom:0;}
  .zsn-hero{grid-template-columns:1fr 360px;}
  .zsn-ex-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .zsn-mr-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:991px){
  .zsn-layout{grid-template-columns:1fr;gap:32px;}
  .zsn-hero{grid-template-columns:1fr;}
  .zsn-hero-lead{height:380px;}
  .zsn-hero-side{grid-template-rows:none;grid-template-columns:repeat(3,1fr);}
  .zsn-hero-side .zsn-ov{height:160px;}
  .zsn-ex-lead{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:22px;}
  .zsn-ex-lead-text h3{font-size:21px;}
  .zsn-ex-lead-img .zsn-thumb{height:230px;}
  .zsn-feature-card .zsn-thumb{height:250px;}
  .zsn-feature-card h3{font-size:19px;}
  .zsn-cat-block{grid-template-columns:1fr;}
  .zsn-cat-block .zsn-ov{height:300px;}
  .zsn-spot{grid-template-columns:1fr;min-height:0;}
  .zsn-spot::before{background:linear-gradient(180deg,rgba(6,20,40,.55) 0%,rgba(6,20,40,.88) 100%);}
  .zsn-spot-left,.zsn-spot-right{padding:30px;}
  .zsn-spot-left{padding-bottom:6px;}
  .zsn-spot-right{background:transparent;padding-top:0;}
  .zsn-spot-left h2{font-size:26px;}
  .zsn-ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zsn-footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .zsn-nav-list{display:none;width:100%;flex-direction:column;align-items:stretch;}
  .zsn-nav-list.is-open{display:flex;}
  .zsn-nav .zsn-container{flex-wrap:wrap;}
  .zsn-nav-toggle{display:block;}
  .zsn-nav-clock{display:none;}
  .zsn-article{padding:24px;}
  .zsn-article h1{font-size:27px;}
  .zsn-article-hero{height:300px;}
}
@media (max-width:767px){
  /* a 970x130 box is only ~45px tall on a phone - keep it usable */
  .zsn-ad-card--wide .zsn-ad-placeholder{aspect-ratio:auto;min-height:120px;}
  .zsn-ad-card--wide{padding:14px;}
  .zsn-band--ad{padding:20px 0;}
  .zsn-band{padding:28px 0;}
  .zsn-container{padding:0 16px;}
  .zsn-header .zsn-container{flex-wrap:wrap;min-height:0;padding-block:16px;gap:14px;}
  .zsn-header-right{width:100%;margin-left:0;}
  .zsn-search{min-width:0;width:100%;}
  .zsn-topbar-links,.zsn-topbar-date{display:none;}
  .zsn-topbar-social{margin-left:0;}
  .zsn-hero-side{grid-template-columns:1fr;}
  .zsn-feature{grid-template-columns:1fr;gap:28px;}
  .zsn-feature-card .zsn-thumb{height:210px;}
  .zsn-feature-card h3{font-size:18px;}
  .zsn-row{grid-template-columns:1fr;gap:14px;}
  .zsn-row .zsn-thumb{height:210px;}
  .zsn-cat-list .zsn-row{grid-template-columns:110px minmax(0,1fr);}
  /* explore cards carry an excerpt now - two columns is too tight on a phone */
  .zsn-ex-grid{grid-template-columns:1fr;gap:26px;}
  /* lead stacks with the image on top, the way the smaller cards read */
  .zsn-ex-lead{grid-template-columns:1fr;gap:14px;margin-bottom:28px;}
  .zsn-ex-side{grid-template-columns:1fr;gap:18px;}
  .zsn-ex-side-item{border-bottom:1px solid var(--zsn-line);padding-bottom:18px;}
  .zsn-ex-side-item:last-child{border-bottom:0;padding-bottom:0;}
  .zsn-ex-side .zsn-thumb{height:190px;}
  .zsn-ex-lead-img{order:-1;}
  .zsn-ex-lead-text h3{font-size:20px;margin-bottom:8px;}
  .zsn-ex-lead-img .zsn-thumb{height:210px;}
  .zsn-ex-grid .zsn-thumb{height:200px;}
  .zsn-mr-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zsn-hero-lead h2{font-size:22px;}
  .zsn-spot-left h2{font-size:22px;}
  .zsn-spot-left,.zsn-spot-right{padding:22px;}
  .zsn-footer-grid{grid-template-columns:1fr;}
  .zsn-prevnext{grid-template-columns:1fr;}
  .zsn-article-hero{height:220px;}
  .zsn-article-body{font-size:16px;}
}

/* ── nav dropdowns ────────────────────────────────────────────────── */
.zsn-nav-list li{position:relative;}
.zsn-has-sub > a i{font-size:10px;margin-left:5px;opacity:.75;}
.zsn-sub{
  position:absolute;top:100%;left:0;min-width:232px;background:#fff;
  border-radius:0 0 8px 8px;box-shadow:0 14px 34px rgba(6,20,40,.18);
  list-style:none;margin:0;padding:8px 0;z-index:700;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.zsn-has-sub:hover > .zsn-sub,
.zsn-has-sub:focus-within > .zsn-sub{opacity:1;visibility:visible;transform:translateY(0);}
.zsn-sub a{display:block;padding:10px 20px;color:#12141a;font-size:14px;white-space:nowrap;}
.zsn-sub a:hover{background:var(--zsn-band);color:var(--zsn-blue);}

@media (max-width:991px){
  /* stacked mobile menu: sub-menus sit inline, always open */
  .zsn-nav-list > li{width:100%;border-top:1px solid rgba(255,255,255,.08);}
  .zsn-nav-list > li > a{padding:13px 4px;}
  .zsn-sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;box-shadow:none;padding:0 0 10px 16px;min-width:0;
  }
  .zsn-sub a{color:#b9c8dc;padding:8px 4px;font-size:13.5px;}
  .zsn-sub a:hover{background:transparent;color:var(--zsn-gold);}
  .zsn-has-sub > a i{display:none;}

  /* mega panel becomes a plain inline list inside the stacked mobile menu */
  .zsn-nav-list li.zsn-has-mega{position:static;}
  .zsn-mega,.zsn-mega--blog{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border-top:0;box-shadow:none;padding:0 0 12px 16px;
    max-height:none;overflow:visible;
  }
  .zsn-mega .zsn-container{padding:0;max-width:none;}
  .zsn-mega-head{display:none;}
  .zsn-mega-grid{grid-template-columns:1fr;gap:10px;}
  .zsn-mega-thumb-wrap{display:none;}
  .zsn-mega-card strong{color:#b9c8dc;font-size:13.5px;font-family:var(--zsn-body);font-weight:500;margin:0;}
  .zsn-mega-card:hover strong{color:var(--zsn-gold);}
  .zsn-mega-date{display:none;}
  .zsn-mega-foot{display:none;}
  .zsn-mega-cat{display:none;}
  .zsn-has-mega:hover .zsn-mega-card{animation:none;}
}

/* X logo - inline SVG, because Ionicons 2 predates the rebrand */
.x-icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0;}
.zsn-share .x-icon{width:.95em;height:.95em;}