:root {
  --ink: #171915;
  --paper: #f7f7f1;
  --muted: #74766d;
  --line: #dedfd6;
  --green: #15b65a;
  --yellow: #f2e918;
  --orange: #ff9d4d;
  --red: #ef4444;
  --card: #fffef8;
  --radius-panel: 12px;
  --radius-control: 8px;
  --radius-label: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family:Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(100%, 760px); margin: 0 auto; padding: 26px 20px 34px; }
.hero { text-align: center; padding: 26px 0 33px; }
.brand-mark { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; background: var(--ink); border-radius: 18px; margin: 0 auto 17px; box-shadow: 4px 4px 0 var(--yellow); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.eyebrow { margin: 0; color: var(--muted); font-family:Arial, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(30px, 7vw, 42px); letter-spacing: 0; line-height: 1; margin: 8px 0 11px; }
h2 { font-size: 23px; letter-spacing: 0; margin: 4px 0 0; }
.hero-copy { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.availability-chip { display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; color: #61645c; background: #ecece4; border-radius: 999px; font-family:Arial, sans-serif; font-size: 10px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(21, 182, 90, .14); }

.quick-links, .inventory { border-top: 1px solid var(--line); padding-top: 22px; }
.section-heading, .inventory-topline { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading > span { color: var(--muted); font-family:Arial, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.link-stack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.link-stack .quick-link { grid-column: span 2; }
.quick-link { position: relative; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover:hover) and (pointer:fine) {
 .quick-link:not(.is-placeholder):hover { border-color:#a1a398; background:#f0f2e9; }
}
.quick-link.is-placeholder { cursor: default; opacity: .72; }
.quick-link.is-placeholder:hover { transform: none; box-shadow: none; border-color: var(--line); }
.link-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; color: #fff; border-radius: 11px; background: var(--ink); font-size: 17px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.link-icon svg { width: 23px; height: 23px; overflow: visible; }
.link-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.link-icon svg path, .link-icon svg circle, .link-icon svg rect { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-link[data-icon="yupoo"] .link-icon { background: #fff; }
.quick-link[data-icon="whatsapp"] .link-icon { background: #25d366; }
.quick-link[data-icon="discord"] .link-icon { background: #5865f2; }
.quick-link[data-icon="creator"] .link-icon { background: linear-gradient(135deg, #171915, #6c50f5); }
.quick-link[data-icon="wechat"] .link-icon { background: #07c160; }
.quick-link[data-icon="stock"] .link-icon { background: #171915; }
.quick-link[data-icon="tiktok"] .link-icon { background: #050505; }
.quick-link[data-icon="discord"] .link-icon svg path, .quick-link[data-icon="wechat"] .link-icon svg path { fill: currentColor; stroke: none; }
.quick-link[data-icon="discord"] .link-icon svg circle, .quick-link[data-icon="wechat"] .link-icon svg circle { fill: #5865f2; stroke: none; }
.quick-link[data-icon="wechat"] .link-icon svg circle { fill: #07c160; }
.quick-link[data-icon="tiktok"] .link-icon svg path { fill: currentColor; stroke: none; }
.quick-link[data-icon="tiktok"] .link-icon .tiktok-shadow-cyan { color: #25f4ee; transform: translate(-1px, 1px); }
.quick-link[data-icon="tiktok"] .link-icon .tiktok-shadow-red { color: #fe2c55; transform: translate(1px, -1px); }
.link-copy { flex: 1; min-width: 0; }
.link-copy strong, .link-copy small { display: block; overflow: hidden; }
.link-copy strong { min-height: 32px; font-size: 13px; line-height: 1.25; letter-spacing: 0; }
.link-copy small { display: -webkit-box; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.arrow { position: absolute; top: 12px; right: 11px; font-size: 18px; font-weight: 400; line-height: 1; }

.inventory { margin-top: 30px; }
.refresh-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #4e514a; font-size: 12px; background: transparent; border: 1px solid var(--line); border-radius: 9px; }
.refresh-button:hover { background: #ecece4; }
.refresh-button svg { width: 15px; height: 15px; }
.refresh-button.loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.trust-panel { margin-bottom: 13px; padding: 12px; background: #edeee6; border: 1px solid var(--line); border-radius: 14px; }
.trust-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.trust-panel-heading > span { color: var(--muted); font-size: 10px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.trust-item { position: relative; min-height: 66px; padding: 10px 8px 9px 36px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.trust-item strong, .trust-item small { display: block; }
.trust-item strong { font-size: 10px; line-height: 1.25; letter-spacing: 0; }
.trust-item small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.trust-icon { position: absolute; top: 10px; left: 9px; display: grid; place-items: center; width: 20px; height: 20px; color: #fff; background: var(--ink); border-radius: 6px; font-family:Arial, sans-serif; font-size: 9px; }
.order-flow { margin-top: 30px; margin-bottom: 13px; padding: 14px; background: #edeee6; border: 1px solid var(--line); border-radius: 8px; }
.order-flow-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.order-flow-heading h2 { margin: 4px 0 0; font-size: 16px; letter-spacing: 0; }
.payment-methods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.payment-methods span, .payment-methods a { padding: 5px 7px; color: #4f544c; background: #fffefa; border: 1px solid #d5d8ce; border-radius: 4px; font-family:Arial, sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.order-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d5d8ce; }
.order-steps article { min-width: 0; padding: 12px 10px 2px; border-left: 1px solid #d5d8ce; }
.order-steps article:first-child { border-left: 0; padding-left: 0; }
.order-steps article:last-child { padding-right: 0; }
.order-steps strong, .order-steps small { display: block; }
.order-steps strong { margin-top: 8px; font-size: 11px; line-height: 1.35; }
.order-steps small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; color: #fff; background: var(--ink); border-radius: 50%; font-family:Arial, sans-serif; font-size: 9px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 13px; }
.search-box { display: flex; flex: 1; align-items: center; gap: 8px; padding: 0 11px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.search-box svg { width: 17px; height: 17px; color: var(--muted); }
.search-box input { width: 100%; height: 38px; min-width: 0; color: var(--ink); outline: 0; border: 0; background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #a1a398; }
.sort-box { position: relative; flex: 0 0 128px; }
.sort-box::after { content: "⌄"; position: absolute; top: 50%; right: 10px; color: var(--muted); pointer-events: none; transform: translateY(-55%); }
.sort-box select { width: 100%; height: 40px; padding: 0 28px 0 10px; color: #555850; appearance: none; outline: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 10px; font-weight: 600; }
.sort-box select:focus { border-color: #a1a398; box-shadow: 0 0 0 3px rgba(23,25,21,.06); }
.filter-group { display: flex; gap: 4px; padding: 3px; background: #e8e9e0; border-radius: 10px; }
.filter { padding: 0 9px; color: #696c64; background: transparent; border: 0; border-radius: 7px; font-size: 11px; font-weight: 600; }
.filter.active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(23,25,21,.08); }
.category-panel { margin: 0 0 15px; padding: 11px; background: #edeee6; border: 1px solid var(--line); border-radius: 14px; }
.category-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.category-heading > span { color: var(--muted); font-size: 10px; }
.category-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.category-tab { min-height: 58px; padding: 9px 8px; color: #555850; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
@media (hover:hover) and (pointer:fine) {
 .category-tab:not(:disabled):not(.active):hover { border-color:#a1a398; background:#f0f2e9; }
}
.category-tab.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.category-tab[data-category="sale-b"] { color: #7b4315; background: #fff3dc; border-color: #e8c58d; }
.category-tab[data-category="sale-b"].active { color: #fff; background: #8a4a17; border-color: #8a4a17; }
.category-tab strong, .category-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-tab strong { font-size: 12px; letter-spacing: 0; }
.category-tab small { margin-top: 4px; color: currentColor; opacity: .7; font-family:Arial, sans-serif; font-size: 8px; letter-spacing: .02em; }
.legend { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 15px; color: var(--muted); font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot.in-stock { background: var(--green); }
.dot.restocking { background: var(--yellow); border: 1px solid #c7bd02; }
.dot.incoming { background: var(--red); }

.product-grid { display: grid; gap: 10px; }
.product-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; overflow: hidden; min-height: 162px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.product-visual { position: relative; display: grid; place-items: center; align-self: start; aspect-ratio: 1 / 1; overflow: hidden; background: var(--product-color, #cfd3c9); }
.product-visual::before { content: ""; position: absolute; width: 95px; height: 51px; background: rgba(255,255,255,.78); border: 2px solid rgba(23,25,21,.4); border-radius: 47% 35% 25% 21% / 63% 47% 31% 20%; transform: rotate(-13deg) translate(-2px, 4px); box-shadow: inset -16px -7px 0 rgba(23,25,21,.1); }
.product-visual::after { content: ""; position: absolute; width: 58px; height: 3px; background: rgba(23,25,21,.26); border-radius: 10px; transform: translate(-4px, -5px) rotate(-13deg); box-shadow: 0 7px 0 rgba(23,25,21,.26), 0 14px 0 rgba(23,25,21,.26); }
.product-visual.has-image::before, .product-visual.has-image::after { display: none; }
.product-image { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.product-initials { z-index: 1; position: absolute; bottom: 10px; left: 9px; color: rgba(23,25,21,.72); font-family:Arial, sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .04em; }
.product-visual.has-image .product-initials { z-index: 3; padding: 3px 5px; color: #fff; background: rgba(23,25,21,.58); border-radius: 4px; }
.color-swatch { z-index: 1; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; background: var(--swatch, #000); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.product-visual.has-image .color-swatch { z-index: 3; }
.product-content { padding: 14px 14px 13px; min-width: 0; }
.product-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.product-heading > div:first-child { min-width: 0; }
.product-heading h3 { overflow: hidden; margin: 4px 0 0; font-size: 14px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.product-heading-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: 4px; }
.product-note { flex: 0 0 auto; color: #8c6000; font-family:Arial, sans-serif; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.product-price { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 6px; color: #244c32; background: #e8f5e8; border: 1px solid #b8d9bf; border-radius: 3px; font-family:Arial, sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.product-badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 15px; }
.product-badges span { display: inline-flex; align-items: center; min-height: 15px; padding: 0 5px; border-radius: 3px; font-family:Arial, sans-serif; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.badge-ready { color: #155b33; background: #dff4e4; border: 1px solid #b9dfc4; }
.badge-featured { color: #594a00; background: #fff4bd; border: 1px solid #eadb8a; }
.badge-promotion { color: #7b4315; background: #fff0d4; border: 1px solid #e8c58d; }
.product-description { min-height: 13px; overflow: hidden; margin: -4px 0 8px; color: var(--muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.fulfilment-strip { display: grid; grid-template-columns: minmax(105px, auto) minmax(0, 1fr); align-items: center; gap: 6px; margin: -1px 0 9px; padding: 7px; color: #4f5b51; background: linear-gradient(135deg, #f6fbf5, #eef8ef); border: 1px solid #cfe7d2; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); font-family:Arial, sans-serif; font-size: 7px; line-height: 1.25; }
.fulfilment-strip[hidden] { display: none; }
.stock-promise-lead { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; color: #0f5e33; background: #d8f6e2; border: 1px solid #a8dfb9; border-radius: 999px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.stock-promise-lead i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(18,183,90,.12); }
.stock-promise-step { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 7px; color: #566157; background: rgba(255,255,248,.72); border: 1px solid rgba(207,231,210,.76); border-radius: 8px; text-align: center; white-space: nowrap; }
.stock-promise-lead[hidden], .stock-promise-step[hidden] { display: none; }
.stock-promise-step b { margin-right: 4px; color: #20251f; font-weight: 600; text-transform: uppercase; }
.fulfilment-strip.has-product-info { display: block; padding: 5px; background: #eef4eb; border-color: #d8e2d5; }
.product-info-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.product-info-strip[hidden] { display: none; }
.product-info-status, .product-info-button { min-width: 0; min-height: 39px; border-radius: 8px; font-family:Arial, sans-serif; }
.product-info-status { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; color: #0f5e33; background: #d8f6e2; border: 1px solid #a8dfb9; }
.product-info-status > i { flex: 0 0 7px; width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(18,183,90,.12); }
.product-info-status.is-restocking { color: #705b13; background: #fff4c9; border-color: #e8d78d; }
.product-info-status.is-restocking > i { background: #d49d13; box-shadow: 0 0 0 3px rgba(212,157,19,.12); }
.product-info-status.is-restocking small { color: #746c4a; }
.product-info-status.is-ended { color: #7b3535; background: #fbe4e1; border-color: #e8bbb6; }
.product-info-status.is-ended > i { background: #df4141; box-shadow: 0 0 0 3px rgba(223,65,65,.12); }
.product-info-status.is-ended small { color: #795d5d; }
.product-info-status span, .product-info-button span, .product-info-button strong { display: block; min-width: 0; }
.product-info-status strong, .product-info-button strong { font-size: 8px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; }
.product-info-status small { display: block; margin-top: 3px; color: #55705c; font-size: 7px; line-height: 1; }
.product-info-button { padding: 5px 7px; color: #333931; text-align: left; background: #fffef8; border: 1px solid #d8ddd4; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.product-info-button > span { margin-bottom: 4px; color: #7b8277; font-size: 7px; line-height: 1; text-transform: uppercase; }
.product-info-button:hover, .product-info-button:focus-visible { color: #fff; background: #20241f; border-color: #20241f; outline: 0; transform: translateY(-1px); }
.product-info-button:hover > span, .product-info-button:focus-visible > span { color: #b9c6ba; }
.product-info-dialog { width: min(calc(100% - 28px), 680px); max-height: calc(100vh - 28px); padding: 0; color: var(--ink); background: transparent; border: 0; }
.product-info-dialog::backdrop { background: rgba(17, 21, 17, .62); backdrop-filter: blur(5px); }
.product-info-modal { max-height: calc(100vh - 28px); overflow-y: auto; padding: 22px; background: #fffef8; border: 1px solid #cfd8cc; border-radius: 18px; box-shadow: 0 28px 90px rgba(16, 22, 17, .3); animation: product-info-enter .2s ease-out; }
.product-info-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #e1e5dd; }
.product-info-modal-header p { margin: 0 0 6px; color: #286a40; font-family:Arial, sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.product-info-modal-header h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.product-info-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #51584f; background: #eef1ea; border: 1px solid #d8ddd4; border-radius: 50%; font-size: 20px; line-height: 1; }
.product-info-close:hover, .product-info-close:focus-visible { color: #fff; background: var(--ink); border-color: var(--ink); outline: 0; }
.product-size-chart { margin: 18px 0 0; }
.product-size-chart img { display: block; width: 100%; height: auto; background: #f7f7f1; border: 1px solid #dfe4da; border-radius: 13px; }
.product-size-chart figcaption { margin-top: 8px; color: #7d8278; font-size: 9px; text-align: center; }
.product-description-panel { display: grid; gap: 15px; margin-top: 18px; }
.product-description-panel[hidden] { display: none; }
.product-description-section-label { margin: 0; color: #286a40; font-family:Arial, sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.product-description-highlights { padding: 17px; background: #edf6ed; border: 1px solid #d2e3d1; border-radius: 14px; }
.product-description-highlights ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.product-description-highlights li { position: relative; min-height: 62px; padding: 12px 12px 12px 34px; color: #293229; background: rgba(255,255,255,.74); border: 1px solid #dce9da; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1.45; }
.product-description-highlights li::before { position: absolute; top: 13px; left: 12px; display: grid; place-items: center; width: 14px; height: 14px; color: #fff; background: #2b7145; border-radius: 50%; content: "✓"; font-size: 8px; }
.product-description-highlights li:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
.product-description-details { padding: 17px; background: #fffef8; border: 1px solid #dedfd6; border-radius: 14px; }
.product-description-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #e4e5dd; }
.product-description-section-heading span { color: #7b8177; font-family:Arial, sans-serif; font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.product-description-details ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: product-detail; }
.product-description-details li { position: relative; padding: 14px 0 14px 43px; color: #343a33; border-bottom: 1px solid #e8e9e1; font-size: 11px; line-height: 1.65; counter-increment: product-detail; }
.product-description-details li:last-child { padding-bottom: 2px; border-bottom: 0; }
.product-description-details li::before { position: absolute; top: 14px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; color: #245f3a; background: #e1f1e3; border: 1px solid #c6dfca; border-radius: 8px; content: counter(product-detail, decimal-leading-zero); font-family:Arial, sans-serif; font-size: 8px; font-weight: 600; }
.product-description-fallback { margin: 0; padding: 18px; color: #2d332c; background: #f1f5ee; border: 1px solid #d9e3d6; border-radius: 13px; font-size: 13px; line-height: 1.65; }
.product-info-error { margin: 18px 0 0; padding: 18px; color: #7b5210; background: #fff6d8; border: 1px solid #ead697; border-radius: 13px; font-size: 11px; line-height: 1.5; text-align: center; }
.product-info-modal-actions { display: flex; justify-content: flex-end; margin-top: 17px; }
.product-info-modal-actions button { min-height: 36px; padding: 0 15px; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; font-size: 10px; font-weight: 700; }
@keyframes product-info-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.size-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.size { display: grid; place-items: center; min-height: 44px; padding: 4px 1px; border-radius: 5px; text-align: center; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.size:hover, .size:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(23,25,21,.18); outline: 0; }
.size.selected { box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 rgba(23,25,21,.08); transform: translateY(-1px); }
.size strong { display: block; font-family:Arial, sans-serif; font-size: 11px; font-weight: 700; }
.size small { display: block; max-width: 100%; margin-top: 2px; overflow: hidden; font-family:Arial, sans-serif; font-size: 8px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.size.in-stock { color: #0e4525; background: #c7f4d8; }
.size.restocking { color: #5b5600; background: #fff9a4; }
.size.incoming { color: #7f1d1d; background: #fecaca; }
.category-size-guide, .size-guide { margin: 0 0 14px; padding: 9px; overflow-x: auto; background: #f6f7ef; border: 1px solid #d9ded0; border-radius: 12px; }
.category-size-guide[hidden], .size-guide[hidden] { display: none; }
.size-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #30362e; font-family:Arial, sans-serif; text-transform: uppercase; }
.size-guide-heading span { overflow: hidden; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.size-guide-heading small { flex: 0 0 auto; color: #697064; font-size: 7px; font-weight: 600; letter-spacing: .02em; }
.size-guide-table { display: grid; gap: 3px; min-width: 390px; }
.size-guide-row { display: grid; grid-template-columns: minmax(82px, 1.2fr) repeat(8, minmax(0, 1fr)); gap: 3px; align-items: center; }
.size-guide-row span { display: grid; place-items: center; min-height: 20px; padding: 0 2px; color: #30362e; background: #fffefa; border: 1px solid #dfe3d8; border-radius: 5px; font-family:Arial, sans-serif; font-size: 8px; font-weight: 700; white-space: nowrap; }
.size-guide-row .size-guide-label { justify-content: start; padding-left: 5px; color: #575f52; background: transparent; border-color: transparent; text-align: left; text-transform: uppercase; }
.size-guide-note { display: inline-flex; align-items: center; min-height: 20px; margin: 7px 0 0; padding: 0 7px; color: #2f5d3b; background: #edf6ea; border: 1px solid #c9dfc5; border-radius: 999px; font-family:Arial, sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.size-selection-hint { margin: 7px 0 0; color: #85887f; font-size: 9px; }
.has-selected-size .size-selection-hint { color: #285b38; font-weight: 700; }
.product-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.product-link { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; color: #3f5f4c; background: #eef6ed; border: 1px solid #b7d7bc; border-radius: 999px; font-family:Arial, sans-serif; font-size: 9px; font-weight: 500; gap: 4px; letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: background .16s ease, transform .16s ease; }
.product-link:hover { background: #d6f0d8; transform: translateY(-1px); }
.product-link.taobao { color: #a34d18; background: #fff0e7; border-color: #ffd0b5; }
.product-link.yupoo { color: #365a8c; background: #edf4ff; border-color: #bfd5f3; }
.product-link.direct { color: #0f3f2b; background: #cbf4df; border-color: #7bc99e; }
.product-link.direct:hover { background: #b6efcf; }
.product-link.primary-purchase { justify-content: space-between; min-height: 31px; padding: 0 9px; border-radius: 7px; font-size: 9px; }
.product-link.qc-link { justify-content: center; min-height: 31px; border-radius: 7px; }
.product-link.direct em { padding: 2px 5px; color: #0e5130; background: rgba(255,255,255,.68); border: 1px solid rgba(123,201,158,.5); border-radius: 999px; font-style: normal; font-weight: 700; }
.product-link.batch-update-link { position: relative; grid-column: 1 / -1; justify-content: center; min-height: 34px; padding: 0 38px; color: #fff; background: var(--ink); border-color: var(--ink); border-radius: 7px; font-size: 8px; }
.product-link.batch-update-link:hover { color: #fff; background: #2b2e28; }
.batch-update-label { color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-align: center; }
.batch-update-arrow { position: absolute; right: 12px; color: #fff; font-size: 10px; }
.needs-size-selection .size-grid { padding: 3px; background: #fff5d1; border-radius: 8px; box-shadow: 0 0 0 1px #e4c55f; }
.needs-size-selection .size-selection-hint { color: #87530d; font-weight: 800; }
.agent-purchase { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-column: 1 / -1; gap: 8px; align-items: center; padding-top: 7px; border-top: 1px solid #e6e7de; }
.agent-label { color: #666a61; font-family:Arial, sans-serif; font-size: 7px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.agent-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.agent-links a { display: grid; place-items: center; min-height: 24px; padding: 0 5px; overflow: hidden; color: #575b52; background: #f0f0e9; border: 1px solid #e0e1d8; border-radius: 5px; font-family:Arial, sans-serif; font-size: 7px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.agent-links a:hover { color: var(--ink); background: #e4e6dc; }
.agent-links a.agent-link-promoted { grid-auto-flow: column; grid-auto-columns: max-content; gap: 5px; color: var(--ink); background: #fffef2; border-color: #d8d39d; }
.agent-links a.agent-link-promoted:hover { background: #fffbd9; border-color: #c8bf56; }
.agent-discount { padding: 2px 4px; color: #171914; background: var(--yellow); border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .03em; }
.empty-state { margin: 26px 0 6px; color: var(--muted); text-align: center; font-size: 13px; }
.notice { display: flex; gap: 11px; margin-top: 23px; padding: 13px; background: #efeee5; border-radius: 13px; color: #5d6058; font-size: 11px; line-height: 1.55; }
.notice-icon { display: grid; place-items: center; flex: 0 0 20px; height: 20px; color: #fff; background: var(--ink); border-radius: 50%; font-family:Arial, sans-serif; font-size: 12px; }
.notice p { margin: 0; }
.notice strong { color: var(--ink); }
.service-assurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-assurance article { display: flex; gap: 9px; min-width: 0; padding: 0 13px; border-left: 1px solid var(--line); }
.service-assurance article:first-child { padding-left: 0; border-left: 0; }
.service-assurance article:last-child { padding-right: 0; }
.service-assurance article > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; color: #fff; background: var(--ink); border-radius: 50%; font-family:Arial, sans-serif; font-size: 7px; }
.service-assurance strong, .service-assurance small { display: block; }
.service-assurance strong { font-size: 10px; line-height: 1.3; }
.service-assurance small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.mobile-action-bar { display: none; }
footer { display: flex; justify-content: space-between; padding-top: 20px; color: #898b83; font-family:Arial, sans-serif; font-size: 9px; letter-spacing: .03em; }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }

.direct-order-dialog { width: min(calc(100% - 28px), 620px); max-height: calc(100vh - 28px); padding: 0; color: var(--ink); background: transparent; border: 0; }
.direct-order-dialog::backdrop { background: rgba(17,21,17,.66); backdrop-filter: blur(6px); }
.direct-order-modal { max-height: calc(100vh - 28px); overflow-y: auto; padding: 22px; background: #fffef8; border: 1px solid #cbd8cc; border-radius: 18px; box-shadow: 0 28px 90px rgba(16,22,17,.34); animation: product-info-enter .2s ease-out; }
.direct-order-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.direct-order-header p { margin: 0 0 6px; color: #286a40; font-family:Arial, sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .08em; }
.direct-order-header h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.direct-order-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 18px 0 12px; }
.direct-order-steps span { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 10px; color: #70766e; background: #f0f1eb; border: 1px solid #dfe2d9; border-radius: 9px; font-family:Arial, sans-serif; font-size: 7px; font-weight: 600; }
.direct-order-steps span.active { color: #174f30; background: #dff4e4; border-color: #b4dabb; }
.direct-order-steps b { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; color: #fff; background: #858b83; border-radius: 50%; font-size: 7px; }
.direct-order-steps .active b { background: #2b7145; }
.direct-order-product { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 15px; color: #effbf2; background: #1f2d22; border-radius: 12px; }
.direct-order-product div { min-width: 0; }
.direct-order-product small, .direct-order-product strong { display: block; }
.direct-order-product small { margin-bottom: 4px; color: #aebdaf; font-family:Arial, sans-serif; font-size: 7px; text-transform: uppercase; }
.direct-order-product div strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.direct-order-product > strong { flex: 0 0 auto; padding: 6px 9px; color: #124a2b; background: #d8f6e2; border-radius: 999px; font-family:Arial, sans-serif; font-size: 9px; }
#direct-order-form { margin-top: 14px; }
.direct-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.direct-order-grid label, .direct-order-note { display: grid; gap: 6px; color: #555b54; font-size: 9px; font-weight: 700; }
.direct-order-grid .direct-order-field-help { margin-top: -2px; color: #7f867d; font-family:Arial, sans-serif; font-size: 7px; font-weight: 500; line-height: 1.35; }
.direct-order-grid input, .direct-order-grid select, .direct-order-note textarea { width: 100%; min-height: 42px; padding: 0 11px; color: #20241f; background: #f8f8f2; border: 1px solid #d8ddd4; border-radius: 9px; outline: 0; }
.direct-order-note { margin-top: 10px; }
.direct-order-note span small { color: #92968f; font-weight: 500; }
.direct-order-note textarea { min-height: 62px; padding-top: 10px; resize: vertical; font: inherit; }
.direct-order-grid input:focus, .direct-order-grid select:focus, .direct-order-note textarea:focus { background: #fff; border-color: #5ca676; box-shadow: 0 0 0 3px rgba(43,113,69,.1); }
.direct-order-assurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.direct-order-assurance span { display: grid; place-items: center; min-height: 34px; padding: 5px; color: #31563c; background: #edf5eb; border: 1px solid #d3e3d0; border-radius: 8px; font-family:Arial, sans-serif; font-size: 7px; text-align: center; }
.direct-order-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e0e3db; }
.direct-order-footer div small, .direct-order-footer div strong { display: block; }
.direct-order-footer div small { margin-bottom: 4px; color: #858a82; font-size: 7px; text-transform: uppercase; }
.direct-order-footer div strong { font-family:Arial, sans-serif; font-size: 9px; }
.direct-order-footer button { min-height: 43px; padding: 0 17px; color: #fff; background: #1f6d40; border: 1px solid #1f6d40; border-radius: 9px; font-size: 10px; font-weight: 800; }
.direct-order-footer button:hover, .direct-order-footer button:focus-visible { background: #175631; border-color: #175631; outline: 0; transform: translateY(-1px); }
.direct-order-disclaimer { margin: 10px 0 0; color: #7c8179; font-size: 8px; line-height: 1.45; text-align: right; }

@media (max-width: 500px) {
  body { padding-bottom: 68px; }
  .page-shell { padding: 13px 12px 24px; }
  .hero { padding: 13px 0 22px; }
  .brand-mark { width: 48px; height: 48px; margin-bottom: 13px; border-radius: 8px; }
  h1 { font-size: 31px; }
  .quick-links, .inventory { padding-top: 17px; }
  .section-heading { margin-bottom: 9px; }
  .link-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .link-stack .quick-link { grid-column: auto; }
  .quick-link { min-height: 76px; padding: 8px; gap: 6px; }
  .link-icon { flex-basis: 31px; width: 31px; height: 31px; border-radius: 7px; }
  .link-icon svg { width: 19px; height: 19px; }
  .link-copy strong { font-size: 9px; line-height: 1.25; white-space: normal; }
  .link-copy small, .quick-link .arrow { display: none; }
  .toolbar { display: block; }
  .search-box { margin-bottom: 8px; }
  .sort-box { display: inline-block; width: 142px; margin-right: 6px; vertical-align: top; }
  .filter-group { display: inline-flex; }
  .order-flow { padding: 11px; }
  .order-flow-heading { display: block; margin-bottom: 9px; }
  .payment-methods { justify-content: flex-start; margin-top: 8px; }
  .order-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-steps article { min-height: 112px; padding: 10px 8px; }
  .order-steps article:nth-child(odd) { padding-left: 0; border-left: 0; }
  .order-steps article:nth-child(n+3) { border-top: 1px solid #d5d8ce; }
  .category-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { grid-template-columns: 118px minmax(0, 1fr); }
  .product-content { padding: 12px 10px; }
  .size-grid { gap: 2px; }
  .size { min-height: 38px; }
  .size strong { font-size: 10px; }
  .size small { display: none; }
  .product-note { max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-price { font-size: 6px; }
  .fulfilment-strip { grid-template-columns: 1fr; gap: 4px; padding: 6px; font-size: 6px; }
  .stock-promise-lead, .stock-promise-step { justify-content: flex-start; min-height: 22px; padding: 0 7px; }
  .fulfilment-strip.has-product-info { padding: 4px; }
  .product-info-strip { gap: 3px; }
  .product-info-status, .product-info-button { min-height: 37px; padding: 4px 5px; }
  .product-info-status { gap: 5px; }
  .product-info-status strong, .product-info-button strong { font-size: 7px; }
  .product-info-status small, .product-info-button > span { font-size: 6px; }
  .product-info-modal { padding: 17px; border-radius: 14px; }
  .product-info-modal-header h2 { font-size: 18px; }
  .direct-order-dialog { width: min(calc(100% - 16px), 620px); max-height: calc(100vh - 16px); }
  .direct-order-modal { max-height: calc(100vh - 16px); padding: 16px; border-radius: 14px; }
  .direct-order-header h2 { font-size: 18px; }
  .direct-order-steps { margin-top: 14px; }
  .direct-order-steps span { justify-content: center; min-height: 34px; padding: 0 5px; font-size: 0; }
  .direct-order-steps span b { font-size: 7px; }
  .direct-order-product { padding: 12px; }
  .direct-order-product div strong { font-size: 12px; }
  .direct-order-product > strong { font-size: 8px; }
  .direct-order-grid { grid-template-columns: 1fr; gap: 8px; }
  .direct-order-grid input, .direct-order-grid select { min-height: 39px; }
  .direct-order-assurance { grid-template-columns: 1fr; gap: 4px; }
  .direct-order-assurance span { min-height: 28px; }
  .direct-order-footer { align-items: stretch; flex-direction: column; }
  .direct-order-footer button { width: 100%; }
  .direct-order-disclaimer { text-align: left; }
  .product-description-highlights ul { grid-template-columns: 1fr; }
  .product-description-highlights li:last-child:nth-child(odd) { grid-column: auto; }
  .category-size-guide, .size-guide { padding: 7px; }
  .size-guide-heading small { display: none; }
  .size-guide-table { min-width: 336px; }
  .size-guide-row { grid-template-columns: minmax(74px, 1.25fr) repeat(8, minmax(26px, 1fr)); gap: 2px; }
  .size-guide-row span { min-height: 18px; font-size: 7px; }
  .product-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-link { min-height: 20px; padding: 0 6px; font-size: 8px; }
  .product-link.primary-purchase, .product-link.qc-link { width: 100%; }
  .product-link.primary-purchase { display: grid; grid-template-columns: 1fr; place-items: center; gap: 1px; min-height: 34px; padding: 3px 5px; line-height: 1.15; }
  .product-link.primary-purchase > span[aria-hidden] { display: none; }
  .product-link.direct em { padding: 0; background: transparent; border: 0; font-size: 6px; }
  .product-link.qc-link { min-height: 34px; }
  .product-link.batch-update-link { min-height: 36px; padding: 0 34px; }
  .batch-update-label { font-size: 8px; }
  .batch-update-arrow { right: 10px; }
  .agent-purchase { grid-template-columns: 1fr; gap: 5px; }
  .agent-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-assurance { grid-template-columns: 1fr; gap: 0; }
  .service-assurance article { padding: 12px 0; border-top: 1px solid var(--line); border-left: 0; }
  .service-assurance article:first-child { padding-top: 0; border-top: 0; }
  .service-assurance article:last-child { padding-bottom: 0; }
  .mobile-action-bar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 7px; padding: 9px 12px max(9px, env(safe-area-inset-bottom)); background: rgba(247,247,241,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .mobile-action-bar a { display: grid; place-items: center; min-height: 42px; color: var(--ink); background: #fffefa; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-weight: 800; text-decoration: none; }
  .mobile-action-bar a.primary { color: #fff; background: var(--ink); border-color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .product-info-modal, .direct-order-modal { animation: none; }
}

/* XGO's own content and controls on the reference layout. */
.brand-mark{color:#fff;font-weight:800;letter-spacing:-1px;font-size:18px}
.quick-link[data-icon="yupoo"] .link-icon{color:#365a8c;background:#edf4ff}
svg.ui-icon{width:16px;height:16px;vertical-align:middle;flex:none;pointer-events:none}
.arrow svg{width:18px;height:18px}
button.size{border:0;font:inherit}
.product-image{object-position:center bottom}
.gallery-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:5px;background:#ede8e1;font-family:Arial, sans-serif;font-size:9px}
.gallery-nav button{border:1px solid #d5d7cc;background:#fffef8;border-radius:4px;width:28px;height:26px;padding:0;display:grid;place-items:center}
.gallery-nav button:disabled{opacity:.3;cursor:default}
.photo-column{min-width:0;background:#ede8e1}
.product-visual{width:100%;border:0;padding:0;cursor:zoom-in}
.product-card .size small{font-size:8px}
.detail-photo{width:100%;max-height:55vh;object-fit:contain;background:#ede8e1}
.product-details-copy{font-size:12px;line-height:1.7;color:#64685d;white-space:pre-line}
.info-size-list{display:flex;flex-wrap:wrap;gap:6px;padding:0;list-style:none;font:11px Arial, sans-serif}
.info-size-list li{padding:8px;background:#edf4e9;border-radius:5px}
#form-error{color:#a43c29;font-size:12px;line-height:1.5}
#form-error[hidden]{display:none}
.preview-message{width:100%;min-height:210px;font:12px/1.6 Arial, sans-serif;padding:12px;border:1px solid var(--line);background:#f7f7f1;border-radius:8px}
.confirm-link{display:inline-flex;align-items:center;gap:8px;min-height:43px;padding:0 17px;color:#fff;background:#1f6d40;border-radius:9px;text-decoration:none;font-size:12px}
button:focus-visible,a:focus-visible{outline:2px solid #286a40;outline-offset:3px}
button:disabled{cursor:default}
.refresh-button:disabled{opacity:.6}
.mobile-action-bar a{display:flex;align-items:center;justify-content:center;gap:8px}
@media(max-width:500px){.link-copy strong{min-height:20px}.product-links{grid-template-columns:1fr}.size-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.direct-order-grid input,.direct-order-grid select,.direct-order-note textarea{font-size:16px}.size-selection-hint{line-height:1.4}}

/* Only the local server injects this management bar. */
.local-tools{padding:12px 18px;background:#e8ede5;color:#314035;text-align:center;font:13px/1.6 Arial, sans-serif}.local-tools a{display:inline-block;margin-left:14px;color:inherit;font-weight:700;text-decoration:underline}

/* Social entries and six-part ordering guide. */
.link-stack{grid-template-columns:repeat(4,minmax(0,1fr))}
.link-stack .quick-link{grid-column:auto;min-height:132px;text-align:left;font:inherit;width:100%}
.link-copy strong{min-height:0;font-size:14px;margin-bottom:5px}
.link-copy small{font-size:11px;line-height:1.5}
.quick-link.is-placeholder{opacity:1}
.link-pending{font:9px/1.2 Arial, sans-serif;letter-spacing:.03em;color:#787d72;background:#eaece3;padding:4px 6px;border-radius:4px}
.quick-link[data-icon="instagram"] .link-icon{background:linear-gradient(35deg,#edb547,#d63772,#6c46bd)}
.quick-link[data-icon="telegram"] .link-icon{background:#229ed9}
.quick-link[data-icon="creator"]{background:#f0edf8;border-color:#d6d0e7}
.quick-link[data-icon="yupoo"] .link-icon{background:#fff;box-shadow:none}

.order-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.order-steps strong{font-size:12px}.order-steps small{font-size:11px}
@media(min-width:601px){
 .order-steps article{padding:16px;min-height:130px}
 .order-steps article:nth-child(3n+1){border-left:0;padding-left:0}
 .order-steps article:nth-child(3n){padding-right:0}
 .order-steps article:nth-child(n+4){border-top:1px solid #d5d8ce}
}
.vip-step strong{color:#217642}
.wechat-id{display:block;width:100%;padding:12px;margin:16px 0;font:16px Arial, sans-serif;border:1px solid var(--line);border-radius:8px}
@media(max-width:600px){
 .link-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
 .link-stack .quick-link{min-height:112px;padding:12px}
 .link-copy strong{font-size:13px}
 .order-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .order-steps article{padding:12px 10px;min-height:116px}
 .order-steps article:nth-child(odd){border-left:0;padding-left:0}
 .order-steps article:nth-child(n+3){border-top:1px solid #d5d8ce}
 .order-steps article:last-child{grid-column:auto;min-height:116px}
}

.dock-icon{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){
 body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 .mobile-action-bar{position:fixed;z-index:30;inset:auto 0 0;display:grid;grid-template-columns:.9fr 1.1fr;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(247,247,241,.97);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .mobile-action-bar a,.dock-unavailable{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px;color:var(--ink);background:#fffefa;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;text-decoration:none}
 .mobile-action-bar a.primary{color:#fff;background:var(--ink);border-color:var(--ink)}
 .dock-unavailable{opacity:.6;flex-wrap:wrap}.dock-unavailable small{font-size:9px}
}

/* Six reserved shoe-brand slots; all shoes remains a separate utility. */
.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.category-tab{min-height:76px;padding:14px 12px;border-radius:12px}
.category-tab strong{font-size:15px}.category-tab small{font-size:10px;margin-top:7px}
.brand-placeholder{border-style:dashed;background:transparent;color:#93988a}
.brand-placeholder:hover{transform:none;border-color:var(--line)}
.all-brands{padding:5px 0;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:11px;cursor:pointer}
.all-brands[aria-pressed="true"]{color:var(--ink);font-weight:700}
@media(max-width:600px){.category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tab{min-height:72px}.category-tab strong{font-size:14px}}

.link-icon img.yupoo-logo{width:100%;height:100%;object-fit:contain;border-radius:0}
img.dock-logo{width:26px;height:23px;object-fit:contain;flex-shrink:0;border-radius:5px;background:#fff}

/* Order guidance uses the same configured WhatsApp contact as the contact dock. */
.payment-methods a { text-decoration: none; }
.payment-methods a[href]:hover { color: #175631; border-color: #217642; background: #e6f3e8; }
.order-steps a { color: #217642; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
[data-order-whatsapp][aria-disabled="true"] { opacity: .6; cursor: default; }

/* Mobile catalogue: readable prices, comfortable filters and a horizontal enquiry action. */
@media (max-width: 600px) {
  .toolbar { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .toolbar .search-box { margin: 0; }
  .toolbar .sort-box { display: block; width: 100%; margin: 0; }
  .sort-box select { height: 44px; font-size: 14px; }
  .toolbar .filter-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .filter-group .filter { min-height: 44px; padding: 6px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
  .product-heading { flex-direction: column; gap: 8px; }
  .product-heading > div:first-child { width: 100%; }
  .product-heading h3 { white-space: normal; line-height: 1.35; }
  .product-heading-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
  .product-price { min-height: 26px; padding: 3px 6px; font-size: 13px; line-height: 1.2; border-radius: 5px; }
  .product-links { grid-template-columns: 1fr; gap: 7px; }
  .product-link.primary-purchase, .product-link.qc-link { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; min-height: 44px; padding: 8px 6px; font-family:Arial, sans-serif; font-size: 14px; line-height: 1.3; }
  .product-link.primary-purchase .enquiry-label { white-space: nowrap; }
  .product-link.direct em { padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: inherit; line-height: 1.3; white-space: nowrap; }
  .product-link.primary-purchase > svg, .product-link.qc-link > svg { display: block; margin-left: auto; }
  .product-link.primary-purchase .enquiry-label { margin-left: auto; }
  .product-link.qc-link { position: relative; padding-right: 28px; padding-left: 28px; }
  .product-link.qc-link > svg { position: absolute; right: 6px; }
}
@media (max-width: 380px) {
  .product-card { grid-template-columns: 88px minmax(0, 1fr); }
  .product-link.primary-purchase, .product-link.qc-link { font-size: 13px; gap: 4px; }
}

/* Accepted payment methods in the ordering guide. */
.payment-methods { align-items: center; }
.payment-methods > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; }
.payment-methods > .payment-badge { font-family:Arial, sans-serif; font-size: 12px; text-transform: none; }
.payment-icon { display: block; width: 21px; height: 21px; flex: 0 0 21px; }
@media(max-width:600px) { .size-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }

.payment-methods > .payment-badge[hidden] { display: none; }

.optional-label { color: #217642; font-weight: 700; }
.product-link.primary-purchase, .product-link.qc-link { font-weight:700; }

/* Keep the previous mobile type sizes; the larger type is desktop-only. */
@media (max-width:600px) {
 .order-steps strong { font-size:11px; }
 .order-steps small { font-size:10px; }
 .step-number { font-size:8px; }
 .product-badges span { font-size:6px; }
 .product-info-status strong, .product-info-button strong { font-size:7px; }
 .product-info-status small, .product-info-button > span { font-size:6px; }
 .size strong { font-size:10px; }
 .product-card .size small { font-size:7px; }
 .size-selection-hint { font-size:8px; }
 .product-link { font-size:8px; }
 .product-link.primary-purchase, .product-link.qc-link { font-size:12px; }
}
@media (max-width:500px) {
 .product-info-status strong, .product-info-button strong { font-size:6px; }
 .product-info-status small, .product-info-button > span { font-size:5px; }
 .size strong { font-size:9px; }
}
@media (max-width:380px) {
 .product-link.primary-purchase, .product-link.qc-link { font-size:11px; }
}

/* Catalogue polish: consistent spacing, quieter metadata and aligned controls. */
.quick-link, .order-flow, .category-panel, .product-card { border-radius:var(--radius-panel); }
.category-tab, .search-box, .sort-box, .refresh-button { border-radius:var(--radius-control); }
.product-grid { gap:12px; }
.product-content { padding:16px; }
.product-heading { gap:12px; margin-bottom:8px; }
.product-heading h3 { margin-top:6px; color:var(--ink); font-weight:700; line-height:1.35; white-space:normal; overflow-wrap:break-word; }
.product-heading-meta { gap:6px; }
.product-note { color:#70756b; letter-spacing:.02em; }
.product-price { border-radius:var(--radius-label); font-variant-numeric:tabular-nums; }
.product-badges { gap:4px; }
.product-badges span { min-height:16px; border-radius:var(--radius-label); }
.product-description { margin:0 0 12px; color:#6b7066; line-height:1.5; white-space:normal; }
.fulfilment-strip.has-product-info { padding:4px; margin:0 0 12px; border-radius:var(--radius-panel); box-shadow:none; }
.product-info-strip { gap:4px; align-items:stretch; }
.product-info-status, .product-info-button { min-height:44px; padding:6px; border-radius:var(--radius-control); }
.product-info-button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.product-info-button > span { margin-bottom:4px; }
.product-info-button strong, .product-info-status strong { line-height:1.3; }
.product-info-status small { line-height:1.3; }
.size-grid { gap:4px; }
.size { border-radius:var(--radius-control); }
.size-selection-hint { margin:8px 0 0; color:#70756b; line-height:1.5; }
.product-links { gap:8px; margin-top:8px; }
.product-link.primary-purchase, .product-link.qc-link {
 position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center;
 min-height:36px; gap:4px; padding:8px 26px 8px 8px; border-radius:var(--radius-control); line-height:1.3;
}
.product-link.primary-purchase .enquiry-label { margin-left:0; }
.product-link.direct em { padding:0; border:0; border-radius:0; background:transparent; font-size:inherit; font-weight:inherit; }
.product-link.primary-purchase > svg, .product-link.qc-link > svg { position:absolute; right:8px; margin:0; }
.gallery-nav { padding:8px; }
.gallery-nav button { border-radius:var(--radius-label); }
@media(max-width:600px) {
 .product-content { padding:12px; }
 .product-heading { gap:8px; }
 .product-description { margin-bottom:12px; }
 .product-link.primary-purchase, .product-link.qc-link { min-height:44px; }
}

/* Responsive finishing pass: preserve type sizes and the established palette. */
:root { --section-gap:32px; --soft-line:#e2e4db; }
.hero { padding:20px 0 28px; }
.hero .brand-mark { margin-bottom:16px; }
.hero h1 { margin:10px 0 12px; line-height:1.08; }
.hero-copy { margin-bottom:14px; line-height:1.45; }
.quick-links, .inventory { border-top-color:var(--soft-line); padding-top:24px; }
.order-flow { margin:var(--section-gap) 0 0; }
.inventory { margin-top:var(--section-gap); }
.service-assurance, .notice { margin-top:var(--section-gap); }
.service-assurance { border-color:var(--soft-line); }
.section-heading, .inventory-topline { margin-bottom:16px; }
.link-stack { gap:10px; }
.link-stack .quick-link { min-height:154px; padding:14px; gap:10px; }
.link-icon { flex:0 0 36px; width:36px; height:36px; border-radius:9px; }
.link-icon svg { width:22px; height:22px; }
.link-copy { width:100%; }
.link-copy strong { margin:0 0 6px; line-height:1.3; }
.link-copy small { line-height:1.45; }
.link-pending { margin-top:auto; align-self:flex-start; }
.quick-link .arrow { top:14px; right:14px; color:#757a70; }
.order-flow { padding:18px; }
.order-flow-heading { margin-bottom:16px; align-items:center; }
.order-steps, .order-steps article { border-color:var(--soft-line); }
.order-steps strong { margin-top:10px; }
.order-steps small { max-width:32ch; margin-top:6px; }
.category-tab.active { box-shadow:inset 0 0 0 1px var(--ink); }
.size.selected, .size.selected:hover, .size.selected:focus-visible {
 transform:none; box-shadow:inset 0 0 0 2px var(--ink);
}
.size:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.product-image.is-overall { transform:translateY(-2%) scale(1.08); transform-origin:50% 60%; }
.gallery-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:2px; align-items:center; padding:4px; color:#5e6259; }
.gallery-nav > span { min-width:26px; text-align:center; font-variant-numeric:tabular-nums; }
.gallery-nav button { width:100%; height:32px; border-color:transparent; background:transparent; color:#444c40; }
.gallery-nav button:disabled { opacity:.25; }
.gallery-nav button .ui-icon { width:15px; height:15px; }
.quick-link, .category-tab, .product-link, .product-info-button, .size {
 transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.product-link:hover, .product-info-button:hover, .product-info-button:focus-visible,
.size:hover, .direct-order-footer button:hover, .direct-order-footer button:focus-visible { transform:none; }
@media (hover:hover) and (pointer:fine) {
 .product-info-button:hover { color:#333931; background:#edf1e8; border-color:#a1a398; }
 .product-info-button:hover > span { color:#697261; }
 .product-link.qc-link:hover { background:#e0eafa; border-color:#91afd9; }
 .gallery-nav button:not(:disabled):hover { background:rgba(255,254,248,.65); border-color:#d5d7cc; }
 .size:not(.selected):hover { box-shadow:inset 0 0 0 1px #7d8878; }
}
@media (min-width:601px) {
 .order-steps article { min-height:132px; padding:18px 16px; }
 .order-steps article:nth-child(n+4) { border-top-color:var(--soft-line); }
 .order-steps strong { min-height:2.7em; display:flex; align-items:flex-start; }
}
@media (min-width:901px) {
 .page-shell { width:min(100%,880px); }
 .product-card { grid-template-columns:184px minmax(0,1fr); }
}
@media (max-width:767px) {
 html { scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
 body { padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
 .mobile-action-bar { border-top-color:rgba(116,118,109,.18); box-shadow:0 -3px 14px rgba(23,25,21,.035); }
 .gallery-nav button { height:44px; }
}
@media (max-width:600px) {
 :root { --section-gap:24px; }
 .hero { padding:12px 0 24px; }
 .hero .brand-mark { margin-bottom:12px; }
 .hero h1 { margin:8px 0 10px; }
 .hero-copy { margin-bottom:12px; }
 .quick-links, .inventory { padding-top:18px; }
 .section-heading, .inventory-topline { margin-bottom:12px; }
 .link-stack { gap:8px; }
 .link-stack .quick-link { min-height:124px; padding:12px; gap:8px; }
 .link-icon { flex-basis:32px; width:32px; height:32px; border-radius:8px; }
 .link-icon svg { width:20px; height:20px; }
 .link-copy strong { min-height:0; margin-bottom:0; }
 .link-copy small { display:-webkit-box; margin-top:6px; }
 .quick-link .arrow { display:none; }
 .order-flow { padding:12px; }
 .order-flow-heading { margin-bottom:12px; }
 .order-steps article:nth-child(n+3) { border-top-color:var(--soft-line); }
 .order-steps strong { margin-top:8px; }
 .order-steps small { margin-top:5px; }
 .gallery-nav > span { min-width:24px; }
}
@media (hover:none) {
 .product-info-button:hover { color:#333931; background:#fffef8; border-color:#d8ddd4; }
 .product-info-button:hover > span { color:#7b8277; }
 .size:not(.selected):hover { box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .quick-link, .category-tab, .product-link, .product-info-button, .size { transition:none; }
}

.brand-mark.has-avatar{overflow:hidden;padding:0;background:#fffef9}.brand-mark.has-avatar img{display:block;width:100%;height:100%;object-fit:contain}

/* Full original photographs, consistent category and product presentation. */
.category-tabs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.category-tab{max-width:360px}.product-image.is-overall,.product-image.is-detail{transform:none;object-fit:contain;width:100%;height:100%}.product-visual.has-image{aspect-ratio:3/4;background:#eeede8}.product-heading h3{line-height:1.4;overflow-wrap:anywhere}.product-badges{flex-wrap:wrap}.product-price{white-space:nowrap}.detail-photo{display:block;max-width:100%;height:auto;object-fit:contain}.product-info-modal figure{margin:0 0 22px}.product-info-modal figcaption{font-size:11px;color:#72796b;margin-top:7px}.product-description{line-height:1.5}
@media(min-width:601px){.product-card{grid-template-columns:224px minmax(0,1fr)}.product-visual.has-image{min-height:280px}}
@media(max-width:600px){.product-card{grid-template-columns:1fr}.photo-column{width:100%;display:block}.product-visual.has-image{width:100%;height:300px;aspect-ratio:auto}.gallery-nav{padding:0 8px;border-bottom:1px solid #dedfd3}.product-content{padding:16px}.product-heading h3{font-size:16px}.product-card .size strong{font-size:13px}.product-card .size small{font-size:10px}.category-tab{max-width:none}.product-info-modal{padding:18px}.product-badges{margin-bottom:8px}}
@media(max-width:600px){.product-card .size{min-height:48px}.product-card .size small{display:block;font-size:10px;line-height:1.3}.product-card .size strong{line-height:1.4}}
.product-link.yupoo-pending:disabled{opacity:1;cursor:default;background:#edf3fd;color:#4c6484;border:1px solid #bdd0e8;padding-right:8px;gap:8px}.yupoo-pending small{font-size:9px;font-weight:400;color:#687b96}.product-link.yupoo-pending:hover{background:#edf3fd;border-color:#bdd0e8}

/* Balance desktop information against the photo column; keep mobile spacing unchanged. */
@media (min-width:601px) {
 .product-content { align-self:center; }
 .product-heading-meta { align-self:center; }
 .product-heading-meta .product-note { display:none; }
}

.photo-column { position:relative; }
.gallery-load-status { position:absolute; z-index:4; top:10px; right:10px; max-width:calc(100% - 20px); padding:7px 10px; border:1px solid #d8ddd4; border-radius:8px; background:rgba(255,254,248,.95); color:#51584f; font:11px/1.4 Arial,sans-serif; pointer-events:none; }
.gallery-load-status[hidden] { display:none; }

/* Six collections share the same grid in the stock category section. */
.category-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.category-tab { max-width:none; min-width:0; }
.category-tab strong { white-space:normal; overflow-wrap:break-word; }
@media (max-width:600px) {
 .category-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.category-size-guide{padding:0!important;overflow:visible!important;background:none!important;border:0!important;border-radius:0;min-width:0}
.shoe-size-guide{margin:0 0 16px;padding:16px 18px;background:#f6f7ef;border:1px solid #d9ded0;border-radius:18px;min-width:0;max-width:100%;font-family:var(--font-mono,monospace)}
.shoe-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#30362e;font-size:12px;letter-spacing:.035em}
.shoe-guide-heading span{font-size:10px;color:#697064}.shoe-guide-scroll{max-width:100%;overflow-x:auto;border-radius:8px;scrollbar-width:thin}.shoe-guide-scroll:focus-visible{outline:2px solid #4d7254;outline-offset:2px}
.shoe-guide-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:5px;table-layout:fixed;font-size:12px;color:#30362e}
.shoe-guide-table th,.shoe-guide-table td{text-align:center;background:#fffefa;border:1px solid #dfe3d8;border-radius:7px;padding:8px 3px;font-weight:600}
.shoe-guide-table th[scope=row]{width:142px;text-align:left;background:none;border-color:transparent;color:#575f52;font-size:11px;white-space:nowrap}
.shoe-guide-table .is-selected{background:#e4f0df;border-color:#759669;box-shadow:inset 0 0 0 1px #759669}
.shoe-guide-footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px}.shoe-guide-fit{padding:7px 11px;color:#2f5d3b;background:#edf6ea;border:1px solid #c9dfc5;border-radius:999px;font-size:11px;font-weight:600}.shoe-guide-selection{color:#406645;font-size:11px}.shoe-guide-description{margin:9px 0 0;color:#697064;font:11px/1.5 Arial,sans-serif}.shoe-guide-scroll-hint{display:none;color:#697064;font:11px/1.5 Arial,sans-serif;margin:6px 0 0}
@media(max-width:700px){.shoe-size-guide{padding:12px;border-radius:14px}.shoe-guide-heading{font-size:11px;align-items:flex-start}.shoe-guide-heading span{font-size:9px;max-width:90px;text-align:right}.shoe-guide-table{min-width:620px}.shoe-guide-scroll-hint{display:block}}

.link-copy small{overflow-wrap:anywhere;white-space:pre-line}