:root {
    --wall: #DAD3C4;
    --wall-deep: #CBC2AD;
    --ink: #322b24; /* darkened further from #7e6c5a (original) / #584c3f (first pass) — now ~7.9:1 on --wall-deep, ~9.4:1 on --wall, ~13:1 on --card (AAA range) */
    --ink-soft: #292520; /* darkened further from #5C5346 / #4A4336 — now ~8.6:1 on --wall-deep, ~10.2:1 on --wall, ~14.2:1 on --card (AAA range) */
    --card: #FAF7F0;
    --accent: #2F4A3D;
    --accent-soft: #DEE7DE;
    --brass: #A97F45;
    --brass-dark: #5C3D1F; /* accessible text variant of --brass — ~6.5:1 on --wall, ~5.5:1 on --wall-deep. --brass itself is only ~2.4:1 / ~2:1 on those backgrounds, which fails WCAG AA (4.5:1) for small text; kept only for non-text/decorative use (frame borders, swatches) */
    --oak: #8B5E3C;
    --rose: #C08277;
    --line: rgba(43, 36, 28, 0.14);
    --header-h: 73px;

    --bs-body-bg: var(--wall);
    --bs-body-color: var(--ink);
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-border-radius: 2px;
    --bs-border-color: var(--line);
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    font-weight: 500; /* was inheriting Inter's default 400 — at 400 the thin strokes read as lighter than the color alone suggests; 500 keeps body copy, nav, and button labels legible without looking bold */
}

body.nav-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== scroll reveal =====
     Toggled by an IntersectionObserver in the page script (see the
     home view's @push('scripts')). Elements start slightly lower and
     transparent, then settle into place the first time they enter the
     viewport. --reveal-delay lets nearby items stagger in. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== links =====
     Bootstrap's compiled <a> rule reads --bs-link-color-rgb (not
     --bs-link-color) and hardcodes text-decoration from a Sass variable
     at build time, so --bs-link-color / --bs-link-hover-color /
     --bs-link-decoration set on :root or on individual sections never
     actually apply — links silently fall back to Bootstrap's default
     blue + underline. Set color/decoration directly instead. */
a {
    color: var(--ink);
    text-decoration: none;
}

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

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-dark);
    font-weight: 700; /* Standard bold */
}

/* ===== navbar ===== */
.navbar {
    --bs-navbar-padding-y: 20px;
    --bs-navbar-color: var(--ink-soft);
    --bs-navbar-hover-color: var(--ink);
    --bs-navbar-active-color: var(--ink);
    --bs-navbar-brand-color: var(--ink);
    --bs-navbar-brand-hover-color: var(--ink);
    --bs-navbar-toggler-border-color: var(--line);
    background-color: var(--wall);
    border-bottom: 1px solid var(--line);
}

.navbar-brand {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    position: relative;
    z-index: 2;
}

.navbar-nav {
    gap: 32px;
    font-size: 14px;
}

.navbar-toggler .icon-close { display: none; }
.navbar-toggler:not(.collapsed) .icon-open { display: none; }
.navbar-toggler:not(.collapsed) .icon-close { display: inline-block; }

/* ===== buttons, themed through Bootstrap's --bs-btn-* variables ===== */
.icon-btn {
    --bs-btn-color: var(--ink);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-color: var(--accent);
    text-decoration: none;
}

.login-btn {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-color: var(--wall);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 14px;
}

.cta {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #243d33;
    --bs-btn-hover-border-color: #243d33;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #243d33;
    --bs-btn-active-border-color: #243d33;
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 14px;
    --bs-btn-font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta i {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(47, 74, 61, 0.28);
}

.cta:hover i,
.cta:focus-visible i {
    transform: translateX(4px);
}

.trust-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trust-list svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

/* ===== mobile menu toggler: animates hamburger -> close ===== */
.navbar-toggler {
    border: none;
    padding: 6px;
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 2;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.toggler-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.toggler-icon.icon-close {
    opacity: 0;
    transform: rotate(-45deg);
}

.navbar-toggler[aria-expanded="true"] .icon-open {
    opacity: 0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .icon-close {
    opacity: 1;
    transform: rotate(0deg);
}

/* ===== alternating section bands =====
     The home page alternates light/dark backgrounds down the page.
     Rather than hardcoding the background on specific section classes
     (.steps, .about, ...), each <section> gets one of these two
     classes, assigned by a running counter in the Blade template.
     That counter only advances for sections that actually render, so
     optional sections (Photo Wall, Reviews) that hide themselves when
     empty can never cause two same-colored sections to collide — the
     stripe always keeps alternating correctly no matter which optional
     sections are present. */
.band-light {
    background: var(--wall);
}

.band-dark {
    background: var(--wall-deep);
}

/* ===== gallery wall (bespoke, no Bootstrap equivalent) ===== */
.hero {
    padding-top: 72px;
    padding-bottom: 90px;
}

.hero-video-frame {
    position: relative;
}

.hero-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background-color: var(--wall-deep);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='200' cy='150' rx='160' ry='115' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='200' cy='150' rx='160' ry='115' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.hero-video-toggle {
    position: absolute;
    right: 6%;
    bottom: 6%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(43, 36, 28, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-video-toggle:hover,
.hero-video-toggle:focus-visible {
    background: rgba(43, 36, 28, 0.8);
    transform: scale(1.08);
}

.hero-row {
    --bs-gutter-x: 40px;
}

.hero h1 {
    font-size: 44px;
    line-height: 1.15;
    margin: 14px 0 18px;
}

.hero h1 em {
    font-style: italic;
    color: var(--accent);
}

.hero p {
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 440px;
    margin: 0 0 28px;
}

.wall-frame {
    position: relative;
    height: 380px;
    width: 100%;
}

.frame {
    position: absolute;
    background: var(--card);
    border: 10px solid var(--oak);
    box-shadow: 0 14px 24px rgba(43, 36, 28, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: hang 0.7s ease forwards;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.wall-frame .frame:hover {
    transform: translateY(-8px) scale(1.06) rotate(0deg);
    box-shadow: 0 22px 34px rgba(43, 36, 28, 0.26);
    z-index: 2;
}

.frame svg {
    width: 34%;
    height: 34%;
    color: var(--ink-soft);
}

.frame.f1 {
    top: 0;
    left: 10px;
    width: 130px;
    height: 168px;
    border-color: var(--oak);
    transform: rotate(-6deg);
    animation-delay: 0.05s;
}

.frame.f2 {
    top: 14px;
    left: 190px;
    width: 118px;
    height: 118px;
    border-color: var(--ink);
    transform: rotate(4deg);
    animation-delay: 0.18s;
}

.frame.f3 {
    top: 206px;
    left: 0px;
    width: 172px;
    height: 118px;
    border-color: var(--brass);
    transform: rotate(3deg);
    animation-delay: 0.32s;
}

.frame.f4 {
    top: 150px;
    left: 222px;
    width: 108px;
    height: 150px;
    border-color: var(--rose);
    transform: rotate(-4deg);
    animation-delay: 0.44s;
}

.frame.f5 {
    top: 0;
    left: 330px;
    width: 96px;
    height: 96px;
    border-color: var(--oak);
    transform: rotate(7deg);
    animation-delay: 0.58s;
}

@keyframes hang {
    from {
        opacity: 0;
        transform: translateY(-10px) rotate(var(--r, 0deg));
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frame {
        animation: none;
        opacity: 1;
    }
}

/* ===== how it works =====
     Each step icon sits inside a small "frame" of its own — same
     border + card-background language as the product frames elsewhere
     on the page — tilted like something just hung on the wall, and
     straightens up on hover. Colours cycle through the frame palette
     used in the collection below, so the sequence previews the
     product before the copy explains it. A dashed thread links the
     icons on wide screens only, where the 4 steps sit in one row. */
.steps {
    /* background comes from .band-light / .band-dark, applied in the
       Blade template — see the "alternating section bands" comment
       near .hero below */
    padding: 80px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.steps-grid {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 48px;
}

.step {
    position: relative;
    text-align: center;
}

.step:nth-child(1) {
    --step-color: var(--oak);
    --tilt: -6deg;
}

.step:nth-child(2) {
    --step-color: var(--ink);
    --tilt: 5deg;
}

.step:nth-child(3) {
    --step-color: var(--brass-dark);
    --tilt: -4deg;
}

.step:nth-child(4) {
    --step-color: var(--accent);
    --tilt: 6deg;
}

.step-icon-frame {
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    border: 8px solid var(--step-color, var(--oak));
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    box-shadow: 0 12px 22px rgba(43, 36, 28, 0.18);
    transform: rotate(var(--tilt, -4deg));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.step-icon-frame i {
    font-size: 24px;
    color: var(--step-color, var(--oak));
}

.step:hover .step-icon-frame {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 18px 30px rgba(43, 36, 28, 0.26);
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    /* Icon is centered in the column (34px = half its 68px width), so
         the line starts at the column's midpoint + half the icon width... */
    left: calc(50% + 34px);
    /* ...and ends at the midpoint of the NEXT column minus half its icon
         width. Both columns are equal width, so this resolves correctly
         as a percentage of this .step's own width. */
    right: calc(34px - 50%);
    border-top: 2px dashed var(--ink-soft);
    opacity: 0.25;
    display: none;
}

.step .eyebrow {
    display: block;
    margin-bottom: 10px;
}

.step h3 {
    font-size: 21px;
    margin-bottom: 10px;
    color: var(--ink);
}

.step p {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 250px;
    line-height: 1.6;
}

@media (min-width: 992px) {
    .step:not(:last-child)::after {
        display: block;
    }
}

/* ===== collection: real Bootstrap cards, stripped of default chrome ===== */
.collection {
    padding: 88px 0 70px;
}

.section-head {
    margin-bottom: 38px;
}

.section-head h2 {
    font-size: 30px;
}

.section-head p {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 8px 0 0;
    max-width: 360px;
}

.browse-link {
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.browse-link .arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.browse-link:hover .arrow,
.browse-link:focus-visible .arrow {
    transform: translateX(4px);
}

.product-card {
    gap: 12px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover {
    transform: translateY(-6px);
}

.product-card:hover .frame {
    box-shadow: 0 16px 28px rgba(43, 36, 28, 0.22);
}

.product-card .frame {
    position: static;
    height: 150px;
    width: 100%;
    border-width: 8px;
    opacity: 1;
    animation: none;
    transform: none;
    overflow: hidden;
    transition: box-shadow 0.35s ease;
}

.product-card .frame img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .frame img {
    transform: scale(1.08);
}

.placard {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.placard .eyebrow {
    display: block;
    margin-bottom: 4px;
}

.placard p {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 8px;
}

.price {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ===== lookbook: "on their walls" photo grid =====
     Replaces the old build-your-own customizer with a visual, mostly
     wordless section — a bento-style grid of frames photographed in
     real rooms. One large anchor tile plus four supporting tiles on
     desktop; a simple stack on mobile. Captions live in a hover/focus
     overlay so the grid reads as images first. */
.lookbook {
    padding: 90px 0 96px;
}

.lookbook .section-head {
    max-width: 560px;
    margin: 0 auto 44px;
}

.lookbook .section-head p {
    max-width: none;
    font-size: 15px;
}

.lookbook-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px;
    gap: 14px;
}

.lookbook-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 14px 28px rgba(43, 36, 28, 0.14);
}

.lookbook-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lookbook-item:hover img,
.lookbook-item:focus-within img {
    transform: scale(1.08);
}

.lookbook-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, rgba(43, 36, 28, 0) 0%, rgba(30, 25, 20, 0.82) 92%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.lookbook-item:hover .lookbook-caption,
.lookbook-item:focus-within .lookbook-caption {
    opacity: 1;
    transform: translateY(0);
}

.lookbook-caption .eyebrow {
    color: var(--wall);
    display: block;
    margin-bottom: 2px;
}

.lookbook-caption p {
    margin: 0;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--wall);
}

.item-a {
    grid-column: 1 / 3;
    grid-row: span 2;
}

.item-b {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.item-c {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.item-d {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.item-e {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

@media (max-width: 991.98px) {
    .lookbook-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .item-a {
        grid-column: 1 / 3;
        grid-row: span 2;
    }

    .item-b,
    .item-c,
    .item-d,
    .item-e {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 575.98px) {
    .lookbook-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }

    .item-a {
        grid-column: 1 / 2;
        grid-row: auto;
    }
}

/* ===== testimonials: grid of quote cards ===== */
.testimonials {
    padding: 90px 0;
}

.testimonials .section-head {
    max-width: 480px;
    margin-bottom: 48px;
}

.testimonials .section-head h2 {
    font-size: 28px;
}

.testimonials .row > .col {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials .row > .col:hover {
    transform: translateY(-4px);
}

.testimonials blockquote {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.testimonials cite {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-soft);
    font-style: normal;
}

/* ===== about / our story ===== */
.about {
    /* background comes from .band-light / .band-dark, applied in the
       Blade template — see the "alternating section bands" comment
       near .hero below */
    padding: 90px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.about-row {
    --bs-gutter-x: 50px;
    --bs-gutter-y: 32px;
}

.about-row > .col-lg-6:first-child .eyebrow {
    position: relative;
    padding-bottom: 14px;
}

.about-row > .col-lg-6:first-child .eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    border-top: 2px dashed var(--brass-dark);
    opacity: 0.45;
}

.about h2 {
    font-size: 30px;
    margin: 12px 0 20px;
    max-width: 460px;
}

.about p {
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0 0 16px;
}

.about-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: 0 8px 18px rgba(43, 36, 28, 0.08);
    transform: rotate(var(--hl-tilt, 0deg));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.about-highlights li:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 16px 28px rgba(43, 36, 28, 0.18);
}

.about-highlight-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 2px solid var(--hl-color, var(--accent));
    background: var(--wall);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.about-highlight-icon i {
    font-size: 16px;
    color: var(--hl-color, var(--accent));
}

.about-highlight-text {
    flex: 1;
    min-width: 0;
}

.about-highlights .eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--hl-color, var(--brass-dark));
}

.about-highlights p {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
    max-width: none;
}

/* ===== faq: Bootstrap accordion re-themed with our token set ===== */
.faq {
    padding: 90px 0 100px;
}

.faq .section-head {
    max-width: 480px;
}

.faq .section-head h2 {
    font-size: 30px;
}

.faq-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 22px;
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-body-padding-x: 22px;
    --bs-accordion-body-padding-y: 0 0 22px;
    --bs-accordion-btn-color: var(--ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--ink);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-body-color: var(--ink-soft);
    /* Bootstrap's accordion arrow is a background-image SVG with the
       fill color baked in at build time — --bs-accordion-active-color
       only recolors the button text, not the icon, so the expanded
       chevron falls back to Bootstrap's default blue. Override both
       icon variables directly with an ink-colored arrow. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B241C' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B241C' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    max-width: 720px;
}

.faq-accordion .accordion-button {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.faq-accordion .accordion-body {
    font-size: 14px;
    line-height: 1.65;
}



.faq-accordion {
    max-width: 100%;
}



/* ===== contact: form paired with a "framed" studio photo =====
     Keeps the same framed-photo visual language as the hero and the
     lookbook grid — the studio photo gets the same thick painted
     border as a product frame — with a small floating card of contact
     details so the section isn't just a bare form on a plain field. */
.contact {
    padding: 90px 0 100px;
}

.contact .section-head-inline {
    max-width: 460px;
    margin-bottom: 22px;
}

.contact h2 {
    font-size: 30px;
    margin: 12px 0 14px;
}

.contact-copy {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 440px;
    margin: 0 0 28px;
}

.contact-form .form-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.contact-form .form-control {
    padding: 12px 14px;
}

.contact-form .form-control,
.contact-form .form-select {
    padding: 12px 14px;
}

.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: var(--bs-border-radius) !important;
    border: 1px solid var(--line) !important;
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.contact-form .cta {
    margin-bottom: 0;
    margin-top: 6px;
}

.contact-visual {
    position: relative;
    height: 100%;
    min-height: 340px;
}

.contact-visual img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    border: 10px solid var(--ink);
    background: var(--card);
    box-shadow: 0 20px 40px rgba(43, 36, 28, 0.22);
}



.contact-info-card {
    position: absolute;
    left: -20px;
    bottom: -24px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 20px 22px;
    box-shadow: 0 14px 28px rgba(43, 36, 28, 0.18);
    max-width: 240px;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.contact-info-row:last-child {
    margin-bottom: 0;
}

.contact-info-row i {
    color: var(--accent);
    width: 16px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .contact-visual {
        margin-bottom: 56px;
        min-height: 280px;
    }

    .contact-info-card {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* ===== footer ===== */
footer {
    background: var(--ink);
    color: var(--wall);
    padding: 56px 0 28px;
}

footer a {
    color: rgba(218, 211, 196, 0.88); /* raised from 0.8 — was only 2.74:1 on the footer bg, fails AA */
    text-decoration: none;
}

footer a:hover {
    color: var(--wall);
}

.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

footer h3 {
    font-size: 15px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    margin-bottom: 14px;
    color: var(--wall);
}

footer p {
    font-size: 13px;
    color: rgba(218, 211, 196, 0.88); /* raised from 0.7 — was only 2.45:1 on the footer bg, fails AA */
    margin: 0 0 16px;
}

.footer-links a {
    font-size: 13px;
}

.subscribe-row .form-control {
    background-color: transparent;
    border-color: rgba(218, 211, 196, 0.4);
    color: var(--wall);
    font-size: 13px;
}

.subscribe-row .form-control::placeholder {
    color: rgba(218, 211, 196, 0.65); /* raised from 0.5 — was only 1.96:1 on the footer bg */
}

.subscribe-row .form-control:focus {
    background-color: transparent;
    color: var(--wall);
    border-color: var(--wall);
    box-shadow: none;
}

.subscribe-btn {
    --bs-btn-bg: var(--wall);
    --bs-btn-border-color: var(--wall);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--wall);
    --bs-btn-hover-border-color: var(--wall);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-size: 13px;
}

.footer-bottom {
    padding-top: 22px;
    font-size: 12px;
    color: rgba(218, 211, 196, 0.85); /* raised from 0.55 — was only 2.08:1 on the footer bg, fails AA */
}

/* responsive: only the bespoke gallery wall needs a manual breakpoint;
     everything else uses Bootstrap's row-cols-* / col-lg-* utilities */
@media (max-width: 991.98px) {
    .hero {
        padding-top: 48px;
        padding-bottom: 60px;
    }

    .wall-frame {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        height: auto;
    }

    .wall-frame .frame {
        position: static;
        transform: none !important;
        width: 100%;
        height: 130px;
    }

    .about h2,
    .about p {
        max-width: none;
    }

    /* ===== full-screen mobile menu ===== */
    .navbar-collapse:not(.show):not(.collapsing) {
        display: none;
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: flex !important;
    }

    .navbar-collapse {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        height: calc(100vh - var(--header-h));
        margin: 0;
        padding: 36px 32px 40px;
        background: var(--wall);
        z-index: 1;
        flex-direction: column;
        justify-content: space-between;
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-16px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Bootstrap animates height by default on .collapsing; pin it so
         our own opacity/transform transition drives the reveal instead */
    .navbar-collapse.collapsing {
        height: calc(100vh - var(--header-h)) !important;
        transition: none;
    }

    .navbar-collapse.show {
        opacity: 1;
        transform: translateY(0);
    }

    .navbar-collapse .navbar-nav {
        gap: 4px;
        margin-bottom: 40px !important;
    }

    .navbar-collapse .navbar-nav .nav-link {
        font-family: 'Fraunces', serif;
        font-size: 28px;
        padding: 16px 0;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
    }

    #mainNav>.d-flex {
        justify-content: flex-start;
        align-items: center;
        gap: 24px;
        padding-top: 8px;
    }

    #mainNav .login-btn {
        margin-left: auto;
    }

    /* Bump the hamburger to a full 44x44 touch target on mobile —
         34px falls under the ~44px minimum recommended for touch. */
    .navbar-toggler {
        width: 44px;
        height: 44px;
        padding: 10px;
        margin-right: -10px;
    }
}

/* ===== hero: mobile refinements =====
     The 991.98px breakpoint above already stacks the two hero columns
     and reflows the wall-frame into a static 2-column grid for tablets.
     On phones the image column was hidden outright in the markup
     (`d-none d-md-block`), so visitors below 768px got text only. These
     rules re-enable it at every size — that same tablet grid CSS already
     works fine this narrow — and tune type and spacing down further as
     the viewport shrinks. Placed after the block above so these
     overrides win on shared properties like `.hero` padding and
     `.wall-frame .frame` height. */
@media (max-width: 767.98px) {
    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .hero .trust-list {
        gap: 14px 20px;
    }

    .hero .col-lg-6.d-none {
        display: block !important;
        margin-top: 36px;
    }

    .wall-frame .frame {
        height: 112px;
    }
}

@media (max-width: 575.98px) {
    .hero {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero .cta {
        width: 100%;
        justify-content: center;
    }

    .hero .trust-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }
}






/* =====================================================================
   CART PAGE + SHARED MODAL/FORM THEME
   Built on the existing token set (--wall, --ink, --accent, --brass,
   --oak, --rose, --card, --line, etc). Follows the same convention
   already used across the site: theme Bootstrap components through
   their own --bs-* custom properties wherever Bootstrap 5.3 exposes
   them, and fall back to direct overrides only where it doesn't.
   ===================================================================== */

/* ===== cart section shell ===== */
.cart-section {
    background: transparent;
}

.cart-heading {
    font-family: 'Fraunces', serif;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ===== cart items table ===== */
/* Give the product list the same card treatment as the summary panel —
   before this, the table sat directly on the page background while the
   summary floated in a white box, so the two columns read as unrelated
   pieces instead of one order. */
.cart-section .table-responsive {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 22px 2px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.06);
}

/* The @foreach in the template renders zero <tr>s when the cart is
   empty, but the <thead> still prints — leaving a lone "PRODUCT /
   QUANTITY / PRICE" row floating over nothing. Hide the whole card
   once there's nothing in the body. */
.cart-section .table-responsive:has(.cart-table tbody:empty) {
    display: none;
}

.cart-table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--wall-deep);
    border-collapse: separate;
    border-spacing: 0;
}

.cart-table thead th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    padding: 14px 12px 14px;
}

.cart-table tbody tr {
    transition: background-color 0.2s ease;
}

.cart-table tbody td {
    border-color: var(--line);
    vertical-align: middle;
    padding: 18px 12px;
}

.cart-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

/* product cell */
.cart-item-img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 6px solid var(--oak);
    background: var(--card);
    box-shadow: 0 6px 14px rgba(43, 36, 28, 0.14);
}

.cart-item-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.3;
}

/* Bootstrap's .text-muted / .text-success utilities carry hardcoded
   hex values (not our --bs-* variables), same issue as the link-color
   gotcha noted in the global sheet. Re-point them to our tokens, but
   only inside the cart table so nothing else on the site is affected. */
.cart-table .text-muted {
    color: var(--ink-soft) !important;
}

.cart-table .text-success {
    color: var(--accent) !important;
}

/* quantity cell */
.cart-qty-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 36px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    background: var(--card);
    overflow: hidden;
}

.btn-qty-up,
.btn-qty-down {
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 10px;
    padding: 7px 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-qty-up:hover,
.btn-qty-down:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.qty-display {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    padding: 5px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* price + remove cell */
.cart-price {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.btn-remove-cart {
    --bs-btn-color: var(--ink-soft);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn-remove-cart:hover,
.btn-remove-cart:focus-visible {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
    transform: scale(1.06);
}

/* ===== empty cart state ===== */
.cart-empty-message h3 {
    font-family: 'Fraunces', serif;
    color: var(--ink);
    margin-bottom: 8px;
}

.cart-empty-message p {
    color: var(--ink-soft);
    font-size: 14px;
}

.empty-cart-icon {
    font-size: 46px;
    color: var(--brass);
    opacity: 0.55;
}

/* The "Start Shopping" link carries an inline
   style="background-color: var(--primary-color)" — that token isn't
   part of this theme, so the background fell through to transparent
   and left white --bs-btn-color text unreadable on the wall
   background. An !important here beats the inline style (inline
   styles only win over external rules that don't also use
   !important), which is a stopgap — better to just delete that
   inline style attribute in the Blade file since .btn-primary
   already carries the right background on its own. */
#EmptyCartContainer .btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    padding: 11px 26px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

#EmptyCartContainer .btn-primary:hover,
#EmptyCartContainer .btn-primary:focus-visible {
    background-color: #243d33 !important;
    border-color: #243d33 !important;
    transform: translateY(-1px);
}

/* ===== order summary card ===== */
.cart-summary-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px 26px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.08);
    position: sticky;
    top: 24px;
}

.summary-title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    color: var(--ink);
    margin: 0;
}

.summary-divider {
    border: none;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 14px 0 18px;
}

.summary-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.summary-table td {
    padding: 8px 0;
    font-size: 14px;
    color: var(--ink-soft);
    border-color: transparent;
}

.summary-table tr.border-top td {
    padding-top: 14px;
}

.summary-table td.fw-bold {
    color: var(--ink);
}

.summary-table tr.total-row td {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 17px;
    padding-top: 14px;
}

.cart-summary-box .small {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.cart-summary-box .small strong {
    color: var(--ink);
}

/* ===== global-ish button theming, same --bs-btn-* pattern as .cta / .login-btn ===== */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #243d33;
    --bs-btn-hover-border-color: #243d33;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #243d33;
    --bs-btn-active-border-color: #243d33;
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: 47, 74, 61;
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-size: 14px;
}

.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--wall);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-size: 14px;
}

/* ===== forms (address modal, login, register) ===== */
.form-control,
.form-select {
    background-color: var(--card);
    border-color: var(--line);
    color: var(--ink);
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--card);
    color: var(--ink);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(47, 74, 61, 0.15);
}

/* Bootstrap's own default disabled/readonly treatment, written out
   explicitly so it can't lose to the plain .form-control rule above.
   .form-control / .form-select (specificity 0,1,0) sets --card as the
   background with no :disabled exclusion, and while :disabled/[readonly]
   (0,2,0) should out-rank that on specificity alone, writing it again
   here — after the base rule, using Bootstrap's own --bs-secondary-bg
   and #6c757d rather than a custom color — removes any doubt.
   Note: stock Bootstrap 5.3 only styles the :disabled state this way;
   [readonly] gets no special background out of the box. It's included
   here too so a locked field (e.g. Country) still reads as non-editable
   instead of looking like a normal empty input — drop the [readonly]
   lines below if you'd rather match Bootstrap 5.3 exactly. */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

.form-select:disabled {
    background-color: var(--bs-secondary-bg);
}

.form-floating > .form-control:disabled ~ label,
.form-floating > .form-control[readonly] ~ label {
    color: #6c757d;
}

.form-control::placeholder {
    color: var(--ink-soft);
    opacity: 0.7;
}

/* Neutralize the browser's own autofill paint job — Chrome/Edge fill
   autofilled inputs with a yellow tint baked into their UA styles,
   which ignores --card entirely and is what makes an autofilled
   address field look different from one the person typed by hand. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
    box-shadow: 0 0 0 1000px var(--card) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.form-floating > label {
    color: var(--ink-soft);
}

/* Bootstrap's <select> arrow is a background-image baked with a fixed
   hex fill, same class of issue as the accordion chevron in the
   global sheet — override the image var directly rather than fight it. */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23292520' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.form-check-input {
    border-color: var(--line);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(47, 74, 61, 0.15);
}

/* payment method picker cards */
#ContinueOrderPaymentForm .form-check {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#ContinueOrderPaymentForm .form-check:has(.form-check-input:checked) {
    border-color: var(--accent) !important;
    background: var(--accent-soft);
}

#ContinueOrderPaymentForm .form-check-label strong {
    color: var(--ink);
}

#ContinueOrderPaymentForm .form-check-label small {
    color: var(--ink-soft);
}

#ContinueOrderPaymentForm .fa-credit-card {
    color: var(--accent) !important;
}

#ContinueOrderPaymentForm .fa-money-bill-wave {
    color: var(--brass-dark) !important;
}

#ContinueOrderPaymentForm h6,
#CheckoutAddressModal h6 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-dark);
    margin-bottom: 12px;
}

#CheckoutAddressModal hr {
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 20px 0;
}

/* ===== modal shell (shared by checkout + login/register) ===== */
.modal-content {
    --bs-modal-bg: var(--card);
    --bs-modal-color: var(--ink);
    --bs-modal-border-color: var(--line);
    --bs-modal-border-radius: 6px;
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-modal-box-shadow: 0 24px 48px rgba(43, 36, 28, 0.22);
}

.modal-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
}

.modal .btn-close {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.modal .btn-close:hover,
.modal .btn-close:focus {
    opacity: 1;
}

/* login/register tab card */
#LoginRegisterModal .card {
    --bs-card-bg: transparent;
    --bs-card-border-color: transparent;
}

#LoginRegisterModal .card-header {
    --bs-card-cap-bg: var(--wall-deep);
    border-bottom: 1px solid var(--line);
    padding: 0;
}

#LoginRegisterModal .card-header-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-link-color: var(--ink-soft);
    --bs-nav-link-hover-color: var(--ink);
    --bs-nav-tabs-link-active-color: var(--ink);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent);
    margin: 0;
}

#LoginRegisterModal .card-header-tabs .nav-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 16px 22px;
    border-bottom: 2px solid transparent;
}

#LoginRegisterModal .card-header-tabs .nav-link:hover {
    border-bottom-color: var(--line);
}

#LoginRegisterModal .card-header-tabs .nav-link.active {
    border-bottom-color: var(--accent);
}

#LoginRegisterModal p.cursor-pointer {
    font-size: 13.5px;
    color: var(--ink-soft);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer .text-primary,
a.text-primary {
    color: var(--accent) !important;
}

#ForgotPasswordEmailSentView i {
    color: var(--brass);
}

/* forgot-password panel swap */
.slide_open_animation {
    animation: cartSlideOpen 0.4s ease forwards;
}

.slide_close_animation {
    animation: cartSlideClose 0.4s ease forwards;
}

@keyframes cartSlideOpen {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cartSlideClose {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-24px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .slide_open_animation,
    .slide_close_animation {
        animation: none;
    }
}

/* ===== alerts (top-of-page notifications + login "logging required") ===== */
.notification {
    border-radius: var(--bs-border-radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification.alert-danger {
    --bs-alert-bg: rgba(192, 130, 119, 0.14);
    --bs-alert-border-color: rgba(192, 130, 119, 0.4);
    --bs-alert-color: var(--ink);
}

.notification.alert-danger i {
    color: var(--rose);
}

.notification.alert-success {
    --bs-alert-bg: var(--accent-soft);
    --bs-alert-border-color: rgba(47, 74, 61, 0.25);
    --bs-alert-color: var(--ink);
}

.notification.alert-success i {
    color: var(--accent);
}

.alert-warning {
    --bs-alert-bg: rgba(169, 127, 69, 0.16);
    --bs-alert-border-color: rgba(169, 127, 69, 0.4);
    --bs-alert-color: var(--ink);
    font-size: 13.5px;
}

/* ===== responsive ===== */
@media (max-width: 991.98px) {
    .cart-summary-box {
        position: static;
        margin-top: 8px;
    }
}

/* Below tablet width a 4-column table has nowhere to breathe, even
   with horizontal scroll — so each <tr> becomes its own card. The
   <td> order in the Blade template doesn't change (product, qty,
   price, remove); it's just re-placed into a 2-row grid per card via
   nth-child + grid-area, so no markup edits are required. */
@media (max-width: 767.98px) {
    .cart-section .table-responsive {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .cart-table {
        display: block;
        width: 100%;
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tbody {
        display: block;
    }

    .cart-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "product product remove"
            "qty     price   price";
        column-gap: 12px;
        row-gap: 14px;
        align-items: center;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 6px 16px rgba(43, 36, 28, 0.06);
    }

    .cart-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .cart-table tbody td {
        display: block;
        padding: 0;
        border: none !important;
    }

    .cart-table tbody td:nth-child(1) {
        grid-area: product;
    }

    .cart-table tbody td:nth-child(2) {
        grid-area: qty;
    }

    .cart-table tbody td:nth-child(3) {
        grid-area: price;
        text-align: right;
        font-size: 16px;
    }

    .cart-table tbody td:nth-child(4) {
        grid-area: remove;
        align-self: start;
        text-align: right;
    }

    .cart-item-img {
        width: 58px;
        height: 58px;
        border-width: 4px;
    }

    .cart-item-title {
        font-size: 14px;
    }

    /* Horizontal stepper with real touch targets. HTML order in the
       Blade file is up / display / down; reversing the flex direction
       reads minus – qty – plus, left to right, which is the pattern
       people expect from a mobile stepper. */
    .cart-qty-group {
        flex-direction: row-reverse;
        align-items: center;
        width: auto;
        display: inline-flex;
    }

    .btn-qty-up,
    .btn-qty-down {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qty-display {
        width: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
    }

    .btn-remove-cart {
        width: 36px;
        height: 36px;
    }

    .cart-summary-box {
        padding: 22px 20px;
    }
}


/* =====================================================================
   SHOP PAGE (product listing, sidebar filters, category tree, price
   slider, product grid, mobile offcanvas, pagination)
   Same token set as the rest of the site. Bootstrap utility classes
   used only on this page's markup (.btn-dark, .btn-outline-dark,
   .offcanvas, .pagination) are themed globally through their own
   --bs-*-var custom properties, the same pattern already used for
   .cta / .btn-primary / .modal-content elsewhere in this file. Anything
   that could bleed into other pages if left unscoped (.text-muted, the
   sort <select>) is scoped under #filterForm instead.
   ===================================================================== */

/* ===== utility referenced by this page's markup ===== */
.font-heading {
    font-family: 'Fraunces', serif;
}

/* ===== dark buttons: search submit, "Apply Price", "Apply Filters",
   "Clear Filters" ===== */
.btn-dark {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-color: var(--wall);
    --bs-btn-hover-bg: var(--ink-soft);
    --bs-btn-hover-border-color: var(--ink-soft);
    --bs-btn-hover-color: var(--wall);
    --bs-btn-active-bg: var(--ink-soft);
    --bs-btn-active-border-color: var(--ink-soft);
    --bs-btn-focus-shadow-rgb: 43, 36, 28;
}

.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--wall);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-active-color: var(--wall);
}

/* ===== toolbar bits scoped to the filter form so Bootstrap defaults
   elsewhere on the site are untouched ===== */
#filterForm .text-muted {
    color: var(--ink-soft) !important;
}

#filterForm .form-select {
    cursor: pointer;
}

/* ===== sidebar shell ===== */
.sidebar-desktop {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.filter-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.filter-section.border-0 {
    border-bottom: none;
}

.filter-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 14px;
}

/* ===== category tree ===== */
.cat-tree-list,
.cat-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-sub-list {
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px dashed var(--line);
}

.cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.cat-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.cat-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.cat-row:hover .cat-label {
    color: var(--ink);
}

.cat-toggle-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
}

.cat-toggle-icon {
    display: flex;
    transition: transform 0.25s ease;
}

/* Bootstrap adds .collapsed to the trigger link when its target is
   hidden, and removes it when shown -- flip the chevron off that. */
.cat-toggle-btn.collapsed .cat-toggle-icon {
    transform: rotate(-90deg);
}

/* ===== price range slider =====
   Two native <input type="range"> elements sit on top of the visual
   .slider-track div; their own track is made transparent so only the
   thumbs render, and pointer-events is disabled on the input itself
   (re-enabled on the thumb) so clicks pass through to whichever thumb
   is on top. */
.wrapper-slider {
    position: relative;
    height: 20px;
    margin-top: 6px;
}

.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    transform: translateY(-50%);
}

.slider-track-active {
    position: absolute;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}

.input-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.input-range:focus {
    outline: none;
}

.input-range::-webkit-slider-runnable-track {
    background: transparent;
    height: 100%;
}

.input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--card);
    box-shadow: 0 2px 6px rgba(43, 36, 28, 0.28);
    cursor: pointer;
}

.input-range::-moz-range-track {
    background: transparent;
    height: 100%;
    border: none;
}

.input-range::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--card);
    box-shadow: 0 2px 6px rgba(43, 36, 28, 0.28);
    cursor: pointer;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-inputs .input-group-text {
    background: var(--wall-deep);
    border-color: var(--line);
    color: var(--ink-soft);
}

/* ===== product grid cards =====
   Shop markup uses .product-img-wrapper rather than the homepage
   .frame, but .product-card's own gap/hover-lift rules already defined
   earlier in this file apply here too -- these rules only add the
   framed-photo treatment and info block on top of that. */
.product-img-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--card);
    border: 8px solid var(--oak);
    box-shadow: 0 10px 20px rgba(43, 36, 28, 0.14);
    transition: box-shadow 0.35s ease;
}

.product-card:hover .product-img-wrapper {
    box-shadow: 0 16px 28px rgba(43, 36, 28, 0.22);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-img {
    transform: scale(1.08);
}

.badge-custom {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(43, 36, 28, 0.2);
}

.badge-custom.bg-danger {
    background: var(--rose) !important;
}

.product-actions {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

.btn-action {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 6px 14px rgba(43, 36, 28, 0.2);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-action:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.06);
}

.btn-action.disabled {
    background: var(--wall-deep);
    color: var(--ink-soft);
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-action.disabled:hover {
    background: var(--wall-deep);
    color: var(--ink-soft);
    transform: none;
}

.product-info {
    padding-top: 12px;
}

.product-cat {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brass-dark);
    margin-bottom: 4px;
}

.product-title {
    font-size: 14.5px;
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-title a {
    color: var(--ink);
}

.product-info .text-warning {
    color: var(--brass) !important;
}

.product-info .far.text-muted {
    color: var(--line) !important;
}

.product-price {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* ===== mobile filter trigger =====
   Base look (background, position, shadow) is set inline in the Blade
   file; this only adds the hover/focus lift the inline style can't. */
.mobile-filter-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mobile-filter-btn:hover,
.mobile-filter-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3) !important;
}

/* ===== mobile filter offcanvas ===== */
.offcanvas {
    --bs-offcanvas-bg: var(--card);
    --bs-offcanvas-color: var(--ink);
    --bs-offcanvas-border-color: var(--line);
    --bs-offcanvas-box-shadow: 0 24px 48px rgba(43, 36, 28, 0.22);
}

.offcanvas-header.bg-light {
    background: var(--wall-deep) !important;
    border-bottom: 1px solid var(--line);
}

/* ===== pagination ===== */
.pagination {
    --bs-pagination-font-size: 14px;
    --bs-pagination-color: var(--ink-soft);
    --bs-pagination-bg: var(--card);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--ink);
    --bs-pagination-hover-bg: var(--wall-deep);
    --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-focus-color: var(--ink);
    --bs-pagination-focus-bg: var(--wall-deep);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(47, 74, 61, 0.15);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-disabled-color: var(--ink-soft);
    --bs-pagination-disabled-bg: var(--card);
    --bs-pagination-disabled-border-color: var(--line);
}

/* ===== "no products found" empty state ===== */
.col-12 > h4 {
    font-family: 'Fraunces', serif;
    color: var(--ink);
}

/* ===== responsive ===== */
@media (max-width: 991.98px) {
    .sidebar-desktop {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .product-title {
        font-size: 13.5px;
    }

    .product-price {
        font-size: 13.5px;
    }

    .btn-action {
        width: 30px;
        height: 30px;
    }
}


/* =====================================================================
   PRODUCT DETAIL PAGE (gallery, price/variant panel, return-policy
   badges, quantity stepper, description card, related products)

   This page's Blade file carries its own embedded <style> blocks with
   hardcoded colors (#eee, #000, grey, #48b60a, etc.) that render AFTER
   this stylesheet in the document, so several rules below need
   !important to actually win the cascade -- same reasoning already
   used for .cart-table .text-muted and #EmptyCartContainer .btn-primary
   above. Once these are in place it would be cleanest to delete the
   page's own <style> blocks, but these overrides work either way.
   ===================================================================== */

/* ===== card: not themed anywhere yet, so Bootstrap's white default
   was leaking through on this page's description panel. Scoped
   overrides like #LoginRegisterModal .card are more specific and keep
   winning where they need to. ===== */
.card {
    --bs-card-bg: var(--card);
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--wall-deep);
    --bs-card-cap-color: var(--ink);
}

.card-header.text-muted {
    color: var(--ink-soft) !important;
    font-family: 'Fraunces', serif;
    font-weight: 600;
}

/* ===== breadcrumb ===== */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.breadcrumb-item a {
    color: var(--ink-soft);
}

.breadcrumb-item a:hover {
    color: var(--accent);
}

.breadcrumb-item.active {
    color: var(--ink-soft);
    opacity: 0.7;
}

/* ===== product gallery: same framed-photo language as .frame /
   .product-img-wrapper elsewhere on the site ===== */
.main_image {
    border: 10px solid var(--oak) !important;
    background: var(--card);
    box-shadow: 0 14px 28px rgba(43, 36, 28, 0.16);
    border-radius: 2px;
}

.main_image img {
    max-height: 480px;
    object-fit: contain;
}

.thumbnail_images ul li {
    border: 2px solid var(--line) !important;
    border-radius: 2px;
    background: var(--card);
}

.thumbnail_images ul li:hover {
    border: 2px solid var(--accent) !important;
}

/* a single thumbnail under the hero shot doesn't do anything useful --
   hide the whole strip when there's only one image so it doesn't look
   like a stray leftover element */
.thumbnail_images:has(ul#thumbnail > li:only-child) {
    display: none;
}

/* ===== product info panel ===== */
/* --ink-soft is deliberately as dark as --ink (tuned for AA/AAA
   contrast, not for looking faded), so mapping "Choose Color" /
   "Choose Size" to it made them read as heavy as body text instead of
   quiet labels. This tone is tuned specifically for the light --card
   panel these labels sit on (~5.95:1 contrast on #FAF7F0) -- don't
   reuse it on --wall or --wall-deep without rechecking contrast there. */
.right-side .text-secondary {
    color: #6b5d4d !important;
}

.right-side .text-warning {
    color: var(--brass) !important;
}

.right-side .text-secondary.fa-regular,
.right-side .fa-regular.text-secondary {
    color: var(--line) !important;
}

.product_text {
    color: var(--ink) !important;
}

#product-erp {
    color: var(--ink-soft) !important;
    font-size: 13.5px !important;
    line-height: 1.6;
}

.product_price {
    color: var(--accent) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 26px;
}

.normal_price {
    color: var(--ink-soft) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    margin-left: 8px;
}

/* ===== return-policy badges ===== */
.custom-policy-badge {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11.5px !important;
}

.badge-yes-return {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: rgba(47, 74, 61, 0.25) !important;
}

.badge-no-return {
    background-color: rgba(192, 130, 119, 0.14) !important;
    color: var(--ink) !important;
    border-color: rgba(192, 130, 119, 0.4) !important;
}

/* ===== quantity stepper ===== */
.primary_button-color {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.primary_button-color:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent) !important;
}

.item_qty_input {
    /* was max-width: 64px with the .form-control default ~12px side
       padding still applied -- too little room for two Plex Mono
       digits, so "01" rendered with its "1" clipped down to a stray
       serif that read as a colon. Fixed width + tighter own padding
       gives it enough breathing room. */
    width: 56px;
    max-width: 56px;
    padding: 6px 2px !important;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 15px;
    -moz-appearance: textfield;
}

/* redundant next to the custom +/- buttons, and one less thing that
   can crowd the digits */
.item_qty_input::-webkit-outer-spin-button,
.item_qty_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#stockMessage {
    color: var(--rose) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    margin-top: 6px;
}

#ItemOutOfStock .badge {
    background-color: rgba(192, 130, 119, 0.14) !important;
    border-color: rgba(192, 130, 119, 0.4) !important;
    color: var(--ink) !important;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ===== description card table (classes added client-side via jQuery) ===== */
#ItemDescription .table {
    --bs-table-bg: var(--card);
    --bs-table-striped-bg: var(--wall-deep);
    --bs-table-border-color: var(--line);
    font-size: 14px;
    color: var(--ink-soft);
}

/* ===== related products ===== */
.related-img-container {
    background: var(--wall-deep);
}

.related-img-container img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:hover .related-img-container img {
    transform: scale(1.06);
}

.related-card .card-title a {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink) !important;
}

.related-card .text-success {
    color: var(--accent) !important;
    font-family: 'IBM Plex Mono', monospace;
}

.related-card .text-muted {
    color: var(--ink-soft) !important;
}

/* ===== responsive ===== */
@media (max-width: 767.98px) {
    .main_image img {
        max-height: 320px;
    }

    .thumbnail_images ul li img {
        width: 56px;
    }

    .product_price {
        font-size: 22px;
    }
}


/* =====================================================================
   ACCOUNT PAGES (My Details, Change Password, My Orders, Order Details)

   These four pages previously shipped their own scoped <style> blocks
   with an unrelated palette/typeface pair (#7F543D brown, Playfair
   Display + Lato, 50px pill buttons) that didn't match the wall/card/
   accent system or the Fraunces + Inter + IBM Plex Mono type stack
   used everywhere else. Rebuilt here on the same tokens and the same
   --bs-btn-*/--bs-*-var theming pattern already used for .cta,
              .btn-primary, .cart-table, etc., so account pages read as part of
the same site instead of a bolted-on module.

Class names like .user-avatar-large / .user-name-title /
.user-menu-list are kept as-is (only re-themed) because they're
rendered by the shared <x-customers.side-links/> component, whose
source isn't part of this pass -- markup unchanged, look updated.
===================================================================== */

/* ===== shell ===== */
.account-wrapper {
    min-height: 60vh;
}

.account-page-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
    font-size: 2.25rem;
    letter-spacing: -0.01em;
}

.account-subtitle {
    color: var(--ink-soft);
    font-size: 14px;
}

.account-back-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.account-back-link:hover {
    color: var(--accent);
}

/* Reusable elevated panel — same treatment as .cart-summary-box /
   .cart-section .table-responsive, just given a page-agnostic name
   since it's shared by the sidebar card and the content card here. */
.account-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.06);
    overflow: hidden;
}

/* ===== user sidebar (x-customers.side-links) ===== */
.user-avatar-large {
    width: 80px;
    height: 80px;
    background-color: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.user-name-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
    font-size: 1.3rem;
}

.user-menu-list .list-group-item {
    background-color: var(--card);
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.user-menu-list .list-group-item:last-child {
    border-bottom: none;
}

.user-menu-list .list-group-item i {
    width: 22px;
    text-align: center;
    margin-right: 10px;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.user-menu-list .list-group-item:hover,
.user-menu-list .list-group-item.active {
    background-color: var(--accent-soft);
    color: var(--accent);
    padding-left: 28px;
}

.user-menu-list .list-group-item:hover i,
.user-menu-list .list-group-item.active i {
    color: var(--accent) !important;
}

.user-menu-list .list-group-item.text-danger {
    color: var(--rose) !important;
}

.user-menu-list .list-group-item.text-danger:hover {
    background-color: rgba(192, 130, 119, 0.12);
    color: var(--rose) !important;
}

.user-menu-list .list-group-item.text-danger:hover i {
    color: var(--rose) !important;
}

/* ===== My Orders table ===== */
.orders-table-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.06);
    overflow: hidden;
}

.orders-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.orders-table thead th {
    background-color: var(--wall-deep);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 16px 14px;
    white-space: nowrap;
}

.orders-table tbody td {
    padding: 18px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
}

/* Whole row navigates to the order (see tr[onclick] in the Blade
   template) — the button still works on its own via normal link
   behavior, this just signals the rest of the row is clickable too. */
.orders-table tbody tr {
    cursor: pointer;
}

.orders-table tbody tr:last-child td {
    border-bottom: none;
}

/* A flat --wall-deep hover (same tone as the header row) sat directly
   behind the status badge, and since .status-default *also* used
   --wall-deep, a "pending" row would visually swallow its own badge
   on hover. A soft accent tint keeps the hover visible without ever
   matching a badge background. */
.orders-table tbody tr:hover td {
    background-color: rgba(47, 74, 61, 0.05);
}

.order-item-thumb {
    width: 50px;
    height: 50px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--wall-deep);
    border: 1px solid var(--line);
}

.order-number-text {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
    font-weight: 700;
    font-size: 13.5px;
}

.order-date-text {
    font-weight: 600;
    color: var(--ink);
    font-size: 13.5px;
}

.order-price-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: var(--ink);
    font-size: 14.5px;
}

.badge-shipment {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--wall-deep);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
}

/* ===== status badges (shared: My Orders list + Order Details header) ===== */
.badge-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 2px;
    display: inline-block;
}

.status-completed { background-color: var(--accent-soft); color: var(--accent); }
.status-processing { background-color: rgba(139, 94, 60, 0.16); color: var(--oak); }
.status-pending { background-color: rgba(169, 127, 69, 0.18); color: var(--brass-dark); }
.status-cancelled { background-color: rgba(192, 130, 119, 0.16); color: var(--rose); }
/* Given a solid border rather than relying on --wall-deep alone —
   that background is shared with the table header/hover states, so
   a borderless default badge could visually disappear against them
   (this is the catch-all for statuses like "pending_payment" that
   don't map to one of the named cases above). */
.status-default {
    background-color: var(--wall-deep);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

/* ===== "View Details" / row-level action button =====
   Brand accent on hover, matching the fill-on-hover language used by
   .btn-primary / .btn-action / .cta elsewhere — a plain black/ink
   fill read as an unrelated, heavier UI pattern next to the warm
   accent-driven hovers used everywhere else on the site. */
.btn-view-order {
    border: 1px solid var(--line);
    background-color: var(--card);
    color: var(--ink);
    border-radius: 2px;
    padding: 8px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-view-order:hover,
.btn-view-order:focus-visible {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(47, 74, 61, 0.22);
}

/* ===== empty state (no orders yet) ===== */
.empty-state-icon {
    width: 78px;
    height: 78px;
    background-color: var(--accent-soft);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.9rem;
    margin-bottom: 10px;
}

/* ===== Order Details: shipment progress tracker =====
   Deliberately namespaced as .track-step / .track-circle / .track-label
   rather than the more obvious .step / .step-circle / .step-text —
   the homepage "how it works" section already owns an unscoped
   .step:not(:last-child)::after rule (a dashed connector, set to
   display:block at >=992px) that would otherwise silently paint a
   second, misaligned dashed line across this tracker purely because
   the class name matched, regardless of page or parent. */
.shipment-tracker {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 28px 0 20px;
    padding: 0 18px;
}

.shipment-tracker::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--line);
    z-index: 1;
}

.shipment-tracker .track-step {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 25%;
}

.shipment-tracker .track-circle {
    width: 32px;
    height: 32px;
    background: var(--card);
    border: 2px solid var(--line);
    color: var(--ink-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.shipment-tracker .track-step.active .track-circle {
    border-color: var(--brass);
    background: var(--brass);
    color: #fff;
}

.shipment-tracker .track-step.completed .track-circle {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.shipment-tracker .track-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0.7;
}

.shipment-tracker .track-step.active .track-label,
.shipment-tracker .track-step.completed .track-label {
    color: var(--ink);
    opacity: 1;
}

/* ===== Order Details: package card + line items ===== */
.package-card-header {
    background-color: var(--wall-deep);
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}

.package-label {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-size: 11px;
}

.package-vendor {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2px;
}

.item-row {
    display: flex;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.item-row:last-child {
    border-bottom: none;
}

.item-image {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 4px solid var(--oak);
    background: var(--card);
    box-shadow: 0 4px 10px rgba(43, 36, 28, 0.14);
}

/* ===== Order Details: customer-uploaded personalization photo =====
   Shown as a small round badge pinned to the corner of the product
   thumbnail (echoes the .track-circle roundel used in the shipment
   tracker above) rather than a second boxy image competing for
   attention with the item row. */
.item-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.item-photo-badge {
    position: absolute;
    bottom: -8px;
    right: -10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--card);
    box-shadow: 0 2px 6px rgba(43, 36, 28, 0.35);
    background: var(--card);
    transition: transform 0.2s ease;
}

.item-photo-badge:hover,
.item-photo-badge:focus-visible {
    transform: scale(1.2);
}

.item-photo-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
    font-size: 15px;
}

.item-variant {
    color: var(--ink-soft);
    font-size: 13px;
}

.item-price {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: var(--accent);
}

/* ===== Order Details: action buttons ===== */
.btn-confirm {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #243d33;
    --bs-btn-hover-border-color: #243d33;
    --bs-btn-hover-color: #fff;
    --bs-btn-font-size: 13px;
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 8px;
    border-radius: 2px;
    font-weight: 600;
}

.btn-rate {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    border-radius: 2px;
    padding: 5px 18px;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-rate:hover {
    background: var(--accent);
    color: #fff;
}

.item-reviewed-tag {
    color: var(--brass-dark);
    font-size: 12.5px;
    font-weight: 600;
}

.item-reviewed-tag i {
    color: var(--brass);
}

/* ===== Order Details: sidebar info boxes ===== */
.info-box {
    background: var(--wall-deep);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.info-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brass-dark);
    font-weight: 700;
    margin-bottom: 10px;
}

/* ===== Order Details: rating stars (both the modal form and the
   legacy .rating__group markup are covered here) ===== */
.star-rating,
.rating-group {
    direction: rtl;
    display: inline-flex;
}

.star-rating input[type="radio"],
.rating__input {
    position: absolute !important;
    left: -9999px !important;
}

.star-rating label,
.rating__label {
    color: var(--line);
    font-size: 1.9rem;
    padding: 0 0.1em;
    cursor: pointer;
}

.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label,
.rating__input:checked ~ .rating__label,
.rating__group:hover .rating__label:hover,
.rating__group:hover .rating__label:hover ~ .rating__label {
    color: var(--brass);
}

/* ===== responsive ===== */
@media (max-width: 991.98px) {
    .account-wrapper .col-lg-4 {
        margin-bottom: 24px;
    }
}

@media (max-width: 767.98px) {
    .account-page-title {
        font-size: 1.75rem;
    }

    /* Below tablet width the 7-column orders table has nowhere to
       breathe, so each row becomes its own card and columns stack
       via the data-label attributes already present in the markup —
       same technique as the responsive cart table above, but driven
       by data-label instead of grid-template-areas since this table
       has a variable, wider column set. */
    .orders-table-wrap {
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table,
    .orders-table tbody,
    .orders-table tr,
    .orders-table td {
        display: block;
        width: 100%;
    }

    .orders-table tbody tr {
        margin-bottom: 16px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(43, 36, 28, 0.06);
        padding: 14px 16px;
    }

    .orders-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .orders-table tbody td {
        padding: 8px 0;
        text-align: right;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .orders-table tbody td:last-child {
        border-bottom: none;
        padding-top: 14px;
        justify-content: center;
    }

    .orders-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 700;
        color: var(--ink-soft);
        font-size: 10.5px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Action cell is just the button — "ACTION" as a label above its
       own button is redundant, so skip the data-label pseudo-element
       for this cell only. */
    .orders-table tbody td:last-child::before {
        content: none;
    }

    .btn-view-order {
        width: 100%;
        text-align: center;
    }

    /* The whole card now navigates on tap (see the tr[onclick] added
       in the Blade template), so give it an obvious pressed state and
       stop the still-present "View Details" link/button from eating
       the tap meant for the card — it's kept for accessibility
       (keyboard focus, screen readers) but the row-level handler is
       what most people will actually use. */
    .orders-table tbody tr {
        cursor: pointer;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .orders-table tbody tr:active {
        box-shadow: 0 2px 8px rgba(43, 36, 28, 0.1);
        transform: scale(0.99);
    }

    .item-row {
        padding: 16px 4px;
    }

    .item-image {
        width: 64px;
        height: 64px;
        border-width: 3px;
    }

    .item-photo-badge {
        width: 26px;
        height: 26px;
        bottom: -6px;
        right: -8px;
    }
}

/* =====================================================================
   TRACK ORDER PAGE (public order lookup, no login required)

   This page's Blade file carried its own scoped <style> block that
   referenced tokens which don't exist anywhere in this stylesheet
   (--primary-color, --text-dark, --font-heading, --font-body), so the
   "themed" colors were silently failing back to unset/transparent.
   It also used bare .step / .step-circle / .step-text class names,
   which collide with the homepage's .step:not(:last-child)::after
   rule (line ~441) and would paint a stray dashed connector across
   this tracker too, since main.css is loaded on every page.

   Rather than re-solve problems this file already has good answers
   for, this page now reuses: .account-card / .account-page-title /
   .account-subtitle, .package-card-header / .package-label /
   .package-vendor, .badge-status + .status-*, the .shipment-tracker /
   .track-step / .track-circle / .track-label tracker, .notification
   .alert-danger, and .item-row / .item-image / .item-name /
   .item-variant / .item-price — all defined above. Only the elements
   unique to this page (the search box, the dark order-header banner,
   the package-list background, and the total line) get new rules
   below.
   ===================================================================== */

/* Shared 12px corner treatment for this page's two top-level cards
   (search box + order summary) — softer than the site's usual 6px
   .account-card radius, layered on top of it rather than duplicating
   .account-card's background/border/shadow. */
.track-card-rounded {
    border-radius: 12px;
}

.track-search-input {
    border-radius: 8px;
    font-size: 1rem;
}

.track-search-btn {
    border-radius: 8px;
}

/* Order summary header banner — was `background-color: var(--text-dark)`,
   a token that doesn't exist, which left this bar transparent with
   white!important text sitting on it (unreadable). */
.track-order-header {
    background-color: var(--ink);
    color: #fff;
}

/* <h4>/<h5> aren't covered by the sitewide h1,h2,h3 { font-family:
   'Fraunces' } rule, so headings at this level need it spelled out. */
.track-order-header-title,
.track-section-title {
    font-family: 'Fraunces', serif;
}

.track-section-title {
    font-weight: 600;
    color: var(--ink);
}

/* Package-list background — was a hardcoded #f9f9f9 via inline style
   fighting Bootstrap's .bg-light. --wall reads as a step down from
   --card without disappearing into --wall-deep, which .package-card-header
   already uses for contrast inside each package card. */
.track-package-section {
    background-color: var(--wall);
}

.track-footer-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.track-footer-link:hover,
.track-footer-link:focus-visible {
    color: #243d33;
    text-decoration: underline;
}

.track-order-total-label {
    color: var(--ink);
}

/* Matches the mono-numeral treatment already used for prices elsewhere
   (.item-price, .order-price-text) rather than inventing a new style
   for the same kind of number. */
.track-order-total-amount {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: var(--accent);
}

@media (max-width: 575.98px) {
    /* The shared .shipment-tracker component (defined above for the
       account Order Details page) has no narrow-phone treatment yet —
       four uppercase mono labels side by side get tight below ~380px. */
    .shipment-tracker .track-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .shipment-tracker .track-label {
        font-size: 9px;
        letter-spacing: 0.02em;
    }
}

/* =====================================================================
   GALLERY PAGE (public "Our Work" gallery)

   Reuses the framed-photo language already established by the homepage
   wall (.frame / .frame.f1-f5) and the product gallery (.main_image)
   rather than inventing a new visual system. Each photo sits in a
   thick-bordered frame that cycles through the same oak/ink/brass/rose
   palette used by .step and .frame.f1-f5, with a straighten-and-lift
   on hover like the wall frames.

   This replaces the page's own scoped <style> block, which referenced
   --primary-color / --font-heading / --text-dark / --text-muted /
   --primary-light — none of which exist in this stylesheet (same
   issue already documented above for the Track Order page).
   ===================================================================== */

.gallery-header {
    background: var(--wall-deep);
    border-bottom: 1px solid var(--line);
    padding: 48px 0 40px;
    text-align: center;
}

.gallery-header .breadcrumb {
    justify-content: center;
    margin-bottom: 10px;
}

.gallery-header h1 {
    font-size: 34px;
}

/* ===== category filter pills =====
   No sitewide "chip" component exists yet, so these borrow the
   outline-fills-solid-on-active language already used by .btn-rate. */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 36px 0 44px;
}

.gallery-filter-btn {
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 8px 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ===== the frames ===== */
.gallery-grid {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 40px;
}

.gallery-frame {
    position: relative;
    background: var(--card);
    border: 9px solid var(--oak);
    box-shadow: 0 14px 26px rgba(43, 36, 28, 0.16);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.gallery-frame:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 34px rgba(43, 36, 28, 0.24);
    z-index: 2;
}

/* Cycle the same frame palette as .frame.f1-f5 / .step so a full grid
   of photos reads as one wall, not five copies of one border colour. */
.gallery-item:nth-child(5n+1) .gallery-frame { border-color: var(--oak); }
.gallery-item:nth-child(5n+2) .gallery-frame { border-color: var(--ink); }
.gallery-item:nth-child(5n+3) .gallery-frame { border-color: var(--brass); }
.gallery-item:nth-child(5n+4) .gallery-frame { border-color: var(--rose); }
.gallery-item:nth-child(5n+5) .gallery-frame { border-color: var(--accent); }

.gallery-frame img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-frame:hover img {
    transform: scale(1.06);
}

.gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(43, 36, 28, 0.82) 0%, rgba(43, 36, 28, 0) 70%);
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-frame:hover .gallery-caption {
    opacity: 1;
}

.gallery-caption .eyebrow {
    color: #fff;
    opacity: 0.85;
}

.gallery-caption h5 {
    color: #fff;
    font-size: 1rem;
    margin-top: 2px;
}

.gallery-empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 60px 0;
}

/* ===== lightbox =====
   .modal-content is themed sitewide as a light card (see the
   login/checkout modals above); scope back to transparent here the
   same way #LoginRegisterModal overrides .card, so the enlarged photo
   isn't boxed inside a wall-colored card. */
#galleryLightbox .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

#galleryLightbox .modal-dialog {
    max-width: 900px;
}

#galleryLightbox img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border: 10px solid var(--card);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

#galleryLightbox .btn-close {
    filter: invert(1);
    position: absolute;
    top: -42px;
    right: 0;
    opacity: 0.85;
}

#galleryLightbox .btn-close:hover {
    opacity: 1;
}

.gallery-lightbox-caption {
    color: #fff;
    text-align: center;
    margin-top: 16px;
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
}

@media (max-width: 767.98px) {
    .gallery-frame {
        border-width: 6px;
    }

    .gallery-frame img {
        height: 200px;
    }

    .gallery-header {
        padding: 36px 0 28px;
    }

    .gallery-header h1 {
        font-size: 26px;
    }
}

.row {
    margin-left: 0;
    margin-right: 0;
}

/* =====================================================================
   SEARCH MODAL (navbar search icon)

   Deliberately not the boxed .form-control treatment used everywhere
   else — a command-bar-style underline input reads faster to open/type
   than another bordered field, and gives the modal a distinct feel from
   the login/checkout modals it shares a shell with. Suggestion chips
   reuse the pill language already established by .gallery-filter-btn.
   Sits on top of the sitewide .modal-content / .btn-close theming
   defined above, so only what's unique to this modal is added here.
   ===================================================================== */
.search-modal-dialog {
    max-width: 640px;
}

.search-modal-content {
    padding: 56px 48px 48px;
}

.search-modal-body .eyebrow {
    font-size: 12px;
}

.search-modal-body h3 {
    font-size: 30px;
}

.search-modal-form {
    position: relative;
    border-bottom: 2px solid var(--line);
    padding-bottom: 16px;
    transition: border-color 0.25s ease;
}

.search-modal-form:focus-within {
    border-color: var(--accent);
}

.search-modal-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    font-size: 18px;
    pointer-events: none;
}

.search-modal-input {
    width: 100%;
    border: none;
    background: transparent;
    padding-left: 34px;
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--ink);
    outline: none;
}

.search-modal-input::placeholder {
    color: var(--ink-soft);
    opacity: 0.55;
    font-style: italic;
}

.search-modal-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.search-modal-suggestions-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-dark);
    font-weight: 700;
    margin-right: 4px;
}

.search-modal-chip {
    background: var(--wall);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 30px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.search-modal-chip:hover,
.search-modal-chip:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 575.98px) {
    .search-modal-content {
        padding: 44px 24px 32px;
    }

    .search-modal-body h3 {
        font-size: 24px;
    }

    .search-modal-input {
        font-size: 18px;
    }
}