/* ==========================================================================
   GlowShop theme — replicates the reference storefront design.
   Values measured from the reference site's rendered layout (1440px).
   ========================================================================== */

:root {
	--wd-primary-color: rgb(0, 0, 0);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--wd-title-color: #242424;
	--wd-title-font-weight: 400;
	--wd-title-font: "Glaciall", Arial, Helvetica, sans-serif;
	--wd-text-color: rgb(118, 118, 118);
	--wd-text-font-size: 15px;
	--wd-text-font-weight: 400;
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-font: "Glaciall", Arial, Helvetica, sans-serif;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-font: "Glaciall", Arial, Helvetica, sans-serif;
	--wd-widget-title-transform: uppercase;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-size: 13px;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-alternative-font: "Glaciall", Arial, Helvetica, sans-serif;
	--wd-container-w: 1222px;
	--wd-form-height: 42px;
	--wd-form-brd-width: 1px;
	--wd-form-brd-color: rgba(0, 0, 0, 1);
	--wd-brd-radius: 0px;
}

/* Reference custom CSS rules. */
.site-logo img {
	width: 156px;
}

.wd-copyrights {
	border-top: none !important;
}

.wd-content-layout {
	padding-block: 0px !important;
}

/* Header: full screen search element width. */
.whb-main-header .whb-duljtjrl87kj7pmuut6b {
	min-width: 663px;
}

.whb-main-header .whb-duljtjrl87kj7pmuut6b .s,
.whb-main-header .whb-ldgrjr89tte5s6mu9k84 .s {
	min-width: 0px;
	padding: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
}

/* Mobile search: black square submit button. */
.whb-main-header .whb-ldgrjr89tte5s6mu9k84 .searchform button[type="submit"],
.whb-main-header .whb-ldgrjr89tte5s6mu9k84 .searchform .searchsubmit {
	background: rgb(0, 0, 0);
	color: #fff;
	border-radius: 0;
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */

.gs-home {
	background: #fff;
	/* Full-bleed inside the theme content container. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
}

/* Elementor-compatible responsive helpers (reference markup behaviour).
 *
 * Mirror Elementor's own ruleset literally: exactly ONE display:none per
 * breakpoint, and NO "display: revert" counterpart.
 *
 * The previous version added a "display: revert" rule for the two modifiers
 * that must stay visible. Because .gs-home-mobile carries BOTH
 * elementor-hidden-desktop AND elementor-hidden-tablet, the later
 * elementor-hidden-tablet { display: revert } rule (equal specificity, later
 * in the stylesheet) cancelled elementor-hidden-desktop { display: none } —
 * so the desktop AND the mobile homepage containers rendered at the same
 * time and the whole front page appeared twice. */
@media (min-width: 1025px) {
	.elementor-hidden-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-hidden-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.elementor-hidden-mobile {
		display: none !important;
	}
}

/* Hero banner: full width, fixed 635px crop on desktop (410px tablet). */
.gs-hero .banner-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1025px) {
	.gs-hero .banner-image img {
		height: 635px;
		object-fit: cover;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.gs-hero .banner-image img {
		height: 410px;
		object-fit: cover;
	}
}

/* Title + content bands: titles column left, carousel bleeding right. */
.gs-band {
	display: flex;
	flex-direction: row;
	gap: 150px;
	padding: 96px 0 96px 322px;
	align-items: stretch;
}

.gs-band-titles {
	flex: 0 0 20%;
	max-width: 20%;
}

.gs-band-content {
	flex: 1 1 auto;
	min-width: 0;
}

.gs-band-title {
	font-family: "PT Sans", Sans-serif;
	font-size: 48px;
	font-weight: bold;
	line-height: 50px;
	color: #151515;
	margin: 0 0 10px;
}

.gs-band-subtitle {
	font-family: "PT Sans", Sans-serif;
	font-size: 24px;
	font-weight: normal;
	line-height: 30px;
	color: #151515;
	margin: 0 0 10px;
}

.gs-band-subtitle.gs-subtitle-sm {
	font-size: 16px;
	line-height: 25px;
}

.gs-band-btn {
	margin-top: 20px;
}

/* Category band: heading block above a 4-column grid (35px gaps). */
.gs-band-cats {
	flex-direction: column;
	gap: 0;
}

.gs-band-cats .gs-band-titles {
	flex: 0 0 auto;
	max-width: 60%;
	margin-bottom: 45px;
}

.gs-band-cats .gs-band-content {
	padding-right: 20px;
}

/* Category infobox grid. */
.gs-infobox-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 35px;
}

.gs-infobox .info-box-icon {
	border-radius: 12px;
	overflow: hidden;
}

.gs-infobox .info-box-icon img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.gs-infobox .info-box-title {
	color: #151515;
	font-family: "PT Sans", Sans-serif;
	font-size: 14px;
	margin: 12px 0 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.main-footer .gs-footer-widgets {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
	padding-top: 50px;
	padding-bottom: 60px;
	margin: 0 60px;
}

.gs-footer-col {
	flex: 0 0 auto;
}

.gs-footer-col:nth-child(1) {
	flex-basis: 34%;
}

.gs-footer-col:nth-child(2) {
	flex-basis: 28%;
}

.gs-footer-col:nth-child(3) {
	flex-basis: 32%;
}

.gs-footer-menu,
.gs-footer-menu .sub-sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-footer-menu > li > .menu-label {
	display: block;
	font-weight: 700;
	color: #151515;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.gs-footer-menu .sub-sub-menu li a {
	color: #151515;
	display: block;
	padding: 4px 0;
}

.gs-footer-menu .sub-sub-menu li a:hover {
	color: #767676;
}

.gs-footer-title {
	font-size: 16px;
	font-weight: 700;
	color: #151515;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.gs-footer-contact-body p {
	color: #151515;
	margin: 0 0 6px;
}

/* ==========================================================================
   Product page extras
   ========================================================================== */

.gs-live-view {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 15px 0;
	font-size: 14px;
	color: #333;
}

.gs-live-view-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2fb844;
	display: inline-block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
	.gs-band {
		gap: 60px;
		padding: 60px 20px;
	}

	.gs-band-title {
		font-size: 36px;
		line-height: 40px;
	}

	.gs-band-btn.elementor-hidden-tablet {
		display: none;
	}
}

@media (max-width: 768px) {
	.gs-home-mobile .banner-image img {
		width: 100%;
		height: auto;
	}

	.gs-band-m {
		padding: 40px 20px;
	}

	.gs-band-m .gs-band-titles {
		max-width: 100%;
		margin-bottom: 25px;
	}

	.gs-band-title {
		font-size: 36px;
		line-height: 40px;
	}

	.gs-band-subtitle {
		font-size: 18px;
		line-height: 26px;
	}

	.gs-infobox-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.gs-footer-widgets {
		flex-direction: column;
		gap: 35px;
		margin: 0 20px;
		padding: 40px 0;
	}

	.gs-footer-col:nth-child(1),
	.gs-footer-col:nth-child(2),
	.gs-footer-col:nth-child(3) {
		flex-basis: 100%;
	}
}