hr {
       margin-top: 0.2em;
       margin-bottom: 0.2em
   }

   h1 {
       letter-spacing: normal;
   }

   .youtube {
       position: relative;
       padding-bottom: 56.25%;
       height: 0;
   }

   .youtube iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

   .call_btn {
       background-color: blue;
       cursor: pointer;
       padding-left: 14%;
       padding-right: 14%;
       padding-top: 2.5%;
       padding-bottom: 2.5%;
       font-size: 1em
   }

   .product-desc-phone {
       font-size: 1.2em
   }

   .prod-war,
   .prod-ser,
   .prod-con,
   .prod-time {
       font-size: 1em;
   }

   .prod-war {
       color: blue
   }

   h2,
   h3,
   h6,
   .contact {
       font-weight: bold
   }

   h3 {
       font-size: 1.1em
   }

   h6 {
       font-size: 1.5em
   }

   h2 {
       font-size: 1.5em;
   }

   h2 {
       color: green
   }

   h3 {
       color: blue
   }

   .product-desc-feature table th {
       padding-left: 5px
   }

   .product-desc-feature table th,
   td {
       font-size: 1.15em
   }

   .sub-menu {
       margin-bottom: -0em
   }

   ul {
       padding-left: 18px
   }

   .extra ul li ul {
       margin-bottom: 0.2em
   }

   .ibox {
       position: relative;
       text-align: center;
       color: white;
   }

   .ipos {
       position: absolute;
       top: 8px;
       left: 16px;
   }

   .ibox img {
       margin-left: auto;
       margin-right: auto;
       display: block;
       max-width: 100%
   }

   .glance {
       margin-bottom: 0.5em
   }

   .glance img {
       vertical-align: middle;
       max-width: 25px
   }

   #displayAvator {
       width: 100%;
       max-width: 800px;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       background: white;
       border: 1px solid #dee2e6;
   }

   #displayAvator img {
       object-fit: contain;
       display: block;
   }


   .rating-category {
       display: flex;
       /* keep everything in one line */
       align-items: center;
       /* margin-bottom: 10px; */
       gap: 20px;

       /* spacing between items */
   }

   .rating-category label {
       font-weight: bold;
       margin: 0;
       white-space: nowrap;
       width: 150px;
   }

   .rating-category .arrow {
       font-size: 1.2em;
       color: #999;
       /* soft arrow color */
   }

   .star-rating {
       display: inline-block;
       font-size: 1.8em;
       direction: ltr;
       cursor: pointer;
   }

   .star-rating span {
       display: inline-block;
       width: 1.2em;
       color: lightgray;
   }

   .star-rating span::before {
       content: "★";
       color: lightgray;
       transition: color 0.2s;
   }

   .star-rating span.hover::before,
   .star-rating span.selected::before {
       color: gold;
   }

   .rating label {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 70px;
       /* fixed width for equal size */
       cursor: pointer;
       color: #ddd;
       /* default light color */
       transition: color 0.3s;
   }

   .m-top {
       margin-top: 10px;
   }

   .w-50 {
       width: 50% !important;
   }

   [name="StallID"] {
       width: 100% !important;
   }


   /* Smart alert base */
   #smartAlertContainer {
       position: fixed;
       top: 20px;
       right: 20px;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       gap: 10px;
       max-width: 360px;
       pointer-events: none;
       /* clicks pass through container except buttons inside items */
   }

   /* Individual alert */
   .smart-alert {
       pointer-events: auto;
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 12px 14px;
       border-radius: 10px;
       box-shadow: 0 6px 18px rgba(20, 20, 20, 0.12);
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
       color: #222;
       background: #fff;
       border: 1px solid rgba(0, 0, 0, 0.04);
       animation: slideIn .22s ease-out;
   }

   /* icons */
   .smart-alert .icon {
       font-size: 18px;
       line-height: 1;
       margin-top: 2px;
   }

   /* text */
   .smart-alert .message_mod {
       flex: 1 1 auto;
       font-size: 14px;
       line-height: 1.35;
       background-color: none;
   }

   /* close button */
   .smart-alert .close-btn {
       background: transparent;
       border: none;
       font-size: 16px;
       cursor: pointer;
       color: rgba(0, 0, 0, 0.45);
       padding: 2px;
   }

   /* Types */
   .smart-alert.warning {
       background: linear-gradient(180deg, #fff8e6, #fff7e4);
       border-color: #ffe6a8;
       color: #7a5a00;
   }

   .smart-alert.danger {
       background: linear-gradient(180deg, #fff0f2, #fff0f2);
       border-color: #ffb3c7;
       color: #8b0016;
   }

   .smart-alert.success {
       background: linear-gradient(180deg, #e9ffef, #eafff0);
       border-color: #b6f2c6;
       color: #04531b;
   }

   .smart-alert.info {
       background: linear-gradient(180deg, #eef8ff, #eef8ff);
       border-color: #cce7ff;
       color: #0a4a73;
   }

   /* Enhanced Product Variations CSS */
   .variation-label {
       font-weight: bold;
       margin: 10px 0;
       color: green;
       font-size: 1.5em;
   }

   .color-options {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       align-items: center;
   }

   .color-name {
       font-size: 12px;
       text-align: center;
       color: #666;
       font-weight: normal;
   }

   .variation_options {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       align-items: center;
   }


   .size-option {
       border: 2px solid #ddd;
       border-radius: 6px;
       cursor: pointer;
       background-color: white;
       font-weight: bold;
       min-width: 60px;
       text-align: center;
       transition: all 0.3s ease;
       font-size: 14px;
       position: relative;
       padding: 6px 10px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }

   /* Hover effect */
   .size-option:hover {
       background-color: #e9f5ff;
       border-color: #2196f3;
       color: #2196f3;
       box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
       transform: translateY(-2px);
   }

   /* Active/selected size */
   .size-option.active {
       background-color: #2196f3;
       border-color: #1976d2;
       color: #fff;
       box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
       transform: scale(1.05);
   }

   .product-desc-img-ctl {
       display: flex;
       gap: 12px;
       align-items: center;
       justify-content: center;
       padding: 10px 0;
       flex-wrap: wrap;
   }

   .listing_avator {
       position: relative;
       flex-shrink: 0;
   }

   .listing_avator a {
       display: block;
       padding: 4px;
       border: 2px solid #dee2e6;
       border-radius: 8px;
       background: white;
       transition: all 0.3s ease;
       cursor: pointer;
       overflow: hidden;
   }

   .listing_avator a:hover {
       border-color: #2196f3;
       box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25);
       transform: translateY(-2px);
   }

   .listing_avator img {
       display: block;
       width: 50px;
       height: 50px;
       object-fit: cover;
       border-radius: 4px;
       transition: all 0.3s ease;
   }

   .listing_avator a:has(img.active) {
       border-color: #28a745;
       box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15), 0 4px 12px rgba(40, 167, 69, 0.3);
       background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
   }

   .listing_avator img.active {
       opacity: 1;
   }

   .rating-section.locked {
       pointer-events: none;
       opacity: 0.4;
       position: relative;
   }

   .rating-section.locked::after {
       content: "Ratings are disabled in Question mode";
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: white;
       font-weight: bold;
       font-size: 18px;
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   /* entrance */
   @keyframes slideIn {
       from {
           transform: translateY(-8px);
           opacity: 0;
       }

       to {
           transform: translateY(0);
           opacity: 1;
       }
   }

   .open-button {
       background-color: #555;
       color: white;
       padding: 16px 20px;
       border: none;
       cursor: pointer;
       opacity: 0.8;
       position: fixed;
       bottom: 23px;
       right: 28px;
       width: 280px;
   }

   .filters a {
       background-color: blue;
       font-weight: bold;
       color: white;
       border-color: blue
   }

   /* rating view part design start */
   .ratings-wrapper {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
       gap: 5px;
   }

   .rating-view {
       text-align: left;
   }

   .rating-view div:first-child {
       font-size: 14px;
       font-weight: 500;
       color: #333;
   }

   .rating-view img {
       width: 15px;
       vertical-align: middle;
       margin-right: 4px;
   }

   .setAvator {
       cursor: pointer;
   }

   @media (min-width: 550px) {
       .glance {
           margin-left: 0;
       }
   }

   @media (max-width: 550px) {
       .glance {
           width: 50%;
       }
   }

   /* ===== NEW PRICING & SELLERS DESIGN ===== */

   /* Market Price Header */
   .market-price-header {
       background: #f8f9fa;
       border: 2px solid #dee2e6;
       border-radius: 8px;
       padding: 10px 20px;
       margin-bottom: 20px;
   }

   .market-price-title {
       font-size: 24px;
       font-weight: 600;
       color: #298D13;
       margin: 0 0 8px 0;
   }

   .market-price-title .price-range {
       color: #dc3545;
   }

   .market-price-subtitle {
       font-size: 1em;
       color: #6c757d;
       margin: 0;
   }

   /* Seller Section */
   .seller-section {
       margin-bottom: 30px;
   }

   .section-title {
       font-size: 22px;
       font-weight: 700;
       color: #212529;
       margin: 20px 0 10px 0;
   }

   .section-subtitle {
       font-size: 14px;
       color: #6c757d;
       margin: 0 0 15px 0;
   }

   /* Seller Card New Design */
   .seller-card-new {
       background: white;
       border: 1px solid #dee2e6;
       padding: 16px;
       margin-bottom: 12px;
       transition: all 0.3s ease;
   }

   .seller-card-new:hover {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   /* Best Buy Badge */
   .best-buy {
       margin-bottom: 8px;
   }

   .best-buy-badge {
       background: #e9ecef;
       padding: 8px 12px;
       font-size: 16px;
       font-weight: 600;
       color: #495057;
       display: flex;
       gap: 2px;
       align-items: center;
   }

   .best-buy-badge .star-icon {
       color: #ffc107;
       margin-right: 6px;
       font-size: 16px;
   }

   .best-buy-badge .recommended {
       font-weight: 400;
       color: #6c757d;
   }

   /* Seller Info Row */
   .seller-info-row {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 16px;
   }

   .seller-left {
       display: flex;
       gap: 12px;
       flex: 1;
   }

   .seller-logo-wrap {
       flex-shrink: 0;
   }

   .seller-logo-img {
       width: 60px;
       height: 60px;
       object-fit: contain;
       border-radius: 6px;
       border: 1px solid #e9ecef;
       border-radius: 50%;
   }

   .seller-details {
       flex: 1;
   }

   .seller-name-loc {
       margin-bottom: 6px;
   }

   .seller-name {
       font-size: 16px;
       font-weight: 600;
       color: #212529;
   }

   .seller-location {
       font-size: 14px;
       color: #6c757d;
       margin-left: 4px;
   }

   .seller-rating-row {
       display: flex;
       align-items: center;
       gap: 4px;
       margin-bottom: 8px;
   }

   .seller-rating-row .star-sm {
       width: 14px;
       height: 14px;
   }

   .rating-value {
       font-size: 14px;
       font-weight: 600;
       color: #495057;
       margin-left: 4px;
   }

   .seller-meta {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 8px;
       font-size: 14px;
   }

   .condition-badge {
       display: inline-block;
       padding: 4px 10px;
       border-radius: 4px;
       font-size: 12px;
       font-weight: 600;
       text-transform: uppercase;
   }

   .condition-new {
       background: #28a745;
       color: white;
   }

   .condition-used {
       background: #007bff;
       color: white;
   }

   .warranty-text {
       color: #6c757d;
       font-size: 13px;
   }

   /* Price & Action */
   .seller-right {
       flex-shrink: 0;
   }

   .price-action-wrap {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
   }

   .price-display {
       font-size: 26px;
       font-weight: 700;
       color: #212529;
       line-height: 1;
   }

   .original-price {
       font-size: 14px;
       color: #6c757d;
       display: flex;
       align-items: center;
       gap: 6px;
   }

   .discount-badge {
       background: #007bff;
       color: white;
       padding: 2px 6px;
       border-radius: 4px;
       font-size: 11px;
       font-weight: 600;
   }

   .buy-now-btn-new {
       background: #ff9000;
       color: white;
       height: auto;
       padding: 5px 0;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
       white-space: nowrap;
       display: block;
       width: 90px;
       text-align: center;
   }

   .buy-now-btn-new:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }

   /* Other Options Toggle */
   .other-options-toggle {
       text-align: center;
       margin-top: 12px;
   }

   .toggle-btn {
       background: none;
       border: none;
       color: #007bff;
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
       padding: 8px 16px;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       transition: all 0.3s ease;
   }

   .toggle-btn:hover {
       text-decoration: underline;
   }

   .arrow-icon {
       font-size: 20px;
       transition: transform 0.3s ease;
   }

   .toggle-btn.active .arrow-icon {
       transform: rotate(90deg);
   }

   .features_info {
       display: flex;
       gap: 15px;
       font-size: 12px;
       color: #333;
   }

   .feature_item {
       display: flex;
       gap: 5px;
   }

   .features_info img {
       height: 15px;
       width: auto;
   }

   /* Call Action Buttons Container */
   .call-action {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       gap: 8px;
   }

   .call-action-buttons {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
       justify-content: flex-end;
   }

   .call-price {
       font-size: 22px ! important;
       margin-bottom: 4px;
   }

   /* Call and WhatsApp Buttons - Same Style */
   .call-btn-new,
   .whatsapp-btn-new {
       background: white;
       color: #212529;
       border: 2px solid #212529;
       height: auto;
       padding: 5px 0;
       border-radius: 6px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
       white-space: nowrap;
       display: block;
       width: 90px;
       text-align: center;
   }

   .call-btn-new:hover,
   .whatsapp-btn-new:hover {
       transform: translateY(-2px);
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   }

   .call-btn-new i,
   .whatsapp-btn-new i {
       font-size: 14px;
   }

   /* Call specific color (optional) */
   .call-btn-new {
       background: #007bff;
       border-color: #007bff;
       color: white;
   }

   .call-btn-new:hover {
       background: white;
       color: black;
   }

   /* WhatsApp specific color (optional) */
   .whatsapp-btn-new {
       background: #25D366;
       color: white;
       border-color: #25D366;
   }

   .whatsapp-btn-new:hover {
       background: white;
       color: black;
   }

   .whatsapp-btn-new {
       background: #25D366;
       color: white;
       border-color: #25D366;
   }

   .call-action-buttons {
       flex-direction: column;
   }

   .report_price_btn {
       background-color: ghostwhite;
       font-size: 0.9em;
       padding: 0 8px;
       height: 24px;
       cursor: pointer;
   }

   /* Mobile Responsive for Call Section */
   @media (max-width: 768px) {
       .star-rating {
           font-size: 1em;
       }

       .rating-view {
           width: 100%;
       }

       .market-price-header {
           padding: 8px 16px;
       }

       .section-title {
           font-size: 18px;
       }

       .price-display {
           font-size: 22px;
       }

       .seller-logo-img {
           width: 50px;
           height: 50px;
       }

       .seller-name {
           font-size: 14px;
       }

       .best-buy-badge {
           padding: 6px 10px;
       }

       .seller-rating-row .star-sm {
           width: 10px;
           height: 10px;
       }

       .rating-value {
           font-size: 10px;
       }

       .seller-meta {
           display: inline-block;
       }

       .seller-rating-row {
           display: inline-block;
       }

       .seller-location {
           display: block;
           margin-left: 0px;
       }

       .condition-badge {
           padding: 2px 5px;
           font-size: 10px;
       }

       .call-btn-new i,
       .whatsapp-btn-new i {
           font-size: 12px;
       }

       .call-price {
           font-size: 18px !important;
       }

       .multiple_price_range {
           display: block;
           margin-top: 5px;
       }
   }

   /* Phone Display Styles */
   .phone-display {
       display: none;
       background: #f9fafb;
       padding: 8px 12px;
       border-radius: 6px;
       margin-top: 8px;
       text-align: center;
   }

   .phone-display a {
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       color: #111827;
       font-weight: 600;
       font-size: 14px;
   }

   .phone-display img {
       width: 18px;
       height: 18px;
       margin-right: 8px;
   }

   /* Variation Options - Same style as size options */
   .variation-option {
       border: 2px solid #ddd;
       border-radius: 6px;
       cursor: pointer;
       background-color: white;
       font-weight: bold;
       min-width: 80px;
       text-align: center;
       transition: all 0.3s ease;
       font-size: 14px;
       position: relative;
       padding: 8px 12px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }

   /* Hover effect */
   .variation-option:hover {
       background-color: #e9f5ff;
       border-color: #2196f3;
       color: #2196f3;
       box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
       transform: translateY(-2px);
   }

   /* Active/selected variation */
   .variation-option.active {
       background-color: #28a745;
       border-color: #218838;
       color: #fff;
       box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
       transform: scale(1.05);
   }