/* Cinzel — storefront text font (custom) */

@font-face {
  font-family: 'Cinzel';
  src: url('/custom/fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('/custom/fonts/Cinzel-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('/custom/fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Remap theme "Montserrat" family to Cinzel so leftover theme.css faces use custom files */
@font-face {
  font-family: 'Montserrat';
  src: url('/custom/fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/custom/fonts/Cinzel-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/custom/fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root,
[data-bs-theme] {
  --cz-font-sans-serif: "Cinzel", serif;
  --cz-body-font-family: "Cinzel", serif;
}

html,
body {
  font-family: "Cinzel", serif;
}

/* ---------------------------------------------------------------------------
 * Typographic recalibration.
 *
 * Cinzel is a display serif with a small x-height and thin serifs, so at
 * interface sizes it reads both lighter and smaller than the Montserrat the
 * theme was designed around.
 *
 * Weight is raised on interface chrome only. The body stays at 400 because CMS
 * content is rendered as bare <p>/<li> with no wrapper class that could be
 * excluded from a global rule, whereas utility classes only ever appear in
 * template markup.
 *
 * Both weights are driven by custom properties so the whole scale can be
 * calibrated from one place.
 * ------------------------------------------------------------------------ */

:root,
[data-bs-theme] {
  --fd-weight-ui: 600;
  --fd-weight-strong: 700;

  /* Capitalised faces need more leading once the weight goes up */
  --cz-body-line-height: 1.6;
}

/* Emphasis. The theme sets headings to 600, which stops separating them from
 * interface text once that is raised to the same weight. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title,
.offcanvas-title,
.navbar-brand,
strong,
b,
th {
  font-weight: var(--fd-weight-strong);
}

.fw-semibold,
.fw-bold,
.fw-bolder {
  font-weight: var(--fd-weight-strong) !important;
}

/* Interface chrome. Cartzilla declares these as component variables set to
 * 500, a weight Cinzel does not ship, so the browser synthesises it.
 * Overriding the variables on their declaring selectors avoids that. */
.btn {
  --cz-btn-font-weight: var(--fd-weight-ui);
}

.nav {
  --cz-nav-link-font-weight: var(--fd-weight-ui);
}

.badge {
  --cz-badge-font-weight: var(--fd-weight-ui);
}

.breadcrumb {
  --cz-breadcrumb-font-weight: var(--fd-weight-ui);
}

.navbar-nav {
  --cz-nav-link-font-weight: var(--fd-weight-ui);
}

.pagination {
  --cz-pagination-font-weight: var(--fd-weight-ui);
}

.list-group {
  --cz-list-group-action-font-weight: var(--fd-weight-ui);
}

.btn-link {
  --cz-btn-font-weight: var(--fd-weight-ui);
}

.form-label,
.dropdown-item,
.card-title,
.footer a,
.count-input .form-control,
.nav-underline .nav-link.active,
.range-slider-ui .noUi-tooltip,
.flatpickr-day.selected,
.flatpickr-day.today {
  font-weight: var(--fd-weight-ui);
}

/* Cinzel has no 500 weight, and its Regular is too light to carry interface
 * text, so every utility that would pull the weight back down is snapped up.
 * These classes occur in template markup only, never in CMS content. */
.fw-medium,
.fw-normal,
.fw-light {
  font-weight: var(--fd-weight-ui) !important;
}

/* The two lowest steps of the size scale carry product card metadata and most
 * secondary labels. Cinzel's small x-height makes them read a step below their
 * nominal size, so both are raised. */
.fs-xs {
  font-size: .8125rem !important;
}

.fs-sm {
  font-size: .9375rem !important;
}

/* Catalog number, hooked through the class added by the custom sku section.
 * The theme's own .text-gray-20 could not be reused: search-results.blade.php
 * puts it on the result pagination and on the filter buttons as well.
 * The fs-xs on the same element is !important and has to be beaten. */
.product-catalog-number {
  font-size: .875rem !important;
  font-weight: var(--fd-weight-strong);
}

/* "Continue shopping" appears as a link in the cart and as a button in the
 * add-to-cart modal; both are below the weight of the action they sit next to. */
[data-continue-shopping],
[data-view="alerts.added-to-repository"] .btn:not(.btn-primary) {
  font-size: .9375rem;
  font-weight: var(--fd-weight-strong);
}