/*
Theme Name: zegarki-theme-final
Description: Katalog zegarków bez cen i kont. Górne menu (strony) obok logo. Sidebar tylko marki i modele.
Version: 1.2.1
Text Domain: zegarki
*/
:root{
  --bg:#0c0f14;          /* tło główne – ciemny grafit */
  --card:#141823;        /* karty/panele – nieco jaśniejsze od tła */
  --muted:#9aa3b2;       /* tekst wtórny */
  --text:#f2f6fc;        /* tekst główny */
  --accent:#d4b161;      /* złoty akcent (premium) */
  --border:#232a3b;      /* linie / obramowania */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(15,17,21,.7);backdrop-filter:blur(8px);z-index:50}
.header .logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.header img.logo-img{height:100px;width:auto;border-radius:8px}
.top-menu ul{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.layout{display:grid;grid-template-columns:  220px 1fr;gap: 8px}
.sidebar{border-right:1px solid var(--border);padding: 12px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto}
.sidebar h3{margin:16px 0 8px;font-size:14px;text-transform:uppercase;color:var(--muted)}
.sidebar .brand{margin-bottom:12px}
.sidebar details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding: 8px; margin-bottom: 6px;}
.sidebar summary{cursor:pointer;font-weight:600}
.sidebar ul{list-style:none;padding-left: 0;margin: 4px 0 0 0; margin-left: 4px;}
.sidebar li{margin:6px 0}
.main{padding: 16px 16px 40px;overflow:hidden;border:1px solid var(--border)}
/* Usuń podwójny padding wniesiony przez .container na stronach */
.layout .main .container.page-content{padding: 16px;}

.hero img{width:100%;height:auto;display:block}
.hero-text{margin-top:16px;font-size:16px;color:var(--text);line-height:1.6}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.filter{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 12px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card img{width:100%;height:210px;object-fit:cover;display:block}
.card .p{padding:12px 14px}
.card h4{margin:0 0 6px;font-size:16px}
.meta{font-size:12px;color:var(--muted)}
.footer{border-top:1px solid var(--border);color:var(--muted);padding:24px;text-align:center}
.notice{padding:12px 16px;border:1px dashed var(--border);border-radius:12px;background:rgba(96,165,250,.06);margin-bottom:16px}
@media (max-width:980px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto;top:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
/* Siatka kart: desktop 3, tablet 2, telefon 1 */
.grid.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .grid.cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid.cards-grid { grid-template-columns: 1fr; } }

/* Miniatury jako równe kwadraty */
.card-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f4f4;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Karta i tytuł */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.card-title {
  font-size: 1rem;
  line-height: 1.3;
  margin: 10px 12px 6px;
}
.meta {
  font-size: .9rem;
  color: #666;
  margin: 0 12px 14px;
}
.single-watch .watch-hero img{width:100%;height:auto;display:block;border-radius:12px;margin-bottom:18px}
.single-watch .watch-header{margin-bottom:18px}
.single-watch .watch-title{margin:0 0 6px;font-size:clamp(1.4rem,2vw,2rem)}
.single-watch .watch-meta{color:#666;font-size:.95rem}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1024px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards-grid{grid-template-columns:1fr}}
.card-thumb{aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:10px;background:#f4f4f4}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card{background:#fff;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card-title{font-size:1rem;line-height:1.3;margin:10px 12px 14px}
.related-watches{margin-top:40px}
.related-watches h2{margin:0 0 16px}
/* ===== HEADER: układ obok siebie od lewej (desktop) ===== */
.header{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* wszystko do lewej */
  gap: 8px;                   /* odstęp logo–menu */
  padding:12px 16px;
}

/* Logo: obrazek i (opcjonalnie) nazwa strony */
.header .logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;             /* nie rozciągaj logo */
}
.header .logo-img{
  max-height:48px;           /* dopasuj wg potrzeby (40–64px) */
  height:auto;
  width:auto;
  display:block;
}
.header .logo span{
  font-size:14px;
  color:#666;                /* możesz ukryć, jeśli niepotrzebne */
}

/* Menu górne: obok logo, bez lewych marginesów */
.top-menu{
  margin-left:0;
  flex:1 1 auto;             /* pozwól menu zajmować resztę szerokości */
  overflow:visible;
}
.top-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;              /* jedna linia */
  flex-wrap:wrap;            /* zawijaj, gdy brak miejsca */
  gap:18px;                  /* odstępy między linkami */
}
.top-menu li{ margin:0; }
.top-menu a{
  text-decoration:none;
  font-weight:500;
  line-height:1;
  display:inline-block;
  padding:8px 0;
}

/* Opcjonalnie: dopchnij header do szerokości layoutu (jeśli masz .container gdzie indziej) */
/*
.header{
  max-width:1200px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}
*/

/* ===== MOBILE: menu pod logo i wyrównane do lewej ===== */
@media (max-width: 768px){
  .header{
    flex-direction:column;    /* logo na górze, menu pod spodem */
    align-items:flex-start;   /* wszystko do lewej */
    gap:10px;
  }
  .top-menu{
    width:100%;
  }
  .top-menu ul{
    flex-direction:column;    /* pionowa lista (czytelniej) */
    gap:10px;
  }
  /* Jeśli nazwa obok logo przesuwa układ, możesz ją ukryć na mobile: */
  .header .logo span{
    display:none;
  }
}
/* LOGO – stała wysokość, brak ściskania przez flex */
.header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;           /* nie pozwól, by logo się ściskało */
}

/* Domyślna wysokość logo (desktop) */
.header .logo-img {
  height: 72px !important;  /* ustaw docelową wysokość logo */
  width: auto !important;   /* proporcje zachowane */
  max-width: none !important;
  max-height: none !important;
  display: block;
}

/* Na tablet/telefon – trochę mniejsze, żeby się ładnie mieściło */
@media (max-width: 1024px) {
  .header .logo-img { height: 64px !important; }
}
@media (max-width: 768px) {
  .header .logo-img { height: 56px !important; }
}
/* Desktop (komputery) */
.site-name {
  font-family: 'Cinzel', serif;
  font-size: 42px;          /* duży napis */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #B87333;           /* miedziany */
  line-height: 1.2;
}

/* Tablety (do 1024px) */
@media (max-width: 1024px) {
  .site-name {
    font-size: 34px;        /* trochę mniejszy */
  }
}

/* Telefony (do 768px) */
@media (max-width: 768px) {
  .site-name {
    font-size: 28px;        /* dopasowany, żeby nie nachodził na menu */
    letter-spacing: 1px;    /* mniejszy odstęp między literami */
  }
}

.site-name{
  font-family:'Cinzel', serif;
  font-size:46px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#B87333;  /* miedziany tylko dla napisu obok logo */
  line-height:1.2;
  text-shadow:1px 1px 3px rgba(0,0,0,.25);
}
@media (max-width:1024px){ .site-name{ font-size:36px } }
@media (max-width:768px){  .site-name{ font-size:28px; letter-spacing:1px } }

.top-menu{margin-left:0;flex:1 1 auto;overflow:visible}
.top-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.top-menu li{margin:0}

.top-menu a{
  font-family:'Cinzel', serif;
  font-size:16px;
  font-weight:600;
  color:#fff;                          /* białe linki */
  text-decoration:none;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5); /* delikatny cień */
  transition: all .25s ease;
}

/* Hover – lekko rozjaśniamy */
.top-menu a:hover{
  color:#f5f5f5;                        /* trochę jaśniejszy biały */
  text-shadow:2px 2px 4px rgba(0,0,0,0.6);
}
.page-content {
  background: var(--bg);
  color: var(--text);
  padding: 16px;
  border-radius: 12px;
}

.page-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--text);
}

.page-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}



/* === Brand tweaks: logo + site name in <span> (Cinzel) === */
.header img.logo-img{height:120px;width:auto}

/* Unhide and style the site name span next to logo */
.header .logo span{
  display:inline-block !important;
  font-family:'Cinzel', serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight:700;
  line-height:1.05;
  color: var(--text);
  letter-spacing: .4px;
  margin-top: 2px;
}

/* Use Cinzel on key titles */
.watch-title{
  font-family:'Cinzel', serif;
}


/* === LIGHTBOX GALERIA === */
.watch-thumbs{margin:12px 0 20px}
.watch-thumbs .thumbs-row{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.watch-thumbs .thumb{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:4px;cursor:pointer}
.watch-thumbs .thumb img{display:block;height:70px;width:auto;object-fit:cover}

.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(2px);display:none;z-index:1000}
.lb-overlay[hidden]{display:none}
.lb-overlay.show{display:block}

.lb-dialog{max-width: min(1200px, 96vw);max-height: 92vh;margin:3vh auto;background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:8px;right:12px;font-size:28px;background:transparent;border:none;color:var(--text);cursor:pointer}

.lb-content{
  display:grid;
  grid-template-columns: 1.6fr 1fr; /* GALERIA szersza (lewa), INFO węższe (prawa) */
  grid-template-areas: "gallery info";
  gap:16px;
  padding:16px
}
@media (max-width: 900px){
  .lb-content{
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "info";
    gap:12px
  }
}

.lb-info{grid-area: info; padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.lb-title{font-family:'Cinzel', serif;margin:0 0 8px}
.lb-meta{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.lb-desc{font-size:.98rem;line-height:1.6}

.lb-gallery{grid-area: gallery; position:relative;display:flex;flex-direction:column;gap:10px}
.lb-figure{margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;max-height:64vh}
.lb-image{max-height:56vh;width:auto;height:auto;display:block;border-radius:8px}
.lb-caption{margin-top:6px;color:var(--muted);font-size:.9rem}

.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.4);color:#fff;font-size:28px;width:44px;height:44px;border-radius:50%;cursor:pointer}
.lb-prev{left:8px}
.lb-next{right:8px}

.lb-thumbs{display:flex;gap:8px;overflow:auto}
.lb-thumb{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:4px;cursor:pointer;opacity:.8}
.lb-thumb.active{outline:2px solid var(--accent);opacity:1}
.lb-thumb img{height:60px;width:auto;display:block}


/* === NEWSLETTER MODAL === */
.menu-item-newsletter a{font-weight:600}

.nl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;z-index:1200}
.nl-overlay.show{display:block}
.nl-dialog{position:relative;max-width:520px;margin:8vh auto;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.nl-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text);font-size:26px;cursor:pointer}
.nl-title{margin:0 0 8px;font-family:'Cinzel', serif}
.nl-note{color:var(--muted);margin:0 0 12px}
.nl-form label{display:block;margin-bottom:12px}
.nl-form input[type="email"]{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.nl-submit{display:inline-block;border:none;border-radius:10px;padding:10px 14px;background:var(--accent);color:#000;font-weight:700;cursor:pointer}
.nl-msg{margin-top:10px;color:var(--muted)}

/* === NEWSLETTER PRIVACY === */
.nl-privacy{display:flex;align-items:center;gap:6px;margin:10px 0;font-size:.9rem}
.nl-privacy input{margin:0}
.nl-privacy a{color:var(--accent);text-decoration:underline}

/* === Newsletter: zgoda i polityka === */
.nl-consent{margin:10px 0 6px}
.nl-check{display:flex;gap:8px;align-items:flex-start}
.nl-check input{margin-top:3px}
.nl-check a{color:var(--accent);text-decoration:underline}



/* === Premium header & top menu === */
.header{
  background: linear-gradient(180deg, rgba(12,15,20,.9), rgba(12,15,20,.75));
  border-bottom: 1px solid var(--border);
}
.top-menu a{
  position:relative;
  font-weight:600;
  letter-spacing:.2px;
}
.top-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:2px;
  background: var(--accent);
  transition: width .25s ease;
}
.top-menu a:hover::after{ width:100%; }



/* === Buttons === */
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#121418}
.btn-primary:hover{filter:brightness(1.05)}



/* === Cards / product tiles === */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,0,0,.35);border-color: rgba(212,177,97,.35)}
.card .card-thumb img{border-radius:10px}
.card-title{font-family:'Cinzel', serif}



/* === CTA helpers === */
.cta-bar{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.cta-bar .btn-primary{font-size:1rem}



/* === Footer === */
.footer{border-top:1px solid var(--border);background:linear-gradient(0deg, rgba(12,15,20,.92), rgba(12,15,20,.8));color:var(--muted)}



/* === Lightbox accents === */
.lb-thumb.active{outline:2px solid var(--accent);box-shadow:0 0 0 2px rgba(0,0,0,.4) inset}
.lb-prev,.lb-next{background:rgba(20,24,35,.6)}
.lb-prev:hover,.lb-next:hover{background:rgba(20,24,35,.85)}


/* === INQUIRY MODAL === */
.inq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;z-index:1200}
.inq-overlay.show{display:block}
.inq-dialog{position:relative;max-width:720px;margin:8vh auto;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.inq-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text);font-size:26px;cursor:pointer}
.inq-title{margin:0 0 8px;font-family:'Cinzel', serif}
.inq-note{color:var(--muted);margin:0 0 12px}
.inq-form label span{display:block;margin-bottom:6px;color:var(--muted);font-size:.95rem}
.inq-form input,.inq-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.inq-grid .full{grid-column:1 / -1}
.inq-consent{margin:8px 0 10px}
.inq-check{display:flex;gap:8px;align-items:flex-start}
.inq-check input{margin-top:3px}
.inq-check a{color:var(--accent);text-decoration:underline}
@media(max-width:800px){.inq-grid{grid-template-columns:1fr}}

/* === Top menu layout === */
.top-menu{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:10px 0}
.top-menu .menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.top-menu a{color:var(--text);text-decoration:none;padding:6px 4px}
.top-menu a:hover{color:var(--accent)}
.menu-item-newsletter a{font-weight:700}



/* === Top menu visibility / debug === */
.top-menu{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:10px 0; position:relative; z-index:50;}
.top-menu .menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.top-menu a{color:var(--text);text-decoration:none;padding:6px 4px}
.top-menu a:hover{color:var(--accent)}

/* === Brand page model sections === */
.brand-model-block{margin: 10px 0 22px}
.brand-model-block .page-title{margin: 0 0 10px}