@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
/* ================================================================
   LuxBudDesign — shared.css
   Wspólne style: zmienne, base, nav, footer, utilities, kategorie
================================================================ */

/* ── VARIABLES ── */
:root {
  --black:  #080808;
  --white:  #ffffff;
  --off:    #f7f6f3;
  --gold:   #b89a6a;
  /* złoto do TEKSTU na jasnym tle — 5,0:1 na bieli, 4,6:1 na kremie (było #9a7e52 = 3,8/3,6, poniżej normy) */
  --gold-d: #866b42;
  /* złoto do KURSYWY w nagłówkach na jasnym tle — 3,13:1 (było #b89a6a = 2,67:1, poniżej progu 3,0 dla dużego tekstu) */
  --gold-head: #a58757;
  --gray: #454545;
  --nav-h:  80px;
  --ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { max-width: 100%; }
body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--black); overflow-x: clip; -webkit-text-size-adjust: 100%; }

/* ── IMAGES — globalne zabezpieczenia ── */
img { max-width: 100%; vertical-align: middle; }
img:not([class]) { height: auto; }
figure img, picture img { display: block; }
/* tło pod zdjęciami zanim się wczytają — bez białych "dziur" */
.cat-hero, .sub-cat-card, .related-card { background-color: #101010; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── CURSOR ── */
@media (hover: hover) and (pointer: fine) {
  .cursor { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: transform .15s, background .3s; }
  .cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(184,154,106,.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: left .35s var(--ease), top .35s var(--ease); }
}

/* ── NAV ── */
nav#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); padding: 0 72px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .5s var(--ease), border-color .5s;
}
nav#nav.scrolled {
  background: rgba(8,8,8,.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(184,154,106,.12);
}
.nav-logo { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; }
.nav-logo-main { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 300; letter-spacing: .4em; color: var(--white); line-height: 1; }
.nav-logo-main span { color: var(--gold); }
.nav-logo-sub { font-size: 7.5px; letter-spacing: .38em; color: rgba(255,255,255,.55); font-weight: 400; margin-top: 3px; text-transform: uppercase; }
.nav-links { display: flex; gap: 38px; list-style: none; align-items: center; }
.nav-links a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; transition: color .3s; position: relative; padding-bottom: 2px; min-height: 44px; display: flex; align-items: center; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .35s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { border: 1px solid rgba(184,154,106,.6) !important; color: var(--gold) !important; padding: 10px 26px !important; }
.nav-cta:hover { background: var(--gold) !important; color: var(--black) !important; }
.nav-cta::after { display: none !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 12px; margin-right: -12px; background: none; border: none; z-index: 1001; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: transform .35s var(--ease), opacity .25s; transform-origin: center; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile { display: flex; position: fixed; inset: 0; background: #080808; z-index: 999; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; list-style: none; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); padding: calc(var(--nav-h) + 28px) 24px 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav-mobile.open { opacity: 1; pointer-events: all; }
.nav-mobile li { transform: translateY(16px); opacity: 0; transition: transform .4s var(--ease), opacity .4s; }
.nav-mobile.open li { transform: none; opacity: 1; }
.nav-mobile.open li:nth-child(1) { transition-delay: .07s; }
.nav-mobile.open li:nth-child(2) { transition-delay: .13s; }
.nav-mobile.open li:nth-child(3) { transition-delay: .19s; }
.nav-mobile.open li:nth-child(4) { transition-delay: .25s; }
.nav-mobile.open li:nth-child(5) { transition-delay: .31s; }
.nav-mobile.open li:nth-child(6) { transition-delay: .37s; }
.nav-mobile.open li:nth-child(7) { transition-delay: .43s; }
.nav-mobile.open li:nth-child(8) { transition-delay: .49s; }
.nav-mobile.open li:nth-child(9) { transition-delay: .55s; }
.nav-mobile.open li:nth-child(10) { transition-delay: .61s; }
.nav-mobile a { color: var(--white); text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: clamp(21px, 5.4vw, 27px); font-weight: 300; letter-spacing: .08em; display: block; padding: 10px 32px; text-align: center; transition: color .25s; }
.nav-mobile a:hover { color: var(--gold); }
.nav-mobile .nav-cta-mob { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .28em; border: 1px solid var(--gold); color: var(--gold) !important; padding: 14px 36px !important; margin-top: 12px; }

/* ── FOOTER ── */
footer { background: #050505; padding: 70px 72px 40px; border-top: 1px solid rgba(255,255,255,.03); }
.ft-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 64px; margin-bottom: 64px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ft-logo { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; letter-spacing: .38em; margin-bottom: 20px; color: var(--white); }
.ft-logo span { color: var(--gold); }
.ft-about { font-size: 12.5px; color: rgba(255,255,255,.8); line-height: 1.6; font-weight: 300; max-width: 280px; }
.ft-social { display: flex; gap: 10px; margin-top: 32px; }
.ft-s { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); text-decoration: none; font-size: 11px; font-weight: 600; transition: all .3s; }
.ft-s:hover { border-color: var(--gold); color: var(--gold); }
.ft-col h4 { font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.ft-col ul { list-style: none; }
.ft-col ul li { margin-bottom: 12px; }
.ft-col ul li a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 12px; font-weight: 300; transition: color .3s; display: inline-block; padding: 2px 0; }
.ft-col ul li a:hover { color: var(--gold); }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 12px; font-size: 11px; color: rgba(255,255,255,.68); }
.ft-bottom a { color: var(--gold); text-decoration: none; }

/* ── TYPOGRAPHY UTILITIES ── */
.sec-tag { font-size: 9px; letter-spacing: .48em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; }
.sec-tag.dark { color: var(--gold-d); }
.sec-h { font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 4.2vw, 64px); font-weight: 300; line-height: 1.05; margin-bottom: 24px; }
.sec-h em { font-style: italic; color: var(--gold-head); }
.sec-p { font-size: 13.5px; font-weight: 300; color: var(--gray); line-height: 1.6; }
.sec-p.white { color: rgba(255,255,255,.88); }

/* ── BUTTONS ── */
.btn-gold { background: var(--gold); color: var(--black); border: none; padding: 16px 42px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all .35s var(--ease); display: inline-flex; align-items: center; min-height: 52px; }
.btn-gold:hover { background: var(--white); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.btn-ghost { border: 1px solid rgba(255,255,255,.45); color: var(--white); padding: 16px 42px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all .35s var(--ease); display: inline-flex; align-items: center; min-height: 52px; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.btn-black { background: var(--black); color: var(--white); padding: 16px 42px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all .35s var(--ease); display: inline-flex; align-items: center; border: none; min-height: 52px; }
.btn-black:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }
.btn-outline-dark { border: 1px solid rgba(0,0,0,.2); color: var(--black); padding: 14px 38px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all .35s var(--ease); display: inline-flex; align-items: center; min-height: 48px; }
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold-d); transform: translateY(-2px); }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.on { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════
   CATEGORY PAGES — shared layout styles
══════════════════════════════════════════ */

/* HERO */
.cat-hero {
  position: relative;
  min-height: 540px;
  padding-top: calc(var(--nav-h) + 28px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cat-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,.94) 0%, rgba(8,8,8,.42) 55%, rgba(8,8,8,.6) 100%);
}
.cat-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1400px;
  margin: 0 auto;
  padding: 0 72px 72px;
}

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.78); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { opacity: .4; }

/* Hero text */
.cat-hero-title, .cat-hero-sub, .cat-hero-tag, .breadcrumb { text-shadow: 0 1px 14px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5); }
.cat-hero-tag { font-size: 9px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; }
.cat-hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 6.5vw, 92px); font-weight: 300; color: var(--white); line-height: .95; }
.cat-hero-title em { font-style: italic; color: var(--gold); }
.cat-hero-sub { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.88); font-weight: 300; max-width: 560px; line-height: 1.6; }

/* SUBCATEGORY GRID SECTION */
.cat-section { background: var(--off); padding: 100px 72px; }
.cat-section.white { background: var(--white); }
.cat-section.dark { background: var(--black); }
.cat-section-header { margin-bottom: 60px; }
.cat-section-header .sec-p { max-width: 580px; margin-top: 12px; }

/* Sub-cat cards grid */
.sub-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.sub-cat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.sub-cat-card {
  position: relative; overflow: hidden; height: 460px;
  cursor: pointer; text-decoration: none; display: block;
  background: var(--black);
}
.sub-cat-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.86) saturate(.95) contrast(1.04);
  transition: transform .85s var(--ease), filter .6s;
}
.sub-cat-card:hover .sub-cat-img { transform: scale(1.07); filter: brightness(.55) saturate(.88); }
.sub-cat-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.04) 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px 40px;
}
.sub-cat-num { font-family: 'Cormorant Garamond', serif; font-size: 12px; color: var(--gold); letter-spacing: .38em; margin-bottom: 10px; opacity: .6; }
.sub-cat-name { font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 300; color: var(--white); line-height: 1.1; transition: margin-bottom .4s var(--ease); }
.sub-cat-card:hover .sub-cat-name { margin-bottom: 14px; }
.sub-cat-brand { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: 6px; opacity: .8; display: block; }
.sub-cat-desc {
  font-size: 12px; color: rgba(255,255,255,.88); line-height: 1.75;
  font-weight: 300; max-width: 300px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.sub-cat-card:hover .sub-cat-desc { opacity: 1; transform: translateY(0); }
.sub-cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  margin-top: 20px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s .08s var(--ease), transform .4s .08s var(--ease);
}
.sub-cat-card:hover .sub-cat-link { opacity: 1; transform: translateY(0); }
.sub-cat-arrow { display: inline-block; transition: transform .3s; }
.sub-cat-card:hover .sub-cat-arrow { transform: translateX(6px); }

/* CTA STRIP */
.cat-cta {
  background: var(--black); padding: 80px 72px;
  display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center;
}
.cat-cta.gold { background: var(--gold); }
.cat-cta-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 3.5vw, 52px); font-weight: 300; color: var(--white); line-height: 1.05; margin-bottom: 12px; }
.cat-cta.gold .cat-cta-title { color: var(--black); }
.cat-cta-sub { font-size: 13px; color: rgba(255,255,255,.86); font-weight: 300; max-width: 480px; line-height: 1.6; }
.cat-cta.gold .cat-cta-sub { color: rgba(0,0,0,.55); }
.cat-cta-btns { display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }

/* RELATED CATEGORIES */
.related-section { background: var(--white); padding: 80px 72px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 48px; }
.related-card {
  position: relative; overflow: hidden; height: 260px;
  cursor: pointer; text-decoration: none; display: block;
}
.related-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82) saturate(.92) contrast(1.04); transition: transform .7s var(--ease), filter .5s; }
.related-card:hover .related-img { transform: scale(1.08); filter: brightness(.55); }
.related-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.05) 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 28px;
}
.related-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--white); line-height: 1.15; }
.related-arrow { font-size: 12px; color: var(--gold); margin-top: 6px; display: block; transition: transform .3s; }
.related-card:hover .related-arrow { transform: translateX(5px); }

/* ══════════════════════════════════════════
   SKLEPOWE KAFELKI PRODUKTOWE (kategorie + podobne)
══════════════════════════════════════════ */
.shop-section { background: var(--off); padding: 88px 72px; }
.shop-section .cat-section-header { margin-bottom: 48px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.p-card { background: var(--white); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .35s var(--ease), transform .35s var(--ease); position: relative; overflow: hidden; }
.p-card:hover { box-shadow: 0 18px 48px rgba(0,0,0,.12); transform: translateY(-4px); }
.p-card-imgwrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f2f1ee; }
.p-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.p-card:hover .p-card-img { transform: scale(1.05); }
.p-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--black); font-size: 8.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; z-index: 2; }
.p-badge.dark { background: var(--black); color: var(--white); }
.p-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.p-brand { font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 7px; }
.p-name { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: var(--black); line-height: 1.2; margin-bottom: 8px; }
.p-desc { font-size: 11.5px; color: var(--gray); font-weight: 300; line-height: 1.7; margin-bottom: 16px; flex: 1; }
.p-cta { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--black); color: var(--black); padding: 12px 16px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; transition: all .3s; margin-top: auto; }
.p-card:hover .p-cta { background: var(--black); color: var(--white); }
.p-cta-arrow { transition: transform .3s; }
.p-card:hover .p-cta-arrow { transform: translateX(4px); }

@media (max-width: 1100px) {
  .shop-section { padding: 64px 36px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
}
@media (max-width: 640px) {
  .shop-section { padding: 48px 24px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-card-body { padding: 14px 14px 16px; }
  .p-name { font-size: 17px; }
  .p-desc { display: none; }
  .p-cta { padding: 10px 8px; font-size: 8.5px; letter-spacing: .14em; }
}

/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {
  nav#nav { padding: 0 36px; background: rgba(8,8,8,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(184,154,106,.1); }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  footer { padding: 56px 36px 32px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .cat-hero { min-height: 460px; }
  .cat-hero-inner { padding: 0 36px 56px; }
  .cat-section { padding: 72px 36px; }
  .sub-cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-cta { grid-template-columns: 1fr; gap: 36px; padding: 64px 36px; }
  .related-section { padding: 64px 36px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .cat-hero::before { background: linear-gradient(to top, rgba(8,8,8,.96) 0%, rgba(8,8,8,.55) 55%, rgba(8,8,8,.7) 100%); }
  nav#nav { padding: 0 24px; }
  .nav-logo-sub { display: none; }

  footer { padding: 48px 24px 28px; }
  .ft-grid { grid-template-columns: 1fr; gap: 36px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .cat-hero { min-height: 400px; }
  .cat-hero-inner { padding: 0 24px 44px; }
  .cat-hero-title { font-size: 44px; }
  .cat-section { padding: 56px 24px; }
  .sub-cat-grid, .sub-cat-grid.cols-2 { grid-template-columns: 1fr; }
  .sub-cat-card { height: 360px; }
  .cat-cta { padding: 56px 24px; }
  .cat-cta-btns { flex-direction: column; width: 100%; }
  .cat-cta-btns .btn-gold, .cat-cta-btns .btn-ghost, .cat-cta-btns .btn-black { width: 100%; justify-content: center; }
  .related-section { padding: 56px 24px; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 3px; }
  .related-card { height: 180px; }
}

/* ══ OPINIE / DOWÓD SPOŁECZNY ══ */
.opinie-section { background: var(--white); padding: 100px 72px; }
.opinie-rating { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.opinie-stars { color: var(--gold-d); font-size: 16px; letter-spacing: 3px; }
.opinie-rating-txt { font-size: 12px; color: var(--gray); font-weight: 300; }
.opinie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.opinia { background: var(--off); padding: 36px 32px; display: flex; flex-direction: column; }
.opinia-stars { color: var(--gold-d); font-size: 13px; letter-spacing: 2px; margin-bottom: 16px; }
.opinia-txt { font-size: 13px; color: var(--black); font-weight: 300; line-height: 1.6; flex: 1; }
.opinia-txt::before { content: '\201E'; font-family: 'Cormorant Garamond', serif; font-size: 36px; color: var(--gold); display: block; line-height: .4; margin-bottom: 10px; }
.opinia-autor { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.opinia-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--black); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }
.opinia-name { font-size: 12.5px; font-weight: 500; color: var(--black); }
.opinia-meta { font-size: 10.5px; color: var(--gray); font-weight: 300; margin-top: 2px; }
.opinie-cta-row { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1100px) { .opinie-section { padding: 72px 36px; } .opinie-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 640px) { .opinie-section { padding: 56px 24px; } }

/* ══ MOBILE UX ══ */
@media (max-width: 640px) {
  /* iOS nie przybliża formularzy */
  input, select, textarea { font-size: 16px !important; }
  /* wygodne tap targety */
  .btn-gold, .btn-ghost, .btn-black, .btn-outline-dark { width: 100%; justify-content: center; }
  .sec-h { word-break: break-word; }
  a, button { -webkit-tap-highlight-color: rgba(184,154,106,.2); }
  /* długie adresy email/URL nie rozpychają układu */
  .ft-col ul li a, .c-row-val, .aside-contact-val { word-break: break-word; }
  /* breadcrumb nie zawija się brzydko */
  .breadcrumb { flex-wrap: wrap; row-gap: 4px; }
}
/* nic nie może wystawać poza ekran */
section, footer, div { min-width: 0; }
iframe, video, embed { max-width: 100%; }

/* ══ BREADCRUMB GUARD — breadcrumb nigdy nie jest paskiem nawigacji ══ */
nav.breadcrumb, .breadcrumb {
  position: static !important; height: auto !important;
  padding: 0 !important; background: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important; justify-content: flex-start !important;
  z-index: auto !important;
}


/* ══════════════════════════════════════════════════════════════
   WARIANT B (VIAM 2026-07-30) — kontener 1080 px + czytelniejsza typografia.
   Dopisane na koncu pliku, wiec wygrywa nad regulami wyzej.
   Nawigacja (.nav-logo-sub, .nav-links a) CELOWO nietknieta.
   ══════════════════════════════════════════════════════════════ */

/* tlo sekcji na cala szerokosc, tresc w kontenerze 1080 px */
/* Kontener 1080 px realizowany PADDINGIEM sekcji — tlo zostaje pelnoekranowe.
   (Blanketowe "section > * { max-width }" psulo hero na stronie glownej.) */
.cat-section, .related-section, .ww-zakres, .ww-why, .ww-proces,
.pw-zakres, .pw-why, .pw-proces, .shop-section, .opinie-section {
  padding-left: max(40px, (100% - 1080px) / 2);
  padding-right: max(40px, (100% - 1080px) / 2);
}
.cat-hero-inner { max-width: 1080px; }
.sec-p, .cat-hero-sub, .cat-cta-sub { max-width: 64ch; line-height: 1.6; }

/* przyciski — czytelny napis zamiast rozstrzelonych kapitalikow */
.btn-black, .btn-gold, .btn-ghost, .btn-outline-dark {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .02em; text-transform: none; border-radius: 8px; padding: 16px 30px;
}

/* podniesione rozmiary tekstu */
  .breadcrumb { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
  .btn-black { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
  .btn-ghost { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
  .btn-gold { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
  .btn-outline-dark { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
  .cat-cta-sub { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400; }
  .cat-hero-sub { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400; }
  .cat-hero-tag { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
  .ft-about { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .ft-bottom { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
  .ft-col h4 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .ft-col ul li a { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .ft-s { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
  .opinia-meta { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
  .opinia-name { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .opinia-stars { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .opinia-txt { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .opinie-rating-txt { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .p-badge { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .p-brand { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .p-cta { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .p-desc { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
  .related-arrow { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .sec-p { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .sec-tag { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
  .sub-cat-brand { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .sub-cat-desc { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }
  .sub-cat-link { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
  .sub-cat-num { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; }


/* ══════════════════════════════════════════════════════════════
   POPRAWKI UI/UX — MOBILE (2026-09-02)
   Przegląd na telefonie: cyfry, dotyk, treść bez hovera.
══════════════════════════════════════════════════════════════ */

/* 1. CYFRY. Cormorant Garamond domyślnie daje cyfry "starego stylu",
      w których 1 wygląda jak litera I — "01" czytało się jako "0I".
      Wymuszamy cyfry nowoczesne (równej wysokości). */
h1, h2, h3, h4, h5, h6,
.cat-hero-title, .sec-h, .nav-logo-main, .sub-cat-name, .related-name,
.p-name, .cat-cta-title, .opinia-txt::before, .oc-founder-quote,
.hero-counter, .hero-counter b, .oferty-num, .proc-step-num,
.fact b, .oc-stats b, .event-count-num, .sub-cat-num, .nav-mobile a {
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* 2. DOTYK. Na ekranie dotykowym nie ma najechania kursorem — treść
      chowana "na hover" byłaby niewidoczna. Pokazujemy ją od razu. */
@media (hover: none) {
  .sub-cat-desc, .sub-cat-link, .p-desc, .p-cta, .related-arrow {
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
  }
}

/* 3. PALEC. Minimalne pole dotyku 44 px dla linków w gęstych listach. */
@media (max-width: 860px) {
  .ft-col ul li a,
  .breadcrumb a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
  .ft-col ul li { margin-bottom: 0; }
  .ft-s { width: 44px; height: 44px; }
}

/* 4. Krok procesu po najechaniu robi się czarny — złoto tekstowe jest
      wtedy za ciemne, więc wracamy do złota jasnego. */
.proc-step:hover .proc-step-num,
.proc-step:hover .proc-step-out b,
.proc-step:hover .process-note span { color: var(--gold); }

/* 5. MENU MOBILNE — kategorie produktowe bez wychodzenia z menu.
      Wcześniej całe drzewo (Łazienka, Drzwi, Kuchnia…) chowało się
      za jedną pozycją „Materiały”, dostępną tylko przez osobną stronę. */
.nav-mobile .nm-group { width: 100%; }
.nav-mobile .nm-det { width: 100%; text-align: center; }
.nav-mobile .nm-det > summary {
  list-style: none; cursor: pointer;
  color: var(--white); font-family: 'Cormorant Garamond', serif;
  font-size: clamp(21px, 5.4vw, 27px); font-weight: 300; letter-spacing: .08em;
  padding: 10px 32px; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.nav-mobile .nm-det > summary::-webkit-details-marker { display: none; }
.nav-mobile .nm-det > summary::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease);
}
.nav-mobile .nm-det[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.nav-mobile .nm-sub {
  display: grid; gap: 2px; margin: 4px auto 12px; max-width: 330px; padding: 10px 0;
  border-top: 1px solid rgba(184,154,106,.3); border-bottom: 1px solid rgba(184,154,106,.3);
}
.nav-mobile .nm-sub a {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .01em;
  color: rgba(255,255,255,.88); padding: 12px 16px; min-height: 44px; display: flex;
  align-items: center; justify-content: center;
}
.nav-mobile .nm-sub a.nm-all { color: var(--gold); font-weight: 600; }

/* 6. Plakietka reCAPTCHA: tylko ponad dolny pasek CTA. Wcześniej stała na 120 px,
      żeby ominąć pigułkę rat — ale odkąd pigułka sama znika nad formularzem,
      te 120 px wypychało plakietkę na środek pola „Opis projektu". */
@media (max-width: 860px) {
  .grecaptcha-badge { bottom: 56px !important; }
}

/* 7. Pole dotyku dla przycisku menu i logo w pasku (były 39 px i 30 px). */
@media (max-width: 1100px) {
  .hamburger { min-height: 44px; min-width: 44px; display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 6px; }
  .nav-logo  { min-height: 44px; display: flex; align-items: center; }
}


/* ══════════════════════════════════════════════════════════════
   SKALA TYPOGRAFICZNA — TELEFON  (2026-09-02)

   Po co: na desktopie hierarchia jest zdrowa — H1 63–100 px, H2 42–60 px.
   Na telefonie dolne granice clamp() zbijają H1 do 38–52 px, a H2 stoi
   na 38 px, więc na stronie głównej, /kontakt i /okapy-kuchenne H2 wychodził
   RÓWNY albo WIĘKSZY od H1. Oko nie miało się o co zaczepić, a badania mówią,
   że klient najpierw skanuje nagłówki.

   Dlatego skala obowiązuje TYLKO do 860 px — desktop zostaje nietknięty.

   Dlaczego `!important`: reguły na podstronach są klasowe (.mc-hero-title,
   .sec-h), a to selektory elementów. Bez tego nie miałyby szans w kaskadzie.
══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* `h1[class]` (0,1,1) zamiast samego `h1` (0,0,1): na /kategorie nagłówek to
     <h1 class="sec-h">, a reguła klasowa .sec-h (0,1,0) wygrywała z selektorem
     elementu i robiła z H1 trzydziestkę. Atrybut podnosi wagę ponad każdą klasę. */
  h1, h1[class], .hero-title, .cat-hero-title, .page-hero-title {
    font-size: 44px !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
    letter-spacing: -.01em !important;
  }
  h2, h2[class], .sec-h, .cat-cta-title, .event-title, .brand-ttl {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
  }
  h3, h3[class] {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
  }
  /* Nagłówek w oknie wydarzenia ma własną, mniejszą ramę — nie zgniatamy go. */
  #lbPop h3 { font-size: 24px !important; line-height: 1.1 !important; }
}


/* ══════════════════════════════════════════════════════════════
   DROBNE ETYKIETY I PODPISY  (2026-09-02, domknięcie skali)

   Pomiar na 34 stronach: 45 klas renderowało się poniżej 11 px — najwięcej
   `.card-tag` (132×), `.oferty-tag` (36×), `.dz-chip` (35×), `.ak-card-cat` (27×).
   Najmniejsze miały 7,5–8,5 px, czyli mniej niż połowę tekstu obok.
   To są nazwy klas z pojedynczych podstron, więc blok globalny musi je
   wymienić po nazwie — i użyć `!important`, bo arkusz strony ładuje się
   PO shared.css i przy równej wadze wygrywałby ostatni.

   Dwie role, rozpoznane po wersalikach i rozstrzeleniu:
     • etykieta → 12 px / .14em / waga 600  (spójne z .sec-tag)
     • podpis   → 13 px / .02em / waga 400
══════════════════════════════════════════════════════════════ */
.brands-lbl, .c-row-lbl, .det-lbl, .event-kicker, .form-tag, .hero-eyebrow,
.hero-fact, .oc-founder-role, .port-cat, .raty-badge, .ak-card-cat, .ak-card-meta,
.ak-feat-cat, .ak-feat-date, .ak-filter-btn, .ak-hero-tag, .ar-badge, .ar-chip,
.campaign-pill, .card-tag, .dz-contact-lbl, .dz-kat-brand, .dz-kat-btn, .dz-kat-tag,
.dz-marka-tag, .dz-pak-badge, .dz-pak-tag, .form-label, .homes-gal-tag, .klk-podsum-lbl,
.lz-contact-lbl, .lz-item-brand, .mega-label, .oferty-tag {
  font-size: 12px !important;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.event-chip, .proc-step-time, .ar-note, .dz-chip {
  font-size: 13px !important;
  letter-spacing: .02em !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
/* Główne przyciski wysyłki idą za skalą przycisków, nie etykiet. */
.f-submit, .ar-submit, .ak-nl-btn {
  font-size: 14px !important;
  letter-spacing: .02em !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
/* Ciasne miejsca — tyle, ile się mieści bez rozpychania kafelka. */
.event-count-lbl { font-size: 10.5px !important; letter-spacing: .1em !important; font-weight: 600 !important; }
#lbEvent .lbe-days { font-size: 11px !important; letter-spacing: .02em !important; }

/* Mikro-etykiety BEZ własnej klasy — stylowane przez rodzica, więc warstwa
   wyżej ich nie dosięgała. Wszystkie to wersalikowe „nadtytuły” 8,5–9,5 px
   w powtarzalnych układach (rodziny .mc-, .lz-, .es-, .pv-… stąd selektory
   po końcówce klasy rodzica, z flagą `i` bo bywa `-Centrum-` i `-centrum-`). */
.fact > span,
.oc-stats div > span,
.proc-step-out > b,
.process-note > span,
.f-group > label,
.contact-info-col > div:not([class]),
[class$="-centrum-content" i] > span:not([class]),
[class$="-faq-cta" i] > span:not([class]),
[class$="-galeria-hdr" i] > span:not([class]),
[class$="-kolory" i] > span:not([class]),
[class$="-kolory" i] > .reveal > span:not([class]) {
  font-size: 12px !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ══════════════════════════════════════════════════════════════
   KONTRAST ZŁOTA — domknięcie (2026-09-02)

   Warstwa etykiet podniosła ROZMIAR, ale kolor został jasnozłoty `--gold`
   (#b89a6a = 2,47–2,67:1 na jasnym tle, przy wymaganych 4,5:1), bo strony
   ustawiają go u siebie. Klasy poniżej zmierzone jako leżące na JASNYM tle
   — dostają złoto tekstowe. Pozostałe 37 klas ze złotem stoi na ciemnym,
   gdzie #b89a6a ma 7,5:1 i zostaje bez zmian.
══════════════════════════════════════════════════════════════ */
.faq-toggle, .ak-card-cat, .req, .on-marka-cat, .dz-krok-num, .mc-contact-lbl,
.sec-tag, .ic-label, .on-sf-icon, .on-contact-lbl, .mc-katalog-icon, .mc-katalog-type,
.mc-blog-cat, .on-hprop-num, .event-count-num, .mc-oferta-num, .mc-hero-brand,
.page-hero-tag, .aside-label, .lz-contact-lbl, .dz-contact-lbl {
  color: var(--gold-d) !important;
}

/* Kursywa w nagłówkach — #a58757 działa na OBU tłach: 3,39:1 na bieli
   i 5,92:1 na czerni, przy progu 3,0 dla dużego tekstu. */
h1 em, h2 em, h3 em, .sec-h em, [class$="-title"] em, [class$="-hero-title"] em {
  color: var(--gold-head) !important;
}

/* WYJĄTEK. `.sec-tag` występuje i na jasnym, i na ciemnym tle (mylące: modyfikator
   `.dark` oznacza „ciemny TEKST", czyli wersję na jasne tło). Blanketowa zmiana
   koloru wyżej zepsuła wariant na ciemnym: #866b42 daje tam 4,00:1 zamiast 7,50:1.
   W ciemnych sekcjach wracamy do jasnego złota. */
[class*="dark"] .sec-tag:not(.dark),
[class*="ciemn"] .sec-tag:not(.dark),
section[style*="var(--black)"] .sec-tag:not(.dark) { color: var(--gold) !important; }

/* Link w zgodzie RODO stoi na jasnym tle — jasne złoto dawało 2,67:1. */
label a[href*="polityka-prywatnosci"] { color: var(--gold-d) !important; }