/* =====================================================================
   IZH COFFEE — BRAND LAYER (loads LAST, wins the cascade)
   One place that controls the whole site's typography scale, weights,
   tracking and brand accents. Edit tokens here → whole site follows.
   ===================================================================== */

/* ৳ + Bengali numerals render crisply via the local Sabbir Sorolota digit subset (1.7KB). */
@font-face{font-family:'Sabbir Sorolota';src:url('/media/fonts/SabbirSorolota-num.woff2') format('woff2');unicode-range:U+09E6-09EF,U+09F2-09F3,U+09F9;font-weight:400 900;font-display:swap}

:root{
  /* ---- ONE font across the whole site: Brandon Grotesque, bold everywhere,
     extrabold (Black) for headings/display. Sabbir Sorolota carries only the
     Bengali digits + ৳ via unicode-range. ---- */
  --typeBasePrimary:'Sabbir Sorolota','Brandon Grotesque',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --typeBaseFallback:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --typeBaseSize:16px;
  --typeBaseSpacing:0.01em;
  --typeBaseWeight:700;
  --typeBaseLineHeight:1.6;
  --typeBaselineHeightMinus:0.6;
  --typeHeaderPrimary:'Sabbir Sorolota','Brandon Grotesque',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --typeHeaderFallback:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --typeHeaderSize:30px;
  --typeHeaderSpacing:0.01em;
  --typeHeaderWeight:800;
  --typeHeaderLineHeight:1.15;
  --typeCollectionTitle:22px;

  /* ---- IZH brand palette (single control point) ---- */
  --izh-maroon:#5b2233;
  --izh-maroon-d:#431825;
  --colorBtnPrimary:#211d18;
  --colorBtnPrimaryText:#ffffff;
  --colorLink:#0d6e7a;
  --colorTextSavings:#9a2c40;
  --colorSaleTag:#5b2233;
  --colorSaleTagText:#ffffff;
}

/* =====================  TYPOGRAPHY SCALE  ===================== */
/* Headings: Brandon Grotesque extrabold (weight 800 = real Black face) */
h1,.h1,h2,.h2,h3,.h3,
.section-header__title,
.product-single__title,
.collection-hero__title,
.izh-pg__h,.izh-wrap__h{
  font-family:'Sabbir Sorolota','Brandon Grotesque',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
  text-transform:none;
  color:#211d18;
}
h1,.h1{font-size:clamp(34px,4.6vw,56px)!important;line-height:1.08!important;}
h2,.h2,.section-header__title{font-size:clamp(27px,3.6vw,42px)!important;line-height:1.12!important;}
h3,.h3{font-size:clamp(21px,2.6vw,28px)!important;line-height:1.2!important;}

/* the theme's over-tracked uppercase micro-headings (h4-h6 got 0.3em!) */
h4,.h4,h5,.h5,h6,.h6{
  font-family:'Sabbir Sorolota','Brandon Grotesque',sans-serif!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  font-size:14px!important;
}
.footer__title{font-size:14px!important;letter-spacing:.08em!important;color:#211d18!important;}

/* Footer link lists: ONE consistent font, size and case for EVERY column.
   The legacy export styled only the "Explore" column (uppercase, 15px, Bold-named
   family) while its siblings stayed 13.6px normal-case — so the columns looked like
   different fonts. This single !important rule (loaded last) unifies all of them. */
.site-footer__linklist a,
.grid__item.footer__item--6e671b83-4375-4ed4-aa72-aa5eef6d8c13 ul.no-bullets.site-footer__linklist a{
  font-family:'Sabbir Sorolota','Brandon Grotesque',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
  text-transform:none!important;
  color:#3f362b!important;
}
.site-footer__linklist a:hover{color:#0e7c86!important;}

/* body copy: substantial, comfortable — never thin, never over-tracked.
   .01em = comfortable tracking for all-bold body text (not wide, not cramped) */
body,.rte,.rte p,.rte li,.page-content p,.page-content li,p{letter-spacing:.01em;}
.rte,.rte p,.rte li{font-size:16.5px!important;line-height:1.7!important;}

/* buttons + labels: bold and tight (theme shipped 0.3em tracking) */
.btn,.btn--secondary,.btn--tertiary,button.btn,input.btn,
.collapsible-trigger-btn,label,.label,.tool-tip-trigger__title{
  letter-spacing:.05em!important;
  font-family:'Brandon Grotesque Bold','Brandon Grotesque',sans-serif!important;
  font-weight:700!important;
}
.site-nav__link{letter-spacing:.05em!important;font-family:'Brandon Grotesque Bold','Brandon Grotesque',sans-serif!important;font-size:15px!important;}
.mobile-nav__link--top-level{letter-spacing:.05em!important;}
.announcement-bar,.announcement-bar a,.announcement-link-text{letter-spacing:.03em!important;}
.collection-item__title,.collection-item__title span{letter-spacing:.03em!important;font-weight:700!important;}

/* =====================  BRAND COLOR ACCENTS  ===================== */
/* sale / savings tags: maroon instead of harsh red */
.grid-product__tag,.grid-product__tag--sale{background:var(--izh-maroon)!important;color:#fff!important;}
.sale-tag{background:var(--izh-maroon)!important;color:#fff!important;}

/* nested megamenu flyout: ONE solid teal block, white links stacked inside. */
.h5.childmenus:hover .subchild-nav{
  background:#c29281!important;                 /* single solid teal block */
  border-radius:6px!important;
  padding:6px 0!important;
  box-shadow:0 14px 30px -14px rgba(14,124,134,.55)!important;
}
.subchild-nav div{padding:0!important;border-bottom:0!important;}
.subchild-nav a{
  display:block!important;
  background:transparent!important;
  color:#ffffff!important;                      /* white text on the teal block */
  font-size:14px!important;font-weight:600!important;letter-spacing:.04em;white-space:nowrap;text-align:center;
  padding:9px 26px!important;
  border-radius:0!important;
  transition:background .18s ease,color .18s ease;
}
.subchild-nav a:hover{
  background:rgba(255,255,255,.16)!important;    /* subtle lighten on hover, same block */
  color:#ffffff!important;
}
/* top-level dropdown hover color */
ul.site-nav__dropdown li > a:hover{color:#6f4e37!important;}

/* mobile nav — same cream chip treatment for the nested collection links */
.mobile-nav__grandchildlist .mobile-nav__link{
  display:inline-block;background:#fff9ef;color:#4a2f1c!important;font-weight:600;
  padding:7px 18px;margin:3px 0;border-radius:0 999px 999px 0;
  box-shadow:0 3px 10px -6px rgba(20,12,6,.4);transition:background .2s ease,color .2s ease;
}
.mobile-nav__grandchildlist .mobile-nav__link:active,
.mobile-nav__grandchildlist .mobile-nav__link:hover{background:#0e7c86;color:#fff9ef!important;}

/* decorative hills-&-birds band (.single-image) — full-bleed width, centred, never side-cropped.
   The SVG's own 745px intrinsic width + a `margin:0 0 0 auto` was shrinking it and pushing it
   right, so it read as small and cut off on both sides. Force it to span its container. */
/* Show ONLY one band per breakpoint (both .desktop & .mobile imgs share the same src,
   so forcing display:block on both was stacking two identical bands = the "double" bug). */
.single-image img{width:100%!important;max-width:100%!important;height:auto!important;margin:0 auto!important;}
.single-image img.mobile{display:none!important;}
.single-image img.desktop{display:block!important;}
@media(max-width:768px){
  .single-image img.desktop{display:none!important;}
  .single-image img.mobile{display:block!important;}
}
/* full-bleed the decorative bands edge-to-edge (no left/right viewport gap) */
.single-image,
.izh-brewx__banner,
.whoweare-banner{
  width:100vw!important;max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
  text-align:center;overflow:hidden;
}
/* the inner .page-width caps the band at ~1200px → kill it so the band truly hits both edges */
.single-image .page-width{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
.whoweare-banner img{width:100%!important;max-width:100%!important;height:auto!important;margin:0 auto!important;}
.whoweare-banner img.mobile{display:none!important;}
.whoweare-banner img.desktop{display:block!important;}
@media(max-width:768px){
  .whoweare-banner img.desktop{display:none!important;}
  .whoweare-banner img.mobile{display:block!important;}
}

/* Home "Happy Customers" — force ALL reviews into a clean responsive grid and neutralise
   the Flickity carousel (its absolute-positioned cells + cellAlign:left showed one card with an
   empty right half; a % width computed against the huge flickity-slider made it worse). This
   works whether Flickity initialised or not. */
.testimonials-slider{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important;}
.testimonials-slider.flickity-enabled .flickity-viewport{height:auto!important;overflow:visible!important;}
.testimonials-slider.flickity-enabled .flickity-slider{position:static!important;transform:none!important;width:100%!important;
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important;}
/* the theme hides every non-first slide (display:none) until Flickity enhances it — force them all
   visible so the grid always shows every review, Flickity or not. */
.testimonials-slider .testimonials-slide{display:flex!important;position:static!important;left:auto!important;
  width:auto!important;height:auto!important;padding:0!important;}
/* card internals: the legacy fixed 170px/240px quote box overflowed (quotes vary in length),
   colliding with the stars + author. Let it grow with its content and flow top-to-bottom. */
.testimonials-slider__text{height:100%!important;display:flex!important;flex-direction:column!important;
  justify-content:flex-start!important;align-items:center;gap:14px;margin:0 6px!important;padding:30px 26px!important;
  box-sizing:border-box;transform:none!important;border-radius:20px;background:#fff9ef;}
.testimonials-slide.is-selected .testimonials-slider__text{transform:none!important;}
.testimonials-slider__text .rte-setting,
.testimonials-slider__text .rte-setting.text-spacing{height:auto!important;max-height:none!important;margin:0!important;overflow:visible!important;flex:0 0 auto;}
.testimonials-slider__text p{margin:0!important;height:auto!important;}
.testimonials-slider__text .testimonial-stars{position:static!important;margin:0!important;order:2;}
.testimonials-slider__text cite{position:static!important;margin:0!important;order:3;}
.testimonials-slider__text .rte-setting{order:1;}
.testimonials-section .flickity-button,
.testimonials-section .flickity-page-dots{display:none!important;}
@media(max-width:1024px){
  .testimonials-slider,.testimonials-slider.flickity-enabled .flickity-slider{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:600px){
  .testimonials-slider,.testimonials-slider.flickity-enabled .flickity-slider{grid-template-columns:1fr!important;}
}

/* footer: warm cream panel */
footer.site-footer{background-color:#F2EADA!important;}
.footer__newsletter-btn{background:#211d18!important;color:#fff!important;}

/* =====================  HOME SECTION RHYTHM  ===================== */
/* the scraped sections stack their own paddings — keep the gaps tight & even */
.izh-section .page-width{padding-top:0;}
.izh-section:where(.index-section){margin:0;}

/* hero slider: full-bleed, no letterboxing band */
.mainsliders,.izh-hero{background:transparent!important;}
.izh-hero__slide img{width:100%;height:auto;display:block;}

/* =====================  SAFETY NETS  ===================== */
/* unsized inline SVGs must never explode a button/chip.
   Zero-specificity :where() — every real sized rule overrides it. */
:where(svg){width:1em;height:1em;flex:0 0 auto;}

/* legacy scraped cart drawer is fully replaced by the IZH drawer — never show it */
#CartDrawer{display:none!important;}

/* back-to-top */
.izh-top{position:fixed;right:20px;bottom:90px;z-index:800;width:46px;height:46px;border-radius:50%;border:1px solid var(--izh-line,#e7ddc9);
  background:#fff;color:#211d18;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(40,30,15,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;}
.izh-top.is-on{opacity:1;visibility:visible;transform:none;}
.izh-top:hover{background:#211d18;color:#fff;}
.izh-top svg{width:19px;height:19px;}
@media(max-width:600px){.izh-top{right:14px;bottom:84px;width:42px;height:42px;}}

/* =====================  BREWING-METHOD GUIDES (french-press … pourover, 10 pages)  =====================
   One shared legacy template → one premium IZH shell (.izh-brew-method) with a per-method illustration hero,
   numbered recipe steps and cream list cards. Original hand-drawn look, IZH palette. */
.izh-brew-method{--ink:#2b2018;--coffee:#4a2f1c;--teal:#0e7c86;--cream:#fff9ef;--line:#ece0cf;color:var(--ink);}
.izh-brew-method .brewing-guides-banner{display:none!important;}          /* drop the empty legacy banner */
.izh-brewm-hero{width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg,#fbf6ec 0%,#f3e9dd 56%,#eef3e6 100%);
  display:flex;justify-content:center;align-items:flex-end;padding:clamp(30px,5vw,60px) 20px 0;}
.izh-brewm-hero__art img{width:auto;height:clamp(120px,16vw,192px);display:block;
  filter:drop-shadow(0 18px 22px rgba(74,47,28,.14));}
.izh-brew-method .page-width--narrow,
.izh-brew-method .page-content{max-width:772px!important;margin:0 auto!important;
  padding:clamp(22px,4vw,44px) 22px 8px!important;}
.izh-brew-method .section-header{margin:0 0 6px!important;text-align:center;}
.izh-brew-method .section-header__title{font-family:'Cormorant Garamond',Georgia,serif!important;
  font-weight:600!important;font-size:clamp(34px,6vw,62px)!important;line-height:1.04!important;
  color:var(--ink)!important;text-transform:none!important;margin:0 auto 6px!important;letter-spacing:0!important;}
.izh-brew-method .rte p{font-size:clamp(15px,1.7vw,18px)!important;line-height:1.6!important;color:#5f5140!important;
  text-align:center;max-width:60ch;margin:0 auto 4px!important;}
.izh-brew-method .rte a,.izh-brew-method a{color:var(--teal)!important;text-decoration:underline;text-underline-offset:3px;}
.izh-brew-method h3{font-family:'Brandon Grotesque Bold','Brandon Grotesque',sans-serif!important;
  font-size:clamp(17px,2vw,23px)!important;letter-spacing:.02em!important;color:var(--coffee)!important;
  margin:clamp(28px,4vw,42px) 0 15px!important;padding-bottom:11px!important;position:relative;text-align:left;text-transform:none!important;}
.izh-brew-method h3::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;background:var(--teal);}
.izh-brew-method ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:10px;counter-reset:brewstep;}
.izh-brew-method ul li{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:13px;
  padding:13px 18px 13px 54px!important;font-size:15.5px;line-height:1.55;color:#3a2c1e;margin:0!important;list-style:none!important;}
.izh-brew-method ul li::marker{content:"";}
.izh-brew-method ul li::before{counter-increment:brewstep;content:counter(brewstep);
  position:absolute;left:12px;top:11px;width:28px;height:28px;border-radius:50%;
  background:var(--teal);color:#fff9ef;font-family:'Brandon Grotesque Bold',sans-serif;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(14,124,134,.5);}
.izh-brew-method .product-sets h2,
.izh-brew-method .product-grid-row h2{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:600!important;
  font-size:clamp(26px,4vw,44px)!important;text-align:center;color:var(--ink)!important;
  margin:clamp(30px,5vw,56px) 0 24px!important;text-transform:none!important;}
@media(max-width:600px){
  .izh-brew-method ul li{padding:12px 15px 12px 50px!important;font-size:14.5px;}
  .izh-brew-method ul li::before{width:25px;height:25px;left:11px;top:11px;}
}