/* ArtVerse — โลโก้ ไอคอน หมวดหมู่ แกลเลอรี ใบสมัครครีเอเตอร์ คืนสินค้า ธีม และกันบันทึกรูป
   ไฟล์นี้เป็นส่วนหนึ่งของ css/parts/*.css โหลดตามลำดับเลขหน้าไฟล์ (ลำดับมีผล: ไฟล์หลังทับไฟล์ก่อน) */

/* ============================================================
   โลโก้ ArtVerse ชุดเดียวทั้งเว็บ + ไอคอนเส้น (v27)
   ============================================================ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.av-logo{display:inline-flex!important;align-items:center;gap:9px!important;color:#161616;text-decoration:none;line-height:1;min-width:max-content;font-family:"Noto Sans Thai",system-ui,sans-serif!important;letter-spacing:0!important}
.av-logo:hover{color:#161616}
.av-logo:focus-visible{outline:2px solid #161616;outline-offset:4px;border-radius:10px}
.av-logo-mark{width:34px;height:34px;flex:none;display:block}
.av-logo-word{height:18px;width:auto;flex:none;display:block}
.av-logo-tag{margin-left:3px;padding:4px 8px;border-radius:6px;background:#161616;color:#FFD21F;font-size:11px;font-weight:800;line-height:1;white-space:nowrap}
body[data-page="creator"] .site-header .av-logo{color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.3))}
.admin-console-logo.av-logo,.artist-seller-logo.av-logo{font-size:inherit}
.chatroom-brand-bar.av-logo{gap:8px!important}
.chatroom-brand-bar .av-logo-mark{width:28px;height:28px}
.chatroom-brand-bar .av-logo-word{height:15px}
.artist-hero-logo.av-logo{margin-bottom:10px}
.artist-hero-logo .av-logo-mark{width:26px;height:26px}
.artist-hero-logo .av-logo-word{height:14px}
.shipping-label-logo.av-logo{gap:6px!important}
.shipping-label-logo .av-logo-mark{width:22px;height:22px}
.shipping-label-logo .av-logo-word{height:12px}
.auth-card-logo.av-logo{display:flex!important;justify-content:center;margin:0 auto 16px;width:max-content}
@media(max-width:760px){.av-logo-mark{width:30px;height:30px}
.av-logo-word{height:16px}
.av-logo-tag{font-size:10px;padding:3px 6px}}
@media(max-width:420px){.site-header .av-logo-word{height:14px}
.site-header .av-logo-mark{width:28px;height:28px}
.site-header .av-logo{gap:6px!important}
.artist-seller-logo .av-logo-tag{display:none}}
.ui-icon{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}
.artist-seller-nav-icon{font-size:19px}
.artist-seller-nav-group h2>span{font-size:19px}
.artist-seller-nav-group h2>i{font-size:14px;display:grid;place-items:center;color:#8a8f98}
.artist-invite-code-btn .ui-icon{font-size:16px;margin-right:2px}
.drawer-icon{display:inline-grid!important;place-items:center;font-size:19px!important;color:#667085}
.status-icon .ui-icon{font-size:25px}
.admin-nav-icon .ui-icon{font-size:16px}
.admin-console-v2 .metric-icon .ui-icon,.metric-icon .ui-icon{font-size:19px}
.admin-priority-icon .ui-icon{font-size:18px}
.admin-sidebar-shield{font-size:21px}
.admin-top-icon .ui-icon{font-size:18px}
.admin-logout-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.admin-logout-btn .ui-icon{font-size:15px}
/* หมวดหมู่ชุดเดียวทั้งเว็บ (v27) */
body[data-page="home"] .home-category-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
body[data-page="home"] .home-category-chips::-webkit-scrollbar{display:none}
body[data-page="home"] .home-category-chips .chip{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;font-size:11px;min-height:28px;padding:4px 12px;cursor:pointer}
.home-category-chips .chip small{font-size:.85em;font-weight:700;opacity:.6}
.home-category-chips .chip.active small{opacity:.85}
.home-category-chips .chip:focus-visible{outline:2px solid #2176ef;outline-offset:2px}
.reference-category-nav a.active{color:#161616;box-shadow:inset 0 -3px 0 #FFD21F}
body[data-page="home"] .reference-category-nav{justify-content:flex-start;gap:26px}
.home-category-empty{grid-column:1/-1;min-width:100%;padding:44px 20px;text-align:center;color:#667085;font-size:14px;border:1px dashed #d7d7d7;border-radius:14px;background:#fff}
.table-btn .ui-icon{font-size:14px;margin-right:2px}
.admin-note-banner .ui-icon,.admin-info-bar .ui-icon{font-size:16px;margin-right:4px}
/* แกลเลอรีรูปสินค้าหลายรูป (v27) */
.friendii-ref-thumbnails{overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.friendii-ref-thumbnails button{flex:0 0 auto;transition:border-color .15s}
.friendii-ref-thumbnails button:hover{border-color:#8a8a8a}
.friendii-ref-thumbnails button.active{border-color:#1f1f1f;box-shadow:inset 0 0 0 1px #1f1f1f}
.friendii-ref-thumbnails button:focus-visible{outline:2px solid #2176ef;outline-offset:2px}
.product-stage-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:1px solid #e3e1dc;border-radius:50%;background:rgba(255,255,255,.92);color:#1f1f1f;font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.product-stage-arrow.prev{left:14px}
.product-stage-arrow.next{right:14px}
.friendii-ref-image-stage:hover .product-stage-arrow,.product-stage-arrow:focus-visible{opacity:1}
.product-stage-counter{position:absolute;right:14px;bottom:14px;z-index:3;padding:4px 10px;border-radius:999px;background:rgba(20,20,20,.72);color:#fff;font-size:12px;font-weight:700}
@media(hover:none){.product-stage-arrow{opacity:1}}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lightbox-arrow:hover{background:rgba(255,255,255,.26)}
.lightbox-arrow.prev{left:24px}
.lightbox-arrow.next{right:24px}
.lightbox-counter-badge{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:700}
.av-logo .av-logo-tag,.admin-console-logo.av-logo .av-logo-tag{margin-left:3px;padding:4px 8px;border-radius:6px;background:#161616;color:#FFD21F;font-size:11px;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.admin-console-logo.av-logo .sr-only{padding:0;margin:-1px;background:none}
body[data-page="chat"] .chatroom-brand-bar.av-logo{display:none!important}
.auth-field-icon .ui-icon{font-size:18px}
/* สินค้าของร้านตัวเอง (v28) */
.friendii-ref-own-note{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #f1e3a8;background:#fffbea;margin:18px 0}
.friendii-ref-own-note p{margin:0;display:grid;gap:3px}
.friendii-ref-own-note strong{font-size:14px;color:#1f1f1f}
.friendii-ref-own-note span{font-size:12px;color:#6b6250;line-height:1.5}
.friendii-ref-own-note a{flex:none;padding:10px 16px;text-decoration:none;white-space:nowrap}
/* ===== v28: สถานะใบสมัครครีเอเตอร์ ===== */
body[data-page="creator-application"] .reference-category-nav{display:none}
.cap-page{max-width:760px;margin:0 auto;padding:18px 0 60px;display:grid;gap:16px}
.cap-breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:#667085}
.cap-breadcrumb a{color:#667085;text-decoration:none}
.cap-breadcrumb a:hover{color:#161616}
.cap-breadcrumb strong{color:#161616}
.cap-hero{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:16px;background:#fff;border:1px solid #ececec}
.cap-hero h1{margin:0 0 8px;font-size:24px;line-height:1.3;color:#161616}
.cap-hero p{margin:0;color:#475467;line-height:1.7;font-size:14px}
.cap-hero-icon{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:#f2f4f7;color:#344054}
.cap-hero.is-pending{background:#fffbea;border-color:#f6e2a0}
.cap-hero.is-pending .cap-hero-icon{background:#FFD21F;color:#161616}
.cap-hero.is-approved{background:#ecfdf3;border-color:#abefc6}
.cap-hero.is-approved .cap-hero-icon{background:#12b76a;color:#fff}
.cap-hero.is-rejected{background:#fef3f2;border-color:#fecdca}
.cap-hero.is-rejected .cap-hero-icon{background:#f04438;color:#fff}
.cap-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.cap-btn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 18px;border-radius:10px;border:1px solid #d0d5dd;background:#fff;color:#161616;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.cap-btn:hover{border-color:#161616}
.cap-btn:disabled{opacity:.6;cursor:wait}
.cap-btn.primary{background:#161616;border-color:#161616;color:#fff}
.cap-btn.primary:hover{background:#333}
.cap-btn:focus-visible,.cap-link:focus-visible,.cap-next a:focus-visible{outline:2px solid #2176ef;outline-offset:2px}
.cap-checked{font-size:12px;color:#8a6d1f}
.cap-reason{margin:6px 0 0;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid #fecdca}
.cap-reason strong{display:block;font-size:12px;color:#b42318;margin-bottom:4px}
.cap-reason p{color:#344054}
.cap-card{padding:22px 24px;border-radius:16px;background:#fff;border:1px solid #ececec}
.cap-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.cap-card-head h2{margin:0;font-size:16px;color:#161616}
.cap-card-head small{color:#98a2b3;font-size:12px}
.cap-link{font-size:13px;font-weight:700;color:#2176ef;text-decoration:none}
.cap-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}
.cap-step{display:grid;gap:10px;position:relative}
.cap-step:not(:last-child)::after{content:"";position:absolute;top:17px;left:44px;right:-4px;height:2px;background:#eaecf0}
.cap-step.is-done:not(:last-child)::after{background:#12b76a}
.cap-step-dot{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:800;background:#f2f4f7;color:#98a2b3;border:2px solid #fff;box-shadow:0 0 0 1px #eaecf0}
.cap-step.is-done .cap-step-dot{background:#12b76a;color:#fff;box-shadow:none}
.cap-step.is-current .cap-step-dot{background:#FFD21F;color:#161616;box-shadow:0 0 0 4px rgba(255,210,31,.25)}
.cap-step.is-failed .cap-step-dot{background:#f04438;color:#fff;box-shadow:none}
.cap-step strong{display:block;font-size:14px;color:#161616}
.cap-step small{display:block;margin-top:3px;font-size:12px;color:#667085;line-height:1.5}
.cap-step.is-todo strong{color:#98a2b3}
.cap-summary{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.cap-summary div{min-width:0}
.cap-summary .wide{grid-column:1/-1}
.cap-summary dt{font-size:12px;color:#667085;margin-bottom:3px}
.cap-summary dd{margin:0;font-size:14px;color:#161616;font-weight:600;overflow-wrap:anywhere}
.cap-summary a{color:#2176ef}
.cap-next{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cap-next a{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;border:1px solid #eaecf0;text-decoration:none;color:#161616;font-size:22px}
.cap-next a:hover{border-color:#161616}
.cap-next span{display:grid;gap:3px}
.cap-next strong{font-size:14px}
.cap-next small{font-size:12px;color:#667085}
@media(max-width:640px){.cap-hero{flex-direction:column;padding:20px}
.cap-steps,.cap-next,.cap-summary{grid-template-columns:1fr}
.cap-step{grid-template-columns:36px 1fr;align-items:start}
.cap-step:not(:last-child)::after{top:40px;left:17px;right:auto;width:2px;height:calc(100% - 22px)}}
.creator-app-pill{margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-style:normal;font-weight:700;background:#fff3c4;color:#8a6100}
.creator-app-pill.rejected{background:#fee4e2;color:#b42318}
.drawer-badge{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:11px;font-style:normal;font-weight:700;background:#fff3c4;color:#8a6100}
.drawer-badge.rejected{background:#fee4e2;color:#b42318}
/* การแจ้งเตือนในหน้าแอดมิน */
.admin-notif-wrap{position:relative}
.admin-notif-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:340px;max-height:440px;overflow:auto;background:#fff;border:1px solid #eaecf0;border-radius:14px;box-shadow:0 18px 40px rgba(16,24,40,.14)}
.admin-notif-panel[hidden]{display:none}
.admin-notif-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #f2f4f7;position:sticky;top:0;background:#fff}
.admin-notif-head strong{font-size:14px}
.admin-notif-head button{border:0;background:none;color:#2176ef;font-weight:700;font-size:12px;cursor:pointer}
.admin-notif-item{display:grid;gap:3px;padding:12px 16px;border-bottom:1px solid #f2f4f7;text-decoration:none;color:#344054}
.admin-notif-item:hover{background:#f9fafb}
.admin-notif-item.unread{background:#f5f9ff}
.admin-notif-item.unread strong::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2176ef;margin-right:6px;vertical-align:1px}
.admin-notif-item strong{font-size:13px;color:#161616}
.admin-notif-item span{font-size:12px;line-height:1.5}
.admin-notif-item small{font-size:11px;color:#98a2b3}
.admin-notif-empty{margin:0;padding:24px 16px;text-align:center;color:#98a2b3;font-size:13px}
/* คำขอคืนสินค้า/คืนเงิน */
.buyer-order-return-btn{min-width:90px;height:31px;padding:0 17px;border:1px solid #161616;border-radius:6px;background:#fff;color:#161616;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
.buyer-order-return-btn:hover{background:#161616;color:#fff}
.buyer-order-return-btn:focus-visible,.buyer-order-refund-btn:focus-visible{outline:2px solid #2176ef;outline-offset:2px}
@media(max-width:760px){.buyer-order-return-btn{flex:1}}
.order-request-reasons{border:0;margin:0;padding:0}
.order-request-reasons legend{font-size:13px;font-weight:700;margin-bottom:8px;color:#344054}
.order-request-detail{display:grid;gap:6px;margin-top:12px}
.order-request-detail span{font-size:13px;font-weight:700;color:#344054}
.order-request-detail em{color:#f04438;font-style:normal}
.order-request-detail textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;font-size:14px;resize:vertical}
.order-request-detail textarea:focus{outline:2px solid #2176ef;outline-offset:0;border-color:#2176ef}
.order-request-detail small{justify-self:end;font-size:11px;color:#98a2b3}
.issue-type-pill{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#eef4ff;color:#3538cd}
.issue-type-pill.return{background:#fdf2fa;color:#c11574}
.issue-type-pill.refund{background:#fff6ed;color:#c4320a}
/* ===== v30: สวิตช์ธีมสว่าง/มืด ===== */
.drawer-preferences .theme-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#f2f4f7;border:1px solid #e4e7ec;gap:0}
.drawer-preferences .theme-switch::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#ffffff;box-shadow:0 1px 3px rgba(16,24,40,.16);transition:transform .25s ease}
.drawer-preferences .theme-switch .theme-choice{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#667085;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:color .2s}
.drawer-preferences .theme-switch .theme-choice .ui-icon{font-size:15px}
.drawer-preferences .theme-switch .theme-choice.active{background:transparent;border:0;color:#161616}
.drawer-preferences .theme-switch .theme-choice:focus-visible{outline:2px solid #2176ef;outline-offset:1px}
.drawer-preferences .theme-switch .theme-choice span{margin:0;color:inherit;font-size:12px;font-weight:700}
html.theme-animating,html.theme-animating *,html.theme-animating *::before,html.theme-animating *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease!important}
/* Hamburger ในหน้า Admin / Seller Center */
.admin-console-actions .profile-drawer-btn,.artist-seller-top-actions .profile-drawer-btn{flex:none}
.profile-drawer-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
#dashboardDrawerHost .drawer-overlay{z-index:3000}
#dashboardDrawerHost .account-drawer{z-index:3001}
/* ===== v32: ขนาดโลโก้อักษรวิจิตร ===== */
.av-logo{gap:8px!important}
.av-logo-mark{width:42px;height:42px}
.av-logo-word{height:34px;margin-top:2px}
.chatroom-brand-bar .av-logo-mark{width:32px;height:32px}
.chatroom-brand-bar .av-logo-word{height:26px}
.artist-hero-logo .av-logo-mark{width:28px;height:28px}
.artist-hero-logo .av-logo-word{height:22px}
.shipping-label-logo .av-logo-mark{width:24px;height:24px}
.shipping-label-logo .av-logo-word{height:19px}
.auth-card-logo .av-logo-mark{width:48px;height:48px}
.auth-card-logo .av-logo-word{height:40px}
.av-logo .av-logo-tag{margin-left:6px}
@media(max-width:760px){.av-logo-mark{width:36px;height:36px}
.av-logo-word{height:28px}}
@media(max-width:420px){.site-header .av-logo-mark{width:32px;height:32px}
.site-header .av-logo-word{height:24px}
.site-header .av-logo{gap:5px!important}}
/* โหมดตัวอย่าง (ยังไม่เชื่อมฐานข้อมูล) */
.demo-mode-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:10px;max-width:min(94vw,920px);padding:10px 12px 10px 16px;border-radius:12px;background:#1f2937;color:#f9fafb;font-size:13px;line-height:1.5;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.demo-mode-banner strong{flex:none;padding:3px 9px;border-radius:999px;background:#FFD21F;color:#161616;font-size:12px}
.demo-mode-banner button{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
@media(max-width:640px){.demo-mode-banner{bottom:10px;font-size:12px}}
/* ปุ่มเพิ่มที่อยู่ในหน้าชำระเงิน */
button.checkout-add-address-link{width:calc(100% - 48px);background:none;border:0;border-top:1px solid #e7e7e7;font:inherit;font-size:12px;cursor:pointer}
button.checkout-add-address-link:focus-visible{outline:2px solid #2378ee;outline-offset:2px}
@media(max-width:560px){button.checkout-add-address-link{width:calc(100% - 36px)}}
.checkout-selector-dialog{max-height:calc(100vh - 32px);overflow-y:auto}
/* ===== กันบันทึกรูปผลงานก่อนซื้อ ===== */
img.av-protected-img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.av-watermark{position:relative}
.lightbox-image-wrap{position:relative;display:inline-block;max-width:100%;line-height:0}
.av-watermark::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170'%3E%3Ctext x='130' y='95' text-anchor='middle' transform='rotate(-24 130 85)' font-family='Georgia,serif' font-style='italic' font-size='26' font-weight='700' fill='%23ffffff' fill-opacity='.30' stroke='%23000000' stroke-opacity='.10' stroke-width='1'%3EArtVerse%3C/text%3E%3Ctext x='130' y='120' text-anchor='middle' transform='rotate(-24 130 85)' font-family='sans-serif' font-size='11' letter-spacing='3' fill='%23ffffff' fill-opacity='.30'%3EPREVIEW%3C/text%3E%3C/svg%3E");background-repeat:repeat;background-size:260px 170px}
.friendii-ref-image-stage.av-watermark::after{z-index:1}
.friendii-ref-image-stage.av-watermark .product-stage-arrow,.friendii-ref-image-stage.av-watermark .product-stage-counter,.friendii-ref-image-stage.av-watermark .friendii-ref-image-labels,.friendii-ref-image-stage.av-watermark .friendii-ref-favorite{z-index:3}
@media print{img.av-protected-img,.av-watermark img{visibility:hidden}}

/* ===== ซูมดูรายละเอียดสินค้า ===== */
.friendii-ref-image-button.has-hover-zoom{cursor:zoom-in;overflow:hidden}
.friendii-ref-image-button.has-hover-zoom img{transition:transform .12s ease-out;will-change:transform}
.friendii-ref-image-button.is-zooming img{box-shadow:none}
.product-zoom-hint{position:absolute;left:14px;bottom:14px;z-index:3;padding:5px 11px;border-radius:999px;background:rgba(20,20,20,.62);color:#fff;font-size:12px;line-height:1.4;pointer-events:none;transition:opacity .2s}
.friendii-ref-image-stage:has(.is-zooming) .product-zoom-hint{opacity:0}
@media (hover:none),(pointer:coarse){.product-zoom-hint{display:none}}
.product-lightbox img{max-height:74vh}
.lightbox-image-wrap{overflow:hidden;border-radius:14px;touch-action:none;cursor:zoom-in;user-select:none}
.lightbox-image-wrap img{border-radius:0}
.lightbox-image-wrap.is-zoomed{cursor:grab}
.lightbox-image-wrap.is-zoomed:active{cursor:grabbing}
.lightbox-zoom-bar{display:inline-flex;align-items:center;justify-content:center;gap:3px;margin:14px auto 0;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:max-content}
.lightbox-zoom-bar[hidden]{display:none}
.lightbox-zoom-bar button{min-width:34px;height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:background .15s}
.lightbox-zoom-bar button[data-zoom="reset"]{font-size:15px}
.lightbox-zoom-bar button:hover{background:rgba(255,255,255,.18)}
.lightbox-zoom-bar button:focus-visible{outline:2px solid #FFD21F;outline-offset:2px}
.lightbox-zoom-bar output{min-width:50px;text-align:center;color:#fff;font-size:12px;font-weight:700}

/* ===== วิดีโอสินค้าในแกลเลอรี แสดงคู่กับรูปภาพ (v38) ===== */
.friendii-ref-thumbnails button.is-video-thumb{position:relative;background:#111}
.friendii-ref-thumbnails button.is-video-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.thumb-play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);color:#1f1f1f;display:grid;place-items:center;font-size:9px;pointer-events:none}
.friendii-ref-image-button[hidden]{display:none}
.friendii-ref-video-wrap{width:100%;height:100%;min-height:560px;padding:34px;display:grid;place-items:center}
.friendii-ref-video-wrap[hidden]{display:none}
.friendii-ref-video-wrap video{display:block;width:100%;max-width:100%;max-height:680px;border-radius:8px;background:#000;box-shadow:0 8px 28px rgba(23,23,23,.08)}
.lightbox-image-wrap[hidden]{display:none}
.lightbox-video-wrap{display:grid;place-items:center;width:min(1100px,94vw);max-height:82vh}
.lightbox-video-wrap[hidden]{display:none}
.lightbox-video-wrap video{max-width:min(1100px,94vw);max-height:82vh;border-radius:14px;background:#000}
@media(max-width:700px){.friendii-ref-video-wrap,.friendii-ref-image-button{min-height:390px;padding:20px}}

/* ============================================================
   v41: ออกแบบหน้าสินค้าใหม่ทั้งหมด — เรียบหรู ทันสมัย
   (คงชุดสี/ระยะห่างเดิมของเว็บ เพิ่มความโค้งมน เงา และจังหวะภาพให้พรีเมียมขึ้น)
   ============================================================ */
body[data-page="product"] .friendii-ref-image-stage{
  border-radius:22px;
  border-color:#eeece7;
  box-shadow:0 28px 64px -30px rgba(23,23,23,.28);
}
body[data-page="product"] .friendii-ref-image-button img,
body[data-page="product"] .friendii-ref-video-wrap video{border-radius:14px}
body[data-page="product"] .friendii-ref-favorite{
  border-radius:50%;
  box-shadow:0 8px 20px rgba(23,23,23,.10);
  transition:transform .18s ease,color .18s ease,border-color .18s ease;
}
body[data-page="product"] .friendii-ref-favorite:hover{transform:scale(1.08)}
body[data-page="product"] .friendii-ref-thumbnails button{border-radius:11px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
body[data-page="product"] .friendii-ref-thumbnails button:hover{transform:translateY(-2px)}
body[data-page="product"] .friendii-ref-thumbnails button.active{box-shadow:0 6px 16px rgba(23,23,23,.16)}
body[data-page="product"] .friendii-ref-thumbnails img{border-radius:8px}

body[data-page="product"] .friendii-ref-seller-avatar{box-shadow:0 4px 14px rgba(23,23,23,.06)}
body[data-page="product"] .friendii-ref-follow{border-radius:999px;transition:transform .15s ease,background .18s ease,color .18s ease}
body[data-page="product"] .friendii-ref-follow:hover{transform:translateY(-1px)}

body[data-page="product"] .friendii-ref-price strong{
  font-weight:800;
  background-image:linear-gradient(120deg,var(--friendii-primary),#b83947);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body[data-page="product"] .friendii-ref-option-block{border-radius:16px;background:#fbfaf8;border-color:#eeece7;padding:5px 16px}
body[data-page="product"] .friendii-ref-option-row{border-bottom-color:#f0eee9}
body[data-page="product"] .friendii-ref-quantity{border-radius:10px;overflow:hidden}
body[data-page="product"] .friendii-ref-actions button,
body[data-page="product"] .friendii-ref-message{border-radius:11px;transition:transform .16s ease,box-shadow .16s ease,background .18s ease,color .18s ease}
body[data-page="product"] .friendii-ref-primary{
  background:linear-gradient(120deg,var(--friendii-primary),var(--friendii-primary-dark));
  border-color:transparent;
  box-shadow:0 18px 32px -14px rgba(217,73,83,.55);
}
body[data-page="product"] .friendii-ref-primary:hover{transform:translateY(-2px);box-shadow:0 22px 38px -14px rgba(217,73,83,.6)}
body[data-page="product"] .friendii-ref-secondary:hover,
body[data-page="product"] .friendii-ref-message:hover{transform:translateY(-2px)}
body[data-page="product"] .friendii-ref-assurance>div>span{border-radius:50%}

/* การ์ดศิลปิน: ตัวเลขจริงจากข้อมูลผลงาน/ยอดขาย/คะแนนเฉลี่ยของร้าน พร้อมเส้นแบ่งพรีเมียม */
body[data-page="product"] .friendii-ref-creator{
  border:1px solid var(--friendii-line);
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#fbfaf8);
  padding:26px 28px;
  box-shadow:0 20px 48px -30px rgba(23,23,23,.28);
}
body[data-page="product"] .friendii-ref-creator-avatar{border-radius:16px;box-shadow:0 8px 20px rgba(23,23,23,.08)}
body[data-page="product"] .friendii-ref-creator-stats{align-items:center;gap:18px}
.friendii-stat-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.25}
.friendii-stat-item strong{font-size:16px;font-weight:750;color:#201e1b}
.friendii-stat-item span{font-size:10.5px;color:#918c84;letter-spacing:.3px}
.friendii-stat-item.is-empty strong{color:#b7b2aa;font-weight:600}
.friendii-stat-divider{width:1px;height:28px;flex:none;background:var(--friendii-line)}
body[data-page="product"] .friendii-ref-creator>a{border-radius:999px;transition:transform .16s ease,background .18s ease,color .18s ease}
body[data-page="product"] .friendii-ref-creator>a:hover{transform:translateY(-1px)}
@media(max-width:700px){body[data-page="product"] .friendii-ref-creator-stats{gap:14px}
.friendii-stat-divider{height:24px}}

body[data-page="product"] .friendii-ref-tags a{border-radius:999px;transition:transform .15s ease,border-color .15s ease,color .15s ease}
body[data-page="product"] .friendii-ref-tags a:hover{transform:translateY(-1px)}
body[data-page="product"] .friendii-ref-info-section li>b{background:#f7f1e4;color:#a96000;border-radius:999px;width:36px;height:20px;display:grid;place-items:center;padding-top:0}
body[data-page="product"] .friendii-ref-side-info{border-top-color:#1e1e1e}

/* รีวิว: ปุ่มเขียนรีวิวทรงแคปซูล วงคะแนนไล่สีทอง แถบดาวไล่สี */
body[data-page="product"] .friendii-ref-reviews-head button{
  border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .16s ease,background .18s ease,color .18s ease;
}
body[data-page="product"] .friendii-ref-reviews-head button::before{content:"✎";font-size:13px}
body[data-page="product"] .friendii-ref-reviews-head button:hover{transform:translateY(-1px)}
body[data-page="product"] .friendii-ref-review-summary{border-radius:18px;border:1px solid var(--friendii-line);background:#fbfaf8;padding:26px}
body[data-page="product"] .friendii-ref-review-summary>div:first-child strong{
  font-size:38px;
  background-image:linear-gradient(120deg,#e0972a,#c9720c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body[data-page="product"] .rating-bar b{background:linear-gradient(90deg,#f1a01a,#e0972a)}
body[data-page="product"] .friendii-ref-review-list .friendii-review-card{transition:background .15s ease;border-radius:10px;padding-inline:12px!important}
body[data-page="product"] .friendii-ref-review-list .friendii-review-card:hover{background:#fbfaf8!important}
body[data-page="product"] .review-user-avatar{border-radius:50%}

/* ช่องเขียนคะแนนและรีวิว (แทนที่กล่อง prompt() เดิม) */
.review-composer-modal .modal-head h2{font-size:18px}
.review-composer-target{margin:0 0 4px;color:#667085;font-size:13px}
.review-composer-target strong{color:#161616}
.review-star-picker{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;border-radius:14px;background:#fbfaf8;border:1px solid var(--line);
  margin-top:6px;
}
.review-star-buttons{display:flex;gap:2px}
.review-star-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:0;font-size:27px;line-height:1;color:#e3ddd0;cursor:pointer;transition:transform .12s ease,color .12s ease}
.review-star-btn.active{color:#f1a01a}
.review-star-btn:hover{transform:scale(1.14)}
.review-star-btn:focus-visible{outline:2px solid #2176ef;outline-offset:2px;border-radius:50%}
.review-star-label{font-size:13px;font-weight:800;color:#a96000;min-width:64px}
.review-composer-field{display:grid;gap:8px;margin-top:18px}
.review-composer-field>span{font-weight:700;color:#344054;font-size:13px}
@media(max-width:520px){.review-star-picker{flex-direction:column;align-items:flex-start;gap:8px}
.review-star-btn{width:34px;height:34px;font-size:24px}}

/* ============================================================
   v42: จัดหน้าสินค้าใหม่ให้ใกล้เคียงโครงสร้างการ์ดของ Friendii
   (แกลเลอรี+ข้อมูลซื้อรวมเป็นการ์ดเดียว ปุ่มคู่เท่ากัน ป้ายประเภทแบบแคปซูล
    การ์ดรายละเอียด/ข้อมูลสินค้า การ์ดรีวิวแยกใบ และปุ่มดูเพิ่มเติมของคำอธิบาย)
   ============================================================ */

/* การ์ดหลัก: แกลเลอรีซ้าย + ข้อมูลซื้อขวา รวมอยู่ในกรอบเดียวกัน */
body[data-page="product"] .friendii-ref-product{
  border:1px solid var(--friendii-line);
  border-radius:26px;
  background:#fff;
  padding:40px;
  box-shadow:0 30px 70px -36px rgba(23,23,23,.26);
}
body[data-page="product"] .friendii-ref-thumbnails{justify-content:center}

/* คะแนน • ขายแล้ว • รีวิว แบบบรรทัดเดียวคั่นด้วยจุด */
body[data-page="product"] .friendii-ref-rating{gap:7px}
body[data-page="product"] .friendii-ref-rating-score{color:#ce7b00;font-weight:800}
body[data-page="product"] .friendii-ref-rating-dot{color:#cac6bd;font-size:9px}

/* ป้ายประเภทสินค้าแบบแคปซูลมีเส้นขอบ (คล้ายป้าย Commercial ของ Friendii) */
.friendii-ref-type-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;border:1px solid var(--friendii-primary);border-radius:999px;
  color:var(--friendii-primary);font-size:12px;font-weight:700;
  background:rgba(237,93,101,.07);
}

/* ปุ่มเพิ่มลงตะกร้า/ซื้อสินค้า ขนาดเท่ากันเรียงคู่กัน + ปุ่มสอบถามศิลปินแยกแถวด้านล่าง */
body[data-page="product"] .friendii-ref-primary{grid-column:auto}
body[data-page="product"] .friendii-ref-message{
  margin-top:10px;width:100%;border-radius:11px;
  background:transparent;border:1px dashed #d8d4cd;color:#55514b;
}
body[data-page="product"] .friendii-ref-message:hover{border-color:#242321;border-style:solid;color:#242321}

/* คำอธิบายสินค้า: ย่อ/ขยายด้วยปุ่มดูเพิ่มเติม */
body[data-page="product"] .friendii-ref-description-text.is-clamped:not(.is-expanded){
  max-height:150px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 65%,transparent 100%);
}
body[data-page="product"] .friendii-ref-viewmore{
  display:inline-block;margin:6px 0 0;background:transparent;border:0;
  color:var(--friendii-primary);font-weight:700;font-size:13px;cursor:pointer;padding:0;
}
body[data-page="product"] .friendii-ref-viewmore:hover{text-decoration:underline}

/* รายละเอียดสินค้า และ ข้อมูลสินค้า เป็นการ์ดแยกคนละใบ เหมือน Product Description / Product Specs */
body[data-page="product"] .friendii-ref-content{padding-top:0;margin-top:40px;align-items:stretch}
body[data-page="product"] .friendii-ref-description{
  border:1px solid var(--friendii-line);border-radius:22px;background:#fff;
  padding:32px 34px;box-shadow:0 18px 44px -30px rgba(23,23,23,.2);
}
body[data-page="product"] .friendii-ref-side-info{
  border:1px solid var(--friendii-line);border-top:1px solid var(--friendii-line);
  border-radius:22px;background:#fbfaf8;
  padding:24px 26px;box-shadow:0 18px 44px -30px rgba(23,23,23,.14);
}

/* รีวิวแต่ละรายการเป็นการ์ดแยกใบมีขอบโค้งมน แทนเส้นคั่นแบบเดิม */
body[data-page="product"] .friendii-ref-review-list{display:grid;gap:14px}
body[data-page="product"] .friendii-ref-review-list .friendii-review-card{
  border:1px solid var(--friendii-line)!important;
  border-radius:16px!important;
  padding:18px 20px!important;
  background:#fff!important;
}
body[data-page="product"] .friendii-ref-review-list .friendii-review-card:hover{
  background:#fbfaf8!important;border-color:#e3e0d9!important;
}

@media(max-width:980px){
  body[data-page="product"] .friendii-ref-product{padding:26px}
  body[data-page="product"] .friendii-ref-content{margin-top:30px}
}
@media(max-width:700px){
  body[data-page="product"] .friendii-ref-product{padding:18px;border-radius:20px}
  body[data-page="product"] .friendii-ref-description,
  body[data-page="product"] .friendii-ref-side-info{padding:22px 18px;border-radius:18px}
}

/* ============================================================
   v43: การ์ด "ข้อมูลสินค้า" แบบ Product Specs ของ Friendii
   (ไอคอน + หัวข้อการจัดส่ง/ดาวน์โหลด + คำอธิบายนโยบายจริงของเว็บ แทนรายการสถิติเดิม)
   ============================================================ */
body[data-page="product"] .friendii-ref-side-info>.friendii-ref-spec-row{
  display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;
  border-bottom:0;padding:0 0 16px;font-size:inherit;
}
body[data-page="product"] .friendii-ref-spec-icon{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;line-height:1;
  background:#f7f1e4;color:#a96000;
}
body[data-page="product"] .friendii-ref-spec-row strong{display:block;color:#201e1b;font-size:14px;font-weight:700;text-align:left}
body[data-page="product"] .friendii-ref-spec-row p{margin:4px 0 0;color:#77736d;font-size:12.5px;line-height:1.65}
body[data-page="product"] .friendii-ref-spec-note{
  margin:0 0 16px;padding-top:16px;border-top:1px solid var(--friendii-line);
  color:#6c685f;font-size:12.5px;line-height:1.75;
}
body[data-page="product"] .friendii-ref-spec-note a{color:var(--friendii-primary);font-weight:700;text-decoration:none}
body[data-page="product"] .friendii-ref-spec-note a:hover{text-decoration:underline}