/**
 * Product.cshtml — typography aligned with actex-variables.css token values.
 * No markup changes; uses existing layout classes for scope.
 */

@import url("actex-variables.css");
@import url("https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&display=swap");

/* Breadcrumbs — site.css a/li use body font !important; match actex-variables --font-display */
nav[aria-label="breadcrumb"] .breadcrumb,
nav[aria-label="breadcrumb"] .breadcrumb-item,
nav[aria-label="breadcrumb"] .breadcrumb-item a {
    font-family: var(--font-display, 'Hedvig Letters Serif', serif) !important;
}

/* Hero: product title (span.large-text) — Hedvig 400 */
.col.d-flex.justify-content-center.mb-40.fade-in-top span.large-text,
.col.d-flex.justify-content-center.mb-40.fade-in-top span.large-text :not(.actex-btn) {
    font-family: var(--font-display, 'Hedvig Letters Serif', serif) !important;
    font-weight: 400 !important;
}

/* Hero: meta row (edition, author, review links, ISBN) — subtitle tokens */
.col.d-flex.justify-content-center.mb-40.fade-in-top .small-text {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--actu-grey, #7b8ba3) !important;
}

/* Hero: all Product page CTA/sample buttons should use body font (override site.css .actex-btn Abhaya) */
.col.d-flex.justify-content-center.mb-40.fade-in-top .actex-btn,
.col.d-flex.justify-content-center.mb-40.fade-in-top button.actex-btn,
.col.d-flex.justify-content-center.mb-40.fade-in-top a.actex-btn {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
}

/* Option checkboxes */
.col.d-flex.justify-content-center.mb-40.fade-in-top label.medium-text {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    color: var(--slate-grey, #242424) !important;
}

/* Cart instructions */
.col.d-flex.justify-content-center.mb-40.fade-in-top .col-10.col-lg-12 p.small-text {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6;
    color: var(--slate-grey, #242424) !important;
}

.col.d-flex.justify-content-center.mb-40.fade-in-top p.small-text a.color-aqua {
    color: var(--aqua, #2c7d88) !important;
}

/* Availability / ISBN panel */
.product-availability,
.product-availability span:not(.medium-text) {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    color: var(--slate-grey, #242424);
}

.product-availability a.medium-text {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
}

.product-availability h5 {
    font-family: var(--font-display, 'Hedvig Letters Serif', serif) !important;
    font-weight: 400 !important;
    color: var(--slate-grey, #242424);
}

/* CMS detail HTML (.product-auto) — body 16px slate */
.product-auto a,
.product-auto p,
.product-auto span,
.product-auto li,
.product-auto td {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6;
    color: var(--slate-grey, #242424);
}

.product-auto h1,
.product-auto h2 {
    font-family: var(--font-display, 'Hedvig Letters Serif', serif) !important;
    font-weight: 400 !important;
    color: var(--slate-grey, #242424);
}

/* Subsection headings in long-form copy */
.product-auto h3,
.product-auto h4,
.product-auto h5,
.product-auto h6 {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-weight: 500 !important;
    color: var(--actu-grey, #7b8ba3) !important;
}

.product-auto th {
    font-family: var(--font-display, 'Hedvig Letters Serif', serif) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--slate-grey, #242424);
}

/* Product.cshtml alternating strips: .background-darkblue — white text (overrides slate/actu-grey) */
.background-darkblue .product-auto a,
.background-darkblue .product-auto p,
.background-darkblue .product-auto span,
.background-darkblue .product-auto li,
.background-darkblue .product-auto td,
.background-darkblue .product-auto th,
.background-darkblue .product-auto h1,
.background-darkblue .product-auto h2,
.background-darkblue .product-auto h3,
.background-darkblue .product-auto h4,
.background-darkblue .product-auto h5,
.background-darkblue .product-auto h6 {
    color: var(--white, #ffffff) !important;
}

/* Reviews strip */
#Reviews .medium-text.color-black {
    font-family: var(--font-body, 'Figtree', sans-serif) !important;
    font-size: 16px !important;
    color: var(--slate-grey, #242424) !important;
}

#Reviews a.medium-text.color-black {
    font-weight: 500 !important;
    color: var(--actu-grey, #7b8ba3) !important;
}

/* Product page: allow bottom content to slide under the global footer */
.product-bury-under-footer {
    margin-bottom: -140px;
    padding-bottom: 180px;
}

@media (max-width: 991.98px) {
    .product-bury-under-footer {
        margin-bottom: -200px;
        padding-bottom: 280px;
    }
}
