/* ===================================================================
   StaplerteileDirekt — PDP Facelift Overlay
   Sachlich + clean + modern. Mobile-First.
   Erweitert das Default-Theme NUR mit CSS — keine Twig-Strukturänderungen.
   2026-05-16
   =================================================================== */

:root {
  --std-orange: #EF7F01;
  --std-orange-600: #D86F00;
  --std-orange-50: #FFF4E6;
  --std-ink: #0E0E0E;
  --std-ink-2: #2A2A2A;
  --std-ink-3: #555;
  --std-ink-4: #8a8a8a;
  --std-line: #E6E6E6;
  --std-line-2: #F0F0F0;
  --std-bg: #FAFAF8;
  --std-green: #00A859;
  --std-red: #E2412C;
  --std-radius: 6px;
}

/* ============== Typography ============== */
.product-detail h1,
.product-detail .product-detail-name { font-weight: 800 !important; letter-spacing: -0.025em !important; line-height: 1.1 !important; color: var(--std-ink) !important; }
@media (min-width: 992px) { .product-detail h1 { font-size: 38px !important; } }
@media (max-width: 991px) { .product-detail h1 { font-size: 26px !important; } }

.product-detail .product-detail-ordernumber-container,
.product-detail .product-detail-ordernumber,
.product-detail .product-detail-manufacturer { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: var(--std-ink-3) !important; }
.product-detail .product-detail-ordernumber b { color: var(--std-ink) !important; font-weight: 700 !important; }

/* ============== Gallery — minimal-invasiv ============== */
/* Container nur dezent stylen, niemals Bild beeinflussen */
.product-detail-media .gallery-slider-container { background: #fff; border: 1px solid var(--std-line); border-radius: var(--std-radius); padding: 16px; }
.product-detail-media .gallery-slider-container .img-fluid { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* Shopware-Magnifier-Side-Pane abschalten */
.magnifier-zoom-image-container .zoom-modal-wrapper { display: none !important; }
.js-magnifier-container .magnifier-content { display: none !important; }
/* removed 2026-05-17: hid main product image too. Magnifier-Side-Pane wird via magnifier-zoom-image-container abgeschaltet. */

/* Default-Lightbox dunkler Backdrop */
.zoom-modal { background: rgba(0,0,0,.88) !important; }
.zoom-modal .modal-content,
.zoom-modal .modal-body,
.zoom-modal .modal-dialog { background: transparent !important; border: none !important; box-shadow: none !important; }
.zoom-modal .zoom-modal-action-container button,
.zoom-modal .image-zoom-control button { color: #fff !important; }

/* Thumbs */
.product-detail .gallery-slider-thumbnails-container .gallery-slider-thumbnails-item {
  border-radius: var(--std-radius) !important;
  border: 1px solid var(--std-line) !important;
}
.product-detail .gallery-slider-thumbnails-container .gallery-slider-thumbnails-item.is-active {
  border: 2px solid var(--std-ink) !important;
}

/* ============== Buy-Box: Price + CTAs ============== */
.product-detail-price,
.product-detail-buy .product-detail-price-container { font-size: 44px !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: var(--std-ink) !important; line-height: 1.1 !important; }
@media (max-width: 575px) { .product-detail-price { font-size: 32px !important; } }

.product-detail-buy .product-detail-price-additional,
.product-detail .product-detail-price-tax-container { font-size: 13px !important; color: var(--std-ink-3) !important; }

/* Primary CTA (Add to Cart) */
.product-detail-buy .btn-primary,
.product-detail-buy-button { background: var(--std-orange) !important; border: 1px solid var(--std-orange) !important; border-radius: var(--std-radius) !important; font-weight: 700 !important; height: 54px !important; font-size: 15px !important; letter-spacing: 0.01em !important; transition: background-color .15s ease, transform .1s ease, box-shadow .1s ease !important; }
.product-detail-buy .btn-primary:hover,
.product-detail-buy-button:hover { background: var(--std-orange-600) !important; border-color: var(--std-orange-600) !important; transform: translateY(-1px); }

/* Wishlist-Icon */
.product-detail-buy .product-wishlist,
.product-wishlist-action { border: 1px solid var(--std-line) !important; border-radius: var(--std-radius) !important; height: 54px !important; width: 54px !important; }

/* Quantity */
.product-detail-buy .form-control,
.product-detail-quantity-selector .form-control { height: 54px !important; border-radius: var(--std-radius) !important; border-color: var(--std-line) !important; font-weight: 700 !important; }

/* ============== Stock / Delivery ============== */
.product-detail-delivery-information,
.product-detail .delivery-information { border: 1px solid var(--std-line) !important; border-radius: var(--std-radius) !important; padding: 14px !important; background: var(--std-bg) !important; }
.delivery-status-indicator.delivery-status-available .delivery-information-status-content { color: var(--std-green) !important; font-weight: 700 !important; }

/* ============== Tabs ============== */
.product-detail-tabs .nav-link { font-weight: 600 !important; color: var(--std-ink-3) !important; padding: 14px 16px !important; border: none !important; border-bottom: 2px solid transparent !important; }
.product-detail-tabs .nav-link.active { color: var(--std-ink) !important; border-bottom-color: var(--std-orange) !important; background: transparent !important; }

/* Spec-Table */
.product-detail-properties-table th,
.product-detail-properties-table td { padding: 12px 0 !important; font-size: 13.5px !important; border-bottom: 1px solid var(--std-line-2) !important; }
.product-detail-properties-table th { color: var(--std-ink-3) !important; font-weight: 500 !important; width: 40% !important; }
.product-detail-properties-table td { color: var(--std-ink) !important; font-weight: 600 !important; }

/* ============== Facelift-Extras (Passend für / Versandbereit) ============== */
.pdp-fitment { margin: 22px 0; border: 1px solid var(--std-line); border-radius: var(--std-radius); padding: 14px 18px; background: var(--std-bg); }
.pdp-fitment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--std-ink-2); }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-chip { padding: 5px 11px; background: #fff; border: 1px solid var(--std-line); border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--std-ink); }
.pdp-chip-primary { border-color: var(--std-orange); color: var(--std-orange-600); }
.pdp-chip-muted { background: transparent; border-color: transparent; color: var(--std-orange); }
.pdp-fitment-help { margin-top: 10px; font-size: 12px; color: var(--std-ink-3); }
.pdp-fitment-help a { color: var(--std-orange); font-weight: 600; }

.pdp-stock-grid { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdp-stock-grid.pdp-stock-single { grid-template-columns: 1fr; }
.pdp-stock-cell { background: var(--std-bg); border: 1px solid var(--std-line); border-radius: var(--std-radius); padding: 14px; }
.pdp-stock-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--std-ink-4); }
.pdp-stock-value { margin-top: 6px; font-size: 14px; font-weight: 700; }
.pdp-stock-green { color: var(--std-green); display: flex; align-items: center; gap: 8px; }
.pdp-stock-green .pdp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--std-green); }
.pdp-stock-long { color: var(--std-orange-600); display: flex; align-items: center; gap: 8px; }
.pdp-stock-long .pdp-dot-orange { width: 10px; height: 10px; border-radius: 50%; background: var(--std-orange); display: inline-block; }
.pdp-stock-unknown { color: var(--std-ink-3); display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pdp-stock-unknown .pdp-dot-gray { width: 10px; height: 10px; border-radius: 50%; background: var(--std-ink-4); display: inline-block; }
.pdp-stock-inquire { margin-left: auto; color: var(--std-orange); font-weight: 700; font-size: 13px; text-decoration: underline; }
.pdp-stock-inquire:hover { color: var(--std-orange-600); }
.pdp-stock-hint { font-size: 12px; color: var(--std-ink-3); margin-top: 2px; }

/* ============== Tabs unter dem Bild (in col-lg-7) ============== */
.pdp-tabs-wrapper { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--std-line); }
.pdp-tabs-wrapper .nav-tabs,
.pdp-tabs-wrapper .product-detail-tab-navigation { border-bottom: 1px solid var(--std-line) !important; gap: 4px; }
.pdp-tabs-wrapper .nav-link { padding: 14px 16px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--std-ink-3) !important; border: none !important; border-bottom: 2px solid transparent !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; }
.pdp-tabs-wrapper .nav-link.active { color: var(--std-ink) !important; border-bottom-color: var(--std-orange) !important; background: transparent !important; }
.pdp-tabs-wrapper .tab-content { padding-top: 22px; }
.pdp-tabs-wrapper .product-detail-properties-table { width: 100% !important; border: 1px solid var(--std-line) !important; border-radius: var(--std-radius) !important; overflow: hidden; }
.pdp-tabs-wrapper .product-detail-properties-table th,
.pdp-tabs-wrapper .product-detail-properties-table td { padding: 12px 16px !important; font-size: 13.5px !important; border-bottom: 1px solid var(--std-line-2) !important; }
.pdp-tabs-wrapper .product-detail-properties-table tr:last-child th,
.pdp-tabs-wrapper .product-detail-properties-table tr:last-child td { border-bottom: none !important; }
.pdp-tabs-wrapper .product-detail-properties-table th { color: var(--std-ink-3) !important; font-weight: 500 !important; width: 38% !important; background: var(--std-bg) !important; }
.pdp-tabs-wrapper .product-detail-properties-table td { color: var(--std-ink) !important; font-weight: 600 !important; }

/* ============== "Jetzt anfragen"-Block (User-Vorgabe) ============== */
.info-box { margin: 18px 0; }

.std-help-btn {
  display: inline-block;
  padding: 6px 14px;
  background-color: #d00000;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: 4px;
}
.std-help-btn:hover { background-color: #e10000; color: #ffffff; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.std-help-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.info-box-hover { background-color: #d9ecf7; border-radius: 8px; padding: 10px 16px 10px 12px; display: flex; align-items: flex-start; gap: 12px; }
.info-icon-rotate { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #0066a4; color: #0066a4; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px; flex-shrink: 0; transition: transform 0.4s ease; }
.info-box-hover:hover .info-icon-rotate { transform: rotate(360deg); }
.info-text-content { margin-bottom: 6px; line-height: 1.45; color: #000000; font-size: 14px; }
.info-text-highlight { color: #d00000; font-weight: bold; }

/* ============== Mobile First (≤ 991px) ============== */
@media (max-width: 991px) {
  .product-detail-content { padding: 16px 0 !important; }
  .product-detail-main { gap: 24px !important; }
  .product-detail-media,
  .product-detail-buy { padding-left: 12px !important; padding-right: 12px !important; }
  .product-detail-tabs .nav { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .product-detail-tabs .nav-link { white-space: nowrap !important; }
  .info-box-hover { padding: 12px !important; }
  .info-icon-rotate { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  /* Sticky Add-to-Cart unten am Bildschirmrand (klassisches Mobile-UX-Pattern) */
  .product-detail-buy-container { position: sticky; bottom: 0; background: #fff; padding: 12px; border-top: 1px solid var(--std-line); box-shadow: 0 -4px 12px rgba(0,0,0,.06); z-index: 100; }
}
@media (max-width: 575px) {
  .product-detail h1 { font-size: 22px !important; }
  .product-detail-price { font-size: 28px !important; }
}

/* ============== Facelift 2026-05-17: Grid unter dem Bild ============== */
.pdp-grid-under-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 767px) {
  .pdp-grid-under-image { grid-template-columns: 1fr; }
}
.pdp-grid-under-image .pdp-card {
  background: #fff;
  border: 1px solid var(--std-line, #E6E6E6);
  border-radius: var(--std-radius, 6px);
  overflow: hidden;
}
.pdp-grid-under-image .pdp-card-head {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--std-ink, #0E0E0E);
  padding: 12px 16px;
  border-bottom: 1px solid var(--std-line, #E6E6E6);
  background: var(--std-bg, #FAFAF8);
}
.pdp-grid-under-image .pdp-card-body {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--std-ink, #0E0E0E);
}
.pdp-grid-under-image .pdp-card-body p { margin: 0 0 .6em 0; }
.pdp-grid-under-image .pdp-card-body p:last-child { margin-bottom: 0; }
.pdp-grid-under-image .pdp-empty {
  color: var(--std-ink-3, #8a8a8a);
  font-style: italic;
}

.pdp-prop-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
}
.pdp-prop-list dt {
  font-weight: 500;
  color: var(--std-ink-3, #555);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
  padding-top: 2px;
}
.pdp-prop-list dd {
  margin: 0;
  color: var(--std-ink, #0E0E0E);
  font-weight: 500;
}

/* ============== Facelift 2026-05-17: Mobile Reihenfolge + Wrap ============== */
.pdp-grid-wrap {
  margin-top: 28px;
}
@media (max-width: 991px) {
  /* Bootstrap row mit order classes: order-1 image, order-2 buy, order-3 grid */
  .pdp-grid-wrap { margin-top: 20px; padding-left: 0 !important; padding-right: 0 !important; }
  .pdp-grid-wrap .pdp-grid-under-image { margin-top: 0; }
}
@media (max-width: 575px) {
  .pdp-grid-wrap .pdp-card-head { font-size: 11px; padding: 10px 12px; }
  .pdp-grid-wrap .pdp-card-body { padding: 12px; font-size: 13px; }
  .pdp-prop-list { grid-template-columns: 1fr; row-gap: 8px; }
  .pdp-prop-list dt { padding-top: 0; }
  .pdp-prop-list dd { margin-bottom: 6px; }
}

/* ============== Facelift 2026-05-17 V3: CSS-Grid Layout für gallery-buybox ============== */
/* Desktop: Image top-left, Tabs unter Image (selbe Spalte), Buy spans 2 rows rechts */
@media (min-width: 992px) {
  .cms-block-gallery-buybox > .cms-block-container > .row,
  .cms-block-gallery-buybox > .row {
    display: grid !important;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "media buy"
      "tabs  buy";
    gap: 0 24px;
  }
  .cms-block-gallery-buybox .product-detail-media { grid-area: media; max-width: 100%; flex: none; width: auto; }
  .cms-block-gallery-buybox .product-detail-buy   { grid-area: buy;   max-width: 100%; flex: none; width: auto; }
  .cms-block-gallery-buybox .pdp-grid-wrap        { grid-area: tabs;  max-width: 100%; flex: none; width: auto; padding-left: 0; padding-right: 0; }
  /* alignment so Tabs direkt unter Image starten */
  .cms-block-gallery-buybox .product-detail-media,
  .cms-block-gallery-buybox .pdp-grid-wrap { align-self: start; }
  .cms-block-gallery-buybox .product-detail-buy { align-self: start; }
}

/* ============== Facelift 2026-05-17 V4: Zoom-Modal Backdrop sicher über Third-Party-Widgets ============== */
.zoom-modal {
  background: rgba(0,0,0,.88) !important;
  z-index: 2000050 !important;
}
.modal-backdrop.show,
.zoom-modal-backdrop {
  z-index: 2000040 !important;
  background: rgba(0,0,0,.88) !important;
  opacity: 1 !important;
}
/* Third-Party (TrustedShops, Tidio-Chatbot, Scroll-Up, WhatsApp-Floats etc.)
   müssen unter den Zoom-Modal-Backdrop wenn Modal offen. */
body.has-zoom-open #trustbadge-container,
body.has-zoom-open .ts-rating-widget,
body.has-zoom-open [data-tidio-root],
body.has-zoom-open .tidio-chat,
body.has-zoom-open iframe[id^="tidio"],
body.has-zoom-open #usercom-launcher,
body.has-zoom-open .scroll-up-button,
body.has-zoom-open .std-help-flyout { z-index: 1 !important; }

/* Trusted-Shops Floating-Widget hat normalerweise z-index ~ 2147483647.
   Wenn Modal offen ist, Bootstrap setzt 'modal-open' auf body. */
body.modal-open #trustbadge-container,
body.modal-open .ts-rating-widget,
body.modal-open [data-tidio-root],
body.modal-open .tidio-chat,
body.modal-open iframe[id^="tidio"] { z-index: 1 !important; }