/**
 * WebST Minimal Skin for the "cloud" theme (cloudservices.store).
 *
 * The theme prints its own stylesheets after wp_head(), so every selector here
 * starts with "html" to win on specificity instead of load order. !important is
 * only used against inline styles in the theme templates.
 */

/* Design tokens follow the Stitch "CloudServices Safe Identity" system, with the brand teal as accent. */
:root {
	--webst-text: #0f172a;
	--webst-muted: #64748b;
	--webst-border: #e2e8f0;
	--webst-border-hover: #cbd5e1;
	--webst-soft: #f8fafc;
	--webst-accent: #1ab394;
	--webst-accent-dark: #148f76;
	--webst-accent-soft: #e8f7f3;
	--webst-navy: #0f2a3f;
	--webst-radius: 16px;
	--webst-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--webst-shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
	--webst-shadow-2: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
	--webst-shadow-3: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
}

/* =Base
-------------------------------------------------------------- */

html body {
	font-family: var(--webst-font);
	color: var(--webst-muted);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* No global heading color: pricing pages put h2 on dark boxes and rely on inherited white. */
html body h1,
html body h2,
html body h3,
html body h4,
html body .h4 {
	letter-spacing: -0.01em;
}

html body a {
	color: var(--webst-accent);
	transition: color 0.15s ease;
}

html body a:hover {
	color: var(--webst-accent-dark);
}

html body .btn,
html body input.btn {
	font-size: 0.9375em;
	font-weight: 600;
	text-shadow: none;
	background: var(--webst-accent);
	border: 1px solid var(--webst-accent);
	border-radius: 8px;
	box-shadow: none;
	padding: 0.65em 1.25em;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html body .btn:hover,
html body input.btn:hover {
	text-shadow: none;
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
	color: #fff;
}

/* =Header
-------------------------------------------------------------- */

html body #header {
	background: #fff;
	border-bottom: 1px solid var(--webst-border);
}

html body #header .top-hat {
	background: var(--webst-navy);
	border-bottom: 0;
	color: rgba(255, 255, 255, 0.75);
}

html body #header .top-hat a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
}

html body #header .top-hat li:hover > a {
	color: #5fe0c4;
}

html body #header .top-hat .toggle .expand:before {
	border-top-color: rgba(255, 255, 255, 0.8);
}

/* The link list is 29px tall in the 34px bar; centre it (ul.commerce follows it). */
html body #header .top-hat .row > ul:not(.commerce) {
	margin-top: 2px;
}

/* The cart sprite is white, which suits the navy top bar. */
html body #header .top-hat .icon-cart {
	opacity: 0.85;
}

html body #header .primary li a {
	color: var(--webst-text);
	font-weight: 600;
}

/* Dropdown panels: white cards instead of dark grey blocks. */
@media only screen and (min-width: 800px) {
	html body #header .primary .panel > ul,
	html body #header .top-hat .panel > ul,
	html body #header .top-hat .panel > div {
		background: #fff;
		border: 1px solid var(--webst-border);
		border-radius: 10px;
		box-shadow: var(--webst-shadow-3);
		padding: 0.375em 0;
	}

	html body #header .panel li,
	html body #header .primary .panel li {
		border-top: none;
	}

	html body #header .primary ul li div.panel a,
	html body #header .primary ul li.expandable.expanded div.panel a,
	html body #header .top-hat li:hover div.panel ul li a,
	html body #header .top-hat .panel li a {
		color: var(--webst-text);
		font-size: 0.9375em;
		font-weight: 500;
		padding: 0.7em 1.25em;
		text-transform: none;
		letter-spacing: 0;
	}

	html body #header li li a:hover,
	html body #header li li a:focus,
	html body #header .primary li li a:hover,
	html body #header .primary li li a:focus,
	html body #header .primary ul li.expandable.expanded div.panel a:hover,
	html body #header .top-hat li:hover div.panel ul li a:hover {
		background: var(--webst-soft);
		color: var(--webst-accent);
	}

	/* The little arrow above each panel was drawn in dark grey. */
	html body #header .top-hat .panel > div:before,
	html body #header .top-hat .panel > form:before,
	html body #header .top-hat .panel li:first-child a:before {
		border-bottom-color: var(--webst-border);
	}
}

/* =Hero / domain search
-------------------------------------------------------------- */

html body .hero.hero-search {
	background: var(--webst-navy) !important; /* Overrides the inline pattern image. */
	box-shadow: none;
	text-shadow: none;
	padding-bottom: 3.5em;
}

html body .hero.hero-mini .headline {
	margin-top: 3em;
	margin-bottom: 1.5em;
}

html body .hero .headline h1 {
	color: #fff;
	font-size: 2.25em;
	font-weight: 600;
}

html body .hero-search .search-form {
	max-width: 40em;
}

html body .hero-search .search-form input[type="search"] {
	background: #fff;
	border: none;
	border-radius: 10px;
	color: var(--webst-text);
}

/* Below 800px the theme turns the button into a magnifier icon inside the field. */
@media only screen and (min-width: 800px) {
	html body .hero-search .search-form input[type="search"] {
		border-radius: 10px 0 0 10px;
		padding: 0.85em 1em;
	}

	html body .hero-search .search-form button {
		background: var(--webst-accent);
		border-radius: 0 10px 10px 0;
		padding: 0.85em 0;
		text-shadow: none;
		font-weight: 600;
	}

	html body .hero-search .search-form button:hover {
		background: var(--webst-accent-dark);
		text-shadow: none;
	}
}

/* =Section headings
-------------------------------------------------------------- */

html body .headline {
	margin: 4.5em auto 2.5em;
}

html body .headline h3.center {
	color: var(--webst-text);
	font-size: 2em;
	font-weight: 600;
	margin-top: 0;
}

/* =Homepage product cards
-------------------------------------------------------------- */

html body .home_boxes {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0;
}

html body .home_boxes .grid-col {
	display: flex;
	flex-direction: column;
	padding: 2em 2.25em 2em;
	margin-top: 0; /* The grid's auto margin would bottom-align cards in flex. */
	margin-bottom: 2.25em;
}

html body .home_boxes .grid-col:before {
	background: #fff;
	border: 1px solid var(--webst-border);
	border-radius: var(--webst-radius);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

html body .home_boxes .grid-col:hover:before {
	border-color: var(--webst-border-hover);
	box-shadow: var(--webst-shadow-2);
}

html body .home_boxes h2 {
	order: 2;
	color: var(--webst-text);
	font-size: 1.25em;
	font-weight: 600;
	margin: 0 0 0.5em;
}

/* Fixed image box so every card title lines up, whatever the artwork size. */
html body .home_boxes.featured-grid img {
	order: 1;
	width: 100%;
	max-width: none;
	height: 110px;
	max-height: none;
	object-fit: contain;
	margin: 0 0 1.75em;
}

html body .home_boxes .grid-col > p {
	order: 3;
	font-size: 0.9375em;
	margin: 0 0 0.75em;
}

html body .home_boxes .grid-col > p:empty {
	display: none;
}

/* "View more" becomes a quiet outline button pinned to the card bottom. */
html body .home_boxes .grid-col > .btn {
	order: 4;
	align-self: flex-start;
	width: auto;
	margin-top: auto;
	background: transparent;
	color: var(--webst-accent);
	border-color: var(--webst-border);
}

html body .home_boxes .grid-col > .btn:after {
	content: " \2192";
}

html body .home_boxes .grid-col:hover > .btn {
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	color: #fff;
}

/* =Homepage additional services
-------------------------------------------------------------- */

html body .home_boxes ~ .features {
	margin-top: 0;
}

html body .home_boxes ~ .features .grid-col.one-half {
	min-height: 0;
	padding-left: calc(1em + 72px + 1.25em);
	margin-bottom: 2.5em;
}

html body .home_boxes ~ .features img {
	width: 72px;
	right: auto;
	left: 1em;
}

html body .home_boxes ~ .features a.h4 {
	color: var(--webst-text) !important; /* Overrides the inline grey. */
	font-size: 1.125em;
	font-weight: 600;
	display: block;
	margin-bottom: 0.25em;
}

html body .home_boxes ~ .features p {
	font-size: 0.9375em;
}

/* Sign In dropdown: padding, full-width inputs, teal button, readable reminder link */
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form fieldset {
	width: 260px;
	box-sizing: border-box;
	padding: 14px 14px 10px;
	margin: 0;
	border: 0;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form input.input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 9px 12px;
	border: 1px solid var(--webst-border-hover);
	border-radius: 8px;
	box-shadow: none;
	background: #fff;
	color: var(--webst-text);
	font-size: 14px;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form input.input:focus {
	border-color: var(--webst-accent);
	box-shadow: 0 0 0 3px var(--webst-accent-soft);
	outline: 0;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a.btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 4px 0 8px;
	padding: 10px 12px;
	background: var(--webst-accent);
	background-image: none;
	border: 1px solid var(--webst-accent);
	border-radius: 8px;
	box-shadow: none;
	text-shadow: none;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a.btn:hover {
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a:not(.btn) {
	display: block;
	padding: 2px 0 0;
	background: none;
	color: var(--webst-muted);
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a:not(.btn):hover {
	color: var(--webst-accent);
	background: none;
}

/* =Inner pages: hero, breadcrumbs, pricing (1.4.0)
   Prefix "html body:not(#webst)" adds id-level weight: this file loads BEFORE the theme CSS. */

/* Hero with photo: navy overlay, photo kept faint */
html body:not(#webst) .hero.subheader_area {
	background: var(--webst-navy);
	position: relative;
	overflow: hidden;
}
html body:not(#webst) .hero.subheader_area picture img {
	opacity: 0.3 !important; /* the theme sets 0.5 with more weight */
	filter: grayscale(0.4);
}
html body:not(#webst) .hero.subheader_area:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(15, 42, 63, 0.95) 0%, rgba(15, 42, 63, 0.7) 55%, rgba(26, 179, 148, 0.35) 100%);
	pointer-events: none;
}
html body:not(#webst) .hero.subheader_area .hero-body { position: relative; z-index: 1; }
html body:not(#webst) .hero.subheader_area .headline h1 {
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-shadow: none;
}
html body:not(#webst) .hero.subheader_area .headline p {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: none;
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
}

/* Breadcrumbs */
html body:not(#webst) nav.breadcrumbs {
	background: var(--webst-soft);
	border-bottom: 1px solid var(--webst-border);
	border-top: 0;
}
html body:not(#webst) nav.breadcrumbs p { color: var(--webst-muted); font-size: 0.875em; }
html body:not(#webst) nav.breadcrumbs a { color: var(--webst-text); font-weight: 500; }
html body:not(#webst) nav.breadcrumbs strong { color: var(--webst-accent); font-weight: 600; }

/* Package cards (cPanel, Plesk, M365, Google, Exchange, SSL ...).
   .product-item is the grid column (16px side padding), so the card is drawn on its children. */
html body:not(#webst) .product-item.grid-col {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin-top: 0;
	margin-bottom: 28px;
	transition: transform 0.2s ease;
}
html body:not(#webst) .product-item.grid-col:hover { transform: translateY(-3px); }
html body:not(#webst) .product-item.grid-col header,
html body:not(#webst) .product-item.grid-col > div > fieldset {
	background: var(--webst-navy);
	border: 0;
}
html body:not(#webst) .product-item.grid-col header {
	padding-top: 1.5em;
	border-radius: var(--webst-radius) var(--webst-radius) 0 0;
}
html body:not(#webst) .product-item.grid-col > div {
	background: #fff;
	border-radius: 0 0 var(--webst-radius) var(--webst-radius);
	box-shadow: var(--webst-shadow-2), 0 0 0 1px var(--webst-border);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}
html body:not(#webst) .product-item.grid-col:hover > div { box-shadow: var(--webst-shadow-3), 0 0 0 1px var(--webst-border); }
html body:not(#webst) .product-item.grid-col header h2 {
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
}
html body:not(#webst) .product-item.grid-col .price,
html body:not(#webst) .product-item.grid-col .price .amount { color: #fff; }
html body:not(#webst) .product-item.grid-col .price .amount { font-weight: 800; letter-spacing: -0.02em; }
html body:not(#webst) .product-item.grid-col .renewal-price-display { color: rgba(255, 255, 255, 0.75); font-size: 0.9em; }
html body:not(#webst) .product-item.grid-col > div > fieldset { padding-bottom: 1.5em; }
html body:not(#webst) .product-item.grid-col .btn {
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	border-radius: 8px;
	font-weight: 600;
	color: #fff;
}
html body:not(#webst) .product-item.grid-col .btn:hover {
	background: #20c9a6;
	border-color: #20c9a6;
}
html body:not(#webst) .product-item.grid-col select.duration,
html body:not(#webst) .product-item.grid-col .b-core-ui-select {
	border-radius: 8px;
	border-color: transparent;
}
/* Feature list */
html body:not(#webst) .product-item.grid-col > div > ul { background: #fff; padding: 0.5em 0; }
html body:not(#webst) .product-item.grid-col > div ul li {
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--webst-border);
	color: var(--webst-text);
	font-weight: 500;
}
html body:not(#webst) .product-item.grid-col > div ul li:last-child { border-bottom: 0; }
html body:not(#webst) .product-item.grid-col > div ul ul { margin: 0; padding: 0; }
html body:not(#webst) .product-item.grid-col > div ul li:has(> h4) { background: var(--webst-soft); }
html body:not(#webst) .product-item.grid-col > div ul li h4 {
	color: var(--webst-navy);
	font-size: 0.95em;
	font-weight: 700;
	margin: 0;
}
html body:not(#webst) .product-item.grid-col > div > p { padding-top: 1em; line-height: 1.55; }
html body:not(#webst) .product-item.grid-col .label:empty { display: none; }
html body:not(#webst) .product-item.grid-col > div > p { color: var(--webst-muted); }
/* "Most popular" */
/* "Most popular": one teal ring drawn by a pseudo-element over the card (the column has 16px side padding) */
html body:not(#webst) .product-item.grid-col.emphasis { border: 0; position: relative; }
html body:not(#webst) .product-item.grid-col.emphasis:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 16px;
	right: 16px;
	border: 2px solid var(--webst-accent);
	border-radius: var(--webst-radius);
	pointer-events: none;
}
html body:not(#webst) .product-item.grid-col.emphasis > div {
	box-shadow: 0 14px 30px -10px rgba(26, 179, 148, 0.45);
}
html body:not(#webst) .product-item.grid-col.emphasis .label {
	display: inline-block;
	background: var(--webst-accent);
	color: #fff;
	border-radius: 999px;
	padding: 0.25em 0.9em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Server tables (Cloud VPS, dedicated) */
html body:not(#webst) .dedicated-servers h2 {
	background: linear-gradient(120deg, var(--webst-navy) 0%, #17405e 100%);
	color: #fff;
	border-radius: var(--webst-radius);
	font-weight: 700;
}
html body:not(#webst) .dedicated-servers h2 span { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
html body:not(#webst) .server-list > header ul li {
	color: var(--webst-muted);
	font-weight: 600;
	letter-spacing: 0.05em;
}
html body:not(#webst) .server-list > div {
	background: #fff;
	border: 1px solid var(--webst-border);
	border-radius: 12px;
	box-shadow: var(--webst-shadow-1);
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body:not(#webst) .server-list > div:hover {
	border-color: var(--webst-accent);
	box-shadow: var(--webst-shadow-2);
}
html body:not(#webst) .server-list > div ul,
html body:not(#webst) .server-list > div ul li,
html body:not(#webst) .server-list > div ul li p { background: transparent; border: 0; color: var(--webst-text); }
html body:not(#webst) .server-list > div:nth-of-type(even) { background: #fcfdfe; }
html body:not(#webst) .server-list > div ul li:first-child p { color: var(--webst-navy); font-weight: 700; }
html body:not(#webst) .server-list .price,
html body:not(#webst) .server-list .price .amount { color: var(--webst-navy); }
html body:not(#webst) .server-list .price .amount { font-weight: 800; }
html body:not(#webst) .server-list .btn { border-radius: 8px; }

/* Feature tabs */
html body:not(#webst) .tab-list { background: var(--webst-soft); border-color: var(--webst-border); }
html body:not(#webst) .tab-list li a,
html body:not(#webst) .tab-list a { color: var(--webst-text); font-weight: 600; }
html body:not(#webst) .tab-list .selected a,
html body:not(#webst) .tab-list a.selected,
html body:not(#webst) .tab-list li.selected {
	background: var(--webst-accent);
	color: #fff;
}

/* SSL certificates (grid of .ssl-product cards) */
html body:not(#webst) .ssl-list .ssl-product {
	background: #fff;
	border-radius: var(--webst-radius);
	box-shadow: var(--webst-shadow-2), 0 0 0 1px var(--webst-border);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html body:not(#webst) .ssl-list .ssl-product:hover {
	box-shadow: var(--webst-shadow-3), 0 0 0 1px var(--webst-border);
	transform: translateY(-3px);
}
html body:not(#webst) .ssl-list .ssl-product li.certificate,
html body:not(#webst) .ssl-list .ssl-product li.fieldset { background: var(--webst-navy); }
html body:not(#webst) .ssl-list .ssl-product li.certificate a { color: #fff; font-weight: 700; }
html body:not(#webst) .ssl-list .ssl-product .price-holder,
html body:not(#webst) .ssl-list .ssl-product .price-holder * { color: #fff; }
html body:not(#webst) .ssl-list .ssl-product .price-holder .amount,
html body:not(#webst) .ssl-list .ssl-product .price-holder strong { font-weight: 800; }
html body:not(#webst) .ssl-list .ssl-product li.validation p { color: var(--webst-accent-dark); font-weight: 600; }
html body:not(#webst) .ssl-list .ssl-product li.no-domains p { color: var(--webst-text); font-weight: 500; }
html body:not(#webst) .ssl-list .ssl-product li.great-for p { color: var(--webst-muted); }
html body:not(#webst) .ssl-list .ssl-product .btn {
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	border-radius: 8px;
	color: #fff;
}
html body:not(#webst) .ssl-list .ssl-product .btn:hover { background: #20c9a6; border-color: #20c9a6; }
html body:not(#webst) .ssl-list .ssl-product .b-core-ui-select { border-radius: 8px; }

/* Option tables (Basic Features, Operating System, extra storage) */
html body:not(#webst) .server_options h3,
html body:not(#webst) .featured-list-item h3 { color: var(--webst-text); font-weight: 700; }
html body:not(#webst) table.rounded-table {
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--webst-border);
	border-radius: 12px;
	box-shadow: var(--webst-shadow-1);
	overflow: hidden;
}
/* The theme renders each row as its own block table with a 6px gap; restore a normal table. */
html body:not(#webst) table.rounded-table { display: table; width: 100%; table-layout: fixed; }
html body:not(#webst) table.rounded-table thead { display: table-header-group; }
html body:not(#webst) table.rounded-table tbody { display: table-row-group; }
html body:not(#webst) table.rounded-table tr { display: table-row; margin: 0; }
html body:not(#webst) table.rounded-table tbody th > a {
	color: var(--webst-text);
	font-weight: 500;
}
html body:not(#webst) table.rounded-table tbody th > a:hover { color: var(--webst-accent); }
html body:not(#webst) table.rounded-table thead th {
	background: var(--webst-navy);
	color: #fff;
	font-weight: 600;
	font-size: 0.8125em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 0;
}
html body:not(#webst) table.rounded-table tbody th,
html body:not(#webst) table.rounded-table tbody td {
	background: #fff;
	border: 0;
	border-top: 1px solid var(--webst-border);
	color: var(--webst-text);
	font-weight: 500;
}
html body:not(#webst) table.rounded-table tbody tr:first-child th,
html body:not(#webst) table.rounded-table tbody tr:first-child td { border-top: 0; }
html body:not(#webst) table.rounded-table tbody tr:nth-child(even) th,
html body:not(#webst) table.rounded-table tbody tr:nth-child(even) td { background: var(--webst-soft); }
html body:not(#webst) table.rounded-table tbody th p,
html body:not(#webst) table.rounded-table tbody td p { color: inherit; }
html body:not(#webst) table.rounded-table .price,
html body:not(#webst) table.rounded-table .price * { color: var(--webst-accent-dark); font-weight: 700; }
html body:not(#webst) table.rounded-table .icon-checkmark { color: var(--webst-accent); font-weight: 700; }

/* "Additional Storage Options": two floated half columns inside one block, with the gutter only on the
   right, so the pair did not line up with the tables above and the block did not contain them. */
html body:not(#webst) .featured-list-item:has(> .grid-col.one-half) {
	display: flex;
	flex-wrap: wrap;
	column-gap: 36px;
}
html body:not(#webst) .featured-list-item:has(> .grid-col.one-half) > :not(.grid-col) { flex: 0 0 100%; }
html body:not(#webst) .featured-list-item > .grid-col.one-half {
	float: none;
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 0 !important; /* inline padding-left: 0 on the first column */
}
@media only screen and (max-width: 639px) {
	html body:not(#webst) .featured-list-item > .grid-col.one-half { flex-basis: 100%; margin-bottom: 20px; }
}

/* SALE corner ribbon (option tables, domain price list) */
html body:not(#webst) .sale-ribbon:before { border-left-color: var(--webst-accent-dark); }
html body:not(#webst) .sale-ribbon a,
html body:not(#webst) .sale-ribbon a:hover,
html body:not(#webst) .sale-ribbon span {
	position: absolute;
	left: 0.25rem;
	top: 0.35rem;
	z-index: 2;
	color: #fff;
	font-size: 10px;
	line-height: 1em;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

/* Phones: package cards become an accordion (body hidden until .expanded) */
@media only screen and (max-width: 639px) {
	html body:not(#webst) .product-item.grid-col:not(.expanded) header { border-radius: var(--webst-radius); }
	html body:not(#webst) .product-item.grid-col { margin-bottom: 14px; }
	html body:not(#webst) .product-item.grid-col:hover { transform: none; }
}

/* Cookie banner (cookie-script): it loads Open Sans for itself, and when the font arrives its text
   reflows and the fixed banner grows, which counted as a layout shift (CLS 0.11 on mobile). Use the site font. */
html body #cookiescript_injected,
html body #cookiescript_injected * {
	font-family: var(--webst-font) !important;
}

/* =Live chat strip and vendor logos
-------------------------------------------------------------- */

html body .promo-chat {
	background: var(--webst-soft);
	border-top: 1px solid var(--webst-border);
	border-bottom: 1px solid var(--webst-border);
	padding: 2em 0;
	margin-top: 3em;
}

html body .promo-chat p {
	color: var(--webst-text);
	font-weight: 500;
}

html body .promo-chat em {
	font-weight: 600;
}

html body .promo-chat .btn.green {
	color: #fff; /* "html body a" made the phone link teal on teal */
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	text-shadow: none;
}

html body .promo-chat .btn.green:hover {
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
}

html body .footer_vendors {
	padding: 2.5em 1em;
}

html body .footer_vendors img {
	height: 48px;
	margin: 0.5em 1.5em;
	vertical-align: middle;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

html body .footer_vendors img:hover {
	filter: none;
	opacity: 1;
}

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

html body #footer {
	background: var(--webst-navy);
	border-top: none;
}

html body #footer a {
	color: rgba(255, 255, 255, 0.72);
}

html body #footer a:hover {
	color: #fff;
}

html body #footer .about p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9375em;
}

html body #footer .about a,
html body #footer b.group_title {
	color: #fff;
	font-weight: 600;
}

html body #footer .social li a {
	opacity: 0.7;
}

html body #footer .certifications {
	color: var(--webst-muted);
}

/* =Promo popup (parts/popup.php)
-------------------------------------------------------------- */

html body .fs-popup {
	width: 260px;
	background: #fff;
	color: var(--webst-muted);
	border: 1px solid var(--webst-border);
	border-radius: var(--webst-radius);
	box-shadow: var(--webst-shadow-3);
	padding: 16px;
}

html body .fs-popup-close {
	background: transparent;
	color: var(--webst-muted);
}

html body .fs-popup-image img {
	max-width: 64px;
}

html body .fs-popup-title {
	color: var(--webst-text);
	font-size: 16px;
}

html body .fs-popup-button {
	background: var(--webst-accent);
	box-shadow: none;
	border-radius: 8px;
	font-size: 13px;
}

html body .fs-popup-button:hover {
	color: #fff;
	filter: none;
	background: var(--webst-accent-dark);
}

/* =Mobile
-------------------------------------------------------------- */

@media only screen and (max-width: 639px) {
	html body .hero .headline h1 {
		font-size: 1.6em;
	}

	html body .headline h3.center {
		font-size: 1.5em;
	}

	html body .home_boxes .grid-col {
		width: 100%;
	}

	html body .footer_vendors img {
		height: 36px;
		margin: 0.5em 0.75em;
	}
}