/*
Theme Name: Cinnamon
Theme URI: https://www.cinnamoncatering.com.au/
Author: Cinnamon Catering
Description: The Cinnamon Catering storefront. A 1:1 port of the site's measured design — Cormorant Garamond / Work Sans / DM Sans, terracotta #A15C4B, boxed-logo header and terracotta footer — onto WordPress and WooCommerce. Every measurement in this file was taken from the rendered site at a 1440px reference width; the comments say which.
Version: 1.17.6
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: cinnamon
*/

/* ===========================================================================
   Tokens — ported from the Next build's globals.css @theme block.
   Terracotta #A15C4B and gold #C49464 were measured from the live DOM.
   ======================================================================== */

:root {
	--cc-cream:    #FBF7F3;
	--cc-sand:     #F1E7DC;
	--cc-paper:    #FFFFFF;

	--cc-cinnamon-50:  #F8EFEA;
	--cc-cinnamon-100: #EDD6CC;
	--cc-cinnamon-200: #DBB4A6;
	--cc-cinnamon-300: #C79280;
	--cc-cinnamon-400: #B4735E;
	--cc-cinnamon-500: #A9634E;
	--cc-cinnamon-600: #A15C4B;   /* brand terracotta */
	--cc-cinnamon-700: #86452F;
	--cc-cinnamon-800: #653322;
	--cc-cinnamon-900: #452216;

	--cc-sage-100: #E7ECE1;
	--cc-sage-400: #8A9A7B;
	--cc-sage-600: #56664A;
	/*
	 * ⚠ MEASURED, BUT UNUSED, AND NOT TO BE PUT ON THE TERRACOTTA BAND.
	 * It is 1.87:1 there — see .cc-footer__phone, which used to use it. Kept
	 * because it is a real measurement from the reference site, not because
	 * anything should reach for it.
	 */
	--cc-gold:     #C49464;

	--cc-ink:      #1F1A17;
	--cc-charcoal: #2A2320;
	--cc-muted:    #6A5E56;
	--cc-line:     #E7DACE;

	/* The store's own controls use a colder grey than the brand palette —
	   rgb(102,102,102) is measured off the live search field. */
	--cc-store-grey: rgb(102, 102, 102);

	--cc-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--cc-font-sans:    "Work Sans", ui-sans-serif, system-ui, sans-serif;
	--cc-font-accent:  "DM Sans", "Work Sans", sans-serif;

	--cc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* Measured from the reference: the body gutter is #EEEEEE and every
	   content band sits on white. Only visible beyond 1440px. */
	--cc-background: #EEEEEE;
	--cc-surface:    #FFFFFF;
	--cc-foreground: #000000;
}

/* ===========================================================================
   Reset / base
   ======================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* The cart drawer is position:fixed at translateX(100%) and still counts
	   toward scrollWidth. `clip` contains it without making the root a scroll
	   container, which `hidden` would do — and that breaks position:sticky. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--cc-background);
	color: var(--cc-foreground);
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The chrome and page content sit on white; #EEEEEE is only the gutter that
   shows beyond 1440px, exactly as designed. */
.cc-header,
.cc-main {
	background: var(--cc-surface);
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--cc-font-display);
	font-weight: 500;
	font-optical-sizing: auto;
	letter-spacing: 0;
	color: var(--cc-ink);
	line-height: 1.08;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--cc-cinnamon-200);
	color: var(--cc-ink);
}

.cc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	color: var(--cc-cinnamon-600);
	padding: 12px 20px;
	font-family: var(--cc-font-accent);
	font-weight: 700;
}

.cc-skip-link:focus {
	left: 0;
}

/* ===========================================================================
   Containers

   The site's content column is 1360px at the 1440px reference width, and the
   /shop grid sits in a narrower 1180px column (x=130). Below 1440 both gain
   gutters; AT 1440 exactly they must not, or every measured x-position shifts
   by the padding.
   ======================================================================== */

.cc-container-wide {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: 0;
}

.cc-container-shop {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 0;
}

.cc-container-page {
	width: 100%;
	max-width: 82rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (max-width: 1439.98px) {
	.cc-container-wide,
	.cc-container-shop {
		padding-inline: clamp(16px, 2.8vw, 40px);
	}
}

/* ===========================================================================
   Shared idioms
   ======================================================================== */

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

.cc-link-accent {
	font-family: var(--cc-font-accent);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--cc-cinnamon-600);
	transition: color 0.2s;
}

.cc-link-accent:hover { color: var(--cc-cinnamon-700); }

/* The page heading idiom shared by /shop, /cart, /checkout and /account:
   centred Cormorant over a hairline rule, with Work Sans subcopy. */
.cc-page-heading {
	text-align: center;
}

.cc-page-heading__title {
	font-family: var(--cc-font-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--cc-ink);
}

.cc-page-heading__rule {
	width: 64px;
	height: 1px;
	background: var(--cc-cinnamon-600);
	margin: 18px auto 0;
	border: 0;
}

.cc-page-heading__sub {
	margin-top: 14px;
	font-family: var(--cc-font-sans);
	font-size: 17.5px;
	font-weight: 300;
	color: var(--cc-muted);
}

/* The printed-menu row: name — leader dots — price. Used by search results,
   category listings and the About menu. */
.cc-leader {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
}

.cc-leader__left { flex: 0 1 auto; }

.cc-leader__fill {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--cc-line);
	transform: translateY(-4px);
	min-width: 18px;
}

.cc-leader__right {
	flex: 0 0 auto;
	font-family: var(--cc-font-accent);
	font-size: 15.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cc-cinnamon-600);
}

/*
 * Buttons — the outline "Add to order" and the solid terracotta primary.
 *
 * ⚠ The outline button does NOT invert on hover. It used to fill solid
 * terracotta with white text, which is a much louder gesture than the
 * reference makes: there, hovering only warms the ground to cinnamon-50 and
 * the text stays terracotta throughout. A button that changes two colours at
 * once on hover reads as a different button, not the same one under the
 * cursor, and it was the loudest of the three background mismatches.
 *
 * Text on terracotta is --cc-cream, not #fff. Pure white against the warm
 * brand colour is the one cool note on an otherwise warm page.
 *
 * ⚠ WOOCOMMERCE'S BUTTON CLASSES ARE LISTED HERE TOO, and that is the whole
 * point of this block. Only `.cc-btn` used to be styled — but the theme does
 * not render most of the buttons on this site. WooCommerce prints its own
 * `.button`, `.button.alt` and `.woocommerce-Button` on the cart, the login
 * and coupon forms, the account screens and every order page, and those were
 * falling back to grey system buttons on a site that otherwise has none.
 *
 * Styling them one screen at a time is what produced the earlier
 * `.woocommerce-MyAccount-content .button` copy of this rule, which then had
 * to be kept in step by hand. One list, one rule: a button surface WooCommerce
 * introduces anywhere is already styled.
 *
 * ⚠ EVERY button is FILLED, at the business's instruction.
 *
 * They used to be outline — transparent with a 1px terracotta border, which is
 * what the reference build does. Reported as "the buttons don't look like
 * buttons", and that is a fair reading: on a warm cream page a transparent box
 * with a hairline border reads as a bordered label, not as something you press.
 * A filled block is unambiguous. This is a deliberate departure from the 1:1
 * reference.
 *
 * `min-height` is here so a link-button and a real <button> — which the
 * browser sizes differently — come out identical, and so buttons line up
 * across a row whatever their text.
 */
.cc-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-page .button,
.woocommerce .woocommerce-Button,
.woocommerce .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--cc-font-accent);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 22px;
	border: 1px solid var(--cc-cinnamon-600);
	border-radius: 0;
	color: var(--cc-cream);
	background: var(--cc-cinnamon-600);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
	cursor: pointer;
	text-decoration: none;
}

.cc-btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce .woocommerce-button:hover {
	background: var(--cc-cinnamon-700);
	border-color: var(--cc-cinnamon-700);
	color: var(--cc-cream);
}

/*
 * `--solid` and WooCommerce's `alt` are now the same as the base, because the
 * base IS solid. Kept as names rather than deleted: they mark the primary
 * action in the markup, and templates already use them.
 */
.cc-btn--solid,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
	background: var(--cc-cinnamon-600);
	border-color: var(--cc-cinnamon-600);
	color: var(--cc-cream);
}

.cc-btn--solid:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--cc-cinnamon-700);
	border-color: var(--cc-cinnamon-700);
	color: var(--cc-cream);
}

/*
 * The smaller cut, for a row or a bar where the full 44px block would stand
 * taller than the text beside it — the account bar's Log out, every action on
 * a staff job row. Same face, same weight, same fill. In the shared sheet, not
 * staff.css, because the first place outside the staff area to need it was
 * the account page, which does not load staff.css.
 */
.cc-btn--small {
	min-height: 36px;
	padding: 8px 14px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

/*
 * The quiet alternative, for the rare place a second button must not compete
 * with the primary one beside it. Explicit, so nothing is accidentally quiet.
 */
.cc-btn--ghost {
	background: transparent;
	color: var(--cc-cinnamon-700);
}

.cc-btn--ghost:hover {
	background: var(--cc-cinnamon-50);
	color: var(--cc-cinnamon-700);
}

/*
 * Inactive, not broken.
 *
 * This was `opacity: .45` on the brand colours, which rendered "Update order"
 * as a pale pink ghost of a button and read as a rendering fault rather than
 * as "there is nothing to update yet" — which is what WooCommerce means by
 * disabling it until a quantity actually changes. A deliberate muted grey says
 * the same thing without looking like the stylesheet failed to load.
 *
 * pointer-events stays ON so the cursor and any title still respond; a
 * disabled button does not fire a click anyway. `.cc-btn--disabled` is for the
 * same look on an <a>, which CAN still navigate, so that one keeps the guard.
 */
/*
 * ⚠ Disabled is FILLED GREY, not transparent.
 *
 * Now that every live button is a filled block, a transparent disabled one no
 * longer reads as "the same button, inactive" — it reads as a different kind
 * of control, or as a rendering fault. Same shape, drained of colour.
 */
.cc-btn[disabled],
.cc-btn--solid[disabled],
.cc-btn--disabled,
.woocommerce .button[disabled],
.woocommerce button.button[disabled],
.woocommerce input.button[disabled] {
	background: var(--cc-line);
	border-color: var(--cc-line);
	color: var(--cc-muted);
	cursor: not-allowed;
}

.cc-btn[disabled]:hover,
.cc-btn--solid[disabled]:hover,
.woocommerce .button[disabled]:hover,
.woocommerce button.button[disabled]:hover,
.woocommerce input.button[disabled]:hover {
	background: var(--cc-line);
	border-color: var(--cc-line);
	color: var(--cc-muted);
}

/* An <a> can still navigate when it looks disabled, so that one is blocked. */
.cc-btn--disabled {
	pointer-events: none;
}

/* ===========================================================================
   Header

   Measured at the 1440px reference width:
     bar        1360 wide, 101 tall
     logo       191 x 71, centred in a 424px cell
     nav        DM Sans 700 / 20px / #A15C4B, letter-spacing .6px,
                line-height 40px, links butt together at 15px side padding;
                the current page is underlined
     cart/user  terracotta icons on the right, count beside the cart
   ======================================================================== */

.cc-header {
	position: relative;
	z-index: 40;
}

.cc-header__bar {
	display: flex;
	align-items: center;
	height: 101px;
}

.cc-header__logo-cell {
	display: flex;
	width: 200px;
	flex-shrink: 0;
	justify-content: flex-start;
}

.cc-header__logo {
	height: 71px;
	width: 191px;
	object-fit: contain;
}

/* The live logo is drawn 2px wider than its own aspect ratio at this
   height - 190px of ink where contain gives 188. Matched, not corrected. */
@media (min-width: 1024px) {
	.cc-header__logo { width: 190px; object-fit: fill; position: relative; left: 1px; transition: width 0.2s, height 0.2s; }
}

/*
 * ⚠ THE HEADER STAYS PUT, AS THE LIVE ONE DOES (27 Sep 2026).
 *
 * Live: fixed to the top of the window, white, no shadow; once the page has
 * scrolled past 101px it shrinks to 77.3px in 0.2s (the logo to 153 x 57,
 * still centred) and grows back above that. The page keeps the full 101.6px
 * for it, so nothing underneath jumps when it shrinks - hence .cc-header is
 * sticky at its full height and only the white bar inside it shrinks.
 * site.js sets .is-compact.
 */
@media (min-width: 1024px) {
	.cc-header {
		position: sticky;
		top: 0;
		height: 101.6px;
		margin-bottom: 0;
		pointer-events: none;
	}

	.admin-bar .cc-header { top: 32px; }

	.cc-header > * { pointer-events: auto; }

	.cc-header::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 101.6px;
		background: #fff;
		transition: height 0.2s;
	}

	.cc-header__bar {
		position: relative;
		height: 101.6px;
		transition: height 0.2s;
	}

	.cc-header.is-compact::before,
	.cc-header.is-compact .cc-header__bar { height: 77.3px; }

	.cc-header.is-compact .cc-header__logo { width: 153px; height: 57px; }

	/* Shrunk, the live links rise 16px and the two icons 13 and 10 - not
	   the 12 that centring alone gives. */
	.cc-header.is-compact .cc-nav { margin-top: 0; }
	.cc-header.is-compact .cc-header__action[data-cc-open-cart] { transform: translateY(-1px); }
	.cc-header.is-compact .cc-header__action:not([data-cc-open-cart]) { transform: translateY(2px); }

	/* The live header ignores the scrollbar: with one showing (15px), its
	   logo stays where it is and its icons move 12.5px left, where a centred
	   column moves everything 7.5px. site.js measures the scrollbar into
	   --cc-sbw; with none (a touch screen, a full-page capture) this is 0. */
	.cc-header__logo-cell { position: relative; left: calc(var(--cc-sbw, 0px) / 2); }
	.cc-header__actions { left: calc(var(--cc-sbw, 0px) / -3); }
}


.cc-nav { display: none; }

.cc-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-nav__item--has-sub { position: relative; }

.cc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 15px;
	font-family: var(--cc-font-accent);
	font-size: 20px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.6px;
	color: var(--cc-cinnamon-600);
	transition: opacity 0.2s;
}

.cc-nav__link:hover { opacity: 0.7; }

.cc-nav__link[aria-current="page"] {
	text-decoration: underline;
	/* The live underline hugs the baseline: its ink ends 3px below the
	   letters, not 8px. */
	text-underline-offset: 1.5px;
}

/* ---------------------------------------------------------------------------
   The Shop dropdown

   Measured off the reference at 1063px viewport:
     panel     white, no border / shadow / radius, z-index 100, width driven by
               its widest label (260.7px there), flush under the parent link
               and RIGHT-aligned to it
     item      DM Sans italic 700 / 18px / 36px, letter-spacing .54px,
               #A15C4B, padding 10px 30px 5px 15px  ->  51px tall
     flyout    top-aligned with its parent row, min-width 100%
     motion    closed is translateY(-10px) + opacity 0; the transition is
               transform .4s ease-out, opacity .1s ease-out

   No italic DM Sans face is self-hosted, so the browser obliques the upright
   one. That is what the reference resolves to as well.
   ------------------------------------------------------------------------ */

.cc-subnav {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 100;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: transform 0.4s ease-out, opacity 0.1s ease-out;
}

.cc-subnav__item { position: relative; }

.cc-subnav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 30px 5px 15px;
	font-family: var(--cc-font-accent);
	font-size: 19px;
	font-style: italic;
	font-weight: 700;
	line-height: 38px;
	letter-spacing: 0.54px;
	color: var(--cc-cinnamon-600);
}

.cc-subnav__link:hover,
.cc-subnav__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.cc-subnav__arrow {
	display: inline-flex;
	transition: transform 0.2s ease-out;
}

/* The second level sits beside its own row, not below it. */
.cc-subnav--flyout {
	top: 0;
	right: auto;
	left: 100%;
	min-width: 100%;
	transform: translateX(-10%);
}

/*
 * ...and opens the other way when there is no room on the right. The reference
 * does the same thing — its Lunch flyout is wide enough to overflow and opens
 * left, while the narrower Plant Based Meals flyout stays right. Which side is
 * decided at runtime, so it is a class rather than a hardcoded side.
 */
.cc-subnav__item--flip > .cc-subnav--flyout {
	left: auto;
	right: 100%;
	transform: translateX(10%);
}

.cc-subnav__item--flip > .cc-subnav__link .cc-subnav__arrow { transform: scaleX(-1); }

/* Open state. Hover drives it; focus-within is what makes it keyboard-usable. */
.cc-nav__item--has-sub:hover > .cc-subnav,
.cc-nav__item--has-sub:focus-within > .cc-subnav,
.cc-subnav__item--has-sub:hover > .cc-subnav--flyout,
.cc-subnav__item--has-sub:focus-within > .cc-subnav--flyout {
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto;
}

/* Escape closes it without moving the pointer. */
.cc-nav__item--closed > .cc-subnav,
.cc-nav__item--closed .cc-subnav {
	opacity: 0;
	pointer-events: none;
}

.cc-nav__item--has-sub:hover > .cc-nav__link svg,
.cc-nav__item--has-sub:focus-within > .cc-nav__link svg {
	transform: scaleY(-1);
}

/*
 * The chevrons need explicit sizes.
 *
 * The reset above sets `svg { height: auto }`, and inside a flex ROW that
 * resolves to 0 — with the viewBox's 1:1 aspect ratio then taking the width to
 * 0 as well. The icon's own width/height attributes never get a look in, so
 * the chevron was rendering as a real, invisible, zero-by-zero element.
 */
.cc-nav__link svg {
	flex: none;
	/* The live chevron's ink is 10 x 6, 4px further from "Shop" than a 19px
	   icon at a 4px gap put it. */
	width: 17px;
	height: 17px;
	margin-left: 4px;
	position: relative;
	top: -0.5px;
	transition: transform 0.2s ease-out;
}

.cc-subnav__arrow svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.cc-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 24px;
	color: var(--cc-cinnamon-600);
}

.cc-header__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cc-cinnamon-600);
	transition: opacity 0.2s;
}

.cc-header__action:hover { opacity: 0.7; }

/*
 * The live header's count is drawn in its icon font, which has no digits,
 * so the browser falls back to its default serif: bold Times, 24px. Named
 * here so it is the same "0" on every machine.
 */
.cc-header__cart-count {
	font-family: "Times New Roman", Times, serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
}

.cc-glyph { display: block; flex: none; }

/*
 * Placed to the live header's INK, not its boxes (1440px, 27 Sep 2026): the
 * live page carries a hidden second copy of its header whose boxes measure
 * somewhere else, so the glyphs were located by colour in a screenshot of
 * both sites - cart 1186-1208 x 38-57, count 1224-1232 x 42-57, user
 * 1290-1317 x 33-62 - and these offsets land ours on the same pixels.
 */
@media (min-width: 1024px) {
	.cc-header__actions { position: relative; top: -2.7px; margin-right: -6px; }
	.cc-header__action[data-cc-open-cart] { gap: 13px; margin-right: -3.8px; }
	.cc-header__action[data-cc-open-cart] .cc-glyph { position: relative; top: 1px; }
	.cc-header__action[data-cc-open-cart] .cc-header__cart-count { position: relative; top: 2px; }
}

/* Room between the Shop arrow and Cart (1 Oct 2026): the worded icons
   brought Cart right up against it. */
@media (min-width: 1024px) {
	.cc-header__actions { padding-left: 18px; }
}

/* Cart and My account carry their word underneath (30 Sep 2026). */
.cc-header__action--worded {
	flex-direction: column;
	justify-content: center;
	gap: 3px !important;
	margin-right: 0 !important;
}

.cc-header__icon-row {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	height: 30px;
}

.cc-header__word {
	font-family: var(--cc-font-sans);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 1023.98px) {
	.cc-header__icon-row { gap: 8px; height: 26px; }
	.cc-header__word { font-size: 13px; }
}

.cc-header__burger { display: inline-flex; }

/* The staff door: the icon at the header's icon size, with a small label so
   it is not a mystery glyph — the cart has its count, this has its word. */
/* Since 1 Oct 2026 the staff door is drawn like Cart and My account - the
   icon with its word under it (.cc-header__word) - so the three line up.
   Its old caps label beside the icon squeezed the icon to nothing once the
   other two gained their words. */
.cc-header__staff[aria-current="page"] .cc-header__staff-label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* No icon in the header may be squeezed narrower than itself. */
.cc-header__icon-row > svg,
.cc-header__icon-row > .cc-glyph { flex: none; }

.cc-mobile-nav__staff {
	border-bottom: 1px solid var(--cc-line);
	margin-bottom: 4px;
}

.cc-mobile-nav {
	display: block;
	border-top: 1px solid var(--cc-line);
	background: #fff;
}

.cc-mobile-nav[hidden] { display: none; }

.cc-mobile-nav__inner {
	display: flex;
	flex-direction: column;
	padding-block: 8px;
}

.cc-mobile-nav a {
	padding-block: 12px;
	font-family: var(--cc-font-accent);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: var(--cc-cinnamon-600);
}

/* The flattened dropdown. Indent carries the nesting the hover menu shows. */
.cc-mobile-nav__child {
	padding-block: 8px;
	padding-left: 20px;
	font-size: 19px;
	font-style: italic;
	letter-spacing: 0.54px;
}

.cc-mobile-nav__child--deep { padding-left: 40px; }

@media (min-width: 1024px) {
	.cc-header__logo-cell {
		width: 424px;
		justify-content: center;
	}

	.cc-nav {
		display: flex;
		align-items: center;
		margin-left: 76px;
		/* The live links' ink sits higher (27 Sep 2026); the nav is centred
		   in the bar, so this moves it by only part of the change. */
		margin-top: 8px;
	}

	/* 55px / 85px matched the live header's two bare icons. With a word
	   under each (and Staff for staff) the icons are wider, so the spacing
	   is tighter and the right padding smaller, or My account ran off the
	   edge at 1280px (1 Oct 2026). */
	.cc-header__actions {
		gap: 40px;
		padding-right: 36px;
	}

	.cc-header__burger,
	.cc-mobile-nav { display: none; }
}

/* ===========================================================================
   Footer

   Measured at the 1440px reference width: full-bleed #A15C4B band 283 tall;
   logo 259 x 97 at x=120, y=40; centred "Cinnamon Catering" in Cormorant 30px
   white; hours on 110px / 170px tracks; then the phone line in gold, then the
   ABN. The rendered innerText is character-identical to the live site.
   ======================================================================== */

.cc-footer {
	background: var(--cc-cinnamon-600);
	color: #fff;
}

.cc-footer__inner {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 1440px;
	height: auto;
	padding: 40px 24px;
}

.cc-footer__logo {
	margin-inline: auto;
	height: 97px;
	width: 259px;
	object-fit: contain;
}

.cc-footer__body {
	margin-top: 32px;
	text-align: center;
}

.cc-footer__name {
	font-family: var(--cc-font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: normal;
	color: #fff;
}

/*
 * The hours, phone and ABN, measured off the live footer (27 Sep 2026): each
 * line 36px tall with 10px between, so a 46px pitch all the way down; the
 * hours as two CENTRED columns, 144px and 212px, 3px apart - "Sunday" sits
 * centred under "Mon - Sat", "Closed" under the times.
 */
.cc-footer__hours {
	margin: 10px 0 0;
	font-size: 19px;
	font-weight: 300;
	line-height: 38px;
	color: #fff;
}

.cc-footer__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
}

.cc-footer__hours > * + * { margin-top: 10px; }

.cc-footer__hours-row dt {
	width: 144px;
	text-align: center;
	margin: 0;
}

.cc-footer__hours-row dd {
	width: 212px;
	text-align: center;
	margin: 0;
}

/* "Delivering Mon to Sat: 7am to 5pm" - where the hours table was. */
.cc-footer__delivering {
	margin: 10px 0 0;
	font-size: 19px;
	font-weight: 300;
	line-height: 38px;
	color: #fff;
}

/* A line with no `|` renders as one centred line spanning both tracks. */
.cc-footer__hours-line { line-height: 36px; }

.cc-footer__phone {
	margin-top: 10px;
	font-size: 19px;
	font-weight: 300;
	line-height: 38px;
	letter-spacing: 0.06em;
	/*
	 * ⚠ CREAM, NOT --cc-gold, AND THE GOLD COULD NOT BE SAVED.
	 *
	 * #C49464 on the terracotta band is 1.87:1 — against 4.5:1 for text this
	 * size — which made the phone number the least legible thing in the
	 * footer. It is also the number people ring, sitting directly above an
	 * ABN nobody needs to read at 5.06:1.
	 *
	 * Lightening the gold does not rescue it: reaching 4.5:1 on this ground
	 * takes it 87%% of the way to white (#F7F1EB), which is not a gold any
	 * more. There is no legible version of this colour here, so the choice is
	 * the accent or the phone number, and it is the phone number.
	 *
	 * Cream rather than the #fff the ABN uses, so the line keeps a little
	 * warmth against it: 4.75:1, and still distinguishable from its neighbour.
	 *
	 * ⚠ SUPERSEDED 27 Sep 2026: the business wants the site 1:1 with the
	 * live one, and measured there the phone is white, not gold and not
	 * cream. The legibility argument above stands; it is simply no longer a
	 * reason to differ.
	 */
	color: #fff;
}

.cc-footer__abn {
	margin-top: 12px;
	letter-spacing: 0.06em;
	font-size: 19px;
	font-weight: 300;
	line-height: 38px;
	color: #fff;
}

@media (min-width: 1024px) {
	.cc-footer__inner {
		height: 283px;
		padding: 0;
	}

	.cc-footer__logo {
		position: absolute;
		/* The live logo moves half the scrollbar left when one shows,
		   where ours would stay put (--cc-sbw: see the header). */
		left: calc(120px - var(--cc-sbw, 0px) / 2);
		top: 40px;
		margin-inline: 0;
	}

	.cc-footer__body {
		margin-top: 0;
		padding-top: 30px;
	}
}

/* ===========================================================================
   Notices — WooCommerce's messages, restyled into the site's idiom.
   ======================================================================== */

.cc-notices { margin-bottom: 28px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.cc-notice {
	list-style: none;
	margin: 0 0 14px;
	padding: 14px 18px;
	border-left: 3px solid var(--cc-cinnamon-600);
	background: var(--cc-cinnamon-50);
	color: var(--cc-ink);
	font-size: 15.5px;
	font-family: var(--cc-font-sans);
}

.woocommerce-error {
	border-left-color: #9B2C2C;
	background: #FBEAEA;
}

.woocommerce-error li { list-style: none; }

/*
 * ⚠ NOT `float: right`, which is what this rule used to do and what made
 * "View cart" hang 33px out the bottom of its own notice. A float is out
 * of normal flow, so the notice never grew to contain it: the box sized
 * itself to its one line of text (49px) while the button beside it is 47px
 * plus padding. Invisible while `.button` was unstyled and 24px of bare
 * text — it only surfaced once the filled-button rule was repaired.
 *
 * A flex row keeps the button IN flow, so the notice grows to fit it and
 * the two centre on each other. `margin-left: auto` does the job `float`
 * was there for; WooCommerce prints the text before the button, so the
 * reading order already puts them left-to-right.
 *
 * The typography and colour this rule used to declare are gone because
 * they never applied: `.woocommerce a.button` scores (0,2,1) against this
 * selector's (0,2,0), so the filled-button rule won every one of them.
 * Leaving them in only invited someone to edit a line that does nothing.
 */
.woocommerce-message,
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * ⚠ `order`, because WooCommerce does not agree with itself about where the
 * button goes in the markup. The add-to-cart notice prints its text first
 * and the button after; the "confirm your email address" notice prints the
 * BUTTON first and the text after. Relying on document order put that second
 * button in the middle of its own notice, with empty space to its left.
 *
 * order:2 places it after the anonymous text item (which is order:0) in both
 * cases, and margin-left:auto then takes it to the right edge.
 */
.woocommerce-message .button,
.woocommerce-info .button {
	float: none;
	flex: 0 0 auto;
	order: 2;
	margin-left: auto;
}

/* ===========================================================================
   Motion
   ======================================================================== */

@keyframes cc-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.cc-fade-up { animation: cc-fade-up 0.6s var(--cc-ease-out-expo) both; }

@media (prefers-reduced-motion: reduce) {
	.cc-fade-up { animation: none; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ===========================================================================
   Print — strip the chrome so an invoice prints as a standalone document.
   ======================================================================== */

@media print {
	.cc-header,
	.cc-footer,
	.cc-cart-drawer,
	.cc-popup,
	.cc-banner {
		display: none !important;
	}

	body { background: #fff; }
}