/*
Theme Name: HansCoopper Custom
Author: apostmi
Description: HansCoopper-eigenes Theme-Paket für WordPress. Bauhaus-„Schweizer“ Stilrichtung, speziell für eine Website zum Verkauf von Küchenartikeln.
Version: Vorabversion 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@300;400;500;700&display=swap');

:root { --bg: #0d0d0e; --red: #E60000; --gray: #888; --border: #222; }

body, p, a, h1, h2, h3, h4, h5, h6, span { font-family: 'Inter', sans-serif; }
body { margin: 0; background: var(--bg); color: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/*1*/
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 60px; background: #000; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1000; }
.header-left, .header-right { flex: 1; display: flex; align-items: center; }
.header-center { flex: 2; display: flex; justify-content: center; }
.header-right { justify-content: flex-end; }
.site-logo { max-height: 40px; filter: brightness(0) invert(1); }

.nav-list { list-style: none; display: flex; gap: 40px; margin: 0; padding: 0; }
.nav-list li { position: relative; }
.nav-list li a { text-decoration: none; color: var(--gray); font-weight: 500; font-size: 13px !important; letter-spacing: 2px; text-transform: uppercase; transition: color 0.3s ease; padding-bottom: 6px; display: inline-block; }
.nav-list li a:hover { color: #fff; letter-spacing: 2px; }
.nav-list > li > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: var(--red); transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.nav-list > li:hover > a::after { width: 100%; }

.nav-item-dropdown { position: relative; }
.series-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 220px; padding-top: 25px; z-index: 200; }
.dropdown-content { background: #000; border: 1px solid var(--border); border-top: 2px solid var(--red); box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.series-dropdown a { display: block; padding: 15px 20px; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; color: var(--gray); text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid #111; letter-spacing: 2px !important; }
.series-dropdown a:hover { background: #111; color: var(--red); padding-left: 25px; }
.nav-item-dropdown:hover .series-dropdown { display: block; }

.bauhaus-search { display: flex; align-items: stretch; justify-content: flex-end; }
.bauhaus-search .search-field { background-color: transparent; color: #ffffff; border: 1px solid #ffffff; border-right: none; border-radius: 4px 0 0 4px !important; width: 220px; padding: 12px 15px; outline: none; }
.bauhaus-search .search-submit { background-color: transparent; color: #ffffff; border: 1px solid #ffffff; border-radius: 0 4px 4px 0 !important; padding: 0 15px; cursor: pointer; }
.bauhaus-search .search-submit:hover { background-color: var(--red); border-color: var(--red); }

.mobile-toggle { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 2000; }
.mobile-toggle span { width: 100%; height: 2px; background-color: #fff; transition: all 0.3s ease; }

@media (max-width: 900px) {
    .site-header { padding: 20px 20px 80px 20px !important; position: relative !important; flex-wrap: wrap !important; }
    .header-left { flex: 1 1 50% !important; }
    .header-right { flex: 1 1 50% !important; justify-content: flex-end !important; z-index: 9999 !important; position: static !important; }
    
    .mobile-toggle { display: flex !important; margin: 0 !important; z-index: 9999 !important; position: relative !important; cursor: pointer !important; pointer-events: auto !important; }
    
    .bauhaus-search { display: flex !important; position: absolute !important; bottom: 20px !important; left: 20px !important; width: calc(100% - 40px) !important; margin: 0 !important; z-index: 1000 !important; }
    .bauhaus-search .search-field { width: 100% !important; border-radius: 4px 0 0 4px !important; }
    .bauhaus-search .search-submit { border-radius: 0 4px 4px 0 !important; }
    
    .header-center { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; background: #0d0d0e !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; opacity: 0; pointer-events: none; transition: opacity 0.4s ease !important; z-index: 8000 !important; }
    
    /* ==========================================
       THE PURE CSS MENU HACK
       ========================================== */
    /* When checkbox is checked, show the menu */
    #mobile-nav-check:checked ~ .header-center { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; }
    
    /* When checkbox is checked, animate the X */
    #mobile-nav-check:checked ~ .header-right .mobile-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--red); }
    #mobile-nav-check:checked ~ .header-right .mobile-toggle span:nth-child(2) { opacity: 0; }
    #mobile-nav-check:checked ~ .header-right .mobile-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--red); }
    
    /* Stop scrolling when menu is open */
    body:has(#mobile-nav-check:checked) { overflow: hidden !important; }

    .nav-list { flex-direction: column !important; align-items: center !important; gap: 30px !important; width: 100% !important; }
    .nav-list li { width: 100% !important; text-align: center !important; }
    .nav-list li a { font-size: 18px !important; letter-spacing: 4px !important; display: inline-block !important; }
    
    .nav-item-dropdown { position: relative !important; }
    .series-dropdown { position: static !important; transform: none !important; display: none !important; text-align: center !important; padding-top: 25px !important; width: 100% !important; }
    .nav-item-dropdown.open-on-mobile .series-dropdown { display: block !important; }
    .dropdown-content { background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
    .series-dropdown a { font-size: 12px !important; border: none !important; padding: 0 !important; color: #888 !important; display: block !important; width: 100% !important; }
}
/* ====================================================
   2. HERO (CINEMATIC VIEWFINDER)
   ==================================================== */
.cinematic-hero { position: relative; aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; max-height: 85vh !important; min-height: 600px !important; background: #000; overflow: hidden; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 2s ease; z-index: 1; }
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.9) 100%) !important; }
.hud-corner { position: absolute; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 5; pointer-events: none; }
.hud-corner.top-left { top: 40px; left: 40px; border-right: none; border-bottom: none; }
.hud-corner.top-right { top: 40px; right: 40px; border-left: none; border-bottom: none; }
.hud-corner.bottom-left { bottom: 40px; left: 40px; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 40px; right: 40px; border-left: none; border-top: none; }
.hud-center-cross { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; z-index: 5; pointer-events: none; }
.hud-center-cross::before { content:''; position:absolute; top:9px; left:0; width:20px; height:1px; background: rgba(255,255,255,0.2); }
.hud-center-cross::after { content:''; position:absolute; top:0; left:9px; width:1px; height:20px; background: rgba(255,255,255,0.2); }

.cinematic-hero .hero-container { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; display: flex !important; justify-content: space-between !important; align-items: flex-end !important; padding: 50px 60px !important; box-sizing: border-box !important; z-index: 10 !important; }
.hero-text-block h1 { font-family: 'Inter', sans-serif !important; font-size: clamp(48px, 6vw, 80px) !important; font-weight: 300 !important; line-height: 1.1 !important; letter-spacing: -2px !important; margin: 0 0 20px 0 !important; color: #fff !important; }
.hero-text-block p { font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; color: var(--gray) !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin: 0 !important; }
.hero-action-block .hero-btn { display: flex !important; align-items: center !important; gap: 15px !important; margin: 0 !important; padding: 20px 30px !important; background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 2px !important; border-radius: 0 !important; }
.hero-action-block .hero-btn:hover { background: #fff !important; color: #000 !important; }

@media (max-width: 768px) {
    .cinematic-hero { aspect-ratio: auto !important; height: 75vh !important; min-height: 550px !important; }
    .cinematic-hero .hero-container { flex-direction: column !important; align-items: flex-start !important; padding: 40px 25px !important; gap: 30px !important; }
    .hud-corner.top-left { top: 20px; left: 20px; } .hud-corner.top-right { top: 20px; right: 20px; }
    .hud-corner.bottom-left { bottom: 20px; left: 20px; } .hud-corner.bottom-right { bottom: 20px; right: 20px; }
    .hero-text-block h1 { font-size: 42px !important; }
    .hero-text-block p { font-size: 9px !important; line-height: 1.6 !important; }
}

/* ====================================================
   3. CATEGORY CONTROL PANEL (STRIP)
   ==================================================== */
.categories-section { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; background: var(--border) !important; padding: 0 !important; margin: 0 !important; width: 100% !important; border-bottom: 1px solid var(--border) !important; }
.category-item { background: #000 !important; }
.category-item a { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; padding: 25px 20px !important; text-decoration: none !important; transition: all 0.3s ease !important; gap: 15px !important; }
.category-item img { width: 22px !important; height: 22px !important; margin: 0 !important; object-fit: contain !important; filter: brightness(0) invert(1) !important; opacity: 0.5 !important; transition: all 0.3s ease !important; }
.category-item span { font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #888 !important; margin: 0 !important; transition: all 0.3s ease !important; }
.category-item a:hover { background: var(--red) !important; }
.category-item a:hover img { opacity: 1 !important; transform: scale(1.1) !important; }
.category-item a:hover span { color: #fff !important; letter-spacing: 4px !important; }
@media (max-width: 768px) { .categories-section { grid-template-columns: 1fr !important; } .category-item a { justify-content: flex-start !important; padding-left: 30px !important; } }

/* ====================================================
   4. THE SWISS ARCHIVE (SHOP & FEATURED GRID)
   ==================================================== */
body.woocommerce .site-main { padding-top: 0 !important; margin-top: 0 !important; background: #ffffff !important; padding-bottom: 0 !important; }
.woocommerce-notices-wrapper, .woocommerce-products-header, .woocommerce-products-header .page-title, .woocommerce-breadcrumb, .woocommerce-ordering, .woocommerce-result-count { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; visibility: hidden !important; }

.grid-header { background: #ffffff !important; padding: 30px 20px !important; text-align: center !important; border-top: 2px solid #000 !important; border-bottom: 2px solid #000 !important; display: block !important; }
.grid-header h2 { font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 6px !important; color: #000 !important; margin: 0 !important; text-transform: uppercase !important; }

.swiss-archive-grid, body.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; background: #ffffff !important; border-top: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: archive-counter !important; }
body.woocommerce ul.products::before, body.woocommerce ul.products::after { display: none !important; content: none !important; }

.swiss-card, body.woocommerce ul.products li.product { position: relative !important; background: #ffffff !important; border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; float: none !important; box-sizing: border-box !important; overflow: hidden !important; }

.swiss-image-link { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; height: 250px !important; flex-grow: 0 !important; padding: 30px !important; text-decoration: none !important; outline: none !important; box-sizing: border-box !important; width: 100% !important; }
.swiss-image-link img { margin: 0 !important; max-height: 100% !important; width: auto !important; object-fit: contain !important; transition: transform 0.5s ease !important; }
.swiss-card:hover .swiss-image-link img, body.woocommerce ul.products li.product:hover .swiss-image-link img { transform: scale(1.08) !important; }

.swiss-tech-box { width: 100% !important; border-top: 1px solid var(--border) !important; background: #fafafa !important; padding: 20px 15px !important; text-align: center !important; box-sizing: border-box !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; flex-grow: 1 !important; margin: 0 !important; }
.swiss-card:hover .swiss-tech-box, body.woocommerce ul.products li.product:hover .swiss-tech-box { background: #000 !important; border-top-color: #000 !important; }
.swiss-tech-box > a { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; text-decoration: none !important; outline: none !important; }

.swiss-title { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; color: #000 !important; margin: 0 0 10px 0 !important; line-height: 1.3 !important; transition: color 0.3s ease !important; }
.swiss-card:hover .swiss-title, body.woocommerce ul.products li.product:hover .swiss-title { color: #fff !important; }

.swiss-price { font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; font-weight: 600 !important; color: var(--gray) !important; text-align: center !important; display: block !important; margin-top: auto !important; width: 100% !important; white-space: nowrap !important; }
.swiss-price *, .swiss-price span, .swiss-price bdi, .swiss-price ins, .swiss-price del { display: inline !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: baseline !important; }
.swiss-price ins { margin-left: 6px !important; text-decoration: none !important; }
.swiss-price del { opacity: 0.5 !important; }
.swiss-card:hover .swiss-price, .swiss-card:hover .swiss-price *, body.woocommerce ul.products li.product:hover .swiss-price, body.woocommerce ul.products li.product:hover .swiss-price * { color: var(--red) !important; }
.swiss-price::before { content: "MSRP: " !important; font-size: 8px !important; letter-spacing: 2px !important; color: var(--gray) !important; margin-right: 5px !important; display: inline !important; }
.swiss-card:hover .swiss-price::before, body.woocommerce ul.products li.product:hover .swiss-price::before { color: #fff !important; }

@media (max-width: 900px) {
    .swiss-archive-grid, body.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    .swiss-card::before, body.woocommerce ul.products li.product::before { top: 10px; left: 10px; font-size: 8px; }
    .swiss-image-link { padding: 30px 15px 15px 15px !important; height: 150px !important; }
    .swiss-title { font-size: 10px !important; }
    .swiss-price, .swiss-price span { font-size: 9px !important; }
}

/* ====================================================
   5. JOURNAL AREA: THE EDITORIAL DARKROOM
   ==================================================== */
.home-journal { background: #000 !important; padding: 0 !important; border-top: 1px solid var(--border) !important; }
.home-journal h2 { font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 6px !important; color: #fff !important; text-align: center !important; padding: 40px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--border) !important; text-transform: uppercase !important; }
.home-journal > div { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; max-width: 100% !important; }
.home-journal article { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; background: #000 !important; transition: background 0.4s ease !important; }
.home-journal article:last-child { border-right: none !important; }
.home-journal a { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 50px 40px !important; text-decoration: none !important; box-sizing: border-box !important; }
.home-journal a img { width: 100% !important; height: 250px !important; object-fit: cover !important; margin-bottom: 30px !important; filter: grayscale(100%) contrast(120%) !important; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.home-journal .tech-spec { font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; color: var(--gray) !important; margin-bottom: 15px !important; text-transform: uppercase !important; transition: color 0.3s ease !important; }
.home-journal h3 { font-family: 'Inter', sans-serif !important; font-size: 22px !important; font-weight: 300 !important; letter-spacing: -0.5px !important; color: #fff !important; line-height: 1.4 !important; margin: 0 !important; transition: color 0.3s ease !important; }
.home-journal a:hover { background: #050505 !important; }
.home-journal a:hover img { filter: grayscale(0%) contrast(100%) !important; transform: scale(1.03) !important; }
.home-journal a:hover .tech-spec, .home-journal a:hover h3 { color: var(--red) !important; }
@media (max-width: 900px) { .home-journal > div { grid-template-columns: 1fr !important; } .home-journal article { border-right: none !important; } .home-journal a { padding: 40px 20px !important; } .home-journal a img { height: 200px !important; } }

/* ====================================================
   6. FOOTER: ULTRA MINIMAL (2-COLUMN)
   ==================================================== */
.site-footer { background: #000 !important; border-top: 1px solid var(--border) !important; padding: 0 !important; width: 100% !important; }
.footer-content { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 40px 5% !important; max-width: 1400px !important; margin: 0 auto !important; }
.footer-block p, .footer-block a, .footer-block span { font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; color: var(--gray) !important; margin: 0 !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 2px !important; transition: color 0.3s ease !important; }
.footer-brand { text-align: left !important; }
.footer-brand .company-name { font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 5px !important; letter-spacing: 1px !important; }
.footer-contact { text-align: right !important; }
.footer-contact p { margin-bottom: 5px !important; }
.contact-links { display: inline-flex !important; gap: 15px !important; align-items: center !important; justify-content: flex-end !important; }
.contact-links a { color: #fff !important; }
.contact-links a:hover { color: var(--red) !important; }
.contact-links .divider { color: #333 !important; }
@media (max-width: 768px) { .footer-content { flex-direction: column !important; text-align: center !important; padding: 40px 20px !important; gap: 30px !important; } .footer-brand, .footer-contact, .contact-links { text-align: center !important; justify-content: center !important; } .contact-links { flex-direction: column !important; gap: 10px !important; margin-top: 10px !important; } .contact-links .divider { display: none !important; } }

/* ====================================================
   7. WOOCOMMERCE: SINGLE PRODUCT (THE SPEC SHEET)
   ==================================================== */
body.single-product .site-main { background: #ffffff !important; padding: 80px 5% 100px 5% !important; max-width: 1400px !important; margin: 0 auto !important; display: block !important; overflow: hidden !important; }
body.single-product div.product { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: start !important; width: 100% !important; }

/* Left Side: Image Gallery */
body.single-product div.product .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; border: 1px solid var(--border) !important; padding: 80px !important; background: #fafafa !important; box-sizing: border-box !important; }
body.single-product div.product .woocommerce-product-gallery figure { margin: 0 !important; padding: 0 !important; }
body.single-product div.product .woocommerce-product-gallery img { width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; }
.woocommerce-product-gallery__trigger { display: none !important; }

/* Right Side: Spec Sheet Summary */
body.single-product div.product .summary { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
.summary .product_meta { font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 2px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 30px !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 20px !important; }
.summary .product_meta a { color: #000 !important; font-weight: 600 !important; text-decoration: none !important; }
.summary .product_meta a:hover { color: var(--red) !important; }
.summary .product_meta span { display: block !important; }
.summary .product_title { font-family: 'Inter', sans-serif !important; font-size: 36px !important; font-weight: 300 !important; letter-spacing: -1px !important; color: #000 !important; margin: 0 0 20px 0 !important; line-height: 1.2 !important; }
.summary .price { font-family: 'IBM Plex Mono', monospace !important; font-size: 22px !important; font-weight: 600 !important; color: var(--red) !important; display: flex !important; align-items: center !important; margin-bottom: 40px !important; }
.summary .price::before { content: "MSRP // " !important; font-size: 11px !important; color: #888 !important; letter-spacing: 2px !important; margin-right: 10px !important; }
.summary .woocommerce-product-details__short-description { font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.8 !important; color: #555 !important; margin-bottom: 40px !important; }

/* Cart Vaporizer */
.summary form.cart, .summary .cart, .summary .quantity, .summary button.single_add_to_cart_button { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1 !important; margin-top: 80px !important; border-top: 2px solid #000 !important; padding-top: 40px !important; width: 100% !important; }
.woocommerce-tabs ul.tabs { list-style: none !important; padding: 0 !important; margin: 0 0 40px 0 !important; display: flex !important; gap: 40px !important; }
.woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a { font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; font-weight: 600 !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-decoration: none !important; box-shadow: none !important; transition: color 0.3s ease !important; }
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: #000 !important; border-bottom: 2px solid var(--red) !important; padding-bottom: 5px !important; }
.woocommerce-Tabs-panel { font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.8 !important; color: #444 !important; max-width: 900px !important; }
.woocommerce-Tabs-panel h2 { display: none !important; }

/* Related Products */
.related.products { grid-column: 1 / -1 !important; margin-top: 80px !important; padding-top: 80px !important; border-top: 1px solid var(--border) !important; width: 100% !important; }
.related.products > h2 { font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 6px !important; color: #000 !important; text-transform: uppercase !important; text-align: center !important; margin: 0 0 40px 0 !important; }
.related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; background: #ffffff !important; border-top: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; margin: 0 !important; padding: 0 !important; }

@media (max-width: 900px) {
    body.single-product .site-main { padding: 40px 20px 80px 20px !important; }
    body.single-product div.product { grid-template-columns: 1fr !important; gap: 40px !important; }
    body.single-product div.product .woocommerce-product-gallery { padding: 30px !important; }
    .summary .product_title { font-size: 24px !important; }
    .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ====================================================
   8. WOOCOMMERCE: GLOBAL SYSTEM OVERRIDES & FIXES
   ==================================================== */
#secondary, .widget-area, #sidebar, .sidebar, .site-sidebar, .woocommerce-sidebar, .footer-widgets { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; }

/* Pagination Alignment */
.woocommerce nav.woocommerce-pagination { margin: 0 !important; padding: 80px 0 !important; background: #ffffff !important; display: flex !important; justify-content: center !important; width: 100% !important; }
.woocommerce nav.woocommerce-pagination ul { border: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; gap: 10px !important; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; margin: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; width: 45px !important; height: 45px !important; padding: 0 !important; background: #fff !important; color: #000 !important; border: 1px solid #eaeaea !important; text-decoration: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

/* Empty Search / No Products Found */
body.woocommerce-no-results .site-main { min-height: 65vh !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; }
.woocommerce-info { background: transparent !important; border: none !important; box-shadow: none !important; padding: 60px 40px !important; margin: 0 auto !important; max-width: 800px !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-top: 2px solid #000 !important; }
.woocommerce-info::before { content: '0 INVENTORY MATCHES' !important; position: static !important; display: block !important; font-family: 'Inter', sans-serif !important; font-size: 36px !important; font-weight: 300 !important; color: #000 !important; letter-spacing: -1px !important; margin: 0 0 20px 0 !important; background: transparent !important; }
/* ====================================================
   MOBILE MENU INSURANCE PATCH
   ==================================================== */
.header-center.nav-open { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    visibility: visible !important;
}
.nav-item-dropdown.open-on-mobile .series-dropdown {
    display: block !important;
    visibility: visible !important;
}
/* ====================================================
   9. JOURNAL ARCHIVE (THE EDITORIAL DARKROOM)
   ==================================================== */

.journal-archive-main { 
    background: #000 !important; 
    width: 100% !important; 
}

/* The Header */
.journal-header { 
    padding: 60px 20px !important; 
    text-align: center !important; 
    border-bottom: 1px solid var(--border) !important; 
}

.journal-title { 
    font-family: 'IBM Plex Mono', monospace !important; 
    font-size: 14px !important; 
    font-weight: 700 !important; 
    letter-spacing: 6px !important; 
    color: #fff !important; 
    margin: 0 !important; 
    text-transform: uppercase !important; 
}

/* The 3-Column Grid */
.journal-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 1px !important; /* 1px Architectural lines */
    background: var(--border) !important; 
    border-bottom: 1px solid var(--border) !important; 
}

/* The Article Card */
.journal-article { 
    background: #000 !important; 
    transition: background 0.4s ease !important; 
}

.journal-link { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100% !important; 
    text-decoration: none !important; 
    outline: none !important; 
}

/* The Image Area */
.journal-image-wrapper { 
    width: 100% !important; 
    height: 320px !important; /* Locks image height to keep grid flawless */
    overflow: hidden !important; 
    background: #050505 !important; 
}

.journal-image-wrapper img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    filter: grayscale(100%) contrast(120%) !important; /* Grayscale default */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

/* Fallback if a post has no image */
.journal-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.journal-placeholder::after { content: 'NO IMAGE'; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #222; letter-spacing: 4px; }

/* The Text Block */
.journal-content { 
    padding: 40px 50px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    flex-grow: 1 !important; 
}

.journal-date { 
    font-family: 'IBM Plex Mono', monospace !important; 
    font-size: 10px !important; 
    color: var(--gray) !important; 
    margin-bottom: 15px !important; 
    text-transform: uppercase !important; 
    letter-spacing: 2px !important; 
    transition: color 0.3s ease !important; 
}

.journal-post-title { 
    font-family: 'Inter', sans-serif !important; 
    font-size: 24px !important; 
    font-weight: 300 !important; /* Elegant thin font */
    letter-spacing: -0.5px !important; 
    color: #fff !important; 
    line-height: 1.3 !important; 
    margin: 0 0 20px 0 !important; 
    transition: color 0.3s ease !important; 
}

.journal-excerpt { 
    font-family: 'Inter', sans-serif !important; 
    font-size: 13px !important; 
    color: #888 !important; 
    line-height: 1.6 !important; 
    margin: 0 !important; 
}

/* Hover Reveals */
.journal-article:hover { background: #080808 !important; }
.journal-article:hover .journal-image-wrapper img { filter: grayscale(0%) contrast(100%) !important; transform: scale(1.05) !important; }
.journal-article:hover .journal-date, .journal-article:hover .journal-post-title { color: var(--red) !important; }

/* Pagination Alignment */
.journal-pagination { grid-column: 1 / -1 !important; background: #000 !important; padding: 80px 0 !important; display: flex !important; justify-content: center !important; }
.journal-pagination .nav-links { display: flex !important; gap: 10px !important; }
.journal-pagination .page-numbers { display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; width: 45px !important; height: 45px !important; background: #000 !important; color: #fff !important; border: 1px solid var(--border) !important; text-decoration: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; }
.journal-pagination .page-numbers.current { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.journal-pagination .page-numbers:hover:not(.current) { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

/* Mobile Formatting */
@media (max-width: 900px) {
    .journal-grid { grid-template-columns: 1fr !important; }
    .journal-content { padding: 40px 30px !important; }
    .journal-image-wrapper { height: 220px !important; }
    .journal-post-title { font-size: 20px !important; }
}
/* ====================================================
   10. STANDARD PAGES (THE ARCHITECTURAL DOCUMENT)
   ==================================================== */

/* 1. Main Background & Spacing */
.bauhaus-document-main {
    background: #000 !important; /* Pitch black background */
    width: 100% !important;
    min-height: 70vh !important; /* Ensures footer stays down on short pages */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers the content column */
}

/* 2. The Header */
.document-header {
    width: 100% !important;
    padding: 60px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--border) !important;
    background: #000 !important;
}

.document-title {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 6px !important;
    color: #fff !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

/* 3. The Reading Column (Strict Width for Readability) */
.document-content {
    width: 100% !important;
    max-width: 800px !important; /* Forces a narrow, readable column */
    padding: 80px 40px 120px 40px !important;
    box-sizing: border-box !important;
    color: #ccc !important; /* Very light gray, easier to read than pure white */
}

/* 4. Inside the Content (Typography Reset) */
.document-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin: 0 0 30px 0 !important;
}

/* Headers inside the page text (H2, H3) */
.document-content h2, 
.document-content h3, 
.document-content h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    letter-spacing: -0.5px !important;
    color: #fff !important;
    margin: 60px 0 20px 0 !important;
    line-height: 1.3 !important;
}

.document-content h3 { font-size: 18px !important; font-weight: 500 !important; }

/* Lists (Bullet points) */
.document-content ul, 
.document-content ol {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin: 0 0 30px 0 !important;
    padding-left: 20px !important;
    color: #ccc !important;
}

.document-content li { margin-bottom: 10px !important; }

/* Links inside the text */
.document-content a {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--red) !important; /* Subtle Bauhaus red underline */
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

.document-content a:hover {
    color: var(--red) !important;
}

/* 5. Mobile Adjustments */
@media (max-width: 768px) {
    .document-header { padding: 40px 20px !important; }
    .document-content { padding: 40px 20px 80px 20px !important; }
    .document-content p { font-size: 14px !important; }
    .document-content h2 { font-size: 20px !important; margin-top: 40px !important; }
}
/* ====================================================
   LANGUAGE TOGGLE (INTEGRATED LAYOUT)
   ==================================================== */
/* Ensure header-right can hold search, flags, and hamburger side-by-side */
.header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 30px !important; /* Spacing between elements */
    z-index: 9999 !important;
    position: relative !important;
}

/* The Flag Container */
.language-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* Space between the two flags */
    z-index: 1000 !important;
}

/* The Flags */
.lang-flag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.lang-flag svg {
    display: block !important;
    border-radius: 2px !important; 
    filter: grayscale(100%) opacity(0.4) !important;
    transition: all 0.3s ease !important;
}

.lang-flag:hover svg {
    filter: grayscale(0%) opacity(1) !important; 
    transform: scale(1.1) !important;
}

/* Active Language highlighting */
html[lang*="de"] a[aria-label="Deutsch"] svg {
    filter: grayscale(0%) opacity(1) !important;
}

html[lang*="en"] a[aria-label="English"] svg,
html:not([lang*="de"]) a[aria-label="English"] svg {
    filter: grayscale(0%) opacity(1) !important;
}

/* ====================================================
   MOBILE FIX: HEADER REFLOW
   ==================================================== */
@media (max-width: 900px) {
    .site-header { 
        padding: 20px 20px 80px 20px !important; /* Room for Search Bar */
    }
    
    .header-right { 
        flex: 1 1 50% !important; 
        gap: 20px !important; /* Tighter spacing on phones */
    }
    
    .mobile-toggle { 
        display: flex !important; 
        margin: 0 !important; 
        z-index: 9999 !important; 
    }
    
    .bauhaus-search { 
        position: absolute !important; 
        bottom: 20px !important; 
        left: 20px !important; 
        width: calc(100% - 40px) !important; 
    }
}
/* ====================================================
   MOBILE FIX: HEADER REFLOW & SEARCH BAR LOCK
   ==================================================== */
@media (max-width: 900px) {
    .site-header { 
        padding: 20px 20px 80px 20px !important; /* The 80px bottom creates the slot for the search bar */
        position: relative !important; 
        height: auto !important;
        align-items: center !important;
    }
    
    .header-right { 
        position: static !important; /* THE FIX: Removes the cage so the search bar can escape */
        flex: 1 1 50% !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important; /* Keeps Flags and Hamburger neat */
    }
    
    /* Forces the Search Bar into the 80px slot at the bottom of the main header */
    .bauhaus-search { 
        position: absolute !important; 
        bottom: 20px !important; 
        left: 20px !important; 
        width: calc(100% - 40px) !important; 
        display: flex !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .language-toggle {
        margin: 0 !important; /* Removes desktop left margin */
        z-index: 9999 !important;
    }
    
    .mobile-toggle { 
        display: flex !important; 
        margin: 0 !important; 
        z-index: 9999 !important; 
    }
}
/* Images inside standard pages */
.document-content img {
    max-width: 100% !important;
    height: auto !important;
    margin: 40px 0 !important;
    display: block !important;
    filter: grayscale(100%) contrast(120%) !important; /* Grayscale by default */
    transition: all 0.5s ease !important;
}

.document-content img:hover {
    filter: grayscale(0%) contrast(100%) !important; /* Blooms to color on hover */
}