/* Product card typography standard based on the Ozel Kesim Magnet category. */
.seo-product-info > h2 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.seo-product-info > .product-code,
.seo-product-info > p:first-of-type {
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #555 !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Keep product-code menus readable: code, separator and name form stable columns. */
.calculator label:first-child select,
.calculator label:first-child select option {
  font-family: "Cascadia Mono", "Consolas", "Courier New", monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: left;
}

/* Use one stable menu typeface across every price calculator control. */
.calculator .calc-fields select,
.calculator .calc-fields select option,
.calculator .calc-fields input,
.calculator .calc-fields input::placeholder,
.calculator .calc-fields button[role="option"] {
  font-family: "Cascadia Mono", "Consolas", "Courier New", monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  text-align: left;
}

/* Periodically draw attention to the calculator's WhatsApp action. */
@keyframes calculatorWhatsappAttention {
  0%, 8%, 100% { transform: translateX(0); }
  1.5% { transform: translateX(-3px) rotate(-.4deg); }
  3% { transform: translateX(3px) rotate(.4deg); }
  4.5% { transform: translateX(-2px) rotate(-.25deg); }
  6% { transform: translateX(2px) rotate(.25deg); }
}

.calculator .calc-contact-cell .whatsapp {
  animation: calculatorWhatsappAttention 3s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.calculator .calc-contact-cell .whatsapp:hover,
.calculator .calc-contact-cell .whatsapp:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .calculator .calc-contact-cell .whatsapp {
    animation: none !important;
  }
}