:root {
  --primary-color: #ffd700;
  --dark-bg: #0a0a0a;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-muted: #888;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   NAVBAR BRAND – product-details page
   Let index.css handle logo sizes/transforms.
   Only fix: prevent brand area from overflowing.
============================================= */
.navbar-brand {
  min-width: 0;
  flex-shrink: 1 !important;
  margin-right: 0 !important;
  overflow: visible;
}

/* Undo the index.css tablet margin-right:100px
   which pushes the logo off-screen on tablet */
@media (max-width: 991px) {
  .navbar-brand {
    margin-right: 0 !important;
  }
}

/* =============================================
   END – navbar brand fix
============================================= */

html,
body {
  font-family: "Bell MT", serif;
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  width: 100%;
}

/* Global img rule — but NOT for carousel images which need explicit height */
img:not(.carousel-item-img) {
  max-width: 100%;
  height: auto;
}

[class*="col-"] {
  min-width: 0;
  /* Prevent flex children from exceeding parent width */
}

h1,
h2,
h3,
.brand {
  font-family: "Bell MT", serif;
}

/* Glass Card */
.glass-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

body:not(.light-theme) .glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

/* Fixed height for the carousel container on all screen sizes */
/* .product-carousel-container {
  height: 500px !important;
  overflow: hidden !important;
  position: relative;
} */

/* Override the global img { height: auto } rule for carousel images */
/* .carousel-item-img {
  height: 100% !important;
} */

/* Product Carousel - Refined to Swap Mode */
/* .carousel-track {
  display: flex !important;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
} */

/* .carousel-item-img {
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  transition: var(--transition-smooth);
} */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  color: #000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1;
  /* Make visible by default on mobile */
}

@media (min-width: 992px) {
  .carousel-btn {
    opacity: 0;
  }

  .product-carousel-container:hover .carousel-btn {
    opacity: 1;
  }
}

.prev-btn {
  left: 15px;
}

.next-btn {
  right: 15px;
}

.carousel-btn:hover {
  background: #fff !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.indicator-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #888;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.indicator-dot.active {
  background: #333;
  opacity: 1;
  transform: scale(1.2);
}

/* Product Info styling */
.manufacturer-name {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.product-display-name {
  font-weight: 700;
  color: inherit;
}

.original-price {
  text-decoration: line-through;
  color: #aaa;
  font-size: 1.25rem;
}

.new-price {
  font-weight: 800;
  color: var(--text);
  font-size: 2rem;
}

.size-btn {
  min-width: 50px;
  width: auto;
  padding: 0 10px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid #eee;
  background: #fff;
  font-weight: 600;
  transition: var(--transition-smooth);
  white-space: normal;
  word-break: break-word;
}

.size-btn.active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.size-btn:hover:not(.active) {
  border-color: #ccc;
}

/* Delivery Section */
.delivery-section {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Payment Options */
.payment-option-card {
  cursor: pointer;
}

.payment-option-card input {
  display: none;
}

.payment-card-inner {
  padding: 12px 20px;
  border: 2px solid #eee;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: var(--transition-smooth);
  min-width: 90px;
}

.payment-option-card input:checked+.payment-card-inner {
  border-color: var(--primary-color);
  background: #fffdf0;
}

/* Container — single source of truth */
.product-carousel-container {
  height: auto;               /* Dynamic height based on aspect ratio */
  aspect-ratio: 3 / 4;        /* Matches the standard image size */
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

/* Track fills the container exactly */
.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;               /* works because parent has explicit height */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Images fill each slide slot — NO padding, no height: auto leaking in */
.carousel-item-img {
  flex: 0 0 100%;             /* flex-shrink:0 prevents squishing */
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Cover ensures no black spaces */
  object-position: top center; /* Anchor to the top to avoid headless crops */
  display: block;             /* kills the inline baseline gap */
}

/* Mobile override — only touch what changes */
@media (max-width: 991px) {
  .product-carousel-container {
    height: auto;             /* Let aspect-ratio dictate height */
  }

  /* Do NOT add padding to .carousel-item-img here */
  /* Do NOT redeclare .carousel-track on mobile — it inherits correctly */
}



/* Review Card */
.review-card {
  background: var(--panel);
  padding: 20px;
  border-radius: 15px;
  border: 1px solid var(--border);
  color: var(--text);
  transition: var(--transition-smooth);
}

body:not(.light-theme) .review-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

/* Similar Product Card */
.similar-p-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  color: var(--text) !important;
}

body:not(.light-theme) .similar-p-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px);
}

.similar-p-card:hover {
  transform: translateY(-5px);
}

.wishlist-heart-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  background: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 5;
  color: #ff4d4d;
  transition: var(--transition-smooth);
}

.wishlist-heart-overlay:hover {
  transform: scale(1.1);
  background: #ff4d4d;
  color: white;
}

.similar-p-img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
}

.wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: var(--transition-smooth);
  width: 100%;
  /* Default for mobile */
}

@media (min-width: 768px) {
  .wishlist-btn {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 50%;
    /* Circle for 'just symbol' look */
  }
}

.wishlist-btn.active {
  background-color: #ff4d4d !important;
  color: white !important;
  border-color: #ff4d4d !important;
}

.wishlist-btn.active i {
  color: white !important;
}

.wishlist-btn:hover {
  background-color: #ff4d4d !important;
  border-color: #ff4d4d !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.4);
}

.wishlist-btn:hover i {
  color: white !important;
}

/* Rating Input Styles */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.rating-input input:checked~label i::before {
  content: "\f586";
  /* bi-star-fill */
}

.star-label {
  font-size: 2rem;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0 5px;
  transition: transform 0.2s ease;
}

.star-label:hover,
.star-label:hover~.star-label {
  transform: scale(1.2);
}

.star-label i::before {
  content: "\f588";
  /* bi-star */
}

.rating-input label:hover i::before,
.rating-input label:hover~label i::before,
.rating-input input:checked~label i::before {
  color: var(--primary-color);
}

.avatar-sm {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.border-white-vanta {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.btn-accent {
  background: var(--accent);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-accent:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 61, 110, 0.3);
  color: white;
}

/* Out of Stock Diagonal Cross */
.size-btn.out-of-stock {
  position: relative;
  opacity: 0.4;
  cursor: not-allowed !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  pointer-events: none !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

.size-btn.out-of-stock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 2px;
  background: #ef4444;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 2px;
}

body:not(.light-theme) .size-btn.out-of-stock {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Custom Scrollbar Hide Utility */
.custom-scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.custom-scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Home Collection Cards Mobile Sizing Sync */
@media (max-width: 575px) {
  #best .p-img img {
    height: 250px !important;
  }
}