/*
 * Product categories sheet for the bottom navbar.
 *
 * Same shape as the shop filters sheet: a panel that rises from the bottom edge
 * with the list folded into accordions. Reaching a category on a phone should
 * cost one tap from anywhere on the site, not a trip through the menu.
 */
.pt-cats-sheet {
	position: fixed;
	inset: 0;
	z-index: 400;
}

.pt-cats-sheet[hidden] {
	display: none;
}

.pt-cats-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.pt-cats-sheet.is-open .pt-cats-sheet__backdrop {
	opacity: 1;
}

.pt-cats-sheet__panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 80vh;
	background: var(--bgcolor-white, #fff);
	border-start-start-radius: var(--pt-outer-brd-radius, 15px);
	border-start-end-radius: var(--pt-outer-brd-radius, 15px);
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.pt-cats-sheet.is-open .pt-cats-sheet__panel {
	transform: translateY(0);
}

.pt-cats-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 25px;
	border-bottom: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

/* The same heading the filters sheet gives its category list. */
.pt-cats-sheet__title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
	color: var(--pt-title-color, #1f2430);
	font-size: var(--pt-fs-md);
	font-weight: 600;
}

.pt-cats-sheet__title-icon::before {
	content: "\e206";
	font-family: "Picon";
	font-weight: 500;
	font-size: 24px;
	vertical-align: middle;
	line-height: 1;
	color: var(--color-gray-500, #8b93a3);
}

.pt-cats-sheet__close {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0;
	border: 0;
	/* The global control reset gives every button --btn-brd-radius, so a round
	   one has to say so outright — same as the filters sheet close. */
	border-radius: 50% !important;
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--color-gray-500, #8b93a3);
	cursor: pointer;
}

.pt-cats-sheet__close::before,
.pt-cats-sheet__close::after {
	content: "";
	position: absolute;
	inset-inline-start: 9px;
	top: 14px;
	width: 12px;
	height: 1.5px;
	background: currentColor;
}

.pt-cats-sheet__close::before { transform: rotate(45deg); }
.pt-cats-sheet__close::after  { transform: rotate(-45deg); }

/*
 * The body scrolls, not the page: the panel keeps its own height so the list can
 * be as long as the catalogue needs without the sheet growing off screen.
 */
.pt-cats-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 15px 25px calc(15px + var(--plt-toolbar-h, 85px));
}

.pt-cats-sheet__list,
.pt-cats-sheet__sub ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-cats-sheet__item + .pt-cats-sheet__item {
	margin-top: 8px;
}

.pt-cats-sheet__row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 15px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-inner-brd-radius, 10px);
	background: var(--bgcolor-white, #fff);
	color: inherit;
	font-size: var(--pt-fs-md);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.pt-cats-sheet__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pt-cats-sheet__count {
	flex: 0 0 auto;
	color: var(--color-gray-500, #8b93a3);
	font-size: var(--pt-fs-sm);
}

.pt-cats-sheet__caret {
	flex: 0 0 auto;
	/* The glyph paints inset within its own box, which left the arrow reading as
	   further from the edge than the counts in the rows below it. */
	margin-inline-start: -5px;
	margin-inline-end: -5px;
	color: var(--color-gray-500, #8b93a3);
	font-size: 20px;
	line-height: 1;
}

.pt-cats-sheet__caret:before {
	content: "\e118";
	font-family: "Picon";
}

.pt-cats-sheet__item.is-unfolded .pt-cats-sheet__caret:before {
	content: "\e129";
}

/* Folded away until asked for, animating to the content's own height. */
.pt-cats-sheet__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .25s ease;
}

.pt-cats-sheet__item.is-unfolded .pt-cats-sheet__sub {
	grid-template-rows: 1fr;
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-outer-brd-radius, 15px);
	background: var(--bgcolor-gray-100, #f6f7f9);
}

.pt-cats-sheet__sub > * {
	min-height: 0;
	overflow: hidden;
}

.pt-cats-sheet__sub li:last-child a {
	margin-bottom: 0;
}

.pt-cats-sheet__sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px;
	margin-bottom: 8px;
	border: 1px solid var(--brdcolor-gray-300, #e5e8ec);
	border-radius: var(--pt-inner-brd-radius, 10px);
	background: var(--bgcolor-white, #fff);
	font-size: var(--pt-fs-md);
	text-decoration: none;
}

.pt-cats-sheet__link.is-current {
	border-color: var(--pt-primary-color);
	color: var(--pt-primary-color);
}

.pt-cats-sheet__all {
	font-weight: 600;
}

body.pt-cats-lock {
	overflow: hidden;
}

@media (min-width: 1025px) {
	.pt-cats-sheet {
		display: none;
	}
}