@import "tailwindcss" source(none);
@source "../../templates";
@source "../**/*.js";
@source "../../assets/controllers";
@source "../../../viti-core/src/Bridge/Symfony/Bundle/Resources/views";
@source "../../../viti-core/assets/**/*.js";
@source "../../../viti-core/assets/**/*.css";
@source "../../../viti-core/assets/**/*.scss";
@theme {
    --color-primary: #33261c;
    --color-primary-container: #4a3c31;
    --color-secondary: #735c00;
    --color-background: #fff8f5;
    --color-surface: #fff8f5;
    --color-surface-container: #f7ece5;
    --color-surface-container-low: #fdf2eb;
    --color-surface-container-high: #f1e6df;
    --color-surface-container-highest: #ebe0da;
    --color-surface-variant: #ebe0da;
    --color-on-surface-variant: #4e453f;
    --color-outline: #7f756e;
    --color-primary-fixed: #f5decf;
    --color-primary-fixed-dim: #d8c3b4;
    --color-secondary-fixed: #ffe088;
    --font-display: "Libre Bodoni", serif;
    --font-body: "Libre Franklin", sans-serif;
    --font-label: "Libre Franklin", sans-serif;
}

@keyframes heritage-toast {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-toast {
    animation: heritage-toast 240ms ease-out;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-background);
        color: var(--color-primary);
        font-family: var(--font-body);
        -webkit-font-smoothing: antialiased;
    }

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

    :where(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):not(:disabled):not([aria-disabled="true"]) {
        cursor: pointer;
    }

    :where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled,
    [role="button"][aria-disabled="true"] {
        cursor: not-allowed;
    }

    .material-symbols-outlined {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    }

}

.turbo-progress-bar {
    background-color: var(--color-secondary);
}

.site-nav-backdrop {
    position: absolute;
    inset: 0 0 auto;
    height: calc(100% + 1.5rem);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgb(29 22 15 / 32%) 0%,
        rgb(29 22 15 / 14%) 58%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.homepage-film {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
    background: var(--color-background);
}

.homepage-film__frame {
    position: relative;
    width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 90rem);
    margin-inline: auto;
    padding: 0.25rem;
    overflow: hidden;
    border: 1px solid rgb(51 38 28 / 15%);
    border-radius: 1rem;
    isolation: isolate;
}

.homepage-film__video {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: cover;
    background: var(--color-primary-container);
    border-radius: 0.75rem;
}

.homepage-film__toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: clamp(3.5rem, 6vw, 4.5rem);
    aspect-ratio: 1;
    place-items: center;
    padding: 0;
    color: var(--color-primary);
    background: rgb(255 248 245 / 92%);
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
        color 180ms ease-out,
        background-color 180ms ease-out,
        transform 180ms ease-out;
}

.homepage-film__toggle:hover {
    color: var(--color-background);
    background: var(--color-primary);
    transform: translate(-50%, -50%) scale(1.06);
}

.homepage-film__toggle:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 4px;
}

.homepage-film__toggle-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
}

.homepage-film__toggle-icon svg {
    width: 100%;
    height: 100%;
}

.homepage-film__toggle-icon--play {
    transform: translateX(0.1rem);
}

.homepage-film__credit {
    width: min(100%, 90rem);
    margin: 0.75rem auto 0;
    padding-inline: clamp(1rem, 4vw, 4rem);
    color: var(--color-on-surface-variant);
    font-family: var(--font-label);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: right;
}

@media (max-width: 47.99rem) {
    .homepage-film {
        padding-block: 0 clamp(3rem, 14vw, 5rem);
    }

    .homepage-film__toggle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-toast {
        animation: none;
    }

    .homepage-film__toggle {
        transition: none;
    }
}

.shop-product-gallery-thumb[aria-current="true"] {
    opacity: 1;
}

.collection-carousel__arrow {
    position: absolute;
    z-index: 20;
    top: 38%;
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-primary);
    background: rgb(255 255 255 / 88%);
    border: 1px solid rgb(51 38 28 / 18%);
    border-radius: 9999px;
    transform: translateY(-50%);
    transition:
        color 180ms ease-out,
        background-color 180ms ease-out,
        border-color 180ms ease-out,
        opacity 180ms ease-out;
}

.collection-carousel__arrow[hidden] {
    display: none;
}

.collection-carousel__arrow--previous {
    left: 0;
}

.collection-carousel__arrow--next {
    right: 0;
}

.collection-carousel__arrow:not(:disabled):hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.collection-carousel__arrow:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

.collection-carousel__arrow:disabled {
    color: rgb(78 69 63 / 34%);
    background: rgb(255 255 255 / 62%);
    border-color: rgb(78 69 63 / 12%);
    opacity: 0.72;
}

.collection-carousel__progress {
    height: 2px;
    margin: clamp(2.5rem, 5vw, 4rem) 4rem 0;
    overflow: hidden;
    background: rgb(78 69 63 / 16%);
}

.collection-carousel__progress[hidden] {
    display: none;
}

.product-collection-slider__viewport {
    padding-inline: 0.75rem;
}

.product-collection-slider__media {
    height: clamp(20rem, 95vw, 24rem);
}

.product-collection-slider__image {
    display: block;
    width: clamp(12rem, 60vw, 15rem);
    max-width: none;
    height: auto;
    transform-origin: bottom center;
}

.product-navigation__track {
    cursor: grab;
    overscroll-behavior-inline: contain;
}

.product-navigation:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 4px;
}

.product-navigation.is-dragging .product-navigation__track {
    cursor: grabbing;
    user-select: none;
}

.collection-carousel__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 40rem) {
    .collection-carousel__progress {
        margin-inline: 1rem;
    }
}

@media (min-width: 48rem) {
    .product-collection-slider__viewport {
        padding-inline: 4rem;
    }

    .product-collection-slider__media {
        height: clamp(22rem, 34vw, 30rem);
    }

    .product-collection-slider__image {
        width: clamp(15rem, 24vw, 18rem);
        max-width: 100%;
        height: auto;
        transform: none;
    }
}

.collection-carousel--static .splide__list {
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .collection-carousel__arrow,
    .collection-carousel__progress-bar {
        transition: none;
    }
}

.cuvee-color-halo {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: clamp(18rem, 32vw, 26rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 32% 42%,
            color-mix(in srgb, var(--cuvee-color) 47%, transparent) 0%,
            color-mix(in srgb, var(--cuvee-color) 21%, transparent) 26%,
            transparent 58%
        ),
        radial-gradient(
            circle at 68% 40%,
            color-mix(in srgb, var(--cuvee-color) 44%, transparent) 0%,
            color-mix(in srgb, var(--cuvee-color) 20%, transparent) 28%,
            transparent 56%
        ),
        radial-gradient(
            circle at 50% 56%,
            rgb(255 255 255 / 78%) 0%,
            transparent 52%
        );
    filter: blur(62px);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.cuvee-color-halo--card {
    top: 12rem;
    width: clamp(18rem, 24vw, 24rem);
}
