/*
 * Product detail page chrome (Groover theme). Complements the theme's own
 * .section-*/.zoom-area/.detail-tabs-wrapper styling with the shop-specific bits:
 * availability states, favourite button, live price spans, tiers, variants, quantity,
 * reviews. Brand colour #309bd9.
 */
.shop-noviews { color: #707070; padding: 40px 0; }

/* Title row + inline favourite */
.shop-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shop-title-row h1 { margin: 0; }
.shop-fav-inline { margin: 0; flex-shrink: 0; }
.shop-fav-inline .sf-favorite-btn { padding: 8px 12px; line-height: 1; }
.sf-favorite-btn[data-favorited="1"] { color: #FF3860; border-color: #FF3860; }
.sf-favorite-btn[data-favorited="1"] i { color: #FF3860; }

/* Rating link */
.shop-rating-link { display: inline-flex; align-items: center; gap: 8px; color: #707070; margin-top: 6px; }
.shop-rating-link:hover { color: #309bd9; }

/* Live price spans */
.section-3-price-original-discount .price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-3-price-original-discount .price h4 { margin: 0; color: #309bd9; }
.shop-orig-price { color: #999; text-decoration: line-through; font-size: 16px; }
.shop-orig-price[hidden], .shop-total-price[hidden] { display: none; }
.shop-total-price { color: #707070; font-size: 14px; width: 100%; }

/* Availability states */
/* Verfügbarkeit: farbiger Punkt + Text. Bewusst nur zwei Aussagen (lieferbar / nicht
   lieferbar) — konkrete Stückzahlen sind interne Information und schwanken mit dem
   Lieferanten. "choose" ist der Zwischenzustand, solange keine Variante gewählt ist. */
.sf-availability {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sf-availability::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.sf-availability[data-availability="in"] { color: #23a455; }
.sf-availability[data-availability="out"] { color: #d0323a; }
.sf-availability[data-availability="choose"] { color: #309bd9; }
/* Ohne gewählte Variante ist der Punkt ein neutraler Hinweis, kein Ampelsignal. */
.sf-availability[data-availability="choose"]::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* Tiers table */
.shop-tiers-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.shop-tiers-table td { padding: 6px 10px; border: 1px solid #e4e4e4; }
.shop-tiers-table td:last-child { text-align: right; font-weight: 700; color: #309bd9; }

/* Variants */
.shop-variants { border: 0; padding: 0; margin: 0 0 18px; }
.shop-variants legend { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.shop-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-variant-option {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #cdd3dc; border-radius: 6px; padding: 8px 12px; cursor: pointer; margin: 0;
    transition: border-color 0.15s ease;
}
.shop-variant-option:hover { border-color: #309bd9; }
.shop-variant-option.is-oos { opacity: 0.5; text-decoration: line-through; }

/* Quantity + add to cart */
.quantity-wrapper span { display: block; font-weight: 700; margin-bottom: 6px; }
.shop-qty-input {
    width: 90px; padding: 10px 12px; border: 1px solid #cdd3dc; border-radius: 6px; font-size: 15px;
}
.shop-qty-input:focus { outline: none; border-color: #309bd9; box-shadow: 0 0 0 3px #eaf5fb; }
.shop-add-to-cart .button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Reviews */
.shop-review-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 15px; }
.shop-review-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.shop-review { border: 1px solid #e4e4e4; border-radius: 8px; padding: 16px; }
.shop-review-title { font-weight: 700; margin: 8px 0 4px; }
.shop-review-body { margin: 0 0 8px; }
.shop-review-meta { font-size: 13px; color: #707070; margin: 0; }
.shop-review-notice { color: #707070; }
.shop-review-notice a { color: #309bd9; text-decoration: underline; }
.shop-review-form { max-width: 520px; }
.shop-field { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.shop-field input, .shop-field select, .shop-field textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
    border: 1px solid #cdd3dc; border-radius: 6px; font-size: 15px; font-family: inherit; font-weight: 400;
}
.shop-field input:focus, .shop-field select:focus, .shop-field textarea:focus {
    outline: none; border-color: #309bd9; box-shadow: 0 0 0 3px #eaf5fb;
}

/* Zoom gallery thumbnails */
#gallery { display: flex; flex-wrap: wrap; gap: 8px; }
#gallery a { display: block; width: 64px; height: 64px; border: 1px solid #e4e4e4; border-radius: 6px; overflow: hidden; cursor: pointer; }
#gallery a.active { border-color: #309bd9; }
#gallery a img { width: 100%; height: 100%; object-fit: cover; }
/* Von der Farbwahl ausgeblendete Miniaturbilder. Die Regel ist nötig, weil `#gallery a` mit
   `display: block` die eingebaute Bedeutung von [hidden] überschreibt — ohne sie blieben die
   Bilder trotz gesetztem hidden stehen. */
#gallery a[hidden] { display: none; }

/* ---- Strukturierte Produktbeschreibung (App\Support\ProductDescription) ----
   Die Importtexte bestehen aus einem Einleitungsabsatz, einer Zwischenüberschrift
   und beschrifteten Merkmalen. Vorher wurde jedes davon zu einem eigenen <p>. */
.shop-long-desc p { margin: 0 0 14px; line-height: 1.75; }
.shop-desc-heading {
    margin: 26px 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.shop-desc-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.shop-desc-list li {
    position: relative;
    padding-left: 26px;
    line-height: 1.65;
}
.shop-desc-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--shop-brand);
}
.shop-desc-list li strong { font-weight: 700; }
@media (min-width: 768px) {
    .shop-desc-list { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
}

/* ---- Werbeanbringung (Herstellerangaben zu Druckbereichen) ---- */
.shop-print-table { width: 100%; border-collapse: collapse; }
.shop-print-table th,
.shop-print-table td { padding: 9px 12px; border-bottom: 1px solid #e6eaee; text-align: left; }
.shop-print-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7d8a;
    font-weight: 700;
}
.shop-print-table td:nth-child(3),
.shop-print-table td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Pflichthinweis zur Umsatzsteuer neben dem Preis */
.shop-price-note { margin: 4px 0 0; font-size: 13px; color: #6b7d8a; }

/* =====================================================================================
   Bildbühne der Produktgalerie
   =====================================================================================
   Diese Regeln standen nur in public/assets/css/storefront.css — die lädt die Theme-Seite
   nicht. Ohne sie fehlte .sf-stage die Positionierung, die Pfeile rutschten als nackte
   Knöpfe aus dem Bild heraus und der Zähler stand irgendwo im Fließtext.
   ===================================================================================== */
.sf-stage { position: relative; }
.sf-stage-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1a2230;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: background .15s ease, transform .15s ease;
}
/* Bleibt nach der Farbwahl nur ein Bild übrig, wären die Pfeile eine Sackgasse. `display: flex`
   oben schlägt die eingebaute Bedeutung von [hidden], deshalb diese Regel. */
.sf-stage-arrow[hidden] { display: none; }
.sf-stage-arrow:hover { background: #fff; }
.sf-stage-arrow:active { transform: translateY(-50%) scale(.94); }
.sf-stage-prev { left: 10px; }
.sf-stage-next { right: 10px; }
.sf-stage-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(26, 34, 48, .62);
    color: #fff;
    font-size: .78rem;
    letter-spacing: .02em;
}
@media (max-width: 575px) {
    .sf-stage-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
    .sf-stage-prev { left: 4px; }
    .sf-stage-next { right: 4px; }
}
/* ... aber am Finger nie unter 44 px.
   Die Regel darüber verkleinert nach der BREITE des Fensters — und traf damit ausgerechnet das
   Telefon, wo mit dem Daumen getippt wird. Ein schmales Fenster am Monitor darf kleine Pfeile
   haben, eine Fingerkuppe braucht 44 px. Diese Regel steht bewusst danach: gleiche Spezifität,
   die spätere gewinnt. */
@media (pointer: coarse) {
    .sf-stage-arrow { width: 44px; height: 44px; font-size: 1.5rem; }
}

/* Wischen wechselt das Bild (product-media.js). `pan-y` überlässt dem Browser weiterhin das
   senkrechte Scrollen der Seite und gibt uns nur die waagerechte Geste — `none` würde die Seite
   unter dem Finger festnageln. */
#zoom-pro { touch-action: pan-y; }

/* Auf Touch-Geräten ersetzt ein Antippen die Lupe (siehe product-media.js). */
@media (max-width: 991px) {
    .sf-stage #zoom-pro { cursor: zoom-in; }
}

/* Vollbild-Ansicht für Touch-Geräte */
.sf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 16, 24, .92);
}
.sf-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sf-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1a2230;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}