/*
 * Large Screens — content styles.
 * Reproduces the old site (Astra + Elementor + child theme "astra-large-screens"),
 * with English class names. Layout classes are added by tools/convert/elementor_to_bricks.py.
 */

/* -----------------------------------------------------------
   Layout (Elementor section / column model)
-------------------------------------------------------------- */

.ls-sec,
.ls-con {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ls-row {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}

.ls-col {
	padding: 10px 8px;
	align-items: stretch;
	min-width: 0;
}

.ls-row > .ls-col {
	flex-shrink: 1;
}

/* Elementor: 20px between widgets of a column */
.ls-col > :not(:last-child),
.ls-con > :not(:last-child):not(.ls-sec):not(.ls-con) {
	margin-bottom: 20px;
}

.ls-anchor {
	height: 0;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.ls-row {
		flex-direction: column;
	}
	.ls-row > .ls-col {
		width: 100%;
	}
}

/* -----------------------------------------------------------
   Body text (old child theme: p / ol / ul at 1.09em, line height 1.8em)
-------------------------------------------------------------- */

.brxe-text p,
.brxe-text ul,
.brxe-text ol {
	font-size: 1.09em;
	line-height: 1.8em;
	margin: 0 0 1.1em;
}

.brxe-text ul,
.brxe-text ol {
	margin: 0 0 1.5em 1em;
	padding-left: 1.5em;
}

.brxe-text ul {
	list-style: disc;
}

.brxe-text ol {
	list-style: decimal;
}

.brxe-text li {
	margin-top: .3em;
	margin-bottom: .2em;
}

.brxe-text li p,
.brxe-text li ul,
.brxe-text li ol {
	font-size: 1em;
}

.brxe-text ul.list-narrow li, .brxe-text ol.list-narrow li { margin: .4em 0 .3em; }
.brxe-text ul.list-medium li, .brxe-text ol.list-medium li { margin: .65em 0; }
.brxe-text ul.list-large li, .brxe-text ol.list-large li { margin: .85em 0; }

.brxe-text a {
	color: var(--primary);
}

.brxe-text a:hover {
	text-decoration: underline;
}

.brxe-text strong,
.brxe-text b {
	font-weight: 700;
}

.brxe-text img {
	height: auto;
	max-width: 100%;
}

.brxe-text .alignleft {
	float: left;
	margin: 0 1.3em .5em 0;
}

.brxe-text .alignright {
	float: right;
	margin: 0 0 .5em 1.3em;
}

/* -----------------------------------------------------------
   Headings
-------------------------------------------------------------- */

/* h1–h6 sizes and weights: Bricks theme style "Large Screens root" */

.ls-title-pros {
	color: #21791E;
}

.ls-title-cons {
	color: #E61300;
}

/* Heading between two horizontal bars */
.ls-heading-bars {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin-top: 20px;
	font-size: 28.8px;
	font-weight: 300;
	text-transform: uppercase;
	color: gray;
}

.ls-heading-bars::before,
.ls-heading-bars::after {
	content: "";
	flex: 1;
	border-bottom: 2px solid gray;
	margin: 0 30px;
	position: relative;
	top: 1px;
}

/* -----------------------------------------------------------
   Images, credits, dates
-------------------------------------------------------------- */

.brxe-image {
	max-width: 100%;
}

.brxe-image img,
img.brxe-image {
	height: auto;
}

.ls-img-border img,
img.ls-img-border {
	border: 2px solid #787878;
}

.ls-updated-date p {
	font-size: 1em;
	line-height: 1.75em;
	text-align: right;
	color: #757575;
}

.ls-image-credit p {
	margin-top: -10px;
	font-size: 1em;
	line-height: 1.75em;
	text-align: right;
	color: #757575;
}

.ls-image-credit a {
	color: #757575;
}

.ls-image-credit a:hover,
.ls-image-credit a:focus {
	color: var(--primary);
	text-decoration: underline;
}

.ls-image-credit p span {
	line-height: 1.52em;
	font-size: .9em;
	color: #a4a4a4;
}

.ls-image-licence p {
	margin-top: -32px;
	text-align: right;
	line-height: 1.52em;
	font-size: .9em;
	color: #a4a4a4;
}

.ls-image-credit p span a,
.ls-image-licence a {
	color: #a4a4a4;
}

@media (max-width: 425px) {
	.ls-image-credit p {
		margin-top: -9px;
		line-height: 1.6em;
	}
}

/* -----------------------------------------------------------
   Affiliate links (product box: title + buttons)
-------------------------------------------------------------- */

.ls-affiliate-title-block,
.ls-affiliate-button-block {
	margin-bottom: 0 !important;
}

.ls-affiliate-title {
	font-weight: 700;
	color: #256aae;
	line-height: 1.6;
}

.ls-affiliate-title a {
	text-decoration: none;
}

p.ls-affiliate-paragraph {
	text-align: right;
	margin: 6px 0;
}

a.ls-affiliate-button {
	display: inline-block;
	cursor: pointer;
	background: #f0c14b;
	background: linear-gradient(180deg, #f7dfa5, #f0c14b) repeat scroll 0 0 transparent;
	border: 1px solid #ccc;
	border-color: #9c7e31 #90742d #786025;
	border-radius: 3px;
	color: #111;
	font-size: 14px;
	line-height: 19px;
	padding: 13px 20px 12px;   /* 46 px high, like the old site (14 px text on a 31.4 px line + 7/6 px padding) */
	text-decoration: none;
}

span.ls-affiliate-button-text {
	color: #111;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	text-align: center;
}

a.ls-affiliate-button-thomann { background: linear-gradient(180deg, #00dae338, #72c5c9d1); }
a.ls-affiliate-button-pageflip { background: linear-gradient(180deg, #89aeff52, #154fce6e); }
a.ls-affiliate-button-airturn { background: linear-gradient(180deg, #3fafff4f, #2b9dee9c); }
a.ls-affiliate-button-apple { background: linear-gradient(180deg, #eef2f4, #d0d4d7); }
a.ls-affiliate-button-samsung { background: linear-gradient(180deg, #1326a214, #1326a22b); }
a.ls-affiliate-button-microsoft { background: linear-gradient(180deg, #72727226, #7272724a); }
a.ls-affiliate-button-k-und-m { background: linear-gradient(180deg, #258e83, #19635b); }
a.ls-affiliate-button-k-und-m span.ls-affiliate-button-text { color: #fff; font-weight: 600; }
a.ls-affiliate-button-lenovo { background: linear-gradient(180deg, #ffe6e5, #ffd9d7); }
a.ls-affiliate-button-remarkable { background: linear-gradient(180deg, #dddddd8c, #c8c8c8db); }
a.ls-affiliate-button-onyx-boox { background: linear-gradient(180deg, #ff804f3d, #ff815094); }
a.ls-affiliate-button-bh { background: linear-gradient(180deg, #19ffb33d, #1de6a48c); }

p.ls-not-available {
	text-align: right;
	margin-bottom: 9px;
	color: #909090;
}

/* -----------------------------------------------------------
   Author picture
-------------------------------------------------------------- */

.ls-author-pic {
	padding-bottom: 12px;
	padding-top: 10px;
}

@media (max-width: 921px) {
	.ls-author-pic {
		margin-right: 1.3em;
		padding-bottom: 9px;
		width: 120px;
		height: 120px;
	}
}

/* -----------------------------------------------------------
   Pros & cons
-------------------------------------------------------------- */

.brxe-text ul.ls-pros-cons {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.ls-pros-cons li {
	background-repeat: no-repeat;
	background-position: 0 8px;
	background-size: 14px 14px;
	padding-left: 25px;
}

.ls-cons li {
	background-image: url('/wp-content/uploads/2023/06/Pros-and-Cons-Cross-Mark.png');
}

.ls-pros li {
	background-image: url('/wp-content/uploads/2023/06/Pros-and-Cons-Check-Mark.png');
}

/* -----------------------------------------------------------
   Table of contents
-------------------------------------------------------------- */

.brxe-text ol.ls-toc {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: item;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2rem;
}

.ls-toc > li {
	display: table;
	counter-increment: item;
	margin-bottom: .8em;
	font-size: 1.2rem;
}

.brxe-text .ls-toc li ol {
	margin: 0 0 0 1rem;
	padding: .4rem 0 0;
	list-style: none;
}

.ls-toc li ol > li {
	margin: 0 0 0 1.5em;
	font-size: 1.175rem;
}

@media (max-width: 575px) {
	.brxe-text .ls-toc li ol {
		margin-left: 0;
	}
}

/* -----------------------------------------------------------
   Ranking numbers ("Screen Size Rank #1", "111% of Letter Paper Size")
-------------------------------------------------------------- */

.ls-ranking {
	display: flex;
	justify-content: space-evenly;
	padding-bottom: 14px;
	margin-top: 60px;
}

.ls-ranking-box {
	background: #fff;
	box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #fff;
	border-radius: 35px;
	padding: 0;
	text-align: center;
	margin: 0;
	border: 10px solid transparent;
	background-image: linear-gradient(white, white), linear-gradient(135deg, #4285f4, #34a853);
	background-origin: border-box;
	background-clip: content-box, border-box;
}

.ls-ranking-box-number {
	width: 250px;
}

.ls-ranking-box-area {
	width: 270px;
	background-image: linear-gradient(white, white), linear-gradient(135deg, #d329f5, #714955);
}

.ls-ranking-box-inside {
	padding: 10px;
	text-align: center;
}

.ls-ranking-value {
	font-size: 48px;
	line-height: 1.2em;
	font-weight: 800;
	color: #4285f4;
}

.ls-ranking-value-area {
	color: #b40ad6;
}

.ls-ranking-label {
	font-weight: 700;
	line-height: 1.2em;
	font-size: 20px;
	padding: 5px 0;
	color: #777;
	display: block;
}

.ls-ranking-label-mobile {
	font-weight: 700;
	line-height: 1.2em;
	font-size: 16px;
	padding: 4px 0;
	color: #777;
	display: none;
}

@media (max-width: 575px) {
	.ls-ranking-box {
		box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #fff;
		border-radius: 30px;
		border: 8px solid transparent;
	}
	.ls-ranking-box-number { width: 185px; }
	.ls-ranking-box-area { width: 205px; }
	.ls-ranking-box-inside { padding: 8px; }
	.ls-ranking-value { font-size: 38px; }
	.ls-ranking-label { font-size: 15px; padding: 4px 0; }
}

@media (max-width: 455px) {
	.ls-ranking-box {
		box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #fff;
		border-radius: 20px;
		border: 7px solid transparent;
	}
	.ls-ranking-box-number { width: 140px; }
	.ls-ranking-box-area { width: 160px; }
	.ls-ranking-label { display: none; }
	.ls-ranking-label-mobile { display: block; }
}

/* -----------------------------------------------------------
   Accordion (Elementor accordion look)
-------------------------------------------------------------- */

.ls-accordion {
	width: 100%;
}

.ls-accordion > .brxe-block {
	border: 1px solid #d5d8dc;
}

.ls-accordion > .brxe-block + .brxe-block {
	border-top: 0;
}

.ls-accordion .accordion-title-wrapper {
	justify-content: flex-start;
	gap: 0;
	padding: 15px 20px;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	color: var(--ink);
}

.ls-accordion .accordion-title-wrapper .brxe-heading {
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	color: var(--ink);
}

.ls-accordion .accordion-title-wrapper .brxe-icon {
	width: 24px;
	font-size: 14px;
	line-height: 1;
	color: var(--ink);
	transform: none !important;
}

/* The +/− signs are drawn in CSS: the Font Awesome icon elements of the component stay hidden,
   so the browser never downloads the 150 KB icon font. */
.ls-accordion .accordion-title-wrapper .brxe-icon {
	display: none;
}

.ls-accordion .accordion-title-wrapper::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin: 0 12px 0 0;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}

.ls-accordion .brx-open > .accordion-title-wrapper::before {
	background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
}

.ls-accordion .accordion-content-wrapper {
	padding: 15px 20px;
	border-top: 1px solid #d5d8dc;
}

@media (max-width: 767px) {
	.ls-accordion .accordion-title-wrapper {
		padding: 12px 15px;
	}
	.ls-accordion .accordion-content-wrapper {
		padding: 7px 15px;
	}
}

/* -----------------------------------------------------------
   Tabs (Elementor nested tabs look)
-------------------------------------------------------------- */

.ls-tabs {
	width: 100%;
	gap: 10px;
}

.ls-tabs .tab-menu {
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ls-tabs .tab-title {
	padding: 15px 35px;
	background-color: var(--tab-surface);
	color: var(--tab-ink);
	font-size: 19.2px;
	line-height: 1.4;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
}

.ls-tabs .tab-title.brx-open {
	background-color: var(--accent-green);
	color: #fff;
}

.ls-tabs .tab-content {
	border: 0;
}

.ls-tabs .tab-pane {
	padding: 0;
}

/* -----------------------------------------------------------
   Tables (old UAEL tables, from CSV)
-------------------------------------------------------------- */

.ls-table-block {
	width: 100%;
}

.ls-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ls-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ls-table th,
.ls-table td {
	padding: 15px;
	border: 1px solid #bbb;
	vertical-align: middle;
}

.ls-table th {
	font-weight: 600;
	text-align: center;
}

.ls-table tbody tr:nth-child(odd) td {
	background-color: #eaeaea;
}

/* Wide data tables (8 columns): scroll horizontally on phones instead of squeezing the columns */
.ls-tablets-table,
.ls-matte-table,
.ls-monitors-table,
.ls-pm-table {
	min-width: 820px;
}

@media (max-width: 767px) {
	.ls-table {
		font-size: 14px;
	}
	.ls-table th,
	.ls-table td {
		padding: 8px 10px;
	}
}

/* -----------------------------------------------------------
   Buttons
-------------------------------------------------------------- */

.brxe-button.ls-button,
.ls-card-body .brxe-button {
	letter-spacing: 0;
}

/* -----------------------------------------------------------
   D3 charts: the PNG fallback disappears once the SVG is drawn
-------------------------------------------------------------- */

figure.ls-chart {
	display: block;
	width: 100%;
	margin: 0;
}

figure.ls-chart > img.ls-chart-fallback {
	display: block;
	width: 100%;
	height: auto;
}

figure.ls-chart[data-rendered] > img.ls-chart-fallback {
	display: none;
}

figure.ls-chart > svg {
	display: block;
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------
   Footnotes (were "Easy Footnotes" shortcodes)
-------------------------------------------------------------- */

.ls-footnote-ref a {
	text-decoration: none;
}

.brxe-text ol.ls-footnotes {
	margin: 0 0 1.5em;
	padding-left: 1.2em;
}

.ls-footnote-back {
	text-decoration: none;
	margin-left: .3em;
}

/* Elementor flexbox containers: 10px default padding, children stretched */
.ls-con {
	padding: 10px;
	align-items: stretch;
}

/* Charts that replaced framed diagram images keep the frame */
figure.ls-chart.ls-img-border {
	border: 2px solid #787878;
}

@media (max-width: 767px) {
	/* small screens: the chart is scaled down, its own margins too — keep the texts away from the frame */
	figure.ls-chart.ls-img-border {
		padding: 8px;
	}
}

/* -----------------------------------------------------------
   Comments (old Astra look)
-------------------------------------------------------------- */

.brxe-post-comments .comments-title {
	font-size: 28px;
	line-height: 1.48;
	font-weight: 400;
	color: var(--primary);
	padding: 50.4px 16px 36.4px;
	margin: 0;
	border-top: 1px solid #e5e5e5;
}

.brxe-post-comments .comment-list,
.brxe-post-comments .comment-list .children {
	list-style: none;
	padding: 0 8px;
	margin: 0;
}

.brxe-post-comments .comment-list .children {
	margin-left: 38px;
	padding: 0;
}

.brxe-post-comments .comment-list li.comment {
	border: 0;
	padding: 0;
	margin: 0 0 2em;
}

.brxe-post-comments .comment-body {
	display: block;
}

.brxe-post-comments .comment-author,
.brxe-post-comments .comment-author a,
.brxe-post-comments .comment-meta,
.brxe-post-comments .comment-meta a {
	font-size: 13px;
	line-height: 1.67;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--primary);
}

.brxe-post-comments .comment-author .fn,
.brxe-post-comments .comment-author h5 {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.brxe-post-comments .comment-content p {
	font-size: 17.44px;
	line-height: 31.4px;
	margin: 0 0 19.184px;
}

.brxe-post-comments .no-comments {
	font-size: 17.44px;
	line-height: 1.8;
	margin: 8.72px 0;
	padding: 0 8px;
}

@media (max-width: 575px) {
	.brxe-post-comments .comment-content p {
		font-size: 15.9053px;
		line-height: 28.6333px;
	}
}

/* -----------------------------------------------------------
   Headings inside rich text (old Astra entry-content values;
   e.g. the eRecht24 privacy policy)
-------------------------------------------------------------- */

.brxe-text h2 {
	font-size: 2em;
	margin: 2em 0 1em;
}

.brxe-text h3 {
	font-size: 2em;
	margin: 1.1em 0 .8em;
}

.brxe-text h4 {
	font-size: 1.4em;
	margin: .9em 0 .5em;
}

@media (max-width: 544px) {
	.brxe-text h2 { font-size: 1.8em; }
	.brxe-text h3 { font-size: 1.5em; }
	.brxe-text h4 { font-size: 1.3em; }
}

.brxe-text > :first-child {
	margin-top: 0;
}

/* -----------------------------------------------------------
   Toggle between two charts (pounds / grams)
-------------------------------------------------------------- */

.ls-toggle-hidden {
	display: none !important;
}

.brxe-button.ls-toggle-button {
	background-color: #f5f5f5b2;
	color: #3e3e3e;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 12px 27px 10px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	cursor: pointer;
}

.brxe-button.ls-toggle-button:hover {
	background-color: #e0e0e0;
	border-color: #999;
}

/* ===========================================================
   Components (Bricks components "LS …")
   =========================================================== */

/* LS Product box — sponsored product with image, title and buttons */
.ls-product {
	width: 100%;
	margin-bottom: 35px;
}

.ls-product-label {
	align-self: flex-end;
	font-size: .96rem;
	line-height: 1.8;
	color: #999;
	margin: 0 0 2px;
}

.ls-product-box {
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	border: 1px solid #d9d9d9;
	padding: 10px 8px;
}

.ls-product-media {
	width: 33.333%;
	padding: 10px 8px;
	justify-content: center;
	align-items: center;
}

.ls-product-media img {
	height: auto;
	max-width: 100%;
}

.ls-product-body {
	width: 66.667%;
	padding: 10px 8px;
	justify-content: space-between;
	align-items: stretch;
	gap: 20px;
}

.brxe-text-link.ls-affiliate-title,
.ls-product-body .ls-affiliate-title {
	font-size: 17.44px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
}

.ls-product-buttons {
	align-items: flex-end;
	gap: 12px;
	width: 100%;
}

.brxe-button.ls-affiliate-button {
	font-size: 14px;
	line-height: 19px;
	font-weight: 400;
	letter-spacing: 0;
	color: #111;
	padding: 13px 20px 12px;   /* 46 px high, as on the old site */
	border-radius: 3px;
	border: 1px solid #ccc;
	border-color: #9c7e31 #90742d #786025;
	background: linear-gradient(180deg, #f7dfa5, #f0c14b);
}

.brxe-button.ls-affiliate-button-lenovo,
.brxe-button.ls-affiliate-button-samsung,
.brxe-button.ls-affiliate-button-apple,
.brxe-button.ls-affiliate-button-microsoft,
.brxe-button.ls-affiliate-button-neutral {
	border-color: #ccc;
}

.brxe-button.ls-affiliate-button-neutral { background: linear-gradient(180deg, #f6f6f6, #e3e3e3); }
/* shop colours of the old site (the generic .brxe-button rule above would otherwise paint them Amazon yellow) */
.ls-affiliate-button.ls-affiliate-button-apple { background: linear-gradient(180deg, #eef2f4, #d0d4d7); }
.ls-affiliate-button.ls-affiliate-button-samsung { background: linear-gradient(180deg, #1326a214, #1326a22b); }
.ls-affiliate-button.ls-affiliate-button-microsoft { background: linear-gradient(180deg, #72727226, #7272724a); }
.ls-affiliate-button.ls-affiliate-button-lenovo { background: linear-gradient(180deg, #ffe6e5, #ffd9d7); }

@media (max-width: 767px) {
	.ls-product-box {
		flex-direction: column;
	}
	.ls-product-media,
	.ls-product-body {
		width: 100%;
	}
}

/* LS Box — green notice ("No AI promise") or blue frame (table of contents) */
.ls-box {
	width: 100%;
	padding: 10px 10px 0 15px;
	border: 3px solid var(--accent-green);
	background-color: #61ce703b;
}

.ls-box--blue {
	border-color: #0274be;
	background-color: transparent;
	padding: 12px;
}

.ls-box--blue .ls-box-title {
	margin: 0 0 20px;
	font-size: 28px;
}

/* LS Ranking — "Screen Size Rank #1" / "111% of Letter Paper Size" (styles above: .ls-ranking*) */
.ls-ranking {
	width: 100%;
	flex-direction: row;
}

/* LS Pros & cons */
.ls-pros-cons-block {
	width: 100%;
	gap: 20px;
}

.ls-pros-cons-block .brxe-text ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.ls-pros-list li,
.ls-cons-list li {
	background-repeat: no-repeat;
	background-position: 0 8px;
	background-size: 14px 14px;
	padding-left: 25px;
}

.ls-pros-list li { background-image: url('/wp-content/uploads/2023/06/Pros-and-Cons-Check-Mark.png'); }
.ls-cons-list li { background-image: url('/wp-content/uploads/2023/06/Pros-and-Cons-Cross-Mark.png'); }

/* LS Photo — image with credit line */
.ls-photo {
	width: 100%;
	align-items: center;
}

.ls-photo .brxe-image {
	align-self: center;
}

.ls-photo .ls-image-credit {
	width: 100%;
	margin-top: 20px;
}

/* Linked images inside flex columns: give the link wrapper the full width so the image
   is not shrunk to its min-content size. */
.ls-product-media .brxe-image,
.ls-photo .brxe-image {
	max-width: 100%;
}

.ls-product-media a.brxe-image {
	display: block;
	width: 100%;
	text-align: center;
}

.ls-product-media a.brxe-image img {
	width: auto;
	max-width: 100%;
}

/* -----------------------------------------------------------
   Filters (chips) — see assets/js/filters.js
-------------------------------------------------------------- */

.ls-filtered-out {
	display: none !important;
}

.ls-filters {
	width: 100%;
	align-items: center;
	padding: 22px 24px;
	background-color: #f6f8fb;
	border: 1px solid #dde5ee;
	border-radius: 12px;
}

/* The groups share one left edge, and the block they form is centred in the box */
.ls-filter-inner {
	width: fit-content;
	max-width: 100%;
	gap: 14px;
}

.ls-filter-group {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.ls-filter-label {
	flex: 0 0 116px;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.ls-chips {
	flex: 1 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.brxe-button.ls-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 12px;
	border: 1px solid #c8d3df;
	border-radius: 999px;
	background: #fff;
	color: #5f6b78;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.brxe-button.ls-chip::before {
	content: "✕";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	color: #8a96a3;
	background: #edf1f5;
}

.brxe-button.ls-chip[aria-pressed="true"] {
	background: #e7f1fc;
	border-color: var(--primary);
	color: #0b3a6b;
}

.brxe-button.ls-chip[aria-pressed="true"]::before {
	content: "✓";
	color: #fff;
	background: var(--primary);
}

.brxe-button.ls-chip:hover {
	border-color: var(--primary);
}

.brxe-button.ls-chip:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.ls-filter-footer {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px 18px;
	width: 100%;
	margin-top: 4px;
	font-size: 15px;
	color: #5f6b78;
}

.ls-filter-footer p,
.ls-filter-footer .brxe-text {
	margin: 0 !important;
	font-size: 15px;
}

.ls-filter-footer button.ls-filter-all {
	background: none;
	border: 0;
	padding: 0;
	color: var(--primary);
	text-decoration: underline;
	cursor: pointer;
	font-size: 14px;
}

@media (max-width: 544px) {
	.ls-filters { padding: 14px; }
	.ls-filter-group { flex-direction: column; gap: 6px; }
	.ls-filter-label { flex: 0 0 auto; padding-top: 0; }
	.brxe-button.ls-chip { font-size: 14px; padding: 6px 12px 6px 10px; }
}

/* "Update" note inserted at the top of an existing tablet section */
.ls-update-note {
	width: 100%;
	padding: 14px 18px 2px;
	background: #fff8e6;
	border-left: 4px solid #f0c14b;
}

/* Product box without image: body takes the full width */
.ls-product-box > .ls-product-body:only-child {
	width: 100%;
}

.ls-table-label {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.35;
	color: #5f6b78;
}

.ls-table td {
	line-height: 1.45;
}

/* Home page H1 (added 2026-10: the old home page had none) */
.ls-home-h1 {
	width: 100%;
	max-width: 900px;
	margin: 10px auto 40px;
	text-align: center;
	font-size: 2em;
	line-height: 1.25;
}

@media (max-width: 767px) {
	.ls-home-h1 {
		font-size: 1.45em;
		margin-bottom: 24px;
	}
}

/* Language switcher (Polylang): EN · FR · DE — header bar, menu and footer */
.ls-lang-switcher {
	display: flex;
	flex-direction: row;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.ls-lang-switcher li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ls-lang-switcher a {
	color: inherit;
	opacity: .55;
	text-decoration: none;
}
.ls-lang-switcher .current-lang a,
.ls-lang-switcher a:hover {
	opacity: 1;
}
@media (min-width: 768px) {
	#site-menu-wrap {        /* header bar: switcher left of the menu button (the block's own style says column) */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: auto !important;
		gap: 22px;
	}
}
@media (max-width: 767px) {  /* no room next to the logo: the switcher stays in the menu and the footer */
	#site-menu-wrap .ls-lang-switcher {
		display: none;
	}
}
.brxe-offcanvas .ls-lang-switcher {
	margin: 0 0 16px;
}
.brxe-footer .ls-lang-switcher,
#brxe-4ebo9p .ls-lang-switcher {
	margin-top: 14px;
}

/* Notice on translated pages ("translated with the help of AI") */
.ls-translation-note {
	padding: 10px 16px;
	border-left: 4px solid #1763A1;
	background: #f2f5f8;
	font-size: .9em;
	color: #4a4a4a;
}
.ls-translation-note p {
	margin: 0;
}
/* the notice is the last block of translated pages: space above it and before the footer */
.ls-sec:has(> .ls-col > .ls-translation-note) {
	margin-top: 40px;
	margin-bottom: 36px;
}


/* Space above headings: a section that starts with an h2 is clearly separated from the chart or table above it,
   and headings inside a column get space above them (the old site had it through its section paddings) */
.ls-sec:has(> .ls-col > h2.brxe-heading),
.ls-con:has(> .ls-con > h2.brxe-heading) {
	margin-top: 36px;
}
.ls-col > h2.brxe-heading:not(:first-child),
.ls-con > h2.brxe-heading:not(:first-child) {
	margin-top: 26px;
}
.ls-col > h3.brxe-heading:not(:first-child):not(.ls-heading-subtitle),
.ls-con > h3.brxe-heading:not(:first-child) {
	margin-top: 16px;
}
.ls-col > .ls-anchor:first-child + h2.brxe-heading {
	margin-top: 0;
}
@media (max-width: 767px) {
	.ls-sec:has(> .ls-col > h2.brxe-heading),
	.ls-con:has(> .ls-con > h2.brxe-heading) {
		margin-top: 24px;
	}
}

/* Data tables: centred numeric columns */
.ls-table td.ls-c,
.ls-table th {
	text-align: center;
}

/* -----------------------------------------------------------
   "More N-inch tablets": compact cards (tablets without a detailed section)
-------------------------------------------------------------- */

.ls-tcards-title {
	margin-top: 8px;
	text-align: center;
}

.ls-tcards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 12px;
}

.ls-tcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
	background: #fff;
	border: 1px solid #dde5ee;
	border-radius: 12px;
}

.ls-tcard-media {
	width: 100%;
	align-items: center;
	gap: 2px;
}

.ls-tcard-media img {
	width: 100%;
	height: 190px;
	object-fit: contain;
}

p.ls-tcard-credit {
	align-self: flex-end;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #8a8a8a;
}

h4.ls-tcard-title {
	margin: 4px 0 0;
	font-size: 19px;
	line-height: 1.35;
}

.ls-tcard-specs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-tcard-specs li {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #333;
}

.ls-tcard-meta p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: #555;
}

.ls-tcard .ls-tcard-button,
.ls-tcard .ls-tcard-link {
	margin-top: auto;
	align-self: flex-start;
}

.ls-tcard .ls-tcard-link {
	font-weight: 600;
	color: var(--primary);
}

/* photo-only cards (nano-texture article) */
.ls-tcard--photo { padding: 14px 16px 16px; }
.ls-tcard--photo h4.ls-tcard-title { width: 100%; font-size: 17px; text-align: center; }

/* the heading disappears with its cards when the filters hide them all */
.ls-sec:has(.ls-tcards):not(:has(.ls-tcard:not(.ls-filtered-out))),
.ls-sec:has(details.ls-more):not(:has(details.ls-more:not(.ls-filtered-out))) {
	display: none;
}

@media (max-width: 991px) {
	.ls-tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 560px) {
	.ls-tcards { grid-template-columns: minmax(0, 1fr); }
	.ls-tcard-media img { height: 170px; }
}

/* -----------------------------------------------------------
   "More N-inch tablets": full fiches in <details> (built from content/tablets/*.json)
-------------------------------------------------------------- */

.ls-more-hint p {
	margin: 0 0 6px;
	text-align: center;
	color: #555;
}

details.ls-more {
	width: 100%;
	margin: 0 0 14px;
	background: #fff;
	border: 1px solid #dde5ee;
	border-radius: 12px;
}

details.ls-more[open] {
	border-color: #b9c9db;
	box-shadow: 0 2px 10px rgba(20, 40, 80, .06);
}

summary.ls-more-summary {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 54px 14px 16px;
	cursor: pointer;
	list-style: none;
	position: relative;
}

summary.ls-more-summary::-webkit-details-marker {
	display: none;
}

summary.ls-more-summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: var(--primary);
}

details.ls-more[open] > summary.ls-more-summary::after {
	content: "−";
}

summary.ls-more-summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 12px;
}

.ls-more-summary img.ls-more-thumb {
	flex: 0 0 auto;
	width: 104px;
	height: 76px;
	object-fit: contain;
}

.ls-more-head {
	gap: 2px;
	min-width: 0;
}

h3.ls-more-title {
	margin: 0;
	font-size: 21px;
	line-height: 1.3;
}

.ls-more-line p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: #444;
}

.ls-more-body {
	padding: 4px 24px 24px;
	border-top: 1px solid #e6edf4;
}

.ls-more-body > .brxe-text,
.ls-more-body > .brxe-heading {
	width: 100%;
}

.ls-official-link p {
	margin: 18px 0 0;
	text-align: right;
	font-weight: 600;
}

@media (max-width: 560px) {
	summary.ls-more-summary { gap: 12px; padding: 12px 44px 12px 12px; }
	.ls-more-summary img.ls-more-thumb { width: 76px; height: 58px; }
	h3.ls-more-title { font-size: 18px; }
	.ls-more-line p { font-size: 14.5px; }
	.ls-more-body { padding: 4px 14px 18px; }
}

summary.ls-more-summary.brxe-block {
	flex-direction: row;
	flex-wrap: nowrap;
}

.ls-more-body h4.ls-heading-subtitle {
	margin-bottom: 14px;
}

/* official product images (tall ones would fill the screen): limited height, centred */
img[src*="-official-image"],
img[data-src*="-official-image"] {
	max-height: 480px;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ls-more-summary img.ls-more-thumb {
	max-height: 76px;
}

/* -----------------------------------------------------------
   Tablet pages (/tablets/<id>/, tools/tablets/build_pages.py)
-------------------------------------------------------------- */

.ls-crumbs-block p.ls-crumbs {
	margin: 0 0 10px;
	font-size: 15.5px;
	color: #5b6573;
}

h1.ls-tp-title {
	margin-bottom: 6px;
}

p.ls-tp-lead {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	color: #444;
}

.ls-tp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 36px;
	width: 100%;
	align-items: start;
}

.ls-tp-media {
	align-items: center;
	gap: 4px;
}

.ls-tp-media img.ls-tp-img {
	width: 100%;
	max-height: 440px;
	object-fit: contain;
}

p.ls-tp-credit {
	align-self: flex-end;
	margin: 0;
	font-size: 14px;
	color: #8a8a8a;
}

.ls-tp-side {
	gap: 12px;
}

h2.ls-tp-h2 {
	margin: 0;
	font-size: 24px;
}

ul.ls-tp-facts {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.ls-tp-facts li {          /* key specifications: label | value (+ explanation below the value) */
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 2px 18px;
	margin: 0;
	padding: 10px 0;
	font-size: 16.5px;
	line-height: 1.45;
	border-bottom: 1px solid #e6edf4;
}

ul.ls-tp-facts li span {
	color: #5b6573;
	font-weight: 600;
}

ul.ls-tp-facts li strong {
	font-weight: 700;
	text-align: left;
}

ul.ls-tp-facts li strong small {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 400;
	color: #5b6573;
}

.brxe-button.ls-tp-buy {
	margin-top: 22px;
	align-self: flex-start;    /* as wide as its text, like the buttons of the articles */
}

.ls-tp-links p {
	margin: 6px 0 0;
	line-height: 1.9;
	font-weight: 600;
}

img.ls-tp-scale {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	margin: 0 auto;
}

ul.ls-tp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: center;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.35;
	color: #5b6573;
}

ul.ls-tp-legend li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

ul.ls-tp-legend strong {
	font-weight: 600;
	color: #1d2733;
}

.ls-tp-swatch {
	flex: 0 0 34px;
	margin-top: 9px;
	height: 0;
}

p.ls-tp-caption {
	margin: 4px 0 0;
	font-size: 15px;
	text-align: right;
	color: #757575;
}

p.ls-tp-updated {
	margin: 10px 0 0;
	font-size: 15px;
	color: #757575;
}

.ls-spec-table th[scope="row"] {
	width: 38%;
	text-align: left;
	font-weight: 600;
	color: #444;
}

.ls-spec-table td {
	text-align: left;
}

.ls-spec-table tr.ls-spec-group th {
	padding-top: 18px;
	font-size: 18px;
	text-align: left;
	background: #f4f7fb;
}

ul.ls-tp-similar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.ls-tp-similar li {
	padding: 8px 0;
	border-bottom: 1px solid #e6edf4;
}

ul.ls-tp-similar li a {
	font-weight: 700;
}

ul.ls-tp-similar li span {
	color: #5b6573;
}

ul.ls-tp-sources {
	columns: 2;
	font-size: 15.5px;
}

@media (max-width: 544px) {
	ul.ls-tp-facts li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ls-tp-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	ul.ls-tp-similar { grid-template-columns: minmax(0, 1fr); }
	ul.ls-tp-sources { columns: 1; }
	ul.ls-tp-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
	p.ls-tp-caption { text-align: left; }
	p.ls-tp-lead { font-size: 18px; }
}

/* Tablet Chooser call to action (articles) */
.ls-chooser-cta p {
	margin: 0;
	padding: 16px 20px 16px 64px;
	border-radius: 10px;
	background: #eef5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") no-repeat 20px center / 28px 28px;
	border: 1px solid #cfe2fb;
	font-size: 17px;
	line-height: 1.5;
}

.ls-chooser-cta a {
	font-weight: 700;
}

@media (max-width: 478px) {
	.ls-chooser-cta p { padding: 14px 16px 14px 52px; background-position: 14px 18px; background-size: 24px 24px; font-size: 16px; }
}

/* Link from a fiche of the article to the tablet's own page */
.ls-page-link p {
	margin: 4px 0 0;
	font-weight: 600;
	font-size: 16px;
}

/* Tablet database table: numbers on one line */
.ls-db-table td.ls-c { white-space: nowrap; }

/* White space between the site header and the first section of a page (pages whose first section has no padding of its
   own: legal pages, tablet database and tablet pages, Tablet Chooser). Zero specificity: a padding set in Bricks
   (About page) wins. Checked by tools/audit-spacing.mjs ("below header", 24 px minimum). */
:where(body.page:not(.home)) :where(#brx-content > .ls-sec:first-child) {
	padding-top: 32px;
}

@media (max-width: 478px) {
	:where(body.page:not(.home)) :where(#brx-content > .ls-sec:first-child) {
		padding-top: 24px;
	}
}

/* Two official photos side by side (fiches with more photos, e.g. Galaxy Tab S12 Ultra) */
.ls-photo-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

@media (max-width: 767px) {
	.ls-photo-row { grid-template-columns: minmax(0, 1fr); }
}

/* Menu (offcanvas): 1 px grey border on the images, as on the old site (#787878); none on photos with a coloured background */
.brxe-offcanvas img.brxe-image,
.brxe-offcanvas .brxe-image img {
	border: 1px solid #787878;
	box-sizing: border-box;
}
.brxe-offcanvas img.brxe-image.ls-menu-photo,
.brxe-offcanvas .ls-menu-photo img {
	border: 0;
}
/* Language switcher at the bottom of the menu */
.brxe-offcanvas .ls-lang-switcher {
	margin: 28px 0 12px;
	font-size: 16px;
}
/* the menu panel is a column that scrolls: never wrap its cards into a second column (phones) */
#site-menu .brx-offcanvas-inner {
	flex-wrap: nowrap;
	overflow-y: auto;
}

/* FAQ accordions (questions can be long: normal line height) */
.ls-faq .accordion-title-wrapper,
.ls-faq .accordion-title-wrapper .brxe-heading {
	line-height: 1.4;
}
.ls-faq .accordion-title-wrapper .brxe-heading {
	flex: 1 1 auto;
}
.ls-faq .accordion-content-wrapper > .brxe-text > p:last-child {
	margin-bottom: 0;
}