/* style.css   aktu ln  verze (KROK 1 + KROK 2, bez fajfek, v t   text v kart ch) */


.ring-configurator {
  width: 100%;
  max-width: none;
  background: transparent;
  color: #000 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transform: none;
  opacity: 1 !important;
  filter: none !important;
}

.ring-configurator * {
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
  opacity: 1;
  filter: none;
}

/* Desktop: rozm r nechat, ale posunout doleva */
@media (min-width:900px) {
  .ring-configurator {
    width: calc(100% + 34px);
    margin-right: -34px;
    transform: translateX(-22px);
  }
}

/* =========================================================
   KROK 1A: SCHOVAT ZAKROU KOVAN  V CI NA MASTER PRODUKTU
   (pouze kdy  str nka obsahuje konfigur tor)
========================================================= */

/* velk  blok ceny dole (12 K /ks apod.) */
html.rc-flag-konfigurator body:has(.ring-configurator) .p-final-price-wrapper {
  display: none !important;
}

/*  K d produktu    */
html.rc-flag-konfigurator body:has(.ring-configurator) .p-code,
html.rc-flag-konfigurator body:has(.ring-configurator) .p-product-code,
html.rc-flag-konfigurator body:has(.ring-configurator) .product-code,
html.rc-flag-konfigurator body:has(.ring-configurator) .p-detail-info .code,
html.rc-flag-konfigurator body:has(.ring-configurator) [data-testid="productCardCode"] {
  display: none !important;
}

/* kr tk  popis pod CTA s  V ce informac  (Venus m  e m t v c variant t  d) */
html.rc-flag-konfigurator body:has(.ring-configurator) .p-short-description,
html.rc-flag-konfigurator body:has(.ring-configurator) .short-description,
html.rc-flag-konfigurator body:has(.ring-configurator) .basic-description,
html.rc-flag-konfigurator body:has(.ring-configurator) .p-detail-info .description,
html.rc-flag-konfigurator body:has(.ring-configurator) .p-detail-info .p-description,
html.rc-flag-konfigurator body:has(.ring-configurator) .p-detail-info .p-desc {
  display: none !important;
}

/* =========================================================
   KROK 1B: KONFIGUR TOR   ODSTRANIT HORN    DEK + KOMPAKTN  SPACING
========================================================= */

/* horn    dek v konfigur toru (K d produktu / Konfigur tor prsten  / P ipraveno) */
.ring-configurator__head {
  display: none !important;
}

/* error box kompaktn  */
.ring-configurator__errorBox {
  display: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(200, 0, 0, .35);
  background: #fff;
  border-radius: 0;
  color: #b00000 !important;
  font-size: 13px;
  line-height: 1.35;
}

.ring-configurator__errorBox.is-visible {
  display: block;
}

/* ===== KARTY (D msk  / P nsk ) ===== */
.ring-configurator__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}

@media (max-width:640px) {
  .ring-configurator__cards {
    grid-template-columns: 1fr;
  }
}

.ring-configurator__card {
  position: relative;
  border: 3px solid rgba(0, 0, 0, .25);
  background: #fff;
  border-radius: 0;
  min-height: 62px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease;
}

.ring-configurator__card:hover {
  background: rgba(0, 0, 0, .03);
}

.ring-configurator__card.is-active {
  background: #fff;
  border-color: rgba(0, 0, 0, .9);
}

/* zv t it text v kart ch */
.ring-configurator__cardTitle {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .2px;
  color: #000 !important;
}

/* vymazat  hnusn  fajfky  v textu karet (na obr zku jsou jako znak p ed slovem) */
.ring-configurator__cardTitle {
  text-indent: 0;
}

.ring-configurator__cardTitle::before {
  content: none !important;
  display: none !important;
}

/* pokud je to p  mo znak ? v textu, zkus me ho CSSkem schovat t m,  e ho p ekryjeme p es font-feature */
.ring-configurator__cardTitle {
  font-variant-ligatures: none;
}

/* sekce */
.ring-configurator__section {
  margin: 0;
  padding: 0;
}

.ring-configurator__sectionTitle {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 14px;
  color: #000 !important;
}

/* zbyte n  nadpisy uvnit    schovat title kalkula ky */
.ring-configurator__price .ring-configurator__sectionTitle {
  display: none !important;
}

/* rozlo en  velikost + rytina */
.ring-configurator__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}

@media (min-width:900px) {
  .ring-configurator__grid2 {
    /* levý sloupec zmenšený o 54px -> odstraní „hluchou“ mezeru, rytina se posune doleva */
    grid-template-columns: clamp(186px, calc(34% - 54px), 326px) minmax(0, 380px);
    gap: 10px 12px;
    justify-content: start;
  }

  /* Velikost: už nenechávej prázdné místo uvnitř pole */
  .ring-configurator__field[data-rc="fieldWomenSize"] .ring-configurator__select,
  .ring-configurator__field[data-rc="fieldMenSize"] .ring-configurator__select {
    max-width: 100%;
    justify-self: stretch;
  }
}

@media (max-width:640px) {
  .ring-configurator__grid2 {
    grid-template-columns: 1fr;
  }
}

/* fieldy */
.ring-configurator__field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.ring-configurator__label {
  font-size: 14px;
  font-weight: 700;
  color: #000 !important;
  margin: 0;
}

/* select/input  shoptet-like  */
.ring-configurator__select,
.ring-configurator__input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .25);
  background: #fff;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.1;
  color: #000 !important;
  outline: none;
}

.ring-configurator__select:focus,
.ring-configurator__input:focus {
  border-color: rgba(0, 0, 0, .9);
  box-shadow: none;
}

.ring-configurator__input::placeholder {
  color: rgba(0, 0, 0, .55);
  opacity: 1;
}

/* =========================================================
   BARVY ZLATA
========================================================= */

.ring-configurator__colors {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.ring-configurator__colorWrap {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.ring-configurator__colorBtn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: border-color .12s ease;
  background: #eee;
  outline: 0;
  box-sizing: border-box;
}

.ring-configurator__colorBtn:hover {
  border-color: rgba(0, 0, 0, .75);
}

/* SELECTED = jasn  viditeln  (bez fajfky) */
.ring-configurator__colorBtn.is-active {
  border: 3px solid #000 !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}

.ring-configurator__colorBtn.is-active::after {
  content: none !important;
  display: none !important;
}

/* B lo- erven  zlato (880)   diagon ln  split (ostr  hrana) */
.ring-configurator__colorBtn[data-gold="880"] {
  background: none !important;
  overflow: hidden;
}

.ring-configurator__colorBtn[data-gold="880"]::before,
.ring-configurator__colorBtn[data-gold="880"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ring-configurator__colorBtn[data-gold="880"]::before {
  background: linear-gradient(135deg, #f4f4f4, #d9d9d9);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ring-configurator__colorBtn[data-gold="880"]::after {
  background: linear-gradient(135deg, #ffb2a2, #c97a6a);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Glob ln  .is-active::after tohle vyp n , tak pro 880 vr t me */
.ring-configurator__colorBtn[data-gold="880"].is-active::after {
  content: "" !important;
  display: block !important;
}

.ring-configurator__colorName {
  font-size: 12px;
  font-weight: 400;
  color: #000 !important;
  opacity: .8;
}

/* toggle   dek */
.ring-configurator__toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ring-configurator__toggleLabel {
  font-size: 14px;
  font-weight: 700;
  color: #000 !important;
}

.ring-configurator__toggle {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .20);
  cursor: pointer;
}

.ring-configurator__toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .18);
  transition: transform .12s ease, border-color .12s ease;
}

.ring-configurator__toggle.is-on {
  background: rgba(0, 0, 0, .65);
}

.ring-configurator__toggle.is-on::after {
  transform: translateX(20px);
  border-color: rgba(0, 0, 0, .55);
}

.ring-configurator__engraveBox {
  display: none;
  margin-top: 8px;
}

.ring-configurator__engraveBox.is-visible {
  display: block;
}

.ring-configurator__hint {
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
  color: #000 !important;
}

/* price box kompaktn  (bez title) */
.ring-configurator__price {
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ring-configurator__priceRow {
  display: flex;
  align-items: baseline;
}

.ring-configurator__muted {
  opacity: .75;
  color: #000 !important;
}

/* CTA kompaktn  */
.ring-configurator__cta {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.ring-configurator__ctaRow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.ring-configurator__ctaRow .quantity {
  margin: 0 !important;
}

.ring-configurator__ctaRow button,
.ring-configurator__ctaRow input[type="submit"] {
  flex: 1 1 240px;
}

/* field error */
.ring-configurator__field.is-error .ring-configurator__select,
.ring-configurator__field.is-error .ring-configurator__input {
  border-color: rgba(200, 0, 0, .8);
}

.ring-configurator__fieldError {
  display: none;
  color: #b00000 !important;
  font-size: 12px;
  font-weight: 700;
}

.ring-configurator__field.is-error .ring-configurator__fieldError {
  display: block;
}

/* toast */
.ring-configurator__toast {
  display: none;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .25);
  background: #fff;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  color: #000 !important;
}

.ring-configurator__toast.is-visible {
  display: block;
}

/* =========================================================
   KROK 1C: do i t n    schovat zbyte n  texty uvnit  konfigur toru
   (ponech me na pozd ji v JS, ale CSS jako fallback)
========================================================= */

/*  D msk  prsten / P nsk  prsten  */
.ring-configurator [data-rc="ring-title"],
.ring-configurator .ring-configurator__ringTitle,
.ring-configurator .ring-configurator__ringHeader {
  display: none !important;
}

/*  Cena je informativn     */
.ring-configurator [data-rc="price-note"],
.ring-configurator .ring-configurator__priceNote,
.ring-configurator .ring-configurator__price .ring-configurator__muted {
  display: none !important;
}

/* ===== CENY    ist  a stabiln  layout (override) ===== */

/* Ka d    dek: "D msk    21 600 K " na jednom   dku, hezky s mezerou */
.ring-configurator .rc-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}

/* Label (D msk  / P nsk  / Celkem) */
.ring-configurator .rc-price-row strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* P idej poml ku a mezery za label */
.ring-configurator .rc-price-row strong::after {
  content: "  " !important;
}

/*   stka */
.ring-configurator .rc-price-row span {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* Divider */
.ring-configurator .rc-price-divider {
  border-top: 2px solid #000 !important;
  margin: 18px 0 25px !important;
}

/* Celkem   dek trochu v t   (pokud m  class rc-price-row--total) */
.ring-configurator .rc-price-row--total strong {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.ring-configurator .rc-price-row--total span {
  font-size: 28px !important;
  font-weight: 900 !important;
}

/* =========================================================
   FIN L: men   text v pol ch + reset switche (u  nebude b lej ani mimo)
   ========================================================= */

/* Text uvnit  pol  (Vyber velikost / Max. 15 znak )   men   */
:root {
  --rc-field-h: 51px;
}

/* v  ka o 5px men   */

.ring-configurator .ring-configurator__select,
.ring-configurator .ring-configurator__input {
  height: var(--rc-field-h) !important;
  min-height: var(--rc-field-h) !important;
  padding: 0 16px !important;
  line-height: var(--rc-field-h) !important;
  font-size: 18px !important;
  /* <- men   text uvnit  */
  box-sizing: border-box !important;
}

.ring-configurator .ring-configurator__input::placeholder {
  font-size: 18px !important;
  /* <- men   placeholder */
}

/* SWITCH   vra  ho na norm ln  vzhled (track + kole ko) */
.ring-configurator .ring-configurator__toggleRow {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* text vlevo, switch vpravo */
  gap: 10px !important;
  margin: 0 0 10px !important;
}

/* Round dot (checkbox) varianta: dot musí být hned vedle textu, ne na pravém kraji */
.ring-configurator .ring-configurator__toggleRow:has(.round-check),
.ring-configurator .ring-configurator__toggleRow:has(.rc-round-check) {
  justify-content: flex-start !important;
}

.ring-configurator .ring-configurator__toggleLabel {
  display: inline-block !important;
  /* "Rytina" vedle switche */
  position: static !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* track */
.ring-configurator .ring-configurator__toggle {
  position: relative !important;
  width: 44px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #d2d2d2 !important;
  /* OFF */
  box-shadow: none !important;
  padding: 0 !important;
}

/* kole ko */
.ring-configurator .ring-configurator__toggle::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .18) !important;
  transition: transform .12s ease, border-color .12s ease !important;
}

/* ON stav */
.ring-configurator .ring-configurator__toggle.is-on {
  background: rgba(0, 0, 0, .65) !important;
}

.ring-configurator .ring-configurator__toggle.is-on::after {
  transform: translateX(20px) !important;
  border-color: rgba(0, 0, 0, .55) !important;
}


/* =========================================================
   FIN L: Rytina = 1 rovina + OFF schov  input, ON uk e input
   - OFF: "Rytina   (switch)" v 1   dce, bez pol 
   - ON : "Rytina - d msk /p nsk " vlevo + switch vpravo v 1   dce
          a input je ve stejn  rovin  jako select
   ========================================================= */

/* 0) Default: engraveBox je V DY skryt , uk e se jen na .is-visible */
.ring-configurator .ring-configurator__engraveBox {
  display: none !important;
}

/* 1) Prav  field (ten s toggleRow) jako 2   dky: labelRow + inputRow */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow) {
  display: grid !important;
  grid-template-columns: minmax(0, 380px) auto !important;
  /* vlevo text, vpravo switch */
  grid-template-rows: auto auto !important;
  /*   dek 1 = label,   dek 2 = input */
  column-gap: 14px !important;
  row-gap: 6px !important;
  align-items: start !important;
  justify-content: start !important;
}

/* 2) OFF stav: toggleRow p es CEL    dek 1 -> "Rytina" vlevo, switch vpravo */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__toggleRow {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* text vlevo, switch vpravo */
  gap: 10px !important;
}

/* OFF stav s kulatým dotem: přisuň dot k textu */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__toggleRow:has(.round-check),
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__toggleRow:has(.rc-round-check) {
  justify-content: flex-start !important;
}

.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__toggleRow .ring-configurator__toggleLabel {
  display: inline-block !important;
  /* OFF: text "Rytina" viditeln  */
  font-weight: 700 !important;
}

/* 3) ON stav: engraveBox se zobraz  a jeho d ti "propust me" do gridu rodi e
      => label jde do   dku 1 vlevo, input do   dku 2 p es celou    ku (rovina se selectem) */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__engraveBox.is-visible {
  display: contents !important;
  /* kl  : d ti se zarovnaj  p  mo do gridu fieldu */
}

/* label "Rytina - d msk /p nsk " =   dek 1 vlevo */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__engraveBox.is-visible>.ring-configurator__label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* input =   dek 2 p es oba sloupce (stejn  rovina jako select vlevo) */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow)>.ring-configurator__engraveBox.is-visible>.ring-configurator__input {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}
/* 4) ON: necháme 2 řádky jako u "Velikost" (řádek 1 jen jako spacer), input + kolečko v řádku 2 */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow):has(> .ring-configurator__engraveBox.is-visible)>.ring-configurator__toggleRow {
  display: contents !important;
}

/* spacer v řádku 1 (rezervuje výšku labelu, aby input seděl do roviny se selectem Velikosti) */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow):has(> .ring-configurator__engraveBox.is-visible)>.ring-configurator__toggleRow .ring-configurator__toggleLabel {
  display: block !important;
  visibility: hidden !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}

/* kolečko v řádku 2 vpravo, vycentrované k inputu */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow):has(> .ring-configurator__engraveBox.is-visible)>.ring-configurator__toggleRow .round-check,
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow):has(> .ring-configurator__engraveBox.is-visible)>.ring-configurator__toggleRow .rc-round-check {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  height: var(--rc-field-h) !important;
}


/* Zarovnání rytiny do stejné roviny se selectem velikosti */
.ring-configurator .ring-configurator__field:has(> .ring-configurator__toggleRow) {
  transform: translateY(0px) !important;
}

/* Rytina: posunout "Rytina - ..." řádek níž vůči levému selectu Velikost (desktop 2 sloupce) */
@media (min-width:641px) {

  .ring-configurator__field[data-rc="fieldWomenEng"]:not(:has(.ring-configurator__engraveBox.is-visible)),
  .ring-configurator__field[data-rc="fieldMenEng"]:not(:has(.ring-configurator__engraveBox.is-visible)) {
    padding-top: 40px !important;
  }
}


/* Schovej tabulku parametr  + spodn  blok + quantity
   JEN kdy  je na str nce konfigur tor a produkt m  flag "Konfigurator"
   (tj. html m  class rc-flag-konfigurator a z rove  existuje .ring-configurator)
 */
html.rc-flag-konfigurator body:has(.ring-configurator) table.detail\.parameters,
html.rc-flag-konfigurator body:has(.ring-configurator) table.detail-parameters,
html.rc-flag-konfigurator body:has(.ring-configurator) table.detail.parameters,
/* class="detail parameters" */
html.rc-flag-konfigurator body:has(.ring-configurator) table[class~="detail-parameters"] {
  display: none !important;
}

/*html.rc-flag-konfigurator body:has(.ring-configurator) .bottom{
  display: none !important;
}
*/
html.rc-flag-konfigurator body:has(.ring-configurator) span.quantity {
  display: none !important;
}

/* Nadpisy sekc  uvnit  konfigur toru (tohle m  e z stat bez flagu, proto e c l  jen na tv j konfigur tor) */
.ring-configurator__sectionTitle {
  display: none !important;
}


/* style.css   minimal fixes ONLY (ke zru en  duplicity a rozbit  layoutu)
   Design (style(52).css) z st v  hlavn ; toto je jen "safety net".
*/

/* 1) Skryt  p vodn ho Shoptet variant UI, kdy  b   konfigur tor */
body.rc-configurator-active table.detail-parameters,
body.rc-configurator-active #jsUnavailableCombinationMessage,
body.rc-configurator-active tr.variant-list,
body.rc-configurator-active tr.surcharge-list,
body.rc-configurator-active tr.variant-not-chosen-anchor {
  display: none !important;
}

/* 2) Kdy  je sekce neaktivn , jen ji "zamraz" bez rozhozen  layoutu */
.ring-configurator .rc-inactive {
  opacity: .45;
  pointer-events: none;
}

/* 3) Pokud template znovu vlo   native UI p es snippets, dr  skryt  */
/* 3) Pokud template znovu vloží native UI přes snippets, drž skryté */
.rc-native-hidden {
  display: none !important;
}

/* =========================================================
   PÍSMO RYTINY – custom dropdown (rc-fontSelect)
   (jen uvnitř konfigurátoru, bez globálu)
========================================================= */

/* skryj nativní select (zůstává jen pro logiku) */
.ring-configurator .rc-fontSelect__native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* button musí mít stejný "field" look jako select/input */
.ring-configurator .rc-fontSelect {
  position: relative;
}

.ring-configurator .rc-fontSelect__btn {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .25);
  background: #fff;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.1;
  color: #000 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 46px;
  /* sjednocení výšky s ostatními poli */
}

.ring-configurator .rc-fontSelect__btnLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ring-configurator .rc-fontSelect__btnImg {
  width: 90px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  display: none;
  /* JS zapne když má src */
}

.ring-configurator .rc-fontSelect__btnText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ring-configurator .rc-fontSelect__caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(0, 0, 0, .55);
  flex: 0 0 auto;
}

/* dropdown list */
.ring-configurator .rc-fontSelect__list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .25);
  z-index: 2147483647;
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  pointer-events: auto;
}

.ring-configurator:has(.rc-fontSelect.is-open) {
  position: relative;
  z-index: 2147483647;
}

.ring-configurator .rc-fontSelect.is-open .rc-fontSelect__list {
  display: block;
}

.ring-configurator .rc-fontSelect__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  cursor: pointer;
}

.ring-configurator .rc-fontSelect__item:hover {
  background: rgba(0, 0, 0, .04);
}

.ring-configurator .rc-fontSelect__imgWrap {
  flex: 0 0 auto;
}

/* 3× větší náhledy */
.ring-configurator .rc-fontSelect__img {
  width: 270px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  display: block;
}

.ring-configurator .rc-fontSelect__label {
  font-size: 18px;
  line-height: 1.2;
}

/* =========================================================
   RC PATCH   layout symetrie + kulat  checkboxy + font dropdown
   (only inside .ring-configurator)
   ========================================================= */

/* Round checkbox (from checkbox.html) */
.ring-configurator .round-check {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
}

.ring-configurator .round-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.ring-configurator .round-check .dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #222;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.ring-configurator .round-check .dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #222;
  display: block;
  transform: scale(0);
  transition: transform .12s ease;
}

.ring-configurator .round-check input[type="checkbox"]:checked + .dot::after {
  transform: scale(1);
}

.ring-configurator__engraveBox.is-visible {
  display: contents;
}

/* Input in engraving goes to the left cell of the 2nd row */
.ring-configurator__field[data-rc="fieldWomenEng"] .ring-configurator__input,
.ring-configurator__field[data-rc="fieldMenEng"] .ring-configurator__input {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}


/* Unified heights for all fields */
.ring-configurator__select,
.ring-configurator__input,
.ring-configurator .rc-fontSelect__btn {
  min-height: 52px;
}

/* Font field = full width přes oba sloupce */
.ring-configurator__fontField {
  width: 100%;
  grid-column: 1 / -1;
  justify-self: stretch;
}

.ring-configurator__fontField.is-hidden {
  display: none !important;
}

@media (max-width:640px) {
  .ring-configurator__fontField {
    grid-column: 1 / -1;
  }
}

/* Hide native select in font field, keep only custom dropdown */
.ring-configurator .rc-fontSelect__native {
  display: none !important;
}

/* Custom font dropdown */
.ring-configurator .rc-fontSelect {
  position: relative;
  width: 100%;
}

.ring-configurator .rc-fontSelect__btn {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .25);
  background: #fff;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.1;
  color: #000 !important;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.ring-configurator .rc-fontSelect__btnLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ring-configurator .rc-fontSelect__btnImg {
  width: 90px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  display: none;
}

.ring-configurator .rc-fontSelect__btnText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ring-configurator .rc-fontSelect__caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #000;
  opacity: .55;
  flex: 0 0 auto;
}

.ring-configurator .rc-fontSelect__list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .25);
  z-index: 999999;
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  pointer-events: auto;
}

.ring-configurator .rc-fontSelect.is-open .rc-fontSelect__list {
  display: block;
}

.ring-configurator .rc-fontSelect__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  cursor: pointer;
}

.ring-configurator .rc-fontSelect__item:hover {
  background: rgba(0, 0, 0, .04);
}

.ring-configurator .rc-fontSelect__imgWrap {
  flex: 0 0 auto;
}

.ring-configurator .rc-fontSelect__img {
  width: 270px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  display: block;
}

.ring-configurator .rc-fontSelect__label {
  font-size: 18px;
  line-height: 1.2;
}