/* ═══ แกลเลอรีรูปสินค้าหน้า configurator — ไม่มีสคริปต์ (มติ 355 · 29 ก.ย. 2569) ═══

   ⚠⚠ กลไก: ปุ่มเลือก (radio) ซ่อนไว้ · รูปเล็กเป็น <label> ของปุ่ม · ปุ่มที่ติ๊กอยู่เปิดรูปใหญ่ช่องเดียวกัน
   ⚠ กฎเขียนไว้ 12 ช่อง — `Product::galleryMedia()` ตัดที่ 12 · เพิ่มเกินต้องเพิ่มกฎที่นี่ด้วย
   ⚠ ปุ่มเลือกซ่อนด้วยการย่อ ไม่ใช่ display:none — ไม่งั้นกดลูกศรเลื่อนรูปด้วยแป้นพิมพ์ไม่ได้ */

.pc-media-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pc-media-slide { display: none; }
.pc-media-usage { margin: 6px 0 0; font-size: 13px; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 4px 8px; text-align: center; }
.pc-media-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pc-media-thumb { display: block; width: 64px; height: 64px; padding: 3px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.pc-media .pc-media-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pc-media-thumb:hover { border-color: #9ca3af; }

.pc-media-pick:nth-of-type(1):checked ~ .pc-media-stage .pc-media-slide:nth-child(1) { display: block; }
.pc-media-pick:nth-of-type(1):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(1) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(1):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(1) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(2):checked ~ .pc-media-stage .pc-media-slide:nth-child(2) { display: block; }
.pc-media-pick:nth-of-type(2):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(2) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(2):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(2) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(3):checked ~ .pc-media-stage .pc-media-slide:nth-child(3) { display: block; }
.pc-media-pick:nth-of-type(3):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(3) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(3):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(3) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(4):checked ~ .pc-media-stage .pc-media-slide:nth-child(4) { display: block; }
.pc-media-pick:nth-of-type(4):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(4) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(4):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(4) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(5):checked ~ .pc-media-stage .pc-media-slide:nth-child(5) { display: block; }
.pc-media-pick:nth-of-type(5):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(5) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(5):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(5) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(6):checked ~ .pc-media-stage .pc-media-slide:nth-child(6) { display: block; }
.pc-media-pick:nth-of-type(6):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(6) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(6):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(6) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(7):checked ~ .pc-media-stage .pc-media-slide:nth-child(7) { display: block; }
.pc-media-pick:nth-of-type(7):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(7) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(7):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(7) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(8):checked ~ .pc-media-stage .pc-media-slide:nth-child(8) { display: block; }
.pc-media-pick:nth-of-type(8):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(8) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(8):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(8) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(9):checked ~ .pc-media-stage .pc-media-slide:nth-child(9) { display: block; }
.pc-media-pick:nth-of-type(9):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(9) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(9):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(9) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(10):checked ~ .pc-media-stage .pc-media-slide:nth-child(10) { display: block; }
.pc-media-pick:nth-of-type(10):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(10) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(10):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(10) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(11):checked ~ .pc-media-stage .pc-media-slide:nth-child(11) { display: block; }
.pc-media-pick:nth-of-type(11):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(11) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(11):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(11) { outline: 2px solid #1447c4; outline-offset: 2px; }
.pc-media-pick:nth-of-type(12):checked ~ .pc-media-stage .pc-media-slide:nth-child(12) { display: block; }
.pc-media-pick:nth-of-type(12):checked ~ .pc-media-thumbs .pc-media-thumb:nth-child(12) { border-color: var(--yellow, #ffd525); box-shadow: 0 0 0 1px var(--yellow, #ffd525); }
.pc-media-pick:nth-of-type(12):focus-visible ~ .pc-media-thumbs .pc-media-thumb:nth-child(12) { outline: 2px solid #1447c4; outline-offset: 2px; }

/* ═══ แท็บ «รูปถ่าย / สเปคสินค้า» — ไม่มีสคริปต์ (มติ 356 · 29 ก.ย. 2569) ═══
   ⚠ กลไกเดียวกับแถวรูปเล็กข้างบน: radio ซ่อน + label เป็นหัวแท็บ
   ⚠⚠ ตำแหน่งในตารางของหน้า: `.pc-tabs` แทน `.pc-media` ทุกช่วงจอ (ดู `configurator-compact.css`)
      กล่องรูปที่อยู่ข้างในจึงไม่ต้องจัดตำแหน่งเองแล้ว */
.profile-configurator .pc-tabs { grid-column: 2; grid-row: 1; min-width: 0; }
@media (max-width: 1050px) and (min-width: 651px) { .profile-configurator .pc-tabs { grid-column: 2; grid-row: 2; } }
.pc-tab-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pc-tab-bar { display: flex; gap: 4px; margin-bottom: -1px; }
.pc-tab { padding: 8px 16px; min-height: 40px; border: 1px solid #d1d5db; border-bottom: 0; border-radius: 8px 8px 0 0; background: #f3f4f6; color: #4b5563; font-weight: 600; cursor: pointer; }
.pc-tab-panel { display: none; }
.pc-tab-pick:nth-of-type(1):checked ~ .pc-tab-panel-photo,
.pc-tab-pick:nth-of-type(2):checked ~ .pc-tab-panel-spec { display: block; }
.pc-tab-pick:nth-of-type(1):checked ~ .pc-tab-bar .pc-tab:nth-child(1),
.pc-tab-pick:nth-of-type(2):checked ~ .pc-tab-bar .pc-tab:nth-child(2) { background: #fff; color: var(--ink, #111); border-top: 3px solid var(--yellow, #ffd525); }
.pc-tab-pick:nth-of-type(1):focus-visible ~ .pc-tab-bar .pc-tab:nth-child(1),
.pc-tab-pick:nth-of-type(2):focus-visible ~ .pc-tab-bar .pc-tab:nth-child(2) { outline: 2px solid #1447c4; outline-offset: 2px; }
.profile-configurator .pc-tabs .pc-media { border-top-left-radius: 0; }
.pc-tab-panel-spec { padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 0 8px 8px 8px; background: #fff; }
.pc-product-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin: 0; }
.pc-product-spec dt, .pc-product-spec dd { margin: 0; padding: 6px 0; border-bottom: 1px solid #e5e7eb; min-width: 0; }
.pc-product-spec dt { color: #4b5563; }
.pc-product-spec dd { padding-left: 12px; text-align: right; font-weight: 600; }
