/******************************************************************************
    Shop Widget
    Dieterle Programmierung
    https://www.dieterle-programmierung.de

    Version : 2.0.0

    Produktkacheln fuer die Shop-Seite. Jede Kachel zeigt Bild, Ueberschrift,
    Kurzbeschreibung, optionale Merkmale, Preis und einen Kauf-Button, der
    auf die CopeCart-Checkout-Seite des Artikels verweist.

    Grundsatz: EIN Produkt je Zeta-HTML-Widget. Im Markup wird nur ein
    Variablenblock gepflegt, shop.js baut daraus die Karte:

        <div class="ShopItem" data-link="..." data-title="..."></div>

    Layout ueber data-layout:
        tile   - Hochkachel, Bild oben (Standard)
        wide   - Querkachel, Bild links, volle Breite

    Variante B (ohne JavaScript): das fertige Markup .ShopList > .ShopGrid >
    .ShopCard direkt schreiben. Siehe Shop-README.md.

    Es werden keine fremden Server angesprochen. CopeCart wird erst beim
    Klick auf den Button geladen.

    Passend zu project-widget.css, article.css und talks.css.
******************************************************************************/


/******************************************************************************
    Design Tokens
******************************************************************************/

.ShopItem,
.ShopList,
.ShopIntro {

    --Accent      : #FFC439;   /* brand gold                        */
    --AccentSoft  : #ffd15f;

    --Heading     : #ffffff;
    --Text        : #e6e8eb;
    --TextMuted   : #aab0b7;

    --Surface     : #3c3f43;   /* = Seitenhintergrund               */
    --SurfaceAlt  : #474b50;   /* Kartenflaeche                     */
    --SurfaceAlt2 : #40444a;
    --Line        : #565b61;

    /* Geometrie */
    --CardMin     : 300px;     /* Mindestbreite einer Karte         */
    --CardMax     : 360px;     /* Maximalbreite der Hochkachel      */
    --MediaRatio  : 16 / 10;   /* Seitenverhaeltnis des Bildes      */
    --MediaWide   : 320px;     /* Bildspalte in der Querkachel      */

    display     : block;
    margin      : 22px auto;
    padding     : 0 18px;
    color       : var(--Text);
    font-family : "Segoe UI", Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.6;
}


/* Hochkachel: Block ist genau so breit wie die Karte, damit Hinweiszeile
   und Ueberschrift buendig zur Kachel stehen. */
.ShopItem {

    max-width : calc(var(--CardMax) + 36px);
}


.ShopItem.ShopWide {

    max-width : 1000px;
}


/* Solange shop.js noch nicht gelaufen ist, bleibt der Variablenblock
   unsichtbar - sonst blitzen die Attribute als leerer Kasten auf. */
.ShopItem:not([data-shop-ready]) {

    min-height : 1px;
}


/******************************************************************************
    Optionale Ueberschrift ueber dem Shop (eigenes Widget)
******************************************************************************/

.ShopIntro {

    max-width : 1000px;
}


.ShopIntroTitle {

    font-size    : 24px;
    font-weight  : 700;
    margin       : 0 0 10px;
    padding-left : 14px;
    border-left  : 5px solid var(--Accent);
    color        : var(--Heading);
}


.ShopIntroLead {

    margin    : 0;
    color     : var(--TextMuted);
    font-size : 15px;
}


/******************************************************************************
    Raster (nur Variante B: mehrere Karten in einem Widget)
******************************************************************************/

.ShopList {

    --CardMax : 1fr;

    max-width : 1000px;
}


.ShopGrid {

    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(var(--CardMin), var(--CardMax)));
    gap                   : 22px;
    justify-content       : start;
    align-items           : stretch;
}


/******************************************************************************
    Karte
******************************************************************************/

.ShopCard {

    position       : relative;
    display        : flex;
    flex-direction : column;
    background     : var(--SurfaceAlt);
    border         : 1px solid var(--Line);
    border-radius  : 14px;
    overflow       : hidden;
    color          : var(--Text);
    box-shadow     : 0 8px 20px rgba(0,0,0,.35);
    transition     : transform .25s, box-shadow .25s, border-color .25s;
}


.ShopCard:hover,
.ShopCard:focus-within {

    transform    : translateY(-4px);
    border-color : var(--Accent);
    box-shadow   : 0 12px 26px rgba(0,0,0,.45), 0 0 14px rgba(255,196,57,.20);
}


/******************************************************************************
    Bildbereich
******************************************************************************/

.ShopMedia {

    position     : relative;
    overflow     : hidden;
    aspect-ratio : var(--MediaRatio);
    background   :
        radial-gradient(circle at 30% 20%, rgba(255,196,57,.18), transparent 60%),
        linear-gradient(160deg, #4a4f56 0%, #34373b 100%);
}


.ShopImage {

    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    object-position : center;
    transition : transform .35s;
}


.ShopCard:hover .ShopImage {

    transform : scale(1.04);
}


/* Optionaler Hinweis auf dem Bild, z. B. "Neu", "Bestseller", "Bundle". */
.ShopBadge {

    position      : absolute;
    top           : 10px;
    left          : 10px;
    z-index       : 3;
    padding       : 3px 10px;
    border-radius : 20px;
    background    : rgba(60,63,67,.88);
    border        : 1px solid var(--Accent);
    color         : var(--Accent);
    font-size     : 11px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    backdrop-filter : blur(4px);

    /* Liegt ueber der Klickflaeche der Karte, darf sie aber nicht abfangen. */
    pointer-events : none;
}


/******************************************************************************
    Textteil
******************************************************************************/

.ShopBody {

    display        : flex;
    flex-direction : column;
    gap            : 8px;
    padding        : 16px 18px 6px;
    flex           : 1 1 auto;
}


.ShopTitle {

    margin      : 0;
    font-size   : 19px;
    font-weight : 600;
    line-height : 1.35;
    color       : var(--Heading);
    transition  : color .25s;
}


.ShopCard:hover .ShopTitle {

    color : var(--Accent);
}


.ShopText {

    margin    : 0;
    font-size : 14px;
    color     : var(--TextMuted);
}


.ShopText:empty {

    display : none;
}


/* Optionale Merkmalsliste, kurz halten (maximal vier Punkte).

   Das Zeta-Theme setzt auf Listen im Textwidget eigene Aufzaehlungszeichen,
   und zwar auf dem li. Ohne !important stehen Punkt und Haken nebeneinander. */
.ShopFeatures,
.ShopFeatures li {

    list-style : none !important;
}


.ShopFeatures {

    margin    : 4px 0 0;
    padding   : 0;
    font-size : 14px;
}


.ShopFeatures li {

    position      : relative;
    padding-left  : 20px;
    margin-bottom : 4px;
    margin-left   : 0;
    color         : var(--Text);
}


.ShopFeatures li::before {

    content     : "\2713";
    position    : absolute;
    left        : 0;
    top         : 0;
    color       : var(--Accent);
    font-weight : 700;
}


/******************************************************************************
    Fusszeile mit Preis und Button
******************************************************************************/

.ShopFoot {

    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 12px;
    flex-wrap       : wrap;
    margin-top      : auto;
    padding         : 14px 18px;
    border-top      : 1px solid rgba(255,255,255,.08);
    background      : rgba(0,0,0,.12);
}


.ShopPrice {

    display        : flex;
    flex-direction : column;
    line-height    : 1.2;
}


.ShopPriceNow {

    font-size   : 22px;
    font-weight : 700;
    color       : var(--Accent);
}


.ShopPriceOld {

    font-size       : 13px;
    color           : var(--TextMuted);
    text-decoration : line-through;
}


/* Pflichtangabe nach Preisangabenverordnung, z. B. "inkl. MwSt." */
.ShopPriceNote {

    font-size : 11px;
    color     : var(--TextMuted);
}


.ShopPrice > span:empty,
.ShopPrice:empty {

    display : none;
}


/******************************************************************************
    Kauf-Button

    Das ::after-Rechteck legt den Link ueber die ganze Karte, damit ein Klick
    irgendwo auf der Kachel ebenfalls zum CopeCart-Checkout fuehrt. Der
    Button bleibt dabei ein echter Link (barrierefrei, Rechtsklick moeglich).
    Ueberstehende Flaeche wird vom overflow:hidden der Karte beschnitten.
******************************************************************************/

.ShopButton {

    position        : relative;
    z-index         : 2;
    display         : inline-block;
    padding         : 11px 22px;
    border          : 0;
    border-radius   : 8px;
    background      : var(--Accent);
    color           : var(--Surface);
    font-size       : 15px;
    font-weight     : 700;
    text-decoration : none;
    white-space     : nowrap;
    cursor          : pointer;
    transition      : background .25s, transform .25s, box-shadow .25s;
}


/* article.css setzt auf jedes <a> eine goldene Unterlinie - hier nicht. */
.Article .ShopButton {

    text-decoration : none;
    border-bottom   : 0;
}


.ShopCard .ShopButton::after {

    content  : "";
    position : absolute;
    inset    : -2000px;
    z-index  : 1;
}


.ShopCard:hover .ShopButton,
.ShopButton:hover,
.ShopButton:focus-visible {

    background : var(--AccentSoft);
    color      : var(--Surface);
    transform  : translateY(-2px);
    box-shadow : 0 6px 16px rgba(0,0,0,.35);
}


.ShopButton:focus-visible {

    outline        : 2px solid #ffffff;
    outline-offset : 2px;
}


/******************************************************************************
    Hinweiszeile unter der Karte (Anbieter, Zahlungsabwicklung)
******************************************************************************/

.ShopNote {

    margin     : 10px 2px 0;
    font-size  : 12px;
    color      : var(--TextMuted);
    text-align : right;
}


.ShopNote:empty {

    display : none;
}


.ShopNote a {

    color : var(--TextMuted);
}


/******************************************************************************
    Variante: breite Querkachel (Bild links, Text rechts)
******************************************************************************/

.ShopItem.ShopWide .ShopCard,
.ShopList.ShopWide .ShopCard {

    display               : grid;
    grid-template-columns : minmax(0, var(--MediaWide)) 1fr;
    grid-template-areas   : "media body"
                            "media foot";
}


.ShopItem.ShopWide .ShopMedia,
.ShopList.ShopWide .ShopMedia {

    grid-area    : media;
    aspect-ratio : auto;
    height       : 100%;
    min-height   : 220px;
}


.ShopItem.ShopWide .ShopBody,
.ShopList.ShopWide .ShopBody {

    grid-area : body;
    padding   : 20px 22px 8px;
}


.ShopItem.ShopWide .ShopFoot,
.ShopList.ShopWide .ShopFoot {

    grid-area  : foot;
    padding    : 14px 22px 18px;
    border-top : 0;
    background : transparent;
}


.ShopList.ShopWide .ShopGrid {

    grid-template-columns : 1fr;
}


/******************************************************************************
    Responsive
******************************************************************************/

@media (max-width: 700px) {

    .ShopItem.ShopWide .ShopCard,
    .ShopList.ShopWide .ShopCard {

        grid-template-columns : 1fr;
        grid-template-areas   : "media"
                                "body"
                                "foot";
    }

    .ShopItem.ShopWide .ShopMedia,
    .ShopList.ShopWide .ShopMedia {

        aspect-ratio : var(--MediaRatio);
        min-height   : 0;
    }
}


@media (max-width: 620px) {

    .ShopItem,
    .ShopList {

        --CardMin : 100%;
    }

    .ShopFoot {

        justify-content : flex-start;
    }

    .ShopButton {

        flex       : 1 1 100%;
        text-align : center;
    }
}


/******************************************************************************
    Bewegung reduzieren
******************************************************************************/

@media (prefers-reduced-motion: reduce) {

    .ShopCard,
    .ShopImage,
    .ShopButton,
    .ShopTitle {

        transition : none;
    }

    .ShopCard:hover,
    .ShopCard:hover .ShopImage,
    .ShopCard:hover .ShopButton {

        transform : none;
    }
}


/******************************************************************************
    Druck / PDF
******************************************************************************/

@media print {

    .ShopItem,
    .ShopList,
    .ShopIntro {

        color : #222;
    }

    .ShopIntroTitle,
    .ShopTitle {

        color : #111;
    }

    .ShopCard {

        background   : #fff;
        border       : 1px solid #ccc;
        box-shadow   : none;
        break-inside : avoid;
    }

    .ShopButton {

        background : #eee;
        color      : #111;
    }
}