/* =====================================================================
   Styl w duchu gisou.com: krój Montserrat (wolny odpowiednik Gotham), tytuły i nazwy produktów
   pogrubioną kursywą WERSALIKAMI, kafelki z odstępami i minimalnie zaokrąglonymi rogami,
   przycisk na dole kafelka. Ładowany jako ostatni (nazwa zz-), kolory z --brand (brand.css).
   ===================================================================== */
:root { --f: "Montserrat", "Helvetica Neue", Arial, sans-serif; --r-card: 8px; --r-btn: 3px; }
html { font-size: 93.75%; }
body { font-weight: 350; }

/* tytuły: pogrubiona kursywa, wersaliki */
h1, h2, .hero-title, .shelf-title { font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
h1 em, h2 em { font-style: italic; font-weight: 700; }
.hero-title { font-size: clamp(2.6rem, 6.4vw, 6.8rem); line-height: 1; }
.section-title h2, .shelf-title { font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.05; }
.rv-sum b, .news-card h2 { font-weight: 700; font-style: italic; }

/* kafelki produktów: odstępy, zaokrąglone rogi, przycisk jako dolny pasek */
.pgrid { gap: 16px; }
.slider { gap: 16px; border-top: 0; padding: 0 var(--pad); scroll-padding-inline: var(--pad); }
.ptile { border: 0; border-radius: var(--r-card); overflow: hidden; background: #fff; }
.ptile .tp-media { background: #fff; aspect-ratio: 1 / 1.08; }
.ptile .tp-media img { padding: 8%; box-sizing: border-box; }
.tp-badges { top: 14px; left: 14px; }
.tp-badges span, .tp-badges .is-new, .tp-badges .is-best, .tp-badges .is-sale { background: var(--accent-ink); color: #fff; box-shadow: none; border-radius: 2px; font: italic 700 .6875rem/1 var(--f); letter-spacing: .02em; padding: 6px 10px; text-transform: uppercase; }
.tp-body { gap: 6px; padding: 12px 16px 0; }
.tp-meta { display: contents; }
.tp-rate { order: 0; margin: 0; }
.tp-brand { order: 1; font: 500 .625rem/1.3 var(--f); letter-spacing: .16em; }
.tp-name { order: 2; font: italic 700 .75rem/1.45 var(--f); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.tp-name small { font-weight: 500; font-size: .6875rem; }
.tp-price { order: 3; margin: 0 0 14px; font: italic 700 .75rem/1.3 var(--f); letter-spacing: .05em; color: var(--muted); }
.tp-price b { font-weight: 700; color: var(--ink); }
.tp-price del { font-weight: 500; font-size: .75rem; }
.tp-add { order: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto -16px 0; padding: 15px 18px; border: 0; border-radius: 0; text-align: left; font: 400 .8125rem/1 var(--f); letter-spacing: .04em; text-transform: none; }
.tp-add::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M5 8.5h14l-1.2 11H6.2z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M5 8.5h14l-1.2 11H6.2z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-add.is-off { background: var(--soft); color: var(--muted); }
.tp-add.is-off::after { display: none; }

/* przyciski: minimalnie zaokrąglone rogi */
.btn, .btn-ghost { border-radius: var(--r-btn); }

/* komentarze klientów: tło z koloru wiodącego */
.rv-card { border-radius: var(--r-card); overflow: hidden; border-color: var(--line); background: #fff; }
.rv-body { background: color-mix(in srgb, var(--brand) 30%, #fff); }
.rv-img { border-right-color: var(--line); }
.rv, .rv-grid, .rv-empty { border-color: var(--line); }

/* =====================================================================
   MENU: odwrócone kolory (ciemne tło z koloru wiodącego, białe litery); komputer: szuflada, telefon: lista pod nagłówkiem
   ===================================================================== */
:root { --menu-bg: color-mix(in oklab, var(--brand) 38%, #0b0a0a); --menu-line: rgba(255, 255, 255, .2); --menu-dim: rgba(255, 255, 255, .68); }
.nav, .site-header.menu-open .nav { background: var(--menu-bg); color: #fff; }
.nav a, .nav button, .nav h3, .nav h4, .nav .nav-trigger, .nav .nav-link, .nav .rail-btn { color: #fff; }
.nav .nav-item, .nav .rail-btn, .nav .rail-link a { border-color: var(--menu-line); }
.nav .rail-btn, .nav .rail-link a { border-left-color: var(--menu-line); }
.nav .rail-item.is-open .rail-btn, .nav .rail-item.is-active .rail-btn { border-left-color: #fff; background: transparent; }
.nav .rail-btn:hover, .nav .rail-link a:hover { background: rgba(255, 255, 255, .1); }
.nav .col h4 { color: var(--menu-dim); }
.nav .col-needs, .nav .mega-foot { background: rgba(255, 255, 255, .08); }
.nav .mega, .nav .mega-inner { background: transparent; }
.nav .menu-quiz, .nav .menu-quiz * { color: #fff; }
.nav .menu-quiz { background: rgba(255, 255, 255, .1); border-color: var(--menu-line); }
.nav .nav-trigger::before, .nav .nav-link::before { background: #fff; }
.nav :focus-visible { outline-color: #fff; }
.nav ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .5); }
@media (min-width: 1021px) {
  .site-header.menu-open .burger { color: #fff; }
}

/* karta produktu: zdjęcie główne i miniatury na białym tle, bez kolorowej maski z koloru produktu */
.pdp-stage, .pdp-thumbs button { background: #fff; background-color: #fff; }

/* belka górna: bez dolnej krawędzi 1px */
.site-header, .site-header.solid, .site-header.menu-open, .header-in { border-bottom-color: transparent; }

/* Wybierz swój rytuał: bez poziomej kreski między rzędami kafelków */
.cat-grid-4 { border-top: 0; }
