/* =========================================
WhiskyPolska — Main Stylesheet
Palette: dark amber, whisky gold, cream
========================================= */
/* Border-box reset — prevents padding from adding to element widths,
which is the root cause of mobile horizontal overflow. */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* ── Dark mode palette (default) ── */
--bg: #0f1117;
--bg-card: #171b24;
--bg-card-hover: #1d2230;
--bg-image: #0c0e14; /* bottle / product photo backgrounds */
--border: #252c3a;
--border-light: #2e3648;
--amber: #d4912e;
--amber-light: #ebb040;
--amber-dim: #8a5e20;
--logo-accent: #f2f2f2; /* logo lockup (mark + wordmark + beta) — monochrome; white on the dark header */
--logo-accent-hover: #ffffff;
--cream: #eceef5;
--cream-dim: #9ba3b4;
--text: #d4d9e8;
--text-dim: #6e7c96;
--green: #3a7a56;
--red: #8a3838;
--btn-text: #0f1117; /* text on amber/CTA buttons */
--nav-h: 60px; /* sticky site-header height — used by table sticky offset */
--radius: 8px;
--radius-lg: 14px;
--shadow: 0 4px 24px rgba(0,0,0,.48);
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
a { color: var(--amber-light); text-decoration: none; }
a:hover { color: var(--cream); }
img { max-width: 100%; display: block; }
/* ---- Layout ---- */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
main.container { flex: 1; padding-top: 2rem; padding-bottom: 4rem; }
/* ---- Announcement bar ---- */
.announcement-bar {
background: #131720;
border-bottom: 1px solid var(--border);
padding: 0.45rem 2.5rem 0.45rem 1rem;
font-size: 0.78rem;
color: var(--amber);
letter-spacing: 0.03em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ann-dismiss {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--amber);
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
padding: 0.2rem 0.35rem;
opacity: 0.6;
border-radius: var(--radius);
transition: opacity 0.15s;
}
.ann-dismiss:hover { opacity: 1; }
/* ---- Beta badge (logo) ---- */
.logo-beta {
display: inline-flex;
align-items: center; /* vertical centring of the text within the rectangle */
justify-content: center; /* horizontal centring */
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-indent: 0.06em; /* offset the trailing letter-spacing so glyphs sit dead-centre */
text-transform: uppercase;
background: var(--logo-accent);
color: var(--bg); /* page bg → contrasts with the black/white badge in both themes */
padding: 0.32em 0.5em;
border-radius: 4px;
line-height: 1;
margin-left: 0.4rem;
align-self: center; /* sit at the wordmark's height, not as a superscript */
flex-shrink: 0;
}
/* ---- Header ---- */
.site-header {
border-bottom: 1px solid var(--border);
background: rgba(15,17,23,.96);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 100;
}
.site-header .container {
display: flex;
align-items: center;
gap: 2rem;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.3rem; /* tighter — mark sits closer to the wordmark */
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 700;
color: var(--logo-accent);
letter-spacing: -0.01em;
}
.logo:hover { color: var(--logo-accent-hover); }
.logo:hover .logo-img { background-color: var(--logo-accent-hover); }
.logo-icon { font-size: 1.1rem; }
/* Emblem recoloured via mask: the PNG's alpha is the shape, filled with the
accent colour — so the mark matches the wordmark in both themes. */
.logo-img {
width: 30px;
height: 30px;
flex-shrink: 0;
background-color: var(--logo-accent);
-webkit-mask: url(/images/logo.png) center / contain no-repeat;
mask: url(/images/logo.png) center / contain no-repeat;
transition: background-color 0.15s;
}
nav { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
@keyframes logo-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
body:not(.landing-page) .logo {
animation: logo-fadein 0.7s ease both;
}
nav a {
color: var(--text-dim);
font-size: 0.9rem;
font-weight: 500;
transition: color 0.15s;
}
nav a:hover { color: var(--cream); }
/* ---- Language switcher ---- */
.lang-switch {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
margin-left: 0.5rem;
}
.lang-switch a {
color: var(--text-dim);
text-transform: uppercase;
padding: 0.15em 0.4em;
border-radius: 3px;
transition: color 0.15s, background 0.15s;
}
.lang-switch a:hover { color: var(--cream); background: rgba(255,255,255,0.06); }
.lang-switch .lang-active {
color: var(--amber);
text-transform: uppercase;
padding: 0.15em 0.4em;
border-radius: 3px;
background: rgba(200,135,42,0.12);
cursor: default;
}
.lang-switch::before { content: '|'; color: var(--border-light); margin-right: 0.2rem; }
/* ── Mobile nav — keep it in one row, hide secondary items ──────────────── */
/* Must appear AFTER the base .lang-switch rule so display:none wins. */
@media (max-width: 600px) {
/* backdrop-filter on a sticky header makes mobile screenshots render the page
black on many Android/WebView compositors. Drop the blur and use a solid
background on small screens — the bg is already near-opaque, so no visual loss. */
.site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #0f1117;
overflow-x: clip; /* clip header children (e.g. theme-btn) that overflow at narrow viewports */
}
.site-header .container { gap: 0.6rem; padding-left: 0.9rem; padding-right: 0.9rem; }
nav { gap: 0.8rem; }
.nav-terms { display: none; } /* Regulamin accessible via footer */
.lang-switch { display: none; } /* PL/EN: hide on mobile */
.logo-beta { display: none; } /* BETA badge: saves ~50px */
/* Register CTA in nav is redundant — hero already has the big CTA button */
.btn-nav-cta { display: none; }
.logo { font-size: 1.1rem; gap: 0.2rem; }
.logo-img { width: 24px; height: 24px; }
/* Touch targets: min 44px height per WCAG 2.5.5. Flex centring keeps text aligned. */
nav a { min-height: 44px; display: flex; align-items: center; }
}
/* ---- Hero ---- */
/* ── Category landing intro (SEO, /katalog/:slug pages) ────────────────── */
.category-intro {
padding: 1.4rem 0 0.8rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.5rem;
}
.category-intro__inner { max-width: 820px; }
.category-intro__title {
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 700;
color: var(--cream);
margin: 0 0 0.55rem;
}
.category-intro__body {
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
max-width: 72ch;
}
.hero {
padding: 0.4rem 0 0.2rem;
}
.hero-content { max-width: 820px; }
.hero h1 {
font-family: var(--font-serif);
font-size: clamp(0.85rem, 1.4vw, 1.05rem);
font-weight: 700;
color: var(--cream);
letter-spacing: -0.02em;
line-height: 1.2;
white-space: nowrap; /* single line on tablet/desktop */
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 540px) {
.hero h1 { white-space: normal; overflow: visible; text-overflow: clip; }
}
.hero-subtitle {
color: var(--text-dim);
font-size: 0.85rem;
margin-top: 0.3rem;
margin-bottom: 0.4rem;
}
.hero-value-props {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.hero-prop {
display: flex;
align-items: flex-start;
gap: 0.75rem;
flex: 1 1 220px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.85rem 1rem;
}
.hero-prop-icon {
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
margin-top: 0.1rem;
}
.hero-prop strong {
display: block;
color: var(--cream);
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.2rem;
}
.hero-prop p {
color: var(--text-dim);
font-size: 0.8rem;
margin: 0;
line-height: 1.4;
}
@media (max-width: 600px) {
.hero-value-props { gap: 0.75rem; }
.hero-prop { flex-basis: 100%; }
}
/* ---- Filters ---- */
.filters {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1rem 1.25rem;
margin-bottom: 2rem;
}
/* Primary row: text input + search button + expand toggle */
.filter-primary-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-q-input {
flex: 1 1 0;
min-width: 0;
}
/* Compact search submit button in primary row */
.btn-search-submit {
flex-shrink: 0;
padding: 0.5rem 1rem;
white-space: nowrap;
}
/* ··· expand toggle */
.btn-filter-expand {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
border-radius: var(--radius);
border: 1px solid var(--border-light);
background: transparent;
color: var(--text-dim);
cursor: pointer;
font-size: 0.85rem;
font-family: var(--font-sans);
line-height: 1;
white-space: nowrap;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.btn-filter-expand:hover {
border-color: var(--amber-dim);
color: var(--cream);
}
.btn-filter-expand[aria-expanded="true"] {
border-color: var(--amber-dim);
color: var(--cream);
}
.btn-filter-expand.has-active-filters {
border-color: var(--amber);
}
/* Orange dot badge — shown when advanced filters are active */
.filter-expand-dot {
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--amber);
pointer-events: none;
}
/* Advanced panel */
.filter-advanced {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid var(--border-light);
}
.filter-group { display: flex; align-items: center; gap: 0.35rem; }
.filter-search { flex: 1 1 240px; }
.filter-range { gap: 0.4rem; }
.filter-range .unit { color: var(--text-dim); font-size: 0.85rem; }
input[type="text"],
input[type="number"],
select {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
outline: none;
transition: border-color 0.15s;
width: 100%;
}
.filter-search input { width: 100%; }
.filter-range input { width: 90px; }
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
border-color: var(--amber-dim);
}
select option { background: var(--bg); }
.btn-primary {
background: var(--amber);
color: var(--btn-text);
border: none;
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
padding: 0.55rem 1.25rem;
cursor: pointer;
transition: background 0.15s;
}
.btn-primary:hover { background: var(--amber-light); color: var(--btn-text); }
.btn-ghost {
background: transparent;
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text-dim);
font-size: 0.9rem;
font-weight: 500;
padding: 0.5rem 1rem;
transition: border-color 0.15s, color 0.15s;
cursor: pointer;
}
.btn-ghost:hover { border-color: var(--amber-dim); color: var(--cream); }
/* ---- Results ---- */
.results-count {
color: var(--text-dim);
font-size: 0.9rem;
margin-bottom: 1.25rem;
}
.results-count strong { color: var(--amber); }
/* Empty state — shown when a search / filter set returns no whiskies */
.results-empty {
text-align: center;
padding: 3.5rem 1rem;
color: var(--text-dim);
}
.results-empty-icon { font-size: 2.75rem; line-height: 1; opacity: 0.45; }
.results-empty-title {
margin: 0.75rem 0 0.35rem;
font-size: 1.2rem;
font-weight: 600;
color: var(--cream);
}
.results-empty-hint { margin: 0; font-size: 0.92rem; color: var(--text-dim); }
/* ---- Whisky Grid ---- */
.whisky-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
}
.whisky-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
color: var(--text);
}
.whisky-card:hover {
border-color: var(--amber-dim);
background: var(--bg-card-hover);
transform: translateY(-2px);
}
.card-image {
height: 180px;
background: var(--bg-image);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.card-image img { height: 100%; width: 100%; object-fit: contain; padding: 0.25rem; }
.card-image-placeholder { font-size: 3.5rem; opacity: 0.3; }
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.card-title {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
color: var(--cream);
line-height: 1.3;
margin-top: 0.1rem;
}
.card-distillery { font-size: 0.82rem; color: var(--text-dim); }
.card-details {
display: flex;
gap: 0.6rem;
font-size: 0.82rem;
color: var(--text-dim);
}
.card-price {
margin-top: auto;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
}
.price-from { font-size: 0.9rem; }
.price-from strong { color: var(--amber); font-size: 1.05rem; }
.retailer-count { font-size: 0.78rem; color: var(--text-dim); }
.price-unavailable { font-size: 0.85rem; color: var(--text-dim); font-style: italic; }
/* ── View toggle buttons (table / cards) ─────────────────────────────── */
.view-toggle {
display: flex;
border: 1px solid var(--border-light);
border-radius: 6px;
overflow: hidden;
}
.view-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.6rem;
background: transparent;
border: none;
color: var(--text-dim);
cursor: pointer;
transition: background 0.15s, color 0.15s;
line-height: 1;
}
.view-toggle-btn:first-child { border-right: 1px solid var(--border-light); }
.view-toggle-btn[aria-pressed="true"] {
background: var(--bg-card-hover);
color: var(--cream);
}
.view-toggle-btn:hover { color: var(--cream); }
/* ── Catalogue card grid (wc-* = whisky-card for catalogue) ──────────── */
.wc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.wc-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
display: flex;
flex-direction: column;
overflow: hidden;
text-decoration: none;
color: var(--text);
transition: border-color 0.18s, transform 0.15s;
}
.wc-card:hover { border-color: var(--amber-dim); transform: translateY(-2px); }
.wc-img {
height: 140px;
background: var(--bg-image);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.wc-img img { max-height: 100%; max-width: 100%; object-fit: contain; padding: 0.25rem; }
.wc-img-placeholder { font-size: 2.5rem; opacity: 0.25; }
.wc-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.65rem 0.7rem; flex: 1; }
.wc-name {
font-family: var(--font-serif);
font-size: 0.88rem;
font-weight: 600;
color: var(--cream);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wc-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: var(--text-dim);
}
.wc-rating { color: var(--amber); font-weight: 600; }
.wc-casks { display: inline-flex; gap: 0; align-items: center; }
/* Overlap adjacent cask icons by half their width (icon--26 = 26px → -13px). */
.wc-casks svg + svg { margin-left: -13px; }
.wc-footer {
margin-top: auto;
padding-top: 0.35rem;
border-top: 1px solid var(--border);
font-size: 0.82rem;
}
.wc-price strong { color: var(--amber); }
.wc-price small { color: var(--text-dim); font-size: 0.72rem; }
.wc-price-sep { color: var(--text-dim); padding: 0 0.1rem; }
.wc-shops { color: var(--text-dim); font-size: 0.72rem; margin-left: 0.4rem; }
.wc-price--hist { color: var(--text-dim); }
.wc-no-price { color: var(--text-dim); }
.wc-price-gate { color: var(--text-dim); font-size: 0.8rem; }
.wc-price-gate a { color: var(--amber); text-decoration: none; }
/* ── Data-view switching ─────────────────────────────────────────────── */
/* Default: table visible, cards hidden. JS toggles data-view attribute. */
#results-section[data-view="table"] .wc-grid { display: none; }
#results-section[data-view="cards"] .whisky-table-wrap { display: none; }
/* On mobile (portrait ≤600px): default to cards without JS interaction */
@media (max-width: 600px) {
#results-section:not([data-view="table"]) .wc-grid { display: grid; }
#results-section:not([data-view="table"]) .whisky-table-wrap { display: none; }
.wc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
}
@media (max-width: 380px) {
.wc-grid { grid-template-columns: 1fr; }
}
/* ---- Badges ---- */
.badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
padding: 0.2em 0.55em;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge-single_malt { background: #1e3326; color: #6ecf9a; }
.badge-blended { background: #1e2533; color: #6ea0cf; }
.badge-blended_malt { background: #2b1e33; color: #b06ecf; }
.badge-grain { background: #33281e; color: #cf9a6e; }
.badge-single_grain { background: #33231e; color: #cf806e; }
.badge-region { background: #2a2213; color: var(--amber); }
.badge-release { background: #2d1c1c; color: #cf6e6e; }
/* Independent bottler badge — compact inline pill */
.badge-ib {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15em 0.45em;
border-radius: 3px;
background: #1c2e35;
color: #6ec4cf;
text-transform: uppercase;
letter-spacing: 0.05em;
vertical-align: middle;
margin-left: 0.3em;
}
/* ---- Breadcrumb (detail page) ---- */
.detail-breadcrumb {
margin-bottom: .75rem;
}
.detail-breadcrumb a {
font-size: .82rem;
color: var(--text-dim);
text-decoration: none;
}
.detail-breadcrumb a:hover {
color: var(--amber-light);
}
/* ---- Filter trail (detail page) ---- */
.filter-trail {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 1.75rem;
}
.trail-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
}
.trail-sep {
color: var(--text-dim);
font-size: 0.75rem;
opacity: 0.5;
margin: 0 0.05rem;
user-select: none;
}
/* Base chip */
.trail-link {
display: inline-flex;
align-items: center;
gap: 0.2em;
font-size: 0.82rem;
font-weight: 500;
padding: 0.22rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--border-light);
color: var(--text-dim);
text-decoration: none;
transition: border-color 0.12s, color 0.12s, background 0.12s;
white-space: nowrap;
}
.trail-link:hover {
border-color: var(--amber-dim);
color: var(--cream);
background: rgba(200,135,42,.07);
}
/* Crumb trail — slightly more prominent */
.trail-crumb {
font-weight: 600;
color: var(--cream-dim);
border-color: transparent;
padding-left: 0;
padding-right: 0;
border-radius: 0;
}
.trail-crumb:hover {
color: var(--amber-light);
background: transparent;
border-color: transparent;
}
/* Style chips (Peated, CS, NCF) */
.trail-style-chip {
background: rgba(200,135,42,.08);
border-color: rgba(200,135,42,.25);
color: var(--amber);
}
.trail-style-chip:hover {
background: rgba(200,135,42,.18);
border-color: var(--amber-dim);
color: var(--amber-light);
}
/* Cask chips */
.trail-cask-chip {
background: rgba(78,124,94,.08);
border-color: rgba(78,124,94,.25);
color: var(--green);
}
.trail-cask-chip:hover {
background: rgba(78,124,94,.18);
border-color: var(--green);
color: #6ecf9a;
}
[data-theme="light"] .trail-crumb { color: var(--cream-dim); }
[data-theme="light"] .trail-style-chip { color: var(--amber); }
[data-theme="light"] .trail-cask-chip { color: var(--green); }
/* ---- Detail Page ---- */
.whisky-detail { max-width: 900px; margin: 0 auto; }
.breadcrumb {
font-size: 0.85rem;
color: var(--text-dim);
margin-bottom: 2rem;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span { color: var(--cream); }
.detail-header {
display: grid;
grid-template-columns: 220px 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.detail-header--no-image { grid-template-columns: 1fr; }
.detail-image {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
align-self: start;
}
.detail-image img { height: 100%; width: 100%; object-fit: contain; padding: 0.15rem; opacity: 0; transition: opacity 0.25s; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.detail-info h1 {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
color: var(--cream);
line-height: 1.25;
margin-bottom: 0.4rem;
}
.detail-distillery { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.25rem; }
.detail-specs {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4rem 1rem;
font-size: 0.9rem;
}
.detail-specs dt { color: var(--text-dim); white-space: nowrap; }
.detail-specs dd { color: var(--cream); }
/* ---- Size Switcher ---- */
.size-switcher {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.size-btn {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.9em;
border-radius: 1.5em;
font-size: 0.82rem;
font-weight: 500;
border: 1px solid var(--border);
color: var(--text-dim);
text-decoration: none;
transition: border-color 0.12s, color 0.12s, background 0.12s;
white-space: nowrap;
}
.size-btn:hover {
border-color: var(--amber-dim);
color: var(--cream);
background: rgba(200,135,42,.07);
}
.size-btn.active {
border-color: var(--amber);
color: var(--amber);
background: rgba(200,135,42,.10);
font-weight: 600;
}
.size-btn__count {
font-size: 0.75em;
opacity: 0.6;
}
/* ---- Batch / release variants ---- */
.batch-variants {
margin: 1.5rem 0 2rem;
padding: 1rem 1.1rem 1.2rem;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, .015);
}
.batch-variants__title { font-size: 1.05rem; margin: 0 0 0.3rem; }
.batch-variants__intro {
font-size: 0.85rem; color: var(--text-dim); margin: 0 0 0.9rem;
}
.batch-variants__grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: 0.7rem;
}
.batch-card { position: relative; }
.batch-card__link {
display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
padding: 0.6rem 0.4rem;
border: 1px solid var(--border); border-radius: 8px;
text-decoration: none; color: var(--text-dim); height: 100%;
transition: border-color .12s, background .12s, color .12s;
}
.batch-card__link:hover {
border-color: var(--amber-dim); color: var(--cream);
background: rgba(200, 135, 42, .06);
}
.batch-card--current .batch-card__link {
border-color: var(--amber); background: rgba(200, 135, 42, .10);
}
.batch-card__thumb {
display: flex; align-items: center; justify-content: center; height: 84px;
}
.batch-card__thumb img { max-height: 84px; max-width: 100%; object-fit: contain; }
.batch-card__noimg { color: var(--text-dim); opacity: .4; font-size: 1.4rem; }
.batch-card__label {
font-size: 0.82rem; font-weight: 600; color: var(--cream);
text-align: center; line-height: 1.2;
}
.batch-card__meta { display: flex; gap: 0.5em; font-size: 0.74rem; opacity: .75; }
.batch-card__current {
display: block; text-align: center; font-size: 0.68rem;
color: var(--amber); margin-top: 0.25rem;
}
.batch-variants__hint {
font-size: 0.78rem; color: var(--text-dim); margin: 0.9rem 0 0; font-style: italic;
}
.batch-badge {
display: inline-block; margin-left: 0.5em;
font-size: 0.7rem; font-weight: 600;
padding: 0.12em 0.5em; border-radius: 4px;
background: rgba(200, 135, 42, .12); color: var(--amber);
border: 1px solid var(--amber-dim); vertical-align: middle; cursor: default;
}
/* ---- Price Table ---- */
.price-comparison, .tasting-notes, .description {
margin-bottom: 2.5rem;
}
.price-comparison h2, .tasting-notes h2, .description h2 {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--cream);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.price-table-wrap { overflow-x: auto; }
.price-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.price-table th {
text-align: left;
padding: 0.6rem 1rem;
color: var(--text-dim);
font-weight: 500;
border-bottom: 1px solid var(--border);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.price-table td {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--bg-card); }
.price-table tr[data-href] { cursor: pointer; }
.price-table tr[data-href]:hover td { background: var(--bg-hover, var(--bg-card)); }
.best-price td:first-child {
position: relative;
padding-left: 1rem;
box-shadow: inset 3px 0 0 var(--amber);
}
.best-label {
display: block;
font-size: 0.7rem;
font-weight: 700;
color: var(--amber);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.1rem;
}
.near-best-price td:first-child {
box-shadow: inset 2px 0 0 var(--amber-dim);
}
.near-best-pct {
font-size: 0.74rem;
color: var(--text-dim);
margin-left: 0.4em;
font-variant-numeric: tabular-nums;
}
.good-price td:first-child {
box-shadow: inset 2px 0 0 var(--amber-dim);
}
.good-label {
display: block;
font-size: 0.68rem;
font-weight: 600;
color: var(--amber-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.1rem;
}
.retailer-name { color: var(--cream); font-weight: 500; }
.price-cell strong { color: var(--amber); font-size: 1.05rem; }
/* ── Price spread (% vs cheapest) ─────────────────────────── */
.price-spread-summary {
font-size: 0.85rem;
color: var(--text-dim);
margin: 0 0 0.75rem;
padding: 0.4rem 0.7rem;
background: var(--bg-card);
border-left: 3px solid var(--amber-dim);
border-radius: 0 var(--radius) var(--radius) 0;
}
.vs-best-col { text-align: right; }
.vs-best-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-best-zero { color: var(--text-dim); }
.vs-best-good { color: var(--text-dim); } /* within good threshold (2–3%) */
.vs-best-up { color: var(--cream-dim); } /* neutral (above good cap, ≤25%) */
.vs-best-near { color: var(--text-dim); } /* legacy — kept for compatibility */
.vs-best-muted { color: var(--text-dim); opacity: 0.7; }
.currency-note {
display: block;
font-size: 0.72rem;
font-weight: normal;
color: var(--text-dim);
letter-spacing: 0.02em;
line-height: 1.2;
}
.vs-best-over { /* overpriced (>25%) */
display: inline-block;
font-weight: 700;
color: #e08a8a;
background: rgba(139, 58, 58, 0.18);
padding: 0.05em 0.45em;
border-radius: 999px;
}
.overpriced-price td { opacity: 0.82; }
.overpriced-price td:first-child { box-shadow: inset 2px 0 0 var(--red); }
.stock-badge {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
padding: 0.2em 0.6em;
border-radius: 4px;
}
.in-stock { background: #1a2e22; color: #6ecf9a; }
.out-of-stock { background: #2d1a1a; color: #cf6e6e; }
.date-cell { color: var(--text-dim); font-size: 0.82rem; }
/* ── Out-of-stock collapsible section ──────────────────────────── */
.oos-section {
margin-top: 1.5rem;
}
.oos-summary {
cursor: pointer;
font-size: 0.82rem;
color: var(--text-dim);
padding: 0.4rem 0;
user-select: none;
list-style: none;
}
.oos-summary::-webkit-details-marker { display: none; }
.oos-summary::before {
content: "▶ ";
font-size: 0.7em;
transition: transform 0.15s;
display: inline-block;
}
.oos-section[open] .oos-summary::before {
transform: rotate(90deg);
}
.price-table-wrap--oos { margin-top: 0.5rem; }
.price-table--oos td,
.price-table--oos th { opacity: 0.6; }
.price-table--oos .price-cell { font-style: italic; }
/* ── Whisky detail price table — mobile trim ──────────────────────────
On phones the offer table is cramped, so we drop the two least-essential
columns (Dostępność / Aktualizacja) and hide the out-of-stock section
entirely — shoppers on mobile only care about who has it and for how much. */
@media (max-width: 600px) {
.price-table .col-stock,
.price-table .col-updated { display: none; }
.oos-section { display: none; }
}
.extras-badge {
display: inline-block;
margin-left: 0.5em;
font-size: 0.72rem;
font-weight: 600;
padding: 0.15em 0.55em;
border-radius: 4px;
background: #1e2a1a;
color: #8ecf6e;
border: 1px solid #3a5a2a;
vertical-align: middle;
cursor: default;
}
.btn-buy {
display: inline-block;
background: var(--amber);
color: var(--btn-text);
font-weight: 600;
font-size: 0.82rem;
padding: 0.35rem 0.9rem;
border-radius: var(--radius);
transition: background 0.15s;
}
.btn-buy:hover { background: var(--amber-light); color: var(--btn-text); }
.btn-ghost-sm {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-dim);
}
.btn-ghost-sm:hover { border-color: var(--amber-dim); color: var(--cream); }
.no-prices { color: var(--text-dim); font-style: italic; }
/* ---- Whisky description (inline in detail-info) ---- */
.detail-description {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.detail-description__heading {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 0.45rem;
}
.detail-description p {
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.65;
}
/* ---- WB Flavour Profile ---- */
.wb-flavor-profile {
margin-bottom: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
/* ── Collapsed summary row ── */
.wb-flavor-collapsed {
display: flex;
align-items: baseline;
gap: 0.35rem;
flex-wrap: wrap;
}
.wb-flavor-collapsed__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
}
.wb-flavor-collapsed__tags {
font-size: 0.83rem;
color: var(--cream);
}
.wb-flavor-expand-btn {
background: none;
border: none;
padding: 0 0.05rem;
color: var(--amber);
cursor: pointer;
font-size: 0.83rem;
font-weight: 700;
font-family: inherit;
line-height: 1;
transition: opacity 0.15s;
}
.wb-flavor-expand-btn:hover { opacity: 0.75; }
/* ── Expanded full section ── */
.wb-flavor-full { margin-top: 0.9rem; }
.wb-flavor-tags {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto 1fr;
column-gap: 0.5rem;
row-gap: 0.4rem;
align-items: center;
}
.wb-flavor-tag__name {
font-size: 0.78rem;
color: var(--cream);
text-align: right;
white-space: nowrap;
}
.wb-flavor-tag__track {
height: 6px;
background: var(--border-light);
border-radius: 4px;
overflow: hidden;
cursor: default;
min-width: 0;
}
.wb-flavor-tag__bar {
height: 100%;
background: linear-gradient(to right, var(--amber-dim), var(--amber));
border-radius: 4px;
min-width: 2px;
}
.wb-flavor-source {
margin-top: 0.75rem;
font-size: 0.68rem;
color: var(--text-dim, #6b7790);
}
@media (max-width: 600px) {
.wb-flavor-tags { grid-template-columns: auto 1fr; }
}
/* ---- Tasting Notes ---- */
.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.note {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
}
.note h3 {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--amber);
margin-bottom: 0.4rem;
}
.note p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
/* ---- Footer ---- */
.site-footer {
border-top: 1px solid var(--border);
padding: 1.5rem 0;
margin-top: auto;
}
.site-footer .container { text-align: center; }
.site-footer p { color: var(--text-dim); font-size: 0.85rem; }
.footer-note { font-size: 0.78rem; margin-top: 0.25rem; opacity: 0.6; }
.footer-legal { font-size: 0.72rem; margin-top: 0.2rem; opacity: 0.5; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* ---- Error Page ---- */
.error-page {
text-align: center;
padding: 6rem 1rem;
}
.error-page h1 {
font-family: var(--font-serif);
font-size: 6rem;
color: var(--amber);
opacity: 0.3;
}
.error-page p { color: var(--text-dim); margin: 1rem 0 2rem; }
/* ---- Filter extras ---- */
.filter-checkbox {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--text-dim);
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
user-select: none;
}
.filter-checkbox input[type="checkbox"] {
width: auto;
accent-color: var(--amber);
cursor: pointer;
}
.filter-checkbox:hover { color: var(--cream); }
.range-sep { color: var(--text-dim); }
/* ---- Dual-handle range sliders ---- */
/* Single-row filter grid: selects + sliders + reset all inline */
.filter-grid {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.7rem;
align-items: flex-start;
}
.filter-grid .btn-reset {
flex-shrink: 0;
white-space: nowrap;
margin-top: auto;
}
.range-slider-wrap {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 100px;
flex: 1 1 100px;
}
/* Current-value label lives inside an rs-scale span (stacked below rs-lbl) */
.rs-scale .rs-value {
display: block;
color: var(--amber);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
}
/* Tiny category name embedded in the scale row (replaces the above-track label) */
.rs-lbl {
display: block;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
line-height: 1;
text-align: center;
}
.range-slider-track {
position: relative;
height: 22px; /* touch target */
display: flex;
align-items: center;
}
.range-slider-track .rs-rail {
position: absolute;
left: 0; right: 0;
height: 3px;
background: var(--border-light);
border-radius: 2px;
}
.range-slider-track .rs-fill {
position: absolute;
height: 3px;
background: var(--amber-dim);
border-radius: 2px;
pointer-events: none;
}
/* Breakpoint labels rendered inside the track, floating just above the rail */
.rs-tick-label {
position: absolute;
bottom: calc(50% + 2px);
font-size: 0.6rem;
color: var(--text-dim);
white-space: nowrap;
pointer-events: none;
user-select: none;
line-height: 1;
}
/* Generic tick mark — position set inline via style="left:X%" */
.rs-tick {
position: absolute;
width: 2px;
height: 10px;
top: 50%;
margin-top: -5px;
background: var(--border-light);
border-radius: 1px;
pointer-events: none;
opacity: 0.7;
transform: translateX(-50%);
}
/* Midpoint tick mark — shown only on 2-segment segmented sliders */
.rs-tick-mid {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 10px;
top: 50%;
margin-top: -5px;
background: var(--border-light);
border-radius: 1px;
pointer-events: none;
opacity: 0.7;
}
/* Scale labels below track */
.rs-scale {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 0.68rem;
color: var(--text-dim);
opacity: 0.7;
user-select: none;
}
/* Variant: single centered value (used for price slider with tick labels in track) */
.rs-scale--center {
justify-content: center;
text-align: center;
}
/* Both range thumbs overlay each other */
.range-slider-track input[type="range"] {
position: absolute;
left: 0;
width: 100%;
height: 3px;
margin: 0;
padding: 0;
background: transparent;
border: none;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
outline: none;
}
/* Thumb: slim vertical grip */
.range-slider-track input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 7px; height: 14px;
border-radius: 3px;
background: var(--amber);
border: 1px solid var(--bg-card);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
cursor: pointer;
pointer-events: all;
transition: background 0.12s, transform 0.1s;
}
.range-slider-track input[type="range"]::-moz-range-thumb {
width: 7px; height: 14px;
border-radius: 3px;
background: var(--amber);
border: 1px solid var(--bg-card);
box-shadow: 0 1px 3px rgba(0,0,0,.35);
cursor: pointer;
pointer-events: all;
transition: background 0.12s;
}
.range-slider-track input[type="range"]:focus::-webkit-slider-thumb,
.range-slider-track input[type="range"]:hover::-webkit-slider-thumb {
background: var(--amber-light);
transform: scaleY(1.12);
}
.range-slider-track input[type="range"]:focus::-moz-range-thumb,
.range-slider-track input[type="range"]:hover::-moz-range-thumb {
background: var(--amber-light);
}
[data-theme="light"] .range-slider-track input[type="range"]::-webkit-slider-thumb { border-color: var(--bg); }
[data-theme="light"] .range-slider-track input[type="range"]::-moz-range-thumb { border-color: var(--bg); }
/* Column-header filter dropdowns removed — type/region/country filters live
in the advanced filter panel under the search box. */
/* ---- Table toolbar ---- */
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
gap: 1rem;
flex-wrap: wrap;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
/* ---- Per-page selector ---- */
.per-page-wrap {
display: flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.per-page-label {
color: var(--text-dim);
font-size: 0.84rem;
}
.per-page-select {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.84rem;
padding: 0.3rem 0.55rem;
cursor: pointer;
width: auto;
}
.per-page-select:focus { border-color: var(--amber-dim); outline: none; }
.results-count {
color: var(--text-dim);
font-size: 0.9rem;
margin: 0;
}
.results-count strong { color: var(--amber); }
.btn-sm {
font-size: 0.84rem;
padding: 0.38rem 0.9rem;
}
.btn-xs {
font-size: 0.78rem;
padding: 0.25rem 0.65rem;
}
/* ---- Column toggle panel ---- */
.col-toggle-wrap { position: relative; }
.col-toggle-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 0.6rem 0.75rem 0.5rem;
z-index: 300;
min-width: 190px;
box-shadow: var(--shadow);
}
.col-toggle-header {
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-dim);
padding-bottom: 0.45rem;
margin-bottom: 0.25rem;
border-bottom: 1px solid var(--border);
}
.col-toggle-panel label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.28rem 0.2rem;
color: var(--text-dim);
font-size: 0.875rem;
cursor: pointer;
border-radius: 4px;
transition: color 0.1s;
}
.col-toggle-panel label:hover { color: var(--cream); }
.col-toggle-panel input[type="checkbox"] {
width: auto;
accent-color: var(--amber);
cursor: pointer;
flex-shrink: 0;
}
.col-toggle-footer {
border-top: 1px solid var(--border);
margin-top: 0.4rem;
padding-top: 0.4rem;
}
.toggle-arrow { font-size: 0.75em; margin-left: 0.1em; }
/* ---- Whisky table ---- */
.whisky-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.whisky-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.whisky-table thead tr {
background: var(--bg-card);
}
.whisky-table th {
/* NOTE: not position:sticky. The wrap is overflow-x:auto, which makes it a
scroll container on BOTH axes, so a sticky `top: 60px` would offset the
header 60px down INSIDE the wrap (which never scrolls vertically) and
detach it from the body — the "rozjechane kolumny" bug. Keep it static. */
background: var(--bg-card);
box-shadow: 0 1px 0 var(--border-light); /* header/body separator */
padding: 0.65rem 1rem;
text-align: center;
color: var(--text-dim);
font-weight: 500;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.07em;
white-space: nowrap;
border-bottom: 1px solid var(--border-light);
}
/* Sortable columns: no icons — just a subtle highlight on hover to signal
they're clickable. The active sort still works on click (handled in JS). */
.whisky-table th.sortable {
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.whisky-table th.sortable:hover {
color: var(--cream);
background: rgba(251, 191, 36, 0.10); /* faint amber tint */
}
.whisky-table td {
padding: 0.4rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.whisky-table tbody tr:last-child td { border-bottom: none; }
.whisky-table tbody tr:hover td { background: var(--bg-card-hover); }
.whisky-table tbody tr[data-href] { cursor: pointer; }
/* Name cell */
.wt-name {
max-width: 480px;
}
/* Anonymous users have no Price/Actions columns, so the name column would
absorb the freed space and crowd the Shops column — narrow it a little. */
.whisky-table--anon .wt-name { max-width: 360px; }
/* Compact facts under the name — only shown on phones (≤560px) where the
ABV/age/type columns are hidden. */
.wt-name-meta {
display: none;
flex-wrap: wrap;
gap: 0.1rem 0.45rem;
margin-top: 0.2rem;
font-size: 0.72rem;
color: var(--text-dim);
}
.wt-name-inner {
display: flex;
align-items: center;
gap: 0.65rem;
}
.wt-name-text {
min-width: 0; /* allow text truncation inside flex */
}
/* Copy-name button */
.wt-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 2px 3px;
margin-left: 0.25em;
background: none;
border: none;
color: var(--text-dim);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
vertical-align: middle;
border-radius: 3px;
line-height: 1;
}
.whisky-row:hover .wt-copy-btn { opacity: 0.45; }
.wt-copy-btn:hover { opacity: 1 !important; color: var(--cream); background: var(--bg-hover); }
.wt-copy-btn--done { opacity: 1 !important; color: var(--amber) !important; }
.wt-name a {
color: var(--cream);
font-weight: 500;
line-height: 1.35;
transition: color 0.15s;
}
.wt-name a:hover { color: var(--amber-light); }
/* Bottle thumbnail */
.wt-thumb {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 56px;
}
.wt-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 2px;
opacity: 0;
transition: opacity 0.2s;
}
.core-star {
color: var(--amber);
font-size: 0.65rem;
vertical-align: middle;
margin-left: 0.35rem;
opacity: 0.75;
}
/* Numeric cells — right-aligned */
.wt-num, .wt-price, .wt-stores {
text-align: right;
white-space: nowrap;
}
.wt-price strong { color: var(--amber); }
.wt-price .currency { color: var(--text-dim); font-size: 0.8rem; }
/* Range separator */
.pr-sep { margin: 0 0.18em; color: var(--muted); font-weight: 400; }
/* Historical / out-of-stock price — grayed out */
.wt-price-hist { color: var(--muted); font-size: 0.85em; }
.wt-stores { color: var(--text-dim); }
.wt-na { color: var(--text-dim); }
.wt-shops-link {
color: var(--text-dim);
font-weight: 500;
transition: color 0.12s;
}
.wt-shops-link:hover { color: var(--amber); }
/* Price column — wider to accommodate range display */
.wt-col-cena { max-width: 130px; }
/* Shops column — numbers only, but the "Sklepy"/"Shops" header needs room;
max-width 58px clipped it to "SKLEP". Widen enough for the label to fit. */
.wt-col-sklepy { width: 64px; min-width: 60px; max-width: 90px; }
/* Location column — cap to prevent over-wide Speyside/Highlands cells */
.wt-col-lokalizacja { max-width: 90px; min-width: 64px; }
/* Rating column — compact */
.wt-col-rating { min-width: 40px; max-width: 58px; }
/* Core-portfolio column — hidden by default, toggled by column picker */
.wt-col-core { min-width: 36px; max-width: 72px; text-align: center; }
.wt-core { text-align: center; }
/* Right-align number column headers */
.wt-col-wiek, .wt-col-abv, .wt-col-cena, .wt-col-sklepy, .wt-col-rating {
text-align: right;
}
/* Cask column — SVG icons only in table, full labels on detail page */
.wt-col-cask { min-width: 56px; max-width: 130px; text-align: center; }
.wt-cask-cell { white-space: nowrap; text-align: center; }
.wt-cask-icons {
display: inline-flex;
flex-direction: column; /* stack the balanced rows */
gap: 1px;
align-items: center;
justify-content: center;
cursor: default;
}
/* One row of cask icons — pulled tight; barrels have ~4px transparent
padding each side, so a small negative margin overlaps only the empty
corners and brings the visible barrels closer without clipping. */
.wt-cask-row {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wt-cask-row svg { margin: 0 -3px; }
.wt-cask-icons svg {
display: block;
flex-shrink: 0;
opacity: 0.9;
transition: opacity 0.1s;
}
.wt-cask-icons:hover svg { opacity: 1; }
/* Destylarnia/Bottler — allow wrap in both header and cells */
.wt-col-destylarnia { min-width: 90px; max-width: 140px; line-height: 1.25; }
th.wt-col-destylarnia { white-space: normal; line-height: 1.35; }
.wt-col-destylarnia td,
table .wt-col-destylarnia { white-space: normal; }
/* Type column — nowrap to prevent "Single" / "Malt" split across lines */
.wt-type { white-space: nowrap; font-size: 0.82rem; color: var(--text-dim); }
.info-chip {
display: inline-block;
font-size: 0.67rem;
font-weight: 700;
padding: 0.15em 0.42em;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
vertical-align: middle;
margin-right: 0.2em;
white-space: nowrap;
}
.info-chip-cs { background: #3a2a10; color: var(--amber-light); }
.info-chip-ncf { background: #1c2e1e; color: #7ecfa0; }
.info-chip-nc { background: #1e2530; color: #7eafcf; }
.wt-cask {
font-size: 0.78rem;
color: var(--text-dim);
}
/* Whiskybase rating column */
.wt-rating { text-align: right; white-space: nowrap; }
.wb-score { font-weight: 600; color: var(--amber); }
.wb-votes { font-size: 0.75rem; color: var(--text-dim); }
/* Rating inherited from the 700 ml sibling (small-format bottles) */
.wb-score-inherited { cursor: help; border-bottom: 1px dotted var(--text-dim); }
/* ---- Quick-filter buttons ---- */
.quick-filters-bar {
margin: 0.75rem 0 0;
}
/* Collapse toggle button */
.qf-bar-toggle {
display: flex;
align-items: center;
gap: 0.35rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
padding: 0.2rem 0 0.35rem;
transition: color 0.12s;
line-height: 1;
}
.qf-bar-toggle:hover { color: var(--cream); }
.qf-bar-toggle-arrow { font-size: 0.65rem; }
.qf-bar-toggle-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--amber);
flex-shrink: 0;
}
.quick-filters-bar.qf-collapsed .qf-list { display: none; }
.quick-filters-bar.qf-collapsed .qf-bar-toggle { padding-bottom: 0; }
/* Outer row — groups sit side by side, wrap on small screens */
.qf-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.35rem 0;
}
/* Each labelled group */
.qf-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
padding: 0.1rem 0;
}
/* Group label — sits left of the buttons */
.qf-group-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
padding-right: 0.1rem;
align-self: center;
}
/* Thin vertical divider between groups */
.qf-separator {
width: 1px;
align-self: stretch;
min-height: 1.5rem;
background: var(--border-light);
margin: 0 0.65rem;
flex-shrink: 0;
}
/* Porto grape icon — hue-shifted to burgundy/bordo */
/* Cask icon inside quick-filter buttons — slight right gap, dim until active */
.qf-cask-icon {
margin-right: 0.32rem;
opacity: 0.85;
}
.qf-cask-btn.qf-active .qf-cask-icon { opacity: 1; }
.qf-btn {
display: inline-flex;
align-items: center;
padding: 0.32rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--border-light);
background: transparent;
color: var(--text-dim);
font-size: 0.84rem;
font-family: var(--font-sans);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.qf-btn:hover {
border-color: var(--amber-dim);
color: var(--cream);
}
.qf-btn.qf-active {
background: var(--amber);
border-color: var(--amber);
color: var(--btn-text);
font-weight: 600;
}
.qf-btn.qf-active:hover {
background: var(--amber-light);
border-color: var(--amber-light);
}
/* ── Segmented pill control (size filter) ──────────────────────── */
.qf-seg {
display: inline-flex;
border: 1px solid var(--border-light);
border-radius: 999px;
overflow: hidden;
}
.qf-seg .qf-btn {
border-radius: 0;
border: none;
border-right: 1px solid var(--border-light);
padding: 0.3rem 0.8rem;
margin: 0;
}
.qf-seg .qf-btn:first-child { border-radius: 999px 0 0 999px; }
.qf-seg .qf-btn:last-child { border-radius: 0 999px 999px 0; border-right: none; }
.qf-seg .qf-btn.qf-active {
background: var(--amber);
border-color: var(--amber);
color: var(--btn-text);
font-weight: 600;
box-shadow: 1px 0 0 var(--amber), -1px 0 0 var(--amber);
}
/* Legacy — kept so old bookmark URLs don't break anything */
.qf-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
align-self: center;
padding: 0 0.15rem;
}
/* ══════════════════════════════════════════════════════════════════
Unified filter box — collapsed (flat quick row) / expanded (full)
══════════════════════════════════════════════════════════════════ */
.filter-primary-row { flex-wrap: wrap; }
.filter-primary-row .btn-reset { flex-shrink: 0; }
/* Advanced panel: visible only when the box is expanded */
.filters:not(.is-expanded) .filter-advanced { display: none; }
/* ── Chips container ─────────────────────────────────────────────── */
.filter-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.5rem;
margin-top: 0.85rem;
}
.filter-quick-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-right: 0.15rem;
white-space: nowrap;
}
.filters.is-expanded .filter-quick-label { display: none; }
/* ── Collapsed: flatten groups, hide labels / separators / non-quick ── */
.filters:not(.is-expanded) .filter-chips .qf-group { display: contents; }
.filters:not(.is-expanded) .filter-chips .qf-group-label,
.filters:not(.is-expanded) .filter-chips .qf-separator { display: none; }
.filters:not(.is-expanded) .filter-chips .qf-btn:not(.qf-quick) { display: none; }
/* Size segment collapses to the lone 0,7l toggle, styled as a standalone pill */
.filters:not(.is-expanded) .qf-seg:not(.qf-seg-peat) { border: none; overflow: visible; width: auto; }
.filters:not(.is-expanded) .qf-seg:not(.qf-seg-peat) .qf-btn.qf-quick {
border: 1px solid var(--border-light);
border-radius: 999px;
}
.filters:not(.is-expanded) .qf-seg:not(.qf-seg-peat) .qf-btn.qf-active { box-shadow: none; }
/* ── Expanded: groups render as labelled rows (base .qf-group flex applies) ── */
.filters.is-expanded .filter-chips { gap: 0.35rem 0; }
/* Peat pair: a connected 2-button segment in both states (both are .qf-quick) */
.qf-seg-peat { flex-shrink: 0; }
/* ── Multi-select Type dropdown (checkbox popover) ───────────────── */
.filter-type-select { position: relative; flex: 0 1 auto; }
.type-select-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 150px;
padding: 0.5rem 0.75rem;
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
font-family: var(--font-sans);
font-size: 0.9rem;
cursor: pointer;
transition: border-color 0.15s;
}
.type-select-btn:hover,
.type-select-btn[aria-expanded="true"] { border-color: var(--amber-dim); }
.type-select-label { flex: 1; text-align: left; }
.type-select-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.3rem;
border-radius: 999px;
background: var(--amber);
color: var(--btn-text);
font-size: 0.72rem;
font-weight: 700;
}
.type-select-caret { color: var(--text-dim); font-size: 0.7rem; }
.type-select-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 30;
min-width: 210px;
max-height: 280px;
overflow-y: auto;
padding: 0.4rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.type-select-opt {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.4rem 0.5rem;
border-radius: var(--radius);
cursor: pointer;
font-size: 0.88rem;
color: var(--text);
}
.type-select-opt:hover { background: var(--bg); }
.type-select-opt input {
width: auto;
margin: 0;
accent-color: var(--amber);
cursor: pointer;
}
/* The class display rules above beat the UA `[hidden] { display:none }`, so the
hidden attribute needs an explicit override (same gotcha as .tasting-list). */
.type-select-panel[hidden],
.type-select-count[hidden] { display: none; }
/* ── Quick filters — mobile tile layout ───────────────────────────────
On phones the inline pill rows wrapped awkwardly between groups. Instead
each filter GROUP becomes its own bordered tile: the group label sits as a
heading on its own line, with the pills wrapping beneath it. Predictable,
never breaks mid-group. The whole bar still collapses via #qf-bar-toggle,
which here becomes a full-width tappable header. */
@media (max-width: 600px) {
/* Toggle becomes a prominent full-width bar so the section is easy to fold away */
.qf-bar-toggle {
width: 100%;
justify-content: space-between;
padding: 0.7rem 0.85rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 0.74rem;
}
.quick-filters-bar:not(.qf-collapsed) .qf-bar-toggle { margin-bottom: 0.55rem; }
.qf-separator { display: none; }
/* One tile per row — clean and never breaks across a group boundary */
.qf-list {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.qf-group {
flex-wrap: wrap;
align-items: center;
gap: 0.38rem;
padding: 0.55rem 0.6rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}
/* Label on its own line above the pills */
.qf-group-label {
flex: 0 0 100%;
font-size: 0.64rem;
color: var(--amber);
padding: 0;
margin-bottom: 0.1rem;
}
/* Compact, still-tappable chips so groups pack tighter (Polecane 1 row, Beczka 2) */
.qf-btn {
font-size: 0.8rem;
padding: 0.36rem 0.62rem;
min-height: 34px;
}
/* Smaller cask icon so Beczka's 5 chips fit two rows (3 + 2) */
.qf-btn .qf-cask-icon { width: 16px; height: 16px; margin-right: 0.2rem; }
/* Size control spans the tile, buttons share width equally */
.qf-seg { width: 100%; }
.qf-seg .qf-btn { flex: 1; justify-content: center; min-height: 34px; }
/* Unified filter box (mobile): search + dropdown go full-width */
.filter-q-input { flex: 1 1 100%; }
.filter-type-select { flex: 1 1 100%; }
.type-select-btn { width: 100%; }
.type-select-panel { left: 0; right: 0; min-width: 0; }
.filters:not(.is-expanded) .filter-chips { gap: 0.4rem; }
/* Sliders stack full-width so their tick labels (1 tys. / 10 tys. …) aren't cramped */
.filter-grid .range-slider-wrap { flex: 1 1 100%; }
}
/* ---- Pagination ---- */
.pagination-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.pg-btn, .pg-link {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
min-width: 34px;
padding: 0 0.65rem;
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-dim);
background: var(--bg-card);
border: 1px solid var(--border-light);
text-decoration: none;
transition: background 0.12s, color 0.12s, border-color 0.12s;
white-space: nowrap;
}
.pg-btn:hover, .pg-link:hover {
border-color: var(--amber-dim);
color: var(--cream);
}
.pg-current {
background: var(--amber);
border-color: var(--amber);
color: var(--btn-text);
font-weight: 700;
cursor: default;
}
.pg-current:hover {
background: var(--amber);
border-color: var(--amber);
color: var(--btn-text);
}
.pg-disabled {
opacity: 0.35;
pointer-events: none;
cursor: default;
}
.pg-ellipsis {
display: inline-flex;
align-items: center;
color: var(--text-dim);
padding: 0 0.2rem;
font-size: 0.875rem;
}
.pg-pages {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* ---- Featured / Promo page ---- */
.featured-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 460px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 3rem;
}
.featured-hero-img {
background: var(--bg-image);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.featured-hero-img img {
height: 100%;
width: 100%;
object-fit: contain;
padding: 2.5rem;
max-height: 460px;
}
.featured-hero-img-placeholder {
font-size: 9rem;
opacity: 0.18;
}
.featured-hero-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 2.5rem;
background: linear-gradient(135deg, #1c2030 0%, #0f1117 100%);
border-left: 1px solid var(--border);
}
.featured-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--amber);
background: rgba(200,135,42,0.12);
border: 1px solid rgba(200,135,42,0.25);
border-radius: 999px;
padding: 0.25em 0.8em;
width: fit-content;
margin-bottom: 1.25rem;
}
.featured-hero-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700;
color: var(--cream);
line-height: 1.2;
margin-bottom: 0.75rem;
}
.featured-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.feat-tag {
font-size: 0.8rem;
color: var(--text-dim);
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-light);
border-radius: 4px;
padding: 0.2em 0.6em;
}
.featured-hero-desc {
color: var(--text-dim);
font-size: 0.975rem;
line-height: 1.65;
margin-bottom: 1.75rem;
}
.featured-hero-price {
margin-bottom: 1.75rem;
}
.featured-hero-price .price-label {
font-size: 0.78rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.2rem;
}
.featured-hero-price .price-range {
font-size: 1.5rem;
font-weight: 700;
color: var(--amber);
font-family: var(--font-serif);
}
.featured-hero-price .price-shops {
font-size: 0.85rem;
color: var(--text-dim);
margin-top: 0.15rem;
}
.featured-hero-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--amber);
color: var(--btn-text);
font-weight: 700;
font-size: 0.95rem;
padding: 0.7rem 1.6rem;
border-radius: var(--radius);
transition: background 0.15s;
width: fit-content;
}
.featured-hero-cta:hover { background: var(--amber-light); color: var(--btn-text); }
/* ---- Feature cards grid ---- */
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 3rem;
}
.feat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s, transform 0.15s;
}
.feat-card:hover {
border-color: var(--amber-dim);
transform: translateY(-3px);
}
.feat-card-img {
height: 220px;
background: var(--bg-image);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.feat-card-img img {
height: 100%;
width: 100%;
object-fit: contain;
padding: 0.5rem;
}
.feat-card-img-placeholder {
font-size: 5rem;
opacity: 0.18;
}
.feat-card-body {
padding: 1.25rem 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.feat-card-origin {
font-size: 0.75rem;
color: var(--amber);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.feat-card-name {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
color: var(--cream);
line-height: 1.3;
}
.feat-card-specs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.feat-card-desc {
font-size: 0.875rem;
color: var(--text-dim);
line-height: 1.55;
flex: 1;
}
.feat-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
}
.feat-card-price strong { color: var(--amber); font-size: 1.05rem; }
.feat-card-price .feat-price-unit { color: var(--text-dim); font-size: 0.8rem; }
.feat-card-shops { font-size: 0.78rem; color: var(--text-dim); }
/* ---- Flavour chips (no bars/percentages) ---- */
.feat-flavor-chips,
.feat-card-flavor-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.feat-flavor-chip {
font-size: 0.75rem;
color: var(--text);
background: rgba(200,135,42,0.08);
border: 1px solid rgba(200,135,42,0.2);
border-radius: 999px;
padding: 0.2em 0.65em;
white-space: nowrap;
}
.feat-flavor-chip--sm {
font-size: 0.7rem;
padding: 0.15em 0.55em;
}
/* ---- Guest availability note ---- */
.feat-availability {
margin-bottom: 1.25rem;
}
.feat-shops-note {
font-size: 0.88rem;
color: var(--text-dim);
}
.feat-card-footer--guest {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
/* ---- Why compare section ---- */
.why-compare {
text-align: center;
padding: 3rem 0 2.5rem;
border-top: 1px solid var(--border);
margin-bottom: 2.5rem;
}
.why-compare h2 {
font-family: var(--font-serif);
font-size: 1.75rem;
color: var(--cream);
margin-bottom: 0.5rem;
}
.why-compare .sub {
color: var(--text-dim);
font-size: 1rem;
margin-bottom: 2.5rem;
}
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.why-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
text-align: left;
}
.why-icon {
font-size: 2rem;
margin-bottom: 0.9rem;
display: block;
}
.why-card h3 {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--cream);
margin-bottom: 0.5rem;
}
.why-card p {
font-size: 0.875rem;
color: var(--text-dim);
line-height: 1.6;
}
/* ---- Featured CTA strip ---- */
.featured-cta-strip {
background: linear-gradient(135deg, #1a2040 0%, #0f1117 100%);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 2.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 3rem;
}
.featured-cta-strip h2 {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--cream);
margin-bottom: 0.35rem;
}
.featured-cta-strip p {
color: var(--text-dim);
font-size: 0.95rem;
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
.featured-hero { grid-template-columns: 1fr; min-height: auto; }
.featured-hero-img { height: 280px; }
.featured-hero-body { border-left: none; border-top: 1px solid var(--border); }
.featured-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: 1fr; }
.featured-cta-strip { flex-direction: column; text-align: center; }
}
@media (max-width: 700px) {
.detail-header { grid-template-columns: 1fr; }
.detail-image { height: 220px; }
nav { gap: 1rem; }
.whisky-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Hide by data-col so BOTH the | and the | drop (th has the wt-col-*
class, td only has data-col — class-only hiding would desync the columns). */
[data-col="destylarnia"], [data-col="lokalizacja"] { display: none; }
.featured-grid { grid-template-columns: 1fr; }
.pagination-bar { gap: 0.3rem; }
.pg-btn { font-size: 0.8rem; padding: 0 0.5rem; }
}
/* Phones: drop ABV/age/type columns and fold them into a meta line under the
name, so the table fits without horizontal scroll but keeps the key facts. */
@media (max-width: 560px) {
[data-col="abv"], [data-col="wiek"], [data-col="typ"] { display: none; }
.wt-name-meta { display: flex; }
.whisky-table { font-size: 0.82rem; }
.wt-name-inner { gap: 0.5rem; }
}
/* ---- Regulamin / static prose pages ---- */
.legal-page {
max-width: 720px;
margin: 2.5rem auto 4rem;
padding: 0 1rem;
}
.legal-page h1 {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--cream);
margin-bottom: 2rem;
}
.legal-page section {
margin-bottom: 2rem;
}
.legal-page h2 {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--amber-light);
margin-bottom: 0.6rem;
}
.legal-page p {
color: var(--text);
line-height: 1.75;
margin-bottom: 0.75rem;
}
.legal-page h2 {
margin-top: 2rem;
}
.legal-page .legal-updated {
font-size: 0.8rem;
color: var(--text-dim);
margin-top: -1.25rem;
margin-bottom: 2rem;
letter-spacing: 0.02em;
}
.legal-page h3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--cream);
margin-top: 1.5rem;
margin-bottom: 0.4rem;
}
.legal-page ul,
.legal-page ol {
padding-left: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-page li {
color: var(--text);
line-height: 1.75;
margin-bottom: 0.3rem;
}
.legal-page code {
font-family: var(--font-sans); /* not monospace — the only render is "robots.txt" */
font-size: 0.82em;
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--border);
padding: 0.1em 0.35em;
border-radius: 3px;
color: var(--amber-light);
}
/* Sekcja z podsekcjami — wizualne oddzielenie od prostych §1-7 */
.legal-page section.section-heavy {
border-top: 1px solid var(--border);
padding-top: 1.75rem;
margin-top: 0.5rem;
}
[data-theme="light"] .legal-page code {
background: rgba(0, 0, 0, 0.04);
}
/* =========================================
Light mode — variable overrides
========================================= */
[data-theme="light"] {
--bg: #ffffff;
--bg-card: #ffffff;
--bg-card-hover: #edf7f1;
--bg-image: #eef0f2;
--border: #c0d8c8;
--border-light: #d2e8da;
--amber: #1c5c40; /* bottle green — main accent */
--amber-light: #237a52; /* hover/lighter variant */
--amber-dim: #4a8a6c; /* muted variant */
--logo-accent: #111111; /* logo lockup — black on the light header */
--logo-accent-hover: #000000;
--cream: #182820;
--cream-dim: #384e40;
--text: #182820;
--text-dim: #527060;
--green: #1c5c40;
--red: #7a2020;
--btn-text: #ffffff;
--shadow: 0 2px 16px rgba(18,40,26,.10);
}
/* ---- Header + announcement (hardcoded bg) ---- */
[data-theme="light"] .announcement-bar {
background: #e8f2ec;
border-bottom-color: var(--border);
}
[data-theme="light"] .site-header {
background: rgba(255,255,255,.97);
}
[data-theme="light"] .lang-switch a:hover {
background: rgba(18,40,26,.06);
color: var(--cream);
}
[data-theme="light"] .lang-switch .lang-active {
background: rgba(28,92,64,.13);
}
[data-theme="light"] .lang-switch::before {
color: var(--border);
}
/* ---- Theme-toggle button ---- */
.theme-btn {
background: transparent;
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text-dim);
font-size: 1rem;
line-height: 1;
padding: 0.25rem 0.45rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
flex-shrink: 0;
margin-left: 0.4rem;
}
.theme-btn:hover {
border-color: var(--amber-dim);
color: var(--amber);
}
/* ---- Card / image backgrounds (hardcoded) ---- */
[data-theme="light"] .card-image {
background: var(--bg-image);
}
[data-theme="light"] .detail-image {
background: var(--bg-image);
}
[data-theme="light"] .featured-hero-img {
background: var(--bg-image);
}
[data-theme="light"] .featured-hero-body {
background: linear-gradient(135deg, #e8f2ec 0%, #f3f7f4 100%);
}
[data-theme="light"] .feat-card-img {
background: var(--bg-image);
}
/* ---- Inline tags / feat-tag ---- */
[data-theme="light"] .feat-tag {
background: rgba(0,0,0,.05);
}
/* ---- Badges (hardcoded palette) ---- */
[data-theme="light"] .badge-single_malt { background: #cce8d8; color: #145238; }
[data-theme="light"] .badge-blended { background: #d5e4ed; color: #1a3a5c; }
[data-theme="light"] .badge-blended_malt { background: #e2d5ed; color: #3a1a5c; }
[data-theme="light"] .badge-grain { background: #d8ede2; color: #1c5c40; }
[data-theme="light"] .badge-single_grain { background: #d0e8da; color: #1c5040; }
[data-theme="light"] .badge-region { background: #d8ede2; color: var(--amber); }
[data-theme="light"] .badge-release { background: #edd5d5; color: #8b2020; }
[data-theme="light"] .badge-ib { background: #d5eaed; color: #1a4a5c; }
/* ---- Stock & spec chips ---- */
[data-theme="light"] .in-stock { background: #d5ede0; color: #1a5c30; }
[data-theme="light"] .out-of-stock { background: #edd5d5; color: #8b2020; }
[data-theme="light"] .info-chip-cs { background: #cce8d8; color: var(--amber); }
[data-theme="light"] .info-chip-ncf { background: #d2edd8; color: #1a5c28; }
[data-theme="light"] .info-chip-nc { background: #d2e4ed; color: #1a3a5c; }
/* ---- Featured CTA strip ---- */
[data-theme="light"] .featured-cta-strip {
background: linear-gradient(135deg, #e8f2ec 0%, #f3f7f4 100%);
}
/* ---- Why-compare cards (already use CSS vars but just in case) ---- */
[data-theme="light"] .why-compare {
border-top-color: var(--border);
}
/* ═══════════════════════════════════════════════════════
SVG icon sprite helpers
════════════════════════════════════════════════════════ */
/* Base: inherit stroke from parent text colour; no fill by default. */
.icon {
display: inline-block;
vertical-align: middle;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
/* Size variants */
.icon--14 { width: 14px; height: 14px; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--26 { width: 26px; height: 26px; }
.icon--52 { width: 52px; height: 52px; }
/* ═══════════════════════════════════════════════════════
Age gate — standalone full-screen window (no site chrome,
no whisky imagery before age is confirmed)
════════════════════════════════════════════════════════ */
.age-gate-body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.age-gate-wrap {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
/* subtle neutral depth — no bottles/whisky imagery */
background:
radial-gradient(120% 90% at 50% 0%, rgba(251,191,36,0.06), transparent 60%),
var(--bg);
}
.age-gate-card {
width: 100%;
max-width: 440px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
padding: 2.6rem 2rem 2rem;
text-align: center;
}
.age-gate-logo {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
margin-bottom: 1.6rem;
}
.age-gate-logo-img {
width: 44px;
height: 44px;
object-fit: contain;
filter: invert(1); /* dark mode: black logo → white */
}
[data-theme="light"] .age-gate-logo-img { filter: none; }
.age-gate-name {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--cream);
letter-spacing: .01em;
}
.age-gate-heading {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 700;
color: var(--cream);
margin: 0 0 .8rem;
line-height: 1.25;
}
.age-gate-body-text {
color: var(--text-dim);
font-size: .95rem;
line-height: 1.6;
margin: 0 auto 1.8rem;
max-width: 34ch;
}
.age-gate-buttons {
display: flex;
flex-direction: column;
gap: .65rem;
}
.age-gate-buttons .age-gate-yes,
.age-gate-buttons .age-gate-no {
width: 100%;
justify-content: center;
padding: .7rem 1rem;
font-size: .95rem;
}
.age-gate-note {
margin: 1.6rem 0 0;
font-size: .76rem;
color: var(--text-dim);
line-height: 1.5;
}
/* Language switch — top-right of the gate window */
.age-gate-lang {
position: absolute;
top: 1.1rem;
right: 1.3rem;
display: flex;
align-items: center;
gap: .25rem;
font-size: .8rem;
font-weight: 600;
letter-spacing: .05em;
}
.age-gate-lang a {
color: var(--text-dim);
text-transform: uppercase;
padding: .15em .45em;
border-radius: 3px;
text-decoration: none;
transition: color .15s, background .15s;
}
.age-gate-lang a:hover { color: var(--cream); background: rgba(127,127,127,0.12); }
.age-gate-lang .lang-active {
color: var(--amber);
text-transform: uppercase;
padding: .15em .45em;
border-radius: 3px;
background: rgba(200,135,42,0.14);
}
/* ═══════════════════════════════════════════════════════
Auth pages (login / register)
════════════════════════════════════════════════════════ */
.auth-page {
display: flex;
justify-content: center;
padding: 3rem 1rem;
}
.auth-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 2.5rem 2rem;
width: 100%;
max-width: 420px;
}
/* Wider variant for feedback / deletion forms */
.auth-card--wide { max-width: 560px; }
.auth-card h1 {
font-family: var(--font-serif); /* --font-display was never defined → fell back */
font-size: 1.6rem;
margin-bottom: 1.5rem;
color: var(--amber);
}
.auth-error {
background: rgba(220, 60, 60, .12);
border: 1px solid rgba(220, 60, 60, .35);
border-radius: 6px;
padding: .7rem 1rem;
margin-bottom: 1.2rem;
font-size: .9rem;
color: #e87878;
}
.auth-info {
background: rgba(58, 122, 86, .14);
border: 1px solid rgba(58, 122, 86, .4);
border-radius: 6px;
padding: .7rem 1rem;
margin-bottom: 1.2rem;
font-size: .9rem;
color: #5cba8a;
}
/* Email verification code input — large, spaced digits */
.verify-code-input {
text-align: center;
font-size: 1.6rem;
letter-spacing: 0.5rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.auth-resend-form {
margin-top: 1rem;
text-align: center;
}
.auth-form .form-group {
margin-bottom: 1rem;
}
.auth-form label {
display: block;
font-size: .85rem;
color: var(--text-muted);
margin-bottom: .3rem;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="date"] {
width: 100%;
padding: .55rem .8rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--input-bg, var(--bg));
color: var(--text);
font-size: 1rem;
box-sizing: border-box;
}
.auth-form input:focus {
outline: 2px solid var(--amber);
outline-offset: 1px;
}
/* Two-column row (first name + last name) — collapses on narrow screens */
.auth-form .form-row {
display: flex;
gap: 0.75rem;
}
.auth-form .form-row .form-group {
flex: 1;
min-width: 0;
}
@media (max-width: 420px) {
.auth-form .form-row { flex-direction: column; gap: 0; }
}
.auth-checkbox,
.form-remember {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-bottom: .9rem;
font-size: .85rem;
color: var(--text-muted);
cursor: pointer;
}
.auth-checkbox input[type="checkbox"],
.form-remember input[type="checkbox"] {
margin-top: .15rem;
flex-shrink: 0;
}
/* "Remember me" sits between the password field and the submit button —
slightly tighter top margin since it follows an input, not another label. */
.form-remember { margin-top: .45rem; }
.btn-full { width: 100%; margin-top: .5rem; }
/* Google OAuth button */
.btn-google {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
padding: .6rem 1rem;
background: #fff;
color: #3c4043;
border: 1px solid #dadce0;
border-radius: var(--radius, 6px);
font-size: .92rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background .15s, box-shadow .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.btn-google svg { flex-shrink: 0; }
.auth-divider {
display: flex;
align-items: center;
gap: .75rem;
margin: 1rem 0;
color: var(--text-dim);
font-size: .8rem;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.auth-sub {
margin-top: -.4rem;
margin-bottom: 1.2rem;
font-size: .88rem;
color: var(--text-muted);
}
.auth-switch {
margin-top: 1.2rem;
font-size: .88rem;
color: var(--text-muted);
text-align: center;
}
.auth-forgot {
margin-top: .6rem;
font-size: .82rem;
text-align: center;
}
.auth-forgot a {
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-forgot a:hover { color: var(--amber); }
.auth-intro {
font-size: .9rem;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 1.2rem;
}
/* ── Price gate (detail + listing) ── */
.price-gate {
padding: 2rem;
border: 1px dashed var(--border);
border-radius: 8px;
text-align: center;
}
.price-gate-heading {
font-weight: 600;
margin-bottom: .5rem;
}
.price-gate-text {
font-size: .9rem;
color: var(--text-muted);
margin-bottom: 1.2rem;
}
.price-gate-or { color: var(--text-muted); }
.price-gate-link {
text-decoration: none;
opacity: .5;
font-size: .9rem;
}
.price-gate-link:hover { opacity: 1; }
/* ── Nav auth links ── */
.btn-nav-cta {
border: 1px solid var(--amber);
border-radius: 5px;
padding: .2rem .7rem !important;
color: var(--amber) !important;
}
.btn-nav-cta:hover { background: var(--amber); color: var(--bg) !important; }
[data-theme="light"] .auth-error { color: #c0392b; }
[data-theme="light"] .price-gate { border-color: #b8d8c4; }
/* ═══════════════════════════════════════════════════════
Nav basket icon
════════════════════════════════════════════════════════ */
.nav-basket {
position: relative;
display: inline-flex;
align-items: center;
color: var(--text-dim) !important;
font-size: 1.05rem;
text-decoration: none;
transition: color 0.15s;
}
.nav-basket:hover { color: var(--amber-light) !important; }
.basket-icon { display: inline-flex; align-items: center; line-height: 1; }
.basket-count {
position: absolute;
top: -7px;
right: -10px;
background: var(--amber);
color: var(--bg);
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════
Add-to-basket button (whisky detail + listing table)
════════════════════════════════════════════════════════ */
.price-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.price-section-header h2 { margin-bottom: 0; }
.basket-form { display: inline; }
.btn-basket {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem .9rem;
border: 1px solid var(--amber);
border-radius: 6px;
background: transparent;
color: var(--amber);
font-size: .85rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
text-decoration: none;
white-space: nowrap;
}
.btn-basket:hover {
background: var(--amber);
color: var(--bg);
}
.btn-basket--in {
background: var(--amber-dim);
color: var(--cream);
border-color: var(--amber-dim);
}
.btn-basket--in:hover {
background: var(--red);
border-color: var(--red);
color: var(--cream);
}
.btn-basket--guest {
border-color: var(--border);
color: var(--text-dim);
}
.btn-basket--guest:hover { border-color: var(--amber); color: var(--amber); }
/* Table actions column (journal + basket combined) */
.wt-col-actions { width: 5rem; padding: 0 0.4rem !important; }
.wt-actions-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
/* form is block-level by spec; display:contents makes the |