/* ==========================================================================
   Page scaffolding: wrap, header, navigation, footer
   ========================================================================== */

.cod-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cod-main { flex: 1 0 auto; }

.cod-wrap,
/*
 * The WooCommerce content wrapper. It replaced WooCommerce's own so the page
 * has one <main>, and it went in without the container treatment -- which let
 * the single-product template render flush against the viewport edge.
 */
.cod-wc-content {
	width: 100%;
	max-width: var(--cod-wrap);
	margin-inline: auto;
	padding-inline: var(--cod-gutter);
}

/* A template that supplies its own .cod-wrap inside this one must not add a
   second gutter, so the inner one goes neutral. Done this way round rather
   than with :has() on the parent, because the parent containing a wrap
   anywhere in its subtree is not the same question as it having one as a
   direct child -- and getting that wrong removes the container entirely. */
.cod-wc-content > .cod-wrap {
	max-width: none;
	padding-inline: 0;
}

.cod-wrap--narrow { max-width: 820px; }

.cod-section { padding-block: clamp(32px, 5vw, 64px); }
.cod-section--tight { padding-block: clamp(20px, 3vw, 32px); }
.cod-section--soft { background: var(--cod-surface-soft); }

.cod-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: clamp(16px, 2.5vw, 28px);
}

.cod-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cod-section__title { margin: 0; }

.cod-section__sub {
	margin: 0;
	color: var(--cod-ink-soft);
	font-size: var(--cod-step--1);
	flex-basis: 100%;
}

.cod-section__head--center .cod-section__sub { flex-basis: auto; }

.cod-section__link { font-size: var(--cod-step--1); font-weight: 600; white-space: nowrap; }

/* --- Promo bar --------------------------------------------------------- */

.cod-promo {
	background: var(--cod-navy);
	color: #fff;
	font-size: var(--cod-step--1);
}

.cod-promo.is-hidden { display: none; }

.cod-promo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 36px;
	position: relative;
}

.cod-promo__text {
	margin: 0;
	text-align: center;
	font-weight: 600;
	letter-spacing: .01em;
}

.cod-promo__dismiss {
	position: absolute;
	right: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: .7;
}

.cod-promo__dismiss:hover { opacity: 1; }

/* --- Utility bar -------------------------------------------------------
 *
 * The slim row of support links above the header. Deliberately quiet: it is
 * there for the person who already has a problem, and should not compete with
 * the product navigation for attention.
 *
 * Not sticky. The header is, and two sticky bars eat a third of a phone
 * screen before any content appears.
 */

.cod-utility {
	background: var(--cod-surface);
	border-bottom: 1px solid var(--cod-line);
}

.cod-utility__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-utility__list li { display: flex; align-items: center; }

/*
 * A hairline between items, drawn as a border on the item rather than a
 * separate element, so it cannot be read out by a screen reader or land on
 * its own line when the row wraps.
 */
.cod-utility__list li + li { border-left: 1px solid var(--cod-line); }

.cod-utility__list a {
	display: block;
	padding: .55rem .9rem;
	color: var(--cod-muted);
	font-size: .82rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.cod-utility__list a:hover,
.cod-utility__list a:focus-visible { color: var(--cod-ink); }

.cod-utility__list li:last-child a { padding-right: 0; }

@media (max-width: 640px) {
	/*
	 * On a phone the burger menu already carries these, and a wrapping row of
	 * small grey links above the logo is clutter in the least forgiving space
	 * on the site.
	 */
	.cod-utility { display: none; }
}

/* --- Header ------------------------------------------------------------ */

.cod-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--cod-surface);
	border-bottom: 1px solid var(--cod-line);
	box-shadow: var(--cod-shadow-sm);
}

.cod-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	min-height: 64px;
}

.cod-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	cursor: pointer;
}

.cod-burger { display: block; width: 18px; }

.cod-burger span {
	display: block;
	height: 2px;
	background: var(--cod-navy);
	border-radius: 2px;
}

.cod-burger span + span { margin-top: 4px; }

.cod-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.cod-brand:hover { text-decoration: none; }

.cod-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 9px;
	border-radius: var(--cod-radius-sm);
	background: var(--cod-navy);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .06em;
}

.cod-brand__name {
	font-weight: 700;
	font-size: var(--cod-step-1);
	color: var(--cod-navy);
	white-space: nowrap;
}

.cod-brand__logo { max-height: 40px; width: auto; }

.cod-header__search { display: none; }

.cod-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-self: end;
}

.cod-header__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--cod-radius-sm);
	color: var(--cod-navy);
	font-size: var(--cod-step--1);
	font-weight: 600;
}

.cod-header__action:hover {
	background: var(--cod-surface-soft);
	text-decoration: none;
}

.cod-header__action-label { display: none; }

.cod-cart-link { position: relative; }

.cod-cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cod-blue);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* Icons drawn with CSS so the theme ships no icon font or SVG sprite. */
.cod-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cod-icon--cart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1b33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 7H6'/%3E%3C/svg%3E"); }
.cod-icon--user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1b33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.cod-icon--search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }

/* --- Search ------------------------------------------------------------ */

.cod-search {
	display: flex;
	width: 100%;
	max-width: 520px;
}

.cod-search__field {
	border-radius: var(--cod-radius-sm) 0 0 var(--cod-radius-sm);
	border-right: 0;
}

.cod-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	border: 0;
	border-radius: 0 var(--cod-radius-sm) var(--cod-radius-sm) 0;
	background: var(--cod-blue);
	cursor: pointer;
}

.cod-search__submit:hover { background: var(--cod-blue-dark); }

/* --- Language switcher ------------------------------------------------- */

.cod-lang { position: relative; }

.cod-lang__toggle {
	padding: 8px 10px;
	background: none;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	font-size: var(--cod-step--1);
	font-weight: 700;
	color: var(--cod-navy);
	cursor: pointer;
}

.cod-lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 950;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cod-surface);
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	box-shadow: var(--cod-shadow);
}

.cod-lang__menu[hidden] { display: none; }

.cod-lang__item a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--cod-radius-sm);
	color: var(--cod-ink);
	font-size: var(--cod-step--1);
}

.cod-lang__item a:hover { background: var(--cod-surface-soft); text-decoration: none; }
.cod-lang__item.is-current a { font-weight: 700; color: var(--cod-blue); }

/* --- Primary navigation ------------------------------------------------ */

.cod-nav {
	display: none;
	border-top: 1px solid var(--cod-line);
	background: var(--cod-surface);
}

.cod-nav.is-open {
	display: block;
	position: fixed;
	inset: 0;
	top: 0;
	z-index: 950;
	overflow-y: auto;
	padding-top: 12px;
}

.cod-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-nav__list a {
	display: block;
	padding: 12px 4px;
	color: var(--cod-navy);
	font-weight: 600;
	border-bottom: 1px solid var(--cod-line);
}

.cod-nav__list a:hover { color: var(--cod-blue); text-decoration: none; }

.cod-nav__list .sub-menu {
	margin: 0;
	padding-left: 16px;
	list-style: none;
}

.cod-nav__mobile-extras { padding: 16px 0; }

/* --- Footer ------------------------------------------------------------ */

.cod-footer {
	margin-top: clamp(32px, 5vw, 64px);
	padding-block: clamp(32px, 4vw, 48px) 24px;
	background: var(--cod-navy);
	color: #c8d2e4;
	font-size: var(--cod-step--1);
}

.cod-footer a { color: #e6ecf7; }

.cod-footer .cod-brand__name { color: #fff; }

.cod-footer .cod-brand__mark { background: var(--cod-blue); }

.cod-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.cod-footer__heading {
	margin: 0 0 12px;
	color: #fff;
	font-size: var(--cod-step-0);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cod-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.cod-footer__tagline { margin-top: 12px; max-width: 42ch; }

.cod-footer__countries { font-size: var(--cod-step--1); opacity: .9; }

.cod-footer__note { margin-top: 12px; opacity: .8; }

.cod-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.cod-footer__copy { margin: 0; }

.cod-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Breakpoints ------------------------------------------------------- */

@media (min-width: 768px) {
	:root { --cod-gutter: 24px; }

	.cod-header__inner { min-height: 72px; }

	.cod-header__action-label { display: inline; }

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

@media (min-width: 1024px) {
	.cod-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 24px;
	}

	.cod-header__burger { display: none; }

	.cod-header__search { display: block; justify-self: center; width: 100%; }

	.cod-nav { display: block; }

	.cod-nav.is-open { position: static; }

	.cod-nav__inner { display: flex; align-items: center; }

	.cod-nav__list {
		flex-direction: row;
		gap: 4px;
		flex-wrap: wrap;
	}

	.cod-nav__list > li { position: relative; }

	.cod-nav__list a,
	.cod-nav__list > li > .cod-nav__toggle {
		padding: 12px 14px;
		border-bottom: 0;
		font-size: var(--cod-step--1);
	}

	/*
	 * Specificity, not source order: the base .cod-nav__toggle rule is
	 * appended further down this file, so an equally specific selector here
	 * would lose to it and the desktop padding would never apply.
	 */
	.cod-nav__list > li > .cod-nav__toggle { width: auto; }

	/* ...but not the links inside the dropdown panel. */
	.cod-nav__list .cod-mega a { padding: 0; font-size: inherit; }

	.cod-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 940;
		min-width: 220px;
		padding: 6px;
		background: var(--cod-surface);
		border: 1px solid var(--cod-line);
		border-radius: var(--cod-radius);
		box-shadow: var(--cod-shadow);
		opacity: 0;
		visibility: hidden;
		transition: opacity .15s ease;
	}

	.cod-nav__list > li:hover .sub-menu,
	.cod-nav__list > li:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.cod-nav__mobile-extras { display: none; }

	.cod-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}


/* --- Catalogue dropdowns -----------------------------------------------
 *
 * "By brand" and "By puffs" in the primary navigation. Two ways into the same
 * catalogue: people arrive knowing either the brand they already smoke or
 * roughly how long they want a device to last.
 *
 * The panel is a plain nested list. With JavaScript off it stays open and
 * still links everywhere, which is why nothing here uses display:none for the
 * closed state -- the [hidden] attribute does, and the script owns it.
 */

.cod-nav__item--mega { position: relative; }

/*
 * The toggle has to be indistinguishable from a nav link, because it sits in
 * the same row as one. Matching .cod-nav__list a exactly -- padding, weight,
 * colour, size -- rather than inheriting: `padding: 0` and `font: inherit`
 * left the two dropdowns jammed against each other in lighter text while
 * every real link around them had 14px of breathing room.
 */
.cod-nav__toggle {
	display: flex;
	align-items: center;
	gap: .35rem;
	width: 100%;
	padding: 12px 4px;
	border: 0;
	border-bottom: 1px solid var(--cod-line);
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: var(--cod-navy);
	text-align: left;
	cursor: pointer;
}

.cod-nav__toggle:hover,
.cod-nav__toggle:focus-visible { color: var(--cod-blue); }

.cod-nav__chevron { transition: transform .15s ease; }

.cod-nav__item--mega[data-cod-open] .cod-nav__chevron { transform: rotate(180deg); }

.cod-mega {
	position: absolute;
	top: 100%;
	/*
	 * Anchored to the toggle's left edge, not centred under it.
	 *
	 * Centring looks tidy with the two small panels this catalogue currently
	 * produces, and breaks the moment a brand list grows: a 60rem panel
	 * centred under a toggle 120px from the left edge hangs off the screen,
	 * and the half a reader wants is the half that is gone.
	 */
	left: 0;
	z-index: 950;
	width: max-content;
	max-width: min(60rem, calc(100vw - 2 * var(--cod-gutter)));
	/*
	 * No margin between the toggle and the panel.
	 *
	 * A gap here is dead space that belongs to neither: moving the pointer
	 * down from "By brand" towards the list crossed it, mouseleave fired on
	 * the <li>, and the panel shut before anything could be clicked. The menu
	 * could be opened and never used.
	 *
	 * The breathing room comes from the panel's own top padding instead, so
	 * the pointer is inside the panel the instant it leaves the toggle.
	 */
	margin-top: 0;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
	box-shadow: var(--cod-shadow-lg);
}

.cod-mega[hidden] { display: none; }

/*
 * A short accent rule across the top edge, tying the panel to the toggle that
 * opened it. Two pixels of colour, not a coloured panel: the job here is a
 * list of product names, and they have to stay the loudest thing in it.
 */
.cod-mega::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.75rem;
	right: 1.75rem;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: linear-gradient(90deg, var(--cod-blue), var(--cod-magenta));
}

.cod-nav__item--mega[data-cod-open] .cod-mega {
	animation: cod-mega-in .16s ease-out;
}

@keyframes cod-mega-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.cod-nav__item--mega[data-cod-open] .cod-mega { animation: none; }
}

/*
 * Columns by group count, not by available width.
 *
 * The panel is sized to its content (width: max-content), so auto-fit has no
 * spare track to fill and collapses every group into one column however many
 * there are -- a brand list becomes a very tall, very thin menu. Counting the
 * groups is what actually decides the shape here.
 *
 * Browsers without :has() keep the single column, which is the layout this
 * had before and is still usable.
 */
.cod-mega__inner {
	display: grid;
	grid-template-columns: minmax(14rem, 1fr);
	gap: 1.5rem 2.5rem;
}

.cod-mega__inner:has(> .cod-mega__group:nth-child(2)) {
	grid-template-columns: repeat(2, minmax(13rem, 1fr));
}

.cod-mega__inner:has(> .cod-mega__group:nth-child(5)) {
	grid-template-columns: repeat(3, minmax(12.5rem, 1fr));
}

.cod-mega__inner:has(> .cod-mega__group:nth-child(9)) {
	grid-template-columns: repeat(4, minmax(12rem, 1fr));
}

/*
 * The panel is inside .cod-nav__list, so `.cod-nav__list a` reaches every link
 * in it -- 12px/14px padding and a bottom border on each one, which turned the
 * product list into a stack of bordered blocks. These reset what it inherits.
 */
.cod-mega a {
	padding: 0;
	border-bottom: 0;
	font-weight: inherit;
	font-size: inherit;
}

.cod-mega__group { min-width: 0; }

/*
 * Sentence case, not capitals.
 *
 * Brand names are already the loudest words on the page -- HIPHOP, BIG PUFF CLUB --
 * and setting the headings in capitals on top of that made the whole panel
 * shout. The heading is separated from its list by weight, size and the rule
 * beneath it instead.
 */
.cod-mega__title {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin: 0 0 .6rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--cod-line);
	color: var(--cod-ink);
	font-family: var(--cod-font-heading);
	font-size: .98rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	text-decoration: none;
}

.cod-mega__title:hover,
.cod-mega__title:focus-visible {
	color: var(--cod-blue);
	border-bottom-color: var(--cod-blue);
	text-decoration: none;
}

.cod-mega__count {
	color: var(--cod-muted);
	font-size: .78rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cod-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .1rem;
}

.cod-mega__list a {
	display: block;
	padding: .38rem .55rem;
	margin-left: -.55rem;
	border-radius: var(--cod-radius-sm);
	color: var(--cod-ink-soft);
	font-size: .92rem;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}

.cod-mega__list a:hover,
.cod-mega__list a:focus-visible {
	background: var(--cod-surface-soft);
	color: var(--cod-blue);
}

/*
 * The open toggle keeps a marker of its own, so it stays legible which of the
 * two dropdowns the panel below belongs to.
 */
.cod-nav__list > li > .cod-nav__toggle { position: relative; }

.cod-nav__item--mega[data-cod-open] > .cod-nav__toggle::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

@media (max-width: 900px) {
	/*
	 * In the mobile menu the nav is already a vertical list, so the panel
	 * becomes part of it rather than floating over it.
	 */
	.cod-mega {
		position: static;
		width: auto;
		max-width: none;
		min-width: 0;
		margin: .5rem 0 .25rem;
		padding: .75rem 0 .25rem;
		border: 0;
		border-left: 2px solid var(--cod-line);
		border-radius: 0;
		box-shadow: none;
		padding-left: 1rem;
	}

	.cod-mega::before { display: none; }

	.cod-nav__item--mega[data-cod-open] .cod-mega { animation: none; }

	.cod-mega__inner,
	.cod-mega__inner:has(> .cod-mega__group:nth-child(2)),
	.cod-mega__inner:has(> .cod-mega__group:nth-child(5)),
	.cod-mega__inner:has(> .cod-mega__group:nth-child(9)) {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}