/* =====================================================================
   Half Skull — design tokens + product card
   Palette sampled from the logo: red #ff0225, black #000, white #fff,
   kept light and airy everywhere else.
   ===================================================================== */

:root {
	--hs-red: #ff0225;
	--hs-red-dark: #d80020;
	--hs-red-tint: #fff3f5;
	--hs-red-line: #ffd3da;

	--hs-ink: #131316;
	--hs-body: #4c5158;
	--hs-muted: #868c93;
	--hs-faint: #b3b8bd;

	--hs-line: #e7e8ea;
	--hs-line-soft: #f0f1f2;
	--hs-surface: #ffffff;
	--hs-surface-2: #fafafb;

	--hs-green: #0a8b52;
	--hs-green-tint: #f1fbf6;

	--hs-r-sm: 8px;
	--hs-r-md: 12px;
	--hs-r-lg: 16px;
}

/* =====================================================================
   Product card
   ===================================================================== */

.product-block.grid {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-md);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.product-block.grid:hover {
	border-color: var(--hs-red-line);
	box-shadow: 0 8px 22px rgba(19, 19, 22, .07);
}

.product-block.grid .product-content {
	padding: 6px 6px 0;
}

/* ---------- image area ---------- */
.product-block.grid .block-inner { position: relative; }

/*
 * Real product photos come in whatever ratio they were shot in — not
 * every one is a clean 3:4. Cropping (object-fit: cover) used to hide
 * that by cutting the image down; this keeps the whole product
 * visible and centred (object-fit: contain below) and fills whatever
 * space is left with a soft fixed gradient rather than a flat tint.
 *
 * A per-image blurred copy of the photo was tried here first and
 * pulled — with a landscape or wide-crop source it produced a
 * visible hard seam where the sharp image met the smeared blur,
 * reading as a mismatched background rather than a blend. A single
 * designed gradient always blends, because it was never trying to
 * match the photo in the first place.
 */
.product-block.grid figure.image {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--hs-r-lg);
	overflow: hidden;
	background: radial-gradient(135% 100% at 50% 18%, #ffffff 0%, var(--hs-surface-2) 55%, #f3efe9 100%);
}

.hs-slide {
	background: radial-gradient(135% 100% at 50% 18%, #ffffff 0%, var(--hs-surface-2) 55%, #f3efe9 100%);
}

/* theme thumbnail stays only to hold the aspect ratio */
.product-block.grid figure.image > a.product-image {
	display: block;
	position: relative;
	height: 100%;
}

.product-block.grid figure.image > a.product-image img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.product-block.grid.has-hs-slider figure.image > a.product-image img {
	visibility: hidden;
}

.product-block.grid figure.image img.image-hover { display: none !important; }

/* theme overlays we replace */
.product-block.grid .group-buttons,
.product-block.grid .group-add-to-cart,
.product-block.grid .onsale,
.product-block.grid span.onsale {
	display: none !important;
}

/* ---------- card slider ---------- */
.hs-slider {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--hs-r-lg);
	overflow: hidden;
}

.hs-slide {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.hs-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hs-slide img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hs-nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--hs-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--hs-ink);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease, color .2s ease;
	box-shadow: 0 2px 8px rgba(19, 19, 22, .1);
}

.hs-nav:hover {
	background: var(--hs-red);
	border-color: var(--hs-red);
	color: #fff;
}

.hs-prev { left: 8px; }
.hs-next { right: 8px; }

.product-block.grid:hover .hs-nav,
.hs-slider:focus-within .hs-nav { opacity: 1; }

.hs-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.hs-dot {
	width: 5px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(19, 19, 22, .25);
	transition: background .2s ease, width .2s ease;
}

.hs-dot.is-active {
	width: 14px;
	border-radius: 3px;
	background: var(--hs-red);
}

/* ---------- overlay pills ---------- */
.product-block.grid .hs-img-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 7px;
	pointer-events: none;
}

.product-block.grid .hs-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border: 1px solid var(--hs-line);
	border-radius: 6px;
	background: rgba(255, 255, 255, .95);
	font-size: 11px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--hs-body);
	white-space: nowrap;
}

.product-block.grid .hs-pill .hs-star {
	color: var(--hs-red);
	font-size: 11px;
	line-height: 1;
}

.product-block.grid .hs-pill .hs-sep {
	color: var(--hs-faint);
	font-weight: 400;
}

.product-block.grid .hs-swatch-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid var(--hs-line);
	border-radius: 50%;
}

/* ---------- caption ---------- */
.product-block.grid .caption {
	display: flex;
	flex-direction: column;
	padding: 8px 8px 10px;
	text-align: left;
}

.product-block.grid .caption .hs-price { order: 1; }
.product-block.grid .caption .hs-ship  { order: 2; }
.product-block.grid .caption h3.name   { order: 3; }

.product-block.grid .caption .rating,
.product-block.grid .caption .star-rating { display: none !important; }

.product-block.grid .hs-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
	margin: 0;
}

.product-block.grid .hs-price .hs-now,
.product-block.grid .hs-price .hs-now .amount {
	font-size: 15px;
	font-weight: 600;
	color: var(--hs-ink);
	line-height: 1.3;
}

.product-block.grid .hs-price .hs-mrp,
.product-block.grid .hs-price .hs-mrp .amount {
	font-size: 12px;
	font-weight: 500;
	color: var(--hs-faint);
	text-decoration: line-through;
	line-height: 1.3;
}

.product-block.grid .hs-price .hs-off {
	font-size: 12px;
	font-weight: 600;
	color: var(--hs-red);
	line-height: 1.3;
}

.product-block.grid .hs-ship {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	margin-top: 6px;
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--hs-green-tint);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--hs-green);
}

.product-block.grid .hs-ship .hs-ship-ico { font-size: 10px; line-height: 1; }

.product-block.grid .caption h3.name {
	margin: 7px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

.product-block.grid .caption h3.name a {
	display: block;
	color: var(--hs-body);
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-block.grid .caption h3.name a:hover { color: var(--hs-red); }

/* ---------- buy now ---------- */
.product-block.grid .hs-atc {
	margin-top: auto;
	border-top: 1px solid var(--hs-line);
}

.product-block.grid .hs-atc a.button,
.product-block.grid .hs-atc a.added_to_cart {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--hs-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: none;
	transition: background .18s ease, color .18s ease;
}

.product-block.grid .hs-atc a.button:hover,
.product-block.grid .hs-atc a.button:focus,
.product-block.grid .hs-atc a.added_to_cart:hover {
	background: var(--hs-red);
	color: #fff;
}

.product-block.grid .hs-atc a.button i,
.product-block.grid .hs-atc a.button .tb-icon,
.product-block.grid .hs-atc a.button svg { display: none !important; }

.product-block.grid .hs-atc a.added_to_cart {
	border-top: 1px solid var(--hs-line);
	font-size: 11px;
}

/* ---------- grid rhythm ---------- */
.products-grid,
.product-tabs.products .products-grid { margin-bottom: 20px; }

.tbay-element-product-tabs .products-grid,
.tbay-element-product-categories-tabs .products-grid { padding-bottom: 4px; }

/* ---------- desktop ---------- */
@media (min-width: 992px) {
	.product-block.grid { border-radius: var(--hs-r-lg); }
	.product-block.grid .product-content { padding: 8px 8px 0; }
	.product-block.grid figure.image,
	.hs-slider { border-radius: var(--hs-r-md); }
	.product-block.grid .hs-img-meta { padding: 10px; }
	.product-block.grid .hs-pill { font-size: 13px; padding: 4px 8px; }
	.product-block.grid .hs-pill .hs-star { font-size: 13px; }
	.product-block.grid .caption { padding: 10px 12px 12px; }
	.product-block.grid .hs-price { gap: 8px; }
	.product-block.grid .hs-price .hs-now,
	.product-block.grid .hs-price .hs-now .amount { font-size: 17px; }
	.product-block.grid .hs-price .hs-mrp,
	.product-block.grid .hs-price .hs-mrp .amount,
	.product-block.grid .hs-price .hs-off { font-size: 14px; }
	.product-block.grid .hs-ship { font-size: 13px; padding: 4px 9px; }
	.product-block.grid .caption h3.name { font-size: 14px; }
	.product-block.grid .hs-atc a.button { padding: 15px 8px; font-size: 13px; }
	.hs-nav { width: 32px; height: 32px; font-size: 17px; }
}

/* ---------- touch: arrows always visible, tighter grid ---------- */
@media (hover: none) {
	.hs-nav { opacity: 1; width: 26px; height: 26px; font-size: 14px; }
	.hs-prev { left: 6px; }
	.hs-next { right: 6px; }
}

@media (max-width: 767px) {
	.product-block.grid .caption { padding: 7px 8px 9px; }
	.product-block.grid .hs-price .hs-now,
	.product-block.grid .hs-price .hs-now .amount { font-size: 14px; }
	.product-block.grid .hs-atc a.button { padding: 11px 6px; font-size: 11px; }
	.products-grid { margin-bottom: 14px; }
}

/* =====================================================================
   Earned badges on the card image
   ===================================================================== */

.product-block.grid .hs-badge-stack {
	position: absolute;
	top: 7px;
	left: 7px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
	max-width: calc(100% - 14px);
}

.hs-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(19, 19, 22, .12);
}

.hs-badge.is-red   { background: var(--hs-red); color: #fff; }
.hs-badge.is-ink   { background: var(--hs-ink); color: #fff; }
.hs-badge.is-green { background: var(--hs-green); color: #fff; }
.hs-badge.is-amber { background: #fff3d6; color: #94620a; }

@media (min-width: 992px) {
	.product-block.grid .hs-badge-stack { top: 10px; left: 10px; gap: 5px; }
	.hs-badge { font-size: 11px; padding: 5px 9px; }
}

/* =====================================================================
   Header marquee
   ===================================================================== */

.hs-marquee {
	position: relative;
	z-index: 20;
	background: var(--hs-ink);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hs-marquee__viewport {
	overflow: hidden;
	width: 100%;
}

.hs-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 9px 0;
	animation: hs-marquee 34s linear infinite;
}

.hs-marquee:hover .hs-marquee__track { animation-play-state: paused; }

.hs-marquee__item {
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.3;
}

.hs-marquee__item::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 22px;
	border-radius: 50%;
	background: var(--hs-red);
}

@keyframes hs-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hs-marquee__track { animation: none; }
}

@media (max-width: 767px) {
	.hs-marquee__track { padding: 7px 0; animation-duration: 26s; }
	.hs-marquee__item { font-size: 10px; padding: 0 14px; letter-spacing: .06em; }
	.hs-marquee__item::after { margin-left: 14px; width: 4px; height: 4px; }
}

/* =====================================================================
   Page rhythm
   Elementor sections carried a mix of 41px, 59px and 80px margins, so
   the gaps between blocks read as arbitrary. One value everywhere.
   ===================================================================== */

.site-main > .elementor > .elementor-top-section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.site-main > .elementor > .elementor-top-section + .elementor-top-section {
	margin-top: 60px !important;
}

.tbay-element-product-tabs .product-tabs-title,
.tbay-element-product-categories-tabs .product-categories-tabs-title {
	margin-bottom: 24px;
}

.tbay-element-product-tabs .tbay-heading,
.tbay-element-product-categories-tabs .tbay-heading { margin-bottom: 18px; }

@media (max-width: 991px) {
	.site-main > .elementor > .elementor-top-section + .elementor-top-section {
		margin-top: 38px !important;
	}

	.tbay-element-product-tabs .product-tabs-title,
	.tbay-element-product-categories-tabs .product-categories-tabs-title {
		margin-bottom: 16px;
	}
}

@media (max-width: 767px) {
	.site-main .container,
	.site-main .container-fluid { padding-left: 14px; padding-right: 14px; }

	.site-main > .elementor > .elementor-top-section + .elementor-top-section {
		margin-top: 30px !important;
	}
}

/* nothing on the storefront may push the page sideways */
.hs-storefront { overflow-x: hidden; }

/* =====================================================================
   Homepage section alignment
   ===================================================================== */

/* --- Hero: the right column's stacked banners are ~107px shorter than
   the tall left poster, so their tops lined up and their bottoms did
   not. Centring balances the difference without cropping artwork. --- */
@media (min-width: 992px) {
	.home .elementor-element-d465f55 > .elementor-container {
		align-items: center;
	}
}

/* --- "Featured Products", "Causal T-shirt", "GYM Wear" ---
   These ran a 337px heading column beside the grid, so the heading sat
   alone above ~690px of empty gutter and the products were squeezed into
   the remaining width. Both columns now span the full row: heading on the
   left, tab nav pulled up level with it on the right, grid full width. */
@media (min-width: 992px) {
	.home .elementor-element-df05bbf > .elementor-container,
	.home .elementor-element-8a76f1e > .elementor-container,
	.home .elementor-element-7917842 > .elementor-container {
		flex-wrap: wrap;
	}

	.home .elementor-element-df05bbf > .elementor-container > .elementor-column,
	.home .elementor-element-8a76f1e > .elementor-container > .elementor-column,
	.home .elementor-element-7917842 > .elementor-container > .elementor-column {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.home .elementor-element-df05bbf .product-categories-tabs-title,
	.home .elementor-element-8a76f1e .product-categories-tabs-title,
	.home .elementor-element-7917842 .product-categories-tabs-title {
		margin-top: -92px;
		margin-bottom: 30px;
	}
}

/* --- Section padding: the blog block carried 73px of its own top
   padding on top of the shared 60px gap, and the testimonials block
   80px at the bottom. Brought in line with everything else. --- */
.home .elementor-element-2c18d54 {
	padding-top: 14px !important;
	padding-bottom: 24px !important;
}

.home .elementor-element-9adbbae {
	padding-top: 14px !important;
	padding-bottom: 28px !important;
}

/* --- Headings share one rhythm across every section --- */
.home .heading-tbay-title,
.home .tbay-heading { margin-bottom: 0; }

.home .elementor-widget-tbay-heading .tbay-title,
.home .elementor-widget-tbay-heading h2 { margin-bottom: 6px; }

/* --- Trust strip, rebuilt as four cards ---
   Was a flat grey band with the icon floating away from its text. Now
   equal-height tiles: red icon in a soft red disc, title, support line. */

.home .elementor-element-c397336 {
	background: transparent !important;
	padding: 0 !important;
}

.home .elementor-element-c397336 > .elementor-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	/* line the tiles up with the product grids at 31px, not the raw
	   column edge at 16px */
	padding-left: 15px;
	padding-right: 15px;
}

.home .elementor-element-c397336 > .elementor-container > .elementor-column {
	flex: 1 1 0;
	width: auto;
	max-width: none;
}

.home .elementor-element-c397336 .elementor-widget-wrap { padding: 0 !important; }
.home .elementor-element-c397336 .elementor-widget-icon-box,
.home .elementor-element-c397336 .elementor-widget-icon-box > .elementor-widget-container { height: 100%; }

.home .elementor-element-c397336 .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px 18px;
	border: 1px solid var(--hs-line);
	border-radius: 14px;
	background: var(--hs-surface);
	text-align: left;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.home .elementor-element-c397336 .elementor-icon-box-wrapper:hover {
	border-color: var(--hs-red-line);
	box-shadow: 0 8px 20px rgba(19, 19, 22, .07);
	transform: translateY(-2px);
}

.home .elementor-element-c397336 .elementor-icon-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	margin: 0;
	border-radius: 50%;
	background: var(--hs-red-tint);
}

.home .elementor-element-c397336 .elementor-icon-box-icon .elementor-icon,
.home .elementor-element-c397336 .elementor-icon-box-icon i,
.home .elementor-element-c397336 .elementor-icon-box-icon svg {
	width: 22px;
	height: 22px;
	font-size: 21px;
	line-height: 1;
	color: var(--hs-red);
	fill: var(--hs-red);
}

.home .elementor-element-c397336 .elementor-icon-box-content { margin: 0; min-width: 0; }

.home .elementor-element-c397336 .elementor-icon-box-title {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hs-ink);
	letter-spacing: 0;
}

.home .elementor-element-c397336 .elementor-icon-box-title a { color: inherit; }

.home .elementor-element-c397336 .elementor-icon-box-description {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--hs-muted);
}

@media (max-width: 991px) {
	.home .elementor-element-c397336 > .elementor-container { gap: 12px; }
	.home .elementor-element-c397336 > .elementor-container > .elementor-column {
		flex: 1 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
	}
	.home .elementor-element-c397336 .elementor-icon-box-wrapper { padding: 14px; gap: 11px; }
	.home .elementor-element-c397336 .elementor-icon-box-icon { flex-basis: 40px; width: 40px; height: 40px; }
	.home .elementor-element-c397336 .elementor-icon-box-icon .elementor-icon,
	.home .elementor-element-c397336 .elementor-icon-box-icon i { font-size: 18px; }
	.home .elementor-element-c397336 .elementor-icon-box-title { font-size: 13px; }
	.home .elementor-element-c397336 .elementor-icon-box-description { font-size: 11.5px; }
}

@media (max-width: 420px) {
	.home .elementor-element-c397336 > .elementor-container > .elementor-column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* --- Latest Blog: two posts in a three-slide carousel were centred,
   leaving the row indented. Widget now runs two per view. --- */
.home .elementor-element-2c18d54 .tbay-element-posts-grid .item-post { height: 100%; }

/* =====================================================================
   "All Products" button under the product carousels
   Was a 38px pill sitting flush against the dots with 7px of padding.
   ===================================================================== */

.readmore-wrapper {
	margin-top: 28px;
	text-align: center;
}

.readmore-wrapper a.btn.show-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 14px 34px;
	border: 1px solid var(--hs-ink);
	border-radius: 10px;
	background: transparent;
	color: var(--hs-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.readmore-wrapper a.btn.show-all:hover,
.readmore-wrapper a.btn.show-all:focus {
	background: var(--hs-ink);
	border-color: var(--hs-ink);
	color: #fff;
}

.readmore-wrapper a.btn.show-all i,
.readmore-wrapper a.btn.show-all .tb-icon { font-size: 11px; line-height: 1; }

@media (max-width: 767px) {
	.readmore-wrapper { margin-top: 20px; }
	.readmore-wrapper a.btn.show-all {
		min-height: 44px;
		padding: 12px 26px;
		font-size: 12px;
	}
}

/* =====================================================================
   New Drops section
   Single category, so its one-item tab strip is redundant with the
   heading and is hidden.
   ===================================================================== */

.home .elementor-element-hsnewdrops .product-categories-tabs-title { display: none; }

.home .elementor-element-hsnewdrops .elementor-widget-tbay-heading { margin-bottom: 0; }

/* Carousels clip at the slick viewport (16px), which is 15px wider than
   the card grid (31px), so the next slide peeked into the gutter.
   clip-path trims those 15px without moving anything. */
.tbay-element-product-tabs .slick-list,
.tbay-element-product-categories-tabs .slick-list {
	clip-path: inset(0 15px);
}

@media (max-width: 767px) {
	.tbay-element-product-tabs .slick-list,
	.tbay-element-product-categories-tabs .slick-list {
		clip-path: inset(0 7px);
	}
}

/* =====================================================================
   Phones: cards show the main image only
   halfskull.js adds .is-static below 992px and never starts autoplay,
   so the slider layer just holds the first image.
   ===================================================================== */

@media (max-width: 991px) {
	.hs-slider.is-static .hs-nav,
	.hs-slider.is-static .hs-dots { display: none !important; }

	.hs-slider.is-static .hs-slide { display: none; }

	.hs-slider.is-static .hs-slide.is-active {
		display: block;
		opacity: 1;
		transition: none;
	}
}

/* =====================================================================
   Mobile header logo
   The skull mark is square, so the theme's 120px width setting made the
   phone header 120px tall. Constrain it by height instead.
   ===================================================================== */

@media (max-width: 1199px) {
	.mobile-logo img,
	.topbar-device-mobile .mobile-logo img {
		width: auto !important;
		max-width: 100%;
		height: 44px !important;
		max-height: 44px;
		object-fit: contain;
	}

	.topbar-device-mobile { padding-top: 8px; padding-bottom: 8px; }
}