/* =============================================================
   Hertes — global typography scale (heading / subtitle / body)
   ≥992px:        42 / 32 / 16
   768–991px:     38 / 30 / 14
   576–767px:     32 / 25 / 14
   400–575px:     28 / 22 / 14
   ≤399px:        24 / 19 / 14
   Loaded last on every page via typography_link.php
   ============================================================= */

/* ---- Scale tokens per breakpoint ---- */
@media screen and (max-width: 399px) {
  :root {
    --type-heading: 24px;
    --type-subtitle: 19px;
    --type-body: 14px;
    --type-heading-line: 1.28;
    --type-subtitle-line: 1.32;
    --type-body-line: 1.55;
  }
}

@media screen and (min-width: 400px) and (max-width: 575px) {
  :root {
    --type-heading: 28px;
    --type-subtitle: 22px;
    --type-body: 14px;
    --type-heading-line: 1.26;
    --type-subtitle-line: 1.32;
    --type-body-line: 1.55;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  :root {
    --type-heading: 32px;
    --type-subtitle: 25px;
    --type-body: 14px;
    --type-heading-line: 1.24;
    --type-subtitle-line: 1.3;
    --type-body-line: 1.55;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  :root {
    --type-heading: 38px;
    --type-subtitle: 30px;
    --type-body: 14px;
    --type-heading-line: 1.23;
    --type-subtitle-line: 1.28;
    --type-body-line: 1.55;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --type-heading: 42px;
    --type-subtitle: 32px;
    --type-body: 16px;
    --type-heading-line: 1.22;
    --type-subtitle-line: 1.28;
    --type-body-line: 1.6;
  }
}

/* ---- Base ---- */
body {
  font-size: var(--type-body);
  line-height: var(--type-body-line);
}

/* ---- Section headings ---- */
section .heading,
.usp-sec .heading,
.dhatri-usp .heading,
.dhatri-section-head .heading,
.journey-scroll__head .heading,
.hp-section-head__title,
.cloffy-intro__title,
.fitlys-wellness__head .heading,
.fitlys-path__head .heading,
.fitlys-proof__head .heading,
.gift-collection__title,
.gift-unbox__title,
.gift-notes__head .heading,
.dhatri-voices__head .heading,
.cloffy-testimonials .heading,
.cloffy-menu-nav__head .heading,
.cloffy-products > .container > .heading,
.cloffy-cta__text h2,
.fitlys-cta__text h2,
.hp-cta-band__title,
.hp-awards__title,
.hp-dive__title,
.gift-voucher__title,
.story-sec .content h3,
.prod-tech .story-text h3,
.dhatri-banner__title,
.cloffy-banner__title,
.fitlys-banner__title,
.gift-banner__title,
.chocolates-banner__title,
.hp-hero__title,
.hp-bhero__title,
.cloffy-voices__head .heading,
.cloffy-cat-section__title,
.journey-scroll__head .heading,
.fitlys-path__head .heading {
  font-family: var(--font-primary);
  font-size: var(--type-heading);
  line-height: var(--type-heading-line);
}

/* ---- Subtitles ---- */
.products-sec .products h3,
.cloffy-product h3,
.fitlys-panel__body h3,
.fitlys-range__title,
.cloffy-crema__title,
.cloffy-crema__subtitle,
.hp-usp-card__title,
.hp-usp__slide-title,
.hp-loved__title,
.hp-loved__card-title,
.hp-loved__cell-title,
.hp-loved__pick-title,
.hp-loved__stage-title,
.hp-loved__tab-title,
.hp-loved__slide-title,
.hp-cat-card__title,
.hp-story__title,
.hp-story__stage-title,
.hp-story__nav-title,
.hp-story-row__title,
.hp-story-tile__title,
.hp-story-chapter__title,
.hp-cafe-card__body h2,
.prod-tech .card h2,
.gift-box__body h3,
.our-sepciality .content .specilaity h3,
.testimonials-sec .testimonial .info-part .name h3,
.page-cloffy .cloffy-testimonials.testimonials-sec .testimonial .info-part .name h3,
.page-fitlys .fitlys-proof.testimonials-sec .testimonial .info-part .name h3,
.page-gifting .gift-notes.testimonials-sec .gift-note .name h3,
.hp-stats__num {
  font-size: var(--type-subtitle);
  line-height: var(--type-subtitle-line);
}

/* ---- Body / content ---- */
p,
.description,
.lead,
.dhatri-section-head p,
.dhatri-pillar p,
.dhatri-product .description,
.cloffy-product .description,
.fitlys-panel__body .description,
.fitlys-wellness__lead,
.hp-section-head__lead,
.cloffy-intro__lead,
.gift-collection__lead,
.gift-voucher__lead,
.products-sec .products p,
.products-sec .products .product-info > li,
.products-sec .product-info .sublist span,
.testimonials-sec .testimonial .info-part .info-text,
.testimonials-sec .testimonial .info-part .name p,
.footer-sec .info,
.footer-sec a,
.footer-sec ul li,
.dhatri-banner__lead,
.cloffy-banner__lead,
.fitlys-banner__lead,
.gift-banner__lead,
.chocolates-banner__lead,
.dhatri-product__benefits li,
.cloffy-product .cloffy-product__benefits li,
.fitlys-panel__body .fitlys-panel__benefits li,
.cloffy-section-head p,
.journey-scroll__step p,
.journey-scroll__step h4,
.hp-story__lead,
.hp-story__text,
.hp-story__stage-text,
.hp-story__stage-label,
.hp-story__nav-label,
.hp-story__counter,
.hp-story-row__text,
.hp-story-row__step,
.hp-story-tile__text,
.hp-story-tile__eyebrow,
.hp-story-chapter__text,
.hp-story-chapter__eyebrow,
.hp-story-chapter__label,
.hp-story__label,
.hp-story__step,
.hp-awards__lead,
.hp-cafe-card__body p,
.gift-box__body p,
.gift-unbox__lead,
.gift-note .info-text,
.cloffy-cat-section__lead,
.cloffy-cat-section__benefits li,
.cloffy-menu-nav__head p,
.cloffy-voices__head > p,
.fitlys-path__head p,
.fitlys-proof__head > p,
.gift-notes__head > p,
.dhatri-voices__head > p,
.journey-scroll__text,
.journey-scroll__num,
.hp-bhero__lead,
.hp-bhero__perks li,
.hp-loved__tagline {
  font-family: var(--font-primary);
  font-size: var(--type-body);
  line-height: var(--type-body-line);
}

/* ---- UI labels & chrome (minimum = content size) ---- */
.announcement-bar__item,
.announcement-bar__item i,
.hp-marquee__item,
.hp-section-head__eyebrow,
.hp-hero__eyebrow,
.dhatri-usp__eyebrow,
.cloffy-intro__label,
.cloffy-intro__chip,
.navbar .navigations .nav-link,
.navbar__nav .nav-link,
.noir-panel__link,
.navbar .dropdown-item,
.offcanvas-body ul li.dropdown a,
.offcanvas-body .nav-link,
.offcanvas-body ul > li > a,
.dhatri-usp .highlight,
.dhatri-range__card span,
.dhatri-product__benefits i,
.cloffy-product__tag,
.fitlys-range__card span,
.hp-btn,
.shop-btn,
.shop-btn__text,
.dhatri-banner__eyebrow,
.cloffy-banner__eyebrow,
.fitlys-banner__eyebrow,
.gift-banner__eyebrow,
.chocolates-banner__eyebrow,
.dhatri-banner__perks li,
.cloffy-banner__perks li,
.fitlys-banner__perks li,
.gift-banner__perks li,
.chocolates-banner__perks li,
.dhatri-banner__cta,
.cloffy-banner__cta,
.fitlys-banner__cta,
.gift-banner__cta,
.chocolates-banner__cta,
.dhatri-banner__tag,
.cloffy-banner__tag,
.fitlys-banner__tag,
.gift-banner__tag,
.chocolates-banner__tag,
.dhatri-banner__tag span,
.cloffy-banner__tag span,
.fitlys-banner__tag span,
.gift-banner__tag span,
.chocolates-banner__tag span,
.dhatri-banner__strip span,
.cloffy-banner__strip span,
.fitlys-banner__strip span,
.gift-banner__strip span,
.chocolates-banner__strip span,
.hp-stats__label,
.hp-usp-card__text,
.hp-usp-card__desc,
.hp-usp__slide-desc,
.hp-usp__slide-detail,
.hp-loved__tagline,
.hp-loved__card-tagline,
.hp-loved__cell-tagline,
.hp-loved__pick-tagline,
.hp-loved__stage-tagline,
.hp-loved__slide-tagline,
.hp-loved__tile-cta,
.hp-loved__card-cta,
.hp-loved__cell-cta,
.hp-loved__pick-cta,
.hp-loved__stage-cta,
.hp-loved__slide-cta,
.hp-cat-card__desc,
.hp-reelwall__caption,
.premium-card__eyebrow,
.premium-card__title,
.premium-card__text,
.testimonial-stack__quote,
.testimonial-stack__name,
.testimonial-stack__role,
.cloffy-crema__item p,
.cloffy-menu-nav__item span,
.cloffy-menu-nav__item small,
.gift-voucher__eyebrow,
.gift-voucher__perk,
.chocolates-product__tag,
.dhatri-cta__text p,
.cloffy-cta__text p,
.fitlys-cta__text p,
.cloffy-product__benefits li,
.fitlys-panel__benefits li,
.gift-box__benefits li,
.chocolates-product__benefits li,
.chocolates-product p,
.page-chocolates section .heading + p,
.cloffy-section-head .heading + p,
.dhatri-range__card p,
.fitlys-range__card p,
.hp-cta-band__lead,
.hp-cta-band__actions .hp-btn,
.cloffy-banner__foot-label,
.cloffy-banner__foot-index,
.cloffy-banner__ribbon strong,
.cloffy-banner__ribbon span {
  font-family: var(--font-primary);
  font-size: var(--type-body);
}

/* Banner titles use fluid scale on small screens (overrides fixed token) */
@media screen and (max-width: 767px) {
  .dhatri-banner__title,
  .cloffy-banner__title,
  .fitlys-banner__title,
  .gift-banner__title,
  .chocolates-banner__title,
  .hp-bhero__title {
    font-size: clamp(1.45rem, 5.2vw, var(--type-heading));
  }

  .dhatri-banner__lead,
  .cloffy-banner__lead,
  .fitlys-banner__lead,
  .gift-banner__lead,
  .chocolates-banner__lead,
  .hp-bhero__lead {
    font-size: clamp(0.9rem, 3.5vw, var(--type-body));
  }
}

@media screen and (max-width: 399px) {
  .testimonials-sec .testimonial .info-part .name h3,
  .page-cloffy .cloffy-voices.testimonials-sec .testimonial .info-part .name h3,
  .page-fitlys .fitlys-proof.testimonials-sec .testimonial .info-part .name h3 {
    font-size: clamp(1rem, 4.5vw, var(--type-subtitle));
  }

  .testimonials-sec .testimonial .info-part .info-text {
    font-size: clamp(0.875rem, 3.6vw, var(--type-body));
  }
}

/* Icon glyphs inherit text size */
.bi,
.fa,
.fas,
.far,
.fab,
i.bi,
i.fa {
  font-size: inherit;
}

/* ---- Journey section content (16px responsive, all pages) ---- */
.journey-scroll__text,
.journey-scroll__head p,
.cloffy-journey .card-text,
.cloffy-polaroid .card-text,
.fitlys-step .card-text {
  font-size: clamp(15px, 2.4vw, 16px);
  line-height: 1.55;
}

@media screen and (min-width: 480px) {
  .journey-scroll__text,
  .journey-scroll__head p,
  .cloffy-journey .card-text,
  .cloffy-polaroid .card-text,
  .fitlys-step .card-text {
    font-size: 16px;
  }
}