.product-card { position: relative; }

.variant-count-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(32,30,26,.82);
  color: #fff;
  box-shadow: 0 5px 18px rgba(32,30,26,.14);
  backdrop-filter: blur(8px);
  font-size: 11px;
  line-height: 1;
}

.variant-selection-summary {
  display: block;
  margin-top: 5px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

#productModal .modal-card {
  width: min(1080px,100%);
  grid-template-columns: minmax(320px,.9fr) minmax(380px,1.1fr);
}

#modalImage {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 15px;
}

.modal-media { min-width: 0; }
.product-photo { position: relative; }
.photo-count-badge { position:absolute;right:9px;bottom:9px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:rgba(32,30,26,.8);color:#fff;font-size:11px;font-weight:800;z-index:2; }
.product-gallery-strip { display:flex;gap:8px;overflow-x:auto;margin-top:9px;padding:3px 1px 7px;scrollbar-width:thin; }
.product-gallery-strip button { position:relative;flex:0 0 68px;width:68px;height:68px;padding:2px;border:2px solid transparent;border-radius:10px;background:#fff;overflow:hidden; }
.product-gallery-strip button.active { border-color:var(--gold-dark); }
.product-gallery-strip img { width:100%;height:100%;object-fit:contain;border-radius:7px; }
.product-gallery-strip button>span { position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px; }

.variant-picker {
  margin: 16px 0 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f6f1e8;
}

.variant-picker-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 11px;
  font-size: 13px;
}

.variant-picker-title span { color: var(--muted); font-size: 11px; }

.variant-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  max-height: 310px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  padding: 1px 4px 1px 1px;
}

.variant-option {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ded6c9;
  border-radius: 12px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.variant-option.active {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 2px rgba(183,154,101,.18);
}

.variant-option.selected { background: #fbf5e9; }

.variant-activate {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  width: 100%;
  min-width: 0;
  padding: 7px;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.variant-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 8px;
  background: #f8f6f2;
}

.variant-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.variant-thumb .loading { color: var(--muted); font-size: 10px; }
.variant-label { min-width: 0; align-self: center; }
.variant-label b,.variant-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variant-label b { font-size: 12px; }
.variant-label small { margin-top: 5px; color: var(--muted); font-size: 10px; }

.card-variant-previews { display:flex; gap:5px; margin:10px 0 7px; }
.card-variant-previews button { position:relative; width:44px; height:44px; padding:2px; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.card-variant-previews img { width:100%; height:100%; object-fit:contain; }
.card-variant-previews .loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); }
.card-variant-previews .card-variant-more { flex:1; min-width:28px; max-width:58px; display:flex; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:800; background:#f4eee3; }
.card-variant-previews button:focus-visible,.variant-activate:focus-visible { outline:3px solid var(--gold-dark); outline-offset:-3px; }
.variant-help { margin:0 0 10px; font-size:12px; line-height:1.4; color:var(--muted); }
.variant-search { min-height:44px; margin-bottom:10px; padding:9px 12px; font-size:13px; }
.variant-empty { font-size:13px; }
.product-modal-actions { grid-column:1/-1; position:sticky; bottom:-20px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 -20px -20px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); box-shadow:0 -6px 15px #201e1a10; }
.product-modal-actions button { min-height:44px; font-size:13px; overflow-wrap:anywhere; }
.product-modal-actions .primary { flex:1; max-width:320px; }
.product-spec-details summary { min-height:44px; padding:12px 0; color:var(--muted); cursor:pointer; font-size:12px; }

.variant-checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 8px;
  border-top: 1px solid #eee8de;
  cursor: pointer;
}

.variant-checkbox input { flex: 0 0 18px; margin: 0; }
.variant-checkbox span { display: inline; margin: 0; font-size: 11px; line-height: 1.2; }

@media (max-width: 760px) {
  #productModal .modal-card { display: block; padding: 13px; }
  .modal-media { margin-bottom: 10px; }
  .variant-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 360px; }
}

@media (max-width: 420px) {
  .variant-picker { padding: 10px; }
  .variant-grid { grid-template-columns: 1fr; max-height: 340px; }
  .variant-count-badge { top: 7px; left: 7px; padding: 6px 8px; }
}

html[dir="rtl"] .variant-count-badge {
  right: 10px;
  left: auto;
}

html[dir="rtl"] .photo-count-badge {
  right: auto;
  left: 9px;
}

/* Image-led selection: viewing a color and selecting it remain separate actions. */
#productModal .modal-card { column-gap:22px; row-gap:12px; }
#modalContent h2 { margin:10px 34px 14px 0; font-size:24px; }
.variant-picker { margin:0; padding:12px; }
.variant-grid { max-height:390px; }
.variant-activate { display:block; padding:6px; text-align:start; }
.variant-thumb { width:100%; height:auto; aspect-ratio:1.2; }
.variant-label { display:block; padding:8px 2px 2px; }
.variant-label b { font-size:13px; }
.variant-label small { margin-top:3px; font-size:11px; }
.variant-option.active { border-color:#999083; box-shadow:0 0 0 1px #999083; }
.variant-option.selected { border-color:var(--gold-dark); box-shadow:inset 0 0 0 1px var(--gold-dark); }
.variant-option.selected .variant-checkbox { background:#eee0c3; }
.variant-checkbox { min-height:44px; }
.variant-checkbox input { width:18px; height:18px; }
.variant-checkbox span { font-size:12px; }
.variant-option { position:relative; }
.variant-option .variant-checkbox { position:absolute; top:7px; inset-inline-end:7px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #d8cebd; border-radius:10px; background:#fffc; box-shadow:0 2px 8px #201e1a14; }
.variant-option .variant-checkbox span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.variant-option .variant-checkbox input { width:21px; height:21px; margin:0; accent-color:#826431; }
.variant-option.selected .variant-checkbox { background:#ecdcba; border-color:var(--gold-dark); }
@media(max-width:760px) {
  #modalImage { height:170px; aspect-ratio:auto; }
  .has-variants .modal-media { display:flex; align-items:center; gap:10px; }
  .has-variants #modalImage { flex:0 0 135px; width:135px; height:135px; }
  .has-variants .product-gallery-strip { flex:1; flex-wrap:wrap; max-height:110px; align-content:flex-start; }
  .product-gallery-strip { margin-top:5px; padding-bottom:2px; }
  .product-gallery-strip button { flex-basis:44px; width:44px; height:44px; }
  #modalContent h2 { font-size:19px; margin:5px 28px 10px 0; }
  .variant-grid { max-height:min(38vh,320px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .variant-thumb { aspect-ratio:1.4; }
  .product-modal-actions { bottom:-13px; margin:12px -13px -13px; padding:10px 13px calc(10px + env(safe-area-inset-bottom)); }
}
@media(max-width:420px) {
  .card-variant-previews button { width:36px; }
  .variant-picker { padding:8px; }
  #productModal { padding:8px; }
  #productModal .modal-card { max-height:96dvh; }
  .variant-label b { font-size:12px; }
  .variant-checkbox { padding:6px; gap:5px; }
}

@media (max-width: 420px) {
  html[dir="rtl"] .variant-count-badge {
    right: 7px;
    left: auto;
  }
}