/* 🌐 General Link Styling */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 🎨 Light Mode Background (default) - APPLIED TO BODY */
.puppy-page {
  background-image: url("../imgs/PuppyInBleu-Artist Page Background.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 🎨 Dark Mode Background - will be activated when dark mode is enabled */
.puppy-page.dark-mode {
  background-image: url("../imgs/PuppyInBleu-Artist Page Background_dark.png") !important;
}

/* Make sure the container doesn't have its own background */
.puppy-page .container {
  background: transparent !important;
}

a {
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 🖼️ Gallery Intro Section */
.gallery-intro {
  text-align: center;
  margin: clamp(1rem, 5vw, var(--space-md)) 0;
  padding: 0 clamp(1rem, 3vw, 20px);
  margin-top: max(
    clamp(0.5rem, 5vw, var(--space-xl)),
    env(safe-area-inset-top)
  );
}

.gallery-intro h1 {
  font-size: clamp(2.1rem, 6vw, 5rem);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.gallery-intro .subtitle {
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(1.5rem, 3vw, 4rem);
  color: #000;
  text-shadow: rgb(204, 204, 204) 1px 0px 1px, rgb(238, 238, 238) 0px 1px 1px,
    rgb(204, 204, 204) 2px 1px 1px, rgb(238, 238, 238) 1px 2px 1px,
    rgb(204, 204, 204) 3px 2px 1px, rgb(238, 238, 238) 2px 3px 1px,
    rgb(204, 204, 204) 4px 3px 1px, rgb(238, 238, 238) 3px 4px 1px,
    rgb(204, 204, 204) 5px 4px 1px, rgb(238, 238, 238) 4px 5px 1px,
    rgb(204, 204, 204) 6px 5px 1px, rgb(238, 238, 238) 5px 6px 1px,
    rgb(204, 204, 204) 7px 6px 1px;
  margin-top: var(--space-md);
  opacity: 0;
  animation: StretchIn 2s ease-in-out forwards 1;
  animation-delay: 2s;
}

/* Title with Animations */

.TitleText {
  color: var(--color-primary);
  text-shadow: rgb(255, 255, 255) 0px -1px 0px, rgb(46, 46, 46) 0px 1px 0px,
    rgb(44, 44, 44) 0px 2px 0px, rgb(42, 42, 42) 0px 3px 0px,
    rgb(40, 40, 40) 0px 4px 0px, rgb(38, 38, 38) 0px 5px 0px,
    rgb(36, 36, 36) 0px 6px 0px, rgb(34, 34, 34) 0px 7px 0px,
    rgb(32, 32, 32) 0px 8px 0px, rgb(30, 30, 30) 0px 9px 0px,
    rgb(28, 28, 28) 0px 10px 0px, rgb(26, 26, 26) 0px 11px 0px,
    rgb(24, 24, 24) 0px 12px 0px, rgb(22, 22, 22) 0px 13px 0px,
    rgb(20, 20, 20) 0px 14px 0px, rgb(18, 18, 18) 0px 15px 0px,
    rgba(0, 0, 0, 0.9) 0px 22px 30px;
  opacity: 0;
  animation: StretchOut 3s ease-out forwards 1;
  animation-delay: 1s;
}

@keyframes StretchOut {
  0% {
    letter-spacing: -17px;
    opacity: 0;
  }
  30% {
    letter-spacing: 4px;
    opacity: 1;
  }
  100% {
    letter-spacing: 4px;
    opacity: 1;
  }
}

@keyframes StretchIn {
  0% {
    letter-spacing: 17px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: 4px;
    opacity: 1;
  }
}

/* ===============================
   UPDATED GALLERY SECTIONS - MATCHING "OUR STICKERS"
   =============================== */

/* Gallery Container */
.products-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Grid Layout - MATCHING OUR-STICKERS */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Gallery Item - MATCHING OUR-STICKERS */
.gallery-item {
  position: relative;
  cursor: pointer;
  width: 100%;
}

/* Grid Box - MATCHING OUR-STICKERS */
.grid-box {
  background: var(--card-bg, white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Image Container - MATCHING OUR-STICKERS */
.product-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--image-bg, #f8f9fa);
  display: block;
}

/* Text content - MATCHING OUR-STICKERS */
.grid-title {
  padding: 1rem;
  font-weight: 600;
  color: var(--text-color, #333);
  text-align: center;
  font-size: 1rem;
  margin-top: auto;
}

.grid-price {
  padding: 0 1rem 1rem;
  font-weight: 700;
  color: var(--accent-color, #7b1fa2);
  text-align: center;
  font-size: 1.2rem;
}

/* ====== CRITICAL OVERLAY STYLES ====== */

/* Overlay - START HIDDEN by default */
.carousel-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

/* DESKTOP: Pure CSS hover behavior */
@media (min-width: 769px) {
  .gallery-item:hover .carousel-hover-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .gallery-item:hover .grid-box {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }

  /* Don't show touch-active on desktop */
  .gallery-item.touch-active .carousel-hover-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* MOBILE: JavaScript-controlled behavior */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
  }

  /* Only show overlay when JavaScript adds touch-active class */
  .gallery-item.touch-active .carousel-hover-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
  }

  .gallery-item.touch-active .grid-box {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 20;
  }

  /* Make sure gallery items stack properly */
  .gallery-item {
    z-index: 1;
  }

  .gallery-item.touch-active {
    z-index: 10;
  }
}

/* ====== CART CONTROLS ====== */

.hover-cart-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  width: 100%;
  max-width: 250px;
}

/* Quantity selector */
.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  padding: 5px 10px;
}

.quantity-btn {
  background: #000;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background: var(--accent-color, #7b1fa2);
  transform: scale(1.1);
}

.quantity-input {
  width: 40px;
  height: 30px;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color, #333);
  background: transparent;
  -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input.quantity-updated {
  animation: quantityPulse 0.3s ease;
}

@keyframes quantityPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Add to cart button */
.hover-add-to-cart-btn {
  background: var(--accent-color, #8a2be2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.hover-add-to-cart-btn:hover {
  background: var(--accent-hover, #7b1fa2);
  transform: translateY(-2px);
}

.hover-add-to-cart-btn.added {
  background: #10b981 !important;
  animation: buttonPulse 0.5s ease;
}

.hover-add-to-cart-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* ====== DARK MODE ====== */

body.dark-mode .grid-box {
  background: #2d2d2d;
}

body.dark-mode .grid-title {
  color: #f0f0f0;
}

body.dark-mode .grid-price {
  color: #b57edc;
}

body.dark-mode .product-image {
  background: #3d3d3d;
}

body.dark-mode .quantity-selector {
  background: rgba(45, 45, 45, 0.9);
}

body.dark-mode .quantity-input {
  color: #f0f0f0;
}

/* ====== RESPONSIVE ADJUSTMENTS ====== */

@media (max-width: 768px) {
  .quantity-btn,
  .hover-add-to-cart-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .hover-add-to-cart-btn {
    padding: 14px 20px;
    font-size: 1rem;
  }

  .product-image-container {
    height: 180px;
  }

  .subtitle {
    white-space: normal !important;
  }
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(106, 13, 173, 0.2);
  border-radius: 50%;
  border-top-color: #8a2be2;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
.error-state {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 0, 0, 0.05);
  border-radius: 10px;
  margin: 2rem;
  border: 2px solid rgba(255, 0, 0, 0.1);
}

.error-state i {
  font-size: 3rem;
  color: #ff4757;
  margin-bottom: 1rem;
}

.retry-btn {
  margin-top: 1rem;
  padding: 12px 25px;
  background: linear-gradient(135deg, #8a2be2 0%, #6a0dad 100%);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(138, 43, 226, 0.3);
}

/* No Products Message */
.no-products-message {
  text-align: center;
  padding: 80px 20px;
  color: #666;
}

.no-products-message i {
  font-size: 4rem;
  color: #8a2be2;
  margin-bottom: 20px;
}

body.dark-mode .no-products-message {
  color: #aaa;
}

/* Add to Cart Confirmation Styles */
.puppy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #8a2be2;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform: translateX(400px);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  max-width: 300px;
}

.puppy-notification.show {
  transform: translateX(0);
}

/* Info Message */
.info-message {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1565c0;
  padding: 20px;
  border-radius: 12px;
  margin: 30px auto;
  text-align: center;
  max-width: 800px;
  border-left: 5px solid #2196f3;
  font-weight: 500;
}

body.dark-mode .info-message {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
  color: white;
}

/* Touch device support - fallback */
@media (hover: none) and (pointer: coarse) {
  .gallery-item:hover {
    transform: none;
  }

  .gallery-item:hover .product-image-container img {
    transform: none;
  }
}

/* Remove old conflicting styles */
.hover-swap,
.hover-text,
.hover-button {
  display: none !important;
}