/* ═══ PREMIUM HEADER OVERRIDES ═══ */

/* Force Astra theme header to use Manrope */
#masthead, 
.site-header, 
.main-header-bar, 
.main-header-menu, 
.main-header-menu a, 
.site-title, 
.site-title a,
.ast-header-bar,
.ast-mobile-header-wrap,
.ast-menu-toggle,
.menu-link,
.ast-site-identity,
.ast-site-identity a {
  font-family: 'Manrope', sans-serif !important;
}

/* 1. Two-Tone Gradient Logo Text — keep Astra's natural size */
#masthead .site-title a,
.site-header .site-title a,
.main-header-bar .site-title a,
.ast-site-identity a {
  background: linear-gradient(135deg, #0c1f3f 0%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  display: inline-block !important;
}

/* 2. Glassmorphism Sticky Header — only on outer wrapper */
#masthead,
.site-header,
.ast-mobile-header-wrap {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}

/* Inner header bars — transparent so they don't double up the background */
.main-header-bar,
.ast-header-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* 3. Polished Navigation Links — bigger text */
.main-header-menu a,
.menu-link,
#masthead .menu-link,
.main-navigation a,
.ast-header-navigation a {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: #0c1f3f !important;
  transition: color 0.2s ease-in-out !important;
  text-decoration: none !important;
  letter-spacing: -0.2px !important;
}

/* 4. Nav Link Hover - Blue accent */
.main-header-menu a:hover,
.menu-link:hover,
#masthead .menu-link:hover,
.main-navigation a:hover,
.ast-header-navigation a:hover {
  color: #2563eb !important;
}

/* 5. Active menu item highlight */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
  color: #2563eb !important;
}

/* ═══ MASTER UI CSS (PROTOCOL 10.0 - ADSENSE READY) ═══ */
.converter-widget-wrapper {
  --primary: #1e3a5f;
  --primary-light: #2d4d7a;
  --accent: #2563eb;
  --light: #f1f5f9;
  --light-gray: #e2e8f0;
  --medium-gray: #64748b;
  --dark: #1e293b;
  --white: #ffffff;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --radius: 12px;
}

.converter-widget-wrapper, .converter-widget-wrapper * {
  box-sizing: border-box !important;
}

.converter-widget-wrapper {
  font-family: 'Manrope', sans-serif !important;
  color: var(--dark) !important;
  line-height: 1.6 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 20px !important;
  background: transparent !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-x: clip !important; /* Crop any horizontal spills without breaking sticky positioning */
}

/* Force WordPress/Astra content containers to be transparent so page background is uniform */
.ast-container,
.site-content,
#content,
.entry-content,
.ast-plain-container,
.ast-page-builder-template .entry-content,
.site-content .ast-container,
#primary,
#main,
.site-main,
article {
  background: transparent !important;
}

html, body {
  background-color: #ebeff3 !important;
}

.converter-widget-wrapper .page-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  border-bottom: 2px solid rgba(0,0,0,0.05) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

.converter-widget-wrapper .breadcrumbs {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.converter-widget-wrapper #main-h1 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  margin: 0 !important;
}

.converter-widget-wrapper .main-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 300px !important;
  grid-template-areas: 
    "converter table sidebar"
    "answers info sidebar"
    "ad2 ad2 ad2" !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

.converter-widget-wrapper.mth-trial-layout:not(.mth-has-quick-answer) .main-grid {
  grid-template-areas: 
    "converter table sidebar"
    "scale scale sidebar"
    "answers answers sidebar"
    "info info sidebar"
    "ad2 ad2 ad2" !important;
}

.converter-widget-wrapper.mth-trial-layout.mth-has-quick-answer .main-grid {
  grid-template-areas: 
    "converter table sidebar"
    "quick-answer table sidebar"
    "scale scale sidebar"
    "answers answers sidebar"
    "info info sidebar"
    "ad2 ad2 ad2" !important;
}

.converter-widget-wrapper .area-quick-answer {
  grid-area: quick-answer !important;
}

/* Trial layout: answers section — white card matching info card below */
.converter-widget-wrapper.mth-trial-layout .area-answers .white-card-box {
  background: var(--white) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  height: auto !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .direct-answer-box {
  background: var(--light) !important;
  border-left: 4px solid var(--accent) !important;
  padding: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  border-radius: 8px !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .direct-answer-box h2 {
  font-size: 1.05rem !important;
  color: var(--primary) !important;
  margin-bottom: 0.5rem !important;
  font-weight: 800 !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .direct-answer-box p {
  font-size: 0.92rem !important;
  color: var(--dark) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .definitions-box {
  background: var(--light) !important;
  border-left: 4px solid var(--primary) !important;
  padding: 1rem !important;
  margin-top: 0.75rem !important;
  border-radius: 8px !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .definitions-box h2 {
  font-size: 0.95rem !important;
  color: var(--primary) !important;
  margin-bottom: 0.4rem !important;
  font-weight: 800 !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .definitions-box p {
  font-size: 0.87rem !important;
  color: var(--dark) !important;
  line-height: 1.7 !important;
  margin: 0 0 0.75rem 0 !important;
}
.converter-widget-wrapper.mth-trial-layout .area-answers .definitions-box p:last-of-type {
  margin-bottom: 0 !important;
}

.converter-widget-wrapper .area-converter { grid-area: converter !important; }
.converter-widget-wrapper .area-answers { grid-area: answers !important; }
.converter-widget-wrapper .area-scale { grid-area: scale !important; }
.converter-widget-wrapper .area-table { grid-area: table !important; }
.converter-widget-wrapper .area-info { grid-area: info !important; }
.converter-widget-wrapper .area-ad2 { grid-area: ad2 !important; }
.converter-widget-wrapper .area-sidebar-desktop { grid-area: sidebar !important; }

.converter-widget-wrapper .white-card-box {
  background: var(--white) !important;
  padding: 1.5rem !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.converter-widget-wrapper .section-title {
  color: var(--primary) !important;
  margin: 0 0 1.25rem 0 !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-transform: uppercase !important;
}

/* ═══ METHOD B STACKED INPUTS ═══ */
.converter-widget-wrapper .input-group {
  margin-bottom: 14px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Dropdown styled as a label */
.converter-widget-wrapper .unit-select {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  padding: 0 20px 0 0 !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: inherit !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231e3a5f'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
}

.converter-widget-wrapper .unit-select:hover {
  color: var(--accent) !important;
}

.converter-widget-wrapper .unit-static-label {
  display: block !important;
  width: 100% !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.5px !important;
  padding: 0 !important;
  height: auto !important;
  line-height: inherit !important;
}

.converter-widget-wrapper .custom-input {
  width: 100% !important;
  padding: 0.9rem !important;
  background-color: var(--light) !important;
  border: 2px solid #dbe2ea !important;
  border-radius: 8px !important;
  font-size: 1.3rem !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  height: auto !important;
}

/* UI Expert Typography Override: Inter for numbers, inputs, dropdowns, results, and lookup tables */
.converter-widget-wrapper .unit-select,
.converter-widget-wrapper .unit-static-label,
.converter-widget-wrapper .result-card,
.converter-widget-wrapper .result-value,
.converter-widget-wrapper .result-text,
.converter-widget-wrapper .copy-btn,
.converter-widget-wrapper .conversion-table,
.converter-widget-wrapper .conversion-table th,
.converter-widget-wrapper .conversion-table td {
  font-family: 'Inter', sans-serif !important;
}

.converter-widget-wrapper .custom-input:focus {
  border-color: var(--accent) !important;
  background-color: var(--white) !important;
}

/* ═══ SWAP BUTTON ═══ */
.converter-widget-wrapper .swap-container {
  display: flex !important;
  justify-content: center !important;
  margin: 0.75rem 0 !important;
  position: relative !important;
  width: 100% !important;
}

.converter-widget-wrapper .swap-container::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: #e2e8f0 !important;
  z-index: 0 !important;
}

.converter-widget-wrapper .swap-button {
  background: var(--primary) !important;
  color: var(--white) !important;
  border: 4px solid var(--white) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  z-index: 1 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.converter-widget-wrapper .swap-button:hover {
  background: var(--accent) !important;
  transform: rotate(180deg) !important;
}

/* ═══ RESULT CARD ═══ */
.converter-widget-wrapper .result-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  margin-top: 1rem !important;
}

.converter-widget-wrapper .result-info-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.converter-widget-wrapper .result-value {
  font-size: 2rem !important;
  font-weight: 600 !important;
}

.converter-widget-wrapper .result-text {
  font-size: 0.95rem !important;
  opacity: 0.9 !important;
  font-weight: 400 !important;
}

.converter-widget-wrapper .copy-btn {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: white !important;
  padding: 6px 15px !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  transition: all 0.18s !important;
}

.converter-widget-wrapper .copy-btn:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ═══ DIRECT ANSWER & DEFINITIONS ═══ */
.converter-widget-wrapper .direct-answer-box {
  margin-top: 1.5rem !important;
  padding: 1rem !important;
  background: var(--light) !important;
  border-radius: 8px !important;
  border-left: 4px solid var(--accent) !important;
}

.converter-widget-wrapper .direct-answer-box h2 {
  font-size: 1rem !important;
  color: var(--primary) !important;
  margin: 0 0 0.5rem 0 !important;
  font-weight: 800 !important;
}

.converter-widget-wrapper .direct-answer-box p {
  font-size: 0.9rem !important;
  margin: 0 !important;
  color: var(--dark) !important;
}

.converter-widget-wrapper .definitions-box {
  margin-top: 15px !important;
  border-left: 4px solid var(--primary) !important;
}

.converter-widget-wrapper .definitions-box h2 {
  font-size: 0.95rem !important;
  color: var(--primary) !important;
  margin: 0 0 0.4rem 0 !important;
  font-weight: 800 !important;
}

.converter-widget-wrapper .definitions-box p {
  font-size: 0.85rem !important;
  margin: 0 0 1rem 0 !important;
  color: var(--dark) !important;
}

.converter-widget-wrapper .definitions-box p:last-of-type {
  margin-bottom: 0 !important;
}

.converter-widget-wrapper .ad-wrapper {
  background: #f8fafc !important;
  border: 1px dashed var(--medium-gray) !important;
  border-radius: var(--radius) !important;
  display: block !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: content-box !important;
  padding-top: 20px !important; /* space for advertisement label */
}

.converter-widget-wrapper .ad-wrapper ins {
  margin: 0 auto !important;
}

.converter-widget-wrapper .ad-wrapper::before {
  content: 'ADVERTISEMENT' !important;
  color: var(--medium-gray) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  height: 12px !important;
  line-height: 12px !important;
}

.converter-widget-wrapper .google-auto-placed {
  display: none !important;
}

/* ═══ AD BOX HEIGHT LOCKS ═══ */
.converter-widget-wrapper .area-sidebar-desktop {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  height: 100% !important;
}

.converter-widget-wrapper .area-ad1 {
  min-height: 600px !important;
  height: 600px !important;
  width: 300px !important;
  margin: 0 auto !important;
  position: static !important; /* Let top ad scroll naturally */
}

.converter-widget-wrapper .area-ad2 {
  grid-area: ad2 !important;
  min-height: 250px !important;
  height: 250px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.converter-widget-wrapper .area-ad3-desktop {
  min-height: 600px !important;
  height: 600px !important;
  width: 300px !important;
  margin: 0 auto !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 20px !important;
  align-self: start !important; /* Enable sticky sliding inside the sidebar container */
}

.converter-widget-wrapper .area-ad3-mobile {
  display: none !important;
}

/* ═══ TABLES ═══ */
.converter-widget-wrapper .conversion-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.9rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  table-layout: fixed !important;
  word-break: break-word !important;
}

.converter-widget-wrapper .conversion-table th {
  background: var(--primary) !important;
  color: var(--white) !important;
  padding: 0.8rem !important;
  text-align: left !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.converter-widget-wrapper .conversion-table td {
  padding: 0.8rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

.converter-widget-wrapper .conversion-table tr:nth-child(even) {
  background: #f8fafc !important;
}

.converter-widget-wrapper .conversion-table tr:last-child td {
  border-bottom: none !important;
}

/* ═══ DYNAMIC SVG VISUAL AID ═══ */
.converter-widget-wrapper .visual-aid-container {
  text-align: center !important;
  background: #fff !important;
  border: 1px solid var(--light-gray) !important;
  border-radius: 8px !important;
  padding: 30px 5px !important;
  margin: 1.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.converter-widget-wrapper .visual-aid-container svg {
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
}

.converter-widget-wrapper .tbl-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

.converter-widget-wrapper .formula-box {
  background: var(--light) !important;
  border: 1.5px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 14px !important;
  margin: 1rem 0 !important;
  font-family: monospace !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: var(--primary) !important;
  font-size: 1.05rem !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.converter-widget-wrapper .pro-tip-box {
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  border-left: 5px solid #d97706 !important;
  border-radius: 8px !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
}

.converter-widget-wrapper .pro-tip-box i {
  color: #d97706 !important;
  font-size: 1.2rem !important;
}

/* ═══ INFO SECTIONS ═══ */
.converter-widget-wrapper .info-content p {
  font-size: 0.95rem !important;
  color: var(--medium-gray) !important;
  margin-bottom: 1rem !important;
  line-height: 1.7 !important;
}

.converter-widget-wrapper .info-heading {
  font-size: 1.15rem !important;
  color: var(--primary) !important;
  margin-top: 1.75rem !important;
  font-weight: 800 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
}

.converter-widget-wrapper .info-content ul {
  padding-left: 20px !important;
  margin-bottom: 16px !important;
}

.converter-widget-wrapper .info-content li {
  margin-bottom: 6px !important;
  font-size: 0.95rem !important;
  color: var(--medium-gray) !important;
}

/* ═══ FAQ SECTION ═══ */
.converter-widget-wrapper .faq-item {
  margin-bottom: 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 15px !important;
}

.converter-widget-wrapper .faq-item:last-child {
  border-bottom: none !important;
}

.converter-widget-wrapper .faq-item strong {
  color: var(--primary) !important;
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.converter-widget-wrapper .faq-item span {
  color: var(--medium-gray) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  display: block !important;
}

/* ═══ MULTILINGUAL PILL SWITCHER ═══ */
.converter-widget-wrapper .lang-selector-pill {
  display: flex !important;
  gap: 6px !important;
  background: rgba(0,0,0,0.03) !important;
  padding: 4px !important;
  border-radius: 8px !important;
  margin-left: 1rem !important;
  align-self: flex-end !important;
}
.converter-widget-wrapper .lang-selector-pill .lang-pill {
  padding: 4px 8px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}
@media (min-width: 1025px) {
  .converter-widget-wrapper .lang-selector-pill {
    display: none !important;
  }
}

/* ═══ RELATED CONVERTERS SECTION ═══ */
.converter-widget-wrapper .related-converters-container {
  margin-top: 2.25rem !important;
  border-top: 2px solid #f1f5f9 !important;
  padding-top: 1.75rem !important;
}

.converter-widget-wrapper .related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  margin-top: 1.25rem !important;
  width: 100% !important;
}

.converter-widget-wrapper .related-card {
  background: var(--white) !important;
  border: 1.5px solid var(--light-gray) !important;
  border-radius: 8px !important;
  padding: 1.25rem 0.75rem !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
  transition: all 0.22s ease-in-out !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  height: 100% !important;
}

.converter-widget-wrapper .related-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
  border-color: var(--accent) !important;
}

.converter-widget-wrapper .related-card-icon {
  font-size: 1.75rem !important;
  color: var(--primary) !important;
  margin-bottom: 0.75rem !important;
  transition: color 0.22s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.converter-widget-wrapper .related-card:hover .related-card-icon {
  color: var(--accent) !important;
}

.converter-widget-wrapper .related-card-title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  line-height: 1.3 !important;
  transition: color 0.22s !important;
}

.converter-widget-wrapper .related-card:hover .related-card-title {
  color: var(--accent) !important;
}

@media (max-width: 768px) {
  .converter-widget-wrapper .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .converter-widget-wrapper .related-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

.converter-widget-wrapper .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .converter-widget-wrapper .main-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: 
      "converter table"
      "answers info"
      "ad1 ad2" !important;
  }
  .converter-widget-wrapper.mth-trial-layout:not(.mth-has-quick-answer) .main-grid {
    grid-template-areas: 
      "converter table"
      "scale scale"
      "answers answers"
      "info info"
      "ad1 ad2" !important;
  }
  .converter-widget-wrapper.mth-trial-layout.mth-has-quick-answer .main-grid {
    grid-template-areas: 
      "converter table"
      "quick-answer table"
      "scale scale"
      "answers answers"
      "info info"
      "ad1 ad2" !important;
  }
  .converter-widget-wrapper .area-sidebar-desktop {
    grid-area: ad1 !important;
    display: block !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .converter-widget-wrapper .area-ad1 {
    min-height: 250px !important;
    height: 250px !important;
    position: static !important;
  }
  .converter-widget-wrapper .area-ad2 {
    min-height: 250px !important;
    height: 250px !important;
    width: 100% !important;
  }
  .converter-widget-wrapper .area-ad3-desktop {
    display: none !important;
  }
  .converter-widget-wrapper .area-ad3-mobile {
    display: block !important;
    min-height: 250px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem auto !important;
  }
}
@media (max-width: 650px) {
  /* Global Astra theme wrapper mobile expansion (edge-to-edge stretching) and iOS overflow protection */
  /* NOTE: overflow-x on #page/.site breaks position:sticky on the header inside them.
     Only apply overflow-x:hidden to deeper content containers. */
  html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    overscroll-behavior: none !important;
  }
  /* #page and .site wrap the header — NO overflow-x here (breaks sticky) */
  #page, .site {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Content containers below the header — safe to clip */
  .site-content, .ast-container, #primary, #main, .site-main, article, .ast-article-single, .entry-content, .content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix iPhone left edge: ensure page content has padding, NOT the header */
  /* (Header padding breaks Astra's internal logo/menu layout) */
  #masthead .site-title a,
  .site-header .site-title a,
  .main-header-bar .site-title a,
  .ast-site-identity a {
    font-size: 18px !important;
  }

  /* Compact padding & layout stability */
  .converter-widget-wrapper {
    padding: 8px 12px !important;
    overscroll-behavior: none !important;
    overflow-anchor: none !important; /* Prevent h1 text updates from shifting scroll position */
  }
  .converter-widget-wrapper .page-title-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0px !important;
    margin-bottom: 0.15rem !important;
    padding-bottom: 0px !important;
  }
  .converter-widget-wrapper .lang-selector-pill {
    display: flex !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    align-self: flex-start !important;
  }
  .converter-widget-wrapper #main-h1 {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 2.28em !important; /* Reserve space for 2 lines — prevents CLS */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .converter-widget-wrapper .breadcrumbs {
    /* Visual hidden but fully present in DOM for search engines/crawlers */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }
  .converter-widget-wrapper .main-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "converter"
      "ad1"
      "answers"
      "table"
      "info"
      "ad2" !important;
    gap: 0.5rem !important;
  }
  .converter-widget-wrapper.mth-trial-layout:not(.mth-has-quick-answer) .main-grid {
    grid-template-areas: 
      "converter"
      "ad1"
      "scale"
      "table"
      "answers"
      "info"
      "ad2" !important;
  }
  .converter-widget-wrapper.mth-trial-layout.mth-has-quick-answer .main-grid {
    grid-template-areas: 
      "converter"
      "ad1"
      "quick-answer"
      "scale"
      "table"
      "answers"
      "info"
      "ad2" !important;
  }
  /* Prevent footer elements from touching screen boundaries */
  footer, .site-footer, .site-below-footer-wrap, .ast-footer-overlay {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .converter-widget-wrapper .white-card-box {
    padding: 8px !important;
  }
  .converter-widget-wrapper .area-converter {
    height: auto !important;
    margin-bottom: 0.5rem !important;
    box-sizing: border-box !important;
    scroll-margin-top: 0 !important;
    contain: layout style !important; /* Prevent reflow cascade on keyboard open */
    touch-action: pan-y !important; /* Fix bounce on output tap */
  }
  .converter-widget-wrapper .area-converter .white-card-box {
    height: auto !important; /* Don't stretch to grid cell — content-sized only */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 8px 8px !important;
  }
  .converter-widget-wrapper .area-scale {
    height: auto !important;
  }
  .converter-widget-wrapper .area-scale .white-card-box {
    height: auto !important; /* Don't stretch to grid cell — content-sized only */
    min-height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 8px 8px !important;
  }
  .converter-widget-wrapper .area-converter .section-title {
    display: none !important; /* Hide redundant card header on mobile to save vertical space */
  }
  .converter-widget-wrapper .section-title {
    margin-bottom: 0.4rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Arrange label/dropdown and input side-by-side horizontally for compact mobile view */
  .converter-widget-wrapper .input-group {
    margin-bottom: 4px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .converter-widget-wrapper .unit-select {
    font-size: 16px !important;     /* 16px required — prevents iOS auto-zoom on focus */
    font-weight: 500 !important;    /* Not bold — readable, not thick */
    text-transform: none !important; /* Show natural case: 'CM - Centimeter' not 'CM - CENTIMETER' */
    margin-bottom: 0 !important;
    width: 150px !important;        /* Wide enough to show full 'CM - Centimeter' */
    min-width: 150px !important;
    max-width: 150px !important;
    text-align: left !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 18px !important;
    height: 48px !important;
    touch-action: manipulation !important;
  }
  .converter-widget-wrapper .unit-static-label {
    font-size: 13px !important;
    margin-bottom: 0 !important;
    width: 125px !important;
    min-width: 125px !important;
    text-align: left !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .converter-widget-wrapper .custom-input {
    padding: 0.4rem 0.5rem !important;
    font-size: 16px !important;
    flex: 1 !important;
    height: 48px !important;
    touch-action: manipulation !important;
  }
  .converter-widget-wrapper .unit-select:focus,
  .converter-widget-wrapper .custom-input:focus {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom on focus only */
  }
  
  /* Compact swap button */
  .converter-widget-wrapper .swap-container {
    margin: 0px 0 !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .converter-widget-wrapper .swap-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-width: 1.5px !important;
  }
  .converter-widget-wrapper .swap-button i {
    font-size: 0.75rem !important;
  }
  
  /* Compact result display using a single-row flex layout on mobile, wrapping if necessary */
  .converter-widget-wrapper .result-card {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    margin-top: 0.25rem !important;
    text-align: left !important;
    gap: 8px !important;
  }
  .converter-widget-wrapper .result-info-group {
    flex: 1 !important;
    min-width: 180px !important;
    align-items: flex-start !important;
  }
  .converter-widget-wrapper .result-value {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }
  .converter-widget-wrapper .result-text {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }
  .converter-widget-wrapper .copy-btn {
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
    margin-top: 0 !important;
    align-self: center !important;
  }
  .converter-widget-wrapper .direct-answer-box {
    margin-top: 0.75rem !important;
    padding: 0.75rem !important;
  }
  .converter-widget-wrapper .direct-answer-box h2 {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }
  .converter-widget-wrapper .direct-answer-box p {
    font-size: 0.8rem !important;
  }
  .converter-widget-wrapper .definitions-box {
    margin-top: 10px !important;
  }
  .converter-widget-wrapper .definitions-box h2 {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }
  .converter-widget-wrapper .definitions-box p {
    font-size: 0.8rem !important;
  }
  .converter-widget-wrapper .area-sidebar-desktop {
    grid-area: ad1 !important;
    display: block !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .converter-widget-wrapper .area-ad1 {
    min-height: 250px !important;
    height: 250px !important;
    width: 300px !important;
    max-width: 100% !important; /* Prevent horizontal layout overflow */
    position: relative !important;
    top: 0 !important;
    margin: 3.0rem auto 0.5rem auto !important; /* Increase spacing to prevent accidental clicks */
  }
  .converter-widget-wrapper .area-ad3-mobile {
    display: block !important;
    min-height: 250px !important;
    height: 250px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2.5rem auto 0.5rem auto !important;
  }
  .converter-widget-wrapper .area-ad2 {
    min-height: 250px !important;
    height: 250px !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Fix mobile menu hamburger white-on-white visibility */
  .ast-mobile-menu-trigger-minimal,
  .ast-mobile-menu-trigger,
  .ast-menu-toggle,
  .menu-toggle {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .ast-mobile-menu-trigger-minimal svg,
  .ast-mobile-menu-trigger svg,
  .ast-menu-toggle svg,
  .menu-toggle svg {
    fill: var(--primary) !important;
  }
  .ast-mobile-menu-trigger-minimal svg path,
  .ast-mobile-menu-trigger svg path,
  .ast-menu-toggle svg path,
  .menu-toggle svg path {
    fill: var(--primary) !important;
    stroke: var(--primary) !important;
  }
  .ast-mobile-menu-trigger-minimal *,
  .ast-mobile-menu-trigger *,
  .ast-menu-toggle *,
  .menu-toggle * {
    color: var(--primary) !important;
    fill: var(--primary) !important;
    stroke: var(--primary) !important;
  }
}

/* performance: Set fixed widths on table columns to prevent reflow shifts */
.converter-widget-wrapper .conversion-table th,
.converter-widget-wrapper .conversion-table td {
  width: 50% !important;
}