/* ==========================================================================
   Fran Beallor — Customizer-driven design layer, plus Shop and News pages.
   Loaded after theme.css. The --fb-* variables are printed in <head> by
   inc/appearance.php; the fallbacks below are the theme's original values,
   so with default settings the site looks exactly as before.
   ========================================================================== */

/* ---------- Site ---------- */

body {
    background: var(--fb-bg, #fff);
    color: var(--fb-text, #777);
    font-family: var(--fb-font, "Poppins", Arial, sans-serif);
}

a { color: var(--fb-link, #333); }
a:hover, a:focus { color: var(--fb-link-hover, #777); }
.fran-content p a { color: var(--fb-link, #333); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fb-heading-font, "Poppins", Arial, sans-serif);
    color: var(--fb-heading, #333);
}

h1, h2, h3, h4, h5 { font-weight: var(--fb-heading-weight, 300); }

.btn-primary,
.fran-btn.btn-primary {
    --bs-btn-bg: var(--fb-accent, #333);
    --bs-btn-border-color: var(--fb-accent, #333);
}

/* ---------- Header ---------- */

.fran-header {
    background: var(--fb-header-bg, #fff);
    border-bottom-color: var(--fb-header-line, #ececec);
}

/* Over the home banner: the header colour, faded by "Header opacity"
   (Fran Beallor Settings). White at 50% by default, as before. */
.fran-header-overlay .fran-header {
    background: var(--fran-header-overlay-bg);
    background: color-mix(in srgb, var(--fb-header-bg, #fff) var(--fran-header-overlay-alpha, 50%), transparent);
    border-bottom-color: transparent;
}

.fran-brand {
    font-family: var(--fb-name-font, "Poppins", Arial, sans-serif);
    font-size: var(--fb-name-size, 48px);
    font-weight: var(--fb-name-weight, 300);
    color: var(--fb-name-color, #000);
}

.fran-brand a:hover { color: var(--fb-nav-hover, #444); opacity: .85; }

.fran-nav .nav-link {
    font-family: var(--fb-nav-font, "Poppins", Arial, sans-serif);
    font-size: var(--fb-nav-size, 14px);
    font-weight: var(--fb-nav-weight, 300);
    text-transform: var(--fb-nav-case, uppercase);
    letter-spacing: var(--fb-nav-tracking, -0.01em);
    color: var(--fb-nav-color, #222);
}

.fran-nav .nav-link:hover,
.fran-nav .nav-link:focus,
.fran-nav .nav-link.active,
.fran-nav .current-menu-item > .nav-link { color: var(--fb-nav-hover, #000); }

.fran-nav .current-menu-item > .nav-link {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.fran-nav .dropdown-item { font-family: var(--fb-nav-font, "Poppins", Arial, sans-serif); color: var(--fb-nav-color, #333); }

.fran-header .fran-social a { color: var(--fb-header-social, #333); }
.fran-header .fran-social a:hover { color: var(--fb-nav-hover, #999); opacity: .7; }

@media (max-width: 991.98px) {
    .fran-brand { font-size: min(var(--fb-name-size, 48px), 34px); }
    .fran-navbar .navbar-collapse { background: var(--fb-header-bg, #fff); }
    .fran-nav .current-menu-item > .nav-link { text-decoration: none; font-weight: 500; }
}

/* ---------- Footer ---------- */

.fran-footer {
    background: var(--fb-footer-bg, transparent);
    color: var(--fb-footer-text, #777);
    font-family: var(--fb-footer-font, "Poppins", Arial, sans-serif);
    font-size: var(--fb-footer-size, .9em);
    text-transform: var(--fb-footer-case, none);
    border-top: var(--fb-footer-line-w, 0) solid var(--fb-footer-line, #ececec);
}

.fran-footer a { color: var(--fb-footer-link, #777); }
.fran-footer a:hover { color: var(--fb-footer-hover, #222); }
.fran-footer .fran-social a { color: var(--fb-footer-social, #777); }
.fran-footer .fran-social a:hover { color: var(--fb-footer-hover, #222); }

/* ---------- Shop pages ---------- */

.fran-shop__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 13px;
}

.fran-shop__count { margin: 0; }

.fran-shop__sort .form-select {
    min-width: 180px;
    border-radius: 0;
    font-size: 13px;
    color: var(--fb-text, #777);
}

.fran-product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; }
.fran-product__summary > :first-child { margin-top: 0; }
.fran-product__price { margin: 0 0 .75rem; font-size: 20px; color: var(--fb-price, #777); }
.fran-product__title { margin: 0 0 1rem; padding: 0; font-size: 1.9em; }
.fran-product__buy { margin: 1.5rem 0 .5rem; }
.fran-product__note { font-size: 12px; opacity: .8; }
.fran-product__meta { margin-top: 1.5rem; font-size: 13px; }
.fran-product .fran-gallery { margin-bottom: 0; }
.fran-product-description { max-width: 820px; margin-top: 3rem; }
.fran-product-description h2, .fran-related h2 { font-size: 1.5em; padding-top: 0; }
.fran-related { margin-top: 3.5rem; }

@media (max-width: 991.98px) {
    .fran-product { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.navigation.pagination { margin-top: 2.5rem; }
.navigation.pagination .nav-links { display: flex; gap: .75rem; }

/* ---------- News ---------- */

.fran-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem 2rem;
}

@media (max-width: 991.98px) { .fran-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fran-news-grid { grid-template-columns: minmax(0, 1fr); } }

.edith-news-card__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #f3f3f3; }
.edith-news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.edith-news-card__media:hover .edith-news-card__img { transform: scale(1.03); }
.edith-news-card__date { margin: .9rem 0 .2rem; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.edith-news-card__title { margin: 0 0 .5rem; padding: 0; font-size: 1.25em; line-height: 1.35; }
.edith-news-card__title a { color: var(--fb-heading, #333); text-decoration: none; }
.edith-news-card__title a:hover { color: var(--fb-link-hover, #777); }
.edith-news-card__excerpt { font-size: 13px; line-height: 1.7; }
.edith-news-card__excerpt p { margin-bottom: 0; }
.edith-news-card.is-new { animation: fb-fade .5s ease both; }
@keyframes fb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fran-news__more { margin: 3rem 0 0; text-align: center; }

.fran-post__date { margin: 0 0 .5rem; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.fran-post__media { margin: 0 0 2.5rem; text-align: center; }
.fran-post__media img { max-height: 80vh; width: auto; }
.fran-post__body { max-width: 820px; }
.fran-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fran-line, #ececec);
    font-size: 13px;
    text-transform: uppercase;
}

.fran-product__buy .btn.edith-btn,
.fran-product__buy .edith-sold {
    display: inline-block;
    padding: .65rem 1.6rem;
    border: 1px solid var(--fb-accent, #333);
    border-radius: 0;
    background: var(--fb-accent, #333);
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.fran-product__buy .btn.edith-btn:hover { background: #000; border-color: #000; color: #fff; }
.fran-product__buy .btn.edith-btn--outline { background: transparent; color: var(--fb-accent, #333); }
.fran-product__buy .btn.edith-btn--outline:hover { background: var(--fb-accent, #333); color: #fff; }
.fran-product__buy .edith-sold { background: transparent; color: var(--fb-text, #777); border-color: currentColor; }

/* ---------- Links that have their own colours in theme.css / blocks.css ----------
   They follow Site colours → Links / Links on hover once those are set. The
   variables are only printed when changed, so the fallbacks (the original
   colours) apply until then. */

.fran-series__link,
.fran-breadcrumbs .breadcrumb-item a,
.edith-card__title a,
.edith-news-card__title a,
.fran-album__pager a,
.fran-pager a,
.fran-product__meta a { color: var(--fb-link, #333); }

.fran-series__item:hover .fran-series__link,
.fran-series__link:focus { color: var(--fb-link-hover, #000); }

.fran-breadcrumbs .breadcrumb-item a:hover,
.edith-card__title a:hover,
.edith-news-card__title a:hover,
.fran-album__pager a:hover,
.fran-pager a:hover,
.fran-product__meta a:hover { color: var(--fb-link-hover, #777); }