/* ===========================
   Karshika – Product Page CSS
   (keeps your palette; improves gallery fit + zoom)
   =========================== */

/* General Body Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f9f9f9;
}

/* Theme Colors */
:root {
  --primary-color: #FA4B2E;
  --secondary-color: #FF7C36;
  --gray-dark: #343a40;
  --gray-medium: #6c757d;
  --gray-light: #f8f9fa;
}

/* Breadcrumbs & Tags Section */
.breadcrumb-main-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.breadcrumb-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrumb-scroll-wrapper::-webkit-scrollbar { display: none; }
.category-tags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-bottom: 0;
}
.category-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.category-tag:hover {
  border-color: var(--secondary-color);
  background-color: #fff7f2;
  color: var(--primary-color);
}
.breadcrumb {
  font-size: 0.8rem;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.breadcrumb-item a { color: #6c757d; text-decoration: none; }
.breadcrumb-item.active { color: var(--primary-color); font-weight: 600; }

/* Product Page Specific Styles */
.product-container {
  display: flex;
  gap: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ====== Gallery (updated) ====== */
.image-gallery{
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

/* Thumbnails rail */
.thumbnails{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;     /* scroll if many */
  overflow: auto;
  padding-right: 2px;
}

/* Square thumbnails with clean crop */
.thumbnail{
  width: 86px;
  aspect-ratio: 1 / 1;   /* perfect square */
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #f8f8f8;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.thumbnail:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.thumbnail.active{
  border-color: var(--primary-color);
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Main image frame with stable aspect + zoom icon */
.main-image{
  position: relative;
  flex: 1 1 auto;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg,#fafafa,#f5f5f5);
  border: 1px solid #e0e0e0;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  cursor: zoom-in;
}

/* Aspect ratio placeholder (change 4/3 to 16/9 or 1/1 if needed) */
.main-image::before{
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* ===== Default: show entire image (centered, no overflow) ===== */
.main-image img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);       /* perfect centering */
  max-width: 100%;
  max-height: 100%;
  width: auto;                             /* keep natural proportion */
  height: auto;
  object-fit: contain;                     /* never crop */
  object-position: center;
  border-radius: 12px;
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
  background: #fff;                        /* nice letterbox color */
}

/* Zoom icon overlay (Font Awesome 5 required) */
.main-image::after{
  content: "\f00e";                        /* search-plus */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 20px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background .25s ease;
}

@media (hover:hover){
  /* Subtle zoom for contain mode (keeps image inside frame) */
  .main-image:hover img{ transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.03); }
  .main-image:hover::after{ background: rgba(0,0,0,0.75); }
}

/* ===== Optional: cover mode (crop to fill, stronger zoom) ===== */
/* Add class="main-image cover" in HTML if you want the old cropped style */
.main-image.cover img{
  top: 0; left: 0;                         /* reset centering */
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;                       /* fills box, may crop */
  object-position: center;
  background: transparent;
}

@media (hover:hover){
  .main-image.cover:hover img{ transform: scale(1.15); filter: brightness(1.05); }
}

/* Existing video rules preserved */
.video-thumbnail{
  position: relative;
  cursor: pointer;
  background-size: cover;
}
.video-thumbnail::after{
  content: "\f144";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* Legacy zoomed class support (if used elsewhere) */
.main-image.zoomed img{
  transform-origin: var(--zoom-x) var(--zoom-y);
  transform: scale(2);
}
.main-image iframe{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: none;
}

/* Product details */
.product-details { flex: 1; display: flex; flex-direction: column; }
.product-info-top { flex-grow: 1; }
.main-product-title { font-size: 26px; color: #333; margin-bottom: 10px; }
.price-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.price { font-size: 22px; color: #008060; font-weight: 700; }
.date-box {
  background: #f0f2f5; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; color: #555;
  border: 1px solid #e0e0e0; display: inline-flex; align-items: center; gap: 6px;
}
.location { display: flex; align-items: center; gap: 8px; color: #666; margin-bottom: 15px; font-size: 16px; }
.location i { color: var(--primary-color); }
.description-heading { font-weight: 700; margin-bottom: 8px; color: #333; font-size: 16px; }
.description-text { color: #666; line-height: 1.5; margin-bottom: 20px; font-size: 15px; }
.button-group { display: flex; gap: 15px; margin-bottom: 20px; }
.main-enquiry-btn {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  color: #fff !important; border: none; padding: 12px; border-radius: 8px;
  font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; flex-grow: 1;
  transition: all 0.3s ease;
}
.main-enquiry-btn:hover { opacity: .9; transform: translateY(-2px); }
.share-btn { background: #f5f5f5; padding: 12px; border: 1px solid #e0e0e0; cursor: pointer; border-radius: 8px; width: 50px; }
.share-btn i { font-size: 1.2em; }

/* Seller box */
.seller-box {
  border: 1px solid #e0e0e0; padding: 15px; border-radius: 15px; background-color: var(--gray-light);
}
.seller-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.seller-header a { font-weight: 700; color: #333; font-size: 16px; text-decoration: none; }
.verified-badge {
  display: inline-flex; align-items: center; gap: 5px; background-color: #e6f7ff; color: #1890ff;
  border: 1px solid #91d5ff; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
}
.verified-badge .fa-check-circle { font-size: 0.8rem; }
.seller-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; }
.seller-logo { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.seller-details { flex-grow: 1; }
.seller-address { color: #666; line-height: 1.4; font-size: 14px; }
.seller-gst { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.9rem; color: #555; }
.copy-gst-btn { background: transparent; border: none; cursor: pointer; color: var(--gray-dark); padding: 0; font-size: 1rem; }
.copy-feedback { font-size: 0.8rem; color: green; font-weight: bold; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear; }
.copy-feedback.show { visibility: visible; opacity: 1; }
.seller-actions { display: flex; gap: 10px; align-items: center; }
.call-button { border: 1.5px solid var(--gray-medium); color: var(--gray-dark); border-radius: 8px; padding: 6px 12px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 8px; }
.whatsapp-btn { color: #25D366; font-size: 2rem; }

/* Image Lightbox Modal (unchanged) */
.image-lightbox {
  display: none; position: fixed; z-index: 1060; left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center;
}
.image-lightbox.show { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 85vh; }
.lightbox-content img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold;
  transition: 0.3s; cursor: pointer;
}
.lightbox-nav {
  cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px;
  color: white; font-weight: bold; font-size: 2rem; transition: 0.6s ease; border-radius: 0 3px 3px 0;
  user-select: none; -webkit-user-select: none;
}
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox-nav:hover { background-color: rgba(0,0,0,0.8); }
.lightbox-counter { color: #ccc; font-size: 1rem; padding: 8px 12px; position: absolute; top: 15px; left: 15px; }

/* Standardized Product Card Styles (unchanged) */
.product-listings { padding: 2rem 0; }
.product-listings h3.section-heading {
  font-weight: 600; color: #2d3954; position: relative; padding-bottom: 0.5rem; margin-bottom: 1.5rem;
}
.product-listings h3.section-heading:after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.product-card {
  background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: visible; transition: all 0.3s ease; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.product-card .card-image { width: 100%; padding-top: 75%; position: relative; overflow: hidden; }
.product-card .card-image img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;
}
.product-card:hover .card-image img { transform: scale(1.05); }
.product-card .card-body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; }
.product-card .product-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; flex-grow: 1; }
.product-card .product-price { color: #008060; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
.product-card .product-price-contact { color: #555; font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; }
.product-card .product-location { font-size: 0.85rem; color: #666; display: flex; align-items: center; gap: 5px; margin-bottom: 0.75rem; }
.product-card .product-seller { font-size: 0.8rem; color: #888; display: flex; align-items: center; gap: 5px; }
.product-card .product-card-footer { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; }
.product-carousel-wrapper { overflow: hidden; padding: 10px 5px; }
.product-carousel {
  display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin: -10px -5px;
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel .product-col { flex: 0 0 calc(25% - 0.75rem); padding: 10px 5px; }
@media (max-width: 992px){ .product-carousel .product-col { flex: 0 0 calc(50% - 0.5rem); } }
@media (max-width: 576px){ .product-carousel .product-col { flex: 0 0 80%; } }

/* Post Requirement Banner */
.post-ad-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('assets/images/cover/sell-background.webp') center/cover;
  border-radius: 15px; padding: 40px; margin: 2rem auto; max-width: 1200px; text-align: center; color: white;
}
.post-ad-content h2 { font-size: 2.2rem; font-weight: 700; }
.cta-button {
  background: #ffffff; color: var(--primary-color); padding: 12px 30px; border-radius: 25px; border: none;
  font-weight: bold; cursor: pointer; transition: all 0.3s ease;
}
.cta-button:hover { transform: scale(1.05); }

/* Recommended Categories Carousel */
.category-carousel-section { padding: 2rem 0; }
.category-carousel-section .section-heading:after { display: none; }
.category-carousel-wrapper { overflow: hidden; }
.category-carousel {
  display: flex; gap: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 1rem;
}
.category-carousel::-webkit-scrollbar { display: none; }
.category-card-horizontal {
  flex: 0 0 280px; display: flex; align-items: center; gap: 15px; background: #fff; padding: 15px;
  border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); text-decoration: none; color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card-horizontal:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.category-card-horizontal .category-image { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.category-card-horizontal .category-image img { width: 100%; height: 100%; object-fit: cover; }
.category-card-horizontal .category-info { text-align: left; }
.category-card-horizontal .category-title { font-size: 1rem; font-weight: 600; margin: 0 0 5px; }
.category-card-horizontal .category-count { font-size: 0.85rem; color: var(--gray-medium); }

/* SEO Keywords Section */
.seo-keywords-section { padding: 2rem 0; }
.keyword-pill {
  display: inline-block; padding: 0.4rem 1rem; border: 1px solid #ddd; border-radius: 20px;
  font-size: 0.85rem; color: #555; text-decoration: none; transition: all 0.2s ease;
}
.keyword-pill:hover {
  border-color: var(--secondary-color); background-color: #fff7f2; color: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 991px){
  .product-container { flex-direction: column; padding: 15px; }
}
@media (max-width: 768px){
  .breadcrumb-main-container { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .breadcrumb-scroll-wrapper { width: 100%; }

  .image-gallery { flex-direction: column; }
  .thumbnails { flex-direction: row; max-height: none; overflow: auto; }
  .thumbnail { width: 70px; }
  .main-image::before { aspect-ratio: 4 / 3; }

  .main-product-title { font-size: 24px; }
  .price { font-size: 24px; }
  .button-group { flex-direction: row; gap: 10px; }
  .main-enquiry-btn { flex-grow: 1; width: auto; }
  .share-btn { width: 60px; flex-shrink: 0; }
  .seller-info { flex-wrap: wrap; }
  .call-button { flex-grow: 1; justify-content: center; margin-top: 10px; }
}