/** Shopify CDN: Minification failed

Line 374:0 Unexpected "}"

**/
/* >>>>>>>>>>>>>>>>>>>>>>> OVERRIDES <<<<<<<<<<<<<<<<<<<<<<<<<< */

/* Move header icons closer to right edge */
.header__icons {
    padding-right: 0 !important;
    margin-right: -1rem;
}

@media screen and (min-width: 990px) {
    .header__icons {
        margin-right: -1.5rem;
    }
}

.header__heading {
    position: relative !important;
    left: 0px;
    bottom: 0.375rem;
    z-index: var(--zp-z-header-content, 1030) !important;
}

.header__heading-link,
.header__heading-logo,
.header__heading-logo-wrapper {
    z-index: var(--zp-z-header-content, 1030) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Soft glow behind logo - light cream shadow for contrast */
.header__heading-logo,
.header__heading-logo img {
    filter: drop-shadow(0 0 8px rgba(255, 250, 230, 0.22)) !important;
}

@media screen and (max-width: 749px) {
    .header__heading-logo-wrapper {
        width: 12rem !important;
    }
}

/* ========================= */
/*    HEADER BASE + VARS     */
/* ========================= */

.header {
    position: relative;
    z-index: 205;

    /* geometry + reusable vars */

    /* brass panel shapes */
    --header-panel-right-skew: 10deg;
    --header-panel-left-skew: -7deg;

    /* shared widths (trimmed on mobile to avoid horizontal overflow) */
    --header-decor-width-desktop: var(--page-width-max);
    --header-decor-width-mobile: 749px;
    --header-decor-width: var(--header-decor-width-desktop);
    --header-decor-width-effective: var(--header-decor-width);

    --header-panel-right-top: -535px;
    --header-panel-right-height: 340px;

    --header-panel-left-top: -345px;
    --header-panel-left-height: 260px;

    /* shadow behavior */
    --header-shadow-offset: -245px; /* how far below the brass edge the shadow starts */
    --header-shadow-extra-height: 160px; /* how much further down than the brass it extends */

    /* optional: different skew for the shadow sheets (can be same as panels) */
    --header-shadow-right-skew: calc(var(--header-panel-right-skew) + 4deg);
    --header-shadow-left-skew: calc(var(--header-panel-left-skew) - 2deg);

    /* MOBILE VISIBILITY TWEAK (variables live here, overridden below) */
    --header-mobile-right-decor-visible: 0px; /* on mobile set to ~1rem..3rem */

    height: 3.5rem;
    max-height: 100%;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    transition: background 0.3s ease-out, background-image 0.3s ease-out;
    overflow: visible;
    max-width: var(--page-width-max);
}

/* Ensure header shadows aren’t clipped on mobile Safari/Chrome while cutting horizontal bleed */
/* Using overflow-x: clip instead of hidden - clip doesn't create a scroll container,
   so overflow-y: visible works correctly (with hidden, browser treats visible as auto) */
.section-header,
sticky-header,
.header-wrapper {
    overflow: visible;
}

/* Ensure the entire header stack stays above search overlay */
.section-header.shopify-section-group-header-group,
.section-header {
    z-index: 300;
}

.header-wrapper,
header.header {
    position: relative;
    z-index: 300;
}

/* Ensure header icons are visible above decorations */
.header__icon--cart,
.header__icon--account,
.header__icon--search {
    position: relative;
    z-index: var(--zp-z-header-content, 1030) !important;
}

/* Menu icon (burger/X) above decor, but not the overlay */
.header__icon--menu > span {
    position: relative;
    z-index: var(--zp-z-header-content, 1030);
}

/* Header icons brass color */
.header__icon--search,
.header__icon--cart,
.header__icon--account,
.header__icon--menu {
    color: var(--zp-color-brass-light);
}

.header__icon--search svg,
.header__icon--cart svg,
.header__icon--account svg,
.header__icon--menu .icon-hamburger path {
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
}

.header__icon--menu .icon-close path {
    fill: var(--zp-color-brass-light) !important;
    stroke: var(--zp-color-brass-light) !important;
    stroke-width: 1px !important;
}

.header__icon--menu svg,
.header__icon--search .icon,
.header__icon--cart .icon,
.header__icon--account .icon,
.header__icon--menu .icon {
    color: var(--zp-color-brass-light) !important;
}

.header__icon--search:hover,
.header__icon--cart:hover,
.header__icon--account:hover,
.header__icon--menu:hover {
    color: var(--zp-color-brass-lighter);
}

.header__icon--search:hover svg,
.header__icon--cart:hover svg,
.header__icon--account:hover svg,
.header__icon--menu:hover svg,
.header__icon--search:hover .icon,
.header__icon--cart:hover .icon,
.header__icon--account:hover .icon,
.header__icon--menu:hover .icon {
    color: var(--zp-color-brass-lighter) !important;
}

/* Profile avatar — brass colors to match header */
.header__icon--account shop-user-avatar,
.menu-drawer__account shop-user-avatar {
    --shop-avatar-bg: var(--zp-color-brass-dark);
    --shop-avatar-color: var(--zp-color-brass-golden);
}

/* Ensure navigation links are visible above brass panels */
.header__inline-menu {
    position: relative;
    z-index: var(--zp-z-header-content, 1030) !important;
}

/* Navigation links - Apply zp-nav-link utility styles to header elements
   See assets/zp-nav-link.css for the utility class definition */
.header__inline-menu a,
.header__menu-item,
.header__menu-item span,
.list-menu--inline a {
    color: var(--zp-color-brass-dark);
    font-weight: 500;
    font-size: 1.5rem;
    text-shadow: none;
    transition: color 0.26s ease, transform 0.26s ease, text-shadow 0.3s ease;
    padding: 0.2rem 0.3rem;
    margin: 0 0.2rem;
    position: relative;
    text-decoration: none;
}

.header__menu-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: radial-gradient(ellipse 80% 50% at center, rgba(255, 180, 80, 0.12) 0%, rgba(255, 245, 180, 0.22) 5%, rgba(255, 255, 240, 0.18) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: -1;
}

.header__inline-menu a:hover,
.header__menu-item:hover,
.header__menu-item:hover span,
.list-menu--inline a:hover {
    color: var(--zp-color-brass);
    text-decoration: none !important;
    transform: scale(1.02);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.header__menu-item:hover::before {
    opacity: 1;
}

/* Active page underline styling */
.header__menu-item[aria-current="page"],
.list-menu--inline a[aria-current="page"] {
    position: relative;
    text-decoration: none !important;
}

.header__menu-item[aria-current="page"] span,
.list-menu--inline a[aria-current="page"] span {
    text-decoration: none !important;
}

.header__menu-item[aria-current="page"]::after,
.list-menu--inline a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 0.4rem;
    left: 6%;
    width: 86%;
    height: 2px;
    background-color: var(--zp-color-brass);
}

/* Remove default header border */
.header-wrapper--border-bottom {
    border-bottom: none !important;
}

.section-header::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--page-width-max);
    top: 100%;
    height: 3.6rem;
    pointer-events: none;
    background: linear-gradient(
            to bottom,
            rgba(54, 31, 12, 0.03),
            rgba(54, 31, 12, 0)
    );
    z-index: 1;
}

.section-header,
.header-wrapper,
header.header {
  overflow-x: clip;
}


/* Mobile overrides ONLY variables (keeps all vars "on top") */
@media screen and (max-width: 749px) {
    header.header {
        /* bring brass sheets down a bit and keep shadows hugging the header */
        --header-panel-right-top: -340px;
        --header-panel-right-height: 260px;


        --header-panel-left-top: -205px;
        --header-panel-left-height: 220px;

        --header-shadow-offset: -135px;
        --header-shadow-extra-height: 60px;

        --header-panel-right-skew: 15deg;
        --header-shadow-right-skew: 23deg;  /* less steep for softer shadow effect */
        --header-shadow-left-skew: -14deg;  /* less steep for softer shadow effect */

        /* clamp width to viewport on mobile to avoid horizontal scroll */
        --header-decor-width: var(--header-decor-width-mobile);

        height: 3.5rem;     /* shrink at top, same as desktop */
        min-height: 0;
    }

    /* Mobile sticky header */
    .shopify-section-header-sticky header.header {
        box-sizing: content-box !important;
        height: 3.5rem !important;
        min-height: 3.5rem !important;
        padding-bottom: 3rem !important;
        margin-bottom: -3rem !important;
    }

    .section-header,
    .section-header.shopify-section-group-header-group {
        z-index: 300;
    }

    .header-wrapper,
    header.header {
        z-index: 300;
    }
}

    /* Mobile animation fix: panels drop from off-screen for visible "coming from top" effect */
    /* Use longer duration and mobile-specific keyframes */
    /* More extreme initial skew for dramatic "swinging in" effect */
    /* Very large drop distance (-5000px) for dramatic drop from way above screen */
    /* Gentle overshoot easing (1.10) creates ~10% subtle bounce past final position */
    header.header::before {
        --skewY-init: 35deg; /* start more skewed than final 15deg, swings in dramatically */
        --drop-distance: -5000px; /* very large distance - starts way above viewport */
        --ease-out-slow: cubic-bezier(0.22, 1.10, 0.36, 1); /* gentle overshoot for subtle bounce */
        --skew-in-time: 5.0s; /* slow duration for smooth, graceful motion */
        animation-name: skewInHeaderDecorMobile;
        animation-delay: 1.2s; /* increased delay for page to fully render before animation */
    }

    header.header::after {
        --skewY-init: -30deg; /* start more skewed than final -7deg, swings in dramatically */
        --drop-distance: -5000px; /* very large distance - starts way above viewport */
        --ease-out-slow: cubic-bezier(0.22, 1.10, 0.36, 1); /* gentle overshoot for subtle bounce */
        --skew-in-time: 5.0s; /* slow duration for smooth, graceful motion */
        animation-name: skewInHeaderDecorMobile;
        animation-delay: 1.2s; /* increased delay for page to fully render before animation */
    }

    header.header .header-shadow-right {
        --skewY-init: 38deg; /* slightly more than brass for layered effect */
        --drop-distance: -5000px; /* very large distance - starts way above viewport */
        --ease-out-slow: cubic-bezier(0.22, 1.10, 0.36, 1); /* gentle overshoot for subtle bounce */
        --skew-in-time: 5.0s; /* slow duration for smooth, graceful motion */
        animation-name: skewInHeaderDecorMobile;
        animation-delay: 1.25s; /* slightly after brass panels */
        top: calc(var(--header-panel-right-top) + var(--header-shadow-offset) + 35px); /* lower on mobile */
    }

    header.header .header-shadow-left {
        --skewY-init: -33deg; /* slightly more than brass for layered effect */
        --drop-distance: -5000px; /* very large distance - starts way above viewport */
        --ease-out-slow: cubic-bezier(0.22, 1.10, 0.36, 1); /* gentle overshoot for subtle bounce */
        --skew-in-time: 5.0s; /* slow duration for smooth, graceful motion */
        animation-name: skewInHeaderDecorMobile;
        animation-delay: 1.25s; /* slightly after brass panels */
    }
}

/* header content above brass + shadows */
.header > *:not(.header__inline-menu) {
    position: relative;
    z-index: 10;
}

/* ========================= */
/*      SKEW ANIMATIONS      */
/* ========================= */

@keyframes skewInHeaderDecor {
    from {
        transform: translate(-50%, 0) skewY(var(--skewY-init));
    }
    to {
        transform: translate(-50%, 0) skewY(var(--skewY));
    }
}

/* Mobile animation: panels drop from off-screen AND skew in */
@keyframes skewInHeaderDecorMobile {
    from {
        transform: translate(-50%, var(--drop-distance, -250px)) skewY(var(--skewY-init));
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0) skewY(var(--skewY));
        opacity: 1;
    }
}

@keyframes skewOutHeaderDecor {
    from {
        transform: translate(-50%, 0) skewY(var(--skewY));
    }
    to {
        transform: translate(-50%, 0) skewY(var(--skewY-init));
    }
}

/* Swing up and out animation for when sticky header activates */
/* Includes slight skew nudge before swinging up (reverse of opening bounce) */
@keyframes swingUpHeaderDecor {
    0% {
        transform: translate(-50%, 0) skewY(var(--skewY));
        opacity: 1;
    }
    12% {
        transform: translate(-50%, 0) skewY(calc(var(--skewY) * 1.05));
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -800px) skewY(var(--skewY-init));
        opacity: 0;
    }
}

/* Swing down and in animation for when sticky header deactivates */
@keyframes swingDownHeaderDecor {
    from {
        transform: translate(-50%, -800px) skewY(var(--skewY-init));
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0) skewY(var(--skewY));
        opacity: 1;
    }
}

/* ========================= */
/*   BRASS PANELS + GLOW    */
/* ========================= */

/* Header Horizontal panel */
header.header {
    box-shadow: none;
}

/* Header Cross panels */
header.header::before,
header.header::after {
    --skewY-init: 0deg;
    --ease-out-slow: cubic-bezier(0, 1.45, 0.4, 1);
    --skew-in-time: 0.85s;

    content: "";
    position: absolute;

    left: 50%;
    width: var(--header-decor-width-effective);
    max-width: none;

    transition: box-shadow 0.25s ease-out, opacity 0.3s ease-out;

    /* GPU acceleration hint for smoother animations */
    will-change: transform, opacity;
}

/* -> Right side brass */
header.header::before {
    --skewY: var(--header-panel-right-skew);

    top: var(--header-panel-right-top);
    height: var(--header-panel-right-height);
    z-index: var(--zp-z-header-decor, 1020); /* above drawer menu */

    background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0.85) 35%,
            rgba(254, 237, 194, 0.85) 85%
    ),
    url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");

    /* 👇 core tweak: on mobile, shift this sheet slightly LEFT,
       so more of its RIGHT edge is visible in the viewport. */
    left: calc(50% - var(--header-mobile-right-decor-visible));

    transform-origin: bottom left;
    animation: skewInHeaderDecor var(--skew-in-time) var(--ease-out-slow) forwards;

    box-shadow: none;

    /* brass glow around the right panel */
    filter: drop-shadow(0 0 3px rgba(255, 220, 160, 0.75)) drop-shadow(0 0 35px rgba(255, 210, 140, 0.4));

    pointer-events: none;
}

/* -> Left side brass */
header.header::after {
    --skewY: var(--header-panel-left-skew);

    top: var(--header-panel-left-top);
    height: var(--header-panel-left-height);
    z-index: calc(var(--zp-z-header-decor, 1020) + 2); /* above left shadow */

    background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0.85) 35%,
            rgba(254, 237, 194, 0.85) 85%
    ),
    url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");

    transform-origin: bottom right;
    animation: skewInHeaderDecor var(--skew-in-time) var(--ease-out-slow) forwards;

    box-shadow: none;

    /* brass glow for left panel */
    filter: drop-shadow(0 0 35px rgba(255, 220, 160, 0.28)) drop-shadow(0 0 5px rgba(255, 210, 140, 0.7));

    pointer-events: none;
}

/* ========================= */
/*     PANEL SHADOW BLOCKS   */
/* ========================= */

/* Base: both shadow divs are real blocks */
header.header .header-shadow-right,
header.header .header-shadow-left {
    position: absolute;
    left: 50%;
    width: var(--header-decor-width-effective);
    max-width: none;
    pointer-events: none;

    /* visually hide the &nbsp; / . text */
    font-size: 0;
    line-height: 0;

    /* soft shadow look */
    filter: blur(50px);
    opacity: 0.7;

    /* animation props shared with panels */
    --skewY-init: 0deg;
    --ease-out-slow: cubic-bezier(0, 1.45, 0.4, 1);
    --skew-in-time: 0.85s;

    /* let animation control transform */
    animation: skewInHeaderDecor var(--skew-in-time) var(--ease-out-slow) forwards;
    animation-delay: 0.1s; /* 👈 delay so they trail the brass */

    transition: opacity 0.3s ease-out;

    /* GPU acceleration hint for smoother animations */
    will-change: transform, opacity;
}

/* Right shadow – above drawer menu, under brass panels */
header.header .header-shadow-right {
    --skewY: var(--header-shadow-right-skew);

    z-index: calc(var(--zp-z-header-decor, 1020) - 1); /* above drawer menu, under brass panels */

    top: calc(var(--header-panel-right-top) + var(--header-shadow-offset) - 40px); /* extra -40px to raise shadow */
    height: calc(var(--header-panel-right-height) + var(--header-shadow-extra-height));

    /* 👇 match the right brass shift */
    left: calc(50% - var(--header-mobile-right-decor-visible));

    transform-origin: bottom left;

    background: linear-gradient(
            to right,
            rgba(50, 12, 6, 1) 0%,
            rgba(50, 12, 6, 0.9) 65%,
            rgba(50, 12, 6, 0.75) 100%
    );
}

/* Left shadow – above right brass panel for layered effect */
header.header .header-shadow-left {
    --skewY: var(--header-shadow-left-skew);

    z-index: calc(var(--zp-z-header-decor, 1020) + 1); /* above right brass panel */

    top: calc(var(--header-panel-left-top) + var(--header-shadow-offset));
    height: calc(var(--header-panel-left-height) + var(--header-shadow-extra-height));

    transform-origin: bottom right;

    background: linear-gradient(
            to left,
            rgba(50, 12, 6, 0.8) 0%,
            rgba(50, 12, 6, 0.7) 65%,
            rgba(50, 12, 6, 0.45) 100%
    );
}

/* ========================= */
/*      STICKY BEHAVIOR      */
/* ========================= */

/* Sticky header with brass background */
.shopify-section-header-sticky .header,
.shopify-section-header-sticky header.header {
    box-sizing: content-box !important;
    padding-top: 0 !important;
    padding-bottom: 3rem !important;
    margin-bottom: -3rem !important;
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    box-shadow: 0 4px 12px -2px rgba(54, 31, 12, 0.15);

    /* Brass background when sticky */
    background-image: linear-gradient(
        51deg,
        rgba(243, 174, 136, 0.95) 32%,
        rgba(254, 237, 194, 1) 85%
    ),
    url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");
    background-size: cover;
    background-position: center;
}


/* Widescreen: constrain sticky header to max page width */
@media screen and (min-width: 2560px) {
    sticky-header {
        max-width: 2560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Ensure header hides completely when scrolling down */
.shopify-section-header-hidden {
    top: -10rem !important;
}

/* Smooth transition for header reveal/hide - only when sticky */
.shopify-section-header-sticky,
.shopify-section-header-sticky sticky-header {
    transition: top 0.3s ease-out !important;
}

/* Instant transition when returning to top (not sticky) */
.section-header:not(.shopify-section-header-sticky),
.section-header:not(.shopify-section-header-sticky) sticky-header {
    transition: none !important;
}

/* Smooth content shift when header height changes */
.section-header + *,
.section-header ~ main,
.section-header ~ #MainContent {
    transition: margin-top 0.3s ease-out, scroll-margin-top 0.3s ease-out !important;
}

/* Transparent header at top (not sticky) - fade out animation */
.section-header:not(.shopify-section-header-sticky) sticky-header,
.section-header:not(.shopify-section-header-sticky) .header-wrapper,
.section-header:not(.shopify-section-header-sticky) .header,
.section-header:not(.shopify-section-header-sticky) header.header {
    animation: headerBgFadeOut 0.5s ease-out forwards;
    background-color: transparent !important;
}

/* Ensure header wrapper has no background at rest (non-sticky state) */
.section-header:not(.shopify-section-header-sticky) .header-wrapper,
.section-header:not(.shopify-section-header-sticky) sticky-header {
    background: transparent !important;
    background-color: transparent !important;
}


/* Sticky header - instant background */
.shopify-section-header-sticky .header,
.shopify-section-header-sticky header.header {
    animation: none;
}

/* Logo fade-in only when returning to top from hidden state */
.section-header.coming-from-hidden .header__heading-logo,
.section-header.coming-from-hidden .header__heading-logo-wrapper {
    animation: logoFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes headerBgFadeOut {
    0% {
        background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0.95) 32%,
            rgba(254, 237, 194, 1) 85%
        ),
        url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");
    }
    100% {
        background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0) 32%,
            rgba(254, 237, 194, 0) 85%
        ),
        url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");
        background-color: transparent;
    }
}

@keyframes headerBgFadeIn {
    0% {
        background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0) 32%,
            rgba(254, 237, 194, 0) 85%
        ),
        url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");
    }
    100% {
        background-image: linear-gradient(
            51deg,
            rgba(243, 174, 136, 0.95) 32%,
            rgba(254, 237, 194, 1) 85%
        ),
        url("/cdn/shop/files/brushed-brass-texture.jpg?v=1722104006&width=800");
    }
}

/* Swing brass panels up and out when sticky header is active */
.shopify-section-header-sticky sticky-header header::before,
.shopify-section-header-sticky sticky-header header::after {
    animation: swingUpHeaderDecor 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Swing shadows up and out when sticky header is active */
.shopify-section-header-sticky sticky-header .header-shadow-right,
.shopify-section-header-sticky sticky-header .header-shadow-left {
    animation: swingUpHeaderDecor 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================= */
/*      Collections pages    */
/* ========================= */

/* Reduce gap between header and page content on mobile */
@media screen and (max-width: 749px) {
    /* Target first section padding on mobile */
    #MainContent > .shopify-section:first-child [class*="section-"][class*="-padding"],
    #MainContent > .shopify-section:first-child .page-width {
        padding-top: 0.5rem !important;
    }

    /* Remove padding from first collection-list-wrapper - direct target */
    .collection-list-wrapper[class*="-padding"] {
        padding-top: 0 !important;
    }

    /* Target second section (often carousel after main-page) - except contact */
    #MainContent > .shopify-section:nth-child(2) [class*="section-"][class*="-padding"]:not(.contact) {
        padding-top: 0 !important;
    }

    /* Collection pages - more top spacing for product grid below sun */
    [id*="__product-grid"] {
        margin-top: 6rem !important;
    }

}

/* Desktop - pages content pull up closer to sun */
@media screen and (min-width: 750px) {
    /* Pull up first section after zp-header-section on pages */
    .zp-header-section + .shopify-section .collection-list-wrapper {
        margin-top: -8rem !important;
        padding-top: 0 !important;
    }

    .contact {
        padding-top: 2rem;
    }
}

/* Desktop below 2200px - collection pages need less top padding */
@media screen and (min-width: 750px) and (max-width: 2199px) {
    [id*="__product-grid"] {
        margin-top: 0 !important;
    }
    [id*="__product-grid"] [class*="section-"][class*="-padding"] {
        padding-top: 40px !important;
    }
}

/* Collection facets - cap width */
.facets-wrapper,
#main-collection-filters {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


.zp-header-section {
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    padding: 0 !important;

    /* Removed overflow-x: clip on .header-sun-component for mobile
       to fix iOS Safari shadow clipping issue.
       Horizontal scroll is prevented by html, body { overflow-x: hidden; } below. */
}

/* ========================= */
/*  DESKTOP SIZE OVERRIDES   */
/* ========================= */

/* Desktop header padding */
@media screen and (min-width: 750px) {
    header.header {
        padding-top: 0.5rem !important;
    }
}

/* Scale down logo on desktop+ (750px and above) */
@media screen and (min-width: 750px) {
    .header__heading-logo-wrapper {
        max-width: 65% !important;
        position: relative;
        top: -0.35rem;
    }
}

/* Header decors on desktop+ (750px and above) */
@media screen and (min-width: 750px) {

    /* Sticky header height on desktop */
    .shopify-section-header-sticky .header,
    .shopify-section-header-sticky header.header {
        box-sizing: content-box !important;
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        padding-bottom: 3rem !important;
        margin-bottom: -3rem !important;
    }

    header.header {
        --header-panel-right-top: -545px;
        --header-panel-left-top: -355px;
    }

    /* Raise right shadow on desktop */
    header.header .header-shadow-right {
        top: calc(var(--header-panel-right-top) + var(--header-shadow-offset) - 75px) !important;
    }

    /* Left shadow on desktop */
    header.header .header-shadow-left {
        top: calc(var(--header-panel-left-top) + var(--header-shadow-offset) + 10px) !important;
    }
}

/* ========================= */
/*     CART COUNT BUBBLE     */
/* ========================= */

/* Cart bubble - dark brass background */
.cart-count-bubble {
    background-color: var(--zp-color-brass-dark, #7a5c0c) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}