.bg-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

.opnc-page-bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.opnc-page-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.opnc-page-bg-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

body.opnc-has-page-bg > :not(#opnc-page-bg):not(#opnc-page-bg *) {
    position: relative;
    z-index: 1;
}

body.opnc-has-page-bg #main-header,
body.opnc-has-page-bg header#main-header {
    z-index: 50;
}

.og-emblem-btn {
    padding: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
}

.og-emblem--dim {
    opacity: 0.35;
    cursor: pointer;
}

.og-emblem--dim:hover {
    opacity: 0.55;
}

.og-emblem--verified {
    opacity: 1;
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    inset: 0;
    z-index: 0;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}
.carousel-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.carousel-content.active {
    opacity: 1;
    transform: translateY(0);
}

.drawer-panel {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-panel.open {
    transform: translateX(0);
}
.drawer-panel-left {
    transform: translateX(-100%);
}
.drawer-panel-left.open {
    transform: translateX(0);
}

.overlay-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.overlay-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.filter-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.filter-accordion.open .filter-accordion-content {
    max-height: 600px;
}
.filter-accordion.open .filter-accordion-chevron {
    transform: rotate(180deg);
}

.color-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.color-swatch.active {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.toast {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.nav-link-active {
    opacity: 1;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

@keyframes scroll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.product-card:hover .product-card-secondary {
    opacity: 1;
}
.product-card-secondary {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-oos-media {
    filter: blur(2px) brightness(0.72);
    transition: filter 0.3s ease;
}

.product-card:hover .product-oos-media {
    filter: blur(0) brightness(1) grayscale(0);
}

.product-oos-overlay {
    backdrop-filter: blur(1px);
}

.field-help {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.admin-form-section {
    border: none;
    padding: 0;
    margin: 0;
}

.admin-form-section legend {
    padding: 0;
}

.admin-drop-zone--active {
    border-color: rgba(200, 230, 0, 0.6);
    background: rgba(200, 230, 0, 0.04);
}

.admin-aspect-wireframe {
    border: 1px dashed rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px;
}

.admin-aspect-wireframe--34 {
    width: 48px;
    height: 64px;
}

.admin-aspect-wireframe--169 {
    aspect-ratio: 16 / 9;
    min-height: 72px;
}

.admin-gallery-thumb img {
    display: block;
}