/* ==========================================================
   TYPOGRAPHY
   ─────────────────────────────────────────────────────────
   Strategy: override Shoptet's own typography variables in
   :root first — this propagates through all their components
   automatically. Only add element/selector rules for things
   Shoptet doesn't expose as variables.
========================================================== */


/* ==========================================================
   SHOPTET TYPOGRAPHY VARIABLE OVERRIDES
   Shoptet defaults: body font-weight 500, heading weight 600,
   heading line-height 1.1, body font-size 16px / line 24px.
   We override all of these here so Shoptet's own components
   (cart, checkout, product page etc.) inherit our values
   without needing individual selector overrides.
========================================================== */

:root {

  /* Body — Shoptet sets font-family via --template-font
     (already done in my_base.css). These fix weight, size,
     line-height and letter-spacing. */
  --form-controls-font-size:   var(--sh-text-base);
  --form-controls-line-height: var(--sh-line-height-body);

  /* štítky nad poli formulářů (forms redesign --on) */
  --form-group-labels-font-size:   var(--sh-text-sm);
  --form-group-labels-line-height: var(--sh-line-height-body);

  /* mezera mezi form-group bloky – Shoptet dává napevno 12px, na
     mobilu je to zbytečně moc, na desktopu klidně o trochu víc */
  --form-groups-margin: clamp(6px, 1.5vw, 12px);

  /* Shoptet hardcodes letter-spacing: .4px on body — remove it */
  letter-spacing: 0;

}


/* ==========================================================
   BODY
   font-family and color come from --template-font and
   --colors-foregrounds-content-primary overrides in my_base.css.
   Only size, weight and line-height need explicit rules here
   because Shoptet sets them as px values, not variables.
========================================================== */

body {
  font-size:   var(--sh-text-base);
  font-weight: var(--sh-font-weight-body);
  line-height: var(--sh-line-height-body);
  letter-spacing: 0;
}


/* ==========================================================
   PARAGRAPHS
========================================================== */

p {
  margin: 0 0 1.5em;
  font-weight: inherit;
  line-height: inherit;
}


/* ==========================================================
   HEADINGS
   font-family comes from --template-headings-font in my_base.css.
   color comes from --colors-foregrounds-headlines-primary override.
   We only need to fix weight and line-height — Shoptet defaults
   are font-weight: 600 and line-height: 1.1, both too heavy/tight.
========================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--sh-font-weight-heading);
  line-height: var(--sh-line-height-heading);
  letter-spacing: 0;
}


/* ==========================================================
   SHOPTET-SPECIFIC OVERRIDES
   These selectors use hardcoded values in Shoptet's CSS that
   can't be reached via variables — minimal and targeted.
========================================================== */

/* Product short description — Shoptet sometimes resets this */
.p-short-description,
.p-short-description p {
  font-size:   var(--sh-text-base);
  font-weight: var(--sh-font-weight-body);
  line-height: var(--sh-line-height-body);
}

/* Page element headings (sidebars, homepage blocks) —
   Shoptet hardcodes font-size: 20px and font-weight: 700 here */
.pageElement__heading,
.homepage-group-title,
.products-heading,
.products-block-title,
.benefitBanner__title {
  font-weight: var(--sh-font-weight-heading) !important;
  line-height: var(--sh-line-height-heading) !important;
}

/* Customer account pages — Shoptet hardcodes weight 600/700
   and specific px sizes with letter-spacing */
.customer-page .content h1,
.customer-page .content h2 {
  font-weight: var(--sh-font-weight-heading) !important;
  letter-spacing: 0 !important;
}