/* ==========================================================================
   The clean shop style (shop_style = clean)

   Products first: a compact head, product types as one row of chips, the
   other filters in a drawer, a full-width grid of quiet cards on one soft
   ground. Every rule is scoped to .cod-shop--clean or .cod-card--clean, so
   the classic shop is untouched.
   ========================================================================== */

:root {
	--cod-clean-ground: #f5f5f7;
	--cod-clean-radius: 18px;
}

html.cod-no-scroll { overflow: hidden; }

/* --- Head ---------------------------------------------------------------- */

.cod-shop--clean .cod-shop__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 6px 16px;
	margin-block: clamp(8px, 2vw, 20px) 18px;
}

.cod-shop--clean .cod-shop__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	letter-spacing: -.025em;
}

.cod-shop--clean .cod-shop__count {
	grid-column: 1;
	margin: 0;
	color: var(--cod-muted);
	font-size: .9375rem;
}

.cod-shop--clean .cod-shop__tools {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cod-shop--clean .cod-shop__head > :not(.cod-shop__title):not(.cod-shop__count):not(.cod-shop__tools) { grid-column: 1 / -1; }

.cod-shop__filter-open,
.cod-shop--clean .woocommerce-ordering select {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--cod-line);
	border-radius: 999px;
	background: var(--cod-surface);
	color: var(--cod-ink);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}

.cod-shop--clean .woocommerce-ordering { margin: 0; }
.cod-shop--clean .woocommerce-ordering select { padding-right: 36px; }
.cod-shop__filter-open:hover,
.cod-shop--clean .woocommerce-ordering select:hover { border-color: var(--cod-ink-soft); }

@media (max-width: 767px) {
	.cod-shop--clean .cod-shop__head { grid-template-columns: 1fr; }
	.cod-shop--clean .cod-shop__tools { grid-column: 1; grid-row: auto; }
	.cod-shop--clean .cod-shop__tools > * { flex: 1 1 0; }
	.cod-shop__filter-open { justify-content: center; }
	.cod-shop--clean .woocommerce-ordering select { width: 100%; }
}

/* --- Product types --------------------------------------------------------- */

.cod-typebar {
	display: flex;
	gap: 8px;
	margin: 0 0 clamp(20px, 3vw, 32px);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cod-typebar::-webkit-scrollbar { display: none; }

.cod-typebar__chip {
	flex: 0 0 auto;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--cod-clean-ground);
	color: var(--cod-ink);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.cod-typebar__chip:hover { background: #e8e8ed; text-decoration: none; }

.cod-typebar__chip.is-active {
	background: var(--cod-navy);
	color: #fff;
}

.cod-typebar__count { font-weight: 500; opacity: .7; }

/*
 * A long row (a category's eleven brands) was clipped at the right edge with
 * nothing to say there was more (2026-10-27). From tablet up it wraps; on a
 * phone it stays one swipeable line, faded at the right while more is off
 * screen (theme.js sets .has-more and scrolls the active chip into view).
 */
.cod-typebar { position: relative; }

@media (min-width: 769px) {
	.cod-typebar {
		flex-wrap: wrap;
		overflow: visible;
	}
}

@media (max-width: 768px) {
	.cod-typebar.has-more {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
}

/* --- Filters drawer ------------------------------------------------------- */

.cod-shop__filters--drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(var(--cod-scrim-rgb, 2, 18, 38), .32);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.cod-shop__filters--drawer.is-open { opacity: 1; pointer-events: auto; }

.cod-shop__filters--drawer .cod-shop__filters-inner,
.cod-shop__filters--drawer .cod-shop__filters-inner.is-open {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 92vw);
	padding: 0 24px 24px;
	background: var(--cod-surface);
	box-shadow: -18px 0 40px rgba(2, 18, 38, .18);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .25s ease;
}

.cod-shop__filters--drawer.is-open .cod-shop__filters-inner { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.cod-shop__filters--drawer,
	.cod-shop__filters--drawer .cod-shop__filters-inner { transition: none; }
}

.cod-drawer__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -24px 8px;
	padding: 18px 24px 12px;
	background: var(--cod-surface);
}

.cod-drawer__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--cod-ink); }

.cod-drawer__close {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: var(--cod-clean-ground);
	color: var(--cod-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cod-drawer__done {
	position: sticky;
	bottom: 0;
	margin-top: auto;
	box-shadow: 0 -12px 16px var(--cod-surface);
}

.cod-shop__filters--drawer .cod-filter { padding-block: 14px; border-top: 1px solid var(--cod-line); }
.cod-shop__filters--drawer .cod-filter:first-of-type { border-top: 0; }

/* --- Grid ----------------------------------------------------------------- */

.cod-shop.cod-shop--clean .cod-shop__layout ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 40px) clamp(12px, 2vw, 24px);
}

@media (min-width: 768px) {
	.cod-shop.cod-shop--clean .cod-shop__layout ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.cod-shop.cod-shop--clean .cod-shop__layout ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- The card ------------------------------------------------------------- */

.woocommerce ul.products li.product.cod-card.cod-card--clean,
.cod-card.cod-card--clean {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.cod-card--clean .cod-card__media {
	position: relative;
	border-radius: var(--cod-clean-radius);
	background: var(--cod-clean-ground);
	overflow: hidden;
}

.cod-card--clean .cod-card__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8%;
	/* White packshots melt into the ground, so every photo sits on the same grey. */
	mix-blend-mode: multiply;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.cod-card--clean:hover .cod-card__media img,
.cod-card--clean:focus-within .cod-card__media img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
	.cod-card--clean .cod-card__media img { transition: none; }
	.cod-card--clean:hover .cod-card__media img { transform: none; }
}

.cod-card__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--cod-blue);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.cod-card--clean .cod-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 2px 0;
}

.cod-card--clean .cod-card__brand {
	margin: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cod-muted);
}

.cod-card--clean .cod-card__title {
	margin: 0;
	min-height: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.cod-card--clean .cod-card__link { color: var(--cod-ink); text-decoration: none; }
.cod-card--clean .cod-card__link:focus-visible { outline: none; }

/* The whole card is the link. */
.cod-card--clean .cod-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--cod-clean-radius);
}

.cod-card--clean .cod-card__link:focus-visible::after { box-shadow: 0 0 0 3px var(--cod-blue); }

.cod-card--clean .cod-card__meta {
	margin: 0;
	font-size: .875rem;
	color: var(--cod-muted);
}

.cod-card--clean .cod-card__price {
	margin: 4px 0 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--cod-ink);
}

.cod-card--clean .cod-card__price del { margin-right: 6px; color: var(--cod-muted); font-weight: 400; font-size: .9375rem; }
.cod-card--clean .cod-card__price ins { text-decoration: none; color: var(--cod-ink); }

.cod-card__swatches {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}

.cod-card__swatch {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--cod-clean-ground);
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(2, 18, 38, .08);
}

.cod-card__swatch-more {
	margin-left: 4px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--cod-muted);
}

/* --- Homepage: brands ------------------------------------------------------ */

.cod-brandrow__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-brandrow__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 0 22px;
	border-radius: 16px;
	background: var(--cod-clean-ground);
	text-decoration: none;
	transition: background-color .15s ease, transform .2s ease;
}

.cod-brandrow__item:hover { background: #ebebf0; text-decoration: none; transform: translateY(-2px); }

.cod-brandrow__logo {
	max-width: 100%;
	max-height: 30px;
	width: auto;
	height: auto;
	mix-blend-mode: multiply;
}

/* A brand without a logo, set like one: its name in heavy capitals. */
.cod-brandrow__name {
	color: var(--cod-navy);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
	.cod-brandrow__item { transition: none; }
	.cod-brandrow__item:hover { transform: none; }
}

/* --- Homepage: the slim hero under the banners ----------------------------- */

.cod-hero-slim { padding-block: clamp(16px, 2.5vw, 28px) 4px; }

.cod-hero-slim__inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 24px;
}

.cod-hero-slim__title {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--cod-ink);
}

.cod-hero-slim__link {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cod-blue);
	text-decoration: none;
	white-space: nowrap;
}

.cod-hero-slim__link:hover { text-decoration: underline; }

/* --- Homepage: product types ----------------------------------------------- */

.cod-typetiles__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) { .cod-typetiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cod-typetiles__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--cod-ink);
	text-decoration: none;
}

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

.cod-typetiles__media {
	display: block;
	margin-bottom: 10px;
	border-radius: var(--cod-clean-radius);
	background: var(--cod-clean-ground);
	overflow: hidden;
}

.cod-typetiles__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 10%;
	mix-blend-mode: multiply;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.cod-typetiles__item:hover .cod-typetiles__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.cod-typetiles__media img { transition: none; }
	.cod-typetiles__item:hover .cod-typetiles__media img { transform: none; }
}

.cod-typetiles__name { font-size: 1.0625rem; font-weight: 600; }
.cod-typetiles__count { font-size: .875rem; color: var(--cod-muted); }

/* --- Product page ----------------------------------------------------------- */

.cod-style-clean .cod-pdp__brand {
	margin: 0 0 4px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cod-muted);
}

.cod-style-clean.single-product .product_title {
	margin-bottom: 12px;
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
	letter-spacing: -.025em;
	line-height: 1.08;
}

.cod-pdp__variant {
	display: block;
	margin-top: 6px;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--cod-ink-soft);
}

.cod-style-clean.single-product div.product p.price { font-size: 1.5rem; font-weight: 600; color: var(--cod-ink); }

/* Flavour line in the buy box: "Sabor: Lemon & Lime   37 sabores". */
.cod-group-choices__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cod-group-choices__current { color: var(--cod-ink); font-weight: 600; }
.cod-group-choices__count { color: var(--cod-muted); font-weight: 500; font-size: .875rem; }

/* The flavour pictures under the photo: small squares, names on hover and in the buy box. */
.cod-style-clean .cod-group-gallery { margin-top: 4px; }
.cod-style-clean .cod-group-gallery .cod-group-choices__tiles {
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 8px;
}
.cod-style-clean .cod-group-gallery .cod-group-choices__tile {
	padding: 4px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	background: var(--cod-clean-ground);
}
.cod-style-clean .cod-group-gallery .cod-group-choices__tile:hover { border-color: var(--cod-line); }
.cod-style-clean .cod-group-gallery .cod-group-choices__tile.is-current { border-color: var(--cod-ink); box-shadow: none; }
.cod-style-clean .cod-group-gallery .cod-group-choices__img { max-width: none; mix-blend-mode: multiply; }
.cod-style-clean .cod-group-gallery .cod-group-choices__name,
.cod-style-clean .cod-group-gallery .cod-group-choices__out {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.cod-style-clean .cod-group-gallery .cod-group-choices__tile.is-out .cod-group-choices__img { opacity: .35; }

@media (max-width: 1023px) {
	.cod-style-clean .cod-group-gallery .cod-group-choices__tiles > li { flex: 0 0 60px; }
}

/* The buy row: a stepper and a full-width button. */
.cod-style-clean.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 18px 0 20px;
}
.cod-style-clean.single-product div.product form.cart .variations { flex: 1 0 100%; }
.cod-style-clean.single-product div.product form.cart .single_variation_wrap { flex: 1 0 100%; }
.cod-style-clean.single-product div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 10px; width: 100%; }
.cod-style-clean.single-product div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; }
.cod-style-clean.single-product div.product form.cart .reset_variations { display: inline-block; margin-top: 6px; font-size: .8125rem; }

.cod-style-clean .quantity.cod-qty {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 1px solid var(--cod-line);
	border-radius: 999px;
	background: var(--cod-surface);
	overflow: hidden;
}
.cod-style-clean .quantity.cod-qty input.qty {
	width: 44px;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	-moz-appearance: textfield;
}
.cod-style-clean .quantity.cod-qty input.qty::-webkit-inner-spin-button,
.cod-style-clean .quantity.cod-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cod-qty__btn {
	width: 44px;
	height: 52px;
	border: 0;
	background: transparent;
	color: var(--cod-ink);
	font-size: 1.25rem;
	cursor: pointer;
}
.cod-qty__btn:hover { background: var(--cod-clean-ground); }

.cod-style-clean.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 52px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
}

/* Delivery and the free-delivery threshold as two quiet lines, not a panel. */
.cod-style-clean .cod-product-assurance {
	margin: 0 0 16px;
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--cod-line);
	border-bottom: 1px solid var(--cod-line);
	border-radius: 0;
	background: none;
}
.cod-style-clean .cod-product-assurance__item { display: flex; gap: 8px; font-size: .9375rem; }
.cod-style-clean .cod-product-assurance__item + .cod-product-assurance__item { margin-top: 6px; }

/* The description, once. */
.cod-pdp-description {
	grid-column: 1 / -1;
	max-width: 760px;
	margin: clamp(24px, 4vw, 48px) 0 0;
}
.cod-pdp-description__title { margin: 0 0 12px; font-size: 1.5rem; letter-spacing: -.02em; }
.cod-pdp-description__body { color: var(--cod-ink-soft); line-height: 1.65; }
.cod-pdp-description__body h2,
.cod-pdp-description__body h3 { margin-top: 24px; font-size: 1.125rem; color: var(--cod-ink); }

/* Waiting for an option: the brand colour, faded -- not another colour. */
.cod-style-clean.single-product div.product form.cart .single_add_to_cart_button.disabled,
.cod-style-clean.single-product div.product form.cart .single_add_to_cart_button:disabled {
	background: var(--cod-blue);
	border-color: var(--cod-blue);
	color: #fff;
	opacity: .4;
}

/* The flavour list button in the buy box. */
.cod-group-choices__select { position: relative; margin-top: 8px; }
.cod-group-choices__select::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--cod-ink);
	border-bottom: 2px solid var(--cod-ink);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.cod-group-choices__flavour {
	width: 100%;
	height: 52px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--cod-line);
	border-radius: 14px;
	background: var(--cod-surface);
	color: var(--cod-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.cod-group-choices__flavour:hover { border-color: var(--cod-ink-soft); }
.cod-group-choices__flavour:focus-visible { outline: 2px solid var(--cod-blue); outline-offset: 2px; }

/* Rows in the choices block: the strength chips, then the flavour list, with air between. */
.cod-style-clean .cod-group-choices { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 18px; }
.cod-style-clean .cod-group-choices__list--axis { margin-bottom: 14px; }

/* --- Brand pages ------------------------------------------------------------ */

.cod-shop--clean .cod-brandhead__logo {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(320px, 100%);
	height: 110px;
	margin-bottom: 12px;
	padding: 0 32px;
	border-radius: var(--cod-clean-radius);
	background: var(--cod-clean-ground);
}
.cod-shop--clean .cod-brandhead__logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; mix-blend-mode: multiply; }
.cod-shop--clean .cod-shop__head:has(.cod-brandhead__logo) .cod-shop__tools { grid-row: 2 / span 2; }
@media (max-width: 767px) { .cod-shop--clean .cod-shop__head:has(.cod-brandhead__logo) .cod-shop__tools { grid-row: auto; } }

/* --- Navigation: "Por tipo" and "Marcas" as tiles ----------------------------- */

.cod-mega.cod-mega--tiles { width: min(780px, calc(100vw - 2 * var(--cod-gutter, 16px))); padding: 20px; }

.cod-megatiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-nav__list .cod-mega a.cod-megatiles__item,
.cod-megatiles__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	color: var(--cod-ink);
	text-decoration: none;
}

.cod-megatiles__media {
	display: block;
	margin-bottom: 8px;
	border-radius: 14px;
	background: var(--cod-clean-ground);
	overflow: hidden;
}

.cod-megatiles__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 10%;
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}

.cod-megatiles__item:hover .cod-megatiles__media img { transform: scale(1.05); }
.cod-megatiles__name { font-size: .9375rem; font-weight: 600; }
.cod-megatiles__count { font-size: .8125rem; color: var(--cod-muted); }

.cod-nav__list .cod-mega a.cod-megatiles__brand,
.cod-megatiles__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 16px;
	border-radius: 14px;
	background: var(--cod-clean-ground);
	text-decoration: none;
	transition: background-color .15s ease;
}

.cod-megatiles__brand:hover { background: #ebebf0; }
.cod-megatiles__brand img { max-width: 100%; max-height: 24px; width: auto; height: auto; mix-blend-mode: multiply; }
.cod-megatiles__brand span { color: var(--cod-navy); font-size: .9375rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
	.cod-megatiles__media img { transition: none; }
	.cod-megatiles__item:hover .cod-megatiles__media img { transform: none; }
}

/* In the phone menu the panels open in place: two columns. */
@media (max-width: 1023px) {
	.cod-mega.cod-mega--tiles { width: auto; padding: 12px 0; }
	.cod-megatiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* --- Shop "All" view, by brand ------------------------------------------------ */

.cod-brandsection { margin: 0 0 clamp(36px, 5vw, 56px); }

.cod-brandsection__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cod-line);
}

.cod-brandsection__brand { display: inline-flex; align-items: center; gap: 14px; color: var(--cod-ink); text-decoration: none; }
.cod-brandsection__brand:hover { text-decoration: none; }

.cod-brandsection__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	background: var(--cod-clean-ground);
}
.cod-brandsection__logo img { max-width: 100%; max-height: 18px; width: auto; height: auto; mix-blend-mode: multiply; }

.cod-brandsection__name { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.02em; }

.cod-brandsection__all { flex: 0 0 auto; font-size: .9375rem; font-weight: 600; color: var(--cod-blue); text-decoration: none; }
.cod-brandsection__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.cod-brandsection--more .cod-brandsection__name { margin-bottom: 16px; }
.cod-brandsection__list { margin: 0 0 24px; text-align: center; font-weight: 600; }

/* The sections' grids are the shop's grid. */
.cod-shop.cod-shop--clean .cod-brandsection ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 40px) clamp(12px, 2vw, 24px);
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) { .cod-shop.cod-shop--clean .cod-brandsection ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cod-shop.cod-shop--clean .cod-brandsection ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 767px) {
	.cod-brandsection__logo { display: none; }
	.cod-brandsection__all { font-size: .875rem; }
}
/* Inside a brand's section the brand is its heading: not on every card again. */
.cod-brandsection .cod-card--clean .cod-card__brand { display: none; }
/* Except in the one-product brands' shared row, where the card is the only place the brand is named ("Salts" alone says nothing). */
.cod-brandsection--singles .cod-card--clean .cod-card__brand { display: block; }

/* An offer says how much: the discount in the brand colour, the new price in it too. */
.cod-card__flag--sale { background: var(--cod-blue); color: #fff; }
.cod-card--clean .cod-card__price ins { color: var(--cod-blue); }

/* Sold out, said plainly: a dark label, the photo faded, the price no longer in the brand colour. */
.cod-card__flag--soldout { background: var(--cod-ink); color: #fff; }
.cod-card--soldout .cod-card__media img { opacity: .45; filter: grayscale(1); }
.cod-card--clean.cod-card--soldout .cod-card__price,
.cod-card--clean.cod-card--soldout .cod-card__price ins { color: var(--cod-muted); }

/* --- The box card in the clean style (Big Puff Club, owner 2026-10-28) ------ */

/* Two a row on a phone too, in every listing (shop, home, related): the box card's one-column phone layout is the classic style's. */
@media (max-width: 767px) {
	.cod-style-clean ul.products:has(> li.cod-shopcard) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
	.cod-style-clean .cod-shopcard__body { padding-top: 10px; }
	.cod-style-clean .cod-shopcard__title { font-size: 1rem; }
	.cod-style-clean .cod-shopcard__price { font-size: .95rem; }
	.cod-style-clean .cod-shopcard__benefit { font-size: .8125rem; }
}
.cod-style-clean .cod-shopcard__media { aspect-ratio: 1 / 1; border-radius: var(--cod-clean-radius); }

/* The volume price as a quiet line in the brand colour, not a box: it is the card's second price, not a button. Every listing. */
.cod-shopcard__volume { padding: 0; background: none; border-radius: 0; font-size: .8125rem; line-height: 1.35; }

/* No button to line up along the bottom, so no gap kept for one. */
.cod-shopcard__body > :nth-last-child(2) { margin-bottom: 0; }