/* ===========================================================================
   Cinnamon Catering — store screens.

   /shop, category listings, product pages, cart, checkout and account.
   WooCommerce's own stylesheets are dequeued in functions.php, so everything
   a store screen needs is here. Measurements are from the 1440px reference.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   /shop — a category tile grid, not a product browser.

   pt is 51px, not a scale step: it puts the search box top at y=152 and the
   first tile row at y=204 (live: 204). lg:pb is 235px for the same reason —
   live leaves 235px between the last tile label (bottom y=1564) and the
   footer, which lands the footer at 1799 and the page at 2082, exactly.
   ------------------------------------------------------------------------ */

.cc-shop {
	padding-top: 51px;
	padding-bottom: 48px;
}

@media (min-width: 640px) { .cc-shop { padding-bottom: 64px; } }
@media (min-width: 1024px) { .cc-shop { padding-bottom: 235px; } }

/* The storefront's bordered search field. Re-measured off the live site:
     box    244x32 at x=598,y=152 — border-box, 1px solid rgb(102,102,102),
            background TRANSPARENT (not a fill)
     type   Work Sans 14px/400 rgb(102,102,102), placeholder the same colour
     glyph  18px, ink x 609..625; placeholder ink begins x 636
   Offsets are set from the rendered INK, not the CSS box: live draws the
   magnifier from an icon font whose glyph carries its own side bearing, so
   copying live's declared `padding-left: 18px` puts the text 18px too far
   left. ml 9px on the icon + pl 10px on the input reproduce both. */

.cc-search {
	margin-inline: auto;
	width: 100%;
	max-width: 244px;
	position: relative;
	top: -1px;
}

.cc-search__icon { display: grid; place-items: center; }
.cc-search__icon .cc-glyph { position: relative; top: -1px; }

.cc-search__box {
	display: flex;
	align-items: center;
	height: 32px;
	border: 1px solid var(--cc-store-grey);
	background: transparent;
}

.cc-search__icon {
	pointer-events: none;
	margin-left: 9px;
	height: 18px;
	width: 18px;
	flex-shrink: 0;
	color: var(--cc-store-grey);
}

.cc-search__input {
	height: 100%;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0 18px 0 9px;
	font-family: var(--cc-font-sans);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1;
	color: var(--cc-store-grey);
	outline: none;
	appearance: none;
}

.cc-search__input::placeholder {
	color: var(--cc-store-grey);
	opacity: 1;
}

.cc-search__input::-webkit-search-cancel-button { appearance: none; }

/* Tiles: three 387px columns on a 396.5px pitch, so the gutter is only
   ~9.5px — much tighter than the site's other grids. Row pitch 277 =
   200 image + 14 gap + 37 label + 26 row gap. */

.cc-tiles {
	margin-top: 19.6px;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 9.5px;
	row-gap: 26px;
}

@media (min-width: 640px) { .cc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cc-tiles { grid-template-columns: repeat(3, 1fr); } }

.cc-tile { display: block; }

.cc-tile__media {
	aspect-ratio: 387 / 200;
	overflow: hidden;
	background: var(--cc-sand);
	/* The live tiles' corners: 10% of each side, so ~39px across and 20px
	   down - elliptical, as a percentage radius is. */
	border-radius: 10%;
}

.cc-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--cc-ease-out-expo);
}

/* No hover effect on the live tiles - no zoom, the label stays black. */

/* Live renders Cormorant Garamond 30px, weight 400, letter-spacing NORMAL,
   TRUE BLACK — not the warm --cc-ink — with line-height normal, giving a 37px
   line box whose top sits 14px under the image. font-weight is explicit
   because the base layer puts 500 on h2. */
.cc-tile__label {
	margin-top: 14px;
	text-align: center;
	font-family: var(--cc-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: normal;
	color: #000;
	transition: color 0.2s;
}



/* ---------------------------------------------------------------------------
   Search results — printed-menu leader rows, the idiom the rest of the site
   uses. (Divergence from the previous platform, which rendered product cards
   here: behaviour matches, presentation does not.)
   ------------------------------------------------------------------------ */

.cc-results { margin-top: 40px; }

.cc-results__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.cc-results__count {
	font-family: var(--cc-font-display);
	font-size: 19px;
	font-style: italic;
	color: var(--cc-muted);
}

.cc-results__empty {
	margin-top: 32px;
	border-top: 1px solid var(--cc-line);
	border-bottom: 1px solid var(--cc-line);
	padding-block: 80px;
	text-align: center;
}

.cc-results__empty-title {
	font-family: var(--cc-font-display);
	font-size: 24px;
	color: var(--cc-muted);
}

.cc-results__empty-note {
	margin: 12px auto 0;
	max-width: 24rem;
	font-size: 15.5px;
	color: var(--cc-muted);
}

/* ---------------------------------------------------------------------------
   Product listing — the printed-menu row: name — leader — price in DM Sans
   terracotta, with an outline "Add to order".
   ------------------------------------------------------------------------ */

.cc-listing {
	margin-top: 32px;
	list-style: none;
	border-top: 1px solid var(--cc-line);
}

.cc-listing__item {
	border-bottom: 1px solid var(--cc-line);
	padding-block: 18px;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

/*
 * The dish photo on a listing row.
 *
 * 174x90 keeps the 387x200 crop's proportions exactly, so the registered size
 * is displayed rather than re-squashed. flex-shrink is off: without it the
 * photo is the first thing to collapse when a long dish name arrives, and the
 * rows stop lining up with each other.
 */
.cc-listing__media {
	flex: 0 0 auto;
	display: block;
	width: 174px;
	overflow: hidden;
	background: var(--cc-line);
}

.cc-listing__image {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
	transition: transform 0.4s ease-out;
}

.cc-listing__item:hover .cc-listing__image { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.cc-listing__image,
	.cc-listing__item:hover .cc-listing__image { transition: none; transform: none; }
}

/* On a phone the row is already tight; a photo half the width of the screen
   pushes the name and price into two cramped columns. */
@media (max-width: 599px) {
	.cc-listing__media { width: 96px; }
	.cc-listing__image { height: 50px; }
}

.cc-listing__body { flex: 1 1 auto; min-width: 0; }

.cc-listing__name {
	font-family: var(--cc-font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--cc-ink);
	transition: color 0.2s;
}

.cc-listing__item:hover .cc-listing__name { color: var(--cc-cinnamon-700); }

.cc-listing__desc {
	margin-top: 6px;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--cc-muted);
}

/* `serves` is literally "Each" / "Per person", so the meta line de-dupes it
   against the unit rather than printing "Each · Each". */
.cc-listing__meta {
	margin-top: 8px;
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

/*
 * ⚠ A FIXED width, not `auto`.
 *
 * This column was `flex: 0 0 auto`, so its width came from its own content —
 * and "$21.50" is wider than "$8.00". Every row therefore started its price
 * and its button at a different x, and the Add to order buttons did not line
 * up down the page. Nothing about the buttons themselves was wrong; the
 * column they sit in was ragged.
 *
 * The buttons are stretched to fill it so they are all identical, which is
 * also what makes a column of them read as a column.
 */
.cc-listing__aside {
	flex: 0 0 176px;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.cc-listing__aside .cc-btn {
	width: 100%;
}

/* The heart stays a small mark at the top right, not a full-width block. */
.cc-listing__aside .cc-fav {
	align-self: flex-end;
}

@media (max-width: 600px) {
	.cc-listing__aside {
		flex-basis: 132px;
	}
}

.cc-price {
	font-family: var(--cc-font-accent);
	font-size: 17.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cc-cinnamon-600);
	white-space: nowrap;
}

.cc-price__unit {
	display: block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

/* The login price gate replaces the price with a prompt, never with a blank. */
.cc-price--gated {
	font-family: var(--cc-font-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

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

.cc-product {
	padding-top: 48px;
	padding-bottom: 96px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

@media (min-width: 900px) {
	.cc-product { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/*
 * ⚠ NO BACKGROUND, AND DO NOT STRETCH.
 *
 * The media column is a grid item, so it was stretching to the height of the
 * detail column beside it — and the sand background filled the difference.
 * On a landscape photograph that reads as a portrait panel with the picture
 * pushed to the top and a block of cream underneath it.
 */
.cc-product__media {
	align-self: start;
	background: transparent;
}

.cc-product__media img {
	display: block;
	width: 100%;
	height: auto;
}

.cc-product__stock {
	font-family: var(--cc-font-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-sage-600);
	margin: 20px 0 0;
}

.cc-product__stock--out { color: var(--cc-cinnamon-700); }

.cc-product__dietary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.cc-product__cat {
	font-family: var(--cc-font-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cc-cinnamon-600);
}

.cc-product__title {
	margin-top: 12px;
	font-family: var(--cc-font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
}

.cc-product__price {
	margin-top: 18px;
	font-family: var(--cc-font-accent);
	font-size: 24px;
	font-weight: 700;
	color: var(--cc-cinnamon-600);
}

.cc-product__desc {
	margin-top: 22px;
	font-size: 17.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--cc-charcoal);
}

.cc-product__facts {
	margin-top: 26px;
	border-top: 1px solid var(--cc-line);
	list-style: none;
}

.cc-product__fact {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px;
	border-bottom: 1px solid var(--cc-line);
	font-size: 15.5px;
}

.cc-product__fact dt {
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-product__fact dd { margin: 0; color: var(--cc-ink); }

.cc-dietary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
	padding: 3px 9px;
	border: 1px solid var(--cc-sage-400);
	color: var(--cc-sage-600);
	font-family: var(--cc-font-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cc-addform {
	margin-top: 28px;
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}

/* A product's required choice ("Sandwich type"), on its own row above the
 * quantity and the button: product-choices.php. */
.cc-choice {
	flex: 1 0 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.cc-choice__select {
	min-width: 260px;
	max-width: 100%;
	height: 44px;
	padding: 0 36px 0 12px;
	border: 1px solid var(--cc-line);
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A15C4B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
	font-family: var(--cc-font-sans);
	font-size: 16.5px;
	color: var(--cc-ink);
	appearance: none;
}

.cc-choice__select:focus {
	outline: none;
	border-color: var(--cc-cinnamon-600);
}

/*
 * ⚠ THE CONTROL SIZES TO ITSELF, NOT TO THE COLUMN.
 *
 * .cc-qty is a flex column and .cc-qty__control a flex row, so the row
 * stretched to the full width of the product detail column: a minus button, a
 * 56px field, a plus button, and then 400px of empty bordered box trailing off
 * to the right. align-items keeps the row at its content width; max-width
 * stops it outgrowing a narrow screen.
 */
.cc-qty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.cc-qty__label {
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-qty__control {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--cc-line);
	height: 44px;
	max-width: 100%;
}

.cc-qty__btn {
	width: 40px;
	height: 100%;
	font-size: 19px;
	color: var(--cc-cinnamon-600);
	line-height: 1;
}

.cc-qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cc-qty__input {
	width: 56px;
	height: 100%;
	border: 0;
	border-inline: 1px solid var(--cc-line);
	text-align: center;
	font-variant-numeric: tabular-nums;
	background: transparent;
	appearance: textfield;
	-moz-appearance: textfield;
}

.cc-qty__input::-webkit-outer-spin-button,
.cc-qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.cc-minimum-note {
	margin-top: 10px;
	font-size: 15px;
	color: var(--cc-muted);
	flex-basis: 100%;
}

/* ---------------------------------------------------------------------------
   Cart and checkout — hairline rules and numbered Cormorant steps, not boxed
   cards. The 01/02/03 markers are the shared SectionHeading idiom.
   ------------------------------------------------------------------------ */

.cc-store-page {
	padding-top: 56px;
	padding-bottom: 96px;
}

.cc-section-heading {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 1px solid var(--cc-line);
	padding-bottom: 12px;
	margin-bottom: 24px;
}

.cc-section-heading__num {
	font-family: var(--cc-font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--cc-cinnamon-600);
	font-variant-numeric: tabular-nums;
}

.cc-section-heading__text {
	font-family: var(--cc-font-display);
	font-size: 26px;
	font-weight: 400;
	color: var(--cc-ink);
}

.cc-cart { margin-top: 40px; }

.cc-cart__table {
	width: 100%;
	border-collapse: collapse;
}

.cc-cart__table th {
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
	text-align: left;
	font-weight: 500;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-cart__table td {
	padding-block: 18px;
	border-bottom: 1px solid var(--cc-line);
	vertical-align: top;
}

.cc-cart__name {
	font-family: var(--cc-font-display);
	font-size: 20px;
	font-weight: 400;
}

.cc-cart__thumb {
	width: 72px;
	height: 54px;
	object-fit: cover;
}

/*
 * ⚠ The `th` needs naming explicitly or the TOTAL heading loses.
 *
 * `.cc-cart__table th` above sets text-align: left and scores (0,1,1);
 * `.cc-cart__right` on its own scores (0,1,0) and is outranked. The Total
 * heading carries the class in the markup and still sat at the LEFT of a
 * column of right-aligned money — the heading and its figures pulling in
 * opposite directions.
 */
.cc-cart__right,
.cc-cart__table th.cc-cart__right {
	text-align: right;
}

.cc-totals {
	margin-top: 32px;
	margin-left: auto;
	max-width: 420px;
	width: 100%;
}

/*
 * ⚠ Rules go BETWEEN rows, as a border-top on every row after the first —
 * never as a border-bottom on each row.
 *
 * With border-bottom on every row and a border-top on the grand total, the
 * last ordinary row's bottom rule and the grand total's top rule both drew,
 * 6px apart and in different colours: a grey hairline immediately above a
 * terracotta one. Separator-between-siblings cannot double, because there is
 * exactly one border per gap by construction.
 */
.cc-totals__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-block: 10px;
	font-size: 17.5px;
}

.cc-totals__row + .cc-totals__row {
	border-top: 1px solid var(--cc-line);
}

.cc-totals__row--grand,
.cc-totals__row + .cc-totals__row--grand {
	border-top: 1px solid var(--cc-cinnamon-600);
	margin-top: 6px;
	padding-top: 16px;
	font-family: var(--cc-font-accent);
	font-size: 19px;
	font-weight: 700;
	color: var(--cc-cinnamon-600);
}

/* GST is shown as a component of the total, not added to it — prices are
   GST-inclusive, so this line reads "includes GST $x". */
.cc-totals__gst {
	font-size: 15px;
	color: var(--cc-muted);
	text-align: right;
	padding-top: 8px;
}

.cc-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 24px;
}

@media (min-width: 720px) {
	.cc-fields { grid-template-columns: 1fr 1fr; }
	.cc-field--full { grid-column: 1 / -1; }
}

.cc-field { display: flex; flex-direction: column; gap: 6px; }

.cc-field__label {
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-field__input,
.cc-field select,
.cc-field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	background: transparent;
	padding: 10px 2px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	color: var(--cc-ink);
	outline: none;
	border-radius: 0;
	appearance: none;
}

.cc-field__input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
	border-bottom-color: var(--cc-cinnamon-600);
}

.cc-field textarea { min-height: 96px; resize: vertical; }

.cc-field__error {
	font-size: 15px;
	color: #9B2C2C;
}

.cc-radio-row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.cc-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17.5px;
}

.cc-checkout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	margin-top: 44px;
}

@media (min-width: 1000px) {
	.cc-checkout__grid { grid-template-columns: 1.4fr 1fr; gap: 72px; }
}

/*
 * ⚠ NOT position: sticky.
 *
 * The summary used to stick at top: 24px, so scrolling the checkout moved the
 * form column while the payment column stayed put — and once the payment
 * methods and the Place order button are taller than the viewport, the bottom
 * of that column becomes unreachable on a laptop. The page scrolls as one
 * document; both columns move together.
 */
.cc-checkout__summary {
	align-self: start;
}

.cc-summary__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	border-bottom: 1px solid var(--cc-line);
	font-size: 15.5px;
}

.cc-summary__item-qty {
	color: var(--cc-muted);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce's checkout fields.
   The two-up arrangement comes from its own form-row-first / form-row-last
   classes rather than from a grid wrapper — wrapping its output in a grid put
   the entire field block into a single cell. */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 24px;
}

@media (min-width: 720px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce-shipping-fields__field-wrapper .form-row-wide,
	.woocommerce-additional-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------ Delivery date and window
 *
 * ⚠ These two rows ALREADY carry form-row-first / form-row-last — the markup
 * has been saying "these belong side by side" all along — and they still sat
 * one under the other at full width. Those classes do nothing on their own:
 * every two-up pair on this checkout gets its arrangement from the grid on the
 * field WRAPPER, and this pair is printed by the plugin into
 * .cc-checkout-schedule, which is not one of WooCommerce's wrappers and so was
 * never given one. The result was a stacked pair sitting directly below a name
 * row that IS paired, which reads as two unrelated fields rather than one
 * delivery slot.
 *
 * The heading above and the minimum note below span both columns, exactly as
 * form-row-wide does in the billing block.
 */
@media (min-width: 720px) {
	.cc-checkout-schedule {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 24px;
	}

	.cc-checkout-schedule > .cc-section-heading,
	.cc-checkout-schedule > .cc-minimum-note,
	.cc-checkout-schedule > .form-row-wide {
		grid-column: 1 / -1;
	}
}

/*
 * ⚠ A date input is not the same height as a select standing next to it.
 * Chrome reserves room for the picker glyph inside the control, which made the
 * date field 46.8px against the window select's 44.8px. Stacked, nobody could
 * see it; side by side it is a 2px step between two fields that are meant to
 * read as one control. Both pinned to the same box so the pairing above cannot
 * reintroduce it.
 */
.cc-checkout-schedule input.input-text,
.cc-checkout-schedule select {
	box-sizing: border-box;
	height: 45px;
}

/* The delivery time: an hour and a quarter hour, side by side in the right
   column, under one label (delivery.php). */
.cc-delivery-time__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-delivery-time__pair .form-row { margin: 0; padding: 0; }
.cc-delivery-time__pair select { width: 100%; }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-family: var(--cc-font-display);
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 14px;
}

/*
 * ⚠ "Billing details" is hidden because it stopped being true. That heading is
 * WooCommerce's, and it used to sit above a full billing address; the address
 * has since moved to the "Where" step (cinnamon_single_address_checkout in
 * delivery.php), leaving it standing over a name, a phone number and an email.
 * The step is already titled "01 Your details" by the theme, which is both
 * accurate and the heading the customer actually reads.
 */
.woocommerce-billing-fields > h3 {
	display: none;
}

/* The "Ship to a different address?" toggle is a heading with a checkbox in
   it; keep them on one line and readable. */
/*
 * ⚠ HIDDEN, because there is no longer a billing address for delivery to
 * differ FROM. The checkout collects one address and it lives in this
 * step (see cinnamon_single_address_checkout in delivery.php), so the
 * toggle asks a question with only one answer — and the step already has
 * the theme's own "02 Where" heading above it, which is what the customer
 * reads. The checkbox stays in the DOM and stays checked; WooCommerce
 * needs its value to keep printing the delivery fields.
 */
.woocommerce-shipping-fields h3#ship-to-different-address {
	display: none;
}

.woocommerce-shipping-fields h3#ship-to-different-address label {
	font-family: var(--cc-font-display);
	font-size: 19px;
	font-weight: 400;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cc-ink);
}

/* The coupon prompt sits above everything; it is not part of this design's
   voice, so it is quiet rather than a banner. */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border-left: 0;
	padding: 0 0 18px;
	font-size: 15.5px;
	color: var(--cc-muted);
}

/* Payment methods. WooCommerce owns this markup (see the note in
   review-order.php), so it is styled by its own class names rather than
   re-rendered. */

.woocommerce-checkout-payment { margin-top: 28px; }

.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cc-line);
}

/*
 * A radio in its own column, everything else in the second one.
 *
 * The label used to be an inline-flex row, which is fine until a gateway
 * returns card-brand icons — WooCommerce puts those INSIDE the label, so
 * eight <img> flex items appeared beside the text and squeezed it into a
 * narrow column: "Pay with Eway" came out stacked over three lines. The text
 * is an anonymous flex item and cannot be told not to shrink, so the label is
 * ordinary block flow again and the icons are inline, where they wrap after
 * the words instead of crushing them.
 */
.wc_payment_methods > li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 10px;
	border-bottom: 1px solid var(--cc-line);
	padding-block: 14px;
}

.wc_payment_methods > li > input[type="radio"] {
	grid-column: 1;
	margin-top: 7px;
}

.wc_payment_methods label {
	grid-column: 2;
	display: block;
	font-family: var(--cc-font-display);
	font-size: 20px;
	line-height: 1.3;
	cursor: pointer;
}

.wc_payment_methods label img {
	display: inline-block;
	height: 22px;
	width: auto;
	margin: 0 0 0 6px;
	vertical-align: middle;
}

.wc_payment_methods .payment_box {
	grid-column: 2;
	margin-top: 8px;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--cc-muted);
}

.wc_payment_methods .payment_box p { margin: 0; }

/*
 * The delivery-zone chooser.
 *
 * WooCommerce renders it as a plain <ul>, which inherits the document's list
 * bullets — so the zones showed up as a bulleted list of radio buttons in the
 * middle of the order summary.
 */
#shipping_method {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

#shipping_method li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 3px;
}

#shipping_method label { margin: 0; cursor: pointer; }

.cc-place-order { width: 100%; margin-top: 20px; }

.woocommerce-terms-and-conditions-wrapper {
	margin-top: 14px;
	font-size: 15.5px;
	color: var(--cc-muted);
}

/* The "privacy policy" link in WooCommerce's privacy sentence - under the
 * checkout's Place order and the account page's Register - and in the
 * terms line. The site-wide `a { color: inherit }` made it the same colour
 * as the sentence and gave it no underline, so it could not be seen to be a
 * link; the block checkout, which does not use this theme's reset, drew it
 * in the browser's default blue. Brand terracotta and underlined, on all of
 * them. */
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.wc-block-checkout__terms a,
.wc-block-components-checkbox__label a {
	color: var(--cc-cinnamon-600);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s;
}

.woocommerce-privacy-policy-text a:hover,
.woocommerce-terms-and-conditions-wrapper a:hover,
.wc-block-checkout__terms a:hover,
.wc-block-components-checkbox__label a:hover {
	color: var(--cc-cinnamon-700);
}

/* WooCommerce's blocking overlay during a checkout AJAX update.
 *
 * ⚠ WITH A SPINNER, AND WORDS ON THE CHECKOUT. WooCommerce draws the spinner
 * with its own stylesheet, which this theme does not load, so pressing Place
 * order greyed the whole form and did nothing visible for the seconds the
 * gateway took - the business reported it as "the screen just greys out".
 * The ring is drawn here; the checkout form's overlay also says what is
 * happening, because a card payment can take long enough to doubt. */
.blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.72) !important;
	opacity: 1 !important;
}

.blockUI.blockOverlay::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--cc-line);
	border-top-color: var(--cc-cinnamon-600, #A0522D);
	border-radius: 50%;
	animation: cc-spin 0.8s linear infinite;
}

/* ⚠ ONLY WHILE THE ORDER IS BEING PLACED. WooCommerce also greys the order
 * summary and the payment box - both inside form.checkout - every time it
 * recalculates after an address change, so a plain `form.checkout` selector
 * put "Placing your order…" on screen when nothing was being placed. On Place
 * order, and only then, WooCommerce adds .processing to the form and blocks
 * the form itself, so its overlay is a direct child. A recalculation keeps
 * the plain spinner, inside the box it is updating. */
form.checkout.processing > .blockUI.blockOverlay::before {
	position: fixed;
	top: 45%;
}

form.checkout.processing > .blockUI.blockOverlay::after {
	content: "Placing your order…";
	position: fixed;
	top: 45%;
	left: 50%;
	transform: translate(-50%, 32px);
	font-family: var(--cc-font-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-ink, #1F1A17);
}

@keyframes cc-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Account — Cormorant nav links with the terracotta underline (the same device
   as the shop category index), and hairline rows instead of boxed cards.
   ------------------------------------------------------------------------ */

.cc-account { padding-top: 48px; padding-bottom: 96px; }

.cc-account__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	border-bottom: 1px solid var(--cc-line);
	padding-bottom: 14px;
	margin-bottom: 36px;
	list-style: none;
}

/*
 * The account bar: the section tabs on the left, Log out as a button on the
 * right. The rule and the spacing move from the list to the bar so the
 * button sits on the same baseline as the tabs and inside the same rule.
 * Log out is outside the <ul> on purpose — `.cc-account__nav a` would
 * otherwise dress it as a Cormorant tab and beat `.cc-btn` on specificity.
 */
.cc-account__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	border-bottom: 1px solid var(--cc-line);
	padding-bottom: 14px;
	margin-bottom: 36px;
}

.cc-account__bar .cc-account__nav--in-bar {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	flex: 1 1 auto;
}

.cc-account__logout { flex: 0 0 auto; }

.cc-account__nav a {
	font-family: var(--cc-font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--cc-ink);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.cc-account__nav a:hover { color: var(--cc-cinnamon-700); }

/* WooCommerce marks the current endpoint with `is-active`, so both its class
   and ours are honoured — the template supplies whichever WooCommerce says. */
.cc-account__nav .is-active a,
.cc-account__nav li.is-active > a {
	color: var(--cc-cinnamon-600);
	border-bottom-color: var(--cc-cinnamon-600);
}

/* The account content column sits beside the navigation above it.
 *
 * ⚠ WooCommerce's OWN stylesheets are dequeued site-wide (see
 * `woocommerce_enqueue_styles` in functions.php), because this theme is a 1:1
 * rebuild and WooCommerce's default look is not it. That is a deliberate
 * trade with a standing cost: every WooCommerce component this theme does not
 * name renders as raw browser default. The Orders & invoices screen is the
 * one customers actually live in, so its table, its actions and its pagination
 * are all named here rather than left to chance. */
.woocommerce-MyAccount-content { font-size: 17.5px; }

.woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.woocommerce-MyAccount-content th {
	text-align: left;
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
	font-weight: 500;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cc-line);
}

.woocommerce-MyAccount-content td {
	padding-block: 14px;
	border-bottom: 1px solid var(--cc-line);
	vertical-align: middle;
}

/* ---------------------------------------------------- Orders & invoices */

/* Money and the action buttons belong on the right; everything else reads
   from the left. Without WooCommerce's CSS these all sat left, so the totals
   column could not be scanned down. */
/*
 * ⚠ The `th` half has to be named through the table, or the headings lose.
 * `.woocommerce-MyAccount-content th` sets text-align:left at (0,1,1) and
 * outranks these class selectors at (0,1,0) — so TOTAL and ACTIONS sat at
 * the LEFT of columns whose contents are right-aligned. The cells, being
 * td, were never caught by that rule and stayed right, which is why only
 * the headings drifted.
 */
.woocommerce-orders-table__header-order-total,
.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__header-order-actions,
.woocommerce-orders-table__cell-order-actions,
.woocommerce-MyAccount-content th.woocommerce-orders-table__header-order-total,
.woocommerce-MyAccount-content th.woocommerce-orders-table__header-order-actions {
	text-align: right;
}

/*
 * ⚠ These WRAP; they used to be nowrap and the third one was cut in half.
 * A pending order offers Pay, View and Cancel — around 280px of button in a
 * column that does not have it. Held on one line, the row grew wider than
 * the table, the table's own overflow-x took over, and CANCEL was sliced
 * mid-word at the edge with the rest behind a horizontal scrollbar.
 *
 * Wrapping costs a little row height on narrow screens and shows every
 * action; scrolling hid one. The gap replaces the margin the buttons used
 * to carry, so it applies between rows of them as well as along one.
 */
.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	white-space: normal;
}

/* Two actions on one row (View, Order again) must not touch. */
/* The flex `gap` above spaces these now, in both axes. */
.woocommerce-orders-table__cell-order-actions .button + .button,
.woocommerce-orders-table__cell-order-actions .cc-btn + .cc-btn {
	margin-left: 0;
}

/* --------------------------------------- Actions on a received order
 *
 * ⚠ The same "must not touch" rule as the orders table above, needed a second
 * time because the thank-you page assembles its actions differently: PAY and
 * CANCEL share one table cell, while "Order this again" and the tax-invoice
 * link each sit in their own bare <p> — and a bare <p> is flattened to
 * margin 0 by the reset.
 *
 * With nothing holding them apart the four filled blocks ran together into one
 * terracotta mass: PAY and CANCEL 1px apart, the two paragraph buttons 0px.
 * Like the notice button, this was invisible while `.button` was unstyled text
 * and only took on a shape once the filled-button rule was repaired.
 */
.woocommerce-order-details .button + .button,
.woocommerce-order-details .cc-btn + .cc-btn {
	margin-left: 8px;
}

.woocommerce-order-details > p {
	margin-top: 8px;
}

/* ------------------------------------------ The received order, formatted
 *
 * ⚠ This page was WooCommerce's default template wearing the site's fonts and
 * nothing else — the one page every customer sees immediately after paying.
 * It arrived as a bulleted list of facts, a table 569px wide inside a 1180px
 * column, and centred column headings sitting over left-aligned figures.
 *
 * Nothing here invents an idiom: the table is the one already used by the
 * account screens above (full width, hairline rules, accent-caps headings),
 * so the order a customer reads here and the order they read under My
 * account are the same object described the same way.
 */

/* The sentence that confirms the money is committed. It was body copy in a
   run of bullets; it is the first thing they look for. */
.woocommerce-order > .woocommerce-notice--success {
	font-family: var(--cc-font-display);
	font-size: 28px;
	line-height: 1.25;
	color: var(--cc-ink);
	margin: 0 0 22px;
}

/*
 * ⚠ The overview is a <ul>, and bullets appear NOWHERE else on this site.
 * These four are label-and-value pairs, not a list of things, so they are set
 * as pairs — the same caps-label-over-value used by every field on the
 * checkout the customer has just come from.
 */
.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 18px 28px;
	margin: 0 0 8px;
	padding: 22px 0;
	border-top: 1px solid var(--cc-line);
	border-bottom: 1px solid var(--cc-line);
}

.woocommerce-order-overview li {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

/* WooCommerce wraps each value in <strong>; it is the value, not emphasis. */
.woocommerce-order-overview li strong {
	font-family: var(--cc-font-sans);
	font-size: 18.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-ink);
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-column__title {
	font-family: var(--cc-font-display);
	font-size: 22px;
	font-weight: 400;
	margin: 34px 0 0;
}

/*
 * The table had no width, so it shrank to its content — 569px of receipt
 * adrift in a 1180px column. Same rules as .woocommerce-MyAccount-content.
 */
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.woocommerce-table--order-details th {
	text-align: left;
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
	font-weight: 500;
	padding-block: 0 10px;
	border-bottom: 1px solid var(--cc-line);
}

.woocommerce-table--order-details td {
	padding-block: 14px;
	border-bottom: 1px solid var(--cc-line);
	vertical-align: middle;
}

.woocommerce-table--order-details tfoot th {
	padding-block: 14px;
	border-bottom: 1px solid var(--cc-line);
	white-space: nowrap;
}

/*
 * ⚠ Money right, everything else left — and the selector has to tell them
 * apart, because this table's footer mixes them. Subtotal, Shipping and Total
 * are amounts; "Bank transfer (EFT)", the delivery slot and the PAY / CANCEL
 * buttons share the same column and must not be dragged to the right with
 * them. Only the money rows carry a .woocommerce-Price-amount, so that is
 * what selects them.
 *
 * ⚠ `.product-total`, NOT `.woocommerce-table__product-total`. WooCommerce
 * names the two halves of this one column differently: the body cell is
 * woocommerce-table__product-TOTAL, while the header above it is
 * woocommerce-table__product-TABLE. Selecting the __-prefixed name catches
 * the figures and misses the heading, which is how "TOTAL" ended up sitting
 * at the far left of a column of right-aligned money. Both carry the plain
 * `product-total`, so that is the one that describes the column.
 */
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td:has(.woocommerce-Price-amount) {
	text-align: right;
}

/* The last row closes the table; a rule under it floats free. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

.woocommerce-columns--addresses {
	gap: 0 40px;
	margin-top: 6px;
}

/* An address is a fact, not an aside — WooCommerce's <address> arrives
   italic, which reads as a quotation. */
.woocommerce-columns--addresses address {
	font-style: normal;
	line-height: 1.7;
	color: var(--cc-ink);
	margin-top: 10px;
}

/* ------------------------------------------ How to pay, on the thank-you page
 *
 * ⚠ THE ONLY THING ON THIS PAGE THE CUSTOMER STILL HAS TO ACT ON, and it was
 * the least considered thing on it: two bare <p>s with margin 0, no ground and
 * no emphasis, running the full 1180px between two blocks that had been styled.
 * The order summary above them is finished business; this is the instruction
 * that gets the invoice paid.
 *
 * WooCommerce prints the instructions and the plugin prints the reference, from
 * two different hooks, so they are picked up together as the overview's
 * following siblings rather than by a wrapper neither of them has. They share
 * one ground so they read as one panel, with the top and bottom padding put on
 * the first and last so the join between them is invisible.
 *
 * The idiom is the site's own notice — cinnamon-50 behind a terracotta rule —
 * because that is what this page already uses to mean "read this one".
 */
.woocommerce-order-overview ~ p {
	margin: 0;
	padding: 0 18px;
	background: var(--cc-cinnamon-50);
	border-left: 3px solid var(--cc-cinnamon-600);
}

.woocommerce-order-overview + p {
	margin-top: 24px;
	padding-top: 16px;
}

.cinnamon-bacs-reference {
	padding-bottom: 18px;
	margin-bottom: 8px;
}

/* The reference and the amount are what gets typed into a banking app. */
.cinnamon-bacs-reference strong {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--cc-font-accent);
	font-size: 14.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The account tables are the one place a long order reference can push the
   layout wider than the column. Scroll the TABLE, never the page. */
.woocommerce-MyAccount-content .shop_table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

.woocommerce-MyAccount-content .shop_table > thead,
.woocommerce-MyAccount-content .shop_table > tbody,
.woocommerce-MyAccount-content .shop_table > tfoot {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/*
 * On a phone the table stops being a table.
 *
 * WooCommerce emits a `data-title` on every cell precisely so this is
 * possible, and its own stylesheet uses it — but that stylesheet is dequeued,
 * so without this the orders table stayed five columns wide on a 390px screen
 * and every row overflowed.
 */
@media (max-width: 640px) {
	.woocommerce-MyAccount-content .shop_table_responsive > thead {
		display: none;
	}

	.woocommerce-MyAccount-content .shop_table_responsive > tbody,
	.woocommerce-MyAccount-content .shop_table_responsive > tbody > tr,
	.woocommerce-MyAccount-content .shop_table_responsive > tbody > tr > td {
		display: block;
		width: auto;
	}

	.woocommerce-MyAccount-content .shop_table_responsive > tbody > tr {
		border-bottom: 1px solid var(--cc-line);
		padding-block: 8px;
	}

	.woocommerce-MyAccount-content .shop_table_responsive > tbody > tr > td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border-bottom: 0;
		padding-block: 6px;
		text-align: right;
	}

	.woocommerce-MyAccount-content .shop_table_responsive > tbody > tr > td::before {
		content: attr(data-title);
		font-family: var(--cc-font-accent);
		font-size: 14px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--cc-muted);
		text-align: left;
	}
}

/* Pagination between pages of orders. */
.woocommerce-pagination ul,
.woocommerce-Pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span.current,
.woocommerce-Pagination a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--cc-line);
	font-family: var(--cc-font-accent);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cc-cinnamon-700);
}

.woocommerce-pagination span.current {
	border-color: var(--cc-cinnamon-600);
	background: var(--cc-cinnamon-50);
}

/* The "no orders yet" panel, which is a .woocommerce-info without its CSS. */
.woocommerce-MyAccount-content .woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--cc-cinnamon-50);
	padding: 18px 20px;
	font-size: 17.5px;
}

/*
 * The account screens' buttons are styled by the shared button rule in
 * style.css, which now lists WooCommerce's own class names alongside .cc-btn.
 *
 * This used to be a hand-copied duplicate of that rule with a comment saying
 * it had to be kept in step by hand — and it drifted, because the copy covered
 * only the account area while every other WooCommerce button on the site went
 * unstyled. Only the submit buttons that carry no WooCommerce class need
 * naming here.
 */
.woocommerce-MyAccount-content button[type="submit"]:not(.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cc-font-accent);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 11px 20px;
	border: 1px solid var(--cc-cinnamon-600);
	color: var(--cc-cinnamon-700);
	background: transparent;
	cursor: pointer;
}

.woocommerce-MyAccount-content button[type="submit"]:not(.button):hover {
	background: var(--cc-cinnamon-50);
	color: var(--cc-cinnamon-700);
}

/* Login and register, and the account forms generally. */
.woocommerce form .form-row { margin-bottom: 18px; }

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	background: transparent;
	padding: 10px 2px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	color: var(--cc-ink);
	border-radius: 0;
	outline: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-bottom-color: var(--cc-cinnamon-600);
}

/* ------------------------------------------------------ Show / hide password
 *
 * ⚠ The toggle is WooCommerce's OWN <button class="show-password-input">, and
 * its JavaScript already works — woocommerce.js flips the input type and
 * toggles `.display-password` on click. What was missing was every pixel of
 * it: the icon lives in woocommerce.css, which this theme deliberately does
 * not load, so the button rendered 0x0 with `content: none` and the eye was
 * invisible. The markup and the behaviour were both already there.
 *
 * Drawn as a masked SVG rather than taken from WooCommerce's icon font, for
 * the same reason the fonts are self-hosted: no second request and no
 * dependency on a stylesheet we are not loading. Masking with `currentColor`
 * is what lets the hover state reach for the brand terracotta.
 */
.woocommerce form .form-row .password-input {
	display: block;
	position: relative;
}

/* Room for the eye, so a long password never runs underneath it. */
.woocommerce form .form-row .password-input input.input-text {
	padding-right: 34px;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	/*
	 * The wrapper holds only the input, not the label, so 100% here centres
	 * the eye on the text rather than on the whole labelled row.
	 */
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cc-muted);
	cursor: pointer;
}

.woocommerce .show-password-input::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.4 12 5.4 22.2 12 22.2 12 18.6 18.6 12 18.6 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.4 12 5.4 22.2 12 22.2 12 18.6 18.6 12 18.6 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

.woocommerce .show-password-input:hover,
.woocommerce .show-password-input:focus-visible {
	color: var(--cc-cinnamon-600);
}

/*
 * Struck through while the password is on screen. The icon has to describe the
 * state a click will LEAVE, and a plain eye beside readable text reads as
 * "still hidden" — the wrong way round.
 */
.woocommerce .show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A9.6 9.6 0 0 1 12 6c6.6 0 10.2 6 10.2 6a17.9 17.9 0 0 1-3.5 4.2'/%3E%3Cpath d='M6.4 7.9A17.6 17.6 0 0 0 1.8 12S5.4 18 12 18a9.5 9.5 0 0 0 3.9-.8'/%3E%3Cpath d='M9.8 9.9a3.2 3.2 0 0 0 4.5 4.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A9.6 9.6 0 0 1 12 6c6.6 0 10.2 6 10.2 6a17.9 17.9 0 0 1-3.5 4.2'/%3E%3Cpath d='M6.4 7.9A17.6 17.6 0 0 0 1.8 12S5.4 18 12 18a9.5 9.5 0 0 0 3.9-.8'/%3E%3Cpath d='M9.8 9.9a3.2 3.2 0 0 0 4.5 4.5'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------- Checkboxes
 *
 * ⚠ A checkbox does NOT start where its column starts. Every browser ships a
 * default `margin: 3px 3px 3px 4px` on the input, and that 4px pushed "Remember
 * me" out of line with the field, the button and the "Lost your password?"
 * link above and below it — all four of which sit flush on the column edge.
 * At 4px it reads as a wobble rather than an indent, which is the worst
 * version of it: visible, but not obviously deliberate.
 *
 * Laid out as a flex row so the gap between box and words is set here rather
 * than inherited from whitespace in the markup, and so the two centre on each
 * other whatever the label wraps to.
 */
.woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce form label.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce form label.checkbox input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ Order notes
 *
 * The notes box is required unless "No special requirements" is ticked, in
 * which case site.js disables it. A disabled box is dimmed rather than
 * hidden: the customer can still see what they waived and untick to write.
 */
.woocommerce form .form-row.cc-notes--waived textarea {
	opacity: 0.45;
}

.woocommerce form .form-row.cc-no-requirements {
	margin-top: -6px;
}

/* It is the alternative to a required field, not an optional one. */
.woocommerce form .form-row.cc-no-requirements .optional { display: none; }

/* --------------------------------------------------------- Country / Region
 *
 * ⚠ HIDDEN, NOT REMOVED, AND THE DIFFERENCE MATTERS.
 *
 * This store sells and ships to Australia only — allowed_countries is
 * `specific` with a single entry, and the base is AU:VIC. WooCommerce still
 * prints a real <select> for it, marked country_to_state--single, holding
 * exactly one option. So the checkout was asking the customer to choose
 * Australia from a list of Australia, twice: once under Billing and again
 * under Delivery. It was also the last height mismatch left on the form, a
 * plain <select> measuring 44px where every input beside it is 44.8px.
 *
 * Dropped from view rather than dropped from the form, for two reasons:
 *
 *   1. A CSS-hidden control is still submitted — only `disabled` stops that —
 *      so the order keeps its country and nothing downstream has to guess.
 *   2. The State field is populated BY this one. `country_to_state` is the
 *      hook WooCommerce's JS reads to decide which states to offer, so the
 *      element has to stay in the DOM for the field below it to work at all.
 *      Filtering it out of woocommerce_checkout_fields would take the State
 *      dropdown with it.
 *
 * The label goes too; on its own it would sit above nothing.
 *
 * ⚠ `!important` IS LOAD-BEARING HERE, and not because of specificity.
 * WooCommerce's checkout script writes `style="display: block"` straight
 * onto this wrapper every time it refreshes the address fields — which it
 * does on load and again after each update_checkout. An inline style beats
 * an ID selector, so the plain rule lost every time the script ran. An
 * important declaration in a stylesheet is the one thing that outranks a
 * non-important inline style, so this is the correct tool rather than a
 * shortcut past a cascade problem.
 */
#billing_country_field,
#shipping_country_field {
	display: none !important;
}
/* ------------------------------------------------------- State and Country
 *
 * ⚠ These two are NOT plain <select>s. WooCommerce swaps them for select2,
 * which replaces the element with nested <span>s and ships its own stylesheet
 * — and that stylesheet IS loaded here (select2.css), unlike the rest of
 * WooCommerce's CSS. Its defaults are `height: 28px` on the box and
 * `line-height: 28px; padding-left: 8px` on the text.
 *
 * So State came out a different height from City and Postcode beside it, with
 * its text indented 8px where theirs sits at 2px — the field looked out of
 * line with every other field on the form. Styling `.select2-selection` alone
 * could never fix it: the height and the indent live on the inner nodes.
 *
 * Every value below is matched to the plain-input rule above on purpose. If
 * that rule's padding or font-size changes, these change with it.
 */
.woocommerce .select2-container {
	width: 100% !important;
}

.woocommerce .select2-container .select2-selection--single {
	height: auto;
	min-height: 0;
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	border-radius: 0;
	background: transparent;
	padding: 10px 2px;
	outline: none;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: inherit;
	padding-left: 0;
	padding-right: 22px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	color: var(--cc-ink);
}

/* The arrow is absolutely positioned against select2's own 28px box, so it
   floats above the text once that box grows. Pin it to the field instead. */
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 2px;
	height: 20px;
	margin-top: -10px;
}

.woocommerce .select2-container--open .select2-selection--single,
.woocommerce .select2-container--focus .select2-selection--single {
	border-bottom-color: var(--cc-cinnamon-600);
}

/* The dropdown itself, so it does not arrive as a rounded blue-highlighted
   panel in the middle of a site with neither. */
.select2-dropdown {
	border: 1px solid var(--cc-line);
	border-radius: 0;
	background: var(--cc-paper);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--cc-cinnamon-600);
	color: var(--cc-cream);
}

.select2-search--dropdown .select2-search__field {
	border: 1px solid var(--cc-line);
	border-radius: 0;
	padding: 8px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	outline: none;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 480px;
	margin-inline: auto;
}

/* Forgotten / choose a new password: the account page's two smallest
   screens, and the ones a customer lands on from an email. */
.woocommerce form.lost_reset_password { padding-bottom: 40px; }
/* Printed on the hook BEFORE the form, so aligned to the form's column, not inside it. */
.woocommerce .cc-reset__title {
	max-width: 480px;
	margin: 24px auto 8px;
	font-family: var(--cc-font-display);
	font-size: 32px;
	font-weight: 400;
}
.woocommerce form.lost_reset_password > p:first-of-type { margin: 0 0 28px; color: var(--cc-muted); }
.woocommerce form.lost_reset_password .form-row-first,
.woocommerce form.lost_reset_password .form-row-last { float: none; width: 100%; }

.woocommerce .col2-set {
	display: grid;
	gap: 40px;
}

@media (min-width: 800px) {
	.woocommerce .col2-set { grid-template-columns: 1fr 1fr; }
}

/* Account › Delivery addresses: two cards, a button under each. */
.cc-addresses__lead { margin: 0 0 28px; font-size: 17.5px; color: var(--cc-muted); }

.cc-addresses { display: grid; gap: 32px; }

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

.cc-address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--cc-line);
}

.cc-address__title {
	margin: 0;
	font-family: var(--cc-font-display);
	font-size: 24px;
	font-weight: 400;
}

.cc-address__body { flex: 1 1 auto; font-style: normal; font-size: 17.5px; line-height: 1.6; }

.cc-address__empty { color: var(--cc-muted); }

.cc-rows { list-style: none; border-top: 1px solid var(--cc-line); }

.cc-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-block: 16px;
	border-bottom: 1px solid var(--cc-line);
	font-size: 17.5px;
}

.cc-row__label {
	font-family: var(--cc-font-display);
	font-size: 20px;
}

.cc-row__meta {
	font-family: var(--cc-font-accent);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-status {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--cc-line);
	font-family: var(--cc-font-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-status--paid,
.cc-status--completed { border-color: var(--cc-sage-400); color: var(--cc-sage-600); }

/* Awaiting a transfer: amber. The customer has said it is made: green, in
   their words - staff still confirm it (customer-paid.php). */
.cc-status--pending { border-color: #E2C77B; color: #6B4A0A; background: #FBEFD9; }
.cc-status--customer-paid { border-color: var(--cc-sage-400); color: var(--cc-sage-600); background: var(--cc-sage-100, #EEF3EA); }

.cc-paid-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cc-paid-panel .cc-btn { margin: 0; }

.cc-status--cancelled,
.cc-status--failed { border-color: #C58A8A; color: #9B2C2C; }

/* Favourites — the heart on a card or product page. */

.cc-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--cc-muted);
	transition: color 0.2s, transform 0.2s;
}

.cc-fav:hover { color: var(--cc-cinnamon-600); transform: scale(1.08); }

.cc-fav.is-on { color: var(--cc-cinnamon-600); }
.cc-fav.is-on svg { fill: currentColor; }

.cc-fav[disabled] { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Cart drawer — opens from the right when something is added.
   ------------------------------------------------------------------------ */

.cc-cart-drawer {
	position: fixed;
	inset-block: 0;
	right: 0;
	width: min(420px, 100%);
	background: #fff;
	transform: translateX(100%);
	/*
	 * ⚠ THE SHADOW ONLY WHILE OPEN. Parked off the right edge, a 40px blur
	 * still reached 28px back onto the page - a faint grey strip down the
	 * right of every page that the live site does not have.
	 */
	transition: transform 0.4s var(--cc-ease-out-expo), box-shadow 0.4s;
	z-index: 60;
	display: flex;
	flex-direction: column;
}

.cc-cart-drawer.is-open { transform: none; box-shadow: -12px 0 40px rgba(69, 34, 22, 0.14); }

.cc-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-cart-drawer__title {
	font-family: var(--cc-font-display);
	font-size: 24px;
	font-weight: 400;
}

/*
 * A bare icon control — a close "×", not a button in the visual sense.
 *
 * It needs saying because the default is loud: an unstyled <button> in this
 * theme is a grey bordered box in the browser's own font, and the cart drawer
 * is printed in the footer of EVERY page, so that box was on every page of
 * the site.
 */
.cc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cc-muted);
	font-family: var(--cc-font-body);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s;
}

.cc-icon-btn:hover {
	color: var(--cc-cinnamon-600);
}

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

.cc-cart-drawer__foot {
	border-top: 1px solid var(--cc-line);
	padding: 20px 24px 26px;
}

.cc-cart-drawer__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(31, 26, 23, 0.32);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	z-index: 55;
}

.cc-cart-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }

.cc-drawer-item {
	display: flex;
	gap: 14px;
	padding-block: 16px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-drawer-item__thumb {
	width: 64px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
}

.cc-drawer-item__name {
	font-family: var(--cc-font-display);
	font-size: 18.5px;
	line-height: 1.2;
}

.cc-drawer-item__row {
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cc-empty {
	padding-block: 64px;
	text-align: center;
	font-family: var(--cc-font-display);
	font-size: 22px;
	color: var(--cc-muted);
}

/*
 * The search box became a <form> so Enter submits. It was a flex row before
 * and still is; the submit button is for keyboards and screen readers rather
 * than the eye, so it is placed off-screen rather than display:none — the
 * latter takes it out of the accessibility tree and out of the tab order.
 */
.cc-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cc-search__submit:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	padding: 6px 12px;
}

/* ------------------------------------------------------ Store credit offer
 *
 * Sits in the order summary between the total and the payment methods, which
 * is where it belongs: it is a way of paying, not a discount on the food. The
 * note says so in as many words, because a customer who reads "credit" as
 * "discount" will expect the total to drop and it deliberately does not —
 * their order is still the same sale, carrying the same GST.
 */
.cc-credit-offer {
	margin: 14px 0 4px;
	padding: 14px 16px;
	background: var(--cc-cinnamon-50);
	border-left: 3px solid var(--cc-cinnamon-600);
}

.cc-credit-offer label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16.5px;
	cursor: pointer;
}

.cc-credit-offer input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}

.cc-credit-offer .cc-credit-note {
	margin: 8px 0 0 26px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--cc-muted);
}

/* The account dashboard says the same thing in the same voice. */
.cc-credit-balance {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--cc-cinnamon-50);
	border-left: 3px solid var(--cc-cinnamon-600);
	font-size: 16.5px;
}

/* ------------------------------------------- Links inside the account pages
 *
 * ⚠ `a { color: inherit; text-decoration: none }` in style.css is right for
 * the header, the footer and every button, and wrong for prose. On the account
 * dashboard it made four controls invisible in two sentences:
 *
 *   Hello Sarah (not Sarah? Log out)
 *   ... view your recent orders, manage your shipping and billing addresses,
 *       and edit your password and account details.
 *
 * Every emphasised phrase there is a link, and all of them rendered as plain
 * black body text. "Log out" in particular reads as punctuation rather than
 * the way out of the account — which is what was reported.
 *
 * Only inside prose: :not() keeps this away from the buttons and the account
 * navigation, which are links too and are meant to look like what they are.
 */
.woocommerce-MyAccount-content p a:not(.button):not(.cc-btn),
.woocommerce-MyAccount-content li a:not(.button):not(.cc-btn),
.woocommerce-MyAccount-content address a:not(.button):not(.cc-btn) {
	color: var(--cc-cinnamon-600);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce-MyAccount-content p a:not(.button):not(.cc-btn):hover,
.woocommerce-MyAccount-content li a:not(.button):not(.cc-btn):hover,
.woocommerce-MyAccount-content address a:not(.button):not(.cc-btn):hover {
	color: var(--cc-ink);
}

/* ===========================================================================
   Category page, 1:1 with the live store (woocommerce/cc-store-category.php)

   Measured off the live /category/Breakfast signed in at 1440 x 900,
   27 Sep 2026. Banner y=101.6, 378 tall, fixed background; the white panel
   1200 wide from y=329.6 (150px over the banner), padding 70 / 95 / 52;
   the store 1010 wide inside it. Cards on a 3-column grid pulled
   2.1px out on each side, 338.2 wide and 330.6 tall: 2.5px in, a
   333.2 x 249.9 photo, the name 12.8px under it and both words 5.5px in.
   The account links a fixed 150px pitch, centred. "All categories" 75px
   under the panel; its gallery three 366.7px columns of oval photographs,
   each with the name over a white wash.

   ⚠ MEASURED ON A FRESH LOAD. The live store re-lays itself out after a
   window resize (the cards grow to 347px and the gallery drops to two
   columns), so a measurement taken after resizing describes a page no
   visitor sees.
   ------------------------------------------------------------------------ */

.cc-ec-banner {
	height: 378px;
	margin-top: 0.6px;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: fixed;
}

.cc-ec-panel {
	position: relative;
	width: min(1200px, 100%);
	margin: -150px auto 0;
	padding: 70px 95px 52px;
	background: #fff;
}

.cc-ec-crumbs {
	margin-bottom: 5px;
	font-family: var(--cc-font-sans);
	font-size: 15.5px;
	line-height: 21.7px;
	color: #939393;
}

.cc-ec-crumbs a { color: inherit; }
.cc-ec-crumbs__sep { margin-inline: 9.9px; }

.cc-ec-title {
	font-family: var(--cc-font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	text-align: center;
	color: #000;
}

.cc-ec-sort {
	margin-top: -2px;
	text-align: right;
}

.cc-ec-sort__label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6.7px;
	font-family: var(--cc-font-sans);
	font-size: 19px;
	line-height: 27.1px;
	text-transform: uppercase;
	color: #757575;
	cursor: pointer;
}

.cc-ec-sort__label svg { width: 14px; height: 14px; flex: none; }

/* The native select sits over the words, invisible, so the menu is the
   platform's own - as the live store's is. */
.cc-ec-sort__label select {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

.cc-ec-grid {
	display: grid;
	grid-template-columns: repeat(3, 338.2px);
	margin-inline: -2.1px;
}

/* 330.6px with a one-line name; the live card grows a line for a two-line
   one (Lunch Time Sandwich Platters is 354). */
.cc-ec-card {
	display: block;
	min-height: 330.6px;
	padding: 2.5px;
	color: inherit;
}

.cc-ec-card__pic {
	display: block;
	aspect-ratio: 333.2 / 249.9;
	overflow: hidden;
}

.cc-ec-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
}

/* The live card's only hover: the photo zooms 1.1x in 0.2s. */
.cc-ec-card:hover .cc-ec-card__img { transform: scale(1.1); }

.cc-ec-card__name {
	display: block;
	margin-top: 12.8px;
	padding-inline: 5.5px;
	font-family: var(--cc-font-sans);
	font-size: 19px;
	font-weight: 400;
	line-height: 24.7px;
	color: #191919;
}

.cc-ec-card__price {
	display: block;
	padding: 0 5.5px 16px;
	font-family: var(--cc-font-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 24.7px;
	color: #333;
}

.cc-ec-links {
	display: flex;
	justify-content: center;
	margin-top: 48.1px;
}

.cc-ec-links__item {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	width: 150px;
	height: 44.8px;
	color: #939393;
}

.cc-ec-links__icon {
	display: grid;
	place-items: center;
	height: 24px;
}

.cc-ec-links__icon svg { display: block; }

.cc-ec-links__label {
	margin-top: 4px;
	font-family: var(--cc-font-sans);
	font-size: 15.5px;
	line-height: 17.7px;
}

.cc-ec-allcats {
	padding: 75px 0 119.8px;
}

.cc-ec-allcats__title {
	font-family: var(--cc-font-display);
	font-size: 50px;
	font-weight: 400;
	line-height: 60.8px;
	text-align: center;
	color: #000;
}

.cc-ec-allcats__grid {
	display: grid;
	grid-template-columns: repeat(3, 366.7px);
	justify-content: center;
	margin-top: 41px;
}

.cc-ec-allcat {
	display: block;
	padding: 10px;
	color: #000;
}

.cc-ec-allcat__pic {
	position: relative;
	display: block;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	background-size: cover;
	background-position: 50% 50%;
}

.cc-ec-allcat__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	border-radius: 100%;
	background: rgba(255, 255, 255, 0.5);
}

.cc-ec-allcat__name {
	font-family: var(--cc-font-accent);
	font-size: 40px;
	font-weight: 400;
	line-height: 52.8px;
	text-align: center;
	/* A word too long for the oval breaks where it meets the edge, as the
	   live "Morning/Afterno / on Tea" does. */
	overflow-wrap: anywhere;
	min-width: 0;
}

/* The live gallery fades each row in as it scrolls into view. */
.cc-ec-allcat.is-hidden { opacity: 0; }
.cc-ec-allcat { transition: opacity 1s ease; }

/* A category that heads others (Lunch, Plant Based Meals): its sections
   first, as the live store draws them on /category/Lunch - cards the size
   of a product's, 16px under the title and 32px over the products, each
   name centred in #333 14.4px under its photograph. With sections the live
   page has no SORT BY. */
.cc-ec-subcats {
	display: grid;
	grid-template-columns: repeat(3, 338.2px);
	margin: -2px -2.1px 0;
	padding: 16px 0 32px;
}

.cc-ec-subcat { display: block; height: 319.8px; padding: 2.5px; color: inherit; }
.cc-ec-subcat__pic { display: block; aspect-ratio: 333.2 / 249.9; overflow: hidden; }
.cc-ec-subcat__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cc-ec-subcat__name {
	display: block;
	height: 64.8px;
	padding-top: 14.4px;
	font-family: var(--cc-font-sans);
	font-size: 19px;
	line-height: 22.8px;
	text-align: center;
	color: #333;
}

@media (max-width: 1023px) {
	.cc-ec-panel { padding-inline: 16px; }
	.cc-ec-grid,
	.cc-ec-subcats { grid-template-columns: repeat(2, 1fr); margin-inline: -2.5px; }
	/* The fixed heights are the live 1440px cards'; narrower, the photo
	   sets the height. */
	.cc-ec-subcat { height: auto; }
	.cc-ec-allcats__grid { grid-template-columns: repeat(2, 1fr); }
	.cc-ec-banner { background-attachment: scroll; }
}

@media (max-width: 599px) {
	.cc-ec-grid,
	.cc-ec-subcats { grid-template-columns: 1fr; }
	.cc-ec-links__item { width: 25%; }
}

/* ===========================================================================
   Product page, 1:1 with the live store (woocommerce/single-product.php)

   Measured off the live /product/Breakfast-Pack-A signed in at 1440 x 900,
   27 Sep 2026. The banner and panel as on a category page, but the panel
   holds a 1160px store 42px down and 20px in. Photo frame 564 x 400 on the
   left; the right column 564 wide, 32px beyond it. Down the right column,
   from its top: breadcrumbs (a 19.6px line + 20), the name (30px Cormorant
   on a 36.8px line), 20, the price (20px bold gold on 28), 10, the GST line
   (16px bold gold on 22.4), 30, "In stock", 10, "Quantity:", 5, the 64 x 40
   box, 20, the 296 x 50 "Add to Bag", 35, the description, 30, "Save this
   product for later" and its button, 30, the share row; the account links
   50px under that.
   ------------------------------------------------------------------------ */

.cc-ec-panel--product { padding: 42px 20px 76px; }

.cc-pd {
	display: grid;
	grid-template-columns: 564px 564px;
	gap: 32px;
	align-items: start;
}

.cc-pd__gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
}

/* No larger than the photograph is: the live frame draws a 383 x 233
   photo at 383 x 233, centred. */
.cc-pd__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* The wide layout (a photo over 400px wide): 757.3 + 370.7, the photo
   no wider than the column and no larger than it is, as live. */
.cc-pd--wide { grid-template-columns: 757.3px 370.7px; }
.cc-pd--wide .cc-pd__gallery { height: auto; min-height: 400px; }
.cc-pd--wide .cc-pd__img { max-height: none; }

/* More than one photo: the live row of 215 x 143 thumbnails, centred 10px
   under the photo; a click puts that one in the frame. */
.cc-pd__thumbs {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.cc-pd__thumb {
	flex: none;
	width: 215.1px;
	height: 143.4px;
	padding: 0 4px 8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.cc-pd__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cc-pd__crumbs { margin-bottom: 20px; }

.cc-pd__title {
	margin-top: -1px;
	font-family: var(--cc-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 36.8px;
	color: #000;
}

.cc-pd__prices { margin-top: 20px; }

.cc-pd__price,
.cc-pd__tax {
	margin: 0;
	font-family: var(--cc-font-sans);
	font-weight: 700;
	color: #C49464;
}

.cc-pd__price { font-size: 20px; line-height: 28px; }
.cc-pd__tax { margin-top: 10px; font-size: 17.5px; line-height: 24.5px; }

/* The live action panel keeps 5px under its button, description or not. */
.cc-pd__buy { margin-top: 30px; padding-bottom: 5px; }

.cc-pd__stock,
.cc-pd__label {
	margin: 0;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 22.8px;
	color: #000;
}

.cc-pd__stock--out { color: #b3261e; }

.cc-pd__qty { margin-top: 10px; }
.cc-pd__qty .cc-pd__label { display: block; line-height: 22.4px; }

.cc-pd__qty-row {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	width: 296px;
	margin-top: 5px;
}

.cc-pd__qty-input {
	flex: none;
	width: 64px;
	height: 40px;
	padding: 5px 10px;
	border: 0.8px solid rgb(142, 174, 198);
	border-radius: 3px;
	background: #f7f9fa;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
	color: #6e6e6e;
	-moz-appearance: textfield;
}

.cc-pd__qty-input::-webkit-outer-spin-button,
.cc-pd__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cc-pd__qty-note {
	padding-top: 0;
	font-family: var(--cc-font-sans);
	font-size: 15.5px;
	font-weight: 300;
	line-height: 21.7px;
	color: #000;
}

.cc-pd__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 296px;
	height: 50px;
	margin-top: 20px;
	padding: 0 14.4px;
	border: 0.8px solid #000;
	border-radius: 0;
	background: transparent;
	font-family: var(--cc-font-display);
	font-size: 20px;
	font-weight: 400;
	color: #000;
	cursor: pointer;
}

.cc-pd__add:hover { background: rgba(0, 0, 0, 0.04); }

/* The "Sandwich Type" question, where a product asks one: the live
   module's label over its select, above the stock line. */
.cc-pd__buy .cc-choice { gap: 0; margin-bottom: 30px; }
.cc-pd__buy .cc-choice .cc-qty__label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 22.8px;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
}

/* The live select: the quantity box's border and fill, 296 x 40, its
   chevron in a 25px cell at the right. */
.cc-pd__buy .cc-choice__select {
	display: block;
	width: 296px;
	height: 40px;
	padding: 5px 30px 5px 10px;
	border: 0.8px solid rgb(142, 174, 198);
	border-radius: 3px;
	background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 3.5 4-3.5' fill='none' stroke='%23757575' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 6.5px center;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
	color: #6e6e6e;
	-webkit-appearance: none;
	appearance: none;
}

.cc-pd__gated { margin-top: 30px; }

/* flow-root: the list's 20px under it adds to the next module's 30, as on
   the live page, rather than collapsing into it. */
.cc-pd__desc {
	display: flow-root;
	margin-top: 30px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
	color: #000;
}

/* Ecwid's paragraphs are 0.6em apart (the Sandwich Platter's "Sandwich
   fillings" over its list); the copy's own <br>s are its line breaks. */
.cc-pd__desc p,
.cc-pd__desc div { margin: 0; }
.cc-pd__desc p:not(:last-child) { margin-bottom: 9.6px; }
.cc-pd__desc--text p + p { margin-top: 22.4px; }
.cc-pd__desc strong { font-weight: 700; }

.cc-pd__desc ul,
.cc-pd__desc ol {
	margin: 0 0 20px;
	padding-left: 21.6px;
	list-style: disc outside;
}

.cc-pd__desc ol { list-style: decimal outside; }
.cc-pd__desc li + li { margin-top: 5px; }

.cc-pd__module { margin-top: 30px; }

/* The live module keeps 10.4px under its button. */
.cc-pd__module--fav { padding-bottom: 10.4px; }

.cc-pd__module--fav .cc-fav--labelled {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: 40px;
	margin-top: 10px;
	padding: 0 28.8px 0 12.6px;
	border: 0.8px solid #000;
	border-radius: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
}

.cc-pd__module--fav .cc-fav--labelled:hover { transform: none; background: rgba(0, 0, 0, 0.04); }
.cc-pd__module--fav .cc-fav--labelled svg { width: 30px; height: 26px; flex: none; }
.cc-pd__module--fav .cc-fav--labelled.is-on svg { color: var(--cc-cinnamon-600); }
.cc-fav__label { font-family: var(--cc-font-display); font-size: 20px; font-weight: 400; line-height: 24px; }

.cc-pd__share { display: flex; gap: 12px; margin-top: 9px; }

.cc-pd__share-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 22px;
	padding: 0 3px;
	border-radius: 2px;
	background: #f0f0f0;
	font-family: var(--cc-font-sans);
	font-size: 15.5px;
	line-height: 22.1px;
	color: #191919;
}

.cc-ec-store--product .cc-ec-links { margin-top: 94.7px; }

@media (max-width: 1239px) {
	.cc-pd,
	.cc-pd--wide { grid-template-columns: 1fr 1fr; }
	.cc-pd__thumb { width: 33%; height: auto; aspect-ratio: 215.1 / 143.4; }
}

@media (max-width: 767px) {
	.cc-pd,
	.cc-pd--wide { grid-template-columns: 1fr; gap: 24px; }
	.cc-pd__gallery { height: auto; }
	.cc-pd__qty-row,
	.cc-pd__add { width: 100%; }
}

/* The live pager (Finger Food's 21 over three pages): 16px under the
   grid, "1 - 10 of 21 items" in 14px grey, then PREV / the numbers / NEXT
   on one centred row 70px apart, the current page in near-black. */
.cc-ec-pager {
	height: 101.3px;
	margin-top: 16px;
	font-family: var(--cc-font-sans);
	text-align: center;
	color: #757575;
}

.cc-ec-pager__count { margin: 0; font-size: 15.5px; line-height: 21.7px; }

.cc-ec-pager__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 70px;
	margin-top: 18.4px;
}

.cc-ec-pager__step {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 19px;
	line-height: 22px;
	text-transform: uppercase;
	color: inherit;
}

.cc-ec-pager__step svg { width: 17.6px; height: 17.6px; flex: none; }

.cc-ec-pager__nums { display: inline-flex; }

.cc-ec-pager__num {
	padding: 0 10.5px;
	font-size: 15.5px;
	line-height: 21.7px;
	color: inherit;
}

.cc-ec-pager__num.is-current { color: #191919; }
.cc-ec-pager a:hover { color: #191919; }

/* Live, the links row starts where the pager ends. */
.cc-ec-pager + .cc-ec-links { margin-top: 0; }

/* ===========================================================================
   Sign in / Create new account / Password Reset, 1:1 with the live /account
   (woocommerce/myaccount/form-login.php, form-lost-password.php)

   Measured signed out at 1440 x 900, 27 Sep 2026: the store 1200 wide from
   15px under the header; the Account panel 376 wide at its left, the form
   column 776 wide from 424px in. Headings 38px Cormorant; the fields
   776 x 50, #fafafa with a 0.8px blue-grey border; the button 388 x 50,
   outlined; links in the store's blue.
   ------------------------------------------------------------------------ */

.cc-container-acct {
	width: min(1200px, 100% - 32px);
	margin-inline: auto;
}

.cc-acct-page { padding: 15px 0 74.8px; }

.cc-acct {
	display: grid;
	grid-template-columns: 376px 776px;
	justify-content: space-between;
	align-items: start;
	font-family: var(--cc-font-sans);
	color: #000;
}

/* Zero margins on this layout's OWN paragraphs only: WooCommerce's screens
   drawn in the right-hand column (an order, addresses, account details)
   keep their spacing, or their buttons end up touching. */
.cc-acct__side p,
.cc-acct__main > .cc-acct__title,
.cc-acct__main > p[class^="cc-acct__"],
.cc-acct__main > .cc-acct__links { margin: 0; }

.cc-acct__main .woocommerce-order-details ~ p,
.cc-acct__main p:has(> .cc-btn) { margin: 12px 0 0; }

/* WooCommerce highlights the order number, date and status in yellow. */
.cc-acct__main mark { background: none; color: inherit; font-weight: 600; }
/* Text links only: a link drawn as a button keeps the button's own colours. */
.cc-acct a:not(.button):not(.cc-btn):not(.woocommerce-button) { color: #1a7ac4; }

.cc-acct__title {
	font-family: var(--cc-font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 46.4px;
	color: #000;
}

.cc-acct__info {
	display: grid;
	gap: 20px;
	margin-top: 25px;
	padding-bottom: 20px;
	border-bottom: 0.8px solid #e6e6e6;
}

.cc-acct__row { display: flex; align-items: flex-start; gap: 10px; }

.cc-acct__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin-top: 5.6px;
	border: 0.8px solid #1a7ac4;
	border-radius: 50%;
	color: #1a7ac4;
	overflow: hidden;
}

.cc-acct__row-title { font-size: 17.5px; font-weight: 600; line-height: 22.8px; }
.cc-acct__row-text { font-size: 17.5px; font-weight: 300; line-height: 24.5px; }
.cc-acct__row-text a { margin-left: 10px; font-weight: 400; }

.cc-acct__h2 {
	margin-top: 20px !important;
	font-size: 22px;
	font-weight: 600;
	line-height: 28.6px;
}

.cc-acct__muted {
	margin-top: 8.8px !important;
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
	color: #757575;
}

.cc-acct__muted + .cc-acct__h2 { margin-top: 31px !important; }
.cc-acct__side .cc-acct__muted:last-child,
.cc-acct__side [data-cc-fav-summary],
.cc-acct__side .cc-acct__favs { margin-top: 10.8px !important; }

.cc-acct__intro {
	margin-top: 10.6px !important;
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
}

/* WooCommerce frames its login form (border, padding, a 480px field);
   the live form has none of that. */
.woocommerce .cc-acct form.cc-acct__form {
	display: grid;
	gap: 20px;
	max-width: none;
	margin: 18.8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.cc-acct .cc-acct__input {
	width: 100%;
	max-width: none;
	margin: 0;
	height: 50px;
	padding: 0 10.8px;
	border: 0.8px solid rgb(142, 174, 198);
	border-radius: 3px;
	background: #fafafa;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 300;
	color: #000;
}

.cc-acct__input::placeholder { color: #6e6e6e; opacity: 1; }
.cc-acct__input:focus { outline: none; border-color: #1a7ac4; background: #fff; }

.cc-acct__btn {
	width: 388px;
	height: 50px;
	border: 0.8px solid #000;
	border-radius: 0;
	background: transparent;
	font-family: var(--cc-font-display);
	font-size: 20px;
	font-weight: 400;
	color: #000;
	cursor: pointer;
}

.cc-acct__btn:hover { background: rgba(0, 0, 0, 0.04); }

/* The live Register button stays grey until the form is filled in. */
.cc-acct__form--register:invalid .cc-acct__btn { border-color: #353636; background: #dddede; }

.cc-acct__links {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 24.6px !important;
	font-size: 17.5px;
	line-height: 24.5px;
}

/* The upgrade notice and WooCommerce's messages, above the form. */
.cc-acct__main > .woocommerce-info,
.cc-acct__main > .woocommerce-error,
.cc-acct__main > .woocommerce-message,
.cc-acct__main > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; }

@media (max-width: 1023px) {
	.cc-acct { grid-template-columns: 1fr; gap: 40px; }
	.cc-acct__main { order: -1; }
	.cc-acct__btn { width: 100%; }
}

/* Signed in (woocommerce/myaccount/my-account.php, dashboard.php), measured
   off the live /account 28 Sep 2026: the same panel with the name row,
   "Have another account? Sign Out" 41px under Favorites; on the right
   "Orders" in 30px bold, the orders or the live "no orders" line 5px
   under it, then "Have questions? Contact us" 40px lower with the phone
   and email under it. "Edit" swaps the name row for the live 376px forms. */
.cc-acct__favs { margin: 8.8px 0 0; padding: 0; list-style: none; font-size: 17.5px; font-weight: 300; line-height: 24.5px; }

.cc-acct__signout {
	margin-top: 18px !important;
	padding-top: 21px;
	border-top: 0.8px solid #e6e6e6;
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
}

.cc-acct__signout a { margin-left: 10px; font-weight: 400; }

.cc-acct__main .cc-acct__orders-title {
	margin: -0.3px 0 0;
	font-family: var(--cc-font-sans);
	font-size: 30px;
	font-weight: 600;
	line-height: 39px;
	color: #000;
}

.cc-acct__orders-empty { margin-top: 6px !important; }

.cc-acct__orders { margin: 5px 0 0; padding: 0; list-style: none; }

.cc-acct__order {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr auto;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 0.8px solid #e6e6e6;
	font-size: 17.5px;
	font-weight: 300;
	line-height: 24.5px;
}

.cc-acct__order-number { font-weight: 400; }
.cc-acct__order-total { font-weight: 600; text-align: right; }

.cc-acct__main .cc-acct__contact-title {
	margin: 39.5px 0 0;
	font-family: var(--cc-font-sans);
	font-size: 22px;
	font-weight: 600;
	line-height: 28.6px;
	color: #000;
}

.cc-acct__line { font-size: 17.5px; font-weight: 300; line-height: 24.5px; }
.cc-acct__contact-title + .cc-acct__line { margin-top: 9.8px !important; }
.cc-acct__line + .cc-acct__line { margin-top: 5px !important; }
.cc-acct .cc-acct__main a:not(.button):not(.cc-btn):not(.woocommerce-button),
/* Above the older "account links are terracotta and underlined" rule, which
   is more specific (.woocommerce-MyAccount-content p a:not()...). */
.cc-acct .woocommerce-MyAccount-content.cc-acct__main p a:not(.button):not(.cc-btn) { font-weight: 400; color: #1a7ac4; text-decoration: none; }

/* Signed in, the live footer is 30px nearer the panel than signed out. */
.cc-acct-page:has(.cc-acct--in) { padding-bottom: 44.8px; }

/* The Edit forms: title, 376 x 40 boxes 10px apart, the 376 x 50 Save. */
.cc-acct__edit { display: grid; gap: 10px; }
.cc-acct__edit .cc-acct__row-title { margin-bottom: -5px !important; }
.cc-acct__edit .cc-acct__row-text { margin-top: -10px !important; }
.cc-acct__edit--password { margin-top: 10px; }
.cc-acct__edit--password + .cc-acct__row { margin-top: 10px; }
.cc-acct .cc-acct__input--small { height: 40px; }
.cc-acct__btn--full { width: 100%; }

/* ---------------------------------------------------------- 30 Sep 2026 */

/* The account's own pages, under the name and email (option A). */
.cc-acct__nav ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cc-acct__nav a { font-size: 17.5px; font-weight: 400; line-height: 24.5px; }

/* "Order this again" on each order in the account list. */
.cc-acct__order { grid-template-columns: 1.2fr 1fr 1fr auto auto; align-items: baseline; }
.cc-acct .cc-acct__order-again { white-space: nowrap; font-weight: 400; }

@media (max-width: 599.98px) {
	.cc-acct__order { grid-template-columns: 1fr auto; }
	.cc-acct .cc-acct__order-again { grid-column: 1 / -1; }
}

/* And on the product page, for a customer who has ordered it before. */
.cc-pd__again { margin: 0; }
.cc-pd__add--again { margin-top: 12px; }
.cc-pd__again-note { margin: 6px 0 0; font-size: 15.5px; font-weight: 300; color: #555; }

/* Checkout errors: under their own field, in words, never at the top. */
.woocommerce form .checkout-inline-error-message {
	margin: 6px 0 0;
	padding: 0;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #9B2C2C;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .cc-delivery-time.woocommerce-invalid select { border-color: #9B2C2C; }

.cc-checkout-error {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-left: 3px solid #9B2C2C;
	background: #FDF1F0;
	font-size: 16.5px;
	line-height: 1.45;
	color: #6B1D1D;
}

/* The thank-you page's optional password. */
.cc-quick-password {
	max-width: 520px;
	margin: 0 0 32px;
	padding: 20px 22px;
	border: 1px solid var(--cc-line);
	background: var(--cc-cream);
}

.cc-quick-password--done { border-color: #B9D7C3; background: #EFF7F1; }
.cc-quick-password p { margin: 0; }
.cc-quick-password__title { margin: 0 0 6px; font-family: var(--cc-font-display); font-size: 26px; font-weight: 500; line-height: 1.2; }
.cc-quick-password__intro { margin: 0 0 16px !important; font-size: 16.5px; color: var(--cc-muted); }
.cc-quick-password__label { display: block; margin-bottom: 6px; font-weight: 600; }
.cc-quick-password__label span { font-weight: 300; }
.cc-quick-password__input { width: 100%; height: 50px; padding: 0 12px; border: 1px solid #8C7F77; background: #fff; font-size: 17.5px; }
.cc-quick-password__input--bad { border-color: #9B2C2C; }
.cc-quick-password__error { margin: 6px 0 0 !important; color: #9B2C2C; font-weight: 500; }
.cc-quick-password__show { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; font-size: 16.5px; }

/* ------------------------------------- Form and cart text, one size up
   (1 Oct 2026). The business asked for the checkout's text to be slightly
   bigger - most of its customers are older - and then for the same on the
   other pages that share it: every WooCommerce form (sign in, register,
   lost password, addresses, account details), the cart and the order
   totals. The shop and product pages keep the old store's sizes (the
   business said no to bigger text there). */

.woocommerce form .form-row label { font-size: 14px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection,
.cc-field__input,
.cc-field select,
.cc-field textarea { font-size: 18px; }

.cc-field__label { font-size: 14px; }

form.checkout .cc-checkout-schedule input.input-text,
form.checkout .cc-checkout-schedule select { height: 50px; }

.cc-minimum-note,
.cc-totals__gst { font-size: 15px; }

.cc-summary__item { font-size: 16px; }
.cc-totals__row { font-size: 17px; }
.cc-totals__row--grand,
.cc-totals__row + .cc-totals__row--grand { font-size: 20px; }

.cc-store-page .cc-section-heading__text { font-size: 28px; }
.cc-store-page .cc-section-heading__num { font-size: 24px; }

form.checkout .wc_payment_methods .payment_box,
form.checkout .woocommerce-privacy-policy-text { font-size: 15.5px; }

.woocommerce form .checkout-inline-error-message,
.cc-checkout-error,
.cc-field__error { font-size: 16px; }

form.checkout #place_order { font-size: 16px; }

/* The Account panel's own forms (sign in, register, Edit). */
.cc-acct .cc-acct__input { font-size: 18px; }
.cc-acct .cc-acct__input--small { height: 46px; }
.cc-acct__intro,
.cc-acct__row-text,
.cc-acct__muted,
.cc-acct__links,
.cc-acct__nav a,
.cc-acct__order { font-size: 17px; }
.cc-acct__row-title { font-size: 17px; }

/* Packaging as two radio buttons (1 Oct 2026), not a dropdown whose first
   line read as a third choice. The choices are sentence case and full size,
   not the caps of a field label. */
form.checkout .cc-packaging .woocommerce-input-wrapper { display: block; padding-top: 4px; line-height: 2.2; }
form.checkout .cc-packaging input.input-radio { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--cc-cinnamon-600); cursor: pointer; }
/* WooCommerce marks EACH choice as required; the heading already says so. */
form.checkout .cc-packaging label.radio .required { display: none; }
form.checkout .cc-packaging label.radio {
	display: inline;
	margin: 0 32px 0 0;
	padding: 0;
	vertical-align: middle;
	font-family: var(--cc-font-sans);
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-ink);
	cursor: pointer;
}

/* Staff at the checkout: "Who is this order for?" (staff-checkout.php). */
.cc-order-for {
	margin: 0 0 40px;
	padding: 20px 22px 16px;
	border: 1px solid var(--cc-cinnamon-600);
	border-left-width: 4px;
	background: var(--cc-cream);
}
.cc-order-for__kicker { margin: 0; font-family: var(--cc-font-accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-cinnamon-600); }
.cc-order-for__title { margin: 2px 0 12px; font-family: var(--cc-font-display); font-size: 28px; font-weight: 500; }
.cc-order-for__label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 16px; }
.cc-order-for__search { width: 100%; height: 50px; padding: 0 12px; border: 1px solid #8C7F77; background: #fff; font-size: 18px; }
.cc-order-for__results { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--cc-line); background: #fff; }
.cc-order-for__results li + li { border-top: 1px solid var(--cc-line); }
.cc-order-for__result { display: block; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 16px; }
.cc-order-for__result:hover, .cc-order-for__result:focus { background: var(--cc-cinnamon-50); }
.cc-order-for__result span { display: block; font-size: 14.5px; color: var(--cc-muted); }
.cc-order-for__none { padding: 10px 12px; font-size: 15px; color: var(--cc-muted); }
.cc-order-for__chosen { margin: 12px 0 0; font-weight: 600; color: var(--cc-ink); font-size: 16px; }
.cc-order-for__note { margin: 10px 0 0; font-size: 14.5px; color: var(--cc-muted); }