.fzhh2{
  background:var(--fzhh-bg,linear-gradient(130deg,#2f2f88 0%,#5a3da5 52%,#61318f 100%));
  color:#fff;
  padding:36px 0;
}
.fzhh2-inner{max-width:var(--fz-container-max);margin:0 auto;padding:0 var(--fz-container-pad);}
.fzhh2-kicker{margin:0 0 8px;font-size:13px;opacity:.78}
.fzhh2-title{margin:0;font-size:clamp(28px,3.2vw,48px);line-height:1.2}
.fzhh2-big-year{font-size:clamp(68px,18vw,220px);line-height:.85;font-weight:700;text-align:center;color:#f3ecc7;margin-top:16px}

/* ===== DESKTOP FIRST – NO HORIZONTAL SCROLL ===== */
.fzhh2-bars-wrap {
  position: relative;
  margin-top: -8px;
  padding-top: 6px;
  direction: ltr;
  overflow-x: visible;          /* no horizontal scroll on large screens */
  overflow-y: hidden;
  scroll-behavior: smooth;
}

.fzhh2-bars {
  display: grid;
  grid-template-columns: repeat(57, minmax(0, 1fr));
  gap: clamp(3px, .7vw, 10px);
  align-items: end;
  min-height: 176px;
  direction: ltr;
  width: 100%;
}

/* ===== MOBILE: make it scrollable (but hide ugly scrollbar if possible) ===== */
@media (max-width: 768px) {
  .fzhh2-bars-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;      /* thinner scrollbar (Firefox) */
    padding-inline: 8px;        /* breathing space on edges */
  }
  .fzhh2-bars-wrap::-webkit-scrollbar {
    height: 4px;                /* slim scrollbar on Chrome/Safari */
    background: rgba(255,255,255,0.2);
    border-radius: 99px;
  }
  .fzhh2-bars-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.6);
    border-radius: 99px;
  }
  .fzhh2-bars {
    grid-template-columns: repeat(var(--fzhh-bar-count,57), minmax(24px, 32px));  /* one clean scroll row, including decorative bars */
    gap: 3px;
    width: max-content;         /* let grid determine its own width */
  }
}

/* bar styling – unchanged */
.fzhh2-bar{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:164px;
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  line-height:0;
  margin:0!important;
  width:100%;
  min-width:0;
  justify-self:stretch;
  box-sizing:border-box;
  font:inherit;
  text-align:center;
  vertical-align:top;
  transform:none;
  transform-origin:50% 100%
}
.fzhh2-bar.is-empty{cursor:default}
.fzhh2-bar-line{
  position:absolute;
  left:50%;
  bottom:0;
  width:4px;
  height:100%;
  border-radius:999px;
  background:rgba(241,236,210,.45);
  transform-origin:50% 100%;
  transform:translateX(-50%) scaleY(var(--h,.2));
  will-change:transform,filter;
  display:block;
  transition:filter .25s ease,opacity .25s ease
}
.fzhh2-bar.is-enabled .fzhh2-bar-line{background:#f5e7a2}
.fzhh2-bar.is-enabled:hover .fzhh2-bar-line,.fzhh2-bar.is-enabled:focus-visible .fzhh2-bar-line{
  filter:drop-shadow(0 0 7px rgba(245,231,162,.55))
}
.fzhh2-bar.is-selected .fzhh2-bar-line{
  filter:drop-shadow(0 0 11px rgba(245,231,162,.7))
}
.fzhh2-bar:focus,.fzhh2-bar:focus-visible,.fzhh2-bar:hover,.fzhh2-bar:active{
  outline:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important
}
.fzhh2-bar::before,.fzhh2-bar::after{display:none!important}
.fzhh2-baseline{height:1px;background:rgba(255,255,255,.55);margin-top:8px}

.fzhh2-content{padding:16px 0 0}
.fzhh2-content-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fzhh2-content-title{margin:0;font-size:clamp(24px,2.6vw,40px)}
.fzhh2-content-text{margin:10px 0 0;max-width:none;line-height:1.9}
.fzhh2-nav{display:flex;gap:10px;flex-shrink:0}
.fzhh2-nav-btn{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#C40404!important;
  color:#fff!important;
  border-radius:999px!important;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  line-height:0
}
.fzhh2-nav-btn svg{display:block}
.fzhh2-nav-btn:hover,.fzhh2-nav-btn:focus,.fzhh2-nav-btn:focus-visible,.fzhh2-nav-btn:active{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#C40404!important;
  color:#fff!important;
}
.fzhh2-nav-btn::before,.fzhh2-nav-btn::after{display:none!important}
.fzhh2-nav-btn:disabled{opacity:.35;cursor:default}

.fzhh2-bubble{
  position:absolute;
  bottom:0;
  transform:translate(-50%,calc(-100% - 6px));
  color:#f5e7a2;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  pointer-events:none
}

@media (max-width:768px){
  .fzhh2{padding:34px 0}
  .fzhh2-bars{min-height:148px}
  .fzhh2-bar{height:132px}
  .fzhh2-content-head{align-items:flex-start;gap:12px}
}
/* --- WSA-style polish overrides --- */
.fzhh2,.fzhh2 *{font-family:var(--e-global-typography-primary-font-family,IRANSans,IRANYekan,sans-serif)}
.fzhh2-head{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:0;margin-bottom:0}
.fzhh2-title{font-size:clamp(17px,1.8vw,21px);order:2;margin-top:-2px}
.fzhh2-big-year{font-size:clamp(48px,9.5vw,112px);line-height:.78;color:#fff;margin-top:0;order:1}
.fzhh2-content-title{font-size:18px;line-height:1.45}
.fzhh2-content-text{font-size:12px;line-height:2;color:rgba(255,255,255,.92)}
.fzhh2-bar{height:132px;justify-self:stretch;place-self:end stretch}
.fzhh2-bar-line{left:50%;right:auto;width:3px;background:rgba(255,255,255,.3);transition:transform .34s ease,opacity .34s ease;background-image:none !important;box-shadow:none !important;filter:none !important}
.fzhh2-bar.is-enabled .fzhh2-bar-line,.fzhh2-bar.is-selected .fzhh2-bar-line,.fzhh2-bar.is-enabled:hover .fzhh2-bar-line{background:#fff;filter:none !important}
.fzhh2-bar.is-filler .fzhh2-bar-line{opacity:.82}
.fzhh2-bar.is-deco{pointer-events:none}
.fzhh2-bar.is-deco .fzhh2-bar-line{width:2px;opacity:.68}
.fzhh2-bars{min-height:146px;grid-template-columns:repeat(var(--fzhh-bar-count,57),minmax(0,1fr));gap:clamp(2px,.48vw,7px)}
button.fzhh2-bar,span.fzhh2-bar{appearance:none;-webkit-appearance:none;width:100%;min-width:0;padding:0;margin:0!important;border:0!important;background:transparent!important;display:flex;align-items:flex-end;justify-content:center;touch-action:manipulation}
button.fzhh2-bar.is-enabled::after{content:"";display:block!important;position:absolute;inset:0 -8px -8px;z-index:1;background:transparent;pointer-events:auto}
button.fzhh2-bar .fzhh2-bar-line,span.fzhh2-bar .fzhh2-bar-line{left:50%;margin-left:0;transform-origin:50% 100%}
.fzhh2-baseline{background:rgba(255,255,255,.35)}
@media (max-width:768px){.fzhh2-bars-wrap{overflow-x:auto;overflow-y:hidden}.fzhh2-bars{grid-template-columns:repeat(var(--fzhh-bar-count,57),minmax(24px,32px));gap:3px;width:max-content}}
@media (max-width:768px){.fzhh2{padding:30px 0}.fzhh2-content-title{font-size:16px}.fzhh2-content-text{font-size:12px}.fzhh2-head{gap:0}.fzhh2-title{margin-top:-1px}.fzhh2-big-year{font-size:clamp(44px,16vw,86px);line-height:.8}.fzhh2-bars-wrap{margin-top:-6px;padding:6px 8px 0;overflow-x:auto;overflow-y:hidden}.fzhh2-bars{grid-template-columns:repeat(var(--fzhh-bar-count,57),minmax(24px,30px));min-height:138px;gap:3px;width:max-content}.fzhh2-bar{height:124px}.fzhh2-baseline{margin-top:4px}}
@media (prefers-reduced-motion: reduce){.fzhh2-bar-line{transition:none !important;animation:none !important}}

/* Mobile year rail: keep the same dancing line and make it horizontally scrollable. */
@media (max-width:768px){
  .fzhh2-inner{padding-inline:max(14px,var(--fz-container-pad))}
  .fzhh2-head{margin-bottom:4px}
  .fzhh2-title{font-size:16px;margin-top:-4px}
  .fzhh2-big-year{font-size:clamp(42px,14vw,72px);line-height:.82}
  .fzhh2-bars-wrap{
    margin:4px calc(var(--fz-container-pad) * -1) 0;
    padding:6px var(--fz-container-pad) 12px;
    direction:ltr;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .fzhh2-bars-wrap::-webkit-scrollbar{display:none}
  .fzhh2-bars{
    display:grid;
    grid-template-columns:repeat(var(--fzhh-bar-count,57),minmax(36px,52px));
    gap:.75px;
    width:max-content;
    min-height:236px;
    direction:ltr;
    align-items:end;
  }
  .fzhh2-bar{height:216px;scroll-snap-align:center}
  .fzhh2-bar-line{width:6px}
  .fzhh2-bar.is-deco .fzhh2-bar-line{width:4px}
  .fzhh2-bar.is-empty,.fzhh2-bar.is-deco{display:flex!important}
  .fzhh2-bar-line{display:block!important}
  .fzhh2-bubble{display:none!important}
  .fzhh2-baseline{margin-top:4px}
  .fzhh2-content{padding-top:8px}
  .fzhh2-content-head{align-items:center;gap:10px}
  .fzhh2-nav-btn{width:34px;height:34px;min-width:34px;min-height:34px;background:#C40404!important;color:#fff!important;border-radius:999px!important}
}
/* Scoped history nav SVG color fix for red circular arrow buttons. */
.fzhh2-nav-btn {
  color: #fff !important;
}

.fzhh2-nav-btn svg,
.fzhh2-nav-btn svg * {
  color: currentColor;
  fill: currentColor !important;
  stroke: currentColor !important;
}

@media (max-width: 768px) {
  .fzhh2-nav {
    align-self: flex-start;
  }

  .fzhh2-nav-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}