/* Approved Francestle Champagne Gold theme. Artwork keeps its original colours. */
:root {
    --paper: #FAF7EF;
    --cream: #F0E6D4;
    --ink: #281D12;
    --muted: #74604B;
    --line: #DCC8A0;
    --cocoa: #281D12;
    /* Compatibility with existing components; the value is warm gold. */
    --forest: #8B642B;
    --gold: #8B642B;
    --soft-gold: #E7C97A;
    --gold-gradient: linear-gradient(115deg, #B78632 0%, #E7C97A 52%, #C59A4A 100%);
    --cocoa-gradient: linear-gradient(110deg, #281D12, #4A321C);
}

body.storefront { background: var(--paper); color: var(--ink); }
::selection { color: var(--ink); background: #E7C97A; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline-color: var(--gold); }

/* Display-crop the untouched supplied photograph of the logo. */
.wordmark .brand-logo-window {
    display: block;
    position: relative;
    width: 190px;
    height: auto;
    aspect-ratio: 840 / 310;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 0;
    letter-spacing: normal;
    line-height: 0;
}
.brand-logo-window img {
    display: block;
    position: absolute;
    max-width: none;
    width: 134.642857%;
    height: auto;
    left: -19.047619%;
    top: -216.129032%;
    object-fit: initial;
}
.wordmark { align-items: flex-start; }
.header-inner { min-height: 96px; height: 96px; gap: 24px; }
.site-nav { margin-left: 0; gap: 25px; }
.site-nav a { font-size: 12px; }
.site-nav a::after { background: var(--gold-gradient); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--gold); }
.announcement { background: var(--gold-gradient); color: var(--ink); }
.announcement a { color: var(--ink); }
.site-header { background: #FAF7EF; }
.selection-count { background: var(--gold-gradient); color: var(--ink); }
.selection-trigger > .icon { color: var(--gold); }

/* Dark text remains legible across all three approved gradient stops. */
.button-dark, .button-dark:hover, .search-submit, .search-submit:hover,
.apply-filters, .apply-filters:hover, .detail-save,
.detail-save.is-saved, .detail-save[aria-pressed=true] {
    background: var(--gold-gradient);
    color: var(--ink);
    border-color: #B58B43;
    box-shadow: inset 0 1px #FFFFFF70, 0 9px 22px -17px #6B461B80;
}
.button-dark:hover, .search-submit:hover, .apply-filters:hover {
    background-position: 100% 50%;
    filter: brightness(1.035);
}
.button-cream { background: var(--paper); color: var(--gold); border-color: #E7C97A80; }
.button-cream:hover { background: #F2E5C7; }
.button-outline { border-color: #BA944F; color: var(--ink); }
.button-outline:hover { background: #E7C97A33; }
.text-link:hover { color: var(--gold); }
.icon-button:hover { background: #EBDDBE; color: var(--ink); }
.skip-link { background: var(--cocoa); color: var(--paper); }

.spotlight h1 em, .hero h1 em, .collection-hero h1 em,
.collection-heading h1 em, .home-story-copy > h2 > em,
.home-story-year, .section-heading h2 em, .product-notes h2 em {
    color: var(--gold);
}
.spotlight-stage {
    background: linear-gradient(125deg, #E8D3A6, #F1E7D1 54%, #DCC293);
    border: 1px solid #C59A4A70;
}
.spotlight-stage::before { border-color: #B7863260; }
.spotlight-orbit { border-color: #B7863240; }
.spotlight-pick.is-active { color: var(--ink); border-color: #B78632; }
.spotlight-pick.is-active i { background: var(--gold-gradient); }
.spotlight-stage-heading, .spotlight-margin-note { color: #74501F; }
.hero-outline, .hero-seal { border-color: #B78632; }
.hero-seal { color: var(--gold); }
.discovery-durian, .occasion-section { background: var(--cocoa-gradient); color: var(--paper); }
.discovery-durian .eyebrow, .occasion-section .eyebrow { color: #E7C97A; }
.durian-drawing { color: #E7C97A; }
.occasion-copy > p:not(.eyebrow) { color: #E8DCC6; }
.occasion-image-label { color: #8B642B; }
.closing-contact a { color: var(--gold); }

.collection-brand-link.is-active, .collection-brand-link[aria-current],
.pagination-numbers > a[aria-current] {
    background: var(--gold-gradient);
    border-color: #B58B43;
    color: var(--ink);
}
.catalog-filters { border-color: #DCC8A0; }
.filter-group select:focus, .catalog-search:focus-within { border-color: #8B642B; }
.stock-status { color: var(--gold); }
.save-button.is-saved, .save-button[aria-pressed=true] { color: #8B642B; background: #F2E5C7; }
.quick-view-button:hover { background: #EBDDBE; color: var(--ink); }
.qv-save[aria-pressed=true] { background: #F2E5C7; border-color: #B78632; color: var(--ink); }
.toast { background: var(--cocoa-gradient); color: #FAF7EF; border-color: #C59A4A; }
.dialog-panel::backdrop, .image-zoom-dialog::backdrop,
.cert-preview-dialog::backdrop { background: #281D12B8; }

.site-footer {
    position: relative;
    background: var(--cocoa-gradient);
    color: #FAF7EF;
    border-top: 2px solid #C59A4A;
}
.footer-wordmark .brand-logo-window { width: 190px; border-radius: 9px; }
.footer-main > div > p { color: #E7DBC5; }
.footer-main .eyebrow { color: #E7C97A; }
.footer-links a:hover, .site-footer .text-link:hover { color: #E7C97A; }
.site-footer .text-link { border-color: #C59A4A; color: #FAF7EF; }
.footer-bottom { border-color: #B7863240; color: #DFCEAE; }

@media (min-width: 781px) and (max-width: 1100px) {
    .header-inner { padding-inline: 28px; gap: 20px; min-height: 86px; height: 86px; }
    .wordmark .brand-logo-window { width: 165px; }
    .site-nav { gap: 18px; margin-left: 0; }
    .site-nav a { font-size: 11px; }
    .header-actions { gap: 8px; }
    .selection-label { display: none; }
}
@media (max-width: 780px) {
    .header-inner { min-height: 82px; height: 82px; }
    .wordmark .brand-logo-window { width: 171px; }
    .site-nav { top: 82px; background: var(--paper); }
    .site-nav a { font-size: 15px; }
}
@media (max-width: 640px) {
    .header-inner { min-height: 78px; height: 78px; }
    .wordmark .brand-logo-window { width: 159px; }
    .site-nav { top: 78px; }
    .announcement { font-size: 10px; }
    .footer-wordmark .brand-logo-window { width: 180px; }
}
@media (max-width: 360px) {
    .wordmark .brand-logo-window { width: 143px; }
    .header-inner { gap: 7px; }
    .header-actions { gap: 1px; }
    .header-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .button-dark:hover, .search-submit:hover, .apply-filters:hover { filter: none; }
}