:root {
            --brand-blue: #003b5c;
            --brand-blue-hover: #002b44;
            --text-dark: #222222;
            --text-muted: #777777;
            --bg-light: #fafafa;
            --bg-offwhite: #f4f4f4;
            --border-light: #eaeaea;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            background-color: #fdfcf9;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6, .serif {
            font-family: 'Playfair Display', serif;
            font-weight: 400;
        }


/* --- Mini Pagination (Top Right) --- */
        .sa-mini-pagination {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.2rem;
        }
        
        .mini-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px; /* Match the 4px border-radius of the main pagination */
            color: #444;
            text-decoration: none;
            font-size: 0.8rem;
            font-family: 'Inter', sans-serif;
            background-color: #fff;
            transition: all 0.2s ease;
        }
        
        .mini-page-btn:hover:not(.disabled) {
            border-color: #003b5c;
            color: #003b5c;
        }
        
        .mini-page-btn.disabled {
            opacity: 0.4;
            cursor: default;
            pointer-events: none;
        }
        
        .mini-page-text {
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem; /* Matches the button font size */
            color: #444;
            font-weight: 500;
            padding: 0 0.3rem;
        }




/* --- Pagination --- */
        .sa-pagination-wrap {
            margin-top: 4rem;
            margin-bottom: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }

        .sa-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 0.5rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: #444;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .sa-page-btn:hover {
            border-color: #003b5c;
            color: #003b5c;
        }

        .sa-page-btn.active {
            background-color: #003b5c;
            color: #fff;
            border-color: #003b5c;
        }

        .sa-page-btn.disabled {
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
        }

        .sa-page-ellipsis {
            color: #888;
            font-weight: bold;
            padding: 0 0.2rem;
        }



        /* --- Header --- */
        .top-header {
            background-color: var(--brand-blue);
            color: #fff;
            padding: 1rem 0;
        }

        .brand-logo {
            font-size: 2.2rem;
            color: #fff;
            text-decoration: none;
            line-height: 1;
        }
        
        .brand-logo:hover { color: #f0f0f0; }

        .search-wrapper {
            display: flex;
            width: 100%;
            max-width: 600px;
        }

        .search-wrapper input {
            border-radius: 0;
            border: none;
            padding: 0.6rem 1rem;
            font-size: 0.9rem;
        }

        .search-wrapper button {
            border-radius: 0;
            background-color: #3884c4;
            color: #fff;
            border: none;
            padding: 0 1.5rem;
            transition: background 0.2s;
        }

        .search-wrapper button:hover {
            background-color: #2a69a0;
        }

        .main-nav {
            border-bottom: 1px solid var(--border-light);
            background: #fff;
        }

        .main-nav .nav-link {
            color: var(--text-dark);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 1rem 1.2rem;
            font-weight: 500;
        }

        .main-nav .nav-link:hover {
            color: var(--brand-blue);
        }

        /* --- Hero Section --- */
        .hero {
            height: 75vh;
            min-height: 600px;
            background-image: url('https://www.sellingantiques.co.uk/showcase/jacobean-revival-dresser-walnut-server-tables-farmhouse_1181041_1767545776992_7276033659.jpg?q=80&w=2000&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.3); /* Dark overlay */
        }

        .hero-content {
            position: relative;
            z-index: 1;
            text-align: center;
            color: #fff;
        }

        .hero-sub {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 1rem;
            display: block;
        }

        .btn-dark-solid {
            background-color: #111;
            color: #fff;
            border: 1px solid #111;
            padding: 0.8rem 2.5rem;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-block;
            margin-top: 2rem;
        }

        .btn-dark-solid:hover {
            background-color: transparent;
            color: #fff;
            border-color: #fff;
        }

        /* --- Section Headings --- */
        .section-heading-wrapper {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-sub {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
            display: block;
        }

        .section-title {
            font-size: 2rem;
            color: var(--text-dark);
            margin: 0;
        }

        /* --- Layout Grids --- */
        
        /* Square Cards (Shop by Area) */
        .square-card {
            text-decoration: none;
            color: var(--text-dark);
            display: block;
            text-align: center;
        }
        
        .square-img-wrap {
            aspect-ratio: 1 / 1;
            overflow: hidden;
            margin-bottom: 1rem;
            background: var(--bg-light);
        }

        .square-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .square-card:hover .square-img-wrap img {
            transform: scale(1.05);
        }

        .square-title {
            font-size: 0.85rem;
            letter-spacing: 0.05em;
        }

        /* Circle Cards (Popular Now) */
        .circle-card {
            text-decoration: none;
            color: var(--text-dark);
            display: block;
            text-align: center;
        }

        .circle-img-wrap {
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 1rem;
            width: 75%;
            margin-left: auto;
            margin-right: auto;
        }

        .circle-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .circle-card:hover .circle-img-wrap img {
            transform: scale(1.05);
        }

        .circle-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
        }

        /* Minimal Product Grid (New Arrivals) */
        .product-grid-5 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
        }

        @media (max-width: 1200px) { .product-grid-5 { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 768px) { .product-grid-5 { grid-template-columns: repeat(2, 1fr); } }

        .minimal-card {
            text-decoration: none;
            color: var(--text-dark);
            display: block;
        }

        .minimal-img-wrap {
            aspect-ratio: 1 / 1;
            background: var(--bg-offwhite);
            margin-bottom: 1rem;
        }

        .minimal-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            mix-blend-mode: multiply;
        }

        .minimal-title {
            font-size: 0.85rem;
            line-height: 1.4;
            margin-bottom: 0.3rem;
        }

        .minimal-price {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .minimal-meta {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 0.5rem;
        }

        /* --- Split Editorial Sections --- */
        .editorial-section {
            background-color: var(--bg-light);
        }

        .editorial-img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
        
        .play-btn-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.5rem;
            padding-left: 4px; /* Center the play triangle visually */
        }


/* ---- Category guide: cards in the grid, magazine article at the foot ---- */
.sa-mag__caps { display: block; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #7d7a75; }
.sa-mag__caps--ink { color: #141414; }

.na-grid .sa-guide-card { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 1.6rem 1.9rem; background: #f5f2ec; min-width: 0; }
.na-grid .sa-guide-card p { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.6; margin: 0; color: #141414; }

.sa-mag { max-width: 920px; margin: 3rem auto 2rem; padding: 1.4rem 0 0; color: #141414; }
.sa-mag__folio { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid #141414; margin-bottom: 3rem; }
.sa-mag__folio .sa-mag__caps { color: #141414; }

.sa-mag__mast { text-align: center; margin: 0 auto 2.8rem; }
.sa-mag__title { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 3.6rem; line-height: 1.02; letter-spacing: -0.01em; margin: 1rem auto 1.1rem; max-width: 24ch; text-wrap: balance; }
.sa-mag__deck { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.4rem; line-height: 1.45; color: #3a3a3a; max-width: 44ch; margin: 0 auto; }
@media (max-width: 640px) { .sa-mag__title { font-size: 2.5rem; } .sa-mag__deck { font-size: 1.2rem; } }

.sa-mag__plate { margin: 0 0 3rem; }
.sa-mag__plate > a { display: block; background: #f5f2ec; overflow: hidden; }
.sa-mag__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-mag__plate--hero > a, .sa-mag__plate > a { aspect-ratio: 16 / 9; }
.sa-mag__plate--wide > a { aspect-ratio: 48 / 25; }
.sa-mag__plate--half { margin: 0; }
.sa-mag__plate--half > a { aspect-ratio: 3 / 2; }
.sa-mag__plate figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-top: 0.7rem; }
.sa-mag__plate figcaption .sa-mag__caps:first-child { flex: 1 1 auto; min-width: 0; }
.sa-mag__plate figcaption .sa-mag__caps:last-child { flex: 0 0 auto; white-space: nowrap; }
.sa-mag__plate figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid #dcd8d1; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.sa-mag__plate--half figcaption { flex-direction: column; gap: 0.35rem; }
.sa-mag__plate--half figcaption .sa-mag__caps:last-child { white-space: normal; }

.sa-mag__cross { text-align: center; margin: 3.4rem 0 1.8rem; }
.sa-mag__cross::before { content: ""; display: block; width: 34px; height: 1px; background: #141414; margin: 0 auto 1.1rem; }
.sa-mag__cross h2 { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 2rem; line-height: 1.15; margin: 0.45rem 0 0; text-wrap: balance; }

.sa-mag__prose { columns: 2; column-gap: 3rem; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 1.18rem; line-height: 1.6; color: #1e1e1e; orphans: 3; widows: 3; }
.sa-mag__prose p { margin: 0 0 1.05rem; }
.sa-mag__prose ul { margin: 0; padding-left: 1.2rem; }
.sa-mag__prose li { margin-bottom: 0.6rem; }
.sa-mag__prose--drop p:first-child::first-letter { float: left; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 4.9em; line-height: 0.8; padding: 0.05em 0.12em 0 0; color: #141414; }
@media (max-width: 700px) { .sa-mag__prose { columns: 1; } }

.sa-mag__note { text-align: center; margin: 3rem 0; padding: 2.3rem 2.5rem 2.2rem; background: #f5f2ec; }
.sa-mag__note p, .sa-mag__quote p { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.35; margin: 0.7rem auto 0; color: #141414; max-width: 50ch; }

.sa-mag__spread { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin: 3rem 0; }
.sa-mag__quote { text-align: center; padding: 0 1rem; }
.sa-mag__quote p { font-size: 1.65rem; line-height: 1.3; margin-top: 0.8rem; }
.sa-mag__quote--solo { margin: 0 0 3rem; }
@media (max-width: 700px) { .sa-mag__spread { grid-template-columns: 1fr; gap: 1.6rem; } }

.sa-mag__names { text-align: center; margin: 3.4rem 0 0; padding: 2.2rem 2.5rem 2.4rem; background: #f5f2ec; }
.sa-mag__names p { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 1.4rem; line-height: 1.9; margin: 0.7rem auto 0; max-width: 60ch; }
.sa-mag__sep { color: #7d7a75; margin: 0 0.55rem; font-style: italic; }
.sa-mag__aside { text-align: center; margin: 1.6rem 0 0; padding: 2.1rem 2.5rem; background: #fdfcfa; border: 1px solid #ece8e0; }
.sa-mag__aside p { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.45; color: #141414; max-width: 50ch; margin: 0 auto; }

.sa-mag__tint { background: #eef1f0; padding: 0.4rem 2.5rem 2.4rem; margin: 3rem 0; }
.sa-mag__tint .sa-mag__cross { margin-top: 2rem; }
.sa-mag__lexicon { columns: 2; column-gap: 3rem; margin: 0; }
.sa-mag__lexicon > div { break-inside: avoid; border-top: 1px solid #d6d9d7; padding: 0.8rem 0 0.5rem; }
.sa-mag__lexicon dt { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.sa-mag__lexicon dd { margin: 0.2rem 0 0; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 1.05rem; line-height: 1.5; color: #333; }
@media (max-width: 700px) { .sa-mag__lexicon { columns: 1; } }

/* Plate captions: on a phone the title and the dealer cannot share a row.
   The title is squeezed into half the width and wraps three or four times
   while the dealer sits alongside on one nowrap line. Stack them instead,
   Let the whole caption run as one inline paragraph instead, so the dealer
   follows the date rather than claiming a line of its own. */
@media (max-width: 700px) {
    .sa-mag__plate figcaption { display: block; }
    .sa-mag__plate figcaption .sa-mag__caps { display: inline; }
    .sa-mag__plate figcaption .sa-mag__caps:last-child::before { content: "\00a0\00b7\00a0"; }
    .sa-mag__plate figcaption .sa-mag__caps:last-child { white-space: normal; }
}

.sa-mag__qa { max-width: 66ch; margin: 0 auto; }
.sa-mag__qa details { border-top: 1px solid #dcd8d1; padding: 1.1rem 0; }
.sa-mag__qa details:last-child { border-bottom: 1px solid #dcd8d1; }
.sa-mag__qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.32rem; line-height: 1.35; }
.sa-mag__qa summary::-webkit-details-marker { display: none; }
.sa-mag__qa summary::after { content: "+"; flex: 0 0 auto; font-style: normal; font-weight: 400; font-size: 1.5rem; color: #7d7a75; line-height: 1; }
.sa-mag__qa details[open] summary::after { content: "\2013"; }
.sa-mag__qa details p { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 1.12rem; line-height: 1.6; margin: 0.8rem 0 0; color: #1e1e1e; max-width: 60ch; }

.sa-mag__colophon { text-align: center; margin: 4rem 0 0; padding-top: 1rem; border-top: 1px solid #dcd8d1; }
.sa-mag__colophon .sa-mag__caps { line-height: 2; }



.sa-mag__figs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 4rem; text-align: center; margin: 0.4rem 0 1.8rem; }
.sa-mag__figs .sa-mag__caps { margin-bottom: 0.45rem; }
.sa-mag__figs b { display: block; font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: #141414; }
.sa-mag__market-note { font-family: 'Cormorant Garamond', Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.5; color: #3a3a3a; text-align: center; max-width: 56ch; margin: 0 auto; }




/* sidebar: a way through, not a category with a count */
.sa-category-more{ font-weight:500 }
.sa-category-more .sa-category-item-count{ font-size:1rem; color:#999 }

/* the hub itself */
.sa-hub-grid{
    display:grid;gap:.6rem;margin:.2rem 0 1.5rem;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.sa-hub-card{
    display:flex;flex-direction:column;gap:.15rem;
    padding:.75rem .9rem;border:1px solid #e2e2e2;border-radius:.4rem;
    background:#fff;text-decoration:none;
    transition:border-color .15s,background .15s;
}
.sa-hub-card:hover,.sa-hub-card:focus-visible{ border-color:#b9a06a;background:#faf8f3 }
.sa-hub-title{ font-family:'Playfair Display',serif;font-size:.95rem;color:#222 }
.sa-hub-count{ font-size:.75rem;color:#8a8a8a;font-variant-numeric:tabular-nums }


.sa-l3-nav{margin:.1rem 0 1.15rem}
.sa-l3-rail{position:relative}

/* Right-hand fade: the only honest cue that there is more off-screen. */
.sa-l3-rail.has-more::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
    pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),#fff 70%);
}

.sa-l3-scroll{
    list-style:none;margin:0;padding:.15rem .1rem .4rem;
    display:flex;flex-wrap:nowrap;gap:.4rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;
}
.sa-l3-scroll::-webkit-scrollbar{display:none}
.sa-l3-scroll>li{flex:0 0 auto;scroll-snap-align:start}

.sa-l3-pill{
    display:inline-flex;align-items:baseline;gap:.4rem;white-space:nowrap;
    padding:.32rem .75rem;border:1px solid #e2e2e2;border-radius:1rem;
    font-size:.82rem;color:#333;text-decoration:none;background:#fff;
    transition:border-color .15s,background .15s,color .15s;
}
a.sa-l3-pill:hover,a.sa-l3-pill:focus-visible{
    border-color:#b9a06a;background:#faf8f3;color:#111;
}
/* Same treatment as hover, so the row reads as one set of options with the
   current one quietly marked - not a button shouting over its neighbours. */
.sa-l3-pill.is-current{
    background:#faf8f3;border-color:#b9a06a;color:#111;
    font-weight:500;cursor:default;
}
.sa-l3-pill.is-current .sa-l3-count{color:#8a8a8a}

.sa-l3-count{font-size:.72rem;color:#8a8a8a;font-variant-numeric:tabular-nums}

.sa-l3-arrow{
    position:absolute;top:50%;transform:translateY(-60%);z-index:2;
    width:28px;height:28px;padding:0;line-height:1;
    border:1px solid #e2e2e2;border-radius:50%;background:#fff;
    color:#444;font-size:1rem;cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.10);
}
.sa-l3-arrow:hover{border-color:#b9a06a;color:#111}
.sa-l3-prev{left:-6px}
.sa-l3-next{right:-6px}
@media (max-width:991.98px){ .sa-l3-arrow{display:none} }

@media (prefers-reduced-motion:reduce){
    .sa-l3-scroll{scroll-behavior:auto}
}


 
   /* --- INTEGRATED SIDEBAR FILTER BUTTON --- */
        .sa-airbnb-filter-btn {
            display: flex;
            width: 100%; 
            justify-content: center; 
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            border: 1px solid #ddd; 
            border-radius: 4px; 
            background: #fff;
            color: #444;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 0.85rem;
            text-transform: uppercase; 
            letter-spacing: 0.05em;
            text-decoration: none;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
        }

        .sa-airbnb-filter-btn:hover {
            background-color: #fcfcfc;
            color: #003b5c; 
            border-color: #003b5c;
            text-decoration: none;
        }

        .sa-filter-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #003b5c; 
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            min-width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff; 
            padding: 0 4px;
        }

       /* --- ACTIVE FILTER TAGS --- */
        .sa-filter-group-wrapper {
            margin-bottom: 2rem; 
        }

        .sa-active-filters {
            display: flex;
            flex-wrap: wrap;
            align-items: center; 
            gap: 8px;
            margin-top: 12px; 
        }

        .sa-filter-tag {
            display: inline-flex;
            align-items: center;
            background-color: #f8f9fa; 
            border: 1px solid #e5e7eb; 
            border-radius: 20px; 
            padding: 5px 12px; 
            font-size: 0.75rem;
            color: #333;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
        }

        .sa-filter-text-trigger {
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .sa-filter-text-trigger:hover {
            color: #003b5c;
        }

        .sa-filter-remove {
            background: none;
            border: none;
            font-size: 1.1rem;
            line-height: 1;
            color: #999;
            margin-left: 8px;
            padding: 0;
            cursor: pointer;
            transition: color 0.2s;
            display: flex;
            align-items: center;
        }

        .sa-filter-remove:hover {
            color: #111; 
        }

        .sa-clear-all-filters {
            font-size: 0.75rem;
            color: #003b5c;
            text-decoration: underline;
            margin-left: 4px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .sa-clear-all-filters:hover {
            color: #111;
        }




/* ============================================================
   MOBILE CATEGORY HEADER
   Cuts the block between the rail and the first antique from
   ~419px to ~110px. Every element removed is either duplicated
   further down the page or preserved in JSON-LD.
   ============================================================ */
@media (max-width: 991px){

    .na-header-wrap{ padding-bottom: .5rem !important; margin-bottom: .75rem !important; }
    .na-main-title{ font-size: 1.55rem !important; line-height: 1.2; }

    .sa-back-chip{
        display: inline-flex; align-items: center;
        font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
        letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
        color: #02486d; border: 1px solid #dfe4ea; border-radius: 40px;
        padding: 4px 10px; margin-bottom: 8px;
    }

    .sa-cat-count{
        font-family: 'Inter', sans-serif; font-size: 11px;
        color: #777; margin-top: 9px;
    }

    /* the breadcrumbs sit under 32px of section padding - pull them up so they
       read as the first line of the page rather than a floating label */
    .newly-added-section{ padding-top: 10px !important; }

    .sa-cat-about{
        border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;
        margin: 10px 0 0;
    }
    .sa-cat-about > summary{
        list-style: none; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 0; min-height: 44px;
        font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
        letter-spacing: .05em; text-transform: uppercase; color: #02486d;
    }
    .sa-cat-about > summary::-webkit-details-marker{ display: none; }
    .sa-cat-about > summary::after{ content: "+"; font-size: 15px; font-weight: 400; }
    .sa-cat-about[open] > summary::after{ content: "\2013"; }
    .sa-cat-about p{
        font-family: Georgia, 'Playfair Display', serif;
        font-size: .85rem; line-height: 1.6; color: #555; margin: 0 0 8px;
    }
    .sa-cat-about a{ font-size: .8rem; color: #02486d; text-decoration: none; font-weight: 600; }
}



/* These rules belong to the mobile header block above, which closed at the
   brace on line 749, leaving everything below it at global scope: desktop was
   getting 11px breadcrumbs, a clamped teaser, the tighter header padding and
   the hidden final chevron. Re-opened here. */
@media (max-width: 991px){

    /* full trail, just quieter and tighter than desktop */
    .sa-crumbs{
        font-size: 11px !important;
        margin-bottom: 9px !important;
        line-height: 1.4;
    }

    .sa-cat-count{
        font-family: 'Inter', sans-serif; font-size: 11px;
        color: #777; margin-top: 3px;
    }

    /* prose stays visible but clamped - full text remains in the DOM */
    /* tighter above, more breathing room below, before the grid starts */
    .na-header-wrap{ padding-bottom: .6rem !important; margin-bottom: .6rem !important; }

    .sa-cat-teaser{ margin: 6px 0 18px; }
    .sa-cat-teaser p{
        font-family: Georgia, 'Playfair Display', serif;
        font-size: .82rem; line-height: 1.5; color: #5a5a5a; margin: 0;
        /* 4 lines, not 3 - the longest teasers run to 3 lines of prose and the
           link now sits inline at the end, so it needs the fourth to land in */
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sa-cat-teaser a{
        font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 600;
        color: #02486d; text-decoration: none; white-space: nowrap;
    }

    /* the trailing ">" left behind when "Page 1" is hidden on mobile */
    .sa-crumbs .mx-1:has(+ .text-dark){ display: none; }
}


/* style_detail_page.css raises .offcanvas-backdrop to z-index 1060 so its blur
   covers the sticky header - deliberate, and the effect we want. But that also
   put it above these two panels at Bootstrap's default 1045, so the category
   list rendered *behind* the blur on item pages. Lift both above it, matching
   the burger menu which already sits at 1070. */
#mobileCategories,
#mobileSortPanel,
#mobileLinksPanel,
#mobilePerPagePanel{
    z-index: 1070;
}
/* An offcanvas-top stretches to its max-height even with height:auto, so a
   short list left a long empty white area below it. fit-content sizes the
   panel to its content and still caps at 85vh, so long lists scroll exactly
   as before. !important is needed because height:auto is set inline. */
#mobileCategories,
#mobileLinksPanel{
    height: -webkit-fit-content !important;
    height: fit-content !important;
}

/* Relevant Links pill - same treatment as the other rail buttons */
.sa-pill-links-btn{
    height: 40px; padding: 0 18px; border: none;
    border-radius: 40px; background: #ffffff; color: #02486d;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.sa-pill-links-btn .bi{ font-size: 1rem; line-height: 1; }



/* mobile browse bar - FILTERS to match CATEGORIES */
.d-lg-none .sa-pill-filter-btn{
    background: #ffffff;
    color: #02486d;
}

.d-lg-none .sa-filter-pill-wrapper{
    border: none;
}

/* the count was near-transparent black with white text - invisible on white */
.d-lg-none .sa-filter-glow-count{
    background-color: #02486d;
    color: #ffffff;
}

.d-lg-none .na-tag-track{
    display: none;
}


/* sort chip in the mobile rail */
.sa-pill-sort-btn{
    height: 40px; padding: 0 18px; border: none;
    border-radius: 40px; background: #ffffff; color: #02486d;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* three pills exceed a 391px screen - let the rail scroll sideways */
.sa-browse-rail{
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sa-browse-rail::-webkit-scrollbar{ display: none; }

/* The filters wrapper carries flex-shrink:1 and an inline min-width:0, so it
   collapsed to 74px and clipped the 119px FILTERS button inside it. That also
   stopped the rail ever exceeding its container, which is why it never
   scrolled. Pin it to its natural width and the overflow appears. */
.sa-browse-rail .sa-filter-pill-wrapper{
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    overflow: visible;
}

.sa-chev{ opacity: .6; font-size: 9px; }

/* sort panel options */
.sa-sort-opt{
    width: 100%; min-height: 48px; text-align: left; padding: 0 16px;
    border: 1px solid #e3e3e3; border-radius: 6px; background: #fff;
    font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 500; color: #111;
}

/* header: logo and search label touch at 391px - hide the words below that */
/* Header pills - search and saved. Same shape and type as the carousel
   buttons, but smaller and in a lighter blue so they read as header chrome
   rather than primary actions. The background is translucent white over the
   navy, so it stays in tune if the header colour ever changes. */
.sa-header-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border-radius: 40px;
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sa-header-pill:hover,
.sa-header-pill:focus{ color: #ffffff; }
.sa-header-pill:active{ background: rgba(255,255,255,0.28); }
.sa-header-pill .bi{ font-size: 0.95rem; line-height: 1; }
.sa-header-pill .favsqty{ font-size: 11px; font-weight: 700; }

/* only hide the word on genuinely tiny handsets */
@media (max-width: 330px){ .sa-msearch-label{ display: none; } }


.sa-msearch-trigger{ gap: 6px; }
.sa-msearch-label{
    font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; white-space: nowrap;
}
/* very narrow handsets - icon only, so the header can never break */
@media (max-width: 359px){ .sa-msearch-label{ display: none; } }




/* mobile category pill - sits beside FILTERS in the blue bar */
.sa-pill-cat-btn{
    background: #ffffff;
    color: #02486d;
    border: 0;
    border-radius: 40px;
    height: 40px;
    padding: 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.sa-pill-cat-btn:active{ filter: brightness(0.92); }

/* the category list inside the dropdown - comfortable tap targets */
#mobileCategories .offcanvas-body a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 2px 4px;
}









/* ===== MOBILE SEARCH OVERLAY ===== */
.sa-msearch-overlay        { position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,.45); }
.sa-msearch-overlay[hidden]{ display: none; }

.sa-msearch-inner{
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: #004185;                       /* matches .sa-mobile-top-bar */
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.sa-msearch-back{
    background: none; border: 0; color: #fff;
    font-size: 1.5rem; line-height: 1; padding: 2px 6px; flex-shrink: 0;
}
.sa-msearch-slot{ flex: 1 1 auto; min-width: 0; }

/* make the borrowed desktop bar fill the overlay */
.sa-msearch-slot .sa-search-portal-wrapper{
    width: 100% !important; max-width: none !important;
    flex-shrink: 1 !important; display: flex !important;
}
.sa-msearch-slot #sa-search-backdrop{ display: none !important; }

/* the input shares a flex row with the SEARCH button, so it must GROW -
   width:100% alone just gets shrunk back to fit alongside it */
.sa-msearch-slot #sa-search-input{
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* 129px of SEARCH button is a third of a phone screen - drop to the icon.
   font-size:0 hides the text; the SVG has explicit width/height so it stays */
.sa-msearch-slot .sa-search-submit-btn{
    font-size: 0 !important;
    padding: 8px 10px !important;
    flex: 0 0 auto !important;
}

/* the dropdown is two 50% columns built for a desktop ROW. Inside the overlay
   the container runs in COLUMN direction, so flex-basis:50% becomes 50% of the
   HEIGHT. main.js also writes min-height:350px inline on each column, which
   only a !important min-height can override. */
.sa-msearch-slot #sa-omnibox{
    position: fixed !important;
    top: 68px !important;                    /* the overlay bar is 64px tall */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}
.sa-msearch-slot #sa-omnibox > .sa-omni-col{
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;                /* the one that actually matters */
    height: auto !important;
    border-right: 0 !important;
}

body.sa-msearch-open{ overflow: hidden; }

@media (min-width: 992px){ .sa-msearch-overlay{ display: none !important; } }



    /* ==========================================
       ELEVATED CLASSIC HEADER (STEEL SAPPHIRE)
       ========================================== */
    .sa-header-v3 {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        position: sticky;
        top: 0;
        z-index: 1050;
        width: 100%;
        min-width: 1050px; 
        box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }
    
    .sa-top-bar-v3 {
        background-color: #0d1b2a; 
        color: #a9b5c2;
        font-size: 11px; 
        padding: 4px 24px; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        letter-spacing: 0px; 
        text-transform: uppercase; 
    }

    .sa-control-label {
        letter-spacing: 0px; 
        text-transform: uppercase; 
        font-size: 11px;
        margin-right: 4px;
        color: #718096; 
    }
    
    .sa-top-stats {
        display: flex;
        align-items: center;
    }

    .sa-text-mobile {
        display: none;
    }

    .sa-dot-v3 {
        color: #4da8da;
        margin: 0 8px;
    }

    .sa-top-controls {
        display: flex;
        align-items: center;
        gap: 24px;
    }


    .sa-view-pills {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sa-view-pills a {
        color: #a9b5c2;
        text-decoration: none;
        padding: 2px 8px;
        border-radius: 12px;
        transition: all 0.2s ease;
    }

    .sa-view-pills a:hover {
        color: #ffffff;
        background-color: #1b3b5a;
    }

    .sa-view-pills a.active {
        background-color: #4da8da;
        color: #ffffff;
    }

    .sa-sort-modern {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sa-current-sort {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0px; 
    }

    .sa-sort-trigger {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        color: #ffffff;
        cursor: pointer;
        padding: 4px 0;
        transition: color 0.2s;
    }

    .sa-sort-trigger:hover {
        color: #4da8da;
    }

    .sa-sort-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #1b3b5a;
        min-width: 170px;
        border-radius: 4px;
        padding: 8px 0;
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateY(5px);
        transition: all 0.2s ease;
        z-index: 2000;
        display: flex;
        flex-direction: column;
    }

    .sa-sort-trigger:hover .sa-sort-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .sa-sort-dropdown a {
        padding: 8px 16px;
        color: #a9b5c2;
        text-decoration: none;
        display: block;
        transition: background 0.2s, color 0.2s;
    }

    .sa-sort-dropdown a:hover,
    .sa-sort-dropdown a.active {
        background-color: #0d1b2a;
        color: #ffffff;
    }

    .sa-top-divider {
        width: 1px;
        height: 14px;
        background-color: #1b3b5a;
    }

    .sa-dealer-btn {
        color: #ffffff;
        text-decoration: none;
        text-transform: uppercase; 
        transition: color 0.2s;
    }

    .sa-dealer-btn:hover {
        color: #4da8da;
    }

    .sa-main-nav-v3 {
        background-color: #004185; 
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }
    
    .sa-brand-v3 img {
        height: 75px; width: auto; 
        display: block;
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)); 
    }

    .sa-search-wrap-v3 {
        display: flex;
        flex: 1;
        max-width: 780px;
        height: 48px;
        background-color: #ffffff;
        border-radius: 4px;
        padding: 4px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    }
    
    .sa-search-wrap-v3 input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0 16px;
        font-size: 18px;
        color: #333;
        outline: none;
    }
    
    .sa-search-wrap-v3 input::placeholder {
        color: #9ba4b5;
    }
    
    .sa-search-btn-v3 {
        background-color: #2b7a9e; 
        color: #ffffff;
        border: none;
        border-radius: 3px;
        padding: 0 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
    }
    
    .sa-search-btn-v3:hover {
        background-color: #1f5f7d;
    }

    .sa-icons-v3 {
        display: flex;
        align-items: center;
        gap: 35px;
        flex: 0 0 auto;
        padding-right: 10px;
    }
    
    .sa-icon-item-v3 {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
    }
    
    .sa-icon-item-v3 svg {
        width: 38px;
        height: 38px;
        stroke: #ffffff;
        stroke-width: 1.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .sa-icon-text-v3 {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 14px;
    }
    
    .sa-badge-v3 {
        min-width: 26px;        /* Reserves enough space for a 2-digit number */
    display: inline-block;  /* Required! Spans ignore widths without this */
    text-align: center;
        position: absolute;
        top: -2px;
        right: -8px;
        background-color: #4da8da;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        height: 20px;
        
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .sa-star-badge-wrap {
        position: relative;
    }
    .sa-star-badge-wrap .sa-badge-v3 {
        right: -12px;
        top: -6px;
    }

    .sa-category-nav-v3 {
        background-color: #f7f6f2; 
        border-bottom: 1px solid #e0e0e0;
        position: relative; 
        display: flex;
        justify-content: center; 
        align-items: center;
        z-index: 10; 
    }

    .sa-cat-list {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 35px;
        position: static; 
    }

    .sa-cat-item {
        position: static; 
    }

    .sa-cat-item > a {
        display: block;
        padding: 16px 0;
        color: #6d7480; 
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid transparent;
        transition: color 0.2s, border-bottom-color 0.2s;
    }

    .sa-cat-item:hover > a,
    .sa-cat-item > a.active {
        color: #1b3b5a; 
        border-bottom-color: #1b3b5a;
    }

    .sa-mega-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0; 
        width: 100%;
        background-color: #ffffff;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.06);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: -1; 
    }

    .sa-mega-dropdown.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); 
    }

    .sa-mega-content {
        display: flex;
        justify-content: center;
        gap: 60px;
        padding: 40px 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .sa-mega-column {
        display: flex;
        flex-direction: column;
        min-width: 180px;
    }

    .sa-mega-column h4 {
        margin: 0 0 16px 0;
        font-size: 14px;
        color: #1b3b5a;
        font-weight: 700;
    }

    .sa-mega-column a {
        color: #4a5568;
        text-decoration: none;
        font-size: 14px;
        margin-bottom: 12px;
        transition: color 0.2s;
    }

    .sa-mega-column a:hover {
        color: #4da8da; 
    }

    .sa-mega-feature {
        max-width: 320px;
        margin-left: 40px; 
    }

    .sa-mega-feature img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 12px;
    }

    .sa-mega-feature h5 {
        margin: 0 0 4px 0;
        font-size: 14px;
        color: #1b3b5a;
    }

    .sa-mega-feature .sa-shop-now {
        font-size: 13px;
        color: #4a5568;
        text-decoration: underline;
    }
    
    .sa-mega-feature .sa-shop-now:hover {
        color: #4da8da;
    }

    @media (max-width: 1050px) {
        .sa-header-v3 {
            min-width: auto;
        }
    }

    @media (max-width: 1150px) {
        .sa-mega-content {
            gap: 30px;
            padding: 30px 15px;
        }
        .sa-mega-column {
            min-width: 150px;
        }
        .sa-mega-feature {
            max-width: 250px;
            margin-left: 20px;
        }
    }

    @media (max-width: 850px) {
        
        .sa-header-v3 {
            min-width: auto;
        }

        .sa-top-bar-v3 {
            padding: 4px 16px;
            position: relative; 
            z-index: 10; 
        }

        .sa-top-stats {
            display: flex; 
            font-size: 11px;
            white-space: nowrap;
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch; 
            scrollbar-width: none; 
            flex: 1; 
            margin-right: 15px; 
        }

        .sa-top-stats::-webkit-scrollbar {
            display: none; 
        }
        
        .sa-text-desktop {
            display: none; 
        }
        
        .sa-text-mobile {
            display: inline; 
        }
        
        .sa-top-controls {
            flex-shrink: 0; 
            gap: 12px;
            white-space: nowrap; 
        }

        .sa-control-label {
            display: none;
        }

        .sa-main-nav-v3 {
            flex-wrap: wrap;
            padding: 12px 16px;
            gap: 15px;
        }

        .sa-brand-v3 {
            flex: 1; 
        }

        .sa-brand-v3 img {
            height: 50px; 
        }

        .sa-icons-v3 {
            gap: 20px;
            padding-right: 0;
        }

        .sa-search-wrap-v3 {
            order: 3; 
            flex: 0 0 100%;
            max-width: 100%;
            height: 44px;
        }

        .sa-category-nav-v3 {
            flex-direction: column;
            align-items: stretch;
            background-color: #ffffff; 
        }

        .sa-cat-list {
            justify-content: flex-start;
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch; 
            padding: 0 16px;
            gap: 24px;
            scrollbar-width: none; 
        }

        .sa-cat-list::-webkit-scrollbar {
            display: none; 
        }

        .sa-cat-item > a {
            white-space: nowrap; 
            padding: 12px 0;
        }
    }

    .sa-mega-category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 12px 24px;
        flex: 2; 
    }

    .sa-mega-category-grid .grid-header {
        grid-column: 1 / -1; 
        margin: 0 0 16px 0;
        font-size: 14px;
        color: #1b3b5a;
        font-weight: 700;
    }

    .sa-mega-category-grid a {
        color: #4a5568;
        text-decoration: none;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px; 
        transition: color 0.2s;
        white-space: nowrap; 
    }

    .sa-mega-category-grid a i {
        color: #a9b5c2; 
        font-size: 12px;
        transition: color 0.2s;
    }

    .sa-mega-category-grid a:hover,
    .sa-mega-category-grid a:hover i {
        color: #4da8da; 
    }


    /* ==========================================
       LEGACY FOOTER STYLES (Adapted for New Layout)
       ========================================== */
    .site-footer-v3 {
        font-family: 'Inter', sans-serif;
        color: #444444;
        font-size: 0.85rem;
    }

    .site-footer-v3 h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.35rem;
        color: #111111;
        margin-top: 1.5rem;
        margin-bottom: 0.8rem;
        font-weight: 600;
    }

    .site-footer-v3 p {
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .site-footer-v3 a.title {
        color: #003b5c; /* Sellingantiques Brand Blue */
        text-decoration: none;
        line-height: 1.8;
        display: inline-block;
        transition: color 0.2s ease;
    }

    .site-footer-v3 a.title:hover {
        color: #2b7a9e; 
        text-decoration: underline;
    }

    /* Trustpilot Widget Box */
    #custom-reviews-widget {
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    #custom-reviews-widget .widget-header h3 {
        margin-top: 0;
        font-size: 1.15rem;
    }

    .review-text {
        margin: 0;
        font-size: 0.85rem;
        color: #555;
    }

    .review-text a.read-more {
        color: #008cdd;
        font-weight: 600;
        text-decoration: none;
    }

    .review-text a.read-more:hover {
        text-decoration: underline;
    }

    /* Stats Table Refinements */
    .site-footer-v3 .table {
        font-size: 0.75rem;
        background-color: #fff;
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
    }

    .site-footer-v3 .table td {
        padding: 0.4rem 0.6rem;
        vertical-align: middle;
        border-color: #eeeeee;
    }

    .site-footer-v3 .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fdfdfd;
    }

    /* Make the stat numbers pop */
    .site-footer-v3 .table td span {
        font-weight: 600;
        color: #111;
    }
    
    .site-footer-v3 hr {
        border-color: #eaeaea;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }



        /* Import the elegant Geometric Sans-Serif 'Jost' */
        @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

       /* Perfectly balanced spacing top and bottom */
        .newly-added-section {
            padding-top: 2rem; 
            padding-bottom: 5rem;
        }

        /* --- NEW SIDEBAR STYLES --- */
        .sa-sidebar {
            padding-right: 2rem;
        }

        .sa-legacy-filters {
            margin-bottom: 2rem;
            padding: 1.2rem;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }

        .sa-sidebar-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.65rem;
            text-transform: uppercase;
            color: #888;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .sa-category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sa-category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            font-size: 0.85rem;
            color: #222;
            text-decoration: none;
            border-bottom: 1px solid #f9f9f9;
            transition: color 0.2s;
        }

        .sa-category-item:hover {
            color: #003b5c;
        }

        .sa-category-item-count {
            color: #888;
            font-size: 0.75rem;
        }

        /* --- SIDEBAR "LEDGER" LOOK (29 Sep 2026): visible hairlines, serif heading, gold rule on hover --- */
        .sa-sidebar .sa-sidebar-header { border-bottom: 1px solid #d9d3c7; color: #8a7f6a; letter-spacing: .08em; }
        .sa-sidebar .sa-category-item { padding: .62rem 0; border-bottom: 1px solid #e9e4da; position: relative; transition: color .2s, background-color .2s, box-shadow .2s; }
        .sa-sidebar .sa-category-item strong { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.25rem !important; }
        .sa-sidebar .sa-category-item:hover { background: #f8f5ef; box-shadow: -.6rem 0 0 #f8f5ef, .6rem 0 0 #f8f5ef; color: #004185; }
        .sa-sidebar .sa-category-item:hover .sa-category-item-count { color: #004185; }
        .sa-sidebar .sa-category-item-count { font-variant-numeric: tabular-nums; color: #9a917f; }

        /* --- ACCOUNT BUTTON IN THE CATEGORY NAV --- */
        /* Same treatment as the drawer cards: near-white ground, hairline
           border, muted label, and the teal kept for the icon and the hover. */
        .sa-account-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: #fcfcfc;
            color: #555 !important;
            font-weight: 600;
            padding: 6px 13px !important;
            border-radius: 6px;
            letter-spacing: 0.06em;
            white-space: nowrap;
            text-decoration: none !important;
            border: 1px solid #dcdcdc !important;
            box-shadow: none;
            transition: border-color 0.2s, background 0.2s, color 0.2s;
        }
        .sa-account-btn i { color: #0e7c86; font-size: 0.95rem; line-height: 1; }
        .sa-account-btn:hover {
            background: #fff;
            border-color: #0e7c86 !important;
            color: #0e7c86 !important;
        }
        .sa-account-btn.is-email { text-transform: none; letter-spacing: 0.01em; }

        /* --- MAIN GRID AREA STYLES --- */
        .na-header-wrap {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 1rem;
            margin-bottom: 2.5rem;
        }

        .na-eyebrow {
            font-family: 'Jost', sans-serif; 
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: #888;
            margin-bottom: 0.4rem;
            display: block;
            font-weight: 500;
        }

        .na-main-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            color: #222;
            margin: 0;
        }

        /* The h1 now sits under a four-part breadcrumb, so it needs more
           presence to read as the top of the page. Placed after the base rule
           rather than editing it, because that block's own font-size line is
           not unique in this file. */
        .na-main-title { font-size: 1.85rem; }

        .na-view-all {
            font-family: 'Jost', sans-serif;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #333;
            text-decoration: none;
            border-bottom: 1px solid #333;
            padding-bottom: 2px;
            font-weight: 500;
            transition: color 0.2s, border-color 0.2s;
        }

        .na-view-all:hover {
            color: #888;
            border-color: #888;
        }

        .na-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 3.5rem 1.5rem; 
        }

        @media (max-width: 1400px) {
            .na-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 991px) {
            .na-grid { grid-template-columns: repeat(3, 1fr); }
            .sa-sidebar { display: none; } 
        }
        @media (max-width: 768px) {
            .na-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
        }

        .na-card {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            color: #222;
            min-width: 0; 
            height: 100%; 
        }

        .na-media-wrap {
            position: relative;
            margin-bottom: 0.5rem; 
            flex-shrink: 0;
        }

/* 1. The Square Wrapper - Restoring the Boundary */
.na-img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 100%; 
    
    /* THE FIX: A very soft off-white background and a crisp, light grey border */
    background: #f7f7f7;
    border: 1px solid #e6e6e6; 
    
    border-radius: 3px;
    overflow: hidden;
}

/* 2. The Image - Adjusting the breathing room */
.na-img-wrap a img,
.na-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Increased from 4px to 8px so the furniture doesn't scrape against the new border */
    padding: 1px; 
    
    object-fit: contain; 
}

        .na-info-wrap {
            padding-top: 0.2rem; 
            display: flex;
            flex-direction: column;
            flex-grow: 1; 
            background-color: #fdfcf9; 
        }

        .na-dateline-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem; 
        }

        .na-dateline {
            font-family: 'Jost', sans-serif;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #888;
            font-weight: 500;
        }

        .na-save-action {
            font-family: 'Jost', sans-serif;
            font-size: 0.65rem; 
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #2b7a9e; 
            transition: color 0.2s ease, opacity 0.2s ease;
            cursor: pointer;
        }

        .na-save-action:hover {
            color: #003b5c; 
            opacity: 0.6; 
        }

        .na-save-action .saveitdone {
            color: #f1c403; 
        }
        
        .na-save-action:hover .saveitdone {
            opacity: 1;
            color: #f1c403;
        }

        .na-title-group {
            min-height: 4.2em; 
            margin-bottom: 0.2rem;
            display: block;
        }

        .na-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.15rem; 
            color: #111;
            line-height: 1.3;
            margin: 0; 
            padding-bottom: 0.3rem; 
            font-weight: 400;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .na-title a {
            color: inherit;
            text-decoration: none; 
        }

        .na-title a:hover {
            color: #111; 
            text-decoration: underline;
            text-decoration-color: #111; 
            text-underline-offset: 4px; 
            text-decoration-thickness: 1px; 
        }

        .na-shop-name {
            font-family: 'Playfair Display', serif; 
            font-size: 0.78rem; 
            color: #888; 
            margin: 0; 
            display: block; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .na-shop-name a {
            color: #444; 
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .na-shop-name a:hover {
            color: #111; 
            text-decoration: underline;
        }

        .na-price {
            font-family: 'Garamond', 'Georgia', serif; 
            font-size: 1.4rem;
            color: #333; 
            font-weight: 500;
            margin: 0 0 0.8rem 0; 
            letter-spacing: 0.03em;
            display: block; 
        }

        .na-meta-row {
            display: flex;
            justify-content: space-between; 
            align-items: center;
            margin-top: auto; 
        }

        .na-pill {
            display: inline-flex;
            align-items: center;
            background-color: #f7f6f2;
            color: #6b7280; 
            font-family: 'Inter', sans-serif;
            font-size: 0.50rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.35rem 0.5rem;
            font-weight: 500;
            border-radius: 4px; 
            border: 1px solid #f3f4f6; 
        }

        .na-category-link {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.55rem;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .na-category-link:hover {
            color: #111; 
            text-decoration: underline; 
        }



/* --- PQINA TICK COUNTER OVERRIDES --- */
.tick {
  font-size: 0.95rem; 
  white-space: nowrap; 
  font-family: 'Inter', arial, sans-serif;
  font-variant-numeric: tabular-nums; /* Stops the horizontal wobble */
  font-weight: 400; 
}

.tick-flip, .tick-text-inline {
  font-size: 1.5em;
}

.tick-label {
  margin-top: 1em;
  font-size: 1em;
  color: #888888 !important; 
}

.tick-char {
  width: 1.5em;
}

.tick-text-inline {
  display: inline-block;
  text-align: center;
  min-width: 1em;
  color: #ffffff !important; /* White text */
}

.tick-text-inline + .tick-text-inline {
  margin-left: -.325em;
}

.tick-group {
  margin: 0 .5em;
  text-align: center;
}

/* --- THE COLOR UPDATES --- */

.tick-flip-panel {
   color: #ffffff !important; /* White text */
   background-color: #264960 !important; /* Dark blue background */
}

/* A subtle white highlight for the hinge on the dark background */
.tick-flip-panel-front::after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.tick-flip {
   font-family: 'Inter', sans-serif !important; 
   border-radius: 0.17em !important; 
}

.tick-flip-panel-text-wrapper {
   line-height: 1.42 !important; 
}

/* Hide the 'Powered by PQINA' watermark */
.tick-credits {
    display: none !important;
}

    /* --- DRAWER SHELL CSS --- */
    .sa-filter-backdrop {
        position: fixed; inset: 0; background: rgba(0, 20, 35, 0.5); 
        backdrop-filter: blur(4px);
        z-index: 2999; opacity: 0; visibility: hidden; transition: all 0.3s ease; 
    }
    
    .sa-filter-drawer {
        position: fixed; top: 0; left: 0; right: 0; margin: 0 auto;
        width: 100%; max-width: 800px; height: auto; max-height: 90vh; 
        border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background-color: #ffffff;
        z-index: 3000; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 24px 70px rgba(0,0,0,0.12);
        display: flex; flex-direction: column; 
    }
    .sa-filter-backdrop.open { opacity: 1; visibility: visible; }
    .sa-filter-drawer.open { transform: translateY(0); }

    /* --- STICKY HEADER CSS --- */
    .sa-filter-header {
        display: flex; flex-direction: column; align-items: stretch;
        padding: 0.8rem 1.5rem 0.2rem 1.5rem; 
        background: #fff; flex-shrink: 0; 
        z-index: 10;
        
        /* The Fix: A razor-thin border and a very soft, tight shadow */
        border-bottom: 1px solid #f0f0f0; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    }
    
    .sa-header-top-row {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
    }

    .sa-header-left { flex: 1; display: flex; align-items: center; gap: 15px; }
    .sa-header-center { flex: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .sa-header-right { flex: 1; display: flex; justify-content: flex-end; }

    .sa-header-total-count {
        font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #888;
        font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
        display: flex; align-items: center; gap: 8px; /* Changed to center for the mechanical counter */
    }

    .sa-filter-close-icon {
        background: none; border: none; font-size: 2.2rem; color: #999; 
        cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s, transform 0.2s;
    }
    .sa-filter-close-icon:hover { color: #111; transform: scale(1.1); }

.sa-clear-header-btn {
        background-color: #f3f4f6; 
        color: #6b7280; 
        font-family: 'Inter', sans-serif;
        font-size: 0.65rem; 
        font-weight: 600; 
        text-transform: uppercase; 
        cursor: pointer;
        padding: 5px 12px; 
        border-radius: 20px; 
        border: 1px solid #e5e7eb; 
        letter-spacing: 0.05em; 
        transition: all 0.2s ease;
        text-decoration: none; /* Removes the old underline */
    }
    
    .sa-clear-header-btn:hover { 
        background-color: #e5e7eb; 
        color: #003b5c; 
        border-color: #d1d5db;
    }

 /* --- DRAWER ACTIVE TAGS CSS --- */
    .sa-drawer-active-tags-container {
        width: 100%;
        border-top: none; 
        margin-top: 0.5rem; 
        padding-top: 0; 
        padding-bottom: 0.2rem;
        min-height: 42px; /* Reserves the space permanently to stop jumping */
    }
    .sa-drawer-active-tags {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sa-drawer-active-tags::-webkit-scrollbar { display: none; }
    
    .sa-drawer-tag {
        display: inline-flex;
        align-items: center;
        background: #f8f9fa;
        border: 1px solid #e5e7eb;
        border-radius: 30px;
        padding: 6px 14px;
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    
    .sa-drawer-tag-remove {
        background: none;
        border: none;
        font-size: 1.1rem;
        line-height: 1;
        color: #9ca3af;
        margin-left: 8px;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: color 0.2s;
    }
    .sa-drawer-tag-remove:hover { color: #111; }

    /* Scrollable content area */
    .sa-filter-scroll-area {
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 0.5rem 2rem 3rem 2rem; 
    }

    /* --- LAYOUT WRAPPERS (2-Column Grid) --- */
    .sa-modern-filter { margin-bottom: 0.5rem; }
    .sa-modern-filter .sa-filter-main-col {
        display: flex; flex-wrap: wrap; gap: 3rem 0; 
        padding-bottom: 1rem; padding-top: 0.5rem;   
    }
    .sa-price-section { width: 100%; margin-bottom: 1rem; }
    .sa-era-section, .sa-movement-section, .sa-material-section, .sa-origin-section, .sa-region-section, .sa-freshness-section, .sa-purchase-section { 
        width: 100%; 
    }
    
    /* NEW: A wrapper to stack items next to the tall map */
    .sa-right-stacked-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3rem; /* Matches the vertical spacing of the rest of the form */
    }
    
    @media (min-width: 768px) {
        /* LEFT COLUMN ITEMS */
        .sa-era-section, .sa-material-section, .sa-region-section { 
            width: 50%; padding-right: 1.5rem; border-right: 1px solid #eaeaea; 
        }
        /* RIGHT COLUMN ITEMS */
        .sa-movement-section, .sa-origin-section, .sa-right-stacked-col { 
            width: 50%; padding-left: 1.5rem; 
        }
    }

    /* --- INDIVIDUAL SECTION HEADERS --- */
    .sa-filter-section-header {
        display: flex; justify-content: space-between; align-items: center; 
        margin-bottom: 1.5rem;
    }
    
    .sa-filter-section-title {
        font-family: 'Playfair Display', serif; font-size: 1.8rem; 
        font-weight: 400; color: #4b5563; margin: 0; letter-spacing: 0;
    }
    
    .sa-clear-section-btn {
        background-color: #f3f4f6; /* Soft, neutral grey */
        color: #6b7280; /* Muted text */
        font-family: 'Inter', sans-serif;
        font-size: 0.65rem; 
        font-weight: 600; 
        text-transform: uppercase; 
        cursor: pointer;
        padding: 5px 12px; 
        border-radius: 20px; 
        border: 1px solid #e5e7eb; /* Very subtle border to define the edge */
        letter-spacing: 0.05em; 
        transition: all 0.2s ease;
    }
    
    .sa-clear-section-btn:hover { 
        background-color: #e5e7eb; 
        color: #003b5c; /* Turns to your brand blue on hover */
        border-color: #d1d5db;
    }

    /* --- 1. PRICE HISTOGRAM & SLIDER CSS --- */
    .sa-histogram-container {
        display: flex; align-items: flex-end; justify-content: space-between;
        height: 55px; margin: 0 35px 5px 35px; padding: 0;
    }
    .sa-histogram-bar {
        flex: 1; margin: 0 2px; background-color: #f1f3f5; 
        border-radius: 3px 3px 0 0; transition: background-color 0.3s ease;
    }
   .sa-histogram-bar.active { 
    background-color: #4b748c; /* A lighter steel blue to contrast with the dark track */
}

    .sa-slider-track-wrap {
        position: relative; height: 6px; background: #e9ecef; border-radius: 6px;
        margin: 0 35px 45px 35px; /* Increased bottom margin to make room for the dropped pills */
    }
    .sa-slider-progress {
        position: absolute; height: 100%; background: #003b5c; border-radius: 6px; left: 0%; right: 0%;
    }
    .sa-thumb-pill {
        position: absolute; 
        top: 11px; /* 6px track height + 5px gap */
        transform: translateX(-50%); 
        background: #fff; border: 2px solid #003b5c; border-radius: 20px; 
        display: flex; align-items: center; padding: 5px 12px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.12); cursor: grab; z-index: 5;
        user-select: none; transition: top 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, transform 0.2s ease; 
        font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: #111;
    }
    .sa-thumb-pill:active { 
        cursor: grabbing; 
        box-shadow: 0 6px 16px rgba(0,0,0,0.18); 
        transform: translateX(-50%) scale(1.05); 
    }
    .sa-thumb-pill.shift-up { 
        top: -38px; /* Shifts the pill to sit 5px ABOVE the track when they overlap */
        z-index: 6; 
    }
    .sa-thumb-pill .currency { color: #888; margin-right: 4px; font-weight: 500; }
    

    /* --- 2. ELEGANT CHECKMARK CARDS CSS --- */
    .sa-era-card-grid {
        display: grid; grid-template-columns: repeat(2, 1fr); 
        gap: 10px; padding: 0;
    }
    
    .sa-category-card-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); 
        gap: 10px; padding: 0; width: 100%;
    }
    
    @media (max-width: 768px) {
        .sa-category-card-grid { grid-template-columns: repeat(2, 1fr); }
    }
    
    @media (max-width: 500px) {
        .sa-era-card-grid { grid-template-columns: 1fr; }
        .sa-category-card-grid { grid-template-columns: 1fr; }
    }
    
    .sa-era-card-item { position: relative; }
    .sa-era-card-item input[type="checkbox"],
    .sa-era-card-item input[type="radio"] { display: none; }
    
    .sa-era-card-item label {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 12px; 
        border: 1px solid transparent; border-radius: 2px; 
        background: #e5e7eb; 
        cursor: pointer; 
        font-family: 'Inter', sans-serif; 
        font-size: 0.65rem; 
        font-weight: 600; 
        text-transform: uppercase; 
        letter-spacing: 0.1em; 
        color: #4a5568; 
        transition: all 0.2s ease; margin: 0; user-select: none; height: 100%;
    }
    
    .sa-era-card-item label:hover { 
        background: #d1d5db; 
    }
    
    .sa-era-card-item input[type="checkbox"]:checked + label,
    .sa-era-card-item input[type="radio"]:checked + label {
        background: #ffffff; 
        color: #111; 
        font-weight: 700; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
        border: 1px solid #eaeaea;
    }

    .sa-era-card-item label::after {
        content: '\2713';
        font-size: 1rem; 
        color: #cda34f;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        transform: scale(0.5);
    }
    
    .sa-era-card-item input[type="checkbox"]:checked + label::after,
    .sa-era-card-item input[type="radio"]:checked + label::after {
        opacity: 1;
        transform: scale(1);
    }

    /* --- 3. ONLINE PAYMENTS TOGGLE CSS --- */
    .sa-purchase-card {
        border: 1px solid #eaeaea; border-radius: 2px; padding: 1.2rem 1.5rem;
        cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 1.2rem;
        background: #f9fbfc; margin: 0; user-select: none; max-width: 500px;
    }
    .sa-purchase-card:hover { background: #f3f4f6; }
    .sa-purchase-card input[type="checkbox"] {
        width: 24px; height: 24px; accent-color: #003b5c; cursor: pointer; margin: 0; flex-shrink: 0;
    }
    .sa-purchase-card:has(input:checked) {
        background: #ffffff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-color: #eaeaea;
    }
    .sa-purchase-details { flex: 1; }
    .sa-purchase-title { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 400; color: #374151; margin-bottom: 0.5rem; line-height: 1.2;}
    .sa-purchase-icons { display: flex; gap: 12px; align-items: center; color: #555; font-size: 1.4rem; }
    
    .sa-pay-badge {
        font-size: 0.65rem; font-weight: 700; border: 1px solid #ccc; border-radius: 4px; 
        padding: 3px 6px; display: inline-flex; align-items: center; height: 20px; line-height: 1; font-family: -apple-system, sans-serif; color: #444; background: #fff;
    }

    /* --- ACTION BUTTONS --- */
    .sa-apply-filter-btn {
        background: #003b5c; color: #fff; border: none; 
        padding: 14px 36px; border-radius: 4px; font-size: 0.95rem; font-weight: 600; 
        text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; 
        transition: all 0.2s; font-family: 'Inter', sans-serif;
    }
    .sa-apply-filter-btn:hover { background: #002b44; }
    
  .sa-apply-filter-btn-sm {
        background-color: #059669; /* Vibrant, sophisticated grass green */
        color: #fff; 
        border: none; 
        padding: 0 24px; 
        height: 42px; /* Matches the visual height of the flip counter */
        border-radius: 4px; /* Matches the counter cards */
        font-size: 0.85rem; 
        font-weight: 700; 
        text-transform: uppercase; 
        letter-spacing: 0.05em; 
        cursor: pointer; 
        transition: all 0.2s ease; 
        font-family: 'Inter', sans-serif;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Matches the mechanical card shadow */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sa-apply-filter-btn-sm:hover { 
        background-color: #047857; /* Slightly darker green on hover */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transform: translateY(-1px);
    }

.sa-current-filters-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af; /* Matches your subtle grey UI tones */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
    white-space: nowrap;
    user-select: none;
}

.sa-map-container {
        /* 1. CRITICAL: Make the dark grey container width flexible */
        width: 100%; 
        
        /* 2. CRITICAL: Force the dark grey container height to hug the map exactly, removing all empty space */
        height: auto; 
        
        background: #2b2b2b;
        border: 1px solid #1a1a1a;
        border-radius: 8px;
        
        /* 3. OPTIONAL: The "Room to Breathe" padding. Shrink this to let the map grow larger, increase it to squeeze it smaller symetrically. */
        padding: 0.5rem; 
        
        margin-bottom: 1.5rem;
    }
    
    .sa-map-svg {
        /* 4. CRITICAL: Force the map include itself to scale up and fill the horizontal space of the container */
        width: 100%; 
        
        max-width: 480px; /* This is the pixel cap you set, which is fine! */
        height: auto; /* Proportional scaling */
        
        /* 5. CRITICAL: Force the map to horizontally center itself inside the container */
        display: block;
        margin: auto; 
        
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
        overflow: visible;
    }

    
    
    /* Default State */
    .sa-region-path path,
    .sa-region-path circle,
    .sa-region-path { /* added fallback in case you apply it directly to a path instead of a group */
        fill: #c19c67; /* Standard Gold */
        stroke: #2b2b2b; /* Dark borders between counties */
        stroke-width: 1px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    /* Hover state */
    .sa-region-path:hover path,
    .sa-region-path:hover circle,
    .sa-region-path:hover {
        fill: #e0b87c; /* Bright Hover Gold */
        transform: translateY(-2px);
    }
    
    /* Active/Clicked State */
    .sa-region-path.active path,
    .sa-region-path.active circle,
    .sa-region-path.active {
        fill: #e0b87c; /* Keep Bright Gold when active */
        filter: drop-shadow(0 0 8px rgba(224, 184, 124, 0.4)); /* Soft glow */
    }

/* The Main Hub Container */
.sa-omnibox-dropdown {
    position: absolute;
    top: 100%;       /* Positions it directly below the search bar */
    left: 0;         /* Aligns it to the left edge of the search bar */
    
    /* The resizing magic */
    min-width: 100%;     /* Ensures it is never narrower than the search bar */
    width: max-content;  /* Forces the dropdown to stretch to fit the longest line of text */
    
    /* Add a max-width just in case a dealer types an insanely long keyword */
    max-width: 800px;    
    
    /* Ensure it sits on top of everything else */
    z-index: 1050;       
}

/* The Individual Columns */
.sa-omni-col {
    flex: 1; /* Splits the space 50/50 */
    overflow-y: auto;
    padding: 20px 0;
}

/* The Right Column Styling (Swapped) */
.sa-omni-col-right {
    background: #fbfbfb; /* Very subtle contrast */
    border-left: 1px solid #eaeaea;
}

/* Section Headers (Updated Color) */
.sa-omni-section-header {
    font-size: 0.65rem;
    font-weight: 700;
    color: #266b8a; /* A warm, subtle antique bronze */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 20px 8px 20px;
}
/* Suggestion Rows (Tightened Spacing) */
.sa-omnibox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px; /* Reduced to bring lines closer together */
    text-decoration: none;
    color: #222;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.sa-omnibox-item:hover, .sa-omnibox-item.active {
    background-color: #f0f0f0;
}

.sa-omni-col-right .sa-omnibox-item:hover {
    background-color: #ededed; /* Slightly darker hover for the grey column */
}

/* Subtle Hover Arrow */
.sa-omni-arrow {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s ease;
    color: #aaa;
    font-size: 0.8rem;
}
.sa-omnibox-item:hover .sa-omni-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Color-Based Highlight Logic (No Bolding) */
.sa-omni-text { 
    font-weight: 400; 
    color: #767676; /* Soft, lighter grey for the suggested text */
    text-transform: capitalize; 
}

.sa-omni-match { 
    font-weight: 400; 
    color: #222; /* Crisp, darker grey for the typed letters */
}


/* Mobile Fallback: Stack the columns */
@media (max-width: 991px) {
    .sa-omnibox-dropdown { flex-direction: column; overflow-y: auto; }
    .sa-omni-col { overflow-y: visible; padding: 15px 0; }
    .sa-omni-col-right { border-left: none; border-top: 1px solid #eaeaea; }
}




/* The Cinematic Lightbox Backdrop (Ultra-Subtle) */
.sa-search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.12); /* Dropped from 40% to 12% darkness */
    z-index: 9998; /* Sits just behind the search bar (which is 9999) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease; /* Slightly slower, smoother fade */
}

/* The class our JS will add to turn the lights out */
.sa-search-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* The Main Hub Container (Softened Shadow) */
.sa-omnibox-dropdown {
    position: absolute;
    top: calc(100% + 8px); 
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #eaeaea; 
    border-radius: 12px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.06); /* Extremely soft, diffused 6% shadow */
    z-index: 9999;
    display: flex; 
    max-height: 480px;
    overflow: hidden; 
    font-family: 'Inter', sans-serif;
}


/* --- MOBILE OPTIMIZATIONS (Under 576px) --- */
@media (max-width: 575px) {
    /* 1. Force Two-Column Grid */
    .na-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem 0.75rem; /* Tighter horizontal gap (0.75rem) to maximize image size */
        padding: 0 10px; 
    }

    /* 2. Touch Targets (Slightly reduced margin to fit the narrower column) */
    .na-save-action,
    .dateline-trigger,
    .price-trigger {
        padding: 10px; 
        margin: -10px; 
        display: inline-block; 
    }

    /* 3. Typography Adjustments for Narrower Columns */
    .na-title {
        font-size: 0.95rem; /* Scaled down to prevent excessive line wrapping */
        line-height: 1.3;
    }
    
    .na-price {
        font-size: 1.2rem; /* Adjusted for the 2-column layout */
        margin-bottom: 0.4rem;
    }

    /* 4. Meta row and labels scaling */
    .na-dateline {
        font-size: 0.55rem;
    }
    
    .na-save-action {
        font-size: 0.55rem;
    }

    .na-img-wrap {
        border-radius: 4px; 
        padding: 2%; /* slightly less padding inside the image box to maximize image area */
    }
}


/* --- MOBILE FILTER HEADER FIXES (2-ROW STACK) --- */
@media (max-width: 575px) {
    
    .sa-filter-header {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 1. Let the top row break cleanly into two lines */
    .sa-header-top-row {
        flex-wrap: wrap; 
        gap: 12px 0 !important; /* Adds vertical breathing room between the two rows */
    }

    /* 2. Row 1: Close Icon (Left) & Clear All (Right) */
    .sa-header-left {
        flex: 0 0 100%; 
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 3. Row 2: Counter (Left) & Show Results (Right) */
    .sa-header-center {
        flex: 0 0 50%;
        align-items: flex-start;
    }
    
    .sa-header-right {
        flex: 0 0 50%;
        justify-content: flex-end;
    }

    /* 4. Restore safe touch target sizes now that we have room! */
    .sa-clear-header-btn, 
    .sa-apply-filter-btn-sm {
        padding: 0 16px !important; 
        font-size: 0.75rem !important;  
        min-height: 44px !important;
    }

    /* 5. Hide the word "items" to keep the counter clean */
    .sa-header-total-count > span {
        display: none !important; 
    }
    
    /* 6. Scale the flip counter neatly */
    .sa-header-total-count .tick {
        transform: scale(0.95);
        transform-origin: left center;
        margin: 0 !important;
    }
}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ==========================================
   MOBILE APP BAR STYLES (BOOTSTRAP 5)
   ========================================== */
.sa-mobile-top-bar {
    background-color: #003b5c; 
    height: 62px; /* Increased from 56px to give the larger elements room to breathe */
    position: sticky;
    top: 0;
    z-index: 1060; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.sa-badge-danger {
    background-color: #dc3545;
    font-size: 0.55rem;
    padding: 0.35em 0.5em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border: 1px solid #2A415D; 
    line-height: 1;
}

/* ==========================================
   STAGGERED MENU DRAWER STYLES
   ========================================== */
.sa-drawer-bg-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.sa-staggered-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.sa-stag-card {
    border: 1px solid #e9ecef;
    background-color: #ffffff;
    text-decoration: none;
    color: #112233;
    transition: all 0.2s ease-in-out;
}

.sa-stag-card:hover {
    border-color: #112233;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sa-stag-home {
    grid-row: span 2;
    border-color: #112233;
    background-color: #f8f9fa;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.sa-stag-catalog {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sa-stag-rare {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sa-stag-new {
    grid-column: span 2;
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-playfair {
    font-family: 'Playfair Display', Georgia, serif;
}




/* ==========================================
   MOBILE TOUCH TARGET OPTIMIZATIONS (44px Rule)
   ========================================== */
@media (max-width: 991px) {
    
    /* 1. Mini Pagination Arrows */
    .mini-page-btn {
        min-width: 44px !important; /* Bumped up from 32px */
        height: 44px !important;
        font-size: 1.1rem; /* Slightly larger arrows for visual balance */
    }

    /* 2. Invisible Hitbox for Filter 'X' Tags */
    .sa-filter-remove {
        position: relative;
    }
    .sa-filter-remove::after {
        content: '';
        position: absolute;
        /* Creates an invisible 20px buffer around the tiny X */
        top: -15px; right: -15px; bottom: -15px; left: -15px; 
    }

    /* 3. Undo the "Ultra-Tight" Squeeze on Filter Action Buttons */
    .sa-clear-header-btn, 
    .sa-apply-filter-btn-sm {
        min-height: 44px !important; /* Forces the safe touch height */
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 0.75rem !important; /* Slightly more readable than 0.55rem */
    }
    
    /* 4. Filter Clear Text Link (Give it room to breathe) */
    .sa-clear-all-filters {
        padding: 10px;
        margin: -10px; /* Expands hit area without moving the text */
        display: inline-block;
    }
}


/* Maximize Filter Drawer Tap Targets */
.sa-filter-close-icon {
    font-size: 2.8rem !important; /* Huge tap target for the main close 'X' */
}
.sa-drawer-tag-remove {
    font-size: 1.4rem !important; /* Larger 'X' on the active filter tags */
}




/* ==========================================
   THEME PAGE: TRUE MASONRY (Refined Proportions)
   ========================================== */
.sa-masonry-item {
    margin-bottom: 2.5rem; /* The vertical space between products */
}

/* Naked Cards - Removes the white box */
.sa-masonry-item .na-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.sa-masonry-item .na-img-wrap {
    border-radius: 4px;
    overflow: hidden;
    background-color: #f8f9fa;
    width: 100%;
    position: relative;
}

/* 1. Standard Items: Elegant Portrait Crop */
.sa-masonry-item .aspect-portrait {
    aspect-ratio: 4 / 5;
}

/* 2. Hero Items: Cinematic Landscape (FIXES THE GIANT HEIGHT ISSUE) */
.sa-masonry-item .aspect-landscape {
    aspect-ratio: 3 / 2;
}

/* Force images to fill the box smoothly */
.sa-masonry-item .na-img-wrap img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sa-masonry-item .na-card:hover .na-img-wrap img {
    transform: scale(1.05); 
}

/* Text sits naked below the image */
.sa-masonry-item .na-info-wrap {
    padding: 1rem 0 0 0 !important;
    background-color: transparent !important;
}

/* Enhance Hero Typography (Toned down to match the aesthetic) */
.sa-masonry-hero .na-title { font-size: 1.4rem; line-height: 1.3; margin: 0.25rem 0; }
.sa-masonry-hero .na-price { font-size: 1.3rem; }

@media (max-width: 768px) {
    .sa-masonry-hero .na-title { font-size: 1.2rem; }
    .sa-masonry-item .aspect-landscape { aspect-ratio: 16 / 9; } /* Slightly wider on mobile */
}



/* ==========================================
   EDITORIAL TYPOGRAPHY & DESCRIPTION CLAMP
   ========================================== */
/* The top dateline/save row */
.sa-editorial-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #444;
    margin-bottom: 1.2rem;
}

/* The elegant Serif Title */
.sa-bento-card .na-title { 
    font-family: 'Playfair Display', serif; 
    font-weight: 400; /* Lighter weight for print feel */
    margin-bottom: 0.5rem; 
}

/* The Shop Name */
.sa-bento-card .na-shop-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
    display: block;
}

.sa-bento-card .na-shop-name a {
    color: #0056b3; /* The blue link color from your screenshot */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* NEW: The Truncated Description */
.sa-bento-card .na-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
    
    /* Safely clamps the text to exactly 2 lines with an ellipsis (...) */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The bottom Price / Badge row */
.sa-editorial-bottom {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-top: auto; 
}



/* ==========================================
       TOP NAV INTEGRATED FILTER BUTTON
       ========================================== */
    .sa-top-filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #4a5568; /* Subtle grey */
        border: none;
        border-left: 1px solid #eaeaea; /* Separator line between input and filter */
        padding: 0 16px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        position: relative;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .sa-top-filter-btn:hover {
        color: #1b3b5a; /* Brand Blue */
        background-color: #f8f9fa;
    }

    .sa-top-filter-badge {
        background-color: #dc3545; /* Red alert badge */
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        margin-left: 6px;
    }

    /* ==========================================
       TOP NAV INTEGRATED FILTER & SEARCH BAR
       ========================================== */
    .sa-search-wrap-v3-new {
        display: flex;
        width: 100%;
        background-color: #ffffff;
        border-radius: 4px;
        padding: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        height: 52px; /* Fixed height for consistent look */
    }

    /* Left Half: Search Input */
    .sa-search-input-group {
        width: 50%;
        display: flex;
        align-items: center;
    }

    .sa-search-input-group input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        padding: 0 16px;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        color: #333;
    }

    /* Right Half: Filter Button + Submit Button */
    .sa-filter-btn-group {
        width: 50%;
        display: flex;
        align-items: stretch;
        border-left: 1px solid #eaeaea; /* Vertical Divider */
    }

    .sa-top-filter-btn {
        flex-grow: 1; /* Takes up all remaining space in the right half */
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #4a5568;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .sa-top-filter-btn:hover {
        background-color: #f8f9fa;
        color: #003b5c;
    }

    .sa-top-filter-badge {
        background-color: #dc3545; /* Red alert badge */
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        margin-left: 6px;
    }

    /* The Blue Checkmark Submit Button */
    .sa-search-submit-btn {
        background-color: #3182a4; /* Matches mockup blue */
        color: #ffffff;
        border: none;
        border-radius: 4px;
        width: 60px; /* Fixed width for the submit button */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .sa-search-submit-btn:hover {
        background-color: #266a87;
    }

    /* ==========================================
       ACTIVE FILTER TAGS (Beneath the Bar)
       ========================================== */
    .sa-top-active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end; /* Forces tags to align under the right 50% */
        padding-top: 10px;
    }

    .sa-top-filter-tag {
        background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white pill */
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.02em;
    }

    .sa-top-filter-remove {
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 14px;
        line-height: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .sa-top-filter-remove:hover {
        opacity: 1;
    }



/* ==========================================
       TOP NAV: THE TWO-PIECE DESIGN
       ========================================== */
    
    /* 1. The Portal (Keyword Input & Tags) */
    .sa-portal-container:focus-within {
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }

    .sa-search-submit-btn {
        background: transparent;
        border: none;
        height: 100%;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .sa-search-submit-btn:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    /* 2. The Inline Tags */
    .sa-portal-tag {
        background-color: #f1f3f5; /* Subtle light grey */
        border: 1px solid #e9ecef;
        color: #495057;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.02em;
    }

    .sa-portal-tag-remove {
        background: transparent;
        border: none;
        color: #495057;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
    }

    .sa-portal-tag-remove:hover {
        opacity: 1;
    }

    /* 3. The Mega Filter Button (Contrasting Block) */
    .sa-mega-filter-btn {
        height: 56px;
        background-color: #ffffff;
        color: #003b5c; /* Brand blue text */
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 6px;
        padding: 0 24px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
    }

    .sa-mega-filter-btn:hover {
        background-color: #f8f9fa;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        transform: translateY(-1px);
    }

    /* The floating red badge on the Mega Filter Button */
    .sa-mega-filter-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: #dc3545; /* Red alert */
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        min-width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        box-shadow: 0 2px 6px rgba(220,53,69,0.4);
        border: 2px solid #ffffff; /* White stroke so it pops off the button edge */
    }



    /* ==========================================
       TOP NAV: CORAL MEGA BUTTON & PORTAL
       ========================================== */
    
    /* 1. The Keyword Portal */
    .sa-portal-container:focus-within {
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }

    .sa-search-submit-btn {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .sa-search-submit-btn:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    /* 2. The Coral Mega Filter Button */
    .sa-mega-filter-btn {
        height: 48px; /* Less high */
        background: linear-gradient(135deg, #ff6b6b, #f04e4c); /* Vibrant coral red gradient */
        color: #ffffff;
        border: none;
        border-radius: 10px; /* Slightly softer corners to match image */
        padding: 0 16px 0 8px; /* Asymmetric padding to account for the icon box */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(240, 78, 76, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .sa-mega-filter-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(240, 78, 76, 0.4);
    }

    /* Translucent Icon Box Inside Button */
    .sa-mega-icon-wrap {
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
    }

    /* Typography inside the button */
    .sa-mega-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
    }

    .sa-mega-text-sub {
        font-family: 'Inter', sans-serif;
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        opacity: 0.85;
        line-height: 1;
        margin-bottom: 2px;
    }

    .sa-mega-text-main {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
    }

    /* Floating Counter Badge */
    .sa-mega-filter-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: #111111; /* Dark badge to contrast the red */
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        min-width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    /* 3. Tags Beneath the Button */
    .sa-portal-tag {
        background-color: #ffffff; 
        border: 1px solid #dee2e6;
        color: #495057;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    .sa-portal-tag-remove {
        background: transparent;
        border: none;
        color: #adb5bd;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .sa-portal-tag-remove:hover {
        color: #dc3545; /* Turns red on hover to indicate removal */
    }


/* ==========================================
       TOP NAV: SEARCH BAR
       ========================================== */
    .sa-portal-container:focus-within {
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }
    .sa-search-submit-btn {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .sa-search-submit-btn:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    /* ==========================================
       TOP NAV: OVERLAPPING FILTER PILLS
       ========================================== */
    
    /* The outer container holding everything */
.sa-filter-pill-wrapper {
    padding: 0 !important; /* Removes the thick, bloated dark space */
    border: 2px solid #152d46; /* Adjust hex to match your exact search border color */
    border-radius: 40px; /* Ensures the outer wrapper stays perfectly round */
    overflow: hidden; 
}
    .sa-filter-pill-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* ==========================================
       TOP NAV: OVERLAPPING FILTER PILLS
       ========================================== */
       
    /* The main Coral FILTERS button (Always Top Layer) */
   /* The main Coral FILTERS button (Always Top Layer) */
    .sa-pill-filter-btn {
        background: linear-gradient(135deg, #ff6b6b, #f04e4c);
        color: #ffffff;
        border: none;
        border-radius: 40px;
        height: 40px;
        padding: 0 20px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        position: relative;
        z-index: 100 !important;
        
        /* THE FIX: Changed the blur to 0px to create a solid 2px line */
        box-shadow: 2px 0 0px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(255,255,255,0.15);        
        
        flex-shrink: 0;
        transition: filter 0.2s ease;
    }

    .sa-pill-filter-btn:hover {
        filter: brightness(1.1);
    }

    /* The sliding Tags */
    .sa-pill-tag {
        background-color: #2b3648; /* Slate blue */
        color: #ffffff;
        height: 40px;
        border-radius: 40px;
        display: inline-flex;
        align-items: center;
        
        /* THE FIX: Deeper tuck, more padding to compensate */
        margin-left: -24px; /* Pulls the tag deeply under the element to its left */
        padding: 0 16px 0 36px; /* Extra left padding so text doesn't get covered */
        
        /* THE FIX: Heavy directional shadow and a micro edge-highlight */
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4); 
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-left: 1px solid rgba(255, 255, 255, 0.04);
        
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: relative;
        flex-shrink: 0;
        white-space: nowrap;
        transition: background-color 0.2s ease;
    }



/* ==========================================
       TAB CASCADING GRADIENT (Refined Steps)
       ========================================== */
       
    /* 1st Tab (Safely separated from the dark background) */
    .sa-pill-tag:nth-of-type(1) { background-color: #2a374c; }
    
    /* 2nd Tab */
    .sa-pill-tag:nth-of-type(2) { background-color: #314058; }
    
    /* 3rd Tab */
    .sa-pill-tag:nth-of-type(3) { background-color: #384964; }
    
    /* 4th Tab */
    .sa-pill-tag:nth-of-type(4) { background-color: #3f5270; }
    
    /* 5th Tab */
    .sa-pill-tag:nth-of-type(5) { background-color: #465a7c; }
    
    /* 6th Tab and beyond */
    .sa-pill-tag:nth-of-type(n+6) { background-color: #4d6388; }

    /* Universal Hover: Just brightens the existing color mathematically */
    .sa-pill-tag:hover {
        filter: brightness(1.15);
    }


    /* Tiny clear button inside the tag */
    .sa-pill-remove {
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.4);
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
        margin-left: 8px;
        padding: 0;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .sa-pill-remove:hover {
        color: #ff6b6b;
    }


/* ==========================================
       TOP NAV: PILL BADGE COUNTER
       ========================================== */
    .sa-pill-badge {
        position: absolute; 
        
        /* THE FIX: Tucked down slightly to clear the invisible scroll ceiling */
        top: -2px;          
        right: -4px;        
        
        background-color: #ffffff; 
        color: #121826;            
        
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 800;
        height: 20px;
        min-width: 20px;
        border-radius: 50%; 
        
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        
        border: 2px solid #121826; 
        z-index: 10;
    }




/* ==========================================
       TOP NAV: DARK SEARCH PORTAL
       ========================================== */
    
/* 1. The Outer Dark Wrapper */
.sa-search-portal-wrapper {
    display: flex;
    align-items: center;
    background-color: #121826; 
    border-radius: 40px;
    padding: 2px 2px 2px 16px; 
    
    /* THE FIX: Changed to 'none' to remove the grey ring */
    border: none; 
    
    transition: all 0.2s ease;
    width: 100%;
    max-width: 380px; 
}

/* 2. Update the focus state so it doesn't try to change a non-existent border */
.sa-search-portal-wrapper:focus-within {
    /* Replaces the old border-color with a subtle glowing ring using box-shadow */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

    /* 2. The Input Field */
    #sa-search-input {
        border: none;
        outline: none;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        color: #ffffff;
        width: 100%;
        padding: 0 16px 0 20px;
    }

#sa-search-input::placeholder {
        /* THE FIX: Increased opacity from 0.35 to 0.65 for much better contrast */
        color: rgba(255, 255, 255, 0.65); 
    }

/* 3. The Nested Blue Submit Button */
    .sa-search-submit-btn {
        background-color: #5e9cd1; 
        color: #ffffff;            
        border-radius: 40px;
        
        /* THE FIX: 40px tall, NO border. Letting the pure blue fill the entire height. */
        height: 40px;              
        margin: 0;  
        border: none; 
        
        width: auto; 
        padding: 0 24px;    
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;          
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        flex-shrink: 0;
        
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .sa-search-submit-btn:hover {
        background-color: #6eb0e5; 
        transform: scale(1.02);
    }



/* 1. Set the starting width and the transition curve */
.sa-search-portal-wrapper {
    width: 350px; /* Your compact starting size */

}



/* 3. Ensure the input inside stretches to fill the animating wrapper */
#sa-search-input {
    width: 100%;
    /* Keep your existing background, border, and padding here */
}



/* 1. Protect the Right-Side Icons from being pushed off-screen */
.sa-icons-v3 {
    flex-shrink: 0;
}

/* 2. Protect the Left-Side Logo */
.sa-brand-v3 {
    flex-shrink: 0;
}

/* 3. Protect the Search Bar from being squished by the expanding tags */
.sa-search-portal-wrapper {
    flex-shrink: 0;
}




.sa-filter-glow-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Slightly larger to give the number breathing room without a border */
    width: 24px; 
    height: 24px;
    
    /* A soft curve (squircle) pairs better with the main pill shape */
    border-radius: 6px; 
    
    /* THE FIX: Remove the border, add the dark recessed background */
    border: none;
    background-color: rgba(0, 0, 0, 0.15); 
    
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    margin-right: 8px; /* Slightly more space between the number and text */
}




.na-img-wrap img {
    width: 100%;
    height: 100%;
    /* Default to safe bounding box for tall/wide items */
    object-fit: contain; 
    transition: object-fit 0.2s ease;
}

/* The class we will inject via JS for almost-square images */
.na-img-expand {
    object-fit: cover !important;
}




/* ==========================================
   SWIPEABLE TAG TRACK
   ========================================== */
.na-tag-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    
    margin-left: -25px; /* Keeps the tuck */
    padding-left: 25px; 
    
    /* THE FIX: Set vertical padding to 0 so the border snaps tight */
    padding-top: 0;
    padding-bottom: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.na-tag-track::-webkit-scrollbar {
    display: none;
}
/* Prevent the individual tags from shrinking when the track gets full */
.na-tag-track .sa-pill-tag {
    flex-shrink: 0;
    margin-bottom: 0 !important; /* Forces them to stay perfectly vertically aligned */
}





/* ==========================================
   MOBILE GRID IMAGE FIX (Anti-Collapse)
   ========================================== */
@media (max-width: 991px) {
    /* 1. Create an iron-clad structural frame */
    .na-img-wrap {
        width: 100%;
        aspect-ratio: 1 / 1; /* Forces a perfect square container */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #f8f9fa; /* Subtle grey background while loading */
        border-radius: 6px 6px 0 0; /* Keeps the top edges smooth */
    }

    /* 2. Default state: Safely contain tall/wide items without cropping */
    .na-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain; 
    }

    /* 3. Smart Fit state: Let the "almost square" items fill the frame perfectly! */
    .na-img-wrap img.na-img-expand {
        object-fit: cover; 
    }
}

/* ============================================================
   Rail on paper rather than navy. The bar sits at #f5f3ee against
   the page's #fdfcf9 - a deliberate step down, so the two surfaces
   read as distinct without introducing a new colour. Pills go white
   and take a hairline border, since fill alone no longer separates
   them from the bar. Appended last so it wins on source order.
   ============================================================ */
.sa-browse-rail .sa-pill-cat-btn,
.sa-browse-rail .sa-pill-filter-btn,
.sa-browse-rail .sa-pill-sort-btn,
.sa-browse-rail .sa-pill-links-btn,
.sa-browse-rail .sa-pill-latest-btn,
.sa-browse-rail .sa-pill-account-btn,
.sa-browse-rail .sa-pill-perpage-btn{
    height: 34px;
    padding: 0 13px;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .05em;
    background: #ffffff;
    color: #02486d;
    border: 1px solid #dcd7cb;
    box-shadow: none;
}
.sa-browse-rail .sa-pill-cat-btn:active,
.sa-browse-rail .sa-pill-filter-btn:active,
.sa-browse-rail .sa-pill-sort-btn:active,
.sa-browse-rail .sa-pill-links-btn:active,
.sa-browse-rail .sa-pill-latest-btn:active,
.sa-browse-rail .sa-pill-account-btn:active,
.sa-browse-rail .sa-pill-perpage-btn:active{ background: #efece4; }

/* ============================================================
   Mobile browse bar: FILTERS leads the row and is the one pill
   with colour, so a phone visitor sees the way to narrow 65,000
   pieces before anything else. Order only: the markup is untouched.
   ============================================================ */
.sa-browse-rail .sa-filter-pill-wrapper{ order: -1; }
.sa-browse-rail .sa-pill-filter-btn{
    background: #35a754;
    color: #ffffff;
    border-color: #7cc690;
    box-shadow: 0 1px 3px rgba(53,167,84,0.35);
}
.sa-browse-rail .sa-pill-filter-btn:active{ background: #2b8a45; }
.sa-browse-rail .sa-filter-glow-count{
    background-color: #ffffff !important;
    color: #35a754 !important;
}
.sa-browse-rail .sa-filter-glow-count.sa-unused-safety{ background-color: #ffffff; color: #2b8a45; }

/* the two new pills need the base shape the others get from their own rules */
.sa-pill-latest-btn,
.sa-pill-account-btn,
.sa-pill-perpage-btn{
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.sa-pill-latest-btn:hover{ color: #02486d; }
/* Same teal accent as the desktop account button, and the address stays
   lowercase - the other pills are uppercase labels, an email is not a label. */
.sa-pill-account-btn i{ color: #0e7c86; font-size: 13px; line-height: 1; }
.sa-pill-account-btn.is-email{ text-transform: none; letter-spacing: .01em; }

/* 6 Oct 2026: on mobile FILTERS goes white like every other pill on the
   rail, undoing the green block above; the count badge turns navy so it
   still shows against white. */
.sa-browse-rail .sa-pill-filter-btn{
    background: #ffffff;
    color: #02486d;
    border-color: #dcd7cb;
    box-shadow: none;
}
.sa-browse-rail .sa-pill-filter-btn:active{ background: #efece4; }
.sa-browse-rail .sa-filter-glow-count{
    background-color: #02486d !important;
    color: #ffffff !important;
}

/* the filter wrapper sizes itself from its button */
.sa-browse-rail .sa-filter-pill-wrapper{ height: 34px; border: none; }

/* the active-filter count was navy-on-white and still is - it just needs
   to stay legible now the surrounding bar is light rather than dark */
.sa-browse-rail .sa-filter-glow-count{
    background-color: #02486d;
    color: #ffffff;
}


/* ============================================================
   LETTERBOX EDGE EXTENSION
   Two layers, one per side. Each takes a narrow strip from the very
   edge of the photo and stretches only that outward - so the band is a
   continuation of whatever the photo has at that edge, at the correct
   height. Sky stays at the top of the band, ground at the bottom.
   The centre is never stretched because the sharp image sits over it.
   background-size: 2000% makes the image twenty times its box, so
   background-position: left shows only the leftmost 5% of it.
   ============================================================ */
.na-img-wrap::before,
.na-img-wrap::after{
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    width: 55%;
    background-image: var(--thumb);
    background-repeat: no-repeat;
    background-size: 2000% 100%;      /* 20x wide, full height - vertical layout kept */
    filter: blur(18px) saturate(.95);
    opacity: .30;
    z-index: 0;
}
.na-img-wrap::before{ left: -6%;  background-position: left center; }
.na-img-wrap::after { right: -6%; background-position: right center; }

/* the base rule already sets position:absolute, which the square tile
   depends on - only lift the stacking order, never the positioning */
.na-img-wrap img{ z-index: 1; }

/* Desktop tiles are 224px against mobile's 160px, so the same radius reads
   as noticeably sharper. Scale the blur with the tile to keep the softness
   looking the same at both sizes. */
@media (min-width: 992px){
    .na-img-wrap::before,
    .na-img-wrap::after{ filter: blur(25px) saturate(.95); }
}




/* ============================================================
   MOBILE CARD TIGHTENING
   ============================================================ */
@media (max-width: 991px){

    /* -webkit-line-clamp lets the clipped line bleed into the element's own
       padding, which is the sliver of line 3 showing under the title. Margin
       sits outside the overflow box, so the same spacing without the leak. */
    .na-title{
        padding-bottom: 0;
        margin-bottom: 0.3rem;
    }

    /* the price carried 10px of bottom padding plus 6px of margin - about 16px
       of visual gap before the time-ago pill. Keep the top padding, which is
       cancelled by a -10px top margin and appears to be deliberate. */
    .na-price{
        padding-bottom: 0;
        margin-bottom: 0.20rem;
    }
}


/* ==========================================
   PRINT (11 Oct 2026)
   Chrome prints every position:fixed box on every page, and the two
   top drawers (filter, info) are only hidden on screen by a
   translateY(-100%), so a printed category page showed the drawer on
   all eleven pages. On paper only the heading, the guide text and the
   item tiles are wanted; the rest is screen furniture and is removed.
   ========================================== */
@media print {
    .sa-filter-backdrop, .sa-filter-drawer,
    .sa-drawer-backdrop, .sa-info-drawer,
    .sa-msearch-overlay, .sa-search-backdrop, #sa-search-backdrop,
    #sa-detail-lightbox, .sa-glass-modal, .sa-v8-gallery-modal,
    #saVideoLightbox, #saMobilePhotoTour, #saSinglePhotoTour,
    .sa-header-v3, .sa-mobile-top-bar,
    .sa-sidebar, .sa-l3-nav,
    .sa-mini-pagination, .sa-pagination-wrap,
    .sa-stat-ticker, .site-footer-v3,
    .na-save-action {
        display: none !important;
    }
    html, body { background: #fff !important; }
    .container { max-width: none !important; width: 100% !important; padding: 0 !important; }
    .col-lg-9 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    .na-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem 1rem !important; padding: 0 !important; }
    .na-card { break-inside: avoid; page-break-inside: avoid; }
    a, a:visited { color: #222 !important; text-decoration: none !important; }
}

/* the uploaded-today stat in the desktop top bar links to todaywall.asp -
   inherit the bar's colour rather than picking up default link styling */
.sa-top-today-link{
    color: inherit;
    text-decoration: none;
}
.sa-top-today-link:hover,
.sa-top-today-link:focus{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/*
 * @pqina/flip v1.8.4 - A Beautifully Animated Flip Clock
 * Copyright (c) 2024 PQINA - https://pqina.nl/flip/
 */
.tick{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;position:relative;z-index:1;line-height:1.4}.tick *{box-sizing:inherit}.tick [data-view]{max-width:100%}.tick span[data-view]{display:inline-block}.tick .tick-credits{position:absolute;right:0;bottom:0;opacity:.4;text-decoration:none;font-size:11px;color:inherit}.tick [data-layout~=pad]{margin:-.25em}.tick [data-layout~=pad]>*{margin:.25em}.tick [data-layout~=horizontal]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=baseline]{-ms-flex-align:baseline;align-items:baseline}.tick [data-layout~=horizontal][data-layout~=center]{-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=right]{-ms-flex-pack:end;justify-content:flex-end}.tick [data-layout~=horizontal][data-layout~=left]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=horizontal][data-layout~=fill],.tick [data-layout~=horizontal][data-layout~=stretch]{-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tick [data-layout~=horizontal][data-layout~=fill]>*,.tick [data-layout~=horizontal][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0;width:100%}.tick [data-layout~=horizontal][data-layout~=multi-line]{-ms-flex-wrap:wrap;flex-wrap:wrap}.tick [data-layout~=horizontal][data-layout~=fit]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:center;align-content:center;white-space:nowrap;-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.tick [data-layout~=vertical][data-layout~=top]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical][data-layout~=bottom]{-ms-flex-pack:end;justify-content:flex-end;min-height:100%}.tick [data-layout~=vertical][data-layout~=middle]{-ms-flex-pack:center;justify-content:center;min-height:100%}.tick [data-layout~=vertical][data-layout~=left]{-ms-flex-align:start;align-items:flex-start}.tick [data-layout~=vertical][data-layout~=right]{-ms-flex-align:end;align-items:flex-end}.tick [data-layout~=vertical][data-layout~=center]{text-align:center}.tick [data-layout~=vertical][data-layout~=fill],.tick [data-layout~=vertical][data-layout~=stretch]{-ms-flex-align:stretch;align-items:stretch;min-height:100%}.tick [data-layout~=vertical][data-layout~=fill]>*,.tick [data-layout~=vertical][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0}.tick [data-layout~=vertical]>*+*{margin-top:.5em}.tick [data-layout~=overlay]{position:relative}.tick [data-layout~=overlay]>*{margin:0}.tick [data-layout~=overlay][data-layout~=center]{text-align:center}.tick [data-layout~=overlay][data-layout~=left]{text-align:left}.tick [data-layout~=overlay][data-layout~=right]{text-align:right}.tick [data-layout~=overlay]>[data-overlay=fill],.tick [data-layout~=overlay]>[data-overlay=stretch]{position:absolute;left:0;right:0;top:0;bottom:0}.tick [data-layout~=overlay]>[data-overlay=center]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0}.tick-flip{position:relative;text-align:center}.tick-flip *{border-radius:inherit;white-space:pre;letter-spacing:inherit;text-indent:inherit}.tick-flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0}.tick-flip-back{border-top-left-radius:0;border-top-right-radius:0}.tick-flip-spacer{display:block;visibility:hidden}.tick-flip-shadow{position:absolute;left:1px;right:1px;top:1px;bottom:1px;color:transparent!important;background:transparent!important}.tick-flip-shadow-top{bottom:calc(50% - 1px)}.tick-flip-shadow-bottom{top:calc(50% + 1px)}.tick-flip-card-shadow{position:absolute;left:.15em;right:.15em;bottom:.125em;height:.5em;background-color:transparent;border-radius:0;opacity:0;transform-origin:0 100%;box-shadow:0 .125em .25em rgba(0,0,0,.5),0 .125em .5em rgba(0,0,0,.75);z-index:0}.tick-flip-card{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;perspective:4em}.tick-flip-panel-back,.tick-flip-panel-front{position:absolute;left:0;width:100%;height:51%;backface-visibility:hidden;transform-style:preserve-3d}.tick-flip-panel-back-text,.tick-flip-panel-front-text{position:absolute;left:-1px;top:0;right:-1px;height:100%;overflow:hidden}.tick-flip-panel-text-wrapper{position:absolute;left:0;top:0;right:0;height:100%}.tick-flip-panel-back-text .tick-flip-panel-text-wrapper{height:200%;top:-100%}.tick-flip-panel-front{transform-origin:center bottom;top:0;z-index:2;box-shadow:inset 0 1px hsla(0,0%,100%,.05)}.tick-flip-panel-back{transform-origin:center top;top:50%;z-index:1;box-shadow:inset 0 -1px rgba(0,0,0,.1)}.tick-flip-panel-back:after{z-index:1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 1px,rgba(0,0,0,.15) 0,transparent 30%)}.tick-flip-panel-back-shadow{z-index:2}.tick-flip-panel-back-highlight{z-index:3}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow,.tick-flip-panel-front-shadow{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}.tick-flip-panel-front-shadow{background-image:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.3))}.tick-flip-panel-back-shadow{background-image:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.5))}.tick-flip-panel-back-highlight{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.3))}.tick [data-style*="shadow:inner"],.tick [data-style*="shadow:inner"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back,.tick [data-style*="shadow:none"] .tick-flip-panel-front,.tick [data-style*="shadow:none"] .tick-flip-shadow{box-shadow:none}.tick [data-style*="shadow:none"] .tick-flip-back:after,.tick [data-style*="shadow:none"] .tick-flip-panel-back-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back-text:after,.tick [data-style*="shadow:none"] .tick-flip-panel-front-shadow{background-image:none}.tick [data-style*="rounded:none"]{border-radius:0}.tick [data-style*="rounded:panels"] .tick-flip-front,.tick [data-style*="rounded:panels"] .tick-flip-shadow-bottom{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick [data-style*="rounded:panels"] .tick-flip-back,.tick [data-style*="rounded:panels"] .tick-flip-panel-back:after,.tick [data-style*="rounded:panels"] .tick-flip-shadow-top{border-top-left-radius:inherit;border-top-right-radius:inherit}.tick-flip{margin-left:.0625em;margin-right:.0625em;min-width:1.125em;border-radius:.125em;letter-spacing:.25em;text-indent:.25em}.tick-flip-panel{color:#edebeb;background-color:#333232}.tick-flip-shadow{box-shadow:0 .125em .3125em rgba(0,0,0,.25),0 .02125em .06125em rgba(0,0,0,.25)}