/*

Theme Name: Solvis Coffee

Theme URI: https://solviscoffee.pl/

Author: Fabryka stron

Description: Lekki motyw blokowy (FSE) dla marki Solvis Coffee - rzemieślnicza palarnia kawy. Wygląd sterowany theme.json (paleta brąz/krem + niebieski akcent; fonty Marcellus / Cormorant Garamond / Work Sans self-hosted). Pod PageSpeed ~100.

Version: 1.0.0

Requires at least: 6.6

Tested up to: 6.9

Requires PHP: 7.4

License: GNU General Public License version 3.0

License URI: http://www.gnu.org/licenses/gpl-3.0.html

Text Domain: solviscoffee

Tags: full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, featured-images, translation-ready

*/



/* Motyw BLOKOWY (FSE): wygląd globalny z theme.json. Tu tylko style sekcji

   (klasy .solvis-*), których nie da się wyrazić w theme.json. Kolory/fonty

   pochodzą z presetów theme.json (var(--wp--preset--*)). */



:root {

	--solvis-header-offset: 78px;

	--solvis-container: 1240px;

}



html { scroll-behavior: smooth; }

[id] { scroll-margin-top: var(--solvis-header-offset); }



/* Zero domyślnego marginesu przeglądarki na <p> z klasami .solvis-* - te klasy

   to ciasno skomponowane elementy layoutu (etykiety, liczby, chipy), nie

   swobodna proza, więc UA-margin akapitu tylko psuje wyrównanie we flex/grid.

   Bardziej szczegółowe reguły niżej (np. .solvis-badge-cite) nadal wygrywają. */

[class*="solvis-"] { margin: 0; }



/* Akcentowy tekst kursywą (Cormorant) - używany na leadach/cytatach */

.solvis-accent { font-family: var(--wp--preset--font-family--akcent); font-style: italic; line-height: 1.35; }



/* Eyebrow (nadtytuł sekcji) */

.solvis-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }



/* Przycisk-gradient (nadpisanie płaskiego tła przycisku z theme.json) */

.solvis-btn-grad .wp-element-button,

.wp-block-button.solvis-btn-grad .wp-element-button {

	background: linear-gradient(135deg, #3b82c4, #1f4d7a);

	box-shadow: 0 12px 30px -12px rgba(31, 77, 122, .6);

}

.solvis-btn-grad .wp-element-button:hover { filter: brightness(1.06); }

/* Przycisk „ghost" (obrys) */

.solvis-btn-ghost .wp-element-button {

	background: transparent; color: #3d3126; border: 1px solid #b7a685; box-shadow: none;

}

.solvis-btn-ghost .wp-element-button:hover { background: rgba(0,0,0,.03); color: #3d3126; }



/* ============================================================

   HEADER (part) - sticky z rozmyciem

   ============================================================ */

/* transform:translateZ(0) wymusza własną warstwę kompozytową dla sticky

   headera - bez tego backdrop-filter potrafi "trząść się"/migotać przy

   przewijaniu na mobile (repaint blura przy każdej klatce scrolla). */

header.wp-block-template-part { position: sticky; top: 0; z-index: 50; transform: translateZ(0); }

.solvis-head {

	background: rgba(244, 236, 221, .88); backdrop-filter: blur(10px);

	border-bottom: 1px solid #e2d6c0;

}

@media (max-width: 767px) {

	/* Blur na mobile jest najczęstszym źródłem trzęsienia się sticky headera

	   przy scrollu (ciągły repaint) - na mobile wyłączamy blur, podbijając

	   nieprzezroczystość tła, żeby wizualnie nadal wyglądało dobrze. */

	.solvis-head { backdrop-filter: none; background: rgba(244, 236, 221, .97); }

}

.solvis-head .solvis-head-inner { max-width: var(--solvis-container); margin-inline: auto; }

.solvis-logo img { height: 34px; width: auto; display: block; }

.solvis-nav { position: relative; }

.solvis-nav a { color: #4a3d31; font-size: 14px; letter-spacing: .4px; font-weight: 500; text-decoration: none; }

.solvis-nav a:hover { color: #1f4d7a; }

/* .solvis-nav a ma wyższą specyficzność niż globalny .wp-element-button z

   theme.json, więc nadpisywał biały tekst przycisku "Napisz do nas" ciemnym

   kolorem linków nawigacji - niewidoczny na niebieskim gradiencie. */

.solvis-nav .wp-block-button .wp-element-button,

.solvis-nav .wp-block-button .wp-element-button:hover { color: var(--wp--preset--color--bialy, #fff); }



/* Hamburger mobilny - czysty CSS (checkbox hack), bez JS */

.solvis-menu-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

.solvis-burger { display: none; position: relative; width: 26px; height: 20px; cursor: pointer; flex: none; }

.solvis-burger span:not(.screen-reader-text),

.solvis-burger::before,

.solvis-burger::after {

	content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;

	background: #241c15; transition: transform .25s ease, opacity .2s ease;

}

.solvis-burger::before { top: 0; }

.solvis-burger span:not(.screen-reader-text) { top: 9px; }

.solvis-burger::after { bottom: 0; }

.solvis-menu-toggle-input:checked ~ .solvis-burger::before { transform: translateY(9px) rotate(45deg); }

.solvis-menu-toggle-input:checked ~ .solvis-burger::after { transform: translateY(-9px) rotate(-45deg); }

.solvis-menu-toggle-input:checked ~ .solvis-burger span:not(.screen-reader-text) { opacity: 0; }

.solvis-burger:focus-visible { outline: 2px solid #1f4d7a; outline-offset: 3px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }



/* ============================================================

   HERO

   ============================================================ */

.solvis-hero { background: var(--wp--preset--gradient--krem-hero); overflow: hidden; position: relative; }

.solvis-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 15% 20%, rgba(74, 93, 67, .10), transparent 45%), radial-gradient(circle at 85% 80%, rgba(107, 85, 68, .10), transparent 45%); }

.solvis-hero > * { position: relative; z-index: 1; }

.solvis-hero .solvis-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }

.solvis-eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid #cdbfa6; border-radius: 40px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b5544; }

.solvis-eyebrow-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4a5d43; }

.solvis-hero-tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #4a3d31; font-weight: 600; }

.solvis-hero-price { margin: 0; font-family: var(--wp--preset--font-family--naglowki); font-size: 40px; font-weight: 400; color: #1f4d7a; line-height: 1; }

.solvis-hero-price-unit { font-family: var(--wp--preset--font-family--tekst); font-size: 15px; font-weight: 600; letter-spacing: .3px; color: #7a6a5b; text-transform: none; }

.solvis-offer-price { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--wp--preset--font-family--naglowki); font-size: 36px; font-weight: 400; color: #1f4d7a; }

.solvis-offer-price-unit { font-family: var(--wp--preset--font-family--tekst); font-size: 14px; font-weight: 600; letter-spacing: .3px; color: #7a6a5b; }

.solvis-hero-tags span.dot { width: 5px; height: 5px; border-radius: 50%; background: #c1a97f; }

.solvis-packshot { position: relative; display: flex; justify-content: center; align-items: center; }

.solvis-packshot::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, #fff8ec, #e7d8bd); box-shadow: inset 0 0 60px rgba(107, 85, 68, .18); }

.solvis-packshot img { position: relative; width: min(400px, 82%); height: auto; filter: drop-shadow(0 38px 50px rgba(20, 15, 10, .45)); }



/* Pasek statystyk pod hero */

.solvis-stats { border-top: 1px solid #e2d6c0; background: rgba(255, 251, 243, .5); }

.solvis-stats .solvis-stats-grid { max-width: var(--solvis-container); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }

/* display:flex + gap na wrapperze każdej pary liczba+etykieta - omija globalny

   blockGap z theme.json (36px), który WP dokleja jako margin między dziećmi

   zwykłego wp:group i wygrywa specyficznością z resetem marginesu na <p>. */

.solvis-stats-grid > div { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.solvis-stat-num { margin: 0; font-family: var(--wp--preset--font-family--naglowki); font-size: 30px; color: #241c15; line-height: 1.1; }

.solvis-stat-lab { margin: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7a6a5b; }



/* ============================================================

   O NAS

   ============================================================ */

.solvis-about .solvis-about-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 70px; align-items: flex-start; }

.solvis-about-media { position: relative; }

.solvis-about-media img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* Zdjecie ma juz wlasna ramke/zaokraglenie wpalone w plik - pokazujemy je w calosci
   bez kadrowania cover, zeby nie uciac odrecznego napisu ani serca. */

.solvis-about-icons { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; }

.solvis-about-icons > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0; }

.solvis-about-icons svg { width: 30px; height: 30px; color: #5f5347; }

.solvis-about-icons p { margin: 0; font-size: 13px; line-height: 1.35; color: #5f5347; }

.solvis-h2-accent { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 2 100 7 T 198 6' fill='none' stroke='%23c9b79c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 10px; padding-bottom: 8px; }

.solvis-about-stats { display: flex; gap: 0; align-items: flex-start; }

.solvis-about-stats > div { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 32px; }

.solvis-about-stats > div:first-child { padding-left: 0; }

.solvis-about-stats > div:last-child { padding-right: 0; }

.solvis-about-stats > div + div { border-left: 1px solid #e2d6c0; }

.solvis-about-stats .solvis-stat-num { color: #241c15; font-size: 34px; }

/* Pasek zaufania (Świeże palenie / Szybka wysyłka / Gwarancja jakości) */
.solvis-trust-bar { display: flex; justify-content: space-between; align-items: center; background: #f4ecdd; border-radius: 20px; padding: 34px 50px; }
.solvis-trust-bar > div { display: flex; align-items: center; gap: 18px; flex: 1; }
.solvis-trust-bar > div + div { border-left: 1px solid #e0d3b8; padding-left: 40px; margin-left: 10px; }
.solvis-trust-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid #4a5d43; flex: none; }
.solvis-trust-icon svg { width: 28px; height: 28px; color: #4a5d43; }
.solvis-trust-title { margin: 0; font-size: 17px; font-weight: 700; color: #4a5d43; }
.solvis-trust-sub { margin: 0; font-size: 14px; color: #7a6a5b; }



/* ============================================================

   DLACZEGO (dark) - karty cech

   ============================================================ */

.solvis-why { background: var(--wp--preset--color--brand-dark); }

.solvis-why .solvis-head-c { text-align: center; }

.solvis-why .solvis-eyebrow { color: #9db8d6; }

.solvis-why .solvis-head-c h2 { color: #f4ecdd; }

.solvis-reviews .solvis-head-c h2 { color: #f4ecdd; }

.solvis-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.solvis-fcard { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 34px 26px; transition: transform .25s, border-color .25s; }

.solvis-fcard:hover { transform: translateY(-6px); border-color: rgba(157, 184, 214, .5); }

.solvis-fcard .solvis-fnum { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #3b82c4, #1f4d7a); display: grid; place-items: center; font-family: var(--wp--preset--font-family--naglowki); color: #fff; font-size: 20px; margin-bottom: 22px; }

.solvis-fcard h3 { color: #f4ecdd; margin: 0 0 12px; }

.solvis-fcard p { color: #b3a595; font-size: 14.5px; line-height: 1.65; margin: 0; }



/* ============================================================

   CYTAT / BANER (parallax)

   ============================================================ */

.solvis-quote-banner { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-attachment: fixed; }

.solvis-quote-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 20, 15, .72), rgba(26, 20, 15, .5)); }

.solvis-quote-banner .solvis-qb-inner { position: relative; max-width: 760px; text-align: center; padding: 80px 40px; }

.solvis-quote-banner p { font-family: var(--wp--preset--font-family--akcent); font-style: italic; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.4; color: #f4ecdd; margin: 0 0 20px; text-wrap: pretty; }

.solvis-quote-banner .solvis-eyebrow { color: #c9b79c; }



/* ============================================================

   OFERTA

   ============================================================ */

.solvis-offer .solvis-head-c { text-align: center; }

.solvis-offer .solvis-eyebrow { color: #4a5d43; }

.solvis-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.solvis-offer-media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 640px; }

.solvis-offer-media::before { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, #fff8ec, #e7d8bd); box-shadow: inset 0 0 70px rgba(107, 85, 68, .2); }

.solvis-offer-media .wp-block-image { margin: 0; }

.solvis-offer-media .wp-block-image img { width: 100%; height: auto; display: block; }

.solvis-pack-duo { position: relative; width: min(470px, 100%); z-index: 2; filter: drop-shadow(0 40px 52px rgba(20, 15, 10, .42)); }



.solvis-pack-badge { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; background: linear-gradient(135deg, #3b82c4, #1f4d7a); color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 9px 20px; border-radius: 40px; box-shadow: 0 14px 26px -12px rgba(31, 77, 122, .7); white-space: nowrap; }

.solvis-offer-bar { width: 64px; height: 3px; background: linear-gradient(90deg, #3b82c4, #1f4d7a); margin: 8px 0 22px; }

.solvis-flavors { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

.solvis-flavor { display: flex; flex-direction: column; align-items: center; text-align: center; width: 96px; }

.solvis-flavor-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #e9dcc4; margin-bottom: 12px; flex: none; }

.solvis-flavor-icon svg { width: 36px; height: 36px; color: #5f5347; }

.solvis-flavor-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #5f5347; line-height: 1.3; }

.solvis-specs { display: flex; gap: 22px; margin-top: 26px; }

.solvis-specs > div { margin: 0; display: flex; flex-direction: column; gap: 8px; }

.solvis-spec-lab { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a7963; }

.solvis-spec-badge { display: inline-flex; align-items: center; background: #e9dcc4; color: #241c15; font-weight: 700; font-size: 17px; padding: 14px 26px; border-radius: 10px; width: fit-content; }

.solvis-offer-cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; border-top: 1px solid #e2d6c0; padding-top: 24px; text-align: center; }

.solvis-offer-cta .wp-block-buttons, .solvis-offer-cta .wp-block-button { width: 100%; }

.solvis-offer-cta .wp-element-button { display: block; width: 100%; padding: 20px 46px; font-size: 14px; text-align: center; box-sizing: border-box; }

.solvis-promo {

	margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-size: 13.5px; font-weight: 600; color: #5f5347;

	background: #faf5ea; border: 1px solid #e6dcc8; border-radius: 30px; padding: 10px 20px 10px 16px; box-sizing: border-box;

}

.solvis-promo svg { width: 18px; height: 18px; color: #5f5347; flex: none; }



/* ============================================================

   PROCES

   ============================================================ */

.solvis-process { background: var(--wp--preset--gradient--piasek); }

.solvis-process .solvis-head-c { text-align: center; }

.solvis-process .solvis-eyebrow { color: #4a5d43; }

.solvis-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }

.solvis-steps::before { content: ""; position: absolute; top: 40px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #b7a685, #b7a685 8px, transparent 8px, transparent 16px); z-index: 0; }

.solvis-step { position: relative; z-index: 1; padding: 0 22px; text-align: center; }

.solvis-step-icon { position: relative; width: 80px; height: 80px; border-radius: 50%; background: #e9dcc4; display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; }

.solvis-step-icon svg { width: 34px; height: 34px; color: #5f5347; }

.solvis-step-num { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: #b7a685; color: #fff; font-family: var(--wp--preset--font-family--naglowki); font-size: 14px; display: flex; align-items: center; justify-content: center; border: 3px solid #f4ecdd; }

.solvis-step h3 { margin: 0 0 10px; }

.solvis-step p { margin: 0; font-size: 14.5px; color: #6b5f52; }

.solvis-step p.solvis-step-tag { margin: 16px 0 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8a7963; }

.solvis-step-tag::before { content: ""; display: block; width: 28px; height: 1px; background: #c9bda3; margin: 0 auto 10px; }



/* ============================================================

   DLA KOGO

   ============================================================ */

.solvis-segments .solvis-head-c { text-align: center; }

.solvis-segments .solvis-eyebrow { color: #4a5d43; }

.solvis-seg-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.solvis-seg-tile { position: relative; border-radius: 10px; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 24px 40px -28px rgba(60, 40, 25, .5); background: repeating-linear-gradient(45deg, #dfd3bd, #dfd3bd 14px, #e7ddc9 14px, #e7ddc9 28px); }

.solvis-seg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.solvis-seg-tile .solvis-seg-body { position: relative; background: linear-gradient(180deg, rgba(20, 14, 10, 0) 0%, rgba(20, 14, 10, .5) 25%, rgba(20, 14, 10, .82) 60%, rgba(20, 14, 10, .97) 100%); padding: 170px 28px 28px; }

.solvis-seg-tile h3 { color: #f4ecdd; margin: 0 0 10px; font-size: 26px; }

.solvis-seg-tile p { color: #d8ccbb; font-size: 14.5px; margin: 0; }

.solvis-seg-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.solvis-seg-wide { display: flex; gap: 22px; align-items: center; background: linear-gradient(135deg, #faf5ea, #f0e6d3); border: 1px solid #e6dcc8; border-radius: 10px; padding: 30px; }

.solvis-seg-wide > div { margin: 0; }

.solvis-seg-wide .solvis-seg-mark { flex: none; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #3b82c4, #1f4d7a); display: grid; place-items: center; }

.solvis-seg-wide .solvis-seg-mark p { color: #fff; font-family: var(--wp--preset--font-family--akcent); font-size: 30px; }

.solvis-seg-wide h3 { margin: 0 0 6px; }

.solvis-seg-wide p { margin: 0; font-size: 14.5px; color: #6b5f52; }



/* ============================================================

   OPINIE (dark brown)

   ============================================================ */

.solvis-reviews { background: var(--wp--preset--color--brand-brown); }

.solvis-reviews .solvis-head-c { text-align: center; }

.solvis-reviews .solvis-eyebrow { color: #c9b79c; }

.solvis-rev-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.solvis-rev {

	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 34px;

	display: flex; flex-direction: column; justify-content: space-between;

}

.solvis-rev .solvis-quo { font-family: var(--wp--preset--font-family--akcent); font-size: 56px; line-height: .4; color: #9db8d6; }

.solvis-rev blockquote { margin: 14px 0 24px; font-family: var(--wp--preset--font-family--akcent); font-style: italic; font-size: 22px; color: #eaddcb; line-height: 1.5; }

.solvis-rev-author { display: flex; align-items: center; gap: 14px; }

.solvis-rev-author > div { margin: 0; }

.solvis-rev-av { display: none; }

.solvis-rev-name { font-size: 15px; color: #f4ecdd; font-weight: 500; }

.solvis-rev-role { font-size: 12.5px; color: #b3a595; }



/* ============================================================

   JAK ZAMÓWIĆ

   ============================================================ */

.solvis-order .solvis-head-c { text-align: center; }

.solvis-order .solvis-eyebrow { color: #4a5d43; }

.solvis-order-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.solvis-ocard { background: #faf5ea; border: 1px solid #e6dcc8; border-radius: 10px; padding: 38px 32px; text-align: center; }

.solvis-ocard .solvis-onum { font-family: var(--wp--preset--font-family--naglowki); font-size: 52px; color: #e0d0b3; line-height: 1; }

.solvis-ocard h3 { margin: 14px 0 10px; }

.solvis-ocard p { margin: 0; font-size: 14.5px; color: #6b5f52; }



/* ============================================================

   FAQ (natywny <details>)

   ============================================================ */

.solvis-faq { background: var(--wp--preset--gradient--piasek); }

.solvis-faq .solvis-head-c { text-align: center; }

.solvis-faq .solvis-eyebrow { color: #4a5d43; }

.solvis-faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }

.solvis-faq details { background: #faf5ea; border: 1px solid #e6dcc8; border-radius: 8px; overflow: hidden; }

.solvis-faq summary { padding: 22px 26px; font-family: var(--wp--preset--font-family--naglowki); font-size: 19px; color: #241c15; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.solvis-faq summary::-webkit-details-marker { display: none; }

.solvis-faq summary::after { content: "+"; color: #1f4d7a; font-size: 26px; line-height: 1; flex: none; transition: transform .25s ease; }

.solvis-faq details[open] summary::after { transform: rotate(45deg); }

.solvis-faq details > *:not(summary) { padding: 0 26px 24px; font-size: 15px; color: #5f5347; line-height: 1.7; }



/* ============================================================

   KONTAKT (dark) - info + slot formularza

   ============================================================ */

.solvis-contact { background: var(--wp--preset--color--brand-dark); }

.solvis-contact-grid { max-width: 1080px; margin-inline: auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }

.solvis-contact .solvis-eyebrow { color: #9db8d6; }

.solvis-contact h2 { color: #f4ecdd; }

.solvis-contact-lead { color: #c9b79c; font-size: 16px; }

.solvis-contact-list { display: flex; flex-direction: column; gap: 18px; }

.solvis-contact-row { display: flex; align-items: center; gap: 14px; color: #e0d5c4; font-size: 15px; }

.solvis-contact-row .ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(157, 184, 214, .15); display: grid; place-items: center; color: #9db8d6; font-size: 16px; flex: none; }

/* Podlinkowany e-mail/telefon ma dziedziczyć styl wiersza kontaktu - bez

   domyślnego niebieskiego i podkreślenia; delikatny akcent dopiero na hover. */

.solvis-contact-row a { color: inherit; text-decoration: none; }

.solvis-contact-row a:hover { color: #9db8d6; }

.solvis-form-card { background: none; border-radius: 0; padding: 0; box-shadow: none; }

/* LeadRadar Forms używa własnego wariantu "glass" (--lr-text-color:#fff,

   --lr-input-bg:rgba(255,255,255,.1)) myślanego pod ciemne/zdjęciowe tło -

   u nas pole ma białe tło, więc biały tekst jest niewidoczny. Pluginowe

   reguły czytają te zmienne przez var(...) mimo !important, więc wystarczy

   nadpisać same zmienne na jasny wariant. */

/* Wariant "style-glass" pluginu ustawia te zmienne wprost na

   .leadradar-form-wrapper.style-glass - to najbliższy select/input przodek

   z deklaracją, więc nadpisanie na .solvis-form-card (dalszy przodek) jest

   ignorowane przy dziedziczeniu. Trzeba trafić w ten sam element. */

.solvis-form-card .leadradar-form-wrapper.style-glass {

	--lr-text-color: #241c15;

	--lr-input-bg: #ffffff;

	--lr-label-color: #241c15;

	--lr-placeholder-color: #8a7963;

}

.solvis-form-card select option { color: #241c15; background-color: #fff; }

.solvis-form-ph { margin: 0; padding: 26px; border: 1px dashed #cdbfa6; border-radius: 8px; background: #fff; color: #8a7963; font-size: 14px; line-height: 1.6; text-align: center; }

.solvis-form-ph code { font-size: 13px; color: #1f4d7a; }



/* ============================================================

   FOOTER (part)

   ============================================================ */

/* WP dokleja blockGap między "main" a template-partem stopki jako

   margin-block-start na footerze (siblings w :where(.is-layout-flow)) -

   to widoczna szpara tła strony między ostatnią sekcją a stopką. */

footer.wp-block-template-part { margin-top: 0 !important; }

.solvis-footer { background: var(--wp--preset--color--brand-darker); }

.solvis-footer .solvis-foot-inner { max-width: var(--solvis-container); margin-inline: auto; }

.solvis-foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* wp:site-logo dokleja inline width:150px - bez width:auto tutaj height:32px

   ściska proporcje loga (widoczne spłaszczenie). */

.solvis-footer img { height: 32px; width: auto !important; filter: brightness(0) invert(1); opacity: .9; }

.solvis-footer p, .solvis-footer a, .solvis-footer span { color: #9a8f81; font-size: 14px; text-decoration: none; }

.solvis-footer a:hover { color: #fff; }

.solvis-foot-h { font-size: 12px !important; letter-spacing: 1.5px; text-transform: uppercase; color: #c9b79c !important; margin-bottom: 16px; }

.solvis-foot-nav { display: flex; flex-direction: column; gap: 10px; }

.solvis-foot-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; flex-wrap: wrap; gap: 12px; }

/* WP dokleja blockGap jako margin-top na drugim dziecku (grupa linków), bo

   .solvis-foot-bottom jest tylko wizualnie flex - w atrybutach bloku to

   nadal domyślny layout "flow" - stąd link i tekst copyright nie były

   wyrównane w pionie. */

.solvis-foot-bottom > * { margin-top: 0 !important; }

.solvis-foot-bottom span, .solvis-foot-bottom a { font-size: 13px; color: #6f665b; }



/* ============================================================

   DEKORACJE - ziarna kawy + przygaszone obrazy (assets/img, zero JS)

   ============================================================ */

.solvis-about, .solvis-why, .solvis-offer, .solvis-process, .solvis-order { position: relative; overflow: hidden; }

.solvis-about > *, .solvis-why > *, .solvis-offer > *, .solvis-process > *, .solvis-order > * { position: relative; z-index: 1; }



/* Przygaszone obrazy tła sekcji */

.solvis-about::before, .solvis-offer::before, .solvis-process::before, .solvis-order::before, .solvis-order::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: contain; }

.solvis-about::before   { left: -380px; bottom: -190px; width: 1000px; height: 1000px; background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/espresso-cup.webp'); opacity: .12; }

.solvis-offer::before   { right: -200px; top: -140px; width: 760px; height: 760px; background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/cappuccino.webp'); opacity: .12; }

.solvis-process::before { left: -260px; top: 50%; transform: translateY(-50%); width: 700px; height: 700px; background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/olive-branch.webp'); opacity: .16; }

.solvis-order::before   { left: -380px; top: -280px; width: 820px; height: 820px; background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/espresso-cup.webp'); opacity: .1; }

.solvis-order::after    { right: -380px; bottom: -320px; width: 820px; height: 820px; background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/cappuccino.webp'); opacity: .1; }



/* Ziarna kawy jako ANIMOWANE elementy (floatBean) + wejście hero (fadeUp) */

@keyframes floatBean { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.solvis-fadeup { animation: fadeUp .8s ease both; }

.solvis-beans { position: absolute; inset: 0; pointer-events: none; }

.solvis-packshot .solvis-beans { z-index: 3; }

.solvis-about-media .solvis-beans { z-index: 2; }

.solvis-beans img { position: absolute; height: auto; pointer-events: none; will-change: transform; animation: floatBean 6.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .solvis-beans img, .solvis-fadeup { animation: none !important; } }



/* Ziarna w sekcji „Dlaczego" (przygaszone) */

.solvis-why::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .42; background-repeat: no-repeat;

	background-image: url('https://solviscoffee.pl/wp-content/uploads/2026/09/bean-1.webp'), url('https://solviscoffee.pl/wp-content/uploads/2026/09/bean-5.webp'), url('https://solviscoffee.pl/wp-content/uploads/2026/09/bean-8.webp'), url('https://solviscoffee.pl/wp-content/uploads/2026/09/bean-11.webp');

	background-position: right 70px top 40px, left 50px bottom 60px, left 12% top 120px, right 16% bottom 140px;

	background-size: 130px, 112px, 62px, 56px; }



@media (max-width: 900px) {

	.solvis-beans, .solvis-why::before,

	.solvis-about::before, .solvis-offer::before, .solvis-process::before,

	.solvis-order::before, .solvis-order::after { display: none; }

}



/* ============================================================

   RESPONSYWNOŚĆ

   ============================================================ */

@media (max-width: 1024px) {

	.solvis-burger { display: block; }

	.solvis-nav .solvis-nav-links {

		display: none; flex-direction: column; align-items: flex-start; gap: 14px !important;

		position: absolute; top: calc(100% + 16px); right: 0; min-width: 220px;

		background: #faf5ea; border: 1px solid #e2d6c0; border-radius: 10px;

		box-shadow: 0 20px 40px -20px rgba(36, 28, 21, .35); padding: 18px 22px; z-index: 10;

	}

	.solvis-menu-toggle-input:checked ~ .solvis-nav-links { display: flex; }

}

@media (max-width: 900px) {

	.solvis-hero .solvis-hero-grid { grid-template-columns: 1fr; gap: 34px; }

	.solvis-about .solvis-about-grid,

	.solvis-offer-grid,

	.solvis-contact-grid { grid-template-columns: 1fr; gap: 40px; }

	.solvis-cards-4 { grid-template-columns: repeat(2, 1fr); }

	.solvis-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }

	.solvis-steps::before { display: none; }

	.solvis-seg-3, .solvis-order-3 { grid-template-columns: 1fr; }

	.solvis-seg-2 { grid-template-columns: 1fr; }

	/* Opinie na mobile: slider poziomy zamiast pionowego stosu - karty

	   przewijane, wyśrównane środkiem, każda wypełnia wysokość równo dzięki

	   align-items:stretch (domyślne we flex), a treść w środku (cytat/tekst/

	   autor) rozkłada się space-between (góra-środek-dół). */

	.solvis-rev-3 {

		display: flex; grid-template-columns: none; overflow-x: auto; gap: 18px;

		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;

		padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;

		scrollbar-width: none;

	}

	.solvis-rev-3::-webkit-scrollbar { display: none; }

	.solvis-rev-3 > .solvis-rev { flex: 0 0 82%; scroll-snap-align: center; }



	/* Kafle "Dla kogo" na mobile mają teraz prawdziwe zdjęcia (jaśniejsze/

	   bardziej "zajęte" niż poprzedni wzorek-placeholder) - mocniejszy,

	   wyższy gradient, żeby tekst nagłówka/opisu zawsze był czytelny. */

	.solvis-seg-tile .solvis-seg-body {

		background: linear-gradient(180deg, rgba(20, 14, 10, 0) 0%, rgba(20, 14, 10, .5) 25%, rgba(20, 14, 10, .82) 60%, rgba(20, 14, 10, .97) 100%);

		padding-top: 110px;

	}



	.solvis-promo { text-align: center; }

	.solvis-stats .solvis-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

	.solvis-about-icons { flex-wrap: wrap; gap: 24px; }

	.solvis-trust-bar { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px; }

	.solvis-trust-bar > div + div { border-left: none; padding-left: 0; margin-left: 0; }

	.solvis-about-stats { flex-wrap: wrap; }

	.solvis-quote-banner { background-attachment: scroll; }

}

@media (max-width: 560px) {

	.solvis-cards-4 { grid-template-columns: 1fr; }

	.solvis-specs { gap: 28px; }

	.solvis-flavors { gap: 26px; }

	.solvis-packshot::before, .solvis-offer-media::before { width: 260px; height: 260px; }

	.solvis-foot-cols { grid-template-columns: 1fr 1fr; }

}



/* ============================================================

   TYPOGRAFIA - stałe rozmiary zgodne z projektem (nadpisanie fluid)

   ============================================================ */

.solvis-hero h1 { font-size: 66px; line-height: 1.02; letter-spacing: 1px; }

.solvis-about h2, .solvis-why h2, .solvis-offer h2, .solvis-process h2,

.solvis-segments h2, .solvis-reviews h2, .solvis-order h2, .solvis-faq h2 { font-size: 46px; line-height: 1.08; }

.solvis-contact h2 { font-size: 44px; line-height: 1.08; }

.solvis-brazil { font-size: 52px; line-height: 1; }

.solvis-fcard h3 { font-size: 21px; }

.solvis-step h3 { font-size: 22px; }

.solvis-seg-tile h3 { font-size: 26px; }

.solvis-seg-wide h3 { font-size: 22px; }

.solvis-ocard h3 { font-size: 22px; }



@media (max-width: 767px) {

	.solvis-hero h1 { font-size: 40px; }

	.solvis-about h2, .solvis-why h2, .solvis-offer h2, .solvis-process h2,

	.solvis-segments h2, .solvis-reviews h2, .solvis-order h2, .solvis-faq h2,

	.solvis-contact h2 { font-size: 30px; }

	.solvis-brazil { font-size: 40px; }



	/* Na mobile: CTA "Napisz do nas" znika z headera, zostaje sam hamburger

	   tuż obok logo po prawej (jedyne dziecko .solvis-nav poza ukrytym

	   dropdownem linków, więc justify-content:space-between ustawia go

	   naturalnie przy prawej krawędzi). */

	.solvis-nav .wp-block-buttons { display: none; }



	/* Zasada: KAŻDA sekcja pełnej szerokości ma na mobile dokładnie 20px

	   paddingu lewo/prawo - nie mniej, nie więcej, identycznie wszędzie.

	   Padding 40px bywa ustawiony różnie: inline (style w edytorze bloków -

	   hero, header, footer, o-nas/oferta/proces/itd.) albo w klasie CSS

	   (.solvis-qb-inner) - łapiemy oba przypadki. !important nadpisuje

	   inline style, który ma bardzo wysoką specyficzność. */

	.wp-block-group.alignfull,

	[style*="padding-left:40px"],

	[style*="padding-right:40px"],

	.solvis-qb-inner {

		padding-left: 20px !important;

		padding-right: 20px !important;

	}

	/* Hero ma już własny poziomy odstęp treści (tagi/przyciski liczą się

	   względem pełnej szerokości) - dodatkowy padding sekcji tylko dubluje

	   odstęp i powoduje poziomy overflow. Zero tu, 20px pilnowane niżej. */

	.solvis-hero > [style*="padding-left:40px"] {

		padding-left: 0 !important;

		padding-right: 0 !important;

	}



	/* Pionowy padding sekcji (110px) jest za duży na mobile - 60px góra/dół. */

	[style*="padding-top:110px"] { padding-top: 60px !important; }

	[style*="padding-bottom:110px"] { padding-bottom: 60px !important; }



	/* Packshot w Ofercie: zero absolutnego pozycjonowania na mobile - zwykły

	   pionowy stos zamiast nakładających się na siebie obróconych opakowań,

	   bo position:absolute + min-height:520px robiło ogromną pustą przestrzeń

	   góra/dół, gdy nic w tym kontenerze nie było już rozstawione względem

	   siebie tak jak na desktopie. */

	.solvis-offer-media {

		position: static; display: flex; flex-direction: column; align-items: center;

		gap: 14px; min-height: auto; padding: 20px 0;

	}

	.solvis-offer-media::before { display: none; }

	/* Jedno zdjecie z dwoma opakowaniami (.solvis-pack-duo) - na mobile

	   wysrodkowane, bez cienia i bez tla-kola. */





	.solvis-pack-duo {

		position: static; width: min(300px, 86%); margin-inline: auto; filter: none;

	}

	.solvis-pack-badge { position: static; margin-inline: auto; transform: none; }

}

/* HERO 2026-10-06: zdjecie na calej szerokosci sekcji (od krawedzi do krawedzi), bez packshotu i kola, ziarna zostaja */
.solvis-hero { background: url('https://solviscoffee.pl/wp-content/uploads/2026/10/hero-solvis-coffee.webp') center 80% / cover no-repeat, var(--wp--preset--gradient--krem-hero); }

.solvis-hero::before { background: none; }

.solvis-hero .solvis-packshot { min-height: 560px; }

.solvis-hero .solvis-packshot::before { display: none; }

.solvis-hero .solvis-packshot > .wp-block-image { display: none; }

.solvis-hero .solvis-stats { background: rgba(255, 251, 243, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (max-width: 900px) {

	.solvis-hero { background: url('https://solviscoffee.pl/wp-content/uploads/2026/10/hero-solvis-coffee-mobile.webp') center bottom / cover no-repeat, var(--wp--preset--gradient--krem-hero); }

	.solvis-hero::before { background: linear-gradient(180deg, rgba(250, 243, 230, .5), rgba(250, 243, 230, .25)); }

	.solvis-hero .solvis-packshot { min-height: 0; }

}

/* 2026-10-06: zdjecia kafelkow Dla gastronomii / Do domu (kadr pionowych zdjec) + tlo sekcji Kontakt (ziarna) */
.solvis-seg-tile img[src*="solvis-kawa-przy-ekspresie"] { object-position: center 45%; }

.solvis-seg-tile img[src*="solvis-espresso-jeansy"] { object-position: center 30%; }

.solvis-contact { position: relative; overflow: hidden; }

.solvis-contact::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('https://solviscoffee.pl/wp-content/uploads/2026/10/solvis-ziarna-tlo-kontakt.webp') center / cover no-repeat; opacity: .07; }

.solvis-contact > * { position: relative; z-index: 1; }

.solvis-seg-tile h3, .solvis-seg-tile p { text-shadow: 0 1px 12px rgba(20, 14, 10, .6); }