@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;600&display=swap');

/*
Theme Name: DuoBad Luxury
Theme URI: https://duobad.com/
Description: A premium, storytelling WordPress theme for DuoBad, featuring Scandinavian craftsmanship, high-end typography, and 100% user-editability via Full Site Editing (FSE).
Author: Senior WordPress Architect
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duobad
*/

/* Custom CSS Tokens for FSE */
:root {
	--duobad-zero-gap: 0px;
	--duobad-transition-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* The "Gessi" Grid: Zero-Gutter Gallery */
.is-style-zero-gutter-grid {
	gap: var(--duobad-zero-gap) !important;
}

.is-style-zero-gutter-grid .wp-block-image {
	margin: 0 !important;
	overflow: hidden;
}

.is-style-zero-gutter-grid .wp-block-image img {
	transition: transform 0.8s var(--duobad-transition-smooth);
}

.is-style-zero-gutter-grid .wp-block-image:hover img {
	transform: scale(1.05);
}

/* Split-Screen Interactive Patterns */
.is-style-split-screen-story {
	min-height: 80vh;
	display: flex;
	align-items: center;
}

/* Sticky BOKA CTA Animation */
.wp-block-button.is-style-cta-sticky {
	position: sticky;
	top: 2rem;
	z-index: 100;
	transition: all 0.3s ease;
}

/* Target the inner container of the gallery */
.is-style-zero-gutter-grid .wp-block-gallery, 
.is-style-zero-gutter-grid.wp-block-gallery {
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Header Layout Fixes */
.main-hud {
    align-items: center !important;
}

.site-header {
    background: var(--wp--preset--color--base-white);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.wp-block-site-title a {
    text-decoration: none;
    color: var(--wp--preset--color--deep-contrast);
}

.has-margin-left-20px {
    margin-left: 20px;
}


/* Gessi-Style Side Drawer SURGICAL MATCH (v3) */

/* 1. Header: X CLOSE label */
.wp-block-navigation__responsive-container-close {
    display: flex !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #666 !important;
}

.wp-block-navigation__responsive-container-close::after {
    content: "CLOSE";
    margin-left: 10px;
}

/* 2. Primary Tier (Serif) + Carets */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    position: relative !important;
    margin-bottom: 1.8rem !important; /* Tighter padding like screenshot */
}

.wp-block-navigation__responsive-container-content .wp-block-navigation-item::after {
    content: ">";
    position: absolute;
    right: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #999;
}

/* 3. Secondary Tier (Sans) */
/* By default, we target later items or use a specific class in the editor */
.wp-block-navigation-item:nth-child(n+7) {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.8rem !important;
}

.wp-block-navigation-item:nth-child(n+7)::after {
    display: none !important; /* No carets for secondary items */
}

/* 4. Pinned Footer Buttons */
.wp-block-navigation__responsive-container-content::after {
    content: ""; /* Spacer to keep buttons from overlapping menu */
    display: block;
    height: 120px;
}

/* Hardcoding the Bottom Buttons (using a background layer to simulate if blocks aren't available) */
/* Note: For real buttons, we'd add wp:buttons to header.html and pin them. */
.wp-block-navigation__responsive-container.is-menu-open {
    padding-bottom: 100px !important;
}

/* 5. Gessi Backdrop Glass v3 */
.wp-block-navigation__responsive-container.is-menu-open {
    background: #f4f4f4 !important;
    transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1) !important;
}

/* Gessi Drawer Footer Pinning */
.gessi-drawer-footer {
    display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .gessi-drawer-footer {
    display: flex !important;
    position: absolute !important;
    bottom: 30px !important;
    left: 30px !important;
    width: 300px !important;
    z-index: 999999 !important;
}

.gessi-drawer-footer .wp-block-button__link {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    padding: 10px 20px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #ddd !important;
    text-transform: uppercase !important;
}

.gessi-drawer-footer .wp-block-button:last-child .wp-block-button__link {
    background: #e0e0e0 !important; /* Muted grey for Area Pro */
}

/* ============================================================
   PROFESSIONAL HEADER
   ============================================================ */
#duobad-header {
    position: absolute;
    top: 0;
    z-index: 9000;
    background: transparent;
    border-bottom: none;
    width: 100%;
    color: #fff;
    padding-top: 24px;
}

.db-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    padding: 0 40px;
    height: 72px;
}

/* Left zone */
.db-header-left { flex: 1; display: flex; align-items: center; gap: 18px; }

.db-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: currentColor;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}
.db-hamburger:hover { opacity: 0.5; }

/* Center zone — logo */
.db-header-center { flex: 1; display: flex; justify-content: center; align-items: center; }

.db-logo {
    width: 180px;
    height: auto;
    display: block;
}

/* Right zone — CTA */
.db-header-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }

.db-header-cta {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: #1a1a1a;
    padding: 12px 20px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}
.db-header-cta:hover { background: #444; }

/* Mobile header */
@media (max-width: 768px) {
    #duobad-header { padding-top: 12px; }
    .db-header-inner { padding: 0 20px; height: 60px; }
    .db-logo { width: 125px; }
    .db-header-cta { padding: 10px 14px; font-size: 9px; }
}


/* ============================================================
   FULL-SCREEN HERO SECTION
   ============================================================ */
.db-hero {
    position: relative;
    width: 100%;
    height: 100svh;          /* full viewport height */
    min-height: 500px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;   /* content sits at the bottom like Gessi */
    overflow: hidden;
}

/* Dark gradient overlay — makes text readable on any image */
.db-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0.65) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hero content block */
.db-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 60px 80px;
    max-width: 700px;
    color: #fff;
}

.db-hero-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 0 0 16px;
}

.db-hero-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 200;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin: 0 0 20px;
    color: #fff;
}

.db-hero-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin: 0 0 36px;
    max-width: 480px;
}

.db-hero-btn {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #fff;
    padding: 14px 28px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
    border: 1px solid #fff;
}
.db-hero-btn:hover {
    background: transparent;
    color: #fff;
}

/* Responsive hero */
@media (max-width: 768px) {
    .db-hero-content { padding: 40px 24px 60px; }
    .db-hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .db-hero-subtitle { font-size: 13px; }
}

/* Responsive homepage sections */
@media (max-width: 768px) {
    .db-split-screen { flex-direction: column; }
    .db-split-image  { min-height: 300px; }
    .db-grid-gallery { grid-template-columns: 1fr; }
    /* Category portal */
    section[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    /* Material showcase */
    section[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    /* Cases */
    section[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    /* Collection explorer */
    section[style*="justify-content:center;gap:60px"] { gap: 24px !important; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
#db-hero-slider {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 500px;
    overflow: hidden;
    background: #111;
}

/* Each slide — stacked via absolute positioning */
.db-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden; /* GSAP controls via autoAlpha */
}
.db-slide--active { visibility: visible; }

/* Ken Burns: the bg div zooms, not the whole slide */
.db-slide-bg {
    position: absolute;
    inset: -5%; /* gives zoom headroom */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Gradient overlay */
.db-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0.05) 50%,
        rgba(0,0,0,0.60) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Bottom-left: text */
.db-slide-text {
    position: absolute;
    bottom: 80px;
    left: 60px;
    z-index: 2;
    max-width: 560px;
}

.db-slide-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin: 0 0 14px;
}

.db-slide-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1;
    color: #fff;
    margin: 0;
    white-space: nowrap;       /* single line — never wraps */
    text-transform: uppercase;
}

.db-slide-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin: 0;
    max-width: 420px;
}

/* Bottom-right: CTA button */
.db-slide-cta {
    position: absolute;
    bottom: 80px;
    right: 60px;
    z-index: 2;
}

.db-slide-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 14px 24px;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,0.08);
}
.db-slide-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: #fff;
}

/* Dot navigation */
.db-slider-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.db-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.db-dot--active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.3);
}

/* Mobile slider */
@media (max-width: 768px) {
    .db-slide-text { left: 24px; bottom: 80px; max-width: calc(100% - 48px); }
    .db-slide-cta  { right: 24px; bottom: 24px; }
    .db-slide-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

/* ============================================================
   COUNTRY / LANGUAGE SELECTOR
   ============================================================ */

/* ── Trigger button in header ── */
.db-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    color: currentColor;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: opacity 0.25s;
    margin-right: 24px;    /* gap before CTA button */
}
.db-lang-trigger:hover { opacity: 1; }

.db-lang-globe {
    flex-shrink: 0;
    opacity: 0.8;
}

.db-lang-label {
    white-space: nowrap;
}

/* ── Backdrop overlay ── */
.db-lang-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 8000;
    opacity: 0;
}
.db-lang-backdrop--visible {
    display: block;
}

/* ── Slide-in panel ── */
.db-lang-panel {
    display: flex;           /* always flex — hidden via visibility */
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100svh;
    background: #fff;
    z-index: 9000;
    transform: translateX(100%);
    overflow-y: auto;
    box-shadow: -4px 0 40px rgba(0,0,0,0.12);
    visibility: hidden;
    pointer-events: none;
}

/* Panel header row */
.db-lang-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.db-lang-panel-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}

.db-lang-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.3s;
    line-height: 0;
}
.db-lang-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Country list */
.db-lang-list {
    padding: 16px 0;
    flex: 1;
    overflow-y: auto;
}

.db-lang-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    padding: 16px 32px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
    transition: background 0.2s;
    position: relative;
}
.db-lang-item:last-child { border-bottom: none; }
.db-lang-item:hover { background: #fafafa; }

.db-lang-item--active {
    background: #f5f5f5;
}
.db-lang-item--active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #1a1a1a;
}

.db-lang-flag {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.db-lang-country {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    flex: 1;
}

.db-lang-code {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaa;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .db-lang-panel { width: 100vw; }
    .db-lang-trigger { display: none; }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

/* Search icon trigger */
.db-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    padding: 6px;
    opacity: 0.75;
    transition: opacity 0.2s;
    margin-right: 20px;
}
.db-search-trigger:hover { opacity: 1; }

/* Full-screen overlay — slides from top */
.db-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
}

.db-search-inner {
    width: 100%;
    max-width: 800px;
    padding: 60px 40px;
    position: relative;
}

/* Close button */
.db-search-close {
    position: absolute;
    top: -20px;
    right: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0,0,0,0.35);
    padding: 8px;
    transition: color 0.2s, transform 0.3s;
    line-height: 0;
}
.db-search-close:hover {
    color: #1a1a1a;
    transform: rotate(90deg);
}

/* Eyebrow label */
.db-search-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    margin: 0 0 24px;
}

/* Form */
.db-search-form { width: 100%; }

.db-search-field-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    padding-bottom: 12px;
    gap: 12px;
    transition: border-color 0.3s;
}
.db-search-field-wrap:focus-within {
    border-color: rgba(0,0,0,0.5);
}

.db-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 200;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    caret-color: #1a1a1a;
}
.db-search-input::placeholder { color: rgba(0,0,0,0.25); }
/* Remove default search clear button */
.db-search-input::-webkit-search-cancel-button { display: none; }

.db-search-submit {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0,0,0,0.35);
    padding: 4px;
    line-height: 0;
    transition: color 0.2s;
    flex-shrink: 0;
}
.db-search-submit:hover { color: #1a1a1a; }

/* Live results */
.db-search-results { margin-top: 20px; }

.db-search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.db-search-result-list li { border-bottom: 1px solid rgba(0,0,0,0.06); }
.db-search-result-list li a {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: rgba(0,0,0,0.6);
    padding: 12px 0;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}
.db-search-result-list li a:hover {
    color: #1a1a1a;
    padding-left: 8px;
}

.db-search-no-results {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.35);
    margin: 16px 0 0;
    letter-spacing: 0.08em;
}

/* Popular searches */
.db-search-popular { margin-top: 48px; }

.db-search-popular-label {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.3);
    margin: 0 0 16px;
}

.db-search-popular-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.db-search-popular-links a {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.45);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s;
}
.db-search-popular-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: rgba(0,0,0,0.4);
    transition: width 0.3s ease;
}
.db-search-popular-links a:hover { color: rgba(0,0,0,0.8); }
.db-search-popular-links a:hover::after { width: 100%; }

/* Mobile */
@media (max-width: 768px) {
    .db-search-inner { padding: 80px 24px 40px; }
    .db-search-close { right: 24px; }
}

/* ============================================================
   HEADER LEFT — Menu label & Reseller tab
   ============================================================ */

/* Make the left column a flex row */
.db-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* "Menu" text next to the hamburger */
.db-menu-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.75;
    user-select: none;
}

/* Reseller tab */
.db-reseller-tab {
    display: inline-flex;
    align-items: center;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: currentColor;
    text-decoration: none;
    border: 1px solid currentColor;
    padding: 5px 14px;
    opacity: 0.6;
    transition: opacity 0.25s, background 0.25s, color 0.25s;
    position: relative;
}
.db-reseller-tab:hover {
    opacity: 1;
    background: #1a1a1a;
    color: #fff;
}



/* Hide Menu label on small screens */
@media (max-width: 640px) {
    .db-menu-label { display: none; }
    .db-reseller-tab { display: none; }
}

/* ============================================================
   4-IMAGE CATEGORY GRID (Block B)
   ============================================================ */

.db-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    margin-top: 100px;
}

.db-cat-cell {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    text-decoration: none;
}

.db-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.db-cat-cell:hover .db-cat-img {
    transform: scale(1.06);
}

.db-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 1;
    display: flex;
    align-items: flex-end;
    padding: 32px 28px;
    pointer-events: none;
}

.db-cat-label {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.db-cat-cell:hover .db-cat-label {
    transform: translateY(-8px);
}

@media (max-width: 768px) {
    .db-cat-grid { grid-template-columns: repeat(2, 1fr); margin-top: 80px; }
    .db-cat-cell { aspect-ratio: 1 / 1; }
}

/* ============================================================
   HERITAGE STORY SECTION (Block D)
   ============================================================ */

.db-heritage-section {
    background: #faf9f7;          /* warm off-white */
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* ── Text block ── */
.db-heritage-text {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 0 8%;
}

.db-heritage-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 20px;
}

.db-heritage-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 200;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 28px;
    text-transform: uppercase;
}

.db-heritage-body {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: #555;
    margin: 0;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Two tightened images ── */
.db-heritage-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    text-decoration: none;
    overflow: hidden;
}

.db-heritage-img-wrap {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
}

.db-heritage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.db-heritage-img-wrap:hover .db-heritage-img {
    transform: scale(1.05);
}

/* Subtle dark overlay on hover to signal clickability */
.db-heritage-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
}
.db-heritage-img-wrap:hover::after {
    background: rgba(0,0,0,0.08);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .db-heritage-section {
        padding: 70px 6%;
        gap: 40px;
    }
    .db-heritage-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }
    .db-heritage-images {
        grid-template-columns: 1fr 1fr;  /* keep 2-col even on tablet */
    }
}

@media (max-width: 480px) {
    .db-heritage-images {
        grid-template-columns: 1fr;      /* stack on small phones */
    }
    .db-heritage-img-wrap {
        aspect-ratio: 3 / 2;
    }
}

/* ============================================================
   VÅRA PRODUKTER SECTION (Block E)
   ============================================================ */

.db-products-section {
    background: #fff;
    padding: 90px 6% 80px;
}

/* Centred heading block */
.db-products-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.db-products-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0;
}

.db-products-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 200;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    margin: 0;
}

/* Decorative thin rule */
.db-products-rule {
    display: block;
    width: 40px;
    height: 1px;
    background: #ccc;
    margin-top: 4px;
}

/* 3-column product grid */
.db-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 900px) {
    .db-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

@media (max-width: 560px) {
    .db-products-section { padding: 60px 5%; }
    .db-products-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ============================================================
   INSPIRATION SECTION (Block F)
   ============================================================ */

.db-inspiration-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Full-bleed background image */
.db-ins-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 10s ease;
    z-index: 0;
}
.db-inspiration-section:hover .db-ins-bg {
    transform: scale(1.04);   /* subtle Ken Burns on hover */
}

/* Dark gradient overlay */
.db-inspiration-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.12) 0%,
        rgba(0,0,0,0.5)  100%
    );
    z-index: 1;
}

/* Content — sits above overlay */
.db-ins-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.db-ins-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

.db-ins-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 200;
    letter-spacing: 0.06em;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Read More button */
.db-ins-btn {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.7);
    padding: 14px 36px;
    margin-top: 8px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.db-ins-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #1a1a1a;
}

/* Mobile */
@media (max-width: 768px) {
    .db-inspiration-section {
        min-height: 60vh;
    }
    .db-ins-title {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }
}

/* ============================================================
   INSPIRERANDE HUS OCH HEM — 3-AT-A-TIME SLIDER (Block F2)
   ============================================================ */

.db-cases-section {
    background: #fff;
    padding: 90px 6% 80px;
    position: relative;
}

/* Section header */
.db-cases-header {
    margin-bottom: 0;   /* spacing handled by .db-cases-top margin-bottom */
}

.db-cases-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 14px;
}

.db-cases-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.01em;
    color: #1a1a1a;
    margin: 0;
}

/* ── Slider viewport (clips the overflowing track) ── */
.db-cases-slider {
    position: relative;
    overflow: hidden;
}

/* ── Track: 200% wide → 2 pages of 3 cards ── */
.db-cases-track {
    display: flex;
    flex-wrap: nowrap;
    width: 200%;          /* 2 pages × 100% viewport */
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
    gap: 0;
}

/* ── Individual card: 1/6 of track = 1/3 of visible viewport ── */
.db-case-card {
    display: block;
    flex: 0 0 calc(100% / 6);   /* 6 cards fill the 200%-wide track */
    width: calc(100% / 6);
    padding: 0 12px;             /* 12px each side → 24px gap between cards */
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

/* Image wrapper */
.db-case-img-wrap {
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: 24px;
}

.db-case-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.db-case-card:hover .db-case-img {
    transform: scale(1.04);
}

/* Text block below image */
.db-case-body { padding: 0; }

.db-case-card-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #1a1a1a;
    margin: 0 0 14px;
    transition: color 0.25s ease;
}
.db-case-card:hover .db-case-card-title { color: #555; }

.db-case-card-desc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.75;
    color: #777;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Top row: header + arrows side-by-side ── */
.db-cases-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 24px;
}

/* Arrow controls group — sits OUTSIDE overflow:hidden */
.db-cases-controls {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.db-cases-arrow {
    background: transparent;
    border: 1px solid #d0d0d0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, opacity 0.25s ease;
    padding: 0;
    flex-shrink: 0;
}
.db-cases-arrow:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}
.db-cases-arrow--dim {
    opacity: 0.25;
    pointer-events: none;
}

/* Grab cursor on the draggable viewport */
.db-cases-slider {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.db-cases-slider:active { cursor: grabbing; }

/* ── Dot indicators ── */
.db-cases-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}

.db-cases-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease;
}
.db-cases-dot--active {
    background: #1a1a1a;
    transform: scale(1.4);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .db-cases-section { padding: 60px 5% 60px; }
    .db-cases-top { flex-direction: column; align-items: flex-start; gap: 16px; }

    .db-cases-track {
        flex-wrap: nowrap;
        width: 600%;   /* 6 cards × 100% */
    }
    .db-case-card {
        flex: 0 0 calc(100% / 6);
        width: calc(100% / 6);
    }
    .db-case-img-wrap { aspect-ratio: 4 / 3; }
}

/* ============================================================
   UTFORSKA VÅR KOLLEKTION — 6-product beige grid (Block G)
   Background: Pantone 4515 U light ≈ #ede5d5
   ============================================================ */

.db-koll-section {
    background: #60808a;    /* Custom blue-grey */
    padding: 80px 6% 90px;
}

/* Header */
.db-koll-header {
    margin-bottom: 52px;
    text-align: center;
}

.db-koll-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 12px;
}

.db-koll-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0;
}

/* 3-col × 2-row grid — zero gap between cells like reference image */
.db-koll-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 48px;
    column-gap: 28px;
}

/* Card link */
.db-koll-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image cell */
.db-koll-img-wrap {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #d8cfc3;    /* slightly darker beige placeholder */
    margin-bottom: 18px;
}

.db-koll-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.db-koll-card:hover .db-koll-img {
    transform: scale(1.04);
}

/* Label centred below image — matches reference "Bath / Kitchen" style */
.db-koll-label {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-align: center;
    margin: 0;
    transition: color 0.25s ease;
}
.db-koll-card:hover .db-koll-label {
    color: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .db-koll-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        row-gap: 36px;
    }
}

@media (max-width: 480px) {
    .db-koll-section { padding: 60px 5% 70px; }
    .db-koll-grid {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }
}

/* ============================================================
   DUOBAD FOOTER — Scandinavian light style
   Background: #f5f0e8 (warm off-white ivory)
   ============================================================ */

.db-footer {
    background: #f5f0e8;
    color: #2a221a;
    font-family: 'Jost', sans-serif;
    border-top: 1px solid #e0d8cc;
}

/* 4-column grid */
.db-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 56px;
    padding: 80px 6% 64px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Brand / logo */
.db-footer-logo {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2a221a;
    margin: 0 0 20px;
}

.db-footer-tagline {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.85;
    color: #7a6a56;
    margin: 0 0 28px;
}

.db-footer-rule {
    display: block;
    width: 36px;
    height: 1px;
    background: #c8bfb0;
    margin-bottom: 24px;
}

/* Social icons */
.db-footer-social { display: flex; gap: 14px; }

.db-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d4cbbf;
    border-radius: 50%;
    color: #7a6a56;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.db-footer-social-link:hover {
    border-color: #2a221a;
    background: #2a221a;
    color: #f5f0e8;
}

/* Column headings */
.db-footer-heading {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8c7e6f;
    margin: 0 0 22px;
}

/* Nav list */
.db-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.db-footer-nav li a {
    font-size: 13px;
    font-weight: 300;
    color: #2a221a;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color 0.25s ease;
}
.db-footer-nav li a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0;
    height: 1px;
    background: #2a221a;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.db-footer-nav li a:hover { color: #5a4a38; }
.db-footer-nav li a:hover::after { width: 100%; }

/* Address */
.db-footer-address {
    font-style: normal;
    margin-bottom: 18px;
}
.db-footer-address p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.75;
    color: #5a4a38;
    margin: 0;
}

.db-footer-phone,
.db-footer-email {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #2a221a;
    text-decoration: none;
    margin-top: 8px;
    transition: color 0.25s ease;
}
.db-footer-phone:hover,
.db-footer-email:hover { color: #7a6a56; }

/* Newsletter */
.db-footer-sub {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.8;
    color: #7a6a56;
    margin: 0 0 20px;
}
.db-footer-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-footer-input {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    padding: 11px 14px;
    border: 1px solid #d4cbbf;
    background: transparent;
    color: #2a221a;
    outline: none;
    transition: border-color 0.25s ease;
    box-sizing: border-box;
    width: 100%;
}
.db-footer-input::placeholder { color: #b0a090; }
.db-footer-input:focus { border-color: #2a221a; }

.db-footer-btn {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 11px 20px;
    background: #2a221a;
    color: #f5f0e8;
    border: 1px solid #2a221a;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    align-self: flex-start;
}
.db-footer-btn:hover { background: transparent; color: #2a221a; }

.db-footer-hours p {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.75;
    color: #7a6a56;
    margin: 0;
}

/* Bottom bar */
.db-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 22px 6%;
    border-top: 1px solid #e0d8cc;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}
.db-footer-copy {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #9e8f7e;
    margin: 0;
}
.db-footer-legal { display: flex; align-items: center; gap: 10px; }
.db-footer-legal a {
    font-size: 11px;
    font-weight: 300;
    color: #9e8f7e;
    text-decoration: none;
    transition: color 0.25s ease;
}
.db-footer-legal a:hover { color: #2a221a; }
.db-footer-legal span { font-size: 11px; color: #c8bfb0; }

/* Responsive */
@media (max-width: 1024px) {
    .db-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 44px 36px;
    }
}
@media (max-width: 600px) {
    .db-footer-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 56px 5% 44px;
    }
    .db-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================================
   STYLES SHOWCASE (4 COLUMNS)
   ============================================================ */
.db-styles-section {
    background-color: #f7f5f2;
    padding: 100px 5%;
}

.db-styles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.db-style-card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: left;
}
.db-style-card:hover .db-style-img-wrap img {
    transform: scale(1.05);
}

.db-style-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 24px;
}

.db-style-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.db-style-title {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.db-style-link {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    transition: color 0.3s;
}
.db-style-card:hover .db-style-link {
    color: #B8977E;
}

@media (max-width: 900px) {
    .db-styles-section { padding: 80px 5%; }
    .db-styles-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}

@media (max-width: 480px) {
    .db-styles-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LANGUAGE SWITCHER � ENHANCED ACTIVE STATES (lang-engine v1)
   ============================================================ */

/* Spacious list */
.db-lang-list { padding: 8px 0 16px; }

/* Row hover: slight slide-right + warm tint */
.db-lang-item {
    padding: 18px 32px;
    transition: background 0.18s ease, transform 0.15s ease;
}
.db-lang-item:hover {
    background: #f7f5f2;
    transform: translateX(3px);
}

/* Active row � warm ivory background */
.db-lang-item--active { background: #faf8f4 !important; }

/* Gold left-border accent (overrides the black default) */
.db-lang-item--active::after {
    width: 3px !important;
    background: #B8977E !important; /* DuoBad gold */
}

/* Active country name � slightly bolder */
.db-lang-item--active .db-lang-country { font-weight: 400; color: #1a1a1a; }

/* Active language code � gold + checkmark tick */
.db-lang-item--active .db-lang-code { color: #B8977E; font-weight: 600; }
.db-lang-item--active .db-lang-code::after { content: ' \2713'; font-size: 9px; }

/* Header globe label � refined layout */
#db-lang-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.12em;
}

/* Bottom description strip */
#db-lang-desc p {
    font-family: 'Jost', sans-serif;
    font-size: 10.5px;
    color: #aaa;
    line-height: 1.65;
    margin: 0;
}

/* Flag micro-animation */
.db-lang-flag { font-size: 22px; transition: transform 0.2s ease; }
.db-lang-item:hover .db-lang-flag { transform: scale(1.1); }

/* Mobile: full-width panel */
@media (max-width: 480px) {
    .db-lang-panel  { width: 100vw; right: 0; }
    .db-lang-item   { padding: 16px 24px; }
    .db-lang-trigger{ margin-right: 12px; }
}

/* Header icons — enlarged flag & label */
#db-lang-label .db-lang-flag,
#db-lang-label > span:first-child {
    font-size: 18px;
}