/* ---------- WooCommerce (catalog mode) — expanded in phase 5 ---------- */

.woocommerce-breadcrumb { display: none; } /* we render our own */

/* ===== Shop: edge-to-edge black hero, filter card aligned to the hero text ===== */
.shop-wrap {
	--shop-side: 300px;
	--shop-gap: clamp(20px, 2.6vw, 40px);
	--shop-hero-top: calc(var(--header-h) + clamp(26px, 4vw, 44px));
	padding-block: 0 0;
	overflow-x: clip;
}
.shop__main { padding-block-end: clamp(40px, 6vw, 72px); }

.shop {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: var(--shop-side) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--shop-gap);
	align-items: start;
	position: relative;
}

/* Black hero — spans both columns, then breaks out to the full viewport width */
.shop__hero {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: var(--shop-hero-top) clamp(40px, 6vw, 84px);
	background: #000;
	color: #fff;
	position: relative;
	overflow: clip;
	isolation: isolate;
	z-index: 1;
}
.shop__hero-bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0.9;
	z-index: 0;
}
.shop__hero::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.86) 42%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0.12) 100%);
}
.shop__hero-inner {
	position: relative;
	z-index: 2;
	padding-inline-start: calc(var(--shop-side) + var(--shop-gap) + clamp(4px, 1vw, 18px));
	max-width: calc(660px + var(--shop-side) + var(--shop-gap));
}

/* Filter card starts level with the hero text, floats over the hero, and
   continues down beside the product grid. */
.shop__filters {
	grid-column: 1;
	grid-row: 1 / span 2;
	position: sticky;
	top: calc(var(--header-h) + 16px);
	align-self: start;
	margin-block-start: var(--shop-hero-top);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow), 0 30px 70px rgba(0, 0, 0, 0.22);
	padding: 20px;
	z-index: 6;
	max-height: calc(100vh - var(--header-h) - 32px);
	overflow-y: auto;
}

.shop__main {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding-block-start: clamp(28px, 3.5vw, 48px);
}
.shop__filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-block-end: 14px;
	border-bottom: 1px solid var(--border);
}
.shop__filters-head .icon { width: 18px; height: 18px; color: var(--text-muted); }

.shop__group { border-bottom: 1px solid var(--border); padding-block: 14px; }
.shop__group:last-of-type { border-bottom: 0; }
.shop__group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--text-muted);
}
.shop__group > summary::-webkit-details-marker { display: none; }
.shop__group > summary .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.shop__group[open] > summary .icon { transform: rotate(180deg); }

.shop__cats { display: grid; gap: 2px; margin-block-start: 12px; }
.shop__cats a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-xs);
	font-size: 0.86rem;
	color: var(--text-muted);
	position: relative;
}
.shop__cats a .icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-faint); }
.shop__cats a span { flex: 1; }
.shop__cats a em { font-style: normal; font-size: 0.75rem; color: var(--text-faint); }
.shop__cats a:hover { background: var(--surface-2); color: var(--text); }
.shop__cats a.is-active {
	color: var(--accent);
	font-weight: 600;
	background: var(--accent-tint);
}
.shop__cats a.is-active .icon { color: var(--accent); }
.shop__cats a.is-active::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 6px;
	width: 3px;
	border-radius: 3px;
	background: var(--accent);
}

.shop__checklist { display: grid; gap: 4px; margin-block-start: 12px; }
.shop__checklist a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	font-size: 0.84rem;
	color: var(--text-muted);
}
.shop__check {
	width: 16px; height: 16px;
	border: 1px solid var(--border-strong);
	border-radius: 4px;
	flex-shrink: 0;
}
.shop__checklist a:hover { color: var(--text); }
.shop__checklist a.is-active { color: var(--accent); }
.shop__checklist a.is-active .shop__check { background: var(--accent); border-color: var(--accent); }

.shop__clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 16px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}
.shop__clear .icon { width: 15px; height: 15px; }
.shop__clear:hover { color: var(--accent); }

/* Shop hero — full-bleed black band (edge to edge) */
.shop__hero {
	position: relative;
	overflow: clip;
	background: #000;
	color: #fff;
	isolation: isolate;
	min-height: clamp(300px, 34vw, 420px);
	display: flex;
	align-items: center;
}
.shop__hero > .container { width: 100%; position: relative; z-index: 2; }
.shop__hero-bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	z-index: 0;
	opacity: 0.9;
}
.shop__hero::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.86) 42%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0.15) 100%);
}
.shop__hero-inner {
	/* clear the overlapping filter card on the left */
	padding-inline-start: calc(var(--shop-side) + var(--shop-gap) + clamp(4px, 1vw, 18px));
	max-width: calc(640px + var(--shop-side) + var(--shop-gap));
}
.shop__hero .breadcrumb { color: rgba(255,255,255,0.6); margin-block-end: 16px; }
.shop__hero .breadcrumb [aria-current] { color: var(--accent); }
.shop__hero-title {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
	text-transform: uppercase;
	line-height: 1.05;
	color: #fff;
}
.shop__hero-sub {
	font-family: var(--font-head);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--accent);
	font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.3rem);
	margin-block-start: 6px;
}
.shop__hero-lead { color: rgba(255,255,255,0.8); margin-block: 14px 22px; max-width: 46ch; font-size: 0.95rem; }

.shop__search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--radius-sm);
	padding: 6px 6px 6px 14px;
	max-width: 520px;
}
.shop__search-icon .icon { width: 18px; height: 18px; color: rgba(255,255,255,0.6); }
.shop__search input[type="search"] {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 10px 4px;
	min-width: 0;
}
.shop__search input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }
.shop__search input[type="search"]:focus { outline: none; }
.shop__search .btn { flex-shrink: 0; }

.shop__cat-tiles { margin-block-end: clamp(28px, 4vw, 44px); }
.shop__cat-tiles.cat-grid { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1280px) { .shop__cat-tiles.cat-grid { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 1024px) {
	.shop {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.shop__hero { grid-column: 1; grid-row: 1; }
	.shop__hero-inner { padding-inline-start: 0; max-width: 660px; }
	.shop__filters {
		grid-column: 1;
		grid-row: 2;
		position: static;
		margin-block-start: clamp(20px, 4vw, 36px);
		max-height: none;
	}
	.shop__main {
		grid-column: 1;
		grid-row: 3;
		padding-block-start: clamp(20px, 4vw, 36px);
	}
}

/* ===== ATLAS Labs (Innovations) — inside the shop content column ===== */
.shop-labs { margin-block-start: clamp(36px, 5vw, 64px); }
.shop-labs .section-head__title { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem); }
.shop-labs .section-head { margin-block-end: clamp(18px, 2.5vw, 28px); }
.lab-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	border-radius: var(--radius);
	overflow: clip;
}
.lab-card {
	position: relative;
	display: block;
	min-height: 240px;
	padding: 22px;
	background: var(--ink-bg);
	color: #fff;
	overflow: clip;
	isolation: isolate;
}
.lab-card__img {
	position: absolute;
	inset: 0;
	inset-inline-start: 38%;
	z-index: 0;
}
.lab-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lab-card::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, var(--ink-bg) 30%, rgba(11,11,12,0.6) 55%, rgba(11,11,12,0.15) 100%);
}
.lab-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: 62%; }
.lab-card__badge {
	align-self: flex-start;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-tint);
	border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	padding: 4px 8px;
	border-radius: 4px;
}
.lab-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.lab-card__text { color: var(--ink-text-muted); font-size: 0.8rem; line-height: 1.4; }
.lab-card__link { margin-top: 4px; color: var(--accent); }
.lab-card:hover .lab-card__link .icon { transform: translateX(4px); }

@media (max-width: 1400px) { .lab-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lab-cards { grid-template-columns: 1fr; } .lab-card__body { max-width: none; } }

/* ===== Trust strip (full-bleed dark, above the footer) ===== */
.shop-trust {
	background: var(--ink-bg);
	color: #fff;
	border-top: 1px solid var(--ink-border);
	padding-block: clamp(26px, 3vw, 40px);
	margin-block-start: clamp(24px, 4vw, 48px);
}
.shop-trust__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(16px, 2vw, 28px);
}
.shop-trust__item { display: flex; align-items: center; gap: 12px; }
.shop-trust__icon {
	width: 40px; height: 40px;
	flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--ink-border);
	color: var(--accent);
}
.shop-trust__icon .icon { width: 19px; height: 19px; }
.shop-trust__title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.shop-trust__text { display: block; color: var(--ink-text-muted); font-size: 0.74rem; margin-top: 2px; }

@media (max-width: 1100px) { .shop-trust__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .shop-trust__grid { grid-template-columns: repeat(2, 1fr); } }

/* Product grid — override WooCommerce's float layout */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
	list-style: none;
	margin: 0 !important;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
@media (max-width: 1200px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { ul.products, .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ===== Product card (design pages 3–4) — used in the grid AND home rails ===== */
.product-card {
	--card-fill: #f4f4f5;
	background: var(--card-fill);
	border: 1px solid transparent;
	border-radius: var(--radius);
	overflow: clip;
	display: flex;
	flex-direction: column;
	text-align: start;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="dark"] .product-card { --card-fill: #1b1b1e; }
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
.product-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent);
	box-shadow: var(--shadow);
}

/* Media (same fill as the rest of the card) */
.product-card__media {
	position: relative;
	background: var(--card-fill);
}
.product-card__media > a { display: block; }
.product-card .product-card__media img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	margin: 0 !important;
	padding: clamp(14px, 7%, 30px);
	transition: transform var(--dur) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__badge {
	position: absolute;
	top: 12px; inset-inline-start: 12px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 5px;
}
.product-card__wish {
	position: absolute;
	top: 10px; inset-inline-end: 10px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--card-fill) 70%, #fff 30%);
	color: var(--text-faint);
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.product-card__wish .icon { width: 17px; height: 17px; }
.product-card__wish:hover { color: var(--accent); }
.product-card__wish.is-wished { color: var(--accent); }
.product-card__wish.is-wished .icon { fill: var(--accent); }

/* Body */
.product-card__body { padding: 16px 16px 4px; flex: 1; }
.product-card__title { font-size: 0.98rem; font-weight: 700; line-height: 1.3; margin: 0; }
.product-card__title a { color: inherit; }
.product-card__title a:hover { color: var(--accent); }
.product-card__cat { display: block; color: var(--text-faint); font-size: var(--fs-caption); margin-top: 5px; }
.product-card__price { display: block; font-family: var(--font-head); font-weight: 700; margin-top: 8px; }

/* Actions */
.product-card__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 14px 16px 16px;
}
.product-card__go {
	flex-shrink: 0;
	width: 40px;
	display: grid; place-items: center;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: #fff;
	transition: background-color var(--dur) var(--ease);
}
.product-card__go .icon { width: 18px; height: 18px; }
.product-card__go:hover { background: var(--accent-hover); color: #fff; }
[dir="rtl"] .product-card__go .icon { transform: scaleX(-1); }
.product-card__view { flex: 1; justify-content: center; }

/* Catalog mode: hide price + rating + add-to-cart */
body.atlas-shop-off .price,
body.atlas-shop-off .star-rating,
body.atlas-shop-off .woocommerce-product-rating,
body.atlas-shop-off .add_to_cart_button,
body.atlas-shop-off .single_add_to_cart_button,
body.atlas-shop-off .quantity,
body.atlas-shop-off .cart .amount { display: none !important; }

.atlas-quote-cta {
	display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
	margin-block: 20px;
}

/* Single product */
.single-product div.product {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block: var(--section-y);
}
@media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; } }
.single-product .product_title { font-size: var(--fs-h2); }
.single-product .woocommerce-product-details__short-description { color: var(--text-muted); margin-block: 10px 20px; }

/* Tabs */
.woocommerce-tabs .wc-tabs {
	display: flex; gap: 20px; flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
	margin-block-end: 24px;
}
.woocommerce-tabs .wc-tabs li a {
	display: block; padding: 14px 2px;
	font-family: var(--font-head); font-weight: 700; font-size: 0.85rem;
	text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--text-faint);
}
.woocommerce-tabs .wc-tabs li.active a { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* Cart / checkout (styled but disabled while shop off) */
.woocommerce-cart-form table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; }
.cart_totals, .woocommerce-checkout-review-order {
	background: var(--card-bg); border: 1px solid var(--card-border);
	border-radius: var(--radius); padding: 24px;
}