/* Scoped layout only. Shared header, motion, LINE and size tiles are mounted unchanged. */
:root{--b1-ink:#1b211f;--b1-muted:#747b72;--b1-line:#d9ded8;--b1-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif}
body[data-b1-preview]{--bx-shell:1320px;--wf-shell:1320px}
body[data-b1-preview] .wf-header{top:0}
body[data-b1-preview] .wf-header .retail-nav{font-size:14px}
body[data-b1-preview] .wf-footer .v5-footer-grid{align-items:start}
html{scroll-padding-top:110px}
.b1-skip{position:fixed;top:-80px;left:12px;z-index:1000;padding:12px;background:#ffe000;color:#171816}
.b1-skip:focus{top:4px}
.preview-note{display:flex;justify-content:center;gap:24px;align-items:center;min-height:30px;background:#fff5b1;padding:4px 16px;font:12px/1.5 var(--b1-font)}
.preview-note a{text-decoration:underline;text-underline-offset:3px}
.b1-preview{font-family:var(--b1-font);padding-top:25px}
.b1-preview button{font:inherit;cursor:pointer;touch-action:manipulation}
.b1-back{display:inline-flex;align-items:center;min-height:34px;font-size:13px;color:#647060;margin-bottom:24px;text-decoration:none}
.b1-preview .example-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:62px}
.b1-preview .example-selected{top:128px;min-width:0}
.b1-eyebrow{font-size:12px;color:var(--b1-muted);letter-spacing:.045em;margin:0 0 8px}
.b1-preview h1{font-size:34px;font-weight:750;line-height:1.25;margin:0 0 23px;letter-spacing:-.025em}
.b1-picture-button{position:relative;display:block;width:100%;padding:0;border:1px solid #eeece7;cursor:zoom-in!important;background:#f7f5ef}
.b1-picture-button:hover{border-color:#b4b8ae}
.b1-zoom{position:absolute;right:14px;bottom:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #dce0d6;border-radius:50%;background:#fff;color:var(--b1-ink);font-size:18px}
.b1-reference{font-size:12px;color:var(--b1-muted);margin:13px 0 0;line-height:1.65}
.b1-description{font-size:16px;line-height:1.9;border-top:1px solid var(--b1-line);padding-top:24px;margin-top:26px;color:#586257}
.b1-preview .b1-hint{font-size:13px;line-height:1.7;color:var(--b1-muted);margin:8px 0 0}
.b1-preview #name-hint{margin-top:-9px}
.b1-preview .b1-secondary{background:white}
.b1-preview summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none}
.b1-preview summary::-webkit-details-marker{display:none}
.b1-preview summary::after{content:"⌄";font-size:19px;line-height:1;flex-shrink:0;color:#50604f}
.b1-preview details[open]>summary::after{transform:rotate(180deg)}
.b1-preview summary small{margin-left:auto}
.b1-preview details .b1-hint{margin:-2px 0 14px}
.b1-field-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px;font-size:16px}
.b1-field-heading small{margin-left:8px;font-weight:400}
.b1-preview .b1-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;background:#fff;color:var(--b1-ink);border:1px solid #d4d9d0;border-radius:50px;padding:10px 17px;min-height:44px;font-size:14px;--mm-hover-ink:#fff}
.b1-logo-field{margin-top:20px}
.b1-file-format{font-size:11px;color:#8b9187}
.b1-inline-status{font-size:13px;line-height:1.6;color:#885d22;margin:8px 0 0}
.b1-inline-status:empty{display:none}
.b1-logo-preview{display:flex;align-items:center;gap:14px;border:1px solid #d9ded8;background:#f7f8f5;border-radius:12px;margin-top:12px;padding:14px}
.b1-logo-preview img{display:block;width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid #e2e5de;border-radius:6px;flex-shrink:0}
.b1-logo-preview>div{min-width:0}
.b1-logo-preview strong{display:block;font-size:14px;overflow-wrap:anywhere}
.b1-logo-preview small{display:block;margin-top:4px}
.b1-file-actions{display:flex;gap:20px;margin-top:5px}
.b1-file-actions button{min-height:36px;font-size:13px;background:transparent;border:0;padding:0;color:#405140}
.b1-garment{margin:0 0 17px;font-size:15px}
.b1-garment>span{color:var(--b1-muted);font-size:12px;margin-right:8px}
.b1-color-heading{font-size:14px}
.b1-color-heading strong{font-size:13px;font-weight:600;margin-left:12px}
.b1-color-heading button{font-size:12px;border:0;background:transparent;padding:10px 0;white-space:nowrap;color:#59694e;min-height:44px}
.b1-colors{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:#bdc3b8 transparent}
.b1-colors.is-expanded{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
.b1-preview .b1-color{position:relative;flex:0 0 calc((100% - 45px)/6);min-width:73px;padding:4px 3px 8px;border:1px solid #e0e3dc;border-radius:13px;background:#f6f6f2;color:#5d6859;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;line-height:1.4;font-size:12px}
.b1-preview .b1-color[aria-pressed=true]{border-color:#25312a;box-shadow:0 0 0 1px #25312a;background:white;color:#1b211f}
.b1-color img{display:block;width:100%;height:62px;object-fit:contain;border-radius:8px}
.b1-color small{font-size:10px}
.b1-colors.is-expanded .b1-color{min-width:0}
.b1-size-heading{margin:20px 0 14px;padding-top:20px;border-top:1px solid var(--b1-line)}
.b1-size-heading h2{margin:0;font-size:19px;font-weight:700}
.b1-preview #child-sizes-details{margin-bottom:17px}
.b1-preview #child-sizes{padding-bottom:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.b1-preview #child-sizes label>small{display:block;font-size:10px;margin:1px 0}
/* Keep the accepted number tiles despite the original form's generic input selector. */
.b1-preview .example-sizes input[type=number]{margin:0;padding:3px;min-height:42px;border:0;border-radius:0;background:transparent;text-align:center;font-size:24px;font-weight:600;line-height:1.5;color:#969e97}
.b1-preview .example-sizes .has-quantity input[type=number]{color:#1b211f}
.b1-quantity{margin-top:17px;padding:18px 20px}
.b1-quantity strong{display:block;font-size:27px;line-height:1.25;font-weight:750}
.b1-quantity span{display:block;font-size:13px;font-weight:400;line-height:1.65;color:#687362;margin-top:6px}
.b1-preview #availability-note:empty{display:none}
.b1-price{margin-top:23px}
.b1-price>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:16px}
.b1-price strong{font-size:21px}
.b1-price p{font-size:12px;line-height:1.7;color:#7b8276;margin:8px 0 0}
.b1-price .b1-design-fee{margin-top:12px;font-size:13px;color:#6f795f}
.b1-price .b1-design-fee strong{font-size:14px}
.b1-order-summary{font-size:14px;line-height:1.6;margin-bottom:20px}
.b1-order-summary>span{color:#6a7565}
.b1-order-summary strong{display:block;font-size:18px;margin-top:5px}
.b1-order-summary p{font-size:13px;color:#79826f;margin:8px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.b1-preview #example-submit{--mm-hover-ink:#fff}
.b1-preview #preview-status{font-size:14px;background:#fff7cc;padding:14px 16px;border-radius:10px;margin-top:15px;color:#635730}
.b1-preview #preview-status:empty{display:none}
.b1-dialog{box-sizing:border-box;padding:0;border:1px solid #d8ddd2;border-radius:16px;width:min(940px,calc(100% - 32px));max-height:88dvh;overflow:auto;color:var(--b1-ink);background:#fff;font-family:var(--b1-font);box-shadow:0 20px 80px #0003}
.b1-dialog::backdrop{background:#17181699}
.b1-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid #dedfd8;background:#fff;position:sticky;top:0;z-index:1;font-size:16px}
.b1-dialog-bar button{border:1px solid #d4d8cd;border-radius:50px;padding:9px 14px;min-height:44px;background:#fff;font:13px var(--b1-font);cursor:pointer;color:var(--b1-ink);white-space:nowrap}
.b1-dialog>img{display:block;width:100%;height:auto}
.b1-dialog>p{font-size:13px;color:#747970;margin:0;padding:15px 20px}
.b1-dialog button:focus-visible{outline:3px solid #72785a;outline-offset:2px}
.b1-phone-page{margin:0;padding:22px 12px;background:#eeeee8;color:var(--b1-ink);font:14px var(--b1-font);box-sizing:border-box}
.b1-phone-tools{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:18px}
.b1-phone-tools a{color:inherit;text-underline-offset:3px}
.b1-phone-stage{width:min(390px,100%);margin:auto;border-radius:25px;box-shadow:0 12px 45px #0002;overflow:hidden;background:#fff}
.b1-phone-stage iframe{display:block;width:100%;height:844px;border:0;background:#fff}
.b1-phone-page>p{text-align:center;font-size:12px;color:#72796a}
@media(max-width:800px){
  html{scroll-padding-top:85px}
  body[data-b1-preview] .wf-header .retail-nav{font-size:12px;padding:8px 13px;margin:0 5px}
  body[data-b1-preview] .wf-footer .v5-footer-grid{display:grid}
  .preview-note{font-size:10px;gap:18px;min-height:26px;padding:4px 10px}
  .b1-preview{padding-top:13px}
  .b1-back{font-size:12px;margin-bottom:15px}
  .b1-preview .example-grid{grid-template-columns:minmax(0,1fr);gap:27px}
  .b1-preview .example-selected{position:static}
  .b1-eyebrow{font-size:11px;margin-bottom:6px}
  .b1-preview h1{font-size:27px;margin-bottom:16px}
  .b1-preview .example-picture{border-radius:13px}
  .b1-zoom{width:30px;height:30px;right:9px;bottom:9px;font-size:16px}
  .b1-reference{font-size:11px;margin-top:9px}
  .b1-description{display:none}
  .b1-preview legend{margin-bottom:18px}
  .b1-preview .b1-hint{font-size:12px}
  .b1-preview .b1-field-heading{font-size:14px}
  .b1-preview .b1-button{font-size:13px;padding:9px 15px}
  .b1-preview .b1-color{flex-basis:calc((100% - 27px)/4);min-width:70px;font-size:12px}
  .b1-color img{height:59px}
  .b1-colors.is-expanded{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b1-color-heading strong{font-size:12px;margin-left:7px}
  .b1-color-heading button{font-size:11px}
  .b1-size-heading h2{font-size:19px}
  .b1-quantity strong{font-size:26px}
  .b1-logo-preview img{width:58px;height:58px}
  .b1-dialog-bar{padding:12px 14px;font-size:14px;gap:10px}
  .b1-dialog>p{padding:12px 14px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.b1-preview *{scroll-behavior:auto!important;transition:none!important}}