.psa-storefront {
    --sf-ink: #061b4b;
    --sf-muted: #647188;
    --sf-line: #e1e7ef;
    --sf-blue: var(--psa-blue, #073b9a);
    --sf-cyan: var(--psa-cyan, #009fe3);
    --sf-green: var(--psa-green, #18a83d);
    --sf-orange: var(--psa-orange, #f97300);
    --sf-mint: var(--psa-green, #18a83d);
    --sf-bg: #f5f7fa;
}

.psa-storefront__hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(0, 159, 227, 0.32), transparent 27%),
        radial-gradient(circle at 71% 105%, rgba(24, 168, 61, 0.2), transparent 30%),
        radial-gradient(circle at 4% 100%, rgba(249, 115, 0, 0.14), transparent 22%),
        linear-gradient(122deg, #041638 0%, #06357f 62%, #075ba2 100%);
    min-height: 570px;
    padding: 2.65rem 0 3.15rem;
}

.psa-storefront__hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
    pointer-events: none;
    position: absolute;
}

.psa-storefront__hero-glow {
    background: linear-gradient(135deg, var(--sf-cyan), var(--sf-green));
    filter: blur(120px);
    height: 340px;
    opacity: 0.18;
    right: -40px;
    top: -140px;
    width: 340px;
}

.psa-storefront__hero-grid {
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(315px, 0.75fr);
}

.psa-storefront__eyebrow {
    color: #8de8ff;
    display: block;
    margin-top: 1.1rem;
}

.psa-storefront__hero-brand {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(1, 12, 41, 0.22);
    display: inline-flex;
    flex-direction: column;
    max-width: 285px;
    overflow: hidden;
    padding: 0.65rem 0.8rem 0;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.psa-storefront__hero-brand:hover,
.psa-storefront__hero-brand:focus-visible {
    box-shadow: 0 22px 52px rgba(1, 12, 41, 0.3);
    outline: 3px solid rgba(141, 232, 255, 0.42);
    transform: translateY(-2px);
}

.psa-storefront__hero-brand img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.psa-storefront__brand-spectrum {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 4px;
    margin: 0.48rem -0.8rem 0;
}

.psa-storefront__brand-spectrum i:nth-child(1) { background: var(--sf-blue); }
.psa-storefront__brand-spectrum i:nth-child(2) { background: var(--sf-cyan); }
.psa-storefront__brand-spectrum i:nth-child(3) { background: var(--sf-green); }
.psa-storefront__brand-spectrum i:nth-child(4) { background: var(--sf-orange); }

.psa-storefront__hero h1 span {
    color: #ffffff;
    position: relative;
}

.psa-storefront__hero h1 span::after {
    background: linear-gradient(90deg, var(--sf-cyan), var(--sf-green), var(--sf-orange));
    border-radius: 99px;
    bottom: -0.12em;
    content: "";
    height: 5px;
    left: 0;
    opacity: 0.92;
    position: absolute;
    width: 42%;
}

.psa-storefront__hero h1 {
    font-size: clamp(2.45rem, 4vw, 3.7rem);
    letter-spacing: -0.048em;
    line-height: 1.035;
    margin: 0.75rem 0 1rem;
    max-width: 720px;
}

.psa-storefront__hero-copy > p {
    color: #c8d5e3;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 610px;
}

.psa-storefront__search {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(2, 13, 29, 0.22);
    margin-top: 1.55rem;
    max-width: 650px;
}

.psa-storefront__search button {
    background: linear-gradient(135deg, #ff8a00, var(--sf-orange));
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.25);
    transition: background-color 180ms ease;
}

.psa-storefront__search button:hover,
.psa-storefront__search button:focus-visible {
    background: linear-gradient(135deg, #ed6c00, #d95e00);
    outline: none;
}

.psa-storefront__trust {
    margin-top: 1rem;
}

.psa-storefront__trust i {
    color: #71e590;
}

.psa-storefront__hero-panel {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    box-shadow: 0 24px 54px rgba(1, 12, 27, 0.18);
    overflow: hidden;
    position: relative;
}

.psa-storefront__hero-panel::before {
    background: linear-gradient(90deg, var(--sf-blue) 0 25%, var(--sf-cyan) 25% 50%, var(--sf-green) 50% 75%, var(--sf-orange) 75%);
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

.psa-storefront__quick-links > a {
    border: 1px solid rgba(255, 255, 255, 0.75);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.psa-storefront__quick-links > a:hover,
.psa-storefront__quick-links > a:focus-visible {
    box-shadow: 0 10px 24px rgba(1, 12, 27, 0.15);
    outline: none;
    transform: translateX(3px);
}

.psa-storefront__section {
    padding-bottom: 3.5rem;
    padding-top: 3.5rem;
}

body:has(.psa-storefront) header .topbar {
    background: #f7f9fb !important;
    border-bottom: 1px solid #edf0f4;
    color: #536176;
}

body:has(.psa-storefront) header .navbar-sticky,
body:has(.psa-storefront) header .mobile-head > .navbar:first-child {
    background: #ffffff !important;
}

body:has(.psa-storefront) header .navbar-sticky {
    box-shadow: 0 10px 36px rgba(11, 25, 47, 0.07);
}

body:has(.psa-storefront) header .navbar-stuck-menu {
    background: #f7f9fc !important;
    border-bottom: 1px solid #e5eaf1;
    border-top: 1px solid #edf1f5;
}

body:has(.psa-storefront) header .navbar-stuck-menu > .container {
    padding-bottom: 6px !important;
    padding-top: 6px !important;
}

body:has(.psa-storefront) header .navbar-stuck-menu .nav-link,
body:has(.psa-storefront) header .navbar-stuck-menu .nav-item button {
    color: #26354b !important;
    font-size: 0.88rem;
}

body:has(.psa-storefront) header .navbar-stuck-menu .nav-item.active > .nav-link {
    background: #eaf7ff;
    border-radius: 10px;
    color: var(--psa-blue, #073b9a) !important;
}

body:has(.psa-storefront) header .__mega-nav {
    margin-right: 1rem !important;
    width: 220px !important;
}

body:has(.psa-storefront) header .navbar-stuck-menu .category-menu-toggle-btn {
    background: linear-gradient(135deg, var(--psa-blue, #073b9a), #075aa5) !important;
    border-radius: 11px;
    color: #ffffff !important;
    min-height: 44px;
    padding: 0.65rem 0.9rem !important;
}

body:has(.psa-storefront) header .navbar-stuck-menu .category-menu-toggle-btn:hover,
body:has(.psa-storefront) header .navbar-stuck-menu .category-menu-toggle-btn:focus-visible {
    background: linear-gradient(135deg, #052d78, #064982) !important;
    opacity: 1 !important;
    outline: 3px solid rgba(49, 86, 216, 0.18);
}

body:has(.psa-storefront) header .category-menu-toggle-btn-text {
    margin-left: 14px !important;
    margin-right: 14px !important;
}

body:has(.psa-storefront) header .search-bar-input {
    background: #f8fafc;
    border-color: #dfe5ed;
    border-radius: 12px 0 0 12px;
}

body:has(.psa-storefront) header .search-bar-input:focus {
    background: #ffffff;
    border-color: #8fa4de;
    box-shadow: 0 0 0 3px rgba(49, 86, 216, 0.11);
}

body:has(.psa-storefront) header .search_button,
body:has(.psa-storefront) header .search_button .input-group-text {
    background: var(--psa-blue, #073b9a) !important;
    border-color: var(--psa-blue, #073b9a) !important;
}

body:has(.psa-storefront) header .navbar-tool-label {
    background: var(--psa-orange, #f97300) !important;
}

body:has(.psa-storefront) header .navbar-tool-icon-box.bg-secondary {
    background: #f3f6fa !important;
    border: 1px solid #e7ebf1;
    color: #26354b;
}

/* The template's public navigation is not wrapped in a semantic header element. */
body:has(.psa-storefront) .navbar-stuck-menu .__mega-nav {
    background: transparent !important;
}

body:has(.psa-storefront) .navbar-stuck-menu .category-menu-toggle-btn {
    background: linear-gradient(135deg, var(--psa-blue, #073b9a), #075aa5) !important;
    border-radius: 11px;
    color: #ffffff !important;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 0.9rem !important;
}

body:has(.psa-storefront) .navbar-stuck-menu .category-menu-toggle-btn:hover,
body:has(.psa-storefront) .navbar-stuck-menu .category-menu-toggle-btn:focus-visible {
    background: linear-gradient(135deg, #052d78, #064982) !important;
    outline: 3px solid rgba(0, 159, 227, 0.22);
}

@media (max-width: 991px) {
    .psa-storefront__hero {
        min-height: auto;
        padding: 3rem 0;
    }

    .psa-storefront__hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .psa-storefront__hero {
        padding: 2.5rem 0;
    }

    .psa-storefront__hero h1 {
        font-size: clamp(2.1rem, 10vw, 2.75rem);
    }

    .psa-storefront__hero-brand {
        max-width: 235px;
    }

    .psa-storefront__section {
        padding-bottom: 2.75rem;
        padding-top: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psa-storefront__quick-links > a,
    .psa-storefront__search button,
    .psa-storefront__hero-brand {
        transition: none;
    }
}