:root{--hf-pro-blue:#365cff;--hf-pro-ink:#121c30;--hf-pro-line:rgba(143,160,193,.30)}
.hf-pro-bar{display:flex;align-items:center;justify-content:center;gap:clamp(9px,2vw,38px);flex-wrap:wrap;padding:10px 20px;background:#0b2235;color:#dff6ff;font-size:.82rem;letter-spacing:.1px}
.hf-pro-bar span{white-space:normal}
.hf-byshop-feature{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px auto 20px;padding:22px 25px;border:1px solid rgba(110,149,233,.40);border-radius:22px;background:linear-gradient(118deg,#162b43,#152444 65%,#273269);box-shadow:0 12px 35px #0002}
.hf-byshop-feature h2{color:#fff;line-height:1.25;margin:5px 0 8px;font-size:clamp(1.15rem,2.6vw,1.7rem)}
.hf-byshop-feature p{max-width:640px;line-height:1.55;margin:0;color:#b8cce2}.hf-byshop-feature small{font-weight:800;letter-spacing:.18em;color:#a8cbff}
.hf-byshop-feature .btn{flex-shrink:0}
.byshop-store .page-intro{border-radius:20px;background:linear-gradient(115deg,#111f3b,#24436b);border:1px solid #456188;padding:24px 26px!important;margin-top:16px;margin-bottom:12px}
.byshop-store .page-intro h1{color:#fff!important;font-size:clamp(1.5rem,3.5vw,2.5rem)}
.byshop-store .page-intro p{color:#d5e8fd}.byshop-store .hf-main-search,.byshop-store .hf-search-row{max-width:740px}
.byshop-disclosure{display:grid;gap:5px;border:1px solid rgba(120,165,219,.45);padding:14px 16px;border-radius:14px;background:#eff7ff;color:#1b3759;font-size:.92rem;line-height:1.5;margin:12px 0 14px}
.byshop-disclosure strong{color:#122747;font-weight:800}.byshop-disclosure span{color:#425c79}
.bs-public-filters{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:12px 0 8px;scrollbar-width:thin}.bs-public-filters button{border:1px solid #436587;border-radius:999px;color:#cce8ff;background:#132940;padding:12px 16px;white-space:nowrap;min-height:46px;cursor:pointer;scroll-snap-align:start}.bs-public-filters button.active{background:#dbecff;color:#143b69;border-color:#82b1ff;font-weight:800}.bs-public-filters button:focus-visible{outline:3px solid #6ac8ff;outline-offset:3px}
.hf-external-chips{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}.hf-external-chips a{padding:9px 12px;border:1px solid rgba(148,163,184,.5);border-radius:999px;color:#93cef9;background:#0e263d;text-decoration:none;font-size:.93rem}
.hf-byshop-empty{display:grid;gap:10px;padding:32px;border:1px dashed #6a8ead;background:#182842;border-radius:18px;grid-column:1/-1;color:#fff;line-height:1.55}
.hf-byshop-empty strong{font-size:1.16rem}.hf-byshop-empty p{max-width:600px;color:#d4e3f3;margin:0}.hf-byshop-empty a{color:#a7d8ff;font-weight:700}
/* Mobile first: large tap targets and stable responsive layouts */
.hf-mobile-nav a,.mobile-nav a{min-height:54px}.byshop-store .product-card{border:1px solid rgba(128,168,212,.43);border-radius:18px}
.byshop-store .product-card:focus-visible,.hf-byshop-feature a:focus-visible{outline:3px solid #7bbdff;outline-offset:3px}
@media(max-width:650px){.hf-pro-bar{font-size:11px;gap:8px;padding:8px 12px}.hf-byshop-feature{display:grid;padding:18px 16px}.hf-byshop-feature .btn{justify-self:stretch;text-align:center}.byshop-store .page-intro{padding:18px!important;margin-left:12px;margin-right:12px}.byshop-store .page-intro h1{font-size:1.5rem}.byshop-disclosure{padding:12px;font-size:.84rem}.hf-external-chips a{padding:8px 10px;font-size:.84rem}.byshop-store #catalogGrid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .hf-byshop-empty{padding:20px}.topbar nav.desktop-links{gap:12px}}
/* BYShop supplier management scoped styles */
.byshop-admin-page{margin:0;background:#f4f7fb;color:#102238;font:16px/1.55 system-ui,-apple-system,"Noto Sans Thai",sans-serif}
.byshop-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:#101b31;color:white;padding:14px max(20px,calc((100vw - 1120px)/2));border-bottom:3px solid #3978f5}
.byshop-header a{color:#dbeaff}.bs-dashboard{max-width:1120px;margin:0 auto;padding:28px 20px 80px}.bs-eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#4e6ac1}.bs-dashboard h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0}.bs-lead{color:#495d76;max-width:850px}.bs-status{border:1px solid #c4d9ef;border-radius:14px;padding:12px 16px;background:#eaf4ff;margin:18px 0}.bs-status[data-error="true"]{color:#902a25;background:#fff0eb;border-color:#efc0b4}.bs-block{background:white;border:1px solid #dee5f0;border-radius:20px;padding:22px;margin:20px 0;box-shadow:0 12px 34px rgba(28,51,86,.05)}.bs-block h2{font-size:1.25rem;margin:0 0 10px}.bs-block p{color:#445970}.bs-block textarea,.bs-block input{box-sizing:border-box;width:100%;background:white;border:1px solid #b5c5dc;border-radius:12px;padding:11px 13px;color:#102238;font-size:1rem}.bs-block textarea{font:13px/1.55 ui-monospace,Consolas,monospace;resize:vertical;min-height:190px}.bs-form-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}.bs-form-row label{font-size:.84rem;font-weight:700;color:#34445b}.bs-form-row input{margin-top:5px}.bs-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:15px 0}.bs-buttons a{color:#244eae;font-weight:700}.bs-buttons button,.bs-primary,.bs-secondary{cursor:pointer;border:0;border-radius:12px;padding:12px 15px;font-weight:800;background:#244db8;color:white}.bs-buttons .bs-secondary,.bs-secondary{background:#e7eef9;color:#1d3c69}.bs-primary{background:#08785f}.bs-confirm{display:flex;align-items:flex-start;gap:9px;margin:20px 0 10px}.bs-confirm input{width:auto;margin:5px 0}.bs-hint{font-size:.84rem;color:#62748a!important}.bs-table-wrap{width:100%;overflow:auto}.bs-table-wrap table{border-collapse:collapse;width:100%;min-width:680px;text-align:left;font-size:.88rem}.bs-table-wrap th,.bs-table-wrap td{border-bottom:1px solid #e3e9f2;padding:11px 9px}.bs-table-wrap th{background:#f1f5fb;color:#324a69}.bs-table-wrap button{background:#fce3e2;color:#8a2121;border:0;border-radius:8px;padding:8px;cursor:pointer}.bs-notice{padding:15px 18px;background:#fff5dc;border:1px solid #e8d5a7;border-radius:14px;color:#58431f}
@media(max-width:700px){.bs-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}.bs-dashboard{padding:18px 12px 60px}.bs-block{padding:15px}.byshop-header{padding:12px 15px}.bs-buttons button,.bs-primary{width:100%;min-height:46px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}