/* ==========================================================================
   Shop, product, cart, checkout, account
   ========================================================================== */

.cod-shop { padding-bottom: clamp(32px, 5vw, 56px); }
.cod-shop__head { margin-bottom: 20px; }
.cod-shop__title { margin: 0 0 8px; }

/* One line between the title and the products; the rest is under them. */
.cod-shop__lead { margin: 0; color: var(--cod-ink-soft); }

.cod-shop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.cod-shop__intro {
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: clamp(24px, 4vw, 40px);
	border-top: 1px solid var(--cod-line);
}

.cod-shop__intro > h2:first-child,
.cod-shop__intro > .cod-table-wrap:first-child { margin-top: 0; }

.cod-shop__intro .cod-table-wrap { margin-bottom: clamp(24px, 4vw, 40px); }

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

.cod-shop__filters-toggle {
	width: 100%;
	padding: 12px 16px;
	background: var(--cod-surface);
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	font-weight: 700;
	color: var(--cod-navy);
	cursor: pointer;
	min-height: 44px;
}

.cod-shop__filters-inner { display: none; padding-top: 16px; }
.cod-shop__filters-inner.is-open { display: block; }

.cod-filter + .cod-filter { margin-top: 24px; }

.cod-filter__title {
	margin: 0 0 10px;
	font-size: var(--cod-step-0);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--cod-navy);
}

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

.cod-filter__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	border-radius: var(--cod-radius-sm);
	color: var(--cod-ink);
	font-size: var(--cod-step--1);
}

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

.cod-filter__count { color: var(--cod-muted); font-size: 12px; }
.cod-filter__reset { margin-top: 20px; font-size: var(--cod-step--1); }

/* --- Toolbar ----------------------------------------------------------- */

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

.woocommerce-result-count { margin: 0; color: var(--cod-muted); font-size: var(--cod-step--1); }
.woocommerce-ordering select { width: auto; min-width: 200px; }

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

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/*
 * The grid owns the card's width. WooCommerce sizes cards itself with
 * `.woocommerce ul.products[class*="columns-"] li.product`, which outranks a
 * plain `.woocommerce ul.products li.product` and, inside its mobile media
 * query, squeezes every card to 48% of the grid cell it already sits in --
 * clipping the name and the button. Repeating `.product` outranks it back.
 */
.cod-card,
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product.product,
.woocommerce-page ul.products[class*="columns-"] li.product.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	overflow: hidden;
	width: auto;
	float: none;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.cod-card:hover { border-color: #cbd5e6; box-shadow: var(--cod-shadow); }

/* --- Card media -----------------------------------------------------------
 *
 * The presentation layer that makes a grid look like one set of products
 * rather than a folder of files.
 *
 * Every card gets the same square area, the same neutral ground and the same
 * product scale, whatever the source artwork does. `contain` rather than
 * `cover`, because cropping a packshot cuts the device in half -- and a device
 * with its top missing is worse than one that is slightly small.
 */

.cod-card__media {
	position: relative;
	/* A soft vertical ground: flat grey makes a transparent packshot look
	   like it is floating in a void. */
	background:
		radial-gradient(ellipse 72% 48% at 50% 88%, rgba(16, 28, 50, .07) 0%, transparent 70%),
		linear-gradient(170deg, #fbfcfe 0%, var(--cod-surface-soft) 100%);
	overflow: hidden;
}

.cod-card__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	/*
	 * Light, because the packshot carries its own margin. Padding both means
	 * the device ends up small in a large empty square.
	 */
	padding: 4% 6%;
	display: block;
	transition: transform .35s ease;
}

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

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

/* Long names must not make one card taller than its neighbours. */
.cod-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Two lines at the title's own line-height. A shorter box clips the second
	   line instead of ending it, which reads as a rendering fault. */
	min-height: 2.7em;
}

/* A COD cue on the card, so the store's whole proposition is visible in the
   grid rather than only at checkout. */
.cod-card__cod {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	font-size: var(--cod-step--2, 11px);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--cod-ink-soft);
}

.cod-card__cod::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 999px;
	background: var(--cod-green, #1a7f37);
}

.cod-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	flex: 1 0 auto;
}

.cod-card__brand {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cod-muted);
}

.cod-card__title {
	margin: 0;
	font-size: var(--cod-step-0);
	line-height: 1.35;
}

.cod-card__title a { color: var(--cod-navy); }

.cod-card__rating { display: flex; align-items: center; gap: 6px; font-size: var(--cod-step--1); }
.cod-card__reviews { color: var(--cod-muted); }

.cod-card__price { font-size: var(--cod-step-1); font-weight: 800; color: var(--cod-navy); }
.cod-card__price del { font-size: var(--cod-step--1); font-weight: 500; color: var(--cod-muted); margin-right: 6px; }
.cod-card__price ins { text-decoration: none; color: var(--cod-red); }
.cod-card__price .woocommerce-Price-amount { white-space: nowrap; }

.cod-card__actions { margin-top: auto; padding-top: 8px; }
.cod-card__actions .button { width: 100%; }

.woocommerce .star-rating { font-size: 12px; }

/* --- Single product ---------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-block: clamp(20px, 3vw, 32px);
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title { font-size: var(--cod-step-3); margin-bottom: 10px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: var(--cod-step-3);
	font-weight: 800;
	color: var(--cod-navy);
	margin: 0 0 14px;
}

.woocommerce div.product p.price del { font-size: var(--cod-step-1); color: var(--cod-muted); font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--cod-red); }

.woocommerce div.product form.cart { margin-bottom: 20px; }

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 14px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	width: 100%;
	padding: 0 0 8px;
	border: 0;
}

.woocommerce div.product form.cart .variations label { font-weight: 700; color: var(--cod-navy); }

.woocommerce div.product form.cart .quantity { margin-right: 10px; }
.woocommerce div.product form.cart .quantity input { width: 86px; text-align: center; }

.woocommerce div.product form.cart .button { min-width: 190px; }

.cod-product-assurance {
	display: grid;
	gap: 10px;
	margin: 20px 0;
	padding: 16px;
	list-style: none;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-product-assurance__item { display: flex; flex-direction: column; gap: 2px; font-size: var(--cod-step--1); }
.cod-product-assurance__item strong { color: var(--cod-navy); }
.cod-product-assurance__item span { color: var(--cod-ink-soft); }

.cod-product-ladder { margin-bottom: 20px; }

.cod-product-ladder__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--cod-step--1);
	font-weight: 700;
	color: var(--cod-navy);
}

.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 16px; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 0 0 2px;
	border-bottom: 1px solid var(--cod-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 14px;
	color: var(--cod-ink-soft);
	font-weight: 700;
	border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--cod-navy);
	border-bottom-color: var(--cod-blue);
}

.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }

.woocommerce .woocommerce-product-gallery img { border-radius: var(--cod-radius); }

/* --- Cart -------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th { background: var(--cod-surface-soft); font-size: var(--cod-step--1); }

.woocommerce table.cart img { width: 64px; border-radius: var(--cod-radius-sm); }

.cod-cart-ladder { margin: 28px 0; }
.cod-cart-ladder__title { font-size: var(--cod-step-1); margin-bottom: 12px; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }

.woocommerce-cart .cart-collaterals { margin-top: 28px; }

/* --- Checkout ---------------------------------------------------------- */

.cod-checkout-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: var(--cod-radius);
	background: #eef5ff;
	border: 1px solid #cddffb;
	font-size: var(--cod-step--1);
}

.cod-checkout-banner__icon { color: var(--cod-blue); line-height: 1.5; }

.cod-checkout-country-note {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid var(--cod-accent);
	border-radius: var(--cod-radius-sm);
	background: #fff8ea;
	font-size: var(--cod-step--1);
}

.cod-place-order-note {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-place-order-note__title { margin: 0 0 8px; font-weight: 700; color: var(--cod-navy); font-size: var(--cod-step--1); }
.cod-place-order-note__steps { margin: 0; padding-left: 1.2em; font-size: var(--cod-step--1); color: var(--cod-ink-soft); }
.cod-place-order-note__steps li + li { margin-top: 4px; }

.cod-review-freeship__msg { font-size: var(--cod-step--1); color: var(--cod-blue); font-weight: 600; }

.woocommerce-checkout #payment { background: var(--cod-surface-soft); border-radius: var(--cod-radius); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--cod-line); }
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--cod-step--1); }
.woocommerce form .form-row .required { color: var(--cod-red); text-decoration: none; }

/* --- Tracking / account ------------------------------------------------ */

.cod-track { max-width: 720px; }

.cod-track__fields { display: grid; gap: 14px; }
.cod-track__field { margin: 0; }
.cod-track__field label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--cod-step--1); }
.cod-track__form { margin-bottom: 24px; }
.cod-track__form .cod-btn { margin-top: 16px; }

.cod-track__error {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--cod-radius-sm);
	background: #fdecea;
	border: 1px solid #f6c9c5;
	color: #8c211a;
	font-size: var(--cod-step--1);
}

.cod-track__result {
	padding: 20px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
}

.cod-track__result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
}

.cod-track__result-head h2 { margin: 0; font-size: var(--cod-step-2); }

.cod-track__status {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--cod-surface-deep);
	font-size: var(--cod-step--1);
	font-weight: 700;
	color: var(--cod-navy);
}

/*
 * What was ordered, above the facts.
 *
 * The name and the detail stack on a narrow screen and sit on one line once
 * there is room, because a box line's detail ("2 x box of 10 - 20 devices")
 * is nearly as long as the product name and the two crushed together at
 * 320px is how "20 devices" gets read as part of the name.
 */
.cod-track__items { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.cod-track__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--cod-line); }
.cod-track__item-name { font-weight: 600; }
.cod-track__item-detail { color: var(--cod-muted); font-size: var(--cod-step--1); }

.cod-track__facts { display: grid; gap: 10px; margin: 0 0 20px; }
.cod-track__facts > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--cod-line); }
.cod-track__facts dt { margin: 0; color: var(--cod-muted); font-size: var(--cod-step--1); }
.cod-track__facts dd { margin: 0; font-weight: 600; text-align: right; }

.cod-track__shipment { padding-top: 16px; border-top: 1px solid var(--cod-line); }
.cod-track__shipment h3 { font-size: var(--cod-step-1); }
.cod-track__pending { color: var(--cod-muted); font-size: var(--cod-step--1); }

.cod-tracking-panel {
	margin-top: 28px;
	padding: 20px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-tracking-panel h2 { font-size: var(--cod-step-1); }
.cod-tracking-panel__list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.cod-tracking-panel__list li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--cod-step--1); }
.cod-tracking-panel__list span { color: var(--cod-muted); }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--cod-radius-sm);
	color: var(--cod-ink);
	font-weight: 600;
	font-size: var(--cod-step--1);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--cod-surface-soft); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--cod-surface-deep); color: var(--cod-blue); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 14px 16px;
	border-radius: var(--cod-radius);
	border: 1px solid var(--cod-line);
	background: var(--cod-surface-soft);
	font-size: var(--cod-step--1);
	list-style: none;
}

/*
 * WooCommerce puts its icon 1.5em in from the left and leaves 3.5em of
 * padding for it. The padding above replaced that, so the icon sat on the
 * first letters ("Tu carrito" read as an icon and "carrito"). The icon gets
 * its own gutter again, aligned with the first line of text.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	padding-left: 44px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	left: 16px;
	top: 14px;
	line-height: 1.5;
}

.woocommerce-error { background: #fdecea; border-color: #f6c9c5; color: #8c211a; }

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

@media (min-width: 640px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 768px) {
	.cod-track__facts { grid-template-columns: repeat(2, 1fr); }
	.woocommerce .cart-collaterals .cart_totals { width: 420px; float: right; }
}

/*
 * A desktop cart reads as two columns: what you are buying on the left, what
 * it costs on the right. WooCommerce renders the basket and the totals as
 * siblings, so the grid is declared on their parent and the totals are placed
 * into the second column spanning every row. Floating them right instead
 * leaves the widest part of the page empty next to the total.
 */
@media (min-width: 1024px) {
	.woocommerce-cart .cod-prose > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		column-gap: 32px;
		align-items: start;
	}

	/*
	 * Placed explicitly rather than left to auto-flow: notices span both
	 * columns, the basket takes the left and the totals the right, on the
	 * same row. Auto-flow gives the empty notices wrapper a row of its own,
	 * which the totals then stretch to their own height.
	 */
	.woocommerce-cart .cod-prose > .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.woocommerce-cart .cod-prose > .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}

	.woocommerce-cart .cod-prose > .woocommerce > .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
		position: sticky;
		top: 96px;
	}

	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}

@media (min-width: 1024px) {
	.cod-shop__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
	.cod-shop__layout--single { grid-template-columns: minmax(0, 1fr); }

	/* A small range fills the row instead of leaving a fourth slot empty. */
	.cod-shop .cod-shop__layout--single ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cod-shop__filters-toggle { display: none; }
	.cod-shop__filters-inner { display: block; padding-top: 0; }

	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 24%; }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 72%; }
}

@media (min-width: 1280px) {
	.woocommerce div.product { grid-template-columns: 55% minmax(0, 1fr); }
}

/* --- Fixes found by the responsive audit -------------------------------- */

/*
 * WooCommerce's zoom feature injects an `img.zoomImg` at the image's natural
 * size (800px) and positions it absolutely. Below 1024px that pushed the page
 * 16px wider than the viewport. Clipping it to its frame is also how the zoom
 * is meant to read: a magnified region inside the gallery, not outside it.
 */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery {
	max-width: 100%;
	/* Outermost clip: jQuery.zoom appends its oversized image here, and
	   clipping only the inner figure still let it widen the page. */
	overflow: hidden;
}

/*
 * Account-form controls ship smaller than a comfortable touch target.
 * The password reveal button and the "remember me" checkbox were 22px and
 * 13px; both are brought up to a 44px hit area on touch-sized screens.
 */
.woocommerce form .password-input,
.woocommerce form .woocommerce-password-strength {
	width: 100%;
}

.woocommerce form .show-password-input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	top: 50%;
	transform: translateY(-50%);
	right: 2px;
}

.woocommerce-form__input-checkbox,
.woocommerce form .form-row input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
}

/* Give the checkbox's label a 44px row so the whole line is tappable. */
.woocommerce-form-login__rememberme,
.woocommerce form .form-row label.checkbox {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * The gallery column is 55% of the product layout, but the image kept its
 * intrinsic width and left a gap before the summary column. Fill the column.
 */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
	width: 100%;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --- Filters -------------------------------------------------------------
 *
 * Counts are computed against the other active filters, so every number here
 * is reachable and an option that leads nowhere is never rendered.
 */

.cod-filter__badge {
	display: inline-block;
	min-width: 18px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 9px;
	background: var(--cod-blue);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.cod-filter__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* 44px of target on touch, which the responsive audit checks. */
	min-height: 44px;
	padding: 4px 0;
}

.cod-filter__label { display: inline-flex; align-items: center; gap: 6px; }
.cod-filter__tick { color: var(--cod-blue); font-weight: 700; }

.cod-filter__item.is-active > a { font-weight: 600; color: var(--cod-blue); }

/* --- Active filter chips ------------------------------------------------- */

.cod-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 10px 12px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-chips__label { font-size: var(--cod-step--1); color: var(--cod-ink-soft); }
.cod-chips__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.cod-chip > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid var(--cod-line);
	border-radius: 999px;
	background: var(--cod-surface);
	font-size: var(--cod-step--1);
	text-decoration: none;
}

.cod-chip > a:hover,
.cod-chip > a:focus-visible { border-color: var(--cod-blue); color: var(--cod-blue); }

.cod-chips__clear { margin-left: auto; font-size: var(--cod-step--1); }

/* --- Empty results ------------------------------------------------------- */

.cod-empty { padding: 32px 0; text-align: center; }
.cod-empty__title { margin: 0 0 8px; }
.cod-empty__lead { color: var(--cod-ink-soft); }
.cod-empty__section { margin-top: 28px; text-align: left; }
.cod-empty__heading { margin: 0 0 10px; font-size: var(--cod-step-0); }

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

.cod-empty__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--cod-line);
	border-radius: 999px;
	background: var(--cod-surface);
	text-decoration: none;
}

.cod-empty__count { color: var(--cod-ink-soft); font-size: var(--cod-step--1); }

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

.cod-empty__products a { display: block; text-decoration: none; }
.cod-empty__products img { width: 100%; height: auto; border-radius: var(--cod-radius-sm); }
.cod-empty__products span { display: block; margin-top: 6px; font-size: var(--cod-step--1); }

.cod-empty__search { max-width: 420px; margin: 28px auto 16px; }

/* --- Product gallery ------------------------------------------------------
 *
 * A gallery that looks intentional with one image and useful with several.
 *
 * The previous version left the image at its intrinsic width, flush to the
 * left of the viewport with a gap before the summary. It now fills its column
 * on a neutral ground, and the thumbnail strip only appears when there is
 * something to switch between.
 */

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	border-radius: var(--cod-radius);
}

.woocommerce div.product .woocommerce-product-gallery__image {
	background:
		radial-gradient(ellipse 66% 42% at 50% 90%, rgba(16, 28, 50, .08) 0%, transparent 72%),
		linear-gradient(170deg, #fbfcfe 0%, var(--cod-surface-soft) 100%);
	border-radius: var(--cod-radius);
	border: 1px solid var(--cod-line);
}

/*
 * Before the slider starts, only the first photo shows.
 *
 * Until FlexSlider runs, every gallery image sits in the wrapper at full
 * column width, one under the other: the gallery grew to ~2000px on a phone
 * and then collapsed to one photo, throwing the summary 1500px down and back
 * (CLS 0.22 on every product page). FlexSlider moves the wrapper into a
 * .flex-viewport, so this selector stops matching the moment it has taken
 * over, and without JavaScript the first photo is still there.
 */
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	display: none;
}

/*
 * And while it starts, the gallery already has its final size.
 *
 * WooCommerce holds the gallery at an inline opacity of 0 until FlexSlider is
 * done. In between, the slides sit stacked inside the new .flex-viewport for
 * a few frames, and the thumbnail strip arrives last. So for exactly that
 * window the viewport is the square the first photo will be, clipped, and
 * the strip's row is reserved until the strip itself exists (same sizes as
 * .flex-control-thumbs below: 25% of the width, 20% on phones, at most 96px,
 * 12px above). A single-photo gallery gets no strip and reserves none.
 */
.woocommerce div.product .woocommerce-product-gallery[style*="opacity: 0"] .flex-viewport {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs)) {
	padding-bottom: calc(min(96px, 25% - 8px) + 12px);
}

@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs)) {
		padding-bottom: calc(min(96px, 20% - 8px) + 12px);
	}
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	/* Square, so the column height is known before the image loads and
	   nothing below it shifts. */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 4%;
	display: block;
}

/* The thumbnail strip. WooCommerce renders it as a flex row of anchors. */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	flex: 0 0 auto;
	width: calc(25% - 8px);
	max-width: 96px;
	margin: 0;
}

.woocommerce div.product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6%;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface-soft);
	cursor: pointer;
	opacity: .72;
	transition: opacity .15s ease, border-color .15s ease;
}

.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--cod-blue);
}

/* Keyboard users get the same affordance as a pointer. WooCommerce's
   thumbnails are images inside list items, so the focus ring has to be put
   somewhere it is visible. */
.woocommerce div.product .flex-control-thumbs li:focus-within img {
	opacity: 1;
	border-color: var(--cod-blue);
	outline: 2px solid var(--cod-blue);
	outline-offset: 2px;
}

/* A single-image gallery hides the strip entirely rather than showing a row
   of one, which reads as something missing. */
.woocommerce div.product .flex-control-thumbs:has(li:only-child) { display: none; }

@media (max-width: 767px) {
	.woocommerce div.product .flex-control-thumbs li { width: calc(20% - 8px); }
}

/* --- Structured product content ------------------------------------------- */

.cod-product-content {
	display: grid;
	gap: clamp(24px, 4vw, 40px);
	margin: clamp(28px, 5vw, 48px) 0;
	max-width: 860px;
}

.cod-product-content__block h2 {
	margin: 0 0 12px;
	font-size: var(--cod-step-1);
	color: var(--cod-navy);
}

.cod-product-content__block p { margin: 0 0 10px; color: var(--cod-ink-soft); }

/* Written copy has subheadings; they sit under the block's h2, not above it. */
.cod-product-content__block h3 {
	margin: 18px 0 8px;
	font-size: var(--cod-step-0);
	color: var(--cod-navy);
}

.cod-seo-copy ul { margin: 0 0 12px; color: var(--cod-ink-soft); }
.cod-seo-copy li + li { margin-top: 4px; }

.cod-product-content__note {
	font-size: var(--cod-step--1);
	color: var(--cod-muted);
}

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

.cod-keypoints li, .cod-boxlist li {
	position: relative;
	padding-left: 26px;
	color: var(--cod-ink);
}

.cod-keypoints li::before {
	content: '';
	position: absolute; left: 4px; top: .55em;
	width: 8px; height: 8px;
	border-radius: 999px;
	background: var(--cod-blue);
}

.cod-boxlist li::before {
	content: '';
	position: absolute; left: 4px; top: .5em;
	width: 9px; height: 5px;
	border-left: 2px solid var(--cod-green, #1a7f37);
	border-bottom: 2px solid var(--cod-green, #1a7f37);
	transform: rotate(-45deg);
}

.cod-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	overflow: hidden;
}

.cod-spec-table th,
.cod-spec-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--cod-line);
	font-size: var(--cod-step--1);
}

.cod-spec-table th {
	width: 46%;
	font-weight: 600;
	color: var(--cod-navy);
	background: var(--cod-surface-soft);
}

.cod-spec-table tr:last-child th,
.cod-spec-table tr:last-child td { border-bottom: 0; }

/* --- Product layout -------------------------------------------------------
 *
 * The gallery and the summary are grid items and must fill their tracks.
 * WooCommerce's markup carries float and width rules that leave both columns
 * sized to their content, which is what produced a narrow image on the left,
 * a narrow summary on the right, and a wide gap between them.
 */

@media (min-width: 1024px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
		gap: clamp(24px, 3vw, 48px);
		align-items: start;
	}

	/* The gallery spans column one, the summary column two, and everything
	   else -- tabs, related products, our content block -- runs full width
	   underneath. Without this they land in whichever cell is next. */
	.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	.woocommerce div.product .entry-summary { grid-column: 2; grid-row: 1; }

	.woocommerce div.product > .woocommerce-tabs,
	.woocommerce div.product > .related,
	.woocommerce div.product > .upsells,
	.woocommerce div.product > .cod-product-content,
	.woocommerce div.product > .woocommerce-product-gallery ~ .cod-product-content {
		grid-column: 1 / -1;
	}
}

/*
 * WooCommerce's own stylesheet loads after the theme's and sets
 * `div.images { width: 48%; float: left }` on the gallery and the same on the
 * summary. Inside a grid that leaves both columns at 48% of their track with a
 * gap between them -- the narrow image and the wide gap on the product page.
 *
 * Matching both classes WooCommerce puts on each element wins on specificity
 * without reaching for !important, which would then have to be fought by
 * anything customising this later.
 */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product .entry-summary.entry-summary {
	width: 100%;
	max-width: 100%;
	float: none;
	min-width: 0;
	margin: 0;
}

/* =========================================================================
 * Buying modes
 *
 * Three ways to buy the same devices. Mobile first and stacked: at 320px the
 * tabs are a two-column grid rather than three squeezed columns, because a
 * third of 288px is not enough room for a price and a word. From 560px the
 * three sit in a row.
 *
 * Nothing here is communicated by colour alone -- the selected tab carries a
 * filled background AND a heavier weight AND aria-selected, and the sold-out
 * note carries words.
 * ====================================================================== */

.cod-modes { margin: 24px 0 8px; }
.cod-modes__title { font-size: var(--cod-step-1); margin: 0 0 12px; }

.cod-modes__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.cod-modes__tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	color: var(--cod-navy);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cod-modes__tab:hover { border-color: var(--cod-navy-soft); }

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

.cod-modes__tab-label { font-weight: 700; font-size: var(--cod-step-0); }
.cod-modes__tab-price { font-size: var(--cod-step--1); opacity: .85; }
.cod-modes__tab-price .amount { white-space: nowrap; }

/*
 * With the script off no panel is hidden, so every form is reachable and the
 * tabs are inert headings. is-enhanced is added by the script.
 */
.cod-modes:not(.is-enhanced) .cod-modes__tabs { display: none; }
.cod-modes:not(.is-enhanced) .cod-modes__panel { margin-bottom: 16px; }

.cod-mode {
	display: grid;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface-soft);
}

.cod-mode__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cod-mode__title { margin: 0; font-size: var(--cod-step-1); }

.cod-mode__badge {
	padding: 2px 10px;
	border-radius: var(--cod-radius-pill);
	background: var(--cod-navy);
	color: #fff;
	font-size: var(--cod-step--2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cod-mode__summary { margin: 0; color: var(--cod-muted); font-size: var(--cod-step--1); }

.cod-mode__figures { display: grid; gap: 8px; margin: 0; }
.cod-mode__figure { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.cod-mode__figure dt { margin: 0; color: var(--cod-muted); font-size: var(--cod-step--1); }
.cod-mode__figure dd { margin: 0; font-weight: 600; }
.cod-mode__price { font-size: var(--cod-step-2); font-weight: 800; }
.cod-mode__figure--saving dd { color: var(--cod-navy); font-weight: 700; }

.cod-mode__includes { padding-top: 4px; }
.cod-mode__includes-title { margin: 0 0 6px; font-size: var(--cod-step--1); font-weight: 700; }

.cod-mode__flavours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
	font-size: var(--cod-step--1);
	color: var(--cod-muted);
}

.cod-mode__flavours li { overflow-wrap: anywhere; }

/* A Mixed Box the customer builds: one row per flavour, a count beside it. */
.cod-mode__builder { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.cod-mode__builder-title { padding: 0; font-size: var(--cod-step--1); font-weight: 700; }
.cod-mode__builder-count { margin: 0; font-size: var(--cod-step--1); color: var(--cod-muted); }
.cod-mode__builder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.cod-mode__builder-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 76px;
	align-items: center;
	gap: 10px;
}

.cod-mode__builder-row label { font-size: var(--cod-step--1); overflow-wrap: anywhere; }
.cod-mode__builder-stock { display: block; color: var(--cod-muted); font-size: 0.85em; }
.cod-mode__builder-row.is-out label { color: var(--cod-muted); }

.cod-mode__builder-input {
	min-height: 44px;
	width: 100%;
	padding: 8px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface);
	color: var(--cod-navy);
	font: inherit;
	text-align: center;
}

.cod-mode__field { display: grid; gap: 6px; margin: 0; }
.cod-mode__field label { font-size: var(--cod-step--1); font-weight: 600; }

.cod-mode__select,
.cod-mode__quantity {
	min-height: 48px;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface);
	color: var(--cod-navy);
	font: inherit;
}

.cod-mode__field--quantity { max-width: 12em; }

.cod-mode__total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--cod-line);
}

.cod-mode__total-label { font-weight: 600; }
.cod-mode__total-value { font-size: var(--cod-step-2); font-weight: 800; }

.cod-mode__volume,
.cod-mode__stock { margin: 0; font-size: var(--cod-step--1); color: var(--cod-muted); }
.cod-mode__stock--out { color: var(--cod-navy); font-weight: 700; }

.cod-mode__submit { min-height: 48px; width: 100%; }

.cod-mode__ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	font-size: var(--cod-step--2);
	color: var(--cod-muted);
}

/* The box quantity tiers: what several boxes of this line cost, before the shopper asks. */
.cod-mode__tiers {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface-soft);
}

.cod-mode__tiers-title { margin: 0; font-size: var(--cod-step--1); font-weight: 700; }
.cod-mode__tiers-lead { margin: 0; color: var(--cod-navy); font-weight: 700; }
.cod-mode__tiers .cod-mode__ladder { gap: 4px; font-size: var(--cod-step--1); color: var(--cod-ink); }
.cod-mode__tiers-note { margin: 0; font-size: var(--cod-step--2); color: var(--cod-muted); }

@media (min-width: 560px) {
	.cod-modes__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cod-mode { padding: 20px; }
	.cod-mode__submit { width: auto; justify-self: start; min-width: 14em; }
	.cod-mode__flavours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.cod-mode__flavours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A family with a single mode has nothing to choose between. */
.cod-modes--single .cod-modes__tabs { display: none; }

/* =========================================================================
 * Tap targets WooCommerce leaves small
 *
 * Three controls in WooCommerce's own cart and checkout templates render
 * under 30px tall on a phone: the shipping calculator toggle, the country
 * select and the "ship to a different address" checkbox. The markup is
 * WooCommerce's and stays WooCommerce's; only the size is ours.
 * ====================================================================== */

.woocommerce a.shipping-calculator-button {
	display: inline-block;
	min-height: 44px;
	padding: 11px 0;
	line-height: 22px;
}

.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	min-height: 44px;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }

/*
 * The checkbox itself stays the size the browser draws it; the row you tap
 * is the label, so that is what gets the height.
 */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
}

/*
 * A line that is not on sale yet still shows how it will be sold: the cards
 * render, the buttons are dead, and the reason is in words at the top rather
 * than left for the shopper to infer from a button that does nothing.
 */
.cod-modes__unavailable {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface-deep);
	font-size: var(--cod-step--1);
}

.cod-mode__submit[disabled] { opacity: .55; cursor: not-allowed; }

/* =========================================================================
 * Billing and shipping addresses, side by side
 *
 * WooCommerce renders these as two floated columns, each with its own
 * heading above its own box. "Dirección de facturación" wraps to two lines
 * where "Dirección de envío" does not, so the left box started a line lower
 * than the right one and the pair read as broken rather than as a pair.
 *
 * A two-column grid with the heading and the box on explicit rows puts both
 * headings in row one and both boxes in row two, so they align whatever the
 * translation does to the wrapping.
 * ====================================================================== */

.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 24px;
	margin: 0;
}

.woocommerce-columns--addresses::before,
.woocommerce-columns--addresses::after { content: none; }

.woocommerce-columns--addresses .woocommerce-column {
	display: contents;
	float: none;
	width: auto;
}

.woocommerce-columns--addresses .woocommerce-column > h2,
.woocommerce-columns--addresses .woocommerce-column > h3 {
	grid-row: 1;
	margin: 0 0 4px;
	font-size: var(--cod-step-1);
	align-self: end;
}

.woocommerce-columns--addresses .woocommerce-column address {
	grid-row: 2;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.woocommerce-columns--addresses .woocommerce-column--billing-address > h2,
.woocommerce-columns--addresses .woocommerce-column--billing-address > h3,
.woocommerce-columns--addresses .woocommerce-column--billing-address address { grid-column: 1; }

@media (min-width: 720px) {
	.woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }

	.woocommerce-columns--addresses .woocommerce-column--shipping-address > h2,
	.woocommerce-columns--addresses .woocommerce-column--shipping-address > h3,
	.woocommerce-columns--addresses .woocommerce-column--shipping-address address { grid-column: 2; }
}

@media (max-width: 719px) {
	/* Stacked: heading, box, heading, box. */
	.woocommerce-columns--addresses .woocommerce-column--billing-address > h2,
	.woocommerce-columns--addresses .woocommerce-column--billing-address > h3 { grid-row: 1; }
	.woocommerce-columns--addresses .woocommerce-column--billing-address address { grid-row: 2; }
	.woocommerce-columns--addresses .woocommerce-column--shipping-address > h2,
	.woocommerce-columns--addresses .woocommerce-column--shipping-address > h3 { grid-row: 3; }
	.woocommerce-columns--addresses .woocommerce-column--shipping-address address { grid-row: 4; }
}