/* =========================================================
   PROFI-LOOK (wie Jibdora): Produktkarten, Produktseite,
   Galerie + Lightbox. Wird NACH frontend.css geladen.
   ========================================================= */

:root{
    --pro-bg:#f6f7f9;
    --pro-card:#ffffff;
    --pro-text:#111827;
    --pro-muted:#6b7280;
    --pro-line:#e5e7eb;
    --pro-price:#111827;
    --pro-accent:#e11d48;     /* Rabatt */
    --pro-green:#16a34a;
    --pro-btn:#111827;
    --pro-btn-text:#ffffff;
    --pro-wa:#25d366;
    --pro-radius:14px;
    --pro-shadow:0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06);
}
body.dark-mode{
    --pro-bg:#0f1115;
    --pro-card:#181b21;
    --pro-text:#f3f4f6;
    --pro-muted:#9ca3af;
    --pro-line:#2a2f38;
    --pro-price:#f9fafb;
    --pro-btn:#f9fafb;
    --pro-btn-text:#111827;
    --pro-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

.pc-grid, .pc-row, .pdp{
    font-family:'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color:var(--pro-text);
}
[dir="rtl"].pc-grid, [dir="rtl"] .pc-grid, .pdp[dir="rtl"]{
    font-family:'Tajawal', 'Inter', system-ui, sans-serif;
}

.pc-section-title{
    font-size:1.35em;
    font-weight:700;
    margin:28px 0 16px;
    color:var(--pro-text);
    text-align:start;
}

/* ================= PRODUKTKARTE ================= */
.pc-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
    margin:24px 0 32px;
}
@media (max-width:991px){ .pc-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } }
@media (max-width:767px){ .pc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } }

.pc{
    display:flex;
    flex-direction:column;
    background:var(--pro-card);
    border:1px solid var(--pro-line);
    border-radius:var(--pro-radius);
    overflow:hidden;
    text-decoration:none !important;
    color:inherit !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    min-width:0;
}
.pc:hover{
    transform:translateY(-3px);
    box-shadow:var(--pro-shadow);
    border-color:transparent;
}
.pc-media{
    position:relative;
    aspect-ratio:1 / 1;
    background:#fff;
    overflow:hidden;
}
.pc-media img{
    width:100%;
    height:100%;
    object-fit:contain;     /* Produkt immer komplett sichtbar */
    padding:8px;
    transition:transform .35s ease;
}
.pc:hover .pc-media img{ transform:scale(1.04); }

.pc-badge{
    position:absolute;
    top:10px;
    inset-inline-start:10px;
    background:var(--pro-accent);
    color:#fff;
    font-size:.78em;
    font-weight:700;
    padding:4px 8px;
    border-radius:999px;
    line-height:1;
    z-index:2;
}
.pc-body{
    padding:12px 14px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    text-align:start;
}
.pc-name{
    font-size:.95em;
    font-weight:500;
    line-height:1.35;
    margin:0;
    color:var(--pro-text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.7em;
}
.pc-prices{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.pc-price{ font-size:1.12em; font-weight:800; color:var(--pro-price); }
.pc-old{ font-size:.85em; color:var(--pro-muted); text-decoration:line-through; }
.pc-meta{ font-size:.75em; color:var(--pro-green); }

/* Horizontale Reihe (Ähnliche Produkte) */
.pc-row{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(200px, 23%);
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    scrollbar-width:thin;
}
.pc-row .pc{ scroll-snap-align:start; }
@media (max-width:767px){ .pc-row{ grid-auto-columns:46%; gap:12px; } }

/* ================= PRODUKTSEITE ================= */
.pdp{ padding-top:20px; padding-bottom:40px; }

.pdp-crumbs{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    font-size:.85em; color:var(--pro-muted); margin-bottom:16px;
}
.pdp-crumbs a{ color:var(--pro-muted); }
.pdp-crumbs a:hover{ color:var(--pro-text); }

.pdp-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
    gap:40px;
    align-items:start;
}
/* minmax(0,1fr) statt 1fr: sonst drückt die Vorschaubild-Leiste (viele Fotos) die Spalte breiter als das Handy */
@media (max-width:991px){ .pdp-grid{ grid-template-columns:minmax(0, 1fr); gap:20px; } }

/* Galerie */
.pdp-gallery{ position:sticky; top:80px; }
@media (max-width:991px){ .pdp-gallery{ position:static; } }

.pdp-stage{
    position:relative;
    background:#fff;
    border:1px solid var(--pro-line);
    border-radius:18px;
    overflow:hidden;
}
.pdp-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.pdp-track::-webkit-scrollbar{ display:none; }
.pdp-slide{
    flex:0 0 100%;
    aspect-ratio:1 / 1;
    scroll-snap-align:start;
    border:0;
    padding:0;
    background:#fff;
    cursor:zoom-in;
}
.pdp-slide img{ width:100%; height:100%; object-fit:contain; padding:12px; }

.pdp-badge{ top:16px; inset-inline-start:16px; font-size:.9em; padding:6px 10px; }

.pdp-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    border:0; background:rgba(255,255,255,.92); color:#111;
    font-size:26px; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.12);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s;
}
.pdp-stage:hover .pdp-arrow{ opacity:1; }
.pdp-prev{ left:12px; }
.pdp-next{ right:12px; }
@media (hover:none){ .pdp-arrow{ display:none; } }

.pdp-counter{
    position:absolute; bottom:12px; inset-inline-end:12px;
    background:rgba(17,24,39,.7); color:#fff; font-size:.78em;
    padding:4px 10px; border-radius:999px;
}

.pdp-thumbs{
    display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none;
}
.pdp-thumb{
    flex:0 0 72px; height:72px; padding:0;
    border:2px solid var(--pro-line); border-radius:12px; background:#fff; overflow:hidden;
    transition:border-color .15s;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.is-active, .pdp-thumb:hover{ border-color:var(--pro-text); }

/* Info */
.pdp-info{ display:flex; flex-direction:column; gap:16px; text-align:start; }
.pdp-cat{
    font-size:.78em; text-transform:uppercase; letter-spacing:.06em; color:var(--pro-muted); font-weight:600;
}
.pdp-title{
    font-size:clamp(1.4em, 2.4vw, 2em);
    font-weight:700;
    line-height:1.25;
    margin:0;
    color:var(--pro-text);
}
.pdp-pricebox{
    background:var(--pro-card);
    border:1px solid var(--pro-line);
    border-radius:var(--pro-radius);
    padding:16px 18px;
}
.pdp-price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pdp-price{ font-size:2em; font-weight:800; color:var(--pro-price); line-height:1; }
.pdp-old{ font-size:1.05em; color:var(--pro-muted); text-decoration:line-through; }
.pdp-save{
    background:rgba(225,29,72,.1); color:var(--pro-accent);
    font-weight:700; font-size:.85em; padding:4px 8px; border-radius:8px;
}
.pdp-offer{ display:inline-block; margin-top:8px; color:var(--pro-accent); font-size:.85em; font-weight:600; }

.pdp-short{ font-size:1em; line-height:1.7; color:var(--pro-text); opacity:.9; }

.pdp-trust{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.pdp-trust li{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
    font-size:.8em; line-height:1.3; color:var(--pro-text);
    background:var(--pro-card); border:1px solid var(--pro-line); border-radius:12px; padding:12px 8px;
}
.pdp-ico{ font-size:1.35em; }

.pdp-stock{ margin:0; font-size:.9em; font-weight:600; }
.pdp-stock.in{ color:var(--pro-green); }
.pdp-stock.out{ color:var(--pro-accent); }

.pdp-buy{ display:flex; flex-direction:column; gap:10px; }
.pdp-buy form{ margin:0; }
.pdp-btn{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:54px; padding:0 20px;
    border:0; border-radius:12px;
    font-size:1.05em; font-weight:700;
    cursor:pointer;
    transition:transform .1s ease, opacity .2s ease, background .2s ease;
}
.pdp-btn:active{ transform:scale(.98); }
.pdp-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pdp-btn-cart{ background:var(--pro-btn); color:var(--pro-btn-text); }
.pdp-btn-cart:hover{ opacity:.9; }
.pdp-btn-wa{ background:var(--pro-wa); color:#fff; }
.pdp-btn-wa:hover{ background:#1ebe5b; }

/* Beschreibung */
.pdp-details{
    margin-top:40px;
    background:var(--pro-card);
    border:1px solid var(--pro-line);
    border-radius:18px;
    padding:8px 24px 24px;
    text-align:start;
}
.pdp-details-body{ font-size:1em; line-height:1.8; max-width:75ch; }

.pdp-similar{ margin-top:32px; }
.pdp-similar-head{ display:flex; align-items:center; justify-content:space-between; }
.pdp-similar-nav{ display:flex; gap:8px; }
.pdp-arrow-sm{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--pro-line); background:var(--pro-card); color:var(--pro-text);
    font-size:20px; line-height:1;
}

/* Mobile Kaufleiste */
.pdp-sticky{
    position:fixed; left:0; right:0; bottom:0; z-index:1030;
    display:none; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--pro-card); border-top:1px solid var(--pro-line);
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
    transform:translateY(100%); transition:transform .25s ease;
    color:var(--pro-text);
}
.pdp-sticky strong{ font-size:1.2em; display:block; }
.pdp-sticky s{ font-size:.8em; color:var(--pro-muted); }
.pdp-sticky .pdp-btn{ width:auto; min-height:46px; flex:0 0 auto; }
@media (max-width:991px){ .pdp-sticky{ display:flex; } }
.pdp-sticky.is-visible{ transform:translateY(0); }

/* Lightbox */
.pdp-lightbox{
    position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,.92);
    display:flex; align-items:center; justify-content:center;
}
.pdp-lightbox[hidden]{ display:none; }
.pdp-lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; background:#fff; }
.pdp-lb-close, .pdp-lb-nav{
    position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff;
    width:48px; height:48px; border-radius:50%; font-size:26px; line-height:1;
}
.pdp-lb-close{ top:16px; right:16px; font-size:20px; }
.pdp-lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.pdp-lb-next{ right:16px; top:50%; transform:translateY(-50%); }
.pdp-lb-close:hover, .pdp-lb-nav:hover{ background:rgba(255,255,255,.25); }

/* Bootstrap 3 setzt html{font-size:10px} -> eigene Basisgröße, Maße in em */
.pc-grid, .pc-row, .pdp, .pdp-sticky, .pc-section-title{ font-size:16px; }
.pc-section-title{ font-size:1.35em; }
/* Zahlen/Prozent immer links-nach-rechts (sonst "21%-" im Arabischen) */
.pdp-save, .pdp-counter{ direction:ltr; unicode-bidi:isolate; }
/* Lateinische Produktnamen im arabischen Layout richtig darstellen/abschneiden */
.pc-name, .pdp-title, .pdp-short, .pdp-details-body{ unicode-bidi:plaintext; }

/* ================= VARIANTEN (Produktseite) ================= */
.pdp-variants{ border:0; padding:0; margin:0; min-width:0; }
.pdp-variants legend{ font-size:.95em; font-weight:600; margin-bottom:10px; float:none; width:auto; border:0; color:var(--pro-text); }
.pdp-variant-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pdp-variant{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    padding:6px 12px 6px 6px; border:2px solid var(--pro-line); border-radius:999px;
    background:var(--pro-card); font-size:.9em; font-weight:500; margin:0; color:var(--pro-text);
    transition:border-color .15s, box-shadow .15s;
}
[dir="rtl"] .pdp-variant{ padding:6px 6px 6px 12px; }
.pdp-variant input{ position:absolute; opacity:0; pointer-events:none; }
.pdp-swatch{ width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); flex:none; }
.pdp-variant:has(input:checked){ border-color:var(--pro-text); box-shadow:0 0 0 3px rgba(17,24,39,.12); }
.pdp-variant.is-out{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }
.pdp-variant-hint{ color:var(--pro-accent); font-weight:600; margin:8px 0 0; font-size:.9em; }
.pdp-variants.shake{ animation:pdpShake .4s; }
@keyframes pdpShake{ 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }

/* ================= WHATSAPP-DIALOG ================= */
.pdp-wa-dialog{ border:0; border-radius:18px; padding:0; width:min(440px, 92vw); font-size:16px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.pdp-wa-dialog::backdrop{ background:rgba(17,24,39,.55); }
.pdp-wa-dialog form{ padding:22px; display:flex; flex-direction:column; gap:12px; }
.pdp-wa-dialog h3{ margin:0; font-size:1.25em; font-weight:700; }
.pdp-wa-sub{ margin:0; color:#6b7280; font-size:.9em; }
.pdp-wa-dialog label{ display:flex; flex-direction:column; gap:6px; font-size:.85em; font-weight:600; margin:0; }
.pdp-wa-dialog input, .pdp-wa-dialog select{ min-height:48px; padding:0 14px; border:1.5px solid #e5e7eb; border-radius:12px; font-size:16px; font-weight:400; }
.pdp-wa-dialog input:focus, .pdp-wa-dialog select:focus{ outline:none; border-color:#111827; }
.pdp-wa-actions{ display:flex; gap:8px; margin-top:4px; }
.pdp-wa-actions .pdp-btn{ min-height:48px; font-size:.95em; }
.pdp-wa-actions [data-close]{ background:#f3f4f6; color:#111827; flex:0 0 auto; width:auto; }

/* Telefonnummer: Ziffern immer links->rechts ("+212..." sonst verdreht), auf Arabisch rechtsbündig */
input[type="tel"]{ direction:ltr; unicode-bidi:plaintext; }
[dir="rtl"] input[type="tel"]{ text-align:right; }