* {
    box-sizing: border-box;
}

:root {

    --primary:#6cc3d1;

    --primary-100: #e6f1f3;
    --primary-200: #cce4e8;
    --primary-500: #99c8d0;
    --primary-800: #014753;
    --primary-900: #00181c;

    --danger:#e74c3c;
    --success:#2ecc71;
    --admin-color:#9b59b6;

    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    --sm-breakpoint: 768px;

}

body {
    margin:0;
}

button {
    font: inherit;

}


.group {
    display: flex;
    gap: 1rem;
}

.r {
    text-align: right;
}
.c {
    text-align: center;
}

.btn,[class*="btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    background-color: var(--primary);
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.1s ease;

    &.btn-text {
        background-color: transparent;
        color:#333;
        padding: 0;
    }

    &.btn-primary {
        background-color: var(--primary);
    }
    &.btn-secondary {
        background-color: var(--primary-500);
    }
    &.btn-danger {
        background-color: var(--danger);
    }
    &.btn-success {
        background-color: var(--success);
    }
    &.btn-admin {
        background-color: var(--admin-color);
    }

    &:hover {
        background-color: var(--primary-800);

        &.btn-text {
            background-color: transparent;
            color: var(--primary-800);
        }
    }
}



@media (width < 768px) {
    .hide-sm {
        display: none;
    }
}
@media (width >= 768px) {
    .hide-lg {
        display: none;
    }
}


.compact-search-form {
    align-self: center;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border: solid 1px #666;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    background-color:#fff;

    input {
        width:200px;
        font-size:1.4rem;
        border:none;
        min-width: 0;   /* allow the field to shrink on narrow screens */
    }
}



/*****
    * FOREMOST COMPOSITION SCRIBE BASE STYLES
    *****/
main>* {
    width: 100%;
    margin: auto;
}

picture,
picture * {
    max-width: 100%;
}

grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

grid>* {
    flex: 1 0 200px;
}

box,
.fcs-box {
    display: block;
    gap: 1rem;
    position: relative;
}

[style*="--aspect-ratio"]> :first-child {
    width: 100%;
}

[style*="--aspect-ratio"]>img {
    height: auto;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

    [style*="--aspect-ratio"]::before {
        position: relative !important;
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    [style*="--aspect-ratio"]> :first-child {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

box>*,
.fcs-box>* {
    z-index: 1;
    /* This is a default so background-picture can be underneath it */
    position: relative;
    /* Also required to put background-picture behind */
}

markdown {
    display: block;
    padding: 1rem;
    /* A reasonable default? */
}

markdown[style*=font-size]>h1,
markdown[style*=font-size]>h2,
markdown[style*=font-size]>h3,
markdown[style*=font-size]>h4 {
    font-size: inherit;
}

markdown[style*=font-weight]>h1,
markdown[style*=font-weight]>h2,
markdown[style*=font-weight]>h3,
markdown[style*=font-weight]>h4 {
    font-weight: inherit;
}

markdown>p {
    margin-top: 0;
    margin-bottom: 0;
}

picture {
    min-height: 1rem;
}

picture img {
    font-size: 1rem;
    width: inherit;
    vertical-align: bottom;
}

picture.background-picture {
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

picture.background-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

picture.background-picture~* {
    z-index: 1;
    position: relative;
}


.fcs-slideshow {
    display: flex;
    overflow-x: auto;
    width: 100%;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    scroll-behavior: smooth;
}

@media (min-width: 1000px) {
    .fcs-slideshow.vertical {
        flex-direction: column;
        overflow-x: unset;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
    }
}

.fcs-slideshow::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.fcs-slideshow+nav {
    overflow: hidden;
    padding: 1rem 1rem 0 1rem;
    text-align: center;
}

.fcs-slideshow+nav a {
    display: inline-block;
    margin: 8px;
    width: 1rem;
    height: 1rem;
    background-color: #666;
    border-radius: 50%;
    color: transparent;
}

.fcs-slideshow+nav a.current {
    background-color: var(--primary, dodgerblue);
}

.fcs-slideshow>* {
    overflow: hidden;
    scroll-snap-align: start;
}

.fcs-slideshow>.product-card {
    width: 200px;
    flex: 0 0 200px;
    overflow: initial;
}

.fcs-slideshow a {
    text-decoration: none;
}




/* ---------------------------------------------------------------- *
 * Header user menu (logo + search + account/cart icons)
 * (markup in partials/navigation.blade.php)
 * ---------------------------------------------------------------- */
.user-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;

    /* Pushes the search + icons to the right of the logo */
    .spacer { flex: 1; }

    .logo img {
        width: 300px;
        max-width: 100%;
    }

    /* Top-level icon links/buttons (hamburger, home, account, cart) */
    > a svg,
    > button svg {
        width: 2rem;
        height: 2rem;
    }

    /* Tablet: tighten spacing and trim the oversized logo */
    @media (max-width: 1024px) {
        gap: 1.25rem;
        padding: 1.25rem 1rem;

        .logo img { width: 220px; }
    }

    /* Phone: stack the logo row above a full-width search, drop the spacer */
    @media (max-width: 600px) {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem;

        .logo img { width: 160px; }

        .spacer { display: none; }

        /* Search takes the full second row */
        .compact-search-form {
            order: 10;
            flex: 1 1 100%;

            input {
                width: 100%;
                font-size: 1.1rem;
            }
        }

        > a svg,
        > button svg {
            width: 1.6rem;
            height: 1.6rem;
        }
    }
}


#app {
    min-height:100dvh;
    position:relative;
    overflow-x:clip;

    &>.sidebar {
        display:block;
        transition:all 0.3s ease;
        inset: unset;
        top: 0;
        bottom: 0;
        height: 100%;
        width: min(400px, 80vw);
        max-height: unset;
        border: none;
        padding: 0;
        margin: 0;
        z-index:20000;

        &.sidebar-left {
            left: 0;
            transform: translateX(-100%);
        }
        &.sidebar-right {
            right: 0;
            transform: translateX(100%);
        }

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(0px);
            transition: all 10.3s ease;
        }

        &>.inner {
            height: 100%;
            background-color: var(--primary-100);
            padding: 1rem;
        }
    }

    &>.sidebar:open {
        transform: translateX(0);

        &::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }


    }

    .page-footer {
        margin-top: 3rem;
        background-color: var(--primary-900);
        color: var(--primary-200);
        font-size: 0.9rem;

        a {
            color: var(--primary-200);
            text-decoration: none;

            &:hover {
                color: #fff;
                text-decoration: underline;
            }
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr auto;
            gap: 2rem 3rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 1.5rem 2rem;

            @media (max-width: 768px) {
                grid-template-columns: 1fr 1fr;

                .footer-brand {
                    grid-column: 1 / -1;
                    align-items: center;
                    text-align: center;
                }
            }
        }

        .footer-heading {
            margin: 0 0 0.75rem;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--primary);
        }

        .footer-col ul {
            margin: 0;
            padding: 0;
            list-style: none;

            li { padding: 0.2rem 0; }
        }

        /* The shop list is long — flow it into two columns where it fits */
        .footer-shop ul {
            columns: 2;
            column-gap: 2rem;

            @media (max-width: 480px) { columns: 1; }
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1.25rem;

            .footer-logo {
                width: 200px;
                max-width: 100%;
            }

            .footer-social {
                display: flex;
                gap: 0.75rem;

                a {
                    color: var(--primary-200);

                    &:hover { color: #fff; }
                }

                svg {
                    width: 28px;
                    height: 28px;
                }
            }

            .footer-payments {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.5rem;

                .accept-label {
                    flex: 1 1 100%;
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: var(--primary-500);
                }

                img {
                    height: 24px;
                    width: auto;
                    border-radius: 3px;
                }
            }
        }

        .footer-bottom {
            border-top: 1px solid color-mix(in srgb, var(--primary-200) 15%, transparent);
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem 2rem;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
            font-size: 0.8rem;
            color: var(--primary-500);

            p { margin: 0; }

            @media (max-width: 768px) {
                justify-content: center;
                text-align: center;
            }
        }
    }

}


/* ---------------------------------------------------------------- *
 * Form fields
 * A <fieldset> is the wrapper for a single field: a <label> stacked
 * above an input / select / textarea. Checkbox & radio fields lay the
 * control out inline before the label.
 * ---------------------------------------------------------------- */
fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;               /* let controls shrink inside flex/grid parents */
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;

    > label {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--primary-800);
    }

    /* Helper / hint text under the control */
    > small {
        font-size: 0.75rem;
        color: color-mix(in srgb, var(--primary-900) 55%, transparent);
    }

    /* Text-like controls (exclude toggles/file/range, styled separately) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    select,
    textarea {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font: inherit;
        color: var(--primary-900);
        background-color: #fff;
        border: 1px solid var(--primary-500);
        border-radius: 6px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &::placeholder {
            color: color-mix(in srgb, var(--primary-900) 40%, transparent);
        }

        &:hover {
            border-color: var(--primary-800);
        }

        &:focus-visible {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);
        }

        &:disabled {
            background-color: var(--primary-100);
            color: color-mix(in srgb, var(--primary-900) 50%, transparent);
            cursor: not-allowed;
        }

        /* Native validation, only after the user has interacted */
        &:user-invalid {
            border-color: var(--danger);

            &:focus-visible {
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent);
            }
        }
    }

    textarea {
        min-height: 6rem;
        resize: vertical;
    }

    /* Custom dropdown arrow for selects */
    select {
        appearance: none;
        padding-right: 2rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23014753' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 0.7rem;
    }

    /* Checkbox & radio: control sits inline, to the left of its label */
    &:has(> input[type="checkbox"]),
    &:has(> input[type="radio"]) {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;

        > input {
            order: -1;          /* control before the label regardless of DOM order */
            inline-size: 1.15rem;
            block-size: 1.15rem;
            flex: none;
            accent-color: var(--primary);
            cursor: pointer;
        }

        > label {
            font-size: 1rem;
            font-weight: 400;
            color: var(--primary-900);
            cursor: pointer;
        }
    }
}


/* ---------------------------------------------------------------- *
 * Headings
 * Typographic scale, usable on any element (h1–h6, p, div, …).
 * ---------------------------------------------------------------- */
.header-1,
.header-2,
.header-3 {
    margin: 0 0 0.5em;
    color: var(--primary-900);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.header-1 {
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    letter-spacing: -0.02em;
}

.header-2 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
    letter-spacing: -0.01em;
}

.header-3 {
    font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
    font-weight: 600;
    color: var(--primary-800);
}


/* ---------------------------------------------------------------- *
 * Alerts
 * Inline feedback messages. Base .alert + colour variants.
 * ---------------------------------------------------------------- */
.alert {
    --alert-color: var(--primary-800);
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--alert-color) 35%, transparent);
    border-left: 4px solid var(--alert-color);
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--alert-color) 12%, white);
    color: color-mix(in srgb, var(--alert-color) 80%, black);
    font-size: 0.95rem;
    line-height: 1.4;

    /* Tidy spacing when the message is wrapped in a <p> or list */
    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }
}

.alert-success {
    --alert-color: var(--success);
}

.alert-danger {
    --alert-color: var(--danger);
}


/* ---------------------------------------------------------------- *
 * Product navbar
 * Sticky category bar with hover/focus mega-menus. The inline
 * --scroll-*-amount vars are set by Alpine for the mobile edge fades.
 * ---------------------------------------------------------------- */
nav.product-navbar {
    --scroll-left-amount: 0;
    --scroll-right-amount: 1;

    position: relative;
    z-index: 1001;
    /* width: 100%; */
    width:fit-content;
    margin:0 auto 2rem;
    /* margin-block-end: 2rem; */
    /* box-shadow: 0 3px 3px rgb(0 0 0 / 0.1); */

    .category-container {
        background-color:#fff;
        padding: 0.75rem 2rem;
        margin-inline: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    ul.top {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Top-level items */
    ul.top > li {
        > a {
            display: inline-block;
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            line-height: 1.5;
            white-space: nowrap;
            font-size: 1.1rem;
            font-weight: 200;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--primary-900);
            transition: background-color 0.15s ease, color 0.15s ease;
        }

        &:hover > a,
        &:focus-within > a {
            background-color: var(--primary-100);
            color: var(--primary-800);
        }
    }

    /* Mega-menu: dropped just below the bar (robust to bar padding) */
    .megamenu {
        position: absolute;
        inset: 100% 0 auto 0;
        z-index: 10000;
        display: flex;
        gap: 2rem;
        min-height: 280px;
        padding: 1.5rem 2rem;
        background-color: var(--primary-100);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.25);
        /* Hidden + non-interactive until revealed */
        transform: translateY(-0.5rem);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;

        .subcategories {
            flex: 1 1 auto;
            column-width: 200px;
            column-gap: 2rem;
        }

        .subcategory {
            break-inside: avoid-column;
            margin-bottom: 1rem;

            > a {
                display: inline-block;
                margin-bottom: 0.35rem;
                color: var(--primary-800);
                font-size: 1.2rem;
                font-weight: 500;
                text-transform: uppercase;
                text-decoration: none;

                &:hover { text-decoration: underline; }
            }

            ul {
                margin: 0;
                padding: 0;
                list-style: none;

                li {
                    padding: 0.15rem 0;

                    a {
                        display: inline-flex;
                        line-height: 1.3;
                        font-size: 1rem;
                        font-weight: 200;
                        text-transform: none;
                        text-decoration: none;
                        color: var(--primary-900);
                        transition: color 0.12s ease;

                        &:hover { color: var(--primary); }
                    }
                }
            }
        }
    }

    /* Reveal on hover OR keyboard focus (accessibility) */
    ul.top > li:hover > .megamenu,
    ul.top > li:focus-within > .megamenu {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Mobile: horizontal scroll + edge fades driven by the Alpine scroll vars */
    @media (max-width: 991px) {
        .category-container {
            width: 100%;
            overflow-x: auto;
            padding-inline: 0.75rem;
            scrollbar-width: thin;

            &::-webkit-scrollbar { width: 2px; height: 6px; }
            &::-webkit-scrollbar-track { border-radius: 3px; box-shadow: inset 0 0 2px rgb(0 0 0 / 0.3); }
            &::-webkit-scrollbar-thumb { border-radius: 3px; box-shadow: inset 0 0 2px rgb(0 0 0 / 0.7); }
        }

        ul.top {
            justify-content: flex-start;
            gap: 0.5rem;
        }

        .megamenu { display: none; }

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 3rem;
            pointer-events: none;
        }
        &::before {
            left: 0;
            z-index: 10;
            background: linear-gradient(to right, #ccc, transparent);
            opacity: var(--scroll-left-amount);
        }
        &::after {
            right: 0;
            background: linear-gradient(to left, #ccc, transparent);
            opacity: var(--scroll-right-amount);
        }
    }
}


/* ---------------------------------------------------------------- *
 * Left sidebar — product category tree
 * Drawer (<dialog class="sidebar sidebar-left">) holds a close button,
 * Brands link, search form, "Categories" label, then the tree
 * <ul class="category-list-sidebar"> (see partials/shell/category-tree).
 * Each expandable <li> toggles an .expanded class via Alpine.
 * ---------------------------------------------------------------- */
#app > .sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--primary-100);

    > .close {
        align-self: flex-end;
        padding: 0.25rem;
        background-color: transparent;
        color: var(--primary-900);
    }

    > .nav-link {
        padding: 0.5rem;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--primary-900);

        &:hover { background-color: var(--primary-200); }
    }
}

.category-list-sidebar {
    margin: 0;
    padding: 0;
    list-style: none;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Collapse nested levels until the parent <li> is .expanded */
    li > ul { display: none; }
    li.expanded > ul { display: block; }

    a {
        display: block;
        padding: 0.6rem 0.5rem;
        line-height: 1.2;
        color: var(--primary-900);
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.12s ease, color 0.12s ease;

        &:hover { background-color: var(--primary-200); }
    }

    /* Currently-selected category */
    a.current {
        color: var(--primary-800);
        font-weight: 700;
    }

    /* Expandable items get a caret that rotates when open */
    li:has(> ul) > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;

        &::after {
            content: "";
            flex: none;
            width: 0.45em;
            height: 0.45em;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(-45deg);          /* ▸ collapsed */
            transition: transform 0.2s ease;
        }
    }
    li.expanded:has(> ul) > a::after {
        transform: rotate(45deg);               /* ▾ expanded */
    }

    /* Level hierarchy: progressive indent + de-emphasis */
    .level-one {
        border-top: 1px solid var(--primary-200);

        > a {
            font-weight: 600;
            text-transform: uppercase;
        }
    }
    .level-two > a {
        padding-left: 1.25rem;
        font-size: 0.95rem;
    }
    .level-three > a {
        padding-left: 2rem;
        font-size: 0.9rem;
        color: color-mix(in srgb, var(--primary-900) 75%, transparent);
    }
    .level-four > a {
        padding-left: 2.75rem;
        font-size: 0.85rem;
        color: color-mix(in srgb, var(--primary-900) 65%, transparent);
    }

    /* Level 3: a selectable link beside a dedicated expand/collapse caret.
       The link navigates; the caret toggles its 4th-level children. */
    li.has-toggle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    li.has-toggle > a {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }
    li.has-toggle > a::after { content: none; }   /* caret lives on the button instead */
    li.has-toggle > ul { flex: 1 1 100%; }        /* children wrap onto their own row */

    .category-toggle {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
        background: transparent;
        border: 0;
        border-radius: 4px;
        color: var(--primary-800);
        cursor: pointer;

        &:hover { background-color: var(--primary-200); }

        .chevron {
            width: 1.1rem;
            height: 1.1rem;
            transition: transform 0.2s ease;
        }
    }
    li.has-toggle.expanded > .category-toggle .chevron {
        transform: rotate(180deg);
    }
}


/* ---------------------------------------------------------------- *
 * Product list & cards  (replaces ProductList.vue / ProductCard.vue)
 * ---------------------------------------------------------------- */
.product-list {
    .controls {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 1rem;
        color: var(--primary-800);
    }
    .controls .results-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
    .sort-control {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    .sort-control label {
        font-size: 0.9rem;
        white-space: nowrap;
    }
    .sort-control select {
        padding: 0.4rem 0.6rem;
        border: 1px solid var(--primary-200);
        border-radius: 4px;
        background: #fff;
        font: inherit;
        color: var(--primary-900);
        cursor: pointer;
    }

    .product-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 1fr 1fr 1fr;   /* 4 equal columns by default */
        grid-auto-flow: dense;
        max-width: 1200px;
        margin: 0 auto;

        &>.product-card {
            flex:1 1 20%;
            min-width:20%;
        }
    }

    /* Load-more / end-of-results span the whole grid row */
    .load-more,
    .end-of-results {
        grid-column: 1 / -1;
        padding: 20px;
        text-align: center;
        font-size: 1.4em;
        color: var(--primary-800);
    }
    .load-more {
        cursor: pointer;

        &:hover { color: var(--primary); }
    }
}

/* ---------------------------------------------------------------- *
 * Product grid refresh indicator (filter / sort / category changes)
 * ---------------------------------------------------------------- */
.grid-wrap {
    position: relative;
}
/* Fade + soften the old results while the new ones load */
.product-grid.is-refreshing {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.grid-loading {
    display: none;          /* toggled to flex by the .visible class (wire:loading) */
    position: absolute;
    inset: 0;
    z-index: 5;
    justify-content: center;
    pointer-events: none;
}
.grid-loading.visible {
    display: flex;
}
.grid-loading .badge {
    position: sticky;
    top: 40vh;              /* keep the badge in view even on a tall grid */
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    color: var(--primary-800);
    font-weight: 600;
}
.grid-loading .badge .spinner {
    margin: 0;
    border-top-color: var(--primary-800);   /* darker than the on-dark loadMore spinner */
}

@media (width < 768px) {
    .product-list .product-grid {
        grid-template-columns: 1fr 1fr;   /* 2 columns on small screens */
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px;
    border: solid 1px transparent;
    border-radius: 4px;

    @media (min-width: 768px) {
        &:hover { border-color: rgb(0 0 0 / 0.2); }
    }

    .top {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .product-image {
        position: relative;
        padding-bottom: 100%;        /* square aspect box */
        line-height: 0;

        .inner {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .overlay .bottom-right {
            position: absolute;
            right: 0;
            bottom: 0;
            color: var(--primary);

            .children-count {
                position: absolute;
                top: 8px;
                right: 19px;
                transform: translateX(50%);
                color: #fff;
                line-height: normal;
            }
        }
    }

    .product-range {
        width: 100%;
        margin: 10px 0 6px;
        padding: 0 0 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 15px;
        line-height: 1;
        color: var(--primary-800);
        border-bottom: 1px dotted #ccc;
    }

    .product-name {
        margin: 0.25em 0;
        text-align: center;
        font-size: 15px;
        line-height: 1.1em;
        color: var(--primary-900);
    }

    .product-price {
        margin: 0.25em 0;
        text-align: center;
        font-size: 16px;
        color: var(--primary-900);

        /* price_display markup: <s>was</s> <span>now</span> */
        s { color: #000; }
        s + * {
            color: red;
            font-weight: bold;
        }
    }

    .out-of-stock {
        display: block;
        text-align: center;
        color: red;
    }
}

/* Per-product add-to-cart control */
.add-to-cart {
    .btn-add-to-cart {
        width: 100%;
    }

    .qty-controls {
        display: flex;
        align-items: stretch;
        gap: 1px;

        .btn-primary {
            flex: 0 0 2.25rem;
            padding: 0;
            font-size: 1.2rem;
            border-radius: 0;
        }

        .qty {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            border: 1px solid var(--primary-500);
            border-inline: none;
        }
    }

    .login-to-purchase {
        font-size: 0.8rem;
        line-height: 1em;
    }
}

/* Loading spinner for "Load More" */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 1rem;
    border: solid 2px transparent;
    border-top-color: var(--primary-100);
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ---------------------------------------------------------------- *
 * Product grid page layout: left filter panel + grid
 * ---------------------------------------------------------------- */
.product-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;

    .product-list { min-width: 0; }   /* let the grid shrink, not overflow */

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.product-filters {
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    /* Scroll the sidebar on its own when it's taller than the viewport,
       so the main grid can keep scrolling independently. */
    max-height: calc(100vh - 60px - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;   /* breathing room for the scrollbar */
    scrollbar-width: thin;

    .filter-group {
        h3 { margin: 0 0 0.5rem; }
    }

    .clear-filters {
        align-self: flex-start;
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--primary-200);

        /* Hidden by default on small screens; revealed via the toggle */
        display: none;

        &.filters-open {
            display: flex;
        }
    }
}

/* "Show / Hide filters" toggle — small screens only */
.filters-toggle {
    display: none;
}

@media (max-width: 768px) {
    .filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--primary-800);

        svg {
            width: 1.2rem;
            height: 1.2rem;
        }
    }
}

.filter-categories {
    margin: 0;
    padding: 0;
    list-style: none;

    ul {
        margin: 0 0 0 0.5rem;
        padding: 0;
        list-style: none;
    }

    button,
    label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.35rem 0.5rem;
        border: none;
        border-radius: 4px;
        background: none;
        text-align: left;
        font: inherit;
        color: var(--primary-900);
        cursor: pointer;

        &:hover { background-color: var(--primary-100); }

        &.active {
            background-color: var(--primary-200);
            font-weight: 700;
            color: var(--primary-800);
        }

        input[type="checkbox"] {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            margin: 0;
            accent-color: var(--primary-800);
            cursor: pointer;
        }
    }

    /* Top-level expand/collapse toggle */
    .category-toggle {
        justify-content: space-between;

        .chevron {
            flex: 0 0 auto;
            width: 1.1rem;
            height: 1.1rem;
            color: var(--primary-800);
            transition: transform 0.15s ease;
        }
    }

    li.expanded > .category-toggle .chevron {
        transform: rotate(180deg);
    }

    /* Top-level labels a touch stronger */
    > li > button,
    > li > label { font-weight: 600; }
}

/* ---------------------------------------------------------------- *
 * Multi-level category filter tree (partials/shell/product-filter-tree)
 * Every category: a checkbox (filter) + a caret (expand its children).
 * ---------------------------------------------------------------- */
.filter-cat-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
/* The label / top-level link fills the row; the caret stays its own small size.
   (More specific than .filter-categories button/label so the width:100% there
   doesn't stretch them.) */
.filter-cat-row > label,
.filter-cat-row > .filter-cat-link {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.filter-categories .filter-cat-toggle {
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--primary-800);
    cursor: pointer;
}
.filter-categories .filter-cat-toggle:hover { background-color: var(--primary-100); }
/* CSS caret (avoids a per-node inline SVG in a tree of hundreds of nodes) */
.filter-categories .filter-cat-toggle::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);          /* collapsed ▸ */
    transition: transform 0.15s ease;
}
.filter-categories li.expanded > .filter-cat-row .filter-cat-toggle::after {
    transform: rotate(45deg);           /* expanded ▾ */
}

/* Nested levels: indent + collapse until the parent <li> is .expanded */
.filter-cat-children {
    margin: 0 0 0 0.6rem;
    padding: 0;
    list-style: none;
    display: none;
}
.filter-categories li.expanded > .filter-cat-children {
    display: block;
}

/* "← All categories" — leaves the scoped root branch */
.filter-scope-reset {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-800);
}

.price-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    input {
        width: 100%;
        min-width: 0;
        padding: 0.4rem 0.5rem;
        border: 1px solid var(--primary-500);
        border-radius: 6px;
        font: inherit;

        &:focus-visible {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);
        }
    }
}

.product-list .controls .search-term {
    font-weight: 600;
    color: var(--primary-800);
}


/* ---------------------------------------------------------------- *
 * Breadcrumbs (@breadcrumbs Blade directive)
 * ---------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--primary-800);
}

.breadcrumb-item {
    display: flex;
    align-items: center;

    & + .breadcrumb-item::before {
        content: "/";
        margin: 0 0.5rem;
        color: var(--primary-500);
    }

    a {
        color: var(--primary-800);
        text-decoration: none;

        &:hover { text-decoration: underline; }
    }

    &.active {
        color: var(--primary-900);
        font-weight: 600;
    }
}


/* ---------------------------------------------------------------- *
 * Generic page container (Bootstrap .container replacement)
 * ---------------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

[x-cloak] { display: none !important; }

.alert-warning {
    --alert-color: #b9770e;
}


/* ---------------------------------------------------------------- *
 * Individual product page (products/show)
 * ---------------------------------------------------------------- */
.product-detail {
    .admin-controls { margin: 1rem 0; }

    .layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
        margin-top: 1rem;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .product-brand {
        margin: 0;
        font-size: 1.3rem;
        color: var(--primary-800);
    }

    .product-name {
        margin: 0 0 0.5rem;
        font-size: 1.6rem;
        line-height: 1.2;
        color: var(--primary-900);
    }

    .product-sku {
        margin: 0 0 1rem;
        color: #777;
        font-size: 0.9rem;
    }

    .product-price {
        margin: 1rem 0;
        font-size: 1.4rem;
        color: var(--primary-900);

        /* price_display markup: <s>was</s> <span>now</span> */
        s { color: #000; font-size: 1.1rem; }
        s + *, &.special { color: red; font-weight: bold; }
        &.special s { color: #000; font-weight: normal; }
    }

    .add-to-cart { max-width: 280px; }

    .product-description {
        margin-top: 1rem;
        line-height: 1.5;
    }

    /* Grouped (parent/child) product rows */
    .group-product-item {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        gap: 0.75rem;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--primary-200);

        > .thumbnail {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .product-price {
            margin: 0;
            font-size: 1.1rem;
        }

        > .controls {
            grid-column: 1 / -1;

            .add-to-cart { max-width: 280px; }
            .alert { margin-bottom: 0.5rem; }
        }
    }
}


/* ---------------------------------------------------------------- *
 * Product image gallery (replaces ProductImage.vue)
 * ---------------------------------------------------------------- */
.product-gallery {
    margin-bottom: 1rem;

    .image-zoom {
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
        line-height: 0;
        border: solid 1px transparent;

        &:hover { border-color: #eee; }

        img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: contain;
        }
    }

    .thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50px, 80px));
        gap: 20px;
        margin-top: 20px;

        .thumb {
            padding: 0;
            border: solid 1px rgba(0, 0, 0, 0.1);
            background: none;
            cursor: pointer;
            line-height: 0;
            aspect-ratio: 1 / 1;

            &.active { border-color: var(--primary); }

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}


/* ---------------------------------------------------------------- *
 * Social sharing buttons (replaces SocialSharing.vue)
 * ---------------------------------------------------------------- */
.social-sharing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;

    .whatsapp-share-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #234242;
        border-radius: 3px;
        padding: 2px 5px;
        height: 20px;
        text-decoration: none;

        img {
            height: 15px;
            width: 15px;
        }

        span {
            color: #fff;
            font-size: 13px;
            font-weight: normal;
        }
    }
}


/* ---------------------------------------------------------------- *
 * Cart drawer content
 * Column layout inside the right sidebar: header / scrolling item
 * list / pinned footer (subtotal, checkout, payment logos).
 * ---------------------------------------------------------------- */
#cart-drawer .cart-drawer-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--primary-200);

        .header-3 { margin: 0; }

        .drawer-close {
            font-size: 1.6rem;
            line-height: 1;
            color: var(--primary-800);
            padding: 0 0.25rem;
        }
    }

}

.cart-popup {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;

    .cart-items {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 0.25rem 0;
        scrollbar-width: thin;

        /* Soft hint that the list continues when it overflows */
        mask-image: linear-gradient(#000 calc(100% - 1rem), #0000);
    }

    .item {
        position: relative;
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 0.75rem;
        align-items: start;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--primary-200);
        font-size: 0.9rem;
        line-height: 1.25;

        &:last-child { border-bottom: none; }

        .thumb {
            display: block;
            width: 56px;
            height: 56px;
            background-color: #fff;
            border: 1px solid var(--primary-200);
            border-radius: 6px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .details {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 0;
        }

        .name {
            color: var(--primary-900);
            text-decoration: none;
            font-weight: 600;
            padding-right: 1.5rem;           /* keep clear of the remove button */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            &:hover { color: var(--primary-800); text-decoration: underline; }
        }

        .unit-price {
            font-size: 0.8rem;
            color: #666;

            s { margin-right: 0.25em; }
            s + * { color: var(--danger); font-weight: 600; }
        }

        .line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }

        .qty-label { color: #666; }

        .line-total {
            font-size: 1rem;
            color: var(--primary-900);
            white-space: nowrap;
        }

        /* Compact stepper inside the drawer */
        .add-to-cart {
            .qty-controls {
                border: 1px solid var(--primary-200);
                border-radius: 6px;
                overflow: hidden;
                background-color: #fff;

                .btn-primary {
                    flex: 0 0 1.75rem;
                    height: 1.75rem;
                    font-size: 1rem;
                    border-radius: 0;
                    background-color: #fff;
                    color: var(--primary-800);

                    &:hover { background-color: var(--primary-100); }
                }

                .qty {
                    min-width: 2rem;
                    text-align: center;
                    align-self: center;
                    font-weight: 600;
                }
            }

            .btn-add-to-cart {
                width: auto;
                padding: 0.25rem 0.75rem;
                font-size: 0.85rem;
            }
        }

        .remove {
            position: absolute;
            top: 0.5rem;
            right: 0;
            width: 1.5rem;
            height: 1.5rem;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: none;
            color: #999;
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;

            &:hover {
                background-color: color-mix(in srgb, var(--danger) 12%, transparent);
                color: var(--danger);
            }
        }

        &.gift {
            grid-template-columns: 56px 1fr auto;
            align-items: center;

            .free {
                font-weight: 700;
                color: var(--success);
            }
        }
    }

    .gifts-banner {
        margin: 0.5rem 0 0;
        padding: 0.35rem 0.5rem;
        border-radius: 6px;
        background-color: color-mix(in srgb, var(--success) 12%, white);
        color: color-mix(in srgb, var(--success) 70%, black);
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
    }

    .cart-footer {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--primary-200);

        .subtotal {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin: 0;
            color: var(--primary-900);

            small {
                color: #666;
                font-weight: normal;
                margin-left: 0.25em;
            }

            strong { font-size: 1.25rem; }
        }

        .btn-checkout {
            width: 100%;
            padding: 0.75rem;
            font-size: 1.05rem;
            font-weight: 600;
        }

        .btn-empty-cart {
            align-self: center;
            font-size: 0.85rem;
            color: #888;
            text-decoration: underline;

            &:hover { color: var(--danger); }
        }

        .payment-options {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.25rem;
            padding-top: 0.5rem;
            border-top: 1px dashed var(--primary-200);

            .accept-label {
                flex: 1 1 100%;
                text-align: center;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: #888;
            }

            img {
                height: 24px;
                width: auto;
                border-radius: 3px;
            }
        }
    }

    .cart-empty {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        text-align: center;
        color: var(--primary-800);

        svg {
            width: 56px;
            height: 56px;
            opacity: 0.35;
        }

        p {
            margin: 0;
            font-size: 1.05rem;
        }
    }
}


/* ---------------------------------------------------------------- *
 * Checkout (replaces CheckoutProcess.lazy.vue + OrderItems.lazy.vue)
 * ---------------------------------------------------------------- */
.checkout-page {
    .required {
        color: var(--primary-500);
        font-size: 0.75rem;
        font-weight: 400;
    }

    > .alert {
        text-align: center;
    }
}

.checkout-columns {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: start;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Numbered step accordion */
.checkout-step {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px solid var(--primary-200);
    border-radius: 8px;
    opacity: 0.55;
    transition: opacity 0.15s ease;

    &.open { opacity: 1; }

    h2 {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        font-size: 1.15rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--primary-900);
        cursor: pointer;
    }

    /* Completed (collapsed) steps hint they're clickable to go back */
    &:not(.open) h2 { cursor: pointer; }

    .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.6rem;
        height: 1.6rem;
        flex: 0 0 auto;
        font-size: 0.9rem;
        color: #fff;
        background-color: var(--primary-800);
        border-radius: 50%;
    }

    .step-body {
        margin-top: 1.25rem;
    }
}

.checkout-as-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;

    button {
        flex: 1 1 0;
        padding: 0.6rem 1rem;
        font-weight: 600;
        color: var(--primary-800);
        background-color: var(--primary-100);
        border: 1px solid var(--primary-200);
        border-radius: 6px;
        cursor: pointer;

        &.active {
            color: #fff;
            background-color: var(--primary);
            border-color: var(--primary);
        }
    }
}

/* Address autocomplete */
.address-search { position: relative; }

.address-results {
    margin: -0.75rem 0 1.25rem;
    padding: 0;
    list-style: none;
    border: 1px solid var(--primary-200);
    border-radius: 6px;
    overflow: hidden;

    li {
        padding: 0.5rem 0.75rem;
        cursor: pointer;

        & + li { border-top: 1px solid var(--primary-100); }
        &:hover { background-color: var(--primary-100); }
    }
}

.address-card {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--primary-100);
    color: var(--primary-900);
    border-radius: 6px;
    line-height: 1.3;

    h3 {
        margin: 0 0 0.5rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--primary);
    }

    .content {
        display: flex;
        flex-direction: column;

        .address1 { font-size: 1.2rem; }
        .address3 { text-transform: uppercase; }
        .type {
            color: var(--primary);
            font-size: 0.8rem;
        }

        .delivery-instructions {
            margin: 0.75rem 0 0;
            font-size: 0.9rem;

            &::before {
                content: 'Instructions';
                display: block;
                text-transform: uppercase;
                color: var(--primary);
                font-size: 0.8rem;
            }
        }
    }

    .btn-text { margin-top: 0.5rem; }
}

.contact-summary {
    margin-bottom: 1rem;
    line-height: 1.4;

    .name {
        display: block;
        font-size: 1.2rem;
        font-weight: 600;
    }
    .company { display: block; text-transform: uppercase; }
    .email,
    .phone { display: block; }
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    .payment-option {
        cursor: pointer;

        &.loading { opacity: 0.5; pointer-events: none; }

        /* The server returns full <button> markup per option */
        .payment-button,
        button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            font-size: 1.05rem;

            img {
                height: 24px;
                width: auto;
            }
        }
    }
}

.placing-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    text-align: center;

    .spinner {
        width: 48px;
        height: 48px;
        border-width: 4px;
        border-top-color: var(--primary);
        margin: 0;
    }
}

/* Right-hand summary column */
.checkout-summary {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .voucher-box,
    .order-summary-box {
        padding: 1.25rem;
        background-color: #fff;
        border: 1px solid var(--primary-200);
        border-radius: 8px;
    }

    .voucher-input {
        display: flex;
        gap: 0.5rem;

        input { flex: 1 1 auto; }
    }

    @media (max-width: 768px) {
        position: static;
    }
}

/* Order line summary (shared between review step + summary column) */
.order-summary {
    .summary-items {
        margin-top: 1rem;
    }

    .summary-item {
        display: grid;
        grid-template-columns: 50px 1fr auto;
        gap: 0.75rem;
        align-items: center;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        line-height: 1.3;

        .thumbnail {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

        .name {
            .from-wishlist {
                width: 1rem;
                height: 1rem;
                color: var(--primary);
                vertical-align: middle;
            }
        }

        .line-amount {
            text-align: right;
            white-space: nowrap;

            .item-price {
                display: block;
                s { font-size: 0.85em; }
                span { color: var(--danger); }
            }
            .qty { display: block; color: #888; }
        }

        &.gift .line-amount strong { color: var(--success); }
    }

    .summary-totals {
        margin: 0;
        padding-top: 0.75rem;
        border-top: 1px solid var(--primary-200);

        > div {
            display: flex;
            justify-content: space-between;
            margin: 0.35rem 0;

            dt {
                text-transform: uppercase;
                font-size: 0.85rem;
                color: var(--primary-800);
            }
            dd { margin: 0; }
        }

        .grand-total {
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--primary-200);
            font-weight: 700;

            dt small { font-weight: 400; color: #888; }
            dd { font-size: 1.15rem; }
        }
    }
}


/* ---------------------------------------------------------------- *
 * Account pages (orders list, etc.) — storefront-styled, no Bootstrap
 * ---------------------------------------------------------------- */
.account-page {
    padding: 1rem 0 3rem;
}
.account-title {
    margin: 1rem 0;
}
.account-empty {
    padding: 2rem 0;
    color: #666;
}

.account-table-wrap {
    overflow-x: auto;
}
.account-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.account-table th,
.account-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--primary-200);
    vertical-align: middle;
}
.account-table thead th {
    border-bottom: 2px solid var(--primary-500);
    color: var(--primary-800);
    font-weight: 600;
    white-space: nowrap;
}
.account-table tbody tr:hover {
    background: var(--primary-100);
}
.account-table .r {
    text-align: right;
}
.order-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    background: var(--primary-100);
    color: var(--primary-800);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Pagination (used by partials/shell/pagination.blade.php) */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--primary-200);
    border-radius: 4px;
    background: #fff;
    color: var(--primary-800);
    text-decoration: none;
    transition: background-color 0.1s ease;
}
.pagination a.page-link:hover {
    background: var(--primary-100);
}
.pagination .page-link.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.pagination .page-link.disabled {
    color: #bbb;
    background: #f7f7f7;
    cursor: default;
}

/* Stack the account table into cards on small screens */
@media (max-width: 768px) {
    .account-table thead {
        display: none;
    }
    .account-table,
    .account-table tbody,
    .account-table tr,
    .account-table td {
        display: block;
        width: 100%;
    }
    .account-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--primary-200);
        border-radius: 6px;
        overflow: hidden;
    }
    .account-table td {
        border-bottom: 1px solid var(--primary-100);
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }
    .account-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary-800);
        text-align: left;
        margin-right: 1rem;
    }
    .account-table td:last-child {
        border-bottom: none;
    }
}


/* ---------------------------------------------------------------- *
 * Order detail (orders/show) — storefront-styled, no Bootstrap
 * ---------------------------------------------------------------- */
.order-detail .address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0 2rem;
}
.order-detail .address-block {
    background: var(--primary-100);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}
.order-detail .address-block h3 {
    margin: 0 0 0.75rem;
    color: var(--primary-800);
}
.order-detail .address-block .cols {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.order-detail .address-block dl {
    margin: 0;
}
.order-detail .address-block dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.25rem;
}
.order-detail .address-block dd {
    margin: 0;
    line-height: 1.4;
}
.order-detail .address-block .address dl {
    text-align: right;
}

.order-totals {
    margin: 1.5rem 0;
    margin-left: auto;
    max-width: 320px;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 0.35rem;
    column-gap: 1.5rem;
}
.order-totals dt {
    text-align: left;
    color: #555;
}
.order-totals dd {
    margin: 0;
    text-align: right;
}
.order-totals .divider {
    grid-column: 1 / -1;
    border: 0;
    border-top: 1px solid var(--primary-200);
    margin: 0.35rem 0;
}
.order-totals dt.grand,
.order-totals dd.grand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary-900);
}

.order-comment {
    margin-top: 1.5rem;
}
.order-comment label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.order-comment textarea {
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem;
    border: 1px solid var(--primary-200);
    border-radius: 4px;
    background: #fafafa;
    font: inherit;
}

/* ---------------------------------------------------------------- *
 * Order payment page (replaces OrderPayment.lazy.vue)
 * ---------------------------------------------------------------- */
.order-payment {
    width: 600px;
    max-width: 90vw;
    background-color: var(--primary-100);
    margin: 1rem auto 2rem;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
}
.order-payment .header {
    background-color: var(--primary-100);
    color: var(--primary-900);
    padding: 1.5rem 1rem;
}
.order-payment .header h1 {
    margin: 0 0 0.75rem;
}
.order-payment .outstanding-amount {
    padding: 2rem 0.5rem;
    font-size: 1.8rem;
    color: var(--primary);
}
.order-payment .outstanding-amount .value {
    font-size: 3rem;
    color: var(--primary-900);
}
.order-payment .outstanding-amount .value small {
    font-size: 1rem;
}
.order-payment .outstanding-amount .left-to-pay {
    display: inline-block;
    margin-left: 0.5rem;
}
.order-payment form {
    padding: 0.7rem 2rem;
}
.order-payment .payment-button {
    width: 100%;
    background-color: var(--primary-200);
    color: var(--primary-900);
    border: solid 2px var(--primary-200);
    border-radius: 5px;
    font-size: 1.3rem;
    padding: 0.6rem 1rem;
}
.order-payment .payment-button img {
    margin: 0 0.5rem;
    padding-bottom: 0.2rem;
    max-width: 200px;
    max-height: 30px;
}
.order-payment .payment-button:hover {
    opacity: 0.8;
}


/* ---------------------------------------------------------------- *
 * Three-column grid + category tiles
 * (colour landing pages, products/intro)
 * ---------------------------------------------------------------- */
.grid-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
}
@media (max-width: 900px) {
    .grid-three-col {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .grid-three-col {
        grid-template-columns: 1fr;
    }
}

.category-tile {
    display: block;
    position: relative;
    min-height: 180px;
    padding: 1rem;
    overflow: hidden;
    color: #fff;
    background: #333;
    text-decoration: none;
    border-radius: 4px;
}
.category-tile .tile-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3s ease;
}
.category-tile:hover .tile-image {
    transform: scale(1.05);
}
.category-tile .tile-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}
.category-tile.no-image .tile-scrim {
    background: rgba(0, 0, 0, 0.15);
}
.category-tile .tile-name {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}


/* ---------------------------------------------------------------- *
 * Brands index (brands/index.blade.php)
 * ---------------------------------------------------------------- */
.brand-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem 1rem;
    margin: 1.5rem 0 3rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
}
.brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--primary-900);
    border: 1px solid var(--primary-200);
    border-radius: 6px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.brand-link:hover {
    border-color: var(--primary-500);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.brand-image {
    max-width: 100%;
    height: 80px;
    object-fit: contain;
}
.brand-name {
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
.brand-categories {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    text-align: center;
    font-size: 0.85rem;
}
.brand-categories li {
    padding: 0.1rem 0;
}
.brand-categories a {
    color: var(--primary-800);
    text-decoration: none;
}
.brand-categories a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * Brand scroller (FCS block: partials/shell/brand-scroller.blade.php)
 * ---------------------------------------------------------------- */
.brand-scroller {
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: thin;
}
.brand-scroller-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
}
.brand-scroller-track.is-animating {
  animation: brand-scroll linear infinite;
}
/* Pause so the (linked) logos can be clicked. */
.brand-scroller:hover .brand-scroller-track.is-animating {
  animation-play-state: paused;
}
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); }
}
/* Spacing lives on the item (not a flex gap) so one "set" width is exact
   and the duplicated set lines up seamlessly. */
.brand-scroller-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.75rem;
}
.brand-scroller-image {
  max-height: 60px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.brand-scroller-item:hover .brand-scroller-image {
  filter: none;
  opacity: 1;
}

/* ---------------------------------------------------------------- *
 * Countdown (FCS block: partials/shell/countdown.blade.php)
 * ---------------------------------------------------------------- */
.countdown-timer {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
}
.countdown-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5em;
}
.countdown-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.countdown-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.countdown-expired {
  text-align: center;
  font-weight: 600;
}