/* kit.css — shared stylesheet for every page in ui_kits/website/.
   Linked from: index.html, blog.html, kontakt-v2.html, realizacje-v2.html,
   kategoria-*.html, produkt-*.html, technika-*.html, realizacja-*.html
   and legal-*.html. The wzorcowy reference stylesheet of the project. */
* { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; background: var(--ink-900); }
 body {
 font-family: var(--font-body);
 background: var(--ink-900);
 color: var(--fg-on-light-1);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 }
 a { color: inherit; text-decoration: none; }

 /* ─── shared scaffolding ───────────────────────────────── */
 .sn-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
 .sn-section { padding: clamp(56px, 8vw, 112px) 0; }
 .sn-section-light {
 /* White rectangle only inside the centered 1280px column; dark on the sides */
 background:
 linear-gradient(var(--bone-50), var(--bone-50)) center / min(100%, 1280px) 100% no-repeat,
 var(--ink-900);
 color: var(--fg-on-light-1);
 }
 .sn-section-dark { background: var(--ink-900); color: var(--fg-on-dark-1); }
 /* Soft top-right radial highlight, applied to dark sections that need depth
 (techniques + CTA). Mirrors the live site's overlay treatment. */
 .sn-section-glow {
 background:
 radial-gradient(circle at 100% 0%, rgba(76, 70, 60, 0.55) 0%, rgba(43, 41, 39, 0.25) 28%, transparent 55%),
 var(--ink-900);
 color: var(--fg-on-dark-1);
 }

 /* ─── Typography polish ─── applied globally inside the kit ─── */
 body {
 font-feature-settings: "kern" 1, "ss01" 1, "cv11" 1;
 font-optical-sizing: auto;
 }
 .sn-display, .sn-h1, .sn-h2, .sn-h3,
 .sn-pcard-title, .sn-tech-title, .sn-callout-h, .sn-side-h, .sn-footer-h {
 text-wrap: balance;
 font-feature-settings: "kern" 1, "ss01" 1;
 }
 .sn-pcard-meta, .sn-pcard-price, .sn-input { font-variant-numeric: tabular-nums; }

 .sn-eyebrow {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 color: var(--brass-500);
 letter-spacing: 0.02em;
 display: inline-block;
 margin-bottom: 22px;
 }
 .sn-eyebrow-light { color: var(--brass-600); }
 .sn-eyebrow-caps { text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: var(--ls-cta); }

 .sn-display {
 font-family: var(--font-display);
 font-style: italic;
 font-weight: 900;
 font-size: clamp(48px, 6vw, 84px);
 line-height: 1.02;
 letter-spacing: -0.02em;
 margin: 0 0 24px;
 }
 .sn-display-mid {
 font-size: clamp(40px, 4.6vw, 64px);
 color: #fff;
 text-align: center;
 letter-spacing: -0.02em;
 }
 .sn-h1 {
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: clamp(34px, 4vw, 52px);
 line-height: 1.1;
 letter-spacing: -0.015em;
 color: var(--fg-on-light-1);
 margin: 0 0 24px;
 }
 .sn-h1-light { color: #fff; text-align: center; }
 .sn-lede {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 16px;
 line-height: 26px;
 color: var(--fg-on-light-2);
 max-width: 760px;
 text-align: center;
 margin: 0 auto;
 }
 .sn-lede-light { color: var(--fg-on-dark-2); }

 /* ─── Buttons ─────────────────────────────────────────── */
 .sn-btn {
 display: inline-block;
 font-family: var(--font-heading);
 font-weight: 600;
 font-size: 13px;
 letter-spacing: var(--ls-cta);
 padding: 14px 28px;
 border-radius: 6px;
 border: 0;
 cursor: pointer;
 transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1), color 220ms;
 text-decoration: none;
 text-transform: uppercase;
 }
 .sn-btn-primary { background: var(--brass-500); color: #fff; }
 .sn-btn-primary:hover { background: var(--brass-400); color: #fff; }
 .sn-btn-primary:active { background: var(--brass-600); color: #fff; }
 .sn-btn-hero { padding: 16px 28px; }
 .sn-btn-block { width: 100%; padding: 16px; font-size: 13px; }

 /* ─── Header ─────────────────────────────────────────── */
 .sn-header {
 position: absolute;
 top: 0; left: 0; right: 0;
 z-index: 10;
 padding: 28px 0;
 }
 .sn-header-inner {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 48px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 }
 .sn-brand { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
 .sn-brand img { height: 36px; display: block; }
 .sn-brand-rule { width: 1px; height: 32px; background: rgba(255,255,255,0.28); display: block; margin-top: 4px; }
 .sn-brand-plaque { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; margin-top: 4px; }
 /* Tagline plaque only at wide viewports; below 1280px the wordmark stands alone. */
 @media (max-width: 1280px) {
 .sn-brand-rule,
 .sn-brand-plaque { display: none; }
 .sn-brand { gap: 0; }
 }
 .sn-brand-plaque-since {
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--warm-gray);
 font-weight: 500;
 }
 .sn-brand-plaque-tag {
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 letter-spacing: 0.06em;
 color: var(--warm-gray);
 font-weight: 400;
 }
 /* Legacy, keep `25 lat` style available for non-header uses */
 .sn-brand-badge { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--brass-500); }
 .sn-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
 .sn-nav-item { position: relative; }
 .sn-nav-link {
 color: rgba(255, 255, 255, 0.82);
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.01em;
 padding: 9px 14px;
 border-radius: 3px;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 line-height: 1;
 transition: color 200ms, background 200ms;
 position: relative;
 }
 .sn-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
 .sn-nav-link.is-active {
 color: #fff;
 background: rgba(255, 255, 255, 0.06);
 }
 .sn-nav-link.is-active::after {
 content: "";
 position: absolute;
 left: 14px;
 right: 14px;
 bottom: 4px;
 height: 1px;
 background: var(--brass-500);
 }
 .sn-nav-item-mega.is-open > .sn-nav-link-trigger {
 color: #fff;
 background: rgba(255, 255, 255, 0.06);
 }

 /* Accent variant, small brass dot before the label.
 Use for time-sensitive nav items like "Promocje" so they stand out
 in the top-level without being garish. */
 .sn-nav-link-accent {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 }
 .sn-nav-link-dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: var(--brass-400);
 box-shadow: 0 0 0 0 rgba(176, 144, 88, 0.55);
 animation: snNavDotPulse 2400ms ease-in-out infinite;
 flex-shrink: 0;
 }
 @keyframes snNavDotPulse {
 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 144, 88, 0.45); }
 50% { box-shadow: 0 0 0 5px rgba(176, 144, 88, 0); }
 }
 /* On scrolled-state header (light backdrop on dark pages), keep dot visible */
 .sn-header-solid .sn-nav-link-dot,
 .sn-header-scrolled .sn-nav-link-dot { background: var(--brass-500); }
 .sn-nav-chev {
 width: 12px;
 height: 12px;
 display: block;
 transform-origin: 50% 50%;
 transition: transform 220ms var(--ease-out);
 color: var(--brass-400);
 }

 /* CTA pinned right, outlined ghost, brass border, hover fills brass */
 .sn-nav-cta {
 margin-left: 8px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 9px 16px;
 background: transparent;
 color: var(--brass-300);
 font-family: var(--font-body, "Inter", sans-serif);
 font-weight: 600;
 font-size: 12px;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 text-decoration: none;
 border: 1px solid rgba(176, 144, 88, 0.55);
 border-radius: 3px;
 transition: background 220ms, color 220ms, border-color 220ms, transform 220ms;
 white-space: nowrap;
 }
 .sn-nav-cta:hover {
 background: rgba(176, 144, 88, 0.12);
 border-color: var(--brass-400);
 color: #fff;
 }
 .sn-nav-cta svg { width: 13px; height: 13px; transition: transform 200ms; color: var(--brass-400); }
 .sn-nav-cta:hover svg { transform: translateX(3px); color: var(--brass-300); }

 /* legacy bare-link selectors, kept for safety in any inline content */
 .sn-nav a:not(.sn-nav-cta):not(.sn-nav-link) { color: rgba(255, 255, 255, 0.78); font-size: 13px; }
 .sn-chev { color: var(--brass-500); font-size: var(--fs-nano); }

 /* ─── Mega menu ──────────────────────────────────────────── */
 .sn-mega {
 position: absolute;
 left: 0; right: 0;
 top: 100%;
 background: rgba(14, 10, 7, 0.96);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 border-bottom: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
 animation: snMegaOpen 260ms var(--ease-out);
 z-index: 99;
 }
 @keyframes snMegaOpen {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .sn-mega-inner {
 max-width: 1280px;
 margin: 0 auto;
 padding: 40px 48px 48px;
 display: grid;
 grid-template-columns: 1fr 1fr 1.05fr;
 gap: 48px;
 align-items: start;
 }

 .sn-mega-col-head {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 padding-bottom: 16px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.10);
 margin-bottom: 8px;
 }
 .sn-mega-eyebrow {
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-400);
 }
 .sn-mega-count {
 font-family: var(--font-display, "Exo", sans-serif);
 font-weight: 900;
 font-style: italic;
 font-size: 18px;
 color: var(--brass-500);
 line-height: 1;
 letter-spacing: -0.02em;
 font-variant-numeric: tabular-nums;
 }

 .sn-mega-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 }
 .sn-mega-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
 .sn-mega-list li:last-child { border-bottom: 0; }

 .sn-mega-link {
 display: grid;
 grid-template-columns: 1fr auto;
 grid-template-rows: auto auto;
 column-gap: 16px;
 padding: 14px 4px;
 text-decoration: none;
 transition: padding 220ms, background 200ms;
 }
 .sn-mega-link:hover { padding-left: 12px; }
 .sn-mega-link-h {
 grid-column: 1;
 grid-row: 1;
 font-family: var(--font-heading, "Inter", sans-serif);
 font-weight: 600;
 font-size: 15px;
 color: #fff;
 letter-spacing: -0.005em;
 line-height: 1.25;
 transition: color 200ms;
 }
 .sn-mega-link:hover .sn-mega-link-h { color: var(--brass-300); }
 .sn-mega-link-sub {
 grid-column: 1;
 grid-row: 2;
 margin-top: 2px;
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: 12px;
 color: rgba(255, 255, 255, 0.55);
 line-height: 1.4;
 }
 .sn-mega-link-arrow {
 grid-column: 2;
 grid-row: 1 / 3;
 width: 16px; height: 16px;
 align-self: center;
 color: rgba(255, 255, 255, 0.25);
 opacity: 0;
 transform: translateX(-6px);
 transition: opacity 220ms, transform 220ms, color 220ms;
 }
 .sn-mega-link:hover .sn-mega-link-arrow {
 opacity: 1;
 transform: translateX(0);
 color: var(--brass-400);
 }

 /* Featured card */
 .sn-mega-feature {
 display: flex;
 flex-direction: column;
 gap: 14px;
 padding: 16px;
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 4px;
 text-decoration: none;
 transition: background 220ms, border-color 220ms, transform 220ms;
 }
 .sn-mega-feature:hover {
 background: rgba(176, 144, 88, 0.06);
 border-color: rgba(176, 144, 88, 0.35);
 transform: translateY(-2px);
 }
 .sn-mega-feature-eye {
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-400);
 }
 .sn-mega-feature-photo {
 position: relative;
 width: 100%;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 border-radius: 3px;
 background: var(--ink-800);
 }
 .sn-mega-feature-photo img {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out);
 }
 .sn-mega-feature:hover .sn-mega-feature-photo img { transform: scale(1.04); }
 .sn-mega-feature-tag {
 position: absolute;
 top: 10px; left: 10px;
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: var(--fs-nano);
 font-weight: 600;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 padding: 5px 10px;
 background: var(--brass-500);
 color: var(--ink-1000);
 border-radius: 999px;
 }
 .sn-mega-feature-h {
 font-family: var(--font-display, "Exo", sans-serif);
 font-weight: 700;
 font-size: 18px;
 line-height: 1.25;
 color: #fff;
 margin: 0;
 letter-spacing: -0.01em;
 }
 .sn-mega-feature-h em {
 font-style: italic;
 color: var(--brass-300);
 font-weight: 700;
 }
 .sn-mega-feature-cta {
 margin-top: auto;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-body, "Inter", sans-serif);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--brass-400);
 transition: gap 220ms, color 220ms;
 }
 .sn-mega-feature-cta svg { width: 14px; height: 14px; transition: transform 220ms; }
 .sn-mega-feature:hover .sn-mega-feature-cta { color: var(--brass-300); gap: 12px; }
 .sn-mega-feature:hover .sn-mega-feature-cta svg { transform: translateX(2px); }

 /* Solid variant, opaque dark bar that takes up layout space,
 used on pages where the hero/first section is LIGHT (kontakt, single product). */
 .sn-header-solid {
 position: relative;
 background: var(--ink-900);
 border-bottom: 1px solid rgba(255,255,255,0.06);
 }

 /* Sticky scrolled state, both default and solid headers adopt the
 translucent backdrop-blur look once you're past 80px down the page.
 Pattern from design-system "Sticky header · scrolled state" card. */
 .sn-header,
 .sn-header-solid {
 transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, padding 220ms ease;
 }
 .sn-header-scrolled {
 position: fixed;
 top: 0; left: 0; right: 0;
 background: rgba(14, 10, 7, 0.85);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.14);
 padding: 14px 0;
 z-index: 100;
 animation: snHeaderSlideIn 280ms var(--ease-out);
 }
 .sn-header-scrolled .sn-brand img { height: 30px; }
 .sn-header-scrolled .sn-brand-rule { height: 28px; }
 @keyframes snHeaderSlideIn {
 from { transform: translateY(-100%); }
 to { transform: translateY(0); }
 }

 /* ─── Hero ─── matches live https://sanderson.pl/produkty/kubki-ceramiczne/
 bg = #151513 + image right-center / contain (no overlay; image has its own dark fade) */
 .sn-hero {
 position: relative;
 background-color: var(--ink-900);
 background-image: url("../../assets/imagery/Kubki-ceramiczne-nadruki.jpg");
 background-repeat: no-repeat;
 background-position: 100% 50%;
 background-size: contain;
 overflow: hidden;
 min-height: 766px;
 }
 .sn-hero-inner {
 position: relative;
 max-width: 1280px;
 margin: 0 auto;
 padding: 175px 48px 112px;
 display: flex;
 }
 .sn-hero-copy {
 flex: 0 0 50%;
 max-width: 50%;
 padding: 0 40px 0 40px;
 color: #fff;
 display: flex;
 flex-direction: column;
 gap: 0;
 }
 .sn-hero-copy .sn-eyebrow { margin-bottom: 14px; }
 .sn-hero-copy .sn-display {
 color: #fff;
 margin: 0 0 22px;
 font-size: clamp(36px, 4vw, 56px);
 line-height: 1.05;
 letter-spacing: -0.02em;
 }
 .sn-hero-lede {
 font-size: 16px;
 line-height: 26px;
 color: var(--fg-on-dark-2);
 margin: 0 0 32px;
 max-width: 480px;
 text-wrap: pretty;
 }
 .sn-hero .sn-btn-hero {
 align-self: flex-start;
 }
 .sn-hero-scroll {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 margin-top: 52px;
 color: var(--fg-on-dark-2);
 font-size: 14px;
 align-self: flex-start;
 }
 .sn-hero-scroll:hover { color: #fff; }

 /* ─── Product grid ───────────────────────────────────── */
 .sn-products-head { text-align: center; margin-bottom: 56px; }
 .sn-products-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 24px;
 }
 /* ─── Legacy product card (.sn-pcard) ────────────────────
 Superseded by the editorial .sn-kt2-prod card in category-v2.css
 since Spring 2026. ProductGrid.jsx and category pages all use the
 new card. Kept for backwards compatibility if any older HTML
 still references this markup, DO NOT use for new work. */
 .sn-pcard {
 background: #fff;
 border: 1px solid rgba(20, 17, 13, 0.10);
 border-radius: 8px;
 padding: 0 20px 20px;
 transition: box-shadow 220ms, transform 220ms;
 display: flex;
 flex-direction: column;
 gap: 8px;
 }
 .sn-pcard:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 18px 48px rgba(20,17,13,0.10); transform: translateY(-2px); }
 .sn-pcard-photo {
 aspect-ratio: 1 / 1;
 margin: 0 -20px;
 border-radius: 8px 8px 0 0;
 overflow: hidden;
 background: #fff;
 display: flex; align-items: center; justify-content: center;
 }
 .sn-pcard-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
 .sn-pcard-body { padding-top: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
 .sn-pcard-meta { font-size: 12px; color: var(--fg-on-light-3); letter-spacing: 0.04em; line-height: 18px; }
 .sn-pcard-meta span { color: var(--fg-on-light-2); }
 .sn-pcard-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-on-light-1); margin: 4px 0 0; letter-spacing: -0.01em; line-height: 1.2; }
 .sn-pcard-desc { font-size: 13px; color: var(--fg-on-light-2); line-height: 20px; margin: 4px 0 0; text-wrap: pretty; }
 .sn-pcard-price { font-family: var(--font-heading); font-size: 14px; color: var(--fg-on-light-1); margin: auto 0 0; padding-top: 12px; font-weight: 600; line-height: 1.2; }
 .sn-pcard-link { font-size: 13px; color: var(--brass-500); margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; transition: color 220ms; align-self: flex-start; letter-spacing: 0.01em; }
 .sn-pcard-link:hover { color: var(--brass-700); }
 .sn-pcard-link svg { width: 11px; height: 11px; flex-shrink: 0; }

 /* ─── Technique cards ─── senior-designer polish:
 numbered index over photo, spec line of key attributes, gold CTA per card.
 Whole card is a link with a clean hover lift. */
 .sn-tech-head { text-align: center; margin-bottom: 64px; }
 .sn-tech-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 }
 .sn-tech-card {
 display: flex;
 flex-direction: column;
 background: rgba(255, 255, 255, 0.025);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 12px;
 overflow: hidden;
 text-decoration: none;
 color: inherit;
 transition: border-color 280ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
 background-color 280ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
 transform 280ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 }
 .sn-tech-card:hover {
 border-color: rgba(176, 144, 88, 0.40);
 background: rgba(176, 144, 88, 0.04);
 transform: translateY(-3px);
 }
 .sn-tech-card:hover .sn-tech-photo img { transform: scale(1.03); }
 .sn-tech-card:hover .sn-tech-cta { color: var(--brass-400); }
 .sn-tech-card:hover .sn-tech-cta svg { transform: translateX(3px); }

 .sn-tech-photo {
 position: relative;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: var(--ink-900);
 }
 .sn-tech-photo img {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 }

 .sn-tech-body {
 /* Fixed row template = every card lays out identically regardless of text length.
 index | title | specs | desc | cta */
 display: grid;
 grid-template-rows: auto auto auto 1fr auto;
 padding: 22px 22px 24px;
 gap: 10px;
 flex: 1;
 }
 .sn-tech-index {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: var(--fs-mini);
 letter-spacing: var(--ls-cta);
 color: var(--fg-on-dark-3);
 text-transform: uppercase;
 line-height: 1;
 }
 .sn-tech-title {
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: 20px;
 color: #fff;
 margin: 0;
 letter-spacing: -0.01em;
 line-height: 1.2;
 min-height: 1.2em;
 }
 .sn-tech-specs {
 list-style: none;
 margin: 0; padding: 0;
 display: flex; flex-wrap: wrap;
 gap: 6px 0;
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 letter-spacing: var(--ls-eyebrow);
 color: var(--brass-400);
 text-transform: uppercase;
 font-weight: 600;
 min-height: 16px;
 }
 .sn-tech-specs li {
 position: relative;
 padding-right: 12px;
 margin-right: 8px;
 }
 .sn-tech-specs li:not(:last-child)::after {
 content: "";
 position: absolute;
 right: 0; top: 50%;
 width: 3px; height: 3px;
 margin-top: -1.5px;
 background: var(--brass-400);
 border-radius: 50%;
 opacity: 0.5;
 }
 .sn-tech-specs li:last-child { margin-right: 0; padding-right: 0; }

 .sn-tech-desc {
 font-family: var(--font-body);
 font-size: 14px;
 color: var(--fg-on-dark-2);
 line-height: 22px;
 margin: 0;
 text-wrap: pretty;
 /* Clamp to 3 lines so cards line up regardless of copy length */
 display: -webkit-box;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 }
 .sn-tech-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 4px;
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 13px;
 color: var(--brass-500);
 letter-spacing: 0.01em;
 transition: color 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 }
 .sn-tech-cta svg {
 width: 11px; height: 11px;
 flex-shrink: 0;
 transition: transform 280ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 }

 /* ─── Contact form ─── matches live https://sanderson.pl/produkty/kubki-ceramiczne/ */
 .sn-contact-head { text-align: center; margin-bottom: 64px; max-width: 900px; margin-left: auto; margin-right: auto; }
 .sn-contact-layout {
 display: grid;
 grid-template-columns: 1fr 1.7fr 1fr;
 gap: 40px;
 align-items: start;
 }
 .sn-contact-side {
 color: var(--fg-on-dark-2);
 display: flex;
 flex-direction: column;
 gap: 28px;
 padding-top: 16px;
 }
 .sn-contact-side-r { text-align: right; }
 .sn-side-block { display: flex; flex-direction: column; gap: 10px; }
 .sn-side-h { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin: 0; letter-spacing: -0.005em; line-height: 1.3; }
 .sn-side-p { font-size: 16px; line-height: 26px; margin: 0; text-wrap: pretty; color: var(--fg-on-dark-2); }

 .sn-form {
 /* Subtle semi-transparent panel, like Elementor's overlay 0.11 over section bg */
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 12px;
 padding: 48px 32px;
 display: flex; flex-direction: column;
 gap: 12px;
 }
 .sn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .sn-input, .sn-textarea {
 width: 100%;
 background: #fff;
 border: 0;
 border-radius: 4px;
 padding: 11px 16px;
 font-family: var(--font-body);
 font-size: 15px;
 color: var(--fg-on-light-1);
 transition: outline-color 220ms;
 line-height: 1.4;
 }
 .sn-input::placeholder, .sn-textarea::placeholder { color: var(--fg-on-light-3); }
 .sn-input:focus, .sn-textarea:focus { outline: 2px solid var(--brass-500); outline-offset: 1px; }
 .sn-textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); padding: 12px 16px; }
 .sn-file-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 4px; padding: 6px; }
 .sn-file-btn {
 background: var(--bone-200);
 color: var(--fg-on-light-1);
 padding: 10px 16px;
 border-radius: 6px;
 font-size: 13px;
 cursor: pointer;
 border: 1px solid rgba(20,17,13,0.10);
 font-weight: 500;
 }
 .sn-file-help { font-size: 13px; color: var(--fg-on-light-3); }
 .sn-checkbox {
 display: flex; gap: 12px;
 align-items: flex-start;
 font-size: 13px;
 color: var(--fg-on-dark-2);
 line-height: 20px;
 padding: 4px 0;
 }
 .sn-checkbox input { margin-top: 2px; accent-color: var(--brass-500); width: 18px; height: 18px; flex-shrink: 0; }
 .sn-inline-link { color: var(--brass-500); text-decoration: underline; }
 .sn-recaptcha {
 background: var(--bone-100);
 border: 1px solid rgba(20,17,13,0.10);
 border-radius: 6px;
 padding: 14px 16px;
 display: flex; align-items: center; gap: 14px;
 color: var(--fg-on-light-1);
 font-size: 14px;
 margin-top: 4px;
 }
 .sn-recaptcha-box { width: 24px; height: 24px; border: 2px solid rgba(20, 17, 13, 0.20); border-radius: 3px; display: inline-block; }
 .sn-recaptcha-logo { margin-left: auto; font-size: var(--fs-nano); color: var(--fg-on-light-3); }
 .sn-form .sn-btn-block { margin-top: 8px; padding: 18px; font-size: 14px; letter-spacing: 0.1em; }

 /* ─── FAQ ───────────────────────────────────────────── */
 .sn-section-faq { padding-bottom: clamp(72px, 9vw, 128px); }
 .sn-faq-head { text-align: center; margin-bottom: 48px; }
 .sn-faq-list { max-width: 900px; margin: 0 auto 56px; }
 .sn-faq-item { border-bottom: 1px solid rgba(20,17,13,0.10); }
 .sn-faq-q {
 width: 100%;
 background: transparent;
 border: 0;
 padding: 22px 4px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 24px;
 cursor: pointer;
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 16px;
 color: var(--fg-on-light-1);
 text-align: left;
 letter-spacing: -0.005em;
 }
 .sn-faq-q:hover { color: var(--brass-700); }
 .sn-faq-ic { color: var(--fg-on-light-2); flex-shrink: 0; }
 .sn-faq-a { padding: 0 4px 22px; font-size: 15px; color: var(--fg-on-light-2); line-height: 26px; max-width: 760px; text-wrap: pretty; }
 .sn-callout {
 background: var(--bone-200);
 border-radius: 16px;
 padding: 44px 32px;
 text-align: center;
 max-width: 900px;
 margin: 0 auto;
 display: flex; flex-direction: column; align-items: center; gap: 12px;
 }
 .sn-callout-h { font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--fg-on-light-1); margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
 .sn-callout-p { font-size: 15px; color: var(--fg-on-light-2); line-height: 24px; max-width: 580px; margin: 0; text-wrap: pretty; }
 .sn-callout .sn-btn { margin-top: 8px; }

 /* ─── Footer ─── senior-designer overhaul:
 trust strip → brand + 3-col nav + contact → compact newsletter → legal */
 .sn-footer { background: var(--ink-1000); color: #fff; }

 /* Trust strip, 4 features in a row above the main footer */
 .sn-trust {
 background: var(--ink-900);
 border-top: 1px solid rgba(255,255,255,0.05);
 border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 .sn-trust-inner {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 32px;
 padding-top: 28px;
 padding-bottom: 28px;
 }
 .sn-trust-item { display: flex; flex-direction: column; gap: 4px; }
 .sn-trust-h {
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: 18px;
 color: var(--brass-400);
 letter-spacing: -0.005em;
 line-height: 1.2;
 }
 .sn-trust-p {
 font-family: var(--font-body);
 font-size: 13px;
 color: var(--fg-on-dark-2);
 line-height: 1.45;
 }

 /* Main footer block */
 .sn-footer-main {
 display: grid;
 grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
 gap: 48px;
 padding-top: 72px;
 padding-bottom: 56px;
 }
 .sn-footer-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
 .sn-footer-brand img { height: 124px; width: auto; display: block; }
 .sn-footer-rule {
 width: 56px;
 height: 1px;
 background: var(--brass-500);
 display: block;
 opacity: 0.65;
 }
 .sn-footer-tagline {
 font-family: var(--font-body);
 font-style: italic;
 font-weight: 400;
 font-size: 14px;
 line-height: 22px;
 color: var(--fg-on-dark-3);
 letter-spacing: 0;
 max-width: 240px;
 }

 .sn-footer-col-h {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 12px;
 color: var(--brass-400);
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 margin: 0 0 20px;
 }
 .sn-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
 .sn-footer-nav a {
 font-family: var(--font-body);
 font-size: 15px;
 color: var(--fg-on-dark-2);
 text-decoration: none;
 transition: color 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
 padding-left 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 display: inline-block;
 position: relative;
 }
 .sn-footer-nav a::before {
 content: "";
 position: absolute;
 left: 0; top: 50%;
 width: 0; height: 1px;
 background: var(--brass-400);
 transition: width 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 margin-top: -0.5px;
 }
 .sn-footer-nav a:hover { color: var(--brass-400); padding-left: 14px; }
 .sn-footer-nav a:hover::before { width: 8px; }

 .sn-footer-contact { display: flex; flex-direction: column; gap: 8px; }
 .sn-footer-phone {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 22px;
 color: #fff;
 letter-spacing: -0.01em;
 text-decoration: none;
 transition: color 220ms;
 font-variant-numeric: tabular-nums;
 }
 .sn-footer-phone:hover { color: var(--brass-400); }
 .sn-footer-email {
 font-family: var(--font-body);
 font-size: 15px;
 color: var(--brass-400);
 text-decoration: none;
 margin-top: 2px;
 transition: color 220ms;
 }
 .sn-footer-email:hover { color: var(--brass-300); text-decoration: underline; }
 .sn-footer-hours {
 font-family: var(--font-body);
 font-size: 13px;
 line-height: 20px;
 color: var(--fg-on-dark-3);
 margin: 14px 0 0;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 }
 .sn-footer-status {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: var(--status-active);
 box-shadow: 0 0 0 3px rgba(143, 184, 122, 0.20);
 flex-shrink: 0;
 }
 .sn-footer-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 18px;
 padding: 12px 18px;
 background: transparent;
 border: 1px solid rgba(176,144,88,0.50);
 border-radius: 6px;
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 13px;
 color: var(--brass-400);
 text-decoration: none;
 transition: all 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 align-self: flex-start;
 }
 .sn-footer-cta svg { width: 10px; height: 10px; transition: transform 220ms; }
 .sn-footer-cta:hover { background: var(--brass-500); border-color: var(--brass-500); color: #fff; }
 .sn-footer-cta:hover svg { transform: translateX(3px); }

 .sn-footer-social {
 list-style: none;
 margin: 24px 0 0;
 padding: 0;
 display: flex;
 gap: 10px;
 }
 .sn-footer-social a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px; height: 36px;
 border-radius: 50%;
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.06);
 color: var(--fg-on-dark-2);
 transition: all 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
 }
 .sn-footer-social svg { width: 16px; height: 16px; display: block; }
 .sn-footer-social a:hover {
 background: var(--brass-500);
 border-color: var(--brass-500);
 color: #fff;
 transform: translateY(-2px);
 }

 /* Compact newsletter, gold-tinted panel sits in its own "zone" with a
 subtle gold separator above, so it reads as a distinct moment in the footer. */
 .sn-news-zone {
 position: relative;
 padding: 20px 0 8px;
 }
 .sn-news-zone::before {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent 0%, rgba(176,144,88,0.30) 50%, transparent 100%);
 }
 .sn-news {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 48px;
 align-items: center;
 padding: 40px 40px;
 background:
 radial-gradient(circle at 100% 0%, rgba(176,144,88,0.10) 0%, transparent 55%),
 linear-gradient(135deg, rgba(176,144,88,0.05) 0%, rgba(176,144,88,0.02) 100%),
 rgba(255,255,255,0.015);
 border: 1px solid rgba(176,144,88,0.18);
 border-radius: 14px;
 margin-bottom: 40px;
 }
 .sn-news-copy { display: flex; flex-direction: column; gap: 6px; }
 .sn-news-tag {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: var(--fs-mini);
 color: var(--brass-400);
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 }
 .sn-news-h {
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: 24px;
 color: #fff;
 margin: 4px 0 0;
 letter-spacing: -0.01em;
 line-height: 1.2;
 }
 .sn-news-p {
 font-family: var(--font-body);
 font-size: 14px;
 color: var(--fg-on-dark-2);
 line-height: 22px;
 margin: 6px 0 0;
 max-width: 480px;
 }
 .sn-news-trust {
 list-style: none;
 margin: 14px 0 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 }
 .sn-news-trust li {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--fg-on-dark-3);
 letter-spacing: 0.02em;
 }
 .sn-news-tick {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 14px; height: 14px;
 border-radius: 50%;
 background: rgba(176, 144, 88, 0.18);
 color: var(--brass-400);
 font-size: 9px;
 font-weight: 700;
 line-height: 1;
 }
 .sn-news-form { display: flex; gap: 8px; }
 .sn-news-input {
 flex: 1;
 background: #fff;
 border: 0;
 border-radius: 8px;
 padding: 16px 18px;
 font-family: var(--font-body);
 font-size: 15px;
 color: var(--fg-on-light-1);
 transition: outline 220ms;
 }
 .sn-news-input::placeholder { color: var(--fg-on-light-3); }
 .sn-news-input:focus { outline: 2px solid var(--brass-500); outline-offset: 1px; }
 .sn-news-submit {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 16px 22px;
 background: var(--brass-500);
 border: 0;
 border-radius: 8px;
 font-family: var(--font-heading);
 font-weight: 600;
 font-size: 14px;
 color: #fff;
 cursor: pointer;
 transition: background 220ms;
 white-space: nowrap;
 }
 .sn-news-submit svg { width: 11px; height: 11px; transition: transform 220ms; }
 .sn-news-submit:hover { background: var(--brass-400); }
 .sn-news-submit:hover svg { transform: translateX(3px); }

 /* Legal bottom bar */
 .sn-footer-legal {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 28px;
 padding-bottom: 28px;
 border-top: 1px solid rgba(255,255,255,0.08);
 }
 .sn-footer-copy {
 font-family: var(--font-body);
 font-size: 13px;
 color: var(--fg-on-dark-3);
 }
 .sn-footer-legal-links { display: flex; gap: 24px; }
 .sn-footer-legal-links a {
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--fg-on-dark-3);
 text-decoration: none;
 letter-spacing: 0.04em;
 transition: color 220ms;
 }
 .sn-footer-legal-links a:hover { color: var(--brass-400); }

 /* ─── Responsive ────────────────────────────────────── */
 /* ─── Mobile hamburger ──────────────────────────────── */
 .sn-hamburger {
 display: none;
 background: none; border: none; cursor: pointer;
 padding: 8px;
 color: var(--bone-50);
 }
 .sn-hamburger svg { width: 24px; height: 24px; display: block; }

 @media (max-width: 880px) {
 .sn-hamburger { display: flex; align-items: center; margin-left: auto; }
 .sn-nav {
 display: none;
 position: absolute;
 top: 100%; left: 0; right: 0;
 background: var(--ink-900);
 border-top: 1px solid rgba(255,255,255,0.08);
 flex-direction: column;
 padding: 16px 24px 24px;
 gap: 4px;
 z-index: 20;
 box-shadow: 0 16px 48px rgba(0,0,0,0.4);
 }
 .sn-nav.is-mobile-open { display: flex; }
 .sn-nav-link,
 .sn-nav-link-accent {
 display: block;
 padding: 14px 16px;
 font-size: 15px;
 border-radius: var(--radius-tight);
 }
 .sn-nav-link:hover,
 .sn-nav-link-accent:hover { background: rgba(255,255,255,0.06); }
 .sn-nav-item-mega { width: 100%; }
 .sn-nav-item-mega .sn-mega { position: static; }
 .sn-nav-cta {
 margin: 8px 0 0;
 width: 100%;
 justify-content: center;
 padding: 14px 20px;
 }
 .sn-hero { min-height: auto; padding: 120px 0 60px; }
 .sn-hero-copy { flex: 1; max-width: 100%; padding-left: 0; }
 .sn-hero-inner { flex-direction: column; gap: 32px; }
 .sn-products-grid { grid-template-columns: repeat(3, 1fr); }
 .sn-tech-grid { grid-template-columns: repeat(2, 1fr); }
 .sn-contact-layout { grid-template-columns: 1fr; }
 .sn-contact-side-r { text-align: left; }
 .sn-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
 .sn-footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
 .sn-news { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
 }
 @media (max-width: 720px) {
 .sn-products-grid { grid-template-columns: repeat(2, 1fr); }
 .sn-tech-grid { grid-template-columns: 1fr; }
 .sn-form-row { grid-template-columns: 1fr; }
 .sn-trust-inner { grid-template-columns: 1fr; }
 .sn-footer-main { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
 .sn-news-form { flex-direction: column; }
 .sn-news-submit { width: 100%; justify-content: center; }
 .sn-footer-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
 .sn-hero {
 background:
 linear-gradient(180deg, rgba(21,21,19,0.55) 0%, rgba(21,21,19,0.92) 65%, var(--ink-900) 100%),
 url("../../assets/imagery/Kubki-ceramiczne-nadruki.jpg") center center / cover no-repeat,
 var(--ink-900);
 min-height: 600px;
 }
 .sn-hero-copy { flex: 0 0 100%; max-width: 100%; }
 .sn-hero-inner { padding: 120px 24px 80px; }
 }