/* =========================================================================
   NP Packaging - main.css
   Design tokens, base styles, header, navigation, footer, blog, utilities.
   WooCommerce skinning lives in woocommerce.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Brand */
	--np-yellow: #ffc400;
	--np-yellow-dark: #ebb300;
	--np-yellow-soft: #fff6da;
	--np-black: #111111;
	--np-ink: #1a1a1a;
	--np-white: #ffffff;

	/* Neutrals */
	--np-grey-50: #f7f7f5;
	--np-grey-100: #efefec;
	--np-grey-200: #e2e2df;
	--np-grey-300: #cfcfcb;
	--np-grey-400: #9a9a95;
	--np-grey-600: #5c5c57;

	/* Semantic */
	--np-red: #d6323c;
	--np-red-soft: #fdecec;
	--np-green: #1b7a3d;
	--np-green-soft: #e8f4ec;

	/* Type */
	--np-font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--np-text: 1rem;
	--np-text-s: 0.875rem;
	--np-text-xs: 0.8125rem;

	/* Shape */
	--np-radius-s: 4px;
	--np-radius-m: 6px;
	--np-shadow-pop: 0 12px 32px rgba(17, 17, 17, 0.14);
	--np-border: 1px solid var(--np-grey-200);

	/* Layout */
	--np-container: 1280px;
	--np-gutter: 20px;
	--np-header-h: 72px;
}

/* -------------------------------------------------------------------------
   3. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The hidden attribute must always win.
 *
 * Components like the Ask a Question modal, the mini cart drawer, the filter
 * drawer, the mega menu and the search dropdown all set display (flex, grid
 * or block) in their own rules, which silently overrode the browser's
 * default `[hidden] { display: none }` and left them visible on page load.
 * This single rule makes the attribute authoritative everywhere.
 *
 * Animated components (mini cart, filter drawer, sales popup) remove the
 * attribute first and animate with an `is-open` / `is-visible` class on the
 * next frame, so transitions still run.
 */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--np-font);
	font-size: var(--np-text);
	line-height: 1.55;
	color: var(--np-ink);
	background: var(--np-white);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	line-height: 1.2;
	font-weight: 700;
	color: var(--np-black);
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

svg.np-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

:focus-visible {
	outline: 2px solid var(--np-black);
	outline-offset: 2px;
	border-radius: 2px;
}

.np-utility :focus-visible,
.np-nav :focus-visible,
.np-footer :focus-visible {
	outline-color: var(--np-yellow);
}

/* Screen reader + skip link */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 10000;
	position: fixed;
	top: 10px;
	left: 10px;
	background: var(--np-yellow);
	color: var(--np-black);
	padding: 12px 18px;
	font-weight: 600;
	border-radius: var(--np-radius-s);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */
.np-container {
	max-width: var(--np-container);
	margin-inline: auto;
	padding-inline: var(--np-gutter);
}

.np-section {
	padding-block: 44px;
}

.np-page {
	padding-block: 24px 56px;
}

.np-page-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0.75em;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.np-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: var(--np-text-s);
	font-weight: 700;
	line-height: 1.2;
	border-radius: var(--np-radius-s);
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.np-btn--yellow {
	background: var(--np-yellow);
	color: var(--np-black);
}

.np-btn--yellow:hover {
	background: var(--np-yellow-dark);
}

.np-btn--black {
	background: var(--np-black);
	color: var(--np-white);
}

.np-btn--black:hover {
	background: #2b2b2b;
}

.np-btn--ghost {
	background: transparent;
	color: var(--np-black);
	border-color: var(--np-grey-300);
}

.np-btn--ghost:hover {
	border-color: var(--np-black);
}

/* -------------------------------------------------------------------------
   6. Utility bar
   ------------------------------------------------------------------------- */
.np-utility {
	background: var(--np-black);
	color: var(--np-white);
	font-size: var(--np-text-xs);
}

.np-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
}

.np-utility__messages {
	display: flex;
	gap: 26px;
	list-style: none;
}

.np-utility__item {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.np-utility__item .np-icon {
	color: var(--np-yellow);
}

.np-utility__phone {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--np-white);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.np-utility__phone .np-icon {
	color: var(--np-yellow);
}

.np-utility__phone:hover span {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   7. Main header
   ------------------------------------------------------------------------- */
.np-header {
	position: relative;
	z-index: 900;
	background: var(--np-white);
}

.np-header__main {
	border-bottom: var(--np-border);
}

.np-header__main-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--np-header-h);
	padding-block: 10px;
}

/* Logo */
.np-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.np-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--np-yellow);
	color: var(--np-black);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	border-radius: var(--np-radius-s);
}

.np-logo__text {
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--np-black);
	letter-spacing: -0.02em;
}

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

/* Search */
.np-header__search {
	flex: 1 1 auto;
	max-width: 640px;
	margin-inline: auto;
}

.np-search {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--np-white);
	border: 2px solid var(--np-black);
	border-radius: var(--np-radius-s);
	overflow: visible;
}

.np-search__cat-wrap {
	position: relative;
	display: none;
	align-items: center;
	border-right: var(--np-border);
	background: var(--np-grey-50);
	border-radius: var(--np-radius-s) 0 0 var(--np-radius-s);
}

.np-search__cat {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--np-text-s);
	color: var(--np-ink);
	padding: 0 30px 0 14px;
	height: 100%;
	max-width: 170px;
	cursor: pointer;
}

.np-search__cat-arrow {
	position: absolute;
	right: 10px;
	pointer-events: none;
	color: var(--np-grey-600);
}

.np-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	font: inherit;
	font-size: var(--np-text-s);
	padding: 12px 14px;
	background: transparent;
}

.np-search__input:focus {
	outline: none;
}

.np-search:focus-within {
	border-color: var(--np-yellow-dark);
	box-shadow: 0 0 0 3px var(--np-yellow-soft);
}

.np-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: var(--np-yellow);
	color: var(--np-black);
	font-weight: 700;
	font-size: var(--np-text-s);
	padding: 0 18px;
	transition: background-color 0.15s ease;
}

.np-search__submit:hover {
	background: var(--np-yellow-dark);
}

.np-search__submit-text {
	display: none;
}

/* Live results dropdown (populated by search.js in a later stage) */
.np-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: -2px;
	right: -2px;
	background: var(--np-white);
	border: var(--np-border);
	border-radius: var(--np-radius-m);
	box-shadow: var(--np-shadow-pop);
	max-height: 420px;
	overflow-y: auto;
	z-index: 950;
}

/* Header actions */
.np-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

.np-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--np-ink);
}

.np-action:hover .np-action__label {
	text-decoration: underline;
}

.np-action__icon {
	position: relative;
	display: inline-flex;
}

.np-action__meta {
	display: none;
	flex-direction: column;
	line-height: 1.25;
}

.np-action__label {
	font-size: var(--np-text-xs);
	color: var(--np-grey-600);
}

.np-action__value,
.np-cart-total {
	font-size: var(--np-text-s);
	font-weight: 700;
	color: var(--np-black);
}

.np-cart-count,
.np-wishlist-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--np-yellow);
	color: var(--np-black);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
}

.np-wishlist-count[data-np-wishlist-count="0"],
.np-wishlist-count:empty {
	display: none;
}

/* Mobile menu toggle */
.np-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--np-black);
	border-radius: var(--np-radius-s);
}

/* Mobile search row */
.np-header__mobile-search {
	padding-block: 0 12px;
}

/* -------------------------------------------------------------------------
   8. Navigation row
   ------------------------------------------------------------------------- */
.np-nav {
	display: none;
	background: var(--np-black);
	color: var(--np-white);
}

.np-nav__inner {
	display: flex;
	align-items: stretch;
	gap: 6px;
	min-height: 48px;
}

.np-nav__catalog {
	position: relative;
	display: flex;
	align-items: stretch;
}

.np-nav__catalog-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	background: var(--np-yellow);
	color: var(--np-black);
	font-weight: 700;
	font-size: var(--np-text-s);
	padding: 0 18px;
	transition: background-color 0.15s ease;
}

.np-nav__catalog-btn:hover,
.np-nav__catalog-btn[aria-expanded="true"] {
	background: var(--np-yellow-dark);
}

.np-nav__catalog-arrow {
	transition: transform 0.15s ease;
}

.np-nav__catalog-btn[aria-expanded="true"] .np-nav__catalog-arrow {
	transform: rotate(180deg);
}

.np-nav__menu {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	flex-wrap: wrap;
}

.np-nav__menu > li {
	position: relative;
	display: flex;
}

.np-nav__menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: 0 15px;
	color: var(--np-white);
	text-decoration: none;
	font-size: var(--np-text-s);
	font-weight: 600;
	position: relative;
}

.np-nav__menu > li > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 8px;
	height: 3px;
	background: var(--np-yellow);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.15s ease;
}

.np-nav__menu > li > a:hover::after,
.np-nav__menu > li.current-menu-item > a::after,
.np-nav__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Simple dropdown for second-level menu items */
.np-nav__menu > li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--np-white);
	border: var(--np-border);
	border-radius: 0 0 var(--np-radius-m) var(--np-radius-m);
	box-shadow: var(--np-shadow-pop);
	list-style: none;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 940;
}

.np-nav__menu > li:hover > ul,
.np-nav__menu > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.np-nav__menu > li > ul a {
	display: block;
	padding: 9px 16px;
	color: var(--np-ink);
	text-decoration: none;
	font-size: var(--np-text-s);
}

.np-nav__menu > li > ul a:hover {
	background: var(--np-yellow-soft);
}

.np-nav__aside {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 0 4px;
	color: var(--np-yellow);
	text-decoration: none;
	font-size: var(--np-text-s);
	font-weight: 700;
	white-space: nowrap;
}

.np-nav__aside:hover span {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   9. Mega menu
   ------------------------------------------------------------------------- */
.np-mega {
	position: absolute;
	top: 100%;
	left: 0;
	width: min(920px, calc(100vw - 2 * var(--np-gutter)));
	background: var(--np-white);
	color: var(--np-ink);
	border: var(--np-border);
	border-top: 3px solid var(--np-yellow);
	border-radius: 0 0 var(--np-radius-m) var(--np-radius-m);
	box-shadow: var(--np-shadow-pop);
	z-index: 930;
}

.np-mega__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 22px 26px;
	padding: 24px;
}

.np-mega__parent {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--np-black);
	text-decoration: none;
	margin-bottom: 8px;
}

.np-mega__parent:hover span {
	text-decoration: underline;
	text-decoration-color: var(--np-yellow);
	text-decoration-thickness: 2px;
}

.np-mega__thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: var(--np-radius-s);
	border: var(--np-border);
}

.np-mega__children {
	list-style: none;
	display: grid;
	gap: 4px;
}

.np-mega__children a {
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
	text-decoration: none;
	display: inline-block;
	padding-block: 2px;
}

.np-mega__children a:hover {
	color: var(--np-black);
	text-decoration: underline;
}

.np-mega__footer {
	border-top: var(--np-border);
	padding: 14px 24px;
	display: flex;
	justify-content: flex-end;
	background: var(--np-grey-50);
	border-radius: 0 0 var(--np-radius-m) var(--np-radius-m);
}

/* -------------------------------------------------------------------------
   10. Mobile drawer
   ------------------------------------------------------------------------- */
.np-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	z-index: 990;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.np-drawer-overlay.is-open {
	opacity: 1;
}

.np-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(360px, 88vw);
	background: var(--np-white);
	z-index: 995;
	transform: translateX(-102%);
	transition: transform 0.22s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.np-drawer.is-open {
	transform: translateX(0);
}

.np-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--np-black);
	color: var(--np-white);
	padding: 14px 18px;
}

.np-drawer__title {
	font-weight: 700;
}

.np-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--np-white);
}

.np-drawer__body {
	overflow-y: auto;
	flex: 1;
	padding: 8px 0 24px;
}

.np-drawer__section {
	border-bottom: var(--np-border);
	padding: 10px 18px;
}

.np-drawer__accordion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	padding: 10px 0;
	color: var(--np-black);
}

.np-drawer__accordion .np-icon {
	transition: transform 0.15s ease;
}

.np-drawer__accordion[aria-expanded="true"] .np-icon {
	transform: rotate(180deg);
}

.np-drawer__accordion-panel ul,
.np-drawer__menu {
	list-style: none;
}

.np-drawer__accordion-panel a,
.np-drawer__menu a {
	display: block;
	padding: 10px 0;
	color: var(--np-ink);
	text-decoration: none;
	font-size: var(--np-text-s);
	border-bottom: 1px solid var(--np-grey-100);
}

.np-drawer__accordion-panel li:last-child > a,
.np-drawer__menu li:last-child > a {
	border-bottom: 0;
}

.np-drawer__accordion-panel .children a {
	padding-left: 16px;
	color: var(--np-grey-600);
}

.np-drawer__shortcuts a,
.np-drawer__contact a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: var(--np-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--np-text-s);
}

.np-drawer__shortcuts .np-icon,
.np-drawer__contact .np-icon {
	color: var(--np-yellow-dark);
}

body.np-drawer-locked {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. Breadcrumbs
   ------------------------------------------------------------------------- */
.np-breadcrumbs {
	font-size: var(--np-text-xs);
	color: var(--np-grey-600);
	margin-bottom: 18px;
}

.np-breadcrumbs a {
	color: var(--np-grey-600);
	text-decoration: none;
}

.np-breadcrumbs a:hover {
	color: var(--np-black);
	text-decoration: underline;
}

.np-breadcrumbs__sep {
	margin-inline: 7px;
	color: var(--np-grey-300);
}

/* -------------------------------------------------------------------------
   12. Blog
   ------------------------------------------------------------------------- */
.np-blog-layout {
	display: grid;
	gap: 40px;
}

.np-post-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.np-post-card {
	border: var(--np-border);
	border-radius: var(--np-radius-m);
	overflow: hidden;
	background: var(--np-white);
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease;
}

.np-post-card:hover {
	border-color: var(--np-grey-400);
}

.np-post-card__media img {
	width: 100%;
	aspect-ratio: 19 / 14;
	object-fit: cover;
}

.np-post-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.np-post-card__meta {
	font-size: var(--np-text-xs);
	color: var(--np-grey-600);
	margin: 0;
}

.np-post-card__title {
	font-size: 1.05rem;
	margin: 0;
}

.np-post-card__title a {
	text-decoration: none;
}

.np-post-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--np-yellow);
	text-decoration-thickness: 2px;
}

.np-post-card__excerpt {
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
	margin: 0;
}

.np-post-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--np-text-s);
	font-weight: 700;
	text-decoration: none;
	color: var(--np-black);
	padding-top: 8px;
}

.np-post-card__link:hover {
	text-decoration: underline;
}

.np-entry__meta {
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
}

.np-entry__cats::before {
	content: "\00b7";
	margin-inline: 8px;
}

.np-entry__thumb {
	margin: 0 0 24px;
}

.np-entry__thumb img {
	border-radius: var(--np-radius-m);
}

.np-prose {
	max-width: 760px;
}

.np-prose h2 {
	font-size: 1.4rem;
	margin-top: 1.6em;
}

.np-prose h3 {
	font-size: 1.15rem;
	margin-top: 1.4em;
}

.np-prose ul,
.np-prose ol {
	padding-left: 1.3em;
	margin-bottom: 1em;
}

.np-prose a {
	text-decoration-color: var(--np-yellow-dark);
	text-decoration-thickness: 2px;
}

.np-prose img {
	border-radius: var(--np-radius-m);
}

.np-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--np-yellow);
	color: var(--np-grey-600);
}

.np-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-block: 32px;
	font-weight: 600;
	font-size: var(--np-text-s);
}

.np-entry__tags a {
	display: inline-block;
	background: var(--np-grey-50);
	border: var(--np-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: var(--np-text-xs);
	text-decoration: none;
	margin: 0 6px 6px 0;
}

/* Pagination */
.pagination,
.woocommerce-pagination {
	margin-top: 32px;
}

.pagination .nav-links,
.page-numbers {
	display: flex;
	gap: 6px;
	list-style: none;
	flex-wrap: wrap;
}

.page-numbers li {
	display: inline-flex;
}

a.page-numbers,
span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	text-decoration: none;
	font-size: var(--np-text-s);
	font-weight: 600;
	color: var(--np-ink);
	background: var(--np-white);
}

a.page-numbers:hover {
	border-color: var(--np-black);
}

span.page-numbers.current {
	background: var(--np-black);
	color: var(--np-white);
	border-color: var(--np-black);
}

/* -------------------------------------------------------------------------
   13. Empty states / 404
   ------------------------------------------------------------------------- */
.np-empty {
	max-width: 560px;
	margin-block: 40px;
	display: grid;
	gap: 18px;
	justify-items: start;
}

.np-404 {
	max-width: 640px;
	margin: 48px auto 72px;
	text-align: center;
	display: grid;
	gap: 16px;
	justify-items: center;
}

.np-404__code {
	font-size: clamp(3.5rem, 10vw, 5.5rem);
	font-weight: 800;
	color: var(--np-yellow);
	line-height: 1;
	margin: 0;
	text-shadow: 3px 3px 0 var(--np-black);
}

.np-404__search {
	width: 100%;
	max-width: 480px;
}

.np-404__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.np-404__cats h2 {
	font-size: 1rem;
	margin-bottom: 10px;
}

.np-404__cats ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.np-404__cats a {
	display: inline-block;
	background: var(--np-grey-50);
	border: var(--np-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: var(--np-text-s);
	text-decoration: none;
}

.np-404__cats a:hover {
	border-color: var(--np-black);
}

/* -------------------------------------------------------------------------
   14. Widgets
   ------------------------------------------------------------------------- */
.np-widget {
	margin-bottom: 28px;
}

.np-widget__title {
	font-size: 1rem;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--np-yellow);
	display: inline-block;
}

.np-widget ul {
	list-style: none;
}

.np-widget li {
	padding-block: 5px;
}

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */
.np-footer {
	background: var(--np-ink);
	color: var(--np-grey-300);
	margin-top: 56px;
	font-size: var(--np-text-s);
}

.np-footer a {
	color: var(--np-grey-300);
}

.np-footer a:hover {
	color: var(--np-white);
}

.np-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-block: 48px 36px;
}

.np-footer__heading {
	color: var(--np-white);
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
}

.np-footer__heading::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--np-yellow);
	margin-top: 8px;
	border-radius: 2px;
}

.np-footer__about .np-logo__text {
	color: var(--np-white);
}

.np-footer__about p {
	margin-top: 14px;
	max-width: 34ch;
}

.np-footer__menu {
	list-style: none;
	display: grid;
	gap: 4px;
}

.np-footer__menu a {
	text-decoration: none;
	display: inline-block;
	padding-block: 4px;
}

.np-footer__menu a:hover {
	text-decoration: underline;
}

.np-footer__contact {
	list-style: none;
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.np-footer__contact li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.np-footer__contact .np-icon {
	color: var(--np-yellow);
}

.np-footer__contact a {
	text-decoration: none;
}

.np-footer__hint {
	font-size: var(--np-text-xs);
	color: var(--np-grey-400);
}

.np-social {
	list-style: none;
	display: flex;
	gap: 14px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.np-social a {
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid var(--np-yellow);
	padding-bottom: 1px;
}

.np-footer__newsletter .np-btn {
	margin-top: 4px;
}

.np-footer__bar {
	border-top: 1px solid #2c2c2c;
}

.np-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 18px;
	flex-wrap: wrap;
	font-size: var(--np-text-xs);
}

.np-footer__copy {
	margin: 0;
}

.np-footer__secure {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.np-footer__secure .np-icon {
	color: var(--np-yellow);
}

/* -------------------------------------------------------------------------
   16. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.np-utility__item {
		display: none;
	}

	.np-utility__item.is-first {
		display: flex;
	}

	.np-header__search {
		display: none;
	}

	.np-header__main-inner {
		gap: 12px;
		justify-content: space-between;
	}
}

@media (min-width: 768px) {
	.np-header__mobile-search {
		display: none;
	}

	.np-menu-toggle {
		display: none;
	}

	.np-nav {
		display: block;
	}

	.np-search__cat-wrap {
		display: flex;
	}

	.np-search__submit-text {
		display: inline;
	}

	.np-action__meta {
		display: flex;
	}

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

@media (min-width: 1024px) {
	.np-blog-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.np-blog-layout__main {
		min-width: 0;
	}

	.np-footer__grid {
		grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr;
	}
}

@media (max-width: 1023.98px) {
	.np-utility__phone span {
		display: none;
	}
}

/* =========================================================================
   Stage 2+: Homepage
   ========================================================================= */

/* Section header */
.np-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	border-bottom: 3px solid var(--np-black);
	padding-bottom: 10px;
}

.np-section__title {
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

.np-section__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--np-text-s);
	font-weight: 700;
	color: var(--np-black);
	white-space: nowrap;
}

.np-section__more:hover {
	color: var(--np-yellow-dark);
}

/* ------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */
.np-hero {
	display: grid;
	grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
	gap: 16px;
	padding-top: 18px;
}

.np-hero--full {
	grid-template-columns: minmax(0, 1fr);
}

.np-hero__slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--np-radius-s);
	background: var(--np-black);
	min-height: 340px;
}

.np-hero__track {
	display: flex;
	height: 100%;
	transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.np-hero__track {
		transition: none;
	}
}

.np-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-height: 340px;
	display: flex;
	align-items: center;
}

.np-hero__slide--brand {
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.22), transparent 42%),
		linear-gradient(112deg, var(--np-yellow) 0%, var(--np-yellow) 58%, var(--np-yellow-dark) 100%);
}

.np-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 17, 17, 0.66) 0%, rgba(17, 17, 17, 0.28) 55%, rgba(17, 17, 17, 0.05) 100%);
}

.np-hero__content {
	position: relative;
	z-index: 2;
	padding: clamp(26px, 5vw, 54px);
	max-width: 560px;
}

.np-hero__eyebrow {
	display: inline-block;
	background: var(--np-black);
	color: var(--np-yellow);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 10px;
	margin: 0 0 14px;
}

.np-hero__heading {
	font-size: clamp(1.7rem, 4.2vw, 2.7rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--np-black);
}

.np-hero__slide:not(.np-hero__slide--brand) .np-hero__heading,
.np-hero__slide:not(.np-hero__slide--brand) .np-hero__text {
	color: var(--np-white);
}

.np-hero__text {
	font-size: clamp(0.95rem, 1.6vw, 1.06rem);
	margin: 0 0 22px;
	max-width: 46ch;
	color: var(--np-ink);
}

.np-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.np-btn--white {
	background: var(--np-white);
	color: var(--np-black);
	border: 2px solid var(--np-black);
}

.np-btn--white:hover {
	background: var(--np-grey-100);
}

.np-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--np-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.18);
}

.np-hero__arrow:hover {
	background: var(--np-yellow);
}

.np-hero__arrow--prev {
	left: 14px;
}

.np-hero__arrow--next {
	right: 14px;
}

.np-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 3;
}

.np-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--np-black);
	background: var(--np-white);
	padding: 0;
	cursor: pointer;
}

.np-hero__dot.is-active {
	background: var(--np-yellow);
}

.np-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
}

.np-hero-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 160px;
	border-radius: var(--np-radius-s);
	overflow: hidden;
	background: var(--np-grey-100);
	color: var(--np-black);
}

.np-hero-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.np-hero-card:hover .np-hero-card__img {
	transform: scale(1.04);
}

.np-hero-card__content {
	position: relative;
	z-index: 2;
	padding: 18px;
	display: grid;
	gap: 4px;
}

.np-hero-card__eyebrow {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-yellow);
}

.np-hero-card:not(:has(.np-hero-card__img)) .np-hero-card__eyebrow {
	color: var(--np-yellow-dark);
}

.np-hero-card__title {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.15;
}

.np-hero-card:has(.np-hero-card__img) .np-hero-card__title,
.np-hero-card:has(.np-hero-card__img) .np-hero-card__text {
	color: var(--np-white);
}

.np-hero-card__text {
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
}

/* ------------------------------------------------------------------------
   Shop by Category
   ------------------------------------------------------------------------ */
.np-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.np-cat-card {
	display: block;
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	background: var(--np-white);
	overflow: hidden;
	color: var(--np-black);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.np-cat-card:hover {
	border-color: var(--np-black);
	box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
}

.np-cat-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--np-grey-50);
}

.np-cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-cat-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--np-grey-400);
}

.np-cat-card__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	font-weight: 700;
	font-size: var(--np-text-s);
	border-top: var(--np-border);
}

/* ------------------------------------------------------------------------
   Promotional cards
   ------------------------------------------------------------------------ */
.np-promo-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.np-promo-grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.np-promo-card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 190px;
	border-radius: var(--np-radius-s);
	overflow: hidden;
	background: var(--np-black);
	color: var(--np-white);
}

.np-promo-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.np-promo-card:hover .np-promo-card__img {
	transform: scale(1.03);
}

.np-promo-card__content {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 6px;
	padding: 24px 26px;
	max-width: 420px;
}

.np-promo-card__eyebrow {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-yellow);
}

.np-promo-card__title {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 800;
	line-height: 1.15;
}

.np-promo-card__text {
	font-size: var(--np-text-s);
	color: var(--np-grey-200);
}

.np-promo-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-weight: 800;
	font-size: var(--np-text-s);
	color: var(--np-yellow);
}

/* ------------------------------------------------------------------------
   Eco section
   ------------------------------------------------------------------------ */
.np-eco {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 24px;
	background: var(--np-green-soft);
	border-radius: var(--np-radius-s);
	padding: clamp(20px, 3vw, 34px);
}

.np-eco__intro {
	display: grid;
	gap: 12px;
	align-content: start;
}

.np-eco__intro .np-section__title {
	margin: 0;
}

.np-eco__intro p {
	margin: 0;
	color: var(--np-grey-600);
}

.np-eco__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--np-green);
	color: var(--np-white);
}

.np-eco__intro .np-btn {
	justify-self: start;
}

/* ------------------------------------------------------------------------
   Why choose us
   ------------------------------------------------------------------------ */
.np-why-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.np-why-card {
	border: var(--np-border);
	border-top: 3px solid var(--np-yellow);
	border-radius: var(--np-radius-s);
	background: var(--np-white);
	padding: 20px 18px;
}

.np-why-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--np-yellow-soft);
	color: var(--np-black);
	margin-bottom: 12px;
}

.np-why-card__title {
	font-size: 1rem;
	font-weight: 800;
	margin: 0 0 6px;
}

.np-why-card__text {
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
	margin: 0;
}

/* ------------------------------------------------------------------------
   Accordion (FAQs)
   ------------------------------------------------------------------------ */
.np-accordion {
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	background: var(--np-white);
	overflow: hidden;
}

.np-accordion__item + .np-accordion__item {
	border-top: var(--np-border);
}

.np-accordion__heading {
	margin: 0;
	font-size: inherit;
}

.np-accordion__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	text-align: left;
	color: var(--np-black);
	cursor: pointer;
}

.np-accordion__btn:hover {
	background: var(--np-grey-50);
}

.np-accordion__btn .np-icon {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.np-accordion__btn[aria-expanded="true"] .np-icon {
	transform: rotate(180deg);
}

.np-accordion__panel {
	padding: 0 18px 16px;
}

.np-home-faq__inner {
	max-width: 900px;
}

/* ------------------------------------------------------------------------
   Prose / SEO content
   ------------------------------------------------------------------------ */
.np-prose {
	font-size: var(--np-text-s);
	line-height: 1.7;
	color: var(--np-ink);
}

.np-prose h2,
.np-prose h3 {
	letter-spacing: -0.01em;
	margin: 1.4em 0 0.5em;
}

.np-prose h2:first-child,
.np-prose h3:first-child {
	margin-top: 0;
}

.np-prose p {
	margin: 0 0 1em;
}

.np-prose ul,
.np-prose ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.np-prose a {
	color: var(--np-black);
	text-decoration: underline;
	text-decoration-color: var(--np-yellow-dark);
	text-underline-offset: 2px;
}

.np-home-seo__box {
	background: var(--np-grey-50);
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	padding: clamp(20px, 3vw, 32px);
	columns: 2;
	column-gap: 40px;
}

.np-home-seo__box h2,
.np-home-seo__box h3 {
	column-span: all;
}

/* Empty state */
.np-empty {
	text-align: center;
	padding: 48px 20px;
	display: grid;
	gap: 16px;
	justify-items: center;
}

/* ------------------------------------------------------------------------
   Homepage responsive
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.np-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.np-hero__side {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.np-cat-grid,
	.np-why-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.np-eco {
		grid-template-columns: minmax(0, 1fr);
	}

	.np-home-seo__box {
		columns: 1;
	}
}

@media (max-width: 767px) {
	.np-cat-grid,
	.np-why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.np-promo-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.np-hero__slide {
		min-height: 300px;
	}
}

@media (max-width: 429px) {
	.np-hero__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.np-hero__arrow {
		width: 36px;
		height: 36px;
	}
}

/* =========================================================================
   Production corrections: navigation bar
   =========================================================================
   The bar was 48px with 15px link padding and a wrapping menu, so longer
   category names such as "Burger Boxes" broke onto a second row and the bar
   read as a developer menu rather than retail navigation. The bar is now
   56px, links never wrap internally, the row never wraps, and spacing steps
   down at narrower widths before the mobile menu takes over at 1023px.
   ========================================================================= */
.np-nav__inner {
	min-height: 56px;
	gap: 4px;
	flex-wrap: nowrap;
}

.np-nav__catalog-btn {
	padding: 0 20px;
	white-space: nowrap;
}

.np-nav__menu {
	/* One line only: no second row. */
	flex-wrap: nowrap;
	min-width: 0;
	overflow: hidden;
	padding: 0;
}

.np-nav__menu > li > a {
	padding: 0 17px;
	white-space: nowrap;
	letter-spacing: 0.005em;
}

.np-nav__menu > li > a::after {
	left: 17px;
	right: 17px;
}

/* Sale link keeps its own breathing room at the end of the bar. */
.np-nav__aside {
	white-space: nowrap;
}

/* Step spacing down before switching to the mobile menu, so a long menu
   stays on one line rather than being clipped. */
@media (max-width: 1439px) {
	.np-nav__menu > li > a {
		padding: 0 13px;
	}

	.np-nav__menu > li > a::after {
		left: 13px;
		right: 13px;
	}

	.np-nav__catalog-btn {
		padding: 0 16px;
	}
}

@media (max-width: 1279px) {
	.np-nav__inner {
		min-height: 54px;
	}

	.np-nav__menu > li > a {
		padding: 0 10px;
		font-size: 0.86rem;
	}

	.np-nav__menu > li > a::after {
		left: 10px;
		right: 10px;
	}

	.np-nav__catalog-btn {
		padding: 0 13px;
		font-size: 0.86rem;
	}
}

/* Dropdown children must still wrap normally. */
.np-nav__menu > li > ul a {
	white-space: normal;
}

/* =========================================================================
   Wide ecommerce container
   =========================================================================
   The 1280px site container left large empty margins on the product and
   shop pages at 1440px and above. Commerce pages now use a wider retail
   container while editorial pages (blog, articles) keep the narrower,
   more readable measure. Side padding is unchanged, so nothing runs
   edge to edge.
   ========================================================================= */
:root {
	--np-container-wide: 1440px;
}

.single-product .np-container,
.woocommerce-shop .np-container,
.tax-product_cat .np-container,
.tax-product_tag .np-container,
.woocommerce-cart .np-container,
.woocommerce-checkout .np-container,
.woocommerce-account .np-container,
.np-wc-wrap {
	max-width: var(--np-container-wide);
}

/* Header, navigation and footer keep the standard measure so the site
   still reads as one consistent layout; only the content area widens. */
.np-header .np-container,
.np-nav__inner,
.np-utility .np-container,
.np-footer .np-container {
	max-width: var(--np-container-wide);
}

@media (min-width: 1024px) {
	.np-wc-wrap {
		padding-inline: clamp(24px, 2.2vw, 32px);
	}
}

/* =========================================================================
   Commerce pages must not use the article reading width
   =========================================================================
   Cart, Checkout and My Account are ordinary WordPress pages, so they render
   through page.php inside `.np-entry__content.np-prose`, which is capped at
   760px for readable body copy. That cap, not WooCommerce, was squeezing the
   Cart and Checkout blocks into a narrow column with large empty margins.

   Transactional pages are excluded from the reading measure and use the wide
   ecommerce container instead. Editorial pages keep the 760px measure.
   ========================================================================= */
.woocommerce-cart .np-entry__content,
.woocommerce-cart .np-prose,
.woocommerce-checkout .np-entry__content,
.woocommerce-checkout .np-prose,
.woocommerce-account .np-entry__content,
.woocommerce-account .np-prose,
.woocommerce-cart .np-page,
.woocommerce-checkout .np-page,
.woocommerce-account .np-page {
	max-width: none;
	width: 100%;
}

/* The page wrapper on those templates uses the wide container measure. */
.woocommerce-cart .np-container.np-page,
.woocommerce-checkout .np-container.np-page,
.woocommerce-account .np-container.np-page {
	max-width: var(--np-container-wide);
	padding-inline: clamp(20px, 2.2vw, 32px);
}

/* WooCommerce block wrappers inherit the full width of the page column. */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}