/*
Theme Name: Sober Child Theme
Theme URI: http://uix.store/sober/
Author: UIX Themes
Author URI: http://uix.store
Description: Sober is a fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sober
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: sober
*/

/* =========================================================
   Bobbin Lace — Brand Customisations
   All overrides go here, never in the parent theme.
   ========================================================= */

/* --- Brand palette ---
   Cream white:   #faf8f5
   Warm taupe:    #b09a88
   Deep charcoal: #1a1a22
   Text grey:     #555555
*/

/* Accent / highlight colour (buttons, links hover, badges) */
.button,
button,
input[type="submit"],
.btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: #1a1a22;
    border-color: #1a1a22;
    color: #fff;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #b09a88;
    border-color: #b09a88;
    color: #fff;
}

/* Page background — warm off-white */
body {
    background-color: #faf8f5;
}

/* Logo sizing in sticky header */
.site-header.is-sticky .logo img {
    max-height: 48px;
    width: auto;
}

/* Logo base size */
.logo img {
    max-height: 64px;
    width: auto;
}

/* Footer bottom bar */
.site-footer {
    background-color: #1a1a22;
    color: #aaa;
}

.site-footer a {
    color: #ccc;
}

.site-footer a:hover {
    color: #b09a88;
}

/* Footer menu link separator */
.footer-menu li + li::before {
    content: '·';
    margin: 0 0.5em;
    color: #555;
}

/* Footer social icons.
   The theme renders these as a bare 14px FontAwesome glyph with no chrome, so
   a lone Facebook link read as a stray lowercase "f" floating on the dark
   footer rather than as a logo. Give it a real badge: larger glyph, circular
   outline, a 40px hit area (the bare glyph was well under the 24px minimum
   touch target), and an accent hover matching the footer link colour. */
.site-footer .socials-menu li {
    padding: 0;
}

.site-footer .socials-menu li + li {
    margin-left: 10px;
}

.site-footer .socials-menu a {
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 18px;
    text-align: center;
    color: #f0ece8;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-footer .socials-menu a:hover,
.site-footer .socials-menu a:focus-visible {
    background-color: #b09a88;
    border-color: #b09a88;
    color: #1a1a22;
}

/* Remove uix demo placeholder images from empty gallery/about pages */
.no-thumbnail .entry-thumbnail {
    display: none;
}

/* =========================================================
   Home Page Fixes
   ========================================================= */

/* --- Fix 1: RevSlider loading spinner ---
   The slider's two-dot loading indicator stays visible after load.
   Hide it to prevent visual clutter over the hero image. */
.rs-loader,
.tp-loader,
rs-loader,
.rev_slider .loader {
    display: none !important;
    visibility: hidden !important;
}

/* --- Fix 2 (revised): Category banner layout ---
   The three banners (Torchon, Traditionelle, Chantilly) had
   mismatched heights (630-984px) and the previous fix broke
   the text overlay by changing banner-content to position:relative.
   The parent theme expects banner-content to be position:absolute.

   Fix: fixed height + absolute-position the image for cover-crop,
   keep banner-content absolute but reposition to bottom-center
   with a gradient overlay for readability. */

/* Equal-height banner containers */
.vc_row-no-padding .sober-banner {
    height: 500px;
    overflow: hidden;
    position: relative;
}

/* Force the <a> wrapper to fill the container */
.vc_row-no-padding .sober-banner a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Cover-crop the image to fill the fixed-height container */
.vc_row-no-padding .sober-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 1s;
}

/* Reposition banner text overlay: bottom-center with gradient */
.vc_row-no-padding .sober-banner .banner-content {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    z-index: 2;
    text-align: center;
    padding: 40px 20px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

/* White text on the gradient backdrop */
.vc_row-no-padding .sober-banner .banner-content,
.vc_row-no-padding .sober-banner .banner-content h2,
.vc_row-no-padding .sober-banner .banner-content h3,
.vc_row-no-padding .sober-banner .banner-content h4,
.vc_row-no-padding .sober-banner .banner-content .banner-text,
.vc_row-no-padding .sober-banner .banner-content .sober-button {
    color: #fff !important;
}

/* Subtle underline on the CTA link */
.vc_row-no-padding .sober-banner .sober-button::after {
    background-color: #fff !important;
}

/* --- Fix 2b: About section banner overflow ---
   The 4th .sober-banner (in the "Über Jaroslava" section) has
   white "Über 20 Jahre..." overlay text that bleeds into
   the "Warum digitale Muster?" section below.
   Clip it to its container. */
.sober-banner {
    overflow: hidden !important;
}

/* --- Fix 2c: Footer readability --- */

/* Newsletter heading — dark text on dark footer bg = invisible */
.site-footer .widget-title,
.site-footer h3,
.footer-content h3 {
    color: #faf8f5 !important;
}

/* Copyright line in footer bottom bar */
.site-footer .copyright,
.site-footer .footer-info .copyright {
    color: #aaa;
}

/* --- Fix 3: "Warum digitale Muster?" section contrast ---
   The heading and text are white (#fff) on a light background,
   making them nearly invisible. Override to charcoal/taupe. */
.vc_custom_bl007 h2,
.vc_custom_bl007 .vc_custom_heading,
.vc_custom_bl007 h2.vc_custom_heading {
    color: #1a1a22 !important;
}

.vc_custom_bl007 .wpb_text_column,
.vc_custom_bl007 .wpb_text_column p,
.vc_custom_bl007 .wpb_content_element,
.vc_custom_bl007 h4,
.vc_custom_bl007 h3 {
    color: #555555 !important;
}

/* Add subtle separator line under the heading */
.vc_custom_bl007 h2.vc_custom_heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #b09a88;
    margin: 16px auto 0;
}

/* Feature icons in the value-prop section — brand taupe */
.vc_custom_bl007 .vc_icon_element .vc_icon_element-icon,
.vc_custom_bl007 i {
    color: #b09a88 !important;
}

/* --- Products section — RESTORED ---
   Re-enabled once real products are available.
   Replace demo products via WooCommerce > Products. */

/* =========================================================
   About Section — Professional Treatment
   Target: .vc_custom_bl005 row (Über Jaroslava Pereny)
   ========================================================= */

/* Section wrapper — warm cream background + generous vertical breathing room */
.vc_custom_bl005 {
    background-color: #faf8f5 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Text column inner — extra horizontal padding for editorial feel */
.vc_custom_bl006a .vc_column-inner {
    padding-left: 48px !important;
    padding-right: 24px !important;
}

/* Styled pre-label above the heading — brand mark in taupe small-caps */
.vc_custom_bl006b::before {
    content: '— Über mich —';
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b09a88;
    margin-bottom: 18px;
    font-family: inherit;
}

/* Heading — refined weight, spacing, brand charcoal */
.vc_custom_bl006b {
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: #1a1a22 !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* Taupe accent line under heading — consistent with rest of site */
.vc_custom_bl006b::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background-color: #b09a88;
    margin-top: 20px;
    margin-bottom: 28px;
}

/* Body text — better readability, refined line height */
.vc_custom_bl006a .wpb_text_column,
.vc_custom_bl006a .wpb_text_column p {
    color: #555555 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin-bottom: 16px !important;
}

/* Image — warm border frame treatment */
.vc_custom_bl005 .wpb_single_image img {
    border: 6px solid #ede8e0;
    padding: 5px;
    background-color: #fff;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Button — ghost/outline style for premium editorial look */
.vc_custom_bl005 .sober-button {
    display: inline-block;
    border: 1.5px solid #1a1a22 !important;
    background: transparent !important;
    color: #1a1a22 !important;
    padding: 11px 30px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-top: 16px;
    transition: background 0.25s ease, color 0.25s ease;
    text-decoration: none;
}

.vc_custom_bl005 .sober-button:hover {
    background: #1a1a22 !important;
    color: #fff !important;
}

/* =========================================================
   Products Section — heading polish
   Target: .vc_custom_bl004
   ========================================================= */

.vc_custom_bl004 .vc_custom_heading,
.vc_custom_bl004 h2 {
    letter-spacing: 0.06em;
    color: #1a1a22;
}


/* =========================================================
   Single Product — Bobbin Lace pattern pages
   ========================================================= */

/* --- Product image sizing ---
   Pattern scans are tall and portrait; at full width they dwarfed the
   summary column. Cap the gallery so it reads as ~1.2x the summary
   height. The px value is the no-JS fallback; functions.php refines it
   to the exact ratio after layout. */
/* Constrain the IMAGE, not the container.
   Two Sober behaviours make the container approach fail:
     1. It comments out the base `woocommerce-product-gallery` class in its
        product-image.php override, so that selector matches nothing.
     2. For layout-style-1 it sets
          div.images .woocommerce-product-gallery__wrapper { height: auto !important }
        which breaks any height:100% chain — the image then renders at its
        natural size and a fixed-height container with overflow:hidden
        simply slices it in half.

   Capping max-height on the img itself needs no parent height, cannot crop,
   and gives X photos and XY previews the same on-screen height. */
.single-product div.images .woocommerce-product-gallery__image img,
.single-product div.images img.wp-post-image {
    max-height: var(--bl-product-image-height, 540px);
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    background-color: transparent;
}

/* Stacked mobile layout: let the image breathe again */
@media (max-width: 768px) {
    /* Stacked layout: let the image use the full column width again. */
    .single-product div.images .woocommerce-product-gallery__image img,
    .single-product div.images img.wp-post-image {
        max-height: none;
        width: 100% !important;
    }
}

/* --- Description / tabs background ---
   The tab panel rendered on white, which cut a hard rectangle out of
   the cream page. Match the page background instead. */
.single-product .woocommerce-tabs,
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .wc-tab,
.single-product .woocommerce-Tabs-panel,
.single-product .woocommerce-tabs .wc-tabs-wrapper,
.single-product div.product .woocommerce-tabs ul.tabs li,
.single-product div.product .woocommerce-tabs ul.tabs li a {
    background-color: transparent;
}

.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-Tabs-panel {
    background-color: #faf8f5;
    box-shadow: none;
    border: 0;
}

/* --- Spec list inside the description --- */
.bl-specs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bl-specs li {
    padding: 7px 0;
    border-bottom: 1px solid #ede8e0;
    color: #555555;
    font-size: 14px;
}

.bl-specs li:last-child {
    border-bottom: 0;
}

.bl-specs strong {
    display: inline-block;
    min-width: 110px;
    color: #1a1a22;
    font-weight: 600;
}

/* Clean shop-grid thumbnail (watermark-free) */
.bl-clean-thumb {
    width: 100%;
    height: auto;
}

/* =========================================================
   Product grid — equal-height thumbnails
   Applies to shop, category archives, "Ähnliche Produkte"
   (related), up-sells and cross-sells.
   ========================================================= */

/* The catalogue's source images run from 0.43 to 2.72 in aspect
   ratio (tall Madonna patterns vs. wide doilies), which made the
   grid ragged. Median is 0.75, so every tile gets a fixed 3:4
   portrait box.

   object-fit is CONTAIN, never cover: these are patterns and
   artworks — cropping would cut the motif off. Odd-shaped images
   letterbox inside the box instead of being trimmed. */
/* NOTE: do NOT give .button its own position here. Sober parks the hover
   buttons at `top: 100%` INSIDE .product-header and slides them up
   (translateY(-72px)) into view on hover. Positioning .button collapses
   add-to-cart, wishlist, quick-view and compare onto the same spot.
   `overflow: hidden` matches Sober's own value and is what keeps the
   buttons tucked away until they slide up. */
.woocommerce ul.products li.product .product-header,
ul.products li.product .product-header {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

.woocommerce ul.products li.product .product-header > a,
ul.products li.product .product-header > a {
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce ul.products li.product .product-header > a img,
ul.products li.product .product-header > a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0;
    padding: 0;
}

/* Related-products carousel inherits the same tiles */
.related.products ul.products li.product .product-header,
.up-sells ul.products li.product .product-header {
    aspect-ratio: 3 / 4;
}

/* --- Quick View: pattern specs between price and add-to-cart --- */
.product-quickview .bl-quickview-specs {
    margin: 18px 0 22px;
    padding: 16px 0 0;
    border-top: 1px solid #ede8e0;
}

.product-quickview .bl-quickview-specs .bl-specs li {
    padding: 5px 0;
    font-size: 13px;
}

.product-quickview .bl-quickview-specs .bl-specs strong {
    min-width: 96px;
}

.bl-quickview-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b09a88;
    border-bottom: 1px solid #b09a88;
    text-decoration: none;
}

.bl-quickview-more:hover {
    color: #1a1a22;
    border-bottom-color: #1a1a22;
}

/* Modal can get tall with specs added — keep it scrollable, not clipped */
.product-quickview .summary.entry-summary {
    max-height: 78vh;
    overflow-y: auto;
}

/* --- Tabs relocated into the summary column ---
   They now sit between price and add-to-cart, so they need to read as a
   compact block rather than a full-width panel. */
.single-product .bl-summary-tabs {
    margin: 20px 0 24px;
}

.single-product .bl-summary-tabs .woocommerce-tabs ul.tabs {
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 1px solid #ede8e0;
}

.single-product .bl-summary-tabs .woocommerce-tabs ul.tabs li {
    display: inline-block;
    margin: 0 18px 0 0;
    padding: 0 0 8px;
}

.single-product .bl-summary-tabs .woocommerce-tabs ul.tabs li a {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555555;
}

.single-product .bl-summary-tabs .woocommerce-tabs ul.tabs li.active a {
    color: #1a1a22;
}

.single-product .bl-summary-tabs .woocommerce-tabs .panel {
    padding: 0;
    margin: 0;
}

/* Reviews inside a narrow column need tighter spacing */
.single-product .bl-summary-tabs #reviews .comment-form,
.single-product .bl-summary-tabs #reviews .commentlist {
    margin: 0;
    padding: 0;
}

/* --- "Über dieses Muster" — full-width SEO section --- */
.bl-seo-text {
    clear: both;
    margin: 50px 0 40px;
    padding-top: 36px;
    border-top: 1px solid #ede8e0;
}

.bl-seo-text h2 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #1a1a22;
    margin: 0 0 18px;
}

.bl-seo-text h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background-color: #b09a88;
    margin-top: 14px;
}

.bl-seo-text__body {
    max-width: 820px;
    color: #555555;
    font-size: 15px;
    line-height: 1.9;
}

.bl-seo-text__body p {
    margin-bottom: 16px;
}

/* --- "Produktbeschreibung" tab body --- */
.bl-produktbeschreibung {
    color: #555555;
    font-size: 14px;
    line-height: 1.85;
}

.bl-produktbeschreibung p {
    margin-bottom: 14px;
}

.bl-produktbeschreibung p:last-child {
    margin-bottom: 0;
}

/* --- Quick View: Produktbeschreibung above the spec list --- */
.product-quickview .bl-quickview-intro {
    margin: 16px 0 0;
    color: #555555;
    font-size: 14px;
    line-height: 1.8;
}

.product-quickview .bl-quickview-intro p {
    margin-bottom: 12px;
}

.product-quickview .bl-quickview-intro p:last-child {
    margin-bottom: 0;
}

/* Specs sit directly under the intro — drop the duplicate top rule */
.product-quickview .bl-quickview-intro + .bl-quickview-specs {
    margin-top: 14px;
    padding-top: 14px;
}

/* --- Checkout: Hinweis auf Kundenkonto --- */
.bl-checkout-account-note {
    background-color: #faf8f5;
    border-left: 4px solid #b09a88;
    padding: 16px 20px;
    margin-bottom: 28px;
}

.bl-checkout-account-note p {
    margin: 0;
    color: #555555;
    font-size: 14px;
    line-height: 1.75;
}

.bl-checkout-account-note strong {
    color: #1a1a22;
}

/* =========================================================
   Ausstellungs-Timeline (Gallery)
   Rendered by [bl_timeline]. A single centre rail on desktop
   with the cards alternating either side; on mobile the rail
   moves left and every card stacks under it.
   ========================================================= */

/* The page sits in Bootstrap's .container, fixed at 1170px on desktop, so a
   plain max-width here can never be wider than that. Break out of the column
   and centre against the viewport instead — body already has overflow-x:hidden,
   so the 100vw measurement cannot introduce a horizontal scrollbar. */
.bl-timeline {
    position: relative;
    width: min(calc(100vw - 80px), 1600px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 20px 0 40px;
}

/* The rail. Drawn behind the year markers, which paint their own
   cream background to sit on top of it. */
.bl-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background-color: #e4ddd5;
}

.bl-timeline__item {
    position: relative;
    width: 50%;
    padding-right: 60px;
    margin-bottom: 60px;
}

.bl-timeline__item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 60px;
}

.bl-timeline__item:last-child {
    margin-bottom: 0;
}

/* Year marker sits on the rail, not beside it. */
.bl-timeline__marker {
    position: absolute;
    top: 0;
    right: -37px;
    z-index: 2;
}

.bl-timeline__item:nth-child(even) .bl-timeline__marker {
    right: auto;
    left: -37px;
}

.bl-timeline__year {
    display: block;
    width: 74px;
    height: 74px;
    line-height: 74px;
    border-radius: 50%;
    background-color: #faf8f5;
    border: 1px solid #b09a88;
    color: #1a1a22;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
}

.bl-timeline__card {
    background-color: #ffffff;
    border: 1px solid #efe9e3;
}

/* 3:2 is the ratio `bl-gallery-main` is cut to. Pinning it here as well keeps
   the card the same shape when the source photo is too small for that crop and
   WordPress falls back to the uncropped original. */
.bl-timeline__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.bl-timeline__body {
    padding: 26px 30px 30px;
}

.bl-timeline__title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.35;
    color: #1a1a22;
}

.bl-timeline__place {
    margin: 0 0 16px;
    color: #b09a88;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bl-timeline__text {
    color: #555555;
    font-size: 15px;
    line-height: 1.8;
}

.bl-timeline__text p:last-child {
    margin-bottom: 0;
}

/* Galleries inserted into the entry text via "Medien hinzufügen" */
.bl-timeline__text .gallery {
    margin: 20px 0 0;
}

.bl-timeline__text .gallery-item {
    margin-top: 0 !important;
}

/* Single column below the theme's lg breakpoint: the alternating
   layout needs more width than a tablet has. */
@media (max-width: 991px) {
    .bl-timeline {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    .bl-timeline::before {
        left: 37px;
    }

    .bl-timeline__item,
    .bl-timeline__item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-right: 0;
        padding-left: 110px;
    }

    /* Stacked cards would otherwise run the whole width of the viewport and
       leave a single line of text stretched across it. */
    .bl-timeline__card {
        max-width: 820px;
    }

    .bl-timeline__marker,
    .bl-timeline__item:nth-child(even) .bl-timeline__marker {
        right: auto;
        left: 0;
    }
}

@media (max-width: 767px) {
    .bl-timeline::before {
        left: 27px;
    }

    .bl-timeline__item,
    .bl-timeline__item:nth-child(even) {
        padding-left: 76px;
    }

    .bl-timeline__year {
        width: 54px;
        height: 54px;
        line-height: 54px;
        font-size: 13px;
    }

    .bl-timeline__body {
        padding: 20px 22px 24px;
    }

    .bl-timeline__title {
        font-size: 19px;
    }
}

/* Photo grid inside a timeline entry. Three across on the card, two on
   narrow screens — the cards are half-width on desktop, so anything more
   makes the thumbnails unreadable. */
.bl-timeline__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.bl-timeline__photos li {
    margin: 0;
}

.bl-timeline__photos a {
    display: block;
    overflow: hidden;
    background-color: #faf8f5;
}

.bl-timeline__photos img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bl-timeline__photos a:hover img {
    transform: scale(1.06);
}

/* Photos are the point of this page — make them the cursor's business. */
.bl-timeline__photos a,
.bl-timeline__image a {
    cursor: zoom-in;
}

.bl-timeline__image a {
    display: block;
    overflow: hidden;
}

.bl-timeline__image img {
    transition: transform 0.5s ease;
}

.bl-timeline__image a:hover img {
    transform: scale(1.03);
}

@media (max-width: 767px) {
    .bl-timeline__photos {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .bl-timeline__photos img {
        height: 105px;
    }
}

/* =========================================================
   About / Über mich — Artist Profile Page
   Body class .bl-about-page is added by bl_about_body_class(),
   so this covers the German page and its EN/CS translations.
   Element hooks are .bl-about-* classes set via WPBakery el_class.
   ========================================================= */

/* --- Page header: framing only. The scrim and light type are applied to every
   photographic header further down, under "Photographic Page Headers". --- */
.bl-about-page .page-header {
    background-position: center 45%;
}

/* --- Section rhythm --- */
.bl-about-intro,
.bl-about-timeline-row,
.bl-about-style,
.bl-about-quote,
.bl-about-facts,
.bl-about-cta {
    padding-top: 90px;
    padding-bottom: 90px;
}

.bl-about-timeline-row,
.bl-about-facts {
    background-color: #fff;
}

/* --- Shared type treatments --- */
.bl-about-eyebrow {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: #b09a88 !important;
    margin: 0 0 18px !important;
}

.bl-about-title {
    font-size: 34px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: #1a1a22 !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
}

.bl-about-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background-color: #b09a88;
    margin-top: 22px;
    margin-bottom: 26px;
}

.bl-about-title--center {
    text-align: center !important;
}

.bl-about-title--center::after {
    margin-left: auto;
    margin-right: auto;
}

.bl-about-page .wpb_text_column p {
    color: #555555;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 16px;
}

.bl-about-lead p {
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: #3a3a44 !important;
}

/* --- Intro: portrait in the warm frame used elsewhere on the site --- */
.bl-about-intro .vc_column-inner {
    padding-top: 0;
}

.bl-about-intro-col .vc_column-inner {
    padding-left: 48px;
}

.bl-about-portrait img {
    border: 6px solid #ede8e0;
    padding: 5px;
    background-color: #fff;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* --- Career timeline (sober_info_list restyled) --- */
.bl-about-timeline .info-icon {
    display: none;
}

.bl-about-timeline li {
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    padding: 0 0 34px 32px;
    position: relative;
    border-left: 1px solid #e6ded4;
}

.bl-about-timeline li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.bl-about-timeline li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #b09a88;
}

.bl-about-timeline .info-name {
    flex: 0 0 140px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b09a88;
    padding-top: 3px;
}

.bl-about-timeline .info-value {
    font-size: 15px;
    line-height: 1.85;
    color: #555555;
}

/* --- Signature-style cards --- */
.bl-about-card {
    text-align: center;
}

.bl-about-card img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 12px 34px rgba(26, 26, 34, 0.13);
}

.bl-about-card-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    color: #1a1a22 !important;
    margin: 28px 0 14px !important;
}

.bl-about-card .wpb_text_column p {
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: #6b6b73 !important;
    margin-bottom: 0;
}

/* --- Full-width statement band --- */
.bl-about-quote {
    background-color: #1a1a22 !important;
}

.bl-about-quote-text p {
    color: #f3efe9 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    text-align: center;
    max-width: 820px;
    margin: 0 auto !important;
}

/* --- Exhibition figures --- */
.bl-about-fact-num {
    font-size: 50px !important;
    font-weight: 300 !important;
    color: #1a1a22 !important;
    line-height: 1 !important;
    margin: 0 0 12px !important;
}

.bl-about-fact-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: #b09a88 !important;
    margin: 0 !important;
}

.bl-about-exh-text p {
    text-align: center;
}

/* --- Signature and calls to action --- */
.bl-about-signature {
    color: #b09a88 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.bl-about-cta-buttons p {
    margin-bottom: 0;
}

.bl-about-cta .sober-button {
    display: inline-block;
    border: 1.5px solid #1a1a22 !important;
    background: transparent !important;
    color: #1a1a22 !important;
    padding: 13px 32px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 0 6px 10px !important;
    transition: background 0.25s ease, color 0.25s ease;
    text-decoration: none;
}

.bl-about-cta .sober-button:hover {
    background: #1a1a22 !important;
    color: #fff !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .bl-about-intro-col .vc_column-inner {
        padding-left: 15px;
        padding-top: 40px;
    }

    .bl-about-title {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .bl-about-intro,
    .bl-about-timeline-row,
    .bl-about-style,
    .bl-about-quote,
    .bl-about-facts,
    .bl-about-cta {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .bl-about-timeline li {
        flex-direction: column;
    }

    .bl-about-timeline .info-name {
        flex-basis: auto;
        margin-bottom: 8px;
    }

    .bl-about-card {
        margin-bottom: 45px;
    }

    .bl-about-quote-text p {
        font-size: 18px !important;
    }

    .bl-about-fact-num {
        font-size: 38px !important;
    }
}

/* Contact page: tinted panel behind the map / form row (the German page used a
   generated .vc_custom_* class; all three languages now share this one). */
.bl-contact-map-row {
    background-color: #f1f2f4;
}

/* The map row is a stretched "no spaces" row, so WPBakery strips the column
   gutters (.vc_row-no-padding) and the form column sat flush against the map's
   edge. Restore an inset on the form side only — the map is meant to bleed to
   the viewport edge. */
.bl-contact-map-row.vc_row-no-padding .contact-form > .vc_column-inner {
    padding-left: 30px;
    padding-right: 30px;
}

/* At >=1200px the columns sit side by side and the seam is against the map, so
   the left gap has to do the work. Keep the right side smaller: padding both
   sides equally narrows the column enough to wrap the "Schreiben Sie mir"
   heading onto two lines. */
@media (min-width: 1200px) {
    .bl-contact-map-row.vc_row-no-padding .contact-form > .vc_column-inner {
        padding-left: 70px;
        padding-right: 40px;
    }
}

@media (min-width: 1600px) {
    .bl-contact-map-row.vc_row-no-padding .contact-form > .vc_column-inner {
        padding-left: 100px;
        padding-right: 60px;
    }
}

/* =========================================================
   Photographic Page Headers — legibility
   The theme flags any page whose header is a photograph with .page-header-image.
   Those titles previously sat as dark type directly on a busy image. Lay a
   gradient scrim over the photo and set light type; the matching body classes
   are supplied by bl_light_type_over_photo_header() in functions.php.
   ========================================================= */

.page-header-image .page-header {
    position: relative;
}

.page-header-image .page-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(26, 26, 34, 0.30) 0%, rgba(26, 26, 34, 0.62) 100%);
}

.page-header-image .page-header > .sober-container {
    position: relative;
    z-index: 1;
}

.page-header-image .page-header .page-title {
    color: #fff;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.page-header-image .page-header .breadcrumb,
.page-header-image .page-header .breadcrumb a,
.page-header-image .page-header .breadcrumb .fa {
    color: #fff;
}

/* =========================================================
   Legal Pages — Impressum, Datenschutz, AGB, Widerrufsbelehrung
   Long-form prose: narrower measure, clear heading hierarchy.
   [[PLACEHOLDER]] markers are highlighted so nothing unresolved
   can reach production unnoticed.
   ========================================================= */

.bl-legal .wpb_text_column {
    color: #444448;
    font-size: 15px;
    line-height: 1.85;
}

.bl-legal h2 {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #1a1a22;
    margin: 0 0 30px;
}

.bl-legal h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background-color: #b09a88;
    margin-top: 20px;
}

.bl-legal h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1a1a22;
    margin: 38px 0 12px;
}

.bl-legal p {
    margin-bottom: 14px;
}

.bl-legal ul {
    margin: 0 0 16px 20px;
    padding: 0;
    list-style: disc;
}

.bl-legal li {
    margin-bottom: 8px;
}

.bl-legal a {
    color: #1a1a22;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bl-legal a:hover {
    color: #b09a88;
}

/* Courtesy-translation notice at the top of EN/CS versions */
.bl-legal .bl-legal-note {
    border-left: 3px solid #b09a88;
    background-color: #f3efe9;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #6b6b73;
    margin-bottom: 34px;
}

/* Unresolved [[PLACEHOLDER]] markers in the draft legal texts. Wrapped by
   bl_highlight_legal_placeholders(); disappears once the markers are replaced. */
.bl-placeholder {
    background-color: #fff3cd;
    border-bottom: 1px dashed #b8892b;
    color: #6b4e0f;
    padding: 1px 4px;
    font-size: 0.92em;
}

/* =========================================================
   Footer newsletter — [bl_newsletter]
   The footer is charcoal, so the form supplies its own light
   treatment rather than inheriting the theme's form styling,
   which assumes a white background.
   ========================================================= */

.bl-newsletter {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.bl-newsletter__title {
    margin: 0 0 8px;
    font-size: 22px;
    letter-spacing: 0.04em;
}

.bl-newsletter__text {
    margin: 0 0 22px;
    color: #aaa;
    font-size: 15px;
}

/* Field and button read as one control, the way the theme's search does. */
.bl-newsletter__field {
    display: flex;
    gap: 0;
    margin: 0 0 14px;
}

.bl-newsletter__field input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #3a3a44;
    border-right: 0;
    background-color: #23232c;
    color: #faf8f5;
    font-size: 15px;
}

.bl-newsletter__field input[type="email"]::placeholder {
    color: #7d7d88;
}

.bl-newsletter__field input[type="email"]:focus {
    outline: none;
    border-color: #b09a88;
    background-color: #262630;
}

.bl-newsletter__field input[type="submit"] {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    border: 1px solid #b09a88;
    background-color: #b09a88;
    color: #1a1a22;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bl-newsletter__field input[type="submit"]:hover {
    background-color: #faf8f5;
    border-color: #faf8f5;
    color: #1a1a22;
}

/* Consent line. Small, but it has to stay readable — it is the record of
   what the subscriber agreed to. */
.bl-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: #9a9aa2;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    font-weight: normal;
    cursor: pointer;
}

.bl-newsletter__consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 3px 0 0;
}

.bl-newsletter__consent a {
    color: #b09a88;
    text-decoration: underline;
}

.bl-newsletter__consent a:hover {
    color: #faf8f5;
}

/* Mailchimp's own response line (success / error). */
.bl-newsletter .mc4wp-response {
    margin-top: 14px;
    font-size: 14px;
}

.bl-newsletter .mc4wp-alert.mc4wp-success p {
    color: #9ec9a6;
}

.bl-newsletter .mc4wp-alert.mc4wp-error p,
.bl-newsletter .mc4wp-alert.mc4wp-notice p {
    color: #d9a89a;
}

/* Admin-only placeholder shown while Mailchimp is not connected. */
.bl-newsletter__notice {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed #55555f;
    color: #8a8a94;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

@media (max-width: 480px) {
    .bl-newsletter__field {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bl-newsletter__field input[type="email"] {
        flex: 1 0 100%;
        border-right: 1px solid #3a3a44;
    }

    .bl-newsletter__field input[type="submit"] {
        flex: 1 0 100%;
    }
}

/* =========================================================
   My Account — greeting and download buttons
   ========================================================= */

/* The theme sets the dashboard greeting at 24px with the username forced to
   uppercase, so "Hello BBKELLEROGLU (not BBKELLEROGLU? Log out)" shouted
   louder than the page's own headings. Bring it down to just above body copy
   and drop the uppercasing; the "(not …? Log out)" aside is secondary, so it
   recedes further. */
.woocommerce-account .woocommerce-MyAccount-content .hello-customer {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content .hello-customer strong {
    font-weight: 600;
    text-transform: none;
}

.woocommerce-account .woocommerce-MyAccount-content .hello-customer .not-admin {
    font-size: 14px;
    font-size: 1.4rem;
    color: #909097;
}

/* Download buttons inherit the shop's call-to-action sizing — line-height:60px
   and min-width:200px, built for "In den Warenkorb". The label here is the
   file name, so a long one wrapped to two 60px lines and rendered as a large
   black slab. Size these to the table row instead. */
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-MyAccount-downloads-file.button {
    min-width: 0;
    max-width: 280px;
    padding: 9px 18px;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.45;
    white-space: normal;
    text-align: center;
    vertical-align: middle;
}