/* MIURE Studio typography: Josefin Sans with a clear visual hierarchy. */
:root {
  --miure-theme-display: "Josefin Sans", sans-serif;
  --miure-global-font: "Josefin Sans", sans-serif;
  --miure-font-light: 300;
  --miure-font-medium: 500;
  --miure-font-semibold: 600;
  --miure-font-bold: 700;
}

html body {
  font-family: var(--miure-global-font) !important;
  font-weight: var(--miure-font-light);
}

/* Keep Josefin Sans throughout the visible interface while preserving each
   element's intended weight. Icon-font elements remain untouched. */
html body :where(
  address, article, aside, blockquote, caption, dd, div, dt, figcaption,
  footer, form, h1, h2, h3, h4, h5, h6, header, label, legend, li, main,
  nav, option, p, section, small, span, strong, b, del, em, mark, table,
  tbody, td, tfoot, th, thead, tr, a, button, input, select, textarea
):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="icon"]):not([class*="j-icon"]) {
  font-family: var(--miure-global-font) !important;
}

html body input::placeholder,
html body textarea::placeholder {
  font-family: var(--miure-global-font) !important;
  font-weight: var(--miure-font-light);
}

/* Primary hierarchy: page headings, product names and section titles. */
html body :where(
  h1, h2, h3, h4, h5, h6,
  .title, .page-title, .module-title, .panel-title, .block-title,
  .section-title, .product-title
) {
  font-weight: var(--miure-font-semibold) !important;
}

/* Journal declares several title weights with highly specific selectors. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .title,
html body .title.page-title,
html body .module-title,
html body .panel-title,
html body .block-title,
html body .section-title,
html body .product-details .title.page-title {
  font-weight: var(--miure-font-semibold) !important;
}

/* Runtime Journal repair styles are injected after linked stylesheets. These
   anchored selectors preserve the intended hierarchy without changing layout. */
html body #content h1.title.page-title,
html.route-product-product body #product-product .product-details .title.page-title {
  font-weight: var(--miure-font-semibold) !important;
}

html body :where(strong, b, th, legend, .control-label, .catalog-title) {
  font-weight: var(--miure-font-semibold) !important;
}

html body :where(
  .product-thumb .name,
  .product-thumb .name a,
  .product-layout .name,
  .product-layout .name a,
  .product-details .page-title,
  .product-details .product-title
) {
  font-weight: var(--miure-font-semibold) !important;
}

/* Prices and primary actions need emphasis without competing with headings. */
html body :where(.product-price, .price, .price-new, .special-price) {
  font-weight: var(--miure-font-medium) !important;
}

html body :where(.btn, button, input[type="button"], input[type="submit"]) {
  font-weight: var(--miure-font-semibold) !important;
}

html body a.btn,
html body button.btn,
html body .product-thumb .btn-cart,
html body .product-details .btn-cart,
html body input[type="button"],
html body input[type="submit"] {
  font-weight: var(--miure-font-semibold) !important;
}

html.route-product-catalog body #content .main-products-style.product-grid .product-thumb .cart-group .btn-cart.btn {
  font-weight: var(--miure-font-semibold) !important;
}

html body :where(.main-menu, .j-menu) a {
  font-weight: var(--miure-font-medium) !important;
}

/* Footer column headings should remain visibly distinct from their links. */
html body footer :where(strong, .catalog-title, .module-title, h3, h4) {
  font-weight: var(--miure-font-bold) !important;
}

/* This control has a high-specificity legacy `font` shorthand. */
html.route-product-product #product-product .miure-size-button {
  font-family: var(--miure-global-font) !important;
  font-weight: var(--miure-font-medium) !important;
}