/* Twist Gifting 0.12.0: category pages in the Black Tea mock-up style (includes/category.php).
   Square corners throughout (Twist design rule). 0.15.0 (Twist's feedback of 2 Oct 2026): shorter hero with wider
   margins, five equal capitalised filter tiles, cards with the text indented between a flush photo and button, the
   theme's left menu hidden and the grid full width, the band's photo two thirds on the right. */

body.twg-category {
	--twg-cat-ink: #111610;
	--twg-cat-muted: #535d60;
	--twg-cat-blue: #4a7dc9;
	--twg-cat-grey: #e4e4e4; /* the thin grey line: card hover outline and the hovered Shop Now border (Colin, 5 Oct, lightened in 0.15.12). */
	--twg-cat-hair: 1px; /* the line's thickness: a half pixel on high-resolution screens (0.15.12). */
	--twg-cat-twist: #e3f1fb; /* The pale Twist blue (Colin, 5 Oct): filter tiles and Shop Now buttons on hover. */
	--twg-cat-line: #dce4e6;
	--twg-cat-band: #e3f1fb;
	--twg-cat-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--twg-cat-gutter: 56px;
	--twg-cat-max: 1280px;
}

/* ---- Hero ---- */
body.twg-category .twg-cat-hero {
	/* The band colour on the left, fading to white on the right (Colin, 30 Sep). */
	background: linear-gradient(to right, var(--twg-cat-band) 0%, var(--twg-cat-band) 38%, #ffffff 100%);
	font-family: var(--twg-cat-font);
	color: var(--twg-cat-ink);
}
/* 0.12.6: the hero row and the filter row carry the theme's .container class, so the title lines up with the left
   menu and the photo with the right edge of the product grid (Colin, 30 Sep). Width and side padding come from Porto;
   only the top and bottom padding is set here. */
body.twg-category .twg-cat-hero__inner::before,
body.twg-category .twg-cat-hero__inner::after,
body.twg-category .twg-cat-filters__inner::before,
body.twg-category .twg-cat-filters__inner::after {
	content: none; /* a clearfix pseudo-element would otherwise take a grid or flex cell */
}
body.twg-category .twg-cat-hero__inner {
	padding-top: 22px;
	padding-bottom: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: 32px;
	align-items: end;
}
body.twg-category .twg-cat-hero__inner--text {
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 40px;
}
body.twg-category .twg-cat-crumb {
	font-size: 13px;
	color: var(--twg-cat-muted);
	margin: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.twg-category .twg-cat-crumb a {
	color: var(--twg-cat-muted);
	text-decoration: none;
}
body.twg-category .twg-cat-crumb a:hover,
body.twg-category .twg-cat-crumb a:focus {
	color: var(--twg-cat-ink);
	text-decoration: underline;
}
body.twg-category .twg-cat-hero__title {
	font-family: var(--twg-cat-font);
	font-size: 56px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: var(--twg-cat-ink);
	text-wrap: balance;
}
body.twg-category .twg-cat-hero__intro {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
	max-width: 560px;
	margin: 0 0 30px;
	color: var(--twg-cat-ink);
}
body.twg-category .twg-cat-hero__photo {
	align-self: end;
	text-align: right;
}
body.twg-category .twg-cat-hero__pic {
	display: block; /* 0.16.13: the <picture> around the hero photo */
}
body.twg-category .twg-cat-hero__img {
	width: 100%;
	max-width: 600px;
	height: auto;
	max-height: 220px; /* 300px until 0.15.0: the hero about 80px shorter (Twist, 2 Oct) */
	object-fit: contain;
	object-position: right bottom;
	display: inline-block;
	vertical-align: bottom;
}

/* ---- Filter row ---- */
body.twg-category .twg-cat-filters {
	background: #fff;
	border-bottom: 1px solid var(--twg-cat-line);
	font-family: var(--twg-cat-font);
}
body.twg-category .twg-cat-filters__inner {
	padding-top: 12px;
	padding-bottom: 12px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
body.twg-category .twg-cat-filters__label {
	grid-column: 1 / -1;
	font-size: 18px;
	color: var(--twg-cat-ink);
}
body.twg-category .twg-cat-pill {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--twg-cat-ink);
	background: #fff;
	color: var(--twg-cat-ink);
	/* 0.15.7 halved these (26px, 11px); 0.15.9 a bit bigger again (Colin, 5 Oct). */
	font: 400 12px/1.2 var(--twg-cat-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 34px;
	padding: 8px 10px;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.twg-category .twg-cat-pill:hover,
body.twg-category .twg-cat-pill:focus-visible {
	background: var(--twg-cat-twist);
	border-color: var(--twg-cat-twist);
	color: var(--twg-cat-ink);
	outline: none;
}
body.twg-category .twg-cat-pill:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--twg-cat-ink);
}
body.twg-category .twg-cat-pill.is-active {
	background: var(--twg-cat-ink);
	border-color: var(--twg-cat-ink);
	color: #fff;
}

/* ---- Page frame (0.15.0): the theme's left menu is hidden and the content column takes the full width, with the
   same side margins as the hero. ---- */
body.twg-category #main .porto-woo-category-sidebar,
body.twg-category #main .sidebar-overlay {
	display: none !important;
}
body.twg-category #main .main-content-wrap > .main-content {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}
@media (min-width: 1200px) {
	body.twg-category .twg-cat-hero__inner,
	body.twg-category .twg-cat-filters__inner,
	body.twg-category .twg-catpage {
		padding-left: 36px;
		padding-right: 36px;
	}
}

/* ---- Grid ---- */
body.twg-category .twg-catpage {
	font-family: var(--twg-cat-font);
	padding: 24px 0 36px;
}
body.twg-category .twg-cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 28px;
}
body.twg-category .twg-cat-item[hidden] {
	display: none;
}
body.twg-category .twg-cat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* 0.15.10 (Colin, 5 Oct): on hover a thin grey line around the whole card (a box-shadow, so nothing shifts). */
	transition: box-shadow 0.2s ease;
}
@media (min-resolution: 1.5dppx) {
	body.twg-category {
		--twg-cat-hair: 0.5px;
	}
}
body.twg-category .twg-cat-card:hover,
body.twg-category .twg-cat-card:focus-within {
	box-shadow: 0 0 0 var(--twg-cat-hair) var(--twg-cat-grey);
}
body.twg-category .twg-cat-card__image {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
}
body.twg-category .twg-cat-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: center;
	transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
body.twg-category .twg-cat-card:hover .twg-cat-card__image img,
body.twg-category .twg-cat-card:focus-within .twg-cat-card__image img {
	transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
	body.twg-category .twg-cat-card,
	body.twg-category .twg-cat-card__image img {
		transition: none;
	}
	body.twg-category .twg-cat-card:hover .twg-cat-card__image img,
	body.twg-category .twg-cat-card:focus-within .twg-cat-card__image img {
		transform: none;
	}
}
body.twg-category .twg-cat-card__image--none {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--twg-cat-line);
	color: var(--twg-cat-muted);
	font-size: 13px;
}
body.twg-category .twg-cat-card__body {
	padding: 16px 16px 14px 20px;
}
body.twg-category .twg-cat-card__title {
	font-family: var(--twg-cat-font);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--twg-cat-ink);
}
body.twg-category .twg-cat-card__title a {
	color: inherit;
	text-decoration: none;
}
body.twg-category .twg-cat-card__title a:hover,
body.twg-category .twg-cat-card__title a:focus {
	text-decoration: underline;
}
body.twg-category .twg-cat-card__common,
body.twg-category .twg-cat-card__taste,
body.twg-category .twg-cat-card__format {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--twg-cat-muted);
	margin: 0 0 4px;
}
body.twg-category .twg-cat-card__price {
	font-size: 16px;
	font-weight: 300;
	color: var(--twg-cat-ink);
	margin: 8px 0 0;
}
body.twg-category .twg-cat-card__price strong {
	font-weight: 700;
}
body.twg-category .twg-cat-card__button {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--twg-cat-ink);
	background: #fff;
	color: var(--twg-cat-ink) !important;
	font: 700 15px/1 var(--twg-cat-font);
	padding: 15px 14px;
	text-decoration: none !important;
	border-radius: 0 !important;
	transition: background 0.15s, color 0.15s, border-color 0.2s ease;
}
/* 0.15.11 (Colin, 5 Oct): while the card is hovered its grey outline and the button border are the same grey, so the
   two lines read as one; at rest the button border stays black. */
body.twg-category .twg-cat-card:hover .twg-cat-card__button,
body.twg-category .twg-cat-card:focus-within .twg-cat-card__button {
	/* 0.15.13: the card outline draws the button's sides and bottom (the button is flush with the card), so those
	   borders go transparent and only a grey top line stays: one continuous line, nothing doubled. */
	border-color: transparent; /* 0.15.14: the top line goes too (Colin); only the card outline remains. */
}
body.twg-category .twg-cat-card__button:hover,
body.twg-category .twg-cat-card__button:focus-visible {
	/* Twist blue on hover, like the filter tiles (Colin, 5 Oct). */
	background: var(--twg-cat-twist);
	border-color: var(--twg-cat-grey);
	color: var(--twg-cat-ink) !important;
	outline: none;
}
body.twg-category .twg-cat-card__arrow {
	font-size: 16px;
	line-height: 1;
}
body.twg-category .twg-cat-count {
	font-size: 13px;
	color: var(--twg-cat-blue);
	margin: 26px 0 0;
}
body.twg-category .twg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 0.15.22: the AI stand-in hero photos (the nine newer categories) are on white rather than cut out, so their white
   takes the band colour behind them. */
body.twg-category .twg-cat-hero__img--multiply {
	mix-blend-mode: multiply;
}

/* ---- Closing band ---- */
/* 0.15.22 (Twist's Black Tea feedback, 6 Oct 2026: "image boundaries need to align with text box"): the band row
   carries the theme's .container, so its edges match the hero and the product grid, and the photo is exactly as tall
   as the copy beside it, its top on the title and its bottom on the last line. */
body.twg-category .twg-cat-band {
	background: #fff;
	border-top: 1px solid var(--twg-cat-line);
	font-family: var(--twg-cat-font);
	margin-top: 24px;
	padding: 56px 0;
}
body.twg-category .twg-cat-band__inner::before,
body.twg-category .twg-cat-band__inner::after {
	content: none; /* Porto's clearfix would take a grid cell */
}
body.twg-category .twg-cat-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 62%); /* copy a third, photo two thirds (Twist, 2 Oct) */
	gap: 48px;
	align-items: stretch;
}
body.twg-category .twg-cat-band__inner--text {
	grid-template-columns: minmax(0, 1fr);
}
body.twg-category .twg-cat-band__photo {
	order: 2;
	position: relative;
	min-height: 0; /* exactly the height of the copy beside it */
	overflow: hidden;
}
body.twg-category .twg-cat-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
body.twg-category .twg-cat-band__text {
	padding: 0;
	align-self: center;
}
body.twg-category .twg-cat-band__title {
	font-family: var(--twg-cat-font);
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--twg-cat-ink);
}
body.twg-category .twg-cat-band__text p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--twg-cat-muted);
	margin: 0 0 14px;
	max-width: 420px; /* a narrower measure: easier reading, and a deeper photo beside it */
}
body.twg-category .twg-cat-band__text p:last-child {
	margin-bottom: 0;
}

/* ---- Widths ---- */
/* ---- Sticky header + filter row on desktop (0.15.5, Colin, 5 Oct): the hero scrolls away, the theme's header
   (.header-wrapper, the sticky parent is .page-wrapper) and then the filter tiles stay at the top. --twg-header-h is
   set by twist-category.js from the header's real height; the admin bar variable is WordPress's own. ---- */
@media (min-width: 992px) {
	body.twg-category .header-wrapper {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 1030;
		background: #fff;
	}
	body.twg-category .twg-cat-filters {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--twg-header-h, 135px));
		z-index: 1020;
		background: #fff;
		transition: box-shadow 0.2s;
	}
	body.twg-category .twg-cat-filters.is-stuck {
		box-shadow: 0 8px 16px -10px rgba(17, 22, 16, 0.28);
	}
}

@media (max-width: 1199px) {
	body.twg-category .twg-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.twg-category .twg-cat-hero__title {
		font-size: 52px;
	}
}
@media (max-width: 991px) {
	body.twg-category {
		--twg-cat-gutter: 24px;
	}
	body.twg-category .twg-cat-filters__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.twg-category .twg-cat-band__photo {
		order: 0;
		min-height: 0;
		height: 260px; /* the photo above the copy, the same width as the text (0.15.22) */
	}
	body.twg-category .twg-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
	}
	body.twg-category .twg-cat-band {
		padding: 32px 0;
	}
	body.twg-category .twg-cat-band__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}
@media (max-width: 767px) {
	body.twg-category {
		--twg-cat-gutter: 16px;
	}
	/* Porto's floating "filters" toggle for the off-canvas category menu sits over the hero title on phones. On this
	   page the pills and the header's Shop menu cover the same ground, so the toggle stays out of the way. */
	body.twg-category .porto-woo-category-sidebar .sidebar-toggle {
		display: none !important;
	}
	body.twg-category .twg-cat-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding-top: 24px;
	}
	body.twg-category .twg-cat-hero__title {
		font-size: 42px;
	}
	body.twg-category .twg-cat-hero__intro {
		font-size: 16px;
		margin-bottom: 20px;
	}
	body.twg-category .twg-cat-hero__photo {
		text-align: center;
	}
	body.twg-category .twg-cat-hero__img {
		max-height: 200px;
		object-position: center bottom;
	}
	body.twg-category .twg-cat-filters__inner {
		padding-top: 14px;
		padding-bottom: 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	body.twg-category .twg-cat-filters__label {
		font-size: 16px;
		margin: 0 0 2px;
	}
	body.twg-category .twg-cat-pill {
		min-height: 44px;
		padding: 10px 8px;
		font-size: 12px;
	}
	body.twg-category .twg-cat-card__body {
		padding: 12px 8px 10px 10px;
	}
	body.twg-category .twg-cat-card__title {
		font-size: 18px;
	}
}
@media (max-width: 420px) {
	body.twg-category .twg-cat-grid {
		gap: 22px 12px;
	}
	body.twg-category .twg-cat-card__button {
		padding: 11px 8px;
		font-size: 13px;
	}
}

/* ---- Phones and tablets (0.15.19, Tom on the 5 Oct call): the five filter tiles would take a quarter of a phone screen
   if they were pinned as a stack, so below 992px they become one row of compact chips that scrolls sideways, pinned
   at the top on its own (the theme's phone header is not sticky). The chosen chip is scrolled into view by
   twist-category.js. ---- */
@media (max-width: 991px) {
	/* The theme clips .page-wrapper (overflow: hidden) on phones, which turns it into the sticky row's scroll container
	   and stops it pinning. clip keeps the sideways clipping without doing that; browsers without clip get visible. */
	body.twg-category .page-wrapper {
		overflow: visible !important;
		overflow: clip !important;
	}
	body.twg-category .twg-cat-filters {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 1020;
		background: #fff;
		transition: box-shadow 0.2s;
	}
	body.twg-category .twg-cat-filters.is-stuck {
		box-shadow: 0 8px 16px -10px rgba(17, 22, 16, 0.28);
	}
	body.twg-category .twg-cat-filters__inner {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 10px 16px !important;
		scroll-padding: 0 16px;
		max-width: none;
	}
	body.twg-category .twg-cat-filters__inner::-webkit-scrollbar {
		display: none;
	}
	body.twg-category .twg-cat-filters__inner::before,
	body.twg-category .twg-cat-filters__inner::after {
		content: none !important;
		display: none !important;
	}
	body.twg-category .twg-cat-filters__label {
		display: none;
	}
	body.twg-category .twg-cat-pill {
		flex: 0 0 auto;
		width: auto;
		min-height: 34px;
		padding: 8px 14px;
		font-size: 12px;
		white-space: nowrap;
	}
}

/* ---- Phones (0.15.21, Colin): chips that run off the screen are poor practice, so under 768px the filters become one
   pinned bar showing the current filter; a tap opens the five options as a full-width list under it, nothing hidden
   sideways. twist-category.js builds the bar from the existing tiles; without JS the chip row still shows. ---- */
body.twg-category .twg-cat-dd {
	display: none;
}
@media (max-width: 767px) {
	body.twg-category .twg-cat-filters.has-dd {
		padding: 8px 16px;
	}
	body.twg-category .twg-cat-filters.has-dd .twg-cat-dd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 44px;
		padding: 10px 14px;
		border: 1px solid var(--twg-cat-ink);
		border-radius: 0;
		background: #fff;
		color: var(--twg-cat-ink);
		font: 400 12px/1.2 var(--twg-cat-font);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}
	body.twg-category .twg-cat-filters.has-dd .twg-cat-dd__chev {
		flex: none;
		width: 9px;
		height: 9px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s;
	}
	body.twg-category .twg-cat-filters.has-dd.is-open .twg-cat-dd__chev {
		transform: translateY(2px) rotate(225deg);
	}
	body.twg-category .twg-cat-filters.has-dd.is-open .twg-cat-dd {
		background: var(--twg-cat-twist);
	}
	body.twg-category .twg-cat-filters.has-dd .twg-cat-filters__inner {
		display: none !important;
	}
	body.twg-category .twg-cat-filters.has-dd.is-open .twg-cat-filters__inner {
		display: flex !important;
		flex-direction: column;
		gap: 6px;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		overflow: visible;
		padding: 0 16px 12px !important;
		background: #fff;
		border-bottom: 1px solid var(--twg-cat-line);
		box-shadow: 0 12px 20px -12px rgba(17, 22, 16, 0.3);
	}
	body.twg-category .twg-cat-filters.has-dd .twg-cat-pill {
		width: 100%;
		min-height: 42px;
		padding: 10px 14px;
		text-align: left;
		white-space: normal;
	}
}