/* ==========================================================================
   Tsilivi Jewels – base (DESIGN.md §2)
   Loaded after bootstrap + fonts + tokens.css, before footer.css/style.css.
   Element-level defaults only; component look lives in components.css.
   ========================================================================== */

/* rem base: 15px desktop, 13px below lg (unchanged from the old style.css so
   every rem-based size keeps its current value). */
html {
    font-size: 15px;
}

@media (max-width: 991.98px) {
    html {
        font-size: 13px;
    }
}

/* Bootstrap's modal writes an inline padding-right on <body>; the site already
   reserves the scrollbar with `scrollbar-gutter: stable`, so the inline style
   must be overridden (third-party inline style → !important is intentional). */
html,
body {
    padding: 0 !important;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ──
   Zero specificity (:where) so every existing component rule keeps its own
   size / weight / colour; this only supplies the face when nothing else does.
   Colour is deliberately NOT set globally (headings sit on light and dark
   sections and inherit their section colour) – use .heading-serif for the
   strong-text colour. */
:where(h1, h2, h3, .heading-serif) {
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
}

.heading-serif {
    color: var(--text-strong);
}

/* Prices / quantities rendered in h2/h3 stay in the text face. */
:where(.product-pricing, .blurred-price, .item-cost h2, .item-cost h3, #count-input2) {
    font-family: var(--font-sans);
}

/* ── Links ──
   Brand plum, no underline, no hover border (the old global
   `a:hover{border-bottom}` is gone). Underline only inside content text. */
a {
    color: var(--brand-plum);
    text-decoration: none;
}

    a:hover {
        color: var(--brand-plum);
    }

.rich-text a,
.content a,
.blog-content a,
.blog-article-content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

    .rich-text a:hover,
    .content a:hover,
    .blog-content a:hover,
    .blog-article-content a:hover {
        color: var(--brand-plum-deep);
    }

/* ── Focus & selection ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

::selection {
    background: var(--brand-plum-tint);
    color: var(--text-strong);
}

/* ── Media ──
   Only max-width: style.css still sets img{width:100%} and slick sizes its
   slides itself; height:auto is NOT set globally because several components
   size images with explicit heights. */
img {
    max-width: 100%;
}