/* The Cakery: the pickup calendar. Shared by the product page and the shop page,
   because they show the same calendar. The variables come from the widget it sits
   in; hence the fallback values here. */

.cpr-cal {
	--cpr-gold: #A9A083;
	--cpr-gold-deep: #877E63;
	--cpr-ink: #2A2117;
	--cpr-ink-soft: #867C6D;
	--cpr-card: #FFFDF8;
	--cpr-line: rgba(42, 33, 23, .15);
	--cpr-ease: cubic-bezier(.2, .7, .3, 1);
	color: var(--cpr-ink);
	font-weight: 300;
}

.cpr-cal,
.cpr-cal * { box-sizing: border-box; }

.cpr-cal {
	position: fixed;
	inset: 0;
	z-index: 9800;
	display: grid;
	place-items: center;
	padding: 22px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s;
}

.cpr-cal.is-on {
	opacity: 1;
	visibility: visible;
}

.cpr-cal__veil {
	position: absolute;
	inset: 0;
	background: rgba(30, 22, 13, .5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.cpr-cal__box {
	--c: 14px;
	position: relative;
	width: min(430px, 100%);
	padding: 26px 26px 24px;
	background: var(--cpr-card);
	box-shadow: 0 34px 80px rgba(42, 33, 23, .28);
	transform: translateY(14px) scale(.99);
	transition: transform .45s var(--cpr-ease);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr-cal.is-on .cpr-cal__box { transform: none; }

.cpr-cal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cpr-cal__k.cpr-cal__k {
	margin: 0;
	color: var(--cpr-gold-deep);
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
}

.cpr-cal__t.cpr-cal__t {
	margin: 8px 0 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

.cpr-cal__x.cpr-cal__x {
	--c: 7px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	padding: 0;
	background: transparent;
	color: var(--cpr-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	cursor: pointer;
	transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr-cal__x.cpr-cal__x:hover {
	background: rgba(169, 160, 131, .12);
	box-shadow: inset 0 0 0 1px var(--cpr-gold);
	transform: rotate(90deg);
}

.cpr-cal__x svg { width: 15px; height: 15px; }

.cpr-cal__l.cpr-cal__l {
	margin: 12px 0 0;
	color: var(--cpr-ink-soft);
	font-size: 13.5px;
	line-height: 1.65;
}

.cpr-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 18px 0 12px;
}

.cpr-cal__m.cpr-cal__m {
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
}

.cpr-cal__nav { display: flex; gap: 6px; }

.cpr-cal__nav button {
	--c: 5px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	color: var(--cpr-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	cursor: pointer;
	transition: background .3s ease, color .3s ease, opacity .3s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr-cal__nav button:hover:not(:disabled) {
	background: var(--cpr-ink);
	color: var(--cpr-card);
}

.cpr-cal__nav button:disabled {
	opacity: .25;
	cursor: default;
}

.cpr-cal__nav svg { width: 13px; height: 13px; }

.cpr-cal__dows,
.cpr-cal__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.cpr-cal__dows span {
	padding: 4px 0;
	color: var(--cpr-ink-soft);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
}

.cpr-cal__d {
	--c: 5px;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: transparent;
	color: var(--cpr-ink);
	border: none;
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, box-shadow .25s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr-cal__d.is-empty { visibility: hidden; }

.cpr-cal__d:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--cpr-gold); }

.cpr-cal__d:disabled {
	color: rgba(42, 33, 23, .24);
	cursor: not-allowed;
}

.cpr-cal__d:disabled::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 28%;
	left: 28%;
	height: 1px;
	background: rgba(42, 33, 23, .16);
}

.cpr-cal__d.is-first:not(:disabled)::before {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 3.5px;
	height: 3.5px;
	border-radius: 50%;
	background: var(--cpr-gold);
}

.cpr-cal__d[aria-pressed="true"] {
	background: var(--cpr-ink);
	color: var(--cpr-card);
}

.cpr-cal__legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
	color: var(--cpr-ink-soft);
	font-size: 10.5px;
}

.cpr-cal__legend i {
	display: inline-block;
	width: 3.5px;
	height: 3.5px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--cpr-gold);
	vertical-align: middle;
}

.cpr-cal__ok.cpr-cal__ok {
	--c: 7px;
	width: 100%;
	margin-top: 18px;
	padding: 16px;
	background: linear-gradient(135deg, #C9BE9E 0%, #A9A083 52%, #BCB08F 100%);
	color: #231C13;
	border: none;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .35s var(--cpr-ease), opacity .3s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr-cal__ok.cpr-cal__ok:hover:not(:disabled) { transform: translateY(-2px); }

.cpr-cal__ok.cpr-cal__ok:disabled {
	background: none;
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	color: var(--cpr-ink-soft);
	cursor: not-allowed;
}

.cpr-cal__f.cpr-cal__f {
	margin: 11px 0 0;
	color: var(--cpr-ink-soft);
	font-size: 11.5px;
	text-align: center;
}