/* Extracted from index.html */

/* style block 1 */
@keyframes appLoaderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* === Desktop Storefront Redesign ======================================= */

@media (min-width: 681px) {
    body {
        display: block !important;
        min-height: 100vh;
        overflow-x: hidden;
        background:
            radial-gradient(circle at top center, rgba(89, 163, 242, 0.08), transparent 34%),
            var(--body_Background_Colour);
    }

    .DesktopShell {
        width: min(1600px, calc(100vw - 48px));
        margin: 0 auto 56px;
        padding: 18px 0 0;
    }

    .TopBar {
        position: sticky;
        top: 12px;
        z-index: 50;
        display: grid !important;
        grid-template-columns: minmax(220px, auto) minmax(380px, 1fr) auto;
        gap: 20px;
        align-items: center;
        width: 100%;
        min-height: 84px;
        height: auto !important;
        margin: 0;
        padding: 16px 20px;
        border: 1px solid rgba(42, 42, 42, 0.08);
        border-radius: 24px;
        background: rgba(255, 252, 247, 0.88);
        box-shadow: 0 20px 40px rgba(55, 44, 22, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .DesktopHeaderBrand {
        min-width: 0;
    }

    .DesktopHeaderBrand .MainPage {
        width: auto;
        height: auto;
        padding: 0;
        gap: 4px;
        align-items: flex-start;
        justify-content: center;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
    }

    .DesktopBrandWordmark {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: clamp(28px, 2vw, 34px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--Default_Text_Colour);
    }

    .DesktopBrandSubline {
        display: block;
        font-family: 'Afacad', sans-serif;
        font-size: 14px;
        line-height: 1.2;
        color: var(--Muted_Text_Colour);
    }

    .DesktopHeaderSearch {
        width: 100%;
        min-width: 0;
    }

    .Search_Bar {
        width: 100% !important;
        min-width: 0;
        min-height: 56px !important;
        max-height: none !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        border: 1px solid rgba(42, 42, 42, 0.10);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.84);
        color: var(--Default_Text_Colour);
        font-family: 'Inter', sans-serif;
        font-size: 16px !important;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .Search_Bar::placeholder {
        color: var(--Muted_Text_Colour);
        opacity: 0.95;
    }

    .NavButtonDiv {
        width: auto !important;
        height: auto !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .currency-select {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 118px;
        height: 52px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid rgba(42, 42, 42, 0.10);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.84);
        color: var(--Default_Text_Colour);
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .BasketButton,
    .SettingsButton {
        width: 52px !important;
        height: 52px !important;
        max-width: none;
        border-radius: 16px;
        border: 1px solid rgba(42, 42, 42, 0.10);
        background: rgba(255, 255, 255, 0.84);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .BasketButton:hover,
    .SettingsButton:hover,
    .currency-select:hover {
        transform: translateY(-1px);
        border-color: rgba(89, 163, 242, 0.32);
        box-shadow: 0 14px 22px rgba(55, 44, 22, 0.10);
    }

    .BasketButton svg,
    .SettingsButton svg {
        width: 22px;
        height: 22px;
    }

    .SideBar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 14px 0 0;
        padding: 0;
        background: transparent !important;
        box-shadow: none !important;
        align-self: auto !important;
    }

    .desktop-category-ribbon {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        overflow-x: auto;
        padding: 2px 4px 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    }

    .desktop-category-ribbon::-webkit-scrollbar {
        display: none;
    }

    .Category_Button {
        width: auto !important;
        min-width: max-content !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(42, 42, 42, 0.08) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        box-shadow: none !important;
        justify-content: center !important;
    }

    .Category_Button:hover {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(89, 163, 242, 0.22) !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(55, 44, 22, 0.08) !important;
    }

    .Category_Button.Active {
        background: var(--Primary_Button_Colour) !important;
        border-color: var(--Primary_Button_Colour) !important;
        box-shadow: 0 14px 30px rgba(89, 163, 242, 0.28) !important;
    }

    .Category_Button_Heading {
        gap: 10px !important;
    }

    .category-label,
    .Category_Button_Heading,
    .Category_Button_Heading h3 {
        color: var(--Default_Text_Colour);
    }

    .Category_Button.Active .category-label,
    .Category_Button.Active .Category_Button_Heading,
    .Category_Button.Active .Category_Button_Heading h3 {
        color: #ffffff !important;
    }

    .category-icon-wrapper {
        width: 30px;
        height: 30px;
        background: rgba(89, 163, 242, 0.10);
    }

    .Category_Button.Active .category-icon-wrapper {
        background: rgba(255, 255, 255, 0.18);
    }

    #ProductWrapper {
        width: 100%;
        margin: 0 auto;
        background: transparent;
    }

    .SortContainer {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0;
        padding: 18px 4px 12px !important;
        background: transparent !important;
    }

    .CatalogUtilityRow {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        width: 100%;
    }

    .CatalogUtilityCopy {
        min-width: 0;
    }

    .CatalogUtilityEyebrow {
        margin: 0 0 8px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--Muted_Text_Colour);
    }

    .CatalogUtilityTitle {
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-size: clamp(30px, 2.35vw, 42px);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -0.05em;
        color: var(--Default_Text_Colour);
    }

    .CatalogUtilityMeta {
        margin: 10px 0 0;
        font-family: 'Afacad', sans-serif;
        font-size: 16px;
        color: var(--Muted_Text_Colour);
    }

    .CatalogUtilityControls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
    }

    .CatalogUtilityControls .SSSort {
        gap: 12px !important;
        padding: 10px 14px;
        border: 1px solid rgba(42, 42, 42, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0 10px 22px rgba(55, 44, 22, 0.05);
    }

    .CatalogUtilityControls .SSSortLabel {
        font-size: 13px !important;
        color: var(--Muted_Text_Colour);
    }

    .CatalogUtilityControls .SSSortTrigger {
        padding: 0 !important;
        gap: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #Viewer:has(> .product) {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 0 44px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 22px !important;
        background: transparent !important;
        justify-items: stretch;
        align-content: start;
    }

    .product {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(42, 42, 42, 0.08);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 18px 38px rgba(55, 44, 22, 0.08);
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .product:hover {
        transform: translateY(-4px);
        border-color: rgba(89, 163, 242, 0.24);
        box-shadow: 0 24px 48px rgba(55, 44, 22, 0.11);
    }

    .product-card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "name"
            "price"
            "actions";
        gap: 14px;
        width: 100%;
        height: 100%;
        align-content: start;
    }

    .Clickable_Image {
        grid-area: media;
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 0 !important;
        object-fit: cover;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(244, 241, 235, 0.92), rgba(255, 255, 255, 0.98));
    }

    .product-name {
        grid-area: name;
        margin: 0 !important;
        height: auto !important;
        min-height: calc(1.35em * 2);
        font-family: 'Inter', sans-serif;
        font-size: 18px !important;
        font-weight: 700;
        line-height: 1.35 !important;
        color: var(--Default_Text_Colour);
        text-decoration: none;
    }

    .product-name:hover {
        text-decoration: none;
    }

    .product-price {
        grid-area: price;
        margin: 0 !important;
        font-family: 'Inter', sans-serif;
        font-size: 29px !important;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--Default_Text_Colour);
    }

    .quantity-container {
        grid-area: actions;
        display: grid !important;
        grid-template-columns: minmax(136px, 154px) minmax(0, 1fr);
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: auto !important;
        padding: 4px 0 0 !important;
    }

    .quantity-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 6px !important;
        border: 1px solid rgba(42, 42, 42, 0.08);
        border-radius: 16px;
        background: rgba(244, 241, 235, 0.72);
    }

    .quantity-controls .Button {
        width: 40px !important;
        min-width: 40px !important;
        aspect-ratio: 1 / 1;
        margin: 0;
        border-radius: 12px;
        background: transparent;
        border: 1px solid rgba(42, 42, 42, 0.10);
        color: var(--Default_Text_Colour);
        font-size: 20px;
        font-weight: 700;
    }

    .quantity-controls .WhiteText {
        min-width: 24px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }

    .add-to-cart {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        aspect-ratio: auto !important;
        border-radius: 16px !important;
        padding: 0 18px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
        box-shadow: 0 16px 26px rgba(89, 163, 242, 0.24);
    }

    .product-card__cart-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .add-to-cart .cart-icon {
        width: 20px;
        height: 20px;
    }

    .MainPage:focus-visible,
    .Search_Bar:focus-visible,
    .currency-select:focus-visible,
    .BasketButton:focus-visible,
    .SettingsButton:focus-visible,
    .Category_Button:focus-visible,
    .product-name-link:focus-visible,
    .quantity-controls .Button:focus-visible,
    .add-to-cart:focus-visible {
        outline: 3px solid rgba(89, 163, 242, 0.28);
        outline-offset: 2px;
    }

    .dark-mode .TopBar {
        background: rgba(18, 18, 18, 0.88);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 44px rgba(0, 0, 0, 0.34);
    }

    .dark-mode .Search_Bar,
    .dark-mode .currency-select,
    .dark-mode .BasketButton,
    .dark-mode .SettingsButton,
    .dark-mode .Category_Button,
    .dark-mode .CatalogUtilityControls .SSSort,
    .dark-mode .product {
        background: rgba(26, 26, 26, 0.94) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none;
    }

    .dark-mode .Search_Bar,
    .dark-mode .currency-select,
    .dark-mode .BasketButton,
    .dark-mode .SettingsButton {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .dark-mode .BasketButton:hover,
    .dark-mode .SettingsButton:hover,
    .dark-mode .currency-select:hover {
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32);
    }

    .dark-mode .Category_Button:hover {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .dark-mode .category-icon-wrapper {
        background: rgba(255, 255, 255, 0.08);
    }

    .dark-mode .Clickable_Image {
        background: linear-gradient(180deg, rgba(40, 40, 40, 0.92), rgba(24, 24, 24, 0.98));
    }

    .dark-mode .product {
        box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
    }

    .dark-mode .quantity-controls {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .dark-mode .quantity-controls .Button {
        border-color: rgba(255, 255, 255, 0.12);
    }
}

@media (min-width: 681px) and (max-width: 1180px) {
    .TopBar {
        grid-template-columns: minmax(200px, auto) minmax(280px, 1fr) auto;
    }

    .CatalogUtilityRow {
        align-items: flex-start;
        flex-direction: column;
    }

    .CatalogUtilityControls {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

#appBootLoaderOverlay {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#appBootLoaderOverlay .card {
    width: min(520px, calc(100vw - 32px));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 20, 0.9);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
    padding: 16px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #fff;
}

#appBootLoaderOverlay .row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#appBootLoaderOverlay .spinner {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.95);
    animation: appLoaderSpin 900ms linear infinite;
    flex: 0 0 auto;
}

#appBootLoaderOverlay .title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

#appBootLoaderOverlay .sub {
    margin-top: 6px;
    font-size: 13px;
    opacity: .85;
    line-height: 1.35;
}

/* style block 2 */
:root {
    --body_Background_Colour: #FFFCF7;
    /* Warm off-white background */
    --TopBar_Background_Colour: #F4F1EB;
    /* Matches soft beige tone */
    --SideBar_Background_Colour: #FFFFFF;
    --SearchBar_Background_Colour: #EFECE8;
    --Modal_Background_Colour: #FFFFFF;
    --BasketReceipt_Background_Colour: #F4F1EB;
    /* Same soft beige */
    --Thumbnail_Active_Border: #FF5722;
    --ButtonHoverState_Background_Colour: #59a3f2;

    --Default_Text_Colour: #2A2A2A;
    --Muted_Text_Colour: #777777;
    /* Slightly softer muted text */

    --Primary_Button_Colour: #59a3f2;
    /* Blue buttons */
    --Primary_Button_Hover: #0056b3;

    --Input_Background: #FFFFFF;
    --Input_Border: #DDDDDD;

    --Option_Button_Border: #DDDDDD;
    /* For +/- and quantity selectors */

    --Danger_Colour: #D9534F;
    --Info_Link_Colour: #5BC0DE;
    --Category_Button_Text_Colour: #2A2A2A;
    /* or white for dark mode */

    /* Add-to-basket toast (light mode defaults)
               Edit these to change the new "added to basket" popup colors.
            */
    --AddToBasketToast_Background: rgba(255, 255, 255, 0.92);
    --AddToBasketToast_Text: #1f1f1f;
    --AddToBasketToast_Border: rgba(0, 0, 0, 0.10);
    --AddToBasketToast_Shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

}

.light-mode {
    --body_Background_Colour: #FFFCF7;
    /* Warm off-white background */
    --TopBar_Background_Colour: #F4F1EB;
    /* Matches soft beige tone */
    --SideBar_Background_Colour: #FFFFFF;
    --SearchBar_Background_Colour: #EFECE8;
    --Modal_Background_Colour: #FFFFFF;
    --BasketReceipt_Background_Colour: #F4F1EB;
    /* Same soft beige */
    --Thumbnail_Active_Border: #FF5722;
    --ButtonHoverState_Background_Colour: #59a3f2;

    --Default_Text_Colour: #2A2A2A;
    --Muted_Text_Colour: #777777;
    /* Slightly softer muted text */

    --Primary_Button_Colour: #59a3f2;
    /* Blue buttons */
    --Primary_Button_Hover: #0056b3;

    --Input_Background: #FFFFFF;
    --Input_Border: #DDDDDD;

    --Option_Button_Border: #DDDDDD;
    /* For +/- and quantity selectors */

    --Danger_Colour: #D9534F;
    --Info_Link_Colour: #5BC0DE;
    --Category_Button_Text_Colour: #2A2A2A;
    /* or white for dark mode */
    --DefaultBoxShadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.65) !important;
}



.dark-mode {
    --body_Background_Colour: #1A1A1A;
    --TopBar_Background_Colour: #1a1919;
    --SideBar_Background_Colour: #181818;
    --SearchBar_Background_Colour: #1C1C1C;
    --Modal_Background_Colour: #181818;
    --BasketReceipt_Background_Colour: #22222200;
    --ButtonHoverState_Background_Colour: #0056b3;
    --Default_Text_Colour: #ffffff;
    --Borders_Colour: #232D34;
    --Primary_Button_Colour: #007BFF;
    --Primary_Button_Hover: #0056b3;
    --Input_Background: #333;
    --Input_Border: #555;
    --Danger_Colour: red;
    --Info_Link_Colour: lightblue;
    --Muted_Text_Colour: gray;
    --Option_Button_Border: #ccc;
    --Category_Button_Text_Colour: #ffffff;
    /* or white for dark mode */
    --Thumbnail_Active_Border: #4DABFF;

    /* Add-to-basket toast (dark mode)
               Edit these to change the new "added to basket" popup colors.
            */
    --AddToBasketToast_Background: rgba(20, 20, 20, 0.92);
    --AddToBasketToast_Text: #ffffff;
    --AddToBasketToast_Border: rgba(255, 255, 255, 0.14);
    --AddToBasketToast_Shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* Dark-mode equivalent (works on dark backgrounds) */
    /* Dark-mode equivalent (works on dark backgrounds) */
    /* Dark-mode equivalent (works on dark backgrounds) */
    --DefaultBoxShadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 1px 0 rgba(0, 0, 0, 0.55) !important;
    ;
}

/* ---------------- Add-to-basket toast popup ----------------
           Styled via CSS variables above so it automatically follows
           your light/dark theme, and is easy to tweak later.
        */
.ss-basket-toast {
    position: fixed;
    z-index: 999999;
    pointer-events: auto;
    user-select: none;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--AddToBasketToast_Background);
    color: var(--AddToBasketToast_Text);
    border: 1px solid var(--AddToBasketToast_Border);
    font-size: 13px;
    line-height: 1.2;
    box-shadow: var(--AddToBasketToast_Shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease, top 220ms ease, left 220ms ease;
    max-width: min(340px, 84vw);
    overflow: hidden;
}

.ss-basket-toast.ss-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ss-basket-toast.ss-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
}

.ss-basket-toast-title {
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}

.ss-basket-toast-sub {
    opacity: 0.92;
    overflow: hidden;

    /* Allow 2 lines on small screens (prevents ultra-wide toasts) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    white-space: normal;
    word-break: break-word;
}

/* Toast layout enhancements (thumbnail + actions) */
.ss-basket-toast-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ss-basket-toast-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--AddToBasketToast_Border);
    background: rgba(127, 127, 127, 0.10);
}

.ss-basket-toast-body {
    min-width: 0;
    flex: 1 1 auto;
}

.ss-basket-toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.ss-basket-toast-btn {
    flex: 1 1 0;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    border: 1px solid var(--AddToBasketToast_Border);
    background: transparent;
    color: var(--AddToBasketToast_Text);
}

.ss-basket-toast-btn.primary {
    border-color: rgba(0, 0, 0, 0.06);
    background: var(--Primary_Button_Colour);
    color: #ffffff;
}

.ss-basket-toast-btn:active {
    transform: translateY(0.5px);
}

.ss-basket-toast-btn:hover {
    filter: brightness(1.03);
}

/* ---------------- Basket header indicator (badge) ---------------- */
.BasketButton,
.mobileBasketButton {
    position: relative;
}

.ss-ci-badge {
    color: var(--Default_Text_Colour) !important;
    background-color: var(--BasketReceipt_Background_Colour) !important;
}

.ss-ci-addons {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1%;
}

.ss-ci-sub {
    margin-top: 4%;
    margin-bottom: 2%;
    color: var(--Default_Text_Colour);
    font-family: 'Afacad', sans-serif;
}

.ss-ci-title {
    color: var(--Default_Text_Colour) !important;
    font-weight: 700;
    font-size: .95rem;
    margin-left: auto;
    font-family: 'Afacad', sans-serif;
    height: fit-content;
}



.ss-ci-card {
    background-color: var(--BasketReceipt_Background_Colour) !important;
}

.Badges_Div {
    display: flex;
    align-items: baseline;
}

.ss-ci-bar {
    color: var(--Default_Text_Colour) !important;
    font-family: 'Afacad', sans-serif;
}

.ss-cart-badge {

    position: absolute;
    top: -6px;
    right: -6px;
    font-family: 'Afacad', sans-serif;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;

    line-height: 1;
    letter-spacing: 0.2px;

    background: var(--Primary_Button_Colour);
    color: #ffffff;

    border: 2px solid var(--TopBar_Background_Colour);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);

    pointer-events: none;
}

.ReceiptTable td {
    vertical-align: top;
    padding: 6px 8px;
    width: fit-content !important;
}

.ss-has-items {
    color: var(--Primary_Button_Colour);
}


@keyframes ss-basket-pulse {
    0% {
        transform: scale(1)
    }

    45% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

.ss-basket-pulse {
    animation: ss-basket-pulse 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .ss-basket-toast {
        transition: none;
    }

    .ss-basket-pulse {
        animation: none;
    }
}




/* Hide scrollbar (still scrollable) */
#paymentModal,
#paymentModal .payment-modal-card {
    -ms-overflow-style: none;
    /* IE/Edge legacy */
    scrollbar-width: none;
    /* Firefox */
}

#paymentModal::-webkit-scrollbar,
#paymentModal .payment-modal-card::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    /* Chrome/Safari */
}

/* ===== Payment modal dark mode ===== */
.dark-mode #paymentModal {
    background: rgba(0, 0, 0, .72);
}

.dark-mode #paymentModal .payment-modal-card {
    background: var(--Modal_Background_Colour);
    color: #e5e7eb;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, .10);
}

.payment_element {
    min-height: 100% !important;
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    min-height: 0;
    overflow: auto !important;
    /* NOT hidden */
    -webkit-overflow-scrolling: touch;
}

.dark-mode #paymentModal .payment-modal-close {
    color: rgba(229, 231, 235, .90);
}

.dark-mode #paymentModal label {
    color: rgba(229, 231, 235, .90);
}

.dark-mode #paymentModal input,
.dark-mode #paymentModal select,
.dark-mode #paymentModal textarea {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #e5e7eb;
}

.dark-mode #paymentModal input::placeholder,
.dark-mode #paymentModal textarea::placeholder {
    color: rgba(229, 231, 235, .55);
}

.dark-mode #paymentModal input:focus,
.dark-mode #paymentModal select:focus,
.dark-mode #paymentModal textarea:focus {
    border-color: rgba(59, 130, 246, .55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .20);
}

/* TomSelect inside the modal (Country) */
.dark-mode #paymentModal .ts-control,
.dark-mode #paymentModal .ts-dropdown {
    background: #0b1220;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, .14);
}

.dark-mode #paymentModal .ts-dropdown .option.active {
    background: rgba(59, 130, 246, .22);
}

.ss-cart-inc {
    background-color: var(--Modal_Background_Colour);
    margin: 12px 0 8px;
    padding: 2%;

    border-radius: 14px;
    font-family: 'Afacad', sans-serif;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(0, 0, 0, .02);
}

@media (min-width: 680px) {

    .mobileHeaderWrapper,
    .mobileSearchRow,
    .mobileTopBar,
    .mobileSearch_Bar,
    .mobileNavButtonDiv,
    .mobileCurrencySelect,
    .mobileBasketButton,
    .mobileSettingsButton,
    .mobileSideBar,
    .mobileViewer,
    .mobileModalDiv,
    .mobileLogo,
    .mobileMainPage {
        display: none;
    }


    body {
        width: auto;
        /* Default: Matches viewport width at 100% zoom */
        height: auto;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, auto) 1fr;
        /* First column fits content but stays within viewport */
        background-color: var(--body_Background_Colour);
        overflow-x: hidden;
        min-height: 100vh;
        /* ← add this */
    }


    /* When zoom level is above 100%, allow scrolling instead of shrinking */

    /* Default: hide the menu button on desktop */
    .MenuButton {
        display: none;
    }

    .Category_Button_Heading {
        color: var(--Category_Button_Text_Colour);
        margin: 0;
    }

    .ts-dropdown-content {
        background-color: var(--Input_Background);
        color: var(--Default_Text_Colour);

    }

    .category-icon-svg {
        fill: var(--Default_Text_Colour);

    }



    .category-icon-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

    .Button {
        color: var(--Default_Text_Colour);
        width: 100%;
        font-size: 14px;
        border: none;
        border-radius: 5%;
        aspect-ratio: 1/1;
        width: 25%;
        background-color: var(--body_Background_Colour);
        border: 1px solid var(--Borders_Colour);
        margin-top: 0px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .Logo {
        grid-row: 1 / 1;
        grid-column: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 8vh;
        width: 31.5vh;
        background-color: var(--SideBar_Background_Colour);
        /* <-- applied always */
        color: var(--Default_Text_Colour);
        font-size: clamp(14px, 2.2vw, 18px);
        font-weight: bold;
        font-family: 'Afacad', sans-serif;
        box-sizing: border-box;
        border: 1px solid var(--Borders_Colour);
        border-radius: 5px;
    }

    .ts-dropdown {
        max-height: 240px;
        /* Adjust based on item height. ~10 items */
        overflow-y: auto;
    }


    .MainPage {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 4vh;
        color: var(--Default_Text_Colour);

        /* remove button styling */
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;

        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        /* still shows it’s clickable */
    }



    .MainPage h1 {
        font-size: 4vh;
        /* Scale with height */
        font-size: 4vh;
        font-family: "Italianno", cursive;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    /* Fix TopBar shifting */
    .TopBar {
        position: relative;
        top: 0;

        /* Match the sidebar width */
        right: 0;

        height: 8vh;
        background-color: var(--TopBar_Background_Colour);

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 2vh;
    }

    .currency-select {
        flex-shrink: 0;
        max-height: 100%;
        aspect-ratio: 1 / 0.75;
        height: 100%;
        font-size: clamp(14px, 2.2vw, 18px);
        border: 1px solid var(--Borders_Colour);
        border-radius: 5px;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        margin-left: 1%;
        padding: 0.5vh;
        appearance: none;
        /* Removes default browser styling */
        -webkit-appearance: none;
        /* For Safari */
        -moz-appearance: none;
        /* For Firefox */
        text-align: center;
        display: none;

    }





    .SideBar {
        background-color: var(--SideBar_Background_Colour);
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 31.5vh;
        min-width: 31.5vh;
        justify-content: start;

    }


    .Viewer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
        grid-column-gap: 15px;
        /* or column-gap */
        grid-row-gap: 15px;
        background-color: var(--body_Background_Colour);
        padding-top: 15px;
        width: 98%;
        max-width: 100%;
        margin: 0 1rem;
        justify-content: center;
        height: auto;
        align-self: stretch;
    }

    .Search_Bar {
        max-height: 50%;
        min-height: 50%;
        width: 50%;
        height: 50%;
        font-size: 2vh;
        border-radius: 10px;
        padding-left: 1%;
        margin-left: 1%;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        overflow-x: auto;
        font-weight: 600;
        font-family: sans-serif;
    }


    /* Fix button spacing issue */
    .Category_Button.Active {
        background-color: var(--Accent_Colour);

        color: var(--Danger_Colour);
        font-weight: bold;
        border-radius: 5px;

    }

    .ReceiptTable td {
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
    }


    .Category_Button {
        width: 95%;
        height: 6vh;
        background-color: var(--body_Background_Colour);
        font-size: clamp(14px, 2.2vw, 18px);
        /* Scales with button height */
        display: flex;
        align-items: center;
        border-radius: 5px;
        justify-content: left;
        box-sizing: border-box;
        border: 0.1em solid var(--Borders_Colour);
        /* Scales with font size */
    }

    .Category_Button h3 {
        font-size: 2vh;
        /* Ensures text scales with button */
        white-space: nowrap;
        border-radius: 5px;

    }

    .Category_Button_Heading {
        display: flex;
        align-items: center;
        gap: 1vw;
    }

    .product {
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border: 1px solid var(--Input_Background);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 10px;
        width: 300px;
        /* Allow grid to define width */
        max-width: 300px;
        /* Ensures uniform width */
        height: 475px;
        max-height: 475px;
        display: flex;
        justify-content: center;
    }

    .Clickable_Image {

        max-height: 280px;
        aspect-ratio: 1/1;
        margin-left: 10px;
        border-radius: 2%;

    }

    .quantity-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding-bottom: 15px;
    }

    .quantity-controls {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 50%;

        gap: 5%;
        /* Take up 1/2 of the available space */
        color: var(--Default_Text_Colour);

    }

    .add-to-cart {
        background-color: var(--Primary_Button_Colour);
        color: #fff;
        font-size: 20px;
        min-width: max-content;
        border: none;
        aspect-ratio: 1/0.25;
        width: 50%;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
        flex: 1;
        /* Take up the remaining space */
        text-align: center;

        font-family: 'Rubik', sans-serif;
    }

    .add-to-cart-product {
        background-color: var(--Primary_Button_Colour);
        color: #fff;
        font-size: 25px;
        min-width: max-content;
        border: none;
        aspect-ratio: 1/0.25;
        width: 50%;
        border-radius: 4px;
        padding-left: 8%;
        cursor: pointer;
        transition: background-color 0.3s;
        flex: 1;
        /* Take up the remaining space */
        text-align: center;

        font-family: 'Rubik', sans-serif;
    }

    .add-to-cart:hover {
        background-color: var(--ButtonHoverState_Background_Colour);
    }





    .NavButtonDiv {
        height: 6vh;
        width: 20%;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;

        /* Remove fixed positioning */
        position: static;
    }




    .BasketButton,
    .SettingsButton {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: auto;
        max-width: 100%;
        border-radius: 5px;

        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border: 1px solid var(--Borders_Colour);
        font-size: clamp(14px, 2.2vw, 18px);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

    }

    .ts-wrapper.single .ts-control,
    .ts-wrapper.single .ts-control input {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }

    .Quantity-Controls-Basket {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 20%;
        padding-right: 10px;
    }

    .Item-Details {
        display: grid;

        gap: 0px;

        width: 50%;
        height: 140%
    }

    .ProductPageBuyButton {
        color: var(--Default_Text_Colour);
        height: 65px;
        width: auto;
        max-width: 100%;
        border-radius: 5px;
        background-color: var(--body_Background_Colour);
        border: 1px solid var(--Borders_Colour);
        min-width: 100%;
    }

    .BasketText {
        font-size: 40px;
        /* Scales based on view
            7port width */
        text-decoration: none;
        padding-bottom: 10px;

        overflow: hidden;
        /* Prevents text from wrapping */
        color: var(--Default_Text_Colour);
        height: 40px;
        max-width: 26ch;
        word-wrap: normal;
        word-break: normal;
        unicode-bidi: normal;
        text-decoration: none;
        text-overflow: ellipsis;
    }

    .BasketTextDescription {
        font-size: 20px;
        color: var(--Default_Text_Colour);
        line-height: 1.2em;
        /* 👈 Controls line height */
        height: calc(1.2em * 6);
        /* 👈 Ensures 6-line height */
        font-family: 'Rubik', sans-serif;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-family: 'Afacad', sans-serif;
        -webkit-line-clamp: 6;
        text-overflow: ellipsis;
    }

    /* Restore “old” basket +/- look: slightly angular + horizontal row */
    .Quantity-Controls-Basket {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        align-self: center !important;
    }

    /* Buttons: slightly angular rectangles (not circles) */


    /* Quantity number */
    .Quantity-Controls-Basket .qty,
    .Quantity-Controls-Basket span {
        min-width: 28px !important;
        text-align: center !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    /* Optional: subtle hover like before */
    .Quantity-Controls-Basket button:hover,
    .Quantity-Controls-Basket .qty-btn:hover {
        background: rgba(0, 0, 0, .04) !important;
    }



    .BasketChangeQuantityButton {
        width: 50%;
        background-color: var(--body_Background_Colour);
        aspect-ratio: 1/1;
        font-size: 200%;
        color: var(--Default_Text_Colour);

        color: var(--Default_Text_Colour);


        border: none;
        border-radius: 5%;
        aspect-ratio: 1 / 1;

        background-color: var(--body_Background_Colour);
        border: 1px solid var(--Borders_Colour);
        margin-top: 0px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .BasketChangeQuantityText {
        font-size: 37.5px;
        color: var(--Default_Text_Colour);
    }

    .SortContainer {
        background-color: var(--TopBar_Background_Colour);
        grid-row: 1 / 1;
        grid-column: 2 / 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 0 3vh;
        /* Fixed padding syntax */
        width: 100%;
        /* Ensures it spans the entire column */
        height: 5vh;
        max-width: 100%;
        /* Fixed max-width */
        max-height: 5vh;
        color: var(--Default_Text_Colour);
        font-size: 2vh;
        font-weight: 600;
        font-family: 'Rubik', sans-serif;
        gap: 5px;
    }


    /* Ensure the dropdown doesn't resize (Safari-safe + modern) */
    #sortSelect {
        min-width: 220px;
        max-width: 100%;
        width: auto;

        height: 36px;
        padding: 8px 40px 8px 12px;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.1;
        font-family: 'Rubik', sans-serif;

        color: var(--Default_Text_Colour);
        background-color: var(--SearchBar_Background_Colour);

        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 12px;

        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207.5l5%205%205-5%22%20stroke%3D%22rgba%280%2C0%2C0%2C0.65%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;

        box-shadow: var(--DefaultBoxShadow);

        cursor: pointer;
        outline: none;
        transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    }

    #sortSelect:hover {
        border-color: rgba(0, 0, 0, 0.22);
        transform: translateY(-1px);
        box-shadow: var(--DefaultBoxShadow);
    }

    #sortSelect:focus {
        border-color: rgba(60, 130, 246, 0.55);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10),
            0 0 0 4px rgba(60, 130, 246, 0.18);
        transform: translateY(-1px);
    }

    .dark-mode #sortSelect {
        border-color: rgba(255, 255, 255, 0.14);
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207.5l5%205%205-5%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.70%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .dark-mode #sortSelect:hover {
        border-color: rgba(255, 255, 255, 0.22);
    }

    .BasketTotalPrice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 1000px;
        height: 350px;
        box-sizing: border-box;
        border: 1px solid var(--Borders_Colour);
        /* Scales with font size */
    }

    .Basket-Item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 1000px;
        max-width: 2000px;
        aspect-ratio: 5.25/1;
        height: auto;
        box-sizing: border-box;
        border: 1px solid var(--Borders_Colour);
    }

    .Basket_Item_Container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 1000px;
        max-width: 2000px;
        aspect-ratio: 5.25/1;
        box-sizing: border-box;
        border: 1px solid var(--Borders_Colour);
        /* Scales with font size */
    }

    .Basket_Image {
        max-width: 250px;
        aspect-ratio: 1/1;
        margin-left: 5px;
    }

    .Basket_Viewer {
        display: grid;
        width: 100%;
        max-width: 100%;
        margin: 0 1rem;
        row-gap: 10px;
        max-height: 15vh;
        height: 15vh;
    }

    .WhiteText {
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
        font-size: 150%;
    }

    .ProductPrice {
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
    }

    .ProductName {
        color: var(--Default_Text_Colour);
    }

    .product-name {
        color: var(--Default_Text_Colour);
        font-size: 20px;
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4em;
        /* adjust as needed */
        height: calc(1.4em * 2);
        /* force exactly 2 lines of height */
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }


    .Product_Viewer {
        margin-top: 24px;
        width: 1300px;
        height: auto;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 5px;
        position: relative;
        box-shadow: 0 0 0 24px var(--SearchBar_Background_Colour);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 32px 80px;
        overflow: visible;
        font-size: 16px;
    }

    .image-slider-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        border-radius: 5px;

        height: 500px;
        width: 500px;
        overflow: hidden;
    }

    #mainImage {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        top: 0;
        left: 0;
        width: 100%;
        /* ✅ Full width */
        height: 100%;
        /* ✅ Full height */
        object-fit: contain;
        transition: none;
    }

    .slide-image {
        transition: transform 0.2s ease;
        will-change: transform;
    }

    .Thumbnail {
        display: flex;
        width: 80px;
        height: 80px;
        border: 1px solid var(--Borders_Colour);
        border-radius: 5px;
    }

    .Thumbnail.active {
        border: 1px solid var(--Thumbnail_Active_Border);
        /* Thicker border on selected image */
        box-shadow: 0 0 5px var(--Accent_Colour);
        /* Optional glow effect */
    }

    .ThumbnailsHolder {
        display: grid;
        grid-template-columns: repeat(5, 80px);
        gap: 10px;
        padding-right: 40px;
        max-width: 500px;
        width: 500px;
        margin-top: 5px;
        height: auto;
        padding-left: 0;
        /* remove left padding */
        justify-content: center;
        /* center the grid content */
        align-self: center;
        /* center ThumbnailsHolder in Product_Images */
    }

    .thumbnails img {
        width: 80px;
        max-width: 80px;
        height: 80px;
        max-height: 80px;
        cursor: pointer;
    }

    .Product_Info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 520px;
        max-height: auto;
        color: var(--Default_Text_Colour);
    }

    .Add_To_Cart_Product {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .Product_Option_Button {
        margin: 5px;
        padding: 8px 14px;
        border: 1px solid var(--Option_Button_Border);
        cursor: pointer;
        border-radius: 6px;
        font-family: 'Afacad', sans-serif;
        transition: 0.2s ease;
    }

    .Product_Option_Button.selected {
        background-color: var(--Primary_Button_Colour);
        color: var(--Default_Text_Colour);
        border-color: var(--Primary_Button_Colour);
    }

    .Product_Option_Buttons {
        display: flex;
        flex-wrap: wrap;
    }

    .Product_Option_Label {
        margin: 10px 0 5px 0;
        font-family: 'Afacad', sans-serif;
    }





    .ImageControl {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding-right: 15vh;

    }

    .ImageControlButtonPrevious,
    .ImageControlButtonNext {
        position: relative;
        background-color: transparent;
        color: var(--Default_Text_Colour);
        font-size: 50px;
        border: none;
        cursor: pointer;
        height: 60px;
        width: 60px;
        border-radius: 5px;
        margin-bottom: 25px;
        aspect-ratio: 1 / 1;
        overflow: visible;
        padding-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ButtonText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        /* ✅ Ensures proper centering */
        aspect-ratio: 1/1;
    }

    .ImageControlButtonText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        /* ✅ Ensures proper centering */
        margin-top: 12.5px;
        aspect-ratio: 1/1;
    }

    .ImageControlButtonPrevious::before,
    .ImageControlButtonNext::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        width: 80%;

        height: 0px;
        background: rgba(0, 0, 0, 0.3);
        filter: blur(5px);
        opacity: 0;
        transform: translateX(-50%);
        transition: opacity 0.3s ease-in-out;
    }



    .mainImage {
        max-width: 500px;
        max-height: 500px;
        width: 500px;
        height: 500px;
        aspect-ratio: 1 / 1;
        border: 1px solid var(--Borders_Colour);
        /* 0.1rem ≈ 1.6px */
        box-sizing: border-box;
    }




    .Quantity_Controls_ProductPage {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 50%;

        gap: 5%;
        /* Take up 1/2 of the available space */
        color: var(--Default_Text_Colour);
    }

    .ProductPageQuantityContainer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding-bottom: 15px;

    }




    .BasketReceipt {
        background: rgba(255, 255, 255, 0);
        color: rgb(255, 255, 255);
        width: 1000px;
        height: 300px;
    }

    .ReceiptTable {
        width: 1000px;
        max-width: 1000px;
        border-collapse: collapse;
        background-color: rgba(255, 255, 255, 0);
        filter: none !important;
        text-shadow: none !important;
        opacity: 1 !important;
        border: 1px solid var(--Borders_Colour);
    }


    .ReceiptTable td {
        padding: 15px;
        border-bottom: 1px solid var(--Borders_Colour);
        /* Keep individual row borders */
        font-size: 30px;
        vertical-align: top;
        padding: 6px 8px;
        width: 0px;
        margin-left: 10px;
        /* white-space: nowrap; */
        padding-left: 15px;
    }

    .ReceiptTable td:nth-child(3) {

        text-align: right;
        font-size: 30px;

        /* Pushes the price slightly away from the right edge */
    }

    .ReceiptTable td:nth-child(2) {
        text-align: left;
        color: var(--Default_Text_Colour);
        overflow: hidden;
        text-overflow: ellipsis;

        unicode-bidi: normal;
        text-overflow: ellipsis;
        word-wrap: normal;
        word-break: normal;
        max-width: 26ch;
        /* Adjust spacing */
        font-size: 30px;
        white-space: nowrap;
    }

    .ReceiptFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;

        border: 1px solid var(--Borders_Colour);
        gap: 20%;
        height: auto;
        max-width: 2000px;
        aspect-ratio: 15/1;

    }

    .PriceAndOptionRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .BasketSelectedOption {
        font-size: 25px;
        color: var(--Default_Text_Colour);
        height: 30px;
        margin-top: -3px;
        text-align: left;
        margin-bottom: 25px;
        font-family: 'Afacad', sans-serif;
    }

    .PayButton {
        background: var(--Primary_Button_Colour);
        color: var(--Default_Text_Colour);

        border: none;
        cursor: pointer;
        width: 50%;
        margin-left: 0.5%;
        height: 90%;
        font-size: auto;

    }

    .PayTotalText {
        color: var(--Default_Text_Colour);
        margin-left: auto;
        text-align: right;
        font-size: 35px;
        margin-right: 15px;
        max-height: auto;
        height: auto;
        width: 40%;
        font-family: 'Afacad', sans-serif;
    }

    .Basket-Item-Pay {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 1000px;
        box-sizing: border-box;
        border: 1px var(--Borders_Colour);
    }

    .basket-item-price {
        font-size: 25px;
        /* Scales based on viewport width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        color: var(--Default_Text_Colour);
        text-align: left;
        max-width: 100%;
        height: 30px;
        margin-top: -3px;
        font-family: 'Afacad', sans-serif;
    }

    .EmptyBasketMessage {
        text-align: center;
        min-width: fit-content;
        font-size: 2vw;
        color: var(--Muted_Text_Colour);
        padding: 10px;
        space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: sans-serif;
        font-weight: 600;
    }



    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    input {
        width: 100%;
        background: var(--Input_Background);
        /* Dark input background */
        border: 1px solid var(--Input_Border);
        /* Subtle border */
        color: var(--Default_Text_Colour);
        border-radius: 5px;
        outline: none;
    }


    .modal-content {
        position: relative;
        background-color: var(--Modal_Background_Colour);
        color: var(--Default_Text_Colour);
        margin: 10% auto;
        padding: 20px;
        border-radius: 10px;
        width: 50%;
        text-align: center;
        max-height: 90vh;
        /* Prevents overflow beyond viewport */
        overflow-y: auto;
        /* Enables scrolling if content exceeds max height */
        margin: auto;
        display: flex;
        flex-direction: column;
        max-width: 500px;
        /* min-width: 00px; */
    }

    .modal-content input {
        width: 90%;
        padding: 10px;
        margin: 5px;
        border: 1px solid #272626;
        border-radius: 5px;
    }

    .card-details {
        display: flex;
        justify-content: space-between;
    }

    .card-details div {
        width: 48%;
    }


    .Button {
        color: var(--Default_Text_Colour);
        width: 100%;
        font-size: 14px;
        border: none;
        border-radius: 5%;
        aspect-ratio: 1/1;
        width: 25%;
        background-color: var(--body_Background_Colour);
        border: 1px solid var(--Borders_Colour);
        margin-top: 0px;
        cursor: pointer;
        transition: background-color 0.3s;
    }



    .Submit_Button {
        background-color: var(--ButtonHoverState_Background_Colour);
        width: 100%;
        height: 10%;
        aspect-ratio: 10 / 1;
        margin-top: 15px;
        color: var(--Default_Text_Colour);
        box-shadow: none;
        border: none;
        /* ✅ Removes any border */
        outline: none;
        /* ✅ Removes any focus outline */
        appearance: none;
        /* ✅ Prevents browser default styling (especially in Safari) */
        background-image: none;
        /* ✅ Disables any gradient or highlight layer */
    }



    .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
        color: var(--Default_Text_Colour);

    }

    /* Dark Mode Toggle */
    .dark-mode-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .switch {
        position: relative;
        width: 40px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
    }

    .switch input {
        display: none;
    }

    .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        border-radius: 20px;
        cursor: pointer;
        transition: 0.4s;
    }

    .slider::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    input:checked+.slider {
        background: white;
    }

    input:checked+.slider::before {
        transform: translateX(20px);
        background: black;
    }

    /* Entire Page Dark Mode */
    .dark-mode {
        background: #222;
        color: var(--Default_Text_Colour);
    }

    /* Settings Container */
    #Settings_Viewer {
        width: 350px;
        padding: 20px;
        background: white;
        border: 2px solid black;
        border-radius: 10px;
        box-shadow: 5px 5px 0px black;
        font-family: Arial, sans-serif;
    }

    .dark-mode #Settings_Viewer {
        background: var(--Input_Background);
        color: var(--Default_Text_Colour);
        border-color: white;
        box-shadow: 5px 5px 0px white;
    }

    /* Settings Panel */
    .settings-panel {
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        max-width: 700px;
        width: 700px;
        margin-top: 40px;
        margin-left: 40px;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 0 15px #00000066;
        font-family: Arial, sans-serif;
    }

    /* Individual section */
    .settings-section {
        margin-bottom: 30px;
        border-bottom: 1px solid var(--Borders_Colour);
        padding-bottom: 20px;
    }

    .cart-icon {
        stroke: white;
        height: 20px;
        width: 20px;
        align-items: flex-end;
        margin-left: 5px;
    }

    .cart-icon-product {
        stroke: white;
        height: 30px;
        width: 30px;
        align-items: flex-end;
        margin-left: 5px;
    }

    .settings-section h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .settings-section label {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 5px;
        display: block;
        background-color: transparent;
        /* Fixes "input-like" look */
    }

    .MessageTextArea {
        font-size: 16px;
        margin-top: 10px;
        display: block;
        width: 100%;
        background-color: var(--Input_Background);
        border: 1px solid var(--Borders_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        min-height: 500px;
        height: fit-content;
        overflow-y: auto;
    }

    .settings-section input {
        font-size: 16px;
        margin-top: 10px;
        display: block;
        width: 100%;
        background-color: var(--Input_Background);
        border: 1px solid var(--Borders_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
    }



    /* Buttons */
    .settings-section button {
        margin-top: 10px;
        padding: 12px;
        background-color: var(--ButtonHoverState_Background_Colour);
        border: none;
        border-radius: 5px;
        color: var(--Default_Text_Colour);
        font-weight: bold;
        cursor: pointer;
        width: 100%;
    }

    .settings-section {
        width: auto;
        padding: 10px 20px;
        color: var(--Default_Text_Colour);
    }

    .clearDataButton {
        width: auto;
        color: var(--Default_Text_Colour);
        background-color: var(--Primary_Button_Colour);
    }

    .settings-section button:hover {
        background-color: #004080;
    }

    /* Info message */
    .contact-note {
        font-size: 14px;
        margin-top: 10px;
    }

    .contact-note a {
        color: var(--Info_Link_Colour);
        text-decoration: underline;
    }

    /* Product section extras */
    #ProductWrapper {
        background-color: var(--body_Background_Colour);
    }

    .Product_Name_Heading {
        font-family: 'Rubik', sans-serif;
        font-weight: 700;
        /* or 600, 500, etc. */
        font-size: 30px;
        color: var(--Default_Text_Colour);
        margin-bottom: 10px;

    }

    .Product_Description {
        font-family: 'Afacad', sans-serif;
        font-size: 20px;
        color: var(--Default_Text_Colour);
        line-height: 1.4;
        display: -webkit-box;
        white-space: pre-line;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

    }

    .Product_Price_Label {
        font-size: 20px;
        color: var(--accent-color);
        margin-top: 10px;
        font-family: 'Afacad', sans-serif;
    }

    .currencySelect {
        width: auto;
        display: inline-block;
        padding: 0.5vh;
        font-size: 30px;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);


        appearance: none;
        /* optional: removes native arrow styling */
        -webkit-appearance: none;
        -moz-appearance: none;
        text-align: left;
        width: 175px;
    }

    /* When dark mode is active (e.g., body has class "dark-mode") */
    .SettingsIcon {

        color: var(--Default_Text_Colour);
        /* Will adapt with your theme */

    }

    .BasketIcon {

        color: var(--Default_Text_Colour);
    }

    .category-icon-wrapper {
        width: 2.5vh;
        aspect-ratio: 1/1;
    }

    .ts-wrapper.single .ts-control,
    .ts-wrapper.single .ts-control input {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }

    .ts-dropdown.single {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }

    .ts-control,
    .ts-wrapper.single.input-active .ts-control {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }

    .option.active {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }

    .ts-wrapper.active {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 1px;
    }
}

@media (max-width: 680px) {

    .ts-wrapper.single .ts-control,
    .ts-wrapper.single .ts-control input {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 0.278vw;
    }

    .ts-dropdown.single {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 0.278vw;
    }

    .ts-control,
    .ts-wrapper.single.input-active .ts-control {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 0.278vw;
    }

    .option.active {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 0.278vw;
    }

    .ts-wrapper.active {
        color: var(--Default_Text_Colour);
        background-color: var(--Input_Background);
        border: var(--Borders_Colour);
        border: 0.278vw;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        min-height: 100vh;
    }

    #mainImage {
        position: relative;
        overflow: hidden;

        top: 0;
        left: 0;
        width: 100%;
        /* ✅ Full width */
        height: 100%;
        /* ✅ Full height */
        object-fit: contain;
        transition: none;
    }

    .mobileHeaderWrapper,
    .mobileTopBar,
    .mobileSearch_Bar,
    .mobileNavButtonDiv,
    .mobileCurrencySelect,
    .mobileBasketButton,
    .mobileSettingsButton,
    .mobileSideBar,
    .mobileViewer,
    .mobileModalDiv,
    .mobileLogo,
    .mobileMainPage {
        display: flex;

        /* Light red to see its area */
    }


    .ts-dropdown-content {
        background-color: var(--Input_Background);
        color: var(--Default_Text_Colour);

    }

    .Icon {

        color: var(--Default_Text_Colour);
    }

    .ts-dropdown {
        max-height: 66.667vw;
        /* Adjust based on item height. ~10 items */
        overflow-y: auto;
    }

    .Category_Button_Heading {
        display: flex;
        align-items: center;
        gap: 4vw;
    }

    .Category_Button_Heading {
        color: var(--Category_Button_Text_Colour);
        margin: 0;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
        width: 100%;
    }



    .sidebar-categories {
        flex-grow: 1;
        overflow-y: auto;
        margin-top: 1rem;
        width: 100%;
        padding-right: 0.5rem;
        /* Optional: add a max height if needed */
    }


    .ModalDiv {
        display: none;
    }





    .mobileHeaderWrapper {
        display: block;
    }

    .mobileSearchRow {
        display: block;
    }

    .mobileViewer {
        background-color: var(--body_Background_Colour);
        min-height: 100vh;
        height: auto;

        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Two equal-width columns */
        gap: 5vw;
        /* Optional spacing between items */
        padding: 3vw;
        /* Optional padding inside the container */
    }


    .TopBar {
        display: none !important;
    }

    .mobileSearchRow {
        width: 96vw;
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .Search_Bar {
        display: none !important;
    }

    .NavButtonDiv {
        display: none !important;
    }

    .CurrencySelect {
        display: none !important;
    }

    .BasketButton {
        display: none !important;
    }

    .SettingsButton {
        display: none !important;
    }

    .SideBar {
        display: none !important;
    }



    .mobileModalDiv.active {

        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        display: flex;
        justify-content: center;
        /* centers horizontally */
        align-items: center;
        /* centers vertically */

        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }





    .Logo {
        display: none !important;
    }

    .SettingsButton {
        display: none !important;
    }

    .BasketButton {
        display: none !important;
    }

    .currency-select {
        display: none !important;
    }

    .MainPage {
        display: none !important;
    }



    body {
        width: auto;
        /* Default: Matches viewport width at 100% zoom */
        height: auto;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, auto) 1fr;
        /* First column fits content but stays within viewport */
        background-color: var(--body_Background_Colour);
        overflow-x: hidden;

        /* Prevents scrolling at 100% zoom */
    }

    /* When zoom level is above 100%, allow scrolling instead of shrinking */

    /* Default: hide the menu button on desktop */
    .MenuButton {
        display: none;
    }



    /* Top bar */
    .mobileTopBar {
        display: flex;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
        background-color: var(--TopBar_Background_Colour);
        padding: 2.222vw;
        gap: 2.778vw;
        width: 100vw;
        position: relative;
        /* Added this to enable z-index */
        z-index: 995;
    }




    .mobileNavButtonDiv {
        height: 80%;
        display: flex;
        align-items: center;
        /* Proper vertical alignment */
        justify-content: flex-end;
        /* Align children to the right */
        gap: 1.389vw;
        margin-right: 2vw;
        margin-left: auto;
        /* Push div itself to the right */
        flex-wrap: nowrap;
        /* Prevent wrap, or change to 'wrap' if space is tight */
        max-width: 100%;
        /* Prevent overflow */
    }


    .mobileHamburgerMenu {
        font-size: 2rem;
        background: none;
        border: none;
        color: var(--Default_Text_Colour);
        cursor: pointer;
    }

    .mobileSettingsButton,
    .mobileBasketButton {
        font-size: 1.9rem;
        background: none;
        border: none;
        color: var(--Default_Text_Colour);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.667vw;
    }

    /* 🔧 Target the actual <svg> inside */
    .mobileSettingsButton .Icon,
    .mobileBasketButton .Icon {
        width: 1.9rem;
        height: 1.9rem;
        color: inherit;
        /* ← uses the button's text color */
    }

    .mobileLogo h1 {
        color: var(--Default_Text_Colour);
        margin: 0;
        font-size: 5vh;
        font-family: "Italianno", cursive;
        font-weight: 800;
    }

    .mobileSearch_Bar {
        padding: 1.111vw;
        width: 94vw;
        font-size: 1rem;
        background-color: var(--SearchBar_Background_Colour);
        min-width: 5.556vw;
        font-family: 'Rubik', sans-serif;
    }

    .mobileCurrencySelect {
        padding: 1.111vw;
        color: var(--Default_Text_Colour);
        font-size: 1rem;
        background-color: var(--SearchBar_Background_Colour);
        display: none;



    }

    .ss-cart-inc {
        background-color: var(--Modal_Background_Colour);
        margin: 3.333vw 0 2.222vw;
        padding: 4%;
        padding-top: 5% !important;
        border-radius: 3.889vw;
        font-family: 'Afacad', sans-serif;
        border: 0.278vw solid rgba(0, 0, 0, .10);
        background: rgba(0, 0, 0, .02);
    }

    .Logo {
        grid-row: 1 / 1;
        grid-column: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;

        height: 8vh;
        width: 31.5vh;

        background-color: var(--SideBar_Background_Colour);
        /* <-- applied always */
        color: var(--Default_Text_Colour);
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        font-weight: bold;

        box-sizing: border-box;
        border: 0.278vw solid var(--Borders_Colour);
        border-radius: 1.389vw;

    }



    .MainPage {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 4vh;
        color: var(--Default_Text_Colour);
        /* Match logo text */
        background-color: var(--body_Background_Colour);
        /* Match logo bg */

        border: 0.15em solid var(--Borders_Colour);
        /* Same as logo */
        border-radius: 1.389vw;

        box-sizing: border-box;
        font-weight: bold;
    }


    .MainPage h1 {
        font-size: 5vh;
        /* Scale with height */
    }

    /* Fix TopBar shifting */


    .currency-select {
        flex-shrink: 0;
        max-height: 100%;
        aspect-ratio: 1 / 0.75;
        height: 100%;
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        border: 0.278vw solid var(--Borders_Colour);
        border-radius: 1.389vw;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        margin-left: 1%;
        padding: 0.5vh;
        appearance: none;
        /* Removes default browser styling */
        -webkit-appearance: none;
        /* For Safari */
        -moz-appearance: none;
        /* For Firefox */
        text-align: center;
    }



    .mobileSideBar {
        background-color: var(--SideBar_Background_Colour);
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;

        position: fixed;
        top: 0;
        left: 0;
        width: auto;
        max-width: auto;
        height: 100vh;

        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 990;
        padding: 1rem 1rem 5rem;
        box-shadow: 0.556vw 0 1.389vw rgba(0, 0, 0, 0.1);
    }

    .category-icon-wrapper {
        width: 5vw;
        aspect-ratio: 1/1;
    }

    .mobileSideBar.open {
        transform: translateX(0%);
        z-index: 2000;
    }

    .MenuButton {
        display: block;
        font-size: 4vh;
        background-color: transparent;
        color: var(--Default_Text_Colour);
        border: none;
        cursor: pointer;
        margin-right: 1vh;
    }

    .SideBar-open {
        transform: translateX(0%);
    }

    .sidebar {
        position: fixed;
        left: -69.444vw;
        top: 0;
        width: 69.444vw;
        height: 100%;
        background: var(--Input_Background);
        color: var(--Default_Text_Colour);
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .sidebar.active {
        left: 0;
    }



    .main-content.SideBar-open {
        margin-left: 69.444vw;
        transition: margin 0.3s ease;
    }

    .SideBar button {
        display: block;
        width: 100%;
        padding: 2.778vw 4.167vw;
        background: none;
        border: none;
        text-align: left;
        color: #ddd;
        font-size: 3.889vw;
        border-bottom: 0.278vw solid var(--Input_Background);
        cursor: pointer;
    }

    .SideBar button:hover {
        background: #2c3e50;
        color: var(--Default_Text_Colour);
    }

    .Viewer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 3vw;
        /* or column-gap */
        grid-row-gap: 3vw;
        /* or row-gap */
        background-color: var(--body_Background_Colour);
        padding: 0;
        width: 98%;
        max-width: 98%;
        margin: 0 2vw;
        justify-content: center;
        min-height: 100vh;
        /* 👈 Ensures background fills full viewport height */
    }




    .Search_Bar {
        max-height: 50%;
        min-height: 50%;
        width: 50%;
        height: 50%;
        font-size: 2vh;
        border-radius: 1.389vw;
        border: 0.05em solid var(--Borders_Colour);
        border-color: var(--Borders_Colour);
        padding-left: 1%;
        margin-left: 1%;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        overflow-x: auto;

    }


    /* Fix button spacing issue */
    .Category_Button.Active {
        background-color: var(--Accent_Colour);

        color: var(--Danger_Colour);
        font-weight: bold;
        border-radius: 1.389vw;

    }



    .Category_Button {
        width: 95%;
        height: 7vh;
        margin-left: 0%;
        background-color: var(--SideBar_Background_Colour);
        font-size: 4vh;
        /* Scales with button height */
        display: flex;
        align-items: flex-start;
        border-radius: 1.389vw;
        justify-content: left;
        box-sizing: border-box;
        border: 0 solid var(--Borders_Colour);
        /* Scales with font size */
    }

    .Category_Button h3 {
        font-size: 5vw;
        /* Ensures text scales with button */
        white-space: nowrap;
        border-radius: 1.389vw;
        margin-left: 0;

    }

    .product {
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border: 0.278vw solid var(--Input_Background);
        border-radius: 2.222vw;
        box-shadow: 0 1.111vw 2.222vw rgba(0, 0, 0, 0.1);
        padding: 2.778vw;
        width: 40vw;
        aspect-ratio: 1 /1.867;
        /* Allow grid to define width */
        max-width: 83.333vw;
        /* Ensures uniform width */
        height: fit-content;
        max-height: 125vw;
        display: flex;
        justify-content: center;
    }

    .Clickable_Image {

        max-width: 36vw;
        aspect-ratio: 1/1;
        margin-left: 2vw;
        border-radius: 2%;
    }

    .quantity-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2.222vw;
        width: 100%;
        padding-bottom: 4.167vw;
    }

    .quantity-controls {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 50%;

        gap: 5%;
        /* Take up 1/2 of the available space */
        color: var(--Default_Text_Colour);

    }

    .Product_Option_Button {
        min-width: 15vw;
        width: auto;

        padding-top: 2vw;
        font-family: 'Afacad', sans-serif;
        padding-bottom: 2vw;
        margin-left: 2vw;
        border: 0.278vw solid var(--Option_Button_Border);
        background-color: white;
        cursor: pointer;
        border-radius: 1vw;
        transition: 0.2s ease;
        font-size: 3.5vw;
    }

    .Product_Option_Button.selected {
        background-color: var(--Primary_Button_Colour);
        color: var(--Default_Text_Colour);
        border-color: var(--Primary_Button_Colour);
    }

    .Product_Options_Container {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;

        justify-content: left;
        margin-left: auto;
        margin-right: auto;
        height: auto;
    }

    .Product_Option_Buttons {
        display: flex;
        flex-wrap: wrap;
        row-gap: 1vw;
    }

    .Product_Option_Label {
        margin-top: auto;
        margin-bottom: auto;
        font-size: 3.5vw;
        font-family: 'Afacad', sans-serif;
    }

    .Product_Options_Container {
        display: flex;
        margin-right: auto;
    }

    .add-to-cart {
        background-color: var(--Primary_Button_Colour);
        color: #fff;
        font-weight: bold;
        border: none;
        aspect-ratio: 1/0.4;
        width: 50%;
        min-width: max-content;
        border-radius: 1.111vw;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 2.4vw;
        /* Take up the remaining space */
        text-align: center;
        font-family: 'Rubik', sans-serif;
    }

    .product-price {
        font-weight: 550;
        font-size: 4vw;
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
    }


    .add-to-cart:hover {
        background-color: var(--ButtonHoverState_Background_Colour);
    }

    .NavButtonDiv {
        height: 6vh;
        width: 20%;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1.389vw;

        /* Remove fixed positioning */
        position: static;
    }




    .BasketButton,
    .SettingsButton {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: auto;
        max-width: 100%;
        border-radius: 1.389vw;

        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border: 0.278vw solid var(--Borders_Colour);
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

    }

    .Quantity-Controls-Basket {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: 50%;
        margin-right: auto;
        margin-left: auto;
        margin-top: auto;
        margin-bottom: auto;
    }

    .Item-Details {
        display: grid;

        gap: 0;
        grid-template-rows: 0fr 0fr;
        width: 50%;
        height: 140%
    }

    .ProductPageBuyButton {
        color: var(--Default_Text_Colour);
        aspect-ratio: 7/1;
        width: 85vw;
        max-width: 90vw;
        border-radius: 1.389vw;
        background-color: var(--body_Background_Colour);
        border: 0.278vw solid var(--Borders_Colour);
        margin-top: auto;
        margin-bottom: auto;

    }

    .BasketText {
        font-size: 5vw;
        /* Scales based on view
            7port width */
        text-decoration: none;
        padding-bottom: 1vw;
        text-decoration: none;

        overflow: hidden;
        /* Prevents text from wrapping */
        color: var(--Default_Text_Colour);
        height: 5vw;
        max-width: 26ch;
        word-wrap: normal;
        word-break: normal;
        unicode-bidi: normal;
        text-overflow: ellipsis;
    }

    .BasketTextDescription {
        font-size: 2vw;
        color: var(--Default_Text_Colour);
        line-height: 1.2em;
        font-family: 'Afacad', sans-serif;
        /* 👈 Controls line height */
        height: calc(1.2em * 3);
        /* 👈 Ensures 6-line height */
        font-family: 'Rubik', sans-serif;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        /* margin-top: -1.389vw; */
    }



    .BasketChangeQuantityButton {
        height: 7.5vw;
        width: 7.5vw;
        background-color: var(--body_Background_Colour);
        aspect-ratio: 1/1;
        font-size: auto;
        color: var(--Default_Text_Colour);

        border-radius: 0.1rem;
        color: var(--Default_Text_Colour);


        border: none;
        border-radius: 5%;
        aspect-ratio: 1 / 1;

        background-color: var(--body_Background_Colour);
        border: 0.278vw solid var(--Borders_Colour);
        margin-top: 0;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .BasketChangeQuantityText {
        color: var(--Default_Text_Colour);
        white-space: nowrap;
        font-size: 5vw;
        max-width: fit-content;

        transition: font-size 0s ease;
    }


    .SortContainer {
        /* background-color: var(--TopBar_Background_Colour); */
        grid-row: 1 / 1;
        grid-column: 2 / 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 0 3vw;
        width: 100%;
        padding-top: 2%;
        height: 5vh;
        max-width: 100%;
        max-height: 5vh;
        color: var(--Default_Text_Colour);
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        font-weight: 600;
    }


    /* Ensure the dropdown doesn't resize (Safari-safe + modern) */
    #sortSelect {

        padding: 1vw;

        font-size: 3vw;
        font-weight: 600;
        line-height: 1.1;
        font-family: 'Rubik', sans-serif;

        color: var(--Default_Text_Colour);
        background-color: var(--SearchBar_Background_Colour);

        border: none;
        border-radius: 1vw;

        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207.5l5%205%205-5%22%20stroke%3D%22rgba%280%2C0%2C0%2C0.65%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 3.333vw center;


        box-shadow: var(--DefaultBoxShadow);

        cursor: pointer;
        outline: none;
    }

    #sortSelect:focus {
        border-color: rgba(60, 130, 246, 0.55);
        box-shadow: 0 0 0 1.111vw rgba(60, 130, 246, 0.18);
    }

    .dark-mode #sortSelect {
        border-color: rgba(255, 255, 255, 0.14);
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207.5l5%205%205-5%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.70%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
        box-shadow: 0 2.778vw 6.111vw rgba(0, 0, 0, 0.35),
            inset 0 0.278vw 0 rgba(255, 255, 255, 0.06);
    }

    .SortSelectLabel {
        font-size: 60%;
        color: var(--Default_Text_Colour);
        font-family: 'Rubik', sans-serif;
    }

    /* ===== Custom Sort Dropdown (native <select> can't match this design across browsers) ===== */
    .SSSort {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2.778vw;
        width: 100%;
    }

    .SSSortTriggerText {
        white-space: nowrap;
        font-size: 100%;
    }

    .SSSortLabel {
        font-weight: 700;
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        line-height: 1;
        color: var(--Default_Text_Colour);
        white-space: nowrap;
    }

    .SSSortTrigger {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        padding: 1.5vw;
        border-radius: 1vw;
        display: inline-flex;
        align-items: center;
        gap: 2vw;
        font-family: 'Afacad', sans-serif;
        font-size: clamp(3.889vw, 2.2vw, 5vw);
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--DefaultBoxShadow);
        white-space: nowrap;
    }

    .SSSortTrigger:active {
        transform: translateY(0.278vw);
    }

    .SSSortTriggerText {
        white-space: nowrap;
    }

    .SSSortChevron {
        width: 2.778vw;
        height: 2.778vw;
        display: inline-block;
        border-right: 0.556vw solid rgba(0, 0, 0, 0.55);
        border-bottom: 0.556vw solid rgba(0, 0, 0, 0.55);
        transform: rotate(45deg);
        margin-top: -0.556vw;
    }

    .dark-mode .SSSortChevron {
        border-right-color: rgba(255, 255, 255, 0.70);
        border-bottom-color: rgba(255, 255, 255, 0.70);
    }

    .SSSortMenu {
        position: absolute;
        left: 0;
        top: calc(100% + 2.222vw);
        min-width: 72.222vw;
        max-width: min(90vw, 100vw);
        background: rgba(255, 255, 255, 0.96);
        border-radius: 3.889vw;
        box-shadow: 0 5.556vw 16.667vw rgba(0, 0, 0, 0.18), 0 0.556vw 2.222vw rgba(0, 0, 0, 0.08);
        overflow: hidden;
        backdrop-filter: blur(2.778vw);
        -webkit-backdrop-filter: blur(2.778vw);
        z-index: 9999;
    }

    .dark-mode .SSSortMenu {
        background: rgba(20, 20, 20, 0.92);
    }

    .SSSortMenu::before {
        content: "Sort by:";
        display: block;
        padding: 3.333vw 3.889vw;
        font-weight: 700;
        color: #222;
        border-bottom: 0.278vw solid rgba(0, 0, 0, 0.08);
    }

    .dark-mode .SSSortMenu::before {
        color: rgba(255, 255, 255, 0.90);
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }

    .SSSortItem {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 3.333vw 3.889vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 4.444vw;
        color: #222;
        cursor: pointer;
    }

    .dark-mode .SSSortItem {
        color: rgba(255, 255, 255, 0.92);
    }

    .SSSortItem+.SSSortItem {
        border-top: 0.278vw solid rgba(0, 0, 0, 0.08);
    }

    .dark-mode .SSSortItem+.SSSortItem {
        border-top-color: rgba(255, 255, 255, 0.10);
    }

    .SSSortItem:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .dark-mode .SSSortItem:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .SSSortCheck {
        width: 2.778vw;
        height: 5vw;
        border-right: 0.833vw solid #2f80ed;
        border-bottom: 0.833vw solid #2f80ed;
        transform: rotate(45deg);
        opacity: 0;
    }

    .SSSortItem.is-selected .SSSortCheck {
        opacity: 1;
    }

    /* Mobile sizing so it looks like your reference screenshot */
    @media (max-width: 188.889vw) {
        .SSSortLabel {
            font-size: 100%;
            font-family: 'Afacad', sans-serif;
        }


    }

    /* ===== /Custom Sort Dropdown ===== */


    .BasketTotalPrice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 277.778vw;
        height: 97.222vw;
        box-sizing: border-box;
        border: 0.278vw solid var(--Borders_Colour);
        /* Scales with font size */
    }

    .Basket-Item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 95vw;
        max-width: 555.556vw;
        aspect-ratio: 5.75/1;
        height: auto;
        box-sizing: border-box;
        border: 0 solid var(--Borders_Colour);
    }

    .Basket_Item_Container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 95vw;
        margin-top: 1vw;
        max-width: 555.556vw;
        aspect-ratio: 5.25/1;
        box-sizing: border-box;
        border: 0.278vw solid var(--Borders_Colour);
        /* Scales with font size */
        max-height: fit-content !important;
    }

    .Basket_Image {
        max-width: 20vw;
        aspect-ratio: 1/1;
        margin-left: 1vw;
        margin-right: 1vw;
        border-radius: 0.2rem;
    }

    .cart-icon {
        stroke: white;
        height: 3vw;
        width: 3vw;
    }

    .cart-icon-product {
        stroke: white;
        height: 6vw;
        width: 6vw;
        align-items: center;
        margin-left: 1.389vw;
    }

    .Basket_Viewer {

        width: 100%;
        max-width: 100%;
        padding-top: 3vw;
        row-gap: 0vw;

    }

    .WhiteText {
        color: var(--Default_Text_Colour);
        font-size: 150%;
        height: 100%;
        font-family: 'Afacad', sans-serif;
    }

    .ProductPrice {
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
    }

    .ProductName {
        color: var(--Default_Text_Colour);
    }

    .product-name {
        color: var(--Default_Text_Colour);
        font-size: 3.5vw;
        min-height: 7vw;
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 👈 Allow up to 2 lines */
        -webkit-box-orient: vertical;
        /* 👈 Set box direction */
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        line-clamp: 2;
        margin-top: 3vw;
        margin-bottom: 2vw;
        margin-left: 2vw;
        /* Optional fallback for modern browsers */
    }


    .Product_Details {
        display: flex;
        gap: 5.556vw;
        width: 100%;
        height: fit-content;
    }


    .Product_Images {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        /* Ensure full width for centering */
        /* justify-content: center; */
    }

    .ImageControl {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        /* Space between arrows and image */
        width: 90vw;
        margin-bottom: 2vw;
    }

    .image-slider-wrapper {
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }


    .slide-image {
        transition: transform 0.2s ease;
        will-change: transform;
    }


    .ImageControlButtonPrevious,
    .ImageControlButtonNext {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12vw;
        /* or suitable size */
        height: 12vw;
        background: transparent;
        border: none;
        cursor: pointer;
    }




    .ThumbnailsHolder {
        display: grid;
        grid-template-columns: repeat(5, 10vw);
        /* 5 fixed 10vw columns */
        gap: 1vw;
        width: fit-content;
        margin-top: 2vw;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        /* ✅ centers the thumbnails */
    }

    .Thumbnail {
        width: 10vw;
        height: 10vw;
        object-fit: cover;
        border: 0.3vw solid var(--Borders_Colour);
        cursor: pointer;

        border-radius: 0.1rem;
    }

    .Thumbnail.active {
        border: 0.3vw solid var(--Thumbnail_Active_Border);
        box-shadow: 0 0 0.5vw var(--Accent_Colour);
        border-radius: 0.1rem;
    }




    .Product_Info {
        display: flex;
        flex-direction: column;
        gap: 2.778vw;
        width: 85vw;
        max-width: 144.444vw;
        color: var(--Default_Text_Colour);

        margin: 0 auto;
        /* Center horizontally */
        align-items: center;
        /* Center children inside */
    }

    .Add_To_Cart_Product {
        display: flex;
        flex-direction: column;
        width: 100%;
    }






    .ButtonText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        /* ✅ Ensures proper centering */
        aspect-ratio: 1/1;
    }

    .ImageControlButtonText {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        /* Remove margin to avoid vertical offset */
        margin: 0;
        font-size: 200%;
        color: var(--Default_Text_Colour);
        aspect-ratio: 1 / 1;
        /* Optional if you want it square */
        text-align: center;
        pointer-events: none;
        /* So text doesn’t block button clicks */
    }








    .mainImage {
        max-width: 99%;
        max-height: 99%;
        width: 99%;
        height: 99%;
        aspect-ratio: 1 / 1;
        border: 0.444vw solid var(--Borders_Colour);
        /* 0.1rem ≈ 0.444vw */
        box-sizing: border-box;

        border-radius: 0.3rem;

        /* Fixed image size in vw */

        object-fit: cover;


    }




    .Quantity_Controls_ProductPage {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 40vw;

        gap: 5%;
        /* Take up 1/2 of the available space */
        color: var(--Default_Text_Colour);
    }

    .ProductPageQuantityContainer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5vw;
        width: 85vw;
        padding-bottom: 4.167vw;

    }




    .BasketReceipt {
        background: rgba(255, 255, 255, 0);
        color: rgb(255, 255, 255);
        width: 95vw;
        height: auto;
    }

    .ReceiptTable {
        width: 95vw;
        max-width: 277.778vw;
        margin-top: 2vw;
        border-collapse: collapse;
        background-color: rgba(255, 255, 255, 0);
        filter: none !important;
        text-shadow: none !important;
        opacity: 1 !important;
        border: 0.278vw solid var(--Borders_Colour);
        height: 5vw;
    }

    .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        /* ✅ Vertically center it */
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .ReceiptTable td {
        padding-left: 5vw;
        padding-top: 2vw;
        padding-bottom: 1vw;
        margin-top: 1vw;
        margin-bottom: 1vw;
        border-bottom: 0.278vw solid var(--Borders_Colour);
        /* Keep individual row borders */
        font-size: 3vw;
    }

    .ReceiptTable td:nth-child(3) {

        text-align: right;
        font-size: 3vw;
        padding-right: 3.5vw;
        /* Pushes the price slightly away from the right edge */
    }

    .ReceiptTable td:nth-child(2) {
        text-align: left;
        font-family: 'Afacad', sans-serif;
        color: var(--Default_Text_Colour);
        overflow: hidden;
        text-overflow: ellipsis;

        unicode-bidi: normal;
        text-overflow: ellipsis;
        word-wrap: normal;
        word-break: normal;
        max-width: 26ch;
        /* Adjust spacing */
        font-size: 3vw;
        white-space: nowrap;
    }

    .ReceiptFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;

        border: 0.278vw solid var(--Borders_Colour);
        gap: 20%;
        height: auto;
        max-width: 555.556vw;

        aspect-ratio: 15/1;
    }

    .PriceAndOptionRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .BasketSelectedOption {
        font-size: 3vw;
        color: var(--Default_Text_Colour);
        height: 3.5vw;
        margin-top: auto;
        margin-bottom: 1.5vw;
        text-align: left;
        font-family: 'Afacad', sans-serif;
    }

    .PayButton {
        background: var(--Primary_Button_Colour);
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
        border: none;
        cursor: pointer;
        width: 50%;
        padding-left: 1vw;
        margin-left: 0.5%;
        height: 175%;
        font-size: auto;

    }

    .category-icon-svg {
        fill: var(--Default_Text_Colour);
        aspect-ratio: 1/1;
        height: 2.75vh;
    }

    .PayTotalText {
        color: var(--Default_Text_Colour);
        margin-left: auto;
        text-align: right;
        font-family: 'Afacad', sans-serif;
        font-size: 5vw;
        margin-right: 4.167vw;
        max-height: auto;
        height: auto;
        width: 40%;
    }

    .Basket-Item-Pay {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: 1fr 5fr;
        width: 277.778vw;
        box-sizing: border-box;
        border: 0.278vw var(--Borders_Colour);
    }

    .basket-item-price {
        font-size: 3vw;
        /* Scales based on viewport width */
        white-space: nowrap;
        /* Prevents text from wrapping */
        color: var(--Default_Text_Colour);
        text-align: left;
        max-width: 100%;
        height: 3.5vw;
        margin-top: auto;
        margin-bottom: 1.5vw;
        font-family: 'Afacad', sans-serif;
    }

    .EmptyBasketMessage {
        text-align: center;
        font-size: 5vw;
        width: 90vw;
        color: var(--Muted_Text_Colour);
        padding: 2.778vw;
    }



    /* Modal Styles */

    input {
        width: 100%;
        background: var(--Input_Background);
        /* Dark input background */
        border: 0.278vw solid var(--Input_Border);
        /* Subtle border */
        color: var(--Default_Text_Colour);
        border-radius: 1.389vw;
        outline: none;
    }


    .modal-content {
        position: relative;
        width: 90vw;
        max-width: 138.889vw;
        background-color: var(--Modal_Background_Colour);
        border-radius: 2.778vw;
        padding: 5.556vw;
        overflow-y: auto;
        max-height: 90vh;
        /* ✅ Avoids going off screen */
    }



    .modal-content input {
        width: 90%;
        padding: 2.778vw;
        margin: 1.389vw;
        border: 0.278vw solid #272626;
        border-radius: 1.389vw;
    }

    .card-details {
        display: flex;
        justify-content: space-between;
    }

    .card-details div {
        width: 48%;
    }


    .Button {
        color: var(--Default_Text_Colour);
        width: 100%;
        font-size: 5vw;
        border: none;
        border-radius: 10%;
        aspect-ratio: 1/1;
        width: 50%;
        background-color: var(--body_Background_Colour);
        border: 0.278vw solid var(--Borders_Colour);
        margin-top: 0;
        cursor: pointer;
        transition: background-color 0.3s;
    }



    .Submit_Button {
        background-color: var(--ButtonHoverState_Background_Colour);
        width: 100%;
        height: 10%;
        aspect-ratio: 5 / 1;
        margin-top: 4.167vw;
        color: var(--Default_Text_Colour);
        box-shadow: none;
        border: none;
        /* ✅ Removes any border */
        outline: none;
        /* ✅ Removes any focus outline */
        appearance: none;
        /* ✅ Prevents browser default styling (especially in Safari) */
        background-image: none;
    }

    .close {
        position: absolute;
        top: 2.778vw;
        right: 4.167vw;
        font-size: 6.667vw;
        cursor: pointer;
        color: var(--Default_Text_Colour);

    }

    /* Dark Mode Toggle */
    .dark-mode-toggle {
        display: flex;
        align-items: center;
        gap: 2.778vw;
        font-size: 4.444vw;
        font-weight: bold;
        margin-bottom: 5.556vw;
    }

    .switch {
        position: relative;
        width: 11.111vw;
        height: 5.556vw;
        display: inline-block;
        vertical-align: middle;
        margin-left: 2.778vw;
    }

    .switch input {
        display: none;
    }

    .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        border-radius: 5.556vw;
        cursor: pointer;
        transition: 0.4s;
    }

    .slider::before {
        content: "";
        position: absolute;
        width: 3.889vw;
        height: 3.889vw;
        left: 0.833vw;
        bottom: 0.833vw;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    input:checked+.slider {
        background: white;
    }

    input:checked+.slider::before {
        transform: translateX(5.556vw);
        background: black;
    }

    /* Entire Page Dark Mode */
    .dark-mode {
        background: #222;
        color: var(--Default_Text_Colour);

    }

    /* Settings Container */
    #Settings_Viewer {
        width: 97.222vw;
        padding: 5.556vw;
        background: white;
        border: 0.556vw solid black;
        border-radius: 2.778vw;
        box-shadow: 1.389vw 1.389vw 0 black;
        font-family: Arial, sans-serif;
    }

    .dark-mode #Settings_Viewer {
        background: var(--Input_Background);
        color: var(--Default_Text_Colour);
        border-color: white;
        box-shadow: 1.389vw 1.389vw 0 white;
    }

    /* Settings Panel */
    .settings-panel {
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        max-width: 194.444vw;
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 11.111vw;
        border-radius: 3.333vw;
        padding: 8.333vw;
        box-shadow: 0 0 4.167vw #00000066;
        font-family: Arial, sans-serif;
    }

    body {
        padding-top: 23.611vw;
        /* Adjust based on actual header height */
        width: 100vw;
    }

    /* Individual section */
    .settings-section {

        border-bottom: 0.278vw solid var(--Borders_Colour);

    }

    .settings-section h3 {
        font-size: 6.111vw;
        margin-bottom: 3.333vw;
    }

    .settings-section label {
        font-size: 4.444vw;
        font-weight: bold;
        margin-top: 2.778vw;
        margin-bottom: 1.389vw;
        display: block;
        background-color: transparent;
        /* Fixes "input-like" look */
    }

    .MessageTextArea {
        font-size: 4.444vw;
        margin-top: 2.778vw;
        display: block;
        width: 100%;
        background-color: var(--Input_Background);
        border: 0.278vw solid var(--Borders_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 1.389vw;
        padding: 2.778vw;
        box-sizing: border-box;
        min-height: 138.889vw;
        height: fit-content;
        overflow-y: auto;
    }

    .RecoStrip {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: auto !important;
        min-width: fit-content !important;
    }

    .settings-section input {
        font-size: 4.444vw;
        margin-top: 2.778vw;
        display: block;
        width: 100%;
        background-color: var(--Input_Background);
        border: 0.278vw solid var(--Borders_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 1.389vw;
        padding: 2.778vw;
        box-sizing: border-box;
    }



    /* Buttons */
    .settings-section button {
        margin-top: 2.778vw;
        padding: 3.333vw;
        background-color: var(--ButtonHoverState_Background_Colour);
        border: none;
        border-radius: 1.389vw;
        color: var(--Default_Text_Colour);
        font-weight: bold;
        cursor: pointer;
        width: 100%;
    }

    .settings-section {
        width: auto;
        padding: 2.778vw;
        padding-bottom: 8.333vw;
    }

    .clearDataButton {
        width: auto;
        color: var(--Default_Text_Colour);
        background-color: var(--Primary_Button_Colour);
    }

    .settings-section button:hover {
        background-color: #004080;
    }

    /* Info message */
    .contact-note {
        font-size: 3.889vw;
        margin-top: 2.778vw;
    }

    .contact-note a {
        color: var(--Info_Link_Colour);
        text-decoration: underline;
    }

    /* Product section extras */
    #ProductWrapper {
        background-color: var(--body_Background_Colour);

    }

    .Product_Name_Heading {
        font-family: 'Rubik', sans-serif;
        font-weight: 700;
        /* or 600, 500, etc. */
        font-size: 5vw;
        color: var(--Default_Text_Colour);
        margin-bottom: 2.778vw;
        width: 80vw;
        text-align: center;
    }

    .add-to-cart-product {
        background-color: var(--Primary_Button_Colour);
        color: #fff;
        font-weight: bold;
        border: none;
        min-width: max-content;
        aspect-ratio: 1/0.4;
        padding-left: 6vw;
        width: 50%;
        border-radius: 1.111vw;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 4vw;
        /* Take up the remaining space */
        text-align: center;
        font-family: 'Rubik', sans-serif;
    }

    .Product_Description {

        font-family: 'Afacad', sans-serif;
        white-space: pre-line;
        font-size: 4.5vw;
        color: var(--Default_Text_Colour);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80vw;
        margin-left: 4.5vw;
    }

    .ReceiptTable td {
        color: var(--Default_Text_Colour);
    }

    .Product_Price_Label {
        font-size: 4vw;
        color: var(--accent-color);
        margin-top: 2.778vw;
        text-align: left;
        /* Aligns text to the left */
        align-self: flex-start;
        font-family: 'Afacad', sans-serif;
        margin-left: auto;
        margin-right: auto;
        width: 87.5%;
        /* Ensures the container itself aligns left in flex layout */
    }


    .currencySelect {
        width: auto;
        display: inline-block;

        font-size: 8.333vw;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);


        appearance: none;
        /* optional: removes native arrow styling */
        -webkit-appearance: none;
        -moz-appearance: none;
        text-align: left;
        width: 48.611vw;
    }

    .mobileHeaderWrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;

        background-color: var(--TopBar_Background_Colour);
        /* or your preferred color */
        width: 100%;
    }





}

/* === PAYMENT MODAL – OVERLAY, LAYOUT, TYPOGRAPHY ======================= */

#paymentModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    box-sizing: border-box;
    overflow: hidden;
    /* no horizontal scroll */
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
        "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* make all inner elements respect the width */
#paymentModal * {
    box-sizing: border-box;
}

/* light overlay */
.light-mode #paymentModal {
    background: rgba(15, 23, 42, 0.30);
}

/* dark overlay – tuned to match reference */
.dark-mode #paymentModal {
    background: #00000087;
}

/* === CARD CONTAINER ==================================================== */

#paymentModal .modal-content {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    padding: 30px 28px 26px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.35);
    /* box-shadow: 0 24px 60px rgba(15, 23, 42, 0.65); */
}

/* dark card – deep navy, soft highlight like screenshot */
.dark-mode #paymentModal .modal-content {
    background: #14161E;
    border: 1px solid #282839;
    /* color: #e5e7eb; */
}

/* light card */
.light-mode #paymentModal .modal-content {
    background: #ffffff;
    color: #0f172a;
}

/* === HEADER & CLOSE BUTTON ============================================ */

#paymentModal h2 {
    margin: 0 0 26px;
    font-size: 22px;
    font-weight: 600;
    font-family: sans-serif;
    text-align: center;
}

#paymentModal .close {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 22px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#paymentModal .close:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* === FORM LAYOUT ======================================================= */

#paymentModal #paymentForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#paymentModal #Name_Holder,
#paymentModal #Address_Holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* === INPUTS & SELECTS ================================================== */

#paymentModal input[type="text"],
#paymentModal input[type="email"],
#paymentModal input[type="tel"],
#paymentModal input[type="number"],
#paymentModal select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    padding: 13px 14px;
    font-size: 14px;
    background: rgba(249, 250, 251, 1);
    /* color: #111827; */
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        transform 0.07s ease;
}

/* dark fields – slightly lighter than card, bluish tint */
.dark-mode #paymentModal input[type="text"],
.dark-mode #paymentModal input[type="email"],
.dark-mode #paymentModal input[type="tel"],
.dark-mode #paymentModal input[type="number"],
.dark-mode #paymentModal select {


    color: #e5e7eb;
}

#paymentModal input::placeholder {
    color: rgba(148, 163, 184, 0.85);
}

.dark-mode #paymentModal input::placeholder {
    color: #64748b;
}

#paymentModal input:focus,
#paymentModal select:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.95),
        0 0 0 6px rgba(34, 197, 94, 0.14);
    transform: translateY(-0.5px);
}

/* Country of Residence label */
#paymentModal #Address_Holder label {
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px;
    color: inherit;
    opacity: 0.9;
    text-align: center;
    font-family: 'Afacad';
    font-weight: 600;
}

/* === TOMSELECT (Country of Residence dropdown) ======================== */

#paymentModal .ts-wrapper.single .ts-control {
    border-radius: 14px !important;

    min-height: 48px;
    padding: 0 12px !important;

    color: #111827 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* center text horizontally */
    text-align: center !important;
    box-shadow: none !important;
}

/* dark version – same tone as inputs */
.dark-mode #paymentModal .ts-wrapper.single .ts-control {


    color: #e5e7eb !important;
}

#paymentModal .ts-wrapper .ts-control .item,
#paymentModal .ts-control input {
    text-align: center !important;
}

/* dropdown menu */
#paymentModal .ts-dropdown {
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

.dark-mode #paymentModal .ts-dropdown {
    background: #020617 !important;
    color: #e5e7eb !important;
}

/* === STRIPE ELEMENT CONTAINERS ======================================== */

#paymentModal #payment-request-button {
    margin: 20px 0 12px;
}

/* round Link/Apple/Google pay button */
#paymentModal #payment-request-button .StripeElement {
    border-radius: 9999px;
    overflow: hidden;
}

/* container around Payment Element tabs etc. */
#paymentModal #payment-element {
    margin-top: 14px;
    padding: 14px 14px 12px;
    border-radius: 18px;

    background: #ffffff;
    /* border: 1px solid rgba(148, 163, 184, 0.45); */
}

/* dark: same card tone as screenshot */
.dark-mode #paymentModal #payment-element {
    background: var(--Modal_Background_Colour);
    border: none;
}


/* === SUBMIT BUTTON ===================================================== */

#paymentModal .Submit_Button {
    margin-top: 22px;
    width: 100%;
    border-radius: 9999px;
    border: none;
    /* padding: 14px 18px; */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: #386400 !important;
    color: #f9fafb !important;
    text-align: center;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.07s ease,
        opacity 0.15s ease;
}

.light-mode #paymentModal .Submit_Button {
    background: #020617 !important;
}

#paymentModal .Submit_Button:hover:not(:disabled) {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
    transform: translateY(-1px);
}

#paymentModal .Submit_Button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* === SIDE BAR REFINEMENT – DESKTOP (>= 680px) ======================= */

:root {
    /* extra tokens just for sidebar buttons */
    --Sidebar_Button_BG: #F4F1EB;
    --Sidebar_Button_BG_Hover: #E9E1D6;
    --Sidebar_Button_BG_Active: #59a3f2;
    --Sidebar_Button_Border: #E0D7C9;
}

.light-mode {
    --Sidebar_Button_BG: #F4F1EB;
    --Sidebar_Button_BG_Hover: #E9E1D6;
    --Sidebar_Button_BG_Active: #59a3f2;
    --Sidebar_Button_Border: #E0D7C9;
}

.dark-mode {
    /* keep sidebar readable in dark mode too */
    --Sidebar_Button_BG: #262626;
    --Sidebar_Button_BG_Hover: #303030;
    --Sidebar_Button_BG_Active: #007BFF;
    --Sidebar_Button_Border: #3A3A3A;
}

@media (min-width: 680px) {

    /* sidebar container */
    .SideBar {
        background-color: var(--TopBar_Background_Colour);
        /* max-width: 280px; */
        min-width: 280px;
        padding: 5px 10px 50px;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.06);
        /* border-right: 1px solid rgba(0, 0, 0, 0.04); */
        /* row-gap: 10px; */
        align-self: stretch;
        min-height: calc(100vh - 8vh);
    }

    /* logo block more like a card */
    .Logo {
        width: 100%;
        border-radius: 10px;
        background-color: var(--TopBar_Background_Colour);
        border: 1px solid var(--Sidebar_Button_Border);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 26px;
        letter-spacing: 0.03em;
        /* margin-bottom: 18px; */
        padding-bottom: 10px;
        /* margin-left: 5px; */
        /* margin-right: 5px; */
    }

    /* category buttons -> soft beige cards */
    .Category_Button {
        width: 100%;
        min-width: fit-content;
        min-height: 48px;
        height: auto;
        margin: 4px 0;
        padding: 9px 11px;
        border-radius: 10px;
        border: 1px solid var(--Sidebar_Button_Border);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            transform 0.15s ease;
    }

    .Category_Button:hover {
        background-color: var(--Sidebar_Button_BG_Hover);
        border-color: var(--Sidebar_Button_BG_Hover);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    /* active category → blue pill from mock */



    /* text + icon layout inside buttons */
    .Category_Button_Heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.8rem;
        width: 100%;
    }

    .Category_Button_Heading h3 {
        margin: 0;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--Category_Button_Text_Colour);
        white-space: nowrap;
    }

    /* circular icon background, smaller SVG */
    .category-icon-wrapper {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background-color: rgba(0, 0, 0, 0.04);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .category-icon-svg {
        width: 16px;
        height: 16px;
        fill: var(--Default_Text_Colour);
    }
}

/* === OPTIONAL: MOBILE SIDEBAR TO MATCH DESKTOP STYLE =============== */

@media (max-width: 680px) {
    .mobileSideBar {
        background-color: var(--SideBar_Background_Colour);
        padding-top: 4.444vw;
        padding-bottom: 8.889vw;
        box-shadow: 1.111vw 0 3.333vw rgba(0, 0, 0, 0.14);
    }


}


/* === OVERRIDE PRODUCT DETAIL LAYOUT (desktop + mobile) === */

@media (min-width: 681px) {
    .Product_Viewer {
        margin-top: 24px;
        max-width: 1300px;
        margin-left: 25px;
        height: auto;
        background-color: var(--SearchBar_Background_Colour);
        color: var(--Default_Text_Colour);
        border-radius: 5px;
        position: relative;
        box-shadow: 0 0 0 24px var(--SearchBar_Background_Colour);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 32px 80px;
        overflow: visible;
        font-size: 16px;
    }

    .Product_Details {
        display: flex;
        gap: 40px;
        width: 100%;
        align-items: flex-start;
        height: auto;
    }

    .Product_Images {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 650px;
        height: auto;
        justify-content: center;
        align-items: center;
    }

    .Product_Info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 520px;
        max-width: 520px;
        margin: 0;
        align-items: flex-start;
        color: var(--Default_Text_Colour);
    }

    .ThumbnailsHolder {
        display: grid;
        grid-template-columns: repeat(5, 80px);
        gap: 10px;
        padding-right: 40px;
        max-width: 500px;
        width: 500px;
        margin-top: 5px;
        padding-left: 0;
        justify-content: center;
        align-self: flex-start;
    }



    /* ===========================
   REPLACE your current SSSort CSS with this block
   (paste as-is into index.html)
   =========================== */

    /* Base (works for both, mobile stays mobile-like) */
    .SSSort {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 14px;
        z-index: 9999 !important;
    }

    .SSSortLabel {
        font-weight: 700 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        color: var(--Default_Text_Colour);
        font-family: 'Afacad', sans-serif;
    }

    /* Trigger pill */
    .SSSortTrigger {
        appearance: none !important;
        -webkit-appearance: none !important;
        border: 0 !important;
        background: var(--SearchBar_Background_Colour);
        font-weight: 600;
        padding: 8px 14px !important;
        border-radius: 10px !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 50px !important;
        font-family: 'Rubik', sans-serif;
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;

        cursor: pointer !important;
        box-shadow:
            var(--DefaultBoxShadow);
        /* IMPORTANT: remove “button look” / focus outlines that cause the boxed UI in your screenshot */
        outline: none !important;
    }

    .SSSortTrigger:focus,
    .SSSortTrigger:focus-visible {
        outline: none !important;
        box-shadow:
            var(--DefaultBoxShadow);
    }

    .SSSortTriggerText {
        font-size: 18px !important;
        font-family: 'Rubik', sans-serif;
        line-height: 1 !important;
        color: var(--Default_Text_Colour) !important;
    }

    /* Chevron */
    .SSSortChevron {
        width: 10px !important;
        height: 10px !important;
        display: inline-block !important;
        border-right: 2px solid rgba(0, 0, 0, 0.55) !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.55) !important;
        transform: rotate(45deg) !important;
        margin-top: -2px !important;
    }

    /* Popover menu */
    .SSSortMenu {
        position: absolute !important;
        left: 0 !important;
        top: calc(100% + 8px) !important;

        min-width: 260px !important;
        max-width: min(92vw, 340px) !important;

        background: rgba(255, 255, 255, 0.96) !important;
        border-radius: 14px !important;

        /* This prevents the “stretched/boxed” look */
        border: 0 !important;
        outline: none !important;

        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.18),
            0 2px 8px rgba(0, 0, 0, 0.08) !important;

        overflow: hidden !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Header row like iOS */
    .SSSortMenu::before {
        content: "Sort by:" !important;
        display: block !important;
        padding: 10px 14px !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #222 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        background: transparent !important;
    }

    /* Items */
    .SSSortItem {
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        padding: 12px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        font-size: 16px !important;
        color: #222 !important;
        cursor: pointer !important;

        /* Prevent default button focus ring/box */
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        text-align: left !important;
    }

    .SSSortItem:focus,
    .SSSortItem:focus-visible {
        outline: none !important;
        background: rgba(0, 0, 0, 0.04) !important;
    }

    .SSSortItem+.SSSortItem {
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .SSSortItem:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }

    .SSSortItemLabel {
        line-height: 1.2 !important;
    }

    /* Checkmark */
    .SSSortCheck {
        width: 10px !important;
        height: 18px !important;
        border-right: 3px solid #2f80ed !important;
        border-bottom: 3px solid #2f80ed !important;
        transform: rotate(45deg) !important;
        opacity: 0 !important;
        flex: 0 0 auto !important;
    }

    .SSSortItem.is-selected .SSSortCheck {
        opacity: 1 !important;
    }

    /* ===========================
   Desktop (>= 681px):
   keep the same look, just prevent weird stretching
   =========================== */
    @media (min-width: 681px) {

        /* ensure the sort bar doesn't expand into a weird full-width row */
        .SSSort {
            width: auto !important;
            max-width: 100% !important;
        }

        /* menu width similar to your reference */
        .SSSortMenu {
            min-width: 280px !important;
            max-width: 360px !important;
        }
    }



}

/* chips sizing */
@media (max-width: 680px) {

    .ss-chip,
    .BasketOptionChip,
    .basket-option-chip {
        font-size: 2.778vw !important;
        padding: 1.111vw 2.222vw !important;
        border-radius: 277.5vw !important;
        line-height: 1.15 !important;
        max-width: 70vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .Product_Viewer {
        min-width: 95vw;
    }

    .RecoCard {
        scroll-snap-align: start;
        border: 0.278vw solid rgba(255, 255, 255, .12);
        border-radius: 3.889vw;
        padding: 2.778vw;
        background: rgba(255, 255, 255, .04);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 2.222vw;
        min-height: 61.111vw;
    }
}

/* =========================================================
   MOBILE PDP: keep layout inside viewport
   ========================================================= */
@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden !important;
    }



    /* force stack */
    .Product_Details {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 4vh;
    }
}

/* IMPORTANT: you currently have margin-left:-5vw which shifts everything and causes “off-center” */
.Product_Images {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    align-items: center !important;
}

/* stop the “thin text column” effect */
.Product_Info {
    width: 100% !important;
    max-width: 100% !important;
}

.Product_Description {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* thumbnails: wrap, don’t force weird widths */
.ThumbnailsHolder {

    display: grid !important;
    min-width: 80%;
    gap: 8px !important;
    justify-content: center !important;
}

/* Product page skeleton */
.pps {
    width: 100%;
    display: block;
    padding: 14px 10px 20px;
    box-sizing: border-box;
}

.pps-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.pps-top {
    display: grid;
    grid-template-columns: minmax(320px, 620px) minmax(300px, 420px);
    gap: 34px;
    align-items: start;
}

/* left side */
.pps-left {
    position: relative;
    padding: 12px 36px 0;
}

.pps-main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    display: block;
}

.pps-arrow {
    position: absolute;
    top: 42%;
    width: 0;
    height: 0;
    opacity: 0.9;
    transform: translateY(-50%);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.pps-arrow-left {
    left: 0;
    border-right: 26px solid #b9b2ab;
}

.pps-arrow-right {
    right: 0;
    border-left: 26px solid #b9b2ab;
}

.pps-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 0 32px;
}

.pps-thumb {
    width: 58px;
    height: 58px;
    border-radius: 6px;
}

/* right side */
.pps-right {
    padding-top: 8px;
}

.pps-title-line {
    height: 22px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.pps-title-line-1 {
    width: 82%;
    height: 24px;
}

.pps-title-line-2 {
    width: 64%;
    height: 24px;
    margin-bottom: 22px;
}

.pps-desc {
    margin-bottom: 18px;
}

.pps-text {
    height: 14px;
    border-radius: 7px;
    margin-bottom: 10px;
    width: 92%;
}

.pps-text.short {
    width: 68%;
}

.pps-bullets {
    margin-bottom: 16px;
}

.pps-bullet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pps-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex: 0 0 16px;
}

.pps-bullet-text {
    height: 14px;
    width: 72%;
    border-radius: 7px;
}

.pps-shipping {
    width: 90px;
    height: 12px;
    border-radius: 7px;
    margin: 18px 0 16px;
}

.pps-price {
    width: 110px;
    height: 20px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.pps-buy-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.pps-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pps-qty-btn {
    width: 48px;
    height: 46px;
    border-radius: 4px;
}

.pps-qty-num {
    width: 44px;
    height: 28px;
    border-radius: 6px;
}

.pps-cart-btn {
    width: 195px;
    height: 46px;
    border-radius: 4px;
}

.pps-buy-btn {
    width: 100%;
    max-width: 375px;
    height: 52px;
    border-radius: 4px;
}

/* related products */
.pps-related {
    margin-top: 44px;
}

.pps-related-title {
    width: 140px;
    height: 24px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pps-related-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 14px;
}

.pps-related-card {
    min-width: 0;
}

.pps-related-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    margin-bottom: 10px;
}

.pps-related-line {
    width: 92%;
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.pps-related-line.short {
    width: 55%;
}

/* shimmer */
.sk {
    background: linear-gradient(90deg,
            rgba(180, 174, 168, 0.22) 0%,
            rgba(230, 227, 223, 0.65) 50%,
            rgba(180, 174, 168, 0.22) 100%);
    background-size: 220% 100%;
    animation: ppsShimmer 1.15s linear infinite;
}

@keyframes ppsShimmer {
    0% {
        background-position: 220% 0;
    }

    100% {
        background-position: -220% 0;
    }
}

/* optional fade-out */
#ProductPageSkeleton {
    opacity: 1;
    transition: opacity 0.22s ease;
}

#ProductPageSkeleton.is-hiding {
    opacity: 0;
    pointer-events: none;
}

/* mobile */
@media (max-width: 680px) {
    .pps {
        width: 100%;
        display: block;
        padding: 1.8vw 2.2vw 5vw;
        box-sizing: border-box;
    }

    .pps-inner {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .pps-top {
        display: block;
    }

    .pps-left {
        position: relative;
        padding: 0;
        margin-bottom: 4.8vw;
    }

    .pps-main-image {
        width: 58vw;
        max-width: 58vw;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 1.1vw;
        display: block;
    }

    .pps-arrow {
        position: absolute;
        top: 39%;
        width: 0;
        height: 0;
        transform: translateY(-50%);
        opacity: 0.95;
        border-top: 2.6vw solid transparent;
        border-bottom: 2.6vw solid transparent;
    }

    .pps-arrow-left {
        left: calc(50% - 37.5vw);
        border-right: 4vw solid #b8b1aa;
    }

    .pps-arrow-right {
        right: calc(50% - 37.5vw);
        border-left: 4vw solid #b8b1aa;
    }

    .pps-thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 1.8vw;
        padding: 2.6vw 0 0;
        justify-content: center;
    }

    .pps-thumb {
        width: 9vw;
        height: 9vw;
        border-radius: 1vw;
    }

    .pps-right {
        padding-top: 0;
    }

    .pps-title-line {
        border-radius: 1.8vw;
        margin-left: auto;
        margin-right: auto;
    }

    .pps-title-line-1 {
        width: 72%;
        height: 4.6vw;
        margin-bottom: 1.7vw;
    }

    .pps-title-line-2 {
        width: 56%;
        height: 4.6vw;
        margin-bottom: 5vw;
    }

    .pps-desc {
        margin-bottom: 4.2vw;
        padding: 0 0.5vw;
    }

    .pps-text {
        height: 3.1vw;
        width: 100%;
        border-radius: 1.5vw;
        margin-bottom: 2vw;
    }

    .pps-text:nth-child(1) {
        width: 94%;
    }

    .pps-text:nth-child(2) {
        width: 92%;
    }

    .pps-text.short {
        width: 76%;
    }

    .pps-bullets {
        margin-bottom: 3.8vw;
    }

    .pps-bullet-row {
        display: flex;
        align-items: center;
        gap: 2vw;
        margin-bottom: 2vw;
    }

    .pps-icon {
        width: 3.6vw;
        height: 3.6vw;
        border-radius: 0.8vw;
        flex: 0 0 3.6vw;
    }

    .pps-bullet-text {
        width: 78%;
        height: 3.1vw;
        border-radius: 1.4vw;
    }

    .pps-shipping {
        width: 19vw;
        height: 2.4vw;
        border-radius: 1.2vw;
        margin: 4.8vw auto 4vw;
    }

    .pps-price {
        width: 25vw;
        height: 4vw;
        border-radius: 1.2vw;
        margin: 0 0 4.2vw 0;
    }

    .pps-buy-row {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        gap: 3vw;
        width: 87.5vw;
        margin-bottom: 4.4vw;
    }

    .pps-qty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.6vw;
        width: 40vw;
        height: 100%;
    }

    .pps-qty-btn {
        aspect-ratio: 1 / 1;

        border-radius: 1vw;
        flex: 0 0 10vw;
    }

    .pps-qty-num {
        width: 6.5vw;
        height: 5.8vw;
        border-radius: 1.1vw;
        flex: 0 0 6.5vw;
    }

    .pps-cart-btn {
        width: 87.5%;

    }

    .pps-buy-btn {
        aspect-ratio: 7 / 1;
        max-width: 85vw;
        width: 100%;

        border-radius: 1vw;
    }

    .pps-related {
        margin-top: 8vw;
    }

    .pps-related-title {
        width: 31vw;
        height: 4.4vw;
        border-radius: 1.4vw;
        margin-bottom: 3.5vw;
    }

    .pps-related-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4vw;
    }

    .pps-related-card {
        min-width: 0;
        width: 100%;
    }

    .pps-right {
        margin-left: 2.5vw;
    }

    .pps-related-image {
        width: 100%;
        aspect-ratio: 0.92 / 1;
        border-radius: 6vw;
        margin-bottom: 2vw;
    }

    .pps-qty-btn {
        height: 100%;
        width: 100%;
        aspect-ratio: 1/1;
    }

    .pps-related-line {
        width: 90%;
        height: 2.6vw;
        border-radius: 1.3vw;
        margin-bottom: 1.8vw;
    }

    .pps-related-line.short {
        width: 52%;
    }

    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 681px) {
    .pps-inner {
        width: 1300px;
        max-width: 1300px;
        margin-top: 24px;
        margin-left: 25px;
        margin-right: auto;
        padding: 32px 80px;
        box-sizing: border-box;
        background-color: var(--SearchBar_Background_Colour);
        border-radius: 5px;
        box-shadow: 0 0 0 24px var(--SearchBar_Background_Colour);
    }

    .pps-top {
        grid-template-columns: 650px 520px;
        gap: 40px;
        width: 100%;
    }

    .pps-left {
        width: 650px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pps-main-image {
        width: 500px;
        height: 500px;
        border-radius: 5px;
    }

    .pps-arrow {
        top: 235px;
    }

    .pps-arrow-left {
        left: 10px;
    }

    .pps-arrow-right {
        right: 10px;
    }

    .pps-thumbs {
        display: grid;
        grid-template-columns: repeat(5, 80px);
        gap: 10px;
        width: 500px;
        max-width: 500px;
        margin-top: 5px;
        padding: 0;
        justify-content: center;
    }

    .pps-thumb {
        width: 80px;
        height: 80px;
        border-radius: 5px;
    }

    .pps-right {
        width: 520px;
        max-width: 520px;
        padding-top: 0;
    }
}

@media (max-width: 679px) {
    #ProductPageSkeleton .pps-top {
        position: relative !important;
        padding-top: 18vw !important;
        /* more space between title and image */
    }

    #ProductPageSkeleton .pps-right {
        position: static !important;
    }

    #ProductPageSkeleton .pps-right .pps-title-line-1,
    #ProductPageSkeleton .pps-right .pps-title-line-2 {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
        margin: 0 !important;
    }

    #ProductPageSkeleton .pps-right .pps-title-line-1 {
        top: 3vw !important;
        width: 60% !important;
        height: 4.8vw !important;
        border-radius: 999px !important;
    }

    #ProductPageSkeleton .pps-right .pps-title-line-2 {
        top: 10vw !important;
        width: 48% !important;
        height: 4.8vw !important;
        border-radius: 999px !important;
    }

    #ProductPageSkeleton .pps-right .pps-title {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* If your video/second column exists, make it full width too */

@media (min-width: 680px) {
    .Product_Detail_Page .Product_Details {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }

    .Product_Detail_Page .Product_Images {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 620px !important;
        min-width: 620px !important;
        max-width: 620px !important;
        flex: 0 0 620px !important;
    }

    .Product_Detail_Page .Product_Info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 520px !important;
        flex: 1 1 0 !important;
        margin: 0 !important;
    }

    .Product_Detail_Page .ImageControl {
        display: grid !important;
        grid-template-columns: 48px 500px 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 620px !important;
        min-width: 620px !important;
        max-width: 620px !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 auto 8px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    .Product_Detail_Page .ImageControlButtonPrevious,
    .Product_Detail_Page .ImageControlButtonNext {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 48px !important;
        align-self: center !important;
        overflow: visible !important;
    }

    .Product_Detail_Page .ImageControlButtonText {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 42px !important;
        line-height: 1 !important;
        aspect-ratio: auto !important;
        text-align: center !important;
    }

    .Product_Detail_Page .image-slider-wrapper {
        display: grid !important;
        place-items: center !important;
        width: 500px !important;
        min-width: 500px !important;
        height: 500px !important;
        max-width: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
        flex: 0 0 500px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .Product_Detail_Page .mainImage {
        display: block !important;
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
        margin: 0 !important;
        object-fit: contain !important;
        transform-origin: center center !important;
    }

    .Product_Detail_Page .ThumbnailsHolder {
        display: grid !important;
        grid-template-columns: repeat(5, 80px) !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 80px !important;
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 8px auto 0 !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: start !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    .Product_Detail_Page .Thumbnail {
        display: block !important;
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        overflow: hidden !important;
        border-width: 1px !important;
        box-sizing: border-box !important;
        flex: none !important;
        transform: none !important;
    }

    .Product_Detail_Page .Thumbnail.active {
        border-width: 1px !important;
    }
}

/* === Desktop storefront redesign: final override pass ================== */

@media (min-width: 681px) {
    body {
        display: block !important;
        min-height: 100vh;
        overflow-x: hidden;
        background:
            linear-gradient(180deg, var(--body_Background_Colour) 0%, var(--TopBar_Background_Colour) 100%) !important;
    }

    .DesktopShell {
        width: min(1580px, calc(100vw - 80px)) !important;
        margin: 0 auto 72px !important;
        padding-top: 18px !important;
    }

    .TopBar {
        position: sticky !important;
        top: 10px !important;
        z-index: 50 !important;
        display: grid !important;
        grid-template-columns: minmax(240px, auto) minmax(480px, 1fr) auto !important;
        gap: 18px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 78px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px 22px !important;
        border: 1px solid var(--Borders_Colour) !important;
        border-bottom: 0 !important;
        border-radius: 26px 26px 0 0 !important;
        background: var(--TopBar_Background_Colour) !important;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16) !important;
    }

    .DesktopHeaderBrand {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .DesktopHeaderBrand .MainPage {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        gap: 6px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .DesktopBrandWordmark {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: clamp(28px, 1.9vw, 34px);
        font-weight: 760;
        line-height: 1;
        letter-spacing: -0.045em;
        color: var(--Default_Text_Colour);
    }

    .DesktopBrandSubline {
        display: block;
        font-family: 'Afacad', sans-serif;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--Muted_Text_Colour);
        opacity: 0.68;
    }

    .DesktopHeaderSearch {
        display: flex !important;
        align-items: center !important;
        min-width: 0;
    }

    .Search_Bar {
        width: 100% !important;
        min-width: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 22px !important;
        border: 1px solid var(--Input_Border) !important;
        border-radius: 16px !important;
        background: var(--SearchBar_Background_Colour) !important;
        color: var(--Default_Text_Colour) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    }

    .Search_Bar::placeholder {
        color: var(--Muted_Text_Colour) !important;
        opacity: 1 !important;
    }

    .Search_Bar:focus {
        border-color: var(--Primary_Button_Colour) !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18) !important;
        outline: none !important;
    }

    .NavButtonDiv {
        width: auto !important;
        height: auto !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }

    .currency-select,
    .BasketButton,
    .SettingsButton {
        border: 1px solid var(--Borders_Colour) !important;
        border-radius: 14px !important;
        background: var(--SearchBar_Background_Colour) !important;
        color: var(--Default_Text_Colour) !important;
        box-shadow: none !important;
    }

    .currency-select:hover,
    .BasketButton:hover,
    .SettingsButton:hover {
        border-color: var(--Input_Border) !important;
        background: var(--TopBar_Background_Colour) !important;
    }

    .currency-select {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 96px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--Default_Text_Colour) !important;
    }

    .BasketButton,
    .SettingsButton {
        width: 48px !important;
        height: 48px !important;
        max-width: none !important;
    }

    .SideBar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 22px 14px !important;
        background: var(--TopBar_Background_Colour) !important;
        border: 1px solid var(--Borders_Colour) !important;
        border-top: 1px solid var(--Borders_Colour) !important;
        border-radius: 0 0 26px 26px !important;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16) !important;
    }

    .desktop-category-ribbon {
        display: flex !important;
        align-items: center !important;
        align-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 14px !important;
        overflow: visible !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid var(--Borders_Colour) !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .desktop-category-ribbon::-webkit-scrollbar {
        display: none;
    }

    .Category_Button {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        border: 1px solid var(--Sidebar_Button_Border) !important;
        background: var(--Sidebar_Button_BG) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .Category_Button_Heading,
    .Category_Button_Heading h3,
    .category-label {
        font-weight: 600 !important;
        letter-spacing: -0.02em !important;
        font-size: 16px !important;
        color: var(--Category_Button_Text_Colour) !important;
    }

    .Category_Button:hover {
        border-color: var(--Input_Border) !important;
        background: var(--Sidebar_Button_BG_Hover) !important;
    }

    .Category_Button.Active {
        background: linear-gradient(180deg, var(--Primary_Button_Colour) 0%, var(--Primary_Button_Hover) 100%) !important;
        border-color: var(--Primary_Button_Colour) !important;
        box-shadow: 0 10px 22px rgba(0, 123, 255, 0.2) !important;
    }

    .Category_Button.Active .category-label,
    .Category_Button.Active .Category_Button_Heading,
    .Category_Button.Active .Category_Button_Heading h3 {
        color: #ffffff !important;
    }

    #ProductWrapper {
        width: min(1520px, calc(100vw - 48px)) !important;
        margin: 0 auto !important;
        background: transparent !important;
    }

    .SortContainer {
        display: block !important;
        width: min(1520px, calc(100vw - 48px)) !important;
        margin: 0 auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px 6px 20px !important;
        background: transparent !important;
    }

    .CatalogUtilityRow {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .CatalogUtilityCopy {
        max-width: 1240px !important;
    }

    .CatalogUtilityEyebrow {
        display: inline-flex !important;
        margin: 0 0 10px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        color: var(--Muted_Text_Colour) !important;
        opacity: 0.85 !important;
    }

    .CatalogUtilityTitleRow {
        display: flex !important;
        align-items: flex-end !important;
        flex-wrap: wrap !important;
        gap: 14px 20px !important;
    }

    .CatalogUtilityTitle {
        margin: 0 !important;
        font-family: 'Inter', sans-serif !important;
        font-size: clamp(30px, 2.4vw, 40px) !important;
        font-weight: 700 !important;
        line-height: 1.06 !important;
        letter-spacing: -0.05em !important;
        color: var(--Default_Text_Colour) !important;
    }

    .CatalogUtilityMeta {
        margin: 0 0 6px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--Muted_Text_Colour) !important;
    }

    .CatalogUtilityControls {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    .CatalogUtilityControls .SSSort {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        min-width: 224px !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        border: 1px solid var(--Borders_Colour) !important;
        border-radius: 14px !important;
        background: var(--SearchBar_Background_Colour) !important;
        box-shadow: none !important;
    }

    .CatalogUtilityControls .SSSortLabel {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--Muted_Text_Colour) !important;
    }

    .CatalogUtilityControls .SSSortTrigger {
        min-height: 40px !important;
        padding: 0 !important;
        gap: 10px !important;
        box-shadow: none !important;
    }

    .CatalogUtilityControls .SSSortTriggerText {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    #Viewer:has(> .product) {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px 0 72px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 20px 50px !important;
        background: transparent !important;
        justify-items: stretch !important;
        align-items: start !important;
        align-content: start !important;
    }

    .product {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        align-self: start !important;
        overflow: hidden !important;
        justify-self: stretch !important;
        padding: 16px 16px 16px !important;
        border: 1px solid var(--Borders_Colour) !important;
        border-radius: 10px !important;
        background: var(--SideBar_Background_Colour) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
    }

    .product:hover,
    .product:focus-within {
        transform: translateY(-1px) !important;
        border-color: var(--Input_Border) !important;
        background: var(--TopBar_Background_Colour) !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
    }

    .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "name"
            "media"
            "price"
            "actions" !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        align-content: start !important;
    }

    .product-media-frame {
        grid-area: media !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        margin: 2px 0 0 !important;
        border-radius: 5px !important;
        background: var(--SearchBar_Background_Colour) !important;
        box-shadow: none !important;
        align-self: start !important;
        justify-self: stretch !important;
        cursor: pointer !important;
    }

    .Clickable_Image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 5px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .product-name {
        grid-area: name !important;
        margin: 0 !important;
        height: auto !important;
        min-height: calc(1.28em * 2) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.28 !important;
        color: var(--Default_Text_Colour) !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .product-price {
        grid-area: price !important;
        margin: 3px 0 0 !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: -0.02em !important;
        color: var(--Default_Text_Colour) !important;
        opacity: 0.92 !important;
    }

    .quantity-container {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 4px !important;
        padding: 0 !important;
    }

    .quantity-controls {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .quantity-controls .Button {
        width: 34px !important;
        min-width: 34px !important;
        border-radius: 5px !important;
        background: var(--SearchBar_Background_Colour) !important;
        border: 1px solid var(--Borders_Colour) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        color: var(--Default_Text_Colour) !important;
    }

    .quantity-controls .WhiteText {
        font-family: 'Inter', sans-serif !important;
        min-width: 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--Default_Text_Colour) !important;
    }

    .add-to-cart {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 138px !important;
        min-height: 34px !important;
        aspect-ratio: auto !important;
        border-radius: 5px !important;
        padding: 0 18px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        border: 1px solid var(--Primary_Button_Colour) !important;
        background: var(--Primary_Button_Colour) !important;
        box-shadow: none !important;
        color: #ffffff !important;
        margin-left: auto !important;
    }

    .product-card__cart-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .add-to-cart:hover {
        background: var(--Primary_Button_Hover) !important;
        border-color: var(--Primary_Button_Hover) !important;
    }

    .add-to-cart:focus-visible,
    .quantity-controls .Button:focus-visible,
    .currency-select:focus-visible,
    .BasketButton:focus-visible,
    .SettingsButton:focus-visible,
    .Category_Button:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18) !important;
    }

    .dark-mode .TopBar {
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18) !important;
    }

    .dark-mode .Clickable_Image {
        background: var(--SearchBar_Background_Colour) !important;
    }

    .dark-mode .CatalogUtilityEyebrow,
    .dark-mode .CatalogUtilityMeta,
    .dark-mode .DesktopBrandSubline {
        color: var(--Muted_Text_Colour) !important;
    }

    .light-mode .TopBar,
    .light-mode .SideBar {
        box-shadow: 0 18px 34px rgba(55, 44, 22, 0.08) !important;
    }

    .light-mode .DesktopBrandWordmark {
        color: var(--Default_Text_Colour) !important;
    }

    .light-mode .DesktopBrandSubline {
        color: var(--Muted_Text_Colour) !important;
        opacity: 0.8 !important;
    }

    .light-mode .Search_Bar,
    .light-mode .currency-select,
    .light-mode .BasketButton,
    .light-mode .SettingsButton,
    .light-mode .Category_Button,
    .light-mode .CatalogUtilityControls .SSSort,
    .light-mode .product,
    .light-mode .quantity-controls .Button,
    .light-mode .quantity-controls .WhiteText {
        background: var(--Input_Background) !important;
        border-color: var(--Input_Border) !important;
        color: var(--Default_Text_Colour) !important;
        box-shadow: none !important;
    }

    .light-mode .Search_Bar {
        box-shadow: none !important;
    }

    .light-mode .Search_Bar::placeholder {
        color: var(--Muted_Text_Colour) !important;
    }

    .light-mode .desktop-category-ribbon {
        border-top-color: var(--Input_Border) !important;
    }

    .light-mode .Category_Button_Heading,
    .light-mode .Category_Button_Heading h3,
    .light-mode .category-label {
        color: var(--Default_Text_Colour) !important;
    }

    .light-mode .CatalogUtilityEyebrow {
        color: var(--Muted_Text_Colour) !important;
    }

    .light-mode .CatalogUtilityMeta,
    .light-mode .CatalogUtilityControls .SSSortLabel {
        color: var(--Muted_Text_Colour) !important;
    }

    .light-mode .product {
        box-shadow: 0 16px 30px rgba(55, 44, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    .light-mode .add-to-cart {
        border-color: var(--Primary_Button_Colour) !important;
        background: linear-gradient(180deg, var(--Primary_Button_Colour) 0%, var(--Primary_Button_Hover) 100%) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
}

@media (min-width: 1280px) {
    #Viewer:has(> .product) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 681px) and (max-width: 1279px) {
    .TopBar {
        grid-template-columns: minmax(200px, auto) minmax(280px, 1fr) auto !important;
        padding: 18px 24px !important;
    }

    .SideBar {
        padding: 0 24px 22px !important;
    }

    .CatalogUtilityRow {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }

    .CatalogUtilityControls {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    .quantity-container {
        flex-wrap: wrap !important;
    }

    .add-to-cart {
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    .product {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
        overflow: hidden !important;
        padding: 3.056vw !important;
        box-sizing: border-box !important;
    }

    .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "name"
            "media"
            "price"
            "meta"
            "actions" !important;
        gap: 2.222vw !important;
        width: 100% !important;
        height: auto !important;
        align-content: start !important;
    }

    .product-name {
        grid-area: name !important;
        margin: 0 !important;
        min-height: calc(1.24em * 2) !important;
        font-size: 4.85vw !important;
        line-height: 1.24 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .product-media-frame {
        grid-area: media !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 2% !important;
        background: var(--SearchBar_Background_Colour) !important;
    }

    .Clickable_Image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 2% !important;
    }

    .product-price {
        grid-area: price !important;
        margin: 0 !important;
        font-size: 4.2vw !important;
        line-height: 1.1 !important;
    }

    .product-rating-meta {
        grid-area: meta !important;
        margin: -0.278vw 0 1.111vw !important;
        font-size: 3.25vw !important;
        gap: 1.389vw !important;
    }

    .quantity-container {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: minmax(20.556vw, auto) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 2.222vw !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .quantity-controls {
        display: flex !important;
        width: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 1.111vw !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .quantity-controls .Button {
        width: clamp(6.667vw, 7.4vw, 8.611vw) !important;
        min-width: clamp(6.667vw, 7.4vw, 8.611vw) !important;
        height: clamp(6.667vw, 7.4vw, 8.611vw) !important;
        border-radius: 1.111vw !important;
        font-size: clamp(3.889vw, 4vw, 4.722vw) !important;
    }

    .quantity-controls .WhiteText {
        min-width: 3.889vw !important;
        height: clamp(6.667vw, 7.4vw, 8.611vw) !important;
        font-size: clamp(3.611vw, 3.8vw, 4.444vw) !important;
    }

    .add-to-cart {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: clamp(7.778vw, 8vw, 9.444vw) !important;
        height: clamp(7.778vw, 8vw, 9.444vw) !important;
        aspect-ratio: auto !important;
        border-radius: 1.111vw !important;
        padding: 0 2.778vw !important;
        font-size: clamp(3.333vw, 3.2vw, 3.889vw) !important;
        line-height: 1 !important;
    }
}

.product-rating-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: var(--Muted_Text_Colour);
}

.product-rating-primary,
.product-rating-secondary {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.product-rating-primary {
    gap: 6px;
}

.product-rating-secondary {
    gap: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--Muted_Text_Colour);
}

.product-rating-secondary::before {
    content: none;
    display: none;
}

.product-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    letter-spacing: 0.02em;
    font-size: 11px;
}

.product-rating-star {
    color: rgba(255, 196, 87, 0.42);
}

.product-rating-star.is-filled {
    color: #ffc457;
}

.product-rating-star--precise {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    color: inherit;
    vertical-align: middle;
}

.product-rating-star__base,
.product-rating-star__fill {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
    white-space: nowrap;
    font: inherit;
}

.product-rating-star__base {
    color: rgba(255, 196, 87, 0.32);
}

.product-rating-star__fill {
    color: #ffc457;
    width: var(--star-fill, 0%);
    overflow: hidden;
}

.product-rating-value {
    font-weight: 600;
    color: var(--Default_Text_Colour);
    font-size: 14px;
}

.product-rating-separator,
.product-sold-count {
    color: var(--Muted_Text_Colour);
    font-size: 13px;
}

.product-rating-separator,
.product-page-rating-separator {
    display: none !important;
}

.product-sold-count__value,
.product-sold-count__suffix {
    white-space: nowrap;
}

.product-page-sold-count__value,
.product-page-sold-count__suffix {
    white-space: nowrap;
}

.Product_Options_Container {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 0 0 14px !important;
}

.Product_Option_Label {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 6px 0 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.Product_Option_Buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
}

.Product_Option_Button {
    margin: 0 !important;
}

.Product_Price_Meta_Row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 10px;
}

.Product_Price_Meta_Row .Product_Price_Label {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.Product_Price_Meta_Row .Product_Price_Label .productPrice,
#product-page-price {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: normal !important;
}

.product-page-social-proof {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: var(--Muted_Text_Colour);
    white-space: nowrap;
    justify-content: flex-end;
    text-align: right;
}

.product-page-rating-primary,
.product-page-rating-secondary {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.product-page-rating-secondary {
    padding-left: 8px;
    border-left: 1px solid var(--Muted_Text_Colour);
}

.product-page-rating-secondary::before {
    content: none;
    display: none;
}

.product-page-social-proof .product-rating-stars,
.product-page-social-proof .product-rating-value,
.product-page-social-proof .product-rating-separator,
.product-page-social-proof .product-sold-count,
.product-page-rating-stars,
.product-page-rating-value,
.product-page-rating-separator,
.product-page-sold-count {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.product-page-social-proof .product-rating-stars,
.product-page-rating-stars {
    font-size: 17px;
}

.product-page-social-proof .product-rating-star,
.product-page-rating-star {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.product-page-social-proof .product-rating-star--precise,
.product-page-rating-star--precise {
    position: relative !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: middle !important;
}

.product-page-social-proof .product-rating-star--precise .product-rating-star__base,
.product-page-social-proof .product-rating-star--precise .product-rating-star__fill,
.product-page-rating-star--precise .product-rating-star__base,
.product-page-rating-star--precise .product-rating-star__fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font: inherit !important;
}

.product-page-social-proof .product-rating-star--precise .product-rating-star__fill,
.product-page-rating-star--precise .product-rating-star__fill {
    width: var(--star-fill, 0%) !important;
    overflow: hidden !important;
}

.product-page-social-proof .product-rating-value,
.product-page-rating-value {
    font-size: 17px;
    font-weight: 700;
}

.product-page-social-proof .product-sold-count,
.product-page-sold-count {
    gap: 1px;
    font-weight: 500;
    font-size: 15px;
}

.product-page-social-proof .product-sold-count__suffix,
.product-page-sold-count__suffix {
    display: inline !important;
}

@media (max-width: 680px) {
    .Product_Options_Container {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 2.222vw !important;
        padding-inline: 4.444vw !important;
        box-sizing: border-box !important;
        margin: 0 0 3.333vw !important;
    }

    .Product_Option_Label {
        margin: 1.111vw 0 0 !important;
        font-size: 3.889vw !important;
        padding-top: 7.5%;
    }

    .Product_Option_Buttons {
        gap: 1.667vw !important;
    }

    .Product_Option_Button {
        margin: 0 !important;
    }

    .Product_Price_Meta_Row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 1.667vw !important;
        margin-top: 2.222vw !important;
    }

    .Product_Price_Meta_Row .Product_Price_Label {
        min-width: 0 !important;
        font-size: 4vw !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .Product_Price_Meta_Row .Product_Price_Label strong {
        display: none !important;
    }

    .product-rating-meta {
        margin: 1.111vw 0 2.222vw;
        font-size: 3.889vw;
    }

    .product-page-social-proof {
        gap: 0.833vw;
        margin: 0 0 0 auto;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 2.778vw;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .product-page-social-proof .product-rating-stars {
        font-size: 2.778vw;
    }

    .product-page-social-proof .product-rating-value {
        font-size: 3.056vw;
    }

    .product-page-social-proof .product-rating-separator,
    .product-page-social-proof .product-sold-count {
        font-size: 2.778vw;
    }
}

@media (min-width: 681px) {
    .product-card {
        grid-template-areas:
            "media"
            "name"
            "price"
            "meta"
            "actions" !important;
    }

    .product-rating-meta {
        grid-area: meta !important;
        margin: -4px 0 2px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 680px) {
    #ProductWrapper:has(#Product_Viewer) {
        padding-top: 4.444vw !important;
    }

    #ProductWrapper:has(#ProductPageSkeleton) {
        padding-top: 4.444vw !important;
    }

    #ProductWrapper:has(#Basket_Viewer) {
        padding: 0 !important;
    }

    .Product_Viewer {
        margin-top: 0 !important;
    }

    .Product_Detail_Page .Product_Details {
        margin-top: 0 !important;
        gap: 3.333vw !important;
    }

    .mobileHeaderWrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: var(--TopBar_Background_Colour) !important;
        border-bottom: 0.278vw solid var(--Borders_Colour) !important;
        box-shadow: 0 1.111vw 3.333vw rgba(0, 0, 0, 0.12) !important;
    }

    .mobileTopBar {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto !important;
        align-items: center !important;
        gap: 2.5vw !important;
        width: 100% !important;
        padding: 3.333vw 4vw 2.222vw !important;
        box-sizing: border-box !important;
        background: transparent !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .mobileLogo {
        min-width: 0 !important;
    }

    .mobileLogo h1 {
        margin: 0 !important;
        font-size: 8.5vw !important;
        line-height: 0.95 !important;
        color: var(--Default_Text_Colour) !important;
    }

    .mobileHamburgerMenu,
    .mobileBasketButton,
    .mobileSettingsButton {
        width: 10vw !important;
        height: 10vw !important;
        min-width: 10vw !important;
        min-height: 10vw !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: var(--Default_Text_Colour) !important;
        background: transparent !important;
        border: 0 !important;
    }

    .mobileHamburgerMenu {
        font-size: 9vw !important;
        line-height: 1 !important;
    }

    .mobileBasketButton .Icon,
    .mobileSettingsButton .Icon {
        width: 7.222vw !important;
        height: 7.222vw !important;
    }

    .mobileSearchRow {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 4vw 2.222vw !important;
        box-sizing: border-box !important;
    }

    .mobileSearch_Bar,
    #Mobile_Search_Bar {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 10.556vw !important;
        height: 10.556vw !important;
        margin: 0 !important;
        padding: 0 3.611vw !important;
        box-sizing: border-box !important;
        border: 0.278vw solid var(--Borders_Colour) !important;
        border-radius: 2.222vw !important;
        background: var(--SearchBar_Background_Colour) !important;
        color: var(--Default_Text_Colour) !important;
        box-shadow: none !important;
        font-size: 4.444vw !important;
        line-height: 1 !important;
    }

    #ProductWrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16.667vw 1.111vw 5vw !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    #ProductWrapper:has(#Viewer:has(> .product)) {
        padding-top: 35.556vw !important;
    }

    #ProductWrapper:has(#Basket_Viewer) {
        padding: 0 !important;
    }

    .SortContainer {
        display: block !important;
        position: static !important;
        grid-row: auto !important;
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 4vw 3.333vw !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border-top: 0 !important;
        z-index: auto !important;
    }

    .CatalogUtilityRow {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .CatalogUtilityCopy {
        display: none !important;
    }

    .CatalogUtilityEyebrow {
        margin: 0 0 1.111vw !important;
        font-size: 2.778vw !important;
    }

    .CatalogUtilityTitle {
        margin: 0 !important;
        font-size: 7vw !important;
        line-height: 1.05 !important;
    }

    .CatalogUtilityMeta {
        margin: 1.111vw 0 0 !important;
        font-size: 3.889vw !important;
    }

    .CatalogUtilityControls {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
    }

    .CatalogUtilityControls .SSSort {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2.222vw !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .CatalogUtilityControls .SSSortLabel {
        font-size: 4.444vw !important;
        font-weight: 700 !important;
        color: var(--Default_Text_Colour) !important;
        line-height: 1 !important;
    }

    .CatalogUtilityControls .SSSortTrigger {
        width: auto !important;
        min-width: 31.111vw !important;
        min-height: 10vw !important;
        justify-content: space-between !important;
        gap: 2.222vw !important;
        padding: 0 3.611vw !important;
        border: 0.278vw solid var(--Borders_Colour) !important;
        border-radius: 2.222vw !important;
        background: var(--SearchBar_Background_Colour) !important;
        box-shadow: none !important;
    }

    .CatalogUtilityControls .SSSortTriggerText {
        font-size: 4.444vw !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    .CatalogUtilityControls .SSSortChevron {
        width: 2.778vw !important;
        height: 2.778vw !important;
    }

    #Viewer:has(> .product) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2.222vw !important;
        padding: 3.333vw 0 6.667vw !important;
    }

    .product {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 2.778vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "media"
            "name"
            "price"
            "meta"
            "actions" !important;
        gap: 2.222vw !important;
        width: 100% !important;
        height: auto !important;
        align-content: start !important;
    }

    .product-name {
        grid-area: name !important;
        margin: 0 !important;
        font-size: 4.85vw !important;
        line-height: 1.24 !important;
        min-height: calc(1.24em * 2) !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .product-media-frame {
        grid-area: media !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .Clickable_Image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
    }

    .product-price {
        grid-area: price !important;
        margin: 0 !important;
    }

    .product-rating-meta {
        grid-area: meta !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 1.111vw !important;
        margin: 0 !important;
        padding-inline: 1.389vw !important;
        box-sizing: border-box !important;
        font-size: 3.611vw !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .product-rating-primary,
    .product-rating-secondary {
        width: 100% !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .product-rating-primary {
        justify-content: flex-start !important;
        gap: 1.111vw !important;
    }

    .product-rating-secondary {
        justify-content: flex-end !important;
        gap: 0.833vw !important;
        padding-left: 0 !important;
        padding-right: 1.111vw !important;
        border-left: 0 !important;
    }

    .product-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .product-rating-stars,
    .product-rating-value,
    .product-rating-separator,
    .product-sold-count {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .product-rating-stars {
        font-size: 2.708vw !important;
    }

    .product-rating-value {
        font-size: 3.611vw !important;
    }

    .product-rating-separator {
        display: none !important;
    }

    .product-sold-count {
        font-size: 3.333vw !important;
    }

    .product-sold-count__suffix {
        display: inline !important;
    }

    .quantity-container {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
        gap: 2.222vw !important;
        width: 100% !important;
        margin: 0.556vw 0 0 !important;
        padding: 0 !important;
    }

    .quantity-controls {
        display: grid !important;
        grid-template-columns: 7.778vw 1fr 7.778vw !important;
        align-items: center !important;
        justify-items: center !important;
        width: 100% !important;
        gap: 1.667vw !important;
        padding: 0 !important;
    }

    .quantity-controls .Button {
        width: 7.778vw !important;
        min-width: 7.778vw !important;
        height: 7.778vw !important;
        font-size: 4.444vw !important;
    }

    .quantity-controls .WhiteText {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 7.778vw !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    .add-to-cart {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 7.778vw !important;
        height: 7.778vw !important;
        padding: 0 2.222vw !important;
        font-size: 2.5vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .product-card__cart-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 1.111vw !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .add-to-cart .cart-icon {
        width: 3.333vw !important;
        height: 3.333vw !important;
        flex: 0 0 auto !important;
        display: block !important;
    }
}

@media (min-width: 681px) {
    .product-page-social-proof {
        grid-area: auto !important;
        margin: 0 0 0 auto !important;
        font-size: 15px !important;
        gap: 7px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

@media (max-width: 680px) {
    .product-page-social-proof {
        grid-area: auto !important;
        display: grid !important;
        grid-template-columns: auto !important;
        grid-template-areas:
            "sold"
            "primary" !important;
        align-items: center !important;
        justify-content: end !important;
        justify-items: end !important;
        row-gap: 0.556vw !important;
        margin: 0 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 3.333vw !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    .product-page-social-proof .product-rating-primary,
    .product-page-social-proof .product-rating-secondary,
    .product-page-rating-primary,
    .product-page-rating-secondary {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .product-page-social-proof .product-rating-primary,
    .product-page-rating-primary {
        grid-area: primary !important;
        gap: 1.111vw !important;
        justify-self: end !important;
    }

    .product-page-social-proof .product-rating-secondary,
    .product-page-rating-secondary {
        grid-area: sold !important;
        gap: 0.833vw !important;
        justify-self: end !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    .product-page-social-proof .product-rating-secondary::before,
    .product-page-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .product-page-social-proof .product-rating-stars,
    .product-page-rating-stars {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: 0 !important;
        letter-spacing: -0.02em !important;
        font-size: clamp(3.056vw, 3.2vw, 3.611vw) !important;
    }

    .product-page-social-proof .product-rating-value,
    .product-page-rating-value {
        flex: 0 0 auto !important;
        font-size: 3.611vw !important;
    }

    .product-page-social-proof .product-sold-count,
    .product-page-sold-count {
        flex: 0 0 auto !important;
        font-size: 3.333vw !important;
    }

    .product-page-social-proof .product-rating-separator,
    .product-page-rating-separator {
        display: none !important;
    }

    .product-page-social-proof .product-sold-count__suffix,
    .product-page-sold-count__suffix {
        display: inline !important;
    }

    .Product_Detail_Page .Product_Price_Meta_Row {
        width: 100% !important;
        padding-inline: 3.333vw !important;
        box-sizing: border-box !important;
        margin-top: 2.778vw !important;
        align-items: start !important;
    }
}

@media (max-width: 680px) {
    .Product_Detail_Page .Product_Price_Meta_Row {
        width: 100% !important;
        padding-inline: 4.444vw !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .Product_Detail_Page .ProductPageQuantityContainer {
        width: 100% !important;
        padding-inline: 4.444vw !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 3.333vw !important;
    }

    .Product_Detail_Page .Quantity_Controls_ProductPage {
        width: auto !important;
        min-width: 27.778vw !important;
        gap: 2.222vw !important;
    }

    .Product_Detail_Page .ProductPageBuyButton {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    .Product_Detail_Page .product-page-social-proof {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        row-gap: 0 !important;
        column-gap: 1.111vw !important;
        gap: 1.111vw !important;
        margin: 0 0 0 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .Product_Detail_Page .product-page-rating-primary,
    .Product_Detail_Page .product-page-rating-secondary {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        justify-self: auto !important;
    }

    .Product_Detail_Page .product-page-rating-primary {
        gap: 0.833vw !important;
    }

    .Product_Detail_Page .product-page-rating-secondary {
        gap: 0.556vw !important;
        padding-left: 1.944vw !important;
        border-left: 0.278vw solid var(--Muted_Text_Colour) !important;
    }

    .Product_Detail_Page .product-page-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .Product_Detail_Page .product-page-rating-stars {
        font-size: clamp(3.82vw, 4vw, 4.514vw) !important;
        gap: 0 !important;
        letter-spacing: -0.02em !important;
    }

    .Product_Detail_Page .product-page-rating-value {
        font-size: 4.514vw !important;
        font-weight: 700 !important;
    }

    .Product_Detail_Page .product-page-sold-count {
        font-size: 4.166vw !important;
        font-weight: 500 !important;
    }

    .Product_Detail_Page .product-page-rating-separator {
        display: none !important;
    }

    .Product_Detail_Page .product-page-sold-count__suffix {
        display: inline !important;
    }
}

@media (max-width: 680px) {
    .product-rating-secondary {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    .product-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .product-rating-separator {
        display: inline-block !important;
        width: 0.278vw !important;
        min-width: 0.278vw !important;
        height: 3.611vw !important;
        margin: 0 0.833vw 0 0 !important;
        background: var(--Muted_Text_Colour) !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        vertical-align: middle !important;
        flex: 0 0 auto !important;
    }

    .Product_Detail_Page .product-page-rating-secondary {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    .Product_Detail_Page .product-page-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .Product_Detail_Page .product-page-rating-separator {
        display: inline-block !important;
        width: 0.278vw !important;
        min-width: 0.278vw !important;
        height: 4.166vw !important;
        margin: 0 0.556vw 0 0 !important;
        background: var(--Muted_Text_Colour) !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        vertical-align: middle !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 680px) {
    .product-card-rating-meta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 1.667vw !important;
        padding-inline: 1.389vw !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .product-card-rating-primary,
    .product-card-rating-secondary {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

    .product-card-rating-primary {
        justify-content: flex-start !important;
        gap: 1.111vw !important;
        width: 100% !important;
        flex: none !important;
        padding-right: 0 !important;
    }

    .product-card-rating-value {
        font-size: 3vw !important;
        font-variant-numeric: tabular-nums !important;
        font-feature-settings: "tnum" 1, "lnum" 1 !important;
    }

    .product-card-rating-secondary {
        justify-content: flex-end !important;
        gap: 0.833vw !important;
        width: 100% !important;
        flex: none !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .product-card-rating-secondary::before {
        content: none !important;
        display: none !important;
    }

    .product-card-rating-separator {
        display: inline-block !important;
        width: 0.278vw !important;
        min-width: 0.278vw !important;
        height: 3.611vw !important;
        margin: 0 0 0 0.25vw !important;
        background: var(--Muted_Text_Colour) !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        vertical-align: middle !important;
        flex: 0 0 auto !important;
    }

    .product-card-sold-count {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        font-size: 3vw !important;
    }
}

.settings-panel .ts-wrapper.single .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

.settings-panel .ts-wrapper.single .ts-control .item {
    flex: 0 1 auto !important;
    max-width: calc(100% - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.settings-panel .ts-wrapper.single .ts-control input {
    flex: 1 1 120px !important;
    min-width: 120px !important;
    width: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
}

.settings-panel .ts-dropdown {
    z-index: 1400 !important;
}

/* Customer auth + product reviews */
.ss-auth-page,
.ss-product-reviews-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.ss-auth-page {
    padding: 24px 0 40px;
}

.ss-auth-card,
.ss-product-reviews-shell {
    background: var(--SearchBar_Background_Colour);
    border: 1px solid var(--Borders_Colour);
    border-radius: 22px;
    box-shadow: var(--DefaultBoxShadow);
}

.ss-auth-card {
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(320px, 1fr);
    gap: 24px;
}

.ss-auth-kicker,
.ss-review-block-title,
.ss-product-reviews-title {
    color: var(--Default_Text_Colour);
    font-weight: 700;
}

.ss-auth-kicker {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--Muted_Text_Colour);
}

.ss-auth-copy h2,
.ss-product-reviews-title {
    margin: 10px 0 8px;
    font-size: 30px;
    line-height: 1.1;
}

.ss-auth-copy p,
.ss-review-muted,
.ss-review-card-meta,
.ss-review-purchase-meta,
.ss-review-purchase-state,
.ss-review-upload-meta {
    color: var(--Muted_Text_Colour);
}

.ss-auth-form,
.ss-review-form {
    display: grid;
    gap: 14px;
}

.ss-auth-field,
.ss-review-field {
    display: grid;
    gap: 7px;
}

.ss-auth-field span,
.ss-review-field span {
    color: var(--Default_Text_Colour);
    font-size: 14px;
    font-weight: 600;
}

.ss-auth-field input,
.ss-review-field input,
.ss-review-field select,
.ss-review-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid var(--Borders_Colour);
    background: var(--Input_Background);
    color: var(--Default_Text_Colour);
    box-sizing: border-box;
    font: inherit;
}

.ss-review-field textarea {
    min-height: 132px;
    resize: vertical;
}

.ss-auth-actions,
.ss-review-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-review-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--Borders_Colour);
    background: var(--SearchBar_Background_Colour);
    color: var(--Default_Text_Colour);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ss-review-btn-primary {
    border-color: transparent;
    background: var(--Primary_Button_Colour);
    color: #fff;
}

.ss-auth-status,
.ss-review-status {
    min-height: 22px;
    font-size: 14px;
    color: var(--Muted_Text_Colour);
}

.ss-auth-status[data-tone="error"],
.ss-review-status[data-tone="error"],
.ss-review-upload-meta[data-tone="error"] {
    color: var(--Danger_Colour);
}

.ss-auth-status[data-tone="success"],
.ss-review-status[data-tone="success"] {
    color: #22c55e;
}

.ss-product-reviews-shell {
    margin-top: 22px;
    padding: 22px;
}

.ss-product-reviews-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.ss-review-summary {
    min-width: 180px;
    text-align: right;
}

.ss-review-summary-score {
    color: var(--Default_Text_Colour);
    font-size: 28px;
    font-weight: 800;
}

.ss-review-summary-stars,
.ss-review-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #fbbf24;
}

.ss-review-star {
    position: relative;
    display: inline-block;
    width: 1em;
    line-height: 1;
}

.ss-review-star__base,
.ss-review-star__fill {
    position: absolute;
    inset: 0;
}

.ss-review-star__base {
    color: rgba(255,255,255,.2);
}

.ss-review-star__fill {
    width: var(--star-fill, 0%);
    overflow: hidden;
    color: #fbbf24;
}

.ss-review-summary-count {
    margin-top: 6px;
    color: var(--Muted_Text_Colour);
    font-size: 14px;
}

.ss-review-empty,
.ss-review-authprompt,
.ss-review-purchase {
    border: 1px solid var(--Borders_Colour);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
    padding: 15px 16px;
}

.ss-review-purchases,
.ss-product-reviews-list {
    display: grid;
    gap: 14px;
}

.ss-review-purchase.is-ready {
    border-color: color-mix(in srgb, var(--Primary_Button_Colour) 45%, var(--Borders_Colour));
}

.ss-review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ss-review-card {
    border: 1px solid var(--Borders_Colour);
    border-radius: 20px;
    padding: 16px;
    background: rgba(255,255,255,.015);
}

.ss-review-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.ss-review-card-author {
    display: flex;
    gap: 12px;
}

.ss-review-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--Input_Background);
    color: var(--Default_Text_Colour);
    font-weight: 800;
}

.ss-review-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-review-card-name {
    color: var(--Default_Text_Colour);
    font-weight: 700;
}

.ss-review-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
}

.ss-review-card-rating {
    text-align: right;
}

.ss-review-card-score {
    color: var(--Default_Text_Colour);
    font-weight: 700;
}

.ss-review-card-text {
    margin-top: 14px;
    color: var(--Default_Text_Colour);
    line-height: 1.55;
}

.ss-review-card-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.ss-review-card-image {
    width: 92px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--Borders_Colour);
}

.ss-review-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 680px) {
    .ss-auth-page {
        padding: 6.667vw 0 8.889vw;
    }

    .ss-auth-card {
        grid-template-columns: 1fr;
        gap: 5.556vw;
        padding: 5.556vw;
        border-radius: 5.556vw;
    }

    .ss-auth-copy h2,
    .ss-product-reviews-title {
        font-size: 8.333vw;
    }

    .ss-auth-field input,
    .ss-review-field input,
    .ss-review-field select,
    .ss-review-field textarea {
        min-height: 12.778vw;
        padding: 3.056vw 3.611vw;
        border-radius: 3.889vw;
    }

    .ss-review-btn {
        min-height: 11.667vw;
        padding: 0 4.444vw;
    }

    .ss-product-reviews-shell {
        margin-top: 5.556vw;
        padding: 5vw 4.444vw;
        border-radius: 5vw;
    }

    .ss-product-reviews-head {
        flex-direction: column;
        gap: 4.444vw;
        margin-bottom: 4.444vw;
    }

    .ss-review-summary {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .ss-review-summary-score {
        font-size: 7.222vw;
    }

    .ss-review-form-grid {
        grid-template-columns: 1fr;
        gap: 3.889vw;
    }

    .ss-review-empty,
    .ss-review-authprompt,
    .ss-review-purchase,
    .ss-review-card {
        border-radius: 4.444vw;
        padding: 4.167vw;
    }

    .ss-review-card-head {
        flex-direction: column;
        gap: 3.333vw;
    }

    .ss-review-card-rating {
        text-align: left;
    }

    .ss-review-card-images {
        gap: 2.778vw;
    }

    .ss-review-card-image {
        width: 22.222vw;
        border-radius: 3.333vw;
    }
}