/* -------------------------------------------
   GLOBAL STYLING ENHANCEMENTS FOR LUXURY UI
--------------------------------------------*/

/* Reset + General */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body, p, li, button, .btn, input, label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #555;
}

button, .btn {
  border-radius: 4px !important;
}

/* Headings */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #1f1f1f;
}

p, li {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* -------------------------------------------
   BUTTON & PRICE STYLING
--------------------------------------------*/

.btn-primary {
  background-color: #d6b98c;
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: none;
  display: inline-block;
  text-align: center;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,0.15), transparent 60%);
  opacity: 0.4;
  pointer-events: none;
  border-radius: 12px;
}

.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tp-product-details-price.new-price {
  background-color: var(--primary-color);
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--tp-common-white);
  margin-bottom: 12px;
}

/* -------------------------------------------
   VIDEO OVERLAY STYLING
--------------------------------------------*/

.pb-product-gallery-thumbnail video {
  position: relative;
}

.pb-product-gallery-thumbnail:before {
  content: "";
  background: url('/storage/uploads/jewelry/icon/play-button-glossy.png') no-repeat center center;
  background-size: 48px 48px;
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
}

.video-container video {
  pointer-events: none;
}

.video-container .video-click-blocker {
  pointer-events: auto;
}

/* -------------------------------------------
   IMAGE, SLIDER, CARD POLISHING
--------------------------------------------*/

.product-image, .banner-image, .featured-box img, .tp-product-img img, .slider-image {
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card, .banner-section, .featured-box, .slider-box, .tp-product-item, .tp-product-img,
.product-loop, .product-box {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin: 16px;
  background-color: #fff;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card:hover, .featured-box:hover, .slider-box:hover, .tp-product-item:hover, .tp-product-img:hover,
.product-loop:hover, .product-box:hover, .tp-product:hover, .tp-product-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.product-box::before, .product-loop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
  z-index: 1;
  border-radius: 16px;
}

.tp-product-img img, .product-box img, .product-loop img {
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.tp-product:hover .tp-product-img img,
.product-box:hover img,
.product-loop:hover img {
  transform: scale(1.05);
}

/* SLIDER IMAGE POLISH */
.tp-banner-thumb picture,
.tp-banner-thumb img {
  border-radius: 16px;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  display: block;
  width: 100%;
}

.tp-banner-thumb:hover img {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------
   INFO TILE REFINEMENT
--------------------------------------------*/

.info-tile {
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.info-tile:hover {
  background: #fef9f3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------
   PRODUCT BOX POLISH
--------------------------------------------*/

.tp-product-item-4 {
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
  padding: 16px;
}

.tp-product-item-4:hover {
  transform: scale(1.02);
  background: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.4),
    0 0 14px rgba(255, 215, 0, 0.15),
    0 6px 24px rgba(0, 0, 0, 0.05);
}

.tp-product-item-4::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  border-radius: 16px;
}

.tp-product-item-4:hover::before {
  animation: shine 2.5s infinite ease-in-out;
  opacity: 1;
}

.tp-product-item-4 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform 0.4s ease;
}

.tp-product-item-4:hover img {
  transform: scale(1.05);
}

.tp-product-item-4::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: gold-dust 3s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 50%;
}

.tp-product-item-4:hover::after {
  opacity: 1;
}

/* -------------------------------------------
   TP BANNER THUMB POLISH
--------------------------------------------*/

.tp-banner-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.tp-banner-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.tp-banner-thumb picture,
.tp-banner-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  border-radius: 0;
}

.tp-banner-thumb:hover img {
  transform: scale(1.05);
}

/* -------------------------------------------
   GOLD DUST & SHINE KEYFRAMES
--------------------------------------------*/

@keyframes gold-dust {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.4;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.3;
  }
}

@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 768px) {
  .tp-product-item-4::after {
    display: none;
  }
}

/* -------------------------------------------
   INFO TILE REFINEMENT
--------------------------------------------*/

.info-tile {
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.info-tile:hover {
  background: #fef9f3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------
   PRODUCT BOX POLISH
--------------------------------------------*/

.tp-product-item-4 {
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
  padding: 16px;
}

.tp-product-item-4:hover {
  transform: scale(1.02);
  background: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.4),
    0 0 14px rgba(255, 215, 0, 0.15),
    0 6px 24px rgba(0, 0, 0, 0.05);
}

.tp-product-item-4::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  border-radius: 16px;
}

.tp-product-item-4:hover::before {
  animation: shine 2.5s infinite ease-in-out;
  opacity: 1;
}

.tp-product-item-4 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform 0.4s ease;
}

.tp-product-item-4:hover img {
  transform: scale(1.05);
}

.tp-product-item-4::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: gold-dust 3s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 50%;
}

.tp-product-item-4:hover::after {
  opacity: 1;
}

/* -------------------------------------------
   TP BANNER THUMB POLISH
--------------------------------------------*/

.tp-banner-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.tp-banner-thumb:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.tp-banner-thumb picture,
.tp-banner-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  border-radius: 0;
}

.tp-banner-thumb:hover img {
  transform: scale(1.05);
}

/* -------------------------------------------
   GOLD DUST & SHINE KEYFRAMES
--------------------------------------------*/

@keyframes gold-dust {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.4;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.3;
  }
}

@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 768px) {
  .tp-product-item-4::after {
    display: none;
  }
}

/* -------------------------------------------
   🌟 SPARKLE PARTICLES FOR HOVER EFFECT
--------------------------------------------*/

.tp-product-item-4 .sparkle-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.tp-product-item-4 .sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, gold 0%, transparent 80%);
  border-radius: 50%;
  animation: sparkle-rise 3s linear infinite;
  opacity: 0;
}

.tp-product-item-4:hover .sparkle:nth-child(1) {
  left: 20%;
  top: 80%;
  animation-delay: 0s;
  opacity: 1;
}

.tp-product-item-4:hover .sparkle:nth-child(2) {
  left: 50%;
  top: 85%;
  animation-delay: 1s;
  opacity: 1;
}

.tp-product-item-4:hover .sparkle:nth-child(3) {
  left: 75%;
  top: 90%;
  animation-delay: 2s;
  opacity: 1;
}

/* Sparkle Rise Animation */
@keyframes sparkle-rise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translateY(-120px) scale(1);
    opacity: 0;
  }
}

/* -------------------------------------------
   IMAGE RESET — Neutrally Styled
--------------------------------------------*/
img, picture {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background-color: unset;
}

/* -------------------------------------------
   PRODUCT CARDS — No Grey Corners
--------------------------------------------*/
.tp-product-img img,
.product-box img,
.product-loop img,
.tp-product-item-4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background-color: transparent;
}

/* -------------------------------------------
   PRODUCT CARD CONTAINERS (Rounded)
--------------------------------------------*/
.tp-product-img,
.product-box,
.product-loop,
.tp-product-item-4 {
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tp-product-img:hover,
.product-box:hover,
.product-loop:hover,
.tp-product-item-4:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------
   BANNER & STATIC SECTION IMAGES (Rounded OK)
--------------------------------------------*/
.tp-banner-thumb img,
.tp-banner-full img,
.tp-slider-area img,
.tp-about-thumb-wrapper img,
.tp-about-thumb-wrapper picture,
.tp-about-thumb-wrapper source {
  border-radius: 16px !important;
  object-fit: cover !important;
  background-color: #fff !important;
}

/* -------------------------------------------
   WRAPPER Rounding — Banners & About Section
--------------------------------------------*/
.tp-slider-area,
.tp-banner-full.tp-banner-full-height,
.tp-banner-item-4.tp-banner-height-4.fix.z-index-1,
.tp-banner-thumb,
.tp-about-thumb-wrapper.position-relative.mr-35 {
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tp-slider-area:hover,
.tp-banner-full.tp-banner-full-height:hover,
.tp-banner-item-4.tp-banner-height-4.fix.z-index-1:hover,
.tp-banner-thumb:hover,
.tp-about-thumb-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------
   RESPONSIVE FIXES
--------------------------------------------*/
@media (max-width: 768px) {
  .tp-banner-thumb,
  .tp-product-img,
  .tp-product-item-4,
  .tp-about-thumb-wrapper {
    margin: 0 12px !important;
    padding: 0 !important;
  }

  .tp-product-loop,
  .product-loop,
  .tp-product-item-4 {
    margin: 0 auto 20px;
    max-width: 95%;
  }

  .tawk-chat-container {
    bottom: 90px !important;
  }
}

/* -------------------------------------------
   SPECIFIC LAZYLOADED IMAGES (If Needed)
--------------------------------------------*/
img[data-src*="450x600"],
img.loaded {
  border-radius: 0 !important;
  object-fit: cover !important;
  background-color: transparent !important;
}

/* 🔁 Fix rounding for About Hero Image */
.tp-about-thumb-wrapper img,
.tp-about-thumb-wrapper picture,
.tp-about-thumb-wrapper source {
  border-radius: 16px !important;
  background-color: transparent !important;
  object-fit: cover !important;
  overflow: hidden !important;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  display: block;
}

.tp-about-thumb-wrapper:hover img {
  transform: scale(1.05);
}

/* 🎯 Custom Styling for "Start Your Bespoke Journey" Button */
.tp-about-content a.tp-btn {
  position: relative !important;
  background: linear-gradient(90deg, #d6b98c, #b59d7f) !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  display: inline-block !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  border: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.tp-about-content a.tp-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.3), transparent 60%);
  opacity: 0.4;
  border-radius: 12px;
  z-index: 2;
  pointer-events: none;
  transition: all 0.3s ease;
}

.tp-about-content a.tp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
  background-size: 200% 100%;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tp-about-content a.tp-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.tp-about-content a.tp-btn:hover::after {
  animation: shimmer 2.5s infinite linear;
  opacity: 1;
}

/* Button Shine Animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.tp-about-thumb-wrapper,
.tp-about-thumb-wrapper img,
.tp-about-thumb-wrapper picture,
.tp-about-thumb-wrapper source {
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: transparent !important;
  object-fit: cover !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.45s ease, box-shadow 0.45s ease !important;
}

.tp-about-thumb-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.tp-product-item-4:hover,
.tp-product-item:hover,
.tp-product:hover {
  transform: scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.4),
    0 0 14px rgba(255, 215, 0, 0.15),
    0 6px 24px rgba(0, 0, 0, 0.05);
}

/* === 🎯 Auction Card Overhaul (Scoped) === */
body.tax-product_cat-auctions .tp-product-item-4 {
  background: #f8f4ef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body.tax-product_cat-auctions .tp-product-item-4:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Image Thumbnail */
body.tax-product_cat-auctions .tp-product-thumb-4 {
  border-bottom: 1px solid #e4ddd6;
  overflow: hidden;
}

/* Content Wrapper */
body.tax-product_cat-auctions .tp-product-content-4 {
  padding: 20px 16px;
  background: #f8f4ef;
}

/* Title */
body.tax-product_cat-auctions .tp-product-title-4 a {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 18px;
  color: #2d1c16;
  text-align: center;
  display: block;
  margin-bottom: 6px;
}

/* SKU */
body.tax-product_cat-auctions .tp-product-content-4 small {
  display: block;
  font-size: 12px;
  color: #8a7055;
  text-align: center;
  margin-bottom: 14px;
}

/* --- Price capsule (the gold price) --- */
body.tax-product_cat-auctions .tp-product-price-inner-4 .tp-product-price-4.new-price {
  background: #f1ebe4;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: #2d1c16;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}

/* --- Grey bidding info box --- */
body.tax-product_cat-auctions .product__body {
  background: #f4f0eb;
  padding: 16px 12px;
  margin-top: 12px;
  border-top: 1px solid #e4ddd6;
  border-radius: 0 0 16px 16px;
  display: flex;
  justify-content: space-around;
}

/* Each Info Column (HIGHEST BID, etc.) */
body.tax-product_cat-auctions .product__body .price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Titles inside Info Columns */
body.tax-product_cat-auctions .product__body .price-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #8a7055;
}

/* Values inside Info Columns */
body.tax-product_cat-auctions .product__body .price p,
body.tax-product_cat-auctions .product__body .price-value,
body.tax-product_cat-auctions .product__body .countdown-timer .time-left {
  font-size: 14px;
  font-weight: 700;
  color: #2d1c16;
  font-family: 'Playfair Display', serif;
}
/* === 🟡 Unified Auction Product Section Styling === */

.product__details-wrapper.has-sticky {
  background: linear-gradient(to bottom, #f9f6f2, #f4efea);
  border: 1px solid #e8e1da;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  margin-top: 24px;
  margin-bottom: 40px;
  font-family: 'Playfair Display', serif;
  color: #2d1c16;
  transition: box-shadow 0.3s ease;
}

.product__details-wrapper.has-sticky:hover {
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.15),
    0 0 12px rgba(255, 215, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Header Stats (Highest Bid, Total Bids, Time Left) */
.product__body.d-flex.justify-content-between.text-center {
  background-color: transparent;
  border-bottom: 1px solid #e4ddd6;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.product__body .price-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid #e4ddd6;
  padding: 0 12px;
}

.product__body .price-item:last-child {
  border-right: none;
}

.product__body .price-title {
  font-size: 11px;
  text-transform: uppercase;
  color: #a78f78;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.product__body .price p,
.product__body .price-value,
.product__body .countdown-timer .time-left {
  font-size: 18px;
  font-weight: 700;
  color: #2d1c16;
}

/* Title */
.product__title {
  font-size: 28px;
  font-weight: 700;
  margin: 18px 0;
  color: #1f1f1f;
}

/* Description */
.product__excerpt {
  font-size: 17px;
  line-height: 1.75;
  font-style: italic;
  color: #6f5c4d;
  margin-bottom: 24px;
}

/* Price */
.tp-product-details-price.new-price {
  background: #d6b98c;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  display: inline-block;
  margin-bottom: 24px;
}

/* Meta Info (Weight, Clasp, etc.) */
.product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #444;
}

.product__meta > li {
  flex: 1 1 150px;
  list-style: none;
  background: #f1ebe4;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
  color: #7a6655;
}

/* Alert Box */
.alert.alert-danger {
  background: #fff2f2;
  color: #b33a3a;
  font-weight: 500;
  padding: 12px 16px;
  border-left: 4px solid #e99c9c;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
}

/* CTA Buttons */
.product__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product__actions .btn {
  background-color: #d6b98c;
  color: white;
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product__actions .btn:hover {
  background-color: #bfa06d;
  transform: translateY(-2px);
}

/* Tags & Share Section */
.product__tags,
.product__share {
  font-size: 13px;
  color: #888;
  margin-top: 16px;
}

.product__tags span,
.product__share span {
  font-weight: 600;
  color: #444;
}

/* Responsive Polish */
@media (max-width: 768px) {
  .product__meta {
    flex-direction: column;
    gap: 8px;
  }
  .product__body .price-item {
    border: none !important;
    padding: 8px 0;
  }
  .product__actions {
    flex-direction: column;
  }
  
  .tp-slider-area .swiper-slide {
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f6f1; /* Optional: match your site's background */
  padding: 0;
}

.tp-slider-area .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Or "contain" if you want to preserve full image */
  display: block;
  max-height: 344px; /* Your image height */
  max-width: 1200px;  /* Your image width */
  margin: 0 auto;
}
  
  /* Banner: fixed geometry + no baseline gap + kill grey bg */
.tp-banner-item-4 .tp-banner-thumb-4.include-bg {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: transparent !important;
  background-color: transparent !important;

  /* important: remove inline baseline gap issues */
  line-height: 0;

  /* give the box a consistent geometry */
  aspect-ratio: 1200 / 420;   /* adjust to your preferred look */
}

/* make the media fill the box correctly */
.tp-banner-item-4 .tp-banner-thumb-4.include-bg picture,
.tp-banner-item-4 .tp-banner-thumb-4.include-bg img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* fills, crops edges if needed */
  object-position: center center !important;
}

/* mobile can use a taller ratio if you prefer */
@media (max-width: 768px) {
  .tp-banner-item-4 .tp-banner-thumb-4.include-bg {
    aspect-ratio: 3 / 2;  /* tweak as you like */
  }
}
  
  :root { --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; }
.section { padding-block: var(--space-6); }
.container > * + * { margin-top: var(--space-5); }           /* sibling spacing */
.grid { gap: var(--space-4); }                               /* card gutters */
  
  /* === Product detail: price + stock inline (universal) === */
/* Scope to product pages only so nothing leaks elsewhere */
body.single-product,
body.product,
body.woocommerce-page.single-product {}

/* 1) Make the price pill behave like an inline container */
body.single-product .tp-product-details-price.new-price {
  display: inline-flex;
  align-items: center;
  gap: 12px;                  /* space if anything is inside the pill */
  margin-bottom: 0 !important;/* remove gap under price row */
}

/* 2) Put the stock badge immediately to the right of the price
   (handles a few common class names you’ve had on that element) */
body.single-product .tp-product-details-price.new-price + .stock-success,
body.single-product .tp-product-details-price.new-price + .gc-success,
body.single-product .tp-product-details-price.new-price + .product-stock,
body.single-product .tp-product-details-price.new-price + .badge-success {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-left: 12px;
  border-radius: 12px;
  background: #e6f9ec;
  color: #1a7a3d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

/* Optional: if your theme wraps the stock text inside a tiny  */
body.single-product .tp-product-details-price.new-price + * span {
  line-height: 1;
}

/* 3) On small screens let them wrap nicely */
@media (max-width: 480px) {
  body.single-product .tp-product-details-price.new-price {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.single-product .tp-product-details-price.new-price + .stock-success,
  body.single-product .tp-product-details-price.new-price + .gc-success,
  body.single-product .tp-product-details-price.new-price + .product-stock,
  body.single-product .tp-product-details-price.new-price + .badge-success {
    margin-left: 8px;
    padding: 5px 10px;
    font-size: 13px;
  }
}
  
.container.position-relative.pt-50.pb-50 section.tp-category-area.py-20.pb-20 {
  display: none !important;
}