/*
 * Final storefront typography foundation.
 *
 * Keep icon and symbol families component-owned. This file targets only the
 * general text cascade and the Porto variables that feed it.
 */

:root {
  --porto-body-ff: var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  --porto-body-fs: var(--storefront-type-body-size, 13px);
  --porto-body-fw: var(--storefront-type-body-weight, 400);
  --porto-body-lh: var(--storefront-type-body-line-height, 22px);
  --porto-body-color: var(--storefront-color-ink, #232323);
  --porto-heading-color: var(--storefront-color-ink, #232323);
  --porto-primary-color: var(--storefront-color-primary, #ffc107);
  --porto-primary-color-inverse: var(--storefront-color-primary-text, #000);
  --porto-secondary-color: #000;
}

body {
  color: var(--storefront-color-ink, #232323);
  font-family: var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  font-size: var(--storefront-type-body-size, 13px);
  font-weight: var(--storefront-type-body-weight, 400);
  line-height: var(--storefront-type-body-line-height, 22px);
  letter-spacing: .02em;
}

body :is(:focus, :focus-visible) {
  outline: none;
}

body :focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--storefront-color-ink, #232323);
  font-family: var(--storefront-font-heading, "Jost", Arial, sans-serif);
}

body :where(h1, h2, h3, h4, h5) {
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 22px;
}

body :where(h1) { font-size: 30px; }
body :where(h2) { font-size: 20px; line-height: 28px; }
body :where(h3) { font-size: 17px; }
body :where(h4) { font-size: 15px; }
body :where(h5) { font-size: 12px; }

@media (min-width: 750px) {
  body :where(h1) { font-size: 40px; }
  body :where(h2) { font-size: 24px; }
  body :where(h3) { font-size: 18px; }
  body :where(h5) { font-size: 13px; }
}

:where(button, input, select, textarea):not(:where(
  .storefront-back-in-stock__form [id^="omnisend-embedded-v2-"] *,
  .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"],
  .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"] *,
  #footer .site-footer .footer-newsletter [id^="omnisend-embedded-"] *,
  #footer .site-footer .footer-newsletter form[id^="omnisend-form-"][id$="-submit-form"],
  #footer .site-footer .footer-newsletter form[id^="omnisend-form-"][id$="-submit-form"] *
)),
.tooltip,
.popover,
.page-header-8 li a {
  font-family: var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
}

/* Native status messages use the shared semantic notice presentation. */
body.storefront-button-system :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--storefront-color-ink, #232323);
  background: transparent;
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
}

body.storefront-button-system :is(.woocommerce-info, .wc-block-components-notice-banner.is-info) {
  color: var(--storefront-color-info, #202020);
  background: var(--storefront-color-info-bg, #fff2dd);
}

body.storefront-button-system :is(.woocommerce-message, .wc-block-components-notice-banner.is-success) {
  color: var(--storefront-color-success, #5a5a5a);
  background: var(--storefront-color-success-bg, #dff0d8);
}

body.storefront-button-system :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
  color: var(--storefront-color-error, #d93333);
  background: var(--storefront-color-error-bg, #fceeee);
}

body.storefront-button-system :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  display: none;
  content: none;
}