/* ============================================================
   MODERNIZACJA WIZUALNA — Cukiernia Jarzębscy
   Warstwa nadpisująca (ładowana jako ostatnia). Nie zmienia treści.
   Styl: rzemieślnicza patiseria — kremowo, espresso, złoto, klimatycznie.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream:#FAF5EC;
  --cream-2:#F4EADB;
  --cream-3:#EADBC4;
  --espresso:#2B1B10;
  --cocoa:#4A3525;
  --cocoa-soft:#6B5240;
  --gold:#B08D57;
  --gold-deep:#977537;
  --rose:#C98E80;
  --line:rgba(43,27,16,.12);
  --shadow-sm:0 4px 18px -8px rgba(43,27,16,.28);
  --shadow-md:0 18px 50px -22px rgba(43,27,16,.45);
  --shadow-lg:0 30px 80px -30px rgba(43,27,16,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;}
body{
  background:var(--cream)!important;
  color:var(--cocoa)!important;
  font-family:'Jost',sans-serif!important;
  font-weight:400!important;
  font-size:17px;
  line-height:1.8;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
}
/* subtelna papierowa tekstura tła */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,141,87,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,142,128,.08), transparent 60%);
}

h1,h2,h3,h4,h5,.section-title,.effect-heading h2{
  font-family:'Cormorant Garamond',serif!important;
  color:var(--espresso)!important;
  font-weight:600!important;
  letter-spacing:.4px;
}
p{color:var(--cocoa-soft)!important;}
a{color:var(--gold-deep);transition:color .35s var(--ease);}
a:hover{color:var(--espresso);}

/* ---------- NAWIGACJA ---------- */
.header,
.wide .header,
.boxed .header>.container,
.wide .header>.container{
  background:transparent!important;
  background-color:transparent!important;
  height:auto!important;
}
.header{
  position:fixed!important;top:0;left:0;right:0;z-index:1000;
  padding:14px 0!important;
  background:rgba(250,245,236,.90)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 34px -26px rgba(43,27,16,.55);
  border-bottom:1px solid var(--line);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
.header.scrolled{
  background:rgba(250,245,236,.96)!important;
  box-shadow:0 12px 44px -26px rgba(43,27,16,.6);
  padding:7px 0!important;
}
/* logo jest białe — nagłówek jest jasny, więc przebarwiamy je na espresso */
.header .logo img{
  filter:brightness(0) saturate(100%) invert(11%) sepia(38%) saturate(960%) hue-rotate(347deg) brightness(.95);
  transition:transform .45s var(--ease),max-height .45s var(--ease);
  max-height:130px;width:auto;
}
.header.scrolled .logo img{max-height:92px;}
/* slider zaczyna się pod fixed-navem? Nie — hero ma być pełnoekranowy z navem na wierzchu */

.navigation ul.sf-menu>li>a{
  font-family:'Jost',sans-serif!important;
  text-transform:uppercase;
  font-size:12.5px!important;
  font-weight:500!important;
  letter-spacing:1.6px;
  color:var(--espresso)!important;
  position:relative;
  padding-bottom:6px!important;
  transition:color .35s var(--ease);
}
.navigation ul.sf-menu>li>a::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:2px;background:var(--gold);transition:width .4s var(--ease);
}
.navigation ul.sf-menu>li:hover>a::after,
.navigation ul.sf-menu>li.current-menu-item>a::after{width:24px;}
.navigation ul.sf-menu>li:hover>a{color:var(--gold-deep)!important;}
/* podmenu */
.navigation ul.sf-menu ul.sub-menu{
  background:rgba(250,245,236,.98)!important;
  box-shadow:var(--shadow-md);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;padding:6px 0;
}
.navigation ul.sf-menu ul.sub-menu li a{
  color:var(--cocoa)!important;text-transform:none!important;letter-spacing:.4px!important;
  font-size:14px!important;text-shadow:none!important;padding:9px 20px!important;
}
.navigation ul.sf-menu ul.sub-menu li a:hover{background:var(--cream-3)!important;color:var(--espresso)!important;}

/* ---------- STRONY BEZ HERO (podstrony galerii) ---------- */
body.no-hero{padding-top:92px;}
body.no-hero .header{
  background:rgba(250,245,236,.95)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 40px -26px rgba(43,27,16,.5);
  border-bottom:1px solid var(--line);
}
body.no-hero .navigation ul.sf-menu>li>a{color:var(--espresso)!important;text-shadow:none;}
body.no-hero .navigation ul.sf-menu>li:hover>a{color:var(--gold-deep)!important;}
/* tytuł kategorii na podstronie — elegancki nagłówek nad galerią */
body.no-hero .vc_row:first-of-type{padding-top:40px!important;}

/* ---------- HERO / SLIDER ---------- */
/* slider miał sztywną szerokość (~1769px) i był dosunięty do lewej —
   wymuszamy pełną szerokość ekranu i kontrolowaną wysokość */
.metaslider,
.metaslider .flexslider,
.metaslider [id^="metaslider_container"],
.metaslider [id^="metaslider_"]{
  width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
}
.metaslider{position:relative;overflow:hidden;}
.metaslider .slides,
.metaslider .slides>li{width:100%!important;}
.metaslider .slides>li>img,
.metaslider .slides img{
  width:100%!important;height:64vh!important;min-height:440px;max-height:760px;
  object-fit:cover!important;object-position:center 55%!important;
  filter:saturate(1.05) contrast(1.02);
}
/* wycentruj wpis slidera, gdyby został inline-block w <p> */
.wpb_text_column p:has(>.metaslider){text-align:center;margin:0!important;}
/* delikatna winieta dla klimatu + czytelności navu */
.metaslider::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(180deg, rgba(20,12,7,.62) 0%, rgba(20,12,7,.12) 14%, rgba(43,27,16,0) 28%),
    linear-gradient(0deg, rgba(43,27,16,.30) 0%, rgba(43,27,16,0) 30%);
}
.flex-control-nav{z-index:6;bottom:24px!important;}
.flex-control-paging li a{
  background:rgba(255,255,255,.5)!important;box-shadow:0 0 0 1px rgba(43,27,16,.15)!important;
  width:11px!important;height:11px!important;transition:all .35s var(--ease);
}
.flex-control-paging li a.flex-active{background:var(--gold)!important;transform:scale(1.15);}
.flex-direction-nav a{text-shadow:0 2px 8px rgba(0,0,0,.4)!important;}

/* ---------- SEKCJE (O nas / Oferta / Kontakt) ---------- */
.vc_row[id]{padding:96px 0!important;position:relative;}
#o-nas{background:var(--cream)!important;}
#oferta{background:linear-gradient(180deg,var(--cream-2),var(--cream))!important;}
#kontakt{background:var(--cream)!important;}
/* graficzne tytuły sekcji (PNG) — oddech + ozdobnik */
.wpb_single_image.vc_align_center .vc_single_image-wrapper{border:0!important;}
.wpb_single_image.vc_align_center img[src*="o-nas"],
.wpb_single_image.vc_align_center img[src*="oferta"],
.wpb_single_image.vc_align_center img[src*="kontakt"]{
  opacity:.9;margin-bottom:6px;
}
/* złoty ornament pod tytułem sekcji */
.vc_row[id] .wpb_single_image.vc_align_center{position:relative;text-align:center;margin-bottom:30px;}
.vc_row[id] .wpb_single_image.vc_align_center::after{
  content:"";display:block;width:64px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
/* treść „o nas" — wyśrodkowana, czytelna, elegancka */
#o-nas .wpb_text_column p{
  max-width:760px;margin:0 auto 1.1em!important;
  font-size:18.5px;line-height:1.95;color:var(--cocoa-soft)!important;
}
#o-nas .wpb_text_column p:first-of-type::first-letter{
  font-family:'Cormorant Garamond',serif;font-size:3.2em;line-height:.8;
  float:left;margin:.06em .12em 0 0;color:var(--gold-deep);font-weight:600;
}

/* ---------- KAFLE / GALERIA (marvelous-hover) ---------- */
.wpb_wrapper>a>figure.marvelous-hover,
figure.marvelous-hover{
  border-radius:14px!important;overflow:hidden!important;
  box-shadow:var(--shadow-sm);
  margin:0 0 26px!important;
  background:var(--cream-3);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)!important;
}
figure.marvelous-hover img{
  width:100%!important;height:100%!important;
  aspect-ratio:4/3;object-fit:cover!important;
  display:block;transition:transform 1.1s var(--ease),filter .6s var(--ease)!important;
}
.wpb_wrapper>a:hover>figure.marvelous-hover{
  transform:translateY(-6px);box-shadow:var(--shadow-md);
}
.wpb_wrapper>a:hover>figure.marvelous-hover img{transform:scale(1.07);}
/* zdejmij ciężką 50% czarną nakładkę pluginu (rest) — zdjęcia mają być jasne */
figure.marvelous-hover figcaption:before{
  background:transparent!important;opacity:0!important;visibility:hidden!important;
}
/* biała „pigułka" pod tytułem — usuń dla czystego wyglądu */
figure.marvelous-hover .effect-heading h2{background:transparent!important;padding:0!important;}
/* nakładka — delikatny espresso-gradient tylko u dołu, dla czytelności podpisu */
figure.marvelous-hover figcaption{
  background:linear-gradient(180deg,rgba(43,27,16,0) 22%,rgba(43,27,16,.45) 55%,rgba(20,12,7,.90) 100%)!important;
  opacity:1!important;transition:background .5s var(--ease)!important;
}
.wpb_wrapper>a:hover>figure.marvelous-hover figcaption{
  background:linear-gradient(180deg,rgba(43,27,16,.12) 0%,rgba(43,27,16,.55) 45%,rgba(20,12,7,.95) 100%)!important;
}
figure.marvelous-hover .effect-caption{
  display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;
  padding:22px 22px!important;text-align:left!important;
}
figure.marvelous-hover .effect-heading h2{
  color:#FFF7EA!important;font-style:italic;font-weight:600!important;
  font-size:25px!important;letter-spacing:.4px;margin:0!important;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 18px rgba(0,0,0,.7);
  transform:translateY(8px);opacity:.97;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.wpb_wrapper>a:hover>figure.marvelous-hover .effect-heading h2{transform:translateY(0);opacity:1;}
figure.marvelous-hover .effect-heading h2 span{display:none!important;}
/* złoty ozdobnik nad tytułem kafla */
figure.marvelous-hover .effect-heading h2::before{
  content:"";display:block;width:26px;height:2px;background:var(--gold);
  margin-bottom:10px;border-radius:2px;
  transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--ease);
}
.wpb_wrapper>a:hover>figure.marvelous-hover .effect-heading h2::before{transform:scaleX(1);}

/* odstępy w siatce galerii */
.vc_row .vc_col-sm-3,.vc_row .vc_col-sm-4,.vc_row .vc_col-sm-6{padding-left:13px!important;padding-right:13px!important;}

/* WYŚRODKOWANIE GALERII — niepełny ostatni wiersz domyka się symetrycznie.
   Wiersz z kaflami staje się wyśrodkowanym flexem zamiast pływających kolumn. */
.vc_row.vc_inner:has(figure.marvelous-hover){
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
  margin-left:auto!important;margin-right:auto!important;
}
.vc_row.vc_inner:has(figure.marvelous-hover)>.wpb_column{float:none!important;display:block;}
/* ukryj puste kolumny-placeholdery (bez zdjęcia) — żeby ostatni wiersz wyśrodkował się */
.vc_row.vc_inner:has(figure.marvelous-hover)>.wpb_column:not(:has(figure.marvelous-hover)){display:none!important;}
.vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-3{width:25%!important;}
.vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-4{width:33.3333%!important;}
.vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-6{width:50%!important;}
@media(max-width:991px){
  .vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-3{width:50%!important;}
}
@media(max-width:600px){
  .vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-3,
  .vc_row.vc_inner:has(figure.marvelous-hover)>.vc_col-sm-4{width:100%!important;}
}

/* MENU „Oferta" — schowaj nachodzącą strzałkę superfish, dodaj własny szewron */
.sf-arrows .sf-with-ul{padding-right:1.4em!important;}
.sf-arrows .sf-with-ul:after{display:none!important;}
.navigation ul.sf-menu>li.menu-item-has-children>a{padding-right:18px!important;}
.navigation ul.sf-menu>li.menu-item-has-children>a::before{
  content:"";position:absolute;right:2px;top:46%;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);opacity:.6;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.navigation ul.sf-menu>li.menu-item-has-children:hover>a::before{opacity:1;transform:translateY(-30%) rotate(45deg);}

/* ---------- KONTAKT ---------- */
#kontakt .wpb_text_column,#kontakt p{text-align:center;}
#kontakt p{font-size:18px;}

/* ---------- STOPKA ---------- */
.footer{
  background:var(--espresso)!important;color:var(--cream-2)!important;
  padding:54px 0 40px!important;margin-top:0!important;
  position:relative;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.footer,.footer *{color:var(--cream-2)!important;}
.footer a{color:var(--gold)!important;}
.footer a:hover{color:#fff!important;}
.footer .social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(176,141,87,.5);margin-bottom:18px;
  transition:all .4s var(--ease);
}
.footer .social-icon:hover{background:var(--gold);transform:translateY(-3px);}
.footer .social-icon:hover i{color:var(--espresso)!important;}

/* ---------- ANIMACJE WEJŚCIA ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media(max-width:991px){
  .header{background:rgba(250,245,236,.96)!important;backdrop-filter:blur(10px);}
  .navigation ul.sf-menu>li>a{color:var(--espresso)!important;text-shadow:none;}
  .vc_row[id]{padding:64px 0!important;}
  figure.marvelous-hover .effect-heading h2{font-size:21px!important;}
}
@media(max-width:600px){
  body{font-size:16px;}
  #o-nas .wpb_text_column p{font-size:17px;}
}