/*
Theme Name: Hemp Life SoCal
Theme URI: https://hemplifeshop.com
Description: Hemp Life SoCal child theme for Hello Elementor. The design system is the one ported from the Shopify build and lives in assets/shopify/. This file only carries the WooCommerce layer, which has no Shopify equivalent. Built by Gravity XL.
Author: Gravity XL
Author URI: https://gravityxl.com
Template: hello-elementor
Version: 1.2.0
Text Domain: hemplife
*/

/* ==========================================================================
   WooCommerce layer.

   The Shopify stylesheets in assets/shopify/ own everything with an hl- class.
   Nothing here may define .hl-section, .hl-head, .hl-hero, .hl-card or any
   other name that exists in that layer - those collided badly on the first
   pass. Colours below are read from the ported Shopify tokens so this layer
   can never drift from the brand palette.
   Values below are rescaled for the 62.5% root the Shopify layer sets.
   ========================================================================== */

:root {
	--hlw-fg:      rgb(var(--color-foreground, 4 34 5));
	--hlw-bg:      rgb(var(--color-background, 255 255 255));
	--hlw-muted:   rgba(var(--color-foreground, 4 34 5) / 0.62);
	--hlw-border:  rgba(var(--color-foreground, 4 34 5) / 0.14);
	--hlw-sale:    #a3321f;
	--hlw-radius:  14px;
	--hlw-pill:    999px;
	--hlw-shadow:  0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
	--hlw-lift:    0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.10);
	--hlw-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------- product grid ------ */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--hlw-bg);
	border: 1px solid var(--hlw-border);
	border-radius: var(--hlw-radius);
	overflow: hidden;
	transition: border-color 0.2s var(--hlw-ease), box-shadow 0.2s var(--hlw-ease), transform 0.2s var(--hlw-ease);
}

.woocommerce ul.products li.product:hover {
	border-color: transparent;
	box-shadow: var(--hlw-lift);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: rgba(var(--color-foreground, 4 34 5) / 0.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.5rem;
	line-height: 1.35;
	font-weight: 600;
	padding: 0;
	margin: 0 0 0.56rem;
}

.woocommerce ul.products li.product .price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hlw-fg);
	margin: 0;
}

.woocommerce ul.products li.product .price del { color: var(--hlw-muted); font-weight: 500; opacity: 1; margin-right: 0.4em; }
.woocommerce ul.products li.product .price ins { color: var(--hlw-sale); text-decoration: none; }

.woocommerce ul.products li.product .onsale {
	top: 10px; right: 10px; left: auto; margin: 0;
	padding: 0.4em 0.75em;
	border-radius: var(--hlw-pill);
	background: var(--hlw-sale);
	font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em;
	min-height: 0; line-height: 1;
}

@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .woocommerce ul.products { gap: 12px; } }

/* ------------------------------------------- spec strip + effect chips -- */

.hlw-spec {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.8rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hlw-muted);
}

.hlw-spec__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.hlw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.8rem; }

.hlw-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.34em 0.72em;
	border: 1px solid var(--hlw-border);
	border-radius: var(--hlw-pill);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hlw-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.16s var(--hlw-ease), color 0.16s var(--hlw-ease);
}

.hlw-chip:hover { border-color: var(--hlw-fg); color: var(--hlw-fg); }

/* ---------------------------------------------------- archive shell ----- */

.woocommerce-page .site-main,
.woocommerce .site-main {
	max-width: 1480px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 2.4rem; }

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--hlw-border);
	border-radius: var(--hlw-pill);
	padding: 0.6em 2.2em 0.6em 1em;
	font-size: 1.4rem;
	background-color: var(--hlw-bg);
}

/* ---------------------------------------------------- notices ----------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid var(--hlw-fg);
	border-radius: 9px;
	background: rgba(var(--color-foreground, 4 34 5) / 0.05);
	color: var(--hlw-fg);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--hlw-fg); }
.woocommerce-error { border-left-color: var(--hlw-sale); }
.woocommerce-error::before { color: var(--hlw-sale); }

/* ---------------------------------------------------- utilities --------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------- product gallery -- */
/* Dawn's thumbnail list is laid out by its slider component, which is not
   ported. Without it the thumbnails stacked at full size and made the media
   column 2200px tall. This lays them out directly. */

.product__media img,
.product__media-list img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hl-r-md, 1.6rem);
}

.hlw-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
}

.hlw-thumbs .thumbnail-list__item {
	flex: 0 0 auto;
	width: 8rem;
	margin: 0;
}

.hlw-thumbs button.thumbnail {
	display: block;
	width: 8rem;
	height: 8rem;
	padding: 0;
	border: 0.2rem solid rgba(var(--color-foreground, 4 34 5) / 0.12);
	border-radius: var(--hl-r-sm, 1.2rem);
	overflow: hidden;
	background: none;
	cursor: pointer;
	transition: border-color 0.16s ease;
}

.hlw-thumbs button.thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.hlw-thumbs button.thumbnail:hover,
.hlw-thumbs button.thumbnail.thumbnail--active {
	border-color: rgb(var(--color-foreground, 4 34 5));
}

@media (max-width: 480px) {
	.hlw-thumbs .thumbnail-list__item,
	.hlw-thumbs button.thumbnail { width: 6.4rem; }
	.hlw-thumbs button.thumbnail { height: 6.4rem; }
}