/*
 * SmokTek homepage styles (Phase 5.3)
 *
 * Enqueued only on the front page (see functions.php). Section order,
 * breakpoints, and interaction details are captured verbatim from the
 * live Shopify storefront in docs/frontend-redesign/homepage-shopify-capture.md
 * — this file implements the layout described there using the
 * --smoktek-* tokens from tokens.css (Phase 5.0).
 */

/* Layout note: page 15 uses the parent's "Canvas" template
 * (template-canvas.php, full browser width). That template natively
 * suppresses the entry-title/breadcrumbs, uncaps .col-full, and makes
 * .content-area 100% wide — the page previously used the default page
 * template, whose right-sidebar layout squeezed every section into a
 * ~76%-wide column and rendered an unwanted "Home" h1 (both were being
 * patched over in CSS here; the template is the real fix, so those
 * patches are gone). Each section below manages its own max-width, so
 * full-bleed sections (hero, split showcases, brand spotlight) run
 * edge-to-edge like the Shopify reference and contained sections
 * (tiles, carousels, why-choose) center at their own cap. */

/* Shared badge — used wherever a linked tile/card might point at a
 * currently-empty category (see functions.php's render_block filter,
 * which strips this markup entirely once real products exist). */
.smoktek-badge-coming-soon {
	position: absolute;
	top: var(--smoktek-space-2);
	left: var(--smoktek-space-2);
	background: var(--smoktek-color-text);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: var(--smoktek-space-1) var(--smoktek-space-2);
	border-radius: var(--smoktek-radius-button);
	z-index: 2;
}

.smoktek-badge-coming-soon--card {
	top: var(--smoktek-space-4);
	left: var(--smoktek-space-4);
}

/* ---------------------------------------------------------------- */
/* 1. Hero slider                                                    */
/* ---------------------------------------------------------------- */

.smoktek-hero-slider {
	position: relative;
	width: 100%;
}

/* Slide WIDTH belongs to tiny-slider (it injects a per-item
 * width: calc(100% / N) rule and positions the track via an inline
 * width + translate3d), but slide LAYOUT is ours: the parent theme
 * bundles tiny-slider's JS without its companion stylesheet, so
 * nothing makes .tns-item elements sit in a row — without help they
 * stack vertically as plain blocks (verified live: track laid out at
 * 5x width but 5x height too). The parent's own PDP cross-sells
 * carousel solves this exact gap by keeping display:flex on the tns
 * container permanently (see reference/shoptimizer/assets/css/
 * components/pdp/cross-sells-carousel.css) — same pattern here. What
 * we must NOT do is give slides a flex-basis/min-width of our own:
 * that overrides tiny-slider's injected item width and inflates every
 * slide to full-track size (the original ~5x-oversized-hero bug), so
 * the 100%-basis rule is strictly pre-init, scoped to
 * :not(.tns-slider). */
.smoktek-hero-slider__track {
	display: flex;
}

.smoktek-hero-slider__track:not(.tns-slider) {
	overflow: hidden;
}

.smoktek-hero-slider__track:not(.tns-slider) .smoktek-hero-slider__slide {
	flex: 0 0 100%;
}

.smoktek-hero-slider__track.tns-slider > .tns-item {
	flex-shrink: 0;
}

.smoktek-hero-slider__slide a {
	display: block;
}

.smoktek-hero-slider__slide picture,
.smoktek-hero-slider__slide img {
	display: block;
	width: 100%;
}

.smoktek-hero-slider__slide img {
	aspect-ratio: 1920 / 450;
	object-fit: cover;
	background: #f5f3ef;
}

@media (max-width: 767px) {
	.smoktek-hero-slider__slide img {
		aspect-ratio: 3 / 4;
	}
}

/* tiny-slider's own generated controls (.tns-controls, two <button>s)
 * and nav dots (.tns-nav, one <button> per slide with a native
 * "tns-nav-active" class on the current one) — see home-hero.js for why
 * we don't hand-author these ourselves. Both are inserted as descendants
 * of .smoktek-hero-slider (position: relative, set above), so absolute
 * positioning here is relative to the hero, not the viewport. */
.smoktek-hero-slider .tns-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 var(--smoktek-space-4);
	pointer-events: none;
	z-index: 3;
}

.smoktek-hero-slider .tns-controls button {
	pointer-events: auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #f5f5f5;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.smoktek-hero-slider .tns-nav {
	position: absolute;
	bottom: var(--smoktek-space-4);
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: var(--smoktek-space-2);
	z-index: 3;
}

.smoktek-hero-slider .tns-nav button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.6);
	padding: 0;
	cursor: pointer;
}

.smoktek-hero-slider .tns-nav button.tns-nav-active {
	background: #fff;
}

/* tiny-slider's "slide N of M" a11y announcement (.tns-liveregion) ships
 * with a "tns-visually-hidden" class but the parent theme only bundles
 * tiny-slider's JS, not its companion CSS - without this rule the text
 * renders as plain visible copy above the hero (confirmed on staging
 * during the Phase 5.3 visual verification pass). Standard visually-
 * hidden pattern, matches WordPress core's own .screen-reader-text. */
.tns-visually-hidden {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* 2. Category tiles                                                 */
/* ---------------------------------------------------------------- */

.smoktek-category-tiles {
	max-width: var(--smoktek-container);
	margin: 0 auto;
	padding: var(--smoktek-space-12) var(--smoktek-space-4);
}

.smoktek-category-tiles__track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: min(35px, 3vw);
}

.smoktek-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--smoktek-color-text);
	transition: transform 0.2s ease;
}

.smoktek-category-tile:hover {
	transform: translateY(-10px);
}

.smoktek-category-tile__image {
	position: relative;
	display: block;
	width: 100%;
	max-width: 270px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}

.smoktek-category-tile__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Weight measured against the live Shopify category tiles (2026-07-27):
 * 18px/600, not 700 - spacing/alignment already matched. */
.smoktek-category-tile__label {
	margin-top: var(--smoktek-space-3);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

.smoktek-category-tiles__dots {
	display: none;
	justify-content: center;
	gap: var(--smoktek-space-2);
	margin-top: var(--smoktek-space-4);
}

.smoktek-category-tiles__dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #ddd;
	padding: 0;
	cursor: pointer;
}

.smoktek-category-tiles__dots button[aria-current="true"] {
	background: #ff5a1f;
}

@media (max-width: 749px) {
	.smoktek-category-tiles__track {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--smoktek-space-4);
		scrollbar-width: none;
	}

	.smoktek-category-tiles__track::-webkit-scrollbar {
		display: none;
	}

	.smoktek-category-tile {
		flex: 0 0 120px;
		scroll-snap-align: start;
	}

	.smoktek-category-tile__image {
		max-width: 120px;
	}

	.smoktek-category-tiles__dots {
		display: flex;
	}
}

/* ---------------------------------------------------------------- */
/* 3. Brand spotlight                                                */
/* ---------------------------------------------------------------- */

/* Contained row, capped at the shared homepage container (1360px) and
 * centered — screenshot- and measurement-verified against the live
 * site at 1440px: the spotlight and showcase rows sit inside the same
 * ~1360px column as the tiles/carousels/why-choose, not edge-to-edge
 * full bleed (the earlier full-bleed reading of the capture was wrong
 * and made the banners look oversized/disproportionate). The clamp
 * padding still provides gutter below the container's own max-width. */
.smoktek-brand-spotlight {
	max-width: var(--smoktek-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 40px) var(--smoktek-space-8);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.smoktek-spotlight-card {
	position: relative;
	display: block;
	aspect-ratio: 3.1 / 1;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	color: inherit;
}

.smoktek-spotlight-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.smoktek-spotlight-card:hover {
	transform: scale(1.015);
}

.smoktek-spotlight-card:hover .smoktek-spotlight-card__bg {
	transform: scale(1.06);
}

.smoktek-spotlight-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: var(--smoktek-space-6);
}

.smoktek-spotlight-card__tag {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--smoktek-space-1);
}

.smoktek-spotlight-card__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--smoktek-color-text);
}

.smoktek-spotlight-card__title-accent {
	color: var(--smoktek-color-primary);
}

.smoktek-spotlight-card__subtext {
	display: block;
	margin: var(--smoktek-space-2) 0;
	font-size: 14px;
	max-width: 320px;
}

/* Measured from the live "SHOP SMOKEJUICE →" CTA: 12px/700 uppercase,
 * ls ~0.08em, radius 4 (a small rounded rect, not a pill), 8x16 pad. */
.smoktek-spotlight-card__cta {
	display: inline-block;
	margin-top: var(--smoktek-space-2);
	background: var(--smoktek-color-primary);
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	width: fit-content;
	transition: background 0.2s ease;
}

.smoktek-spotlight-card:hover .smoktek-spotlight-card__cta {
	background: var(--smoktek-color-primary-hover);
}

@media (max-width: 899px) {
	.smoktek-brand-spotlight {
		grid-template-columns: 1fr;
	}

	.smoktek-spotlight-card {
		aspect-ratio: 2 / 1;
	}

	.smoktek-spotlight-card::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	}

	.smoktek-spotlight-card__title,
	.smoktek-spotlight-card__subtext,
	.smoktek-spotlight-card__tag {
		color: #fff;
	}
}

/* At narrow widths a 2:1 box is too short for tag + 2-line title +
 * subtext + CTA (confirmed by direct measurement during the Phase 5.3
 * visual verification pass: ~186px of content needed vs. ~144px
 * available at 320px), so overflow:hidden was clipping the CTA button.
 * Switch to a min-height driven by content instead of a fixed ratio. */
@media (max-width: 549px) {
	.smoktek-spotlight-card {
		aspect-ratio: auto;
		min-height: 220px;
	}
}

/* ---------------------------------------------------------------- */
/* 4/6. Product carousels (Top Sellers / New Arrivals)               */
/* ---------------------------------------------------------------- */

/* Heading + arrows share one contained flex row (heading left, arrows
 * flush right) instead of the old absolute-positioning hack, which
 * staggered the two buttons ~24px apart when measured against the
 * live Shopify header row. Markup lives in the product-carousel.php
 * pattern (and its page-15 Top Sellers/New Arrivals instances). */
.smoktek-carousel-head {
	max-width: var(--smoktek-container);
	margin: 0 auto var(--smoktek-space-6);
	padding: 0 var(--smoktek-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smoktek-space-4);
}

.smoktek-product-carousel__heading {
	font-size: 48px;
	margin: 0;
}

@media (max-width: 749px) {
	.smoktek-product-carousel__heading {
		font-size: 34px;
	}
}

.smoktek-carousel-nav {
	display: flex;
	gap: var(--smoktek-space-2);
	flex-shrink: 0;
}

.smoktek-product-carousel {
	max-width: var(--smoktek-container);
	margin: 0 auto var(--smoktek-space-6);
	padding: 0 var(--smoktek-space-4);
}

/* Border color is the only state change (measured against the live
 * arrows: 2px border, #ddd disabled / #E85C00 active) — home-hero.js
 * already toggles the native `disabled` property via scroll-position
 * checks, so :disabled here is all the styling this needs. */
.smoktek-product-carousel__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--smoktek-color-primary);
	background: #fff;
	color: var(--smoktek-color-primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.smoktek-product-carousel__arrow:disabled {
	border-color: #ddd;
	color: #ddd;
	cursor: default;
}

.smoktek-product-carousel__collection.wp-block-woocommerce-product-collection {
	display: flex !important;
	width: 100%;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--smoktek-space-2);
}

.smoktek-product-carousel__collection.wp-block-woocommerce-product-collection::-webkit-scrollbar {
	display: none;
}

/* Renders only when the collection's query returns zero products
 * (WooCommerce's own product-collection-no-results inner block,
 * Phase 5.3 P2). Without this inner block WooCommerce suppresses the
 * ENTIRE collection wrapper on an empty query (confirmed by reading
 * ProductCollection/Renderer.php's should_prevent_render()) - this is
 * what was actually causing Top Sellers to vanish and its arrows to
 * never get a working row to measure, not a flaw in the disabled-
 * state logic itself. Sized to roughly match a populated row (443px
 * card height from the P1 measurement pass) so the section keeps its
 * layout/spacing; query/data source are untouched, so real products
 * appear automatically once a valid category exists - no code change
 * needed then.
 *
 * WordPress renders the no-results INNER BLOCK inside its OWN extra
 * wrapper div carrying just the plain
 * `wp-block-woocommerce-product-collection-no-results` class - the
 * div I authored in the pattern/page content (with the
 * `smoktek-product-carousel__empty` class already on it) ends up
 * nested ONE LEVEL INSIDE that auto-generated wrapper, not merged
 * onto it (confirmed live: the outer wrapper had flex-grow:0 and
 * never stretched, no matter what I set on the inner one). The actual
 * flex CHILD that needs stretching is that outer, class-less wrapper -
 * targeted here via the row's own class + a child combinator instead
 * of relying on a custom class landing where expected. */
.smoktek-product-carousel__collection > .wp-block-woocommerce-product-collection-no-results {
	flex: 1 1 100%;
	width: 100%;
}

.smoktek-product-carousel__empty {
	width: 100%;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #e0dcd6;
	border-radius: 10px;
	background: #faf9f7;
	color: #888;
	font-size: 14px;
}

.smoktek-product-carousel__collection .wc-block-product-template,
.smoktek-product-carousel__collection ul.wc-block-product-template {
	display: contents;
}

.smoktek-product-carousel__collection li.wc-block-product,
.smoktek-product-carousel__collection li.product {
	flex: 0 0 calc(20% - 16px);
	scroll-snap-align: start;
	list-style: none;
}

/* -- Card branding --
 * The woocommerce/product-collection block renders through WooCommerce
 * Blocks markup (wc-block-* / wp-block-post-title classes), a different
 * namespace from the classic loop markup that Shoptimizer's Customizer
 * color options target — so these cards get NONE of the Phase 5.0 brand
 * colors unless styled here directly. Every value below is MEASURED
 * from the live smoktek.com card DOM (2026-07-24), not approximated:
 * card = #fff, 1px #e0dcd6 border, radius 10, shadow 0 2px 8px 6%;
 * brand line = uppercase orange; title = 14px weight 400 (NOT bold),
 * left-aligned, rgba(0,0,0,.81), lh 1.6; price = orange 700;
 * button = uppercase 13px/700, ls 0.06em, radius 5, padding 11px 10px.
 * Hover lift + blue #1d3686 border per the capture. */
.smoktek-product-carousel__collection li.wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--smoktek-space-2);
	background: #fff;
	border: 1px solid #e0dcd6;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	padding: 0 0 var(--smoktek-space-3);
	overflow: hidden;
	text-align: left;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
	.smoktek-product-carousel__collection li.wc-block-product:hover {
		transform: translateY(-3px);
		border-color: #1d3686;
	}
}

.smoktek-product-carousel__collection .wc-block-components-product-image {
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
	margin: 0;
}

.smoktek-product-carousel__collection .wc-block-components-product-image a,
.smoktek-product-carousel__collection .wc-block-components-product-image__inner-container {
	display: block;
	width: 100%;
	height: 100%;
}

.smoktek-product-carousel__collection .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Brand line (core/post-terms on the product_brand taxonomy) —
 * uppercase orange eyebrow above the title, like OXBAR / DEKANG /
 * SMOKTEK on the live cards. Renders as nothing for brandless
 * products. */
.smoktek-product-carousel__collection .wp-block-post-terms {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 var(--smoktek-space-3);
}

.smoktek-product-carousel__collection .wp-block-post-terms a {
	color: var(--smoktek-color-primary);
	text-decoration: none;
}

.smoktek-product-carousel__collection .wp-block-post-title {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
	margin: 0 var(--smoktek-space-3);
	flex-grow: 1;
}

.smoktek-product-carousel__collection .wp-block-post-title a {
	color: rgba(0, 0, 0, 0.81);
	text-decoration: none;
}

.smoktek-product-carousel__collection .wp-block-post-title a:hover {
	color: var(--smoktek-color-primary);
}

.smoktek-product-carousel__collection .wc-block-components-product-price {
	color: var(--smoktek-color-primary);
	font-size: 18px;
	font-weight: 700;
	margin: 0 var(--smoktek-space-3);
}

.smoktek-product-carousel__collection .wc-block-components-product-price del {
	color: #999;
	font-weight: 400;
	font-size: 14px;
}

.smoktek-product-carousel__collection .wc-block-components-product-button {
	width: auto;
	margin: 0 var(--smoktek-space-3);
	align-items: stretch;
}

.smoktek-product-carousel__collection .wc-block-components-product-button__button {
	width: 100%;
	background: var(--smoktek-color-primary);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 11px 10px;
	text-align: center;
	transition: background 0.2s ease;
}

.smoktek-product-carousel__collection .wc-block-components-product-button__button:hover {
	background: var(--smoktek-color-primary-hover);
	color: #fff;
}

/* "EXPLORE TOP SELLERS →" / "EXPLORE NEW ARRIVALS →" — the core
 * button block defaults to a dark fill; measured Shopify treatment is
 * orange, uppercase, 15px/700, ls 1.2px, radius 5, padding 14px 36px. */
.smoktek-product-carousel__cta .wp-block-button__link {
	background: var(--smoktek-color-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 5px;
	padding: 14px 36px;
	transition: background 0.2s ease;
}

.smoktek-product-carousel__cta .wp-block-button__link:hover {
	background: var(--smoktek-color-primary-hover);
	color: #fff;
}

.smoktek-product-carousel__cta {
	margin-top: var(--smoktek-space-6);
}

@media (max-width: 1024px) {
	.smoktek-product-carousel__collection li.wc-block-product,
	.smoktek-product-carousel__collection li.product {
		flex: 0 0 calc(25% - 15px);
	}
}

@media (max-width: 749px) {
	.smoktek-product-carousel__collection li.wc-block-product,
	.smoktek-product-carousel__collection li.product {
		flex: 0 0 calc(50% - 10px);
	}
}

@media (max-width: 479px) {
	.smoktek-product-carousel__collection li.wc-block-product,
	.smoktek-product-carousel__collection li.product {
		flex: 0 0 82%;
	}

	.smoktek-product-carousel__arrow {
		display: none;
	}
}

/* ---------------------------------------------------------------- */
/* 5/7. Split showcases                                              */
/* ---------------------------------------------------------------- */

/* Both showcase rows are contained at the shared homepage container
 * width, with a 24px gap and rounded cards (screenshot-verified at
 * 1440 — neither row is edge-to-edge). "--full" now only selects the
 * larger 18px radius of showcase #1 vs showcase #2's 8px, per the
 * capture. */
.smoktek-split-showcase {
	max-width: var(--smoktek-container);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding: var(--smoktek-space-6) clamp(16px, 3vw, 40px);
	margin: 0 auto;
}

.smoktek-showcase-card {
	position: relative;
	display: block;
	aspect-ratio: 3.1 / 1;
	border-radius: 8px;
	overflow: hidden;
}

.smoktek-split-showcase--full .smoktek-showcase-card {
	border-radius: 18px;
}

.smoktek-showcase-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.smoktek-showcase-card:hover img {
	transform: scale(1.06) translateY(-4px);
}

@media (max-width: 899px) {
	.smoktek-split-showcase {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- */
/* 8. Why Choose SmokTek                                             */
/* ---------------------------------------------------------------- */

.smoktek-why-choose {
	max-width: var(--smoktek-container);
	margin: 0 auto;
	padding: var(--smoktek-space-12) var(--smoktek-space-4);
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--smoktek-space-8);
}

.smoktek-why-choose__heading {
	font-size: 34px;
	margin-bottom: var(--smoktek-space-1);
}

.smoktek-why-choose__heading-accent {
	color: #ff6b00;
}

.smoktek-why-choose__subheading {
	color: #666;
	margin-bottom: var(--smoktek-space-6);
}

.smoktek-why-choose__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--smoktek-space-4);
}

/* Screenshot-verified against the live site: highlight cards are
 * SOLID orange with white 21px/800 titles and white body text; regular
 * cards are white. Card padding/radius, icon treatment, and typography
 * re-measured directly against the live DOM in the P2 pass
 * (2026-07-27) - the earlier "small bordered chip" icon treatment and
 * flat 20px padding were both approximations from an eyeballed
 * screenshot read, not measurements; corrected here to the real
 * values: padding 32px/26px (not 20px flat), radius 14px (not 12px),
 * and a plain 62x62 icon with NO border/background/radius on either
 * card variant (the bordered-chip look doesn't exist on Shopify at
 * all). */
.smoktek-benefit-card {
	padding: 32px 26px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid #e5e0d8;
}

.smoktek-benefit-card--highlight {
	background: #ff6b00;
	border-color: #ff6b00;
}

/* Icon color is the SAME dark tone on both card variants - measured
 * live, including on the orange highlight card, where it still reads
 * fine against the background. */
.smoktek-benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	color: rgba(0, 0, 0, 0.81);
	margin-bottom: var(--smoktek-space-3);
}

.smoktek-benefit-card__icon svg {
	width: 100%;
	height: 100%;
}

.smoktek-benefit-card__title {
	font-size: 21px;
	font-weight: 800;
	color: rgba(0, 0, 0, 0.81);
	margin-bottom: var(--smoktek-space-1);
}

.smoktek-benefit-card--highlight .smoktek-benefit-card__title {
	color: #fff;
}

.smoktek-benefit-card__description {
	font-size: 15px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.81);
	margin: 0;
}

.smoktek-benefit-card--highlight .smoktek-benefit-card__description {
	color: #fff;
}

.smoktek-why-choose__story {
	display: flex;
	flex-direction: column;
}

.smoktek-why-choose__story-text {
	font-size: 15px;
	line-height: 1.6;
}

.smoktek-why-choose__story-photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
	margin: var(--smoktek-space-4) 0;
}

.smoktek-why-choose__story-cta {
	display: inline-block;
	align-self: flex-end;
	background: #ff6b00;
	color: #fff;
	padding: 12px var(--smoktek-space-6);
	border-radius: 5px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

@media (max-width: 899px) {
	.smoktek-why-choose {
		grid-template-columns: 1fr;
	}

	.smoktek-why-choose__story {
		order: -1;
	}
}

@media (max-width: 549px) {
	.smoktek-why-choose__grid {
		grid-template-columns: 1fr;
	}

	.smoktek-benefit-card {
		display: flex;
		align-items: center;
		gap: var(--smoktek-space-3);
	}

	.smoktek-benefit-card__icon {
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.smoktek-why-choose__story-cta {
		align-self: center;
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------- */
/* 9. Reviews slot + newsletter band                                 */
/* ---------------------------------------------------------------- */

/* min-height measured against the live Shopify reviews section
 * (its Shopper Approved app block, 2026-07-27): ~350px. Full parity
 * still waits on the Shopper Approved integration decision - this is
 * an honest "coming soon" placeholder, not fake review content - but
 * it now reserves the same amount of vertical space so the page
 * doesn't visibly collapse where that section will sit. */
.smoktek-reviews-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 350px;
	text-align: center;
	padding: var(--smoktek-space-6) var(--smoktek-space-4);
	background: #fff;
	color: #888;
	font-size: 14px;
}

/* The "Join SmokTek & Save 10%" newsletter band lives in the FOOTER
 * (its top row, dark background, heading left / inline form right),
 * matching the live Shopify footer — rendered from functions.php and
 * styled in footer.css. It was previously a standalone light band
 * here on the page, which is not where Shopify puts it. */