/* ---- Opti Demo Shop: custom design system (overrides default Bootstrap look) ---- */

:root {
    --paper: #f2ead9;
    --paper-deep: #e9dfc8;
    --card-bg: #fffcf5;
    --ink: #241d14;
    --ink-soft: #4a3f2f;
    --muted: #7a6c56;
    --accent: #b3541f;
    --accent-dark: #8a3f16;
    --accent-ink: #fff5ea;
    --line: #241d14;
    --line-soft: rgba(36, 29, 20, 0.18);
}

/* ---------- Base ---------- */
body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
}

/* Subtle paper-grain texture over the whole page — flat color alone reads sterile. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1200;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, .display-5 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

a {
    color: var(--accent-dark);
}
a:hover {
    color: var(--accent);
}

/* ---------- Navbar ---------- */
.navbar.bg-dark {
    background-color: var(--ink) !important;
    border-bottom: 3px solid var(--accent);
}
.navbar-brand {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff !important;
}
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #f0c9a8;
}
.dropdown-menu {
    border: 2px solid var(--ink);
    border-radius: 2px;
}
.dropdown-item:active, .dropdown-item.active {
    background-color: var(--accent);
}

/* ---------- Buttons: tactile, offset-shadow "stamped" style instead of flat pills ---------- */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 3px;
    border-width: 2px;
}
.btn-primary {
    background-color: var(--accent);
    border-color: var(--ink);
    color: var(--accent-ink);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-dark);
    border-color: var(--ink);
    color: var(--accent-ink);
    box-shadow: 1px 1px 0 var(--ink);
    transform: translate(2px, 2px);
}
.btn-outline-primary {
    color: var(--accent-dark);
    border-color: var(--ink);
}
.btn-outline-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
}
.btn-outline-light {
    border-width: 2px;
}
.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--line-soft);
}

/* ---------- Cards: postcard feel — solid border + offset shadow, not a soft Bootstrap shadow ---------- */
.card {
    background-color: var(--card-bg);
    border: 2px solid var(--ink);
    border-radius: 3px;
    box-shadow: 4px 4px 0 var(--line-soft);
}
.card.shadow-sm {
    box-shadow: 4px 4px 0 var(--line-soft) !important;
}
.card-img-top {
    background-color: var(--paper-deep);
    height: 200px;
    object-fit: contain;
    padding: 1rem;
    border-bottom: 2px solid var(--ink);
}

/* ---------- Hero ---------- */
.bg-dark {
    background-color: var(--ink) !important;
}
.hero-band {
    background-color: var(--ink);
    background-image: radial-gradient(circle at 15% 20%, rgba(179, 84, 31, 0.35), transparent 45%),
                       radial-gradient(circle at 85% 80%, rgba(179, 84, 31, 0.25), transparent 45%);
    border-bottom: 3px solid var(--accent);
}
.hero-band h1, .hero-band .display-5 {
    color: #fff;
}

/* ---------- Trust bar / footer ---------- */
.bg-light {
    background-color: var(--paper-deep) !important;
}
footer.bg-white {
    background-color: var(--paper) !important;
    border-top-color: var(--line-soft) !important;
}

/* ---------- Alerts, badges, misc accents ---------- */
.badge.bg-danger {
    background-color: var(--accent) !important;
}
.alert-info {
    background-color: #fbeee0;
    border-color: var(--line-soft);
    color: var(--ink-soft);
}
.alert-success {
    background-color: #eef0dc;
    border-color: var(--line-soft);
    color: var(--ink-soft);
}
.breadcrumb-item.active {
    color: var(--muted);
}
.border-primary {
    border-color: var(--accent) !important;
    border-width: 2px !important;
}

/* ---------- Form controls ---------- */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(179, 84, 31, 0.2);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent-dark);
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-button:not(.collapsed) {
    background-color: #fbeee0;
    color: var(--ink);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(179, 84, 31, 0.2);
}