/* Kagerhuber GmbH - main stylesheet (Helendo reference theme) */
:root {
--c-bg: #ffffff;
--c-surface: #f7f4ef;
--c-text: #1a1a1a;
--c-muted: #6b6b6b;
--c-accent: #cfb497;
--c-accent-dark: #b99a7a;
--c-border: #e6e1d9;
--c-dark: #151414;
--font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
--font-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
--font-script: 'Poppins', cursive;
--container: 1280px;
--radius: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--c-text);
background: var(--c-bg);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c-text); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent); }
h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.3; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
hr { border: none; border-top: 1px solid var(--c-border); margin: 16px 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-alt { background: var(--c-surface); }
.text-center { text-align: center; }
.subtitle { color: var(--c-accent); text-transform: uppercase; letter-spacing: 3px; font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; display: inline-block; }
.lead { color: var(--c-muted); font-size: 1.1rem; max-width: 760px; margin: 0 auto 40px; }
.btn {
display: inline-block; padding: 14px 32px;
background: var(--c-dark); color: #fff;
border: 1px solid var(--c-dark);
border-radius: var(--radius);
text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; font-weight: 600;
cursor: pointer; transition: all .2s;
}
.btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn-outline { background: transparent; color: var(--c-dark); }
.btn-outline:hover { background: var(--c-dark); color: #fff; }
.btn-accent { background: var(--c-accent); border-color: var(--c-accent); }
.btn-accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.btn-ghost { background: transparent; color: var(--c-dark); border: 1px solid var(--c-border); }
.btn-ghost:hover { background: var(--c-surface); }
/* HEADER ------------------------------------------------- */
/* Reserve space before layout.js injects the header, so navigation doesn't jump */
#siteHeader { display: block; min-height: 109px; background: #fff; border-bottom: 1px solid var(--c-border); }
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--c-border); }
.header-main { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 48px; padding: 18px 48px; max-width: 1800px; margin: 0 auto; }
.header-phone { line-height: 1.3; }
.header-phone small { display: block; font-size: 0.72rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; }
.header-phone strong { display: block; font-size: 1rem; color: var(--c-text); font-weight: 600; }
.logo-center { justify-self: center; display: block; line-height: 1; }
.logo-center img { height: 72px; width: auto; display: block; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 44px; }
.nav-left ul { justify-content: flex-end; }
.nav-right ul { justify-content: flex-start; }
.nav a { display: block; text-align: center; color: var(--c-text); padding: 4px 0; line-height: 1.25; transition: color .2s; }
.nav a .lbl { display: block; font-size: 0.92rem; font-weight: 500; }
.nav a .sub { display: block; font-size: 0.7rem; color: var(--c-muted); font-weight: 400; font-style: italic; margin-top: 2px; }
.nav a:hover, .nav a.active { color: var(--c-accent); }
.nav a:hover .sub, .nav a.active .sub { color: var(--c-accent); }
.header-icons { display: flex; align-items: center; gap: 10px; }
.h-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0; position: relative; transition: background .2s; text-decoration: none; }
.h-icon:hover { background: var(--c-accent-dark); color: #fff; }
.h-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--c-dark); color: #fff; font-size: 0.7rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-sizing: border-box; font-weight: 600; }
.account-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: #2ecc71; border: 2px solid #fff; border-radius: 50%; }
.mobile-toggle { display: none; background: var(--c-dark); border: none; font-size: 1.4rem; cursor: pointer; color: #fff; padding: 0; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; line-height: 1; transition: background .2s; }
.mobile-toggle.is-open { background: var(--c-accent); }
/* Full-screen mobile menu overlay */
.nav-mobile {
position: fixed;
inset: 0;
background: var(--c-dark);
z-index: 200;
display: flex;
flex-direction: column;
padding: 96px 28px 32px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-12px);
transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-mobile.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.nav-mobile ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 560px;
}
.nav-mobile li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
opacity: 0;
transform: translateX(-12px);
transition: opacity .35s ease, transform .35s ease;
}
.nav-mobile.open li { opacity: 1; transform: translateX(0); }
.nav-mobile.open li:nth-child(1) { transition-delay: .08s; }
.nav-mobile.open li:nth-child(2) { transition-delay: .14s; }
.nav-mobile.open li:nth-child(3) { transition-delay: .2s; }
.nav-mobile.open li:nth-child(4) { transition-delay: .26s; }
.nav-mobile.open li:nth-child(5) { transition-delay: .32s; }
.nav-mobile.open li:nth-child(6) { transition-delay: .38s; }
.nav-mobile a {
display: flex;
flex-direction: column;
padding: 22px 6px;
color: #fff;
font-weight: 500;
transition: color .2s ease, padding-left .25s ease;
}
.nav-mobile a .lbl {
display: block;
font-size: 1.45rem;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.2;
margin: 0;
}
.nav-mobile a .sub {
display: block;
font-size: 0.72rem;
color: var(--c-accent);
font-weight: 500;
margin: 8px 0 0;
font-style: normal;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.nav-mobile a:hover, .nav-mobile a.active {
color: var(--c-accent);
padding-left: 18px;
}
.nav-mobile a:hover .sub, .nav-mobile a.active .sub { color: #fff; }
.nav-mobile-close {
position: absolute;
top: 18px;
right: 22px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
border: none;
font-size: 1.6rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background .2s ease, transform .3s ease;
z-index: 2;
}
.nav-mobile-close:hover { background: var(--c-accent-dark); transform: rotate(90deg); }
.nav-mobile-foot {
margin-top: auto;
padding-top: 36px;
text-align: center;
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav-mobile-foot a { display: block; color: var(--c-accent); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.5px; margin-top: 6px; text-transform: none; }
body.menu-open { overflow: hidden; }
/* HERO --------------------------------------------------- */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-start; color: #fff; overflow: hidden; }
.hero-video, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(1) contrast(0.95); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5)); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 80px 24px 40px; text-align: center; }
.hero .subtitle { color: var(--c-accent); text-transform: uppercase; letter-spacing: 5px; font-size: 0.8rem; font-weight: 500; font-family: var(--font-sans); display: inline-block; margin-bottom: 0; margin-top: 18px; }
.hero h1 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0; letter-spacing: -0.005em; line-height: 1.15; }
.hero p { font-size: 1.05rem; opacity: 0.95; margin-bottom: 28px; }
.hero-stats { display: flex; justify-content: center; gap: 80px; margin-top: 64px; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat .num { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; display: block; color: #fff; line-height: 1; margin-bottom: 10px; }
.hero-stat .lbl { text-transform: uppercase; letter-spacing: 2.5px; font-size: 0.72rem; color: var(--c-accent); font-weight: 500; }
/* SERVICES ----------------------------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.service-card { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/5; background: var(--c-surface); }
.service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.service-card:hover img { transform: scale(1.06); }
.service-card .overlay { position: absolute; inset: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.service-card h3 { color: #fff; margin-bottom: 6px; }
.service-card p { font-size: 0.9rem; opacity: 0.9; margin: 0 0 10px; }
.service-card .read-more { color: var(--c-accent); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; }
/* ABOUT --------------------------------------------------- */
.about-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-video { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; background: #000; }
.about-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-intro h1 { margin-bottom: 20px; }
.about-intro p { color: var(--c-muted); font-size: 1.02rem; margin-bottom: 14px; line-height: 1.75; }
@media (max-width: 900px) { .about-top { grid-template-columns: 1fr; gap: 32px; } }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
.value-card { text-align: center; padding: 32px 24px; background: #fff; border-radius: 6px; border: 1px solid var(--c-border); }
.value-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.value-icon svg { width: 36px; height: 36px; fill: #fff; }
.value-card h3 { margin-bottom: 10px; }
.value-card p { color: var(--c-muted); margin: 0; line-height: 1.65; }
/* Interactive milestone timeline (Über uns) */
.milestones { max-width: 1280px; margin: 0 auto; }
.milestones-head { text-align: center; margin-bottom: 48px; }
.milestones-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.mstone-nav { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 0 auto 56px; height: 120px; }
.mstone-nav::before { content: ''; position: absolute; top: 60px; left: 8%; right: 8%; height: 2px; background: var(--c-border); transform: translateY(-1px); z-index: 0; }
.mstone-nav-item { position: relative; height: 120px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; color: var(--c-muted); transition: color .2s; }
.mstone-nav-item .mn-year { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px; }
.mstone-nav-item .mn-dot { position: absolute; top: 60px; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #d5d0c6; transition: background .25s, width .25s, height .25s, margin .25s, box-shadow .25s; z-index: 2; }
.mstone-nav-item .mn-label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 0.88rem; font-weight: 500; color: var(--c-muted); opacity: 0; transition: opacity .25s; }
.mstone-nav-item:hover { color: var(--c-text); }
.mstone-nav-item:hover .mn-dot { background: var(--c-accent); opacity: 0.7; }
.mstone-nav-item.active { color: var(--c-accent); }
.mstone-nav-item.active .mn-dot { background: var(--c-accent); width: 28px; height: 28px; margin: -14px 0 0 -14px; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--c-accent); }
.mstone-nav-item.active .mn-label { color: var(--c-text); opacity: 1; }
.mstone-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.mstone-panel.hidden { display: none; }
.mstone-copy h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px; }
.mstone-copy p { color: var(--c-muted); font-size: 1rem; line-height: 1.75; margin-bottom: 14px; }
.mstone-copy p strong { color: var(--c-text); }
.mstone-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
@media (max-width: 900px) {
.mstone-panel { grid-template-columns: 1fr; gap: 24px; }
.milestones-head { margin-bottom: 32px; }
/* Vertical timeline on mobile - dot column + content column */
.mstone-nav {
grid-template-columns: 1fr;
gap: 0;
height: auto;
max-width: 100%;
margin: 0 0 36px;
position: relative;
}
.mstone-nav::before {
display: block;
content: '';
position: absolute;
top: 14px;
bottom: 14px;
left: 19px;
right: auto;
width: 2px;
height: auto;
background: var(--c-border);
transform: none;
}
.mstone-nav-item {
height: auto;
padding: 10px 12px 10px 48px;
text-align: left;
display: block;
border-radius: 6px;
}
.mstone-nav-item:hover { background: rgba(207, 180, 151, 0.08); }
.mstone-nav-item.active { background: rgba(207, 180, 151, 0.14); }
.mstone-nav-item .mn-year {
position: static;
text-align: left;
display: block;
font-size: 1rem;
margin: 0 0 2px;
line-height: 1.2;
}
.mstone-nav-item .mn-dot {
top: 50%;
left: 19px;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
}
.mstone-nav-item.active .mn-dot {
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-accent);
}
.mstone-nav-item .mn-label {
position: static;
text-align: left;
display: block;
opacity: 1;
font-size: 0.78rem;
line-height: 1.3;
font-weight: 400;
color: var(--c-muted);
bottom: auto;
}
.mstone-nav-item.active .mn-label { color: var(--c-text); }
}
/* BRAND STRIP --------------------------------------------- */
.brand-strip { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 24px 0; }
.brand-logo { display: flex; align-items: center; justify-content: center; padding: 20px 32px; background: #fff; border: 1px solid var(--c-border); border-radius: 6px; transition: box-shadow .2s; min-width: 220px; min-height: 120px; }
.brand-logo:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.brand-logo img { max-width: 180px; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; }
/* LEISTUNGEN OVERVIEW ------------------------------------- */
.leistungen-hero { padding: 80px 0 48px; background: linear-gradient(180deg, #fff 0%, var(--c-surface) 100%); }
.leistungen-hero .inner { max-width: 820px; margin: 0 auto; text-align: center; padding: 0 24px; }
.leistungen-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; margin-bottom: 20px; }
.leistungen-hero p { color: var(--c-muted); font-size: 1.08rem; line-height: 1.7; max-width: 680px; margin: 0 auto; }
.leistungen-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.leistungen-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; border: 1px solid var(--c-border); color: inherit; text-decoration: none; min-width: 0; }
.leistungen-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,0.10); color: inherit; }
.leistungen-card .img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--c-surface); }
.leistungen-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); display: block; }
.leistungen-card:hover .img img { transform: scale(1.06); }
.leistungen-card .num { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; color: #fff; background: rgba(0,0,0,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); padding: 4px 10px; border-radius: 100px; letter-spacing: 2px; }
.leistungen-card .body { padding: 18px 16px 22px; display: flex; flex-direction: column; flex: 1; }
.leistungen-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: var(--c-text); line-height: 1.25; }
.leistungen-card p { color: var(--c-muted); font-size: 0.82rem; line-height: 1.55; margin: 0 0 14px; flex: 1; }
.leistungen-card .link { color: var(--c-accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; white-space: nowrap; }
.leistungen-card .link .arr { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.leistungen-card:hover .link .arr { transform: translateX(6px); }
@media (max-width: 1400px) { .leistungen-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 900px) { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .leistungen-grid { grid-template-columns: 1fr; } }
/* PROCESS TIMELINE --------------------------------------- */
.process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; max-width: 1100px; margin: 56px auto 0; }
.process-timeline::before { content: ''; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--c-accent) 0 12px, transparent 12px 22px); z-index: 0; }
.process-step { text-align: center; position: relative; z-index: 1; }
.process-step .circle { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 2px solid var(--c-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; color: var(--c-accent); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; box-shadow: 0 0 0 8px #fff; }
.process-step h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.process-step p { color: var(--c-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
.process-timeline { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.process-timeline::before { display: none; }
}
@media (max-width: 500px) { .process-timeline { grid-template-columns: 1fr; } }
/* PARTNERS ------------------------------------------------ */
.partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); gap: 28px; justify-content: center; }
.partner-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; transition: box-shadow .3s, transform .3s; text-decoration: none; color: inherit; }
.partner-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.08); transform: translateY(-4px); color: inherit; }
.partner-logo { aspect-ratio: 16/9; background: #fff; display: flex; align-items: center; justify-content: center; padding: 40px; border-bottom: 1px solid var(--c-border); }
.partner-logo img { max-width: 65%; max-height: 80%; height: auto; width: auto; object-fit: contain; }
.partner-body { padding: 28px; text-align: center; }
.partner-body h3 { margin-bottom: 10px; font-size: 1.35rem; font-weight: 600; }
.partner-body p { color: var(--c-muted); font-size: 0.95rem; margin-bottom: 18px; line-height: 1.65; }
.partner-body .read-more { color: var(--c-accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: gap .3s; }
.partner-card:hover .read-more { gap: 14px; }
/* GALLERY ------------------------------------------------ */
.gallery-full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 6px; }
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: 6px; }
.gallery-grid a { display: block; overflow: hidden; position: relative; cursor: zoom-in; grid-row: span 1; }
.gallery-grid a.tall { grid-row: span 2; }
.gallery-grid a.wide { grid-column: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.gallery-grid a:hover img { transform: scale(1.06); }
.gallery-grid a::after {
content: '';
position: absolute; inset: 0;
background: rgba(255,255,255,0) url("data:image/svg+xml;utf8,") center/48px no-repeat;
opacity: 0; transition: opacity .25s, background-color .25s;
}
.gallery-grid a:hover::after { opacity: 1; background-color: rgba(255,255,255,0.22); }
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; } }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } .gallery-grid a.wide { grid-column: span 1; } }
/* PRODUCTS ----------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.product-card { background: #fff; border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; transition: box-shadow .3s, transform .3s; display: flex; flex-direction: column; color: inherit; text-decoration: none; position: relative; }
.product-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }
.product-card .img-wrap { aspect-ratio: 1; overflow: hidden; background: var(--c-surface); display: flex; align-items: center; justify-content: center; padding: 18px; }
.product-card .img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .img-wrap img { transform: scale(1.04); }
.product-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; line-height: 1.35; }
.product-card h3 a { color: inherit; }
.product-card .price { color: var(--c-accent); font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; font-family: var(--font-display); }
.product-card .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 20px; background: var(--c-accent); color: #fff; font-weight: 600; }
.badge.bundle { background: var(--c-dark); }
.badge.designer { background: #5a7a3e; }
.product-card .actions { margin-top: auto; display: flex; gap: 8px; }
.product-card .actions .btn { width: 100%; padding: 12px 18px; font-size: 0.78rem; }
/* SHOP HEADER -------------------------------------------- */
.shop-hero { padding: 72px 0 32px; background: linear-gradient(180deg, #fff 0%, var(--c-surface) 100%); text-align: center; }
.shop-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 14px; }
.shop-hero p { color: var(--c-muted); font-size: 1.02rem; max-width: 640px; margin: 0 auto; line-height: 1.7; }
.cat-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.cat-filter button { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); padding: 10px 20px; border-radius: 100px; font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all .2s; letter-spacing: 0.5px; }
.cat-filter button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cat-filter button.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* PRODUCT DETAIL ----------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.product-detail .gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--c-surface); cursor: zoom-in; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.product-detail .gallery-main a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-detail .gallery-main img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.product-detail .thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.product-detail .thumbs img { width: 80px; height: 80px; object-fit: contain; background: var(--c-surface); border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; padding: 6px; }
.product-detail .thumbs img.active { border-color: var(--c-accent); }
.product-detail h1 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600; margin-bottom: 12px; letter-spacing: -0.005em; }
.product-detail .price { font-size: 1.8rem; color: var(--c-accent); font-weight: 600; margin-bottom: 24px; font-family: var(--font-display); }
.product-detail .desc { color: var(--c-muted); margin-bottom: 32px; line-height: 1.8; }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.qty-input { width: 80px; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius); text-align: center; font-size: 1rem; }
.designer-cta { display: block; margin: 16px 0; padding: 16px 20px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); color: #fff; border-radius: var(--radius); text-align: center; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; font-size: 0.9rem; transition: transform .15s; width: 100%; }
.designer-cta:hover { transform: translateY(-1px); color: #fff; }
.designer-applied { margin: 12px 0; padding: 12px; background: #eef6e8; border-left: 3px solid #5a7a3e; border-radius: var(--radius); display: flex; gap: 12px; align-items: center; }
.designer-applied img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-border); }
/* PRODUCT VIDEO ------------------------------------------ */
.prod-video { margin: 16px 0 0; border-radius: 4px; overflow: hidden; background: #000; max-width: 100%; }
.prod-video video, .prod-video iframe { width: 100%; height: auto; display: block; aspect-ratio: 16/9; border: 0; object-fit: cover; }
/* Match the monochrome product photography for the schnapsbox line. */
.prod-video[data-slug^="schnapsbox"] video,
.prod-video[data-slug^="schnapsbox"] iframe { filter: grayscale(1); }
/* BUNDLE GROUPS ------------------------------------------ */
.bundle-groups { margin: 24px 0; }
.bgroup { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; padding: 18px 20px; margin-bottom: 14px; }
.bgroup-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 12px; }
.bgroup-head strong { display: block; font-size: 1rem; font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
.bgroup-head small { display: block; color: var(--c-muted); font-size: 0.82rem; }
.bgroup-count { background: #fff; border: 1px solid var(--c-border); padding: 6px 12px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: var(--c-accent); white-space: nowrap; }
/* Slot pickers */
.bslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bslot { position: relative; background: #fff; border: 2px solid var(--c-border); border-radius: 6px; padding: 10px 8px 8px; text-align: center; transition: border-color .15s; min-height: 150px; display: flex; flex-direction: column; align-items: center; }
.bslot.filled { border-color: var(--c-accent); background: #fffaf0; }
.bslot.empty { border-style: dashed; }
.bslot-num { position: absolute; top: 6px; left: 8px; font-size: 0.7rem; font-weight: 600; color: var(--c-muted); background: rgba(255,255,255,0.85); padding: 2px 6px; border-radius: 100px; }
.bslot img { width: 64px; height: 64px; object-fit: contain; background: var(--c-surface); border-radius: 4px; padding: 4px; margin: 6px 0 4px; }
.bslot-name { font-size: 0.78rem; line-height: 1.3; color: var(--c-text); margin-bottom: 6px; padding: 0 4px; }
.bslot-actions { margin-top: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bslot-btn { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 0.7rem; font-family: inherit; transition: all .15s; }
.bslot-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.bslot-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.bslot-btn.primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.bslot-btn.danger { color: #c0392b; border-color: #f0c4be; padding: 4px 8px; }
.bslot-btn.danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.bslot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 8px; }
.bslot-empty-icon { font-size: 1.6rem; color: var(--c-muted); }
/* Slot picker modal */
.bpick-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 9990; padding: 24px; }
.bpick-modal.open { display: flex; }
.bpick-dialog { background: #fff; border-radius: 6px; width: 100%; max-width: 1400px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.bpick-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--c-border); }
.bpick-head h3 { margin: 0; font-size: 1.25rem; font-family: var(--font-display); font-weight: 600; }
.bpick-close { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--c-muted); padding: 0 8px; line-height: 1; }
.bpick-close:hover { color: var(--c-text); }
.bpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 24px 28px; overflow-y: auto; }
.bpick-opt { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 12px; background: #fff; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; text-align: center; font-family: inherit; transition: all .2s; }
.bpick-opt:hover { border-color: var(--c-accent); background: #fffaf0; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.bpick-opt img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--c-surface); border-radius: 4px; padding: 12px; flex-shrink: 0; }
.bpick-opt strong { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.bpick-opt small { display: block; font-size: 0.76rem; margin-top: 4px; font-weight: 600; }
.bpick-opt .bpick-surcharge { color: var(--c-accent-dark); }
.bpick-opt .bpick-included { color: #5a7a3e; }
.bpick-opt .bpick-design { color: var(--c-muted); font-weight: 400; font-style: italic; margin-top: 2px; }
.bpick-sub { margin: 6px 0 0; font-size: 0.85rem; color: var(--c-muted); }
.bpick-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-weight: 600; font-size: 0.78rem; }
.bpick-badge.surcharge { background: #fef3e6; color: var(--c-accent-dark); }
.bpick-badge.free { background: #eef6e8; color: #5a7a3e; }
.bpick-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; border-top: 1px solid var(--c-border); background: var(--c-surface); font-size: 0.95rem; }
.bpick-foot strong { font-size: 1.2rem; color: var(--c-accent-dark); font-family: var(--font-display); font-weight: 700; }
/* Live bundle price summary */
.bundle-livesum { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; padding: 16px 20px; margin: 8px 0 16px; position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 -4px 12px rgba(0,0,0,0.04); }
.bls-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 0.92rem; color: var(--c-text); }
.bls-row.bls-total { border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 12px; font-size: 1.05rem; font-weight: 700; }
.bls-row.bls-total span:last-child { font-family: var(--font-display); color: var(--c-accent-dark); font-size: 1.4rem; }
.bls-row.bls-total small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--c-muted); font-style: italic; font-family: var(--font-sans); }
/* Slot price badge */
.bslot-price { position: absolute; top: 6px; right: 8px; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: #fef3e6; color: var(--c-accent-dark); }
.bslot-price.free { background: #eef6e8; color: #5a7a3e; }
.bundle-items { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-border); }
.bundle-items h3 { margin-bottom: 16px; }
.bundle-items ul { list-style: none; padding: 0; margin: 0; }
.bundle-items li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.bundle-items li:last-child { border-bottom: none; }
.bundle-items img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); }
.bundle-items .qty { color: var(--c-accent); font-weight: 600; }
/* FORMS -------------------------------------------------- */
form.stack { display: grid; gap: 16px; max-width: 640px; margin: 0 auto; }
form.stack input, form.stack textarea, form.stack select { padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; background: #fff; }
form.stack textarea { min-height: 140px; resize: vertical; }
/* FOOTER (inc. CTA) -------------------------------------- */
.site-footer { position: relative; background: #0f0f0f; color: #fff; padding: 90px 0 28px; overflow: hidden; }
.site-footer::before { content: ''; position: absolute; inset: 0; background: url('/assets/img/services/kueche.webp') center/cover no-repeat; opacity: 0.05; z-index: 0; }
.site-footer > .container { position: relative; z-index: 1; max-width: 2000px; }
.site-footer a { color: #fff; transition: color .2s; }
.site-footer a:hover { color: var(--c-accent); }
.footer-cta { margin-bottom: 64px; max-width: 1100px; }
.footer-cta h2 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 3.4rem); line-height: 1.15; margin: 0; letter-spacing: -0.005em; }
.footer-cta-link { color: #fff; text-decoration: none; transition: color .2s; }
.footer-cta-link:hover { color: var(--c-accent); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 48px; }
.footer-intro p { font-size: 0.98rem; max-width: 380px; margin: 0 0 32px; color: #fff; line-height: 1.65; }
.footer-contact { display: grid; gap: 20px; max-width: 380px; }
.contact-block { display: flex; align-items: center; gap: 14px; color: #fff; }
.contact-block:hover { color: var(--c-accent); }
.contact-block:hover .ct-icon { border-color: var(--c-accent); background: rgba(207,180,151,0.12); }
.ct-icon { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--c-accent); transition: all .2s; }
.ct-icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-block small { display: block; font-size: 0.82rem; color: #fff; font-weight: 400; margin-bottom: 2px; opacity: 0.85; }
.contact-block strong { display: block; font-size: 1rem; color: #fff; font-weight: 600; }
.footer-col h4 { color: #fff; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0; text-transform: none; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.95rem; color: #fff; }
.footer-divider { border-top: 1px solid rgba(255,255,255,0.18); margin: 8px 0 20px; }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 0.88rem; color: #fff; flex-wrap: wrap; }
.follow { display: flex; align-items: center; gap: 12px; }
.follow strong { color: #fff; font-weight: 600; font-size: 0.95rem; margin-right: 8px; }
.follow a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); transition: all .2s; }
.follow a:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.follow svg { width: 14px; height: 14px; fill: currentColor; }
.footer-copy { color: #fff; }
@media (max-width: 1000px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
.site-footer { padding: 60px 0 24px; }
.footer-cta { margin-bottom: 48px; }
.footer-bottom-row { justify-content: flex-start; }
}
/* BREADCRUMB --------------------------------------------- */
.breadcrumb { padding: 20px 0; font-size: 0.88rem; color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb .sep { margin: 0 8px; }
/* LEGAL TEXT --------------------------------------------- */
.legal { max-width: 860px; margin: 0 auto; }
.legal h2 { margin-top: 40px; font-size: 1.6rem; }
.legal h3 { margin-top: 24px; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; }
.legal p, .legal ul { margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
/* SERVICE DETAIL ----------------------------------------- */
.service-page .section:first-of-type { padding-top: 60px; padding-bottom: 40px; }
.service-page .container { max-width: 1440px; }
.service-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.service-top.no-top-images { grid-template-columns: 1fr; }
.service-text h2 { font-size: clamp(1.5rem, 2vw, 1.95rem); margin-bottom: 20px; white-space: normal; }
.service-text p { color: var(--c-muted); line-height: 1.75; margin-bottom: 16px; font-size: 0.98rem; }
.service-text p.emph { color: var(--c-text); font-weight: 600; margin-top: 24px; }
.service-images { display: grid; gap: 12px; }
.service-images img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 4px; display: block; }
.service-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin: 40px 0 32px; }
.service-pillars h3 { font-size: 1.08rem; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.service-pillars p { color: var(--c-muted); font-size: 0.93rem; line-height: 1.65; margin: 0; }
.service-questions { background: var(--c-surface); border-radius: 4px; padding: 28px 32px; margin-top: 24px; max-width: 560px; }
.service-questions h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--c-text); }
.service-questions p { color: var(--c-muted); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }
.service-questions .btn { display: inline-flex; align-items: center; gap: 10px; }
.service-questions .btn .arrow { display: inline-flex; width: 28px; height: 28px; background: #fff; color: var(--c-accent); border-radius: 50%; align-items: center; justify-content: center; font-size: 0.9rem; margin-left: 6px; }
@media (max-width: 900px) {
.service-top { grid-template-columns: 1fr; gap: 32px; }
.service-pillars { grid-template-columns: 1fr; gap: 24px; }
}
.service-hero { position: relative; height: 56vh; min-height: 420px; background: #111; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; }
.service-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)); z-index: 1; }
.service-hero .inner { position: relative; z-index: 2; text-align: center; padding: 24px; }
.service-hero h1 { color: #fff; margin-bottom: 8px; }
.service-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin-top: 40px; }
.service-gallery a { display: block; aspect-ratio: 4/3; overflow: hidden; cursor: zoom-in; position: relative; }
.service-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.service-gallery a:hover img { transform: scale(1.05); }
.service-gallery a::after {
content: '';
position: absolute; inset: 0;
background: rgba(255,255,255,0) url("data:image/svg+xml;utf8,") center/48px no-repeat;
opacity: 0; transition: opacity .25s, background-color .25s;
}
.service-gallery a:hover::after { opacity: 1; background-color: rgba(255,255,255,0.22); }
/* LIGHTBOX ----------------------------------------------- */
.lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 9999; }
.lb-overlay.open { display: flex; }
.lb-overlay .lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.lb-overlay button { position: fixed; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; width: 48px; height: 48px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb-overlay button:hover { background: rgba(255,255,255,0.25); }
.lb-overlay .lb-close { top: 24px; right: 24px; }
.lb-overlay .lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-overlay .lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-overlay .lb-caption { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; padding: 8px 16px; background: rgba(0,0,0,0.5); border-radius: 20px; max-width: 80vw; }
/* DESIGNER MODAL ----------------------------------------- */
.designer-modal { position: fixed; inset: 0; background: #fff; display: none; z-index: 9998; }
.designer-modal.open { display: block; }
.dm-dialog { background: #fff; width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.dm-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 24px; border-bottom: 1px solid var(--c-border); gap: 16px; }
.dm-head h2 { margin: 0 0 4px; font-size: 1.25rem; font-family: var(--font-sans); font-weight: 600; }
.dm-head-sub { margin: 0; font-size: 0.85rem; color: var(--c-muted); }
.dm-close { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--c-muted); line-height: 1; padding: 0 8px; flex-shrink: 0; }
.dm-close:hover { color: var(--c-text); }
.dm-intro { padding: 12px 24px; background: #fff8ec; border-bottom: 1px solid var(--c-border); font-size: 0.88rem; color: #5a4723; line-height: 1.55; }
.dm-intro em { font-style: normal; color: var(--c-accent-dark); font-weight: 600; }
/* Step indicator across the top */
.dm-stepbar { display: flex; gap: 0; padding: 10px 24px; background: #faf6ef; border-bottom: 1px solid var(--c-border); }
.dm-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 0.78rem; color: #999; border-bottom: 3px solid transparent; transition: all .2s; }
.dm-step + .dm-step { border-left: 1px solid #ece5d6; }
.dm-step-num { width: 22px; height: 22px; border-radius: 50%; background: #ddd; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
.dm-step-lbl { line-height: 1.2; }
.dm-step.done { color: #4a4a4a; }
.dm-step.done .dm-step-num { background: #6b9460; }
.dm-step.current { color: #d8202a; font-weight: 600; border-bottom-color: #d8202a; background: #fff; }
.dm-step.current .dm-step-num { background: #d8202a; }
/* Intro overlay — shown once when designer opens */
.dm-intro-overlay { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.78); display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; backdrop-filter: blur(2px); }
.dm-intro-overlay.open { display: flex; }
.dm-intro-card { background: #fff; max-width: 560px; width: 100%; max-height: 100%; overflow-y: auto; border-radius: 8px; padding: 28px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.dm-intro-card h2 { margin: 0 0 18px; font-size: 1.4rem; color: var(--c-dark); }
.dm-intro-steps { padding-left: 22px; margin: 0 0 18px; line-height: 1.7; font-size: 0.95rem; color: #2d2d2d; }
.dm-intro-steps li { margin-bottom: 8px; }
.dm-intro-steps em { font-style: normal; color: var(--c-accent-dark); font-weight: 600; }
.dm-intro-note { background: #fff8ec; border-left: 3px solid #cfb497; padding: 10px 14px; font-size: 0.85rem; color: #5a4723; line-height: 1.55; margin: 0 0 18px; }
.dm-intro-skip { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #555; margin-bottom: 16px; cursor: pointer; }
.dm-intro-skip input { cursor: pointer; }
.dm-intro-go { width: 100%; padding: 14px; font-size: 1rem; }
.dm-body { display: grid; grid-template-columns: 80px 320px 1fr; flex: 1; min-height: 0; }
/* Far-left activity strip */
.dm-tools { background: #fff; display: flex; flex-direction: column; padding: 10px 0; gap: 4px; border-right: 1px solid var(--c-border); }
.dm-tool { background: transparent; border: 0; color: var(--c-muted); cursor: pointer; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: inherit; font-size: 0.72rem; font-weight: 500; transition: all .15s; border-left: 3px solid transparent; }
.dm-tool:hover { background: var(--c-surface); color: var(--c-text); }
.dm-tool.active { background: var(--c-surface); color: var(--c-accent-dark); border-left-color: var(--c-accent); font-weight: 600; }
.dm-tool svg { display: block; opacity: 0.85; }
.dm-tool.active svg { opacity: 1; color: var(--c-accent); }
.dm-side { padding: 18px 20px 20px; border-right: 1px solid var(--c-border); overflow-y: auto; background: var(--c-surface); display: flex; flex-direction: column; }
.dm-panel { display: none; flex: 1 0 auto; }
.dm-panel.active, .dm-panel:not([hidden]) { display: block; }
.dm-panel h3 { font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-accent) !important; font-weight: 600; margin: 0 0 10px !important; }
.dm-panel label { display: block; font-size: 0.78rem; font-weight: 600; margin: 12px 0 6px; }
.dm-panel input[type=text], .dm-panel select { width: 100%; padding: 9px 11px; border: 1px solid var(--c-border); border-radius: 4px; font-family: inherit; font-size: 0.92rem; background: #fff; }
.dm-panel input[type=range] { width: 100%; accent-color: var(--c-accent); }
.dm-big-btn { width: 100%; margin-top: 14px; padding: 12px; font-size: 0.85rem; }
.dm-file-btn { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px dashed var(--c-border); border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: all .15s; }
.dm-file-btn:hover { border-color: var(--c-accent); background: #fffaf0; }
.dm-file-btn svg { color: var(--c-accent); flex-shrink: 0; }
.dm-file-btn span { display: flex; flex-direction: column; gap: 2px; }
.dm-file-btn strong { font-size: 0.92rem; font-weight: 600; }
.dm-file-btn small { font-size: 0.74rem; color: var(--c-muted); }
.dm-tab { background: transparent; border: none; padding: 8px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--c-text); font-family: inherit; transition: background .15s; }
.dm-tab:hover { background: rgba(255,255,255,0.5); }
.dm-tab.active { background: #fff; color: var(--c-accent-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dm-page { flex: 1; overflow-y: auto; }
.dm-page[hidden] { display: none; }
.dm-side h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-accent); font-family: var(--font-sans); font-weight: 600; margin: 0 0 10px; }
.dm-form label { display: block; margin: 10px 0 4px; font-size: 0.85rem; font-weight: 600; }
.dm-form input[type=text], .dm-form select, .dm-edit input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; font-size: 0.9rem; font-family: inherit; }
.dm-form input[type=color], .dm-edit input[type=color] { width: 60px; height: 36px; padding: 2px; border: 1px solid var(--c-border); border-radius: 4px; }
.dm-form input[type=range], .dm-edit input[type=range] { width: 100%; }
.dm-form input[type=file] { font-size: 0.85rem; width: 100%; }
.dm-layers { list-style: none; padding: 0; margin: 0 0 8px; max-height: 200px; overflow-y: auto; }
.dm-layers li { padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; margin-bottom: 4px; cursor: pointer; font-size: 0.85rem; background: #fff; transition: border-color .15s; }
.dm-layers li:hover { border-color: var(--c-accent); }
.dm-layers li.active { border-color: var(--c-accent); background: #fffaf0; }
.dm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.dm-actions .btn { width: 100%; padding: 10px; font-size: 0.85rem; }
.dm-actions .btn[hidden] { display: none; }
.dm-hint { font-size: 0.76rem; color: var(--c-muted); margin: 8px 0 0; line-height: 1.45; }
.dm-edit label { display: block; margin: 10px 0 4px; font-size: 0.8rem; font-weight: 600; }
.dm-stage { background: repeating-conic-gradient(#f0f0f0 0% 25%, #fafafa 0% 50%) 0 0 / 24px 24px; display: flex; flex-direction: column; min-height: 0; }
.dm-stage-toolbar { display: flex; gap: 6px; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--c-border); }
.dm-zoom-btn { width: 32px; height: 32px; border: 1px solid var(--c-border); background: #fff; border-radius: 4px; cursor: pointer; font-size: 1rem; line-height: 1; font-weight: 600; color: var(--c-text); transition: background .15s; }
.dm-zoom-btn:hover { background: var(--c-surface); border-color: var(--c-accent); color: var(--c-accent); }
.dm-zoom-val { min-width: 54px; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--c-muted); }
.dm-stage-info { margin-left: auto; font-size: 0.78rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.5px; }
.dm-canvas-wrap { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; }
.dm-canvas { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15); cursor: crosshair; display: block; }
/* CART + CHECKOUT ---------------------------------------- */
.checkout-stepper { display: flex; justify-content: center; gap: 0; margin-bottom: 40px; max-width: 720px; margin-left: auto; margin-right: auto; }
.checkout-stepper .step { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; color: var(--c-muted); font-size: 0.9rem; font-weight: 500; }
.checkout-stepper .step::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 1px; background: var(--c-border); }
.checkout-stepper .step:last-child::after { display: none; }
.checkout-stepper .snum { width: 32px; height: 32px; border-radius: 50%; background: #e6e1d9; color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; transition: all .2s; flex-shrink: 0; }
.checkout-stepper .step.done .snum { background: var(--c-accent); color: #fff; }
.checkout-stepper .step.done .snum::before { content: '✓'; }
.checkout-stepper .step.done .snum-text { display: none; }
.checkout-stepper .step.active .snum { background: var(--c-accent); color: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-accent); }
.checkout-stepper .step.active { color: var(--c-text); font-weight: 600; }
.cart-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--c-border); border-radius: 6px; margin-bottom: 28px; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 16px 18px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); font-weight: 600; }
.cart-table td { padding: 18px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: 0; }
.cart-prod { display: flex; align-items: center; gap: 16px; min-width: 240px; text-decoration: none; color: inherit; padding: 4px; border-radius: 6px; transition: background .15s; }
.cart-prod:hover { background: var(--c-surface); color: inherit; }
.cart-prod:hover strong { color: var(--c-accent-dark); }
.cart-prod img { width: 72px; height: 72px; object-fit: contain; background: var(--c-surface); border-radius: 4px; padding: 6px; flex-shrink: 0; }
.cart-prod strong { display: block; font-size: 0.98rem; font-weight: 600; transition: color .15s; }
.cart-meta { font-size: 0.8rem; color: var(--c-muted); margin-top: 4px; line-height: 1.45; }
.cart-price { font-weight: 700; white-space: nowrap; text-align: right; font-family: var(--font-display); font-size: 1.05rem; }
.cart-remove, .cart-edit { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--c-border); background: #fff; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--c-muted); transition: all .2s; text-decoration: none; margin-left: 4px; }
.cart-edit:hover { background: #fffaf0; border-color: var(--c-accent); color: var(--c-accent); }
.cart-remove:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.qty-input { width: 72px; padding: 9px 10px; border: 1px solid var(--c-border); border-radius: 4px; text-align: center; font-family: inherit; font-size: 0.95rem; }
.cart-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 20px 0 0; flex-wrap: wrap; }
.cart-foot-sum { font-size: 1.05rem; }
.cart-foot-sum .sum-row { display: flex; gap: 24px; align-items: baseline; }
.cart-foot-sum .sum-row span:last-child { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-accent-dark); }
.cart-mwst { color: var(--c-muted); font-size: 0.82rem; margin: 6px 0 0; font-style: italic; }
.cart-foot-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.empty-cart { text-align: center; padding: 80px 24px; }
.empty-cart h2 { font-family: var(--font-display); margin-bottom: 12px; }
.empty-cart p { color: var(--c-muted); margin-bottom: 24px; }
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.checkout-main h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 16px; }
.checkout-main .field, .checkout-main .row { margin-bottom: 14px; }
.checkout-main .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-main .row3 { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .checkout-main .row3 { grid-template-columns: 1fr; } }
.checkout-main label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; letter-spacing: 0.3px; }
.checkout-main input[type=text], .checkout-main input[type=email], .checkout-main input[type=tel], .checkout-main textarea, .checkout-main select { width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; background: #fff; }
.checkout-main textarea { min-height: 90px; resize: vertical; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.check-row input { accent-color: var(--c-accent); width: 18px; height: 18px; }
.check-row a { color: var(--c-accent); }
.deliv-opts { display: flex; flex-direction: column; gap: 10px; }
.deliv-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; background: #fff; transition: all .2s; }
.deliv-opt:hover { border-color: var(--c-accent); }
.deliv-opt.selected, .deliv-opt:has(input:checked) { border-color: var(--c-accent); background: #fffaf0; }
.deliv-opt input { accent-color: var(--c-accent); width: 20px; height: 20px; flex-shrink: 0; }
.deliv-opt > div { flex: 1; }
.deliv-opt strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 3px; }
.deliv-opt small { display: block; color: var(--c-muted); font-size: 0.82rem; }
.deliv-price { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--c-text); white-space: nowrap; }
/* Mini delivery switch (compact, in aside above order summary) */
.deliv-switch-mini { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; }
.dsm-title { display: block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); margin-bottom: 10px; }
.dsm-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; cursor: pointer; transition: all .15s; margin-bottom: 6px; background: #fff; }
.dsm-opt:last-child { margin-bottom: 0; }
.dsm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dsm-opt::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-border); flex-shrink: 0; transition: all .15s; background: #fff; }
.dsm-opt .dsm-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--c-text); }
.dsm-opt .dsm-price { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--c-muted); white-space: nowrap; }
.dsm-opt:hover { border-color: var(--c-accent); }
.dsm-opt.active { border-color: var(--c-accent); background: #fffaf0; }
.dsm-opt.active::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 3px #fffaf0; }
.dsm-opt.active .dsm-price { color: var(--c-accent-dark); }
/* Delivery switch (Versand vs Selbstabholung) */
.deliv-switch-wrap { margin-bottom: 16px; }
.deliv-switch-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--c-text); margin-bottom: 8px; letter-spacing: 0.2px; }
.deliv-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ds-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; transition: all .15s; position: relative; }
.ds-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ds-opt > svg { color: var(--c-muted); flex-shrink: 0; transition: color .15s; }
.ds-opt .ds-text { flex: 1; min-width: 0; }
.ds-opt strong { display: block; font-weight: 600; color: var(--c-text); font-size: 0.95rem; line-height: 1.25; }
.ds-opt small { display: block; color: var(--c-muted); font-size: 0.78rem; margin-top: 2px; line-height: 1.3; }
.ds-opt .ds-price { font-family: var(--font-display); font-weight: 700; color: var(--c-text); font-size: 1.05rem; white-space: nowrap; }
.ds-opt::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-border); flex-shrink: 0; transition: all .15s; background: #fff; }
.ds-opt:hover { border-color: var(--c-accent); }
.ds-opt:hover > svg { color: var(--c-accent); }
.ds-opt.active { border-color: var(--c-accent); background: #fffaf0; box-shadow: 0 4px 14px rgba(207,180,151,0.18); }
.ds-opt.active::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 4px #fffaf0; }
.ds-opt.active > svg { color: var(--c-accent); }
.ds-opt.active .ds-price { color: var(--c-accent-dark); }
@media (max-width: 500px) { .ds-opt small { font-size: 0.74rem; } }
/* Form cards (compact stacked sections in checkout) */
.form-card { background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 18px 20px; margin-bottom: 14px; }
.form-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin: 0 0 14px; }
.form-card .field { margin-bottom: 10px; }
.form-card .field:last-child { margin-bottom: 0; }
.form-card label { font-size: 0.78rem; font-weight: 600; color: var(--c-text); margin-bottom: 4px; letter-spacing: 0.2px; }
.form-card input, .form-card textarea, .form-card select { padding: 10px 12px; font-size: 0.92rem; }
.form-card .row, .form-card .row3 { margin-bottom: 10px; }
.form-card .row .field, .form-card .row3 .field { margin-bottom: 0; }
.pay-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--c-border); border-radius: 6px; cursor: pointer; background: #fff; transition: all .2s; }
.pay-opt:hover { border-color: var(--c-accent); }
.pay-opt.selected, .pay-opt:has(input:checked) { border-color: var(--c-accent); background: #fffaf0; }
.pay-opt input { accent-color: var(--c-accent); width: 20px; height: 20px; flex-shrink: 0; }
.pay-opt > div { flex: 1; }
.pay-opt strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 3px; }
.pay-opt small { display: block; color: var(--c-muted); font-size: 0.82rem; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-pill { background: var(--c-surface); border: 1px solid var(--c-border); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; color: var(--c-muted); }
.info-box { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 4px; padding: 16px 20px; color: #5a4723; font-size: 0.95rem; line-height: 1.55; }
.address-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; background: var(--c-surface); border-radius: 6px; padding: 18px 22px; }
.address-recap h4 { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-muted); margin: 0 0 6px; }
.address-recap p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--c-text); }
.checkout-aside { position: sticky; top: 100px; align-self: start; }
.order-summary { background: var(--c-surface); border-radius: 6px; padding: 24px 22px; }
.order-summary h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; }
.sum-items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.sum-items li { display: flex; align-items: center; gap: 12px; }
.sum-items img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 4px; padding: 4px; flex-shrink: 0; }
.sum-items > li > div { flex: 1; min-width: 0; }
.sum-items strong { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
.sum-items small { color: var(--c-muted); font-size: 0.78rem; display: block; margin-top: 2px; }
.sum-items > li > span { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 0.95rem; }
.sum-row.sum-tax { color: var(--c-muted); font-size: 0.82rem; padding: 2px 0; }
.sum-row.sum-total { border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 14px; font-size: 1.05rem; font-weight: 700; }
.sum-row.sum-total span:last-child { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-accent-dark); }
.sum-row.sum-total small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--c-muted); font-style: italic; font-family: var(--font-sans); }
@media (max-width: 900px) {
.checkout-grid { grid-template-columns: 1fr; }
.checkout-aside { position: static; }
.checkout-stepper .slabel { display: none; }
.cart-foot { flex-direction: column; align-items: stretch; }
.checkout-main .row { grid-template-columns: 1fr; }
}
/* CONSENT MODAL ------------------------------------------ */
.kh-consent { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 24px; }
.kh-consent.open { display: flex; }
.kh-consent-dialog { background: #fff; border-radius: 6px; padding: 36px 36px 28px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.kh-consent-dialog h2 { margin: 0 0 14px; font-size: 1.45rem; font-weight: 700; }
.kh-consent-dialog p { color: var(--c-muted); font-size: 0.95rem; margin: 0 0 12px; line-height: 1.6; }
.kh-consent-dialog strong { color: var(--c-text); }
.kh-consent-dialog a { color: var(--c-accent); font-weight: 600; }
.kh-consent-actions { display: flex; gap: 12px; margin: 22px 0 16px; }
.kh-consent-actions .btn { flex: 1; padding: 14px 18px; font-size: 0.88rem; }
.kh-consent-links { text-align: center; font-size: 0.82rem; margin: 0; }
/* INSTAGRAM ---------------------------------------------- */
.ig-placeholder { background: var(--c-surface); border: 2px dashed var(--c-border); border-radius: 8px; padding: 56px 32px; text-align: center; max-width: 820px; margin: 0 auto; }
.ig-placeholder h3 { margin: 0 0 12px; font-size: 1.3rem; }
.ig-placeholder p { color: var(--c-muted); margin: 0 auto 20px; max-width: 560px; line-height: 1.6; }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 1100px; margin: 0 auto; }
.ig-card { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #000; }
.ig-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ig-card:hover img { transform: scale(1.05); }
.ig-card a { display: block; position: absolute; inset: 0; color: #fff; background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.6)); padding: 20px; display: flex; align-items: flex-end; font-weight: 600; font-size: 0.95rem; }
.ig-follow { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff !important; font-weight: 600; border-radius: 4px; text-transform: none; letter-spacing: 0.5px; font-size: 0.95rem; }
.ig-follow:hover { color: #fff !important; opacity: 0.95; }
/* CAPTCHA ------------------------------------------------- */
.captcha-wrap { display: block; }
.captcha-row { display: flex; gap: 10px; align-items: center; background: var(--c-surface); padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 6px; }
.captcha-q { font-size: 0.92rem; font-weight: 600; flex: 1; margin: 0; color: var(--c-text); }
.captcha-a { width: 96px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 4px; font-size: 0.95rem; font-family: inherit; text-align: center; }
.captcha-reload { background: none; border: 1px solid var(--c-border); width: 36px; height: 36px; border-radius: 4px; cursor: pointer; font-size: 1rem; color: var(--c-muted); }
.captcha-reload:hover { border-color: var(--c-accent); color: var(--c-accent); }
.captcha-hp { position: absolute !important; left: -10000px !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
/* UTIL --------------------------------------------------- */
.notice { padding: 12px 16px; background: #eef6e8; border-left: 3px solid #5a7a3e; color: #2d4a20; border-radius: var(--radius); margin: 16px 0; }
.error { padding: 12px 16px; background: #fdecea; border-left: 3px solid #c0392b; color: #7b1e15; border-radius: var(--radius); margin: 16px 0; }
/* GLOBAL FORM FIELDS ------------------------------------- */
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field > label { font-size: 0.78rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; letter-spacing: 0.2px; }
.field > input,
.field > textarea,
.field > select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--c-border);
border-radius: var(--radius);
font-family: inherit;
font-size: 0.95rem;
background: #fff;
color: var(--c-text);
transition: border-color .15s, box-shadow .15s, background .15s;
-webkit-appearance: none;
appearance: none;
}
.field > input:focus,
.field > textarea:focus,
.field > select:focus {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(207,180,151,0.22);
background: #fff;
}
.field > input::placeholder,
.field > textarea::placeholder { color: #b6b3ac; }
.field > input[disabled],
.field > input[readonly] { background: var(--c-surface); color: var(--c-muted); cursor: not-allowed; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; }
.row .field, .row3 .field { margin-bottom: 14px; }
@media (max-width: 600px) {
.row, .row3 { grid-template-columns: 1fr; }
}
/* Contact page – address + form side-by-side on desktop, stacked on mobile */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 800px) {
.contact-layout { grid-template-columns: 1fr; gap: 28px; }
}
/* AUTH PAGES (login, register, forgot, reset) ------------ */
.auth-page { background: var(--c-surface); padding: 80px 0; min-height: calc(100vh - 200px); }
.auth-shell { max-width: 480px; margin: 0 auto; padding: 0 20px; }
.auth-shell--wide { max-width: 580px; }
.auth-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 14px 50px rgba(20, 18, 14, 0.10), 0 1px 3px rgba(20, 18, 14, 0.04);
border: 1px solid var(--c-border);
overflow: hidden;
position: relative;
}
.auth-card::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark));
}
.auth-head { padding: 40px 40px 8px; text-align: center; }
.auth-icon {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(207,180,151,0.16);
color: var(--c-accent-dark);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.auth-icon svg { width: 28px; height: 28px; }
.auth-head .subtitle { margin-bottom: 6px; }
.auth-head h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin: 0 0 10px; }
.auth-head p { color: var(--c-muted); margin: 0; font-size: 0.98rem; line-height: 1.55; }
.auth-body { padding: 24px 40px 36px; }
.auth-body .btn { padding: 14px 24px; font-size: 0.88rem; }
.auth-hint { display: block; margin: -4px 0 16px; color: var(--c-muted); font-size: 0.82rem; line-height: 1.45; }
.auth-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
padding: 18px 40px;
background: #fbf9f5;
border-top: 1px solid var(--c-border);
font-size: 0.92rem;
color: var(--c-muted);
}
.auth-foot a { color: var(--c-text); font-weight: 500; }
.auth-foot a:hover { color: var(--c-accent-dark); }
.auth-foot--center { justify-content: center; }
@media (max-width: 520px) {
.auth-page { padding: 32px 0 56px; }
.auth-head { padding: 32px 24px 4px; }
.auth-body { padding: 20px 24px 28px; }
.auth-foot { padding: 16px 24px; }
}
/* ACCOUNT PAGE polish ------------------------------------ */
.account-shell { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
.account-side {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 10px;
padding: 18px;
position: sticky; top: 20px; align-self: start;
box-shadow: 0 4px 18px rgba(20, 18, 14, 0.04);
}
.account-side .who { padding: 10px 12px 16px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; }
.account-side .who-name { font-weight: 600; font-size: 0.98rem; color: var(--c-text); display: block; line-height: 1.3; }
.account-side .who-email { color: var(--c-muted); font-size: 0.82rem; display: block; word-break: break-all; margin-top: 2px; }
.account-tabs { display: flex; flex-direction: column; gap: 2px; }
.account-tabs button {
background: transparent; border: none;
padding: 11px 14px; text-align: left; cursor: pointer;
border-radius: 6px;
font-family: inherit; font-size: 0.94rem; color: var(--c-text);
display: flex; align-items: center; gap: 12px;
transition: background .15s, color .15s;
}
.account-tabs button svg { flex-shrink: 0; opacity: 0.65; }
.account-tabs button:hover { background: var(--c-surface); }
.account-tabs button.active { background: var(--c-accent); color: #fff; font-weight: 600; }
.account-tabs button.active svg { opacity: 1; }
.account-tabs .acc-divider { height: 1px; background: var(--c-border); margin: 8px 0; }
.account-tabs .acc-logout { color: var(--c-muted); }
.account-tabs .acc-logout:hover { background: #fdecea; color: #7b1e15; }
.account-pane { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 28px 32px; box-shadow: 0 4px 18px rgba(20, 18, 14, 0.04); }
.account-pane h2 { margin: 0 0 8px; font-size: 1.4rem; }
.account-pane .pane-sub { color: var(--c-muted); margin: 0 0 22px; font-size: 0.95rem; }
.account-pane .form-card { border: none; padding: 0; box-shadow: none; background: transparent; }
.account-pane .form-card .field { margin-bottom: 14px; }
.account-pane .form-card label { font-size: 0.78rem; }
.account-pane .form-card input, .account-pane .form-card textarea, .account-pane .form-card select { padding: 12px 14px; font-size: 0.95rem; }
.account-pane .form-card .row, .account-pane .form-card .row3 { margin-bottom: 14px; }
@media (max-width: 800px) {
.account-shell { grid-template-columns: 1fr; }
.account-side { position: static; }
.account-tabs { flex-direction: row; flex-wrap: wrap; }
.account-tabs button { flex: 1 1 auto; justify-content: center; }
.account-pane { padding: 22px 18px; }
}
/* RESPONSIVE --------------------------------------------- */
@media (max-width: 1200px) {
#siteHeader { min-height: 82px; }
.header-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; max-width: none; }
.nav, .header-phone { display: none; }
.mobile-toggle { display: inline-flex; }
.h-icon:not(.cart-icon) { display: none; }
.logo-center img { height: 56px; }
.product-detail { grid-template-columns: 1fr; gap: 32px; }
.footer-cols { grid-template-columns: 1fr 1fr; }
/* Designer: canvas gets priority. Tools on top, stage big in the middle,
controls scroll below. Intro text goes to the bottom. */
.dm-dialog { display: flex; flex-direction: column; }
.dm-head { order: 1; }
.dm-body { order: 2; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dm-intro { order: 3; font-size: 0.8rem; padding: 8px 16px; max-height: 20vh; overflow-y: auto; }
.dm-stepbar { order: 4; padding: 8px 12px; gap: 4px; overflow-x: auto; }
.dm-step { padding: 4px 6px; font-size: 0.68rem; gap: 6px; flex: 0 0 auto; min-width: 110px; }
.dm-step-lbl { display: none; }
.dm-step.current .dm-step-lbl, .dm-step.done .dm-step-lbl { display: inline; }
.dm-tools { order: 1; flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--c-border); padding: 4px 8px; gap: 2px; }
.dm-tool { padding: 6px 10px; border-left: none; border-bottom: 3px solid transparent; flex-shrink: 0; font-size: 0.64rem; }
.dm-tool.active { border-left: none; border-bottom-color: var(--c-accent); }
.dm-side { order: 2; flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--c-border); max-height: 34vh; overflow-y: auto; padding: 12px 14px; }
.dm-stage { order: 3; flex: 1 1 auto; min-height: 50vh; }
.dm-canvas-wrap { padding: 10px; }
}
@media (max-width: 600px) {
.section { padding: 56px 0; }
.footer-cols { grid-template-columns: 1fr; }
.hero-stats { gap: 32px; }
.hero-stat .num { font-size: 2.2rem; }
}
/* MOBILE POLISH (shop, product, cart, checkout, designer) */
/* Prevent any horizontal overflow on the page itself. */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
@media (max-width: 900px) {
.container { padding: 0 16px; }
.section { padding: 48px 0; }
/* Shop */
.shop-hero { padding: 48px 0 24px; }
.shop-hero h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.shop-hero p { font-size: 0.95rem; }
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.product-card .body { padding: 14px 14px 16px; }
.product-card h3 { font-size: 0.95rem; }
.product-card .price { font-size: 1.05rem; margin-bottom: 10px; }
.product-card .actions { flex-direction: column; gap: 6px; }
.product-card .actions .btn { padding: 10px 12px; font-size: 0.74rem; }
.cat-filter { margin-bottom: 24px; gap: 6px; }
.cat-filter button { padding: 8px 14px; font-size: 0.76rem; }
/* Product detail */
.product-detail { gap: 24px; }
.product-detail .thumbs img { width: 56px; height: 56px; }
.product-detail .price { font-size: 1.4rem; margin-bottom: 16px; }
.qty-row { gap: 10px; }
.qty-row .btn { flex: 1; }
/* Bundle slots */
.bslots { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.bslot { min-height: 130px; padding: 8px 6px 6px; }
.bslot img { width: 48px; height: 48px; }
.bslot-name { font-size: 0.72rem; }
.bgroup { padding: 14px 16px; }
.bgroup-head { flex-direction: column; align-items: flex-start; gap: 6px; }
/* Bundle picker modal */
.bpick-modal { padding: 12px; }
.bpick-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 16px; }
.bpick-head { padding: 16px 18px; }
.bpick-head h3 { font-size: 1.05rem; }
.bpick-foot { padding: 12px 18px; flex-wrap: wrap; gap: 10px; font-size: 0.88rem; }
.bpick-opt { padding: 10px 8px; }
.bpick-opt strong { font-size: 0.85rem; }
/* Gallery/lightbox */
.lb-overlay .lb-prev { left: 8px; }
.lb-overlay .lb-next { right: 8px; }
.lb-overlay .lb-close { top: 12px; right: 12px; }
.lb-overlay button { width: 40px; height: 40px; font-size: 1.2rem; }
}
@media (max-width: 600px) {
/* Shop — keep 2 cols; only drop to 1 on very small screens */
.product-card .actions { flex-direction: row; }
.product-card .actions .btn { font-size: 0.72rem; padding: 9px 10px; }
/* Cart table → card layout */
.cart-table-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
.cart-table thead { display: none; }
.cart-table tr {
background: #fff; border: 1px solid var(--c-border); border-radius: 6px;
margin-bottom: 12px; padding: 14px; position: relative;
}
.cart-table td { padding: 6px 0; border-bottom: none; }
.cart-table td:last-child { padding-top: 10px; }
.cart-prod { min-width: 0; }
.cart-prod img { width: 60px; height: 60px; }
.cart-prod strong { font-size: 0.92rem; }
.cart-price { text-align: left; font-size: 1rem; }
.cart-remove, .cart-edit { width: 32px; height: 32px; }
.cart-foot-sum .sum-row span:last-child { font-size: 1.3rem; }
.cart-foot-actions { width: 100%; }
.cart-foot-actions .btn { flex: 1; }
/* Checkout */
.checkout-stepper { margin-bottom: 24px; gap: 4px; }
.checkout-stepper .step { padding: 8px 4px; font-size: 0.75rem; }
.checkout-stepper .snum { width: 26px; height: 26px; font-size: 0.82rem; }
.checkout-stepper .step::after { display: none; }
.sum-items img { width: 40px; height: 40px; }
.order-summary { padding: 18px 16px; }
/* Forms */
form.stack input, form.stack textarea, form.stack select,
.checkout-main input, .checkout-main textarea, .checkout-main select,
.form-card input, .form-card textarea, .form-card select,
.field > input, .field > textarea, .field > select {
font-size: 16px; /* prevent iOS zoom on focus */
}
/* Designer modal tweaks for phones — intro collapsed, canvas stays big */
.dm-tool svg { width: 18px; height: 18px; }
.dm-tool { padding: 4px 8px; font-size: 0.62rem; gap: 2px; }
.dm-intro { display: none; } /* too much text on phones — hide it entirely */
/* Compact side panel: less vertical real estate so the preview gets more */
.dm-side { max-height: 22vh; padding: 8px 12px 70px; overflow-y: auto; }
.dm-panel h3 { font-size: 0.68rem !important; margin: 0 0 4px !important; }
.dm-panel label { font-size: 0.7rem; margin: 6px 0 3px; }
.dm-panel input[type=text], .dm-panel select { padding: 7px 9px; font-size: 14px; }
.dm-big-btn { margin-top: 8px; padding: 9px 12px; font-size: 0.8rem; }
.dm-hint { font-size: 0.68rem; margin: 4px 0 0; line-height: 1.35; }
.dm-file-btn { padding: 8px 10px; gap: 8px; }
.dm-file-btn strong { font-size: 0.82rem; }
.dm-file-btn small { font-size: 0.68rem; }
/* Float the close button onto the tools row to save a full header row */
.dm-dialog { position: relative; }
.dm-head {
position: absolute; top: 0; right: 0; z-index: 5;
padding: 0; min-height: 0; border-bottom: none; background: transparent;
gap: 0;
}
.dm-head > div { display: none; }
.dm-stepbar { display: none; }
.dm-tools { padding-right: 44px; } /* leave room for the floating × */
.dm-close { font-size: 1.6rem; padding: 4px 12px; line-height: 1; }
.dm-stage-toolbar { padding: 6px 10px; flex-wrap: wrap; gap: 4px; }
.dm-stage-info { display: none; }
.dm-canvas-wrap { padding: 6px; }
.dm-stage { min-height: 54vh; }
/* Apply button always visible at viewport bottom */
.dm-actions {
position: fixed;
left: 0; right: 0; bottom: 0;
background: #fff;
padding: 10px 12px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
margin: 0;
border-top: 1px solid var(--c-border);
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
flex-direction: row;
z-index: 10;
}
.dm-actions .btn { flex: 1; padding: 12px 14px; font-size: 0.85rem; }
/* Gallery mosaic — already single row at 700px, tighten further here */
.gallery-grid { grid-auto-rows: 120px; gap: 4px; }
/* Bundle picker grid – tighter tiles */
.bpick-grid { grid-template-columns: repeat(2, 1fr); }
.bpick-dialog { max-height: 96vh; border-radius: 4px; }
/* Consent modal and other dialogs */
.kh-consent { padding: 12px; }
.kh-consent-dialog { padding: 24px 22px 20px; }
.kh-consent-actions { flex-direction: column; }
/* Header: make logo smaller so icons + burger fit */
.logo-center img { height: 44px; }
#siteHeader { min-height: 68px; }
.header-main { padding: 10px 12px; gap: 8px; }
.header-icons { gap: 4px; }
.h-icon { width: 38px; height: 38px; }
/* Service hero */
.service-hero { height: 42vh; min-height: 320px; }
}
@media (max-width: 420px) {
.products-grid { grid-template-columns: 1fr; gap: 12px; }
.product-card { flex-direction: row; }
.product-card .img-wrap { aspect-ratio: 1; width: 40%; max-width: 140px; }
.product-card .body { padding: 12px; flex: 1; }
.product-card .actions { flex-direction: column; gap: 6px; margin-top: 8px; }
.cat-filter { gap: 4px; }
.cat-filter button { padding: 7px 11px; font-size: 0.72rem; }
.checkout-stepper .slabel { display: none; }
}
/* SEO + Conversion-Rate-Optimization styles.
Auto-included in every SEO-transformed HTML page (see backend/src/seo/render.js). */
/* ---- Product page: stock status ---- */
.stock {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 500;
padding: 6px 12px;
border-radius: 4px;
margin: 4px 0 18px;
}
.stock::before {
content: '';
width: 8px; height: 8px; border-radius: 50%;
background: currentColor;
}
.stock-ok { color: #5a7a3e; background: #eaf1df; }
.stock-low { color: #b57c23; background: #fbf1de; }
.stock-out { color: #a32e2e; background: #fbe1e1; }
/* ---- Product page: attribute list ---- */
.prod-attrs {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 20px;
margin: 18px 0 22px;
padding: 16px 18px;
border: 1px solid #eee7db;
border-radius: 6px;
background: #fbf9f4;
}
.prod-attr { display: contents; }
.prod-attr dt { font-weight: 600; color: #5a5648; font-size: 0.88rem; margin: 0; }
.prod-attr dd { margin: 0; color: #1a1a1a; font-size: 0.92rem; }
/* ---- Product page: trust bar ---- */
.trust-bar {
list-style: none;
margin: 22px 0;
padding: 14px 4px;
border-top: 1px solid #eee7db;
border-bottom: 1px solid #eee7db;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
}
.trust-bar li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
line-height: 1.35;
}
.trust-bar .ti {
flex: 0 0 20px;
width: 20px; height: 20px; border-radius: 50%;
background: #5a7a3e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
}
.trust-bar strong { display: block; color: #1a1a1a; font-size: 0.92rem; }
.trust-bar small { display: block; color: #6a6658; font-size: 0.82rem; margin-top: 2px; }
@media (max-width: 720px) { .trust-bar { grid-template-columns: 1fr; } }
/* ---- Cross-sell ---- */
.cross-sell {
margin: 60px 0 20px;
}
.cross-sell h2 {
font-size: 1.6rem;
margin-bottom: 24px;
text-align: center;
}
.cross-sell .products-grid { margin-top: 0; }
/* ---- Wishlist heart on product cards ---- */
.product-card .img-wrap { position: relative; }
.wl-heart {
position: absolute;
top: 10px; right: 10px;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background 0.15s ease;
padding: 0;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.wl-heart:hover { transform: scale(1.1); background: #fff; }
.wl-heart svg {
width: 18px; height: 18px;
fill: none;
stroke: #888;
stroke-width: 2;
stroke-linejoin: round;
}
.wl-heart.is-on svg { fill: #a32e2e; stroke: #a32e2e; }
.wl-heart.is-on { background: #fff; }
/* Header wishlist count badge */
.h-icon.wishlist-icon { position: relative; }
.wishlist-count {
position: absolute;
top: -4px; right: -4px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #a67f48;
color: #fff;
font-size: 10px;
line-height: 16px;
text-align: center;
font-weight: 700;
}
/* ---- FAQ page ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: #fbf9f4;
border: 1px solid #eee7db;
border-radius: 6px;
padding: 16px 22px;
transition: box-shadow 0.2s ease;
}
.faq-item[open] { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.faq-item summary {
cursor: pointer;
font-weight: 600;
font-size: 1.02rem;
padding-right: 32px;
position: relative;
list-style: none;
color: #1a1a1a;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
font-size: 1.6rem;
line-height: 1;
font-weight: 300;
color: #a67f48;
transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee7db;
color: #444;
line-height: 1.6;
font-size: 0.98rem;
}
.faq-block { margin: 40px 0; }
.faq-block h2 { font-size: 1.4rem; margin-bottom: 18px; }
/* ---- Newsletter (footer) ---- */
.footer-newsletter {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 28px 32px;
margin: 32px 0;
}
.nl-inner {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(300px, 1.2fr);
gap: 28px;
align-items: center;
}
.footer-newsletter h3 { margin: 0 0 8px; font-size: 1.3rem; color: #fff; }
.footer-newsletter p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; line-height: 1.5; }
.footer-newsletter .nl-hint { color: rgba(255, 255, 255, 0.55); }
.footer-newsletter .nl-hint a { color: #cfb497; }
.nl-form {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.nl-form input[type="email"] {
padding: 12px 14px;
border: 1px solid #d9d0be;
border-radius: 4px;
font-size: 0.95rem;
background: #fff;
width: 100%;
}
.nl-form .btn { padding: 12px 22px; white-space: nowrap; }
.nl-hint {
grid-column: 1 / -1;
color: #888;
font-size: 0.78rem;
margin-top: 2px;
}
.nl-hint a { color: #a67f48; }
.nl-msg {
grid-column: 1 / -1;
font-size: 0.9rem;
min-height: 20px;
}
.nl-msg .error { color: #a32e2e; }
@media (max-width: 720px) {
.nl-inner { grid-template-columns: 1fr; gap: 18px; }
.footer-newsletter { padding: 22px 20px; }
}
/* ---- Exit-intent newsletter popup ---- */
.nl-popup {
position: fixed;
inset: 0;
background: rgba(21, 20, 20, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
animation: nlFade 0.25s ease;
}
.nl-popup.open { display: flex; }
@keyframes nlFade {
from { opacity: 0; } to { opacity: 1; }
}
.nl-popup-box {
background: #fff;
border-radius: 10px;
padding: 36px 32px 28px;
max-width: 440px;
width: 100%;
position: relative;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
text-align: center;
}
.nl-popup-box h3 { margin: 0 0 10px; font-size: 1.5rem; }
.nl-popup-box p { color: #5a5648; margin: 0 0 18px; line-height: 1.5; }
.nl-popup-box .nl-form { grid-template-columns: 1fr; }
.nl-popup-box .nl-form input[type="email"] { text-align: center; }
.nl-popup-close {
position: absolute;
top: 10px; right: 14px;
background: transparent;
border: none;
font-size: 1.6rem;
color: #aaa;
cursor: pointer;
line-height: 1;
width: 32px; height: 32px;
}
.nl-popup-close:hover { color: #333; }
/* ---- Breadcrumb ---- */
.breadcrumb {
font-size: 0.88rem;
color: #888;
padding-top: 20px;
padding-bottom: 10px;
}
.breadcrumb a { color: #666; text-decoration: none; }
.breadcrumb a:hover { color: #a67f48; }
.breadcrumb .sep { margin: 0 8px; color: #ccc; }