/* ====== ./static/css/animations.css ====== */
@keyframes animDown {
    from {
        opacity: 0;
        transform: translate3d(0, -200px, 0);
    }
}

@-webkit-keyframes animDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
    }
}

@keyframes animLeft {
    from {
        opacity: 0;
        transform: translate3d(200px, 0, 0);
    }
}

@-webkit-keyframes animLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
    }
}

@keyframes animRight {
    from {
        opacity: 0;
        transform: translate3d(-200px, 0, 0);
    }
}

@-webkit-keyframes animRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
    }
}

@keyframes animUp {
    from {
        opacity: 0;
        transform: translate3d(0, 200px, 0);
    }
}

@-webkit-keyframes animUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
    }
}

.animDown, .animLeft, .animRight, .animUp {
    opacity: 0;
}

.animDown.loaded, .animLeft.loaded, .animRight.loaded, .animUp.loaded {
    opacity: 1;
}

.animDown.loaded {
    animation: animDown 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
    -webkit-animation: animDown 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.animLeft.loaded {
    animation: animLeft 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
    -webkit-animation: animLeft 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.animRight.loaded {
    animation: animRight 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
    -webkit-animation: animRight 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.animUp.loaded {
    animation: animUp 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
    -webkit-animation: animUp 0.8s cubic-bezier(0.7, 0, 0.3, 1) both;
}

/* ====== ./static/css/site.css ====== */
.blue-btn,
button.blue-btn:focus {
    background: #007aff;
}

.blue-btn {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-transform: uppercase;
}

.blue-btn.btn:hover {
    background-color: #0056b6;
}

/* Always reserve the vertical scrollbar gutter so the content width stays
   constant between pages that scroll and pages that don't. Without this the
   whole layout shifts sideways by the scrollbar's width on navigation —
   short pages render wider than tall (scrolling) ones. */
html {
    scrollbar-gutter: stable;
}

body {
    /* Optimized hero background. Was a 1MB 2803px JPEG — the biggest PageSpeed
       "improve image delivery" item. Now a 1920px WebP (~200KB) for modern
       browsers via image-set, with a resized JPEG (~320KB) fallback declared
       first so browsers without image-set support still get a background. */
    background-image: url(/images/hero-bg.jpg);
    background-image: image-set(url(/images/hero-bg.webp) type("image/webp"),
                                url(/images/hero-bg.jpg) type("image/jpeg"));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 1.1rem;
    min-height: 100vh;
    flex-direction: column;
}

.btn {
    border-radius: 5px;
    ;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: #007aff;
}

crm-component .card-content .row {
    margin-bottom: 0;
}

#description {
    margin: 20px 0;
}

#description a,
#description b {
    display: block;
}

#description b {
    margin: 10px 0 0;
}

.dropdown-content li>a,
.dropdown-content li>span {
    color: #007aff;
}

.fc .fc-daygrid-event {
    font-size: .7em;
}

.fc .fc-daygrid-day-number {
    font-size: .9em;
}

#flipbook {
    transition: transform 0.3s ease;
}

#flipbook-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
    /* Optional: adjust spacing */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* ensures it fills the screen */
    box-sizing: border-box;
    overflow: hidden;
    overflow: auto;
    position: relative;
    scroll-behavior: smooth;
}

footer-view {
    font-size: smaller;
    width: 100%;
}

h1 {
    font-size: 4.8rem;
    font-weight: 900;
    margin: 0 0 1.68rem 0;
}

h2 {
    font-weight: 900;
    margin: 0 0 1.424rem 0;
}

h3 {
    color: #555;
    font-optical-sizing: auto;
    font-size: 1.9rem;
    font-weight: 200;
    font-style: normal;
}

h4,
nav ul a {
    text-transform: uppercase;
}

h5 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

header {
    margin-top: 20px;
}

/* ── MOBILE NAV ────────────────────────────────────────── */

/* Top nav bar */
.psp-nav {
    position: relative;
    z-index: 100;
}

.psp-nav .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 60px;
    /* gap separates logo from hamburger so they're never touching even
       on narrow viewports where space-between has little to distribute. */
    gap: 16px;
}

.psp-nav-logo {
    /* Don't let the <a> (or the img inside via max-width:100%) eat the
       whole nav row — explicit cap leaves predictable space for the
       hamburger. flex:0 1 auto keeps the logo shrinkable below this
       cap on very narrow viewports without pushing the button off-screen. */
    max-width: 260px;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}

.psp-nav-logo img {
    max-height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* ── PUBLIC SITE OVERLAY MENU (Resend / Linear style) ────────────
   Flat 3-bar button → animates to an X → fades in a white overlay
   covering the whole viewport with the menu links big and centered.
   Replaces the Materialize sidenav for the public-site mobile nav
   only — the admin keeps .psp-hamburger / .psp-sidenav below. */

.psp-menu-toggle {
    /* Reset the user-agent + Materialize button styles that fight the
       flex layout. Materialize's "nav button" rules in particular
       paint a teal background on :focus / :active — visible as a
       solid square behind the X on tap. The explicit overrides below
       kill that and the mobile tap-highlight flash. */
    background: transparent !important;
    border: 0;
    outline: none;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;

    width: 44px;
    height: 44px;
    /* Inline-flex aligns naturally with the logo's flex baseline
       inside .nav-wrapper, while still letting the bars stack
       vertically inside via flex-direction:column. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    /* Stacking handled at the body.psp-menu-open level — see further
       down in this file for the nav-lift rule. */
    position: relative;
}

/* Explicit kills for every focus/active/hover state — Materialize and
   browsers each have their own default they want to paint. */
.psp-menu-toggle:hover,
.psp-menu-toggle:focus,
.psp-menu-toggle:focus-visible,
.psp-menu-toggle:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.psp-menu-toggle-bar {
    width: 24px;
    height: 2px;
    background: #0f2057;
    border-radius: 1px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}

/* Morph to X when expanded. The translate values match the gap+bar
   geometry above so the rotated bars meet at the center cleanly.
   gap: 6 + bar height: 2 = 8px between bar centers. */
.psp-menu-toggle[aria-expanded="true"] .psp-menu-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.psp-menu-toggle[aria-expanded="true"] .psp-menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.psp-menu-toggle[aria-expanded="true"] .psp-menu-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.psp-overlay-menu {
    position: fixed;
    inset: 0;
    background: #fff;
    /* Sits BELOW the nav when the menu is open (see body.psp-menu-open
       .psp-nav rule), so the hamburger button-turned-X stays visible
       and tappable on top of the overlay. */
    z-index: 99;
    display: flex;
    flex-direction: column;
    /* Items at the top, just below the nav bar. The 60px top padding
       clears the 60px-tall .psp-nav so the first link sits a comfortable
       distance under the X. */
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.psp-overlay-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}

.psp-overlay-nav {
    display: flex;
    flex-direction: column;
    /* Tighter than the first pass — at 32px the 6 items + label
       heights overflowed phone viewports under 700px tall (which
       includes most mobile browsers once the URL bar is showing). */
    gap: 24px;
    text-align: center;
    /* Generous top padding so the first link sits a clean distance
       below the nav bar / X button, not flush with the top edge. */
    padding: 32px 24px 24px;
}

.psp-overlay-nav a {
    color: #0f2057;
    font-size: 26px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1.2;
    transition: color .2s ease;
}

.psp-overlay-nav a:hover,
.psp-overlay-nav a:focus {
    color: #2f62fb;
    outline: none;
}

/* Lock background scroll while the overlay is up. Applied to <body>
   by the JS toggle so the page underneath doesn't scroll on touch. */
body.psp-menu-open {
    overflow: hidden;
}

/* When the menu is open, lift the entire .psp-nav above the overlay so
   the hamburger-turned-X stays visible and tappable. Without this,
   .psp-nav creates its own stacking context at z-index:100 and the
   overlay at z-index:99 sits below it — but during the first attempt
   the overlay was at 101 and the nav at 100, so the overlay covered
   everything including the toggle. Now both nav and toggle stay on
   top during the open state. */
body.psp-menu-open .psp-nav {
    z-index: 110;
    /* Make the nav background transparent while open so the overlay
       reads as a clean full-bleed surface behind the X. */
    background: transparent !important;
}

/* Desktop: hide both — the inline <ul> in the nav handles desktop
   navigation. Matches Materialize's "hide-on-med-and-up" breakpoint
   (993px) so the existing responsive layout is preserved. */
@media only screen and (min-width: 993px) {
    .psp-menu-toggle,
    .psp-overlay-menu {
        display: none !important;
    }
}

/* Hamburger button — reset Materialize's nav .sidenav-trigger overrides */
.psp-hamburger {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    background: #f0f4ff !important;
    color: #2f62fb !important;
    transition: background .2s;
    flex-shrink: 0;
}

.psp-hamburger:hover {
    background: #dce8ff !important;
}

.psp-hamburger .material-icons {
    color: #2f62fb;
    font-size: 22px;
    line-height: 1;
    padding: 18px;
}

/* Sidenav base */
.psp-sidenav {
    background: #fff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12) !important;
    padding-bottom: 24px;
    width: 280px;
}

/* Keep the admin mobile drawer + its dim overlay above ALL page content.
   Materialize's defaults (drawer 999 / overlay 997) were low enough that the
   edit/delete action buttons in the campaign lists bled over the open menu on
   mobile. Pin the mobile drawer (not the desktop sidenav-fixed rail) and the
   dim overlay well above any content stacking context. */
.psp-sidenav:not(.sidenav-fixed) {
    z-index: 1001 !important;
}

.sidenav-overlay {
    z-index: 1000 !important;
}

/* Sidenav brand header — gradient only on mobile overlay, not desktop fixed */
.psp-sidenav:not(.sidenav-fixed) .psp-sidenav-header {
    background: linear-gradient(135deg, #0f2057 0%, #1a3a8f 60%, #2f62fb 100%);
    padding: 24px 20px;
    margin-bottom: 8px;
}

.psp-sidenav:not(.sidenav-fixed) .psp-sidenav-header a {
    display: block;
    line-height: 1;
}

.psp-sidenav:not(.sidenav-fixed) .psp-sidenav-header img {
    max-height: 36px;
    /* width:auto + max-width:100% lets the height cap drive the size
       and keeps the natural aspect ratio. The old "width:100%" with
       max-height was a CSS trap: when the container is narrower than
       (max-height × intrinsic-aspect-ratio), height clamps to max but
       width stays at 100%, distorting the logo horizontally. Showed up
       once we added explicit width/height attributes to the <img> for
       CLS, which gave the browser enough info to enforce the broken
       constraint pair. */
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

/* Desktop fixed sidenav header — clean, no gradient */
.psp-sidenav.sidenav-fixed .psp-sidenav-header {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.psp-sidenav.sidenav-fixed .psp-sidenav-header img {
    max-height: 32px;
    width: auto;
    max-width: 100%;
}

/* Sidenav links */
.psp-sidenav li a:not(.psp-sidenav-logoff) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 52px;
    font-size: .97rem;
    font-weight: 500;
    color: #1a1a2e !important;
    border-radius: 0;
    padding: 0 14px !important;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psp-sidenav li a:not(.psp-sidenav-logoff):hover {
    background: #f0f4ff !important;
    color: #2f62fb !important;
}

.psp-sidenav li a .material-icons {
    font-size: 20px;
    color: #6b7280;
    flex-shrink: 0;
    transition: color .15s;
}

/* Override Materialize default icon margin inside sidenav links */
.sidenav li > a > i,
.sidenav li > a > [class^="mdi-"],
.sidenav li > a li > a > [class*="mdi-"],
.sidenav li > a > i.material-icons {
    margin: 0;
}

.psp-sidenav li a:hover .material-icons {
    color: #2f62fb;
}

/* Active state */
.psp-sidenav li.active a,
.psp-sidenav li a.active {
    background: #f0f4ff !important;
    color: #2f62fb !important;
    font-weight: 600;
}

/* Divider */
.psp-sidenav .psp-sidenav-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* Log out link */
.psp-sidenav .psp-sidenav-logoff {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 14px !important;
    height: 52px;
    font-size: .97rem;
    font-weight: 500;
    color: #dc2626 !important;
    transition: background .15s;
}

.psp-sidenav .psp-sidenav-logoff:hover {
    background: #fff1f1 !important;
}

.psp-sidenav .psp-sidenav-logoff .material-icons {
    color: #dc2626;
    font-size: 20px;
}

#flyer {
    perspective: 30px;
}

#flyer img {
    transition: transform 0.5s;
}

#landing {
    padding: 0 20px;
}

label {
    color: #616161;
}

#landingText #contactBtn {
    background-color: #2f62fb;
    color: #fff;
    font-size: 1.4rem;
    padding: 0 40px;
}

.lite-bg {
    background-color: rgba(255, 255, 255, 0.49);
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin-top: 20px;
    padding: 20px;
}

#loginDiv {
    display: none;
    /* When toggled visible (jQuery .show() sets display:block), act as a
       full-viewport overlay so it hides whatever page was rendered behind it —
       important when a session times out mid-page and the 403 handler re-pops
       the login; without this, the stale page bleeds through below the form. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.96);
    padding: 40px 0;
    margin: 0;
}

#loginDiv .container {
    /* !important guards against unscoped jQuery .css() calls in other
       components that target every .container on the page (see
       campaigns / campaign-stats / catalog-viewer $onInit). Inline
       styles set there would otherwise win and stretch the login
       form to full viewport width when the 403 handler re-pops it. */
    max-width: 400px !important;
}

.logo {
    max-height: 55px;
}

main {
    flex: 1 0 auto;
}

nav .logo img {
    margin-top: 12px;
    max-height: 40px;
}

#news-article tr {
    border-bottom: 0 none;
}

#news-description img {
    max-width: 600px;
    width: 100%;
    height: auto;
}

newsroom-component .card .card-content .card-title {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 26px;
    margin-bottom: 16px;
}

newsroom-component .card.hide-on-small-only .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 24px 0;
}

/* ── PAST FLYERS REDESIGN ────────────────────────────────── */

/* Hero header */
past-flyers-component .pf-hero {
    background: linear-gradient(135deg, #0f2057 0%, #1a3a8f 50%, #2f62fb 100%);
    color: #fff;
    padding: 52px 32px 40px;
    margin: -20px -5px 0;
    position: relative;
}

past-flyers-component .pf-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
}

past-flyers-component .pf-hero-title {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin: 0 0 10px;
    color: #fff;
}

past-flyers-component .pf-hero-sub {
    font-size: 1.05rem;
    opacity: .85;
    max-width: 520px;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Search + filter controls — stacked to prevent any overlap */
past-flyers-component .pf-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
}

past-flyers-component .pf-search-wrap {
    position: relative;
    width: 100%;
}

past-flyers-component .pf-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .6;
    pointer-events: none;
    color: #fff;
    z-index: 1;
}

past-flyers-component .pf-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 16px 11px 42px !important;
    border-radius: 50px !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    font-size: .97rem !important;
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    outline: none !important;
    transition: background .2s !important;
    height: 44px !important;
    margin: 0 !important;
    display: block !important;
}

past-flyers-component .pf-search-input::placeholder {
    color: rgba(255, 255, 255, .6);
}

past-flyers-component .pf-search-input:focus {
    background: rgba(255, 255, 255, .25) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

past-flyers-component .pf-select-wrap {
    position: relative;
    width: 100%;
}

/* browser-default bypasses Materialize — we own all styling */
past-flyers-component .pf-select-wrap select.pf-select {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 36px 0 18px;
    border-radius: 50px;
    border: none;
    font-size: .95rem;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    box-shadow: none;
}

past-flyers-component .pf-select-wrap select.pf-select:focus {
    background: rgba(255, 255, 255, .25);
    outline: none;
    box-shadow: none;
}

past-flyers-component .pf-select-wrap select.pf-select option {
    background: #1a3a8f;
    color: #fff;
}

past-flyers-component .pf-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, .7);
    pointer-events: none;
}

/* Content area — full width to match hero */
past-flyers-component .pf-content {
    background: #f4f6fb;
    margin: 0 -5px -20px;
    padding: 20px 32px 60px;
}

past-flyers-component .pf-meta-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

past-flyers-component .pf-count-badge {
    background: #2f62fb;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: .3px;
}

/* CSS Grid — rows auto-expand as images load, zero overlap possible */
past-flyers-component .pf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1200px) {
    past-flyers-component .pf-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    past-flyers-component .pf-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    past-flyers-component .pf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    past-flyers-component .pf-hero {
        padding: 36px 16px 32px;
        box-sizing: border-box;
        overflow: hidden;
    }

    past-flyers-component .pf-controls {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    past-flyers-component .pf-search-wrap,
    past-flyers-component .pf-select-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Cards */
past-flyers-component .pf-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: pointer;
}

past-flyers-component .pf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(47, 98, 251, .16);
}

past-flyers-component .pf-card-img-wrap {
    position: relative;
    overflow: hidden;
}

past-flyers-component .pf-card img {
    width: 100%;
    display: block;
    max-height: 75vh;
    object-fit: cover;
    object-position: top;
    transition: transform .35s ease;
}

past-flyers-component .pf-card:hover img {
    transform: scale(1.03);
}

past-flyers-component .pf-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 32, 87, .82) 100%);
    display: flex;
    align-items: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity .25s ease;
}

past-flyers-component .pf-card:hover .pf-card-overlay {
    opacity: 1;
}

past-flyers-component .pf-overlay-btn {
    background: #fff;
    color: #1a1a2e !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
}

past-flyers-component .pf-overlay-btn:hover {
    background: #f0f4ff;
    color: #1a1a2e !important;
}

past-flyers-component .pf-card-footer {
    padding: 10px 12px 12px;
}

past-flyers-component .pf-card-title {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

past-flyers-component .pf-card-company {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .75rem;
    color: #2f62fb !important;
    font-weight: 600;
    text-decoration: none !important;
}

past-flyers-component .pf-card-company:hover {
    text-decoration: underline !important;
}

/* ── TOUCH DEVICES: no hover, so always show overlay ─── */
@media (hover: none) {
    past-flyers-component .pf-card-overlay {
        opacity: 1;
        background: linear-gradient(180deg, transparent 50%, rgba(15, 32, 87, .75) 100%);
    }
    /* Disable lift/scale — feels janky on touch */
    past-flyers-component .pf-card:hover {
        transform: none;
        box-shadow: 0 2px 12px rgba(0,0,0,.10);
    }
    past-flyers-component .pf-card:hover img {
        transform: none;
    }
    /* Make the overlay button more tap-friendly */
    past-flyers-component .pf-overlay-btn {
        padding: 10px 18px;
        font-size: .85rem;
    }
}

/* Skeleton loading */
past-flyers-component .pf-skel-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

past-flyers-component .pf-skel-img,
past-flyers-component .pf-skel-line {
    background: linear-gradient(90deg, #e8ecf4 25%, #f2f5fb 50%, #e8ecf4 75%);
    background-size: 800px 100%;
    animation: pf-shimmer 1.4s infinite linear;
}

past-flyers-component .pf-skel-img {
    width: 100%;
}

past-flyers-component .pf-skel-foot {
    padding: 10px 12px 12px;
}

past-flyers-component .pf-skel-line {
    height: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    width: 85%;
}

past-flyers-component .pf-skel-short {
    width: 45%;
}

@keyframes pf-shimmer {
    0% {
        background-position: -800px 0;
    }

    100% {
        background-position: 800px 0;
    }
}

.section {
    min-height: 70vh;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #0058b9;
    -webkit-box-shadow: 0 1px 0 0 #0058b9;
    box-shadow: 0 1px 0 0 #0058b9;
}

.sidenav {
    width: 200px;
}

#html-preview td {
    padding: 0;
}

.tabs {
    background-color: transparent;
}

.tabs .tab a {
    color: #007aff;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 20px;
}

.tabs .tab a:focus,
.tabs .tab a:hover,
.tabs .tab a.active {
    background-color: transparent;
    color: #00254d;
}





















.dropdown-content li>a,
nav ul a:hover {
    color: #007aff;
}

.dropdown-holder {
    position: relative;
}

h4 {
    font-weight: 700;
    margin: 0 0 1.168rem 0;
}

h4.home {
    font-weight: 300;
}

header .dropdown-trigger {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
    padding: 19px;
    width: 100%;
}

header form {
    position: relative;
}

header form button,
header form input#search {
    border: 2px solid #007aff;
}

header form button {
    position: absolute;
    padding: 19px 19px 18px;
    right: -24px;
    top: 0;
    transition: all 0.3s ease;
}

header form button:hover {
    background: #fff;
    color: #007aff !important;
}

header form input#search {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight: 500;
    padding: 5px 10px;
}

header nav {
    background-color: transparent;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
}

hr {
    border: 1px dotted #dedede;
}

input[type=text]:not(.browser-default)#quantity {
    text-align: center;
}

input[type=text]:not(.browser-default)#quantity {
    font-size: 1.7rem;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #0058b9;
    -webkit-box-shadow: 0 1px 0 0 #0058b9;
    box-shadow: 0 1px 0 0 #0058b9;
}

input:not([type]):focus:not([readonly])+label,
input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=url]:not(.browser-default):focus:not([readonly])+label,
input[type=time]:not(.browser-default):focus:not([readonly])+label,
input[type=date]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
input[type=tel]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=search]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
    color: #017bff;
}

input.valid:not([type]),
input.valid:not([type]):focus,
input[type=text].valid:not(.browser-default),
input[type=text].valid:not(.browser-default):focus,
input[type=password].valid:not(.browser-default),
input[type=password].valid:not(.browser-default):focus,
input[type=email].valid:not(.browser-default),
input[type=email].valid:not(.browser-default):focus,
input[type=url].valid:not(.browser-default),
input[type=url].valid:not(.browser-default):focus,
input[type=time].valid:not(.browser-default),
input[type=time].valid:not(.browser-default):focus,
input[type=date].valid:not(.browser-default),
input[type=date].valid:not(.browser-default):focus,
input[type=datetime].valid:not(.browser-default),
input[type=datetime].valid:not(.browser-default):focus,
input[type=datetime-local].valid:not(.browser-default),
input[type=datetime-local].valid:not(.browser-default):focus,
input[type=tel].valid:not(.browser-default),
input[type=tel].valid:not(.browser-default):focus,
input[type=number].valid:not(.browser-default),
input[type=number].valid:not(.browser-default):focus,
input[type=search].valid:not(.browser-default),
input[type=search].valid:not(.browser-default):focus,
textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus,
.select-wrapper.valid>input.select-dropdown {
    border-bottom: 1px solid #017bff;
    -webkit-box-shadow: 0 1px 0 0 #017bff;
    box-shadow: 0 1px 0 0 #017bff;
}

.margin-bottom-100 {
    margin-bottom: 100px;
}

nav ul a {
    color: #000;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 16px;
}

nav ul a:hover {
    background-color: transparent;
}

nav-view {
    z-index: 1;
}

.page-footer {
    background-color: #f3f3f3;
    padding-bottom: 10px;
    padding-top: 10px;
}

.page-footer a {
    color: #fff;
    font-size: .9rem;
    margin-left: 15px;
}

.page-footer img {
    max-height: 85px;
    max-width: 315px;
}

.page-footer .row {
    margin-bottom: 0;
}

#pricing {
    margin-top: 15px;
}

#pricing.card-panel {
    margin: .25rem 0 1rem 0;
}

.row .col.category .card-panel {
    font-size: 1.1rem;
}

.row .col.category .card-panel {
    color: #616161;
}

.row .col.special {
    min-height: 395px;
}

.row .dropdown-trigger .col,
.row .nav.col {
    padding: 0;
}

.sidenav-overlay {
    z-index: 0;
}

.sidenav-trigger {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.slick-dots li button {
    z-index: 10 !important;
}

.slick-slide img {
    width: 100%;
}

#specials .admin-special {
    min-height: 42vh;
}

#top-nav {
    background: #f3f3f3;
}

#top-nav a {
    color: #6e6e6e;
    font-weight: 500;
}

#top-nav a:hover {
    color: #383838;
}

#top-nav .container {
    padding: 15px 0;
}

#top-nav img {
    max-height: 54px;
    padding: 5px;
}

/* /newsroom: featured card stacks below 768px so the image and copy
   sections don't crush each other on phones. The grid below it is
   already fluid via grid-template-columns: repeat(auto-fill, minmax(...)). */
@media (max-width: 768px) {
    .newsroom-featured {
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .newsroom-featured > div:first-child {
        flex: 0 0 auto !important;
        min-height: 200px !important;
    }
    .newsroom-featured > div:last-child {
        flex: 0 0 auto !important;
        padding: 24px !important;
    }
}

/* ── BRAND COLOR OVERRIDES — kill Materialize's default teal (#26a69a) ─────────
   Materialize ships a teal "secondary" color that it paints onto raised buttons,
   progress bars, checkboxes, switches and dropdown accents. We don't use it —
   the brand is blue (#2f62fb) / deep navy (#102C78). These rules load after the
   Materialize CDN stylesheet (see app.html head order) so they win the cascade
   without !important where specificity matches. Any element with an inline
   background:#... keeps its own color. */

/* Raised buttons (default Materialize bg is the teal secondary color) */
.btn,
.btn-large,
.btn-small,
.btn-floating {
    background-color: #2f62fb;
}
.btn:hover,
.btn-large:hover,
.btn-small:hover,
.btn-floating:hover,
.btn:focus,
.btn-large:focus,
.btn-small:focus,
.btn-floating:focus {
    background-color: #2554d8;
}
/* Flat buttons must stay transparent (they inherit .btn above otherwise) */
.btn-flat {
    background-color: transparent;
}

/* Progress bars (indeterminate spinners + determinate fills were teal) */
.progress {
    background-color: #cfe0ff;
}
.progress .determinate,
.progress .indeterminate {
    background-color: #2f62fb;
}

/* Preloader circular spinners (used on some admin pages) */
.spinner-blue-only .circle,
.spinner-layer.spinner-blue-only {
    border-color: #2f62fb !important;
}

/* Filled-in checkboxes */
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border-color: #2f62fb;
    background-color: #2f62fb;
}
/* Simple checkbox check mark */
[type="checkbox"]:checked + span:not(.lever):before {
    border-right-color: #2f62fb;
    border-bottom-color: #2f62fb;
}
/* Radio buttons */
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
    border-color: #2f62fb;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
    background-color: #2f62fb;
}

/* Switch lever */
.switch label input[type=checkbox]:checked + .lever {
    background-color: #9db8ff;
}
.switch label input[type=checkbox]:checked + .lever:after {
    background-color: #2f62fb;
}

/* Text input focus underline + label (Materialize default is a green when the
   theme secondary leaks in) */
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #2f62fb;
    box-shadow: 0 1px 0 0 #2f62fb;
}
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #2f62fb;
}

/* Dropdown / select highlight */
.dropdown-content li > a,
.dropdown-content li > span {
    color: #2f62fb;
}

/* ====== ./static/css/responsive.css ====== */
@media (max-width: 1380px) {
    h1 {
        font-size: 4vw;
    }
}

@media (max-width: 1280px) {
    nav ul a {
        font-size: 1rem;
        padding: 0 10px;
    }

    #specials .admin-special {
        min-height: 31vh;
    }
}

@media (max-width: 1025px) {
    .card-action .text {
        display: none;
    }

    .container {
        width: 95%;
    }

    header .dropdown-holder {
        display: none;
    }

    .row .col.l9 {
        width: 100%;
    }

    #specials .admin-special {
        min-height: 23vh;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 100%;
        max-width: 1400px;
    }
}

@media (max-width: 855px) {
    newsroom-component .card .card-title {
        font-size: 3vw;
    }

    newsroom-component .card.hide-on-small-only .card-content {
        padding: 10px 24px 0;
    }
}

@media (max-width: 770px) {
    #best.valign-wrapper {
        display: block;
    }

    .container {
        width: 95%;
    }

    footer .container {
        width: 100%;
    }

    header form input#search {
        padding: 6px 10px;
    }

    .page-footer img {
        max-height: 65px;
        max-width: 315px;
    }

    .row .col.special {
        min-height: 430px;
    }
}

@media (max-width: 545px) {
    h2 {
        font-size: 8vw;
    }

    .tabs .tab a {
        padding: 0 18px;
    }

    .valign-wrapper {
        display: block;
    }
}

@media (max-width: 435px) {
    header {
        margin: 0 5px;
    }

    h1 {
        font-size: 9vw;
    }

    h3 {
        font-size: 6vw;
    }

    #landing {
        height: 50vh;
        padding: 0;
    }

    #landingText {
        margin: 0 auto;
    }

    .margin-bottom-100 {
        margin-bottom: 150px;
    }

    nav .logo img {
        max-width: 100%;
    }

    newsroom-component .card .card-title {
        font-size: 5vw;
    }

    .section {
        min-height: 60vh;
    }

    .tabs .tab a {
        font-size: 1rem;
        padding: 0;
    }

    .valign-wrapper {
        display: block;
    }
}

@media (max-width: 380px) {
    app-view section {
        margin: 0 5px;
    }

    .container {
        width: 100%;
    }

    h1 {
        font-size: 9vw;
    }

    h3 {
        font-size: 7vw;
    }

    #landing {
        padding: 0;
    }

    #landingText #contactBtn {
        font-size: 1.3rem;
    }

    nav {
        line-height: normal;
    }

    nav-view .row {
        margin-bottom: 0;
    }

    newsroom-component .card .card-title {
        font-size: 6vw;
    }

    .section {
        min-height: 70vh !important;
    }
}

@media (max-width: 365px) {
    #banner {
        border-bottom: 0 none;
        border-left: 0 none;
        border-right: 0 none;
        border-top: 0 none;
        padding: 0;
    }

    #category-search {
        padding-bottom: 15px;
    }

    .chip {
        margin-bottom: 10px;
        margin-right: 10px;
    }

    h4,
    h5,
    #product h4 {
        font-size: 1.4rem;
    }

    header .col .dropdown-trigger.row {
        margin-left: 0;
    }

    nav {
        display: block;
        margin-bottom: 15px;
    }

    #product,
    #product h1 {
        margin-top: 0;
    }

    #product h1 {
        font-size: 1.9rem;
    }

    .row .col.special {
        min-height: auto;
    }
}

@media (max-width: 285px) {
    .page-footer img {
        max-width: 93vw;
    }
}

@media (max-width: 245px) {
    img.responsive-img {
        max-width: 100%;
    }
}

/* ====== ./static/css/catalog.css ====== */
 button.disabled,
 button:disabled {
     opacity: 0.35;
     cursor: not-allowed;
     pointer-events: none;
 }

 .catalog-page {
     align-items: center;
     cursor: zoom-in;
     display: flex;
     justify-content: center;
     transition: opacity 0.2s ease;
 }

 .catalog-page img {
     display: block;
     max-width: 100%;
     max-height: calc(100vh - 20px);
     width: auto;
     height: auto;
 }

 .catalog-pages {
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 }

 .catalog-page.zoomed {
     position: relative;
     z-index: 200;
     cursor: grab;
     overflow: auto;
     max-height: calc(100vh - 120px);
 }

 .catalog-page.zoomed:active {
     cursor: grabbing;
 }

 .catalog-page.zoomed::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }

 .catalog-page.zoomed::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.25);
     border-radius: 6px;
 }

 .catalog-page.zoomed img {
     transform: scale(2);
     transform-origin: top left;
     transition: transform 0.25s ease;
 }

 .catalog-row {
     width: 100%;
     height: 100%;
     flex-shrink: 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .catalog-row.double {
     justify-content: center;
 }

 .catalog-row.single {
     justify-content: center;
 }

 .catalog-toolbar {
     position: sticky;
     top: 0;
     background: #fff;
     z-index: 10;
     border-bottom: 1px solid #eee;
 }

 .catalog-toolbar-vertical {
     position: fixed;
     top: 50%;
     right: 16px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid #e5e5e5;
     border-radius: 8px;
     padding: 10px 8px;
     z-index: 100;
 }

 .catalog-toolbar-vertical button {
     background: none;
     border: none;
     font-size: 22px;
     cursor: pointer;
 }

 .catalog-viewer {
     margin: 0 auto;
     position: relative;
     height: 100vh;
     max-width: 90vw;
     overflow: hidden;
     width: 100%;
 }

 .catalog-viewer.zoom-active .catalog-row.double .catalog-page:not(.zoomed) {
     opacity: 0.35;
     pointer-events: none;
 }

 .edge-nav {
     position: fixed;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.85);
     border: 1px solid #ddd;
     border-radius: 50%;
     width: 42px;
     height: 42px;
     font-size: 24px;
     cursor: pointer;
     z-index: 900;
 }

 .edge-nav.left {
     left: 16px;
 }

 .edge-nav.right {
     right: 72px;
 }

 .page-indicator {
     font-size: 14px;
     color: #333;
     white-space: nowrap;
 }

 @media (max-width: 768px) {

     .catalog-toolbar-vertical,
     .edge-nav {
         display: none;
     }
 }