/* ============================================================
   JEWELLERY PRODUCT PAGE — RESPONSIVE FIXES
   Include this file in your view:
   <link rel="stylesheet" href="assets/css/jewellery_responsive.css">
   ============================================================ */

/* ── Base: make ALL tables scrollable on small screens ── */
.table-responsive,
.budget-table,
.price_table,
.weight-table,
.resize-table,
.table_change_gem,
.quality_table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

/* Keep inner budget sub-tables as inline-table so they render inside the scroll container */
/* .budget-table .budget-table {
  display: inline-table;
  min-width: 100%;
} */

/* ── Budget wrapper top title ── */
/* .budget-wrapper.pro_budget {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
} */

/* ── Product part wrapping ── */
.product_part {
  width: 100%;
  overflow-x: hidden;
}

/* ── Price table caption ── */
.price_table caption {
  caption-side: top;
  font-size: 13px;
  padding: 6px 4px;
}

/* ── Shape selection images ── */
.shape_image_product {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Diamond quality options ── */
#qualityBox,
.diamond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ── Ring size container ── */
.ring_container {
  max-height: 240px;
  overflow-y: auto;
}

/* ── Compare section ── */
#compareSection {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#compareSection .compare-item {
  display: inline-block;
  vertical-align: top;
}

/* ── Tooltip (price detail pop-up) ── */
.has-tooltip_table_detailes {
  position: relative;
}
.has-tooltip_table_detailes .tooltip {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 95vw !important;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  display: none;
  white-space: normal;
}
.has-tooltip_table_detailes:hover .tooltip,
.has-tooltip_table_detailes:focus-within .tooltip {
  display: block;
}
.has-tooltip_table_detailes .tooltip table {
  width: 100%;
  font-size: 12px;
}

/* ── Budget table cell sizing ── */
.budget-top-title {
  font-size: 13px;
  word-break: break-word;
  padding: 6px;
}

/* ── General table cell sizing ── */
.budget-table th,
.budget-table td,
.price_table th,
.price_table td,
.table-bordered th,
.table-bordered td {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 6px;
  vertical-align: middle;
}

/* ── Shape images ── */
.shape-img {
  max-width: 40px;
  height: auto;
}

/* ── Product image carousel ── */
.product_image img {
  max-width: 100%;
  height: auto;
}
#custCarousel .carousel-inner img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Budget section image ── */
#centerDiamondShape {
  max-width: 100%;
  height: auto;
}

/* ── Engraving image ── */
.engrav_img img {
  max-width: 100%;
  height: auto;
}

/* ── Buttons full width on mobile ── */
.btn-full {
  width: 100%;
  padding: 8px;
  font-weight: bold;
}

/* ── Add to cart / wishlist row ── */
.add-card,
.col-md-6.text-left,
.col-md-6.text-right {
  margin-bottom: 8px;
}

/* ── Price breakup wrapper (right panel) ── */
.price-breakup-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-breakup-wrapper table {
  min-width: 600px;
}

/* ── Selected price display ── */
#selected_company_price,
#selected_discount_price,
.totalyoupay_display {
  word-break: break-all;
}

/* ── Budget result ── */
#budgetResult {
  font-size: 13px;
  margin-top: 4px;
}

/* ── Breadcrumb ── */
.breadcrumb {
  flex-wrap: wrap;
  font-size: 13px;
}

/* ============================================================
   BREAKPOINT: ≤ 991px  (tablets + phablets)
   ============================================================ */
@media (max-width: 991px) {

  /* Stack the three main columns vertically */
  .col-md-4,
  .col-md-5,
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  /* Budget table section titles */
  .budget-top-title {
    font-size: 12px;
  }

  /* Ring size section */
  .ring_size {
    width: 100%;
  }

  /* Diamond section resize tables */
  .resize-table td,
  .resize-table th {
    font-size: 11px;
    padding: 3px 4px;
  }

  /* Shape selection */
  .shape_image_product .letest_design {
    min-width: 70px;
    text-align: center;
  }

  /* Certification labels */
  .letest_design {
    font-size: 12px;
  }

  /* Engraving */
  .engraving_font ul {
    flex-wrap: wrap;
    padding-left: 0;
  }

  /* Compare images */
  #compareSection .compare-item {
    width: 160px !important;
  }
  #compareSection .compare-item img {
    width: 160px !important;
  }
}

/* ============================================================
   BREAKPOINT: ≤ 767px  (phones)
   ============================================================ */
@media (max-width: 767px) {

  /* ── Main container padding ── */
  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* ── Budget section: horizontal scroll ── */
  .pro_budget {
    overflow-x: auto;
  }
  .main-budget-table {
    min-width: 600px;
  }

  /* ── Budget row section-title ── */
  .section-title {
    font-size: 11px;
    padding: 4px;
  }

  /* ── Price table ── */
  .price_table {
    font-size: 11px;
  }
  .price_table th,
  .price_table td {
    padding: 4px 3px;
    font-size: 11px;
  }

  /* ── Budget table cells ── */
  .budget-table th,
  .budget-table td {
    font-size: 11px;
    padding: 3px 4px;
  }

  /* ── h1 product title ── */
  .col-md-5 h1 {
    font-size: 18px;
    word-break: break-word;
  }

  /* ── Delivery message ── */
  .col-md-5 h6 {
    font-size: 13px;
  }

  /* ── Shape selection grid ── */
  #qualityBox,
  .diamond-row {
    gap: 4px;
  }
  .diamond-quality-option,
  .diamond-weight-option {
    font-size: 11px;
  }

  /* ── Ring container ── */
  .ring_container {
    max-height: 180px;
  }
  .option_list {
    padding-left: 0;
  }
  .ring_choice {
    list-style: none;
    font-size: 12px;
  }

  /* ── Resize table (medium/small weight) ── */
  .resize-table {
    font-size: 10px;
  }
  .resize-table td {
    padding: 3px 2px;
    min-width: 60px;
  }
  .resize-box {
    font-size: 10px;
    text-align: center;
  }

  /* ── Metal weight resize table ── */
  .table_change_gem td {
    min-width: 70px;
    font-size: 10px;
  }

  /* ── Shape images in shape picker ── */
  .shape {
    width: 50px !important;
    font-size: 10px !important;
  }
  .shape .shape_image img {
    height: 36px !important;
  }

  /* ── Metal plating images ── */
  .col-md-6 .text-center img[style*="height:35px"] {
    height: 28px !important;
  }

  /* ── Generate shape button ── */
  #generateShapeBtn {
    width: 100%;
    margin-top: 8px;
  }

  /* ── Wishlist / cart buttons ── */
  /* #add-wishlist-<?php echo isset($index) ? $index+1 : '1'; ?>, */
  #addToCartBtn,
  a.btn.btn-danger,
  button.add-cart,
  button.add-wishlist {
    width: 100% !important;
    margin-bottom: 8px;
  }
  .col-md-6.text-left,
  .col-md-6.text-right.add-card {
    text-align: center !important;
  }

  /* ── Compare section ── */
  #compareSection .compare-item {
    width: 130px !important;
    margin: 6px !important;
  }
  #compareSection .compare-item img {
    width: 130px !important;
  }

  /* ── Converted image div ── */
  #convertedImageDiv img {
    max-width: 100%;
    height: auto;
  }

  /* ── Budget result input ── */
  #customerBudget {
    width: 100% !important;
  }

  /* ── Tooltip table override for mobile ── */
  .has-tooltip_table_detailes .tooltip {
    width: 98vw !important;
    max-height: 70vh;
    font-size: 11px;
  }
  .has-tooltip_table_detailes .tooltip table {
    min-width: 500px;
  }
  .has-tooltip_table_detailes .tooltip h3 {
    font-size: 13px;
  }

  /* ── Price breakup table ── */
  .price-breakup-wrapper table {
    min-width: 550px;
    font-size: 11px;
  }

  /* ── Accordion engraving ── */
  #engraving .card-body {
    padding: 8px;
  }
  .inner_graving input[type="text"] {
    width: 100%;
  }

  /* ── Move to compare button ── */
  #moveToCompareBtn {
    width: 100%;
  }

  /* ── Section headings ── */
  .shape_heading h5,
  .shape_heading strong {
    font-size: 13px;
  }

  /* ── Product image thumbnails ── */
  .carousel-indicators.list-inline {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .carousel-indicators.list-inline li {
    display: inline-block;
    flex-shrink: 0;
  }
  .carousel-indicators.list-inline li img {
    width: 48px;
    height: 48px;
    object-fit: cover;
  }

  /* ── Budget top table section ── */
  .budget-table > tbody > tr > td > table {
    min-width: 180px;
  }
}

/* ============================================================
   BREAKPOINT: ≤ 480px  (small phones)
   ============================================================ */
@media (max-width: 480px) {

  /* Tighten all table cells further */
  th, td {
    font-size: 10px !important;
    padding: 2px 3px !important;
  }

  .section-title {
    font-size: 10px !important;
  }

  /* Heading in price breakup */
  .price-breakup-wrapper thead th {
    font-size: 10px;
  }

  /* Budget top title */
  .budget-top-title {
    font-size: 11px;
  }

  /* Shape picker */
  .shape {
    width: 44px !important;
  }
  .shape_image img {
    height: 30px !important;
  }

  /* Quality options */
  .diamond-quality-option,
  .diamond-weight-option {
    font-size: 10px;
    padding: 2px 4px;
  }

  /* Resize box */
  .resize-box strong {
    font-size: 10px;
  }

  /* Metal plating */
  .col-md-6 .text-center.p-1.border.rounded {
    width: 52px !important;
    font-size: 10px;
  }

  /* Compare items */
  #compareSection .compare-item {
    width: 110px !important;
  }
  #compareSection .compare-item img {
    width: 110px !important;
  }

  /* Breadcrumb */
  .breadcrumb-item {
    font-size: 11px;
  }

  /* Product h1 */
  .col-md-5 h1 {
    font-size: 15px;
  }
}
/* ============================================================
   BUDGET PATTI — MOBILE RESPONSIVE FIX
   Add this BELOW your existing jewellery_responsive.css
   OR append to the <style> block in your view
   ============================================================ */

/* ── Reset: budget wrapper always scrollable ── */
.budget-wrapper.pro_budget {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── On ALL screens: main-budget-table is a real table (not block) ── */
.main-budget-table {
  display: table !important;   /* override the display:block from earlier rule */
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;         /* equal column widths */
}

/* ── Inner budget sub-tables ── */
.budget-table .budget-table {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
}

/* Give every section-title column a min-width so content doesn't collapse */
/* .main-budget-table > tbody > tr > td,
.main-budget-table > tr > th,
.main-budget-table > tr > td {
  vertical-align: top;
  padding: 6px 4px;
  word-break: break-word;
} */

/* ── Budget top title ── */
.budget-top-title {
  font-size: 12px;
  word-break: break-word;
  white-space: normal;
  padding: 6px;
  line-height: 1.5;
}

/* ── Budget inner cell font ── */
.budget-table td,
.budget-table th {
  font-size: 11px;
  white-space: normal !important;   /* allow wrapping inside cells */
  word-break: break-word;
  padding: 3px 4px;
}

/* ── Section titles (column headers) ── */
.section-title {
  font-size: 11px;
  font-weight: bold;
  white-space: normal;
  word-break: break-word;
  background: #f8f8f8;
  padding: 4px !important;
}

/* ── Price display cells ── */
#selected_company_price,
#selected_discount_price,
.totalyoupay_display {
  font-size: 11px;
  word-break: break-all;
  display: block;
}

/* ── Budget input ── */
#customerBudget {
  max-width: 100% !important;
}

/* ── Shape images inside budget ── */
.shape-img {
  max-width: 36px;
  height: auto;
}

/* ══════════════════════════════════════════════════
   ≤ 991 px  — tablet: shrink but keep table layout
   ══════════════════════════════════════════════════ */
@media (max-width: 991px) {


  .budget-top-title {
    font-size: 11px;
  }

  .budget-table td,
  .budget-table th,
  .section-title {
    font-size: 10px;
    padding: 2px 3px !important;
  }

  #selected_company_price,
  #selected_discount_price,
  .totalyoupay_display {
    font-size: 10px;
  }
}

/* ══════════════════════════════════════════════════
   ≤ 767 px  — phone: STACK columns vertically
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Outer wrapper: full width, no overflow clip ── */
  .budget-wrapper.pro_budget {
    overflow-x: hidden;
    padding: 0 4px;
  }

  /* ── Main table: switch to block so rows/cells stack ── */
  .main-budget-table,
  .main-budget-table tbody,
  .main-budget-table tr {
    display: block !important;
    width: 100% !important;
  }

  /* ── Each cell becomes a full-width card ── */
  .main-budget-table > tbody > tr > td,
  .main-budget-table > tr > td,
  .main-budget-table > tr > th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px !important;
    background: #fff;
  }

  /* ── Section-title headers stack too ── */
  .main-budget-table > tr > th.section-title,
  .main-budget-table thead tr th.section-title {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px;
    border-radius: 4px;
    background: #f0f0f0;
    font-size: 12px;
    padding: 6px 8px !important;
  }

  /* ── Inner budget sub-tables: allow horizontal scroll ── */
  .main-budget-table td > .budget-table,
  .main-budget-table td > table.budget-table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }

  /* ── Inner tr/td: keep as table cells (don't stack inner cells) ── */
  .main-budget-table td > table.budget-table,
  .main-budget-table td > table.budget-table tbody,
  .main-budget-table td > table.budget-table tr,
  .main-budget-table td > table.budget-table td {
    display: revert !important;
  }

  /* ── Top title ── */
  .budget-top-title {
    font-size: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 8px !important;
    margin-bottom: 8px;
    line-height: 1.6;
  }

  /* ── Selected Total Price section: label each sub-cell ── */
  .budget-table td b {
    display: block;
    font-size: 11px;
    color: #555;
    margin-bottom: 2px;
  }

  /* ── Price values readable ── */
  #selected_company_price,
  #selected_discount_price,
  .totalyoupay_display {
    font-size: 13px;
    font-weight: bold;
    color: #222;
    word-break: break-all;
  }

  /* ── Budget input full width ── */
  #customerBudget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── Budget result text ── */
  #budgetResult {
    font-size: 12px;
    margin-top: 4px;
  }

  /* ── Stone images ── */
  .shape-img {
    max-width: 32px;
    height: auto;
  }

  /* ── Medium/small size lists ── */
  #mediumSizeList,
  #smallSizeList {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════
   ≤ 480 px  — small phone: tighten further
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .budget-top-title {
    font-size: 11px;
  }

  .main-budget-table > tbody > tr > td,
  .main-budget-table > tr > td {
    padding: 6px !important;
    margin-bottom: 6px;
  }

  #selected_company_price,
  #selected_discount_price,
  .totalyoupay_display {
    font-size: 12px;
  }

  /* ── Inline red circle icons ── */
  .budget-top-title span[style*="border-radius:50%"] {
    width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    font-size: 11px !important;
  }
}

/* ── make ALL tables horizontally scrollable ── */
.table-responsive,.main-budget-table,.budget-table,.price_table,
.weight-table,.resize-table,.table_change_gem,.quality_table{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;display:block
}
.budget-table .budget-table{display:inline-table;min-width:100%}
.budget-wrapper.pro_budget{overflow-x:auto;-webkit-overflow-scrolling:touch}
.product_part{width:100%;overflow-x:hidden}
#qualityBox,.diamond-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ring_container{max-height:240px;overflow-y:auto}
#compareSection{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
#compareSection .compare-item{display:inline-block;vertical-align:top}
.has-tooltip_table_detailes .tooltip{
  position:fixed!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;width:95vw!important;
  max-width:700px;max-height:80vh;overflow-y:auto;z-index:9999;
  background:#fff;border:1px solid #ccc;border-radius:8px;padding:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.22);display:none;white-space:normal
}
.has-tooltip_table_detailes:hover .tooltip,
.has-tooltip_table_detailes:focus-within .tooltip{display:block}
.has-tooltip_table_detailes .tooltip table{width:100%;font-size:12px}
.budget-top-title{font-size:13px;word-break:break-word;padding:6px}
.budget-table th,.budget-table td,.price_table th,.price_table td,
.table-bordered th,.table-bordered td{
  white-space:nowrap;font-size:12px;padding:4px 6px;vertical-align:middle
}
.shape-img{max-width:40px;height:auto}
.product_image img,#custCarousel .carousel-inner img,#centerDiamondShape{
  max-width:100%;height:auto
}
.price-breakup-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-breakup-wrapper table{min-width:600px}
.shape_image_product{display:flex;flex-wrap:wrap;gap:8px}
.breadcrumb{flex-wrap:wrap;font-size:13px}

/* ── ≤991px ── */
@media(max-width:991px){
  .col-md-4,.col-md-5,.col-md-3{flex:0 0 100%;max-width:100%;margin-bottom:16px}
  .budget-top-title{font-size:12px}
  .ring_size{width:100%}
  .resize-table td,.resize-table th{font-size:11px;padding:3px 4px}
  .shape_image_product .letest_design{min-width:70px;text-align:center}
  .letest_design{font-size:12px}
  .engraving_font ul{flex-wrap:wrap;padding-left:0}
  #compareSection .compare-item{width:160px!important}
  #compareSection .compare-item img{width:160px!important}
}

/* ── ≤767px ── */
@media(max-width:767px){
  .container-fluid{padding-left:8px;padding-right:8px}
  .pro_budget{overflow-x:auto}
  .main-budget-table{min-width:600px}
  .section-title{font-size:11px;padding:4px}
  .price_table,.price_table th,.price_table td{font-size:11px}
  .price_table th,.price_table td{padding:4px 3px}
  .budget-table th,.budget-table td{font-size:11px;padding:3px 4px}
  .col-md-5 h1{font-size:18px;word-break:break-word}
  .col-md-5 h6{font-size:13px}
  #qualityBox,.diamond-row{gap:4px}
  .diamond-quality-option,.diamond-weight-option{font-size:11px}
  .ring_container{max-height:180px}
  .option_list{padding-left:0}
  .ring_choice{list-style:none;font-size:12px}
  .resize-table{font-size:10px}
  .resize-table td{padding:3px 2px;min-width:60px}
  .resize-box{font-size:10px;text-align:center}
  .table_change_gem td{min-width:70px;font-size:10px}
  .shape{width:50px!important;font-size:10px!important}
  .shape .shape_image img{height:36px!important}
  #generateShapeBtn{width:100%;margin-top:8px}
  #addToCartBtn,a.btn.btn-danger{width:100%!important;margin-bottom:8px}
  .col-md-6.text-left,.col-md-6.text-right.add-card{text-align:center!important}
  #compareSection .compare-item{width:130px!important;margin:6px!important}
  #compareSection .compare-item img{width:130px!important}
  #convertedImageDiv img{max-width:100%;height:auto}
  #customerBudget{width:100%!important}
  .has-tooltip_table_detailes .tooltip{width:98vw!important;max-height:70vh;font-size:11px}
  .has-tooltip_table_detailes .tooltip table{min-width:500px}
  .has-tooltip_table_detailes .tooltip h3{font-size:13px}
  .price-breakup-wrapper table{min-width:550px;font-size:11px}
  #engraving .card-body{padding:8px}
  .inner_graving input[type="text"]{width:100%}
  #moveToCompareBtn{width:100%}
  .shape_heading h5,.shape_heading strong{font-size:13px}
  .carousel-indicators.list-inline{
    overflow-x:auto;white-space:nowrap;display:flex;flex-wrap:nowrap;padding-bottom:4px
  }
  .carousel-indicators.list-inline li{display:inline-block;flex-shrink:0}
  .carousel-indicators.list-inline li img{width:48px;height:48px;object-fit:cover}
  .budget-table>tbody>tr>td>table{min-width:180px}
  #budgetResult{font-size:13px;margin-top:4px}
  .add-card,.col-md-6.text-left,.col-md-6.text-right{margin-bottom:8px}
}

/* ── ≤480px ── */
@media(max-width:480px){
  th,td{font-size:10px!important;padding:2px 3px!important}
  .section-title{font-size:10px!important}
  .budget-top-title{font-size:11px}
  .shape{width:44px!important}
  .shape_image img{height:30px!important}
  .diamond-quality-option,.diamond-weight-option{font-size:10px;padding:2px 4px}
  .resize-box strong{font-size:10px}
  #compareSection .compare-item,
  #compareSection .compare-item img{width:110px!important}
  .breadcrumb-item{font-size:11px}
  .col-md-5 h1{font-size:15px}
  .price-breakup-wrapper thead th{font-size:10px}
}

/* Viewport */
*, *::before, *::after { box-sizing: border-box; }

/* Product wrapper */
.product_part { width: 100%; overflow-x: hidden; }

/* ── Budget patti wrapper ── */
.budget-wrapper.pro_budget {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Budget top title ── */
.budget-top-title {
  font-size: 13px;
  word-break: break-word;
  white-space: normal;
  line-height: 1.6;
  padding: 8px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* ── MAIN BUDGET TABLE: real table on desktop ── */
.main-budget-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.main-budget-table tr { display: table-row; }
.main-budget-table th,
.main-budget-table td { display: table-cell; vertical-align: top; padding: 6px 5px; }

/* ── Section-title header cells ── */
.section-title {
  font-size: 11px;
  font-weight: bold;
  white-space: normal;
  word-break: break-word;
  background: #f8f8f8;
  padding: 6px 5px;
  border: 1px solid #dee2e6;
}

/* ── Inner budget sub-tables ── */
.budget-table {
  width: 100%;
  border-collapse: collapse;
}
.budget-table td,
.budget-table th {
  font-size: 11px;
  white-space: normal;
  word-break: break-word;
  padding: 3px 4px;
  vertical-align: top;
}

/* ── Price/discount tables (general) ── */
.price_table,
.table-bordered {
  width: 100%;
  border-collapse: collapse;
}
.price_table th,
.price_table td,
.table-bordered th,
.table-bordered td {
  font-size: 12px;
  padding: 4px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Price breakup wrapper ── */
.price-breakup-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-breakup-wrapper table { min-width: 580px; }

/* ── Weight/resize tables ── */
.resize-table,
.table_change_gem,
.weight-table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
}
.resize-table td,
.resize-table th,
.table_change_gem td { font-size: 11px; padding: 3px 4px; }
.resize-box { font-size: 11px; text-align: center; }

/* ── Images ── */
.shape-img { max-width: 40px; height: auto; }
.product_image img,
#custCarousel .carousel-inner img,
#centerDiamondShape { max-width: 100%; height: auto; }
.engrav_img img { max-width: 100%; height: auto; }

/* ── Diamond quality/weight pickers ── */
#qualityBox, .diamond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ── Shape image product row ── */
.shape_image_product { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Ring size ── */
.ring_container { max-height: 240px; overflow-y: auto; }

/* ── Compare section ── */
#compareSection {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#compareSection .compare-item { display: inline-block; vertical-align: top; }

/* ── Tooltip popups ── */
.has-tooltip_table_detailes { position: relative; }
.has-tooltip_table_detailes .tooltip {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 95vw !important;
  max-width: 720px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  display: none;
  white-space: normal;
}
.has-tooltip_table_detailes:hover .tooltip,
.has-tooltip_table_detailes:focus-within .tooltip { display: block; }
.has-tooltip_table_detailes .tooltip table { width: 100%; font-size: 12px; min-width: 500px; }

/* ── Price display spans ── */
#selected_company_price,
#selected_discount_price,
.totalyoupay_display { word-break: break-all; display: block; }

/* ── Budget input ── */
#customerBudget { max-width: 100%; }
#budgetResult { font-size: 13px; margin-top: 4px; }

/* ── Breadcrumb ── */
.breadcrumb { flex-wrap: wrap; font-size: 13px; }

/* ── Buttons ── */
.btn-full { width: 100%; padding: 8px; font-weight: bold; }

/* ── Carousel thumbnails ── */
.carousel-indicators.list-inline {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 4px;
}
.carousel-indicators.list-inline li { display: inline-block; flex-shrink: 0; }
.carousel-indicators.list-inline li img { width: 52px; height: 52px; object-fit: cover; }


/* ════════════════════════════════════════════════════════════
   2. TABLET  ≤ 991px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── 3 columns: stack to full width ── */
  .col-md-4, .col-md-5, .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  /* ── Budget patti: force horizontal scroll, keep table layout ── */
  .budget-wrapper.pro_budget { overflow-x: auto; }
  .main-budget-table {
    display: table;
    min-width: 680px;
  }

  .budget-top-title { font-size: 12px; }
  .section-title { font-size: 10px; }
  .budget-table td, .budget-table th { font-size: 10px; padding: 2px 3px; }

  .ring_size { width: 100%; }
  .resize-table td, .resize-table th { font-size: 10px; padding: 3px 3px; }
  .shape_image_product .letest_design { min-width: 70px; text-align: center; }
  .letest_design { font-size: 12px; }
  .engraving_font ul { flex-wrap: wrap; padding-left: 0; }
  #compareSection .compare-item { width: 160px !important; }
  #compareSection .compare-item img { width: 160px !important; }
}


/* ════════════════════════════════════════════════════════════
   3. PHONE  ≤ 767px  — budget patti STACKS vertically
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .container-fluid { padding-left: 6px; padding-right: 6px; }

  /* ─── BUDGET PATTI: full vertical stack ─── */
  .budget-wrapper.pro_budget {
    overflow-x: hidden;
    padding: 0 2px;
  }

  /* outer table → block */
  .main-budget-table,
  .main-budget-table tbody,
  .main-budget-table tr {
    display: block !important;
    width: 100% !important;
  }

  /* each outer td/th → full-width card */
  .main-budget-table > tbody > tr > td,
  .main-budget-table > tbody > tr > th,
  .main-budget-table > tr > td,
  .main-budget-table > tr > th {
    display: block !important;
    width: 100% !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px !important;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  /* section-title header row → hide or style as label */
  /* .main-budget-table > tr > th.section-title {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px;
    border-radius: 4px;
    background: #f0f0f0;
    font-size: 12px;
    padding: 6px 8px !important;
    box-shadow: none;
  } */

  /* inner sub-table → scroll horizontally */
  /* .main-budget-table > tbody > tr > td > table.budget-table,
  .main-budget-table > tr > td > table.budget-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  } */
  /* but keep inner rows/cells as proper table cells */
  /* .main-budget-table td > table.budget-table > tbody,
  .main-budget-table td > table.budget-table > tbody > tr,
  .main-budget-table td > table.budget-table > tbody > tr > td {
    display: revert !important;
    white-space: nowrap;
  } */

  /* ── Price section: readable values ── */
  #selected_company_price,
  #selected_discount_price,
  .totalyoupay_display {
    font-size: 14px;
    font-weight: bold;
    color: #111;
  }

  /* budget input */
  #customerBudget { width: 100% !important; box-sizing: border-box; }
  #budgetResult { font-size: 12px; margin-top: 6px; }

  /* ── Price range table ── */
  .price_table { display: block; overflow-x: auto; }
  .price_table th, .price_table td { font-size: 11px; padding: 3px 4px; }

  /* ── Section headings ── */
  .col-md-5 h1 { font-size: 18px; word-break: break-word; }
  .col-md-5 h6 { font-size: 13px; }
  .shape_heading h5, .shape_heading strong { font-size: 13px; }

  /* ── Diamond pickers ── */
  #qualityBox, .diamond-row { gap: 4px; }
  .diamond-quality-option, .diamond-weight-option { font-size: 11px; }

  /* ── Ring size ── */
  .ring_container { max-height: 180px; }
  .option_list { padding-left: 0; }
  .ring_choice { list-style: none; font-size: 12px; }

  /* ── Resize tables ── */
  .resize-table { font-size: 10px; }
  .resize-table td { padding: 3px 2px; min-width: 56px; }
  .resize-box { font-size: 10px; text-align: center; }
  .table_change_gem td { min-width: 68px; font-size: 10px; }

  /* ── Shape picker ── */
  .shape { width: 50px !important; font-size: 10px !important; }
  .shape .shape_image img { height: 36px !important; }

  /* ── Generate / move buttons ── */
  #generateShapeBtn, #moveToCompareBtn { width: 100%; margin-top: 8px; }

  /* ── Add to cart / wishlist ── */
  #addToCartBtn, a.btn.btn-danger,
  button.add-cart, button.add-wishlist {
    width: 100% !important; margin-bottom: 8px;
  }
  .col-md-6.text-left, .col-md-6.text-right.add-card { text-align: center !important; }
  .add-card, .col-md-6.text-left, .col-md-6.text-right { margin-bottom: 8px; }

  /* ── Compare ── */
  #compareSection .compare-item { width: 130px !important; margin: 6px !important; }
  #compareSection .compare-item img { width: 130px !important; }
  #convertedImageDiv img { max-width: 100%; height: auto; }

  /* ── Tooltip ── */
  .has-tooltip_table_detailes .tooltip {
    width: 98vw !important; max-height: 70vh; font-size: 11px;
  }
  .has-tooltip_table_detailes .tooltip h3 { font-size: 13px; }

  /* ── Price breakup ── */
  .price-breakup-wrapper table { min-width: 540px; font-size: 11px; }

  /* ── Engraving ── */
  #engraving .card-body { padding: 8px; }
  .inner_graving input[type="text"] { width: 100%; }

  /* ── Carousel thumbnails ── */
  .carousel-indicators.list-inline li img { width: 44px; height: 44px; }
}