/* Promotional Product visual variant for the shared ACF-driven product template. */
html body.single-ys_product #primary.ys-product-page.ys-promotional-theme {
    --ys-navy: #123a63;
    --ys-navy-2: #245c91;
    --ys-gold: #d5a63c;
    --ys-gold-dark: #aa7b1f;
    --ys-cream: #f5f7fa;
    --ys-paper: #f8fafc;
    --ys-paper-2: #e8eef5;
    --ys-paper-3: #dce5ee;
    --ys-text: #263746;
    --ys-text-soft: #5b6875;
    --ys-border: rgba(30, 79, 131, .20);
    background: #eef3f7 !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero {
    background-color: #eee9df !important;
    background-image: var(--ys-hero-background) !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

@media (min-width: 768px) {
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-content {
        top: 49% !important;
        left: 8.5% !important;
        width: 41% !important;
        max-width: 760px !important;
        transform: translateY(-50%) !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-title,
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-short-description {
        max-width: 100% !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero .ys-product-button {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero .ys-product-hero-image {
        top: 12.33% !important;
        right: auto !important;
        bottom: auto !important;
        left: 62.34% !important;
        width: 27.87% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        transform: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-mount {
        width: 100% !important;
        height: 100% !important;
        filter: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-window {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-main-product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-frame {
        display: none !important;
    }
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-eyebrow {
    color: #b17e19 !important;
    letter-spacing: .09em !important;
    text-transform: none !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-title,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-short-description {
    color: #173e66 !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-short-description {
    max-width: 720px !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-button,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-form-submit {
    color: #fff !important;
    border-color: #174f83 !important;
    background: linear-gradient(180deg, #2b6ca7 0%, #174f83 100%) !important;
    box-shadow: 0 10px 24px rgba(18, 58, 99, .22) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-mount {
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 24px 56px rgba(18, 58, 99, .20) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-main-product-image {
    object-fit: contain !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-anchor-nav {
    margin-top: 0 !important;
    background: #eef3f7 !important;
    border-color: rgba(30, 79, 131, .22) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero::after {
    height: 24px !important;
    background: linear-gradient(to bottom, rgba(238, 243, 247, 0), #eef3f7) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-anchor-nav a:hover,
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-anchor-nav a:focus,
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-anchor-nav a.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, #2b6ca7, #174f83) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-promotional-paper,
html body.single-ys_product #primary.ys-promotional-theme .ys-promotional-paper > .ys-tourism-section,
html body.single-ys_product #primary.ys-promotional-theme .ys-promotional-paper > .ys-product-cta,
html body.single-ys_product #primary.ys-promotional-theme .ys-promotional-paper > .ys-product-inquiry-section,
html body.single-ys_product #primary.ys-promotional-theme #gallery.ys-product-gallery-section {
    background-color: #f3f6f9 !important;
    background-image:
        linear-gradient(rgba(248, 250, 252, .90), rgba(248, 250, 252, .90)),
        var(--ys-decor-paper) !important;
    background-repeat: repeat !important;
    background-size: 720px auto !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-promotional-paper::before {
    border-color: rgba(30, 79, 131, .18) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-section-heading h2,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-cta-copy h2,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-contact-card h2,
html body.single-ys_product #primary.ys-promotional-theme .ys-form-heading h2 {
    color: #173e66 !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-cityline {
    height: 104px !important;
    opacity: 1 !important;
    background-image: url("assets/promotional/motifs/promotional-product-ribbon.svg?v=20260919-6") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 98% auto !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-overview-card,
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-ticket,
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-spec-table,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-gallery-frame,
html body.single-ys_product #primary.ys-promotional-theme .ys-buying-guide-card,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-contact-card,
html body.single-ys_product #primary.ys-promotional-theme .ys-product-form-card {
    border-color: rgba(30, 79, 131, .20) !important;
    background-color: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 12px 30px rgba(18, 58, 99, .08) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-round-icon,
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-table-icon,
html body.single-ys_product #primary.ys-promotional-theme .ys-contact-icon {
    background: linear-gradient(180deg, #4d7eaa 0%, #245c91 100%) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-step-number {
    color: #fff !important;
    border-color: #174f83 !important;
    background: linear-gradient(180deg, #2b6ca7 0%, #174f83 100%) !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step::before {
    display: none !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(1) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-01-mug.webp?v=20260919-6") !important; }
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(2) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-02-tote.webp?v=20260919-6") !important; }
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(3) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-03-bottle.webp?v=20260919-6") !important; }
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(4) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-04-tshirt.webp?v=20260919-6") !important; }
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(5) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-05-box.webp?v=20260919-6") !important; }
html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-step:nth-child(6) .ys-v10-order-ticket::before { background-image: url("assets/promotional/order/promo-order-06-umbrella.webp?v=20260919-6") !important; }

html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-ticket::before {
    width: 116px !important;
    height: 116px !important;
    opacity: 1 !important;
}

html body.single-ys_product #primary.ys-promotional-theme #how-to-order::after {
    display: none !important;
    content: none !important;
}

html body.single-ys_product #primary.ys-promotional-theme #gallery.ys-product-gallery-section::before,
html body.single-ys_product #primary.ys-promotional-theme #gallery.ys-product-gallery-section::after {
    display: none !important;
    content: none !important;
}

html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-v10-section-heading {
    position: relative !important;
}

html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-promotional-gallery-heading-decor {
    position: absolute;
    top: 50%;
    left: 0;
    width: 155px;
    height: 118px;
    pointer-events: none;
    transform: translateY(-54%);
    opacity: .76;
    background: url("assets/promotional/motifs/promotional-gallery-cluster.svg?v=20260919-5") center / contain no-repeat;
}

html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-v10-section-heading > h2,
html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-v10-section-heading > p {
    padding-right: 165px !important;
    padding-left: 165px !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-product-cta-inner {
    border-color: rgba(30, 79, 131, .25) !important;
    background:
        radial-gradient(circle at 16% 20%, rgba(36, 92, 145, .12), transparent 31%),
        radial-gradient(circle at 84% 72%, rgba(213, 166, 60, .12), transparent 31%),
        #edf3f8 !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-cta-visual img {
    width: min(100%, 320px) !important;
    max-height: 190px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-cta-visual--left {
    justify-content: flex-end !important;
    padding-right: 24px !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-cta-visual--right {
    justify-content: flex-start !important;
    padding-left: 24px !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-airmail-stripes {
    border-image: repeating-linear-gradient(135deg, #245c91 0 8px, #f2f6f9 8px 16px, #d5a63c 16px 24px, #f2f6f9 24px 32px) 12 !important;
    opacity: .78 !important;
}

html body.single-ys_product #primary.ys-promotional-theme .ys-contact-stamp,
html body.single-ys_product #primary.ys-promotional-theme .ys-contact-round-stamp {
    color: rgba(30, 79, 131, .58) !important;
    border-color: rgba(30, 79, 131, .36) !important;
}

html body.single-ys_product #primary.ys-promotional-theme #ys-product-inquiry .ys-product-contact-card {
    padding-bottom: 92px !important;
}

html body.single-ys_product #primary.ys-promotional-theme #ys-product-inquiry .ys-product-contact-card .ys-contact-round-stamp {
    right: 16px !important;
    bottom: 12px !important;
    left: auto !important;
    width: 130px !important;
    height: 70px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: .78 !important;
    transform: none !important;
    background: url("assets/promotional/motifs/promotional-contact-cluster.svg?v=20260919-7") center / contain no-repeat !important;
}

@media (max-width: 767px) {
    html body.single-ys_product #primary.ys-promotional-theme .ys-v10-order-ticket::before {
        right: 5px !important;
        bottom: 5px !important;
        width: 68px !important;
        height: 72px !important;
        opacity: .88 !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero {
        background-color: #f5efe5 !important;
        background-image: none !important;
    }
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-content {
        text-align: left !important;
    }
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero .ys-product-button {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-window {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        border: 5px solid #c99a3a !important;
        border-radius: 3px !important;
        background: #fff !important;
        box-shadow: 0 12px 30px rgba(18,58,99,.16) !important;
    }
    html body.single-ys_product #primary.ys-promotional-theme .ys-hero-photo-frame { display: none !important; }
    html body.single-ys_product #primary.ys-promotional-theme .ys-v10-cityline { height: 82px !important; }
    html body.single-ys_product #primary.ys-promotional-theme .ys-cta-visual img { max-height: 150px !important; }
    html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-promotional-gallery-heading-decor { display: none !important; }
    html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-v10-section-heading > h2,
    html body.single-ys_product #primary.ys-promotional-theme #gallery .ys-v10-section-heading > p { padding-right: 0 !important; padding-left: 0 !important; }
    html body.single-ys_product #primary.ys-promotional-theme #ys-product-inquiry .ys-product-contact-card { padding-bottom: 92px !important; }
    html body.single-ys_product #primary.ys-promotional-theme #ys-product-inquiry .ys-product-contact-card .ys-contact-round-stamp {
        right: 50% !important;
        bottom: 14px !important;
        left: auto !important;
        width: 112px !important;
        height: 60px !important;
        transform: translateX(50%) !important;
    }
}

/* Final promotional Hero geometry: the background supplies two straight frames.
   Remove the shared tourism postage mask and let the 1:1 image meet the gold opening. */
@media (min-width: 768px) {
    html body.single-ys_product #primary.ys-product-page.ys-promotional-theme .ys-product-hero .ys-product-hero-image {
        /* Move the complete frame and image as one component so its lower
           edge sits on the showroom pedestal built into the Hero background. */
        top: auto !important;
        right: auto !important;
        /* Anchor the entire gold frame to the showroom pedestal rather than
           positioning it from the top; this keeps the frame and base fused
           at every desktop width that uses the fixed Hero aspect ratio. */
        bottom: 24.7% !important;
        left: 59.1% !important;
        width: 34% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: 9px solid #c69b52 !important;
        outline: 2px solid #7f5727 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        box-shadow: inset 0 0 0 2px #f7df9b, 0 18px 38px rgba(18, 40, 67, .28) !important;
        filter: none !important;
        transform: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-hero-photo-mount,
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-hero-photo-window {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-main-product-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

@media (max-width: 767px) {
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero .ys-product-hero-image {
        width: calc(100% - 40px) !important;
        max-width: 420px !important;
        height: auto !important;
        margin: 22px auto 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 1 / 1 !important;
        border: 2px solid #b98a3d !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background: transparent !important;
        box-shadow: 0 10px 22px rgba(18, 58, 99, .13) !important;
        filter: none !important;
        transform: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-hero-photo-mount,
    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-hero-photo-window {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    html body.single-ys_product #primary.ys-promotional-theme .ys-product-hero-image .ys-main-product-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}
