/* มติ 852 — แบนเนอร์แท็บที่ 4 «Shop Tour» + ปุ่ม «เดินดูร้าน AIC» สีเหลือง
   ⚠ โหลดหลัง home-hero.css (กฎจอ 1101–1450 ต้องทับของจอกว้าง) · home-hero.css ห้ามมีกฎนอกจอกว้าง (UiHomeHeroTest) จึงแยกไฟล์ */
.hero[data-hero=tour] { background: #eef2f7; }
.hero[data-hero=tour] .hero-copy { color: var(--ink); }
.hero[data-hero=tour] h1 span { color: #795900; }
.hero[data-hero=tour] .art-caption { display: none; }
/* ⚠ รูปเฉพาะจอแคบ — จอกว้างใช้ขนาดใน home-hero.css (ไฟล์นี้โหลดทีหลัง ถ้าไม่ครอบไว้จะทับ) */
.hero[data-hero=tour] .hero-detail { opacity: 1; mask-image: none; border-radius: 14px; }
@media (max-width: 1100px) { .hero[data-hero=tour] .hero-detail { width: 100%; height: 88%; } }

/* ปุ่มเหลืองให้เด่นกว่าปุ่มอื่นในคอลัมน์ขวา (ไม่ใช้รูปเป็นพื้น — ปุ่มเล็ก ดูไม่ออก) */
.quick-button[data-slot=tour], .quick-button[data-demo=tour] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 700; }
.quick-button[data-slot=tour]:hover, .quick-button[data-slot=tour]:focus-visible { filter: brightness(.96); }

/* จอ 1101–1450 ที่ว่างระหว่างมาสคอตกับขอบแบนเนอร์แคบ วาง 4 ปุ่มแถวเดียวไม่พอ → สองแถว ชิดขวา · รูปโต๊ะ/รูปร้านยกขึ้นให้พ้น */
@media (min-width: 1101px) and (max-width: 1450px) {
  .hero-switch { max-width: 205px; flex-wrap: wrap; justify-content: flex-end; }
  .hero[data-hero=frame] .hero-detail { bottom: 92px; height: calc(100% - 110px); }   /* มติ 853 — Shop Tour บนจอกว้างใช้รูปพื้นหลังแทนรูปเล็กแล้ว */
}