/* ==========================================================================
   Reusable components
   ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */

.cod-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--cod-radius-sm);
	font-size: var(--cod-step--1);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	/* Comfortable tap target on touch devices. */
	min-height: 44px;
}

.cod-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { text-decoration: none; }

.cod-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	background: var(--cod-blue);
	color: #fff;
}

.cod-btn--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--cod-blue-dark); color: #fff; }

.cod-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--cod-navy);
}

.cod-btn--ghost:hover { background: var(--cod-surface-soft); }

.cod-btn--outline {
	background: var(--cod-surface);
	border-color: var(--cod-line);
	color: var(--cod-navy);
}

.cod-btn--outline:hover { border-color: var(--cod-blue); color: var(--cod-blue); }

.cod-btn--lg { padding: 14px 26px; font-size: var(--cod-step-0); }
.cod-btn--full { width: 100%; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--cod-surface-deep);
	color: var(--cod-navy);
}

/* --- Badges and stock -------------------------------------------------- */

.cod-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .01em;
}

.cod-badge--sale { background: var(--cod-red); color: #fff; }

.cod-badge--out {
	left: auto;
	right: 10px;
	background: var(--cod-navy);
	color: #fff;
}

.cod-stock { font-size: var(--cod-step--1); font-weight: 600; }
.cod-stock--in { color: var(--cod-green); }
.cod-stock--low { color: var(--cod-accent); }
.cod-stock--out { color: var(--cod-red); }

/* --- Discount ladder --------------------------------------------------- */

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

.cod-ladder__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cod-surface-deep);
	font-size: var(--cod-step--1);
}

.cod-ladder--card .cod-ladder__item {
	flex: 1 1 160px;
	justify-content: space-between;
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	border: 1px solid var(--cod-line);
	padding: 12px 14px;
}

.cod-ladder__qty { color: var(--cod-ink-soft); }
.cod-ladder__pct { font-weight: 800; color: var(--cod-blue); }

/* --- Free shipping progress -------------------------------------------- */

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

.cod-freeship__msg {
	margin: 0 0 8px;
	font-size: var(--cod-step--1);
	font-weight: 600;
	color: var(--cod-navy);
}

.cod-freeship__track {
	height: 8px;
	border-radius: 999px;
	background: var(--cod-surface-deep);
	overflow: hidden;
}

.cod-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--cod-blue);
	transition: width .3s ease;
}

.cod-freeship.is-qualified .cod-freeship__fill { background: var(--cod-green); }
.cod-freeship.is-qualified .cod-freeship__msg { color: var(--cod-green); }

/* --- USP strip --------------------------------------------------------- */

.cod-usp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-usp__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
}

.cod-usp__icon {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--cod-blue);
}

.cod-usp__body { display: flex; flex-direction: column; gap: 2px; }
.cod-usp__title { color: var(--cod-navy); font-size: var(--cod-step-0); }
.cod-usp__copy { color: var(--cod-ink-soft); font-size: var(--cod-step--1); }

/* --- Breadcrumbs ------------------------------------------------------- */

.cod-breadcrumb { padding-block: 14px; font-size: var(--cod-step--1); }

.cod-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--cod-muted);
}

.cod-breadcrumb__item + .cod-breadcrumb__item::before {
	content: "/";
	margin-right: 6px;
	color: var(--cod-line);
}

.cod-breadcrumb__item.is-current { color: var(--cod-ink); }

/* --- FAQ / accordion --------------------------------------------------- */

.cod-faq { display: grid; gap: 10px; }

.cod-faq__item {
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	overflow: hidden;
}

.cod-faq__q {
	padding: 14px 16px;
	font-weight: 700;
	color: var(--cod-navy);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 44px;
}

.cod-faq__q::-webkit-details-marker { display: none; }

.cod-faq__q::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: var(--cod-blue);
}

.cod-faq__item[open] .cod-faq__q::after { content: "\2013"; }

.cod-faq__a { padding: 0 16px 14px; color: var(--cod-ink-soft); }
.cod-faq__a p:last-child { margin-bottom: 0; }

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

.cod-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
}

.cod-table { min-width: 560px; margin: 0; }

.cod-table th { background: var(--cod-surface-soft); color: var(--cod-navy); font-size: var(--cod-step--1); }
.cod-table tbody tr:last-child td,
.cod-table tbody tr:last-child th { border-bottom: 0; }

/* --- Order timeline ---------------------------------------------------- */

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

.cod-timeline__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0 10px 4px;
	color: var(--cod-muted);
	font-size: var(--cod-step--1);
}

.cod-timeline__dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--cod-line);
	background: var(--cod-surface);
	position: relative;
	z-index: 1;
}

/* Connector line between the dots. */
.cod-timeline__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 2px;
	height: 100%;
	background: var(--cod-line);
}

.cod-timeline__step.is-done { color: var(--cod-ink); }
.cod-timeline__step.is-done .cod-timeline__dot { border-color: var(--cod-green); background: var(--cod-green); }
.cod-timeline__step.is-done:not(:last-child)::before { background: var(--cod-green); }

.cod-timeline__step.is-current { color: var(--cod-navy); font-weight: 700; }
.cod-timeline__step.is-current .cod-timeline__dot { border-color: var(--cod-blue); background: var(--cod-blue); }

/* --- Age gate ---------------------------------------------------------- */

.cod-age-gate__panel {
	width: 100%;
	max-width: 440px;
	padding: clamp(24px, 5vw, 36px);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
	box-shadow: var(--cod-shadow-lg);
	text-align: center;
}

.cod-age-gate__brand {
	margin: 0 0 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--cod-blue);
}

.cod-age-gate__title { margin: 0 0 10px; font-size: var(--cod-step-3); }

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

.cod-age-gate__actions {
	display: grid;
	gap: 10px;
	margin: 20px 0 16px;
}

.cod-age-gate__legal {
	margin: 0;
	font-size: 12px;
	color: var(--cod-muted);
	line-height: 1.5;
}

/* --- Prose ------------------------------------------------------------- */

.cod-prose { max-width: 70ch; }

/*
 * 70ch is a reading measure, which is right for a policy page and wrong for a
 * cart table: it leaves half a desktop empty beside the basket. The commerce
 * pages hold tables and forms, not prose, so they use the page's own width.
 */
.woocommerce-cart .cod-prose,
.woocommerce-checkout .cod-prose,
.woocommerce-account .cod-prose { max-width: none; }
.cod-prose h2 { margin-top: 1.6em; }
.cod-prose h3 { margin-top: 1.4em; }
.cod-prose img { border-radius: var(--cod-radius); }

.cod-page { padding-bottom: clamp(32px, 5vw, 56px); }
.cod-page--narrow .cod-page__article { max-width: 760px; margin-inline: auto; }

/* --- Document pages ----------------------------------------------------
 *
 * The informational and legal pages. They were a 70ch column pinned to the
 * left of a 1200px container, so most of a desktop screen was blank and the
 * reader could not see the shape of what they were reading.
 *
 * On a wide screen the prose is now a document with a contents rail beside
 * it. Below that, the column simply centres -- a sidebar on a phone is a
 * second thing to scroll past before reaching the first thing.
 */

/*
 * Prose measure for reading pages only.
 *
 * NOT for the cart, the checkout or the account screens: those are two-column
 * WooCommerce layouts, and squeezing them into 70ch pushed the "update cart"
 * button out of its grid cell and underneath the totals panel, where it could
 * be seen and not clicked. There is a `max-width: none` for them further up
 * this file; this selector was simply more specific and won.
 */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cod-page__article:not(.cod-page__article--document) .cod-page__body,
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .cod-page__article:not(.cod-page__article--document) .cod-page__head {
	max-width: 70ch;
	margin-inline: auto;
}

.cod-page__article--document {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr);
	max-width: 1040px;
	margin-inline: auto;
}

.cod-page__article--document .cod-page__head { grid-column: 1 / -1; }

/* The contents rail. */

.cod-toc {
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
	padding: 1rem 1.15rem;
}

.cod-toc__title {
	margin: 0 0 .6rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cod-muted);
}

.cod-toc__list {
	margin: 0;
	padding: 0 0 0 1.15rem;
	display: grid;
	gap: .4rem;
	font-size: .92rem;
}

.cod-toc__list li::marker { color: var(--cod-muted); }

.cod-toc__list a {
	color: var(--cod-ink-soft);
	text-decoration: none;
	line-height: 1.35;
}

.cod-toc__list a:hover,
.cod-toc__list a:focus-visible {
	color: var(--cod-blue);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.cod-page__article--document {
		grid-template-columns: 15.5rem minmax(0, 1fr);
		align-items: start;
	}

	.cod-toc {
		position: sticky;
		/* Clear of the sticky header. */
		top: calc(var(--cod-header-height, 76px) + 1rem);
	}
}

/*
 * A heading you have just jumped to must not sit under the sticky header.
 */
.cod-prose h2[id] { scroll-margin-top: calc(var(--cod-header-height, 76px) + 1.5rem); }

/* --- The placeholder notice --------------------------------------------
 *
 * Rendered by Cod_Legal on any legal document that is not yet approved. It
 * was plain bold text in the flow of the page, which is the one thing it must
 * not look like: it is a warning ABOUT the text, not part of it.
 */

.cod-legal-placeholder {
	display: block;
	margin: 0 0 1.75rem;
	padding: .9rem 1.1rem;
	border: 1px solid #f3d9a4;
	border-left: 4px solid #d99b16;
	border-radius: var(--cod-radius-sm);
	background: #fdf7ea;
	color: #5c4409;
	font-size: .94rem;
	line-height: 1.55;
}

.cod-legal-placeholder strong { color: #7a5a0b; }
.cod-page__head { margin-bottom: 20px; }
.cod-page__title { margin: 0; }
.cod-page__meta { color: var(--cod-muted); font-size: var(--cod-step--1); }
.cod-page__figure { margin: 0 0 24px; }

.cod-empty {
	padding: clamp(32px, 6vw, 56px) 0;
	text-align: center;
}

/* --- Post grid --------------------------------------------------------- */

.cod-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.cod-post-card {
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	overflow: hidden;
	background: var(--cod-surface);
}

.cod-post-card__body { padding: 16px; }
.cod-post-card__title { font-size: var(--cod-step-1); margin-bottom: 6px; }
.cod-post-card__excerpt { color: var(--cod-ink-soft); font-size: var(--cod-step--1); }
.cod-post-card__more { font-weight: 700; font-size: var(--cod-step--1); }

@media (min-width: 640px) {
	/* auto-fit rather than a fixed count, so changing how many promises the
	   strip makes does not leave an orphan on the last row. */
	.cod-usp { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
	.cod-post-grid { grid-template-columns: repeat(2, 1fr); }
	.cod-age-gate__actions { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
	.cod-post-grid { grid-template-columns: repeat(3, 1fr); }
	.cod-timeline {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
	.cod-timeline__step {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 0 8px;
	}
	.cod-timeline__step:not(:last-child)::before {
		left: 50%;
		top: 7px;
		width: 100%;
		height: 2px;
	}
}

/* The age gate carries the logo rather than the store's name as text. It is
   the first thing a visitor sees, and it sits on a light panel. */
.cod-age-gate__logo {
	display: block;
	width: auto;
	height: clamp(26px, 7vw, 34px);
	margin: 0 auto;
}


/* --- Floating contact dock ---------------------------------------------
 *
 * WhatsApp and email, pinned to the right edge. A Cash on Delivery shop asks
 * a stranger to hand cash to another stranger at their door; the fastest way
 * to answer the doubt that follows is a person, so the way to reach one
 * follows the shopper down the page.
 *
 * Deliberately not a chat widget: no third-party script, no cookie, nothing
 * loaded from anyone else's server. Two links.
 */

.cod-dock {
	position: fixed;
	right: clamp(.75rem, 2vw, 1.5rem);
	bottom: clamp(.75rem, 4vh, 2rem);
	z-index: 880; /* Under the header (900) and the age gate. */
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.cod-dock__button {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--cod-radius);
	color: #fff;
	box-shadow: 0 6px 18px rgba(27, 22, 48, .18);
	transition: transform .15s ease, box-shadow .15s ease;
}

.cod-dock__button:hover,
.cod-dock__button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(27, 22, 48, .24);
	color: #fff;
}

/* WhatsApp's own green: a recognisable button is the point of the thing. */
.cod-dock__button--whatsapp { background: #4ac96b; }

.cod-dock__button--email { background: var(--cod-blue); }

@media (prefers-reduced-motion: reduce) {
	.cod-dock__button { transition: none; }
	.cod-dock__button:hover,
	.cod-dock__button:focus-visible { transform: none; }
}

@media (max-width: 640px) {
	/*
	 * Smaller on a phone, and clear of the thumb zone where the add-to-cart
	 * button lives on a product page.
	 */
	.cod-dock__button { width: 2.9rem; height: 2.9rem; }
	.cod-dock { bottom: 1rem; gap: .5rem; }
}


/* --- FAQ accordions ----------------------------------------------------
 *
 * <details>, so it opens without JavaScript, is keyboard-operable for free,
 * and the browser's own find-in-page reaches inside a closed one.
 */

.cod-faq {
	display: grid;
	gap: .5rem;
	margin: 0 0 1.75rem;
}

.cod-faq__item {
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	overflow: hidden;
}

.cod-faq__item[open] { border-color: var(--cod-blue); }

.cod-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1.1rem;
	font-weight: 600;
	color: var(--cod-navy);
	cursor: pointer;
	list-style: none;
}

.cod-faq__q::-webkit-details-marker { display: none; }

/*
 * A plus that becomes a minus, drawn from two bars. Clearer than a chevron at
 * this size: it says "there is more here" rather than "this points down".
 */
.cod-faq__q::after {
	content: "";
	flex: none;
	width: .85rem;
	height: .85rem;
	background:
		linear-gradient(var(--cod-blue), var(--cod-blue)) center / 100% 2px no-repeat,
		linear-gradient(var(--cod-blue), var(--cod-blue)) center / 2px 100% no-repeat;
	transition: transform .15s ease, opacity .15s ease;
}

/* Hide the vertical bar to leave a minus. */
.cod-faq__item[open] .cod-faq__q::after {
	background:
		linear-gradient(var(--cod-blue), var(--cod-blue)) center / 100% 2px no-repeat;
}

.cod-faq__q:hover { color: var(--cod-blue); }

.cod-faq__a {
	padding: 0 1.1rem 1rem;
	color: var(--cod-ink-soft);
}

.cod-faq__a > :first-child { margin-top: 0; }
.cod-faq__a > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.cod-faq__q::after { transition: none; }
}

/* --- Contact cards ------------------------------------------------------ */

.cod-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.cod-contact-card {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-contact-card__title {
	margin: 0 0 .35rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--cod-navy);
}

.cod-contact-card__body {
	margin: 0 0 .75rem;
	font-size: .92rem;
	color: var(--cod-muted);
}

.cod-contact-card__action { margin: 0; }

.cod-contact-card__action a {
	font-weight: 600;
	color: var(--cod-blue);
	overflow-wrap: anywhere;
}

/* --- About: lead paragraph and fact strip ------------------------------- */

.cod-lead {
	font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
	line-height: 1.55;
	color: var(--cod-ink);
}

.cod-factstrip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	margin: 1.75rem 0;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-line);
	overflow: hidden;
}

.cod-factstrip__item {
	display: grid;
	gap: .15rem;
	padding: 1rem 1.15rem;
	background: var(--cod-surface-soft);
}

.cod-factstrip__value {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--cod-blue);
}

.cod-factstrip__label {
	font-size: .82rem;
	color: var(--cod-muted);
}


/* --- Informational page hero -------------------------------------------
 *
 * An eyebrow saying what kind of page this is, the title, and one sentence
 * saying what it covers. A long page opens better that way than with a bare
 * H1 over a wall of headings -- the reader knows within a line whether they
 * are in the right place.
 *
 * Centred, and spanning both columns of the document grid, so the contents
 * rail starts below it rather than beside the title.
 */

.cod-page__head--hero {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(20px, 3vw, 32px);
	border-bottom: 1px solid var(--cod-line);
	text-align: center;
}

.cod-page__eyebrow {
	margin: 0 0 .5rem;
	color: var(--cod-blue);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.cod-page__head--hero .cod-page__title { margin: 0; }

.cod-page__standfirst {
	margin: .85rem auto 0;
	max-width: 42rem;
	color: var(--cod-muted);
	font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
	line-height: 1.6;
}


/* --- Contact: two columns ----------------------------------------------
 *
 * How to reach us, and the four things people write in about that they can
 * answer faster themselves. The second column is not filler: three of those
 * four have an answer one click away, and resolving them here saves the
 * customer a day of waiting.
 */

.cod-contact {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

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

.cod-contact__main > :first-child { margin-top: 0; }

.cod-contact__aside {
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface-soft);
}

.cod-contact__eyebrow {
	margin: 0 0 .3rem;
	color: var(--cod-blue);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cod-contact__aside-title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.cod-quickhelp { margin: 0; }

.cod-quickhelp dt {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cod-line);
	font-weight: 600;
	color: var(--cod-navy);
}

.cod-quickhelp dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cod-quickhelp dd {
	margin: .25rem 0 0;
	color: var(--cod-muted);
	font-size: .94rem;
	line-height: 1.55;
}

.cod-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.5rem;
}