/* Card: equal height per row, actions aligned at the bottom */
.product.text-center {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product .product__actions {
    margin-top: auto;
}

/* Fixed image box: bottles (uniform 1:2 canvas, see BottleImageExtension)
   are bottom-aligned so titles line up across the row */
.product__image .position-relative {
    height: 380px;
}
.product__image .product__image-link {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding-top: 2%;
}
.product__image img,
.product__image .product__image-img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.product.font-blue,
.product.font-blue *,
.product.font-blue .pricetag,
.product.font-blue .pricetag * {
    color: #23335e !important;
}
/* Base size for everything in the card; individual elements get their own
   sizes below (title > price > meta) - this used to be 1rem !important on
   every element, which flattened the hierarchy. */
.product.font-blue {
    font-size: 1rem;
}

.product__image .category__color--circle{
    position: absolute;
    width: 70%;
    aspect-ratio: 1 / 1;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    z-index: -1;
    background-color: #ae1065;
    background-image: url('/resources/themes/franzxaver/images/dots_pink.png');
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767.98px){

    .product__image .category__color--circle{
        width: 70%;
    }

    .product__image .position-relative{
        height: 300px;
    }

}
/* Grundpreis / MwSt.-Hinweis unter dem Preis */
.product.font-blue .product__baseprice,
.product.font-blue .product__baseprice * {
    font-size: 0.8rem !important;
    line-height: 1.4;
}

/* ==========================================================================
   Produktkarte: Typografie, Hierarchie, Zustände
   Hierarchie: Name (groß, regular) > Preis (fett) > Inhalt/Grundpreis/MwSt (klein, gedämpft)
   ========================================================================== */
.product.font-blue {
    --pc-navy: #002e52;
    --pc-ink: #23335e;
    --pc-muted: #5a6684;
    --pc-sale: #cb1335;
    --pc-yellow: #edbe00;
    position: relative;
}

/* Bild: dezente Bewegung bei Hover / Tastaturfokus in der Karte */
.product.font-blue .product__image .product__image-img,
.product.font-blue .product__image .category__color--circle {
    transition: transform .35s ease;
}
.product.font-blue:hover .product__image .product__image-img,
.product.font-blue:focus-within .product__image .product__image-img {
    transform: translateY(-6px);
}
.product.font-blue:hover .product__image .category__color--circle,
.product.font-blue:focus-within .product__image .category__color--circle {
    transform: translateX(-50%) translateY(-50%) scale(1.04);
}
/* _product.css (Produktseite, "Das könnte Ihnen auch schmecken") setzt
   .product__image img auf min-height 500px - in der Karte gilt der Bildrahmen */
.product.font-blue .product__image .product__image-img {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    position: relative;
    z-index: 1;
}

/* Produkt ohne Bild: Logo im Kreis */
.product.font-blue .product__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 20%;
}
.product.font-blue .product__image-placeholder .product__image-placeholder-logo {
    width: 42%;
    max-width: 140px;
    height: auto !important;
    min-height: 0 !important;
    opacity: .85;
}

/* Badges "Neu" / "-x %" */
.product.font-blue .product__badges {
    position: absolute;
    top: 12px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
.product.font-blue .product__badges .product__badge {
    display: inline-block;
    padding: .3em .75em;
    border-radius: 999px;
    font-size: .75rem !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.product.font-blue .product__badges .product__badge--new {
    background: var(--pc-yellow);
    color: var(--pc-navy) !important;
}
.product.font-blue .product__badges .product__badge--sale,
.product.font-blue .product__badges .product__badge--sale * {
    background: var(--pc-sale);
    color: #fff !important;
}

/* Produktname */
.product.font-blue .product__title {
    margin: 1.1rem 0 .3rem;
    font-size: 1.2rem !important;
    line-height: 1.3;
    /* zwei Zeilen reservieren, damit Preise in einer Reihe auf einer Höhe stehen */
    min-height: 2.6em;
    text-wrap: balance;
}
.product.font-blue .product__title a {
    font-size: 1.2rem !important;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0 !important;
    text-decoration: none;
    text-wrap: balance;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 50% 100%;
    transition: background-size .25s ease;
}
.product.font-blue:hover .product__title a,
.product.font-blue .product__title a:focus-visible {
    background-size: 100% 1px;
}

/* Inhalt (0,75 l) */
.product.font-blue .product__volume {
    min-height: 1.2rem;
    margin: 0 0 .65rem;
    font-size: .8rem !important;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--pc-muted) !important;
}

/* Preis */
.product.font-blue .product__pricing {
    margin-bottom: 1.4rem !important;
}
.product.font-blue .pricetag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: .5rem;
    line-height: 1.2;
}
.product.font-blue .pricetag .price,
.product.font-blue .pricetag strong {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -.005em;
    font-variant-numeric: tabular-nums lining-nums;
}
.product.font-blue .pricetag .product__price-prefix {
    font-size: .875rem !important;
    color: var(--pc-muted) !important;
}
/* Rabatt: Streichpreis klein + gedämpft, aktueller Preis rot */
.product.font-blue .pricetag--sale .strikeout,
.product.font-blue .pricetag--sale .strikeout del {
    font-size: .95rem !important;
    font-weight: 400;
    color: var(--pc-muted) !important;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
}
.product.font-blue .pricetag--sale .discounted .price {
    color: var(--pc-sale) !important;
}

/* Grundpreis / MwSt. */
.product.font-blue .product__baseprice {
    margin-top: .4rem;
}
.product.font-blue .product__baseprice,
.product.font-blue .product__baseprice * {
    font-size: .78rem !important;
    line-height: 1.45;
    color: var(--pc-muted) !important;
}
.product.font-blue .product__baseprice .product__unitprice {
    font-variant-numeric: tabular-nums;
}

/* Aktionen */
.product.font-blue .product__actions {
    row-gap: .55rem;
}
.product.font-blue .product__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 44px;
    padding: .6rem 1.4rem;
    border: 2px solid var(--pc-navy);
    border-radius: 999px;
    background: var(--pc-navy);
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.product.font-blue .product__btn * {
    color: inherit !important;
    font-size: inherit !important;
}
.product.font-blue .product__btn:hover,
.product.font-blue .product__btn:focus-visible {
    background: var(--pc-yellow);
    border-color: var(--pc-yellow);
    color: var(--pc-navy) !important;
}
.product.font-blue .product__btn:active {
    transform: translateY(1px);
}
.product.font-blue .product__details-link {
    display: inline-block;
    padding: .2rem .25rem;
    font-size: .875rem !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
    text-decoration-color: rgba(35, 51, 94, .35);
    transition: text-decoration-color .2s ease;
}
.product.font-blue .product__details-link:hover,
.product.font-blue .product__details-link:focus-visible {
    text-decoration-color: currentColor;
}
.product.font-blue .product__unavailable {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .6rem 1.2rem;
    border: 1px dashed rgba(35, 51, 94, .35);
    border-radius: 999px;
    font-size: .85rem !important;
    color: var(--pc-muted) !important;
}

/* Tastaturfokus: deutlich sichtbar, nur bei Tastaturbedienung */
.product.font-blue a:focus-visible {
    outline: 2px solid var(--pc-navy);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 5px rgba(237, 190, 0, .55);
}
.product.font-blue .product__btn:focus-visible {
    border-radius: 999px;
    box-shadow: none;
}
.product.font-blue a:focus:not(:focus-visible) {
    outline: none;
}

/* Ausverkauft / nicht kaufbar */
.product.font-blue.product--unavailable .product__image-img {
    filter: grayscale(1);
}
.product.font-blue.product--unavailable .product__image .category__color--circle {
    opacity: .4;
}

@media screen and (max-width: 767.98px) {
    .product.font-blue .product__title,
    .product.font-blue .product__title a {
        font-size: 1rem !important;
    }
    .product.font-blue .product__title {
        margin-top: .8rem;
    }
    .product.font-blue .pricetag .price,
    .product.font-blue .pricetag strong {
        font-size: 1.15rem !important;
    }
    .product.font-blue .product__pricing {
        margin-bottom: 1rem !important;
    }
    .product.font-blue .product__btn {
        width: 100%;
        padding: .55rem .6rem;
        font-size: .8rem !important;
        letter-spacing: 0;
    }
    .product.font-blue .product__badges .product__badge {
        font-size: .68rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product.font-blue *,
    .product.font-blue .product__image .product__image-img,
    .product.font-blue .product__image .category__color--circle {
        transition: none !important;
    }
    .product.font-blue:hover .product__image .product__image-img,
    .product.font-blue:focus-within .product__image .product__image-img {
        transform: none;
    }
    .product.font-blue:hover .product__image .category__color--circle,
    .product.font-blue:focus-within .product__image .category__color--circle {
        transform: translateX(-50%) translateY(-50%);
    }
}

/* Karte innerhalb der Produktseite ("Das könnte Ihnen auch schmecken"):
   _product.css-Regeln für das große Produktbild neutralisieren */
#Product .product.font-blue .product__image .category__color--circle {
    width: 70%;
    height: auto;
    z-index: 0;
}
#Product .product.font-blue .product__badges {
    z-index: 2;
}