/* tBeacon redesign — custom.css. Loads after stylesheet.css, wins the cascade. */

/* ==== Fonts: Inter, self-hosted, latin + cyrillic, 400/600/700 ==== */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ==== Palette (accent sampled from the tBeacon logo icon gradient) ==== */
:root {
	--accent: #2495FF;
	--accent-hover: #1C79CC;
	--accent-ink: #291C70;
	--bg: #FFFFFF;
	--bg-subtle: #F6F8FA;
	--border: #E3E7ED;
	--text: #1F2430;
	--text-muted: #6B7280;
	--radius: 10px;
	--radius-sm: 8px;
}

/* ==== Base typography ==== */
body {
	font-family: 'Inter', Arial, sans-serif;
	font-size: 16px;
	color: var(--text);
}
h1, h2, h3, h4, h5, h6,
footer h5 {
	font-family: 'Inter', Arial, sans-serif;
	font-weight: 600;
	color: var(--text);
}
a {
	color: var(--accent);
}
a:hover {
	color: var(--accent-hover);
}

/* ==== Layout air: containers, breadcrumb, cards ==== */
.container {
	padding-left: 24px;
	padding-right: 24px;
}
.breadcrumb {
	background: transparent;
	border: none;
	padding: 12px 0;
	margin: 0 0 28px 0;
}
.breadcrumb > li:after {
	display: none;
}
.breadcrumb > li {
	padding: 0 4px 0 0;
}
.breadcrumb > li + li:before {
	content: '/';
	padding: 0 8px;
	color: var(--text-muted);
}

/* ==== Flat dropdowns (kill the Bootstrap 3 gradient) ==== */
.dropdown-menu li > a:hover,
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	background-image: none;
	background-color: var(--accent);
}

/* ==== Flat buttons, radius 8-12px, no gradients/shadows ==== */
.btn {
	border-radius: var(--radius);
	box-shadow: none;
}
.btn-primary {
	background-color: var(--accent);
	background-image: none;
	border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active,
.btn-primary.disabled, .btn-primary[disabled] {
	background-color: var(--accent-hover);
	background-image: none;
	border-color: var(--accent-hover);
	box-shadow: none;
}
.btn-default {
	background-color: #fff;
	background-image: none;
	border-color: var(--border);
	color: var(--text);
}
.btn-default:hover {
	background-color: var(--bg-subtle);
	background-image: none;
}
.btn-inverse {
	background-color: var(--accent-ink);
	background-image: none;
	border-color: var(--accent-ink);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active {
	background-color: #1E1450;
	background-image: none;
}

/* ==== Semantic buttons: keep meaning, drop the gradient/shadow ==== */
.btn-warning, .btn-danger, .btn-success, .btn-info {
	background-image: none;
	box-shadow: none;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active,
.btn-danger:hover, .btn-danger:active, .btn-danger.active,
.btn-success:hover, .btn-success:active, .btn-success.active,
.btn-info:hover, .btn-info:active, .btn-info.active {
	box-shadow: none;
}

/* ==== Category nav bar: flat, same accent as buttons/links ==== */
#menu {
	background-color: var(--accent);
	background-image: none;
	border-color: var(--accent-hover);
}
#menu .see-all:hover, #menu .see-all:focus,
#menu .btn-navbar, #menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active {
	background-color: var(--accent-hover);
	background-image: none;
	border-color: var(--accent-hover);
}

/* ==== Forms: same radius as buttons, accent focus ring ==== */
.form-control,
select.form-control, textarea.form-control, input[type="text"].form-control,
input[type="password"].form-control, input[type="email"].form-control {
	border-radius: var(--radius-sm);
	border-color: var(--border);
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(36, 149, 255, 0.15);
	outline: none;
}

/* ==== Alerts: flat toast, incl. add-to-cart success ==== */
.alert {
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: none;
	padding: 12px 18px;
}
.alert-success {
	background-color: #EAF7EE;
	color: #1E7A3D;
}
.alert-danger {
	background-color: #FDECEC;
	color: #B3261E;
}
.alert-info {
	background-color: #EAF3FF;
	color: var(--accent-hover);
}

/* ==== Pagination: flat, accent active/hover ==== */
.pagination > li > a, .pagination > li > span {
	border-color: var(--border);
	color: var(--text);
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
	border-top-left-radius: var(--radius-sm);
	border-bottom-left-radius: var(--radius-sm);
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
	border-top-right-radius: var(--radius-sm);
	border-bottom-right-radius: var(--radius-sm);
}
.pagination > li > a:hover, .pagination > li > a:focus {
	background-color: var(--bg-subtle);
	border-color: var(--accent);
	color: var(--accent-hover);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
	background-color: var(--accent);
	border-color: var(--accent);
}

/* ==== Product cards: airier padding, flat border, quiet hover ==== */
.product-thumb {
	border-color: var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease;
}
.product-thumb:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
}
.product-thumb .caption {
	padding: 16px 28px 20px;
}
.product-thumb .button-group {
	background-color: var(--bg-subtle);
	border-top-color: var(--border);
}
.product-thumb .button-group button {
	background-color: transparent;
	color: var(--text-muted);
}
.product-thumb .button-group button:hover {
	background-color: var(--border);
	color: var(--text);
}

/* ==== Sticky header — desktop only ==== */
@media (min-width: 992px) {
	header {
		position: sticky;
		top: 0;
		z-index: 900; /* below #cart .dropdown-menu (1001) and Bootstrap .dropdown-menu (1000) so both open on top, unobstructed */
		background: var(--bg);
		border-bottom: 1px solid var(--border);
	}
}

/* ==== Homepage: comic slideshow — scale to fit, never crop ====
   Reserved box uses the native ratio of comix1-4.png (524x193 = 2.715:1),
   not the module's configured 1140x300 (3.8:1) - the source files don't
   actually match that, and contain+this ratio minimises letterboxing for
   4 of the 6 slides. Wider/portrait outlier slides still fit fully, just
   with more side/top padding inside the box - no crop either way. */
.swiper-viewport {
	position: relative;
	max-width: 900px;
	aspect-ratio: 524 / 193;
	margin: 0 auto 32px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg-subtle);
	overflow: hidden;
}
.swiper-viewport .swiper-container,
.swiper-viewport .swiper-wrapper,
.swiper-viewport .swiper-slide {
	height: 100%;
}
.swiper-viewport .swiper-slide a {
	display: block;
	height: 100%;
}
.swiper-viewport .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.swiper-pagination-bullet-active {
	background: var(--accent);
}
.swiper-button-prev, .swiper-button-next {
	width: 36px;
	height: 36px;
	margin-top: -18px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background-size: 14px 22px;
}

/* ==== Homepage: featured articles/products blocks ==== */
#content > h3 {
	margin-top: 40px;
	margin-bottom: 20px;
}
#content > h3:first-of-type {
	margin-top: 0;
}
.information-thumb {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease;
}
.information-thumb:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
}
.information-thumb .caption {
	padding: 16px 20px 20px;
}
.information-layout, .product-layout {
	margin-bottom: 24px;
}