/* ==========================================================================
   CNV Mobile Parity — 1.0.0
   Goal: match the reference store (cnvapes-au.com) on phones.
   Reference mobile metrics @390px: header 102px (28 topbar + 74 logo row),
   grid 2-up with 13px gutters / 16px gap, 6-logo brand grid, 2-up feedback
   carousel, floating contact stack bottom-right.
   ========================================================================== */

/* ---------- full-bleed hero, like the reference on every viewport -------- */
main.cnv-front > .cnv-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	position: relative;
}
body { overflow-x: hidden; }

/* ---------- global: the reference does not have the extra badge strip ---- */
.cnv-hero__badges { display: none !important; }

/* ---------- "Sydney Warehouse / Australia Post" section heading ---------- */
.cnv-sechead { text-align: center; padding: 26px 15px 12px; }
.cnv-sechead h2 {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0 0 9px;
	font-size: 20px;
	line-height: 1.25;
	color: #c40000;
	position: relative;
}
.cnv-sechead h2::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #c40000;
}
.cnv-sechead p { margin: 0; font-size: 16px; color: #111; }
.cnv-sechead p span { color: #1a56c4; font-weight: 600; }


/* ==========================================================================
   PRODUCT PAGE BLOCKS — sized for every viewport (desktop included)
   ========================================================================== */
.cnv-trust4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 10px;
	margin: 24px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #eee;
}
.cnv-trust4__item { display: flex; gap: 9px; align-items: flex-start; }
.cnv-trust4__ico { flex: 0 0 22px; color: #c40000; line-height: 0; }
.cnv-trust4__ico svg { width: 22px !important; height: 22px !important; max-width: 22px !important; }
.cnv-trust4 strong { display: block; font-size: 12.5px; line-height: 1.3; color: #1c1c1c; }
.cnv-trust4 small { display: block; font-size: 11px; color: #777; line-height: 1.35; }

.cnv-pricing { margin: 24px 0 0; }
.cnv-pricing h3 { font-size: 17px !important; margin: 0 0 10px !important; }
.cnv-pricing table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cnv-pricing th {
	background: #f7f7f7;
	text-align: left;
	padding: 9px 8px;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #444;
	font-weight: 700;
}
.cnv-pricing td { padding: 9px 8px; border-bottom: 1px solid #f0f0f0; }
.cnv-pricing__note { margin: 10px 0 0; font-size: 12.5px; color: #6b6b6b; }

/* nicotine selector: own row, above the quantity / cart row */
.single_variation_wrap { display: block !important; }
.cnv-nic { display: block; width: 100% !important; margin: 4px 0 16px !important; }
.cnv-nic label {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #666;
	margin: 0 0 5px;
}
.cnv-nic select {
	width: 100% !important;
	max-width: 100% !important;
	padding: 11px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
	display: block;
}

/* gallery thumbnails, all viewports */
.woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; }
.woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100% !important; height: auto !important; display: block; border: 1px solid #e6e6e6; border-radius: 4px; }

/* ==========================================================================
   FLOATING CONTACT STACK — colour coded, labelled on hover
   ========================================================================== */
.cnv-fab { gap: 9px !important; }
.cnv-fab a { position: relative; }
.cnv-fab__phone { background: #f5a623 !important; }
.cnv-fab__wa { background: #25d366 !important; }
.cnv-fab__mail { background: #1a56c4 !important; }
.cnv-fab__chat { background: #c40000 !important; }
.cnv-fab a::after {
	content: attr(data-label);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #1c1c1c;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.cnv-fab a:hover::after, .cnv-fab a:focus-visible::after { opacity: 1; }
.cnv-fab svg { width: 21px !important; height: 21px !important; }

/* ---------- brand pager dots --------------------------------------------- */
.cnv-branddots { display: flex; justify-content: center; gap: 9px; padding: 16px 0 0; }
.cnv-branddots button {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: #cfcfcf; cursor: pointer;
}
.cnv-branddots button.is-active { background: #1c1c1c; }

/* ==========================================================================
   PHONE / TABLE HEADER
   ========================================================================== */
@media (max-width: 900px) {

	/* ---- top strip: one scrolling line, 28px ---------------------------- */
	.cnv-topbar {
		height: 28px !important;
		min-height: 0 !important;
		padding: 0 !important;
		background: #f7f7f7 !important;
		border-bottom: 1px solid #ececec !important;
		overflow: hidden;
	}
	.cnv-topbar .cnv-wrap {
		height: 28px !important;
		min-height: 0 !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
		gap: 30px;
		white-space: nowrap;
		width: max-content;
	}
	.cnv-topbar__links,
	.cnv-topbar__right {
		display: flex !important;
		align-items: center;
		gap: 30px;
		white-space: nowrap;
		font-size: 12.5px !important;
		padding: 0 !important;
	}
	.cnv-topbar__links { padding-left: 16px !important; }
	.cnv-topbar__right { padding-right: 16px !important; color: #555 !important; }
	.cnv-topbar a { font-size: 12.5px !important; color: #444 !important; }
	.cnv-topbar__right strong { color: #c40000 !important; }
	.cnv-mq { display: flex; align-items: center; width: max-content; animation: cnv-mq 26s linear infinite; }
	@keyframes cnv-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

	/* ---- logo bar: 74px ------------------------------------------------- */
	.site-header { position: relative !important; background: #fff; padding: 0 !important; margin: 0 0 0 !important; }
	.site-header > .col-full {
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap !important;
		gap: 18px;
		height: 74px;
		min-height: 74px;
		max-width: none !important;
		padding: 0 14px !important;
		margin: 0 !important;
	}
	.site-header .cnv-logo {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		z-index: 3;
	}
	.site-header .cnv-logo img { width: 138px !important; max-width: none !important; }

	/* left cluster (hamburger + search) — created by mobile.js */
	.cnv-mleft {
		position: absolute;
		left: 4px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		gap: 2px;
		z-index: 4;
	}
	.cnv-mleft .menu-toggle,
	.cnv-mleft .cnv-menu-btn,
	.cnv-mleft .cnv-msearch {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: #1c1c1c !important;
		font-size: 0 !important;
		line-height: 0 !important;
	}
	.cnv-mleft .menu-toggle::before,
	.cnv-mleft .menu-toggle::after { display: none !important; }
	.cnv-mleft svg { width: 24px; height: 24px; }

	/* right actions */
	.cnv-header-actions { display: flex !important; align-items: center; gap: 14px; margin-left: auto !important; }
	.cnv-header-actions .cnv-account { display: flex !important; }
	.cnv-header-actions .cnv-account svg { width: 23px; height: 23px; }
	.cnv-header-actions .cnv-account-label { display: none !important; }
	.cnv-header-actions .cnv-wholesale-btn { display: none !important; }
	.cnv-header-actions .cnv-cart {
		background: none !important;
		color: #1c1c1c !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		position: relative;
		display: flex !important;
		align-items: center;
	}
	.cnv-header-actions .cnv-cart svg { width: 24px; height: 24px; }
	.cnv-header-actions .cnv-cart-label { display: none !important; }
	.cnv-header-actions .cnv-cart .count {
		position: absolute;
		top: -5px;
		right: -8px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 9px;
		background: #c40000;
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	/* search: collapses to an icon, expands as a panel under the header */
	.cnv-header-search { position: static !important; margin: 0 !important; max-width: none !important; flex: 0 0 auto !important; order: 0 !important; }
	.cnv-header-search form { display: none !important; }
	.site-header.cnv-search-open .cnv-header-search {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 30;
		background: #fff;
		padding: 10px 14px 14px !important;
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
	}
	.site-header.cnv-search-open .cnv-header-search form { display: flex !important; }

	/* ---- nav bar becomes an off-canvas drawer -------------------------- */
	.cnv-navbar { background: transparent !important; height: 0 !important; overflow: visible !important; position: static !important; }
	.cnv-navbar .cnv-wrap { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; height: 0 !important; min-height: 0 !important; }
	#site-navigation {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 300px;
		max-width: 86vw;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		z-index: 9500;
		transform: translateX(-102%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: none;
		display: block !important;
	}
	#site-navigation.toggled { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.35); }
	#site-navigation .menu-toggle { display: none !important; }
	#site-navigation ul.menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 58px 0 40px !important;
		background: transparent !important;
		border-radius: 0 !important;
		overflow: visible !important;
		float: none !important;
		width: 100% !important;
	}
	#site-navigation ul.menu > li { float: none !important; width: 100% !important; margin: 0 !important; position: relative; }
	#site-navigation ul.menu > li > a {
		display: block !important;
		padding: 14px 20px !important;
		border-bottom: 1px solid #f1f1f1 !important;
		color: #1c1c1c !important;
		background: transparent !important;
		font-size: 15px !important;
		font-weight: 600;
	}
	#site-navigation ul.menu > li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -5px;
		border-right: 2px solid #999;
		border-bottom: 2px solid #999;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}
	#site-navigation ul.menu > li.cnv-open > a::after { transform: rotate(-135deg); margin-top: -1px; }
	#site-navigation ul.sub-menu {
		display: none !important;
		position: static !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fafafa !important;
		border: 0 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	#site-navigation li.cnv-open > ul.sub-menu { display: block !important; }
	#site-navigation ul.sub-menu li { width: 100% !important; margin: 0 !important; }
	#site-navigation ul.sub-menu a {
		display: block !important;
		padding: 11px 20px 11px 34px !important;
		font-size: 14px !important;
		color: #444 !important;
		border-bottom: 1px solid #f2f2f2 !important;
		background: transparent !important;
	}
	#site-navigation .cnv-drawer-close {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		font-size: 26px;
		line-height: 1;
		color: #333;
		z-index: 2;
	}
	#site-navigation a:focus { outline: none !important; }
	#site-navigation a:focus-visible { outline: 2px solid #c40000 !important; outline-offset: -2px; }
	.cnv-navoverlay {
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, 0.5);
		z-index: 9400;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.cnv-navoverlay.is-open { opacity: 1; pointer-events: auto; }
	body.cnv-nav-lock { overflow: hidden; }
	body.cnv-nav-lock .site-header { z-index: 9600 !important; }
	#site-navigation, #site-navigation * { opacity: 1 !important; }

	/* brand strip is desktop-only on the reference */
	.cnv-brandstrip { display: none !important; }

	/* reference home is full-bleed: every section owns its own padding */
	main.cnv-front { padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
	body.cnv-home .site-content > .col-full { padding-left: 0 !important; padding-right: 0 !important; }
	body.cnv-home .storefront-breadcrumb { display: none !important; }
	main.cnv-front > .cnv-hero { margin: 0 !important; width: 100% !important; }
	main.cnv-front > .cnv-hero img { width: 100% !important; border-radius: 0 !important; }

	/* floating contact stack */
	.cnv-fab {
		display: flex !important;
		top: auto !important;
		bottom: 16px !important;
		right: 10px !important;
		transform: none !important;
		flex-direction: column;
		gap: 9px;
		z-index: 8000;
	}
	.cnv-fab a { width: 46px !important; height: 46px !important; }
	.cnv-fab .cnv-fab__phone { display: none !important; }
	.cnv-fab .cnv-fab__mail { display: flex !important; }
	.cnv-fab .cnv-fab__wa { background: #25d366 !important; }
	.cnv-fab .cnv-fab__mail { background: #1a56c4 !important; }
	.cnv-fab .cnv-fab__chat { background: #c40000 !important; }
	.cnv-fab .cnv-fab__top { background: #f4811f !important; }

	/* shop / archive header: reference goes straight to the grid on phones */
	.woocommerce-products-header { display: none !important; }
	.cnv-archive-head { display: none !important; }
	.storefront-breadcrumb { padding: 8px 0 !important; }
	.storefront-breadcrumb .col-full { padding: 0 13px !important; }
	.storefront-breadcrumb a, .storefront-breadcrumb .breadcrumb-separator { font-size: 12px; }
}

/* ==========================================================================
   PRODUCT GRID — 2-up, 13px gutters, 16px gap, edge-to-edge images
   ========================================================================== */
@media (max-width: 720px) {
	.cnv-section--grid { padding: 0 13px 28px !important; margin: 0 !important; }
	.cnv-section--grid .cnv-wrap { padding: 0 !important; max-width: none !important; margin: 0 !important; }

	ul.products,
	#primary ul.products,
	#primary .cnv-section--grid ul.products,
	.cnv-section--grid .woocommerce ul.products,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		padding: 0 0 10px !important;
		border: 0 !important;
		border-radius: 6px !important;
		overflow: hidden;
		background: #fff !important;
		box-shadow: none !important;
	}
	ul.products li.product > a:first-child { display: block; }
	ul.products li.product img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	ul.products li.product .woocommerce-loop-product__title {
		padding: 9px 8px 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		font-size: 13px !important;
		line-height: 1.45 !important;
		text-align: center;
	}
	ul.products li.product .price {
		display: block !important;
		padding: 0 8px 0 !important;
		margin: 0 !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		text-align: center;
	}
	ul.products li.product .cnv-ribbon { margin: 0 !important; }
	/* reference cards carry no call-to-action button on phones */
	.woocommerce ul.products li.product .button,
	ul.products li.product .button { display: none !important; }

	/* grids on archive/shop get the same treatment */
	.woocommerce ul.products { padding: 0 !important; margin: 0 !important; }
	.woocommerce ul.products li.product { margin: 0 !important; }
}

/* ==========================================================================
   HOME — feedback carousel, brand grid
   ========================================================================== */
@media (max-width: 900px) {
	.cnv-feedback { padding: 28px 0 22px !important; }
	.cnv-feedback .cnv-wrap { padding: 0 !important; max-width: none !important; }
	.cnv-feedback .cnv-heading { padding: 0 15px !important; margin-bottom: 16px !important; }
	.cnv-feedback .cnv-center { padding: 0 15px; }

	.cnv-feedback__grid {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 10px !important;
		margin: 0 0 16px !important;
		padding: 0 15px 6px !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.cnv-feedback__grid::-webkit-scrollbar { display: none; }
	.cnv-feedback__card { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; }
	.cnv-feedback__card img { width: 100% !important; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
	.cnv-feedback__head { font-size: 11px; padding: 6px 8px; }

	.cnv-brands { padding: 28px 0 !important; }
	.cnv-brands .cnv-wrap { padding: 0 13px !important; }
	.cnv-brands__grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.cnv-brands__grid a { padding: 12px 6px !important; min-height: 62px; }
	.cnv-brands__grid img { max-height: 30px !important; }
	.cnv-brands__grid.is-paged > a:nth-child(n + 7) { display: none !important; }
	.cnv-brands__grid.is-paged.page-2 > a:nth-child(-n + 6) { display: none !important; }
	.cnv-brands__grid.is-paged.page-2 > a:nth-child(n + 7) { display: flex !important; }

	.cnv-heading h2 { font-size: 20px; }
	.cnv-heading p { font-size: 13px; }

	.cnv-tp-card, .cnv-tp-review { padding: 14px !important; }
	.cnv-tp-review__btn { display: none; }
	.cnv-about { padding: 30px 0 !important; }
	.cnv-promise { padding: 22px 0 !important; }
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
@media (max-width: 900px) {
	.single-product .site-main { padding-top: 6px !important; }
	.single-product div.product { display: block !important; }
	.single-product div.product .woocommerce-product-gallery {
		width: 100% !important;
		float: none !important;
		margin: 0 0 8px !important;
	}
	.single-product div.product .summary {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.single-product .woocommerce-breadcrumb { font-size: 11.5px !important; margin: 10px 0 12px !important; }
	.single-product .woocommerce-product-gallery,
	.single-product .woocommerce-product-gallery__wrapper,
	.single-product .woocommerce-product-gallery__image {
		border: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
	}
	.single-product .woocommerce-product-gallery__image img { border-radius: 0 !important; }
	.single-product .cnv-product-badges { display: none !important; }


	.single-product .product_title { font-size: 22px !important; line-height: 1.3 !important; margin: 8px 0 6px !important; }
	.single-product .cnv-product-badges { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 8px !important; }
	.single-product .cnv-price-note { font-size: 12px !important; }

	form.cart .variations { width: 100% !important; margin: 0 0 10px !important; }
	form.cart .variations tbody, form.cart .variations tr { display: block !important; }
	form.cart .variations th.label,
	form.cart .variations td.value {
		display: block !important;
		width: 100% !important;
		padding: 0 0 4px !important;
		text-align: left !important;
	}
	form.cart .variations th.label { padding-top: 8px !important; }
	form.cart .variations label { font-size: 12px !important; letter-spacing: 0.05em; text-transform: uppercase; color: #555; }
	form.cart .variations select { width: 100% !important; max-width: none !important; padding: 12px 14px !important; }

	.cnv-nic { width: 100% !important; margin: 0 0 18px !important; }
	.cnv-nic select { width: 100% !important; display: block; }
	form.cart .woocommerce-variation:empty,
	.single_variation .woocommerce-variation:empty { display: none !important; }
	.single_variation, .single_variation_wrap { min-height: 0 !important; }
	.cnv-nic label { display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #555; margin: 0 0 5px; }
	.cnv-nic select { width: 100%; padding: 12px 14px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; font-size: 14px; }

	.woocommerce-variation-add-to-cart { display: flex !important; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
	.woocommerce-variation-add-to-cart .quantity { flex: 0 0 96px; margin: 0 !important; }
	.woocommerce-variation-add-to-cart .cnv-nic { flex: none; width: 100%; }
	.single_add_to_cart_button {
		flex: 1 1 auto;
		background: #c40000 !important;
		border-color: #c40000 !important;
		color: #fff !important;
		text-transform: uppercase;
		font-weight: 700 !important;
		letter-spacing: 0.03em;
		padding: 12px 10px !important;
		border-radius: 4px !important;
		font-size: 13.5px !important;
		line-height: 1.15 !important;
		white-space: normal !important;
		min-height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.single_add_to_cart_button.disabled,
	.single_add_to_cart_button:disabled { background: #e9a4a4 !important; border-color: #e9a4a4 !important; }


	.woocommerce-tabs ul.tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; padding: 0 !important; margin: 0 0 14px !important; }
	.woocommerce-tabs ul.tabs li { flex: 0 0 auto; margin: 0 !important; }
	.woocommerce-tabs ul.tabs li a { padding: 12px 14px !important; font-size: 13px !important; white-space: nowrap; }
	.woocommerce-tabs .panel { padding: 0 !important; }
	.related.products > h2 { font-size: 19px; }
}