/* ============================================================
   DTF Joker — Product Page Styles (design-fixes.md §4.4)
   ============================================================ */

/* Product main layout — 2-column grid.
   Left column (image + bullets + description) is capped; the purchase column takes
   the rest, so it is the WIDER of the two (~600px), which fills the order area
   instead of a cramped rail. `align-items: start` keeps the two columns at
   independent heights — the description can grow to any length and simply lengthens
   its own column without opening a gap or affecting the purchase column. */
.single-product .dtf-product-main {
  max-width: var(--container);
  margin: 70px auto 80px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 64px;
  align-items: start;
}

/* ----- Left column ----- */

/* Left column is a clean vertical stack (gallery, bullets, delivery, description).
   min-width: 0 lets it shrink inside the grid so a wide child in the description
   (image, table, long URL) can never push the column past its track. */
.single-product .dtf-product-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ----- In-column product description (moved out of the tabs) ----- */
.single-product .dtf-product-description {
  margin-top: 44px;
  min-width: 0;
  color: var(--color-text);
  line-height: 1.7;
}
.single-product .dtf-product-description__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 16px;
}
.single-product .dtf-product-description h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
}
.single-product .dtf-product-description h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 8px;
}
.single-product .dtf-product-description p {
  margin: 0 0 16px;
}
.single-product .dtf-product-description ul,
.single-product .dtf-product-description ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.single-product .dtf-product-description li {
  margin-bottom: 6px;
}
.single-product .dtf-product-description a {
  color: var(--color-primary);
  text-decoration: underline;
}
/* Graceful with any pasted content: media and wide blocks stay inside the column. */
.single-product .dtf-product-description img {
  max-width: 100%;
  height: auto;
}
.single-product .dtf-product-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.single-product .dtf-product-description pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Product title — rendered by Astra inside the summary (right column). Sized
   below --fs-h1: it sits in the ~480px purchase column, not across the page, so
   the full h1 size would wrap the longer names ("DTF Bogenware 570 x 500mm")
   onto three lines. */
.single-product .product_title {
  font-size: 34px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.2;
}

/* Category eyebrow above the title (Astra's .single-product-category). */
.single-product .single-product-category {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.single-product .single-product-category a {
  color: inherit;
  text-decoration: none;
}

/* Hide the redundant "Kategorie:" line in the meta (shown as eyebrow already). */
.single-product .product_meta .posted_in {
  display: none;
}

/* Product gallery — white card. Override WooCommerce's default float/48%
   width so it fills the left column of our custom grid instead of squishing
   to ~290px and letting the bullets wrap beside it. */
.single-product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  margin: 0 0 24px;
  position: relative;
}

.single-product .woocommerce-product-gallery img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* Zoom trigger */
.single-product .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-size: 14px;
}

/* Short description. `.dtf-product-description` used to be listed here too; no
   template has ever emitted it. WooCommerce's own class is the live one. */
.single-product .woocommerce-product-details__short-description h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 12px;
}

.single-product .woocommerce-product-details__short-description p {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: var(--measure);
  margin-bottom: 16px;
}

/* Green checkmark bullets (§4.4) */
.single-product .dtf-product-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.single-product .dtf-product-bullets li {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
}

.single-product .dtf-product-bullets li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* Delivery / stock (§4.4) */
.single-product .dtf-delivery-info {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.single-product .dtf-instock {
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--fs-meta);
}

/* ----- Right column: purchase panel -----
   NOT sticky. Sticky made sense when this was a short 440px rail, but the purchase
   column now holds the upload zone + Mengenrabatt table + cart and is taller than the
   viewport, so a sticky top just pinned it and made the card feel like a second,
   stuttering scroll region. Leaving it in normal flow scrolls the whole page as one. */
.single-product .dtf-product-right {
  position: static;
}

/* ----- Mengenrabatt table -----
   The markup comes from DTF_Pricing (a .dtf-tier-table inside .dtf-pricing-tiers)
   and the plugin's product.css styles the table itself; these rules size it for the
   product page. They used to live in main.css only, which is why they are here now:
   two same-specificity rules cascade PER PROPERTY, so main.css's padding/font-size
   survived even though product-page.css "won" the selector. Delete one copy and the
   properties the other never re-declared vanish with it. */
.single-product .dtf-pricing-tiers {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 16px;
}

.single-product .dtf-pricing-tiers th,
.single-product .dtf-pricing-tiers td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-soft);
}

.single-product .dtf-pricing-tiers thead tr {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.single-product .dtf-pricing-tiers thead th {
  font-weight: 700;
  font-size: 16px;
}

/* Main summary price — scoped to p.price so it does NOT also enlarge the
   .woocommerce-Price-amount spans inside the discount-tier table. */
.single-product p.price,
.single-product p.price .woocommerce-Price-amount {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  margin-bottom: 22px !important;
}

.single-product p.price del,
.single-product p.price del .woocommerce-Price-amount {
  color: var(--color-text-light) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}

/* Quantity + Add to cart (§4.4). `.dtf-cart-row` was listed here as well and is
   never emitted — WooCommerce renders the form as `form.cart`. */
.single-product .cart {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.single-product .quantity .qty {
  width: 64px;
  height: 56px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 17px;
  font-family: var(--font-body);
  background: #fff;
}

/* Add-to-cart button — matches the site button system (primary pink + glow).
   !important is needed to beat Astra's high-specificity WC button selector. */
.single_add_to_cart_button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 18px 34px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.28) !important;
  flex: 1;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

.single_add_to_cart_button:hover {
  background: var(--color-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4) !important;
  transform: translateY(-2px);
}

/* Payment badges (§4.4) */
.single-product .dtf-payment-icons {
  margin-top: 24px;
}

.single-product .dtf-payment-icons h4 {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

/* The brand marks themselves (.dtf-paymarks) are in main.css — the site footer
   uses them too, so they cannot live in a product-only stylesheet. */

/* ----- Tabs (§4.4: underline-style) ----- */
.woocommerce-tabs {
  max-width: var(--container);
  margin: 0 auto 80px;
  padding: 0 24px;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  border: none;
  border-bottom: 2px solid var(--color-border);
  background: transparent;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  gap: 0;
}

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

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 24px;
  font-size: var(--fs-nav);
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--color-primary) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-primary) !important;
}

/* Tab panel (white panel, padding 40-48px). 1080px to match .dtf-content-page (the
   legal/info pages) so the product description fills the same measure and the site
   reads consistently; left-aligned at the container edge like the gallery, summary
   and related-products below it. */
.woocommerce-Tabs-panel {
  border: none;
  padding: 40px 0;
  background: #fff;
  max-width: 1080px;
  margin: 0 0 20px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}

.woocommerce-Tabs-panel h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 16px;
}

.woocommerce-Tabs-panel h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 8px;
}

/* Related products */
.related.products {
  max-width: var(--container);
  margin: 0 auto 80px;
  padding: 0 24px;
}

.related.products h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 28px;
}

/* The related-products grid. Its responsive collapse (2-up, then 1-up) is grouped
   with the other product grids in main.css, since the shop archive shares it. */
.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Upload error / success messages */
.single-product .woocommerce-error {
  background: #fff5f5;
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: var(--fs-meta);
}

.single-product .woocommerce-message {
  background: #f0fff4;
  border-left: 3px solid var(--color-success);
  color: var(--color-text);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: var(--fs-meta);
}

/* Hide breadcrumb (Bug #4 — also removed via PHP, this is a CSS backup) */
.woocommerce-breadcrumb { display: none !important; }

/* ----- Responsive -----
   The related-products grid collapses HERE, not in main.css. A media query adds no
   specificity, so main.css's `@media … { .related.products ul.products { 1fr } }`
   loses to the unqualified base rule in this file simply because this file loads
   later — the related products stayed 4-up and squeezed to 54px columns on a phone.
   Keep a grid's base rule and its breakpoints in the same stylesheet. */
@media (max-width: 1024px) {
  .single-product .dtf-product-main {
    grid-template-columns: minmax(0, 440px) 1fr;
    gap: 40px;
  }

  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* minmax(0, 1fr), NOT 1fr. A bare `1fr` is minmax(auto, 1fr), and `auto`
     resolves to the column's MIN-CONTENT — so any child that cannot shrink (here
     the Mengenrabatt table, whose three headers total ~348px) pushes the column
     wider than the phone and scrolls the whole page sideways. minmax(0, …) lets
     the column shrink and keeps the overflow inside the child that caused it. */
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Single column on phones, but the buy section must come BEFORE the long
     description (otherwise the cart is buried below it). The description lives inside
     .dtf-product-left for the desktop layout, so we flatten that wrapper with
     display:contents and reorder: gallery/bullets/delivery (1) -> purchase column (2)
     -> description (3). gap:0 keeps the flattened bullets/delivery at their own natural
     spacing; the two seams that need air get an explicit margin-top. */
  .single-product .dtf-product-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
  }
  .single-product .dtf-product-left {
    display: contents;
  }
  .single-product .dtf-product-left > * {
    order: 1;
  }
  .single-product .dtf-product-right {
    order: 2;
    margin-top: 32px;
  }
  .single-product .dtf-product-left > .dtf-product-description {
    order: 3;
    margin-top: 36px;
  }

  /* Same table, made to fit rather than merely contained: at the desktop 16px
     with 18px cell padding its min-content is 349px against ~294px of usable
     width on a 390px phone. */
  .single-product .dtf-pricing-tiers {
    font-size: 15px;
  }

  .single-product .dtf-pricing-tiers th,
  .single-product .dtf-pricing-tiers td {
    padding: 12px 8px;
  }

  /* Not `.dtf-product-left .product_title` — Astra renders the title in the
     RIGHT column, so that selector matched nothing and the mobile title never
     scaled down. */
  .single-product .product_title {
    font-size: 28px;
  }

  .single-product .woocommerce-product-gallery {
    padding: 16px;
  }

  .single_add_to_cart_button {
    padding: 16px 24px !important;
    font-size: 17px !important;
    width: 100%;
  }

  .single-product .quantity .qty {
    width: 100%;
  }

  .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
    border-bottom: none;
  }

  .woocommerce-tabs ul.tabs li {
    flex: 0 0 50%;
    border-bottom: 2px solid var(--color-border) !important;
    margin-bottom: 0 !important;
  }

  .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid var(--color-primary) !important;
  }

  .woocommerce-Tabs-panel {
    padding: 24px 0;
  }
}

@media (max-width: 480px) {
  .related.products ul.products {
    grid-template-columns: 1fr;
  }
}