.yjk-diy-root {
  --yjk-ink: #262626;
  --yjk-muted: #7c7c86;
  --yjk-line: #eadbc9;
  --yjk-bg: #f3f5f8;
  --yjk-panel: rgba(255, 255, 255, .92);
  --yjk-accent: #111827;
  --yjk-accent-2: #d6a85f;
  color: var(--yjk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* Compact designer header: keep navigation and price available as a small
   overlay, while removing the branded title row from the layout. */
.yjk-diy-app { position: relative; }
.yjk-diy-header {
  position: absolute !important;
  inset: 0 0 auto 0;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
  z-index: 40;
}
.yjk-brand { display: none !important; }
.yjk-diy-header .yjk-icon-btn {
  position: absolute;
  top: 12px;
  left: 14px;
  pointer-events: auto;
}
.yjk-header-price {
  position: absolute;
  top: 15px;
  right: 14px;
  pointer-events: none;
}
.yjk-design-shell { height: 100vh; min-height: 620px; }

/* Checkout details must be a real scrolling surface. */
.yjk-diy-app:has(.yjk-confirm-shell) { overflow: visible !important; }
.yjk-confirm-shell {
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  .yjk-diy-header .yjk-icon-btn { top: 10px; left: 10px; }
  .yjk-header-price { top: 13px; right: 10px; }
  .yjk-design-shell {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-rows: minmax(390px, 56vh) minmax(360px, 44vh) !important;
  }
  .yjk-confirm-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding-top: 12px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* App-shell pass: the designer and checkout are product surfaces, so they
   should own the viewport instead of inheriting the theme's document chrome.
   These rules intentionally come last to win over the older recovery layers. */
body.yjk-diy-page #wpadminbar {
  display: none !important;
}
html:has(body.yjk-diy-page .yjk-diy-root),
body.yjk-diy-page {
  margin-top: 0 !important;
  background: #e9edf3;
}

.yjk-diy-root {
  position: relative !important;
  z-index: 1;
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 20px auto 0 !important;
  overflow: visible !important;
  padding: 0 12px;
}

.yjk-diy-app {
  width: 100% !important;
  min-height: calc(100dvh - 20px);
  overflow: hidden !important;
  border: 1px solid #dfe5ed;
  border-radius: 24px;
  background: #f4f6f9;
  box-shadow: 0 18px 50px rgba(36, 48, 66, .12);
}

.yjk-diy-header {
  position: sticky !important;
  inset: auto !important;
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center;
  gap: 8px;
  padding: 0 16px !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(222, 228, 237, .9) !important;
  background: rgba(255, 255, 255, .84) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 200;
}

.yjk-brand {
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.yjk-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.yjk-brand strong {
  display: block;
  min-width: 0;
  max-width: min(60vw, 280px);
  color: #273142;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yjk-diy-header .yjk-icon-btn {
  position: static !important;
  width: 36px;
  height: 36px;
  pointer-events: auto !important;
  border: 1px solid #e0e6ee;
  background: #fff;
  color: #3b4657;
  box-shadow: 0 3px 10px rgba(37, 49, 67, .08);
}

.yjk-design-shell {
  height: calc(100dvh - 78px) !important;
  min-height: 640px !important;
}

.yjk-confirm-shell {
  height: calc(100dvh - 78px) !important;
  min-height: 0 !important;
  padding: 18px 20px max(28px, env(safe-area-inset-bottom)) !important;
  background: #eef2f7;
}

.yjk-confirm-top {
  position: sticky;
  top: 0;
  z-index: 15;
  border: 1px solid rgba(225, 231, 239, .95);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(52, 65, 84, .09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.yjk-confirm-top strong {
  color: #202938;
  font-weight: 750;
}

.yjk-confirm-top button,
.yjk-pay-main {
  min-height: 42px !important;
  border-radius: 12px !important;
  font-weight: 650;
}

.yjk-confirm-top .yjk-pay-main {
  background: #5167d9 !important;
  box-shadow: 0 7px 16px rgba(81, 103, 217, .22);
}

.yjk-order-card,
.yjk-checkout-card,
.yjk-bead-details {
  border: 1px solid rgba(225, 231, 239, .95);
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(52, 65, 84, .07);
}

.yjk-checkout-card h3 {
  margin: 0 0 18px;
  color: #273142;
  font-size: 18px;
  font-weight: 700;
}

.yjk-checkout-card label {
  gap: 7px;
  margin-bottom: 14px;
  color: #6d7787;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.yjk-checkout-card input,
.yjk-checkout-card textarea,
.yjk-checkout-card select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #e1e6ee !important;
  border-radius: 12px !important;
  padding: 12px 13px !important;
  outline: none;
  background: #f8fafc !important;
  color: #273142;
  font: inherit;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.yjk-checkout-card input:focus,
.yjk-checkout-card textarea:focus,
.yjk-checkout-card select:focus {
  border-color: #8798e6 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(81, 103, 217, .12);
}

.yjk-checkout-card textarea {
  min-height: 92px;
  resize: vertical;
}

.yjk-cost-line.is-total {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #edf0f4;
  color: #6d7787;
}

.yjk-cost-line.is-total b {
  color: #ef6262;
  font-size: 22px;
}

.yjk-bead-details {
  margin-top: 16px;
  overflow: hidden;
}

.yjk-bead-details summary {
  padding: 15px 18px;
  color: #273142;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  .yjk-diy-root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .yjk-diy-app {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .yjk-diy-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: max(6px, env(safe-area-inset-top)) 12px 6px !important;
  }

  .yjk-brand strong {
    max-width: 48vw;
    font-size: 13px;
  }

  .yjk-design-shell {
    height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    grid-template-rows: minmax(320px, 46dvh) minmax(380px, 1fr) !important;
  }

  .yjk-confirm-shell {
    height: calc(100dvh - 56px) !important;
    padding: 10px 12px max(24px, env(safe-area-inset-bottom)) !important;
  }

  .yjk-confirm-top {
    top: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    gap: 8px;
    padding: 10px !important;
    border-radius: 14px;
  }

  .yjk-confirm-top > div {
    grid-column: 1 / -1;
    padding: 2px 3px 4px;
  }

  .yjk-confirm-top strong {
    font-size: 24px;
  }

  .yjk-confirm-top button {
    width: 100%;
    padding: 0 10px !important;
    font-size: 13px;
  }

  .yjk-order-card,
  .yjk-checkout-card {
    padding: 14px !important;
  }

  .yjk-checkout-card h3 {
    margin-bottom: 16px;
    font-size: 17px;
  }

  .yjk-checkout-card label {
    margin-bottom: 12px;
  }

  .yjk-checkout-card input,
  .yjk-checkout-card textarea,
  .yjk-checkout-card select {
    min-height: 46px !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  .yjk-checkout-card textarea {
    min-height: 88px !important;
  }
}

/* Release 1.0.22: keep the empty canvas free of instructional chrome and
   reserve more of the first viewport for the bead catalog. */
.yjk-canvas-empty-label { display: none !important; }
.yjk-design-shell { grid-template-rows: minmax(320px, 44vh) minmax(350px, 56vh) !important; }
@media (max-width: 760px) {
  .yjk-design-shell { grid-template-rows: minmax(300px, 40dvh) minmax(390px, 1fr) !important; }
}
.yjk-header-price { display: none !important; }
.yjk-diy-header .yjk-icon-btn {
  z-index: 220 !important;
  pointer-events: auto !important;
  cursor: pointer;
}

/* Final compact designer balance: the empty canvas needs no instructional
   banner, so give the material picker more of the first viewport. */
.yjk-design-shell {
  grid-template-rows: minmax(320px, 44vh) minmax(350px, 56vh) !important;
}
@media (max-width: 760px) {
  .yjk-design-shell {
    grid-template-rows: minmax(300px, 40dvh) minmax(390px, 1fr) !important;
  }
}
.yjk-canvas-empty-label { display: none !important; }

/* Keep the bead-count feedback above the bracelet's top arc. */
.yjk-count-status {
  top: 6px !important;
}
@media (max-width: 760px) {
  .yjk-count-status {
    top: 4px !important;
    max-width: calc(100% - 170px);
  }
}

.yjk-diy-root *,
.yjk-diy-root *::before,
.yjk-diy-root *::after {
  box-sizing: border-box;
}

/* The shortcode may be rendered inside a theme's narrow content column. Keep
   the designer as a full-bleed workspace, matching the mini-program canvas. */
.yjk-diy-root {
  position: relative;
  width: 100%;
  max-width: none !important;
  left: 0;
  transform: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0 !important;
  overflow-x: hidden;
}
.yjk-diy-page:has(.yjk-diy-root) { overflow-x: hidden; }
html:has(body.yjk-diy-page .yjk-diy-root) { overflow-x: hidden; }

.yjk-style-japanese {
  --yjk-bg: #f5f8f7;
  --yjk-line: #d8e6e1;
  --yjk-accent: #4f8f86;
  --yjk-accent-2: #d9b56d;
}

.yjk-style-southeast_asian {
  --yjk-bg: #fbf4e9;
  --yjk-line: #ead2b2;
  --yjk-accent: #b85c3a;
  --yjk-accent-2: #d6a54e;
}

.yjk-diy-app{background:#f4f5f7;color:#17191c;border:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;overflow-wrap:anywhere}
.yjk-diy-page .site-header,.yjk-diy-page .site-footer,.yjk-diy-page .entry-header,.yjk-diy-page .page-header,.yjk-diy-page .wp-block-template-part{display:none!important}
.yjk-diy-page .wp-block-post-title{display:none!important}
.yjk-diy-page .wp-block-group:has(.yjk-diy-root){padding-top:0!important;padding-bottom:0!important}
.yjk-diy-page main:has(.yjk-diy-root){margin-top:0!important}
.yjk-diy-page .site-main,.yjk-diy-page .content-area,.yjk-diy-page .entry-content{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
.yjk-diy-header{height:64px;padding:0 28px;background:rgba(255,255,255,.96);border-bottom:1px solid #e6e9ee;grid-template-columns:44px 1fr auto;position:relative}
.yjk-icon-btn{box-shadow:none;border:1px solid #e7e0d7;width:34px;height:34px}
.yjk-brand-mark{background:#202020;color:#f4d8a2}
.yjk-design-shell{height:calc(100vh - 64px);min-height:680px;display:grid;grid-template-rows:minmax(420px,1fr) 330px}
.yjk-canvas-panel{position:relative;background:linear-gradient(135deg,#f8fafb 0%,#eef1f4 100%);display:grid;place-items:center}
.yjk-featured-ad{position:absolute;left:24px;top:24px;z-index:6;display:grid;gap:5px;width:min(230px,calc(100% - 48px));padding:14px 42px 14px 16px;border:1px solid rgba(214,168,95,.55);border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,248,232,.96));box-shadow:0 10px 24px rgba(45,36,24,.12)}
.yjk-featured-ad strong{color:#493719;font-size:14px}.yjk-featured-ad span{color:#7b6b54;font-size:12px;line-height:1.35}.yjk-featured-ad-cta{justify-self:start;border:0;padding:0;color:#8b6428;background:transparent;font-size:12px;cursor:pointer}.yjk-featured-ad-close{position:absolute;top:7px;right:9px;width:24px;height:24px;border:0;color:#8c7b61;background:transparent;cursor:pointer}
.yjk-bracelet-canvas{width:100%;height:100%;max-height:100%;background:radial-gradient(circle at center,#fff 0,#f4f1ec 65%,#ece7df 100%)}
.yjk-side-tools{left:24px;top:24px;gap:10px}.yjk-side-tools button{border:1px solid #e4ddd3;border-radius:6px;min-width:110px;text-align:left;padding:0 14px}.yjk-side-tools button span{margin-left:6px}
.yjk-float-info{right:24px;top:24px}.yjk-float-info button{width:58px;height:58px;border:1px solid #e4ddd3;border-radius:8px;display:grid;place-items:center;font-size:18px}.yjk-float-info small{font-size:10px;color:#756d64}
.yjk-delete-zone{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);padding:8px 18px;border:1px dashed #cdbfae;border-radius:20px;color:#897b6b;font-size:12px;background:rgba(255,255,255,.7)}
.yjk-delete-zone{opacity:0;pointer-events:none;transition:.18s ease;background:#fff4f1;color:#a44b3b;border-color:#cc8d82;z-index:5}.yjk-delete-zone.is-visible{opacity:1}.yjk-delete-zone.is-active{background:#b64332;color:#fff;border-color:#b64332;transform:translateX(-50%) scale(1.06)}
.yjk-canvas-empty{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#a49a8e;font-size:16px;pointer-events:none}
.yjk-canvas-empty-label{position:absolute;top:18px;left:50%;z-index:3;width:min(84%,420px);transform:translateX(-50%);padding:10px 16px;border:1px solid rgba(229,224,216,.9);border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(60,48,35,.06);color:#8f857b;font-size:clamp(14px,1.45vw,16px);font-weight:600;line-height:1.4;text-align:center;overflow-wrap:anywhere;pointer-events:none}
.yjk-picker-panel{background:#fff;border-top:1px solid #e8e0d6;grid-template-rows:58px 1fr}
.yjk-picker-toolbar{height:58px;grid-template-columns:130px minmax(220px,420px) auto;padding:8px 24px;border-bottom:1px solid #eee8e0}
.yjk-search{border:1px solid #d9dee6;border-radius:999px;background:#fff;height:38px}.yjk-finish{border-radius:999px;background:#111827;min-height:38px;box-shadow:0 8px 18px rgba(17,24,39,.16)}
.yjk-picker-body{display:grid;grid-template-columns:180px 1fr;min-height:0}.yjk-filter-sidebar{padding:12px 10px;border-right:1px solid #eee8e0;overflow:auto}.yjk-filter-sidebar button{display:flex;width:100%;border:0;background:transparent;padding:9px 12px;border-radius:5px;color:#675f56;text-align:left;cursor:pointer}.yjk-filter-sidebar button.is-active{background:#2b2926;color:#fff}.filter-title{font-size:11px;color:#9a8d7e;padding:6px 12px;text-transform:uppercase;letter-spacing:.08em}.filter-section{margin-top:12px;border-top:1px solid #eee8e0;padding-top:8px}.filter-section-head{justify-content:space-between!important;font-weight:600}.filter-section-head i{font-style:normal}.yjk-picker-content{min-width:0;display:grid;grid-template-rows:48px 1fr}.yjk-category-tabs{display:flex;gap:8px;align-items:center;padding:8px 18px;overflow:auto;border-bottom:1px solid #f0ebe5}.yjk-category-tabs button{border:0;background:#f3f0eb;border-radius:4px;padding:7px 15px;white-space:nowrap}.yjk-category-tabs button.is-active{background:#2b2926;color:#fff}.yjk-bead-grid{padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;overflow:auto}.yjk-bead-card{min-height:150px;border:1px solid #e8e0d7;border-radius:6px;background:#fff;grid-template-rows:78px auto auto;padding:9px}.yjk-bead-card:hover{border-color:#b79873;transform:translateY(-1px)}.yjk-bead-card img{width:78px;height:72px}.yjk-stock{top:8px;left:8px;transform:none;background:#eee8df;color:#75624e}.yjk-bead-card span:last-child{color:#8e6d46}.yjk-empty-state{grid-column:1/-1;display:grid;place-items:center;color:#a2978b}
.yjk-modal-backdrop{position:fixed;inset:0;background:rgba(27,24,20,.42);z-index:60;display:grid;place-items:center;padding:20px}.yjk-modal{position:relative;width:min(460px,100%);background:#fff;border-radius:10px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.22)}.yjk-modal>button:first-child{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:24px;color:#756d64}.yjk-modal h2{margin:0 0 8px}.wrist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.wrist-grid button{border:1px solid #e5ddd3;background:#fff;padding:12px;border-radius:5px}.wrist-grid button.is-active{background:#2b2926;color:#fff}.wrist-grid small{display:block;font-size:10px;opacity:.7}.guide-link{border:0;background:none;color:#947450}.guide-ruler{height:120px;border:1px dashed #cdbca7;display:grid;place-items:center;margin:20px 0;color:#8c745a}.bead-detail-modal{text-align:center}.bead-detail-modal>img{width:170px;height:170px;object-fit:contain}.detail-chips{display:flex;gap:6px;justify-content:center}.detail-chips span{padding:5px 10px;border-radius:20px;background:#f1ece5;font-size:12px}.yjk-toast-host{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);opacity:0;background:#292621;color:#fff;padding:10px 18px;border-radius:5px;z-index:80;transition:.2s}.yjk-toast-host.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.yjk-guide-image{display:block;width:100%;max-height:300px;object-fit:contain;border-radius:6px;margin:18px 0;background:#f7f4ef}
@media(max-width:760px){.yjk-diy-header{height:54px;padding:0 14px}.yjk-design-shell{height:auto;min-height:calc(100vh - 54px);grid-template-rows:52vh auto}.yjk-canvas-panel{min-height:360px}.yjk-side-tools{left:10px;top:12px}.yjk-side-tools button{min-width:38px;width:38px;padding:0;text-align:center}.yjk-side-tools button span{display:none}.yjk-float-info{right:10px;top:12px}.yjk-float-info button{width:42px;height:42px}.yjk-float-info small{display:none}.yjk-picker-panel{grid-template-rows:58px auto}.yjk-picker-toolbar{grid-template-columns:54px 1fr 110px;padding:8px 10px}.yjk-clear{font-size:0}.yjk-clear:first-letter{font-size:18px}.yjk-picker-body{grid-template-columns:92px 1fr;min-height:380px}.yjk-filter-sidebar{padding:8px 5px}.yjk-filter-sidebar button{font-size:11px;padding:9px 6px}.yjk-category-tabs{padding:8px 10px}.yjk-bead-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px}.yjk-bead-card{min-height:140px}.yjk-confirm-grid{grid-template-columns:1fr}.yjk-confirm-shell{padding:10px}.yjk-confirm-top{grid-template-columns:1fr auto auto;padding:10px;border-radius:8px}.yjk-order-card,.yjk-checkout-card,.yjk-bead-details{border-radius:8px}.wrist-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.yjk-canvas-empty-label{top:14px;left:10px;right:64px;width:auto;transform:none;padding:8px 12px;font-size:14px;line-height:1.35}}

/* Source mini-program toolbox: one circular control with radial actions. */
.yjk-side-tools{display:none!important}
.yjk-replica-toolbox{position:absolute;left:24px;bottom:28px;width:96px;height:96px;z-index:130;isolation:isolate}
.yjk-replica-toolbox-main,.yjk-replica-toolbox-axis button{width:96px;height:96px;border-radius:50%;border:1px solid rgba(209,213,219,.35);background:rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(0,0,0,.12);font-weight:600;color:#34343b;cursor:pointer}
.yjk-replica-toolbox-main{position:absolute;inset:0;z-index:2}
.yjk-replica-toolbox-axis{position:absolute;display:flex;gap:14px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s ease;z-index:3}
.yjk-replica-toolbox-axis button{flex:none}
.yjk-replica-toolbox-axis.axis-x{left:112px;bottom:0;transform:translateX(-16px)}
.yjk-replica-toolbox-axis.axis-y{left:0;bottom:112px;flex-direction:column;transform:translateY(16px)}
.yjk-replica-toolbox.is-expanded .yjk-replica-toolbox-axis{opacity:1;pointer-events:auto;transform:none}
@media(max-width:760px){.yjk-replica-toolbox{left:16px;bottom:18px;transform:scale(.72);transform-origin:bottom left}}

/* English labels are longer: reserve space and allow readable wrapping without
   changing the Chinese layout or causing controls to overlap. */
.yjk-locale-en { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.yjk-locale-custom { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
.yjk-locale-custom .yjk-picker-toolbar { grid-template-columns: minmax(92px, 130px) minmax(180px, 1fr) minmax(132px, auto); }
.yjk-locale-custom .yjk-finish, .yjk-locale-custom .yjk-pay-main { white-space: normal; line-height: 1.2; padding: 8px 14px; min-width: 126px; }
.yjk-locale-custom .yjk-filter-sidebar button, .yjk-locale-custom .yjk-category-tabs button { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width:760px) {
  .yjk-locale-custom .yjk-picker-toolbar { grid-template-columns: 46px minmax(0, 1fr) minmax(104px, 116px); padding-left: 8px; padding-right: 8px; gap: 6px; }
  .yjk-locale-custom .yjk-picker-toolbar .yjk-clear { font-size: 0; min-width: 0; padding: 0; }
  .yjk-locale-custom .yjk-picker-toolbar .yjk-clear:first-letter { font-size: 18px; }
  .yjk-locale-custom .yjk-finish { min-width: 104px; padding: 6px 8px; font-size: 12px; }
}
.yjk-diy-root:has(.yjk-locale-en) { width: 100%; left: 0; transform: none; }

/* Keep browser double-click/double-tap gestures from zooming the designer.
   Canvas pointer handlers still receive drag gestures; pinch zoom is not part
   of the bracelet editor interaction model. */
.yjk-diy-root { touch-action: manipulation; overscroll-behavior: contain; }
.yjk-diy-root canvas { touch-action: none; }
@media (min-width:761px) { .yjk-diy-root:has(.yjk-locale-en) { max-width: calc(100vw - 8px) !important; } }
.yjk-locale-en .yjk-picker-toolbar { grid-template-columns: minmax(92px, 130px) minmax(180px, 1fr) minmax(132px, auto); }
.yjk-locale-en .yjk-finish, .yjk-locale-en .yjk-pay-main { white-space: normal; line-height: 1.2; padding: 8px 14px; min-width: 126px; }
.yjk-locale-en .yjk-filter-sidebar button, .yjk-locale-en .yjk-category-tabs button { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.yjk-locale-en .filter-title { letter-spacing: 0; text-transform: none; }
.yjk-locale-en .yjk-modal h2, .yjk-locale-en .yjk-modal p, .yjk-locale-en .yjk-checkout-card label { overflow-wrap: anywhere; }
.yjk-locale-en .yjk-bead-details-head, .yjk-locale-en .yjk-bead-details > div { grid-template-columns: minmax(0, 1.5fr) minmax(56px, .8fr) minmax(68px, .8fr); }
@media (max-width:760px) {
  .yjk-locale-en .yjk-picker-toolbar { grid-template-columns: 46px minmax(0, 1fr) minmax(104px, 116px); padding-left: 8px; padding-right: 8px; gap: 6px; }
  .yjk-locale-en .yjk-picker-toolbar .yjk-clear { font-size: 0; min-width: 0; padding: 0; }
  .yjk-locale-en .yjk-picker-toolbar .yjk-clear:first-letter { font-size: 18px; }
  .yjk-locale-en .yjk-finish { min-width: 104px; padding: 6px 8px; font-size: 12px; }
  .yjk-locale-en .yjk-filter-sidebar button { font-size: 11px; }
  .yjk-locale-en .yjk-modal { padding: 22px 18px; }
}

/* The picker is the second row of the fixed designer shell. Keep its grid
   track constrained so hundreds of bead cards scroll inside the picker instead
   of expanding the whole page. */
.yjk-design-shell { min-width: 0; overflow: hidden; }
.yjk-picker-panel { grid-template-rows: 50px minmax(0, 1fr) !important; min-width: 0; min-height: 0; overflow: hidden !important; }
.yjk-picker-body, .yjk-picker-content { min-width: 0; min-height: 0; overflow: hidden; }
.yjk-picker-content { grid-template-rows: 48px minmax(0, 1fr) !important; }
.yjk-bead-grid { min-width: 0; min-height: 0; overflow: auto !important; }
.yjk-bead-card { min-height: 124px; }

/* Modern surface treatment layered over the source-compatible layout. */
.yjk-bead-card{border-radius:12px!important;border-color:#e4e8ee!important;box-shadow:0 4px 14px rgba(18,28,45,.05)}
.yjk-bead-card:hover{border-color:#d6a85f!important;transform:translateY(-2px)}
.yjk-category-tabs button,.yjk-filter-sidebar button{transition:background .18s ease,color .18s ease,transform .18s ease}
.yjk-category-tabs button.is-active,.yjk-filter-sidebar button.is-active{background:#111827!important}

/* Keep the material area inside its fixed shell so toolbar controls remain clickable. */
.yjk-picker-panel{grid-template-rows:58px minmax(0,1fr);min-height:0;overflow:hidden}
.yjk-picker-toolbar{position:relative;z-index:2}
.yjk-picker-body{min-height:0;overflow:hidden}

.yjk-diy-app {
  min-height: 100vh;
  background: var(--yjk-bg);
  border: 1px solid #e7ebf1;
  overflow: hidden;
}

.yjk-diy-header {
  height: 58px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid #e8edf3;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

.yjk-icon-btn,
.yjk-diy-root button {
  font: inherit;
}

.yjk-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #454545;
  box-shadow: 0 3px 12px rgba(30, 30, 30, .08);
  cursor: pointer;
}

.yjk-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.yjk-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.yjk-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yjk-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2d996;
  color: #8b6f26;
  font-weight: 800;
}

.yjk-header-price {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--yjk-muted);
}

.yjk-header-price b {
  font-size: 17px;
  color: #1f1f25;
}

.yjk-design-shell {
  height: calc(100vh - 58px);
  min-height: 620px;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(330px, 1fr) 258px;
}

.yjk-canvas-panel {
  position: relative;
  background: #f7f7f5;
  overflow: hidden;
}

.yjk-bracelet-canvas {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  touch-action: none;
  cursor: grab;
}
.yjk-bracelet-canvas:active{cursor:grabbing}

.yjk-center-logo {
  pointer-events: none;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #c8a85d;
  font-size: 13px;
  line-height: 1.45;
  opacity: .68;
}

.yjk-center-logo img {
  max-width: 92px;
  max-height: 92px;
  object-fit: contain;
}

.yjk-side-tools {
  position: absolute;
  left: 14px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yjk-side-tools button,
.yjk-float-info button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #34343b;
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  box-shadow: 0 4px 14px rgba(30, 30, 30, .1);
  cursor: pointer;
}

.yjk-float-info {
  position: absolute;
  right: 14px;
  top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.yjk-float-info span {
  width: 58px;
  min-height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 11px;
  color: var(--yjk-muted);
  box-shadow: 0 4px 14px rgba(30, 30, 30, .09);
}

.yjk-float-info b {
  color: #1f1f25;
}

.yjk-picker-panel {
  border-top: 1px solid #e6e1dc;
  background: rgba(255,255,255,.95);
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.yjk-picker-toolbar {
  display: grid;
  grid-template-columns: 100px minmax(160px, 360px) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  border-bottom: 1px solid #f0e7dc;
}

.yjk-clear {
  border: 0;
  background: transparent;
  color: #666;
  text-align: left;
  cursor: pointer;
}

.yjk-search {
  height: 34px;
  border: 1px solid #e6cdb7;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fffaf6;
}

.yjk-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.yjk-finish,
.yjk-pay-main {
  justify-self: end;
  border: 0;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 18px;
  background: #2d2d31;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.yjk-filter-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 18px 0;
  font-size: 13px;
}

.yjk-filter-row > span {
  color: #6d625a;
  line-height: 30px;
}

.yjk-filter-row div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.yjk-filter-row button {
  flex: 0 0 auto;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  background: #f4f2ef;
  color: #5a5350;
  cursor: pointer;
}

.yjk-filter-row button.is-active {
  background: #303035;
  color: #fff;
}

.yjk-bead-grid {
  min-height: 0;
  overflow: auto;
  padding: 10px 18px 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.yjk-bead-card {
  position: relative;
  min-height: 94px;
  border: 1px solid #f0ddc8;
  border-radius: 8px;
  background: #fffdfa;
  display: grid;
  grid-template-rows: 16px 52px auto auto;
  justify-items: center;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  overflow: hidden;
}

.yjk-bead-card img {
  width: 58px;
  height: 52px;
  object-fit: contain;
}

.yjk-bead-card strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.yjk-bead-card span:last-child {
  font-size: 11px;
  color: #ad7b42;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.yjk-stock {
  position: static;
  display: block;
  width: 100%;
  min-height: 16px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  border-radius: 4px;
  padding: 1px 6px;
  color: #75624e;
  background: #eee8df;
}

.yjk-bead-image-wrap {
  width: 58px;
  height: 52px;
  display: grid;
  place-items: center;
}

.yjk-bead-image-wrap img {
  display: block;
}

.yjk-bead-card.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.yjk-confirm-shell {
  min-height: calc(100vh - 58px);
  padding: 22px;
  background: #f3f6fa;
}

.yjk-confirm-top {
  max-width: 980px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 34px rgba(74, 90, 122, .1);
}

.yjk-confirm-top span {
  display: block;
  color: var(--yjk-muted);
  font-size: 13px;
}

.yjk-confirm-top strong {
  font-size: 28px;
}

.yjk-confirm-top button {
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 18px;
  background: #fff;
  color: #657096;
  cursor: pointer;
}

.yjk-confirm-top .yjk-pay-main {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #6686ff, #a470ee);
}

.yjk-confirm-grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}

.yjk-order-card,
.yjk-checkout-card,
.yjk-bead-details {
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 34px rgba(74, 90, 122, .08);
}

.yjk-order-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.yjk-preview-box {
  min-height: 300px;
  display: grid;
  place-items: center;
}

.yjk-confirm-canvas {
  width: 100%;
  max-height: 320px;
  border-radius: 16px;
  order: 2;
}

.yjk-order-card h2 {
  margin: 10px 0 12px;
  font-size: 22px;
  order: 1;
}

.yjk-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  order: 3;
}

.yjk-wrist-tip { order: 4; }
.yjk-order-cover-wrap { max-width: 720px; background: #f5f3ef; border-radius: 12px; padding: 12px; }
.yjk-order-cover { display: block; width: min(100%, 720px); max-height: 520px; object-fit: contain; border-radius: 8px; background: #f5f3ef; }

.yjk-specs span {
  padding: 16px;
  border-radius: 14px;
  background: #fbfcfd;
  color: var(--yjk-muted);
}

.yjk-specs b {
  display: block;
  margin-top: 4px;
  color: var(--yjk-ink);
  font-size: 18px;
}

.yjk-wrist-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff8e8;
  color: #9a6e23;
}

.yjk-checkout-card {
  padding: 18px;
  align-self: start;
}

.yjk-address-form h3 {
  margin: 0 0 10px;
}

.yjk-address-form label,
.yjk-checkout-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: #555d6b;
  font-size: 13px;
}

.yjk-address-form input,
.yjk-address-form textarea,
.yjk-checkout-card textarea {
  width: 100%;
  border: 1px solid #e2e7ef;
  border-radius: 12px;
  padding: 10px 12px;
  outline: 0;
  background: #fff;
  color: var(--yjk-ink);
}

.yjk-address-form textarea,
.yjk-checkout-card textarea {
  min-height: 72px;
  resize: vertical;
}

.yjk-cert {
  width: 100%;
  border: 1px solid #e7dac8;
  border-radius: 14px;
  padding: 12px;
  background: #fffaf4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  margin: 8px 0 12px;
}

.yjk-cert small {
  display: block;
  color: var(--yjk-muted);
}

.yjk-cert.is-active {
  border-color: var(--yjk-accent);
  box-shadow: 0 0 0 3px rgba(141,112,230,.14);
}

.yjk-cost-line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed #dfe4ec;
}

.yjk-cost-line.is-total {
  border-bottom: 0;
  color: #ff6464;
  font-size: 22px;
  font-weight: 800;
}

.yjk-notice {
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: #fff7e6;
  color: #8a6a30;
  line-height: 1.7;
  font-size: 13px;
}

.yjk-service {
  width: 100%;
  margin-top: 12px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #202027;
  color: #fff;
  cursor: pointer;
}

.yjk-bead-details {
  max-width: 980px;
  margin: 16px auto 0;
  padding: 4px 18px 18px;
}

.yjk-bead-details summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 800;
}

.yjk-bead-details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 100px;
  gap: 10px;
}

.yjk-bead-details-head {
  color: var(--yjk-muted);
  font-size: 12px;
  border-bottom: 1px solid #edf0f4;
  padding-bottom: 6px;
}

.yjk-bead-details-head span:nth-child(n+2),
.yjk-bead-details > div > :nth-child(n+2) {
  text-align: right;
}

.yjk-detail-bead {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
}

.yjk-detail-bead img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.yjk-detail-bead span {
  min-width: 0;
}

.yjk-detail-bead b,
.yjk-detail-bead small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yjk-detail-bead small {
  color: var(--yjk-muted);
}

.yjk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 24, 32, .42);
}

.yjk-payment-modal {
  width: min(420px, 100%);
  position: relative;
  border-radius: 22px;
  background: #fff;
  padding: 24px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}

.yjk-modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f2f3f6;
  cursor: pointer;
}

.yjk-pay-amount {
  display: block;
  margin: 10px 0 16px;
  color: #ff6464;
  font-size: 34px;
}

.yjk-pay-link {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6686ff, #a470ee);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.yjk-pay-qr {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: contain;
  margin: 16px auto;
  border: 1px solid #edf0f4;
  border-radius: 14px;
}

.yjk-pay-note {
  color: var(--yjk-muted);
  font-size: 13px;
}

.yjk-loading,
.yjk-error {
  min-height: 360px;
  display: grid;
  place-items: center;
  color: var(--yjk-muted);
  background: #fff;
}

.yjk-toast-host {
  position: fixed;
  z-index: 100000;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: rgba(30,30,34,.9);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  transition: .2s ease;
}

.yjk-toast-host.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 980px) {
  .yjk-design-shell {
    min-height: 700px;
    grid-template-rows: minmax(360px, 52vh) 310px;
  }

  .yjk-bead-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .yjk-confirm-grid {
    grid-template-columns: 1fr;
  }

  .yjk-bead-details > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .yjk-diy-root {
    width: 100%;
    left: 0;
    transform: none;
    margin-left: 0;
    margin-right: 0;
  }

  .yjk-diy-header {
    grid-template-columns: 42px 1fr;
    height: 54px;
  }

  .yjk-header-price {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-bottom: 8px;
  }

  .yjk-design-shell {
    height: auto;
    min-height: calc(100vh - 54px);
    grid-template-rows: 52vh auto;
  }

  .yjk-picker-panel {
    grid-template-rows: auto auto auto;
  }

  .yjk-picker-toolbar {
    grid-template-columns: 1fr;
  }

  .yjk-finish {
    justify-self: stretch;
  }

  .yjk-filter-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .yjk-bead-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 360px;
  }

  .yjk-side-tools {
    top: 12px;
    left: 10px;
  }

  .yjk-float-info {
    top: 12px;
    right: 10px;
  }

  .yjk-confirm-shell {
    padding: 12px;
  }

  .yjk-confirm-top {
    grid-template-columns: 1fr 1fr;
  }

  .yjk-confirm-top > div {
    grid-column: 1 / -1;
  }

  .yjk-confirm-top button {
    width: 100%;
    padding: 0 10px;
  }

  .yjk-specs,
  .yjk-bead-details > div {
    grid-template-columns: 1fr;
  }
}

/* Recovery overrides: the shortcode must own the viewport, while the mobile
   picker keeps the source app's single-row toolbar and independently
   scrollable material area. */
.yjk-diy-root {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  transform: none !important;
}

.yjk-diy-app {
  width: 100%;
  min-height: 100dvh;
  border: 0;
}

@media (max-width: 760px) {
  .yjk-diy-app { overflow: visible; }
  .yjk-diy-header {
    height: 58px !important;
    min-height: 58px;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    padding: 0 14px !important;
    gap: 8px;
  }
  .yjk-brand { min-width: 0; font-size: 16px !important; gap: 8px; }
  .yjk-brand img { width: 32px; height: 32px; }
  .yjk-brand strong { font-size: 16px !important; }
  .yjk-header-price {
    grid-column: auto !important;
    padding: 0 !important;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
  }
  .yjk-design-shell {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: minmax(390px, 56vh) minmax(360px, 44vh) !important;
  }
  .yjk-canvas-panel { min-height: 390px !important; overflow: hidden; }
  .yjk-picker-panel {
    min-height: 360px !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .yjk-picker-toolbar {
    height: 66px !important;
    min-height: 66px;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px !important;
    padding: 12px 14px !important;
    overflow: hidden;
  }
  .yjk-clear { font-size: 14px !important; white-space: nowrap; padding: 0 !important; }
  .yjk-search { min-width: 0; width: 100%; height: 40px !important; }
  .yjk-finish {
    justify-self: end !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    white-space: nowrap;
    font-size: 13px;
  }
  .yjk-picker-body {
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .yjk-filter-sidebar { min-height: 0; padding: 10px 6px !important; overflow-y: auto; }
  .yjk-filter-sidebar button { font-size: 12px !important; padding: 9px 7px !important; }
  .yjk-picker-content { min-height: 0 !important; grid-template-rows: 46px minmax(0, 1fr) !important; }
  .yjk-category-tabs { min-height: 46px; padding: 8px 10px !important; }
  .yjk-category-tabs button { padding: 7px 12px !important; font-size: 13px; }
  .yjk-bead-grid {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .yjk-bead-card { min-height: 132px !important; padding: 7px 4px !important; grid-template-rows: 16px 58px auto auto !important; }
  .yjk-bead-card img { width: 54px !important; height: 52px !important; }
  .yjk-bead-image-wrap { width: 54px !important; height: 52px !important; }
  .yjk-bead-card strong { font-size: 11px !important; text-align: center; }
  .yjk-bead-card span:last-child { font-size: 10px !important; white-space: nowrap; }
  .yjk-replica-toolbox { left: 16px; bottom: 18px; }
}

/* Source uses a three-column bead grid in the regular picker. Keep each card
   internally aligned so titles and price metadata stay on the same baseline. */
.yjk-bead-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.yjk-bead-card { align-content: center; }
.yjk-bead-card strong, .yjk-bead-card span:last-child { text-align: center; }
.yjk-bead-loader { grid-column: 1 / -1; min-height: 32px; display: grid; place-items: center; color: #a2978b; font-size: 12px; pointer-events: none; }
.yjk-category-tabs button { min-width: 64px; height: 36px; padding: 0 13px; line-height: 36px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.yjk-count-status {
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 8;
  max-width: calc(100% - 180px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #4f6258;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 16px rgba(46,42,38,.1);
  pointer-events: none;
}
.yjk-count-status.is-warning { background: #fff8e8; color: #a06d20; }
.yjk-category-tabs button.is-active {
  position: relative;
  z-index: 2;
}
.yjk-picker-toolbar .yjk-clear {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .yjk-count-status { top: 16px; bottom: auto; max-width: calc(100% - 150px); font-size: 11px; }
}

@media (min-width: 761px) {
  .yjk-bead-card { min-height: 124px; }
}

/* Desktop keeps the canvas visible while allowing the full material catalog
   to continue below the fold. Mobile retains the bounded picker scroller
   above so the compact interaction stays stable. */
@media (min-width: 761px) {
  .yjk-diy-app { overflow: hidden; }
  .yjk-design-shell {
    height: calc(100vh - 58px);
    min-height: 620px;
    grid-template-rows: minmax(330px, 1fr) 258px;
  }
  .yjk-picker-panel,
  .yjk-picker-body,
  .yjk-picker-content { overflow: hidden; }
  .yjk-bead-grid {
    max-height: none;
    overflow: auto;
    align-content: start;
  }
}
.yjk-designs-modal{max-width:680px;width:min(92vw,680px);max-height:min(78vh,720px);overflow:auto}.yjk-design-list{display:grid;gap:10px;margin-top:14px}.yjk-design-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid #e5ded5;background:#fff}.yjk-design-cover{width:64px;height:64px;background:#f3eee8;display:grid;place-items:center;overflow:hidden}.yjk-design-cover img{width:100%;height:100%;object-fit:cover}.yjk-design-meta{min-width:0;display:grid;gap:4px}.yjk-design-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yjk-design-meta span,.yjk-design-meta small{color:#786f66;font-size:12px}.yjk-design-actions{display:flex;gap:6px;align-items:center}.yjk-design-item>button,.yjk-design-actions button{white-space:nowrap}.yjk-danger-action{color:#a33;border-color:#d9b6b6!important}.yjk-modal button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.yjk-design-item{grid-template-columns:52px minmax(0,1fr);gap:9px}.yjk-design-cover{width:52px;height:52px}.yjk-design-actions{grid-column:2;justify-self:start;flex-wrap:wrap}.yjk-design-meta strong{white-space:normal;overflow-wrap:anywhere}}
.yjk-featured-ad{pointer-events:auto}.yjk-featured-ad button{font:inherit}@media(max-width:760px){.yjk-featured-ad{left:12px;top:12px;width:min(210px,calc(100% - 24px));padding:11px 34px 11px 12px}}

.yjk-recommendations-backdrop{padding:18px;background:rgba(18,18,18,.68);backdrop-filter:blur(4px)}
.yjk-recommendations-modal{width:min(1080px,100%);height:min(86vh,760px);max-width:none;max-height:none;padding:26px 28px;overflow:auto;border-radius:14px;background:#fbfaf8}
.yjk-recommendations-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid #e9e1d7}
.yjk-recommendations-head h2{margin:0 0 5px;font-size:24px;color:#27231f}
.yjk-recommendations-head p{margin:0;color:#887b6d;font-size:13px}
.yjk-recommendations-close{width:36px;height:36px;border:1px solid #e2d8cc;border-radius:50%;background:#fff;color:#685b4e;font-size:24px;line-height:1;cursor:pointer}
.yjk-recommendation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.yjk-recommendation-card{display:grid;grid-template-rows:minmax(190px,1fr) auto;overflow:hidden;border:1px solid #e9e0d6;border-radius:10px;background:#fff;box-shadow:0 5px 16px rgba(50,38,24,.06)}
.yjk-recommendation-cover{min-height:190px;background:#f3f0eb;display:grid;place-items:center;overflow:hidden}
.yjk-recommendation-cover img{width:100%;height:100%;object-fit:cover}
.yjk-recommendation-info{display:grid;gap:6px;padding:14px 15px 15px}
.yjk-recommendation-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2c2925;font-size:15px}
.yjk-recommendation-info span{color:#85796d;font-size:12px}
.yjk-apply-design{margin-top:7px;min-height:36px;border:0;border-radius:6px;background:#2d2a27;color:#fff;font-size:13px;cursor:pointer}
.yjk-apply-design:hover{background:#51463b}
.yjk-recommendations-loading{display:grid;min-height:300px;place-items:center;color:#85796d}
@media(max-width:760px){.yjk-recommendations-backdrop{padding:0}.yjk-recommendations-modal{width:100%;height:100%;border-radius:0;padding:20px 16px}.yjk-recommendations-head h2{font-size:20px}.yjk-recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.yjk-recommendation-card{grid-template-rows:minmax(130px,1fr) auto}.yjk-recommendation-cover{min-height:130px}.yjk-recommendation-info{padding:10px}.yjk-recommendation-info strong{font-size:13px}.yjk-apply-design{min-height:34px;font-size:12px}}
.yjk-contact-backdrop{display:grid;place-items:center;padding:20px;background:rgba(13,15,14,.68);backdrop-filter:blur(7px)}
/* Reference-style recommendation card and dedicated preview surface. */
.yjk-featured-ad{left:4px;top:14px;width:218px;gap:6px;padding:13px 34px 13px 13px;border:1px solid #e8c78e;border-radius:10px;background:#fffaf0;box-shadow:0 8px 22px rgba(75,57,31,.1)}
.yjk-featured-ad strong{font-size:14px;line-height:1.25;color:#4b3923;font-weight:600}.yjk-featured-ad span{font-size:12px;line-height:1.4;color:#9a8366}.yjk-featured-ad-cta{margin-top:1px;color:#96682f;font-size:18px;line-height:1.2;text-decoration:none}.yjk-featured-ad-close{top:9px;right:9px;width:22px;height:22px;color:#9b896f;font-size:18px;line-height:20px}
.yjk-preview-layer{position:fixed;inset:0;z-index:99990;display:grid;grid-template-rows:68px minmax(0,1fr) 72px;background:#f4f1eb;color:#2c2925}
.yjk-preview-header{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:0 24px;background:#fff;border-bottom:1px solid #e5ddd3}.yjk-preview-close{width:38px;height:38px;border:1px solid #e5ddd3;border-radius:50%;background:#fff;color:#5f554b;font-size:24px;line-height:1;cursor:pointer}.yjk-preview-header span{display:block;color:#9a8976;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.yjk-preview-header h2{margin:2px 0 0;font-size:18px;font-weight:600}.yjk-preview-summary{display:grid;grid-template-columns:auto auto auto auto;align-items:baseline;gap:4px 7px;color:#8e806f;text-align:right}.yjk-preview-summary b{color:#3e3832;font-size:17px;font-weight:600}.yjk-preview-summary small{font-size:11px}.yjk-preview-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fffdf9 0,#f7f4ef 48%,#ede9e2 100%)}.yjk-preview-canvas{width:min(78vw,760px);height:min(70vh,640px);max-width:92%;max-height:78%;touch-action:none;cursor:grab}.yjk-preview-canvas:active{cursor:grabbing}.yjk-preview-hint{position:absolute;bottom:18px;margin:0;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.8);color:#958879;font-size:12px;box-shadow:0 4px 12px rgba(60,47,30,.08)}.yjk-preview-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px;background:#fff;border-top:1px solid #e5ddd3}.yjk-preview-footer button{min-width:128px;height:40px;border:1px solid #d8c9b7;border-radius:20px;background:#fff;color:#735d45;font:inherit;cursor:pointer}.yjk-preview-footer button:last-child{border-color:#2d2b2a;background:#2d2b2a;color:#fff}
.yjk-contact-modal{border:1px solid #e8d8c4;border-radius:12px;box-shadow:0 22px 60px rgba(54,42,28,.28)}.yjk-contact-head{padding:16px 17px 9px}.yjk-contact-head h2{color:#4b3923;font-weight:600}.yjk-contact-body{padding:8px 22px 20px;gap:10px}.yjk-contact-body p{color:#9a8366}.yjk-contact-close{border:1px solid #eadfce;background:#fffaf2;color:#9b896f}
@media(max-width:760px){.yjk-featured-ad{left:4px;top:14px;width:218px;padding:12px 32px 12px 12px}.yjk-featured-ad-cta{font-size:17px}.yjk-preview-layer{grid-template-rows:60px minmax(0,1fr) 68px}.yjk-preview-header{grid-template-columns:42px 1fr auto;gap:9px;padding:0 14px}.yjk-preview-close{width:34px;height:34px}.yjk-preview-header h2{font-size:16px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yjk-preview-summary{gap:3px 5px}.yjk-preview-summary b{font-size:15px}.yjk-preview-canvas{width:100%;height:70vh;max-width:100%;max-height:75%}.yjk-preview-hint{bottom:12px;font-size:11px}.yjk-preview-footer{gap:8px;padding:0 12px}.yjk-preview-footer button{min-width:0;flex:1;height:38px;font-size:13px}}
.yjk-contact-modal{width:min(326px,calc(100vw - 40px));padding:0;border-radius:10px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
.yjk-contact-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}.yjk-contact-head h2{margin:0;color:#24211e;font-size:18px;font-weight:600}.yjk-contact-close{width:30px;height:30px;border:0;border-radius:50%;background:#f3f3f1;color:#8e8a82;font-size:22px;line-height:1;cursor:pointer}.yjk-contact-body{display:grid;justify-items:center;gap:12px;padding:8px 22px 22px}.yjk-contact-body p{margin:0;color:#8d877f;font-size:12px;text-align:center}.yjk-contact-qr{display:block;width:230px;height:230px;max-width:100%;object-fit:contain;background:#fff}.yjk-contact-qr-placeholder{width:230px;height:230px;max-width:100%;display:grid;place-items:center;align-content:center;gap:8px;border:1px dashed #d9d2c8;background:repeating-linear-gradient(45deg,#faf9f6,#faf9f6 5px,#f2eee8 5px,#f2eee8 10px);color:#776d61;text-align:center}.yjk-contact-qr-placeholder span{font-size:34px;letter-spacing:3px;font-weight:700}.yjk-contact-qr-placeholder small{max-width:180px;font-size:11px;line-height:1.5}

/* Homepage featured designs: a browsable gallery that opens automatically once per page. */
.yjk-recommendations-backdrop{z-index:120;display:grid;place-items:center;padding:24px;background:rgba(24,21,18,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.yjk-recommendations-modal{width:min(980px,calc(100vw - 48px));height:auto;max-width:none;max-height:min(78vh,680px);padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:#fbfaf8;box-shadow:0 30px 90px rgba(30,24,18,.34)}
.yjk-recommendations-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid #eee5da;background:#fffdf9}
.yjk-recommendations-eyebrow{display:block;margin-bottom:6px;color:#a27c50;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.yjk-recommendations-head h2{margin:0;color:#302a24;font-size:25px;line-height:1.2;font-weight:650}.yjk-recommendations-head p{max-width:650px;margin:7px 0 0;color:#8b7d6c;font-size:13px;line-height:1.5}
.yjk-recommendations-close{flex:0 0 auto;width:36px;height:36px;border:1px solid #e3d8c9;border-radius:50%;background:#fff;color:#6f6254;font-size:23px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}.yjk-recommendations-close:hover{border-color:#b99c79;background:#fff8ef}
.yjk-recommendation-grid{max-height:calc(min(78vh,680px) - 96px);padding:18px 26px 22px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.yjk-recommendation-card{min-width:0;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid #e9e0d6;border-radius:11px;background:#fff;box-shadow:0 7px 18px rgba(50,38,24,.07);transition:transform .18s,box-shadow .18s,border-color .18s}.yjk-recommendation-card:hover{transform:translateY(-2px);border-color:#d5b68f;box-shadow:0 12px 26px rgba(50,38,24,.13)}
.yjk-recommendation-cover{aspect-ratio:1.35;min-height:0;padding:18px;box-sizing:border-box;background:#f3f0eb;display:grid;place-items:center;overflow:hidden}.yjk-recommendation-cover img{display:block;width:84%;height:84%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:#f3f0eb}
.yjk-recommendation-info{min-width:0;display:grid;gap:9px;padding:14px 15px 15px}.yjk-recommendation-info strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#302b26;font-size:15px;line-height:1.3}.yjk-recommendation-stats{display:flex;flex-wrap:wrap;gap:5px 10px;color:#8b7d6c;font-size:12px;line-height:1.35}.yjk-recommendation-stats span{white-space:nowrap}.yjk-apply-design{width:100%;min-height:38px;margin-top:1px;padding:8px 12px;border:0;border-radius:6px;background:#302d29;color:#fff;font:inherit;font-size:13px;line-height:1.2;cursor:pointer;transition:background .15s}.yjk-apply-design:hover{background:#5a4633}.yjk-apply-design:focus-visible,.yjk-recommendations-close:focus-visible{outline:2px solid #b88345;outline-offset:2px}
.yjk-recommendations-loading,.yjk-recommendations-empty{min-height:280px;padding:36px 26px;display:grid;place-items:center;align-content:center;gap:8px;color:#8b7d6c;text-align:center}.yjk-recommendations-empty strong{color:#4d4338;font-size:16px}.yjk-recommendations-empty p{max-width:420px;margin:0;font-size:13px;line-height:1.5}.yjk-recommendations-retry{min-height:36px;margin-top:8px;padding:7px 16px;border:1px solid #cdb293;border-radius:6px;background:#fff8ef;color:#765b3d;font:inherit;cursor:pointer}.yjk-recommendations-spinner{width:26px;height:26px;border:2px solid #e6d8c8;border-top-color:#9d794e;border-radius:50%;animation:yjk-recommend-spin .8s linear infinite}@keyframes yjk-recommend-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.yjk-recommendations-backdrop{padding:10px}.yjk-recommendations-modal{width:min(360px,calc(100vw - 32px));height:auto;max-height:82vh;border-radius:14px}.yjk-recommendations-head{padding:16px 16px 13px;gap:12px}.yjk-recommendations-head h2{font-size:19px}.yjk-recommendations-head p{margin-top:5px;font-size:12px;line-height:1.4}.yjk-recommendations-close{width:31px;height:31px;font-size:20px}.yjk-recommendation-grid{max-height:calc(82vh - 112px);padding:14px 14px 17px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.yjk-recommendation-info{gap:7px;padding:10px}.yjk-recommendation-info strong{font-size:13px}.yjk-recommendation-stats{gap:3px 7px;font-size:11px}.yjk-apply-design{min-height:35px;padding:7px 8px;font-size:12px}.yjk-recommendations-loading,.yjk-recommendations-empty{min-height:200px;padding:24px 18px}}
@media(max-width:380px){.yjk-recommendation-grid{grid-template-columns:1fr}.yjk-recommendation-cover{aspect-ratio:1.7}}
.yjk-recommendations-backdrop{z-index:1000}.yjk-recommendation-grid.is-single{grid-template-columns:minmax(0,360px);justify-content:center}
@media(max-width:760px){.yjk-recommendation-grid.is-single{grid-template-columns:minmax(0,300px)}}

/* Final locale safety rules. Labels may grow in Japanese and English, but
   never force a card, header, or toolbar wider than its available track. */
.yjk-header-price{min-width:0;flex-wrap:wrap}.yjk-header-price span{max-width:180px;white-space:normal;overflow-wrap:anywhere;text-align:right;line-height:1.25}.yjk-header-price b{white-space:nowrap}
.yjk-category-tabs,.yjk-filter-sidebar,.yjk-bead-grid{min-width:0}
.yjk-filter-sidebar button{overflow-wrap:anywhere;line-height:1.3}
@media(max-width:760px){.yjk-diy-header{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;padding:0 12px}.yjk-brand{min-width:0}.yjk-brand strong{font-size:14px!important;white-space:normal;line-height:1.2}.yjk-header-price{gap:4px}.yjk-header-price span{max-width:92px;font-size:10px}.yjk-header-price b{font-size:14px}.yjk-bead-card span:last-child{white-space:normal;min-height:26px}.yjk-category-tabs button{white-space:normal;line-height:1.2}}

/* Five Elements analysis surface. The chart has a fixed stage so localized
   headings and long Japanese labels cannot shift the canvas or legend. */
.yjk-analysis-backdrop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:rgba(24,21,18,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.yjk-analysis-modal{width:min(660px,calc(100vw - 32px));max-height:min(86vh,760px);overflow:auto;padding:26px 28px 22px;border:1px solid #e9dfd2;border-radius:16px;background:#fffdf9;color:#302a24;box-shadow:0 28px 80px rgba(35,27,18,.28)}
.yjk-analysis-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.yjk-analysis-eyebrow{display:block;margin-bottom:6px;color:#a27c50;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.yjk-analysis-head h2{margin:0;font-size:24px;line-height:1.2;font-weight:650}.yjk-analysis-head p{margin:7px 0 0;color:#897b6c;font-size:13px;line-height:1.5}.yjk-analysis-close{flex:0 0 auto;width:34px;height:34px;border:1px solid #e3d8c9;border-radius:50%;background:#fff;color:#6f6254;font-size:23px;line-height:1;cursor:pointer}.yjk-analysis-summary{display:flex;align-items:baseline;gap:8px;margin:22px 0 0;color:#8b7d6c}.yjk-analysis-summary strong{font-size:28px;color:#302a24}.yjk-analysis-summary span{font-size:12px}.yjk-analysis-chart-wrap{width:min(100%,420px);height:300px;margin:4px auto 2px}.yjk-analysis-canvas{display:block;width:100%;height:100%}.yjk-analysis-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:4px}.yjk-analysis-row{min-width:0;display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;padding:10px 8px;border:1px solid #eee5da;border-radius:9px;background:#fff}.yjk-analysis-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.yjk-analysis-row span:not(.yjk-analysis-swatch){grid-column:2;color:#897b6c;font-size:11px}.yjk-analysis-row b{grid-column:1/-1;color:#5c4d3b;font-size:14px}.yjk-analysis-swatch{width:10px;height:10px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 16%,transparent)}.yjk-analysis-relation{margin-top:18px;padding:11px 13px;border-left:3px solid #c99a3d;border-radius:0 8px 8px 0;background:#faf4e8;color:#76644e;font-size:12px;line-height:1.55}.yjk-analysis-back{display:block;width:100%;min-height:40px;margin-top:18px;border:1px solid #d8c9b7;border-radius:8px;background:#302d29;color:#fff;font:inherit;font-size:13px;cursor:pointer}.yjk-analysis-empty{display:grid;place-items:center;min-height:240px;padding:30px 20px;text-align:center}.yjk-analysis-empty strong{font-size:17px}.yjk-analysis-empty p{max-width:360px;margin:9px 0 0;color:#897b6c;font-size:13px;line-height:1.6}
@media(max-width:760px){.yjk-analysis-backdrop{padding:8px}.yjk-analysis-modal{width:min(430px,calc(100vw - 16px));max-height:92vh;padding:16px 14px 14px;border-radius:14px}.yjk-analysis-head{gap:8px}.yjk-analysis-head h2{font-size:20px}.yjk-analysis-head p{font-size:12px}.yjk-analysis-chart-wrap{height:190px}.yjk-analysis-legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.yjk-analysis-row{padding:7px 7px}.yjk-analysis-row strong{font-size:12px}.yjk-analysis-row span:not(.yjk-analysis-swatch){font-size:10px}.yjk-analysis-row b{font-size:13px}.yjk-analysis-relation{margin-top:10px;padding:9px 10px;font-size:10.5px}.yjk-analysis-back{min-height:38px;margin-top:10px;font-size:12px}}

@media(max-width:760px){
  html:has(body.yjk-diy-page .yjk-diy-root),
  body.yjk-diy-page{overflow:hidden!important}
  /* 100vw includes the scrollbar gutter on narrow screens. The designer is
     already inside the page flow, so use the available content width. */
  .yjk-diy-root{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    left:auto!important;
    right:auto!important;
    box-sizing:border-box;
    overflow:hidden!important;
  }
  .yjk-diy-app{width:100%!important;max-width:none!important;box-sizing:border-box}

  /* Match the reference H5 composition: a fixed header, a compact canvas,
     and a separately scrolling material picker below it. */
  .yjk-design-shell{
    height:calc(100dvh - 58px)!important;
    min-height:0!important;
    grid-template-rows:minmax(360px,50dvh) minmax(360px,1fr)!important;
  }
  .yjk-canvas-panel{min-height:0!important;height:auto!important}
  .yjk-bracelet-canvas{width:100%!important;height:100%!important}

  /* The source app keeps price, wrist, loop count, and save as a stable
     vertical stack. Keep labels visible in every locale. */
  .yjk-float-info{
    top:16px!important;
    right:12px!important;
    width:70px!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  .yjk-float-info button,
  .yjk-float-info .yjk-float-price{
    width:70px!important;
    min-width:0!important;
    min-height:52px!important;
    padding:6px 4px!important;
    border:1px solid rgba(209,213,219,.35)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 4px 12px rgba(30,30,30,.09)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    box-sizing:border-box!important;
  }
  .yjk-float-info b{max-width:100%;font-size:14px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .yjk-float-info small{display:block!important;max-width:100%;font-size:11px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;color:#756d64!important}
  .yjk-float-info .yjk-float-price b{font-size:13px!important}

  .yjk-replica-toolbox{left:14px!important;bottom:14px!important;transform:scale(.66)!important;transform-origin:bottom left!important}

  .yjk-picker-panel{
    min-height:0!important;
    height:auto!important;
    grid-template-rows:62px minmax(0,1fr)!important;
    overflow:hidden!important;
    border-top:1px solid #e6e1dc!important;
  }
  .yjk-picker-toolbar{
    height:62px!important;
    min-height:62px!important;
    grid-template-columns:68px minmax(0,1fr) minmax(112px,auto)!important;
    gap:8px!important;
    padding:9px 12px!important;
    box-sizing:border-box!important;
  }
  .yjk-picker-toolbar .yjk-clear{
    min-width:0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .yjk-search{min-width:0!important;width:100%!important;height:38px!important;padding:0 10px!important;box-sizing:border-box!important}
  .yjk-search input{min-width:0!important;font-size:12px!important}
  .yjk-finish{min-width:0!important;width:100%!important;min-height:38px!important;height:auto!important;padding:6px 8px!important;font-size:12px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .yjk-picker-body{height:auto!important;min-height:0!important;grid-template-columns:92px minmax(0,1fr)!important;overflow:hidden!important}
  .yjk-filter-sidebar{min-width:0!important;min-height:0!important;padding:8px 5px!important;overflow-y:auto!important;overflow-x:hidden!important}
  .yjk-filter-sidebar button{min-width:0!important;width:100%!important;padding:8px 5px!important;font-size:11px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;justify-content:center!important}
  .yjk-picker-content{min-width:0!important;min-height:0!important;grid-template-rows:44px minmax(0,1fr)!important;overflow:hidden!important}
  .yjk-category-tabs{min-width:0!important;height:44px!important;min-height:44px!important;padding:7px 8px!important;gap:6px!important;box-sizing:border-box!important}
  .yjk-category-tabs button{height:30px!important;min-width:58px!important;padding:4px 9px!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important}
  .yjk-bead-grid{
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:8px!important;
    gap:7px!important;
    align-content:start!important;
    box-sizing:border-box!important;
  }
  .yjk-bead-card{
    min-width:0!important;
    min-height:126px!important;
    padding:6px 4px!important;
    border-radius:8px!important;
    grid-template-rows:15px 58px minmax(16px,auto) minmax(24px,auto)!important;
    gap:1px!important;
  }
  .yjk-bead-card img,.yjk-bead-image-wrap{width:56px!important;height:54px!important;max-width:100%!important;object-fit:contain!important}
  .yjk-bead-card strong{min-width:0!important;width:100%!important;font-size:10.5px!important;line-height:1.2!important;text-align:center!important;white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow-wrap:anywhere!important}
  .yjk-bead-card span:last-child{min-width:0!important;width:100%!important;min-height:24px!important;font-size:9.5px!important;line-height:1.2!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .yjk-stock{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .yjk-canvas-empty-label{left:10px!important;right:88px!important;width:auto!important;max-width:none!important;transform:none!important;font-size:12px!important;white-space:normal!important}
   .yjk-count-status{max-width:calc(100% - 180px)!important}
 }

/* Compact source-matched controls and three-row bead cards. The stock row is
   intentionally absent from the markup; these rules also hide it in cached
   or older markup so it can never reserve vertical space. */
.yjk-float-info{width:64px!important;gap:6px!important;align-items:stretch!important}
.yjk-float-info.is-collapsed{width:auto!important}
.yjk-info-toggle{width:56px!important;min-width:56px!important;min-height:36px!important;height:36px!important;padding:0 8px!important;border:1px solid rgba(209,213,219,.3)!important;border-radius:18px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;font-size:11px!important;line-height:1.15!important;box-shadow:0 4px 12px rgba(30,30,30,.08)!important}
.yjk-info-toggle span{width:auto!important;min-height:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;line-height:1!important}
.yjk-info-toggle small{display:block!important;max-width:100%;font-size:10px!important;line-height:1.1!important;white-space:nowrap!important}
.yjk-info-list{display:flex!important;flex-direction:column!important;gap:6px!important;width:64px!important}
.yjk-info-list>*{width:64px!important;min-width:0!important;min-height:48px!important;height:48px!important;padding:6px 4px!important;border:1px solid rgba(209,213,219,.3)!important;border-radius:10px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 4px 12px rgba(30,30,30,.08)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;box-sizing:border-box!important}
.yjk-info-list b{max-width:100%;font-size:13px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.yjk-info-list small{display:block!important;max-width:100%;font-size:10px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;color:#756d64!important}
.yjk-info-list .yjk-float-price b{font-size:12px!important}
.yjk-bead-grid{gap:6px!important;padding:10px 14px 14px!important}
.yjk-bead-card{min-height:112px!important;padding:6px!important;grid-template-rows:52px minmax(16px,auto) minmax(16px,auto)!important;gap:2px!important}
.yjk-bead-card .yjk-stock{display:none!important}
.yjk-bead-card img,.yjk-bead-image-wrap{width:56px!important;height:52px!important}
.yjk-bead-card strong{font-size:11px!important;line-height:1.2!important}
.yjk-bead-card span:last-child{font-size:10px!important;line-height:1.15!important;min-height:0!important}
.yjk-replica-toolbox{width:72px!important;height:72px!important;left:20px!important;bottom:22px!important}
.yjk-replica-toolbox-main,.yjk-replica-toolbox-axis button{width:72px!important;height:72px!important}
.yjk-replica-toolbox-axis.axis-x{left:86px!important}
.yjk-replica-toolbox-axis.axis-y{bottom:86px!important}
.yjk-picker-toolbar{height:54px!important;min-height:54px!important;grid-template-columns:92px minmax(0,1fr) auto!important;padding:7px 14px!important;gap:10px!important}
.yjk-search{height:34px!important;padding:0 10px!important}
.yjk-finish{min-height:34px!important;padding:5px 14px!important;font-size:12px!important;line-height:1.2!important}
.yjk-category-tabs button{flex:0 0 auto!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-width:760px){
  .yjk-float-info{right:10px!important;top:14px!important;width:58px!important;gap:5px!important}
  .yjk-float-info.is-collapsed{width:auto!important}
  .yjk-info-toggle{width:52px!important;min-width:52px!important;height:34px!important;min-height:34px!important;border-radius:17px!important;font-size:10px!important}
  .yjk-info-toggle span{font-size:12px!important}
  .yjk-info-list{width:58px!important;gap:5px!important}
  .yjk-float-info .yjk-info-list > *{width:58px!important;min-width:58px!important;min-height:44px!important;height:44px!important;border-radius:9px!important;padding:5px 3px!important}
  .yjk-float-info .yjk-info-list b{font-size:12px!important}
  .yjk-float-info .yjk-info-list small{font-size:9px!important}
  .yjk-bead-grid{padding:7px 7px 11px!important;gap:6px!important}
  .yjk-bead-card{min-height:108px!important;padding:5px 4px!important;grid-template-rows:50px minmax(15px,auto) minmax(15px,auto)!important;gap:1px!important}
  .yjk-bead-card img,.yjk-bead-image-wrap{width:52px!important;height:50px!important}
  .yjk-bead-card strong{font-size:10px!important;line-height:1.15!important;-webkit-line-clamp:2!important}
  .yjk-bead-card span:last-child{font-size:9px!important;line-height:1.1!important}
  .yjk-replica-toolbox{left:14px!important;bottom:14px!important;transform:scale(.76)!important;transform-origin:bottom left!important}
  .yjk-picker-toolbar{height:54px!important;min-height:54px!important;grid-template-columns:54px minmax(0,1fr) minmax(104px,112px)!important;padding:7px 10px!important;gap:6px!important}
  .yjk-picker-toolbar .yjk-clear{font-size:11px!important;line-height:1.15!important;padding:0!important}
  .yjk-search{height:34px!important;padding:0 8px!important}
  .yjk-search input{font-size:11px!important}
  .yjk-finish{min-height:34px!important;height:34px!important;padding:4px 7px!important;font-size:11px!important;line-height:1.15!important}
}

/* Keep count feedback clear of the bracelet's top arc. */
.yjk-count-status { top: 6px !important; }
@media (max-width: 760px) {
  .yjk-count-status { top: 4px !important; max-width: calc(100% - 170px); }
}

/* Final layout constraints. These are intentionally last because the file
   contains older recovery overrides with !important declarations. */
.yjk-diy-app { position: relative; }
.yjk-diy-header {
  position: absolute !important;
  inset: 0 0 auto 0;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
  z-index: 40;
}
.yjk-brand { display: none !important; }
.yjk-diy-header .yjk-icon-btn {
  position: absolute;
  top: 12px;
  left: 14px;
  pointer-events: auto;
}
.yjk-header-price {
  position: absolute;
  top: 15px;
  right: 14px;
  pointer-events: none;
}
.yjk-design-shell { height: 100vh; min-height: 620px; }
.yjk-diy-app:has(.yjk-confirm-shell) { overflow: visible !important; }
.yjk-confirm-shell {
  height: 100dvh;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 72px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
@media (max-width: 760px) {
  .yjk-diy-header .yjk-icon-btn { top: 10px; left: 10px; }
  .yjk-header-price { top: 13px; right: 10px; }
  .yjk-design-shell {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-rows: minmax(390px, 56vh) minmax(360px, 44vh) !important;
  }
  .yjk-confirm-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding-top: 64px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}
/* Checkout polish: long gateway errors stay readable and do not become a
   giant theme-styled bubble; the toast is dismissed by the JS timer. */
.yjk-toast-host {
  width: min(380px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-height: 0;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  text-align: center;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 12px 32px rgba(25, 22, 20, .22);
}

.yjk-bead-details-head,
.yjk-bead-details-row {
  grid-template-columns: 42px minmax(0, 1fr) 80px 100px;
  align-items: center;
}

.yjk-confirm-bead-thumb {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #eee7de;
  border-radius: 8px;
  background: #faf8f4;
}

.yjk-confirm-bead-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 760px) {
  .yjk-checkout-card input,
  .yjk-checkout-card textarea,
  .yjk-checkout-card select {
    /* iOS Safari zooms focused controls below 16px. Keep the layout stable. */
    min-height: 44px;
    font-size: 16px !important;
    line-height: 1.35;
    -webkit-text-size-adjust: 100%;
  }

  .yjk-checkout-card textarea {
    min-height: 88px;
  }

  .yjk-bead-details-head,
  .yjk-bead-details-row {
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    gap: 8px;
  }

  .yjk-bead-details-head {
    font-size: 11px;
  }

  .yjk-confirm-bead-thumb {
    width: 34px;
    height: 34px;
  }

  .yjk-toast-host {
    bottom: max(72px, env(safe-area-inset-bottom));
    padding: 11px 14px;
    font-size: 13px;
  }
}

/* App-shell final cascade. Keep this block last so legacy recovery rules
   cannot turn the mobile surface back into a theme-shaped web page. */
body.yjk-diy-page #wpadminbar { display: none !important; }
html:has(body.yjk-diy-page .yjk-diy-root), body.yjk-diy-page {
  margin-top: 0 !important;
  background: #e9edf3;
}
.yjk-diy-root {
  position: relative !important;
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 20px auto 0 !important;
  padding: 0 12px;
  overflow: visible !important;
}
.yjk-diy-app {
  width: 100% !important;
  min-height: calc(100dvh - 20px);
  overflow: hidden !important;
  border: 1px solid #dfe5ed !important;
  border-radius: 24px !important;
  background: #f4f6f9;
  box-shadow: 0 18px 50px rgba(36, 48, 66, .12);
}
.yjk-diy-header {
  position: sticky !important;
  inset: auto !important;
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center;
  gap: 8px;
  padding: 0 16px !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(222, 228, 237, .9) !important;
  background: rgba(255, 255, 255, .84) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 200;
}
.yjk-brand { display: flex !important; min-width: 0; align-items: center; justify-content: center; gap: 8px; }
.yjk-brand img { width: 28px; height: 28px; object-fit: contain; }
.yjk-brand strong { display: block; min-width: 0; max-width: min(60vw, 280px); color: #273142; font-size: 14px; font-weight: 650; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yjk-diy-header .yjk-icon-btn { position: static !important; width: 36px; height: 36px; pointer-events: auto !important; border: 1px solid #e0e6ee; background: #fff; color: #3b4657; box-shadow: 0 3px 10px rgba(37, 49, 67, .08); }
.yjk-design-shell { height: calc(100dvh - 78px) !important; min-height: 640px !important; }
.yjk-confirm-shell { height: calc(100dvh - 78px) !important; min-height: 0 !important; padding: 18px 20px max(28px, env(safe-area-inset-bottom)) !important; background: #eef2f7; }
.yjk-confirm-top { position: sticky; top: 0; z-index: 15; border: 1px solid rgba(225, 231, 239, .95); border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(52, 65, 84, .09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.yjk-confirm-top strong { color: #202938; font-weight: 750; }
.yjk-confirm-top button, .yjk-pay-main { min-height: 42px !important; border-radius: 12px !important; font-weight: 650; }
.yjk-confirm-top .yjk-pay-main { background: #5167d9 !important; box-shadow: 0 7px 16px rgba(81, 103, 217, .22); }
.yjk-order-card, .yjk-checkout-card, .yjk-bead-details { border: 1px solid rgba(225, 231, 239, .95); border-radius: 16px !important; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 24px rgba(52, 65, 84, .07); }
.yjk-checkout-card h3 { margin: 0 0 18px; color: #273142; font-size: 18px; font-weight: 700; }
.yjk-checkout-card label { gap: 7px; margin-bottom: 14px; color: #6d7787; font-size: 12px; font-weight: 600; line-height: 1.25; }
.yjk-checkout-card input, .yjk-checkout-card textarea, .yjk-checkout-card select { width: 100%; min-width: 0; min-height: 46px; border: 1px solid #e1e6ee !important; border-radius: 12px !important; padding: 12px 13px !important; outline: none; background: #f8fafc !important; color: #273142; font: inherit; font-size: 14px; line-height: 1.35; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.yjk-checkout-card input:focus, .yjk-checkout-card textarea:focus, .yjk-checkout-card select:focus { border-color: #8798e6 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(81, 103, 217, .12); }
.yjk-checkout-card textarea { min-height: 92px; resize: vertical; }
.yjk-cost-line.is-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf0f4; color: #6d7787; }
.yjk-cost-line.is-total b { color: #ef6262; font-size: 22px; }
.yjk-bead-details { margin-top: 16px; overflow: hidden; }
.yjk-bead-details summary { padding: 15px 18px; color: #273142; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  .yjk-diy-root { width: 100vw !important; max-width: 100vw !important; margin-top: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; }
  .yjk-diy-app { min-height: 100dvh; border: 0 !important; border-radius: 0 !important; box-shadow: none; }
  .yjk-diy-header { height: 56px !important; min-height: 56px !important; padding: max(6px, env(safe-area-inset-top)) 12px 6px !important; }
  .yjk-brand strong { max-width: 48vw; font-size: 13px; }
  .yjk-design-shell { height: calc(100dvh - 56px) !important; min-height: 0 !important; grid-template-rows: minmax(320px, 46dvh) minmax(380px, 1fr) !important; }
  .yjk-confirm-shell { height: calc(100dvh - 56px) !important; padding: 10px 12px max(24px, env(safe-area-inset-bottom)) !important; }
  .yjk-confirm-top { top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; gap: 8px; padding: 10px !important; border-radius: 14px; }
  .yjk-confirm-top > div { grid-column: 1 / -1; padding: 2px 3px 4px; }
  .yjk-confirm-top strong { font-size: 24px; }
  .yjk-confirm-top button { width: 100%; padding: 0 10px !important; font-size: 13px; }
  .yjk-order-card, .yjk-checkout-card { padding: 14px !important; }
  .yjk-checkout-card h3 { margin-bottom: 16px; font-size: 17px; }
  .yjk-checkout-card label { margin-bottom: 12px; }
  .yjk-checkout-card input, .yjk-checkout-card textarea, .yjk-checkout-card select { min-height: 46px !important; padding: 12px !important; font-size: 16px !important; }
  .yjk-checkout-card textarea { min-height: 88px !important; }
}

/* Confirmation details: give every selected item a calm, image-led row. */
.yjk-bead-details-head,
.yjk-bead-details-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 110px 110px !important;
  gap: 14px !important;
  align-items: center !important;
}
.yjk-bead-details-head {
  min-height: 34px;
  padding: 0 12px 8px !important;
  border-bottom: 1px solid #edf0f4;
}
.yjk-bead-details-row {
  min-height: 76px;
  padding: 11px 12px !important;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
}
.yjk-bead-details-row:last-child { border-bottom: 0; }
.yjk-bead-details-row > span,
.yjk-bead-details-row > b { min-width: 0; }
.yjk-bead-detail-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  text-align: left !important;
}
.yjk-bead-detail-name strong {
  overflow: hidden;
  color: #273142;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yjk-bead-detail-name small { color: #98a1af; font-size: 11px; }
.yjk-bead-detail-size { color: #6d7787; font-size: 13px; text-align: right !important; }
.yjk-bead-detail-price { color: #ef6262; font-size: 14px; font-weight: 700; text-align: right !important; white-space: nowrap; }
.yjk-confirm-bead-thumb { width: 52px !important; height: 52px !important; border-radius: 10px !important; }
.yjk-purchase-notice {
  max-width: 980px;
  margin: 16px auto 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(225, 231, 239, .95);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(52, 65, 84, .07);
}
.yjk-purchase-notice h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #273142;
  font-size: 16px;
  font-weight: 700;
}
.yjk-purchase-notice h3 span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #e9eefc;
  color: #5167d9;
  font-size: 12px;
  font-weight: 800;
}
.yjk-purchase-notice-body {
  min-height: 24px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  color: #6d7787;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.yjk-purchase-notice-body:empty { background: #f8fafc; }
@media (max-width: 760px) {
  .yjk-bead-details-head,
  .yjk-bead-details-row {
    grid-template-columns: 48px minmax(0, 1fr) auto auto !important;
    gap: 9px !important;
  }
  .yjk-bead-details-head { min-height: 30px; padding: 0 8px 7px !important; }
  .yjk-bead-details-row { min-height: 70px; padding: 10px 8px !important; }
  .yjk-confirm-bead-thumb { width: 46px !important; height: 46px !important; }
  .yjk-bead-detail-name strong { font-size: 13px; }
  .yjk-bead-detail-size, .yjk-bead-detail-price { font-size: 12px; }
  .yjk-purchase-notice { margin-top: 12px; padding: 15px 14px 16px; border-radius: 14px; }
  .yjk-purchase-notice h3 { margin-bottom: 10px; font-size: 15px; }
  .yjk-purchase-notice-body { padding: 11px 12px; font-size: 13px; line-height: 1.7; }
}

/* Wrist + loop selection follows the source mini-program's single-step sheet. */
.yjk-wrist-setting-modal {
  width: min(460px, 100%);
  padding: 28px;
  border-radius: 16px;
}
.yjk-wrist-setting-modal h2 { margin: 0 0 10px; font-size: 24px; }
.yjk-wrist-setting-modal > p { margin: 0; color: #6d7787; line-height: 1.55; }
.yjk-wrist-setting-modal .wrist-grid { margin: 20px 0 16px; }
.yjk-wrist-setting-modal .wrist-grid button {
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 8px 6px;
  border-color: #e2d8cd;
  color: #273142;
  background: #fff;
}
.yjk-wrist-setting-modal .wrist-grid button strong { font-size: 18px; font-weight: 500; line-height: 1; }
.yjk-wrist-setting-modal .wrist-grid button small { color: #8f8a84; font-size: 11px; }
.yjk-wrist-setting-modal .wrist-grid button.is-active { border-color: #273142; background: #273142; color: #fff; }
.yjk-wrist-setting-modal .wrist-grid button.is-active small { color: rgba(255,255,255,.72); }
.yjk-wear-setting-label { margin: 4px 0 8px; color: #8a7461; font-size: 13px; font-weight: 650; }
.yjk-wear-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.yjk-wear-setting-grid button {
  min-height: 46px;
  border: 1px solid #e2d8cd;
  border-radius: 8px;
  background: #f8f7f5;
  color: #273142;
  font-size: 14px;
  cursor: pointer;
}
.yjk-wear-setting-grid button.is-active { border-color: #273142; background: #fff; box-shadow: 0 0 0 1px #273142; font-weight: 700; }
.yjk-wrist-setting-confirm { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #273142; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.yjk-wrist-setting-modal .guide-link { display: block; margin: 14px auto 0; font-size: 13px; }
@media (max-width: 760px) {
  .yjk-wrist-setting-backdrop { place-items: end center; padding: 0; }
  .yjk-wrist-setting-modal { width: 100%; max-width: 430px; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .yjk-wrist-setting-modal h2 { text-align: center; font-size: 20px; }
  .yjk-wrist-setting-modal > p { text-align: center; font-size: 13px; }
  .yjk-wrist-setting-modal .wrist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 16px 0 14px; }
  .yjk-wrist-setting-modal .wrist-grid button { min-height: 48px; border: 0; border-radius: 7px; background: #f7f7f7; }
  .yjk-wrist-setting-modal .wrist-grid button strong { font-size: 15px; font-weight: 650; }
  .yjk-wrist-setting-modal .wrist-grid button small { font-size: 10px; }
  .yjk-wear-setting-label { margin-top: 2px; font-size: 12px; }
  .yjk-wear-setting-grid button { min-height: 44px; border: 0; }
  .yjk-wrist-setting-confirm { min-height: 46px; border-radius: 22px; }
}