/* SHEDA brand overrides. Loaded after custom.css. Never edit custom.css. */

:root {
	--primary-color   : #1C1C1E;
	--secondary-color : #F4F4F5;
	--accent-color    : #DF2127;
	--accent-dark     : #941C1B;
	--overlay-color   : rgba(28, 28, 30, 0.72);
	--text-color      : #6B6B70;
	--divider-color   : #E2E2E4;
}

/* The theme puts dark text on its light-green accent. Red needs white text.
   The outlined variant is excluded: it has no fill, so this rule was painting
   white text on the page itself and the button read as an empty red pill on
   every light background. */
.btn-default:not(.btn-border),
.btn-default:not(.btn-border):hover,
.pagination li.active a,
.pagination li a:hover {
	color: var(--white-color) !important;
}

.btn-default:not(.btn-border):hover {
	background-color: var(--accent-dark) !important;
	border-color: var(--accent-dark) !important;
}

/* Outlined: accent on the page, filled accent with white text on hover. */
.btn-default.btn-border {
	color: var(--accent-color) !important;
}

.btn-default.btn-border:hover {
	background-color: var(--accent-color) !important;
	border-color: var(--accent-color) !important;
	color: var(--white-color) !important;
}

/* The hero is the one dark backdrop this button sits on, where accent red on
   near-black is the weaker pairing. It keeps the white outline it had. */
.hero .btn-default.btn-border {
	color: var(--white-color) !important;
	border-color: var(--white-color) !important;
}

/* Hide the Google Translate widget chrome. The gadget must stay in the DOM. */
#google_translate_element {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skiptranslate,
.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
.goog-te-balloon-frame,
/* Google's newer builds use generated class names, which the rules above do
   not reach. Found on a translated page in September 2026: */
[class*="VIpgJd-ZVi9od-aZ2wEe"],      /* loading spinner with the Google mark, moved mid-screen while translating */
[class*="VIpgJd-ZVi9od-xl07Ob-OEVmcd"], /* top banner iframe */
[class*="VIpgJd-ZVi9od-ORHb-OEVmcd"],   /* top banner iframe, earlier build */
[class*="VIpgJd-ZVi9od-xl07Ob-lTBxed"], /* "Powered by Google Translate" link */
[class*="VIpgJd-yAWNEb-L7lbkb"],        /* "Original text" tooltip */
[class*="VIpgJd-yAWNEb-hvhgNd"],        /* "Rate this translation" popup */
#goog-gt-vt {
	display: none !important;
}

/* The hover highlight on translated text. Only its colour and shadow are
   removed: these classes sit on the page's own words, which must stay visible. */
.goog-text-highlight,
[class*="VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q"] {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

body {
	top: 0 !important;
	position: static !important;
}

/* The topbar and the header both sit at z-index 100 in custom.css, so the
   header wins on document order and paints over the open language menu. The
   sticky header only goes fixed past 600px of scroll, by which point the
   topbar is off-screen, so lifting the topbar costs nothing. */
.topbar { z-index: 200; }

/* Language switcher */
.sheda-lang { position: relative; display: inline-block; margin-left: 20px; }

.sheda-lang-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: 1px solid var(--white-divider);
	border-radius: 40px; padding: 4px 14px;
	color: var(--white-color); font-family: var(--accent-font);
	font-size: 14px; font-weight: 600; line-height: 1.6;
	cursor: pointer; transition: all .3s ease;
}

.sheda-lang-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }
.sheda-lang-caret { font-size: 10px; transition: transform .3s ease; }
.sheda-lang.is-open .sheda-lang-caret { transform: rotate(180deg); }

.sheda-lang-menu {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 999;
	min-width: 190px; margin: 0; padding: 8px 0; list-style: none;
	background: var(--white-color); border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0,0,0,.16);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: all .25s ease;
}

.sheda-lang.is-open .sheda-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.sheda-lang-menu button {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 8px 16px; background: none; border: 0;
	color: var(--primary-color); font-family: var(--default-font);
	font-size: 14px; text-align: left; cursor: pointer;
}

.sheda-lang-menu button:hover { background: var(--secondary-color); }
.sheda-lang-menu button.is-active { color: var(--accent-color); font-weight: 500; }

.sheda-lang-chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 20px; border-radius: 3px;
	background: var(--secondary-color); color: var(--primary-color);
	font-family: var(--accent-font); font-size: 11px; font-weight: 700;
}

.sheda-lang-menu button.is-active .sheda-lang-chip {
	background: var(--accent-color); color: var(--white-color);
}

@media (max-width: 991px) {
	.sheda-lang { margin-left: 0; }
	.sheda-lang-menu { right: auto; left: 0; }
}

/* Header: custom.css hardcodes #16330010 (dark green at ~6% alpha) for the
   sticky header border, unreachable via CSS variable. Override with an
   equivalent tint of the SHEDA palette primary color (#1C1C1E at ~6% alpha). */
header.main-header .header-sticky.hide,
header.main-header .header-sticky.active {
	border-bottom: 1px solid #1C1C1E10;
}

/* CTA band. The theme builds .cta-box around a photograph filling one half, so
   the box carries no padding of its own and hangs the phone icon 70px outside
   the content column, over that image. This band has no photograph: the copy
   sat flush against the rounded edges and overflow:hidden clipped the icon
   away entirely. Pad the box and put the icon back in the flow. */
.infobar .cta-box { padding: 50px 60px; }

.infobar .cta-content {
	display: flex; align-items: center; gap: 28px; padding: 0;
}

.infobar .cta-content .phone-icon {
	/* relative, not static: the hover wipe is an absolutely positioned :before
	   that has to stay inside the circle. */
	position: relative; transform: none;
	flex: 0 0 76px; width: 76px; height: 76px; border-width: 5px;
	/* The theme's ≤767px rule sets left: 50% to centre its absolute icon; on this
	   relative one that pushed the circle half the box width off to the right. */
	left: auto; top: auto;
}

/* 40px put the question, "Call us" and the number on three lines. */
.infobar .cta-content h3 { font-size: 30px; margin-bottom: 12px; }

@media only screen and (max-width: 991px) {
	.infobar .cta-box { padding: 40px 30px; text-align: center; }
	.infobar .cta-content { flex-direction: column; gap: 20px; }
	.infobar .cta-content h3 { font-size: 26px; }
	.infobar .cta-box .col-lg-4 { margin-top: 28px; }
}

@media only screen and (max-width: 767px) {
	.infobar .cta-box { padding: 34px 20px; }
	.infobar .cta-content h3 { font-size: 22px; }
}

/* News listings. The theme dresses .latest-post-layout2 and .page-blog-archive;
   these two views use .latest-post and .blog-archive, which no rule reaches, so
   both sections rendered with no vertical padding at all and the cards had no
   gap between rows. Values follow the theme's own archive rhythm. */
.latest-post { padding: 100px 0 50px; }

.latest-post .blog-item,
.blog-archive .blog-item { margin-bottom: 30px; }

@media only screen and (max-width: 991px) {
	.latest-post { padding: 60px 0 30px; }
}

@media only screen and (max-width: 767px) {
	.latest-post { padding: 40px 0 30px; }
}

/* Product card */
.product-item {
	height: calc(100% - 30px); display: flex; flex-direction: column;
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 12px; overflow: hidden; margin-bottom: 30px;
	transition: all .4s ease;
}

.product-item:hover { border-color: var(--accent-color); box-shadow: 0 18px 40px rgba(0,0,0,.08); transform: translateY(-4px); }

.product-item .product-image { background: var(--secondary-color); padding: 20px; }
.product-item .product-image figure { margin: 0; }
.product-item .product-image img {
	width: 100%; height: 190px; object-fit: contain;
	mix-blend-mode: multiply; transition: transform .5s ease;
}
.product-item:hover .product-image img { transform: scale(1.05); }

.product-item .product-content { flex: 1 1 auto; padding: 22px 22px 0; }

.product-category {
	display: inline-block; margin-bottom: 8px;
	font-family: var(--accent-font); font-size: 12px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--accent-color);
}

.product-item h2 { font-size: 20px; line-height: 1.35em; margin-bottom: 6px; }
.product-item h2 a { color: var(--primary-color); transition: color .3s ease; }
.product-item h2 a:hover { color: var(--accent-color); }
.product-model { font-size: 14px; margin-bottom: 0; }

.product-actions {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 22px 22px;
}

.product-detail-link {
	font-family: var(--accent-font); font-size: 15px; font-weight: 600;
	color: var(--primary-color); transition: color .3s ease;
}
.product-detail-link:hover { color: var(--accent-color); }
.product-detail-link i { margin-left: 6px; font-size: 12px; }

.btn-default.btn-sm { padding: 10px 20px; font-size: 14px; }
.product-actions .btn-default i { margin-right: 8px; }
/* The card's WhatsApp quote button: a smaller mark than the detail page's full-size button. */
.btn-default.btn-sm.btn-whatsapp i { font-size: 16px; vertical-align: -2px; }

/* Button that closes a card grid: the cards already carry a 30px bottom
   margin, so this only tops that up to a clear break. */
.section-cta { margin-top: 20px; }

/* Process ribbon */
.process-item {
	display: flex; gap: 18px; align-items: flex-start;
	padding: 24px; margin-bottom: 24px; height: calc(100% - 24px);
	background: var(--white-color); border: 1px solid var(--divider-color); border-radius: 12px;
	transition: all .4s ease;
}
.process-item:hover { border-color: var(--accent-color); }
.process-no {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-color); color: var(--white-color);
	font-family: var(--accent-font); font-weight: 700;
}
.process-item h3 { font-size: 19px; margin-bottom: 6px; }
.process-item p { margin-bottom: 0; font-size: 15px; }
/* Commitment principles band */
.principles { background: var(--primary-color); padding: 70px 0; }
.principle-item { text-align: center; }
.principle-item h3 {
	color: var(--white-color); font-size: 30px; margin-bottom: 6px;
}
.principle-item span { color: var(--accent-color); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* Home commitment band in the logo's red: a red gradient under the same hexagon
   lattice the page banners carry, an icon badge per principle that turns white
   on hover, and hairline dividers between the four on desktop. Scoped to
   .principles--brand because the About page's dark location band is .principles too. */
.principles.principles--brand {
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background-color: var(--accent-color);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72.0' viewBox='0 0 41.57 72.0'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.09' stroke-width='1.5'%3E%3Cpolygon points='0,-24.0 -20.78,-12.0 -20.78,12.0 0,24.0 20.78,12.0 20.78,-12.0'/%3E%3Cpolygon points='41.57,-24.0 20.78,-12.0 20.78,12.0 41.57,24.0 62.35,12.0 62.35,-12.0'/%3E%3Cpolygon points='0,48.0 -20.78,60.0 -20.78,84.0 0,96.0 20.78,84.0 20.78,60.0'/%3E%3Cpolygon points='41.57,48.0 20.78,60.0 20.78,84.0 41.57,96.0 62.35,84.0 62.35,60.0'/%3E%3Cpolygon points='20.78,12.0 0.0,24.0 0.0,48.0 20.78,60.0 41.57,48.0 41.57,24.0'/%3E%3Cpolygon points='20.78,-60.0 0.0,-48.0 0.0,-24.0 20.78,-12.0 41.57,-24.0 41.57,-48.0'/%3E%3Cpolygon points='20.78,84.0 0.0,96.0 0.0,120.0 20.78,132.0 41.57,120.0 41.57,96.0'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(120deg, #E8282E 0%, #DF2127 45%, #B3161B 100%);
	background-repeat: repeat, no-repeat;
	background-size: 41.57px 72px, cover;
}

.principles--brand .row {
	row-gap: 40px;
}

.principles--brand .principle-item {
	position: relative;
	padding: 0 10px;
}

.principle-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--white-color);
	font-size: 30px;
	transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.principles--brand .principle-item:hover .principle-icon {
	background: var(--white-color);
	color: var(--accent-color);
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* On red, the theme's red label would vanish. */
.principles--brand .principle-item span {
	color: rgba(255, 255, 255, .82);
}

@media only screen and (min-width: 992px) {
	/* Hairline between neighbours, centred in the 24px gutter. */
	.principles--brand .col-lg-3 + .col-lg-3 .principle-item:before {
		content: '';
		position: absolute;
		top: 12%;
		bottom: 12%;
		left: -12px;
		width: 1px;
		background: rgba(255, 255, 255, .25);
	}
}

@media only screen and (max-width: 767px) {
	.principles.principles--brand { padding: 60px 0; }
	.principle-icon { width: 64px; height: 64px; font-size: 26px; }
	.principles--brand .principle-item h3 { font-size: 24px; }
}

/* Hero without the theme's background photograph */
.hero {
	background: linear-gradient(135deg, #1C1C1E 0%, #2A1516 55%, #3A1013 100%);
	padding: 220px 0 110px;
}
.about-product-image { background: var(--secondary-color); border-radius: 16px; padding: 40px; }
.about-product-image img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* Category teaser */
/* Alternating section background */
.bg-secondary-soft { background-color: var(--secondary-color); }

/* Home "Manufacturing" band (Nine Processes Under One Roof): the client's
   hexagon-network artwork (hero/background.png, served as the 1920px
   manufacturing-bg.jpg) on white. The artwork is light, so the white process
   cards get a soft shadow to lift off the lines. */
.our-process.manufacturing-bg {
	background: var(--white-color) url("../images/hero/manufacturing-bg.jpg") center center / cover no-repeat;
}

.manufacturing-bg .process-item {
	box-shadow: 0 10px 30px rgba(28, 28, 30, .05);
}

/* Focus and reason cards */
.focus-item {
	height: calc(100% - 30px); margin-bottom: 30px; padding: 30px;
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 12px; transition: all .4s ease;
}
.focus-item:hover { border-color: var(--accent-color); box-shadow: 0 18px 40px rgba(0,0,0,.06); }
.focus-item h3 { font-size: 20px; margin-bottom: 10px; }
.focus-item p { margin-bottom: 0; font-size: 15px; }

/* Section headings inside the dark principles band */
.principles .section-title h2 { color: var(--white-color); }
.principles .section-title h3 { color: var(--accent-color); }
.principles-lead { max-width: 860px; margin: 0 auto 16px; color: #B8B8BC; }
.principles-lead:last-child { margin-bottom: 0; }
.principles-lead strong { color: var(--white-color); }
.principles-names {
	margin: 8px 0 24px; color: var(--accent-color);
	font-family: var(--accent-font); font-size: 26px; font-weight: 700;
}

/* ============================================================
   About page, laid out after synkrona.co.id/company
   ============================================================ */

/* Banner tagline under the page title. The banner is left-aligned. */
.page-header-lead {
	max-width: 720px; margin: 0 0 18px;
	color: rgba(255, 255, 255, .82); font-size: 20px; line-height: 1.5em;
}
@media only screen and (max-width: 767px) {
	.page-header-lead { font-size: 16px; }
}

.about-company,
.about-statement,
.about-values,
.about-split { padding: 100px 0; }

/* Statements: a photograph beside a quoted line, alternating sides. */
.about-statement-image img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 20px; background: var(--white-color);
}
.about-statement-body { padding-left: 30px; }
.about-statement--reverse .about-statement-body { padding-left: 0; padding-right: 30px; }
.about-statement-body .section-title { text-align: left; margin-bottom: 20px; }
.about-statement-quote {
	position: relative; margin: 0 0 24px; padding: 6px 0 6px 28px;
	border-left: 4px solid var(--accent-color);
}
.about-statement-quote i {
	position: absolute; top: -18px; left: 28px;
	color: var(--accent-color); font-size: 22px; opacity: .25;
}
.about-statement-quote p {
	margin: 0; color: var(--primary-color);
	font-family: var(--accent-font); font-size: 24px; font-weight: 700; line-height: 1.4em;
}
.about-statement-by {
	margin: 0; color: var(--accent-color);
	font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.about-statement .principles-names { margin: 0 0 16px; font-size: 22px; }

@media only screen and (max-width: 991px) {
	.about-statement-body,
	.about-statement--reverse .about-statement-body { padding: 30px 0 0; }
	/* Keep the photograph above the text on both statements. */
	.about-statement--reverse .row { flex-direction: column-reverse; }
	.about-statement--reverse .about-statement-body { padding: 30px 0 0; }
	.about-statement-quote p { font-size: 20px; }
}

/* Values: icon boxes. */
.value-item {
	display: flex; gap: 20px; align-items: flex-start;
	height: calc(100% - 30px); margin-bottom: 30px; padding: 30px;
	background: var(--white-color); border: 1px solid var(--divider-color);
	border-radius: 12px; transition: all .4s ease;
}
.value-item:hover { border-color: var(--accent-color); box-shadow: 0 18px 40px rgba(0,0,0,.06); }
.value-icon {
	flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-color); color: var(--white-color); font-size: 22px;
}
.value-item h3 { font-size: 20px; margin-bottom: 10px; }
.value-item p { margin-bottom: 0; font-size: 15px; }

/* Split sections: heading on the left, copy on the right. */
.about-split .section-title { text-align: left; }
.about-process-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
	margin: 0 0 24px; padding: 0; list-style: none;
}
.about-process-list li {
	display: flex; gap: 12px; align-items: center;
	padding: 12px 16px; background: var(--white-color);
	border: 1px solid var(--divider-color); border-radius: 12px;
	color: var(--primary-color); font-weight: 600;
}
.about-process-list .process-no { width: 36px; height: 36px; font-size: 14px; }

@media only screen and (max-width: 991px) {
	.about-company,
	.about-statement,
	.about-values,
	.about-split { padding: 60px 0; }
}

/* About page closing call to action. It reuses the theme's .about-us band, whose
   .section-title is left-aligned, so the heading sat left over a centred body.
   Same specificity as custom.css, later source order. */
.about-closing .section-title {
	text-align: center;
}

/* ============================================================
   Factory photographs (public/assets/images/facility)
   ============================================================ */

/* A photograph banner. The inline style sets a single background layer, so the
   lattice's two-layer size and repeat above must be reset or the photo tiles
   at 41.57px. The existing .page-header:before overlay keeps the title legible. */
.page-header.page-header--photo {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* The red banner on the News and Products pages: the logo's red under the same
   hexagon lattice as the dark panel. The dark panel's overlay would turn the red
   to maroon, so only a light top shade stays, for the background-less topbar. */
.page-header.page-header--red {
	background-color: var(--accent-color);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72.0' viewBox='0 0 41.57 72.0'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.09' stroke-width='1.5'%3E%3Cpolygon points='0,-24.0 -20.78,-12.0 -20.78,12.0 0,24.0 20.78,12.0 20.78,-12.0'/%3E%3Cpolygon points='41.57,-24.0 20.78,-12.0 20.78,12.0 41.57,24.0 62.35,12.0 62.35,-12.0'/%3E%3Cpolygon points='0,48.0 -20.78,60.0 -20.78,84.0 0,96.0 20.78,84.0 20.78,60.0'/%3E%3Cpolygon points='41.57,48.0 20.78,60.0 20.78,84.0 41.57,96.0 62.35,84.0 62.35,60.0'/%3E%3Cpolygon points='20.78,12.0 0.0,24.0 0.0,48.0 20.78,60.0 41.57,48.0 41.57,24.0'/%3E%3Cpolygon points='20.78,-60.0 0.0,-48.0 0.0,-24.0 20.78,-12.0 41.57,-24.0 41.57,-48.0'/%3E%3Cpolygon points='20.78,84.0 0.0,96.0 0.0,120.0 20.78,132.0 41.57,120.0 41.57,96.0'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(120deg, #E8282E 0%, #DF2127 45%, #B3161B 100%);
	background-repeat: repeat, no-repeat;
	background-position: center center, center center;
	background-size: 41.57px 72px, cover;
}

.page-header.page-header--red:before {
	background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, 0) 170px);
}

/* The topbar's red email and phone icons vanish on the red banner beneath it. */
.site-chrome:has(~ .page-header--red) .topbar-contact-info ul li a i {
	color: var(--white-color);
}

/* Unlike .about-product-image, no plate and no multiply blend: these are
   photographs, not cut-out products. */
.facility-photo { border-radius: 16px; overflow: hidden; }
.facility-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.facility-gallery-section { padding: 100px 0 70px; }
.facility-gallery {
	display: grid; gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.facility-gallery-item {
	margin: 0; overflow: hidden; border-radius: 16px;
	background: var(--white-color); border: 1px solid var(--divider-color);
}
.facility-gallery-item img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .5s ease;
}
.facility-gallery-item:hover img { transform: scale(1.04); }
.facility-gallery-item figcaption {
	padding: 16px 20px; color: var(--primary-color); font-weight: 600;
}
.facility-gallery-item figcaption span {
	display: block; margin-bottom: 4px; color: var(--accent-color);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
	.facility-gallery-section { padding: 60px 0 40px; }
	.facility-gallery { grid-template-columns: 1fr; }
}

/* Product archive */
.product-archive { padding: 100px 0; }

.product-toolbar { margin-bottom: 24px; }

.product-count {
	margin-bottom: 0; font-family: var(--accent-font);
	font-size: 18px; font-weight: 600; color: var(--primary-color);
}

/* Search field: a single pill that holds the icon, the input, an optional
   clear cross and the submit button, so it reads as one control next to the
   filter pills rather than as a loose form. */
.product-search {
	display: flex; align-items: center; gap: 10px;
	max-width: 460px; margin-left: auto;
	padding: 5px 5px 5px 18px;
	background: var(--white-color);
	border: 1px solid var(--divider-color); border-radius: 40px;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.product-search:focus-within {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(223, 33, 39, .10);
}

.product-search-icon { flex: 0 0 auto; font-size: 14px; color: var(--text-color); }

.product-search input {
	flex: 1 1 auto; min-width: 0;
	padding: 9px 0; border: 0; background: none; outline: none;
	font-family: var(--default-font); font-size: 15px; color: var(--primary-color);
}

.product-search input::placeholder { color: #9A9AA0; }

/* The browser's own clear cross would sit beside ours and is unstyleable. */
.product-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.product-search-clear {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--secondary-color); color: var(--text-color);
	font-size: 12px; transition: all .3s ease;
}

.product-search-clear:hover { background: var(--accent-color); color: var(--white-color); }

.product-search .btn-default.btn-sm { flex: 0 0 auto; }

.product-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }

.filter-pill {
	display: inline-block; padding: 8px 20px; border-radius: 40px;
	border: 1px solid var(--divider-color); background: var(--white-color);
	font-family: var(--accent-font); font-size: 15px; font-weight: 600;
	color: var(--primary-color); transition: all .3s ease;
}

.filter-pill:hover { border-color: var(--accent-color); color: var(--accent-color); }

.filter-pill.is-active {
	background: var(--accent-color); border-color: var(--accent-color);
	color: var(--white-color);
}

.category-intro { max-width: 860px; margin-bottom: 40px; }
.product-empty { padding: 60px 0; text-align: center; }

/* The theme never gives a bare <a> a colour, so body-copy links fall back to
   the browser blue. These two are the only ones on the archive. */
.product-empty a { color: var(--accent-color); text-decoration: underline; }
.product-empty a:hover { color: var(--accent-dark); }

@media (max-width: 991px) {
	.product-search { max-width: none; margin: 20px 0 0; }
	.product-archive { padding: 70px 0; }
}

/* Product detail */
.product-single { padding: 100px 0; }

.product-single-image {
	background: var(--secondary-color); border-radius: 16px; padding: 50px;
}
.product-single-image img { width: 100%; height: auto; mix-blend-mode: multiply; }

.product-single-content h2 { font-size: 38px; margin-bottom: 12px; }
.product-single-model { font-family: var(--accent-font); font-weight: 600; color: var(--primary-color); }
.product-single-summary { font-size: 18px; color: var(--primary-color); margin-bottom: 24px; }

.product-block-title {
	font-size: 20px; margin: 32px 0 14px; padding-bottom: 10px;
	border-bottom: 1px solid var(--divider-color);
}

.product-feature-list { list-style: none; margin: 0 0 8px; padding: 0; }
.product-feature-list li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.product-feature-list li::before {
	content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
	position: absolute; left: 0; top: 2px; font-size: 13px; color: var(--accent-color);
}

.product-spec-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.product-spec-table th,
.product-spec-table td { padding: 12px 0; border-bottom: 1px solid var(--divider-color); font-size: 15px; }
.product-spec-table th {
	width: 42%; text-align: left; font-family: var(--accent-font);
	font-weight: 600; color: var(--primary-color);
}

.product-single-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.product-single-actions .btn-default i { margin-right: 10px; }

/* WhatsApp direct message: WhatsApp green with its mark, so a visitor knows the
   button opens a chat before pressing it. The theme's hover sweep
   (.btn-default:after) runs in WhatsApp's darker teal instead of charcoal. */
.btn-default.btn-whatsapp { background: #25D366; border-color: #25D366; }
.btn-default.btn-whatsapp:after { background-color: #128C7E; }
.btn-default.btn-whatsapp i { font-size: 18px; vertical-align: -2px; }

/* Three service points under the photograph. */
.product-assurance {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
	margin: 16px 0 0; padding: 0; list-style: none;
}
.product-assurance li {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 16px 10px; border: 1px solid var(--divider-color); border-radius: 12px;
	text-align: center; color: var(--primary-color);
	font-family: var(--accent-font); font-size: 14px; font-weight: 600; line-height: 1.3;
}
.product-assurance i { color: var(--accent-color); font-size: 20px; }

/* Category pill and model number above the name. */
.product-single-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.product-single-tags .product-category {
	padding: 4px 12px; border-radius: 30px; background: rgba(223, 33, 39, .08);
	color: var(--accent-color); font-size: 13px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; transition: background .3s ease, color .3s ease;
}
.product-single-tags .product-category:hover { background: var(--accent-color); color: var(--white-color); }
.product-single-tags .product-single-model { margin: 0; font-size: 15px; }

/* The first specification rows, as quick facts beside the photograph. */
.product-highlights {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
	margin: 0; padding: 0; list-style: none;
}
.product-highlights li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 12px 14px; border-radius: 10px; background: var(--secondary-color);
}
.product-highlights span { color: var(--text-color); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.product-highlights strong { color: var(--primary-color); font-family: var(--accent-font); font-size: 16px; }

.product-single-note { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; color: var(--text-color); font-size: 14px; }
.product-single-note i { color: var(--accent-color); }

.product-single-share { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--divider-color); }

/* Overview, specification and OEM options as cards below the fold. */
.product-details { padding: 0 0 100px; }
.product-detail-card {
	margin-bottom: 30px; padding: 32px;
	border: 1px solid var(--divider-color); border-radius: 18px; background: var(--white-color);
}
.product-detail-card .product-block-title:first-child { margin-top: 0; }
.product-detail-card--oem { border-color: transparent; background: var(--secondary-color); }
/* Its own class: .product-detail-link is the product card's "View Detail" link. */
.product-oem-link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
	color: var(--accent-color); font-family: var(--accent-font); font-weight: 700; transition: color .3s ease;
}
.product-oem-link i { font-size: 12px; transition: transform .3s ease; }
.product-oem-link:hover { color: var(--primary-color); }
.product-oem-link:hover i { transform: translateX(4px); }

@media (max-width: 991px) {
	.product-single { padding: 70px 0; }
	.product-single-image { padding: 30px; }
	.product-single-media { margin-bottom: 40px; }
	.product-single-content h2 { font-size: 30px; }
	.product-details { padding: 0 0 70px; }
	.product-detail-card { padding: 26px 22px; }
}

@media (max-width: 575px) {
	.product-assurance { grid-template-columns: 1fr; }
	.product-assurance li { flex-direction: row; justify-content: flex-start; text-align: left; }
	.product-highlights { grid-template-columns: 1fr; }
	.product-single-actions .btn-default { width: 100%; text-align: center; }
}

/* News */
.blog-archive, .post-single { padding: 100px 0; }

.post-placeholder-flag {
	display: inline-block; margin-bottom: 10px; padding: 3px 10px;
	border-radius: 3px; background: #FFF4E5; color: #8A5300;
	font-family: var(--accent-font); font-size: 12px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
}

.post-placeholder-notice {
	padding: 16px 20px; margin-bottom: 30px;
	border-left: 4px solid #E5A000; background: #FFF8EC; color: #6B4A00;
	font-size: 15px;
}

.post-entry p { margin-bottom: 20px; }

@media (max-width: 991px) {
	.blog-archive, .post-single { padding: 70px 0; }
}

/* Contact form */
/* Contact cards: minimal white cards with a tinted icon badge that fills red on
   hover, and the card's action pinned to the bottom so the four line up. */
.contact-card {
	display: flex;
	flex-direction: column;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 32px 28px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 20px 45px rgba(28, 28, 30, .08);
}

.contact-card-icon {
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(223, 33, 39, .08);
	color: var(--accent-color);
	font-size: 22px;
	transition: background .35s ease, color .35s ease;
}

.contact-card:hover .contact-card-icon {
	background: var(--accent-color);
	color: var(--white-color);
}

.contact-card h3 {
	margin: 0 0 10px;
	font-size: 20px;
}

.contact-card p {
	margin: 0;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.contact-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 700;
	transition: color .3s ease;
}

.contact-card-link i {
	font-size: 12px;
	transition: transform .3s ease;
}

.contact-card-link:hover,
.contact-card-link:focus-visible {
	color: var(--accent-color);
}

.contact-card-link:hover i {
	transform: translateX(4px);
}

/* Map and form, side by side. The theme's .google-map-form stretched the map
   under the whole section and floated the form over it; these two cards replace
   that, so the map is never covered. Equal heights on desktop, stacked on phones. */
.contact-map-form {
	padding: 10px 0 70px;
}

.contact-map-card,
.contact-form-box {
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	border-radius: 20px;
}

.contact-map-card {
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
}

.contact-form-box {
	background: var(--secondary-color);
}

.contact-map-card .section-title,
.contact-form-box .section-title {
	margin-bottom: 24px;
	text-align: left;
}

.contact-map {
	flex: 1 1 auto;
	min-height: 320px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--secondary-color);
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.contact-map-details {
	display: grid;
	gap: 12px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.contact-map-details li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.6;
}

.contact-map-details i {
	flex: 0 0 20px;
	margin-top: 4px;
	color: var(--accent-color);
	text-align: center;
}

.contact-map-directions {
	align-self: flex-start;
}

/* The theme's form fields are grey on its white box; on the grey box they need white. */
.contact-form-box .contact-form .form-control {
	background: var(--white-color);
}

@media only screen and (max-width: 991px) {
	.contact-map-form { padding: 0 0 40px; }

	.contact-map-card,
	.contact-form-box {
		height: auto;
		padding: 30px 24px;
	}

	.contact-map,
	.contact-map iframe { min-height: 300px; }
}

@media only screen and (max-width: 575px) {
	.contact-map-card,
	.contact-form-box { padding: 24px 18px; }
}

.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error { display: block; margin-top: 6px; font-size: 13px; color: var(--error-color); }
.form-control.is-invalid { border-color: var(--error-color); }

.form-status {
	padding: 14px 18px; margin-bottom: 24px; border-radius: 8px; font-size: 15px;
}
.form-status.is-success { background: #EAF7EE; border-left: 4px solid #2E7D32; color: #1B5E20; }
.form-status.is-error { background: #FDECEC; border-left: 4px solid var(--accent-color); color: #7A1416; }

/* 404 */
.error-page { padding: 110px 0; }
.error-code {
	font-size: 110px; line-height: 1; color: var(--accent-color); margin-bottom: 10px;
}
.error-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }

/* ============================================================
   Page title banner
   ------------------------------------------------------------
   custom.css:3823 points .page-header at ../images/header-banner.jpg,
   which was never vendored with this theme, and custom.css:3836 paints
   .page-header:before with a hardcoded Solor green gradient
   (rgba(22,51,0,.65) -> rgba(22,51,0,0)) that no brand variable reaches.
   Left alone, every non-homepage banner is a green wash over nothing,
   fading to white-on-white at the right-hand edge.

   Spec 6.4 sets the fallback order for missing photography: product
   photographs, then geometric panels using the logo's hexagon motif,
   then no image. A title banner is chrome rather than content, so this
   is a dark brand panel carrying a faint hexagon lattice. No photograph
   is invented.

   The .parallaxie class was dropped from the banner component: the
   plugin force-sets background-size:cover / background-repeat:no-repeat
   / background-attachment:fixed on the element, which would stretch the
   lattice tile to the full panel.
   ============================================================ */

.page-header,
.post-panel {
	background-color: var(--primary-color);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72.0' viewBox='0 0 41.57 72.0'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='1.5'%3E%3Cpolygon points='0,-24.0 -20.78,-12.0 -20.78,12.0 0,24.0 20.78,12.0 20.78,-12.0'/%3E%3Cpolygon points='41.57,-24.0 20.78,-12.0 20.78,12.0 41.57,24.0 62.35,12.0 62.35,-12.0'/%3E%3Cpolygon points='0,48.0 -20.78,60.0 -20.78,84.0 0,96.0 20.78,84.0 20.78,60.0'/%3E%3Cpolygon points='41.57,48.0 20.78,60.0 20.78,84.0 41.57,96.0 62.35,84.0 62.35,60.0'/%3E%3Cpolygon points='20.78,12.0 0.0,24.0 0.0,48.0 20.78,60.0 41.57,48.0 41.57,24.0'/%3E%3Cpolygon points='20.78,-60.0 0.0,-48.0 0.0,-24.0 20.78,-12.0 41.57,-24.0 41.57,-48.0'/%3E%3Cpolygon points='20.78,84.0 0.0,96.0 0.0,120.0 20.78,132.0 41.57,120.0 41.57,96.0'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(115deg, #1C1C1E 0%, #241416 58%, #2E1113 100%);
	background-repeat: repeat, no-repeat;
	background-position: center center, center center;
	background-size: 41.57px 72px, cover;
}

/* Dark the whole width, not only the left third. */
.page-header:before {
	background: linear-gradient(90deg, var(--overlay-color) 0%, rgba(28, 28, 30, 0.40) 100%);
}

/* custom.css sets 70px, which overflows the panel on long product names
   ("Double Flexible Head Ratchet Wrench") and 54-character article titles.
   The steps below follow the theme's own breakpoints so they land on top of
   its existing mobile rules (56px at 991, 30px at 767) rather than beside
   them. Vertical padding is left to custom.css. */
.page-header-box h1 {
	font-size: 54px;
	line-height: 1.15em;
	overflow-wrap: break-word;
}

@media only screen and (max-width: 1199px) {
	.page-header-box h1 { font-size: 46px; }
}

@media only screen and (max-width: 991px) {
	.page-header-box h1 { font-size: 40px; }
}

@media only screen and (max-width: 767px) {
	.page-header-box h1 { font-size: 28px; }
}

/* ===================================================================
   Post-launch visual corrections. Everything below fixes a defect that
   was visible in a browser but invisible to the test suite.
   =================================================================== */

/* The hero overlay was still the theme's dark green. custom.css:726 and its
   responsive twin both paint rgba(22,51,0,...) over .hero; neither is reachable
   through a CSS variable. Equal specificity, later source order, so this wins
   both — including inside custom.css's own media queries. */
.hero:before {
	background: linear-gradient(90deg, var(--overlay-color) 0%, rgba(28, 28, 30, 0.35) 100%);
	/* The theme puts this overlay at z-index 1, above any hero content that does not
	   explicitly opt higher. That was painting it over the product photograph and
	   dragging the light plate down to a muddy grey. It belongs behind the content. */
	z-index: 0;
}

/* The eyebrow spark before every section heading is a green SVG file
   (icon-sub-heading.svg carries fill="#89EA5F" baked in). The theme's images are
   vendored and never edited, so this is our own brand-red twin, inlined. */
.section-title h3:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15' fill='none'%3E%3Cpath d='M9.31089 0.354606C8.19663 -0.362064 7.30043 0.0341333 6.87132 1.30317L5.98148 4.20451C5.89538 4.4815 6.023 4.70612 6.26666 4.70612H8.7216C9.48804 4.70612 10.0757 5.6425 9.46564 6.40326L5.39173 11.3161C5.20348 11.5509 4.91783 11.458 5.00146 11.1891L5.9407 7.46335C6.02694 7.1863 5.89919 6.96174 5.65559 6.96174H3.95078C2.98352 6.96174 2.73357 6.24803 2.93439 5.50875L4.05687 1.2578C4.2508 0.523424 3.53082 -0.166792 2.88612 0.228127C1.15571 1.28802 0 3.20466 0 5.39317C0 9.98203 3.73772 10.8403 3.01641 15C6.22956 13.6795 12 10.1141 12 5.39317C11.9999 3.289 10.9493 1.40844 9.31089 0.354606Z' fill='%23DF2127'/%3E%3C/svg%3E");
}

/* ── Site chrome: topbar + header over the first section ───────────────────
   The theme pulled .hero and .page-header up under the chrome with a fixed
   margin-top: -162px. The chrome is not a fixed height (the stacked logo made
   it ~185px on desktop, and it is shorter on phones), so the section stopped
   short of the top and left a white strip behind the topbar, which only its dark
   background hid. The chrome now sits absolutely over the section instead, so
   there is no gap at any width, and the section's padding-top clears it.

   Every view in this site opens with the hero or a page banner (errors
   included), so the topbar always has a dark photograph or panel behind it. */
.site-chrome {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Above the hero slider's layers (0-3), which share the root stacking context. */
	z-index: 100;
}

.hero,
.page-header {
	margin-top: 0;
}

/* Chrome height plus the gap below it: ~130px + ~60px on desktop for the hero,
   with a larger gap for the banner; ~98px + ~60px on phones. Change these
   together with the header padding and logo height. */
.hero { padding-top: 191px; }
.page-header { padding-top: 226px; }

@media only screen and (max-width: 991px) {
	.hero,
	.page-header { padding-top: 160px; }
}

/* No background: the topbar shows the section behind it. A top shade on the
   section and a soft text shadow keep the white text legible over a light sky. */
.topbar {
	background: transparent;
}

.page-header:before {
	background:
		linear-gradient(180deg, rgba(28, 28, 30, .6) 0, rgba(28, 28, 30, 0) 170px),
		linear-gradient(90deg, var(--overlay-color) 0%, rgba(28, 28, 30, 0.40) 100%);
}

.topbar-contact-info ul li a {
	color: var(--white-color);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	transition: color .3s ease;
}

.topbar-contact-info ul li a:hover {
	color: var(--accent-color);
}

.topbar-contact-info ul li a i {
	color: var(--accent-color);
}

.topbar .sheda-lang-toggle {
	border-color: rgba(255, 255, 255, .5);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Phones: one tidy row, contacts left and the language switcher right. The theme
   stacks the two columns below 768px, centring the contacts on one row and
   leaving the switcher alone on a second.

   Checking this in headless Chrome/Edge: --window-size below ~500px is clamped
   (a 390px window renders a 504px viewport and crops it), which looks like the
   page overflowing. Load the page in a 390px-wide iframe to see a real phone
   width. */
@media only screen and (max-width: 767px) {
	.topbar { padding: 8px 0; }

	.topbar .row { flex-wrap: nowrap; }
	.topbar .row > .col-md-8 { flex: 1 1 auto; width: auto; min-width: 0; }
	.topbar .row > .col-md-4 { flex: 0 0 auto; width: auto; }

	.topbar-contact-info { padding-left: 0; }
	.topbar-contact-info ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 14px;
		text-align: left;
	}
	.topbar-contact-info ul li {
		margin-right: 0;
		font-size: 13px;
		white-space: nowrap;
	}
	.topbar-contact-info ul li i { margin-right: 4px; }

	.topbar .sheda-lang { margin-left: 0; }
}

/* Phone menu (slicknav): the theme draws its links charcoal on the red panel,
   even on hover. White text and arrows, with a light wash on the touched row. */
.slicknav_nav .slicknav_row,
.slicknav_nav li a,
.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover {
	color: var(--white-color);
}

.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:focus-visible {
	background-color: rgba(255, 255, 255, .16);
}

.slicknav_nav ul {
	margin: 0 0 0 12px;
}

/* The menu button's three bars: white on the red button, not the theme's charcoal. */
.slicknav_icon .slicknav_icon-bar {
	background-color: var(--white-color);
}

/* Phones: the switcher sits at the right edge of the topbar, but the rule for
   ≤991px opened its menu from the button's left, so the 190px panel ran off the
   screen. Open it from the right. When the email and phone wrap onto two lines,
   keep the button level with the first line rather than floating between them. */
@media only screen and (max-width: 767px) {
	.topbar .row { align-items: flex-start !important; }
	.topbar .sheda-lang-menu { left: auto; right: 0; }
}

/* Narrow phones: the globe alone. The label stays in the button for screen readers. */
@media only screen and (max-width: 575px) {
	.topbar .sheda-lang-toggle { gap: 6px; padding: 4px 10px; }
	.topbar .sheda-lang-current {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* logo.png is the hexagon wrench mark from logo-new.jpeg: square, no wordmark,
   so the bar's height alone sets its size. */
.navbar-brand img {
	max-height: 52px;
	width: auto;
}

/* The logo is the tallest thing in the bar (the search button is 44px), so
   the bar's height is the logo plus this padding. The theme's 25px top and bottom
   made the white menu box ~122px; these trim it to ~68px on desktop and ~56px on
   phones. Same selectors as custom.css so these win on source order. */
header.main-header .header-sticky {
	padding: 8px 15px;
}

header.main-header .header-sticky.hide,
header.main-header .header-sticky.active {
	padding: 6px 0;
}

@media only screen and (max-width: 991px) {
	.navbar-brand img { max-height: 44px; }

	header.main-header .header-sticky,
	header.main-header .header-sticky.hide,
	header.main-header .header-sticky.active {
		padding: 6px 0;
	}
}

/* "About Us" was breaking onto two lines. */
.main-menu ul li a,
.sheda-lang-toggle {
	white-space: nowrap;
}

/* Products dropdown: the theme sets its links charcoal on the red panel, which
   barely reads, and only turns them white on hover. White throughout, with a
   light wash on hover and keyboard focus so the row under the pointer still
   stands out. Same selectors as custom.css so these win on source order. */
.main-menu ul ul li a,
.main-menu ul ul li a:focus {
	display: block;
	color: var(--white-color);
	transition: background-color .2s ease;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus-visible {
	color: var(--white-color);
	background-color: rgba(255, 255, 255, .16);
}

/* The theme fixes the dropdown at 200px, and the menu links above are
   nowrap, so a longer category name ("Double Open End Wrenches") ran out past
   the panel's right edge. The panel now takes its longest item's width, and
   never less than the theme's 200px. */
.main-menu ul ul {
	width: max-content;
	min-width: 200px;
}

.main-menu ul ul li a,
.main-menu ul ul li a:focus {
	padding: 6px 24px !important;
}

/* ── Header product search ─────────────────────────────────────────────────
   In the slot the Get a Quote button held: a round magnifier that opens a
   compact search form under the header. It submits ?q= to the products archive,
   the same search the archive's own form runs. */
.header-search {
	position: relative;
	margin-left: 10px;
}

.header-search-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 16px;
	cursor: pointer;
	transition: background .3s ease;
}

.header-search-toggle:hover,
.header-search-toggle:focus-visible,
.header-search.is-open .header-search-toggle {
	background: var(--primary-color);
}

/* Open, the magnifier becomes a close cross (Font Awesome xmark). */
.header-search.is-open .header-search-toggle i:before {
	content: "\f00d";
}

.header-search-panel {
	position: absolute;
	top: calc(100% + 18px);
	right: 0;
	z-index: 20;
	width: 440px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 18px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	box-shadow: 0 18px 40px rgba(28, 28, 30, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.header-search.is-open .header-search-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-search-panel:focus-within {
	border-color: var(--accent-color);
}

.header-search-panel > i {
	flex: 0 0 auto;
	color: var(--text-color);
	font-size: 14px;
}

.header-search-panel input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	outline: none;
	background: none;
	color: var(--primary-color);
	font-family: var(--default-font);
	font-size: 15px;
}

.header-search-panel input::placeholder {
	color: #9A9AA0;
}

.header-search-panel input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.header-search-panel .btn-default {
	flex: 0 0 auto;
}

/* Phones and tablets: the magnifier sits beside the slicknav menu button, and the
   form spans the header's width instead of hanging off the button. */
@media only screen and (max-width: 991px) {
	header.main-header .navbar > .container {
		position: relative;
	}

	.header-search {
		position: static;
		margin-left: auto;
		margin-right: 10px;
	}

	.header-search-toggle {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.header-search-panel {
		top: calc(100% + 14px);
		left: 12px;
		right: 12px;
		width: auto;
	}
}

/* ── Home hero photo slider ────────────────────────────────────────────────
   The factory photographs fade behind a fixed block of copy. Stacking, bottom
   up: the slider (0), the .hero:before overlay lifted to 1 so it darkens the
   photographs, the copy (2), then the caption and controls (3). The controls
   sit outside the .swiper element because its z-index makes a stacking
   context that the overlay would otherwise cover. */
.hero.hero--slider {
	background: var(--primary-color);
	padding-bottom: 150px;
}

.hero-bg-slider {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-bg-slider .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero--slider:before {
	z-index: 1;
	/* Darkest behind the copy on the left, along the bottom for the caption, and a
	   top shade for the background-less topbar. */
	background:
		linear-gradient(180deg, rgba(28, 28, 30, .6) 0, rgba(28, 28, 30, 0) 170px),
		linear-gradient(0deg, rgba(28, 28, 30, .75) 0%, rgba(28, 28, 30, 0) 38%),
		linear-gradient(90deg, rgba(28, 28, 30, .9) 0%, rgba(28, 28, 30, .6) 55%, rgba(28, 28, 30, .25) 100%);
}

.hero.hero--slider > .container {
	position: relative;
	z-index: 2;
}

.hero-slider-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 36px;
	z-index: 3;
}

.hero-slider-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.hero-slide-caption {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: 15px;
}

.hero-slide-label {
	margin-right: 10px;
	color: var(--accent-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hero-slider-nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hero-slider-prev,
.hero-slider-next {
	/* Fixed, never shrunk: without flex: none the pagination between them
	   squeezed their width while the height held, drawing them as ovals. */
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: transparent;
	color: var(--white-color);
	transition: all .3s ease;
}

.hero-slider-prev:hover,
.hero-slider-next:hover,
.hero-slider-prev:focus-visible,
.hero-slider-next:focus-visible {
	background: var(--accent-color);
	border-color: var(--accent-color);
}

/* swiper-bundle.min.css gives .swiper-pagination-bullets.swiper-pagination-horizontal
   width: 100%, which made this flex item claim the whole row and crush the
   buttons either side. Two classes plus the one Swiper adds outrank it. */
.hero-slider-nav .hero-slider-pagination.swiper-pagination-horizontal,
.hero-slider-pagination {
	flex: none;
	width: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hero-slider-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 !important;
	background: var(--white-color);
	opacity: .45;
	transition: all .3s ease;
}

.hero-slider-pagination .swiper-pagination-bullet-active {
	width: 28px;
	border-radius: 6px;
	background: var(--accent-color);
	opacity: 1;
}

@media only screen and (max-width: 767px) {
	.hero.hero--slider { padding-bottom: 170px; }
	.hero-slider-controls { bottom: 24px; }
	.hero-slide-caption { font-size: 13px; }
	.hero-slider-prev,
	.hero-slider-next { width: 38px; height: 38px; }
}

/* ── Floating controls ─────────────────────────────────────────────────────
   One column in the right corner: WhatsApp on top, back to top directly below
   it. Each is positioned independently rather than sharing a flex parent, so
   the corner never shifts when the lower button fades in. Both sit under the
   preloader (z-index 1000) so they cannot flash over the intro, and under the
   magic cursor (z-index 1000000) so the dot still draws on top. */

/* ── WhatsApp, upper slot ────────────────────────────────────────────── */
.whatsapp-float {
	position: fixed;
	right: 30px;
	/* Clears the 48px button below it plus a 14px gap. */
	bottom: 92px;
	z-index: 995;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* WhatsApp's own green. The brand mark is only recognisable in it, so this
	   is one of the few places the SHEDA palette gives way. */
	background: #25D366;
	color: var(--white-color);
	box-shadow: 0 10px 26px rgba(37, 211, 102, .34);
	transition: transform .3s ease, box-shadow .3s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
	color: var(--white-color);
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(37, 211, 102, .46);
}

.whatsapp-float:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 4px;
}

.whatsapp-float i {
	font-size: 28px;
	line-height: 1;
}

/* The label unrolls to the left of the circle, so the corner stays a single
   disc at rest and still says what it does on approach. */
.whatsapp-float-label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	white-space: nowrap;
	background: var(--primary-color);
	color: var(--white-color);
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 7px 14px;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(28, 28, 30, .22);
	opacity: 0;
	transform: translate(8px, -50%);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label {
	opacity: 1;
	transform: translate(0, -50%);
}

/* ── Back to top, corner slot ──────────────────────────────────────────── */
.scroll-top {
	position: fixed;
	/* 4px further in than the WhatsApp button, which is 8px wider, so the two
	   discs share one vertical centre line. */
	right: 34px;
	bottom: 30px;
	z-index: 995;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(28, 28, 30, .26);
	cursor: pointer;
	/* visibility (not display) keeps the button out of the tab order while
	   hidden and still lets the entrance transition run. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(16px) scale(.85);
	transition: opacity .3s ease, transform .3s ease, visibility .3s,
	            background-color .3s ease;
}

.scroll-top.is-visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0) scale(1);
}

.scroll-top:hover,
.scroll-top:focus-visible {
	background: var(--accent-color);
	transform: translateY(-4px) scale(1);
}

.scroll-top:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 4px;
}

.scroll-top:active {
	transform: translateY(0) scale(.94);
}

.scroll-top i {
	font-size: 14px;
	line-height: 1;
	transition: transform .3s ease;
}

.scroll-top:hover i {
	transform: translateY(-2px);
}

/* The ring is rotated so the progress stroke starts at twelve o'clock. */
.scroll-top-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.scroll-top-ring circle {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.scroll-top-ring-track {
	stroke: rgba(255, 255, 255, .22);
}

.scroll-top-ring-bar {
	stroke: var(--accent-color);
	/* 2 * pi * 24. The dash offset is driven from JS. */
	stroke-dasharray: 150.8;
	stroke-dashoffset: 150.8;
	transition: stroke-dashoffset .1s linear;
}

.scroll-top:hover .scroll-top-ring-bar,
.scroll-top:focus-visible .scroll-top-ring-bar {
	stroke: var(--white-color);
}

/* The button parks focus at the top of the document; the programmatic target
   should not paint a focus ring the reader never asked for. */
header.main-header[tabindex="-1"]:focus {
	outline: none;
}

@media only screen and (max-width: 767px) {
	.whatsapp-float {
		right: 16px;
		/* Clears the 42px button below it plus a 10px gap. */
		bottom: 68px;
		width: 50px;
		height: 50px;
	}

	.whatsapp-float i {
		font-size: 25px;
	}

	/* Touch has no hover, so the label would only ever appear mid-tap. */
	.whatsapp-float-label {
		display: none;
	}

	.scroll-top {
		right: 20px;
		bottom: 16px;
		width: 42px;
		height: 42px;
	}

	.scroll-top i {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-float,
	.whatsapp-float-label,
	.scroll-top,
	.scroll-top i,
	.scroll-top-ring-bar {
		transition: none;
	}
}

/* ── News panel ────────────────────────────────────────────────────────────
   The geometric fallback for an article with no photograph. It shares the page
   banner's hexagon lattice above, and carries the wordmark in :before so the
   lattice declaration is not repeated with a second background layer. */
.post-panel {
	position: relative;
	width: 100%;
	/* The theme sizes .post-featured-image img, which this div replaces. */
	aspect-ratio: 1/1.18;
}

.post-panel:before {
	content: '';
	position: absolute;
	inset: 0;
	/* The logo is the square stacked lockup. The card's title box covers roughly
	   the lower 40% of the panel, so the logo is sized and lifted to sit whole
	   above it. */
	background: url("../images/logo-white.png") no-repeat center 20%;
	background-size: 40% auto;
	opacity: .92;
}

/* The article page runs the panel full width of the column, where a portrait
   box would push the text far down the page. */
.post-single .post-panel {
	aspect-ratio: 16/7;
	border-radius: 20px;
}

.post-single .post-panel:before {
	background-position: center center;
	background-size: 240px auto;
}

/* ── News cards ────────────────────────────────────────────────────────────
   Minimal: a 4:3 photograph, a quiet meta line, the title and a text link, in
   place of the theme's .blog-item with its white box laid over the image. The
   action link is pinned to the bottom so cards in a row line up. */
.news-card {
	display: flex;
	flex-direction: column;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.news-card-image {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--secondary-color);
}

.news-card-image img,
.news-card-image .post-panel {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

.news-card:hover .news-card-image img {
	transform: scale(1.05);
}

/* No photograph: the brand panel, with the logo centred in the 4:3 frame now
   that no title box covers its lower half. */
.news-card-image .post-panel:before {
	background-position: center center;
	background-size: 38% auto;
}

.news-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-top: 18px;
}

.news-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 10px;
	color: var(--text-color);
	font-size: 13px;
}

.news-card-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent-color);
}

.news-card .post-placeholder-flag {
	margin: 0;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.news-card-title {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.35;
}

.news-card-title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: var(--primary-color);
	transition: color .3s ease;
}

.news-card-title a:hover {
	color: var(--accent-color);
}

.news-card-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 700;
}

.news-card-link i {
	font-size: 12px;
	transition: transform .3s ease;
}

.news-card-link:hover {
	color: var(--primary-color);
}

.news-card-link:hover i {
	transform: translateX(4px);
}

/* ── News article page ─────────────────────────────────────────────────────
   The article on the left (meta line, photograph, lead, body, share row and
   previous/next), a sticky sidebar on the right (share, other news, contact). */
.news-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-bottom: 22px;
	color: var(--text-color);
	font-size: 14px;
}

.news-article-meta i {
	margin-right: 7px;
	color: var(--accent-color);
}

.news-article-category {
	padding: 5px 14px;
	border-radius: 30px;
	background: rgba(223, 33, 39, .08);
	color: var(--accent-color);
	font-weight: 600;
}

.news-article-image {
	margin-bottom: 30px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--secondary-color);
}

.news-article-image img,
.post-single .news-article-image .post-panel {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.news-article-lead {
	margin-bottom: 26px;
	padding-left: 20px;
	border-left: 4px solid var(--accent-color);
	color: var(--primary-color);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.65;
}

/* The theme's .post-entry draws a green rule under the body; the footer below has its own. */
.news-article-body {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.news-article-body p {
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.8;
}

.news-article-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 30px;
	padding: 18px 0;
	border-top: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.share-label {
	margin-right: 6px;
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-weight: 700;
}

.share-label i {
	margin-right: 7px;
	color: var(--accent-color);
}

.share-btn {
	width: 38px;
	height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.share-btn:hover,
.share-btn:focus-visible {
	border-color: transparent;
	background: var(--accent-color);
	color: var(--white-color);
}

.share-btn.is-whatsapp:hover,
.share-btn.is-whatsapp:focus-visible { background: #25D366; }
.share-btn.is-linkedin:hover,
.share-btn.is-linkedin:focus-visible { background: #0A66C2; }
.share-btn.is-facebook:hover,
.share-btn.is-facebook:focus-visible { background: #1877F2; }
.share-btn.is-x:hover,
.share-btn.is-x:focus-visible { background: var(--primary-color); }

.share-btn.is-copied {
	border-color: transparent;
	background: #2E7D32;
	color: var(--white-color);
}

.news-back-link {
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-weight: 700;
	transition: color .3s ease;
}

.news-back-link i {
	margin-right: 8px;
}

.news-back-link:hover {
	color: var(--accent-color);
}

.news-article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 30px;
}

.news-article-nav-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.news-article-nav-item.is-next {
	grid-column: 2;
	text-align: right;
}

.news-article-nav-item span {
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.news-article-nav-item strong {
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 17px;
	line-height: 1.35;
}

.news-article-nav-item:hover {
	border-color: var(--accent-color);
	box-shadow: 0 12px 30px rgba(28, 28, 30, .06);
}

/* Sidebar */
.news-sidebar {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.news-widget {
	padding: 26px;
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	background: var(--white-color);
}

.news-widget-title {
	position: relative;
	margin-bottom: 18px;
	padding-bottom: 12px;
	font-size: 20px;
}

.news-widget-title:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent-color);
}

.share--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.share-btn--wide {
	width: auto;
	height: 42px;
	padding: 0 14px;
	justify-content: flex-start;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}

.share-btn--wide i {
	width: 16px;
	text-align: center;
}

.news-widget-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-widget-post {
	display: flex;
	align-items: center;
	gap: 14px;
}

.news-widget-thumb {
	flex: 0 0 84px;
	overflow: hidden;
	border-radius: 10px;
}

.news-sidebar .news-widget-thumb img,
.post-single .news-sidebar .news-widget-thumb .post-panel {
	display: block;
	width: 84px;
	height: 64px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}

.post-single .news-sidebar .news-widget-thumb .post-panel:before {
	background-position: center center;
	background-size: 60% auto;
}

.news-widget-date {
	display: block;
	margin-bottom: 4px;
	color: var(--text-color);
	font-size: 12px;
}

.news-widget-post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	transition: color .3s ease;
}

.news-widget-post-title:hover {
	color: var(--accent-color);
}

.news-widget-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-weight: 700;
}

.news-widget--cta {
	border: 0;
	background: linear-gradient(135deg, #1C1C1E 0%, #2E1113 100%);
}

.news-widget--cta .news-widget-title {
	color: var(--white-color);
}

.news-widget--cta p {
	margin-bottom: 16px;
	color: #B8B8BC;
	font-size: 15px;
}

.news-widget-contact {
	display: grid;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.news-widget-contact i {
	width: 18px;
	margin-right: 8px;
	color: var(--accent-color);
}

.news-widget-contact a {
	color: var(--white-color);
	transition: color .3s ease;
}

.news-widget-contact a:hover {
	color: var(--accent-color);
}

@media only screen and (max-width: 991px) {
	.news-sidebar {
		position: static;
		margin-top: 40px;
	}
}

@media only screen and (max-width: 575px) {
	.news-article-lead { font-size: 17px; }

	.news-article-nav { grid-template-columns: 1fr; }
	.news-article-nav-item.is-next { grid-column: auto; }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   The theme's footer is a wind-turbine and solar-panel panorama behind four
   columns, with the contact details in a separate band above it and a solid
   red copyright slab below. Rebuilt flat and quiet: the imagery belongs to
   Solor's original industry, and spec 6.4 rules it out here. */
footer.main-footer {
	background: var(--primary-color);
	padding: 80px 0 40px;
}

.footer-about figure {
	margin-bottom: 26px;
}

/* The theme's global `figure { width: 100% }` stretched the wordmark to the
   full column. */
/* logo-white.png is the hexagon wrench mark from logo-new.jpeg, square and
   without a wordmark, so it needs far less width than the old text lockup. */
.footer-about figure img {
	max-width: 88px;
	height: auto;
}

.footer-about p {
	color: #B8B8BC;
	font-size: 15px;
	margin-bottom: 0;
}

/* 80px of indent left the narrow columns about 110px of text width, which is
   what broke the business hours into four lines. */
.footer-links {
	padding-left: 0;
}

.footer-links h2 {
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 22px;
}

.footer-links ul li {
	margin-bottom: 12px;
}

.footer-links ul li a {
	font-size: 15px;
	color: #D5D5D8;
	transition: color .3s ease;
}

/* ── Contact column ────────────────────────────────────────────────────── */
.footer-contact-list ul li {
	margin-bottom: 18px;
}

/* The theme hangs a red dot off every footer link. It reads as navigation, and
   these are details rather than destinations. */
.footer-contact-list ul li a {
	padding-left: 0;
}

.footer-contact-list ul li a:before {
	display: none;
}

.footer-contact-label {
	display: block;
	font-family: var(--accent-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 3px;
}

.footer-contact-value {
	display: block;
	font-size: 15px;
	line-height: 1.6;
	color: #D5D5D8;
}

/* ── Copyright ─────────────────────────────────────────────────────────── */
.footer-copyright {
	background: none;
	border-top: 1px solid rgba(255, 255, 255, .12);
	border-radius: 0;
	margin-top: 56px;
	padding: 24px 0 0;
}

.footer-copyright-text p {
	font-size: 14px;
	color: #8E8E94;
}

@media only screen and (max-width: 991px) {
	footer.main-footer {
		padding: 60px 0 30px;
	}

	.footer-about {
		margin-bottom: 40px;
	}

	.footer-links {
		margin-bottom: 30px;
	}
}