/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.2.0
Text Domain: blocksy-child

Crackers Online Chennai — consolidated stylesheet

ONE RULE PER SELECTOR. To change something, edit the existing
rule. Do not append a second one — that is what caused every
layout surprise in this build.
*/

/* ============================================================
   1 · TOKENS
   ============================================================ */

:root {
	--coc-night:      #191228;
	--coc-night-deep: #0E0A17;
	--coc-ink:        #14100F;

	--coc-lac:      #D4152E;
	--coc-marigold: #FFB020;
	--coc-peacock:  #00806B;
	--coc-magenta:  #C6178C;
	--coc-foil:     #D4A537;

	--coc-paper:     #FAF6EC;
	--coc-paper-dim: #EFE7D4;
	--coc-rule:      #DCD2BC;
	--coc-mute:      #8A8070;

	--coc-display: 'Rozha One', Georgia, serif;
	--coc-body:    'Mukta Malar', system-ui, -apple-system, sans-serif;

	--coc-h1: clamp(2.2rem, 8vw, 4.5rem);
	--coc-h2: clamp(1.6rem, 5vw, 2.75rem);
	--coc-h3: clamp(1.25rem, 3.5vw, 1.6rem);
	--coc-body-size: clamp(1rem, 2.5vw, 1.0625rem);

	--coc-gap:    clamp(1rem, 4vw, 2rem);
	--coc-band:   clamp(2.5rem, 8vw, 5rem);
	--coc-radius: 3px;
}

/* ============================================================
   2 · BASE
   ============================================================ */

body {
	font-family: var(--coc-body) !important;
	font-size: var(--coc-body-size);
	line-height: 1.6;
	color: var(--coc-ink);
	background: var(--coc-paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, .coc-display {
	font-family: var(--coc-display) !important;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--coc-h1); }
h2 { font-size: var(--coc-h2); }
h3 { font-size: var(--coc-h3); }

.price,
.woocommerce-Price-amount,
.coc-sku { font-variant-numeric: tabular-nums; }

.coc-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--coc-gap);
}

.coc-band { padding: var(--coc-band) 0; }
.coc-band--paper { background: var(--coc-paper); }
.coc-band--dim   { background: var(--coc-paper-dim); }

.coc-band--night {
	background: var(--coc-night);
	color: var(--coc-paper);
}

.coc-band--night h2 { color: var(--coc-paper); }
.coc-band--night ul { padding-left: 1.15rem; }
.coc-band--night li { margin-bottom: .35rem; }
.coc-band--night li::marker { color: var(--coc-foil); }

.coc-eyebrow {
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--coc-lac);
	margin-bottom: .6em;
	font-weight: 700;
}

.coc-band--night .coc-eyebrow { color: var(--coc-foil); }
.coc-band > .coc-wrap > h2 { margin: 0 0 1rem; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid var(--coc-marigold);
	outline-offset: 2px;
}

/* ============================================================
   3 · BUTTONS
   ============================================================ */

.coc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--coc-body);
	font-weight: 700;
	font-size: 1rem;
	padding: .85em 1.6em;
	border-radius: var(--coc-radius);
	border: 0;
	background: var(--coc-lac);
	color: #fff;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.coc-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { filter: brightness(1.08); color: #fff; }

.coc-btn:active { transform: translateY(1px); }

.coc-btn--ghost {
	background: transparent;
	color: var(--coc-paper);
	box-shadow: inset 0 0 0 1.5px rgba(212,165,55,.6);
}

.coc-btn--gift { background: var(--coc-marigold); color: var(--coc-ink); }

.coc-btn--sm {
	padding: .6em 1em;
	font-size: .85rem;
	min-height: 42px;
	margin-top: auto;
}

/* ============================================================
   4 · SPARK RULE
   ============================================================ */

.coc-spark-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--coc-gap) 0;
}

.coc-spark-rule::before,
.coc-spark-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--coc-foil) 40%, var(--coc-foil) 60%, transparent);
}

.coc-spark-rule i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: block;
	animation: coc-pulse 2.4s ease-in-out infinite;
}

.coc-spark-rule i:nth-child(1) { background: var(--coc-lac);      animation-delay: 0s;  }
.coc-spark-rule i:nth-child(2) { background: var(--coc-marigold); animation-delay: .3s; }
.coc-spark-rule i:nth-child(3) { background: var(--coc-peacock);  animation-delay: .6s; }
.coc-spark-rule i:nth-child(4) { background: var(--coc-magenta);  animation-delay: .9s; }

@keyframes coc-pulse {
	0%, 100% { opacity: .35; transform: scale(.8); }
	50%      { opacity: 1;   transform: scale(1.15); }
}

/* ============================================================
   5 · HERO
   ============================================================ */

.coc-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 120%, rgba(212,21,46,.35), transparent 60%),
		radial-gradient(ellipse at 15% -10%, rgba(255,176,32,.18), transparent 55%),
		var(--coc-night);
	color: var(--coc-paper);
	padding: var(--coc-band) var(--coc-gap);
	text-align: center;
}

.coc-hero--slides {
	min-height: 78vh;
	padding-top: 2rem;
	padding-bottom: 3.5rem;
}

.coc-hero h1 { color: var(--coc-paper); margin: 0 0 .5em; }

.coc-hero__logo {
	display: block;
	margin: 0 auto .75rem;
	width: clamp(280px, 52vw, 480px);
	height: auto;
	filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
}

.coc-hero__eyebrow {
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--coc-foil);
	margin-bottom: 1.25em;
}

.coc-hero__sub {
	max-width: 34ch;
	margin: 0 auto 2em;
	color: rgba(250,246,236,.82);
}

.coc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

.coc-hero__bg { position: absolute; inset: 0; z-index: 0; }
.coc-hero__track { display: flex; height: 100%; }

.coc-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.coc-hero__slide:first-child,
.coc-hero__slide.is-on { opacity: 1; }

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

.coc-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, var(--coc-night-deep) 2%, rgba(14,10,23,.55) 45%, rgba(14,10,23,.25)),
		radial-gradient(ellipse at 50% 115%, rgba(212,21,46,.3), transparent 62%);
}

.coc-hero__content { position: relative; z-index: 2; text-align: center; }

.coc-hero__dots {
	position: absolute;
	z-index: 3;
	left: 0; right: 0; bottom: 1.1rem;
	display: flex;
	gap: .4rem;
	justify-content: center;
}

.coc-hero__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(250,246,236,.35);
	transition: background .2s, width .2s;
}

.coc-hero__dots button[aria-current="true"] {
	background: var(--coc-marigold);
	width: 22px;
	border-radius: 4px;
}

/* ============================================================
   6 · NOTICE BOARD
   ============================================================ */

.coc-board {
	position: relative;
	overflow: hidden;
	padding: calc(var(--coc-band) + 1rem) 0 var(--coc-band);
	background:
		radial-gradient(circle at 15% 10%, rgba(255,176,32,.13), transparent 38%),
		radial-gradient(circle at 85% 85%, rgba(198,23,140,.15), transparent 40%),
		linear-gradient(165deg, #2B1450, #1A0736 60%, #12042A);
}

.coc-board__lights {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 14px;
	background-image: radial-gradient(circle, var(--coc-marigold) 34%, transparent 36%);
	background-size: 26px 14px;
	background-repeat: repeat-x;
	animation: coc-twinkle 3.2s ease-in-out infinite;
	box-shadow: 0 0 22px rgba(255,176,32,.45);
}

.coc-board__lights--bottom { top: auto; bottom: 0; animation-delay: 1.6s; }

@keyframes coc-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.coc-board__eyebrow {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--coc-foil);
	font-weight: 700;
	text-align: center;
	margin: 0 0 1.25rem;
}

.coc-board__stage {
	position: relative;
	max-width: 660px;
	margin: 0 auto;
	min-height: 210px;
}

.coc-board__note {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	padding: 2rem 1.5rem;
	background: var(--coc-paper);
	border-radius: 4px;
	border-top: 5px solid var(--ink, var(--coc-lac));
	box-shadow: 0 14px 34px rgba(0,0,0,.42);
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}

.coc-board__note.is-on { opacity: 1; transform: none; pointer-events: auto; }

.coc-board__num {
	font-family: var(--coc-display);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--ink, var(--coc-lac));
	opacity: .28;
	margin-bottom: .2rem;
}

.coc-board__note h3 {
	font-family: var(--coc-display);
	font-size: clamp(1.4rem, 4vw, 2rem);
	margin: 0 0 .5rem;
	color: var(--coc-ink);
}

.coc-board__note p {
	margin: 0;
	max-width: 40ch;
	font-size: .95rem;
	line-height: 1.55;
	color: #5F5849;
}

.coc-board__note strong { color: var(--coc-lac); }

.coc-board__dots {
	display: flex;
	gap: .45rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.coc-board__dots button {
	position: relative;
	width: 30px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(250,246,236,.25);
	cursor: pointer;
	overflow: hidden;
}

.coc-board__dots button span {
	position: absolute;
	inset: 0 100% 0 0;
	background: var(--coc-marigold);
}

.coc-board__dots button[aria-current="true"] span { animation: coc-fill 5s linear forwards; }

@keyframes coc-fill { to { inset: 0 0 0 0; } }

.coc-board.is-paused .coc-board__dots button span { animation-play-state: paused; }

/* ============================================================
   7 · CAROUSELS AND CARDS
   ============================================================ */

.coc-carousel {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: var(--coc-gap);
	padding: .25rem var(--coc-gap) 1rem;
	margin: 0 calc(var(--coc-gap) * -1);
	scrollbar-width: none;
}

.coc-carousel::-webkit-scrollbar { display: none; }

.coc-carousel > * { flex: 0 0 62%; scroll-snap-align: start; }
.coc-carousel--products > * { flex-basis: 68%; }

.coc-carousel__hint {
	font-size: .78rem;
	color: var(--coc-mute);
	text-align: center;
	margin-top: -.25rem;
}

.coc-tile {
	position: relative;
	display: block;
	border-radius: var(--coc-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--coc-night);
	text-decoration: none;
	isolation: isolate;
}

.coc-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.coc-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	opacity: .28;
	transition: opacity .3s ease;
	background: var(--tile-ink, var(--coc-lac));
}

.coc-tile:hover::before { opacity: .1; }
.coc-tile:hover img { transform: scale(1.05); }

.coc-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 2rem .85rem .85rem;
	background: linear-gradient(transparent, rgba(14,10,23,.9));
}

.coc-tile__name {
	font-family: var(--coc-display);
	font-size: 1.15rem;
	color: var(--coc-paper);
	line-height: 1.15;
	display: block;
}

.coc-tile__count {
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--coc-foil);
}

.coc-tile__noimg {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(45deg, rgba(250,246,236,.05) 0 10px, transparent 10px 20px),
		var(--coc-night);
}

.coc-card {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: var(--coc-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.coc-card:hover {
	border-color: var(--coc-foil);
	box-shadow: 0 6px 22px rgba(20,16,15,.12);
}

.coc-card__media {
	position: relative;
	display: block;
	background: var(--coc-paper-dim);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.coc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .3s ease;
}

.coc-card:hover .coc-card__media img { transform: scale(1.04); }

.coc-card__flash {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--coc-peacock);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	padding: .3em .6em;
	border-radius: 2px;
}

.coc-card__oos {
	position: absolute;
	inset: auto 0 0 0;
	background: rgba(14,10,23,.86);
	color: var(--coc-paper);
	font-size: .75rem;
	font-weight: 600;
	text-align: center;
	padding: .4em;
}

.coc-card__body {
	padding: .8rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.coc-card__name {
	font-family: var(--coc-body);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.coc-card__name a { color: var(--coc-ink); text-decoration: none; }
.coc-card__name a:hover { color: var(--coc-lac); }

.coc-card__price {
	margin: 0;
	font-weight: 700;
	color: var(--coc-lac);
	font-size: 1.05rem;
}

.coc-card__price del {
	color: #9A9182;
	font-weight: 400;
	font-size: .82em;
	margin-right: .3em;
}

.coc-card__price ins { text-decoration: none; }

.coc-sku {
	font-size: .68rem;
	letter-spacing: .1em;
	color: #9A9182;
}

.coc-combo__lede {
	max-width: 46ch;
	font-size: .95rem;
	color: #5F5849;
	margin: -.5rem 0 1.25rem;
}

/* ============================================================
   8 · QUICK ORDER
   ============================================================ */

.coc-qo { background: var(--coc-paper); padding-bottom: 110px; }

.coc-qo__head {
	background: var(--coc-night);
	color: var(--coc-paper);
	padding: 1.75rem 0 1.25rem;
}

.coc-qo__head h1 {
	color: var(--coc-paper);
	margin: 0;
	font-size: clamp(1.7rem, 6vw, 2.6rem);
}

.coc-qo__headinner {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 3vw, 1.5rem);
}

.coc-qo__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.coc-qo__logo img {
	width: auto;
	height: clamp(44px, 9vw, 68px);
	display: block;
}

.coc-qo__filter {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--coc-night-deep);
	border-bottom: 2px solid var(--coc-foil);
}

.coc-qo__filterinner {
	display: flex;
	gap: .4rem;
	overflow-x: auto;
	padding: .6rem 104px .6rem var(--coc-gap);
	scrollbar-width: none;
	max-width: 1200px;
	margin: 0 auto;
}
.coc-qo__filterinner::-webkit-scrollbar { display: none; }

.coc-qo__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--coc-body);
	font-size: .78rem;
	font-weight: 600;
	padding: .45em .9em;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	color: rgba(250,246,236,.8);
	background: rgba(250,246,236,.08);
	border: 1px solid rgba(212,165,55,.28);
	transition: background .15s, color .15s, border-color .15s;
}

.coc-qo__chip span { font-size: .68rem; opacity: .6; }
.coc-qo__chip:hover { background: rgba(250,246,236,.16); }

.coc-qo__chip.is-on {
	background: var(--coc-lac);
	border-color: var(--coc-lac);
	color: #fff;
}

.coc-qo__chip.is-on span { opacity: .85; }

.coc-qo__cat { padding-top: 2rem; scroll-margin-top: 80px; }
.coc-qo__cat.is-hidden { display: none; }

.coc-qo__catname {
	font-family: var(--coc-display);
	font-size: 1.5rem;
	margin: 0 0 .6rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--coc-foil);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.coc-qo__catname span {
	font-family: var(--coc-body);
	font-size: .75rem;
	color: var(--coc-mute);
}

.coc-qo__rows {
	display: block;
	background: #fff;
	border: 1px solid var(--coc-rule);
}

.coc-qo__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .7rem;
	padding: .6rem .7rem;
	border-top: 1px solid var(--coc-rule);
}

.coc-qo__row:nth-child(even) { background: var(--coc-paper); }
.coc-qo__row.is-oos { opacity: .5; }

.coc-qo__row.is-active {
	background: #FFF4D6;
	box-shadow: inset 4px 0 0 var(--coc-lac);
}

.coc-qo__thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--coc-rule);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	cursor: zoom-in;
}

.coc-qo__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.coc-qo__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #F0EADA 0 6px, #E4DCC8 6px 12px);
}

.coc-qo__info {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.coc-qo__title {
	display: block;
	width: 100%;
	font-weight: 600;
	font-size: .88rem;
	line-height: 1.25;
	color: var(--coc-ink);
	text-decoration: none;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.coc-qo__info .coc-sku { display: block; white-space: nowrap; }

.coc-qo__prices {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	flex-wrap: wrap;
	margin: .15rem 0 0;
}

.coc-qo__mrp {
	color: #9A9182;
	text-decoration: line-through;
	font-size: .8rem;
}

.coc-qo__now {
	color: var(--coc-lac);
	font-weight: 700;
	font-size: 1rem;
}

.coc-qo__off {
	background: var(--coc-peacock);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	padding: .15em .4em;
	border-radius: 2px;
	white-space: nowrap;
}

.coc-qo__oos { font-size: .75rem; color: #9A9182; }

.coc-qo__amt {
	flex: 0 0 84px;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.coc-qo__qty {
	flex: 0 0 auto;
	width: auto;
	max-width: 112px;
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--coc-rule);
	border-radius: 99px;
	overflow: hidden;
	transition: border-color .15s ease;
}

.coc-step {
	flex: 0 0 32px;
	width: 32px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--coc-mute);
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.coc-step[data-step="1"] { color: var(--coc-lac); }
.coc-step:hover { background: var(--coc-paper-dim); }
.coc-step:active { transform: scale(.92); }

.coc-qo__qty input {
	flex: 0 0 42px;
	width: 42px;
	height: 36px;
	border: 0;
	background: none;
	text-align: center;
	font-weight: 700;
	font-size: .9rem;
	color: #B5AC9A;
	padding: 0;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}

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

.coc-qo__row.is-active .coc-qo__qty { border-color: var(--coc-lac); }
.coc-qo__row.is-active .coc-qo__qty input { color: var(--coc-lac); }

.coc-qo__row.is-active .coc-step[data-step="1"] {
	background: var(--coc-lac);
	color: #fff;
	border-radius: 99px;
}

.coc-qo__bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100;
	background: var(--coc-night-deep);
	border-top: 2px solid var(--coc-foil);
	padding-bottom: env(safe-area-inset-bottom);
}

.coc-qo__barinner {
	max-width: 1200px;
	margin: 0 auto;
	/*
	 * Full width again: both floating buttons now sit above this bar rather
	 * than in its right-hand corner, so View cart no longer has to make room
	 * for them and can go back to the edge.
	 */
	padding: .7rem var(--coc-gap);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.coc-qo__back {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	flex: 0 0 auto;
	font-weight: 600;
	font-size: .88rem;
	color: rgba(250,246,236,.82);
	text-decoration: none;
	white-space: nowrap;
}

.coc-qo__back:hover { color: var(--coc-marigold); }

/* "Only 4 left" under a row whose quantity hit the stock ceiling. */
.coc-qo__stock {
	grid-column: 2 / -1;
	margin: 0;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--coc-mute);
}

.coc-qo__stock:empty { display: none; }

.coc-qo__stock.is-warn { color: var(--coc-lac); font-weight: 600; }

/* On a narrow phone the arrow alone has to carry it — the total and the
   View cart button matter more than the words. */
@media (max-width: 480px) {
	.coc-qo__back span { display: none; }
}

.coc-qo__sum {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
	flex: 1 1 auto;
}
.coc-qo__total {
	font-size: 1.35rem;
	color: var(--coc-marigold);
	font-variant-numeric: tabular-nums;
}

.coc-qo__items { font-size: .75rem; color: rgba(250,246,236,.7); }
.coc-qo__items.is-gift { color: var(--coc-marigold); font-weight: 600; }

.coc-qo__bar .coc-btn { margin-left: auto; }
.coc-qo__bar .coc-btn:disabled { opacity: .4; cursor: not-allowed; }

.coc-qo__submit {
	margin-left: auto;
	white-space: nowrap;
	padding: .65em 1.4em;
	font-size: .9rem;
	min-height: 44px;
	background: var(--coc-lac) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--coc-radius);
	font-weight: 700;
	font-family: var(--coc-body);
}
.coc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	background: rgba(14,10,23,.92);
	padding: 1.5rem;
	cursor: zoom-out;
}

.coc-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 4px; }

/* ============================================================
   9 · HEADER ACTIONS · WHATSAPP · CART DRAWER
   ============================================================ */

/*
 * Account and cart, parked at the top of the page rather than pinned to the
 * screen. As fixed elements they floated over whatever happened to be under
 * them — the header menu and the category filter bar — on every scroll
 * position. Absolute keeps them in the corner where they belong and lets
 * them scroll away with the rest of the header.
 */
.coc-actions {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 130;
	display: flex;
	gap: .4rem;
}

/*
 * Clear the WordPress admin bar — 32px wide screens, 46px narrow ones —
 * plus a little more, because the cart count badge sits 3px proud of the
 * button and was being sliced off by the bar above it.
 */
.admin-bar .coc-actions { top: 52px; }

@media screen and (max-width: 782px) {
	.admin-bar .coc-actions { top: 66px; }
}


.coc-actions__btn {
	position: relative;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(14,10,23,.72);
	backdrop-filter: blur(6px);
	color: var(--coc-paper);
	border: 1px solid rgba(212,165,55,.35);
	transition: background .15s, border-color .15s;
}

.coc-actions__btn:hover {
	background: var(--coc-lac);
	border-color: var(--coc-lac);
	color: #fff;
}

.coc-actions__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 19px;
	height: 19px;
	padding: 0 4px;
	border-radius: 10px;
	background: var(--coc-marigold);
	color: var(--coc-ink);
	font-size: .68rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
}

.coc-actions__count.is-empty { display: none; }

/*
 * WhatsApp button, stacked directly above the Zoho SalesIQ launcher.
 *
 * SalesIQ plants its own bubble in the bottom-right corner and we cannot
 * style it from here, so this clears it instead: its launcher is roughly
 * 60px tall sitting ~20px off the bottom, hence ~100px to sit clear of it.
 * If Zoho's size is ever changed in their console, adjust the two custom
 * properties below — nothing else needs touching.
 */
.coc-wa {
	--coc-wa-bottom: 100px;
	--coc-wa-right: 24px;

	position: fixed;
	right: var(--coc-wa-right);
	bottom: var(--coc-wa-bottom);
	/*
	 * Above SalesIQ. Zoho stacks its launcher at around z-index 1000000 and
	 * its container covers the whole corner, so at our old 95 this button
	 * was simply buried — present in the page and invisible on the phone.
	 */
	z-index: 1000001;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25D366;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* ------------------------------------------------------------------
   Zoho SalesIQ launcher
   ------------------------------------------------------------------
   Zoho owns this markup and injects it after page load, so these are
   overrides on .zsiq_floatmain — its fixed positioning container.
   Sized to match the WhatsApp button so the two read as a pair, and
   lifted clear of the sticky order bar instead of landing on the
   View cart button.

   The durable place to change the launcher is the SalesIQ console
   (Settings > Brands > Personalization > Chat Widget). Treat this as a
   skin over it and re-check after a SalesIQ update.
   ------------------------------------------------------------------ */
.zsiq_floatmain {
	/*
	 * Scaled rather than sized. Setting width/height on the container does
	 * nothing useful — Zoho's inner markup carries its own dimensions, so
	 * the bubble stayed larger than the WhatsApp button. A transform shrinks
	 * whatever it renders, anchored to the corner it already sits in.
	 *
	 * One number to tune if it still does not match: --coc-siq-scale.
	 */
	--coc-siq-scale: .75;

	transform: scale( var(--coc-siq-scale) ) !important;
	transform-origin: bottom right !important;
	bottom: 24px !important;
	right: 24px !important;
}

/*
 * Quick order pins a 66px bar to the bottom of the screen, so both
 * floating buttons step up above it — chat first, WhatsApp above that.
 */
.page-template-page-quick-order .zsiq_floatmain { bottom: 84px !important; }
.page-template-page-quick-order .coc-wa { --coc-wa-bottom: 150px; }

.coc-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.coc-drawer.is-on { visibility: visible; pointer-events: auto; }

.coc-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(14,10,23,.6);
	opacity: 0;
	transition: opacity .25s ease;
}

.coc-drawer.is-on .coc-drawer__scrim { opacity: 1; }

.coc-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(400px, 90vw);
	background: var(--coc-paper);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	box-shadow: -8px 0 30px rgba(0,0,0,.3);
}

.coc-drawer.is-on .coc-drawer__panel { transform: none; }

.coc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.1rem;
	background: var(--coc-night);
	color: var(--coc-paper);
	border-bottom: 2px solid var(--coc-foil);
}

.coc-drawer__head strong { font-size: 1rem; color: var(--coc-marigold); }

.coc-drawer__x {
	background: none;
	border: 0;
	color: var(--coc-paper);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .2rem;
}

.coc-drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.coc-drawer__list { list-style: none; margin: 0; padding: 0; flex: 1; }

.coc-drawer__item {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	gap: .7rem;
	align-items: center;
	padding: .7rem 1.1rem;
	border-bottom: 1px solid var(--coc-rule);
}

.coc-drawer__item img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 4px;
}

.coc-drawer__noimg {
	width: 46px;
	height: 46px;
	display: block;
	border-radius: 4px;
	background: repeating-linear-gradient(45deg, #F0EADA 0 6px, #E4DCC8 6px 12px);
}

.coc-drawer__name {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--coc-ink);
}

.coc-drawer__qty { display: block; font-size: .75rem; color: var(--coc-mute); margin-top: .1rem; }

.coc-drawer__sub {
	font-weight: 700;
	font-size: .92rem;
	color: var(--coc-lac);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.coc-drawer__foot {
	padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--coc-rule);
}

.coc-drawer__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .8rem;
	font-size: .9rem;
}

.coc-drawer__total strong { font-size: 1.3rem; color: var(--coc-lac); }
.coc-drawer__checkout { width: 100%; margin-bottom: .5rem; }

.coc-drawer__viewcart,
.coc-drawer__keep {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: 0;
	padding: .5rem;
	font-family: var(--coc-body);
	font-size: .85rem;
	color: #6B6355;
	cursor: pointer;
	text-decoration: underline;
}

.coc-drawer__loading,
.coc-drawer__empty {
	padding: 2rem 1.1rem;
	text-align: center;
	color: var(--coc-mute);
	font-size: .9rem;
}

/* ============================================================
   10 · CART · COUPONS · CHECKOUT
   ============================================================ */

.coc-progress {
	background: var(--coc-night);
	border-radius: 6px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
}

.coc-progress__bar {
	height: 8px;
	border-radius: 4px;
	background: rgba(250,246,236,.14);
	overflow: hidden;
	margin-bottom: .6rem;
}

.coc-progress__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--coc-lac), var(--coc-marigold));
	transition: width .4s ease;
}

.coc-progress__text { margin: 0; font-size: .88rem; color: rgba(250,246,236,.88); }
.coc-progress__text .woocommerce-Price-amount { color: var(--coc-marigold); font-weight: 700; }

.coc-progress__won {
	margin: .4rem 0 0;
	font-size: .82rem;
	font-weight: 700;
	color: var(--coc-marigold);
}

.coc-giftflag {
	display: inline-block;
	background: var(--coc-marigold);
	color: var(--coc-ink);
	font-size: .68rem;
	font-weight: 700;
	padding: .2em .5em;
	border-radius: 2px;
	margin-left: .4em;
	vertical-align: middle;
}

.coc-coupons {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: .7rem;
	overflow-x: auto;
	padding: .3rem .2rem .8rem;
	margin: 0;
	background: none;
	border: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.coc-coupons::-webkit-scrollbar { display: none; }

.coc-coupon {
	flex: 0 0 128px;
	position: relative;
	background: #fff !important;
	border: 1.5px dashed var(--coc-peacock) !important;
	border-radius: 6px !important;
	padding: .6rem .55rem !important;
	margin: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	text-align: center;
	cursor: pointer;
	box-shadow: none !important;
	transition: border-color .15s, background .15s;
}

.coc-coupon::before,
.coc-coupon::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--coc-paper);
	top: 50%;
	transform: translateY(-50%);
}

.coc-coupon::before { left: -7px; }
.coc-coupon::after  { right: -7px; }

.coc-coupon__pct {
	display: block;
	font-family: var(--coc-display);
	font-size: 1.35rem;
	color: var(--coc-peacock);
	line-height: 1;
}

.coc-coupon__min {
	display: block;
	font-size: .58rem;
	color: #6B6355;
	margin: .15rem 0 .35rem;
}

.coc-coupon__code {
	display: block;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	background: var(--coc-paper-dim);
	border-radius: 2px;
	padding: .2em;
}

.coc-coupon.is-on { border-style: solid; border-color: var(--coc-lac); background: #FFF4F5; }
.coc-coupon.is-on .coc-coupon__pct { color: var(--coc-lac); }
.coc-coupon.is-on .coc-coupon__code { background: var(--coc-lac); color: #fff; }
.coc-coupon.is-locked { opacity: .45; cursor: not-allowed; }

.coc-qrbox {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 6px;
	padding: 1rem;
	margin: .8rem 0;
	text-align: center;
}

.coc-qr {
	width: 150px;
	height: 150px;
	margin: 0 auto .5rem;
	display: block;
	border: 5px solid #fff;
	outline: 1px solid var(--coc-rule);
}

/*
 * The uploaded QR is rarely a perfect square — a phone screenshot is tall.
 * Forcing it into the 150x150 box above stretches the code and a distorted
 * QR will not scan, so the real image keeps its own proportions.
 */
img.coc-qr {
	width: 170px;
	height: auto;
	max-height: 260px;
	object-fit: contain;
}

.coc-qr--placeholder {
	background:
		repeating-linear-gradient(90deg, var(--coc-ink) 0 8px, #fff 8px 16px),
		repeating-linear-gradient(0deg, var(--coc-ink) 0 8px, transparent 8px 16px);
}

.coc-qr__hint { font-size: .78rem; color: var(--coc-mute); margin: 0 0 .6rem; }

.coc-bank {
	text-align: left;
	font-size: .82rem;
	line-height: 1.8;
	border-top: 1px dashed var(--coc-rule);
	padding-top: .6rem;
	margin: 0;
	display: grid;
	grid-template-columns: 82px 1fr;
}

.coc-bank dt { color: var(--coc-mute); }
.coc-bank dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.coc-checkout__note {
	background: #E9F5F1;
	border-left: 4px solid var(--coc-peacock);
	padding: .8rem 1rem;
	border-radius: 4px;
	font-size: .88rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.coc-checkout__note strong { color: var(--coc-peacock); }
.coc-checkout__note--warn { background: #FFF4E0; border-left-color: var(--coc-marigold); }
.coc-checkout__note--warn strong { color: #9A6A00; }

.coc-ship-note {
	background: var(--coc-paper-dim);
	border-radius: 4px;
	padding: .6rem .8rem;
	font-size: .85rem;
	margin-bottom: .8rem;
}

.coc-ship-note.is-free { background: #E9F5F1; color: var(--coc-peacock); font-weight: 700; }

.coc-transport {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-left: 4px solid var(--coc-magenta);
	border-radius: 4px;
	padding: .7rem .85rem;
	font-size: .82rem;
	line-height: 1.55;
	margin-bottom: .8rem;
}

.coc-transport strong { display: block; font-size: .9rem; }
.coc-transport span { color: var(--coc-mute); }

.coc-transport-row.is-hidden,
.coc-hidden { display: none !important; }

.coc-map__wrap { position: relative; margin-bottom: .6rem; }

.coc-map {
	height: 210px;
	border: 1px solid var(--coc-rule);
	border-radius: 6px;
	background: var(--coc-paper-dim);
}

.coc-map__locate {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 400;
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 4px;
	padding: .5em .8em;
	font-family: var(--coc-body);
	font-weight: 700;
	font-size: .82rem;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.coc-map__hint { font-size: .8rem; color: #5F5849; line-height: 1.5; margin: 0 0 .5rem; }

.coc-map__saved {
	background: #fff;
	border-left: 4px solid var(--coc-peacock);
	border-radius: 4px;
	padding: .55rem .7rem;
	font-size: .8rem;
}

.coc-map__saved strong { display: block; }
.coc-map__saved span { color: var(--coc-mute); font-variant-numeric: tabular-nums; }
.coc-map__saved.is-hidden { display: none; }

.coc-mapblock.is-hidden { display: none; }

/*
 * District and transport office are required whenever they are on screen;
 * WooCommerce labels them "(optional)" because the field itself is not
 * flagged required (see coc-delivery.php for why).
 */
.coc-required label .optional { display: none; }

.coc-required label::after {
	content: " *";
	color: var(--coc-lac);
	font-weight: 700;
}

.coc-map__msg {
	margin: 0 0 .6rem;
	padding: .6rem .8rem;
	border-left: 3px solid var(--coc-marigold);
	background: #FFF8E8;
	font-size: .85rem;
	line-height: 1.5;
}

.coc-map__msg.is-hidden { display: none; }

.coc-codnote.is-hidden { display: none; }

/* Bank details + UTR, rendered inside the Bank transfer payment box. */
.coc-utr { margin-top: .9rem; }

.coc-utr label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: .3rem;
}

.coc-utr input { width: 100%; }

.woocommerce-checkout h3 {
	font-family: var(--coc-display);
	font-size: 1.35rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--coc-foil);
	margin-bottom: 1rem;
}

.woocommerce-checkout .form-row { margin-bottom: 1rem; }

.woocommerce-checkout label {
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .25rem;
	display: block;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	width: 100%;
	min-height: 48px;
	padding: .65em .8em;
	font-size: 1rem;
	border: 1px solid var(--coc-rule);
	border-radius: 4px;
	background: #fff;
}

.woocommerce-checkout .input-text:focus {
	border-color: var(--coc-lac);
	outline: 2px solid rgba(212,21,46,.15);
}

.woocommerce-checkout .wc_payment_method { position: relative; }

.woocommerce-checkout .wc_payment_method > label {
	border: 1.5px solid var(--coc-rule);
	border-radius: 6px;
	padding: .7rem .8rem .7rem 2.7rem !important;
	margin-bottom: .5rem;
	display: block !important;
	background: #fff;
	font-weight: 700;
	font-size: .88rem;
	cursor: pointer;
}

/*
 * Blocksy draws its own radio dot as label::before, sized for a flex label.
 * The card styling above needs the label to stay a block, which collapsed
 * that pseudo-element into a thin blue sliver — so it is switched off and
 * the real input is styled instead.
 */
.woocommerce-checkout .wc_payment_method > label::before { display: none !important; }

/*
 * Blocksy also sets appearance:none on the radio and positions it absolutely
 * for that indicator, which left the actual control invisible and the
 * customer with nothing to tick. Draw it here.
 *
 * Anchored to the top of the row rather than centred on it, because the row
 * grows when the payment box below it expands.
 */
.woocommerce-checkout .wc_payment_method > input[type="radio"] {
	position: absolute;
	left: .85rem;
	top: 1.4rem;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	/* Not --coc-rule: that hairline cream is invisible as a control on white. */
	border: 2px solid #A79C86;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	z-index: 1;
	/* Blocksy screen-reader-hides the input with clip: rect(1px,1px,1px,1px),
	   which blanks it however it is sized. This is the rule that matters. */
	clip: auto !important;
	clip-path: none !important;
}

.woocommerce-checkout .wc_payment_method > input[type="radio"]:checked {
	border-color: var(--coc-lac);
	background: radial-gradient(circle, var(--coc-lac) 0 5px, #fff 6px);
}

.woocommerce-checkout .wc_payment_method > input[type="radio"]:focus-visible {
	outline: 2px solid var(--coc-lac);
	outline-offset: 2px;
}

.woocommerce-checkout .wc_payment_method input:checked + label {
	border-color: var(--coc-lac);
	background: #FFF4F5;
}

#order_review {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 6px;
	padding: 1.1rem;
}

#order_review .order-total .woocommerce-Price-amount {
	font-size: 1.3rem;
	color: var(--coc-lac);
	font-weight: 700;
}

/* Blocksy paints its own accent on this one, so the brand red is forced. */
#place_order {
	width: 100% !important;
	font-size: 1.05rem !important;
	min-height: 54px !important;
	background: var(--coc-lac) !important;
	color: #fff !important;
	border: 0 !important;
}

/* Rows the checkout JS switches off (district outside TN, transport in a
   home district) — one rule, both cases. */
.woocommerce-checkout .form-row.is-hidden { display: none !important; }

.woocommerce-cart .shop_table {
	border: 1px solid var(--coc-rule) !important;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.woocommerce-cart .shop_table thead th {
	background: var(--coc-night);
	color: var(--coc-foil);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .8rem;
	border: 0;
}

.woocommerce-cart .shop_table td {
	padding: .8rem;
	border-top: 1px solid var(--coc-rule);
	vertical-align: middle;
}

.woocommerce-cart .product-thumbnail img {
	width: 62px;
	height: 62px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 4px;
}

.woocommerce-cart .product-name a {
	color: var(--coc-ink);
	font-weight: 600;
	text-decoration: none;
	font-size: .92rem;
}

.woocommerce-cart .product-subtotal { color: var(--coc-lac); font-weight: 700; }

/* Quantities save themselves (js/cart.js), so the button is redundant. */
.woocommerce-cart [name="update_cart"] { display: none !important; }

/* Replaced by the tear-off coupon tickets below the table. */
.woocommerce-cart .cart .coupon { display: none !important; }

.woocommerce-cart .coc-coupons__head { margin: 1.6rem 0 .6rem; }

/* Totals panel — the design's paper card, not Blocksy's default table. */
.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: 6px;
	padding: 1.2rem;
}

.woocommerce-cart .cart_totals > h2 {
	font-size: 1.15rem;
	margin: 0 0 .8rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--coc-foil);
}

.woocommerce-cart .cart_totals table {
	width: 100%;
	border: 0 !important;
	margin: 0;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	border: 0;
	border-bottom: 1px solid var(--coc-rule);
	padding: .7rem 0;
	font-size: .95rem;
	background: none;
	vertical-align: middle;
}

.woocommerce-cart .cart_totals th {
	text-align: left;
	font-weight: 600;
	width: 45%;
}

.woocommerce-cart .cart_totals td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: .9rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.woocommerce-cart .cart_totals .order-total td { color: var(--coc-lac); }

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 1rem 0 0;
	margin: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: 100%;
	text-align: center;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coc-backshop {
	display: block;
	text-align: center;
	margin-top: .9rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--coc-ink);
	text-decoration: none;
}

.coc-backshop:hover { color: var(--coc-lac); }

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

/* Right-align the money columns so the figures form a column. */
.woocommerce-cart .shop_table th.product-subtotal,
.woocommerce-cart .shop_table td.product-subtotal { text-align: right; }

.woocommerce-cart .shop_table td.product-quantity { text-align: center; }
.woocommerce-cart .shop_table td.product-remove   { text-align: center; width: 42px; }

/* ---- Cart on a phone: the table becomes a stack of cards ---- */
@media (max-width: 780px) {

	.woocommerce-cart .shop_table thead { display: none; }

	.woocommerce-cart .shop_table,
	.woocommerce-cart .shop_table tbody,
	.woocommerce-cart .shop_table tr,
	.woocommerce-cart .shop_table td { display: block; width: 100%; }

	.woocommerce-cart .shop_table tr {
		position: relative;
		border-bottom: 1px solid var(--coc-rule);
		padding: .9rem 2.4rem .9rem 84px;
		min-height: 92px;
	}

	.woocommerce-cart .shop_table tr:last-child { border-bottom: 0; }

	.woocommerce-cart .shop_table td {
		border: 0;
		padding: .15rem 0;
		text-align: left !important;
	}

	/* Thumbnail pinned to the left of the card. */
	.woocommerce-cart .shop_table td.product-thumbnail {
		position: absolute;
		left: .8rem;
		top: .9rem;
		width: 62px;
		padding: 0;
	}

	/* Remove pinned to the right. */
	.woocommerce-cart .shop_table td.product-remove {
		position: absolute;
		right: .5rem;
		top: .9rem;
		width: auto;
	}

	/* Label the money rows, since the header is gone. */
	.woocommerce-cart .shop_table td.product-subtotal::before {
		content: "Subtotal";
		font-size: .75rem;
		color: var(--coc-mute);
		margin-right: .5em;
	}

	.woocommerce-cart .shop_table td.product-price { display: none; }

	.woocommerce-cart .cart_totals { padding: 1rem; }

	/*
	 * WooCommerce's responsive table CSS empties the <th> and repeats the
	 * label through td::before, which left a wide blank column and wrapped
	 * every amount. Lay each row out as label-left / amount-right instead.
	 */
	.woocommerce-cart .cart_totals table,
	.woocommerce-cart .cart_totals tbody { display: block; }

	.woocommerce-cart .cart_totals tr {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		border-bottom: 1px solid var(--coc-rule);
		padding: .7rem 0;
		min-height: 0;   /* Blocksy sets 92px for its stacked-table layout */
	}

	.woocommerce-cart .cart_totals th,
	.woocommerce-cart .cart_totals td {
		display: block;
		width: auto;
		border: 0;
		padding: 0;
		white-space: nowrap;
	}

	.woocommerce-cart .cart_totals td::before { content: none !important; }

	.woocommerce-cart .cart_totals .order-total { border-bottom: 0; }
}

/* Quiet inline navigation link, used on quick order / cart / checkout. */
.coc-backlink {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-weight: 600;
	font-size: .9rem;
	color: var(--coc-ink);
	text-decoration: none;
}

.coc-backlink:hover { color: var(--coc-lac); }

.coc-qo__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0 .2rem;
}

.coc-btn--block { width: 100%; }

.coc-minnote {
	margin: 0 0 .8rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--coc-ink);
}

/* Sits under the place-order button, so it reads as the quieter option. */
.coc-checkout__back {
	margin: .9rem 0 0;
	text-align: center;
}

/* ============================================================
   10b · POLICY PAGES
   ============================================================ */

.coc-policy__logo {
	text-align: center;
	margin: 0 0 1.8rem;
}

.coc-policy__logo img {
	display: inline-block;
	width: auto;
	max-width: 210px;
	height: auto;
}

.coc-policy__back {
	text-align: center;
	margin: 2.6rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--coc-rule);
}

/* ============================================================
   11 · FOOTER
   ============================================================ */

.coc-footer {
	background: var(--coc-night-deep);
	color: rgba(250,246,236,.75);
	padding: var(--coc-band) 0 1.5rem;
	font-size: .9rem;
}

.coc-footer__cols {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	max-width: 420px;
}

/* Shop by category — one wrapping row, the site's link into the catalogue. */
.coc-footer__cats {
	padding-top: 1.4rem;
	margin-top: 1.4rem;
	border-top: 1px solid rgba(212,165,55,.25);
}

.coc-footer__cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.2rem;
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
}

.coc-footer__cats li { margin: 0; }

.coc-footer__cats a { font-size: .88rem; }

.coc-footer h3,
.coc-footer h4 {
	font-family: var(--coc-display);
	font-size: 1.25rem;
	color: var(--coc-paper);
	margin: 0 0 .8rem;
}

.coc-footer ul { list-style: none; margin: 0; padding: 0; }
.coc-footer li { margin-bottom: .5rem; }

.coc-footer a {
	color: rgba(250,246,236,.75);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.coc-footer a:hover { color: var(--coc-marigold); border-bottom-color: var(--coc-marigold); }

.coc-footer__brand img { max-width: 150px; height: auto; margin-bottom: 1rem; }

.coc-footer__meta { font-size: .88rem; }

.coc-footer__meta li {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin-bottom: .55rem;
	line-height: 1.45;
}

.coc-footer__meta svg { flex: 0 0 16px; margin-top: .2rem; color: var(--coc-foil); }

.coc-footer__legal {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(250,246,236,.12);
	font-size: .78rem;
	color: rgba(250,246,236,.45);
	text-align: center;
}

.coc-footer__safety { color: var(--coc-marigold); font-weight: 600; }

/* Blocksy renders its own footer — we replace it */
.ct-footer { display: none !important; }

/* ============================================================
   12 · SEO BLOCK
   ============================================================ */

.coc-seo__lede {
	max-width: 62ch;
	font-size: 1.02rem;
	color: #4A443A;
	margin: 0 0 2rem;
}

.coc-seo__cols { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; }

.coc-seo__cols h3 {
	font-family: var(--coc-body);
	font-weight: 700;
	font-size: .98rem;
	margin: 0 0 .4rem;
	padding-left: .75rem;
	border-left: 3px solid var(--coc-lac);
	line-height: 1.3;
}

.coc-seo__cols article:nth-child(2) h3 { border-left-color: var(--coc-marigold); }
.coc-seo__cols article:nth-child(3) h3 { border-left-color: var(--coc-peacock); }
.coc-seo__cols article:nth-child(4) h3 { border-left-color: var(--coc-magenta); }
.coc-seo__cols article:nth-child(5) h3 { border-left-color: var(--coc-foil); }

.coc-seo__cols p { margin: 0; font-size: .9rem; line-height: 1.6; color: #5F5849; }

/* ============================================================
   13 · WOOCOMMERCE TIDY-UP
   ============================================================ */

.woocommerce .products .star-rating,
.woocommerce .woocommerce-product-rating { display: none; }

.woocommerce-breadcrumb { font-size: .8rem; color: #7A7161; }

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--coc-peacock);
	background: var(--coc-paper-dim);
}

.woocommerce-error { border-top-color: var(--coc-lac); }

.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--coc-rule);
	border-radius: var(--coc-radius);
	padding: .75rem;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--coc-foil);
	box-shadow: 0 4px 18px rgba(20,16,15,.10);
}

.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--coc-body);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	font-weight: 700;
	color: var(--coc-lac);
	font-size: 1.05rem;
}

.woocommerce ul.products li.product .price del {
	color: var(--coc-mute);
	font-weight: 400;
	font-size: .85em;
}

.woocommerce span.onsale {
	background: var(--coc-peacock);
	color: #fff;
	font-weight: 700;
	font-size: .75rem;
	border-radius: 2px;
	padding: .35em .7em;
	min-height: auto;
	line-height: 1.2;
}

/* ============================================================
   14 · BREAKPOINTS — every media query lives here
   ============================================================ */

@media (min-width: 640px) {
	.coc-carousel > * { flex-basis: 34%; }
	.coc-carousel--products > * { flex-basis: 38%; }
}

@media (min-width: 700px) {
	.coc-seo__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
	.coc-footer__cols { grid-template-columns: 1.4fr 1fr; max-width: none; }
}

@media (min-width: 860px) {
	.coc-about {
		display: grid;
		gap: var(--coc-gap);
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

@media (min-width: 900px) {
	/* Bottom offset is set on .coc-wa itself so it always clears the
	   SalesIQ launcher; only the corner inset changes here. */
	.coc-wa { --coc-wa-right: 26px; }
}

@media (min-width: 1000px) {
	.coc-carousel > * { flex-basis: 23%; }
	.coc-carousel--products > * { flex-basis: 24%; }
	.coc-carousel__hint { display: none; }
}

@media (min-width: 1050px) {
	.coc-seo__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.woocommerce ul.products {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.woocommerce ul.products > li.product {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.woocommerce ul.products li.product .entry-meta { display: none !important; }

	.coc-actions__btn { width: 38px; height: 38px; }
}

@media (max-width: 700px) {
	.coc-qo__amt { display: none; }
	.coc-qo__thumb { flex-basis: 48px; width: 48px; height: 48px; }
	.coc-qo__title { font-size: .84rem; }
	.coc-hero--slides { min-height: 72vh; padding-top: 1.25rem; }
}

@media (max-width: 640px) {
	.coc-hero--slides {
		min-height: 0;
		padding-top: 1rem;
		padding-bottom: 3rem;
	}

	.coc-hero--slides h1 {
		font-size: clamp(1.6rem, 6.4vw, 2.1rem);
		line-height: 1.12;
		margin: 0 auto .6rem;
		max-width: 16ch;
	}

	.coc-hero__logo { width: clamp(210px, 62vw, 300px); margin-bottom: .4rem; }
	.coc-hero__eyebrow { font-size: .62rem; letter-spacing: .1em; margin-bottom: .9rem; }
	.coc-hero__sub { font-size: .9rem; line-height: 1.45; max-width: 30ch; margin-bottom: 1.4rem; }
	.coc-hero__actions { flex-direction: column; gap: .55rem; padding: 0 1.5rem; }
	.coc-hero__actions .coc-btn { width: 100%; }
	/* SalesIQ's launcher is a little smaller on phones, so it needs a
	   little less clearance — but it still has to be cleared. */
	.coc-wa { --coc-wa-bottom: 88px; --coc-wa-right: 18px; width: 46px; height: 46px; }

	/* Slightly smaller again, to match the 46px WhatsApp button on phones. */
	.zsiq_floatmain {
		--coc-siq-scale: .66;
		bottom: 18px !important;
		right: 18px !important;
	}

	/*
	 * The sticky bar is ~96px on a phone, not the 66px it is on desktop —
	 * the item count and gift message wrap onto a second line. Both buttons
	 * clear that, chat first with WhatsApp stacked above it.
	 */
	.page-template-page-quick-order .zsiq_floatmain { bottom: 110px !important; }
	.page-template-page-quick-order .coc-wa { --coc-wa-bottom: 170px; }
	body { padding-bottom: 70px; }
}

@media (max-width: 520px) {
	.coc-board__stage { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
	.coc-spark-rule i,
	.coc-board__lights { animation: none; }

	.coc-drawer__panel,
	.coc-drawer__scrim { transition: none; }

	.coc-board__stage { min-height: 0; display: grid; gap: .75rem; }
	.coc-board__note { position: static; opacity: 1; transform: none; pointer-events: auto; }
	.coc-board__dots { display: none; }
}
/* ------------------------------------------------------------------
 * Quick order rows on phones.
 *
 * The rows were cramped: .6rem/.7rem padding, a .84rem title and a
 * 48px thumb, all inside a 1rem page gutter. Text and tap targets were
 * both under size. This block trims the gutter to buy horizontal room,
 * spends it on type rather than on chrome, and brings the stepper up to
 * a 44px tap target.
 *
 * Thumb and stepper widths are held near their old values on purpose —
 * growing them would eat the title column, which is the tightest part
 * of the row. Net effect is a slightly WIDER title area and a
 * noticeably larger typeface.
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
	.page-template-page-quick-order { --coc-gap: .6rem; }

	.coc-qo__row {
		gap: .6rem;
		padding: .85rem .55rem;
	}

	.coc-qo__row.is-active { box-shadow: inset 5px 0 0 var(--coc-lac); }

	.coc-qo__thumb {
		flex-basis: 72px;
		width: 72px;
		height: 72px;
		border-radius: 6px;
	}

	.coc-qo__title {
		font-size: .95rem;
		line-height: 1.32;
	}

	.coc-qo__info .coc-sku {
		font-size: .72rem;
		margin-top: .12rem;
	}

	.coc-qo__prices {
		gap: .45rem;
		margin-top: .3rem;
	}

	.coc-qo__now { font-size: 1.06rem; }
	.coc-qo__mrp { font-size: .84rem; }
	.coc-qo__oos { font-size: .82rem; }

	.coc-qo__off {
		font-size: .7rem;
		padding: .2em .45em;
	}

	/* 44px tall = the minimum comfortable tap target, without getting wider. */
	.coc-qo__qty { max-width: 112px; }

	.coc-step {
		flex-basis: 34px;
		width: 34px;
		height: 44px;
		font-size: 1.25rem;
	}

	.coc-qo__qty input {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		font-size: 1rem;
	}

	.coc-qo__catname { font-size: 1.3rem; }
	.coc-qo__catname span { font-size: .78rem; }
}

/* Narrow phones: claw back a little width so nothing overflows. */
@media (max-width: 400px) {
	.page-template-page-quick-order { --coc-gap: .45rem; }
	.coc-qo__row { gap: .5rem; padding: .8rem .4rem; }
	.coc-qo__thumb { flex-basis: 64px; width: 64px; height: 64px; }
	.coc-qo__title { font-size: .92rem; }
	/* 96px of stepper instead of 104 buys the title column 8px back,
	   which drops a third of the 3-line product names to 2 lines.
	   Height stays 44px, so the tap target is still comfortable. */
	.coc-qo__qty { max-width: 96px; }
	.coc-step { flex-basis: 30px; width: 30px; }
	.coc-qo__qty input { flex-basis: 36px; width: 36px; }
}

/* ------------------------------------------------------------------
 * Quantity stepper: fit the digits, never clip them.
 *
 * Two faults caused "10" to render as "1(":
 *   1. The pill had a fixed max-width (112px, 96px on small phones)
 *      while its children were fixed widths summing to the same value
 *      or more. Plus two 1.5px borders, the total exceeded the cap and
 *      overflow:hidden cut the control off.
 *   2. Something else on the page (theme or plugin) styles
 *      input[type=number] with 15px side padding and beats a plain
 *      .coc-qo__qty input selector, so the field was far wider than
 *      the 42px the layout assumed.
 *
 * So: the pill hugs its content, the field is sized in ch at a
 * specificity high enough to hold, and field-sizing is pinned to auto
 * so a supporting browser cannot re-grow it unpredictably.
 * ------------------------------------------------------------------ */
.coc-qo__row .coc-qo__qty {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.coc-qo__row .coc-qo__qty input[type="number"] {
	box-sizing: content-box;
	field-sizing: auto;
	width: 3ch;
	min-width: 3ch;
	max-width: 4.5ch;
	padding: 0 .35rem;
	text-align: center;
	font-size: 1rem;
}

.coc-qo__row .coc-step {
	flex: 0 0 auto;
	width: 2.15rem;
	min-width: 2.15rem;
	padding: 0;
}

/* Phones keep the 44px tap height; width follows the digits. */
@media (max-width: 700px) {
	.coc-qo__row .coc-step { width: 2.25rem; min-width: 2.25rem; }
}

@media (max-width: 400px) {
	/* The field needs 3ch for a 3-digit stock cap, and that costs the
	   title column width. Take it back from the chrome instead: narrower
	   arrows (height stays 44px, so the tap target is unaffected),
	   tighter field padding and a tighter row. */
	.coc-qo__row .coc-step { width: 1.9rem; min-width: 1.9rem; }
	.coc-qo__row .coc-qo__qty input[type="number"] { padding: 0 .15rem; }
	.coc-qo__row { gap: .45rem; padding: .8rem .35rem; }
}

/* ------------------------------------------------------------------
 * Quantity stepper, final sizing.
 *
 * Earlier attempts tuned the field to the tightest width that "should"
 * fit. That kept failing in the field because the number input's own
 * padding varies between browsers and other stylesheets, and a centred
 * value overflows symmetrically without scrollWidth ever reporting it.
 *
 * So: stop optimising for width. The field is sized for FOUR digits,
 * overflow is visible so nothing can be clipped even if a stray rule
 * adds padding, and the pill grows to whatever its children need.
 * ------------------------------------------------------------------ */
.coc-qo__row .coc-qo__qty {
	overflow: visible;
	width: auto;
	max-width: none;
}

.coc-qo__row .coc-qo__qty input[type="number"] {
	box-sizing: content-box;
	width: 4ch;
	min-width: 4ch;
	max-width: none;
	padding: 0 .45rem;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	font-variant-numeric: tabular-nums;
	overflow: visible;
}

@media (max-width: 400px) {
	.coc-qo__row .coc-qo__qty input[type="number"] { padding: 0 .3rem; }
}

/* ------------------------------------------------------------------
 * WhatsApp and SalesIQ, matched.
 *
 * Measured: the WhatsApp button is 52px on desktop and 46px on phones.
 * SalesIQ renders its launcher at 60px natural, so the scale needed to
 * match is 52/60 and 46/60 rather than the .75/.66 guessed before.
 * Both anchor to the same right edge so they read as one column.
 * ------------------------------------------------------------------ */
.coc-wa { width: 52px; height: 52px; }
.zsiq_floatmain { --coc-siq-scale: .87; }   /* 60px natural x .87 = 52.2 */

@media (max-width: 640px) {
	.coc-wa { width: 46px; height: 46px; }
	.zsiq_floatmain { --coc-siq-scale: .77; }   /* = 46.2 */
}

/* ------------------------------------------------------------------
 * Quantity stepper, size in rem not ch.
 *
 * ch is the width of the font's "0" glyph, so it only holds if that font
 * is the one actually rendering. If Mukta Malar has not loaded yet, or a
 * plugin swaps the input's font-family, 4ch can resolve narrower than
 * four digits actually need and the last digit is cut.
 *
 * rem is tied to the root font size instead, so the field is a known
 * pixel width whatever font lands in it. The input also flexes to fill
 * whatever the pill has left, so it can never be squeezed by its
 * neighbours.
 * ------------------------------------------------------------------ */
.coc-qo__row .coc-qo__qty {
	width: auto;
	min-width: 7.5rem;          /* 2.25 + 3 + 2.25 = 120px at 16px root */
	max-width: none;
	overflow: visible;
}

.coc-qo__row .coc-qo__qty input[type="number"] {
	/* Fixed, not flexible. Letting it grow ate the title column: it took
	   61px when four digits need 37. 3rem gives 41.6px of content after
	   padding - wider than "9999" needs in Mukta Malar (32.6), in the
	   sans-serif fallback (35.6) or in a serif (36.2). */
	flex: 0 0 3rem;
	width: 3rem;
	min-width: 3rem;
	max-width: 3rem;
	box-sizing: border-box;
	padding: 0 .2rem;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.coc-qo__row .coc-step {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	min-width: 2.25rem;
}

@media (max-width: 400px) {
	.coc-qo__row .coc-qo__qty { min-width: 6.75rem; }   /* 32 + 44 + 32 */
	/* Keep the field at 3rem even here: at 2.75rem the sans-serif fallback
	   rendered "9999" exactly at the boundary, with no margin for error. */
	.coc-qo__row .coc-qo__qty input[type="number"] {
		flex: 0 0 3rem; width: 3rem; min-width: 3rem; max-width: 3rem;
	}
	.coc-qo__row .coc-step { flex: 0 0 2rem; width: 2rem; min-width: 2rem; }
}

/* ------------------------------------------------------------------
 * Page content width.
 *
 * Blocksy renders pages inside .ct-container-full, and the only thing
 * constraining the text was WordPress's own .is-layout-constrained rule,
 * which comes from Gutenberg block layout support. That disappears when a
 * page is edited in the Classic editor or when the Disable Gutenberg
 * plugin is active - the content then runs edge to edge and the first
 * words sit against the viewport border.
 *
 * Constrain it here instead, so it holds whatever editor the page was
 * written in. The custom templates draw their own full-bleed layout and
 * are excluded.
 * ------------------------------------------------------------------ */
body:not(.page-template-page-home):not(.page-template-page-quick-order):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-page)
	.entry-content {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: var(--coc-gap);
}

/* Images and headings inside that column should not exceed it either. */
body:not(.page-template-page-home):not(.page-template-page-quick-order):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-page)
	.entry-content img {
	max-width: 100%;
	height: auto;
}

/*
 * Cart, checkout and account render inside .entry-content as well, and an
 * 820px column squeezes the cart table until product names wrap over seven
 * lines. They get the full container and manage their own layout.
 */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* ------------------------------------------------------------------
 * WooCommerce pages: centre the content ourselves.
 *
 * Local inherited a 1290px centred container from Blocksy; live resolved
 * max-width:none and the block sat flush left with the leftover space
 * dumped on the right (left=0, right=52 at a 430px viewport). That
 * depends on a Customizer container setting rather than on the theme
 * files, so it differs per install. Pin it here instead - cart,
 * checkout, order-received and account all get the same symmetric gutter
 * on every install.
 * ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-order-received .woocommerce {
	max-width: 1290px;
	margin-inline: auto;
	padding-inline: var(--coc-gap);
	box-sizing: border-box;
	width: 100%;
}

/* The order-received tables run edge to edge for the same reason. */
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
	max-width: 1290px;
	margin-inline: auto;
	padding-inline: var(--coc-gap);
	box-sizing: border-box;
}

.woocommerce-order-received .woocommerce-order .woocommerce-order,
.woocommerce-order-received .woocommerce-order .woocommerce-order-details,
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details {
	max-width: none;
	padding-inline: 0;
}