/* ── Produkt Side Styles ── */
.breadcrumbs {
    padding: 20px 0;
    font-size: 13px;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.pd-layout {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    align-items: flex-start;
    opacity: 1;
    transition: opacity .25s ease;
}

/* Reducerer den generelle section-padding på 88px, så relaterede produkter rykker tættere på indholdet */
.pd-related-section {
    padding: 36px 0 72px !important;
}

/* Titel/pris/stats blev sat med textContent lige så snart produkter.json var
   hentet, mens billedet først dukkede op når selve billedfilen var færdig
   downloadet fra butikkens server (en helt separat netværksforespørgsel) —
   det så ud som om siden loadede "stykke for stykke" i stedet for på én
   gang. produkt.js fjerner denne klasse først når BÅDE data og billede er
   klar, så det hele blender ind samtidig. */
.pd-layout.pd-loading {
    opacity: 0;
}

/* Sidebar / Venstre side */
.pd-sidebar {
    flex: 0 0 350px;
    position: sticky;
    top: 30px;
}

/* Hvid baggrund + lille padding, ligesom .product-photo i styles.css —
   ellers viser produktfotoets egen lyse baggrund mod var(--surface)s mørke
   som en tyk "kant" hele vejen rundt, fordi billedet aldrig fylder boksen ud
   (fast max-height 250px levnede meget luft på et 350px bredt sidebar-panel). */
.pd-gallery {
    background: var(--foto-flade);
    border-radius: 16px;
    padding: 12px;
    text-align: center;
    position: relative;
    border: 1px solid var(--border);
    margin-bottom: 25px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-gallery img,
.pd-gallery svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdetail-fav {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pdetail-fav:hover,
.pdetail-fav.fav-heart-active {
    color: var(--primary);
    transform: scale(1.1);
}

.pd-title {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    margin-bottom: 8px;
    line-height: 1.1;
}

.pd-meta {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
}

.pd-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.pd-stat-box {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.pd-stat-box strong {
    display: block;
    font-size: 20px;
    color: var(--text);
}

.pd-stat-box span {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-buybox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.pd-bb-label {
    font-size: 13px;
    color: var(--muted);
}

.pd-bb-price {
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
    margin: 5px 0;
    letter-spacing: -1px;
}

.pd-bb-vendor {
    font-size: 14px;
    margin-bottom: 5px;
}

.pd-stock {
    font-size: 13px;
    color: var(--succes);
    /* Grøn */
    font-weight: 600;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

/* Lagerprik. Farven følger den FAKTISKE status fra feedet (offers.in_stock)
   — den var før hardkodet grøn på hvert produkt. */
.stock-dot {
    width: 8px;
    height: 8px;
    background: var(--succes);
    border-radius: 50%;
    display: inline-block;
}

.stock-dot.er-udsolgt {
    background: var(--muted);
}

.pd-lager-ude {
    color: var(--muted);
}

/* Højre side / Tabs */
.pd-main {
    flex: 1;
    min-width: 0;
}

.pd-tabs-nav {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 30px;
}

.pd-tab {
    background: none;
    border: none;
    padding: 10px 0;
    font-size: 16px;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

.pd-tab:hover {
    color: var(--text);
}

/* --- PRICE ALERT BUTTON --- */
/* Erstatter .pd-alert-btn ("Få besked ved prisfald"), som var en knap uden
   virkning — se begrundelsen i views/produkt.php. Bevidst en tekstlinje og
   ikke en knap: den beskriver hvad favorithjertet ovenfor gør, den er ikke
   en handling i sig selv. */
.pd-fav-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 1rem;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.pd-fav-hint svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary);
}

.pd-fav-hint a {
    color: var(--primary);
    text-decoration: underline;
}

/* .modal-overlay/.modal-content/.modal-input er fjernet sammen med
   prisalarm-knappen. De stylede #pa-modal, som aldrig har eksisteret i
   markup'en. Admin-panelet har sine egne modal-regler i admin.css og
   loader ikke denne fil. */

.pd-tab.active {
    color: var(--text);
}

.pd-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.pd-tab-panel {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.pd-tab-panel.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Store List (Priser Tab) */
.store-list-head {
    display: flex;
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.sl-col-butik {
    flex: 2;
}

.sl-col-lager {
    flex: 2;
    text-align: center;
}

.sl-col-pris {
    flex: 1.5;
    text-align: right;
}

.sl-col-btn {
    width: 140px;
    text-align: right;
}

.store-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.store-row:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.store-row-highlight {
    border: 1px solid var(--succes);
    background: rgba(62, 199, 127, 0.03);
}

.store-row .sl-col-butik {
    font-weight: 600;
    font-size: 15px;
}

/* BILLIGST-mærket på den øverste tilbudsrække.
   Stod som en inline style i produkt.js, hvor det hardkodede sine egne
   farver — den slags overlever ikke et temaskift, fordi ingen leder efter
   farver inde i et template-literal. Her følger det variablerne. */
.sl-bedst-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--succes);
    color: var(--paa-farve);
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
}

.store-row .sl-col-lager {
    font-size: 13px;
    color: var(--succes);
    font-weight: 500;
}

/* Viser hvad der reelt adskiller to tilbud fra samme butik (samme EAN på
   to stelstørrelser slået sammen til ét produkt, se invariant 19) — uden
   den ser to "Kildemoes"-rækker ud som samme vare vist to gange. */
.sl-variant {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
}

/* Udsolgt skal ikke se ud som en grøn bekræftelse. */
.store-row .sl-col-lager.er-udsolgt {
    color: var(--muted);
}

.store-row .sl-col-pris {
    font-weight: 700;
    font-size: 18px;
}

/* Historik Tab */
.pd-chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px;
}

/* Tomtilstand hvor den hardkodede graf stod. .pd-chart-meta ("30 dage"),
   .pd-chart-legend, .c-dot, .c-green og .c-red hørte alle til den falske
   kurve og er fjernet med den — ingen af dem bruges andre steder. */
.pd-chart-tom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 44px 24px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
}

.pd-chart-tom svg {
    width: 40px;
    height: 40px;
    color: var(--faint);
}

.pd-chart-tom p {
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.55;
}

.pd-chart-footer {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ph-box strong {
    font-size: 24px;
    display: block;
    margin-top: 4px;
}

/* Sættes af produkt.js når feltet rummer en forklaring i stedet for et
   beløb ("Ikke nok historik endnu"). Uden den blev sætningen sat i samme
   24px som en pris og læst som et tal. */
.ph-box strong.ph-box-tom {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.4;
}

/* Specifikationer */
.pd-specs-card,
/* Foldet sammen som standard (invariant: må ikke råbe højere end prisen).
   Havde ingen egne regler for summary/h4/p, så den arvede sidens almindelige
   overskrift- og brødtekst-størrelser — selv lukket fyldte 30px padding og
   en fuldstørrelses <summary> lige så meget som butiksrækken ovenover. */
.pd-faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 20px;
}

.pd-faq[open] {
    padding-bottom: 18px;
}

.pd-faq summary {
    cursor: pointer;
    padding: 12px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}

.pd-faq summary:hover {
    color: var(--text);
}

.pd-faq h4 {
    font-size: 13.5px;
    margin: 14px 0 4px;
}

.pd-faq p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.pd-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.pd-specs-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.pd-specs-table td:first-child {
    color: var(--muted);
    width: 40%;
}

.pd-desc-box {
    background: var(--bg);
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    /* Flyttet til Priser-fanen, foran .pd-faq — den har intet margin-top af
       sin egen (den fik tidligere sin afstand fra .pd-specs-table ovenover),
       så uden denne ville boksen sidde klemt op ad FAQ'en. */
    margin-bottom: 30px;
}

.pd-desc-box h5 {
    margin: 0 0 10px 0;
    font-size: 15px;
}

/* Responsive break */
@media (max-width: 900px) {
    .pd-layout {
        flex-direction: column;
    }

    .pd-sidebar {
        flex: none;
        width: 100%;
        position: relative;
        top: 0;
    }

    .store-list-head {
        display: none;
    }

    .store-row {
        flex-wrap: wrap;
        text-align: left;
    }

    .sl-col-butik {
        width: 100%;
        margin-bottom: 5px;
        flex: none;
    }

    .sl-col-lager {
        width: 50%;
        text-align: left;
        flex: none;
    }

    .sl-col-pris {
        width: 50%;
        text-align: right;
        flex: none;
        margin-bottom: 15px;
    }

    .sl-col-btn {
        width: 100%;
        text-align: center;
    }

    .sl-col-btn .btn {
        width: 100%;
    }
}