/*
 * Brand pages (body.mpbrand-index-view), like the live shop:
 *  - headline with logo, sub headline and line above the filters
 *  - product tiles: grey image area, 14px name, orange price, green delivery time, black "zum produkt" button, 4 per row
 *  - content below the product list (guide text, FAQ, news ...)
 * Plain CSS, no Tailwind rebuild. Loaded by layout/hyva_mpbrand_index_view.xml.
 */

/* ---------- Headline area + imported content blocks ---------- */
.gp-brand-top {
    margin-bottom: 1rem;
}
.gp-brand-content {
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
.gp-brand-content::after {
    content: "";
    display: block;
    clear: both;
}
.gp-brand-content p {
    margin: 0 0 10px;
}
.gp-brand-content ul,
.gp-brand-content ol {
    margin: 0 0 25px;
    padding-left: 40px;
}
.gp-brand-content ul {
    list-style: disc;
}
.gp-brand-content ol {
    list-style: decimal;
}
.gp-brand-content li {
    margin: 0 0 10px;
}
.gp-brand-content a {
    color: #ff6101;
    text-decoration: none;
}
.gp-brand-content a:hover {
    text-decoration: underline;
}
.gp-brand-content img {
    max-width: 100%;
    height: auto;
}
.gp-brand-content hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #ddd;
}
.gp-brand-content h1,
.gp-brand-content h2 {
    margin: 10px 0 20px;
    color: #212121;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}
.gp-brand-content h3 {
    margin: 10px 0 20px;
    color: #212121;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: none;
}
.gp-brand-content h4:empty,
.gp-brand-content h2:empty {
    display: none;
}

/* generated headline (brands without imported headline content) */
.gp-brand-head__title {
    font-size: 32px;
}
.gp-brand-head__logo {
    float: right;
    width: auto;
    max-width: 300px;
    max-height: 93px;
    margin: 0 0 0 20px;
}
.gp-brand-head__sub {
    font-size: 24px;
}

/* paragraphs of the imported blocks */
.gp-brand-content .gp-cms-paragraph {
    margin: 0 0 10px;
}
.gp-brand-content .gp-teaser {
    margin: 0 0 20px;
}

/* FAQ accordion (details / summary) */
.gp-brand-content .gp-accordion {
    margin: 0 0 20px;
}
.gp-brand-content .gp-accordion details {
    border: 1px solid #dcdcdc;
    background: #fff;
}
.gp-brand-content .gp-accordion details + details {
    margin-top: -1px;
}
.gp-brand-content .gp-accordion summary {
    position: relative;
    padding: 12px 40px 12px 15px;
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.gp-brand-content .gp-accordion summary::-webkit-details-marker {
    display: none;
}
.gp-brand-content .gp-accordion summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6101;
    font-size: 22px;
    font-weight: 400;
}
.gp-brand-content .gp-accordion details[open] > summary::after {
    content: "\2212";
}
.gp-brand-content .gp-accordion details > div {
    padding: 0 15px 12px;
}

/* news cards (blog articles of the brand) */
.gp-brand-content .gp-brand-news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 0 0 20px;
}
.gp-brand-content .gp-brand-news__item {
    display: block;
    color: #212121;
}
.gp-brand-content .gp-brand-news__item img {
    display: block;
    width: 100%;
    margin: 0 0 8px;
}
.gp-brand-content .gp-brand-news__item span {
    font-weight: 700;
}

/* buttons */
.gp-brand-content .gp-brand-button {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 10px 20px;
    background: #ff6101;
    color: #fff;
    font-weight: 700;
}
.gp-brand-content .gp-brand-button:hover {
    background: #e55600;
    color: #fff;
    text-decoration: none;
}


.gp-brand-bottom {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* phones: headline a bit smaller, logo above the text */
@media (max-width: 767px) {
    .gp-brand-content h1 span,
    .gp-brand-head__title {
        font-size: 20px !important;
    }
    .gp-brand-head__logo {
        float: none;
        display: block;
        margin: 0 0 10px;
        max-width: 200px;
    }
    .gp-brand-head__sub {
        font-size: 18px;
    }
}

/* banner image block (wrapper with a background colour and one image) */
.gp-brand-content .gp-brand-raw .dgm-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* banner images (teaser without link) */
.gp-brand-content .gp-brand-banner {
    margin: 0 0 20px;
}
.gp-brand-content .gp-brand-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Phones / small tablets: the imported guide layouts (padding 70px, fixed image heights, long headings) ---------- */
@media (max-width: 767px) {
    .gp-brand-top,
    .gp-brand-bottom,
    .gp-category-top,
    .gp-category-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }
    .gp-brand-content {
        overflow-wrap: break-word;
    }
    .gp-brand-content h1,
    .gp-brand-content h2,
    .gp-brand-content h3 {
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.2;
    }
    .gp-brand-content h1,
    .gp-brand-content h2 {
        font-size: 20px;
    }
    .gp-brand-content h3 {
        font-size: 18px;
    }
    /* the headline spans carry inline pt sizes made for desktop */
    .gp-brand-content h1 span,
    .gp-brand-content h2 span,
    .gp-brand-content h3 span {
        font-size: inherit !important;
    }
    .gp-brand-content p,
    .gp-brand-content li,
    .gp-brand-content [style*="text-align: justify"] {
        text-align: left !important;
    }
    .gp-brand-content img[style*="float"],
    .gp-brand-content img[align] {
        float: none !important;
        display: block;
        margin: 10px auto !important;
    }
    .gp-brand-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* layout blocks of the guides: columns can shrink, less inner padding, images fit the width */
    .gp-brand-content .gp-brand-raw div {
        min-width: 0;
    }
    .gp-brand-content .dgm-flex > div,
    .gp-brand-content .dgm-flex-3 > div,
    .gp-brand-content .dgm-flex-4 > div,
    .gp-brand-content .dgm-flex2 > div {
        min-width: 0;
        max-width: 100%;
    }
    .gp-brand-content .dgm-flex > div.inner-padding,
    .gp-brand-content .inner-padding,
    .gp-brand-content .grey-1 {
        padding: 24px 16px !important;
    }
    .gp-brand-content .inner-padding .neg-margin {
        margin: -24px -16px 24px !important;
    }
    .gp-brand-content .text-padding {
        padding: 24px 16px !important;
    }
    .gp-brand-content .text-padding > * {
        max-width: 100%;
    }
    .gp-brand-content .first-container,
    .gp-brand-content .head-padding,
    .gp-brand-content .head-padding2 {
        padding-left: 0;
        padding-right: 0;
    }
    .gp-brand-content .dgm-flex.dgm-inline-width > div.dgm-flex-order-2 img,
    .gp-brand-content .dgm-inline-width-phone .img-responsive {
        max-width: 100% !important;
        height: auto !important;
        margin: 15px auto !important;
    }
    .gp-brand-content .triangle-left::after,
    .gp-brand-content .triangle-right::after {
        display: none;
    }
    .gp-brand-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .gp-brand-content .gp-accordion summary {
        font-size: 15px;
    }
    /* headlines inside the layout blocks come with big sizes from the desktop CSS */
    .gp-brand-content .gp-brand-raw h1,
    .gp-brand-content .gp-brand-raw h2,
    .gp-brand-content .gp-brand-raw h3,
    .gp-brand-content .gp-brand-raw h4 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }
}

/* tablets: long single words in the big layout headlines must not run out of their column */
@media (max-width: 1134px) {
    .gp-brand-content .gp-brand-raw h1,
    .gp-brand-content .gp-brand-raw h2,
    .gp-brand-content .gp-brand-raw h3 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* the layout blocks of the guide texts (dark / grey image + text rows) run over the full window width, like on live */
.gp-brand-bottom .gp-brand-raw,
.gp-category-bottom .gp-brand-raw {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
body.mpbrand-index-view,
body.catalog-category-view {
    overflow-x: clip;
}

/* tablets and phones: the image rows with captions use full width, no side margins */
@media (max-width: 1024px) {
    .gp-brand-content .dgm-flex.img-descriptive > div {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---------- Product tiles (live: .cs-product-tile--brand) ---------- */
@media (min-width: 1024px) {
    body.mpbrand-index-view.page-products .products.products-grid > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}
body.mpbrand-index-view .products-grid .gp-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}
/* grey image area */
body.mpbrand-index-view .products-grid .gp-card .product-item-photo {
    margin: 0;
    padding: 15px;
    background: #f9f9f9;
    text-align: center;
}
body.mpbrand-index-view .products-grid .gp-card .product-info {
    padding: 15px;
}
/* name: 14px, dark, two lines */
body.mpbrand-index-view .products-grid .gp-card .gp-card__title {
    margin: 0 0 10px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}
body.mpbrand-index-view .products-grid .gp-card .gp-card__title a {
    -webkit-line-clamp: 2;
    min-height: 40px;
    color: #333;
}
body.mpbrand-index-view .products-grid .gp-card .gp-card__title a:hover {
    color: #000;
    text-decoration: underline;
}
/* price: orange, bold */
body.mpbrand-index-view .products-grid .gp-card .price-box {
    margin-bottom: 15px;
}
body.mpbrand-index-view .products-grid .gp-card .price-box .final-price .price,
body.mpbrand-index-view .products-grid .gp-card .price-box .price-container .price {
    color: #ff6101;
    font-size: 18px;
    font-weight: 700;
}
/* delivery time: dark green, 13px */
body.mpbrand-index-view .products-grid .gp-card .gp-card__footer {
    padding-top: 10px;
}
body.mpbrand-index-view .products-grid .gp-card__delivery,
body.mpbrand-index-view .products-grid .gp-card__delivery strong {
    margin: 0 0 12px;
    color: #006600;
    font-size: 13px;
}
body.mpbrand-index-view .products-grid .gp-card__delivery strong {
    margin: 0;
    font-weight: 600;
}
/* "zum produkt": black, lower case, rounded */
body.mpbrand-index-view .products-grid .gp-card__button {
    padding: 12px 15px;
    background: #000;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    text-transform: lowercase;
}
body.mpbrand-index-view .products-grid .gp-card__button:hover,
body.mpbrand-index-view .products-grid .gp-card__button:focus {
    background: #333;
    color: #fff;
}

/* hidden on phones / on desktop (live: display controller of the content blocks) */
@media (max-width: 767px) {
    .gp-brand-content .gp-hide-mobile {
        display: none;
    }
}
@media (min-width: 768px) {
    .gp-brand-content .gp-hide-desktop {
        display: none;
    }
}

/* category links + buttons inside the guide texts */
.gp-brand-content .brand-category-link {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 6px 14px;
    border: 1px solid #dcdcdc;
    color: #333;
}
.gp-brand-content .brand-category-link:hover {
    border-color: #ff6101;
    color: #ff6101;
    text-decoration: none;
}
.gp-brand-content .dgm-button {
    display: inline-block;
    padding: 8px 16px;
    background: #ff6101;
    color: #fff;
    font-weight: 700;
}
.gp-brand-content .dgm-button:hover {
    background: #e55600;
    color: #fff;
    text-decoration: none;
}
.gp-brand-content .dreispalten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.gp-brand-content .dreispalten > div {
    flex: 1 1 260px;
}

/* click-to-play YouTube embeds (script: Magento_Cms/templates/gp-cms-scripts.phtml) */
.gp-brand-content .video-container {
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
}
.gp-brand-content .youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.gp-brand-content .youtube img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
}
.gp-brand-content .youtube .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 90px;
    height: 60px;
    margin: -30px 0 0 -45px;
    background: #333;
    border-radius: 6px;
    opacity: .8;
}
.gp-brand-content .youtube .play-button::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 32px;
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff;
}
.gp-brand-content .youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* news cards (live: image teaser with N items per row): N columns on tablet and desktop, fixed columns on phones */
@media (min-width: 768px) {
    .gp-brand-content .gp-brand-news--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-brand-content .gp-brand-news--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gp-brand-content .gp-brand-news--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .gp-brand-content .gp-brand-news--m1 { grid-template-columns: minmax(0, 1fr); }
    .gp-brand-content .gp-brand-news--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}