/**
 * Smoke Shop — component styles.
 *
 * Design language: onyx base, brass + ember accents, frosted-glass surfaces,
 * hairline borders. Aspect-ratios are locked on every image to guarantee zero
 * layout shift. Motion is opt-out via prefers-reduced-motion.
 *
 * All colors derive from the tokens below; keep these in sync with the SVG
 * placeholder generator (inc/placeholders.php).
 */

:root {
	--ss-ink: #0e0e10;
	--ss-coal: #16161a;
	--ss-raise: #1d1d23;
	--ss-line: rgba(201, 162, 75, 0.18);
	--ss-line-soft: rgba(255, 255, 255, 0.08);
	--ss-smoke: #9a9aa3;
	--ss-haze: #ececf1;
	--ss-white: #f7f7fa;
	--ss-brass: #c9a24b;
	--ss-brass-2: #e3c074;
	--ss-ember: #ff6a3d;

	--ss-radius: 14px;
	--ss-radius-sm: 9px;
	--ss-wrap: 1200px;
	--ss-gap: clamp(16px, 2.4vw, 28px);

	--ss-font-display: "Bricolage Grotesque", "Sora", system-ui, sans-serif;
	--ss-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ss-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- Base scaffolding (scoped, won't fight a host theme's resets) -------- */
.ss-section {
	background: var(--ss-ink);
	color: var(--ss-haze);
	padding: clamp(48px, 7vw, 104px) 0;
	font-family: var(--ss-font-body);
}
.ss-wrap {
	width: min(var(--ss-wrap), 100% - 2 * clamp(18px, 5vw, 48px));
	margin-inline: auto;
}

/* ---- Section headers ----------------------------------------------------- */
.ss-section__head {
	max-width: 640px;
	margin-bottom: clamp(28px, 4vw, 52px);
}
.ss-section__head--row {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ss-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ss-brass);
	margin-bottom: 14px;
}
.ss-section__title {
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: clamp(28px, 4.4vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ss-white);
	margin: 0;
}
.ss-section__intro {
	margin: 16px 0 0;
	color: var(--ss-smoke);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.6;
}
.ss-section__foot {
	margin-top: clamp(28px, 4vw, 44px);
	text-align: center;
}

/* ---- Buttons ------------------------------------------------------------- */
.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ss-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 13px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.25s var(--ss-ease), background 0.25s var(--ss-ease),
		border-color 0.25s var(--ss-ease), color 0.25s var(--ss-ease);
}
.ss-btn .ss-icon {
	transition: transform 0.25s var(--ss-ease);
}
.ss-btn:hover .ss-icon {
	transform: translateX(3px);
}
.ss-btn--solid {
	background: var(--ss-ember);
	color: #1a0f0a;
}
.ss-btn--solid:hover {
	transform: translateY(-2px);
	background: #ff7d54;
}
.ss-btn--ghost {
	background: transparent;
	color: var(--ss-haze);
	border-color: var(--ss-line);
	padding: 10px 16px;
}
.ss-btn--ghost:hover {
	border-color: var(--ss-brass);
	color: var(--ss-brass-2);
}

/* ---- Locked-ratio images (zero CLS) -------------------------------------- */
.ss-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-img--card { aspect-ratio: 4 / 5; }
.ss-img--category { aspect-ratio: 4 / 3; }
.ss-img--square { aspect-ratio: 1 / 1; }
.ss-img--wide { aspect-ratio: 16 / 9; }
.ss-img--slide { aspect-ratio: 3 / 2; }
.ss-img--hero { aspect-ratio: 1920 / 900; }
.ss-img--placeholder { background: var(--ss-coal); }

/* ---- Grids --------------------------------------------------------------- */
.ss-grid { display: grid; gap: var(--ss-gap); }
.ss-grid--products { grid-template-columns: repeat(4, 1fr); }
.ss-grid--categories { grid-template-columns: repeat(4, 1fr); }
.ss-grid--testimonials { grid-template-columns: repeat(2, 1fr); }

/* ---- Product card -------------------------------------------------------- */
.ss-card {
	position: relative;
	background: var(--ss-coal);
	border: 1px solid var(--ss-line-soft);
	border-radius: var(--ss-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--ss-ease), border-color 0.35s var(--ss-ease),
		box-shadow 0.35s var(--ss-ease);
}
.ss-card:hover {
	transform: translateY(-6px);
	border-color: var(--ss-line);
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.8);
}
.ss-card__media {
	position: relative;
	display: block;
	overflow: hidden;
}
.ss-card__media .ss-img {
	transition: transform 0.6s var(--ss-ease);
}
.ss-card:hover .ss-card__media .ss-img {
	transform: scale(1.05);
}
.ss-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1a0f0a;
	background: var(--ss-brass-2);
	padding: 5px 10px;
	border-radius: 999px;
}
.ss-card__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.ss-card__title {
	margin: 0;
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.ss-card__title a { color: var(--ss-white); text-decoration: none; }
.ss-card__title a:hover { color: var(--ss-brass-2); }
.ss-card__desc {
	margin: 0;
	color: var(--ss-smoke);
	font-size: 14px;
	line-height: 1.5;
}
.ss-card__foot {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ss-card__price {
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--ss-brass-2);
}

/* ---- Category card ------------------------------------------------------- */
.ss-cat {
	position: relative;
	display: block;
	border-radius: var(--ss-radius);
	overflow: hidden;
	text-decoration: none;
	border: 1px solid var(--ss-line-soft);
	isolation: isolate;
}
.ss-cat__media { display: block; }
.ss-cat__media .ss-img { transition: transform 0.6s var(--ss-ease); }
.ss-cat:hover .ss-cat__media .ss-img { transform: scale(1.06); }
.ss-cat__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 18px;
	background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 8%, rgba(8, 8, 10, 0.25) 55%, transparent 90%);
}
.ss-cat__name {
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--ss-white);
	letter-spacing: -0.01em;
}
.ss-cat__desc {
	font-size: 13px;
	color: var(--ss-smoke);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ss-ease), opacity 0.3s var(--ss-ease);
}
.ss-cat:hover .ss-cat__desc { max-height: 60px; opacity: 1; }
.ss-cat__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}
.ss-cat__count {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ss-brass);
}
.ss-cat__go {
	color: var(--ss-haze);
	transform: translateX(-4px);
	opacity: 0;
	transition: transform 0.3s var(--ss-ease), opacity 0.3s var(--ss-ease);
}
.ss-cat:hover .ss-cat__go { transform: translateX(0); opacity: 1; }

/* ---- Featured slider ----------------------------------------------------- */
.ss-slider__controls { display: flex; gap: 10px; }
.ss-slider__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ss-line);
	background: var(--ss-coal);
	color: var(--ss-haze);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s var(--ss-ease), color 0.25s var(--ss-ease), opacity 0.25s;
}
.ss-slider__btn:hover { background: var(--ss-raise); color: var(--ss-brass-2); }
.ss-slider__btn[disabled] { opacity: 0.35; cursor: default; }
.ss-flip { transform: scaleX(-1); }
.ss-slider__viewport {
	width: min(var(--ss-wrap), 100% - 2 * clamp(18px, 5vw, 48px));
	margin: clamp(20px, 3vw, 32px) auto 0;
	overflow: hidden;
}
.ss-slider__track {
	display: flex;
	gap: var(--ss-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.ss-slider__track::-webkit-scrollbar { display: none; }
.ss-slider__slide {
	flex: 0 0 clamp(240px, 26vw, 300px);
	scroll-snap-align: start;
}

/* ---- Gallery ------------------------------------------------------------- */
.ss-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: var(--ss-gap);
}
.ss-gallery__item {
	position: relative;
	border-radius: var(--ss-radius);
	overflow: hidden;
	border: 1px solid var(--ss-line-soft);
	margin: 0;
}
.ss-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
.ss-gallery__img { transition: transform 0.6s var(--ss-ease), filter 0.4s var(--ss-ease); }
.ss-gallery__item:hover .ss-gallery__img { transform: scale(1.05); }

/* ---- Testimonials -------------------------------------------------------- */
.ss-quote {
	position: relative;
	margin: 0;
	background: var(--ss-coal);
	border: 1px solid var(--ss-line-soft);
	border-radius: var(--ss-radius);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ss-quote__mark { color: var(--ss-line); }
.ss-quote__stars { display: flex; gap: 3px; color: rgba(255, 255, 255, 0.18); }
.ss-star.is-on { color: var(--ss-brass-2); }
.ss-quote__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ss-haze);
}
.ss-quote__author { display: flex; align-items: center; gap: 12px; }
.ss-quote__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--ss-line);
	flex: 0 0 auto;
}
.ss-quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-quote__id { display: flex; flex-direction: column; }
.ss-quote__name { font-weight: 600; color: var(--ss-white); font-size: 15px; }
.ss-quote__role { font-size: 13px; color: var(--ss-smoke); }

/* ---- Hero banner --------------------------------------------------------- */
.ss-hero {
	position: relative;
	min-height: clamp(360px, 56vh, 620px);
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--ss-ink);
}
.ss-hero__media { position: absolute; inset: 0; z-index: 0; }
.ss-hero__media .ss-img { width: 100%; height: 100%; }
.ss-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.6) 45%, rgba(8, 8, 10, 0.25) 100%);
}
.ss-hero__inner {
	position: relative;
	z-index: 1;
	width: min(var(--ss-wrap), 100% - 2 * clamp(18px, 5vw, 48px));
	margin-inline: auto;
	padding: clamp(40px, 7vw, 80px) 0;
	max-width: 720px;
}
.ss-hero__title {
	font-family: var(--ss-font-display);
	font-weight: 600;
	font-size: clamp(34px, 6vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--ss-white);
	margin: 12px 0 0;
}
.ss-hero__sub {
	margin: 18px 0 28px;
	color: var(--ss-haze);
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.55;
	max-width: 52ch;
}

/* ---- Contact / info chips (icons) ---------------------------------------- */
.ss-info { display: flex; align-items: center; gap: 10px; color: var(--ss-smoke); font-size: 15px; }
.ss-info .ss-icon { color: var(--ss-brass); flex: 0 0 auto; }

/* ---- Scroll reveal ------------------------------------------------------- */
.ss-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ss-ease), transform 0.7s var(--ss-ease);
	will-change: opacity, transform;
}
.ss-reveal.is-in { opacity: 1; transform: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.ss-grid--products,
	.ss-grid--categories { grid-template-columns: repeat(2, 1fr); }
	.ss-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
	.ss-grid--products,
	.ss-grid--categories,
	.ss-grid--testimonials { grid-template-columns: 1fr; }
	.ss-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.ss-gallery__item--wide { grid-column: span 2; grid-row: span 1; }
	.ss-section__head--row { align-items: flex-start; }
}

/* ---- Motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ss-reveal { opacity: 1; transform: none; transition: none; }
	.ss-card,
	.ss-card .ss-img,
	.ss-cat .ss-img,
	.ss-gallery__img,
	.ss-btn,
	.ss-icon { transition: none !important; }
	.ss-slider__track { scroll-behavior: auto; }
}

/* ---- Keyboard focus ------------------------------------------------------ */
.ss-btn:focus-visible,
.ss-cat:focus-visible,
.ss-slider__btn:focus-visible,
.ss-card__title a:focus-visible {
	outline: 2px solid var(--ss-brass-2);
	outline-offset: 3px;
	border-radius: 6px;
}
/* ============================================================
   APE VAPE — Custom styles
   Paste the WHOLE of this into: Appearance → Customize → Additional CSS
   (Replace what's there each time so nothing duplicates.)
   ============================================================ */

/* ---------- SECTION 1 — Header ---------- */

.ss-logo__lockup { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ss-logo__tagline {
	font-family: var(--ss-font-body, "Inter", sans-serif);
	font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ss-brass, #c9a24b); margin-top: 5px;
}

.ss-nav__list .current-menu-item > a::after,
.ss-nav__list .current_page_item > a::after,
.ss-nav__list .current-menu-ancestor > a::after {
	content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
	height: 2px; background: var(--ss-brass, #c9a24b); border-radius: 2px;
}

.ss-topbar__map { color: var(--ss-smoke, #9a9aa3); }
.ss-topbar__map:hover { color: var(--ss-brass-2, #e3c074); }

/* ---------- SECTION 2 — Hero (split layout) ---------- */

.ss-hero--split {
	display: block; min-height: auto; overflow: visible;
	padding: clamp(36px, 6vw, 88px) 0;
	background:
		radial-gradient(1200px 600px at 78% 20%, rgba(255,106,61,0.10), transparent 60%),
		var(--ss-ink, #0e0e10);
}
.ss-hero--split .ss-hero__grid {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 4vw, 60px); align-items: center;
}
.ss-hero__content { max-width: 640px; }
.ss-hero--split .ss-hero__title { margin: 14px 0 0; }

.ss-hero__rating { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; color: var(--ss-haze, #ececf1); font-size: 15px; }
.ss-hero__stars { color: #f4b740; letter-spacing: 2px; font-size: 16px; line-height: 1; }
.ss-hero__rating b { color: var(--ss-white, #f7f7fa); font-weight: 700; }
.ss-hero__gwrap { display: inline-flex; align-items: center; margin-left: 4px; }

.ss-hero--split .ss-hero__sub { margin: 18px 0 0; max-width: 50ch; }
.ss-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.ss-hero__badges {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px; margin-top: 34px;
	border-top: 1px solid var(--ss-line-soft, rgba(255,255,255,0.08)); padding-top: 26px;
}
.ss-hero__badge { display: flex; align-items: flex-start; gap: 11px; }
.ss-hero__badge .ss-icon { color: var(--ss-brass, #c9a24b); margin-top: 2px; flex: 0 0 auto; }
.ss-hero__badge-txt b { display: block; color: var(--ss-white, #f7f7fa); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ss-hero__badge-txt > span { color: var(--ss-smoke, #9a9aa3); font-size: 12.5px; }

.ss-hero__panel {
	position: relative; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--ss-line, rgba(201,162,75,0.18));
	background: var(--ss-coal, #16161a); aspect-ratio: 4 / 3.4;
	box-shadow: 0 40px 90px -45px rgba(0,0,0,0.85);
}
.ss-hero__panel .ss-img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.ss-hero--split .ss-hero__grid { grid-template-columns: 1fr; }
	.ss-hero__panel { order: -1; aspect-ratio: 16 / 10; }
	.ss-hero__badges { grid-template-columns: 1fr; }
}
<?php
/**
 * Template part: hero banner.
 *
 * Two layouts:
 *  - "split"  (homepage): text column left, framed product image right,
 *             with a Google rating line and a trust-badge row.
 *  - "cover"  (inner pages): full-bleed background image with overlaid text.
 *
 * Context via $args or the 'ss_hero' query var: slot, title, sub, eager, cta.
 *
 * @package SmokeShop
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$ctx = ! empty( $args ) ? $args : get_query_var( 'ss_hero', array() );
$ctx = wp_parse_args(
	$ctx,
	array(
		'slot'  => 'hero_about',
		'title' => get_the_title(),
		'sub'   => '',
		'eager' => true,
		'cta'   => array(),
	)
);

$is_split = is_front_page();

if ( $is_split ) {
	$eyebrow = get_theme_mod( 'smokeshop_hero_home_eyebrow', __( 'Las Vegas • Premium Smoke Shop', 'smokeshop' ) );
	$hours   = smokeshop_opt( 'hours' );
	$reviews_url = smokeshop_opt( 'reviews_url' );
	$rt_open  = $reviews_url ? '<a class="ss-hero__rating" href="' . esc_url( $reviews_url ) . '" target="_blank" rel="noopener noreferrer">' : '<div class="ss-hero__rating">';
	$rt_close = $reviews_url ? '</a>' : '</div>';
	$badges  = array(
		array( 'icon' => 'check',  'label' => __( 'Authentic Products', 'smokeshop' ),     'sub' => __( '100% Genuine & Trusted', 'smokeshop' ) ),
		array( 'icon' => 'check',  'label' => __( '30+ Premium Brands', 'smokeshop' ),      'sub' => __( 'Top Brands You Love', 'smokeshop' ) ),
		array( 'icon' => 'hours',  'label' => __( 'Open Daily', 'smokeshop' ),              'sub' => $hours ? $hours : __( '10AM – 10PM', 'smokeshop' ) ),
		array( 'icon' => 'check',  'label' => __( 'Friendly Local Service', 'smokeshop' ),  'sub' => __( 'Here to Help You', 'smokeshop' ) ),
	);
	?>
	<section class="ss-hero ss-hero--split">
		<div class="ss-wrap ss-hero__grid">
			<div class="ss-hero__content ss-reveal">
				<span class="ss-eyebrow"><?php echo esc_html( $eyebrow ); ?></span>
				<h1 class="ss-hero__title"><?php echo wp_kses_post( $ctx['title'] ); ?></h1>

				<?php echo $rt_open; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<span class="ss-hero__stars" aria-hidden="true">★★★★★</span>
					<b>4.9</b>
					<span class="ss-hero__gwrap" aria-hidden="true">
						<svg class="ss-hero__g" width="16" height="16" viewBox="0 0 48 48"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34A21.97 21.97 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="#EA4335" d="M24 9.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 3.18 29.93 1 24 1 15.4 1 7.96 5.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>
					</span>
					<span><?php esc_html_e( 'Google Rating', 'smokeshop' ); ?></span>
				<?php echo $rt_close; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

				<?php if ( ! empty( $ctx['sub'] ) ) : ?>
					<p class="ss-hero__sub"><?php echo wp_kses_post( $ctx['sub'] ); ?></p>
				<?php endif; ?>

				<?php if ( ! empty( $ctx['cta'] ) && ! empty( $ctx['cta']['label'] ) ) : ?>
					<div class="ss-hero__cta">
						<a class="ss-btn ss-btn--solid" href="<?php echo esc_url( $ctx['cta']['url'] ); ?>">
							<span><?php echo esc_html( $ctx['cta']['label'] ); ?></span>
							<?php echo smokeshop_icon( 'arrow', array( 'size' => 18 ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
						</a>
						<?php if ( ! empty( $ctx['cta']['secondary_label'] ) ) : ?>
							<a class="ss-btn ss-btn--ghost" href="<?php echo esc_url( $ctx['cta']['secondary_url'] ); ?>">
								<span><?php echo esc_html( $ctx['cta']['secondary_label'] ); ?></span>
							</a>
						<?php endif; ?>
					</div>
				<?php endif; ?>

				<div class="ss-hero__badges">
					<?php foreach ( $badges as $b ) : ?>
						<div class="ss-hero__badge">
							<?php echo smokeshop_icon( $b['icon'], array( 'size' => 20 ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
							<span class="ss-hero__badge-txt">
								<b><?php echo esc_html( $b['label'] ); ?></b>
								<span><?php echo esc_html( $b['sub'] ); ?></span>
							</span>
						</div>
					<?php endforeach; ?>
				</div>
			</div>

			<div class="ss-hero__panel ss-reveal">
				<?php echo smokeshop_image( $ctx['slot'], array( 'class' => 'ss-img--hero', 'eager' => (bool) $ctx['eager'], 'sizes' => '(max-width: 900px) 100vw, 50vw' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
			</div>
		</div>
	</section>
	<?php
	return;
}

// ---- Inner-page hero (full-bleed cover) ----------------------------------
?>
<section class="ss-hero">
	<div class="ss-hero__media">
		<?php echo smokeshop_image( $ctx['slot'], array( 'class' => 'ss-img--hero', 'eager' => (bool) $ctx['eager'], 'sizes' => '100vw' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	</div>
	<div class="ss-hero__inner">
		<span class="ss-eyebrow"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
		<h1 class="ss-hero__title"><?php echo wp_kses_post( $ctx['title'] ); ?></h1>
		<?php if ( ! empty( $ctx['sub'] ) ) : ?>
			<p class="ss-hero__sub"><?php echo wp_kses_post( $ctx['sub'] ); ?></p>
		<?php endif; ?>
		<?php if ( ! empty( $ctx['cta'] ) && ! empty( $ctx['cta']['label'] ) ) : ?>
			<div class="ss-hero__cta">
				<a class="ss-btn ss-btn--solid" href="<?php echo esc_url( $ctx['cta']['url'] ); ?>">
					<span><?php echo esc_html( $ctx['cta']['label'] ); ?></span>
					<?php echo smokeshop_icon( 'arrow', array( 'size' => 18 ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
				</a>
				<?php if ( ! empty( $ctx['cta']['secondary_label'] ) ) : ?>
					<a class="ss-btn ss-btn--ghost" href="<?php echo esc_url( $ctx['cta']['secondary_url'] ); ?>">
						<span><?php echo esc_html( $ctx['cta']['secondary_label'] ); ?></span>
					</a>
				<?php endif; ?>
			</div>
		<?php endif; ?>
	</div>
</section>

/* ============================================================
   APE VAPE — Custom styles
   Paste the WHOLE of this into: Appearance → Customize → Additional CSS
   (Replace what's there each time so nothing duplicates.)
   ============================================================ */

/* ---------- SECTION 1 — Header ---------- */

.ss-logo__lockup { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ss-logo__tagline {
	font-family: var(--ss-font-body, "Inter", sans-serif);
	font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ss-brass, #c9a24b); margin-top: 5px;
}

.ss-nav__list .current-menu-item > a::after,
.ss-nav__list .current_page_item > a::after,
.ss-nav__list .current-menu-ancestor > a::after {
	content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
	height: 2px; background: var(--ss-brass, #c9a24b); border-radius: 2px;
}

.ss-topbar__map { color: var(--ss-smoke, #9a9aa3); }
.ss-topbar__map:hover { color: var(--ss-brass-2, #e3c074); }

/* ---------- SECTION 2 — Hero (split layout) ---------- */

.ss-hero--split {
	display: block; min-height: auto; overflow: visible;
	padding: clamp(36px, 6vw, 88px) 0;
	background:
		radial-gradient(1200px 600px at 78% 20%, rgba(255,106,61,0.10), transparent 60%),
		var(--ss-ink, #0e0e10);
}
.ss-hero--split .ss-hero__grid {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 4vw, 60px); align-items: center;
}
.ss-hero__content { max-width: 640px; }
.ss-hero--split .ss-hero__title { margin: 14px 0 0; }

.ss-hero__rating { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; color: var(--ss-haze, #ececf1); font-size: 15px; }
.ss-hero__stars { color: #f4b740; letter-spacing: 2px; font-size: 16px; line-height: 1; }
.ss-hero__rating b { color: var(--ss-white, #f7f7fa); font-weight: 700; }
.ss-hero__gwrap { display: inline-flex; align-items: center; margin-left: 4px; }

.ss-hero--split .ss-hero__sub { margin: 18px 0 0; max-width: 50ch; }
.ss-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.ss-hero__badges {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px; margin-top: 34px;
	border-top: 1px solid var(--ss-line-soft, rgba(255,255,255,0.08)); padding-top: 26px;
}
.ss-hero__badge { display: flex; align-items: flex-start; gap: 11px; }
.ss-hero__badge .ss-icon { color: var(--ss-brass, #c9a24b); margin-top: 2px; flex: 0 0 auto; }
.ss-hero__badge-txt b { display: block; color: var(--ss-white, #f7f7fa); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ss-hero__badge-txt > span { color: var(--ss-smoke, #9a9aa3); font-size: 12.5px; }

.ss-hero__panel {
	position: relative; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--ss-line, rgba(201,162,75,0.18));
	background: var(--ss-coal, #16161a); aspect-ratio: 4 / 3.4;
	box-shadow: 0 40px 90px -45px rgba(0,0,0,0.85);
}
.ss-hero__panel .ss-img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.ss-hero--split .ss-hero__grid { grid-template-columns: 1fr; }
	.ss-hero__panel { order: -1; aspect-ratio: 16 / 10; }
	.ss-hero__badges { grid-template-columns: 1fr; }
}

/* Clickable hero rating (when a Google reviews link is set) */
a.ss-hero__rating { text-decoration: none; transition: opacity .2s; }
a.ss-hero__rating:hover { opacity: 0.82; }

/* ---------- SECTION 3 — Shop By Category ---------- */

.ss-grid--categories { grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 20px); }

.ss-section__viewall {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	color: var(--ss-brass-2, #e3c074); text-decoration: none;
	font-weight: 600; font-size: 14px; transition: gap .2s, color .2s;
}
.ss-section__viewall:hover { color: var(--ss-white, #f7f7fa); gap: 10px; }

.ss-cat {
	transition: transform .35s var(--ss-ease), border-color .35s var(--ss-ease), box-shadow .35s var(--ss-ease);
}
.ss-cat:hover {
	transform: translateY(-5px);
	border-color: var(--ss-line, rgba(201,162,75,.18));
	box-shadow: 0 26px 50px -28px rgba(0,0,0,.85);
}
.ss-cat__media { position: relative; aspect-ratio: 4 / 5; }
.ss-cat__media .ss-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-cat__overlay {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
	gap: 8px; padding: 16px;
	background: linear-gradient(to top, rgba(8,8,10,.94) 12%, rgba(8,8,10,.35) 52%, transparent 86%);
}
.ss-cat__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(201,162,75,.14); border: 1px solid var(--ss-line, rgba(201,162,75,.35));
	color: var(--ss-brass-2, #e3c074); margin-bottom: 2px;
}
.ss-cat__name {
	font-family: var(--ss-font-display);
	font-weight: 600; font-size: 16px; line-height: 1.15;
	color: var(--ss-white, #f7f7fa); letter-spacing: -.01em;
}
.ss-cat__shop {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--ss-brass-2, #e3c074); font-size: 13px; font-weight: 600; transition: gap .2s;
}
.ss-cat:hover .ss-cat__shop { gap: 9px; }

@media (max-width: 1100px) { .ss-grid--categories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ss-grid--categories { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   APE VAPE — Custom styles
   Paste the WHOLE of this into: Appearance → Customize → Additional CSS
   (Replace what's there each time so nothing duplicates.)
   ============================================================ */

/* ---------- SECTION 1 — Header ---------- */

.ss-logo__lockup { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ss-logo__tagline {
	font-family: var(--ss-font-body, "Inter", sans-serif);
	font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ss-brass, #c9a24b); margin-top: 5px;
}

.ss-nav__list .current-menu-item > a::after,
.ss-nav__list .current_page_item > a::after,
.ss-nav__list .current-menu-ancestor > a::after {
	content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
	height: 2px; background: var(--ss-brass, #c9a24b); border-radius: 2px;
}

.ss-topbar__map { color: var(--ss-smoke, #9a9aa3); }
.ss-topbar__map:hover { color: var(--ss-brass-2, #e3c074); }

/* ---------- SECTION 2 — Hero (split layout) ---------- */

.ss-hero--split {
	display: block; min-height: auto; overflow: visible;
	padding: clamp(36px, 6vw, 88px) 0;
	background:
		radial-gradient(1200px 600px at 78% 20%, rgba(255,106,61,0.10), transparent 60%),
		var(--ss-ink, #0e0e10);
}
.ss-hero--split .ss-hero__grid {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 4vw, 60px); align-items: center;
}
.ss-hero__content { max-width: 640px; }
.ss-hero--split .ss-hero__title { margin: 14px 0 0; }

.ss-hero__rating { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; color: var(--ss-haze, #ececf1); font-size: 15px; }
.ss-hero__stars { color: #f4b740; letter-spacing: 2px; font-size: 16px; line-height: 1; }
.ss-hero__rating b { color: var(--ss-white, #f7f7fa); font-weight: 700; }
.ss-hero__gwrap { display: inline-flex; align-items: center; margin-left: 4px; }

.ss-hero--split .ss-hero__sub { margin: 18px 0 0; max-width: 50ch; }
.ss-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.ss-hero__badges {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px; margin-top: 34px;
	border-top: 1px solid var(--ss-line-soft, rgba(255,255,255,0.08)); padding-top: 26px;
}
.ss-hero__badge { display: flex; align-items: flex-start; gap: 11px; }
.ss-hero__badge .ss-icon { color: var(--ss-brass, #c9a24b); margin-top: 2px; flex: 0 0 auto; }
.ss-hero__badge-txt b { display: block; color: var(--ss-white, #f7f7fa); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ss-hero__badge-txt > span { color: var(--ss-smoke, #9a9aa3); font-size: 12.5px; }

.ss-hero__panel {
	position: relative; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--ss-line, rgba(201,162,75,0.18));
	background: var(--ss-coal, #16161a); aspect-ratio: 4 / 3.4;
	box-shadow: 0 40px 90px -45px rgba(0,0,0,0.85);
}
.ss-hero__panel .ss-img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.ss-hero--split .ss-hero__grid { grid-template-columns: 1fr; }
	.ss-hero__panel { order: -1; aspect-ratio: 16 / 10; }
	.ss-hero__badges { grid-template-columns: 1fr; }
}

/* Clickable hero rating (when a Google reviews link is set) */
a.ss-hero__rating { text-decoration: none; transition: opacity .2s; }
a.ss-hero__rating:hover { opacity: 0.82; }

/* ---------- SECTION 3 — Shop By Category ---------- */

.ss-grid--categories { grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 20px); }

.ss-section__viewall {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	color: var(--ss-brass-2, #e3c074); text-decoration: none;
	font-weight: 600; font-size: 14px; transition: gap .2s, color .2s;
}
.ss-section__viewall:hover { color: var(--ss-white, #f7f7fa); gap: 10px; }

.ss-cat {
	transition: transform .35s var(--ss-ease), border-color .35s var(--ss-ease), box-shadow .35s var(--ss-ease);
}
.ss-cat:hover {
	transform: translateY(-5px);
	border-color: var(--ss-line, rgba(201,162,75,.18));
	box-shadow: 0 26px 50px -28px rgba(0,0,0,.85);
}
.ss-cat__media { position: relative; aspect-ratio: 4 / 5; }
.ss-cat__media .ss-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-cat__overlay {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
	gap: 8px; padding: 16px;
	background: linear-gradient(to top, rgba(8,8,10,.94) 12%, rgba(8,8,10,.35) 52%, transparent 86%);
}
.ss-cat__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(201,162,75,.14); border: 1px solid var(--ss-line, rgba(201,162,75,.35));
	color: var(--ss-brass-2, #e3c074); margin-bottom: 2px;
}
.ss-cat__name {
	font-family: var(--ss-font-display);
	font-weight: 600; font-size: 16px; line-height: 1.15;
	color: var(--ss-white, #f7f7fa); letter-spacing: -.01em;
}
.ss-cat__shop {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--ss-brass-2, #e3c074); font-size: 13px; font-weight: 600; transition: gap .2s;
}
.ss-cat:hover .ss-cat__shop { gap: 9px; }

@media (max-width: 1100px) { .ss-grid--categories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ss-grid--categories { grid-template-columns: repeat(2, 1fr); } }

/* ---------- SECTION 4 — In-store showcase (no pricing) ---------- */

/* Uniform product images */
.ss-card__media { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.ss-card__media .ss-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ss-ease); }
.ss-card:hover .ss-card__media .ss-img { transform: scale(1.05); }

/* "Available in store" tag replaces price/buy button */
.ss-card__instore {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
	color: var(--ss-brass-2, #e3c074); font-size: 13px; font-weight: 600;
}
.ss-card__instore .ss-icon { color: var(--ss-brass-2, #e3c074); }

/* Category slider tiles a touch narrower so ~4-5 show */
.ss-slider__slide--cat { flex: 0 0 clamp(200px, 21vw, 250px); }
.ss-slider__slide--cat .ss-cat { height: 100%; }

/* =====================================================
   APE VAPE PREMIUM MOBILE RESPONSIVE FIXES
   Add at the very bottom of components.css
===================================================== */

/* ---------- Tablet ---------- */
@media (max-width:1024px){

.ss-wrap{
    width:min(100%,92%);
}

.ss-hero--split{
    padding:60px 0;
}

.ss-hero__grid{
    grid-template-columns:1fr;
    gap:40px;
}

.ss-hero__content{
    text-align:center;
    max-width:100%;
}

.ss-hero__sub{
    margin-left:auto;
    margin-right:auto;
}

.ss-hero__cta{
    justify-content:center;
}

.ss-hero__badges{
    grid-template-columns:repeat(2,1fr);
}

.ss-hero__panel{
    max-width:650px;
    margin:auto;
}

.ss-grid--categories{
    grid-template-columns:repeat(3,1fr);
}

.ss-grid--products{
    grid-template-columns:repeat(2,1fr);
}

}

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

@media (max-width:768px){

.ss-topbar{
    display:none;
}

.ss-header{
    padding:12px 0;
}

.ss-header__row{
    min-height:70px;
}

.custom-logo{
    max-height:60px;
    width:auto;
}

.ss-nav{
    display:none;
}

.ss-header__cta{
    display:none;
}

.ss-hero--split{
    padding:35px 0 55px;
}

.ss-hero__grid{
    display:flex;
    flex-direction:column;
}

.ss-hero__panel{
    order:-1;
    width:100%;
    max-width:100%;
    aspect-ratio:16/10;
    border-radius:16px;
}

.ss-hero__content{
    text-align:center;
}

.ss-eyebrow{
    font-size:11px;
    letter-spacing:.22em;
}

.ss-hero__title{
    font-size:38px;
    line-height:1.08;
}

.ss-hero__sub{
    font-size:16px;
    max-width:100%;
}

.ss-hero__rating{
    justify-content:center;
}

.ss-hero__cta{
    flex-direction:column;
    align-items:center;
}

.ss-btn{
    width:100%;
    max-width:320px;
    justify-content:center;
}

.ss-hero__badges{
    grid-template-columns:1fr;
    gap:18px;
}

.ss-grid--categories{
    grid-template-columns:repeat(2,1fr);
}

.ss-grid--products{
    grid-template-columns:1fr;
}

.ss-grid--testimonials{
    grid-template-columns:1fr;
}

.ss-gallery__grid{
    grid-template-columns:repeat(2,1fr);
}

.ss-section{
    padding:70px 0;
}

.ss-section__title{
    font-size:34px;
}

.ss-section__intro{
    font-size:15px;
}

.ss-card{
    border-radius:16px;
}

.ss-cat{
    border-radius:16px;
}

.ss-card__title{
    font-size:18px;
}

.ss-card__body{
    padding:18px;
}

}

/* ---------- Small Phones ---------- */

@media (max-width:480px){

.ss-wrap{
    width:min(100%,94%);
}

.custom-logo{
    max-height:52px;
}

.ss-hero__title{
    font-size:30px;
}

.ss-hero__sub{
    font-size:15px;
}

.ss-section{
    padding:55px 0;
}

.ss-section__title{
    font-size:28px;
}

.ss-grid--categories{
    gap:14px;
}

.ss-card__body{
    padding:16px;
}

.ss-btn{
    font-size:15px;
    padding:15px 22px;
}

.ss-hero__panel{
    border-radius:14px;
}

}

/* Better image scaling everywhere */

img{
    max-width:100%;
    height:auto;
}

/* Prevent horizontal scrolling */

html,
body{
    overflow-x:hidden;
}

.ss-site{
    overflow-x:hidden;
}
/* Hide any third-party accessibility widget button */
#ea11y-widget, [id^="ea11y"], [class^="ea11y"], [id*="ea11y"], [class*="ea11y"],
#pojo-a11y-toolbar, .pojo-a11y-toolbar,
.userway_buttons_wrapper, #userwayAccessibilityIcon,
.acsb-trigger, #acsb-trigger, [class*="acsb-"],
#ae_launcher, #ae_widget {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   APE VAPE — Visit Our Store (map section)
   APPEND this to the BOTTOM of components.css (do not replace the file).
   ============================================================ */
.ss-visit__grid {
	display: grid; grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 4vw, 56px); align-items: center;
}
.ss-visit__lead { color: var(--ss-smoke, #9a9aa3); margin: 14px 0 0; max-width: 46ch; }
.ss-visit__meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ss-visit__meta li { display: flex; align-items: flex-start; gap: 12px; color: var(--ss-haze, #ececf1); font-size: 15px; }
.ss-visit__meta .ss-icon { color: var(--ss-brass-2, #e3c074); margin-top: 2px; flex: 0 0 auto; }
.ss-visit__meta a { color: inherit; text-decoration: none; }
.ss-visit__meta a:hover { color: var(--ss-brass-2, #e3c074); }
.ss-visit .ss-btn { margin-top: 26px; }
.ss-visit__map {
	position: relative; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--ss-line, rgba(201,162,75,.18));
	background: var(--ss-coal, #16161a); aspect-ratio: 16 / 11;
	box-shadow: 0 40px 90px -45px rgba(0,0,0,.85);
}
.ss-visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ss-visit__mapempty {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 24px; color: var(--ss-smoke, #9a9aa3); font-size: 14px;
}
@media (max-width: 900px) {
	.ss-visit__grid { grid-template-columns: 1fr; }
	.ss-visit__map { aspect-ratio: 16 / 12; }
}
/* ============================================================
   APE VAPE — Related products on brand pages
   APPEND to the BOTTOM of components.css (do not replace the file).
   ============================================================ */
.ss-related { border-top: 1px solid var(--ss-line-soft, rgba(255,255,255,0.08)); }
.ss-related__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.6vw, 22px); margin-top: 26px;
}
@media (max-width: 1000px) { .ss-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ss-related__grid { grid-template-columns: repeat(2, 1fr); } }

/* Tidy the brand page: hide blog-style post navigation on product pages */
.single-ss_product .post-navigation,
.single-ss_product .nav-links,
.single-ss_product .ss-postnav { display: none; }