/* CannaZon Toolkit — frontend styles. All selectors are namespaced under .cannazon-
   and colors/fonts are exposed as CSS custom properties, so re-skinning for a
   new brand means editing the :root block below (and the matching
   Cannazon_Email::COLORS for notification emails) — nothing else.
   File version: 01.00.00 */

:root {
	/* CannaZon brand tokens (CannaZon-Toolkit/brand/design-tokens.json). */
	--cannazon-primary-dark: #082a20;  /* Deep Forest */
	--cannazon-primary: #176b45;       /* CannaZon Green */
	--cannazon-primary-light: #3ea76b; /* Fresh Green */
	--cannazon-surface: #f7f7f2;       /* Off-white */
	--cannazon-surface-alt: #edf4ee;
	--cannazon-border: #e2e4da;
	--cannazon-ink: #171a18;           /* Charcoal */
	--cannazon-ink-soft: #343b36;
	--cannazon-ink-muted: #5a635d;
	--cannazon-accent: #c7a45d;        /* Warm Gold */
	--cannazon-accent-text: #6f5412;
	--cannazon-footer-bg: #082a20;
	--cannazon-footer-ink: #d9ded8;
	--cannazon-shadow: rgb(8 42 32 / 45%);
	--cannazon-font-heading: 'Manrope', system-ui, sans-serif;
	--cannazon-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--cannazon-radius: 8px;
	--cannazon-header-offset: 130px;
}

/* Smooth in-page scrolling — scroll-padding-top keeps the sticky header from
   covering the target section. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--cannazon-header-offset);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Every top-level section a shortcode renders. Add new section classes here. */
.cannazon-announcement-bar,
.cannazon-promo-bar,
.cannazon-header,
.cannazon-footer,
.cannazon-hero,
.cannazon-features,
.cannazon-faq,
.cannazon-product-section,
.cannazon-signup,
.cannazon-form-section,
.cannazon-contact-help,
.cannazon-mini-cart,
.cannazon-marketplace {
	font-family: var(--cannazon-font-body);
	color: var(--cannazon-ink);
	box-sizing: border-box;
}

.cannazon-announcement-bar *,
.cannazon-promo-bar *,
.cannazon-header *,
.cannazon-footer *,
.cannazon-hero *,
.cannazon-features *,
.cannazon-faq *,
.cannazon-product-section *,
.cannazon-signup *,
.cannazon-form-section *,
.cannazon-contact-help *,
.cannazon-mini-cart *,
.cannazon-marketplace * {
	box-sizing: border-box;
}

.cannazon-account * {
	box-sizing: border-box;
}

.cannazon-announcement-bar {
	background: var(--cannazon-primary-dark);
	color: var(--cannazon-surface);
	text-align: center;
	padding: 9px 16px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	font-weight: 500;
}
.cannazon-announcement-bar a { color: var(--cannazon-accent); font-weight: 700; }

/* Promo code strip, printed above the header on every page. */
.cannazon-promo-bar {
	background: var(--cannazon-accent);
	color: var(--cannazon-ink);
	text-align: center;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
}
.cannazon-promo-bar .cannazon-promo-code {
	display: inline-block;
	margin: 0 4px;
	padding: 1px 10px;
	border: 1px dashed var(--cannazon-ink);
	border-radius: var(--cannazon-radius);
	background: color-mix(in srgb, var(--cannazon-surface) 45%, transparent);
	color: var(--cannazon-ink);
	font: 700 13px/1.6 var(--cannazon-font-body);
	letter-spacing: 0.08em;
	cursor: copy;
}
.cannazon-promo-bar .cannazon-promo-code:hover { background: var(--cannazon-surface); }
.cannazon-promo-bar .cannazon-promo-code:focus-visible { outline: 2px solid var(--cannazon-primary-dark); outline-offset: 2px; }
.cannazon-promo-copied { font-weight: 700; }
.cannazon-promo-copied:not(:empty) { margin-left: 6px; }

.cannazon-kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cannazon-accent-text);
	margin-bottom: 10px;
}
/* Links inside a kicker (e.g. a category list) otherwise pick up Divi's
   global link color instead of inheriting this. */
.cannazon-kicker a { color: inherit !important; }

.cannazon-hero h1, .cannazon-features h2, .cannazon-faq h2, .cannazon-product-section h2, .cannazon-form-section h2 {
	font-family: var(--cannazon-font-heading);
	font-weight: 600;
	margin: 0 0 22px;
}
.cannazon-hero h1 em, .cannazon-features h2 em, .cannazon-faq h2 em, .cannazon-product-section h2 em, .cannazon-form-section h2 em {
	font-style: italic;
	color: var(--cannazon-primary);
}

.cannazon-btn {
	display: inline-block;
	border-radius: var(--cannazon-radius);
	font-weight: 600;
	font-size: 14px;
	padding: 13px 26px;
	text-decoration: none;
}
.cannazon-btn-primary { background: var(--cannazon-primary); color: var(--cannazon-surface); }
.cannazon-btn-primary:hover { background: var(--cannazon-primary-light); color: var(--cannazon-surface); }
.cannazon-btn-outline { border: 1px solid var(--cannazon-ink-muted); color: var(--cannazon-ink); }

.cannazon-placeholder-img {
	width: 100%;
	min-height: 180px;
	border-radius: 4px;
	background: repeating-linear-gradient(45deg, var(--cannazon-surface-alt) 0px, var(--cannazon-surface-alt) 12px, var(--cannazon-border) 12px, var(--cannazon-border) 13px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--cannazon-ink-soft);
	text-align: center;
}

/* A real photo (see Cannazon_Plugin::photo()) — same box-sizing contract as
   .cannazon-placeholder-img above (height set by the same modifier classes:
   .cannazon-hero-img, .cannazon-features-img) but with
   a definite `height` rather than `min-height`, since object-fit:cover on the child
   <img> needs the box to have a definite height to fill. */
.cannazon-photo {
	width: 100%;
	height: 180px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 14px 30px -16px var(--cannazon-shadow);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.cannazon-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.cannazon-photo:hover img,
.cannazon-photo:focus-within img { transform: scale(1.09); }

/* Scroll-reveal: JS adds .cannazon-will-reveal before observing, so photos stay
   visible if JS never runs. See cannazon-frontend.js. */
.cannazon-photo.cannazon-will-reveal { opacity: 0; transform: translateY(22px); }
.cannazon-photo.cannazon-will-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.cannazon-photo.cannazon-will-reveal { opacity: 1; transform: none; }
	.cannazon-photo, .cannazon-photo img { transition: none; }
}

/* Header */
/* Opacity-only on purpose: a translateY animation here fights the browser's own
   internal transform offset for position:sticky and silently breaks the stick
   (position still computes as "sticky", but it visually scrolls away). */
@keyframes cannazon-header-drop {
	from { opacity: 0; }
	to { opacity: 1; }
}
.cannazon-header {
	display: flex; flex-direction: column; gap: 14px;
	padding: 16px clamp(20px,5vw,64px);
	background: var(--cannazon-surface);
	border-bottom: 1px solid var(--cannazon-border);
	position: sticky; top: 0; z-index: 100;
	transition: padding .35s ease, box-shadow .35s ease, background-color .35s ease;
}
/* Entrance fade only — see cannazon-frontend.js, which adds this class on load
   ONLY when the page starts at the very top. Without that gate, a reload/back-
   navigation/anchor landing that starts mid-page would still fade the (already
   sticky/stuck) header in, colliding with the is-stuck padding change JS applies
   in the same instant and producing a visible jump/flicker on scroll-restore. */
.cannazon-header.cannazon-header-animate-in {
	animation: cannazon-header-drop .5s ease both;
}
/* Divi's Theme Builder wraps a Global Header several .et_pb_section/row/column
   flex layers deep, and that specific nesting silently breaks position:sticky
   on elements nested that far down (confirmed empirically — none of the usual
   culprits like overflow/transform/filter/contain are actually set on any
   ancestor). Promoting the sticky behavior to Divi's own header wrapper, which
   sits right where sticky reliably starts working again, fixes it without
   touching Divi's files. Harmless no-op when not placed via Theme Builder. */
.et-l--header:has(.cannazon-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
.et-l--header:has(.cannazon-header) .cannazon-header {
	position: static;
}
/* Divi "block" (pre-flex) rows float their columns and rely on Divi's own
   ".et_pb_gutters3 .et_block_row .et_pb_column_4_4 { width: 100% }" plus a
   row clearfix. Divi's generated per-page CSS omits these on some pages, so the
   full-width column shrinks to its content and the Theme Builder footer slides
   up beside it with zero width. Restated here (a 4_4 column is always full
   width in Divi). */
.et_block_row::after { content: ""; display: block; clear: both; }
.et_block_row > .et_pb_column_4_4 { width: 100%; }
/* Long unbroken strings in page text (e.g. email addresses) otherwise push
   phone layouts sideways. */
.et-l--post .et_pb_text, [class*="cannazon-"] a[href^="mailto:"] { overflow-wrap: break-word; }
/* .is-stuck is toggled by JS once the page has scrolled — see cannazon-frontend.js */
.cannazon-header.is-stuck {
	padding-top: 10px;
	padding-bottom: 10px;
	background: color-mix(in srgb, var(--cannazon-surface) 92%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px -18px var(--cannazon-shadow);
}
.cannazon-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cannazon-logo {
	display: inline-flex;
	transition: transform .25s ease;
}
.cannazon-logo img {
	display: block;
	height: 30px;
	width: auto;
	transition: height .35s ease;
}
.cannazon-logo:hover { transform: translateY(-1px); }
/* Text fallback until assets/images/logo.svg exists (see Cannazon_Plugin::logo()). */
.cannazon-logo-text { font-family: var(--cannazon-font-heading); font-size: 22px; font-weight: 600; line-height: 1; color: var(--cannazon-ink); }
.cannazon-footer-logo .cannazon-logo-text { font-size: 26px; color: var(--cannazon-surface); }
.cannazon-header.is-stuck .cannazon-logo img { height: 24px; }
.cannazon-header-actions { display: flex; align-items: center; gap: 16px; }
.cannazon-account-link, .cannazon-cart-link { white-space: nowrap; }
/* Mobile menu button — hidden on desktop, see the max-width: 782px block below. */
.cannazon-menu-toggle {
	display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
	width: 44px; height: 44px; padding: 0; margin: 0 -8px 0 0; border: 0; background: transparent; cursor: pointer; color: var(--cannazon-ink);
}
.cannazon-menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.cannazon-header.is-menu-open .cannazon-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cannazon-header.is-menu-open .cannazon-menu-toggle span:nth-child(2) { opacity: 0; }
.cannazon-header.is-menu-open .cannazon-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cannazon-menu-toggle:focus-visible { outline: 2px solid var(--cannazon-primary); outline-offset: 2px; border-radius: 4px; }
.cannazon-account-link {
	color: var(--cannazon-ink); position: relative; padding-bottom: 3px; transition: color .25s ease;
}
.cannazon-account-link::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: right;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.cannazon-account-link:hover::after,
.cannazon-account-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.cannazon-cart-link {
	background: var(--cannazon-primary); color: var(--cannazon-surface); padding: 9px 18px;
	border-radius: var(--cannazon-radius); font-size: 13px; font-weight: 600;
	display: inline-block;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cannazon-cart-link:hover {
	background: var(--cannazon-primary-light);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px var(--cannazon-shadow);
}
.cannazon-nav {
	display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500;
	border-top: 1px solid var(--cannazon-border); padding-top: 12px;
	transition: padding .35s ease;
}
.cannazon-header.is-stuck .cannazon-nav { padding-top: 8px; }
.cannazon-nav-item { position: relative; }
.cannazon-nav-item > a {
	color: var(--cannazon-ink); position: relative; display: inline-block; padding-bottom: 4px;
}
.cannazon-nav-item > a::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
	background: var(--cannazon-primary); transform: scaleX(0); transform-origin: center;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.cannazon-nav-item > a:hover::after,
.cannazon-nav-item > a:focus-visible::after { transform: scaleX(1); }
.cannazon-nav-dropdown {
	display: flex; flex-direction: column;
	position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--cannazon-border);
	min-width: 200px; padding: 8px 0; z-index: 30; border-radius: 8px;
	box-shadow: 0 18px 34px -18px var(--cannazon-shadow);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.cannazon-nav-item.has-children:hover .cannazon-nav-dropdown,
.cannazon-nav-item.has-children:focus-within .cannazon-nav-dropdown {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.cannazon-nav-dropdown a {
	padding: 8px 16px; color: var(--cannazon-ink);
	transition: background-color .2s ease, padding-left .2s ease;
}
.cannazon-nav-dropdown a:hover { background: var(--cannazon-surface-alt); padding-left: 20px; }

/* Phones / small tablets: the two-row nav took a third of the screen (and the
   header is sticky), and hover dropdowns don't work on touch — while hidden,
   they also sat past the right edge and made every page scroll sideways. The
   nav becomes a toggled panel instead, with sub-pages listed inline. */
@media (max-width: 782px) {
	.cannazon-header { gap: 0; padding-top: 10px; padding-bottom: 10px; }
	.cannazon-header-actions { gap: 12px; }
	.cannazon-cart-link { padding: 8px 14px; }
	.cannazon-menu-toggle { display: inline-flex; }
	.cannazon-nav {
		display: none; flex-direction: column; gap: 0; flex-wrap: nowrap;
		margin-top: 10px; padding-top: 4px; font-size: 15px;
		max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
	}
	.cannazon-header.is-menu-open .cannazon-nav { display: flex; }
	.cannazon-header.is-stuck .cannazon-nav { padding-top: 4px; }
	.cannazon-nav-item { border-bottom: 1px solid var(--cannazon-border); }
	.cannazon-nav-item:last-child { border-bottom: 0; }
	.cannazon-nav-item > a { display: block; padding: 12px 0; }
	.cannazon-nav-item > a::after { display: none; }
	.cannazon-nav-dropdown {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; padding: 0 0 8px 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
	}
	.cannazon-nav-dropdown a { padding: 9px 0; font-size: 14px; color: var(--cannazon-ink-soft); }
	.cannazon-nav-dropdown a:hover { padding-left: 0; background: transparent; color: var(--cannazon-primary); }
}
@media (max-width: 380px) {
	.cannazon-logo img { height: 24px; }
	.cannazon-header-actions { gap: 8px; }
	.cannazon-account-link { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.cannazon-header.cannazon-header-animate-in { animation: none; }
	.cannazon-header,
	.cannazon-header *,
	.cannazon-nav-item > a::after,
	.cannazon-nav-dropdown { transition: none; }
}

/* Hero */
.cannazon-hero {
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px;
	padding: clamp(48px,8vw,96px) clamp(20px,5vw,64px); align-items: center;
	background-image: radial-gradient(closest-side, color-mix(in srgb, var(--cannazon-accent) 30%, transparent), transparent 72%);
	background-repeat: no-repeat; background-position: 92% 20%; background-size: 48% 65%;
}
.cannazon-hero h1 { font-size: clamp(36px,5vw,58px); line-height: 1.08; }
.cannazon-hero p { font-size: 17px; line-height: 1.6; color: var(--cannazon-ink-soft); max-width: 520px; margin: 0 0 32px; }
.cannazon-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.cannazon-hero-img { min-height: 420px; height: 420px; border-radius: 18px; box-shadow: 0 36px 70px -28px var(--cannazon-shadow); }
@media (max-width: 782px) { .cannazon-hero { grid-template-columns: 1fr; } }

/* Features ([cannazon_features]) */
.cannazon-features {
	padding: clamp(56px,8vw,88px) clamp(20px,5vw,64px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start;
	background-image: radial-gradient(closest-side, color-mix(in srgb, var(--cannazon-primary) 22%, transparent), transparent 72%);
	background-repeat: no-repeat; background-position: 6% 85%; background-size: 55% 60%;
}
.cannazon-features-img { min-height: 460px; height: 460px; position: sticky; top: 100px; border-radius: 18px; box-shadow: 0 30px 60px -26px var(--cannazon-shadow); }
.cannazon-subheading { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cannazon-ink-soft); margin: 0 0 14px; }
.cannazon-checklist-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 20px; margin-bottom: 32px; }
.cannazon-checklist-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.cannazon-check { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--cannazon-primary); color: var(--cannazon-surface); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cannazon-checklist-item-alt .cannazon-check { background: var(--cannazon-accent); color: var(--cannazon-ink); }
/* Stacked on mobile: the image must stop sticking, or it pins over the checklist
   text scrolling up beneath it. */
@media (max-width: 782px) {
	.cannazon-features { grid-template-columns: 1fr; }
	.cannazon-features-img { position: static; min-height: 0; height: 280px; }
}

/* FAQ accordion — constrained and centered as its own reading-width column,
   since the accordion inside it (.cannazon-accordion, 760px) would otherwise
   hug the left edge of the much wider full-bleed section. */
.cannazon-faq { max-width: 820px; margin: 0 auto; }
.cannazon-accordion { max-width: 760px; }
.cannazon-accordion-item { border-bottom: 1px solid var(--cannazon-border); }
.cannazon-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 18px 0; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; color: var(--cannazon-ink); }
.cannazon-accordion-icon { font-size: 20px; color: var(--cannazon-accent-text); }
.cannazon-accordion-panel { display: none; padding: 0 0 18px; font-size: 14.5px; color: var(--cannazon-ink-soft); line-height: 1.6; }
.cannazon-accordion-item.is-open .cannazon-accordion-panel { display: block; }
.cannazon-accordion-item.is-open .cannazon-accordion-icon { transform: rotate(45deg); }

/* Product sections */
.cannazon-product-grid { display: grid; grid-template-columns: repeat(var(--cannazon-columns,4),1fr); gap: 24px; }
.cannazon-product-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--cannazon-border); border-radius: 6px;
	padding: 14px 14px 18px; transition: transform .25s ease, box-shadow .25s ease;
}
.cannazon-product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px var(--cannazon-shadow); }
/* Square frame so tall or oversized product shots can't blow the card up;
   contain keeps the whole pack visible rather than cropping labels. */
.cannazon-product-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
.cannazon-product-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block; }
.cannazon-product-body { display: flex; flex-direction: column; flex: 1; }
.cannazon-product-name { font-family: var(--cannazon-font-heading); font-size: 16px; font-weight: 600; margin: 12px 0 4px; color: var(--cannazon-ink); }
.cannazon-product-price { font-size: 14px; color: var(--cannazon-ink-soft); margin-bottom: 10px; }
/* Pushes the button to the bottom of the card so a row of cards with
   different-length names still lines up its add-to-cart buttons. */
.cannazon-product-add-to-cart { margin-top: auto; padding-top: 4px; }
/* !important throughout this block: Divi injects its own global WooCommerce
   button color (a bright cyan) via CSS that loads after this stylesheet, at
   the same specificity, so without !important it wins every tie and every
   add-to-cart/select-options button on the site renders in Divi's default
   color instead of the brand green. */
.cannazon-product-add-to-cart .button,
.cannazon-product-add-to-cart a.added_to_cart {
	display: inline-block; font-family: var(--cannazon-font-body); font-weight: 600; font-size: 12.5px;
	padding: 9px 18px; border-radius: var(--cannazon-radius); border: 1px solid var(--cannazon-primary) !important;
	background: var(--cannazon-primary) !important; color: var(--cannazon-surface) !important; text-decoration: none;
	cursor: pointer; transition: background-color .2s ease;
}
.cannazon-product-add-to-cart .button:hover { background: var(--cannazon-primary-light) !important; border-color: var(--cannazon-primary-light) !important; }
.cannazon-product-add-to-cart .button.loading { opacity: .6; }
.cannazon-product-add-to-cart a.added_to_cart {
	margin-left: 8px; font-size: 12px; color: var(--cannazon-primary) !important;
	background: transparent !important; border-color: var(--cannazon-border) !important;
}
@media (prefers-reduced-motion: reduce) { .cannazon-product-card { transition: none; } .cannazon-product-card:hover { transform: none; } }
@media (max-width: 900px) { .cannazon-product-grid { grid-template-columns: repeat(2,1fr); } }
/* Phones: two compact columns rather than one full-width card per row. */
@media (max-width: 560px) {
	.cannazon-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cannazon-product-card { padding: 10px 10px 14px; }
	.cannazon-product-name { font-size: 14px; line-height: 1.35; margin-top: 10px; }
	.cannazon-product-price { font-size: 13px; }
	.cannazon-product-add-to-cart .button { padding: 9px 12px; font-size: 12px; width: 100%; text-align: center; box-sizing: border-box; }
	.cannazon-product-add-to-cart a.added_to_cart { display: block; margin: 6px 0 0; text-align: center; }
}
@media (max-width: 340px) { .cannazon-product-grid { grid-template-columns: 1fr; } }

.cannazon-mini-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; background: #fff; border: 1px solid var(--cannazon-border); border-radius: 6px; }
.cannazon-mini-cart-count { font-weight: 600; }
.cannazon-mini-cart-subtotal { color: var(--cannazon-ink-soft); margin-right: auto; }

/* Signup */
.cannazon-signup { background: var(--cannazon-primary); color: var(--cannazon-surface); text-align: center; padding: clamp(56px,8vw,88px) clamp(20px,5vw,64px); }
.cannazon-signup-form { max-width: 480px; margin: 0 auto; }

/* MailerLite's embedded-form editor exposes little visual customization, and at
   runtime it injects a <style> block scoped to that specific form's auto-generated
   ID (e.g. "#mlb2-46232274.ml-form-embedContainer ...") with !important on every
   property, including a white card, a second nested grey panel, fixed pixel widths
   and asymmetric padding — a boxed "widget" look that clashes with the flat,
   borderless sections used everywhere else on this site. An ID beats any number of
   classes regardless of !important, so a plain class-based override can never win.
   #cannazon-signup is a real ID already on our wrapper <section>, and repeating its
   own class after the ID (harmless, just a specificity trick — each repetition
   legitimately counts toward selector weight) pads our specificity comfortably past
   MailerLite's, so these overrides win regardless of load order. Verified against
   the live rendered form's computed styles, not just visually. */
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedContainer,
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedWrapper,
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedBody {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-formContent,
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-fieldRow,
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-field-group {
	width: 100% !important;
	max-width: 100% !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedContent h4 {
	font-family: var(--cannazon-font-heading) !important;
	font-weight: 600 !important;
	color: var(--cannazon-surface) !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedContent p,
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-successContent p {
	font-family: var(--cannazon-font-body) !important;
	color: var(--cannazon-surface) !important;
	opacity: 0.9;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .form-control {
	font-family: var(--cannazon-font-body) !important;
	background: var(--cannazon-surface) !important;
	border: none !important;
	border-radius: var(--cannazon-radius) !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 12px 14px !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedSubmit {
	width: 100% !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedSubmit button.primary {
	background: var(--cannazon-accent) !important;
	color: var(--cannazon-ink) !important;
	border-radius: var(--cannazon-radius) !important;
	font-family: var(--cannazon-font-body) !important;
	font-weight: 600 !important;
	border: none !important;
	width: 100% !important;
}
#cannazon-signup.cannazon-signup.cannazon-signup.cannazon-signup .ml-form-embedSubmit button.primary:hover {
	background: var(--cannazon-accent-text) !important;
}

/* Footer */
.cannazon-footer {
	position: relative;
	background: var(--cannazon-footer-bg); color: var(--cannazon-footer-ink);
	padding: clamp(48px,6vw,72px) clamp(20px,5vw,64px) 32px;
	overflow: hidden;
}
/* Brand-colored seam separating the footer from the page content */
.cannazon-footer::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--cannazon-accent), var(--cannazon-primary-light) 50%, var(--cannazon-accent));
}
/* Soft ambient glow, echoing the accents used elsewhere on the page */
.cannazon-footer::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(closest-side, color-mix(in srgb, var(--cannazon-accent) 12%, transparent), transparent 70%);
	background-repeat: no-repeat; background-position: 90% -10%; background-size: 50% 60%;
}
.cannazon-footer a { color: inherit; opacity: 0.85; }
.cannazon-footer-tagline { position: relative; font-family: var(--cannazon-font-heading); font-size: clamp(19px,2.4vw,26px); font-style: italic; max-width: 720px; margin: 0 auto 44px; color: var(--cannazon-surface); line-height: 1.4; text-align: center; }
.cannazon-footer-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.cannazon-footer-logo { margin-bottom: 14px; }
.cannazon-footer-logo img { display: block; height: 36px; width: auto; }
.cannazon-footer-brand p { font-size: 13.5px; line-height: 1.6; opacity: 0.75; max-width: 280px; margin: 0 0 8px; }

/* Social links as small circular badges, echoing the .cannazon-check badges
   used in the "Why Choose" checklist elsewhere on the page. */
.cannazon-footer-socials { display: flex; gap: 10px; margin-top: 14px; }
.cannazon-footer-socials .cannazon-social-badge {
	width: 38px; height: 38px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid color-mix(in srgb, var(--cannazon-footer-ink) 28%, transparent);
	font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
	opacity: 1;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cannazon-footer-socials .cannazon-social-badge:hover,
.cannazon-footer-socials .cannazon-social-badge:focus-visible {
	background: var(--cannazon-accent); border-color: var(--cannazon-accent); color: var(--cannazon-footer-bg);
	transform: translateY(-3px);
	box-shadow: 0 12px 22px -10px var(--cannazon-shadow);
}

.cannazon-footer-col-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cannazon-surface); margin-bottom: 14px; }
.cannazon-footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--cannazon-footer-ink) 12%, transparent); }

/* Underline-sweep hover, matching the header nav links (badges opt out — they
   have their own fill-in hover state above) */
.cannazon-footer-col a:not(.cannazon-social-badge), .cannazon-footer-brand a:not(.cannazon-social-badge) {
	position: relative; display: inline-block; width: fit-content; transition: color .25s ease;
}
.cannazon-footer-col a:not(.cannazon-social-badge)::after, .cannazon-footer-brand a:not(.cannazon-social-badge)::after {
	content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: right;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.cannazon-footer-col a:not(.cannazon-social-badge):hover, .cannazon-footer-brand a:not(.cannazon-social-badge):hover,
.cannazon-footer-col a:not(.cannazon-social-badge):focus-visible, .cannazon-footer-brand a:not(.cannazon-social-badge):focus-visible { color: var(--cannazon-accent); opacity: 1; }
.cannazon-footer-col a:not(.cannazon-social-badge):hover::after, .cannazon-footer-brand a:not(.cannazon-social-badge):hover::after,
.cannazon-footer-col a:not(.cannazon-social-badge):focus-visible::after, .cannazon-footer-brand a:not(.cannazon-social-badge):focus-visible::after { transform: scaleX(1); transform-origin: left; }

.cannazon-footer-bottom { position: relative; border-top: 1px solid color-mix(in srgb, var(--cannazon-footer-ink) 18%, transparent); padding-top: 22px; font-size: 12.5px; opacity: 0.6; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.cannazon-footer-bottom a { transition: opacity .2s ease; }
.cannazon-footer-bottom a:hover { opacity: 0.7; }

@media (max-width: 900px) { .cannazon-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
	.cannazon-footer-grid { grid-template-columns: 1fr; }
	.cannazon-footer-col { padding-left: 0; border-left: none; }
}

/* Back to top */
.cannazon-back-to-top {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--cannazon-primary); color: var(--cannazon-surface);
	font-size: 17px; line-height: 1; text-decoration: none;
	box-shadow: 0 14px 30px -14px var(--cannazon-shadow);
	transition: opacity .3s ease, transform .3s ease, background-color .25s ease, box-shadow .25s ease;
}
/* Hidden by JS only once scrolled near the top, so the button still works
   with no JS at all — see cannazon-frontend.js. */
.cannazon-back-to-top.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.cannazon-back-to-top:hover, .cannazon-back-to-top:focus-visible {
	background: var(--cannazon-primary-light); transform: translateY(-3px);
	box-shadow: 0 18px 34px -14px var(--cannazon-shadow);
}
@media (prefers-reduced-motion: reduce) {
	.cannazon-back-to-top { transition: opacity .01s linear; }
}

/* Floating feedback button + popup (rendered in wp_footer by class-cannazon-feedback.php).
   The button sits bottom-left so it never collides with the back-to-top button
   on the right; z-index sits between back-to-top (90) and the popups (200). */
.cannazon-feedback, .cannazon-feedback * { box-sizing: border-box; }
.cannazon-feedback { font-family: var(--cannazon-font-body); }
.cannazon-feedback-toggle {
	position: fixed; left: 22px; bottom: 22px; z-index: 95;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; border: 0; border-radius: 999px;
	background: var(--cannazon-primary-dark); color: var(--cannazon-surface);
	font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
	box-shadow: 0 14px 30px -14px var(--cannazon-shadow);
	transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cannazon-feedback-toggle:hover, .cannazon-feedback-toggle:focus-visible {
	background: var(--cannazon-primary); transform: translateY(-3px);
	box-shadow: 0 18px 34px -14px var(--cannazon-shadow);
}
.cannazon-feedback-toggle[aria-expanded="true"] { background: var(--cannazon-primary); }
.cannazon-feedback-toggle svg { flex: none; }

/* Centred popup over a dimmed backdrop (was a panel anchored to the button,
   which collided with other fixed elements). z-index 300 puts it above the
   sticky header (100) and the other popups (200). inset:0 + margin:auto +
   height:fit-content centres it without a transform, so the transform stays
   free for the open animation. */
.cannazon-feedback-backdrop {
	position: fixed; inset: 0; z-index: 299;
	background: color-mix(in srgb, var(--cannazon-footer-bg) 55%, transparent);
	opacity: 0; transition: opacity .22s ease;
}
.cannazon-feedback-backdrop[hidden] { display: none; }
.cannazon-feedback-backdrop.is-open { opacity: 1; }
.cannazon-feedback-panel {
	position: fixed; inset: 0; z-index: 300; margin: auto;
	width: min(440px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
	padding: 28px 26px 24px; border-radius: 14px;
	background: #fff; border: 1px solid var(--cannazon-border); color: var(--cannazon-ink);
	box-shadow: 0 40px 80px -30px var(--cannazon-shadow);
	opacity: 0; transform: translateY(14px) scale(.97);
	transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}
.cannazon-feedback-panel[hidden] { display: none; }
.cannazon-feedback-panel.is-open { opacity: 1; transform: none; }
/* Page scroll lock while the popup is open. */
body.cannazon-feedback-open { overflow: hidden; }
.cannazon-feedback-close {
	position: absolute; top: 10px; right: 10px;
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: var(--cannazon-surface-alt); color: var(--cannazon-ink-soft);
	font-size: 19px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.cannazon-feedback-close:hover { background: var(--cannazon-border); color: var(--cannazon-ink); }
.cannazon-feedback-title { font-family: var(--cannazon-font-heading); font-size: 20px; font-weight: 600; margin: 0 32px 4px 0; color: var(--cannazon-ink); }
.cannazon-feedback-intro { font-size: 13px; color: var(--cannazon-ink-muted); margin: 0 0 16px !important; padding: 0 !important; line-height: 1.5; }
.cannazon-feedback fieldset { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.cannazon-feedback legend,
.cannazon-feedback-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--cannazon-ink-soft); margin-bottom: 6px; padding: 0; }
.cannazon-feedback-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Stars: real radios (keyboard + screen readers work natively), visually hidden;
   JS adds .is-lit up to the hovered/checked star. */
.cannazon-feedback-stars { display: flex; gap: 2px; }
.cannazon-feedback-stars label { position: relative; cursor: pointer; }
.cannazon-feedback-stars input,
.cannazon-feedback-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cannazon-feedback-star {
	display: block; font-size: 28px; line-height: 1; padding: 2px;
	color: var(--cannazon-border); transition: color .15s ease, transform .15s ease;
}
.cannazon-feedback-stars label.is-lit .cannazon-feedback-star { color: var(--cannazon-accent); }
.cannazon-feedback-stars label:hover .cannazon-feedback-star { transform: scale(1.15); }
.cannazon-feedback-stars input:focus-visible + .cannazon-feedback-star { outline: 2px solid var(--cannazon-primary); outline-offset: 1px; border-radius: 4px; }

.cannazon-feedback-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cannazon-feedback-chips label { position: relative; cursor: pointer; }
.cannazon-feedback-chips span {
	display: inline-block; padding: 6px 13px; border: 1px solid var(--cannazon-border); border-radius: 999px;
	font-size: 12.5px; color: var(--cannazon-ink-soft); background: #fff;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cannazon-feedback-chips label:hover span { border-color: var(--cannazon-primary); color: var(--cannazon-primary); }
.cannazon-feedback-chips input:checked + span { background: var(--cannazon-primary); border-color: var(--cannazon-primary); color: #fff; }
.cannazon-feedback-chips input:focus-visible + span { outline: 2px solid var(--cannazon-primary); outline-offset: 2px; }

.cannazon-feedback-field { display: block; margin-bottom: 12px; }
.cannazon-feedback-field textarea,
.cannazon-feedback-field input {
	display: block; width: 100%; padding: 10px 12px;
	border: 1px solid var(--cannazon-border); border-radius: 6px; background: var(--cannazon-surface);
	font: inherit; font-size: 14px; color: var(--cannazon-ink);
}
.cannazon-feedback-field textarea { resize: vertical; min-height: 96px; }
.cannazon-feedback-field textarea:focus,
.cannazon-feedback-field input:focus { outline: none; border-color: var(--cannazon-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cannazon-primary) 15%, transparent); background: #fff; }
.cannazon-feedback-field.is-invalid textarea { border-color: #c0392b; }
.cannazon-feedback-hp,
.cannazon-form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cannazon-feedback-status { font-size: 12.5px; margin: 0 0 10px !important; padding: 0 !important; min-height: 0; }
.cannazon-feedback-status:empty { display: none; }
.cannazon-feedback-status.is-error { color: #b3261e; }
.cannazon-feedback-submit { width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.cannazon-feedback-submit[disabled] { opacity: .6; cursor: progress; }

.cannazon-feedback-thanks { text-align: center; padding: 18px 4px 8px; outline: none; }
.cannazon-feedback-thanks[hidden] { display: none; }
.cannazon-feedback-thanks .cannazon-feedback-title { margin: 0 0 6px; }
.cannazon-feedback-thanks p { font-size: 13.5px; color: var(--cannazon-ink-muted); margin: 0 !important; }
.cannazon-feedback-thanks-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%;
	background: var(--cannazon-surface-alt); color: var(--cannazon-primary); font-size: 22px; font-weight: 700;
}

/* Forms */
.cannazon-form-section { padding: clamp(56px,8vw,88px) clamp(20px,5vw,64px); }
.cannazon-form { max-width: 640px; }
.cannazon-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cannazon-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cannazon-ink-soft); }
.cannazon-form input, .cannazon-form select, .cannazon-form textarea {
	width: 100%; font-family: var(--cannazon-font-body) !important; font-size: 14px !important; font-weight: 400; color: var(--cannazon-ink) !important;
	padding: 12px 14px !important; border: 1px solid var(--cannazon-border) !important; border-radius: 4px !important; background: #fff !important;
	box-shadow: none !important; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.cannazon-form textarea { resize: vertical; min-height: 140px; }
.cannazon-form input:focus, .cannazon-form select:focus, .cannazon-form textarea:focus {
	outline: none; border-color: var(--cannazon-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cannazon-primary) 14%, transparent) !important;
}
.cannazon-form-full { display: flex; flex-direction: column; margin-bottom: 16px; }
.cannazon-form button[type="submit"] { border: 0; cursor: pointer; font-family: var(--cannazon-font-body); font-size: 14.5px; padding: 14px 30px; }
.cannazon-form-status { margin-top: 12px; font-size: 13.5px; }
.cannazon-form-status.is-success { color: var(--cannazon-primary); }
.cannazon-form-status.is-error { color: #b3261e; }
@media (max-width: 560px) { .cannazon-form-row { grid-template-columns: 1fr; } }

/* Contact page ([cannazon_contact]) */
.cannazon-contact {
	display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(32px,5vw,72px); align-items: start;
	max-width: 1240px; margin: 0 auto;
	background-image: radial-gradient(closest-side, color-mix(in srgb, var(--cannazon-accent) 22%, transparent), transparent 70%);
	background-repeat: no-repeat; background-position: 0% 20%; background-size: 55% 70%;
}
.cannazon-contact h2 { font-size: clamp(30px,3.6vw,42px); line-height: 1.15; margin-bottom: 18px; }
.cannazon-contact-lead { font-size: 16px; line-height: 1.7; color: var(--cannazon-ink-soft); margin: 0 0 28px; max-width: 460px; }
.cannazon-contact-cards { display: grid; gap: 12px; max-width: 440px; }
.cannazon-contact-card {
	display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--cannazon-border);
	border-radius: 8px; text-decoration: none !important; color: var(--cannazon-ink) !important; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cannazon-contact-card:hover { border-color: var(--cannazon-primary); transform: translateY(-2px); box-shadow: 0 14px 28px -18px var(--cannazon-shadow); }
.cannazon-contact-icon {
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--cannazon-primary); color: var(--cannazon-surface);
}
.cannazon-contact-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cannazon-accent-text); }
.cannazon-contact-value { display: block; font-size: 15px; font-weight: 600; color: var(--cannazon-ink); margin-top: 2px; word-break: break-word; }
.cannazon-contact-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }
.cannazon-contact-socials a { font-size: 14px; font-weight: 600; color: var(--cannazon-primary) !important; }
.cannazon-site-notice { margin-top: 24px; font-size: 13px; color: var(--cannazon-ink-muted); max-width: 440px; }
.cannazon-contact-form-card {
	background: #fff; border: 1px solid var(--cannazon-border); border-top: 4px solid var(--cannazon-primary); border-radius: 10px;
	padding: clamp(24px,3vw,40px); box-shadow: 0 30px 60px -34px var(--cannazon-shadow);
}
.cannazon-contact-form-card h3 { font-family: var(--cannazon-font-heading) !important; font-size: 22px !important; font-weight: 600; color: var(--cannazon-ink); margin: 0 0 22px !important; padding: 0 !important; }
.cannazon-contact-form-card .cannazon-form { max-width: none; }
.cannazon-contact-help { background: var(--cannazon-surface-alt); padding: clamp(48px,7vw,80px) clamp(20px,5vw,64px); }
.cannazon-contact-help > * { max-width: min(1240px, 100%); margin-left: auto; margin-right: auto; }
.cannazon-contact-help-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 16px; }
.cannazon-contact-help-card {
	position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 44px; background: #fff; border-radius: 8px;
	border: 1px solid var(--cannazon-border); text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease;
}
.cannazon-contact-help-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px var(--cannazon-shadow); }
.cannazon-contact-help-title { font-family: var(--cannazon-font-heading); font-size: 18px; font-weight: 600; color: var(--cannazon-ink); }
.cannazon-contact-help-desc { font-size: 14px; line-height: 1.55; color: var(--cannazon-ink-muted); }
.cannazon-contact-help-arrow { position: absolute; left: 22px; bottom: 16px; color: var(--cannazon-accent-text); font-size: 18px; transition: transform .2s ease; }
.cannazon-contact-help-card:hover .cannazon-contact-help-arrow { transform: translateX(4px); }
@media (max-width: 860px) { .cannazon-contact { grid-template-columns: 1fr; } }

.cannazon-admin-note { background: #fff7e6; border: 1px dashed var(--cannazon-accent); border-radius: 4px; padding: 14px 16px; font-size: 13px; color: var(--cannazon-ink-soft); }

/* "Added to cart" toast — fires on WooCommerce's own `added_to_cart` event
   (see cannazon-frontend.js), so a customer using one of the AJAX "Add to
   Cart" buttons in a product grid gets visible confirmation even though
   nothing else on the page reloads. */
.cannazon-toast {
	position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
	background: var(--cannazon-primary-dark); color: var(--cannazon-surface);
	font-family: var(--cannazon-font-body); font-size: 13.5px; font-weight: 600;
	padding: 13px 24px; border-radius: var(--cannazon-radius);
	box-shadow: 0 20px 40px -16px var(--cannazon-shadow);
	opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
	z-index: 9999;
}
.cannazon-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .cannazon-toast { transition: none; } }

/* Touch devices: give small inline text links a comfortable tap area without
   changing how they look with a mouse. */
@media (hover: none) and (pointer: coarse) {
	.cannazon-footer-bottom a { display: inline-block; padding: 8px 0; }
}

/* ---------------------------------------------------------------------------
   [cannazon_marketplace] — the app runs in its own document inside this
   iframe (see Cannazon_Marketplace), so only the frame itself is styled here.
   --------------------------------------------------------------------------- */
.cannazon-marketplace {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	background: var(--cannazon-surface);
}
.cannazon-marketplace iframe {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: var(--cannazon-app-height, 100vh) !important;
	min-height: 480px;
	margin: 0 !important;
	border: 0 !important;
}
/* Phones: at the default height, the dynamic viewport height avoids a gap
   behind the browser bars. */
@supports (height: 100dvh) {
	.cannazon-marketplace[style$=":100vh"] iframe {
		height: 100dvh !important;
	}
}