/* ============================================================
   piebuve.lv — theme.css
   The single stylesheet for the whole storefront.

   HOW THEMES WORK
   ---------------
   Every colour, radius and font in the components below comes from
   a CSS variable. The admin panel sets <html data-theme="...">:

       warm-oak  (default)  — dark umber + raw spruce
       nordic               — graphite + cool paper + steel blue
       brass                — charcoal + warm gold

   Adding a theme later = one more [data-theme] block. No component
   ever names a colour directly.

   Components included now for later use: buttons, badges, cards,
   gallery, lightbox, forms, alerts, tabs, breadcrumbs, pagination,
   tables, modal, slider controls, sticky mobile bar, footer.
   ============================================================ */


/* ------------------------------------------------------------
   1. THEME TOKENS
   ------------------------------------------------------------ */

:root,
[data-theme="warm-oak"]{
    /* surfaces */
    --bg:        #f4efe5;   /* page background — limewash */
    --bg-alt:    #ece4d4;   /* alternate section */
    --panel:     #ffffff;   /* cards */
    --ink:       #1d1710;   /* darkest — stained timber */
    --ink-2:     #2a2118;
    --text:      #33291e;
    --muted:     #7d6f5d;
    --line:      rgba(29, 23, 16, .14);

    /* brand */
    --brand:     #6f4f2f;   /* oiled oak */
    --brand-2:   #8a653d;
    --spruce:    #efe3ca;   /* raw spruce — light accents on dark */
    --accent:    #b3814d;

    /* functional */
    --wa:        #1fab55;   /* WhatsApp */
    --wa-dark:   #168a43;
    --ok:        #4e8a5f;
    --warn:      #b07f2c;
    --danger:    #a8453a;

    /* type */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;

    /* shape */
    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 10px 34px rgba(29,23,16,.10);
    --shadow-sm: 0 3px 12px rgba(29,23,16,.08);

    /* the slat motif (signature element) */
    --slat-dark: rgba(29,23,16,.92);
    --slat-gap:  transparent;
}

[data-theme="nordic"]{
    --bg:        #eef1f2;
    --bg-alt:    #e2e8ea;
    --panel:     #ffffff;
    --ink:       #17222b;
    --ink-2:     #22303b;
    --text:      #263440;
    --muted:     #64778a;
    --line:      rgba(23, 34, 43, .14);
    --brand:     #33566e;
    --brand-2:   #427089;
    --spruce:    #dfe8ee;
    --accent:    #5a86a3;
    --slat-dark: rgba(23,34,43,.92);
}

[data-theme="brass"]{
    --bg:        #f2efe9;
    --bg-alt:    #e9e4da;
    --panel:     #ffffff;
    --ink:       #201d18;
    --ink-2:     #2c2820;
    --text:      #322d24;
    --muted:     #7c7263;
    --line:      rgba(32, 29, 24, .15);
    --brand:     #8a6a24;
    --brand-2:   #a8842f;
    --spruce:    #f0e6cd;
    --accent:    #bf9a3f;
    --slat-dark: rgba(32,29,24,.93);
}


/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; }

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:3px;
}

::selection{ background:var(--spruce); color:var(--ink); }


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */

h1,h2,h3,.display{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--ink);
    line-height:1.12;
    letter-spacing:-.01em;
}

h1{ font-size:clamp(2.5rem, 5.6vw, 4.5rem); }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); }
h3{ font-size:1.22rem; font-family:var(--font-body); font-weight:800; letter-spacing:0; }

.lead{ font-size:1.12rem; color:var(--muted); max-width:56ch; }

/* eyebrow — small caps label above headings */
.eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.74rem; font-weight:800;
    letter-spacing:.22em; text-transform:uppercase;
    color:var(--brand);
}
.eyebrow::before{
    content:""; width:26px; height:8px;
    background:repeating-linear-gradient(180deg,
        var(--brand) 0 2px, transparent 2px 4px);
}

.serif-i{ font-family:var(--font-display); font-style:italic; font-weight:400; }


/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */

.container{ width:min(1240px, 92vw); margin-inline:auto; }
.container-wide{ width:min(1520px, 96vw); margin-inline:auto; }

.section{ padding-block:clamp(56px, 9vw, 110px); }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--ink); color:var(--spruce); }
.section-dark h2{ color:var(--spruce); }
.section-dark .lead{ color:color-mix(in srgb, var(--spruce) 70%, transparent); }

.section-head{ max-width:640px; margin-bottom:clamp(28px, 4vw, 52px); }
.section-head h2{ margin-top:10px; }

.grid{ display:grid; gap:clamp(16px, 2.4vw, 28px); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* the slat band — signature texture, echoes the railings we build */
.slats{
    height:14px;
    background:repeating-linear-gradient(180deg,
        var(--slat-dark) 0 3px, var(--slat-gap) 3px 7px);
}


/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 26px;
    border-radius:var(--radius-sm);
    border:1.5px solid transparent;
    font-weight:800; font-size:.95rem;
    text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
    white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--ink); color:var(--spruce); }
.btn-primary:hover{ background:var(--ink-2); box-shadow:var(--shadow-sm); }

.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--spruce); }

.btn-light{ background:var(--spruce); color:var(--ink); }
.btn-light:hover{ box-shadow:var(--shadow-sm); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-dark); box-shadow:0 6px 18px rgba(31,171,85,.35); }
.btn-wa svg{ width:19px; height:19px; fill:currentColor; }

.btn-sm{ padding:9px 16px; font-size:.85rem; }
.btn-lg{ padding:17px 34px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-icon{
    width:44px; height:44px; padding:0;
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}


/* ------------------------------------------------------------
   6. BADGES + CHIPS
   ------------------------------------------------------------ */

.badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:.76rem; font-weight:800; letter-spacing:.04em;
    background:var(--bg-alt); color:var(--ink);
    border:1px solid var(--line);
}
.badge-dark{ background:var(--ink); color:var(--spruce); border-color:transparent; }
.badge-brand{ background:var(--brand); color:#fff; border-color:transparent; }
.badge-ok{ background:var(--ok); color:#fff; border-color:transparent; }

.chip{  /* filter pills for the gallery */
    display:inline-block; padding:9px 18px;
    border-radius:999px; border:1.5px solid var(--line);
    background:transparent; color:var(--text);
    font-weight:700; font-size:.88rem;
    transition:all .15s ease;
}
.chip:hover{ border-color:var(--ink); }
.chip.on{ background:var(--ink); color:var(--spruce); border-color:var(--ink); }


/* ------------------------------------------------------------
   7. HEADER / NAV
   ------------------------------------------------------------ */

.topbar{
    background:var(--ink); color:var(--spruce);
    font-size:.82rem;
    padding:7px 0;
}
.topbar .container{ display:flex; justify-content:space-between; gap:16px; align-items:center; }
.topbar a{ color:inherit; text-decoration:none; font-weight:700; }
.topbar a:hover{ text-decoration:underline; }
@media (max-width:720px){ .topbar .hide-m{ display:none; } }

.site-header{
    position:sticky; top:0; z-index:60;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.site-header .container{
    display:flex; align-items:center; gap:28px;
    height:74px;
}

.logo{
    display:flex; align-items:baseline; gap:2px;
    text-decoration:none;
    font-family:var(--font-display);
    font-size:1.7rem; font-weight:700; color:var(--ink);
    letter-spacing:-.02em;
}
.logo b{ font-weight:600; }
.logo span{ color:var(--brand); }
.logo em{ font-style:normal; font-size:.9rem; color:var(--muted); margin-left:2px; }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
    text-decoration:none; font-weight:700; font-size:.94rem; color:var(--text);
    padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover, .nav a.on{ color:var(--ink); border-bottom-color:var(--brand); }

.lang{ display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang a{
    text-decoration:none; font-size:.76rem; font-weight:800;
    padding:4px 9px; border-radius:999px; color:var(--muted);
}
.lang a.on{ background:var(--ink); color:var(--spruce); }
.lang a:not(.on):hover{ color:var(--ink); }

.burger{ display:none; background:none; border:none; width:42px; height:42px; }
.burger span{ display:block; height:2px; background:var(--ink); margin:5px 8px; }

@media (max-width:1020px){
    .nav, .site-header .btn-wa{ display:none; }
    .burger{ display:block; margin-left:auto; }
}

/* mobile slide-down menu */
.mnav{ display:none; background:var(--panel); border-bottom:1px solid var(--line); }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:15px 6vw; text-decoration:none; font-weight:700; border-top:1px solid var(--line); }


/* ------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------ */

.hero{ position:relative; min-height:min(88vh, 820px); display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.hero-img{ position:absolute; inset:0; z-index:-2; }
.hero-img img{ width:100%; height:100%; object-fit:cover; }
.hero::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(12deg, rgba(20,15,10,.82) 0%, rgba(20,15,10,.35) 46%, rgba(20,15,10,.05) 75%);
}
.hero-inner{ padding-block:clamp(60px, 8vw, 110px); width:min(1240px,92vw); margin-inline:auto; }
.hero h1{ color:#fff; max-width:15ch; text-wrap:balance; }
.hero .eyebrow{ color:var(--spruce); }
.hero .eyebrow::before{ background:repeating-linear-gradient(180deg, var(--spruce) 0 2px, transparent 2px 4px); }
.hero p{ margin:18px 0 30px; max-width:52ch; font-size:1.08rem; color:rgba(255,255,255,.85); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .slats{ position:absolute; left:0; right:0; bottom:0; }

.hero-stats{
    display:flex; flex-wrap:wrap; gap:0;
    margin-top:clamp(28px,4vw,48px);
    border-top:1px solid rgba(255,255,255,.25);
}
.hero-stats div{ padding:16px 34px 2px 0; margin-right:34px; }
.hero-stats b{ display:block; font-family:var(--font-display); font-size:1.85rem; font-weight:600; }
.hero-stats span{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }


/* ------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------ */

.card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

/* --- project card (gallery) --- */
.pcard{
    position:relative; display:block; text-decoration:none;
    border-radius:var(--radius); overflow:hidden;
    background:var(--ink);
    box-shadow:var(--shadow-sm);
}
.pcard img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease, opacity .4s; }
.pcard:hover img{ transform:scale(1.045); opacity:.85; }
.pcard-tall img{ aspect-ratio:3/4.4; }
.pcard-info{
    position:absolute; left:0; right:0; bottom:0;
    padding:44px 20px 16px;
    background:linear-gradient(180deg, transparent, rgba(18,13,9,.86) 62%);
    color:#fff;
}
.pcard-info h3{ color:#fff; font-size:1.05rem; margin-bottom:2px; }
.pcard-meta{ display:flex; gap:14px; font-size:.8rem; color:rgba(255,255,255,.75); font-weight:700; }
.pcard-price{
    position:absolute; top:14px; right:14px;
    background:var(--spruce); color:var(--ink);
    font-weight:800; font-size:.82rem;
    padding:6px 12px; border-radius:999px;
}

/* --- category card --- */
.ccard{
    position:relative; display:flex; align-items:flex-end;
    min-height:390px; border-radius:var(--radius); overflow:hidden;
    text-decoration:none; color:#fff; isolation:isolate;
}
.ccard img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ccard::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(200deg, transparent 30%, rgba(18,13,9,.84)); }
.ccard:hover img{ transform:scale(1.05); }
.ccard-body{ padding:24px; }
.ccard-body h3{ color:#fff; font-family:var(--font-display); font-weight:500; font-size:1.5rem; }
.ccard-body p{ font-size:.9rem; color:rgba(255,255,255,.8); margin:6px 0 12px; }
.ccard-more{ font-weight:800; font-size:.85rem; letter-spacing:.05em; color:var(--spruce); }

/* --- blog card --- */
.bcard{ display:flex; flex-direction:column; text-decoration:none; }
.bcard img{ aspect-ratio:16/9; object-fit:cover; }
.bcard-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bcard-body time{ font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.bcard-body h3{ line-height:1.35; }
.bcard-body p{ color:var(--muted); font-size:.93rem; }
.bcard:hover h3{ text-decoration:underline; text-underline-offset:3px; }

/* --- step (process) --- */
.step{ position:relative; padding:26px 24px 24px; }
.step b.num{
    font-family:var(--font-display); font-weight:500;
    font-size:2.6rem; color:var(--brand);
    display:block; line-height:1; margin-bottom:10px;
}
.step h3{ margin-bottom:6px; }
.step p{ color:var(--muted); font-size:.94rem; }


/* ------------------------------------------------------------
   10. GALLERY GRID + LIGHTBOX
   ------------------------------------------------------------ */

.works{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:270px; gap:18px; }
.works .pcard{ height:100%; }
.works .pcard img{ height:100%; aspect-ratio:auto; }
.works .tall{ grid-row:span 2; }
.works .wide{ grid-column:span 2; }
@media (max-width:980px){ .works{ grid-template-columns:repeat(2,1fr); grid-auto-rows:230px; } .works .wide{ grid-column:span 2; } }
@media (max-width:620px){ .works{ grid-template-columns:1fr; grid-auto-rows:250px; } .works .wide{ grid-column:span 1; } .works .tall{ grid-row:span 1; } }

.lightbox{
    position:fixed; inset:0; z-index:100;
    background:rgba(15,11,8,.94);
    display:none; align-items:center; justify-content:center; padding:4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:8px; }
.lightbox-close{
    position:absolute; top:18px; right:22px;
    background:none; border:none; color:#fff; font-size:2.2rem; line-height:1;
}


/* ------------------------------------------------------------
   11. FORMS
   ------------------------------------------------------------ */

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.input, .select, .textarea{
    width:100%; padding:13px 15px;
    border:1.5px solid var(--line); border-radius:var(--radius-sm);
    background:var(--panel); color:var(--text);
    font:inherit; transition:border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus{
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.textarea{ min-height:130px; resize:vertical; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.check input{ width:18px; height:18px; accent-color:var(--brand); margin-top:2px; }
.field-error .input{ border-color:var(--danger); }
.field-error small{ color:var(--danger); font-weight:700; }


/* ------------------------------------------------------------
   12. ALERTS / TABS / BREADCRUMBS / PAGINATION / TABLE
   ------------------------------------------------------------ */

.alert{ padding:14px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:.94rem; border:1px solid; }
.alert-ok{ background:color-mix(in srgb, var(--ok) 10%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.alert-warn{ background:color-mix(in srgb, var(--warn) 10%, transparent); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.alert-danger{ background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }

.tabs{ display:flex; gap:4px; border-bottom:1.5px solid var(--line); }
.tabs button{ background:none; border:none; padding:12px 18px; font-weight:800; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; }
.tabs button.on{ color:var(--ink); border-bottom-color:var(--brand); }

.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.84rem; color:var(--muted); }
.crumbs a{ color:inherit; text-decoration:none; font-weight:700; }
.crumbs a:hover{ color:var(--ink); }
.crumbs li{ list-style:none; }
.crumbs li + li::before{ content:"/"; margin-right:8px; opacity:.5; }

.pager{ display:flex; gap:6px; justify-content:center; }
.pager a, .pager span{
    min-width:42px; height:42px; padding:0 8px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--line); border-radius:var(--radius-sm);
    text-decoration:none; font-weight:800; font-size:.9rem; color:var(--text);
}
.pager a:hover{ border-color:var(--ink); }
.pager .on{ background:var(--ink); color:var(--spruce); border-color:var(--ink); }

.table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.table th{ text-align:left; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1.5px solid var(--line); }
.table td{ padding:12px 14px; border-bottom:1px solid var(--line); }
.table tr:hover td{ background:var(--bg-alt); }


/* ------------------------------------------------------------
   13. MODAL
   ------------------------------------------------------------ */

.modal-back{ position:fixed; inset:0; z-index:90; background:rgba(15,11,8,.6); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-back.open{ display:flex; }
.modal{ background:var(--panel); border-radius:var(--radius); max-width:560px; width:100%; box-shadow:var(--shadow); overflow:hidden; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; background:var(--ink); color:var(--spruce); }
.modal-head h3{ color:var(--spruce); }
.modal-body{ padding:24px; }
.modal-foot{ padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }


/* ------------------------------------------------------------
   14. SLIDER CONTROLS (shared by future sliders)
   ------------------------------------------------------------ */

.sl-dots{ display:flex; gap:8px; justify-content:center; }
.sl-dot{ width:9px; height:9px; border-radius:50%; border:none; background:var(--line); }
.sl-dot.on{ background:var(--brand); transform:scale(1.25); }
.sl-arrow{
    width:44px; height:44px; border-radius:50%; border:none;
    background:rgba(18,13,9,.45); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
}
.sl-arrow:hover{ background:rgba(18,13,9,.7); }


/* ------------------------------------------------------------
   15. CTA BAND
   ------------------------------------------------------------ */

.cta-band{ background:var(--ink); color:var(--spruce); position:relative; overflow:hidden; }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-block:clamp(44px,6vw,72px); }
.cta-band h2{ color:var(--spruce); max-width:20ch; }
.cta-band p{ color:color-mix(in srgb, var(--spruce) 65%, transparent); margin-top:8px; max-width:44ch; }
.cta-band::after{
    content:""; position:absolute; top:0; bottom:0; right:-40px; width:200px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, transparent 4px 14px);
    transform:skewX(-14deg);
}


/* ------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------ */

.footer{ background:var(--ink); color:color-mix(in srgb, var(--spruce) 72%, transparent); font-size:.93rem; }
.footer-main{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-block:clamp(44px,6vw,72px); }
@media (max-width:900px){ .footer-main{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-main{ grid-template-columns:1fr; } }
.footer h4{ color:var(--spruce); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.footer a{ color:inherit; text-decoration:none; }
.footer a:hover{ color:var(--spruce); }
.footer li{ list-style:none; margin-bottom:9px; }
.footer .logo{ color:var(--spruce); margin-bottom:12px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; }


/* ------------------------------------------------------------
   17. STICKY MOBILE CONTACT BAR
   ------------------------------------------------------------ */

.mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:none; grid-template-columns:1fr 1fr;
    background:var(--ink);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    gap:10px;
}
.mbar .btn{ padding:12px 10px; font-size:.9rem; }
@media (max-width:760px){
    .mbar{ display:grid; }
    body{ padding-bottom:74px; }
}


/* ------------------------------------------------------------
   18. UTILITIES
   ------------------------------------------------------------ */

.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:28px} .mt-4{margin-top:44px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:28px}
.tac{text-align:center}
.muted{color:var(--muted)}
.flex{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.hide{display:none}

/* soft reveal on scroll (JS adds .in) */
/* only hidden when scripts run - without them (or for a search engine
   preview) everything is simply visible */
html.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
html.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .rv{ opacity:1; transform:none; } }


/* ------------------------------------------------------------
   19. THEME SWITCHER (design-preview only; admin does this later)
   ------------------------------------------------------------ */

.theme-demo{
    position:fixed; right:16px; bottom:90px; z-index:80;
    background:var(--panel); border:1px solid var(--line); border-radius:999px;
    padding:8px 10px; display:flex; gap:8px; align-items:center;
    box-shadow:var(--shadow-sm);
}
.theme-demo span{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.theme-dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); }
.theme-dot.on{ border-color:var(--ink); transform:scale(1.12); }
.dot-oak{ background:linear-gradient(135deg,#6f4f2f,#1d1710); }
.dot-nordic{ background:linear-gradient(135deg,#33566e,#17222b); }
.dot-brass{ background:linear-gradient(135deg,#a8842f,#201d18); }
@media (max-width:760px){ .theme-demo{ bottom:150px; } }

/* ------------------------------------------------------------
   20. PRODUCT PAGE CONTENT (rich text from the editor)
   ------------------------------------------------------------ */
.product-content p{ margin-bottom:14px; }
.product-content h2, .product-content h3{ margin:26px 0 10px; }
.product-content ul, .product-content ol{ margin:0 0 14px 22px; }
.product-content li{ margin-bottom:6px; }
.product-content img{ border-radius:var(--radius-sm); margin:14px 0; }
.product-content a{ color:var(--brand); }
.product-content table{ width:100%; border-collapse:collapse; margin:14px 0; }
.product-content td, .product-content th{ border:1px solid var(--line); padding:8px 12px; }

/* card without an image yet — a quiet slat panel, never a broken box */
.pcard-noimg{
    display:block; width:100%; aspect-ratio:4/3;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px),
        var(--ink-2);
}
.works .pcard-noimg{ height:100%; aspect-ratio:auto; }
.ccard-noimg{
    position:absolute; inset:0; z-index:-2;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px),
        var(--ink-2);
}

/* ------------------------------------------------------------
   21. CATEGORY BANNER
   ------------------------------------------------------------ */
.cat-hero{
    position:relative;
    display:block;                 /* not flex - slides are absolutely placed */
    width:100%;
    aspect-ratio:21/9;
    min-height:340px;
    max-height:520px;
    overflow:hidden;
    background:var(--ink-2);       /* shows while the first image loads */
}

/* stacking, all positive so nothing can fall behind the section:
   1 slides · 2 gradient · 3 click layer · 4 text · 5 controls */
.cat-hero .ch-slide{
    position:absolute; inset:0; z-index:1;
    opacity:0; transition:opacity .7s ease;
}
.cat-hero .ch-slide.on{ opacity:1; }

.cat-hero .ch-slide img{
    position:absolute; inset:0; z-index:auto;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
}

.cat-hero::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(10deg, rgba(20,15,10,.82) 0%, rgba(20,15,10,.30) 55%, rgba(20,15,10,.05) 82%);
}

.cat-hero .ch-link{ position:absolute; inset:0; z-index:3; }

.cat-hero-in{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    width:100%; padding-block:clamp(34px,5vw,60px); color:#fff;
    pointer-events:none;
}
.cat-hero-in .container{ pointer-events:auto; }
.cat-hero-in h1{ color:#fff; margin-top:8px; font-size:clamp(2rem,4.4vw,3.2rem); }
.cat-hero .slats{ position:absolute; left:0; right:0; bottom:0; z-index:5; }

.cat-hero .ch-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6;
    width:46px; height:46px; border:none; border-radius:50%;
    background:rgba(18,13,9,.45); color:#fff; font-size:1.1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); transition:background .15s; cursor:pointer;
}
.cat-hero .ch-arrow:hover{ background:rgba(18,13,9,.75); }
.cat-hero .ch-prev{ left:16px; }
.cat-hero .ch-next{ right:16px; }

.cat-hero .ch-dots{
    position:absolute; z-index:6; bottom:26px; left:0; right:0;
    display:flex; gap:8px; justify-content:center;
}
.cat-hero .ch-dot{
    width:9px; height:9px; border-radius:50%; border:none; padding:0;
    background:rgba(255,255,255,.45); transition:all .2s; cursor:pointer;
}
.cat-hero .ch-dot.on{ background:#fff; transform:scale(1.35); }

@media (max-width:760px){
    .cat-hero{ aspect-ratio:16/10; min-height:260px; }
    .cat-hero .ch-arrow{ width:38px; height:38px; }
    .cat-hero .ch-prev{ left:8px; }
    .cat-hero .ch-next{ right:8px; }
    .cat-hero .ch-dots{ bottom:20px; }
}
@media (prefers-reduced-motion: reduce){
    .cat-hero .ch-slide{ transition:none; }
}


/* ============================================================
   23. DESIGN VARIANTS
   ------------------------------------------------------------
   Each of these changes the LAYOUT, not only the palette: where
   the navigation sits, how the hero behaves, whether project
   text sits over the photo or beneath it, how many columns the
   grid has, and how much air the page breathes.

   All of it is CSS. No template is touched, so every theme works
   with every existing page and with pages added later.
   ============================================================ */

/* ------------------------------------------------------------
   1. MAGAZINE — editorial.
   Logo centred with the navigation underneath it, project text
   BELOW the photo instead of over it, thin rules between
   sections, a shorter hero.
   ------------------------------------------------------------ */
[data-theme="magazine"]{
    --bg:#faf8f4; --bg-alt:#f0ece4; --panel:#fff;
    --ink:#191512; --ink-2:#251f19; --text:#2e2721; --muted:#7d7266;
    --line:rgba(25,21,18,.16);
    --brand:#5c4632; --brand-2:#7a5e42; --spruce:#efe7d9; --accent:#a87f4e;
    --slat-dark:rgba(25,21,18,.92);
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px;
    --shadow:none; --shadow-sm:none;
}
/* header: two rows, everything centred */
[data-theme="magazine"] .site-header .container{
    flex-direction:row; flex-wrap:wrap; justify-content:center; height:auto; gap:10px 14px; padding-block:14px; text-align:center;
}
/* name and menu each get a row; language and WhatsApp share the last one */
[data-theme="magazine"] .site-header .logo, [data-theme="magazine"] .site-header .nav{ flex:1 1 100%; justify-content:center; }
[data-theme="magazine"] .logo{ font-size:2.1rem; }
[data-theme="magazine"] .nav{ margin-left:0; justify-content:center; flex-wrap:wrap; gap:22px; }
[data-theme="magazine"] .nav a{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
[data-theme="magazine"] .site-header{ border-bottom:2px solid var(--ink); }

/* hero: shorter, text left, no gradient wash */
[data-theme="magazine"] .hero{ min-height:min(62vh, 560px); align-items:center; }
[data-theme="magazine"] .hero h1{ max-width:20ch; font-weight:400; }

/* project cards: caption under the image, like a printed catalogue */
[data-theme="magazine"] .pcard{ background:transparent; box-shadow:none; }
[data-theme="magazine"] .pcard img{ aspect-ratio:3/2; }
[data-theme="magazine"] .pcard-info{
    position:static; padding:12px 0 0; background:none; color:var(--text);
    border-top:1px solid var(--line); margin-top:10px;
}
[data-theme="magazine"] .pcard-info h3{ color:var(--ink); font-size:1.15rem; }
[data-theme="magazine"] .pcard-meta{ color:var(--muted); }
[data-theme="magazine"] .pcard-price{
    position:static; display:inline-block; margin-top:6px;
    background:none; color:var(--brand); padding:0; font-size:.95rem;
}
[data-theme="magazine"] .works{ grid-auto-rows:auto; gap:34px 26px; }
[data-theme="magazine"] .works .pcard{ height:auto; }
[data-theme="magazine"] .works .pcard img{ height:auto; aspect-ratio:3/2; }
[data-theme="magazine"] .works .tall{ grid-row:span 1; }
[data-theme="magazine"] .section{ border-top:1px solid var(--line); }
[data-theme="magazine"] .slats{ display:none; }


/* ------------------------------------------------------------
   2. SHOWCASE — photography first.
   Dark page, full-height hero, dense mosaic, images edge to
   edge with almost no gaps. The pictures carry the page.
   ------------------------------------------------------------ */
[data-theme="showcase"]{
    --bg:#14110e; --bg-alt:#1c1815; --panel:#221d18;
    --ink:#f5efe6; --ink-2:#e8e0d4; --text:#ded5c8; --muted:#9c9084;
    --line:rgba(245,239,230,.16);
    --brand:#c89a5b; --brand-2:#d9ae70; --spruce:#3a3129; --accent:#c89a5b;
    --slat-dark:rgba(10,8,6,.94);
    --font-display:'Syne', 'Helvetica Neue', sans-serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="showcase"] body{ background:var(--bg); color:var(--text); }
[data-theme="showcase"] h1,
[data-theme="showcase"] h2,
[data-theme="showcase"] h3{ color:var(--ink); font-weight:800; letter-spacing:-.02em; }
[data-theme="showcase"] .site-header{
    background:rgba(20,17,14,.72); border-bottom:1px solid var(--line);
}
[data-theme="showcase"] .logo{ color:var(--ink); }
[data-theme="showcase"] .nav a{ color:var(--text); }
[data-theme="showcase"] .nav a:hover, [data-theme="showcase"] .nav a.on{ color:var(--brand); }

[data-theme="showcase"] .hero{ min-height:100vh; }
[data-theme="showcase"] .hero::before{
    background:linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.85));
}
[data-theme="showcase"] .hero h1{ font-size:clamp(2.6rem, 7vw, 5rem); max-width:18ch; }

/* four columns, almost touching */
[data-theme="showcase"] .works{ grid-template-columns:repeat(4,1fr); gap:4px; grid-auto-rows:240px; }
[data-theme="showcase"] .grid-3{ gap:4px; }
[data-theme="showcase"] .pcard{ background:#0d0b09; }
[data-theme="showcase"] .pcard-info{
    padding:60px 18px 16px;
    background:linear-gradient(180deg, transparent, rgba(6,5,4,.92) 70%);
}
[data-theme="showcase"] .section{ padding-block:clamp(40px, 6vw, 80px); }
[data-theme="showcase"] .card,
[data-theme="showcase"] .ccard,
[data-theme="showcase"] .bcard{ background:var(--panel); border:1px solid var(--line); }
@media (max-width:980px){ [data-theme="showcase"] .works{ grid-template-columns:repeat(2,1fr); } }


/* ------------------------------------------------------------
   3. CATALOG — built for many products.
   Projects become horizontal rows: photo left, details right.
   Tight vertical rhythm, small type, everything scannable.
   ------------------------------------------------------------ */
[data-theme="catalog"]{
    --bg:#f6f6f4; --bg-alt:#ecece8; --panel:#fff;
    --ink:#1a1a18; --ink-2:#262623; --text:#2f2f2b; --muted:#74746d;
    --line:rgba(26,26,24,.18);
    --brand:#2f5d50; --brand-2:#3d7a68; --spruce:#dfe9e5; --accent:#5c9182;
    --slat-dark:rgba(26,26,24,.92);
    --font-display:'IBM Plex Sans', -apple-system, sans-serif;
    --font-body:'IBM Plex Sans', -apple-system, sans-serif;
    --radius:4px; --radius-sm:3px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="catalog"] .section{ padding-block:clamp(32px, 4.5vw, 60px); }
[data-theme="catalog"] h1{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); font-weight:700; }
[data-theme="catalog"] h2{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:700; }
[data-theme="catalog"] .hero{ min-height:min(48vh, 430px); }

/* one project per row */
[data-theme="catalog"] .works{ grid-template-columns:1fr; grid-auto-rows:auto; gap:10px; }
[data-theme="catalog"] .works .pcard,
[data-theme="catalog"] .pcard{
    display:grid; grid-template-columns:210px 1fr; align-items:stretch;
    background:var(--panel); border:1px solid var(--line); height:auto;
}
[data-theme="catalog"] .pcard img,
[data-theme="catalog"] .works .pcard img{ aspect-ratio:4/3; height:100%; }
[data-theme="catalog"] .pcard-info{
    position:static; padding:14px 18px; background:none; color:var(--text);
    display:flex; flex-direction:column; justify-content:center;
}
[data-theme="catalog"] .pcard-info h3{ color:var(--ink); font-size:1.05rem; }
[data-theme="catalog"] .pcard-meta{ color:var(--muted); }
[data-theme="catalog"] .pcard-price{
    position:static; align-self:flex-start; margin-top:8px;
    background:var(--spruce); color:var(--brand); border-radius:3px;
}
[data-theme="catalog"] .works .tall,
[data-theme="catalog"] .works .wide{ grid-row:span 1; grid-column:span 1; }
[data-theme="catalog"] .grid-3{ grid-template-columns:repeat(2,1fr); }
/* picture on the left over both rows; name, then price, on the right */
[data-theme="catalog"] .pcard{ grid-template-rows:1fr auto; }
[data-theme="catalog"] .pcard > img,
[data-theme="catalog"] .pcard > .pcard-noimg{ grid-column:1; grid-row:1 / span 2; width:100%; min-height:140px; object-fit:cover; }
[data-theme="catalog"] .pcard > .pcard-info{ grid-column:2; grid-row:1; justify-content:flex-end; padding-bottom:4px; }
[data-theme="catalog"] .pcard > .pcard-price{ grid-column:2; grid-row:2; justify-self:start; align-self:start; margin:6px 18px 14px; }
@media (max-width:620px){
    [data-theme="catalog"] .pcard,
    [data-theme="catalog"] .works .pcard{ grid-template-columns:1fr; grid-template-rows:auto; }
    [data-theme="catalog"] .pcard > img,
    [data-theme="catalog"] .pcard > .pcard-noimg{ grid-row:1; }
    [data-theme="catalog"] .pcard > .pcard-info{ grid-column:1; grid-row:2; }
    [data-theme="catalog"] .pcard > .pcard-price{ grid-column:1; grid-row:3; }
}


/* ------------------------------------------------------------
   4. STUDIO — quiet and spacious.
   A single narrow column, huge whitespace, small centred
   navigation, no shadows. Everything gets room to breathe.
   ------------------------------------------------------------ */
[data-theme="studio"]{
    --bg:#ffffff; --bg-alt:#f7f7f5; --panel:#fff;
    --ink:#111111; --ink-2:#1c1c1c; --text:#333330; --muted:#8a8a85;
    --line:rgba(17,17,17,.12);
    --brand:#111111; --brand-2:#3a3a38; --spruce:#f0efec; --accent:#8a8a85;
    --slat-dark:rgba(17,17,17,.9);
    --font-display:'Literata', Georgia, serif;
    --font-body:'Inter', -apple-system, sans-serif;
    --radius:0px; --radius-sm:0px;
    --shadow:none; --shadow-sm:none;
}
[data-theme="studio"] .container{ width:min(940px, 90vw); }
[data-theme="studio"] .section{ padding-block:clamp(80px, 12vw, 160px); }
[data-theme="studio"] .site-header{ background:#fff; backdrop-filter:none; }
[data-theme="studio"] .site-header .container{
    flex-direction:row; flex-wrap:wrap; justify-content:center; height:auto; gap:12px 14px; padding-block:18px; text-align:center;
}
[data-theme="studio"] .site-header .logo, [data-theme="studio"] .site-header .nav{ flex:1 1 100%; justify-content:center; }
[data-theme="studio"] .logo{ font-size:1.5rem; letter-spacing:.02em; }
[data-theme="studio"] .nav{ margin-left:0; justify-content:center; gap:30px; }
[data-theme="studio"] .nav a{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; border-bottom:0; }

[data-theme="studio"] .hero{ min-height:min(70vh, 640px); align-items:center; text-align:center; }
[data-theme="studio"] .hero h1{ max-width:none; margin-inline:auto; font-weight:400; }
[data-theme="studio"] .hero p{ margin-inline:auto; }
[data-theme="studio"] .hero-cta{ justify-content:center; }
[data-theme="studio"] .hero-stats{ justify-content:center; }

/* two generous columns, caption beneath */
[data-theme="studio"] .works{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; gap:60px 40px; }
[data-theme="studio"] .works .pcard{ height:auto; }
[data-theme="studio"] .works .pcard img,
[data-theme="studio"] .pcard img{ aspect-ratio:4/5; height:auto; }
[data-theme="studio"] .pcard{ background:transparent; box-shadow:none; }
[data-theme="studio"] .pcard-info{
    position:static; padding:14px 0 0; background:none; color:var(--text); text-align:center;
}
[data-theme="studio"] .pcard-info h3{ color:var(--ink); }
[data-theme="studio"] .pcard-meta{ justify-content:center; color:var(--muted); }
[data-theme="studio"] .pcard-price{ position:static; background:none; color:var(--muted); padding:4px 0 0; }
[data-theme="studio"] .works .tall{ grid-row:span 1; }
[data-theme="studio"] .grid-3{ grid-template-columns:repeat(2,1fr); gap:40px; }
[data-theme="studio"] .btn{ border-radius:0; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; }
[data-theme="studio"] .slats{ display:none; }


/* ------------------------------------------------------------
   5. COMPACT — dense and businesslike.
   Small sticky header, four tight columns, square photos,
   short sections. Fits a lot above the fold.
   ------------------------------------------------------------ */
[data-theme="compact"]{
    --bg:#eef0f3; --bg-alt:#e2e6eb; --panel:#fff;
    --ink:#111a24; --ink-2:#1b2733; --text:#26313d; --muted:#6a7787;
    --line:rgba(17,26,36,.16);
    --brand:#1d4e89; --brand-2:#2a6bb0; --spruce:#dce7f3; --accent:#4a8fd4;
    --slat-dark:rgba(17,26,36,.93);
    --font-display:'Barlow', -apple-system, sans-serif;
    --font-body:'Barlow', -apple-system, sans-serif;
    --radius:5px; --radius-sm:4px;
    --shadow:0 2px 8px rgba(17,26,36,.10);
    --shadow-sm:0 1px 4px rgba(17,26,36,.08);
}
[data-theme="compact"] .site-header .container{ height:56px; gap:20px; }
[data-theme="compact"] .logo{ font-size:1.3rem; font-weight:800; }
[data-theme="compact"] .nav{ gap:18px; }
[data-theme="compact"] .nav a{ font-size:.85rem; font-weight:700; }
[data-theme="compact"] .section{ padding-block:clamp(30px, 4vw, 54px); }
[data-theme="compact"] h1{ font-size:clamp(1.8rem, 3.4vw, 2.7rem); font-weight:800; letter-spacing:-.02em; }
[data-theme="compact"] h2{ font-weight:700; }
[data-theme="compact"] .hero{ min-height:min(52vh, 470px); }

[data-theme="compact"] .works{ grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:10px; }
[data-theme="compact"] .works .tall{ grid-row:span 1; }
[data-theme="compact"] .works .wide{ grid-column:span 1; }
[data-theme="compact"] .pcard img{ aspect-ratio:1/1; }
[data-theme="compact"] .pcard-info{ padding:34px 12px 10px; }
[data-theme="compact"] .pcard-info h3{ font-size:.92rem; }
[data-theme="compact"] .pcard-meta{ font-size:.72rem; }
[data-theme="compact"] .grid-3{ gap:12px; }
[data-theme="compact"] .btn{ padding:9px 18px; font-size:.86rem; font-weight:700; }
@media (max-width:980px){ [data-theme="compact"] .works{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ [data-theme="compact"] .works{ grid-template-columns:1fr; } }


/* ------------------------------------------------------------
   21. SHARED FIXES FOR ALL DESIGNS
   ------------------------------------------------------------ */

/* WhatsApp green dark enough for white text to be readable; the text
   stays white even where a design makes links inherit their colour */
html[data-theme]{ --wa:#168a43; --wa-dark:#0f6e34; }
.btn.btn-wa{ color:#fff; }

/* the header button never breaks onto two lines */
.site-header .btn{ white-space:nowrap; flex-shrink:0; }
.nav a{ white-space:nowrap; }

/* menu that does not fit -> burger (the class is set by a script in the header) */
html.nav-tight .site-header .nav{ display:none; }
html.nav-tight .site-header .burger{ display:block; margin-left:0; }
html.nav-tight .site-header .lang{ margin-left:auto; }
/* the centred two-row headers become one plain row once the menu is in the burger */
html.nav-tight[data-theme="magazine"] .site-header .container,
html.nav-tight[data-theme="studio"] .site-header .container{ flex-wrap:nowrap; justify-content:flex-start; padding-block:10px; }
html.nav-tight[data-theme="magazine"] .site-header .logo,
html.nav-tight[data-theme="studio"] .site-header .logo{ flex:0 1 auto; }
/* a little less space between menu items before giving up on one line */
.nav{ gap:clamp(14px, 1.7vw, 26px); }

/* designs that float the header over the picture: full width, and right
   under the top strip instead of on top of it */
[data-theme="poster"] .site-header, [data-theme="fullbleed"] .site-header{ top:auto; left:0; right:0; }
body .topbar{ background:var(--foot-bg, var(--ink)); color:var(--foot-fg, var(--spruce)); }
/* ...but only over a picture: pages without one (product, article, text
   pages) get an ordinary bar so the title is not pushed under the menu */
[data-theme="poster"] body:not(:has(.hero, .cat-hero)) .site-header,
[data-theme="fullbleed"] body:not(:has(.hero, .cat-hero)) .site-header{
    position:sticky; top:0; background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}

/* showcase: the very wide display face is kept for the big homepage
   title; article and product titles get a size that fits in 2-3 lines */
[data-theme="showcase"] h1{ font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.12; }

/* CTA band and footer: their own colour pair, so dark designs (where --ink
   is the light colour) can turn them around without white-on-white text */
body .cta-band{ background:var(--band-bg, var(--ink)); color:var(--band-fg, var(--spruce)); }
body .cta-band h2{ color:var(--band-fg, var(--spruce)); }
body .cta-band p{ color:color-mix(in srgb, var(--band-fg, var(--spruce)) 70%, transparent); }
body .footer{ background:var(--foot-bg, var(--ink)); color:color-mix(in srgb, var(--foot-fg, var(--spruce)) 72%, transparent); }
body .footer h4, body .footer .logo, body .footer a:hover{ color:var(--foot-fg, var(--spruce)); }
body .footer-bottom{ border-top-color:color-mix(in srgb, var(--foot-fg, var(--spruce)) 16%, transparent); }

[data-theme="showcase"], [data-theme="poster"], [data-theme="ink"], [data-theme="fullbleed"],
[data-theme="gold"], [data-theme="midnight"], [data-theme="carbon"]{
    --band-bg:var(--bg-alt); --band-fg:var(--ink);
    --foot-bg:color-mix(in srgb, var(--bg) 70%, #000); --foot-fg:var(--ink);
}
[data-theme="showcase"] .cta-band, [data-theme="poster"] .cta-band, [data-theme="ink"] .cta-band,
[data-theme="fullbleed"] .cta-band, [data-theme="gold"] .cta-band, [data-theme="midnight"] .cta-band,
[data-theme="carbon"] .cta-band{ border-block:1px solid var(--line); }
[data-theme="showcase"] .footer, [data-theme="poster"] .footer, [data-theme="ink"] .footer,
[data-theme="fullbleed"] .footer, [data-theme="gold"] .footer, [data-theme="midnight"] .footer,
[data-theme="carbon"] .footer{ border-top:1px solid var(--line); }

/* text pasted into the product description keeps its words, not its
   colours: inline colours from Word or another site broke dark designs */
.product-content, .product-content *{ color:inherit !important; background-color:transparent !important; font-family:inherit !important; }
.product-content a{ color:var(--brand) !important; }

/* mobile contact bar on a page with an enquiry form: the form button gets
   the room, WhatsApp and phone become icons */
.mbar{ background:var(--foot-bg, var(--ink)); }
.mbar .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
@media (max-width:760px){
    .mbar.mbar-3{ display:flex; gap:8px; }
    .mbar.mbar-3 .btn-wa, .mbar.mbar-3 .btn-light{ flex:0 0 52px; padding-inline:0; }
    .mbar.mbar-3 .mbar-t{ display:none; }
    .mbar.mbar-3 .btn-primary{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-inline:12px; font-size:.88rem; }
    .mbar .btn svg{ width:20px; height:20px; flex:0 0 auto; }
}

/* sideways strips: a fade on the side where more items are hidden */
.gz-more-r{ -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.gz-more-l{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px); mask-image:linear-gradient(90deg, transparent, #000 44px); }
.gz-more-l.gz-more-r{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

/* GP Daiga hubaudit 2026-10-31: long words / &nbsp; chains in pasted texts
   must wrap instead of widening the page; long buttons wrap on phones */
.product-content{ overflow-wrap:anywhere; }
@media (max-width:480px){ .btn-lg{ white-space:normal; max-width:100%; text-align:center; } }