/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

.product-single {
  padding: var(--space-8) 0 var(--space-8);
}

.product-single__breadcrumb {
  margin-bottom: var(--space-8);
}

/* ---- 2-spaltiges Layout ---- */
.product-single__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-bottom: var(--space-20);
}

/* ============================================================
   GALERIE – Links, sticky
   ============================================================ */

.product-single__gallery {
  position: sticky;
  top: calc(72px + var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-single__main-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.gallery-slide {
  display: none;
}

.gallery-slide.is-active {
  display: block;
}

.gallery-slide__zoom {
  display: block;
  overflow: hidden;
}

.gallery-slide img {
  width: 100%;
  aspect-ratio: 2.5 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.product-single__main-image:hover .gallery-slide.is-active img {
  transform: scale(1.1);
}

/* Pfeile */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(14, 14, 15, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--color-silver);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal), background var(--transition-fast);
  z-index: 2;
  padding: 0;
}

.product-single__main-image:hover .gallery-arrow {
  opacity: 1;
}

.gallery-arrow:hover {
  background: rgba(22, 22, 24, 0.95);
  color: var(--color-silver-light);
}

.gallery-arrow--prev { left: var(--space-3); }
.gallery-arrow--next { right: var(--space-3); }

/* Dots */
.gallery-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.gallery-dot.is-active {
  background: var(--color-silver);
  transform: scale(1.3);
}

/* Thumbnails */
.product-single__thumbs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gallery-thumb {
  width: calc(25% - var(--space-2));
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: 0;
  background: none;
  opacity: 0.5;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.gallery-thumb.is-active,
.gallery-thumb:hover {
  opacity: 1;
  border-color: var(--color-silver-dark);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-single__no-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
}

/* ============================================================
   PRODUKT INFO – Rechts
   ============================================================ */

.product-single__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

/* Kategorie */
.product-single__category {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-silver-dark);
}

/* Name */
.product-single__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--color-silver-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Rating */
.product-single__rating .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-single__rating .star-rating {
  color: var(--color-silver);
}

/* Preis */
.product-single__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-silver);
  letter-spacing: var(--tracking-wide);
}

.product-single__price del {
  color: var(--color-text-faint);
  font-size: var(--text-lg);
  margin-right: var(--space-2);
}

.product-single__price ins {
  text-decoration: none;
}

/* ============================================================
   ADD TO CART + VARIANTEN
   ============================================================ */

.product-single__cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
}

/* Simple product: Qty + Button nebeneinander */
.product-single__cart form.cart:not(.variations_form) {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-3) !important;
  align-items: stretch !important;
}

/* Variable product: alles untereinander */
.product-single__cart form.cart.variations_form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
}

/* Quantity Wrapper – simple */
.product-single__cart form.cart:not(.variations_form) .quantity {
  flex-shrink: 0 !important;
  width: 72px !important;
}

/* Quantity Input */
.product-single__cart form.cart .qty {
  width: 100% !important;
  height: 48px !important;
  text-align: center !important;
  font-size: var(--text-base) !important;
  padding: 0 var(--space-2) !important;
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Add to Cart Button – beide Typen */
.product-single__cart form.cart .single_add_to_cart_button {
  flex: 1 !important;
  height: 48px !important;
  background: var(--gradient-silver) !important;
  color: var(--color-bg) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 0 var(--space-6) !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal) !important;
}

.product-single__cart form.cart .single_add_to_cart_button:hover {
  box-shadow: var(--shadow-glow-silver) !important;
  transform: translateY(-1px) !important;
}

/* Variations-Tabelle */
.product-single__cart .variations {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-single__cart .variations tbody {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-single__cart .variations tr {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-single__cart .variations .label {
  display: block;
}

.product-single__cart .variations .label label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
  display: block;
  text-align: left;
}

.product-single__cart .variations .value {
  display: block;
  width: 100%;
}

.product-single__cart .variations select {
  width: 100%;
  font-size: var(--text-sm);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238a8a96' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color var(--transition-fast);
}

.product-single__cart .variations select:focus {
  border-color: var(--color-silver-dark);
  outline: none;
  box-shadow: 0 0 0 2px rgba(200, 200, 208, 0.08);
}

.product-single__cart .variations select:hover {
  border-color: var(--color-border-light);
}

/* Reset Link */
.product-single__cart .reset_variations {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  text-decoration: underline;
}

/* Variation Beschreibung */
.product-single__cart .woocommerce-variation-description p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Variation Preis */
.product-single__cart .woocommerce-variation-price .price {
  font-size: var(--text-xl);
  color: var(--color-silver);
}

/* Variation Quantity + Button Zeile */
.product-single__cart .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-3) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.product-single__cart .woocommerce-variation-add-to-cart .quantity {
  flex-shrink: 0 !important;
  width: 72px !important;
}

/* Stock */
.product-single__cart p.stock,
.product-single__info p.stock {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0;
}

.product-single__cart .in-stock,
.product-single__info .in-stock  { color: var(--color-success); }
.product-single__cart .out-of-stock,
.product-single__info .out-of-stock { color: var(--color-error); }

/* ---- Beschreibungen ---- */
.product-single__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

.product-single__desc p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.product-single__desc ul,
.product-single__desc ol {
  color: var(--color-text-muted);
  padding-left: var(--space-5);
}

.product-single__desc li {
  margin-bottom: var(--space-2);
}

/* ---- WooCommerce Attribut-Tabelle – Pills ---- */
.product-single__attributes {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.woocommerce-product-attributes tbody {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.woocommerce-product-attributes tr {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.woocommerce-product-attributes th {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  white-space: nowrap;
  border: none;
}

.woocommerce-product-attributes td {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  border: none;
  border-left: 1px solid var(--color-border);
}

.woocommerce-product-attributes td p {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Meta ---- */
.product-single__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.product-single__meta-row {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
}

.product-single__meta-label {
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  width: 80px;
  flex-shrink: 0;
}

.product-single__meta-value {
  color: var(--color-text-muted);
}

.product-single__meta-value a {
  color: var(--color-silver-dark);
}

.product-single__meta-value a:hover {
  color: var(--color-silver);
}

/* ============================================================
   RELATED PRODUCTS – Carousel
   ============================================================ */

.product-single__related {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

.product-single__related-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-silver-dark);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-8);
}

.product-single__related-carousel {
  overflow: visible;
}

.product-single__related ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: var(--space-6) !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  grid-template-columns: unset !important;
}

.product-single__related ul.products::-webkit-scrollbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-single__related ul.products {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-light) transparent;
    padding-bottom: var(--space-4);
  }

  .product-single__related ul.products::-webkit-scrollbar {
    display: block;
    height: 3px;
  }

  .product-single__related ul.products::-webkit-scrollbar-track {
    background: transparent;
  }

  .product-single__related ul.products::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: var(--radius-full);
  }

  .product-single__related ul.products::-webkit-scrollbar-thumb:hover {
    background: var(--color-silver-dark);
  }
}

/* Desktop: 3 sichtbar + Anschnitt der 4. */
.product-single__related ul.products li.product {
  flex: 0 0 calc((100% - (var(--space-6) * 2)) / 3 - 32px) !important;
  width: calc((100% - (var(--space-6) * 2)) / 3 - 32px) !important;
  scroll-snap-align: start;
  margin: 0 !important;
}

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

@media (max-width: 1023px) {
  .product-single__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-single__gallery {
    position: static;
  }

  /* Tablet: 2 sichtbar + Anschnitt */
  .product-single__related ul.products li.product {
    flex: 0 0 calc((100% - var(--space-6)) / 2 - 24px) !important;
    width: calc((100% - var(--space-6)) / 2 - 24px) !important;
  }
}

@media (max-width: 639px) {
  .product-single__title {
    font-size: var(--text-2xl);
  }

  .gallery-arrow {
    opacity: 1;
  }

  /* Simple product: Qty + Button bleiben nebeneinander auf Mobile */
  .product-single__cart form.cart:not(.variations_form) {
    flex-direction: row !important;
  }

  .product-single__cart form.cart:not(.variations_form) .quantity {
    width: 72px !important;
    flex-shrink: 0 !important;
  }

  /* Variable product: Qty + Button Zeile bleibt row */
  .product-single__cart .woocommerce-variation-add-to-cart {
    flex-direction: row !important;
  }

  .product-single__cart .woocommerce-variation-add-to-cart .quantity {
    width: 72px !important;
    flex-shrink: 0 !important;
  }

  .product-single__related ul.products {
    gap: 10px !important;
  }

  /* Mobile: 2 sichtbar + Peek */
  .product-single__related ul.products li.product {
    flex: 0 0 calc(50% - 15px) !important;
    width: calc(50% - 15px) !important;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-inner img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox-close {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  background: rgba(22, 22, 24, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  color: var(--color-silver);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  padding: 0;
}

.lightbox-close:hover {
  background: rgba(40, 40, 44, 0.95);
  color: var(--color-silver-light);
}

.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(22, 22, 24, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  color: var(--color-silver);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  padding: 0;
  z-index: 501;
}

.lightbox-arrow:hover {
  background: rgba(40, 40, 44, 0.95);
  color: var(--color-silver-light);
}

.lightbox-arrow--prev { left: var(--space-6); }
.lightbox-arrow--next { right: var(--space-6); }

.lightbox-counter {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Cursor beim Hover auf Bild */
.gallery-slide__zoom {
  cursor: zoom-in;
}

/* Variations-Preis im Form verstecken – wird via JS in den Original-Preis geschrieben */
.woocommerce-variation-price {
  display: none !important;
}