/* =========================================================
   NBC EPO – FULL OVERRIDE CSS (replace-all)
   v2.3.1 (based on your v2.2.1 + largecards variant safe)
   - Keep your original compact style + guide modal
   - Add UI Variant: largecards / large_thumb (image large like screenshot #2)
   - Fix: no overflow, with spacing, no magnifier
   - Fix: ✓ tick inside image frame for largecards
   - Fix: DO NOT affect WooCommerce product gallery (no huge blank space)
   ========================================================= */

/* ---------- Root + base ---------- */
#nbc-epo-root{
  margin:-10px 0 -10px 0;      /* 上下间距缩小 */
  padding:0;
  position:relative;
  min-height:0; /* 默认不强制撑高（由 boot 状态占位控制） */
}

/*
  Reserve stable space before JS renders the EPO UI.
  This dramatically reduces CLS (page jump) on first paint.
  JS will remove .nbc-epo-boot once the UI is rendered.
*/
#nbc-epo-root.nbc-epo-boot{
  min-height:360px;
}

#nbc-epo-root,
#nbc-epo-root *{
  font-weight:400;
  box-sizing:border-box;
}

/* Sections */
#nbc-epo-root .nbc-epo-section{ margin:14px 0; }

#nbc-epo-root .nbc-epo-title{
  margin:0 0 8px 0;
  font-size:16px;
  line-height:1.25;
}

#nbc-epo-root .nbc-epo-required{ color:#c00; margin-left:4px; }

#nbc-epo-root .nbc-epo-error{
  color:#c00;
  font-size:12px;
  margin-top:6px;
  display:none;
}
#nbc-epo-root .nbc-epo-error.is-on{ display:block; }

#nbc-epo-root .nbc-epo-note{
  font-size:13px;
  opacity:.85;
  line-height:1.5;
}

@media (max-width:680px){
  #nbc-epo-root .nbc-epo-title{ font-size:13px; }
  #nbc-epo-root .nbc-epo-note{ font-size:12px; }
  #nbc-epo-root .nbc-epo-error{ font-size:11px; }
}

/* ---------- Count select ---------- */
/* ✅ 改：count_select 下拉 + 价格同一行，价格紧贴输入框（不跑到最右） */
#nbc-epo-root .nbc-epo-select{
  width:100%;
}

/* 仅 count_select 生效，避免影响你别的 select-row */
#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px; /* 控制价格贴近程度 */
}

/* 原来 select 是 width:100% 会撑满整行，价格只能被挤到右侧/换行
   这里让它按内容宽度显示，并给一个合适的最小宽度 */
#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select select{
  width:auto;
  flex:0 0 auto;
  min-height:44px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.2;

  min-width:220px;   /* 你可以改 200/240/260 */
  max-width:100%;
}

/* 价格紧贴 select，不要“右对齐/固定最小宽度”导致看起来跑到右侧 */
#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select-price{
  flex:0 0 auto;
  min-width:0;
  text-align:left;
  margin-left:0;
  white-space:nowrap;

  font-size:13px;
  opacity:.9;
}

#nbc-epo-root .nbc-epo-select select{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.2;
}

#nbc-epo-root select option{
  font-size:13px;
  line-height:1.2;
}
#nbc-epo-root .nbc-epo-select-addon{ display:none !important; }

@media (max-width:680px){
  #nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select select{
    font-size:12px;
    min-width:180px; /* 手机上更紧凑 */
  }
  #nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select-price{
    font-size:12px;
  }
  #nbc-epo-root .nbc-epo-select select{ font-size:12px; }
  #nbc-epo-root select option{ font-size:12px; }
}

/* ---------- Inputs + counter ---------- */
#nbc-epo-root .nbc-epo-input{
  width:100%;
  position:relative;
}
#nbc-epo-root .nbc-epo-input input{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  padding-right:64px;
  font-size:13px;
  line-height:1.2;
}
#nbc-epo-root .nbc-epo-counter{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  opacity:.55;
  pointer-events:none;
  z-index:3;
}
#nbc-epo-root .nbc-epo-input input::placeholder{
  font-size:12px;
  color:rgba(0,0,0,0.35);
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-input input{ font-size:12px; }
  #nbc-epo-root .nbc-epo-counter{ font-size:11px; }
  #nbc-epo-root .nbc-epo-input input::placeholder{ font-size:11px; }
}

/* ---------- Extra price line ---------- */
#nbc-epo-root .nbc-epo-addon{
  margin:8px 0 10px 0;
  font-size:13px;
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-addon{ font-size:12px; }
}

/* =========================================================
   Material cards (DEFAULT: with image)
   ========================================================= */
/* Grid default (image cards): 3 columns */
#nbc-epo-root .nbc-epo-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
  width:100%;
  max-width:100%;
}

/* FIX: if this cards group contains no-image cards (like your Material section),
   use auto-fit so 2 options => 2 columns (no empty 3rd column). */
#nbc-epo-root .nbc-epo-cards:has(.nbc-epo-card.nbc-noimg){
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

/* Mobile */
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-cards{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
  /* Mobile: noimg groups look better as 2 columns */
  #nbc-epo-root .nbc-epo-cards:has(.nbc-epo-card.nbc-noimg){
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

/* Card base */
#nbc-epo-root .nbc-epo-card{
  width:100%;
  height:100%;
  padding:6px 6px 7px 6px;
  border:1px solid #e3e7eb;
  border-radius:2px;
  background:#fff;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  text-align:center;
  cursor:pointer;
  position:relative;

  box-shadow:none !important;
}

/* Image wrapper (default small thumb) */
#nbc-epo-root .nbc-epo-card .imgwrap{
  width:100px;
  height:84px;
  margin:4px auto 0 auto;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;
}
#nbc-epo-root .nbc-epo-card .imgwrap img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0;
  display:block;
}

/* Label / Price (default vertical stack) */
#nbc-epo-root .nbc-epo-card .label{
  margin-top:4px;
  font-size:12px;
  line-height:1.05;
  min-height:calc(12px * 1.05 * 2);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  overflow:hidden;
}
#nbc-epo-root .nbc-epo-card .price{
  margin-top:2px;
  font-size:12px;
  line-height:1.05;
  min-height:12px;
  opacity:.9;
}

/* Active: border only (NO shadow) */
#nbc-epo-root .nbc-epo-card.is-active{
  border-color:#111;
  box-shadow:none !important;
}

/* Tick only for active (DEFAULT cards) */
#nbc-epo-root .nbc-epo-card.is-active::after{
  content:"✓";
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:#111;
}

/* Mobile scale */
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-card{
    padding:5px 5px 6px 5px;
  }
  #nbc-epo-root .nbc-epo-card .imgwrap{
    width:90px;
    height:78px;
    margin-top:4px;
  }
  #nbc-epo-root .nbc-epo-card .label,
  #nbc-epo-root .nbc-epo-card .price{
    font-size:11px;
    line-height:1.05;
  }
  #nbc-epo-root .nbc-epo-card .label{
    min-height:calc(11px * 1.05 * 2);
  }
  #nbc-epo-root .nbc-epo-card .price{
    min-height:11px;
  }
}

/* =========================================================
   NO-IMAGE material cards (.nbc-noimg)
   - flatter
   - label + price on ONE LINE
   - do not affect image cards
   ========================================================= */

#nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg{
  padding:6px 8px;
  min-height:52px;
  justify-content:center;
  border-radius:2px;
  box-shadow:none !important;
}

/* noimg: hide imgwrap */
#nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg .imgwrap{
  display:none !important;
}

/* noimg: inline row */
#nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg{
  text-align:center;
}

/* noimg: label + price same line */
#nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg .label{
  display:inline !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;

  font-size:13px;
  line-height:1.1;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

#nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg .price{
  display:inline !important;
  min-height:0 !important;
  margin:0 0 0 6px !important;
  padding:0 !important;

  font-size:13px;
  line-height:1.1;

  white-space:nowrap !important;
  opacity:1;
  color:#111;
}

@media (max-width:680px){
  #nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg{
    min-height:46px;
    padding:5px 6px;
  }
  #nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg .label,
  #nbc-epo-root .nbc-epo-section[data-type="material_cards"] .nbc-epo-card.nbc-noimg .price{
    font-size:12px;
  }
}

/* =========================================================
   REMOVE native radio dot completely (cards)
   ========================================================= */
#nbc-epo-root .nbc-epo-card input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
}
#nbc-epo-root .nbc-epo-card input[type="radio"]::before,
#nbc-epo-root .nbc-epo-card input[type="radio"]::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   Birthstone trigger (dropdown)
   ========================================================= */
#nbc-epo-root .nbc-epo-bs-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:6px 10px;
  min-height:48px;
  border:1px solid #cfd7df;
  background:#fff;
  border-radius:2px;
  cursor:pointer;
}
#nbc-epo-root .nbc-epo-bs-trigger .left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
#nbc-epo-root .nbc-epo-bs-trigger img{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:999px;
  flex:0 0 auto;
  display:block;
}
#nbc-epo-root .nbc-epo-bs-trigger .txt{
  display:block;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 auto;
}
#nbc-epo-root .nbc-epo-bs-trigger .caret{
  opacity:.75;
  font-size:14px;
  line-height:1;
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-bs-trigger{ min-height:44px; }
  #nbc-epo-root .nbc-epo-bs-trigger .txt{ font-size:12px; }
}

/* Panel open/close */
#nbc-epo-root .nbc-epo-bs-panel{
  display:none;
  border:1px solid #cfd7df;
  border-top:none;
  padding:12px;
  background:#fff;
}
#nbc-epo-root .nbc-epo-bs-panel.is-open{ display:block; }

/* Birthstone grid */
#nbc-epo-root .nbc-epo-grid{
  --nbc-cols:4;
  --nbc-cols-mobile:3;

  display:grid;
  grid-template-columns:repeat(var(--nbc-cols), minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-grid{
    grid-template-columns:repeat(var(--nbc-cols-mobile), minmax(0, 1fr));
    gap:6px;
  }
}
#nbc-epo-root .nbc-epo-bs{
  position:relative;
  cursor:pointer;

  background:#fff;
  border:1px solid #e3e7eb;
  border-radius:2px;

  padding:10px 8px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  aspect-ratio:1 / 1;
}
#nbc-epo-root .nbc-epo-bs img{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px auto;
}
#nbc-epo-root .nbc-epo-bs .desc{
  font-size:12px;
  line-height:1.05;

  min-height:calc(12px * 1.05 * 2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  overflow:hidden;
  margin:0;
  padding:0;
}
#nbc-epo-root .nbc-epo-bs.is-active{
  border-color:#111;
  box-shadow:none !important;
}
#nbc-epo-root .nbc-epo-bs.is-active::after{
  content:"✓";
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:#111;
  border-radius:0;
  z-index:5;
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-bs img{
    width:40px;
    height:40px;
    margin-bottom:10px;
  }
  #nbc-epo-root .nbc-epo-bs .desc{
    font-size:11px;
    min-height:calc(11px * 1.05 * 2);
  }
}

/* ---------- Select row price (right) ---------- */
#nbc-epo-root .nbc-epo-select-row{
  display:flex;
  align-items:center;
  gap:12px;
}
#nbc-epo-root .nbc-epo-select-row select{ flex:1 1 auto; }
#nbc-epo-root .nbc-epo-select-price{
  flex:0 0 auto;
  min-width:80px;
  text-align:right;
  font-size:13px;
  opacity:.9;
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-select-price{ font-size:12px; min-width:70px; }
}

/* ---------- Loading overlay (no text) ---------- */
#nbc-epo-root.nbc-epo-loading{
  position:relative;
  min-height:360px;
}
#nbc-epo-root.nbc-epo-loading::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.65);
  z-index:50;
}
#nbc-epo-root.nbc-epo-loading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:36px;
  height:36px;
  margin:-18px 0 0 -18px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,0.15);
  border-top-color:#111;
  animation:nbc-epo-spin 0.8s linear infinite;
  z-index:51;
}
@keyframes nbc-epo-spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Guide link + modal (ONE definitive set)
   ========================================================= */

#nbc-epo-root .nbc-epo-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

#nbc-epo-root .nbc-epo-head .nbc-epo-title{
  margin:0 0 8px 0;
}

#nbc-epo-root .nbc-epo-guide-link{
  font-size:12px;
  line-height:1.2;
  text-decoration:underline;
  opacity:.85;
  margin:0 0 8px 0;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
#nbc-epo-root .nbc-epo-guide-link:hover{ opacity:1; }

/* Modal base */
#nbc-epo-guide-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}
#nbc-epo-guide-modal[aria-hidden="false"]{ display:block; }

#nbc-epo-guide-modal .nbc-epo-guide-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

/* Dialog: narrower + NO shadow */
#nbc-epo-guide-modal .nbc-epo-guide-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

  width:min(720px, calc(100vw - 28px));
  max-height:min(78vh, 780px);

  background:#fff;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.12);

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#nbc-epo-guide-modal .nbc-epo-guide-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:6px 12px;
  min-height:40px;

  background:#f5fbff;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

#nbc-epo-guide-modal .nbc-epo-guide-title{
  margin:0;
  font-size:14px;
  line-height:1.2;
}

/* Close: bigger */
#nbc-epo-guide-modal .nbc-epo-guide-close{
  width:28px;
  height:28px;
  line-height:28px;
  font-size:22px;

  margin:0;
  padding:0;

  background:transparent;
  border:0;
  cursor:pointer;
}
#nbc-epo-guide-modal .nbc-epo-guide-close:hover{ opacity:1; }

#nbc-epo-guide-modal .nbc-epo-guide-body{
  flex:1 1 auto;
  padding:14px 14px 22px 14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  font-size:13px;
  line-height:1.45;
}

/* Any image inside guide */
#nbc-epo-guide-modal .nbc-epo-guide-body img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

/* Birthstone guide: left icon + right text */
#nbc-epo-guide-modal .nbc-guide-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
}

#nbc-epo-guide-modal .nbc-guide-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
#nbc-epo-guide-modal .nbc-guide-item:last-child{ border-bottom:0; }

#nbc-epo-guide-modal .nbc-guide-item .img{
  flex:0 0 34px;
  width:34px;
  margin-top:-3px;
}
#nbc-epo-guide-modal .nbc-guide-item .img img{
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
  border-radius:999px;
}
#nbc-epo-guide-modal .nbc-guide-item .txt{
  flex:1 1 auto;
  min-width:0;
}
#nbc-epo-guide-modal .nbc-guide-item .n{
  font-weight:600;
  margin:0 0 4px 0;
}
#nbc-epo-guide-modal .nbc-guide-item .d{
  margin:0;
  opacity:.9;
}

/* Size guide table helpers */
#nbc-epo-guide-modal .nbc-guide-table{
  border:1px solid rgba(0,0,0,0.10);
  border-radius:6px;
  overflow:hidden;
  margin-top:10px;
}
#nbc-epo-guide-modal .nbc-guide-table .r{
  display:grid;
  grid-template-columns:46px 1fr 70px 70px;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,0.08);
}
#nbc-epo-guide-modal .nbc-guide-table .r:first-child{ border-top:none; }
#nbc-epo-guide-modal .nbc-guide-table .c1{ opacity:.7; }
#nbc-epo-guide-modal .nbc-guide-table .c3,
#nbc-epo-guide-modal .nbc-guide-table .c4{ text-align:right; opacity:.9; }

@media (max-width:680px){
  #nbc-epo-root .nbc-epo-guide-link{ font-size:11px; }
  #nbc-epo-guide-modal .nbc-epo-guide-body{ font-size:12px; }
  #nbc-epo-guide-modal .nbc-epo-guide-dialog{
    width:calc(100vw - 18px);
    max-width:420px;
  }
  #nbc-epo-guide-modal .nbc-guide-table .r{
    grid-template-columns:38px 1fr 56px 56px;
    padding:9px 10px;
  }
}

/* ================================
   NBC EPO – Ring Size Guide layout
   (fix: bullets + stacked lists)
   ================================ */

#nbc-epo-guide-modal .nbc-epo-guide-body{
  white-space: normal;
  line-height: 1.5;
}

/* container */
#nbc-epo-guide-modal #measure-finger.tabTypeGuide{
  max-width: 920px;
  margin: 0 auto;
}

/* title */
#nbc-epo-guide-modal #measure-finger .videoTitle{
  font-weight: 600;
  margin: 6px 0 10px;
}

/* list spacing */
#nbc-epo-guide-modal #measure-finger ol{
  margin: 8px 0 14px 18px;
}
#nbc-epo-guide-modal #measure-finger .tableTitle{
  font-weight: 600;
  margin: 10px 0 8px;
}

/* table box */
#nbc-epo-guide-modal #measure-finger .ringsizeTableBox{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;
}

/* header row */
#nbc-epo-guide-modal #measure-finger .ringsizeTableTabTitle{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.04);
  font-weight: 600;
}
#nbc-epo-guide-modal #measure-finger .ringsizeTableTabTitle span{
  display: block;
}

/* 3 columns lists */
#nbc-epo-guide-modal #measure-finger .ringsizeTableTab{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

/* remove bullets + reset spacing */
#nbc-epo-guide-modal #measure-finger .ringsizeTableTab ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,.08);
}
#nbc-epo-guide-modal #measure-finger .ringsizeTableTab ul + ul{
  border-left: 1px solid rgba(0,0,0,.08);
}

/* rows */
#nbc-epo-guide-modal #measure-finger .ringsizeTableTab li{
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  line-height: 1.35;
}

/* highlight "Most popular" row */
#nbc-epo-guide-modal #measure-finger .ringsizeTableTab li.red{
  font-weight: 700;
  background: rgba(255,0,0,.06);
}

/* mm small suffix */
#nbc-epo-guide-modal #measure-finger .listMmSpanm{
  opacity: .7;
  font-size: 12px;
  margin-left: 4px;
}

/* responsive: on small screens stack to 1 column */
@media (max-width: 680px){
  #nbc-epo-guide-modal #measure-finger .ringsizeTableTab{
    grid-template-columns: 1fr;
  }
  #nbc-epo-guide-modal #measure-finger .ringsizeTableTab ul + ul{
    border-left: none;
    border-top: none;
    margin-top: 10px;
  }
}

/* Optional loading layer (your existing) */
.nbc-epo-loading-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.nbc-epo-loading-spin {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================
   Material Cards – UI Variant: largecards / large_thumb
   Enable via JSON:
   - "uiVariant": "large_thumb"
   or
   - "ui": { "variant": "large_thumb" }
   Optional:
   - "ui": { "hidePrice": true }
   ========================================================= */

/* Largecards container: force nice spacing, no overflow */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-cards,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  width:100%;
  max-width:100%;
  margin:0;
}

/* Mobile: 2 cols */
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-cards,
  #nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-cards{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
  }
}

/* Largecards card shell: transparent, border on image frame */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card{
  border:none;
  padding:0;
  background:transparent;
  border-radius:0;
  box-shadow:none !important;
}

/* IMPORTANT:
   - Make the image frame responsive (no fixed 180px)
   - Use square aspect-ratio
   - Only affects NBC EPO area (safe to gallery)
*/
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .imgwrap,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card .imgwrap{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  margin:0 auto 8px auto;

  border:1px solid #e3e7eb;
  border-radius:0;
  background:#fff;
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

/* FIX: Large material cards were computed too tall (aspect-ratio 1/1 + width:100%),
   which visually creates a huge gap before the next module.
   Cap the thumbnail box size (MYKA/Callie-like) while keeping layout & selection UI. */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .imgwrap{
  width: min(100%, 180px);
}
@media (max-width:680px){
  #nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .imgwrap{
    width: min(100%, 140px);
    margin:0 auto 6px auto;
  }
}

#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .imgwrap img,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card .imgwrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Active border on image frame */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card.is-active .imgwrap,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card.is-active .imgwrap{
  border-color:#111;
}

/* Typography: same as your default cards */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .label,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card .label{
  margin-top:4px;
  font-size:12px;
  line-height:1.05;
  min-height:calc(12px * 1.05 * 2);
  font-weight:400;
}

#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card .price,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card .price{
  margin-top:2px;
  font-size:12px;
  line-height:1.05;
  min-height:12px;
  opacity:.9;
}

/* hide price if requested (section class added by JS) */
#nbc-epo-root .nbc-epo-section.nbc-hide-price .nbc-epo-card .price{
  display:none;
}

/* ===== Tick (✓) inside image frame for largecards ===== */
/* 1) Disable default card tick in largecards */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card.is-active::after,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card.is-active::after{
  content:none !important;
  display:none !important;
}

/* 2) Put tick inside the image box */
#nbc-epo-root .nbc-epo-section.nbc-ui-largecards .nbc-epo-card.is-active .imgwrap::after,
#nbc-epo-root .nbc-epo-section.nbc-ui-large-thumb .nbc-epo-card.is-active .imgwrap::after{
  content:"✓";
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:#111;
  z-index:5;
  pointer-events:none;
}

/* =====================================================
   Smooth icon rendering (no lazy "popping")
   - JS adds .nbc-epo-icons-preloading to #nbc-epo-root
   - Keep layout stable but hide icon areas until preloaded+decoded
   ===================================================== */
#nbc-epo-root.nbc-epo-icons-preloading .nbc-epo-bs-trigger img,
#nbc-epo-root.nbc-epo-icons-preloading .nbc-epo-bs-panel img,
#nbc-epo-root.nbc-epo-icons-preloading .nbc-epo-section[data-type$="_cards"] .imgwrap img{
  visibility:hidden;
}

/* Keep trigger height stable while icons hidden */
#nbc-epo-root.nbc-epo-icons-preloading .nbc-epo-bs-trigger .left{
  min-height:44px;
}

/* Count select + price: occupy FULL row, price next to select */
#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  width:100%;
  gap:10px;
}

#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select select{
  flex:1 1 auto;      /* 关键：占满剩余宽度 */
  width:100% !important;
  min-width:0;
}

#nbc-epo-root .nbc-epo-section[data-type="count_select"] .nbc-epo-select-price{
  flex:0 0 auto;
  margin-left:0 !important;
  min-width:0;
  text-align:left;
  white-space:nowrap;
}