/* =====================================================
   BASE & THEME VARS
   - ใช้ตัวแปรควบคุมขนาด/ระยะ เพื่อรีสปอนส์ง่ายขึ้น
===================================================== */
    .wt-apppromo {
        position: relative;
        isolation: isolate;
        /* พื้นหลังไล่สี + safe-area สำหรับ iOS */
        background:
            linear-gradient(180deg, var(--from) 0%, var(--from) 55%, var(--to) 55%, var(--to) 100%);
        padding:
            calc(env(safe-area-inset-top, 0px) + var(--ticker-h) + clamp(20px, 4vw, 36px)) clamp(12px, 2.2vw, 24px) calc(env(safe-area-inset-bottom, 0px) + clamp(24px, 4.5vw, 48px));
        overflow: clip;

        /* ตัวแปร layout หลัก (ค่าเริ่มต้น desktop) */
        --gap: clamp(12px, 3vw, 36px);
        --grid-left: 1.2fr;
        --grid-right: .8fr;
        --container-max: 1280px;

        /* Phone sizing/position (สัมพันธ์กับเส้นทอง) */
        --phone-w: min(90%, 480px);
        --phone-top: calc(-0.55 * var(--ticker-h));
        /* ดึงขึ้นให้ทับเส้นทองโดยอิงจากความสูงเส้น */
        --phone-raise: -100px;
        /* fine-tune เพิ่มเติมเหนือ var(--phone-top) */
    }

    /* =====================================================
   GOLD TICKER (Marquee)
===================================================== */
    .info-banner {
        position: absolute;
        inset: 0 0 auto 0;
        height: var(--ticker-h);
        background: linear-gradient(90deg, #d4af37, #f8e08e, #d4af37);
        border-block: 3px solid #b8860b;
        box-shadow: 0 4px 15px rgba(0, 0, 0, .25);
        overflow: hidden;
        display: grid;
        align-items: center;
        z-index: 1;
    }

    .info-banner::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -50%;
        width: 50%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .6), transparent);
        animation: shimmer 6s infinite;
        pointer-events: none;
    }

    @keyframes shimmer {
        0% {
            left: -50%
        }

        100% {
            left: 150%
        }
    }

    .marquee {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .marquee__group {
        position: absolute;
        inset: 0 auto 0 0;
        display: inline-flex;
        align-items: center;
        gap: 20px;
        padding-inline: 12px;
        width: max-content;
        height: 100%;
        font-family: 'Brunson', sans-serif;
        font-size: 2.5rem;
        letter-spacing: 3px;
        white-space: nowrap;
        text-transform: lowercase;
        will-change: transform;
        animation: ticker var(--speed) linear infinite;
    }

    .marquee__group * {
        flex-shrink: 0
    }

    .marquee__group--a {
        --start: 0%;
        transform: translateX(var(--start))
    }

    .marquee__group--b {
        --start: 100%;
        transform: translateX(var(--start))
    }

    @keyframes ticker {
        from {
            transform: translateX(var(--start))
        }

        to {
            transform: translateX(calc(-100% + var(--start)))
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee__group {
            animation: none
        }
    }

    .info-banner .text {
        text-shadow: 2px 2px 6px rgba(0, 0, 0, .4)
    }

    .info-banner .text.white {
        color: #fff
    }

    .info-banner .text.red {
        color: #b22222;
        text-shadow: 2px 2px 8px rgba(255, 215, 0, .8)
    }

    .info-banner .logo {
        height: 55px;
        width: 55px;
        border-radius: 50%;
        object-fit: cover;
        background: #b22222;
        box-shadow: 0 0 12px rgba(212, 175, 55, .7);
        transition: transform .3s ease-in-out;
    }

    .info-banner .logo:hover {
        transform: scale(1.15) rotate(5deg)
    }

    /* =====================================================
   CONTENT GRID
===================================================== */
    .wt-apppromo__wrap {
        display: grid;
        grid-template-columns: var(--grid-left) var(--grid-right);
        gap: var(--gap);
        align-items: end;
        position: relative;
        z-index: 2;
        max-width: var(--container-max);
        margin-inline: auto;
    }

    .wt-eyebrow {
        font-weight: 500;
        margin: 0 0 .25rem 0;
        font-size: clamp(14px, 1.4vw, 18px);
        color: #222
    }

    .wt-title {
        margin: 0 0 .75rem 0;
        font-family: 'Brunson';
        font-size: clamp(28px, 4.2vw, 80px);
        font-weight: 500;
        color: #FFC600;
        letter-spacing: 1px
    }

    .wt-dishes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(12px, 2.2vw, 24px);
        align-items: end;
        margin: clamp(10px, 2.2vw, 18px) 0 clamp(10px, 2.8vw, 22px)
    }

    .dish {
        margin: 0
    }

    .dish img {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25))
    }

    .wt-store {
        display: flex;
        align-items: center;
        flex-wrap: wrap
    }

    .store-btn img {
        height: clamp(34px, 4.6vw, 70px);
        width: auto;
        display: block
    }

    .wt-caption {
        font-size: clamp(12px, 1.2vw, 16px);
        color: #333;
        margin-left: clamp(6px, 1vw, 10px)
    }

    /* =====================================================
   PHONE IMAGE (ซ้อนทับแถบทอง)
===================================================== */
    .phone-wrap {
        position: relative;
        width: var(--phone-w);
        margin-left: auto;
        margin-top: calc(var(--phone-top) + clamp(8px, 1.6vw, 18px));
        /* ดึงขึ้นทับเส้นทอง */
        z-index: 3;
        pointer-events: none;
    }

    .phone {
        position: relative;
        top: var(--phone-raise);
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)) drop-shadow(0 4px 10px rgba(0, 0, 0, .15));
        transform: translateZ(0);
    }

    /* =====================================================
   BREAKPOINTS — ปรับด้วยตัวแปร ลดการซ้ำโค้ด
===================================================== */
    @media (min-width: 1400px) {
        .wt-apppromo {
            --grid-left: 1.15fr;
            --grid-right: .85fr;
            --container-max: 1360px;
        }
    }

    @media (max-width: 1200px) {
        .marquee__group {
            font-size: 2.1rem;
            gap: 16px
        }

        .info-banner .logo {
            height: 48px;
            width: 48px
        }

        .wt-apppromo {
            --phone-w: min(78%, 450px);
            --phone-raise: -100px;
        }
    }

    /* Tablet landscape & down – คง 2 คอลัมน์แต่บีบกรอบรวม */
    @media (max-width: 992px) {
        .wt-apppromo {
            --ticker-h: 56px !important;
            --container-max: 920px;
            --gap: clamp(12px, 2vw, 24px);
            --phone-w: min(117%, 360px);
            --phone-raise: -90px;
        }

        .wt-title {
            font-size: clamp(28px, 5.4vw, 44px) !important
        }

        .wt-eyebrow {
            font-size: clamp(13px, 1.8vw, 16px) !important
        }

        .store-btn img {
            height: clamp(32px, 4.2vw, 44px) !important
        }

        .wt-caption {
            font-size: clamp(12px, 1.6vw, 14px) !important
        }
    }

    @media (max-width: 768px) {
        .wt-apppromo {
            --ticker-h: 50px !important;
            --container-max: 640px;
            --phone-w: min(123%, 360px);
            --phone-raise: -70px;
        }

        .marquee__group {
            font-size: 1.6rem;
            gap: 14px
        }

        .info-banner .logo {
            width: 42px;
            height: 42px
        }

        .wt-title {
            font-size: clamp(26px, 6.6vw, 38px) !important
        }

        .store-btn img {
            height: clamp(30px, 4.4vw, 40px) !important
        }
    }

    /* Mobile – ยังคง 2 คอลัมน์ แต่เริ่มเตรียมปรับระยะ */
    @media (max-width: 560px) {
        .wt-apppromo {
            --ticker-h: 46px !important;
            --container-max: 520px;
            --phone-w: min(120%, 320px);
            --phone-raise: -50px;
        }

        .marquee__group {
            font-size: 1.35rem;
            gap: 12px
        }

        .info-banner .logo {
            width: 36px;
            height: 36px
        }

        .store-btn img {
            height: 32px !important
        }

        .wt-caption {
            font-size: 12px !important
        }
    }

    /* XS – เปลี่ยนเป็น 1 คอลัมน์ เพื่อกันเบียดและล้น */
    @media (max-width: 480px) {
        .wt-apppromo__wrap {
            grid-template-columns: 1fr, 1fr;
            align-items: start;
        }

        .wt-apppromo__col--right {
            order: 0;
        }

        /* ดันโทรศัพท์ขึ้นไปใกล้เส้นทองก่อนข้อความ */
        .wt-apppromo {
            --phone-w: min(88vw, 185px);
            --phone-top: calc(-0.48 * var(--ticker-h));
            --gap: clamp(10px, 3vw, 16px);
        }

        .wt-dishes {
            grid-template-columns: 1fr 1fr
        }

        .store-btn img {
            height: 29px !important
        }

        .dish img {
            width: 120%
        }
    }

    @media (max-width: 479px) {
        .wt-apppromo {
            --ticker-h: 46px !important;
            --container-max: 520px;
            --phone-w: min(120%, 320px);
            --phone-raise: -42px;
        }

    }

    /* จอจิ๋วมาก */
    @media (max-width: 380px) {
        .wt-apppromo {
            --ticker-h: 42px !important;
            --container-max: 440px;
            --gap: clamp(8px, 2.5vw, 14px);
            --phone-w: min(94vw, 205px);
            --phone-top: calc(-0.50 * var(--ticker-h));
            --phone-raise: -45px;
        }

        .phone-wrap {
            left: -7%;
        }

        .marquee__group {
            font-size: 1.05rem;
            gap: 8px
        }

        .info-banner .logo {
            width: 32px;
            height: 32px
        }

        .wt-title {
            font-size: clamp(22px, 7.8vw, 30px) !important
        }

        .wt-dishes {
            grid-template-columns: 1fr 1fr;
            gap: 8px
        }

        .wt-store {
            gap: 8px
        }

        .store-btn img {
            height: 56px !important
        }

        /* ถ้าพื้นที่แนวตั้งยังแน่นมาก ให้เปิดใช้บรรทัดนี้ */
        /* .wt-caption{ display: none; } */
    }

    /* iPhone mini และต่ำกว่า */
    @media (max-width: 340px) {
        .wt-apppromo {
            --phone-w: min(96vw, 280px);
            --phone-raise: -43px;
            --gap: 10px;
        }

        .wt-dishes {
            grid-template-columns: 1fr 1;
        }

        .wt-dishes img {
            max-width: 113%;
            margin-inline: auto;
        }

        .store-btn img {
            height: 47px !important
        }

        .marquee__group {
            font-size: .98rem;
            gap: 8px
        }

        .phone {

            width: 65%;
        }
    }


    html,
    body {
        overflow-x: hidden
    }