/* =========================================================================
   DRUGI WYGLĄD — "Księga Kupca" (antyczny)
   Cała strona jak stara, oprawiona w skórę księga rachunkowa: ciemna
   okładka (nagłówek/stopka) obejmuje jasne, liniowane strony pergaminu
   pośrodku. Karty produktów to wpisy w księdze, które "otwierają się"
   (obrót 3D) w miarę przewijania — patrz #lookToggle w main.js
   (updatePageTurns) sterujące zmienną CSS --page na każdej karcie.
   Wszystkie tekstury to gradienty CSS + inline SVG (feTurbulence) — zero
   zewnętrznych obrazów czy fontów. Całość zamknięta w [data-look="antique"],
   więc gdy wygląd nie jest aktywny, ten plik niczego nie zmienia.
   ========================================================================= */

:root[data-look="antique"] {
  --l-page: #f2e6c2;
  --l-page-alt: #e8d9a8;
  --l-card: #faf1d6;
  --l-ink: #33230f;
  --l-muted: #6f5a37;
  --l-rule: rgba(63, 89, 125, 0.32);
  --l-margin: rgba(150, 42, 32, 0.55);
  --l-gold: #a07a2e;
  --l-gold-bright: #cf9f43;
  --l-leather: #3b2016;
  --l-leather-alt: #4a2a1a;
  --l-on-leather: #ecdcae;
  --l-accent: #8a2f22;
  --l-accent-bright: #a5402c;
  --l-accent-soft: rgba(138, 47, 34, 0.12);
  --l-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.28 0 0 0 0 0.21 0 0 0 0 0.1 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --l-noise-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-look="antique"][data-theme="dark"] {
  --l-page: #2a2013;
  --l-page-alt: #33281a;
  --l-card: #362a19;
  --l-ink: #e9dab0;
  --l-muted: #b7a06d;
  --l-rule: rgba(122, 152, 191, 0.28);
  --l-margin: rgba(205, 96, 78, 0.5);
  --l-gold: #caa356;
  --l-gold-bright: #e0bd72;
  --l-leather: #180f08;
  --l-leather-alt: #241608;
  --l-on-leather: #e9dab0;
  --l-accent: #c1553a;
  --l-accent-bright: #d97350;
  --l-accent-soft: rgba(193, 85, 58, 0.18);
  --l-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --l-noise-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- strony księgi (tło) ---------- */
[data-look="antique"] body {
  background-color: var(--l-page-alt);
  background-image:
    var(--l-noise),
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(255, 250, 225, 0.35), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 90%, rgba(70, 50, 20, 0.14), transparent 60%);
  background-blend-mode: multiply, normal, normal;
  background-size: 240px 240px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  color: var(--l-ink);
  transition: background-color 0.35s ease, color 0.35s ease;
}
[data-look="antique"] main,
[data-look="antique"] .header-inner { max-width: 1140px; }

[data-look="antique"] h1,
[data-look="antique"] h2,
[data-look="antique"] h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--l-ink);
}
[data-look="antique"] a { color: inherit; }
[data-look="antique"] ::selection { background: var(--l-gold-bright); color: var(--l-ink); }

/* ---------- okładka: nagłówek ---------- */
[data-look="antique"] .site-header {
  background-color: var(--l-leather);
  background-image: var(--l-noise-leather);
  background-blend-mode: multiply;
  background-size: 180px 180px;
  border-bottom: 4px double var(--l-gold);
  color: var(--l-on-leather);
}
[data-look="antique"] .logo {
  color: var(--l-on-leather);
  font-family: var(--font-display);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
[data-look="antique"] .logo .icon { color: var(--l-gold-bright); }
[data-look="antique"] .main-nav a {
  position: relative;
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--l-on-leather);
  padding-bottom: 3px;
}
[data-look="antique"] .main-nav a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: -2px; height: 1.5px;
  background: var(--l-gold-bright);
  transition: left 0.25s ease, right 0.25s ease;
}
[data-look="antique"] .main-nav a:hover { color: var(--l-gold-bright); }
[data-look="antique"] .main-nav a:hover::after { left: 0; right: 0; }
[data-look="antique"] .fav-count { color: var(--l-accent-bright); }

[data-look="antique"] .theme-toggle,
[data-look="antique"] .look-toggle {
  border: 1px solid var(--l-gold);
  border-radius: 999px;
  color: var(--l-on-leather);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
[data-look="antique"] .theme-toggle:hover,
[data-look="antique"] .look-toggle:hover { background: var(--l-gold); color: var(--l-leather); }
[data-look="antique"] .look-toggle {
  width: auto; height: 34px; padding: 0 14px; gap: 7px;
  font-family: var(--font-display); font-variant: small-caps; font-size: 0.88rem; font-weight: 600;
}
[data-look="antique"] .nav-toggle { color: var(--l-on-leather); }

/* wstążka szlaków herbacianych — jak pasek u góry strony w księdze */
.marquee { display: none; }
[data-look="antique"] .marquee {
  display: block;
  overflow: hidden;
  background: var(--l-leather-alt);
  border-bottom: 1px solid var(--l-gold);
  white-space: nowrap;
}
[data-look="antique"] .marquee-track {
  display: inline-flex;
  gap: 14px;
  padding: 5px 0;
  animation: l-marquee 32s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--l-on-leather);
  opacity: 0.85;
}
[data-look="antique"] .marquee-track .dot { color: var(--l-gold-bright); font-style: normal; }
@keyframes l-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- hero: strona tytułowa ---------- */
[data-look="antique"] .hero {
  max-width: 700px;
  padding: 64px 0 40px;
  position: relative;
}
[data-look="antique"] .hero::after {
  content: "";
  position: absolute;
  top: 0; right: -20px;
  width: 170px; height: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='68' cy='168' rx='28' ry='9' fill='none' stroke='%235c4526' stroke-width='1.2'/%3E%3Cpath d='M50 168v-19a18 18 0 0 1 36 0v19' fill='none' stroke='%235c4526' stroke-width='1.2'/%3E%3Cpath d='M68 149 150 42' stroke='%235c4526' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 42 170 20 175 36 156 56Z' fill='none' stroke='%235c4526' stroke-width='1.1'/%3E%3Ccircle cx='108' cy='96' r='2' fill='%238a3324'/%3E%3Ccircle cx='120' cy='108' r='1.4' fill='%238a3324'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.18;
  animation: l-quill-sway 26s ease-in-out infinite;
  transform-origin: 70% 90%;
  pointer-events: none;
}
[data-theme="dark"][data-look="antique"] .hero::after { opacity: 0.24; }
@keyframes l-quill-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
[data-look="antique"] .hero-kicker { color: var(--l-accent); font-family: var(--font-body); }
[data-look="antique"] .hero-kicker::before {
  width: 8px; height: 8px; border-radius: 50%; background: var(--l-accent);
}
[data-look="antique"] .hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.12; }
[data-look="antique"] .hero h1::first-letter { color: var(--l-gold); font-size: 1.15em; }
[data-look="antique"] .hero p { color: var(--l-muted); font-size: 1.08rem; max-width: 48ch; font-style: italic; }

/* ---------- przyciski: pieczątka w księdze ---------- */
[data-look="antique"] .btn-primary,
[data-look="antique"] .btn-buy {
  background: var(--l-accent);
  color: var(--l-on-leather);
  border-radius: 3px;
  border: 1px solid var(--l-gold);
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, transform 0.15s ease;
}
[data-look="antique"] .btn-primary:hover,
[data-look="antique"] .btn-buy:hover { background: var(--l-accent-bright); }
[data-look="antique"] .btn-primary:active,
[data-look="antique"] .btn-buy:active { transform: scale(0.96); }

[data-look="antique"] .btn-secondary {
  border-radius: 3px;
  border: 1px solid var(--l-gold);
  color: var(--l-ink);
  background: var(--l-card);
  font-family: var(--font-display);
  font-variant: small-caps;
  transition: background 0.15s ease, color 0.15s ease;
}
[data-look="antique"] .btn-secondary:hover { background: var(--l-accent); color: var(--l-on-leather); border-color: var(--l-accent); }

/* ---------- nagłówki sekcji ---------- */
[data-look="antique"] .section-header a,
[data-look="antique"] .tea-of-day-link,
[data-look="antique"] .collection-count { color: var(--l-accent); }
[data-look="antique"] main > section > h2,
[data-look="antique"] .quiz-question h2 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 26px;
  font-style: italic;
}
[data-look="antique"] main > section > h2::after,
[data-look="antique"] .quiz-question h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0; width: 110px;
  border-bottom: 3px double var(--l-gold);
}

/* ---------- karty produktów: wpisy w księdze, otwierają się przy przewijaniu ---------- */
[data-look="antique"] .product-grid,
[data-look="antique"] .collections-grid,
[data-look="antique"] .post-grid { perspective: 1500px; counter-reset: folio; }

[data-look="antique"] .product-card,
[data-look="antique"] .collection-card,
[data-look="antique"] .post-card {
  counter-increment: folio;
  background-color: var(--l-card);
  background-image:
    var(--l-noise),
    repeating-linear-gradient(transparent 0px, transparent 26px, var(--l-rule) 27px, transparent 28px),
    linear-gradient(90deg, transparent 0 37px, var(--l-margin) 37px 38px, transparent 38px);
  background-blend-mode: multiply, normal, normal;
  border: 1px solid var(--l-gold);
  border-radius: 2px;
  box-shadow: 2px 3px 8px -3px rgba(40, 26, 12, 0.4);
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(calc((var(--page, 1) - 1) * 90px)) rotateY(calc((1 - var(--page, 1)) * -74deg));
  opacity: calc(0.3 + var(--page, 1) * 0.7);
  transition: box-shadow 0.2s ease;
  will-change: transform, opacity;
}
[data-look="antique"] .product-card::before,
[data-look="antique"] .collection-card::before,
[data-look="antique"] .post-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 12, 4, calc((1 - var(--page, 1)) * 0.5)) 0%, transparent 30%);
}
[data-look="antique"] .product-card::after,
[data-look="antique"] .collection-card::after,
[data-look="antique"] .post-card::after {
  content: "— " counter(folio, decimal-leading-zero) " —";
  position: absolute; bottom: 9px; right: 14px; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-size: 0.72rem; color: var(--l-muted);
}
[data-look="antique"] .product-card:hover,
[data-look="antique"] .collection-card:hover,
[data-look="antique"] .post-card:hover { box-shadow: 3px 5px 14px -4px rgba(40, 26, 12, 0.5); }

[data-look="antique"] .product-image { aspect-ratio: 4/3; filter: sepia(0.15); }
[data-theme="dark"][data-look="antique"] .product-image { filter: sepia(0.25) brightness(0.9); }
[data-look="antique"] .product-card h3,
[data-look="antique"] .collection-card h3,
[data-look="antique"] .post-card h3 { font-family: var(--font-display); font-style: italic; margin-top: 16px; }
[data-look="antique"] .product-category {
  display: inline-block; margin: 12px 16px 0;
  color: var(--l-accent);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--l-accent);
  padding-bottom: 1px;
}
[data-look="antique"] .product-desc { color: var(--l-muted); }
[data-look="antique"] .tag { background: transparent; border: 1px solid var(--l-rule); color: var(--l-muted); border-radius: 2px; font-variant: small-caps; }
[data-look="antique"] .fav-toggle { border-radius: 50%; background: var(--l-card); border: 1px solid var(--l-gold); color: var(--l-accent); }
[data-look="antique"] .detail-fav { border-radius: 999px; background: var(--l-page); }

/* ---------- filtry / wyszukiwarka ---------- */
[data-look="antique"] #searchInput,
[data-look="antique"] #caffeineFilter,
[data-look="antique"] .compare-select {
  border-radius: 3px;
  border: 1px solid var(--l-gold);
  background: var(--l-card);
  color: var(--l-ink);
  font-family: var(--font-body);
}
[data-look="antique"] .chip {
  border-radius: 999px;
  border: 1px solid var(--l-gold);
  background: var(--l-card);
  color: var(--l-ink);
  font-family: var(--font-display);
  font-variant: small-caps;
}
[data-look="antique"] .chip.active,
[data-look="antique"] .chip:hover { background: var(--l-accent); color: var(--l-on-leather); border-color: var(--l-accent); }

/* ---------- strona produktu ---------- */
[data-look="antique"] .breadcrumb { font-style: italic; color: var(--l-muted); }
[data-look="antique"] .product-detail-image img,
[data-look="antique"] .product-detail-image .product-image-placeholder {
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--l-page), 0 0 0 6px var(--l-gold);
  filter: sepia(0.15);
}
[data-theme="dark"][data-look="antique"] .product-detail-image img { filter: sepia(0.25) brightness(0.9); }
[data-look="antique"] .product-detail-info h1 { font-style: italic; }
[data-look="antique"] .caffeine-badge { background: var(--l-accent-soft); color: var(--l-accent); border-radius: 999px; }
[data-look="antique"] .brew-guide { border-top: 3px double var(--l-gold); }
[data-look="antique"] .brew-guide li .icon { color: var(--l-gold); }
[data-look="antique"] .timer-display { font-family: var(--font-display); }
[data-look="antique"] .timer-display.done { color: var(--l-accent); }
[data-look="antique"] .brew-calculator { border-top: 1px dashed var(--l-gold); }
[data-look="antique"] .brew-calculator input { border-radius: 3px; border: 1px solid var(--l-gold); background: var(--l-card); color: var(--l-ink); }

/* ---------- herbata dnia ---------- */
[data-look="antique"] .tea-of-day-card {
  background-color: var(--l-card);
  background-image: var(--l-noise), repeating-linear-gradient(transparent 0px, transparent 26px, var(--l-rule) 27px, transparent 28px);
  background-blend-mode: multiply, normal;
  border: 1px solid var(--l-gold);
  border-radius: 2px;
  box-shadow: 2px 3px 8px -3px rgba(40, 26, 12, 0.4);
}
[data-look="antique"] .tea-of-day-image { border-radius: 1px; filter: sepia(0.15); }
[data-look="antique"] .tea-of-day-label { color: var(--l-accent); }
[data-look="antique"] .tea-of-day-info h2 { font-style: italic; }

/* ---------- quiz ---------- */
[data-look="antique"] .quiz-dot { border-radius: 50%; background: var(--l-rule); }
[data-look="antique"] .quiz-dot.active { background: var(--l-accent); }
[data-look="antique"] .quiz-option {
  border-radius: 3px; border: 1px solid var(--l-gold); background: var(--l-card); color: var(--l-ink);
  font-family: var(--font-display);
  transition: background 0.15s ease, transform 0.15s ease;
}
[data-look="antique"] .quiz-option:hover { border-color: var(--l-accent); background: var(--l-accent-soft); transform: translateX(5px); }

/* ---------- porównywarka: prawdziwa tabela księgowa ---------- */
[data-look="antique"] .compare-table-wrap {
  border: 1px solid var(--l-gold);
  border-left: 3px solid var(--l-accent);
  background: var(--l-card);
}
[data-look="antique"] .compare-table th, [data-look="antique"] .compare-table td { border-bottom: 1px solid var(--l-rule); }
[data-look="antique"] .compare-table thead th { border-bottom: 3px double var(--l-gold); font-family: var(--font-display); font-variant: small-caps; }
[data-look="antique"] .compare-table th[scope="row"] { color: var(--l-muted); font-style: italic; }
[data-look="antique"] .compare-thumb { border-radius: 2px; border: 1px solid var(--l-gold); filter: sepia(0.15); }

/* ---------- FAQ ---------- */
[data-look="antique"] .faq-item { background: var(--l-card); border: 1px solid var(--l-gold); border-radius: 2px; }
[data-look="antique"] .faq-item summary { font-family: var(--font-display); font-style: italic; font-weight: 600; }
[data-look="antique"] .faq-chevron { color: var(--l-accent); }

/* ---------- okładka: stopka ---------- */
[data-look="antique"] .site-footer {
  background-color: var(--l-leather);
  background-image: var(--l-noise-leather);
  background-blend-mode: multiply;
  background-size: 180px 180px;
  border-top: 4px double var(--l-gold);
  color: var(--l-on-leather);
}
[data-look="antique"] .newsletter h2 { font-style: italic; color: var(--l-on-leather); }
[data-look="antique"] .newsletter p { color: var(--l-on-leather); opacity: 0.8; }
[data-look="antique"] .newsletter-form input {
  border-radius: 0; border: none; border-bottom: 1px solid var(--l-gold); background: transparent;
  font-family: var(--font-display); font-style: italic; padding: 10px 4px; color: var(--l-on-leather);
}
[data-look="antique"] .footer-nav a { font-family: var(--font-display); font-variant: small-caps; color: var(--l-on-leather); opacity: 0.85; }
[data-look="antique"] .footer-nav a:hover { color: var(--l-gold-bright); opacity: 1; }
[data-look="antique"] .site-footer > p { opacity: 0.7; }

/* ---------- 404 ---------- */
[data-look="antique"] .not-found .icon-wrap { border-radius: 50%; background: var(--l-accent-soft); color: var(--l-accent); }

/* ---------- pasek postępu — wstążka zakładki ---------- */
.scroll-progress { display: none; }
[data-look="antique"] .scroll-progress {
  display: block;
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--l-accent), var(--l-gold-bright));
  z-index: 60;
  transition: width 0.1s linear;
}

/* ---------- animacja pojawiania nagłówków / FAQ (bez obrotu 3D) ---------- */
[data-look="antique"] .fade-in-up { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
[data-look="antique"] .faq-item, [data-look="antique"] .compare-table-wrap, [data-look="antique"] .tea-of-day-card {
  transform: translateY(14px);
}
[data-look="antique"] .faq-item.in-view, [data-look="antique"] .compare-table-wrap.in-view, [data-look="antique"] .tea-of-day-card.in-view {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-look="antique"] .marquee-track { animation: none; }
  [data-look="antique"] .hero::after { animation: none; }
}

@media (max-width: 720px) {
  [data-look="antique"] .hero::after { display: none; }
  [data-look="antique"] .main-nav { background: var(--l-leather); border-bottom: 1px solid var(--l-gold); }
}