/* Holiday overlays for the storefront home page only (loaded after storefront.css). */

body.skin-christmas.is-storefront-home {
    background:
        url("/images/merry-printmas/assets/bg-paper-white-tile.webp") repeat,
        #f6f3ee;
    color: #141418;
    overflow-x: clip;
}

/* Merry home header: transparent overlay on hero v3 (no lights, snow, or navy band). */
.is-storefront-home .site-header.is-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: transparent;
    backdrop-filter: none;
    border: 0;
}

.is-storefront-home .site-header.is-overlay::before,
.is-storefront-home .site-header.is-overlay::after {
    content: none;
    display: none;
}

.is-storefront-home .site-header.is-overlay .header-bar,
.is-storefront-home .site-header.is-overlay .mobile-nav,
.is-storefront-home .site-header.is-overlay .search-panel {
    position: relative;
    z-index: 1;
}

.is-storefront-home .primary-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-left: auto;
    background-color: rgb(167 0 0 / 80%);
    padding: 15px;
    border-radius: 12px;
}

.is-storefront-home .primary-nav .header-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    margin-top: 0;
    padding-left: .85rem;
    border-left: 1px solid rgb(255 255 255 / 28%);
}

.is-storefront-home .site-header.is-overlay .primary-nav .header-tools {
    margin-top: 0;
}

.is-storefront-home .primary-nav a {
    color: #fff;
}

.is-storefront-home .primary-nav a.is-active,
.is-storefront-home .primary-nav a:hover {
    color: #fff;
}

.is-storefront-home .icon-button {
    color: #fff;
}

.is-storefront-home .icon-button:hover {
    color: #fff;
    opacity: .85;
}

.is-storefront-home .cart-count {
    background: url("/images/merry-printmas/assets/badge-cart-count-blank.webp") center / contain no-repeat;
    color: #fff;
    min-width: 1.5rem;
    min-height: 1.5rem;
    line-height: 1.5rem;
    padding: 0 .2rem;
    background-color: transparent;
}

.is-storefront-home .mobile-nav:not([hidden]) {
    display: flex;
    background-color: rgb(167 0 0 / 88%);
    border-radius: 12px;
    margin: 0 1rem .75rem;
    padding: .65rem 1rem 1rem;
}

.is-storefront-home .search-panel:not([hidden]) {
    background: rgb(10 22 40 / 88%);
}

.hero {
    position: relative;
    z-index: 1;
    min-height: clamp(320px, 44vw, 780px);
    overflow: hidden;
    background-color: #07060a;
    background-image: url("/images/grinchmas-hero-final.png");
    background-image: image-set(
        url("/images/grinchmas-hero-final.webp") type("image/webp"),
        url("/images/grinchmas-hero-final.png") type("image/png")
    );
    background-position: center 36%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: clamp(156px, 11vw, 196px);
    padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
    margin-top: 0;
    margin-bottom: 0;
}

/* Merry home: full-width grinchmas-hero-final art only (1920×700, no CTA overlay). */
.is-storefront-home .hero.merry-hero-home {
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 700;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height: 0;
    background-size: 100% 100%;
    background-position: center top;
}

/* Uploaded carousel: drop built-in grinchmas CSS art (must beat .hero background-image / image-set). */
.is-storefront-home .hero.merry-hero-home.merry-hero-home--carousel {
    background: none;
}

/* Section keeps aspect-ratio above; carousel root fills that box (static or animated). */
.is-storefront-home .hero.merry-hero-home.merry-hero-home--carousel .skin-carousel-root {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
}

.hero::after { content: none; }

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    align-items: start;
    justify-items: start;
    min-height: clamp(240px, 30vw, 540px);
    padding: 0 0 clamp(1rem, 2vw, 1.75rem);
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: min(386px, 72vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(.65rem, 1.6vw, 1.1rem);
}

/* In-flow section dividers (never overlap hero, headings, or buttons). */
.merry-divider {
    display: block;
    width: 100%;
    height: clamp(52px, 7vw, 88px);
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
    font-size: 0;
    background-repeat: repeat-x;
    background-position: center top;
    background-size: min(1920px, 200vw) 100%;
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.merry-divider-red { background-image: url("/images/merry-printmas/assets/divider-drips-red.webp"); }

/* Hero → categories transition on Merry home only (not header). */
.merry-divider-lights {
    height: clamp(56px, 7.8vw, 100px);
    background-image: url("/images/merry-printmas/assets/decor-string-lights.png");
    background-image: image-set(
        url("/images/merry-printmas/assets/decor-string-lights.webp") type("image/webp"),
        url("/images/merry-printmas/assets/decor-string-lights.png") type("image/png")
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
}
.merry-divider-white { background-image: url("/images/merry-printmas/assets/divider-drips-white.webp"); }
.merry-divider-navy { background-image: url("/images/merry-printmas/assets/divider-drips-navy.webp"); }
.merry-divider-navy-flip {
    background-image: url("/images/merry-printmas/assets/divider-drips-navy.webp");
    transform: scaleY(-1);
}

.merry-section-heading {
    margin: 0 auto 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    line-height: 0;
}

.is-storefront-home .merry-section-heading.tag {
    background: none;
    padding: 0;
}

.merry-section-heading img {
    display: block;
    width: auto;
    max-width: min(100%, 720px);
    height: clamp(60px, 8vw, 90px);
    object-fit: contain;
}

.merry-categories {
    position: relative;
    padding: 1.25rem 0 2rem;
    background: url("/images/merry-printmas/assets/bg-paper-white-tile.webp") repeat, #fff;
    color: #141418;
    overflow: hidden;
}

.merry-categories::before {
    content: "";
    position: absolute;
    right: 0;
    top: 2rem;
    width: min(220px, 40vw);
    height: 220px;
    pointer-events: none;
    background: url("/images/merry-printmas/assets/decor-splatter-red.webp") center / contain no-repeat;
    opacity: .75;
    z-index: 0;
}

.merry-categories .container-xl {
    position: relative;
    z-index: 1;
}

.merry-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

@media (min-width: 768px) {
    .merry-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .merry-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.merry-category-card {
    display: block;
    text-decoration: none;
    transition: transform .15s ease;
}

.merry-category-card:hover { transform: translateY(-4px); }

.merry-category-card img {
    display: block;
    width: 100%;
    height: auto;
}

.merry-supplies {
    position: relative;
    padding: 1.25rem 0 2rem;
    background: url("/images/merry-printmas/assets/bg-band-navy-splatter.webp") center top / cover no-repeat, #0a1f52;
    color: #fff;
    border: 0;
    overflow: hidden;
}

.merry-supplies::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: min(260px, 38vw);
    height: 220px;
    pointer-events: none;
    background: url("/images/merry-printmas/assets/decor-splatter-navy.webp") center / contain no-repeat;
    opacity: .55;
    z-index: 0;
}

.merry-supplies::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2rem;
    width: min(220px, 34vw);
    height: 200px;
    pointer-events: none;
    background: url("/images/merry-printmas/assets/decor-splatter-red.webp") center / contain no-repeat;
    opacity: .45;
    z-index: 0;
}

.merry-supplies .container-xl {
    position: relative;
    z-index: 1;
}

.merry-supply-grid .merry-supply-card {
    background: url("/images/merry-printmas/assets/card-frame-rough-white.webp") center / 100% 100% no-repeat;
    padding: 1.35rem 1.1rem 1.5rem;
    border: 0;
    box-shadow: none;
}

.merry-supply-btn {
    display: inline-block;
    width: 273px;
    max-width: 100%;
    height: 68px;
    margin-top: .65rem;
    background: url("/images/merry-printmas/assets/btn-shop-supplies.webp") center / contain no-repeat;
}

.merry-view-all {
    text-align: center;
    margin: 1.25rem 0 0;
}

.merry-printfarm {
    position: relative;
    background: url("/images/merry-printmas/assets/bg-paper-white-tile.webp") repeat, #fff;
    color: #141418;
    padding: 1.25rem 0 2rem;
    overflow: hidden;
}

.merry-printfarm::before,
.merry-printfarm::after {
    content: none;
}

.merry-printfarm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: center;
}

.merry-printfarm-devices .device-pair {
    justify-content: center;
}

.merry-printfarm .device-screen {
    border: none;
    background: #0a0a0a;
}

.merry-printfarm .device-screen.p-0 {
    padding: 0;
}

.merry-printfarm .phone .device-screen img.printfarm-phone-shot {
    object-fit: cover;
    object-position: top center;
}

.merry-printfarm-copy {
    min-width: 0;
}

.merry-printfarm-lead {
    font-size: 1.05rem;
}

.merry-printfarm .feature-icon {
    width: 40px;
    height: 40px;
    background: url("/images/merry-printmas/assets/icon-monitor.webp") center / contain no-repeat;
}

.merry-printfarm .feature-list li:nth-child(2) .feature-icon {
    background-image: url("/images/merry-printmas/assets/icon-queue.webp");
}

.merry-printfarm .feature-list li:nth-child(3) .feature-icon {
    background-image: url("/images/merry-printmas/assets/icon-alert.webp");
}

.merry-printfarm .feature-list li:nth-child(1) .feature-icon svg,
.merry-printfarm .feature-list li:nth-child(2) .feature-icon svg,
.merry-printfarm .feature-list li:nth-child(3) .feature-icon svg {
    opacity: 0;
}

.merry-trial-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin: 1rem 0 1.1rem;
    max-width: 36rem;
}

.merry-trial-badge {
    display: block;
    width: min(100%, 380px);
    height: auto;
}

.merry-trial-copy {
    margin: 0;
    font-size: .98rem;
    line-height: 1.45;
    color: #141418;
}

.merry-printfarm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    align-items: center;
}

.merry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .35rem 1.75rem;
    border: 0;
    text-decoration: none;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .02em;
    color: #fff;
    background: transparent center / 100% 100% no-repeat;
}

.merry-btn-red {
    min-width: min(100%, 320px);
    background-image: url("/images/merry-printmas/assets/btn-blank-red.webp");
}

.merry-btn-navy {
    min-width: min(100%, 220px);
    background-image: url("/images/merry-printmas/assets/btn-blank-navy.webp");
}

.merry-btn:hover {
    color: #fff;
    opacity: .92;
    transform: translateY(-1px);
}

.merry-bestsellers.home-bestsellers {
    padding: 1.25rem 0 clamp(1.75rem, 4vw, 2.5rem);
    background: linear-gradient(180deg, #fff 0%, #fff 8%, #0a1f52 8%, #0a1f52 100%);
    color: #fff;
}

.merry-bestsellers.home-bestsellers::before,
.merry-bestsellers.home-bestsellers::after {
    content: none;
}

.merry-bestsellers .merry-section-heading {
    margin-bottom: 1.1rem;
}

.merry-bestsellers .home-bestsellers-shop-all .btn-primary {
    background: transparent;
    border: 0;
    min-width: min(100%, 220px);
    min-height: 52px;
    background-image: url("/images/merry-printmas/assets/btn-blank-red.webp");
    background-size: 100% 100%;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
}

.merry-bestsellers .home-bestsellers-shop-all .btn-primary:hover {
    opacity: .92;
    background-color: transparent;
    border-color: transparent;
}

.merry-shop-all-band {
    position: relative;
    background: #8c0814;
    color: #fff;
    text-align: center;
    padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(2.75rem, 6.5vw, 4rem);
    margin: 0;
}

.merry-shop-all-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.merry-shop-all-band__heading {
    margin: 0;
    max-width: 22rem;
    font-family: Outfit, "Trebuchet MS", sans-serif;
    font-weight: 800;
    font-size: clamp(1.125rem, 2.6vw, 1.625rem);
    line-height: 1.28;
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.merry-shop-all-band__cta {
    margin: 0;
}

.merry-shop-all-band__cta .merry-btn-red {
    min-width: min(100%, 240px);
    min-height: 52px;
    background-image: url("/images/merry-printmas/assets/btn-blank-red.webp");
    background-size: 100% 100%;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
}

.merry-shop-all-band__snow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(36px, 5vw, 52px);
    background-image: url("/images/merry-printmas/assets/decor-snow-ridge.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    pointer-events: none;
}

.is-storefront-home .footer-edge {
    display: none;
}

.is-storefront-home .paper-section::before,
.is-storefront-home .supply-section::before,
.is-storefront-home .printfarm::after {
    content: none;
}

.is-storefront-home .site-footer-shell {
    margin-top: 0;
}

@media (max-width: 991px) {
    .hero-inner { min-height: clamp(220px, 40vw, 520px); padding-bottom: clamp(1rem, 3vw, 1.75rem); }
    .hero {
        min-height: clamp(360px, 88vw, 720px);
        background-position: 50% 32%;
        padding-top: clamp(112px, 24vw, 148px);
        padding-bottom: clamp(1.25rem, 4vw, 2.25rem);
    }
    .is-storefront-home .hero.merry-hero-home {
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .is-storefront-home .nav-toggle {
        margin-top: .35rem;
    }

    /* Keep text links in mobile drawer; icons stay in the red pill (overrides storefront .primary-nav { display: none }). */
    .is-storefront-home .primary-nav.primary-nav-with-tools {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: .25rem;
        margin-left: .35rem;
        padding: 10px 12px;
    }

    .is-storefront-home .primary-nav.primary-nav-with-tools > a {
        display: none;
    }

    .is-storefront-home .primary-nav.primary-nav-with-tools .header-tools {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    .merry-printfarm-grid {
        grid-template-columns: 1fr;
    }
    .merry-printfarm-devices {
        order: 1;
    }
    .merry-printfarm-copy {
        order: 2;
    }
    .merry-section-heading img {
        height: clamp(56px, 14vw, 72px);
    }
}

@media (max-width: 767px) {
    /* Merry home phones: solid navy/red bar above the hero (desktop keeps transparent overlay). */
    .is-storefront-home .site-header.is-overlay {
        position: sticky;
        top: 0;
        z-index: var(--header-z, 100);
        background: linear-gradient(180deg, #0a1628 0%, #071428 92%);
        border-bottom: 3px solid #8c0814;
        backdrop-filter: none;
    }

    .is-storefront-home .site-header.is-overlay .header-bar {
        align-items: center;
        min-height: 64px;
        padding-top: 0;
    }

    .is-storefront-home .site-header.is-overlay .brand img {
        height: 64px;
        margin-top: 0;
    }

    .is-storefront-home .site-header.is-overlay .primary-nav,
    .is-storefront-home .site-header.is-overlay .primary-nav .header-tools {
        margin-top: 0;
    }

    .is-storefront-home .site-header.is-overlay .nav-toggle {
        margin-top: 0;
        color: #fff;
        border-color: rgb(255 255 255 / 35%);
    }

    .is-storefront-home .hero.merry-hero-home {
        padding-top: 0;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: clamp(380px, 118vw, 640px);
        background-position: 50% 30%;
        padding-top: clamp(100px, 26vw, 132px);
        padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
    }
    .is-storefront-home .hero.merry-hero-home {
        min-height: 0;
        padding: 0;
        margin: 0;
    }
    .hero-inner { min-height: clamp(200px, 52vw, 420px); }
    .merry-category-grid { gap: .75rem; }
    .merry-btn {
        width: 100%;
        max-width: 100%;
    }
    .merry-divider {
        height: clamp(40px, 11vw, 64px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .merry-category-card,
    .merry-btn { transition: none; transform: none; }
}

/* Cart and inner pages: brush paint titles must stay readable on the black brush image. */
body.skin-christmas .brush-title,
body.skin-christmas .stamp-title {
    color: #fff8f0;
    text-shadow:
        0 2px 4px rgb(0 0 0 / 55%),
        0 0 1px rgb(140 8 20 / 35%);
}

body.skin-christmas .cart-page__title.brush-title.cart-page__title--holiday {
    /* .cart-page__title sets navy; holiday cart keeps the marker brush with cream type. */
    font-weight: 400;
    font-size: clamp(1.65rem, 3.8vw, 2.4rem);
    margin-bottom: .85rem;
}