/*
Theme Name: Elevate Rebuild
Theme URI: https://elevateright.com/
Author: ElevateRight staging rebuild
Description: Batch 1 classic theme for the WooCommerce staging reconstruction of the ElevateRight Shopify homepage. Header, navigation shell, footer, and homepage sections. Not for production activation.
Version: 1.0.0-batch4
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: elevate-rebuild
*/

.header__icon-wrapper {
	position: relative;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.header__logo-image {
	max-width: 100px;
	height: auto;
}

button.header__linklist-link,
button.mobile-nav__link {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: inherit;
}

@media screen and (min-width: 1200px) {
	.header__linklist-item:hover > .mega-menu,
	.header__linklist-item:focus-within > .mega-menu {
		display: block !important;
		visibility: visible;
		opacity: 1;
		z-index: 6;
	}
}

.drawer[open] {
	visibility: visible;
	transform: translateX(0);
}

#mobile-menu-drawer {
	background: #000;
	color: #fff;
}

.mobile-nav__search-container {
	padding: 1rem;
}

.search-form {
	display: flex;
	gap: 0;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
	background: #fff;
	color: #111;
}

.search-form__submit {
	padding: 0.6rem 1rem;
	background: #098b8a;
	color: #fff;
	border: 0;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
}

.er-shop-the-look-section {
	background: #014441;
}

.er-shop-the-look-section .shop-the-look__image {
	display: block;
	width: 100%;
	height: auto;
}

.shop-the-look__product.is-open {
	visibility: visible;
	opacity: 1;
	transform: scale(1) translateY(-50%);
}

.shop-the-look__product-image {
	width: 72px;
	height: auto;
	object-fit: contain;
	flex: none;
}

.shop-the-look__dot {
	cursor: pointer;
	border: 0;
	padding: 0;
}

.er-press-strip__inner {
	border-bottom: 1px solid #e2e2e2;
}

.er-press-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 26px;
	padding: 18px 0 22px;
}

.er-press-strip__logo {
	display: block;
	height: 20px;
	width: auto;
	max-width: 42vw;
	object-fit: contain;
	filter: brightness(0);
	opacity: 0.92;
}

.er-press-strip__logo--boxed {
	filter: grayscale(1);
}

.er-mood .section__header {
	text-align: center;
	max-width: 1000px;
	margin-inline: auto;
	margin-block-end: 32px;
}

.er-mood-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.er-mood-grid__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 3 / 2;
	background: #1a1a1a;
}

.er-mood-grid__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.er-mood-grid__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.er-mood-grid__label {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(14px, 4.2vw, 20px);
	line-height: 1.1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.er-carousel {
	position: relative;
}

.er-carousel .list-collections__scroller {
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.er-carousel .list-collections__item-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(320px, 80vw);
	gap: 16px;
	width: max-content;
	min-width: 100%;
	align-items: stretch;
}

.review-section .list-collections__item {
	background: #fff;
	color: #111;
	--heading-color: 0, 0, 0;
	--text-color: 17, 17, 17;
}

.er-portrait-gap {
	width: 200px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 15px;
	background: #e6e6e6;
}

.our_gurantee_section .section__header {
	text-align: center;
}

.guarantee-item {
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #d4d4d4;
	margin: 0;
	transition: border-color 0.3s;
}

.guarantee-item:hover {
	border-color: #4cbfc7;
}

.guarantee-item .heading {
	font-weight: 700;
	font-size: 20px;
}

.our_gurantee_section .multi-column {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.our_gurantee_section .multi-column__item {
	flex: 0 0 23%;
	min-width: 200px;
	margin: 0;
	padding: 15px;
}

/* CH2: sections/newsletter.liquid section variables (footer-group.json colours are transparent, so the settings_data.json
   heading/text/button/background colours apply); layout comes from theme.css (.image-with-text-block--cover). */
.er-newsletter {
	--heading-color: 13, 13, 13;
	--text-color: 46, 46, 46;
	--primary-button-background: 9, 139, 138;
	--primary-button-text-color: 255, 255, 255;
	--section-block-background: 255, 255, 255;
}

.er-newsletter__notice {
	margin-block-start: 12px;
}

/* Without an endpoint the sign-up is a <div>, so theme.css ".text-container p + form" (24px, 32px from 1000px) does not
   reach it; same spacing restated for the newsletter (measured: input 8px lower at 375 than live without it). */
.er-newsletter .text-container p + .newsletter__form {
	margin-block-start: 24px;
}

@media screen and (min-width: 1000px) {
	.er-newsletter .text-container p + .newsletter__form {
		margin-block-start: 32px;
	}
}

/* Home only: live does not load product-options.css on the index template (layout/theme.liquid), so the Subscribe label
   keeps the theme button font there (16px/600 at 1440, 15px at 375); functions.php enqueues it on every page, and its
   .loader-button__text { font-size: 18px; font-weight: 400 } applied on the copy's home page. */
.template-index .er-newsletter .loader-button__text {
	font-size: inherit;
	font-weight: inherit;
}

/* theme.css flushes .container--flush below 1000 px, but home-critical.css (enqueued after it on every page) restates
   .container { padding-inline: var(--container-gutter) }; live 375: card at x 24, 327 px wide (copy was 48 / 279). */
@media screen and (max-width: 999px) {
	.er-newsletter .container--flush {
		padding-inline: 0;
	}
}

.shopify-section--footer {
	background: #000;
	color: #fff;
	--background: 0, 0, 0;
	--heading-color: 255, 255, 255;
	--text-color: 255, 255, 255;
}

/* B1-4 footer rules ported from cand-2026-10-02-r6 (footer-scoped only; shared selectors re-scoped under .footer) */
.footer { background: #000; color: #fff; --border-color: 38, 38, 38; /* sections/footer.liquid: footer_background mixed 85% with footer_text_color */ }
.footer a { color: inherit; }
.about_us img { width: 150px; height: auto; margin-bottom: 20px; }
.coll_20 { width: 20%; }
.coll_80 { width: 80%; }
.coll_100 { width: 100%; }
.footer-links-coll { width: 25%; padding: 10px; }
.footer-links-coll .linklist__item a { font-size: 13px; }
.main-footer-content-wrapper .footer_contact_list, .main-footer-content-wrapper .footer-navigation-wrapper { padding: 10px; }
.main-footer-content-wrapper { display: flex; }
.footer_contact_list { display: flex; flex-direction: column; gap: 20px; font-size: 13px; }
.footer__item-content ul { padding: 0; list-style-type: none; }
.footer_contact_list .social-media__link { width: 36px; height: 36px; }
.main-footer-content-wrapper .footer-navigation-wrapper { position: relative; display: flex; flex-direction: column; gap: 20px; }
.footer-navigation { max-height: 550px; display: flex; flex-direction: column; flex-wrap: wrap; }
.footer-logos { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px; }
.footer-text-wrapper { padding: 30px; border-radius: 10px; text-align: center; font-size: 13px; }
.aside-list { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer__aside .linklist__item:not(:first-child) { padding-block-start: 0 !important; }
@media screen and (max-width: 1200px) { .footer__aside { flex-direction: column; } }
@media screen and (max-width: 1200px) { .aside-list, .footer__payment-methods { justify-content: center; } }
@media screen and (max-width: 1200px) { .footer__payment-methods { margin-inline-start: unset; } }
@media screen and (max-width: 999px) { .main-footer-content-wrapper { flex-direction: column; } }
@media screen and (max-width: 999px) { .coll_20, .coll_80, .footer-links-coll { width: 100%; } }
@media screen and (max-width: 999px) { .footer-navigation { max-height: fit-content; } }
@media screen and (max-width: 999px) { .footer__item-title { padding: 5px 3px; } }
@media screen and (max-width: 999px) { .footer-logos { flex-wrap: wrap; } }
@media screen and (max-width: 999px) { .footer-logos img { width: 100px !important; height: auto; } }
@media screen and (max-width: 999px) { .footer__aside .square-separator { display: none; } }
@media screen and (max-width: 425px) { .footer-links-coll { padding: 10px 0; } }
@media screen and (max-width: 425px) { .footer-text-wrapper { padding: 10px; } }
@media screen and (min-width: 1000px) { .footer-navigation { max-height: 700px; } }
@media screen and (max-width: 999px) { .footer .accordion { cursor: pointer; width: 100%; border-bottom: 1px solid #ccc; transition: 0.4s; } }
@media screen and (max-width: 999px) { .footer .accordion:after { /* "/ ''": empty alternative text, so the icon is not read as part of the column title (live: "CBD Bestsellers +"; deployed theme: "CBD Bestsellers"). Same glyph on screen. */ content: '\002B' / ''; color: #777; font-weight: bold; float: right; margin-left: 5px; } }
@media screen and (max-width: 999px) { .footer .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } }






























.social-media {
	display: flex;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.social-media__link {
	color: #fff;
	display: inline-flex;
}

.er-index-entry {
	margin-bottom: 28px;
}

.er-index-entry a {
	color: inherit;
}

@media screen and (min-width: 700px) {
	.er-press-strip {
		gap: 22px 40px;
		padding: 24px 0 28px;
	}

	.er-press-strip__logo {
		height: 24px;
		max-width: none;
	}

	.er-mood-grid {
		gap: 16px;
	}
}

@media screen and (min-width: 990px) {
	.er-press-strip {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 30px;
		padding: 30px 0 34px;
	}

	.er-press-strip__logo {
		height: 30px;
	}

	.er-mood-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
		max-width: 85%;
		margin-inline: auto;
	}

	.er-mood-grid__tile:hover .er-mood-grid__img,
	.er-mood-grid__tile:focus-visible .er-mood-grid__img {
		transform: scale(1.05);
	}
}

@media screen and (min-width: 1000px) {
	.review-section .er-carousel .list-collections__item-list {
		grid-auto-columns: 30%;
	}

	.blogpost-section .er-carousel .list-collections__item-list {
		grid-auto-columns: 15vw;
	}

	
}

@media screen and (max-width: 999px) {
	

	

	

	

	

	.our_gurantee_section .multi-column__item {
		flex: 0 0 40%;
		min-width: 240px;
	}
}

@media screen and (max-width: 768px) {
	.our_gurantee_section .multi-column__item {
		flex: 0 0 80%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.er-mood-grid__img,
	.er-carousel .list-collections__scroller {
		scroll-behavior: auto;
		transition: none;
	}
}

/* B1-3 (MOBILE:R01): wide content tables scroll inside their own focusable region instead of widening or being clipped */
.er-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.er-table-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* B1-4 (DESKTOP:D01), measured 2026-10-05 (tests/out/footer_contact_portonly.json): between 1000 and 1279 px the e-mail line
   is 13-49 px wider than the contact column; live clips it (overflow: hidden). Here it wraps inside the column instead:
   nothing is hidden or clipped, nothing overlaps, column proportions stay as on live. */
.footer_contact_list a[href^="mailto:"] { overflow-wrap: anywhere; }

/* B1-4 footer title typography, measured 2026-10-05 (visual/runs/2026-10-05_cb1f, footer band 1024/1440: titles 13px/600
   vs live 20px/900): theme.css already has the live rule (@media min-width 1000px .footer__item-title), but
   home-critical.css, enqueued after theme.css on every page, resets .heading--small. r6 fixed this by loading
   home-critical.css on the home page only (a global stylesheet change, not ported); here the same rule is restated for
   the footer only. Line height follows from .heading--small (1.23077 x 20px = 24.6px, as live). */
@media screen and (min-width: 1000px) {
	.footer .footer__item-title { font-size: 20px; font-weight: 900; }
}

/* B1-1b (MOBILE:A03), measured 2026-10-05 (tests/out/focus_summary.json): after the first-Tab handler, Tab stops still
   without an indicator are the product FAQ triggers (outline: none inside an overflow: hidden card) and scroll regions
   the browser makes focusable (comparison table, thumbnail and collection scrollers, review summary, Firefox's mega-menu
   inner). Keyboard mode only (.focus-outline is set on the first Tab), drawn inside the element so the card does not
   clip it; mouse and touch rendering are unchanged. */
.focus-outline .custom-faq-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.focus-outline .comparison-scroll:focus-visible,
.focus-outline .hide-scrollbar:focus-visible,
.focus-outline .mega-menu__inner:focus-visible,
.focus-outline #yotpo-reviews-section-data:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Blog index card titles (/blogs/learn: live 30px desktop / 24px mobile, copy 14px): rule from snippets/custom-css.liquid,
   which layout/theme.liquid renders on every live page; blog-section.css and home-critical.css set the link to 14px. */
.template-blog h3.article-item__title.heading.h4 a { font-size: 30px !important; }
@media (max-width: 767px) {
	.template-blog h3.article-item__title.heading.h4 a { font-size: 24px !important; }
}

/* Pager (snippets/pagination.liquid markup): theme.css lays the items out as table cells, but home-critical.css, enqueued
   after it, restates .heading { display: block }, which stacked "1 2 3 … 40" vertically. */
.pagination .pagination__nav-item { display: table-cell; }

/* R18 (phone-fixes): no sideways scroll at 320 px. Live overflows the same way (local render of the live HTML at 320:
   /collections/thca-carts 331 px, /policies/privacy-policy 352 px). A landing-grid card grows to its longest unbreakable
   word ("DIESEL/BLUE DREAM/PINEAPPLE" in the cartridge bundle name) and a policy link is one 37-character URL; let both
   wrap where they would otherwise stick out. Only below 360 px: overflow-wrap:anywhere also lowers the grid items'
   min-content width, which at 375 px evened the landing grid's two columns and broke a name mid-word where live (and
   b3c) keep uneven columns (VERIFY-phone-fixes). From 360 px up the layout stays exactly b3c's. */
@media (max-width: 359px) {
	.hemp-root .product-card .product-name { overflow-wrap: anywhere; }
	.shopify-policy__body .rte a { overflow-wrap: anywhere; }
}

/* P1 (cand-batch3d unblock): no sideways scroll on /cart below 375 px. WooCommerce's cart.css (11.1.2, line 4) lays each
   line out as a grid of 80px + 132px tracks with 16px gaps (.wc-block-cart table.wc-block-cart-items
   .wc-block-cart-items__row) and puts the line total in an implicit 4th track as wide as the nowrap "Save $x" badge, so a
   line needs 343px: the page was 367px wide at 320 and 360 px. Below 375 px the total (price and badge) moves under the
   product details, which fits from 255px. 375 px and up keep WooCommerce's layout unchanged.
   P1b (round 8, owner report: /cart at 375 px with a quantity of 10 or more): that was not enough. The row still needs
   271px + the width of the nowrap badge (343px at quantity 1: 80 + 132 + 11 + the badge track, with 16px gaps), and the
   cart block is only (viewport - 48)px wide, so at 375 the badge sticks 16px out of the block at quantity 1, past the
   viewport edge at quantity 10 ("Save $104.90": page 376px wide) and 5px past it at 99 ("Save $1,038.51": 380px).
   The stacked line is therefore used up to 429 px (the largest phone is 430px), where the widest realistic badge
   ("Save $10,385.10", a row of about 365px) fits the (viewport - 48)px block. From 430 px up WooCommerce's layout is
   unchanged. */
@media (max-width: 429px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
		grid-column: 2 / 4;
		grid-row: 2;
	}
}