/*===========================
    00_GLOBAL SETTINGS & VARS
===========================*/
:root {
    --hover-weight: bold;
    --fave-text-shadow: #0000009a 0px 0 3px;
    --item-blur: blur(25px);
    --item-blur-opacity: 0.6;
    --basic-font-size: 1rem;
    --big-font-size: 1.2rem;
    --small-font-size: 0.85rem;

}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    cursor: crosshair;
    -webkit-user-select: none; /* Safari */
    user-select: none;         /* Standard */
}

::-webkit-scrollbar {
    display: none; 
}

.site-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}


#overlay-content {
    -webkit-user-select: text;
    user-select: text;
}

#snipcart,
.snipcart-modal {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/*CURSOR*/
.info-zone .p-id-name,
.info-zone .p-price,
.info-zone .p-size,
.info-zone .p-brand,
.info-zone .p-material,
.info-zone .p-measurements,
#overlay-content {
    cursor: text;
}


/*===========================
    01_LOADING SCREEN + MOBILE BLOCKER
===========================*/
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center; align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loader-text {
    font-size: var(--basic-font-size);
    letter-spacing: 2px;
    animation: LoadingPulse 2s infinite ease-in-out;
}

@keyframes LoadingPulse {
    0% {opacity: 0.2;}
    50% {opacity: 1;}
    100% {opacity: 0.2;}
}

/* Hide the blocker by default on desktop */
#mobile-blocker {
    display: none;
}

@media only screen and (max-width: 1024px) {
    /* 1. Hide the actual website content */
    body > *:not(#mobile-blocker) {
        display: none !important;
    }

    /* 2. Show the blocker as a full-screen overlay */
    #mobile-blocker {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 1000000;
        justify-content: center;
        align-items: center;
        font-family: 'Courier New', Courier, monospace;
        text-align: center;
    }

    /* 3. Style the "loading" text and spinner */
    .blocker-content p {
        text-transform: lowercase;
        font-size: 14px;
        margin-top: 20px;
        color: #000;
    }

    /* Simple brutalist loader */
    .loader {
        width: 40px;
        height: 40px;
        border: 2px solid #000;
        border-top: 2px solid transparent;
        border-radius: 50%;
        margin: 0 auto;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

/*===========================
    02_SIDE HEADER & NAV
===========================*/
.side-header { 
    display: flex;
    width: 15%; 
    height: 100%;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    justify-content: right;
}

.brand-logo {
    position: fixed;
    bottom: 10px; 
    right: 10px;
    z-index: 100;
    margin: 0; 
    width: 15%;
    font-size: auto;
    text-align: right;
}
#nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.nav-item {
    cursor: pointer;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 2px 0;
    margin: 0;
    flex-wrap: wrap; /* Allows filters to drop below */
}
/* Forces empty spreadsheet rows to act as physical spacing blocks */
.nav-item.spacer {
    height: 1.5rem; /* Matches the approximate height of your normal text links */
    width: 100%;    /* Ensures it spans the full width of the menu */
    padding: 0;
    margin: 0;
    visibility: hidden; /* Keeps it completely invisible */
}
.nav-item:hover {
    text-shadow: var(--fave-text-shadow);
}

.nav-item.active {
    font-weight: var(--hover-weight);
}

.circle {
    font-size: var(--basic-font-size);
    margin-left: 5px;
}

/* Cart Nav */
.nav-cart-item {
    visibility: hidden !important; /* Invisible but holds its space */
    pointer-events: none;
}

.nav-cart-item.has-items {
    visibility: visible !important; 
    pointer-events: auto;
    font-weight: var(--hover-weight) !important;
}

/* Filters UI */
.filter-list {
    width: 100%;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column; 
    align-items: flex-end;
    padding: 5px 0 0 0;
    text-shadow: none;
}

.filter-list:hover {
    text-shadow: none !important;   
    opacity: 1; 
}

.filter-tag {
    text-transform: lowercase;
    font-size: var(--small-font-size);
    cursor: pointer;
    margin: 2px 0;
    opacity: 0.6;
    transition: opacity 0.2s, font-weight 0.2s;
}

.filter-tag:hover,
.filter-tag.active {
    font-weight: var(--hover-weight);
    opacity: 1; 
    text-shadow: none;
}

/* The Clear Button (Under each category) */
.clear-filters-btn {
    width: 100%;
    text-align: right;
    text-transform: lowercase;
    font-size: var(--small-font-size);
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 15px;
    color: #888;
    visibility: hidden; /* Invisible but holds its space */
    pointer-events: none;
    text-shadow: none;
}

.clear-filters-btn.active {
    visibility: visible;
    pointer-events: auto;
}

.clear-filters-btn:hover {
    color: #000;
    font-weight: var(--hover-weight);
    text-shadow: none;
}
/*===========================
    03_LAYOUT ZONES (VISUAL & INFO)
===========================*/
.visual-zone { 
    width: 65%;
    height: 100%;
    padding: 0px 5px;
    overflow-y: auto;
}

#visual-grid {
    display: flex;
    height: 100vh; 
    overflow: hidden; 
}

.visual-scroll-column {
    flex: 1; 
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-zone { 
    width: 20%; 
    height: 100%;
    overflow: hidden; 
    position: relative;
    padding: 0px 10px;
}

.info-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: auto; 
    padding-bottom: 50px;
}

#info-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; 
}

/* Shared Scroll Settings */
.visual-scroll-column, 
#info-grid {
    position: relative;
    height: 100vh;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;  
    scroll-behavior: smooth; 
}

/*===========================
    04_PIECE UNITS & TYPOGRAPHY
===========================*/
.piece-unit {
    break-inside: avoid; 
    background-color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.piece-unit img {
    width: 100%;
    height: auto;
    display: block;
}

.piece-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: bold;
    margin-bottom: 5px;
}

.piece-footer {
    display: flex;
    justify-content: space-between;
}

.piece-id { font-weight: bold; margin-bottom: 5px; }
.p-brand { display: block; font-size: var(--small-font-size); margin-top: 4px; opacity: 0.8; }
.p-material {display: block; font-size: var(--small-font-size); line-height: 1.4; text-transform: lowercase; color: #000; margin-top: 2px; }
.p-measurements { display: block; font-size: var(--small-font-size);; line-height: 1.4; text-transform: lowercase; color: #000; margin-bottom: 2px; }
.p-brand { display: block; font-size: var(--small-font-size);; line-height: 1.4; text-transform: lowercase; color: #000; margin-bottom: 2px; }
.p-size { display: block; margin-top: 5px; font-size: var(--small-font-size);; line-height: 1.4; text-transform: uppercase; color: #000; font-weight: bold; }

/* The Add Button */
.info-zone .add-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background-color: transparent;
    color: black;
    border: none;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.info-zone .piece-unit.selected-twin .add-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.info-zone .piece-unit.selected-twin .add-btn:hover {
    text-shadow: var(--fave-text-shadow);
}

/*===========================
    05_STATES & OVERLAYS 
===========================*/

/* --- A. FOCUS MODE (Click to Sharpen) --- */
[data-hover-id] {
    transition: filter 0.4s ease, opacity 0.4s ease;
    cursor: pointer; 
}

body.item-is-clicked [data-hover-id] {
    filter: blur(5px);
    opacity: 0.3;
}

body.item-is-clicked [data-hover-id].selected-twin {
    filter: blur(0px);
    opacity: 1;
}

body.item-is-clicked .visual-scroll-column,
body.item-is-clicked #info-grid {
    overflow: hidden; /* Lock scrolling */
}

/* --- B. FILTERED GHOSTS --- */

/* 1. Disable clicks on the main container, but DO NOT blur the whole box here */
.piece-unit.is-filtered-out {
    pointer-events: none !important; 
    cursor: default;
}

/* 2. Apply your heavy 25px blur ONLY to the images */
.visual-scroll-column .piece-unit.is-filtered-out img {
    filter: var(--item-blur) !important;
    opacity: var(--item-blur-opacity) !important;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

/* 3. Apply a tighter, line-specific blur to the Info Zone text */
.info-zone .piece-unit.is-filtered-out .p-id-name,
.info-zone .piece-unit.is-filtered-out .p-price,
.info-zone .piece-unit.is-filtered-out .p-size,
.info-zone .piece-unit.is-filtered-out .p-brand,
.info-zone .piece-unit.is-filtered-out .p-material,
.info-zone .piece-unit.is-filtered-out .p-brand,
.info-zone .piece-unit.is-filtered-out .p-measurements {
    filter: blur(8px) !important; /* Tighter blur so it looks like redacted text */
    opacity: 0.4 !important;      /* Slightly more faded */
    transition: filter 0.4s ease, opacity 0.4s ease;
}

/* 4. Completely hide the "Add to Cart" button when filtered out */
.info-zone .piece-unit.is-filtered-out .add-btn {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- C. IN CART / SOLD STATE LOCKDOWNS --- */
.piece-unit.is-sold {
    position: relative;
    pointer-events: none !important; 
    cursor: default;
    user-select: none;
}

.piece-unit.is-sold .add-btn {
    display: none !important;
}

/* --- D. TEXT BLUR & SHADOW (INFO ZONE) --- */
.info-zone .piece-unit.is-sold .p-id-name,
.info-zone .piece-unit.is-sold .p-price,
.info-zone .piece-unit.is-sold .p-size,
.info-zone .piece-unit.is-sold .p-brand,
.info-zone .piece-unit.is-sold .p-material,
.info-zone .piece-unit.is-sold .p-measurements {
    filter: blur(8px) !important;
    opacity: 0.7;
}

#info-grid .piece-unit.is-sold::after {
    display: none !important; 
}

.info-zone .piece-unit.is-in-cart .p-id-name,
.info-zone .piece-unit.is-in-cart .p-price,
.info-zone .piece-unit.is-in-cart .p-size,
.info-zone .piece-unit.is-in-cart .p-brand,
.info-zone .piece-unit.is-in-cart .p-material,
.info-zone .piece-unit.is-in-cart .p-measurements {
    text-shadow: 0px 0px 14px #000000cb;
    transition: text-shadow 0.3s ease; 
}

/* --- E. IMAGE OVERLAYS (VISUAL ZONE) --- */
.visual-scroll-column .piece-unit {
    position: relative !important; 
    display: flex;
    justify-content: center;
    align-items: left;
}

.visual-scroll-column .piece-unit.is-sold img,
.visual-scroll-column .piece-unit.is-in-cart img {
    filter: var(--item-blur);
    opacity: var(--item-blur-opacity);
}

.visual-scroll-column .piece-unit.is-sold::after,
.visual-scroll-column .piece-unit.is-in-cart::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Courier New', monospace;
    font-size: var(--big-font-size);
    font-weight: 550;
    color: rgba(255, 255, 255, 0.4);
    z-index: 10;
    pointer-events: none !important;
    letter-spacing: 0.1em;
    text-align: center;
    width: 100%;
}

.visual-scroll-column .piece-unit.is-sold::after { content: "SOLD"; }
.visual-scroll-column .piece-unit.is-in-cart::after { content: "CART"; }

/* --- F. CART BUTTON STATES --- */
.add-btn.in-cart {
    font-weight: var(--hover-weight) !important;
    filter: blur(3px) !important;
    opacity: 0.2;
    pointer-events: none !important;
    cursor: default;
}

.add-btn.in-cart::after {
    filter: none !important;
    opacity: 1;
    font-size: var(--small-font-size);
    vertical-align: middle;
}

/*===========================
    06_TOGGLE POP UP (OVERLAY)
===========================*/
#overlay-curtain {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    width: 100%; height: 100%; 
    z-index: 50;
    overflow-y: auto; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#overlay-curtain.active {
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(12px);
}

#overlay-content {
    white-space: pre-wrap; 
    font-size: var(--small-font-size);
    line-height: 1.4;
    text-transform: none;
    padding-top: 10px;
}

.view-state { display: none; }
.view-state.active { display: block; }
#content-text { font-size: var(--small-font-size); padding: 10px; margin: 0; }

/* =========================================
    07-1_the cart
========================================= */

/* 1. BACKDROP & POSITIONING */
.snipcart-modal {
    position: fixed !important;
    top: 0 !important;
    right: 15% !important; 
    width: 20vw !important; 
    height: 100vh !important;
    background-color: rgb(255, 255, 255) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9999 !important;
    font-family: 'Courier New', Courier, monospace !important;
}
#snipcart *,
.snipcart-modal,
.snipcart-modal__container {
    animation: none !important;
    transition: none !important;
}
/* 2. LAYOUT ENGINE (Fixing the 0px height issue) */
.snipcart-modal__container,
.snipcart-cart-header,
#snipcart * {
    margin: 0 !important;
    padding: 1px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.snipcart-layout__content {
    width:100% !important;
}

/* CART TITLE */
.snipcart-cart-header::before {
    content: "CART";
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: block;
    padding: 5px 5px;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* ITEM LIST */
.snipcart-item-line {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}

.snipcart-item-line__title {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: var(--basic-font-size) !important;
    text-align: left !important;
    display: block !important;
    color: #000 !important;
}

/* ITEM PRICE */
.snipcart-item-quantity {
    width: 100%;
}
.snipcart-item-quantity__total-price {
    font-family: 'Courier New', Courier, monospace !important;
    text-align: left !important;
}
/* TRASH ICON */
.snipcart-button-icon {
    transform: scale(0.8);
}

/* 4. FOOTER & CHECKOUT */
.snipcart-cart__footer {
    display: flex !important;
    flex-direction: column !important;
}
.snipcart-cart__footer-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}
.snipcart-summary-fees.snipcart-cart-summary-fees--reverse {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 50px !important;
}
.snipcart-summary-fees.snipcart-cart-summary-fees--reverse > .snipcart-summary-fees {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}
.snipcart-summary-fees__notice {
    order: 2 !important;
    text-transform: lowercase !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 0.7rem !important;
    display: block !important; 
}
.snipcart-summary-fees__item.snipcart-summary-fees__total {
    display: flex !important;
    flex-direction: column !important; /* Stacks Title and Amount vertically */
    align-items: flex-start !important; /* Flushes everything to the left */
    width: 100% !important;
    padding: 0 !important;
}
.snipcart-summary-fees__title {
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    font-size: var(--big-font-size)!important;
}

.snipcart-summary-fees__amount {
    font-family: 'Courier New', Courier, monospace !important;
    color: #000 !important;
    font-size: var(--big-font-size) !important;
}

/*CHECKOUT*/
#snipcart .snipcart-base-button.snipcart-button-primary {
    display: flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    color: #000 !important;
    background: transparent !important;
    padding: 0 !important;
    width: fit-content !important;
    margin-top: 30px !important;
    transition: all 0.3s ease-in-out;
}
#snipcart .snipcart-base-button.snipcart-button-primary:hover{
    text-shadow: var(--fave-text-shadow);
}
.snipcart-base-button__label {
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    font-size: var(--big-font-size) !important;
}

/*EMPTY CART*/
.snipcart-empty-cart {
    width: 100% !important;
    height: 100% !important;
}
.snipcart-empty-cart__title {
    display: flex !important;
    align-items: flex-start !important; /* This forces the text to the top */
    justify-content: flex-start !important; /* This forces the text to the left */
    font-family: 'Courier New', Courier, monospace !important;
    color: #000 !important;
    font-size: var(--small-font-size) !important;
    height: 100% !important;
    width: 100% !important;
    text-transform: lowercase;
}


/* =========================================
    07-1_THE CHECKOUT
========================================= */

.snipcart__font--subtitle,
.snipcart__box--badge {
    font-family: 'Courier New', Courier, monospace !important;
    color: #000 !important;
    font-size: var(--big-font-size) !important;
    font-weight: bold !important;
}

/* 1. Break the 2-column layout into a single vertical stack */
.snipcart-layout__cols {
    display: flex;
    flex-direction: column !important;
}

/* 2. Push the Order Summary to the TOP (Order 1) */
.snipcart-layout__col:not(.snipcart-layout__col--large) {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 50px !important;
}

/* Un-stick the summary so it scrolls naturally */
.snipcart-cart-summary {
    position: relative !important;
    top: auto !important;
}

/* 3. Push the Billing/Payment forms to the BOTTOM (Order 2) */
.snipcart-layout__col--large {
    order: 2 !important;
    width: 100% !important;
}

/* 4. Make the writing fields visible & identical (Textarea lockdown added) */
#snipcart .snipcart-input__input,
#snipcart .snipcart-textbox,
#snipcart .snipcart-form__select,
#snipcart textarea {
    display: block !important;
    background-color: transparent !important;
    border-radius: 0 !important; 
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    color: #000 !important;
    margin-top: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important; 
    height: 40px !important; 
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    resize: none !important; /* Stops the Street Address box from expanding */
    background: radial-gradient(#0000002b, #ffffff00) !important;
    align-items: center !important;
}
/* Target the specific Dropdown/Typeahead wrappers */
#snipcart .snipcart-typeahead__input,
#snipcart .snipcart-form__select-wrapper,
#snipcart .snipcart-form__select-wrapper select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important; /* Forces the vertical center in the wrapper */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force the actual text inside the dropdown to center */
#snipcart .snipcart-form__select-wrapper select,
#snipcart .snipcart-typeahead__input input {
    line-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    background: radial-gradient(#0000002b, #ffffff00) !important;
}

/* Fix the overlapping arrow icon in the dropdown */
#snipcart .snipcart-form__select-wrapper .snipcart__icon {
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centers the chevron arrow vertically */
    right: 10px !important;
}

/* Style the dropdown suggestions list */
#snipcart .snipcart-typeahead__suggestions {
    background-color: #ffffffe8 !important; /* Make it solid so you can't see through it */
    border-top: none !important; /* Connects it to the input box above */
    z-index: 9999 !important; /* Ensure it stays above all other elements */
    font-family: 'Courier New', Courier, monospace !important;
}

/* Style the individual items in the list */
#snipcart .snipcart-typeahead__suggestion {
    padding: 10px !important;
    color: #000 !important;
    background-color: #ffffff29 !important;
    cursor: pointer !important;
    text-transform: lowercase !important;
    font-size: 12px !important;
}

/* Highlight the item when hovering or navigating with keys */
#snipcart .snipcart-typeahead__suggestion--active,
#snipcart .snipcart-typeahead__suggestion:hover {
    background: radial-gradient(#0000002b, #ffffff00) !important;
    color: #000000 !important;
}

/* 5. Kill the browser's default light-blue Autofill background */
#snipcart input:-webkit-autofill,
#snipcart textarea:-webkit-autofill,
#snipcart select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* 6. Add a shadow when they click into ANY field (Kept your 5px glow preference!) */
#snipcart .snipcart-input__input:focus,
#snipcart .snipcart-textbox:focus,
#snipcart .snipcart-form__select:focus,
#snipcart textarea:focus {
    box-shadow: 0px 0px 5px #000 !important;
    outline: none !important;
}

/* Fix the dropdown arrows for Country/Province */
#snipcart .snipcart-form__select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* 7. Style the Form Labels (Full Name, Email, etc.) */
.snipcart-form__label {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 11px !important;
    color: #000 !important;
    text-transform: uppercase !important;
}

/* 8. Hide "2 PAYMENT" (and any future steps) until they are active */
#snipcart .snipcart-checkout-step--disabled,
#snipcart .snipcart-checkout-step--inactive {
    display: none !important;
}

/* 9. edit button */

/* 1. Force the form footer to spread the buttons apart */
#snipcart .snipcart-form__footer {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important; /* Puts Primary button on right, Back link on left */
    align-items: baseline !important;
    margin-top: 40px !important;
    width: 100% !important;
}

/* 2. Style the resurrected Back link */
#snipcart .snipcart-button-link {
    display: block !important;
    color: #000 !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    text-transform: lowercase !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

#snipcart .snipcart-button-link:hover {
    text-shadow: 0 0 5px #000 !important;
}

/* =========================================
    07-2_THE BILLING
========================================= */


/* Fix the completed Billing summary squish */
#snipcart .snipcart-checkout-step__cols {
    display: flex;
    flex-direction: column !important; /* Stack them vertically instead of a row! */
    gap: 20px !important; /* Adds breathing room between the two blocks */
    text-transform: lowercase;
}

/* Let the inner blocks take up the full width of the sidebar */
#snipcart .snipcart-checkout-step__col {
    width: 100% !important;
}

.snipcart-form__footer {
    justify-content: flex-start !important;
}


/* =========================================
    07-X_THE NUKES
========================================= */

/* 5. NUKE UI ELEMENTS */
.snipcart-cart-header__icon,
.snipcart-cart-header__count,
.snipcart-item-line__media,
.snipcart-cart-header__close-button,
.snipcart-cart-header__title,
.snipcart-test-mode,
.snipcart-item-quantity__label,
.snipcart-item-quantity__quantity,
.snipcart-item-custom-fields,
.snipcart-featured-payment-methods,
.snipcart-base-button__icon,
.snipcart-test-banner__message,
.snipcart-cart-header,
.snipcart-cart-summary-item__quantity {
    display: none !important;
}

#snipcart svg {
    filter: grayscale(100%) brightness(0) !important;
}
/* KILL ALL SNIPCART ANIMATIONS & TRANSITIONS */
#snipcart *,
.snipcart-modal,
.snipcart-modal__container {
    animation: none !important;
    transition: none !important;
}

/* =========================================
   08_MAGNIFIER LENS
========================================= */
.magnifier-lens {
    position: fixed;
    width: 600px; /* Size of the zoom circle */
    height: 600px;
    border-radius: 50%;
    border: 0px solid #000; /* Brutalist sharp border */
    background-color: none;
    background-repeat: no-repeat;
    pointer-events: none; /* Critical: Lets the mouse click "through" it */
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    transform: translate(-50%, -50%);
}

.magnifier-lens.active {
    opacity: 1;
    visibility: visible;
    border: none;
}

/* =========================================
   09_SPAWNED CAROUSEL IMAGES
========================================= */
.spawned-carousel-img {
    position: fixed;
    z-index: 1000;
    cursor: grab;
    animation: SpawnIn 0.3s ease-out forwards;
}

.spawned-carousel-img:active {
    cursor: grabbing;
}

@keyframes SpawnIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}