/**
 * Catalog surface — shop archive, product cards, filters, flavour matrix.
 *
 * The markup these rules style is the reference site's, and so is the CSS:
 * `.shop-catalog-layout`, `.mwg-catalog-filters`, `.product-card`,
 * `.mwg-flavor-*`. Copying the selectors verbatim is deliberate. The brief was
 * an *identical* filter and an identical product page, and an identical
 * stylesheet is the only version of that which cannot drift.
 *
 * Three things were added to the extracted sheet:
 *
 *   1. The `:root` aliases below. The reference writes its rules against
 *      `--navy` / `--blue` / `--green`. This theme already owns a token set
 *      (`--vp-*`) with a green accent, so instead of rewriting every rule and
 *      losing the fidelity, both sets coexist: the theme keeps its own names,
 *      and the reference's names are declared here for the reference's rules.
 *   2. A short block at the end turning WooCommerce's default `ul.products`
 *      loops (related products, shortcodes) into the same grid, because this
 *      theme's card template renders inside those too.
 *   3. Styles for controls this theme added that the reference did not have —
 *      the "Clear Qty" button and the wholesale MOQ note's spacing.
 *
 * Rules belonging to plugins that are not part of this theme — the age-gate
 * buttons, the cookie bar, the carousel dots, the account/registration
 * redesign — are deliberately not copied. They style markup that does not
 * exist here, and shipping them would be dead weight on every page load.
 *
 * Loaded only on WooCommerce views, and after `woocommerce.css`, so these
 * rules win where the two disagree about a card or a price.
 *
 * @package Vapeline
 */

/* ---------------------------------------------------------------------------
   Reference design tokens.

   `--teal` is intentionally `currentColor`: the reference sheet consumes it in
   one border without ever declaring it, so on the source site it resolves to
   the inherited text colour. Spelling that out keeps the port honest instead
   of inventing a teal the reference never had.
   --------------------------------------------------------------------------- */
:root {
	--navy: #092c54;
	--navy-dark: #071f3c;
	--blue: #0871b2;
	--green: #43b900;
	--teal: currentColor;
	--ink: #222;
	--muted: #666;
	--line: #e3e3e3;
	--shell: 1202px;
}

/* ---------------------------------------------------------------------------
   Prices behind the wholesale gate.
   --------------------------------------------------------------------------- */
.mwg-login-price {
	display: inline-block;
	color: #1b568b;
	font-size: 15px;
	font-style: italic;
	text-decoration: none;
}

.mwg-login-price:hover,
.mwg-login-price:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Product detail — heading, two-column split, add-to-cart controls.
   --------------------------------------------------------------------------- */
.woocommerce-products-header__title,
.product-detail h1 {
	font-size: 30px;
	line-height: 1.15;
}

.product-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 40px;
	padding-top: 25px;
}

.product-detail .price {
	font-size: 22px;
	margin: 18px 0;
}

/* The "buying for a store?" notice: an explicit out for the buyer who will
   never self-serve, placed above the fold rather than in a footer. */
.mwg-sales-contact-notice {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	margin: 14px 0;
	padding: 13px 14px;
	border: 1px solid #b9d2e8;
	border-left: 4px solid var(--blue);
	border-radius: 5px;
	background: #f3f8fc;
	color: #17324d;
}

.mwg-sales-contact-icon {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 700;
}

.mwg-sales-contact-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.mwg-sales-contact-copy strong {
	font-size: 14px;
}

.mwg-sales-contact-copy small {
	color: #506579;
	font-size: 12px;
	line-height: 1.4;
}

.mwg-sales-contact-link {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 4px;
	background: var(--navy);
	padding: 7px 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.mwg-sales-contact-link:hover,
.mwg-sales-contact-link:focus {
	background: var(--blue);
	color: #fff;
}

.product-detail form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}

.product-detail form.cart .quantity {
	margin: 0 !important;
}

.product-detail form.cart .quantity input {
	height: 38px;
	min-width: 62px;
	border: 1px solid #ccd4dc;
	padding: 0 8px;
}

.product-detail form.cart .single_add_to_cart_button,
.mwg-buy-now {
	min-height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: 3px;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.product-detail form.cart .single_add_to_cart_button:hover,
.mwg-buy-now:hover {
	background: #0e4b87;
}

.mwg-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #43b900;
	text-decoration: none;
}

.product-detail form.variations_form {
	display: block;
}

.product-detail .variations select {
	min-width: 180px;
	height: 38px;
	border: 1px solid #ccd4dc;
	padding: 0 8px;
	background: #fff;
}

.product-detail .variations td {
	padding: 5px 8px 5px 0;
}

.product-detail .reset_variations {
	font-size: 12px;
	color: #526679;
}

/* ---------------------------------------------------------------------------
   Archive shell — breadcrumb, title, toolbar.
   --------------------------------------------------------------------------- */
.shop-archive,
.product-page {
	padding-top: 0;
	padding-bottom: 48px;
	min-height: 55vh;
}

.archive-navigation {
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid #edf0f3;
}

.shop-breadcrumb {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	color: #6b7682;
	font-size: 12px;
	line-height: 1.4;
}

.shop-breadcrumb a {
	color: #526679;
}

.shop-breadcrumb a:hover,
.shop-breadcrumb a:focus {
	text-decoration: underline;
	color: var(--navy);
}

.shop-breadcrumb [aria-current=page] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.archive-back-link {
	flex: 0 0 auto;
	color: #355b7d;
	font-size: 12px;
	font-weight: 700;
}

.archive-back-link:hover,
.archive-back-link:focus {
	text-decoration: underline;
	color: var(--navy);
}

.shop-archive-header {
	margin: 24px 0 0;
}

.shop-archive-header h1 {
	margin: 0 0 20px;
	font-size: 30px;
	line-height: 1.15;
}

.shop-archive-header .term-description {
	max-width: 100%;
	margin: 0;
	color: #222;
}

.shop-archive-header .term-description p {
	margin: 0 0 12px;
}

.shop-loop-toolbar {
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	margin: 5px 0 14px;
}

.shop-loop-toolbar:after {
	display: none;
}

.shop-loop-toolbar .woocommerce-notices-wrapper:empty {
	display: none;
}

.shop-loop-toolbar .woocommerce-result-count,
.shop-loop-toolbar .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

.shop-loop-toolbar .woocommerce-result-count {
	font-size: 14px;
	line-height: 38px;
}

.shop-loop-toolbar .woocommerce-ordering {
	margin-left: auto !important;
}

.shop-loop-toolbar .woocommerce-ordering select {
	min-width: 168px;
	height: 38px;
	border: 1px solid #ccd4dc;
	border-radius: 2px;
	background: #fff;
	padding: 0 32px 0 10px;
	color: #222;
}

.shop-product-grid .product-card {
	width: auto !important;
	margin: 0 !important;
}

.shop-product-grid .product-card h2 {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Catalog layout and the filter sidebar.
   --------------------------------------------------------------------------- */
.shop-catalog-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.shop-catalog-results {
	min-width: 0;
}

.mwg-catalog-filters {
	border: 1px solid #e0e5ea;
	background: #fff;
	color: #263746;
	font-size: 14px;
}

.mwg-catalog-filters details {
	border-bottom: 1px solid #e6eaee;
	padding: 0 14px;
}

.mwg-catalog-filters summary {
	position: relative;
	padding: 16px 22px 13px 0;
	cursor: pointer;
	color: #182b3a;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	list-style: none;
}

.mwg-catalog-filters summary::-webkit-details-marker {
	display: none;
}

.mwg-catalog-filters summary:after {
	content: '+';
	position: absolute;
	right: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.mwg-catalog-filters details[open] summary:after {
	content: '−';
}

.mwg-catalog-filters ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.mwg-catalog-filters li {
	margin: 0;
}

.mwg-catalog-filters li a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	color: #455866;
	line-height: 1.25;
}

.mwg-catalog-filters li a:hover,
.mwg-catalog-filters li a:focus,
.mwg-catalog-filters li a.is-active {
	color: #0871b2;
	text-decoration: underline;
}

.mwg-catalog-filters li a.is-active:before {
	content: '✓';
	margin-right: 4px;
}

.mwg-catalog-filters small {
	color: #86939c;
}

.mwg-filter-scroll {
	max-height: 235px;
	overflow: auto;
	overscroll-behavior: contain;
	padding-right: 5px !important;
}

.mwg-price-filter {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 7px;
	align-items: end;
	margin: 0 0 15px;
}

.mwg-price-filter label span {
	display: block;
	margin-bottom: 4px;
	color: #667782;
	font-size: 11px;
}

.mwg-price-filter input {
	width: 100%;
	min-width: 0;
	height: 34px;
	border: 1px solid #d7dde2;
	border-radius: 3px;
	padding: 0 7px;
}

.mwg-price-filter button,
.mwg-clear-filters {
	border: 0;
	border-radius: 3px;
	background: #eef2f5;
	color: #263746;
	font-weight: 700;
	padding: 9px 11px;
	cursor: pointer;
}

.mwg-price-filter button:hover,
.mwg-price-filter button:focus {
	background: #092c54;
	color: #fff;
}

.mwg-clear-filters {
	display: block;
	margin: 14px;
	text-align: center;
}

/* The mobile chrome is markup-present but hidden on desktop; the drawer
   rules live in the 700px block near the bottom of this file. */
.mwg-mobile-catalog-tools,
.mwg-mobile-filter-chips,
.mwg-mobile-filter-backdrop,
.mwg-mobile-filter-drawer-head,
.mwg-mobile-view-products {
	display: none;
}

.mwg-mobile-filter-actions {
	display: block;
}

@media (max-width:760px) {
	.product-detail-grid {
		grid-template-columns: 1fr;
	}

	.mwg-sales-contact-notice {
		grid-template-columns: 30px minmax(0, 1fr);
		align-items: start;
	}

	.mwg-sales-contact-icon {
		width: 28px;
		height: 28px;
	}

	.mwg-sales-contact-link {
		grid-column: 2;
		width: max-content;
		margin-top: 3px;
	}
}

/* ---------------------------------------------------------------------------
   Product cards. The grid is owned here, not by WooCommerce, so a card cannot
   be stretched by a rule written for a different markup shape.
   --------------------------------------------------------------------------- */
.product-grid,
.search-results-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 20px 0 34px;
}

.product-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	border: 1px solid #e2e6eb;
	background: #fff;
	padding: 13px;
	transition: box-shadow .2s ease, transform .2s ease;
}

.product-card:hover {
	box-shadow: 0 10px 28px rgba(11, 36, 63, .12);
	transform: translateY(-2px);
}

.product-card-link {
	color: inherit;
}

.product-card .product-image {
	aspect-ratio: 1/1;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff;
}

.product-card .product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card h2 {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 600;
	margin: 12px 0;
	min-height: 60px;
}

.product-card-meta {
	margin-top: auto;
}

.product-card .stock {
	display: block;
	font-size: 12px;
	margin-bottom: 8px;
}

.product-card .in-stock {
	color: #177245;
}

.product-card .out-of-stock {
	color: #8a5b00;
}

.product-card .price,
.mwg-price-gate {
	font-size: 14px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Product summary column.
   --------------------------------------------------------------------------- */
.product-detail .summary .product_title {
	max-width: 680px;
	margin: 0 0 18px;
	font-size: clamp(26px, 2.35vw, 34px);
	line-height: 1.16;
	letter-spacing: -.015em;
	color: #17293a;
}

.product-detail .summary .price {
	font-size: 22px;
}

.mwg-moq,
.mwg-inventory-note {
	padding: 12px 14px;
	background: #f4f7fa;
	border-left: 4px solid var(--teal);
}

/* ---------------------------------------------------------------------------
   Flavour matrix (order sheet).

   One row per buyable option — name, price, stock, quantity stepper, Add.
   Products here are variable, so each row also carries `data-variation-id` and
   `data-attributes`; the row drives the native WooCommerce form rather than
   posting its own, which keeps WooCommerce's stock, nonce and validation in
   charge. See `inc/product-options.php`.
   --------------------------------------------------------------------------- */
.product-detail form.cart {
	align-items: flex-end;
}

.mwg-flavor-matrix {
	width: 100%;
	margin: 15px 0 2px;
	border: 1px solid #dbe3ea;
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	container-type: inline-size;
}

.mwg-flavor-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	border-bottom: 1px solid #e3e8ed;
	background: #fbfcfe;
}

.mwg-flavor-toolbar label {
	display: block;
	flex: 1;
	max-width: 360px;
}

.mwg-flavor-toolbar input {
	width: 100%;
	height: 34px;
	border: 1px solid #cbd7e2;
	border-radius: 3px;
	padding: 0 11px;
	color: #223748;
	background: #fff;
}

.mwg-flavor-list {
	width: 100%;
}

.mwg-flavor-row {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(92px, 120px) minmax(138px, 150px);
	gap: 10px;
	align-items: center;
	padding: 10px;
	border-top: 1px solid #e5eaef;
	color: #2f4354;
	font-size: 12px;
}

.mwg-flavor-row:first-child {
	border-top: 0;
}

.mwg-flavor-row:hover {
	background: #fbfdff;
}

.mwg-flavor-row[hidden] {
	display: none;
}

.mwg-flavor-commercial {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.mwg-flavor-commercial small {
	display: block;
	margin-bottom: 1px;
	color: #687b8b;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mwg-flavor-info {
	min-width: 0;
}

.mwg-flavor-name {
	display: block;
	min-width: 0;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.mwg-flavor-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 9px;
	margin-top: 5px;
	color: #687b8b;
	font-size: 10px;
	line-height: 1.35;
}

.mwg-flavor-meta span {
	display: inline-flex;
	gap: 3px;
	white-space: nowrap;
}

.mwg-flavor-meta b {
	color: #354d60;
	font-weight: 700;
}

.mwg-flavor-price,
.mwg-flavor-stock,
.mwg-flavor-qty {
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mwg-flavor-stock.is-in-stock {
	color: #177245;
}

.mwg-flavor-stock.is-out-of-stock {
	color: #8a5b00;
}

.mwg-flavor-price .mwg-login-price {
	display: inline;
	font-size: 12px;
	line-height: 1.3;
}

.mwg-row-quantity {
	display: grid;
	grid-template-columns: 25px minmax(34px, 40px) 25px minmax(38px, 1fr);
	gap: 4px;
	align-items: center;
	width: 100%;
}

.mwg-row-quantity button {
	height: 27px;
	border: 1px solid #cbd7e2;
	border-radius: 50%;
	padding: 0;
	background: #fff;
	color: #193c5a;
	line-height: 1;
	cursor: pointer;
}

.mwg-row-quantity input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 27px;
	border: 1px solid #cbd7e2;
	border-radius: 3px;
	text-align: center;
}

.mwg-row-quantity .mwg-flavor-add {
	box-sizing: border-box;
	width: 100%;
	min-width: 38px;
	height: 27px;
	border: 0;
	border-radius: 3px;
	background: #66cbed;
	color: #07334d;
	font-size: 10px;
	font-weight: 700;
	padding: 0 6px;
	text-transform: uppercase;
}

.mwg-row-quantity .mwg-flavor-add:hover {
	background: #36b6e3;
}

.mwg-flavor-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 28px;
	border-radius: 3px;
	padding: 0 10px;
	background: #edf3f8;
	color: #195278;
	font-weight: 700;
	text-align: center;
}

/* "Clear Qty" resets every stepper before the buyer starts over. Not in the
   reference sheet — this theme added the control, so it also owns its look. */
.mwg-clear-qty {
	flex: 0 0 auto;
	border: 0;
	border-radius: 3px;
	background: #eef2f5;
	color: #263746;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 12px;
	cursor: pointer;
}

.mwg-clear-qty:hover,
.mwg-clear-qty:focus {
	background: var(--navy);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Product gallery.

   WooCommerce ships gallery CSS written against its *classic* markup —
   `.woocommerce div.product div.images .flex-control-thumbs li { width:25%;
   float:left }` and everything around it. This theme's single-product template
   uses its own wrappers (`.product-page` → `.product-detail` →
   `.product-detail-grid`), so there is no `div.product` and none of those rules
   match. The result is not a missing thumbnail strip but a *broken* one: the
   `<li>` keep their default width and stack, so eight images render as eight
   full-width rows down an 800px column instead of a four-across strip.

   These are the rules this markup needs, using WooCommerce's own numbers
   (25% thumbnails, dimmed until active) so the gallery reads the same as any
   stock WooCommerce store. Do not delete them on the assumption that the
   plugin's stylesheet already covers it — it does not, and the selector that
   would is the one thing this theme's markup cannot provide.
   --------------------------------------------------------------------------- */
.product-detail .woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

.product-detail .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* The main image: one slide per viewport, so the column cannot grow to the
   height of every image stacked. */
.product-detail .woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
}

.product-detail .woocommerce-product-gallery__image > a {
	display: block;
}

.product-detail .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* The zoom affordance. Unstyled it lands as a bare inline icon at the top-left
   of the picture, on top of the product. */
.product-detail .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--navy);
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(9, 44, 84, .18);
}

.product-detail .woocommerce-product-gallery__trigger:hover,
.product-detail .woocommerce-product-gallery__trigger:focus {
	background: #fff;
}

/* WooCommerce prints its own icon inside the trigger; this theme ships no
   icon font, so the glyph is drawn instead of depending on one. */
.product-detail .woocommerce-product-gallery__trigger img,
.product-detail .woocommerce-product-gallery__trigger span {
	display: none;
}

.product-detail .woocommerce-product-gallery__trigger:after {
	content: '';
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-shadow: 6px 6px 0 -4px currentColor;
	transform: translate(-1px, -1px);
}

.product-detail .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.product-detail .flex-control-thumbs li {
	flex: 0 0 calc(25% - 6px);
	max-width: calc(25% - 6px);
	margin: 0;
	list-style: none;
}

.product-detail .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #dbe3ea;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, border-color .15s ease;
}

.product-detail .flex-control-thumbs img:hover,
.product-detail .flex-control-thumbs img.flex-active {
	border-color: var(--navy);
	opacity: 1;
}

@media (max-width: 700px) {
	.product-detail .flex-control-thumbs li {
		flex-basis: calc(33.333% - 6px);
		max-width: calc(33.333% - 6px);
	}
}

/* ---------------------------------------------------------------------------
   Product tabs.
   --------------------------------------------------------------------------- */
.product-detail .woocommerce-tabs {
	clear: both;
	margin: 42px 0 0;
}

.product-detail .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid #dbe3ea;
	list-style: none !important;
}

.product-detail .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	list-style: none !important;
}

.product-detail .woocommerce-tabs ul.tabs li:before,
.product-detail .woocommerce-tabs ul.tabs li:after {
	display: none !important;
}

.product-detail .woocommerce-tabs ul.tabs a {
	display: block;
	padding: 12px 16px;
	color: #526679;
	font-weight: 700;
	text-decoration: none;
}

.product-detail .woocommerce-tabs ul.tabs li.active a {
	border-bottom: 3px solid var(--navy);
	color: #102f4d;
}

.product-detail .woocommerce-tabs .panel {
	max-width: 100%;
	margin: 0 !important;
	padding: 24px 0 8px !important;
	color: #263947;
}

.product-detail .woocommerce-tabs .panel h2:first-child {
	margin-top: 0;
}

.product-detail .woocommerce-tabs .panel p,
.product-detail .woocommerce-tabs .panel li {
	font-size: 15px;
	line-height: 1.75;
}

.product-detail .woocommerce-tabs .panel img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Narrow screens.
   --------------------------------------------------------------------------- */
@media (max-width:1000px) {
	.product-grid,
	.search-results-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shop-catalog-layout {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 16px;
	}
}

@media (max-width:700px) {
	.shop-catalog-layout {
		display: block;
	}

	.product-grid,
	.search-results-grid,
	.shop-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.product-card {
		padding: 9px;
	}

	.product-card h2 {
		display: -webkit-box;
		min-height: 68px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		font-size: 12px;
	}

	.archive-navigation {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
		padding: 10px 0;
	}

	.product-page,
	.archive-navigation {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	.shop-breadcrumb {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.shop-breadcrumb [aria-current=page] {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The toolbar and the two-column bottom sheet. The same links and the same
	   WooCommerce ordering form are reused, so desktop and mobile can never
	   drift into different filter results. */
	.mwg-mobile-catalog-tools {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
		gap: 8px;
		margin: 16px 0 10px;
	}

	.mwg-mobile-filter-toggle,
	.mwg-mobile-sort-slot select {
		width: 100%;
		height: 44px;
		border: 1px solid #cbd6df;
		border-radius: 8px;
		background: #fff;
		color: #172e42;
		font-size: 13px;
		font-weight: 700;
	}

	.mwg-mobile-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 0 10px;
		cursor: pointer;
	}

	.mwg-mobile-filter-icon {
		position: relative;
		width: 15px;
		height: 12px;
		border-top: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
	}

	.mwg-mobile-filter-icon:after {
		content: '';
		position: absolute;
		left: 3px;
		right: 3px;
		top: 3px;
		border-top: 2px solid currentColor;
	}

	.mwg-mobile-result-total {
		color: #728290;
		font-size: 11px;
		font-weight: 600;
	}

	.mwg-mobile-filter-count {
		display: inline-flex;
		min-width: 19px;
		height: 19px;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: #0871b2;
		color: #fff;
		font-size: 11px;
	}

	.mwg-mobile-sort-slot {
		min-width: 0;
	}

	.mwg-mobile-sort-slot .woocommerce-ordering {
		float: none !important;
		width: 100%;
		margin: 0 !important;
	}

	.mwg-mobile-sort-slot select {
		min-width: 0;
		padding: 0 30px 0 10px;
		font-weight: 600;
	}

	.mwg-mobile-filter-chips {
		display: flex;
		gap: 7px;
		max-width: 100%;
		margin: 0 0 10px;
		overflow-x: auto;
		padding: 0 1px 4px;
		scrollbar-width: none;
	}

	.mwg-mobile-filter-chips[hidden] {
		display: none;
	}

	.mwg-mobile-filter-chips::-webkit-scrollbar {
		display: none;
	}

	.mwg-mobile-filter-chips a {
		flex: 0 0 auto;
		border-radius: 15px;
		background: #eef5fa;
		padding: 6px 10px;
		color: #24516f;
		font-size: 11px;
		font-weight: 700;
	}

	.shop-loop-toolbar.mwg-mobile-ordering-moved {
		min-height: 0;
		margin: 0;
	}

	.shop-loop-toolbar.mwg-mobile-ordering-moved .woocommerce-result-count {
		display: none;
	}

	.mwg-mobile-filter-backdrop {
		position: fixed;
		inset: 0;
		z-index: 10010;
		width: 100%;
		height: 100%;
		border: 0;
		background: rgba(7, 31, 60, .48);
		padding: 0;
	}

	.mwg-mobile-filter-backdrop:not([hidden]) {
		display: block;
	}

	.mwg-catalog-filters.mwg-mobile-filter-drawer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10020;
		display: flex;
		max-height: min(82dvh, 680px);
		margin: 0;
		flex-direction: column;
		border: 0;
		border-radius: 20px 20px 0 0;
		background: #f7f9fb;
		box-shadow: 0 -16px 44px rgba(7, 31, 60, .25);
		transform: translate3d(0, 105%, 0);
		visibility: hidden;
		transition: transform .24s ease, visibility .24s;
	}

	.mwg-catalog-filters.mwg-mobile-filter-drawer.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	/* Set by assets/js/catalog.js while the sheet is open. Locking the root
	   rather than the body keeps the scroll position: a body lock on iOS
	   scrolls the page back to the top as soon as it lifts. */
	html.mwg-drawer-open {
		overflow: hidden;
	}

	.mwg-mobile-filter-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px 13px;
		border-bottom: 1px solid #dde4ea;
		background: #fff;
		border-radius: 20px 20px 0 0;
	}

	.mwg-mobile-filter-drawer-head strong,
	.mwg-mobile-filter-drawer-head span {
		display: block;
	}

	.mwg-mobile-filter-drawer-head strong {
		color: #142d43;
		font-size: 18px;
	}

	.mwg-mobile-filter-drawer-head span {
		margin-top: 2px;
		color: #71808c;
		font-size: 11px;
	}

	.mwg-mobile-filter-drawer-head button {
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 18px;
		background: #edf2f6;
		color: #19364e;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}

	.mwg-mobile-filter-groups {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		min-height: 0;
		overflow-y: auto;
		padding: 14px 14px 18px;
		overscroll-behavior: contain;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details {
		min-width: 0;
		border: 1px solid #dce4ea;
		border-radius: 10px;
		background: #fff;
		padding: 0 12px;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="categories"] {
		order: 1;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="brand"] {
		order: 2;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="nicotine"] {
		order: 3;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="puffs"] {
		order: 4;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="price"] {
		order: 5;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[data-filter-group="rechargeable"] {
		order: 6;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details[open] {
		grid-column: 1/-1;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups summary {
		display: flex;
		min-height: 54px;
		align-items: center;
		padding: 10px 24px 10px 0;
		font-size: 11px;
		line-height: 1.25;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups details:not([open]) > :not(summary) {
		display: none;
	}

	.mwg-catalog-filters .mwg-mobile-filter-groups ul {
		margin-bottom: 12px;
	}

	.mwg-filter-scroll {
		max-height: 240px;
	}

	.mwg-mobile-filter-actions {
		display: flex;
		gap: 9px;
		padding: 12px 14px max(12px, env(safe-area-inset-bottom));
		border-top: 1px solid #dce4ea;
		background: #fff;
	}

	.mwg-mobile-filter-actions .mwg-clear-filters {
		flex: 0 0 auto;
		margin: 0;
		padding: 12px 14px;
	}

	.mwg-mobile-view-products {
		display: block;
		min-height: 43px;
		flex: 1;
		border: 0;
		border-radius: 7px;
		background: #092c54;
		color: #fff;
		font-weight: 700;
		cursor: pointer;
	}

	.mwg-price-filter {
		margin-bottom: 12px;
	}

	.product-detail .summary .product_title {
		font-size: clamp(22px, 6vw, 27px);
		line-height: 1.2;
	}

	.product-detail .woocommerce-tabs {
		margin-top: 28px;
	}

	.product-detail .woocommerce-tabs ul.tabs {
		display: grid;
		grid-template-columns: 1fr;
	}

	.product-detail .woocommerce-tabs ul.tabs li {
		border-bottom: 1px solid #e4e9ee !important;
	}

	.product-detail .woocommerce-tabs ul.tabs li.active a {
		border-bottom: 0;
		border-left: 3px solid var(--navy);
		background: #f5f8fa;
	}

	.product-detail .woocommerce-tabs .panel {
		padding: 20px 0 4px !important;
	}

	.product-detail .woocommerce-tabs .panel p,
	.product-detail .woocommerce-tabs .panel li {
		font-size: 14px;
		line-height: 1.68;
	}

	/* Under 700px the order sheet stacks: name and quantity each take the full
	   width, and price and stock keep their labels via `data-label`. */
	.mwg-flavor-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.mwg-flavor-toolbar label {
		max-width: none;
	}

	.mwg-flavor-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2px 12px;
		padding: 10px;
	}

	.mwg-flavor-info,
	.mwg-flavor-qty {
		grid-column: 1/-1;
	}

	.mwg-flavor-price:before,
	.mwg-flavor-stock:before {
		content: attr(data-label) ': ';
		color: #647685;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.mwg-row-quantity {
		grid-template-columns: 30px minmax(45px, 55px) 30px minmax(58px, 1fr);
		margin-top: 4px;
	}

	.mwg-row-quantity button,
	.mwg-row-quantity input {
		height: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Other WooCommerce loops.

   Related products, upsells and the product shortcodes render `ul.products`
   with this theme's card inside each `li`. The reference had no equivalent
   surface, so this block is local: same grid metrics, no card geometry of its
   own — the card rules above already do that.
   --------------------------------------------------------------------------- */
ul.products:not(.shop-product-grid) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 20px 0 34px;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce ships a classic float clearfix on this element:
 *   .woocommerce ul.products::before,
 *   .woocommerce ul.products::after { content: " "; display: table; }
 *
 * `display: table` is fine for floats, but the moment this rule sets
 * `display: grid` those two pseudo-elements become ordinary **grid items**.
 * Measured: each one took a full cell (274.5 × 469), so `::before` claimed
 * row 1 / column 1 and `::after` claimed a cell after the last product.
 * Every real card was pushed one column right (the first card rendered at
 * x=437 instead of x=144) and the last one wrapped onto an otherwise empty
 * second row — the "Related products 错位" symptom.
 *
 * Zero-length grid items still consume a cell, so they have to be removed,
 * not merely collapsed to `display: block`.
 */
ul.products:not(.shop-product-grid)::before,
ul.products:not(.shop-product-grid)::after {
	content: none;
	display: none;
}

ul.products:not(.shop-product-grid) > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
}

@media (max-width:1000px) {
	ul.products:not(.shop-product-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width:700px) {
	ul.products:not(.shop-product-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}