/* Google Fonts moved to <link> in header.php for better LCP */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
.icon-fixed{
	max-width:40px !important;
max-height:40px !important;
}
fieldset, img {
	border: 0;
}

img, object, embed {
	vertical-align: bottom;
}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

q:before, q:after {
	content: "";
}

a * {
	cursor: pointer;
}

input,
textarea {
	outline: none;
}

html {
	height: 100%;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font: 400 15px/1.5 "Archivo", sans-serif;
	height: 100%;
	min-width: 320px;
	position: relative;
	color: #fff;
}
@media (max-width: 768px) {
	body {
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------
   GLOBAL TYPOGRAPHY (redesign 2026)
   Site-wide typography token defaults. Anything more specific
   (BIG redesign cards, plugins, third-party UI) overrides this.
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: "Archivo", sans-serif;
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.2;
}
code, pre, kbd, samp, tt {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
button, select, textarea {
	font-family: inherit;
}
body.no-scroll {
	overflow: hidden;
}
body:after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
}
body.dark:after {
	background: #2B2A29 url("../images/body-bg-decor.svg") repeat;
}
body.dark .theme-dark {
	background: linear-gradient(to bottom right, #FE7D59 20%, #FFB515 100%);
	color: #fff;
}
body.dark .theme-dark:after {
	display: block;
}
body.light:after {
	background: #E5E4E4 url("../images/body-bg-decor-light.svg") repeat;
}
body.light .theme-light {
	background: linear-gradient(to bottom right, #FE7D59 20%, #FFB515 100%);
	color: #fff;
}
body.light .theme-light:after {
	display: block;
}
body.light .header-top {
	background-color: #F08800;
}
body.light .lang-list {
	background-color: #E5E4E4;
	border-color: #C8904B;
}
body.light .header-bottom:before {
	background-color: #B7B6B6;
}
body.light .btn-custom {
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	body.light .btn-custom:hover {
		color: #EFA954;
	}
}
body.light .cat-header {
	background-color: #F9F9F9;
}
body.light .cat-body,
body.light .cat-header:before {
	background: #F8F8F8;
}
body.light .category-box {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .category-box:before {
	background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
body.light .category-box:after {
	background: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
body.light a {
	color: #000;
}
body.light .cat-text,
body.light .cat-list .item:before {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .cat-link .icon-search {
	color: var(--dark-60, rgba(0, 0, 0, 0.2));
}
@media (hover: hover) and (pointer: fine) {
	body.light .cat-link:hover {
		background-color: #fff;
	}
	body.light .cat-link:hover .icon-search {
		color: #FF9700;
	}
}
body.light .cat-bottom {
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	body.light .cat-bottom:hover {
		color: #EFA954;
	}
}
body.light .scrollbar-custom {
	top: 25px;
}
body.light .cat-header {
	z-index: 1;
}
body.light .cat-header:before {
	display: none;
}
body.light .cat-body {
	margin-top: -15px;
}
body.light .open-menu {
	background-color: #a7a2a2;
}
body.light .open-menu .header-cols .related-sites {
	background-color: #c2c0c0;
}
body.light .open-menu .header-top {
	background-color: #a7a2a2;
}
body.light .open-menu .related-sites .cat-bottom {
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
	color: #fff;
}
body.light .box-thumb {
	background-color: #f8f8f8;
}
body.light .block.related-sites {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .buttons-wrap .btn-custom {
	color: #fff;
}
/* Hover behaviour (filter brightness + lift) is unified in the dark-theme
   rule. We intentionally drop the legacy `color: #FF9700` hover override
   here so the brightness sweep reads cleanly on both themes. */
body.light .headline,
body.light .box-thumb .name-text {
	color: #000;
}
body.light .related-sites .text-name {
	color: rgba(0, 0, 0, 0.78);
}
body.light .headline .title .value {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .breadcrumbs .svg-icon,
body.light .box-thumb .text {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .buttons-wrap .btn-custom:first-child:after {
	background: #eab308;
	top: 1.4px;
	left: 1.4px;
	width: calc(100% - 2.8px);
	height: calc(100% - 1.4px);
}
body.light .buttons-wrap .btn-custom:first-child {
	background: linear-gradient(to top, #eab308 0%, #eab308 12%, transparent 12%), linear-gradient(to bottom, #fde047 0%, #eab308 100%);
	color: #fff;
}
body.light .box-thumb .value {
	background: var(--white-60, rgba(255, 255, 255, 0.6));
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .thumb {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .related-list .item:before {
	background: var(--white-60, rgba(255, 255, 255, 0.6));
	color: #000;
}
body.light .related-sites .top .text {
	color: #000;
}
body.light .breadcrumbs .link {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
@media (hover: hover) and (pointer: fine) {
	body.light .breadcrumbs .link:hover {
		color: #FF9700;
	}
}
body.light .block.related-sites .box-img .top {
	color: #fff;
}
body.light .info-block,
body.light .sidebar .related-sites,
body.light .layout .related-sites {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .thumbs.second {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .thumbs.second .thumb {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .thumbs .wrap-info .text-name,
body.light .layout {
	color: #000;
}
body.light .info-block .text-review {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .sidebar .related-sites:last-child .cat-bottom {
	background: var(--dark-80, rgba(0, 0, 0, 0.8));
}
body.light .info-block .buttons-wrap .btn-custom:first-child:after {
	background: #eab308;
	top: 1.4px;
	left: 1.4px;
	width: calc(100% - 2.8px);
	height: calc(100% - 1.4px);
}
body.light .info-block .buttons-wrap .btn-custom:first-child {
	background: linear-gradient(to top, #eab308 0%, #eab308 12%, transparent 12%), linear-gradient(to bottom, #fde047 0%, #eab308 100%);
	color: #fff;
}
body.light .thumbs .top-line .text {
	color: #000;
}
body.light .thumbs.second .number {
	background: var(--white-60, rgba(255, 255, 255, 0.6));
	color: #000;
}
@media (max-width: 640px) {
	body.light .info-block .wrap-box .col-left .top .text {
		color: #fff;
	}
}
body.light .check-list .icon {
	color: #fff;
}
body.light .list-info .rate-text,
body.light .list-info .col-left {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .sidebar .related-sites:last-child .cat-bottom {
	border-color: #FFC97F;
}
body.light .content .footer-text .title,
body.light .layout .related-sites .top-title .text {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .info-block:after {
	background: linear-gradient(180deg, rgba(194, 192, 192, 0) 0%, #ecebeb  100%);

}
@media (max-width: 380px) {
	body.light .info-block:after {

	}
}
body.light .blogs-wrap,
body.light .col-thumb {
	background: var(--white-20, rgba(255, 255, 255, 0.2));
}
body.light .blogs-wrap {
	color: #000;
}
body.light .aux .m-right {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .blogs-wrap .cols {
	background-color: #F8F8F8;
}
body.light .blogs-wrap .wrap-btn .btn-custom {
	color: #fff;
}
@media (hover: hover) and (pointer: fine) {
	body.light .blogs-wrap .wrap-btn .btn-custom:hover {
		color: #FF9700;
	}
}
body.light .page-link .number {
	color: #fff;
}
body.light .blog-list {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
}
body.light .col-thumb .title-name {
	color: #000;
}
body.light .footer-wrap:after {
	background-color: #B7B6B6;
}
body.light .wrap-canvas:after {
	border-color: #B7B6B6;
}

a {
	color: #fff;
	text-decoration: none;
}

input {
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
	height: 47px;
	line-height: 47px;
	border-radius: 20px;
	border: 1px solid var(--1-gray-10, #FBFBFB);
	padding: 0 23px;
	font-family: "Archivo", sans-serif;
}

* {
	outline: none;
}

* {
	box-sizing: border-box;
}
*:before, *:after {
	box-sizing: border-box;
}
* ::-moz-selection {
	background: #2600ff;
	color: #fff;
}
* ::selection {
	background: #2600ff;
	color: #fff;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	font-size: 15px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	font-size: 15px;
	opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	font-size: 15px;
	opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	font-size: 15px;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color: transparent;
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
	color: transparent;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
	color: transparent;
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
	color: transparent;
}
input.placeholder, textarea.placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8)) !important;
}

.wrapper {
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
	overflow: hidden;
}

.container {
	max-width: 1250px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}
@media (max-width: 1200px) {
	.container {
		padding: 0 10px;
	}
}

.svg-icon {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.title {
	font-weight: 500;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}
.main {
	margin-top: 368px;

}
@media (max-width: 910px) {
	.header {
		position: fixed;
		z-index: 10;
	}
	.main {
		margin-top: 0;
	}
}
.header.open-menu .burger span:nth-child(1) {
	top: 10px;
	transform: translate3d(-50%, 13px, 0) rotate(45deg);
}
.header.open-menu .burger span:nth-child(2) {
	opacity: 0;
}
.header.open-menu .burger span:nth-child(3) {
	top: 10px;
	transform: translate3d(-50%, 14px, 0) rotate(-45deg);
}
.header.open-menu .burger {
	background: linear-gradient(to bottom, #FFC97F 0%, #E5912A 100%);
}
.header.open-menu .burger:after {
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
}
.header.open-menu .header-controls {
	display: flex;
	justify-content: center;
}
.header.open-menu .search-header {
	display: none;
}
.header.open-menu .header-cols .related-sites {
	display: block;
}
.header.open-search .mob-search {
	background: linear-gradient(to bottom, #FFC97F 0%, #E5912A 100%);
}
.header.open-search .mob-search:after {
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
}
.header.open-search .header-controls {
	display: flex;
}
.header.open-search .header-controls .navbar {
	display: none;
}
.header.open-search .header-controls .theme-wrap {
	display: none;
}
.header.open-search .search-header {
	padding-bottom: 24px;
}

.header-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	margin-bottom: 0;
	animation: headerSlideDown 0.3s ease forwards;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
@keyframes headerSlideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}
.header-scrolled .header-text {
	display: none;
}
.header-scrolled .search-header {
	order: -1;
	margin-right: 10px;
}
.header-scrolled .theme-wrap {
	margin-left: 0;
}
.header-scrolled .header-cols .col-right {
	width: 100%;
}
.header-scrolled .header-cols .col-left {
	display: none;
}
.header-scrolled .header-cols .col-right .wrap {
	margin-bottom: 0;
}
.header-scrolled .header-controls {
	margin-left: 0;
	flex-grow: 1;
}
.header-scrolled .col-right {
	display: flex;
	align-items: center;
}
.header-scrolled .header-top {
	display: none;
}
.header-scrolled .logo-scrolled {
	display: block;
}
.header-scrolled .header-bottom:after {
	height: 100%;
}
.header-scrolled .header-bottom {
	border-top: none;
}
@media (min-width: 911px) and (max-width: 1150px) {
	.header-scrolled .nav-link .icon + .name,
	.header-scrolled .fake-placeholder .name {
		display: none;
	}
	.header-scrolled .navbar .btn-custom {
		padding: 4px 12px;
	}
}

.logo-scrolled {
	display: none;
}
.logo-scrolled img {
	display: block;
	height: 105px;
}

.open-menu,
.open-search {
	background-color: #2B2A29;
	height: 100%;
	overflow-y: auto;
}
.open-menu .container,
.open-menu .header-cols,
.open-search .container,
.open-search .header-cols {
	height: 100%;
}
.open-menu .header-bottom,
.open-search .header-bottom {
	background: transparent;
	border-color: transparent;
}
.open-menu .header-bottom:before, .open-menu .header-bottom:after,
.open-search .header-bottom:before,
.open-search .header-bottom:after {
	display: none;
}
.open-menu .header-bg-img,
.open-search .header-bg-img {
	display: none;
}
@media (max-width: 910px) {
	.open-menu .header-wrap,
	.open-search .header-wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}
.open-menu .header-bottom,
.open-search .header-bottom {
	flex-grow: 1;
}
.open-menu .col-right,
.open-search .col-right {
	display: table;
	table-layout: fixed;
}
.open-menu .col-right .menu-footer,
.open-search .col-right .menu-footer {
	display: table-row;
	height: 1px;
}

.light .open-menu,
.light .open-search {
	background-color: #a7a2a2;
}
.light .open-menu .header-cols .related-sites,
.light .open-search .header-cols .related-sites {
	background-color: #c2c0c0;
}
.light .open-menu .header-top,
.light .open-search .header-top {
	background-color: #a7a2a2;
}
.light .open-menu .related-sites .cat-bottom,
.light .open-search .related-sites .cat-bottom {
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
	color: #fff;
}

.mob-search {
	border: none;
	background: none;
	color: #fff;
	font-size: 22px;
}

.burger {
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.blogs-wrap .col-left{
	margin: 20px;
}
.burger span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, 13px, 0);
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 3px;
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.burger span:nth-child(1) {
	top: 3px;
}

.burger span:nth-child(2) {
	top: 10px;
}

.burger span:nth-child(3) {
	top: 17px;
}

.header-top {
	padding: 4px 0;
	background-color: #2B2A29;
}
@media (max-width: 910px) {
	.header-top .lang-wrap {
		padding-right: 5px;
	}
}

.header-bottom {
	background-color: #EFA954;
	border-top: 1px solid #C8904B;
	padding-top: 5px;
	position: relative;
}
@media (max-width: 910px) {
	.header-bottom {
		padding: 5px 0;
	}
}
.header-bottom:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 98%;
	background-color: #222221;
	height: 26px;
	pointer-events: none;
}
@media (max-width: 910px) {
	.header-bottom:before {
		height: 35px;
		top: 100%;
	}
}
@media (max-width: 380px) {
	.header-bottom:before {
		height: 24px;
	}
}
.js-info{
	height:82px ;
}
.header-bottom:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 100%;
	height: 55%;
	background: url("../images/header-bg.svg") no-repeat bottom center/cover;
	pointer-events: none;
}
@media (max-width: 1024px) {
	.header-bottom:after {
		bottom: -26px;
		height: 72%;
	}
}
@media (max-width: 910px) {
	.header-bottom:after {
		bottom: -7px;
		scale: 2;
	}
}
@media (max-width: 380px) {
	.header-bottom:after {
		background: url("../images/header-bg-mob.webp") no-repeat bottom center/cover;
		height: 36%;
		scale: 2.1;
	}
}

.bg-header {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.logo-header {
	position: relative;
	display: inline-block;
	scale: 1.12;
	top: -17px;
}

.header-text {
	color: var(--color-dark, #000);
	line-height: 1.3;
}
.header-text .header-desc-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 910px) {
	.header-text {
		display: none;
	}
}

.header-cols {
	display: flex;
	position: relative;
	z-index: 1;
}
.header-cols .col-left {
	margin-bottom: -30px;
}
@media (max-width: 1024px) {
	.header-cols .col-left {
		display: none;
	}
}
.header-cols .col-right {
	width: 100%;
}
.header-cols .col-right .wrap {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
@media (max-width: 1024px) {
	.header-cols .col-right .wrap {
		margin-bottom: 10px;
	}
}
@media (max-width: 910px) {
	.header-cols .col-right .wrap {
		margin-bottom: 0;
		justify-content: space-between;
		padding: 0 8px;
		width: 100%;
	}
}
@media (max-width: 380px) {
	.header-cols .col-right .wrap {
		padding: 0;
	}
}
.header-cols .wrap .btn-custom {
	display: none;
}
@media (max-width: 910px) {
	.header-cols .wrap .btn-custom {
		padding: 0;
		width: 57px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
}
.header-cols .logo-text {
	flex-shrink: 0;
	margin-right: 30px;
	display: inline-block;
}
@media (max-width: 1024px) {
	.header-cols .logo-text {
		margin-right: 20px;
	}
}
@media (max-width: 910px) {
	.header-cols .logo-text {
		margin: 0 5px;
	}
	.header-cols .logo-text img {
		width: 140px;
	}
}
@media (max-width: 380px) {
	.header-cols .logo-text img {
		width: 125px;
	}
}

.title-text {
	font-weight: 500;
	font-size: 24px;
	margin-bottom: 8px;
}

.lang-wrap {
	display: table;
	position: relative;
	margin-left: auto;
}
.lang-wrap.active .lang-list {
	display: block;
}
.lang-wrap.active .lang-btn .icon-arrow {
	transform: rotate(180deg);
}
.lang-wrap .flag {
	margin-right: 8px;
	display: block;
	border-radius: 2px;
	width: 24px;
	height: 16px;
	-o-object-fit: cover;
	   object-fit: cover;
}

.lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 5px 4px 5px;
	border-radius: 5px;
	border: 1px solid var(--white-20, rgba(255, 255, 255, 0.2));
	background-color: transparent;
	color: #fff;
	cursor: pointer;
}
.lang-btn .icon-arrow {
	font-size: 11px;
	transition: transform 0.2s;
}
.lang-btn .lang-name {
	text-transform: uppercase;
	margin-right: 4px;
	font-size: 13px;
}

.lang-name {
	font-size: 14px;
}

.lang-list {
	width: 250px;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 2;
	text-align: left;
	border-radius: 5px;
	border: 1px solid var(--white-20, rgba(255, 255, 255, 0.2));
	padding: 10px 6px;
	background-color: #2B2A29;
	-moz-column-count: 2;
	     column-count: 2;
	display: none;
}
.lang-list .item {
	display: flex;
	margin-bottom: 6px;
	padding: 0 4px;
}
.lang-list .item:last-child {
	margin-bottom: 0;
}

.lang-link {
	display: inline-flex;
	align-items: center;
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.lang-link:hover {
		color: #FF9700;
	}
}
.lang-link .lang-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 70%;
}

.header-controls {
	border-radius: 36px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	padding: 13px 16px;
	display: flex;
	align-items: center;
	margin-left: -30px;
}
@media (max-width: 1024px) {
	.header-controls {
		margin-left: 0;
		padding: 8px;
	}
}
@media (max-width: 910px) {
	.header-controls {
		display: none;
		padding: 0;
		background: none;
		margin-top: 35px;
	}
}
@media (max-width: 910px) {
	.header-controls .navbar {
		margin-right: 0;
	}
}
.header-controls .navbar .item:nth-child(4) .name {
	display: block;
}
@media (max-width: 380px) {
	.header-controls .navbar .item:nth-child(4) .name {
		display: none;
	}
}
@media (max-width: 640px) {
	.header-controls .navbar .name {
		display: none;
	}
}
@media (max-width: 380px) {
	.header-controls .btn-custom {
		
	}
}
@media (max-width: 380px) {
	.header-controls .theme-wrap {
		padding: 4px 6px;
	}
}

.search-header {
	flex-grow: 1;
}

.search-form {
	position: relative;
}
.search-form .search-btn {
	position: absolute;
	top: 50%;
	right: 23px;
	transform: translate3d(0, -50%, 0);
	border: none;
	background: none;
	/* Fix #5 (2026-07-09): лупа — некликабельный на вид элемент,
	   убран hover-эффект + cursor:pointer + transition (было cursor:pointer). */
	cursor: default;
	font-size: 20px;
}
/* Fix #5: hover-эффект лупы убран (некликабельный элемент)
@media (hover: hover) and (pointer: fine) {
	.search-form .search-btn:hover {
		color: #EFA954;
	}
}
*/
.box-thumb .top img{
max-width:40px !important;
max-height:40px !important;
object-fit: contain;
}
.offline {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}
.search-input {
	width: 100%;
	padding-right: 50px;
}

.fake-placeholder {
	color: var(--dark-80, rgba(0, 0, 0, 0.8));
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(100% - 50px);
	padding-left: 23px;
	transform: translateY(-50%);
	pointer-events: none;
}
.fake-placeholder .name {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
	margin-left: 6px;
}
@media (max-width: 1200px) {
	.fake-placeholder .name {
		display: none;
	}
}
@media (max-width: 1024px) {
	.fake-placeholder .name {
		display: block;
	}
}

.search-input:not(:-moz-placeholder) + .fake-placeholder {
	display: none;
}

.search-input:focus + .fake-placeholder,
.search-input:not(:placeholder-shown) + .fake-placeholder {
	display: none;
}

.navbar {
	display: flex;
	margin-right: 10px;
}
@media (max-width: 1024px) {
	.navbar {
		margin-right: 7px;
	}
}
.navbar .item {
	margin-right: 2px;
}
.navbar .item:last-child {
	margin-right: 0;
}

.nav-link {
	transition: color 0.3s;
	display: flex;
	align-items: center;
}
@media (hover: hover) and (pointer: fine) {
	.nav-link:hover {
		color: #FF9700;
	}
}
.nav-link .icon {
	flex-shrink: 0;
}
.nav-link .icon + .name {
	margin-left: 8px;
	white-space: nowrap;
}

.btn-custom {
	border-radius: 20px;
	background: linear-gradient(to bottom, #FFC97F 0%, #271C0E 100%);
	padding: 4px 16px;
	font-weight: 500;
	height: 47px;
	line-height: 47px;
	position: relative;
	overflow: hidden;
}
.btn-custom:after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	background: var(--dark-80, rgba(0, 0, 0, 0.8));
	border-radius: 20px;
}
.btn-custom * {
	z-index: 1;
	position: relative;
}

.theme-wrap {
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 7px;
	padding-right: 7px;
}
@media (max-width: 1024px) {
	.theme-wrap {
		margin-left: 7px;
	}
}
@media (max-width: 910px) {
	.theme-wrap {
		margin-left: 2px;
	}
}

.theme-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	color: #838383;
	font-size: 19px;
	margin: 0 2px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	position: relative;
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.theme-btn:hover {
		color: #FF9700;
	}
}
.theme-btn:after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	height: calc(100% - 4px);
	width: calc(100% - 4px);
	background: linear-gradient(to bottom, #EC873D, #E89728);
	border-radius: 50%;
	display: none;
}
.theme-btn * {
	z-index: 1;
	position: relative;
}

.theme-light {
	font-size: 23px;
}

.menu-footer {
	display: none;
	text-align: center;
	font-size: 15px;
}
.menu-footer .logo-header {
	margin-bottom: 50px;
	top: 0;
	scale: 1;
}
.menu-footer .box {
	margin-bottom: 8px;
}
.menu-footer .copy {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	margin: 0 auto;
}
.menu-footer .footer-link {
	color: #fff;
}
.menu-footer .footer-list {
	justify-content: center;
}

.header-cols .related-sites {
	display: none;
	margin: 24px 0;
}

.related-sites {
	padding: 12px 10px 16px;
	border-radius: 20px;
	background: #222221;
}
.related-sites .top-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.related-sites .top-title .img {
	flex-shrink: 0;
	margin-right: 18px;
}
.related-sites .top-title .text {
	font-weight: 500;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
}
.related-sites .top {
	display: flex;
	align-items: center;
	margin-bottom: 4px;
}
.related-sites .top .icon {
	flex-shrink: 0;
	margin-right: 10px;
	font-size: 20px;
	color: #FD0000;
}
.related-sites .top .text {
	text-transform: capitalize;
	font-size: 17px;
	font-weight: 500;
}

 .text-lim{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
    overflow-wrap: break-word;
	overflow: hidden;
 }
.related-sites .text-name {
	color: rgba(255, 255, 255, 0.88);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-word;
    overflow-wrap: break-word;
	overflow: hidden;
	
}
@media (max-width: 768px) {
	.related-sites .text-name {
		width: 50%;
		margin: 0 auto;
		display: block;
	}
}
@media (max-width: 480px) {
	.related-sites .text-name {
		text-align: left;
		width: 100%;
		padding-left: 45px;
	}
}
.related-sites .cat-bottom {
	border-color: #DFB06F;
	background: #070707;
	max-width: 290px;
	margin: 24px auto 0;
	text-transform: none;
	padding: 13px 10px;
}

.related-list {
	margin-bottom: 32px;
	counter-reset: item;
}
.related-list .item {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}
/* Burger-menu (task #7): thin divider between categories, theporndude-style.
   Live only in the slide-out burger column (.header-cols), so the inline
   homepage Categories block keeps its borderless layout. */
.header-cols .related-list .item {
	/* Symmetric vertical padding so the row content sits centred BETWEEN the
	   dividers instead of clinging to the top line. align-items:center (set on
	   the base .item rule) then balances number/icon/text vertically. */
	padding: 15px 0;
	margin-bottom: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-cols .related-list .item:first-child {
	padding-top: 0;
}
.header-cols .related-list .item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
body.light .header-cols .related-list .item {
	border-bottom-color: rgba(0, 0, 0, 0.08);
}
.related-list .item:first-child:before {
	border-color: #FF6464;
}
.related-list .item:nth-child(2):before {
	border-color: #287DA2;
}
.related-list .item:nth-child(3):before {
	border-color: #ACFF64;
}
.related-list .item:nth-child(4):before {
	border-color: #FF64B4;
}
.related-list .item:nth-child(5):before {
	border-color: #A70D0D;
}
.related-list .item:before {
	content: counter(item) "";
	counter-increment: item;
	font-size: 18px;
	font-weight: 500;
	margin-right: 24px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	border-bottom: 2px solid transparent;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
}
.related-list .item:last-child {
	margin-bottom: 0;
}

.relared-link {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.relared-link:hover {
		color: #FF9700;
	}
}

/* Burger-menu Categories list: whole row (number + icon + title + subtitle)
   is the click target, not just the small subtitle text. Stretched-link
   pattern via a transparent ::before pseudo-element on .relared-link sized
   to fill the parent .item. */
.header-cols .related-list .item {
	position: relative;
}
.header-cols .related-list .item .relared-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Fix #14 (2026-07-10): grid-stack против «прыжка» шапки при hover.
   Раньше .js-info и .header-text подменялись через display:none/block — они
   разной высоты (заголовок 1–3 строки = 75–124px, инфо-попап фикс. 82px), из-за
   чего контейнер .wrap менял высоту и вся шапка дёргалась. Теперь оба лежат в
   ОДНОЙ grid-ячейке (.header-text-stack, grid-area:1/1): grid держит высоту =
   max(обоих) всегда, а переключаемся через visibility+opacity (в потоке остаются
   оба → высота стабильна при любой длине текста/языке/ширине). web.dev-паттерн
   против hover layout-shift. */
.header-text-stack {
	display: grid;
	align-items: center;
}
.header-text-stack > .js-info,
.header-text-stack > .header-text {
	grid-area: 1 / 1;
	min-width: 0;
}
.js-info {
	color: var(--color-dark, #000);
	visibility: hidden;
	opacity: 0;
}
.js-info.active {
	visibility: visible;
	opacity: 1;
}
.js-info.active + .header-text {
	visibility: hidden;
	opacity: 0;
}
.js-info .columns {
	display: flex;
	align-items: center;
}
.js-info .column-left {
	margin-right: 12px;
	flex-shrink: 0;
}
.js-info .top-line {
	display: flex;
	align-items: center;
	margin-bottom: 4px;
}
.js-info .box-rating {
	display: flex;
	align-items: center;
}
.js-info .rating-wrap {
	margin-right: 8px;
}
.js-info .rate-value {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
	font-weight: 500;
	font-size: 18px;
}
.js-info .box-img {
	border-radius: 20px;
	border: 3px solid var(--color-dark_bg_block, #1B1B1B);
	/* Fix #6 (2026-07-09): нейтральный тёмный фон вместо резкого #000, чтобы
	   короткий момент до появления предзагруженного скриншота не читался как
	   «чёрный/сломанный экран». */
	background: var(--color-dark_bg_block, #1B1B1B);
	width: 150px;
	height: 82px;
	overflow: hidden;
	position: relative;
}
.js-info .box-img .js-info-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	/* Fix #6: быстрый мягкий crossfade. Скриншот почти всегда уже предзагружен
	   (viewport-preloader), так что появляется практически мгновенно. */
	transition: opacity 0.15s ease;
	display: block;
}
.js-info .box-img .js-info-thumb.active { opacity: 1; }
/* Fix #6: пока скриншот грузится/декодируется, показываем брендовый turtle-
   плейсхолдер (класс .is-placeholder ставится из JS сразу при наведении), а не
   голый чёрный фон .box-img. Плавное появление плейсхолдера. */
.js-info .box-img .shot-placeholder { opacity: 0; transition: opacity 0.2s ease; }
.js-info .box-img.is-placeholder .shot-placeholder { opacity: 1; }
/* Branded placeholder inside the hover-preview thumb plate. Hidden by default;
   .is-placeholder (toggled by initLinkHoverInfo when the listing has no
   screenshot) reveals it filling the 150×82 slot with the centred mascot. */
.js-info .box-img .shot-placeholder {
	position: absolute;
	inset: 0;
	/* Fix #6: было display:none/flex — заменено на постоянный flex + opacity,
	   чтобы появление плейсхолдера могло плавно анимироваться (crossfade). */
	display: flex;
	padding: 4px;
	pointer-events: none;
}
.js-info .box-img.is-placeholder .js-info-thumb { opacity: 0; }
.js-info .box-img .shot-placeholder .ph-turtle { object-fit: contain; filter: none; }

.js-info-rating {
	color: #000;
}

.js-info-title {
	font-weight: 500;
	font-size: 17px;
}

.js-info-img {
	flex-shrink: 0;
	margin-right: 12px;
	/* Clamped to 16×16 — the hover-preview favicon comes from the same
	   listing_logo source as everywhere else (typically a 16×16 PNG from
	   Google's s2 service). Upscaling to 19px showed visible blur. */
	width: 16px;
	height: 16px;
	max-width: 16px;
	max-height: 16px;
	object-fit: contain;
	opacity: 0;
}
.js-info-img.active {
	opacity: 1;
}
.icon_fixed {
	max-height: 40px;
}
    .cat-icon {
	flex-shrink: 0;
	margin-right: 12px;
	max-height: 40px;
	max-width: 40px;
}
.logo-icon{
    max-height: 19px;
    max-width: 19px;
}
.limiter{
max-width:40px;
max-height:40px;
}


.js-info-text {
	margin-bottom: 4px;
	  display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-scrolled.header-hover .header-controls {
	display: none;
}
.header-scrolled.header-hover .header-cols .wrap {
	width: 100%;
}
.header-scrolled.header-hover .js-info .box-img {
	width: 65px;
	height: 40px;
	border-radius: 8px;
}
.header-scrolled.header-hover .js-info {
	border-radius: 36px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	padding: 13px 16px;
	color: #fff;
	min-width: 1px;
}
.header-scrolled.header-hover .js-info-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0;
	font-size: 12px;
	padding-right: 3px;
}
.header-scrolled.header-hover .columns {
	border-radius: 20px;
	border: 1px solid var(--dark-60, rgba(0, 0, 0, 0.6));
	background: var(--dark-80, rgba(0, 0, 0, 0.8));
	position: relative;
	padding: 4px 12px 4px 8px;
	width: 100%;
}
.header-scrolled.header-hover .column-right {
	min-width: 1px;
}
.header-scrolled.header-hover .js-info-title {
	font-size: 15px;
	font-weight: 400;
}
.header-scrolled.header-hover .js-info-rating {
	color: var(--color-1, #FF9700);
}
.header-scrolled.header-hover .js-info .rate-value {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	order: -1;
	line-height: 1;
}
.header-scrolled.header-hover .js-rating .rate {
	width: 16px;
}
.header-scrolled.header-hover .js-rating .rating-wrap {
	margin: 0 0 0 8px;
}
.header-scrolled.header-hover .js-rating {
	position: absolute;
	top: 6px;
	right: 14px;
}
.header-scrolled.header-hover .js-info .top-line {
	width: calc(100% - 154px);
	overflow: hidden;
}


@media (max-width: 910px) {
	.main {
		/* Fix #10 (2026-07-09): было 170px — при фикс-шапке ~125px это давало
		   ~45px пустоты между шапкой и контентом. 135px = высота шапки + ~10px
		   зазор (контент не уезжает под шапку). */
		margin-top: 135px;
	}
}
@media (max-width: 380px) {
	.main {
		/* Fix #10: было 160px, шапка на узких ~116px → 128px = шапка + ~12px. */
		margin-top: 128px;
	}
}

.index-page .main {
}

.categories-grid {
	margin-bottom: 110px;
}
@media (max-width: 1024px) {
	.categories-grid {
		margin-bottom: 80px;
	}
}
@media (max-width: 640px) {
	.categories-grid {
		margin-bottom: 60px;
	}
}
@media (min-width: 1025px) {
	.categories-grid {
		display: grid;
		gap: 10px 8px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-flow: row dense;
		grid-auto-rows: 1px;
	}
}

.category-box {
	border-radius: 20px;
	background: var(--color-dark_bg_block, #1B1B1B);
	position: relative;
	display: grid;
	padding: 3px 3px 8px 3px;
	grid-template-rows: 60px 1fr;
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 1024px) {
	.category-box {
		margin-bottom: 10px;
		background: var(--color-dark_bg_block, #1B1B1B);
	}
	.category-box:last-child {
		margin-bottom: 0;
	}
}
.category-box:before {
	content: "";
	left: 3px;
	width: calc(100% - 6px);
	height: 15px;
	top: 64px;
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgb(27, 27, 27), rgba(27, 27, 27, 0.6), rgba(27, 27, 27, 0));
}

.category-box:after {
	content: "";
	left: 3px;
	width: calc(100% - 6px);
	height: 60px;
	bottom: 64px;
	position: absolute;
	z-index: 1;
	pointer-events: none;
	border-radius: 0 0 20px 20px;
	background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

@media (max-width: 1024px) {
	.light .category-box {
		background: #fff;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}
}

.cat-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	border-bottom: 3px solid transparent;
	
	padding: 5px 10px;
	transition: color 0.3s;
	position: relative;
}
.cat-header:before {
	content: "";
	position: absolute;
	bottom: -4px;
	height: 15px;
	left: 0;
	right: 0;
	background: #212121;
	z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
	.cat-header:hover {
		color: #FF9700;
	}
}

.cat-body {
	border-radius: 0 0 20px 20px;

	margin-bottom: 8px;
	position: relative;
	overflow: hidden;
}

.scrollbar-custom {
	padding: 0 10px;
	overflow-y: auto;
	position: absolute;
	left: 0;
	right: 4px;
	top: 10px;
	height: calc(100% - 40px);
	scrollbar-width: thin;
	scrollbar-color: #4a4a4a #161616;
}
.scrollbar-custom::-webkit-scrollbar {
	background-color: #161616;
	width: 5px;
}
.scrollbar-custom::-webkit-scrollbar-track {
	background-color: #161616;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
	border-radius: 5px;
}
.scrollbar-custom::-webkit-scrollbar-button {
	display: none;
}
body.light .scrollbar-custom::-webkit-scrollbar {
	background-color: #F0F0F0;
}
body.light .scrollbar-custom::-webkit-scrollbar-track {
	background-color: #F0F0F0;
}

.cat-list {
	counter-reset: item;
}
@media (max-width: 1024px) {
	.cat-list {
		display: flex;
		flex-wrap: wrap;
	}
}
.cat-list .item {
	display: flex;
	align-items: center;
	position: relative;
}
@media (hover: hover) and (pointer: fine) {
	.cat-list .item:hover:before {
		color: #fff;
	}
}
@media (max-width: 1024px) {
	.cat-list .item {
		width: 33.333%;
		padding: 0 5px;
	}
}
@media (max-width: 768px) {
	.cat-list .item {
		width: 50%;
	}
}
.cat-list .item:before {
	content: counter(item) "";
	counter-increment: item;
	font-size: 12px;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	min-width: 14px;
	text-align: right;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translate3d(0, -50%, 0);
	transition: color 0.3s;
	pointer-events: none;
}
.cat-list .item:last-child {
	position: relative;
	z-index: 2;
}

.cat-bottom {
	font-size: 18px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	padding: 10px 6px;
	border-radius: 20px;
	position: relative;
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	transition: color 0.3s;
}
@media (max-width: 480px) {
	.cat-bottom {
		font-size: 16px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.cat-bottom:hover {
		color: #FF9700;
	}
}
.cat-bottom .count {
	font-weight: 900;
	font-size: 22px;
}
@media (max-width: 480px) {
	.cat-bottom .count {
		font-size: 19px;
	}
}
.cat-bottom .icon {
	flex-shrink: 0;
	margin-left: 20px;
	transform: translateY(-1px);
}
@media (max-width: 480px) {
	.cat-bottom .icon {
		margin-left: 12px;
	}
}
.cat-bottom .name {
	max-width: 75%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	/* Lift text 2px to compensate Manrope's baseline-vs-cap-height offset —
	   glyphs sit slightly below the geometric center of their text box, so
	   without this the text reads as low relative to the SVG icon. */
	transform: translateY(-2px);
}

.cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.3s, color 0.3s;
	font-size: 17px;
	font-weight: 500;
	padding: 7px 10px 7px 30px;
	border-radius: 20px;
}
.cat-link-site {
	flex: 1 1 auto;
	min-width: 0;
}
.cat-link-review {
	flex-shrink: 0;
	padding: 7px 10px;
}
@media (hover: hover) and (pointer: fine) {
	.cat-link:hover {
		color: #FF9700;
		background-color: #0B0B0B;
	}
	.cat-link:hover .icon-search {
		color: #fff;
	}
}
.cat-link .col-left {
	display: flex;
	align-items: center;
	margin-right: 5px;
}
.cat-link .icon-search {
	flex-shrink: 0;
	transition: color 0.3s;
	color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 550px) {
	.cat-link .icon-search {
		display: none;
	}
}
.cat-link .text-name {
	white-space: nowrap;

}
@media (max-width: 1200px) {
	.cat-link .text-name {
		font-size: 14px;
	}
}
@media (max-width: 1024px) {
	.cat-link .text-name {
		font-size: 15px;
	}
}
@media (max-width: 550px) {
	.cat-link .text-name {
		margin-right: 0;
	}
}
@media (max-width: 480px) {
	.cat-link .text-name {
		max-width: 86px;
	}
}
.cat-link .logo-icon {
	flex-shrink: 0;
	margin-right: 10px;
}



.category-box.cat-box-2 .cat-header {
	border-color: #0097C7;
}
.category-box.cat-box-2 .cat-bottom {
	border-color: #0097C7;
	background: rgba(0, 151, 199, 0.4);
}
.category-box.cat-box-3 .cat-header {
	border-color: #61C765;
}
.category-box.cat-box-3 .cat-bottom {
	border-color: #61C765;
	background: rgba(97, 199, 101, 0.4);
}
.category-box.cat-box-4 .cat-header {
	border-color: #64D9FF;
}
.category-box.cat-box-4 .cat-bottom {
	border-color: #64D9FF;
	background: rgba(100, 217, 255, 0.4);
}
.category-box.cat-box-5 .cat-header {
	border-color: #FFBC64;
}
.category-box.cat-box-5 .cat-bottom {
	border-color: #FFBC64;
	background: rgba(255, 188, 100, 0.4);
}
.category-box.cat-box-6 .cat-header {
	border-color: #D764FF;
}
.category-box.cat-box-6 .cat-bottom {
	border-color: #D764FF;
	background: rgba(215, 100, 255, 0.4);
}
.category-box.cat-box-7 .cat-header {
	border-color: #2186E9;
}
.category-box.cat-box-7 .cat-bottom {
	border-color: #2186E9;
	background: rgba(33, 134, 233, 0.4);
}
.category-box.cat-box-8 .cat-header {
	border-color: #BF7148;
}
.category-box.cat-box-8 .cat-bottom {
	border-color: #BF7148;
	background: rgba(191, 113, 72, 0.4);
}
.cat-lg {
	grid-row-end: span 120;
}
@media (max-width: 1024px) {
	.cat-lg .cat-body {
		height: 438px;
	}
}

.cat-md {
	grid-row-end: span 53;
}
@media (max-width: 1024px) {
	.cat-md .cat-body {
		height: 218px;
	}
}
@media (max-width: 550px) {
	.cat-md .cat-body {
		height: 278px;
	}
}

@media (max-width: 1024px) {
	.light .cat-sm .cat-body {
		margin-top: 15px;
	}
}

.cat-sm {
	grid-row-end: span 41;
}
@media (max-width: 1024px) {
	.cat-sm .cat-body {
		height: 100%;
		margin-top: 15px;
		margin-bottom: 30px;
	}
	.cat-sm .cat-body .scrollbar-custom {
		position: static;
		overflow: hidden;
	}
}

.categories-grid > [data-column="1"] {
	grid-column: 1/1;
}

.categories-grid > [data-column="2"] {
	grid-column: 2/2;
}

.categories-grid > [data-column="3"] {
	grid-column: 3/3;
}

.categories-grid > [data-column="4"] {
	grid-column: 4/4;
}
.thumb.second
.cat-icon {
	flex-shrink: 0;
	margin-right: 12px;
	max-height: 50px;
	max-width: 50px;
}

.cat-name {
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 1200px) {
	.cat-name {
		font-size: 15px;
	}
}
@media (max-width: 1024px) {
	.cat-name {
		font-size: 17px;
	}
}

.cat-text {
	font-size: 12px;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	text-align: center;
	line-height: 1.4;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
	display: -webkit-box;
  	-webkit-line-clamp: 2; /* ограничение в 2 строки */
  	-webkit-box-orient: vertical;
  	overflow: hidden;
}

@media (max-width: 640px) {
	.party-intro {
		padding-bottom: 110px;
		background: url("../images/clouds-bg.svg") no-repeat bottom left/cover;
	}
}
.party-intro .logo-wrap {
	text-align: center;
	position: relative;
	top: -40px;
}
@media (max-width: 640px) {
	.party-intro .logo-wrap {
		top: 0;
	}
}

.wrap-canvas {
	position: relative;
}
@media (max-width: 640px) {
	.wrap-canvas {
		display: none;
	}
}
.wrap-canvas:before {
	content: "";
	position: absolute;
	left: 0;
	top: 20%;
	width: 100%;
	height: 61%;
	background: url("../images/header-bg.svg") no-repeat bottom center/cover;
	pointer-events: none;
	transform: rotate(180deg);
}
@media (max-width: 640px) {
	.wrap-canvas:before {
		top: 10%;
		width: 100%;
		height: 80%;
	}
}
.wrap-canvas:after {
	content: "";
	position: absolute;
	left: 0;
	
	bottom: 55%;
	width: 100%;
	height: 108%;
	background: url("../images/clouds-bg.svg") no-repeat bottom center/cover;
	pointer-events: none;
	border-bottom: 32px solid #222221;
	z-index: -1;
}
@media (max-width: 1024px) {
	.wrap-canvas:after {
		border-width: 17px;
	}
}

.canvas-box {
	width: 100%;
	z-index: 1;
	position: relative;
}

.rating-sites {
	margin-bottom: 40px;
}
.rating-sites .block {
	border-radius: 20px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	padding: 28px 16px;
}
@media (max-width: 768px) {
	.rating-sites .block {
		padding: 12px;
		text-align: center;
	}
}

.breadcrumbs {
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--color-1, #FF9700);
}
.breadcrumbs .item {
	margin-bottom: 4px;
	display: flex;
	align-items: center;
}
.breadcrumbs .svg-icon {
	margin: 0 10px;
	flex-shrink: 0;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	font-size: 14px;
}
.breadcrumbs .link {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.breadcrumbs .link:hover {
		color: #FF9700;
	}
}

.block.related-sites .related-list {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.block.related-sites .related-list .item {
		flex-wrap: wrap;
		position: relative;
	}
}
@media (max-width: 480px) {
	.block.related-sites .related-list .item {
		width: 316px;
		margin: 0 auto 15px;
	}
}
@media (max-width: 380px) {
	.block.related-sites .related-list .item {
		width: 280px;
	}
}
.block.related-sites .related-list .item:before {
	border-color: #FF6464;
	margin-right: 12px;
}
@media (max-width: 768px) {
	.block.related-sites .related-list .item:before {
		position: absolute;
		left: 10%;
	}
}
@media (max-width: 480px) {
	.block.related-sites .related-list .item:before {
		left: 0;
	}
}
@media (max-width: 380px) {
	.block.related-sites .related-list .item:before {
		left: 2px;
	}
}
.block.related-sites .related-list .box {
	margin-right: 12px;
}
@media (max-width: 768px) {
	.block.related-sites .related-list .box {
		margin: 0 0 16px 0;
	}
	.block.related-sites .related-list .box:first-child {
		margin: 0 auto 12px;
	}
}
.block.related-sites .related-list .box.second {
	width:500px;                                                                  
}
@media (max-width: 1250px) {
	.block.related-sites .related-list .box.second {
		max-width: 100%;
		width: 32%;
	}
}
@media (max-width: 1024px) {
	.block.related-sites .related-list .box.second {
		width: 23%;
	}
}
@media (max-width: 910px) {
	.block.related-sites .related-list .box.second {
		width: 100%;
	}
}
@media (max-width: 768px) {
	.block.related-sites .related-list .box.second {
		margin: 0 auto 12px;
	}
}
.block.related-sites .related-list .box:last-child {
	margin-right: 0;
}
@media (max-width: 768px) {
	.block.related-sites .related-list .box:last-child {
		margin: 0;
	}
}
@media (max-width: 768px) {
	.block.related-sites .top {
		justify-content: center;
	}
}
@media (max-width: 480px) {
	.block.related-sites .top {
		display: none;
	}
}


.block.related-sites .box-img {
	border-radius: 20px;
	
	border: 3px solid var(--color-dark_bg_block, #1B1B1B);
	background: var(--color-dark, #000);
	width: 150px;
	height: 82px;
	overflow: hidden;
	flex-shrink: 0;
	display: block;
	-o-object-fit: cover;
	   object-fit: cover;
	position: relative;
}
@media (max-width: 768px) {
	.block.related-sites .box-img {
		width: 312px;
		height: 172px;
	}
}
@media (max-width: 480px) {
	.block.related-sites .box-img {
		background: #8F8F8F;
		border-color: #a7a2a2;
	}
	.block.related-sites .box-img .top .text {
		color: #fff;
	}
}
@media (max-width: 380px) {
	.block.related-sites .box-img {
		width: 280px;
		height: 150px;
	}
}
.block.related-sites .box-img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.block.related-sites .box-img .top {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	margin-bottom: 0;
}
@media (max-width: 480px) {
	.block.related-sites .box-img .top {
		display: flex;
	}
}
.block.related-sites .box-grow {
	flex-grow: 1;
}
@media (max-width: 910px) {

}
@media (max-width: 768px) {
	.block.related-sites .box-grow {
		width: 100%;
	}

}

.buttons-wrap {
	display: flex;
	align-items: center;
}
@media (max-width: 768px) {
	.buttons-wrap {
		justify-content: center;
	}
}
.buttons-wrap .btn-custom {
	height: auto;
	line-height: 1;
	padding: 12px;
	max-width: 135px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
	/* Animate filter on GPU so the brightness sweep reads smoothly at 60fps
	   on any background colour (yellow, green, light theme). */
	transition: filter 0.18s ease;
	will-change: filter;
}
.buttons-wrap .btn-custom .name {
	line-height: 1;
}
.buttons-wrap .btn-custom .icon,
.buttons-wrap .btn-custom svg {
	display: block;
}
@media (hover: hover) and (pointer: fine) {
	.buttons-wrap .btn-custom:hover {
		filter: brightness(1.1);
	}
	.buttons-wrap .btn-custom:active {
		filter: brightness(0.96);
	}
}
.buttons-wrap .btn-custom:first-child {
	background: linear-gradient(to top, #eab308 0%, #eab308 12%, transparent 12%), linear-gradient(to bottom, #fde047 0%, #eab308 100%);
	color: #fff;
}
.buttons-wrap .btn-custom:first-child:after {
	background: #eab308;
	top: 1.4px;
	left: 1.4px;
	width: calc(100% - 2.8px);
	height: calc(100% - 1.4px);
}
.buttons-wrap .btn-custom:last-child {
	margin-right: 0;
	background: linear-gradient(to top, #22c55e 0%, #22c55e 12%, transparent 12%), linear-gradient(to bottom, #86efac 0%, #22c55e 100%);
	color: #fff;
}
.buttons-wrap .btn-custom:last-child:after {
	background: #22c55e;
	top: 1.4px;
	left: 1.4px;
	width: calc(100% - 2.8px);
	height: calc(100% - 1.4px);
}
/* The Visit Site arrow icon sits slightly lower than the text due to glyph
   metrics of the surrounding Roboto/Manrope — nudge it up so it reads centred. */
.buttons-wrap .btn-custom:last-child .icon {
	transform: translateY(-1px);
}
.buttons-wrap .btn-custom .icon {
	flex-shrink: 0;
	width: 17px;
}
.buttons-wrap .btn-custom .icon + .name {
	margin-left: 4px;
}
.buttons-wrap .btn-custom .name + .icon {
	margin-left: 4px;
}
/* Favicon inside Read review / Visit Site buttons replaces the generic
   blog/external-link SVG with the destination site's mark. Square so a
   16:16 Google favicon doesn't squash; subtle radius so high-DPI logos
   feel like icons, not photos. The slight white plate behind it keeps
   dark favicons readable on the yellow/green button fills. */
/* Favicons in buttons — clamped to their natural 16×16. No background
   plate or padding — the favicon sits flat against the button fill so
   there's no visible frame/border around it. Most site favicons are
   designed to work on any background and the button colours (yellow #eab308,
   green #22c55e) provide enough contrast on their own. */
.buttons-wrap .btn-custom .btn-favicon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	object-fit: contain;
	background: transparent;
	padding: 0;
	border: 0;
	border-radius: 0;
	display: block;
	image-rendering: auto;
}
.buttons-wrap .btn-custom .btn-favicon + .name {
	margin-left: 6px;
}
.buttons-wrap .btn-custom .name + .btn-favicon {
	margin-left: 6px;
}
/* Hero CTA hosts a bigger pill, but the favicon itself stays 16×16 —
   upscaling a 16×16 source to 20×20 looks blurry. The pill's visual weight
   comes from typography + padding, not the icon. */
.single-listing-v2 .hero-actions-v2.buttons-wrap .btn-custom .btn-favicon {
	width: 16px;
	height: 16px;
}
.otgs-development-site-front-end{
	display: none !important;
}
.rating-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 480px) {
	.rating-wrap {
		justify-content: flex-start;
		padding-left: 45px;
	}
}
.rating-wrap .rate {
	margin-right: 8px;
	cursor: pointer;
	height: 1em;
}
.rating-wrap .rate:last-child {
	margin-right: 0;
}

.headline {
	margin-bottom: 8px;
}
.single-main-svg{
	height: 2em !important;
}
.headline .title {
	display: flex;
	align-items: center;
	font-weight: 500;
}
.headline .title .icon {
	flex-shrink: 0;
	margin-right: 12px;
}
.headline .title .name {
	font-size: 28px;
	text-transform: uppercase;
}
@media (max-width: 640px) {
	.headline .title .name {
		font-size: 22px;
	}
}
.headline .title .value {
	margin-left: 12px;
	font-size: 18px;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
}
@media (max-width: 640px) {
	.headline .title .value {
		font-size: 16px;
	}
}
@media (max-width: 480px) {
	.headline .title .value {
		display: none;
	}
}

.categories-text {
	background-color: #EFA954;
	padding: 60px 0 60px;
	color: #000;
	margin-bottom: 60px;
	position: relative;
}

.categories-text:before {
	content: "";
	position: absolute;
	left: 0;
	top: -25px;
	width: 100%;
	height: 200px;
	transform: rotate(180deg);
	background: url("../images/header-bg.svg") no-repeat bottom center/cover;
	pointer-events: none;
}

.categories-text:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -25px;
	width: 100%;
	height:200px;
	background: url("../images/header-bg.svg") no-repeat bottom center/cover;
	pointer-events: none;
}

.categories-text .footer-text {
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}

/* Category description typography — mirrors the blog/single-listing article
   rhythm (task #4). Font family is already "Archivo" (inherited from body),
   so this only aligns the *scale*: fluid font-size clamp(15→19px) and the
   1.75 line-height the blog uses, plus matching heading/list sizing. The
   orange panel + black text are an intentional design choice for this block,
   so colours stay as-is — only the type scale is unified.
   Scoped under .categories-text so the footer's own .footer-text is untouched. */
.categories-text .footer-text {
	font-family: "Archivo", sans-serif;
	font-size: clamp(15px, 0.45vw + 0.85rem, 19px);
	line-height: 1.75;
}
.categories-text .footer-text p {
	font-size: inherit;
	line-height: 1.75;
	margin-bottom: 1em;
}
.categories-text .footer-text .title {
	font-family: "Archivo", sans-serif;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.3px;
}
/* Heading sizes track the blog's h2/h3 clamps so the hierarchy reads the same
   across category descriptions, single-listing reviews and blog posts. */
.categories-text .footer-text .title-md {
	font-size: clamp(22px, 1.2vw + 0.95rem, 36px);
	margin: 1.6em 0 0.5em;
}
.categories-text .footer-text .title-sm {
	font-size: clamp(19px, 0.85vw + 0.85rem, 28px);
	margin: 1.5em 0 0.45em;
}
.categories-text .footer-text .title:first-child {
	margin-top: 0;
}
.categories-text .footer-text .listing-list__item {
	font-size: inherit;
	line-height: 1.65;
}

.thumbs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -6px;
}
.thumbs.second {
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.2);
	padding: 16px 16px 0 16px;
	margin: 0;
}
.thumbs.second .thumb {
	width: calc(33.333% - 8px);
	margin: 0 4px 16px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
}
@media (max-width: 1150px) {
	.thumbs.second .thumb {
		width: calc(50% - 8px);
	}
}
@media (max-width: 768px) {
	.thumbs.second .thumb {
		width: calc(100% - 8px);
	}
}
.thumbs.second .number {
	font-size: 18px;
	font-weight: 500;
	margin-right: 24px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	border-bottom: 2px solid #FF6464;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
}
@media (max-width: 480px) {
	.thumbs.second .number {
		margin-right: 15px;
	}
}
@media (max-width: 768px) {
	.thumbs.second .buttons-wrap {
		justify-content: start;
	}
}
@media (max-width: 380px) {
	.thumbs.second .buttons-wrap .name {
		display: none;
	}
}
@media (max-width: 380px) {
	.thumbs.second .buttons-wrap .btn-custom .name + .icon {
		margin-left: 0;
	}
}
.thumbs .top-line {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}
.thumbs .top-line .icon {
	flex-shrink: 0;
	margin-right: 10px;
	font-size: 20px;
	color: #FD0000;
}
.thumbs .top-line .text {
	font-size: 17px;
	font-weight: 500;
}
@media (max-width: 380px) {
	.thumbs .top-line .text {
		font-size: 16px;
	}
}
.thumbs .wrap-info .text-name {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	margin-bottom: 8px;
	overflow-wrap: anywhere;
}
.thumbs .wrap-info .btn-custom {
	font-size: 13px;
	max-width: -moz-fit-content;
	max-width: fit-content;
	padding: 12px 16px;
	margin-right: 4px;
}
.thumbs .wrap-info .btn-custom:last-child {
	margin-right: 0;
}

.thumb {
	border-radius: 20px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	padding: 3px;
	width: calc(25% - 6px);
	margin: 0 3px 25px;
}
@media (max-width: 1024px) {
	.thumb {
		width: calc(33.333% - 6px);
	}
}
@media (max-width: 640px) {
	.thumb {
		width: calc(50% - 6px);
	}
}

.box-thumb {
	border-radius: 20px;
	background: var(--color-dark_bg_block, #1B1B1B);
	padding: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box-thumb .text {
	text-align: center;
	font-size: 12px;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	line-height: 1.3;
	margin-bottom: 12px;
}
.box-thumb .name-text {
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 7px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
@media (max-width: 768px) {
	.box-thumb .name-text {
		font-size: 16px;
	}
}
.box-thumb .top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
}
.box-thumb .value {
	font-size: 18px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 20px;
	background: var(--dark-60, rgba(0, 0, 0, 0.6));
	display: flex;
	align-items: center;
	margin-left: 3px;
}
@media (max-width: 768px) {
	.box-thumb .value {
		font-size: 16px;
	}
}
.box-thumb.box-1 .cat-bottom {
	background-color: #D764FF;
	border-color: #9600ca;
}
.box-thumb.box-2 .cat-bottom {
	background-color: #165DFB;
	border-color: #6198FF;
}
.box-thumb.box-3 .cat-bottom {
	background-color: #F54A00;
	border-color: #FF6B2B;
}
.box-thumb.box-4 .cat-bottom {
	background-color: #E07000;
	border-color: #FF9C2B;
}

.section-thumbs {
	margin-bottom: 45px;
}
@media (max-width: 768px) {
	.section-thumbs {
		margin-bottom: 16px;
	}
}
.section-thumbs:last-child {
	margin-bottom: 0;
}

.layout {
	margin-bottom: 45px;
	display: flex;
}
@media (max-width: 1024px) {
	.layout {
		flex-wrap: wrap;
	}
}
@media (max-width: 768px) {
	.layout {
		margin-bottom: 16px;
	}
}
.layout .top-title .img {
	width: 22px;
}
.layout .top-title .dislike-icon {
	transform: rotate(180deg);
}

.info-block {
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	padding: 12px;
	border-radius: 20px;
	margin-bottom: 16px;
}
@media (max-width: 640px) {
	.info-block {
		position: relative;
	}
	.info-block:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 12px;
		width: calc(100% - 24px);
		height: 50px;
		background: linear-gradient(180deg, rgba(34, 34, 33, 0) 0%, #222221 100%);
	}
}
.info-block .wrap-box {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}
@media (max-width: 640px) {
	.info-block .wrap-box {
		flex-wrap: wrap;
	}
}
.info-block .wrap-box .col-left {
	margin-right: 12px;
}
@media (max-width: 640px) {
	.info-block .wrap-box .col-left {
		margin: 0 0 12px 0;
		width: 100%;
	}
}
.info-block .wrap-box .col-left .top {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	display: none;
}
@media (max-width: 640px) {
	.info-block .wrap-box .col-left .top {
		display: flex;
		justify-content: center;
	}
}
.info-block .wrap-box .col-left .top .text {
	font-size: 17px;
}
@media (max-width: 640px) {
	.info-block .wrap-box .col-right {
		width: 100%;
	}
}
.info-block .wrap-box .col-right .top {
	margin-bottom: 10px;
}
@media (max-width: 640px) {
	.info-block .wrap-box .col-right .top {
		display: none;
	}
}
.info-block .wrap-box .top {
	display: flex;
	align-items: center;
}
.info-block .wrap-box .top .icon {
	flex-shrink: 0;
	margin-right: 10px;
	font-size: 20px;
	color: #FD0000;
}
.info-block .wrap-box .top .text {
	text-transform: uppercase;
	font-size: 28px;
	font-weight: 500;
}
@media (max-width: 768px) {
	.info-block .wrap-box .top .text {
		font-size: 22px;
	}
}
.info-block .wrap-box .rate {
	width: 22px;
}
@media (max-width: 768px) {
	.info-block .wrap-box .rate {
		width: 20px;
	}
}
@media (max-width: 380px) {
	.info-block .wrap-box .rate {
		width: 19px;
	}
}
@media (max-width: 480px) {
	.info-block .wrap-box .rating-wrap {
		padding-left: 0;
	}
}
.info-block .wrap-box .box-img {
	border-radius: 20px;
	border: 3px solid var(--color-dark_bg_block, #1B1B1B);
	background: var(--color-dark, #000);
	width: 280px;
	height: 165px;
	overflow: hidden;
	flex-shrink: 0;
	display: block;
	-o-object-fit: cover;
	   object-fit: cover;
	position: relative;
}
@media (max-width: 640px) {
	.info-block .wrap-box .box-img {
		margin: 0 auto;
	}
}
.info-block .wrap-box .box-img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.info-block .wrap-cols {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}
@media (max-width: 768px) {
	.info-block .wrap-cols {
		margin-bottom: 15px;
	}
}
.info-block .wrap-cols .rate-text {
	font-size: 18px;
	font-weight: 500;
	margin-left: 14px;
}
@media (max-width: 768px) {
	.info-block .wrap-cols .rate-text {
		font-size: 16px;
		margin-left: 10px;
	}
}
.info-block .wrap-cols .rate-text .decor {
	font-size: 28px;
	color: #FF9700;
}
@media (max-width: 768px) {
	.info-block .wrap-cols .rate-text .decor {
		font-size: 22px;
	}
}
.info-block .text-review {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	font-size: 12px;
	margin-left: 14px;
}
@media (max-width: 768px) {
	.info-block .text-review {
		margin-left: 10px;
	}
}
@media (max-width: 380px) {
	.info-block .text-review {
		font-size: 10px;
	}
}
.info-block .buttons-wrap {
	flex-wrap: wrap;
	justify-content: flex-start;
}
.info-block .buttons-wrap .btn-custom {
	max-width: -moz-fit-content;
	max-width: fit-content;
	padding: 12px 40px;
	margin: 0 4px 4px 0;
}
@media (max-width: 640px) {
	.info-block .buttons-wrap .btn-custom {
		padding: 12px 20px;
	}
}
@media (max-width: 380px) {
	.info-block .buttons-wrap .btn-custom {
		padding: 11px;
	}
}
.info-block .buttons-wrap .btn-custom:first-child {
	background: linear-gradient(to top, #eab308 0%, #eab308 12%, transparent 12%), linear-gradient(to bottom, #fde047 0%, #eab308 100%);
	color: #fff;
}
.info-block .buttons-wrap .btn-custom:first-child:after {
	background: #eab308;
	top: 1.4px;
	left: 1.4px;
	width: calc(100% - 2.8px);
	height: calc(100% - 1.4px);
}
.info-block .buttons-wrap .btn-custom:first-child .icon {
	transform: rotate(180deg);
}
.info-block .buttons-wrap .btn-custom:last-child {
	order: -1;
}
.info-block .buttons-wrap .btn-custom .name {
	display: block;
}
.info-block .buttons-wrap .btn-custom .name + .icon {
	margin-left: 8px;
}
.info-block .buttons-wrap .btn-custom .icon + .name {
	margin-left: 8px;
}

.content {
	flex-grow: 1;
	min-width: 1px;
}
.content .cols {
	display: flex;
}
@media (max-width: 550px) {
	.content .cols {
		flex-wrap: wrap;
	}
}
.content .cols .related-sites {
	width: 50%;
	margin-right: 16px;
}
@media (max-width: 550px) {
	.content .cols .related-sites {
		width: 100%;
		margin: 0 0 16px 0;
	}
}
.content .cols .related-sites:last-child {
	margin: 0;
}
.content .cols .related-sites.mob-related {
	display: none;
}
@media (max-width: 550px) {
	.content .cols .related-sites.mob-related {
		display: block;
	}
}
.content .cols .related-sites.mob-related .cat-bottom.second {
	background-color: #06C11C;
	border-color: #82FC7C;
}
.content .footer-text {
	margin-bottom: 0;
}

	.content .footer-text {
		height: 566px;
		overflow-y: auto;
		padding-bottom: 30px;
		scrollbar-width: thin;
		scrollbar-color: rgba(160, 160, 160, 0.5) transparent;
	}
	.content .footer-text::-webkit-scrollbar {
		width: 8px;
	}
	.content .footer-text::-webkit-scrollbar-track {
		background: transparent;
	}
	.content .footer-text::-webkit-scrollbar-thumb {
		background: rgba(160, 160, 160, 0.5);
		border-radius: 4px;
		border: 0;
	}
	.content .footer-text::-webkit-scrollbar-thumb:hover {
		background: rgba(160, 160, 160, 0.8);
	}
	.content .footer-text::-webkit-scrollbar-button {
		display: none;
	}


.content .footer-text .title {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
}

.sidebar {
	width: 390px;
	flex-shrink: 0;
	margin-left: 16px;
}
@media (max-width: 1250px) {
	.sidebar {
		width: 320px;
	}
}
@media (max-width: 1024px) {
	.sidebar {
		margin: 16px 0 0;
		width: 100%;
		display: flex;
	}
}
@media (max-width: 550px) {
	.sidebar {
		flex-wrap: wrap;
	}
}
.sidebar .related-sites {
	margin-bottom: 16px;
}
@media (max-width: 1024px) {
	.sidebar .related-sites {
		width: 50%;
		margin: 0 16px 0 0;
	}
}
@media (max-width: 550px) {
	.sidebar .related-sites {
		width: 100%;
	}
	.sidebar .related-sites:first-child {
		display: none;
	}
}
.sidebar .related-sites:last-child {
	margin: 0;
}
.sidebar .related-sites {
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
}
.sidebar .related-sites .cat-bottom {
	max-width: 320px;
	font-size: 15px;
	margin-top: 30px;
}
.sidebar .related-sites .cat-bottom.second {
	background-color: #06C11C;
	border-color: #82FC7C;
}
.sidebar .related-sites .cat-bottom .icon {
	margin-left: 10px;
}

.list-info {
	font-weight: 500;
}
.list-info .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.list-info .item:last-child {
	margin-bottom: 0;
}
.list-info .col-left {
	flex-shrink: 0;
	margin-right: 10px;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
}
.list-info .col-right {
	flex-grow: 1;
	justify-content: flex-end;
	display: flex;
	align-items: center;
}
.list-info .col-right .img {
	flex-shrink: 0;
	margin-right: 8px;
}
.list-info .link {
	color: var(--color-1, #FF9700);
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.list-info .link:hover {
		color: #06C11C;
	}
}
.list-info .number {
	font-size: 18px;
}
.list-info .rate-text {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
}
.list-info .decor {
	color: var(--color-1, #FF9700);
}
.list-info .active {
	color: var(--color-green, #00EA1B);
}

.check-list .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 17px;
	padding-right: 5px;
}
.check-list .item:last-child {
	margin-bottom: 0;
}
.check-list .text {
	margin-right: 8px;
	font-size: 17px;
	font-weight: 500;
}
@media (max-width: 550px) {
	.check-list .text {
		font-size: 16px;
	}
}
.check-list .icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 5px rgba(166, 255, 96, 0.1);
	background: linear-gradient(315deg, #13B601 7.58%, #13B601 55.94%, #CBF4B4 92.42%);
}
.check-list .icon.negative {
	box-shadow: 0 0 0 5px rgba(255, 96, 96, 0.1);
	background: var(--111, linear-gradient(320deg, #EF3739 6.94%, #EF3739 53.47%, #FF8C8B 93.11%));
	font-size: 13px;
}

.blogs-wrap {
	padding: 16px 16px 32px;
	border-radius: 20px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	margin-top: 25px;
}
@media (max-width: 910px) {
	.blogs-wrap {
		margin-top: 20px;
	}
}
.blogs-wrap.second {
	margin-bottom: 40px;
}
.blogs-wrap.second .wrap-img {
	margin-bottom: 34px;
}
.blogs-wrap.second .text,
.blogs-wrap.second .title-name {
	padding: 0 12px;
}
.blogs-wrap .row {
	margin-bottom: 50px;
}
.blogs-wrap .row:last-child {
	margin-bottom: 0;
}
.blogs-wrap .cols {
	display: flex;
	align-items: center;
	margin: 0 0 24px;
	border-radius: 22px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
}
@media (max-width: 768px) {
	.blogs-wrap .cols {
		flex-wrap: wrap;
	}
}
.blogs-wrap .col {
	width: 50%;
}
@media (max-width: 768px) {
	.blogs-wrap .col {
		width: 100%;
	}
}
.blogs-wrap .col-right {
	padding: 20px;
}
@media (max-width: 768px) {
	.blogs-wrap .col-right {
		padding: 12px;
	}
}
.blogs-wrap .wrap-img {
	border-radius: 22px;
	overflow: hidden;
}
@media (max-width: 768px) {
	.blogs-wrap .wrap-img {
		max-width: 490px;
		margin: 0 auto;
	}
}
@media (max-width: 640px) {
	.blogs-wrap .wrap-img {
		max-width: 100%;
	}
}
.blogs-wrap .wrap-img.center {
	max-width: 786px;
	margin: 0 auto 34px;
}
.blogs-wrap .wrap-img img {
	display: block;
	width: 100%;
	    border-radius: 22px;
}
.blogs-wrap .title-name {
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 10px;
	text-transform: uppercase;
}
@media (max-width: 480px) {
	.blogs-wrap .title-name {
		font-size: 26px;
	}
}
@media (max-width: 380px) {
	.blogs-wrap .title-name {
		font-size: 22px;
	}
}
.blogs-wrap .link {
	color: #FF9700;
}
@media (hover: hover) and (pointer: fine) {
	.blogs-wrap .link:hover {
		text-decoration: underline;
	}
}
.blogs-wrap .text {
	line-height: 1.3;
	margin-bottom: 30px;
}
@media (max-width: 768px) {
	.blogs-wrap .text {
		margin-bottom: 15px;
	}
}
/* ---------- Single blog post: long-form readability ---------- */
.main-blog-single .breadcrumbs,
.main-blog-single .headline,
.main-blog-single .blogs-wrap,
.main-blog-single .cols-thumbs {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.blogs-wrap.second > .row,
.blogs-wrap.second > .row p,
.blogs-wrap.second > .row li,
.blogs-wrap.second > .row blockquote {
	font-family: "Archivo", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}
.blogs-wrap.second > .row h1,
.blogs-wrap.second > .row h2,
.blogs-wrap.second > .row h3,
.blogs-wrap.second > .row h4,
.blogs-wrap.second > .row h5,
.blogs-wrap.second > .row h6 {
	font-family: "Archivo", sans-serif;
}
body.light .blogs-wrap.second > .row {
	color: rgba(0, 0, 0, 0.87);
}
.blogs-wrap.second > .row p {
	margin-top: 0;
	margin-bottom: 1.25em;
}
.blogs-wrap.second > .row h1,
.blogs-wrap.second > .row h2,
.blogs-wrap.second > .row h3,
.blogs-wrap.second > .row h4,
.blogs-wrap.second > .row h5,
.blogs-wrap.second > .row h6 {
	font-weight: 700;
	line-height: 1.3;
}
.blogs-wrap.second > .row h2 {
	font-size: 30px;
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}
.blogs-wrap.second > .row h3 {
	font-size: 23px;
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}
.blogs-wrap.second > .row h4 {
	font-size: 19px;
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}
.blogs-wrap.second > .row ul,
.blogs-wrap.second > .row ol {
	margin-top: 0;
	margin-bottom: 1.25em;
	padding-left: 1.5em;
}
.blogs-wrap.second > .row li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}
.blogs-wrap.second > .row li:last-child {
	margin-bottom: 0;
}
.blogs-wrap.second > .row li > ul,
.blogs-wrap.second > .row li > ol {
	margin: 0.5em 0 0.5em;
}
.blogs-wrap.second > .row a {
	color: #FF9700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.blogs-wrap.second > .row strong {
	color: #fff;
	font-weight: 600;
}
body.light .blogs-wrap.second > .row strong {
	color: #000;
}
.blogs-wrap.second > .row blockquote {
	margin-top: 1.8em;
	margin-bottom: 1.8em;
	padding: 0.8em 1.4em;
	border-left: 4px solid #EFA954;
	background: rgba(239, 169, 84, 0.08);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	font-size: 1.05em;
}
.blogs-wrap.second > .row blockquote p:last-child {
	margin-bottom: 0;
}
.blogs-wrap.second > .row img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 1.6em 0;
	display: block;
}
.blogs-wrap.second > .row figure {
	margin: 1.6em 0;
}
.blogs-wrap.second > .row figure img {
	margin: 0;
}
.blogs-wrap.second > .row figcaption {
	font-size: 0.88em;
	opacity: 0.7;
	text-align: center;
	margin-top: 0.6em;
}
.blogs-wrap.second > .row hr {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.15;
	margin-top: 2.2em;
	margin-bottom: 2.2em;
}
.blogs-wrap.second > .row code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
}
.blogs-wrap.second > .row pre {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 1em 1.2em;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	overflow-x: auto;
	line-height: 1.5;
}
.blogs-wrap.second > .row pre code {
	background: none;
	padding: 0;
}
.blogs-wrap.second > .row > *:first-child {
	margin-top: 0;
}
.blogs-wrap.second > .row > *:last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.blogs-wrap.second > .row {
		font-size: 16px;
		line-height: 1.65;
	}
	.blogs-wrap.second > .row h2 {
		font-size: 24px;
		margin-top: 1.8em;
		margin-bottom: 0.5em;
	}
	.blogs-wrap.second > .row h3 {
		font-size: 20px;
		margin-top: 1.6em;
		margin-bottom: 0.4em;
	}
	.blogs-wrap.second > .row h4 {
		font-size: 18px;
	}
}
.blogs-wrap .wrap-btn .btn-custom {
	line-height: inherit;
	height: auto;
	padding: 12px 44px;
	background: linear-gradient(to bottom, #82FC7C 0%, #06C11C 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	transition: color 0.3s;
}
@media (max-width: 480px) {
	.blogs-wrap .wrap-btn .btn-custom {
		width: 100%;
	}
}
.blogs-wrap .wrap-btn .btn-custom:after {
	background-color: #06C11C;
}
@media (hover: hover) and (pointer: fine) {
	.blogs-wrap .wrap-btn .btn-custom:hover {
		color: #EFA954;
	}
}
.blogs-wrap .wrap-btn .btn-custom .name {
	margin-left: 8px;
}
.blogs-wrap .wrap-btn .btn-custom .icon {
	flex-shrink: 0;
}
.blogs-wrap .wrap-btn .svg-icon {
	margin-left: 8px;
	transform: rotate(-90deg);
	font-size: 12px;
}

.blog-list {
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	list-style-type: disc;
	padding: 0 12px 0 37px;
	line-height: 1.4;
	font-weight: 500;
	font-size: 17px;
}

.aux {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 12px;
}
.aux .m-right {
	margin-right: 8px;
}
.aux .svg-icon {
	flex-shrink: 0;
	color: var(--white-60, rgba(255, 255, 255, 0.6));
	font-size: 19px;
}
.aux .item {
	margin-right: 16px;
	display: flex;
	align-items: center;
}
.aux .item:last-child {
	margin-right: 0;
}

.pagination-wrap {
	text-align: center;
	margin-top: 44px;
}
@media (max-width: 910px) {
	.pagination-wrap {
		margin-top: 0;
	}
}

.pagination {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	font-weight: 500;
	border-radius: 20px;
	background: var(--color-dark, #000);
	padding: 0 18px;
}
@media (max-width: 640px) {
	.pagination {
		padding: 0 10px;
	}
}
@media (max-width: 380px) {
	.pagination {
		font-size: 22px;
	}
}
.pagination .item {
	height: 60px;
	display: flex;
	align-items: center;
	padding: 2px;
}
@media (max-width: 640px) {
	.pagination .item:nth-last-child(n+2):nth-last-child(-n+5) {
		display: none;
	}
}
@media (max-width: 380px) {
	.pagination .item {
		height: 50px;
	}
}
.pagination .item.active {
	border-top: 1px solid;
	border-color: #DFB06F;
	border-radius: 20px;
	position: relative;
}
.pagination .item.active:after {
	content: "";
	position: absolute;
	top: 15px;
	right: 0;
	width: 1px;
	height: 22px;
	background-color: #563912;
}
.pagination .item.active:before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 1px;
	height: 22px;
	background-color: #563912;
}
.nav-link svg{
	min-height: 25px;
	min-width: 26px;
}
.pagination .item.active .page-link {
	background: linear-gradient(to bottom, #FFC97F 0%, #E5912A 100%);
}
.pagination .item.active .page-link:after {
	opacity: 1;
}
.pagination .icon {
	display: block;
	width: 18px;
}
.pagination .prev {
	margin-right: 40px;
}
@media (max-width: 640px) {
	.pagination .prev {
		margin-right: 2px;
	}
}
.pagination .prev .icon {
	transform: rotate(180deg);
	margin-left: -4px;
}
.pagination .next {
	margin-left: 40px;
}
@media (max-width: 640px) {
	.pagination .next {
		margin-left: 2px;
	}
}
.pagination .next .icon {
	margin-right: -4px;
}

.page-link {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px;
	position: relative;
}



@media (max-width: 400px) {
	.nav-link svg{
	min-height: auto;
	min-width: auto;
}
}

@media (max-width: 380px) {
	.page-link {
		width: 30px;
		height: 30px;
	}
}
@media (hover: hover) and (pointer: fine) {
	.page-link:hover:after {
		opacity: 1;
	}
}
.page-link:after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
	border-radius: 20px;
	opacity: 0;
	transition: opacity 0.3s;
}
.page-link .number,
.page-link .icon {
	position: relative;
	z-index: 1;
}

.cols-thumbs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px ;
}
@media (max-width: 640px) {
	.cols-thumbs {
		margin: 0;
	}
}

.col-thumb {
	width: calc(50% - 24px);
	border-radius: 20px;
	background: var(--color-dark_bg_block, #1B1B1B);
	padding: 10px 16px 16px;
	margin: 0 12px 24px;
}
@media (max-width: 640px) {
	.col-thumb {
		width: 100%;
		margin: 0 0 10px;
	}
	.col-thumb:last-child {
		margin-bottom: 0;
	}
}
.col-thumb .title-name {
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 28px;
	padding: 0 4px;
	text-transform: uppercase;
}
@media (max-width: 910px) {
	.col-thumb .title-name {
		font-size: 22px;
		margin-bottom: 4px;
	}
}
@media (max-width: 380px) {
	.col-thumb .title-name {
		font-size: 20px;
	}
}
.col-thumb .wrap-img {
	border-radius: 20px;
	overflow: hidden;
}
.col-thumb .wrap-img img {
	display: block;
	width: 100%;
}

.footer {
	display: table-row;
	height: 1px;
	color: var(--color-dark, #000);
}
.wp-block-image{
	display: flex;
	justify-content: center;
	margin: 30px 0;
}
.wp-block-image img{
	border-radius: 22px;
}
.index-page .footer-wrap {
	padding: 72px 0 12px;
	/* Fix #13 (2026-07-09): волну (header-bg.svg) убираем из фона .footer-wrap
	   и рисуем перевёрнутой в :before (scaleY(-1)) — та же волна, что у шапки,
	   но отзеркалена зубцами ВВЕРХ (песок поднимается к контенту, футер
	   накладывается сверху). Палмы и фон #EFA954 остаются здесь. */
	background: url("../images/footer-bg-left-palm.svg") no-repeat 0 104%, url("../images/footer-bg-right-palm.svg") no-repeat right 104%, #EFA954;
}
/* Fix #13 (2026-07-10): волна футера — ТОЧНАЯ КОПИЯ волны прилипшей шапки
   (.header-scrolled .header-bg-img). Эталон замерен в браузере: scrolled-шапка
   даёт бокс волны 60px (height:55% от .header-bottom=110px). У футера .footer-wrap
   высокий и РАЗНЫЙ по страницам (300–528px) → height:55% давало 157–282px (толстый
   песок). Поэтому фиксируем height:60px — волна всегда тонкая, как в scrolled-шапке.
   Зеркало шапки: шапка bottom:-16px/object-position:bottom center; футер
   top:-16px/object-position:top center + scaleY(-1). Выступ 16px за кромку — как у шапки. */
.footer-bg-img {
	position: absolute;
	left: 0;
	top: -16px;
	width: 100%;
	height: 60px;
	object-fit: cover;
	/* Fix #13 (2026-07-10): object-position bottom center — как у шапки. Показывает
	   ЗУБЧАТЫЙ край SVG (гребни песка), а не плоскую середину. Раньше было top center →
	   на широких экранах (2K/4K) cover увеличивает волну и в кадр попадала гладкая часть
	   без зубцов → выглядело «растянуто/размыто». scaleY(-1) зеркалит гребни в контент. */
	object-position: bottom center;
	transform: scaleY(-1);
	pointer-events: none;
	display: block;
	z-index: 1;
}
@media (max-width: 1024px) { .footer-bg-img { top: -16px; height: 60px; } }
@media (max-width: 910px)  { .footer-bg-img { top: -16px; height: 60px; } }
@media (max-width: 380px)  { .footer-bg-img { top: -12px; height: 60px; } }
.index-page .footer-wrap:before,
.index-page .footer-wrap:after {
	display: none;
}
/* Fix #13: волна вынесена в :before на всех брейкпоинтах — здесь только
   палмы + фон #EFA954 (header-bg.svg убран из background). */
@media (max-width: 1024px) {
	.index-page .footer-wrap {
		padding: 40px 0 12px;
		background: url("../images/footer-bg-left-palm.svg") no-repeat -30% 104%, url("../images/footer-bg-right-palm.svg") no-repeat 110% 104%, #EFA954;
	}
}
@media (max-width: 910px) {
	.index-page .footer-wrap {
		background: url("../images/footer-bg-left-palm.svg") no-repeat -50% 104%, url("../images/footer-bg-right-palm.svg") no-repeat 130% 104%, #EFA954;
	}
}
@media (max-width: 768px) {
	.index-page .footer-wrap {
		background: url("../images/footer-bg-left-palm.svg") no-repeat -5% 104%/170px 115px, url("../images/footer-bg-right-palm.svg") no-repeat 100% 104%/170px 136px, #EFA954;
	}
}
@media (max-width: 640px) {
	.index-page .footer-wrap .container {
		display: flex;
		flex-direction: column;
	}
}

.footer-wrap {
	padding: 72px 0 12px;
	border-bottom: 15px solid #F08800;
	position: relative;
	background: #EFA954;
}

.footer-palm {
	position: absolute;
	bottom: 0;
	pointer-events: none;
	z-index: 2;
	height: auto;
}
.footer-palm-left {
	left: 0;
}
.footer-palm-right {
	right: 0;
}
.footer-wrap:before {
	display: none;
}


.footer-wrap > .container {
	position: relative;
	z-index: 3;
}
@media (max-width: 640px) {
	.footer-wrap {
		border-width: 10px;
		padding-top: 20px;
	}
	.footer-palm {
		max-width: 170px;
	}
}
.footer-wrap:after {
	display: none;
}
.footer-wrap .container {
	position: relative;
}

.footer-turtle {
	position: absolute;
	right: 15px;
	top: -402px;
	z-index: 2;
}
@media (max-width: 1024px) {
	.footer-turtle {
		right: 10px;
		top: -280px;
	}
}
@media (max-width: 768px) {
	.footer-turtle {
		top: -230px;
	}
}
@media (max-width: 640px) {
	.footer-turtle {
		position: relative;
		top: auto;
		right: auto;
		order: -1;
		margin: -90px 0 25px;
		width: 100%;
		text-align: center;
	}
	.footer-turtle:before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 42px;
		height: 100px;
		transform: rotate(180deg);
		background: url("../images/header-bg.svg") no-repeat center 0;
		scale: 2;
		pointer-events: none;
	}
}
@media (max-width: 1024px) {
	.footer-turtle .img {
		width: 290px;
	}
}
@media (max-width: 768px) {
	.footer-turtle .img {
		width: 230px;
	}
}
@media (max-width: 640px) {
	.footer-turtle .img {
		width: 304px;
		position: relative;
	}
}

.footer-text {
	margin-bottom: 46px;
	/* Type scale unified with the category description block
	   (.categories-text .footer-text): fluid font-size + 1.75 line-height so
	   the footer description on the homepage reads the same as a category page. */
	font-family: "Archivo", sans-serif;
	font-size: clamp(15px, 0.45vw + 0.85rem, 19px);
	line-height: 1.75;
}
.footer-text p{
	font-size: inherit;
	line-height: 1.75;
	margin-bottom: 1em;
}
@media (max-width: 768px) {
	.footer-text {
		margin-bottom: 30px;
	}
}
.footer-text .row {
	margin-bottom: 10px;
}
.footer-text .row:last-child {
	margin-bottom: 0;
}
/* Footer description matches the category description block 1:1 — same font,
   sizes, line-height AND vertical rhythm (per HUGO: make it look like the
   category page). Text alignment is left/start as before — not centred. */
.footer-text .title {
	font-family: "Archivo", sans-serif;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.3px;
}
.footer-text .title:first-child {
	margin-top: 0;
}
.footer-text .title-lg {
	font-size: clamp(28px, 1.6vw + 1.1rem, 44px);
}
.footer-text .title-md {
	font-size: clamp(22px, 1.2vw + 0.95rem, 36px);
	margin: 1.6em 0 0.5em;
}
.footer-text .title-sm {
	font-size: clamp(19px, 0.85vw + 0.85rem, 28px);
	margin: 1.5em 0 0.45em;
}

.footer-text .listing-list {
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0 0 0 20px;
}
.footer-text .listing-list__item {
	position: relative;
	padding-left: 14px;
	margin-bottom: 8px;
	font-size: inherit;
	line-height: 1.65;
}
.footer-text .listing-list__item:last-child {
	margin-bottom: 0;
}
.footer-text .listing-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #e33;
}
body.light .footer-text .listing-list__item::before {
	background: #e33;
}
@media (max-width: 768px) {
	.footer-text .listing-list {
		margin-bottom: 12px;
		padding-left: 16px;
	}
}

.footer-info {
	text-align: center;
	max-width: 470px;
	margin: 0 auto;
}
.footer-info .navbar {
	margin: 0 0 8px 0;
	justify-content: center;
}
@media (max-width: 480px) {
	.footer-info .navbar .item:nth-child(odd) .name {
		display: none;
	}
}
.footer-info .box {
	margin-bottom: 8px;
}
.footer-info .box:last-child {
	margin-bottom: 0;
}

.logo-intro {
	display: inline-block;
}
@media (max-width: 1024px) {
	.logo-intro img {
		width: 200px;
	}
}
@media (max-width: 768px) {
	.logo-intro img {
		width: 170px;
	}
}

.footer-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
}
@media (max-width: 768px) {
	.footer-list {
		justify-content: center;
	}
}
@media (max-width: 480px) {
	.footer-list {
		flex-wrap: wrap;
	}
}
.footer-list .item {
	display: flex;
	align-items: center;
}
.footer-list .item:after {
	content: "-";
	margin: 0 3px;
}
.footer-list .item:last-child:after {
	display: none;
}

.footer-link {
	color: var(--color-dark, #000);
	transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.footer-link:hover {
		color: #fff;
	}
}

.copy {
	color: var(--dark-60, rgba(0, 0, 0, 0.6));
	max-width: 454px;
}

@media (max-width: 640px) {
	.mob-hide {
		display: none;
	}
}

.footer-logo {
	text-align: center;
	margin-bottom: 24px;
}
.footer-logo .logo-footer {
	display: inline-block;
}

/* ===== Live Search Dropdown ===== */
.search-form {
	position: relative;
}
.search-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(20px);
	z-index: 100;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	scrollbar-width: none;
}
.search-dropdown.active {
	display: block;
}
.search-dropdown::-webkit-scrollbar {
	width: 0;
	height: 0;
}
body.light .search-dropdown {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.search-results-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
.search-result-item {
	margin: 0;
}
.search-result-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	transition: background-color 0.2s;
	text-decoration: none;
	color: #fff;
}
body.light .search-result-link {
	color: #000;
}
.search-result-link:hover {
	background-color: rgba(255, 255, 255, 0.08);
}
body.light .search-result-link:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.search-result-left {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}
.search-result-logo {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
	margin-right: 12px;
}
.search-result-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.search-result-title {
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.search-result-cat {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 1px;
}
body.light .search-result-cat {
	color: rgba(0, 0, 0, 0.5);
}
.search-result-rating {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 12px;
	gap: 4px;
}
.search-star {
	width: 14px;
	height: 14px;
}
.search-no-results {
	padding: 20px 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}
body.light .search-no-results {
	color: rgba(0, 0, 0, 0.6);
}
.search-view-all {
	display: block;
	text-align: center;
	padding: 12px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #FF9700;
	font-weight: 500;
	font-size: 14px;
	transition: background-color 0.2s;
	text-decoration: none;
}
body.light .search-view-all {
	border-top-color: rgba(0, 0, 0, 0.1);
}
.search-view-all:hover {
	background-color: rgba(255, 255, 255, 0.05);
}
body.light .search-view-all:hover {
	background-color: rgba(0, 0, 0, 0.03);
}

/* ===== Search Results Page ===== */
.search-page {
	padding-top: 30px;
	padding-bottom: 60px;
}
.search-page-header {
	margin-bottom: 30px;
}
.search-page-title {
	font-size: 26px;
	font-weight: 500;
	margin-bottom: 6px;
}
.search-page-query {
	color: #FF9700;
}
.search-page-count {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}
body.light .search-page-count {
	color: rgba(0, 0, 0, 0.5);
}

.search-results-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
@media (max-width: 1024px) {
	.search-results-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.search-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.search-results-grid {
		grid-template-columns: 1fr;
	}
}

.search-card {
	border-radius: 20px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
}
body.light .search-card {
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.search-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
body.light .search-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.search-card-inner {
	display: block;
	text-decoration: none;
	color: inherit;
}
.search-card-thumb {
	height: 120px;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.3);
}
body.light .search-card-thumb {
	background-color: #f0f0f0;
}
.search-card-content {
	padding: 14px 16px 16px;
}
.search-card-top {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.search-card-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
	margin-right: 10px;
}
.search-card-meta {
	min-width: 0;
}
.search-card-title {
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.search-card-cat {
	font-size: 12px;
	color: #FF9700;
	margin-top: 2px;
}
.search-card-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.light .search-card-desc {
	color: rgba(0, 0, 0, 0.6);
}
.search-card-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.search-card-rating {
	display: flex;
	align-items: center;
}
.search-card-rating .rate {
	width: 16px;
	height: 16px;
}
.search-card-rate-val {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-left: 6px;
	font-weight: 500;
}
body.light .search-card-rate-val {
	color: rgba(0, 0, 0, 0.5);
}
.search-card-visit {
	font-size: 13px;
	font-weight: 500;
	color: #FF9700;
	transition: color 0.2s;
}
.search-card:hover .search-card-visit {
	color: #EFA954;
}

/* Search Pagination */
.search-pagination {
	margin-top: 40px;
	text-align: center;
}
.search-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--dark-20, rgba(0, 0, 0, 0.2));
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
body.light .search-pagination .page-numbers {
	background: rgba(0, 0, 0, 0.06);
	color: #000;
}
.search-pagination .page-numbers:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #FF9700;
}
body.light .search-pagination .page-numbers:hover {
	background: rgba(0, 0, 0, 0.1);
	color: #FF9700;
}
.search-pagination .page-numbers.current {
	background: linear-gradient(130deg, #FD7B5A, #FEB910);
	color: #fff;
}

/* Search No Results */
.search-no-found {
	text-align: center;
	padding: 80px 20px;
}
.search-no-found-icon {
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.3);
}
body.light .search-no-found-icon {
	color: rgba(0, 0, 0, 0.3);
}
.search-no-found-text {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.6);
}
body.light .search-no-found-text {
	color: rgba(0, 0, 0, 0.5);
}

/* ===== Contact Page ===== */
.contact-page {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 0 60px;
}
.contact-header {
	text-align: center;
	margin-bottom: 50px;
}
.contact-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
}
body.light .contact-badge {
	border-color: rgba(0, 0, 0, 0.15);
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.6);
}
.contact-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 16px;
	color: #fff;
}
body.light .contact-title {
	color: #111;
}
.contact-desc {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 600px;
	margin: 0 auto 24px;
}
body.light .contact-desc {
	color: rgba(0, 0, 0, 0.55);
}
.contact-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.contact-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s;
}
.contact-link {
	color: #fff;
}
body.light .contact-link {
}
.contact-icon {
	width: 18px;
	height: 18px;
	color: #fff;
	flex-shrink: 0;
}

/* Form */
.contact-form-wrap {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 36px;
	margin-bottom: 40px;
}
body.light .contact-form-wrap {
	background: rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 0, 0, 0.1);
}
.contact-form-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #fff;
}
body.light .contact-form-title {
	color: #111;
}
.contact-form-hint {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 24px;
}
body.light .contact-form-hint {
	color: rgba(0, 0, 0, 0.4);
}
.contact-form-hint .req,
.form-group label .req {
	color: #FF9700;
}
.form-row {
	margin-bottom: 16px;
}
.form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.form-group label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.8);
}
body.light .form-group label {
	color: rgba(0, 0, 0, 0.7);
}
.form-group input,
.form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-size: 15px;
	font-family: inherit;
	transition: border-color 0.3s;
	outline: none;
	box-sizing: border-box;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}
body.light .form-group input::placeholder,
body.light .form-group textarea::placeholder {
	color: rgba(0, 0, 0, 0.3);
}
body.light .form-group input,
body.light .form-group textarea {
	border-color: rgba(0, 0, 0, 0.15);
	background: #fff;
	color: #111;
}
.form-group input:focus,
.form-group textarea:focus {
	border-color: #FF9700;
}
.form-group textarea {
	resize: vertical;
	min-height: 100px;
}
.input-prefix {
	display: flex;
	align-items: stretch;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
	transition: border-color 0.3s;
}
body.light .input-prefix {
	border-color: rgba(0, 0, 0, 0.15);
	background: #fff;
}
.input-prefix:focus-within {
	border-color: #FF9700;
}
.input-prefix .prefix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}
body.light .input-prefix .prefix {
	color: rgba(0, 0, 0, 0.4);
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.1);
}
.input-prefix input {
	border: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 50px;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, #FF9700, #ff7b00);
	color: #fff;
	transition: all 0.3s;
	margin-top: 8px;
}
.contact-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 151, 0, 0.3);
}
.contact-submit:disabled {
	opacity: 0.6;
	transform: none;
	cursor: not-allowed;
}
.contact-status {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
}
.contact-status.success {
	color: #4caf50;
}
.contact-status.error {
	color: #f44336;
}

/* Info cards */
.contact-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.contact-info-card {
	padding: 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .contact-info-card {
	background: rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 0, 0, 0.08);
}
.contact-info-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	color: #FF9700;
}
.contact-info-icon svg {
	width: 100%;
	height: 100%;
}
.contact-info-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #fff;
}
body.light .contact-info-title {
	color: #111;
}
.contact-info-text {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}
body.light .contact-info-text {
	color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
	.contact-page {
		padding: 24px 0 40px;
	}
	.contact-title {
		font-size: 26px;
	}
	.form-row-2 {
		grid-template-columns: 1fr;
	}
	.contact-info-grid {
		grid-template-columns: 1fr;
	}
	.contact-form-wrap {
		padding: 24px 20px;
	}
}

.error-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: 20px 0 80px;
	text-align: center;
}
.error-404-visual {
	position: relative;
	display: inline-block;
	margin-bottom: 24px;
}
.error-404-code {
	font-size: 220px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -8px;
	color: #EFA954;
	-webkit-text-stroke: 4px #2B2A29;
	text-shadow: 6px 6px 0 #2B2A29;
	display: block;
	user-select: none;
}
body.light .error-404-code {
	-webkit-text-stroke-color: #fff;
	text-shadow: 6px 6px 0 #fff;
}
.error-404-turtle {
	position: absolute;
	bottom: -10px;
	right: -90px;
	width: 220px;
	height: auto;
	pointer-events: none;
}
.error-404-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 16px;
	color: #fff;
}
body.light .error-404-title {
	color: #111;
}
.error-404-desc {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 520px;
	margin: 0 auto 32px;
}
body.light .error-404-desc {
	color: rgba(0, 0, 0, 0.55);
}
.error-404-actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.error-404-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	transition: transform 0.2s, box-shadow 0.2s;
}
.error-404-btn:hover {
	transform: translateY(-2px);
}
.error-404-btn .svg-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
@media (max-width: 768px) {
	.error-404 {
		padding: 24px 0 60px;
	}
	.error-404-code {
		font-size: 140px;
		letter-spacing: -5px;
		text-shadow: 4px 4px 0 #2B2A29;
	}
	body.light .error-404-code {
		text-shadow: 4px 4px 0 #fff;
	}
	.error-404-turtle {
		width: 140px;
		right: -50px;
		bottom: -5px;
	}
	.error-404-title {
		font-size: 24px;
	}
}
@media (max-width: 480px) {
	.error-404-code {
		font-size: 100px;
	}
	.error-404-turtle {
		width: 90px;
		right: -20px;
	}
}

/* Skeleton: gray block + shimmer holds the slot before the real image
   loads, so surrounding content doesn't jump when src is swapped in. */
img.lazy-img{
	opacity:1;
	background-color:rgba(128,128,128,.18);
	background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 100%);
	background-size:200% 100%;
	background-repeat:no-repeat;
	animation:lm-skel-shimmer 1.4s linear infinite;
	transition:background-color .35s ease;
}
img.lazy-img.is-loaded{
	background-image:none;
	background-color:transparent;
	animation:none;
}
body.light img.lazy-img{
	
}
@keyframes lm-skel-shimmer{
	0%{background-position:200% 0}
	100%{background-position:-200% 0}
}

/* Clampable text with Read more toggle */
.js-clamp{position:relative;max-height:16em;overflow:hidden;transition:max-height .4s ease}
.js-clamp.is-expanded{max-height:none;overflow:visible}
/* Fade-out at the bottom of clamped text so it doesn't look hard-cut. */
.categories-text .js-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5em;background:linear-gradient(to bottom,rgba(239,169,84,0) 0%,rgba(239,169,84,.85) 60%,#EFA954 100%);pointer-events:none;transition:opacity .3s ease}
.categories-text .js-clamp.is-expanded::after{opacity:0}
.read-more-btn{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:10px 22px;background:#222221;color:#fff;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;letter-spacing:.3px;text-decoration:none;line-height:1;position:relative;z-index:2;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.read-more-btn:hover{background:#000;transform:translateY(-1px)}
body.light .read-more-btn{background:#fff;color:#222221;box-shadow:0 1px 3px rgba(0,0,0,.15)}
body.light .read-more-btn:hover{background:#f5f5f5}
.categories-text .read-more-btn{margin-top:22px}

/* ============================================================
   REDESIGN 2026 — front-page categories grid (V1 masonry)
   Scoped under .categories-grid-v2 — does not touch legacy.
   Reference: redesign/Dark/categories-page.html (V1 REFINED MASONRY).
   The "SEE ALL" button intentionally reuses the existing .cat-bottom
   markup (theme button, translates via pt_text, colored per cat).
   ============================================================ */
/* 4-column CSS-Grid span masonry — the exact original production mechanic.
   Desktop ≥1025: grid-auto-rows:1px + each card's inline `grid-row-end: span N`
   (N = admin "Grid Row Span" / category_box_size, default 120) sets the card
   height; grid-auto-flow:row dense packs the columns. ≤1024: grid off, cards
   stack single-column, list-body height from per-card "Mobile Height (px)". */
/* ≤1024: grid off → cards stack in a single column (original behaviour). */
.categories-grid-v2 {
    display: block;
    padding: 20px 0 100px;
}
/* Desktop ≥1025: exact original CSS-Grid span masonry. grid-auto-rows:1px +
   each card's inline `grid-row-end: span N` (N = category_box_size, "Grid Row
   Span") makes the card N grid-rows tall; grid-auto-flow:row dense packs the 4
   columns itself. The card's content can't stretch it because the site list is
   out of flow (position:absolute) inside an overflow:hidden body, so span is
   the sole source of card height — identical to the production .category-box. */
@media (min-width: 1025px) {
    .categories-grid-v2 {
        display: grid;
        gap: 10px 8px;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: row dense;
        grid-auto-rows: 1px;
    }
}
/* ≤1024: grid off → column-count masonry. 601-1024 = 2 columns, ≤600 = 1.
   Cards are auto-height (grid-row span no longer applies); the inner list keeps
   its absolute layout and its height comes from the per-card Mobile Height (px)
   rule emitted in front-page.php, falling back to the 438px default below. */
@media (max-width: 1024px) {
    .categories-grid-v2 {
        column-count: 2;
        column-gap: 10px;
    }
    .categories-grid-v2 .cat-card-v2 {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 0 10px;
    }
    .categories-grid-v2 .cat-sites-wrap-v2 {
        height: 438px;   /* default mobile body height (original .cat-lg) */
    }
}
@media (max-width: 600px) {
    .categories-grid-v2 {
        column-count: 1;
    }
}
.categories-grid-v2 .cat-card-v2 {
    --cat-color: #f08a2c;
    --text-mute-v2: rgba(255, 255, 255, 0.7);
    --text-dim-v2: rgba(255, 255, 255, 0.45);
    --text-faint-v2: rgba(255, 255, 255, 0.25);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px;
    padding: 22px 20px 20px;
    position: relative;
    overflow: hidden;
    /* Card height is driven ONLY by the inline `grid-row-end: span N` (like the
       original .category-box) — content can't stretch it because the body
       (.cat-sites-wrap-v2 = the 1fr row, overflow:hidden) holds an absolute
       list. Rows: head / accent / description / list-body(1fr) / SEE-ALL.
       .cat-desc-v2 is always rendered (empty when the category has no text) so
       the row count is stable and the 1fr always lands on the list body. */
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    min-height: 0;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.categories-grid-v2 .cat-card-v2::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 22%;
    right: 22%;
    height: 4px;
    background: var(--cat-color);
    border-radius: 999px;
    pointer-events: none;
}
.categories-grid-v2 .cat-card-v2:hover {
    border-color: color-mix(in srgb, var(--cat-color) 30%, transparent);
    transform: translateY(-2px);
}
.categories-grid-v2 .cat-head-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-top: 4px;
    flex: 0 0 auto;
    /* Icon stays pinned to the left (its original layout); min-width:0 lets the
       h3 shrink and ellipsis-clamp instead of forcing the flex row wider than
       the card. position:relative anchors the expand-on-hover title overlay. */
    min-width: 0;
    position: relative;
    /* .cat-head-v2 is an <a> linking to the category page — strip default link
       styling but keep heading color/decoration unchanged. */
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.categories-grid-v2 .cat-head-v2:hover h3 {
    color: var(--cat-color);
}
/* Light theme defines its own h3 color (body.light .cat-card-v2 h3 = #1a1816)
   which outranks the hover rule above, so the title didn't light up on hover in
   light mode. Re-assert the cat-color hover with matching light-theme
   specificity so the hover highlight works in both themes. */
body.light .categories-grid-v2 .cat-head-v2:hover h3 {
    color: var(--cat-color);
}
.categories-grid-v2 .cat-head-v2:hover .cat-icon-v2 {
    border-color: color-mix(in srgb, var(--cat-color) 55%, transparent);
}
.categories-grid-v2 .cat-icon-v2 {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: color-mix(in srgb, var(--cat-color) 15%, transparent);
    color: var(--cat-color);
    border: 1px solid color-mix(in srgb, var(--cat-color) 25%, transparent);
    border-radius: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.categories-grid-v2 .cat-icon-v2 img,
.categories-grid-v2 .cat-icon-v2 svg {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.categories-grid-v2 .cat-card-v2 h3 {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin: 0;
    /* Title stays on a SINGLE line, truncated with an ellipsis (long names and
       long DE/TR translations don't wrap to a second line). No hover reveal —
       the ellipsis is the final state; min-width:0 lets the title shrink inside
       the flex row so the ellipsis kicks in. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.categories-grid-v2 .cat-accent-v2 {
    height: 2px;
    background: linear-gradient(90deg, var(--cat-color), transparent);
    margin: 0 -20px 14px;
    opacity: 0.6;
    flex: 0 0 auto;
}
.categories-grid-v2 .cat-desc-v2 {
    font-family: "Archivo", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim-v2);
    margin: 0 0 16px;
    text-align: center;
    /* Visually clamp to 3 lines with an ellipsis. Full text stays in the DOM
       (good for SEO + screen readers); the browser just hides the overflow. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    /* The card is a flex column — keep the description at its natural clamped
       height (don't let flex shrink it, which would overlap the site list).
       max-height pins the 3-line ceiling so it never grows either. */
    flex: 0 0 auto;
    max-height: calc(1.45em * 3);
}
/* Empty description (category has no text): collapse it so it occupies no
   visible space, while still keeping its grid row for a stable card template. */
.categories-grid-v2 .cat-desc-v2:empty {
    margin: 0;
    min-height: 0;
}
.categories-grid-v2 .cat-desc-v2.is-clamped {
    cursor: help;
}
.categories-grid-v2 .cat-desc-v2.is-clamped:focus-visible {
    outline: 2px solid var(--cat-color, #f08a2c);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Tooltip for clamped description text — matches V2 category-card visual
   language: dark gradient surface, soft outline, 16px radius, category-tinted
   accent bar, and a CSS-only tail pointing back at the source. Lives at
   document.body so it escapes overflow:hidden ancestors. Positioned by JS.
   --tail-x is set per-show by JS so the tail aligns with the host's centre. */
.cat-desc-tooltip {
    --cat-color: #f08a2c;
    --tail-x: 50%;
    --tip-bg-top: rgba(20, 20, 22, 0.96);
    --tip-bg-bot: rgba(14, 14, 16, 0.96);
    --tip-border: rgba(255, 255, 255, 0.08);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    /* Width is set inline by JS to match the source card. */
    padding: 16px 18px 16px;
    background: linear-gradient(180deg, var(--tip-bg-top), var(--tip-bg-bot));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
    font-family: "Archivo", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    border-radius: 16px;
    border: 1px solid var(--tip-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: normal;
    word-wrap: break-word;
    /* No overflow:hidden — the tail (::after) lives outside the box. */
}
/* Accent strip removed — kept ::before empty so flipped-below rule is harmless. */
.cat-desc-tooltip::before {
    content: none;
}
/* Tail pointing toward the source. CSS-only triangle that inherits the
   tooltip's bottom gradient and border colours so the seam reads flush. */
.cat-desc-tooltip::after {
    content: "";
    position: absolute;
    left: var(--tail-x);
    width: 14px;
    height: 14px;
    background: var(--tip-bg-bot);
    border-right: 1px solid var(--tip-border);
    border-bottom: 1px solid var(--tip-border);
    /* Default — tooltip above host → tail points down from the bottom edge. */
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
}
.cat-desc-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cat-desc-tooltip.is-below {
    transform: translateY(-4px);
}
.cat-desc-tooltip.is-below.is-visible {
    transform: translateY(0);
}
/* Flipped below the source: accent strip moves to the bottom edge, tail to top. */
.cat-desc-tooltip.is-below::before {
    top: auto;
    bottom: 1px;
}
.cat-desc-tooltip.is-below::after {
    bottom: auto;
    top: -7px;
    background: var(--tip-bg-top);
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--tip-border);
    border-top: 1px solid var(--tip-border);
}
body.light .cat-desc-tooltip {
    --tip-bg-top: rgba(255, 255, 255, 0.98);
    --tip-bg-bot: rgba(248, 248, 250, 0.98);
    --tip-border: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.82);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

/* The list body — the 1fr row of the card grid. It takes the leftover height
   after head/accent/description/button, and because it's overflow:hidden with
   an absolute list inside, its content contributes ZERO to the card height:
   the card stays exactly `grid-row-end: span N` tall. This is the original
   production `.cat-body` (overflow:hidden) + `.scrollbar-custom` (absolute)
   scheme, ported to the v2 class names. */
.categories-grid-v2 .cat-sites-wrap-v2 {
    min-height: 0;
    position: relative;
    overflow: hidden;
    margin: 0 0 16px;
    /* Soft fade-out at the bottom edge so the last partially-visible row melts
       into transparency instead of being hard-clipped in half (theporndude.vip
       look). mask works over any background and in both light/dark themes. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.categories-grid-v2 .cat-sites-v2 {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Out of flow → no contribution to grid track sizing. Fills the wrapper. */
    position: absolute;
    inset: 0 0 0 0;
    margin: 0;
    padding: 0 6px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cat-color) 60%, transparent) rgba(255, 255, 255, 0.04);
}
.categories-grid-v2 .cat-sites-v2::-webkit-scrollbar { width: 5px; }
.categories-grid-v2 .cat-sites-v2::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}
.categories-grid-v2 .cat-sites-v2::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cat-color) 50%, transparent);
    border-radius: 999px;
}
.categories-grid-v2 .cat-sites-v2::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--cat-color) 75%, transparent);
}
.categories-grid-v2 .cat-sites-v2 li {
    display: grid;
    grid-template-columns: 24px 22px 1fr 18px;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
    border-radius: 4px;
    /* Anchor for the stretched-link trick on .nm::before below. */
    position: relative;
}
.categories-grid-v2 .cat-sites-v2 li:hover {
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}
.categories-grid-v2 .cat-sites-v2 li:last-child {
    border-bottom: none;
}
.categories-grid-v2 .cat-sites-v2 .rk {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint-v2);
    text-align: right;
}
/* Site favicon plate in the homepage category-card list. Wrapper at 22px
   for visual rhythm with the row, image clamped to its natural 16×16 —
   most site favicons are 16×16 PNG/ICO at source, and Google's s2 service
   returns 16-32px max. Anything beyond 16 introduces visible blur. */
.categories-grid-v2 .cat-sites-v2 .ico {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: transparent;
    color: #fff;
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.categories-grid-v2 .cat-sites-v2 .ico img {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    display: block;
}
.categories-grid-v2 .cat-sites-v2 .nm {
    font-family: "Archivo", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.categories-grid-v2 .cat-sites-v2 a.nm:hover {
    color: var(--cat-color);
}
/* Stretched-link: invisible overlay on the whole row that routes clicks to
   the .nm anchor (→ /go/{id}/{slug}/ → external site). The search icon and
   the listing logo opt out via z-index so they keep their own targets. */
.categories-grid-v2 .cat-sites-v2 .nm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.categories-grid-v2 .cat-sites-v2 .sr {
    color: var(--text-faint-v2);
    cursor: pointer;
    transition: color 0.15s ease;
    display: grid;
    place-items: center;
    /* Sit above the stretched-link overlay so the magnifier handles its own
       click (→ review page) and isn't swallowed by the row-level target. */
    position: relative;
    z-index: 2;
}
.categories-grid-v2 .cat-sites-v2 .sr svg {
    width: 14px;
    height: 14px;
}
/* Magnifier highlights only when the cursor is over it — the row-level
   hover paints just the name, the .sr hover paints just the icon. */
.categories-grid-v2 .cat-sites-v2 .sr:hover {
    color: var(--cat-color);
}
/* Hover on the row (but not on the magnifier) tints only the name. We use
   :has() to exclude the case when .sr is hovered, so the two affordances
   light up independently. Falls back gracefully — without :has() the name
   tints together with the icon, which matches the previous behaviour. */
.categories-grid-v2 .cat-sites-v2 li:hover:not(:has(.sr:hover)) .nm {
    color: var(--cat-color);
}

/* Light theme overrides for redesign cards */
body.light .categories-grid-v2 .cat-card-v2 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-color: rgba(0, 0, 0, 0.06);
}
body.light .categories-grid-v2 .cat-card-v2 h3 {
    color: #1a1816;
}
body.light .categories-grid-v2 .cat-card-v2 {
    --text-mute-v2: rgba(0, 0, 0, 0.7);
    --text-dim-v2: rgba(0, 0, 0, 0.55);
    --text-faint-v2: rgba(0, 0, 0, 0.35);
}
body.light .categories-grid-v2 .cat-sites-v2 li {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .categories-grid-v2 .cat-sites-v2 li:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.light .categories-grid-v2 .cat-sites-v2 .nm {
    color: #1a1816;
}

/* Responsive column counts are handled by the column-count masonry blocks
   above (≤1200/900/600). The old grid-template-columns overrides were removed —
   they're inert under display:block and would fight column-count. */

/* SEE ALL button (reuses legacy .cat-bottom markup) — colored per category */
.categories-grid-v2 .cat-card-v2 .cat-bottom {
    margin-top: 4px;
    background: color-mix(in srgb, var(--cat-color) 35%, transparent);
    border-color: var(--cat-color);
    color: #fff;
    /* Pinned at the card bottom; never shrink in the flex column. */
    flex: 0 0 auto;
    /* The base .cat-bottom centres name + a 20px-margin icon with no width
       cap, so on long translations ("Alle 87-Seiten anzeigen") the row grew
       ~20px past the card's right edge — a green sliver poking out. Cap it to
       the grid track and let the inner name (already nowrap+ellipsis) absorb
       the squeeze instead of the button. */
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.categories-grid-v2 .cat-card-v2 .cat-bottom .name {
    /* Allow the label to shrink within the flex row so the icon stays inside
       the button instead of being pushed out. */
    min-width: 0;
}
.categories-grid-v2 .cat-card-v2 .cat-bottom .icon {
    /* 20px left margin was the overflow culprit on narrow tracks — tighten it
       so the icon always fits beside even a long ellipsised label. */
    margin-left: 10px;
}
.categories-grid-v2 .cat-card-v2 .cat-bottom:hover {
    background: color-mix(in srgb, var(--cat-color) 60%, transparent);
    color: #fff;
}
.categories-grid-v2 .cat-card-v2 .cat-bottom .count {
    color: var(--cat-color);
}
body.light .categories-grid-v2 .cat-card-v2 .cat-bottom {
    color: #1a1816;
}
body.light .categories-grid-v2 .cat-card-v2 .cat-bottom:hover {
    color: #1a1816;
}

/* ============================================================
   REDESIGN 2026 — taxonomy / category page (V1 horizontal rows)
   Scoped under .category-page-v2 — does not touch legacy.
   Reuses theme markup for:
     - .btn-custom (Read Review / Visit Site)
     - .rating-wrap (thumbs up/down rating)
   Reference: redesign/Dark/category-page.html (V1 POLISHED HORIZONTAL ROWS).
   ============================================================ */
.category-page-v2 {
    --cat-color: #f08a2c;
    --orange-soft-v2: #f6b06a;
    --text-mute-v2: rgba(255, 255, 255, 0.7);
    --text-dim-v2: rgba(255, 255, 255, 0.45);
    --card-border-v2: rgba(255, 255, 255, 0.06);
    padding: 20px 0 80px;
    color: #fff;
}

/* Breadcrumbs (v2 uppercase mono style) */
.crumbs-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 18px;
}
.crumbs-v2 a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.crumbs-v2 a:hover {
    color: #f6b06a;
}
.crumbs-v2 .sep {
    opacity: 0.4;
}
.crumbs-v2 .cur {
    color: #f6b06a;
}
body.light .crumbs-v2 {
    color: rgba(0, 0, 0, 0.5);
}
body.light .crumbs-v2 a {
    color: rgba(0, 0, 0, 0.72);
}

/* Page title */
.category-page-v2 .page-title-v2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 28px;
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: #fff;
    flex-wrap: wrap;
}
.category-page-v2 .page-title-v2 .icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 70%, #000));
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}
.category-page-v2 .page-title-v2 .icon img,
.category-page-v2 .page-title-v2 .icon svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.category-page-v2 .page-title-v2 .count {
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--text-dim-v2);
    letter-spacing: 0;
    text-transform: none;
}

/* Card container that wraps the whole list */
.category-page-v2 .container-card-v2 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    border: 1px solid var(--card-border-v2);
    border-radius: 20px;
    padding: 28px;
}

/* Horizontal rows list */
.category-page-v2 .v1-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-page-v2 .v1-row {
    display: grid;
    grid-template-columns: 60px 280px 1fr 200px;
    gap: 24px;
    align-items: center;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.category-page-v2 .v1-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: color-mix(in srgb, var(--cat-color) 25%, transparent);
    transform: translateY(-1px);
}

/* Rank circle — colored after the category palette (--cat-color set per-row) */
.category-page-v2 .v1-rank {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 55%, #000));
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-color) 15%, transparent);
}

/* Site thumbnail (uses real listing screenshot) */
.category-page-v2 .v1-shot {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.04);
}
.category-page-v2 .v1-shot a,
.category-page-v2 .v1-shot {
    display: block;
}
.category-page-v2 .v1-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.category-page-v2 .v1-shot.is-empty {
    display: grid;
    place-items: center;
    color: var(--text-dim-v2);
}
.category-page-v2 .v1-shot.is-empty svg {
    width: 32px;
    height: 32px;
}

/* Center column: title + rating row + description */
.category-page-v2 .v1-body {
    min-width: 0;
}
.category-page-v2 .v1-title {
    display: flex;
    align-items: center;
    /* Row gap (between name-line and rating-line) kept tight; column gap (logo↔name)
       is the 12px. Two-value gap: <row> <column>. */
    gap: 6px 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
/* Favicon next to the listing name — wrapper is sized to the favicon so
   there's no visible plate/border around it. After clamping the icon to
   its natural 16×16 the previous 24px wrapper showed a faint translucent
   square that read as an unwanted frame around dark favicons. */
.category-page-v2 .v1-logo {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    display: grid;
    place-items: center;
}
.category-page-v2 .v1-logo img {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    display: block;
}
.category-page-v2 .v1-name {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: #fff;
    text-decoration: none;
}
.category-page-v2 .v1-name:hover {
    color: var(--cat-color);
}
/* Rating reuses the existing .rating-wrap with theme SVGs. flex-basis:100%
   forces it onto its OWN line, always directly under the logo+name — on every
   width from 320px up. Previously it was an inline sibling in a flex-wrap row,
   so depending on the (breakpoint-dependent) body width it sometimes sat to the
   right of the name and sometimes wrapped below, "jumping" between layouts.
   Pinning it to a full-width line removes that entirely and keeps the thumbs
   left-aligned with the name. */
.category-page-v2 .v1-title .rating-wrap {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
}
.category-page-v2 .v1-title .rating-wrap .svg-icon.rate {
    width: 16px;
    height: 16px;
}
.category-page-v2 .v1-desc {
    font-family: "Archivo", sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-mute-v2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Right column: stacked action buttons (reuses .btn-custom + .buttons-wrap) */
.category-page-v2 .v1-actions {
    min-width: 0;
}
.category-page-v2 .v1-actions .buttons-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.category-page-v2 .v1-actions .buttons-wrap .btn-custom {
    max-width: none;
    margin-right: 0;
}
/* On wide screens we want the "Read review" name visible even though
   the legacy .buttons-wrap hides it at 910px. Restore it inside v2. */
@media (max-width: 910px) {
    .category-page-v2 .v1-actions .buttons-wrap .btn-custom .name {
        display: block;
    }
}

/* Light theme */
body.light .category-page-v2 {
    --text-mute-v2: rgba(0, 0, 0, 0.72);
    --text-dim-v2: rgba(0, 0, 0, 0.5);
    --card-border-v2: rgba(0, 0, 0, 0.08);
    color: #1a1816;
}
body.light .category-page-v2 .page-title-v2 {
    color: #1a1816;
}
body.light .category-page-v2 .container-card-v2 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
}
body.light .category-page-v2 .v1-row {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light .category-page-v2 .v1-row:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.light .category-page-v2 .v1-name {
    color: #1a1816;
}

/* Responsive */
@media (max-width: 1100px) {
    .category-page-v2 .v1-row {
        grid-template-columns: 60px 220px 1fr 180px;
        gap: 18px;
        padding: 16px 18px;
    }
}
@media (max-width: 900px) {
    .category-page-v2 .v1-row {
        grid-template-columns: 50px 200px 1fr;
        grid-template-rows: auto auto;
    }
    .category-page-v2 .v1-actions {
        grid-column: 1 / -1;
    }
    .category-page-v2 .v1-actions .buttons-wrap {
        flex-direction: row;
    }
    .category-page-v2 .v1-actions .buttons-wrap .btn-custom {
        flex: 1;
    }
}
@media (max-width: 640px) {
    .category-page-v2 .page-title-v2 {
        font-size: 28px;
    }
    .category-page-v2 .container-card-v2 {
        padding: 18px;
    }
    .category-page-v2 .v1-row {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 14px;
    }
    .category-page-v2 .v1-shot {
        grid-column: 1 / -1;
    }
    /* The body (title + rating + description) must span the full width too.
       Without this it falls into the leftover 44px rank column and the
       description wraps one word per line ("Brazzers / is a / loud,..."). */
    .category-page-v2 .v1-body {
        grid-column: 1 / -1;
    }
    .category-page-v2 .v1-actions {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   REDESIGN 2026 — single-listing / review page (v2-alt)
   Scoped under .single-listing-v2. Reference:
   redesign/Dark/review-page-v2-alt.html
   Reuses theme markup for:
     - .buttons-wrap / .btn-custom (Back to category / Visit Site CTA)
       — but the hero CTA is a standalone green pill .btn-visit-v2 since
       the screenshot shows a clean green pill, not the legacy gradient.
     - .rating-wrap with #icon-like / #icon-dislike for related-tile rating
   ============================================================ */
.single-listing-v2 {
    --orange-v2: #f08a2c;
    --orange-soft-v2: #f6b06a;
    --green-v2: #22c55e;
    --green-2-v2: #16a34a;
    --green-soft-v2: #4ade80;
    --red-v2: #ef4444;
    --red-2-v2: #dc2626;
    --text-mute-v2: rgba(255, 255, 255, 0.7);
    --text-dim-v2: rgba(255, 255, 255, 0.45);
    --text-faint-v2: rgba(255, 255, 255, 0.25);
    padding: 20px 0 80px;
    color: #fff;
}
.single-listing-v2 .container {
    max-width: 1140px;
}

/* Breadcrumbs */
.single-listing-v2 .crumbs-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim-v2);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.single-listing-v2 .crumbs-v2 a {
    color: var(--text-mute-v2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.single-listing-v2 .crumbs-v2 a:hover {
    color: var(--orange-soft-v2);
}
.single-listing-v2 .crumbs-v2 .sep {
    opacity: 0.4;
}
.single-listing-v2 .crumbs-v2 .cur {
    color: var(--orange-soft-v2);
}

/* 12-col stack */
.single-listing-v2 .stack {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    align-items: stretch;
}
.single-listing-v2 .stack > .hero-card-v2 { grid-column: span 12; }
.single-listing-v2 .stack > .review-wrap-v2 { grid-column: span 8; min-width: 0; }
.single-listing-v2 .stack > .stats-strip-v2 { grid-column: span 4; }
.single-listing-v2 .stack > .two-col-v2 { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.single-listing-v2 .stack > .standalone-section-v2 { grid-column: span 12; margin-top: 12px; }

/* Generic card */
.single-listing-v2 .card-v2 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

/* HERO */
.single-listing-v2 .hero-card-v2 {
    padding: 0;
    /* min-height grows fluidly from 220px (tablet) up to 320px (large desktop).
       Below 640px the @media block sets min-height:auto so the card hugs its
       content on phones (no empty space under short listings). */
    min-height: clamp(220px, 24vw, 320px);
    background-color: #1a1410;
    background-image: none !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: clamp(12px, 1.2vw, 18px);
    isolation: isolate;
}
.single-listing-v2 .hero-card-v2::before {
    content: "";
    position: absolute;
    inset: -8%;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Blur scales down on narrow viewports — 8px on a 320px phone GPU-renders
       cheaper than the desktop value, no visible quality loss. */
    filter: blur(clamp(4px, 0.6vw, 8px)) saturate(0.9) brightness(0.55);
    transform: scale(1.08) translateZ(0);
    will-change: transform;
    z-index: 0;
}
.single-listing-v2 .hero-card-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(15, 11, 8, 0.45);
    z-index: 0;
}
.single-listing-v2 .hero-content-v2 {
    position: relative;
    z-index: 1;
    /* Fluid padding: 16px inline on a 320px phone (288px content room) up to
       40px on wide desktop. Vertical block padding shrinks similarly. */
    padding: clamp(18px, 2.5vw, 28px) clamp(16px, 3vw, 40px) clamp(16px, 2vw, 26px);
    min-height: clamp(220px, 24vw, 320px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.single-listing-v2 .hero-name-v2 {
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    /* Fluid size keyed to the TEXT COLUMN, not the viewport. The old `vw`
       formula sized the name against the window width — on a wide screen the
       window is huge but the text column is narrow (the screenshot eats ~460px
       of the row), so the font ballooned to 72px and a long slammed-together
       name like "LesbianPornVideos" no longer fit the column and broke
       mid-word. Container query units (1cqi = 1% of the .hero-text-v2 inline
       size, set as the container below) make the font shrink in lockstep with
       the column, so the whole word keeps fitting on one/two lines without an
       ugly mid-word split. 8.5cqi ≈ 52px in a 614px column (fits
       "LesbianPornVideos"); clamps to 28px min / 72px max (max reached only in
       the full-width no-screenshot hero). The `vw` line is the fallback for
       browsers without container query units (pre-2023). */
    font-size: clamp(1.75rem, 1.2rem + 2.75vw, 4.5rem);
    font-size: clamp(1.75rem, 8.5cqi, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 clamp(8px, 1.2vw, 12px);
    /* hyphens OFF so we never insert "-" mid-word. With the cqi sizing above
       the name fits its column, so overflow-wrap only acts as a last-ditch
       guard (a single word still wider than the column on a tiny phone) — it
       keeps the word inside the column instead of bleeding under the
       screenshot, and never fires for names that already fit. */
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
    min-width: 0;
}
.single-listing-v2 .hero-name-link-v2 {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.single-listing-v2 .hero-name-link-v2:hover {
    color: var(--orange-soft-v2);
}
.single-listing-v2 .hero-sub-v2 {
    font-family: "Archivo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Hero CTA — single button "Visit {site}" reuses global .btn-custom (green pill).
   Override .buttons-wrap defaults so single button fits long label. */
.single-listing-v2 .hero-actions-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.single-listing-v2 .hero-actions-v2.buttons-wrap .btn-custom {
    max-width: none;
    width: auto;
    /* Touch-target floor (WCAG 2.5.5 AAA = 44px) plus fluid horizontal
       padding so the pill doesn't dominate narrow viewports. */
    min-height: 44px;
    padding: clamp(12px, 1.5vw, 14px) clamp(20px, 3vw, 28px);
    margin-right: 0;
    box-shadow: 0 8px 24px -8px rgba(34, 197, 94, 0.5);
}
.single-listing-v2 .hero-actions-v2.buttons-wrap .btn-custom .name {
    font-size: clamp(14px, 0.85rem + 0.2vw, 15px);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.single-listing-v2 .hero-actions-v2.buttons-wrap .btn-custom .icon {
    width: 18px;
}

/* HERO with screenshot — two-column layout (text left, live screenshot right).
   Only kicks in when the listing has a featured image (.has-shot-v2 added in
   PHP). The blurred --hero-bg ::before still sits behind both columns, so the
   card keeps its atmospheric backdrop while the right column shows the crisp,
   un-blurred screenshot in a framed plate. */
.single-listing-v2 .hero-card-v2.has-shot-v2 .hero-content-v2 {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    justify-content: space-between;
}
.single-listing-v2 .hero-text-v2 {
    /* min-width:0 lets the text column shrink so long brand names wrap
       instead of pushing the screenshot off the card. */
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Match the old single-column hero: content sits toward the bottom. */
    justify-content: flex-end;
    /* Container for the hero name's cqi-based font-size — the name scales to
       THIS column's width, so it shrinks when the screenshot narrows the row
       and the whole word keeps fitting (no mid-word break). inline-size only
       contains width, leaving height to grow with the wrapped text. */
    container-type: inline-size;
}
.single-listing-v2 .hero-shot-v2 {
    flex: 0 0 clamp(300px, 36%, 460px);
    /* 16:9 — same crop as the listing-hero (800×450) image size, so no
       letterboxing inside the frame. */
    aspect-ratio: 16 / 9;
    border-radius: clamp(8px, 0.9vw, 14px);
    overflow: hidden;
    /* Subtle plate + outline so the screenshot reads as a framed window
       against the blurred backdrop (matches the .card-v2 border language). */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
.single-listing-v2 .hero-shot-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Branded placeholder — shown in any "screenshot slot" when a listing has no
   featured image / thumbnail (Urlbox didn't capture one). Just the turtle
   mascot (410×391, near-square) centred over the brand-orange field — no text.
   object-fit: contain + max-height/width keep the whole mascot (incl. its sand
   island) visible at any slot aspect ratio, and it scales with the slot so the
   layout stays responsive. Reused via .is-placeholder + .ph-turtle. */
.shot-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1.2vw, 14px);
    box-sizing: border-box;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, #f0a94f, #d97e22);
}
.shot-placeholder .ph-turtle {
    /* Both width AND height must be set for object-fit to engage — with auto
       dimensions the near-square mascot hits max-width first in a wide slot and
       overflows vertically (clipped by the avatar's overflow:hidden). Filling
       the padded box + object-fit:contain guarantees the whole mascot (incl.
       its sand island) shows at any aspect ratio. */
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}
/* Hero variant — fills the framed .hero-shot-v2 window. The sibling
   .hero-shot-v2 img rule sets object-fit:cover, so re-assert contain here. */
.single-listing-v2 .hero-shot-v2.is-placeholder { background: none; }
.single-listing-v2 .hero-shot-v2.is-placeholder .ph-turtle { object-fit: contain; }
/* Related-tile avatar variant — the avatar is a grid box (place-items:center),
   which sizes children to content and let the near-square mascot overflow the
   16/10 box. Pin the placeholder to the avatar's frame instead, and force
   object-fit:contain (the sibling .related-avatar-v2 img rule sets cover). */
.single-listing-v2 .related-avatar-v2.is-placeholder { background: none; position: relative; }
.single-listing-v2 .related-avatar-v2 .shot-placeholder {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.single-listing-v2 .related-avatar-v2 .shot-placeholder .ph-turtle { object-fit: contain; }
/* taxonomy v1-shot variant — small row thumbnail. v1-shot is a grid box that
   sizes to content, so pin the placeholder to its frame (same fix as the
   related avatar) and re-assert object-fit:contain over the .v1-shot img rule. */
.v1-shot.is-placeholder { position: relative; }
.v1-shot.is-placeholder .shot-placeholder { position: absolute; inset: 0; padding: 8px; }
.v1-shot.is-placeholder .ph-turtle { object-fit: contain; filter: none; }

/* Generic section heads (the small "THE REVIEW" / "PROS · 8 points" line) */
.single-listing-v2 .head-v2 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.single-listing-v2 .head-v2 h3 {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0;
}
.single-listing-v2 .head-v2 .ic {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex: 0 0 28px;
}
.single-listing-v2 .head-v2 .ic svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* REVIEW block — orange tint */
.single-listing-v2 .review-v2 {
    background: linear-gradient(165deg, rgba(240, 138, 44, 0.1), rgba(0, 0, 0, 0.78));
    border-color: rgba(240, 138, 44, 0.35);
    padding: 24px 28px 28px;
}
.single-listing-v2 .review-v2 .head-v2 .ic { background: rgba(255, 255, 255, 0.06); color: var(--orange-soft-v2); }
.single-listing-v2 .review-v2 .head-v2 h3 { color: var(--orange-soft-v2); }
.single-listing-v2 .review-v2 .body-v2 {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 138, 44, 0.4) rgba(255, 255, 255, 0.04);
    /* Fix #15 (2026-07-10): плавное затухание текста у краёв скролла вместо резкого
       обреза. mask-image растворяет САМ текст по альфе градиента → НЕ зависит от цвета
       фона, работает в светлой и тёмной теме без хардкода. Зоны затухания —
       переменные --top-fade/--bottom-fade; JS (initReviewScrollFade в main.js) через
       классы .at-top/.at-bottom обнуляет нужный край, когда доскроллили донизу/доверху,
       чтобы последняя/первая строка не оставалась навсегда затемнённой. web.dev/CSS-Tricks
       паттерн scroll-fade (mask + scroll-position). */
    --top-fade: 0px;
    --bottom-fade: 2.5rem;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 var(--top-fade),
        #000 calc(100% - var(--bottom-fade)),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 var(--top-fade),
        #000 calc(100% - var(--bottom-fade)),
        transparent 100%);
    transition: none;
}
/* Доскроллили доверху → верхний fade убран; донизу → нижний убран (последняя
   строка читается полностью). Если текста мало и скролла нет — JS ставит оба класса. */
.single-listing-v2 .review-v2 .body-v2.at-top { --top-fade: 0px; }
.single-listing-v2 .review-v2 .body-v2:not(.at-top) { --top-fade: 2.5rem; }
.single-listing-v2 .review-v2 .body-v2.at-bottom { --bottom-fade: 0px; }
.single-listing-v2 .review-v2 .body-v2::-webkit-scrollbar { width: 6px; }
.single-listing-v2 .review-v2 .body-v2::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; }
.single-listing-v2 .review-v2 .body-v2::-webkit-scrollbar-thumb { background: rgba(240, 138, 44, 0.4); border-radius: 999px; }
.single-listing-v2 .review-v2 .body-v2::-webkit-scrollbar-thumb:hover { background: rgba(240, 138, 44, 0.6); }
.single-listing-v2 .review-wrap-v2 { position: relative; }

/* Article-style typography inside review body */
.single-listing-v2 .review-v2 .body-v2 h1,
.single-listing-v2 .review-v2 .body-v2 h2,
.single-listing-v2 .review-v2 .body-v2 h3,
.single-listing-v2 .review-v2 .body-v2 h4,
.single-listing-v2 .review-v2 .body-v2 h5,
.single-listing-v2 .review-v2 .body-v2 h6 {
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 28px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.single-listing-v2 .review-v2 .body-v2 > :first-child { margin-top: 0; }
.single-listing-v2 .review-v2 .body-v2 h1::before,
.single-listing-v2 .review-v2 .body-v2 h2::before,
.single-listing-v2 .review-v2 .body-v2 h3::before,
.single-listing-v2 .review-v2 .body-v2 h4::before,
.single-listing-v2 .review-v2 .body-v2 h5::before,
.single-listing-v2 .review-v2 .body-v2 h6::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--orange-v2);
    border-radius: 2px;
    flex-shrink: 0;
}
.single-listing-v2 .review-v2 .body-v2 p {
    font-family: "Archivo", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 14px;
}
.single-listing-v2 .review-v2 .body-v2 p b,
.single-listing-v2 .review-v2 .body-v2 p strong {
    color: var(--orange-soft-v2);
    font-weight: 700;
}
.single-listing-v2 .review-v2 .body-v2 ul {
    list-style: none;
    margin: 8px 0 18px;
    padding: 0;
}
.single-listing-v2 .review-v2 .body-v2 ul li {
    font-family: "Archivo", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    padding: 6px 0 6px 22px;
    position: relative;
}
.single-listing-v2 .review-v2 .body-v2 ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    background: var(--orange-v2);
    border-radius: 50%;
}

/* STATS strip — sky blue tint */
.single-listing-v2 .stats-strip-v2 {
    background: linear-gradient(165deg, rgba(56, 189, 248, 0.08), rgba(0, 0, 0, 0.78));
    border-color: rgba(56, 189, 248, 0.32);
    padding: 0;
}
.single-listing-v2 .stats-grid-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.single-listing-v2 .stat-cell-v2 {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.single-listing-v2 .stat-cell-v2:last-child { border-bottom: none; }
.single-listing-v2 .stat-cell-v2 .stat-head-v2 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-faint-v2);
    flex: 0 0 95px;
}
.single-listing-v2 .stat-cell-v2 .stat-head-v2 svg { width: 13px; height: 13px; stroke-width: 2; }
.single-listing-v2 .stat-cell-v2 .v {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.15;
    margin-left: auto;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}
.single-listing-v2 .stat-cell-v2 .v small {
    font-size: 11px;
    color: var(--text-dim-v2);
    font-weight: 600;
    margin-left: 2px;
}
.single-listing-v2 .stat-cell-v2 .v.green { color: var(--green-soft-v2); }
.single-listing-v2 .stat-cell-v2 .v.green::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--green-v2);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px var(--green-v2);
}
.single-listing-v2 .stat-cell-v2 .v-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.single-listing-v2 .stat-cell-v2 .v-link:hover {
    color: var(--orange-soft-v2);
}
.single-listing-v2 .stat-cell-v2 .v-link-ext {
    color: var(--orange-soft-v2);
    border-bottom: 1px dashed rgba(246, 176, 106, 0.3);
    padding-bottom: 1px;
}
.single-listing-v2 .stat-cell-v2 .v-link-ext:hover {
    color: var(--orange-v2);
    border-bottom-color: var(--orange-v2);
}

/* PROS / CONS */
.single-listing-v2 .pros-v2 {
    background: linear-gradient(165deg, rgba(34, 197, 94, 0.1), rgba(0, 0, 0, 0.78));
    border-color: rgba(34, 197, 94, 0.35);
}
.single-listing-v2 .cons-v2 {
    background: linear-gradient(165deg, rgba(239, 68, 68, 0.1), rgba(0, 0, 0, 0.78));
    border-color: rgba(239, 68, 68, 0.35);
}
.single-listing-v2 .pros-v2 .head-v2 .ic { background: rgba(34, 197, 94, 0.12); color: var(--green-soft-v2); }
.single-listing-v2 .pros-v2 .head-v2 h3 { color: var(--green-soft-v2); }
.single-listing-v2 .cons-v2 .head-v2 .ic { background: rgba(239, 68, 68, 0.12); color: var(--red-v2); }
.single-listing-v2 .cons-v2 .head-v2 h3 { color: var(--red-v2); }
.single-listing-v2 .pclist-v2 {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
}
.single-listing-v2 .pclist-v2 li {
    font-family: "Archivo", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-mute-v2);
    padding: 10px 0 10px 26px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.single-listing-v2 .pclist-v2 li:first-child { border-top: none; }
.single-listing-v2 .pclist-v2 li svg {
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}
.single-listing-v2 .pros-v2 .pclist-v2 svg { color: var(--green-soft-v2); }
.single-listing-v2 .cons-v2 .pclist-v2 svg { color: var(--red-v2); }

/* Standalone section heads (Related / Other Categories) — global */
.section-head-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.section-head-v2 .ic {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
}
.section-head-v2 .ic svg { width: 16px; height: 16px; stroke-width: 2.2; }
.section-head-v2 h3 {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.section-head-v2 .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
}
.section-head-v2 .count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}
.standalone-section-v2 { margin-top: 28px; }
body.light .section-head-v2 h3,
body.light .section-head-v2 .count { color: rgba(0, 0, 0, 0.6); }
body.light .section-head-v2 .ic {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light .section-head-v2 .line {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent);
}

/* RELATED tiles */
.single-listing-v2 .related-tiles-v2 {
    display: grid;
    /* 320px is the safe minimum for a horizontal layout: thumb 168 + gap 12
       + a usable text column ≈ 100 + padding 16×2 ≈ 312. Anything less
       forces the title to overflow or the buttons to clip. min(100%, …)
       still guards against horizontal scroll on a 320px phone — the wrapper
       collapses to 100% before auto-fit forces a 320px column.
       Patterns: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
                  https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/ */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 12px;
}
.single-listing-v2 .related-tile-v2 {
    --tile-color: var(--orange-v2);
    background: linear-gradient(165deg, color-mix(in srgb, var(--tile-color) 10%, transparent), rgba(0, 0, 0, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    /* min-width:0 propagates the shrink-to-fit allowance down to the nested
       flex chain (.related-header-v2 → .related-info-v2 → .text). Without
       it the grid item's default `min-width: auto` blocks ellipsis. */
    min-width: 0;
}
.single-listing-v2 .related-tile-v2:hover {
    border-color: color-mix(in srgb, var(--tile-color) 30%, transparent);
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--tile-color) 20%, transparent);
    transform: translateY(-2px);
}
/* Light theme — warm cream→white tile (matches redesign/Light reference) so the
   related cards read as light surfaces instead of staying dark on the light page. */
body.light .single-listing-v2 .related-tile-v2 {
    background: linear-gradient(165deg, #fef4ec, #ffffff);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light .single-listing-v2 .related-tile-v2:hover {
    border-color: color-mix(in srgb, var(--tile-color) 40%, transparent);
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--tile-color) 25%, transparent);
}
.single-listing-v2 .related-header-v2 {
    /* Vertical stack at all widths per HUGO feedback — the previous
       horizontal layout (thumb 168 + content) needed a 320px-floor card,
       which left a big empty band on the right of every card below ~430px
       grid-slot width. Stacking the thumb on top and the meta below mirrors
       the homepage card style and removes the breakpoint waterfall. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.single-listing-v2 .related-avatar-v2 {
    /* Full-width screenshot at the top of the card; aspect-ratio 16/10
       keeps the visual proportions identical to the previous 168×105
       horizontal thumb, just scaled to whatever width the tile occupies
       (≈285px on a 320vw mobile, ≈360px in a 3-up desktop grid). */
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #fff;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, var(--tile-color), color-mix(in srgb, var(--tile-color) 55%, #000));
    overflow: hidden;
}
.single-listing-v2 .related-avatar-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the site header visible — cover would otherwise crop top-down
       evenly, hiding the part that identifies the site brand. */
    object-position: top center;
}
.single-listing-v2 .related-info-v2 { flex: 1; min-width: 0; }
.single-listing-v2 .related-name-v2 {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    /* Bigger than the old horizontal layout (17px) — the title sits below
       a full-width screenshot now, so it carries more visual weight. */
    font-size: 19px;
    letter-spacing: -0.3px;
    color: #fff;
    margin-bottom: 6px;
    /* Flex row carries an ellipsis-truncated text node + a non-shrinking
       rank pill. text-overflow can't ellipsis a flex container itself, so
       the title text lives in a child <span class="text"> that owns the
       overflow rules; this is the canonical CSS-Tricks "flexbox + truncated
       text" pattern. min-width:0 on the text span is critical — without
       it the span refuses to shrink below its content's intrinsic width
       and the whole row overflows the tile. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.single-listing-v2 .related-name-v2 .text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.single-listing-v2 .related-name-v2 .rank {
    background: rgba(0, 0, 0, 0.45);
    color: var(--tile-color);
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.5px;
    border: 1px solid color-mix(in srgb, var(--tile-color) 30%, transparent);
    flex-shrink: 0;
}
.single-listing-v2 .related-meta-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Archivo", sans-serif;
    font-size: 11.5px;
    color: var(--text-dim-v2);
}
.single-listing-v2 .related-meta-v2 .rating-wrap {
    display: inline-flex;
    gap: 1px;
    align-items: center;
    /* Override the global .rating-wrap @media (max-width: 480px) rule
       (padding-left: 45px + justify-content: flex-start) — that rule was
       added for the legacy hero rating layout and shouldn't apply to our
       tiny related-tile thumbs-up row. Without this override the rating
       icons shifted ~45px to the right on phones. */
    justify-content: flex-start;
    padding-left: 0;
}
.single-listing-v2 .related-meta-v2 .rating-wrap .svg-icon.rate {
    width: 11px;
    height: 11px;
    margin: 0;
}
/* The Related-block buttons reuse the global .buttons-wrap .btn-custom
   styling (yellow Read review + green Visit Site, brightness hover, the
   47px pill height, 135px max-width). We override only spacing/wrapping
   so two pill buttons sit side by side inside the related tile.

   Why minmax(0, 1fr) — plain `1fr` resolves to `minmax(auto, 1fr)` which
   refuses to shrink below the intrinsic min-content of its child. With
   long labels ("Read review", "Visit YesPornPleaseXXX") the button forces
   the grid track wider than the parent tile and clips. minmax(0, 1fr)
   sets the floor to 0, so the button can shrink and its own ellipsis +
   overflow rules take over. Reference:
   https://defensivecss.dev/tip/grid-min-content-size/ */
.single-listing-v2 .related-buttons-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}
.single-listing-v2 .related-buttons-v2.buttons-wrap .btn-custom {
    margin-right: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.single-listing-v2 .related-buttons-v2.buttons-wrap .btn-custom .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* OTHER CATEGORIES tiles (global — used in single-listing.php and taxonomy.php) */
.cats-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cat-tile-v2 {
    --cat-color: #f08a2c;
    --text-dim-v2: rgba(255, 255, 255, 0.7);
    /* 2-row grid so the previews ribbon spans the full tile width on row 2,
       while the icon keeps occupying both rows on the left. Named areas
       make the role of each cell obvious for future tweaks. */
    display: grid;
    grid-template-columns: 76px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon name action"
        "icon previews previews";
    align-items: center;
    column-gap: 18px;
    row-gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--cat-color) 14%, transparent), rgba(0, 0, 0, 0.78));
    border: 1px solid color-mix(in srgb, var(--cat-color) 40%, rgba(255, 255, 255, 0.15));
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}
.cat-tile-v2:hover {
    border-color: color-mix(in srgb, var(--cat-color) 45%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cat-color) 40%, transparent);
}
/* Stretched-link overlay: covers the whole tile so a click anywhere on
   chrome (icon, title, description, count, arrow, empty space) opens the
   category. Favicon-previews live above it via z-index so their own
   <a> elements take precedence and route to /{id}/{slug}/ instead. */
.cat-tile-v2 .cat-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
    color: transparent;
}
.cat-icon-block-v2 {
    grid-area: icon;
    width: 76px;
    height: 76px;
    background: linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 60%, #000));
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cat-color) 60%, transparent);
    overflow: hidden;
    flex: 0 0 76px;
    align-self: center;
}
.cat-icon-block-v2 img,
.cat-icon-block-v2 svg { width: 34px; height: 34px; object-fit: contain; }
.cat-content-v2 { grid-area: name; min-width: 0; }
.cat-tile-name-v2 {
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.15;
}
.cat-tile-desc-v2 {
    font-family: "Archivo", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-dim-v2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.cat-action-v2 {
    grid-area: action;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    align-self: start;
}
/* Preview row — up to 10 small site favicons under the description.
   Sits above the .cat-tile-overlay stretched-link so each <a> takes
   click priority and routes to its listing page instead of the category.
   flex-wrap: nowrap + overflow:hidden lets very narrow tiles silently
   clip the tail (the "+N" badge still always wins on the right because
   it's the last child after the icons). */
.cat-previews-v2 {
    grid-area: previews;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    /* 5px gap with 24px favicons gives the row a Stripe/Linear breathing
       rhythm. 10 favicons × 24 + 9 gaps × 5 = 285px — fits a 320px tile
       content column with 35px headroom; on a 4-up 1280px desktop layout
       the column is ~310px so we still get the full row + badge. */
    gap: 5px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    min-width: 0;
}
.cat-previews-v2 li {
    display: inline-flex;
    flex: 0 0 auto;
}
.cat-preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24×24 wrapper — Material/Fluent inline-icon default and what most
       2026 design systems use for preview-style icon rows (Notion gallery,
       Stripe Apps, Linear). 16px reads too small to recognise brand
       favicons; 24px stays compact yet scannable. img source comes from
       Google s2 at sz=64 so the 24px CSS render is a clean downscale at
       2× retina (24*2 = 48 < 64 source). */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* White plate behind the favicon — many site favicons ship as a
       transparent PNG with a dark logo (xHamster, Eporner). Without a
       plate they vanish on the dark tile background. Subtle outline
       keeps the plate from looking like a button. */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    transition: opacity 0.15s ease;
}
.cat-preview-icon:hover {
    opacity: 0.85;
}
.cat-preview-icon img {
    /* object-fit: contain (NOT cover) — favicons are designed for a square
       canvas; cover crops the edges where letter-marks live. contain
       letterboxes any non-square source instead. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* No image-rendering override — bilinear (default) is what every guide
       2025-2026 recommends for raster favicons; pixelated/crisp-edges
       only help for actual pixel-art, and Firefox removed moz-crisp-edges
       from the favicon path back in bug 1402250. */
}
.cat-preview-more {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--cat-color) 30%, transparent);
    letter-spacing: -0.3px;
    padding: 0 4px;
}
/* Light theme — only the "+N" badge keeps a plate; favicon thumbs stay
   bare so the cleaner look extends across both themes. */
body.light .cat-preview-icon {
    color: rgba(0, 0, 0, 0.7);
}
/* Narrow tiles can't host all 10 favicons + the "+N" badge in a single
   row. Instead of clipping a random tail mid-icon (overflow:hidden), we
   hide the lowest-ranked favicons whole and keep the badge visible. The
   badge is always the last <li> (added in PHP after the 10 favicon items),
   so `:has(.cat-preview-more)` lets us skip the hiding rule on that one.
   Baseline 2023, Safari 15.4+/Chrome 105+/FF 121+. */

/* ≤560px — show 6 favicons + badge */
@media (max-width: 560px) {
    .cat-previews-v2 li:nth-child(n+7):not(:has(.cat-preview-more)) {
        display: none;
    }
}

/* ≤480px — show 4 favicons + badge */
@media (max-width: 480px) {
    .cat-previews-v2 { gap: 4px; }
    /* Wrapper stays 24×24 at every breakpoint — only the gap shrinks on
       narrow tiles. Trimming the icon itself would only sacrifice
       recognisability without buying real horizontal room. */
    .cat-previews-v2 li:nth-child(n+5):not(:has(.cat-preview-more)) {
        display: none;
    }
}

/* ≤380px — show 3 favicons + badge */
@media (max-width: 380px) {
    .cat-previews-v2 li:nth-child(n+4):not(:has(.cat-preview-more)) {
        display: none;
    }
}

/* Burger-menu favicon row (task #5) — reuses the .cat-preview-icon plate but
   tightens it to 20px so the member-site favicons + "… N" total fit the narrow
   burger column under each category name (theporndude-style). Items are inline
   <span>s, not <a>/<li>, because the whole row is the category's stretched
   link — nested anchors would be invalid HTML. */
.burger-previews-v2 {
    display: inline-flex;
    /* Center on the 20px icon height so the "… N" text lines up with the
       favicon circles instead of sitting on its own text baseline (which
       rendered the count visually higher than the circles). */
    align-items: center;
    min-height: 20px;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 2px 0 0;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
}
.burger-previews-v2 .cat-preview-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    /* The row sits inside .relared-link (white-60 text) — the icon plate keeps
       its own white background from .cat-preview-icon, so favicons stay legible
       regardless of the link colour. */
    pointer-events: none;
}
.burger-previews-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    margin-left: 2px;
    flex: 0 0 auto;
    /* inline-flex + line-height:1 strips the text's baseline gap so the glyphs
       (incl. the "…") center against the 20px icons, not against the row's
       text baseline. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* task #7: drop the "… N" toward the bottom edge of the 20px favicons
       instead of vertically centring it against them. */
    align-self: flex-end;
    padding-bottom: 1px;
}
body.light .burger-previews-count {
    color: rgba(0, 0, 0, 0.55);
}
/* The favicon row replaces the old duplicate-name subtitle, so neutralise the
   subtitle hover-colour shift on the row text — favicons don't change colour. */
.relared-link:hover .burger-previews-count {
    color: rgba(255, 255, 255, 0.75);
}
body.light .relared-link:hover .burger-previews-count {
    color: rgba(0, 0, 0, 0.75);
}
.cat-count-v2 {
    background: color-mix(in srgb, var(--cat-color) 90%, #000);
    color: #fff;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.2px;
    padding: 5px 12px;
    border-radius: 999px;
}
.cat-arrow-v2 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    color: var(--cat-color);
    flex: 0 0 28px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cat-arrow-v2 svg { width: 14px; height: 14px; stroke-width: 2.5; }
.cat-tile-v2:hover .cat-arrow-v2 {
    background: var(--cat-color);
    color: #fff;
    transform: translateX(2px);
}

/* Light theme */
body.light .single-listing-v2 {
    --text-mute-v2: rgba(0, 0, 0, 0.72);
    --text-dim-v2: rgba(0, 0, 0, 0.5);
    --text-faint-v2: rgba(0, 0, 0, 0.35);
    color: #1a1816;
}
body.light .single-listing-v2 .card-v2 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border-color: rgba(0, 0, 0, 0.08);
}
/* Hero on light theme — ALWAYS light, whether or not the listing has a
   screenshot. Previously the WITH-screenshot hero kept the blurred --hero-bg +
   dark overlay (a dark slab that clashed with the otherwise-light page); client
   asked for it to match the light theme like the .card-v2 blocks below ("THE
   REVIEW"). The framed screenshot still shows on the right (.hero-shot-v2), and
   the turtle placeholder on the no-shot variant stays orange. */
body.light .single-listing-v2 .hero-card-v2 {
    /* Base .hero-card-v2 sets `background-image: none !important` (it normally
       relies on the ::before blur layer), which kills a plain background
       shorthand here — hence !important to match the white .card-v2 fill. */
    background-color: #f4f1ee;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)) !important;
    border-color: rgba(0, 0, 0, 0.08);
}
/* Kill the blurred dark screenshot backdrop + dark scrim so the card reads white. */
body.light .single-listing-v2 .hero-card-v2::before { display: none; }
body.light .single-listing-v2 .hero-card-v2::after { display: none; }
body.light .single-listing-v2 .hero-name-v2,
body.light .single-listing-v2 .hero-name-link-v2 { color: #1a1816; }
body.light .single-listing-v2 .hero-sub-v2 { color: rgba(0, 0, 0, 0.7); }
body.light .single-listing-v2 .review-v2 .body-v2 h1,
body.light .single-listing-v2 .review-v2 .body-v2 h2,
body.light .single-listing-v2 .review-v2 .body-v2 h3,
body.light .single-listing-v2 .review-v2 .body-v2 h4,
body.light .single-listing-v2 .review-v2 .body-v2 h5,
body.light .single-listing-v2 .review-v2 .body-v2 h6 { color: #1a1816; }
body.light .single-listing-v2 .review-v2 .body-v2 p,
body.light .single-listing-v2 .review-v2 .body-v2 ul li { color: rgba(0, 0, 0, 0.78); }
body.light .single-listing-v2 .stat-cell-v2 .v { color: #1a1816; }
body.light .single-listing-v2 .related-name-v2 { color: #1a1816; }
body.light .cat-tile-name-v2 { color: #1a1816; }
body.light .cat-tile-v2 {
    background: linear-gradient(165deg, color-mix(in srgb, var(--cat-color) 16%, #ffffff), #ffffff);
    border-color: color-mix(in srgb, var(--cat-color) 30%, rgba(0, 0, 0, 0.08));
}
body.light .cat-tile-desc-v2 { color: rgba(0, 0, 0, 0.55); }

/* Responsive */
@media (max-width: 900px) {
    .single-listing-v2 .stack > .review-wrap-v2,
    .single-listing-v2 .stack > .stats-strip-v2 {
        grid-column: span 12;
    }
    .single-listing-v2 .stack > .two-col-v2 {
        grid-template-columns: 1fr;
    }
    /* Hero font-size + padding are handled by clamp() on the base rules now —
       no per-breakpoint font-size overrides needed. */
    .single-listing-v2 .review-v2 { padding: 24px 20px; }
    .single-listing-v2 .review-v2 .body-v2 { padding-right: 10px; max-height: 260px; }
    .cats-grid-v2 { grid-template-columns: 1fr; }
    /* Fix #11 (2026-07-09): на мобайле иконка 76px + action ~86px зажимали
       заголовок в ~100px → перенос на 3-4 строки. Ужимаем иконку до 52px,
       уменьшаем gap/padding — заголовку достаётся заметно больше ширины,
       раскладка та же (icon | name+desc | action / previews на всю ширину). */
    .cat-tile-v2 {
        grid-template-columns: 52px 1fr auto;
        column-gap: 12px;
        row-gap: 10px;
        padding: 14px 14px;
    }
    .cat-icon-block-v2 {
        width: 52px;
        height: 52px;
    }
    .cat-icon-block-v2 img,
    .cat-icon-block-v2 svg { width: 26px; height: 26px; }
    .cat-tile-name-v2 { font-size: 15px; }
    .cat-tile-desc-v2 { font-size: 12.5px; }
    /* Стрелка декоративная — вся карточка кликабельна через .cat-tile-overlay
       (<a>). Прячем её на мобайле, чтобы отдать ~28px ширины заголовку. */
    .cat-tile-v2 .cat-arrow-v2 { display: none; }
    /* Hero screenshot — below 900px the two columns can't both stay roomy, so
       stack: screenshot on top (full width), text below. order:-1 floats the
       screenshot above the text without reordering the DOM. */
    .single-listing-v2 .hero-card-v2.has-shot-v2 .hero-content-v2 {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(14px, 2.5vw, 20px);
    }
    .single-listing-v2 .hero-shot-v2 {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (max-width: 640px) {
    /* On phones let the hero hug its content — fixed min-height left an
       empty band under short brand names like "Undressly". */
    .single-listing-v2 .hero-card-v2 { min-height: auto; }
    .single-listing-v2 .hero-content-v2 { min-height: auto; }
    .single-listing-v2 .card-v2 { padding: 18px; }
    .single-listing-v2 .stat-cell-v2 .stat-head-v2 { flex: 0 0 80px; font-size: 9px; }
    .single-listing-v2 .stat-cell-v2 .v { font-size: 13px; }
}
/* Stepwise thumb shrink media queries were removed when the related-tile
   moved to a vertical stack (thumb full-width, content below). The thumb
   now scales with the card itself thanks to width:100% + aspect-ratio,
   so no per-breakpoint sizing is needed. */
/* Below 360px the green "Visit X" pill is too narrow to read alongside other
   chrome — let it fill the width so the touch target is unambiguous. */
@media (max-width: 360px) {
    .single-listing-v2 .hero-actions-v2.buttons-wrap .btn-custom {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   BLOG v2 — single post + archive
   Reuses .review-v2 typography pattern with fluid clamp() scaling
   320px → 4K. Sources: LogRocket, Smashing Magazine, A. Hovhannisyan.
   ===================================================================== */

.main-blog-single-v2,
.main-blog-archive-v2 {
    --orange-v2: #f08a2c;
    --orange-soft-v2: #f6b06a;
    --text-mute-v2: rgba(255, 255, 255, 0.72);
    --text-dim-v2: rgba(255, 255, 255, 0.45);
    --card-border-v2: rgba(255, 255, 255, 0.06);
    padding: 20px 0 80px;
    color: #fff;
}
/* Container width matches the rest of the site (.category-page-v2,
   .single-listing-v2, header, footer all use the global .container at
   max-width: 1250px). Earlier this scope had its own clamp() that made
   the blog 30px wider than every other page on desktop and ~70px narrower
   at the 1280px breakpoint — that's the inconsistency this rule removes
   by inheriting the global rule. */

/* Page title — matches .category-page-v2 .page-title-v2 size so the two
   templates feel like the same site. The blog used to clamp up to 56px
   on wide viewports; that read 50% larger than the category h1 at the
   same width. Fixed 36px keeps them aligned. */
.main-blog-single-v2 .page-title-v2,
.main-blog-archive-v2 .page-title-v2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: #fff;
}
.main-blog-single-v2 .page-title-v2 .icon,
.main-blog-archive-v2 .page-title-v2 .icon {
    width: clamp(34px, 2vw + 0.8rem, 56px);
    height: clamp(34px, 2vw + 0.8rem, 56px);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--orange-v2), color-mix(in srgb, var(--orange-v2) 55%, #000));
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--orange-v2) 60%, transparent);
}
.main-blog-single-v2 .page-title-v2 .icon svg,
.main-blog-archive-v2 .page-title-v2 .icon svg {
    width: 60%;
    height: 60%;
    stroke-width: 2;
}
.main-blog-single-v2 .page-title-v2 .count,
.main-blog-archive-v2 .page-title-v2 .count {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dim-v2);
    letter-spacing: 0;
}

/* ===== Single blog post ===== */
.main-blog-single-v2 .blog-meta-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim-v2);
    margin-bottom: 18px;
}
.main-blog-single-v2 .blog-meta-v2 .sep {
    opacity: 0.4;
}
.main-blog-single-v2 .blog-meta-v2 a {
    color: var(--text-mute-v2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.main-blog-single-v2 .blog-meta-v2 a:hover {
    color: var(--orange-soft-v2);
}

/* Article wrapper — full width, hero edge-to-edge flush top */
.main-blog-single-v2 .blog-article-v2 {
    background: linear-gradient(165deg, rgba(240, 138, 44, 0.06), rgba(0, 0, 0, 0.55));
    border: 1px solid rgba(240, 138, 44, 0.18);
    border-radius: 18px;
    padding: 0;
    font-family: "Archivo", sans-serif;
    font-size: clamp(15px, 0.45vw + 0.85rem, 19px);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    isolation: isolate;
}

/* Hero image — flush top, width 100% of article */
.main-blog-single-v2 .blog-article-v2 .blog-hero-v2 {
    margin: 0 !important;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    display: block;
}
.main-blog-single-v2 .blog-article-v2 .blog-hero-v2 img {
    width: 100%;
    height: auto;
    /* Reserve space before the image loads to avoid layout shift (CLS).
       Blog hero images cluster around ~16:10 (1263x768, 1241x768); the
       browser uses this only as a placeholder ratio — once loaded the
       real image renders at its own ratio with height:auto, so the photo
       is never cropped. */
    aspect-ratio: 16 / 10;
    display: block;
    border-radius: 0;
    margin: 0;
}

/* All non-hero direct children get padding sides + bottom */
.main-blog-single-v2 .blog-article-v2 > *:not(.blog-hero-v2) {
    padding-left: clamp(18px, 2.5vw + 0.6rem, 64px);
    padding-right: clamp(18px, 2.5vw + 0.6rem, 64px);
}
.main-blog-single-v2 .blog-article-v2 > .blog-hero-v2 + * {
    padding-top: clamp(24px, 1.5vw + 0.8rem, 40px);
}
.main-blog-single-v2 .blog-article-v2 > *:first-child:not(.blog-hero-v2) {
    padding-top: clamp(20px, 2vw + 0.8rem, 56px);
}
.main-blog-single-v2 .blog-article-v2 > *:last-child {
    padding-bottom: clamp(20px, 2vw + 0.8rem, 56px);
}
.main-blog-single-v2 .blog-article-v2 > :first-child { margin-top: 0; }
.main-blog-single-v2 .blog-article-v2 > :last-child { margin-bottom: 0; }

/* Paragraphs */
.main-blog-single-v2 .blog-article-v2 p {
    font-family: "Archivo", sans-serif;
    font-size: inherit;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1em;
}
.main-blog-single-v2 .blog-article-v2 p b,
.main-blog-single-v2 .blog-article-v2 p strong,
.main-blog-single-v2 .blog-article-v2 li b,
.main-blog-single-v2 .blog-article-v2 li strong {
    /* No accent colour on bold text — it read as a link. Keep it the normal
       body text colour (inherited) and let the weight alone do the emphasis. */
    font-weight: 700;
}

/* Headings with orange bar */
.main-blog-single-v2 .blog-article-v2 h1,
.main-blog-single-v2 .blog-article-v2 h2,
.main-blog-single-v2 .blog-article-v2 h3,
.main-blog-single-v2 .blog-article-v2 h4,
.main-blog-single-v2 .blog-article-v2 h5,
.main-blog-single-v2 .blog-article-v2 h6 {
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.3px;
}
.main-blog-single-v2 .blog-article-v2 h1::before,
.main-blog-single-v2 .blog-article-v2 h2::before,
.main-blog-single-v2 .blog-article-v2 h3::before,
.main-blog-single-v2 .blog-article-v2 h4::before,
.main-blog-single-v2 .blog-article-v2 h5::before,
.main-blog-single-v2 .blog-article-v2 h6::before {
    content: "";
    width: 4px;
    align-self: stretch;
    min-height: 0.9em;
    background: var(--orange-v2);
    border-radius: 2px;
    flex-shrink: 0;
}
.main-blog-single-v2 .blog-article-v2 h1 { font-size: clamp(26px, 1.6vw + 1rem, 44px); margin: 1.5em 0 0.5em; }
.main-blog-single-v2 .blog-article-v2 h2 { font-size: clamp(22px, 1.2vw + 0.95rem, 36px); margin: 1.6em 0 0.5em; }
.main-blog-single-v2 .blog-article-v2 h3 { font-size: clamp(19px, 0.85vw + 0.85rem, 28px); margin: 1.5em 0 0.45em; }
.main-blog-single-v2 .blog-article-v2 h4 { font-size: clamp(17px, 0.55vw + 0.85rem, 23px); margin: 1.4em 0 0.4em; }
.main-blog-single-v2 .blog-article-v2 h5,
.main-blog-single-v2 .blog-article-v2 h6 { font-size: clamp(15px, 0.35vw + 0.85rem, 19px); margin: 1.3em 0 0.4em; }

/* Lists */
.main-blog-single-v2 .blog-article-v2 ul,
.main-blog-single-v2 .blog-article-v2 ol {
    list-style: none;
    margin: 0.5em 0 1.2em;
    padding: 0;
}
.main-blog-single-v2 .blog-article-v2 ul li,
.main-blog-single-v2 .blog-article-v2 ol li {
    font-size: inherit;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.3em 0 0.3em 24px;
    position: relative;
}
.main-blog-single-v2 .blog-article-v2 ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.75em;
    width: 6px;
    height: 6px;
    background: var(--orange-v2);
    border-radius: 50%;
}
.main-blog-single-v2 .blog-article-v2 ol {
    counter-reset: blog-ol;
}
.main-blog-single-v2 .blog-article-v2 ol li {
    counter-increment: blog-ol;
}
.main-blog-single-v2 .blog-article-v2 ol li::before {
    content: counter(blog-ol);
    position: absolute;
    left: 0;
    top: 0.3em;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--orange-soft-v2);
    line-height: 1.65;
}
.main-blog-single-v2 .blog-article-v2 li > ul,
.main-blog-single-v2 .blog-article-v2 li > ol {
    margin: 0.4em 0 0.4em;
}

/* Links */
.main-blog-single-v2 .blog-article-v2 a {
    color: var(--orange-soft-v2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(246, 176, 106, 0.4);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.main-blog-single-v2 .blog-article-v2 a:hover {
    color: var(--orange-v2);
    text-decoration-color: var(--orange-v2);
}

/* Blockquote */
.main-blog-single-v2 .blog-article-v2 blockquote {
    margin: 1.6em 0;
    padding: 1em 1.4em;
    border-left: 4px solid var(--orange-v2);
    background: rgba(240, 138, 44, 0.08);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
}
.main-blog-single-v2 .blog-article-v2 blockquote p:last-child {
    margin-bottom: 0;
}

/* Images */
.main-blog-single-v2 .blog-article-v2 img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
    display: block;
}
.main-blog-single-v2 .blog-article-v2 figure:not(.blog-hero-v2) {
    margin: 1.5em 0;
}
.main-blog-single-v2 .blog-article-v2 figure img {
    margin: 0;
}
.main-blog-single-v2 .blog-article-v2 figcaption {
    font-size: 0.85em;
    color: var(--text-dim-v2);
    text-align: center;
    margin-top: 0.6em;
}

/* HR */
.main-blog-single-v2 .blog-article-v2 hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2em 0;
}

/* Code */
.main-blog-single-v2 .blog-article-v2 code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9em;
    padding: 0.1em 0.4em;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    color: var(--orange-soft-v2);
}
.main-blog-single-v2 .blog-article-v2 pre {
    margin: 1.5em 0;
    padding: 1.2em;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow-x: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9em;
}
.main-blog-single-v2 .blog-article-v2 pre code {
    background: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
}

/* ===== Blog archive ===== */
.main-blog-archive-v2 .blog-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}
.main-blog-archive-v2 .blog-card-v2 {
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(240, 138, 44, 0.06), rgba(0, 0, 0, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
}
.main-blog-archive-v2 .blog-card-v2:hover {
    border-color: rgba(240, 138, 44, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(240, 138, 44, 0.35);
}
.main-blog-archive-v2 .blog-card-thumb-v2 {
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
}
.main-blog-archive-v2 .blog-card-thumb-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.main-blog-archive-v2 .blog-card-v2:hover .blog-card-thumb-v2 img {
    transform: scale(1.04);
}
.main-blog-archive-v2 .blog-card-thumb-v2.is-empty {
    display: grid;
    place-items: center;
    color: var(--text-dim-v2);
}
.main-blog-archive-v2 .blog-card-thumb-v2.is-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}
.main-blog-archive-v2 .blog-card-body-v2 {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.main-blog-archive-v2 .blog-card-meta-v2 {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim-v2);
}
.main-blog-archive-v2 .blog-card-title-v2 {
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 0.6vw + 0.9rem, 24px);
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #fff;
    margin: 0;
}
.main-blog-archive-v2 .blog-card-v2:hover .blog-card-title-v2 {
    color: var(--orange-soft-v2);
}
.main-blog-archive-v2 .blog-card-excerpt-v2 {
    font-family: "Archivo", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-mute-v2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.main-blog-archive-v2 .blog-card-arrow-v2 {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--orange-soft-v2);
    transition: gap 0.2s ease;
}
.main-blog-archive-v2 .blog-card-v2:hover .blog-card-arrow-v2 {
    gap: 12px;
}
.main-blog-archive-v2 .blog-card-arrow-v2 svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Pagination */
.main-blog-archive-v2 .blog-pagination-v2 {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.main-blog-archive-v2 .blog-pagination-v2 ul {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-blog-archive-v2 .blog-pagination-v2 .page-link {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-mute-v2);
    text-decoration: none;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.main-blog-archive-v2 .blog-pagination-v2 .page-link:hover {
    background: rgba(240, 138, 44, 0.1);
    border-color: rgba(240, 138, 44, 0.3);
    color: var(--orange-soft-v2);
}
.main-blog-archive-v2 .blog-pagination-v2 .item.active .page-link {
    background: var(--orange-v2);
    border-color: var(--orange-v2);
    color: #fff;
}

/* Light theme overrides */
body.light .main-blog-single-v2,
body.light .main-blog-archive-v2 {
    --text-mute-v2: rgba(0, 0, 0, 0.72);
    --text-dim-v2: rgba(0, 0, 0, 0.5);
    color: #1a1816;
}
body.light .main-blog-single-v2 .page-title-v2,
body.light .main-blog-archive-v2 .page-title-v2 {
    color: #1a1816;
}
body.light .main-blog-single-v2 .blog-article-v2 {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.85);
}
body.light .main-blog-single-v2 .blog-article-v2 p,
body.light .main-blog-single-v2 .blog-article-v2 ul li,
body.light .main-blog-single-v2 .blog-article-v2 ol li {
    color: rgba(0, 0, 0, 0.82);
}
body.light .main-blog-single-v2 .blog-article-v2 h1,
body.light .main-blog-single-v2 .blog-article-v2 h2,
body.light .main-blog-single-v2 .blog-article-v2 h3,
body.light .main-blog-single-v2 .blog-article-v2 h4,
body.light .main-blog-single-v2 .blog-article-v2 h5,
body.light .main-blog-single-v2 .blog-article-v2 h6 {
    color: #1a1816;
}
body.light .main-blog-archive-v2 .blog-card-v2 {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border-color: rgba(0, 0, 0, 0.08);
}
body.light .main-blog-archive-v2 .blog-card-title-v2 {
    color: #1a1816;
}

/* Adaptive narrow screens */
@media (max-width: 640px) {
    .main-blog-single-v2 .blog-article-v2 {
        padding: 20px 16px;
        border-radius: 14px;
    }
    .main-blog-single-v2 .blog-article-v2 .blog-hero-v2 {
        margin: -20px -16px 20px;
    }
    .main-blog-archive-v2 .blog-grid-v2 {
        gap: 16px;
    }
}

/* Fix #9 (2026-07-09): единый размер H1-заголовков страниц на мобайл — 22px.
   Раньше блог оставался 36px (без моб. override), остальные были 28/26/24px.
   Идёт последним в файле → перебивает прежние мобильные значения при равной
   специфичности. Для hero (container-query clamp) задаём явный font-size. */
@media (max-width: 640px) {
    .main-blog-single-v2 .page-title-v2,
    .main-blog-archive-v2 .page-title-v2,
    .category-page-v2 .page-title-v2,
    .single-listing-v2 .hero-name-v2,
    .contact-title,
    .error-404-title {
        font-size: 22px;
    }
}