/* =========================================================
   GLOBAL TYPOGRAPHY SYSTEM — FINAL THEME VERSION
   Purpose: one readable control file for fonts, text sizes,
   colours, line-height and reading width across the site.

   Brand pairing:
   - Headings: Cormorant Garamond
   - Body / UI: Inter

   Important note:
   Elementor default fonts/colors are now disabled in admin.
   This file therefore becomes the main typography authority
   for theme content, WooCommerce, archives and Elementor posts.
   ========================================================= */

/* =========================================================
   1) TYPOGRAPHY TOKENS — edit these first
   ========================================================= */
:root {
  --dyb-font-sans: "Inter", "Poppins", "Helvetica Neue", Arial, sans-serif;
  --dyb-font-serif: "Cormorant Garamond", "Roboto Slab", Georgia, serif;

  --dyb-text-strong: #241f1a;
  --dyb-text-body: #4d453d;
  --dyb-text-soft: #7d7266;
  --dyb-text-muted: #9c8f82;
  --dyb-text-on-dark: #f7f2ec;
  --dyb-link: #8b6748;
  --dyb-link-hover: #5a4130;

  --dyb-body-size: 17px;
  --dyb-body-line: 1.75;
  --dyb-small-size: 14px;
  --dyb-meta-size: 11px;

  --dyb-h1-size: clamp(40px, 4.3vw, 62px);
  --dyb-h2-size: clamp(30px, 2.8vw, 44px);
  --dyb-h3-size: clamp(24px, 2vw, 34px);
  --dyb-h4-size: clamp(20px, 1.5vw, 28px);
  --dyb-h5-size: 17px;
  --dyb-h6-size: 14px;

  --dyb-heading-line: 0.98;
  --dyb-heading-tight: -0.018em;
  --dyb-measure: 760px;
  --dyb-measure-narrow: 68ch;

  --dyb-page-title-size: clamp(28px, 2.4vw, 42px);
  --dyb-post-title-size: clamp(32px, 3vw, 48px);
  --dyb-archive-title-size: clamp(30px, 2.8vw, 44px);
  --dyb-utility-title-size: clamp(26px, 2.2vw, 36px);
}

/* End tokens. */


/* =========================================================
   2) GLOBAL BASE — body text, forms, buttons, links
   ========================================================= */
body,
button,
input,
select,
textarea {
  font-family: var(--dyb-font-sans);
  color: var(--dyb-text-body);
}

body {
  font-size: var(--dyb-body-size);
  line-height: var(--dyb-body-line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--dyb-link);
}

a:hover,
a:focus {
  color: var(--dyb-link-hover);
}

button,
input,
select,
textarea,
label,
legend,
.woocommerce button,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce .button,
.button,
input[type="submit"] {
  font-family: var(--dyb-font-sans);
}

/* End global base. */


/* =========================================================
   3) SHARED HEADING SYSTEM — premium serif headings
   Keep this generic so standard content feels coherent.
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.dyb-v2-editorial-title,
.dyb-v2-editorial-card-title,
.dyb-v2-empty-state .dyb-v2-editorial-title,
.woocommerce-loop-product__title,
.product_title,
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3,
.yith-wcwl-form h2,
.yith-wcwl-form h3 {
  font-family: var(--dyb-font-serif);
  color: var(--dyb-text-strong);
  font-weight: 400;
  letter-spacing: var(--dyb-heading-tight);
}

h1,
.entry-title,
.dyb-v2-editorial-title,
.product_title {
  font-size: var(--dyb-h1-size);
  line-height: var(--dyb-heading-line);
}

h2,
.woocommerce .cart_totals h2,
.woocommerce-account .woocommerce h2,
.yith-wcwl-form h2 {
  font-size: var(--dyb-h2-size);
  line-height: 1.02;
}

h3,
.woocommerce-checkout h3,
.woocommerce-account .woocommerce h3,
.yith-wcwl-form h3,
.dyb-v2-editorial-card-title,
.woocommerce-loop-product__title {
  font-size: var(--dyb-h3-size);
  line-height: 1.05;
}

h4 { font-size: var(--dyb-h4-size); line-height: 1.1; }
h5 { font-size: var(--dyb-h5-size); line-height: 1.15; }
h6 { font-size: var(--dyb-h6-size); line-height: 1.2; }

/* End shared heading system. */


/* =========================================================
   4) GENERIC PAGE / ARCHIVE / POST INTRO TYPOGRAPHY
   This keeps page, archive and blog-intro areas aligned.
   ========================================================= */
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-kicker,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-single-meta,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-editorial-meta,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-inline-link,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .page-links,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .post-categories,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .post-date {
  font-family: var(--dyb-font-sans);
  font-size: var(--dyb-meta-size);
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dyb-text-muted);
}

body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-editorial-intro,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .dyb-v2-single-subtitle,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .archive-description,
body:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2) .term-description {
  font-family: var(--dyb-font-sans);
  font-size: clamp(18px, 1.65vw, 21px);
  line-height: 1.72;
  color: var(--dyb-text-body);
  max-width: var(--dyb-measure);
}

/* End generic intro typography. */

/* =========================================================
   4B) TITLE SCALE OVERRIDES — keep utility/page titles calmer
   The large editorial title size is reserved for real hero use.
   Standard pages, archive pages and utility pages get a smaller
   and cleaner scale so they stop feeling oversized.
   ========================================================= */
body.page:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2):not(.single-post) .dyb-v2-editorial-title,
body.page:not(.page-template-template-home-v2):not(.page-template-template-boutique-v2):not(.single-post) .entry-title {
  font-size: var(--dyb-page-title-size) !important;
  line-height: 1.03 !important;
}

body.archive .dyb-v2-editorial-title,
body.blog .dyb-v2-editorial-title,
body.category .dyb-v2-editorial-title,
body.tag .dyb-v2-editorial-title,
body.date .dyb-v2-editorial-title,
body.author .dyb-v2-editorial-title {
  font-size: var(--dyb-archive-title-size) !important;
  line-height: 1.02 !important;
}

body.single-post .dyb-v2-editorial-title,
body.single-post .entry-title {
  font-size: var(--dyb-post-title-size) !important;
  line-height: 1.01 !important;
}

body.woocommerce-account .dyb-v2-editorial-title,
body.woocommerce-cart .dyb-v2-editorial-title,
body.woocommerce-checkout .dyb-v2-editorial-title,
body.woocommerce-wishlist .dyb-v2-editorial-title,
body .wishlist-title h2,
body .wishlist-title h2 a {
  font-size: var(--dyb-utility-title-size) !important;
  line-height: 1.05 !important;
}

body .wishlist-title h2,
body .wishlist-title h2 a {
  font-family: var(--dyb-font-serif) !important;
  color: var(--dyb-text-strong) !important;
  font-weight: 400 !important;
  letter-spacing: var(--dyb-heading-tight) !important;
  text-decoration: none !important;
}

/* End title scale overrides. */


/* =========================================================
   5) READING CONTENT — normal page/post/editorial text
   This is the default reading layer for non-Elementor text.
   ========================================================= */
.dyb-v2-editorial-content,
.entry-content,
.elementor-widget-theme-post-content .elementor-widget-container,
.elementor-widget-theme-post-excerpt .elementor-widget-container {
  font-family: var(--dyb-font-sans);
  color: var(--dyb-text-body);
}

.dyb-v2-editorial-content :where(p, li, blockquote cite, figcaption, td, th),
.entry-content :where(p, li, blockquote cite, figcaption, td, th),
.elementor-widget-theme-post-content :where(p, li, blockquote cite, figcaption, td, th),
.elementor-widget-theme-post-excerpt :where(p, li, blockquote cite, figcaption, td, th) {
  font-family: var(--dyb-font-sans) !important;
  font-size: var(--dyb-body-size) !important;
  line-height: var(--dyb-body-line) !important;
  color: var(--dyb-text-body) !important;
}

.dyb-v2-editorial-content :where(h1, h2, h3, h4, h5, h6),
.entry-content :where(h1, h2, h3, h4, h5, h6),
.elementor-widget-theme-post-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--dyb-font-serif) !important;
  color: var(--dyb-text-strong) !important;
  font-weight: 400 !important;
  letter-spacing: var(--dyb-heading-tight) !important;
}

.dyb-v2-editorial-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, table, form, .wp-block-buttons, .wp-block-quote),
.entry-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, table, form, .wp-block-buttons, .wp-block-quote) {
  max-width: var(--dyb-measure);
}

.dyb-v2-editorial-content > :where(ul, ol),
.entry-content > :where(ul, ol) {
  padding-left: 1.35em;
}

.dyb-v2-editorial-content blockquote,
.entry-content blockquote {
  border-left: 1px solid rgba(36, 31, 26, 0.18);
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.2rem;
  font-family: var(--dyb-font-serif) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.2 !important;
  color: var(--dyb-text-strong) !important;
}

/* End reading content. */


/* =========================================================
   6) ELEMENTOR POSTS — PRIMARY OVERRIDE LAYER
   All current blog posts are built with free Elementor.
   This section intentionally standardises widget typography.
   ========================================================= */
body.single-post .elementor,
body.single-post .elementor-widget,
body.single-post .elementor-widget-container,
body.single-post .elementor-widget-text-editor,
body.single-post .elementor-widget-text-editor .elementor-widget-container,
body.single-post .elementor-widget-text-editor .elementor-text-editor {
  font-family: var(--dyb-font-sans);
  color: var(--dyb-text-body);
}

body.single-post .elementor-widget-text-editor .elementor-text-editor,
body.single-post .elementor-widget-text-editor .elementor-text-editor > * {
  max-width: var(--dyb-measure);
}

body.single-post .elementor-widget-text-editor :where(p, li, td, th, figcaption, small) {
  font-family: var(--dyb-font-sans) !important;
  font-size: var(--dyb-body-size) !important;
  line-height: var(--dyb-body-line) !important;
  color: var(--dyb-text-body) !important;
}

body.single-post .elementor-widget-text-editor :where(ul, ol) {
  padding-left: 1.35em !important;
  margin: 0 0 1.15em !important;
}

body.single-post .elementor-widget-text-editor :where(p, ul, ol, blockquote, table, figure) {
  margin: 0 0 1.1em !important;
}

body.single-post .elementor-widget-heading .elementor-heading-title,
body.single-post .elementor-widget-text-editor :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--dyb-font-serif) !important;
  color: var(--dyb-text-strong) !important;
  font-weight: 400 !important;
  letter-spacing: var(--dyb-heading-tight) !important;
  margin: 0 0 0.32em !important;
}

body.single-post .elementor-widget-heading h1.elementor-heading-title,
body.single-post .elementor-widget-text-editor h1 {
  font-size: clamp(34px, 3.2vw, 48px) !important;
  line-height: 1.0 !important;
}

body.single-post .elementor-widget-heading h2.elementor-heading-title,
body.single-post .elementor-widget-text-editor h2 {
  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.04 !important;
}

body.single-post .elementor-widget-heading h3.elementor-heading-title,
body.single-post .elementor-widget-text-editor h3 {
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.08 !important;
}

body.single-post .elementor-widget-heading h4.elementor-heading-title,
body.single-post .elementor-widget-text-editor h4 {
  font-size: clamp(18px, 1.4vw, 24px) !important;
  line-height: 1.14 !important;
}

body.single-post .elementor-widget-text-editor blockquote {
  border-left: 1px solid rgba(36, 31, 26, 0.18) !important;
  padding: .2rem 0 .2rem 1.2rem !important;
  font-family: var(--dyb-font-serif) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.2 !important;
  color: var(--dyb-text-strong) !important;
}

body.single-post .elementor-widget-heading,
body.single-post .elementor-widget-text-editor {
  margin-bottom: 0 !important;
}

body.single-post .elementor-widget-heading + .elementor-widget-text-editor,
body.single-post .elementor-widget-text-editor + .elementor-widget-heading,
body.single-post .elementor-widget-text-editor + .elementor-widget-text-editor,
body.single-post .elementor-widget-heading + .elementor-widget-heading {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------
   Strong / span cleanup inside Elementor text widgets.
   Many legacy posts used <strong> as fake headings or added
   inline span typography. Flatten those back to readable text.
   --------------------------------------------------------- */
body.single-post .elementor-widget-text-editor :where(strong, b),
body.single-post .elementor-widget-text-editor :where(strong, b) :where(span, a, em, small) {
  font-family: var(--dyb-font-sans) !important;
  font-size: 1em !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--dyb-text-strong) !important;
}

body.single-post .elementor-widget-text-editor :where(p, li, td, th) [style*="font-family"],
body.single-post .elementor-widget-text-editor :where(p, li, td, th) [style*="font-size"],
body.single-post .elementor-widget-text-editor :where(p, li, td, th) [style*="line-height"],
body.single-post .elementor-widget-text-editor :where(p, li, td, th) [style*="letter-spacing"] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
}

body.single-post .elementor-widget-text-editor :where(p, li) strong + br,
body.single-post .elementor-widget-text-editor :where(p, li) b + br {
  display: none;
}

/* End Elementor posts layer. */


/* =========================================================
   7) ARCHIVE CARDS / BLOG GRID
   Keep cards readable and aligned across archives and search.
   ========================================================= */
.dyb-v2-editorial-card-title,
.search .dyb-v2-editorial-card-title {
  font-size: clamp(26px, 2.1vw, 34px);
  line-height: 1.02;
}

.dyb-v2-editorial-excerpt,
.search .dyb-v2-editorial-excerpt {
  font-family: var(--dyb-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--dyb-text-body);
}

.dyb-v2-editorial-meta,
.search .dyb-v2-editorial-meta {
  color: var(--dyb-text-muted);
}

/* End archive card layer. */


/* =========================================================
   8) WOOCOMMERCE TYPOGRAPHY
   Product pages keep the premium serif/sans pairing without
   changing the structural WooCommerce layout you already fixed.
   ========================================================= */
.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce p,
.woocommerce-page .woocommerce li,
.woocommerce-page .woocommerce label,
.woocommerce-page .woocommerce td,
.woocommerce-page .woocommerce th,
.woocommerce-page .woocommerce .input-text,
.woocommerce-page .woocommerce select,
.woocommerce-page .woocommerce textarea {
  font-family: var(--dyb-font-sans);
}

.woocommerce-page .woocommerce :where(.product_title, .woocommerce-loop-product__title, .cart_totals h2, .cross-sells h2, .upsells h2, .related h2, .woocommerce-order-details__title, .woocommerce-column__title) {
  font-family: var(--dyb-font-serif);
  color: var(--dyb-text-strong);
}

.woocommerce-page .woocommerce :where(.price, .amount, .woocommerce-Price-amount) {
  font-family: var(--dyb-font-sans);
  color: var(--dyb-text-strong);
  font-weight: 500;
}

.woocommerce-page .woocommerce :where(.woocommerce-breadcrumb, .posted_in, .sku_wrapper, .product_meta, .woocommerce-review-link) {
  font-size: 13px;
  line-height: 1.6;
  color: var(--dyb-text-soft);
}

/* End WooCommerce typography. */


/* =========================================================
   9) HEADER / FOOTER / NEWSLETTER SUPPORT
   These light rules keep the chosen font pairing available in the
   shared global shell without fighting the polished V2 design.
   ========================================================= */
.dyb-v2-header,
.dyb-v2-footer,
.dyb-v2-home-newsletter,
.dyb-v2-page,
#wrapper-navbar {
  font-family: var(--dyb-font-sans);
}

.dyb-v2-footer :where(h2, h3, h4),
.dyb-v2-home-newsletter-copy h2,
.dyb-v2-page-cta h2 {
  font-family: var(--dyb-font-serif);
}

.dyb-v2-footer,
.dyb-v2-home-newsletter-copy p,
.dyb-v2-footer p,
.dyb-v2-footer li,
.dyb-v2-footer a {
  color: inherit;
}

/* End header/footer/newsletter support. */


/* =========================================================
   10) RESPONSIVE SCALE
   Reduce text scale only on smaller screens.
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --dyb-body-size: 16px;
    --dyb-measure: 700px;
    --dyb-h1-size: clamp(36px, 4.6vw, 52px);
    --dyb-h2-size: clamp(28px, 3.4vw, 38px);
    --dyb-h3-size: clamp(22px, 2.6vw, 28px);
    --dyb-page-title-size: clamp(28px, 3vw, 38px);
    --dyb-post-title-size: clamp(30px, 3.6vw, 42px);
    --dyb-archive-title-size: clamp(28px, 3.3vw, 40px);
    --dyb-utility-title-size: clamp(24px, 2.8vw, 32px);
  }
}

@media (max-width: 767px) {
  :root {
    --dyb-body-size: 15px;
    --dyb-body-line: 1.72;
    --dyb-measure: 100%;
    --dyb-h1-size: clamp(30px, 8vw, 40px);
    --dyb-h2-size: clamp(24px, 6.8vw, 32px);
    --dyb-h3-size: clamp(20px, 5vw, 26px);
    --dyb-h4-size: 18px;
    --dyb-page-title-size: clamp(26px, 7vw, 34px);
    --dyb-post-title-size: clamp(28px, 7.5vw, 36px);
    --dyb-archive-title-size: clamp(26px, 7vw, 34px);
    --dyb-utility-title-size: clamp(22px, 6vw, 30px);
  }

  body.single-post .elementor-widget-heading h1.elementor-heading-title,
  body.single-post .elementor-widget-text-editor h1 {
    font-size: clamp(24px, 6vw, 30px) !important;
  }

  body.single-post .elementor-widget-heading h2.elementor-heading-title,
  body.single-post .elementor-widget-text-editor h2 {
    font-size: clamp(24px, 6vw, 30px) !important;
  }

  body.single-post .elementor-widget-heading h3.elementor-heading-title,
  body.single-post .elementor-widget-text-editor h3 {
    font-size: clamp(20px, 4.8vw, 24px) !important;
  }

  .dyb-v2-editorial-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, table, form, .wp-block-buttons, .wp-block-quote),
  .entry-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, table, form, .wp-block-buttons, .wp-block-quote) {
    max-width: 100%;
  }
}

/* End responsive scale. */