#dl-roche-calculator-product{--dl-green:#173b2b;--dl-accent:#26b34b;max-width:1080px;margin:18px auto;color:#173b2b;font-family:inherit}#dl-roche-calculator-product *{box-sizing:border-box}#dl-roche-calculator-product .dlr-intro{color:#53675b;margin-bottom:15px}#dl-roche-calculator-product .dlr-panel{border:1px solid #dce9df;background:#fff;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 6px 20px rgba(12,47,26,.05)}#dl-roche-calculator-product .dlr-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:18px;align-items:start}#dl-roche-calculator-product .dlr-chart{position:relative;width:100%;max-width:640px;margin:0 auto;background:#252525;border-radius:16px;overflow:hidden}#dl-roche-calculator-product .dlr-chart img{width:100%;height:auto;display:block;user-select:none;pointer-events:none}#dl-roche-calculator-product .dlr-tooth{position:absolute;z-index:2;width:5.7%;aspect-ratio:1;border:2px solid transparent;background:transparent;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;padding:0;margin:0;outline-offset:2px;touch-action:manipulation}#dl-roche-calculator-product .dlr-tooth:hover,#dl-roche-calculator-product .dlr-tooth:focus-visible{border-color:#26b34b;background:rgba(38,179,75,.25)}#dl-roche-calculator-product .dlr-tooth[aria-pressed=true]{background:rgba(38,179,75,.52);border-color:#0c9f41;box-shadow:0 0 0 2px #d6fae0}#dl-roche-calculator-product .dlr-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:#657268;font-size:13px;margin:12px 0 0}#dl-roche-calculator-product .dlr-dot{display:inline-block;background:rgba(38,179,75,.7);width:12px;height:12px;border:1px solid #138638;border-radius:50%;vertical-align:middle;margin-right:5px}#dl-roche-calculator-product button.dlr-reset{border:1px solid #b4d3c0;background:#fff;color:#173b2b;border-radius:9px;padding:8px 12px;cursor:pointer}#dl-roche-calculator-product .dlr-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}#dl-roche-calculator-product .dlr-title{font-weight:750;font-size:18px;margin:0}#dl-roche-calculator-product .dlr-groups{list-style:none;margin:12px 0;padding:0}#dl-roche-calculator-product .dlr-groups li{padding:9px 0;border-bottom:1px solid #edf3ed;font-size:14px;line-height:1.5}#dl-roche-calculator-product .dlr-label{font-size:13px;color:#697b70;margin:0 0 5px}#dl-roche-calculator-product .dlr-summary{font-weight:700;font-size:16px;line-height:1.5}#dl-roche-calculator-product .dlr-price{font-weight:800;font-size:28px;margin:12px 0 3px}#dl-roche-calculator-product .dlr-warning{background:#fff8ea;border:1px solid #e7cd8c;color:#795916;border-radius:10px;padding:12px;font-size:13px;line-height:1.5;margin-top:12px}#dl-roche-calculator-product .dlr-good{background:#eaf8ef;color:#185932;border:1px solid #afd9bd;border-radius:10px;padding:12px;font-size:14px;line-height:1.5;margin-top:12px}#dl-roche-calculator-product .dlr-muted{font-size:13px;color:#607265;line-height:1.5}#dl-roche-calculator-product .dlr-action{display:inline-block;text-align:center;background:#173b2b;border:0;border-radius:9px;color:#fff!important;font-weight:700;padding:12px 16px;text-decoration:none!important;margin-top:12px}#dl-roche-calculator-product .dlr-disclaimer{font-size:12px;color:#65786d;line-height:1.5}#dl-roche-calculator-product .dlr-hide{display:none!important}@media(max-width:740px){#dl-roche-calculator-product .dlr-layout{grid-template-columns:1fr}#dl-roche-calculator-product .dlr-panel{padding:13px}#dl-roche-calculator-product .dlr-tooth{width:6.1%;border-width:1.5px}}

/* v2: Tooth-shaped PNG selection overlay; overrides old circular hit-area styling. */
#dl-roche-calculator-product .dlr-chart button.dlr-tooth{
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;transform:none!important;aspect-ratio:auto!important;
  display:block!important;padding:0!important;margin:0!important;overflow:visible;
  cursor:pointer;touch-action:manipulation;
}
#dl-roche-calculator-product .dlr-tooth .dlr-tooth-img{
  display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;
  user-select:none;transition:filter .18s ease, transform .18s ease;
}
#dl-roche-calculator-product .dlr-tooth[aria-pressed=true] .dlr-tooth-img{
  filter:sepia(1) saturate(6) hue-rotate(72deg) brightness(.87) contrast(1.08);
}
#dl-roche-calculator-product .dlr-tooth:hover .dlr-tooth-img{
  filter:sepia(1) saturate(4) hue-rotate(72deg) brightness(1.02);
}
#dl-roche-calculator-product .dlr-tooth[aria-pressed=true]:hover .dlr-tooth-img{
  filter:sepia(1) saturate(6) hue-rotate(72deg) brightness(.87) contrast(1.08);
}
#dl-roche-calculator-product .dlr-tooth:focus-visible{outline:2px solid #26b34b;outline-offset:1px}

/* v3: Touch browsers retain :hover after a tap. Only show hover color on real mouse/trackpad. */
@media (hover: none), (pointer: coarse) {
  #dl-roche-calculator-product .dlr-chart .dlr-tooth:hover .dlr-tooth-img,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[aria-pressed="false"]:hover .dlr-tooth-img,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[aria-pressed="false"] .dlr-tooth-img {
    filter: none !important;
  }
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[aria-pressed="true"] .dlr-tooth-img,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[aria-pressed="true"]:hover .dlr-tooth-img {
    filter: sepia(1) saturate(6) hue-rotate(72deg) brightness(.87) contrast(1.08) !important;
  }
}

/* v4 - Always visible live price near tooth selection */
#dl-roche-calculator-product .dlr-toolbar-actions{display:flex;align-items:center;gap:10px}
#dl-roche-calculator-product .dlr-live-price{min-width:155px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 12px;border:1px solid #b9d6c3;background:#eff9f2;border-radius:10px;line-height:1.25;font-variant-numeric:tabular-nums}
#dl-roche-calculator-product .dlr-live-price span{font-size:11px;color:#536b5c;font-weight:600}
#dl-roche-calculator-product .dlr-live-price strong{font-size:19px;color:#173b2b;white-space:nowrap}
@media(max-width:740px){
  #dl-roche-calculator-product .dlr-toolbar{position:sticky;top:0;z-index:15;background:#fff;padding:8px 0;border-bottom:1px solid #e5eee8}
  #dl-roche-calculator-product .dlr-title{font-size:14px}
  #dl-roche-calculator-product .dlr-toolbar-actions{gap:5px}
  #dl-roche-calculator-product .dlr-live-price{min-width:108px;padding:5px 7px}
  #dl-roche-calculator-product .dlr-live-price strong{font-size:15px}
  #dl-roche-calculator-product button.dlr-reset{padding:7px 9px;font-size:12px}
}

/* ============================================================
   ROCHE KOPRU - PRODUCT 129 ONLY
   Quantity control hidden; purchase button fills the entire row.
   ============================================================ */
body#product:has(form#add-to-cart-or-refresh input[name="id_product"][value="129"])
form#add-to-cart-or-refresh .product-add-to-cart .product-quantity {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
body#product:has(form#add-to-cart-or-refresh input[name="id_product"][value="129"])
form#add-to-cart-or-refresh .product-add-to-cart .product-quantity > .qty {
  display: none !important;
}
body#product:has(form#add-to-cart-or-refresh input[name="id_product"][value="129"])
form#add-to-cart-or-refresh .product-add-to-cart .product-quantity > .add {
  display: flex !important;
  flex: 1 1 100% !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
body#product:has(form#add-to-cart-or-refresh input[name="id_product"][value="129"])
form#add-to-cart-or-refresh .product-add-to-cart .product-quantity > .add > .add-to-cart {
  display: block !important;
  flex: 1 1 auto !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* v5 clean - CSS-only language-sensitive diagram labels.
   Existing chart.js, tooth hitboxes and purchase logic are unchanged. */

/* Retain the chart image dimensions for percentage-based tooth positions,
   but avoid drawing its teeth beneath the 32 selectable tooth images. */
#dl-roche-calculator-product .dlr-chart > img {
  opacity: 0 !important;
}
#dl-roche-calculator-product .dlr-chart {
  background: linear-gradient(to bottom,
    transparent 53.3%, #ddd 53.3%, #ddd 53.6%, transparent 53.6%), #252525 !important;
}

/* Two centered arch captions. They do not intercept clicks. */
#dl-roche-calculator-product .dlr-chart::before,
#dl-roche-calculator-product .dlr-chart::after {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 44%;
  transform: translateX(-50%);
  color: white;
  font-family: inherit;
  font-size: clamp(12px, 1.9vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
  pointer-events: none;
}
#dl-roche-calculator-product .dlr-chart::before { top: 30%; content: "Upper Arch"; }
#dl-roche-calculator-product .dlr-chart::after  { top: 68%; content: "Lower Arch"; }
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart::before { content: "Üst Çene"; }
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart::after  { content: "Alt Çene"; }

/* Outside labels are anchored to existing tooth buttons 16/26/46/36.
   This avoids adding or modifying any HTML and scales with the chart. */
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="16"]::after,
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="26"]::after,
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="46"]::after,
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="36"]::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 105%;
  z-index: 3;
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 1.55vw, 18px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
}
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="16"]::after,
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="46"]::after {
  content: "Right";
  right: 100%;
}
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="26"]::after,
#dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="36"]::after {
  content: "Left";
  left: 100%;
}
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="16"]::after,
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="46"]::after { content: "Sağ"; }
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="26"]::after,
html[lang^="tr"] #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="36"]::after { content: "Sol"; }

@media (max-width: 740px) {
  #dl-roche-calculator-product .dlr-chart::before,
  #dl-roche-calculator-product .dlr-chart::after {
    font-size: clamp(10px, 3.4vw, 16px);
  }
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="16"]::after,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="26"]::after,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="46"]::after,
  #dl-roche-calculator-product .dlr-chart .dlr-tooth[data-id="36"]::after {
    font-size: clamp(8px, 2.65vw, 13px);
  }
}