/* ==========================================================================
   Refresh: calmer type, more space, fewer boxes
   ==========================================================================
 *
 * Loaded after every other stylesheet, theme and plugin, and only restyles:
 * no element is hidden, moved in the document or given new text, so titles,
 * headings, links, alt text and structured data are exactly what the
 * templates print. Colours stay the store's own tokens.
 *
 * The direction, in four rules:
 *   1. Type carries the hierarchy, not boxes: headings at 600 with tighter
 *      tracking, body copy at 400, no capitals for labels.
 *   2. Space separates sections; a border is used only where it does work
 *      (a form field, a table row, a card that is a link).
 *   3. One button shape everywhere, one card shape everywhere.
 *   4. Surfaces are white or the one soft tint, never both nested.
 */

:root {
	--cod-radius-sm: 10px;
	--cod-radius: 14px;
	--cod-radius-lg: 20px;

	--cod-shadow-sm: 0 1px 2px rgba(23, 11, 46, .04);
	--cod-shadow: 0 4px 16px rgba(23, 11, 46, .06);
	--cod-shadow-lg: 0 12px 32px rgba(23, 11, 46, .10);

	/* A quieter neutral for tiles and table heads than the violet tint. */
	--cod-tile: #f6f5f9;
	--cod-hairline: #e8e6ee;

	--cod-space-section: clamp(56px, 8vw, 112px);
}

/* --- Type -------------------------------------------------------------- */

body {
	color: var(--cod-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.cod-hero__title,
.cod-section__title {
	font-weight: 600;
	letter-spacing: -.015em;
}

/* Element selectors only, so a heading on a dark ground keeps its own white. */
h1, h2, h3, h4, h5, h6 { color: var(--cod-ink); }

h1, .cod-hero__title { letter-spacing: -.025em; line-height: 1.08; }
h2 { line-height: 1.15; }

strong, b { font-weight: 600; }

/* Labels in capitals shouted over the product names; sentence case reads calmer. */
.cod-hero__kicker,
.cod-card__brand,
.cod-footer__heading,
.cod-toc__title,
.cod-page__eyebrow,
.cod-contact__eyebrow,
.cod-mode__badge,
.cod-factstrip__label {
	text-transform: none;
	letter-spacing: 0;
}

.cod-lead,
.cod-section__sub,
.cod-shop__lead,
.cod-page__standfirst { color: var(--cod-ink-soft); font-weight: 400; }

/* --- Buttons: one shape ------------------------------------------------ */

.cod-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order {
	border-radius: var(--cod-radius-pill);
	font-weight: 600;
	letter-spacing: -.005em;
	padding-inline: 22px;
	box-shadow: none;
}

.cod-btn--lg,
.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	min-height: 52px;
	padding: 14px 28px;
	font-size: var(--cod-step-0);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button { border-radius: var(--cod-radius-pill); font-weight: 600; }

.cod-btn--outline,
.cod-btn--ghost,
.woocommerce a.button:not(.alt):not(.cod-btn--primary),
.woocommerce button.button:not(.alt):not(.cod-btn--primary) {
	border-color: var(--cod-hairline);
}

/* --- Header: one calm bar ---------------------------------------------- */

.cod-promo { font-size: .8125rem; }
.cod-promo__text { font-weight: 500; letter-spacing: 0; }
.cod-promo__inner { min-height: 34px; }

.cod-utility { border-bottom-color: transparent; }
.cod-utility__list li + li { border-left: 0; }
.cod-utility__list a { padding: .45rem .75rem; font-size: .78rem; }

.cod-header {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid var(--cod-hairline);
	box-shadow: none;
}

.cod-header__action,
.cod-lang__toggle { font-weight: 500; }

.cod-lang__toggle,
.cod-header__burger { border-color: var(--cod-hairline); border-radius: var(--cod-radius-pill); }
.cod-header__burger { border-radius: 50%; }

.cod-brand__name { font-weight: 600; }

/* Search as one pill, the button inside it rather than bolted on. */
.cod-search {
	border: 1px solid transparent;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-tile);
	transition: border-color .15s ease, background-color .15s ease;
}
.cod-search:focus-within { background: var(--cod-surface); border-color: var(--cod-hairline); }
.cod-search .cod-search__field {
	border: 0;
	border-radius: var(--cod-radius-pill) 0 0 var(--cod-radius-pill);
	background: transparent;
	padding-left: 18px;
}
.cod-search .cod-search__field:focus-visible { outline: 0; }
.cod-search .cod-search__submit {
	width: 40px;
	height: 40px;
	margin: 3px;
	border-radius: 50%;
	align-self: center;
}

.cod-nav { border-top-color: var(--cod-hairline); background: transparent; }

/*
 * The open mobile menu is a fixed, full-screen panel, but a backdrop-filter
 * makes the header the containing block of anything fixed inside it: the
 * panel was clipped to the header's 64px, transparent, and over the page.
 * While it is open the header drops the blur, the panel gets a surface, and
 * the burger sits above the panel so the same button closes it.
 */
@media (max-width: 1023.98px) {
	.cod-header:has(.cod-nav.is-open) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.cod-nav.is-open {
		background: var(--cod-surface);
		padding-top: 72px;
	}

	.cod-header__burger {
		position: relative;
		z-index: 960;
	}
}

.cod-nav__list a,
.cod-nav__toggle {
	font-weight: 500;
	color: var(--cod-ink-soft);
}
.cod-nav__list a:hover,
.cod-nav__toggle:hover { color: var(--cod-ink); }

@media (min-width: 1024px) {
	.cod-nav__list a,
	.cod-nav__list > li > .cod-nav__toggle { padding: 10px 14px; font-size: .875rem; }
}

.cod-mega { border-color: var(--cod-hairline); box-shadow: var(--cod-shadow-lg); }
.cod-mega::before { display: none; }
.cod-mega__title { font-weight: 600; border-bottom-color: var(--cod-hairline); }
.cod-mega__count { font-weight: 500; }

/* --- Breadcrumbs and page heads --------------------------------------- */

.cod-breadcrumb { font-size: .8125rem; }

.cod-page__head,
.cod-shop__head { margin-block: clamp(16px, 3vw, 32px) clamp(24px, 4vw, 48px); }

/* --- Sections ----------------------------------------------------------- */

.cod-section { padding-block: var(--cod-space-section); }
.cod-section--tight { padding-block: clamp(28px, 4vw, 48px); }
.cod-section--soft { background: var(--cod-tile); }

.cod-section__head { margin-bottom: clamp(24px, 3.5vw, 44px); }
.cod-section__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.cod-section__link { font-weight: 500; }

/* --- Home -------------------------------------------------------------- */

.cod-hero__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); }
.cod-hero__copy { font-size: var(--cod-step-1); line-height: 1.5; opacity: .9; }
.cod-hero__kicker { font-weight: 500; font-size: .8125rem; background: rgba(255, 255, 255, .1); }
.cod-hero__ladder-label { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cod-hero__actions .cod-btn--outline,
.cod-hero__actions .cod-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.cod-hero__actions .cod-btn--outline:hover,
.cod-hero__actions .cod-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

/* Reassurance strip: four quiet columns, not four boxes. */
.cod-usp__item {
	border: 0;
	background: transparent;
	padding: 8px 4px;
}
.cod-usp__title { font-weight: 600; }
.cod-usp__copy { color: var(--cod-ink-soft); }

/* The range: each line a soft tile, the packshot carrying the colour. */
.cod-line {
	border: 0;
	border-radius: var(--cod-radius-lg);
	background: var(--cod-tile);
}
.cod-line__media,
.cod-line__media--photo { background: transparent; }
.cod-line__title { font-weight: 600; }
.cod-line__price { font-weight: 600; }
.cod-lines__list { gap: clamp(16px, 2vw, 24px); }

.cod-linecard,
.cod-brand-card,
.cod-puff-card { border-color: transparent; background: var(--cod-tile); border-radius: var(--cod-radius-lg); }

/* How it works: numbered columns on the page, not cards. */
.cod-steps__item {
	border: 0;
	background: transparent;
	padding: 4px 0 0;
}
.cod-steps__num { font-weight: 600; }
.cod-steps__title { font-weight: 600; }
.cod-steps__copy { color: var(--cod-ink-soft); }

.cod-explainer__media { border-radius: var(--cod-radius-lg); }

/* FAQ: a list divided by hairlines. */
.cod-faq__item {
	border: 0;
	border-bottom: 1px solid var(--cod-hairline);
	border-radius: 0;
	background: transparent;
}
.cod-faq__item:first-child { border-top: 1px solid var(--cod-hairline); }
.cod-faq__q { font-weight: 500; padding-inline: 0; }
.cod-faq__a { padding-inline: 0; color: var(--cod-ink-soft); }

.cod-contact-cta__inner { border: 0; border-radius: var(--cod-radius-lg); background: var(--cod-tile); }

/* --- Tables ------------------------------------------------------------ */

.cod-table,
.cod-spec-table,
.woocommerce table.shop_table {
	border-color: var(--cod-hairline);
	border-radius: var(--cod-radius);
}

.cod-table th,
.cod-spec-table th,
.woocommerce table.shop_table th,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table thead th {
	background: transparent;
	color: var(--cod-ink-soft);
	font-weight: 500;
}

.cod-table th, .cod-table td,
.cod-spec-table th, .cod-spec-table td,
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
th, td { border-color: var(--cod-hairline); }

.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 14px 16px; }

/* --- Product grid ------------------------------------------------------ */

.woocommerce ul.products,
ul.products { gap: clamp(16px, 2vw, 28px); }

.cod-card,
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product.product,
.woocommerce-page ul.products[class*="columns-"] li.product.product {
	border: 0;
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cod-card:hover {
	border-color: transparent;
	box-shadow: var(--cod-shadow-lg);
	transform: translateY(-2px);
}

.cod-card__media {
	border-radius: var(--cod-radius-lg);
	background: var(--cod-tile);
}

.cod-card__body { gap: 4px; padding: 16px 4px 4px; }
.cod-card__brand { font-size: .8125rem; font-weight: 500; }
.cod-card__title { font-weight: 600; }
.cod-card__title a { color: var(--cod-ink); }
.cod-card__price { font-weight: 600; color: var(--cod-ink); }
.cod-card__actions { padding-top: 12px; }

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

/* --- Category and shop ------------------------------------------------- */

.cod-shop__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
.cod-filter__title { font-weight: 600; }
.cod-chip { border-color: var(--cod-hairline); font-weight: 500; }

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

.woocommerce div.product .product_title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-weight: 600; color: var(--cod-ink); }

.woocommerce .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image { border-radius: var(--cod-radius-lg); }
.woocommerce div.product div.images { background: var(--cod-tile); border-radius: var(--cod-radius-lg); }

/* The buy box: white with a hairline, not a tinted panel inside a tinted panel. */
.cod-mode {
	padding: clamp(16px, 2vw, 24px);
	border-color: var(--cod-hairline);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
}
.cod-mode__title,
.cod-modes__title { font-weight: 600; }
.cod-mode__total-value,
.cod-mode__price { font-weight: 600; }
.cod-mode__badge { font-weight: 500; }

.cod-modes__tab { border-color: var(--cod-hairline); border-radius: var(--cod-radius); }
.cod-modes__tab-label { font-weight: 600; }

.cod-product-assurance { border-color: var(--cod-hairline); background: var(--cod-tile); border-radius: var(--cod-radius-lg); }

.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: var(--cod-hairline); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 500; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { font-weight: 600; }

/* --- Forms ------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	border-color: #d9d6e2;
	border-radius: var(--cod-radius-sm);
	padding: 12px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 0;
	border-color: var(--cod-blue);
	box-shadow: 0 0 0 3px rgba(109, 40, 217, .15);
}

.woocommerce form .form-row label { font-weight: 500; color: var(--cod-ink-soft); }

/* --- Cart and checkout ------------------------------------------------- */

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3,
#order_review_heading { font-weight: 600; }

/* The payment area: white with a hairline, the method cards inside it. */
.woocommerce-checkout #payment {
	background: var(--cod-surface);
	border: 1px solid var(--cod-hairline);
	border-radius: var(--cod-radius-lg);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--cod-hairline); }
.woocommerce-checkout #payment div.form-row { padding: 16px; }

.cod-place-order-note {
	border-color: var(--cod-hairline);
	background: var(--cod-tile);
	border-radius: var(--cod-radius);
}
.cod-place-order-note__title { font-weight: 600; }

.cod-checkout-banner { border-radius: var(--cod-radius); }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error { border-radius: var(--cod-radius); }

/* Order confirmation (COD and crypto): one summary line, quiet tables. */
.woocommerce-order-overview {
	border: 1px solid var(--cod-hairline);
	border-radius: var(--cod-radius-lg);
	padding: 16px 20px !important;
}
.woocommerce-order-overview li { border-color: var(--cod-hairline) !important; }
.woocommerce-order-overview li strong { font-weight: 600; }

.woocommerce-columns--addresses .woocommerce-column address { border-color: var(--cod-hairline); border-radius: var(--cod-radius-lg); }

/* The crypto payment card (its stylesheet loads in the footer, hence the extra weight). */
html body .cod-np { border-color: var(--cod-hairline); border-radius: var(--cod-radius-lg); box-shadow: var(--cod-shadow); }
html body .cod-np-fold { border-color: var(--cod-hairline); border-radius: var(--cod-radius); }
html body .cod-np .cod-np__title { font-weight: 600; }
html body .cod-np__amount { font-weight: 600; letter-spacing: -.02em; }

/* --- Informational pages ---------------------------------------------- */

.cod-prose { line-height: 1.65; }

/*
 * Tables written in a page (the delivery table is one). Four columns of words
 * like "Próximamente" came to 432px on a 390px phone, and the browser shrank
 * the whole page to fit. On a phone the table now gets tighter cells, which is
 * enough to fit at 390px; where it still does not (320px) it scrolls inside its
 * own box and the page stays put.
 */
.cod-prose .wp-block-table {
	max-width: 100%;
	margin-inline: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.cod-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.cod-prose .wp-block-table th,
.cod-prose .wp-block-table td { border-bottom: 1px solid var(--cod-hairline); text-align: left; vertical-align: top; }
.cod-prose .wp-block-table th { color: var(--cod-ink-soft); font-weight: 500; }

@media (max-width: 599px) {
	.cod-prose .wp-block-table th,
	.cod-prose .wp-block-table td { padding: 8px 6px; font-size: .875rem; line-height: 1.35; }
	.cod-prose .wp-block-table th:first-child,
	.cod-prose .wp-block-table td:first-child { padding-left: 0; }
}
.cod-prose h2 { margin-top: 1.8em; }
.cod-toc {
	border-color: var(--cod-hairline);
	background: transparent;
	border-radius: var(--cod-radius-lg);
}
.cod-toc__title { font-weight: 600; font-size: .875rem; color: var(--cod-ink); }

.cod-contact-card,
.cod-post-card { border-color: var(--cod-hairline); border-radius: var(--cod-radius-lg); }

/* --- Account ----------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul { border-color: var(--cod-hairline); border-radius: var(--cod-radius-lg); }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border-color: var(--cod-hairline);
	border-radius: var(--cod-radius-lg);
}

/* --- Footer: the brand's dark ground, quieter type -------------------- */

.cod-footer {
	margin-top: var(--cod-space-section);
	padding-block: clamp(48px, 6vw, 72px) 28px;
}
.cod-footer__heading {
	font-family: var(--cod-font);
	font-size: .875rem;
	font-weight: 600;
	color: #fff;
}
.cod-footer__list { gap: 10px; }
.cod-footer a { color: #d9d2ee; }
.cod-footer a:hover { color: #fff; }
.cod-footer__bottom { border-top-color: rgba(255, 255, 255, .1); }

/* --- Floating contact buttons: smaller, round -------------------------- */

.cod-dock__button { border-radius: 50%; box-shadow: var(--cod-shadow); }

/* --- Product card price: per vape first, the box under it ------------- */

.cod-card__price--offer { font-size: inherit; font-weight: 400; }
.cod-offer { display: grid; gap: 2px; margin: 2px 0 0; }
.cod-offer p { margin: 0; }
.cod-offer__contents { font-size: .8125rem; color: var(--cod-muted); }
.cod-offer__unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px !important; }
.cod-offer__unit-price {
	font-family: var(--cod-font-heading);
	font-size: clamp(1.45rem, 1.2rem + .9vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--cod-ink);
	font-variant-numeric: tabular-nums;
}
.cod-offer__unit-label { font-size: .8125rem; color: var(--cod-ink-soft); }
.cod-offer__total { font-size: .875rem; color: var(--cod-ink-soft); }
.cod-offer__total strong { display: inline; color: var(--cod-ink); font-weight: 600; }
.cod-offer__save {
	justify-self: start;
	margin-top: 6px !important;
	padding: 2px 10px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-tile);
	color: var(--cod-blue);
	font-size: .78rem;
	font-weight: 500;
}

/* Cash on delivery on a card: present, not louder than the price. */
.cod-card__cod { font-size: .75rem; color: var(--cod-muted); font-weight: 400; }
.cod-card__cod::before { opacity: .6; }

/* --- Product page: the quantity discount as aligned rows ------------- */

.cod-mode__tiers {
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--cod-hairline);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
}
.cod-mode__tiers-title { font-size: .78rem; font-weight: 500; color: var(--cod-muted); }
.cod-mode__tiers-lead { font-family: var(--cod-font-heading); font-size: 1.05rem; font-weight: 600; color: var(--cod-ink); }
.cod-ladder-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cod-ladder-rows__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--cod-hairline);
	font-size: .9rem;
}
.cod-ladder-rows__row:first-child { border-top: 0; padding-top: 2px; }
.cod-ladder-rows__qty { color: var(--cod-ink); font-weight: 500; }
.cod-ladder-rows__deal {
	padding: 2px 9px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-tile);
	color: var(--cod-blue);
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}
.cod-ladder-rows__each {
	grid-column: 3;
	display: grid;
	justify-items: end;
	color: var(--cod-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.cod-ladder-rows__each small { color: var(--cod-muted); font-size: .72rem; font-weight: 400; }
.cod-ladder-rows__row.is-base .cod-ladder-rows__each { color: var(--cod-ink-soft); font-weight: 500; }
.cod-mode__tiers-note { font-size: .78rem; }

/* --- Category page: price per box by quantity ------------------------- */

.cod-boxprices { margin-top: clamp(20px, 3vw, 32px); }
.cod-boxprices__table caption {
	caption-side: top;
	padding: 14px 16px 6px;
	text-align: left;
	font-family: var(--cod-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cod-ink);
}
.cod-boxprices__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cod-boxprices__each { color: var(--cod-ink); font-weight: 600; }
.cod-boxprices__deal {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-tile);
	color: var(--cod-blue);
	font-size: .72rem;
	font-weight: 600;
}
.cod-boxprices__note { margin: 8px 16px 14px; font-size: .78rem; color: var(--cod-muted); white-space: normal; }

/* --- Tienda: the HipHop lines as one clickable card ------------------- */

.cod-shopcard { padding: 0; }

/* Three lines, three columns: four left each card too narrow for its prices. */
@media (min-width: 768px) {
	.woocommerce ul.products:has(> li.cod-shopcard),
	ul.products:has(> li.cod-shopcard) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
}
.cod-shopcard__price,
.cod-shopcard__volume { text-wrap: balance; }
.cod-shopcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--cod-radius-lg);
}
.cod-shopcard__link:hover,
.cod-shopcard__link:focus-visible { text-decoration: none; }
.cod-shopcard__link:focus-visible { outline: 2px solid var(--cod-blue); outline-offset: 4px; }

.cod-shopcard__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: clamp(16px, 3vw, 32px);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-tile);
	overflow: hidden;
}
.cod-shopcard__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}
.cod-shopcard__link:hover .cod-shopcard__media img { transform: scale(1.03); }

.cod-shopcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex: 1 0 auto;
	padding: 18px 4px 4px;
}
.woocommerce ul.products li.product .cod-shopcard__title,
.cod-shopcard__title {
	margin: 0;
	padding: 0;
	font-family: var(--cod-font-heading);
	font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--cod-ink);
}
.cod-shopcard__benefit { font-size: .9rem; color: var(--cod-ink-soft); }
.cod-shopcard__price {
	margin-top: 10px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cod-ink);
	font-variant-numeric: tabular-nums;
}
.cod-shopcard__volume {
	padding: 3px 10px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-tile);
	color: var(--cod-blue);
	font-size: .82rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cod-shopcard__note { margin-top: 2px; font-size: .78rem; color: var(--cod-muted); }
.cod-shopcard__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-blue);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	transition: background-color .15s ease;
}
/* The volume line can be long in Spanish: it wraps inside the card rather than running off it. */
.cod-shopcard__volume { max-width: 100%; white-space: normal; border-radius: var(--cod-radius-sm); line-height: 1.35; }
.cod-shopcard__brand { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cod-muted); }
.cod-shopcard__price .woocommerce-Price-amount { font-weight: 700; }
.cod-shopcard__stock { margin-top: 4px; font-size: .82rem; font-weight: 600; color: var(--cod-green); }
.cod-shopcard__stock[data-state="supplier"],
.cod-shopcard__stock[data-state="backorder"] { color: var(--cod-blue); }
.cod-shopcard__stock[data-state="out_of_stock"] { color: var(--cod-red); }
/* The buttons line up along the bottom of a row, however the names wrap; the last line above the button keeps its distance. */
.cod-shopcard__body > :nth-last-child(2) { margin-bottom: 16px; }
.cod-shopcard__body > .cod-shopcard__cta { margin-top: auto; }
.cod-shopcard__link:hover .cod-shopcard__cta { background: var(--cod-blue-dark); }
.cod-shopcard .cod-badge--out { position: absolute; top: 12px; left: 12px; }

/* On a phone, one line per row: the photograph leads, the prices read on one line. */
@media (max-width: 767px) {
	.woocommerce ul.products:has(> li.cod-shopcard),
	ul.products:has(> li.cod-shopcard) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.cod-shopcard__media { aspect-ratio: 4 / 3; }
	.cod-shopcard__body { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.cod-shopcard__link:hover .cod-shopcard__media img { transform: none; }
}