.store-home {
    --home-gutter: clamp(16px, calc(25vw - 176px), 112px);
    --home-space: clamp(32px, 5vw, 64px);
}
.store-home.df-site .df-site-header {
    position: absolute;
    inset: 0 0 auto;
}
.store-home .df-site-header:not([data-menu-open="true"]) :is(.df-header-account, .df-header-cart, .df-menu-toggle, .df-header-quick) {
    color: var(--cream);
    background: var(--df-glass);
    border-color: rgb(244 237 229 / 28%);
}
.store-home .df-site-header:not([data-menu-open="true"]) .df-icon img {
    filter: brightness(0) saturate(100%) invert(94%) sepia(7%) saturate(428%) hue-rotate(331deg) brightness(103%) contrast(91%);
}
.store-home .df-site-header:not([data-menu-open="true"]) :is(a, button):focus-visible {
    outline-color: var(--cream);
    border-color: var(--cream);
}
@media (hover: hover) {
    .store-home .df-site-header:not([data-menu-open="true"]) :is(.df-header-account, .df-header-cart, .df-menu-toggle, .df-header-quick):hover {
        background: var(--df-glass-hover);
    }
}

.home-hero {
    position: relative;
    isolation: isolate;
    height: clamp(540px, 189vw, 820px);
    overflow: hidden;
    color: var(--cream);
    background: #14243c;
}
.home-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.home-hero video { opacity: 0; }
.home-hero video[data-ready] { opacity: 1; }
.home-hero-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}
.home-hero-snow > span {
    position: absolute;
    top: -14px;
    width: var(--snow-size);
    height: var(--snow-size);
    border-radius: 50%;
    background: radial-gradient(circle, #fff, rgb(255 255 255 / 65%) 25%, transparent 72%);
    animation: home-snow-fall var(--snow-duration) var(--snow-delay) linear infinite paused;
}
.home-hero-snow[data-snow-playing] > span {
    animation-play-state: running;
}
@keyframes home-snow-fall {
    to { transform: translate3d(0, calc(100cqh + 14px), 0); }
}
@media (max-width: 767px) {
    .home-hero-snow > span:nth-child(n + 49) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-snow { display: none; }
}

.home-hero-links {
    position: absolute;
    top: 25.4%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
}
.home-hero .glass {
    min-height: 52px;
    color: var(--cream);
    border-color: rgb(244 237 229 / 28%);
    background: var(--df-glass);
    backdrop-filter: blur(16px);
    white-space: nowrap;
}
.home-hero-links > a:first-child { width: min(220px, 70vw); }
.home-hero .home-hero-custom { display: none; }
.home-hero .glass:focus-visible { outline-color: var(--cream); }
@media (hover: hover) {
    .home-hero .glass:hover { background: var(--df-glass-hover); }
}
@media (min-width: 768px) {
    .home-hero { height: auto; aspect-ratio: 1440 / 809; }
    .home-hero-links {
        top: 52.2%;
        height: 56px;
        padding-inline: 8px;
        border: 1px solid rgb(244 237 229 / 16%);
        border-radius: 34px;
        background: rgb(7 37 33 / 58%);
        backdrop-filter: blur(12px);
    }
    .home-hero-links .glass {
        flex: none;
        width: 126px;
        min-height: 44px;
        padding-inline: 0;
        border-color: rgb(244 237 229 / 18%);
        font: 400 13px/18px var(--df-font);
    }
    .home-hero-links > a:first-child { width: 112px; }
    .home-hero .home-hero-custom { display: inline-flex; }
    }
@media (min-width: 1200px) {
    .store-home.df-site .df-site-header:not([data-menu-open="true"]) .df-header-center {
        border-color: rgb(244 237 229 / 28%);
    }
    .store-home.df-site .df-site-header:not([data-menu-open="true"]) .df-header-center::before {
        background: var(--df-glass);
    }
    .store-home.df-site .df-site-header[data-menu-open="true"] .df-header-center::before {
        background: rgb(247 248 245 / 94%);
    }
}

.home-section {
    width: min(1216px, calc(100% - 2 * var(--home-gutter)));
    margin-inline: auto;
    padding-block: var(--home-space);
}
.home-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.home-section-heading h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}
.home-desktop-copy,
.home-popular .home-carousel-controls,
.home-gallery-desktop-cta { display: none; }
.home-track {
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 5px 0 12px;
    margin-top: -5px;
}
.home-track::-webkit-scrollbar { display: none; }
.home-track > * { min-width: 0; scroll-snap-align: start; }
.home-track a:focus-visible { outline-offset: -3px; }
.home-mobile-cta {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
}
@media (max-width: 767px) {
    .home-track {
        margin-inline: calc(-1 * var(--home-gutter));
        padding-inline: var(--home-gutter);
        scroll-padding-inline: var(--home-gutter);
    }
}
@media (min-width: 768px) {
    .home-section-heading { margin-bottom: 40px; }
    .home-section-heading h2 { font-size: clamp(38px, 4vw, 56px); }
    .home-desktop-copy { display: block; }
    .home-shortcuts-track, .home-popular-track {
        margin-right: min(calc(-1 * var(--home-gutter)), calc((1216px - 100vw) / 2));
        padding-right: var(--home-gutter);
    }
    .home-popular .home-carousel-controls, .home-gallery-desktop-cta { display: flex; }
    .home-mobile-cta, .home-popular-mobile-word, .home-gallery-mobile-title { display: none; }
}

.home-shortcuts { padding-block: 13px; }
.home-shortcuts-track {
    grid-auto-columns: 100px;
    margin-block: -16px -8px;
    padding-block: 16px 20px;
}
.home-shortcut { position: relative; text-align: center; }
.home-shortcut-mobile { display: grid; gap: 8px; font-size: 12px; line-height: 16px; }
.home-shortcut-mobile img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border: 1px solid rgb(244 237 229 / 28%);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgb(7 37 33 / 4%);
}
.home-shortcut--new-year { order: -4; }
.home-shortcut--decor { order: -3; }
.home-shortcut--sets { order: -2; }
.home-shortcut-button, .home-shortcut-caption, .home-shortcut-panel { display: none; }
@media (min-width: 768px) {
    .home-shortcuts { padding-block: 58px; }
    .home-shortcuts-track {
        grid-auto-columns: clamp(240px, 23.34vw, 336px);
        margin-inline-start: -16px;
        padding-inline-start: 16px;
        scroll-padding-inline-start: 16px;
    }
    .home-shortcut { order: 0; }
    .home-shortcut-mobile { font-size: 16px; }
    .home-shortcut-mobile img { height: auto; aspect-ratio: 336 / 289; }
    [data-shortcuts-ready] .home-shortcut-mobile { display: none; }
    [data-shortcuts-ready] .home-shortcut-button {
        display: block;
        width: 100%;
        aspect-ratio: 336 / 289;
        padding: 4px;
        overflow: hidden;
        border: 1px solid rgb(244 237 229 / 28%);
        border-radius: 30px;
        background: rgb(244 237 229 / 12%);
        box-shadow: 0 2px 8px rgb(7 37 33 / 4%);
    }
    .home-shortcut-button img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 26px;
        object-fit: cover;
        transition: height var(--df-motion);
    }
    .home-shortcut[data-expanded] .home-shortcut-button img { height: 58%; }
    .home-shortcut[data-expanded] .home-shortcut-button { display: flex; align-items: flex-start; }
    [data-shortcuts-ready] .home-shortcut-caption { display: block; margin-top: 14px; }
    .home-shortcut-panel {
        position: absolute;
        inset: 59% 12px 14%;
        display: grid;
        place-items: center;
        font-size: 14px;
        line-height: 1.3;
    }
    .home-shortcut-panel a { padding: 5px 8px; }
}

.home-popular { padding-top: clamp(26px, 4vw, 58px); }
.home-popular-track {
    grid-auto-columns: min(250px, 74vw);
    margin-block: -16px -8px;
    padding-block: 16px 20px;
}
.home-popular-track .store-card {
    border-radius: 14px;
    box-shadow: 0 2px 8px rgb(7 37 33 / 4%);
}
.home-popular-track .store-card-image { aspect-ratio: 250 / 286; border-radius: 0; }
.home-popular-track .store-card-copy { padding: 12px 14px 20px; }
@media (min-width: 768px) {
    .home-popular .home-section-heading { margin-bottom: 46px; }
    .home-popular-track {
        grid-auto-columns: 250px;
        margin-inline-start: -16px;
        padding-inline-start: 16px;
        scroll-padding-inline-start: 16px;
    }
    .home-popular-track .store-card { border-radius: 30px; }
    .home-popular-track .store-card-image { aspect-ratio: 1; }
}

.home-loyalty {
    display: none;
    width: min(1344px, calc(100% - 2 * var(--page-gutter)));
    margin: 24px auto;
    padding: clamp(20px, 4vw, 48px);
    border-radius: 34px;
    background: var(--df-soft);
}
.home-loyalty:target { display: grid; gap: 20px; }
.home-loyalty h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin-block: 8px; }
.home-cta { min-height: 60px; min-width: min(100%, 180px); }
@media (min-width: 768px) {
    .home-loyalty, .home-loyalty:target { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .home-loyalty .home-cta { min-width: 220px; }
    .home-loyalty { min-height: 220px; }
}

.home-occasion-grid { grid-auto-columns: min(170px, 44vw); }
.home-occasion { position: relative; display: grid; gap: 8px; text-align: center; }
.home-occasion img {
    width: 100%;
    height: 179px;
    object-fit: cover;
    border: 1px solid rgb(244 237 229 / 28%);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgb(7 37 33 / 18%);
}
.home-occasion span { font-size: 12px; line-height: 16px; }
@media (min-width: 768px) {
    .home-occasions .home-section-heading { justify-content: center; text-align: center; }
    .home-occasion-grid {
        width: min(750px, 100%);
        margin-inline: auto;
        padding: 0;
        aspect-ratio: 750 / 554;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        overflow: visible;
    }
    .home-occasion {
        display: block;
        grid-row: 1;
        align-self: start;
        padding: 4px;
        border: 1px solid rgb(244 237 229 / 28%);
        border-radius: 30px;
        box-shadow: 0 8px 24px rgb(7 37 33 / 18%);
    }
    .home-occasion img { height: 100%; border: 0; border-radius: 26px; box-shadow: none; }
    .home-occasion span {
        position: absolute;
        inset: auto 15px 15px;
        display: grid;
        place-items: center;
        min-height: 44px;
        padding-inline: 8px;
        border: 1px solid rgb(244 237 229 / 28%);
        border-radius: 30px;
        background: rgb(7 37 33 / 70%);
        color: var(--cream);
        font: 500 16px/20px var(--df-font);
        backdrop-filter: blur(16px);
    }
    @media (hover: hover) {
        .home-occasion:not([aria-disabled="true"]):hover span {
            background: rgb(7 37 33 / 82%);
            border-color: rgb(244 237 229 / 48%);
        }
    }
    .home-occasion:not([aria-disabled="true"]):active span {
        background: rgb(7 37 33 / 94%);
        border-color: rgb(244 237 229 / 72%);
    }
    .home-occasion:focus-visible { outline: none; }
    .home-occasion:focus-visible span {
        border-color: var(--cream);
        outline: 2px solid var(--cream);
        outline-offset: -2px;
    }
    .home-occasion[aria-disabled="true"] span {
        background: rgb(7 37 33 / 45%);
        border-color: rgb(244 237 229 / 16%);
        color: rgb(244 237 229 / 53%);
    }
    .home-occasion--birthday { grid-column: 1; height: 59%; }
    .home-occasion--everyday { grid-column: 1; height: 39%; align-self: end; }
    .home-occasion--wedding { grid-column: 2; height: 39%; }
    .home-occasion--thanks { grid-column: 2; height: 59%; align-self: end; }
    .home-occasion--anniversary { grid-column: 3; height: 49%; }
    .home-occasion--compliment { grid-column: 3; height: 49%; align-self: end; }
}

.home-feature {
    position: relative;
    isolation: isolate;
    padding: 0;
    margin-block: var(--home-space);
    border-radius: 18px;
    scroll-margin-top: 16px;
}
.home-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    border-radius: 14px;
    padding: 24px 16px;
}
.home-feature h2 { font-size: clamp(29px, 4vw, 56px); font-weight: 600; line-height: 1.2; }
.home-feature .home-cta { min-height: 52px; }
.home-feature-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.home-custom { display: none; }
.home-custom:target { display: grid; gap: 12px; }
.home-custom .home-feature-copy { background: rgb(7 37 33 / 12%); }
.home-custom .home-feature-photo { max-height: 320px; }
.home-business {
    display: flex;
    align-items: flex-end;
    min-height: clamp(400px, 112vw, 520px);
    overflow: hidden;
    padding: 12px;
    color: var(--cream);
    background: var(--ink);
}
.home-business .home-feature-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    object-position: 50% 54%;
}
.home-business .home-feature-copy {
    width: 100%;
    border: 1px solid rgb(244 237 229 / 28%);
    background: rgb(7 37 33 / 75%);
    backdrop-filter: blur(12px);
}
.home-business .home-cta {
    width: 100%;
    padding-inline: 12px;
    white-space: nowrap;
    border-color: rgb(244 237 229 / 28%);
    background: var(--df-glass);
    color: var(--cream);
    font: 500 16px/20px var(--df-font);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 1px rgb(255 255 255 / 16%), 0 8px 12px rgb(10 8 8 / 16%);
    transition: background var(--df-motion), box-shadow var(--df-motion);
}
@media (hover: hover) {
    .home-business .home-cta:not(:is(:disabled, [aria-disabled="true"])):hover {
        background: var(--df-glass-hover);
        box-shadow: inset 0 1px 1px rgb(255 255 255 / 30%), 0 8px 12px rgb(10 8 8 / 16%);
    }
}
.home-business .home-cta:not(:is(:disabled, [aria-disabled="true"])):active {
    background: rgb(244 237 229 / 30%);
    box-shadow: inset 0 1px 1px rgb(255 255 255 / 16%), 0 8px 12px rgb(10 8 8 / 16%);
}
.home-business .home-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
.home-business .home-cta:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; }
@media (min-width: 768px) {
    .home-feature { border-radius: 36px; }
    .home-feature-copy { padding: clamp(24px, 3.5vw, 40px); border-radius: 30px; }
    .home-custom, .home-custom:target { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 504px; }
    .home-custom .home-feature-copy { justify-content: center; }
    .home-custom .home-feature-photo { max-height: 504px; border-radius: 30px; }
    .home-business { padding: 32px; align-items: stretch; }
    .home-business .home-feature-photo { object-position: 50% 49%; }
    .home-business .home-feature-copy { width: min(600px, 60%); justify-content: center; }
    .home-feature .home-cta { width: min(100%, 280px); min-height: 60px; }
    .home-business .home-cta { width: min(100%, 228px); }
}

.home-gallery { background: var(--sage); }
.home-works-track {
    grid-auto-columns: min(286px, 78vw);
    margin-block: -16px -8px;
    padding-block: 16px 20px;
}
.home-work { display: grid; align-content: start; gap: 6px; }
.home-work img {
    width: 100%;
    height: auto;
    aspect-ratio: 286 / 280;
    object-fit: cover;
    padding: 4px;
    border: 1px solid rgb(244 237 229 / 28%);
    border-radius: 30px;
    box-shadow: 0 2px 8px rgb(7 37 33 / 4%);
    margin-bottom: 8px;
}
.home-work h3 { font-weight: 500; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25; }
.home-work p { font-size: 14px; }
@media (min-width: 768px) {
    .home-works-track {
        grid-auto-columns: calc((100% - 72px) / 4);
        gap: 24px;
        margin-inline: -16px;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-shortcut-button img { transition: none; }
}
