/* TSZ-PRODUCT-CSS-BUNDLE
 * GENERIERT — nicht von Hand bearbeiten.
 * Erzeugt von tools/build-product-css.sh aus diesen Quellen, in dieser Reihenfolge:
 *   pdg-styles.css                 10095 B
 *   pdg-content-modules.css         2526 B
 *   tsz-product-price-row.css       3896 B
 *   tsz-product-faq-tab.css         4113 B
 *   tsz-product-cover-fit.css       5933 B
 *   tsz-product-buybox.css         15100 B
 *   tsz-product-datasheet.css       1522 B
 * Aenderungen gehoeren in die Quelldatei, danach dieses Skript erneut laufen lassen.
 */

/* ==== pdg-styles.css ==== */
/* resources/views/exports/pdg-styles.css */

/* === 01: Design Tokens (TradingShenzhen) === */
:root {
    --pdg-max-width: 100%;
    --pdg-content-inset: 130px;
    --pdg-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif;
    --pdg-section-gap: 60px;
    --pdg-color-ink: #333;
    --pdg-color-text: #555;
    --pdg-color-muted: #777;
    --pdg-color-brand: #5b94b5;
    --pdg-color-brand-strong: #5b9abe;
    --pdg-color-accent: #c2185b;
    --pdg-color-accent-soft: #f7e8ef;
    --pdg-color-bar: #5c7a8a;
    --pdg-color-surface: #f5f5f5;
    --pdg-color-surface-soft: #f8f9fa;
    --pdg-color-line: #eceff2;
    --pdg-color-white: #fff;
    --pdg-shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.1);
    --pdg-shadow-brand: 0 18px 30px rgba(91, 154, 190, .22);
    --pdg-heading-color: var(--pdg-color-ink);
    --pdg-body-color: var(--pdg-color-text);
    --pdg-accent-color: var(--pdg-color-accent);
    --pdg-accent-bar-color: var(--pdg-color-bar);
    --pdg-highlights-bg: var(--pdg-color-surface);
}

/* === 02: Base === */
.pdg-container {
    max-width: var(--pdg-max-width);
    margin: 0 auto;
    padding: 0 10px;
    font-family: var(--pdg-font-family);
    color: var(--pdg-body-color);
    font-size: 15px;
    line-height: 1.7;
}

.pdg-container * {
    box-sizing: border-box;
}

.pdg-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === 03: Section Rhythm === */
.pdg-section {
    margin-bottom: var(--pdg-section-gap);
}

/* === 04: Hero === */
.pdg-hero {
    align-items: center;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    min-height: 560px;
    padding: 72px 130px 78px;
}

.pdg-hero-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pdg-hero-name {
    color: var(--pdg-color-muted);
    font-size: 68px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.03;
    margin: 0 0 24px;
    max-width: 520px;
    text-transform: uppercase;
}

.pdg-hero-subtitle {
    color: var(--pdg-color-brand);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 8px;
    line-height: 1.9;
    margin: 0 0 76px;
    text-transform: uppercase;
}

.pdg-hero-image {
    justify-self: end;
    max-width: 560px;
    width: 100%;
}

.pdg-hero-image img {
    width: 100%;
}

.pdg-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--pdg-color-brand-strong);
    color: var(--pdg-color-white);
    padding: 12px 28px;
    border-radius: 999px;
    box-shadow: var(--pdg-shadow-brand);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pdg-hero-btn::before {
    background: var(--pdg-color-white);
    border-radius: 2px;
    box-shadow: 0 -5px 0 -2px var(--pdg-color-white);
    content: "";
    display: inline-block;
    height: 8px;
    width: 11px;
}

/* === 05: Proof Bar === */
.pdg-proof-bar {
    background: var(--pdg-color-surface-soft);
    border: 1px solid var(--pdg-color-line);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 10px 60px;
    overflow: hidden;
}

.pdg-proof-item {
    align-items: flex-start;
    background: var(--pdg-color-white);
    display: flex;
    gap: 14px;
    min-height: 96px;
    padding: 24px 26px;
}

.pdg-proof-index {
    color: var(--pdg-color-brand);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.4;
}

.pdg-proof-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pdg-proof-copy strong {
    color: var(--pdg-heading-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.pdg-proof-copy small {
    color: var(--pdg-body-color);
    font-size: 12px;
    line-height: 1.45;
}

/* === 06: Text + Image === */
.pdg-accent-bar {
    width: 120px;
    height: 4px;
    background: var(--pdg-accent-bar-color);
    margin-bottom: 28px;
}

.pdg-text-image {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    padding: 40px var(--pdg-content-inset);
}

.pdg-text-image--reverse {
    flex-direction: row-reverse;
}

.pdg-text-image-content {
    flex: 1;
    padding-top: 20px;
}

.pdg-text-image-content h2 {
    font-size: 30px;
    font-weight: 300;
    color: var(--pdg-heading-color);
    margin: 0 0 16px;
    line-height: 1.3;
}

.pdg-text-image-content p {
    margin: 0;
    color: var(--pdg-body-color);
    font-size: 15px;
    line-height: 1.7;
}

.pdg-text-image-visual {
    flex: 0 0 500px;
}

/* === 07: Image Frame === */
.pdg-img-frame {
    border: 4px solid var(--pdg-color-white);
    box-shadow: var(--pdg-shadow-soft);
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 500px;
    height: 500px;
}

.pdg-img-frame:hover {
    transform: scale(1.03);
}

.pdg-img-frame img {
    height: 500px;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* === 08: Highlights === */
.pdg-highlights-section {
    background: var(--pdg-highlights-bg);
    margin-left: 10px;
    margin-right: 10px;
    padding: 50px;
}

.pdg-highlights {
    text-align: center;
    max-width: var(--pdg-max-width);
    margin: 0 auto;
}

.pdg-highlights-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pdg-heading-color);
    margin: 0 0 16px;
}

.pdg-highlights-divider {
    width: 60px;
    height: 3px;
    background: var(--pdg-accent-color);
    margin: 0 auto 40px;
}

.pdg-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    text-align: left;
}

.pdg-highlight-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pdg-highlight-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.pdg-highlight-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--pdg-accent-color);
    margin: 0 0 6px;
}

.pdg-highlight-card p {
    font-size: 13px;
    color: var(--pdg-body-color);
    margin: 0;
    line-height: 1.5;
}

/* === 09: Banner === */
.pdg-banner {
    position: relative;
    padding: 60px 40px;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.pdg-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(70, 80, 100, 0.65);
}

.pdg-banner-content {
    position: relative;
    z-index: 1;
    max-width: var(--pdg-max-width);
    margin: 0 auto;
}

.pdg-banner h2 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px;
}

.pdg-banner p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* === 10: Banner Fallback === */
.pdg-banner--gradient {
    background-attachment: scroll;
    border-radius: 12px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
    padding-right: 40px;
}

.pdg-banner--gradient .pdg-banner-overlay {
    display: none;
}

/* === 11: Specs Table === */
.pdg-specs {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

.pdg-specs-category {
    margin-bottom: 24px;
}

.pdg-specs-category h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pdg-heading-color);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.pdg-specs-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.pdg-specs-key {
    flex: 0 0 200px;
    color: var(--pdg-body-color);
    font-weight: 500;
}

.pdg-specs-value {
    flex: 1;
    color: #666;
}

/* === 12: Divider Utilities === */
.pdg-divider {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: var(--pdg-section-gap) 0;
}

.pdg-spacer {
    height: var(--pdg-section-gap);
}

@media (max-width: 767px) {
    .pdg-container {
        padding: 0 12px;
        font-size: 14px;
        --pdg-content-inset: 0;
    }

    .pdg-section {
        margin-bottom: 36px;
    }

    .pdg-hero,
    .pdg-text-image,
    .pdg-text-image--reverse {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 28px 0;
    }

    .pdg-hero-name {
        font-size: 42px;
        letter-spacing: 1px;
    }

    .pdg-hero-subtitle {
        font-size: 15px;
        letter-spacing: 4px;
        margin-bottom: 28px;
    }

    .pdg-hero-image {
        flex: none;
        width: 100%;
    }

    .pdg-proof-bar {
        grid-template-columns: 1fr;
        margin-bottom: 36px;
    }

    .pdg-proof-item {
        min-height: auto;
        padding: 18px 20px;
    }

    .pdg-text-image-content {
        padding-top: 0;
    }

    .pdg-text-image-visual,
    .pdg-img-frame {
        flex: none;
        width: 100%;
    }

    .pdg-img-frame {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .pdg-img-frame img {
        height: 100%;
        object-fit: cover;
    }

    .pdg-text-image-content h2 {
        font-size: 24px;
    }

    .pdg-highlights-section {
        padding-top: 36px;
        padding-bottom: 36px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .pdg-highlights-title {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .pdg-highlights-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pdg-highlight-card img {
        width: 64px;
        height: 64px;
    }

    .pdg-banner {
        background-attachment: scroll;
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .pdg-banner--gradient {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pdg-banner h2 {
        font-size: 22px;
    }

    .pdg-specs-row {
        flex-direction: column;
        gap: 4px;
    }

    .pdg-specs-key {
        flex: none;
    }

}

/* ==== pdg-content-modules.css ==== */
/* === 13: Feature Comparison === */
.pdg-feature-compare {
    background: var(--pdg-color-surface-soft);
    border: 1px solid var(--pdg-color-line);
    display: grid;
    gap: 38px;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    margin-left: 10px;
    margin-right: 10px;
    padding: 46px 50px;
}

.pdg-feature-intro {
    align-self: center;
}

.pdg-feature-intro span {
    color: var(--pdg-color-brand);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pdg-feature-intro h2 {
    color: var(--pdg-heading-color);
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
    margin: 0 0 14px;
}

.pdg-feature-intro p {
    color: var(--pdg-body-color);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.pdg-feature-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pdg-feature-card {
    background: var(--pdg-color-white);
    border-top: 3px solid var(--pdg-color-brand);
    min-height: 240px;
    padding: 26px 22px 24px;
}

.pdg-feature-card:nth-child(2) {
    border-top-color: var(--pdg-color-accent);
}

.pdg-feature-card:nth-child(3) {
    border-top-color: var(--pdg-color-bar);
}

.pdg-feature-card:nth-child(4) {
    border-top-color: var(--pdg-color-muted);
}

.pdg-feature-kicker {
    color: var(--pdg-color-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.pdg-feature-card h3 {
    color: var(--pdg-heading-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px;
}

.pdg-feature-card p {
    color: var(--pdg-body-color);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 18px;
}

.pdg-feature-card small {
    border-top: 1px solid var(--pdg-color-line);
    color: var(--pdg-color-muted);
    display: block;
    font-size: 12px;
    line-height: 1.45;
    padding-top: 14px;
}

@media (max-width: 1190px) {
    .pdg-feature-compare {
        grid-template-columns: 1fr;
    }

    .pdg-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pdg-feature-compare {
        gap: 26px;
        margin-left: 0;
        margin-right: 0;
        padding: 30px 20px;
    }

    .pdg-feature-grid {
        grid-template-columns: 1fr;
    }

    .pdg-feature-card {
        min-height: auto;
    }
}

/* ==== tsz-product-price-row.css ==== */
.page-product .product-prices.js-product-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
}

.page-product .product-prices .product-price,
.page-product .product-prices .product-discount,
.page-product .product-prices .tax-shipping-delivery-label {
  margin: 0;
}

.page-product .product-prices .product-price {
  order: 1;
}

.page-product .product-prices .current-price {
  display: block;
  line-height: 1.1;
}

.page-product .product-prices .current-price-value {
  color: #c60000;
}

.page-product .product-prices .tsz-product-discount-stack {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.page-product .product-prices .tsz-product-discount-stack .regular-price,
.page-product .product-prices .tsz-product-discount-stack .discount {
  margin: 0;
}

.page-product .product-prices .tsz-product-discount-stack .regular-price {
  font-size: 14px;
  line-height: 1;
}

.page-product .product-prices .tsz-product-discount-stack .discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: #222;
  color: #fff;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.page-product .product-prices .tsz-availability-badge {
  order: 3;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.page-product .product-prices .tsz-availability-badge img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.page-product .product-prices .tax-shipping-delivery-label {
  order: 4;
  line-height: 1.3;
}

.page-product .tsz-spmgsnipreview-price-slot {
  margin: 7px 0 22px;
}

.page-product .product-additional-info .tsz-spmgsnipreview-price-row {
  display: none !important;
}

.page-product .tsz-spmgsnipreview-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 20px;
  color: #5d6470;
  font-size: 14px;
  line-height: 1.25;
}

.page-product .tsz-spmgsnipreview-microdata {
  display: none;
}

.page-product .tsz-spmgsnipreview-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.page-product .tsz-spmgsnipreview-star {
  display: block;
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.page-product .tsz-spmgsnipreview-score {
  white-space: nowrap;
}

.page-product .tsz-spmgsnipreview-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #262a31;
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.page-product .tsz-spmgsnipreview-link + .tsz-spmgsnipreview-link {
  margin-left: 2px;
}

.page-product .tsz-spmgsnipreview-link:hover,
.page-product .tsz-spmgsnipreview-link:focus {
  color: #2f3f8f;
  text-decoration: none;
}

.page-product .tsz-spmgsnipreview-link-icon {
  display: block;
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.page-product .tsz-spmgsnipreview-pencil {
  color: #111;
  font-size: 11px;
  line-height: 1;
}

/* The .tsz-spmgsnipreview-list-* product-card review row moved to
   assets/css/tsz-global-ui.css on 2026-07-29 (marker TSZ-LIST-REVIEW-ROW).
   It was scoped to body#category / body#search / .page-category / .page-search
   in this file, which head.tpl links only on product pages -- so it matched no
   page at all. See the comment there for the full reasoning. */

@media (max-width: 575.98px) {
  .page-product .product-prices.js-product-prices {
    column-gap: 10px;
  }

  .page-product .product-prices .tsz-availability-badge img {
    width: 34px;
    height: 34px;
  }

  .page-product .product-prices .tax-shipping-delivery-label {
    flex-basis: 100%;
  }

  .page-product .tsz-spmgsnipreview-price-slot {
    margin: 8px 0 18px;
  }

  .page-product .tsz-spmgsnipreview-price-row {
    gap: 7px 12px;
  }
}

/* ==== tsz-product-faq-tab.css ==== */
/* Product Extra Tabs FAQ layout. Loaded only on product pages via theme assets/head.tpl. */
.product-tabs [id^="extra-"] .faq-page-header {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    padding: 30px;
}

.product-tabs [id^="extra-"] .faq-main-title {
    color: #2c3e50;
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 10px;
    text-align: center;
}

.product-tabs [id^="extra-"] .faq-subtitle {
    color: #7f8c8d;
    margin: 0;
    text-align: center;
}

.product-tabs [id^="extra-"] .faq-navigation-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.product-tabs [id^="extra-"] .faq-category-box {
    align-items: flex-start;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 30px;
    padding: 20px;
}

.product-tabs [id^="extra-"] .faq-category-title {
    border-right: 3px solid #3498db;
    color: #2c3e50;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    min-width: 300px;
    padding: 10px 20px 10px 0;
    text-align: right;
}

.product-tabs [id^="extra-"] .faq-category-list {
    flex: 1;
    list-style-position: inside;
    margin: 0;
    padding-left: 0;
}

.product-tabs [id^="extra-"] .faq-category-list li {
    color: #8490a6;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.product-tabs [id^="extra-"] .faq-category-list a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-tabs [id^="extra-"] .faq-category-list a:hover,
.product-tabs [id^="extra-"] .faq-category-list a:focus {
    color: #2980b9;
    text-decoration: underline;
}

.product-tabs [id^="extra-"] .faq-section-divider {
    height: 2px;
    margin: 40px 0;
}

.product-tabs [id^="extra-"] .faq-answers-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.product-tabs [id^="extra-"] .faq-answer-section {
    margin-bottom: 50px;
}

.product-tabs [id^="extra-"] .faq-answer-section:last-child {
    margin-bottom: 0;
}

.product-tabs [id^="extra-"] .faq-section-title {
    background-color: #f8f9fa;
    border-radius: 8px;
    color: #2c3e50;
    font-size: 1.8rem;
    line-height: 1.25;
    margin: 0 0 30px;
    padding: 20px;
    text-align: center;
}

.product-tabs [id^="extra-"] .faq-single-item {
    border-bottom: 1px solid #ecf0f1;
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.product-tabs [id^="extra-"] .faq-single-item:last-child {
    border-bottom: 0;
}

.product-tabs [id^="extra-"] .faq-item-question {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 15px;
    padding-left: 30px;
    position: relative;
}

.product-tabs [id^="extra-"] .faq-item-question::before {
    color: #3498db;
    content: "Q:";
    font-weight: 700;
    left: 0;
    position: absolute;
}

.product-tabs [id^="extra-"] .faq-item-answer {
    color: #555;
    line-height: 1.8;
    padding-left: 30px;
}

.product-tabs [id^="extra-"] .faq-item-answer p {
    margin-bottom: 15px;
}

.product-tabs [id^="extra-"] .faq-item-answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .product-tabs [id^="extra-"] .faq-page-header {
        padding: 24px 18px;
    }

    .product-tabs [id^="extra-"] .faq-main-title {
        font-size: 2rem;
    }

    .product-tabs [id^="extra-"] .faq-category-box {
        flex-direction: column;
        gap: 15px;
    }

    .product-tabs [id^="extra-"] .faq-category-title {
        border-bottom: 2px solid #3498db;
        border-right: 0;
        min-width: auto;
        padding: 0 0 10px;
        text-align: left;
    }

    .product-tabs [id^="extra-"] .faq-answers-container {
        padding: 20px;
    }

    .product-tabs [id^="extra-"] .faq-section-title {
        font-size: 1.45rem;
        padding: 16px;
    }

    .product-tabs [id^="extra-"] .faq-item-question {
        font-size: 1.1rem;
    }
}

/* ==== tsz-product-cover-fit.css ==== */
/* TSZ product cover aspect-ratio fix
 * Marker: TSZ-PRODUCT-COVER-FIT
 *
 * Problem: on desktop the product gallery uses lightSlider in vertical (thumbs-left)
 * mode with a JS-set fixed verticalHeight (500px on .lSSlideWrapper/ul/li). The cover
 * column is ~465px wide but forced to 500px tall, so a square product image
 * (580x580 large_default) rendered with the browser default object-fit:fill gets
 * stretched vertically (distortion factor ~0.93).
 *
 * NOTE ON MODE (measured 2026-07-26, corrects the earlier assumption that vertical
 * mode is universal): leogallery picks the mode server-side per user agent, not per
 * viewport width. Desktop UA -> `.lSSlideOuter.vertical`, fixed 500px, at ANY window
 * width. Mobile/tablet UA -> plain `.lSSlideOuter` (horizontal, thumb strip below),
 * height driven by container width. So the object-fit rules below only ever apply on
 * desktop; on mobile the slide images are square anyway (large_default is 580x580 and
 * PS_IMAGE_GENERATION_METHOD=0 forces exact box dimensions), so there is nothing to
 * un-distort there.
 *
 * Fix: force object-fit:contain so the image keeps its natural aspect ratio inside
 * the slider box (letterboxed, never distorted). The JS-driven slide heights are
 * intentionally NOT overridden here — changing them via CSS would desync the
 * lightSlider translate3d transforms.
 *
 * NOTE: the visible cover renders via the theme's PDG (Product Detail Gallery)
 * customization, which uses lightSlider (.lSSlideOuter / #lightSlider / li.lslide)
 * at runtime — NOT the default theme `.product-cover` slick markup (which is present
 * but hidden, 0x0). Confirmed in the live DOM. The lightSlider selectors below are
 * the load-bearing ones; `.product-cover img` is kept as a defensive fallback for the
 * default gallery / quickview. (slick on this page is the related-products carousel.)
 */
.lSSlideOuter.vertical .lightSlider .lslide img,
.product-cover img {
    object-fit: contain !important;
}

/* Thumbnails: keep aspect ratio too for visual consistency. */
.lSSlideOuter .lSGallery img,
.lSSlideOuter .lSPager img {
    object-fit: contain !important;
}

/* TSZ PDP gallery CLS reservation
 * Marker: TSZ-PDP-GALLERY-CLS-RESERVE
 *
 * Problem (measured 2026-07-26/27 on localhost, mobile UA): `.images-container` is 0px
 * high until lightSlider builds the visible gallery at ~1.8-2.3s, then jumps to its
 * final height and pushes the whole buybox down. Layout shift 0.31-0.47 on the PDP.
 * The default `.product-cover` markup that would hold the space is display:none, so
 * nothing reserves the height before the JS runs.
 *
 * Fix: pin the container height to its width via aspect-ratio, so it is already at
 * its final size in the very first frame and never changes again. A spacer that is
 * removed once the slider appears does NOT work: lightSlider inserts .lSSlideOuter
 * and the pager markup first and the thumb strip only gets its height once the thumb
 * images have dimensions, so the container dips to cover height in between (measured
 * 498 -> 337 -> 498, CLS 0.09-0.13, and the dip is a race that hits ~half the loads).
 * A fixed ratio has no state transition to lose that race with.
 *
 * Measured geometry (mobile UA, container width W):
 *   1 image   -> H = W + 5px            (cover 1:1, no thumb strip; .lSSlideOuter.noPager)
 *   2+ images -> H = 1.5W + 2.5px       (cover 1:1 + 5px gap + square thumb strip (W-5)/2)
 * Verified W=330 (360px vp) H=335/498, W=384 (414px vp) H=389/579, W=354 (768px vp)
 * H=359/534 - the formula holds across widths and image counts (1/4/10 images).
 * The pre-JS thumb markup predicts the post-init geometry exactly: the number of
 * `#thumb-gallery .thumb-container` equals the slide and pager count, including
 * combination products where 10 DB images collapse to a single slide. That markup
 * stays in the DOM after init, so the selector below never flips mid-life.
 *
 * The ratios drop the constant term (+5px / +2.5px) that aspect-ratio cannot express,
 * so the reserved box is 5px / 2.5px shorter than the settled content. That remainder
 * lands inside the 10px margin-bottom of `.lSSlideOuter` instead of overlapping the
 * buybox, and it costs no layout shift because the box height itself never moves.
 *
 * Gate: `pointer: coarse` + max-width, because the mode is chosen server-side by user
 * agent (see NOTE ON MODE above). A desktop UA gets the fixed-500px vertical gallery
 * even in a 360px window and must not get this reservation - verified that desktop UA
 * at 360/900/1280px keeps height 500 and CLS 0.0008 with this block in place.
 * Remaining edge case: a touchscreen desktop below 992px reports coarse while still
 * getting the vertical gallery, so it reserves by the mobile formula and ends up with
 * a too-tall box (at W=420 that is 630 reserved vs 500 actual). It costs no shift, only
 * empty space below the gallery. Needs :has() (Chrome 105+, Safari 15.4+, Firefox 121+);
 * older browsers simply keep the old shifting behaviour.
 *
 * Measured effect (localhost, mobile UA, 4x CPU + Fast-3G throttling, A/B with the
 * reservation stripped from the served CSS): CLS 0.3694 -> 0.0021 (10 images),
 * 0.3495 -> 0.0022 (4 images), 0.3157 -> 0.0037 (1 image). Unthrottled: 0.466/0.384
 * -> 0.0000 and 0.314 -> 0.0017, stable across three runs at 360px and 414px.
 */
@media (max-width: 991px) and (pointer: coarse) {
    /* single-image products: cover only */
    .images-container {
        aspect-ratio: 1 / 1;
    }

    /* products with 2+ images: cover + horizontal thumb strip below it */
    .images-container:has(#thumb-gallery .thumb-container + .thumb-container) {
        aspect-ratio: 2 / 3;
    }
}

@media (max-width: 768px) {
    body.modal-open #networkPopup.cutsompopup {
        z-index: 20000 !important;
    }

    body.modal-open #interactive-bar-right-s-spmgsnipreview {
        z-index: 1030 !important;
    }
}

/* ==== tsz-product-buybox.css ==== */
/* TSZ product buy-box redesign
 * Marker: TSZ-PRODUCT-BUYBOX
 *
 * Rounds the product-detail "buy box" (attribute selectors, quantity counter,
 * add-to-cart button) to match the rounded Shipping / Your-benefits cards on the
 * same page. Pure CSS on top of the classic PrestaShop / Leo markup:
 *   - native <select> (form-control-select) kept intact — PrestaShop variant JS
 *     (data-product-attribute) is untouched, no custom dropdown, no JS risk;
 *   - the group name (.control-label, e.g. "Firmware") becomes a floating label on
 *     the box border, so attribute values can drop the redundant "Firmware:" prefix;
 *   - the firmware selector is targeted by :has(.leo-action) (the info button), so it
 *     is identified semantically, not by a hardcoded group id;
 *   - the quantity input is styled through its runtime bootstrap-touchspin wrapper.
 *
 * Supersedes tsz-product-addtocart-mobile.css (that file's mobile float layout would
 * collide with the flex layout here; its <link> is removed from head.tpl). The old
 * file stays on disk for rollback but is no longer loaded.
 *
 * Scope: every rule is prefixed with .page-product so it beats theme.css without
 * !important. Loaded via _partials/head.tpl.
 */

/* ============================ BUY-BOX CONTAINER ============================ */

/* Light grey card wrapping ONLY the buy area — attribute selectors (device
 * color + firmware) plus the quantity + add-to-cart + wishlist/compare/share row —
 * so it reads as one grouped block, visually set apart from the SEPARATE shipping
 * and your-benefits cards that render below it. Those cards are left untouched:
 * the shipping card is the ancodedeliverydate plugin, pulled in via the inline
 * displayProductAdditionalInfo hook (product-add-to-cart.tpl), and it stays a
 * standalone white card outside the grey box.
 *
 * CSS-only, NO template/plugin change: the grey box is painted across
 * .product-variants (top half) and .product-quantity (bottom half). Both are the
 * same width and flush; the only thing separating them was the .product-quantity
 * 26px top margin (killed below), so the two halves join into one seamless rounded
 * card. Everything after the quantity row (.product-additional-info shipping +
 * benefits, availability, minimal-quantity) stays outside the grey card.
 * Marker: TSZ-BUYBOX-CONTAINER */
.page-product .product-actions .product-variants {
  background: #f2f3f7;
  border: 1px solid #e3e5ec;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  margin: 0;                     /* also kills the mobile margin-right:10px so both halves stay flush */
  padding: 22px 20px 16px;
}
.page-product .product-actions .product-add-to-cart > .product-quantity {
  background: #f2f3f7;
  border: 1px solid #e3e5ec;
  border-top: none;               /* overrides the plain border-bottom divider below */
  border-radius: 0 0 14px 14px;
  margin: 0 0 24px !important;    /* kill the 26px top gap; keep spacing to the shipping card */
  padding: 6px 20px 20px;
}
/* floating group labels now sit on the grey box, not on white */
.page-product .product-actions .product-variants > .product-variants-item > .control-label {
  background: #f2f3f7 !important;
}

/* ============================ ATTRIBUTE SELECTORS ============================ */

/* all selectors share ONE row (device color + firmware + info button, like the
 * design); on narrow viewports the flex row wraps to a stack automatically. */
.page-product .product-variants {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 6px;
}
.page-product .product-variants > .product-variants-item {
  position: relative;
  display: flex;
  flex-wrap: nowrap;   /* override productextension inline `<style>` (flex-wrap:wrap),
                          so the firmware select + info button never stack */
  align-items: stretch;
  gap: 10px;
  margin: 14px 0 0;
  flex: 1 1 200px;   /* share the row */
  min-width: 0;
}
/* firmware (the item carrying the .leo-action info button) gets more room */
.page-product .product-variants > .product-variants-item:has(.leo-action) {
  flex: 1.7 1 240px;
}

/* group name -> floating label sitting on the box top border.
 * (theme.css/custom.css set .control-label to display:none — bring it back here) */
.page-product .product-variants > .product-variants-item > .control-label {
  position: absolute;
  top: -8px;
  left: 12px;
  z-index: 2;
  display: block !important;
  margin: 0;
  padding: 0 6px;
  background: #fff;
  color: #6b7280;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-product .product-variants > .product-variants-item:has(.leo-action) > .control-label {
  color: #2d2d96;
}

/* the rounded select box (grey chevron in a light square).
 * flex:1 + width:auto overrides custom.css `select { width:300px !important }`. */
.page-product .product-variants > .product-variants-item select.form-control-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 50px;
  display: block;
  border: 1.5px solid #d9dce2;
  border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='26' height='26' rx='7' fill='%23f1f1f8'/%3E%3Cpath d='M8 11l5 5 5-5' fill='none' stroke='%232d2d96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 14px 46px 14px 16px;
  color: #2a2a2a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.page-product .product-variants > .product-variants-item select.form-control-select:focus {
  border-color: #2d2d96;
  box-shadow: 0 0 0 3px rgba(45, 45, 150, 0.10);
}

/* firmware selector -> permanent blue accent (blue chevron square) */
.page-product .product-variants > .product-variants-item:has(.leo-action) select.form-control-select {
  border-color: #2d2d96;
  box-shadow: 0 0 0 3px rgba(45, 45, 150, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='26' height='26' rx='7' fill='%232d2d96'/%3E%3Cpath d='M8 11l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* keep the info button (.leo-action) to the right of the firmware box; the merchant
 * restyles the button itself elsewhere, we only place it so it stays in the row */
.page-product .product-variants > .product-variants-item:has(.leo-action) > .leo-action {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0;
}

/* ============================ QUANTITY + ADD TO CART ======================== */

.page-product .product-add-to-cart .product-quantity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  border-bottom: 1px solid #e3e6ea;
  padding: 0 0 22px;
  margin: 26px 0 22px;
}
.page-product .product-add-to-cart .product-quantity > div {
  margin: 0;
}

/* quantity box: rounded, chevrons in their own right-hand column */
.page-product .product-add-to-cart .product-quantity .qty {
  flex: 0 0 auto;
  margin: 0;
}
.page-product .product-add-to-cart .product-quantity .qty .input-group,
.page-product .product-add-to-cart .product-quantity .qty .bootstrap-touchspin {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #d9dce2;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  float: none;
}
.page-product .product-add-to-cart .product-quantity #quantity_wanted {
  border: none;
  background: transparent;
  height: auto;
  width: 58px;
  min-width: 58px;
  padding: 14px 8px;
  text-align: center;
  color: #2a2a2a;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
}
.page-product .product-add-to-cart .product-quantity .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  border-left: 1.5px solid #d9dce2;
}
.page-product .product-add-to-cart .product-quantity .input-group-btn-vertical .btn {
  position: relative;   /* anchor for the absolutely-positioned touchspin icon */
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: #fff;
  padding: 0 12px;
  height: auto;
  color: #6b7280;
}
.page-product .product-add-to-cart .product-quantity .input-group-btn-vertical .btn:first-child {
  border-bottom: 1px solid #e3e6ea;
}
.page-product .product-add-to-cart .product-quantity .input-group-btn-vertical .btn:hover {
  background: #f1f1f8;
  color: #2d2d96;
}
/* the touchspin glyph is position:absolute; center it in its half of the box
 * (theme/bootstrap left it at top:0, which pinned both chevrons to the top edge) */
.page-product .product-add-to-cart .product-quantity .input-group-btn-vertical .btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 0.9rem;
}

/* add to cart: rounded, fills the remaining width */
.page-product .product-add-to-cart .product-quantity .add {
  flex: 1 1 200px;
  margin: 0;
}
.page-product .product-add-to-cart .add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #e8574c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.page-product .product-add-to-cart .add-to-cart:hover:not([disabled]) {
  background: #d8433a;
}
.page-product .product-add-to-cart .add-to-cart[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* wishlist / compare / social action buttons */
.page-product .product-add-to-cart .product-quantity .wishlist,
.page-product .product-add-to-cart .product-quantity .compare,
.page-product .product-add-to-cart .product-quantity .product__social-share {
  flex: 0 0 auto;
  margin: 0;
}
/* rounded-rectangle shape (same 8px radius as the qty box / add-to-cart button),
 * background + border left as the theme has them. Scoped to .product-quantity so the
 * firmware .leo-description info button (also .btn-product, in .product-variants) is
 * untouched — the merchant restyles that one separately. */
.page-product .product-add-to-cart .product-quantity a.btn-product {
  border-radius: 8px;
}

/* ================================= MOBILE ================================== */

@media (max-width: 767.98px) {
  /* SELECTOR ROW: device color + firmware + info button all on one line.
   * nowrap keeps them side by side; the selects shrink (min-width:0, text ellipsis),
   * the firmware info button stays pinned to the right of the firmware select. */
  .page-product .product-variants {
    flex-wrap: wrap;
    gap: 10px;
  }
  /* two selectors per row; a 3rd+ attribute group wraps to the next row (grows to
   * full width when alone) instead of three selects being crushed to unreadable
   * ellipsis on one line — the reported break for 3-group products on mobile */
  .page-product .product-variants > .product-variants-item {
    flex: 1 1 calc(40% - 8px);   /* color / default: shorter */
    min-width: 0;
  }
  .page-product .product-variants > .product-variants-item:has(.leo-action) {
    flex: 1 1 calc(60% - 8px);   /* firmware: longer, room for select + info button.
                                    40+60 = one row for 2 groups; overrides the desktop
                                    240px basis; a 3rd group still wraps (basis-driven) */
    gap: 8px;
  }
  .page-product .product-variants > .product-variants-item select.form-control-select {
    padding-right: 42px;
    background-position: right 9px center;
  }

  /* BUY ROW: qty + add-to-cart on line 1, the three action icons on line 2.
   * Squeezing all five onto one nowrap line (the previous approach) clipped the
   * "Add to cart" label at every width up to 767px -- even at 390px the button's
   * scrollWidth (73px) exceeded its shrunk flex width (55px), so part of the label
   * was always invisible; below ~360px the row also visibly wrapped mid-item
   * (qty/button/icons splitting across two or three ragged lines).
   * Fix: flex-wrap + the order/::after "flex-basis:100%" line-break trick forces a
   * clean, deterministic 2-row layout with the full label always readable, at every
   * width in this breakpoint -- no DOM change needed, no narrower sub-breakpoint.
   * Marker: TSZ-BUYBOX-MOBILE-ROW-WRAP */
  .page-product .product-add-to-cart .product-quantity {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
  }

  /* QTY BOX: below 768px custom.css pins `.qty` to `width:19%` and `#quantity_wanted`
   * to `width:100%`, so the touchspin chevron column ends up outside the box and the
   * wrapper's `overflow:hidden` (desktop section above) clips it away — the up/down
   * arrows are in the DOM and visible on desktop, but invisible on phones.
   * Give the box its content width back and take the room out of the number field
   * instead, so the chevrons fit while the box stays the same ~58px it was before and
   * the rest of the buy row is unaffected.
   * Marker: TSZ-BUYBOX-QTY-ARROWS-MOBILE */
  .page-product .product-add-to-cart .product-quantity .qty {
    width: auto;
    order: 1;
  }
  .page-product .product-add-to-cart .product-quantity #quantity_wanted {
    width: 38px;
    min-width: 38px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .page-product .product-add-to-cart .product-quantity .input-group-btn-vertical .btn {
    padding: 0 9px;
  }
  .page-product .product-add-to-cart .product-quantity .add {
    flex: 1 1 140px;
    min-width: 0;
    order: 2;
  }
  .page-product .product-add-to-cart .add-to-cart {
    padding: 15px 6px;
    font-size: 14px;
    white-space: nowrap;
  }
  /* forces the wrap point after qty+button: an empty, zero-size flex item moved
   * between them and the icons via `order`, independent of DOM position */
  .page-product .product-add-to-cart .product-quantity::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }
  .page-product .product-add-to-cart .product-quantity .wishlist,
  .page-product .product-add-to-cart .product-quantity .compare,
  .page-product .product-add-to-cart .product-quantity .product__social-share {
    flex: 0 0 auto;
  }
  .page-product .product-add-to-cart .product-quantity .wishlist {
    order: 4;
  }
  .page-product .product-add-to-cart .product-quantity .compare {
    order: 5;
  }
  .page-product .product-add-to-cart .product-quantity .product__social-share {
    order: 6;
  }
  .page-product .product-add-to-cart .product-quantity a.btn-product {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
  }
}

/* ==== tsz-product-datasheet.css ==== */
/* TSZ-PRODUCT-DATASHEET: keep label and value on the same row.
   Loaded from _partials/head.tpl for page_name == 'product'.
   Before: dt and dd were both float:left at 49% width, so a value taller than its
   label let the next dt slide into the gap beside it. At 412px, 2 of 36 rows were
   already 40px out of alignment and the drift grew further down the list. */

.product-features > dl.data-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2px;
    row-gap: 2px;
}

.product-features > dl.data-sheet dt.name,
.product-features > dl.data-sheet dd.value {
    align-content: center;
    float: none;
    margin: 0;
    width: auto;
}

/* the theme striped rows via :nth-of-type, which counted dt and dd separately.
   With grid the pair is one visual row, so stripe both cells of every other pair. */
.product-features > dl.data-sheet dt.name:nth-of-type(even),
.product-features > dl.data-sheet dd.value:nth-of-type(even) {
    background: #f6f7fa;
}

.product-features > dl.data-sheet dt.name:nth-of-type(odd),
.product-features > dl.data-sheet dd.value:nth-of-type(odd) {
    background: #fff;
}

/* the float layout needed a clearfix; grid does not */
.product-features > dl.data-sheet:after {
    content: none;
}

@media (max-width: 767px) {
    .product-features > dl.data-sheet dt.name,
    .product-features > dl.data-sheet dd.value {
        font-size: 13px;
        line-height: 1.45;
        padding: 12px 14px;
        word-break: break-word;
    }
}