/*
 * OffersCheck design layer. Loaded LAST on every page (OffersCheck_Frontend_Assets::designCssLink, after Bootstrap 2 and the inline
 * styles of the controllers), so it can replace the look of all page types without touching their markup: tokens, type, header, search,
 * buttons, cards, tables, offer tiles, product page, home, footer, hubs. Documentation: DESIGN.md, docs/DESIGN-SYSTEM.md.
 * Rules: no web fonts (system stack), no layout-shifting effects, every colour from the tokens below, prices in tabular numerals.
 */

:root {
	--ink: #1d1f4b;          /* headings: the logo's indigo, a touch darker for text */
	--text: #2a2e45;         /* body text, 12.9:1 on white */
	--muted: #596075;        /* secondary text, 6.2:1 on white */
	--bg: #f3f5f9;           /* page ground */
	--surface: #ffffff;      /* cards, header, tables */
	--surface-2: #f8f9fc;    /* quiet fill: table heads, inputs at rest, hover rows */
	--line: #e2e6ee;         /* hairlines */
	--line-strong: #c9d0dd;  /* input borders */
	--action: #1f56c4;       /* links and buttons, 6.6:1 on white */
	--action-hover: #153f98;
	--action-soft: #e8effc;
	--good: #2a6f0e;         /* savings and record lows, text 6.2:1 */
	--good-soft: #e7f4da;
	--mark: #8cc01a;         /* the logo's check mark: small marks only, never text */
	--warn: #8a4b00;
	--warn-soft: #fff1d6;
	--bad: #a31d1d;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(22, 26, 70, 0.06), 0 4px 16px rgba(22, 26, 70, 0.05);
	--shadow-hover: 0 2px 4px rgba(22, 26, 70, 0.08), 0 10px 28px rgba(22, 26, 70, 0.10);
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--ring: 0 0 0 3px rgba(31, 86, 196, 0.28);
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	background: var(--bg) !important;
	background-image: none !important;
	color: var(--text) !important;
	font-family: var(--font) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
#body { font-family: var(--font); background: transparent; }
::selection { background: #cddcfa; color: var(--ink); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-rendering: optimizeLegibility;
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important; margin: 18px 0 8px; text-wrap: balance; }
h2 { font-size: 1.3rem; margin: 28px 0 10px; text-wrap: balance; }
h3 { font-size: 1.1rem; margin: 20px 0 8px; }
h4 { font-size: 1rem; margin: 8px 0 4px; }
p { margin: 0 0 12px; }
small, .small { font-size: 0.85rem; color: var(--muted); }
strong, b { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
img { max-width: 100%; }
table, .price, .priceTag, .num, .masonryItem, .archive-table, .stats-table { font-variant-numeric: tabular-nums; }

a { color: var(--action); text-decoration: none; text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--action-hover) !important; text-decoration: underline; }
.hoverlink { color: var(--action) !important; margin-top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--action);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- page frame ---------- */
#body.container { padding-top: 14px; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#body.container { flex: 1 0 auto; }
@media (max-width: 767px) { #body.container { width: 100%; box-sizing: border-box; } } /* a flex child with auto margins would shrink to its content width */
footer { margin-top: auto; flex-shrink: 0; }
@media (min-width: 1200px) { .container { width: 1170px; } }
main#main { padding-bottom: 8px; }
#main .row { margin-top: 0; }
#main .row + .row { margin-top: 14px; }

/* ---------- header: logo, search, account ---------- */
header { display: none; }
#body > nav { max-height: none; margin: 0 0 14px; }
main nav { max-height: none; } /* default.css limits every nav to 80px (the menu bar) */
#navbar.navbar { margin: 0; min-height: 0; }
#navbar .navbar-inner {
	background: var(--surface);
	background-image: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	min-height: 0;
	padding: 8px 16px;
	filter: none;
}
#navbar .container { width: auto; }
#navbar ul.nav {
	display: flex;
	align-items: center;
	gap: 16px;
	float: none;
	margin: 0;
	list-style: none;
}
#navbar ul.nav > li { float: none; padding: 0; margin: 0; }
#navbar ul.nav > li:first-child a { display: block; padding: 0 !important; }
#navbar ul.nav > li:first-child img { display: block; height: 40px; width: auto; }
#navbar .inputSearchSmall { cursor: default !important; }
#navbar ul.nav > li:nth-child(2) { flex: 1 1 auto; min-width: 0; }
#navbar ul.nav > li:nth-child(3) { margin-left: auto; }
#navbar ul.nav > li > a.hdr-link { display: block; padding: 8px 12px !important; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; white-space: nowrap; }
#navbar ul.nav > li > a.hdr-link:hover { background: var(--surface-2); color: var(--action) !important; text-decoration: none; }
#navbar ul.nav > li:nth-child(n+5) a { color: var(--ink); font-weight: 600; }
#search2 { margin: 0; padding: 0; max-width: 560px; }
#search2.input-prepend.input-append { display: block; font-size: 16px; white-space: normal; }
#search2 form { display: flex; align-items: center; gap: 8px; margin: 0; }
#search2 .add-on { display: none; }
#search2 input, #search2 input.span3 {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 42px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 14px 0 42px !important;
	border: 1px solid var(--line-strong);
	border-radius: 999px !important;
	max-width: none;
	background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23596075' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px center / 20px 20px;
	color: var(--text);
	font-size: 16px;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
#search2 input:focus { background-color: var(--surface); border-color: var(--action); box-shadow: var(--ring); outline: none; }
#search2 .btn { flex: 0 0 auto; height: 42px; padding: 0 22px; border-radius: 999px; margin: 0; background: var(--action) none; border-color: var(--action); color: #fff; }
#search2 .btn:hover { background: var(--action-hover) none; border-color: var(--action-hover); color: #fff; }

/* ---------- buttons and forms ---------- */
.btn, button, input[type="submit"] {
	display: inline-block;
	box-sizing: border-box;
	padding: 9px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface) none;
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover, button:hover, input[type="submit"]:hover { background: var(--surface-2) none; border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn-primary, .btn.btn-primary, button.btn-primary {
	background: var(--action) none;
	border-color: var(--action);
	color: #fff;
}
.btn-primary:hover, .btn.btn-primary:hover { background: var(--action-hover) none; border-color: var(--action-hover); color: #fff; }
.btn-large { padding: 12px 24px; font-size: 16px; }
.btn[disabled], button[disabled] { opacity: 0.55; cursor: default; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], select, textarea {
	box-sizing: border-box;
	height: auto;
	min-height: 42px;
	padding: 9px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--action); box-shadow: var(--ring); outline: none; }
label { font-weight: 600; color: var(--ink); }
.well { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.alert { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); text-shadow: none; padding: 12px 16px; }
.alert-success { background: var(--good-soft); border-color: #cfe6bb; color: var(--good); }
.alert-error, .alert-danger { background: #fdecec; border-color: #f4c9c9; color: var(--bad); }
.alert-info { background: var(--action-soft); border-color: #cfdcf6; color: var(--action-hover); }
.label, .badge { border-radius: 999px; text-shadow: none; font-weight: 600; padding: 2px 10px; background: var(--action-soft); color: var(--action-hover); }
.label-success { background: var(--good-soft); color: var(--good); }
.label-info { background: var(--action-soft); color: var(--action-hover); }

/* forms: Bootstrap 2 horizontal forms as a label/field grid, no icon boxes */
.form-horizontal .control-group { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 4px 18px; align-items: center; margin: 0 0 14px; }
.form-horizontal .control-group::before, .form-horizontal .control-group::after { display: none; }
.form-horizontal .control-label { float: none; width: auto; padding: 0; margin: 0; text-align: right; }
.form-horizontal .controls { margin-left: 0; }
.form-horizontal .controls > div { float: none !important; }
.input-prepend .add-on, .input-append .add-on { display: none; }
.input-prepend input, .input-append input, .form-horizontal input[type="text"], .form-horizontal input[type="email"], .form-horizontal input[type="password"], .form-horizontal select, .form-horizontal textarea {
	width: 100%;
	max-width: 440px;
	border-radius: var(--radius-sm) !important;
	margin: 0;
}
textarea { width: 100%; max-width: 100%; }
@media (max-width: 600px) { .form-horizontal .control-group { grid-template-columns: 1fr; } .form-horizontal .control-label { text-align: left; } }

/* ---------- breadcrumbs ---------- */
nav.seo-crumbs, ul.breadcrumb { color: var(--muted); font-size: 14px; }
nav.seo-crumbs { margin: 6px 0 2px; }
nav.seo-crumbs .divider, ul.breadcrumb .divider { color: var(--line-strong); padding: 0 4px; }
ul.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	list-style: none;
	margin: 0 0 14px;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: none;
	opacity: 1;
}
ul.breadcrumb > li { display: inline-flex; align-items: center; float: none; padding: 0; text-shadow: none; }
ul.breadcrumb li a { color: var(--action); }
ul.breadcrumb > li { gap: 6px; }
ul.breadcrumb > li > a:has(> [class^="logo-"]), ul.breadcrumb > li > a:has(> .btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
ul.breadcrumb > li > a:has(> [class^="logo-"]):hover, ul.breadcrumb > li > a:has(> .btn):hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
ul.breadcrumb a > .btn { border: 0; background: none; box-shadow: none; padding: 0 4px; color: var(--ink); font-weight: 700; }
ul.breadcrumb > li > .divider { display: none; }
ul.breadcrumb > li:last-child, ul.breadcrumb > .active { color: var(--muted); }

/* ---------- cards: every framed block of every page type ---------- */
.seo-intro, .archive-strip, .archive-block, .archive-basis, .product-context, .priceintel, .pricechart-box, .seo-related, #offerGroup,
.stats-box, .hub-box, .discover-card, .well, .rhythm, .methodology, .sector-intro, .staples-intro, .ebay-later, .pricehistory-details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow);
}
.archive-strip, .archive-block, .archive-basis, .product-context, .priceintel, .pricechart-box, .seo-related { padding: 16px 20px 18px; margin: 14px 0; }
.archive-strip h2, .archive-block h2, .archive-basis h2, .product-context h2, .seo-related h2, .priceintel h2 { margin: 2px 0 10px; font-size: 1.1rem; }
.archive-strip ul, .product-context ul, .seo-related ul { margin: 4px 0 6px; padding-left: 20px; }
.archive-strip li, .product-context li { margin: 0 0 6px; }
.archive-scroll { background: none !important; }
.archive-low { color: var(--good); font-size: 0.85rem; font-weight: 600; }
.archive-note, .archive-intro { color: var(--muted); }
.seo-h1, h1.seo-h1 { margin: 18px 0 8px; }
.seo-summary { color: var(--muted); font-size: 1.05rem; max-width: 70ch; }

/* blocks inside the product card are sections, not cards (no cards in cards) */
#pinContainer .priceintel, #pinContainer .pricechart-box, #pinContainer .product-context, #pinContainer details.pricehistory-details, #pinContainer #offerGroup {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0 !important;
	box-shadow: none;
	margin: 0;
	padding: 18px 0 14px;
}
#pinContainer details.pricehistory-details { padding: 14px 0; }

/* running text: a readable measure, hub method boxes are cards like every other block */
#main article p:not(.seo-intro):not(.seo-summary):not(.home-hero-stats):not(.home-tagline) { max-width: 75ch; }
.stats-hub .stats-method, .events-hub .events-method, .sector-facts, .staples-basis { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 20px 16px; margin: 18px 0; }
.well { box-sizing: border-box; }
form.well { max-width: 600px; }
.stats-hub .stats-method, .events-hub .events-method, .sector-facts, .staples-basis { max-width: 860px; }
footer .footerEntry li > span.pointer[title^="Controller="] { background-color: transparent !important; } /* the developer marker (hover shows the controller) stays, but is not drawn */
.datasetid, .datasetid b { font-family: inherit; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.datasetid b { font-weight: 650; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.table, table.archive-table, table.stats-table, table.tablesorter {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	border-collapse: separate;
}
.table th, .table td, .archive-table th, .archive-table td, table.tablesorter th, table.tablesorter td {
	padding: 10px 14px;
	border: 0;
	border-top: 1px solid var(--line);
	vertical-align: top;
	background: transparent;
	text-align: left;
}
.table thead th, .archive-table thead th, table.tablesorter thead th {
	background: var(--surface-2);
	color: var(--ink);
	font-weight: 650;
	font-size: 0.9rem;
	border-top: 0;
	border-bottom: 1px solid var(--line);
	vertical-align: bottom;
}
.table tbody tr:hover td, .archive-table tbody tr:hover td { background: var(--surface-2); }
.table .num, .archive-table .num, td.num, th.num { text-align: right; }
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background: transparent; }

/* ---------- offer tiles (market, week, hot deals, lists, search): a real grid, replaces the Isotope absolute layout ---------- */
#masonryContainer {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 16px;
	position: static !important;
	height: auto !important;
	margin: 16px 0 8px;
}
#dynamicContentContainer { display: contents; }
#masonryContainer > :not(.masonryItem), #dynamicContentContainer > :not(.masonryItem) { grid-column: 1 / -1; }
.masonryItem {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "img img" "price save" "title title" "market market" "unit unit" "desc desc" "kw kw" "act act" "owner owner";
	grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
	--img-h: 190px;
	align-content: start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: box-shadow 0.18s, border-color 0.18s;
}
.masonryItem:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.masonryItem, .masonryItem * { box-sizing: border-box; }
.masonryItem > a.text-center {
	grid-area: img;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--img-h);
	padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.masonryItem a img.image_product, .masonryItem img.image_product {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	object-fit: contain;
}
.masonryItem .priceBorder { grid-area: price; height: auto; padding: 12px 8px 0 16px; min-width: 0; }
.masonryItem .priceTag, .masonryItem .priceTagFuture, .masonryItem .priceTagCurrent, .masonryItem .priceTagPast {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--ink);
}
.masonryItem .priceTag strong { margin: 0; font-size: 1.45rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.masonryItem ul { display: contents; list-style: none; margin: 0; padding: 0; }
.masonryItem ul li { float: none; padding: 4px 6px; border: 0; background: none; border-radius: 6px; opacity: 0.6; }
.masonryItem ul li:hover { background: var(--surface-2); opacity: 1; }
.masonryItem ul li:has(> .priceTagSavePercent) { grid-area: save; align-self: end; justify-self: end; padding: 0 14px 2px 0; opacity: 1; }
.masonryItem ul li:has(> .priceTagSavePercent):hover { background: none; }
.masonryItem ul li:nth-child(1) { grid-area: act; justify-self: start; margin: 4px 0 10px 10px; }
.masonryItem ul li:nth-child(2) { grid-area: act; justify-self: start; margin: 4px 0 10px 46px; }
.masonryItem .tileMarket { grid-area: market; padding: 0 16px; font-size: 0.85rem; font-weight: 650; color: var(--muted); }
.masonryItem .priceTagSavePercent {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--good-soft);
	color: var(--good);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}
.masonryItem .kw { grid-area: kw; display: block; margin: 4px 0 0; padding: 0 16px 6px; background: none; opacity: 1; font-size: 0.8rem; color: var(--muted); }
.masonryItem .kw.future, .masonryItem .kw.current, .masonryItem .kw.past { color: var(--muted); }
.masonryItem h4 { grid-area: title; margin: 6px 0 2px; padding: 0 16px; font-size: 1rem; line-height: 1.3; font-weight: 650; }
.masonryItem h4 a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; max-height: 2.6em; }
.masonryItem h4 a:hover { color: var(--action) !important; }
.masonryItem > div:not(.priceBorder):not(.imageOwner):not(.tileMarket) { grid-area: unit; padding: 0 16px; font-size: 0.9rem; color: var(--text); }
.masonryItem > small:not(.kw) { grid-area: desc; margin: 2px 16px 4px; padding: 0; line-height: 1.4; max-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.masonryItem .imageOwner {
	grid-area: owner;
	align-self: end;
	margin: 0;
	padding: 8px 16px;
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.3;
}
.masonryItem .like, .masonryItem .dislike { cursor: pointer; }
.masonryItem .selected { border: 0; }
.masonryItem .logo_market { top: 8px; right: 8px; opacity: 1; }
.scroll-top-wrapper { z-index: 20; }

/* ---------- product page ---------- */
#pinContainer h1.divTable, h1.divTable { border-top: 0; background: transparent; padding: 4px 0 2px; margin: 8px 0 4px !important; font-weight: 700; }
.divTable { border-top: 1px solid var(--line); background: transparent !important; padding: 10px 0; }
.divTable > div:nth-child(odd) { font-weight: 600; color: var(--ink); }
.span6 > #pinContainer, #pinContainer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 22px 18px; }
.imageProduct { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 6px; max-width: 220px; }
.offerintro { margin: 0 0 12px; }
.offerhero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 6px; }
.offerhero-price { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.offerhero-was { color: var(--muted); font-size: 1.1rem; }
.offerhero-save { background: var(--good-soft); color: var(--good); font-weight: 750; font-size: 0.95rem; padding: 2px 10px; border-radius: 999px; }
.offerintro p { margin: 0 0 6px; }
.offerintro .offerintro-note { color: var(--muted); font-size: 0.85rem; }
.pricealert .btn { margin-top: 4px; }
.seo-related-list { list-style: none; padding: 0; margin: 0; }
.seo-related-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.seo-related-list li:first-child { border-top: 0; }
details.pricehistory-details { padding: 12px 18px; margin: 14px 0; }
details.pricehistory-details summary { cursor: pointer; font-weight: 650; color: var(--ink); }

/* product: image row and fact rows as grids (the Bootstrap 2 float grid stays in the markup) */
#pinContainer .divTable.row { display: grid; margin: 0 !important; padding: 12px 0; border-top: 1px solid var(--line); }
#pinContainer .divTable.row::before, #pinContainer .divTable.row::after { display: none; }
#pinContainer .divTable.row > [class*="span"] { float: none; width: auto; margin: 0 !important; min-width: 0; }
#pinContainer .divTable.row { grid-template-columns: 150px 1fr; column-gap: 16px; }
#pinContainer .divTable.row:has(> .centerContent) { grid-template-columns: 200px 1fr; column-gap: 24px; row-gap: 8px; align-items: start; padding: 18px 0 10px; }
#pinContainer .divTable.row:has(> .centerContent) > .centerContent:first-child { grid-row: 1 / span 3; text-align: center; }
#pinContainer .divTable.row:has(> .centerContent) > .centerContent:nth-child(2) { grid-column: 2; text-align: left; padding: 0 !important; }
#pinContainer .divTable.row:has(> .centerContent) > :last-child { grid-column: 1 / -1; }
#pinContainer img.logo { max-height: 56px; width: auto; max-width: 180px; }
#pinContainer svg { max-width: 100%; height: auto; }
#pinContainer .imageProduct { display: block; margin: 0 auto 6px; max-width: 100%; }
#pinContainer .imageOwner { display: inline-block; max-width: 100%; margin-top: 4px; padding: 0; background: none; color: var(--muted); font-size: 0.75rem; word-break: break-all; }
#pinContainer #socialBar { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
#pinContainer #socialBar li { float: none; height: auto; margin: 0; }
#pinContainer #socialBar li .like, #pinContainer #socialBar li .dislike { border: 0; }
#pinContainer #socialBar .hoverlink { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line) !important; border-radius: 999px; background: var(--surface-2); color: var(--ink) !important; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
#pinContainer #socialBar .hoverlink:hover { border-color: var(--action) !important; color: var(--action) !important; background: var(--action-soft); text-decoration: none; }
#pinContainer #socialBar small { color: var(--muted); }
#pinContainer .divTable.row > .span2:only-child { grid-column: 1 / -1; }
.span6:has(> #advertise_) { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 20px 14px; }
.span6:has(> #advertise_) .divTable { margin-left: 0 !important; }
.span6:has(> #advertise_) .divTable.row { display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px; align-items: center; padding: 12px 0; margin: 0 !important; border-top: 1px solid var(--line); }
.span6:has(> #advertise_) .divTable.row::before, .span6:has(> #advertise_) .divTable.row::after { display: none; }
.span6:has(> #advertise_) .divTable.row > [class*="span"] { float: none; width: auto; margin: 0 !important; min-width: 0; font-weight: 400; }
.span6:has(> #advertise_) .divTable.row:first-child { border-top: 0; }
.span6:has(> #advertise_) img.img_small { display: block; width: 84px; height: 84px; min-width: 0; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; }
.span6:has(> #advertise_) .divTable.row .span4 > div { font-weight: 700; color: var(--ink); margin-top: 2px; }
.span6:has(> #advertise_) .divTable.row .span4 .reload { color: var(--text); }
.span6:has(> #advertise_) .divTable.row .span4 .reload:hover { color: var(--action); text-decoration: underline; }

/* ---------- home ---------- */
.home-hero { padding: 22px 0 4px; }
.home-hero-brand { margin-bottom: 18px; }
.home-hero-logo img { height: auto; max-width: min(100%, 330px); }
.home-hero-stats, .home-hero-stats small { color: var(--muted); font-size: 0.95rem; }
.home-hero-searchrow { gap: 10px; }
.home-hero-searchrow #autoCompleteProduct, .home-hero-searchrow .input-xxlarge {
	height: 54px !important;
	padding: 0 18px 0 48px !important;
	border-radius: 999px !important;
	border: 1px solid var(--line-strong);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23596075' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 18px center / 22px 22px;
	box-shadow: var(--shadow);
	font-size: 17px !important;
}
.home-hero-go { height: 54px; padding: 0 30px; border-radius: 999px; font-size: 17px; }
.home-hero .seo-h1, .seo-h1.text-center { text-align: center; margin: 30px 0 14px; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem) !important; }
.home-hero .seo-intro, .seo-intro { padding: 20px 26px; font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.home-tagline, #welcomeBorder.home-tagline { color: var(--muted); font-weight: 600; font-size: 1rem; margin: 30px 0 6px; }

.discover h2 { font-size: 1.35rem; }
.discover-card { padding: 16px 18px; gap: 6px; transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s; }
.discover-card strong { color: var(--ink); font-size: 1.02rem; }
.discover-card span { color: var(--muted); }
.discover-card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); text-decoration: none; transform: translateY(-1px); }
.discover-card--travel { background: var(--surface); border-color: var(--line); }

/* carousels of the home page (css/offer-carousel.css keeps the geometry): colours and card look from the tokens */
.occ { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); }
.occ .occ-h, .occ[data-occ=travel] .occ-h, .occ-name { color: var(--ink); }
.occ .occ-more { color: var(--action); }
.occ .occ-more:hover, .occ .occ-more:focus { color: var(--action-hover); border-color: var(--action); }
.occ .occ-btn { color: var(--ink); }
.occ .occ-btn:hover { color: var(--action); border-color: var(--action); background: var(--action-soft); }
.occ a.occ-card { color: var(--text); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; }
.occ a.occ-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); text-decoration: none; }
.occ a.occ-card:focus-visible, .occ .occ-more:focus-visible { outline-color: var(--action); }
.occ-price { color: var(--ink); font-weight: 750; }
.occ-badge { background: var(--good-soft) !important; color: var(--good) !important; border-radius: 999px; font-weight: 750; }
.occ-bar i { background: var(--action); }

/* ---------- footer ---------- */
footer {
	background: var(--surface) !important;
	border-top: 1px solid var(--line);
	margin-top: 48px;
	padding: 36px 0 28px;
	font-size: 14px;
	min-height: 0;
	color: var(--muted);
}
footer .footerEntry { list-style: none; margin: 0 0 18px; padding: 0; overflow: visible; }
footer .footerEntry li:empty, footer .footerEntry li:has(> img.footerImage:only-child) { display: none; }
footer .footerEntry li { margin: 0 0 8px; padding: 0; }
footer .footerEntry li:first-child, footer .footerEntry li b { color: var(--ink); font-weight: 700; }
footer [style*="uppercase"] { text-transform: none !important; }
footer .footerEntry li b { display: block; padding: 0; margin: 0 0 4px; border: 0; text-transform: none !important; letter-spacing: 0; font-size: 1rem; }
footer a { color: var(--text); }
footer a:hover { color: var(--action) !important; }
footer .go { cursor: pointer; color: var(--text); }
footer .go:hover { color: var(--action); text-decoration: underline; }

/* tablets: the header drops its links, two-column pages become one column (the Bootstrap 2 tablet grid made them 340px wide) */
@media (max-width: 979px) {
	#navbar ul.nav > li:has(> a.hdr-link) { display: none; }
	#navbar ul.nav > li:nth-child(2) { flex: 1 1 auto; }
	#search2 { max-width: none; }
	#main .row > [class*="span"]:not([class*="offset"]) { float: none; display: block; width: auto; margin-left: 0; }
	#main .row > [class*="span"][class*="offset"] { float: none; display: block; width: auto; margin-left: 0; }
}

/* phones: the two header links come back as a row of buttons under the search; the home page keeps its two entry links */
@media (max-width: 767px) {
	#navbar ul.nav > li:has(> a.hdr-link) { display: block; order: 4; flex: 1 1 calc(50% - 5px); }
	#navbar ul.nav > li:has(> a.hdr-link) { min-width: 0; }
	#navbar ul.nav > li > a.hdr-link { text-align: center; border: 1px solid var(--line); background: var(--surface-2); padding: 8px 6px !important; font-size: 0.95rem; white-space: normal; }
	#breadcrumb ul.hidden-phone.breadcrumb { display: flex !important; }
	#breadcrumb ul.breadcrumb > li:nth-child(n+4) { display: none; }
	#breadcrumb ul.breadcrumb > li:nth-child(3) { font-size: 0; }
	#breadcrumb ul.breadcrumb > li:nth-child(3) a { font-size: 1rem; }
}

/* ---------- travel pages (list of a tour operator, offer page): OffersCheck_Travel_Cards ---------- */
.btn-success, .btn.btn-success { background: var(--good) none; border-color: var(--good); color: #fff; }
.btn-success:hover, .btn.btn-success:hover { background: #1f5409 none; border-color: #1f5409; color: #fff; }
.trip-lead { color: var(--muted); font-size: 1.05rem; max-width: 70ch; margin: 4px 0 16px; }
.trip-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.trip-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.trip-jump a:hover { border-color: var(--action); color: var(--action) !important; text-decoration: none; }
.trip-count { background: var(--action-soft); color: var(--action-hover); border-radius: 999px; padding: 0 8px; font-size: 0.85rem; font-weight: 700; }
.trip-group { margin: 26px 0 0; scroll-margin-top: 12px; }
.trip-group h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.trip-group h2 small { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.trip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.trip-grid > li { margin: 0; display: flex; }
a.trip-card { display: flex; flex-direction: column; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: var(--text); transition: box-shadow 0.18s, border-color 0.18s; }
a.trip-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); text-decoration: none; }
.trip-img { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; }
.trip-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trip-img--none { display: flex; align-items: center; justify-content: center; color: var(--line-strong); }
.trip-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; }
.trip-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.trip-card:hover .trip-title { color: var(--action); }
.trip-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 0.82rem; color: var(--text); }
.trip-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.9rem; color: var(--text); }
.trip-stars { display: inline-flex; align-items: center; gap: 1px; }
.trip-star { fill: #c98a00; }
.trip-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trip-code { margin-top: auto; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.trip-detail { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.trip-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.trip-gallery { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.trip-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.trip-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; aspect-ratio: 3 / 2; background: var(--surface-2); cursor: pointer; }
.trip-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trip-gallery figcaption { padding: 8px 14px; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); }
.trip-gallery--none { display: flex; align-items: center; justify-content: center; min-height: 220px; }
.trip-summary, .trip-desc, .trip-ad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px 20px; }
.trip-summary h2, .trip-desc h2 { margin: 0 0 10px; font-size: 1.15rem; }
.trip-facts-list { margin: 0 0 14px; }
.trip-facts-list > div { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.trip-facts-list > div:first-child { border-top: 0; }
.trip-facts-list dt { font-weight: 600; color: var(--ink); }
.trip-facts-list dd { margin: 0; overflow-wrap: anywhere; }
.trip-cta { display: block; text-align: center; padding: 12px 18px; font-size: 1rem; }
.trip-text { margin: 0 0 14px; max-width: 75ch; }
.trip-text h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.trip-desc p { max-width: 75ch; }
.trip-indexed { margin: 0; }
.trip-ad .advertise-text { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 979px) { .trip-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .trip-grid { grid-template-columns: minmax(0, 1fr); } .trip-facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .trip-facts-list dt { font-size: 0.85rem; color: var(--muted); } }

/* ---------- reduced motion, scrollbars ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (max-width: 767px) {
	#body.container { padding-top: 10px; }
	#navbar .navbar-inner { padding: 8px 12px; }
	#navbar ul.nav { flex-wrap: wrap; gap: 10px; }
	#navbar ul.nav > li:nth-child(2) { flex: 1 1 100%; order: 3; }
	#search2 { max-width: none; }
	.archive-strip, .archive-block, .archive-basis, .product-context, .priceintel, .pricechart-box, .seo-related { padding: 14px 16px 16px; }
	#masonryContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.masonryItem { --img-h: 150px; }
	.masonryItem > a.text-center { padding: 10px; }
	.masonryItem .priceTag strong { font-size: 1.25rem; }
	.masonryItem .priceBorder { padding: 10px 12px 0; }
	.masonryItem h4, .masonryItem .kw, .masonryItem .tileMarket, .masonryItem > div:not(.priceBorder):not(.imageOwner) { padding-left: 12px; padding-right: 12px; }
	.masonryItem > small:not(.kw) { margin-left: 12px; margin-right: 12px; }
	#pinContainer { padding: 4px 16px 14px; }
	footer { padding: 28px 0 24px; margin-left: -20px; margin-right: -20px; }
	footer .container { padding: 0 20px; box-sizing: border-box; }
}
@media (max-width: 380px) { #masonryContainer { grid-template-columns: 1fr; } }
/* narrow tiles: the saving pill moves under the price instead of squeezing it */
@media (max-width: 480px) {
	.masonryItem { grid-template-areas: "img img" "price price" "save save" "title title" "market market" "unit unit" "desc desc" "kw kw" "act act" "owner owner"; grid-template-rows: auto auto auto auto auto auto auto auto 1fr auto; }
	.masonryItem ul li:has(> .priceTagSavePercent) { justify-self: start; align-self: start; padding: 4px 0 0 12px; }
}
@media (max-width: 600px) {
	#pinContainer .divTable.row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
	#pinContainer .divTable.row > :first-child:not(.centerContent) { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
	#pinContainer .divTable.row:has(> .centerContent) { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 14px; }
}