/* ============================================================
   ai_custom.css
   Created: 2026-05-07
   Purpose: All AI-added custom CSS goes here ONLY (per user instruction).
            Existing theme/child CSS files are NOT modified.
   To revert ALL ai changes: just delete this file (or its YAML reference).
   ============================================================ */


/* ---------- Homepage / carousel — uniform product card alignment ---------- */
/* Goal: every product card in homepage carousels (ANHÄNGER, BIKES, BAUMASCHINEN, AUTOMOBILE tabs)
   shows the SAME image area + SAME card dimensions, so small/big images don't make boxes
   uneven. The fix uses aspect-ratio + object-fit, no template change. */

/* Slides themselves stretch to the tallest sibling */
.swiper-wrapper {
    align-items: stretch !important;
}
.swiper-slide,
.swiper-container .swiper-slide {
    height: auto !important;
    display: flex !important;
}

/* Card spans the full slide */
.swiper-slide .js-product-miniature-wrapper {
    width: 100%;
    display: flex;
}
.swiper-slide .product-miniature {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

/* Locked image area — same aspect-ratio (square) for every card.
   object-fit:contain → small images stay centered, no cropping, no stretching. */
.swiper-slide .product-miniature .thumbnail-container,
.swiper-wrapper .product-miniature .thumbnail-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-slide .product-miniature .product-thumbnail,
.swiper-wrapper .product-miniature .product-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}
.swiper-slide .product-miniature .product-thumbnail picture,
.swiper-wrapper .product-miniature .product-thumbnail picture {
    width: 100%;
    height: 100%;
    display: block;
}
.swiper-slide .product-miniature .product-thumbnail picture img,
.swiper-wrapper .product-miniature .product-thumbnail picture img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100%;
    max-height: 100%;
}

/* Description fills remaining space; button pinned to bottom */
.swiper-slide .product-miniature .product-description,
.swiper-wrapper .product-miniature .product-description {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}
.swiper-slide .product-miniature .product-add-cart,
.swiper-wrapper .product-miniature .product-add-cart {
    margin-top: auto;
}

/* Title locked to 2 lines so card heights match regardless of name length */
.swiper-slide .product-miniature .product-title,
.swiper-wrapper .product-miniature .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3 !important;
    min-height: calc(1.3em * 2);
    max-height: calc(1.3em * 2);
    margin-bottom: .35rem;
}

/* Reserve a stable space for review row so cards stay even */
.swiper-slide .product-miniature .product-list-reviews,
.swiper-wrapper .product-miniature .product-list-reviews {
    min-height: 1.3rem;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
}


/* ---------- Listing/category pages — same image normalization ---------- */
/* Same approach for grid pages so the homepage AND listing pages look consistent. */
.products-grid .product-miniature .thumbnail-container,
#js-product-list .product-miniature .thumbnail-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-grid .product-miniature .product-thumbnail picture img,
#js-product-list .product-miniature .product-thumbnail picture img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100%;
    max-height: 100%;
}


/* ---------- Mobile responsive — keep equal heights below 768px ---------- */
@media (max-width: 767px) {
    .swiper-slide .product-miniature .thumbnail-container,
    .products-grid .product-miniature .thumbnail-container {
        aspect-ratio: 4 / 3;          /* slightly less tall on phones to save vertical space */
    }
    .swiper-slide .product-miniature .product-title,
    .products-grid .product-miniature .product-title {
        font-size: 13px;
    }
}

/* End ai_custom.css */

/* ============================================================
   Category description — flat plain-text style (no card box)
   Updated: 2026-05-08 (rev 2)
   Goal: show the description as plain text, no background card,
         no border, no inner card padding — just centered/aligned
         text matching the WP reference screenshot.
   Selectors are scoped to .category-description so other rte
   content elsewhere on the site is not affected.
   ============================================================ */

.category-description {
    margin: 18px 0 28px 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
    overflow: hidden;
    word-wrap: break-word;
}
.category-description.category-description-top    { margin: 12px 0 24px 0; }
.category-description.category-description-bottom { margin: 32px 0 0 0; }
.category-description.category-description-bottom hr { display: none; }

/* on-image variant — keep readable overlay (only if theme uses it) */
.category-description.category-description-image {
    background: rgba(255,255,255,0.92) !important;
    padding: 16px 20px !important;
    max-width: 70%;
    border-radius: 4px !important;
}

/* RTE content — typography only, no box */
.category-description .rte-content {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.category-description .rte-content > *:first-child { margin-top: 0; }
.category-description .rte-content > *:last-child  { margin-bottom: 0; }
.category-description .rte-content p { margin: 0 0 .6em 0; }
.category-description .rte-content p:last-child { margin-bottom: 0; }
.category-description .rte-content h1,
.category-description .rte-content h2,
.category-description .rte-content h3,
.category-description .rte-content h4 {
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.1em 0 .5em;
}
.category-description .rte-content h2 { font-size: 18px; }
.category-description .rte-content h3 { font-size: 16px; }
.category-description .rte-content h4 { font-size: 15px; }
.category-description .rte-content ul,
.category-description .rte-content ol { padding-left: 22px; margin: 0 0 .6em 0; }
.category-description .rte-content li { margin-bottom: .2em; }
.category-description .rte-content a { color: #00785c; text-decoration: underline; }
.category-description .rte-content a:hover { color: #014824; }
.category-description .rte-content img { max-width: 100%; height: auto; margin: .5em 0; }
.category-description .rte-content table { width: 100%; margin: .5em 0; border-collapse: collapse; }
.category-description .rte-content table td,
.category-description .rte-content table th { border: 1px solid #e0e0e0; padding: 6px 10px; }

/* Mobile */
@media (max-width: 767px) {
    .category-description {
        margin: 12px 0 18px 0;
        font-size: 13px;
        line-height: 1.55;
    }
    .category-description.category-description-image {
        max-width: 100%;
        padding: 12px 14px !important;
    }
    .category-description .rte-content h2 { font-size: 16px; }
    .category-description .rte-content h3 { font-size: 15px; }
}
/* End category description */


/* ============================================================
   Product detail page — upsell slider + arrow color + price color
   Added: 2026-05-08 (ai_custom.css)
   - Convert "Das könnte dir auch gefallen" to a swiper carousel
   - Remove red hover on arrows; use brand green instead
   - Make ALL product prices red consistently
   ============================================================ */

/* Upsell slider — container and slide */
.wp-product-upsells-section { margin: 30px 0; }
.wp-product-upsells-section .container { position: relative; }
.wp-upsell-slider { padding: 10px 0 30px 0; }
.wp-upsell-slider .swiper-slide { height: auto; display: flex; }
.wp-upsell-slider .wp-upsell-item {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: #fff; border: 1px solid #f0f0f0; border-radius: 4px;
    padding: 12px; transition: box-shadow .2s ease, transform .2s ease;
}
.wp-upsell-slider .wp-upsell-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px);
}
.wp-upsell-slider .wp-upsell-thumb {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px;
}
.wp-upsell-slider .wp-upsell-thumb img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.wp-upsell-slider .wp-upsell-info { display: flex; flex-direction: column; flex-grow: 1; }
.wp-upsell-slider .wp-upsell-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em; font-size: 13px; line-height: 1.3;
    color: #222; text-decoration: none; margin-bottom: 6px;
}
.wp-upsell-slider .wp-upsell-name:hover { color: #00785c; }
.wp-upsell-slider .wp-upsell-price {
    margin-top: auto; font-weight: 700; font-size: 15px;
    color: #00785c !important;     /* unified brand green price */
}

/* Slider navigation arrows — brand green, no red hover */
.wp-upsell-slider .swiper-button-prev,
.wp-upsell-slider .swiper-button-next,
.wp-upsell-slider .swiper-button-arrow {
    color: #00785c !important;
    width: 36px; height: 36px;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wp-upsell-slider .swiper-button-prev:after,
.wp-upsell-slider .swiper-button-next:after,
.wp-upsell-slider .swiper-button-arrow:after {
    font-size: 16px !important; font-weight: 700;
}
.wp-upsell-slider .swiper-button-prev:hover,
.wp-upsell-slider .swiper-button-next:hover,
.wp-upsell-slider .swiper-button-arrow:hover {
    background: #00785c !important; color: #fff !important; border-color: #00785c !important;
}

/* Site-wide: kill red hover on swiper arrows everywhere, use brand green */
.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-arrow:hover {
    color: #00785c !important;
}
.swiper-button-prev,
.swiper-button-next {
    color: #555 !important;     /* default state, not red */
}

/* Unified BRAND GREEN product price — apply across the site */
body .product-price,
body .current-price .product-price,
body .current-price-value,
.products-grid .product-miniature .product-price,
.products .product-miniature .product-price,
.swiper-slide .product-miniature .product-price,
.products-grid .product-miniature .current-price-value,
.swiper-slide .product-miniature .current-price-value,
#wp-top-rated-block .wp-tr-price,
.wp-recent-price,
.wp-upsell-price {
    color: #00785c !important;
}

/* Strikethrough regular price stays muted (so the discount delta is visible) */
.regular-price,
.product-discount .regular-price,
.products-grid .regular-price,
.swiper-slide .regular-price,
.wp-recent-price.regular-price,
.wp-upsell-item .regular-price {
    color: #999 !important;
    text-decoration: line-through;
    font-weight: 400 !important;
}

/* Mobile spacing */
@media (max-width: 767px) {
    .wp-upsell-slider .swiper-button-prev,
    .wp-upsell-slider .swiper-button-next { display: none; }
    .wp-upsell-slider .wp-upsell-name { font-size: 12px; }
    .wp-upsell-slider .wp-upsell-price { font-size: 14px; }
}
/* End upsell slider + price unification */


/* Hide Swiper pagination dots inside upsell slider — arrows only.
   Targeted to .wp-upsell-slider so other carousels keep their dots. */
.wp-upsell-slider .swiper-pagination,
.wp-upsell-slider .swiper-pagination-product,
.wp-upsell-slider .swiper-pagination-bullets {
    display: none !important;
}


/* Hide Swiper pagination dots site-wide on theme product carousels.
   These carousels already have prev/next arrows, so the dots are redundant.
   Scoped to .swiper-default-carousel so non-product sliders (banners,
   sliders that legitimately use only dots) keep their pagination. */
.swiper-default-carousel .swiper-pagination,
.swiper-default-carousel .swiper-pagination-product,
.swiper-default-carousel .swiper-pagination-bullets,
.swiper-default-carousel .swiper-pagination-horizontal,
.category-products .swiper-pagination,
.category-products .swiper-pagination-product,
.category-products .swiper-pagination-bullets {
    display: none !important;
}


/* Force-hide ALL swiper pagination dots site-wide.
   Multiple selectors with high specificity to win against any bundled CSS
   that Swiper itself may inject inline. */
body .swiper .swiper-pagination,
body .swiper-container .swiper-pagination,
body .swiper-default-carousel .swiper-pagination,
body div.swiper-pagination.swiper-pagination-product,
body .swiper-pagination-product,
body .swiper-pagination-bullets,
body .swiper-pagination-horizontal,
.swiper .swiper-pagination,
.swiper-container .swiper-pagination,
.products-grid .swiper-pagination,
.category-products .swiper-pagination,
.wp-upsell-slider .swiper-pagination,
section .swiper-pagination {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}


/* ============================================================
   Subcategory grid (Kategorien) — WP/Woodmart style: transparent,
   no card box, image centered, name + product count below
   Added: 2026-05-08
   ============================================================ */
.wp-subcat-section { padding: 30px 0; }
.wp-subcat-section .wp-section-title {
    font-size: 14px; font-weight: 600; color: #d62828;
    margin-bottom: 22px; padding-left: 10px;
}
.wp-subcat-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 18px 14px;
}
@media (max-width: 1199px) { .wp-subcat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 767px)  { .wp-subcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .wp-subcat-grid { grid-template-columns: repeat(2, 1fr); } }

.wp-subcat-card {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 8px; text-decoration: none !important;
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
}
.wp-subcat-card-img {
    width: 100%; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: transparent;
    margin-bottom: 8px;
}
.wp-subcat-card-img img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .25s ease;
}
.wp-subcat-card:hover .wp-subcat-card-img img { transform: scale(1.04); }
.wp-subcat-card-name {
    font-size: 13px; font-weight: 500;
    color: #222; line-height: 1.3;
    margin-top: 4px;
    text-align: center;
}
.wp-subcat-card:hover .wp-subcat-card-name { color: #00785c; }
.wp-subcat-card-count {
    font-size: 12px; color: #888; margin-top: 4px;
}


/* Override wpprevnext.css default white-box on subcat cards (force transparent).
   Higher specificity (body prefix + section parent) so we always win. */
body .wp-subcat-section .wp-subcat-card,
body .wp-section.wp-subcat-section .wp-subcat-card,
.wp-subcat-section .wp-subcat-grid .wp-subcat-card {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px !important;
    color: #222 !important;
    transition: transform .2s ease !important;
}
body .wp-subcat-section .wp-subcat-card:hover,
body .wp-section.wp-subcat-section .wp-subcat-card:hover,
.wp-subcat-section .wp-subcat-grid .wp-subcat-card:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #00785c !important;
}
/* Image area also transparent (no inner box) */
body .wp-subcat-section .wp-subcat-card-img {
    background: transparent !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}
body .wp-subcat-section .wp-subcat-card-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
/* Name + count visible color */
body .wp-subcat-section .wp-subcat-card-name {
    font-size: 13px !important; font-weight: 500 !important;
    color: #222 !important; line-height: 1.3 !important;
    min-height: 0 !important; margin-top: 6px !important;
}
body .wp-subcat-section .wp-subcat-card-count {
    font-size: 12px !important; color: #888 !important; margin-top: 2px !important;
}


/* Final guard: ensure no background/border/shadow around the subcat IMAGE wrapper. */
body .wp-subcat-section .wp-subcat-card-img,
.wp-subcat-section .wp-subcat-grid .wp-subcat-card-img {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body .wp-subcat-section .wp-subcat-card-img img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* On /2094-pkw-anhaenger only, hide:
     • Aktuelle Produkte section (wp-current-cat-products widget)
     • Zuletzt angesehene Produkte section (wp-recent-section widget)
   Body class category-id-2094 is set by PS automatically. */
body.category-id-2094 .wp-current-products-section,
body.category-id-2094 .wp-recent-section,
body.category-id-2094 #products.wp-current-products-section {
    display: none !important;
}


/* ============================================================
   /2093-werkstatt-maschinen — hide recent + align Aktuelle Produkte cards
   Added: 2026-05-08
   ============================================================ */

/* Hide "Zuletzt angesehene Produkte" on cat 2093 */
body.category-id-2093 .wp-recent-section {
    display: none !important;
}

/* Equal-height alignment for the grid-based "Aktuelle Produkte" section
   (this is products-grid + js-product-list — NOT a swiper carousel, so
   the existing swiper rules don't apply). */
body .products-grid .js-product-miniature-wrapper,
body #js-product-list .js-product-miniature-wrapper {
    display: flex !important;
    height: 100%;
}
body .products-grid .product-miniature,
body #js-product-list .product-miniature {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
body .products-grid .product-miniature .thumbnail-container,
body #js-product-list .product-miniature .thumbnail-container {
    flex-shrink: 0;
}
body .products-grid .product-miniature .product-description,
body #js-product-list .product-miniature .product-description {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}
body .products-grid .product-miniature .product-add-cart,
body #js-product-list .product-miniature .product-add-cart {
    margin-top: auto !important;
}
/* Title clamped to 2 lines so all cards have the same title height */
body .products-grid .product-miniature .product-title,
body #js-product-list .product-miniature .product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3 !important;
    min-height: calc(1.3em * 2);
    max-height: calc(1.3em * 2);
    margin-bottom: .35rem;
}
/* Reserve a stable height for the reviews row so cards stay even */
body .products-grid .product-miniature .product-list-reviews,
body #js-product-list .product-miniature .product-list-reviews {
    min-height: 1.3rem;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Reviews not present? Reserve the same space anyway via a pseudo placeholder */
body .products-grid .product-miniature:not(:has(.product-list-reviews)) .product-add-cart,
body #js-product-list .product-miniature:not(:has(.product-list-reviews)) .product-add-cart {
    margin-top: auto !important;
}


/* Force-hide wp-recent-section on cat 2093 — multiple selectors with maximum specificity */
body.category-id-2093 .wp-recent-section,
body.category-id-2093 div.wp-recent-section,
body.category-id-2093 .wp-section.wp-recent-section,
body.category-id-2093 #products .wp-recent-section,
.category-id-2093 .wp-recent-section,
body[class*="category-id-2093"] .wp-recent-section,
body[class*="category-id-2093"] div.wp-recent-section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}


/* ============================================================
   Listing-grid equal-height alignment — comprehensive
   Added: 2026-05-08
   - Ensures all cards in a grid row have equal height
   - When some cards lack reviews, reserves equivalent space so
     button positions still align across the row
   ============================================================ */

/* Row stretches all cols to tallest */
body .products-grid,
body .products.row.products-grid,
body #js-product-list .products,
body #js-product-list .products.row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}
/* Each col fills full height */
body .products-grid > .js-product-miniature-wrapper,
body #js-product-list .js-product-miniature-wrapper {
    display: flex !important;
    align-items: stretch;
    height: auto;
}
/* Card spans the col fully and is itself a flex column */
body .products-grid .product-miniature,
body #js-product-list .product-miniature {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto;
}
/* Image area — fixed height proportion */
body .products-grid .product-miniature .thumbnail-container,
body #js-product-list .product-miniature .thumbnail-container {
    flex-shrink: 0 !important;
}
/* Description grows so the button sticks at bottom */
body .products-grid .product-miniature .product-description,
body #js-product-list .product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}
/* Right column (price + reviews) gets a stable min-height so cards
   without reviews still leave room → buttons align */
body .products-grid .product-miniature .product-miniature-right,
body #js-product-list .product-miniature .product-miniature-right {
    min-height: 70px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}
/* "Aktuelle Produkte" section: same row stretch enforcement */
body .wp-current-products-section .products-grid,
body .wp-current-products-section #js-product-list .products {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}
/* Add-to-cart wrapper pinned to bottom */
body .products-grid .product-miniature .product-add-cart,
body #js-product-list .product-miniature .product-add-cart {
    margin-top: auto !important;
}
/* Reviews: when present, reserve height; when absent, the right-col min-height covers it */
body .products-grid .product-miniature .product-list-reviews,
body #js-product-list .product-miniature .product-list-reviews {
    min-height: 1.4rem;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ============================================================
   Product detail page — tab active-state fix (2026-05-08)
   Issue: previously-clicked tab kept the green "active" underline
          because the global rule
             .nav-tabs .nav-link:focus { border-bottom: solid 3px #2a6e55 }
          left the highlight on whichever tab last had focus.
   Fix:   only the tab carrying class .active gets the highlight.
          All non-active tabs render NORMAL state regardless of
          focus, hover, aria-selected, or data attributes.
   Scope: only product info tabs (#product-infos-tabs / .wd-nav-tabs
          / .product-tabs). All other Bootstrap tabs site-wide are
          NOT affected.
   ============================================================ */

/* Reset: any non-active tab inside the product-info tab-bar shows neutral */
#product-infos-tabs .nav-link:not(.active),
#product-infos-tabs .wd-nav-link:not(.active),
.product-tabs .nav-link:not(.active),
.woodmart-product-tabs .wd-nav-tabs > li > a:not(.active),
.wd-nav-tabs .nav-link:not(.active) {
    color: inherit !important;
    border-bottom-color: transparent !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Even if the above tab gets keyboard focus / sticky :focus, hide highlight */
#product-infos-tabs .nav-link:not(.active):focus,
#product-infos-tabs .nav-link:not(.active):focus-visible,
#product-infos-tabs .wd-nav-link:not(.active):focus,
.product-tabs .nav-link:not(.active):focus,
.woodmart-product-tabs .wd-nav-tabs > li > a:not(.active):focus,
.wd-nav-tabs .nav-link:not(.active):focus {
    color: inherit !important;
    border-bottom-color: transparent !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* The single active tab — always the brand-green underline */
#product-infos-tabs .nav-link.active,
#product-infos-tabs .wd-nav-link.active,
.product-tabs .nav-link.active,
.woodmart-product-tabs .wd-nav-tabs > li > a.active,
.wd-nav-tabs .nav-link.active {
    color: #00785c !important;
    border-bottom: 3px solid #00785c !important;
    background: transparent !important;
}

/* Subtle hover hint on non-active tabs (text-only, no underline) */
#product-infos-tabs .nav-link:not(.active):hover,
.product-tabs .nav-link:not(.active):hover,
.wd-nav-tabs .nav-link:not(.active):hover {
    color: #00785c !important;
    border-bottom-color: transparent !important;
}


/* ============================================================
   Product detail tabs — kill the "blink" on tab switch (2026-05-08)
   Cause: Bootstrap's .fade class on the tab-pane runs a 150ms opacity
          transition (old fading out + new fading in) → visible blink.
          Plus .nav-link has 150ms border-color transition → underline
          on the old tab lingers for a moment after switching.
   Fix:  Disable transitions inside the product-infos-tabs scope only.
         Other Bootstrap tabs site-wide (account, checkout, mega-menu)
         keep their fade animations.
   ============================================================ */

/* Kill fade animation on product tab panes — instant switch */
#product-infos-tabs-content .tab-pane,
#product-infos-tabs-content .tab-pane.fade,
#product-infos-tabs-content > .tab-pane,
.product-tabs-content .tab-pane,
.product-tabs-content .tab-pane.fade {
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
}
#product-infos-tabs-content .tab-pane.fade:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}
#product-infos-tabs-content .tab-pane.fade.show.active,
#product-infos-tabs-content .tab-pane.show.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Kill transition on the tab nav-link itself so the underline doesn't linger */
#product-infos-tabs .nav-link,
#product-infos-tabs .wd-nav-link,
.product-tabs .nav-link,
.wd-nav-tabs .nav-link {
    transition: none !important;
    -webkit-transition: none !important;
}


/* ============================================================
   Checkout — T&C (Allgemeine Geschäftsbedingungen) checkbox label
   wrap alignment on mobile (2026-06-16)
   Problem: the agree-to-terms checkbox uses markup
            .custom-checkbox > input(abs) + span(16px box) + label.js-terms.
            The label is display:inline, so when its text wraps to a
            second line, that line returns to the container's left edge
            (under the checkbox box) instead of aligning under the first
            line of text — looks shifted/misaligned on small screens.
   Fix:    Make the container a flexbox so the box and the label sit in
            two columns; the label becomes its own block, so all wrapped
            lines stay aligned under the first line of text.
   Scope:  mobile only (<=767px) — desktop already displays correctly,
            so it is left untouched. No template/markup/JS change.
   ============================================================ */
@media (max-width: 767px) {
    #conditions-to-approve .custom-checkbox {
        display: flex;
        align-items: flex-start;
    }
    /* the visible 16px checkbox box: keep its size, don't let it shrink */
    #conditions-to-approve .custom-checkbox > span:not(.js-terms) {
        flex: 0 0 16px;
        margin-top: 3px; /* nudge box to line up with first text line */
    }
    /* label takes the remaining width and becomes a block so wrapped
       lines align under each other (and under the first line) */
    #conditions-to-approve .custom-checkbox label.js-terms {
        flex: 1 1 auto;
        display: block;
        text-align: left;
    }
}

/* ============================================================
   Mobile Wishlist icon (5th shortcut) — count badge
   ------------------------------------------------------------
   Added with the child override
     templates/_partials/_variants/mobile-header-3.tpl
   which introduces the Wishlist as the 5th icon in the mobile
   header bar. This block only POSITIONS the count badge over the
   heart icon; its green background (#347a5a) and white text come
   from the shared ".cart-products-count-btn" rule (same as the
   cart count), so the two badges look identical.

   Scope: #mobile-header only  ->  cannot affect the desktop
   header or any other element. Desktop is left untouched.

   To revert: delete this whole block AND the matching template
   override file named above.
   ============================================================ */
#mobile-header .col-mobile-btn-wishlist .mobile-wishlist-icon {
    position: relative; /* anchor for the absolutely-positioned badge */
}
#mobile-header .col-mobile-btn-wishlist .mobile-wishlist-count {
    display: inline-block;
    text-align: center;
    line-height: 15px;
    border-radius: 30px;
    min-width: 16px;
    height: 16px;
    font-size: .8rem;
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 1px 5px;
}