/* ═══════════════════════════════════════════════════════════
   Vandalierer Labs — Single Product Page
   vl-product.css  ·  v1.3.0
   Based on: design-system/woocommerce/product-prototype.html
   ═══════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────── */
.vl-page--product {
  padding-bottom: 0;
}

/* ── Breadcrumb bar ──────────────────────────────────────── */
/* Base styles in vl-global.css */
.vl-breadcrumb { max-width: 1100px; }

/* ── Product grid ────────────────────────────────────────── */
.vl-product-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
  padding: 32px 40px 60px;
  align-items: start;
}

@media (max-width: 900px) {
  .vl-product-grid { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px 40px; }
}

/* ── Gallery ─────────────────────────────────────────────── */
.vl-gallery {
  /* not sticky — scrolls with page */
}

.vl-gallery-main {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--warm-border);
  background: var(--warm-card);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
}

.vl-gallery-main-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.vl-gallery-main-inner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Badges */
.vl-gallery-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--terra);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
  text-transform: uppercase;
}

.vl-gallery-badge-sale {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #e05030;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
}

/* Thumbnails */
.vl-gallery-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vl-gallery-thumb {
  flex: 1;
  min-width: 56px;
  max-width: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1.5px solid var(--warm-border);
  background: var(--warm-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s;
  overflow: hidden;
  padding: 6px;
}

.vl-gallery-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vl-gallery-thumb.active { border-color: var(--terra); }
.vl-gallery-thumb:hover { border-color: var(--terra-pale); }

/* ── Product summary ─────────────────────────────────────── */
.vl-product-summary {}

/* Category line: "BATTERIEN · LIFEPO4" */
.vl-product-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--terra);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Product title */
.vl-product-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--bark);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

/* ── Price block ─────────────────────────────────────────── */
.vl-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.vl-price-current {
  font-family: var(--font-mono-din);
  font-size: 34px;
  font-weight: 900;
  color: var(--terra);
  line-height: 1;
}

/* When WC outputs full price HTML inside .vl-price-current */
.vl-price-current .price,
.vl-price-current .woocommerce-Price-amount {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}

.vl-price-regular {
  font-family: var(--font-mono-din);
  font-size: 16px;
  color: var(--muted-light);
  text-decoration: line-through;
}

.vl-price-saving {
  font-size: 11px;
  font-weight: 700;
  color: var(--sage-dark);
  background: var(--sage-bg);
  border: 1px solid var(--sage-border);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Variable products: hide until variation selected */
.vl-price-block--variable .vl-price-current { font-size: 22px; }

.vl-price-tax {
  font-size: 10px;
  color: var(--muted-light);
  margin-bottom: 16px;
}
.vl-price-tax a {
  color: var(--terra);
  font-weight: 600;
  text-decoration: none;
}

/* ── Short description ───────────────────────────────────── */
.vl-short-desc {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.7;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(196,99,58,.08);
}
.vl-short-desc p { margin-bottom: .5em; }
.vl-short-desc p:last-child { margin-bottom: 0; }
.vl-short-desc strong { color: var(--bark); }

/* ── Anschlussplan-Box (.aa-plan-* Plugin) ───────────────── */
/* Orientiert an "Passt zu deinem Projekt" Banner im Design-System-Prototyp */

.aa-plan-box {
  background: var(--sage-bg);
  border: 1.5px solid var(--sage-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* "Beliebte Zusatzleistung" — winzige Badge, sehr dezent */
.aa-plan-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--sage);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}

/* Label-Row: Checkbox + Inhalt */
.aa-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

.aa-plan-checkbox {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--sage-dark);
  cursor: pointer;
}

/* Span-Wrapper um Headline + Desc */
.aa-plan-row > span {
  flex: 1;
  min-width: 0;
}

/* Headline */
.aa-plan-headline {
  font-size: 12px;
  font-weight: 700;
  color: var(--sage-dark);
  line-height: 1.3;
  margin-bottom: 5px;
}

.aa-plan-headline img.emoji {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  margin-right: 2px;
}

/* Bullet-Points — inline, durch · getrennt */
.aa-plan-desc {
  font-size: 10px;
  color: var(--sage);
  line-height: 1.5;
  opacity: .85;
}

.aa-plan-desc div { display: inline; }
.aa-plan-desc div::after { content: ' · '; opacity: .5; }
.aa-plan-desc div:last-child::after { content: ''; }

.aa-plan-desc img.emoji {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

/* ── Variation Attribute Pills ───────────────────────────── */
/* Generated via PHP filter woocommerce_dropdown_variation_attribute_options_html */

.vl-variations-wrap {
  margin-bottom: 14px;
}

.vl-attr-group {
  margin-bottom: 14px;
}

.vl-attr-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.vl-attr-options {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.vl-attr-option {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--warm-border);
  background: rgba(255,255,255,.8);
  font-size: 12px;
  font-weight: 600;
  color: var(--bark);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.vl-attr-option:hover { border-color: var(--terra-pale); }

.vl-attr-option.active {
  border-color: var(--terra);
  background: rgba(196,99,58,.06);
  color: var(--terra);
}

.vl-attr-option.disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* WC renders a table.variations around the attr groups */
table.variations {
  width: 100%;
  border: none;
  border-spacing: 0;
  margin-bottom: 4px;
}

table.variations td,
table.variations th {
  padding: 0;
  border: none;
  background: none;
  vertical-align: top;
}

table.variations .label {
  padding-right: 0;
  padding-bottom: 4px;
  padding-top: 0;
}

table.variations .label label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

table.variations td.value {
  padding-bottom: 14px;
}

/* WC variation description + price */
.woocommerce-variation-description {
  font-size: 12px;
  color: var(--muted-text);
  margin-bottom: 10px;
}
.woocommerce-variation-price .price {
  font-family: var(--font-mono-din);
  font-size: 28px;
  font-weight: 900;
  color: var(--terra);
}

/* Single variation availability */
.woocommerce-variation-availability .stock {
  margin-bottom: 0;
}

/* ── Stock status ────────────────────────────────────────── */
.stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

.stock::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.in-stock { color: var(--sage-dark); }
.in-stock::before { background: var(--sage-dark); }

.out-of-stock { color: #c04030; }
.out-of-stock::before { background: #c04030; }

.available-on-backorder { color: #e08030; }
.available-on-backorder::before { background: #e08030; }

/* ── Add-to-Cart form ────────────────────────────────────── */

/* form.cart ist die flex-row: Stepper | ATC-Button nebeneinander */
form.cart,
.woocommerce div.product form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 14px;
}

/* Variationsattribute-Tabelle (table.variations) steht außerhalb → block */
form.cart table.variations {
  display: table;
  margin-bottom: 14px;
}

/* Variations-Wrapper wird selbst zur Zeile */
.woocommerce-variation-add-to-cart {
  width: 100%;
  margin-bottom: 0;
}

/* Quantity stepper — JS injects −/+ buttons around input.qty */
.vl-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--warm-border);
  border-radius: 10px;
  background: rgba(255,255,255,.85);
  overflow: hidden;
  flex-shrink: 0;
}

.vl-qty-btn {
  width: 38px;
  height: 46px;
  border: none;
  background: transparent;
  color: var(--terra);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.vl-qty-btn:hover { background: rgba(196,99,58,.07); }

.vl-qty-num,
input.qty {
  width: 44px !important;
  height: 46px !important;
  border: none !important;
  border-left: 1px solid var(--warm-border) !important;
  border-right: 1px solid var(--warm-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  font-family: var(--font-mono-din);
  font-size: 16px;
  font-weight: 900;
  color: var(--bark);
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }
input.qty:focus { outline: none; }

/* Default .quantity wrapper (WC default, before JS injects stepper) */
div.quantity {
  display: flex;
  align-items: center;
}

/* ATC Button */
.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 !important;
  height: 46px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--terra) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  box-shadow: 0 4px 16px rgba(196,99,58,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: #b3562f !important;
  box-shadow: 0 6px 20px rgba(196,99,58,.4) !important;
  color: #fff !important;
  transform: none !important;
}

.single_add_to_cart_button.loading {
  opacity: .7;
  pointer-events: none;
}

.single_add_to_cart_button.added {
  background: var(--sage-dark) !important;
  box-shadow: 0 4px 16px rgba(61,122,80,.3) !important;
}

/* Wishlist button — injected by JS after ATC button */
.vl-wishlist-btn {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid var(--warm-border);
  background: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.vl-wishlist-btn:hover { border-color: var(--terra); }

/* ── Product meta (SKU · Kategorie · Gewicht) ────────────── */
.vl-product-meta {
  font-size: 11px;
  color: var(--muted-light);
  line-height: 2;
  margin-top: 14px;
}

.vl-product-meta span,
.vl-product-meta a {
  color: var(--muted-text);
  font-weight: 600;
  text-decoration: none;
}
.vl-product-meta a:hover { color: var(--terra); }

/* ── Product Tabs ────────────────────────────────────────── */
.vl-tabs-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 60px;
}

@media (max-width: 900px) {
  .vl-tabs-wrap { padding: 0 20px 40px; }
}

/* WC tab nav */
.woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--warm-border);
}

.woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  background: none !important;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li a:hover { color: var(--terra); }

.woocommerce-tabs ul.tabs li.active a {
  color: var(--terra);
  border-bottom-color: var(--terra);
}

/* Tab panel content */
.woocommerce-Tabs-panel {
  padding: 24px 0;
  background: none;
  border: none;
}

.woocommerce-Tabs-panel h2 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--bark);
  margin-bottom: 16px;
  margin-top: 0;
}

.woocommerce-Tabs-panel--description {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.8;
  max-width: 760px;
}

.woocommerce-Tabs-panel--description p { margin-bottom: .8em; }
.woocommerce-Tabs-panel--description h3 { color: var(--bark); font-size: 16px; margin: 1.5em 0 .6em; }
.woocommerce-Tabs-panel--description strong { color: var(--bark); }
.woocommerce-Tabs-panel--description ul { padding-left: 1.5em; }
.woocommerce-Tabs-panel--description li { margin-bottom: .4em; }

/* Attributes tab — specs table */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  max-width: 640px;
  background: rgba(255,255,255,.9);
  border: 1.5px solid var(--warm-border);
  border-radius: 14px;
  overflow: hidden;
}

.woocommerce-product-attributes tr {
  border-bottom: 1px solid rgba(196,99,58,.06);
}
.woocommerce-product-attributes tr:last-child { border-bottom: none; }
.woocommerce-product-attributes tr:nth-child(even) td { background: rgba(196,99,58,.025); }

.woocommerce-product-attributes th {
  width: 38%;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
  text-align: left;
  vertical-align: top;
  background: none;
  border: none;
}

.woocommerce-product-attributes td {
  padding: 10px 14px;
  color: var(--bark);
  font-weight: 600;
  vertical-align: top;
  border: none;
}

/* Reviews tab */
.woocommerce-Reviews #reviews { padding: 0; }

.woocommerce-Reviews .commentlist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.woocommerce-Reviews .commentlist li.review {
  background: rgba(255,255,255,.9);
  border: 1.5px solid var(--warm-border);
  border-radius: 13px;
  padding: 16px 18px;
}

.woocommerce-Reviews .comment-text .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.woocommerce-Reviews .comment-text .meta strong {
  color: var(--bark);
  font-size: 14px;
}

.woocommerce-Reviews .comment-text .description {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.65;
}

.woocommerce-Reviews .comment-text .description p { margin-bottom: 0; }

/* Review form */
.woocommerce-Reviews #review_form_wrapper {
  margin-top: 32px;
  border-top: 1px solid var(--warm-border);
  padding-top: 24px;
}

/* ── Related / Upsell products ───────────────────────────── */
.vl-related-wrap {
  background: rgba(255,255,255,.6);
  border-top: 1px solid rgba(196,99,58,.08);
  padding: 40px;
}

.vl-related-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.vl-related-inner > h2,
.related > h2,
.up-sells > h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--bark);
  margin-bottom: 20px;
  margin-top: 0;
}

/* WC related products — grid wrapper only; card styles via .vl-pc in vl-archive.css */
.related,
.up-sells {
  width: 100%;
}

.related ul.products,
.up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* li.product is the WC wrapper around our .vl-pc div — reset WC defaults */
.related ul.products li.product,
.up-sells ul.products li.product {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .related ul.products,
  .up-sells ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ── WooCommerce notices (on product page) ───────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-top-color: var(--terra);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 40px 16px;
  max-width: 1100px;
  box-sizing: border-box;
}

.woocommerce-message::before { color: var(--terra); }