/* หน้าปั๊มน้ำมัน: ภาพหน้าปั๊มจริง (ภาพปก) ในแผงรายละเอียด */
.st-cover { padding: 14px 14px 0; }
.st-cover .gallery-item { aspect-ratio: 16 / 9; border-radius: 16px; }
.st-cover .gallery-cap { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
.st-cover .gallery-cap .icon { width: 14px; height: 14px; }
.st-cover + .st-detail-head { padding-top: 12px; }
/* ช่องน้ำมัน: ราคาเป็นตัวหลัก สถานะจำหน่ายเป็นบรรทัดรอง */
.fuel-tile .fl small { margin-left: 3px; }
.fuel-tile .fp b { color: var(--text); font-family: var(--font-num, inherit); }

/* ===== หมุดปั๊มแบบโลโก้แบรนด์จริง (เหรียญเคลือบขาว + วงแหวนโลหะสีสถานะ + เงาพื้น) ===== */
.bpin-wrap { background: none !important; border: 0 !important; }
.bpin { position: relative; width: 40px; height: 56px; --ring: #94A3B8; --ring-d: color-mix(in srgb, var(--ring) 62%, #0B1220); --ring-l: color-mix(in srgb, var(--ring) 55%, #fff);
  transform-origin: 50% 52px; transition: transform .2s cubic-bezier(.2, .8, .2, 1.2); will-change: transform; }
.bpin.st-open { --ring: #10B981; }
.bpin.st-limited { --ring: #F59E0B; }
.bpin.st-closed { --ring: #EF4444; }
.bpin.st-unknown { --ring: #94A3B8; }
.bpin-head { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; padding: 3px; z-index: 2;
  background: conic-gradient(from 210deg, var(--ring-d), var(--ring) 18%, var(--ring-l) 30%, var(--ring) 42%, var(--ring-d) 62%, var(--ring) 82%, var(--ring-d));
  box-shadow: 0 7px 14px -5px rgba(2, 6, 23, .6), 0 2px 4px rgba(2, 6, 23, .35), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(0, 0, 0, .25); }
.bpin-disc { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fbfcfd 42%, #e6ebf1 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .95), inset 0 -3px 5px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .18); }
/* ขนาดคงที่ + !important: Leaflet ตั้ง width:auto ให้ <img> ในเลเยอร์หมุด (โลโก้ PNG ขยายเต็มขนาดจริงจนล้นวง) */
.bpin .bpin-disc img { width: 25px !important; height: 25px !important; max-width: none !important; object-fit: contain; filter: drop-shadow(0 1px .6px rgba(15, 23, 42, .28)); }
.bpin .bpin-disc .icon { width: 20px; height: 20px; color: #475569; }
.bpin-disc::after { content: ""; position: absolute; left: 14%; top: 5%; width: 72%; height: 40%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.bpin-tail { position: absolute; left: 50%; top: 33px; width: 15px; height: 15px; margin-left: -7.5px; z-index: 1; transform: rotate(45deg); border-radius: 2px 2px 4px 2px;
  background: linear-gradient(135deg, var(--ring-l), var(--ring) 45%, var(--ring-d)); box-shadow: 2px 2px 4px rgba(2, 6, 23, .35); }
.bpin-ground { position: absolute; left: 50%; top: 47px; width: 22px; height: 8px; margin-left: -11px; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(2, 6, 23, .5), rgba(2, 6, 23, .18) 45%, rgba(2, 6, 23, 0) 72%); }
.bpin.has-cr::after { content: "!"; position: absolute; top: -5px; right: -5px; z-index: 3; width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F87171, #DC2626); color: #fff; font: 800 11px/17px system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(2, 6, 23, .4); }
.leaflet-marker-icon.bpin-wrap:hover .bpin { transform: translateY(-3px) scale(1.08); }
.bpin.is-active { transform: scale(1.28); }
.bpin.is-active .bpin-head::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ring); animation: bpinPing 1.6s ease-out infinite; }
@keyframes bpinPing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bpin, .bpin.is-active .bpin-head::before { transition: none; animation: none; } }

/* ป้ายแบรนด์ในรายการ/แผงรายละเอียด: แผ่นป้ายขาวมีมิติ + โลโก้จริง */
.brand-badge.has-logo { position: relative; color: transparent; background: radial-gradient(circle at 30% 22%, #fff 0%, #f8fafc 48%, #e2e8f0 100%);
  box-shadow: 0 6px 14px -6px rgba(2, 6, 23, .45), 0 1px 2px rgba(2, 6, 23, .2), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -2px 4px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .1);
  display: grid; place-items: center; overflow: hidden; }
.brand-badge.has-logo::after { content: ""; position: absolute; left: 10%; top: 4%; width: 80%; height: 38%; border-radius: 50%; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); }
.brand-badge.has-logo img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 1px .6px rgba(15, 23, 42, .25)); }
.brand-badge.has-logo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--b); opacity: .9; }
.chip .chip-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }